compatibility fixes and add reimplementations

app/templates/corpora/analyse_corpus.html.j2

@@ -258,11 +258,6 @@ server side -->
   queryFinished = false;
   analysisClientStatus = {};
 
-  nopaque.socket.on("connect", function() {
-    sessionId = nopaque.socket.id;
-    console.log("Clients current session id:", sessionId);
-    setAnalysisStatus("idle", sessionId);
-  });
 
   // creates some models on DOMContentLoaded
   document.addEventListener("DOMContentLoaded", function() {
@@ -276,22 +271,38 @@ server side -->
                                 {"dismissible": true});
     M.Collapsible.init(elem, {accordion: false});
     loadingModal.open();
+    nopaque.socket.on("connect", function() {
+      sessionId = nopaque.socket.id;
+      console.log("Clients current session id:", sessionId);
+      setAnalysisStatus("idle", sessionId);
+    });
+    // close loading modal if container for analysis has started
+    nopaque.socket.on("corpus_analysis_init", function(response) {
+      if (response.code === 201) {
+        loadingModal.close();
+      } else {
+        console.log("[ERROR] corpus_analysis_init");
+        console.log(response);
+      }
+    });
+    // recieves server side analysis status updates and sets those accordingly in
+    // analysisClientStatus
+    nopaque.socket.on("send_analysis_status_server", (response) => {
+      console.log("Recieved new analysis status from server:", response.status);
+      setAnalysisStatus(response.status);
+    });
+
+    // recieves results on "corpus_analysis_query" via socket.io
+    nopaque.socket.on("corpus_analysis_query", recieveResults);
+
+    // get context of one match if inspected via socket.io
+    nopaque.socket.on("match_context", showMatchContext);
     nopaque.socket.emit("corpus_analysis_init", {{ corpus_id }});
   });
 
   // sets collapsible display options to expandable isntead of accordion
   var elem = document.querySelector('.collapsible.expandable');
 
-  // close loading modal if container for analysis has started
-  nopaque.socket.on("corpus_analysis_init", function(response) {
-    if (response.code === 201) {
-      loadingModal.close();
-    } else {
-      console.log("[ERROR] corpus_analysis_init");
-      console.log(response);
-    }
-  });
-
   // getting some HTML-elements to use/hide/remove/show or add some other
   // elements to them.
   // These elements will be used inside functions in nopaque.analyse_corpus.js
@@ -304,19 +315,6 @@ server side -->
   queryFormElement = document.getElementById("query-form");
   queryFormElement.addEventListener("submit", sendQuery);
 
-  // recieves server side analysis status updates and sets those accordingly in
-  // analysisClientStatus
-  nopaque.socket.on("send_analysis_status_server", (response) => {
-    console.log("Recieved new analysis status from server:", response.status);
-    setAnalysisStatus(response.status);
-  });
-
-  // recieves results on "corpus_analysis_query" via socket.io
-  nopaque.socket.on("corpus_analysis_query", recieveResults);
-
-  // get context of one match if inspected via socket.io
-  nopaque.socket.on("match_context", showMatchContext);
-
   // live update of hits per page if hits per page value is changed
   hitsPerPageInputElement = document.getElementById("hits-per-page");
   hitsPerPageInputElement.onchange = changeHitsPerPage;

app/templates/corpora/pj_analyse_corpus.html.j2

@@ -0,0 +1,182 @@
+{% extends "nopaque.html.j2" %}
+
+{% set full_width = True %}
+
+{% block page_content %}
+<div class="col s12">
+  <ul class="collapsible expandable">
+    <li class="active hoverable">
+      <div class="collapsible-header">
+        <i class="material-icons">search</i>Query
+      </div>
+      <div class="collapsible-body">
+        <!-- Query form -->
+        <form id="query-form">
+          <div class="row">
+            <div class="col s12 m10">
+              <div class="input-field">
+                <i class="material-icons prefix">search</i>
+                {{ query_form.query() }}
+                {{ query_form.query.label }}
+                <span class="helper-text">
+                  <a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">
+                    <i class="material-icons" style="font-size: inherit;">help</i>
+                    CQP query language tutorial
+                  </a>
+                </span>
+              </div>
+            </div>
+            <div class="col s12 m2">
+              <br class="hide-on-small-only">
+              {{ macros.submit_button(query_form.submit) }}
+            </div>
+          </div>
+        </form>
+      </div>
+    </li>
+    <li class="hoverable">
+      <div class="collapsible-header">
+        <i class="material-icons">settings</i>Display Options
+      </div>
+      <div class="collapsible-body">
+        <!-- Display options form -->
+        <form id="display-options-form">
+          <div class="row">
+            <div class="col s12 m6">
+              <div class="input-field">
+                <i class="material-icons prefix">format_list_numbered</i>
+                {{ display_options_form.results_per_page() }}
+                {{ display_options_form.results_per_page.label }}
+              </div>
+            </div>
+            <div class="col s12 m6">
+              <div class="input-field">
+                <i class="material-icons prefix">short_text</i>
+                {{ display_options_form.result_context() }}
+                {{ display_options_form.result_context.label }}
+              </div>
+            </div>
+            <div class="col s12">
+              <div class="switch">
+                <label>
+                  {{ display_options_form.expert_mode.label.text }}
+                  {{ display_options_form.expert_mode() }}
+                  <span class="lever"></span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </li>
+  </ul>
+</div>
+
+<div class="col s12" id="query-display">
+  <div class="card">
+    <div class="card-content">
+      <span class="card-title">Query Results</span>
+      <div class="error-container hide show-on-error"></div>
+      <div class="hide show-on-success">
+        <p>
+          <span id="received-match-num"></span> of <span id="total-match-num"></span> matches loaded.<br>
+          Matches occured in <span id="text-lookup-num"></span> corpus files.
+        </p>
+        <div class="progress" id="query-results-progress">
+          <div class="determinate" id="query-results-determinate"></div>
+        </div>
+        <ul class="pagination paginationTop"></ul>
+        <!-- Query results table -->
+        <table class="highlight responsive-table">
+          <thead>
+            <tr>
+              <th style="width: 2%">Nr.</th>
+              <th style="width: 3%">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 class="list"></tbody>
+        </table>
+        <ul class="pagination paginationBottom"></ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<!-- Modals -->
+<div class="modal no-autoinit" id="init-display">
+  <div class="modal-content">
+    <h4>Initializing your corpus analysis session...</h4>
+    <div class="error-container hide show-on-error"></div>
+    <div class="hide progress show-while-waiting">
+      <div class="indeterminate"></div>
+    </div>
+  </div>
+</div>
+
+
+<script src="{{ url_for('static', filename='js/nopaque.CorpusAnalysisClient.js') }}"></script>
+<script>
+  var client = undefined;
+  var initDisplay = undefined;
+  var queryDisplay = undefined;
+
+  var initDisplayElement = document.getElementById("init-display");
+  var queryDisplayElement = document.getElementById("query-display");
+  var queryFormElement = document.getElementById("query-form");
+  var queryResultsDeterminateElement = document.getElementById("query-results-determinate");
+  var queryResultsProgressElement = document.getElementById("query-results-progress");
+  var receivedMatchNumElement = document.getElementById("received-match-num");
+  var textLookupNumElement = document.getElementById("text-lookup-num");
+  var totalMatchNumElement = document.getElementById("total-match-num");
+
+  var results = undefined;
+
+  document.addEventListener("DOMContentLoaded", () => {
+    var initModal = M.Modal.init(initDisplayElement, {dismissible: false});
+    // Init corpus analysis components
+    initDisplay = new CorpusAnalysisDisplay(initDisplayElement);
+    queryDisplay = new CorpusAnalysisDisplay(queryDisplayElement);
+    client = new CorpusAnalysisClient({{ corpus_id }}, nopaque.socket);
+    initModal.open();
+    client.setDisplay("init", initDisplay);
+    client.setCallback("init", () => {initModal.close();});
+    client.setDisplay("query", queryDisplay);
+    client.setCallback("query", (response) => {
+      // This is called when a query was successfull
+      results = {matches: [], cpos_lookup: {}, text_lookup: {}};
+      queryResultsDeterminateElement.style.width = "0%";
+      receivedMatchNumElement.innerText = "0";
+      textLookupNumElement.innerText = "0";
+      totalMatchNumElement.innerText = response.num_matches;
+    });
+    client.setCallback("query_results", (response) => {
+      // This is called when results are transmitted.
+      if (response.progress === 100) {
+        queryResultsProgressElement.classList.add("hide");
+      }
+      queryResultsDeterminateElement.style.width = `${response.progress}%`;
+      results.matches.push(...response.chunk.matches);
+      receivedMatchNumElement.innerText = `${results.matches.length}`;
+      Object.assign(results.cpos_lookup, response.chunk.cpos_lookup);
+      Object.assign(results.text_lookup, response.chunk.text_lookup);
+      textLookupNumElement.innerText = `${Object.keys(results.text_lookup).length}`;
+    });
+
+    // Trigger corpus analysis initialization on server side
+    client.init();
+    queryFormElement.addEventListener("submit", (e) => {
+      // Prevent page from reloading on submit
+      e.preventDefault();
+      // Gather query data
+      var queryFormData = new FormData(queryFormElement);
+      var query = queryFormData.get("query-form-query");
+      // Send query to server
+      client.query(query);
+    });
+  });
+</script>
+{% endblock %}