Merge branch 'query-builder' of gitlab.ub.uni-bielefeld.de:sfb1288inf/nopaque into query-builder

app/static/js/CorpusAnalysis/QueryBuilder.js

-class ConcordanceQueryBuilder {
-
-  constructor() {
-    
-    this.elements = new ElementReferencesQueryBuilder();
-    this.generalFunctions = new GeneralFunctionsQueryBuilder(this.elements);
-    this.tokenAttributeBuilderFunctions = new TokenAttributeBuilderFunctionsQueryBuilder(this.elements);
-    this.structuralAttributeBuilderFunctions = new StructuralAttributeBuilderFunctionsQueryBuilder(this.elements);
-
-    // Eventlisteners for the incidence modifiers. There are two different types of incidence modifiers: token and character incidence modifiers.
-    document.querySelectorAll('.incidence-modifier-selection').forEach(button => {
-      let dropdownId = button.parentNode.parentNode.id;
-      if (dropdownId === 'corpus-analysis-concordance-token-incidence-modifiers-dropdown') {
-        button.addEventListener('click', () => this.generalFunctions.tokenIncidenceModifierHandler(button.dataset.token, button.innerHTML));
-      } else if (dropdownId === 'corpus-analysis-concordance-character-incidence-modifiers-dropdown') {
-        button.addEventListener('click', () => this.tokenAttributeBuilderFunctions.characterIncidenceModifierHandler(button));
-      }
-    });
-    
-    // Eventlisteners for the submit of n- and m-values of the incidence modifier modal for "exactly n" or "between n and m".
-    document.querySelectorAll('.n-m-submit-button').forEach(button => {
-      let modalId = button.dataset.modalId;
-      if (modalId === 'corpus-analysis-concordance-exactly-n-token-modal' || modalId === 'corpus-analysis-concordance-between-nm-token-modal') {
-        button.addEventListener('click', () => this.generalFunctions.tokenNMSubmitHandler(modalId));
-      } else if (modalId === 'corpus-analysis-concordance-exactly-n-character-modal' || modalId === 'corpus-analysis-concordance-between-nm-character-modal') {
-        button.addEventListener('click', () => this.tokenAttributeBuilderFunctions.characterNMSubmitHandler(modalId));
-      }
-    });
-
-    document.querySelector('#corpus-analysis-concordance-text-annotation-submit').addEventListener('click', () => this.structuralAttributeBuilderFunctions.textAnnotationSubmitHandler());
-
-    this.elements.positionalAttrModal = M.Modal.init(
-      document.querySelector('#corpus-analysis-concordance-positional-attr-modal'), 
-      {
-        onOpenStart: () => {
-          this.tokenAttributeBuilderFunctions.preparePositionalAttrModal();
-        },
-        onCloseStart: () => {
-          this.tokenAttributeBuilderFunctions.resetPositionalAttrModal();
-        }
-      }
-    );
-    this.elements.structuralAttrModal = M.Modal.init(
-      document.querySelector('#corpus-analysis-concordance-structural-attr-modal'), 
-      {
-        onCloseStart: () => {
-          this.structuralAttributeBuilderFunctions.resetStructuralAttrModal();
-        }
-      }
-    );
-  }
-}

app/static/js/CorpusAnalysis/query-builder/index.js

+class ConcordanceQueryBuilder {
+
+  constructor() {
+    this.elements = new ElementReferencesQueryBuilder();
+    this.generalFunctions = new GeneralQueryBuilderFunctions(this.elements);
+    this.tokenAttributeBuilderFunctions = new TokenAttributeBuilderFunctions(this.elements);
+    this.structuralAttributeBuilderFunctions = new StructuralAttributeBuilderFunctions(this.elements);
+
+    this.incidenceModifierEventListeners();
+    this.nAndMInputSubmitEventListeners();
+
+    let queryBuilderDisplay = document.querySelector("#corpus-analysis-concordance-query-builder-display");
+    let expertModeDisplay = document.querySelector("#corpus-analysis-concordance-expert-mode-display");
+    let expertModeSwitch = document.querySelector("#corpus-analysis-concordance-expert-mode-switch");
+    
+    expertModeSwitch.addEventListener("change", () => {
+      const isChecked = expertModeSwitch.checked;
+      if (isChecked) {
+        queryBuilderDisplay.classList.add("hide");
+        expertModeDisplay.classList.remove("hide");
+        this.switchToExpertModeParser();
+      } else {
+        queryBuilderDisplay.classList.remove("hide");
+        expertModeDisplay.classList.add("hide");
+        this.switchToQueryBuilderParser();
+      }
+    });
+    
+  }
+
+  incidenceModifierEventListeners() {
+    // Eventlisteners for the incidence modifiers. There are two different types of incidence modifiers: token and character incidence modifiers.
+    document.querySelectorAll('.incidence-modifier-selection').forEach(button => {
+      let dropdownId = button.parentNode.parentNode.id;
+      if (dropdownId === 'corpus-analysis-concordance-token-incidence-modifiers-dropdown') {
+        button.addEventListener('click', () => this.generalFunctions.tokenIncidenceModifierHandler(button.dataset.token, button.innerHTML));
+      } else if (dropdownId === 'corpus-analysis-concordance-character-incidence-modifiers-dropdown') {
+        button.addEventListener('click', () => this.tokenAttributeBuilderFunctions.characterIncidenceModifierHandler(button));
+      }
+    });
+  }
+
+  nAndMInputSubmitEventListeners() {
+    // Eventlisteners for the submit of n- and m-values of the incidence modifier modal for "exactly n" or "between n and m".
+    document.querySelectorAll('.n-m-submit-button').forEach(button => {
+      let modalId = button.dataset.modalId;
+      if (modalId === 'corpus-analysis-concordance-exactly-n-token-modal' || modalId === 'corpus-analysis-concordance-between-nm-token-modal') {
+        button.addEventListener('click', () => this.generalFunctions.tokenNMSubmitHandler(modalId));
+      } else if (modalId === 'corpus-analysis-concordance-exactly-n-character-modal' || modalId === 'corpus-analysis-concordance-between-nm-character-modal') {
+        button.addEventListener('click', () => this.tokenAttributeBuilderFunctions.characterNMSubmitHandler(modalId));
+      }
+    });
+  }
+
+  switchToExpertModeParser() {
+    let expertModeInputField = document.querySelector('#corpus-analysis-concordance-form-query');
+    expertModeInputField.value = '';
+    let queryBuilderInputFieldValue = Utils.unescape(document.querySelector('#corpus-analysis-concordance-query-preview').innerHTML.trim());
+    if (queryBuilderInputFieldValue !== "" && queryBuilderInputFieldValue !== ";") {
+      expertModeInputField.value = queryBuilderInputFieldValue;
+    }
+  }
+
+  switchToQueryBuilderParser() {
+    this.generalFunctions.resetQueryInputField();
+    let expertModeInputFieldValue = document.querySelector('#corpus-analysis-concordance-form-query').value;
+    let chipElements = this.parseTextToChip(expertModeInputFieldValue);
+    let closingTagElements = ['end-sentence', 'end-entity'];
+    let editableElements = ['start-entity', 'text-annotation', 'token'];
+    for (let chipElement of chipElements) {
+      let isClosingTag = closingTagElements.includes(chipElement['type']);
+      let isEditable = editableElements.includes(chipElement['type']);
+      if (chipElement['query'] === '[]'){
+        isEditable = false;
+      }
+      this.generalFunctions.submitQueryChipElement(chipElement['type'], chipElement['pretty'], chipElement['query'], null, isClosingTag, isEditable);
+    }
+  }
+
+  parseTextToChip(query) {
+    const parsingElementDict = {
+      '<s>': {
+        pretty: 'Sentence Start',
+        type: 'start-sentence'
+      },
+      '<\/s>': {
+        pretty: 'Sentence End',
+        type: 'end-sentence'
+      },
+      '<ent>': {
+        pretty: 'Entity Start',
+        type: 'start-empty-entity'
+      },
+      '<ent_type="([A-Z]+)">': {
+        pretty: '',
+        type: 'start-entity'
+      },
+      '<\\\/ent(_type)?>': {
+        pretty: 'Entity End',
+        type: 'end-entity'
+      },
+      ':: ?match\\.text_[A-Za-z]+="[^"]+"': {
+        pretty: '',
+        type: 'text-annotation'
+      },
+      '\\[(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?((\\&|\\|) ?(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?)*\\]': {
+        pretty: '',
+        type: 'token'
+      },
+      '\\[\\]': {
+        pretty: 'Empty Token',
+        type: 'token'
+      },
+      '(?<!\\[) ?\\+ ?(?![^\\]]\\])': {
+        pretty: ' one or more (+)',
+        type: 'token-incidence-modifier'
+      },
+      '(?<!\\[) ?\\* ?(?![^\\]]\\])': {
+        pretty: 'zero or more (*)',
+        type: 'token-incidence-modifier'
+      },
+      '(?<!\\[) ?\\? ?(?![^\\]]\\])': {
+        pretty: 'zero or one (?)',
+        type: 'token-incidence-modifier'
+      },
+      '(?<!\\[) ?\\{[0-9]+} ?(?![^\\]]\\])': {
+        pretty: '',
+        type: 'token-incidence-modifier'
+      },
+      '(?<!\\[) ?\\{[0-9]+(,[0-9]+)?} ?(?![^\\]]\\])': {
+        pretty: '',
+        type: 'token-incidence-modifier'
+      }
+    }
+  
+    let chipElements = [];
+    let regexPattern = Object.keys(parsingElementDict).map(pattern => `(${pattern})`).join('|');
+    const regex = new RegExp(regexPattern, 'gi');
+    let match;
+  
+    while ((match = regex.exec(query)) !== null) {
+      // this is necessary to avoid infinite loops with zero-width matches
+      if (match.index === regex.lastIndex) {
+        regex.lastIndex++;
+      }
+      let stringElement = match[0];
+      for (let [pattern, chipElement] of Object.entries(parsingElementDict)) {
+        const parsingRegex = new RegExp(pattern, 'gi');
+        if (parsingRegex.exec(stringElement)) {
+          // Creating the pretty text for the chip element
+          let prettyText;
+          switch (pattern) {
+            case '<ent_type="([A-Z]+)">':
+              prettyText = `Entity Type=${stringElement.replace(/<ent_type="|">/g, '')}`;
+              break;
+            case ':: ?match\\.text_[A-Za-z]+="[^"]+"':
+              prettyText = stringElement.replace(/:: ?match\.text_|"|"/g, '');
+              break;
+            case '\\[(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?((\\&|\\|) ?(word|lemma|pos|simple_pos)=(("[^"]+")|(\\u0027[^\\u0027]+\\u0027)) ?(%c)? ?)*\\]':
+              let doubleQuotes = /(word|lemma|pos|simple_pos)="[^"]+"/gi;
+              let singleQuotes = /(word|lemma|pos|simple_pos)='[^']+'/gi;
+              if (doubleQuotes.exec(stringElement)) {
+                prettyText = stringElement.replace(/^\[|\]$|"/g, '');
+              } else if (singleQuotes.exec(stringElement)) {
+                prettyText = stringElement.replace(/^\[|\]$|'/g, '');
+              }
+              prettyText = prettyText.replace(/\&/g, ' and ').replace(/\|/g, ' or ');
+              break;
+            case '(?<!\\[) ?\\{[0-9]+} ?(?![^\\]]\\])':
+              prettyText = `exactly ${stringElement.replace(/{|}/g, '')} (${stringElement})`;
+              break;
+            case '(?<!\\[) ?\\{[0-9]+(,[0-9]+)?} ?(?![^\\]]\\])':
+              prettyText = `between${stringElement.replace(/{|}/g, ' ').replace(',', ' and ')}(${stringElement})`;
+              break;
+            default:
+              prettyText = chipElement.pretty;
+              break;
+          }
+          chipElements.push({
+            type: chipElement.type,
+            pretty: prettyText,
+            query: stringElement
+          });
+          break;
+        }
+      }
+    }
+  
+    return chipElements;
+  }
+  
+}

app/static/js/CorpusAnalysis/QueryBuilder/StructuralAttributeBuilderFunctionsQueryBuilder.js → app/static/js/CorpusAnalysis/query-builder/structural-attribute-builder-functions.js

-class StructuralAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBuilder {
+class StructuralAttributeBuilderFunctions extends GeneralQueryBuilderFunctions {
   constructor(elements) {
     super(elements);
-    this.elements = elements;
 
+    this.structuralAttrModalEventlisteners();
+
+    document.querySelector('#corpus-analysis-concordance-text-annotation-submit').addEventListener('click', () => this.textAnnotationSubmitHandler());
+
+    this.elements.structuralAttrModal = M.Modal.init(
+      document.querySelector('#corpus-analysis-concordance-structural-attr-modal'), 
+      {
+        onCloseStart: () => {
+          this.resetStructuralAttrModal();
+        }
+      }
+    );
+  }
+
+  structuralAttrModalEventlisteners() {
     document.querySelectorAll('[data-structural-attr-modal-action-button]').forEach(button => {
       button.addEventListener('click', () => {
         this.actionButtonInStrucAttrModalHandler(button.dataset.structuralAttrModalActionButton);
@@ -35,16 +49,11 @@ class StructuralAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQu
     this.elements.textAnnotationInput.value = '';
 
     this.toggleClass(['entity-builder', 'text-annotation-builder'], 'hide', 'add');
-    this.toggleEditingAreaStructureAttrModal('remove');
+    this.toggleEditingAreaStructuralAttrModal('remove');
     this.elements.editingModusOn = false;
     this.elements.editedQueryChipElementIndex = undefined;
   }
 
-  toggleEditingAreaStructureAttrModal(action) {
-    // If the user edits a query chip element, the corresponding editing area is displayed and the other areas are hidden or disabled.
-    this.toggleClass(['sentence-button', 'entity-button', 'text-annotation-button', 'any-type-entity-button'], 'disabled', action);
-  }
-
   actionButtonInStrucAttrModalHandler(action) {
     switch (action) {
       case 'sentence':

app/static/js/CorpusAnalysis/QueryBuilder/TokenAttributeBuilderFunctionsQueryBuilder.js → app/static/js/CorpusAnalysis/query-builder/token-attribute-builder-functions.js

-class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBuilder {
+class TokenAttributeBuilderFunctions extends GeneralQueryBuilderFunctions {
   constructor(elements) {
     super(elements);
-    this.elements = elements;
 
     this.elements.positionalAttrSelection.addEventListener('change', () => {
       this.preparePositionalAttrModal();
@@ -13,6 +12,18 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
     });
 
     this.elements.tokenSubmitButton.addEventListener('click', () => {this.addTokenToQuery();});
+
+    this.elements.positionalAttrModal = M.Modal.init(
+      document.querySelector('#corpus-analysis-concordance-positional-attr-modal'), 
+      {
+        onOpenStart: () => {
+          this.preparePositionalAttrModal();
+        },
+        onCloseStart: () => {
+          this.resetPositionalAttrModal();
+        }
+      }
+    );
   }
 
   resetPositionalAttrModal() {
@@ -35,100 +46,6 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
     this.elements.editingModusOn = false;
     this.elements.editedQueryChipElementIndex = undefined;
   }
-  
-  preparePositionalAttrModal() {
-    let selection = this.elements.positionalAttrSelection.value;
-    if (selection !== 'empty-token') {
-      let selectionTemplate = document.querySelector(`.token-builder-section[data-token-builder-section="${selection}"]`);
-      let selectionTemplateClone = selectionTemplate.content.cloneNode(true);
-    
-      this.elements.tokenBuilderContent.innerHTML = '';
-      this.elements.tokenBuilderContent.appendChild(selectionTemplateClone);
-      if (this.elements.tokenBuilderContent.querySelector('select') !== null) {
-        let selectElement = this.elements.tokenBuilderContent.querySelector('select');
-        M.FormSelect.init(selectElement);
-        selectElement.addEventListener('change', () => {this.optionToggleHandler();});
-      } else {
-        this.elements.tokenBuilderContent.querySelector('input').addEventListener('input', () => {this.optionToggleHandler();});
-      }
-    }
-    this.optionToggleHandler();
-
-    if (selection === 'word' || selection === 'lemma') {
-      this.toggleClass(['input-field-options'], 'hide', 'remove');
-    } else if (selection === 'empty-token'){
-      this.addTokenToQuery();
-    } else {
-      this.toggleClass(['input-field-options'], 'hide', 'add');
-    }
-  }
-
-  tokenInputCheck(elem) {
-    return elem.querySelector('select') !== null ? elem.querySelector('select') : elem.querySelector('input');
-  }
-
-  optionToggleHandler() {
-    let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
-    if (input.value === '' && this.elements.editingModusOn === false) {
-      this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'add');
-    } else if (this.elements.positionalAttrSelection.querySelectorAll('option').length === 1) {
-      this.toggleClass(['and'], 'disabled', 'add');
-    } else {
-      this.toggleClass(['incidence-modifiers', 'or', 'and'], 'disabled', 'remove');
-    }
-  }
-
-  disableTokenSubmit() {
-    this.elements.tokenSubmitButton.classList.add('red');
-    this.elements.noValueMessage.classList.remove('hide');
-    setTimeout(() => {
-      this.elements.tokenSubmitButton.classList.remove('red');
-    }, 500);
-    setTimeout(() => {
-      this.elements.noValueMessage.classList.add('hide');
-    }, 3000);
-  }
-
-  addTokenToQuery() {
-    let tokenQueryPrettyText = '';
-    let tokenQueryCQLText = '';
-    let input;
-    let kindOfToken = this.kindOfTokenCheck(this.elements.positionalAttrSelection.value);
-    
-    // Takes all rows of the token query (if there is a query concatenation).
-    // Adds their contents to tokenQueryPrettyText and tokenQueryCQLText, which will later be expanded with the current input field.
-    let tokenQueryRows = this.elements.tokenQuery.querySelectorAll('.row');
-    tokenQueryRows.forEach(row => {
-      let ignoreCaseCheckbox = row.querySelector('input[type="checkbox"]');
-      let c = ignoreCaseCheckbox !== null && ignoreCaseCheckbox.checked ? ' %c' : '';
-      let tokenQueryRowInput = this.tokenInputCheck(row.querySelector('.token-query-template-content'));
-      let tokenQueryKindOfToken = this.kindOfTokenCheck(tokenQueryRowInput.closest('.input-field').dataset.kindOfToken);
-      let tokenConditionPrettyText = row.querySelector('[data-condition-pretty-text]').dataset.conditionPrettyText;
-      let tokenConditionCQLText = row.querySelector('[data-condition-cql-text]').dataset.conditionCqlText;
-      tokenQueryPrettyText += `${tokenQueryKindOfToken}=${tokenQueryRowInput.value}${c} ${tokenConditionPrettyText} `;
-      tokenQueryCQLText += `${tokenQueryKindOfToken}="${tokenQueryRowInput.value}"${c} ${tokenConditionCQLText}`;
-    });
-    if (kindOfToken === 'empty-token') {
-      tokenQueryPrettyText += 'empty token';
-    } else {
-      let c = this.elements.ignoreCaseCheckbox.checked ? ' %c' : '';
-      input = this.tokenInputCheck(this.elements.tokenBuilderContent);
-      tokenQueryPrettyText += `${kindOfToken}=${input.value}${c}`;
-      tokenQueryCQLText += `${kindOfToken}="${input.value}"${c}`;
-    }
-    // isTokenQueryInvalid looks if a valid value is passed. If the input fields/dropdowns are empty (isTokenQueryInvalid === true), no token is added.
-    if (this.elements.positionalAttrSelection.value !== 'empty-token' && input.value === '') {
-      this.disableTokenSubmit();
-    } else {
-      tokenQueryCQLText = `[${tokenQueryCQLText}]`;
-      this.submitQueryChipElement('token', tokenQueryPrettyText, tokenQueryCQLText, null, false, kindOfToken === 'empty-token' ? false : true);
-      this.elements.positionalAttrModal.close();
-    }
-  }
-
-  kindOfTokenCheck(kindOfToken) {
-    return kindOfToken === 'english-pos' || kindOfToken === 'german-pos' ? 'pos' : kindOfToken;
-  }
 
   actionButtonInOptionSectionHandler(elem) {
     let input = this.tokenInputCheck(this.elements.tokenBuilderContent);
@@ -173,7 +90,7 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
     tokenInput.value += '{' + input + '}';
   }
 
-  conditionHandler(conditionText, editMode = false) {
+  conditionHandler(conditionText) {
     let tokenQueryTemplateClone = this.elements.tokenQueryTemplate.content.cloneNode(true);
     tokenQueryTemplateClone.querySelector('.token-query-template-content').appendChild(this.elements.tokenBuilderContent.firstElementChild);
     let notSelectedButton = tokenQueryTemplateClone.querySelector(`[data-condition-pretty-text]:not([data-condition-pretty-text="${conditionText}"])`);
@@ -261,4 +178,5 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
     this.resetMaterializeSelection([this.elements.positionalAttrSelection], selection);
     this.preparePositionalAttrModal();
   }
+
 }

app/templates/_scripts.html.j2

@@ -95,13 +95,13 @@
 {%- assets
   filters='rjsmin',
   output='gen/CorpusAnalysis.%(version)s.js',
-  'js/CorpusAnalysis/QueryBuilder/ElementReferencesQueryBuilder.js',
-  'js/CorpusAnalysis/QueryBuilder/GeneralFunctionsQueryBuilder.js',
-  'js/CorpusAnalysis/QueryBuilder/StructuralAttributeBuilderFunctionsQueryBuilder.js',
-  'js/CorpusAnalysis/QueryBuilder/TokenAttributeBuilderFunctionsQueryBuilder.js',
+  'js/CorpusAnalysis/query-builder/index.js',
+  'js/CorpusAnalysis/query-builder/element-references.js',
+  'js/CorpusAnalysis/query-builder/general-query-builder-functions.js',
+  'js/CorpusAnalysis/query-builder/structural-attribute-builder-functions.js',
+  'js/CorpusAnalysis/query-builder/token-attribute-builder-functions.js',
   'js/CorpusAnalysis/CorpusAnalysisApp.js',
   'js/CorpusAnalysis/CorpusAnalysisConcordance.js',
-  'js/CorpusAnalysis/QueryBuilder.js',
   'js/CorpusAnalysis/CorpusAnalysisReader.js',
   'js/CorpusAnalysis/CorpusAnalysisStaticVisualization.js'
 %}

app/templates/corpora/_analysis/concordance.html.j2

@@ -130,21 +130,5 @@
 <script>
   const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
   const concordanceQueryBuilder = new ConcordanceQueryBuilder();
-
-  let queryBuilderDisplay = document.getElementById("corpus-analysis-concordance-query-builder-display");
-  let expertModeDisplay = document.getElementById("corpus-analysis-concordance-expert-mode-display");
-  let expertModeSwitch = document.getElementById("corpus-analysis-concordance-expert-mode-switch");
-
-  expertModeSwitch.addEventListener("change", function() {
-    if (this.checked) {
-      queryBuilderDisplay.classList.add("hide");
-      expertModeDisplay.classList.remove("hide");
-      concordanceQueryBuilder.generalFunctions.switchToExpertModeParser();
-    } else {
-      queryBuilderDisplay.classList.remove("hide");
-      expertModeDisplay.classList.add("hide");
-      concordanceQueryBuilder.generalFunctions.switchToQueryBuilderParser();
-    }
-  });
 </script>
 {% endmacro %}