Add tooltips to query ui

This commit is contained in:
Patrick Jentsch 2019-11-28 12:09:25 +01:00
parent acedd35e64
commit 9b71fb0cc9
2 changed files with 87 additions and 56 deletions

View File

@ -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)

View File

@ -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">`;
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];
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);
}
matchElement.append(matchLeftContextElement);
matchHitElement = document.createElement("td");
matchHitElement.classList.add("hit");
textTitles = new Set();
for (cpos of match["hit"]) {
token = result["cpos_lookup"][cpos];
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 += [...textTitles].join(",");
htmlString += `</td>`;
htmlString += `<td class="left-context">`;
for (cpos of match["lc"]) {
token = result["cpos_lookup"][cpos];
htmlString += " ";
htmlString += `<span class="token" data-cpos="${cpos}">${token["word"]}</span>`;
}
htmlString += `</td>`;
htmlString += `<td class="hit">`;
for (cpos of match["hit"]) {
token = result["cpos_lookup"][cpos];
htmlString += " ";
htmlString += `<span class="token" data-cpos="${cpos}">${token["word"]}</span>`;
}
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 %}