Merge pull request #9 from seroanalytics/i3

i3 Dockerise the app

.dockerignore

@@ -0,0 +1,7 @@
+/node_modules
+*.log
+.DS_Store
+.env
+/.cache
+/public/build
+/build

.github/workflows/build.yml

@@ -11,7 +11,7 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  lint:
+  build:
     name: 🔨 Build
     runs-on: ubuntu-latest
     steps:

.github/workflows/docker.yml

@@ -0,0 +1,37 @@
+name: 🚢 Docker
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+env:
+  BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  docker:
+    name: 🚢 Docker
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: 🔨 Build image
+        run: ./scripts/build
+
+      - name: 🔥 Smoke test
+        run: ./scripts/smoke-test
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: 🚢 Push image
+        run: ./scripts/push

Dockerfile

@@ -0,0 +1,51 @@
+# base node image
+
+FROM node:21-bullseye-slim AS base
+
+# set for base and all layer that inherit from it
+
+ENV NODE_ENV=production
+
+# Install all node_modules, including dev dependencies
+
+FROM base AS deps
+
+WORKDIR /app
+
+ADD package.json ./
+RUN npm install --include=dev
+
+# Setup production node_modules
+
+FROM base AS production-deps
+
+WORKDIR /app
+
+COPY --from=deps /app/node_modules /app/node_modules
+ADD package.json ./
+RUN npm prune --omit=dev
+
+# Build the app
+
+FROM base AS build
+
+WORKDIR /app
+
+COPY --from=deps /app/node_modules /app/node_modules
+
+ADD . .
+RUN npm run build
+
+# Finally, build the production image with minimal footprint
+
+FROM base
+
+WORKDIR /app
+
+COPY --from=production-deps /app/node_modules /app/node_modules
+
+COPY --from=build /app/build /app/build
+COPY --from=build /app/public /app/public
+ADD . .
+
+CMD ["npm", "start"]

README.md

@@ -14,5 +14,24 @@ Based on the `remix` Javascript/Typescript framework.
 * Run `npm install` from this directory to install dependencies
 * Start the dev server with `npm run dev`. You should now see the app served at http://localhost:3000.
 
-## Electron app
-To start as an Electron app instead, run `npm run electron`.
+## Deploying
+`server.ts` will start an Express app that run the Remix app on port 3000 and serves Prometheus metrics on port 3001
+
+* run `npm build` followed by `npm start` to test the production build locally
+* run `./scripts/build` to build a Docker image, tagged with the branch name and commit hash
+* run `./scripts/push` to push the image to Dockerhub
+* run `docker run -d -p 3000:3000 -p 3001:3001 seroanalytics/epikinetics-app:<branch_name>`
+
+The Docker `build` script is run as a GitHub action, and both `build` and `push` are run via GH action on merge to main.
+
+## Jest
+We use Jest for unit testing. Config lives in `jest.config.mjs` and tests are executed via `npm test`. 
+These are also executed via GH actions and code coverage sent to codecov.io.
+
+## Linting
+We use ESLint for linting. Config lives in `eslint.config.mjs` and job is run via `npm run lint`.
+This is also run via GH actions.
+
+## Electron app [![Project Status: Concept – Minimal or no implementation has been done yet, or the repository is only intended to be a limited example, demo, or proof-of-concept.](https://www.repostatus.org/badges/latest/concept.svg)](https://www.repostatus.org/#concept)
+We may or may not want to ship this as a desktop app at some point.
+To start as an Electron app instead of a browser app, run `npm run electron`.

app/RootContext.ts

@@ -11,7 +11,7 @@ const biomarkerModel: Model = {
     key: "biomarker",
     datasets: [{
         key: "legacy",
-        displayName: "SARS-CoV2-legacy"
+        displayName: "SARS-CoV-2 Legacy Study, Delta Wave"
     }],
     regressionModels: [
         {key: "infection_history", displayName: "Infection history"},

app/components/LinePlot.client.tsx

@@ -88,7 +88,8 @@ export default function LinePlot({data, traceVariables, traces, value, parent}:
         layout={{
             title: [parent, value].filter(x => x).join(" - "),
             legend: {xanchor: 'center', x: 0.5, orientation: 'h'},
-            yaxis: {type: "log", dtick: Math.log10(2)}
+            yaxis: {type: "log", dtick: Math.log10(2)},
+            paper_bgcolor: "rgba(255,255,255, 0)"
         }}
         useResizeHandler={true}
         style={{minWidth: "400px", width: "100%", height: "500"}}

app/styles/global.css

@@ -3,3 +3,7 @@
   --white: #ffffff;
   color: var(--primary-color);
 }
+
+[data-bs-theme="dark"] .plot-container {
+    filter: invert(75%) hue-rotate(180deg);
+}

app/utils/plotUtils.ts

@@ -38,7 +38,7 @@ export function getColors(traces: Dict<string[]>,
     }
     if (traceVariables.length == 1) {
         const colorIndex = index % colorFunctions.length;
-        const color = colorFunctions[colorIndex](0.2 * (Math.floor(index / colorFunctions.length) + 1));
+        const color = colorFunctions[colorIndex](1 - 0.2 * (Math.floor(index / colorFunctions.length)));
         return {line: color, fill: addOpacity(color)}
     }
     if (traceVariables.length == 2) {