A card based projects list in Vue

.devcontainer/devcontainer.json

@@ -14,22 +14,19 @@
             "extensions": [
                 "charliermarsh.ruff",
                 "ms-python.python",
-                "vscode-es6-string-html"
+                "Tobermory.es6-string-html" 
             ]
         }
     },
     // Use 'forwardPorts' to make a list of ports inside the container available locally.
-    // "forwardPorts": [],
-    "postCreateCommand": [
-        "pip3 install -e .",
-        "ln -s /root/conf/.genologicsrc /root/.genologicsrc",
-        "ln -s /root/conf/genosqlrc.yaml /root/.genosqlrc.yaml"
-    ],
+    "forwardPorts": [9761],
+    "postCreateCommand": "./.devcontainer/postCreateCommand.sh",
+    "postStartCommand": "cd run_dir && python ../status_app.py --develop --testing_mode",
     // Configure tool-specific properties.
     // "customizations": {},
     // Uncomment to connect as an existing user other than the container default. More info: https://aka.ms/dev-containers-non-root.
-    // "remoteUser": "devcontainer"
+    "remoteUser": "mambauser",
     "mounts": [
-        "source=${localEnv:HOME}/conf,target=/root/conf,type=bind,consistency=cached"
+        "source=${localEnv:HOME}/conf,target=/home/mambauser/conf,type=bind,consistency=cached"
     ]
 }

.devcontainer/postCreateCommand.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+/usr/local/bin/_entrypoint.sh
+
+echo $PATH
+
+python -m pip install -e .
+ln -s /home/mambauser/conf/.genologicsrc /home/mambauser/.genologicsrc
+ln -s /home/mambauser/conf/genosqlrc.yaml /home/mambauser/.genosqlrc.yaml

Dockerfile

@@ -1,17 +1,23 @@
-FROM condaforge/mambaforge:latest
-
+FROM mambaorg/micromamba:latest
 
+# Need git to install genologics
+USER root
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+USER $MAMBA_USER
 
 # Install dependencies
-COPY conda_requirements.yml conda_requirements.yml
-RUN mamba install -y python=3.12
-RUN mamba install -y pango>=1.42.4 pandas>=1.3.2
-RUN mamba install -y -c conda-forge psycopg2 open-fonts xorg-libxrender xorg-libxext xorg-libxau
+COPY --chown=$MAMBA_USER:$MAMBA_USER conda_requirements.yml conda_requirements.yml
+COPY --chown=$MAMBA_USER:$MAMBA_USER requirements.txt /tmp/requirements.txt
+COPY --chown=$MAMBA_USER:$MAMBA_USER requirements_dev.txt /tmp/requirements_dev.txt
+
+RUN micromamba install -y -n base -f conda_requirements.yml
 
-COPY requirements.txt requirements.txt
 ARG MAMBA_DOCKERFILE_ACTIVATE=1
 # Update pip to latest version
 RUN python -m ensurepip --upgrade
 RUN python -m pip install --upgrade pip
 RUN python -m pip install --upgrade setuptools
-RUN python -m pip install -r requirements.txt
+RUN python -m pip install -r requirements.txt
+RUN python -m pip install -r requirements_dev.txt

README.md

@@ -1,9 +1,8 @@
 # Genomics Status
 
-Genomics Status is a Tornado web app for visualizing information and statistics regarding SciLifeLab Genomics platform operations.
+Genomics Status is a Tornado web app for visualizing information and statistics regarding operations by NGI Stockholm at SciLifeLab.
 
-Status interfaces with StatusDB; the CouchDB database instance we're using at SciLifeLab to store metadata in
-various forms. Document specifications for StatusDB are available in the internal wiki. Documentation about CouchDB can be found [here](http://guide.couchdb.org/).
+Genomics Status interfaces with StatusDB; the CouchDB database instance used to store metadata in various forms. Documentation about CouchDB can be found [here](http://guide.couchdb.org/).
 
 ## Installing and running genomics status
 
@@ -169,3 +168,9 @@ Handlers that inherit from ```tornado.web.RequestHandler``` should implement at
 Tornado templates are a good way to generate dynamic pages server side. The advantage of templates is that you can embeed python code in them. [The official documentation](http://www.tornadoweb.org/en/stable/template.html) is good enough to learn how they work.
 
 On Genomics Status, templates are located in `status/run_dir/design`
+
+
+TODO:
+    - [ ] Fix links to old project page vs new project page
+    - [ ] Add link to project cards from menu and front page
+

run_dir/design/base.html

@@ -157,9 +157,9 @@ <h6 class="dropdown-header">External</h6>
     </div>
   </div>
 
+  <script src="/static/js/bootstrap-5-alpha.bundle.min.js"></script>
   {% block js %}
   {% end %}
-  <script src="/static/js/bootstrap-5-alpha.bundle.min.js"></script>
   <script>
     $('.a-modal').on('click', function(e){
       e.preventDefault();

run_dir/design/bioinfo_tab/run_lane_sample_view.html

@@ -69,12 +69,16 @@
   <tbody class="text-center">
       {% for flowcell_id, flowcell in sorted(bioinfo['run_lane_sample_view'].items()) %}
         {% set disabled = True if flowcell.get('flowcell_status') in ['Demultiplexing', 'Transferring', 'Sequencing', 'ERROR', 'Failed', 'Delivered'] else False %}
+        {% set url_addition = "" %}
+        {% if flowcell.get("instrument_type") == "element"%}
+          {% set url_addition = "_element" %}
+        {% end %}
         <tr class="bioinfo-fc  {% if disabled %} bioinfo-status-disabled {% end %}"
             id="bioinfo-fc-{{ flowcell_id }}" data-parent="#bioinfo-project-{{ project_id }}">
           <td class="bioinfo-status-expand"><a class="bioinfo-expand text-decoration-none" href="#bioinfo-fc-{{ flowcell_id }}">
             <span class="fa fa-chevron-right"></span></a></td>
           <td></td>
-          <td><samp><a class="text-decoration-none" href="/flowcells/{{ flowcell_id }}">{{ flowcell_id }}</a></samp></td>
+          <td><samp><a class="text-decoration-none" href="/flowcells{{url_addition}}/{{ flowcell_id }}">{{ flowcell_id }}</a></samp></td>
           <td class="bioinfo-status-runstate"><span class="badge {{ status_css.get(flowcell['flowcell_status'], 'bg-secondary') }}">{{ flowcell['flowcell_status'] }}</span></td>
           <td class="bioinfo-status-row ?"><span class="fa fa-arrow-alt-right"></span></td>
           <td class="bioinfo-status-qc undemultiplexedreads unknown">?</td>

run_dir/design/bioinfo_tab/sample_run_lane_view.html

@@ -113,13 +113,17 @@
             </td>
         </tr>
         {% for flowcell_id, flowcell in sorted(sample['flowcells'].items()) %}
+          {% set url_addition = "" %}
+          {% if flowcell.get("instrument_type") == "element"%}
+            {% set url_addition = "_element" %}
+          {% end %}
           <tr class="bioinfo-fc  {% if flowcell.get('flowcell_status') in ['Demultiplexing', 'Transferring', 'Sequencing', 'ERROR', 'Failed', 'Delivered'] %} bioinfo-status-disabled {% end %}"
               id="bioinfo-fc-{{ sample_id }}-{{ flowcell_id }}"
               data-parent="#bioinfo-sample-{{ sample_id }}" style="display:none;">
             <td></td>
             <td class="bioinfo-status-expand"><a href="#bioinfo-fc-{{ sample_id }}-{{ flowcell_id }}" class="bioinfo-expand">
               <span class="fa fa-chevron-right"></span></a></td>
-            <td><samp><a class="text-decoration-none" href="/flowcells/{{ flowcell_id }}">{{ flowcell_id }}</a></samp></td>
+            <td><samp><a class="text-decoration-none" href="/flowcells{{url_addition}}/{{ flowcell_id }}">{{ flowcell_id }}</a></samp></td>
             <td class="bioinfo-status-runstate"><span class="badge {{ status_css.get(flowcell['flowcell_status'], 'bg-secondary') }}">{{ flowcell['flowcell_status'] }}</span></td>
             <td class="bioinfo-status-row ?"><span class="fa fa-arrow-alt-right"></span></td>
             <td class="bioinfo-status-qc undemultiplexedreads unknown">?</td>

run_dir/design/index.html

@@ -33,6 +33,8 @@ <h6 class="dropdown-header">User Presets</h6>
                 <li><a class="dropdown-item" href="/projects?load_preset={{preset_name}}">{{preset_name}}</a></li>
               {% end %}
             {% end %}
+            <div role="separator" class="dropdown-divider"></div>
+            <li><a class="dropdown-item" href="/project_cards">Experimental: Project Cards</a></li>
           </ul>
         </div>
       </div>

run_dir/design/project_cards.html

@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+
+<!--
+Template file: projects_status.html
+URL: /project_cards
+Title: Project cards
+-->
+
+
+{% block stuff %}
+
+<div id="v_projects_main">
+    <v-projects-cards :user="{email: '{{user.email}}', user: '{{user.name}}'}"/>
+</div>
+{% end %}
+
+{% block js %}
+
+<script src="/static/js/vue.v3.2.47.global.prod.js"></script>
+<script src="/static/js/axios.v1.3.4.min.js"></script>
+<script src="/static/js/external/textarea-caret.3.1.0.js"></script>
+<script type="module" src="/static/js/projects_main_vue.js"></script>
+
+{% end %}