QB form update + incidence modifier

app/static/css/queryBuilder.css

@@ -1,3 +1,12 @@
+#corpus-analysis-concordance-query-builder-input-field-container {
+  border-bottom: #9E9E9E 1px solid;
+  height: 60px;
+}
+
+#corpus-analysis-concordance-query-builder-input-field {
+  margin-top: 23px;
+}
+
 .modal-content {
   overflow-x: hidden;
 }
@@ -79,40 +88,20 @@
   margin-right: 10px;
 }
 
-#corpus-analysis-concordance-ignore-case-checkbox {
+[data-target="corpus-analysis-concordance-character-incidence-modifiers-dropdown"], [data-target="corpus-analysis-concordance-token-incidence-modifiers-dropdown"] {
-  margin-left: 5px;
+  background-color: #2FBBAB !important;
 }
 
-#corpus-analysis-concordance-incidence-modifiers-dropdown a{
+#corpus-analysis-concordance-exactly-n-token-modal, #corpus-analysis-concordance-between-nm-token-modal {
-  background-color: white;
+  width: 30%;
 }
 
-[data-target="corpus-analysis-concordance-incidence-modifiers-dropdown"] {
+[data-modal-id="corpus-analysis-concordance-exactly-n-token-modal"], [data-modal-id="corpus-analysis-concordance-between-nm-token-modal"] {
-  background-color: #2FBBAB;
+  margin-top: 15px !important;
 }
 
-#corpus-analysis-concordance-or, #corpus-analysis-concordance-and {
+[data-options-action="and"], [data-options-action="or"] {
-  background-color: #fc0;
+  background-color: #fc0 !important;
-}
-
-#corpus-analysis-concordance-betweenNM {
-  width: 60%;
-}
-
-#corpus-analysis-concordance-query-builder-tutorial-modal {
-  width: 60%;
-}
-
-#corpus-analysis-concordance-query-builder-tutorial-modal ul {
-  margin-top: 10px;
-}
-
-#corpus-analysis-concordance-query-builder-tutorial {
-  padding:15px;
-}
-
-#corpus-analysis-concordance-scroll-up-button-query-builder-tutorial {
-  background-color: #28B3D1;
 }
 
 [data-type="start-sentence"], [data-type="end-sentence"] {

app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js

@@ -10,7 +10,8 @@ class CorpusAnalysisConcordance {
       container: document.querySelector(`#corpus-analysis-concordance-container`),
       error: document.querySelector(`#corpus-analysis-concordance-error`),
       userInterfaceForm: document.querySelector(`#corpus-analysis-concordance-user-interface-form`),
-      form: document.querySelector(`#corpus-analysis-concordance-form`),
+      expertModeForm: document.querySelector(`#corpus-analysis-concordance-expert-mode-form`),
+      queryBuilderForm: document.querySelector(`#corpus-analysis-concordance-query-builder-form`),
       progress: document.querySelector(`#corpus-analysis-concordance-progress`),
       subcorpusInfo: document.querySelector(`#corpus-analysis-concordance-subcorpus-info`),
       subcorpusActions: document.querySelector(`#corpus-analysis-concordance-subcorpus-actions`),
@@ -30,12 +31,14 @@ class CorpusAnalysisConcordance {
     this.app.registerExtension(this);
   }
 
-  async submitForm() {
+  async submitForm(queryModeId) {
     this.app.disableActionElements();
-    // let query = this.elements.form.query.value.trim();
+    let queryBuilderQuery = document.querySelector('#corpus-analysis-concordance-query-preview').innerHTML.trim();
-    let query = this.checkQueryInput();
+    let expertModeQuery = this.elements.expertModeForm.query.value.trim();
-    console.log(query);
+    let query = queryModeId === 'corpus-analysis-concordance-expert-mode-form' ? expertModeQuery : queryBuilderQuery;
-    let subcorpusName = this.elements.form['subcorpus-name'].value;
+    let form = queryModeId === 'corpus-analysis-concordance-expert-mode-form' ? this.elements.expertModeForm : this.elements.queryBuilderForm;
+
+    let subcorpusName = form['subcorpus-name'].value;
     this.elements.error.innerText = '';
     this.elements.error.classList.add('hide');
     this.elements.progress.classList.remove('hide');
@@ -74,9 +77,13 @@ class CorpusAnalysisConcordance {
     this.data.corpus = this.app.data.corpus;
     this.data.subcorpora = {};
     // Add event listeners
-    this.elements.form.addEventListener('submit', (event) => {
+    this.elements.expertModeForm.addEventListener('submit', (event) => {
       event.preventDefault();
-      this.submitForm();
+      this.submitForm(this.elements.expertModeForm.id);
+    });
+    this.elements.queryBuilderForm.addEventListener('submit', (event) => {
+      event.preventDefault();
+      this.submitForm(this.elements.queryBuilderForm.id);
     });
     this.elements.userInterfaceForm.addEventListener('change', (event) => {
       if (event.target === this.elements.userInterfaceForm['context']) {
@@ -98,14 +105,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

@@ -7,51 +7,6 @@ class ConcordanceQueryBuilder {
     this.tokenAttributeBuilderFunctions = new TokenAttributeBuilderFunctionsQueryBuilder(this.elements);
     this.structuralAttributeBuilderFunctions = 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);
-      });
-    });
-
-    // 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);});
-    });
-    document.querySelectorAll('.incidence-modifier-selection[data-incidence-modifier]').forEach(button => {
-      button.addEventListener('click', () => {this.tokenAttributeBuilderFunctions.incidenceModifierHandler(button);});
-    });
-    document.querySelectorAll('.n-m-submit-button').forEach(button => {
-      button.addEventListener('click', () => {
-        this.tokenAttributeBuilderFunctions.nmSubmitHandler(button.dataset.modalId);
-      });
-    });
-
-    // Initializing and styling the Materialize Chip components
-    M.Chips.init(
-      this.elements.queryInputField, 
-      {
-        placeholder: 'Add your query here'
-      }
-    );
-    document.querySelector('#corpus-analysis-concordance-form-query-builder input').style.setProperty('width', '150px', 'important');
-
     this.elements.positionalAttrModal = M.Modal.init(
       document.querySelector('#corpus-analysis-concordance-positional-attr-modal'), 
       {

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-query-builder-input-field');
-    this.queryInputField = document.querySelector('#corpus-analysis-concordance-form-query-builder');
+    this.queryChipElements = [];
-    this.queryInputFieldInstance = M.Chips.getInstance(this.queryInputField);
-    this.queryInputFieldContent = [];
 
     // 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++;
+    queryText = Utils.escape(queryText);
-    this.elements.queryInputFieldInstance.addChip({
+    prettyQueryText = Utils.escape(prettyQueryText);
-      tag: 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;
+    queryChipElement.addEventListener('click', () => this.selectChipElement(queryChipElement));
-    let queryChipElement = this.elements.queryInputFieldInstance.$chips[queryChipElementIndex];
+    queryChipElement.querySelector('i').addEventListener('click', () => this.deleteChipElement(queryChipElement));
-    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('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));
+    let queryInputFieldContent = [];
-    if (!isNaN(queryChipElements[queryChipElements.length - 1])) {
+    this.elements.queryChipElements.forEach(element => {
-      queryChipElements.pop();
-    }
-    this.elements.queryInputFieldContent = [];
-    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));
+    this.elements.queryInputField.removeChild(attr);
-    queryChipElements.pop();
+    this.updateChipList();
-    this.elements.counter -= 1;
-    this.elements.queryInputFieldInstance.deleteChip(queryChipElements.indexOf(attr));
     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);

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

@@ -1,6 +1,6 @@
 {% macro card_content(id_prefix) %}
 <div class="row">
-  <form id="corpus-analysis-concordance-form">
+  <form id="corpus-analysis-concordance-expert-mode-form">
     <div class="input-field col s12 m9">
       <i class="material-icons prefix">search</i>
       <input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-query" name="query" type="text" required pattern=".*\S+.*" placeholder="Type in your query or use the Query Builder on the right"></input>

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

@@ -1,8 +1,8 @@
 {% macro card_content(id_prefix) %}
-<form id="corpus-analysis-concordance-form">
+<form id="corpus-analysis-concordance-query-builder-form">
   <div class="row">
-    <div class="col s9">
+    <div class="col s9" id="corpus-analysis-concordance-query-builder-input-field-container">
-      <div class="chips" id="corpus-analysis-concordance-form-query-builder"></div>
+      <div id="corpus-analysis-concordance-query-builder-input-field"></div>
     </div>
     <div class="input-field col s3">
       <i class="material-icons prefix">arrow_forward</i>
@@ -30,6 +30,7 @@
       <p></p>
       <a class="btn waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-positional-attr-modal" data-position="bottom" data-tooltip="Search for any token, for example a word, a lemma or a part-of-speech tag">Add new token to your query</a>
       <a class="btn waves-effect waves-light tooltipped modal-trigger" href="#corpus-analysis-concordance-structural-attr-modal" data-position="bottom" data-tooltip="Structure your query with structural attributes, for example sentences, entities or annotate the text">Add structural attributes to your query</a>
+      <a class="btn waves-effect waves-light tooltipped dropdown-trigger disabled" data-target="corpus-analysis-concordance-token-incidence-modifiers-dropdown" data-toggle-area="token-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>
   </div>
   <div class="row">
@@ -42,6 +43,14 @@
     </div>
   </div>
 </form>
+
+<ul id="corpus-analysis-concordance-token-incidence-modifiers-dropdown" class="dropdown-content">
+  {{ incidence_modifiers_dropdown_content("token") }}
+</ul>
+
+{{ exactly_n_modal_content("token") }}
+{{ exactly_nm_modal_content("token") }}
+
 {% endmacro %}
 
 {% macro structural_attribute_modal(id_prefix) %}
@@ -63,10 +72,10 @@
       <p></p>
       <br>
       <div class="row">
-        <a class="btn waves-effect waves-light col s4" id="corpus-analysis-concordance-empty-entity">Add Entity of any type</a>
+        <a class="btn waves-effect waves-light col ent-type-selection-action" data-ent-type="any">Add Entity of any type</a>
         <p class="col s1 l1"></p>
         <div class= "input-field col s3">
-            <select name="englishenttype" id="corpus-analysis-concordance-english-ent-type">
+            <select name="englishenttype" class="ent-type-selection-action" data-ent-type="english">
               <option value="" disabled selected>English ent_type</option>
               <option value="CARDINAL">CARDINAL</option>
               <option value="DATE">DATE</option>
@@ -90,7 +99,7 @@
             <label>Entity Type</label>
         </div>
         <div class= "input-field col s3">
-            <select name="germanenttype" id="corpus-analysis-concordance-german-ent-type">
+            <select name="germanenttype" class="ent-type-selection-action" data-ent-type="german">
               <option value="" disabled selected>German ent_type</option>
               <option value="LOC">LOC</option>
               <option value="MISC">MISC</option>
@@ -347,10 +356,10 @@
         </div>
         <p></p>
         <div class="row">
-          <div class="col s6" data-toggle-area="input-field-options">
+          <div class="col s8" 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>
+            <a class="dropdown-trigger btn-small waves-effect waves-light disabled" href="#" data-target="corpus-analysis-concordance-character-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"/>
@@ -363,47 +372,61 @@
             <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>
 
-          <ul id="corpus-analysis-concordance-incidence-modifiers-dropdown" class="dropdown-content">
+          <ul id="corpus-analysis-concordance-character-incidence-modifiers-dropdown" class="dropdown-content">
-            <li><a class="tooltipped incidence-modifier-selection" data-token="+" data-incidence-modifier="one-or-more" data-position ="top" data-tooltip="...occurrences of the character/token before">one or more (+)</a></li>
+            {{ incidence_modifiers_dropdown_content("character") }}
-            <li><a class="tooltipped incidence-modifier-selection" data-token="*" data-incidence-modifier="zero-or-more" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or more (*)</a></li>
-            <li><a class="tooltipped incidence-modifier-selection" data-token="?" data-incidence-modifier="zero-or-one" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or one (?)</a></li>
-            <li><a class="modal-trigger tooltipped" href="#corpus-analysis-concordance-exactly-n-modal" data-position ="top" data-tooltip="...occurrences of the character/token before">exactly n ({n})</a></li>
-            <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>
       </div>
     </div>
-    <div id="corpus-analysis-concordance-exactly-n-modal" class="modal">
-      <div class="row modal-content">
-        <div class="input-field col s10">
-          <i class="material-icons prefix">mode_edit</i>
-          <input class="n-m-input" placeholder="type in a number for 'n'" type="text" data-value-type="n">
-        </div>
-        <div class="col s2">
-          <p class="btn-floating waves-effect waves-light n-m-submit-button" data-modal-id="corpus-analysis-concordance-exactly-n-modal">
-            <i class="material-icons right">send</i>
-          </p>
-        </div>
-      </div>
-    </div>
     
-    <div id="corpus-analysis-concordance-between-nm-modal" class="modal">
+    {{ exactly_n_modal_content("character") }}
-      <div class="row modal-content">
+    {{ exactly_nm_modal_content("character") }}
-        <div class="input-field col s5">
+      
-            <i class="material-icons prefix">mode_edit</i>
+    </div>
-            <input class="n-m-input" placeholder="number for 'n'" type="text" data-value-type="n">
+  </div>
-        </div>
+</div>
-        <div class="input-field col s5">
+{% endmacro %}
-            <i class="material-icons prefix">mode_edit</i>
+
-            <input class="n-m-input" placeholder="number for 'm'" type="text" data-value-type="m">
+{% macro incidence_modifiers_dropdown_content(type) %}
-        </div>
+<li><a class="incidence-modifier-selection" data-token="+" data-incidence-modifier="one-or-more">one or more (+)</a></li>
-        <div class="col s2">
+<li><a class="incidence-modifier-selection" data-token="*" data-incidence-modifier="zero-or-more">zero or more (*)</a></li>
-          <p class="btn-floating waves-effect waves-light n-m-submit-button" data-modal-id="corpus-analysis-concordance-between-nm-modal">
+<li><a class="incidence-modifier-selection" data-token="?" data-incidence-modifier="zero-or-one">zero or one (?)</a></li>
-            <i class="material-icons right">send</i>
+<li><a class="modal-trigger" href="#corpus-analysis-concordance-exactly-n-{{ type }}-modal">exactly n ({n})</a></li>
-          </p>
+<li><a class="modal-trigger" href="#corpus-analysis-concordance-between-nm-{{ type }}-modal">between n and m ({n,m})</a></li>
-        </div>
+{% endmacro %}
-      </div>
+
+{% macro exactly_n_modal_content(type) %}
+<div id="corpus-analysis-concordance-exactly-n-{{ type }}-modal" class="modal">
+  <div class="row modal-content">
+    <div class="input-field col s10">
+      <i class="material-icons prefix">mode_edit</i>
+      <input class="n-m-input" placeholder="type in a number for 'n'" type="text" data-value-type="n">
+    </div>
+    <div class="col s2">
+      <p class="btn-floating waves-effect waves-light n-m-submit-button" data-modal-id="corpus-analysis-concordance-exactly-n-{{ type }}-modal">
+        <i class="material-icons right">send</i>
+      </p>
+    </div>
+  </div>
+</div>
+{% endmacro %}
+
+{% macro exactly_nm_modal_content(type) %}
+<div id="corpus-analysis-concordance-between-nm-{{ type }}-modal" class="modal">
+  <div class="row modal-content">
+    <div class="input-field col s5">
+        <i class="material-icons prefix">mode_edit</i>
+        <input class="n-m-input" placeholder="number for 'n'" type="text" data-value-type="n">
+    </div>
+    <div class="input-field col s5">
+        <i class="material-icons prefix">mode_edit</i>
+        <input class="n-m-input" placeholder="number for 'm'" type="text" data-value-type="m">
+    </div>
+    <div class="col s2">
+      <p class="btn-floating waves-effect waves-light n-m-submit-button" data-modal-id="corpus-analysis-concordance-between-nm-{{ type }}-modal">
+        <i class="material-icons right">send</i>
+      </p>
     </div>
   </div>
 </div>