sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-15 01:05:42 +00:00
Code Issues Projects Releases Wiki Activity

Fix js

Browse Source
This commit is contained in:
Patrick Jentsch 2019-12-04 10:40:11 +01:00
parent 31ac9ddcf3
commit 904e36a8bb
1 changed files with 57 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
app/templates/corpora/analyse_corpus.html.j2
View File

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