Add some doc strings.

web/app/templates/corpora/analyse_corpus.html.j2

@@ -70,13 +70,17 @@
  * First Phase:
  * Document content is loaded and scripts are being imported and executed.
  */
- // import Client classes
+
+// Import Client classes. Client handles the server client communication.
 import {
   Client,
   ClientEventListener,
   ListenerCallback,
 } from '../../static/js/modules/corpus_analysis/client/Client.js';
-// import client listener functions
+/**
+ * Import Client listener functions which will listen for defined socket or
+ * javascript events.
+ */
 import {
   recieveConnected,
   recieveMetaData,
@@ -85,7 +89,7 @@ import {
   recieveViewNotification,
   recieveResultsData,
 } from '../../static/js/modules/corpus_analysis/client/listeners.js';
-// import client listener callbacks
+// Import client listener callbacks so they can be registered to the listeners.
 import {
   prepareQueryData,
   saveQueryData,
@@ -93,26 +97,36 @@ import {
   getResultsData,
   saveResultsData,
 } from '../../static/js/modules/corpus_analysis/client/callbacks.js';
+// Import Results class which will be used to save results data of a query etc.
 import {
   Results,
 } from '../../static/js/modules/corpus_analysis/model/Results.js';
+/**
+ * Import the ResultsList which can be understood as a View class that handles
+ * how the data from Results is represented to the user. The ViewEventListener
+ * is used to register listener functions which listen for events emitred by
+ * the Client.
+ */
 import {
-  ViewEventListener,
   ResultsList,
+  ViewEventListener,
 } from '../../static/js/modules/corpus_analysis/view/ResultsView.js';
+// Import listener which will be registered to the ViewEventListener class.
 import {
   recieveClientNotification,
 } from '../../static/js/modules/corpus_analysis/view/listeners.js';
+// Import script that implements the scroll to top button.
 import {
   scrollToTop,
 } from '../../static/js/modules/corpus_analysis/view/scrollToTop.js'
+// Import the script that implements a spinner animation for buttons.
 import {
   loadingSpinnerHTML,
 } from '../../static/js/modules/corpus_analysis/view/spinner.js'
 
 /**
  * Second Phase:
- * Asynchronus and event driven code
+ * Asynchronus and event driven code.
  */
 document.addEventListener("DOMContentLoaded", () => {
   // Initialize the client for server client communication in dynamic mode
@@ -122,17 +136,17 @@ document.addEventListener("DOMContentLoaded", () => {
                              'logging': true,
                              'dynamicMode': true});
   /**
-  * Initializing the results object as a model holding all the data of a query.
+   * Initializing the results object as a model holding all the data of a
-  * Also holds the metadata of one query.
+   * query. Also holds the metadata of one query and results data.
-  * After that initialize the ResultsList object as the View handeling the
+   * After that initialize the ResultsList object as the View handeling the
-  * represnetation of the data for the user.
+   * representation of the data for the user.
-  */
+   */
   let results = new Results();
   let resultsList = new ResultsList('result-list', ResultsList.options);
   /**
   * Register listeners listening to socket.io events and their callbacks
   * Afterwards load them. Also registers listeners listening for custom
-  * javascript events.
+  * javascript events emitted by the View.
   */
   const listenForConnected = new ClientEventListener('corpus_analysis_init',
                                                      recieveConnected);
@@ -160,7 +174,7 @@ document.addEventListener("DOMContentLoaded", () => {
                                                    saveResultsData,
                                                    [client, results]);
   listenForResults.setCallbacks([resultsDataCallback]);
-  // listen for javascript custom notifications
+  // Listen for javascript custom notifications emitted by the View.
   const listenForViewNotification = new ClientEventListener('notify-client',
                                                             recieveViewNotification);
   const getResultsCallback = new ListenerCallback('get-results',
@@ -173,18 +187,20 @@ document.addEventListener("DOMContentLoaded", () => {
                                   listenForMetaData,
                                   listenForViewNotification,
                                   listenForResults]);
+  // Load the listeners so that they will be executed if triggered
   client.loadSocketEventListeners();
   /**
-  * Register resultsList listeners listening to notification events.
+   * Register resultsList listeners listening to notification events emitted by
-  */
+   * the Client class.
+   */
   const listenForClientNotification = new ViewEventListener('notify-view',
                                                             recieveClientNotification);
   resultsList.setNotificationListeners([listenForClientNotification]);
   resultsList.loadNotificationListeners();
-  // Connect client to server
+  // Connect client to server.
   client.notifyView('connecting');
   client.connect();
-  // Send a query and recieve its answer data
+  // Send a query and recieve its answer data.
   let queryFormElement = document.querySelector('#query-form');
   queryFormElement.addEventListener('submit', (event) => {
     try {
@@ -201,13 +217,13 @@ document.addEventListener("DOMContentLoaded", () => {
     } catch (e) {
       // No page element is present if first query is submitted.
     }
-    // Prevent page from reloading on submit
+    // Prevent page from reloading on submit.
     event.preventDefault();
-    // Get query string and send query to server
+    // Get query string and send query to server.
     results.data.getQueryStr(queryFormElement);
     client.query(results.data.query);
   });
-  // Get all needed HTMLElements for the following event listeners
+  // Get all needed HTMLElements for the following event listeners.
   resultsList.getHTMLElements([
     '#display-options-form-results_per_page',
     '#display-options-form-result_context',
@@ -232,21 +248,21 @@ document.addEventListener("DOMContentLoaded", () => {
    */
   for (let element of resultsList.pagination) {
     element.addEventListener("click", (event) => {
-      // shows match context according to the user picked value
+      // Shows match context according to the user picked value on a new page.
       resultsList.changeContext();
-      // activates or deactivates expertMode on new page depending switch value
+      // De- or activates expertMode on new page depending on switch value.
       if (resultsList.displayOptionsFormExpertMode.checked) {
         resultsList.expertModeOn('query-display', results);
       } else {
         resultsList.expertModeOff('query-display');
       }
-      // activates inspect buttons on new page if client is not busy
+      // Activates inspect buttons on new page if client is not busy.
       resultsList.activateInspect();
     });
   }
 
   /**
-   * The following event Listener handles the expert mode switch for the list
+   * The following event Listener handles the expert mode switch for the list.
    */
   resultsList.displayOptionsFormExpertMode.onchange = (event) => {
     if (event.target.checked) {
@@ -260,21 +276,20 @@ document.addEventListener("DOMContentLoaded", () => {
    * The following event Listener handles the add-btn and the inspect-btn
    * onclick events via bubbleing.
    */
-   resultsList.queryResultsTable.addEventListener('click', (event) => {
+  resultsList.queryResultsTable.addEventListener('click', (event) => {
-     let dataIndex;
+    let dataIndex;
-     if (event.target.classList.contains('inspect-btn')) {
+    if (event.target.classList.contains('inspect-btn')) {
-       dataIndex = parseInt(event.target.closest('tr').dataset.index);
+      dataIndex = parseInt(event.target.closest('tr').dataset.index);
-       resultsList.inspect([dataIndex], 'inspect');
+      resultsList.inspect([dataIndex], 'inspect');
-     } else if (event.target.classList.contains('add-btn')) {
+    } else if (event.target.classList.contains('add-btn')) {
-       dataIndex = parseInt(event.target.closest('tr').dataset.index);
+      dataIndex = parseInt(event.target.closest('tr').dataset.index);
-       resultsList.addToSubResults(dataIndex);
+      resultsList.addToSubResults(dataIndex);
-     }
+    }
-   })
+  })
 
   /**
-   * Display events: Following event listeners are handling the
+   * Following event listeners handle the change of Context size per match and
-   * live update of hits per page if hits per page value is changed and the
+   * the number of matches shown per page.
-   * context size of every match.
    */
   resultsList.displayOptionsFormResultsPerPage.onchange = () => {
     resultsList.changeHitsPerPage();
@@ -284,7 +299,7 @@ document.addEventListener("DOMContentLoaded", () => {
   };
 
   /**
-   * The following event listener handel the Show metadata button and its
+   * The following event listener handles the show metadata button and its
    * functionality. Before the needed modal is initialized.
    */
   resultsList.metaDataModal= M.Modal.init(resultsList.metaDataModal, {
@@ -316,6 +331,7 @@ document.addEventListener("DOMContentLoaded", () => {
    * 4. Download sub-results
    * 5. Download single inspect-results
    */
+  // 1. Add events for full-results create
   resultsList.fullResultsCreate.onclick = () => {
     resultsList.fullResultsCreate.querySelector('i').classList.toggle('hide');
     resultsList.fullResultsCreate.innerText = 'Creating...';
@@ -325,6 +341,7 @@ document.addEventListener("DOMContentLoaded", () => {
     resultsList.notifyClient('get-results', { resultsType: 'full-results',
                                               dataIndexes: dataIndexes});
   }
+  // 2. Add events for sub-results create
   resultsList.subResultsCreate.onclick = () => {
     let dataIndexes = [];
     resultsList.addToSubResultsIdsToShow.forEach((id) => {
@@ -337,11 +354,9 @@ document.addEventListener("DOMContentLoaded", () => {
     resultsList.notifyClient('get-results', { resultsType: 'sub-results',
                                               dataIndexes: dataIndexes});
   }
-  /**
+  // Before the download events are added the needed modal is initialized.
-   * Before the download events are added the needed modal is initialized.
-   */
   resultsList.queryResultsDownloadModal = M.Modal.init(resultsList.queryResultsDownloadModal);
-  // Open download modal when full results export button is pressed
+  // 3. Open download modal when full results export button is pressed
   resultsList.fullResultsExport.onclick = () => {
     resultsList.queryResultsDownloadModal.open();
     // add onclick to download JSON button and download the file
@@ -352,7 +367,7 @@ document.addEventListener("DOMContentLoaded", () => {
                                                     results.fullResultsData,
                                                     resultsList.downloadResultsJson)};
   }
-  // Open download modal when sub results export button is pressed
+  // 4. Open download modal when sub results export button is pressed
   resultsList.subResultsExport.onclick = () => {
     resultsList.queryResultsDownloadModal.open();
     // add onclick to download JSON button and download the file
@@ -363,7 +378,7 @@ document.addEventListener("DOMContentLoaded", () => {
                                                    results.subResultsData,
                                                    resultsList.downloadResultsJson)};
   }
-  // Open download modal when inspect-results-export button is pressed
+  // 5. Open download modal when inspect-results-export button is pressed
   resultsList.inspectResultsExport.onclick = () => {
     resultsList.queryResultsDownloadModal.open();
     // add onclick to download JSON button and download the file
@@ -375,7 +390,7 @@ document.addEventListener("DOMContentLoaded", () => {
                                                    resultsList.downloadResultsJson)};
   }
 
-  // enable scroll to Top
+  // Enable scroll to Top functionality.
   scrollToTop('#headline', '#menu-scroll-to-top-div');
 });
 </script>