mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-12-24 18:34:18 +00:00
Add tooltips to query ui
This commit is contained in:
Patrick Jentsch
parent
acedd35e64
commit
9b71fb0cc9
@ -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)
|
||||
|
||||
@ -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);
|
||||
}
|
||||
htmlString += `</td>`;
|
||||
htmlString += `</tr>`;
|
||||
matchRightContextElement.append(tokenElement);
|
||||
matchRightContextElement.append(document.createTextNode(" "));
|
||||
tokenElements.push(tokenElement);
|
||||
}
|
||||
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 %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user