diff --git a/app/corpora/events.py b/app/corpora/events.py
index 492d69cbe14b2ba44137caeee4679c1a3c352ffe..265285b5fce6c7643d26d727118592bed76f799a 100644
--- a/app/corpora/events.py
+++ b/app/corpora/events.py
@@ -73,13 +73,14 @@ def corpus_analysis(message):
for match in data['matches']:
cpos_list += match['lc'] + match['hit'] + match['rc']
cpos_list = list(set(cpos_list))
+ lemma_list = client.cl_cpos2str('{}.lemma'.format(corpus), cpos_list)
pos_list = client.cl_cpos2str('{}.pos'.format(corpus), cpos_list)
simple_pos_list = client.cl_cpos2str('{}.simple_pos'.format(corpus), cpos_list)
s_id_list = client.cl_cpos2struc('{}.s'.format(corpus), cpos_list)
text_id_list = client.cl_cpos2struc('{}.text'.format(corpus), cpos_list)
word_list = client.cl_cpos2str('{}.word'.format(corpus), cpos_list)
- for cpos, pos, simple_pos, s_id, text_id, word in zip(cpos_list, pos_list, simple_pos_list, s_id_list, text_id_list, word_list):
- data['cpos_lookup'][cpos] = {'pos': pos, 'simple_pos': simple_pos, 's_id': s_id, 'text_id': text_id, 'word': word}
+ for cpos, lemma, pos, simple_pos, s_id, text_id, word in zip(cpos_list, lemma_list, pos_list, simple_pos_list, s_id_list, text_id_list, word_list):
+ data['cpos_lookup'][cpos] = {'lemma': lemma, 'pos': pos, 'simple_pos': simple_pos, 's_id': s_id, 'text_id': text_id, 'word': word}
text_author_list = client.cl_struc2str('{}.text_author'.format(corpus), text_id_list)
text_publishing_year_list = client.cl_struc2str('{}.text_publishing_year'.format(corpus), text_id_list)
text_title_list = client.cl_struc2str('{}.text_title'.format(corpus), text_id_list)
diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2
index 557fb1d8cacab945649aa6052dd1fbe75ee91a3b..b27049681a6e094e92b300bd7a9690b837a2968b 100644
--- a/app/templates/corpora/analyse_corpus.html.j2
+++ b/app/templates/corpora/analyse_corpus.html.j2
@@ -2,16 +2,8 @@
{% block page_content %}
<style>
- .token-box {
- padding: 5px;
- margin: 2px 0;
- border-radius: 5px;
- background-color: #009688;
- display: inline-block;
- color: white;
- }
- .token-box:hover {
- background-color: #00bfa5;
+ .token.chip:hover {
+ background-color: #9e9e9e;
cursor: pointer;
}
</style>
@@ -88,7 +80,7 @@
<div class="card-content">
<span class="card-title">Query Results</span>
<div>
- <table class="highlight">
+ <table>
<thead>
<tr>
<th style="width: 5%">Title</th>
@@ -138,14 +130,18 @@
var expertModeSwitchElement = document.getElementById("expert-mode-switch");
var tokenElements = [];
+ var result;
expertModeSwitchElement.addEventListener('change', function(event) {
if (event.target.checked) {
tokenElements.forEach(function(tokenElement) {
- tokenElement.classList.add("token-box");
+ tokenElement.classList.add("chip");
+ token = result["cpos_lookup"][tokenElement.dataset.cpos];
+ addToolTipToTokenElement(tokenElement, token);
});
} else {
tokenElements.forEach(function(tokenElement) {
- tokenElement.classList.remove("token-box");
+ tokenElement.classList.remove("chip");
+ tokenElement.M_Tooltip.destroy()
});
}
})
@@ -163,61 +159,95 @@
M.toast({html: "Query has been sent!"});
});
- socket.on("corpus_analysis", function(result) {
- console.log(result);
- var htmlString = "";
+ socket.on("corpus_analysis", function(message) {
+ var matchElement;
+ var matchTextTitlesElement;
+ var matchLeftContextElement;
+ var matchHitElement;
+ var matchRightContextElement;
var textTitles;
var token;
+ var tokenElement;
- if (result['matches'].length === 0) {
- M.toast({html: 'No results!'});
- }
+ result = message;
+
+ queryResultsElement.innerHTML = "";
for (let match of result['matches']) {
- htmlString += `<tr class="match">`;
- htmlString += `<td class="title">`;
- textTitles = new Set();
- for (cpos of match["hit"]) {
- token = result["cpos_lookup"][cpos];
- textTitles.add(result["text_loopup"][token["text_id"]]["title"]);
- }
- htmlString += [...textTitles].join(",");
- htmlString += `</td>`;
- htmlString += `<td class="left-context">`;
+ matchElement = document.createElement("tr");
+ matchElement.classList.add("match");
+ matchTextTitlesElement = document.createElement("td");
+ matchTextTitlesElement.classList.add("text-titles");
+ matchElement.append(matchTextTitlesElement);
+ matchLeftContextElement = document.createElement("td");
+ matchLeftContextElement.classList.add("left-context");
for (cpos of match["lc"]) {
token = result["cpos_lookup"][cpos];
- htmlString += " ";
- htmlString += `<span class="token" data-cpos="${cpos}">${token["word"]}</span>`;
+ tokenElement = document.createElement("span");
+ tokenElement.classList.add("token");
+ tokenElement.dataset.cpos = cpos;
+ tokenElement.innerText = token["word"];
+ if (expertModeSwitchElement.checked) {
+ tokenElement.classList.add("chip");
+ addToolTipToTokenElement(tokenElement, token);
+ }
+ matchLeftContextElement.append(tokenElement);
+ matchLeftContextElement.append(document.createTextNode(" "));
+ tokenElements.push(tokenElement);
}
- htmlString += `</td>`;
- htmlString += `<td class="hit">`;
+ matchElement.append(matchLeftContextElement);
+ matchHitElement = document.createElement("td");
+ matchHitElement.classList.add("hit");
+ textTitles = new Set();
for (cpos of match["hit"]) {
token = result["cpos_lookup"][cpos];
- htmlString += " ";
- htmlString += `<span class="token" data-cpos="${cpos}">${token["word"]}</span>`;
+ tokenElement = document.createElement("span");
+ tokenElement.classList.add("token");
+ tokenElement.dataset.cpos = cpos;
+ tokenElement.innerText = token["word"];
+ if (expertModeSwitchElement.checked) {
+ tokenElement.classList.add("chip");
+ addToolTipToTokenElement(tokenElement, token);
+ }
+ matchHitElement.append(tokenElement);
+ matchHitElement.append(document.createTextNode(" "));
+ tokenElements.push(tokenElement);
+ textTitles.add(result["text_loopup"][token["text_id"]]["title"]);
}
- htmlString += `</td>`;
- htmlString += `<td class="right-context">`;
+ 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];
- htmlString += " ";
- htmlString += `<span class="token" data-cpos="${cpos}">${token["word"]}</span>`;
+ tokenElement = document.createElement("span");
+ tokenElement.classList.add("token");
+ tokenElement.dataset.cpos = cpos;
+ tokenElement.innerText = token["word"];
+ if (expertModeSwitchElement.checked) {
+ tokenElement.classList.add("chip");
+ addToolTipToTokenElement(tokenElement, token);
+ }
+ matchRightContextElement.append(tokenElement);
+ matchRightContextElement.append(document.createTextNode(" "));
+ tokenElements.push(tokenElement);
}
- htmlString += `</td>`;
- htmlString += `</tr>`;
+ matchElement.append(matchRightContextElement);
+ queryResultsElement.append(matchElement);
}
-
- queryResultsElement.innerHTML = htmlString;
-
- tokenElements = queryResultsElement.querySelectorAll(".token");
- tokenElements.forEach(function(tokenElement) {
- tokenElement.addEventListener("click", function(event) {
- if (!expertModeSwitchElement.checked) {return;}
- var token = result["cpos_lookup"][tokenElement.dataset.cpos];
- var text = result["text_loopup"][token["text_id"]];
- alert(`${token["word"]} // ${token["pos"]} // ${token["simple_pos"]} // ${text["title"]}`);
- });
- });
});
+
+ function addToolTipToTokenElement(tokenElement, token) {
+ M.Tooltip.init(tokenElement,
+ {"html": `<p>Token information</p>
+ <p class="left-align">
+ word: ${token["word"]}<br>
+ lemma: ${token["lemma"]}<br>
+ pos: ${token["pos"]}<br>
+ simple_pos: ${token["simple_pos"]}<br>
+ text: ${result["text_loopup"][token["text_id"]]["title"]}
+ </p>`,
+ "position": "top"});
+ }
</script>
{% endblock %}