mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-12-24 10:34:17 +00:00
Add expert view in a hacky way
This commit is contained in:
Stephan Porada
parent
692b887d99
commit
004e85aad0
@ -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";
|
||||
|
||||
@ -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> </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)) {
|
||||
|
||||
@ -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>
|
||||
Author: ${lookup["text"][token["text"]]["author"]}<br>
|
||||
Publishing year: ${lookup["text"][token["text"]]["publishing_year"]}
|
||||
Title: ${result["text_lookup"][token["text"]]["title"]}<br>
|
||||
Author: ${result["text_lookup"][token["text"]]["author"]}<br>
|
||||
Publishing year: ${result["text_lookup"][token["text"]]["publishing_year"]}
|
||||
</td>
|
||||
</tr>
|
||||
</table>`,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user