From 9b71fb0cc95d7e10a517e3672e05e88599955a0d Mon Sep 17 00:00:00 2001 From: Patrick Jentsch Date: Thu, 28 Nov 2019 12:09:25 +0100 Subject: [PATCH] Add tooltips to query ui --- app/corpora/events.py | 5 +- app/templates/corpora/analyse_corpus.html.j2 | 138 +++++++++++-------- 2 files changed, 87 insertions(+), 56 deletions(-) diff --git a/app/corpora/events.py b/app/corpora/events.py index 492d69cb..265285b5 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 557fb1d8..b2704968 100644 --- a/app/templates/corpora/analyse_corpus.html.j2 +++ b/app/templates/corpora/analyse_corpus.html.j2 @@ -2,16 +2,8 @@ {% block page_content %} @@ -88,7 +80,7 @@
Query Results
- +
@@ -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 += ``; - htmlString += ``; - htmlString += ``; - htmlString += ``; - htmlString += ``; - htmlString += ``; + 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": `

Token information

+

+ word: ${token["word"]}
+ lemma: ${token["lemma"]}
+ pos: ${token["pos"]}
+ simple_pos: ${token["simple_pos"]}
+ text: ${result["text_loopup"][token["text_id"]]["title"]} +

`, + "position": "top"}); + } {% endblock %}
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 += ``; - for (cpos of match["lc"]) { - token = result["cpos_lookup"][cpos]; - htmlString += " "; - htmlString += `${token["word"]}`; - } - htmlString += ``; - for (cpos of match["hit"]) { - token = result["cpos_lookup"][cpos]; - htmlString += " "; - htmlString += `${token["word"]}`; - } - htmlString += ``; + 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 += `${token["word"]}`; + 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 += `