From bc1825ee0037042f2707a10ff069e1f1b628abac Mon Sep 17 00:00:00 2001 From: Conor Brady Date: Mon, 21 Aug 2023 08:58:08 -0700 Subject: [PATCH] Story/actuals in summaries tab (#3068) --- web/src/components/DateRangeSelector.tsx | 6 +-- .../moreCast2/components/ColumnDefBuilder.tsx | 9 ++-- .../moreCast2/components/ForecastDataGrid.tsx | 4 +- .../components/ForecastSummaryDataGrid.tsx | 4 +- .../components/GridComponentRenderer.tsx | 47 +++++++++++++------ .../components/colDefBuilder.test.tsx | 16 ++++++- .../components/gridComponentRenderer.test.tsx | 30 ++++++++++-- web/src/features/moreCast2/util.ts | 8 ++++ 8 files changed, 92 insertions(+), 32 deletions(-) diff --git a/web/src/components/DateRangeSelector.tsx b/web/src/components/DateRangeSelector.tsx index b3030dbcd..2098fd1ed 100644 --- a/web/src/components/DateRangeSelector.tsx +++ b/web/src/components/DateRangeSelector.tsx @@ -1,4 +1,4 @@ -import { Button, Dialog, IconButton, InputAdornment, TextField } from '@mui/material' +import { Button, Dialog, Icon, InputAdornment, TextField } from '@mui/material' import * as materialIcons from '@mui/icons-material' import DateRangePickerWrapper from 'components/dateRangePicker/DateRangePickerWrapper' import { DateRange } from 'components/dateRangePicker/types' @@ -50,9 +50,9 @@ const DateRangeSelector = ({ dateRange, dateDisplayFormat, size, label, setDateR InputProps={{ startAdornment: ( - + - + ) }} diff --git a/web/src/features/moreCast2/components/ColumnDefBuilder.tsx b/web/src/features/moreCast2/components/ColumnDefBuilder.tsx index fae87fed3..de1824a07 100644 --- a/web/src/features/moreCast2/components/ColumnDefBuilder.tsx +++ b/web/src/features/moreCast2/components/ColumnDefBuilder.tsx @@ -14,7 +14,6 @@ export const DEFAULT_FORECAST_COLUMN_WIDTH = 120 // Defines the order in which weather models display in the datagrid. export const ORDERED_COLUMN_HEADERS: WeatherDeterminateType[] = [ - WeatherDeterminate.ACTUAL, WeatherDeterminate.HRDPS, WeatherDeterminate.HRDPS_BIAS, WeatherDeterminate.RDPS, @@ -120,8 +119,8 @@ export class ColumnDefBuilder implements ColDefGenerator, ForecastColDefGenerato valueFormatter: (params: Pick) => { return this.valueFormatterWith(params, precision) }, - valueGetter: (params: Pick) => - this.gridComponentRenderer.predictionItemValueGetter(params, precision), + valueGetter: (params: Pick) => + this.gridComponentRenderer.valueGetter(params, precision, field), valueSetter: (params: Pick) => this.valueSetterWith(params, field, precision) } @@ -131,8 +130,8 @@ export class ColumnDefBuilder implements ColDefGenerator, ForecastColDefGenerato this.gridComponentRenderer.predictionItemValueFormatter(params, precision) public valueGetterWith = (params: Pick, precision: number) => this.gridComponentRenderer.cellValueGetter(params, precision) - public predictionitemValueGetterWith = (params: Pick, precision: number) => - this.gridComponentRenderer.predictionItemValueGetter(params, precision) + public valueGetter = (params: Pick, field: string, precision: number) => + this.gridComponentRenderer.valueGetter(params, precision, field) public valueSetterWith = (params: Pick, field: string, precision: number) => this.gridComponentRenderer.predictionItemValueSetter(params, field, precision) } diff --git a/web/src/features/moreCast2/components/ForecastDataGrid.tsx b/web/src/features/moreCast2/components/ForecastDataGrid.tsx index 036dd1cea..636455d0f 100644 --- a/web/src/features/moreCast2/components/ForecastDataGrid.tsx +++ b/web/src/features/moreCast2/components/ForecastDataGrid.tsx @@ -71,8 +71,8 @@ const ForecastDataGrid = ({ onColumnVisibilityModelChange={newModel => setColumnVisibilityModel(newModel)} columnGroupingModel={columnGroupingModel} experimentalFeatures={{ columnGrouping: true }} - components={{ - LoadingOverlay: LinearProgress + slots={{ + loadingOverlay: LinearProgress }} onColumnHeaderClick={handleColumnHeaderClick} onCellDoubleClick={onCellDoubleClickHandler} diff --git a/web/src/features/moreCast2/components/ForecastSummaryDataGrid.tsx b/web/src/features/moreCast2/components/ForecastSummaryDataGrid.tsx index 7587d501c..3e135b6b4 100644 --- a/web/src/features/moreCast2/components/ForecastSummaryDataGrid.tsx +++ b/web/src/features/moreCast2/components/ForecastSummaryDataGrid.tsx @@ -45,8 +45,8 @@ const ForecastSummaryDataGrid = ({ return ( ) - public renderForecastCellWith = (params: Pick, field: string) => { - // The value of field will be precipForecast, rhForecast, tempForecast, etc. - // We need the prefix to help us grab the correct 'actual' field (eg. tempACTUAL, precipACTUAL, etc.) + public getActualField = (field: string) => { const index = field.indexOf('Forecast') const prefix = field.slice(0, index) const actualField = `${prefix}Actual` + return actualField + } + + public valueGetter = ( + params: Pick, + precision: number, + field: string + ): string => { + const actualField = this.getActualField(field) + const actual = params.row[actualField] + + if (!isNaN(actual)) { + return Number(actual).toFixed(precision) + } + + const value = params?.value?.value + + if (isNaN(value)) { + return 'NaN' + } + return Number(value).toFixed(precision) + } - const disabled = !isNaN(params.row[actualField]) + public renderForecastCellWith = (params: Pick, field: string) => { + // The value of field will be precipForecast, rhForecast, tempForecast, etc. + // We need the prefix to help us grab the correct 'actual' field (eg. tempACTUAL, precipACTUAL, etc.) + const actualField = this.getActualField(field) + + const isActual = !isNaN(params.row[actualField]) return ( ) @@ -81,12 +106,4 @@ export class GridComponentRenderer { public cellValueGetter = (params: Pick, precision: number) => { return isNaN(params?.value) ? 'NaN' : params.value.toFixed(precision) } - - public predictionItemValueGetter = (params: Pick, precision: number) => { - const value = params?.value?.value - if (isNaN(value)) { - return 'NaN' - } - return Number(value).toFixed(precision) - } } diff --git a/web/src/features/moreCast2/components/colDefBuilder.test.tsx b/web/src/features/moreCast2/components/colDefBuilder.test.tsx index 652a43a17..53b329e3e 100644 --- a/web/src/features/moreCast2/components/colDefBuilder.test.tsx +++ b/web/src/features/moreCast2/components/colDefBuilder.test.tsx @@ -155,7 +155,12 @@ describe('ColDefBuilder', () => { }) ).toEqual() expect(forecastColDef.valueFormatter({ value: 1.11 })).toEqual('1.1') - expect(forecastColDef.valueGetter({ value: { choice: ModelChoice.GDPS, value: 1.11 } })).toEqual('1.1') + expect( + forecastColDef.valueGetter({ + row: { testField: { choice: ModelChoice.GDPS, value: 1 } }, + value: { choice: ModelChoice.GDPS, value: 1.11 } + }) + ).toEqual('1.1') expect( forecastColDef.valueSetter({ row: { testField: { choice: ModelChoice.GDPS, value: 1 } }, value: 2 }) ).toEqual({ testField: { choice: ModelChoice.MANUAL, value: 2 } }) @@ -182,7 +187,14 @@ describe('ColDefBuilder', () => { expect(colDefBuilder.valueFormatterWith({ value: 1.11 }, 1)).toEqual('1.1') expect(colDefBuilder.valueGetterWith({ value: 1.11 }, 1)).toEqual('1.1') expect( - colDefBuilder.predictionitemValueGetterWith({ value: { choice: ModelChoice.GDPS, value: 1.11 } }, 1) + colDefBuilder.valueGetter( + { + row: { testField: { choice: ModelChoice.GDPS, value: 1.11 } }, + value: { choice: ModelChoice.GDPS, value: 1.11 } + }, + 'testField', + 1 + ) ).toEqual('1.1') expect( colDefBuilder.valueSetterWith( diff --git a/web/src/features/moreCast2/components/gridComponentRenderer.test.tsx b/web/src/features/moreCast2/components/gridComponentRenderer.test.tsx index 39b23bd1f..1a100d9b9 100644 --- a/web/src/features/moreCast2/components/gridComponentRenderer.test.tsx +++ b/web/src/features/moreCast2/components/gridComponentRenderer.test.tsx @@ -97,10 +97,34 @@ describe('GridComponentRenderer', () => { }) it('should return an existent prediction item value correctly', () => { - const itemValue = gridComponentRenderer.predictionItemValueGetter( - { value: { choice: ModelChoice.GDPS, value: 1.11 } }, - 1 + const itemValue = gridComponentRenderer.valueGetter( + { + row: { testField: { choice: ModelChoice.GDPS, value: 1.11 } }, + value: { choice: ModelChoice.GDPS, value: 1.11 } + }, + 1, + 'testField' ) expect(itemValue).toEqual('1.1') }) + + it('should return an actual field', () => { + const actualField = gridComponentRenderer.getActualField('testForecast') + expect(actualField).toEqual('testActual') + }) + + it('should return an actual over a prediction if it exists', () => { + const itemValue = gridComponentRenderer.valueGetter( + { + row: { + testForecast: { choice: ModelChoice.GDPS, value: 1.11 }, + testActual: 2.22 + }, + value: { choice: ModelChoice.GDPS, value: 1.11 } + }, + 1, + 'testForecast' + ) + expect(itemValue).toEqual('2.2') + }) }) diff --git a/web/src/features/moreCast2/util.ts b/web/src/features/moreCast2/util.ts index 3a93d73f0..77e63882a 100644 --- a/web/src/features/moreCast2/util.ts +++ b/web/src/features/moreCast2/util.ts @@ -71,3 +71,11 @@ export const createWeatherModelLabel = (label: string) => { return label === ModelChoice.NULL ? '' : label } + +export const createLabel = (isActual: boolean, label: string) => { + if (isActual) { + return ModelChoice.ACTUAL + } + + return createWeatherModelLabel(label) +}