From ff1bcb40f3dc94021c28839c40214667026b6ba7 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Mon, 13 Nov 2023 14:20:19 +0100
Subject: [PATCH] update query builder code to fit the new style

---
 .../query-builder/element-references.js       |  4 +-
 .../js/corpus-analysis/query-builder/index.js | 16 +-----
 ...-builder-functions.js => query-builder.js} | 37 ++++++-------
 .../structural-attribute-builder-functions.js | 52 +++++++++----------
 .../token-attribute-builder-functions.js      | 38 +++++++-------
 app/templates/_scripts.html.j2                |  2 +-
 .../corpora/_analysis/concordance.html.j2     |  2 +-
 7 files changed, 67 insertions(+), 84 deletions(-)
 rename app/static/js/corpus-analysis/query-builder/{general-query-builder-functions.js => query-builder.js} (94%)

diff --git a/app/static/js/corpus-analysis/query-builder/element-references.js b/app/static/js/corpus-analysis/query-builder/element-references.js
index 518975f0..39297967 100644
--- a/app/static/js/corpus-analysis/query-builder/element-references.js
+++ b/app/static/js/corpus-analysis/query-builder/element-references.js
@@ -1,4 +1,4 @@
-class ElementReferencesQueryBuilder {
+nopaque.corpus_analysis.query_builder.ElementReferences = class ElementReferences {
   constructor() {
     // General Elements
     this.queryInputField = document.querySelector('#corpus-analysis-concordance-query-builder-input-field');
@@ -25,4 +25,4 @@ class ElementReferencesQueryBuilder {
 
     this.ignoreCaseCheckbox = document.querySelector('#corpus-analysis-concordance-ignore-case-checkbox');
   }
-}
+};
diff --git a/app/static/js/corpus-analysis/query-builder/index.js b/app/static/js/corpus-analysis/query-builder/index.js
index 9d85b853..dd8ba80b 100644
--- a/app/static/js/corpus-analysis/query-builder/index.js
+++ b/app/static/js/corpus-analysis/query-builder/index.js
@@ -1,15 +1 @@
-class ConcordanceQueryBuilder {
-
-  constructor() {
-
-    this.elements = new ElementReferencesQueryBuilder();
-
-    this.extensions = {
-      generalFunctions: new GeneralQueryBuilderFunctions(this, this.elements),
-      structuralAttributeBuilderFunctions: new StructuralAttributeBuilderFunctions(this, this.elements),
-      tokenAttributeBuilderFunctions: new TokenAttributeBuilderFunctions(this, this.elements),
-    };
-    
-  }
-  
-}
+nopaque.corpus_analysis.query_builder = {};
diff --git a/app/static/js/corpus-analysis/query-builder/general-query-builder-functions.js b/app/static/js/corpus-analysis/query-builder/query-builder.js
similarity index 94%
rename from app/static/js/corpus-analysis/query-builder/general-query-builder-functions.js
rename to app/static/js/corpus-analysis/query-builder/query-builder.js
index e48419d4..04f4a3ac 100644
--- a/app/static/js/corpus-analysis/query-builder/general-query-builder-functions.js
+++ b/app/static/js/corpus-analysis/query-builder/query-builder.js
@@ -1,10 +1,7 @@
-class GeneralQueryBuilderFunctions {
-  name = 'General Query Builder Functions';
+nopaque.corpus_analysis.query_builder.QueryBuilder = class QueryBuilder {
+  constructor() {
+    this.elements = new nopaque.corpus_analysis.query_builder.ElementReferences();
 
-  constructor(app, elements) {
-    this.app = app;
-    this.elements = elements;
-    
     this.incidenceModifierEventListeners();
     this.nAndMInputSubmitEventListeners();
 
@@ -24,9 +21,14 @@ class GeneralQueryBuilderFunctions {
         this.switchToQueryBuilderParser();
       }
     });
+
+    this.extensions = {
+      structuralAttributeBuilderFunctions: new nopaque.corpus_analysis.query_builder.StructuralAttributeBuilderFunctions(this),
+      tokenAttributeBuilderFunctions: new nopaque.corpus_analysis.query_builder.TokenAttributeBuilderFunctions(this),
+    };
   }
 
-  toggleClass(elements, className, action){
+  toggleClass(elements, className, action) {
     elements.forEach(element => {
       document.querySelector(`[data-toggle-area="${element}"]`).classList[action](className);
     });
@@ -44,7 +46,7 @@ class GeneralQueryBuilderFunctions {
   }
 
   removePlaceholder() {
-    let placeholder = this.elements.queryInputField.querySelector('#corpus-analysis-concordance-query-builder-input-field-placeholder');  
+    let placeholder = this.elements.queryInputField.querySelector('#corpus-analysis-concordance-query-builder-input-field-placeholder');
     if (placeholder && this.elements.queryInputField !== undefined) {
       this.elements.queryInputField.innerHTML = '';
     }
@@ -138,8 +140,8 @@ class GeneralQueryBuilderFunctions {
         this.lockClosingChipElement(queryChipElement);
       }
       });
-    // });
     }
+    // });
   }
 
   editChipElement(queryChipElement) {
@@ -147,14 +149,14 @@ class GeneralQueryBuilderFunctions {
     this.elements.editedQueryChipElementIndex = Array.from(this.elements.queryInputField.children).indexOf(queryChipElement);
     switch (queryChipElement.dataset.type) {
       case 'start-entity':
-        this.app.extensions.structuralAttributeBuilderFunctions.editStartEntityChipElement(queryChipElement);
+        this.extensions.structuralAttributeBuilderFunctions.editStartEntityChipElement(queryChipElement);
         break;
       case 'text-annotation':
-        this.app.extensions.structuralAttributeBuilderFunctions.editTextAnnotationChipElement(queryChipElement);
+        this.extensions.structuralAttributeBuilderFunctions.editTextAnnotationChipElement(queryChipElement);
         break;
       case 'token':
-        let queryElementsContent = this.app.extensions.tokenAttributeBuilderFunctions.prepareTokenQueryElementsContent(queryChipElement);
-        this.app.extensions.tokenAttributeBuilderFunctions.editTokenChipElement(queryElementsContent);
+        let queryElementsContent = this.extensions.tokenAttributeBuilderFunctions.prepareTokenQueryElementsContent(queryChipElement);
+        this.extensions.tokenAttributeBuilderFunctions.editTokenChipElement(queryElementsContent);
         break;
       default:
         break;
@@ -165,10 +167,10 @@ class GeneralQueryBuilderFunctions {
     queryChipElement.dataset.closingTag = 'false';
     let lockIcon = queryChipElement.querySelector('[data-chip-action="lock"]');
     lockIcon.textContent = 'lock';
-    //TODO: Write unlock-Function?
+    // TODO: Write unlock-Function?
     lockIcon.dataset.chipAction = 'unlock';
   }
-  
+
   deleteChipElement(attr) {
     let elementIndex = Array.from(this.elements.queryInputField.children).indexOf(attr);
     switch (attr.dataset.type) {
@@ -341,7 +343,7 @@ class GeneralQueryBuilderFunctions {
       if (modalId === 'corpus-analysis-concordance-exactly-n-token-modal' || modalId === 'corpus-analysis-concordance-between-nm-token-modal') {
         button.addEventListener('click', () => this.tokenNMSubmitHandler(modalId));
       } else if (modalId === 'corpus-analysis-concordance-exactly-n-character-modal' || modalId === 'corpus-analysis-concordance-between-nm-character-modal') {
-        button.addEventListener('click', () => this.app.extensions.tokenAttributeBuilderFunctions.characterNMSubmitHandler(modalId));
+        button.addEventListener('click', () => this.extensions.tokenAttributeBuilderFunctions.characterNMSubmitHandler(modalId));
       }
     });
   }
@@ -482,5 +484,4 @@ class GeneralQueryBuilderFunctions {
   
     return chipElements;
   }
-}
-
+};
diff --git a/app/static/js/corpus-analysis/query-builder/structural-attribute-builder-functions.js b/app/static/js/corpus-analysis/query-builder/structural-attribute-builder-functions.js
index 4c98d35e..a5667d2a 100644
--- a/app/static/js/corpus-analysis/query-builder/structural-attribute-builder-functions.js
+++ b/app/static/js/corpus-analysis/query-builder/structural-attribute-builder-functions.js
@@ -1,10 +1,8 @@
-class StructuralAttributeBuilderFunctions {
-  name = 'Token Attribute Builder Functions';
-
-  constructor(app, elements) {
+nopaque.corpus_analysis.query_builder.StructuralAttributeBuilderFunctions = class StructuralAttributeBuilderFunctions {
+  constructor(app) {
     this.app = app;
-    this.elements = elements;
-    
+    this.elements = app.elements;
+
     this.structuralAttrModalEventlisteners();
 
     document.querySelector('#corpus-analysis-concordance-text-annotation-submit').addEventListener('click', () => this.textAnnotationSubmitHandler());
@@ -26,32 +24,32 @@ class StructuralAttributeBuilderFunctions {
       });
     });
     document.querySelector('.ent-type-selection-action[data-ent-type="any"]').addEventListener('click', () => {
-      this.app.extensions.generalFunctions.submitQueryChipElement('start-empty-entity', 'Entity Start', '<ent>');
-      this.app.extensions.generalFunctions.submitQueryChipElement('end-entity', 'Entity End', '</ent>', null, true);
+      this.app.submitQueryChipElement('start-empty-entity', 'Entity Start', '<ent>');
+      this.app.submitQueryChipElement('end-entity', 'Entity End', '</ent>', null, true);
       this.elements.structuralAttrModal.close();
     });
     document.querySelector('.ent-type-selection-action[data-ent-type="english"]').addEventListener('change', (event) => {
-      this.app.extensions.generalFunctions.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, `<ent_type="${event.target.value}">`, null, false, true);
+      this.app.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, `<ent_type="${event.target.value}">`, null, false, true);
       if (!this.elements.editingModusOn) {
-        this.app.extensions.generalFunctions.submitQueryChipElement('end-entity', 'Entity End', '</ent_type>', null, true);
+        this.app.submitQueryChipElement('end-entity', 'Entity End', '</ent_type>', null, true);
       }
       this.elements.structuralAttrModal.close();
     });
     document.querySelector('.ent-type-selection-action[data-ent-type="german"]').addEventListener('change', (event) => {
-      this.app.extensions.generalFunctions.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, `<ent_type="${event.target.value}">`, null, false, true); 
+      this.app.submitQueryChipElement('start-entity', `Entity Type=${event.target.value}`, `<ent_type="${event.target.value}">`, null, false, true); 
       if (!this.elements.editingModusOn) {
-        this.app.extensions.generalFunctions.submitQueryChipElement('end-entity', 'Entity End', '</ent_type>', null, true);
+        this.app.submitQueryChipElement('end-entity', 'Entity End', '</ent_type>', null, true);
       }
       this.elements.structuralAttrModal.close();
     });
   }
 
   resetStructuralAttrModal() {
-    this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.englishEntTypeSelection, this.elements.germanEntTypeSelection]);
-    this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.textAnnotationSelection], 'address');
+    this.app.resetMaterializeSelection([this.elements.englishEntTypeSelection, this.elements.germanEntTypeSelection]);
+    this.app.resetMaterializeSelection([this.elements.textAnnotationSelection], 'address');
     this.elements.textAnnotationInput.value = '';
 
-    this.app.extensions.generalFunctions.toggleClass(['entity-builder', 'text-annotation-builder'], 'hide', 'add');
+    this.app.toggleClass(['entity-builder', 'text-annotation-builder'], 'hide', 'add');
     this.toggleEditingAreaStructuralAttrModal('remove');
     this.elements.editingModusOn = false;
     this.elements.editedQueryChipElementIndex = undefined;
@@ -60,17 +58,17 @@ class StructuralAttributeBuilderFunctions {
   actionButtonInStrucAttrModalHandler(action) {
     switch (action) {
       case 'sentence':
-        this.app.extensions.generalFunctions.submitQueryChipElement('start-sentence', 'Sentence Start', '<s>');
-        this.app.extensions.generalFunctions.submitQueryChipElement('end-sentence', 'Sentence End', '</s>', null, true);
+        this.app.submitQueryChipElement('start-sentence', 'Sentence Start', '<s>');
+        this.app.submitQueryChipElement('end-sentence', 'Sentence End', '</s>', null, true);
         this.elements.structuralAttrModal.close();
         break;
       case 'entity':
-        this.app.extensions.generalFunctions.toggleClass(['entity-builder'], 'hide', 'toggle');
-        this.app.extensions.generalFunctions.toggleClass(['text-annotation-builder'], 'hide', 'add');
+        this.app.toggleClass(['entity-builder'], 'hide', 'toggle');
+        this.app.toggleClass(['text-annotation-builder'], 'hide', 'add');
         break;
       case 'meta-data':
-        this.app.extensions.generalFunctions.toggleClass(['text-annotation-builder'], 'hide', 'toggle');
-        this.app.extensions.generalFunctions.toggleClass(['entity-builder'], 'hide', 'add');
+        this.app.toggleClass(['text-annotation-builder'], 'hide', 'toggle');
+        this.app.toggleClass(['entity-builder'], 'hide', 'add');
         break;
       default:
         break;
@@ -79,7 +77,7 @@ class StructuralAttributeBuilderFunctions {
 
   toggleEditingAreaStructuralAttrModal(action) {
     // If the user edits a query chip element, the corresponding editing area is displayed and the other areas are hidden or disabled.
-    this.app.extensions.generalFunctions.toggleClass(['sentence-button', 'entity-button', 'text-annotation-button', 'any-type-entity-button'], 'disabled', action);
+    this.app.toggleClass(['sentence-button', 'entity-button', 'text-annotation-button', 'any-type-entity-button'], 'disabled', action);
   }
 
   textAnnotationSubmitHandler() {
@@ -99,29 +97,29 @@ class StructuralAttributeBuilderFunctions {
       }, 3000);
     } else {
       let queryText = `:: match.text_${textAnnotationOptions.value}="${textAnnotationInput.value}"`;
-      this.app.extensions.generalFunctions.submitQueryChipElement('text-annotation', `${textAnnotationOptions.value}=${textAnnotationInput.value}`, queryText, null, false, true);
+      this.app.submitQueryChipElement('text-annotation', `${textAnnotationOptions.value}=${textAnnotationInput.value}`, queryText, null, false, true);
       this.elements.structuralAttrModal.close();
     }
   }
 
   editStartEntityChipElement(queryChipElement) {
     this.elements.structuralAttrModal.open();
-    this.app.extensions.generalFunctions.toggleClass(['entity-builder'], 'hide', 'remove');
+    this.app.toggleClass(['entity-builder'], 'hide', 'remove');
     this.toggleEditingAreaStructuralAttrModal('add');
     let entType = queryChipElement.dataset.query.replace(/<ent_type="|">/g, '');
     let isEnglishEntType = this.elements.englishEntTypeSelection.querySelector(`option[value=${entType}]`) !== null;
     let selection = isEnglishEntType ? this.elements.englishEntTypeSelection : this.elements.germanEntTypeSelection;
-    this.app.extensions.generalFunctions.resetMaterializeSelection([selection], entType);
+    this.app.resetMaterializeSelection([selection], entType);
   }
 
   editTextAnnotationChipElement(queryChipElement) {
     this.elements.structuralAttrModal.open();
-    this.app.extensions.generalFunctions.toggleClass(['text-annotation-builder'], 'hide', 'remove');
+    this.app.toggleClass(['text-annotation-builder'], 'hide', 'remove');
     this.toggleEditingAreaStructuralAttrModal('add');
     let [textAnnotationSelection, textAnnotationContent] = queryChipElement.dataset.query
       .replace(/:: ?match\.text_|"|"/g, '')
       .split('=');
-    this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.textAnnotationSelection], textAnnotationSelection);
+    this.app.resetMaterializeSelection([this.elements.textAnnotationSelection], textAnnotationSelection);
     this.elements.textAnnotationInput.value = textAnnotationContent;
   }
 }
diff --git a/app/static/js/corpus-analysis/query-builder/token-attribute-builder-functions.js b/app/static/js/corpus-analysis/query-builder/token-attribute-builder-functions.js
index 5f897fbe..6bbc20f0 100644
--- a/app/static/js/corpus-analysis/query-builder/token-attribute-builder-functions.js
+++ b/app/static/js/corpus-analysis/query-builder/token-attribute-builder-functions.js
@@ -1,9 +1,7 @@
-class TokenAttributeBuilderFunctions {
-  name = 'Token Attribute Builder Functions';
-
-  constructor(app, elements) {
+nopaque.corpus_analysis.query_builder.TokenAttributeBuilderFunctions = class TokenAttributeBuilderFunctions {
+  constructor(app) {
     this.app = app;
-    this.elements = elements;
+    this.elements = app.elements;
 
     this.elements.positionalAttrSelection.addEventListener('change', () => {
       this.preparePositionalAttrModal();
@@ -42,9 +40,9 @@ class TokenAttributeBuilderFunctions {
     this.elements.positionalAttrSelection.innerHTML = originalSelectionList;
     this.elements.tokenQuery.innerHTML = '';
     this.elements.tokenBuilderContent.innerHTML = '';
-    this.app.extensions.generalFunctions.toggleClass(['input-field-options'], 'hide', 'remove');
-    this.app.extensions.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
-    this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.positionalAttrSelection], "word");
+    this.app.toggleClass(['input-field-options'], 'hide', 'remove');
+    this.app.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
+    this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], "word");
     this.elements.ignoreCaseCheckbox.checked = false;
     this.elements.editingModusOn = false;
     this.elements.editedQueryChipElementIndex = undefined;
@@ -178,7 +176,7 @@ class TokenAttributeBuilderFunctions {
       }
     });
 
-    this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.positionalAttrSelection], selection);
+    this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], selection);
     this.preparePositionalAttrModal();
   }
 
@@ -201,11 +199,11 @@ class TokenAttributeBuilderFunctions {
     this.optionToggleHandler();
 
     if (selection === 'word' || selection === 'lemma') {
-      this.app.extensions.generalFunctions.toggleClass(['input-field-options'], 'hide', 'remove');
+      this.app.toggleClass(['input-field-options'], 'hide', 'remove');
     } else if (selection === 'empty-token'){
       this.addTokenToQuery();
     } else {
-      this.app.extensions.generalFunctions.toggleClass(['input-field-options'], 'hide', 'add');
+      this.app.toggleClass(['input-field-options'], 'hide', 'add');
     }
   }
 
@@ -216,12 +214,12 @@ class TokenAttributeBuilderFunctions {
   optionToggleHandler() {
     let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
     if (input.value === '' && this.elements.editingModusOn === false) {
-      this.app.extensions.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
+      this.app.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
     } else if (this.elements.positionalAttrSelection.querySelectorAll('option').length === 1) {
-      this.app.extensions.generalFunctions.toggleClass(['and'], 'disabled', 'add');
-      this.app.extensions.generalFunctions.toggleClass(['or'], 'disabled', 'remove');
+      this.app.toggleClass(['and'], 'disabled', 'add');
+      this.app.toggleClass(['or'], 'disabled', 'remove');
     } else {
-      this.app.extensions.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove');
+      this.app.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove');
     }
   }
 
@@ -257,7 +255,7 @@ class TokenAttributeBuilderFunctions {
       this.disableTokenSubmit();
     } else {
       tokenQueryCQLText = `[${tokenQueryCQLText}]`;
-      this.app.extensions.generalFunctions.submitQueryChipElement('token', tokenQueryPrettyText, tokenQueryCQLText, null, false, kindOfToken === 'empty-token' ? false : true);
+      this.app.submitQueryChipElement('token', tokenQueryPrettyText, tokenQueryCQLText, null, false, kindOfToken === 'empty-token' ? false : true);
       this.elements.positionalAttrModal.close();
     }
   }
@@ -280,7 +278,7 @@ class TokenAttributeBuilderFunctions {
   editTokenChipElement(queryElementsContent) {
     this.elements.positionalAttrModal.open();
     queryElementsContent.forEach((queryElement) => {
-      this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr);
+      this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr);
       this.preparePositionalAttrModal();
       switch (queryElement.tokenAttr) {
         case 'word':
@@ -291,12 +289,12 @@ class TokenAttributeBuilderFunctions {
           // English-pos is selected by default. Then it is checked whether the passed token value occurs in the english-pos selection. If not, the selection is reseted and changed to german-pos.
           let selection = this.elements.tokenBuilderContent.querySelector('select');
           queryElement.tokenAttr = selection.querySelector(`option[value=${queryElement.tokenValue}]`) ? 'english-pos' : 'german-pos';
-          this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr);
+          this.app.resetMaterializeSelection([this.elements.positionalAttrSelection], queryElement.tokenAttr);
           this.preparePositionalAttrModal();
-          this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue);
+          this.app.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue);
           break;
         case 'simple_pos':
-          this.app.extensions.generalFunctions.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue);
+          this.app.resetMaterializeSelection([this.elements.tokenBuilderContent.querySelector('select')], queryElement.tokenValue);
         default:
           break;
       }
diff --git a/app/templates/_scripts.html.j2 b/app/templates/_scripts.html.j2
index 7b6aad12..e16c7798 100644
--- a/app/templates/_scripts.html.j2
+++ b/app/templates/_scripts.html.j2
@@ -91,7 +91,7 @@
   'js/corpus-analysis/cqi/client.js',
   'js/corpus-analysis/query-builder/index.js',
   'js/corpus-analysis/query-builder/element-references.js',
-  'js/corpus-analysis/query-builder/general-query-builder-functions.js',
+  'js/corpus-analysis/query-builder/query-builder.js',
   'js/corpus-analysis/query-builder/structural-attribute-builder-functions.js',
   'js/corpus-analysis/query-builder/token-attribute-builder-functions.js',
   'js/corpus-analysis/app.js',
diff --git a/app/templates/corpora/_analysis/concordance.html.j2 b/app/templates/corpora/_analysis/concordance.html.j2
index 9ff4a4bd..2c074dfd 100644
--- a/app/templates/corpora/_analysis/concordance.html.j2
+++ b/app/templates/corpora/_analysis/concordance.html.j2
@@ -129,6 +129,6 @@
 {% macro scripts() %}
 <script>
   const corpusAnalysisConcordance = new nopaque.corpus_analysis.ConcordanceExtension(corpusAnalysisApp);
-  const concordanceQueryBuilder = new ConcordanceQueryBuilder();
+  const concordanceQueryBuilder = new nopaque.corpus_analysis.query_builder.QueryBuilder();
 </script>
 {% endmacro %}
-- 
GitLab