fix id issues

app/static/css/queryBuilder.css

@@ -2,15 +2,15 @@
   overflow-x: hidden;
 }
 
-#positional-attr-modal, #structural-attr-modal {
+#corpus-analysis-concordance-positional-attr-modal, #corpus-analysis-concordance-corpus-analysis-concordance-structural-attr-modal {
   width: 70%;
 }
 
-#general-options-query-builder-tutorial-info-icon {
+#corpus-analysis-concordance-general-options-query-builder-tutorial-info-icon {
   color: black;
 }
 
-#insert-query-button {
+#corpus-analysis-concordance-insert-query-button {
   background-color: #00426f;
   text-align: center;
 }
@@ -29,7 +29,7 @@
   margin-left: 15px;
 }
 
-#add-structural-attribute-tutorial-info-icon {
+#corpus-analysis-concordance-add-structural-attribute-tutorial-info-icon {
   color: black;
 }
 
@@ -45,7 +45,7 @@
   background-color: #2FBBAB !important;
 }
 
-#no-value-metadata-message {
+#corpus-analysis-concordance-no-value-metadata-message {
   padding-top: 25px;
   margin-left: -20px;
 }
@@ -54,60 +54,60 @@
   margin-left: 41px;
 }
 
-#token-attr {
+#corpus-analysis-concordance-token-attr {
   margin-left: 41px;
 }
 
-#token-tutorial-info-icon {
+#corpus-analysis-concordance-token-tutorial-info-icon {
   color: black;
 }
 
-#no-value-message {
+#corpus-analysis-concordance-no-value-message {
   padding-top: 25px;
   margin-left: -20px;
 }
 
-#token-edit-options h6 {
+#corpus-analysis-concordance-token-edit-options h6 {
   margin-left: 15px;
 }
 
-#edit-options-tutorial-info-icon {
+#corpus-analysis-concordance-edit-options-tutorial-info-icon {
   color: black;
 }
 
-#incidence-modifiers-button a{
+#corpus-analysis-concordance-incidence-modifiers-button a{
   background-color: #2FBBAB;
 }
 
-#incidence-modifiers-dropdown a{
+#corpus-analysis-concordance-incidence-modifiers-dropdown a{
   background-color: white;
 }
 
-#ignore-case-checkbox {
+#corpus-analysis-concordance-ignore-case-checkbox {
   margin-left: 5px;
 }
 
-#or, #and {
+#corpus-analysis-concordance-or, #corpus-analysis-concordance-and {
   background-color: #fc0;
 }
 
-#betweenNM {
+#corpus-analysis-concordance-betweenNM {
   width: 60%;
 }
 
-#query-builder-tutorial-modal {
+#corpus-analysis-concordance-query-builder-tutorial-modal {
   width: 60%;
 }
 
-#query-builder-tutorial-modal ul {
+#corpus-analysis-concordance-query-builder-tutorial-modal ul {
   margin-top: 10px;
 }
 
-#query-builder-tutorial {
+#corpus-analysis-concordance-query-builder-tutorial {
   padding:15px;
 }
 
-#scroll-up-button-query-builder-tutorial {
+#corpus-analysis-concordance-scroll-up-button-query-builder-tutorial {
   background-color: #28B3D1;
 }
 

app/static/js/CorpusAnalysis/CorpusAnalysisApp.js

@@ -6,10 +6,10 @@ class CorpusAnalysisApp {
 
     // HTML elements
     this.elements = {
-      container: document.querySelector('#corpus-analysis-app-container'),
+      container: document.querySelector('#corpus-analysis-container'),
-      extensionCards: document.querySelector('#corpus-analysis-app-extension-cards'),
+      extensionCards: document.querySelector('#corpus-analysis-extension-cards'),
-      extensionTabs: document.querySelector('#corpus-analysis-app-extension-tabs'),
+      extensionTabs: document.querySelector('#corpus-analysis-extension-tabs'),
-      initModal: document.querySelector('#corpus-analysis-app-init-modal')
+      initModal: document.querySelector('#corpus-analysis-init-modal')
     };
     // Materialize elements
     this.elements.m = {
@@ -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

@@ -1,22 +1,22 @@
 class CorpusAnalysisConcordance {
   name = 'Concordance';
 
-  constructor(app, idPrefix) {
+  constructor(app) {
     this.app = app;
 
     this.data = {};
 
     this.elements = {
-      container: document.querySelector(`#${idPrefix}-container`),
+      container: document.querySelector(`#corpus-analysis-concordance-container`),
-      error: document.querySelector(`#${idPrefix}-error`),
+      error: document.querySelector(`#corpus-analysis-concordance-error`),
-      userInterfaceForm: document.querySelector(`#${idPrefix}-user-interface-form`),
+      userInterfaceForm: document.querySelector(`#corpus-analysis-concordance-user-interface-form`),
-      form: document.querySelector(`#${idPrefix}-form`),
+      form: document.querySelector(`#corpus-analysis-concordance-form`),
-      progress: document.querySelector(`#${idPrefix}-progress`),
+      progress: document.querySelector(`#corpus-analysis-concordance-progress`),
-      subcorpusInfo: document.querySelector(`#${idPrefix}-subcorpus-info`),
+      subcorpusInfo: document.querySelector(`#corpus-analysis-concordance-subcorpus-info`),
-      subcorpusActions: document.querySelector(`#${idPrefix}-subcorpus-actions`),
+      subcorpusActions: document.querySelector(`#corpus-analysis-concordance-subcorpus-actions`),
-      subcorpusItems: document.querySelector(`#${idPrefix}-subcorpus-items`),
+      subcorpusItems: document.querySelector(`#corpus-analysis-concordance-subcorpus-items`),
-      subcorpusList: document.querySelector(`#${idPrefix}-subcorpus-list`),
+      subcorpusList: document.querySelector(`#corpus-analysis-concordance-subcorpus-list`),
-      subcorpusPagination: document.querySelector(`#${idPrefix}-subcorpus-pagination`)
+      subcorpusPagination: document.querySelector(`#corpus-analysis-concordance-subcorpus-pagination`)
     };
 
     this.settings = {

app/static/js/CorpusAnalysis/CorpusAnalysisReader.js

@@ -1,18 +1,18 @@
 class CorpusAnalysisReader {
   name = 'Reader';
 
-  constructor(app, idPrefix) {
+  constructor(app) {
     this.app = app;
 
     this.data = {};
 
     this.elements = {
-      container: document.querySelector(`#${idPrefix}-container`),
+      container: document.querySelector(`#corpus-analysis-reader-container`),
-      corpus: document.querySelector(`#${idPrefix}-corpus`),
+      corpus: document.querySelector(`#corpus-analysis-reader-corpus`),
-      corpusPagination: document.querySelector(`#${idPrefix}-corpus-pagination`),
+      corpusPagination: document.querySelector(`#corpus-analysis-reader-corpus-pagination`),
-      error: document.querySelector(`#${idPrefix}-error`),
+      error: document.querySelector(`#corpus-analysis-reader-error`),
-      progress: document.querySelector(`#${idPrefix}-progress`),
+      progress: document.querySelector(`#corpus-analysis-reader-progress`),
-      userInterfaceForm: document.querySelector(`#${idPrefix}-user-interface-form`)
+      userInterfaceForm: document.querySelector(`#corpus-analysis-reader-user-interface-form`)
     };
 
     this.settings = {

app/static/js/CorpusAnalysis/QueryBuilder.js

@@ -40,10 +40,10 @@ class ConcordanceQueryBuilder {
         placeholder: 'Add your query here'
       }
     );
-    document.querySelector('#corpus-analysis-app-concordance-extension-form-query-builder input').style.setProperty('width', '150px', 'important');
+    document.querySelector('#corpus-analysis-concordance-form-query-builder input').style.setProperty('width', '150px', 'important');
 
     this.elements.positionalAttrModal = M.Modal.init(
-      document.querySelector('#positional-attr-modal'), 
+      document.querySelector('#corpus-analysis-concordance-positional-attr-modal'), 
       {
         onOpenStart: () => {
           this.tokenAttributeBuilder.optionToggleHandler();

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

@@ -2,30 +2,30 @@ class ElementReferencesQueryBuilder {
   constructor() {
     // General Elements
     this.counter = 0;
-    this.queryInputField = document.querySelector('#corpus-analysis-app-concordance-extension-form-query-builder');
+    this.queryInputField = document.querySelector('#corpus-analysis-concordance-form-query-builder');
     this.queryInputFieldInstance = M.Chips.getInstance(this.queryInputField);
     this.queryInputFieldContent = [];
 
     // Structural Attribute Builder Elements
-    this.structuralAttrModalInstance = document.querySelector('#structural-attr-modal');
+    this.structuralAttrModalInstance = 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"]');
 
     // Token Attribute Builder Elements
-    this.positionalAttrModal = M.Modal.getInstance(document.querySelector('#positional-attr-modal'));
+    this.positionalAttrModal = M.Modal.getInstance(document.querySelector('#corpus-analysis-concordance-positional-attr-modal'));
-    this.positionalAttrSelection = document.querySelector('#positional-attr-selection');
+    this.positionalAttrSelection = document.querySelector('#corpus-analysis-concordance-positional-attr-selection');
-    this.tokenQuery = document.querySelector('#token-query');
+    this.tokenQuery = document.querySelector('#corpus-analysis-concordance-token-query');
-    this.tokenSubmitButton = document.querySelector('#token-submit');
+    this.tokenSubmitButton = document.querySelector('#corpus-analysis-concordance-token-submit');
-    this.noValueMessage = document.querySelector('#no-value-message');
+    this.noValueMessage = document.querySelector('#corpus-analysis-concordance-no-value-message');
     this.isTokenQueryInvalid = false;
 
-    this.wordInput = document.querySelector('#word-input');
+    this.wordInput = document.querySelector('#corpus-analysis-concordance-word-input');
-    this.lemmaInput = document.querySelector('#lemma-input');
+    this.lemmaInput = document.querySelector('#corpus-analysis-concordance-lemma-input');
-    this.englishPosSelection = document.querySelector('#english-pos-selection');
+    this.englishPosSelection = document.querySelector('#corpus-analysis-concordance-english-pos-selection');
-    this.germanPosSelection = document.querySelector('#german-pos-selection');
+    this.germanPosSelection = document.querySelector('#corpus-analysis-concordance-german-pos-selection');
-    this.simplePosSelection = document.querySelector('#simple-pos-selection');
+    this.simplePosSelection = document.querySelector('#corpus-analysis-concordance-simple-pos-selection');
 
-    this.ignoreCaseCheckbox = document.querySelector('#ignore-case-checkbox');
+    this.ignoreCaseCheckbox = document.querySelector('#corpus-analysis-concordance-ignore-case-checkbox');
   }
 }

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

@@ -89,7 +89,7 @@ class GeneralFunctionsQueryBuilder {
   }
 
   queryPreviewBuilder() {
-    let queryPreview = document.querySelector('#query-preview');
+    let queryPreview = document.querySelector('#corpus-analysis-concordance-query-preview');
     let queryChipElements = Array.from(Object.values(this.elements.queryInputFieldInstance.$chips));
     queryChipElements.pop();
     this.elements.queryInputFieldContent = [];

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

@@ -144,13 +144,13 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
         <option value="simple-pos">simple_pos</option>
         <option value="empty-token">empty token</option>
       `;
-    document.querySelector('#positional-attr-selection').innerHTML = originalSelectionList;
+    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(`#positional-attr-selection option[value="word"]`).selected = true;
+    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();
@@ -283,10 +283,10 @@ class TokenAttributeBuilderFunctionsQueryBuilder extends GeneralFunctionsQueryBu
 
   setTokenSelection(selection, optionDeleteList) {
     optionDeleteList.forEach(option => {
-      document.querySelector(`#positional-attr-selection option[value=${option}]`).remove();
+      document.querySelector(`#corpus-analysis-concordance-positional-attr-selection option[value=${option}]`).remove();
     });
 
-    document.querySelector(`#positional-attr-selection option[value=${selection}]`).selected = true;
+    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();

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

@@ -13,7 +13,7 @@
 
 
 {# The extension container content #}
-{% macro container_content(id_prefix) %}
+{% macro container_content() %}
 <div class="card">
   <div class="card-content">
     <div class="row">
@@ -23,34 +23,33 @@
       <div class="col s2">
         <div class="switch" style="margin-top:8px; margin-left:0px;">
           <label>
-            <input type="checkbox" id="{{ id_prefix }}-expert-mode-switch">
+            <input type="checkbox" id="corpus-analysis-concordance-expert-mode-switch">
             <span class="lever"></span>
             expert mode
           </label>
         </div>
       </div>
     </div>
-    <div id="{{ id_prefix }}-expert-mode-display" class="hide">
+    <div id="corpus-analysis-concordance-expert-mode-display" class="hide">
-      {{ expert_mode.card_content(id_prefix) }}
+      {{ expert_mode.card_content() }}
-    </div>
-    <div id="{{ id_prefix }}-query-builder-display">
-      {{ query_builder.card_content(id_prefix) }}
     </div>
+    <div id="corpus-analysis-concordance-query-builder-display">
+      {{ query_builder.card_content() }}
     </div>
   </div>
 </div>
 
-<div id="{{ id_prefix }}-subcorpus-list"></div>
+<div id="corpus-analysis-concordance-subcorpus-list"></div>
 
 <div class="card">
   <div class="card-content">
     <span class="card-title">Results</span>
     <p></p>
     <br>
-    <div class="progress hide" id="{{ id_prefix }}-progress">
+    <div class="progress hide" id="corpus-analysis-concordance-progress">
       <div class="indeterminate"></div>
     </div>
-    <form id="{{ id_prefix }}-user-interface-form">
+    <form id="corpus-analysis-concordance-user-interface-form">
       <div class="row">
         <div class="col s12 m9 l9">
           <div class="row">
@@ -99,8 +98,8 @@
       </div>
     </form>
     <div class="row">
-      <div class="col s9"><p class="hide" id="{{ id_prefix }}-subcorpus-info"></p></div>
+      <div class="col s9"><p class="hide" id="corpus-analysis-concordance-subcorpus-info"></p></div>
-      <div class="col s3 right-align" id="{{ id_prefix }}-subcorpus-actions"></div>
+      <div class="col s3 right-align" id="corpus-analysis-concordance-subcorpus-actions"></div>
     </div>
     <table class="highlight">
       <thead>
@@ -113,27 +112,27 @@
           <th class="left-align" style="width: 5%;"></th>
         </tr>
       </thead>
-      <tbody id="{{ id_prefix }}-subcorpus-items"></tbody>
+      <tbody id="corpus-analysis-concordance-subcorpus-items"></tbody>
     </table>
-    <ul class="pagination hide" id="{{ id_prefix }}-subcorpus-pagination"></ul>
+    <ul class="pagination hide" id="corpus-analysis-concordance-subcorpus-pagination"></ul>
   </div>
 </div>
 {% endmacro %}
 
 {# The extension modals #}
-{% macro modals(id_prefix) %}
+{% macro modals() %}
-{{ query_builder.structural_attribute_modal(id_prefix) }}
+{{ query_builder.structural_attribute_modal() }}
-{{ query_builder.positional_attribute_modal(id_prefix) }}
+{{ query_builder.positional_attribute_modal() }}
 {% endmacro %}
 
 {# The extension scripts #}
-{% macro scripts(id_prefix) %}
+{% macro scripts() %}
 <script>
-  const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp, "{{ id_prefix }}");
+  const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
 
-  let queryBuilderDisplay = document.getElementById("{{ id_prefix }}-query-builder-display");
+  let queryBuilderDisplay = document.getElementById("corpus-analysis-concordance-query-builder-display");
-  let expertModeDisplay = document.getElementById("{{ id_prefix }}-expert-mode-display");
+  let expertModeDisplay = document.getElementById("corpus-analysis-concordance-expert-mode-display");
-  let expertModeSwitch = document.getElementById("{{ id_prefix }}-expert-mode-switch");
+  let expertModeSwitch = document.getElementById("corpus-analysis-concordance-expert-mode-switch");
 
   expertModeSwitch.addEventListener("change", function() {
     if (this.checked) {
@@ -144,7 +143,6 @@
       expertModeDisplay.classList.add("hide");
     }
   });
-  const concordanceQueryBuilder = new ConcordanceQueryBuilder();
 </script>
-{# {{ query_builder.scripts() }} #}
+{{ query_builder.scripts(id_prefix) }}
 {% endmacro %}

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

@@ -1,22 +1,22 @@
 {% macro card_content(id_prefix) %}
 <div class="row">
-  <form id="{{ id_prefix }}-form">
+  <form id="corpus-analysis-concordance-form">
     <div class="input-field col s12 m9">
       <i class="material-icons prefix">search</i>
-      <input class="validate corpus-analysis-action" id="{{ id_prefix }}-form-query" name="query" type="text" required pattern=".*\S+.*" placeholder="Type in your query or use the Query Builder on the right"></input>
+      <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>
-      <span class="error-color-text helper-text hide" id="{{ id_prefix }}-error"></span>
+      <span class="error-color-text helper-text hide" id="corpus-analysis-concordance-error"></span>
       <a class="modal-trigger" data-manual-modal-chapter="manual-modal-cqp-query-language" href="#manual-modal" style="margin-left: 40px;"><i class="material-icons" style="font-size: inherit;">help</i> Corpus Query Language tutorial</a>
       <span> | </span>
       <a class="modal-trigger" data-manual-modal-chapter="manual-modal-tagsets" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">info</i> Tagsets</a>
     </div>
     <div class="input-field col s12 m3">
       <i class="material-icons prefix">arrow_forward</i>
-      <input class="validate corpus-analysis-action" id="{{ id_prefix }}-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
+      <input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
-      <label for="{{ id_prefix }}-form-subcorpus-name">Subcorpus name</label>
+      <label for="corpus-analysis-concordance-form-subcorpus-name">Subcorpus name</label>
     </div>
     <div class="col s12 m3 l3 right-align">
       <p class="hide-on-small-only">&nbsp;</p>
-      <button class="btn waves-effect waves-light corpus-analysis-action" id="{{ id_prefix }}-form-submit" 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>

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

@@ -1,18 +1,18 @@
 {% macro card_content(id_prefix) %}
-<form id="{{ id_prefix }}-form">
+<form id="corpus-analysis-concordance-form">
   <div class="row">
     <div class="col s9">
-      <div class="chips" id="{{ id_prefix }}-form-query-builder"></div>
+      <div class="chips" id="corpus-analysis-concordance-form-query-builder"></div>
     </div>
     <div class="input-field col s3">
       <i class="material-icons prefix">arrow_forward</i>
-      <input class="validate corpus-analysis-action" id="{{ id_prefix }}-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
+      <input class="validate corpus-analysis-action" id="corpus-analysis-concordance-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
-      <label for="{{ id_prefix }}-form-subcorpus-name">Subcorpus name</label>
+      <label for="corpus-analysis-concordance-form-subcorpus-name">Subcorpus name</label>
     </div>
   </div>
   <div class="row">
     <div class="col s12">
-      <span class="error-color-text helper-text hide" id="{{ id_prefix }}-error"></span>
+      <span class="error-color-text helper-text hide" id="corpus-analysis-concordance-error"></span>
       <a class="modal-trigger" data-manual-modal-chapter="manual-modal-cqp-query-language" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">help</i> Corpus Query Language tutorial</a>
       <span> | </span>
       <a class="modal-trigger" data-manual-modal-chapter="manual-modal-tagsets" href="#manual-modal"><i class="material-icons" style="font-size: inherit;">info</i> Tagsets</a>
@@ -21,21 +21,21 @@
   <div class="row">
     <div class="col s12 hide">
       <p><i> Preview:</i></p>
-      <p id="query-preview"></p>
+      <p id="corpus-analysis-concordance-query-preview"></p>
       <br>
     </div>
   </div>
   <div class="row">
     <div class="col s12">
       <p></p>
-      <a class="btn waves-effect waves-light tooltipped modal-trigger" href="#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-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="#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 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>
     </div>
   </div>
   <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" id="{{ id_prefix }}-form-submit" 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>
@@ -45,10 +45,10 @@
 {% endmacro %}
 
 {% macro structural_attribute_modal(id_prefix) %}
-<div id="structural-attr-modal" class="modal">
+<div id="corpus-analysis-concordance-structural-attr-modal" class="modal">
   <div class="modal-content">
     <div class="attr-modal-header">
-      <h5>Which structural attribute do you want to add to your query?<a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="add-structural-attribute-tutorial-info-icon">help_outline</i></a></h5>
+      <h5>Which structural attribute do you want to add to your query?<a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="corpus-analysis-concordance-add-structural-attribute-tutorial-info-icon">help_outline</i></a></h5>
     </div>
     <p></p>
     <br>
@@ -59,14 +59,14 @@
         <a class="btn-small waves-effect waves-light" data-structural-attr-modal-action-button="meta-data">Meta Data</a>
       </div>
     </div>
-    <div id="entity-builder" data-toggle-area="entity-builder" class="hide">
+    <div id="corpus-analysis-concordance-entity-builder" data-toggle-area="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>
+        <a class="btn waves-effect waves-light col s4" id="corpus-analysis-concordance-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">
+            <select name="englishenttype" id="corpus-analysis-concordance-english-ent-type">
               <option value="" disabled selected>English ent_type</option>
               <option value="CARDINAL">CARDINAL</option>
               <option value="DATE">DATE</option>
@@ -90,7 +90,7 @@
             <label>Entity Type</label>
         </div>
         <div class= "input-field col s3">
-            <select name="germanenttype" id="german-ent-type">
+            <select name="germanenttype" id="corpus-analysis-concordance-german-ent-type">
               <option value="" disabled selected>German ent_type</option>
               <option value="LOC">LOC</option>
               <option value="MISC">MISC</option>
@@ -100,12 +100,12 @@
         </div>
       </div>
     </div>
-    <div id="text-annotation-builder" data-toggle-area="text-annotation-builder" class="hide">
+    <div id="corpus-analysis-concordance-text-annotation-builder" data-toggle-area="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">
+          <select name="text-annotation-options" id="corpus-analysis-concordance-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>
@@ -123,14 +123,14 @@
         </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">
+          <input placeholder="Type in your text annotation" type="text" id="corpus-analysis-concordance-text-annotation-input">
         </div>
         <div class="col s1 l1 center-align">
-          <p class="btn-floating waves-effect waves-light" id="text-annotation-submit">
+          <p class="btn-floating waves-effect waves-light" id="corpus-analysis-concordance-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 class="hide" id="corpus-analysis-concordance-no-value-metadata-message"><i>No value entered!</i></div>
       </div>
     </div>
   </div>
@@ -138,15 +138,15 @@
 {% endmacro %}
 
 {% macro positional_attribute_modal(id_prefix) %}
-<div id="positional-attr-modal" class="modal no-autoinit">
+<div id="corpus-analysis-concordance-positional-attr-modal" class="modal no-autoinit">
   <div class="modal-content">
     <div class="row attr-modal-header">
       <p></p>
       <div class="col s12">
-        <h5>Which kind of token are you looking for? <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="token-tutorial-info-icon">help_outline</i></a></h5>
+        <h5>Which kind of token are you looking for? <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="corpus-analysis-concordance-token-tutorial-info-icon">help_outline</i></a></h5>
       </div>
       <div class="input-field col s3" style="margin-left:42px;">
-        <select id="positional-attr-selection">
+        <select id="corpus-analysis-concordance-positional-attr-selection">
           <option value="word" selected>word</option>
           <option value="lemma" >lemma</option>
           <option value="english-pos">english pos</option>
@@ -157,29 +157,29 @@
       </div>
     </div>
     <p></p>
-    <div id="token-builder-content">
+    <div id="corpus-analysis-concordance-token-builder-content">
       <div class="row" >
-        <div id="token-query"></div>
+        <div id="corpus-analysis-concordance-token-query"></div>
         
-        <div id="word-builder" data-toggle-area="word">
+        <div id="corpus-analysis-concordance-word-builder" data-toggle-area="word">
             <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">
+              <input placeholder="Type in your word" type="text" id="corpus-analysis-concordance-word-input">
             </div>
         </div>
 
-        <div id="lemma-builder" class="hide" data-toggle-area="lemma">
+        <div id="corpus-analysis-concordance-lemma-builder" class="hide" data-toggle-area="lemma">
             <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">
+              <input placeholder="Type in your lemma" type="text" id="corpus-analysis-concordance-lemma-input">
             </div>
         </div>
 
-        <div id="english-pos-builder" class="hide" data-toggle-area="english-pos">
+        <div id="corpus-analysis-concordance-english-pos-builder" class="hide" data-toggle-area="english-pos">
           <div class="col s6 m4 l4">
             <div class="row">
               <div class= "input-field col s12">
-                <select name="englishpos" id="english-pos-selection">
+                <select name="englishpos" id="corpus-analysis-concordance-english-pos-selection">
                   <option value="default" disabled selected>English pos tagset</option>
                   <option value="ADD">email</option>
                   <option value="AFX">affix</option>
@@ -235,11 +235,11 @@
           </div>
         </div>
         
-        <div id="german-pos-builder" class="hide" data-toggle-area="german-pos">
+        <div id="corpus-analysis-concordance-german-pos-builder" class="hide" data-toggle-area="german-pos">
           <div class="col s6 m4 l4">
             <div class="row">
               <div class= "input-field col s12">
-                <select name="germanpos" id="german-pos-selection">
+                <select name="germanpos" id="corpus-analysis-concordance-german-pos-selection">
                   <option value="default" disabled selected>German pos tagset</option>
                   <option value="ADJA">adjective, attributive</option>
                   <option value="ADJD">adjective, adverbial or predicative</option>
@@ -302,11 +302,11 @@
           </div>
         </div>
 
-        <div id="simple-pos-builder" class="hide" data-toggle-area="simple-pos">
+        <div id="corpus-analysis-concordance-simple-pos-builder" class="hide" data-toggle-area="simple-pos">
           <div class="col s6 m4 l4">
             <div class="row">
               <div class= "input-field col s12">
-                <select name="simplepos" id="simple-pos-selection">
+                <select name="simplepos" id="corpus-analysis-concordance-simple-pos-selection">
                   <option value="default" disabled selected>simple_pos tagset</option>
                   <option value="ADJ">adjective</option>
                   <option value="ADP">adposition</option>
@@ -333,66 +333,66 @@
         </div>
 
         <div class="col s1 l1 center-align">
-            <p class="btn-floating waves-effect waves-light" id="token-submit">
+            <p class="btn-floating waves-effect waves-light" id="corpus-analysis-concordance-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 class="hide" id="corpus-analysis-concordance-no-value-message"><i>No value entered!</i></div>
       </div>
 
-      <div id="token-edit-options">
+      <div id="corpus-analysis-concordance-token-edit-options">
         <div class="row">
-          <h6>Options to edit your token: <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="edit-options-tutorial-info-icon">help_outline</i></a></h6>
+          <h6>Options to edit your token: <a class="modal-trigger" data-manual-modal-chapter="manual-modal-query-builder" href="#manual-modal"><i class="material-icons left" id="corpus-analysis-concordance-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">
+          <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 s3 m3 l3 xl3" id="incidence-modifiers-button">
+          <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="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-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="incidence-modifiers-dropdown" class="dropdown-content">
+          <ul id="corpus-analysis-concordance-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>
             <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="#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-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="#between-nm-modal" data-position ="top" data-tooltip="...occurrences of the character/token before">between n and m ({n,m})</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 class="col s2 m2 l2 xl2">
             <p>
                 <label>
-                  <input type="checkbox" class="filled-in" data-toggle-area="ignore-case-checkbox" id="ignore-case-checkbox"/>
+                  <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="condition-container">
+          <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>
-    <div id="exactly-n-modal" class="modal">
+    <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="exactly-n-modal">
+          <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="between-nm-modal" class="modal">
+    <div id="corpus-analysis-concordance-between-nm-modal" class="modal">
       <div class="row modal-content">
         <div class="input-field col s5">
             <i class="material-icons prefix">mode_edit</i>
@@ -403,7 +403,7 @@
             <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="between-nm-modal">
+          <p class="btn-floating waves-effect waves-light n-m-submit-button" data-modal-id="corpus-analysis-concordance-between-nm-modal">
             <i class="material-icons right">send</i>
           </p>
         </div>

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

@@ -9,10 +9,10 @@
 
 
 {# The extension container content #}
-{% macro container_content(id_prefix) %}
+{% macro container_content() %}
 <div class="card">
   <div class="card-content">
-    <form id="{{ id_prefix }}-user-interface-form">
+    <form id="corpus-analysis-reader-user-interface-form">
       <div class="row">
         <div class="col s12 m9 l10">
           <div class="row">
@@ -45,13 +45,13 @@
               <label>Token representation</label>
             </div>
             <div class="col s12">
-              <span class="error-color-text helper-text hide" id="{{ id_prefix }}-error"></span>
+              <span class="error-color-text helper-text hide" id="corpus-analysis-reader-error"></span>
             </div>
           </div>
         </div>
         <div class="col s12 m3 l2 right-align">
           <p class="hide-on-small-only">&nbsp;</p>
-          <button class="btn hide waves-effect waves-light corpus-analysis-action" id="{{ id_prefix }}-form-submit" type="submit" name="submit">Send <i class="material-icons right">send</i></button>
+          <button class="btn hide waves-effect waves-light corpus-analysis-action" id="corpus-analysis-reader-form-submit" type="submit" name="submit">Send <i class="material-icons right">send</i></button>
         </div>
       </div>
     </form>
@@ -60,25 +60,25 @@
 
 <div class="card">
   <div class="card-content">
-    <div class="progress hide" id="{{ id_prefix }}-progress">
+    <div class="progress hide" id="corpus-analysis-reader-progress">
       <div class="indeterminate"></div>
     </div>
     <table>
       <tbody>
-        <tr><td id="{{ id_prefix }}-corpus"></td></tr>
+        <tr><td id="corpus-analysis-reader-corpus"></td></tr>
       </tbody>
     </table>
-    <ul class="pagination hide" id="{{ id_prefix }}-corpus-pagination"></ul>
+    <ul class="pagination hide" id="corpus-analysis-reader-corpus-pagination"></ul>
   </div>
 </div>
 {% endmacro %}
 
 {# The extension modals #}
-{% macro modals(id_prefix) %}{% endmacro %}
+{% macro modals() %}{% endmacro %}
 
 {# The extension scripts #}
-{% macro scripts(id_prefix) %}
+{% macro scripts() %}
 <script>
-  const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp, "{{ id_prefix }}");
+  const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp);
 </script>
 {% endmacro %}

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

@@ -9,7 +9,7 @@
 
 
 {# The extension container content #}
-{% macro container_content(id_prefix) %}
+{% macro container_content() %}
 <div class="row">
     <div class="col s12">
       <h4><i class="material-icons left">query_stats</i>{{ name }}</h4>
@@ -124,7 +124,7 @@
 </div>
 {% endmacro %}
 
-{% macro modals(id_prefix) %}
+{% macro modals() %}
 <div class="modal modal-fixed-footer" id="frequencies-stopwords-setting-modal">
   <div class="modal-content">
     <h4>Settings</h4>
@@ -156,9 +156,9 @@
 </div>
 {% endmacro %}
 
-{% macro scripts(id_prefix) %}
+{% macro scripts() %}
 <script>
-  const corpusAnalysisStaticVisualization = new CorpusAnalysisStaticVisualization(corpusAnalysisApp, "{{ id_prefix }}");
+  const corpusAnalysisStaticVisualization = new CorpusAnalysisStaticVisualization(corpusAnalysisApp);
 </script>
 {% endmacro %}
  

app/templates/corpora/analysis.html.j2

@@ -4,58 +4,61 @@
 {% import 'corpora/_analysis/reader.html.j2' as reader_extension %}
 {% import 'corpora/_analysis/static_visualization.html.j2' as static_visualization_extension %}
 
-{% set extensions =
-  {
-    'corpus-analysis-app-concordance-extension': concordance_extension,
-    'corpus-analysis-app-reader-extension': reader_extension,
-    'corpus-analysis-app-static-visualizations-extension': static_visualization_extension
-  }
-%}
 
-
+{% block main_attribs %} class="service-scheme" data-service="corpus-analysis" id="corpus-analysis-container"{% endblock main_attribs %}
-{% block main_attribs %} class="service-scheme" data-service="corpus-analysis" id="corpus-analysis-app-container"{% endblock main_attribs %}
 
 
 {% block page_content %}
-<ul class="row tabs no-autoinit" id="corpus-analysis-app-extension-tabs">
+<ul class="row tabs no-autoinit" id="corpus-analysis-extension-tabs">
-  <li class="tab col s3"><a class="active" href="#corpus-analysis-app-home-container"><i class="nopaque-icons service-icons left" data-service="corpus-analysis"></i>Corpus analysis</a></li>
-  {% for id, extension in extensions.items() if extension.name != 'Static Visualization (beta)' %}
   <li class="tab col s3">
-    <a href="#{{ id }}-container"><i class="material-icons left">{{ extension.icon }}</i>{{ extension.name }}</a>
+    <a class="active" href="#corpus-analysis-home-container"><i class="nopaque-icons service-icons left" data-service="corpus-analysis"></i>Corpus analysis</a>
+  </li>
+  <li class="tab col s3">
+    <a href="#corpus-analysis-concordance-container"><i class="material-icons left">{{ concordance_extension.icon }}</i>{{ concordance_extension.name }}</a>
+  </li>
+  <li class="tab col s3">
+    <a href="#corpus-analysis-reader-container"><i class="material-icons left">{{ reader_extension.icon }}</i>{{ reader_extension.name }}</a>
   </li>
-  {% endfor %}
 </ul>
 
-<div id="corpus-analysis-app-home-container">
+<div id="corpus-analysis-home-container">
   <h1>{{ title }}</h1>
 
-  <div class="row" id="corpus-analysis-app-extension-cards">
+  <div class="row" id="corpus-analysis-extension-cards">
-    {% for id, extension in extensions.items() if extension.name != 'Static Visualization (beta)' %}
     <div class="col s3">
-      <div class="card extension-selector hoverable" data-target="{{ id }}-container">
+      <div class="card extension-selector hoverable" data-target="corpus-analysis-concordance-container">
         <div class="card-content">
-          <span class="card-title">{{ extension.name }}</span>
+          <span class="card-title">{{ concordance_extension.name }}</span>
-          <p>{{ extension.description }}</p>
+          <p>{{ concordance_extension.description }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="col s3">
+      <div class="card extension-selector hoverable" data-target="corpus-analysis-reader-container">
+        <div class="card-content">
+          <span class="card-title">{{ reader_extension.name }}</span>
+          <p>{{ reader_extension.description }}</p>
         </div>
       </div>
     </div>
-    {% endfor %}
   </div>
 
-  {{ static_visualization_extension.container_content('corpus-analysis-app-static-visualizations-extension') }}
+  {{ static_visualization_extension.container_content() }}
 </div>
 
 
-{% for id, extension in extensions.items() if extension.name != 'Static Visualization (beta)' %}
+<div id="corpus-analysis-concordance-container">
-<div id="{{ id }}-container">
+  {{ concordance_extension.container_content() }}
-  {{ extension.container_content(id) }}
+</div>
+
+<div id="corpus-analysis-reader-container">
+  {{ reader_extension.container_content() }}
 </div>
-{% endfor %}
 {% endblock page_content %}
 
 {% block modals %}
 {{ super() }}
-<div class="modal no-autoinit" id="corpus-analysis-app-init-modal">
+<div class="modal no-autoinit" id="corpus-analysis-init-modal">
   <div class="modal-content">
     <h4>We are preparing your analysis session</h4>
     <p>
@@ -70,9 +73,9 @@
   </div>
 </div>
 
-{% for id, extension in extensions.items() %}
+{{ concordance_extension.modals() }}
-{{ extension.modals(id) }}
+{{ reader_extension.modals() }}
-{% endfor %}
+{{ static_visualization_extension.modals() }}
 {% endblock modals %}
 
 {% block scripts %}
@@ -81,9 +84,9 @@
   const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }});
 </script>
 
-{% for id, extension in extensions.items() %}
+{{ concordance_extension.scripts() }}
-{{ extension.scripts(id) }}
+{{ reader_extension.scripts() }}
-{% endfor %}
+{{ static_visualization_extension.scripts() }}
 
 <script>
   corpusAnalysisApp.init();