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)) logger.warning('Got all sentences informations in {} seconds'. format(t_total))
match_context = {'context_s_cpos': context_sentences, match_context = {'context_s_cpos': context_sentences,
'cpos_lookup': all_cpos_infos, 'cpos_lookup': all_cpos_infos,
'text_lookup': text_lookup} 'text_lookup': text_lookup,
'match_cpos_list': match_cpos_list}
return match_context return match_context

View File

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

View File

@ -2,6 +2,12 @@
{% block page_content %} {% block page_content %}
<style> <style>
.token.chip.bold {
background-color: #48a54b;
}
.token.bold {
font-weight: bolder;
}
.token.chip:hover { .token.chip:hover {
background-color: #9e9e9e; background-color: #9e9e9e;
cursor: pointer; 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> <button class="btn waves-effect waves-light" id="query-form-submit" style="width: 100%;" type="submit">Start Query</button>
<p>&nbsp;</p> <p>&nbsp;</p>
<span class="card-title">Help</span> <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> <p>&nbsp;</p>
<span class="card-title">Options</span> <span class="card-title">Options</span>
<div class="input-field"> <div class="input-field">
@ -137,19 +143,34 @@
</div> </div>
</div> </div>
<div id="context-modal" class="modal"> <div id="context-modal" class="modal modal-fixed-footer">
<div class="modal-content"> <div class="modal-content">
<h4>Modal Header</h4> <h4>Match context and information</h4>
<p>A bunch of text</p> <div id="loading-data">
<div class="progress">
<div class="indeterminate"></div>
</div>
</div>
<div id="recieved-data" class="hide">
</div>
</div> </div>
<div class="modal-footer"> <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>
</div> </div>
<script> <script>
var contextModal;
var loadingModal; var loadingModal;
document.addEventListener("DOMContentLoaded", function() { 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"), loadingModal = M.Modal.init(document.getElementById("loading-modal"),
{"dismissible": false}); {"dismissible": false});
loadingModal.open(); loadingModal.open();
@ -181,6 +202,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");
queryFormSubmitElement.addEventListener("click", function(event) { queryFormSubmitElement.addEventListener("click", function(event) {
event.preventDefault(); event.preventDefault();
let formData = new FormData(queryFormElement); let formData = new FormData(queryFormElement);
@ -193,6 +215,9 @@
socket.on("corpus_analysis", function(message) { socket.on("corpus_analysis", function(message) {
console.log(message); console.log(message);
if (message === null) {
M.toast({html: "No results for this query!", displayLength: 10000, classes: "red"});
} else {
var matchElement; var matchElement;
var matchTextTitlesElement; var matchTextTitlesElement;
var matchLeftContextElement; var matchLeftContextElement;
@ -253,7 +278,8 @@
moreContextBtn.innerHTML = '<i class="material-icons">search</i>'; moreContextBtn.innerHTML = '<i class="material-icons">search</i>';
matchHitElement.append(document.createElement("br"), document.createElement("br")); matchHitElement.append(document.createElement("br"), document.createElement("br"));
matchHitElement.append(moreContextBtn); matchHitElement.append(moreContextBtn);
moreContextBtn.onclick = function(){ moreContextBtn.onclick = function() {
contextModal.open();
var cpos = match["hit"]; var cpos = match["hit"];
socket.emit("inspect_match", {"cpos": cpos}); socket.emit("inspect_match", {"cpos": cpos});
}; };
@ -279,7 +305,7 @@
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,
@ -309,10 +335,41 @@
"transitionMovement": 0}); "transitionMovement": 0});
} }
socket.on("match_context", function(message) { socket.on("match_context", function(message) {
console.log(message);
var elems = document.querySelectorAll('.modal'); let token;
var instances = M.Modal.init(elems); 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> </script>