Add some documentation strings

app/templates/corpora/analyse_corpus.html.j2

@@ -138,13 +138,13 @@
 <!-- Loading animation card when query results are being calculated on the
 server side -->
 <div class="row">
-  <div class="col s12 hide" id="getting-query-results">
+  <div class="col s12 hide" id="calculating-query-results">
     <div class="card">
       <div class="card-content">
         <span class="card-title">Calculating your total results!</span>
         <div>
           <div class="progress">
-            <div class="indeterminate" id="getting-query-results-bar"></div>
+            <div class="indeterminate"></div>
           </div>
         </div>
       </div>
@@ -237,17 +237,25 @@ server side -->
   var loadingModal;
   var exportModal;
   // create some global variables
-  var result;
+  var result;  // will gradually be filled with JSON result chunks of a query
-  var resultList;
+  var resultList;  // the list.js new ResultList object displaying the results
-  var queryFinished;
+  var queryFinished;  // bool flag that shows if query is finished or nor
   // create some global elements
-  var exportQueryResultsElement;
+  var exportQueryResultsElement;  // export button opens onclick download modal
-  var queryResultsDeterminateElement;
+  var queryResultsDeterminateElement; // progress bar for recieved query status
-  var queryResultsTableElement;
+  var queryResultsTableElement;  // table element displaying the query results
-  var queryLoadingElement;
+  var queryLoadingElement;  // shows progress bar until first results are in
-  var queryFormElement;
+  var queryFormElement;  // the quer form
-  var hitsPerPageInputElement;
+  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
+  var downloadResultsJSONElement;  // button for downloading results as JSON
+  var expertModeSwitchElement;  // switch to show if expert mode is on/off
 
+  // set queryFinished to false initially
+  queryFinished = false;
+
+  // creates some models on DOMContentLoaded
   document.addEventListener("DOMContentLoaded", function() {
     contextModal = M.Modal.init(document.getElementById("context-modal"),
                                 {"onCloseEnd": function() {
@@ -262,6 +270,9 @@ server side -->
     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) {
@@ -277,14 +288,17 @@ server side -->
   // These elements will be used inside functions in nopaque.analyse_corpus.js
   queryResultsDeterminateElement = document.getElementsByClassName("determinate")[0];
   queryResultsTableElement = document.getElementById("recieved-query-results");
-  queryLoadingElement = document.getElementById("getting-query-results");
+  queryLoadingElement = document.getElementById("calculating-query-results");
   exportQueryResultsElement = document.getElementById("export-query-results");
 
-  // socket.io analysis submit to the CQP server
+  // submits query via socket.emit in the event function to the CQP server
   queryFormElement = document.getElementById("query-form");
   queryFormElement.addEventListener("submit", sendQuery);
 
-  // get context of one match if inspected
+  // 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
@@ -292,35 +306,33 @@ server side -->
   hitsPerPageInputElement.onchange = changeHitsPerPage;
 
   // live update of lr context per item if context value is changed
-  var contextPerItemElement = document.getElementById("context-per-item");
+  contextPerItemElement = document.getElementById("context-per-item");
   contextPerItemElement.onchange = changeContext;
 
   // eventListener if pagination is used to apply new context size to new page
-  var paginationElements = document.getElementsByClassName("pagination");
+  // and also activate inspect match if queryFinished is true
+  paginationElements = document.getElementsByClassName("pagination");
   for (element of paginationElements) {
     element.addEventListener("click", changeContext);
     element.addEventListener("click", activateInspect);
   }
 
-  // socket.on triggered when result chunks are recieved
+  // Add onclick to open download modal wen Export Results button is pressed
-  nopaque.socket.on("corpus_analysis_query", recieveResults);
-
-  // Add onclick to open download modal
   exportQueryResultsElement.onclick = function() {
     exportModal.open();
   }
 
   // add onclick to download JSON button and download the file
-  var downloadResultsJSONElement = document.getElementById("download-results-json")
+  downloadResultsJSONElement = document.getElementById("download-results-json")
   downloadResultsJSONElement.onclick = function() {
-    var filename = createDownloadFilename();
+    let filename = createDownloadFilename();
     downloadJSONRessource(filename)};
 
   // epxert mode table view
-  var expertModeSwitchElement = document.getElementById("expert-mode-switch");
+  expertModeSwitchElement = document.getElementById("expert-mode-switch");
   expertModeSwitchElement.addEventListener("change", function(event) {
-    var currentTokenElements = document.getElementsByClassName("token");
+    let currentTokenElements = document.getElementsByClassName("token");
-    var paginationElements = document.getElementsByClassName("pagination");
+    let paginationElements = document.getElementsByClassName("pagination");
     if (event.target.checked) {
       console.log("Checked!");
       expertModeOn(currentTokenElements, result);
@@ -334,8 +346,5 @@ server side -->
       console.log("unchecked! Destroy");
     }
   })
-
-  // collapsible display options
-  var elem = document.querySelector('.collapsible.expandable');
 </script>
 {% endblock %}