QB form update + incidence modifier

app/static/js/CorpusAnalysis/QueryBuilder/ElementReferencesQueryBuilder.js

@@ -1,13 +1,11 @@
 class ElementReferencesQueryBuilder {
   constructor() {
     // General Elements
-    this.counter = 0;
-    this.queryInputField = document.querySelector('#corpus-analysis-concordance-form-query-builder');
-    this.queryInputFieldInstance = M.Chips.getInstance(this.queryInputField);
-    this.queryInputFieldContent = [];
+    this.queryInputField = document.querySelector('#corpus-analysis-concordance-query-builder-input-field');
+    this.queryChipElements = [];
 
     // Structural Attribute Builder Elements
-    this.structuralAttrModalInstance = document.querySelector('#corpus-analysis-concordance-structural-attr-modal');
+    this.structuralAttrModal = M.Modal.getInstance(document.querySelector('#corpus-analysis-concordance-structural-attr-modal'));
     this.sentenceElement = document.querySelector('[data-structural-attr-modal-action-button="sentence"]');
     this.entityElement = document.querySelector('[data-structural-attr-modal-action-button="entity"]');
     this.textAnnotationElement = document.querySelector('[data-structural-attr-modal-action-button="text-annotation"]');

app/static/js/CorpusAnalysis/QueryBuilder/GeneralFunctionsQueryBuilder.js

@@ -9,23 +9,29 @@ class GeneralFunctionsQueryBuilder {
     });
   }
 
+  updateChipList() {
+    this.elements.queryChipElements = this.elements.queryInputField.querySelectorAll('.chip');
+  }
+
   queryChipFactory(dataType, prettyQueryText, queryText) {
-    this.elements.counter++;
-    this.elements.queryInputFieldInstance.addChip({
-      tag: prettyQueryText
-    });
+    queryText = Utils.escape(queryText);
+    prettyQueryText = Utils.escape(prettyQueryText);
+    let queryChipElement = Utils.HTMLToElement(
+      `
+        <span class="chip query-component" data-type="${dataType}" data-query="${queryText}" draggable="true">
+          ${prettyQueryText}
+          <i class="material-icons close">close</i>
+        </span>
+      `
+    );
 
-    let queryChipElementIndex = this.elements.queryInputFieldInstance.$chips.length - 1;
-    let queryChipElement = this.elements.queryInputFieldInstance.$chips[queryChipElementIndex];
-    queryChipElement.classList.add('query-component');
-    queryChipElement.setAttribute('data-type', dataType);
-    queryChipElement.setAttribute('data-query', queryText);
-    queryChipElement.setAttribute('draggable', 'true');
-
-    queryChipElement.addEventListener('click', () => this.deleteAttr(queryChipElement));
+    queryChipElement.addEventListener('click', () => this.selectChipElement(queryChipElement));
+    queryChipElement.querySelector('i').addEventListener('click', () => this.deleteChipElement(queryChipElement));
+    
     queryChipElement.addEventListener('dragstart', this.handleDragStart.bind(this, queryChipElement));
     queryChipElement.addEventListener('dragend', this.handleDragEnd);
-
+    this.elements.queryInputField.appendChild(queryChipElement);
+    this.updateChipList();
     this.queryPreviewBuilder();
   }
 
@@ -65,45 +71,51 @@ class GeneralFunctionsQueryBuilder {
     targetChipClone.addEventListener('drop', (event) => {
       let dropzone = event.target;
       dropzone.parentElement.replaceChild(queryChipElement, dropzone);
-      this.elements.queryInputFieldInstance.$chips = Array.from(this.elements.queryInputField.querySelectorAll('.chip'));
+      this.updateChipList();
       this.queryPreviewBuilder();
     });
   }
 
   queryPreviewBuilder() {
     let queryPreview = document.querySelector('#corpus-analysis-concordance-query-preview');
-    let queryChipElements = Array.from(Object.values(this.elements.queryInputFieldInstance.$chips));
-    if (!isNaN(queryChipElements[queryChipElements.length - 1])) {
-      queryChipElements.pop();
-    }
-    this.elements.queryInputFieldContent = [];
-    queryChipElements.forEach(element => {
-
+    let queryInputFieldContent = [];
+    this.elements.queryChipElements.forEach(element => {
       let queryElement = element.dataset.query;
       if (queryElement !== undefined) {
         queryElement = Utils.escape(queryElement);
-        this.elements.queryInputFieldContent.push(queryElement);
       }
+      queryInputFieldContent.push(queryElement);
     });
   
-    let queryString = this.elements.queryInputFieldContent.join(' ');
+    let queryString = queryInputFieldContent.join(' ');
     queryString += ';';
   
     queryPreview.innerHTML = queryString;
     queryPreview.parentNode.classList.toggle('hide', queryString === ';');
   }
 
-  deleteAttr(attr) {
+  deleteChipElement(attr) {
     if (attr.dataset.type === "start-sentence") {
       this.elements.sentenceElement.innerHTML = 'Sentence';
     } else if (attr.dataset.type === "start-entity" || attr.dataset.type === "start-empty-entity") {
       this.elements.entityElement.innerHTML = 'Entity';
     }
-    let queryChipElements = Array.from(Object.values(this.elements.queryInputFieldInstance.$chips));
-    queryChipElements.pop();
-    this.elements.counter -= 1;
-    this.elements.queryInputFieldInstance.deleteChip(queryChipElements.indexOf(attr));
+    this.elements.queryInputField.removeChild(attr);
+    this.updateChipList();
     this.queryPreviewBuilder();
   }
+
+  selectChipElement(attr) {
+    document.querySelectorAll('.chip.teal').forEach(element => {
+        if (element !== attr) {
+          element.classList.remove('teal', 'lighten-2');
+          this.toggleClass(['token-incidence-modifiers'], 'disabled', 'add');
+        }
+    });
+
+    this.toggleClass(['token-incidence-modifiers'], 'disabled', 'toggle');
+    attr.classList.toggle('teal');
+    attr.classList.toggle('lighten-2');
+}
 }
 

app/static/js/CorpusAnalysis/QueryBuilder/StructuralAttributeBuilderFunctionsQueryBuilder.js

@@ -2,11 +2,32 @@ class StructuralAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQu
   constructor(elements) {
     super(elements);
     this.elements = elements;
+
+    document.querySelectorAll('[data-structural-attr-modal-action-button]').forEach(button => {
+      button.addEventListener('click', () => {
+        this.actionButtonInStrucAttrModalHandler(button.dataset.structuralAttrModalActionButton);
+      });
+    });
+    document.querySelector('.ent-type-selection-action[data-ent-type="any"]').addEventListener('click', () => {
+      this.queryChipFactory('start-empty-entity', 'Entity Start', '<ent>');
+      this.queryChipFactory('end-entity', 'Entity End', '</ent>');
+      this.elements.structuralAttrModal.close();
+    });
+    document.querySelector('.ent-type-selection-action[data-ent-type="english"]').addEventListener('change', (event) => {
+      this.queryChipFactory('start-entity', `Entity Type=${event.target.value}`, `<ent_type="${event.target.value}">`);
+      this.queryChipFactory('end-entity', 'Entity End', '</ent_type>');
+      this.elements.structuralAttrModal.close();
+    });
+
+
   }
 
   actionButtonInStrucAttrModalHandler(action) {
     switch (action) {
       case 'sentence':
+        this.queryChipFactory('start-sentence', 'Sentence Start', '<s>');
+        this.queryChipFactory('end-sentence', 'Sentence End', '</s>');
+        this.elements.structuralAttrModal.close();
         break;
       case 'entity':
         this.toggleClass(['entity-builder'], 'hide', 'toggle');
@@ -20,4 +41,5 @@ class StructuralAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQu
         break;
     }
   }
+
 }

app/static/js/CorpusAnalysis/QueryBuilder/TokenAttributeBuilderFunctionsQueryBuilder.js

@@ -3,6 +3,36 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
     super(elements);
     this.elements = elements;
 
+    this.elements.positionalAttrSelection.addEventListener('change', (event) => {
+      this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
+      if (event.target.value !== 'empty-token') {
+        this.toggleClass([event.target.value], 'hide', 'remove');
+        this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
+        this.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
+      }
+      if (event.target.value === 'word' || event.target.value === 'lemma') {
+        this.toggleClass(['input-field-options'], 'hide', 'remove');
+      } else if (event.target.value === 'empty-token'){
+        this.addTokenToQuery();
+      } else {
+        this.toggleClass(['input-field-options'], 'hide', 'add');
+      }
+    });
+
+    // Options for positional attribute selection
+    document.querySelectorAll('.positional-attr-options-action-button[data-options-action]').forEach(button => {
+      button.addEventListener('click', () => {this.actionButtonInOptionSectionHandler(button.dataset.optionsAction);});
+    });
+    document.querySelectorAll('.incidence-modifier-selection[data-incidence-modifier]').forEach(button => {
+      button.addEventListener('click', () => {this.incidenceModifierHandler(button);});
+    });
+    document.querySelectorAll('.n-m-submit-button').forEach(button => {
+      button.addEventListener('click', () => {
+        this.nmSubmitHandler(button.dataset.modalId);
+      });
+    });
+
+    // Eventlistener for kind of token 
     this.elements.tokenSubmitButton.addEventListener('click', () => {this.addTokenToQuery();});
     this.elements.wordInput.addEventListener('input', () => {this.optionToggleHandler();});
     this.elements.lemmaInput.addEventListener('input', () => {this.optionToggleHandler();});
@@ -119,7 +149,7 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
           this.disableTokenSubmit();
         } else {
           tokenQueryPrettyText += `simple_pos=${this.elements.simplePosSelection.value}`;
-          tokenQueryCQLText += `simple_pos="${this.elements.simplePosSelection.value}"`;
+          tokenQueryCQLText += `simple_pos='${this.elements.simplePosSelection.value}'`;
           this.elements.simplePosSelection.value = '';
         }
         break;
@@ -149,7 +179,7 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
         input.setSelectionRange(firstIndex, lastIndex);
         break;
       case 'wildcard-char':
-        input.value  += '.';
+        input.value += '.';
         break;
       case 'and':
         this.conditionHandler('and', " & ");
@@ -195,7 +225,8 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
   nmSubmitHandler(modalId) {
     let modal = document.querySelector(`#${modalId}`);
     let input_n = modal.querySelector('.n-m-input[data-value-type="n"]').value;
-    let input_m = modalId === 'corpus-analysis-concordance-between-nm-modal' ? ',' + modal.querySelector('.n-m-input[data-value-type="m"]').value : '';
+    let input_m = modal.querySelector('.n-m-input[data-value-type="m"]') || undefined;
+    input_m = input_m !== undefined ? ',' + input_m.value : '';
     let input = `${input_n}${input_m}`;
 
     let instance = M.Modal.getInstance(modal);