mrc-5485 Use multiple graph config in Sensitivity plots

app/static/src/app/components/run/RunStochasticPlot.vue

@@ -4,7 +4,7 @@
         :placeholder-message="placeholderMessage"
         :end-time="endTime"
         :plot-data="allPlotData"
-        :redrawWatches="solution ? [solution] : []"
+        :redrawWatches="solution ? [solution, graphCount] : []"
         :linked-x-axis="linkedXAxis"
         :fit-plot="false"
         :graph-index="graphIndex"
@@ -58,6 +58,9 @@ export default defineComponent({
 
         const palette = computed(() => store.state.model.paletteModel);
 
+        // TODO: put this in the composable in mrc-5572
+        const graphCount = computed(() => store.state.graphs.config.length);
+
         const allPlotData = (start: number, end: number, points: number): WodinPlotData => {
             const result =
                 solution.value &&
@@ -88,6 +91,7 @@ export default defineComponent({
         return {
             placeholderMessage,
             endTime,
+            graphCount,
             allPlotData,
             solution,
             updateXAxis

app/static/src/app/components/sensitivity/SensitivitySummaryPlot.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from "vue";
 import { AxisType, newPlot, Plots } from "plotly.js-basic-dist-min";
 import { useStore } from "vuex";
 import { config, fadePlotStyle, filterUserTypeSeriesSet, margin, odinToPlotly, updatePlotTraceName } from "../../plot";
@@ -23,12 +23,14 @@ import { Dict } from "../../types/utilTypes";
 import WodinPlotDataSummary from "../WodinPlotDataSummary.vue";
 import { ParameterSet } from "../../store/run/state";
 import { verifyValidPlotSettingsTime } from "./support";
+import { GraphConfig } from "../../store/graphs/state";
 
 export default defineComponent({
     name: "SensitivitySummaryPlot",
     components: { WodinPlotDataSummary },
     props: {
-        fadePlot: Boolean
+        fadePlot: Boolean,
+        graphConfig: { type: Object as PropType<GraphConfig>, required: true }
     },
     setup(props) {
         const store = useStore();
@@ -39,7 +41,7 @@ export default defineComponent({
         const batch = computed(() => store.state.sensitivity.result?.batch);
         const plotSettings = computed(() => store.state.sensitivity.plotSettings);
         const palette = computed(() => store.state.model.paletteModel);
-        const selectedVariables = computed(() => store.state.graphs.config[0].selectedVariables);
+        const selectedVariables = computed(() => props.graphConfig.selectedVariables);
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, true));
 
         const xAxisSettings = computed(() => {
@@ -55,7 +57,7 @@ export default defineComponent({
         const yAxisSettings = computed(() => {
             const isNotTimePlot = plotSettings.value.plotType !== SensitivityPlotType.TimeAtExtreme;
 
-            const logScale = store.state.graphs.config[0].settings.logScaleYAxis && isNotTimePlot;
+            const logScale = props.graphConfig.settings.logScaleYAxis && isNotTimePlot;
             const type = logScale ? "log" : ("linear" as AxisType);
             return { type };
         });

app/static/src/app/components/sensitivity/SensitivityTab.vue

@@ -11,8 +11,15 @@
             >
         </div>
         <action-required-message :message="updateMsg"></action-required-message>
-        <sensitivity-traces-plot v-if="tracesPlot" :fade-plot="!!updateMsg"></sensitivity-traces-plot>
-        <sensitivity-summary-plot v-else :fade-plot="!!updateMsg"></sensitivity-summary-plot>
+        <template v-for="(config, index) in graphConfigs" :key="config.id">
+            <sensitivity-traces-plot
+                v-if="tracesPlot"
+                :fade-plot="!!updateMsg"
+                :graph-config="config"
+                :graph-index="index"
+            ></sensitivity-traces-plot>
+            <sensitivity-summary-plot v-else :fade-plot="!!updateMsg" :graph-config="config"></sensitivity-summary-plot>
+        </template>
         <div id="sensitivity-running" v-if="running">
             <loading-spinner class="inline-spinner" size="xs"></loading-spinner>
             <span class="ms-2">{{ sensitivityProgressMsg }}</span>
@@ -65,6 +72,8 @@ export default defineComponent({
             );
         });
 
+        const graphConfigs = computed(() => store.state.graphs.config);
+
         const runSensitivity = () => {
             store.commit(`${namespace}/${SensitivityMutation.SetLoading}`, true);
             // All of the code for sensitivity plot happens synchronously
@@ -91,6 +100,7 @@ export default defineComponent({
         const error = computed(() => store.state.sensitivity.result?.error);
 
         return {
+            graphConfigs,
             canRunSensitivity,
             running,
             sensitivityProgressMsg,

app/static/src/app/components/sensitivity/SensitivityTracesPlot.vue

@@ -6,19 +6,26 @@
         :plot-data="allPlotData"
         :redrawWatches="
             solutions
-                ? [...solutions, allFitData, selectedVariables, parameterSetBatches, parameterSetDisplayNames]
+                ? [
+                      ...solutions,
+                      allFitData,
+                      selectedVariables,
+                      parameterSetBatches,
+                      parameterSetDisplayNames,
+                      graphCount
+                  ]
                 : []
         "
         :fit-plot="false"
-        :graph-index="0"
+        :graph-index="graphIndex"
         :graph-config="graphConfig"
     >
         <slot></slot>
     </wodin-plot>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 import { useStore } from "vuex";
 import { PlotData } from "plotly.js-basic-dist-min";
 import { FitDataGetter } from "../../store/fitData/getters";
@@ -38,20 +45,22 @@ import { RunGetter } from "../../store/run/getters";
 import { Dict } from "../../types/utilTypes";
 import { ParameterSet } from "../../store/run/state";
 import { SensitivityMutation } from "../../store/sensitivity/mutations";
+import { GraphConfig } from "../../store/graphs/state";
 
 export default defineComponent({
     name: "SensitivityTracesPlot",
     props: {
-        fadePlot: Boolean
+        fadePlot: Boolean,
+        graphIndex: { type: Number, required: true },
+        graphConfig: { type: Object as PropType<GraphConfig>, required: true }
     },
     components: {
         WodinPlot
     },
-    setup() {
+    setup(props) {
         const store = useStore();
 
         const solutions = computed(() => store.state.sensitivity.result?.batch?.solutions || []);
-        const graphConfig = computed(() => store.state.graphs.config[0]);
 
         const visibleParameterSetNames = computed(() => store.getters[`run/${RunGetter.visibleParameterSetNames}`]);
         const parameterSets = computed(() => store.state.run.parameterSets as ParameterSet[]);
@@ -82,7 +91,10 @@ export default defineComponent({
 
         const palette = computed(() => store.state.model.paletteModel);
 
-        const selectedVariables = computed(() => store.state.graphs.config[0].selectedVariables);
+        const selectedVariables = computed(() => props.graphConfig.selectedVariables);
+
+        // TODO: put this in the composable in mrc-5572
+        const graphCount = computed(() => store.state.graphs.config.length);
 
         const placeholderMessage = computed(() => runPlaceholderMessage(selectedVariables.value, true));
 
@@ -197,15 +209,15 @@ export default defineComponent({
         };
 
         return {
-            graphConfig,
             placeholderMessage,
             endTime,
             solutions,
             allPlotData,
             allFitData,
             selectedVariables,
             parameterSetBatches,
-            parameterSetDisplayNames
+            parameterSetDisplayNames,
+            graphCount
         };
     }
 });

app/static/tests/e2e/run.etest.ts

@@ -1,15 +1,5 @@
 import { expect, test, Page } from "@playwright/test";
-import { expectGraphVariables } from "./utils";
-
-const addGraphWithVariable = async (page: Page, variableIdx: number) => {
-    await page.click("#add-graph-btn");
-    const count = await page.locator(".graph-config-panel").count();
-    // assume we drag variable from first graph config
-    const firstGraphConfig = await page.locator(":nth-match(.graph-config-panel, 1)");
-    const variable = await firstGraphConfig.locator(`:nth-match(.variable, ${variableIdx})`);
-    await page.locator(`:nth-match(.graph-config-panel .drop-zone, ${count})`).scrollIntoViewIfNeeded();
-    await variable.dragTo(page.locator(`:nth-match(.graph-config-panel .drop-zone, ${count})`));
-};
+import { expectGraphVariables, addGraphWithVariable, expectXAxisTimeLabelFinalGraph } from "./utils";
 
 const expectXTicks = async (page: Page, expectedGraphCount: number, expectedXTicks: number[]) => {
     const graphs = await page.locator(".plot-container");
@@ -48,17 +38,14 @@ test.describe("Run Tab", () => {
         await expectXTicks(page, 3, [15, 20, 25, 30, 35, 40]);
     });
 
-    test("x axis Time label is shown for final plot only", async ({ page }) => {
+    test("x axis Time label is shown for final plot only, in Basic app", async ({ page }) => {
         await page.goto("/apps/day1");
-        await addGraphWithVariable(page, 1);
-        const firstGraph = page.locator(":nth-match(.plotly, 1)");
-        const secondGraph = page.locator(":nth-match(.plotly, 2)");
-
-        await expect(await firstGraph.locator(".xtitle")).not.toBeVisible();
-        await expect(await secondGraph.locator(".xtitle").textContent()).toBe("Time");
+        await expectXAxisTimeLabelFinalGraph(page);
+    });
 
-        // Delete second config - the Time label should be shown on the first graph
-        await page.locator(":nth-match(button.delete-graph, 2)").click();
-        await expect(await firstGraph.locator(".xtitle").textContent()).toBe("Time");
+    test("x axis Time label is shown for final plot only, in Stochastic app", async ({ page }) => {
+        await page.goto("/apps/day3");
+        await page.click(":nth-match(#right-tabs .nav-link, 2)");
+        await expectXAxisTimeLabelFinalGraph(page);
     });
 });

app/static/tests/e2e/sensitivity.etest.ts

@@ -1,6 +1,6 @@
 import { expect, test, Page } from "@playwright/test";
 import PlaywrightConfig from "../../playwright.config";
-import { expectSummaryValues } from "./utils";
+import { addGraphWithVariable, expectSummaryValues, expectXAxisTimeLabelFinalGraph } from "./utils";
 
 test.describe("Sensitivity tests", () => {
     const { timeout } = PlaywrightConfig;
@@ -272,4 +272,34 @@ test.describe("Sensitivity tests", () => {
         await expectSummaryValues(page, 8, "I (beta=3.000)", 1000, "#cccc00");
         await expectSummaryValues(page, 9, "R (beta=3.000)", 1000, "#cc0044");
     });
+
+    const expectMultipleSensitivityGraphs = async (page: Page, summary = false) => {
+        const containerClass = summary ? "summary-plot-container" : "wodin-plot-container";
+        const firstPlot = await page.locator(`:nth-match(.${containerClass}, 1)`);
+        const secondPlot = await page.locator(`:nth-match(.${containerClass}, 2)`);
+        expect(await firstPlot.locator(":nth-match(.wodin-plot-data-summary-series, 1)").getAttribute("name")).toBe(
+            summary ? "I" : "I (beta=3.600)"
+        );
+        expect(await secondPlot.locator(":nth-match(.wodin-plot-data-summary-series, 1)").getAttribute("name")).toBe(
+            summary ? "S" : "S (beta=3.600)"
+        );
+    };
+
+    test("can see multiple Trace over time graphs", async ({ page }) => {
+        await page.click("#run-sens-btn");
+        await addGraphWithVariable(page, 1);
+        await expectMultipleSensitivityGraphs(page);
+    });
+
+    test("can see Time label on final Trace over time graph only", async ({ page }) => {
+        await page.click("#run-sens-btn");
+        await expectXAxisTimeLabelFinalGraph(page);
+    });
+
+    test("can see multiple summary graphs", async ({ page }) => {
+        await page.click("#run-sens-btn");
+        await page.locator("#sensitivity-plot-type select").selectOption("ValueAtTime");
+        await addGraphWithVariable(page, 1);
+        await expectMultipleSensitivityGraphs(page, true);
+    });
 });

app/static/tests/e2e/utils.ts

@@ -205,3 +205,26 @@ export const expectGraphVariables = async (page: Page, graphIndex: number, expec
         );
     }
 };
+
+export const addGraphWithVariable = async (page: Page, variableIdx: number) => {
+    await page.click("#add-graph-btn");
+    const count = await page.locator(".graph-config-panel").count();
+    // assume we drag variable from first graph config
+    const firstGraphConfig = await page.locator(":nth-match(.graph-config-panel, 1)");
+    const variable = await firstGraphConfig.locator(`:nth-match(.variable, ${variableIdx})`);
+    await page.locator(`:nth-match(.graph-config-panel .drop-zone, ${count})`).scrollIntoViewIfNeeded();
+    await variable.dragTo(page.locator(`:nth-match(.graph-config-panel .drop-zone, ${count})`));
+};
+
+export const expectXAxisTimeLabelFinalGraph = async (page: Page) => {
+    await addGraphWithVariable(page, 1);
+    const firstGraph = page.locator(":nth-match(.plotly, 1)");
+    const secondGraph = page.locator(":nth-match(.plotly, 2)");
+
+    await expect(await firstGraph.locator(".xtitle")).not.toBeVisible();
+    await expect(await secondGraph.locator(".xtitle").textContent()).toBe("Time");
+
+    // Delete second config - the Time label should be shown on the first graph
+    await page.locator(":nth-match(button.delete-graph, 2)").click();
+    await expect(await firstGraph.locator(".xtitle").textContent()).toBe("Time");
+};

app/static/tests/unit/components/run/runStochasticPlot.test.ts

@@ -87,7 +87,7 @@ describe("RunPlot for stochastic", () => {
         expect(wodinPlot.props("fadePlot")).toBe(false);
         expect(wodinPlot.props("placeholderMessage")).toBe("Model has not been run.");
         expect(wodinPlot.props("endTime")).toBe(99);
-        expect(wodinPlot.props("redrawWatches")).toStrictEqual([mockSolution]);
+        expect(wodinPlot.props("redrawWatches")).toStrictEqual([mockSolution, 1]);
         expect(wodinPlot.props("recalculateOnRelayout")).toBe(true);
         expect(wodinPlot.props("linkedXAxis")).toStrictEqual(linkedXAxis);
         expect(wodinPlot.props("graphIndex")).toBe(0);

app/static/tests/unit/components/sensitivity/sensitivitySummaryPlot.test.ts

@@ -16,6 +16,7 @@ import { SensitivityMutation } from "../../../../src/app/store/sensitivity/mutat
 import SensitivitySummaryPlot from "../../../../src/app/components/sensitivity/SensitivitySummaryPlot.vue";
 import { RunGetter } from "../../../../src/app/store/run/getters";
 import WodinPlotDataSummary from "../../../../src/app/components/WodinPlotDataSummary.vue";
+import { GraphConfig } from "../../../../src/app/store/graphs/state";
 
 jest.mock("plotly.js-basic-dist-min", () => ({
     newPlot: jest.fn(),
@@ -198,26 +199,23 @@ describe("SensitivitySummaryPlot", () => {
                         [SensitivityMutation.SetPlotTime]: mockSetPlotTime,
                         [SensitivityMutation.SetLoading]: mockSetLoading
                     }
-                },
-                graphs: {
-                    namespaced: true,
-                    state: {
-                        config: [
-                            {
-                                selectedVariables,
-                                settings: { logScaleYAxis }
-                            }
-                        ]
-                    }
                 }
             }
         });
 
+        const graphConfig = {
+            selectedVariables,
+            settings: { logScaleYAxis }
+        } as any;
+
         return shallowMount(SensitivitySummaryPlot, {
             global: {
                 plugins: [store]
             },
-            props: { fadePlot }
+            props: {
+                fadePlot,
+                graphConfig
+            }
         });
     };
 
@@ -534,7 +532,13 @@ describe("SensitivitySummaryPlot", () => {
 
     it("redraws plot if graph setting changes", async () => {
         const wrapper = getWrapper();
-        (store!.state as any).graphs.config[0].settings.logScaleYAxis = true;
+        const graphConfig = wrapper.props("graphConfig");
+        await wrapper.setProps({
+            graphConfig: {
+                ...graphConfig,
+                settings: { logScaleYAxis: true } as any
+            }
+        });
         await nextTick();
         expect(mockPlotlyNewPlot).toHaveBeenCalledTimes(2);
     });