Rework corpora package

2025-11-04 12:22:47 +00:00 · 2020-10-29 14:45:55 +01:00
parent 554702130c
commit 4052991b08
14 changed files with 368 additions and 267 deletions
--- a/web/app/corpora/forms.py
+++ b/web/app/corpora/forms.py
@@ -9,21 +9,22 @@ class AddCorpusFileForm(FlaskForm):
    '''
    Form to add a .vrt corpus file to the current corpus.
    '''
-    address = StringField('Adress', validators=[Length(0, 255)])
+    # Required fields
    author = StringField('Author', validators=[DataRequired(), Length(1, 255)])
+    file = FileField('File', validators=[DataRequired()])
+    title = StringField('Title', validators=[DataRequired(), Length(1, 255)])
+    # Optional fields
+    address = StringField('Adress', validators=[Length(0, 255)])
    booktitle = StringField('Booktitle', validators=[Length(0, 255)])
    chapter = StringField('Chapter', validators=[Length(0, 255)])
    editor = StringField('Editor', validators=[Length(0, 255)])
-    file = FileField('File', validators=[DataRequired()])
    institution = StringField('Institution', validators=[Length(0, 255)])
    journal = StringField('Journal', validators=[Length(0, 255)])
    pages = StringField('Pages', validators=[Length(0, 255)])
    publisher = StringField('Publisher', validators=[Length(0, 255)])
-    publishing_year = IntegerField('Publishing year',
-                                   validators=[DataRequired()])
+    publishing_year = IntegerField('Publishing year')
    school = StringField('School', validators=[Length(0, 255)])
    submit = SubmitField()
-    title = StringField('Title', validators=[DataRequired(), Length(1, 255)])

    def __init__(self, corpus, *args, **kwargs):
        super(AddCorpusFileForm, self).__init__(*args, **kwargs)
@@ -43,8 +44,11 @@ class EditCorpusFileForm(FlaskForm):
    '''
    Form to edit meta data of one corpus file.
    '''
-    address = StringField('Adress', validators=[Length(0, 255)])
+    # Required fields
    author = StringField('Author', validators=[DataRequired(), Length(1, 255)])
+    title = StringField('Title', validators=[DataRequired(), Length(1, 255)])
+    # Optional fields
+    address = StringField('Adress', validators=[Length(0, 255)])
    booktitle = StringField('Booktitle', validators=[Length(0, 255)])
    chapter = StringField('Chapter', validators=[Length(0, 255)])
    editor = StringField('Editor', validators=[Length(0, 255)])
@@ -52,11 +56,9 @@ class EditCorpusFileForm(FlaskForm):
    journal = StringField('Journal', validators=[Length(0, 255)])
    pages = StringField('Pages', validators=[Length(0, 255)])
    publisher = StringField('Publisher', validators=[Length(0, 255)])
-    publishing_year = IntegerField('Publishing year',
-                                   validators=[DataRequired()])
+    publishing_year = IntegerField('Publishing year')
    school = StringField('School', validators=[Length(0, 255)])
    submit = SubmitField()
-    title = StringField('Title', validators=[DataRequired(), Length(1, 255)])


 class AddCorpusForm(FlaskForm):
--- a/web/app/corpora/views.py
+++ b/web/app/corpora/views.py
@@ -77,6 +77,7 @@ def analyse_corpus(corpus_id):
        prefix='inspect-display-options-form')
    return render_template(
        'corpora/analyse_corpus.html.j2',
+        corpus=corpus,
        corpus_id=corpus_id,
        display_options_form=display_options_form,
        query_form=query_form,
--- a/web/app/static/css/nopaque.css
+++ b/web/app/static/css/nopaque.css
@@ -1,3 +1,7 @@
+.tab .material-icons {
+  line-height: inherit;
+}
+
 /* add custom bold class */
 .bold {
  font-weight: bold;
--- a/web/app/static/js/nopaque.lists.js
+++ b/web/app/static/js/nopaque.lists.js
@@ -85,7 +85,6 @@ RessourceList.dataMappers = {
    author: corpus_file.author,
    filename: corpus_file.filename,
    link: `${corpus_file.corpus_id}/files/${corpus_file.id}`,
-    publishing_year: corpus_file.publishing_year,
    title: corpus_file.title,
    title1: corpus_file.title,
    "delete-link": `/corpora/${corpus_file.corpus_id}/files/${corpus_file.id}/delete`,
@@ -239,7 +238,6 @@ RessourceList.options = {
             <td class="filename" style="word-break: break-word;"></td>
             <td class="author" style="word-break: break-word;"></td>
             <td class="title" style="word-break: break-word;"></td>
-             <td class="publishing_year" style="word-break: break-word;"></td>
             <td>
               <div class="right-align">
                 <a class="btn-floating modal-trigger red tooltipped waves-effect waves-light delete-modal-trigger" data-position="top" data-tooltip="Delete">
@@ -267,7 +265,6 @@ RessourceList.options = {
    valueNames: [
      "author",
      "filename",
-      "publishing_year",
      "title",
      "title1",
      {name: "delete-link", attr: "href"},
--- a/web/app/templates/corpora/add_corpus.html.j2
+++ b/web/app/templates/corpora/add_corpus.html.j2
@@ -1,29 +1,53 @@
 {% extends "nopaque.html.j2" %}
+{% from '_colors.html.j2' import colors %}
+{% import 'materialize/wtf.html.j2' as wtf %}
+
+{% set scheme_primary_color = colors.corpus_analysis_darken %}
+{% set scheme_secondary_color = colors.corpus_analysis %}
+
+{% block nav_content %}
+<ul class="tabs tabs-transparent">
+  <li class="tab"><a href="{{ url_for('main.dashboard', _anchor='corpora') }}" target="_self">My Corpora</a></li>
+  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
+  <li class="tab"><a class="active" href="{{ url_for('corpora.add_corpus') }}" target="_self">Add</a></li>
+</ul>
+{% endblock nav_content %}
+
+{% block main_attribs %} class="corpus-analysis-color lighten"{% endblock main_attribs %}

 {% block page_content %}
-<div class="col s12 m4">
+<div class="container">
+  <div class="row">
+    <div class="col s12">
+      <p class="hide-on-small-only">&nbsp;</p>
+      <h1 id="title">{{ title }}</h1>
+    </div>
+
+    <div class="col s12 m4">
      <p>Fill out the following form to add a corpus to your corpora.</p>
      <a class="waves-effect waves-light btn" href="{{ url_for('main.dashboard') }}"><i class="material-icons left">arrow_back</i>Back to dashboard</a>
-</div>
+    </div>

-<div class="col s12 m8">
+    <div class="col s12 m8">
      <div class="card">
        <form method="POST">
          <div class="card-content">
            {{ add_corpus_form.hidden_tag() }}
            <div class="row">
              <div class="col s12 m4">
-            {{ M.render_field(add_corpus_form.title, data_length='32', material_icon='title') }}
+                {{ wtf.render_field(add_corpus_form.title, data_length='32', material_icon='title') }}
              </div>
              <div class="col s12 m8">
-            {{ M.render_field(add_corpus_form.description, data_length='255', material_icon='description') }}
+                {{ wtf.render_field(add_corpus_form.description, data_length='255', material_icon='description') }}
              </div>
            </div>
          </div>
          <div class="card-action right-align">
-        {{ M.render_field(add_corpus_form.submit, material_icon='send') }}
+            {{ wtf.render_field(add_corpus_form.submit, material_icon='send') }}
          </div>
        </form>
      </div>
+    </div>
+  </div>
 </div>
 {% endblock %}
--- a/web/app/templates/corpora/add_corpus_file.html.j2
+++ b/web/app/templates/corpora/add_corpus_file.html.j2
@@ -1,41 +1,56 @@
 {% extends "nopaque.html.j2" %}
+{% from '_colors.html.j2' import colors %}
+{% import 'materialize/wtf.html.j2' as wtf %}
+
+{% set scheme_primary_color = colors.corpus_analysis_darken %}
+{% set scheme_secondary_color = colors.corpus_analysis %}
+
+{% block main_attribs %} class="corpus-analysis-color lighten"{% endblock main_attribs %}
+
+{% block nav_content %}
+<ul class="tabs tabs-transparent">
+  <li class="tab"><a href="{{ url_for('main.dashboard', _anchor='corpora') }}" target="_self">My Corpora</a></li>
+  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
+  <li class="tab"><a href="{{ url_for('corpora.corpus', corpus_id=corpus.id) }}" target="_self">{{ corpus.title }}</a></li>
+  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
+  <li class="tab"><a href="{{ url_for('corpora.corpus', corpus_id=corpus.id, _anchor='corpus-files') }}" target="_self">Corpus files</a></li>
+  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
+  <li class="tab"><a class="active" href="{{ url_for('corpora.add_corpus_file', corpus_id=corpus.id) }}" target="_self">Add</a></li>
+</ul>
+{% endblock nav_content %}

 {% block page_content %}
-<div class="col s12 m4">
-  <h3>{{ corpus.title }}</h3>
-  <p>
-    Fill out the following form to add a corpus file in verticalized text
-    format (.vrt).
-  </p>
-  <p>
-    <strong>Do not use the .stand-off.vrt file!</strong>
-  </p>
-  <a class="waves-effect waves-light btn" href="{{ url_for('corpora.corpus', corpus_id=corpus.id) }}"><i class="material-icons left">arrow_back</i>Back to corpus</a>
-</div>
+<div class="container">
+  <div class="row">
+    <div class="col s12">
+      <p>&nbsp;</p>
+      <h1 id="title">{{ title }}</h1>
+    </div>

-<div class="col s12 m8">
+    <div class="col s12 m4">
+      <p>Fill out the following form to add a corpus file in verticalized text format (.vrt).</p>
+      <p><b>Do not use the .stand-off.vrt file!</b></p>
+    </div>
+
+    <div class="col s12 m8">
      <form class="nopaque-submit-form" data-progress-modal="progress-modal">
        <div class="card">
          <div class="card-content">
-        <span class="card-title">Required metadata</span>
            {{ add_corpus_file_form.hidden_tag() }}
            <div class="row">
              <div class="col s12 m4">
-            {{ M.render_field(add_corpus_file_form.author, data_length='255', material_icon='person') }}
+                {{ wtf.render_field(add_corpus_file_form.author, data_length='255', material_icon='person') }}
              </div>
              <div class="col s12 m4">
-            {{ M.render_field(add_corpus_file_form.title, data_length='255', material_icon='title') }}
-          </div>
-          <div class="col s12 m4">
-            {{ M.render_field(add_corpus_file_form.publishing_year, material_icon='access_time') }}
+                {{ wtf.render_field(add_corpus_file_form.title, data_length='255', material_icon='title') }}
              </div>
              <div class="col s12">
-            {{ M.render_field(add_corpus_file_form.file, accept='.vrt', placeholder='Choose your .vrt file') }}
+                {{ wtf.render_field(add_corpus_file_form.file, accept='.vrt', placeholder='Choose your .vrt file') }}
              </div>
            </div>
          </div>
          <div class="card-action right-align">
-        {{ M.render_field(add_corpus_file_form.submit, material_icon='send') }}
+            {{ wtf.render_field(add_corpus_file_form.submit, material_icon='send') }}
          </div>
        </div>
        <br>
@@ -44,8 +59,8 @@
            <div class="collapsible-header"><i class="material-icons">add</i>Add additional metadata</div>
            <div class="collapsible-body">
              {% for field in add_corpus_file_form
-             if field.short_name not in ['author', 'csrf_token', 'file', 'publishing_year', 'submit', 'title'] %}
-          {{ M.render_field(field, data_length='255', material_icon=field.label.text[0:1]) }}
+                 if field.short_name not in ['author', 'csrf_token', 'file', 'submit', 'title'] %}
+              {{ wtf.render_field(field, data_length='255', material_icon=field.label.text[0:1]) }}
              {% endfor %}
            </div>
          </li>
@@ -66,6 +81,8 @@
          </li>
        </ul>
      </form>
+    </div>
+  </div>
 </div>

 <div id="progress-modal" class="modal">
--- a/web/app/templates/corpora/analyse_corpus.html.j2
+++ b/web/app/templates/corpora/analyse_corpus.html.j2
@@ -1,12 +1,26 @@
 {% extends "nopaque.html.j2" %}
+{% from '_colors.html.j2' import colors %}
+{% import 'materialize/wtf.html.j2' as wtf %}

-{% set headline = ' ' %}
+{% set scheme_primary_color = colors.corpus_analysis_darken %}
+{% set scheme_secondary_color = colors.corpus_analysis %}

-{% set full_width = True %}
+{% block nav_content %}
+<ul class="tabs tabs-transparent">
+  <li class="tab"><a href="{{ url_for('main.dashboard', _anchor='corpora') }}" target="_self">My Corpora</a></li>
+  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
+  <li class="tab"><a href="{{ url_for('corpora.corpus', corpus_id=corpus.id) }}" target="_self">{{ corpus.title }}</a></li>
+  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
+  <li class="tab"><a href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}" target="_self">Corpus Analysis</a></li>
+</ul>
+{% endblock nav_content %}
+
+{% block main_attribs %} class="corpus-analysis-color lighten"{% endblock main_attribs %}

 {% block page_content %}
-{{ Macros.insert_color_scheme(corpus_analysis_color_darken) }}
-<div class="col s12">
+<div class="row">
+  <div class="col s12">
+    <p class="hide-on-small-only">&nbsp;</p>
    <div class="card">
      <div class="card-content" style="padding-top: 5px;
                               padding-bottom: 0px;">
@@ -27,7 +41,7 @@
                </span>
              </div>
              <div class="col s12 m2 center-align" style="margin-top: 1.75em;">
-              {{ M.render_field(query_form.submit, material_icon='send',
+                {{ wtf.render_field(query_form.submit, material_icon='send',
                                  style='width:100%;') }}
              </div>
            </div>
@@ -35,10 +49,10 @@
        </div>
      </div>
    </div>
-</div>
+  </div>

-<!-- entire results div/card -->
-<div class="col s12" id="query-display">
+  <!-- entire results div/card -->
+  <div class="col s12" id="query-display">
    <div class="card">
      <div class="card-content" id="result-list" style="overflow: hidden;">
        <div id="interactions-menu" class="row hide"
@@ -54,6 +68,7 @@
        {% include 'tables/query_results.html.j2' %}
      </div>
    </div>
+  </div>
 </div>

 <!-- Scroll to top element -->
@@ -65,7 +80,10 @@
 {% include 'modals/export_query_results.html.j2' %}
 {% include 'modals/context_modal.html.j2' %}
 {% include 'modals/show_corpus_files.html.j2' %}
+{% endblock page_content %}

+{% block scripts %}
+{{ super() }}
 <!-- import modules -->
 <script type="module">
 /**
--- a/web/app/templates/corpora/corpus.html.j2
+++ b/web/app/templates/corpora/corpus.html.j2
@@ -1,9 +1,29 @@
 {% extends "nopaque.html.j2" %}
+{% from '_colors.html.j2' import colors %}
+
+{% set scheme_primary_color = colors.corpus_analysis_darken %}
+{% set scheme_secondary_color = colors.corpus_analysis %}
+
+{% block nav_content %}
+<ul class="tabs tabs-transparent">
+  <li class="tab"><a href="{{ url_for('main.dashboard', _anchor='corpora') }}" target="_self">My Corpora</a></li>
+  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
+  <li class="tab"><a class="active" href="{{ url_for('corpora.corpus', corpus_id=corpus.id) }}" target="_self">{{ corpus.title }}</a></li>
+</ul>
+{% endblock nav_content %}
+
+{% block main_attribs %} class="corpus-analysis-color lighten"{% endblock main_attribs %}

 {% block page_content %}
-<div class="col s12 m4">
-  <h3 id="title">{{ corpus.title }}</h3>
+<div class="container">
+  <div class="row">
+    <div class="col s12">
+      <p class="hide-on-small-only">&nbsp;</p>
+      <h1 id="title">{{ corpus.title }}</h1>
      <p id="description">{{ corpus.description }}</p>
+    </div>
+
+    <div class="col s12 m4">
      <div class="active preloader-wrapper small hide" id="progress-indicator">
        <div class="spinner-layer spinner-blue-only">
          <div class="circle-clipper left">
@@ -18,9 +38,9 @@
        </div>
      </div>
      <span class="chip status white-text hide" id="status"></span>
-</div>
+    </div>

-<div class="col s12 m8">
+    <div class="col s12 m8">
      <div class="card">
        <div class="card-content">
          <span class="card-title">Chronometrics</span>
@@ -53,14 +73,14 @@
          <a data-target="delete-corpus-modal" class="btn modal-trigger red waves-effect waves-light"><i class="material-icons left">delete</i>Delete</a>
        </div>
      </div>
-</div>
+    </div>

-<div class="col s12"></div>
+    <div class="col s12"></div>

-<div class="col s12">
+    <div class="col s12">
      <div class="card">
        <div class="card-content" id="corpus-files" style="overflow: hidden;">
-      <span class="card-title">Files</span>
+          <span class="card-title" id="files">Corpus files</span>
          <div class="input-field">
            <i class="material-icons prefix">search</i>
            <input id="search-results" class="search" type="search"></input>
@@ -73,7 +93,6 @@
                <th class="sort" data-sort="filename">Filename</th>
                <th class="sort" data-sort="author">Author</th>
                <th class="sort" data-sort="title">Title</th>
-            <th class="sort" data-sort="publishing_year">Publishing year</th>
                <th>{# Actions #}</th>
              </tr>
            </thead>
@@ -93,9 +112,10 @@
          <a href="{{ url_for('corpora.add_corpus_file', corpus_id=corpus.id) }}" class="btn waves-effect waves-light"><i class="material-icons left">add</i>Add corpus file</a>
        </div>
      </div>
+    </div>
+  </div>
 </div>

-
 <!-- Modals -->
 <div id="delete-corpus-modal" class="modal">
  <div class="modal-content">
@@ -107,7 +127,10 @@
    <a href="{{ url_for('corpora.delete_corpus', corpus_id=corpus.id) }}" class="btn modal-close red waves-effect waves-light"><i class="material-icons left">delete</i>Delete</a>
  </div>
 </div>
+{% endblock page_content %}

+{% block scripts %}
+{{ super() }}
 <script type="module">
  import {RessourceList} from '../../static/js/nopaque.lists.js';
  class InformationUpdater {
@@ -193,14 +216,10 @@
  var informationUpdater = new InformationUpdater({{ corpus.id }}, false);
  {% else %}
  var informationUpdater = new InformationUpdater({{ corpus.id }}, true);
-  document.addEventListener("DOMContentLoaded", () => {
  nopaque.socket.emit("foreign_user_data_stream_init", {{ corpus.user_id }});
-  });
  {% endif %}

  let corpusFilesList = new RessourceList("corpus-files", null, "CorpusFile");
-  document.addEventListener("DOMContentLoaded", () => {
  corpusFilesList._add({{ corpus_files|tojson|safe }});
-  });
 </script>
-{% endblock %}
+{% endblock scripts %}
--- a/web/app/templates/corpora/corpus_file.html.j2
+++ b/web/app/templates/corpora/corpus_file.html.j2
@@ -1,31 +1,48 @@
 {% extends "nopaque.html.j2" %}
+{% from '_colors.html.j2' import colors %}
+{% import 'materialize/wtf.html.j2' as wtf %}
+
+{% set scheme_primary_color = colors.corpus_analysis_darken %}
+{% set scheme_secondary_color = colors.corpus_analysis %}
+
+{% block nav_content %}
+<ul class="tabs tabs-transparent">
+  <li class="tab"><a href="{{ url_for('main.dashboard', _anchor='corpora') }}" target="_self">My Corpora</a></li>
+  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
+  <li class="tab"><a href="{{ url_for('corpora.corpus', corpus_id=corpus_file.corpus.id) }}" target="_self">{{ corpus_file.corpus.title }}</a></li>
+  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
+  <li class="tab"><a href="{{ url_for('corpora.corpus', corpus_id=corpus_file.corpus.id, _anchor='corpus-files') }}" target="_self">Corpus files</a></li>
+  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
+  <li class="tab"><a class="active" href="{{ url_for('corpora.corpus_file', corpus_id=corpus_file.corpus.id, corpus_file_id=corpus_file.id) }}" target="_self">{{ corpus_file.author }}: {{ corpus_file.title }}</a></li>
+</ul>
+{% endblock nav_content %}
+
+{% block main_attribs %} class="corpus-analysis-color lighten"{% endblock main_attribs %}

 {% block page_content %}
-<div class="col s12 m4">
-  <h3 id="title">...</h3>
-  <p id="description">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</p>
-  <a class="btn waves-effect waves-light" href="{{ url_for('corpora.corpus', corpus_id=corpus.id) }}"><i class="material-icons left">arrow_back</i>Back to corpus</a>
-</div>
+<div class="container">
+  <div class="row">
+    <div class="col s12">
+      <p class="hide-on-small-only">&nbsp;</p>
+      <h1 id="title">{{ corpus_file.author }}: {{ corpus_file.title }}</h1>
+    </div>

-<div class="col s12 m8">
+    <div class="col s12">
      <form method="POST">
        {{ edit_corpus_file_form.hidden_tag() }}
        <div class="card">
          <div class="card-content">
            <div class="row">
-          <div class="col s12 m4">
-            {{ M.render_field(edit_corpus_file_form.author, data_length='255', material_icon='person') }}
+              <div class="col s12 m6">
+                {{ wtf.render_field(edit_corpus_file_form.author, data_length='255', material_icon='person') }}
              </div>
-          <div class="col s12 m4">
-            {{ M.render_field(edit_corpus_file_form.title, data_length='255', material_icon='title') }}
-          </div>
-          <div class="col s12 m4">
-            {{ M.render_field(edit_corpus_file_form.publishing_year, material_icon='access_time') }}
+              <div class="col s12 m6">
+                {{ wtf.render_field(edit_corpus_file_form.title, data_length='255', material_icon='title') }}
              </div>
            </div>
          </div>
          <div class="card-action right-align">
-        {{ M.render_field(edit_corpus_file_form.submit, material_icon='send') }}
+            {{ wtf.render_field(edit_corpus_file_form.submit, material_icon='send') }}
          </div>
        </div>
        <br>
@@ -34,12 +51,14 @@
            <div class="collapsible-header"><i class="material-icons">edit</i>Edit additional metadata</div>
            <div class="collapsible-body">
              {% for field in edit_corpus_file_form
-             if field.short_name not in ['author', 'csrf_token', 'publishing_year', 'submit', 'title'] %}
-          {{ M.render_field(field, data_length='255', material_icon=field.label.text[0:1]) }}
+                 if field.short_name not in ['author', 'csrf_token', 'submit', 'title'] %}
+              {{ wtf.render_field(field, data_length='255', material_icon=field.label.text[0:1]) }}
              {% endfor %}
            </div>
          </li>
        </ul>
      </form>
+    </div>
+  </div>
 </div>
 {% endblock %}
--- a/web/app/templates/services/_nav_content.html.j2
+++ b/web/app/templates/services/_nav_content.html.j2
@@ -1,10 +1,10 @@
 <ul class="tabs tabs-transparent">
-  <li class="tab disabled"><i class="material-icons left" style="line-height: 48px;">explore</i>Roadmap</li>
+  <li class="tab disabled"><a><i class="material-icons left">explore</i>Roadmap</a></li>
  <li class="tab"><a{%if request.path == url_for('services.service', service='file-setup') %} class="active"{% endif %} href="{{ url_for('services.service', service='file-setup') }}" target="_self">File setup</a></li>
-  <li class="tab disabled"><i class="material-icons" style="line-height: 48px;">navigate_next</i></li>
+  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
  <li class="tab"><a{%if request.path == url_for('services.service', service='ocr') %} class="active"{% endif %} href="{{ url_for('services.service', service='ocr') }}" target="_self">OCR</a></li>
-  <li class="tab disabled"><i class="material-icons" style="line-height: 48px;">navigate_next</i></li>
+  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
  <li class="tab"><a{%if request.path == url_for('services.service', service='nlp') %} class="active"{% endif %} href="{{ url_for('services.service', service='nlp') }}" target="_self">NLP</a></li>
-  <li class="tab disabled"><i class="material-icons" style="line-height: 48px;">navigate_next</i></li>
+  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
  <li class="tab"><a{%if request.path == url_for('services.service', service='corpus_analysis') %} class="active"{% endif %} href="{{ url_for('services.service', service='corpus_analysis') }}" target="_self">Corpus Analysis</a></li>
 </ul>
--- a/web/app/templates/services/corpus_analysis.html.j2
+++ b/web/app/templates/services/corpus_analysis.html.j2
@@ -5,7 +5,7 @@
 {% set scheme_secondary_color = colors.corpus_analysis %}

 {% block nav_content %}
-{% include 'services/_nav_content.html.j2' %}
+{% include 'services/_roadmap.html.j2' %}
 {% endblock nav_content %}

 {% block main_attribs %} class="corpus-analysis-color lighten"{% endblock main_attribs %}
--- a/web/app/templates/services/file-setup.html.j2
+++ b/web/app/templates/services/file-setup.html.j2
@@ -6,7 +6,7 @@
 {% set scheme_secondary_color = colors.file_setup %}

 {% block nav_content %}
-{% include 'services/_nav_content.html.j2' %}
+{% include 'services/_roadmap.html.j2' %}
 {% endblock nav_content %}

 {% block main_attribs %} class="file-setup-color lighten"{% endblock main_attribs %}
--- a/web/app/templates/services/nlp.html.j2
+++ b/web/app/templates/services/nlp.html.j2
@@ -6,7 +6,7 @@
 {% set scheme_secondary_color = colors.nlp %}

 {% block nav_content %}
-{% include 'services/_nav_content.html.j2' %}
+{% include 'services/_roadmap.html.j2' %}
 {% endblock nav_content %}

 {% block main_attribs %} class="nlp-color lighten"{% endblock main_attribs %}
--- a/web/app/templates/services/ocr.html.j2
+++ b/web/app/templates/services/ocr.html.j2
@@ -6,7 +6,7 @@
 {% set scheme_secondary_color = colors.ocr %}

 {% block nav_content %}
-{% include 'services/_nav_content.html.j2' %}
+{% include 'services/_roadmap.html.j2' %}
 {% endblock nav_content %}

 {% block main_attribs %} class="ocr-color lighten"{% endblock main_attribs %}