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/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,8 +369,31 @@
       nopaque.socket.emit("inspect_match", {"cpos": result["matches"][dataIndex]["hit"]});
     }
 
+    function downloadRessource(downloadElement, mimeTypeString, filenameSlug) {
+      // get and create metadata
+      console.log("Create Metadata!");
+      var today = new Date();
+      var currentDate = today.getUTCFullYear() + '-' + (today.getUTCMonth() +1) + '-' + today.getUTCDate();
+      var currentTime = today.getUTCHours() + ":" + today.getUTCMinutes() + ":" + today.getUTCSeconds();
+      var safeFilename = result['query'].replace(/[^a-z0-9_-]/gi, "_");
+      var resultFilename = "UTC-" + currentDate + "_" + currentTime + "_" + safeFilename;
+      // stringify JSON object for json download
+      var dataStr = JSON.stringify(result, undefined, 2);
+      // get downloadResultsElement
+      downloadElement = document.getElementById("download-results-json");
+      // start actual download
+      download(downloadElement, dataStr, resultFilename, mimeTypeString, filenameSlug)
+    }
+    // add onclick to download buttons
+    var downloadResultsJSONElement = document.getElementById("download-results-json");
+    downloadResultsJSONElement.onclick = function() {downloadRessource(downloadResultsJSONElement, "text/json", ".json")};
+    var downloadResultsCSVElement = document.getElementById("download-results-csv");
+    downloadResultsCSVElement.onclick = function() {downloadRessource(downloadResultsCSVElement, "text/plain", ".txt")};
+
     // Function to download data to a file
-    function download(downloadElem, data, filename, type) {
+    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);
@@ -402,22 +402,76 @@
           downloadElem.href = url;
           downloadElem.download = filename;
         }
-    // create json filename for download
+    }
-    var today = new Date();
-    var currentDate = today.getUTCFullYear() + '-' + (today.getUTCMonth() +1) + '-' + today.getUTCDate();
-    var currentTime = today.getUTCHours() + ":" + today.getUTCMinutes() + ":" + today.getUTCSeconds();
-    var safeFilename = message['query'].replace(/[^a-z0-9_-]/gi, "_");
-    var resultFilename = "UTC-" + currentDate + "_" + currentTime + "_" + safeFilename + ".json";
-    // get <a> where download is served
-    var downloadResults = document.getElementById("download-results");
-    // stringify JSON object for json download
-    var dataStr = JSON.stringify(message, undefined, 2);
-    downloadResults.onclick = download(downloadResults,
-                                       dataStr,
-                                       resultFilename,
-                                       "text/json");
-  };
 
+    // 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>`,