Plotly

app/RootContext.ts

@@ -1,18 +1,104 @@
 import {createContext} from "react";
 
-export interface State {
-    history: string
-    titre_type: string
+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[]
+    selectedModel: Model
+    selectedDataset: Dataset
+    selectedRegressionModel: Covariate
+    selectedPlotOptions: { [index: string]: PlotOptions }
 }
 
-export interface ContextValue {
-    state: State
+export interface AppContext {
+    state: AppState
     dispatch: () => void
 }
 
-export const initialState = {history: "Facet", titre_type: "Trace"}
-export const RootContext = createContext<ContextValue>({state: initialState, dispatch: () => null})
+const biomarkerModel: Model = {
+    displayName: "Biomarker Kinetics",
+    key: "biomarker",
+    datasets: [{
+        key: "legacy",
+        displayName: "SARS-CoV2-legacy"
+    }],
+    regressionModels: [
+        {key: "infection_history", displayName: "Infection history"},
+        {key: "last_exp_type", displayName: "Last exposure type"}
+    ],
+    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)`
+
+        ]
+    }],
+    variables: [{key: "titre_type", displayName: "Titre type"}]
+}
+
+export const initialState: AppState = {
+    models: [biomarkerModel],
+    selectedModel: biomarkerModel,
+    selectedDataset: biomarkerModel.datasets[0],
+    selectedRegressionModel: biomarkerModel.regressionModels[0],
+    selectedPlotOptions: Object.fromEntries(biomarkerModel.plots.map(p => [p.key,
+        Object.fromEntries(biomarkerModel.variables.concat([biomarkerModel.regressionModels[0]]).map(
+            v => [v.key, "trace"]
+        ))
+    ]))
+}
+
+export const RootContext = createContext<AppContext>({
+    state: initialState,
+    dispatch: () => null
+})
 
-export function rootReducer(oldState, newState): State {
+export function rootReducer(oldState, newState): AppState {
     return {...newState}
 }

app/components/ConfiguredPlot.tsx

@@ -0,0 +1,93 @@
+import {useContext} from "react";
+import {AppContext, Covariate, PlotConfig, RootContext} from "~/RootContext";
+import {Col, Row} from "react-bootstrap";
+import LocalPlot from "~/components/LocalPlot";
+
+interface Dat {
+    [index: string]: string | number
+}
+
+interface Props {
+    data: Dat[],
+    facets: { [k: string]: string[] }
+    traces: { [k: string]: string[] }
+    covariate: Covariate
+    value: string,
+    facetVariables: Covariate[],
+    traceVariables: Covariate[],
+    plot: PlotConfig
+}
+
+function Facet({
+                   data,
+                   facets,
+                   traces,
+                   covariate,
+                   value,
+                   facetVariables,
+                   traceVariables,
+                   plot
+               }: Props) {
+    const filteredData = data.filter(d => d[covariate.key] == value);
+    const otherFacetVariables = facetVariables.filter(v => v.key != covariate.key);
+    const nextFacetVariable = otherFacetVariables.pop();
+    if (!nextFacetVariable) {
+        return <Col><LocalPlot data={filteredData}
+                               traceVariables={traceVariables}
+                               traces={traces}
+                               plot={plot}
+                               value={value}></LocalPlot></Col>
+    } else {
+
+        const facetValues = facets[nextFacetVariable.key];
+        return facetValues.map(v => [<h5 className={"text-center"}
+                                         key={Math.random().toString(36).substring(2, 7)}>{value}</h5>, <Facet
+            key={Math.random().toString(36).substring(2, 7)}
+            plot={plot}
+            data={filteredData}
+            facets={facets}
+            traces={traces}
+            covariate={nextFacetVariable}
+            value={v}
+            facetVariables={otherFacetVariables}
+            traceVariables={traceVariables}></Facet>])
+    }
+}
+
+interface ConfigurePlotProps {
+    plot: PlotConfig
+    data: Dat[]
+}
+export default function ConfiguredPlot({plot, data}: ConfigurePlotProps) {
+    const {state} = useContext<AppContext>(RootContext);
+    const variables = [state.selectedRegressionModel].concat(state.selectedModel.variables);
+    const settings = state.selectedPlotOptions[plot.key];
+
+    const facetVariables = variables.filter(v => settings[v.key] == "facet");
+    const traceVariables = variables.filter(v => settings[v.key] == "trace");
+
+    const facets = Object.fromEntries(facetVariables.map(v => [v.key, [...new Set(data.map(entry => entry[v.key]))]]));
+    const traces = Object.fromEntries(traceVariables.map(v => [v.key, [...new Set(data.map(entry => entry[v.key]))]]));
+
+    if (facetVariables.length > 0) {
+        const firstFacet = facetVariables[0];
+        const facetValues = facets[firstFacet.key];
+
+        return <Row>
+            {facetValues.map(v => <Facet key={v}
+                                         plot={plot}
+                                         data={data}
+                                         facets={facets}
+                                         traces={traces}
+                                         covariate={firstFacet}
+                                         value={v}
+                                         facetVariables={facetVariables}
+                                         traceVariables={traceVariables}></Facet>)}
+        </Row>
+    } else {
+        return <Row><Col><LocalPlot data={data}
+                                    traceVariables={traceVariables}
+                                    traces={traces} value={""}
+                                    plot={plot}></LocalPlot></Col></Row>
+    }
+}