@seedtactics/insight-client 16.4.0

package/dist/components/analysis/EfficiencyPage.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx } 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 { useMemo } from "react";
+import { addMonths, addDays, startOfToday } from "date-fns";
+import { selectedAnalysisPeriod } from "../../network/load-specific-month.js";
+import { SelectableHeatChart } from "./HeatChart.js";
+import { binSimStationUseByDayAndStat, copyOeeHeatmapToClipboard, binActiveCyclesByDayAndStat, binOccupiedCyclesByDayAndStat, binDowntimeToDayAndStat, } from "../../data/results.oee.js";
+import { binCyclesByDayAndPart, binSimProductionByDayAndPart, copyCompletedPartsHeatmapToClipboard, } from "../../data/results.completed-parts.js";
+import { last30SimStationUse, specificMonthSimStationUse } from "../../cell-status/sim-station-use.js";
+import { last30SimProduction, specificMonthSimProduction, } from "../../cell-status/sim-production.js";
+import { last30MaterialSummary, specificMonthMaterialSummary, } from "../../cell-status/material-summary.js";
+import { last30StationCycles, specificMonthStationCycles, } from "../../cell-status/station-cycles.js";
+import { LazySeq } from "@seedtactics/immutable-collections";
+import { useSetTitle } from "../routes.js";
+import { atom, useAtom, useAtomValue } from "jotai";
+function dayAndStatToHeatmapPoints(pts, downtime) {
+    return LazySeq.of(pts)
+        .map(([dayAndStat, val]) => {
+        const downMins = downtime.get(dayAndStat) ?? 0;
+        const pct = downMins < 24 * 60 ? Math.max(val / (24 * 60 - downMins), 0) : 0;
+        return {
+            x: dayAndStat.day,
+            y: dayAndStat.station,
+            color: Math.min(pct, 1),
+            label: downMins < 24 * 60 ? (pct * 100).toFixed(1) + "%" : "Planned Downtime",
+        };
+    })
+        .toSortedArray((p) => p.x.getTime(), { desc: (p) => p.y });
+}
+const selectedStationOeeHeatmapType = atom("Standard OEE");
+export function StationOeeHeatmap() {
+    useSetTitle("Station OEE");
+    const [selected, setSelected] = useAtom(selectedStationOeeHeatmapType);
+    const period = useAtomValue(selectedAnalysisPeriod);
+    const dateRange = period.type === "Last30"
+        ? [addDays(startOfToday(), -29), addDays(startOfToday(), 1)]
+        : [period.month, addMonths(period.month, 1)];
+    const cycles = useAtomValue(period.type === "Last30" ? last30StationCycles : specificMonthStationCycles);
+    const statUse = useAtomValue(period.type === "Last30" ? last30SimStationUse : specificMonthSimStationUse);
+    const points = useMemo(() => {
+        const downtime = binDowntimeToDayAndStat(statUse);
+        if (selected === "Standard OEE") {
+            return dayAndStatToHeatmapPoints(binActiveCyclesByDayAndStat(cycles.valuesToLazySeq()), downtime);
+        }
+        else if (selected === "Occupied") {
+            return dayAndStatToHeatmapPoints(binOccupiedCyclesByDayAndStat(cycles.valuesToLazySeq()), downtime);
+        }
+        else {
+            return dayAndStatToHeatmapPoints(binSimStationUseByDayAndStat(statUse), downtime);
+        }
+    }, [selected, cycles, statUse]);
+    return (_jsx(SelectableHeatChart, { label: "Station Usage Per Day", y_title: "Station", label_title: selected === "Occupied" ? "Occupied" : "OEE", dateRange: dateRange, cur_selected: selected, options: ["Standard OEE", "Occupied", "Planned OEE"], setSelected: setSelected, points: points, onExport: () => copyOeeHeatmapToClipboard("Station", points) }));
+}
+const selectedCompletedPartsHeatmapType = atom("Completed");
+function partsCompletedPoints(partCycles, matsById, start, end) {
+    const pts = binCyclesByDayAndPart(partCycles, matsById, start, end);
+    return LazySeq.of(pts)
+        .map(([dayAndPart, val]) => {
+        return {
+            x: dayAndPart.day,
+            y: dayAndPart.part,
+            color: val.activeMachineMins,
+            label: val.count.toFixed(0) + " (" + (val.activeMachineMins / 60).toFixed(1) + " hours)",
+            count: val.count,
+            activeMachineMins: val.activeMachineMins,
+        };
+    })
+        .toSortedArray((p) => p.x.getTime(), { desc: (p) => p.y });
+}
+function partsPlannedPoints(prod) {
+    const pts = binSimProductionByDayAndPart(prod);
+    return LazySeq.of(pts)
+        .map(([dayAndPart, val]) => {
+        return {
+            x: dayAndPart.day,
+            y: dayAndPart.part,
+            color: val.activeMachineMins,
+            label: val.count.toFixed(0) + " (" + (val.activeMachineMins / 60).toFixed(1) + " hours)",
+            count: val.count,
+            activeMachineMins: val.activeMachineMins,
+        };
+    })
+        .toSortedArray((p) => p.x.getTime(), { desc: (p) => p.y });
+}
+export function CompletedCountHeatmap() {
+    useSetTitle("Part Production");
+    const [selected, setSelected] = useAtom(selectedCompletedPartsHeatmapType);
+    const period = useAtomValue(selectedAnalysisPeriod);
+    const dateRange = period.type === "Last30"
+        ? [addDays(startOfToday(), -29), addDays(startOfToday(), 1)]
+        : [period.month, addMonths(period.month, 1)];
+    const cycles = useAtomValue(period.type === "Last30" ? last30StationCycles : specificMonthStationCycles);
+    const productionCounts = useAtomValue(period.type === "Last30" ? last30SimProduction : specificMonthSimProduction);
+    const matSummary = useAtomValue(period.type === "Last30" ? last30MaterialSummary : specificMonthMaterialSummary);
+    const points = useMemo(() => {
+        if (selected === "Completed") {
+            const today = startOfToday();
+            const start = period.type === "Last30" ? addDays(today, -30) : period.month;
+            const endD = period.type === "Last30" ? addDays(today, 1) : addMonths(period.month, 1);
+            return partsCompletedPoints(cycles.valuesToLazySeq(), matSummary.matsById, start, endD);
+        }
+        else {
+            return partsPlannedPoints(productionCounts);
+        }
+    }, [selected, cycles, matSummary, productionCounts, period]);
+    return (_jsx(SelectableHeatChart, { label: "Part Production Per Day", y_title: "Part", label_title: selected, dateRange: dateRange, cur_selected: selected, options: ["Completed", "Planned"], setSelected: setSelected, points: points, onExport: () => copyCompletedPartsHeatmapToClipboard(points) }));
+}

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

@@ -0,0 +1,22 @@
+export type HeatChartYType = "Station" | "Part";
+export interface HeatChartPoint {
+    readonly x: Date;
+    readonly y: string;
+    readonly color: number;
+    readonly label: string;
+}
+export interface HeatChartProps {
+    readonly points: ReadonlyArray<HeatChartPoint>;
+    readonly y_title: HeatChartYType;
+    readonly dateRange: [Date, Date];
+    readonly label_title: string;
+}
+export interface SelectableHeatCardProps<T extends string> {
+    readonly label: string;
+    readonly onExport: () => void;
+    readonly cur_selected: T;
+    readonly setSelected?: (p: T) => void;
+    readonly options: ReadonlyArray<T>;
+}
+export type SelectableHeatChartProps<T extends string> = HeatChartProps & SelectableHeatCardProps<T>;
+export declare function SelectableHeatChart<T extends string>(props: SelectableHeatChartProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/analysis/HeatChart.js

@@ -0,0 +1,161 @@
+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, memo, useRef, useCallback } from "react";
+import { addDays } from "date-fns";
+import { Select, MenuItem, Tooltip, IconButton, Stack, Box, Typography, FormControl } from "@mui/material";
+import { ImportExport } from "@mui/icons-material";
+import { scaleBand, scaleLinear } from "d3-scale";
+import { LazySeq } from "@seedtactics/immutable-collections";
+import { localPoint } from "../../util/chart-helpers.js";
+import { AxisBottom, AxisLeft } from "../AxisAndGrid.js";
+import { measureSvgString } from "../../util/chart-helpers.js";
+import { atom, useSetAtom } from "jotai";
+import { ChartWithTooltip } from "../ChartTooltip.js";
+const marginBottom = 20;
+const marginTop = 10;
+const marginRight = 2;
+const color1 = "#E8F5E9";
+const color2 = "#1B5E20";
+function useScales({ yType, dateRange, containerWidth, points, }) {
+    const width = containerWidth === null || containerWidth === undefined || containerWidth === 0 ? 400 : containerWidth;
+    const maxStatLen = useMemo(() => LazySeq.of(points)
+        .map((p) => p.y)
+        .distinct()
+        .map(measureSvgString)
+        .maxBy((w) => w ?? 0) ?? 20, [points]);
+    const marginLeft = maxStatLen + 5;
+    const xMax = width - marginLeft - marginRight;
+    const dateRangeStart = dateRange[0];
+    const dateRangeEnd = dateRange[1];
+    const xScale = useMemo(() => {
+        const xValues = [];
+        if (dateRangeEnd < dateRangeStart) {
+            // should never happen, just do something in case
+            xValues.push(dateRangeStart);
+        }
+        else {
+            let d = dateRangeStart;
+            while (d < dateRangeEnd) {
+                xValues.push(d);
+                d = addDays(d, 1);
+            }
+        }
+        return scaleBand().domain(xValues).range([0, xMax]).align(0).padding(0.05);
+    }, [dateRangeStart, dateRangeEnd, xMax]);
+    const { yScale, height, colorScale } = useMemo(() => {
+        const yValues = new Set();
+        for (const pt of points) {
+            yValues.add(pt.y);
+        }
+        const yMax = 60 * yValues.size;
+        const height = yMax + marginTop + marginBottom;
+        const yScale = scaleBand()
+            .domain(Array.from(yValues).sort((a, b) => a.localeCompare(b)))
+            .range([0, yMax])
+            .align(0)
+            .padding(0.05);
+        let colorScale;
+        if (yType === "Station") {
+            colorScale = scaleLinear().domain([0, 1]).range([color1, color2]);
+        }
+        else {
+            const maxCnt = LazySeq.of(points).maxBy((pt) => pt.color)?.color ?? 1;
+            colorScale = scaleLinear().domain([0, maxCnt]).range([color1, color2]);
+        }
+        return { yScale, height, colorScale };
+    }, [points, yType]);
+    return { height, width, xScale, yScale, colorScale, marginLeft };
+}
+const HeatAxis = memo(function HeatAxis({ xScale, yScale }) {
+    return (_jsxs(_Fragment, { children: [_jsx(AxisBottom, { scale: xScale, top: yScale.range()[1], tickFormat: (d) => d.toLocaleDateString(undefined, { month: "short", day: "numeric" }) }), _jsx(AxisLeft, { scale: yScale, left: xScale.range()[0] })] }));
+});
+const HeatSeries = memo(function HeatSeries({ points, xScale, yScale, colorScale, setTooltip, }) {
+    const hideRef = useRef(null);
+    const pointerEnter = useCallback((e) => {
+        const pt = localPoint(e);
+        if (pt === null)
+            return;
+        if (hideRef.current !== null) {
+            clearTimeout(hideRef.current);
+            hideRef.current = null;
+        }
+        const idxS = e.target.dataset.idx;
+        if (idxS === undefined)
+            return;
+        const heatPoint = points[parseInt(idxS)];
+        setTooltip({ left: pt.x, top: pt.y, data: heatPoint });
+    }, [points, setTooltip]);
+    const pointerLeave = useCallback(() => {
+        if (hideRef.current === null) {
+            hideRef.current = window.setTimeout(() => {
+                hideRef.current = null;
+                setTooltip(null);
+            }, 100);
+        }
+    }, [setTooltip]);
+    return (_jsx("g", { children: points.map((pt, idx) => {
+            return (_jsx("rect", { "data-idx": idx, x: xScale(pt.x) ?? 0, width: xScale.bandwidth(), y: yScale(pt.y) ?? 0, height: yScale.bandwidth(), rx: 6, fill: colorScale(pt.color), onPointerEnter: pointerEnter, onPointerLeave: pointerLeave }, idx));
+        }) }));
+});
+const HeatTooltip = memo(function HeatTooltip({ yType, seriesLabel, tooltip, }) {
+    if (tooltip === null)
+        return null;
+    return (_jsxs(Stack, { direction: "column", spacing: 0.6, children: [_jsxs("div", { children: [yType, ": ", tooltip.data.y] }), _jsxs("div", { children: ["Day: ", tooltip.data.x.toDateString()] }), _jsxs("div", { children: [seriesLabel, ": ", tooltip.data.label] })] }));
+});
+function HeatChart(props) {
+    const { width, height, xScale, yScale, colorScale, marginLeft } = useScales({
+        yType: props.y_title,
+        points: props.points,
+        dateRange: props.dateRange,
+        containerWidth: props.parentWidth,
+    });
+    return (_jsx("svg", { width: width, height: height, children: _jsxs("g", { transform: `translate(${marginLeft}, ${marginTop})`, children: [_jsx(HeatSeries, { points: props.points, xScale: xScale, yScale: yScale, colorScale: colorScale, setTooltip: props.setTooltip }), _jsx(HeatAxis, { xScale: xScale, yScale: yScale, colorScale: colorScale })] }) }));
+}
+function ChartToolbar(props) {
+    const setSelected = props.setSelected;
+    return (_jsxs(Box, { component: "nav", sx: {
+            display: "flex",
+            minHeight: "2.5em",
+            alignItems: "center",
+            maxWidth: "calc(100vw - 24px - 24px)",
+        }, children: [_jsx(Typography, { variant: "subtitle1", children: props.label }), _jsx(Box, { flexGrow: 1 }), setSelected ? (_jsx(FormControl, { size: "small", children: _jsx(Select, { autoWidth: true, displayEmpty: true, value: props.cur_selected, onChange: (e) => setSelected(e.target.value), children: props.options.map((v, idx) => (_jsx(MenuItem, { value: v, children: v }, idx))) }) })) : undefined, _jsx(Tooltip, { title: "Copy to Clipboard", children: _jsx(IconButton, { onClick: props.onExport, style: { height: "25px", paddingTop: 0, paddingBottom: 0 }, size: "large", children: _jsx(ImportExport, {}) }) })] }));
+}
+export function SelectableHeatChart(props) {
+    const tooltipAtom = useMemo(() => atom(null), []);
+    const setTooltip = useSetAtom(tooltipAtom);
+    const pointerLeave = useCallback(() => {
+        setTooltip(null);
+    }, [setTooltip]);
+    return (_jsxs(Box, { paddingLeft: "24px", paddingRight: "24px", paddingTop: "10px", children: [_jsx(ChartToolbar, { label: props.label, setSelected: props.setSelected, cur_selected: props.cur_selected, onExport: props.onExport, options: props.options }), _jsx("main", { onPointerLeave: pointerLeave, children: _jsx(ChartWithTooltip, { sx: { width: "100%" }, tooltipAtom: tooltipAtom, autoHeight: true, chart: ({ width }) => (_jsx(HeatChart, { points: props.points, y_title: props.y_title, dateRange: props.dateRange, parentWidth: width, setTooltip: setTooltip })), TooltipContent: ({ tooltip }) => (_jsx(HeatTooltip, { yType: props.y_title, seriesLabel: props.label_title, tooltip: tooltip })) }) })] }));
+}

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

@@ -0,0 +1,10 @@
+import { InspectionLogEntry } from "../../cell-status/inspections.js";
+export interface InspectionDataTableProps {
+    readonly points: Iterable<InspectionLogEntry>;
+    readonly default_date_range: Date[];
+    readonly zoomType?: "Last30Days" | "ZoomIntoRange" | "ExtendDays";
+    readonly extendDateRange?: (numDays: number) => void;
+    readonly hideOpenDetailColumn?: boolean;
+}
+declare const _default: import("react").NamedExoticComponent<InspectionDataTableProps>;
+export default _default;

package/dist/components/analysis/InspectionDataTable.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* Copyright (c) 2019, 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 { Table } from "@mui/material";
+import { Accordion } from "@mui/material";
+import { AccordionDetails } from "@mui/material";
+import { AccordionSummary } from "@mui/material";
+import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
+import { DataTableHead, DataTableActions, DataTableBody, useColSort, } from "./DataTable.js";
+import { Typography } from "@mui/material";
+import { groupInspectionsByPath } from "../../data/results.inspection.js";
+import { addDays, addHours } from "date-fns";
+import { materialDialogOpen } from "../../cell-status/material-details.js";
+import { LazySeq, HashMap } from "@seedtactics/immutable-collections";
+import { useSetAtom } from "jotai";
+var ColumnId;
+(function (ColumnId) {
+    ColumnId[ColumnId["Date"] = 0] = "Date";
+    ColumnId[ColumnId["Serial"] = 1] = "Serial";
+    ColumnId[ColumnId["Workorder"] = 2] = "Workorder";
+    ColumnId[ColumnId["Inspected"] = 3] = "Inspected";
+    ColumnId[ColumnId["Failed"] = 4] = "Failed";
+})(ColumnId || (ColumnId = {}));
+const columns = [
+    {
+        id: ColumnId.Date,
+        numeric: false,
+        label: "Date",
+        getDisplay: (c) => c.time.toLocaleString(),
+        getForSort: (c) => c.time.getTime(),
+    },
+    {
+        id: ColumnId.Serial,
+        numeric: false,
+        label: "Serial",
+        getDisplay: (c) => c.serial || "",
+    },
+    {
+        id: ColumnId.Workorder,
+        numeric: false,
+        label: "Workorder",
+        getDisplay: (c) => c.workorder || "",
+    },
+    {
+        id: ColumnId.Inspected,
+        numeric: false,
+        label: "Inspected",
+        getDisplay: (c) => (c.toInspect ? "inspected" : ""),
+    },
+    {
+        id: ColumnId.Failed,
+        numeric: false,
+        label: "Failed",
+        getDisplay: (c) => (c.failed ? "failed" : ""),
+    },
+];
+function useZoom(zoomType, extendDateRange, default_date_range) {
+    const [curZoom, setCurZoom] = useState(undefined);
+    let zoom;
+    if (zoomType && zoomType === "Last30Days") {
+        zoom = {
+            type: "Last30Days",
+            set_days_back: (numDaysBack) => {
+                if (numDaysBack) {
+                    const now = new Date();
+                    setCurZoom({ start: addDays(now, -numDaysBack), end: addHours(now, 1) });
+                }
+                else {
+                    setCurZoom(undefined);
+                }
+            },
+        };
+    }
+    else if (zoomType && zoomType === "ZoomIntoRange") {
+        zoom = {
+            type: "ZoomIntoRange",
+            default_date_range,
+            current_date_zoom: curZoom,
+            set_date_zoom_range: setCurZoom,
+        };
+    }
+    else if (zoomType && extendDateRange && zoomType === "ExtendDays") {
+        zoom = {
+            type: "ExtendDays",
+            curStart: default_date_range[0],
+            curEnd: default_date_range[1],
+            extend: extendDateRange,
+        };
+    }
+    return { zoom, zoomRange: curZoom };
+}
+export default memo(function InspDataTable(props) {
+    const setMatToShow = useSetAtom(materialDialogOpen);
+    const sort = useColSort(ColumnId.Date, columns);
+    const [pages, setPages] = useState(HashMap.empty());
+    const [rowsPerPage, setRowsPerPage] = useState(10);
+    const [curPath, setCurPathOpen] = useState(undefined);
+    const tzoom = useZoom(props.zoomType, props.extendDateRange, props.default_date_range);
+    const groups = groupInspectionsByPath(props.points, tzoom.zoomRange, sort.sortOn);
+    const paths = LazySeq.of(groups).toSortedArray(([x]) => x);
+    return (_jsx("div", { style: { width: "100%", marginTop: "1em" }, children: paths.map(([path, points]) => {
+            const page = Math.min(pages.get(path) ?? 0, Math.ceil(points.material.length / rowsPerPage));
+            return (_jsxs(Accordion, { expanded: path === curPath, onChange: (_evt, open) => setCurPathOpen(open ? path : undefined), children: [_jsxs(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, {}), children: [_jsx(Typography, { variant: "h6", style: { flexBasis: "33.33%", flexShrink: 0 }, children: path }), _jsxs(Typography, { variant: "caption", children: [points.material.length, " total parts, ", points.failedCnt, " failed"] })] }), _jsx(AccordionDetails, { children: _jsxs("div", { style: { width: "100%" }, children: [_jsxs(Table, { children: [_jsx(DataTableHead, { columns: columns, sort: sort, showDetailsCol: true }), _jsx(DataTableBody, { columns: columns, pageData: LazySeq.of(points.material)
+                                                .drop(page * rowsPerPage)
+                                                .take(rowsPerPage), rowsPerPage: rowsPerPage, onClickDetails: props.hideOpenDetailColumn
+                                                ? undefined
+                                                : (_, row) => setMatToShow({
+                                                    type: "MatSummary",
+                                                    summary: {
+                                                        materialID: row.materialID,
+                                                        partName: row.partName,
+                                                        serial: row.serial,
+                                                        workorderId: row.workorder,
+                                                    },
+                                                }) })] }), _jsx(DataTableActions, { tpage: { page, rowsPerPage, setPage: (p) => setPages(pages.set(path, p)), setRowsPerPage }, count: points.material.length, zoom: tzoom.zoom })] }) })] }, path));
+        }) }));
+});

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

@@ -0,0 +1,12 @@
+import { InspectionsByPartAndType } from "../../cell-status/inspections.js";
+export interface InspectionSankeyProps {
+    readonly inspectionlogs: InspectionsByPartAndType;
+    readonly default_date_range: Date[];
+    readonly zoomType?: "Last30Days" | "ZoomIntoRange" | "ExtendDays";
+    readonly subtitle?: string;
+    readonly restrictToPart?: string;
+    readonly onlyTable?: boolean;
+    readonly extendDateRange?: (numDays: number) => void;
+    readonly hideOpenDetailColumn?: boolean;
+}
+export declare function InspectionSankey(props: InspectionSankeyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/analysis/InspectionSankey.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, 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 { useState, memo, useMemo } from "react";
+import { Select, MenuItem, Tooltip, IconButton, Box, Typography, FormControl } from "@mui/material";
+import { ImportExport } from "@mui/icons-material";
+import { sankey, sankeyJustify, sankeyLinkHorizontal } from "d3-sankey";
+import { PartIdenticon } from "../station-monitor/Material.js";
+import { inspectionDataToSankey } from "../../data/inspection-sankey.js";
+import { PartAndInspType, } from "../../cell-status/inspections.js";
+import InspectionDataTable from "./InspectionDataTable.js";
+import { copyInspectionEntriesToClipboard } from "../../data/results.inspection.js";
+import { isDemoAtom } from "../routes.js";
+import { green } from "@mui/material/colors";
+import { localPoint } from "../../util/chart-helpers.js";
+import { atom, useAtom, useSetAtom } from "jotai";
+import { atomWithDefault } from "jotai/utils";
+import { ChartWithTooltip } from "../ChartTooltip.js";
+const marginLeft = 20;
+const marginTop = 20;
+const marginRight = 120;
+const marginBottom = 20;
+function LinkDisplay({ link, path, strokeWidth, setTooltip, }) {
+    const [over, setOver] = useState(false);
+    if (path === null)
+        return null;
+    function pointerOver(e) {
+        const pt = localPoint(e);
+        if (pt === null)
+            return;
+        setTooltip({ left: pt.x, top: pt.y, data: link });
+        setOver(true);
+    }
+    function pointerOut() {
+        setOver(false);
+        setTooltip(null);
+    }
+    return (_jsx("path", { d: path, stroke: over ? green[600] : green[300], strokeWidth: strokeWidth, opacity: 0.2, fill: "none", onMouseMove: pointerOver, onMouseLeave: pointerOut }));
+}
+function NodeDisplay({ node }) {
+    if (node.x1 === undefined || node.x0 === undefined || node.y1 === undefined || node.y0 === undefined)
+        return null;
+    return (_jsxs("g", { transform: `translate(${node.x0}, ${node.y0})`, children: [_jsx("rect", { width: node.x1 - node.x0, height: node.y1 - node.y0, fill: green[800], opacity: 0.8, stroke: "none" }), _jsx("text", { x: 18, y: (node.y1 - node.y0) / 2, children: node.name })] }));
+}
+const SankeyDisplay = memo(function InspectionSankeyDiagram({ data, setTooltip, parentHeight, parentWidth, }) {
+    const { nodes, links } = useMemo(() => {
+        const { nodes, links } = inspectionDataToSankey(data);
+        if (nodes.length === 0) {
+            return { nodes: [], links: [] };
+        }
+        const generator = sankey()
+            .nodeWidth(10)
+            .nodePadding(10)
+            .nodeAlign(sankeyJustify)
+            .extent([
+            [marginLeft, marginTop],
+            [parentWidth - marginRight, parentHeight - marginBottom - marginTop],
+        ]);
+        generator({ nodes, links });
+        return { nodes: nodes, links: links };
+    }, [data, parentWidth, parentHeight]);
+    const path = sankeyLinkHorizontal();
+    return (_jsxs("svg", { width: parentWidth, height: parentHeight, children: [_jsx("g", { children: nodes.map((node, i) => (_jsx(NodeDisplay, { node: node }, i))) }), _jsx("g", { children: links.map((link, i) => (_jsx(LinkDisplay, { link: link, path: path(link), strokeWidth: Math.max(link.width ?? 1, 1), setTooltip: setTooltip }, i))) })] }));
+});
+function LinkTooltip({ tooltip }) {
+    if (tooltip === null)
+        return null;
+    return (_jsxs("div", { children: [tooltip.data.source.name, " \u279E ", tooltip.data.target.name, ": ", tooltip.data.value, " parts"] }));
+}
+const InspectionDiagram = memo(function InspectionDiagram({ data, }) {
+    const tooltipAtom = useMemo(() => atom(null), []);
+    const setTooltip = useSetAtom(tooltipAtom);
+    return (_jsx("div", { style: { position: "relative" }, children: _jsx(ChartWithTooltip, { sx: {
+                height: { xs: "calc(100vh - 230px)", md: "calc(100vh - 182px)", xl: "calc(100vh - 130px)" },
+                width: "100%",
+            }, chart: ({ height, width }) => (_jsx(SankeyDisplay, { data: data, setTooltip: setTooltip, parentHeight: height, parentWidth: width })), tooltipAtom: tooltipAtom, TooltipContent: LinkTooltip }) }));
+});
+const selectedPartAtom = atomWithDefault((get) => (get(isDemoAtom) ? "aaa" : undefined));
+const selectedInspTypeAtom = atomWithDefault((get) => get(isDemoAtom) ? "CMM" : undefined);
+const showTableAtom = atom(false);
+export function InspectionSankey(props) {
+    const [curPart, setSelectedPart] = useAtom(selectedPartAtom);
+    const [selectedInspectType, setSelectedInspectType] = useAtom(selectedInspTypeAtom);
+    const [showTable, setShowTable] = useAtom(showTableAtom);
+    let curData;
+    const selectedPart = props.restrictToPart || curPart;
+    if (selectedPart && selectedInspectType) {
+        curData =
+            props.inspectionlogs.get(new PartAndInspType(selectedPart, selectedInspectType))?.valuesToLazySeq() ??
+                [];
+    }
+    const parts = props.inspectionlogs
+        .keysToLazySeq()
+        .map((x) => x.part)
+        .distinct()
+        .toSortedArray((x) => x);
+    const inspTypes = props.inspectionlogs
+        .keysToLazySeq()
+        .map((e) => e.inspType)
+        .distinct()
+        .toSortedArray((x) => x);
+    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: [props.subtitle ? _jsx(Typography, { variant: "subtitle1", children: props.subtitle }) : undefined, _jsx(Box, { flexGrow: 1 }), props.onlyTable ? undefined : (_jsx(FormControl, { size: "small", children: _jsxs(Select, { autoWidth: true, value: showTable ? "table" : "sankey", onChange: (e) => setShowTable(e.target.value === "table"), children: [_jsx(MenuItem, { value: "sankey", children: "Sankey" }, "sankey"), _jsx(MenuItem, { value: "table", children: "Table" }, "table")] }) })), _jsx(FormControl, { size: "small", children: _jsxs(Select, { name: "inspection-sankey-select-type", autoWidth: true, displayEmpty: true, style: { marginRight: "1em", marginLeft: "1em" }, value: selectedInspectType || "", onChange: (e) => setSelectedInspectType(e.target.value), children: [selectedInspectType ? undefined : (_jsx(MenuItem, { value: "", children: _jsx("em", { children: "Select Inspection Type" }) }, 0)), inspTypes.map((n) => (_jsx(MenuItem, { value: n, children: n }, n)))] }) }), props.restrictToPart === undefined ? (_jsx(FormControl, { size: "small", children: _jsxs(Select, { name: "inspection-sankey-select-part", autoWidth: true, displayEmpty: true, value: selectedPart || "", onChange: (e) => setSelectedPart(e.target.value), children: [selectedPart ? undefined : (_jsx(MenuItem, { value: "", children: _jsx("em", { children: "Select Part" }) }, 0)), parts.map((n) => (_jsx(MenuItem, { value: n, children: _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [_jsx(PartIdenticon, { part: n, size: 30 }), _jsx("span", { style: { marginRight: "1em" }, children: n })] }) }, n)))] }) })) : undefined, curData ? (_jsx(Tooltip, { title: "Copy to Clipboard", children: _jsx(IconButton, { onClick: () => curData
+                                ? copyInspectionEntriesToClipboard(selectedPart || "", selectedInspectType || "", curData)
+                                : undefined, style: { height: "25px", paddingTop: 0, paddingBottom: 0 }, size: "large", children: _jsx(ImportExport, {}) }) })) : undefined] }), _jsx("main", { children: curData ? (showTable || props.onlyTable ? (_jsx(InspectionDataTable, { zoomType: props.zoomType, points: curData, default_date_range: props.default_date_range, extendDateRange: props.extendDateRange, hideOpenDetailColumn: props.hideOpenDetailColumn })) : (_jsx(InspectionDiagram, { data: curData }))) : undefined })] }));
+}

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

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