Update corpus analysis extensions to use dynamic id prefixes for elements

app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js

 class CorpusAnalysisConcordance {
   name = 'Concordance';
 
-  constructor(app) {
+  constructor(app, idPrefix) {
     this.app = app;
 
     this.data = {};
 
     this.elements = {
-      // TODO: Prefix elements with "corpus-analysis-app-"
-      container: document.querySelector('#concordance-extension-container'),
-      error: document.querySelector('#concordance-extension-error'),
-      UIForm: document.querySelector('#concordance-extension-ui-form'),
-      form: document.querySelector('#concordance-extension-form'),
-      progress: document.querySelector('#concordance-extension-progress'),
-      subcorpusInfo: document.querySelector('#concordance-extension-subcorpus-info'),
-      subcorpusActions: document.querySelector('#concordance-extension-subcorpus-actions'),
-      subcorpusItems: document.querySelector('#concordance-extension-subcorpus-items'),
-      subcorpusList: document.querySelector('#concordance-extension-subcorpus-list'),
-      subcorpusPagination: document.querySelector('#concordance-extension-subcorpus-pagination')
+      container: document.querySelector(`#${idPrefix}-container`),
+      error: document.querySelector(`#${idPrefix}-error`),
+      UIForm: document.querySelector(`#${idPrefix}-ui-form`),
+      form: document.querySelector(`#${idPrefix}-form`),
+      progress: document.querySelector(`#${idPrefix}-progress`),
+      subcorpusInfo: document.querySelector(`#${idPrefix}-subcorpus-info`),
+      subcorpusActions: document.querySelector(`#${idPrefix}-subcorpus-actions`),
+      subcorpusItems: document.querySelector(`#${idPrefix}-subcorpus-items`),
+      subcorpusList: document.querySelector(`#${idPrefix}-subcorpus-list`),
+      subcorpusPagination: document.querySelector(`#${idPrefix}-subcorpus-pagination`)
     };
 
     this.settings = {
@@ -383,7 +382,9 @@ class CorpusAnalysisConcordance {
           document.getSelection().removeAllRanges();
           document.getSelection().addRange(range);
         });
-        this.app.elements.m.extensionTabs.select('reader-extension-container');
+        this.app.elements.m.extensionTabs.select(
+          this.app.extensions.Reader.elements.container.id
+        );
       });
     }
     for (let selectTriggerElement of this.elements.subcorpusItems.querySelectorAll('.select-trigger')) {

app/static/js/CorpusAnalysis/CorpusAnalysisReader.js

 class CorpusAnalysisReader {
   name = 'Reader';
 
-  constructor(app) {
+  constructor(app, idPrefix) {
     this.app = app;
 
     this.data = {};
 
     this.elements = {
-      // TODO: Prefix elements with "corpus-analysis-app-"
-      container: document.querySelector('#reader-extension-container'),
-      error: document.querySelector('#reader-extension-error'),
-      form: document.querySelector('#reader-extension-form'),
-      progress: document.querySelector('#reader-extension-progress'),
-      corpus: document.querySelector('#reader-extension-corpus'),
-      corpusPagination: document.querySelector('#reader-extension-corpus-pagination')
+      container: document.querySelector(`#${idPrefix}-container`),
+      error: document.querySelector(`#${idPrefix}-error`),
+      form: document.querySelector(`#${idPrefix}-form`),
+      progress: document.querySelector(`#${idPrefix}-progress`),
+      corpus: document.querySelector(`#${idPrefix}-corpus`),
+      corpusPagination: document.querySelector(`#${idPrefix}-corpus-pagination`)
     };
 
     this.settings = {

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

@@ -170,7 +170,7 @@
 {# The extension scripts #}
 {% macro scripts(id_prefix) %}
 <script>
-  const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
+  const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp, "{{ id_prefix }}");
   {# const concordanceQueryBuilder = new ConcordanceQueryBuilder(); #}
 
   let queryBuilderDisplay = document.getElementById("{{ id_prefix }}-query-builder-display");

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

@@ -79,6 +79,6 @@
 {# The extension scripts #}
 {% macro scripts(id_prefix) %}
 <script>
-  const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp);
+  const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp, "{{ id_prefix }}");
 </script>
 {% endmacro %}

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

@@ -158,7 +158,7 @@
 
 {% macro scripts(id_prefix) %}
 <script>
-  const corpusAnalysisStaticVisualization = new CorpusAnalysisStaticVisualization(corpusAnalysisApp);
+  const corpusAnalysisStaticVisualization = new CorpusAnalysisStaticVisualization(corpusAnalysisApp, "{{ id_prefix }}");
 </script>
 {% endmacro %}
  
\ No newline at end of file

app/templates/corpora/analysis.html.j2

@@ -6,9 +6,9 @@
 
 {% set extensions =
   {
-    'concordance-extension': concordance_extension,
-    'reader-extension': reader_extension,
-    'static-visualizations-extension': static_visualization_extension
+    'corpus-analysis-app-concordance-extension': concordance_extension,
+    'corpus-analysis-app-reader-extension': reader_extension,
+    'corpus-analysis-app-static-visualizations-extension': static_visualization_extension
   }
 %}
 
@@ -42,7 +42,7 @@
     {% endfor %}
   </div>
 
-  {{ static_visualization_extension.container_content('static-visualizations-extension') }}
+  {{ static_visualization_extension.container_content('corpus-analysis-app-static-visualizations-extension') }}
 </div>