Enhance pj_analyse

app/static/js/nopaque.CorpusAnalysisClient.js

@@ -47,13 +47,24 @@ class CorpusAnalysisClient {
     this.socket.emit("pj_corpus_analysis_init", this.corpusId);
   }
 
-  query(query) {
+  query(queryStr) {
     if (this.displays.query.errorContainer != undefined) {this.displays.query.errorContainer.innerHTML == "";}
     if (this.displays.query != undefined) {this.displays.query.setVisibilityByStatus("waiting");}
-    nopaque.socket.emit("pj_corpus_analysis_query", query);
+    nopaque.socket.emit("pj_corpus_analysis_query", queryStr);
+  }
+
+  getQueryStr(queryFormElement) {
+    // gets query
+    let queryFormData;
+    let queryStr;
+    queryFormData = new FormData(queryFormElement);
+    queryStr = queryFormData.get("query-form-query");
+    return queryStr
   }
 
   setCallback(type, callback) {
+    // saves callback functions into an object. Key is function type, callback
+    // is the callback function
     this.callbacks[type] = callback;
   }
 

app/static/js/nopaque.callbacks.js

@@ -0,0 +1,31 @@
+function querySetup(payload) {
+  // This is called when a query was successfull
+  console.log("Query setup.");
+  console.log(payload);
+  queryResultsDeterminateElement.style.width = "0%";
+  receivedMatchNumElement.innerText = "0";
+  textLookupNumElement.innerText = "0";
+  matchNumElement.innerText = payload.num_matches;
+  results = {};
+  results["matches"] = [];  // list of all c with lc and rc
+  results["cpos_lookup"] = {};  // object contains all cpos as key value pair
+  results["text_lookup"] = {};  // same as above for all text ids
+  results[]
+}
+
+function queryRenderResults(payload) {
+  // This is called when results are transmitted.
+  console.log("CHUNK:", payload.chunk);
+  console.log("RESULTS:", results);
+  if (payload.progress === 100) {
+    queryResultsProgressElement.classList.add("hide");
+  }
+  queryResultsDeterminateElement.style.width = `${payload.progress}%`;
+  results.matches.push(...payload.chunk.matches);
+  receivedMatchNumElement.innerText = `${results.matches.length}`;
+  // incorporating new chunk results into full results
+  Object.assign(results.cpos_lookup, payload.chunk.cpos_lookup);
+  Object.assign(results.text_lookup, payload.chunk.text_lookup);
+
+  textLookupNumElement.innerText = `${Object.keys(results.text_lookup).length}`;
+}

app/templates/corpora/analyse_corpus.html.j2

@@ -247,7 +247,7 @@ server side -->
   var queryResultsDeterminateElement; // progress bar for recieved query status
   var queryResultsTableElement;  // table element displaying the query results
   var queryLoadingElement;  // shows progress bar until first results are in
-  var queryFormElement;  // the quer form
+  var queryFormElement;  // the query form
   var hitsPerPageInputElement;  // value of hits per page (part of query form)
   var contextPerItemElement;  // value of contex per match (part of query form)
   var paginationElements;  // top and button pagination elements

app/templates/corpora/pj_analyse_corpus.html.j2

@@ -5,11 +5,17 @@
 {% 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">
+    <li class="active">
+      <!-- <div class="collapsible-header">
+        <i class="material-icons">search</i>CQP Query
+      </div> -->
+      <!-- Div element above is part of valid materialize collapsible.
+      Commented out to prevent the user from collapsing it and also to save
+      space -->
+      <div class="collapsible-body" style="padding-top: 10px;
+                                           padding-right: 2rem;
+                                           padding-bottom: 0px;
+                                           padding-left: 2rem;">
         <!-- Query form -->
         <form id="query-form">
           <div class="row">
@@ -104,8 +110,24 @@
 </div>
 
 
-<script src="{{ url_for('static', filename='js/nopaque.CorpusAnalysisClient.js') }}"></script>
+<script src="{{ url_for('static', filename='js/nopaque.CorpusAnalysisClient.js') }}">
+</script>
+<script src="{{ url_for('static', filename='js/nopaque.callbacks.js') }}">
+</script>
 <script>
+  // ###### Defining global variables used in other functions ######
+  var results;  // full JSON object holding match results
+  var queryFormElement;  // the query form
+  var collapsibleElements;  // all collapsibles on site
+  var queryResultsProgressElement;  // Div element holding the progress bar
+  var queryResultsDeterminateElement;  // The progress bar for recieved results
+
+  // ###### Initialize variables ######
+
+
+  // get collapsibles to alter options of those
+  var collapsibleElements = document.querySelector('.collapsible.expandable');
+
   var client = undefined;
   var initDisplay = undefined;
   var queryDisplay = undefined;
@@ -115,53 +137,43 @@
   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 matchNumElement = document.getElementById("match-num");
-  var textLookupNumElement = document.getElementById("text-lookup-num");
+  receivedMatchNumElement = document.getElementById("received-match-num");
+  matchNumElement = document.getElementById("match-num");
+  textLookupNumElement = document.getElementById("text-lookup-num");
 
-  var results = undefined;
 
   document.addEventListener("DOMContentLoaded", () => {
+    //set accordion of collapsibles to false
+    M.Collapsible.init(collapsibleElements, {accordion: false});
+
     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();
+    // set displays visibilitys and Callback functions
     client.setDisplay("init", initDisplay);
-    client.setCallback("init", () => {initModal.close();});
+    client.setCallback("init", () => {
+      initModal.close();
+    });
     client.setDisplay("query", queryDisplay);
     client.setCallback("query", (payload) => {
-      // This is called when a query was successfull
-      results = {matches: [], cpos_lookup: {}, text_lookup: {}};
-      queryResultsDeterminateElement.style.width = "0%";
-      receivedMatchNumElement.innerText = "0";
-      textLookupNumElement.innerText = "0";
-      matchNumElement.innerText = payload.num_matches;
+      querySetup(payload);
     });
     client.setCallback("query_results", (payload) => {
-      // This is called when results are transmitted.
-      if (payload.progress === 100) {
-        queryResultsProgressElement.classList.add("hide");
-      }
-      queryResultsDeterminateElement.style.width = `${payload.progress}%`;
-      results.matches.push(...payload.chunk.matches);
-      receivedMatchNumElement.innerText = `${results.matches.length}`;
-      Object.assign(results.cpos_lookup, payload.chunk.cpos_lookup);
-      Object.assign(results.text_lookup, payload.chunk.text_lookup);
-      textLookupNumElement.innerText = `${Object.keys(results.text_lookup).length}`;
+      queryRenderResults(payload);
     });
 
     // Trigger corpus analysis initialization on server side
     client.init();
-    queryFormElement.addEventListener("submit", (e) => {
+    // start a query request on submit
+    queryFormElement.addEventListener("submit", (event) => {
       // 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);
+      event.preventDefault();
+      // Get query string and send query to server
+      let queryStr = client.getQueryStr(queryFormElement);
+      client.query(queryStr);
     });
   });
 </script>