app/corpora/cqi_over_sio/utils.py

@@ -9,7 +9,8 @@ def lookups_by_cpos(corpus: CQiCorpus, cpos_list: List[int]) -> Dict:
     for attr in corpus.positional_attributes.list():
         cpos_attr_values: List[str] = attr.values_by_cpos(cpos_list)
         for i, cpos in enumerate(cpos_list):
-            lookups['cpos_lookup'][cpos][attr.name] = cpos_attr_values[i]
+            lookups['cpos_lookup'][cpos][attr.attrs['name']] = \
+                cpos_attr_values[i]
     for attr in corpus.structural_attributes.list():
         # We only want to iterate over non subattributes, identifiable by
         # attr.has_values == False
@@ -19,19 +20,19 @@ def lookups_by_cpos(corpus: CQiCorpus, cpos_list: List[int]) -> Dict:
         for i, cpos in enumerate(cpos_list):
             if cpos_attr_ids[i] == -1:
                 continue
-            lookups['cpos_lookup'][cpos][attr.name] = cpos_attr_ids[i]
+            lookups['cpos_lookup'][cpos][attr.attrs['name']] = cpos_attr_ids[i]
         occured_attr_ids = [x for x in set(cpos_attr_ids) if x != -1]
-        if len(occured_attr_ids) == 0:
+        if not occured_attr_ids:
             continue
         subattrs = corpus.structural_attributes.list(filters={'part_of': attr})
-        if len(subattrs) == 0:
+        if not subattrs:
             continue
-        lookup_name: str = f'{attr.name}_lookup'
+        lookup_name: str = f'{attr.attrs["name"]}_lookup'
         lookups[lookup_name] = {}
         for attr_id in occured_attr_ids:
             lookups[lookup_name][attr_id] = {}
         for subattr in subattrs:
-            subattr_name = subattr.name[(len(attr.name) + 1):]  # noqa
+            subattr_name = subattr.attrs['name'][(len(attr.attrs['name']) + 1):]  # noqa
             for i, subattr_value in enumerate(subattr.values_by_ids(occured_attr_ids)):  # noqa
                 lookups[lookup_name][occured_attr_ids[i]][subattr_name] = subattr_value  # noqa
     return lookups

app/static/css/queryBuilder.css

@@ -75,20 +75,16 @@
   color: black;
 }
 
-[data-toggle-area="input-field-options"] a {
-  margin-right: 10px;
-}
-
-#corpus-analysis-concordance-ignore-case-checkbox {
-  margin-left: 5px;
+#corpus-analysis-concordance-incidence-modifiers-button a{
+  background-color: #2FBBAB;
 }
 
 #corpus-analysis-concordance-incidence-modifiers-dropdown a{
   background-color: white;
 }
 
-[data-target="corpus-analysis-concordance-incidence-modifiers-dropdown"] {
-  background-color: #2FBBAB;
+#corpus-analysis-concordance-ignore-case-checkbox {
+  margin-left: 5px;
 }
 
 #corpus-analysis-concordance-or, #corpus-analysis-concordance-and {

app/static/js/CorpusAnalysis/CorpusAnalysisApp.js

@@ -93,6 +93,7 @@ class CorpusAnalysisApp {
           actionElement.disabled = true;
           break;
         case 'SELECT':
+          console.log(actionElement);
           actionElement.parentNode.querySelector('input.select-dropdown').disabled = true;
           break;
         default:

app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js

@@ -32,9 +32,7 @@ class CorpusAnalysisConcordance {
 
   async submitForm() {
     this.app.disableActionElements();
-    // let query = this.elements.form.query.value.trim();
-    let query = this.checkQueryInput();
-    console.log(query);
+    let query = this.elements.form.query.value.trim();
     let subcorpusName = this.elements.form['subcorpus-name'].value;
     this.elements.error.innerText = '';
     this.elements.error.classList.add('hide');
@@ -80,7 +78,10 @@ class CorpusAnalysisConcordance {
     });
     this.elements.userInterfaceForm.addEventListener('change', (event) => {
       if (event.target === this.elements.userInterfaceForm['context']) {
+        console.log(this.settings.context);
+        console.log(parseInt(this.elements.userInterfaceForm['context'].value));
         this.settings.context = parseInt(this.elements.userInterfaceForm['context'].value);
+        console.log(this.settings.context);
         this.submitForm();
       }
       if (event.target === this.elements.userInterfaceForm['per-page']) {
@@ -98,14 +99,6 @@ class CorpusAnalysisConcordance {
     });
   }
 
-  checkQueryInput() {
-    if (document.querySelector('#corpus-analysis-concordance-expert-mode-display').classList.contains('hide')) {
-      return document.querySelector('#corpus-analysis-concordance-query-preview').innerHTML.trim();
-    } else {
-      return this.elements.form.query.value.trim();
-    }
-  }
-
   clearSubcorpusList() {
     this.elements.subcorpusList.innerHTML = '';
     this.elements.subcorpusList.classList.add('hide');

app/static/js/CorpusAnalysis/QueryBuilder.js

@@ -4,42 +4,32 @@ class ConcordanceQueryBuilder {
     
     this.elements = new ElementReferencesQueryBuilder();
     this.generalFunctions = new GeneralFunctionsQueryBuilder(this.elements);
-    this.tokenAttributeBuilderFunctions = new TokenAttributeBuilderFunctionsQueryBuilder(this.elements);
-    this.structuralAttributeBuilderFunctions = new StructuralAttributeBuilderFunctionsQueryBuilder(this.elements);
+    this.tokenAttributeBuilder = new TokenAttributeBuilderFunctionsQueryBuilder(this.elements);
+    this.structuralAttributeBuilder = new StructuralAttributeBuilderFunctionsQueryBuilder(this.elements);
 
     // Event listener for structural attribute modal
     document.querySelectorAll('[data-structural-attr-modal-action-button]').forEach(button => {
       button.addEventListener('click', () => {
-        this.structuralAttributeBuilderFunctions.actionButtonInStrucAttrModalHandler(button.dataset.structuralAttrModalActionButton);
+        this.structuralAttributeBuilder.actionButtonHandler(button.dataset.structuralAttrModalActionButton);
       });
     });
 
     // Event listener for token attribute modal
     this.elements.positionalAttrSelection.addEventListener('change', (event) => {
       this.generalFunctions.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
-      if (event.target.value !== 'empty-token') {
       this.generalFunctions.toggleClass([event.target.value], 'hide', 'remove');
       this.generalFunctions.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
-        this.tokenAttributeBuilderFunctions.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
-      }
-      if (event.target.value === 'word' || event.target.value === 'lemma') {
-        this.generalFunctions.toggleClass(['input-field-options'], 'hide', 'remove');
-      } else if (event.target.value === 'empty-token'){
-        this.tokenAttributeBuilderFunctions.addTokenToQuery();
-      } else {
-        this.generalFunctions.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.tokenAttributeBuilderFunctions.actionButtonInOptionSectionHandler(button.dataset.optionsAction);});
+      button.addEventListener('click', () => {this.tokenAttributeBuilder.actionButtonHandler(button.dataset.optionsAction);});
     });
     document.querySelectorAll('.incidence-modifier-selection[data-incidence-modifier]').forEach(button => {
-      button.addEventListener('click', () => {this.tokenAttributeBuilderFunctions.incidenceModifierHandler(button);});
+      button.addEventListener('click', () => {this.tokenAttributeBuilder.incidenceModifierHandler(button);});
     });
     document.querySelectorAll('.n-m-submit-button').forEach(button => {
       button.addEventListener('click', () => {
-        this.tokenAttributeBuilderFunctions.nmSubmitHandler(button.dataset.modalId);
+        this.tokenAttributeBuilder.nmSubmitHandler(button.dataset.modalId);
       });
     });
 
@@ -56,7 +46,7 @@ class ConcordanceQueryBuilder {
       document.querySelector('#corpus-analysis-concordance-positional-attr-modal'), 
       {
         onOpenStart: () => {
-          this.tokenAttributeBuilderFunctions.optionToggleHandler();
+          this.tokenAttributeBuilder.optionToggleHandler();
         }
       }
     );

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

@@ -22,35 +22,25 @@ class GeneralFunctionsQueryBuilder {
     queryChipElement.setAttribute('data-query', queryText);
     queryChipElement.setAttribute('draggable', 'true');
 
-    queryChipElement.addEventListener('click', () => this.deleteAttr(queryChipElement));
-    queryChipElement.addEventListener('dragstart', this.handleDragStart.bind(this, queryChipElement));
-    queryChipElement.addEventListener('dragend', this.handleDragEnd);
-
-    this.queryPreviewBuilder();
-  }
-
-  handleDragStart(queryChipElement, event) {
+    queryChipElement.addEventListener('click', () => {this.deleteAttr(queryChipElement);});
+    queryChipElement.addEventListener('dragstart', (event) => {
+      // selects all nodes without target class
       let queryChips = this.elements.queryInputField.querySelectorAll('.query-component');
+
+      // Adds a target chip in front of all draggable childnodes
       setTimeout(() => {
         let targetChipElement = Utils.HTMLToElement('<span class="chip drop-target">Drop here</span>');
         for (let element of queryChips) {
           if (element === queryChipElement.nextSibling) {continue;}
           let targetChipClone = targetChipElement.cloneNode(true);
-        if (element === queryChipElement && queryChips[queryChips.length - 1] !== element) {
+          if (element === queryChipElement) {
+            // If the dragged element is not at the very end, a target chip is also inserted at the end
+            if (queryChips[queryChips.length - 1] !== element) {
               queryChips[queryChips.length - 1].insertAdjacentElement('afterend', targetChipClone);
+            }
           } else {
             element.insertAdjacentElement('beforebegin', targetChipClone);
           }
-        this.addDragDropListeners(targetChipClone, queryChipElement);
-      }
-    }, 0);
-  }
-
-  handleDragEnd(event) {
-    document.querySelectorAll('.drop-target').forEach(target => target.remove());
-  }
-
-  addDragDropListeners(targetChipClone, queryChipElement) {
           targetChipClone.addEventListener('dragover', (event) => {
             event.preventDefault();
           });
@@ -65,17 +55,43 @@ 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.queryPreviewBuilder();
           });
         }
+      }, 0);
+    });
+
+    queryChipElement.addEventListener('dragend', (event) => {
+      let targets = document.querySelectorAll('.drop-target');
+      for (let target of targets) {
+        target.remove();
+      }
+    });
+
+    // Ensures that metadata is always at the end of the query:
+    // const lastChild = this.elements.queryInputFieldInstance.lastChild;
+    // const isLastChildTextAnnotation = lastChild && lastChild.dataset.type === 'text-annotation';
+    // console.log(isLastChildTextAnnotation);
+    // console.log(lastChild);
+
+    // if (!isLastChildTextAnnotation) {
+    //   this.elements.queryInputFieldInstance.appendChild(queryChipElement);
+    // } else {
+    //   this.elements.queryInputFieldInstance.insertBefore(queryChipElement, lastChild);
+    // }
+
+    this.queryPreviewBuilder();
+
+    // Shows a hint about possible functions for editing the query at the first added element in the query
+    // if (this.elements.queryInputFieldInstance.childNodes.length === 1) {
+    //   app.flash('You can edit your query by deleting individual elements or moving them via drag and drop.');
+    // }
+  }
 
   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 => {
 

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

@@ -4,7 +4,7 @@ class StructuralAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQu
     this.elements = elements;
   }
 
-  actionButtonInStrucAttrModalHandler(action) {
+  actionButtonHandler(action) {
     switch (action) {
       case 'sentence':
         break;

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

@@ -6,34 +6,24 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
     this.elements.tokenSubmitButton.addEventListener('click', () => {this.addTokenToQuery();});
     this.elements.wordInput.addEventListener('input', () => {this.optionToggleHandler();});
     this.elements.lemmaInput.addEventListener('input', () => {this.optionToggleHandler();});
-    this.elements.englishPosSelection.addEventListener('change', () => {this.optionToggleHandler();});
-    this.elements.germanPosSelection.addEventListener('change', () => {this.optionToggleHandler();});
-    this.elements.simplePosSelection.addEventListener('change', () => {this.optionToggleHandler();});
   }
 
-  tokenInputCheck() {
+  lemmaOrWordInputCheck() {
     let input;
 
-    if (!document.querySelector('[data-toggle-area="word"]').classList.contains('hide')) {
+    if (document.querySelector('[data-toggle-area="word"]').classList.contains('hide') === false) {
       input = this.elements.wordInput;
-    } else if (!document.querySelector('[data-toggle-area="lemma"]').classList.contains('hide')){
+    } else {
       input = this.elements.lemmaInput;
-    } else if (!document.querySelector('[data-toggle-area="english-pos"]').classList.contains('hide')){
-      input = this.elements.englishPosSelection;
-    } else if (!document.querySelector('[data-toggle-area="german-pos"]').classList.contains('hide')){
-      input = this.elements.germanPosSelection;
-    } else if (!document.querySelector('[data-toggle-area="simple-pos"]').classList.contains('hide')){
-      input = this.elements.simplePosSelection;
     }
 
     return input;
   }
 
   optionToggleHandler() {
-    let input;
-    input = this.tokenInputCheck();
+    let input = this.lemmaOrWordInputCheck()
 
-    if (input.value === '' || input.value === 'default') {
+    if (input.value === '') {
       this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
     } else {
       this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove');
@@ -68,13 +58,17 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
 
   addTokenToQuery() {
     let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
-    let tokenQueryPrettyText = '';
-    let tokenQueryCQLText = '';
+    let tokenQueryContent = '';
+    let tokenQueryText = '';
     this.elements.isTokenQueryInvalid = false;
+    let tokenIsEmpty = false;
 
     this.elements.tokenQuery.childNodes.forEach(element => {
-      tokenQueryPrettyText += ' ' + element.firstChild.data + ' ';
-      tokenQueryCQLText += decodeURI(element.dataset.tokentext);
+      tokenQueryContent += ' ' + element.firstChild.data + ' ';
+      tokenQueryText += decodeURI(element.dataset.tokentext);
+      if (element.innerText.indexOf('empty token') !== -1) {
+        tokenIsEmpty = true;
+      }
     });
 
     switch (this.elements.positionalAttrSelection.value) {
@@ -82,8 +76,8 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
         if (this.elements.wordInput.value === '') {
           this.disableTokenSubmit();
         } else {
-          tokenQueryPrettyText += `word=${this.elements.wordInput.value}${c}`;
-          tokenQueryCQLText += `word="${this.elements.wordInput.value}"${c}`;
+          tokenQueryContent += `word=${this.elements.wordInput.value}${c}`;
+          tokenQueryText += `word="${this.elements.wordInput.value}"${c}`;
           this.elements.wordInput.value = '';
         }
         break;
@@ -91,17 +85,17 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
         if (this.elements.lemmaInput.value === '') {
           this.disableTokenSubmit();
         } else {
-          tokenQueryPrettyText += `lemma=${this.elements.lemmaInput.value}${c}`;
-          tokenQueryCQLText += `lemma="${this.elements.lemmaInput.value}"${c}`;
+          tokenQueryContent += `lemma=${this.elements.lemmaInput.value}${c}`;
+          tokenQueryText += `lemma="${this.elements.lemmaInput.value}"${c}`;
           this.elements.lemmaInput.value = '';
         }
         break;
       case 'english-pos':
-        if (this.elements.englishPosSelection.value === 'default') {
+        if (this.elements.englishPos.value === 'default') {
           this.disableTokenSubmit();
         } else {
-          tokenQueryPrettyText += `pos=${this.elements.englishPosSelection.value}`;
-          tokenQueryCQLText += `pos="${this.elements.englishPosSelection.value}"`;
+          tokenQueryContent += `pos=${this.elements.englishPosSelection.value}`;
+          tokenQueryText += `pos="${this.elements.englishPosSelection.value}"`;
           this.elements.englishPosSelection.value = '';
         }
         break;
@@ -109,8 +103,8 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
         if (this.elements.germanPosSelection.value === 'default') {
           this.disableTokenSubmit();
         } else {
-          tokenQueryPrettyText += `pos=${this.elements.germanPosSelection.value}`;
-          tokenQueryCQLText += `pos="${this.elements.germanPosSelection.value}"`;
+          tokenQueryContent += `pos=${this.elements.germanPosSelection.value}`;
+          tokenQueryText += `pos="${this.elements.germanPosSelection.value}"`;
           this.elements.germanPosSelection.value = '';
         }
         break;
@@ -118,28 +112,53 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
         if (this.elements.simplePosSelection.value === 'default') {
           this.disableTokenSubmit();
         } else {
-          tokenQueryPrettyText += `simple_pos=${this.elements.simplePosSelection.value}`;
-          tokenQueryCQLText += `simple_pos="${this.elements.simplePosSelection.value}"`;
+          tokenQueryContent += `simple_pos=${this.elements.simplePosSelection.value}`;
+          tokenQueryText += `simple_pos="${this.elements.simplePosSelection.value}"`;
           this.elements.simplePosSelection.value = '';
         }
         break;
-      case 'empty-token':
-        tokenQueryPrettyText += 'empty token';
       default:
         break;
     }
 
     // isTokenQueryInvalid looks if a valid value is passed. If the input fields/dropdowns are empty (isTokenQueryInvalid === true), no token is added.
     if (this.elements.isTokenQueryInvalid === false) {
-      tokenQueryCQLText = '[' + tokenQueryCQLText + ']';
-      this.queryChipFactory('token', tokenQueryPrettyText, tokenQueryCQLText);
+      // Square brackets are added only if it is not an empty token (where they are already present).
+      if (tokenIsEmpty === false) {
+        tokenQueryText = '[' + tokenQueryText + ']';
+        }
+      this.queryChipFactory('token', tokenQueryContent, tokenQueryText);
       this.resetPositionalAttrModal();
       this.elements.positionalAttrModal.close();
+
     }
   }
 
-  actionButtonInOptionSectionHandler(elem) {
-    let input = this.tokenInputCheck();
+  resetPositionalAttrModal() {
+    let originalSelectionList = 
+      `
+        <option value="word" selected>word</option>
+        <option value="lemma" >lemma</option>
+        <option value="english-pos">english pos</option>
+        <option value="german-pos">german pos</option>
+        <option value="simple-pos">simple_pos</option>
+        <option value="empty-token">empty token</option>
+      `;
+    document.querySelector('#corpus-analysis-concordance-positional-attr-selection').innerHTML = originalSelectionList;
+    this.elements.tokenQuery.innerHTML = '';
+    this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
+    this.toggleClass(['word'], 'hide', 'remove');
+    this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
+
+    document.querySelector(`#corpus-analysis-concordance-positional-attr-selection option[value="word"]`).selected = true;
+
+    let instance = M.FormSelect.getInstance(document.getElementById('positional-attr-selection'));
+    instance.destroy();
+    M.FormSelect.init(document.getElementById('positional-attr-selection'));
+  }
+
+  actionButtonHandler(elem) {
+    let input = this.lemmaOrWordInputCheck();
     switch (elem) {
       case 'option-group':
         input.value  += '(option1|option2)';
@@ -170,32 +189,31 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
         this.tokenChipFactory(elem.innerText, elem.dataset.token);
         break;
       case 'english-pos':
-        this.tokenChipFactory(`pos=${this.elements.englishPosSelection.value}`, `pos="${this.elements.englishPosSelection.value}"`);
+        this.tokenChipFactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`);
         this.tokenChipFactory(elem.innerText, elem.dataset.token);
+        this.elements.tokenQueryFilled = true;
         break;
       case 'german-pos':
-        this.tokenChipFactory(`pos=${this.elements.germanPosSelection.value}`, `pos="${this.elements.germanPosSelection.value}"`);
+        this.tokenChipFactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`);
         this.tokenChipFactory(elem.innerText, elem.dataset.token);
+        this.elements.tokenQueryFilled = true;
         break;
       case 'simple-pos':
-        this.tokenChipFactory(`simple_pos=${this.elements.simplePosSelection.value}`, `simple_pos="${this.elements.simplePosSelection.value}"`);
+        this.tokenChipFactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`);
         this.tokenChipFactory(elem.innerText, elem.dataset.token);
+        this.elements.tokenQueryFilled = true;
         break;     
       default:
-        let input = this.tokenInputCheck();
+        let input = this.lemmaOrWordInputCheck();
         input.value += elem.dataset.token;
         break;
     }
-
-    if (this.elements.positionalAttrSelection.value !== "word" && this.elements.positionalAttrSelection.value !== "lemma") {
-      this.toggleClass([this.elements.positionalAttrSelection.value], "hide", "add");
-    }
   }
 
   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 = modalId === 'between-nm-modal' ? ',' + modal.querySelector('.n-m-input[data-value-type="m"]').value : '';
     let input = `${input_n}${input_m}`;
 
     let instance = M.Modal.getInstance(modal);
@@ -214,107 +232,69 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
   }
 
   conditionHandler(conditionText, conditionQueryContent) {
-    let tokenQueryPrettyText;
-    let tokenQueryCQLText;
+    let tokenQueryContent;
+    let tokenQueryText;
     let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
+    let selectionDefault = "word";
+    let optionDeleteList = [];
 
     switch (this.elements.positionalAttrSelection.value) {
       case 'word':
-        tokenQueryPrettyText = `word=${this.elements.wordInput.value}${c}`;
-        tokenQueryCQLText = `word="${this.elements.wordInput.value}"${c}`;
+        tokenQueryContent = `word=${this.elements.wordInput.value}${c}`;
+        tokenQueryText = `word="${this.elements.wordInput.value}"${c}`;
         this.elements.wordInput.value = '';
+        if (conditionText === 'and') {
+          selectionDefault = "english-pos";
+          optionDeleteList = ['word', 'lemma', 'empty-token'];
+        }
         break;
       case 'lemma':
-        tokenQueryPrettyText = `lemma=${this.elements.lemmaInput.value}${c}`;
-        tokenQueryCQLText = `lemma="${this.elements.lemmaInput.value}"${c}`;
+        tokenQueryContent = `lemma=${this.elements.lemmaInput.value}${c}`;
+        tokenQueryText = `lemma="${this.elements.lemmaInput.value}"${c}`;
         this.elements.lemmaInput.value = '';
+        if (conditionText === 'and') {
+          selectionDefault = "english-pos";
+          optionDeleteList = ['word', 'lemma', 'empty-token'];
+        }
         break;
       case 'english-pos':
-        tokenQueryPrettyText = `pos=${this.elements.englishPosSelection.value}`;
-        tokenQueryCQLText = `pos="${this.elements.englishPosSelection.value}"`;
-        this.elements.englishPosSelection.value = '';
+        tokenQueryContent = `pos=${this.elements.englishPos.value}`;
+        tokenQueryText = `pos="${this.elements.englishPos.value}"`;
+        this.elements.englishPos.value = '';
         break;
       case 'german-pos':
-        tokenQueryPrettyText = `pos=${this.elements.germanPosSelection.value}`;
-        tokenQueryCQLText = `pos="${this.elements.germanPosSelection.value}"`;
-        this.elements.germanPosSelection.value = '';
+        tokenQueryContent = `pos=${this.elements.germanPos.value}`;
+        tokenQueryText = `pos="${this.elements.germanPos.value}"`;
+        this.elements.germanPos.value = '';
         break;
       case 'simple-pos':
-        tokenQueryPrettyText = `simple_pos=${this.elements.simplePosSelection.value}`;
-        tokenQueryCQLText = `simple_pos="${this.elements.simplePosSelection.value}"`;
-        this.elements.simplePosSelection.value = '';
+        tokenQueryContent = `simple_pos=${this.elements.simplePos.value}`;
+        tokenQueryText = `simple_pos="${this.elements.simplePos.value}"`;
+        this.elements.simplePos.value = '';
         break;
       default:
         break;
     }
 
-    // Deleting the options which do not make sense in the context of the condition like "word" AND "word". Also sets selection default.
-    let selectionDefault = "word";
-    let optionDeleteList = ['empty-token'];
-    if (conditionText === 'and') {
-      if (this.elements.positionalAttrSelection.value === 'word' || this.elements.positionalAttrSelection.value === 'lemma') {
-        selectionDefault = "english-pos";
-        optionDeleteList.push('word', 'lemma');
-      } else if (this.elements.positionalAttrSelection.value === 'english-pos' || this.elements.positionalAttrSelection.value === 'german-pos') {
-        optionDeleteList.push('english-pos', 'german-pos');
-      } else {
-        optionDeleteList.push('simple-pos');
-      }
-    }
-
-    this.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
-
-    this.tokenChipFactory(tokenQueryPrettyText, tokenQueryCQLText);
+    this.tokenChipFactory(tokenQueryContent, tokenQueryText);
     this.tokenChipFactory(conditionText, conditionQueryContent);
     this.setTokenSelection(selectionDefault, optionDeleteList);
   }
 
   setTokenSelection(selection, optionDeleteList) {
     optionDeleteList.forEach(option => {
-      this.elements.positionalAttrSelection.querySelector(`option[value=${option}]`).remove();
+      document.querySelector(`#corpus-analysis-concordance-positional-attr-selection option[value=${option}]`).remove();
     });
 
-    this.resetMaterializeSelection([this.elements.positionalAttrSelection], selection);
+    document.querySelector(`#corpus-analysis-concordance-positional-attr-selection option[value=${selection}]`).selected = true;
+
+    let instance = M.FormSelect.getInstance(document.getElementById('positional-attr-selection'));
+    instance.destroy();
+    M.FormSelect.init(document.getElementById('positional-attr-selection'));
 
     this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
     this.toggleClass([selection], 'hide', 'remove');
     this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
-    if (selection === "word" || selection === "lemma") {
-      this.toggleClass(['input-field-options'], 'hide', 'remove');
-    } else {
-      this.toggleClass(['input-field-options'], 'hide', 'add');
-    }
   }
 
-  
-  resetPositionalAttrModal() {
-    let originalSelectionList = 
-      `
-        <option value="word" selected>word</option>
-        <option value="lemma" >lemma</option>
-        <option value="english-pos">english pos</option>
-        <option value="german-pos">german pos</option>
-        <option value="simple-pos">simple_pos</option>
-        <option value="empty-token">empty token</option>
-      `;
-    this.elements.positionalAttrSelection.innerHTML = originalSelectionList;
-    this.elements.tokenQuery.innerHTML = '';
-    this.toggleClass(['word', 'lemma', 'english-pos', 'german-pos', 'simple-pos'], 'hide', 'add');
-    this.toggleClass(['word', 'input-field-options'], 'hide', 'remove');
-    this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
-
-    document.querySelector('#corpus-analysis-concordance-positional-attr-selection option[value="word"]').selected = true;
-
-    this.resetMaterializeSelection([this.elements.englishPosSelection, this.elements.germanPosSelection, this.elements.simplePosSelection]);
-    this.resetMaterializeSelection([this.elements.positionalAttrSelection], "word");
-  }
-
-  resetMaterializeSelection(selectionElements, value = "default") {
-    selectionElements.forEach(selectionElement => {
-      selectionElement.querySelector(`option[value=${value}]`).selected = true;
-      let instance = M.FormSelect.getInstance(selectionElement);
-      instance.destroy();
-      M.FormSelect.init(selectionElement);
-    })
-  }
 }

app/templates/corpora/_analysis/query_builder/_query_builder.html.j2

@@ -35,7 +35,7 @@
   <div class="row">
     <div class="col s12 right-align">
       <p class="hide-on-small-only">&nbsp;</p>
-      <button class="btn waves-effect waves-light corpus-analysis-action" type="submit" name="submit">
+      <button class="btn waves-effect waves-light corpus-analysis-action" id="corpus-analysis-concordance-form-submit" type="submit" name="submit">
         Send 
         <i class="material-icons right">send</i>
       </button>
@@ -347,20 +347,12 @@
         </div>
         <p></p>
         <div class="row">
-          <div class="col s6" data-toggle-area="input-field-options">
-            <a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-options-action="wildcard-char" data-position="top" data-tooltip="Look for a variable character (also called wildcard character)">Wildcard character</a>
-            <a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-options-action="option-group" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</a>
-            <a class="dropdown-trigger btn-small waves-effect waves-light disabled" href="#" data-target="corpus-analysis-concordance-incidence-modifiers-dropdown" data-toggle-area="incidence-modifiers" data-position="top" data-tooltip="Incidence Modifiers are special characters or patterns, <br>which determine how often a character represented previously should occur.">incidence modifiers</a>
-            <span data-toggle-area="ignore-case-checkbox">
-              <label>
-                <input type="checkbox" class="filled-in"  id="corpus-analysis-concordance-ignore-case-checkbox"/>
-                <span>Ignore Case</span>
-              </label>
-            </span>
+          <div id="corpus-analysis-concordance-input-options" class="col s5 m5 l5 xl4">
+              <a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-toggle-area="wildcard-char" data-options-action="wildcard-char" data-position="top" data-tooltip="Look for a variable character (also called wildcard character)">Wildcard character</a>
+              <a class="btn-small waves-effect waves-light tooltipped positional-attr-options-action-button" data-toggle-area="option-group" data-options-action="option-group" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</a>
           </div>
-          <div class="col s2" data-toggle-area="condition-option-container">
-            <a class="btn-small tooltipped waves-effect waves-light disabled positional-attr-options-action-button" data-options-action="or" data-toggle-area="or" data-position="bottom" data-tooltip="You can add another condition to your token. <br>At least one must be fulfilled">or</a>
-            <a class="btn-small tooltipped waves-effect waves-light disabled positional-attr-options-action-button" data-options-action="and" data-toggle-area="and" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
+          <div class="col s3 m3 l3 xl3" id="corpus-analysis-concordance-incidence-modifiers-button">
+            <a class="dropdown-trigger btn-small waves-effect waves-light disabled" href="#" data-target="corpus-analysis-concordance-incidence-modifiers-dropdown" data-toggle-area="incidence-modifiers" data-position="top" data-tooltip="Incidence Modifiers are special characters or patterns, <br>which determine how often a character represented previously should occur.">incidence modifiers</a>
           </div>
           
           <ul id="corpus-analysis-concordance-incidence-modifiers-dropdown" class="dropdown-content">
@@ -371,6 +363,18 @@
             <li><a class="modal-trigger tooltipped" href="#corpus-analysis-concordance-between-nm-modal" data-position ="top" data-tooltip="...occurrences of the character/token before">between n and m ({n,m})</a></li>
           </ul>
 
+          <div class="col s2 m2 l2 xl2">
+            <p>
+                <label>
+                  <input type="checkbox" class="filled-in" data-toggle-area="ignore-case-checkbox" id="corpus-analysis-concordance-ignore-case-checkbox"/>
+                  <span>Ignore Case</span>
+                </label>
+            </p>
+          </div>
+          <div class="col s2 m2 l2 xl2" id="corpus-analysis-concordance-condition-container">
+            <a class="btn-small tooltipped waves-effect waves-light disabled positional-attr-options-action-button" data-options-action="or" data-toggle-area="or" data-position="bottom" data-tooltip="You can add another condition to your token. <br>At least one must be fulfilled">or</a>
+            <a class="btn-small tooltipped waves-effect waves-light disabled positional-attr-options-action-button" data-options-action="and" data-toggle-area="and" data-position="bottom" data-tooltip="You can add another condition to your token. <br>Both must be fulfilled">and</a>
+          </div>
         </div>
       </div>
     </div>

requirements.txt

@@ -1,5 +1,5 @@
 apifairy
-cqi>=0.1.6
+cqi>=0.1.5
 dnspython==2.2.1
 docker
 eventlet