@cccsaurora/howler-ui 2.19.0-dev.999 → 2.19.0

package/components/elements/hit/HitSummary.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Analytics, InfoOutlined } from '@mui/icons-material';
 import { Alert, AlertTitle, Autocomplete, Box, Button, Chip, CircularProgress, Divider, Fade, Grid, LinearProgress, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 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 { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
@@ -14,6 +14,7 @@ import { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { getTimeRange } from '@cccsaurora/howler-ui/utils/utils';
 import PluginChip from '../PluginChip';
 import HitGraph from './aggregate/HitGraph';
@@ -25,9 +26,9 @@ const HitSummary = ({ response, onStart, onComplete }) => {
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const [showHitSummaryGraph] = useMyLocalStorageItem(StorageKey.SHOW_HIT_SUMMARY_GRAPH, true);
     const { getMatchingTemplate } = useMatchers();
-    const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
-    const error = useContextSelector(HitSearchContext, ctx => ctx.error);
-    const getFilters = useContextSelector(HitSearchContext, ctx => ctx.getFilters);
+    const searching = useContextSelector(RecordSearchContext, ctx => ctx.searching);
+    const error = useContextSelector(RecordSearchContext, ctx => ctx.error);
+    const getFilters = useContextSelector(RecordSearchContext, ctx => ctx.getFilters);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const views = useContextSelector(ParameterContext, ctx => ctx.views);
@@ -41,7 +42,7 @@ const HitSummary = ({ response, onStart, onComplete }) => {
         }
         try {
             // Get a list of every key in every template of the hits we're searching
-            const rawCounts = await Promise.all((response?.items ?? []).map(async (h) => {
+            const rawCounts = await Promise.all((response?.items ?? []).filter(isHit).map(async (h) => {
                 const matchingTemplate = await getMatchingTemplate(h);
                 return (matchingTemplate?.keys ?? [])
                     .filter(key => !['howler.id', 'howler.hash'].includes(key))
@@ -128,7 +129,7 @@ const HitSummary = ({ response, onStart, onComplete }) => {
         if ((!query && views?.length < 1) || searching || error) {
             return;
         }
-        performAggregation();
+        void performAggregation();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [query, views, searching, error]);
     return (_jsxs(Stack, { sx: { mx: 2, height: '100%' }, spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('hit.summary.aggregate.title') }), _jsx(Divider, { flexItem: true }), showHitSummaryGraph && (_jsxs(_Fragment, { children: [_jsx(HitGraph, {}), _jsx(Divider, { flexItem: true })] })), _jsxs(Stack, { sx: { overflow: 'auto', marginTop: '0 !important' }, pt: 1, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(Autocomplete, { fullWidth: true, multiple: true, sx: { minWidth: '175px' }, size: "small", value: customKeys, options: hitFields.map(_field => _field.key), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.summary.adhoc') }), onChange: (_, value) => setCustomKeys(value) }), _jsx(Button, { variant: "outlined", startIcon: loading ? _jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : _jsx(Analytics, { sx: { ml: 1 } }), disabled: loading, onClick: () => performAggregation(), children: t('button.aggregate') })] }), isEmpty(aggregateResults) && (_jsxs(Alert, { severity: "info", variant: "outlined", children: [_jsx(AlertTitle, { children: t('hit.summary.aggregate.nokeys.title') }), t('hit.summary.aggregate.nokeys.description')] })), loading && _jsx(LinearProgress, { sx: { minHeight: '4px' } }), Object.keys(aggregateResults)

package/components/elements/hit/NotebookTooltip.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const NotebookTooltip: FC;
+export default NotebookTooltip;

package/components/elements/hit/NotebookTooltip.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+const NotebookTooltip = () => {
+    const { t } = useTranslation();
+    return (_jsxs(Box, { sx: { maxWidth: 300 }, children: [_jsx(Typography, { variant: "subtitle2", children: t('notebook.title') }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('notebook.opens.panel') })] }));
+};
+export default NotebookTooltip;

package/components/elements/hit/PivotTooltip.d.ts

@@ -0,0 +1,7 @@
+import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
+import type { FC } from 'react';
+declare const PivotTooltip: FC<{
+    dossier: Dossier;
+    resolvedUrl: string;
+}>;
+export default PivotTooltip;

package/components/elements/hit/PivotTooltip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Link, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+const PivotTooltip = ({ dossier, resolvedUrl }) => {
+    const dossierUrl = `/dossiers/${dossier.dossier_id}/edit?tab=leads&query=${encodeURIComponent(dossier.query)}`;
+    const { t } = useTranslation();
+    return (_jsxs(Box, { sx: { maxWidth: 300 }, children: [_jsx(Typography, { variant: "subtitle2", children: dossier.title }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: dossier.owner }), _jsx(Typography, { variant: "body2", sx: { mt: 2 }, children: dossier.leads?.[0]?.content?.slice(0, 120) ?? t('pivot.description.none') }), _jsxs(Box, { sx: { mt: 2, wordBreak: 'break-all' }, children: [_jsx(Typography, { variant: "caption", display: "block", children: t('pivot.url') }), _jsx(Link, { href: resolvedUrl, target: "_blank", rel: "noopener noreferrer", underline: "hover", children: resolvedUrl })] }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Link, { href: dossierUrl, target: "_blank", rel: "noopener noreferrer", underline: "hover", children: t('pivot.dossier.open') }) })] }));
+};
+export default PivotTooltip;

package/components/elements/hit/RelatedLinkTooltip.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+declare const RelatedLinkTooltip: FC<{
+    title: string;
+    href: string;
+}>;
+export default RelatedLinkTooltip;

package/components/elements/hit/RelatedLinkTooltip.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Link, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+const RelatedLinkTooltip = ({ title, href }) => {
+    const { t } = useTranslation();
+    return (_jsxs(Box, { sx: { maxWidth: 300 }, children: [_jsx(Typography, { variant: "subtitle2", children: title }), _jsx(Box, { sx: { mt: 1, wordBreak: 'break-all' }, children: _jsx(Link, { href: href, target: "_blank", rel: "noopener noreferrer", underline: "hover", children: href }) }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Link, { href: href, target: "_blank", rel: "noopener noreferrer", underline: "hover", children: t('hit.header.link') }) })] }));
+};
+export default RelatedLinkTooltip;

package/components/elements/hit/ResolvePivotUrl.d.ts

@@ -0,0 +1,4 @@
+import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+declare const resolvePivotUrl: (pivot: NonNullable<Dossier['pivots']>[number], currentHit?: Hit) => string;
+export default resolvePivotUrl;

package/components/elements/hit/ResolvePivotUrl.js

@@ -0,0 +1,22 @@
+import Handlebars from 'handlebars';
+import { flattenDeep } from '@cccsaurora/howler-ui/utils/utils';
+const resolvePivotUrl = (pivot, currentHit) => {
+    const flatHit = flattenDeep(currentHit ?? {});
+    const templateObject = Object.fromEntries((pivot.mappings ?? []).map(mapping => {
+        const value = mapping.field === 'custom'
+            ? mapping.custom_value
+            : Array.isArray(flatHit[mapping.field])
+                ? flatHit[mapping.field][0]
+                : flatHit[mapping.field];
+        return [mapping.key, value];
+    }));
+    try {
+        return Handlebars.compile(pivot.value)(templateObject);
+    }
+    catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(`Failed to compile pivot template for value "${pivot.value}":`, e);
+        return pivot.value;
+    }
+};
+export default resolvePivotUrl;

package/components/elements/hit/actions/ButtonActions.js

@@ -91,9 +91,7 @@ const ButtonActions = ({ actions, loading, orientation, shortcuts, currentVote }
                                 gridRow: rowIndex + 2
                             }
                             : { gridColumn: rowIndex + 1, gridRow: index + 3 + actionRows[0].length };
-                        const button = (
-                        // Set tooltip placement to be uniform for all buttons
-                        _jsx(Tooltip, { title: t(`hit.details.asessments.${action.name}.description`), placement: "top", children: _jsx(Button, { variant: "outlined", size: "small", disabled: loading, onClick: action.actionFunction, sx: [
+                        const button = (_jsx(Tooltip, { title: t(`hit.details.asessments.${action.name}.description`), placement: "top", children: _jsx(Button, { variant: "outlined", size: "small", disabled: loading, onClick: action.actionFunction, sx: [
                                     {
                                         width: '100%',
                                         p: 0.6

package/components/elements/hit/aggregate/HitGraph.js

@@ -4,9 +4,9 @@ import { Alert, AlertTitle, Autocomplete, Box, Button, CircularProgress, IconBut
 import api from '@cccsaurora/howler-ui/api';
 import 'chartjs-adapter-dayjs-4';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMyChart from '@cccsaurora/howler-ui/components/hooks/useMyChart';
 import dayjs from 'dayjs';
@@ -38,12 +38,12 @@ const HitGraph = () => {
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const span = useContextSelector(ParameterContext, ctx => ctx.span);
     const views = useContextSelector(ParameterContext, ctx => ctx.views);
-    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
-    const addHitToSelection = useContextSelector(HitContext, ctx => ctx.addHitToSelection);
-    const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
-    const error = useContextSelector(HitSearchContext, ctx => ctx.error);
-    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
-    const getFilters = useContextSelector(HitSearchContext, ctx => ctx.getFilters);
+    const selectedHits = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
+    const addHitToSelection = useContextSelector(RecordContext, ctx => ctx.addRecordToSelection);
+    const removeHitFromSelection = useContextSelector(RecordContext, ctx => ctx.removeRecordFromSelection);
+    const error = useContextSelector(RecordSearchContext, ctx => ctx.error);
+    const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
+    const getFilters = useContextSelector(RecordSearchContext, ctx => ctx.getFilters);
     const chartRef = useRef();
     const [loading, setLoading] = useState(false);
     const [filterField, setFilterField] = useState(FILTER_FIELDS[0]);
@@ -112,7 +112,7 @@ const HitGraph = () => {
         if ((!query && views?.length < 1) || error || !response) {
             return;
         }
-        performQuery();
+        void performQuery();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [query, views, error, span, response, escalationFilter, filterField]);
     const options = useMemo(() => {

package/components/elements/hit/elements/AnalyticLink.d.ts

@@ -0,0 +1,9 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { type FC } from 'react';
+declare const AnalyticLink: FC<{
+    hit: Hit;
+    lazy?: boolean;
+    compressed?: boolean;
+    alignSelf?: string;
+}>;
+export default AnalyticLink;

package/components/elements/hit/elements/AnalyticLink.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+const AnalyticLink = ({ hit, lazy = false, compressed, alignSelf = 'start' }) => {
+    const { getMatchingAnalytic } = useMatchers(lazy);
+    const [analyticId, setAnalyticId] = useState();
+    useEffect(() => {
+        if (!hit?.howler.analytic) {
+            return;
+        }
+        void getMatchingAnalytic(hit).then(analytic => setAnalyticId(analytic?.analytic_id));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hit?.howler.analytic]);
+    return (_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf, '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, target: "_blank", rel: "noopener noreferrer", onAuxClick: e => {
+                    e.stopPropagation();
+                }, onClick: e => {
+                    e.stopPropagation();
+                }, children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }));
+};
+export default AnalyticLink;

package/components/elements/hit/elements/{HitUsers.d.ts → Assigned.d.ts}

@@ -1,12 +1,10 @@
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { FC } from 'react';
 import { HitLayout } from '../HitLayout';
-type AssignedProps = FC<{
+declare const Assigned: FC<{
     hit: Hit;
     layout: HitLayout;
     hideLabel?: boolean;
     showAssigned?: boolean;
-    showAssessor?: boolean;
 }>;
-declare const HitUsers: AssignedProps;
-export default HitUsers;
+export default Assigned;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { avatarClasses, AvatarGroup, Chip, Divider, Stack } from '@mui/material';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import { uniq } from 'lodash-es';
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { HitLayout } from '../HitLayout';
+const AvatarChip = ({ userId, noUser, placeholder, layout, hideLabel }) => {
+    const userAvatar = (_jsx(HowlerAvatar, { userId: userId, sx: { height: layout !== HitLayout.COMFY ? 24 : 32, width: layout !== HitLayout.COMFY ? 24 : 32 } }));
+    return hideLabel ? (userAvatar) : (_jsx(Chip, { variant: "outlined", sx: {
+            width: 'fit-content',
+            '& .MuiChip-icon': {
+                marginLeft: 0
+            }
+        }, icon: userAvatar, label: userId && userId !== noUser ? userId : placeholder, size: layout !== HitLayout.COMFY ? 'small' : 'medium' }));
+};
+const Assigned = ({ hit, layout, hideLabel = false, showAssigned = false }) => {
+    const { t } = useTranslation();
+    const { user } = useAppUser();
+    const { viewers } = useContext(SocketContext);
+    const hitViewers = uniq(viewers[hit?.howler?.id] ?? []).filter(viewer => viewer !== user.username);
+    const assigneeVisible = showAssigned || hit.howler.assignment !== 'unassigned';
+    return (_jsxs(Stack, { direction: "row", spacing: 0.5, children: [assigneeVisible && (_jsx(AvatarChip, { userId: hit?.howler.assignment, noUser: "unassigned", placeholder: t('app.drawer.hit.assignment.unassigned.name'), layout: layout, hideLabel: hideLabel })), hitViewers.length > 0 && hideLabel && _jsx(Divider, { orientation: "vertical", flexItem: true, variant: "middle" }), _jsx(AvatarGroup, { max: 3, sx: { [`.${avatarClasses.root}`]: { border: 0, marginLeft: 0.5 } }, componentsProps: {
+                    additionalAvatar: {
+                        sx: {
+                            height: layout !== HitLayout.COMFY ? 24 : 32,
+                            width: layout !== HitLayout.COMFY ? 24 : 32,
+                            fontSize: '12px'
+                        }
+                    }
+                }, children: hitViewers.map(viewer => (_jsx(HowlerAvatar, { userId: viewer, sx: { height: layout !== HitLayout.COMFY ? 24 : 32, width: layout !== HitLayout.COMFY ? 24 : 32 } }, viewer))) })] }));
+};
+export default Assigned;

package/components/elements/hit/elements/Assigned.test.d.ts

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

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/{routes/hits/search → 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()));
+        void (async () => {
+            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/{routes/hits/search → elements/hit}/grid/ColumnHeader.d.ts

@@ -1,7 +1,8 @@
 import { type FC, type SetStateAction } from 'react';
 declare const ColumnHeader: FC<{
-    width: string;
+    width: number;
     col: string;
+    colSource?: string[];
     setColumns: (val: SetStateAction<string[]>) => void;
     onMouseDown: (col: string, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }>;

package/components/{routes/hits/search → elements/hit}/grid/ColumnHeader.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { DragIndicator, Remove } from '@mui/icons-material';
+import { DragIndicator, JoinFull, Remove } from '@mui/icons-material';
 import { Box, IconButton, Stack, TableCell, Tooltip, useTheme } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import { useContext } from 'react';
-const ColumnHeader = ({ col, width, setColumns, onMouseDown }) => {
+const ColumnHeader = ({ col, width, colSource, setColumns, onMouseDown }) => {
     const theme = useTheme();
     const { config } = useContext(ApiConfigContext);
     const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: col });
@@ -15,7 +15,7 @@ const ColumnHeader = ({ col, width, setColumns, onMouseDown }) => {
             borderRightColor: 'divider',
             py: 0.5,
             position: 'relative'
-        }, style: { transform: CSS.Translate.toString(transform), transition }, children: _jsxs(Stack, { className: `col-${col.replaceAll('.', '-')}`, direction: "row", spacing: 1, alignItems: "center", sx: [{ minWidth: '220px' }, !!width ? { width, maxWidth: width } : { maxWidth: '300px' }], children: [_jsx(Tooltip, { title: config.indexes.hit[col].description, children: _jsx("span", { children: col }) }), _jsx(FlexOne, {}), _jsx(IconButton, { size: "small", sx: { fontSize: '1rem' }, onClick: () => setColumns(_columns => _columns.filter(_col => _col !== col)), children: _jsx(Remove, { fontSize: "inherit" }) }), _jsx(DragIndicator, { fontSize: "small", sx: { cursor: 'grab' }, ...attributes, ...listeners }), _jsx(Box, { sx: {
+        }, style: { transform: CSS.Translate.toString(transform), transition }, children: _jsxs(Stack, { className: `col-${col.replaceAll('.', '-')}`, direction: "row", spacing: 1, alignItems: "center", sx: [{ minWidth: '220px' }, width ? { width, maxWidth: width } : { maxWidth: '300px' }], children: [_jsx(Tooltip, { title: config.indexes.hit[col].description, children: _jsx("span", { children: col }) }), colSource?.length > 1 && (_jsx(Tooltip, { title: colSource.join(', '), children: _jsx(JoinFull, { fontSize: "small" }) })), _jsx(FlexOne, {}), _jsx(IconButton, { size: "small", sx: { fontSize: '1rem' }, onClick: () => setColumns(_columns => _columns.filter(_col => _col !== col)), children: _jsx(Remove, { fontSize: "inherit" }) }), _jsx(DragIndicator, { fontSize: "small", sx: { cursor: 'grab' }, ...attributes, ...listeners }), _jsx(Box, { sx: {
                         position: 'absolute',
                         top: theme.spacing(0.75),
                         bottom: theme.spacing(0.75),

package/components/{routes/hits/search → 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/{routes/hits/search → 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/{routes/hits/search/grid/HitRow.d.ts → elements/hit/grid/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, 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/{routes/hits/search/grid/HitRow.js → elements/hit/grid/RecordRow.js}

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } 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/RecordTable.d.ts

@@ -0,0 +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 RecordTable: ({ query, items, refreshItems, ContextMenu, contextMenuProps, onItemClick }: {
+    query: string;
+    items?: WithMetadata<Hit | Event>[];
+    refreshItems?: (query: string, append?: boolean) => void;
+    ContextMenu?: React.FC<PropsWithChildren<object>>;
+    contextMenuProps?: object;
+    onItemClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, record: Hit | Event) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default RecordTable;