@seedtactics/insight-client 16.5.2 → 16.7.0

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

@@ -60,9 +60,30 @@ import { PromptForQueue } from "./QueuesAddMaterial.js";
 import { useAtomValue, useSetAtom } from "jotai";
 import { PrintLabelButton } from "./PrintedLabel.js";
 import { hideNonLoadingMaterialOnLoadStation } from "../../data/queue-material.js";
+import { basketDisplayName, loadStationDisplayName } from "../../cell-status/station-cycles.js";
+function encodeLoadStationRegionIdPart(value) {
+    return encodeURIComponent(value.toString());
+}
+function materialColumnTestId(region) {
+    switch (region.kind) {
+        case "queue":
+            return `load-station-queue-${encodeLoadStationRegionIdPart(region.label)}`;
+        case "baskets":
+            return "load-station-baskets";
+        case "free":
+            return "load-station-material";
+    }
+}
+function isLoadingToDisplayedTarget(mat, pallet, activeBasket) {
+    return (mat.action.type === api.ActionType.Loading &&
+        ((pallet !== undefined && mat.action.loadOntoPalletNum === pallet.palletNum) ||
+            (activeBasket !== undefined && mat.action.loadFromBasketId === activeBasket.basketId)));
+}
 function selectLoadStationAndQueueProps(loadNum, queues, curSt, hideNonLoading) {
     // search for pallet
     let pal;
+    let activeBasket;
+    const basketsToShow = new Set();
     if (loadNum >= 0) {
         for (const p of Object.values(curSt.pallets)) {
             if (p.currentPalletLocation.loc === api.PalletLocationEnum.LoadUnload &&
@@ -71,6 +92,16 @@ function selectLoadStationAndQueueProps(loadNum, queues, curSt, hideNonLoading)
                 break;
             }
         }
+        for (const basket of Object.values(curSt.baskets ?? {})) {
+            if (basket.locationNum !== loadNum)
+                continue;
+            if (basket.location === api.BasketLocationEnum.LoadUnload) {
+                activeBasket = basket;
+            }
+            else if (basket.location === api.BasketLocationEnum.LoadStationStaging) {
+                basketsToShow.add(basket.basketId);
+            }
+        }
     }
     // calculate queues to show, which is all configured queues and any queues with
     // material loading onto the pallet
@@ -83,6 +114,20 @@ function selectLoadStationAndQueueProps(loadNum, queues, curSt, hideNonLoading)
                 m.location.currentQueue) {
                 queuesToShow.add(m.location.currentQueue);
             }
+            // Loading from basket
+            if (m.action.type === api.ActionType.Loading &&
+                m.action.loadOntoPalletNum === pal.palletNum &&
+                m.action.loadFromBasketId) {
+                basketsToShow.add(m.action.loadFromBasketId);
+            }
+            // Unloading to basket
+            if ((m.action.type === api.ActionType.UnloadToInProcess ||
+                m.action.type === api.ActionType.UnloadToCompletedMaterial) &&
+                m.action.unloadToBasketId &&
+                m.location.type === api.LocType.OnPallet &&
+                m.location.palletNum === pal.palletNum) {
+                basketsToShow.add(m.action.unloadToBasketId);
+            }
             if ((m.action.type === api.ActionType.UnloadToInProcess ||
                 m.action.type === api.ActionType.UnloadToCompletedMaterial) &&
                 m.action.unloadIntoQueue &&
@@ -92,7 +137,25 @@ function selectLoadStationAndQueueProps(loadNum, queues, curSt, hideNonLoading)
             }
         }
     }
+    else if (activeBasket !== undefined) {
+        for (const m of curSt.material) {
+            if (m.location.type === api.LocType.InBasket &&
+                m.location.basketId === activeBasket.basketId &&
+                (m.action.type === api.ActionType.UnloadToInProcess ||
+                    m.action.type === api.ActionType.UnloadToCompletedMaterial) &&
+                m.action.unloadIntoQueue) {
+                queuesToShow.add(m.action.unloadIntoQueue);
+            }
+            if (m.location.type === api.LocType.InQueue &&
+                m.location.currentQueue &&
+                m.action.type === api.ActionType.Loading &&
+                m.action.loadFromBasketId === activeBasket.basketId) {
+                queuesToShow.add(m.location.currentQueue);
+            }
+        }
+    }
     const queueMat = new Map(LazySeq.of(queuesToShow).map((q) => [q, { mats: [], hiddenCnt: 0 }]));
+    const basketMat = new Map(LazySeq.of(basketsToShow).map((b) => [b, { mats: [], hiddenCnt: 0 }]));
     const freeLoading = [];
     let palFaces = OrderedMap.empty();
     let elapsedLoadingTime = null;
@@ -102,6 +165,9 @@ function selectLoadStationAndQueueProps(loadNum, queues, curSt, hideNonLoading)
             palFaces = palFaces.set(i, []);
         }
     }
+    else if (activeBasket) {
+        palFaces = palFaces.set(1, []);
+    }
     for (const m of curSt.material) {
         if (pal) {
             // if loading onto pallet, set elapsed load time, ensure face exists, and set free loading
@@ -134,13 +200,33 @@ function selectLoadStationAndQueueProps(loadNum, queues, curSt, hideNonLoading)
                 });
             }
         }
+        else if (activeBasket) {
+            if (isLoadingToDisplayedTarget(m, pal, activeBasket) && m.action.elapsedLoadUnloadTime) {
+                elapsedLoadingTime = m.action.elapsedLoadUnloadTime;
+            }
+            if (m.location.type === api.LocType.InBasket && m.location.basketId === activeBasket.basketId) {
+                if ((m.action.type === api.ActionType.UnloadToCompletedMaterial ||
+                    m.action.type === api.ActionType.UnloadToInProcess) &&
+                    m.action.elapsedLoadUnloadTime) {
+                    elapsedLoadingTime = m.action.elapsedLoadUnloadTime;
+                }
+                palFaces = palFaces.alter(1, (oldMats) => {
+                    if (oldMats) {
+                        oldMats.push(m);
+                        return oldMats;
+                    }
+                    else {
+                        return [m];
+                    }
+                });
+            }
+        }
         // add all material in the configured queues
         if (m.location.type === api.LocType.InQueue &&
             m.location.currentQueue &&
             queueMat.has(m.location.currentQueue)) {
             const old = queueMat.get(m.location.currentQueue);
-            if (hideNonLoading &&
-                (m.action.type !== api.ActionType.Loading || m.action.loadOntoPalletNum !== pal?.palletNum)) {
+            if (hideNonLoading && !isLoadingToDisplayedTarget(m, pal, activeBasket)) {
                 if (old === undefined) {
                     queueMat.set(m.location.currentQueue, { mats: [], hiddenCnt: 1 });
                 }
@@ -157,14 +243,39 @@ function selectLoadStationAndQueueProps(loadNum, queues, curSt, hideNonLoading)
                 }
             }
         }
+        // add all material in baskets
+        if (m.location.type === api.LocType.InBasket &&
+            m.location.basketId &&
+            basketMat.has(m.location.basketId)) {
+            const old = basketMat.get(m.location.basketId);
+            if (hideNonLoading && !isLoadingToDisplayedTarget(m, pal, activeBasket)) {
+                if (old === undefined) {
+                    basketMat.set(m.location.basketId, { mats: [], hiddenCnt: 1 });
+                }
+                else {
+                    old.hiddenCnt += 1;
+                }
+            }
+            else {
+                if (old === undefined) {
+                    basketMat.set(m.location.basketId, { mats: [m], hiddenCnt: 0 });
+                }
+                else {
+                    old.mats.push(m);
+                }
+            }
+        }
     }
-    queueMat.forEach((m) => m.mats.sort(mkCompareByProperties((m) => m.location.queuePosition ?? 0)));
+    queueMat.forEach((queue) => queue.mats.sort(mkCompareByProperties((mat) => mat.location.queuePosition ?? 0)));
+    basketMat.forEach((basket) => basket.mats.sort(mkCompareByProperties((mat) => mat.location.basketSubPosition ?? 0)));
     const matCount = freeLoading.length + palFaces.valuesToAscLazySeq().sumBy((x) => x.length);
     return {
         pallet: pal,
+        activeBasket,
         face: palFaces,
         freeLoadingMaterial: freeLoading,
         queues: queueMat,
+        baskets: basketMat,
         elapsedLoadingTime,
         fsize: matCount <= 2 ? "x-large" : matCount <= 6 ? "large" : "normal",
     };
@@ -235,30 +346,100 @@ function ElapsedLoadTime({ elapsedLoadTime }) {
 }
 function PalletFace({ data, faceNum }) {
     const face = data.face.get(faceNum);
-    if (!face || !data.pallet)
+    const fmsInfo = useAtomValue(fmsInformation);
+    const basketName = basketDisplayName(fmsInfo.basketName);
+    if (!face)
         return null;
-    return (_jsxs("div", { children: [faceNum === 1 ? (_jsxs(Box, { display: "grid", gridTemplateColumns: data.pallet.numFaces > 1 ? "1fr 1fr 1fr" : "1fr 1fr", children: [_jsxs(Typography, { variant: "h4", children: ["Pallet ", data.pallet.palletNum] }), data.pallet.numFaces > 1 ? (_jsx(Typography, { variant: "h6", justifySelf: "center", children: data.pallet.faceNames?.[faceNum - 1] ?? "Face 1" })) : undefined, _jsx(Box, { justifySelf: "flex-end", children: _jsx(ElapsedLoadTime, { elapsedLoadTime: data.elapsedLoadingTime }) })] })) : data.pallet.numFaces > 1 ? (_jsx(Box, { display: "flex", justifyContent: "center", children: _jsx(Typography, { variant: "h6", children: data.pallet.faceNames?.[faceNum - 1] ?? `Face ${faceNum}` }) })) : undefined, _jsx(Box, { ml: "4em", mr: "4em", children: _jsx(MoveMaterialArrowNode, { kind: { type: MoveMaterialNodeKindType.PalletFaceZone, face: faceNum }, children: _jsx(Box, { display: "flex", flexWrap: "wrap", justifyContent: "space-around", children: face.map((m, idx) => (_jsx(MoveMaterialArrowNode, { kind: { type: MoveMaterialNodeKindType.Material, material: m }, children: _jsx(InProcMaterial, { mat: m, fsize: data.fsize }) }, idx))) }) }) })] }));
+    if (data.activeBasket && !data.pallet) {
+        return (_jsxs("div", { "data-testid": "load-station-active-basket", children: [faceNum === 1 ? (_jsxs(Box, { sx: {
+                        display: "grid",
+                        gridTemplateColumns: "1fr auto",
+                    }, children: [_jsxs(Typography, { variant: "h4", children: [basketName, " ", data.activeBasket.basketId] }), _jsx(Box, { sx: {
+                                justifySelf: "flex-end",
+                            }, children: _jsx(ElapsedLoadTime, { elapsedLoadTime: data.elapsedLoadingTime }) })] })) : null, _jsx(Box, { sx: {
+                        ml: "4em",
+                        mr: "4em",
+                    }, children: _jsx(MoveMaterialArrowNode, { kind: {
+                            type: MoveMaterialNodeKindType.BasketZone,
+                            basketId: data.activeBasket.basketId,
+                        }, children: _jsx(Box, { sx: {
+                                display: "flex",
+                                flexWrap: "wrap",
+                                justifyContent: "space-around",
+                            }, children: face.map((m, idx) => (_jsx(MoveMaterialArrowNode, { kind: { type: MoveMaterialNodeKindType.Material, material: m }, children: _jsx(InProcMaterial, { mat: m, fsize: data.fsize }) }, idx))) }) }) })] }));
+    }
+    if (!data.pallet)
+        return null;
+    return (_jsxs("div", { "data-testid": `load-station-pallet-face-${faceNum}`, children: [faceNum === 1 ? (_jsxs(Box, { sx: {
+                    display: "grid",
+                    gridTemplateColumns: data.pallet.numFaces > 1 ? "1fr 1fr 1fr" : "1fr 1fr",
+                }, children: [_jsxs(Typography, { variant: "h4", children: ["Pallet ", data.pallet.palletNum] }), data.pallet.numFaces > 1 ? (_jsx(Typography, { variant: "h6", sx: {
+                            justifySelf: "center",
+                        }, children: data.pallet.faceNames?.[faceNum - 1] ?? "Face 1" })) : undefined, _jsx(Box, { sx: {
+                            justifySelf: "flex-end",
+                        }, children: _jsx(ElapsedLoadTime, { elapsedLoadTime: data.elapsedLoadingTime }) })] })) : data.pallet.numFaces > 1 ? (_jsx(Box, { sx: {
+                    display: "flex",
+                    justifyContent: "center",
+                }, children: _jsx(Typography, { variant: "h6", children: data.pallet.faceNames?.[faceNum - 1] ?? `Face ${faceNum}` }) })) : undefined, _jsx(Box, { sx: {
+                    ml: "4em",
+                    mr: "4em",
+                }, children: _jsx(MoveMaterialArrowNode, { kind: { type: MoveMaterialNodeKindType.PalletFaceZone, face: faceNum }, children: _jsx(Box, { sx: {
+                            display: "flex",
+                            flexWrap: "wrap",
+                            justifyContent: "space-around",
+                        }, children: face.map((m, idx) => (_jsx(MoveMaterialArrowNode, { kind: { type: MoveMaterialNodeKindType.Material, material: m }, children: _jsx(InProcMaterial, { mat: m, fsize: data.fsize }) }, idx))) }) }) })] }));
 }
 function MaterialRegion({ data, mat, }) {
-    return (_jsxs("div", { children: [_jsx(Typography, { variant: "h4", children: mat.label }), mat.material.mats.map((m, matIdx) => (_jsx(MoveMaterialArrowNode, { kind: {
+    return (_jsxs("div", { children: [mat.label !== "" ? _jsx(Typography, { variant: "h4", children: mat.label }) : null, mat.material.mats.map((m, matIdx) => (_jsx(MoveMaterialArrowNode, { kind: {
                     type: MoveMaterialNodeKindType.Material,
-                    material: data.pallet && m.action.loadOntoPalletNum === data.pallet.palletNum ? m : null,
-                }, children: mat.isFree ? (_jsx(InProcMaterial, { mat: m, displayActionForSinglePallet: data.pallet ? data.pallet.palletNum : 0, fsize: data.fsize, showRawMaterial: true, showJobComment: true })) : (_jsx(SortableInProcMaterial, { mat: m, displayActionForSinglePallet: data.pallet ? data.pallet.palletNum : 0, shake: m.action.type === api.ActionType.Loading &&
+                    material: m,
+                }, children: mat.isFree || mat.sortable === false ? (_jsx(InProcMaterial, { mat: m, displayActionForSinglePallet: data.pallet ? data.pallet.palletNum : 0, fsize: data.fsize, showRawMaterial: true, showJobComment: true })) : (_jsx(SortableInProcMaterial, { mat: m, displayActionForSinglePallet: data.pallet ? data.pallet.palletNum : 0, shake: m.action.type === api.ActionType.Loading &&
                         m.action.loadOntoPalletNum === data.pallet?.palletNum, fsize: m.action.type === api.ActionType.Loading &&
                         m.action.loadOntoPalletNum === data.pallet?.palletNum
                         ? data.fsize
-                        : undefined, showRawMaterial: true, showJobComment: true })) }, matIdx))), mat.material.hiddenCnt > 0 ? (_jsxs(Typography, { variant: "body2", color: "textSecondary", textAlign: "center", mt: "0.5em", children: ["+", mat.material.hiddenCnt, " hidden"] })) : null] }));
+                        : undefined, showRawMaterial: true, showJobComment: true })) }, matIdx))), mat.material.hiddenCnt > 0 ? (_jsxs(Typography, { variant: "body2", color: "textSecondary", sx: {
+                    textAlign: "center",
+                    mt: "0.5em",
+                }, children: ["+", mat.material.hiddenCnt, " hidden"] })) : null] }));
+}
+function BasketRegion({ data, label, baskets, }) {
+    return (_jsxs("div", { children: [_jsx(Typography, { variant: "h4", children: label }), baskets.map((basket, idx) => (_jsxs(Box, { "data-testid": `load-station-basket-${encodeLoadStationRegionIdPart(basket.basketId)}`, sx: {
+                    mt: idx === 0 ? "0.5em" : "1.5em",
+                    pt: idx === 0 ? undefined : "1em",
+                }, children: [_jsx(Typography, { variant: "h6", sx: {
+                            mb: "0.5em",
+                        }, children: basket.label }), _jsx(MoveMaterialArrowNode, { kind: {
+                            type: MoveMaterialNodeKindType.BasketZone,
+                            basketId: basket.basketId,
+                        }, children: _jsx(MaterialRegion, { data: data, mat: {
+                                label: "",
+                                material: basket.material,
+                                isFree: false,
+                                sortable: false,
+                            } }) })] }, basket.basketId)))] }));
 }
 function MaterialColumn({ data, region, }) {
-    return (_jsx(MoveMaterialArrowNode, { kind: region.isFree
-            ? { type: MoveMaterialNodeKindType.FreeMaterialZone }
-            : {
-                type: MoveMaterialNodeKindType.QueueZone,
-                queue: region.label,
-            }, children: region.isFree ? (_jsx(MaterialRegion, { data: data, mat: region })) : (_jsx(SortableRegion, { matIds: region.material.mats.map((m) => m.materialID), direction: "vertical", queueName: region.label, renderDragOverlay: (mat) => (_jsx(DragOverlayInProcMaterial, { mat: mat, displayActionForSinglePallet: data.pallet ? data.pallet.palletNum : 0, fsize: mat.action.type === api.ActionType.Loading &&
-                    mat.action.loadOntoPalletNum === data.pallet?.palletNum
-                    ? data.fsize
-                    : undefined })), children: _jsx(MaterialRegion, { data: data, mat: region }) })) }));
+    switch (region.kind) {
+        case "free":
+            return (_jsx(MoveMaterialArrowNode, { kind: { type: MoveMaterialNodeKindType.FreeMaterialZone }, children: _jsx(MaterialRegion, { data: data, mat: {
+                        label: region.label,
+                        material: region.material,
+                        isFree: true,
+                        sortable: false,
+                    } }) }));
+        case "queue":
+            return (_jsx(MoveMaterialArrowNode, { kind: { type: MoveMaterialNodeKindType.QueueZone, queue: region.label }, children: _jsx(SortableRegion, { matIds: region.material.mats.map((m) => m.materialID), direction: "vertical", queueName: region.label, renderDragOverlay: (mat) => (_jsx(DragOverlayInProcMaterial, { mat: mat, displayActionForSinglePallet: data.pallet ? data.pallet.palletNum : 0, fsize: mat.action.type === api.ActionType.Loading &&
+                            mat.action.loadOntoPalletNum === data.pallet?.palletNum
+                            ? data.fsize
+                            : undefined })), children: _jsx(MaterialRegion, { data: data, mat: {
+                            label: region.label,
+                            material: region.material,
+                            isFree: false,
+                            sortable: true,
+                        } }) }) }));
+        case "baskets":
+            return _jsx(BasketRegion, { data: data, label: region.label, baskets: region.baskets });
+    }
 }
 function RecentCompletedMaterial() {
     const matSummary = useAtomValue(last30MaterialSummary);
@@ -280,13 +461,37 @@ const CompletedCol = memo(function CompletedCol({ fillViewPort, showMaterial, })
             : MoveMaterialNodeKindType.CompletedCollapsedMaterialZone,
     });
     if (showMaterial && fillViewPort) {
-        return (_jsxs(Box, { padding: "8px", display: "flex", flexDirection: "column", height: "100%", ref: ref, children: [_jsx(Typography, { variant: "h4", children: "Completed" }), _jsx(Box, { position: "relative", flexGrow: 1, children: _jsx(Box, { position: "absolute", top: "0", left: "0", right: "0", bottom: "0", overflow: "auto", children: _jsx(RecentCompletedMaterial, {}) }) })] }));
+        return (_jsxs(Box, { ref: ref, sx: {
+                padding: "8px",
+                display: "flex",
+                flexDirection: "column",
+                height: "100%",
+            }, children: [_jsx(Typography, { variant: "h4", children: "Completed" }), _jsx(Box, { sx: {
+                        position: "relative",
+                        flexGrow: 1,
+                    }, children: _jsx(Box, { sx: {
+                            position: "absolute",
+                            top: "0",
+                            left: "0",
+                            right: "0",
+                            bottom: "0",
+                            overflow: "auto",
+                        }, children: _jsx(RecentCompletedMaterial, {}) }) })] }));
     }
     else if (showMaterial) {
-        return (_jsxs(Box, { padding: "8px", ref: ref, children: [_jsx(Typography, { variant: "h4", children: "Completed" }), _jsx(RecentCompletedMaterial, {})] }));
+        return (_jsxs(Box, { ref: ref, sx: {
+                padding: "8px",
+            }, children: [_jsx(Typography, { variant: "h4", children: "Completed" }), _jsx(RecentCompletedMaterial, {})] }));
     }
     else {
-        return (_jsx(Box, { display: "flex", justifyContent: fillViewPort ? "flex-end" : undefined, padding: "8px", ref: ref, children: _jsx(Typography, { variant: "h4", margin: "4px", sx: fillViewPort ? { textOrientation: "mixed", writingMode: "vertical-rl" } : undefined, children: "Completed" }) }));
+        return (_jsx(Box, { ref: ref, sx: {
+                display: "flex",
+                justifyContent: fillViewPort ? "flex-end" : undefined,
+                padding: "8px",
+            }, children: _jsx(Typography, { variant: "h4", sx: {
+                    margin: "4px",
+                    ...(fillViewPort ? { textOrientation: "mixed", writingMode: "vertical-rl" } : {}),
+                }, children: "Completed" }) }));
     }
 });
 function InstructionButton({ pallet }) {
@@ -340,7 +545,7 @@ function AddMatButton({ queues, onClose, toQueue, showAddToQueue, setShowAddToQu
         return (_jsx(Button, { color: "primary", onClick: () => setShowAddToQueue(true), children: "Add To Queue" }));
     }
     else {
-        return (_jsxs(Button, { color: "primary", disabled: toQueue === null || addingExistingMat === true, onClick: () => {
+        return (_jsxs(Button, { color: "primary", disabled: toQueue === null || addingExistingMat, onClick: () => {
                 addExistingMat({
                     materialId: existingMat.materialID,
                     queue: toQueue ?? "",
@@ -415,24 +620,46 @@ function useGridLayout({ numMatCols, maxNumFaces, horizontal, showMatInCompleted
     return `${rows} / ${cols}`;
 }
 export function LoadStation(props) {
+    const fmsInfo = useAtomValue(fmsInformation);
+    const basketName = basketDisplayName(fmsInfo.basketName);
+    const basketRegionLabel = basketName.endsWith("s") ? basketName : `${basketName}s`;
     const currentSt = useAtomValue(currentStatus);
     const hideNonLoading = useAtomValue(hideNonLoadingMaterialOnLoadStation);
     const data = useMemo(() => selectLoadStationAndQueueProps(props.loadNum, props.queues, currentSt, hideNonLoading), [currentSt, props.loadNum, props.queues, hideNonLoading]);
-    let matColsSeq = LazySeq.of(data.queues)
+    const queueCols = LazySeq.of(data.queues)
         .sortBy(([q, _]) => q)
         .map(([q, mats]) => ({
+        kind: "queue",
         label: q,
         material: mats,
-        isFree: false,
-    }));
-    if (data.queues.size === 0 || data.freeLoadingMaterial.length > 0) {
-        matColsSeq = matColsSeq.append({
+    }))
+        .toRArray();
+    const matCols = [...queueCols];
+    if (data.baskets.size > 0) {
+        const baskets = LazySeq.of(data.baskets)
+            .filter(([b, _]) => b !== data.activeBasket?.basketId)
+            .sortBy(([b, _]) => b)
+            .map(([b, mats]) => ({
+            basketId: b,
+            label: `${basketName} ${b}`,
+            material: mats,
+        }))
+            .toRArray();
+        if (baskets.length > 0) {
+            matCols.push({
+                kind: "baskets",
+                label: basketRegionLabel,
+                baskets,
+            });
+        }
+    }
+    if ((data.queues.size === 0 && data.baskets.size === 0) || data.freeLoadingMaterial.length > 0) {
+        matCols.push({
+            kind: "free",
             label: "Material",
             material: { mats: data.freeLoadingMaterial, hiddenCnt: 0 },
-            isFree: true,
         });
     }
-    const matCols = matColsSeq.toRArray();
     const numNonPalCols = matCols.length + (props.completed ? 1 : 0);
     const fillViewPort = useMediaQuery(numNonPalCols <= 1
         ? "(min-width: 720px)"
@@ -455,10 +682,26 @@ export function LoadStation(props) {
                     md: "calc(100vh - 64px)",
                 },
                 padding: fillViewPort ? undefined : "8px",
-            }, children: [matCols.map((col, idx) => (_jsx(Box, { gridArea: `mat${idx}`, padding: "8px", borderRight: fillViewPort ? "1px solid black" : undefined, borderBottom: !fillViewPort ? "1px solid black" : undefined, children: _jsx(MaterialColumn, { data: data, region: col }) }, idx))), data.face.keysToAscLazySeq().map((faceNum, idx) => (_jsx(Box, { marginLeft: "15px", gridArea: `palface${idx}`, padding: "8px", borderTop: data.pallet && idx !== 0 ? "1px solid black" : undefined, children: _jsx(PalletFace, { data: data, faceNum: faceNum }) }, faceNum))), _jsx(Box, { borderLeft: fillViewPort ? "1px solid black" : undefined, borderTop: !fillViewPort ? "1px solid black" : undefined, gridArea: "completed", children: _jsx(CompletedCol, { fillViewPort: fillViewPort, showMaterial: props.completed }) }), _jsx(MultiInstructionButton, { loadData: data }), _jsx(SelectWorkorderDialog, {}), _jsx(SelectInspTypeDialog, {}), _jsx(LoadMatDialog, { pallet: data.pallet?.palletNum ?? null, queues: props.queues })] }) }));
+            }, children: [matCols.map((col, idx) => (_jsx(Box, { "data-testid": materialColumnTestId(col), sx: {
+                        gridArea: `mat${idx}`,
+                        padding: "8px",
+                        borderRight: fillViewPort ? "1px solid black" : undefined,
+                        borderBottom: !fillViewPort ? "1px solid black" : undefined,
+                    }, children: _jsx(MaterialColumn, { data: data, region: col }) }, idx))), data.face.keysToAscLazySeq().map((faceNum, idx) => (_jsx(Box, { sx: {
+                        marginLeft: "15px",
+                        gridArea: `palface${idx}`,
+                        padding: "8px",
+                        borderTop: data.pallet && idx !== 0 ? "1px solid black" : undefined,
+                    }, children: _jsx(PalletFace, { data: data, faceNum: faceNum }) }, faceNum))), _jsx(Box, { "data-testid": "load-station-completed", sx: {
+                        borderLeft: fillViewPort ? "1px solid black" : undefined,
+                        borderTop: !fillViewPort ? "1px solid black" : undefined,
+                        gridArea: "completed",
+                    }, children: _jsx(CompletedCol, { fillViewPort: fillViewPort, showMaterial: props.completed }) }), _jsx(MultiInstructionButton, { loadData: data }), _jsx(SelectWorkorderDialog, {}), _jsx(SelectInspTypeDialog, {}), _jsx(LoadMatDialog, { pallet: data.pallet?.palletNum ?? null, queues: props.queues })] }) }));
 }
 function LoadStationCheckWidth(props) {
-    useSetTitle("Load " + props.loadNum.toString());
+    const fmsInfo = useAtomValue(fmsInformation);
+    const title = loadStationDisplayName(props.loadNum, fmsInfo.loadStationNames);
+    useSetTitle(title);
     return _jsx(LoadStation, { ...props });
 }
 export default LoadStationCheckWidth;

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

@@ -46,8 +46,9 @@ import { DisplayLoadingAndError } from "../ErrorsAndLoading.js";
 import { ErrorBoundary } from "react-error-boundary";
 import { currentStatus } from "../../cell-status/current-status.js";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { loadable } from "jotai/utils";
 import { last30Rebookings } from "../../cell-status/rebookings.js";
+import { fmsInformation } from "../../network/server-settings.js";
+import { basketDisplayName } from "../../cell-status/station-cycles.js";
 export class PartIdenticon extends PureComponent {
     render() {
         const iconSize = this.props.size || 50;
@@ -66,13 +67,18 @@ const shakeHorizKeyframes = keyframes `
   60% { transform: translate(0, 0) }
 `;
 const shakeHorizAnimation = `${shakeHorizKeyframes} 1s ease-in-out infinite`;
+function isCssAnimation(animation) {
+    return "animationName" in animation;
+}
 // global sync of all shake animations
 // the start time can drift due to the pause on hover, so to keep it in sync always
 // round the start time down to be a multiple of the duration (1s)
 function shakeAnimationIteration(event) {
     const anim = event.currentTarget
         .getAnimations()
-        .find((a) => a.animationName === shakeHorizKeyframes.name);
+        .find((animation) => {
+        return isCssAnimation(animation) && animation.animationName === shakeHorizKeyframes.name;
+    });
     if (anim && typeof anim.startTime === "number") {
         anim.startTime = anim.startTime - (anim.startTime % 1000);
     }
@@ -158,8 +164,29 @@ const MatCardDetail = styled("div", { shouldForwardProp: (prop) => prop !== "fsi
 });
 export function MaterialAction({ mat, displayActionForSinglePallet, fsize, }) {
     const curSt = useAtomValue(currentStatus);
+    const fmsInfo = useAtomValue(fmsInformation);
+    const basketName = basketDisplayName(fmsInfo.basketName);
     switch (mat.action.type) {
         case api.ActionType.Loading:
+            // Check if loading from basket
+            if (mat.action.loadFromBasketId) {
+                if (mat.action.loadOntoPalletNum === null || mat.action.loadOntoPalletNum === undefined) {
+                    return (_jsxs(MatCardDetail, { fsize: fsize, children: ["Load into ", basketName, " ", mat.action.loadFromBasketId] }));
+                }
+                else if (displayActionForSinglePallet === undefined) {
+                    return (_jsxs(MatCardDetail, { fsize: fsize, children: ["Load from ", basketName, " ", mat.action.loadFromBasketId, " to pal ", mat.action.loadOntoPalletNum ?? ""] }));
+                }
+                else if (displayActionForSinglePallet === mat.action.loadOntoPalletNum) {
+                    const faceNum = mat.action.loadOntoFace ?? 0;
+                    const faceName = mat.action.loadOntoPalletNum
+                        ? curSt.pallets[mat.action.loadOntoPalletNum]?.faceNames?.[faceNum - 1]
+                        : null;
+                    return (_jsxs(MatCardDetail, { fsize: fsize, children: ["Load from ", basketName, " ", mat.action.loadFromBasketId, " to ", faceName ?? `face ${faceNum}`] }));
+                }
+                else {
+                    return null;
+                }
+            }
             switch (mat.location.type) {
                 case api.LocType.OnPallet:
                     if (displayActionForSinglePallet === undefined ||
@@ -202,7 +229,12 @@ export function MaterialAction({ mat, displayActionForSinglePallet, fsize, }) {
             }
         case api.ActionType.UnloadToInProcess:
         case api.ActionType.UnloadToCompletedMaterial:
-            if (mat.action.unloadIntoQueue) {
+            if (mat.action.unloadToBasketId) {
+                return (_jsxs(MatCardDetail, { fsize: fsize, children: ["Unload to ", basketName, " ", mat.action.unloadToBasketId, mat.action.unloadToBasketSubPosition
+                            ? ` position ${mat.action.unloadToBasketSubPosition + 1}`
+                            : ""] }));
+            }
+            else if (mat.action.unloadIntoQueue) {
                 return _jsxs(MatCardDetail, { fsize: fsize, children: ["Unload into queue ", mat.action.unloadIntoQueue] });
             }
             else {
@@ -212,6 +244,9 @@ export function MaterialAction({ mat, displayActionForSinglePallet, fsize, }) {
             if (mat.location.type === api.LocType.InQueue && !!mat.jobUnique && mat.jobUnique !== "") {
                 return _jsxs(MatCardDetail, { fsize: fsize, children: ["Waiting; next process is #", mat.process + 1] });
             }
+            else if (mat.location.type === api.LocType.InBasket) {
+                return (_jsxs(MatCardDetail, { fsize: fsize, children: ["In ", basketName, " ", mat.location.basketId] }));
+            }
             else if (mat.location.type === api.LocType.OnPallet &&
                 (mat.lastCompletedMachiningRouteStopIndex === null ||
                     mat.lastCompletedMachiningRouteStopIndex === undefined)) {
@@ -310,14 +345,29 @@ const MatCard = forwardRef(function MatCard(props, ref) {
                     touchAction: "none",
                 }, ...props.dragHandleProps, children: _jsx(DragIndicator, { fontSize: "large", color: "action" }) })) : undefined, _jsx(ButtonBase, { focusRipple: true, sx: { width: "100%" }, onClick: () => setMatToShow(props.inProcMat
                     ? { type: "InProcMat", inproc: props.inProcMat }
-                    : { type: "MatSummary", summary: props.mat }), children: _jsxs(Box, { display: "flex", textAlign: "left", alignItems: "center", width: "100%", children: [_jsx(PartIdenticon, { part: props.mat.partName }), _jsxs(Box, { marginLeft: "8px", flexGrow: 1, children: [_jsx(MatCardHeader, { fsize: props.fsize, children: props.mat.partName }), props.displayJob ? (_jsx(MatCardDetail, { fsize: props.fsize, children: props.mat.jobUnique && props.mat.jobUnique !== ""
+                    : { type: "MatSummary", summary: props.mat }), children: _jsxs(Box, { sx: {
+                        display: "flex",
+                        textAlign: "left",
+                        alignItems: "center",
+                        width: "100%",
+                    }, children: [_jsx(PartIdenticon, { part: props.mat.partName }), _jsxs(Box, { sx: {
+                                marginLeft: "8px",
+                                flexGrow: 1,
+                            }, children: [_jsx(MatCardHeader, { fsize: props.fsize, children: props.mat.partName }), props.displayJob ? (_jsx(MatCardDetail, { fsize: props.fsize, children: props.mat.jobUnique && props.mat.jobUnique !== ""
                                         ? "Assigned to " + props.mat.jobUnique
                                         : "Unassigned material" })) : undefined, !props.hideEmptySerial || props.mat.serial ? (_jsxs(MatCardDetail, { fsize: props.fsize, children: ["Serial: ", props.mat.serial ? props.mat.serial : "none"] })) : undefined, props.mat.workorderId === undefined ||
                                     props.mat.workorderId === "" ||
                                     props.mat.workorderId === props.mat.serial ? undefined : (_jsxs(MatCardDetail, { fsize: props.fsize, children: ["Workorder: ", props.mat.workorderId] })), props.mat.jobUnique !== undefined &&
                                     props.showRawMaterial &&
                                     props.inProcMat &&
-                                    props.inProcMat.process === 0 ? (_jsx(JobRawMaterial, { fsize: props.fsize, mat: props.inProcMat })) : undefined, props.showJobComment && props.mat.jobUnique && props.mat.jobUnique !== "" ? (_jsx(RebookingNoteElipsis, { fsize: props.fsize, uniq: props.mat.jobUnique })) : undefined, props.inProcMat ? (_jsx(MaterialAction, { mat: props.inProcMat, displayActionForSinglePallet: props.displayActionForSinglePallet, fsize: props.fsize })) : undefined, completedMsg] }), _jsxs(Box, { marginLeft: "4px", display: "flex", flexDirection: "column", justifyContent: "space-between", alignItems: "flex-end", alignSelf: "start", children: [props.mat.serial && props.mat.serial.length >= 1 && !props.hideAvatar ? (_jsx("div", { children: _jsx(Avatar, { style: { width: "30px", height: "30px" }, children: props.mat.serial.slice(-1) }) })) : undefined, props.hideWarningIcon ? undefined : (_jsx("div", { children: _jsx(Warning, { mat: props.mat }) }))] })] }) })] }));
+                                    props.inProcMat.process === 0 ? (_jsx(JobRawMaterial, { fsize: props.fsize, mat: props.inProcMat })) : undefined, props.showJobComment && props.mat.jobUnique && props.mat.jobUnique !== "" ? (_jsx(RebookingNoteElipsis, { fsize: props.fsize, uniq: props.mat.jobUnique })) : undefined, props.inProcMat ? (_jsx(MaterialAction, { mat: props.inProcMat, displayActionForSinglePallet: props.displayActionForSinglePallet, fsize: props.fsize })) : undefined, props.inProcMat?.problem ? (_jsx(MatCardDetail, { fsize: props.fsize, children: _jsxs(Typography, { variant: "body2", color: "error", sx: { fontWeight: "bold" }, children: ["\u26A0 ", props.inProcMat.problem] }) })) : undefined, completedMsg] }), _jsxs(Box, { sx: {
+                                marginLeft: "4px",
+                                display: "flex",
+                                flexDirection: "column",
+                                justifyContent: "space-between",
+                                alignItems: "flex-end",
+                                alignSelf: "start",
+                            }, children: [props.mat.serial && props.mat.serial.length >= 1 && !props.hideAvatar ? (_jsx("div", { children: _jsx(Avatar, { style: { width: "30px", height: "30px" }, children: props.mat.serial.slice(-1) }) })) : undefined, props.hideWarningIcon ? undefined : (_jsx("div", { children: _jsx(Warning, { mat: props.mat }) }))] })] }) })] }));
 });
 export const MatSummary = memo(MatCard);
 export const InProcMaterial = memo(function InProcMaterial(props) {
@@ -349,7 +399,13 @@ export function DragOverlayInProcMaterial(props) {
     return (_jsx(MatCard, { mat: inproc_mat_to_summary(props.mat), inProcMat: props.mat, displayActionForSinglePallet: props.displayActionForSinglePallet, showDragHandle: true, hideAvatar: props.hideAvatar, displayJob: props.displayJob, fsize: props.fsize, hideEmptySerial: props.hideEmptySerial, isDragOverlay: true }));
 }
 export const MultiMaterial = memo(function MultiMaterial(props) {
-    return (_jsx(Paper, { elevation: 4, sx: { display: "flex", minWidth: "10em", padding: "8px", margin: "8px" }, children: _jsx(Badge, { badgeContent: props.material.length < 2 ? 0 : props.material.length, color: "secondary", children: _jsx(ButtonBase, { focusRipple: true, onClick: () => props.onOpen(), children: _jsxs(Box, { display: "flex", textAlign: "left", children: [_jsx(PartIdenticon, { part: props.partOrCasting }), _jsxs(Box, { marginLeft: "8px", flexGrow: 1, children: [_jsx(Typography, { variant: "h6", children: props.partOrCasting }), _jsx(MatCardDetail, { fsize: props.fsize, children: props.assignedJobUnique && props.assignedJobUnique !== ""
+    return (_jsx(Paper, { elevation: 4, sx: { display: "flex", minWidth: "10em", padding: "8px", margin: "8px" }, children: _jsx(Badge, { badgeContent: props.material.length < 2 ? 0 : props.material.length, color: "secondary", children: _jsx(ButtonBase, { focusRipple: true, onClick: () => props.onOpen(), children: _jsxs(Box, { sx: {
+                        display: "flex",
+                        textAlign: "left",
+                    }, children: [_jsx(PartIdenticon, { part: props.partOrCasting }), _jsxs(Box, { sx: {
+                                marginLeft: "8px",
+                                flexGrow: 1,
+                            }, children: [_jsx(Typography, { variant: "h6", children: props.partOrCasting }), _jsx(MatCardDetail, { fsize: props.fsize, children: props.assignedJobUnique && props.assignedJobUnique !== ""
                                         ? "Assigned to " + props.assignedJobUnique
                                         : "Unassigned material" })] }), props.material.length > 0 && props.material[0].serial && props.material[0].serial.length >= 1 ? (_jsx("div", { children: _jsx(Avatar, { style: { width: "30px", height: "30px" }, children: props.material[0].serial.slice(-1) }) })) : undefined] }) }) }) }));
 });
@@ -374,13 +430,17 @@ export const MaterialDetailTitle = memo(function MaterialDetailTitle({ partName,
             title = partName + " - " + serial;
         }
     }
-    return (_jsxs(Box, { display: "flex", textAlign: "left", children: [partName === "" ? _jsx(SearchIcon, {}) : _jsx(PartIdenticon, { part: partName }), _jsxs(Box, { marginLeft: "8px", flexGrow: 1, children: [_jsx(Typography, { variant: "h6", children: title }), subtitle ? _jsx(Typography, { variant: "caption", children: subtitle }) : undefined] })] }));
+    return (_jsxs(Box, { sx: {
+            display: "flex",
+            textAlign: "left",
+        }, children: [partName === "" ? _jsx(SearchIcon, {}) : _jsx(PartIdenticon, { part: partName }), _jsxs(Box, { sx: {
+                    marginLeft: "8px",
+                    flexGrow: 1,
+                }, children: [_jsx(Typography, { variant: "h6", children: title }), subtitle ? _jsx(Typography, { variant: "caption", children: subtitle }) : undefined] })] }));
 });
 function MaterialDialogTitle({ notes }) {
-    const matL = useAtomValue(loadable(matDetails.materialInDialogInfo));
-    const serialL = useAtomValue(loadable(matDetails.serialInMaterialDialog));
-    const mat = matL.state === "hasData" ? matL.data : null;
-    const serial = serialL.state === "hasData" ? serialL.data : null;
+    const mat = useAtomValue(matDetails.materialInDialogInfoUnwrapped);
+    const serial = useAtomValue(matDetails.serialInMaterialDialogUnwrapped);
     return _jsx(MaterialDetailTitle, { notes: notes, partName: mat?.partName ?? "", serial: mat?.serial ?? serial });
 }
 function MaterialInspections() {

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

@@ -74,7 +74,7 @@ const MoveMaterialArrows = memo(function MoveMaterialArrows({ container, arrowsW
 const MoveMaterialArrowCtx = createContext(undefined);
 export const MoveMaterialArrowContainer = memo(function MoveMaterialArrowContainer({ children, hideArrows, whiteBackground, }) {
     const container = useRef(null);
-    const [nodes, setNodes] = useState(HashMap.empty());
+    const [registeredNodes, setNodes] = useState(HashMap.empty());
     const ctx = useMemo(() => {
         return {
             registerNode(id, kind, ref) {
@@ -82,7 +82,7 @@ export const MoveMaterialArrowContainer = memo(function MoveMaterialArrowContain
                     setNodes((ns) => ns.set(id, { ...kind, elem: ref }));
                 }
                 else {
-                    setNodes((nodes) => nodes.delete(id));
+                    setNodes((currentNodes) => currentNodes.delete(id));
                 }
             },
         };
@@ -96,7 +96,7 @@ export const MoveMaterialArrowContainer = memo(function MoveMaterialArrowContain
                     right: 0,
                     zIndex: -1,
                     backgroundColor: whiteBackground ? "white" : "#F8F8F8",
-                }, children: [_jsx("defs", { children: _jsx("marker", { id: "arrow", markerWidth: 6, markerHeight: 10, refX: "0", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: _jsx("path", { d: "M0,0 L0,6 L5,3 z", fill: "rgba(0,0,0,0.15)" }) }) }), !hideArrows ? _jsx(MoveMaterialArrows, { container: container, arrowsWithRefs: nodes }) : undefined] }), _jsx("div", { ref: container, children: _jsx(MoveMaterialArrowCtx.Provider, { value: ctx, children: children }) })] }));
+                }, children: [_jsx("defs", { children: _jsx("marker", { id: "arrow", markerWidth: 6, markerHeight: 10, refX: "0", refY: "3", orient: "auto", markerUnits: "strokeWidth", children: _jsx("path", { d: "M0,0 L0,6 L5,3 z", fill: "rgba(0,0,0,0.15)" }) }) }), !hideArrows ? (_jsx(MoveMaterialArrows, { container: container, arrowsWithRefs: registeredNodes })) : undefined] }), _jsx("div", { ref: container, children: _jsx(MoveMaterialArrowCtx.Provider, { value: ctx, children: children }) })] }));
 });
 export function useMoveMaterialArrowRef(kind) {
     const ctx = useContext(MoveMaterialArrowCtx);
@@ -110,7 +110,7 @@ export function useMoveMaterialArrowRef(kind) {
         return () => {
             ctx.registerNode(id, null, null);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // oxlint-disable-next-line react/exhaustive-deps
     }, [ctx, ...memoPropsForNodeKind(kind)]);
     return ref;
 }