Merge pull request #8 from seroanalytics/colors

i7 dynamic colors by variable
seroanalytics · Aug 2, 2024 · 3b19d22 · 3b19d22
2 parents 1b578eb + 01aabc9
commit 3b19d22
Show file tree

Hide file tree

Showing 17 changed files with 8,331 additions and 5,252 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,35 @@
+name: 🔎 Test
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  lint:
+    name: 🔎 Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v4
+
+      - name: 📥 Install deps
+        run: npm install --frozen-lockfile
+
+      - name: 🔎 Test
+        run: npm run test
+
+      - name: Upload coverage
+        uses: codecov/codecov-action@v4
+        with:
+          fail_ci_if_error: true
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 # epikinetics-app [![Project Status: WIP – Initial development is in progress, but there has not yet been a stable, usable release suitable for the public.](https://www.repostatus.org/badges/latest/wip.svg)](https://www.repostatus.org/#wip)
 [![⬣ Lint](https://github.com/seroanalytics/epikinetics-app/actions/workflows/lint.yml/badge.svg)](https://github.com/seroanalytics/epikinetics-app/actions/workflows/lint.yml)
 [![🔨 Build](https://github.com/seroanalytics/epikinetics-app/actions/workflows/build.yml/badge.svg)](https://github.com/seroanalytics/epikinetics-app/actions/workflows/build.yml)
+[![codecov](https://codecov.io/gh/seroanalytics/epikinetics-app/graph/badge.svg?token=FH6QSJGNVR)](https://codecov.io/gh/seroanalytics/epikinetics-app)
 
 Browser application for exploring [epikinetics](https://seroanalytics.github.io/epikinetics/) model results. 
 Based on the `remix` Javascript/Typescript framework.

diff --git a/app/RootContext.ts b/app/RootContext.ts
@@ -1,42 +1,5 @@
 import {createContext} from "react";
-
-type PlotDisplay = "facet" | "trace"
-
-export interface PlotOptions {
-    [index: string]: PlotDisplay
-}
-
-export interface PlotConfig {
-    key: string
-    displayName: string
-    type: string,
-    lineColors?: any
-    fillColors?: any
-}
-
-export interface Model {
-    key: string
-    displayName: string
-    datasets: Dataset[]
-    regressionModels: Covariate[]
-    plots: PlotConfig[]
-    variables: Covariate[]
-}
-
-export interface Dataset {
-    key: string
-    displayName: string
-}
-
-export interface Covariate {
-    displayName: string
-    key: string
-}
-
-export interface AppState {
-    models: Model[]
-    selectedPlotOptions: { [index: string]: PlotOptions }
-}
+import {AppState, Model} from "~/types";
 
 export interface AppContext {
     state: AppState
@@ -57,31 +20,14 @@ const biomarkerModel: Model = {
     plots: [{
         key: "pop_fits",
         displayName: "Population fits",
-        type: "line",
-        lineColors: [
-            `rgba(204, 102, 119, 1)`,
-            `rgba(221, 204, 119, 1)`,
-            `rgba(136, 204, 238, 1)`,
-            `rgba(136, 34, 85, 1)`,
-            `rgba(68, 170, 153, 1)`,
-            `rgba(226, 226, 226, 1)`]
-        ,
-        fillColors: [
-            `rgba(204, 102, 119, 0.3)`,
-            `rgba(221, 204, 119, 0.3)`,
-            `rgba(136, 204, 238, 0.3)`,
-            `rgba(136, 34, 85, 0.3)`,
-            `rgba(68, 170, 153, 0.3)`,
-            `rgba(226, 226, 226, 0.3)`
-
-        ]
+        type: "line"
     }],
     variables: [{key: "titre_type", displayName: "Titre type"}]
 }
 
 export const initialState: AppState = {
-        models:  [biomarkerModel],
-        selectedPlotOptions: {}
+    models: [biomarkerModel],
+    selectedPlotOptions: {}
 }
 
 export const RootContext = createContext<AppContext>({

diff --git a/app/components/ConfiguredPlot.tsx b/app/components/ConfiguredPlot.tsx
@@ -1,8 +1,9 @@
 import React, {useContext} from "react";
-import {AppContext, Covariate, PlotConfig, RootContext} from "~/RootContext";
+import {AppContext, RootContext} from "~/RootContext";
 import {Col, Row} from "react-bootstrap";
 import LocalPlot from "~/components/LocalPlot";
 import useSelectedModel from "~/hooks/useSelectedModel";
+import {Covariate, PlotConfig} from "~/types";
 
 interface Dat {
     [index: string]: string | number
@@ -18,6 +19,7 @@ interface Props {
     facetVariables: Covariate[],
     traceVariables: Covariate[],
     plot: PlotConfig
+    key: string
 }
 
 function Facet({

diff --git a/app/components/LocalPlot.client.tsx → app/components/LinePlot.client.tsx b/app/components/LocalPlot.client.tsx → app/components/LinePlot.client.tsx
@@ -1,39 +1,33 @@
 import React from 'react';
 import Plot from 'react-plotly.js';
-import {Covariate, PlotConfig} from "~/RootContext";
+import {Covariate, Dict} from "~/types";
+import {getColors, permuteArrays} from "~/utils/plotUtils";
 
 interface Dat {
     t: number
     me: number
     lo: number
     hi: number
+
     [index: string]: string | number
 }
 
 interface Props {
     data: Dat[],
     traceVariables: Covariate[]
-    traces: { [k: string]: string[] }
+    traces: Dict<string[]>
     value: string
     parent: string
-    plot: PlotConfig
 }
 
 function showLegend(traces: Covariate[]) {
     return traces.length > 0
 }
 
-function permuteArrays(first, next, ...rest) {
-    if (!first) return [];
-    if (!next) next = [""];
-    if (rest.length) next = permuteArrays(next, ...rest);
-    return first.flatMap(a => next.map(b => [a, b].flat()));
-}
-
-export default function LocalPlot({data, traceVariables, traces, value, parent, plot}: Props) {
+export default function LinePlot({data, traceVariables, traces, value, parent}: Props) {
 
     let traceDatasets = [data];
-    const traceDefinitions = permuteArrays(...traceVariables.map(v => traces[v.key]))
+    const traceDefinitions = permuteArrays(...traceVariables.map(v => traces[v.key]));
 
     if (traceDefinitions.length > 0) {
         traceDatasets = traceDefinitions.map(td =>
@@ -53,12 +47,13 @@ export default function LocalPlot({data, traceVariables, traces, value, parent,
     const subsets = traceDatasets.map((dataset, i) => {
         const times = dataset.map(d => d.t);
         const seriesName = traceDefinitions.length > 0 ? traceDefinitions[i].join(" ") : "";
+        const color = getColors(traces, traceVariables, i, traceDefinitions[i], traceDatasets.length);
         return [{
             x: times,
             y: dataset.map(d => d.lo),
             name: seriesName,
             line: {color: "transparent"},
-            marker: {color: plot.lineColors[i]},
+            marker: {color: color.line},
             showlegend: false,
             legendgroup: i,
             type: "scatter",
@@ -71,9 +66,9 @@ export default function LocalPlot({data, traceVariables, traces, value, parent,
             type: 'scatter',
             mode: 'lines',
             fill: "tonexty",
-            fillcolor: plot.fillColors[i],
+            fillcolor: color.fill,
             showlegend: showLegend(traceVariables),
-            marker: {color: plot.lineColors[i]},
+            marker: {color: color.line},
         }, {
             x: times,
             y: dataset.map(d => d.hi),
@@ -84,7 +79,7 @@ export default function LocalPlot({data, traceVariables, traces, value, parent,
             type: "scatter",
             mode: "lines",
             fill: "tonexty",
-            fillcolor: plot.fillColors[i],
+            fillcolor: color.fill,
         }]
     }).flat();
 

diff --git a/app/components/LocalPlot.tsx b/app/components/LocalPlot.tsx
@@ -1,11 +1,18 @@
 import {ClientOnly} from "remix-utils/client-only"
-import Plot from "./LocalPlot.client";
-import {Covariate, PlotConfig} from "~/RootContext";
+import LinePlot from "./LinePlot.client";
+import {createElement} from "react";
+import {Covariate, PlotConfig} from "~/types";
 
 interface Dat {
     [index: string]: string | number
 }
 
+function PlotByType(type: string, props: Props) {
+    if (type == "line") {
+        return createElement(LinePlot, props)
+    }
+}
+
 interface Props {
     data: Dat[],
     traceVariables: Covariate[]
@@ -17,6 +24,6 @@ interface Props {
 
 export default function LocalPlot(props: Props) {
     return <ClientOnly>
-        {() => (<Plot {...props} />)}
+        {() => PlotByType(props.plot.type, props)}
     </ClientOnly>
 }
diff --git a/app/components/PlotForm.tsx b/app/components/PlotForm.tsx
@@ -1,8 +1,9 @@
 import Form from "react-bootstrap/Form";
 import {Col, Row} from "react-bootstrap";
 import React, {ChangeEventHandler, ReactElement, useContext} from "react";
-import {AppContext, Covariate, PlotConfig, RootContext} from "~/RootContext";
+import {AppContext, RootContext} from "~/RootContext";
 import useSelectedModel from "~/hooks/useSelectedModel";
+import {Covariate, PlotConfig} from "~/types";
 
 interface Props {
     covariate: Covariate;

diff --git a/app/global.d.ts b/app/global.d.ts
@@ -0,0 +1 @@
+declare module 'd3-scale-chromatic';
diff --git a/app/root.tsx b/app/root.tsx
@@ -31,7 +31,7 @@ export function Layout({children}: { children: React.ReactNode }) {
         initialState as ReducerState<AppReducer>
     );
     const [status, selected] = useSelectedModel();
-    if (status == 200) {
+    if (status == 200 && selected) {
         const {selectedModel, selectedRegressionModel} = selected;
 
         const newState = {...appState}

diff --git a/app/types.ts b/app/types.ts
@@ -0,0 +1,39 @@
+type PlotDisplay = "facet" | "trace"
+
+export interface Dict<T> {
+    [index: string]: T
+}
+
+export interface PlotOptions {
+    [index: string]: PlotDisplay
+}
+
+export interface PlotConfig {
+    key: string
+    displayName: string
+    type: string
+}
+
+export interface Model {
+    key: string
+    displayName: string
+    datasets: Dataset[]
+    regressionModels: Covariate[]
+    plots: PlotConfig[]
+    variables: Covariate[]
+}
+
+export interface Dataset {
+    key: string
+    displayName: string
+}
+
+export interface Covariate {
+    displayName: string
+    key: string
+}
+
+export interface AppState {
+    models: Model[]
+    selectedPlotOptions: { [index: string]: PlotOptions }
+}
diff --git a/app/utils/plotUtils.ts b/app/utils/plotUtils.ts
@@ -0,0 +1,62 @@
+import {interpolateBlues, interpolateOranges, interpolatePurples, interpolateGreens, interpolateReds, interpolateGreys} from "d3-scale-chromatic";
+import {Covariate, Dict} from "~/types";
+
+// @ts-expect-error this function doesn't lend itself well to typing
+export function permuteArrays(first, next, ...rest) {
+    if (!first) return [];
+    if (!next) return first.map(a => [a]);
+    if (rest.length) next = permuteArrays(next, ...rest);
+    return first.flatMap(a => next.map(b => [a, b].flat()));
+}
+
+const colorFunctions = [
+    interpolateBlues,
+    interpolateOranges,
+    interpolatePurples,
+    interpolateGreens,
+    interpolateReds,
+    interpolateGreys
+]
+
+export function addOpacity(color: string) {
+    return color.replace(')', ', 0.3)').replace('rgb', 'rgba');
+}
+
+export interface ColorOptions {
+    line: string
+    fill: string
+}
+
+export function getColors(traces: Dict<string[]>,
+                          traceVariables: Covariate[],
+                          index: number,
+                          traceDefinition: string[],
+                          numTraces: number): ColorOptions {
+    if (traceVariables.length == 0) {
+        const color = colorFunctions[0](0.5);
+        return {line: color, fill: addOpacity(color)}
+    }
+    if (traceVariables.length == 1) {
+        const colorIndex = index % colorFunctions.length;
+        const color = colorFunctions[colorIndex](0.2 * (Math.floor(index / colorFunctions.length) + 1));
+        return {line: color, fill: addOpacity(color)}
+    }
+    if (traceVariables.length == 2) {
+        const firstTraceVariable = traceDefinition[0];
+        const levels = traces[traceVariables[0].key];
+        const levelIndex = levels.indexOf(firstTraceVariable);
+
+        const secondTraceVariable = traceDefinition[1];
+        const secondLevels = traces[traceVariables[1].key];
+        const secondLevelIndex = secondLevels.indexOf(secondTraceVariable);
+
+        const color = colorFunctions[levelIndex]((secondLevelIndex + 1) / secondLevels.length);
+        return {line: color, fill: addOpacity(color)}
+    }
+    if (traceVariables.length > 2) {
+        // at this point the graph becomes quite unreadable anyway, so just let all traces
+        // be variations on a color scale
+        const color = colorFunctions[0]((index + 1) / numTraces)
+        return {line: color, fill: addOpacity(color)}
+    }
+}
diff --git a/jest.config.mjs b/jest.config.mjs
@@ -0,0 +1,14 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
+export default {
+  testEnvironment: "node",
+  transform: {
+    "^.+.tsx?$": ["ts-jest",{
+      diagnostics: false,
+    }],
+  },
+  moduleNameMapper: {
+    '^d3-scale-chromatic': '<rootDir>/node_modules/d3-scale-chromatic/dist/d3-scale-chromatic.js',
+    '^d3-interpolate': '<rootDir>/node_modules/d3-interpolate/dist/d3-interpolate.js',
+    '^d3-color': '<rootDir>/node_modules/d3-color/dist/d3-color.js',
+  },
+}