@seedtactics/insight-client 16.4.0

package/dist/components/operations/Rebookings.js

@@ -0,0 +1,213 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* Copyright (c) 2024, John Lenz
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+
+    * Neither the name of John Lenz, Black Maple Software, SeedTactics,
+      nor the names of other contributors may be used to endorse or
+      promote products derived from this software without specific
+      prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+import { Autocomplete, Box, Button, Checkbox, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Fab, FormControlLabel, InputAdornment, Stack, Table, TextField, Tooltip, Typography, } from "@mui/material";
+import { atom, useAtom, useAtomValue } from "jotai";
+import { fmsInformation } from "../../network/server-settings.js";
+import { DataTableActions, DataTableBody, DataTableHead, useColSort, useTablePage, } from "../analysis/DataTable.js";
+import { useSetTitle } from "../routes.js";
+import { memo, useMemo, useState } from "react";
+import { canceledRebookings, last30Rebookings, last30ScheduledBookings, useCancelRebooking, useNewRebooking, } from "../../cell-status/rebookings.js";
+import { LazySeq } from "@seedtactics/immutable-collections";
+import { Add } from "@mui/icons-material";
+import { currentStatus } from "../../cell-status/current-status.js";
+import { last30Jobs } from "../../cell-status/scheduled-jobs.js";
+import { PartIdenticon } from "../station-monitor/Material.js";
+var ColumnId;
+(function (ColumnId) {
+    ColumnId[ColumnId["BookingId"] = 0] = "BookingId";
+    ColumnId[ColumnId["Part"] = 1] = "Part";
+    ColumnId[ColumnId["Quantity"] = 2] = "Quantity";
+    ColumnId[ColumnId["RequestTime"] = 3] = "RequestTime";
+    ColumnId[ColumnId["Priority"] = 4] = "Priority";
+    ColumnId[ColumnId["Workorder"] = 5] = "Workorder";
+    ColumnId[ColumnId["Canceled"] = 6] = "Canceled";
+    ColumnId[ColumnId["Job"] = 7] = "Job";
+    ColumnId[ColumnId["SchTime"] = 8] = "SchTime";
+    // Procs
+    // Notes
+})(ColumnId || (ColumnId = {}));
+const filterDialogOpen = atom(false);
+const hideScheduledAtom = atom(false);
+const hideCanceledAtom = atom(false);
+const columns = [
+    {
+        id: ColumnId.BookingId,
+        numeric: false,
+        label: "ID",
+        getDisplay: (r) => r.bookingId,
+        Cell: ({ row }) => row.canceled ? (_jsx(Typography, { sx: { textDecoration: "line-through", fontSize: "inherit" }, children: row.bookingId })) : (row.bookingId),
+    },
+    {
+        id: ColumnId.Part,
+        numeric: false,
+        label: "Part",
+        getDisplay: (r) => r.partName,
+        Cell: ({ row }) => (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(PartIdenticon, { part: row.partName, size: 25 }), row.partName] })),
+    },
+    {
+        id: ColumnId.Quantity,
+        numeric: true,
+        label: "Quantity",
+        getDisplay: (r) => r.quantity.toString(),
+        getForSort: (r) => r.quantity,
+    },
+    {
+        id: ColumnId.RequestTime,
+        numeric: false,
+        label: "Request Time",
+        getDisplay: (r) => r.timeUTC.toLocaleString(),
+        getForSort: (r) => r.timeUTC.getTime(),
+    },
+    {
+        id: ColumnId.Priority,
+        numeric: false,
+        label: "Priority",
+        getDisplay: (r) => (r.priority ? r.priority.toString() : ""),
+        getForSort: (r) => r.priority ?? 0,
+    },
+    {
+        id: ColumnId.Workorder,
+        numeric: false,
+        label: "Workorder",
+        getDisplay: (r) => r.workorder ?? "",
+    },
+    {
+        id: ColumnId.Canceled,
+        numeric: false,
+        label: "Canceled",
+        getDisplay: (r) => r.canceled?.toLocaleString() ?? "",
+        getForSort: (r) => r.canceled?.getTime() ?? 0,
+        openFilterDialog: filterDialogOpen,
+    },
+    {
+        id: ColumnId.Job,
+        numeric: false,
+        label: "Scheduled Job",
+        getDisplay: (r) => r.job ?? "",
+        openFilterDialog: filterDialogOpen,
+    },
+    {
+        id: ColumnId.SchTime,
+        numeric: false,
+        label: "Scheduled Time",
+        getDisplay: (r) => (r.schTime ? r.schTime.toLocaleString() : ""),
+        getForSort: (r) => (r.schTime ? r.schTime.getTime() : 0),
+    },
+];
+const BookingTable = memo(function BookingTable({ setRebookingToShow, }) {
+    const sort = useColSort(ColumnId.RequestTime, columns, "desc");
+    const tpage = useTablePage();
+    const rebookings = useAtomValue(last30Rebookings);
+    const canceled = useAtomValue(canceledRebookings);
+    const scheduled = useAtomValue(last30ScheduledBookings);
+    const unschOnly = useAtomValue(hideScheduledAtom);
+    const hideCanceled = useAtomValue(hideCanceledAtom);
+    const rows = useMemo(() => rebookings
+        .adjust(scheduled, (r, sch) => r
+        ? {
+            ...r,
+            job: sch?.jobUnique,
+            schTime: sch?.scheduledTime,
+        }
+        : undefined)
+        .adjust(canceled, (r, t) => (r ? { ...r, canceled: t } : undefined))
+        .valuesToAscLazySeq()
+        .transform((s) => (unschOnly ? s.filter((r) => !r.job) : s))
+        .transform((s) => (hideCanceled ? s.filter((r) => !r.canceled) : s))
+        .toSortedArray(sort.sortOn), [sort.sortOn, rebookings, canceled, scheduled, unschOnly, hideCanceled]);
+    return (_jsxs("div", { children: [_jsxs(Table, { children: [_jsx(DataTableHead, { columns: columns, sort: sort, showDetailsCol: true, copyToClipboardRows: rows }), _jsx(DataTableBody, { columns: columns, pageData: rows, rowsPerPage: tpage.rowsPerPage, onClickDetails: (_, row) => setRebookingToShow(row) })] }), _jsx(DataTableActions, { tpage: tpage, count: rows.length })] }));
+});
+const longDateFormat = new Intl.DateTimeFormat(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+});
+const RebookingDialog = memo(function RebookingDialog({ rebooking, close, }) {
+    const [sendCancel, canceling] = useCancelRebooking();
+    function cancel() {
+        if (rebooking) {
+            sendCancel(rebooking.bookingId)
+                .then(() => close(undefined))
+                .catch(console.log);
+        }
+    }
+    return (_jsxs(Dialog, { open: rebooking !== undefined, onClose: () => close(undefined), children: [_jsx(DialogTitle, { children: rebooking?.canceled ? (_jsx(Typography, { sx: { textDecoration: "line-through" }, children: rebooking?.bookingId })) : (rebooking?.bookingId) }), _jsx(DialogContent, { children: _jsxs(Stack, { direction: "column", spacing: 1, children: [rebooking?.canceled && (_jsxs(Typography, { variant: "h5", children: ["Canceled at ", longDateFormat.format(rebooking.canceled)] })), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx("span", { children: "Part:" }), rebooking?.partName && _jsx(PartIdenticon, { part: rebooking?.partName, size: 25 }), _jsx("span", { children: rebooking?.partName })] }), _jsxs(Typography, { children: ["Quantity: ", rebooking?.quantity] }), _jsxs(Typography, { children: ["Request Time: ", longDateFormat.format(rebooking?.timeUTC)] }), _jsxs(Typography, { children: ["Priority: ", rebooking?.priority] }), rebooking?.workorder && _jsxs(Typography, { children: ["Workorder: ", rebooking?.workorder] }), _jsxs(Typography, { children: ["Note: ", rebooking?.notes] }), rebooking?.job && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(Typography, { children: ["Scheduled Job: ", rebooking?.job] }), _jsxs(Typography, { children: ["Scheduled Time: ", rebooking?.schTime?.toLocaleString()] })] }))] }) }), _jsxs(DialogActions, { children: [!rebooking?.canceled && !rebooking?.job && (_jsxs(Button, { onClick: cancel, color: "secondary", disabled: canceling, children: [canceling ? _jsx(CircularProgress, { size: 24 }) : undefined, "Cancel Rebooking Request"] })), _jsx(Button, { onClick: () => close(undefined), children: "Close" })] })] }));
+});
+const partNamesAtom = atom((get) => LazySeq.ofObject(get(currentStatus).jobs)
+    .map(([_, j]) => j.partName)
+    .concat(get(last30Jobs)
+    .valuesToLazySeq()
+    .map((j) => j.partName))
+    .distinctAndSortBy((p) => p)
+    .toRArray());
+const NewRebookingDialog = memo(function NewRebookingDialog() {
+    const [open, setOpen] = useState(false);
+    const [rebooking, setRebooking] = useState({ part: "" });
+    const partNames = useAtomValue(partNamesAtom);
+    const [createNew, creating] = useNewRebooking();
+    const allowCreate = rebooking.part !== "" && !!rebooking.qty && !isNaN(rebooking.qty);
+    function close() {
+        setOpen(false);
+        setRebooking({ part: "" });
+    }
+    function create() {
+        if (!allowCreate) {
+            return;
+        }
+        createNew(rebooking).then(close).catch(console.log);
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Dialog, { open: open, onClose: close, children: [_jsx(DialogTitle, { children: "Create New" }), _jsx(DialogContent, { children: _jsxs(Stack, { direction: "column", spacing: 2, sx: { mt: "0.5em", minWidth: "25em" }, children: [_jsx(Autocomplete, { freeSolo: true, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, disableClearable: true, options: partNames, value: rebooking.part, onChange: (_, v) => setRebooking((r) => ({ ...r, part: v })), renderInput: (params) => (_jsx(TextField, { ...params, label: "Part Name", slotProps: {
+                                            input: {
+                                                ...params.InputProps,
+                                                startAdornment: (_jsxs(_Fragment, { children: [rebooking.part !== "" ? (_jsx(InputAdornment, { position: "start", children: _jsx(PartIdenticon, { part: rebooking.part, size: 25 }) })) : undefined, params.InputProps.startAdornment] })),
+                                            },
+                                        } })), renderOption: (props, option) => (_jsx("li", { ...props, children: _jsxs(Stack, { direction: "row", spacing: "1", alignItems: "center", children: [_jsx(PartIdenticon, { part: option, size: 25 }), option] }) })), filterOptions: (options, params) => {
+                                        const filtered = options.filter((o) => o.toLowerCase().includes(params.inputValue.toLowerCase()));
+                                        return filtered.length === 0 && params.inputValue !== "" ? [params.inputValue] : filtered;
+                                    } }), _jsx(TextField, { label: "Quantity", type: "number", value: rebooking.qty && !isNaN(rebooking.qty) ? rebooking.qty : "", onChange: (e) => setRebooking((r) => ({ ...r, qty: parseInt(e.target.value) })) }), _jsx(TextField, { label: "Priority (optional)", type: "number", value: rebooking.priority && !isNaN(rebooking.priority) ? rebooking.priority : "", onChange: (e) => setRebooking((r) => ({ ...r, priority: parseInt(e.target.value) })) }), _jsx(TextField, { label: "Workorder (optional)", value: rebooking.workorder ?? "", onChange: (e) => setRebooking((r) => ({ ...r, workorder: e.target.value })) }), _jsx(TextField, { label: "Notes (optional)", multiline: true, minRows: 2, value: rebooking.notes ?? "", onChange: (e) => setRebooking((r) => ({ ...r, notes: e.target.value })) })] }) }), _jsxs(DialogActions, { children: [_jsxs(Button, { color: "secondary", onClick: create, disabled: !allowCreate || creating, children: [creating ? _jsx(CircularProgress, { size: 24 }) : undefined, "Create"] }), _jsx(Button, { onClick: close, children: "Cancel" })] })] }), _jsx(Tooltip, { title: "Add Rebooking", children: _jsx(Fab, { onClick: () => setOpen(true), sx: { position: "fixed", bottom: "24px", right: "24px" }, color: "primary", children: _jsx(Add, {}) }) })] }));
+});
+const FilterDialog = memo(function UnschFilterDialog() {
+    const [open, setOpen] = useAtom(filterDialogOpen);
+    const [showOnlyUnscheduled, setShowOnlyUnscheduled] = useAtom(hideScheduledAtom);
+    const [hideCanceled, setHideCanceled] = useAtom(hideCanceledAtom);
+    return (_jsxs(Dialog, { open: open, onClose: () => setOpen(false), children: [_jsx(DialogTitle, { children: "Filter" }), _jsx(DialogContent, { children: _jsxs(Stack, { direction: "column", spacing: 2, children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: showOnlyUnscheduled, onChange: (e) => setShowOnlyUnscheduled(e.target.checked) }), label: "Hide scheduled" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: hideCanceled, onChange: (e) => setHideCanceled(e.target.checked) }), label: "Hide canceled" })] }) }), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => setOpen(false), children: "Close" }) })] }));
+});
+export function RebookingsPage() {
+    const fmsInfo = useAtomValue(fmsInformation);
+    useSetTitle(fmsInfo.supportsRebookings ?? "Rebookings");
+    const [rebookingToShow, setRebookingToShow] = useState(undefined);
+    return (_jsxs(Box, { component: "main", sx: { padding: "24px" }, children: [_jsx(BookingTable, { setRebookingToShow: setRebookingToShow }), _jsx(RebookingDialog, { rebooking: rebookingToShow, close: setRebookingToShow }), _jsx(NewRebookingDialog, {}), _jsx(FilterDialog, {})] }));
+}

package/dist/components/operations/RecentCycleChart.d.ts

@@ -0,0 +1,4 @@
+export declare function RecentCycleChart({ height, width }: {
+    height: number;
+    width: number;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/operations/RecentCycleChart.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* Copyright (c) 2022, John Lenz
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+
+    * Neither the name of John Lenz, Black Maple Software, SeedTactics,
+      nor the names of other contributors may be used to endorse or
+      promote products derived from this software without specific
+      prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+import { useMemo, useCallback, useState, useRef, useEffect } from "react";
+import { last30StationCycles } from "../../cell-status/station-cycles.js";
+import { last30EstimatedCycleTimes } from "../../cell-status/estimated-cycle-times.js";
+import { recentCycles } from "../../data/results.cycles.js";
+import { addHours, differenceInMinutes } from "date-fns";
+import { LazySeq, OrderedSet } from "@seedtactics/immutable-collections";
+import { last30SimStationUse } from "../../cell-status/sim-station-use.js";
+import { red, green, grey } from "@mui/material/colors";
+import { localPoint } from "../../util/chart-helpers.js";
+import { Stack } from "@mui/material";
+import { Tooltip } from "../ChartTooltip.js";
+import { currentCycles } from "../../data/current-cycles.js";
+import { currentStatus } from "../../cell-status/current-status.js";
+import { last30Jobs } from "../../cell-status/scheduled-jobs.js";
+import { atom, useAtomValue, useSetAtom } from "jotai";
+import { AxisBottom, AxisLeft, GridCols } from "../AxisAndGrid.js";
+import { measureSvgString } from "../../util/chart-helpers.js";
+import { scaleBand, scaleTime } from "d3-scale";
+const projectedColor = green[200];
+const activeColor = green[600];
+const occupiedNonOutlierColor = green[900];
+const occupiedOutlierColor = red[700];
+const simColor = grey[400];
+const downtimeColor = grey[100];
+function useSimCycles() {
+    const jobs = useAtomValue(last30Jobs);
+    const statUse = useAtomValue(last30SimStationUse);
+    return useMemo(() => {
+        const cutoff = addHours(new Date(), -12);
+        return (LazySeq.of(statUse)
+            .filter((s) => s.end >= cutoff)
+            // make sure all planned downtimes come last so they are drawn over the top of any cycles
+            .sortBy((s) => (s.plannedDown ? 1 : 0))
+            .map((s) => ({
+            station: s.station,
+            start: s.start,
+            end: s.end,
+            plannedDown: s.plannedDown,
+            parts: LazySeq.of(s.parts ?? [])
+                .collect((p) => {
+                const j = jobs.get(p.uniq);
+                if (!j)
+                    return null;
+                return j.partName + "-" + p.proc.toString();
+            })
+                .distinctAndSortBy((p) => p)
+                .toRArray(),
+        }))
+            .toRArray());
+    }, [jobs, statUse]);
+}
+const tooltipData = atom(null);
+const stationFontSize = 14;
+const marginBottom = 20;
+const marginTop = 10;
+const marginRight = 2;
+function useScales(cycles, current, now, containerWidth, containerHeight) {
+    const stats = OrderedSet.build(cycles, (c) => c.station).union(OrderedSet.build(current, (c) => c.station));
+    const maxStatLen = stats
+        .toAscLazySeq()
+        .map((s) => measureSvgString(s, stationFontSize))
+        .maxBy((w) => w ?? 0) ?? 20;
+    const marginLeft = maxStatLen + 30;
+    const xMax = Math.max(containerWidth - marginLeft - marginRight, 5);
+    const yMax = Math.max(containerHeight - marginTop - marginBottom, 5);
+    const xScale = scaleTime()
+        .domain([addHours(now, -12), addHours(now, 8)])
+        .range([0, xMax]);
+    const yScale = scaleBand().domain(Array.from(stats)).range([0, yMax]).padding(0.3);
+    const actualPlannedScale = scaleBand()
+        .domain(["actual", "planned"])
+        .range([0, yScale.bandwidth()])
+        .padding(0.1);
+    return { xScale, yScale, actualPlannedScale, marginLeft };
+}
+function AxisAndGrid({ xScale, yScale }) {
+    return (_jsxs(_Fragment, { children: [_jsx(AxisBottom, { scale: xScale, top: yScale.range()[1] }), _jsx(AxisLeft, { scale: yScale, left: xScale.range()[0], fontSize: stationFontSize }), _jsx(GridCols, { scale: xScale, height: yScale.range()[1] - yScale.range()[0] })] }));
+}
+function RecentSeries({ cycles, xScale, yScale, actualPlannedScale, hideTooltipRef, }) {
+    const actualOffset = actualPlannedScale("actual") ?? 0;
+    const setTooltip = useSetAtom(tooltipData);
+    function showTooltip(c) {
+        return (e) => {
+            const pt = localPoint(e);
+            if (!pt)
+                return;
+            if (hideTooltipRef.current !== null) {
+                clearTimeout(hideTooltipRef.current);
+                hideTooltipRef.current = null;
+            }
+            setTooltip({
+                left: pt.x,
+                top: pt.y,
+                data: { kind: "actual", cycle: c },
+            });
+        };
+    }
+    const hideTooltip = useCallback(() => {
+        hideTooltipRef.current = setTimeout(() => {
+            setTooltip(null);
+        }, 300);
+    }, [hideTooltipRef, setTooltip]);
+    return (_jsx("g", { children: cycles.map((c, i) => {
+            if (c.endActive && c.endActive < c.endOccupied) {
+                return (_jsxs("g", { onMouseOver: showTooltip(c), onMouseLeave: hideTooltip, children: [_jsx("rect", { x: xScale(c.startTime), y: (yScale(c.station) ?? 0) + actualOffset, width: xScale(c.endOccupied) - xScale(c.startTime), height: actualPlannedScale.bandwidth(), fill: activeColor }), _jsx("rect", { x: xScale(c.endActive), y: (yScale(c.station) ?? 0) + actualOffset + actualPlannedScale.bandwidth() / 10, width: xScale(c.endOccupied) - xScale(c.endActive), height: (actualPlannedScale.bandwidth() * 8) / 10, fill: c.outlier ? occupiedOutlierColor : occupiedNonOutlierColor })] }, i));
+            }
+            else {
+                // no active time known, so just assume whole thing is ok.
+                return (_jsx("g", { onMouseOver: showTooltip(c), onMouseLeave: hideTooltip, children: _jsx("rect", { x: xScale(c.startTime), y: (yScale(c.station) ?? 0) + actualOffset, width: xScale(c.endOccupied) - xScale(c.startTime), height: actualPlannedScale.bandwidth(), fill: activeColor }) }, i));
+            }
+        }) }));
+}
+function halfCirclePath(x, y, rx, ry) {
+    return `M ${x} ${y} A ${rx} ${ry} 0 0 1 ${x} ${y + ry}`;
+}
+function CurrentSeries({ now, cycles, xScale, yScale, actualPlannedScale, hideTooltipRef, }) {
+    const actualOffset = actualPlannedScale("actual") ?? 0;
+    const setTooltip = useSetAtom(tooltipData);
+    function showTooltip(c) {
+        return (e) => {
+            const pt = localPoint(e);
+            if (!pt)
+                return;
+            if (hideTooltipRef.current !== null) {
+                clearTimeout(hideTooltipRef.current);
+                hideTooltipRef.current = null;
+            }
+            setTooltip({
+                left: pt.x,
+                top: pt.y,
+                data: { kind: "current", cycle: c, now },
+            });
+        };
+    }
+    const hideTooltip = useCallback(() => {
+        hideTooltipRef.current = setTimeout(() => {
+            setTooltip(null);
+        }, 300);
+    }, [hideTooltipRef, setTooltip]);
+    return (_jsx("g", { children: cycles.map((c, i) => {
+            return (_jsxs("g", { onMouseOver: showTooltip(c), onMouseLeave: hideTooltip, children: [_jsx("rect", { x: xScale(c.start), y: (yScale(c.station) ?? 0) + actualOffset, width: xScale(now) - xScale(c.start), height: actualPlannedScale.bandwidth(), fill: activeColor }), c.expectedEnd < now ? (_jsxs(_Fragment, { children: [_jsx("rect", { x: xScale(c.expectedEnd), y: (yScale(c.station) ?? 0) + actualOffset + actualPlannedScale.bandwidth() / 10, width: xScale(now) - xScale(c.expectedEnd), height: (actualPlannedScale.bandwidth() * 8) / 10, fill: c.isOutlier ? occupiedOutlierColor : occupiedNonOutlierColor }), _jsx("path", { d: halfCirclePath(xScale(now), (yScale(c.station) ?? 0) + actualOffset, 80, // rx
+                                actualPlannedScale.bandwidth()), fill: projectedColor })] })) : (_jsx("rect", { x: xScale(now), y: (yScale(c.station) ?? 0) + actualOffset, width: xScale(c.expectedEnd) - xScale(now), height: actualPlannedScale.bandwidth(), fill: projectedColor }))] }, i));
+        }) }));
+}
+function SimSeries({ sim, xScale, yScale, actualPlannedScale, hideTooltipRef, }) {
+    const plannedOffset = actualPlannedScale("planned") ?? 0;
+    const setTooltip = useSetAtom(tooltipData);
+    function showTooltip(c) {
+        return (e) => {
+            const pt = localPoint(e);
+            if (!pt)
+                return;
+            if (hideTooltipRef.current !== null) {
+                clearTimeout(hideTooltipRef.current);
+                hideTooltipRef.current = null;
+            }
+            setTooltip({
+                left: pt.x,
+                top: pt.y,
+                data: { kind: "sim", cycle: c },
+            });
+        };
+    }
+    const hideTooltip = useCallback(() => {
+        hideTooltipRef.current = setTimeout(() => {
+            setTooltip(null);
+        }, 300);
+    }, [hideTooltipRef, setTooltip]);
+    return (_jsx("g", { children: sim.map((c, i) => (_jsx("g", { onMouseOver: showTooltip(c), onMouseLeave: hideTooltip, children: _jsx("rect", { x: xScale(c.start), y: (yScale(c.station) ?? 0) + plannedOffset, width: xScale(c.end) - xScale(c.start), height: actualPlannedScale.bandwidth(), fill: c.plannedDown ? downtimeColor : simColor }) }, i))) }));
+}
+function RecentTooltip({ tooltip }) {
+    return (_jsx(Stack, { children: tooltip.data.kind === "actual" ? (_jsxs(_Fragment, { children: [tooltip.data.cycle.outlier ? (_jsxs("div", { children: ["Outlier Cycle for ", tooltip.data.cycle.station] })) : (_jsx("div", { children: tooltip.data.cycle.station })), _jsxs("div", { children: ["Start: ", tooltip.data.cycle.startTime.toLocaleString()] }), _jsxs("div", { children: ["End: ", tooltip.data.cycle.endOccupied.toLocaleString()] }), tooltip.data.cycle.endActive !== undefined ? (_jsxs("div", { children: ["Active Minutes:", " ", differenceInMinutes(tooltip.data.cycle.endActive, tooltip.data.cycle.startTime)] })) : undefined, _jsxs("div", { children: ["Occupied Minutes:", " ", differenceInMinutes(tooltip.data.cycle.endOccupied, tooltip.data.cycle.startTime)] }), tooltip.data.cycle.parts.map((p, idx) => (_jsxs("div", { children: ["Part: ", p.part, " ", p.oper] }, idx)))] })) : tooltip.data.kind === "sim" ? (_jsxs(_Fragment, { children: [_jsxs("div", { children: ["Simulation of ", tooltip.data.cycle.station] }), tooltip.data.cycle.parts.map((p, idx) => (_jsxs("div", { children: ["Part: ", p] }, idx))), _jsxs("div", { children: ["Predicted Start: ", tooltip.data.cycle.start.toLocaleString()] }), _jsxs("div", { children: ["Predicted End: ", tooltip.data.cycle.end.toLocaleString()] }), tooltip.data.cycle.plannedDown ? _jsx("div", { children: "Planned Downtime" }) : undefined] })) : (_jsxs(_Fragment, { children: [tooltip.data.cycle.isOutlier ? (_jsxs("div", { children: ["Current Outlier Cycle for ", tooltip.data.cycle.station] })) : (_jsxs("div", { children: ["Current ", tooltip.data.cycle.station] })), _jsxs("div", { children: ["Start: ", tooltip.data.cycle.start.toLocaleString()] }), _jsxs("div", { children: ["Expected End: ", tooltip.data.cycle.expectedEnd.toLocaleString()] }), tooltip.data.cycle.expectedEnd < tooltip.data.now ? (_jsxs("div", { children: ["Cycle Exceeding Expected By", " ", differenceInMinutes(tooltip.data.now, tooltip.data.cycle.expectedEnd), " Minutes"] })) : (_jsxs("div", { children: ["Expected Remaining Minutes:", " ", differenceInMinutes(tooltip.data.cycle.expectedEnd, tooltip.data.now)] })), _jsxs("div", { children: ["Occupied Minutes: ", differenceInMinutes(tooltip.data.now, tooltip.data.cycle.start)] }), tooltip.data.cycle.parts.map((p, idx) => (_jsxs("div", { children: ["Part: ", p.part, " ", p.oper] }, idx)))] })) }));
+}
+function NowLine({ now, xScale, yScale }) {
+    const x = xScale(now);
+    const fontSize = 11;
+    return (_jsxs("g", { children: [_jsx("line", { x1: x, x2: x, y1: yScale.range()[0], y2: yScale.range()[1] + 8, stroke: "black" }), _jsx("text", { x: x, y: yScale.range()[1] + 8 + fontSize, textAnchor: "middle", fontSize: fontSize, children: "Now" })] }));
+}
+export function RecentCycleChart({ height, width }) {
+    const last30Cycles = useAtomValue(last30StationCycles);
+    const estimated = useAtomValue(last30EstimatedCycleTimes);
+    const sim = useSimCycles();
+    const currentSt = useAtomValue(currentStatus);
+    const cycles = useMemo(() => {
+        const cutoff = addHours(new Date(), -12);
+        return recentCycles(last30Cycles.valuesToLazySeq().filter((e) => e.endTime >= cutoff));
+    }, [last30Cycles]);
+    const current = useMemo(() => {
+        return currentCycles(currentSt, estimated);
+    }, [currentSt, estimated]);
+    // ensure a re-render at least every 5 minutes, but reset the timer if the data changes
+    const now = new Date();
+    const [, forceRerender] = useState(0);
+    const refreshRef = useRef(null);
+    useEffect(() => {
+        if (refreshRef.current !== null)
+            clearTimeout(refreshRef.current);
+        refreshRef.current = setTimeout(() => {
+            forceRerender((x) => x + 1);
+        }, 5 * 60 * 1000);
+    });
+    const { xScale, yScale, actualPlannedScale, marginLeft } = useScales(cycles, current, now, width, height);
+    const hideTooltipRef = useRef(null);
+    if (height <= 0 || width <= 0)
+        return null;
+    return (_jsxs("div", { style: { position: "relative", overflow: "hidden" }, children: [_jsx("svg", { height: height, width: width, children: _jsxs("g", { transform: `translate(${marginLeft}, ${marginTop})`, children: [_jsx("clipPath", { id: "recent-cycle-clip-body", children: _jsx("rect", { x: 0, y: 0, width: width - marginRight - marginLeft, height: height - marginBottom - marginTop }) }), _jsx(AxisAndGrid, { xScale: xScale, yScale: yScale }), _jsxs("g", { clipPath: "url(#recent-cycle-clip-body)", children: [_jsx(RecentSeries, { cycles: cycles, xScale: xScale, yScale: yScale, hideTooltipRef: hideTooltipRef, actualPlannedScale: actualPlannedScale }), _jsx(CurrentSeries, { now: now, cycles: current, xScale: xScale, yScale: yScale, hideTooltipRef: hideTooltipRef, actualPlannedScale: actualPlannedScale }), _jsx(SimSeries, { sim: sim, xScale: xScale, yScale: yScale, actualPlannedScale: actualPlannedScale, hideTooltipRef: hideTooltipRef })] }), _jsx(NowLine, { now: now, xScale: xScale, yScale: yScale })] }) }), _jsx(Tooltip, { chartHeight: height, chartWidth: width, atom: tooltipData, TooltipContent: RecentTooltip })] }));
+}

package/dist/components/operations/RecentProduction.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from "react";
+export declare function RecentProductionPage(): ReactNode;