@seedtactics/insight-client 16.5.2 → 16.7.0

package/dist/components/analysis/PartCycleCards.js

@@ -42,16 +42,17 @@ import { ImportExport } from "@mui/icons-material";
 import { selectedAnalysisPeriod } from "../../network/load-specific-month.js";
 import { CycleChart } from "./CycleChart.js";
 import * as matDetails from "../../cell-status/material-details.js";
-import { filterStationCycles, FilterAnyMachineKey, copyCyclesToClipboard, plannedOperationMinutes, loadOccupancyCycles, FilterAnyLoadKey, emptyStationCycles, } from "../../data/results.cycles.js";
+import { filterStationCycles, FilterAnyMachineKey, copyCyclesToClipboard, plannedOperationMinutes, loadOccupancyCycles, FilterAnyLoadKey, emptyStationCycles, normalizeCarrierKindFilter, } from "../../data/results.cycles.js";
 import { PartIdenticon } from "../station-monitor/Material.js";
 import StationDataTable from "./StationDataTable.js";
 import { useSetTitle, isDemoAtom } from "../routes.js";
 import { last30MaterialSummary, specificMonthMaterialSummary } from "../../cell-status/material-summary.js";
 import { last30EstimatedCycleTimes, PartAndStationOperation, specificMonthEstimatedCycleTimes, } from "../../cell-status/estimated-cycle-times.js";
-import { last30StationCycles, specificMonthStationCycles } from "../../cell-status/station-cycles.js";
+import { basketDisplayName, last30HasBasketCycles, last30StationCycles, specificMonthHasBasketCycles, specificMonthStationCycles, } from "../../cell-status/station-cycles.js";
 import { LazySeq, OrderedMap } from "@seedtactics/immutable-collections";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import { atomWithDefault } from "jotai/utils";
+import { fmsInformation } from "../../network/server-settings.js";
 const dateTimeFormat = new Intl.DateTimeFormat(undefined, {
     weekday: "short",
     month: "short",
@@ -59,6 +60,12 @@ const dateTimeFormat = new Intl.DateTimeFormat(undefined, {
     hour: "numeric",
     minute: "2-digit",
 });
+function isPartCycleChartData(point) {
+    return "material" in point && Array.isArray(point.material);
+}
+function hasLoadCycleOperations(point) {
+    return "operations" in point && (point.operations === undefined || Array.isArray(point.operations));
+}
 function DisplayDateRange({ range }) {
     const period = useAtomValue(selectedAnalysisPeriod);
     if (!range)
@@ -104,9 +111,11 @@ export function PartMachineCycleChart() {
     useSetTitle("Machine Cycles");
     const setMatToShow = useSetAtom(matDetails.materialDialogOpen);
     const extraStationCycleTooltip = useCallback(function extraStationCycleTooltip(point) {
-        const partC = point;
+        if (!isPartCycleChartData(point)) {
+            return [];
+        }
         const ret = [];
-        for (const mat of partC.material) {
+        for (const mat of point.material) {
             ret.push({
                 title: mat.serial ? mat.serial : "Material",
                 value: "Open Card",
@@ -174,12 +183,18 @@ export function PartMachineCycleChart() {
             return undefined;
         }
     }, [points, curOperation]);
-    return (_jsxs(Box, { paddingLeft: "24px", paddingRight: "24px", paddingTop: "10px", children: [_jsxs(Box, { component: "nav", sx: {
+    return (_jsxs(Box, { sx: {
+            paddingLeft: "24px",
+            paddingRight: "24px",
+            paddingTop: "10px",
+        }, children: [_jsxs(Box, { component: "nav", sx: {
                     display: "flex",
                     minHeight: "2.5em",
                     alignItems: "center",
                     maxWidth: "calc(100vw - 24px - 24px)",
-                }, children: [_jsxs(Typography, { variant: "subtitle1", children: ["Machine Cycles for ", _jsx(DisplayDateRange, { range: zoomDateRange ?? defaultDateRange })] }), _jsx(Box, { flexGrow: 1 }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, value: showGraph ? "graph" : "table", onChange: (e) => setShowGraph(e.target.value === "graph"), children: [_jsx(MenuItem, { value: "graph", children: "Graph" }, "graph"), _jsx(MenuItem, { value: "table", children: "Table" }, "table")] }) }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, displayEmpty: true, value: selectedPart
+                }, children: [_jsxs(Typography, { variant: "subtitle1", children: ["Machine Cycles for ", _jsx(DisplayDateRange, { range: zoomDateRange ?? defaultDateRange })] }), _jsx(Box, { sx: {
+                            flexGrow: 1,
+                        } }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, value: showGraph ? "graph" : "table", onChange: (e) => setShowGraph(e.target.value === "graph"), children: [_jsx(MenuItem, { value: "graph", children: "Graph" }, "graph"), _jsx(MenuItem, { value: "table", children: "Table" }, "table")] }) }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, displayEmpty: true, value: selectedPart
                                 ? points.allPartAndProcNames.findIndex((o) => selectedPart.part === o.part && selectedPart.proc === o.proc)
                                 : -1, style: { marginLeft: "1em" }, onChange: (e) => {
                                 setSelectedPart(e.target.value === -1 ? undefined : points.allPartAndProcNames[e.target.value]);
@@ -190,9 +205,12 @@ export function PartMachineCycleChart() {
                                     : -1
                                 : selectedMachine, style: { marginLeft: "1em" }, onChange: (e) => {
                                 if (selectedPart) {
-                                    setSelectedOperation(points.allMachineOperations[e.target.value]);
+                                    const selectedIdx = typeof e.target.value === "number" ? e.target.value : Number.parseInt(e.target.value, 10);
+                                    if (!Number.isNaN(selectedIdx)) {
+                                        setSelectedOperation(selectedIdx === -1 ? undefined : points.allMachineOperations[selectedIdx]);
+                                    }
                                 }
-                                else {
+                                else if (typeof e.target.value === "string") {
                                     setSelectedMachine(e.target.value);
                                 }
                             }, children: selectedPart
@@ -215,6 +233,7 @@ const loadShowGraph = atom(true);
 const loadSelectedPart = atomWithDefault((get) => get(isDemoAtom) ? { part: "aaa", proc: 2 } : undefined);
 const loadSelectedOperation = atomWithDefault((get) => get(isDemoAtom) ? "LoadOp" : "LULOccupancy");
 const loadSelectedLoad = atom(FilterAnyLoadKey);
+const loadSelectedCarrier = atom("Any");
 const loadSelectedPallet = atom(undefined);
 const loadZoomDateRangeRecent = atom(undefined);
 const loadZoomDateRangeByMonth = atom(OrderedMap.empty());
@@ -240,10 +259,12 @@ export function PartLoadStationCycleChart() {
     useSetTitle("L/U Cycles");
     const setMatToShow = useSetAtom(matDetails.materialDialogOpen);
     const extraLoadCycleTooltip = useCallback(function extraLoadCycleTooltip(point) {
-        const partC = point;
+        if (!hasLoadCycleOperations(point)) {
+            return [];
+        }
         const ret = [];
-        if (partC.operations) {
-            for (const mat of partC.operations) {
+        if (point.operations) {
+            for (const mat of point.operations) {
                 ret.push({
                     title: (mat.mat.serial ? mat.mat.serial : "Material") + " " + mat.operation,
                     value: "Open Card",
@@ -258,13 +279,18 @@ export function PartLoadStationCycleChart() {
     const [selectedPart, setSelectedPart] = useAtom(loadSelectedPart);
     const [selectedOperation, setSelectedOperation] = useAtom(loadSelectedOperation);
     const [selectedLoadStation, setSelectedLoadStation] = useAtom(loadSelectedLoad);
+    const [selectedCarrier, setSelectedCarrier] = useAtom(loadSelectedCarrier);
     const [selectedPallet, setSelectedPallet] = useAtom(loadSelectedPallet);
     const [zoomDateRange, setZoomRange] = useAtom(loadZoomDateRange);
     const [yZoom, setYZoom] = useAtom(loadYZoom);
+    const fmsInfo = useAtomValue(fmsInformation);
+    const basketName = basketDisplayName(fmsInfo.basketName);
+    const hasBasketCycles = useAtomValue(period.type === "Last30" ? last30HasBasketCycles : specificMonthHasBasketCycles);
+    const carrierFilter = normalizeCarrierKindFilter(selectedCarrier, hasBasketCycles);
     const curOperation = useMemo(() => selectedPart && selectedOperation === "LoadOp"
-        ? new PartAndStationOperation(selectedPart.part, "L/U", "LOAD" + "-" + selectedPart.proc.toString())
+        ? new PartAndStationOperation(selectedPart.part, "L/U", `LOAD-${selectedPart.proc}`)
         : selectedPart && selectedOperation === "UnloadOp"
-            ? new PartAndStationOperation(selectedPart.part, "L/U", "UNLOAD" + "-" + selectedPart.proc.toString())
+            ? new PartAndStationOperation(selectedPart.part, "L/U", `UNLOAD-${selectedPart.proc}`)
             : null, [selectedPart, selectedOperation]);
     const defaultDateRange = period.type === "Last30"
         ? [addDays(startOfToday(), -29), addDays(startOfToday(), 1)]
@@ -273,12 +299,16 @@ export function PartLoadStationCycleChart() {
     const matSummary = useAtomValue(period.type === "Last30" ? last30MaterialSummary : specificMonthMaterialSummary);
     const estimatedCycleTimes = useAtomValue(period.type === "Last30" ? last30EstimatedCycleTimes : specificMonthEstimatedCycleTimes);
     const points = useMemo(() => {
-        if (selectedPart || selectedPallet || selectedLoadStation !== FilterAnyLoadKey) {
+        if (selectedPart ||
+            selectedPallet ||
+            selectedLoadStation !== FilterAnyLoadKey ||
+            carrierFilter !== "Any") {
             if (curOperation) {
                 return filterStationCycles(cycles.valuesToLazySeq(), {
                     operation: curOperation,
                     pallet: selectedPallet,
                     station: selectedLoadStation,
+                    carrierKind: carrierFilter,
                 });
             }
             else if (showGraph) {
@@ -286,6 +316,7 @@ export function PartLoadStationCycleChart() {
                     partAndProc: selectedPart,
                     pallet: selectedPallet,
                     station: selectedLoadStation,
+                    carrierKind: carrierFilter,
                 });
             }
             else {
@@ -293,13 +324,14 @@ export function PartLoadStationCycleChart() {
                     partAndProc: selectedPart,
                     pallet: selectedPallet,
                     station: selectedLoadStation,
+                    carrierKind: carrierFilter,
                 });
             }
         }
         else {
             return emptyStationCycles(cycles.valuesToLazySeq());
         }
-    }, [selectedPart, selectedPallet, curOperation, selectedLoadStation, cycles, showGraph]);
+    }, [selectedPart, selectedPallet, curOperation, selectedLoadStation, cycles, showGraph, carrierFilter]);
     const plannedMinutes = useMemo(() => {
         if (selectedOperation === "LoadOp" || selectedOperation === "UnloadOp") {
             return plannedOperationMinutes(points, true);
@@ -308,12 +340,18 @@ export function PartLoadStationCycleChart() {
             return undefined;
         }
     }, [points, selectedOperation]);
-    return (_jsxs(Box, { paddingLeft: "24px", paddingRight: "24px", paddingTop: "10px", children: [_jsxs(Box, { component: "nav", sx: {
+    return (_jsxs(Box, { sx: {
+            paddingLeft: "24px",
+            paddingRight: "24px",
+            paddingTop: "10px",
+        }, children: [_jsxs(Box, { component: "nav", sx: {
                     display: "flex",
                     minHeight: "2.5em",
                     alignItems: "center",
                     maxWidth: "calc(100vw - 24px - 24px)",
-                }, children: [_jsxs(Typography, { variant: "subtitle1", children: ["Load/Unload Cycles for ", _jsx(DisplayDateRange, { range: zoomDateRange ?? defaultDateRange })] }), _jsx(Box, { flexGrow: 1 }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, value: showGraph ? "graph" : "table", onChange: (e) => setShowGraph(e.target.value === "graph"), children: [_jsx(MenuItem, { value: "graph", children: "Graph" }, "graph"), _jsx(MenuItem, { value: "table", children: "Table" }, "table")] }) }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, displayEmpty: true, value: selectedPart
+                }, children: [_jsxs(Typography, { variant: "subtitle1", children: ["Load/Unload Cycles for ", _jsx(DisplayDateRange, { range: zoomDateRange ?? defaultDateRange })] }), _jsx(Box, { sx: {
+                            flexGrow: 1,
+                        } }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, value: showGraph ? "graph" : "table", onChange: (e) => setShowGraph(e.target.value === "graph"), children: [_jsx(MenuItem, { value: "graph", children: "Graph" }, "graph"), _jsx(MenuItem, { value: "table", children: "Table" }, "table")] }) }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, displayEmpty: true, value: selectedPart
                                 ? points.allPartAndProcNames.findIndex((o) => selectedPart.part === o.part && selectedPart.proc === o.proc)
                                 : -1, style: { marginLeft: "1em" }, onChange: (e) => {
                                 if (e.target.value === -1) {
@@ -325,7 +363,13 @@ export function PartLoadStationCycleChart() {
                                 }
                             }, children: [_jsx(MenuItem, { value: -1, children: _jsx("em", { children: "Any Part" }) }, 0), points.allPartAndProcNames.map((n, idx) => (_jsx(MenuItem, { value: idx, children: _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [_jsx(PartIdenticon, { part: n.part, size: 20 }), _jsxs("span", { style: { marginRight: "1em" }, children: [n.part, "-", n.proc] })] }) }, idx)))] }) }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, displayEmpty: true, value: selectedOperation, style: { marginLeft: "1em" }, onChange: (e) => setSelectedOperation(e.target.value), children: [_jsx(MenuItem, { value: "LULOccupancy", children: "L/U Occupancy" }), selectedPart ? _jsx(MenuItem, { value: "LoadOp", children: "Load Operation (estimated)" }) : undefined, selectedPart ? _jsx(MenuItem, { value: "UnloadOp", children: "Unload Operation (estimated)" }) : undefined] }) }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, displayEmpty: true, value: selectedLoadStation, style: { marginLeft: "1em" }, onChange: (e) => {
                                 setSelectedLoadStation(e.target.value);
-                            }, children: [_jsx(MenuItem, { value: FilterAnyLoadKey, children: _jsx("em", { children: "Any Station" }) }, -1), points.allLoadStationNames.map((n) => (_jsx(MenuItem, { value: n, children: _jsx("div", { style: { display: "flex", alignItems: "center" }, children: _jsx("span", { style: { marginRight: "1em" }, children: n }) }) }, n)))] }) }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, displayEmpty: true, value: selectedPallet || "", style: { marginLeft: "1em" }, onChange: (e) => setSelectedPallet(e.target.value === "" ? undefined : e.target.value), children: [_jsx(MenuItem, { value: "", children: _jsx("em", { children: "Any Pallet" }) }, 0), points.allPalletNames.map((n) => (_jsx(MenuItem, { value: n, children: _jsx("div", { style: { display: "flex", alignItems: "center" }, children: _jsx("span", { style: { marginRight: "1em" }, children: n }) }) }, n)))] }) }), points.data.size > 0 ? (_jsx(Tooltip, { title: "Copy to Clipboard", children: _jsx(IconButton, { onClick: () => copyCyclesToClipboard(points, matSummary.matsById, zoomDateRange, selectedOperation === "LULOccupancy"), style: { height: "25px", paddingTop: 0, paddingBottom: 0 }, size: "large", children: _jsx(ImportExport, {}) }) })) : undefined] }), _jsx("main", { children: showGraph ? (_jsx(CycleChart, { points: points.data, series_label: points.seriesLabel, default_date_range: defaultDateRange, extra_tooltip: extraLoadCycleTooltip, current_date_zoom: zoomDateRange, set_date_zoom_range: (z) => setZoomRange(z.zoom), yZoom: yZoom, setYZoom: setYZoom, stats: curOperation ? estimatedCycleTimes.get(curOperation) : undefined, plannedTimeMinutes: plannedMinutes })) : (_jsx(StationDataTable, { points: points.data, matsById: matSummary.matsById, period: period, current_date_zoom: zoomDateRange, set_date_zoom_range: (z) => setZoomRange(z.zoom), showWorkorderAndInspect: true, hideMedian: selectedOperation === "LULOccupancy", emptyMessage: selectedPart || selectedPallet
+                            }, children: [_jsx(MenuItem, { value: FilterAnyLoadKey, children: _jsx("em", { children: "Any Station" }) }, -1), points.allLoadStationNames.map((n) => (_jsx(MenuItem, { value: n, children: _jsx("div", { style: { display: "flex", alignItems: "center" }, children: _jsx("span", { style: { marginRight: "1em" }, children: n }) }) }, n)))] }) }), hasBasketCycles ? (_jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, displayEmpty: true, value: carrierFilter, style: { marginLeft: "1em" }, onChange: (e) => {
+                                const carrier = e.target.value;
+                                setSelectedCarrier(carrier);
+                                if (carrier === "Basket") {
+                                    setSelectedPallet(undefined);
+                                }
+                            }, children: [_jsx(MenuItem, { value: "Any", children: _jsx("em", { children: "Any Carrier" }) }), _jsx(MenuItem, { value: "Pallet", children: "Pallet" }), _jsx(MenuItem, { value: "Basket", children: basketName })] }) })) : undefined, carrierFilter !== "Basket" ? (_jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, displayEmpty: true, value: selectedPallet || "", style: { marginLeft: "1em" }, onChange: (e) => setSelectedPallet(e.target.value === "" ? undefined : e.target.value), children: [_jsx(MenuItem, { value: "", children: _jsx("em", { children: "Any Pallet" }) }, 0), points.allPalletNames.map((n) => (_jsx(MenuItem, { value: n, children: _jsx("div", { style: { display: "flex", alignItems: "center" }, children: _jsx("span", { style: { marginRight: "1em" }, children: n }) }) }, n)))] }) })) : undefined, points.data.size > 0 ? (_jsx(Tooltip, { title: "Copy to Clipboard", children: _jsx(IconButton, { onClick: () => copyCyclesToClipboard(points, matSummary.matsById, zoomDateRange, selectedOperation === "LULOccupancy", fmsInfo.loadStationNames, basketName), style: { height: "25px", paddingTop: 0, paddingBottom: 0 }, size: "large", children: _jsx(ImportExport, {}) }) })) : undefined] }), _jsx("main", { children: showGraph ? (_jsx(CycleChart, { points: points.data, series_label: points.seriesLabel, default_date_range: defaultDateRange, extra_tooltip: extraLoadCycleTooltip, current_date_zoom: zoomDateRange, set_date_zoom_range: (z) => setZoomRange(z.zoom), yZoom: yZoom, setYZoom: setYZoom, stats: curOperation ? estimatedCycleTimes.get(curOperation) : undefined, plannedTimeMinutes: plannedMinutes })) : (_jsx(StationDataTable, { points: points.data, matsById: matSummary.matsById, period: period, current_date_zoom: zoomDateRange, set_date_zoom_range: (z) => setZoomRange(z.zoom), showWorkorderAndInspect: true, hideMedian: selectedOperation === "LULOccupancy", emptyMessage: selectedPart || selectedPallet
                         ? "No Cycles"
                         : "Select part, operation, or pallet to see cycles." })) })] }));
 }

package/dist/components/analysis/StationDataTable.js

@@ -39,8 +39,10 @@ import { addDays, addHours, addMonths } from "date-fns";
 import { Menu } from "@mui/material";
 import { MenuItem } from "@mui/material";
 import { materialDialogOpen } from "../../cell-status/material-details.js";
-import { LazySeq, mkCompareByProperties, } from "@seedtactics/immutable-collections";
-import { useSetAtom } from "jotai";
+import { basketDisplayName, carrierLabel, carrierSortKey, displayStationName, } from "../../cell-status/station-cycles.js";
+import { LazySeq } from "@seedtactics/immutable-collections";
+import { useAtomValue, useSetAtom } from "jotai";
+import { fmsInformation } from "../../network/server-settings.js";
 var ColumnId;
 (function (ColumnId) {
     ColumnId[ColumnId["Date"] = 0] = "Date";
@@ -56,7 +58,7 @@ var ColumnId;
     ColumnId[ColumnId["MedianElapsed"] = 10] = "MedianElapsed";
     ColumnId[ColumnId["MedianDeviation"] = 11] = "MedianDeviation";
 })(ColumnId || (ColumnId = {}));
-function buildColumns(matIds) {
+function buildColumns(matIds, loadStationNames, basketName) {
     return [
         {
             id: ColumnId.Date,
@@ -81,7 +83,7 @@ function buildColumns(matIds) {
             id: ColumnId.Station,
             numeric: false,
             label: "Station",
-            getDisplay: (c) => c.stationGroup + " " + c.stationNumber.toString(),
+            getDisplay: (c) => displayStationName(c.stationGroup, c.stationNumber, loadStationNames),
         },
         {
             id: ColumnId.Operation,
@@ -92,9 +94,9 @@ function buildColumns(matIds) {
         {
             id: ColumnId.Pallet,
             numeric: false,
-            label: "Pallet",
-            getDisplay: (c) => c.pallet.toString(),
-            getForSort: (c) => c.pallet,
+            label: "Carrier",
+            getDisplay: (c) => carrierLabel(c, basketName),
+            getForSort: (c) => carrierSortKey(c),
         },
         {
             id: ColumnId.Serial,
@@ -167,9 +169,9 @@ function extractData(points, columns, currentZoom, orderBy, order) {
     const getDataC = getData;
     const data = LazySeq.of(points.values()).flatMap((x) => x);
     const arr = currentZoom
-        ? data.filter((p) => p.endTime >= currentZoom.start && p.endTime <= currentZoom.end).toMutableArray()
-        : data.toMutableArray();
-    return arr.sort(mkCompareByProperties(order === "desc" ? { desc: getDataC } : { asc: getDataC }, order === "desc" ? { desc: (a) => a.endTime.getTime() } : { asc: (a) => a.endTime.getTime() }));
+        ? data.filter((p) => p.endTime >= currentZoom.start && p.endTime <= currentZoom.end)
+        : data;
+    return arr.toSortedArray(order === "desc" ? { desc: getDataC } : { asc: getDataC }, order === "desc" ? { desc: (a) => a.endTime.getTime() } : { asc: (a) => a.endTime.getTime() });
 }
 function useZoom(props) {
     let zoom;
@@ -204,7 +206,8 @@ function useZoom(props) {
     };
 }
 export default memo(function StationDataTable(props) {
-    const columns = buildColumns(props.matsById);
+    const fmsInfo = useAtomValue(fmsInformation);
+    const columns = buildColumns(props.matsById, fmsInfo.loadStationNames, basketDisplayName(fmsInfo.basketName));
     const sort = useColSort(ColumnId.Date, columns);
     const tpage = useTablePage();
     const zoom = useZoom(props);

package/dist/components/analysis/ToolReplacements.js

@@ -45,14 +45,14 @@ import { localPoint } from "../../util/chart-helpers.js";
 import { useSetTitle } from "../routes.js";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import { useResizeDetector } from "react-resize-detector";
-function tool_replacements_with_station_and_date(zoom, allReplacements, station) {
+function tool_replacements_with_station_and_date(zoom, allReplacements, selectedStation) {
     const zoomRange = zoom?.zoomRange;
-    if (station) {
-        const rsForStat = allReplacements.get(station) ?? OrderedMap.empty();
+    if (selectedStation) {
+        const rsForStat = allReplacements.get(selectedStation) ?? OrderedMap.empty();
         return rsForStat
             .valuesToAscLazySeq()
             .transform((x) => zoomRange ? x.filter((rs) => rs.time >= zoomRange.start && rs.time <= zoomRange.end) : x)
-            .flatMap((rs) => rs.replacements.map((r) => ({ ...r, station, time: rs.time })));
+            .flatMap((rs) => rs.replacements.map((replacement) => ({ ...replacement, station: selectedStation, time: rs.time })));
     }
     else {
         return allReplacements.toAscLazySeq().flatMap(([station, rsByStat]) => rsByStat
@@ -332,12 +332,12 @@ const AllReplacementTable = memo(function ReplacementTable(props) {
 });
 function copyToClipboard(replacements, displayType) {
     if (displayType === "summary") {
-        const r = tool_summary(undefined, replacements, undefined, (r) => r.tool);
-        copyTableToClipboard(summaryColumns, r);
+        const summaryRows = tool_summary(undefined, replacements, undefined, (replacement) => replacement.tool);
+        copyTableToClipboard(summaryColumns, summaryRows);
     }
     else {
-        const r = tool_replacements_with_station_and_date(undefined, replacements, undefined).toSortedArray((r) => r.tool, (r) => r.time);
-        copyTableToClipboard(allReplacementsColumns, r);
+        const detailRows = tool_replacements_with_station_and_date(undefined, replacements, undefined).toSortedArray((replacement) => replacement.tool, (replacement) => replacement.time);
+        copyTableToClipboard(allReplacementsColumns, detailRows);
     }
 }
 const ChooseMachine = memo(function ChooseMachineSelect(props) {
@@ -361,10 +361,16 @@ export const ToolReplacementPage = memo(function ToolReplacementCard() {
     useSetTitle("Tool Replacements");
     const [selectedMachine, setSelectedMachine] = useAtom(selectedMachineAtom);
     const [type, setType] = useAtom(selectedType);
-    return (_jsxs(Box, { paddingLeft: "24px", paddingRight: "24px", paddingTop: "10px", children: [_jsxs(Box, { component: "nav", sx: {
+    return (_jsxs(Box, { sx: {
+            paddingLeft: "24px",
+            paddingRight: "24px",
+            paddingTop: "10px",
+        }, children: [_jsxs(Box, { component: "nav", sx: {
                     display: "flex",
                     minHeight: "2.5em",
                     alignItems: "center",
                     maxWidth: "calc(100vw - 24px - 24px)",
-                }, children: [_jsx(Typography, { variant: "subtitle1", children: "Tool Replacements" }), _jsx(Box, { flexGrow: 1 }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, value: type, style: { marginLeft: "1em" }, onChange: (e) => setType(e.target.value), children: [_jsx(MenuItem, { value: "summary", children: "Summary" }), _jsx(MenuItem, { value: "details", children: "Details" })] }) }), _jsx(ChooseMachine, { station: selectedMachine, setSelectedStation: setSelectedMachine, displayType: type })] }), _jsx("main", { children: type === "summary" ? (_jsx(SummaryTable, { station: selectedMachine })) : (_jsx(AllReplacementTable, { station: selectedMachine })) })] }));
+                }, children: [_jsx(Typography, { variant: "subtitle1", children: "Tool Replacements" }), _jsx(Box, { sx: {
+                            flexGrow: 1,
+                        } }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, value: type, style: { marginLeft: "1em" }, onChange: (e) => setType(e.target.value), children: [_jsx(MenuItem, { value: "summary", children: "Summary" }), _jsx(MenuItem, { value: "details", children: "Details" })] }) }), _jsx(ChooseMachine, { station: selectedMachine, setSelectedStation: setSelectedMachine, displayType: type })] }), _jsx("main", { children: type === "summary" ? (_jsx(SummaryTable, { station: selectedMachine })) : (_jsx(AllReplacementTable, { station: selectedMachine })) })] }));
 });

package/dist/components/log-entry-queue-filter.d.ts

@@ -0,0 +1,2 @@
+import * as api from "../network/api.js";
+export declare function filterRemoveAddQueue(entries: Iterable<Readonly<api.ILogEntry>>): Iterable<Readonly<api.ILogEntry>>;

package/dist/components/log-entry-queue-filter.js

@@ -0,0 +1,21 @@
+import * as api from "../network/api.js";
+export function* filterRemoveAddQueue(entries) {
+    let prev = null;
+    for (const e of entries) {
+        if (prev != null &&
+            prev.type === api.LogType.RemoveFromQueue &&
+            e.type === api.LogType.AddToQueue &&
+            prev.loc === e.loc) {
+            prev = null;
+        }
+        else {
+            if (prev !== null) {
+                yield prev;
+            }
+            prev = e;
+        }
+    }
+    if (prev !== null) {
+        yield prev;
+    }
+}

package/dist/components/operations/AllMaterial.js

@@ -45,6 +45,8 @@ import { closestCenter, DndContext, DragOverlay, getFirstCollision, MeasuringStr
 import { QuarantineMatButton } from "../station-monitor/QuarantineButton.js";
 import { useSetTitle } from "../routes.js";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { fmsInformation } from "../../network/server-settings.js";
+import { basketDisplayName, loadStationDisplayName } from "../../cell-status/station-cycles.js";
 const ColumnWithTitle = forwardRef(function MaterialBin(props, ref) {
     return (_jsxs(Box, { sx: {
             margin: props.isDragOverlay ? undefined : "0.75em",
@@ -89,9 +91,6 @@ const QuarantineQueue = memo(function QuarantineQueue(props) {
         return (_jsx(SortableColumnWithTitle, { binId: props.binId, label: props.queue, bin: props.bin, children: _jsx(SortableContext, { items: props.material.map((m) => m.materialID), strategy: verticalListSortingStrategy, children: props.material.map((mat) => (_jsx(SortableInProcMaterial, { mat: mat, hideAvatar: true }, mat.materialID))) }) }));
     }
 });
-function renderLul(lul) {
-    return "L/U " + lul.toString();
-}
 function compareLul(l1, l2) {
     return l1 - l2;
 }
@@ -114,22 +113,34 @@ function renderQueue(queue) {
 function compareQueue(q1, q2) {
     return q1.localeCompare(q2);
 }
+function compareBasket(b1, b2) {
+    return b1 - b2;
+}
 class SystemMaterial extends PureComponent {
     render() {
         const Col = this.props.isDragOverlay ? ColumnWithTitle : SortableColumnWithTitle;
         return (_jsx(Col, { label: this.props.name, binId: this.props.binId, bin: this.props.bin, isDragOverlay: this.props.isDragOverlay, children: LazySeq.of(this.props.material)
                 .sortWith(([l1, _m1], [l2, _m2]) => this.props.compareLabel(l1, l2))
-                .map(([label, material], idx) => (_jsxs("div", { children: [_jsx(Typography, { variant: "caption", children: this.props.renderLabel(label) }), material.map((mat, idx) => (_jsx(InProcMaterial, { mat: mat, hideAvatar: true }, idx)))] }, idx))) }));
+                .map(([label, material], matGroupIdx) => (_jsxs("div", { children: [_jsx(Typography, { variant: "caption", children: this.props.renderLabel(label) }), material.map((mat, idx) => (_jsx(InProcMaterial, { mat: mat, hideAvatar: true }, idx)))] }, matGroupIdx))) }));
     }
 }
 function MaterialBinColumn({ matBin, isDragOverlay, }) {
+    const fmsInfo = useAtomValue(fmsInformation);
+    const basketName = basketDisplayName(fmsInfo.basketName);
     switch (matBin.type) {
         case MaterialBinType.LoadStations:
-            return (_jsx(SystemMaterial, { name: "Load Stations", binId: matBin.binId, renderLabel: renderLul, compareLabel: compareLul, material: matBin.byLul, bin: matBin, isDragOverlay: isDragOverlay }));
+            return (_jsx(SystemMaterial, { name: "Load Stations", binId: matBin.binId, renderLabel: (lul) => loadStationDisplayName(lul, fmsInfo.loadStationNames), compareLabel: compareLul, material: matBin.byLul, bin: matBin, isDragOverlay: isDragOverlay }));
         case MaterialBinType.Pallets:
             return (_jsx(SystemMaterial, { name: "Pallets", binId: matBin.binId, renderLabel: renderPal, compareLabel: comparePal, material: matBin.byPallet, bin: matBin, isDragOverlay: isDragOverlay }));
         case MaterialBinType.ActiveQueues:
             return (_jsx(SystemMaterial, { name: "Queues", binId: matBin.binId, renderLabel: renderQueue, compareLabel: compareQueue, material: matBin.byQueue, bin: matBin, isDragOverlay: isDragOverlay }));
+        case MaterialBinType.Baskets:
+            return (_jsx(SystemMaterial, { name: basketName + "s", binId: matBin.binId, renderLabel: (id) => basketName +
+                    " " +
+                    id.toString() +
+                    (typeof id === "number" && matBin.basketLocations.get(id)
+                        ? ` (${matBin.basketLocations.get(id)})`
+                        : ""), compareLabel: compareBasket, material: matBin.byBasket, bin: matBin, isDragOverlay: isDragOverlay }));
         case MaterialBinType.QuarantineQueues:
             return (_jsx(QuarantineQueue, { binId: matBin.binId, queue: matBin.queueName, material: matBin.material, bin: matBin, isDragOverlay: isDragOverlay }));
     }
@@ -181,12 +192,12 @@ export function AllMaterial(props) {
     const reorderQueuedMat = useSetAtom(currentSt.reorderQueuedMatInCurrentStatus);
     const [activeDrag, setActiveDrag] = useState(null);
     const allBins = useMemo(() => {
-        const allBins = selectAllMaterialIntoBins(st, matBinOrder);
+        const bins = selectAllMaterialIntoBins(st, matBinOrder);
         if (activeDrag && activeDrag.type === "material" && activeDrag.curOverBinId !== null) {
-            return moveMaterialInBin(allBins, activeDrag.mat, activeDrag.curOverBinId, activeDrag.initialIdx);
+            return moveMaterialInBin(bins, activeDrag.mat, activeDrag.curOverBinId, activeDrag.initialIdx);
         }
         else {
-            return allBins;
+            return bins;
         }
     }, [st, matBinOrder, activeDrag]);
     const curBins = props.displaySystemBins
@@ -196,10 +207,15 @@ export function AllMaterial(props) {
     return (_jsxs(DndContext, { collisionDetection: collisionDetectionStrategy, measuring: {
             droppable: { strategy: MeasuringStrategy.Always },
         }, onDragStart: ({ active }) => {
-            if (typeof active.id === "string") {
+            if (typeof active.id === "string" &&
+                typeof active.data.current === "object" &&
+                active.data.current !== null &&
+                "bin" in active.data.current) {
                 setActiveDrag({ type: "column", bin: active.data.current.bin });
             }
-            else {
+            else if (typeof active.data.current === "object" &&
+                active.data.current !== null &&
+                "mat" in active.data.current) {
                 setActiveDrag({
                     type: "material",
                     mat: active.data.current.mat,

package/dist/components/operations/ChartRangeEdit.js

@@ -35,6 +35,37 @@ import { memo, useState } from "react";
 import { last30ChartEndTimes, last30ChartStartTimes, last30WeekdayStartIdx, last30WeekdayStartMinuteOffset, } from "../../data/chart-times";
 import { useAtom, useAtomValue } from "jotai";
 import { Box, Button, Dialog, DialogActions, DialogContent, Divider, IconButton, MenuItem, Radio, RadioGroup, Stack, TextField, Tooltip, Typography, } from "@mui/material";
+function isStartType(value) {
+    return (value === "CustomDate" ||
+        value === "StartOfToday" ||
+        value === "StartOfYesterday" ||
+        value === "StartOfWeek" ||
+        value === "StartOfLastWeek" ||
+        value === "Last30");
+}
+function isEndType(value) {
+    return value === "CustomDate" || value === "Now" || value === "EndOfYesterday" || value === "EndOfLastWeek";
+}
+function parseWeekdayStart(value) {
+    switch (value) {
+        case "0":
+            return 0;
+        case "1":
+            return 1;
+        case "2":
+            return 2;
+        case "3":
+            return 3;
+        case "4":
+            return 4;
+        case "5":
+            return 5;
+        case "6":
+            return 6;
+        default:
+            return null;
+    }
+}
 import { Edit } from "@mui/icons-material";
 import { addMinutes, startOfToday } from "date-fns";
 function RadioLabel({ label, date }) {
@@ -70,7 +101,29 @@ function RangeStart({ chartAtom }) {
     const startOfWeek = useAtomValue(last30ChartStartTimes("StartOfWeek"));
     const startOfLastWeek = useAtomValue(last30ChartStartTimes("StartOfLastWeek"));
     const last30 = useAtomValue(last30ChartStartTimes("Last30"));
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", children: "Range Start" }), _jsx(RadioGroup, { value: chartRange.startType instanceof Date ? "CustomDate" : chartRange.startType, onChange: (event) => setTy(event.target.value), children: _jsxs(Stack, { direction: "column", spacing: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "StartOfToday" }), _jsx(RadioLabel, { label: "Start of Today", date: stOfToday })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "StartOfYesterday" }), _jsx(RadioLabel, { label: "Start of Yesterday", date: startOfYesterday })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "StartOfWeek" }), _jsx(RadioLabel, { label: "Start of This Week", date: startOfWeek })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "StartOfLastWeek" }), _jsx(RadioLabel, { label: "Start of Last Week", date: startOfLastWeek })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "Last30" }), _jsx(RadioLabel, { label: "Last 30 Days", date: last30 })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "CustomDate" }), _jsx(CustomDateLabel, { enabled: chartRange.startType instanceof Date, date: customDate, setDate: setDate })] })] }) })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", children: "Range Start" }), _jsx(RadioGroup, { value: chartRange.startType instanceof Date ? "CustomDate" : chartRange.startType, onChange: (event) => {
+                    if (isStartType(event.target.value)) {
+                        setTy(event.target.value);
+                    }
+                }, children: _jsxs(Stack, { direction: "column", spacing: 2, children: [_jsxs(Stack, { direction: "row", sx: {
+                                alignItems: "center",
+                                minHeight: "3em",
+                            }, children: [_jsx(Radio, { value: "StartOfToday" }), _jsx(RadioLabel, { label: "Start of Today", date: stOfToday })] }), _jsxs(Stack, { direction: "row", sx: {
+                                alignItems: "center",
+                                minHeight: "3em",
+                            }, children: [_jsx(Radio, { value: "StartOfYesterday" }), _jsx(RadioLabel, { label: "Start of Yesterday", date: startOfYesterday })] }), _jsxs(Stack, { direction: "row", sx: {
+                                alignItems: "center",
+                                minHeight: "3em",
+                            }, children: [_jsx(Radio, { value: "StartOfWeek" }), _jsx(RadioLabel, { label: "Start of This Week", date: startOfWeek })] }), _jsxs(Stack, { direction: "row", sx: {
+                                alignItems: "center",
+                                minHeight: "3em",
+                            }, children: [_jsx(Radio, { value: "StartOfLastWeek" }), _jsx(RadioLabel, { label: "Start of Last Week", date: startOfLastWeek })] }), _jsxs(Stack, { direction: "row", sx: {
+                                alignItems: "center",
+                                minHeight: "3em",
+                            }, children: [_jsx(Radio, { value: "Last30" }), _jsx(RadioLabel, { label: "Last 30 Days", date: last30 })] }), _jsxs(Stack, { direction: "row", sx: {
+                                alignItems: "center",
+                                minHeight: "3em",
+                            }, children: [_jsx(Radio, { value: "CustomDate" }), _jsx(CustomDateLabel, { enabled: chartRange.startType instanceof Date, date: customDate, setDate: setDate })] })] }) })] }));
 }
 function RangeEnd({ chartAtom }) {
     const [chartRange, setChartRange] = useAtom(chartAtom);
@@ -90,7 +143,23 @@ function RangeEnd({ chartAtom }) {
     }
     const endOfYesterday = useAtomValue(last30ChartEndTimes("EndOfYesterday"));
     const endOfLastWeek = useAtomValue(last30ChartEndTimes("EndOfLastWeek"));
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", children: "Range End" }), _jsx(RadioGroup, { value: chartRange.endType instanceof Date ? "CustomDate" : chartRange.endType, onChange: (event) => setTy(event.target.value), children: _jsxs(Stack, { direction: "column", spacing: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "Now" }), _jsx(Typography, { children: "Now" })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "EndOfYesterday" }), _jsx(RadioLabel, { label: "End of Yesterday", date: endOfYesterday })] }), _jsx(Box, { sx: { height: "3em" } }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "EndOfLastWeek" }), _jsx(RadioLabel, { label: "End of Last Week", date: endOfLastWeek })] }), _jsx(Box, { sx: { height: "3em" } }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: { minHeight: "3em" }, children: [_jsx(Radio, { value: "CustomDate" }), _jsx(CustomDateLabel, { enabled: chartRange.endType instanceof Date, date: customDate, setDate: setDate })] })] }) })] }));
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", children: "Range End" }), _jsx(RadioGroup, { value: chartRange.endType instanceof Date ? "CustomDate" : chartRange.endType, onChange: (event) => {
+                    if (isEndType(event.target.value)) {
+                        setTy(event.target.value);
+                    }
+                }, children: _jsxs(Stack, { direction: "column", spacing: 2, children: [_jsxs(Stack, { direction: "row", sx: {
+                                alignItems: "center",
+                                minHeight: "3em",
+                            }, children: [_jsx(Radio, { value: "Now" }), _jsx(Typography, { children: "Now" })] }), _jsxs(Stack, { direction: "row", sx: {
+                                alignItems: "center",
+                                minHeight: "3em",
+                            }, children: [_jsx(Radio, { value: "EndOfYesterday" }), _jsx(RadioLabel, { label: "End of Yesterday", date: endOfYesterday })] }), _jsx(Box, { sx: { height: "3em" } }), _jsxs(Stack, { direction: "row", sx: {
+                                alignItems: "center",
+                                minHeight: "3em",
+                            }, children: [_jsx(Radio, { value: "EndOfLastWeek" }), _jsx(RadioLabel, { label: "End of Last Week", date: endOfLastWeek })] }), _jsx(Box, { sx: { height: "3em" } }), _jsxs(Stack, { direction: "row", sx: {
+                                alignItems: "center",
+                                minHeight: "3em",
+                            }, children: [_jsx(Radio, { value: "CustomDate" }), _jsx(CustomDateLabel, { enabled: chartRange.endType instanceof Date, date: customDate, setDate: setDate })] })] }) })] }));
 }
 function minutesToTimespan(m) {
     const h = Math.floor(m / 60);
@@ -100,7 +169,14 @@ function minutesToTimespan(m) {
 function RangeDialog({ chartAtom, open, setOpen, }) {
     const [weekdayStart, setWeekdayStart] = useAtom(last30WeekdayStartIdx);
     const [weekdayStartMinuteOffset, setWeekdayStartMinuteOffset] = useAtom(last30WeekdayStartMinuteOffset);
-    return (_jsxs(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "md", children: [_jsx(DialogContent, { children: _jsxs(Stack, { direction: "column", spacing: 2, divider: _jsx(Divider, { orientation: "horizontal", flexItem: true }), children: [_jsxs(Stack, { direction: "row", spacing: 2, divider: _jsx(Divider, { orientation: "vertical", flexItem: true }), children: [_jsx(RangeStart, { chartAtom: chartAtom }), _jsx(RangeEnd, { chartAtom: chartAtom })] }), _jsxs(Stack, { direction: "row", justifyContent: "space-around", children: [_jsxs(TextField, { select: true, label: "First Day Of Week", sx: { minWidth: "10em" }, value: weekdayStart, onChange: (e) => setWeekdayStart(parseInt(e.target.value)), children: [_jsx(MenuItem, { value: 0, children: "Sunday" }), _jsx(MenuItem, { value: 1, children: "Monday" }), _jsx(MenuItem, { value: 2, children: "Tuesday" }), _jsx(MenuItem, { value: 3, children: "Wednesday" }), _jsx(MenuItem, { value: 4, children: "Thursday" }), _jsx(MenuItem, { value: 5, children: "Friday" }), _jsx(MenuItem, { value: 6, children: "Saturday" })] }), _jsx(TextField, { type: "time", label: "Day Start Time", sx: { minWidth: "10em" }, value: minutesToTimespan(weekdayStartMinuteOffset), onChange: (e) => {
+    return (_jsxs(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "md", children: [_jsx(DialogContent, { children: _jsxs(Stack, { direction: "column", spacing: 2, divider: _jsx(Divider, { orientation: "horizontal", flexItem: true }), children: [_jsxs(Stack, { direction: "row", spacing: 2, divider: _jsx(Divider, { orientation: "vertical", flexItem: true }), children: [_jsx(RangeStart, { chartAtom: chartAtom }), _jsx(RangeEnd, { chartAtom: chartAtom })] }), _jsxs(Stack, { direction: "row", sx: {
+                                justifyContent: "space-around",
+                            }, children: [_jsxs(TextField, { select: true, label: "First Day Of Week", sx: { minWidth: "10em" }, value: weekdayStart, onChange: (e) => {
+                                        const parsed = parseWeekdayStart(e.target.value);
+                                        if (parsed !== null) {
+                                            setWeekdayStart(parsed);
+                                        }
+                                    }, children: [_jsx(MenuItem, { value: 0, children: "Sunday" }), _jsx(MenuItem, { value: 1, children: "Monday" }), _jsx(MenuItem, { value: 2, children: "Tuesday" }), _jsx(MenuItem, { value: 3, children: "Wednesday" }), _jsx(MenuItem, { value: 4, children: "Thursday" }), _jsx(MenuItem, { value: 5, children: "Friday" }), _jsx(MenuItem, { value: 6, children: "Saturday" })] }), _jsx(TextField, { type: "time", label: "Day Start Time", sx: { minWidth: "10em" }, value: minutesToTimespan(weekdayStartMinuteOffset), onChange: (e) => {
                                         const val = e.target.value;
                                         if (val === "") {
                                             setWeekdayStartMinuteOffset(0);
@@ -144,5 +220,7 @@ function formatEnd(ty, d) {
 export const Last30ChartRangeToolbar = memo(function Last30ChartRangeToolbar({ chartAtom, }) {
     const chartRange = useAtomValue(chartAtom);
     const [dialogOpen, setDialogOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [_jsxs(Typography, { variant: "body2", color: "textSecondary", children: ["Range: ", formatStart(chartRange.startType, chartRange.startDate), " -", " ", formatEnd(chartRange.endType, chartRange.endDate)] }), _jsx(Tooltip, { title: "Edit Range", children: _jsx(IconButton, { onClick: () => setDialogOpen(true), children: _jsx(Edit, {}) }) })] }), _jsx(RangeDialog, { open: dialogOpen, setOpen: setDialogOpen, chartAtom: chartAtom })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Stack, { direction: "row", spacing: 2, sx: {
+                    alignItems: "center",
+                }, children: [_jsxs(Typography, { variant: "body2", color: "textSecondary", children: ["Range: ", formatStart(chartRange.startType, chartRange.startDate), " -", " ", formatEnd(chartRange.endType, chartRange.endDate)] }), _jsx(Tooltip, { title: "Edit Range", children: _jsx(IconButton, { onClick: () => setDialogOpen(true), children: _jsx(Edit, {}) }) })] }), _jsx(RangeDialog, { open: dialogOpen, setOpen: setDialogOpen, chartAtom: chartAtom })] }));
 });