@seedtactics/insight-client 16.4.0

package/dist/components/operations/OEEChart.js

@@ -0,0 +1,173 @@
+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, useMemo } from "react";
+import { Box, Grid, IconButton, Table, Tooltip as MuiTooltip, Select, MenuItem, Typography, FormControl, } from "@mui/material";
+import { DataTableHead, DataTableBody, useColSort } from "../analysis/DataTable.js";
+import { LazySeq } from "@seedtactics/immutable-collections";
+import { buildOeeSeries, copyOeeToClipboard, } from "../../data/results.oee.js";
+import { seriesColor } from "../../util/chart-colors.js";
+import { addDays, startOfToday } from "date-fns";
+import { last30StationCycles } from "../../cell-status/station-cycles.js";
+import { last30SimStationUse } from "../../cell-status/sim-station-use.js";
+import { ImportExport } from "@mui/icons-material";
+import { useSetTitle } from "../routes.js";
+import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { scaleBand, scaleLinear } from "d3-scale";
+import { AxisBottom, AxisLeft, GridRows } from "../AxisAndGrid.js";
+import { ChartWithTooltip } from "../ChartTooltip.js";
+import { localPoint } from "../../util/chart-helpers.js";
+const actualOeeColor = seriesColor(0, 2);
+const plannedOeeColor = seriesColor(1, 2);
+const marginLeft = 50;
+const marginBottom = 30;
+const marginTop = 10;
+const marginRight = 10;
+function BarChart({ width, height, points, setTooltip, }) {
+    const yMax = height - marginTop - marginBottom;
+    const hourScale = useMemo(() => scaleLinear().domain([0, 24]).range([yMax, 0]), [yMax]);
+    const dateScale = useMemo(() => scaleBand()
+        .domain(LazySeq.of(points)
+        .map((p) => p.x)
+        .distinct())
+        .range([0, width - marginLeft - marginRight])
+        .padding(0.1), [points, width]);
+    const actualPlanningScale = useMemo(() => scaleBand().domain(["Actual", "Planned"]).range([0, dateScale.bandwidth()]).padding(0.05), [dateScale]);
+    return (_jsx("svg", { width: width, height: height, children: _jsxs("g", { transform: `translate(${marginLeft},${marginTop})`, children: [_jsx(AxisBottom, { scale: dateScale, top: yMax }), _jsx(AxisLeft, { scale: hourScale, left: 0, label: "Hours" }), _jsx(GridRows, { scale: hourScale, width: width - marginLeft - marginRight }), points.map((p, i) => (_jsxs("g", { transform: `translate(${dateScale(p.x)},0)`, children: [_jsx("rect", { x: actualPlanningScale("Actual"), y: hourScale(p.y), width: actualPlanningScale.bandwidth(), height: yMax - hourScale(p.y), fill: actualOeeColor, onMouseEnter: (e) => {
+                                const pt = localPoint(e);
+                                setTooltip({
+                                    left: pt?.x ?? 0,
+                                    top: pt?.y ?? 0,
+                                    datum: p,
+                                });
+                            }, onMouseLeave: () => setTooltip(null) }), _jsx("rect", { x: actualPlanningScale("Planned"), y: hourScale(p.plannedHours), width: actualPlanningScale.bandwidth(), height: yMax - hourScale(p.plannedHours), fill: plannedOeeColor, onMouseEnter: (e) => {
+                                const pt = localPoint(e);
+                                setTooltip({
+                                    left: pt?.x ?? 0,
+                                    top: pt?.y ?? 0,
+                                    datum: p,
+                                });
+                            }, onMouseLeave: () => setTooltip(null) })] }, i)))] }) }));
+}
+function OEELegend({ station }) {
+    return (_jsxs("div", { style: { marginTop: "1em", display: "flex", flexWrap: "wrap", justifyContent: "space-evenly" }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [_jsx("div", { style: { width: "14px", height: "14px", backgroundColor: actualOeeColor } }), _jsxs("div", { style: { marginLeft: "1em" }, children: [station, " Actual"] })] }), _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [_jsx("div", { style: { width: "14px", height: "14px", backgroundColor: plannedOeeColor } }), _jsxs("div", { style: { marginLeft: "1em" }, children: [station, " Planned"] })] })] }));
+}
+function OEETooltip({ tooltip }) {
+    return (_jsxs("div", { children: [_jsx("div", { children: tooltip.datum.x }), _jsxs("div", { children: ["Actual Hours: ", tooltip.datum.y?.toFixed(1)] }), _jsxs("div", { children: ["Planned Hours: ", tooltip.datum?.plannedHours?.toFixed(1)] })] }));
+}
+function OEESeries({ series }) {
+    const tooltipAtom = useMemo(() => atom(null), []);
+    const setTooltip = useSetAtom(tooltipAtom);
+    return (_jsxs(Grid, { size: { xs: 12, md: 6 }, onMouseLeave: () => setTooltip(null), children: [_jsx(ChartWithTooltip, { sx: { height: "calc(100vh / 2 - 200px)" }, chart: ({ width, height }) => (_jsx(BarChart, { width: width, height: height, points: series.points, setTooltip: setTooltip })), tooltipAtom: tooltipAtom, TooltipContent: OEETooltip }), _jsx(OEELegend, { station: series.station })] }));
+}
+export function OEEChart({ points }) {
+    return (_jsx(Grid, { container: true, children: points.map((series, idx) => (_jsx(OEESeries, { series: series }, idx))) }));
+}
+var ColumnId;
+(function (ColumnId) {
+    ColumnId[ColumnId["Date"] = 0] = "Date";
+    ColumnId[ColumnId["Station"] = 1] = "Station";
+    ColumnId[ColumnId["ActualHours"] = 2] = "ActualHours";
+    ColumnId[ColumnId["ActualOEE"] = 3] = "ActualOEE";
+    ColumnId[ColumnId["PlannedHours"] = 4] = "PlannedHours";
+    ColumnId[ColumnId["PlannedOEE"] = 5] = "PlannedOEE";
+})(ColumnId || (ColumnId = {}));
+const columns = [
+    {
+        id: ColumnId.Date,
+        numeric: false,
+        label: "Date",
+        getDisplay: (c) => c.x,
+        getForSort: (c) => c.day.getTime(),
+    },
+    {
+        id: ColumnId.Station,
+        numeric: false,
+        label: "Station",
+        getDisplay: (c) => c.station,
+    },
+    {
+        id: ColumnId.ActualHours,
+        numeric: true,
+        label: "Actual Hours",
+        getDisplay: (c) => c.y.toFixed(1),
+        getForSort: (c) => c.y,
+    },
+    {
+        id: ColumnId.ActualOEE,
+        numeric: true,
+        label: "Actual OEE",
+        getDisplay: (c) => (c.actualOee * 100).toFixed(0) + "%",
+        getForSort: (c) => c.actualOee,
+    },
+    {
+        id: ColumnId.PlannedHours,
+        numeric: true,
+        label: "Planned Hours",
+        getDisplay: (c) => c.plannedHours.toFixed(1),
+        getForSort: (c) => c.plannedHours,
+    },
+    {
+        id: ColumnId.PlannedOEE,
+        numeric: true,
+        label: "Planned OEE",
+        getDisplay: (c) => (c.plannedOee * 100).toFixed(0) + "%",
+        getForSort: (c) => c.plannedOee,
+    },
+];
+function dataForTable(series, sortOn) {
+    return LazySeq.of(series)
+        .flatMap((e) => e.points)
+        .toSortedArray(sortOn);
+}
+export const OEETable = memo(function OEETableF({ points }) {
+    const sort = useColSort(ColumnId.Date, columns);
+    return (_jsxs(Table, { children: [_jsx(DataTableHead, { columns: columns, sort: sort, showDetailsCol: false }), _jsx(DataTableBody, { columns: columns, pageData: dataForTable(points, sort.sortOn) })] }));
+});
+const lulShowChart = atom(true);
+const mcShowChart = atom(true);
+export function StationOEEPage({ ty }) {
+    useSetTitle(ty === "labor" ? "L/U OEE" : "Machine OEE");
+    const [showChart, setShowChart] = useAtom(ty === "labor" ? lulShowChart : mcShowChart);
+    const start = addDays(startOfToday(), -6);
+    const end = addDays(startOfToday(), 1);
+    const cycles = useAtomValue(last30StationCycles);
+    const statUse = useAtomValue(last30SimStationUse);
+    const points = useMemo(() => buildOeeSeries(start, end, ty, cycles.valuesToLazySeq(), statUse), [start, end, ty, cycles, statUse]);
+    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: [_jsxs(Typography, { variant: "subtitle1", children: [ty === "labor" ? "Load/Unload" : "Machine", " OEE: comparing flexplan hours between actual and simulated production"] }), _jsx(Box, { flexGrow: 1 }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, value: showChart ? "chart" : "table", onChange: (e) => setShowChart(e.target.value === "chart"), children: [_jsx(MenuItem, { value: "chart", children: "Chart" }, "chart"), _jsx(MenuItem, { value: "table", children: "Table" }, "table")] }) }), _jsx(MuiTooltip, { title: "Copy to Clipboard", children: _jsx(IconButton, { style: { height: "25px", paddingTop: 0, paddingBottom: 0 }, onClick: () => copyOeeToClipboard(points), size: "large", children: _jsx(ImportExport, {}) }) })] }), _jsx("main", { children: showChart ? _jsx(OEEChart, { points: points }) : _jsx(OEETable, { points: points }) })] }));
+}

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

@@ -0,0 +1,4 @@
+export type OutlierType = "labor" | "machine";
+export declare function OutlierCycles({ outlierTy }: {
+    outlierTy: OutlierType;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/operations/Outliers.js

@@ -0,0 +1,69 @@
+import { jsxs as _jsxs, jsx as _jsx } 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 { useMemo } from "react";
+import { Box, Typography } from "@mui/material";
+import { addDays, startOfToday } from "date-fns";
+import { Tooltip } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { ImportExport } from "@mui/icons-material";
+import StationDataTable from "../analysis/StationDataTable.js";
+import { copyCyclesToClipboard } from "../../data/results.cycles.js";
+import { last30MaterialSummary } from "../../cell-status/material-summary.js";
+import { last30StationCycles } from "../../cell-status/station-cycles.js";
+import { useSetTitle } from "../routes.js";
+import { useAtomValue } from "jotai";
+export function OutlierCycles({ outlierTy }) {
+    useSetTitle(outlierTy === "machine" ? "Machine Outliers" : "L/U Outliers");
+    const matSummary = useAtomValue(last30MaterialSummary);
+    const today = startOfToday();
+    const allCycles = useAtomValue(last30StationCycles);
+    const points = useMemo(() => {
+        const today = startOfToday();
+        const start = addDays(today, -4);
+        const end = addDays(today, 1);
+        return {
+            seriesLabel: "Part",
+            data: allCycles
+                .valuesToLazySeq()
+                .filter((c) => c.isOutlier && c.endTime >= start && c.endTime < end && c.isLabor === (outlierTy === "labor"))
+                .toRLookup((e) => e.part + "-" + e.material[0].proc.toString()),
+        };
+    }, [outlierTy, allCycles]);
+    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: [_jsxs(Typography, { variant: "subtitle1", children: [outlierTy === "labor" ? "Load/Unload" : "Machine", " cycles from the past 5 days statistically outside expected range"] }), _jsx(Box, { flexGrow: 1 }), _jsx(Tooltip, { title: "Copy to Clipboard", children: _jsx(IconButton, { style: { height: "25px", paddingTop: 0, paddingBottom: 0 }, onClick: () => copyCyclesToClipboard(points, matSummary.matsById, undefined), size: "large", children: _jsx(ImportExport, {}) }) })] }), _jsx("main", { children: _jsx(StationDataTable, { points: points.data, matsById: matSummary.matsById, current_date_zoom: { start: addDays(today, -4), end: addDays(today, 1) }, set_date_zoom_range: undefined, period: { type: "Last30" }, showWorkorderAndInspect: false, defaultSortDesc: true }) })] }));
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/components/operations/ProgramHighlight.js

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import hljs from "highlight.js/lib/core";
+import gcode from "highlight.js/lib/languages/gcode";
+hljs.registerLanguage("gcode", gcode);
+self.onmessage = function (event) {
+    self.postMessage(hljs.highlight(event.data, { language: "gcode" }).value);
+};

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

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export declare function ProgramSummaryTable(): ReactNode;
+export declare function ProgramContentDialog(): ReactNode;
+export declare function ProgramHistoryDialog(): ReactNode;
+export declare function ProgramReportPage(): ReactNode;

package/dist/components/operations/Programs.js

@@ -0,0 +1,363 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* Copyright (c) 2020, 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, useMemo, useEffect } from "react";
+import { Box, Fab, FormControl, styled } from "@mui/material";
+import { CircularProgress } from "@mui/material";
+import { Card } from "@mui/material";
+import { CardContent } from "@mui/material";
+import TimeAgo from "react-timeago";
+import { Table } from "@mui/material";
+import { TableHead } from "@mui/material";
+import { TableCell } from "@mui/material";
+import { TableRow } from "@mui/material";
+import { TableSortLabel } from "@mui/material";
+import { Typography } from "@mui/material";
+import { Tooltip } from "@mui/material";
+import { KeyboardArrowDown as KeyboardArrowDownIcon, KeyboardArrowUp as KeyboardArrowUpIcon, FirstPage as FirstPageIcon, KeyboardArrowLeft, KeyboardArrowRight, History as HistoryIcon, Refresh as RefreshIcon, Code as CodeIcon, } from "@mui/icons-material";
+import { programReportRefreshTime, currentProgramReport, programToShowContent, programContent, programToShowHistory, programFilter, } from "../../data/tools-programs.js";
+import { TableBody } from "@mui/material";
+import { IconButton } from "@mui/material";
+import { Collapse } from "@mui/material";
+import { LazySeq } from "@seedtactics/immutable-collections";
+import { PartIdenticon } from "../station-monitor/Material.js";
+import { Dialog } from "@mui/material";
+import { DialogContent } from "@mui/material";
+import { DialogTitle } from "@mui/material";
+import { Button } from "@mui/material";
+import { DialogActions } from "@mui/material";
+import { useIsDemo, useSetTitle } from "../routes.js";
+import { DisplayLoadingAndError } from "../ErrorsAndLoading.js";
+import { MachineBackend } from "../../network/backend.js";
+import { Select } from "@mui/material";
+import { MenuItem } from "@mui/material";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+const ProgramTableRow = styled(TableRow)(() => ({
+    "& > *": {
+        borderBottom: "unset",
+    },
+}));
+function programFilename(program) {
+    if (program.length === 0)
+        return "";
+    const idx = program.lastIndexOf("\\");
+    if (idx >= 0 && idx < program.length - 2) {
+        return program.substr(idx + 1);
+    }
+    else {
+        return program;
+    }
+}
+const numFormat = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: 2,
+});
+function ProgramRow(props) {
+    const [open, setOpen] = useState(false);
+    const setProgramToShowContent = useSetAtom(programToShowContent);
+    const setProgramToShowHistory = useSetAtom(programToShowHistory);
+    const numCols = 8 + (props.showCellCtrlCol ? 1 : 0) + (props.showRevCol ? 1 : 0);
+    const toolsHaveTime = props.program.toolUse !== null &&
+        props.program.toolUse.tools.length > 0 &&
+        LazySeq.of(props.program.toolUse.tools).some((t) => t.cycleUsageMinutes > 0);
+    const toolsHaveCnt = props.program.toolUse !== null &&
+        props.program.toolUse.tools.length > 0 &&
+        LazySeq.of(props.program.toolUse.tools).some((t) => t.cycleUsageCnt > 0);
+    return (_jsxs(_Fragment, { children: [_jsxs(ProgramTableRow, { children: [_jsx(TableCell, { children: props.program.toolUse === null || props.program.toolUse.tools.length === 0 ? undefined : (_jsx(IconButton, { size: "small", onClick: () => setOpen(!open), children: open ? _jsx(KeyboardArrowUpIcon, {}) : _jsx(KeyboardArrowDownIcon, {}) })) }), _jsx(TableCell, { children: programFilename(props.program.programName) }), props.showCellCtrlCol ? _jsx(TableCell, { children: props.program.cellControllerProgramName }) : undefined, _jsx(TableCell, { children: props.program.partName !== null ? (_jsxs(Box, { sx: {
+                                display: "flex",
+                                alignItems: "center",
+                            }, children: [_jsx(PartIdenticon, { part: props.program.partName, size: 20 }), _jsx("span", { children: props.program.partName })] })) : undefined }), _jsx(TableCell, { children: props.program.comment ?? "" }), props.showRevCol ? (_jsx(TableCell, { children: props.program.revision === null ? "" : props.program.revision.toFixed() })) : undefined, _jsx(TableCell, { align: "right", children: props.program.statisticalCycleTime === null
+                            ? ""
+                            : props.program.statisticalCycleTime.medianMinutesForSingleMat.toFixed(2) }), _jsx(TableCell, { align: "right", children: props.program.statisticalCycleTime === null
+                            ? ""
+                            : props.program.statisticalCycleTime.MAD_aboveMinutes.toFixed(2) }), _jsx(TableCell, { align: "right", children: props.program.statisticalCycleTime === null
+                            ? ""
+                            : props.program.statisticalCycleTime.MAD_belowMinutes.toFixed(2) }), _jsx(TableCell, { align: "right", children: props.program.plannedMins === null ? "" : numFormat.format(props.program.plannedMins) }), _jsxs(TableCell, { children: [_jsx(Tooltip, { title: "Load Program Content", children: _jsx(IconButton, { size: "small", onClick: () => setProgramToShowContent(props.program), children: _jsx(CodeIcon, {}) }) }), props.program.revision !== null ? (_jsx(Tooltip, { title: "Revision History", children: _jsx(IconButton, { size: "small", onClick: () => setProgramToShowHistory(props.program), children: _jsx(HistoryIcon, {}) }) })) : undefined] })] }), _jsx(TableRow, { children: _jsx(TableCell, { sx: { pb: "0", pt: "0" }, colSpan: numCols, children: _jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: _jsx(Box, { sx: { mr: "1em", ml: "3em" }, children: props.program.toolUse === null || props.program.toolUse.tools.length === 0 ? undefined : (_jsxs(Table, { size: "small", sx: {
+                                    width: "auto",
+                                    ml: "10em",
+                                    mr: "1em",
+                                }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Tool" }), toolsHaveTime ? _jsx(TableCell, { align: "right", children: "Estimated Usage (min)" }) : undefined, toolsHaveCnt ? (_jsx(TableCell, { align: "right", children: "Estimated Usage (count)" })) : undefined] }) }), _jsx(TableBody, { children: LazySeq.of(props.program.toolUse.tools).map((t, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: t.toolName }), toolsHaveTime ? (_jsx(TableCell, { align: "right", children: t.cycleUsageMinutes === 0 ? "" : t.cycleUsageMinutes.toFixed(1) })) : undefined, toolsHaveCnt ? (_jsx(TableCell, { align: "right", children: t.cycleUsageCnt === 0 ? "" : t.cycleUsageCnt.toFixed(1) })) : undefined] }, idx))) })] })) }) }) }) })] }));
+}
+export function ProgramSummaryTable() {
+    const report = useAtomValue(currentProgramReport);
+    const [sortCol, setSortCol] = useState("ProgramName");
+    const [sortDir, setSortDir] = useState("asc");
+    if (report === null) {
+        return _jsx("div", {});
+    }
+    const rows = LazySeq.of(report.programs).sortWith((a, b) => {
+        let c = 0;
+        switch (sortCol) {
+            case "ProgramName":
+                c = programFilename(a.programName).localeCompare(programFilename(b.programName));
+                break;
+            case "CellProgName":
+                c = a.cellControllerProgramName.localeCompare(b.cellControllerProgramName);
+                break;
+            case "Comment":
+                if (a.comment === null && b.comment === null) {
+                    c = 0;
+                }
+                else if (a.comment === null) {
+                    c = 1;
+                }
+                else if (b.comment === null) {
+                    c = -1;
+                }
+                else {
+                    c = a.comment.localeCompare(b.comment);
+                }
+                break;
+            case "Revision":
+                if (a.revision === null && b.revision === null) {
+                    c = 0;
+                }
+                else if (a.revision === null) {
+                    c = 1;
+                }
+                else if (b.revision === null) {
+                    c = -1;
+                }
+                else {
+                    c = a.revision - b.revision;
+                }
+                break;
+            case "PartName":
+                if (a.partName === null && b.partName === null) {
+                    c = 0;
+                }
+                else if (a.partName === null) {
+                    c = 1;
+                }
+                else if (b.partName === null) {
+                    c = -1;
+                }
+                else {
+                    c = a.partName.localeCompare(b.partName);
+                }
+                break;
+            case "MedianTime":
+                if (a.statisticalCycleTime === null && b.statisticalCycleTime === null) {
+                    c = 0;
+                }
+                else if (a.statisticalCycleTime === null) {
+                    c = 1;
+                }
+                else if (b.statisticalCycleTime === null) {
+                    c = -1;
+                }
+                else {
+                    c =
+                        a.statisticalCycleTime.medianMinutesForSingleMat -
+                            b.statisticalCycleTime.medianMinutesForSingleMat;
+                }
+                break;
+            case "DeviationAbove":
+                if (a.statisticalCycleTime === null && b.statisticalCycleTime === null) {
+                    c = 0;
+                }
+                else if (a.statisticalCycleTime === null) {
+                    c = 1;
+                }
+                else if (b.statisticalCycleTime === null) {
+                    c = -1;
+                }
+                else {
+                    c = a.statisticalCycleTime.MAD_aboveMinutes - b.statisticalCycleTime.MAD_aboveMinutes;
+                }
+                break;
+            case "DeviationBelow":
+                if (a.statisticalCycleTime === null && b.statisticalCycleTime === null) {
+                    c = 0;
+                }
+                else if (a.statisticalCycleTime === null) {
+                    c = 1;
+                }
+                else if (b.statisticalCycleTime === null) {
+                    c = -1;
+                }
+                else {
+                    c = a.statisticalCycleTime.MAD_belowMinutes - b.statisticalCycleTime.MAD_belowMinutes;
+                }
+                break;
+            case "Planned":
+                if (a.plannedMins === null && b.plannedMins === null) {
+                    c = 0;
+                }
+                else if (a.plannedMins === null) {
+                    c = 1;
+                }
+                else if (b.plannedMins === null) {
+                    c = -1;
+                }
+                else {
+                    c = a.plannedMins - b.plannedMins;
+                }
+                break;
+        }
+        if (c === 0) {
+            return 0;
+        }
+        else if ((c < 0 && sortDir === "asc") || (c > 0 && sortDir === "desc")) {
+            return -1;
+        }
+        else {
+            return 1;
+        }
+    });
+    function toggleSort(s) {
+        if (s === sortCol) {
+            setSortDir(sortDir === "asc" ? "desc" : "asc");
+        }
+        else {
+            setSortCol(s);
+        }
+    }
+    return (_jsxs(Table, { stickyHeader: true, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, {}), _jsx(TableCell, { sortDirection: sortCol === "ProgramName" ? sortDir : false, children: _jsx(TableSortLabel, { active: sortCol === "ProgramName", direction: sortDir, onClick: () => toggleSort("ProgramName"), children: "Program Name" }) }), report.cellNameDifferentFromProgName ? (_jsx(TableCell, { sortDirection: sortCol === "CellProgName" ? sortDir : false, children: _jsx(TableSortLabel, { active: sortCol === "CellProgName", direction: sortDir, onClick: () => toggleSort("CellProgName"), children: "Cell Controller Program" }) })) : undefined, _jsx(TableCell, { sortDirection: sortCol === "PartName" ? sortDir : false, children: _jsx(TableSortLabel, { active: sortCol === "PartName", direction: sortDir, onClick: () => toggleSort("PartName"), children: "Part" }) }), _jsx(TableCell, { sortDirection: sortCol === "Comment" ? sortDir : false, children: _jsx(TableSortLabel, { active: sortCol === "Comment", direction: sortDir, onClick: () => toggleSort("Comment"), children: "Comment" }) }), report.hasRevisions ? (_jsx(TableCell, { sortDirection: sortCol === "Revision" ? sortDir : false, children: _jsx(TableSortLabel, { active: sortCol === "Revision", direction: sortDir, onClick: () => toggleSort("Revision"), children: "Revision" }) })) : undefined, _jsx(TableCell, { sortDirection: sortCol === "MedianTime" ? sortDir : false, align: "right", children: _jsx(TableSortLabel, { active: sortCol === "MedianTime", direction: sortDir, onClick: () => toggleSort("MedianTime"), children: "Median Time / Material (min)" }) }), _jsx(TableCell, { sortDirection: sortCol === "DeviationAbove" ? sortDir : false, align: "right", children: _jsx(TableSortLabel, { active: sortCol === "DeviationAbove", direction: sortDir, onClick: () => toggleSort("DeviationAbove"), children: "Deviation Above Median" }) }), _jsx(TableCell, { sortDirection: sortCol === "DeviationBelow" ? sortDir : false, align: "right", children: _jsx(TableSortLabel, { active: sortCol === "DeviationBelow", direction: sortDir, onClick: () => toggleSort("DeviationBelow"), children: "Deviation Below Median" }) }), _jsx(TableCell, { sortDirection: sortCol === "Planned" ? sortDir : false, align: "right", children: _jsx(TableSortLabel, { active: sortCol === "Planned", direction: sortDir, onClick: () => toggleSort("Planned"), children: "Planned Time (min)" }) }), _jsx(TableCell, {})] }) }), _jsx(TableBody, { children: LazySeq.of(rows).map((program, idx) => (_jsx(ProgramRow, { program: program, showCellCtrlCol: report.cellNameDifferentFromProgName, showRevCol: report.hasRevisions }, idx))) })] }));
+}
+function ProgramContentCode() {
+    const ct = useAtomValue(programContent);
+    const [highlighted, setHighlighted] = useState(null);
+    const worker = useMemo(() => new Worker(new URL("./ProgramHighlight.ts", import.meta.url), { type: "module" }), []);
+    useEffect(() => {
+        let set = (h) => setHighlighted(h);
+        worker.onmessage = (e) => set(e.data);
+        return () => {
+            // cleanup
+            set = () => null;
+            worker.terminate();
+            setHighlighted(null);
+        };
+    }, [worker]);
+    useEffect(() => {
+        if (ct && ct !== "") {
+            worker.postMessage(ct);
+        }
+    }, [ct, worker]);
+    return (_jsx("pre", { children: highlighted === null ? (_jsx("code", { className: "gcode", children: ct })) : (_jsx("code", { className: "gcode", dangerouslySetInnerHTML: { __html: highlighted } })) }));
+}
+export function ProgramContentDialog() {
+    const [program, setProgramToShowContent] = useAtom(programToShowContent);
+    const history = useAtomValue(programToShowHistory);
+    // when history is open, content is shown on the history dialog
+    return (_jsxs(Dialog, { open: program !== null && history === null, onClose: () => setProgramToShowContent(null), maxWidth: "lg", children: [_jsx(DialogTitle, { children: program?.partName ? (_jsxs("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "center" }, children: [_jsx(PartIdenticon, { part: program.partName }), _jsxs("div", { style: { marginLeft: "10px", marginRight: "3em" }, children: [program?.programName ?? "Program", " ", program?.revision ? " rev" + program.revision.toFixed() : "", " ", _jsxs(Typography, { variant: "subtitle1", component: "span", children: ["(", program.partName, ")"] })] })] })) : (_jsxs(_Fragment, { children: [program?.programName ?? "Program", " ", program?.revision ? " rev" + program.revision.toFixed() : ""] })) }), _jsx(DialogContent, { children: program === null || history !== null ? (_jsx("div", {})) : (_jsx(DisplayLoadingAndError, { children: _jsx(ProgramContentCode, {}) })) }), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => setProgramToShowContent(null), children: "Close" }) })] }));
+}
+const revisionsPerPage = 10;
+function ProgramRevisionTable(props) {
+    const program = useAtomValue(programToShowHistory);
+    const setProgramToShowContent = useSetAtom(programToShowContent);
+    return (_jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Revision" }), _jsx(TableCell, { children: "Comment" }), _jsx(TableCell, { children: "Cell Controller Program" }), _jsx(TableCell, {})] }) }), _jsx(TableBody, { children: props.loading ? (_jsxs(_Fragment, { children: [_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 4, children: _jsx(CircularProgress, {}) }) }), LazySeq.ofRange(0, revisionsPerPage - 1).map((i) => (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 4 }) }, i)))] })) : (LazySeq.of(props.revisions)
+                    .drop(props.page * revisionsPerPage)
+                    .take(revisionsPerPage)
+                    .map((rev) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: rev.revision }), _jsx(TableCell, { children: rev.comment ?? "" }), _jsx(TableCell, { children: rev.cellControllerProgramName ?? "" }), _jsx(TableCell, { children: _jsx(Tooltip, { title: "Load Program Content", children: _jsx(IconButton, { size: "small", onClick: () => setProgramToShowContent({
+                                        ...rev,
+                                        partName: program?.partName ?? null,
+                                    }), children: _jsx(CodeIcon, {}) }) }) })] }, rev.revision)))) })] }));
+}
+export function ProgramHistoryDialog() {
+    const [program, setProgram] = useAtom(programToShowHistory);
+    const [programForContent, setProgramForContent] = useAtom(programToShowContent);
+    // TODO: switch to persistent list
+    const [revisions, setRevisions] = useState(null);
+    const [lastLoadedPage, setLastLoadedPage] = useState({ page: 0, hasMore: false });
+    const [page, setPage] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (program === null) {
+            setRevisions(null);
+            setPage(0);
+            setLastLoadedPage({ page: 0, hasMore: false });
+        }
+        else if (program !== null && revisions === null) {
+            // load initial
+            setLoading(true);
+            setError(null);
+            MachineBackend.getProgramRevisionsInDescendingOrderOfRevision(program.programName, revisionsPerPage, undefined)
+                .then((revs) => {
+                setRevisions(revs);
+                setLastLoadedPage({ page: 0, hasMore: revs.length === revisionsPerPage });
+            })
+                .catch(setError)
+                .finally(() => setLoading(false));
+        }
+    }, [program, revisions]);
+    function advancePage() {
+        if (page < lastLoadedPage.page) {
+            setPage(page + 1);
+        }
+        else if (lastLoadedPage.hasMore && program !== null && revisions !== null && revisions.length > 0) {
+            setLoading(true);
+            setError(null);
+            const rev = revisions[revisions.length - 1];
+            MachineBackend.getProgramRevisionsInDescendingOrderOfRevision(program.programName, revisionsPerPage, rev ? rev.revision - 1 : undefined)
+                .then((revs) => {
+                setRevisions((oldRevs) => (oldRevs === null ? revs : oldRevs.concat(revs)));
+                setLastLoadedPage({ page: page + 1, hasMore: revs.length === revisionsPerPage });
+                setPage(page + 1);
+            })
+                .catch(setError)
+                .finally(() => setLoading(false));
+        }
+    }
+    return (_jsxs(Dialog, { open: program !== null, onClose: () => setProgram(null), maxWidth: "lg", children: [_jsx(DialogTitle, { children: program?.partName ? (_jsxs("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "center" }, children: [_jsx(PartIdenticon, { part: program.partName }), _jsxs("div", { style: { marginLeft: "10px", marginRight: "3em" }, children: [program.programName ?? "Program", " ", _jsxs(Typography, { variant: "subtitle1", component: "span", children: ["(", program.partName, ")"] })] })] })) : (_jsx(_Fragment, { children: program?.programName ?? "Program" })) }), _jsxs(DialogContent, { children: [error !== null ? (_jsx(Card, { children: _jsx(CardContent, { children: typeof error === "string" ? error : error.message }) })) : undefined, programForContent !== null ? (_jsx(DisplayLoadingAndError, { children: _jsx(ProgramContentCode, {}) })) : revisions !== null ? (_jsx(ProgramRevisionTable, { page: page, revisions: revisions, loading: loading })) : loading ? (_jsx(CircularProgress, {})) : undefined] }), _jsx(DialogActions, { children: _jsxs("div", { style: { display: "flex", alignItems: "center", width: "100%" }, children: [programForContent === null ? (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "Latest Revisions", children: _jsx("span", { children: _jsx(IconButton, { onClick: () => setPage(0), disabled: loading || page === 0, size: "large", children: _jsx(FirstPageIcon, {}) }) }) }), _jsx(Tooltip, { title: "Previous Page", children: _jsx("span", { children: _jsx(IconButton, { onClick: () => setPage(page - 1), disabled: loading || page === 0, size: "large", children: _jsx(KeyboardArrowLeft, {}) }) }) }), _jsx(Tooltip, { title: "Next Page", children: _jsx("span", { children: _jsx(IconButton, { onClick: () => advancePage(), disabled: loading || (page === lastLoadedPage.page && !lastLoadedPage.hasMore), size: "large", children: _jsx(KeyboardArrowRight, {}) }) }) })] })) : undefined, _jsx("div", { style: { flexGrow: 1 } }), programForContent !== null ? (_jsx(Button, { onClick: () => setProgramForContent(null), children: "Back to History" })) : undefined, _jsx(Button, { onClick: () => setProgram(null), children: "Close" })] }) })] }));
+}
+function ProgNavHeader() {
+    const [reloadTime, refreshPrograms] = useAtom(programReportRefreshTime);
+    const [loading, setLoading] = useState(false);
+    const demo = useIsDemo();
+    const [filter, setFilter] = useAtom(programFilter);
+    function refresh() {
+        setLoading(true);
+        refreshPrograms(new Date())
+            .catch(console.log)
+            .finally(() => setLoading(false));
+    }
+    if (demo) {
+        return _jsx("div", {});
+    }
+    else if (reloadTime === null) {
+        return (_jsx("main", { style: { margin: "2em", display: "flex", justifyContent: "center" }, children: _jsx(Fab, { color: "secondary", size: "large", variant: "extended", style: { margin: "2em" }, onClick: refresh, disabled: loading, children: _jsxs(_Fragment, { children: [loading ? (_jsx(CircularProgress, { size: 10, style: { marginRight: "1em" } })) : (_jsx(RefreshIcon, { fontSize: "inherit", style: { marginRight: "1em" } })), "Load Programs"] }) }) }));
+    }
+    else {
+        return (_jsxs(Box, { component: "nav", sx: {
+                display: "flex",
+                minHeight: "2.5em",
+                alignItems: "center",
+                maxWidth: "calc(100vw - 24px - 24px)",
+            }, children: [_jsx(Tooltip, { title: "Refresh Programs", children: _jsx("div", { children: _jsx(IconButton, { onClick: refresh, disabled: loading, size: "small", children: loading ? _jsx(CircularProgress, { size: 10 }) : _jsx(RefreshIcon, { fontSize: "inherit" }) }) }) }), _jsxs("span", { style: { marginLeft: "1em" }, children: ["Programs from ", _jsx(TimeAgo, { date: reloadTime })] }), _jsx("div", { style: { flexGrow: 1 } }), _jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, value: filter, onChange: (e) => setFilter(e.target.value), children: [_jsx(MenuItem, { value: "AllPrograms", children: "All Programs" }, "AllPrograms"), _jsx(MenuItem, { value: "ActivePrograms", children: "Active Programs" }, "ActivePrograms")] }) })] }));
+    }
+}
+export function ProgramReportPage() {
+    useSetTitle("Programs");
+    return (_jsxs(Box, { paddingLeft: "24px", paddingRight: "24px", paddingTop: "10px", children: [_jsx(ProgNavHeader, {}), _jsx("main", { children: _jsx(DisplayLoadingAndError, { children: _jsx(ProgramSummaryTable, {}) }) }), _jsx(ProgramContentDialog, {}), _jsx(ProgramHistoryDialog, {})] }));
+}

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

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