diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2
index 25bcb23b2d3caa19856c4d131219c72c1607b586..b819040c8e18eeae459b0350c5c4fd70daea96e1 100644
--- a/app/templates/corpora/analyse_corpus.html.j2
+++ b/app/templates/corpora/analyse_corpus.html.j2
@@ -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> </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 %}