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

package/components/app/providers/ParameterProvider.test.js

@@ -272,17 +272,17 @@ describe('ParameterContext', () => {
                 });
             });
         });
-        describe('clearFilters', () => {
+        describe('resetFilters', () => {
             it('should clear all filters', async () => {
                 mockSearchParams = new URLSearchParams();
                 mockSearchParams.append('filter', 'filter1');
                 mockSearchParams.append('filter', 'filter2');
                 const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
                     filters: ctx.filters,
-                    clearFilters: ctx.clearFilters
+                    resetFilters: ctx.resetFilters
                 })), { wrapper: Wrapper });
                 await act(async () => {
-                    hook.result.current.clearFilters();
+                    hook.result.current.resetFilters();
                 });
                 await waitFor(() => {
                     expect(hook.result.current.filters).toEqual([]);
@@ -291,10 +291,10 @@ describe('ParameterContext', () => {
             it('should be no-op when already empty', async () => {
                 const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
                     filters: ctx.filters,
-                    clearFilters: ctx.clearFilters
+                    resetFilters: ctx.resetFilters
                 })), { wrapper: Wrapper });
                 await act(async () => {
-                    hook.result.current.clearFilters();
+                    hook.result.current.resetFilters();
                 });
                 await waitFor(() => {
                     expect(hook.result.current.filters).toEqual([]);
@@ -441,10 +441,10 @@ describe('ParameterContext', () => {
                 mockSearchParams.append('filter', 'filter1');
                 mockSearchParams.append('filter', 'filter2');
                 const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    clearFilters: ctx.clearFilters
+                    resetFilters: ctx.resetFilters
                 })), { wrapper: Wrapper });
                 await act(async () => {
-                    hook.result.current.clearFilters();
+                    hook.result.current.resetFilters();
                 });
                 await waitFor(() => {
                     expect(mockSetParams).toHaveBeenCalled();
@@ -706,6 +706,299 @@ describe('ParameterContext', () => {
             });
         });
     });
+    describe('indexes (multi-index support)', () => {
+        it('should initialize with default ["hit"] when no index params are present', async () => {
+            const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ctx.indexes), { wrapper: Wrapper });
+            expect(hook.result.current).toEqual(['hit']);
+        });
+        it('should initialize with single index from URL', async () => {
+            mockSearchParams = new URLSearchParams({ index: 'observable' });
+            const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ctx.indexes), { wrapper: Wrapper });
+            expect(hook.result.current).toEqual(['observable']);
+        });
+        it('should initialize with multiple indexes from URL', async () => {
+            mockSearchParams = new URLSearchParams();
+            mockSearchParams.append('index', 'hit');
+            mockSearchParams.append('index', 'observable');
+            const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ctx.indexes), { wrapper: Wrapper });
+            expect(hook.result.current).toEqual(['hit', 'observable']);
+        });
+        it('should deduplicate repeated index values from URL', async () => {
+            mockSearchParams = new URLSearchParams();
+            mockSearchParams.append('index', 'hit');
+            mockSearchParams.append('index', 'hit');
+            const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ctx.indexes), { wrapper: Wrapper });
+            expect(hook.result.current).toEqual(['hit']);
+        });
+        describe('addIndex', () => {
+            it('should add an index to the default array', async () => {
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    indexes: ctx.indexes,
+                    addIndex: ctx.addIndex
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.addIndex('observable');
+                });
+                await waitFor(() => {
+                    expect(hook.result.current.indexes).toEqual(['hit', 'observable']);
+                });
+            });
+            it('should not add a duplicate index', async () => {
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    indexes: ctx.indexes,
+                    addIndex: ctx.addIndex
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.addIndex('hit');
+                });
+                await waitFor(() => {
+                    expect(hook.result.current.indexes).toEqual(['hit']);
+                });
+            });
+        });
+        describe('removeIndex', () => {
+            it('should remove an index from the list', async () => {
+                mockSearchParams = new URLSearchParams();
+                mockSearchParams.append('index', 'hit');
+                mockSearchParams.append('index', 'observable');
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    indexes: ctx.indexes,
+                    removeIndex: ctx.removeIndex
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.removeIndex('hit');
+                });
+                await waitFor(() => {
+                    expect(hook.result.current.indexes).toEqual(['observable']);
+                });
+            });
+            it('should do nothing when removing a nonexistent index', async () => {
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    indexes: ctx.indexes,
+                    removeIndex: ctx.removeIndex
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.removeIndex('observable');
+                });
+                await waitFor(() => {
+                    expect(hook.result.current.indexes).toEqual(['hit']);
+                });
+            });
+            it('should handle removing from empty array', async () => {
+                mockSearchParams = new URLSearchParams();
+                mockSearchParams.append('index', 'hit');
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    indexes: ctx.indexes,
+                    removeIndex: ctx.removeIndex
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.removeIndex('hit');
+                });
+                await waitFor(() => {
+                    expect(hook.result.current.indexes).toEqual([]);
+                });
+            });
+        });
+        describe('setIndex', () => {
+            it('should update the index at the specified position', async () => {
+                mockSearchParams = new URLSearchParams();
+                mockSearchParams.append('index', 'hit');
+                mockSearchParams.append('index', 'observable');
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    indexes: ctx.indexes,
+                    setIndex: ctx.setIndex
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.setIndex(0, 'observable');
+                });
+                await waitFor(() => {
+                    expect(hook.result.current.indexes).toEqual(['observable', 'observable']);
+                });
+            });
+            it('should do nothing when index is out of bounds', async () => {
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    indexes: ctx.indexes,
+                    setIndex: ctx.setIndex
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.setIndex(5, 'observable');
+                });
+                await waitFor(() => {
+                    expect(hook.result.current.indexes).toEqual(['hit']);
+                });
+            });
+            it('should do nothing when position is negative', async () => {
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    indexes: ctx.indexes,
+                    setIndex: ctx.setIndex
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.setIndex(-1, 'observable');
+                });
+                await waitFor(() => {
+                    expect(hook.result.current.indexes).toEqual(['hit']);
+                });
+            });
+        });
+        describe('setIndexes', () => {
+            it('should replace all indexes with the provided list', async () => {
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    indexes: ctx.indexes,
+                    setIndexes: ctx.setIndexes
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.setIndexes(['observable']);
+                });
+                await waitFor(() => {
+                    expect(hook.result.current.indexes).toEqual(['observable']);
+                });
+            });
+            it('should deduplicate values when setting all indexes', async () => {
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    indexes: ctx.indexes,
+                    setIndexes: ctx.setIndexes
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.setIndexes(['hit', 'hit', 'observable']);
+                });
+                await waitFor(() => {
+                    expect(hook.result.current.indexes).toEqual(['hit', 'observable']);
+                });
+            });
+            it('should set to empty array', async () => {
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    indexes: ctx.indexes,
+                    setIndexes: ctx.setIndexes
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.setIndexes([]);
+                });
+                await waitFor(() => {
+                    expect(hook.result.current.indexes).toEqual([]);
+                });
+            });
+        });
+        describe('resetIndexes', () => {
+            it('should reset indexes to default ["hit"]', async () => {
+                mockSearchParams = new URLSearchParams();
+                mockSearchParams.append('index', 'hit');
+                mockSearchParams.append('index', 'observable');
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    indexes: ctx.indexes,
+                    resetIndexes: ctx.resetIndexes
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.resetIndexes();
+                });
+                await waitFor(() => {
+                    expect(hook.result.current.indexes).toEqual(['hit']);
+                });
+            });
+            it('should reset to default even when called on empty array', async () => {
+                mockSearchParams = new URLSearchParams();
+                mockSearchParams.append('index', 'hit');
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    indexes: ctx.indexes,
+                    removeIndex: ctx.removeIndex,
+                    resetIndexes: ctx.resetIndexes
+                })), { wrapper: Wrapper });
+                // First empty it
+                await act(async () => {
+                    hook.result.current.removeIndex('hit');
+                });
+                await waitFor(() => {
+                    expect(hook.result.current.indexes).toEqual([]);
+                });
+                // Resetting always returns to default ['hit']
+                await act(async () => {
+                    hook.result.current.resetIndexes();
+                });
+                await waitFor(() => {
+                    expect(hook.result.current.indexes).toEqual(['hit']);
+                });
+            });
+        });
+        describe('URL synchronization', () => {
+            it('should not write the default ["hit"] index to the URL', async () => {
+                renderHook(() => useContextSelector(ParameterContext, ctx => ctx.indexes), { wrapper: Wrapper });
+                // Allow any effects to flush
+                await waitFor(() => {
+                    // If setParams was called, the URL must not contain ?index=hit
+                    if (mockSetParams.mock.calls.length > 0) {
+                        const call = mockSetParams.mock.calls[mockSetParams.mock.calls.length - 1];
+                        const urlParams = typeof call[0] === 'function' ? call[0](mockSearchParams) : call[0];
+                        expect(urlParams.getAll('index')).toEqual([]);
+                    }
+                    else {
+                        // setParams not called at all is also fine
+                        expect(true).toBe(true);
+                    }
+                });
+            });
+            it('should write a non-default index to the URL', async () => {
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    addIndex: ctx.addIndex,
+                    resetIndexes: ctx.resetIndexes
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.resetIndexes();
+                    hook.result.current.addIndex('observable');
+                });
+                await waitFor(() => {
+                    expect(mockSetParams).toHaveBeenCalled();
+                    const call = mockSetParams.mock.calls[mockSetParams.mock.calls.length - 1];
+                    const urlParams = typeof call[0] === 'function' ? call[0](mockSearchParams) : call[0];
+                    expect(urlParams.getAll('index')).toEqual(['hit', 'observable']);
+                });
+            });
+            it('should sync multiple indexes to URL as multiple index params', async () => {
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    addIndex: ctx.addIndex
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.addIndex('observable');
+                });
+                await waitFor(() => {
+                    expect(mockSetParams).toHaveBeenCalled();
+                    const call = mockSetParams.mock.calls[mockSetParams.mock.calls.length - 1];
+                    const urlParams = typeof call[0] === 'function' ? call[0](mockSearchParams) : call[0];
+                    expect(urlParams.getAll('index')).toEqual(['hit', 'observable']);
+                });
+            });
+            it('should remove all index params from URL when state resets to default', async () => {
+                mockSearchParams = new URLSearchParams();
+                mockSearchParams.append('index', 'hit');
+                mockSearchParams.append('index', 'observable');
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    resetIndexes: ctx.resetIndexes
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.resetIndexes();
+                });
+                await waitFor(() => {
+                    expect(mockSetParams).toHaveBeenCalled();
+                    const call = mockSetParams.mock.calls[mockSetParams.mock.calls.length - 1];
+                    const urlParams = typeof call[0] === 'function' ? call[0](mockSearchParams) : call[0];
+                    expect(urlParams.getAll('index')).toEqual([]);
+                });
+            });
+            it('should remove index param from URL when state returns to default', async () => {
+                mockSearchParams = new URLSearchParams({ index: 'observable' });
+                const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
+                    setIndexes: ctx.setIndexes
+                })), { wrapper: Wrapper });
+                await act(async () => {
+                    hook.result.current.setIndexes(['hit']);
+                });
+                await waitFor(() => {
+                    expect(mockSetParams).toHaveBeenCalled();
+                    const call = mockSetParams.mock.calls[mockSetParams.mock.calls.length - 1];
+                    const urlParams = typeof call[0] === 'function' ? call[0](mockSearchParams) : call[0];
+                    expect(urlParams.getAll('index')).toEqual([]);
+                });
+            });
+        });
+    });
     describe('views (multi-view support)', () => {
         it('should initialize with empty array when no view params present', async () => {
             const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ctx.views), { wrapper: Wrapper });
@@ -839,17 +1132,17 @@ describe('ParameterContext', () => {
                 });
             });
         });
-        describe('clearViews', () => {
+        describe('resetViews', () => {
             it('should clear all views', async () => {
                 mockSearchParams = new URLSearchParams();
                 mockSearchParams.append('view', 'view_1');
                 mockSearchParams.append('view', 'view_2');
                 const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
                     views: ctx.views,
-                    clearViews: ctx.clearViews
+                    resetViews: ctx.resetViews
                 })), { wrapper: Wrapper });
                 await act(async () => {
-                    hook.result.current.clearViews();
+                    hook.result.current.resetViews();
                 });
                 await waitFor(() => {
                     expect(hook.result.current.views).toEqual([]);
@@ -858,10 +1151,10 @@ describe('ParameterContext', () => {
             it('should be no-op when already empty', async () => {
                 const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
                     views: ctx.views,
-                    clearViews: ctx.clearViews
+                    resetViews: ctx.resetViews
                 })), { wrapper: Wrapper });
                 await act(async () => {
-                    hook.result.current.clearViews();
+                    hook.result.current.resetViews();
                 });
                 await waitFor(() => {
                     expect(hook.result.current.views).toEqual([]);
@@ -1008,10 +1301,10 @@ describe('ParameterContext', () => {
                 mockSearchParams.append('view', 'view_1');
                 mockSearchParams.append('view', 'view_2');
                 const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ({
-                    clearViews: ctx.clearViews
+                    resetViews: ctx.resetViews
                 })), { wrapper: Wrapper });
                 await act(async () => {
-                    hook.result.current.clearViews();
+                    hook.result.current.resetViews();
                 });
                 await waitFor(() => {
                     expect(mockSetParams).toHaveBeenCalled();

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,20 @@
 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 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) => {
+    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 +23,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,8 @@
+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;
+}>;
+export default CaseCard;