@cccsaurora/howler-ui 2.18.0-dev.704 → 2.18.0-dev.705

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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Close, ErrorOutline, SavedSearch, Terminal } from '@mui/icons-material';
+import { ErrorOutline, SavedSearch, Terminal } from '@mui/icons-material';
 import { Box, IconButton, LinearProgress, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { grey } from '@mui/material/colors';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
-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 FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexPort';
 import VSBox from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBox';
@@ -14,27 +14,25 @@ import VSBoxContent from '@cccsaurora/howler-ui/components/elements/addons/layou
 import VSBoxHeader from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxHeader';
 import SearchPagination from '@cccsaurora/howler-ui/components/elements/addons/search/SearchPagination';
 import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
-import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
-import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
+import ObservableCard from '@cccsaurora/howler-ui/components/elements/observable/ObservableCard';
+import RecordContextMenu from '@cccsaurora/howler-ui/components/elements/record/RecordContextMenu';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import React, { memo, useCallback, useEffect, useMemo } from 'react';
+import useRecordSelection from '@cccsaurora/howler-ui/components/hooks/useRecordSelection';
+import React, { memo, useCallback, useMemo } from 'react';
 import { isMobile } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import BundleParentMenu from './BundleParentMenu';
-import { BundleScroller } from './BundleScroller';
-import HitContextMenu from './HitContextMenu';
-import HitQuery from './HitQuery';
+import { isHit, isObservable } from '@cccsaurora/howler-ui/utils/typeUtils';
 import LayoutSettings from './LayoutSettings';
 import QuerySettings from './QuerySettings';
-const Item = memo(({ hit, onClick }) => {
+import RecordQuery from './RecordQuery';
+const Item = memo(({ record, onClick }) => {
     const theme = useTheme();
-    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+    const selectedRecords = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const checkMiddleClick = useCallback((e, id) => {
         if (e.button === 1) {
@@ -46,14 +44,14 @@ const Item = memo(({ hit, onClick }) => {
     const [hitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, HitLayout.NORMAL);
     const layout = useMemo(() => (isMobile ? HitLayout.COMFY : hitLayout), [hitLayout]);
     // Search result list item renderer.
-    return (_jsx(Box, { id: hit.howler.id, onAuxClick: e => checkMiddleClick(e, hit.howler.id), onClick: ev => onClick(ev, hit), sx: [
+    return (_jsxs(Box, { id: record.howler.id, onAuxClick: e => checkMiddleClick(e, record.howler.id), onClick: ev => onClick(ev, record), sx: [
             {
                 mb: 2,
                 cursor: 'pointer',
                 '& span,p,h6': {
                     cursor: 'text'
                 },
-                '& .MuiPaper-root': {
+                '& > .MuiPaper-root': {
                     border: '4px solid transparent',
                     boxShadow: `0px 0px 0px 0px transparent`,
                     transition: theme.transitions.create(['border-color', 'box-shadow'])
@@ -66,34 +64,26 @@ const Item = memo(({ hit, onClick }) => {
                     paddingBottom: 'inherit' // prevents slight height variation on selected card.
                 }
             },
-            selectedHits.some(_hit => _hit.howler.id === hit.howler.id) && {
-                '& .MuiPaper-root': { borderColor: grey[500], boxShadow: `0px 0px 5px 2px ${grey[500]}` }
+            selectedRecords.some(_record => _record.howler.id === record.howler.id) && {
+                '& > .MuiPaper-root': { borderColor: grey[500], boxShadow: `0px 0px 5px 2px ${grey[500]}` }
             },
-            selected === hit.howler.id && {
-                '& .MuiPaper-root': {
+            selected === record.howler.id && {
+                '& > .MuiPaper-root': {
                     borderColor: 'primary.main',
                     boxShadow: `0px 0px 5px 2px ${theme.palette.primary.main}`
                 }
             }
-        ], children: _jsx(HitCard, { id: hit.howler.id, layout: layout }) }));
+        ], children: [isHit(record) && _jsx(HitCard, { id: record.howler.id, layout: layout }), isObservable(record) && _jsx(ObservableCard, { id: record.howler.id, observable: record })] }));
 });
 const SearchPane = () => {
     const { t } = useTranslation();
-    const location = useLocation();
-    const navigate = useNavigate();
-    const routeParams = useParams();
-    const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
-    const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const setOffset = useContextSelector(ParameterContext, ctx => ctx.setOffset);
-    const triggerSearch = useContextSelector(HitSearchContext, ctx => ctx.search);
-    const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
-    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
-    const error = useContextSelector(HitSearchContext, ctx => ctx.error);
-    const { onClick } = useHitSelection();
-    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
-    const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
-    const bundleHit = useContextSelector(HitContext, ctx => location.pathname.startsWith('/bundles') ? ctx.hits[routeParams.id] : null);
+    const triggerSearch = useContextSelector(RecordSearchContext, ctx => ctx.search);
+    const searching = useContextSelector(RecordSearchContext, ctx => ctx.searching);
+    const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
+    const error = useContextSelector(RecordSearchContext, ctx => ctx.error);
+    const { onClick } = useRecordSelection();
     const searchPaneWidth = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null)[0];
     const verticalSorters = useMediaQuery('(max-width: 1919px)') || (searchPaneWidth ?? Number.MAX_SAFE_INTEGER) < 900;
     const getSelectedId = useCallback((event) => {
@@ -104,26 +94,13 @@ const SearchPane = () => {
         }
         return selectedElement.id;
     }, []);
-    useEffect(() => {
-        if (location.pathname.startsWith('/bundles')) {
-            getHit(routeParams.id);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [location.pathname, routeParams.id]);
-    return (_jsx(FlexPort, { id: "hitscrollbar", children: _jsx(PageCenter, { textAlign: "left", mt: 0, mb: 6, ml: 0, mr: 0, maxWidth: "1500px", children: _jsxs(VSBox, { top: 0, children: [_jsxs(Stack, { ml: -1, mr: -1, sx: { '& .overflowingContentWidgets > *': { zIndex: '2000 !important' } }, spacing: 1, children: [bundleHit && (_jsx(BundleScroller, { children: _jsx(HitContextMenu, { getSelectedId: () => bundleHit.howler.id, children: _jsx(Stack, { spacing: 1, sx: { mx: -1 }, children: _jsx(HowlerCard, { sx: [
-                                                { p: 1, border: '4px solid transparent', cursor: 'pointer' },
-                                                location.pathname.startsWith('/bundles') &&
-                                                    selected === routeParams.id && { borderColor: 'primary.main' }
-                                            ], onClick: () => {
-                                                clearSelectedHits(bundleHit.howler.id);
-                                                setSelected(bundleHit.howler.id);
-                                            }, children: _jsx(HitBanner, { hit: bundleHit, layout: HitLayout.DENSE, useListener: true }) }) }) }) })), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", children: t('hit.search.prompt') }), error && (_jsx(Tooltip, { title: `${t('route.advanced.error')}: ${error}`, children: _jsx(ErrorOutline, { fontSize: "small", color: "error" }) })), _jsx(FlexOne, {}), bundleHit?.howler.bundles.length > 0 && _jsx(BundleParentMenu, { bundle: bundleHit }), bundleHit && (_jsx(Tooltip, { title: t('hit.bundle.close'), children: _jsx(IconButton, { size: "small", onClick: () => navigate('/search'), children: _jsx(Close, {}) }) })), _jsx(Tooltip, { title: t('route.views.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/views/create?query=${query}`, children: _jsx(SavedSearch, {}) }) }), _jsx(Tooltip, { title: t('route.actions.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/action/execute?query=${query}`, children: _jsx(Terminal, {}) }) }), _jsx(LayoutSettings, {})] })] }), _jsxs(VSBoxHeader, { ml: -3, mr: -3, px: 2, pb: 1, sx: { zIndex: 989 }, children: [_jsxs(Stack, { sx: { pt: 1 }, children: [_jsxs(Stack, { sx: { position: 'relative', flex: 1 }, children: [_jsx(HitQuery, { searching: searching, triggerSearch: triggerSearch }), searching && (_jsx(LinearProgress, { sx: theme => ({
+    return (_jsx(FlexPort, { id: "hitscrollbar", children: _jsx(PageCenter, { textAlign: "left", mt: 0, mb: 6, ml: 0, mr: 0, maxWidth: "1500px", children: _jsxs(VSBox, { top: 0, children: [_jsx(Stack, { ml: -1, mr: -1, sx: { '& .overflowingContentWidgets > *': { zIndex: '2000 !important' } }, spacing: 1, children: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", children: t('hit.search.prompt') }), error && (_jsx(Tooltip, { title: `${t('route.advanced.error')}: ${error}`, children: _jsx(ErrorOutline, { fontSize: "small", color: "error" }) })), _jsx(FlexOne, {}), _jsx(Tooltip, { title: t('route.views.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/views/create?query=${query}`, children: _jsx(SavedSearch, {}) }) }), _jsx(Tooltip, { title: t('route.actions.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/action/execute?query=${query}`, children: _jsx(Terminal, {}) }) }), _jsx(LayoutSettings, {})] }) }), _jsxs(VSBoxHeader, { ml: -3, mr: -3, px: 2, pb: 1, sx: { zIndex: 989 }, children: [_jsxs(Stack, { sx: { pt: 1 }, children: [_jsxs(Stack, { sx: { position: 'relative', flex: 1 }, children: [_jsx(RecordQuery, { searching: searching, triggerSearch: triggerSearch }), searching && (_jsx(LinearProgress, { sx: theme => ({
                                                     position: 'absolute',
                                                     left: 0,
                                                     right: 0,
                                                     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(HitContextMenu, { getSelectedId: getSelectedId, children: !response ? (_jsx(AppListEmpty, {})) : (response.items.map(hit => _jsx(Item, { hit: hit, onClick: onClick }, hit.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: 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))) }) })] }) }) }));
 };
 export default memo(SearchPane);

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

@@ -2,8 +2,8 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDropDown, Delete, Edit, Language, Lock, OpenInNew, Person, Refresh, SavedSearch, SelectAll } from '@mui/icons-material';
 import { Autocomplete, Chip, CircularProgress, IconButton, Stack, TextField, Tooltip, Typography } from '@mui/material';
-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 { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
 import { memo, useEffect, useMemo, useState } from 'react';
@@ -20,7 +20,7 @@ const ViewLink = ({ id, viewId }) => {
     const currentViews = useContextSelector(ParameterContext, ctx => ctx.views);
     const removeView = useContextSelector(ParameterContext, ctx => ctx.removeView);
     const setParamView = useContextSelector(ParameterContext, ctx => ctx.setView);
-    const search = useContextSelector(HitSearchContext, ctx => ctx.search);
+    const search = useContextSelector(RecordSearchContext, ctx => ctx.search);
     const [loading, setLoading] = useState(true);
     const [view, setView] = useState(null);
     useEffect(() => {
@@ -47,7 +47,7 @@ const ViewLink = ({ id, viewId }) => {
     }, [query, sort, span, view]);
     const options = useMemo(() => Object.values(views).filter(_view => !!_view && !currentViews?.includes(_view.view_id)), [currentViews, views]);
     if (loading) {
-        return _jsx(Chip, { size: "small", icon: _jsx(CircularProgress, { size: 12 }) });
+        return _jsx(Chip, { icon: _jsx(CircularProgress, { size: 12 }) });
     }
     if (viewId === '') {
         return (_jsx(ChipPopper, { icon: _jsx(SelectAll, {}), label: t('hit.search.view.select'), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, slotProps: { chip: { size: 'small', color: 'warning' } }, children: _jsxs(Stack, { spacing: 1, direction: "row", children: [_jsx(Autocomplete, { fullWidth: true, size: "small", options: options, getOptionLabel: _view => t(_view.title), renderOption: ({ key, ...props }, o) => (_createElement("li", { ...props, key: key },

package/components/routes/hits/search/ViewLink.test.js

@@ -7,8 +7,8 @@ import { setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
 import { vi } from 'vitest';
 setupReactRouterMock();
 // Import component after mocks
-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 { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
@@ -26,7 +26,7 @@ let mockParameterContext = {
     removeView: vi.fn(),
     setView: vi.fn()
 };
-let mockHitSearchContext = {
+let mockRecordSearchContext = {
     search: vi.fn()
 };
 let mockViewContext = {
@@ -38,7 +38,7 @@ let mockViewContext = {
 };
 // Test wrapper
 const Wrapper = ({ children }) => {
-    return (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(ParameterContext.Provider, { value: mockParameterContext, children: _jsx(HitSearchContext.Provider, { value: mockHitSearchContext, children: _jsx(ViewContext.Provider, { value: mockViewContext, children: children }) }) }) }));
+    return (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(ParameterContext.Provider, { value: mockParameterContext, children: _jsx(RecordSearchContext.Provider, { value: mockRecordSearchContext, children: _jsx(ViewContext.Provider, { value: mockViewContext, children: children }) }) }) }));
 };
 describe('ViewLink', () => {
     let user;
@@ -52,7 +52,7 @@ describe('ViewLink', () => {
         mockParameterContext.views = ['test-view-id'];
         mockParameterContext.removeView = vi.fn();
         mockParameterContext.setView = vi.fn();
-        mockHitSearchContext.search = vi.fn();
+        mockRecordSearchContext.search = vi.fn();
         mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
         mockViewContext.views = {
             'test-view-id': createMockView(),
@@ -230,7 +230,7 @@ describe('ViewLink', () => {
             await user.click(screen.getByText('Test View').parentElement);
             const refreshButton = await screen.findByLabelText(i18n.t('view.refresh'));
             await user.click(refreshButton);
-            expect(mockHitSearchContext.search).toHaveBeenCalledWith('howler.id:*');
+            expect(mockRecordSearchContext.search).toHaveBeenCalledWith('howler.id:*');
         });
         it('should display open button', async () => {
             render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
@@ -306,7 +306,7 @@ describe('ViewLink', () => {
             await user.click(screen.getByText('Test View').parentElement);
             const refreshButton = await screen.findByLabelText(i18n.t('view.refresh'));
             await user.click(refreshButton);
-            expect(mockHitSearchContext.search).toHaveBeenCalledWith(undefined);
+            expect(mockRecordSearchContext.search).toHaveBeenCalledWith(undefined);
         });
         it('should handle custom span correctly', async () => {
             mockParameterContext.span = 'date.range.custom';
@@ -398,14 +398,14 @@ describe('ViewLink', () => {
                 expect(mockParameterContext.removeView).toHaveBeenCalledWith('test-view-id');
             }
         });
-        it('should use search from HitSearchContext', async () => {
+        it('should use search from RecordSearchContext', async () => {
             mockViewContext.getCurrentViews = vi.fn().mockResolvedValue([createMockView()]);
             render(_jsx(ViewLink, { id: 0, viewId: "test-view-id" }), { wrapper: Wrapper });
             await screen.findByText('Test View');
             await user.click(screen.getByText('Test View').parentElement);
             const refreshButton = await screen.findByLabelText(i18n.t('view.refresh'));
             await user.click(refreshButton);
-            expect(mockHitSearchContext.search).toHaveBeenCalledWith('howler.id:*');
+            expect(mockRecordSearchContext.search).toHaveBeenCalledWith('howler.id:*');
         });
         it('should filter available views using currentViews from ParameterContext', async () => {
             mockParameterContext.views = ['test-view-id'];

package/components/routes/hits/search/grid/AddColumnModal.js

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

package/components/routes/hits/search/grid/EnhancedCell.d.ts

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

package/components/routes/hits/search/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/HitGrid.js

@@ -4,36 +4,37 @@ import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-ki
 import { FormatIndentDecrease, FormatIndentIncrease, Info, List, Search, TableChart } from '@mui/icons-material';
 import { IconButton, LinearProgress, Paper, Stack, Table, TableBody, TableCell, TableHead, TableRow, ToggleButton, ToggleButtonGroup, Typography, useTheme } from '@mui/material';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
-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 SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
 import DevelopmentBanner from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentBanner';
-import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
+import RecordContextMenu from '@cccsaurora/howler-ui/components/elements/record/RecordContextMenu';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import useRecordSelection from '@cccsaurora/howler-ui/components/hooks/useRecordSelection';
 import { uniq } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import HitContextMenu from '../HitContextMenu';
-import HitQuery from '../HitQuery';
+import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import QuerySettings from '../QuerySettings';
+import RecordQuery from '../RecordQuery';
 import AddColumnModal from './AddColumnModal';
 import ColumnHeader from './ColumnHeader';
-import HitRow from './HitRow';
+import RecordRow from './RecordRow';
 const HitGrid = () => {
     const { t } = useTranslation();
     const theme = useTheme();
     const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
-    const { onClick } = useHitSelection();
+    const { onClick } = useRecordSelection();
     const { getMatchingAnalytic } = useMatchers();
-    const search = useContextSelector(HitSearchContext, ctx => ctx.search);
-    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
-    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
-    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
-    const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
-    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+    const search = useContextSelector(RecordSearchContext, ctx => ctx.search);
+    const displayType = useContextSelector(RecordSearchContext, ctx => ctx.displayType);
+    const setDisplayType = useContextSelector(RecordSearchContext, ctx => ctx.setDisplayType);
+    const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
+    const searching = useContextSelector(RecordSearchContext, ctx => ctx.searching);
+    const selectedHits = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
@@ -56,10 +57,11 @@ const HitGrid = () => {
         return false;
     }, [selected, selectedHits]);
     useEffect(() => {
-        response?.items.forEach(hit => {
-            if (!analyticIds[hit.howler.analytic]) {
-                getMatchingAnalytic(hit).then(_analytic => setAnalyticIds(_analyticIds => ({ ..._analyticIds, [hit.howler.analytic]: _analytic.analytic_id })));
+        response?.items.forEach(record => {
+            if (!isHit(record) || analyticIds[record.howler.analytic]) {
+                return;
             }
+            getMatchingAnalytic(record).then(_analytic => setAnalyticIds(_analyticIds => ({ ..._analyticIds, [record.howler.analytic]: _analytic.analytic_id })));
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [analyticIds, response]);
@@ -117,7 +119,7 @@ const HitGrid = () => {
         }
         return selectedElement.id;
     }, []);
-    return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5, textAlign: 'left' }, variant: "body2", children: t('hit.search.prompt') }), response && (_jsx(SearchTotal, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", offset: response.offset, pageLength: response.rows, total: response.total }))] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(HitQuery, { searching: searching, triggerSearch: search, compact: true }), searching && (_jsx(LinearProgress, { sx: {
+    return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5, textAlign: 'left' }, variant: "body2", children: t('hit.search.prompt') }), response && (_jsx(SearchTotal, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", offset: response.offset, pageLength: response.rows, total: response.total }))] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(RecordQuery, { searching: searching, triggerSearch: search, compact: true }), searching && (_jsx(LinearProgress, { sx: {
                                     position: 'absolute',
                                     left: 0,
                                     right: 0,
@@ -127,6 +129,6 @@ const HitGrid = () => {
                                 } }))] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, {}) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, {}) })] })] }), _jsxs(Stack, { direction: "row", spacing: 1, width: "100%", alignItems: "center", children: [_jsx(QuerySettings, { boxSx: { flex: 1 } }), _jsx(AddColumnModal, { columns: columns, addColumn: key => setColumns(uniq([...columns, key])) })] }), _jsxs(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, onScroll: onScroll, children: [_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], onMouseDown: onMouseDown, setColumns: setColumns }, col))) }) }), _jsx(TableCell, { sx: { width: '100%' } })] }) }), _jsxs(HitContextMenu, { Component: TableBody, getSelectedId: getSelectedId, children: [response?.items.map(hit => (_jsx(HitRow, { hit: hit, analyticIds: analyticIds, columns: columns, columnWidths: columnWidths, collapseMainColumn: collapseMainColumn, onClick: onClick }, hit.howler.id))), _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: () => search(query, true), children: _jsx(Search, {}) }) }) }) })] })] }), (response?.total ?? 0) < 1 && (_jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", p: 1, justifyContent: "center", flex: 1, children: _jsxs(Typography, { variant: "h3", color: "text.secondary", display: "flex", flexDirection: "row", alignItems: "center", children: [_jsx(Info, { fontSize: "inherit", sx: { color: 'text.secondary', mr: 1 } }), _jsx("span", { children: t('app.list.empty') })] }) }))] })] }));
+                                            }, 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], onMouseDown: onMouseDown, setColumns: setColumns }, col))) }) }), _jsx(TableCell, { sx: { width: '100%' } })] }) }), _jsxs(RecordContextMenu, { Component: TableBody, getSelectedId: getSelectedId, children: [response?.items.map(hit => (_jsx(RecordRow, { record: hit, analyticIds: analyticIds, columns: columns, columnWidths: columnWidths, collapseMainColumn: collapseMainColumn, onClick: onClick }, hit.howler.id))), _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: () => search(query, true), children: _jsx(Search, {}) }) }) }) })] })] }), (response?.total ?? 0) < 1 && (_jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", p: 1, justifyContent: "center", flex: 1, children: _jsxs(Typography, { variant: "h3", color: "text.secondary", display: "flex", flexDirection: "row", alignItems: "center", children: [_jsx(Info, { fontSize: "inherit", sx: { color: 'text.secondary', mr: 1 } }), _jsx("span", { children: t('app.list.empty') })] }) }))] })] }));
 };
 export default HitGrid;

package/components/routes/hits/search/grid/{HitRow.d.ts → RecordRow.d.ts}

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

package/components/routes/hits/search/grid/{HitRow.js → RecordRow.js}

@@ -1,25 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { KeyboardArrowUp } from '@mui/icons-material';
 import { Box, Collapse, IconButton, lighten, Stack, TableCell, TableRow, Typography, useTheme } from '@mui/material';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import Assigned from '@cccsaurora/howler-ui/components/elements/hit/elements/Assigned';
 import EscalationChip from '@cccsaurora/howler-ui/components/elements/hit/elements/EscalationChip';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import ObservableCard from '@cccsaurora/howler-ui/components/elements/observable/ObservableCard';
 import { get } from 'lodash-es';
 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] }), hit.howler.assignment !== 'unassigned' && _jsx(Assigned, { 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(ObservableCard, { id: record.howler.id, observable: record })) }) }) }) })] }));
 };
-export default memo(HitRow);
+export default memo(RecordRow);

package/components/routes/hits/search/shared/IndexPicker.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react").NamedExoticComponent<{}>;
+export default _default;

package/components/routes/hits/search/shared/IndexPicker.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FilterList } from '@mui/icons-material';
+import { Autocomplete, TextField } from '@mui/material';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+const FILTER_OPTIONS = [
+    { label: 'hit.search.index.hit', value: 'hit' },
+    { label: 'hit.search.index.observable', value: 'observable' }
+];
+const IndexPicker = () => {
+    const { t } = useTranslation();
+    const indexes = useContextSelector(ParameterContext, ctx => ctx.indexes);
+    const setIndexes = useContextSelector(ParameterContext, ctx => ctx.setIndexes);
+    const selectedOptions = FILTER_OPTIONS.filter(opt => indexes.includes(opt.value));
+    return (_jsx(ChipPopper, { icon: _jsx(FilterList, { fontSize: "small" }), label: selectedOptions.map(opt => t(opt.label)).join(', '), minWidth: "225px", slotProps: { chip: { size: 'small' } }, children: _jsx(Autocomplete, { size: "small", multiple: true, options: FILTER_OPTIONS, value: selectedOptions, onChange: (_ev, values) => values.length > 0 && setIndexes(values.map(val => val.value)), isOptionEqualToValue: (opt, val) => opt.value === val.value, getOptionLabel: opt => t(opt.label), renderInput: params => _jsx(TextField, { ...params }) }) }));
+};
+export default memo(IndexPicker);

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

@@ -4,23 +4,22 @@ import { Code, Comment, DataObject, History, LinkSharp, QueryStats, ViewAgenda }
 import { Badge, Box, CardContent, Collapse, IconButton, Skeleton, Stack, Tab, Tabs, Tooltip, useMediaQuery, useTheme } from '@mui/material';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
-import BundleButton from '@cccsaurora/howler-ui/components/elements/display/icons/BundleButton';
 import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
 import JSONViewer from '@cccsaurora/howler-ui/components/elements/display/json/JSONViewer';
 import HitActions from '@cccsaurora/howler-ui/components/elements/hit/HitActions';
 import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
-import HitComments from '@cccsaurora/howler-ui/components/elements/hit/HitComments';
-import HitDetails from '@cccsaurora/howler-ui/components/elements/hit/HitDetails';
 import HitLabels from '@cccsaurora/howler-ui/components/elements/hit/HitLabels';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import HitLinks from '@cccsaurora/howler-ui/components/elements/hit/HitLinks';
 import HitOutline from '@cccsaurora/howler-ui/components/elements/hit/HitOutline';
 import HitOverview from '@cccsaurora/howler-ui/components/elements/hit/HitOverview';
-import HitRelated from '@cccsaurora/howler-ui/components/elements/hit/HitRelated';
-import HitWorklog from '@cccsaurora/howler-ui/components/elements/hit/HitWorklog';
+import ObjectDetails from '@cccsaurora/howler-ui/components/elements/ObjectDetails';
+import RecordComments from '@cccsaurora/howler-ui/components/elements/record/RecordComments';
+import RecordRelated from '@cccsaurora/howler-ui/components/elements/record/RecordRelated';
+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';
@@ -44,8 +43,8 @@ const HitViewer = () => {
     const isUnderLg = useMediaQuery(theme.breakpoints.down('lg'));
     const [orientation, setOrientation] = useMyLocalStorageItem(StorageKey.VIEWER_ORIENTATION, Orientation.VERTICAL);
     const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
-    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
-    const hit = useContextSelector(HitContext, ctx => ctx.hits[params.id]);
+    const getHit = useContextSelector(RecordContext, ctx => ctx.getRecord);
+    const hit = useContextSelector(RecordContext, ctx => ctx.records[params.id]);
     const [userIds, setUserIds] = useState(new Set());
     const users = useMyUserList(userIds);
     const [tab, setTab] = useState('details');
@@ -94,12 +93,12 @@ const HitViewer = () => {
         }
         return {
             overview: () => _jsx(HitOverview, { hit: hit }),
-            details: () => _jsx(HitDetails, { hit: hit }),
-            hit_comments: () => _jsx(HitComments, { hit: hit, users: users }),
+            details: () => _jsx(ObjectDetails, { obj: hit }),
+            hit_comments: () => _jsx(RecordComments, { record: hit, users: users }),
             hit_raw: () => _jsx(JSONViewer, { data: hit }),
             hit_data: () => _jsx(JSONViewer, { data: hit?.howler?.data?.map(entry => tryParse(entry)), collapse: false }),
-            hit_worklog: () => _jsx(HitWorklog, { hit: hit, users: users }),
-            hit_related: () => _jsx(HitRelated, { hit: hit }),
+            hit_worklog: () => _jsx(RecordWorklog, { record: hit, users: users }),
+            hit_related: () => _jsx(RecordRelated, { record: hit }),
             ...Object.fromEntries(hit?.howler.dossier?.map((lead, index) => ['lead:' + index, () => _jsx(LeadRenderer, { lead: lead, hit: hit })]) ?? []),
             ...Object.fromEntries(dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => [
                 `external-lead:${dossierIndex}:${leadIndex}`,
@@ -132,7 +131,7 @@ const HitViewer = () => {
                                 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('hit.panel.analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles })] }))] }), _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: [hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), 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
+                            }, 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