Add expert mode and higlight sentences switch to inspect. WIP

app/corpora/views.py

@@ -64,7 +64,7 @@ def analyse_corpus(corpus_id):
     query_form = QueryForm(prefix='query-form',
                            query=request.args.get('query'))
     query_download_form = QueryDownloadForm()
-    inspect_display_options_form = InspectDisplayOptionsForm()
+    inspect_display_options_form = InspectDisplayOptionsForm(prefix='query_download_form')
     return render_template('corpora/analyse_corpus.html.j2',
                            corpus_id=corpus_id,
                            display_options_form=display_options_form,

app/static/js/nopaque.lists.js

@@ -129,7 +129,8 @@ RessourceList.options = {
 class ResultsList extends List {
   constructor(idOrElement, options={}) {
   super(idOrElement, options);
-  this.eventTokens = [];  // all span tokens which are holdeing events if expert mode is on
+  this.eventTokens = {};  // all span tokens which are holdeing events if expert mode is on
+  this.currentExpertTokenElements = {};
   }
 
 
@@ -192,7 +193,8 @@ class ResultsList extends List {
     let contextModalLoading;
     let contextModalReady;
     let contextResultsElement;
-    let expertModeSwitchElement;
+    let modalExpertModeSwitchElement;
+    let highlightSentencesSwitchElement;
     let lc;
     let modalTokenElements;
     let partElement;
@@ -205,7 +207,8 @@ class ResultsList extends List {
 
     this.contextData = response.payload;
     contextResultsElement = document.getElementById("context-results");
-    expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
+    modalExpertModeSwitchElement = document.getElementById("query_download_form-expert_mode_inspect");
+    highlightSentencesSwitchElement = document.getElementById("query_download_form-highlight_sentences");
     uniqueS = new Set();
     // check if cpos ranges are used or not
     if (this.contextData.cpos_ranges == true) {
@@ -273,12 +276,51 @@ class ResultsList extends List {
       contextResultsElement.appendChild(sentenceElement);
     }
 
-    if (expertModeSwitchElement.checked) {
+    modalExpertModeSwitchElement.addEventListener("change", (event) => {
-      this.expertModeOn();
+      if (event.target.checked) {
+        this.expertModeOn("context-results");
+      } else {
+        this.expertModeOff("context-results")
+      }
+    });
+
+    if (modalExpertModeSwitchElement.checked) {
+      this.expertModeOn("context-results");
+    }
+
+    highlightSentencesSwitchElement.addEventListener("change", (event) => {
+      if (event.target.checked) {
+        this.higlightContextSentences();
+      } else {
+      this.unhighlightContextSentences();
+      }
+    });
+
+    if (highlightSentencesSwitchElement.checked) {
+      this.higlightContextSentences();
+    }
+  }
+
+  higlightContextSentences() {
+    let sentences;
+    sentences = document.getElementById("context-results").getElementsByClassName("sentence");
+      for (let s of sentences) {
+        s.insertAdjacentHTML("afterend", `<br>`)
+      }
+  }
+
+  unhighlightContextSentences() {
+    let sentences;
+    let sibling;
+    sentences = document.getElementById("context-results").getElementsByClassName("sentence");
+      for (let s of sentences) {
+        sibling = s.nextSibling;
+        sibling.remove();
       }
   }
 
   changeSentenceContext(sValue) {
+    // TODO:
   }
 
   // ###### Display options changing live how the matches are being displayed ######
@@ -345,10 +387,10 @@ class ResultsList extends List {
   // if unchecked expertModeOff is executed
   eventHandlerCheck(event) {
     if (expertModeSwitchElement.checked) {
-      this.expertModeOn(event.currentTarget.tokenElements, resultsJSON);
+      this.expertModeOn("query-display");
     } else if (!expertModeSwitchElement.checked) {
       event.preventDefault();
-      this.expertModeOff(event.currentTarget.tokenElements);
+      this.expertModeOff("query-display");
     }
   }
 
@@ -370,16 +412,17 @@ class ResultsList extends List {
     this.currentTooltipElement.destroy();
   }
 
-  expertModeOn() {
+  expertModeOn(htmlId) {
-    // console.log("Expert mode is on.");
+    // torn the expert mode on for all tokens in the DOM element identified by its htmlID
-    this.currentExpertTokenElements = document.getElementsByClassName("token");
+    this.currentExpertTokenElements[htmlId] = document.getElementById(htmlId).getElementsByClassName("token");
     this.tooltipEventCreateBind = this.tooltipEventCreate.bind(this);
     this.tooltipEventDestroyBind = this.tooltipEventDestroy.bind(this);
-    for (let tokenElement of this.currentExpertTokenElements) {
+    for (let tokenElement of this.currentExpertTokenElements[htmlId]) {
       tokenElement.classList.add("chip", "hoverable", "expert-view");
       tokenElement.onmouseover = this.tooltipEventCreateBind;
       tokenElement.onmouseout = this.tooltipEventDestroyBind;
-      this.eventTokens.push(tokenElement);
+      this.eventTokens[htmlId] = [];
+      this.eventTokens[htmlId].push(tokenElement);
     }
   }
 
@@ -414,16 +457,17 @@ class ResultsList extends List {
   }
 
   // function to remove extra informations and animations from tokens
-  expertModeOff() {
+  expertModeOff(htmlId) {
     // console.log("Expert mode is off.");
-    for (let tokenElement of this.currentExpertTokenElements) {
+    for (let tokenElement of this.currentExpertTokenElements[htmlId]) {
       tokenElement.classList.remove("chip", "hoverable", "expert-view");
     }
-    for (let eventToken of this.eventTokens) {
+    this.currentExpertTokenElements[htmlId] = [];
+    for (let eventToken of this.eventTokens[htmlId]) {
       eventToken.onmouseover = "";
       eventToken.onmouseout = "";
     }
-  this.eventTokens = [];
+  this.eventTokens[htmlId] = [];
   }
 
   createResultRowElement(item, chunk) {

app/templates/corpora/analyse_corpus.html.j2

@@ -415,14 +415,14 @@
 
     expertModeSwitchElement.addEventListener("change", (event) => {
       if (event.target.checked) {
-        results.resultsList.expertModeOn();
+        results.resultsList.expertModeOn("query-display");
         for (let element of paginationElements) {
           element.onclick = (event) => {
             results.resultsList.eventHandlerCheck(event)
           }
         }
       } else {
-        results.resultsList.expertModeOff();
+        results.resultsList.expertModeOff("query-display");
       }
     });
   });