Adaptable MOTD (#639)

* Update banner from external HTML file * Don't track MOTD files
vector-engineering · Jan 29, 2024 · 1aaf38b · 1aaf38b
1 parent 2b208d3
commit 1aaf38b
Show file tree

Hide file tree

Showing 15 changed files with 46 additions and 11 deletions.
diff --git a/.gitignore b/.gitignore
@@ -147,3 +147,6 @@ workflow_main/notebooks/**
 
 # SnapGene - temp files
 static_data/flu/alignments/.sglock/**
+
+# MOTD
+MOTD*.html
diff --git a/config/config_flu_genbank.yaml b/config/config_flu_genbank.yaml
@@ -147,6 +147,7 @@ prod_hostname:
 
 site_title: "Flu PathMut"
 data_provider: "NCBI GenBank"
+motd_url: "https://storage.googleapis.com/ve-public/MOTD.html"
 
 # Default references for each subtype
 default_references:

diff --git a/config/config_flu_gisaid.yaml b/config/config_flu_gisaid.yaml
@@ -176,6 +176,7 @@ prod_hostname:
 
 site_title: "Flu PathMut"
 data_provider: "GISAID"
+motd_url: "https://storage.googleapis.com/ve-public/MOTD_FLU_GISAID.html"
 
 # Default references for each subtype
 default_references:

diff --git a/config/config_flu_gisaid_dev.yaml b/config/config_flu_gisaid_dev.yaml
@@ -176,6 +176,7 @@ prod_hostname:
 
 site_title: "Flu PathMut"
 data_provider: "GISAID"
+motd_url: "https://storage.googleapis.com/ve-public/MOTD_FLU_GISAID.html"
 
 # Default references for each subtype
 default_references:

diff --git a/config/config_rsv_custom.yaml b/config/config_rsv_custom.yaml
@@ -129,6 +129,7 @@ prod_hostname:
 
 site_title: "RSV PathMut"
 data_provider: "Custom"
+motd_url: "https://storage.googleapis.com/ve-public/MOTD.html"
 
 # Default references for each subtype
 default_references:

diff --git a/config/config_rsv_genbank.yaml b/config/config_rsv_genbank.yaml
@@ -141,6 +141,7 @@ prod_hostname:
 
 site_title: "RSV PathMut"
 data_provider: "NCBI GenBank"
+motd_url: "https://storage.googleapis.com/ve-public/MOTD.html"
 
 # Default references for each subtype
 default_references:

diff --git a/config/config_sars2_alpha.yaml b/config/config_sars2_alpha.yaml
@@ -177,6 +177,7 @@ prod_hostname:
 
 site_title: "COVID CG - Alpha"
 data_provider: "GISAID"
+motd_url: "https://storage.googleapis.com/ve-public/MOTD_SARS2_GISAID.html"
 
 # Default references for each subtype
 default_references:

diff --git a/config/config_sars2_custom.yaml b/config/config_sars2_custom.yaml
@@ -118,6 +118,7 @@ prod_hostname:
 
 site_title: "COVID CG"
 data_provider: "Custom"
+motd_url: "https://storage.googleapis.com/ve-public/MOTD.html"
 
 # Default references for each subtype
 default_references:

diff --git a/config/config_sars2_genbank.yaml b/config/config_sars2_genbank.yaml
@@ -135,6 +135,7 @@ prod_hostname:
 
 site_title: "COVID CG Genbank"
 data_provider: "NCBI GenBank"
+motd_url: "https://storage.googleapis.com/ve-public/MOTD_SARS2_GENBANK.html"
 
 # Default references for each subtype
 default_references:

diff --git a/config/config_sars2_genbank_dev.yaml b/config/config_sars2_genbank_dev.yaml
@@ -135,6 +135,7 @@ prod_hostname:
 
 site_title: "COVID CG Genbank"
 data_provider: "NCBI GenBank"
+motd_url: "https://storage.googleapis.com/ve-public/MOTD_SARS2_GENBANK.html"
 
 # Default references for each subtype
 default_references:

diff --git a/config/config_sars2_gisaid.yaml b/config/config_sars2_gisaid.yaml
@@ -179,6 +179,7 @@ prod_hostname:
 
 site_title: "COVID CG"
 data_provider: "GISAID"
+motd_url: "https://storage.googleapis.com/ve-public/MOTD_SARS2_GISAID.html"
 
 # Default references for each subtype
 default_references:

diff --git a/config/config_sars2_gisaid_private.yaml b/config/config_sars2_gisaid_private.yaml
@@ -177,6 +177,7 @@ prod_hostname:
 
 site_title: "COVID CG"
 data_provider: "GISAID"
+motd_url: "https://storage.googleapis.com/ve-public/MOTD_SARS2_GISAID.html"
 
 # Default references for each subtype
 default_references:

diff --git a/src/components/Pages/HomeTab.js b/src/components/Pages/HomeTab.js
@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import { observer } from 'mobx-react';
+import { useStores } from '../../stores/connect';
 import useDimensions from 'react-use-dimensions';
 
-import ExternalLink from '../Common/ExternalLink';
-
 import WalkthroughList from '../Example/WalkthroughList';
 import SurveillancePlot from '../Viz/SurveillancePlot';
 import GlobalSeqPlot from '../Viz/GlobalSeqPlot';
@@ -20,19 +19,15 @@ import {
 } from './HomeTab.styles';
 
 const HomeTab = observer(() => {
+  const { UIStore } = useStores();
   const [ref, { width }] = useDimensions();
   const [showBanner, setShowBanner] = useState(config['show_home_banner']);
 
   return (
     <HomeTabContainer ref={ref}>
-      {showBanner && (
+      {showBanner && UIStore.motd.length > 0 && (
         <PubBanner>
-          <p>
-            COVID CG is{' '}
-            <ExternalLink href="https://doi.org/10.7554/eLife.63409">
-              published in eLife
-            </ExternalLink>
-          </p>
+          <div dangerouslySetInnerHTML={{ __html: UIStore.motd }} />
           <CloseButton onClick={setShowBanner.bind(this, false)}>
             Dismiss
           </CloseButton>

diff --git a/src/components/Pages/HomeTab.styles.js b/src/components/Pages/HomeTab.styles.js
@@ -24,7 +24,7 @@ export const PubBanner = styled.div`
   padding: 5px;
   border-bottom: 1px solid #aaa;
 
-  p {
+  div {
     margin: 0px;
     margin-left: auto;
   }

diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
@@ -2,6 +2,7 @@ import { observable, action, toJS } from 'mobx';
 import { ASYNC_STATES, TABS } from '../constants/defs.json';
 import { rootStoreInstance } from './rootStore';
 import { updateURLFromParams } from '../utils/updateQueryParam';
+import { config } from '../config';
 
 export const initialValues = {
   caseDataState: ASYNC_STATES.STARTED,
@@ -34,7 +35,32 @@ export class UIStore {
   @observable activeTab = initialValues.activeTab;
   @observable keysPressed = initialValues.keysPressed;
 
-  init() {}
+  @observable motd = '';
+
+  init() {
+    // Get the MOTD
+    fetch(config.motd_url, { cache: 'no-cache' })
+      .then((res) => {
+        if (!res.ok) {
+          throw res;
+        }
+        return res.text();
+      })
+      .then((data) => {
+        this.motd = data;
+      })
+      .catch((err) => {
+        let prefix = 'Error getting MOTD';
+        if (!(typeof err.text === 'function')) {
+          console.error(prefix, err);
+        } else {
+          err.text().then((errMsg) => {
+            console.error(prefix, errMsg);
+          });
+        }
+        this.motd = '';
+      });
+  }
 
   @action
   resetValues = (values) => {