Release fixes (#380)

* disable metadata downloads for alpha site

* Move group report styles to separate file

* Set B.1.617.2 to default active group

* move model code into own function

* Fix tree legend overflows

* bump to beta3

* Add environment file for cloudsql version, update instructions in docker files

* Default to connection pool of size 20, if not defined

* Order residues for proper residue querying in structural viewer. Closes #378

* bump to v2.2.1

.cloudsql_env

@@ -0,0 +1,7 @@
+POSTGRES_USER=...
+POSTGRES_PASSWORD=...
+POSTGRES_HOST=/cloudsql/[PROJECT ID]:us-central1:[SQL INSTANCE ID]
+POSTGRES_DB=[DB_NAME]
+GOOGLE_APPLICATION_CREDENTIALS=/path/to/credentials
+CLOUDSQL_CONNECTION_NAME=[PROJECT ID]:us-central1:[SQL INSTANCE ID]
+CONFIGFILE=config/[CONFIGFILE.yml]

docker-compose.cloudsql.prod.yml

@@ -1,4 +1,5 @@
-# docker-compose -f docker-compose.cloudsql.prod.yml -p cgprod
+# docker compose --env-file .cloudsql_env -f docker-compose.cloudsql.yml -p cgcloudsql build
+# docker compose --env-file .cloudsql_env -f docker-compose.cloudsql.yml -p cgcloudsql up -d
 
 version: "3.7"
 
@@ -18,6 +19,7 @@ services:
       - POSTGRES_PASSWORD
       - POSTGRES_DB
       - POSTGRES_HOST
+      - POSTGRES_MAX_CONN=20
     command: "gunicorn --bind :8080 --workers 1 --threads 8 --timeout 0 cg_server.main:app"
     # command: "flask run --host 0.0.0.0 --port=8080"
     ports:

docker-compose.cloudsql.yml

@@ -1,4 +1,5 @@
-# docker-compose -f docker-compose.cloudsql.yml -p cgcloudsql
+# docker compose --env-file .cloudsql_env -f docker-compose.cloudsql.yml -p cgcloudsql build
+# docker compose --env-file .cloudsql_env -f docker-compose.cloudsql.yml -p cgcloudsql up -d
 
 version: "3.7"
 
@@ -19,6 +20,7 @@ services:
       - POSTGRES_PASSWORD
       - POSTGRES_DB
       - POSTGRES_HOST
+      - POSTGRES_MAX_CONN=20
     # command: "gunicorn --bind :5000 --workers 1 --threads 8 --timeout 0 cg_server.main:app"
     command: "flask run --host 0.0.0.0 --port=5000"
     ports:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "covidcg",
-  "version": "2.2.0-beta2",
+  "version": "2.2.1",
   "description": "",
   "engines": {
     "node": ">=8",

services/server/cg_server/main.py

@@ -74,7 +74,7 @@ def verify_password(username, password):
     connection_options["port"] = port
 
 conn_pool = psycopg2.pool.SimpleConnectionPool(
-    1, os.environ["POSTGRES_MAX_CONN"], **connection_options
+    1, os.getenv("POSTGRES_MAX_CONN", 20), **connection_options
 )
 
 # Quickly check if our database has been initialized yet

src/components/GroupReport/GroupStructuralViewer.js

@@ -117,7 +117,8 @@ const StructuralViewer = observer(() => {
       .map((snv) => {
         snv.colorInd = Math.floor((snv.fraction - 0.001) * numColors);
         return snv;
-      });
+      })
+      .sort((a, b) => a.pos - b.pos);
 
     // For each color level, build a list of residues
     const heatmapEntries = [];
@@ -136,7 +137,7 @@ const StructuralViewer = observer(() => {
     colorHeatmap({ plugin, entries: heatmapEntries, ref });
   };
 
-  useEffect(() => {
+  const loadModel = () => {
     if (!plugin) {
       return;
     }
@@ -236,6 +237,10 @@ const StructuralViewer = observer(() => {
     });
 
     modelAction;
+  };
+
+  useEffect(() => {
+    loadModel();
   }, [
     plugin,
     plotSettingsStore.reportStructurePdbId,

src/components/Pages/GroupReportTab.js

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import { observer } from 'mobx-react';
-import styled from 'styled-components';
 import { useStores } from '../../stores/connect';
 
 import ReactTooltip from 'react-tooltip';
@@ -12,58 +11,13 @@ import GroupReportHeader from '../GroupReport/GroupReportHeader';
 import MutationList from '../GroupReport/MutationList';
 import StructuralViewer from '../GroupReport/GroupStructuralViewer';
 
-const MEDIAWIDTH = '1475px';
-
-const GroupReportTabContainer = styled.div`
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: 250px repeat(2, minmax(100px, 1fr));
-  max-height: 100vh;
-
-  @media (max-width: ${MEDIAWIDTH}) {
-    grid-template-rows: auto;
-    grid-template-columns: 250px minmax(100px, 1fr);
-    overflow-y: auto;
-  }
-`;
-
-const GroupTreePlotContainer = styled.div`
-  grid-row: 1 / 3;
-  grid-column: 1;
-
-  @media (max-width: ${MEDIAWIDTH}) {
-    grid-row: 1 / 4;
-  }
-`;
-
-const MutationsContainer = styled.div`
-  grid-column: 2;
-  grid-row: 1 / 3;
-
-  @media (max-width: ${MEDIAWIDTH}) {
-    grid-row: 2;
-  }
-`;
-
-const VOCContainer = styled.div`
-  grid-column: 3;
-  grid-row: 1;
-
-  @media (max-width: ${MEDIAWIDTH}) {
-    grid-column: 2;
-    grid-row: 1;
-  }
-`;
-
-const StructuralViewerContainer = styled.div`
-  grid-column: 3;
-  grid-row: 2;
-
-  @media (max-width: ${MEDIAWIDTH}) {
-    grid-column: 2;
-    grid-row: 3;
-  }
-`;
+import {
+  GroupReportTabContainer,
+  GroupTreePlotContainer,
+  MutationsContainer,
+  VOCContainer,
+  StructuralViewerContainer,
+} from './GroupReportTab.styles';
 
 const GroupReportTab = observer(() => {
   const { groupDataStore } = useStores();

src/components/Pages/GroupReportTab.styles.js

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+
+const MEDIAWIDTH = '1475px';
+
+export const GroupReportTabContainer = styled.div`
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: 250px repeat(2, minmax(100px, 1fr));
+  max-height: 100vh;
+
+  @media (max-width: ${MEDIAWIDTH}) {
+    grid-template-rows: auto;
+    grid-template-columns: 250px minmax(100px, 1fr);
+    overflow-y: auto;
+  }
+`;
+
+export const GroupTreePlotContainer = styled.div`
+  grid-row: 1 / 3;
+  grid-column: 1;
+
+  @media (max-width: ${MEDIAWIDTH}) {
+    grid-row: 1 / 4;
+  }
+`;
+
+export const MutationsContainer = styled.div`
+  grid-column: 2;
+  grid-row: 1 / 3;
+
+  @media (max-width: ${MEDIAWIDTH}) {
+    grid-row: 2;
+  }
+`;
+
+export const VOCContainer = styled.div`
+  grid-column: 3;
+  grid-row: 1;
+
+  @media (max-width: ${MEDIAWIDTH}) {
+    grid-column: 2;
+    grid-row: 1;
+  }
+`;
+
+export const StructuralViewerContainer = styled.div`
+  grid-column: 3;
+  grid-row: 2;
+
+  @media (max-width: ${MEDIAWIDTH}) {
+    grid-column: 2;
+    grid-row: 3;
+  }
+`;

src/components/Vega/GradientLegend.styles.js

@@ -4,6 +4,7 @@ export const LegendContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  padding-right: 40px;
 `;
 export const LegendTitle = styled.div``;
 export const LegendGradientBar = styled.div`

src/components/Vega/GroupTreePlot.js

@@ -184,9 +184,7 @@ const GroupTreePlot = observer(({ width }) => {
       let tickLocs = ticks.map((tick) => {
         return (ISOToInt(tick) - startDate) / rangeMS;
       });
-      let tickLabels = ticks.map((tick) => {
-        return tick.substr(0, 7);
-      });
+      let tickLabels = ['2020-01', '07', '2021-01', '07'];
 
       return (
         <GradientLegend

src/stores/plotSettingsStore.js

@@ -41,7 +41,7 @@ export const initialValues = {
   reportMutationListHidden: ['ORF1a'], // By default, hide ORF1a
   reportStructureActiveProtein: 'S',
   reportStructurePdbId: '6ZGG',
-  reportStructureActiveGroup: 'B.1.1.7',
+  reportStructureActiveGroup: 'B.1.617.2',
 };
 
 export class PlotSettingsStore {

src/utils/version.js

@@ -1 +1 @@
-export const version = '2.2.0-beta2';
+export const version = '2.2.1';