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

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

@@ -0,0 +1,84 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, pointerWithin, useSensor, useSensors } from '@dnd-kit/core';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { FormatIndentDecrease, FormatIndentIncrease, Search } from '@mui/icons-material';
+import { IconButton, Stack, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { GridColumnsContext } from '@cccsaurora/howler-ui/components/app/providers/GridColumnsProvider';
+import ColumnHeader from '@cccsaurora/howler-ui/components/elements/hit/grid/ColumnHeader';
+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 { 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);
+    const [analyticIds, setAnalyticIds] = useState({});
+    const { columns, columnWidths, columnSources, setColumnWidth, setColumns, isReady } = useContext(GridColumnsContext);
+    const resizingCol = useRef();
+    useEffect(() => {
+        items?.forEach(record => {
+            if (!isHit(record) || analyticIds[record.howler.analytic]) {
+                return;
+            }
+            void 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]);
+    const onMouseMove = useCallback((event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const { col, width } = resizingCol.current;
+        const newWidth = width + event.movementX;
+        document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
+            el.style.maxWidth = newWidth + 'px';
+            el.style.width = newWidth + 'px';
+        });
+        resizingCol.current.width = newWidth;
+    }, []);
+    const onMouseUp = useCallback(() => {
+        const { col, width, element } = resizingCol.current;
+        if (isReady) {
+            setColumnWidth(col, Math.round(width));
+        }
+        element.style.width = null;
+        element.style.maxWidth = null;
+        document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
+            el.style.maxWidth = null;
+            el.style.width = null;
+        });
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    }, [onMouseMove, setColumnWidth, isReady]);
+    const onMouseDown = useCallback((col, event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const element = event.target.parentElement;
+        const rect = element.getBoundingClientRect();
+        resizingCol.current = { col, width: rect.width, element };
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    }, [onMouseMove, onMouseUp]);
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        if (over && active.id !== over.id) {
+            const oldIndex = (columns ?? []).findIndex(entry => entry === active.id);
+            const newIndex = (columns ?? []).findIndex(entry => entry === over.id);
+            if (isReady) {
+                setColumns(arrayMove(columns, oldIndex, newIndex));
+            }
+        }
+    }, [columns, setColumns, isReady]);
+    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 RecordTable;

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

@@ -32,16 +32,14 @@ const DefaultOutline = ({ hit, fields, template, layout = HitLayout.NORMAL, read
     return (_jsxs(Box, { display: "grid", gridTemplateColumns: "auto 1fr", columnGap: 1, sx: { position: 'relative' }, children: [_jsx(IconButton, { size: "small", sx: { position: 'absolute', right: 0, top: 0 }, onClick: handleOpen, children: readonly ? ( // Built in template
                 _jsx(Tooltip, { title: t('route.templates.builtin'), children: _jsx(Lock, { fontSize: "small" }) })) : !template ? ( // No type specified => using the default
                 _jsx(Tooltip, { title: t('route.templates.default'), children: _jsx(Info, { fontSize: "small" }) })) : template.type === 'global' ? ( // Type is global => global template
-                _jsx(Tooltip, { title: t('route.templates.global'), children: _jsx(Language, { fontSize: "small" }) })) : (
-                // Finally, type isn't global => personal template
-                _jsx(Tooltip, { title: t('route.templates.personal'), children: _jsx(Person, { fontSize: "small" }) })) }), (fields ?? [])
+                _jsx(Tooltip, { title: t('route.templates.global'), children: _jsx(Language, { fontSize: "small" }) })) : (_jsx(Tooltip, { title: t('route.templates.personal'), children: _jsx(Person, { fontSize: "small" }) })) }), (fields ?? [])
                 .map(field => [field, get(hit, field)])
                 .map(([field, data]) => {
                 const displayedData = (Array.isArray(data) ? data.join(', ') : isObject(data) ? JSON.stringify(data) : data)?.toString();
                 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/PivotLink.d.ts

@@ -1,3 +1,4 @@
+import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { Pivot } from '@cccsaurora/howler-ui/models/entities/generated/Pivot';
 import { type FC } from 'react';
@@ -5,6 +6,8 @@ export interface PivotLinkProps {
     pivot: Pivot;
     hit: Hit;
     compact?: boolean;
+    dossier: Dossier;
+    resolvedUrl: string;
 }
 declare const PivotLink: FC<PivotLinkProps>;
 export default PivotLink;

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

@@ -1,8 +1,9 @@
-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 { ErrorOutline } from '@mui/icons-material';
 import { Tooltip } from '@mui/material';
 import { useHelpers } from '@cccsaurora/howler-ui/components/elements/display/handlebars/helpers';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
+import PivotTooltip from '@cccsaurora/howler-ui/components/elements/hit/PivotTooltip';
 import Handlebars from 'handlebars';
 import { isEmpty } from 'lodash-es';
 import React, { useMemo } from 'react';
@@ -10,7 +11,7 @@ import { useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
 import { flattenDeep } from '@cccsaurora/howler-ui/utils/utils';
 import RelatedLink from './RelatedLink';
-const PivotLink = ({ pivot, hit, compact = false }) => {
+const PivotLink = ({ pivot, hit, compact = false, dossier, resolvedUrl }) => {
     const { i18n } = useTranslation();
     const helpers = useHelpers({ async: false, components: false });
     const pluginStore = usePluginStore();
@@ -47,11 +48,13 @@ const PivotLink = ({ pivot, hit, compact = false }) => {
             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;
         }
     }, [flatHit, pivot, handlebars, helpers]);
     if (href) {
-        return (_jsx(RelatedLink, { title: pivot.label[i18n.language], href: href, compact: compact, icon: pivot.icon, target: "_blank", rel: "noopener noreferrer" }));
+        return (_jsx(RelatedLink, { title: pivot.label[i18n.language], href: href, compact: compact, icon: pivot.icon, target: "_blank", rel: "noopener noreferrer", tooltip: _jsx(PivotTooltip, { dossier: dossier, resolvedUrl: resolvedUrl }) }));
     }
     // Hide a relatively useless console error, we'll show a UI component instead
     // eslint-disable-next-line no-console

package/components/elements/hit/related/RelatedLink.d.ts

@@ -6,5 +6,6 @@ declare const RelatedLink: React.FC<PropsWithChildren<{
     compact?: boolean;
     target?: string;
     rel?: string;
+    tooltip?: React.ReactNode;
 }>>;
 export default RelatedLink;

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

@@ -1,22 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack, Typography } from '@mui/material';
+import { Stack, Tooltip, Typography } from '@mui/material';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
+import RelatedLinkTooltip from '@cccsaurora/howler-ui/components/elements/hit/RelatedLinkTooltip';
 import React, {} from 'react';
 import { Link } from 'react-router-dom';
 import RelatedIcon from './RelatedIcon';
-const RelatedLink = ({ icon, title, href, target, rel, compact = false, children }) => {
-    return (_jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: () => window.open(href, target), sx: [
-            theme => ({
-                cursor: 'pointer',
-                backgroundColor: 'transparent',
-                transition: theme.transitions.create(['border-color']),
-                '&:hover': { borderColor: 'primary.main', '& a': { textDecoration: 'underline' } },
-                '& > div': {
-                    height: '100%'
-                },
-                '& a': { textDecoration: 'none', color: 'text.primary' }
-            }),
-            !compact && { border: 'thin solid', borderColor: 'transparent' }
-        ], children: _jsxs(Stack, { direction: "row", p: compact ? 0.5 : 1, spacing: 1, alignItems: "center", children: [children || _jsx(RelatedIcon, { icon: icon, title: title, href: href, compact: compact }), _jsx(Typography, { component: Link, to: href, target: target, rel: rel, onClick: e => e.stopPropagation(), children: title ?? href })] }) }, href));
+const RelatedLink = ({ icon, title, href, target, rel, compact = false, tooltip, children }) => {
+    const safeTitle = title ?? href ?? '';
+    const tooltipContent = tooltip ?? _jsx(RelatedLinkTooltip, { title: safeTitle, href: href ?? '' });
+    return (_jsx(Tooltip, { title: tooltipContent, children: _jsx("div", { style: { display: 'flex' }, children: _jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: () => href && window.open(href, target), sx: [
+                    theme => ({
+                        cursor: 'pointer',
+                        backgroundColor: 'transparent',
+                        transition: theme.transitions.create(['border-color']),
+                        '&:hover': { borderColor: 'primary.main', '& a': { textDecoration: 'underline' } },
+                        '& > div': {
+                            height: '100%'
+                        },
+                        '& a': { textDecoration: 'none', color: 'text.primary' }
+                    }),
+                    !compact && { border: 'thin solid', borderColor: 'transparent' }
+                ], children: _jsxs(Stack, { direction: "row", p: compact ? 0.5 : 1, spacing: 1, alignItems: "center", children: [children || _jsx(RelatedIcon, { icon: icon, title: title, href: href, compact: compact }), _jsx(Typography, { component: Link, to: href ?? '#', target: target, rel: rel, onClick: e => e.stopPropagation(), children: safeTitle })] }) }, href) }) }));
 };
 export default RelatedLink;

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}

@@ -1,4 +1,4 @@
-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 { Clear, KeyboardArrowDown, Send } from '@mui/icons-material';
 import { Accordion, AccordionDetails, AccordionSummary, AvatarGroup, Chip, IconButton, Skeleton, Stack, TextField, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
@@ -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) {
+            void 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);
@@ -103,21 +104,21 @@ const HitComments = ({ hit, users }) => {
             setLength(input.current.value.length);
         }
         if (e.ctrlKey && e.key === 'Enter' && !loading) {
-            onSubmit();
+            void onSubmit();
         }
     }, [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,25 @@ const HitComments = ({ hit, users }) => {
     }, []);
     const handleReact = useCallback(async (commentId, type) => {
         if (type) {
-            await dispatchApi(api.hit.comments.react.put(hit.howler.id, commentId, type));
-            setComments(comments.map(cmt => cmt.id !== commentId ? cmt : { ...cmt, reactions: { ...(cmt?.reactions ?? {}), [user.username]: 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));
-            setComments(comments.map(cmt => cmt.id !== commentId
-                ? cmt
-                : { ...cmt, reactions: { ...(cmt?.reactions ?? {}), [user.username]: undefined } }));
+            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 +163,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/{routes/hits/search/HitContextMenu.d.ts → elements/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;