diff --git a/frontend-v2/src/App.tsx b/frontend-v2/src/App.tsx index 82cf6a4a..e65d5f01 100644 --- a/frontend-v2/src/App.tsx +++ b/frontend-v2/src/App.tsx @@ -20,7 +20,7 @@ import { SimulateResponse } from "./app/backendApi"; export type TimeInterval = { start: number; end: number; - unit: string; + unit: { [key: string]: string }; }; type Threshold = { lower: number; upper: number }; export type Thresholds = { [key: string]: Threshold }; diff --git a/frontend-v2/src/features/model/secondary/TimeIntervalsTable.tsx b/frontend-v2/src/features/model/secondary/TimeIntervalsTable.tsx index 268c8fa4..2d062e4f 100644 --- a/frontend-v2/src/features/model/secondary/TimeIntervalsTable.tsx +++ b/frontend-v2/src/features/model/secondary/TimeIntervalsTable.tsx @@ -30,7 +30,7 @@ type TimeUnitSelectProps = { onChange: (interval: TimeInterval) => void; }; -function TimeUnitSelect({ interval, onChange }: TimeUnitSelectProps) { +function useTimeUnits() { const projectId = useSelector( (state: RootState) => state.main.selectedProject, ); @@ -43,19 +43,31 @@ function TimeUnitSelect({ interval, onChange }: TimeUnitSelectProps) { { skip: !project || !project.compound }, ); const hourUnit = units?.find((unit) => unit.symbol === "h"); - const timeUnits = hourUnit?.compatible_units.map((unit) => unit.symbol); + return hourUnit?.compatible_units || []; +} + +function TimeUnitSelect({ interval, onChange }: TimeUnitSelectProps) { + const timeUnits = useTimeUnits(); const timeUnitOptions = - timeUnits?.map((unit) => ({ value: unit, label: unit })) || []; + timeUnits?.map((unit) => ({ value: unit.symbol, label: unit.symbol })) || + []; + const defaultTimeUnit = "h"; function onChangeUnit(event: SelectChangeEvent) { - onChange({ ...interval, unit: event.target.value }); + const unit = timeUnits?.find((unit) => unit.symbol === event.target.value); + if (unit) { + onChange({ ...interval, unit }); + } } return ( - {timeUnitOptions.map((option) => ( - + {option.label} ))} @@ -104,19 +116,23 @@ function IntervalRow({ interval, onDelete, onUpdate }: IntervalRowProps) { const TimeIntervalsTable: FC = (props) => { const { intervals, setIntervals } = useContext(SimulationContext); + const timeUnits = useTimeUnits(); + const hourUnit = timeUnits?.find((unit) => unit.symbol === "h"); function addInterval() { const lastInterval = intervals[intervals.length - 1]; - let newInterval: TimeInterval = { start: 0, end: 0, unit: "h" }; - if (lastInterval) { - const duration = lastInterval.end - lastInterval.start; - newInterval = { - start: lastInterval.end, - end: lastInterval.end + duration, - unit: lastInterval.unit, - }; + if (hourUnit) { + let newInterval: TimeInterval = { start: 0, end: 0, unit: hourUnit }; + if (lastInterval) { + const duration = lastInterval.end - lastInterval.start; + newInterval = { + start: lastInterval.end, + end: lastInterval.end + duration, + unit: lastInterval.unit, + }; + } + setIntervals([...intervals, newInterval]); } - setIntervals([...intervals, newInterval]); } function removeInterval(index: number) { setIntervals(intervals.filter((_, i) => i !== index)); diff --git a/frontend-v2/src/features/results/useTableRows.ts b/frontend-v2/src/features/results/useTableRows.ts index 3434ef53..e1e90c9e 100644 --- a/frontend-v2/src/features/results/useTableRows.ts +++ b/frontend-v2/src/features/results/useTableRows.ts @@ -30,7 +30,7 @@ export function useTableRows({ return rows.map((row, index) => { const header = "start" in row && "end" in row && "unit" in row - ? `${row.start} – ${row.end} [${row.unit}]` + ? `${row.start} – ${row.end} [${row.unit.symbol}]` : "name" in row ? row.name : "";