@seedtactics/insight-client 16.4.0

package/dist/components/Navigation.js

@@ -0,0 +1,120 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/* Copyright (c) 2023, 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 { useTransition } from "react";
+import { Notifications, HelpOutline, ExitToApp } from "@mui/icons-material";
+import { Typography, Tooltip, Badge, IconButton, AppBar, Toolbar, Box, List, ListItem, ListItemIcon, ListItemButton, ListItemText, ListSubheader, Paper, Select, MenuItem, FormControl, } from "@mui/material";
+import { startOfToday, differenceInDays } from "date-fns";
+import { currentStatus } from "../cell-status/current-status";
+import { SeedtacticLogo } from "../seedtactics-logo";
+import { OperatorSelect } from "./ChooseOperator";
+import { LoadingIcon } from "./LoadingIcon";
+import { ManualSerialEntryButton } from "./ManualSerialEntry";
+import { CustomStationMonitorDialog } from "./station-monitor/CustomStationMonitorDialog";
+import { currentRoute, helpUrl } from "./routes";
+import { fmsInformation, logout } from "../network/server-settings";
+import { useAtom, useAtomValue } from "jotai";
+import { QRScanButton } from "./BarcodeScanning";
+function ShowLicense({ d }) {
+    const today = startOfToday();
+    const diff = differenceInDays(d, today);
+    if (diff > 7) {
+        return null;
+    }
+    else if (diff >= 0) {
+        return _jsxs(Typography, { variant: "subtitle1", children: ["License expires on ", d.toDateString()] });
+    }
+    else {
+        return _jsxs(Typography, { variant: "h6", children: ["License expired on ", d.toDateString()] });
+    }
+}
+function Brand() {
+    const fmsInfo = useAtomValue(fmsInformation);
+    let tooltip = "";
+    if (fmsInfo.name) {
+        tooltip = (fmsInfo.name || "") + " " + (fmsInfo.version || "");
+    }
+    else {
+        tooltip = "SeedTactic FMS Insight";
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: tooltip, children: _jsx("div", { children: _jsx(SeedtacticLogo, {}) }) }), _jsx(Typography, { variant: "h6", style: { marginLeft: "1em", marginRight: "2em" }, children: "Insight" }), fmsInfo?.licenseExpires ? _jsx(ShowLicense, { d: fmsInfo.licenseExpires }) : undefined] }));
+}
+function Alarms() {
+    const alarms = useAtomValue(currentStatus).alarms;
+    const hasAlarms = alarms && alarms.length > 0;
+    const alarmTooltip = hasAlarms ? alarms.join(". ") : "No Alarms";
+    return (_jsx(Tooltip, { title: alarmTooltip, children: _jsx(Badge, { badgeContent: hasAlarms ? alarms.length : 0, children: _jsx(Notifications, { color: hasAlarms ? "error" : undefined }) }) }));
+}
+function HelpButton() {
+    const route = useAtomValue(currentRoute);
+    return (_jsx(Tooltip, { title: "Help", children: _jsx(IconButton, { "aria-label": "Help", href: helpUrl(route), target: "_help", size: "large", children: _jsx(HelpOutline, {}) }) }));
+}
+function LogoutButton() {
+    return (_jsx(Tooltip, { title: "Logout", children: _jsx(IconButton, { "aria-label": "Logout", onClick: logout, size: "large", children: _jsx(ExitToApp, {}) }) }));
+}
+function ToolButtons({ showAlarms, showLogout, showSearch, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(LoadingIcon, {}), _jsx(CustomStationMonitorDialog, {}), showSearch ? _jsx(QRScanButton, {}) : undefined, showSearch ? _jsx(ManualSerialEntryButton, {}) : undefined, _jsx(HelpButton, {}), showLogout ? _jsx(LogoutButton, {}) : undefined, showAlarms ? _jsx(Alarms, {}) : undefined] }));
+}
+function MenuNavSelect({ menuNavs }) {
+    const fmsInfo = useAtomValue(fmsInformation);
+    const [curRoute, setCurrentRoute] = useAtom(currentRoute);
+    const [isPending, startTransition] = useTransition();
+    return (_jsx(FormControl, { size: "small", children: _jsx(Select, { value: curRoute.route, sx: { width: "16.5em" }, onChange: (e) => startTransition(() => {
+                const item = menuNavs.find((i) => "separator" in i ? false : i.route.route === e.target.value);
+                if (!item || "separator" in item)
+                    return;
+                setCurrentRoute(item.route);
+            }), renderValue: () => {
+                const item = menuNavs.find((i) => ("separator" in i ? false : i.route.route === curRoute.route));
+                if (!item || "separator" in item)
+                    return null;
+                return (_jsxs(Box, { display: "flex", alignItems: "center", children: [item.icon, _jsxs(Typography, { variant: "h6", style: { marginLeft: "1em" }, children: [typeof item.name === "string" ? item.name : item.name(fmsInfo), isPending ? "..." : ""] })] }));
+            }, children: menuNavs.map((item, idx) => "separator" in item ? (_jsx(ListSubheader, { children: item.separator }, item.separator)) : item.hidden?.(fmsInfo) ? undefined : (_jsxs(MenuItem, { value: item.route.route, children: [_jsx(ListItemIcon, { children: item.icon }), _jsx(ListItemText, { primary: typeof item.name === "string" ? item.name : item.name(fmsInfo) })] }, idx))) }) }));
+}
+export function Header({ showAlarms, showLogout, showSearch, showOperator, Nav1, Nav2, menuNavs, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(AppBar, { position: "static", sx: { display: { xs: "none", md: "block" } }, children: _jsx(Toolbar, { children: _jsxs(Box, { display: "grid", gridTemplateColumns: Nav2 ? "1fr auto 1fr" : "minmax(200px, 1fr) auto", width: "100vw", gridTemplateAreas: Nav2 ? '"nav navCenter tools"' : '"nav tools"', children: [_jsxs(Box, { gridArea: "nav", display: "flex", alignItems: "center", children: [_jsx(Brand, {}), Nav1 ? _jsx(Nav1, {}) : undefined] }), Nav2 ? (_jsx(Box, { gridArea: "navCenter", children: _jsx(Nav2, {}) })) : undefined, _jsxs(Box, { gridArea: "tools", display: "flex", alignItems: "center", justifyContent: "flex-end", children: [showOperator ? _jsx(OperatorSelect, {}) : undefined, _jsx(ToolButtons, { showAlarms, showLogout, showSearch })] })] }) }) }), _jsxs(AppBar, { position: "static", sx: { display: { xs: "block", md: "none" } }, children: [_jsxs(Toolbar, { children: [_jsx(Brand, {}), _jsx("div", { style: { flexGrow: 1 } }), _jsx(ToolButtons, { showAlarms, showLogout, showSearch })] }), _jsxs(Box, { display: "grid", gridTemplateColumns: "minmax(200px, 1fr) auto", children: [_jsx(Box, { gridColumn: "1", children: Nav1 ? _jsx(Nav1, {}) : undefined }), _jsx(Box, { gridColumn: "2", children: Nav2 ? _jsx(Nav2, {}) : undefined })] })] }), menuNavs && menuNavs.length > 0 ? (_jsx(Paper, { elevation: 4, square: true, component: "nav", sx: { display: { xs: "block", xl: "none" }, padding: "2px" }, children: _jsx(MenuNavSelect, { menuNavs: menuNavs }) })) : undefined] }));
+}
+export function SideMenu({ menuItems }) {
+    const fmsInfo = useAtomValue(fmsInformation);
+    const [curRoute, setCurrentRoute] = useAtom(currentRoute);
+    const [isPending, startTransition] = useTransition();
+    if (!menuItems || menuItems.length === 0) {
+        return null;
+    }
+    return (_jsx(Paper, { elevation: 3, square: true, sx: {
+            flexShrink: 0,
+            display: { xs: "none", xl: "block" },
+            minHeight: "calc(100vh - 64px)",
+            zIndex: 1,
+        }, children: _jsx(List, { dense: true, children: menuItems?.map((item, idx) => "separator" in item ? (_jsx(ListSubheader, { children: item.separator }, item.separator)) : item.hidden?.(fmsInfo) ? undefined : (_jsx(ListItem, { children: _jsxs(ListItemButton, { selected: curRoute.route === item.route.route, onClick: () => startTransition(() => setCurrentRoute(item.route)), children: [_jsx(ListItemIcon, { children: item.icon }), _jsx(ListItemText, { primary: typeof item.name === "string" ? item.name : item.name(fmsInfo), sx: isPending ? (theme) => ({ color: theme.palette.grey[700] }) : undefined })] }) }, idx))) }) }));
+}

package/dist/components/VerboseLogging.d.ts

@@ -0,0 +1 @@
+export declare function VerboseLoggingPage(): import("react/jsx-runtime").JSX.Element;

package/dist/components/VerboseLogging.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Copyright (c) 2023, 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 { Button } from "@mui/material";
+import { useState } from "react";
+import { FmsServerBackend } from "../network/backend.js";
+export function VerboseLoggingPage() {
+    const [enabled, setEnabled] = useState(false);
+    function enable() {
+        setEnabled(true);
+        void FmsServerBackend.enableVerboseLoggingForFiveMinutes();
+        setTimeout(() => setEnabled(false), 5 * 60 * 1000);
+    }
+    return (_jsx("main", { style: { marginTop: "4em" }, children: _jsxs("div", { style: { maxWidth: "50em", marginLeft: "auto", marginRight: "auto", textAlign: "center" }, children: [_jsx("p", { style: {
+                        marginBottom: "1em",
+                    }, children: "Verbose logging generates a large amount of additional data in the FMS Insight Server debug log file." }), _jsx(Button, { disabled: enabled, onClick: enable, variant: "contained", children: enabled ? (_jsx("span", { children: "Verbose Logging is Enabled" })) : (_jsx("span", { children: "Enable Verbose Logging For 5 minutes" })) })] }) }));
+}

package/dist/components/analysis/AnalysisSelectToolbar.d.ts

@@ -0,0 +1 @@
+export declare const AnalysisSelectToolbar: import("react").NamedExoticComponent<object>;

package/dist/components/analysis/AnalysisSelectToolbar.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Copyright (c) 2018, 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 { memo } from "react";
+import { Radio, Stack } from "@mui/material";
+import { FormControlLabel } from "@mui/material";
+import MonthSelect from "../MonthSelect.js";
+import { selectedAnalysisPeriod, selectedMonth, useSetSpecificMonthWithoutLoading, useSetLast30, } from "../../network/load-specific-month.js";
+import { useAtom, useAtomValue } from "jotai";
+export const AnalysisSelectToolbar = memo(function AnalysisSelectToolbar() {
+    const period = useAtomValue(selectedAnalysisPeriod);
+    const [selMonth, analyzeMonth] = useAtom(selectedMonth);
+    const setMonthWithoutLoading = useSetSpecificMonthWithoutLoading();
+    const setLast30 = useSetLast30();
+    return (_jsxs(Stack, { component: "nav", direction: "row", spacing: 3, paddingLeft: "24px", paddingRight: "24px", alignItems: "center", children: [_jsx(FormControlLabel, { control: _jsx(Radio, { checked: period.type === "Last30", color: "secondary", onChange: (e, checked) => (checked ? setLast30() : null) }), label: "Last 30 days" }), _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [_jsx(FormControlLabel, { control: _jsx(Radio, { checked: period.type === "SpecificMonth", color: "secondary", onChange: (e, checked) => (checked ? analyzeMonth(selMonth) : null) }), label: "Select Month" }), _jsx(MonthSelect, { curMonth: selMonth, onSelectMonth: (m) => {
+                            if (period.type === "SpecificMonth") {
+                                // if month type is selected, reload data
+                                analyzeMonth(m);
+                            }
+                            else {
+                                // otherwise, just store month
+                                setMonthWithoutLoading(m);
+                            }
+                        } })] })] }));
+});

package/dist/components/analysis/BufferChart.d.ts

@@ -0,0 +1 @@
+export declare function BufferOccupancyChart(): import("react/jsx-runtime").JSX.Element;

package/dist/components/analysis/BufferChart.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Copyright (c) 2025, 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 { memo, useState, useMemo, useRef, useCallback } from "react";
+import { addDays, startOfToday, addMonths } from "date-fns";
+import { curveCatmullRom, line } from "d3-shape";
+import { buildBufferChart } from "../../data/results.bufferchart.js";
+import { seriesColor } from "../../util/chart-colors.js";
+import { rawMaterialQueues } from "../../cell-status/names.js";
+import { selectedAnalysisPeriod } from "../../network/load-specific-month.js";
+import { last30BufferEntries, specificMonthBufferEntries } from "../../cell-status/buffers.js";
+import { Box, ToggleButton, Slider, Typography, debounce } from "@mui/material";
+import { useSetTitle } from "../routes.js";
+import { useAtomValue } from "jotai";
+import { HashSet, LazySeq } from "@seedtactics/immutable-collections";
+import { scaleLinear, scaleTime } from "d3-scale";
+import { AxisBottom, AxisLeft, ChartGrid } from "../AxisAndGrid.js";
+import { useResizeDetector } from "react-resize-detector";
+import { animated, useSpring } from "@react-spring/web";
+import { interpolatePath } from "d3-interpolate-path";
+const AnimatedPath = memo(function AnimatedPath({ series, xScale, yScale, color, }) {
+    const d = line()
+        .curve(curveCatmullRom)
+        .x((p) => xScale(p.x))
+        .y((p) => yScale(p.y))(series.points) ?? "";
+    // don't update in quick succession
+    const previous = useRef(d);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const setPrevious = useCallback(debounce((val) => {
+        previous.current = val;
+    }, 50), []);
+    const interpolate = interpolatePath(previous.current, d);
+    setPrevious(d);
+    const { t } = useSpring({
+        from: { t: 0 },
+        to: { t: 1 },
+        reset: true,
+        delay: 0,
+    });
+    return (_jsx(animated.path, { d: t.to(interpolate), stroke: color, strokeWidth: 2, strokeLinecap: "round", fill: "transparent" }));
+});
+const marginLeft = 60;
+const marginBottom = 50;
+const marginTop = 20;
+const marginRight = 20;
+function BufferChartSVG({ width, height, series, disabled, }) {
+    const [dateMin, dateMax] = useMemo(() => {
+        let min = null;
+        let max = null;
+        for (const s of series) {
+            for (const p of s.points) {
+                if (min === null || p.x < min) {
+                    min = p.x;
+                }
+                if (max === null || p.x > max) {
+                    max = p.x;
+                }
+            }
+        }
+        return [min ?? new Date(), max ?? new Date()];
+    }, [series]);
+    const xScale = useMemo(() => scaleTime()
+        .range([0, width - marginLeft - marginRight])
+        .domain([dateMin, dateMax]), [width, dateMin, dateMax]);
+    const yMax = height - marginBottom - marginTop;
+    const yScale = useMemo(() => scaleLinear()
+        .domain([
+        0,
+        LazySeq.of(series)
+            .flatMap((s) => s.points)
+            .map((p) => p.y)
+            .maxBy((y) => y) ?? 1,
+    ])
+        .range([yMax, 0]), [series, yMax]);
+    return (_jsx("svg", { width: width, height: height, children: _jsxs("g", { transform: `translate(${marginLeft},${marginTop})`, children: [_jsx(AxisBottom, { scale: xScale, top: yMax }), _jsx(AxisLeft, { scale: yScale, left: 0, label: "Buffer Size" }), _jsx(ChartGrid, { xScale: xScale, yScale: yScale, width: width - marginLeft - marginRight, height: yMax }), series.map((s, idx) => disabled.has(s.label) ? undefined : (_jsx(AnimatedPath, { series: s, xScale: xScale, yScale: yScale, color: seriesColor(idx, series.length) }, s.label)))] }) }));
+}
+const BufferChart = memo(function BufferChart(props) {
+    const period = useAtomValue(selectedAnalysisPeriod);
+    const defaultDateRange = period.type === "Last30"
+        ? [addDays(startOfToday(), -29), addDays(startOfToday(), 1)]
+        : [period.month, addMonths(period.month, 1)];
+    const entries = useAtomValue(period.type === "Last30" ? last30BufferEntries : specificMonthBufferEntries);
+    const rawMatQueues = useAtomValue(rawMaterialQueues);
+    const [disabledBuffers, setDisabledBuffers] = useState(HashSet.empty());
+    const defaultDateRangeStart = defaultDateRange[0];
+    const defaultDateRangeEnd = defaultDateRange[1];
+    const series = useMemo(() => buildBufferChart(defaultDateRangeStart, defaultDateRangeEnd, props.movingAverageDistanceInHours, rawMatQueues, entries.valuesToLazySeq()), [defaultDateRangeStart, defaultDateRangeEnd, entries, props.movingAverageDistanceInHours, rawMatQueues]);
+    const { width, height, ref: chartRef, } = useResizeDetector({
+        refreshMode: "debounce",
+        refreshRate: 100,
+    });
+    return (_jsxs("div", { children: [_jsx(Box, { ref: chartRef, sx: {
+                    height: { xs: "calc(100vh - 350px)", md: "calc(100vh - 285px)", xl: "calc(100vh - 220px)" },
+                    overflow: "hidden",
+                }, children: width && height && width > 0 && height > 0 && (_jsx(BufferChartSVG, { width: width, height: height, series: series, disabled: disabledBuffers })) }), _jsx("div", { style: { marginTop: "1em", display: "flex", flexWrap: "wrap", justifyContent: "space-around" }, children: series.map((s, idx) => (_jsx(ToggleButton, { selected: !disabledBuffers.has(s.label), value: s.label, onChange: () => setDisabledBuffers((db) => (db.has(s.label) ? db.delete(s.label) : db.add(s.label))), children: _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [_jsx("div", { style: { width: "14px", height: "14px", backgroundColor: seriesColor(idx, series.length) } }), _jsx("div", { style: { marginLeft: "1em" }, children: s.label })] }) }, s.label))) })] }));
+});
+// https://github.com/mui-org/material-ui/issues/20191
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const SliderAny = Slider;
+export function BufferOccupancyChart() {
+    useSetTitle("Buffer Occupancy");
+    const [movingAverageHours, setMovingAverage] = useState(12);
+    return (_jsxs(Box, { 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: "Average material occupancy of rotary tables and stocker positions over time" }), _jsx(Box, { flexGrow: 1 }), _jsx("span", { style: { fontSize: "small", marginRight: "1em" }, children: "Moving Average Window: " }), _jsx(SliderAny, { style: { width: "10em" }, min: 1, max: 36, steps: 0.2, valueLabelDisplay: "off", value: movingAverageHours, onChange: (e, v) => setMovingAverage(v) })] }), _jsx("main", { children: _jsx(BufferChart, { movingAverageDistanceInHours: movingAverageHours }) })] }));
+}

package/dist/components/analysis/CostPerPiece.d.ts

@@ -0,0 +1,2 @@
+export declare function CostBreakdownPage(): import("react/jsx-runtime").JSX.Element;
+export declare const CostPerPiecePage: import("react").NamedExoticComponent<object>;

package/dist/components/analysis/CostPerPiece.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* Copyright (c) 2021, 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 { useState, memo } from "react";
+import { Box, Stack } from "@mui/material";
+import { Table } from "@mui/material";
+import { TableBody } from "@mui/material";
+import { TableCell } from "@mui/material";
+import { TableHead } from "@mui/material";
+import { TableRow } from "@mui/material";
+import { TextField } from "@mui/material";
+import { ImportExport } from "@mui/icons-material";
+import { selectedAnalysisPeriod } from "../../network/load-specific-month.js";
+import { LazySeq } from "@seedtactics/immutable-collections";
+import { copyCostPerPieceToClipboard, copyCostBreakdownToClipboard, compute_monthly_cost_percentages, convert_cost_percent_to_cost_per_piece, } from "../../data/cost-per-piece.js";
+import { startOfToday, addDays } from "date-fns";
+import { Tooltip } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { PartIdenticon } from "../station-monitor/Material.js";
+import { Typography } from "@mui/material";
+import { last30MaterialSummary, specificMonthMaterialSummary } from "../../cell-status/material-summary.js";
+import { last30StationCycles, specificMonthStationCycles } from "../../cell-status/station-cycles.js";
+import { useSetTitle } from "../routes.js";
+import { atom, useAtom, useAtomValue } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { last30Jobs, specificMonthJobs } from "../../cell-status/scheduled-jobs.js";
+import { durationToSeconds } from "../../util/parseISODuration.js";
+import { atomFamily } from "jotai-family";
+const machineCostPerYear = atomWithStorage("MachineCostPerYear", {});
+const automationCostPerYear = atomWithStorage("AutomationCostPerYear", null);
+const last30LaborCost = atomWithStorage("Last30LaborCost", null);
+const perMonthLaborCost = atomFamily((month) => atomWithStorage("PerMonthLabor-" + month.getFullYear().toString() + "-" + month.getMonth().toString(), null));
+const artifactParts = atom((get) => {
+    const period = get(selectedAnalysisPeriod);
+    const jobs = get(period.type === "Last30" ? last30Jobs : specificMonthJobs);
+    return jobs
+        .valuesToLazySeq()
+        .filter((j) => j.procsAndPaths.length === 1 &&
+        j.procsAndPaths[0].paths.length === 1 &&
+        j.procsAndPaths[0].paths[0].stops.length === 1 &&
+        durationToSeconds(j.procsAndPaths[0].paths[0].stops[0].expectedCycleTime) === 0)
+        .toHashSet((j) => j.partName);
+});
+const costPercentages = atom((get) => {
+    const period = get(selectedAnalysisPeriod);
+    const cycles = get(period.type === "Last30" ? last30StationCycles : specificMonthStationCycles);
+    const matIds = get(period.type === "Last30" ? last30MaterialSummary : specificMonthMaterialSummary);
+    const artifacts = get(artifactParts);
+    const thirtyDaysAgo = addDays(startOfToday(), -30);
+    const month = period.type === "Last30" ? null : period.month;
+    return compute_monthly_cost_percentages(cycles.valuesToLazySeq(), artifacts, matIds.matsById, month ? { month: month } : { thirtyDaysAgo });
+});
+const computedCosts = atom((get) => {
+    const period = get(selectedAnalysisPeriod);
+    const machineCosts = get(machineCostPerYear);
+    const automationCosts = get(automationCostPerYear);
+    const laborCosts = get(period.type === "Last30" ? last30LaborCost : perMonthLaborCost(period.month));
+    const costPcts = get(costPercentages);
+    return convert_cost_percent_to_cost_per_piece(costPcts, machineCosts, automationCosts, laborCosts ?? 0);
+});
+function AutomationCostInput() {
+    const [cost, setCost] = useState(null);
+    const [automationCost, saveAutomationCostPerYear] = useAtom(automationCostPerYear);
+    return (_jsx(TextField, { id: "auotmation-cost-year", type: "number", label: "Cost for automated handling system per year", style: { marginTop: "1.5em" }, inputProps: { min: 0 }, variant: "outlined", value: cost === null ? (automationCost ?? "") : isNaN(cost) ? "" : cost, onChange: (e) => setCost(parseFloat(e.target.value)), onBlur: () => {
+            if (cost != null) {
+                const newCost = isNaN(cost) ? null : cost;
+                saveAutomationCostPerYear(newCost);
+            }
+            setCost(null);
+        } }));
+}
+function LaborCost() {
+    const period = useAtomValue(selectedAnalysisPeriod);
+    const month = period.type === "Last30" ? null : period.month;
+    const [cost, setCost] = useState(null);
+    const [laborCost, saveCost] = useAtom(month === null ? last30LaborCost : perMonthLaborCost(month));
+    return (_jsx(TextField, { type: "number", label: "Total labor cost for " +
+            (month === null
+                ? "last 30 days"
+                : month.toLocaleDateString(undefined, { month: "long", year: "numeric" })), inputProps: { min: 0 }, variant: "outlined", value: cost === null ? (laborCost ?? "") : isNaN(cost) ? "" : cost, onChange: (e) => setCost(parseFloat(e.target.value)), onBlur: () => {
+            if (cost != null) {
+                const newCost = isNaN(cost) ? null : cost;
+                saveCost(newCost);
+            }
+            setCost(null);
+        } }));
+}
+function SingleStationCostInput(props) {
+    const [cost, setCost] = useState(null);
+    const [machineCost, saveCost] = useAtom(machineCostPerYear);
+    return (_jsx(TextField, { type: "number", inputProps: { min: 0 }, variant: "outlined", label: "Cost for " + props.machineGroup + " per station per year", style: { marginTop: "1.5em" }, value: cost === null ? (machineCost[props.machineGroup] ?? "") : isNaN(cost) ? "" : cost, onChange: (e) => setCost(parseFloat(e.target.value)), onBlur: () => {
+            if (cost != null) {
+                const newCost = { ...machineCost };
+                if (isNaN(cost)) {
+                    delete newCost[props.machineGroup];
+                }
+                else {
+                    newCost[props.machineGroup] = cost;
+                }
+                saveCost(newCost);
+            }
+            setCost(null);
+        } }));
+}
+function StationCostInputs() {
+    const costs = useAtomValue(computedCosts);
+    return (_jsx(_Fragment, { children: costs.machineQuantities.keysToAscLazySeq().map((s, idx) => (_jsx(SingleStationCostInput, { machineQuantities: costs.machineQuantities, machineGroup: s }, idx))) }));
+}
+const decimalFormat = Intl.NumberFormat(undefined, {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+});
+const pctFormat = new Intl.NumberFormat(undefined, {
+    style: "percent",
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+});
+export function CostBreakdownPage() {
+    useSetTitle("Cost Percentages");
+    const costs = useAtomValue(costPercentages);
+    return (_jsxs(Box, { 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: "Part Cost Percentage Breakdown" }), _jsx(Box, { flexGrow: 1 }), _jsx(Tooltip, { title: "Copy to Clipboard", children: _jsx(IconButton, { style: { height: "25px", paddingTop: 0, paddingBottom: 0 }, onClick: () => copyCostBreakdownToClipboard(costs), size: "large", children: _jsx(ImportExport, {}) }) })] }), _jsx("main", { children: _jsxs(Table, { stickyHeader: true, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Part" }), _jsx(TableCell, { align: "right", children: "Completed Quantity" }), costs.machineQuantities.keysToAscLazySeq().map((m) => (_jsxs(TableCell, { align: "right", children: [m, " Cost %"] }, m))), _jsx(TableCell, { align: "right", children: "Labor Cost %" }), _jsx(TableCell, { align: "right", children: "Automation Cost %" })] }) }), _jsx(TableBody, { children: LazySeq.of(costs.parts)
+                                .sortBy((c) => c.part)
+                                .map((c, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs(Box, { sx: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                            }, children: [_jsx(Box, { sx: { mr: "0.2em" }, children: _jsx(PartIdenticon, { part: c.part, size: 25 }) }), _jsx("div", { children: _jsx(Typography, { variant: "body2", component: "span", display: "block", children: c.part }) })] }) }), _jsx(TableCell, { align: "right", children: c.parts_completed }), costs.machineQuantities.keysToAscLazySeq().map((m) => (_jsx(TableCell, { align: "right", children: pctFormat.format(c.machine.get(m) ?? 0) }, m))), _jsx(TableCell, { align: "right", children: pctFormat.format(c.labor) }), _jsx(TableCell, { align: "right", children: pctFormat.format(c.automation) })] }, idx))) })] }) })] }));
+}
+function CostOutputCard() {
+    const costs = useAtomValue(computedCosts);
+    return (_jsxs(Table, { stickyHeader: true, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Part" }), _jsx(TableCell, { align: "right", children: "Completed Quantity" }), costs.machineQuantities.keysToAscLazySeq().map((m) => (_jsxs(TableCell, { align: "right", children: [m, " Cost"] }, m))), _jsx(TableCell, { align: "right", children: "Labor Cost" }), _jsx(TableCell, { align: "right", children: "Automation Cost" }), _jsxs(TableCell, { align: "right", children: [_jsx("span", { children: "Total" }), _jsx(Tooltip, { title: "Copy to Clipboard", children: _jsx(IconButton, { style: { height: "25px", paddingTop: 0, paddingBottom: 0 }, onClick: () => copyCostPerPieceToClipboard(costs), size: "large", children: _jsx(ImportExport, {}) }) })] })] }) }), _jsx(TableBody, { children: LazySeq.of(costs.parts)
+                    .sortBy((c) => c.part)
+                    .map((c, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs(Box, { sx: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                }, children: [_jsx(Box, { sx: { mr: "0.2em" }, children: _jsx(PartIdenticon, { part: c.part, size: 25 }) }), _jsx("div", { children: _jsx(Typography, { variant: "body2", component: "span", display: "block", children: c.part }) })] }) }), _jsx(TableCell, { align: "right", children: c.parts_completed }), costs.machineQuantities.keysToAscLazySeq().map((m) => (_jsx(TableCell, { align: "right", children: decimalFormat.format(c.machine.get(m) ?? 0) }, m))), _jsx(TableCell, { align: "right", children: decimalFormat.format(c.labor) }), _jsx(TableCell, { align: "right", children: decimalFormat.format(c.automation) }), _jsx(TableCell, { align: "right", children: decimalFormat.format(c.machine.valuesToAscLazySeq().sumBy((x) => x) + c.labor + c.automation) })] }, idx))) })] }));
+}
+export const CostPerPiecePage = memo(function CostPerPiecePage() {
+    useSetTitle("Cost Per Piece");
+    return (_jsx(Box, { component: "main", paddingLeft: "24px", paddingRight: "24px", paddingTop: "20px", children: _jsxs(Stack, { direction: "column", spacing: 4, children: [_jsxs(Stack, { direction: "column", spacing: 2, children: [_jsx(LaborCost, {}), _jsx(AutomationCostInput, {}), _jsx(StationCostInputs, {})] }), _jsx(CostOutputCard, {})] }) }));
+});

package/dist/components/analysis/CycleChart.d.ts

@@ -0,0 +1,42 @@
+import { SetStateAction } from "react";
+import { StatisticalCycleTime } from "../../cell-status/estimated-cycle-times.js";
+export interface CycleChartPoint {
+    readonly cntr: number;
+    readonly x: Date;
+    readonly y: number;
+}
+export interface ExtraTooltip {
+    title: string;
+    value: string;
+    link?: () => void;
+}
+export interface DataToPlotProps {
+    readonly points: ReadonlyMap<string, ReadonlyArray<CycleChartPoint>>;
+    readonly stats?: StatisticalCycleTime;
+    readonly partCntPerPoint?: number;
+    readonly plannedTimeMinutes?: number;
+}
+export interface ScaleZoomProps {
+    readonly default_date_range: Date[];
+    readonly current_date_zoom: {
+        start: Date;
+        end: Date;
+    } | undefined;
+    readonly set_date_zoom_range: ((p: {
+        zoom?: {
+            start: Date;
+            end: Date;
+        };
+    }) => void) | undefined;
+    readonly yZoom: YZoomRange | null;
+    readonly setYZoom: (a: SetStateAction<YZoomRange | null>) => void;
+}
+export type CycleChartProps = DataToPlotProps & ScaleZoomProps & {
+    readonly series_label: string;
+    readonly extra_tooltip?: (point: CycleChartPoint) => ReadonlyArray<ExtraTooltip>;
+};
+export interface YZoomRange {
+    readonly y_low: number;
+    readonly y_high: number;
+}
+export declare const CycleChart: import("react").NamedExoticComponent<CycleChartProps>;