New context options

2025-11-03 20:02:47 +00:00 · 2020-04-15 14:55:29 +02:00
parent 34e8d952b6
commit 9031ca5845
4 changed files with 133 additions and 80 deletions
--- a/app/corpora/events.py
+++ b/app/corpora/events.py
@@ -93,7 +93,7 @@ def corpus_analysis_inspect_match(payload):
    try:
        corpus = client.corpora.get('CORPUS')
        s = corpus.structural_attributes.get('s')
-        payload = s.export(payload['first_cpos'], payload['last_cpos'], context=3)
+        payload = s.export(payload['first_cpos'], payload['last_cpos'], context=10)
        payload['cpos_ranges'] = True
    except cqi.errors.CQiException as e:
        payload = {'code': e.code, 'desc': e.description, 'msg': e.name}
--- a/app/corpora/forms.py
+++ b/app/corpora/forms.py
@@ -1,7 +1,7 @@
 from flask_wtf import FlaskForm
 from wtforms import (BooleanField, FileField, StringField, SubmitField,
                     ValidationError, IntegerField, SelectField)
-from wtforms.validators import DataRequired, Length
+from wtforms.validators import DataRequired, Length, NumberRange


 class AddCorpusFileForm(FlaskForm):
@@ -88,19 +88,9 @@ class DisplayOptionsForm(FlaskForm):
 class InspectDisplayOptionsForm(FlaskForm):
    expert_mode_inspect = BooleanField('Expert mode')
    highlight_sentences = BooleanField('Highlight sentences')
-    context_sentences = SelectField('Context sentences',
-                                    choices=[('', 'Choose your option'),
-                                             ('1', '1'),
-                                             ('2', '2'),
-                                             ('3', '3'),
-                                             ('4', '4'),
-                                             ('5', '5'),
-                                             ('6', '6'),
-                                             ('7', '7'),
-                                             ('8', '8'),
-                                             ('9', '9'),
-                                             ('10', '10')],
-                                    default=3)
+    context_sentences = IntegerField('Context sentences',
+                                     validators=[NumberRange(min=0, max=10)],
+                                     default=3)


 class QueryDownloadForm(FlaskForm):
--- a/app/static/js/nopaque.lists.js
+++ b/app/static/js/nopaque.lists.js
@@ -177,62 +177,111 @@ class ResultsList extends List {
          );
  }

+  HTMLTStroElement(htmlStr) {
+    // https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro/35385518#35385518
+    let template = document.createElement("template");
+    htmlStr = htmlStr.trim();
+    template.innerHTML = htmlStr;
+    return template.content.firstChild;
+    }
+
  showMatchContext(response) {
+    this.contextData;
    let c;
-    let contextData;
    let contextModalLoading;
    let contextModalReady;
    let contextResultsElement;
    let expertModeSwitchElement;
    let lc;
+    let modalTokenElements;
    let partElement;
    let rc;
    let token;
-    let tokenElement;
-    let tokenElements;
-    contextData = response.payload;
+    let tokenHTMLArray;
+    let uniqueS;
+    let htmlTokenStr;
+    let tokenHTMlElement;
+
+    this.contextData = response.payload;
    contextResultsElement = document.getElementById("context-results");
    expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
+    uniqueS = new Set();
    // check if cpos ranges are used or not
-    if (contextData.cpos_ranges == true) {
+    if (this.contextData.cpos_ranges == true) {
      // python range like function from MDN
      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Sequence_generator_(range)
      const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
-      lc = range(contextData.match.lc[0], contextData.match.lc[1], 1)
-      c = range(contextData.match.c[0], contextData.match.c[1], 1)
-      rc = range(contextData.match.rc[0], contextData.match.rc[1], 1)
+      lc = range(this.contextData.match.lc[0], this.contextData.match.lc[1], 1)
+      c = range(this.contextData.match.c[0], this.contextData.match.c[1], 1)
+      rc = range(this.contextData.match.rc[0], this.contextData.match.rc[1], 1)
    } else {
-      lc = contextData.match.lc;
-      c = contextData.match.c;
-      rc = contextData.match.rc;
+      lc = this.contextData.match.lc;
+      c = this.contextData.match.c;
+      rc = this.contextData.match.rc;
    }
    // create sentence strings as tokens
-    partElement = document.createElement("p");
+    tokenHTMLArray = [];
    for (let cpos of lc) {
-      token = contextData.cpos_lookup[cpos];
-      partElement.insertAdjacentHTML("beforeend",
-        `<span class="token" data-cpos="${cpos}">${token.word} </span>`);
-      contextResultsElement.append(partElement);
+      token = this.contextData.cpos_lookup[cpos];
+      uniqueS.add(token.s)
+      htmlTokenStr = `<span class="token"` +
+                           `data-sid="${token.s}"` +
+                           `data-cpos="${cpos}">` +
+                       `${token.word}` +
+                     `</span>`;
+      tokenHTMlElement = this.HTMLTStroElement(htmlTokenStr)
+      tokenHTMLArray.push(tokenHTMlElement);
    }
    for (let cpos of c) {
-      token = contextData.cpos_lookup[cpos];
-      partElement.insertAdjacentHTML("beforeend",
-        `<span class="token bold light-green" data-cpos="${cpos}"` +
-        `style="text-decoration-line: underline;">${token.word} </span>`);
-      contextResultsElement.append(partElement);
+      token = this.contextData.cpos_lookup[cpos];
+      uniqueS.add(token.s)
+      htmlTokenStr = `<span class="token bold light-green"` +
+                           `data-sid="${token.s}"` +
+                           `data-cpos="${cpos}"` +
+                           `style="text-decoration-line: underline;">` +
+                       `${token.word}` +
+                     `</span>`;
+      tokenHTMlElement = this.HTMLTStroElement(htmlTokenStr)
+      tokenHTMLArray.push(tokenHTMlElement);
    }
    for (let cpos of rc) {
-      token = contextData.cpos_lookup[cpos];
-      partElement.insertAdjacentHTML("beforeend",
-        `<span class="token" data-cpos="${cpos}">${token.word} </span>`);
-      contextResultsElement.append(partElement);
+      token = this.contextData.cpos_lookup[cpos];
+      uniqueS.add(token.s)
+      htmlTokenStr = `<span class="token"` +
+                           `data-sid="${token.s}"` +
+                           `data-cpos="${cpos}">` +
+                       `${token.word}` +
+                     `</span>`;
+      tokenHTMlElement = this.HTMLTStroElement(htmlTokenStr)
+      tokenHTMLArray.push(tokenHTMlElement);
    }
+    console.log(tokenHTMLArray);
+    console.log(uniqueS);
+
+    partElement = document.createElement("p");
+    for (let sId of uniqueS) {
+      let htmlSentence = `<div class="sentence s12" data-sid="${sId}">`;
+      let sentenceElement = this.HTMLTStroElement(htmlSentence);
+      for (let tokenElement of tokenHTMLArray) {
+        if (tokenElement.dataset.sid == sId) {
+          sentenceElement.appendChild(tokenElement);
+          sentenceElement.insertAdjacentHTML("beforeend", `<span>&nbsp;</span>`);
+        } else {
+          continue;
+        }
+      }
+      partElement.appendChild(sentenceElement);
+    }
+    contextResultsElement.appendChild(partElement);
+
    if (expertModeSwitchElement.checked) {
-      tokenElements = partElement.getElementsByClassName("token");
      this.expertModeOn();
    }
  }

+  changeSentenceContext(sValue) {
+  }
+
  // ###### Display options changing live how the matches are being displayed ######

  // Event function that changes the shown hits per page.
@@ -309,6 +358,9 @@ class ResultsList extends List {
    // console.log("Create Tooltip on mouseover.");
    let token;
    token = results.resultsJSON.cpos_lookup[event.target.dataset.cpos];
+    if (!token) {
+      token = this.contextData.cpos_lookup[event.target.dataset.cpos];
+    }
    this.addToolTipToTokenElement(event.target, token);
  }

@@ -321,7 +373,6 @@ class ResultsList extends List {

  expertModeOn() {
    // console.log("Expert mode is on.");
-    let token;
    this.currentExpertTokenElements = document.getElementsByClassName("token");
    this.tooltipEventCreateBind = this.tooltipEventCreate.bind(this);
    this.tooltipEventDestroyBind = this.tooltipEventDestroy.bind(this);
--- a/app/templates/corpora/analyse_corpus.html.j2
+++ b/app/templates/corpora/analyse_corpus.html.j2
@@ -201,38 +201,46 @@
    <h4>Match context</h4>
    <div class="divider"></div>
    <div class="section" id="inspect-display-options">
-      <h5>Display options</h5>
-      <div class="row">
-        <div class="col s9">
-          <p>Expert Mode</p>
-        </div>
-        <div class="col s3 right-align">
-          <div class="switch">
-            <label>
-              {{ inspect_display_options_form.expert_mode_inspect() }}
-              <span class="lever"></span>
-            </label>
+      <form>
+        <h5>Display options</h5>
+        <div class="row">
+          <div class="col s9">
+            <p>{{ inspect_display_options_form.expert_mode_inspect.label.text }}</p>
+          </div>
+          <div class="col s3 right-align">
+            <div class="switch">
+              <label>
+                {{ inspect_display_options_form.expert_mode_inspect() }}
+                <span class="lever"></span>
+              </label>
+            </div>
+          </div>
+          <div class="col s9">
+            <p>{{ inspect_display_options_form.highlight_sentences.label.text }}</p>
+          </div>
+          <div class="col s3 right-align">
+            <div class="switch">
+              <label>
+                {{ inspect_display_options_form.highlight_sentences() }}
+                <span class="lever"></span>
+              </label>
+            </div>
+          </div>
+          <div class="col s6">
+            <p>Nr. of sentences around the match</p>
+          </div>
+          <div class="col s6 right-align">
+            <div class="input-field">
+              <p class="range-field">
+                <input type="range" id="context-sentences"
+                       min="1"
+                       max="10"
+                       value="3" />
+              </p>
+            </div>
          </div>
        </div>
-        <div class="col s9">
-          <p>Highlight sentences</p>
-        </div>
-        <div class="col s3 right-align">
-          <div class="switch">
-            <label>
-              {{ inspect_display_options_form.highlight_sentences() }}
-              <span class="lever"></span>
-            </label>
-          </div>
-        </div>
-        <div class="col s12 m6">
-          <div class="input-field">
-            <i class="material-icons prefix">format_list_numbered</i>
-            {{ inspect_display_options_form.context_sentences() }}
-            {{ inspect_display_options_form.context_sentences.label }}
-          </div>
-        </div>
-      </div>
+      </form>
    </div>
    <div class="divider"></div>
    <div class="section" id="context-results">
@@ -257,16 +265,20 @@
  var collapsibleElements;  // All collapsibleElements on this page
  var collapsibleElements;  // all collapsibles on site
  var contextModal;  // Modal to open on inspect for further match context
+  var contextPerItemElement;
+  var contextSentencesElement;
  var displayOptionsData;  // Getting form data from display options
  var displayOptionsFormElement;  // Form holding the display informations
  var downloadResultsJSONElement;  // button for downloading results as JSON
  var expertModeSwitchElement; // Expert mode switch Element
  var exportModal;  // Download options modal
  var firstPageElement;  // first page element of resultsList pagination
+  var hitsPerPageInputElement;
  var initDisplay;  // CorpusAnalysisDisplay object first undfined on DOMContentLoaded defined
  var initDisplayElement;  // Element for initialization using initDisplay
  var initModal;
  var matchCountElement;  // Total nr. of matches will be displayed in this element
+  var paginationElements;
  var progress;  // global progress value
  var queryDisplay; // CorpusAnalysisDisplay object first undfined on DOMContentLoaded defined
  var queryDisplayElement;  // Element for initialization using queryDisplay
@@ -282,20 +294,19 @@
  var resultsListOptions;  // specifies ResultsList options
  var textLookupCountElement  // Nr of texts the matches occured in will be shown in this element
  var xpath;  // xpath to grab first resultsList page pagination element
-  var hitsPerPageInputElement;
-  var paginationElements;
-  var contextPerItemElement;

  // ###### Initialize variables ######
  client = undefined;
  collapsibleElements = document.querySelector('.collapsible.expandable');
  contextModal = document.getElementById("context-modal");
+  contextSentencesElement = document.getElementById("context-sentences");
  displayOptionsFormElement = document.getElementById("display-options-form");
  expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
  exportModal = document.getElementById("query-results-download-modal");
  initDisplay = undefined;
  initDisplayElement = document.getElementById("init-display");
  matchCountElement = document.getElementById("match-count");
+  paginationElements = document.getElementsByClassName("pagination");
  queryDisplay = undefined;
  queryDisplayElement = document.getElementById("query-display");
  queryFormElement = document.getElementById("query-form");
@@ -305,7 +316,6 @@
  queryResultsUserFeedbackElement = document.getElementById("query-results-user-feedback");
  receivedMatchCountElement = document.getElementById("received-match-count");
  textLookupCountElement = document.getElementById("text-lookup-count");
-  paginationElements = document.getElementsByClassName("pagination");

  // ###### js list options and intialization ######
  displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
@@ -388,6 +398,12 @@
    contextPerItemElement = document.getElementById("display-options-form-result_context");
    contextPerItemElement.onchange = results.resultsList.changeContext;

+    // live update of context sentences in inspect modal
+    contextSentencesElement.onchange = (event) => {
+      let sValue = event.target.value;
+      console.log(sValue);
+    }
+
    // eventListener if pagination is used to apply new context size to new page
    // and also activate inspect match if progress is 100
    for (let element of paginationElements) {
@@ -395,10 +411,6 @@
      element.addEventListener("click", results.resultsList.activateInspect);
    }

-    // epxert mode table view
-    // TODO: Redo this
-    // - This replicates itself on expertModeSwitchElement use
-    // - Replication should be fixed
    expertModeSwitchElement.addEventListener("change", (event) => {
      if (event.target.checked) {
        results.resultsList.expertModeOn();