From 086fe22649045a2a462aadc6b14cea40f274d2f3 Mon Sep 17 00:00:00 2001 From: Patrick Jentsch Date: Fri, 7 Oct 2022 09:43:11 +0200 Subject: [PATCH] Fix some bugs in corpus analysis and simplify code --- app/static/css/colors.scss | 28 +++++++++++ .../js/CorpusAnalysis/CorpusAnalysisApp.js | 22 -------- .../CorpusAnalysisConcordance.js | 26 ++++------ .../js/CorpusAnalysis/CorpusAnalysisReader.js | 50 +++++++------------ 4 files changed, 57 insertions(+), 69 deletions(-) diff --git a/app/static/css/colors.scss b/app/static/css/colors.scss index 0dfe27d5..22feeb41 100644 --- a/app/static/css/colors.scss +++ b/app/static/css/colors.scss @@ -70,6 +70,27 @@ $color: ( "COMPLETED": #4caf50, "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 { .btn, .btn-small, .btn-large, .btn-floating { background-color: map-deep-get($color, "baseline", "secondary"); diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js b/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js index c07ff35d..5ca7960b 100644 --- a/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js +++ b/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js @@ -1,26 +1,4 @@ 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) { this.data = {}; diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js b/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js index b6612e01..1c88d32a 100644 --- a/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js +++ b/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js @@ -331,26 +331,24 @@ class CorpusAnalysisConcordance { cposRange2HTML(firstCpos, lastCpos) { let subcorpus = this.data.subcorpora[this.settings.selectedSubcorpus]; - let prevPAttr, pAttr, nextPAttr; - let isEntityStart, isEntityEnd; let html = ''; for (let cpos = firstCpos; cpos <= lastCpos; cpos++) { - prevPAttr = cpos > firstCpos ? subcorpus.p.lookups.cpos_lookup[cpos - 1] : null; - pAttr = subcorpus.p.lookups.cpos_lookup[cpos]; - nextPAttr = cpos < lastCpos ? subcorpus.p.lookups.cpos_lookup[cpos + 1] : null; - isEntityStart = 'ent' in pAttr && pAttr.ent !== prevPAttr?.ent; - isEntityEnd = 'ent' in pAttr && pAttr.ent !== nextPAttr?.ent; + let prevPAttr = cpos > firstCpos ? subcorpus.p.lookups.cpos_lookup[cpos - 1] : null; + let pAttr = subcorpus.p.lookups.cpos_lookup[cpos]; + let nextPAttr = cpos < lastCpos ? subcorpus.p.lookups.cpos_lookup[cpos + 1] : null; + let isEntityStart = 'ent' in pAttr && pAttr.ent !== prevPAttr?.ent; + let isEntityEnd = 'ent' in pAttr && pAttr.ent !== nextPAttr?.ent; // Add a space before pAttr if (cpos !== firstCpos || pAttr.simple_pos !== 'PUNCT') {html += ' ';} // Add entity start if (isEntityStart) { - html += ``; + html += ``; } // Add pAttr html += ``; // Add entity end if (isEntityEnd) { - html += ` ${subcorpus.p.lookups.ent_lookup[pAttr.ent].type}`; + html += ` ${subcorpus.p.lookups.ent_lookup[pAttr.ent].type}`; html += ''; } } @@ -369,19 +367,17 @@ class CorpusAnalysisConcordance { pAttrElement.setAttribute('class', 'p-attr'); } // Set basic styling on .s-attr[data-type="ent"] elements - for (let entElement of this.elements.subcorpusItems.querySelectorAll('.s-attr[data-type="ent"]')) { - entElement.querySelector('.s-attr[data-type="ent_type"]').classList.add('hide'); + for (let entElement of this.elements.subcorpusItems.querySelectorAll('.s-attr[data-s-attr-type="ent"]')) { + entElement.querySelector('.ent-indicator').classList.add('hide'); entElement.removeAttribute('style'); entElement.setAttribute('class', 's-attr'); } } if (this.settings.textStyle >= 1) { // Set advanced styling on .s-attr[data-type="ent"] elements - for (let entElement of this.elements.subcorpusItems.querySelectorAll('.s-attr[data-type="ent"]')) { - let ent = subcorpus.p.lookups.ent_lookup[entElement.dataset.id]; + for (let entElement of this.elements.subcorpusItems.querySelectorAll('.s-attr[data-s-attr-type="ent"]')) { entElement.classList.add('chip'); - entElement.style.backgroundColor = CorpusAnalysisApp.entitiyColors[ent.type]; - entElement.querySelector('.s-attr[data-type="ent_type"]').classList.remove('hide'); + entElement.querySelector('.ent-indicator').classList.remove('hide'); } } if (this.settings.textStyle >= 2) { diff --git a/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js b/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js index 64902988..e1c64d83 100644 --- a/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js +++ b/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js @@ -75,12 +75,9 @@ class CorpusAnalysisReader { } clearCorpus() { - let pAttrElement; - let pAttrElements; - // Destroy with .p-attr elements associated Materialize tooltips - pAttrElements = this.elements.corpus.querySelectorAll('.p-attr.tooltipped'); - for (pAttrElement of pAttrElements) { + let pAttrElements = this.elements.corpus.querySelectorAll('.p-attr.tooltipped'); + for (let pAttrElement of pAttrElements) { M.Tooltip.getInstance(pAttrElement)?.destroy(); } this.elements.corpus.innerHTML = ` @@ -92,10 +89,8 @@ class CorpusAnalysisReader { } renderCorpus() { - let item; - this.clearCorpus(); - item = this.data.corpus.p.items[0]; + let item = this.data.corpus.p.items[0]; this.elements.corpus.innerHTML += `

${this.cposRange2HTML(item[0], item[item.length - 1])}

`.trim(); @@ -109,10 +104,6 @@ class CorpusAnalysisReader { } renderCorpusPagination() { - let i; - let page; - let paginateTriggerElement; - this.clearCorpusPagination(); if (this.data.corpus.p.pages === 0) {return;} this.elements.corpusPagination.innerHTML += ` @@ -129,7 +120,7 @@ class CorpusAnalysisReader { `.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 += `
  • ${i} @@ -150,10 +141,10 @@ class CorpusAnalysisReader {
    • `.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 => { event.preventDefault(); - page = parseInt(paginateTriggerElement.dataset.target); + let page = parseInt(paginateTriggerElement.dataset.target); this.page(page); }); } @@ -161,27 +152,24 @@ class CorpusAnalysisReader { } cposRange2HTML(firstCpos, lastCpos) { - let cpos; - let prevPAttr, pAttr, nextPAttr; - let isEntityStart, isEntityEnd; let html = ''; - for (cpos = firstCpos; cpos <= lastCpos; cpos++) { - prevPAttr = cpos > firstCpos ? this.data.corpus.p.lookups.cpos_lookup[cpos - 1] : null; - pAttr = this.data.corpus.p.lookups.cpos_lookup[cpos]; - nextPAttr = cpos < lastCpos ? this.data.corpus.p.lookups.cpos_lookup[cpos + 1] : null; - isEntityStart = 'ent' in pAttr && pAttr.ent !== prevPAttr?.ent; - isEntityEnd = 'ent' in pAttr && pAttr.ent !== nextPAttr?.ent; + for (let cpos = firstCpos; cpos <= lastCpos; cpos++) { + let prevPAttr = cpos > firstCpos ? this.data.corpus.p.lookups.cpos_lookup[cpos - 1] : null; + let pAttr = this.data.corpus.p.lookups.cpos_lookup[cpos]; + let nextPAttr = cpos < lastCpos ? this.data.corpus.p.lookups.cpos_lookup[cpos + 1] : null; + let isEntityStart = 'ent' in pAttr && pAttr.ent !== prevPAttr?.ent; + let isEntityEnd = 'ent' in pAttr && pAttr.ent !== nextPAttr?.ent; // Add a space before pAttr if (cpos !== firstCpos || pAttr.simple_pos !== 'PUNCT') {html += ' ';} // Add entity start if (isEntityStart) { - html += ``; + html += ``; } // Add pAttr html += ``; // Add entity end if (isEntityEnd) { - html += ` ${this.data.corpus.p.lookups.ent_lookup[pAttr.ent].type}`; + html += ` ${this.data.corpus.p.lookups.ent_lookup[pAttr.ent].type}`; html += ''; } } @@ -219,19 +207,17 @@ class CorpusAnalysisReader { pAttrElement.setAttribute('class', 'p-attr'); } // Set basic styling on .s-attr[data-type="ent"] elements - for (let entElement of this.elements.corpus.querySelectorAll('.s-attr[data-type="ent"]')) { - entElement.querySelector('.s-attr[data-type="ent_type"]').classList.add('hide'); + for (let entElement of this.elements.corpus.querySelectorAll('.s-attr[data-s-attr-type="ent"]')) { + entElement.querySelector('.ent-indicator').classList.add('hide'); entElement.removeAttribute('style'); entElement.setAttribute('class', 's-attr'); } } if (this.settings.textStyle >= 1) { // Set advanced styling on .s-attr[data-type="ent"] elements - for (let entElement of this.elements.corpus.querySelectorAll('.s-attr[data-type="ent"]')) { - let ent = this.data.corpus.p.lookups.ent_lookup[entElement.dataset.id]; + for (let entElement of this.elements.corpus.querySelectorAll('.s-attr[data-s-attr-type="ent"]')) { entElement.classList.add('chip'); - entElement.style.backgroundColor = CorpusAnalysisApp.entitiyColors[ent.type]; - entElement.querySelector('.s-attr[data-type="ent_type"]').classList.remove('hide'); + entElement.querySelector('.ent-indicator').classList.remove('hide'); } } if (this.settings.textStyle >= 2) {