From d63b5ec266bb113a89d8d018efd4866b3214da43 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Wed, 27 Nov 2019 09:36:27 +0100
Subject: [PATCH] Handle new data structure

---
 app/templates/corpora/analyse_corpus.html.j2 | 90 ++++++++------------
 1 file changed, 36 insertions(+), 54 deletions(-)

diff --git a/app/templates/corpora/analyse_corpus.html.j2 b/app/templates/corpora/analyse_corpus.html.j2
index 57ce1782..c60fa662 100644
--- a/app/templates/corpora/analyse_corpus.html.j2
+++ b/app/templates/corpora/analyse_corpus.html.j2
@@ -103,78 +103,60 @@
 <script>
   var loadingModal;
 
-  document.addEventListener('DOMContentLoaded', function() {
+  document.addEventListener("DOMContentLoaded", function() {
     loadingModal = M.Modal.init(document.getElementById("loading-modal"),
                                 {"dismissible": false});
     loadingModal.open();
+    socket.emit("request_corpus_analysis", {{ corpus_id }});
   });
-  socket.emit('request_corpus_analysis', {{ corpus_id }});
-  socket.on('request_corpus_analysis', function(msg) {
-    if (msg === '[201]: Created') {loadingModal.close();}
+
+  socket.on("request_corpus_analysis", function(msg) {
+    if (msg === "[201]: Created") {loadingModal.close();}
   });
 
   var queryFormElement = document.getElementById("query-form");
   var queryFormSubmitElement = document.getElementById("query-form-submit");
   var queryResultsElement = document.getElementById("query-results");
 
-  queryFormSubmitElement.addEventListener('click', function(event) {
+  queryFormSubmitElement.addEventListener("click", function(event) {
     event.preventDefault();
     let formData = new FormData(queryFormElement);
-    let queryData = {'context': formData.get('context'),
-                     'hits_per_page': formData.get('hits_per_page'),
-                     'query': formData.get('query')};
+    let queryData = {"context": formData.get("context"),
+                     "hits_per_page": formData.get("hits_per_page"),
+                     "query": formData.get("query")};
     socket.emit('corpus_analysis', queryData);
     M.toast({html: 'Query has been sent!'});
   });
 
-  socket.on('corpus_analysis', function(matches) {
-    if (matches === null) {
-      M.toast({html: 'Query has no results!'});
-    } else {
-      console.log(matches);
-      let htmlString = "";
-      for (let match of Object.values(matches)) {
-        niceMatch = matchInfo(match);
-        htmlString += `<tr><td>${niceMatch["text_title"]}</td><td>${niceMatch["left"]}</td><td>${niceMatch["match"]}</td><td>${niceMatch["right"]}</td></tr>`;
+  socket.on('corpus_analysis', function(result) {
+    console.log(result['matches']);
+
+    var htmlString;
+    var token;
+
+    for (let match of result['matches']) {
+      htmlString = `<tr class="match">`;
+      htmlString += `<td class="left-context">`;
+      for (cpos of match['lc']) {
+        token = result['cpos_lookup'][cpos];
+        htmlString += `<span data-cpos="${cpos}">${token['word']}</span>`;
       }
-      queryResultsElement.innerHTML = htmlString;
+      htmlString += `</td>`;
+      htmlString += `<td class="hit">`;
+      for (cpos of match["hit"]) {
+        token = result['cpos_lookup'][cpos];
+        htmlString += `<span data-cpos="${cpos}">${token['word']}</span>`;
+      }
+      htmlString += `</td>`;
+      htmlString += `<td class="right-context">`;
+      for (cpos of match['rc']) {
+        token = result['cpos_lookup'][cpos];
+        htmlString += `<span data-cpos="${cpos}">${token['word']}</span>`;
+      }
+      htmlString += `</td>`;
+      htmlString += `</tr>`;
+      queryResultsElement.insertAdjacentHTML("beforeend", htmlString);
     }
   });
-
-  function matchInfo(match) {
-    var niceMatch = {"left": "", "match": "", "right": ""};
-    var tmp = Object.values(Object.values(match["match_cpos"])[0])[0];
-    niceMatch["text_author"] = tmp["text_author"][1];
-    niceMatch["text_title"] = tmp["text_title"][1];
-    niceMatch["publishing_year"] = tmp["text_publishing_year"][1];
-    for (let token of Object.values(match['left_context_cpos'])) {
-      tmp = Object.values(token)[0];
-      if (tmp["simple_pos"] != "PUNCT") {niceMatch["left"] += " ";}
-      niceMatch["left"] += '<span class="token">'
-                            + '<span class="word">' + tmp["word"] + '</span>'
-                            + '<span class="pos">' + tmp["pos"] + '</span>'
-                            + '<span class="lemma">' + tmp["lemma"] + '</span>'
-                          + '</span>';
-    }
-    for (let token of Object.values(match['match_cpos'])) {
-      tmp = Object.values(token)[0];
-      if (tmp["simple_pos"] != "PUNCT") {niceMatch["match"] += " ";}
-      niceMatch["match"] += '<span class="token" data-cpos="">'
-                            + '<span class="word">' + tmp["word"] + '</span>'
-                            + '<span class="pos">' + tmp["pos"] + '</span>'
-                            + '<span class="lemma">' + tmp["lemma"] + '</span>'
-                          + '</span>';
-    }
-    for (let token of Object.values(match['right_context_cpos'])) {
-      tmp = Object.values(token)[0];
-      if (tmp["simple_pos"] != "PUNCT") {niceMatch["right"] += " ";}
-      niceMatch["right"] += '<span class="token">'
-                            + '<span class="word">' + tmp["word"] + '</span>'
-                            + '<span class="pos">' + tmp["pos"] + '</span>'
-                            + '<span class="lemma">' + tmp["lemma"] + '</span>'
-                          + '</span>';
-    }
-    return niceMatch
-  }
 </script>
 {% endblock %}