Add tooltips to query ui

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)

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 %}