Skip to content
Snippets Groups Projects
Commit 904e36a8 authored by Patrick Jentsch's avatar Patrick Jentsch
Browse files

Fix js

parent 31ac9ddc
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/templates/corpora/analyse_corpus.html.j2
+ 57
− 44
View file @ 904e36a8
......@@ -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;
queryResultsElement.innerHTML = "";
// Set related global values
lookup["cpos"] = message["cpos_lookup"];
lookup["text"] = message["text_lookup"];
matches = message["matches"];
tokenElements = new Set();
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>&nbsp;</p>";
document.getElementById("context-modal-loading").classList.add("hide");
document.getElementById("context-modal-ready").classList.remove("hide");
let token;
let tokenElement;
let tokenElements = [];
console.log("Incoming data:", message);
context = message;
document.getElementById("loading-data").classList.add("hide");
document.getElementById("recieved-data").classList.remove("hide");
var sentenceElement;
var token;
var tokenElement;
contextResultsElement.innerHTML = "<br>";
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(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 %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment