sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-11-03 20:02:47 +00:00
Code Issues Projects Releases Wiki Activity

Add tooltips to query ui

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

138
app/templates/corpora/analyse_corpus.html.j2
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 %}