Add info tool tip

This commit is contained in:
Stephan Porada 2020-03-19 10:25:09 +01:00
parent 8147dc404a
commit ebe598312f
2 changed files with 12 additions and 1 deletions

View File

@ -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();
}
}

View File

@ -246,6 +246,7 @@ server side -->
var queryResultsDeterminateElement;
var queryResultsTableElement;
var queryLoadingElement;
var toolTipInfoElement;
var contextResultsElement;