Some fixes and clean up

app/corpora/events.py

@@ -108,7 +108,7 @@ def corpus_analysis_inspect_match(payload):
     match_context = s.export(payload['first_cpos'], payload['last_cpos'],
                              context=3, expand_lists=False)
     match_context['cpos_ranges'] = True
-    socketio.emit('match_context', {'payload': match_context},
+    socketio.emit('corpus_analysis_match_context', {'payload': match_context},
                   room=request.sid)
 
 

app/static/js/nopaque.CorpusAnalysisClient.js

@@ -57,6 +57,10 @@ class CorpusAnalysisClient {
     socket.on("corpus_analysis_query_results", (response) => {
         if (this.callbacks.query_results != undefined) {this.callbacks.query_results(response.payload);}
     });
+
+    // TODO: set callback for this
+    // get context of one match if inspected via socket.io
+    socket.on("corpus_analysis_match_context", (response) => { results.resultsList.showMatchContext(response)});
   }
 
   init() {

app/static/js/nopaque.Results.js

@@ -4,7 +4,7 @@ class Results {
   this.resultsList = resultsList;
   }
 
-  clear_all() {
+  clearAll() {
     this.resultsList.clear();
     this.resultsList.update();
     this.resultsJSON.init();

app/static/js/nopaque.callbacks.js

@@ -1,6 +1,6 @@
 function querySetup(payload) {
   // This is called when a query was successfull
-  // some hiding
+  // some hiding and resetting
   queryResultsExportElement.classList.add("disabled");
   queryResultsDeterminateElement.style.width = "0%";
   queryResultsProgressElement.classList.remove("hide");
@@ -11,7 +11,7 @@ function querySetup(payload) {
   matchCountElement.innerText = payload.match_count;
   // always re initializes results to delete old results from it
   // this has to be done here again because the last chunk from old results was still being recieved
-  results.clear_all()
+  results.clearAll()
   // Get query string again
   results.resultsJSON.getQueryStr(queryFormElement);
 }

app/static/js/nopaque.lists.js

@@ -163,7 +163,8 @@ class ResultsList extends List {
     contextResultsElement.innerHTML = "";  // clear it from old inspects
     contextModal.open();
     nopaque.socket.emit("corpus_analysis_inspect_match",
-            {payload: {
+            {
+              payload: {
                        first_cpos: results.resultsJSON.matches[dataIndex].c[0],
                        last_cpos: results.resultsJSON.matches[dataIndex].c[1]
                       }
@@ -203,22 +204,22 @@ class ResultsList extends List {
     // create sentence strings as tokens
     partElement = document.createElement("p");
     for (let cpos of lc) {
-      token = contextData["cpos_lookup"][cpos];
+      token = contextData.cpos_lookup[cpos];
       partElement.insertAdjacentHTML("beforeend",
-        `<span class="token" data-cpos="${cpos}">${token["word"]} </span>`);
+        `<span class="token" data-cpos="${cpos}">${token.word} </span>`);
       contextResultsElement.append(partElement);
     }
     for (let cpos of c) {
-      token = contextData["cpos_lookup"][cpos];
+      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>`);
+        `style="text-decoration-line: underline;">${token.word} </span>`);
       contextResultsElement.append(partElement);
     }
     for (let cpos of rc) {
-      token = contextData["cpos_lookup"][cpos];
+      token = contextData.cpos_lookup[cpos];
       partElement.insertAdjacentHTML("beforeend",
-        `<span class="token" data-cpos="${cpos}">${token["word"]} </span>`);
+        `<span class="token" data-cpos="${cpos}">${token.word} </span>`);
       contextResultsElement.append(partElement);
     }
     if (expertModeSwitchElement.checked) {
@@ -294,15 +295,14 @@ class ResultsList extends List {
   }
 
   // function to apply extra information and animation to every token
-  expertModeOn(tokenElements, results) {
+  expertModeOn(tokenElements) {
     let token;
     for (let tokenElement of tokenElements) {
       tokenElement.classList.add("chip");
       tokenElement.classList.add("hoverable");
       tokenElement.classList.add("expert-view");
-      token = results.cpos_lookup[tokenElement.dataset.cpos];
       tokenElement.addEventListener("mouseover", (event) => {
-        token = results.cpos_lookup[event.target.dataset.cpos];
+        token = results.resultsJSON.cpos_lookup[event.target.dataset.cpos];
         this.addToolTipToTokenElement(event.target, token);
       });
     }
@@ -345,6 +345,7 @@ class ResultsList extends List {
       tokenElement.classList.remove("hoverable");
       tokenElement.classList.remove("expert-view");
       tokenElement.outerHTML = tokenElement.outerHTML; // this is actually a workaround, but it works pretty fast
+      // TODO: use M.Tooltip.destroy()
     }
   }
 
@@ -379,7 +380,7 @@ class ResultsList extends List {
     }
     // get infos for full match row
     matchRowElement = document.createElement("tr");
-    matchRowElement.setAttribute("data-index", values["index"])
+    matchRowElement.setAttribute("data-index", values.index)
     lcCellElement = document.createElement("td");
     lcCellElement.classList.add("left-context");
     matchRowElement.appendChild(lcCellElement);
@@ -424,7 +425,7 @@ class ResultsList extends List {
     rcCellElement.classList.add("right-context");
     matchRowElement.appendChild(rcCellElement);
     for (cpos of rc) {
-      token = chunk["cpos_lookup"][cpos];
+      token = chunk.cpos_lookup[cpos];
       rcCellElement.insertAdjacentHTML("beforeend",
         `<span class="token" data-cpos="${cpos}">${token.word} </span>`);
     }

app/templates/corpora/analyse_corpus.html.j2

@@ -247,6 +247,9 @@
   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;
@@ -267,6 +270,7 @@
   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);
@@ -289,20 +293,20 @@
   document.addEventListener("DOMContentLoaded", () => {
     //set accordion of collapsibles to false
     M.Collapsible.init(collapsibleElements, {accordion: false});
-    // creates some models on DOMContentLoaded
+    // creates some modals on DOMContentLoaded
     contextModal = M.Modal.init(contextModal, {"dismissible": true});
     exportModal = M.Modal.init(exportModal, {"dismissible": true});
     initModal = M.Modal.init(initDisplayElement, {"dismissible": false});
     // Init corpus analysis components
     resultsJSON = new ResultsJSON();
     resultsList = new ResultsList("result-list", resultsListOptions);
-    results = new Results(resultsJSON, resultsList)
+    results = new Results(resultsJSON, resultsList);
     initDisplay = new CorpusAnalysisDisplay(initDisplayElement);
     queryDisplay = new CorpusAnalysisDisplay(queryDisplayElement);
     client = new CorpusAnalysisClient({{ corpus_id }}, nopaque.socket);
     initModal.open();
 
-    // set displays visibilitys and Callback functions
+    // set displays and callback functions
     client.setDisplay("init", initDisplay);
     client.setCallback("init", () => {
       initModal.close();
@@ -335,16 +339,11 @@
       }
       // Prevent page from reloading on submit
       event.preventDefault();
-      // empty ResultsList and ResultsJSON for new query
-      results.clear_all()
       // Get query string and send query to server
       results.resultsJSON.getQueryStr(queryFormElement);
       client.query(results.resultsJSON.query);
     });
 
-    // get context of one match if inspected via socket.io
-    nopaque.socket.on("match_context", (response) => { results.resultsList.showMatchContext(response)});
-
     // live update of hits per page if hits per page value is changed
     hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page");
     hitsPerPageInputElement.onchange = results.resultsList.changeHitsPerPage;
@@ -354,22 +353,22 @@
     contextPerItemElement.onchange = results.resultsList.changeContext;
 
     // eventListener if pagination is used to apply new context size to new page
-    // and also activate inspect match if queryFinished is true
+    // and also activate inspect match if progress is 100
-    paginationElements = document.getElementsByClassName("pagination");
+    for (let element of paginationElements) {
-    for (element of paginationElements) {
       element.addEventListener("click", results.resultsList.changeContext);
       element.addEventListener("click", results.resultsList.activateInspect);
     }
 
     // epxert mode table view
-    expertModeSwitchElement.addEventListener("change", function(event) {
+    // TODO: Redo this
+    expertModeSwitchElement.addEventListener("change", (event) => {
       let currentTokenElements = document.getElementsByClassName("token");
-      let paginationElements = document.getElementsByClassName("pagination");
       if (event.target.checked) {
         results.resultsList.expertModeOn(currentTokenElements, resultsJSON);
-        for (element of paginationElements) {
+        for (let element of paginationElements) {
           element.tokenElements = currentTokenElements;
           element.addEventListener("click", (event) => { results.resultsList.eventHandlerCheck(event)});
+          // TODO: This replicates itself on expertModeSwitchElement use
         }
       } else {
         results.resultsList.expertModeOff(currentTokenElements);
@@ -378,13 +377,13 @@
   });
 
   // Add onclick to open download modal when Export Results button is pressed
-  queryResultsExportElement.onclick = function() {
+  queryResultsExportElement.onclick = () => {
     exportModal.open();
   }
 
   // add onclick to download JSON button and download the file
   downloadResultsJSONElement = document.getElementById("download-results-json")
-  downloadResultsJSONElement.onclick = function() {
+  downloadResultsJSONElement.onclick = () => {
     let filename = results.resultsJSON.createDownloadFilename();
     results.resultsJSON.downloadJSONRessource(filename)};
 </script>