From ebe598312fcf1a2d7946e2c0292529da9a793413 Mon Sep 17 00:00:00 2001
From: Stephan Porada <sporada@uni-bielefeld.de>
Date: Thu, 19 Mar 2020 10:25:09 +0100
Subject: [PATCH] Add info tool tip

---
 app/static/js/nopaque.analyse_corpus.js      | 12 +++++++++++-
 app/templates/corpora/analyse_corpus.html.j2 |  1 +
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/static/js/nopaque.analyse_corpus.js b/app/static/js/nopaque.analyse_corpus.js
index c9ec78b8..9acd41ab 100644
--- a/app/static/js/nopaque.analyse_corpus.js
+++ b/app/static/js/nopaque.analyse_corpus.js
@@ -125,7 +125,7 @@ function recieveResults(response) {
   result["loaded_match_count"] += Object.keys(chunk["matches"]).length;
   console.log("After current match count", result["loaded_match_count"]);
   let queryResultsMetadataElement = document.getElementById("query-results-metadata");
-  queryResultsMetadataElement.innerHTML = `<p>The query resulted in a total of ${chunk["match_count"]} matches. </p> <p> ${result["loaded_match_count"]} of ${result["match_count"]} matches in ${count_corpus_files} corpus files have been loaded.</p>`;
+  queryResultsMetadataElement.innerHTML = `<p>The query resulted in a total of ${chunk["match_count"]} matches. </p> <p> ${result["loaded_match_count"]} of ${result["match_count"]} matches in ${count_corpus_files} corpus files have been loaded.<i class="material-icons" id="tool-tip-info">help</i></p>`;
   let queryResultsInteractionElement = document.getElementById("interaction-elements");
   queryResultsInteractionElement.appendChild(exportQueryResultsElement);
   let queryResultsHeadElement = document.getElementById("query-results-head");
@@ -134,12 +134,22 @@ function recieveResults(response) {
   console.log(queryStatus);
   queryResultsDeterminateElement.style["width"] = `${queryStatus}%`;
   console.log(queryResultsDeterminateElement.style["width"]);
+  let toolTipInfoElement = document.getElementById("tool-tip-info");
+  toolTipInfoElement.addEventListener("mouseover", function(event) {
+    M.Tooltip.init(toolTipInfoElement, {"html": `<p>The Server is still sending you your results. Functions like "Export Results" and "Match Inspect" will be available after all matches have been loaded.</p>`,
+    "inDuration": 1500,
+    "margin": 15,
+    "position": "top",
+    "transitionMovement": 0})
+  });
   // enable download and inspect when query is finished
   // also sets queryFinished to true
   if (queryStatus === 100) {
     queryFinished = true; // global declaration to set downlaod button and inspects buttons back to disabled for new queries
     queryResultsDeterminateElement.parentNode.parentNode.classList.add("hide");
     exportQueryResultsElement.classList.remove("disabled");
+    toolTipInfoElement.classList.add("hide");
+    queryResultsMetadataElement.innerHTML = `<p>The query resulted in a total of ${chunk["match_count"]} matches. </p> <p> ${result["loaded_match_count"]} of ${result["match_count"]} matches in ${count_corpus_files} corpus files have been loaded.<i class="material-icons">check_circle</i></p>`;
     activateInspect();
   }
 }
diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2
index bd2064e1..e0e143eb 100644
--- a/app/templates/corpora/analyse_corpus.html.j2
+++ b/app/templates/corpora/analyse_corpus.html.j2
@@ -246,6 +246,7 @@ server side -->
   var queryResultsDeterminateElement;
   var queryResultsTableElement;
   var queryLoadingElement;
+  var toolTipInfoElement;
 
   var contextResultsElement;