Add expert view in a hacky way

app/static/css/nopaque.css

@@ -92,6 +92,11 @@ indicator will show up how the column is sorted right now.; */
   z-index: 999; /* tmp fix */
 }
 
+/* class for expert view */
+.expert-view {
+  cursor: pointer;
+}
+
 /* styles for resource lists */
 .service[data-service]:before {
   content: "help";

app/static/js/nopaque.js

@@ -168,21 +168,17 @@ nopaque.socket.on("foreign_jobs_update", function(msg) {
 // get context of one match if inspected
 nopaque.socket.on("match_context", function(message) {
   console.log("### match_context ###");
-  console.log(message);
+  console.log("Incoming data:", message);
   contextResultsElement.innerHTML = "<p>&nbsp;</p>";
   document.getElementById("context-modal-loading").classList.add("hide");
   document.getElementById("context-modal-ready").classList.remove("hide");
 
   let sentenceElement, token, tokenElement;
 
-  lookup["cpos"] = {...lookup["cpos"], ...message["cpos_lookup"]};
-  lookup["s"] = message["context_s_cpos"];
-  lookup["text"] = {...lookup["text"], ...message["text_lookup"]};
-
   for (let [key, value] of Object.entries(message['context_s_cpos'])) {
     sentenceElement = document.createElement("p");
     for (cpos of value) {
-      token = lookup["cpos"][cpos];
+      token = message["cpos_lookup"][cpos];
       tokenElement = document.createElement("span");
       tokenElement.classList.add("token");
       if (message["match_cpos_list"].includes(cpos)) {

app/static/js/nopaque.lists.js

@@ -127,7 +127,7 @@ class ResultList extends List {
       var inspectBtn = document.createElement("a");
       inspectBtn.setAttribute("class", "btn-floating btn-flat waves-effect waves-light grey right inspect");
       inspectBtn.innerHTML = '<i class="material-icons">search</i>';
-      inspectBtn.onclick = function () {inspect(values["index"])};
+      inspectBtn.onclick = function() {inspect(values["index"])};
     }
     // add text titles at front as first td of one row
     hitCellElement.appendChild(inspectBtn);

app/templates/corpora/analyse_corpus.html.j2

@@ -98,7 +98,7 @@
       <tr>
         <td>JSON</td>
         <td>
-          <a class="btn waves-effect waves-light" id="download-results">Download
+          <a class="btn waves-effect waves-light" id="download-results-json">Download
             <i class="material-icons right">file_download</i>
           </a>
         </td>
@@ -106,7 +106,7 @@
       <tr>
         <td>CSV</td>
         <td>
-          <a class="btn waves-effect waves-light disabled">Download
+          <a class="btn waves-effect waves-light" id="download-results-csv">Download
             <i class="material-icons right">file_download</i>
           </a>
         </td>
@@ -238,27 +238,6 @@
     }
   });
 
-  // exper view stuff reuse maybe and REMOVE later
-  var expertModeSwitchElement = document.getElementById("expert-mode-switch");
-  var lookup = {"cpos": null, "s": null, "text": null};
-  var matches = null;
-  var tokenElements = null;
-
-  expertModeSwitchElement.addEventListener('change', function(event) {
-    if (event.target.checked) {
-      tokenElements.forEach(function(tokenElement) {
-        tokenElement.classList.add("chip");
-        token = lookup["cpos"][tokenElement.dataset.cpos];
-        addToolTipToTokenElement(tokenElement, token);
-      });
-    } else {
-      tokenElements.forEach(function(tokenElement) {
-        tokenElement.classList.remove("chip");
-        tokenElement.M_Tooltip.destroy()
-      });
-    }
-  })
-
   // getting some HTML-elements to use/hide/remove/show or add some other elements to them
   var queryResultsElement = document.getElementById("query-results");
   var queryResultsMetadataElement = document.getElementById("query-results-metadata");
@@ -364,8 +343,6 @@
     }
 
     // List building/appending the chunks when query had results
-    // write metadata query information into HTML elements
-    // like nr. of all matches in how many files etc.
     match_count = chunk["match_count"];
     let count_corpus_files = Object.keys(result["text_lookup"]).length;
     queryResultsMetadataElement.innerHTML = chunk["match_count"] + " matches in " + count_corpus_files + " corpus files.";
@@ -392,32 +369,109 @@
       nopaque.socket.emit("inspect_match", {"cpos": result["matches"][dataIndex]["hit"]});
     }
 
-    // Function to download data to a file
+    function downloadRessource(downloadElement, mimeTypeString, filenameSlug) {
-    function download(downloadElem, data, filename, type) {
+      // get and create metadata
-        var file = new Blob([data], {type: type});
+      console.log("Create Metadata!");
-        if (window.navigator.msSaveOrOpenBlob) // IE10+
+      var today = new Date();
-            window.navigator.msSaveOrOpenBlob(file, filename);
+      var currentDate = today.getUTCFullYear() + '-' + (today.getUTCMonth() +1) + '-' + today.getUTCDate();
-        else { // Others
+      var currentTime = today.getUTCHours() + ":" + today.getUTCMinutes() + ":" + today.getUTCSeconds();
-            var url = URL.createObjectURL(file);
+      var safeFilename = result['query'].replace(/[^a-z0-9_-]/gi, "_");
-            downloadElem.href = url;
+      var resultFilename = "UTC-" + currentDate + "_" + currentTime + "_" + safeFilename;
-            downloadElem.download = filename;
+      // stringify JSON object for json download
-        }
+      var dataStr = JSON.stringify(result, undefined, 2);
-    // create json filename for download
+      // get downloadResultsElement
-    var today = new Date();
+      downloadElement = document.getElementById("download-results-json");
-    var currentDate = today.getUTCFullYear() + '-' + (today.getUTCMonth() +1) + '-' + today.getUTCDate();
+      // start actual download
-    var currentTime = today.getUTCHours() + ":" + today.getUTCMinutes() + ":" + today.getUTCSeconds();
+      download(downloadElement, dataStr, resultFilename, mimeTypeString, filenameSlug)
-    var safeFilename = message['query'].replace(/[^a-z0-9_-]/gi, "_");
+    }
-    var resultFilename = "UTC-" + currentDate + "_" + currentTime + "_" + safeFilename + ".json";
+    // add onclick to download buttons
-    // get <a> where download is served
+    var downloadResultsJSONElement = document.getElementById("download-results-json");
-    var downloadResults = document.getElementById("download-results");
+    downloadResultsJSONElement.onclick = function() {downloadRessource(downloadResultsJSONElement, "text/json", ".json")};
-    // stringify JSON object for json download
+    var downloadResultsCSVElement = document.getElementById("download-results-csv");
-    var dataStr = JSON.stringify(message, undefined, 2);
+    downloadResultsCSVElement.onclick = function() {downloadRessource(downloadResultsCSVElement, "text/plain", ".txt")};
-    downloadResults.onclick = download(downloadResults,
-                                       dataStr,
-                                       resultFilename,
-                                       "text/json");
-  };
 
+    // Function to download data to a file
+    function download(downloadElem, data, filename, type, filenameSlug) {
+      console.log("Start Download!");
+      filename += filenameSlug;
+      var file = new Blob([data], {type: type});
+      if (window.navigator.msSaveOrOpenBlob) // IE10+
+          window.navigator.msSaveOrOpenBlob(file, filename);
+      else { // Others
+          var url = URL.createObjectURL(file);
+          downloadElem.href = url;
+          downloadElem.download = filename;
+        }
+    }
+
+    // TODO:
+    // if expert switch is clicked and true
+      // add chips and expert info to visible tokenElements
+    // else if expert switch is true and user is using pagination:
+      //add chips and expert info to visible token elements AND remove that information from the tokens that have been visible before (saves later removal steps)
+    // else if expert switch is false:
+      // remove chips and expert info from visible tokens
+
+  // epxert mode
+  var expertModeSwitchElement = document.getElementById("expert-mode-switch");
+  expertModeSwitchElement.addEventListener("change", function(event) {
+    var currentTokenElements = document.getElementsByClassName("token");
+    var paginationElements = document.getElementsByClassName("pagination");
+    if (event.target.checked) {
+      console.log("Checked!");
+      expertModeOn(currentTokenElements);
+      for (element of paginationElements) {
+        element.addEventListener("click", eventHandlerCheck);
+        element.tokenElements = currentTokenElements;
+      }
+    } else {
+      console.log("Unchecked!");
+      expertModeOff(currentTokenElements);
+      console.log("unchecked! Destroy");
+    }
+  })
+
+  function eventHandlerCheck(event) {
+    console.log("pagination used!");
+    console.log(expertModeSwitchElement.checked);
+    if (expertModeSwitchElement.checked) {
+      expertModeOn(event.currentTarget.tokenElements);
+    } else if (!expertModeSwitchElement.checked) {
+      event.preventDefault();
+      console.log("prevented! Destroy");
+      expertModeOff(event.currentTarget.tokenElements);
+    }
+  }
+
+  function expertModeOff(tokenElements) {
+    console.log("expertModeOff!");
+    for (tokenElement of tokenElements) {
+      tokenElement.classList.remove("chip");
+      tokenElement.classList.remove("hoverable");
+      tokenElement.classList.remove("expert-view");
+      tokenElement.outerHTML = tokenElement.outerHTML; // TODO fix this in a proper way
+      // console.log("Token", tokenElement);
+      // console.log("Tooltip property:", tokenElement.M_Tooltip);
+      // tokenElement.M_Tooltip.destroy();
+      // console.log("Destroy!");
+    }
+  }
+
+  function expertModeOn(tokenElements) {
+    console.log("expertModeOn!");
+    for (tokenElement of tokenElements) {
+      tokenElement.classList.add("chip");
+      tokenElement.classList.add("hoverable");
+      tokenElement.classList.add("expert-view");
+      token = result["cpos_lookup"][tokenElement.dataset.cpos];
+      tokenElement.addEventListener("mouseover", function(event) {
+        console.log("Mouseover!");
+        console.log(event.target);
+        token = result["cpos_lookup"][event.target.dataset.cpos];
+        addToolTipToTokenElement(event.target, token);
+      })
+    }
+  }
 
   function addToolTipToTokenElement(tokenElement, token) {
     M.Tooltip.init(tokenElement,
@@ -435,9 +489,9 @@
                                    NER: ${token["ner"]}
                                  </td>
                                  <td class="left-align">
-                                   Title: ${lookup["text"][token["text"]]["title"]}<br>
+                                   Title: ${result["text_lookup"][token["text"]]["title"]}<br>
-                                   Author: ${lookup["text"][token["text"]]["author"]}<br>
+                                   Author: ${result["text_lookup"][token["text"]]["author"]}<br>
-                                   Publishing year: ${lookup["text"][token["text"]]["publishing_year"]}
+                                   Publishing year: ${result["text_lookup"][token["text"]]["publishing_year"]}
                                  </td>
                                </tr>
                              </table>`,