Add basic style for expert view

app/corpora/events.py

@@ -75,10 +75,11 @@ def corpus_analysis(message):
     cpos_list = list(set(cpos_list))
     pos_list = client.cl_cpos2str('{}.pos'.format(corpus), cpos_list)
     simple_pos_list = client.cl_cpos2str('{}.simple_pos'.format(corpus), cpos_list)
-    text_id_list = client.cl_cpos2struc('{}.text_title'.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, text_id, word in zip(cpos_list, pos_list, simple_pos_list, text_id_list, word_list):
-        data['cpos_lookup'][cpos] = {'pos': pos, 'simple_pos': simple_pos, 'text_id': text_id, 'word': word}
+    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}
     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

 {% extends "full_width.html.j2" %}
 
 {% 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;
+    cursor: pointer;
+  }
+</style>
+
 <div class="col s12 m3 sticky">
   <div class="card">
     <div class="card-content">
@@ -36,6 +51,13 @@
             <span class="helper-text red-text">{{ error }}</span>
           {% endfor %}
         </div>
+        <div class="switch">
+          <label>
+            Expert Mode
+            <input type="checkbox" id="expert-mode-switch">
+            <span class="lever"></span>
+          </label>
+        </div>
       </form>
     </div>
   </div>
@@ -69,10 +91,10 @@
         <table class="highlight">
           <thead>
             <tr>
-              <th>Title</th>
-              <th>Left context</th>
-              <th>Match</th>
-              <th>Right Context</th>
+              <th style="width: 5%">Title</th>
+              <th style="width: 25%">Left context</th>
+              <th style="width: 45%">Match</th>
+              <th style="width: 25%">Right Context</th>
             </tr>
           </thead>
           <tbody id="query-results"></tbody>
@@ -103,7 +125,6 @@
 
 <script>
   var loadingModal;
-
   document.addEventListener("DOMContentLoaded", function() {
     loadingModal = M.Modal.init(document.getElementById("loading-modal"),
                                 {"dismissible": false});
@@ -115,10 +136,23 @@
     if (msg === "[201]: Created") {loadingModal.close();}
   });
 
+  var expertModeSwitchElement = document.getElementById("expert-mode-switch");
+  var tokenElements = [];
+  expertModeSwitchElement.addEventListener('change', function(event) {
+    if (event.target.checked) {
+      tokenElements.forEach(function(tokenElement) {
+        tokenElement.classList.add("token-box");
+      });
+    } else {
+      tokenElements.forEach(function(tokenElement) {
+        tokenElement.classList.remove("token-box");
+      });
+    }
+  })
+
   var queryFormElement = document.getElementById("query-form");
   var queryFormSubmitElement = document.getElementById("query-form-submit");
   var queryResultsElement = document.getElementById("query-results");
-
   queryFormSubmitElement.addEventListener("click", function(event) {
     event.preventDefault();
     let formData = new FormData(queryFormElement);
@@ -132,6 +166,7 @@
   socket.on("corpus_analysis", function(result) {
     console.log(result);
     var htmlString = "";
+    var textTitles;
     var token;
 
     if (result['matches'].length === 0) {
@@ -140,25 +175,32 @@
 
     for (let match of result['matches']) {
       htmlString += `<tr class="match">`;
-      htmlString += `<td class="title"></td>`
+      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">`;
       for (cpos of match["lc"]) {
         token = result["cpos_lookup"][cpos];
-        htmlString += token["simple_pos"] != "PUNCT" ? " " : "";
+        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 += token["simple_pos"] != "PUNCT" ? " " : "";
+        htmlString += " ";
         htmlString += `<span class="token" data-cpos="${cpos}">${token["word"]}</span>`;
       }
       htmlString += `</td>`;
       htmlString += `<td class="right-context">`;
       for (cpos of match["rc"]) {
         token = result["cpos_lookup"][cpos];
-        htmlString += token["simple_pos"] != "PUNCT" ? " " : "";
+        htmlString += " ";
         htmlString += `<span class="token" data-cpos="${cpos}">${token["word"]}</span>`;
       }
       htmlString += `</td>`;
@@ -167,10 +209,12 @@
 
     queryResultsElement.innerHTML = htmlString;
 
-    queryResultsElement.querySelectorAll(".token").forEach(function(tokenElement) {
+    tokenElements = queryResultsElement.querySelectorAll(".token");
+    tokenElements.forEach(function(tokenElement) {
       tokenElement.addEventListener("click", function(event) {
-        let token = result["cpos_lookup"][tokenElement.dataset.cpos];
-        let text = result["text_loopup"][token["text_id"]];
+        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"]}`);
       });
     });