Fix id reference errors

app/static/js/CorpusAnalysis/QueryBuilder.js

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

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

@@ -2,7 +2,7 @@ class ElementReferencesQueryBuilder {
   constructor() {
     // General Elements
     this.counter = 0;
-    this.queryInputField = document.querySelector('#concordance-extension-form-query-builder');
+    this.queryInputField = document.querySelector('#corpus-analysis-app-concordance-extension-form-query-builder');
     this.queryInputFieldInstance = M.Chips.getInstance(this.queryInputField);
     this.queryInputFieldContent = [];
 

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

@@ -2,45 +2,43 @@
 {% import 'corpora/_analysis/query_builder/_query_builder.html.j2' as query_builder with context %}
 
 
+{# The extension icon #}
 {% set icon = 'list_alt' %}
-{% set name = 'Concordance' %}
-{% set description = 'Query your corpus with the CQP query language utilizing a KWIC view.' %}
 
+{# The extension name #}
+{% set name = 'Concordance' %}
 
-{% set id_prefix = name.lower().replace(' ', '-') + '-extension' %}
+{# The extension description #}
+{% set description = 'Query your corpus with the CQP query language utilizing a KWIC view.' %}
 
-{% set tab_content %}
-<i class="material-icons left">list_alt</i>{{ name }}</a>
-{% endset %}
 
-{% set container_content %}
-<div class="row">
-  <div class="col s12">
-    <div class="card">
-      <div class="card-content">
-        <div class="row">
-          <div class="col s1">
-            <span class="card-title">Query <i class="material-icons left" style="font-size: inherit;">search</i></span>
-          </div>
-          <div class="col s2">
-            <div class="switch" style="margin-top:8px; margin-left:0px;">
-              <label>
-                <input type="checkbox" id="{{ id_prefix }}-expert-mode-switch">
-                <span class="lever"></span>
-                expert mode
-              </label>
-            </div>
-          </div>
-        </div>
-        <div id="{{ id_prefix }}-expert-mode-display" class="hide">
-          {{ expert_mode.card_content(id_prefix) }}
-        </div>
-        <div id="{{ id_prefix }}-query-builder-display">
-          {{ query_builder.card_content(id_prefix) }}
+{# The extension container content #}
+{% macro container_content(id_prefix) %}
+<div class="card">
+  <div class="card-content">
+    <div class="row">
+      <div class="col s1">
+        <span class="card-title">Query <i class="material-icons left" style="font-size: inherit;">search</i></span>
+      </div>
+      <div class="col s2">
+        <div class="switch" style="margin-top:8px; margin-left:0px;">
+          <label>
+            <input type="checkbox" id="{{ id_prefix }}-expert-mode-switch">
+            <span class="lever"></span>
+            expert mode
+          </label>
         </div>
       </div>
     </div>
+    <div id="{{ id_prefix }}-expert-mode-display" class="hide">
+      {{ expert_mode.card_content(id_prefix) }}
+    </div>
+    <div id="{{ id_prefix }}-query-builder-display">
+      {{ query_builder.card_content(id_prefix) }}
+    </div>
   </div>
+</div>
+</div>
 
 <div id="{{ id_prefix }}-subcorpus-list"></div>
 
@@ -122,15 +120,16 @@
 </div>
 {% endmacro %}
 
-{% set modals %}
-{{ query_builder.structural_attribute_modal() }}
-{{ query_builder.positional_attribute_modal() }}
-{% endset %}
+{# The extension modals #}
+{% macro modals(id_prefix) %}
+{{ query_builder.structural_attribute_modal(id_prefix) }}
+{{ query_builder.positional_attribute_modal(id_prefix) }}
+{% endmacro %}
 
 {# The extension scripts #}
 {% macro scripts(id_prefix) %}
 <script>
-  const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
+  const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp, "{{ id_prefix }}");
 
   let queryBuilderDisplay = document.getElementById("{{ id_prefix }}-query-builder-display");
   let expertModeDisplay = document.getElementById("{{ id_prefix }}-expert-mode-display");
@@ -148,4 +147,4 @@
   const concordanceQueryBuilder = new ConcordanceQueryBuilder();
 </script>
 {# {{ query_builder.scripts() }} #}
-{% endset %}
+{% endmacro %}