mirror of
				https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
				synced 2025-11-04 12:22:47 +00:00 
			
		
		
		
	Fix some bugs in corpus analysis and simplify code
This commit is contained in:
		@@ -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) {
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user