Add expert view in a hacky way

This commit is contained in:
Stephan Porada 2020-02-05 16:09:59 +01:00
parent 692b887d99
commit 004e85aad0
4 changed files with 115 additions and 60 deletions

View File

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

View File

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

View File

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

View File

@ -98,7 +98,7 @@
<tr> <tr>
<td>JSON</td> <td>JSON</td>
<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> <i class="material-icons right">file_download</i>
</a> </a>
</td> </td>
@ -106,7 +106,7 @@
<tr> <tr>
<td>CSV</td> <td>CSV</td>
<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> <i class="material-icons right">file_download</i>
</a> </a>
</td> </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 // getting some HTML-elements to use/hide/remove/show or add some other elements to them
var queryResultsElement = document.getElementById("query-results"); var queryResultsElement = document.getElementById("query-results");
var queryResultsMetadataElement = document.getElementById("query-results-metadata"); var queryResultsMetadataElement = document.getElementById("query-results-metadata");
@ -364,8 +343,6 @@
} }
// List building/appending the chunks when query had results // 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"]; match_count = chunk["match_count"];
let count_corpus_files = Object.keys(result["text_lookup"]).length; let count_corpus_files = Object.keys(result["text_lookup"]).length;
queryResultsMetadataElement.innerHTML = chunk["match_count"] + " matches in " + count_corpus_files + " corpus files."; 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"]}); 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) { function addToolTipToTokenElement(tokenElement, token) {
M.Tooltip.init(tokenElement, M.Tooltip.init(tokenElement,
@ -435,9 +489,9 @@
NER: ${token["ner"]} NER: ${token["ner"]}
</td> </td>
<td class="left-align"> <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> </td>
</tr> </tr>
</table>`, </table>`,