From 086fe22649045a2a462aadc6b14cea40f274d2f3 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
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 += `<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
html += `<span class="p-attr" data-cpos="${cpos}"></span>`;
// Add entity end
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>';
}
}
@@ -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 += `
<p>${this.cposRange2HTML(item[0], item[item.length - 1])}</p>
`.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 {
</a>
</li>
`.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 += `
<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>
@@ -150,10 +141,10 @@ class CorpusAnalysisReader {
</a>
</li>
`.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 += `<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
html += `<span class="p-attr" data-cpos="${cpos}"></span>`;
// Add entity end
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>';
}
}
@@ -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) {
--
GitLab