Some documentation

web/app/static/js/nopaque.lists.js

@@ -134,11 +134,12 @@ class ResultsList extends List {
   this.currentExpertTokenElements = {}; // all token elements which have added
   // classes like chip and hoverable for expert view. Collected
   //here to delete later on
-  this.addToSubResultsStatus = {};
+  this.addToSubResultsStatus = {};  // holds True/false for check buttons used to add matches tu sub-results. If checked, it is True. If unchecked, it is false. Buttons for this have the class add. Those little round check buttons.
-  this.addToSubResultsIdsToShow = new Set();
+  this.addToSubResultsIdsToShow = new Set();  // If check button is pressed its corresponding data_index is saved in this set. The set is shown to the user.
   }
 
   // handels interactionElements during a pagination navigation
+  // loops over interactionElements and executes callback functions accordingly
   pageChangeEventInteractionHandler(interactionElements) {
     // get elements to check thier status
     for (let interaction of interactionElements) {
@@ -147,18 +148,15 @@ class ResultsList extends List {
           let f_on = interaction.bindThisToCallback("on");
           let args_on = interaction.callbacks.on.args;
           f_on(...args_on);
-          console.log("ON TRIGGERED");
         } else {
           let f_off = interaction.bindThisToCallback("off");
           let args_off = interaction.callbacks.off.args;
           f_off(...args_off);
-          console.log("OFF TRIGGERED");
         }
       } else {
         let f = interaction.bindThisToCallback("noCheck");
         let args = interaction.callbacks.noCheck.args;
         f(...args);
-        console.log("noCheck activated");
       }
     }
   }
@@ -179,7 +177,7 @@ class ResultsList extends List {
   }
 
   // ###### Functions to add one match to a sub-results ######
-  // activate add button
+  // activate the add buttons
   activateAddToSubResults() {
     subResultsIdListElement.classList.remove("hide");
     subResultsCreateElement.classList.remove("hide");
@@ -188,7 +186,7 @@ class ResultsList extends List {
       addToSubResultsBtn.classList.remove("hide");
     }
   }
-  // deactivate add button
+  // deactivate the add buttons
   deactivateAddToSubResults() {
     subResultsIdListElement.classList.add("hide");
     subResultsCreateElement.classList.add("hide");
@@ -198,53 +196,59 @@ class ResultsList extends List {
     }
   }
 
+  // Used in addToSubResults and inspect to toggle the design of the check
+  // buttons according to its checked unchecked status.
   helperActivateBtn(btn) {
-    console.log(btn);
     btn.classList.remove("grey");
     btn.classList.add("green");
     btn.innerText = "check";
   }
 
+  // Used in addToSubResults and inspect to toggle the design of the check
+  // buttons according to its checked unchecked status.
   helperDeactivateBtn(btn) {
-    console.log(btn);
     btn.classList.remove("green");
     btn.classList.add("grey");
     btn.innerText = "add";
   }
 
-  // add match id on click to a List of marked matches for SubSubcorpora
+  // Either adds or removes a match to the sub-results. For this it checks
-  // remove match id on click from same list
+  // onclick if the current button has been checked or not. For this the
+  // function checks if its status in addToSubResultsStatus is either flase or
+  // true. Adds match to sub-results if status is false if status is true it
+  // removes it.
   addToSubResults(dataIndex, tableCall=true) {
-    console.log(event.target);
+    let textarea = subResultsIdListElement.getElementsByTagName("textarea")[0];
-    let textarea = subResultsIdListElement.getElementsByTagName("textarea")[0]
     if (!this.addToSubResultsStatus[dataIndex]
         || this.addToSubResultsStatus === undefined) {
-      // add button is activated
+      // add button is activated because status is either false or undefined
-      nopaque.flash(`[Match ${dataIndex + 1}] Marked for Sub-Results!`);
       this.helperActivateBtn(event.target);
-      this.addToSubResultsStatus[dataIndex] = true;
+      this.addToSubResultsStatus[dataIndex] = true;  // sets status to true
-      this.addToSubResultsIdsToShow.add(dataIndex + 1);
+      this.addToSubResultsIdsToShow.add(dataIndex + 1);  // + 1 because user does not see zero indexd data indexes
-      textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");
+      textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");  // automaticalle sorts ids into the textarea in ascending order
-      M.textareaAutoResize(textarea);
+      M.textareaAutoResize(textarea);  // after an insert textarea has to be resized manually
     } else if (this.addToSubResultsStatus[dataIndex]) {
-      // add button is deactivated
+      // add button is deactivated because status is true
-      nopaque.flash(`[Match ${dataIndex + 1}] Unmarked for Sub-results!`);
       this.helperDeactivateBtn(event.target);
-      this.addToSubResultsStatus[dataIndex] = false;
+      this.addToSubResultsStatus[dataIndex] = false;  // sets status to false
-      this.addToSubResultsIdsToShow.delete(dataIndex + 1);
+      this.addToSubResultsIdsToShow.delete(dataIndex + 1);  // + 1 because user does not see zero indexd data indexes
-      textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");
+      textarea.innerText = [...this.addToSubResultsIdsToShow].sort(function(a, b){return a-b}).join(", ");  // automaticalle sorts ids into the textarea in ascending order
-      M.textareaAutoResize(textarea);
+      M.textareaAutoResize(textarea); // after an insert textarea has to be resized manually
     }
+    // Toggles the create button accoring to the number of ids in addToSubResultsIdsToShow
     if ([...this.addToSubResultsIdsToShow].length > 0) {
       subResultsCreateElement.firstElementChild.classList.remove("disabled");
     } else if ([...this.addToSubResultsIdsToShow].length === 0) {
       subResultsCreateElement.firstElementChild.classList.add("disabled");
     }
+    // After a match as been added or removed the export button will be
+    // disabled because the sub-results have been alterd and have to be built //// again.
     subResultsExportElement.classList.add("disabled");
-    // also activate/deactivate buttons in the table accordingly if btn in inspect was activated/deactivated
+    // Also activate/deactivate buttons in the table/jsList results accordingly
+    //if button in inspect was activated/deactivated.
+    // This part only runs if tableCall is false.
     if (!tableCall) {
-      let tableAddBtn = document.getElementById("query-results").querySelectorAll(`[data-index="${dataIndex}"]`)[0].getElementsByClassName('add')[0].firstElementChild;
+      let tableAddBtn = document.getElementById("query-results").querySelectorAll(`[data-index="${dataIndex}"]`)[0].getElementsByClassName('add')[0].firstElementChild; // gets the add button from the list view
-      console.log("TABLECALL", tableAddBtn);
       if (this.addToSubResultsStatus[dataIndex]) {
         this.helperActivateBtn(tableAddBtn);
       } else {
@@ -253,8 +257,8 @@ class ResultsList extends List {
     }
   }
 
-  // triggers emit to get full match context from server for a number of
+  // Triggers emit to get full match context from server for a number of
-  // matches identified by their data_index
+  // matches identified by their data_index.
   getMatchWithContext(dataIndexes, type) {
     let tmp_first_cpos = [];
     let tmp_last_cpos = [];
@@ -289,30 +293,30 @@ class ResultsList extends List {
   // gets result cpos infos for one dataIndex (list of length 1) to send back to
   // the server
   inspect(dataIndex, type) {
+    // get result infos from server and show them in context modal
     this.contextId = dataIndex[0];
     let contextResultsElement;
     contextResultsElement = document.getElementById("context-results");
     contextResultsElement.innerHTML = "";  // clear it from old inspects
     this.getMatchWithContext(dataIndex, type);
     contextModal.open();
-    // add a button to add this match to sub results
+    // add a button to add this match to sub results with onclick event
     let classes = `btn-floating btn waves-effect` +
                   `waves-light grey right`
     let addToSubResultsIdsBtn = document.createElement("a");
     addToSubResultsIdsBtn.setAttribute("class", classes + ` add`);
     addToSubResultsIdsBtn.innerHTML = '<i class="material-icons">add</i>';
-    addToSubResultsIdsBtn.onclick= (event) => {this.addToSubResults(dataIndex[0], false)};
+    addToSubResultsIdsBtn.onclick= () => {this.addToSubResults(dataIndex[0], false)};
+    // checks if a button has already been added to the inspect modal and removes it
     if (addToSubResultsFromInspectElement.children.length > 0) {
       addToSubResultsFromInspectElement.firstElementChild.remove();
     }
+    // Changes the design of the add button according to its checked status
+    // upon opening the inspect modal.
     if (this.addToSubResultsStatus[dataIndex[0]]) {
-      addToSubResultsIdsBtn.classList.remove("grey");
+      this.helperActivateBtn(addToSubResultsIdsBtn.firstElementChild);
-      addToSubResultsIdsBtn.classList.add("green");
-      addToSubResultsIdsBtn.firstElementChild.innerText = "check";
     } else if (!this.addToSubResultsStatus[dataIndex[0]]) {
-      addToSubResultsIdsBtn.classList.remove("green");
+      this.helperDeactivateBtn(addToSubResultsIdsBtn.firstElementChild);
-      addToSubResultsIdsBtn.classList.add("grey");
-      addToSubResultsIdsBtn.firstElementChild.innerText = "add";
     }
     addToSubResultsFromInspectElement.appendChild(addToSubResultsIdsBtn);
   }
@@ -326,6 +330,8 @@ class ResultsList extends List {
     return template.content.firstChild;
     }
 
+  // Used as a callback to handle incoming match context results when inspect
+  // has been used.
   showMatchContext(response) {
     this.contextData;
     let c;
@@ -353,7 +359,6 @@ class ResultsList extends List {
     this.contextData["match_count"] = this.contextData.matches.length
     this.contextData["corpus_type"] = "inspect-result"
     Object.assign(this.contextData, results.metaData);
-    console.log(this.contextData);
     contextResultsElement = document.getElementById("context-results");
     modalExpertModeSwitchElement = document.getElementById("inspect-display-options-form-expert_mode_inspect");
     highlightSentencesSwitchElement = document.getElementById("inspect-display-options-form-highlight_sentences");
@@ -411,9 +416,6 @@ class ResultsList extends List {
       tokenHTMlElement = this.HTMLTStrToElement(htmlTokenStr)
       tokenHTMLArray.push(tokenHTMlElement);
     }
-    // console.log(tokenHTMLArray);
-    // console.log(uniqueS);
-
     for (let sId of uniqueS) {
       let htmlSentence = `<span class="sentence" data-sid="${sId}"></span>`;
       let sentenceElement = this.HTMLTStrToElement(htmlSentence);
@@ -466,6 +468,7 @@ class ResultsList extends List {
     this.changeSentenceContext(nrOfContextSentences.value)
   }
 
+  // splits context text into sentences based on spacy sentence split
   higlightContextSentences() {
     let sentences;
     sentences = document.getElementById("context-results").getElementsByClassName("sentence");
@@ -484,6 +487,7 @@ class ResultsList extends List {
       }
   }
 
+  // changes how many context sentences in inspect view are shown
   changeSentenceContext(sValue, maxSValue=10) {
     let array;
     let sentences;
@@ -589,7 +593,6 @@ class ResultsList extends List {
 
   expertModeOn(htmlId) {
     // turn the expert mode on for all tokens in the DOM element identified by its htmlID
-    console.log(this);
     if (!Array.isArray(this.currentExpertTokenElements[htmlId])) {
       this.currentExpertTokenElements[htmlId] = [];
     }
@@ -638,7 +641,6 @@ class ResultsList extends List {
   // function to remove extra informations and animations from tokens
   expertModeOff(htmlId) {
     // console.log("Expert mode is off.");
-    console.log(this);
     if (!Array.isArray(this.currentExpertTokenElements[htmlId])) {
       this.currentExpertTokenElements[htmlId] = [];
     }