First take on cleaning up the corpus analysis template code

app/templates/corpora/analysis.html.j2

@@ -1,12 +1,19 @@
 {% extends "base.html.j2" %}
 {% import "materialize/wtf.html.j2" as wtf %}
+{% import 'corpora/analysis_extensions/concordance.html.j2' as concordance_extension %}
+{% import 'corpora/analysis_extensions/reader.html.j2' as reader_extension %}
+
+{% set extensions = [concordance_extension, reader_extension] %}
 {% 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">
   <li class="tab col s3"><a class="active" href="#corpus-analysis-app-overview"><i class="nopaque-icons service-icons left" data-service="corpus-analysis"></i>Corpus analysis</a></li>
-  <li class="tab col s3"><a href="#concordance-extension-container"><i class="material-icons left">list_alt</i>Concordance</a></li>
-  <li class="tab col s3"><a href="#reader-extension-container"><i class="material-icons left">chrome_reader_mode</i>Reader</a></li>
+  {% for extension in extensions %}
+  <li class="tab col s3"><a href="#{{ extension.id_prefix }}-container">{{ extension.tab_content }}</a></li>
+  {% endfor %}
 </ul>
 
 <div class="row" id="corpus-analysis-app-overview">
@@ -14,29 +21,23 @@
     <h1>{{ title }}</h1>
   </div>
 
+  {% for extension in extensions %}
   <div class="col s3">
-    <div class="card extension-selector hoverable" data-target="concordance-extension-container">
+    <div class="card extension-selector hoverable" data-target="{{ extension.id_prefix }}-container">
       <div class="card-content">
-        <span class="card-title"><i class="material-icons left">list_alt</i>Concordance</span>
-        <p>Query your corpus with the CQP query language utilizing a KWIC view.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="col s3">
-    <div class="card extension-selector hoverable" data-target="reader-extension-container">
-      <div class="card-content">
-        <span class="card-title"><i class="material-icons left">chrome_reader_mode</i>Reader</span>
-        <p>Inspect your corpus in detail with a full text view, including annotations.</p>
+        <span class="card-title">{{ extension.name }}</span>
+        <p>{{ extension.description }}</p>
       </div>
     </div>
   </div>
+  {% endfor %}
 </div>
 
-{#  #}
-{% include "corpora/_analysis/reader.html.j2" %}
-
-{% include "corpora/_analysis/concordance.html.j2" %}
+{% for extension in extensions %}
+<div id="{{ extension.id_prefix }}-container">
+  {{ extension.container_content }}
+</div>
+{% endfor %}
 {% endblock page_content %}
 
 {% block modals %}
@@ -54,33 +55,9 @@
   </div>
 </div>
 
-<div class="modal" id="example-modal">
-  <div class="modal-content">
-    <div class="row">
-      <div class="col s12">
-        <h4>Examples</h4>
-        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
-        tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero 
-        eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
-        takimata sanctus est Lorem ipsum dolor sit amet.</p>
-      </div>
-      <div class="col s8">
-        <table>
-          <tr>
-            <th>You are looking for...</th>
-            <th>Type in:</th>
-            <th>Result:</th>
-          </tr>
-          <tr>
-            <td>The word "begin" </td>
-            <td>[word="begin"];</td>
-            <td><a class="tooltipped" data-position="bottom" data-tooltip="List all examples of the word within a corpus that you searched for.">Concordance</a> of the word begin</td>
-          </tr>
-        </table>
-      </div>
-    </div>
-  </div>
-</div>
+{% for extension in extensions %}
+{{ extension.modals }}
+{% endfor %}
 
 <div class="modal" id="concordance-query-builder">
   <div class="modal-content">
@@ -409,11 +386,14 @@
 {% block scripts %}
 {{ super() }}
 <script>
-const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }});
-const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
-const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp);
-const concordanceQueryBuilder = new ConcordanceQueryBuilder();
+  const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }});
+</script>
 
-corpusAnalysisApp.init();
+{% for extension in extensions %}
+{{ extension.scripts }}
+{% endfor %}
+
+<script>
+  corpusAnalysisApp.init();
 </script>
 {% endblock scripts %}

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

@@ -1,24 +1,37 @@
-<div class="row" id="concordance-extension-container">
+{% set name = 'Concordance' %}
+
+{% set description %}
+Query your corpus with the CQP query language utilizing a KWIC view.
+{% endset %}
+
+{% set id_prefix = name.lower().replace(' ', '-') + '-extension' %}
+
+{% 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">
-        <form id="concordance-extension-form">
+        <form id="{{ id_prefix }}-form">
           <div class="row">
             <div class="input-field col s12 m9">
               <i class="material-icons prefix">search</i>
-              <input class="validate corpus-analysis-action" id="concordance-extension-form-query" name="query" type="text" required pattern=".*\S+.*" placeholder="Type in your query or use the Query Builder on the right"</input>
-              <label for="concordance-extension-form-query">Query</label>
-              <span class="error-color-text helper-text hide" id="concordance-extension-error"></span>
+              <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>
+              <label for="{{ id_prefix }}-form-query">Query</label>
+              <span class="error-color-text helper-text hide" id="{{ id_prefix }}-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>
               <span> | </span>
-              <a class="modal-trigger" href="#example-modal"><i class="material-icons" style="font-size: inherit;">info</i> Examples</a>
+              <a class="modal-trigger" href="#{{ id_prefix }}-example-modal"><i class="material-icons" style="font-size: inherit;">info</i> Examples</a>
             </div>
             <div class="input-field col s12 m3">
               <i class="material-icons prefix">arrow_forward</i>
-              <input class="validate corpus-analysis-action" id="concordance-extension-form-subcorpus-name" name="subcorpus-name" type="text" required pattern="^[A-Z][a-z0-9\-]*" value="Last"></input>
-              <label for="concordance-extension-form-subcorpus-name">Subcorpus name</label>
+              <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>
+              <label for="{{ id_prefix }}-form-subcorpus-name">Subcorpus name</label>
             </div>
             <div class="col s12 m9 l9">
               <div class="row">
@@ -70,7 +83,7 @@
                 <i class="material-icons left">build</i>
                 Query builder (beta)
               </a>
-              <button class="btn waves-effect waves-light corpus-analysis-action" id="concordance-extension-form-submit" type="submit" name="submit">
+              <button class="btn 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>
@@ -82,16 +95,16 @@
   </div>
 
   <div class="col s12">
-    <div id="concordance-extension-subcorpus-list"></div>
+    <div id="{{ id_prefix }}-subcorpus-list"></div>
 
     <div class="card">
       <div class="card-content">
-        <div class="progress hide" id="concordance-extension-progress">
+        <div class="progress hide" id="{{ id_prefix }}-progress">
           <div class="indeterminate"></div>
         </div>
         <div class="row">
-          <div class="col s9"><p class="hide" id="concordance-extension-subcorpus-info"></p></div>
-          <div class="col s3 right-align" id="concordance-extension-subcorpus-actions"></div>
+          <div class="col s9"><p class="hide" id="{{ id_prefix }}-subcorpus-info"></p></div>
+          <div class="col s3 right-align" id="{{ id_prefix }}-subcorpus-actions"></div>
         </div>
         <table class="highlight">
           <thead>
@@ -104,10 +117,48 @@
               <th class="left-align" style="width: 5%;"></th>
             </tr>
           </thead>
-          <tbody id="concordance-extension-subcorpus-items"></tbody>
+          <tbody id="{{ id_prefix }}-subcorpus-items"></tbody>
         </table>
-        <ul class="pagination hide" id="concordance-extension-subcorpus-pagination"></ul>
+        <ul class="pagination hide" id="{{ id_prefix }}-subcorpus-pagination"></ul>
       </div>
     </div>
   </div>
 </div>
+{% endset %}
+
+{% set modals %}
+<div class="modal" id="{{ id_prefix }}-example-modal">
+  <div class="modal-content">
+    <div class="row">
+      <div class="col s12">
+        <h4>Examples</h4>
+        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
+        tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero 
+        eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
+        takimata sanctus est Lorem ipsum dolor sit amet.</p>
+      </div>
+      <div class="col s8">
+        <table>
+          <tr>
+            <th>You are looking for...</th>
+            <th>Type in:</th>
+            <th>Result:</th>
+          </tr>
+          <tr>
+            <td>The word "begin" </td>
+            <td>[word="begin"];</td>
+            <td><a class="tooltipped" data-position="bottom" data-tooltip="List all examples of the word within a corpus that you searched for.">Concordance</a> of the word begin</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+{% endset %}
+
+{% set scripts %}
+<script>
+  const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);
+  const concordanceQueryBuilder = new ConcordanceQueryBuilder();
+</script>
+{% endset %}

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

@@ -1,4 +1,17 @@
-<div class="row" id="reader-extension-container">
+{% set name = 'Reader' %}
+
+{% set description %}
+Inspect your corpus in detail with a full text view, including annotations.
+{% endset %}
+
+{% set id_prefix = name.lower().replace(' ', '-') + '-extension' %}
+
+{% set tab_content %}
+<i class="material-icons left">chrome_reader_mode</i>{{ name }}</a>
+{% endset %}
+
+{% set container_content %}
+<div class="row">
   <div class="col s12">
     <div class="card">
       <div class="card-content">
@@ -65,3 +78,12 @@
     </div>
   </div>
 </div>
+{% endset %}
+
+{% set modals = '' %}
+
+{% set scripts %}
+<script>
+  const corpusAnalysisReader = new CorpusAnalysisReader(corpusAnalysisApp);
+</script>
+{% endset %}

app/templates/corpora/analysis_extensions/template.html.j2

@@ -0,0 +1,26 @@
+
+{# The extension name #}
+{% set name = '' %}
+
+{# The extension description #}
+{% set description = '' %}
+
+{# 
+  The extension id prefix, used for related HTML elements with an id.
+  The prefix is used to avoid id conflicts with other extensions.
+  Reserved ids (do not use):
+    - <id_prefix>-extension-container
+#}
+{% set id_prefix = name.lower().replace(' ', '-') + '-extension' %}
+
+{# The extension tab content #}
+{% set tab_content = name %}
+
+{# The extension container content #}
+{% set container_content = '' %}
+
+{# The extension modals #}
+{% set modals = '' %}
+
+{# The extension scripts #}
+{% set scripts = '' %}