@cccsaurora/howler-ui 2.17.0-dev.600 → 2.17.0-dev.617

package/components/routes/cases/detail/sidebar/CaseFolder.d.ts

@@ -1,12 +1,13 @@
 import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
 import { type FC } from 'react';
 import type { Tree } from './types';
-declare const CaseFolder: FC<{
+interface CaseFolderProps {
     case: Case;
     folder?: Tree;
     name?: string;
     step?: number;
     rootCaseId?: string;
     pathPrefix?: string;
-}>;
+}
+declare const CaseFolder: FC<CaseFolderProps>;
 export default CaseFolder;

package/components/routes/cases/detail/sidebar/CaseFolder.js

@@ -3,114 +3,82 @@ import { Article, BookRounded, CheckCircle, ChevronRight, Folder as FolderIcon,
 import { Skeleton, Stack, Typography, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { get, last, omit, set } from 'lodash-es';
-import { useEffect, useMemo, useState } from 'react';
+import { omit } from 'lodash-es';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
-const buildTree = (items = []) => {
-    // Root tree node stores direct children in `leaves` and nested folders as object keys.
-    const tree = { leaves: [] };
-    items.forEach(item => {
-        // Ignore items that cannot be placed in the folder structure.
-        if (!item?.path) {
-            return;
-        }
-        // Split path into folder segments + item name, then remove the item name.
-        const parts = item.path.split('/');
-        parts.pop();
-        if (parts.length > 0) {
-            // Use dot notation so lodash `get/set` can address nested folder objects.
-            const key = parts.join('.');
-            const size = get(tree, key)?.leaves?.length || 0;
-            // Append this item to the folder's `leaves` array.
-            set(tree, `${key}.leaves.${size}`, item);
-            return;
-        }
-        // Items without parent folders are top-level leaves.
-        tree.leaves.push(item);
-    });
-    return tree;
+import { buildTree } from './utils';
+// Static map: item type → MUI icon component (avoids re-creating closures on each render)
+const ICON_FOR_TYPE = {
+    case: BookRounded,
+    observable: Visibility,
+    hit: CheckCircle,
+    table: TableChart,
+    lead: Lightbulb,
+    reference: LinkIcon
 };
 const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPrefix = '' }) => {
     const theme = useTheme();
     const location = useLocation();
     const { dispatchApi } = useMyApi();
     const [open, setOpen] = useState(true);
-    const [openCases, setOpenCases] = useState({});
-    const [loadingCases, setLoadingCases] = useState({});
-    const [nestedCases, setNestedCases] = useState({});
+    const [caseStates, setCaseStates] = useState({});
     const [hitMetadata, setHitMetadata] = useState({});
     const tree = useMemo(() => folder || buildTree(_case?.items), [folder, _case?.items]);
     const currentRootCaseId = rootCaseId || _case?.case_id;
-    // Metadata for hit-type items
+    // Stable string key so the effect only re-runs when the actual hit IDs change,
+    // not on every array reference change.
+    const hitIds = useMemo(() => tree.leaves
+        ?.filter(l => l.type?.toLowerCase() === 'hit')
+        .map(l => l.id)
+        .filter(id => !!id) ?? [], [tree.leaves]);
     useEffect(() => {
-        const ids = tree.leaves?.filter(leaf => leaf.type?.toLowerCase() === 'hit').map(leaf => leaf.id);
-        if (!ids || ids.length < 1) {
+        if (hitIds.length < 1) {
             return;
         }
-        dispatchApi(api.search.hit.post({ query: `howler.id:(${ids.join(' OR ')})` }), { throwError: false }).then(result => {
-            if (result?.items?.length < 1) {
+        dispatchApi(api.search.hit.post({ query: `howler.id:(${hitIds.join(' OR ')})` }), { throwError: false }).then(result => {
+            if ((result?.items?.length ?? 0) < 1)
                 return;
-            }
             setHitMetadata(Object.fromEntries(result.items.map(hit => [hit.howler.id, hit.howler])));
         });
-    }, [tree.leaves, dispatchApi]);
-    const getIconColor = (itemType, itemKey, leafId) => {
-        if (itemType === 'hit' && leafId) {
-            const meta = hitMetadata[leafId];
-            if (meta?.escalation && ESCALATION_COLORS[meta.escalation]) {
-                return ESCALATION_COLORS[meta.escalation];
-            }
-        }
-        if (itemType === 'case' && itemKey) {
-            const caseData = nestedCases[itemKey];
-            if (caseData?.escalation && ESCALATION_COLORS[caseData.escalation]) {
-                return ESCALATION_COLORS[caseData.escalation];
-            }
-        }
-        return 'default';
-    };
-    const getItemColor = (itemType, itemKey, leafId) => {
+    }, [hitIds, dispatchApi]);
+    // Returns the MUI colour token for the item's escalation, or undefined if none.
+    const getEscalationColor = (itemType, itemKey, leafId) => {
         if (itemType === 'hit' && leafId) {
-            const meta = hitMetadata[leafId];
-            if (meta?.escalation && ESCALATION_COLORS[meta.escalation]) {
-                return `${ESCALATION_COLORS[meta.escalation]}.light`;
-            }
+            const color = ESCALATION_COLORS[hitMetadata[leafId]?.escalation];
+            if (color)
+                return color;
         }
         if (itemType === 'case' && itemKey) {
-            const caseData = nestedCases[itemKey];
-            if (caseData?.escalation && ESCALATION_COLORS[caseData.escalation]) {
-                return `${ESCALATION_COLORS[caseData.escalation]}.light`;
-            }
+            const color = ESCALATION_COLORS[caseStates[itemKey]?.data?.escalation];
+            if (color)
+                return color;
         }
-        return 'text.secondary';
+        return undefined;
     };
-    const toggleCase = (item, itemKey) => {
-        // Use the fully-qualified path key when available so nested case toggles are unique.
-        const resolvedItemKey = itemKey || item.path || item.id;
-        if (!resolvedItemKey) {
+    const toggleCase = useCallback((item, itemKey) => {
+        const resolvedKey = itemKey || item.path || item.id;
+        if (!resolvedKey)
             return;
-        }
-        // Toggle expand/collapse state for this case node.
-        const shouldOpen = !openCases[resolvedItemKey];
-        setOpenCases(current => ({ ...current, [resolvedItemKey]: shouldOpen }));
-        // Only fetch when opening, with a valid case id, and when no fetch/data is already in-flight/cached.
-        if (!shouldOpen || !item.id || nestedCases[resolvedItemKey] || loadingCases[resolvedItemKey]) {
+        const prev = caseStates[resolvedKey] ?? { open: false, loading: false, data: null };
+        const shouldOpen = !prev.open;
+        setCaseStates(current => ({ ...current, [resolvedKey]: { ...prev, open: shouldOpen } }));
+        if (!shouldOpen || !item.id || prev.data || prev.loading)
             return;
-        }
-        setLoadingCases(current => ({ ...current, [resolvedItemKey]: true }));
-        // Lazy-load the nested case content and cache it by the same unique key.
+        setCaseStates(current => ({
+            ...current,
+            [resolvedKey]: { ...(current[resolvedKey] ?? prev), loading: true }
+        }));
         dispatchApi(api.v2.case.get(item.id), { throwError: false })
             .then(caseResponse => {
-            if (!caseResponse) {
+            if (!caseResponse)
                 return;
-            }
-            setNestedCases(current => ({ ...current, [resolvedItemKey]: caseResponse }));
+            setCaseStates(current => ({ ...current, [resolvedKey]: { ...current[resolvedKey], data: caseResponse } }));
         })
             .finally(() => {
-            setLoadingCases(current => ({ ...current, [resolvedItemKey]: false }));
+            setCaseStates(current => ({ ...current, [resolvedKey]: { ...current[resolvedKey], loading: false } }));
         });
-    };
+    }, [caseStates, dispatchApi]);
     return (_jsxs(Stack, { sx: { overflow: 'visible' }, children: [name && (_jsxs(Stack, { direction: "row", pl: step * 1.5, py: 0.25, sx: {
                     cursor: 'pointer',
                     transition: theme.transitions.create('background', { duration: 50 }),
@@ -126,32 +94,19 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
                         const isCase = itemType === 'case';
                         const fullRelativePath = [pathPrefix, leaf.path].filter(Boolean).join('/');
                         const itemKey = fullRelativePath || leaf.id;
-                        const isCaseOpen = !!(itemKey && openCases[itemKey]);
-                        const isCaseLoading = !!(itemKey && loadingCases[itemKey]);
-                        const nestedCase = itemKey ? nestedCases[itemKey] : null;
-                        const itemPath = fullRelativePath
-                            ? `/cases/${currentRootCaseId}/${fullRelativePath}`
-                            : `/cases/${currentRootCaseId}`;
-                        const getIconForType = () => {
-                            const iconColor = getIconColor(itemType, itemKey, leaf.id);
-                            switch (itemType) {
-                                case 'case':
-                                    return _jsx(BookRounded, { fontSize: "small", color: iconColor });
-                                case 'observable':
-                                    return _jsx(Visibility, { fontSize: "small", color: iconColor });
-                                case 'hit':
-                                    return _jsx(CheckCircle, { fontSize: "small", color: iconColor });
-                                case 'table':
-                                    return _jsx(TableChart, { fontSize: "small", color: iconColor });
-                                case 'lead':
-                                    return _jsx(Lightbulb, { fontSize: "small", color: iconColor });
-                                case 'reference':
-                                    return _jsx(LinkIcon, { fontSize: "small", color: iconColor });
-                                default:
-                                    return _jsx(Article, { fontSize: "small", color: iconColor });
-                            }
-                        };
-                        const leafColor = getItemColor(itemType, itemKey, leaf.id);
+                        const nodeState = itemKey ? caseStates[itemKey] : null;
+                        const isCaseOpen = !!nodeState?.open;
+                        const isCaseLoading = !!nodeState?.loading;
+                        const nestedCase = nodeState?.data ?? null;
+                        const itemPath = itemType !== 'reference'
+                            ? fullRelativePath
+                                ? `/cases/${currentRootCaseId}/${fullRelativePath}`
+                                : `/cases/${currentRootCaseId}`
+                            : leaf.value;
+                        const escalationColor = getEscalationColor(itemType, itemKey, leaf.id);
+                        const iconColor = escalationColor ?? 'inherit';
+                        const leafColor = escalationColor ? `${escalationColor}.light` : 'text.secondary';
+                        const Icon = ICON_FOR_TYPE[itemType ?? ''] ?? Article;
                         return (_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", pl: step * 1.5 + 1, py: 0.25, sx: [
                                         {
                                             cursor: 'pointer',
@@ -167,13 +122,13 @@ const CaseFolder = ({ case: _case, folder, name, step = -1, rootCaseId, pathPref
                                         decodeURIComponent(location.pathname) === itemPath && {
                                             background: theme.palette.grey[800]
                                         }
-                                    ], onClick: () => isCase && toggleCase(leaf, itemKey), component: Link, to: itemPath, children: [_jsx(ChevronRight, { fontSize: "small", sx: [
+                                    ], onClick: () => isCase && toggleCase(leaf, itemKey), component: Link, to: itemPath, target: itemType === 'reference' ? '_blank' : undefined, rel: itemType === 'reference' ? 'noopener noreferrer' : undefined, children: [_jsx(ChevronRight, { fontSize: "small", sx: [
                                                 !isCase && { opacity: 0 },
                                                 isCase && {
                                                     transition: theme.transitions.create('transform', { duration: 100 }),
                                                     transform: isCaseOpen ? 'rotate(90deg)' : 'rotate(0deg)'
                                                 }
-                                            ] }), getIconForType(), _jsx(Typography, { variant: "caption", color: leafColor, sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: last(leaf.path?.split('/') || []) })] }), isCase && isCaseOpen && isCaseLoading && (_jsx(Stack, { pl: step * 1.5 + 4, py: 0.25, children: _jsx(Skeleton, { width: 140, height: 16 }) })), isCase && isCaseOpen && nestedCase && (_jsx(CaseFolder, { case: nestedCase, step: step + 1, rootCaseId: currentRootCaseId, pathPrefix: fullRelativePath }))] }, `${_case?.case_id}-${leaf.id}-${leaf.path}`));
+                                            ] }), _jsx(Icon, { fontSize: "small", color: iconColor }), _jsx(Typography, { variant: "caption", color: leafColor, sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: leaf.path?.split('/').pop() || leaf.id })] }), isCase && isCaseOpen && isCaseLoading && (_jsx(Stack, { pl: step * 1.5 + 4, py: 0.25, children: _jsx(Skeleton, { width: 140, height: 16 }) })), isCase && isCaseOpen && nestedCase && (_jsx(CaseFolder, { case: nestedCase, step: step + 1, rootCaseId: currentRootCaseId, pathPrefix: fullRelativePath }))] }, `${_case?.case_id}-${leaf.id}-${leaf.path}`));
                     })] }))] }));
 };
 export default CaseFolder;

package/components/routes/cases/detail/sidebar/utils.d.ts

@@ -0,0 +1,3 @@
+import type { Item } from '@cccsaurora/howler-ui/models/entities/generated/Item';
+import type { Tree } from './types';
+export declare const buildTree: (items?: Item[]) => Tree;

package/components/routes/cases/detail/sidebar/utils.js

@@ -0,0 +1,25 @@
+import { get, set } from 'lodash-es';
+export const buildTree = (items = []) => {
+    // Root tree node stores direct children in `leaves` and nested folders as object keys.
+    const tree = { leaves: [] };
+    items.forEach(item => {
+        // Ignore items that cannot be placed in the folder structure.
+        if (!item?.path) {
+            return;
+        }
+        // Split path into folder segments + item name, then remove the item name.
+        const parts = item.path.split('/');
+        parts.pop();
+        if (parts.length > 0) {
+            // Use dot notation so lodash `get/set` can address nested folder objects.
+            const key = parts.join('.');
+            const size = get(tree, key)?.leaves?.length || 0;
+            // Append this item to the folder's `leaves` array.
+            set(tree, `${key}.leaves.${size}`, item);
+            return;
+        }
+        // Items without parent folders are top-level leaves.
+        tree.leaves.push(item);
+    });
+    return tree;
+};

package/package.json

@@ -101,7 +101,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.17.0-dev.600",
+  "version": "2.17.0-dev.617",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",