@seedtactics/insight-client 16.4.0

package/dist/components/station-monitor/SystemOverview.js

@@ -0,0 +1,439 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* Copyright (c) 2024, John Lenz
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+
+    * Redistributions in binary form must reproduce the above
+      copyright notice, this list of conditions and the following
+      disclaimer in the documentation and/or other materials provided
+      with the distribution.
+
+    * Neither the name of John Lenz, Black Maple Software, SeedTactics,
+      nor the names of other contributors may be used to endorse or
+      promote products derived from this software without specific
+      prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+import { useState, useRef, memo } from "react";
+import { Paper, ButtonBase, Box, Typography, Collapse, Stack, Menu, MenuItem, LinearProgress, Badge, Button, Dialog, DialogContent, AppBar, Toolbar, IconButton, useTheme, } from "@mui/material";
+import { Close as CloseIcon } from "@mui/icons-material";
+import { InProcMaterial, MaterialAction, MaterialDialog, PartIdenticon } from "./Material.js";
+import { ActionType, LocType, PalletLocationEnum, } from "../../network/api.js";
+import { currentStatus, secondsSinceEpochAtom } from "../../cell-status/current-status.js";
+import { LazySeq, OrderedMap } from "@seedtactics/immutable-collections";
+import { materialDialogOpen } from "../../cell-status/material-details.js";
+import { last30Jobs } from "../../cell-status/scheduled-jobs.js";
+import { addDays } from "date-fns";
+import { durationToSeconds } from "../../util/parseISODuration.js";
+import { InvalidateCycleDialogButton, InvalidateCycleDialogContent, SwapMaterialButtons, SwapMaterialDialogContent, } from "./InvalidateCycle.js";
+import { QuarantineMatButton } from "./QuarantineButton.js";
+import { SelectInspTypeDialog, SignalInspectionButton } from "./SelectInspType.js";
+import { useSetTitle } from "../routes.js";
+import { useAtomValue, useSetAtom } from "jotai";
+const CollapsedIconSize = 45;
+const rowSize = CollapsedIconSize + 10; // each material row has 5px above and 5px below for padding
+function useCellOverview() {
+    const currentSt = useAtomValue(currentStatus);
+    const jobs = useAtomValue(last30Jobs);
+    const matByPal = LazySeq.of(currentSt.material)
+        .filter((m) => m.location.type === LocType.OnPallet || m.action.type === ActionType.Loading)
+        .toRLookup((m) => m.location.palletNum ?? m.action.loadOntoPalletNum ?? 0);
+    let loads = LazySeq.ofObject(currentSt.pallets)
+        .filter(([_, p]) => p.currentPalletLocation.loc === PalletLocationEnum.LoadUnload)
+        .toOrderedMap(([_, p]) => [
+        p.currentPalletLocation.num,
+        {
+            lulNum: p.currentPalletLocation.num,
+            pal: { pallet: p, mats: matByPal.get(p.palletNum) ?? [] },
+        },
+    ]);
+    let machines = LazySeq.ofObject(currentSt.pallets)
+        .filter(([, p]) => p.currentPalletLocation.loc === PalletLocationEnum.Machine ||
+        p.currentPalletLocation.loc === PalletLocationEnum.MachineQueue)
+        .map(([_, p]) => p)
+        .groupBy((p) => p.currentPalletLocation.group, (p) => p.currentPalletLocation.num)
+        .toLookupOrderedMap(([[statGroup, _statNum], _pals]) => statGroup, ([[_statGroup, statNum], _pals]) => statNum, ([[statGroup, statNum], pals]) => {
+        const worktable = pals.find((p) => p.currentPalletLocation.loc === PalletLocationEnum.Machine);
+        const worktableMats = worktable ? (matByPal.get(worktable.palletNum) ?? []) : null;
+        const rotary = pals.find((p) => p.currentPalletLocation.loc === PalletLocationEnum.MachineQueue);
+        const rotaryMats = rotary ? (matByPal.get(rotary.palletNum) ?? []) : null;
+        let isInbound = true;
+        const rotaryMat0 = rotaryMats?.[0];
+        if (rotaryMat0 &&
+            rotaryMat0.lastCompletedMachiningRouteStopIndex !== null &&
+            rotaryMat0.lastCompletedMachiningRouteStopIndex !== undefined) {
+            const stop = currentSt.jobs[rotaryMat0.jobUnique]?.procsAndPaths?.[rotaryMat0.process - 1]?.paths?.[rotaryMat0.path - 1]?.stops?.[rotaryMat0.lastCompletedMachiningRouteStopIndex];
+            if (stop.stationGroup === statGroup && stop.stationNums.includes(statNum)) {
+                isInbound = false;
+            }
+        }
+        if (isInbound) {
+            return {
+                name: statGroup + " " + statNum.toString(),
+                inbound: rotary ? { pallet: rotary, mats: rotaryMats ?? [] } : null,
+                worktable: worktable ? { pallet: worktable, mats: worktableMats ?? [] } : null,
+                outbound: null,
+            };
+        }
+        else {
+            return {
+                name: statGroup + " " + statNum.toString(),
+                inbound: null,
+                worktable: worktable ? { pallet: worktable, mats: worktableMats ?? [] } : null,
+                outbound: rotary ? { pallet: rotary, mats: rotaryMats ?? [] } : null,
+            };
+        }
+    });
+    const stockerPals = LazySeq.ofObject(currentSt.pallets)
+        .filter(([_, p]) => p.currentPalletLocation.loc === PalletLocationEnum.Buffer ||
+        p.currentPalletLocation.loc === PalletLocationEnum.Cart)
+        .collect(([_, p]) => {
+        const mats = matByPal.get(p.palletNum);
+        if (!mats || mats.length === 0)
+            return null;
+        return { pallet: p, mats };
+    })
+        .toOrderedMap((p) => [p.pallet.palletNum, p]);
+    let maxLoadNum = 1;
+    let maxNumFacesOnPallet = 1;
+    const cutoff = addDays(new Date(), -7);
+    // now add empty locations
+    const allPaths = jobs
+        .valuesToLazySeq()
+        .filter((j) => j.routeEndUTC > cutoff)
+        .concat(LazySeq.ofObject(currentSt.jobs).map(([_, j]) => j))
+        .flatMap((j) => j.procsAndPaths)
+        .flatMap((p) => p.paths);
+    for (const path of allPaths) {
+        for (const lul of path.load.concat(path.unload)) {
+            maxLoadNum = Math.max(maxLoadNum, lul);
+        }
+        if (path.face) {
+            maxNumFacesOnPallet = Math.max(maxNumFacesOnPallet, path.face);
+        }
+        for (const stop of path.stops) {
+            machines = machines.alter(stop.stationGroup, (stationStatuses) => {
+                stationStatuses = stationStatuses ?? OrderedMap.empty();
+                for (const num of stop.stationNums) {
+                    stationStatuses = stationStatuses.alter(num, (status) => {
+                        if (status)
+                            return status;
+                        return {
+                            name: stop.stationGroup + " " + num.toString(),
+                            inbound: null,
+                            worktable: null,
+                            outbound: null,
+                        };
+                    });
+                }
+                return stationStatuses;
+            });
+        }
+    }
+    for (let i = 1; i <= maxLoadNum; i++) {
+        loads = loads.alter(i, (status) => {
+            if (status)
+                return status;
+            return {
+                lulNum: i,
+                pal: null,
+            };
+        });
+    }
+    for (const pal of Object.values(currentSt.pallets)) {
+        maxNumFacesOnPallet = Math.max(maxNumFacesOnPallet, pal.numFaces);
+    }
+    for (const mat of currentSt.material) {
+        if (mat.location.face !== null && mat.location.face !== undefined) {
+            maxNumFacesOnPallet = Math.max(maxNumFacesOnPallet, mat.location.face);
+        }
+    }
+    let machAtLoad = OrderedMap.empty();
+    if (currentSt.machineLocations && currentSt.machineLocations.length > 0) {
+        for (const mach of currentSt.machineLocations) {
+            // remove machine status
+            machines = machines.alter(mach.machineGroup, (old) => {
+                if (!old || mach.machineNum === undefined)
+                    return old;
+                const n = old.delete(mach.machineNum);
+                if (n.size === 0)
+                    return undefined;
+                return n;
+            });
+            for (const lulNum of mach.possibleLoadStations) {
+                // remove and lookup old load status
+                let lul;
+                loads = loads.alter(lulNum, (s) => {
+                    lul = s;
+                    return undefined;
+                });
+                const allMats = LazySeq.of(lul?.pal?.mats ?? []).toLookup((m) => {
+                    if (m.action.type === ActionType.Machining)
+                        return "Machining";
+                    if (m.action.type !== ActionType.Waiting)
+                        return "Loading";
+                    if (m.lastCompletedMachiningRouteStopIndex !== null &&
+                        m.lastCompletedMachiningRouteStopIndex !== undefined) {
+                        const stop = currentSt.jobs[m.jobUnique]?.procsAndPaths?.[m.process - 1]?.paths?.[m.path - 1]?.stops?.[m.lastCompletedMachiningRouteStopIndex];
+                        if (!stop ||
+                            (stop.stationGroup === mach.machineGroup && stop.stationNums.includes(mach.machineNum))) {
+                            return "Loading";
+                        }
+                    }
+                    return "Ready";
+                });
+                const newStatus = {
+                    lulNum,
+                    machineMoving: mach.moving,
+                    machineCurrentlyAtLoad: lulNum === mach.currentLoadStation ? { group: mach.machineGroup, num: mach.machineNum } : null,
+                    readyMats: allMats.get("Ready") ?? [],
+                    machiningMats: allMats.get("Machining") ?? [],
+                    loadingMats: allMats.get("Loading") ?? [],
+                };
+                machAtLoad = machAtLoad.set(lulNum, newStatus);
+            }
+        }
+    }
+    return {
+        machines: machines.mapValues((group) => group.valuesToAscLazySeq().toRArray()),
+        loads: loads.valuesToAscLazySeq().toRArray(),
+        stockerPals: stockerPals.valuesToAscLazySeq().toRArray(),
+        machineAtLoad: machAtLoad.valuesToAscLazySeq().toRArray(),
+        maxNumFacesOnPallet,
+    };
+}
+function MaterialIcon({ mats }) {
+    const [open, setOpen] = useState(false);
+    const closeTimeout = useRef(null);
+    const btnRef = useRef(null);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const setMatToShow = useSetAtom(materialDialogOpen);
+    const curSt = useAtomValue(currentStatus);
+    function enter() {
+        if (closeTimeout.current !== null) {
+            clearTimeout(closeTimeout.current);
+            closeTimeout.current = null;
+        }
+        setOpen(true);
+    }
+    function leave() {
+        closeTimeout.current = setTimeout(() => {
+            setOpen(false);
+            closeTimeout.current = null;
+        }, 200);
+    }
+    function click() {
+        if (mats.length === 1) {
+            setMatToShow({ type: "MatDetails", details: mats[0] });
+        }
+        else {
+            setMenuOpen(true);
+        }
+    }
+    function faceName(pallet, faceNum) {
+        if (faceNum === null || faceNum === undefined)
+            return null;
+        const name = pallet != null && pallet != undefined ? curSt.pallets[pallet]?.faceNames?.[faceNum - 1] : null;
+        return name ?? "Face: " + faceNum.toString();
+    }
+    return (_jsxs(Box, { sx: { width: CollapsedIconSize, height: CollapsedIconSize, overflow: "visible" }, children: [_jsx(Paper, { elevation: 4, onPointerEnter: enter, onPointerLeave: leave, sx: { position: "relative", zIndex: open ? 10 : 0, width: "max-content", height: "max-content" }, children: _jsx(Badge, { badgeContent: mats.length > 1 ? mats.length : 0, color: "secondary", children: _jsx(ButtonBase, { focusRipple: true, onClick: click, ref: btnRef, children: _jsx(Collapse, { orientation: "horizontal", in: open, collapsedSize: CollapsedIconSize, children: _jsxs(Box, { display: "flex", children: [_jsx(PartIdenticon, { part: mats[0].partName, size: CollapsedIconSize }), _jsx(Box, { marginLeft: "10px", marginRight: "10px", whiteSpace: "nowrap", textAlign: "left", children: _jsx(Collapse, { in: open, collapsedSize: CollapsedIconSize, children: _jsxs(Stack, { direction: "column", marginBottom: "0.2em", children: [_jsxs(Typography, { variant: "h6", children: [mats[0].partName, "-", mats[0].process] }), _jsx("div", { children: _jsx("small", { children: faceName(mats[0].location.palletNum, mats[0].location.face) ??
+                                                                faceName(mats[0].action.loadOntoPalletNum, mats[0].action.loadOntoFace) }) }), LazySeq.of(mats).collect((mat) => mat.serial ? (_jsx("div", { children: _jsxs("small", { children: ["Serial: ", mat.serial] }) }, mat.materialID)) : undefined), _jsx("div", { children: _jsx(MaterialAction, { mat: mats[0] }) })] }) }) })] }) }) }) }) }), _jsx(Menu, { anchorEl: btnRef.current, open: menuOpen, onClose: () => setMenuOpen(false), anchorOrigin: { vertical: "top", horizontal: "left" }, children: LazySeq.of(mats).map((mat, idx) => (_jsx(MenuItem, { onClick: () => {
+                        setMenuOpen(false);
+                        setMatToShow({ type: "MatDetails", details: mat });
+                    }, children: mat.serial && mat.serial !== "" ? mat.serial : (idx + 1).toString() }, mat.materialID))) })] }));
+}
+function PalletFaces({ maxNumFaces, mats, loadingOntoPallet, noFilter, showExpanded, }) {
+    if (showExpanded && maxNumFaces === 1) {
+        return (_jsx(Box, { display: "flex", flexDirection: "column", flexWrap: "wrap", children: mats.map((mat) => (_jsx(InProcMaterial, { mat: mat }, mat.materialID))) }));
+    }
+    else {
+        const byFace = loadingOntoPallet
+            ? LazySeq.of(mats)
+                .filter((m) => noFilter || m.location.type !== LocType.OnPallet)
+                .orderedGroupBy((m) => m.action.loadOntoFace ?? 1)
+            : LazySeq.of(mats)
+                .filter((m) => noFilter || m.location.type === LocType.OnPallet)
+                .orderedGroupBy((m) => m.action.type === ActionType.Loading ? (m.action.loadOntoFace ?? 1) : (m.location.face ?? 1));
+        return (_jsx(Box, { display: "grid", gridTemplateRows: `${CollapsedIconSize}px`, gridTemplateColumns: `repeat(${maxNumFaces}, ${CollapsedIconSize}px)`, columnGap: "5px", height: "100%", alignContent: "center", justifyContent: "center", children: byFace.map(([face, mats]) => (_jsx(Box, { gridColumn: face, gridRow: 1, children: _jsx(MaterialIcon, { mats: mats }) }, face))) }));
+    }
+}
+function gridTemplateColumns(maxNumFaces, includeLabelCol) {
+    // each material column is at least CollapsedIconSize * (maxNumFaces) for the icon + 5px * (maxNumFaces + 1) for the columnGap in PalletFaces
+    const colSize = CollapsedIconSize * maxNumFaces + 5 * (maxNumFaces + 1);
+    if (includeLabelCol) {
+        return `60px ${Math.max(colSize, 100)}px`;
+    }
+    else {
+        return `${Math.max(colSize, 100)}px`;
+    }
+}
+export function formatSeconds(totalSeconds) {
+    totalSeconds = Math.round(totalSeconds);
+    const secs = Math.abs(totalSeconds) % 60;
+    const totalMins = Math.floor(Math.abs(totalSeconds) / 60);
+    const mins = totalMins % 60;
+    const hours = Math.floor(totalMins / 60);
+    if (hours > 0) {
+        return `${totalSeconds < 0 ? "-" : ""}${hours}:${mins.toString().padStart(2, "0")}:${secs
+            .toString()
+            .padStart(2, "0")}`;
+    }
+    else {
+        return `${totalSeconds < 0 ? "-" : ""}${mins}:${secs.toString().padStart(2, "0")}`;
+    }
+}
+function useRemainingMachineTime(material) {
+    const mat = material?.find((m) => m.action.type === ActionType.Machining);
+    const elapsedDurationFromCurSt = mat?.action?.elapsedMachiningTime;
+    const remainingDurationFromCurSt = mat?.action.expectedRemainingMachiningTime;
+    const currentStTime = useAtomValue(currentStatus).timeOfCurrentStatusUTC;
+    const secondsSinceEpoch = useAtomValue(secondsSinceEpochAtom);
+    let remainingSecs = null;
+    if (remainingDurationFromCurSt) {
+        const remainingSecsInCurSt = durationToSeconds(remainingDurationFromCurSt);
+        remainingSecs = remainingSecsInCurSt - (secondsSinceEpoch - Math.floor(currentStTime.getTime() / 1000));
+    }
+    let elapsedSecs = null;
+    if (elapsedDurationFromCurSt) {
+        const elapsedSecsInCurSt = durationToSeconds(elapsedDurationFromCurSt);
+        elapsedSecs = elapsedSecsInCurSt + (secondsSinceEpoch - Math.floor(currentStTime.getTime() / 1000));
+    }
+    if (remainingSecs !== null && elapsedSecs !== null) {
+        return [
+            true,
+            `${formatSeconds(elapsedSecs)} / ${formatSeconds(remainingSecs)}`,
+            remainingSecs < 0 ? -1 : (elapsedSecs / (elapsedSecs + remainingSecs)) * 100,
+        ];
+    }
+    else if (remainingSecs !== null) {
+        return [true, " / " + formatSeconds(remainingSecs), remainingSecs < 0 ? -1 : null];
+    }
+    else if (elapsedSecs !== null) {
+        return [true, formatSeconds(elapsedSecs), null];
+    }
+    else {
+        return [!!mat, "Idle", null];
+    }
+}
+function MachineLabel({ machine }) {
+    const [machining, status, elapsed] = useRemainingMachineTime(machine.worktable?.mats);
+    return (_jsxs("div", { children: [_jsx(Typography, { variant: "h5", children: machine.name }), _jsx(Typography, { variant: "subtitle1", children: status }), machining ? (elapsed === null ? (_jsx(LinearProgress, {})) : elapsed < 0 ? (_jsx(LinearProgress, { color: "error" })) : (_jsx(LinearProgress, { variant: "determinate", value: elapsed }))) : undefined] }));
+}
+function Machine({ maxNumFaces, machine }) {
+    return (_jsxs(Box, { display: "grid", border: "1px solid black", margin: "5px", gridTemplateRows: `auto ${rowSize}px ${rowSize}px ${rowSize}px`, gridTemplateColumns: gridTemplateColumns(maxNumFaces, true), gridTemplateAreas: `"machname machname" "inboundpal inboundmat" "worktablepal worktablemat" "outboundpal outboundmat"`, children: [_jsx(Box, { gridArea: "machname", padding: "0.2em", borderBottom: "1px solid black", children: _jsx(MachineLabel, { machine: machine }) }), _jsx(Box, { gridArea: "inboundpal", borderRight: "1px solid black", borderBottom: "1px solid black", padding: "2px", children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", textAlign: "center", children: "In" }), machine.inbound ? (_jsx(Typography, { variant: "h6", textAlign: "center", children: machine.inbound.pallet.palletNum })) : undefined] }) }), _jsx(Box, { gridArea: "inboundmat", borderBottom: "1px solid black", children: machine.inbound ? _jsx(PalletFaces, { mats: machine.inbound.mats, maxNumFaces: maxNumFaces }) : undefined }), _jsx(Box, { gridArea: "worktablepal", borderRight: "1px solid black", borderBottom: "1px solid black", padding: "2px", children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", textAlign: "center", children: "Work" }), machine.worktable ? (_jsx(Typography, { variant: "h6", textAlign: "center", children: machine.worktable.pallet.palletNum })) : undefined] }) }), _jsx(Box, { gridArea: "worktablemat", borderBottom: "1px solid black", children: machine.worktable ? (_jsx(PalletFaces, { mats: machine.worktable.mats, maxNumFaces: maxNumFaces })) : undefined }), _jsx(Box, { gridArea: "outboundpal", borderRight: "1px solid black", padding: "2px", children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", textAlign: "center", children: "Out" }), machine.outbound ? (_jsx(Typography, { variant: "h6", textAlign: "center", children: machine.outbound.pallet.palletNum })) : undefined] }) }), _jsx(Box, { gridArea: "outboundmat", children: machine.outbound ? (_jsx(PalletFaces, { mats: machine.outbound.mats, maxNumFaces: maxNumFaces })) : undefined })] }));
+}
+function useElapsedLoadTime(material) {
+    const mat = material?.find((m) => m.action.type === ActionType.Loading ||
+        m.action.type === ActionType.UnloadToCompletedMaterial ||
+        m.action.type === ActionType.UnloadToInProcess);
+    const elapsedDurationFromCurSt = mat?.action?.elapsedLoadUnloadTime;
+    const currentStTime = useAtomValue(currentStatus).timeOfCurrentStatusUTC;
+    const secondsSinceEpoch = useAtomValue(secondsSinceEpochAtom);
+    let elapsedSecs = null;
+    if (elapsedDurationFromCurSt) {
+        const elapsedSecsInCurSt = durationToSeconds(elapsedDurationFromCurSt);
+        elapsedSecs = elapsedSecsInCurSt + (secondsSinceEpoch - Math.floor(currentStTime.getTime() / 1000));
+    }
+    if (elapsedSecs !== null) {
+        return formatSeconds(elapsedSecs);
+    }
+    else {
+        return "Idle";
+    }
+}
+function LoadStationLabel({ load }) {
+    const status = useElapsedLoadTime(load.pal?.mats);
+    return (_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "baseline", children: [_jsxs(Typography, { variant: "h5", children: ["L/U ", load.lulNum] }), _jsx(Typography, { variant: "body1", children: status })] }));
+}
+function LoadStation({ maxNumFaces, load }) {
+    return (_jsxs(Box, { display: "grid", border: "1px solid black", margin: "5px", gridTemplateRows: `auto ${rowSize}px ${rowSize}px`, gridTemplateColumns: gridTemplateColumns(maxNumFaces, true), gridTemplateAreas: `"lulname lulname" "loading loadingmat" "currentpal currentmat"`, children: [_jsx(Box, { gridArea: "lulname", padding: "0.2em", borderBottom: "1px solid black", children: _jsx(LoadStationLabel, { load: load }) }), _jsx(Box, { gridArea: "loading", borderRight: "1px solid black", borderBottom: "1px solid black", padding: "2px", children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", textAlign: "center", children: "To" }), _jsx(Typography, { variant: "body1", textAlign: "center", children: "Load" })] }) }), _jsx(Box, { sx: { gridArea: "loadingmat", borderBottom: "1px solid black" }, children: load.pal ? (_jsx(PalletFaces, { mats: load.pal.mats, maxNumFaces: maxNumFaces, loadingOntoPallet: true })) : undefined }), _jsx(Box, { gridArea: "currentpal", borderRight: "1px solid black", padding: "2px", children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", textAlign: "center", children: "Pallet" }), load.pal ? (_jsx(Typography, { variant: "h6", textAlign: "center", children: load.pal.pallet.palletNum })) : undefined] }) }), _jsx(Box, { gridArea: "currentmat", children: load.pal ? _jsx(PalletFaces, { mats: load.pal.mats, maxNumFaces: maxNumFaces }) : undefined })] }));
+}
+function MachineAtLoadLabel({ status }) {
+    const lulStatus = useElapsedLoadTime(status.loadingMats);
+    const [machining, mcStatus, mcElapsed] = useRemainingMachineTime(status.machiningMats);
+    return (_jsxs("div", { children: [_jsxs(Typography, { variant: "h5", children: ["Station ", status.lulNum] }), status.machineCurrentlyAtLoad ? (_jsxs(_Fragment, { children: [_jsxs(Typography, { variant: "h5", children: [status.machineCurrentlyAtLoad.group, " ", status.machineCurrentlyAtLoad.num] }), _jsx(Typography, { variant: "subtitle1", children: mcStatus === "Idle" ? lulStatus : mcStatus }), machining ? (mcElapsed === null ? (_jsx(LinearProgress, {})) : mcElapsed < 0 ? (_jsx(LinearProgress, { color: "error" })) : (_jsx(LinearProgress, { variant: "determinate", value: mcElapsed }))) : undefined] })) : (_jsxs(_Fragment, { children: [status.machineMoving ? _jsx(Typography, { variant: "subtitle2", children: "Machine Moving" }) : undefined, _jsxs(Typography, { variant: "subtitle1", children: ["Loading ", lulStatus] })] }))] }));
+}
+function MachineAtLoad({ maxNumFaces, status }) {
+    return (_jsxs(Box, { display: "grid", border: "1px solid black", margin: "5px", gridTemplateRows: `minmax(104px, max-content) repeat(3, ${maxNumFaces > 1 ? rowSize.toString() + "px" : "minmax(110px, max-content)"})`, gridTemplateColumns: maxNumFaces === 1 ? "60px minmax(230px, max-content)" : gridTemplateColumns(maxNumFaces, true), gridTemplateAreas: `"name name" "ready readymat" "machining machiningmat" "loadstation loadstationmat"`, children: [_jsx(Box, { gridArea: "name", padding: "0.2em", borderBottom: "1px solid black", children: _jsx(MachineAtLoadLabel, { status: status }) }), _jsx(Box, { gridArea: "ready", borderRight: "1px solid black", borderBottom: "1px solid black", padding: "2px", children: _jsx(Typography, { variant: "body1", textAlign: "center", children: "Ready" }) }), _jsx(Box, { gridArea: "readymat", borderBottom: "1px solid black", display: "flex", flexDirection: "column", justifyContent: "center", children: _jsx(PalletFaces, { mats: status.readyMats, maxNumFaces: maxNumFaces, showExpanded: true }) }), _jsx(Box, { gridArea: "machining", borderRight: "1px solid black", borderBottom: "1px solid black", padding: "2px", children: _jsx(Typography, { variant: "body1", textAlign: "center", children: "Work" }) }), _jsx(Box, { gridArea: "machiningmat", borderBottom: "1px solid black", display: "flex", flexDirection: "column", justifyContent: "center", children: _jsx(PalletFaces, { mats: status.machiningMats, maxNumFaces: maxNumFaces, showExpanded: true }) }), _jsx(Box, { gridArea: "loadstation", borderRight: "1px solid black", padding: "2px", children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", textAlign: "center", children: "Load" }), _jsx(Typography, { variant: "body1", textAlign: "center", children: "Station" })] }) }), _jsx(Box, { gridArea: "loadstationmat", display: "flex", flexDirection: "column", justifyContent: "center", children: _jsx(PalletFaces, { mats: status.loadingMats, maxNumFaces: maxNumFaces, showExpanded: true, noFilter: true }) })] }));
+}
+function StockerPallet({ maxNumFaces, pallet }) {
+    return (_jsxs(Box, { display: "grid", border: "1px solid black", margin: "5px", gridTemplateRows: `auto ${rowSize}px`, gridTemplateColumns: gridTemplateColumns(maxNumFaces, false), gridTemplateAreas: `"palname" "palmat"`, children: [_jsxs(Typography, { variant: "h5", gridArea: "palname", padding: "0.2em", borderBottom: "1px solid black", children: ["Pallet ", pallet.pallet.palletNum] }), _jsx(Box, { gridArea: "palmat", children: _jsx(PalletFaces, { mats: pallet.mats, maxNumFaces: maxNumFaces }) })] }));
+}
+export const SystemOverview = memo(function SystemOverview({ overview }) {
+    return (_jsxs("div", { children: [overview.machines.toAscLazySeq().map(([group, machines]) => (_jsx(Box, { display: "flex", flexWrap: "wrap", justifyContent: "space-evenly", children: machines.map((machine) => (_jsx(Machine, { machine: machine, maxNumFaces: overview.maxNumFacesOnPallet }, machine.name))) }, group))), overview.loads.length > 0 ? (_jsx(Box, { display: "flex", flexWrap: "wrap", justifyContent: "space-evenly", children: overview.loads.map((machine) => (_jsx(LoadStation, { load: machine, maxNumFaces: overview.maxNumFacesOnPallet }, machine.lulNum))) })) : undefined, overview.machineAtLoad.length > 0 ? (_jsx(Box, { display: "flex", flexWrap: "wrap", justifyContent: "space-evenly", children: overview.machineAtLoad.map((status) => (_jsx(MachineAtLoad, { status: status, maxNumFaces: overview.maxNumFacesOnPallet }, status.lulNum))) })) : undefined, overview.stockerPals.length > 0 ? (_jsx(Box, { display: "flex", flexWrap: "wrap", justifyContent: "space-evenly", children: overview.stockerPals.map((pal) => (_jsx(StockerPallet, { pallet: pal, maxNumFaces: overview.maxNumFacesOnPallet }, pal.pallet.palletNum))) })) : undefined] }));
+});
+const SystemOverviewMaterialDialog = memo(function SystemOverviewMaterialDialog({ ignoreOperator, }) {
+    const [swapSt, setSwapSt] = useState(null);
+    const [invalidateSt, setInvalidateSt] = useState(null);
+    function onClose() {
+        setSwapSt(null);
+        setInvalidateSt(null);
+    }
+    return (_jsx(MaterialDialog, { onClose: onClose, allowNote: true, highlightProcsGreaterOrEqualTo: invalidateSt?.process ?? undefined, extraDialogElements: _jsxs(_Fragment, { children: [_jsx(SwapMaterialDialogContent, { st: swapSt, setState: setSwapSt }), invalidateSt !== null ? (_jsx(InvalidateCycleDialogContent, { st: invalidateSt, setState: setInvalidateSt })) : null] }), buttons: _jsxs(_Fragment, { children: [_jsx(QuarantineMatButton, { ignoreOperator: ignoreOperator }), _jsx(SignalInspectionButton, {}), _jsx(SwapMaterialButtons, { st: swapSt, setState: setSwapSt, onClose: onClose, ignoreOperator: ignoreOperator }), _jsx(InvalidateCycleDialogButton, { st: invalidateSt, setState: setInvalidateSt, onClose: onClose, ignoreOperator: ignoreOperator })] }) }));
+});
+export function SystemOverviewPage({ ignoreOperator, whiteBackground, }) {
+    useSetTitle("System Overview");
+    const overview = useCellOverview();
+    return (_jsxs("main", { style: {
+            padding: "10px",
+            minHeight: "calc(100vh - 64px)",
+            backgroundColor: whiteBackground ? "white" : "#F8F8F8",
+        }, children: [_jsx(SystemOverview, { overview: overview }), _jsx(SystemOverviewMaterialDialog, { ignoreOperator: ignoreOperator }), _jsx(SelectInspTypeDialog, {})] }));
+}
+const StatusIconSize = 30;
+function MachineIcon({ machine }) {
+    const theme = useTheme();
+    const [, , elapsed] = useRemainingMachineTime(machine.worktable?.mats);
+    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: 3, y: 3, width: 24, height: 24, stroke: "black" }), ";", _jsx("rect", { x: 3, y: 3, width: 24, height: 8, fill: machine.inbound === null ? "white" : theme.palette.secondary.main }), _jsx("rect", { x: 3, y: 11, width: 24, height: 8, fill: machine.worktable === null
+                    ? "white"
+                    : elapsed != null && elapsed < 0
+                        ? theme.palette.error.main
+                        : theme.palette.secondary.main }), _jsx("rect", { x: 3, y: 19, width: 24, height: 8, fill: machine.outbound === null ? "white" : theme.palette.secondary.main })] }));
+}
+function LoadStationIcon({ load }) {
+    const theme = useTheme();
+    return (_jsx("polygon", { points: "3,27 27,27 15,3", fill: load.pal === null ? "white" : theme.palette.secondary.main, stroke: "black" }));
+}
+function MachineAtLoadIcon({ status }) {
+    const theme = useTheme();
+    const [, , elapsed] = useRemainingMachineTime(status.machiningMats);
+    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: 3, y: 3, width: 24, height: 24, stroke: "black" }), ";", _jsx("rect", { x: 3, y: 3, width: 24, height: 8, fill: status.readyMats.length === 0 ? "white" : theme.palette.secondary.main }), _jsx("rect", { x: 3, y: 11, width: 24, height: 8, fill: status.machiningMats.length === 0
+                    ? "white"
+                    : elapsed != null && elapsed < 0
+                        ? theme.palette.error.main
+                        : theme.palette.secondary.main }), _jsx("rect", { x: 3, y: 19, width: 24, height: 8, fill: status.loadingMats.length === 0 ? "white" : theme.palette.secondary.main })] }));
+}
+const StatusIcons = memo(function StatusIcons({ overview }) {
+    const numMachines = overview.machines.toAscLazySeq().sumBy(([, machines]) => machines.length);
+    return (_jsx(Box, { sx: {
+            height: "1.5em",
+            "&:hover": {
+                backgroundColor: "primary.light",
+            },
+        }, children: _jsxs("svg", { viewBox: `0 0 ${(numMachines + overview.loads.length + overview.machineAtLoad.length) * StatusIconSize} ${StatusIconSize}`, preserveAspectRatio: "none", width: "140px", height: "1.5em", children: [_jsx("g", { children: overview.machines
+                        .toAscLazySeq()
+                        .flatMap(([, machines]) => machines)
+                        .map((machine, idx) => (_jsx("g", { transform: `translate(${idx * StatusIconSize})`, children: _jsx(MachineIcon, { machine: machine }) }, machine.name))) }), _jsx("g", { transform: `translate(${numMachines * StatusIconSize})`, children: overview.loads.map((load, idx) => (_jsx("g", { transform: `translate(${idx * StatusIconSize})`, children: _jsx(LoadStationIcon, { load: load }) }, load.lulNum))) }), _jsx("g", { transform: `translate(${(numMachines + overview.loads.length) * StatusIconSize})`, children: overview.machineAtLoad.map((status, idx) => (_jsx("g", { transform: `translate(${idx * StatusIconSize})`, children: _jsx(MachineAtLoadIcon, { status: status }) }, status.lulNum))) })] }) }));
+});
+export const SystemOverviewDialogButton = memo(function SystemOverviewDialogButton({ full, }) {
+    const [open, setOpen] = useState(false);
+    const overview = useCellOverview();
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: _jsx(StatusIcons, { overview: overview }) }), _jsxs(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "xl", fullScreen: full, children: [full ? (_jsx(AppBar, { sx: { position: "relative" }, children: _jsxs(Toolbar, { children: [_jsx(IconButton, { edge: "start", color: "inherit", onClick: () => setOpen(false), "aria-label": "close", children: _jsx(CloseIcon, {}) }), _jsx(Typography, { sx: { ml: 2, flex: 1 }, variant: "h6", component: "div", children: "System Overview" })] }) })) : undefined, _jsx(DialogContent, { children: _jsx(Box, { paddingBottom: "2em", paddingLeft: "5em", paddingRight: "5em", children: _jsx(SystemOverview, { overview: overview }) }) })] })] }));
+});

package/dist/components/station-monitor/Whiteboard.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { IInProcessMaterial } from "../../network/api.js";
+export interface SortableRegionProps {
+    readonly matIds: ReadonlyArray<number>;
+    readonly direction: "vertical" | "rect";
+    readonly queueName: string;
+    readonly renderDragOverlay: (mat: Readonly<IInProcessMaterial>) => ReactNode;
+    readonly children?: ReactNode;
+}
+export declare const SortableRegion: import("react").NamedExoticComponent<SortableRegionProps>;

package/dist/components/station-monitor/Whiteboard.js

@@ -0,0 +1,67 @@
+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 { memo, useState } from "react";
+import { closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useSensors, } from "@dnd-kit/core";
+import { rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { useAddExistingMaterialToQueue } from "../../cell-status/material-details.js";
+import { reorderQueuedMatInCurrentStatus } from "../../cell-status/current-status.js";
+import { currentOperator } from "../../data/operators.js";
+import { useAtomValue, useSetAtom } from "jotai";
+export const SortableRegion = memo(function SortableRegion(props) {
+    const [activeMat, setActiveMat] = useState(undefined);
+    const [addExistingMatToQueue] = useAddExistingMaterialToQueue();
+    const reorderQueuedMat = useSetAtom(reorderQueuedMatInCurrentStatus);
+    const operator = useAtomValue(currentOperator);
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: ({ active }) => setActiveMat(active.data.current.mat), onDragCancel: () => setActiveMat(undefined), onDragEnd: ({ active, over }) => {
+            if (over && active.id !== over.id) {
+                const activeMatId = active.id;
+                const overIdx = props.matIds.indexOf(over.id);
+                addExistingMatToQueue({
+                    materialId: active.id,
+                    queue: props.queueName,
+                    queuePosition: overIdx,
+                    operator: operator,
+                });
+                reorderQueuedMat({
+                    queue: props.queueName,
+                    matId: activeMatId,
+                    newIdx: overIdx,
+                });
+            }
+            setActiveMat(undefined);
+        }, children: _jsxs(SortableContext, { items: props.matIds, strategy: props.direction === "vertical" ? verticalListSortingStrategy : rectSortingStrategy, children: [props.children, _jsx(DragOverlay, { children: activeMat !== undefined ? props.renderDragOverlay(activeMat) : undefined })] }) }));
+});

package/dist/data/all-material-bins.d.ts

@@ -0,0 +1,45 @@
+import * as api from "../network/api.js";
+export type MaterialList = ReadonlyArray<Readonly<api.IInProcessMaterial>>;
+export type MaterialBinId = string;
+export declare const LoadStationBinId: MaterialBinId;
+export declare const PalletsBinId: MaterialBinId;
+export declare const ActiveQueuesBinId: MaterialBinId;
+export interface MaterialBinState {
+    readonly curBinOrder: ReadonlyArray<MaterialBinId>;
+}
+export declare const currentMaterialBinOrder: import("jotai").WritableAtom<readonly string[], [readonly string[] | typeof import("jotai/utils").RESET | ((prev: readonly string[]) => readonly string[] | typeof import("jotai/utils").RESET)], void>;
+export declare function moveMaterialBin(curBinOrder: ReadonlyArray<MaterialBinId>, oldIdx: number, newIdx: number): ReadonlyArray<MaterialBinId>;
+export declare enum MaterialBinType {
+    LoadStations = "Bin_LoadStations",
+    Pallets = "Bin_Pallets",
+    ActiveQueues = "Bin_ActiveQueues",
+    QuarantineQueues = "Bin_Quarantine"
+}
+export type MaterialBin = {
+    readonly type: MaterialBinType.LoadStations;
+    readonly binId: MaterialBinId;
+    readonly byLul: ReadonlyMap<number, MaterialList>;
+} | {
+    readonly type: MaterialBinType.Pallets;
+    readonly binId: MaterialBinId;
+    readonly byPallet: ReadonlyMap<string, MaterialList>;
+} | {
+    readonly type: MaterialBinType.ActiveQueues;
+    readonly binId: MaterialBinId;
+    readonly byQueue: ReadonlyMap<string, MaterialList>;
+} | {
+    readonly type: MaterialBinType.QuarantineQueues;
+    readonly binId: MaterialBinId;
+    readonly queueName: string;
+    readonly material: MaterialList;
+};
+export declare function selectAllMaterialIntoBins(curSt: Readonly<api.ICurrentStatus>, curBinOrder: ReadonlyArray<MaterialBinId>): ReadonlyArray<MaterialBin>;
+export declare function moveMaterialInBin(bins: ReadonlyArray<MaterialBin>, mat: Readonly<api.IInProcessMaterial>, queue: string, queuePosition: number): ReadonlyArray<MaterialBin>;
+export interface QuarantineBinAndIndex {
+    readonly bin: Extract<MaterialBin, {
+        type: MaterialBinType.QuarantineQueues;
+    }>;
+    readonly idx: number;
+}
+export declare function findMaterialInQuarantineQueues(matId: number, bins: ReadonlyArray<MaterialBin>): QuarantineBinAndIndex | null;
+export declare function findQueueInQuarantineQueues(queue: string, bins: ReadonlyArray<MaterialBin>): QuarantineBinAndIndex | null;