Add Inspect view

app/templates/corpora/analyse_corpus.html.j2

@@ -2,6 +2,12 @@
 
 {% block page_content %}
 <style>
+  .token.chip.bold {
+    background-color: #48a54b;
+  }
+  .token.bold {
+    font-weight: bolder;
+  }
   .token.chip:hover {
     background-color: #9e9e9e;
     cursor: pointer;
@@ -46,7 +52,7 @@
         <button class="btn waves-effect waves-light" id="query-form-submit" style="width: 100%;" type="submit">Start Query</button>
         <p>&nbsp;</p>
         <span class="card-title">Help</span>
-        <p><a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">CQP Query Language Tutorial</a></p>
+        <p><a target="_blank" rel="noopener noreferrer" href="http://cwb.sourceforge.net/files/CQP_Tutorial/">CQP Query Language Tutorial</a></p>
         <p>&nbsp;</p>
         <span class="card-title">Options</span>
         <div class="input-field">
@@ -137,19 +143,34 @@
   </div>
 </div>
 
-<div id="context-modal" class="modal">
+<div id="context-modal" class="modal modal-fixed-footer">
   <div class="modal-content">
-    <h4>Modal Header</h4>
-    <p>A bunch of text</p>
+    <h4>Match context and information</h4>
+    <div id="loading-data">
+      <div class="progress">
+        <div class="indeterminate"></div>
+      </div>
+    </div>
+    <div id="recieved-data" class="hide">
+    </div>
   </div>
   <div class="modal-footer">
-    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
+    <a href="#!" class="left waves-effect waves-green btn">Export</a>
+    <a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
   </div>
 </div>
 
 <script>
+  var contextModal;
   var loadingModal;
   document.addEventListener("DOMContentLoaded", function() {
+    contextModal = M.Modal.init(document.getElementById("context-modal"),
+                                {"dismissible": true,
+                                  onCloseEnd: function() {
+                                    document.getElementById("loading-data").classList.remove("hide");
+                                    document.getElementById("recieved-data").classList.add("hide");
+                                  }
+                                });
     loadingModal = M.Modal.init(document.getElementById("loading-modal"),
                                 {"dismissible": false});
     loadingModal.open();
@@ -181,6 +202,7 @@
   var queryFormElement = document.getElementById("query-form");
   var queryFormSubmitElement = document.getElementById("query-form-submit");
   var queryResultsElement = document.getElementById("query-results");
+  var contextResultsElement = document.getElementById("recieved-data");
   queryFormSubmitElement.addEventListener("click", function(event) {
     event.preventDefault();
     let formData = new FormData(queryFormElement);
@@ -193,6 +215,9 @@
 
   socket.on("corpus_analysis", function(message) {
     console.log(message);
+    if (message === null) {
+      M.toast({html: "No results for this query!", displayLength: 10000, classes: "red"});
+    } else {
     var matchElement;
     var matchTextTitlesElement;
     var matchLeftContextElement;
@@ -253,7 +278,8 @@
       moreContextBtn.innerHTML = '<i class="material-icons">search</i>';
       matchHitElement.append(document.createElement("br"), document.createElement("br"));
       matchHitElement.append(moreContextBtn);
-      moreContextBtn.onclick = function(){
+      moreContextBtn.onclick = function() {
+        contextModal.open();
         var cpos = match["hit"];
         socket.emit("inspect_match", {"cpos": cpos});
       };
@@ -279,7 +305,7 @@
       matchElement.append(matchRightContextElement);
       queryResultsElement.append(matchElement);
     }
-  });
+  }});
 
   function addToolTipToTokenElement(tokenElement, token) {
     M.Tooltip.init(tokenElement,
@@ -309,10 +335,41 @@
                    "transitionMovement": 0});
   }
 
+
   socket.on("match_context", function(message) {
-    console.log(message);
-    var elems = document.querySelectorAll('.modal');
-    var instances = M.Modal.init(elems);
+
+    let token;
+    let tokenElement;
+    let tokenElements = [];
+
+    console.log("Incoming data:", message);
+    context = message;
+    document.getElementById("loading-data").classList.add("hide");
+    document.getElementById("recieved-data").classList.remove("hide");
+
+    contextResultsElement.innerHTML = "<br>";
+
+    for (let [key, value] of Object.entries(context['context_s_cpos'])) {
+      sentenceElement = document.createElement("p");
+      for (cpos of value) {
+        token = context["cpos_lookup"][cpos];
+        tokenElement = document.createElement("span");
+        tokenElement.classList.add("token");
+        if (context["match_cpos_list"].includes(cpos)) {
+          tokenElement.classList.add("bold");
+        }
+        tokenElement.dataset.cpos = cpos;
+        tokenElement.innerText = token["word"];
+        if (expertModeSwitchElement.checked) {
+          tokenElement.classList.add("chip");
+          addToolTipToTokenElement(tokenElement, token);
+        }
+        tokenElements.push(tokenElement);
+        sentenceElement.append(tokenElement);
+        sentenceElement.append(document.createTextNode(" "));
+      }
+      contextResultsElement.append(sentenceElement);
+    }
   });
 
 </script>