From f96bac93f28ed27b691230fd836c6aee6b8dce92 Mon Sep 17 00:00:00 2001
From: Inga Kirschnick <inga.kirschnick@uni-bielefeld.de>
Date: Wed, 12 Oct 2022 14:05:01 +0200
Subject: [PATCH] Optical code adjustments

---
 app/static/js/CorpusAnalysis/QueryBuilder.js | 125 +++++++++++--------
 1 file changed, 70 insertions(+), 55 deletions(-)

diff --git a/app/static/js/CorpusAnalysis/QueryBuilder.js b/app/static/js/CorpusAnalysis/QueryBuilder.js
index 256dadd2..e221e19b 100644
--- a/app/static/js/CorpusAnalysis/QueryBuilder.js
+++ b/app/static/js/CorpusAnalysis/QueryBuilder.js
@@ -164,14 +164,20 @@ class ConcordanceQueryBuilder {
 
   }
 
+
+
+  // ##########################################################################
+  // #################### General Functions ###################################
+  // ##########################################################################
+
   //#region General Functions
 
-  closeQueryBuilderModal(closeInstance){
+  closeQueryBuilderModal(closeInstance) {
     let instance = M.Modal.getInstance(closeInstance);
     instance.close();
   }
   
-  showPositionalAttrArea(){
+  showPositionalAttrArea() {
     this.elements.positionalAttrArea.classList.remove('hide');
     this.elements.wordBuilder.classList.remove("hide");
     this.elements.inputOptions.classList.remove("hide");
@@ -194,7 +200,7 @@ class ConcordanceQueryBuilder {
     this.elements.positionalAttr.value = "word";
   }
 
-  showStructuralAttrArea(){
+  showStructuralAttrArea() {
     this.elements.positionalAttrArea.classList.add('hide');
     this.elements.structuralAttrArea.classList.remove('hide');
   }
@@ -207,15 +213,15 @@ class ConcordanceQueryBuilder {
     let chipColor = 'style="background-color:#';
 
     // Sets chip color, depending on the type of element
-    if (dataType === 'start-sentence' || dataType === 'end-sentence'){
+    if (dataType === 'start-sentence' || dataType === 'end-sentence') {
       chipColor += 'FD9720';
-    }else if (dataType === "start-empty-entity" || dataType === "start-entity" || dataType === "end-entity"){
+    } else if (dataType === "start-empty-entity" || dataType === "start-entity" || dataType === "end-entity") {
       chipColor += 'A6E22D';
-    }else if (dataType === "text-annotation"){
+    } else if (dataType === "text-annotation") {
      chipColor += '2FBBAB';
-    }else if (dataType === "token"){
+    } else if (dataType === "token") {
      chipColor += '28B3D1';
-    }else {
+    } else {
      chipColor = '';
     }
 
@@ -232,9 +238,9 @@ class ConcordanceQueryBuilder {
     buttonElement.addEventListener("click", () => {this.deleteAttr(buttonElement);});
 
     // Ensures that metadata is always at the end of the query:
-    if(this.elements.yourQuery.lastChild === null || this.elements.yourQuery.lastChild.dataset.type !== "text-annotation"){
+    if (this.elements.yourQuery.lastChild === null || this.elements.yourQuery.lastChild.dataset.type !== "text-annotation") {
       this.elements.yourQuery.appendChild(buttonElement);
-    }else if (this.elements.yourQuery.lastChild.dataset.type === "text-annotation"){
+    } else if (this.elements.yourQuery.lastChild.dataset.type === "text-annotation") {
       this.elements.yourQuery.insertBefore(buttonElement, this.elements.yourQuery.lastChild);
     }
 
@@ -242,14 +248,14 @@ class ConcordanceQueryBuilder {
     this.queryPreviewBuilder();
 
     // Opens a hint about the possible functions for editing the query when the first chip is added. It is displayed for 5 seconds and then deleted.
-    if (this.elements.yourQuery.classList.contains("tooltipped")){
+    if (this.elements.yourQuery.classList.contains("tooltipped")) {
       let tooltipInstance = M.Tooltip.getInstance(this.elements.yourQuery);
       tooltipInstance.tooltipEl.style.background = "#98ACD2";
       tooltipInstance.tooltipEl.style.borderTop = "solid 4px #0064A3"
       tooltipInstance.tooltipEl.style.padding = "10px";
       tooltipInstance.tooltipEl.style.color = "black";
 
-      if (tooltipInstance !== undefined){
+      if (tooltipInstance !== undefined) {
         setTimeout(() => {
           tooltipInstance.open();
           setTimeout(() => {
@@ -261,23 +267,23 @@ class ConcordanceQueryBuilder {
     }
   }
 
-    //#region Drag&Drop Events
-  dragStartHandler(event){
+    //#region	 Drag&Drop Events
+  dragStartHandler(event) {
     this.elements.dropButton = event.target;
     let targetChip = `
-    <div class="chip target" ondragover="concordanceQueryBuilder.dragOverHandler(event)" ondragenter="concordanceQueryBuilder.dragEnterHandler(event)" ondragleave="concordanceQueryBuilder.dragLeaveHandler(event)" ondrop="concordanceQueryBuilder.dropHandler(event)">
-      Drop here
-    </div>
+      <div class="chip target" ondragover="concordanceQueryBuilder.dragOverHandler(event)" ondragenter="concordanceQueryBuilder.dragEnterHandler(event)" ondragleave="concordanceQueryBuilder.dragLeaveHandler(event)" ondrop="concordanceQueryBuilder.dropHandler(event)">
+        Drop here
+      </div>
     `.trim();
     let childNodes = this.elements.yourQuery.querySelectorAll("div:not(.target)");
 
     setTimeout(() => {
-      for (let element of childNodes){
-        if(element === event.target){
+      for (let element of childNodes) {
+        if (element === event.target) {
           continue;
-        }else if (element === event.target.nextSibling){
+        } else if (element === event.target.nextSibling) {
           continue;
-        }else {
+        } else {
           element.insertAdjacentHTML("beforebegin", targetChip)
         }
       }
@@ -285,37 +291,37 @@ class ConcordanceQueryBuilder {
     },0);
   }
 
-  dragOverHandler(event){
+  dragOverHandler(event) {
     event.preventDefault();
   }
 
-  dragEnterHandler(event){
+  dragEnterHandler(event) {
     event.preventDefault();
     event.target.style.borderStyle = "solid dotted";
   }
 
-  dragLeaveHandler(event){
+  dragLeaveHandler(event) {
     event.preventDefault();
     event.target.style.borderStyle = "hidden";
   }
 
-  dragEndHandler(event){
+  dragEndHandler(event) {
     let targets = document.querySelectorAll('.target');
-    for (let target of targets){
+    for (let target of targets) {
       target.remove();
     }
   }
 
-  dropHandler(event){
+  dropHandler(event) {
     let dropzone = event.target;
 
-    for (let i = 0; i < dropzone.parentElement.childNodes.length; i++){
-      if (dropzone === dropzone.parentElement.childNodes[i]){
+    for (let i = 0; i < dropzone.parentElement.childNodes.length; i++) {
+      if (dropzone === dropzone.parentElement.childNodes[i]) {
         nodeIndex = i;
       }
     }
-    for (let i = 0; i < dropzone.parentElement.childNodes.length; i++){
-      if (this.elements.dropButton === dropzone.parentElement.childNodes[i]){
+    for (let i = 0; i < dropzone.parentElement.childNodes.length; i++) {
+      if (this.elements.dropButton === dropzone.parentElement.childNodes[i]) {
         draggedElementIndex = i;
       }
     }
@@ -325,15 +331,15 @@ class ConcordanceQueryBuilder {
   }
     //#endregion Drag&Drop Events
 
-  queryPreviewBuilder(){
+  queryPreviewBuilder() {
     this.elements.yourQueryContent = [];
 
     for (let element of this.elements.yourQuery.childNodes) {
       let queryElement = decodeURI(element.dataset.query);
-      if (queryElement.includes("<")){
+      if (queryElement.includes("<")) {
         queryElement = queryElement.replace("<", "&#60;");
       }
-      if (queryElement.includes(">")){
+      if (queryElement.includes(">")) {
         queryElement = queryElement.replace(">", "&#62;");
       }
       if (queryElement !== "undefined") {
@@ -351,7 +357,7 @@ class ConcordanceQueryBuilder {
     this.elements.yourQuery.removeChild(attr);
 
     this.elements.counter -= 1;
-    if(this.elements.counter === 0){
+    if (this.elements.counter === 0) {
       this.elements.queryContainer.classList.add("hide");
     }
 
@@ -362,10 +368,10 @@ class ConcordanceQueryBuilder {
     this.elements.yourQueryContent = [];
 
     for (let element of this.elements.yourQuery.childNodes) {
-    let queryElement = decodeURI(element.dataset.query);
-    if (queryElement !== "undefined"){
-      this.elements.yourQueryContent.push(queryElement);
-    }
+      let queryElement = decodeURI(element.dataset.query);
+      if (queryElement !== "undefined") {
+        this.elements.yourQueryContent.push(queryElement);
+      }
     }
 
     let queryString = this.elements.yourQueryContent.join(' ');
@@ -373,7 +379,6 @@ class ConcordanceQueryBuilder {
 
     this.elements.concordanceQueryBuilder.classList.add('modal-close');
     this.elements.extFormQuery.value = queryString;
-
   }
 
   clearAll() {
@@ -411,6 +416,13 @@ class ConcordanceQueryBuilder {
 
   //#endregion General Functions
 
+
+
+
+  // ##########################################################################
+  // ############## Token Attribute Builder Functions #########################
+  // ##########################################################################
+
   //#region Token Attribute Builder Functions
 
     //#region General functions of the Token Builder
@@ -441,7 +453,7 @@ class ConcordanceQueryBuilder {
     }
   }
 
-  hideEverything(){
+  hideEverything() {
 
     this.elements.wordBuilder.classList.add("hide");
     this.elements.lemmaBuilder.classList.add("hide");
@@ -472,11 +484,7 @@ class ConcordanceQueryBuilder {
     this.elements.tokenQuery.appendChild(buttonElement);
   }
 
-  deleteTokenAttr(attr){
-    // let tokenQuery = this.elements.tokenQuery.childNodes;
-    // console.log(tokenQuery);
-    // console.log(this.elements.tokenQuery);
-    console.log(this.elements.tokenQuery.childNodes.length);
+  deleteTokenAttr(attr) {
     if (this.elements.tokenQuery.childNodes.length < 2) {
       this.elements.tokenQuery.removeChild(attr);
       this.wordBuilder();
@@ -493,22 +501,22 @@ class ConcordanceQueryBuilder {
     this.elements.cancelBool = false;
     let emptyTokenCheck = false;
 
-    if (this.elements.ignoreCase.checked){
+    if (this.elements.ignoreCase.checked) {
       c = ' %c';
-    }else{
+    } else {
       c = '';
     }
 
 
-    for (let element of this.elements.tokenQuery.childNodes){
+    for (let element of this.elements.tokenQuery.childNodes) {
       tokenQueryContent += ' ' + element.firstChild.data + ' ';
       tokenQueryText += decodeURI(element.dataset.tokentext);
-      if (element.innerText.indexOf("empty token") !== -1){
+      if (element.innerText.indexOf("empty token") !== -1) {
         emptyTokenCheck = true;
       }
     }
 
-    if (this.elements.tokenQueryFilled === false){
+    if (this.elements.tokenQueryFilled === false) {
       switch (this.elements.positionalAttr.value) {
         case "word":
           if (this.elements.wordInput.value === "") {
@@ -562,7 +570,7 @@ class ConcordanceQueryBuilder {
     }
 
     // cancelBool looks in disableTokenSubmit() whether a value is passed. If the input fields/dropdowns are empty (cancelBool === true), no token is added.
-    if (this.elements.cancelBool === false){
+    if (this.elements.cancelBool === false) {
       // Square brackets are added only if it is not an empty token (where they are already present).
       if (emptyTokenCheck === false) {
         tokenQueryText = '[' + tokenQueryText + ']';
@@ -813,9 +821,9 @@ class ConcordanceQueryBuilder {
     let tokenQueryText;
     let c;
 
-    if (this.elements.ignoreCase.checked){
+    if (this.elements.ignoreCase.checked) {
       c = ' %c';
-    }else{
+    } else {
       c = '';
     }
 
@@ -859,10 +867,17 @@ class ConcordanceQueryBuilder {
 
   //#endregion Token Attribute Builder Functions
 
+
+
+
+  // ##########################################################################
+  // ############ Structural Attribute Builder Functions ######################
+  // ##########################################################################
+
   //#region Structural Attribute Builder Functions
   addSentence() {
     this.hideEverything();
-    if(this.elements.sentence.text === 'End Sentence') {
+    if (this.elements.sentence.text === 'End Sentence') {
       this.buttonfactory('end-sentence', 'Sentence End', '</s>');
       this.elements.sentence.innerHTML = 'Sentence';
     } else {