Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | 103x 103x 103x 103x 45x 45x 45x 45x 2x 99x 45x 81x 20x 45x 63x 105x 18x 45x 18x 45x 65x 20x 18x 45x 45x 45x 125x 20x 18x 45x 45x 45x 18x 63x 105x 85x 85x | import { CircleHelp } from "lucide-react";
import type { FocusEvent } from "react";
import SelectInput from "@/ahuora-design-system/inputs/SelectInput";
import {
AccessControlledButton as Button,
AccessControlledCheckbox as Checkbox,
} from "@/ahuora-design-system/ui/accessControlled";
import { Input } from "@/ahuora-design-system/ui/input";
import { Label } from "@/ahuora-design-system/ui/label";
import { ToolTipCover } from "@/ahuora-design-system/ui/tooltip";
import type { PatchedScenario, ScenarioRead } from "@/api/apiStore.gen";
import { MssTimeSeriesUnitEnum } from "@/api/apiStore.gen";
const MSS_TIME_SERIES_INTERVAL_MIN = 1;
const MSS_TIME_SERIES_INTERVAL_MAX = 1000;
const MSS_TIME_SERIES_INTERVAL_DEFAULT = 1;
const MSS_TIME_SERIES_UNIT_OPTIONS = [
{ value: MssTimeSeriesUnitEnum.Seconds, label: "Seconds" },
{ value: MssTimeSeriesUnitEnum.Minutes, label: "Minutes" },
{ value: MssTimeSeriesUnitEnum.Hours, label: "Hours" },
{ value: MssTimeSeriesUnitEnum.Days, label: "Days" },
{ value: MssTimeSeriesUnitEnum.Months, label: "Months" },
];
type MssTimeSeriesPatch = Pick<
PatchedScenario,
| "mss_time_series_enabled"
| "mss_time_series_interval"
| "mss_time_series_unit"
>;
function parseIntervalInput(value: string): number | null {
const trimmedValue = value.trim();
if (!/^\d+$/.test(trimmedValue)) {
return null;
}
const interval = Number(trimmedValue);
if (
interval < MSS_TIME_SERIES_INTERVAL_MIN ||
interval > MSS_TIME_SERIES_INTERVAL_MAX
) {
return null;
}
return interval;
}
export function MssTimeSeriesSettings({
canMutate,
onPatch,
scenario,
}: {
canMutate: boolean;
onPatch: (patch: MssTimeSeriesPatch) => void;
scenario: ScenarioRead;
}) {
const enabled = Boolean(scenario.mss_time_series_enabled);
const interval =
scenario.mss_time_series_interval ?? MSS_TIME_SERIES_INTERVAL_DEFAULT;
function handleToggle(nextEnabled: boolean) {
onPatch({
mss_time_series_enabled: nextEnabled,
...(nextEnabled && !scenario.mss_time_series_unit
? { mss_time_series_unit: MssTimeSeriesUnitEnum.Seconds }
: {}),
...(nextEnabled && !scenario.mss_time_series_interval
? { mss_time_series_interval: MSS_TIME_SERIES_INTERVAL_DEFAULT }
: {}),
});
}
function handleIntervalUpdate(event: FocusEvent<HTMLInputElement>) {
const nextInterval = parseIntervalInput(event.currentTarget.value);
if (nextInterval === null) {
event.currentTarget.value = String(interval);
return;
}
if (nextInterval !== interval) {
onPatch({ mss_time_series_interval: nextInterval });
}
}
return (
<div className="border p-2 rounded-lg my-2 bg-muted">
<div className="flex flex-row gap-2 py-2 items-center">
<Checkbox
id="mss-time-series"
checked={enabled}
disabled={!canMutate}
onCheckedChange={(checked) => handleToggle(checked === true)}
/>
<Label htmlFor="mss-time-series" className="text-sm">
Time series
</Label>
<ToolTipCover
content="Interpret each input row as the next point in a time series."
asChild
side="right"
>
<Button
type="button"
variant="ghost"
size="xs"
className="text-muted-foreground"
aria-label="Time series help"
>
<CircleHelp size={14} />
</Button>
</ToolTipCover>
</div>
<div className="grid grid-cols-2 gap-2">
<div>
<Label className="text-sm" htmlFor="mss-time-series-interval">
Interval
</Label>
<Input
key={`${scenario.id}-${interval}`}
id="mss-time-series-interval"
className="mt-2"
defaultValue={interval}
disabled={!canMutate || !enabled}
inputMode="numeric"
min={MSS_TIME_SERIES_INTERVAL_MIN}
max={MSS_TIME_SERIES_INTERVAL_MAX}
onBlur={handleIntervalUpdate}
step={1}
type="number"
/>
</div>
<div>
<Label className="text-sm" htmlFor="mss-time-series-unit">
Time unit
</Label>
<div className="mt-2">
<SelectInput
id="mss-time-series-unit"
ariaLabel="Time unit"
value={
scenario.mss_time_series_unit ?? MssTimeSeriesUnitEnum.Seconds
}
data={MSS_TIME_SERIES_UNIT_OPTIONS}
disabled={!canMutate || !enabled}
handleChange={(unit: MssTimeSeriesUnitEnum) =>
onPatch({ mss_time_series_unit: unit })
}
/>
</div>
</div>
</div>
</div>
);
}
|