mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
Fix js
This commit is contained in:
Patrick Jentsch
parent
31ac9ddcf3
commit
904e36a8bb
@ -146,12 +146,13 @@
|
||||
<div id="context-modal" class="modal modal-fixed-footer">
|
||||
<div class="modal-content">
|
||||
<h4>Match context and information</h4>
|
||||
<div id="loading-data">
|
||||
<div id="context-modal-loading">
|
||||
<div class="progress">
|
||||
<div class="indeterminate"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="recieved-data" class="hide">
|
||||
<div id="context-modal-ready" class="hide">
|
||||
<div id="context-results"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@ -166,10 +167,9 @@
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
contextModal = M.Modal.init(document.getElementById("context-modal"),
|
||||
{"dismissible": true,
|
||||
onCloseEnd: function() {
|
||||
document.getElementById("loading-data").classList.remove("hide");
|
||||
document.getElementById("recieved-data").classList.add("hide");
|
||||
}
|
||||
"onCloseEnd": function() {
|
||||
document.getElementById("context-modal-loading").classList.remove("hide");
|
||||
document.getElementById("context-modal-ready").classList.add("hide");}
|
||||
});
|
||||
loadingModal = M.Modal.init(document.getElementById("loading-modal"),
|
||||
{"dismissible": false});
|
||||
@ -182,13 +182,15 @@
|
||||
});
|
||||
|
||||
var expertModeSwitchElement = document.getElementById("expert-mode-switch");
|
||||
var tokenElements = [];
|
||||
var result;
|
||||
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 = result["cpos_lookup"][tokenElement.dataset.cpos];
|
||||
token = lookup["cpos"][tokenElement.dataset.cpos];
|
||||
addToolTipToTokenElement(tokenElement, token);
|
||||
});
|
||||
} else {
|
||||
@ -202,7 +204,7 @@
|
||||
var queryFormElement = document.getElementById("query-form");
|
||||
var queryFormSubmitElement = document.getElementById("query-form-submit");
|
||||
var queryResultsElement = document.getElementById("query-results");
|
||||
var contextResultsElement = document.getElementById("recieved-data");
|
||||
var contextResultsElement = document.getElementById("context-results");
|
||||
queryFormSubmitElement.addEventListener("click", function(event) {
|
||||
event.preventDefault();
|
||||
let formData = new FormData(queryFormElement);
|
||||
@ -214,10 +216,20 @@
|
||||
});
|
||||
|
||||
socket.on("corpus_analysis", function(message) {
|
||||
console.log("### corpus_analysis ###");
|
||||
console.log(message);
|
||||
queryResultsElement.innerHTML = "";
|
||||
|
||||
// Reset related global values
|
||||
lookup = {"cpos": null, "s": null, "text": null};
|
||||
matches = null;
|
||||
tokenElements = null;
|
||||
|
||||
if (message === null) {
|
||||
M.toast({html: "No results for this query!", displayLength: 10000, classes: "red"});
|
||||
} else {
|
||||
M.toast({"html": "No results for this query!", "classes": "red"});
|
||||
return;
|
||||
}
|
||||
|
||||
var matchElement;
|
||||
var matchTextTitlesElement;
|
||||
var matchLeftContextElement;
|
||||
@ -227,11 +239,13 @@
|
||||
var token;
|
||||
var tokenElement;
|
||||
|
||||
result = message;
|
||||
// Set related global values
|
||||
lookup["cpos"] = message["cpos_lookup"];
|
||||
lookup["text"] = message["text_lookup"];
|
||||
matches = message["matches"];
|
||||
tokenElements = new Set();
|
||||
|
||||
queryResultsElement.innerHTML = "";
|
||||
|
||||
for (let [index, match] of result['matches'].entries()) {
|
||||
for (let [index, match] of matches.entries()) {
|
||||
matchElement = document.createElement("tr");
|
||||
matchElement.classList.add("match");
|
||||
matchElement.dataset.index = index;
|
||||
@ -241,7 +255,7 @@
|
||||
matchLeftContextElement = document.createElement("td");
|
||||
matchLeftContextElement.classList.add("left-context");
|
||||
for (cpos of match["lc"]) {
|
||||
token = result["cpos_lookup"][cpos];
|
||||
token = lookup["cpos"][cpos];
|
||||
tokenElement = document.createElement("span");
|
||||
tokenElement.classList.add("token");
|
||||
tokenElement.dataset.cpos = cpos;
|
||||
@ -252,14 +266,14 @@
|
||||
}
|
||||
matchLeftContextElement.append(tokenElement);
|
||||
matchLeftContextElement.append(document.createTextNode(" "));
|
||||
tokenElements.push(tokenElement);
|
||||
tokenElements.add(tokenElement);
|
||||
}
|
||||
matchElement.append(matchLeftContextElement);
|
||||
matchHitElement = document.createElement("td");
|
||||
matchHitElement.classList.add("hit");
|
||||
textTitles = new Set();
|
||||
for (cpos of match["hit"]) {
|
||||
token = result["cpos_lookup"][cpos];
|
||||
token = lookup["cpos"][cpos];
|
||||
tokenElement = document.createElement("span");
|
||||
tokenElement.classList.add("token");
|
||||
tokenElement.dataset.cpos = cpos;
|
||||
@ -270,8 +284,8 @@
|
||||
}
|
||||
matchHitElement.append(tokenElement);
|
||||
matchHitElement.append(document.createTextNode(" "));
|
||||
tokenElements.push(tokenElement);
|
||||
textTitles.add(result["text_lookup"][token["text"]]["title"]);
|
||||
tokenElements.add(tokenElement);
|
||||
textTitles.add(lookup["text"][token["text"]]["title"]);
|
||||
}
|
||||
var moreContextBtn = document.createElement("a");
|
||||
moreContextBtn.setAttribute("class", "btn-floating btn waves-effect waves-light teal right");
|
||||
@ -280,16 +294,14 @@
|
||||
matchHitElement.append(moreContextBtn);
|
||||
moreContextBtn.onclick = function() {
|
||||
contextModal.open();
|
||||
var cpos = match["hit"];
|
||||
socket.emit("inspect_match", {"cpos": cpos});
|
||||
socket.emit("inspect_match", {"cpos": match["hit"]});
|
||||
};
|
||||
|
||||
matchTextTitlesElement.innerText = [...textTitles].join(",");
|
||||
matchElement.append(matchHitElement);
|
||||
matchRightContextElement = document.createElement("td");
|
||||
matchRightContextElement.classList.add("right-context");
|
||||
for (cpos of match["rc"]) {
|
||||
token = result["cpos_lookup"][cpos];
|
||||
token = lookup["cpos"][cpos];
|
||||
tokenElement = document.createElement("span");
|
||||
tokenElement.classList.add("token");
|
||||
tokenElement.dataset.cpos = cpos;
|
||||
@ -300,12 +312,12 @@
|
||||
}
|
||||
matchRightContextElement.append(tokenElement);
|
||||
matchRightContextElement.append(document.createTextNode(" "));
|
||||
tokenElements.push(tokenElement);
|
||||
tokenElements.add(tokenElement);
|
||||
}
|
||||
matchElement.append(matchRightContextElement);
|
||||
queryResultsElement.append(matchElement);
|
||||
}
|
||||
}});
|
||||
});
|
||||
|
||||
function addToolTipToTokenElement(tokenElement, token) {
|
||||
M.Tooltip.init(tokenElement,
|
||||
@ -323,9 +335,9 @@
|
||||
NER: ${token["ner"]}
|
||||
</td>
|
||||
<td class="left-align">
|
||||
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"]}
|
||||
Title: ${lookup["text"][token["text"]]["title"]}<br>
|
||||
Author: ${lookup["text"][token["text"]]["author"]}<br>
|
||||
Publishing year: ${lookup["text"][token["text"]]["publishing_year"]}
|
||||
</td>
|
||||
</tr>
|
||||
</table>`,
|
||||
@ -337,25 +349,27 @@
|
||||
|
||||
|
||||
socket.on("match_context", function(message) {
|
||||
console.log("### match_context ###");
|
||||
console.log(message);
|
||||
contextResultsElement.innerHTML = "<p> </p>";
|
||||
document.getElementById("context-modal-loading").classList.add("hide");
|
||||
document.getElementById("context-modal-ready").classList.remove("hide");
|
||||
|
||||
let token;
|
||||
let tokenElement;
|
||||
let tokenElements = [];
|
||||
var sentenceElement;
|
||||
var token;
|
||||
var tokenElement;
|
||||
|
||||
console.log("Incoming data:", message);
|
||||
context = message;
|
||||
document.getElementById("loading-data").classList.add("hide");
|
||||
document.getElementById("recieved-data").classList.remove("hide");
|
||||
lookup["cpos"] = {...lookup["cpos"], ...message["cpos_lookup"]};
|
||||
lookup["s"] = message["context_s_cpos"];
|
||||
lookup["text"] = {...lookup["text"], ...message["text_lookup"]};
|
||||
|
||||
contextResultsElement.innerHTML = "<br>";
|
||||
|
||||
for (let [key, value] of Object.entries(context['context_s_cpos'])) {
|
||||
for (let [key, value] of Object.entries(message['context_s_cpos'])) {
|
||||
sentenceElement = document.createElement("p");
|
||||
for (cpos of value) {
|
||||
token = context["cpos_lookup"][cpos];
|
||||
token = lookup["cpos"][cpos];
|
||||
tokenElement = document.createElement("span");
|
||||
tokenElement.classList.add("token");
|
||||
if (context["match_cpos_list"].includes(cpos)) {
|
||||
if (message["match_cpos_list"].includes(cpos)) {
|
||||
tokenElement.classList.add("bold");
|
||||
}
|
||||
tokenElement.dataset.cpos = cpos;
|
||||
@ -364,13 +378,12 @@
|
||||
tokenElement.classList.add("chip");
|
||||
addToolTipToTokenElement(tokenElement, token);
|
||||
}
|
||||
tokenElements.push(tokenElement);
|
||||
tokenElements.add(tokenElement);
|
||||
sentenceElement.append(tokenElement);
|
||||
sentenceElement.append(document.createTextNode(" "));
|
||||
}
|
||||
contextResultsElement.append(sentenceElement);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user