Fix some bugs in corpus analysis and simplify code

This commit is contained in:
Patrick Jentsch 2022-10-07 09:43:11 +02:00
parent ca27f2e6f2
commit 086fe22649
4 changed files with 57 additions and 69 deletions

View File

@ -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");

View File

@ -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 = {};

View File

@ -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) {

View File

@ -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) {