Delete unused files, restructure assets and use scss

.gitignore

@@ -5,8 +5,7 @@
 
 # Flask-Assets files
 .webassets-cache
-*.bundle.css
+app/static/gen
-*.bundle.js
 
 # Docker related files
 docker-compose.override.yml

app/__init__.py

@@ -37,7 +37,9 @@ def create_app(config: Config = Config) -> Flask:
     migrate.init_app(app, db)
     paranoid.init_app(app)
     socketio.init_app(
-        app, message_queue=app.config['NOPAQUE_SOCKETIO_MESSAGE_QUEUE_URI'])
+        app,
+        message_queue=app.config['NOPAQUE_SOCKETIO_MESSAGE_QUEUE_URI']
+    )
 
     from .events import socketio as socketio_events
     from .events import sqlalchemy as sqlalchemy_events

app/decorators.py

@@ -61,23 +61,3 @@ def background(f):
         thread.start()
         return thread
     return wrapped
-
-
-def socketio_admin_required(f):
-    @wraps(f)
-    def wrapped(*args, **kwargs):
-        if current_user.is_administrator:
-            return f(*args, **kwargs)
-        else:
-            return {'code': 403, 'msg': 'Forbidden'}
-    return wrapped
-
-
-def socketio_login_required(f):
-    @wraps(f)
-    def wrapped(*args, **kwargs):
-        if current_user.is_authenticated:
-            return f(*args, **kwargs)
-        else:
-            return {'code': 401, 'msg': 'Unauthorized'}
-    return wrapped

app/email.py

@@ -13,7 +13,9 @@ def create_message(
 ) -> Message:
     subject_prefix: str = current_app.config['NOPAQUE_MAIL_SUBJECT_PREFIX']
     msg: Message = Message(
-        f'{subject_prefix} {subject}', recipients=[recipient])
+        f'{subject_prefix} {subject}',
+        recipients=[recipient]
+    )
     msg.body: Text = render_template(f'{template}.txt.j2', **kwargs)
     msg.html: Text = render_template(f'{template}.html.j2', **kwargs)
     return msg

app/models.py

@@ -886,7 +886,9 @@ class Corpus(HashidMixin, db.Model):
         }
         if backrefs:
             dict_corpus['user'] = self.user.to_dict(
-                backrefs=True, relationships=False)
+                backrefs=True,
+                relationships=False
+            )
         if relationships:
             dict_corpus['files'] = {
                 x.hashid: x.to_dict(backrefs=False, relationships=True)

app/static/css/colors.scss

@@ -0,0 +1,242 @@
+/// Map deep get
+/// @author Kitty Giraudel
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Arglist} $keys - Key chain
+/// @return {*} - Desired value
+@function map-deep-get($map, $keys...) {
+    @each $key in $keys {
+        $map: map-get($map, $key);
+    }
+    @return $map;
+}
+
+
+$color: (
+  "baseline": (
+    "primary": #00426f,
+    "primary-variant": #1a5c89,
+    "secondary": #00426f,
+    "secondary-variant": #1a5c89,
+    "background": #ffffff,
+    "surface": #ffffff,
+    "error": #b00020
+  ),
+  "service": (
+    "corpus-analysis": (
+      "base": #aa9cc9,
+      "darken": #6b3f89,
+      "lighten": #ebe8f6
+    ),
+    "file-setup": (
+      "base": #d5dc95,
+      "darken": #a1b300,
+      "lighten": #f2f3e1
+    ),
+    "spacy-nlp": (
+      "base": #98acd2,
+      "darken": #0064a3,
+      "lighten": #e5e8f5
+    ),
+    "tesseract-ocr": (
+      "base": #a9d8c8,
+      "darken": #00a58b,
+      "lighten": #e7f4f1
+    )
+  ),
+  "status": (
+    "corpus": (
+      "UNPREPARED": #9e9e9e,
+      "QUEUED": #2196f3,
+      "BUILDING": #ffc107,
+      "BUILT": #4caf50,
+      "FAILED": #f44336,
+      "STARTING_ANALYSIS_SESSION": #2196f3,
+      "RUNNING_ANALYSIS_SESSION": #4caf50,
+      "CANCELING_ANALYSIS_SESSION": #ff5722
+    ),
+    "job": (
+      "INITIALIZING": #9e9e9e,
+      "SUBMITTED": #9e9e9e,
+      "QUEUED": #2196f3,
+      "RUNNING": #ffc107,
+      "CANCELING": #ff5722,
+      "CANCELED": #ff5722,
+      "COMPLETED": #4caf50,
+      "FAILED": #f44336
+    )
+  )
+);
+
+@each $key, $color-code in map-get($color, "baseline") {
+  .#{$key}-color {
+    background-color: $color-code !important;
+  }
+
+  .#{$key}-color-border {
+    border-color: $color-code !important;
+  }
+
+  .#{$key}-color-text {
+    color: $color-code !important;
+  }
+}
+
+@each $service-name, $color-palette in map-get($color, "service") {
+  .service-color[data-service="#{$service-name}"] {
+    background-color: map-get($color-palette, "base") !important;
+
+    &.darken {
+      background-color: map-get($color-palette, "darken") !important;
+    }
+
+    &.lighten {
+      background-color: map-get($color-palette, "lighten") !important;
+    }
+  }
+
+  .service-color-border[data-service="#{$service-name}"] {
+    border-color: map-get($color-palette, "base") !important;
+
+    &.border-darken {
+      border-color: map-get($color-palette, "darken") !important;
+    }
+
+    &.border-lighten {
+      border-color: map-get($color-palette, "lighten") !important;
+    }
+  }
+
+  .service-color-text[data-service="#{$service-name}"] {
+    color: map-get($color-palette, "base") !important;
+
+    &.text-darken {
+      color: map-get($color-palette, "darken") !important;
+    }
+
+    &.text-lighten {
+      color: map-get($color-palette, "lighten") !important;
+    }
+  }
+
+  .service-scheme[data-service="#{$service-name}"] {
+    background-color: map-get($color-palette, "lighten");
+
+    .btn, .btn-small, .btn-large, .btn-floating {
+      background-color: map-get($color-palette, "darken");
+
+      &:hover {
+        background-color: map-get($color-palette, "base");
+      }
+    }
+
+    .pagination {
+      li.active {
+        background-color: map-get($color-palette, "darken");
+      }
+    }
+
+    .table-of-contents {
+      a.active, a:hover {
+        border-color: map-get($color-palette, "darken");
+      }
+    }
+
+    .tabs {
+      .tab {
+        &.disabled {
+          a {
+            color: inherit;
+
+            &:hover {
+              color: change-color(map-get($color-palette, "darken"), $alpha: 0.15);
+            }
+          }
+        }
+
+        a {
+          color: inherit;
+
+          &:focus, &:hover, &.active {
+            color: map-get($color-palette, "darken");
+          }
+
+          &:focus, &.active, &.active:focus {
+            background-color: change-color(map-get($color-palette, "darken"), $alpha: 0.15);
+          }
+        }
+      }
+      .indicator {
+        background-color: map-get($color-palette, "darken");
+      }
+    }
+  }
+}
+
+@each $ressource-name, $color-palette in map-get($color, "status") {
+  @each $key, $color-code in $color-palette {
+    .#{$ressource-name}-status-color[data-#{$ressource-name}-status="#{$key}"] {
+      background-color: $color-code !important;
+    }
+
+    .#{$ressource-name}-status-color-border[data-#{$ressource-name}-status="#{$key}"] {
+      border-color: $color-code !important;
+    }
+
+    .#{$ressource-name}-status-color-text[data-#{$ressource-name}-status="#{$key}"] {
+      color: $color-code !important;
+    }
+  }
+}
+
+
+main {
+  .btn, .btn-small, .btn-large, .btn-floating {
+    background-color: map-deep-get($color, "baseline", "secondary");
+
+    &:hover {
+      background-color: map-deep-get($color, "baseline", "secondary-variant");
+    }
+  }
+
+  .pagination {
+    li.active {
+      background-color: map-deep-get($color, "baseline", "secondary");
+    }
+  }
+
+  .table-of-contents {
+    a.active, a:hover {
+      border-color: map-deep-get($color, "baseline", "secondary");
+    }
+  }
+
+  .tabs {
+    .tab {
+      &.disabled {
+        a {
+          color: inherit;
+
+          &:hover {
+            color: change-color(map-deep-get($color, "baseline", "secondary"), $alpha: 0.15);
+          }
+        }
+      }
+
+      a {
+        color: inherit;
+
+        &:focus, &:hover, &.active {
+          color: map-deep-get($color, "baseline", "secondary");
+        }
+
+        &:focus, &.active, &.active:focus {
+          background-color: change-color(map-deep-get($color, "baseline", "secondary"), $alpha: 0.15);
+        }
+      }
+    }
+    .indicator {
+      background-color: map-deep-get($color, "baseline", "secondary");
+    }
+  }
+}

app/static/css/material_icons.css

@@ -1,39 +0,0 @@
-/* https://google.github.io/material-design-icons/#setup-method-2-self-hosting */
-
-@font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Material Icons'),
-    local('MaterialIcons-Regular'),
-    url(../fonts/material_icons/MaterialIcons-Regular.ttf) format('truetype'),
-    url(../fonts/material_icons/MaterialIconsOutlined-Regular.otf) format('opentype'),
-    url(../fonts/material_icons/MaterialIconsRound-Regular.otf) format('opentype'),
-    url(../fonts/material_icons/MaterialIconsSharp-Regular.otf) format('opentype'),
-    url(../fonts/material_icons/MaterialIconsTwoTone-Regular.otf) format('opentype');
-}
-
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;  /* Preferred icon size */
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Support for IE. */
-  font-feature-settings: 'liga';
-}

app/static/css/nopaque.css

@@ -1,70 +0,0 @@
-:root {
-  --main-bg-color: brown;
-}
-
-/* Change navbar height bacause an extended and fixed navbar is used */
-.navbar-fixed {
-  height: 112px;
-}
-
-/* add custom bold class */
-.bold {font-weight: bold;}
-
-/* Change placholdertext color of file uplaod fields */
-::placeholder {
-  color: #9e9e9e;
-  opacity: 1;
-}
-
-/*
- * changes preoloader size etc. to fit visually better with the chip status
- * indicator of jobs
- */
-.status-spinner {
-  margin-bottom: -10px;
-  width: 30px !important;
-  height: 30px !important;
-}
-
-.show-if-only-child:not(:only-child) {
-  display: none !important;
-}
-
-.btn-scale-x2 {
-  transform: scale(2);
-}
-
-.btn-scale-x2 .nopaque-icon.nopaque-service-icon {
-  font-size: 2.5rem;
-}
-
-/* Fix material icon vertical alignment when nested in various elements */
-h1 .nopaque-icon, h2 .nopaque-icon, h3 .nopaque-icon, h4 .nopaque-icon, .tab .nopaque-icon, .tab .material-icons {
-  line-height: inherit;
-}
-
-.nopaque-icon.nopaque-service-icon[data-service="file-setup"]:empty:before {content: "E";}
-.nopaque-icon.nopaque-service-icon[data-service="tesseract-ocr"]:empty:before {content: "F";}
-.nopaque-icon.nopaque-service-icon[data-service="spacy-nlp"]:empty:before {content: "G";}
-.nopaque-icon.nopaque-service-icon[data-service="corpus-analysis"]:empty:before {content: "H";}
-
-.nopaque-corpus-status-text[data-corpus-status="UNPREPARED"]:empty:before {content: "Unprepared";}
-.nopaque-corpus-status-text[data-corpus-status="SUBMITTED"]:empty:before {content: "Submitted";}
-.nopaque-corpus-status-text[data-corpus-status="QUEUED"]:empty:before {content: "Queued";}
-.nopaque-corpus-status-text[data-corpus-status="BUILDING"]:empty:before {content: "Building";}
-.nopaque-corpus-status-text[data-corpus-status="BUILT"]:empty:before {content: "Built";}
-.nopaque-corpus-status-text[data-corpus-status="STARTING_ANALYSIS_SESSION"]:empty:before {content: "Starting analysis session";}
-.nopaque-corpus-status-text[data-corpus-status="RUNNING_ANALYSIS_SESSION"]:empty:before {content: "Running analysis session";}
-.nopaque-corpus-status-text[data-corpus-status="CANCELING_ANALYSIS_SESSION"]:empty:before {content: "Canceling analysis session";}
-
-.nopaque-job-status-text[data-job-status="INITIALIZING"]:empty:before {content: "Initializing";}
-.nopaque-job-status-text[data-job-status="SUBMITTED"]:empty:before {content: "Submitted";}
-.nopaque-job-status-text[data-job-status="QUEUED"]:empty:before {content: "Queued";}
-.nopaque-job-status-text[data-job-status="RUNNING"]:empty:before {content: "Running";}
-.nopaque-job-status-text[data-job-status="CANCELING"]:empty:before {content: "Canceling";}
-.nopaque-job-status-text[data-job-status="CANCELED"]:empty:before {content: "Canceled";}
-.nopaque-job-status-text[data-job-status="COMPLETED"]:empty:before {content: "Completed";}
-.nopaque-job-status-text[data-job-status="FAILED"]:empty:before {content: "Failed";}
-
-.hoverable {cursor: pointer;}
-.chip.s-attr .chip.p-attr {background-color: inherit;}

app/static/css/nopaque_icons.css

@@ -7,7 +7,7 @@
     url(../fonts/nopaque_icons/NopaqueIcons-Regular.otf) format('opentype');
 }
 
-.nopaque-icon {
+.nopaque-icons {
   font-family: 'Nopaque Icons';
   font-weight: normal;
   font-style: normal;

app/static/css/style.css

@@ -0,0 +1,52 @@
+/* Change navbar height bacause an extended and fixed navbar is used */
+.navbar-fixed {
+  height: 112px;
+}
+
+/* Change placholdertext color of file uplaod fields */
+::placeholder {
+  color: #9e9e9e;
+  opacity: 1;
+}
+
+/*
+ * changes preoloader size etc. to fit visually better with the chip status
+ * indicator of jobs
+ */
+.status-spinner {
+  margin-bottom: -10px;
+  width: 30px !important;
+  height: 30px !important;
+}
+
+.show-if-only-child:not(:only-child) {
+  display: none !important;
+}
+
+.btn-scale-x2 {
+  transform: scale(2);
+}
+
+.btn-scale-x2 .nopaque-icons.service-icon {
+  font-size: 2.5rem;
+}
+
+/* Fix material icon vertical alignment when nested in various elements */
+h1 .nopaque-icons, h2 .nopaque-icons, h3 .nopaque-icons, h4 .nopaque-icons, .tab .nopaque-icons, .tab .material-icons {
+  line-height: inherit;
+}
+
+
+.corpus-status-text {text-transform: lowercase;}
+.corpus-status-text[data-corpus-status]:empty:before {content: attr(data-corpus-status);}
+
+.job-status-text {text-transform: lowercase;}
+.job-status-text[data-job-status]:empty:before {content: attr(data-job-status);}
+
+.nopaque-icons.service-icon[data-service="file-setup"]:empty:before {content: "E";}
+.nopaque-icons.service-icon[data-service="tesseract-ocr"]:empty:before {content: "F";}
+.nopaque-icons.service-icon[data-service="spacy-nlp"]:empty:before {content: "G";}
+.nopaque-icons.service-icon[data-service="corpus-analysis"]:empty:before {content: "H";}
+
+.hoverable {cursor: pointer;}
+.chip.s-attr .chip.p-attr {background-color: inherit;}

app/static/js/App.js

@@ -31,7 +31,7 @@ class App {
         iconPrefix = '<i class="error-color-text left material-icons">error</i>';
         break;
       case 'job':
-        iconPrefix = '<i class="left nopaque-icon">J</i>';
+        iconPrefix = '<i class="left nopaque-icons">J</i>';
         break;
       default:
         iconPrefix = '<i class="left material-icons">notifications</i>';

app/static/js/JobStatusNotifier.js

@@ -16,7 +16,7 @@ class JobStatusNotifier {
       .filter(operation => re.test(operation.path));
     for (operation of filteredPatch) {
       [match, jobId] = operation.path.match(re);
-      app.flash(`[<a href="/jobs/${jobId}">${app.users[this.userId].jobs[jobId].title}</a>] New status: <span class="nopaque-job-status-text" data-job-status="${operation.value}"></span>`, 'job');
+      app.flash(`[<a href="/jobs/${jobId}">${app.users[this.userId].jobs[jobId].title}</a>] New status: <span class="job-status-text" data-job-status="${operation.value}"></span>`, 'job');
     }
   }
 }

app/static/js/RessourceLists/CorpusList.js

@@ -4,7 +4,7 @@ class CorpusList extends RessourceList {
       <tr class="hoverable">
         <td><a class="btn-floating disabled"><i class="material-icons nopaque-service-color darken" data-service="corpus-analysis">book</i></a></td>
         <td><b class="title"></b><br><i class="description"></i></td>
-        <td><span class="status badge new nopaque-corpus-status-color nopaque-corpus-status-text" data-badge-caption=""></span></td>
+        <td><span class="status badge new corpus-status-color corpus-status-text" data-badge-caption=""></span></td>
         <td class="right-align">
           <a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a>
           <a class="action-button btn-floating nopaque-service-color darken tooltipped waves-effect waves-light" data-action="view" data-position="top" data-service="corpus-analysis" data-tooltip="View"><i class="material-icons">send</i></a>

app/static/js/RessourceLists/JobList.js

@@ -1,10 +1,10 @@
 class JobList extends RessourceList {
   static options = {
     item: `
-      <tr class="hoverable nopaque-service-color lighten">
+      <tr class="hoverable service-color lighten">
-        <td><a class="btn-floating disabled"><i class="service-1 nopaque-icon nopaque-service-color darken nopaque-service-icon"></i></a></td>
+        <td><a class="btn-floating disabled"><i class="service-1 nopaque-icons service-color darken service-icon"></i></a></td>
         <td><b class="title"></b><br><i class="description"></i></td>
-        <td><span class="status badge new nopaque-job-status-color nopaque-job-status-text" data-badge-caption=""></span></td>
+        <td><span class="status badge new job-status-color job-status-text" data-badge-caption=""></span></td>
         <td class="right-align">
           <a class="action-button btn-floating red tooltipped waves-effect waves-light" data-action="delete" data-position="top" data-tooltip="Delete"><i class="material-icons">delete</i></a>
           <a class="service-2 action-button btn-floating nopaque-service-color darken tooltipped waves-effect waves-light" data-action="view" data-position="top" data-tooltip="View"><i class="material-icons">send</i></a>

app/static/json_schema/combined_ners_tags.txt

@@ -1,62 +0,0 @@
-"LOC",
-"MISC",
-"ORG",
-"PER",
-"EVENT",
-"GPE",
-"LOC",
-"ORG",
-"PERSON",
-"PRODUCT",
-"CARDINAL",
-"DATE",
-"EVENT",
-"FAC",
-"GPE",
-"LANGUAGE",
-"LAW",
-"LOC",
-"MONEY",
-"NORP",
-"ORDINAL",
-"ORG",
-"PERCENT",
-"PERSON",
-"PRODUCT",
-"QUANTITY",
-"TIME",
-"WORK_OF_ART",
-"LOC",
-"MISC",
-"ORG",
-"PER",
-"LOC",
-"MISC",
-"ORG",
-"PER",
-"LOC",
-"MISC",
-"ORG",
-"PER",
-"CARDINAL",
-"DATE",
-"EVENT",
-"FAC",
-"GPE",
-"LANGUAGE",
-"LAW",
-"LOC",
-"MONEY",
-"NORP",
-"ORDINAL",
-"ORG",
-"PERCENT",
-"PERSON",
-"PRODUCT",
-"QUANTITY",
-"TIME",
-"WORK_OF_ART",
-"LOC",
-"MISC",
-"ORG",
-"PER"

app/static/json_schema/nopaque_cqi_py_results_schema.json

@@ -1,329 +0,0 @@
-{
-    "$schema": "http://json-schema.org/draft-06/schema#",
-    "$ref": "#/definitions/NopaqueCQIPYResults",
-    "definitions": {
-        "NopaqueCQIPYResults": {
-            "type": "object",
-            "additionalProperties": false,
-            "properties": {
-                "matches": {
-                    "type": "array",
-                    "items": {
-                        "$ref": "#/definitions/Match"
-                    }
-                },
-                "cpos_lookup": {
-                    "type": "object",
-                    "additionalProperties": {
-                        "$ref": "#/definitions/CposLookup"
-                    }
-                },
-                "text_lookup": {
-                    "type": "object",
-                    "additionalProperties": {
-                        "$ref": "#/definitions/CorpusAllText"
-                    }
-                },
-                "match_count": {
-                    "type": "integer"
-                },
-                "corpus_type": {
-                    "type": "string"
-                },
-                "query": {
-                    "type": "string"
-                },
-                "corpus_name": {
-                    "type": "string"
-                },
-                "corpus_description": {
-                    "type": "string"
-                },
-                "corpus_creation_date": {
-                    "type": "string",
-                    "format": "date-time"
-                },
-                "corpus_last_edited_date": {
-                    "type": "string",
-                    "format": "date-time"
-                },
-                "corpus_properties": {
-                    "type": "array",
-                    "items": {}
-                },
-                "corpus_size_tokens": {
-                    "type": "integer"
-                },
-                "corpus_all_texts": {
-                    "type": "object",
-                    "additionalProperties": {
-                        "$ref": "#/definitions/CorpusAllText"
-                    }
-                },
-                "corpus_analysis_date": {
-                    "type": "string",
-                    "format": "date-time"
-                },
-                "corpus_cqi_py_protocol_version": {
-                    "type": "string"
-                },
-                "corpus_cqi_py_package_version": {
-                    "type": "string"
-                },
-                "corpus_cqpserver_version": {
-                    "type": "string"
-                },
-                "fullContext": {
-                    "type": "boolean"
-                },
-                "cpos_ranges": {
-                    "type": "boolean"
-                }
-            },
-            "required": [
-                "corpus_all_texts",
-                "corpus_analysis_date",
-                "corpus_cqi_py_package_version",
-                "corpus_cqi_py_protocol_version",
-                "corpus_cqpserver_version",
-                "corpus_creation_date",
-                "corpus_description",
-                "corpus_last_edited_date",
-                "corpus_name",
-                "corpus_properties",
-                "corpus_size_tokens",
-                "corpus_type",
-                "cpos_lookup",
-                "cpos_ranges",
-                "match_count",
-                "matches",
-                "query",
-                "text_lookup",
-                "fullContext"
-            ],
-            "title": "NopaqueCQIPYResults"
-        },
-        "CorpusAllText": {
-            "type": "object",
-            "additionalProperties": false,
-            "properties": {
-                "address": {
-                    "type": "string"
-                },
-                "author": {
-                    "type": "string"
-                },
-                "booktitle": {
-                    "type": "string"
-                },
-                "chapter": {
-                    "type": "string"
-                },
-                "editor": {
-                    "type": "string"
-                },
-                "institution": {
-                    "type": "string"
-                },
-                "journal": {
-                    "type": "string"
-                },
-                "pages": {
-                    "type": "string"
-                },
-                "publisher": {
-                    "type": "string"
-                },
-                "publishing_year": {
-                    "type": "string",
-                    "format": "integer"
-                },
-                "school": {
-                    "type": "string"
-                },
-                "title": {
-                    "type": "string"
-                },
-                "match_count": {
-                    "type": "integer"
-                }
-            },
-            "required": [
-                "address",
-                "author",
-                "booktitle",
-                "chapter",
-                "editor",
-                "institution",
-                "journal",
-                "pages",
-                "publisher",
-                "publishing_year",
-                "school",
-                "title"
-            ],
-            "title": "CorpusAllText"
-        },
-        "CposLookup": {
-            "type": "object",
-            "additionalProperties": false,
-            "properties": {
-                "word": {
-                    "type": "string"
-                },
-                "lemma": {
-                    "type": "string"
-                },
-                "simple_pos": {
-                    "$ref": "#/definitions/SimplePos"
-                },
-                "pos": {
-                    "type": "string"
-                },
-                "ner": {
-                    "$ref": "#/definitions/Ner"
-                },
-                "text": {
-                    "type": "integer"
-                },
-                "s": {
-                    "type": "integer"
-                }
-            },
-            "required": [
-                "lemma",
-                "ner",
-                "pos",
-                "s",
-                "simple_pos",
-                "text",
-                "word"
-            ],
-            "title": "CposLookup"
-        },
-        "Match": {
-            "type": "object",
-            "additionalProperties": false,
-            "properties": {
-                "lc": {
-                    "type": "array",
-                    "items": {
-                        "type": "integer"
-                    }
-                },
-                "c": {
-                    "type": "array",
-                    "items": {
-                        "type": "integer"
-                    }
-                },
-                "rc": {
-                    "type": "array",
-                    "items": {
-                        "type": "integer"
-                    }
-                }
-            },
-            "required": [
-                "c",
-                "lc",
-                "rc"
-            ],
-            "title": "Match"
-        },
-        "Ner": {
-            "type": "string",
-            "enum": [
-              "NULL",
-              "LOC",
-              "MISC",
-              "ORG",
-              "PER",
-              "EVENT",
-              "GPE",
-              "LOC",
-              "ORG",
-              "PERSON",
-              "PRODUCT",
-              "CARDINAL",
-              "DATE",
-              "EVENT",
-              "FAC",
-              "GPE",
-              "LANGUAGE",
-              "LAW",
-              "LOC",
-              "MONEY",
-              "NORP",
-              "ORDINAL",
-              "ORG",
-              "PERCENT",
-              "PERSON",
-              "PRODUCT",
-              "QUANTITY",
-              "TIME",
-              "WORK_OF_ART",
-              "LOC",
-              "MISC",
-              "ORG",
-              "PER",
-              "LOC",
-              "MISC",
-              "ORG",
-              "PER",
-              "LOC",
-              "MISC",
-              "ORG",
-              "PER",
-              "CARDINAL",
-              "DATE",
-              "EVENT",
-              "FAC",
-              "GPE",
-              "LANGUAGE",
-              "LAW",
-              "LOC",
-              "MONEY",
-              "NORP",
-              "ORDINAL",
-              "ORG",
-              "PERCENT",
-              "PERSON",
-              "PRODUCT",
-              "QUANTITY",
-              "TIME",
-              "WORK_OF_ART",
-              "LOC",
-              "MISC",
-              "ORG",
-              "PER"
-            ],
-            "title": "Ner"
-        },
-        "SimplePos": {
-            "type": "string",
-            "enum": [
-                "ADJ",
-                "ADP",
-                "ADV",
-                "AUX",
-                "CONJ",
-                "CCONJ",
-                "DET",
-                "INTJ",
-                "NOUN",
-                "NUM",
-                "PART",
-                "PRON",
-                "PROPN",
-                "PUNCT",
-                "SCONJ",
-                "SYM",
-                "VERB",
-                "X",
-                "SPACE"
-            ],
-            "title": "SimplePos"
-        }
-    }
-}

app/templates/_colors.html.j2

@@ -1,55 +0,0 @@
-{% set baseline = {
-  'primary': '#00426f',
-  'primary_variant': '#1A5C89',
-  'secondary': '#00426f',
-  'secondary_variant': '#1A5C89',
-  'background': '#ffffff',
-  'surface': '#ffffff',
-  'error': '#b00020'
-} %}
-
-{% set services = {
-  'corpus-analysis': {
-    'base': '#aa9cc9',
-    'darken': '#6b3f89',
-    'lighten': '#ebe8f6'
-  },
-  'file-setup': {
-    'base': '#d5dc95',
-    'darken': '#a1b300',
-    'lighten': '#f2f3e1'
-  },
-  'spacy-nlp': {
-    'base': '#98acd2',
-    'darken': '#0064a3',
-    'lighten': '#e5e8f5'
-  },
-  'tesseract-ocr': {
-    'base': '#a9d8c8',
-    'darken': '#00a58b',
-    'lighten': '#e7f4f1'
-  }
-} %}
-
-{% set status = {
-  'corpus': {
-    'UNPREPARED': '#9e9e9e',
-    'QUEUED': '#2196f3',
-    'BUILDING': '#ffc107',
-    'BUILT': '#4caf50',
-    'FAILED': '#f44336',
-    'STARTING_ANALYSIS_SESSION': '#2196f3',
-    'RUNNING_ANALYSIS_SESSION': '#4caf50',
-    'CANCELING_ANALYSIS_SESSION': '#ff5722'
-  },
-  'job': {
-    'INITIALIZING': '#9e9e9e',
-    'SUBMITTED': '#9e9e9e',
-    'QUEUED': '#2196f3',
-    'RUNNING': '#ffc107',
-    'CANCELING': '#ff5722',
-    'CANCELED': '#ff5722',
-    'COMPLETED': '#4caf50',
-    'FAILED': '#f44336'
-  }
-} %}

app/templates/_roadmap.html.j2

@@ -5,9 +5,9 @@
     <ul class="tabs tabs-fixed-width">
       <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">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"><a{%if request.path == url_for('services.service', service='tesseract-ocr') %} class="active"{% endif %} href="{{ url_for('services.service', service='tesseract-ocr') }}" target="_self">OCR</a></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"><a{%if request.path == url_for('services.service', service='spacy-nlp') %} class="active"{% endif %} href="{{ url_for('services.service', service='spacy-nlp') }}" target="_self">NLP</a></li>
       <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
       <li class="tab"><a{%if request.path == url_for('corpora.add_corpus') %} class="active"{% endif %} href="{{ url_for('corpora.add_corpus') }}" target="_self">Add corpus</a></li>
       <li class="tab disabled"><i class="material-icons">navigate_next</i></li>

app/templates/_scripts.html.j2

@@ -1,20 +1,18 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fast-json-patch/3.1.0/fast-json-patch.min.js" integrity="sha512-KrvLlmKBiDoTa0Fke92aFoEv4xS0+cuYGP27nt39w0yLZWvVOhArmZ29uuOe3uOOBcbnkpvnLhkvYcYjahSOwg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js" integrity="sha512-93wYgwrIFL+b+P3RvYxi/WUFRXXUDSLCT2JQk9zhVGXuS2mHl2axj6d+R6pP+gcU5isMHRj1u0oYE/mWyt/RjA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.0/socket.io.js" integrity="sha512-nYuHvSAhY5lFZ4ixSViOwsEKFvlxHMU2NHts1ILuJgOS6ptUmAGt/0i5czIgMOahKZ6JN84YFDA+mCdky7dD8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src="{{ url_for('static', filename='js/App.js') }}"></script>
-<script src="{{ url_for('static', filename='js/JobStatusNotifier.js') }}"></script>
 {%- assets
   filters='rjsmin',
-  output='js/RessourceDisplays.min.bundle.js',
+  output='gen/app.%(version)s.js',
+  'js/App.js',
+  'js/CorpusAnalysis/CQiClient.js',
+  'js/CorpusAnalysis/CorpusAnalysisApp.js',
+  'js/CorpusAnalysis/CorpusAnalysisConcordance.js',
+  'js/CorpusAnalysis/CorpusAnalysisReader.js',
+  'js/JobStatusNotifier.js',
   'js/RessourceDisplays/RessourceDisplay.js',
   'js/RessourceDisplays/CorpusDisplay.js',
-  'js/RessourceDisplays/JobDisplay.js'
+  'js/RessourceDisplays/JobDisplay.js',
-%}
-<script src="{{ ASSET_URL }}"></script>
-{%- endassets %}
-{%- assets
-  filters='rjsmin',
-  output='js/RessourceLists.min.bundle.js',
   'js/RessourceLists/RessourceList.js',
   'js/RessourceLists/CorpusList.js',
   'js/RessourceLists/CorpusFileList.js',
@@ -22,11 +20,11 @@
   'js/RessourceLists/JobInputList.js',
   'js/RessourceLists/JobResultList.js',
   'js/RessourceLists/QueryResultList.js',
-  'js/RessourceLists/UserList.js'
+  'js/RessourceLists/UserList.js',
+  'js/UploadForm.js'
 %}
 <script src="{{ ASSET_URL }}"></script>
 {%- endassets %}
-<script src="{{ url_for('static', filename='js/UploadForm.js') }}"></script>
 <script>
   const app = new App();
   {%- if current_user.is_authenticated %}

app/templates/_sidenav.html.j2

@@ -10,14 +10,14 @@
   <li><a href="{{ url_for('main.news') }}"><i class="material-icons left">email</i>News</a></li>
   <li><a href="#"><i class="material-icons">linear_scale</i>Workflow</a></li>
   <li><a href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a></li>
-  <li><a href="{{ url_for('main.dashboard', _anchor='corpora') }}" style="padding-left: 47px;"><i class="nopaque-icon">I</i>My Corpora</a></li>
+  <li><a href="{{ url_for('main.dashboard', _anchor='corpora') }}" style="padding-left: 47px;"><i class="nopaque-icons">I</i>My Corpora</a></li>
-  <li><a href="{{ url_for('main.dashboard', _anchor='jobs') }}" style="padding-left: 47px;"><i class="nopaque-icon">J</i>My Jobs</a></li>
+  <li><a href="{{ url_for('main.dashboard', _anchor='jobs') }}" style="padding-left: 47px;"><i class="nopaque-icons">J</i>My Jobs</a></li>
   <li><div class="divider"></div></li>
   <li><a class="subheader">Processes & Services</a></li>
-  <li class="nopaque-service-color nopaque-service-color-border border-darken" data-service="file-setup" style="border-left: 10px solid; margin-top: 5px;"><a href="{{ url_for('services.service', service='file-setup') }}"><i class="nopaque-icon nopaque-service-icon" data-service="file-setup"></i>File setup</a></li>
+  <li class="service-color service-color-border border-darken" data-service="file-setup" style="border-left: 10px solid; margin-top: 5px;"><a href="{{ url_for('services.service', service='file-setup') }}"><i class="nopaque-icons service-icon" data-service="file-setup"></i>File setup</a></li>
-  <li class="nopaque-service-color nopaque-service-color-border border-darken" data-service="tesseract-ocr" style="border-left: 10px solid; margin-top: 5px;"><a href="{{ url_for('services.service', service='tesseract-ocr') }}"><i class="nopaque-icon nopaque-service-icon" data-service="tesseract-ocr"></i>OCR</a></li>
+  <li class="service-color service-color-border border-darken" data-service="tesseract-ocr" style="border-left: 10px solid; margin-top: 5px;"><a href="{{ url_for('services.service', service='tesseract-ocr') }}"><i class="nopaque-icons service-icon" data-service="tesseract-ocr"></i>OCR</a></li>
-  <li class="nopaque-service-color nopaque-service-color-border border-darken" data-service="spacy-nlp" style="border-left: 10px solid; margin-top: 5px;"><a href="{{ url_for('services.service', service='spacy-nlp') }}"><i class="nopaque-icon nopaque-service-icon" data-service="spacy-nlp"></i>NLP</a></li>
+  <li class="service-color service-color-border border-darken" data-service="spacy-nlp" style="border-left: 10px solid; margin-top: 5px;"><a href="{{ url_for('services.service', service='spacy-nlp') }}"><i class="nopaque-icons service-icon" data-service="spacy-nlp"></i>NLP</a></li>
-  <li class="nopaque-service-color nopaque-service-color-border border-darken" data-service="corpus-analysis" style="border-left: 10px solid; margin-top: 5px;"><a href="{{ url_for('services.service', service='corpus-analysis') }}"><i class="nopaque-icon nopaque-service-icon" data-service="corpus-analysis"></i>Corpus analysis</a></li>
+  <li class="service-color service-color-border border-darken" data-service="corpus-analysis" style="border-left: 10px solid; margin-top: 5px;"><a href="{{ url_for('services.service', service='corpus-analysis') }}"><i class="nopaque-icons service-icon" data-service="corpus-analysis"></i>Corpus analysis</a></li>
   <li><div class="divider"></div></li>
   <li><a class="subheader">Account</a></li>
   <li><a href="{{ url_for('settings.index') }}"><i class="material-icons">settings</i>Settings</a></li>

app/templates/_styles.html.j2

@@ -1,75 +1,14 @@
-{% import "_colors.html.j2" as colors %}
-
 {% if current_user.is_authenticated %}
-<link href="{{ url_for('static', filename='css/sidenav_fixed.css') }}" media="screen,projection" rel="stylesheet">
+<link href="{{ url_for('static', filename='css/materialize/sidenav_fixed.css') }}" media="screen,projection" rel="stylesheet">
 {% endif %}
+<link href="{{ url_for('static', filename='css/materialize/sticky_footer.css') }}" media="screen,projection" rel="stylesheet">
+<link href="{{ url_for('static', filename='css/materialize/fixes.css') }}" media="screen,projection" rel="stylesheet">
 <link href="{{ url_for('static', filename='css/nopaque_icons.css') }}" media="screen,projection" rel="stylesheet">
-<link href="{{ url_for('static', filename='css/sticky_footer.css') }}" media="screen,projection" rel="stylesheet">
+{%- assets
-<link href="{{ url_for('static', filename='css/materialize_fixes.css') }}" media="screen,projection" rel="stylesheet">
+  filters='pyscss',
-<link href="{{ url_for('static', filename='css/nopaque.css') }}" media="screen,projection" rel="stylesheet">
+  output='gen/app.%(version)s.css',
-<style>
+  'css/colors.scss',
-  .primary-color {background-color: {{ colors['baseline']['primary'] }} !important;}
+  'css/style.css'
-  .primary-color-border {border-color: {{ colors['baseline']['primary'] }} !important;}
+%}
-  .primary-color-text {color: {{ colors['baseline']['primary'] }} !important;}
+<link href="{{ ASSET_URL }}" media="screen,projection" rel="stylesheet">
-  .primary-variant-color {background-color: {{ colors['baseline']['primary_variant'] }} !important;}
+{%- endassets %}
-  .primary-variant-color-border {border-color: {{ colors['baseline']['primary_variant'] }} !important;}
-  .primary-variant-color-text {color: {{ colors['baseline']['primary_variant'] }} !important;}
-
-  .secondary-color {background-color: {{ colors['baseline']['secondary'] }} !important;}
-  .secondary-color-border {border-color: {{ colors['baseline']['secondary'] }} !important;}
-  .secondary-color-text {color: {{ colors['baseline']['secondary'] }} !important;}
-  .secondary-variant-color {background-color: {{ colors['baseline']['secondary_variant'] }} !important;}
-  .secondary-variant-color-border {border-color: {{ colors['baseline']['secondary_variant'] }} !important;}
-  .secondary-variant-color-text {color: {{ colors['baseline']['secondary_variant'] }} !important;}
-
-  .background-color {background-color: {{ colors['baseline']['background'] }} !important;}
-  .background-color-border {border-color: {{ colors['baseline']['background'] }} !important;}
-  .background-color-text {color: {{ colors['baseline']['background'] }} !important;}
-
-  .surface-color {background-color: {{ colors['baseline']['surface'] }} !important;}
-  .surface-color-border {border-color: {{ colors['baseline']['surface'] }} !important;}
-  .surface-color-text {color: {{ colors['baseline']['surface'] }} !important;}
-
-  .error-color {background-color: {{ colors['baseline']['error'] }} !important;}
-  .error-color-border {border-color: {{ colors['baseline']['error'] }} !important;}
-  .error-color-text {color: {{ colors['baseline']['error'] }} !important;}
-
-  main .btn, main .btn-small, main .btn-large, main .btn-floating {background-color: {{ colors['baseline']['secondary'] }};}
-  main .btn:hover, main .btn-large:hover, main .btn-small:hover, main .btn-floating:hover {background-color: {{ colors['baseline']['secondary_variant'] }};}
-  main .pagination li.active {background-color: {{ colors['baseline']['secondary'] }};}
-  main .table-of-contents a.active {border-color: {{ colors['baseline']['secondary'] }};}
-  main .tabs .tab a {color: inherit;}
-  main .tabs .tab.disabled a, main .tabs .tab.disabled a:hover {color: {{ colors['baseline']['secondary'] }}28;}
-  main .tabs .tab a:hover {color: {{ colors['baseline']['secondary'] }};}
-  main .tabs .tab a.active, main .tabs .tab a:focus.active {color: {{ colors['baseline']['secondary'] }}; background-color: {{ colors['baseline']['secondary'] }}28;}
-  main .tabs .indicator {background-color: {{ colors['baseline']['secondary'] }};}
-
-  {% for service in colors['services'] %}
-  .nopaque-service-scheme[data-service="{{ service }}"] {background-color: {{ colors['services'][service]['lighten'] }};}
-  .nopaque-service-scheme[data-service="{{ service }}"] .btn, .nopaque-service-scheme[data-service="{{ service }}"] .btn-small, .nopaque-service-scheme[data-service="{{ service }}"] .btn-large, .nopaque-service-scheme[data-service="{{ service }}"] .btn-floating {background-color: {{ colors['services'][service]['darken'] }};}
-  .nopaque-service-scheme[data-service="{{ service }}"] .btn:hover, .nopaque-service-scheme[data-service="{{ service }}"] .btn-large:hover, .nopaque-service-scheme[data-service="{{ service }}"] .btn-small:hover, .nopaque-service-scheme[data-service="{{ service }}"] .btn-floating:hover {background-color: {{ colors['services'][service]['base'] }};}
-  .nopaque-service-scheme[data-service="{{ service }}"] .pagination li.active {background-color: {{ colors['services'][service]['darken'] }};}
-  .nopaque-service-scheme[data-service="{{ service }}"] .table-of-contents a.active {border-color: {{ colors['services'][service]['darken'] }};}
-  .nopaque-service-scheme[data-service="{{ service }}"] .tabs .tab a {color: inherit;}
-  .nopaque-service-scheme[data-service="{{ service }}"] .tabs .tab.disabled a, .nopaque-service-scheme[data-service="{{ service }}"] .tabs .tab.disabled a:hover {color: {{ colors['services'][service]['darken'] }}28;}
-  .nopaque-service-scheme[data-service="{{ service }}"] .tabs .tab a:hover {color: {{ colors['services'][service]['darken'] }};}
-  .nopaque-service-scheme[data-service="{{ service }}"] .tabs .tab a.active, .nopaque-service-scheme[data-service="{{ service }}"] .tabs .tab a:focus.active {color: {{ colors['services'][service]['darken'] }}; background-color: {{ colors['services'][service]['darken'] }}28;}
-  .nopaque-service-scheme[data-service="{{ service }}"] .tabs .indicator {background-color: {{ colors['services'][service]['darken'] }};}
-
-  .nopaque-service-color[data-service="{{ service }}"] {background-color: {{ colors['services'][service]['base'] }} !important;}
-  .nopaque-service-color-text[data-service="{{ service }}"] {color: {{ colors['services'][service]['base'] }} !important;}
-  .nopaque-service-color-border[data-service="{{ service }}"] {border-color: {{ colors['services'][service]['base'] }} !important;}
-  .nopaque-service-color[data-service="{{ service }}"].darken {background-color: {{ colors['services'][service]['darken'] }} !important;}
-  .nopaque-service-color-text[data-service="{{ service }}"].text-darken {color: {{ colors['services'][service]['darken'] }} !important;}
-  .nopaque-service-color-border[data-service="{{ service }}"].border-darken {border-color: {{ colors['services'][service]['darken'] }} !important;}
-  .nopaque-service-color[data-service="{{ service }}"].lighten {background-color: {{ colors['services'][service]['lighten'] }} !important;}
-  .nopaque-service-color-text[data-service="{{ service }}"].text-lighten {color: {{ colors['services'][service]['lighten'] }} !important;}
-  .nopaque-service-color-border[data-service="{{ service }}"].border-lighten {border-color: {{ colors['services'][service]['lighten'] }} !important;}
-  {% endfor %}
-
-  {% for status_type in colors['status'] %}
-  {% for status in colors['status'][status_type] %}
-  .nopaque-{{ status_type }}-status-color[data-{{status_type}}-status="{{ status }}"] {background-color: {{ colors['status'][status_type][status] }} !important;}
-  {% endfor %}
-  {% endfor %}
-</style>

app/templates/corpora/add_corpus.html.j2

@@ -2,7 +2,7 @@
 {% from "corpora/_breadcrumbs.html.j2" import breadcrumbs with context %}
 {% import "materialize/wtf.html.j2" as wtf %}
 
-{% block main_attribs %} class="nopaque-service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
+{% block main_attribs %} class="service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
 
 {% block page_content %}
 <div class="container">

app/templates/corpora/add_corpus_file.html.j2

@@ -2,7 +2,7 @@
 {% from "corpora/_breadcrumbs.html.j2" import breadcrumbs with context %}
 {% import "materialize/wtf.html.j2" as wtf %}
 
-{% block main_attribs %} class="nopaque-service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
+{% block main_attribs %} class="service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
 
 {% block page_content %}
 <div class="container">

app/templates/corpora/analyse_corpus.html.j2

@@ -1,11 +1,11 @@
 {% extends "base.html.j2" %}
 {% import "materialize/wtf.html.j2" as wtf %}
 
-{% block main_attribs %} class="nopaque-service-scheme" data-service="corpus-analysis" id="corpus-analysis-app-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">
-  <li class="tab col s3"><a class="active" href="#corpus-analysis-app-overview"><i class="nopaque-icon nopaque-service-icon left" data-service="corpus-analysis"></i>Corpus analysis</a></li>
+  <li class="tab col s3"><a class="active" href="#corpus-analysis-app-overview"><i class="nopaque-icons service-icon 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>
 </ul>
@@ -57,13 +57,6 @@
 
 {% block scripts %}
 {{ super() }}
-{% assets output="js/CorpusAnalysis.min.bundle.js",
-          "js/CorpusAnalysis/CQiClient.js",
-          "js/CorpusAnalysis/CorpusAnalysisApp.js",
-          "js/CorpusAnalysis/CorpusAnalysisConcordance.js",
-          "js/CorpusAnalysis/CorpusAnalysisReader.js" %}
-<script src="{{ ASSET_URL }}"></script>
-{% endassets %}
 <script>
 const corpusAnalysisApp = new CorpusAnalysisApp({{ corpus.hashid|tojson }});
 const corpusAnalysisConcordance = new CorpusAnalysisConcordance(corpusAnalysisApp);

app/templates/corpora/corpus.html.j2

@@ -1,7 +1,7 @@
 {% extends "base.html.j2" %}
 {% from "corpora/_breadcrumbs.html.j2" import breadcrumbs with context %}
 
-{% block main_attribs %} class="nopaque-service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
+{% block main_attribs %} class="service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
 
 {% block page_content %}
 <div class="container">
@@ -14,7 +14,7 @@
         <div class="col s4 m3 l2 right-align">
           <p>&nbsp;</p>
           <p>&nbsp;</p>
-          <span class="chip corpus-status nopaque-corpus-status-color nopaque-corpus-status-text white-text"></span>
+          <span class="chip corpus-status corpus-status-color corpus-status-text white-text"></span>
           <div class="active preloader-wrapper small corpus-status-spinner">
             <div class="spinner-layer spinner-blue-only">
               <div class="circle-clipper left">
@@ -31,7 +31,7 @@
         </div>
       </div>
 
-      <div class="card nopaque-service-color-border border-darken" data-service="corpus-analysis" style="border-top: 10px solid">
+      <div class="card service-color-border border-darken" data-service="corpus-analysis" style="border-top: 10px solid">
         <div class="card-content">
           <div class="row">
             <div class="col s12">
@@ -65,7 +65,7 @@
         </div>
         <div class="card-action right-align">
           <a class="btn corpus-analyse-trigger disabled waves-effect waves-light" href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}"><i class="material-icons left">search</i>Analyze</a>
-          <a class="btn corpus-build-trigger disabled waves-effect waves-light" href="{{ url_for('corpora.build_corpus', corpus_id=corpus.id) }}"><i class="nopaque-icon left">K</i>Build</a>
+          <a class="btn corpus-build-trigger disabled waves-effect waves-light" href="{{ url_for('corpora.build_corpus', corpus_id=corpus.id) }}"><i class="nopaque-icons left">K</i>Build</a>
           <a class="btn disabled export-corpus-trigger waves-effect waves-light" href="{{ url_for('corpora.export_corpus', corpus_id=corpus.id) }}"><i class="material-icons left">import_export</i>Export</a>
           <a class="btn modal-trigger red waves-effect waves-light" data-target="delete-corpus-modal"><i class="material-icons left">delete</i>Delete</a>
         </div>

app/templates/corpora/corpus_file.html.j2

@@ -2,7 +2,7 @@
 {% from "corpora/_breadcrumbs.html.j2" import breadcrumbs with context %}
 {% import "materialize/wtf.html.j2" as wtf %}
 
-{% block main_attribs %} class="nopaque-service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
+{% block main_attribs %} class="service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
 
 {% block page_content %}
 <div class="container">

app/templates/corpora/import_corpus.html.j2

@@ -2,7 +2,7 @@
 {% from "corpora/_breadcrumbs.html.j2" import breadcrumbs with context %}
 {% import "materialize/wtf.html.j2" as wtf %}
 
-{% block main_attribs %} class="nopaque-service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
+{% block main_attribs %} class="service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
 
 {% block page_content %}
 <div class="container">

app/templates/jobs/job.html.j2

@@ -1,7 +1,7 @@
 {% extends "base.html.j2" %}
 {% from "jobs/_breadcrumbs.html.j2" import breadcrumbs with context %}
 
-{% block main_attribs %} class="nopaque-service-scheme" data-service="{{ job.service }}"{% endblock main_attribs %}
+{% block main_attribs %} class="service-scheme" data-service="{{ job.service }}"{% endblock main_attribs %}
 
 {% block page_content %}
 <div class="container">
@@ -9,12 +9,12 @@
     <div class="col s12" data-job-id="{{ job.hashid }}" data-user-id="{{ job.user.hashid }}" id="job-display">
       <div class="row">
         <div class="col s8 m9 l10">
-          <h1 id="title"><i style="font-size: inherit;" class="nopaque-icon nopaque-service-icon" data-service="{{ job.service }}"></i> <span class="job-title"></span></h1>
+          <h1 id="title"><i style="font-size: inherit;" class="nopaque-icons service-icon" data-service="{{ job.service }}"></i> <span class="job-title"></span></h1>
         </div>
         <div class="col s4 m3 l2 right-align">
           <p>&nbsp;</p>
           <p>&nbsp;</p>
-          <span class="chip job-status nopaque-job-status-text nopaque-job-status-color white-text"></span>
+          <span class="chip job-status job-status-text job-status-color white-text"></span>
           <div class="active preloader-wrapper small job-status-spinner">
             <div class="spinner-layer spinner-blue-only">
               <div class="circle-clipper left">
@@ -31,7 +31,7 @@
         </div>
       </div>
 
-      <div class="card nopaque-service-color-border border-darken" data-service="{{ job.service }}" style="border-top: 10px solid">
+      <div class="card service-color-border border-darken" data-service="{{ job.service }}" style="border-top: 10px solid">
         <div class="card-content">
           <div class="row">
             <div class="col s12">

app/templates/main/dashboard.html.j2

@@ -116,36 +116,36 @@
           <div class="card-panel center-align hoverable">
             <br>
             <a href="{{ url_for('services.service', service='file-setup') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
-              <i class="nopaque-icon nopaque-service-color darken nopaque-service-icon" data-service="file-setup"></i>
+              <i class="nopaque-icons service-color darken service-icon" data-service="file-setup"></i>
             </a>
             <br><br>
-            <p class="nopaque-service-color-text darken" data-service="file-setup"><b>File setup</b></p>
+            <p class="service-color-text darken" data-service="file-setup"><b>File setup</b></p>
             <p class="light">Digital copies of text based research data (books, letters, etc.) often comprise various files and formats. nopaque converts and merges those files to facilitate further processing.</p>
-            <a href="{{ url_for('services.service', service='file-setup') }}" class="waves-effect waves-light btn nopaque-service-color darken" data-service="file-setup">Create Job</a>
+            <a href="{{ url_for('services.service', service='file-setup') }}" class="waves-effect waves-light btn service-color darken" data-service="file-setup">Create Job</a>
           </div>
       </div>
       <div class="col s12 m4">
           <div class="card-panel center-align hoverable">
             <br>
             <a href="{{ url_for('services.service', service='tesseract-ocr') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
-              <i class="nopaque-icon nopaque-service-color darken nopaque-service-icon" data-service="tesseract-ocr" style="font-size: 2.5rem;"></i>
+              <i class="nopaque-icons service-color darken service-icon" data-service="tesseract-ocr" style="font-size: 2.5rem;"></i>
             </a>
             <br><br>
-            <p class="nopaque-service-color-text darken" data-service="tesseract-ocr"><b>Optical Character Recognition</b></p>
+            <p class="service-color-text darken" data-service="tesseract-ocr"><b>Optical Character Recognition</b></p>
             <p class="light">nopaque converts your image data – like photos or scans – into text data through a process called OCR. This step enables you to proceed with further computational analysis of your documents.</p>
-            <a href="{{ url_for('services.service', service='tesseract-ocr') }}" class="waves-effect waves-light btn nopaque-service-color darken" data-service="tesseract-ocr">Create Job</a>
+            <a href="{{ url_for('services.service', service='tesseract-ocr') }}" class="waves-effect waves-light btn service-color darken" data-service="tesseract-ocr">Create Job</a>
           </div>
       </div>
       <div class="col s12 m4">
           <div class="card-panel center-align hoverable">
             <br>
             <a href="{{ url_for('services.service', service='spacy-nlp') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
-              <i class="nopaque-icon nopaque-service-color darken nopaque-service-icon" data-service="spacy-nlp" style="font-size: 2.5rem;"></i>
+              <i class="nopaque-icons service-color darken service-icon" data-service="spacy-nlp" style="font-size: 2.5rem;"></i>
             </a>
             <br><br>
-            <p class="nopaque-service-color-text darken" data-service="spacy-nlp"><b>Natural Language Processing</b></p>
+            <p class="service-color-text darken" data-service="spacy-nlp"><b>Natural Language Processing</b></p>
             <p class="light">By means of computational linguistic data processing (tokenization, lemmatization, part-of-speech tagging and named-entity recognition) nopaque extracts additional information from your text.</p>
-            <a href="{{ url_for('services.service', service='spacy-nlp') }}" class="waves-effect waves-light btn nopaque-service-color darken" data-service="spacy-nlp">Create Job</a>
+            <a href="{{ url_for('services.service', service='spacy-nlp') }}" class="waves-effect waves-light btn service-color darken" data-service="spacy-nlp">Create Job</a>
           </div>
       </div>
     </div>

app/templates/main/index.html.j2

@@ -21,22 +21,22 @@
         <div class="col s12">
           <div class="row">
             <div class="col s12 m6 l3 center-align">
-              <i class="large nopaque-icon secondary-color-text">A</i><br>
+              <i class="large nopaque-icons secondary-color-text">A</i><br>
               <b class="primary-color-text">Speeds up your work</b>
               <p class="light">All tools provided by nopaque are carefully selected to provide a complete tool suite without being held up by compatibility issues.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large nopaque-icon secondary-color-text">B</i><br>
+              <i class="large nopaque-icons secondary-color-text">B</i><br>
               <b class="primary-color-text">Cloud infrastructure</b>
               <p class="light">All computational work is processed within nopaque’s cloud infrastructure. You don't need to install any software. Great, right?</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large nopaque-icon secondary-color-text">C</i><br>
+              <i class="large nopaque-icons secondary-color-text">C</i><br>
               <b class="primary-color-text">User friendly</b>
               <p class="light">You can start right away without having to read mile-long manuals. All services come with default settings that make it easy for you to just get going. Also great, right?</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large nopaque-icon secondary-color-text">D</i><br>
+              <i class="large nopaque-icons secondary-color-text">D</i><br>
               <b class="primary-color-text">Meshing processes</b>
               <p class="light">No matter where you step in, nopaque facilitates and accompanies your research. Its workflow perfectly ties in with your research process.</p>
             </div>
@@ -77,34 +77,34 @@
           <div class="row">
             <div class="col s12 m6 l3 center-align">
               <a href="{{ url_for('services.service', service='file-setup') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
-                <i class="nopaque-icon nopaque-service-color darken nopaque-service-icon" data-service="file-setup"></i>
+                <i class="nopaque-icons service-color darken service-icon" data-service="file-setup"></i>
               </a>
               <br><br>
-              <p class="nopaque-service-color-text text-darken" data-service="file-setup"><b>File setup</b></p>
+              <p class="service-color-text text-darken" data-service="file-setup"><b>File setup</b></p>
               <p class="light">Digital copies of text based research data (books, letters, etc.) often comprise various files and formats. nopaque converts and merges those files to facilitate further processing and the application of other services.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
               <a href="{{ url_for('services.service', service='tesseract-ocr') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
-                <i class="nopaque-icon nopaque-service-color darken nopaque-service-icon" data-service="tesseract-ocr"></i>
+                <i class="nopaque-icons service-color darken service-icon" data-service="tesseract-ocr"></i>
               </a>
               <br><br>
-              <p class="nopaque-service-color-text text-darken" data-service="tesseract-ocr"><b>Optical Character Recognition</b></p>
+              <p class="service-color-text text-darken" data-service="tesseract-ocr"><b>Optical Character Recognition</b></p>
               <p class="light">nopaque converts your image data – like photos or scans – into text data through OCR making it machine readable. This step enables you to proceed with further computational analysis of your documents.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <a href="{{ url_for('services.service', service='nlp') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
+              <a href="{{ url_for('services.service', service='spacy-nlp') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
-                <i class="nopaque-icon nopaque-service-color darken nopaque-service-icon" data-service="nlp"></i>
+                <i class="nopaque-icons service-color darken service-icon" data-service="spacy-nlp"></i>
               </a>
               <br><br>
-              <p class="nopaque-service-color-text text-darken" data-service="nlp"><b>Natural Language Processing</b></p>
+              <p class="service-color-text text-darken" data-service="spacy-nlp"><b>Natural Language Processing</b></p>
               <p class="light">By means of computational linguistic data processing (tokenization, lemmatization, part-of-speech tagging and named-entity recognition) nopaque extracts additional information from your text.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
               <a href="{{ url_for('services.service', service='corpus_analysis') }}" class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
-                <i class="nopaque-icon nopaque-service-color darken nopaque-service-icon" data-service="corpus-analysis"></i>
+                <i class="nopaque-icons service-color darken service-icon" data-service="corpus-analysis"></i>
               </a>
               <br><br>
-              <p class="nopaque-service-color-text text-darken" data-service="corpus-analysis"><b>Corpus analysis</b></p>
+              <p class="service-color-text text-darken" data-service="corpus-analysis"><b>Corpus analysis</b></p>
               <p class="light">nopaque lets you create and upload as many text corpora as you want. It makes use of CQP Query Language, which allows for complex search requests with the aid of metadata and NLP tags.</p>
             </div>
           </div>

app/templates/services/corpus_analysis.html.j2

@@ -1,7 +1,7 @@
 {% extends "base.html.j2" %}
 {% from "services/_breadcrumbs.html.j2" import breadcrumbs with context %}
 
-{% block main_attribs %} class="nopaque-service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
+{% block main_attribs %} class="service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}
 
 {% block page_content %}
 <div class="container">
@@ -13,7 +13,7 @@
     <div class="col s12 m3 push-m9">
       <div class="center-align">
         <a class="btn-floating btn-large btn-scale-x2 waves-effect waves-light" style="transform: scale(2);">
-          <i class="nopaque-icon nopaque-service-color darken nopaque-service-icon" data-service="corpus-analysis"></i>
+          <i class="nopaque-icons service-color darken service-icon" data-service="corpus-analysis"></i>
         </a>
       </div>
     </div>

app/templates/services/file_setup.html.j2

@@ -2,7 +2,7 @@
 {% from "services/_breadcrumbs.html.j2" import breadcrumbs with context %}
 {% import "materialize/wtf.html.j2" as wtf %}
 
-{% block main_attribs %} class="nopaque-service-scheme" data-service="file-setup"{% endblock main_attribs %}
+{% block main_attribs %} class="service-scheme" data-service="file-setup"{% endblock main_attribs %}
 
 {% block page_content %}
 <div class="container">
@@ -16,13 +16,13 @@
         <p class="hide-on-small-only">&nbsp;</p>
         <p class="hide-on-small-only">&nbsp;</p>
         <a class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
-          <i class="nopaque-icon nopaque-service-color darken nopaque-service-icon" data-service="file-setup"></i>
+          <i class="nopaque-icons service-color darken service-icon" data-service="file-setup"></i>
         </a>
       </div>
     </div>
 
     <div class="col s12 m9 pull-m3">
-      <div class="card nopaque-service-color-border border-darken" data-service="file-setup" style="border-top: 10px solid;">
+      <div class="card service-color-border border-darken" data-service="file-setup" style="border-top: 10px solid;">
         <div class="card-content">
           <div class="row">
             <div class="col s12">

app/templates/services/spacy_nlp.html.j2

@@ -2,7 +2,7 @@
 {% from "services/_breadcrumbs.html.j2" import breadcrumbs with context %}
 {% import "materialize/wtf.html.j2" as wtf %}
 
-{% block main_attribs %} class="nopaque-service-scheme" data-service="spacy-nlp"{% endblock main_attribs %}
+{% block main_attribs %} class="service-scheme" data-service="spacy-nlp"{% endblock main_attribs %}
 
 {% block page_content %}
 <div class="container">
@@ -16,13 +16,13 @@
         <p class="hide-on-small-only">&nbsp;</p>
         <p class="hide-on-small-only">&nbsp;</p>
         <a class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
-          <i class="nopaque-icon nopaque-service-color darken nopaque-service-icon" data-service="spacy-nlp"></i>
+          <i class="nopaque-icons service-color darken service-icon" data-service="spacy-nlp"></i>
         </a>
       </div>
     </div>
 
     <div class="col s12 m9 pull-m3">
-      <div class="card nopaque-service-color-border border-darken" data-service="spacy-nlp" style="border-top: 10px solid;">
+      <div class="card service-color-border border-darken" data-service="spacy-nlp" style="border-top: 10px solid;">
         <div class="card-content">
           <div class="row">
             <div class="col s12 m6">

app/templates/services/tesseract_ocr.html.j2

@@ -2,7 +2,7 @@
 {% from "services/_breadcrumbs.html.j2" import breadcrumbs with context %}
 {% import "materialize/wtf.html.j2" as wtf %}
 
-{% block main_attribs %} class="nopaque-service-scheme" data-service="tesseract-ocr"{% endblock main_attribs %}
+{% block main_attribs %} class="service-scheme" data-service="tesseract-ocr"{% endblock main_attribs %}
 
 {% block page_content %}
 <div class="container">
@@ -16,13 +16,13 @@
         <p class="hide-on-small-only">&nbsp;</p>
         <p class="hide-on-small-only">&nbsp;</p>
         <a class="btn-floating btn-large btn-scale-x2 waves-effect waves-light">
-          <i class="nopaque-icon nopaque-service-color darken nopaque-service-icon" data-service="tesseract-ocr"></i>
+          <i class="nopaque-icons service-color darken service-icon" data-service="tesseract-ocr"></i>
         </a>
       </div>
     </div>
 
     <div class="col s12 m9 pull-m3">
-      <div class="card nopaque-service-color-border border-darken" data-service="tesseract-ocr" style="border-top: 10px solid;">
+      <div class="card service-color-border border-darken" data-service="tesseract-ocr" style="border-top: 10px solid;">
         <div class="card-content">
           <div class="row">
             <div class="col s12">

config.py

@@ -1,4 +1,5 @@
 from dotenv import load_dotenv
+from flask import Flask
 from logging.handlers import RotatingFileHandler
 from werkzeug.middleware.proxy_fix import ProxyFix
 import logging
@@ -92,7 +93,7 @@ class Config:
         int(os.environ.get('NOPAQUE_PROXY_FIX_X_PROTO', '0'))
 
     @classmethod
-    def init_app(cls, app):
+    def init_app(cls, app: Flask):
         # Set up logging according to the corresponding (NOPAQUE_LOG_*)
         # configurations
         app.logger.setLevel(app.config.get('NOPAQUE_LOG_LEVEL'))

requirements.txt

@@ -17,6 +17,7 @@ gunicorn
 hiredis
 jsonschema
 psycopg2
+pyScss
 python-dotenv
 pyyaml
 redis