Show multiple sensitivities in TimeSeriesSensitivities module

equinor · Sep 12, 2023 · 5a9e3c6 · 5a9e3c6
1 parent 6147245
commit 5a9e3c6
Show file tree

Hide file tree

Showing 9 changed files with 324 additions and 201 deletions.
diff --git a/frontend/src/modules/Sensitivity/sensitivityChart.tsx b/frontend/src/modules/Sensitivity/sensitivityChart.tsx
@@ -6,8 +6,13 @@ import { Layout, PlotData, PlotMouseEvent } from "plotly.js";
 import { SensitivityResponse, SensitivityResponseDataset } from "./sensitivityResponseCalculator";
 import { SelectedSensitivity } from "./state";
 
+export type SensitivityColors = {
+    sensitivityName: string;
+    color: string;
+};
 export type sensitivityChartProps = {
     sensitivityResponseDataset: SensitivityResponseDataset;
+    sensitivityColors: SensitivityColors[];
     showLabels: boolean;
     hideZeroY: boolean;
     showRealizationPoints: boolean;
@@ -102,16 +107,8 @@ const lowTrace = (
     sensitivityResponses: SensitivityResponse[],
     showLabels: boolean,
     selectedBar: SelectedBar | null,
-    barColor = "e53935"
+    colors: string[]
 ): Partial<SensitivityChartTraceData> => {
-    // const label = showLabels
-    //     ? sensitivityResponses.map(
-    //           (s) =>
-    //               `<b>${numFormat(s.lowCaseReferenceDifference)}</b> ${numFormat(s.lowCaseAverage)}<br> Case: <b>${
-    //                   s.lowCaseName
-    //               }<b>`
-    //       )
-    //     : [];
     const label = showLabels ? sensitivityResponses.map((s) => computeLowLabel(s)) : [];
 
     return {
@@ -128,7 +125,7 @@ const lowTrace = (
         name: TraceGroup.LOW,
         orientation: "h",
         marker: {
-            color: barColor,
+            color: colors,
             line: {
                 width: 3,
                 color: sensitivityResponses.map((s, idx) =>
@@ -146,7 +143,7 @@ const highTrace = (
     sensitivityResponses: SensitivityResponse[],
     showLabels: boolean,
     selectedBar: SelectedBar | null,
-    barColor = "#00897b"
+    colors: string[]
 ): Partial<SensitivityChartTraceData> => {
     // const label = showLabels
     //     ? sensitivityResponses.map(
@@ -172,7 +169,7 @@ const highTrace = (
         name: TraceGroup.HIGH,
         orientation: "h",
         marker: {
-            color: barColor,
+            color: colors,
             line: {
                 width: 3,
                 color: sensitivityResponses.map((s, idx) =>
@@ -201,9 +198,11 @@ const sensitivityChart: React.FC<sensitivityChartProps> = (props) => {
                 (s) => s.lowCaseReferenceDifference !== 0 || s.highCaseReferenceDifference !== 0
             );
         }
-
-        traces.push(lowTrace(filteredSensitivityResponses, showLabels, selectedBar));
-        traces.push(highTrace(filteredSensitivityResponses, showLabels, selectedBar));
+        const colors: string[] = filteredSensitivityResponses.map(
+            (s) => props.sensitivityColors.find((sc) => sc.sensitivityName === s.sensitivityName)?.color ?? "black"
+        );
+        traces.push(lowTrace(filteredSensitivityResponses, showLabels, selectedBar, colors));
+        traces.push(highTrace(filteredSensitivityResponses, showLabels, selectedBar, colors));
         // if (showRealizationPoints) {
         //     TODO: Add realization points
 

diff --git a/frontend/src/modules/Sensitivity/view.tsx b/frontend/src/modules/Sensitivity/view.tsx
@@ -7,12 +7,21 @@ import { useEnsembleSet } from "@framework/WorkbenchSession";
 import { AdjustmentsHorizontalIcon, ChartBarIcon, TableCellsIcon } from "@heroicons/react/20/solid";
 import { useElementSize } from "@lib/hooks/useElementSize";
 
-import SensitivityChart from "./sensitivityChart";
-import { EnsembleScalarResponse, SensitivityResponseCalculator } from "./sensitivityResponseCalculator";
+import SensitivityChart, { SensitivityColors } from "./sensitivityChart";
+import {
+    EnsembleScalarResponse,
+    SensitivityResponseCalculator,
+    SensitivityResponseDataset,
+} from "./sensitivityResponseCalculator";
 import SensitivityTable from "./sensitivityTable";
 import { PlotType, State } from "./state";
 
-export const view = ({ moduleContext, workbenchSession, workbenchServices }: ModuleFCProps<State>) => {
+export const view = ({
+    moduleContext,
+    workbenchSession,
+    workbenchSettings,
+    workbenchServices,
+}: ModuleFCProps<State>) => {
     // Leave this in until we get a feeling for React18/Plotly
     const renderCount = React.useRef(0);
     React.useEffect(function incrementRenderCount() {
@@ -78,24 +87,26 @@ export const view = ({ moduleContext, workbenchSession, workbenchServices }: Mod
         return unsubscribeFunc;
     }, [responseChannel, ensembleSet]);
 
-    // Memoize the computation of sensitivity responses. Should we use useMemo?
     const sensitivities = channelEnsemble?.getSensitivities();
-    const computedSensitivityResponseDataset = React.useMemo(() => {
-        if (sensitivities && channelResponseData) {
-            // How to handle errors?
-            try {
-                const sensitivityResponseCalculator = new SensitivityResponseCalculator(
-                    sensitivities,
-                    channelResponseData
-                );
-                return sensitivityResponseCalculator.computeSensitivitiesForResponse();
-            } catch (e) {
-                console.warn(e);
-                return null;
-            }
+    const colorSet = workbenchSettings.useColorSet();
+    const sensitivityColors: SensitivityColors[] =
+        sensitivities
+            ?.getSensitivityNames()
+            .map((sensitivityName, index) =>
+                index === 0
+                    ? { sensitivityName, color: colorSet.getFirstColor() }
+                    : { sensitivityName, color: colorSet.getNextColor() }
+            ) ?? [];
+    let computedSensitivityResponseDataset: SensitivityResponseDataset | null = null;
+    if (sensitivities && channelResponseData) {
+        // How to handle errors?
+        try {
+            const sensitivityResponseCalculator = new SensitivityResponseCalculator(sensitivities, channelResponseData);
+            computedSensitivityResponseDataset = sensitivityResponseCalculator.computeSensitivitiesForResponse();
+        } catch (e) {
+            console.warn(e);
         }
-        return null;
-    }, [sensitivities, channelResponseData]);
+    }
 
     let errMessage = "";
     if (!computedSensitivityResponseDataset) {
@@ -176,6 +187,7 @@ export const view = ({ moduleContext, workbenchSession, workbenchServices }: Mod
                 {computedSensitivityResponseDataset && plotType === PlotType.TORNADO && (
                     <SensitivityChart
                         sensitivityResponseDataset={computedSensitivityResponseDataset}
+                        sensitivityColors={sensitivityColors}
                         width={wrapperDivSize.width}
                         height={wrapperDivSize.height}
                         showLabels={showLabels}

diff --git a/frontend/src/modules/SimulationTimeSeriesSensitivity/loadModule.tsx b/frontend/src/modules/SimulationTimeSeriesSensitivity/loadModule.tsx
@@ -8,10 +8,11 @@ import { view } from "./view";
 const defaultState: State = {
     vectorSpec: null,
     resamplingFrequency: Frequency_api.MONTHLY,
-    selectedSensitivity: null,
+    selectedSensitivities: null,
     showStatistics: true,
     showRealizations: false,
     realizationsToInclude: null,
+    showHistorical: true,
 };
 
 const module = ModuleRegistry.initModule<State>("SimulationTimeSeriesSensitivity", defaultState);

diff --git a/frontend/src/modules/SimulationTimeSeriesSensitivity/queryHooks.tsx b/frontend/src/modules/SimulationTimeSeriesSensitivity/queryHooks.tsx
@@ -1,12 +1,17 @@
-import { Frequency_api, VectorDescription_api, VectorStatisticSensitivityData_api } from "@api";
+import {
+    Frequency_api,
+    VectorDescription_api,
+    VectorHistoricalData_api,
+    VectorStatisticSensitivityData_api,
+} from "@api";
 import { VectorRealizationData_api } from "@api";
 import { apiService } from "@framework/ApiService";
 import { UseQueryResult, useQuery } from "@tanstack/react-query";
 
 const STALE_TIME = 60 * 1000;
 const CACHE_TIME = 60 * 1000;
 
-export function useVectorsQuery(
+export function useVectorListQuery(
     caseUuid: string | undefined,
     ensembleName: string | undefined
 ): UseQueryResult<Array<VectorDescription_api>> {
@@ -72,3 +77,25 @@ export function useStatisticalVectorSensitivityDataQuery(
         enabled: allowEnable && caseUuid && ensembleName && vectorName && resampleFrequency ? true : false,
     });
 }
+
+export function useHistoricalVectorDataQuery(
+    caseUuid: string | undefined,
+    ensembleName: string | undefined,
+    vectorName: string | undefined,
+    resampleFrequency: Frequency_api | null,
+    allowEnable: boolean
+): UseQueryResult<VectorHistoricalData_api> {
+    return useQuery({
+        queryKey: ["getHistoricalVectorData", caseUuid, ensembleName, vectorName, resampleFrequency],
+        queryFn: () =>
+            apiService.timeseries.getHistoricalVectorData(
+                caseUuid ?? "",
+                ensembleName ?? "",
+                vectorName ?? "",
+                resampleFrequency ?? Frequency_api.MONTHLY
+            ),
+        staleTime: STALE_TIME,
+        cacheTime: CACHE_TIME,
+        enabled: allowEnable && caseUuid && ensembleName && vectorName && resampleFrequency ? true : false,
+    });
+}