@cccsaurora/howler-ui 2.19.0-dev.1181 → 2.19.0-dev.1264

package/components/elements/hit/elements/Assigned.test.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import { createMockHit } from '@cccsaurora/howler-ui/tests/utils';
+import { describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+vi.mock('commons/components/app/hooks', () => ({
+    useAppUser: () => ({ user: { username: 'current-user' } })
+}));
+vi.mock('components/elements/display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("div", { id: `avatar-${userId}`, children: userId })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+// ---------------------------------------------------------------------------
+// Import after mocks
+// ---------------------------------------------------------------------------
+import { HitLayout } from '../HitLayout';
+import Assigned from './Assigned';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const createWrapper = (viewers) => {
+    const Wrapper = ({ children }) => (_jsx(SocketContext.Provider, { value: {
+            viewers,
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            emit: vi.fn(),
+            status: 1,
+            reconnect: vi.fn(),
+            isOpen: () => true,
+            fetchViewers: vi.fn()
+        }, children: children }));
+    return Wrapper;
+};
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('Assigned', () => {
+    it('renders the assignment avatar', () => {
+        const hit = createMockHit({ howler: { assignment: 'analyst-1' } });
+        render(_jsx(Assigned, { hit: hit, layout: HitLayout.COMFY }), { wrapper: createWrapper({}) });
+        expect(screen.getByTestId('avatar-analyst-1')).toBeInTheDocument();
+    });
+    it('renders viewer avatars from socket context, filtering out current user', () => {
+        const hit = createMockHit({ howler: { id: 'hit-1', assignment: 'analyst-1' } });
+        render(_jsx(Assigned, { hit: hit, layout: HitLayout.COMFY }), {
+            wrapper: createWrapper({ 'hit-1': ['viewer-a', 'viewer-b', 'current-user'] })
+        });
+        expect(screen.getByTestId('avatar-viewer-a')).toBeInTheDocument();
+        expect(screen.getByTestId('avatar-viewer-b')).toBeInTheDocument();
+        expect(screen.queryByText('current-user')).not.toBeInTheDocument();
+    });
+    it('renders no viewer avatars when no viewers exist', () => {
+        const hit = createMockHit({ howler: { id: 'hit-2', assignment: 'analyst-1' } });
+        render(_jsx(Assigned, { hit: hit, layout: HitLayout.COMFY }), { wrapper: createWrapper({}) });
+        expect(screen.getByTestId('avatar-analyst-1')).toBeInTheDocument();
+        expect(screen.queryByTestId('avatar-viewer-a')).not.toBeInTheDocument();
+    });
+});

package/components/elements/hit/grid/AddColumnModal.js

@@ -3,23 +3,24 @@ import { Add, Check, Settings, TableChart } from '@mui/icons-material';
 import { Autocomplete, Chip, Divider, Grid, IconButton, Stack, TextField } from '@mui/material';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
-import { has, sortBy, uniq } from 'lodash-es';
+import { sortBy, uniq } from 'lodash-es';
 import { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
+import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 const AddColumnModal = ({ addColumn, columns }) => {
     const { t } = useTranslation();
     const { hitFields } = useContext(FieldContext);
-    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
+    const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
     const { getMatchingTemplate } = useMatchers();
     const [columnToAdd, setColumnToAdd] = useState(null);
     const options = useMemo(() => hitFields.map(field => field.key), [hitFields]);
     const [suggestions, setSuggestions] = useState([]);
     useEffect(() => {
         (async () => {
-            setSuggestions(uniq((await Promise.all((response?.items ?? []).map(async (_hit) => (has(_hit, '__template') ? _hit.__template?.keys : (await getMatchingTemplate(_hit))?.keys) ?? []))).flat()));
+            setSuggestions(uniq((await Promise.all((response?.items ?? []).filter(isHit).map(async (_hit) => (await getMatchingTemplate(_hit))?.keys ?? []))).flat()));
         })();
     }, [getMatchingTemplate, response?.items]);
     return (_jsx(ChipPopper, { icon: _jsx(TableChart, {}), deleteIcon: _jsx(Settings, {}), toggleOnDelete: true, slotProps: { chip: { size: 'small' } }, children: _jsxs(Stack, { spacing: 1, p: 1, width: "500px", children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Autocomplete, { sx: { flex: 1 }, size: "small", options: options, value: columnToAdd, renderInput: params => _jsx(TextField, { fullWidth: true, placeholder: t('hit.fields'), ...params }), onChange: (_ev, value) => setColumnToAdd(value) }), _jsx(IconButton, { disabled: !columnToAdd, onClick: () => {

package/components/elements/hit/grid/EnhancedCell.d.ts

@@ -1,7 +1,8 @@
 import { type SxProps } from '@mui/material';
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 declare const _default: import("react").NamedExoticComponent<{
-    hit: Hit;
+    record: Hit | Event;
     value: string;
     sx?: SxProps;
     className: string;

package/components/elements/hit/grid/EnhancedCell.js

@@ -4,7 +4,7 @@ import { Stack, TableCell } from '@mui/material';
 import PluginTypography from '@cccsaurora/howler-ui/components/elements/PluginTypography';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-const EnhancedCell = ({ hit, value: rawValue, sx = {}, className, field }) => {
+const EnhancedCell = ({ record, value: rawValue, sx = {}, className, field }) => {
     const { t } = useTranslation();
     if (!rawValue) {
         return _jsx(TableCell, { style: { borderBottom: 'none' }, children: t('none') });
@@ -13,6 +13,6 @@ const EnhancedCell = ({ hit, value: rawValue, sx = {}, className, field }) => {
     return (_jsx(TableCell, { sx: { borderBottom: 'none', borderRight: 'thin solid', borderRightColor: 'divider', fontSize: '0.8rem' }, children: _jsx(Stack, { direction: "row", className: className, spacing: 0.5, sx: [
                 { display: 'flex', justifyContent: 'start', width: '100%', overflow: 'hidden' },
                 ...(Array.isArray(sx) ? sx : [sx])
-            ], children: values.map((value, index) => (_jsx(PluginTypography, { context: "table", sx: { fontSize: 'inherit', textOverflow: 'ellipsis' }, value: value, field: field, hit: hit, children: value }, value + index))) }) }));
+            ], children: values.map((value, index) => (_jsx(PluginTypography, { context: "table", sx: { fontSize: 'inherit', textOverflow: 'ellipsis' }, value: value, field: field, obj: record, children: value }, value + index))) }) }));
 };
 export default memo(EnhancedCell);

package/components/elements/hit/grid/{HitRow.d.ts → RecordRow.d.ts}

@@ -1,10 +1,11 @@
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 declare const _default: import("react").NamedExoticComponent<{
-    hit: Hit;
+    record: Hit | Event;
     analyticIds: Record<string, string>;
     columns: string[];
     columnWidths: Record<string, number>;
     collapseMainColumn: boolean;
-    onClick: (e: React.MouseEvent<HTMLDivElement>, hit: Hit) => void;
+    onClick: (e: React.MouseEvent<HTMLDivElement>, record: Hit | Event) => void;
 }>;
 export default _default;

package/components/elements/hit/grid/{HitRow.js → RecordRow.js}

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { KeyboardArrowUp } from '@mui/icons-material';
 import { Box, Collapse, IconButton, lighten, Stack, TableCell, TableRow, Typography, useTheme } from '@mui/material';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import EventCard from '@cccsaurora/howler-ui/components/elements/event/EventCard';
+import Assigned from '@cccsaurora/howler-ui/components/elements/hit/elements/Assigned';
 import EscalationChip from '@cccsaurora/howler-ui/components/elements/hit/elements/EscalationChip';
-import HitUsers from '@cccsaurora/howler-ui/components/elements/hit/elements/HitUsers';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import { get } from 'lodash-es';
@@ -12,14 +13,15 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
+import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import EnhancedCell from './EnhancedCell';
-const HitRow = ({ hit, analyticIds, columns, columnWidths, collapseMainColumn, onClick }) => {
+const RecordRow = ({ record, analyticIds, columns, columnWidths, collapseMainColumn, onClick }) => {
     const theme = useTheme();
     const { t } = useTranslation();
-    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+    const selectedHits = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const [expandRow, setExpandRow] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs(TableRow, { id: hit.howler.id, onClick: ev => onClick(ev, hit), sx: [
+    return (_jsxs(_Fragment, { children: [_jsxs(TableRow, { id: record.howler.id, onClick: ev => onClick(ev, record), sx: [
                     {
                         transition: theme.transitions.create('background-color'),
                         '&:hover': {
@@ -27,10 +29,10 @@ const HitRow = ({ hit, analyticIds, columns, columnWidths, collapseMainColumn, o
                             backgroundColor: theme.palette.background.paper
                         }
                     },
-                    selectedHits.some(_hit => _hit.howler.id === hit.howler.id) && {
+                    selectedHits.some(_hit => _hit.howler.id === record.howler.id) && {
                         backgroundColor: lighten(theme.palette.background.paper, 0.15)
                     },
-                    selected === hit.howler.id && {
+                    selected === record.howler.id && {
                         backgroundColor: lighten(theme.palette.background.paper, 0.25)
                     }
                 ], children: [_jsx(TableCell, { sx: {
@@ -45,6 +47,6 @@ const HitRow = ({ hit, analyticIds, columns, columnWidths, collapseMainColumn, o
                                         e.preventDefault();
                                         e.stopPropagation();
                                         setExpandRow(_expanded => !_expanded);
-                                    }, children: _jsx(KeyboardArrowUp, {}) }), _jsx(Collapse, { in: !collapseMainColumn, orientation: "horizontal", unmountOnExit: true, children: _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "nowrap", children: [_jsx(EscalationChip, { hit: hit, layout: HitLayout.DENSE, hideLabel: true }), _jsxs(Typography, { sx: { textWrap: 'nowrap', whiteSpace: 'nowrap', fontSize: 'inherit' }, children: [analyticIds[hit.howler.analytic] ? (_jsx(Link, { to: `/analytics/${analyticIds[hit.howler.analytic]}`, onClick: e => e.stopPropagation(), children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }), _jsx(HitUsers, { hit: hit, layout: HitLayout.DENSE, hideLabel: true })] }) })] }) }), columns.map(col => (_jsx(EnhancedCell, { hit: hit, className: `col-${col.replaceAll('.', '-')}`, value: get(hit, col) ?? t('none'), sx: columnWidths[col] ? { width: columnWidths[col] } : { width: '220px', maxWidth: '300px' }, field: col }, col)))] }, hit.howler.id), _jsx(TableRow, { onClick: ev => onClick(ev, hit), children: _jsx(TableCell, { colSpan: columns.length + 2, style: { paddingBottom: 0, paddingTop: 0 }, children: _jsx(Collapse, { in: expandRow, unmountOnExit: true, children: _jsx(Box, { width: "100%", maxWidth: "1200px", margin: 1, children: _jsx(HitCard, { id: hit.howler.id, layout: HitLayout.NORMAL }) }) }) }) })] }));
+                                    }, children: _jsx(KeyboardArrowUp, {}) }), _jsx(Collapse, { in: !collapseMainColumn, orientation: "horizontal", unmountOnExit: true, children: _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "nowrap", children: [isHit(record) && _jsx(EscalationChip, { hit: record, layout: HitLayout.DENSE, hideLabel: true }), _jsxs(Typography, { sx: { textWrap: 'nowrap', whiteSpace: 'nowrap', fontSize: 'inherit' }, children: [analyticIds[record.howler.analytic] ? (_jsx(Link, { to: `/analytics/${analyticIds[record.howler.analytic]}`, onClick: e => e.stopPropagation(), children: record.howler.analytic })) : (record.howler.analytic), record.howler.detection && ': ', record.howler.detection] }), isHit(record) && record.howler.assignment !== 'unassigned' && (_jsx(Assigned, { hit: record, layout: HitLayout.DENSE, hideLabel: true }))] }) })] }) }), columns.map(col => (_jsx(EnhancedCell, { record: record, className: `col-${col.replaceAll('.', '-')}`, value: get(record, col) ?? t('none'), sx: columnWidths[col] ? { width: columnWidths[col] } : { width: '220px', maxWidth: '300px' }, field: col }, col)))] }, record.howler.id), _jsx(TableRow, { onClick: ev => onClick(ev, record), children: _jsx(TableCell, { colSpan: columns.length + 2, style: { paddingBottom: 0, paddingTop: 0 }, children: _jsx(Collapse, { in: expandRow, unmountOnExit: true, children: _jsx(Box, { width: "100%", maxWidth: "1200px", margin: 1, children: isHit(record) ? (_jsx(HitCard, { id: record.howler.id, layout: HitLayout.NORMAL })) : (_jsx(EventCard, { id: record.howler.id, event: record })) }) }) }) })] }));
 };
-export default memo(HitRow);
+export default memo(RecordRow);

package/components/elements/hit/grid/{HitTable.d.ts → RecordTable.d.ts}

@@ -1,12 +1,13 @@
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
 import React, { type PropsWithChildren } from 'react';
-declare const HitTable: ({ query, items, refreshItems, ContextMenu, contextMenuProps, onItemClick }: {
+declare const RecordTable: ({ query, items, refreshItems, ContextMenu, contextMenuProps, onItemClick }: {
     query: string;
-    items?: WithMetadata<Hit>[];
+    items?: WithMetadata<Hit | Event>[];
     refreshItems?: (query: string, append?: boolean) => void;
     ContextMenu?: React.FC<PropsWithChildren<object>>;
     contextMenuProps?: object;
-    onItemClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, hit: Hit) => void;
+    onItemClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, record: Hit | Event) => void;
 }) => import("react/jsx-runtime").JSX.Element;
-export default HitTable;
+export default RecordTable;

package/components/elements/hit/grid/{HitTable.js → RecordTable.js}

@@ -9,8 +9,9 @@ import ColumnHeader from '@cccsaurora/howler-ui/components/elements/hit/grid/Col
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import HitRow from './HitRow';
-const HitTable = ({ query, items, refreshItems, ContextMenu, contextMenuProps, onItemClick }) => {
+import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
+import RecordRow from './RecordRow';
+const RecordTable = ({ query, items, refreshItems, ContextMenu, contextMenuProps, onItemClick }) => {
     const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
     const { getMatchingAnalytic } = useMatchers();
     const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
@@ -18,14 +19,15 @@ const HitTable = ({ query, items, refreshItems, ContextMenu, contextMenuProps, o
     const { columns, columnWidths, columnSources, setColumnWidth, setColumns, isReady } = useContext(GridColumnsContext);
     const resizingCol = useRef();
     useEffect(() => {
-        items?.forEach(hit => {
-            if (!analyticIds[hit.howler.analytic]) {
-                getMatchingAnalytic(hit).then(_analytic => {
-                    if (_analytic) {
-                        setAnalyticIds(_analyticIds => ({ ..._analyticIds, [hit.howler.analytic]: _analytic.analytic_id }));
-                    }
-                });
+        items?.forEach(record => {
+            if (!isHit(record) || analyticIds[record.howler.analytic]) {
+                return;
             }
+            getMatchingAnalytic(record).then(_analytic => {
+                if (_analytic) {
+                    setAnalyticIds(_analyticIds => ({ ..._analyticIds, [record.howler.analytic]: _analytic.analytic_id }));
+                }
+            });
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [analyticIds, items]);
@@ -73,10 +75,10 @@ const HitTable = ({ query, items, refreshItems, ContextMenu, contextMenuProps, o
             }
         }
     }, [columns, setColumns, isReady]);
-    const tableContent = (_jsxs(_Fragment, { children: [items?.map(hit => (_jsx(HitRow, { hit: hit, analyticIds: analyticIds, columns: columns, columnWidths: columnWidths, collapseMainColumn: collapseMainColumn, onClick: onItemClick ? onItemClick : (_ev, _hit) => null }, hit.howler.id))), refreshItems && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 2, children: _jsx(Stack, { alignItems: "center", justifyContent: "center", py: 0.5, px: 1, children: _jsx(IconButton, { onClick: () => refreshItems(query, true), children: _jsx(Search, {}) }) }) }) }))] }));
+    const tableContent = (_jsxs(_Fragment, { children: [items?.map(record => (_jsx(RecordRow, { record: record, analyticIds: analyticIds, columns: columns, columnWidths: columnWidths, collapseMainColumn: collapseMainColumn, onClick: onItemClick ? onItemClick : (_ev, _record) => null }, record.howler.id))), refreshItems && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 2, children: _jsx(Stack, { alignItems: "center", justifyContent: "center", py: 0.5, px: 1, children: _jsx(IconButton, { onClick: () => refreshItems(query, true), children: _jsx(Search, {}) }) }) }) }))] }));
     return (_jsxs(Table, { sx: { '& td,th': { px: 1, py: 0.25, whiteSpace: 'nowrap' } }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sx: {
                                 borderRight: 'thin solid',
                                 borderRightColor: 'divider'
                             }, children: _jsx(IconButton, { onClick: () => setCollapseMainColumn(!collapseMainColumn), children: collapseMainColumn ? (_jsx(FormatIndentIncrease, { fontSize: "small" })) : (_jsx(FormatIndentDecrease, { fontSize: "small" })) }) }), _jsx(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columns, children: columns.map(col => (_jsx(ColumnHeader, { col: col, width: columnWidths[col], colSource: columnSources[col], onMouseDown: onMouseDown, setColumns: isReady ? setColumns : () => null }, col))) }) }), _jsx(TableCell, { sx: { width: '100%' } })] }) }), ContextMenu ? (_jsx(ContextMenu, { ...contextMenuProps, children: tableContent })) : (_jsx(TableBody, { children: tableContent }))] }));
 };
-export default HitTable;
+export default RecordTable;

package/components/elements/hit/outlines/DefaultOutline.js

@@ -41,7 +41,7 @@ const DefaultOutline = ({ hit, fields, template, layout = HitLayout.NORMAL, read
                 if (!displayedData) {
                     return null;
                 }
-                return (_jsxs(React.Fragment, { children: [_jsx(Tooltip, { title: (config.indexes.hit[field]?.description ?? t('none')).split('\n')[0], children: _jsxs(Typography, { variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', fontWeight: "bold", children: [field, ":"] }) }), _jsx(PluginTypography, { context: "outline", variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', whiteSpace: "normal", sx: { width: '100%', wordBreak: 'break-all' }, value: displayedData, field: field, hit: hit, children: displayedData })] }, field));
+                return (_jsxs(React.Fragment, { children: [_jsx(Tooltip, { title: (config.indexes.hit[field]?.description ?? t('none')).split('\n')[0], children: _jsxs(Typography, { variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', fontWeight: "bold", children: [field, ":"] }) }), _jsx(PluginTypography, { context: "outline", variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', whiteSpace: "normal", sx: { width: '100%', wordBreak: 'break-all' }, value: displayedData, field: field, obj: hit, children: displayedData })] }, field));
             })] }));
 };
 export default memo(DefaultOutline);

package/components/elements/hit/related/RelatedRecords.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link as LinkIcon } from '@mui/icons-material';
+import { alpha, Box, Chip, Divider, Stack, useTheme } from '@mui/material';
+import CasePreview from '@cccsaurora/howler-ui/components/elements/case/CasePreview';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import EventPreview from '@cccsaurora/howler-ui/components/elements/event/EventPreview';
+import useRelatedRecords from '@cccsaurora/howler-ui/components/hooks/useRelatedRecords';
+import { identity, uniq } from 'lodash-es';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { isCase, isEvent, isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
+import HitPreview from '../HitPreview';
+const RecordLink = ({ to, ariaLabel, children }) => {
+    const theme = useTheme();
+    return (_jsxs(Box, { p: 1, flex: 1, position: "relative", sx: {
+            '& > a': {
+                backgroundColor: 'transparent',
+                transition: theme.transitions.create('background-color', {
+                    duration: theme.transitions.duration.shortest
+                }),
+                '&:hover': {
+                    backgroundColor: alpha('#555', 0.5)
+                }
+            }
+        }, children: [_jsx(Link, { to: to, style: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel }), children] }));
+};
+const RelatedRecords = ({ hit }) => {
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+    const [filter, setFilter] = useState(null);
+    const related = useMemo(() => hit?.howler.related ?? [], [hit?.howler.related]);
+    const records = useRelatedRecords(related, open);
+    return (_jsxs(ChipPopper
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    , { 
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
+        icon: _jsx(LinkIcon, {}), label: _jsx("span", { style: { cursor: 'pointer' }, children: t('hit.header.related', { count: related.length }) }), slotProps: {
+            chip: { disabled: related.length < 1 },
+            paper: {
+                elevation: 4,
+                onAuxClick: ev => ev.stopPropagation()
+            }
+        }, disablePortal: false, placement: "bottom-end", onToggle: _open => setOpen(_open), children: [_jsx(Stack, { direction: "row", spacing: 1, mb: 1, justifyContent: "end", children: uniq(records.map(record => record.__index))
+                    .filter(identity)
+                    .map(_type => (_jsx(Chip, { color: _type === filter ? 'primary' : 'default', label: _type, onClick: () => setFilter(current => (current === _type ? null : _type)) }, _type))) }), _jsxs(Stack, { maxWidth: "40vw", maxHeight: "70vh", sx: { overflowY: 'auto' }, children: [_jsx(Divider, {}), records
+                        .filter(record => !filter || record.__index === filter)
+                        .map(entry => {
+                        if (isHit(entry)) {
+                            const key = entry.howler.id;
+                            return (_jsx(RecordLink, { to: `/hits/${key}`, ariaLabel: t('hit.header.view.hit', { id: key }), children: _jsx(HitPreview, { hit: entry }) }, key));
+                        }
+                        else if (isCase(entry)) {
+                            const key = entry.case_id;
+                            return (_jsx(RecordLink, { to: `/cases/${key}`, ariaLabel: t('hit.header.view.case', { id: key }), children: _jsx(CasePreview, { case: entry }) }, key));
+                        }
+                        else if (isEvent(entry)) {
+                            const key = entry.howler.id;
+                            return (_jsx(RecordLink, { to: `/events/${key}`, ariaLabel: t('hit.header.view.event', { id: key }), children: _jsx(EventPreview, { event: entry }) }, key));
+                        }
+                    })] })] }));
+};
+export default memo(RelatedRecords);

package/components/elements/{hit/HitComments.d.ts → record/RecordComments.d.ts}

@@ -1,11 +1,12 @@
 import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import { type FC } from 'react';
-interface HitCommentsProps {
-    hit: Hit;
+interface RecordCommentsProps {
+    record: Hit | Event;
     users: {
         [id: string]: HowlerUser;
     };
 }
-declare const HitComments: FC<HitCommentsProps>;
-export default HitComments;
+declare const RecordComments: FC<RecordCommentsProps>;
+export default RecordComments;

package/components/elements/{hit/HitComments.js → record/RecordComments.js}

@@ -10,12 +10,13 @@ import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { compareTimestamp, sortByTimestamp } from '@cccsaurora/howler-ui/utils/utils';
 import Comment from '../Comment';
 import HowlerAvatar from '../display/HowlerAvatar';
 import TypingIndicator from '../display/TypingIndicator';
 const MAX_LENGTH = 5000;
-const HitComments = ({ hit, users }) => {
+const RecordComments = ({ record, users }) => {
     const { user } = useAppUser();
     const { t } = useTranslation();
     const navigate = useNavigate();
@@ -28,7 +29,7 @@ const HitComments = ({ hit, users }) => {
     const [length, setLength] = useState(0);
     const [analyticId, setAnalyticId] = useState();
     const [analyticComments, setAnalyticComments] = useState([]);
-    const [comments, setComments] = useState(sortByTimestamp(hit?.howler?.comment));
+    const [comments, setComments] = useState(sortByTimestamp(record?.howler?.comment));
     const input = useRef();
     /**
      * Set the list of typers based on updates from the websocket
@@ -50,20 +51,20 @@ const HitComments = ({ hit, users }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [handler]);
     useEffect(() => {
-        if (hit?.howler?.analytic) {
-            getMatchingAnalytic(hit).then(analytic => {
+        if (isHit(record) && record.howler.analytic) {
+            getMatchingAnalytic(record).then(analytic => {
                 setAnalyticId(analytic?.analytic_id);
                 setAnalyticComments(sortByTimestamp(analytic?.comment ?? []));
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getMatchingAnalytic, hit?.howler?.analytic]);
+    }, [getMatchingAnalytic, record]);
     const onSubmit = useCallback(async () => {
-        if (!input.current?.value || !hit || input.current.value.length > MAX_LENGTH)
+        if (!input.current?.value || !record || input.current.value.length > MAX_LENGTH)
             return;
         setLoading(true);
         try {
-            const result = await dispatchApi(api.hit.comments.post(hit.howler.id, input.current.value), {
+            const result = await dispatchApi(api.hit.comments.post(record.howler.id, input.current.value), {
                 showError: true,
                 throwError: true,
                 logError: false
@@ -75,23 +76,23 @@ const HitComments = ({ hit, users }) => {
         finally {
             setLoading(false);
         }
-    }, [dispatchApi, hit]);
+    }, [dispatchApi, record]);
     /**
      * Emit a typing event when textbox is focused
      */
     const onFocus = useCallback(() => emit({
         broadcast: true,
         action: 'typing',
-        id: hit?.howler?.id
-    }), [emit, hit?.howler?.id]);
+        id: record?.howler?.id
+    }), [emit, record?.howler?.id]);
     /**
      * Emit a stop typing event when textbox is blurred
      */
     const onBlur = useCallback(() => emit({
         broadcast: true,
         action: 'stop_typing',
-        id: hit?.howler?.id
-    }), [emit, hit?.howler?.id]);
+        id: record?.howler?.id
+    }), [emit, record?.howler?.id]);
     const onClear = useCallback(() => {
         input.current.value = '';
         setShowClear(false);
@@ -108,16 +109,16 @@ const HitComments = ({ hit, users }) => {
     }, [loading, onSubmit]);
     const checkLength = useCallback(() => setLength(input.current?.value.length), []);
     const handleDelete = useCallback(async (commentId) => {
-        await dispatchApi(api.hit.comments.del(hit.howler.id, [commentId]), { throwError: true, showError: true });
+        await dispatchApi(api.hit.comments.del(record.howler.id, [commentId]), { throwError: true, showError: true });
         setComments(comments.filter(cmt => cmt.id !== commentId));
-    }, [comments, dispatchApi, hit?.howler?.id]);
+    }, [comments, dispatchApi, record?.howler?.id]);
     const handleEdit = useCallback(async (commentId, editValue) => {
-        await dispatchApi(api.hit.comments.put(hit.howler.id, commentId, editValue), {
+        await dispatchApi(api.hit.comments.put(record.howler.id, commentId, editValue), {
             throwError: true,
             showError: true
         });
         setComments(comments.map(cmt => (cmt.id !== commentId ? cmt : { ...cmt, value: editValue })));
-    }, [comments, dispatchApi, hit?.howler?.id]);
+    }, [comments, dispatchApi, record?.howler?.id]);
     const handleQuote = useCallback((value) => {
         if (input.current) {
             // We use trimStart here so there isn't a bunch of newlines at the beginning of the comment
@@ -135,27 +136,27 @@ const HitComments = ({ hit, users }) => {
     }, []);
     const handleReact = useCallback(async (commentId, type) => {
         if (type) {
-            await dispatchApi(api.hit.comments.react.put(hit.howler.id, commentId, type));
+            await dispatchApi(api.hit.comments.react.put(record.howler.id, commentId, type));
             setComments(comments.map(cmt => cmt.id !== commentId ? cmt : { ...cmt, reactions: { ...(cmt?.reactions ?? {}), [user.username]: type } }));
         }
         else {
-            await dispatchApi(api.hit.comments.react.del(hit.howler.id, commentId));
+            await dispatchApi(api.hit.comments.react.del(record.howler.id, commentId));
             setComments(comments.map(cmt => cmt.id !== commentId
                 ? cmt
                 : { ...cmt, reactions: { ...(cmt?.reactions ?? {}), [user.username]: undefined } }));
         }
-    }, [comments, dispatchApi, hit?.howler.id, user.username]);
+    }, [comments, dispatchApi, record?.howler.id, user.username]);
     /**
      * Handle loading the comments when the hit changes
      */
     useEffect(() => {
-        if (hit?.howler?.comment) {
-            setComments(hit?.howler?.comment.slice().sort((a, b) => compareTimestamp(b.timestamp, a.timestamp)));
+        if (record?.howler?.comment) {
+            setComments(record?.howler?.comment.slice().sort((a, b) => compareTimestamp(b.timestamp, a.timestamp)));
         }
-        else if (!hit) {
+        else if (!record) {
             setComments([]);
         }
-    }, [hit]);
+    }, [record]);
     /**
      * This is the comments for the analytic associated with the hit. We show this at the start of the comment
      * list, as if they've been pinned
@@ -164,13 +165,13 @@ const HitComments = ({ hit, users }) => {
         if (analyticComments.length < 1) {
             return null;
         }
-        const displayedComments = analyticComments.filter(c => !c.detection || c.detection === hit?.howler.detection);
+        const displayedComments = analyticComments.filter(c => !c.detection || c.detection === record?.howler.detection);
         return (_jsxs(Accordion, { variant: "outlined", children: [_jsx(AccordionSummary, { expandIcon: _jsx(KeyboardArrowDown, { fontSize: "small" }), children: _jsx(Typography, { variant: "body1", children: t('comments.analytic', { count: displayedComments.length }) }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 1, children: displayedComments.map(c => (_jsx(Comment, { comment: c, extra: _jsx(Chip, { size: "small", variant: "outlined", onClick: () => navigate('/analytics' +
                                     (analyticId
                                         ? `/${analyticId}?tab=comments` + (c.detection ? `&filter=${c.detection}` : '')
-                                        : '')), sx: theme => ({ marginLeft: '0 !important', mr: `${theme.spacing(2)} !important` }), label: `${hit?.howler?.analytic ?? 'Analytic'}${c.detection ? ' - ' + c.detection : ''}` }), users: users }, c.id))) }) })] }));
-    }, [analyticComments, analyticId, hit?.howler.analytic, hit?.howler.detection, navigate, t, users]);
+                                        : '')), sx: theme => ({ marginLeft: '0 !important', mr: `${theme.spacing(2)} !important` }), label: `${record?.howler?.analytic ?? 'Analytic'}${c.detection ? ' - ' + c.detection : ''}` }), users: users }, c.id))) }) })] }));
+    }, [analyticComments, analyticId, record?.howler.analytic, record?.howler.detection, navigate, t, users]);
     const renderedComments = useMemo(() => comments.map(c => (_jsx(Comment, { comment: c, users: users, handleDelete: () => handleDelete(c.id), handleEdit: value => handleEdit(c.id, value), handleReact: type => handleReact(c.id, type), handleQuote: () => handleQuote(c.value) }, c.id))), [comments, handleDelete, handleEdit, handleQuote, handleReact, users]);
-    return (_jsxs(Stack, { sx: { py: 1, pr: 1 }, spacing: 1, children: [hit && renderedAnalyticComments, _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HowlerAvatar, { userId: user.username }), _jsx(TextField, { inputProps: { sx: theme => ({ fontSize: theme.typography.body2.fontSize }) }, InputLabelProps: { shrink: false }, placeholder: t('comments.add'), onKeyDown: checkForSubmit, onChangeCapture: checkLength, inputRef: input, onFocus: onFocus, onBlur: onBlur, error: length > MAX_LENGTH, fullWidth: true, multiline: true })] }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [typers.length > 0 && (_jsxs(_Fragment, { children: [_jsx(AvatarGroup, { componentsProps: { additionalAvatar: { sx: { height: 24, width: 24, fontSize: '12px' } } }, children: typers.map(typer => (_jsx(HowlerAvatar, { userId: typer, sx: { height: 24, width: 24 } }, typer))) }), _jsx(TypingIndicator, {})] })), _jsx(FlexOne, {}), length > 0.9 * MAX_LENGTH && (_jsxs(Typography, { variant: "caption", sx: [{ opacity: 0.7, mr: 1 }, length > MAX_LENGTH && { color: 'error.main' }], children: [length, "/", MAX_LENGTH] })), showClear && (_jsx(IconButton, { size: "small", onClick: onClear, disabled: loading, children: _jsx(Clear, { fontSize: "small" }) })), _jsx(IconButton, { size: "small", onClick: onSubmit, disabled: loading || length > MAX_LENGTH, children: _jsx(Send, { fontSize: "small" }) })] }), hit ? (renderedComments) : (_jsxs(_Fragment, { children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 100, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] })] }))] }));
+    return (_jsxs(Stack, { sx: { py: 1, pr: 1 }, spacing: 1, children: [record && renderedAnalyticComments, _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HowlerAvatar, { userId: user.username }), _jsx(TextField, { inputProps: { sx: theme => ({ fontSize: theme.typography.body2.fontSize }) }, InputLabelProps: { shrink: false }, placeholder: t('comments.add'), onKeyDown: checkForSubmit, onChangeCapture: checkLength, inputRef: input, onFocus: onFocus, onBlur: onBlur, error: length > MAX_LENGTH, fullWidth: true, multiline: true })] }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [typers.length > 0 && (_jsxs(_Fragment, { children: [_jsx(AvatarGroup, { componentsProps: { additionalAvatar: { sx: { height: 24, width: 24, fontSize: '12px' } } }, children: typers.map(typer => (_jsx(HowlerAvatar, { userId: typer, sx: { height: 24, width: 24 } }, typer))) }), _jsx(TypingIndicator, {})] })), _jsx(FlexOne, {}), length > 0.9 * MAX_LENGTH && (_jsxs(Typography, { variant: "caption", sx: [{ opacity: 0.7, mr: 1 }, length > MAX_LENGTH && { color: 'error.main' }], children: [length, "/", MAX_LENGTH] })), showClear && (_jsx(IconButton, { size: "small", onClick: onClear, disabled: loading, children: _jsx(Clear, { fontSize: "small" }) })), _jsx(IconButton, { size: "small", onClick: onSubmit, disabled: loading || length > MAX_LENGTH, children: _jsx(Send, { fontSize: "small" }) })] }), record ? (renderedComments) : (_jsxs(_Fragment, { children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 100, variant: "rounded" })] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Skeleton, { width: 40, height: 40, variant: "circular" }), _jsx(Skeleton, { width: "100%", height: 80, variant: "rounded" })] })] }))] }));
 };
-export default HitComments;
+export default RecordComments;

package/components/elements/{hit/HitContextMenu.d.ts → record/RecordContextMenu.d.ts}

@@ -3,7 +3,7 @@ import React from 'react';
 /**
  * Props for the HitContextMenu component
  */
-interface HitContextMenuProps {
+interface RecordContextMenuProps {
     /**
      * Function to extract the hit ID from a mouse event
      */
@@ -18,5 +18,5 @@ interface HitContextMenuProps {
  * Provides quick access to common hit actions including assessment, voting,
  * transitions, and exclusion filters based on template fields.
  */
-declare const HitContextMenu: FC<PropsWithChildren<HitContextMenuProps>>;
-export default HitContextMenu;
+declare const RecordContextMenu: FC<PropsWithChildren<RecordContextMenuProps>>;
+export default RecordContextMenu;