Add Inspect view

This commit is contained in:
Stephan Porada 2019-12-03 15:11:31 +01:00
parent a4ffee5b2e
commit 7ec41a03be
3 changed files with 70 additions and 12 deletions

View File

@ -296,5 +296,6 @@ class CQiWrapper(CQiClient):
logger.warning('Got all sentences informations in {} seconds'. format(t_total))
match_context = {'context_s_cpos': context_sentences,
'cpos_lookup': all_cpos_infos,
'text_lookup': text_lookup}
'text_lookup': text_lookup,
'match_cpos_list': match_cpos_list}
return match_context

View File

@ -47,7 +47,7 @@ def corpus_analysis(message):
query = str(message['query'])
result_len = int(message['hits_per_page'])
context_len = int(message['context'])
result_offset = int(0)
result_offset = 0
client.select_corpus(corpus_name)
client.query_subcorpus(query)
results = client.show_query_results(result_len=result_len,

View File

@ -2,6 +2,12 @@
{% block page_content %}
<style>
.token.chip.bold {
background-color: #48a54b;
}
.token.bold {
font-weight: bolder;
}
.token.chip:hover {
background-color: #9e9e9e;
cursor: pointer;
@ -46,7 +52,7 @@
<button class="btn waves-effect waves-light" id="query-form-submit" style="width: 100%;" type="submit">Start Query</button>
<p>&nbsp;</p>
<span class="card-title">Help</span>
<p><a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">CQP Query Language Tutorial</a></p>
<p><a target="_blank" rel="noopener noreferrer" href="http://cwb.sourceforge.net/files/CQP_Tutorial/">CQP Query Language Tutorial</a></p>
<p>&nbsp;</p>
<span class="card-title">Options</span>
<div class="input-field">
@ -137,19 +143,34 @@
</div>
</div>
<div id="context-modal" class="modal">
<div id="context-modal" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
<h4>Match context and information</h4>
<div id="loading-data">
<div class="progress">
<div class="indeterminate"></div>
</div>
</div>
<div id="recieved-data" class="hide">
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
<a href="#!" class="left waves-effect waves-green btn">Export</a>
<a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
</div>
</div>
<script>
var contextModal;
var loadingModal;
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");
}
});
loadingModal = M.Modal.init(document.getElementById("loading-modal"),
{"dismissible": false});
loadingModal.open();
@ -181,6 +202,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");
queryFormSubmitElement.addEventListener("click", function(event) {
event.preventDefault();
let formData = new FormData(queryFormElement);
@ -193,6 +215,9 @@
socket.on("corpus_analysis", function(message) {
console.log(message);
if (message === null) {
M.toast({html: "No results for this query!", displayLength: 10000, classes: "red"});
} else {
var matchElement;
var matchTextTitlesElement;
var matchLeftContextElement;
@ -253,7 +278,8 @@
moreContextBtn.innerHTML = '<i class="material-icons">search</i>';
matchHitElement.append(document.createElement("br"), document.createElement("br"));
matchHitElement.append(moreContextBtn);
moreContextBtn.onclick = function(){
moreContextBtn.onclick = function() {
contextModal.open();
var cpos = match["hit"];
socket.emit("inspect_match", {"cpos": cpos});
};
@ -279,7 +305,7 @@
matchElement.append(matchRightContextElement);
queryResultsElement.append(matchElement);
}
});
}});
function addToolTipToTokenElement(tokenElement, token) {
M.Tooltip.init(tokenElement,
@ -309,10 +335,41 @@
"transitionMovement": 0});
}
socket.on("match_context", function(message) {
console.log(message);
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
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");
contextResultsElement.innerHTML = "<br>";
for (let [key, value] of Object.entries(context['context_s_cpos'])) {
sentenceElement = document.createElement("p");
for (cpos of value) {
token = context["cpos_lookup"][cpos];
tokenElement = document.createElement("span");
tokenElement.classList.add("token");
if (context["match_cpos_list"].includes(cpos)) {
tokenElement.classList.add("bold");
}
tokenElement.dataset.cpos = cpos;
tokenElement.innerText = token["word"];
if (expertModeSwitchElement.checked) {
tokenElement.classList.add("chip");
addToolTipToTokenElement(tokenElement, token);
}
tokenElements.push(tokenElement);
sentenceElement.append(tokenElement);
sentenceElement.append(document.createTextNode(" "));
}
contextResultsElement.append(sentenceElement);
}
});
</script>