@cccsaurora/howler-ui 2.18.0-dev.823 → 2.18.0-dev.840

package/components/elements/ContextMenu.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyboardArrowRight } from '@mui/icons-material';
+import { Box, Divider, Fade, ListItemIcon, ListItemText, Menu, MenuItem, MenuList, Paper, useTheme } from '@mui/material';
+import { useCallback, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+/**
+ * The margin at the bottom of the screen by which a submenu should be inverted.
+ * If hovering within this many pixels of the bottom, the submenu renders upward.
+ */
+const CONTEXTMENU_MARGIN = 350;
+/**
+ * Generic context menu component that renders a MUI Menu from a declarative
+ * items structure supporting leaf items, dividers, and single-level submenus.
+ *
+ * Submenus appear on hover and are positioned to avoid screen overflow.
+ */
+const ContextMenu = ({ items, onOpen, onClose, Component = Box, id, children }) => {
+    const theme = useTheme();
+    const [show, setShow] = useState({});
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [transformProps, setTransformProps] = useState({});
+    const handleClose = useCallback(() => {
+        setAnchorEl(null);
+        onClose?.();
+    }, [onClose]);
+    const handleContextMenu = useCallback(event => {
+        if (anchorEl) {
+            event.preventDefault();
+            handleClose();
+            return;
+        }
+        event.preventDefault();
+        if (window.innerHeight - event.clientY < 300) {
+            setTransformProps({
+                position: 'fixed',
+                bottom: `${window.innerHeight - event.clientY}px !important`,
+                top: 'unset !important',
+                left: `${event.clientX}px !important`
+            });
+        }
+        else {
+            setTransformProps({
+                position: 'fixed',
+                top: `${event.clientY}px !important`,
+                left: `${event.clientX}px !important`
+            });
+        }
+        setAnchorEl(event.target);
+        onOpen?.(event);
+    }, [anchorEl, handleClose, onOpen]);
+    /**
+     * Calculates positioning styles for a submenu based on the parent element's
+     * position relative to the viewport bottom.
+     */
+    const calculateSubMenuStyles = useCallback((parent) => {
+        const baseStyles = { position: 'absolute', maxHeight: '300px', overflow: 'auto' };
+        const defaultStyles = { ...baseStyles, top: 0, left: '100%' };
+        if (!parent) {
+            return defaultStyles;
+        }
+        const parentBounds = parent.getBoundingClientRect();
+        if (window.innerHeight - parentBounds.y < CONTEXTMENU_MARGIN) {
+            return { ...baseStyles, bottom: 0, left: '100%' };
+        }
+        return defaultStyles;
+    }, []);
+    // Reset submenu visibility whenever the menu is closed
+    useEffect(() => {
+        if (!anchorEl) {
+            setShow({});
+        }
+    }, [anchorEl]);
+    return (_jsxs(Component, { id: id, onContextMenu: handleContextMenu, children: [children, _jsx(Menu, { id: "record-menu", open: !!anchorEl, anchorEl: anchorEl, onClose: handleClose, slotProps: {
+                    paper: {
+                        sx: {
+                            ...transformProps,
+                            overflow: 'visible !important'
+                        },
+                        elevation: 2
+                    }
+                }, MenuListProps: {
+                    dense: true,
+                    sx: {
+                        minWidth: '250px',
+                        paddingY: '0 !important',
+                        '& > :first-child': {
+                            borderTopLeftRadius: theme.shape.borderRadius,
+                            borderTopRightRadius: theme.shape.borderRadius
+                        },
+                        '& > :last-child': {
+                            borderBottomLeftRadius: theme.shape.borderRadius,
+                            borderBottomRightRadius: theme.shape.borderRadius
+                        }
+                    }
+                }, anchorOrigin: { vertical: 'top', horizontal: 'left' }, onClick: handleClose, children: items.map(entry => {
+                    if (entry.kind === 'divider') {
+                        return _jsx(Divider, { sx: { my: '0 !important' } }, entry.id);
+                    }
+                    if (entry.kind === 'item') {
+                        if (entry.to) {
+                            return (_jsxs(MenuItem, { component: Link, to: entry.to, disabled: entry.disabled, children: [entry.icon && _jsx(ListItemIcon, { children: entry.icon }), _jsx(ListItemText, { children: entry.label })] }, entry.id));
+                        }
+                        return (_jsxs(MenuItem, { disabled: entry.disabled, onClick: entry.onClick, children: [entry.icon && _jsx(ListItemIcon, { children: entry.icon }), _jsx(ListItemText, { children: entry.label })] }, entry.id));
+                    }
+                    const { id: entryId, icon, label, disabled, items: subItems } = entry;
+                    return (_jsxs(MenuItem, { id: `${entryId}-menu-item`, sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, [entryId]: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, [entryId]: null })), disabled: disabled, children: [icon && _jsx(ListItemIcon, { children: icon }), _jsx(ListItemText, { sx: { flex: 1 }, children: label }), !disabled && _jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } }), _jsx(Fade, { in: !!show[entryId], unmountOnExit: true, children: _jsx(Paper, { id: `${entryId}-submenu`, sx: calculateSubMenuStyles(show[entryId]), elevation: 2, children: _jsx(MenuList, { sx: { p: 0, borderTopLeftRadius: 0 }, dense: true, role: "group", children: subItems.map(subItem => (_jsx(MenuItem, { onClick: subItem.onClick, disabled: subItem.disabled, children: _jsx(ListItemText, { children: subItem.label }) }, subItem.key))) }) }) })] }, entryId));
+                }) })] }));
+};
+export default ContextMenu;

package/components/elements/ContextMenu.test.d.ts

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

package/components/elements/ContextMenu.test.js

@@ -0,0 +1,215 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { omit } from 'lodash-es';
+import { act } from 'react';
+import { vi } from 'vitest';
+// Mock react-router-dom Link
+vi.mock('react-router-dom', () => ({
+    Link: ({ to, children, ...props }) => (_jsx("a", { href: to, ...props, children: children }))
+}));
+// Stub MUI components to simple HTML equivalents
+vi.mock('@mui/material', async () => {
+    const actual = await vi.importActual('@mui/material');
+    return {
+        ...actual,
+        useTheme: () => ({ shape: { borderRadius: 4 } }),
+        Menu: ({ children, open, onClose, ...props }) => open ? (_jsx("div", { role: "menu", onClick: onClose, ...omit(props, ['sx', 'slotProps', 'MenuListProps', 'anchorOrigin', 'anchorEl']), children: children })) : null,
+        MenuItem: ({ children, onClick, disabled, component, to, id, onMouseEnter, onMouseLeave, ...props }) => {
+            const Component = component || 'div';
+            return (_jsx(Component, { role: "menuitem", onClick: onClick, "aria-disabled": disabled, href: to, id: id, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...omit(props, ['sx']), children: children }));
+        },
+        Fade: ({ children, in: inProp }) => (inProp ? _jsx(_Fragment, { children: children }) : null),
+        ListItemIcon: ({ children }) => _jsx("div", { children: children }),
+        ListItemText: ({ children }) => _jsx("div", { children: children }),
+        Divider: () => _jsx("hr", {}),
+        Paper: ({ children, id, ...props }) => (_jsx("div", { id: id, ...omit(props, ['sx', 'elevation']), children: children })),
+        MenuList: ({ children, ...props }) => (_jsx("div", { role: "group", ...omit(props, ['sx', 'dense']), children: children })),
+        Box: ({ children, id, onContextMenu, ...props }) => (_jsx("div", { id: id, onContextMenu: onContextMenu, ...omit(props, ['sx']), children: children }))
+    };
+});
+import ContextMenu, {} from './ContextMenu';
+const renderMenu = (items, opts = {}) => {
+    const { autoOpen = true, onOpen = vi.fn(), onClose = vi.fn() } = opts;
+    const utils = render(_jsx(ContextMenu, { items: items, onOpen: onOpen, onClose: onClose, id: "test-menu", children: _jsx("div", { id: "trigger", children: "trigger" }) }));
+    const openMenu = () => act(() => {
+        fireEvent.contextMenu(screen.getByTestId('trigger'));
+    });
+    if (autoOpen) {
+        openMenu();
+    }
+    return { ...utils, onOpen, onClose, openMenu };
+};
+describe('ContextMenu', () => {
+    describe('Visibility', () => {
+        it('renders nothing before right-click', () => {
+            const { container } = renderMenu([], { autoOpen: false });
+            expect(container.querySelector('[role="menu"]')).toBeNull();
+        });
+        it('renders the menu after right-click', () => {
+            renderMenu([]);
+            expect(screen.getByRole('menu')).toBeInTheDocument();
+        });
+        it('calls onClose when the menu is clicked', () => {
+            const { onClose } = renderMenu([]);
+            fireEvent.click(screen.getByRole('menu'));
+            expect(onClose).toHaveBeenCalledTimes(1);
+        });
+        it('closes on a second right-click (toggle)', () => {
+            const { openMenu } = renderMenu([]);
+            expect(screen.getByRole('menu')).toBeInTheDocument();
+            openMenu();
+            expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+        });
+        it('calls onOpen when right-clicked', () => {
+            const onOpen = vi.fn();
+            renderMenu([], { onOpen });
+            expect(onOpen).toHaveBeenCalledTimes(1);
+        });
+        it('calls onClose when closed via toggle right-click', () => {
+            const onClose = vi.fn();
+            const { openMenu } = renderMenu([], { onClose });
+            openMenu();
+            expect(onClose).toHaveBeenCalledTimes(1);
+        });
+    });
+    describe('Leaf items', () => {
+        it('renders a plain button item', () => {
+            const onClick = vi.fn();
+            renderMenu([{ kind: 'item', id: 'action-1', label: 'Do something', onClick }]);
+            const item = screen.getByRole('menuitem');
+            expect(item).toHaveTextContent('Do something');
+        });
+        it('calls onClick when a plain item is clicked', () => {
+            const onClick = vi.fn();
+            renderMenu([{ kind: 'item', id: 'action-1', label: 'Do something', onClick }]);
+            fireEvent.click(screen.getByRole('menuitem'));
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+        it('renders a link item with correct href', () => {
+            renderMenu([{ kind: 'item', id: 'link-1', label: 'Go somewhere', to: '/some/path' }]);
+            const link = screen.getByRole('menuitem');
+            expect(link).toHaveAttribute('href', '/some/path');
+        });
+        it('marks a disabled item with aria-disabled', () => {
+            renderMenu([{ kind: 'item', id: 'action-1', label: 'Disabled', disabled: true }]);
+            expect(screen.getByRole('menuitem')).toHaveAttribute('aria-disabled', 'true');
+        });
+        it('renders an icon alongside the label when provided', () => {
+            renderMenu([{ kind: 'item', id: 'icon-item', label: 'With icon', icon: _jsx("span", { id: "test-icon" }) }]);
+            expect(screen.getByTestId('test-icon')).toBeInTheDocument();
+            expect(screen.getByRole('menuitem')).toHaveTextContent('With icon');
+        });
+    });
+    describe('Dividers', () => {
+        it('renders a divider between items', () => {
+            renderMenu([
+                { kind: 'item', id: 'item-a', label: 'A' },
+                { kind: 'divider', id: 'sep' },
+                { kind: 'item', id: 'item-b', label: 'B' }
+            ]);
+            expect(screen.getByRole('separator')).toBeInTheDocument();
+            expect(screen.getAllByRole('menuitem')).toHaveLength(2);
+        });
+    });
+    describe('Submenu items', () => {
+        const subItems = [
+            { key: 'sub-a', label: 'Sub A', onClick: vi.fn() },
+            { key: 'sub-b', label: 'Sub B', onClick: vi.fn() }
+        ];
+        const submenuEntry = {
+            kind: 'submenu',
+            id: 'my-submenu',
+            label: 'Parent',
+            items: subItems
+        };
+        it('renders the parent submenu item', () => {
+            renderMenu([submenuEntry]);
+            expect(screen.getByText('Parent')).toBeInTheDocument();
+        });
+        it('does not show submenu content before hovering', () => {
+            renderMenu([submenuEntry]);
+            expect(screen.queryByText('Sub A')).not.toBeInTheDocument();
+        });
+        it('shows submenu content on mouse enter', async () => {
+            renderMenu([submenuEntry]);
+            const parent = screen.getByRole('menuitem');
+            act(() => {
+                fireEvent.mouseEnter(parent);
+            });
+            await waitFor(() => {
+                expect(screen.getByText('Sub A')).toBeInTheDocument();
+                expect(screen.getByText('Sub B')).toBeInTheDocument();
+            });
+        });
+        it('hides submenu after mouse leave', async () => {
+            renderMenu([submenuEntry]);
+            const parent = screen.getByRole('menuitem');
+            act(() => {
+                fireEvent.mouseEnter(parent);
+            });
+            await waitFor(() => {
+                expect(screen.getByText('Sub A')).toBeInTheDocument();
+            });
+            act(() => {
+                fireEvent.mouseLeave(parent);
+            });
+            await waitFor(() => {
+                expect(screen.queryByText('Sub A')).not.toBeInTheDocument();
+            });
+        });
+        it('calls the sub-item onClick when a sub-item is clicked', async () => {
+            const onClick = vi.fn();
+            renderMenu([
+                {
+                    kind: 'submenu',
+                    id: 'actions',
+                    label: 'Actions',
+                    items: [{ key: 'do-it', label: 'Do it', onClick }]
+                }
+            ]);
+            const parent = screen.getByRole('menuitem');
+            act(() => {
+                fireEvent.mouseEnter(parent);
+            });
+            await waitFor(() => {
+                expect(screen.getByText('Do it')).toBeInTheDocument();
+            });
+            fireEvent.click(screen.getByText('Do it'));
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+        it('marks a disabled submenu parent with aria-disabled', () => {
+            renderMenu([{ ...submenuEntry, disabled: true }]);
+            expect(screen.getByRole('menuitem')).toHaveAttribute('aria-disabled', 'true');
+        });
+        it('does not show expand arrow when submenu is disabled', () => {
+            renderMenu([{ ...submenuEntry, disabled: true }]);
+            // The KeyboardArrowRight icon only renders when !disabled
+            expect(screen.queryByTestId('KeyboardArrowRightIcon')).not.toBeInTheDocument();
+        });
+        it('assigns correct DOM ids to submenu parent and panel', async () => {
+            renderMenu([submenuEntry]);
+            expect(document.getElementById('my-submenu-menu-item')).not.toBeNull();
+            const parent = screen.getByRole('menuitem');
+            act(() => {
+                fireEvent.mouseEnter(parent);
+            });
+            await waitFor(() => {
+                expect(document.getElementById('my-submenu-submenu')).not.toBeNull();
+            });
+        });
+    });
+    describe('Mixed item list', () => {
+        it('renders items in order', () => {
+            renderMenu([
+                { kind: 'item', id: 'first', label: 'First' },
+                { kind: 'divider', id: 'div-1' },
+                { kind: 'submenu', id: 'third', label: 'Third', items: [] },
+                { kind: 'item', id: 'fourth', label: 'Fourth' }
+            ]);
+            const items = screen.getAllByRole('menuitem');
+            expect(items[0]).toHaveTextContent('First');
+            expect(items[1]).toHaveTextContent('Third');
+            expect(items[2]).toHaveTextContent('Fourth');
+        });
+    });
+});

package/components/{routes/overviews/OverviewEditor.js → elements/MarkdownEditor.js}

@@ -4,8 +4,8 @@ import { useTheme } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import ThemedEditor from '@cccsaurora/howler-ui/components/elements/ThemedEditor';
 import { memo, useCallback, useContext, useEffect, useMemo } from 'react';
-import { conf, language } from './markdownExtendedTokenProvider';
-const OverviewEditor = ({ content, setContent, onMount, fontSize = 16, height = '100%', width = '100%', editorOptions = {} }) => {
+import { conf, language } from '../routes/overviews/markdownExtendedTokenProvider';
+const MarkdownEditor = ({ content, setContent, onMount, fontSize = 16, height = '100%', width = '100%', editorOptions = {} }) => {
     const theme = useTheme();
     const monaco = useMonaco();
     const { config } = useContext(ApiConfigContext);
@@ -53,4 +53,4 @@ const OverviewEditor = ({ content, setContent, onMount, fontSize = 16, height =
     }), [fontSize, editorOptions]);
     return (_jsx(ThemedEditor, { height: height, width: width, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: content, onChange: value => setContent(value), beforeMount: beforeEditorMount, onMount: onMount, options: options }));
 };
-export default memo(OverviewEditor);
+export default memo(MarkdownEditor);

package/components/elements/ObjectDetails.d.ts

@@ -0,0 +1,6 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+declare const _default: import("react").NamedExoticComponent<{
+    obj: Hit | Observable;
+}>;
+export default _default;

package/components/elements/{hit/HitDetails.js → ObjectDetails.js}

@@ -5,12 +5,12 @@ import { ArrowDropDown, InfoOutlined } from '@mui/icons-material';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Divider, Grid, Stack, TextField, Tooltip, Typography, useTheme } from '@mui/material';
 import { flatten } from 'flat';
 import Fuse from 'fuse.js';
-import { capitalize, groupBy, isArray, isEmpty, isNull, isObject, isPlainObject, isUndefined, max, sortBy, uniq } from 'lodash-es';
+import { capitalize, groupBy, isArray, isBoolean, isEmpty, isNull, isNumber, isObject, isPlainObject, isUndefined, max, sortBy, uniq } from 'lodash-es';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
-import PluginTypography from '../PluginTypography';
-const ListRenderer = memo(({ hit, objKey: key, entries, maxKeyLength }) => {
+import PluginTypography from './PluginTypography';
+const ListRenderer = memo(({ obj, objKey: key, entries, maxKeyLength }) => {
     const theme = useTheme();
     const { t } = useTranslation();
     const allPrimitives = useMemo(() => entries.every(entry => !isObject(entry)), [entries]);
@@ -36,15 +36,15 @@ const ListRenderer = memo(({ hit, objKey: key, entries, maxKeyLength }) => {
                         marginBottom: allPrimitives ? 0 : theme.spacing(1)
                     }, children: allPrimitives ? key.padStart(maxKeyLength ?? key.length) : key }) }), _jsxs(Grid, { container: true, spacing: allPrimitives ? 1 : 4, ml: allPrimitives ? -1 : -4, overflow: "hidden", maxWidth: "100%", children: [uniqueEntries.map((entry, index) => {
                         if (Array.isArray(entry)) {
-                            return (_jsx(Grid, { item: true, xs: "auto", maxWidth: "100%", children: _jsx(ListRenderer, { hit: hit, objKey: `${key}.${index}`, entries: entry }) }, index));
+                            return (_jsx(Grid, { item: true, xs: "auto", maxWidth: "100%", children: _jsx(ListRenderer, { obj: obj, objKey: `${key}.${index}`, entries: entry }) }, index));
                         }
                         if (isPlainObject(entry)) {
                             return (_jsx(Grid, { item: true, xs: 'auto', maxWidth: "100%", minWidth: "350px", children: _jsx(ObjectRenderer, { parentKey: `${key}.${index}`, indent: true, data: entry }) }, index));
                         }
-                        return (_jsxs(Grid, { item: true, maxWidth: "100%", className: `${key}_${index}`.replace(/\./g, '_'), component: "code", display: "flex", flexDirection: "row", children: [_jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: entry, field: key.replace(/\.[0-9]+/g, ''), hit: hit, children: entry }), allPrimitives && index < uniqueEntries.length - 1 && _jsx("span", { children: "," })] }, entry));
+                        return (_jsxs(Grid, { item: true, maxWidth: "100%", className: `${key}_${index}`.replace(/\./g, '_'), component: "code", display: "flex", flexDirection: "row", children: [_jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: entry, field: key.replace(/\.[0-9]+/g, ''), obj: obj, children: entry }), allPrimitives && index < uniqueEntries.length - 1 && _jsx("span", { children: "," })] }, entry));
                     }), omittedDuplicates && (_jsx(Grid, { item: true, display: "flex", alignItems: "center", children: _jsx(Tooltip, { title: t('duplicates.omitted'), children: _jsx(InfoOutlined, { sx: { fontSize: '20px', ml: 1 }, color: "disabled" }) }) }))] })] }));
 });
-const ObjectRenderer = memo(({ hit, data, parentKey, indent = false }) => {
+const ObjectRenderer = memo(({ obj: obj, data, parentKey, indent = false }) => {
     const theme = useTheme();
     const entries = useMemo(() => {
         const unsorted = Object.entries(flatten(data, { safe: true })).map(([key, val]) => [key, val]);
@@ -56,10 +56,10 @@ const ObjectRenderer = memo(({ hit, data, parentKey, indent = false }) => {
     }, [data]);
     const longestKey = useMemo(() => max(entries.map(([key]) => key.length)), [entries]);
     return (_jsxs(Stack, { direction: "row", overflow: "hidden", maxWidth: "100%", children: [indent && _jsx(Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: 'primary.main', borderWidth: '2px' } }), _jsx(Stack, { flex: 1, ml: 1, maxWidth: "100%", children: entries
-                    .filter(([__, val]) => !isNull(val) && !isUndefined(val) && !isEmpty(val))
+                    .filter(([__, val]) => !isNull(val) && !isUndefined(val) && !isEmpty(val) && !isBoolean(val) && !isNumber(val))
                     .map(([key, val]) => {
                     if (Array.isArray(val)) {
-                        return _jsx(ListRenderer, { hit: hit, maxKeyLength: longestKey, objKey: key, entries: val }, key);
+                        return _jsx(ListRenderer, { obj: obj, maxKeyLength: longestKey, objKey: key, entries: val }, key);
                     }
                     return (_jsxs("code", { className: (parentKey ? `${parentKey}.${key}` : key).replace(/\./g, '_'), style: {
                             display: 'grid',
@@ -75,14 +75,14 @@ const ObjectRenderer = memo(({ hit, data, parentKey, indent = false }) => {
                                     paddingRight: theme.spacing(1),
                                     height: '100%',
                                     wordWrap: 'break-word'
-                                }, children: _jsx("code", { style: { maxWidth: '100%' }, children: key }) }), _jsx(Box, { display: "flex", alignItems: "start", children: _jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: val, field: (parentKey ? parentKey.concat('.', key) : key).replace(/\.[0-9]+/g, ''), hit: hit, children: val }) })] }, key));
+                                }, children: _jsx("code", { style: { maxWidth: '100%' }, children: key }) }), _jsx(Box, { display: "flex", alignItems: "start", children: _jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: val, field: (parentKey ? parentKey.concat('.', key) : key).replace(/\.[0-9]+/g, ''), obj: obj, children: val }) })] }, key));
                 }) })] }));
 });
-const Collapsible = memo(({ hit, title, data, query }) => {
+const Collapsible = memo(({ obj, title, data, query }) => {
     const throttler = useMemo(() => new Throttler(400), []);
     const [scores, setScores] = useState([]);
     const [results, setResults] = useState({});
-    const options = useMemo(() => Object.entries(data).map(([key, value]) => ({ key, value })), [data]);
+    const options = useMemo(() => Object.entries(data).map(([key, value]) => ({ key, value: value.toString() })), [data]);
     const keys = useMemo(() => options
         .flatMap(option => (isArray(option.value) ? Object.keys(flatten(option.value)) : []))
         .map(key => key.replace(/\d+/g, 'value'))
@@ -109,20 +109,20 @@ const Collapsible = memo(({ hit, title, data, query }) => {
     if (isEmpty(results)) {
         return null;
     }
-    return (_jsxs(Accordion, { defaultExpanded: true, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ArrowDropDown, {}), children: _jsx(Typography, { children: title }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 1, justifyContent: "stretch", sx: styles, children: _jsx(ObjectRenderer, { hit: hit, showParentKey: true, data: results }) }) })] }));
+    return (_jsxs(Accordion, { defaultExpanded: true, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ArrowDropDown, {}), sx: { my: 0 }, children: _jsx(Typography, { children: title }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 0.5, justifyContent: "stretch", sx: styles, children: _jsx(ObjectRenderer, { obj: obj, showParentKey: true, data: results }) }) })] }));
 });
-const HitDetails = ({ hit }) => {
+const ObjectDetails = ({ obj }) => {
     const { t } = useTranslation();
     const [query, setQuery] = useState('');
-    const groups = useMemo(() => groupBy(Object.entries(flatten(hit ?? {}, { safe: true })).filter(([key, value]) => !key.startsWith('__') &&
+    const groups = useMemo(() => groupBy(Object.entries(flatten(obj ?? {}, { safe: true })).filter(([key, value]) => !key.startsWith('__') &&
         key.includes('.') &&
         ['howler', 'labels'].every(prefix => !key.startsWith(prefix)) &&
-        !isEmpty(value)), ([key]) => key.split('.')[0]), [hit]);
+        (!isEmpty(value) || isNumber(value) || isBoolean(value))), ([key]) => key.split('.')[0]), [obj]);
     return (_jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { value: query, onChange: event => setQuery(event.target.value), label: t('overview.search') }), Object.entries(groups).map(([section, entries]) => {
-                return (_jsx(Collapsible, { hit: hit, query: query, title: section
+                return (_jsx(Collapsible, { obj: obj, query: query, title: section
                         .split('_')
                         .map(word => capitalize(word))
                         .join(' '), data: Object.fromEntries(entries) }, section));
             })] }));
 };
-export default memo(HitDetails);
+export default memo(ObjectDetails);

package/components/elements/PluginTypography.d.ts

@@ -1,10 +1,11 @@
 import { type TypographyProps } from '@mui/material';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
 export type PluginTypographyProps = TypographyProps & {
     value: string;
     context: string;
     field?: string;
-    hit?: Hit;
+    obj?: Hit | Observable;
 };
 declare const _default: import("react").NamedExoticComponent<PluginTypographyProps>;
 export default _default;

package/components/elements/PluginTypography.js

@@ -3,7 +3,7 @@ import { Typography } from '@mui/material';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { memo } from 'react';
 import { usePluginStore } from 'react-pluggable';
-const PluginTypography = ({ children, value, context, field, hit, ...props }) => {
+const PluginTypography = ({ children, value, context, field, obj, ...props }) => {
     const pluginStore = usePluginStore();
     for (const plugin of howlerPluginStore.plugins) {
         const component = pluginStore.executeFunction(`${plugin}.typography`, {
@@ -11,7 +11,8 @@ const PluginTypography = ({ children, value, context, field, hit, ...props }) =>
             value,
             context,
             field,
-            hit,
+            hit: obj,
+            obj,
             ...props
         });
         if (component) {

package/components/elements/UserList.d.ts

@@ -2,8 +2,11 @@ import type { SxProps, Theme } from '@mui/material';
 import type { FC } from 'react';
 declare const UserList: FC<{
     buttonSx?: SxProps<Theme>;
-    userId: string;
-    onChange: (userId: string) => void;
+    userIds: string[];
+    onChange: (userIds: string[]) => void;
     i18nLabel: string;
+    avatarHeight?: number;
+    disabled?: boolean;
+    multiple?: boolean;
 }>;
 export default UserList;

package/components/elements/UserList.js

@@ -1,18 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Autocomplete, Box, IconButton, Popover, TextField, Typography } from '@mui/material';
+import { Add } from '@mui/icons-material';
+import { Autocomplete, AvatarGroup, Box, IconButton, Popover, Stack, TextField, Typography } from '@mui/material';
 import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
+import { uniq } from 'lodash-es';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import HowlerAvatar from './display/HowlerAvatar';
-const UserList = ({ buttonSx = {}, userId, onChange, i18nLabel }) => {
+const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight = 32, multiple = false, disabled = false }) => {
     const { t } = useTranslation();
     const [anchorEl, setAnchorEl] = useState(null);
-    const { users, searchUsers } = useContext(UserListContext);
-    const userIds = useMemo(() => Object.keys(users), [users]);
+    const { users, fetchUsers } = useContext(UserListContext);
+    const allUserIds = useMemo(() => Object.keys(users), [users]);
     useEffect(() => {
-        searchUsers('uname:*');
-    }, [searchUsers]);
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: buttonSx, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(HowlerAvatar, { userId: userId }) }), _jsx(Popover, { open: !!anchorEl, onClose: () => setAnchorEl(null), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsx(Box, { sx: { p: 2 }, children: _jsx(Autocomplete, { sx: { minWidth: '300px' }, options: userIds, renderInput: params => _jsx(TextField, { ...params, label: t(i18nLabel), size: "small" }), renderOption: (props, _userId) => {
+        fetchUsers(new Set(userIds));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [userIds]);
+    return (_jsxs(_Fragment, { children: [multiple ? (_jsxs(Stack, { direction: "row", spacing: 0.25, alignItems: "center", children: [_jsx(AvatarGroup, { children: uniq(userIds ?? [null]).map(userId => (_jsx(HowlerAvatar, { userId: userId, sx: { height: avatarHeight, width: avatarHeight } }, userId))) }), _jsx(IconButton, { size: "small", sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(Add, {}) })] })) : (_jsx(IconButton, { sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(HowlerAvatar, { userId: userIds[0], sx: { height: avatarHeight, width: avatarHeight } }) })), _jsx(Popover, { open: !!anchorEl, onClose: () => setAnchorEl(null), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsx(Box, { sx: { p: 2 }, children: _jsx(Autocomplete, { disabled: disabled, multiple: multiple, sx: { minWidth: '300px' }, options: allUserIds, renderInput: params => _jsx(TextField, { ...params, label: t(i18nLabel), size: "small" }), renderOption: (props, _userId) => {
                             const user = users[_userId];
                             return (_jsx("li", { ...props, children: _jsxs(Box, { sx: {
                                         display: 'grid',
@@ -21,6 +24,13 @@ const UserList = ({ buttonSx = {}, userId, onChange, i18nLabel }) => {
                                         gridTemplateAreas: `"profile name"\n"profile email"`,
                                         columnGap: 1.5
                                     }, children: [_jsx(HowlerAvatar, { sx: { gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }, userId: user.username }), _jsx(Typography, { sx: { gridArea: 'name' }, variant: "body1", children: user.name }), _jsx(Typography, { sx: { gridArea: 'email' }, variant: "caption", children: user.email })] }) }));
-                        }, value: userId, onChange: (__, option) => onChange(option) }) }) })] }));
+                        }, value: userIds, onChange: (__, options) => {
+                            if (multiple) {
+                                onChange(Array.isArray(options) ? options : [options]);
+                            }
+                            else {
+                                onChange([Array.isArray(options) ? (options[0] ?? null) : options]);
+                            }
+                        } }) }) })] }));
 };
 export default UserList;

package/components/elements/addons/search/phrase/Phrase.js

@@ -80,7 +80,7 @@ const Phrase = ({ value = '', variant = 'outlined', suggestions = [], lexer, sug
                         onSelectCapture: _onSelectCapture,
                         startAdornment: startAdornment && _jsx(InputAdornment, { position: "start", children: startAdornment }),
                         endAdornment: endAdornment && _jsx(InputAdornment, { position: "end", children: endAdornment })
-                    } }), _jsx(Popper, { anchorEl: containerRef.current, style: { width: '100%', zIndex: 100 }, open: optionsOpen && (options.length > 0 || (debug && analysisRef.current?.tokens.length > 0)), disablePortal: true, children: _jsx(Paper, { elevation: 2, sx: { maxHeight: 200, overflow: 'auto', borderTopRightRadius: 0, borderTopLeftRadius: 0 }, children: _jsx(MenuList, { ref: menuRef, onKeyDown: _onMenuKeyDown, sx: {
+                    } }), _jsx(Popper, { anchorEl: containerRef.current, style: { width: '100%', zIndex: 100 }, open: optionsOpen && (options.length > 0 || (debug && analysisRef.current?.tokens.length > 0)), disablePortal: true, children: _jsx(Paper, { elevation: 1, sx: { maxHeight: 200, overflow: 'auto', borderTopRightRadius: 0, borderTopLeftRadius: 0 }, children: _jsx(MenuList, { ref: menuRef, onKeyDown: _onMenuKeyDown, sx: {
                                 '&:focus': {
                                     outline: 'none'
                                 }

package/components/elements/case/CaseCard.d.ts

@@ -0,0 +1,12 @@
+import { type CardProps } from '@mui/material';
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const CaseCard: FC<{
+    case?: Case;
+    caseId?: string;
+    className?: string;
+    slotProps?: {
+        card?: CardProps;
+    };
+}>;
+export default CaseCard;

package/components/elements/case/CaseCard.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CheckCircleOutline, HourglassBottom, RadioButtonUnchecked, UpdateOutlined } from '@mui/icons-material';
+import { Card, Chip, Divider, Grid, Skeleton, Stack, Tooltip, Typography, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import StatusIcon from '@cccsaurora/howler-ui/components/elements/case/StatusIcon';
+import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import PluginChip from '@cccsaurora/howler-ui/components/elements/PluginChip';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import dayjs from 'dayjs';
+import { countBy } from 'lodash-es';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { twitterShort } from '@cccsaurora/howler-ui/utils/utils';
+const STATUS_COLORS = {
+    resolved: 'success'
+};
+const CaseCard = ({ case: providedCase, caseId, className, slotProps }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const theme = useTheme();
+    const [_case, setCase] = useState(providedCase);
+    useEffect(() => {
+        if (providedCase) {
+            setCase(providedCase);
+        }
+    }, [providedCase]);
+    useEffect(() => {
+        if (caseId) {
+            dispatchApi(api.v2.case.get(caseId), { throwError: false }).then(setCase);
+        }
+    }, [caseId, dispatchApi]);
+    if (!_case) {
+        return _jsx(Skeleton, { variant: "rounded", height: 250, sx: { mb: 1 }, className: className });
+    }
+    return (_jsx(Card, { variant: "outlined", ...slotProps?.card, sx: [
+            { p: 1, mb: 1, borderColor: theme.palette[STATUS_COLORS[_case.status]]?.main },
+            ...(Array.isArray(slotProps?.card?.sx) ? slotProps.card.sx : slotProps?.card?.sx ? [slotProps.card.sx] : [])
+        ], className: className, children: _jsx(Stack, { direction: "row", alignItems: "start", spacing: 1, children: _jsxs(Stack, { sx: { flex: 1 }, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", display: "flex", alignItems: "start", children: _case.title }), _jsx(StatusIcon, { status: _case.status }), _jsx("div", { style: { flex: 1 } }), _case.start && _case.end && (_jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(HourglassBottom, { fontSize: "small" }), size: "small", label: twitterShort(_case.start) + ' - ' + twitterShort(_case.end) }) })), _jsx(Tooltip, { title: dayjs(_case.updated).toString(), children: _jsx(Chip, { icon: _jsx(UpdateOutlined, { fontSize: "small" }), size: "small", label: twitterShort(_case.updated) }) })] }), _jsx(Typography, { variant: "caption", color: "textSecondary", children: _case.summary.trim().split('\n')[0] }), _case.participants?.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true }), _jsx(Stack, { direction: "row", spacing: 1, children: _case.participants?.map(participant => (_jsx(HowlerAvatar, { sx: { height: '20px', width: '20px' }, userId: participant }, participant))) })] })), _jsx(Divider, { flexItem: true }), _jsxs(Grid, { container: true, spacing: 1, children: [_case.targets?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { size: "small", color: "primary", context: "casecard", variant: "outlined", value: indicator, label: indicator }) }, indicator))), _case.targets?.length > 0 && (_case.indicators?.length > 0 || _case.threats?.length > 0) && (_jsx(Grid, { item: true, children: _jsx(Divider, { orientation: "vertical" }) })), _case.indicators?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { variant: "outlined", context: "casecard", value: indicator, label: indicator }) }, indicator))), _case.indicators?.length > 0 && _case.threats?.length > 0 && (_jsx(Grid, { item: true, children: _jsx(Divider, { orientation: "vertical" }) })), _case.threats?.map(indicator => (_jsx(Grid, { item: true, children: _jsx(PluginChip, { size: "small", color: "warning", variant: "outlined", context: "casecard", value: indicator, label: indicator }) }, indicator)))] }), _case.tasks?.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true }), _jsxs(Stack, { spacing: 0.5, alignItems: "start", children: [_case.tasks.some(task => task.complete) && (_jsx(Chip, { size: "small", color: "success", icon: _jsx(CheckCircleOutline, {}), label: `${countBy(_case.tasks, task => task.complete).true} ${t('complete')}` })), _case.tasks
+                                        .filter(task => !task.complete)
+                                        .map(task => (_jsx(Chip, { icon: _jsx(RadioButtonUnchecked, {}), label: task.summary }, task.id)))] })] }))] }) }) }, _case.case_id));
+};
+export default CaseCard;

package/components/elements/case/CasePreview.d.ts

@@ -0,0 +1,6 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+type PreviewProps = {
+    case: Case;
+};
+declare const _default: import("react").NamedExoticComponent<PreviewProps>;
+export default _default;