Query Builder implementation

app/static/js/CorpusAnalysis/QueryBuilder.js

@@ -12,6 +12,7 @@ class ConcordanceQueryBuilder {
       concordanceQueryBuilderButton: document.querySelector('#concordance-query-builder-button'),
       closeQueryBuilder: document.querySelector('#close-query-builder'),
       queryBuilderTutorialModal: document.querySelector('#query-builder-tutorial-modal'),
+      valueValidator: true,
 
       //#region QueryBuilder Elements
       
@@ -206,7 +207,6 @@ class ConcordanceQueryBuilder {
   }
 
   buttonfactory(dataType, prettyText, queryText) {
-
     window.location.href = '#query-container';
     this.elements.counter += 1;
     queryText = encodeURI(queryText);
@@ -226,7 +226,6 @@ class ConcordanceQueryBuilder {
     } else if (this.elements.yourQuery.lastChild.dataset.type === 'text-annotation') {
       this.elements.yourQuery.insertBefore(buttonElement, this.elements.yourQuery.lastChild);
     }
-
     this.elements.queryContainer.classList.remove('hide');
     this.queryPreviewBuilder();
 
@@ -252,25 +251,30 @@ class ConcordanceQueryBuilder {
 
     //#region	 Drag&Drop Events
   dragStartHandler(event) {
+    // Creates element with the class 'target' and all necessary drop functions, in which drop content can be released
     this.elements.dropButton = event.target;
     let targetChip = `
       <div class='chip target' ondragover='concordanceQueryBuilder.dragOverHandler(event)' ondragenter='concordanceQueryBuilder.dragEnterHandler(event)' ondragleave='concordanceQueryBuilder.dragLeaveHandler(event)' ondrop='concordanceQueryBuilder.dropHandler(event)'>
         Drop here
       </div>
     `.trim();
+    // selects all nodes without target class
     let childNodes = this.elements.yourQuery.querySelectorAll('div:not(.target)');
 
+    // Adds a target chip in front of all draggable childnodes
     setTimeout(() => {
       for (let element of childNodes) {
-        if (element === event.target) {
+        if (element === this.elements.dropButton) {
-          continue;
+          // If the dragged element is not at the very end, a target chip is also inserted at the end
-        } else if (element === event.target.nextSibling) {
+          if (childNodes[childNodes.length - 1] !== element) {
+            childNodes[childNodes.length - 1].insertAdjacentHTML('afterend', targetChip);
+          }
+        } else if (element === this.elements.dropButton.nextSibling) {
           continue;
         } else {
           element.insertAdjacentHTML('beforebegin', targetChip)
         }
       }
-      childNodes[childNodes.length-1].insertAdjacentHTML('afterend', targetChip);
     },0);
   }
 
@@ -297,18 +301,6 @@ class ConcordanceQueryBuilder {
 
   dropHandler(event) {
     let dropzone = event.target;
-
-    for (let i = 0; i < dropzone.parentElement.childNodes.length; i++) {
-      if (dropzone === dropzone.parentElement.childNodes[i]) {
-        nodeIndex = i;
-      }
-    }
-    for (let i = 0; i < dropzone.parentElement.childNodes.length; i++) {
-      if (this.elements.dropButton === dropzone.parentElement.childNodes[i]) {
-        draggedElementIndex = i;
-      }
-    }
-
     dropzone.parentElement.replaceChild(this.elements.dropButton, dropzone);
     this.queryPreviewBuilder();
   }
@@ -316,7 +308,6 @@ class ConcordanceQueryBuilder {
 
   queryPreviewBuilder() {
     this.elements.yourQueryContent = [];
-
     for (let element of this.elements.yourQuery.childNodes) {
       let queryElement = decodeURI(element.dataset.query);
       if (queryElement.includes('<')) {
@@ -349,7 +340,8 @@ class ConcordanceQueryBuilder {
 
   insertQuery() {
     this.elements.yourQueryContent = [];
-
+    this.validateValue();
+    if (this.elements.valueValidator === true) {
       for (let element of this.elements.yourQuery.childNodes) {
         let queryElement = decodeURI(element.dataset.query);
         if (queryElement !== 'undefined') {
@@ -363,6 +355,34 @@ class ConcordanceQueryBuilder {
       this.elements.concordanceQueryBuilder.classList.add('modal-close');
       this.elements.extFormQuery.value = queryString;
     }
+  }
+
+  validateValue() {
+    this.elements.valueValidator = true;
+    let sentenceCounter = 0;
+    let sentenceEndCounter = 0;
+    let entityCounter = 0;
+    let entityEndCounter = 0;
+    for (let element of this.elements.yourQuery.childNodes) {
+      if (element.dataset.type === 'start-sentence') {
+        sentenceCounter += 1;
+      }else if (element.dataset.type === 'end-sentence') {
+        sentenceEndCounter += 1;
+      }else if (element.dataset.type === 'start-entity' || element.dataset.type === 'start-empty-entity') {
+        entityCounter += 1;
+      }else if (element.dataset.type === 'end-entity') {
+        entityEndCounter += 1;
+      }
+    }
+    if (sentenceCounter !== sentenceEndCounter) {
+      app.flash('Please add a closing sentence tag', 'error');
+      this.elements.valueValidator = false;
+    }
+    if (entityCounter !== entityEndCounter) {
+      app.flash('Please add a closing entity tag', 'error');
+      this.elements.valueValidator = false;
+    }
+  }
 
   clearAll() {
     // Everything is reset. After 5 seconds for 5 seconds (with 'instance'), a message is displayed indicating that further information can be obtained via the question mark icon
@@ -506,7 +526,7 @@ class ConcordanceQueryBuilder {
             this.disableTokenSubmit();
           } else {
             tokenQueryContent += `word=${this.elements.wordInput.value}${c}`;
-            tokenQueryText += `word='${this.elements.wordInput.value}'${c}`;
+            tokenQueryText += `word="${this.elements.wordInput.value}"${c}`;
             this.elements.wordInput.value = '';
           }
           break;
@@ -515,7 +535,7 @@ class ConcordanceQueryBuilder {
             this.disableTokenSubmit();
           } else {
             tokenQueryContent += `lemma=${this.elements.lemmaInput.value}${c}`;
-            tokenQueryText += `lemma='${this.elements.lemmaInput.value}'${c}`;
+            tokenQueryText += `lemma="${this.elements.lemmaInput.value}"${c}`;
             this.elements.lemmaInput.value = '';
           }
           break;
@@ -524,7 +544,7 @@ class ConcordanceQueryBuilder {
             this.disableTokenSubmit();
           } else {
             tokenQueryContent += `pos=${this.elements.englishPos.value}`;
-            tokenQueryText += `pos='${this.elements.englishPos.value}'`;
+            tokenQueryText += `pos="${this.elements.englishPos.value}"`;
             this.elements.englishPos.value = '';
           }
           break;
@@ -533,7 +553,7 @@ class ConcordanceQueryBuilder {
             this.disableTokenSubmit();
           } else {
             tokenQueryContent += `pos=${this.elements.germanPos.value}`;
-            tokenQueryText += `pos='${this.elements.germanPos.value}'`;
+            tokenQueryText += `pos="${this.elements.germanPos.value}"`;
             this.elements.germanPos.value = '';
           }
           break;
@@ -542,7 +562,7 @@ class ConcordanceQueryBuilder {
             this.disableTokenSubmit();
           } else {
             tokenQueryContent += `simple_pos=${this.elements.simplePos.value}`;
-            tokenQueryText += `simple_pos='${this.elements.simplePos.value}'`;
+            tokenQueryText += `simple_pos="${this.elements.simplePos.value}"`;
             this.elements.simplePos.value = '';
           }
           break;
@@ -686,21 +706,21 @@ class ConcordanceQueryBuilder {
         break;
       case 'english-pos':
         this.elements.tokenQueryFilled = true;
-        this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos='${this.elements.englishPos.value}'`);
+        this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`);
         this.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
         this.elements.englishPosBuilder.classList.add('hide');
         this.elements.incidenceModifiersButton.classList.add('hide');
         break;
       case 'german-pos':
         this.elements.tokenQueryFilled = true;
-        this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos='${this.elements.germanPos.value}'`);
+        this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`);
         this.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
         this.elements.germanPosBuilder.classList.add('hide');
         this.elements.incidenceModifiersButton.classList.add('hide');
         break;
       case 'simple-pos-button':
         this.elements.tokenQueryFilled = true;
-        this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos='${this.elements.simplePos.value}'`);
+        this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`);
         this.tokenButtonfactory('{' + this.elements.nInput.value + '}', '{' + this.elements.nInput.value + '}');
         this.elements.simplePosBuilder.classList.add('hide');
         this.elements.incidenceModifiersButton.classList.add('hide');
@@ -727,21 +747,21 @@ class ConcordanceQueryBuilder {
         break;
       case 'english-pos':
         this.elements.tokenQueryFilled = true;
-        this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos='${this.elements.englishPos.value}'`);
+        this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`);
         this.tokenButtonfactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`);
         this.elements.englishPosBuilder.classList.add('hide');
         this.elements.incidenceModifiersButton.classList.add('hide');
         break;
       case 'german-pos':
         this.elements.tokenQueryFilled = true;
-        this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos='${this.elements.germanPos.value}'`);
+        this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`);
         this.tokenButtonfactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`);
         this.elements.germanPosBuilder.classList.add('hide');
         this.elements.incidenceModifiersButton.classList.add('hide');
         break;
       case 'simple-pos-button':
         this.elements.tokenQueryFilled = true;
-        this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos='${this.elements.simplePos.value}'`);
+        this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`);
         this.tokenButtonfactory(`{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`, `{${this.elements.nmInput.value}, ${this.elements.mInput.value}}`);
         this.elements.simplePosBuilder.classList.add('hide');
         this.elements.incidenceModifiersButton.classList.add('hide');
@@ -759,19 +779,19 @@ class ConcordanceQueryBuilder {
     if (this.elements.positionalAttr.value === 'empty-token') {
       this.tokenButtonfactory(elem.innerText, elem.dataset.token);
     } else if (this.elements.positionalAttr.value === 'english-pos') {
-      this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos='${this.elements.englishPos.value}'`);
+      this.tokenButtonfactory(`pos=${this.elements.englishPos.value}`, `pos="${this.elements.englishPos.value}"`);
       this.tokenButtonfactory(elem.innerText, elem.dataset.token);
       this.elements.englishPosBuilder.classList.add('hide');
       this.elements.incidenceModifiersButton.classList.add('hide');
       this.elements.tokenQueryFilled = true;
     } else if (this.elements.positionalAttr.value === 'german-pos') {
-      this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos='${this.elements.germanPos.value}'`);
+      this.tokenButtonfactory(`pos=${this.elements.germanPos.value}`, `pos="${this.elements.germanPos.value}"`);
       this.tokenButtonfactory(elem.innerText, elem.dataset.token);
       this.elements.germanPosBuilder.classList.add('hide');
       this.elements.incidenceModifiersButton.classList.add('hide');
       this.elements.tokenQueryFilled = true;
     } else if (this.elements.positionalAttr.value === 'simple-pos-button') {
-      this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos='${this.elements.simplePos.value}'`);
+      this.tokenButtonfactory(`simple_pos=${this.elements.simplePos.value}`, `simple_pos="${this.elements.simplePos.value}"`);
       this.tokenButtonfactory(elem.innerText, elem.dataset.token);
       this.elements.simplePosBuilder.classList.add('hide');
       this.elements.incidenceModifiersButton.classList.add('hide');
@@ -813,27 +833,27 @@ class ConcordanceQueryBuilder {
     switch (this.elements.positionalAttr.value) {
       case 'word':
         tokenQueryContent = `word=${this.elements.wordInput.value}${c}`;
-        tokenQueryText = `word='${this.elements.wordInput.value}'${c}`;
+        tokenQueryText = `word="${this.elements.wordInput.value}"${c}`;
         this.elements.wordInput.value = '';
         break;
       case 'lemma':
         tokenQueryContent = `lemma=${this.elements.lemmaInput.value}${c}`;
-        tokenQueryText = `word='${this.elements.lemmaInput.value}'${c}`;
+        tokenQueryText = `lemma="${this.elements.lemmaInput.value}"${c}`;
         this.elements.lemmaInput.value = '';
         break;
       case 'english-pos':
         tokenQueryContent = `pos=${this.elements.englishPos.value}`;
-        tokenQueryText = `pos='${this.elements.englishPos.value}'`;
+        tokenQueryText = `pos="${this.elements.englishPos.value}"`;
         this.elements.englishPos.value = '';
         break;
       case 'german-pos':
         tokenQueryContent = `pos=${this.elements.germanPos.value}`;
-        tokenQueryText = `pos='${this.elements.germanPos.value}'`;
+        tokenQueryText = `pos="${this.elements.germanPos.value}"`;
         this.elements.germanPos.value = '';
         break;
       case 'simple-pos-button':
         tokenQueryContent = `simple_pos=${this.elements.simplePos.value}`;
-        tokenQueryText = `simple_pos='${this.elements.simplePos.value}'`;
+        tokenQueryText = `simple_pos="${this.elements.simplePos.value}"`;
         this.elements.simplePos.value = '';
         break;
       default:
@@ -888,7 +908,7 @@ class ConcordanceQueryBuilder {
   }
 
   englishEntTypeHandler() {
-    this.buttonfactory('start-entity', 'Entity Type=' + this.elements.englishEntType.value, '<ent_type="" + this.elements.englishEntType.value + "">');
+    this.buttonfactory('start-entity', 'Entity Type=' + this.elements.englishEntType.value, '<ent_type="' + this.elements.englishEntType.value + '">');
     this.elements.entity.innerHTML = 'End Entity';
     this.hideEverything();
     this.elements.entityAnyType = false;
@@ -900,7 +920,7 @@ class ConcordanceQueryBuilder {
   }   
 
   germanEntTypeHandler() {
-    this.buttonfactory('start-entity', 'Entity Type=' + this.elements.germanEntType.value, '<ent_type="" + this.elements.germanEntType.value + "">');
+    this.buttonfactory('start-entity', 'Entity Type=' + this.elements.germanEntType.value, '<ent_type="' + this.elements.germanEntType.value + '">');
     this.elements.entity.innerHTML = 'End Entity';
     this.hideEverything();
     this.elements.entityAnyType = false;

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

@@ -64,7 +64,7 @@
             </div>
             <div class="col s12 m3 l3 right-align">
               <p class="hide-on-small-only">&nbsp;</p>
-              <a class="btn disabled waves-effect waves-light">
+              <a class="btn waves-effect waves-light modal-trigger" href="#concordance-query-builder" id="concordance-query-builder-button">
                 <i class="material-icons left">build</i>
                 Query builder
               </a>

app/templates/corpora/analyse_corpus.html.j2

@@ -248,6 +248,361 @@
     </div>
   </div>
 </div>
+
+<div class="modal" id="concordance-query-builder">
+  <div class="modal-content">
+    <div>
+      <nav>
+        <div class="nav-wrapper" id="query-builder-nav">
+          <a href="#!" class="brand-logo"><i class="material-icons">build</i>Query Builder</a>
+          <i class="material-icons close right" id="close-query-builder">close</i>
+          <a class="modal-trigger" href="#query-builder-tutorial-modal" >
+            <i class="material-icons right tooltipped" id="query-builder-tutorial-info-icon" data-position="bottom" data-tooltip="Click here if you are unsure how to use the Query Builder <br>and want to find out what other options it offers.">help</i>
+          </a>
+        </div>
+      </nav>
+    </div>
+    
+    <p></p>
+    
+    <div id="query-container" class="hide">
+      
+      <div class="row">
+        <h6 class="col s2">Your Query:
+          <a class="modal-trigger" href="#query-builder-tutorial-modal">
+          <i class="material-icons left" id="general-options-query-builder-tutorial-info-icon">help_outline</i></a>
+        </h6>
+      </div>
+      <div class="row">
+        <div class="col s10 tooltipped" id="your-query" data-position="bottom" data-tooltip="You can edit your query by deleting individual elements or moving them via drag and drop."></div>
+        <a class="btn-small waves-effect waves-teal col s1" id="insert-query-button">
+          <i class="material-icons">send</i>
+        </a>
+      </div>
+      <p><i> Preview:</i></p>
+      <p id="query-preview"></p>
+      <br>
+    </div>
+    
+    
+    <h6>Use the following options to build your query. If you need help, click on the question mark in the upper right corner!</h6>
+    <p></p>
+    <a class="btn-large waves-effect waves-light tooltipped" id="positional-attr-button" 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-large waves-effect waves-light tooltipped" id="structural-attr-button" 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>
+    
+    <div id="structural-attr" class="hide">
+      <p></p>
+      <h6>Which structural attribute do you want to add to your query?<a class="modal-trigger" href="#query-builder-tutorial-modal"><i class="material-icons left" id="add-structural-attribute-tutorial-info-icon">help_outline</i></a></h6>
+      <p></p>
+      <div class="row">
+        <div class="col s12">
+          <a class="btn-small waves-effect waves-light" id="sentence">sentence</a>
+          <a class="btn-small waves-effect waves-light" id="entity">entity</a>
+          <a class="btn-small waves-effect waves-light" id="text-annotation">Meta Data</a>
+        </div>
+      </div>
+      
+
+      <div id="entity-builder" class="hide">
+        <p></p>
+        <br>
+        <div class="row">
+          <a class="btn waves-effect waves-light col s4" id="empty-entity">Add Entity of any type</a>
+          <p class="col s1 l1"></p>
+          <div class= "input-field col s3">
+              <select name="englishenttype" id="english-ent-type">
+                <option value="" disabled selected>English ent_type</option>
+                <option value="CARDINAL">CARDINAL</option>
+                <option value="DATE">DATE</option>
+                <option value="EVENT">EVENT</option>
+                <option value="FAC">FAC</option>
+                <option value="GPE">GPE</option>
+                <option value="LANGUAGE">LANGUAGE</option>
+                <option value="LAW">LAW</option>
+                <option value="LOC">LOC</option>
+                <option value="MONEY">MONEY</option>
+                <option value="NORP">NORP</option>
+                <option value="ORDINAL">ORDINAL</option>
+                <option value="ORG">ORG</option>
+                <option value="PERCENT">PERCENT</option>
+                <option value="PERSON">PERSON</option>
+                <option value="PRODUCT">PRODUCT</option>
+                <option value="QUANTITY">QUANTITY</option>
+                <option value="TIME">TIME</option>
+                <option value="WORK_OF_ART">WORK_OF_ART</option>
+              </select>
+              <label>Entity Type</label>
+          </div>
+          <div class= "input-field col s3">
+              <select name="germanenttype" id="german-ent-type">
+                <option value="" disabled selected>German ent_type</option>
+                <option value="LOC">LOC</option>
+                <option value="MISC">MISC</option>
+                <option value="ORG">ORG</option>
+                <option value="PER">PER</option>
+              </select>
+          </div>
+        </div>
+      </div>
+    
+
+      <div id="text-annotation-builder" class="hide">
+        <p></p>
+        <br>
+        <div class="row">
+          <div class= "input-field col s4 l3">
+            <select name="text-annotation-options" id="text-annotation-options">
+              <option class="btn-small waves-effect waves-light" value="address">address</option>
+              <option class="btn-small waves-effect waves-light" value="author">author</option>
+              <option class="btn-small waves-effect waves-light" value="booktitle">booktitle</option>
+              <option class="btn-small waves-effect waves-light" value="chapter">chapter</option>
+              <option class="btn-small waves-effect waves-light" value="editor">editor</option>
+              <option class="btn-small waves-effect waves-light" value="institution">institution</option>
+              <option class="btn-small waves-effect waves-light" value="journal">journal</option>
+              <option class="btn-small waves-effect waves-light" value="pages">pages</option>
+              <option class="btn-small waves-effect waves-light" value="publisher">publisher</option>
+              <option class="btn-small waves-effect waves-light" value="publishing_year">publishing year</option>
+              <option class="btn-small waves-effect waves-light" value="school">school</option>
+              <option class="btn-small waves-effect waves-light" value="title">title</option>
+            </select>
+            <label>Meta data</label>
+          </div>
+          <div class= "input-field col s7 l5">
+            <i class="material-icons prefix">mode_edit</i>
+            <input placeholder="Type in your text annotation" type="text" id="text-annotation-input">
+          </div>
+          <div class="col s1 l1 center-align">
+            <p class="btn-floating waves-effect waves-light" id="text-annotation-submit">
+              <i class="material-icons right">send</i>
+            </p>
+          </div>
+          <div class="hide" id="no-value-metadata-message"><i>No value entered!</i></div>
+        </div>
+      </div>
+    </div>
+
+    <div id="positional-attr" class="hide">
+      <p></p>
+      <div class="row" id="token-kind-selector">
+        <div class="col s5">
+          <h6>Which kind of token are you looking for? <a class="modal-trigger" href="#query-builder-tutorial-modal"><i class="material-icons left" id="token-tutorial-info-icon">help_outline</i></a></h6>
+        </div>
+        <div class="input-field col s3">
+          <select id="token-attr">
+            <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-button">simple_pos</option>
+            <option value="empty-token">empty token</option>
+          </select>
+        </div>
+      </div>
+      <p></p>
+      <div id="token-builder-content">
+        <div class="row" >
+          <div id="token-query"></div>
+          
+          <div id="word-builder">
+              <div class= "input-field col s3 l4">
+                <i class="material-icons prefix">mode_edit</i>
+                <input placeholder="Type in your word" type="text" id="word-input">
+              </div>
+          </div>
+
+          <div id="lemma-builder" class="hide" >
+              <div class= "input-field col s3 l4">
+                <i class="material-icons prefix">mode_edit</i>
+                <input placeholder="Type in your lemma" type="text" id="lemma-input">
+              </div>
+          </div>
+
+          <div id="english-pos-builder" class="hide">
+            <div class="col s6 m4 l4">
+              <div class="row">
+                <div class= "input-field col s12">
+                  <select name="englishpos" id="english-pos">
+                    <option value="default" disabled selected>English pos tagset</option>
+                    <option value="ADD">email</option>
+                    <option value="AFX">affix</option>
+                    <option value="CC">conjunction, coordinating</option>
+                    <option value="CD">cardinal number</option>
+                    <option value="DT">determiner</option>
+                    <option value="EX">existential there</option>
+                    <option value="FW">foreign word</option>
+                    <option value="HYPH">punctuation mark, hyphen</option>
+                    <option value="IN">conjunction, subordinating or preposition</option>
+                    <option value="JJ">adjective</option>
+                    <option value="JJR">adjective, comparative</option>
+                    <option value="JJS">adjective, superlative</option>
+                  </select>
+                  <label>Part-of-speech tags</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div id="german-pos-builder" class="hide">
+            <div class="col s6 m4 l4">
+              <div class="row">
+                <div class= "input-field col s12">
+                  <select name="germanpos" id="german-pos">
+                    <option value="default" disabled selected>German pos tagset</option>
+                    <option value="ADJA">adjective, attributive</option>
+                    <option value="ADJD">adjective, adverbial or predicative</option>
+                    <option value="ADV">adverb</option>
+                    <option value="APPO">postposition</option>
+                    <option value="APPR">preposition; circumposition left</option>
+                    <option value="APPRART">preposition with article</option>
+                    <option value="APZR">circumposition right</option>
+                    <option value="ART">definite or indefinite article</option>
+                  </select>
+                  <label>Part-of-speech tags</label>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div id="simplepos-builder" class="hide">
+            <div class="col s6 m4 l4">
+              <div class="row">
+                <div class= "input-field col s12">
+                  <select name="simplepos" id="simple-pos">
+                    <option value="default" disabled selected>simple_pos tagset</option>
+                    <option value="ADJ">adjective</option>
+                    <option value="ADP">adposition</option>
+                    <option value="ADV">adverb</option>
+                    <option value="AUX">auxiliary verb</option>
+                    <option value="CONJ">coordinating conjunction</option>
+                    <option value="DET">determiner</option>
+                    <option value="INTJ">interjection</option>
+                    <option value="NOUN">noun</option>
+                    <option value="NUM">numeral</option>
+                    <option value="PART">particle</option>
+                    <option value="PRON">pronoun</option>
+                    <option value="PROPN">proper noun</option>
+                    <option value="PUNCT">punctuation</option>
+                    <option value="SCONJ">subordinating conjunction</option>
+                    <option value="SYM">symbol</option>
+                    <option value="VERB">verb</option>
+                    <option value="X">other</option>
+                  </select>
+                  <label>Simple part-of-speech tags</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col s1 l1 center-align">
+              <p class="btn-floating waves-effect waves-light" id="token-submit">
+                <i class="material-icons right">send</i>
+              </p>
+          </div>
+          <div class="hide" id="no-value-message"><i>No value entered!</i></div>
+        </div>
+        <div id="token-edit-options">
+          <div class="row">
+            <h6>Options to edit your token: <a class="modal-trigger" href="#query-builder-tutorial-modal"><i class="material-icons left" id="edit-options-tutorial-info-icon">help_outline</i></a></h6>
+          </div>
+          <p></p>
+          <div class="row">
+            <div id="input-options" class="col s5 m5 l5 xl4">
+                <a id="wildcard-char" class="btn-small waves-effect waves-light tooltipped" data-position="top" data-tooltip="Look for a variable character (also called wildcard character)">Wildcard character</a>
+                <a id="option-group" class="btn-small waves-effect waves-light tooltipped" data-position="top" data-tooltip="Find character sequences from a list of options">Option Group</a>
+            </div>
+            <div class="col s3 m3 l3 xl3" id="incidence-modifiers-button">
+              <a class="dropdown-trigger btn-small  waves-effect waves-light" href="#" data-target="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="incidence-modifiers" class="dropdown-content">
+              <li><a id="one-or-more" data-token="+" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">one or more (+)</a></li>
+              <li><a id="zero-or-more" data-token="*" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or more (*)</a></li>
+              <li><a id="zero-or-one" data-token="?" class="tooltipped" data-position ="top" data-tooltip="...occurrences of the character/token before">zero or one (?)</a></li>
+              <li><a id="exactly-n" class="modal-trigger tooltipped" href="#exactlyN" data-token="{n}" class="" data-position ="top" data-tooltip="...occurrences of the character/token before">exactly n ({n})</a></li>
+              <li><a id="between-n-m" class="modal-trigger tooltipped" href="#betweenNM" data-token="{n,m}" class="" data-position ="top" data-tooltip="...occurrences of the character/token before">between n and m ({n,m})</a></li>
+            </ul>
+
+            <div id="ignore-case-checkbox" class="col s2 m2 l2 xl2">
+              <p id="ignore-case">
+                  <label>
+                    <input type="checkbox" class="filled-in" />
+                    <span>Ignore Case</span>
+                  </label>
+              </p>
+            </div>
+            <div class="col s2 m2 l2 xl2" id="condition-container">
+              <a class="btn-small tooltipped waves-effect waves-light" id="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" id="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>
+      <div id="exactlyN" class="modal">
+          <div class="row modal-content">
+            <div class="input-field col s10">
+                <i class="material-icons prefix">mode_edit</i>
+                <input placeholder="type in a number for 'n'" type="text" id="n-input">
+            </div>
+            <div class="col s2">
+              <p class="btn-floating waves-effect waves-light" id="n-submit">
+                <i class="material-icons right">send</i>
+              </p>
+            </div>
+          </div>
+      </div>
+
+      <div id="betweenNM" class="modal">
+          <div class="row modal-content">
+            <div class= "input-field col s5">
+                <i class="material-icons prefix">mode_edit</i>
+                <input placeholder="number for 'n'" type="text" id="n-m-input">
+            </div>
+            <div class= "input-field col s5">
+                <i class="material-icons prefix">mode_edit</i>
+                <input placeholder="number for 'm'" type="text" id="m-input">
+            </div>
+            <div class="col s2">
+              <p class="btn-floating waves-effect waves-light" id="n-m-submit">
+                <i class="material-icons right">send</i>
+              </p>
+            </div>
+          </div>
+      </div>
+    </div>
+   
+  </div>
+</div>
+
+<div class="modal modal-fixed-footer" id="query-builder-tutorial-modal">
+  <div class="modal-content" >
+    <div id="query-builder-tutorial-start"></div>
+    <ul class="tabs">
+      <li class="tab"><a class="active" href="#query-builder-tutorial">Query Builder Tutorial</a></li>
+      {# <li class="tab"><a href="#qb-examples">Examples</a></li> #}
+      <li class="tab"><a href="#cql-cb-tutorial">Corpus Query Language Tutorial</a></li>
+      <li class="tab"><a href="#tagsets-cb-tutorial">Tagsets</a></li>
+    </ul>
+  
+    <div id="query-builder-tutorial">
+      {% include "main/manual/_09_query_builder.html.j2" %}
+    </div>
+    {# <div id="qb-examples"></div> #}
+    <div id ="cql-cb-tutorial">
+      {% with headline_num=4 %}
+        {% include "main/manual/_08_cqp_query_language.html.j2" %}
+      {% endwith %}
+    </div>
+    <div id="tagsets-cb-tutorial">
+      <h4>Tagsets</h4>
+      {% include "main/manual/_10_tagsets.html.j2" %}
+    </div>
+    <div class="fixed-action-btn">
+      <a class="btn-floating btn-large teal" id="scroll-up-button-query-builder-tutorial" href='#query-builder-tutorial-start'>
+        <i class="large material-icons">arrow_upward</i>
+      </a>
+    </div>
+  </div>
+</div>
+
 {% endblock modals %}
 
 {% block scripts %}
@@ -256,6 +611,7 @@
 const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }});
 const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
 const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp);
+const concordanceQueryBuilder = new ConcordanceQueryBuilder();
 
 corpusAnalysisApp.init();
 </script>