@cccsaurora/howler-ui 3.1.0-dev.1463 → 3.1.0-dev.1493

package/components/routes/hits/search/InformationPane.js

@@ -28,16 +28,15 @@ import RecordRelated from '@cccsaurora/howler-ui/components/elements/record/Reco
 import RecordWorklog from '@cccsaurora/howler-ui/components/elements/record/RecordWorklog';
 import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
 import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
-import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { usePluginStore } from 'react-pluggable';
 import { useLocation } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { getUserList } from '@cccsaurora/howler-ui/utils/recordFunctions';
 import { validateRegex } from '@cccsaurora/howler-ui/utils/stringUtils';
 import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { tryParse } from '@cccsaurora/howler-ui/utils/utils';
+import PluginViewing from '../shared/PluginViewing';
 import LeadRenderer from '../view/LeadRenderer';
 const InformationPane = ({ onClose, selected: _selected }) => {
     const { t, i18n } = useTranslation();
@@ -46,7 +45,6 @@ const InformationPane = ({ onClose, selected: _selected }) => {
     const { emit, open } = useContext(SocketContext);
     const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
     const selected = useContextSelector(ParameterContext, ctx => ctx?.selected) ?? _selected;
-    const pluginStore = usePluginStore();
     const getRecord = useContextSelector(RecordContext, ctx => ctx.getRecord);
     const [userIds, setUserIds] = useState(new Set());
     const [analytic, setAnalytic] = useState();
@@ -59,9 +57,6 @@ const InformationPane = ({ onClose, selected: _selected }) => {
     const dossiers = useMemo(() => _dossiers ?? [], [_dossiers]);
     const users = useMyUserList(userIds);
     const record = useContextSelector(RecordContext, ctx => ctx.records[selected]);
-    howlerPluginStore.plugins.forEach(plugin => {
-        pluginStore.executeFunction(`${plugin}.on`, 'viewing');
-    });
     useEffect(() => {
         if (!selected) {
             return;
@@ -149,7 +144,7 @@ const InformationPane = ({ onClose, selected: _selected }) => {
         }[tab]?.();
     }, [dossiers, filter, record, loading, tab, users]);
     const hasError = useMemo(() => !validateRegex(filter), [filter]);
-    return (_jsxs(VSBox, { top: 10, sx: { height: '100%', flex: 1 }, children: [_jsxs(Stack, { direction: "column", flex: 1, sx: { overflowY: 'auto', flexGrow: 1 }, position: "relative", spacing: 1, ml: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, flexShrink: 0, pr: 2, children: [_jsx(FlexOne, {}), onClose && !location.pathname.startsWith('/bundles') && (_jsx(TuiIconButton, { size: "small", onClick: onClose, tooltip: t('hit.panel.details.exit'), children: _jsx(Clear, {}) })), _jsx(SocketBadge, { size: "small" }), analytic && (_jsx(TuiIconButton, { size: "small", tooltip: t('analytic.open'), disabled: !analytic || loading, route: `/analytics/${analytic.analytic_id}`, children: _jsx(QueryStats, {}) })), !!record && (_jsx(TuiIconButton, { tooltip: t(`${record.__index}.open`), href: `/${record.__index}s/${selected}`, disabled: !record || loading, size: "small", target: "_blank", children: _jsx(OpenInNew, {}) }))] }), isHit(record) && (_jsxs(_Fragment, { children: [_jsx(Box, { pr: 2, children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: record }) }), !loading && (_jsxs(_Fragment, { children: [_jsx(HitOutline, { hit: record, layout: HitLayout.DENSE, forceAllFields: true }), _jsx(HitLabels, { hit: record })] })), _jsx(HitLinks, { hit: record, analytic: analytic, dossiers: dossiers })] })), loading && (_jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: "rounded", height: 152 }), _jsx(Skeleton, { height: 124 })] })), _jsxs(VSBoxHeader, { ml: -1, mr: -1, pb: 1, sx: { top: '0px' }, children: [_jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: {
+    return (_jsxs(VSBox, { top: 10, sx: { height: '100%', flex: 1 }, children: [isHit(record) && _jsx(PluginViewing, { hit: record }), _jsxs(Stack, { direction: "column", flex: 1, sx: { overflowY: 'auto', flexGrow: 1 }, position: "relative", spacing: 1, ml: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, flexShrink: 0, pr: 2, children: [_jsx(FlexOne, {}), onClose && !location.pathname.startsWith('/bundles') && (_jsx(TuiIconButton, { size: "small", onClick: onClose, tooltip: t('hit.panel.details.exit'), children: _jsx(Clear, {}) })), _jsx(SocketBadge, { size: "small" }), analytic && (_jsx(TuiIconButton, { size: "small", tooltip: t('analytic.open'), disabled: !analytic || loading, route: `/analytics/${analytic.analytic_id}`, children: _jsx(QueryStats, {}) })), !!record && (_jsx(TuiIconButton, { tooltip: t(`${record.__index}.open`), href: `/${record.__index}s/${selected}`, disabled: !record || loading, size: "small", target: "_blank", children: _jsx(OpenInNew, {}) }))] }), isHit(record) && (_jsxs(_Fragment, { children: [_jsx(Box, { pr: 2, children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: record }) }), !loading && (_jsxs(_Fragment, { children: [_jsx(HitOutline, { hit: record, layout: HitLayout.DENSE, forceAllFields: true }), _jsx(HitLabels, { hit: record })] })), _jsx(HitLinks, { hit: record, analytic: analytic, dossiers: dossiers })] })), loading && (_jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: "rounded", height: 152 }), _jsx(Skeleton, { height: 124 })] })), _jsxs(VSBoxHeader, { ml: -1, mr: -1, pb: 1, sx: { top: '0px' }, children: [_jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     pr: 2,

package/components/routes/hits/search/SearchPane.js

@@ -86,6 +86,7 @@ const SearchPane = () => {
     const error = useContextSelector(RecordSearchContext, ctx => ctx.error);
     const { onClick } = useRecordSelection();
     const searchPaneWidth = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null)[0];
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const verticalSorters = useMediaQuery('(max-width: 1919px)') || (searchPaneWidth ?? Number.MAX_SAFE_INTEGER) < 900;
     const getSelectedId = useCallback((event) => {
         const target = event.target;
@@ -102,6 +103,6 @@ const SearchPane = () => {
                                                     bottom: 0,
                                                     borderBottomLeftRadius: theme.shape.borderRadius,
                                                     borderBottomRightRadius: theme.shape.borderRadius
-                                                }) }))] }), _jsx(QuerySettings, { verticalSorters: verticalSorters, boxSx: { position: 'relative', pt: 1.5 } })] }), response && (_jsxs(Stack, { direction: "row", alignItems: "center", sx: { pt: 1 }, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: response.rows, offset: response.offset, onChange: nextOffset => setOffset(nextOffset) })] }))] }), _jsx(VSBoxContent, { mr: -1, ml: -1, mt: 1, children: _jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: !response ? (_jsx(AppListEmpty, {})) : (response.items.map(record => _jsx(Item, { record: record, onClick: onClick }, record.howler.id))) }) })] }) }) }));
+                                                }) }))] }), _jsx(QuerySettings, { verticalSorters: verticalSorters, boxSx: { position: 'relative', pt: 1.5 } })] }), response && (_jsxs(Stack, { direction: "row", alignItems: "center", sx: { pt: 1 }, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: pageCount, offset: response.offset, onChange: nextOffset => setOffset(nextOffset) })] }))] }), _jsx(VSBoxContent, { mr: -1, ml: -1, mt: 1, children: _jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: !response ? (_jsx(AppListEmpty, {})) : (response.items.map(record => _jsx(Item, { record: record, onClick: onClick }, record.howler.id))) }) })] }) }) }));
 };
 export default memo(SearchPane);

package/components/routes/hits/shared/PluginViewing.d.ts

@@ -0,0 +1,10 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { type FC } from 'react';
+/**
+ * Plugin viewing handlers must be rendered because plugin implementations may use React hooks.
+ * Memoization prevents them from running again when the surrounding hit view rerenders unchanged.
+ */
+declare const PluginViewing: FC<{
+    hit: Hit;
+}>;
+export default PluginViewing;

package/components/routes/hits/shared/PluginViewing.js

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { memo } from 'react';
+import { usePluginStore } from 'react-pluggable';
+/**
+ * Plugin viewing handlers must be rendered because plugin implementations may use React hooks.
+ * Memoization prevents them from running again when the surrounding hit view rerenders unchanged.
+ */
+const PluginViewing = memo(({ hit }) => {
+    const pluginStore = usePluginStore();
+    return _jsx(_Fragment, { children: howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.on`, 'viewing', hit)) });
+});
+export default PluginViewing;

package/components/routes/hits/view/HitViewer.js

@@ -5,6 +5,7 @@ import { Badge, Box, CardContent, Collapse, IconButton, Skeleton, Stack, Tab, Ta
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
 import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
@@ -22,13 +23,14 @@ import RecordRelated from '@cccsaurora/howler-ui/components/elements/record/Reco
 import RecordWorklog from '@cccsaurora/howler-ui/components/elements/record/RecordWorklog';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { getUserList } from '@cccsaurora/howler-ui/utils/recordFunctions';
 import { tryParse } from '@cccsaurora/howler-ui/utils/utils';
+import PluginViewing from '../shared/PluginViewing';
 import LeadRenderer from './LeadRenderer';
 export var Orientation;
 (function (Orientation) {
@@ -43,6 +45,7 @@ const HitViewer = () => {
     const isUnderLg = useMediaQuery(theme.breakpoints.down('lg'));
     const [orientation, setOrientation] = useMyLocalStorageItem(StorageKey.VIEWER_ORIENTATION, Orientation.VERTICAL);
     const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
+    const { emit, open } = useContext(SocketContext);
     const getHit = useContextSelector(RecordContext, ctx => ctx.getRecord);
     const hit = useContextSelector(RecordContext, ctx => ctx.records[params.id]);
     const [userIds, setUserIds] = useState(new Set());
@@ -62,7 +65,7 @@ const HitViewer = () => {
         }
         catch (err) {
             if (err.cause?.api_status_code === 404) {
-                navigate('/404');
+                void navigate('/404');
             }
         }
     }, [hit, getMatchingAnalytic, getHit, params.id, navigate]);
@@ -74,6 +77,23 @@ const HitViewer = () => {
     useEffect(() => {
         void fetchData();
     }, [params.id, fetchData, hit]);
+    useEffect(() => {
+        if (!params.id || !open) {
+            return;
+        }
+        emit({
+            broadcast: false,
+            action: 'viewing',
+            id: params.id
+        });
+        return () => {
+            emit({
+                broadcast: false,
+                action: 'stop_viewing',
+                id: params.id
+            });
+        };
+    }, [emit, params.id, open]);
     const onOrientationChange = useCallback(() => setOrientation(orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL), [orientation, setOrientation]);
     useEffect(() => {
         void getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
@@ -115,37 +135,37 @@ const HitViewer = () => {
     if (!hit) {
         return (_jsx(PageCenter, { children: _jsx(Skeleton, { variant: "rounded", height: "520px" }) }));
     }
-    return (_jsx(PageCenter, { maxWidth: "1500px", children: _jsxs(Box, { sx: {
-                display: 'grid',
-                position: 'relative',
-                gridTemplateColumns: `1fr ${orientation === 'vertical' ? '300px' : '0px'}`,
-                alignItems: 'stretch',
-                gap: theme.spacing(2),
-                transition: `${theme.transitions.duration.standard}ms`,
-                mb: 1
-            }, textAlign: "left", children: [_jsx(Collapse, { sx: { gridColumn: '1 / span 2', '& [class*=MuiStack-root]': { padding: '0 !important' } }, in: orientation === 'horizontal', children: _jsx(HitActions, { hit: hit, orientation: "horizontal" }) }), _jsxs(Box, { sx: {
-                        display: 'flex',
-                        '& > .MuiPaper-root': { flex: 1 },
-                        mr: orientation === 'vertical' ? 0 : -2
-                    }, children: [_jsx(HowlerCard, { tabIndex: 0, sx: { position: 'relative' }, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: HitLayout.COMFY, useListener: true }), _jsx(HitOutline, { hit: hit, layout: HitLayout.COMFY, forceAllFields: true }), _jsx(HitLabels, { hit: hit }), _jsx(HitLinks, { hit: hit, analytic: analytic, dossiers: dossiers })] }) }), !isUnderLg && (_jsxs(Stack, { spacing: 1, sx: {
-                                position: 'absolute',
-                                top: theme.spacing(2),
-                                right: theme.spacing(-6)
-                            }, children: [_jsx(Tooltip, { title: t('hit.panel.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) }))] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
-                            // eslint-disable-next-line react/no-array-index-key
-                            , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => (_jsx(Tab
-                            // eslint-disable-next-line react/no-array-index-key
-                            , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_lead.icon && _jsx(Icon, { icon: _lead.icon }), _jsx("span", { children: i18n.language === 'en' ? _lead.label.en : _lead.label.fr })] }), value: `external-lead:${dossierIndex}:${leadIndex}`, onClick: () => setTab(`external-lead:${dossierIndex}:${leadIndex}`) }, `external-lead:${dossierIndex}:${leadIndex}`)))), _jsx(FlexOne, {}), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.data'), children: _jsx(DataObject, {}) }), value: "hit_data", onClick: () => setTab('hit_data'), disabled: !hit?.howler?.data }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.json'), children: _jsx(Code, {}) }), value: "hit_raw", onClick: () => setTab('hit_raw') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.comments'), children: _jsx(Badge, { sx: {
-                                            '& > .MuiBadge-badge': {
-                                                backgroundColor: theme.palette.divider,
-                                                zIndex: 1,
-                                                right: theme.spacing(-0.5)
-                                            },
-                                            '& > svg': { zIndex: 2 }
-                                        }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.worklog'), children: _jsx(History, {}) }), value: "hit_worklog", onClick: () => setTab('hit_worklog') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.related'), children: _jsx(LinkSharp, {}) }), value: "hit_related", onClick: () => setTab('hit_related') })] }) }), _jsx(Box, { sx: {
-                        gridColumn: '1 / span 2',
-                        '& > div': { padding: 0 },
-                        '& .react-json-view': { backgroundColor: 'transparent !important' }
-                    }, children: tabContent })] }) }));
+    return (_jsxs(PageCenter, { maxWidth: "1500px", children: [_jsx(PluginViewing, { hit: hit }), _jsxs(Box, { sx: {
+                    display: 'grid',
+                    position: 'relative',
+                    gridTemplateColumns: `1fr ${orientation === 'vertical' ? '300px' : '0px'}`,
+                    alignItems: 'stretch',
+                    gap: theme.spacing(2),
+                    transition: `${theme.transitions.duration.standard}ms`,
+                    mb: 1
+                }, textAlign: "left", children: [_jsx(Collapse, { sx: { gridColumn: '1 / span 2', '& [class*=MuiStack-root]': { padding: '0 !important' } }, in: orientation === 'horizontal', children: _jsx(HitActions, { hit: hit, orientation: "horizontal" }) }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            '& > .MuiPaper-root': { flex: 1 },
+                            mr: orientation === 'vertical' ? 0 : -2
+                        }, children: [_jsx(HowlerCard, { tabIndex: 0, sx: { position: 'relative' }, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: HitLayout.COMFY, useListener: true }), _jsx(HitOutline, { hit: hit, layout: HitLayout.COMFY, forceAllFields: true }), _jsx(HitLabels, { hit: hit }), _jsx(HitLinks, { hit: hit, analytic: analytic, dossiers: dossiers })] }) }), !isUnderLg && (_jsxs(Stack, { spacing: 1, sx: {
+                                    position: 'absolute',
+                                    top: theme.spacing(2),
+                                    right: theme.spacing(-6)
+                                }, children: [_jsx(Tooltip, { title: t('hit.panel.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) }))] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
+                                // eslint-disable-next-line react/no-array-index-key
+                                , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => (_jsx(Tab
+                                // eslint-disable-next-line react/no-array-index-key
+                                , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_lead.icon && _jsx(Icon, { icon: _lead.icon }), _jsx("span", { children: i18n.language === 'en' ? _lead.label.en : _lead.label.fr })] }), value: `external-lead:${dossierIndex}:${leadIndex}`, onClick: () => setTab(`external-lead:${dossierIndex}:${leadIndex}`) }, `external-lead:${dossierIndex}:${leadIndex}`)))), _jsx(FlexOne, {}), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.data'), children: _jsx(DataObject, {}) }), value: "hit_data", onClick: () => setTab('hit_data'), disabled: !hit?.howler?.data }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.json'), children: _jsx(Code, {}) }), value: "hit_raw", onClick: () => setTab('hit_raw') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.comments'), children: _jsx(Badge, { sx: {
+                                                '& > .MuiBadge-badge': {
+                                                    backgroundColor: theme.palette.divider,
+                                                    zIndex: 1,
+                                                    right: theme.spacing(-0.5)
+                                                },
+                                                '& > svg': { zIndex: 2 }
+                                            }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.worklog'), children: _jsx(History, {}) }), value: "hit_worklog", onClick: () => setTab('hit_worklog') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.related'), children: _jsx(LinkSharp, {}) }), value: "hit_related", onClick: () => setTab('hit_related') })] }) }), _jsx(Box, { sx: {
+                            gridColumn: '1 / span 2',
+                            '& > div': { padding: 0 },
+                            '& .react-json-view': { backgroundColor: 'transparent !important' }
+                        }, children: tabContent })] })] }));
 };
 export default HitViewer;

package/components/routes/hits/view/HitViewer.test.d.ts

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

package/components/routes/hits/view/HitViewer.test.js

@@ -0,0 +1,263 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockEmit = vi.hoisted(() => vi.fn());
+const mockExecutePlugin = vi.hoisted(() => vi.fn(function () {
+    return this.functionArray;
+}));
+const mockOpen = vi.hoisted(() => ({ current: true }));
+const mockParams = vi.hoisted(() => ({ id: 'hit-1' }));
+const mockGetHit = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockGetMatchingAnalytic = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockGetMatchingDossiers = vi.hoisted(() => vi.fn().mockResolvedValue([]));
+const mockGetMatchingOverview = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockNavigate = vi.hoisted(() => vi.fn());
+const mockUseMediaQuery = vi.hoisted(() => vi.fn(() => false));
+const mockSetOrientation = vi.hoisted(() => vi.fn());
+vi.mock('@mui/material', async () => {
+    const actual = await vi.importActual('@mui/material');
+    return {
+        ...actual,
+        useMediaQuery: mockUseMediaQuery
+    };
+});
+vi.mock('plugins/store', () => ({
+    default: {
+        plugins: ['test-plugin']
+    }
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({ executeFunction: mockExecutePlugin, functionArray: [] })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key,
+        i18n: { language: 'en' }
+    })
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        useNavigate: () => mockNavigate,
+        useParams: () => mockParams
+    };
+});
+vi.mock('components/app/hooks/useMatchers', () => ({
+    default: () => ({
+        getMatchingAnalytic: mockGetMatchingAnalytic,
+        getMatchingDossiers: mockGetMatchingDossiers,
+        getMatchingOverview: mockGetMatchingOverview
+    })
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageItem: () => [Orientation.VERTICAL, mockSetOrientation]
+}));
+vi.mock('components/hooks/useMyUserList', () => ({
+    default: () => []
+}));
+vi.mock('utils/recordFunctions', () => ({
+    getUserList: () => new Set(['analyst'])
+}));
+vi.mock('utils/utils', () => ({
+    tryParse: (value) => `parsed:${value}`
+}));
+vi.mock('components/elements/hit/HitActions', () => ({
+    default: ({ orientation }) => _jsxs("div", { children: ["actions:", orientation] })
+}));
+vi.mock('components/elements/display/icons/SocketBadge', () => ({
+    default: () => null
+}));
+vi.mock('components/elements/hit/HitBanner', () => ({
+    default: () => _jsx("div", { children: "banner" })
+}));
+vi.mock('components/elements/hit/HitOutline', () => ({
+    default: () => _jsx("div", { children: "outline" })
+}));
+vi.mock('components/elements/hit/HitLabels', () => ({
+    default: () => _jsx("div", { children: "labels" })
+}));
+vi.mock('components/elements/hit/HitLinks', () => ({
+    default: ({ analytic, dossiers }) => (_jsxs("div", { children: ["links:", analytic?.analytic_id, ":", dossiers.length] }))
+}));
+vi.mock('components/elements/hit/HitOverview', () => ({
+    default: () => _jsx("div", { children: "overview-content" })
+}));
+vi.mock('components/elements/ObjectDetails', () => ({
+    default: () => _jsx("div", { children: "details-content" })
+}));
+vi.mock('components/elements/display/json/JSONViewer', () => ({
+    default: ({ data }) => _jsx("div", { id: "json-content", children: JSON.stringify(data) })
+}));
+vi.mock('components/elements/record/RecordComments', () => ({
+    default: () => _jsx("div", { children: "comments-content" })
+}));
+vi.mock('components/elements/record/RecordWorklog', () => ({
+    default: () => _jsx("div", { children: "worklog-content" })
+}));
+vi.mock('components/elements/record/RecordRelated', () => ({
+    default: () => _jsx("div", { children: "related-content" })
+}));
+vi.mock('./LeadRenderer', () => ({
+    default: ({ lead }) => _jsxs("div", { children: ["lead-content:", lead.label.en] })
+}));
+import HitViewer, { Orientation } from './HitViewer';
+const hit = {
+    __index: 'hit',
+    timestamp: '2026-01-01T00:00:00Z',
+    howler: {
+        id: 'hit-1',
+        analytic: 'analytic-1',
+        assignment: 'analyst',
+        hash: 'hash-1',
+        data: ['{"source":"data"}'],
+        dossier: [
+            {
+                label: { en: 'Local lead', fr: 'Piste locale' },
+                format: 'markdown',
+                content: 'local'
+            }
+        ],
+        comment: [{}]
+    }
+};
+const recordContextValue = {
+    records: { 'hit-1': hit },
+    getRecord: mockGetHit
+};
+const createWrapper = () => {
+    const Wrapper = ({ children }) => (_jsx(SocketContext.Provider, { value: {
+            emit: mockEmit,
+            open: mockOpen.current,
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            status: 1,
+            reconnect: vi.fn(),
+            viewers: {},
+            fetchViewers: vi.fn()
+        }, children: _jsx(RecordContext.Provider, { value: recordContextValue, children: children }) }));
+    return Wrapper;
+};
+const renderViewer = () => render(_jsx(HitViewer, {}), { wrapper: createWrapper() });
+beforeEach(() => {
+    mockEmit.mockReset();
+    mockExecutePlugin.mockClear();
+    mockOpen.current = true;
+    mockParams.id = 'hit-1';
+    mockUseMediaQuery.mockReset().mockReturnValue(false);
+    mockSetOrientation.mockReset();
+    mockGetHit.mockReset().mockResolvedValue(undefined);
+    mockGetMatchingAnalytic.mockReset().mockResolvedValue(undefined);
+    mockGetMatchingDossiers.mockReset().mockResolvedValue([]);
+    mockGetMatchingOverview.mockReset().mockResolvedValue(undefined);
+    mockNavigate.mockReset();
+    recordContextValue.records = { 'hit-1': hit };
+});
+describe('HitViewer', () => {
+    it('loads a missing hit and shows the loading state', async () => {
+        recordContextValue.records = {};
+        renderViewer();
+        expect(screen.queryByText('details-content')).not.toBeInTheDocument();
+        await waitFor(() => expect(mockGetHit).toHaveBeenCalledWith('hit-1', true));
+    });
+    it('navigates to the not-found page when loading fails with a 404', async () => {
+        recordContextValue.records = {};
+        mockGetHit.mockRejectedValue({ cause: { api_status_code: 404 } });
+        renderViewer();
+        await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith('/404'));
+    });
+    it('fetches matching data, notifies plugins, and renders the details view', async () => {
+        const analytic = { analytic_id: 'analytic-1' };
+        const dossiers = [{ leads: [] }];
+        mockGetMatchingAnalytic.mockResolvedValue(analytic);
+        mockGetMatchingDossiers.mockResolvedValue(dossiers);
+        renderViewer();
+        await waitFor(() => {
+            expect(mockGetMatchingAnalytic).toHaveBeenCalledWith(hit);
+            expect(mockGetMatchingDossiers).toHaveBeenCalledWith(hit);
+            expect(screen.getByText('links:analytic-1:1')).toBeInTheDocument();
+        });
+        expect(screen.getByText('details-content')).toBeInTheDocument();
+        expect(mockExecutePlugin).toHaveBeenCalledTimes(1);
+        expect(mockExecutePlugin).toHaveBeenCalledWith('test-plugin.on', 'viewing', hit);
+    });
+    it('emits viewing and stop_viewing socket events', async () => {
+        const { unmount } = renderViewer();
+        await waitFor(() => {
+            expect(mockEmit).toHaveBeenCalledWith({
+                broadcast: false,
+                action: 'viewing',
+                id: 'hit-1'
+            });
+        });
+        mockEmit.mockClear();
+        unmount();
+        expect(mockEmit).toHaveBeenCalledWith({
+            broadcast: false,
+            action: 'stop_viewing',
+            id: 'hit-1'
+        });
+    });
+    it('does not emit socket events when the socket is closed or no hit id is present', async () => {
+        mockOpen.current = false;
+        renderViewer();
+        await waitFor(() => expect(mockGetMatchingOverview).toHaveBeenCalledWith(hit));
+        expect(mockEmit).not.toHaveBeenCalled();
+        mockParams.id = undefined;
+        renderViewer();
+        expect(mockEmit).not.toHaveBeenCalled();
+    });
+    it('opens an overview by default and lets the analyst select all content tabs', async () => {
+        const user = userEvent.setup();
+        mockGetMatchingOverview.mockResolvedValue({ content: 'overview' });
+        mockGetMatchingDossiers.mockResolvedValue([
+            {
+                leads: [
+                    {
+                        label: { en: 'External lead', fr: 'Piste externe' },
+                        format: 'markdown',
+                        content: 'external'
+                    }
+                ]
+            }
+        ]);
+        renderViewer();
+        await screen.findByText('overview-content');
+        await user.click(screen.getByRole('tab', { name: 'hit.viewer.details' }));
+        expect(screen.getByText('details-content')).toBeInTheDocument();
+        await user.click(screen.getByRole('tab', { name: 'Local lead' }));
+        expect(screen.getByText('lead-content:Local lead')).toBeInTheDocument();
+        await user.click(screen.getByRole('tab', { name: 'External lead' }));
+        expect(screen.getByText('lead-content:External lead')).toBeInTheDocument();
+        const tabs = screen.getAllByRole('tab');
+        await user.click(tabs.at(-5));
+        expect(screen.getByTestId('json-content')).toHaveTextContent(JSON.stringify(['parsed:{"source":"data"}']));
+        await user.click(tabs.at(-4));
+        expect(screen.getByTestId('json-content')).toHaveTextContent(JSON.stringify(hit));
+        await user.click(tabs.at(-3));
+        expect(screen.getByText('comments-content')).toBeInTheDocument();
+        await user.click(tabs.at(-2));
+        expect(screen.getByText('worklog-content')).toBeInTheDocument();
+        await user.click(tabs.at(-1));
+        expect(screen.getByText('related-content')).toBeInTheDocument();
+    });
+    it('toggles the desktop layout and navigates to its matching analytic', async () => {
+        const user = userEvent.setup();
+        mockGetMatchingAnalytic.mockResolvedValue({ analytic_id: 'analytic-1' });
+        renderViewer();
+        await screen.findByText('links:analytic-1:0');
+        const buttons = screen.getAllByRole('button');
+        await user.click(buttons[0]);
+        expect(mockSetOrientation).toHaveBeenCalledWith(Orientation.HORIZONTAL);
+        await user.click(buttons[1]);
+        expect(mockNavigate).toHaveBeenCalledWith('/analytics/analytic-1');
+    });
+    it('forces a horizontal layout below the large breakpoint', async () => {
+        mockUseMediaQuery.mockReturnValue(true);
+        renderViewer();
+        await waitFor(() => expect(mockSetOrientation).toHaveBeenCalledWith(Orientation.HORIZONTAL));
+    });
+});

package/package.json

@@ -93,7 +93,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "3.1.0-dev.1463",
+  "version": "3.1.0-dev.1493",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
@@ -243,6 +243,7 @@
     "./components/routes/overviews/template/*": "./components/routes/overviews/template/*.js",
     "./components/routes/hits/search/*": "./components/routes/hits/search/*.js",
     "./components/routes/hits/view/*": "./components/routes/hits/view/*.js",
+    "./components/routes/hits/shared/*": "./components/routes/hits/shared/*.js",
     "./components/routes/hits/search/shared/*": "./components/routes/hits/search/shared/*.js",
     "./components/routes/hits/search/grid/*": "./components/routes/hits/search/grid/*.js",
     "./components/routes/analytics/widgets/*": "./components/routes/analytics/widgets/*.js",