mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-12-24 10:34:17 +00:00
Fix some bugs in corpus analysis and simplify code
This commit is contained in:
parent
ca27f2e6f2
commit
086fe22649
@ -70,6 +70,27 @@ $color: (
|
|||||||
"COMPLETED": #4caf50,
|
"COMPLETED": #4caf50,
|
||||||
"FAILED": #f44336
|
"FAILED": #f44336
|
||||||
)
|
)
|
||||||
|
),
|
||||||
|
"s-attr": (
|
||||||
|
"PERSON": #a6e22d,
|
||||||
|
"PER": #a6e22d,
|
||||||
|
"NORP": #ef60b4,
|
||||||
|
"FACILITY": #43c6fc,
|
||||||
|
"ORG": #43c6fc,
|
||||||
|
"GPE": #fd9720,
|
||||||
|
"LOC": #fd9720,
|
||||||
|
"PRODUCT": #a99dfb,
|
||||||
|
"MISC": #a99dfb,
|
||||||
|
"EVENT": #fc0,
|
||||||
|
"WORK_OF_ART": #fc0,
|
||||||
|
"LANGUAGE": #fc0,
|
||||||
|
"DATE": #2fbbab,
|
||||||
|
"TIME": #2fbbab,
|
||||||
|
"PERCENT": #bbb,
|
||||||
|
"MONEY": #bbb,
|
||||||
|
"QUANTITY": #bbb,
|
||||||
|
"ORDINAL": #bbb,
|
||||||
|
"CARDINAL": #bbb
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -195,6 +216,13 @@ $color: (
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@each $key, $color-code in map-get($color, "s-attr") {
|
||||||
|
.chip.s-attr[data-s-attr-type="ent"][data-s-attr-ent-type="#{$key}"] {
|
||||||
|
background-color: $color-code !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
main {
|
main {
|
||||||
.btn, .btn-small, .btn-large, .btn-floating {
|
.btn, .btn-small, .btn-large, .btn-floating {
|
||||||
background-color: map-deep-get($color, "baseline", "secondary");
|
background-color: map-deep-get($color, "baseline", "secondary");
|
||||||
|
@ -1,26 +1,4 @@
|
|||||||
class CorpusAnalysisApp {
|
class CorpusAnalysisApp {
|
||||||
static entitiyColors = {
|
|
||||||
PERSON: '#a6e22d',
|
|
||||||
PER: '#a6e22d',
|
|
||||||
NORP: '#ef60b4',
|
|
||||||
FACILITY: '#43c6fc',
|
|
||||||
ORG: '#43c6fc',
|
|
||||||
GPE: '#fd9720',
|
|
||||||
LOC: '#fd9720',
|
|
||||||
PRODUCT: '#a99dfb',
|
|
||||||
MISC: '#a99dfb',
|
|
||||||
EVENT: ':#fc0',
|
|
||||||
WORK_OF_ART: '#fc0',
|
|
||||||
LANGUAGE: '#fc0',
|
|
||||||
DATE: '#2fbbab',
|
|
||||||
TIME: '#2fbbab',
|
|
||||||
PERCENT: '#bbb',
|
|
||||||
MONEY: '#bbb',
|
|
||||||
QUANTITY: '#bbb',
|
|
||||||
ORDINAL: '#bbb',
|
|
||||||
CARDINAL: '#bbb'
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(corpusId) {
|
constructor(corpusId) {
|
||||||
this.data = {};
|
this.data = {};
|
||||||
|
|
||||||
|
@ -331,26 +331,24 @@ class CorpusAnalysisConcordance {
|
|||||||
|
|
||||||
cposRange2HTML(firstCpos, lastCpos) {
|
cposRange2HTML(firstCpos, lastCpos) {
|
||||||
let subcorpus = this.data.subcorpora[this.settings.selectedSubcorpus];
|
let subcorpus = this.data.subcorpora[this.settings.selectedSubcorpus];
|
||||||
let prevPAttr, pAttr, nextPAttr;
|
|
||||||
let isEntityStart, isEntityEnd;
|
|
||||||
let html = '';
|
let html = '';
|
||||||
for (let cpos = firstCpos; cpos <= lastCpos; cpos++) {
|
for (let cpos = firstCpos; cpos <= lastCpos; cpos++) {
|
||||||
prevPAttr = cpos > firstCpos ? subcorpus.p.lookups.cpos_lookup[cpos - 1] : null;
|
let prevPAttr = cpos > firstCpos ? subcorpus.p.lookups.cpos_lookup[cpos - 1] : null;
|
||||||
pAttr = subcorpus.p.lookups.cpos_lookup[cpos];
|
let pAttr = subcorpus.p.lookups.cpos_lookup[cpos];
|
||||||
nextPAttr = cpos < lastCpos ? subcorpus.p.lookups.cpos_lookup[cpos + 1] : null;
|
let nextPAttr = cpos < lastCpos ? subcorpus.p.lookups.cpos_lookup[cpos + 1] : null;
|
||||||
isEntityStart = 'ent' in pAttr && pAttr.ent !== prevPAttr?.ent;
|
let isEntityStart = 'ent' in pAttr && pAttr.ent !== prevPAttr?.ent;
|
||||||
isEntityEnd = 'ent' in pAttr && pAttr.ent !== nextPAttr?.ent;
|
let isEntityEnd = 'ent' in pAttr && pAttr.ent !== nextPAttr?.ent;
|
||||||
// Add a space before pAttr
|
// Add a space before pAttr
|
||||||
if (cpos !== firstCpos || pAttr.simple_pos !== 'PUNCT') {html += ' ';}
|
if (cpos !== firstCpos || pAttr.simple_pos !== 'PUNCT') {html += ' ';}
|
||||||
// Add entity start
|
// Add entity start
|
||||||
if (isEntityStart) {
|
if (isEntityStart) {
|
||||||
html += `<span class="s-attr" data-cpos="${cpos}" data-id="${pAttr.ent}" data-type="ent">`;
|
html += `<span class="s-attr" data-cpos="${cpos}" data-id="${pAttr.ent}" data-s-attr-type="ent" data-s-attr-ent-type="${subcorpus.p.lookups.ent_lookup[pAttr.ent].type}">`;
|
||||||
}
|
}
|
||||||
// Add pAttr
|
// Add pAttr
|
||||||
html += `<span class="p-attr" data-cpos="${cpos}"></span>`;
|
html += `<span class="p-attr" data-cpos="${cpos}"></span>`;
|
||||||
// Add entity end
|
// Add entity end
|
||||||
if (isEntityEnd) {
|
if (isEntityEnd) {
|
||||||
html += ` <span class="badge black-text hide new s-attr white" cpos="${cpos}" data-type="ent_type" data-badge-caption="">${subcorpus.p.lookups.ent_lookup[pAttr.ent].type}</span>`;
|
html += ` <span class="black-text hide new white ent-indicator" data-badge-caption="">${subcorpus.p.lookups.ent_lookup[pAttr.ent].type}</span>`;
|
||||||
html += '</span>';
|
html += '</span>';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -369,19 +367,17 @@ class CorpusAnalysisConcordance {
|
|||||||
pAttrElement.setAttribute('class', 'p-attr');
|
pAttrElement.setAttribute('class', 'p-attr');
|
||||||
}
|
}
|
||||||
// Set basic styling on .s-attr[data-type="ent"] elements
|
// Set basic styling on .s-attr[data-type="ent"] elements
|
||||||
for (let entElement of this.elements.subcorpusItems.querySelectorAll('.s-attr[data-type="ent"]')) {
|
for (let entElement of this.elements.subcorpusItems.querySelectorAll('.s-attr[data-s-attr-type="ent"]')) {
|
||||||
entElement.querySelector('.s-attr[data-type="ent_type"]').classList.add('hide');
|
entElement.querySelector('.ent-indicator').classList.add('hide');
|
||||||
entElement.removeAttribute('style');
|
entElement.removeAttribute('style');
|
||||||
entElement.setAttribute('class', 's-attr');
|
entElement.setAttribute('class', 's-attr');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.settings.textStyle >= 1) {
|
if (this.settings.textStyle >= 1) {
|
||||||
// Set advanced styling on .s-attr[data-type="ent"] elements
|
// Set advanced styling on .s-attr[data-type="ent"] elements
|
||||||
for (let entElement of this.elements.subcorpusItems.querySelectorAll('.s-attr[data-type="ent"]')) {
|
for (let entElement of this.elements.subcorpusItems.querySelectorAll('.s-attr[data-s-attr-type="ent"]')) {
|
||||||
let ent = subcorpus.p.lookups.ent_lookup[entElement.dataset.id];
|
|
||||||
entElement.classList.add('chip');
|
entElement.classList.add('chip');
|
||||||
entElement.style.backgroundColor = CorpusAnalysisApp.entitiyColors[ent.type];
|
entElement.querySelector('.ent-indicator').classList.remove('hide');
|
||||||
entElement.querySelector('.s-attr[data-type="ent_type"]').classList.remove('hide');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.settings.textStyle >= 2) {
|
if (this.settings.textStyle >= 2) {
|
||||||
|
@ -75,12 +75,9 @@ class CorpusAnalysisReader {
|
|||||||
}
|
}
|
||||||
|
|
||||||
clearCorpus() {
|
clearCorpus() {
|
||||||
let pAttrElement;
|
|
||||||
let pAttrElements;
|
|
||||||
|
|
||||||
// Destroy with .p-attr elements associated Materialize tooltips
|
// Destroy with .p-attr elements associated Materialize tooltips
|
||||||
pAttrElements = this.elements.corpus.querySelectorAll('.p-attr.tooltipped');
|
let pAttrElements = this.elements.corpus.querySelectorAll('.p-attr.tooltipped');
|
||||||
for (pAttrElement of pAttrElements) {
|
for (let pAttrElement of pAttrElements) {
|
||||||
M.Tooltip.getInstance(pAttrElement)?.destroy();
|
M.Tooltip.getInstance(pAttrElement)?.destroy();
|
||||||
}
|
}
|
||||||
this.elements.corpus.innerHTML = `
|
this.elements.corpus.innerHTML = `
|
||||||
@ -92,10 +89,8 @@ class CorpusAnalysisReader {
|
|||||||
}
|
}
|
||||||
|
|
||||||
renderCorpus() {
|
renderCorpus() {
|
||||||
let item;
|
|
||||||
|
|
||||||
this.clearCorpus();
|
this.clearCorpus();
|
||||||
item = this.data.corpus.p.items[0];
|
let item = this.data.corpus.p.items[0];
|
||||||
this.elements.corpus.innerHTML += `
|
this.elements.corpus.innerHTML += `
|
||||||
<p>${this.cposRange2HTML(item[0], item[item.length - 1])}</p>
|
<p>${this.cposRange2HTML(item[0], item[item.length - 1])}</p>
|
||||||
`.trim();
|
`.trim();
|
||||||
@ -109,10 +104,6 @@ class CorpusAnalysisReader {
|
|||||||
}
|
}
|
||||||
|
|
||||||
renderCorpusPagination() {
|
renderCorpusPagination() {
|
||||||
let i;
|
|
||||||
let page;
|
|
||||||
let paginateTriggerElement;
|
|
||||||
|
|
||||||
this.clearCorpusPagination();
|
this.clearCorpusPagination();
|
||||||
if (this.data.corpus.p.pages === 0) {return;}
|
if (this.data.corpus.p.pages === 0) {return;}
|
||||||
this.elements.corpusPagination.innerHTML += `
|
this.elements.corpusPagination.innerHTML += `
|
||||||
@ -129,7 +120,7 @@ class CorpusAnalysisReader {
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
`.trim();
|
`.trim();
|
||||||
for (i = 1; i <= this.data.corpus.p.pages; i++) {
|
for (let i = 1; i <= this.data.corpus.p.pages; i++) {
|
||||||
this.elements.corpusPagination.innerHTML += `
|
this.elements.corpusPagination.innerHTML += `
|
||||||
<li class="${i === this.data.corpus.p.page ? 'active' : 'waves-effect'}">
|
<li class="${i === this.data.corpus.p.page ? 'active' : 'waves-effect'}">
|
||||||
<a class="corpus-analysis-action pagination-trigger" ${i === this.data.corpus.p.page ? '' : 'data-target="' + i + '"'}>${i}</a>
|
<a class="corpus-analysis-action pagination-trigger" ${i === this.data.corpus.p.page ? '' : 'data-target="' + i + '"'}>${i}</a>
|
||||||
@ -150,10 +141,10 @@ class CorpusAnalysisReader {
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
`.trim();
|
`.trim();
|
||||||
for (paginateTriggerElement of this.elements.corpusPagination.querySelectorAll('.pagination-trigger[data-target]')) {
|
for (let paginateTriggerElement of this.elements.corpusPagination.querySelectorAll('.pagination-trigger[data-target]')) {
|
||||||
paginateTriggerElement.addEventListener('click', event => {
|
paginateTriggerElement.addEventListener('click', event => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
page = parseInt(paginateTriggerElement.dataset.target);
|
let page = parseInt(paginateTriggerElement.dataset.target);
|
||||||
this.page(page);
|
this.page(page);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -161,27 +152,24 @@ class CorpusAnalysisReader {
|
|||||||
}
|
}
|
||||||
|
|
||||||
cposRange2HTML(firstCpos, lastCpos) {
|
cposRange2HTML(firstCpos, lastCpos) {
|
||||||
let cpos;
|
|
||||||
let prevPAttr, pAttr, nextPAttr;
|
|
||||||
let isEntityStart, isEntityEnd;
|
|
||||||
let html = '';
|
let html = '';
|
||||||
for (cpos = firstCpos; cpos <= lastCpos; cpos++) {
|
for (let cpos = firstCpos; cpos <= lastCpos; cpos++) {
|
||||||
prevPAttr = cpos > firstCpos ? this.data.corpus.p.lookups.cpos_lookup[cpos - 1] : null;
|
let prevPAttr = cpos > firstCpos ? this.data.corpus.p.lookups.cpos_lookup[cpos - 1] : null;
|
||||||
pAttr = this.data.corpus.p.lookups.cpos_lookup[cpos];
|
let pAttr = this.data.corpus.p.lookups.cpos_lookup[cpos];
|
||||||
nextPAttr = cpos < lastCpos ? this.data.corpus.p.lookups.cpos_lookup[cpos + 1] : null;
|
let nextPAttr = cpos < lastCpos ? this.data.corpus.p.lookups.cpos_lookup[cpos + 1] : null;
|
||||||
isEntityStart = 'ent' in pAttr && pAttr.ent !== prevPAttr?.ent;
|
let isEntityStart = 'ent' in pAttr && pAttr.ent !== prevPAttr?.ent;
|
||||||
isEntityEnd = 'ent' in pAttr && pAttr.ent !== nextPAttr?.ent;
|
let isEntityEnd = 'ent' in pAttr && pAttr.ent !== nextPAttr?.ent;
|
||||||
// Add a space before pAttr
|
// Add a space before pAttr
|
||||||
if (cpos !== firstCpos || pAttr.simple_pos !== 'PUNCT') {html += ' ';}
|
if (cpos !== firstCpos || pAttr.simple_pos !== 'PUNCT') {html += ' ';}
|
||||||
// Add entity start
|
// Add entity start
|
||||||
if (isEntityStart) {
|
if (isEntityStart) {
|
||||||
html += `<span class="s-attr" data-cpos="${cpos}" data-id="${pAttr.ent}" data-type="ent">`;
|
html += `<span class="s-attr" data-cpos="${cpos}" data-id="${pAttr.ent}" data-s-attr-type="ent" data-s-attr-ent-type="${this.data.corpus.p.lookups.ent_lookup[pAttr.ent].type}">`;
|
||||||
}
|
}
|
||||||
// Add pAttr
|
// Add pAttr
|
||||||
html += `<span class="p-attr" data-cpos="${cpos}"></span>`;
|
html += `<span class="p-attr" data-cpos="${cpos}"></span>`;
|
||||||
// Add entity end
|
// Add entity end
|
||||||
if (isEntityEnd) {
|
if (isEntityEnd) {
|
||||||
html += ` <span class="badge black-text hide new s-attr white" cpos="${cpos}" data-type="ent_type" data-badge-caption="">${this.data.corpus.p.lookups.ent_lookup[pAttr.ent].type}</span>`;
|
html += ` <span class="badge black-text hide new white ent-indicator" data-badge-caption="">${this.data.corpus.p.lookups.ent_lookup[pAttr.ent].type}</span>`;
|
||||||
html += '</span>';
|
html += '</span>';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -219,19 +207,17 @@ class CorpusAnalysisReader {
|
|||||||
pAttrElement.setAttribute('class', 'p-attr');
|
pAttrElement.setAttribute('class', 'p-attr');
|
||||||
}
|
}
|
||||||
// Set basic styling on .s-attr[data-type="ent"] elements
|
// Set basic styling on .s-attr[data-type="ent"] elements
|
||||||
for (let entElement of this.elements.corpus.querySelectorAll('.s-attr[data-type="ent"]')) {
|
for (let entElement of this.elements.corpus.querySelectorAll('.s-attr[data-s-attr-type="ent"]')) {
|
||||||
entElement.querySelector('.s-attr[data-type="ent_type"]').classList.add('hide');
|
entElement.querySelector('.ent-indicator').classList.add('hide');
|
||||||
entElement.removeAttribute('style');
|
entElement.removeAttribute('style');
|
||||||
entElement.setAttribute('class', 's-attr');
|
entElement.setAttribute('class', 's-attr');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.settings.textStyle >= 1) {
|
if (this.settings.textStyle >= 1) {
|
||||||
// Set advanced styling on .s-attr[data-type="ent"] elements
|
// Set advanced styling on .s-attr[data-type="ent"] elements
|
||||||
for (let entElement of this.elements.corpus.querySelectorAll('.s-attr[data-type="ent"]')) {
|
for (let entElement of this.elements.corpus.querySelectorAll('.s-attr[data-s-attr-type="ent"]')) {
|
||||||
let ent = this.data.corpus.p.lookups.ent_lookup[entElement.dataset.id];
|
|
||||||
entElement.classList.add('chip');
|
entElement.classList.add('chip');
|
||||||
entElement.style.backgroundColor = CorpusAnalysisApp.entitiyColors[ent.type];
|
entElement.querySelector('.ent-indicator').classList.remove('hide');
|
||||||
entElement.querySelector('.s-attr[data-type="ent_type"]').classList.remove('hide');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.settings.textStyle >= 2) {
|
if (this.settings.textStyle >= 2) {
|
||||||
|
Loading…
Reference in New Issue
Block a user