@cccsaurora/howler-ui 2.18.0-dev.667 → 2.18.0-dev.674

package/components/routes/hits/search/InformationPane.d.ts

@@ -1,5 +1,6 @@
 import type { FC } from 'react';
 declare const InformationPane: FC<{
+    selected?: string;
     onClose?: () => void;
 }>;
 export default InformationPane;

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

@@ -4,29 +4,28 @@ import { Badge, Box, Divider, IconButton, Skeleton, Stack, Tab, Tabs, Tooltip, u
 import TuiIconButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomIconButton';
 import { Icon } from '@iconify/react';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
-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 { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import VSBox from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBox';
 import VSBoxContent from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxContent';
 import VSBoxHeader from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxHeader';
 import Phrase from '@cccsaurora/howler-ui/components/elements/addons/search/phrase/Phrase';
-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 HitSummary from '@cccsaurora/howler-ui/components/elements/hit/HitSummary';
-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 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';
@@ -37,17 +36,18 @@ import { useLocation } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { getUserList } from '@cccsaurora/howler-ui/utils/hitFunctions';
 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 LeadRenderer from '../view/LeadRenderer';
-const InformationPane = ({ onClose }) => {
+const InformationPane = ({ onClose, selected: _selected }) => {
     const { t, i18n } = useTranslation();
     const theme = useTheme();
     const location = useLocation();
     const { emit, isOpen } = useContext(SocketContext);
     const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
-    const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
+    const selected = useContextSelector(ParameterContext, ctx => ctx?.selected) ?? _selected;
     const pluginStore = usePluginStore();
-    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
+    const getRecord = useContextSelector(RecordContext, ctx => ctx.getRecord);
     const [userIds, setUserIds] = useState(new Set());
     const [analytic, setAnalytic] = useState();
     const [hasOverview, setHasOverview] = useState(false);
@@ -58,7 +58,7 @@ const InformationPane = ({ onClose }) => {
     const [_dossiers, setDossiers] = useState(null);
     const dossiers = useMemo(() => _dossiers ?? [], [_dossiers]);
     const users = useMyUserList(userIds);
-    const hit = useContextSelector(HitContext, ctx => ctx.hits[selected]);
+    const record = useContextSelector(RecordContext, ctx => ctx.records[selected]);
     howlerPluginStore.plugins.forEach(plugin => {
         pluginStore.executeFunction(`${plugin}.on`, 'viewing');
     });
@@ -66,14 +66,14 @@ const InformationPane = ({ onClose }) => {
         if (!selected) {
             return;
         }
-        if (!hit?.howler.data) {
+        if (!record?.howler.data) {
             setLoading(true);
-            getHit(selected, true).finally(() => setLoading(false));
+            getRecord(selected, true).finally(() => setLoading(false));
             return;
         }
-        setUserIds(getUserList(hit));
+        setUserIds(getUserList(record));
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getHit, selected]);
+    }, [getRecord, selected]);
     useEffect(() => {
         if (selected) {
             setAnalytic(null);
@@ -82,23 +82,20 @@ const InformationPane = ({ onClose }) => {
         }
     }, [selected]);
     useEffect(() => {
-        if (hit && !analytic) {
-            getMatchingAnalytic(hit).then(setAnalytic);
+        if (isHit(record) && !analytic) {
+            getMatchingAnalytic(record).then(setAnalytic);
         }
-    }, [analytic, getMatchingAnalytic, hit]);
+    }, [analytic, getMatchingAnalytic, record]);
     useEffect(() => {
-        if (hit && !_dossiers) {
-            getMatchingDossiers(hit).then(setDossiers);
+        if (isHit(record) && !_dossiers) {
+            getMatchingDossiers(record).then(setDossiers);
         }
-    }, [_dossiers, getMatchingDossiers, hit]);
+    }, [_dossiers, getMatchingDossiers, record]);
     useEffect(() => {
-        getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
-    }, [getMatchingOverview, hit]);
-    useEffect(() => {
-        if (tab === 'hit_aggregate' && !hit?.howler.is_bundle) {
-            setTab('overview');
+        if (isHit(record)) {
+            getMatchingOverview(record).then(_overview => setHasOverview(!!_overview));
         }
-    }, [hit?.howler.is_bundle, tab]);
+    }, [getMatchingOverview, record]);
     useEffect(() => {
         if (selected && isOpen()) {
             emit({
@@ -122,48 +119,37 @@ const InformationPane = ({ onClose }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hasOverview]);
-    /**
-     * What to show as the header? If loading a skeleton, then it depends on bundle or not. Bundles don't
-     * show anything while normal hits do
-     */
-    const header = useMemo(() => {
-        if (loading && !hit?.howler?.is_bundle) {
-            return _jsx(Skeleton, { variant: "rounded", height: 152 });
-        }
-        else if (!!hit && !hit.howler.is_bundle) {
-            return _jsx(HitBanner, { layout: HitLayout.DENSE, hit: hit });
-        }
-        else {
-            return null;
-        }
-    }, [hit, loading]);
     const tabContent = useMemo(() => {
         if (!tab) {
             return;
         }
+        const defaultContent = {
+            details: () => _jsx(ObjectDetails, { obj: record }),
+            comments: () => _jsx(RecordComments, { record: record, users: users }),
+            raw: () => _jsx(JSONViewer, { data: !loading && record, hideSearch: true, filter: filter }),
+            data: () => (_jsx(JSONViewer, { data: !loading && record?.howler?.data?.map(entry => tryParse(entry)), collapse: false, hideSearch: true, filter: filter })),
+            related: () => _jsx(RecordRelated, { record: record }),
+            worklog: () => _jsx(RecordWorklog, { record: !loading && record, users: users })
+        };
+        if (!isHit(record)) {
+            return defaultContent[tab]?.();
+        }
         return {
-            overview: () => _jsx(HitOverview, { hit: hit }),
-            details: () => _jsx(HitDetails, { hit: hit }),
-            hit_comments: () => _jsx(HitComments, { hit: hit, users: users }),
-            hit_raw: () => _jsx(JSONViewer, { data: !loading && hit, hideSearch: true, filter: filter }),
-            hit_data: () => (_jsx(JSONViewer, { data: !loading && hit?.howler?.data?.map(entry => tryParse(entry)), collapse: false, hideSearch: true, filter: filter })),
-            hit_worklog: () => _jsx(HitWorklog, { hit: !loading && hit, users: users }),
+            ...defaultContent,
+            overview: () => _jsx(HitOverview, { hit: record }),
             hit_aggregate: () => _jsx(HitSummary, {}),
-            hit_related: () => _jsx(HitRelated, { hit: hit }),
-            ...Object.fromEntries((hit?.howler.dossier ?? []).map((lead, index) => [
+            ...Object.fromEntries((record?.howler.dossier ?? []).map((lead, index) => [
                 'lead:' + index,
-                () => _jsx(LeadRenderer, { lead: lead, hit: hit })
+                () => _jsx(LeadRenderer, { lead: lead, hit: record })
             ])),
             ...Object.fromEntries(dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => [
                 `external-lead:${dossierIndex}:${leadIndex}`,
-                () => _jsx(LeadRenderer, { lead: _lead, hit: hit })
+                () => _jsx(LeadRenderer, { lead: _lead, hit: record })
             ])))
         }[tab]?.();
-    }, [dossiers, filter, hit, loading, tab, users]);
+    }, [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, sx: [hit?.howler?.is_bundle && { position: 'absolute', top: 1, right: 0, zIndex: 1100 }], 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('hit.panel.analytic.open'), disabled: !analytic || loading, route: `/analytics/${analytic.analytic_id}`, children: _jsx(QueryStats, {}) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles, disabled: loading }), !!hit && !hit.howler.is_bundle && (_jsx(TuiIconButton, { tooltip: t('hit.panel.open'), href: `/hits/${selected}`, disabled: !hit || loading, size: "small", target: "_blank", children: _jsx(OpenInNew, {}) }))] }), _jsx(Box, { pr: 2, children: header }), !!hit &&
-                        !hit.howler.is_bundle &&
-                        (!loading ? (_jsxs(_Fragment, { children: [_jsx(HitOutline, { hit: hit, layout: HitLayout.DENSE, forceAllFields: true }), _jsx(HitLabels, { hit: hit })] })) : (_jsx(Skeleton, { height: 124 }))), _jsx(HitLinks, { hit: hit, analytic: analytic, dossiers: dossiers }), _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: [_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,
@@ -185,17 +171,18 @@ const InformationPane = ({ onClose }) => {
                                             right: 0
                                         }
                                     }
-                                }, variant: "scrollable", children: [_jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.comments'), children: _jsx(Badge, { sx: {
+                                }, variant: "scrollable", children: [_jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('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') }), 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
-                                    // 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
+                                                }, badgeContent: record?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "comments", onClick: () => setTab('comments') }), isHit(record) && 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') }), isHit(record) &&
+                                        record?.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.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') })] }), ['hit_raw', 'hit_data'].includes(tab) && (_jsx(Phrase, { sx: { mt: 1, pr: 1 }, value: filter, onChange: setFilter, error: hasError, label: t('json.viewer.search.label'), placeholder: t('json.viewer.search.prompt'), endAdornment: _jsx(IconButton, { onClick: () => setFilter(''), children: _jsx(Clear, {}) }) }))] }), _jsx(ErrorBoundary, { children: _jsx(VSBoxContent, { mr: -1, ml: -1, height: "100%", children: _jsx(Stack, { height: "100%", flex: 1, children: tabContent }) }) })] }), !!hit && hit?.howler && (_jsxs(Box, { pr: 2, bgcolor: theme.palette.background.default, position: "relative", children: [_jsx(Divider, { orientation: "horizontal" }), _jsx(HitActions, { hit: hit })] }))] }));
+                                    , { 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: "data", onClick: () => setTab('data'), disabled: !record?.howler?.data }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.json'), children: _jsx(Code, {}) }), value: "raw", onClick: () => setTab('raw') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.worklog'), children: _jsx(History, {}) }), value: "worklog", onClick: () => setTab('worklog') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.related'), children: _jsx(LinkSharp, {}) }), value: "related", onClick: () => setTab('related') })] }), ['raw', 'data'].includes(tab) && (_jsx(Phrase, { sx: { mt: 1, pr: 1 }, value: filter, onChange: setFilter, error: hasError, label: t('json.viewer.search.label'), placeholder: t('json.viewer.search.prompt'), endAdornment: _jsx(IconButton, { onClick: () => setFilter(''), children: _jsx(Clear, {}) }) }))] }), _jsx(ErrorBoundary, { children: _jsx(VSBoxContent, { mr: -1, ml: -1, height: "100%", children: _jsx(Stack, { height: "100%", flex: 1, children: tabContent }) }) })] }), isHit(record) && (_jsxs(Box, { pr: 2, bgcolor: theme.palette.background.default, position: "relative", children: [_jsx(Divider, { orientation: "horizontal" }), _jsx(HitActions, { hit: record })] }))] }));
 };
 export default InformationPane;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDropDown, InfoOutlined, List, Settings, TableChart, ViewComfy, ViewCompact, ViewModule } from '@mui/icons-material';
 import { Checkbox, Divider, FormLabel, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
-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 { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
@@ -10,8 +10,8 @@ import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 const LayoutSettings = () => {
     const { t } = useTranslation();
-    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
-    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
+    const displayType = useContextSelector(RecordSearchContext, ctx => ctx.displayType);
+    const setDisplayType = useContextSelector(RecordSearchContext, ctx => ctx.setDisplayType);
     const [hitLayout, setHitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, false);
     const [templateFieldCount, setTemplateFieldCount] = useMyLocalStorageItem(StorageKey.TEMPLATE_FIELD_COUNT, null);
     return (_jsx(ChipPopper, { icon: _jsx(Tooltip, { title: t('search.layout.settings'), children: _jsx(Settings, {}) }), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, disablePortal: false, slotProps: { chip: { size: 'medium', 'aria-label': t('search.layout.settings') } }, placement: "bottom-end", children: _jsxs(Stack, { spacing: 1, alignItems: "start", children: [_jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "display_type", children: t('page.settings.local.hits.display_type') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.display_type.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", "aria-labelledby": "display_type", children: [_jsx(ToggleButton, { value: "list", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(List, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.list') })] }) }), _jsx(ToggleButton, { value: "grid", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(TableChart, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.grid') })] }) })] }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "layout", children: t('page.settings.local.hits.layout') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.layout.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(ToggleButtonGroup, { exclusive: true, size: "small", value: hitLayout, onChange: (_, value) => setHitLayout(value), "aria-labelledby": "layout", children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "field_count", children: t('page.settings.local.hits.field_count') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.field_count.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignSelf: "stretch", children: [_jsx(Checkbox, { checked: templateFieldCount !== null, onChange: (_, checked) => setTemplateFieldCount(checked ? 3 : null), size: "small" }), _jsx(TextField, { type: "number", size: "small", disabled: templateFieldCount === null, value: templateFieldCount ?? 3, fullWidth: true, onChange: e => {

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

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 import HitFilter from './shared/HitFilter';
 import HitSort from './shared/HitSort';
+import IndexPicker from './shared/IndexPicker';
 import SearchSpan from './shared/SearchSpan';
 import ViewLink from './ViewLink';
 const QuerySettings = ({ boxSx }) => {
@@ -25,6 +26,6 @@ const QuerySettings = ({ boxSx }) => {
         await fetchViews();
         addView('');
     };
-    return (_jsx(Box, { sx: boxSx ?? { position: 'relative', maxWidth: '1200px' }, children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Grid, { container: true, spacing: 1, sx: theme => ({ ml: `${theme.spacing(-1)} !important`, mt: `${theme.spacing(-1)} !important` }), children: [_jsx(Grid, { item: true, children: _jsx(HitSort, {}) }), _jsx(Grid, { item: true, children: _jsx(SearchSpan, {}) }), currentViews?.map((view, id) => (_jsx(Grid, { item: true, children: _jsx(ViewLink, { id: id, viewId: view }) }, view))), filters?.map((filter, id) => (_jsx(Grid, { item: true, children: _jsx(HitFilter, { id: id, value: filter }) }, filter)))] }), _jsx(ChipPopper, { icon: _jsx(Add, {}), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, closeOnClick: true, slotProps: { chip: { size: 'small', color: 'primary' }, paper: { sx: { p: 1 } } }, children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Button, { id: "add-filter", "aria-label": t('hit.search.filter.add'), variant: "outlined", onClick: () => addFilter('howler.assessment:*'), disabled: filters?.some(filter => filter.endsWith('*')), sx: { display: 'flex', pl: 1 }, children: [_jsx(Add, { fontSize: "small", sx: { mr: 1 } }), _jsx("div", { style: { flex: 1 } }), _jsx("span", { children: t('hit.search.filter.add') })] }), _jsxs(Button, { id: "add-view", "aria-label": t('hit.search.view.add'), variant: "outlined", onClick: onAddView, disabled: !allowAddViews, sx: { display: 'flex', pl: 1 }, children: [_jsx(Add, { fontSize: "small", sx: { mr: 1 } }), _jsx("div", { style: { flex: 1 } }), _jsx("span", { children: t('hit.search.view.add') })] })] }) })] }) }));
+    return (_jsx(Box, { sx: boxSx ?? { position: 'relative', maxWidth: '1200px' }, children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Grid, { container: true, spacing: 1, sx: theme => ({ ml: `${theme.spacing(-1)} !important`, mt: `${theme.spacing(-1)} !important` }), children: [_jsx(Grid, { item: true, children: _jsx(IndexPicker, {}) }), _jsx(Grid, { item: true, children: _jsx(HitSort, {}) }), _jsx(Grid, { item: true, children: _jsx(SearchSpan, {}) }), currentViews?.map((view, id) => (_jsx(Grid, { item: true, children: _jsx(ViewLink, { id: id, viewId: view }) }, view))), filters?.map((filter, id) => (_jsx(Grid, { item: true, children: _jsx(HitFilter, { id: id, value: filter }) }, filter)))] }), _jsx(ChipPopper, { icon: _jsx(Add, {}), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, closeOnClick: true, slotProps: { chip: { size: 'small', color: 'primary' }, paper: { sx: { p: 1 } } }, children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Button, { id: "add-filter", "aria-label": t('hit.search.filter.add'), variant: "outlined", onClick: () => addFilter('howler.assessment:*'), disabled: filters?.some(filter => filter.endsWith('*')), sx: { display: 'flex', pl: 1 }, children: [_jsx(Add, { fontSize: "small", sx: { mr: 1 } }), _jsx("div", { style: { flex: 1 } }), _jsx("span", { children: t('hit.search.filter.add') })] }), _jsxs(Button, { id: "add-view", "aria-label": t('hit.search.view.add'), variant: "outlined", onClick: onAddView, disabled: !allowAddViews, sx: { display: 'flex', pl: 1 }, children: [_jsx(Add, { fontSize: "small", sx: { mr: 1 } }), _jsx("div", { style: { flex: 1 } }), _jsx("span", { children: t('hit.search.view.add') })] })] }) })] }) }));
 };
 export default memo(QuerySettings);

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

@@ -16,6 +16,9 @@ vi.mock('./shared/HitSort', () => ({
 vi.mock('./shared/SearchSpan', () => ({
     default: () => _jsx("div", { id: "search-span", children: "SearchSpan" })
 }));
+vi.mock('./shared/IndexPicker', () => ({
+    default: () => _jsx("div", { id: "index-picker", children: "IndexPicker" })
+}));
 vi.mock('./ViewLink', () => ({
     default: ({ id, viewId }) => (_jsxs("div", { id: `view-link-${id}`, "data-view-id": viewId, children: ["ViewLink ", id, ": ", viewId] }))
 }));
@@ -33,6 +36,7 @@ const mockFetchViews = vi.fn();
 let mockParameterContext = {
     filters: [],
     views: [],
+    indexes: [],
     addFilter: mockAddFilter,
     addView: mockAddView
 };
@@ -270,16 +274,16 @@ describe('QuerySettings', () => {
             mockParameterContext.views = ['view-1'];
             const { container } = render(_jsx(QuerySettings, {}), { wrapper: Wrapper });
             const gridItems = container.querySelectorAll('[class*="MuiGrid-item"]');
-            // HitSort + SearchSpan + 1 view + 2 filters = 5 items
-            expect(gridItems.length).toBe(5);
+            // IndexPicker + HitSort + SearchSpan + 1 view + 2 filters = 5 items
+            expect(gridItems.length).toBe(6);
         });
         it('should render correct number of items with multiple views', () => {
             mockParameterContext.filters = ['filter1'];
             mockParameterContext.views = ['view-1', 'view-2', 'view-3'];
             const { container } = render(_jsx(QuerySettings, {}), { wrapper: Wrapper });
             const gridItems = container.querySelectorAll('[class*="MuiGrid-item"]');
-            // HitSort + SearchSpan + 3 views + 1 filter = 6 items
-            expect(gridItems.length).toBe(6);
+            // IndexPicker + HitSort + SearchSpan + 3 views + 1 filter = 6 items
+            expect(gridItems.length).toBe(7);
         });
     });
     describe('Edge Cases', () => {
@@ -508,11 +512,12 @@ describe('QuerySettings', () => {
             mockParameterContext.views = ['view-1'];
             const { container } = render(_jsx(QuerySettings, {}), { wrapper: Wrapper });
             const gridItems = container.querySelectorAll('[class*="MuiGrid-item"]');
-            // Order: HitSort, SearchSpan, ViewLink(s), HitFilter(s)
-            expect(gridItems[0]).toContainElement(screen.getByTestId('hit-sort'));
-            expect(gridItems[1]).toContainElement(screen.getByTestId('search-span'));
-            expect(gridItems[2]).toContainElement(screen.getByTestId('view-link-0'));
-            expect(gridItems[3]).toContainElement(screen.getByTestId('hit-filter-0'));
+            // Order: IndexPicker, HitSort, SearchSpan, ViewLink(s), HitFilter(s)
+            expect(gridItems[0]).toContainElement(screen.getByTestId('index-picker'));
+            expect(gridItems[1]).toContainElement(screen.getByTestId('hit-sort'));
+            expect(gridItems[2]).toContainElement(screen.getByTestId('search-span'));
+            expect(gridItems[3]).toContainElement(screen.getByTestId('view-link-0'));
+            expect(gridItems[4]).toContainElement(screen.getByTestId('hit-filter-0'));
         });
         it('should pass correct props to ViewLink components', () => {
             mockParameterContext.views = ['view-1', 'view-2'];

package/components/routes/hits/search/{HitBrowser.js → RecordBrowser.js}

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeft, Close, ManageSearch } from '@mui/icons-material';
 import { Box, Card, Checkbox, Collapse, Drawer, Fab, IconButton, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import HitSearchProvider, { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import ParameterProvider, { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import RecordSearchProvider, { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexPort';
@@ -32,14 +32,14 @@ const HitBrowser = () => {
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const setOffset = useContextSelector(ParameterContext, ctx => ctx.setOffset);
     const selectedViews = useContextSelector(ParameterContext, ctx => ctx.views);
-    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
-    const addHitToSelection = useContextSelector(HitContext, ctx => ctx.addHitToSelection);
-    const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
-    const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
+    const selectedHits = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
+    const addHitToSelection = useContextSelector(RecordContext, ctx => ctx.addRecordToSelection);
+    const removeHitFromSelection = useContextSelector(RecordContext, ctx => ctx.removeRecordFromSelection);
+    const clearSelectedHits = useContextSelector(RecordContext, ctx => ctx.clearSelectedRecords);
     const searchPaneWidth = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null)[0];
     const forceDrawer = useMyLocalStorageItem(StorageKey.FORCE_DRAWER, false)[0];
-    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
-    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
+    const displayType = useContextSelector(RecordSearchContext, ctx => ctx.displayType);
+    const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
     const location = useLocation();
     const routeParams = useParams();
     const [show, setShow] = useState(!!selected);
@@ -128,6 +128,6 @@ const HitBrowser = () => {
                 }, children: _jsx(ChevronLeft, { sx: { transition: 'rotate 250ms', rotate: show ? '180deg' : '0deg' } }) }))] }));
 };
 const HitBrowserProvider = () => {
-    return (_jsx(ParameterProvider, { children: _jsx(HitSearchProvider, { children: _jsx(HitBrowser, {}) }) }));
+    return (_jsx(ParameterProvider, { children: _jsx(RecordSearchProvider, { children: _jsx(HitBrowser, {}) }) }));
 };
 export default HitBrowserProvider;

package/components/routes/hits/search/{HitQuery.d.ts → RecordQuery.d.ts}

@@ -1,9 +1,9 @@
-export type HitQueryProps = {
+export type RecordQueryProps = {
     triggerSearch: (query: string) => void;
     onChange?: (query: string, isDirty: boolean) => void;
     searching?: boolean;
     disabled?: boolean;
     compact?: boolean;
 };
-declare const _default: import("react").NamedExoticComponent<HitQueryProps>;
+declare const _default: import("react").NamedExoticComponent<RecordQueryProps>;
 export default _default;

package/components/routes/hits/search/{HitQuery.js → RecordQuery.js}

@@ -5,7 +5,7 @@ import { Badge, Box, Card, Skeleton, Tooltip, alpha, useTheme } from '@mui/mater
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import TuiIconButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomIconButton';
 import QueryEditor from '@cccsaurora/howler-ui/components/routes/advanced/QueryEditor';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
@@ -13,8 +13,8 @@ import { useContextSelector } from 'use-context-selector';
 import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
 import { sanitizeMultilineLucene } from '@cccsaurora/howler-ui/utils/stringUtils';
 const DEFAULT_MULTILINE_HEIGHT = 250;
-const PROMPT_CONTEXT = 'isHitQuery && !suggestWidgetVisible && !renameInputVisible && !inSnippetMode && !quickFixWidgetVisible';
-const HitQuery = ({ searching = false, disabled = false, compact = false, triggerSearch, onChange }) => {
+const PROMPT_CONTEXT = 'isRecordQuery && !suggestWidgetVisible && !renameInputVisible && !inSnippetMode && !quickFixWidgetVisible';
+const RecordQuery = ({ searching = false, disabled = false, compact = false, triggerSearch, onChange }) => {
     const { t } = useTranslation();
     const location = useLocation();
     const theme = useTheme();
@@ -22,7 +22,7 @@ const HitQuery = ({ searching = false, disabled = false, compact = false, trigge
     const savedQuery = useContextSelector(ParameterContext, ctx => ctx.query || DEFAULT_QUERY);
     const prevQuery = useRef(null);
     const [query, setQuery] = useState(new URLSearchParams(window.location.search).get('query') || DEFAULT_QUERY);
-    const fzfSearch = useContextSelector(HitSearchContext, ctx => ctx?.fzfSearch ?? false);
+    const fzfSearch = useContextSelector(RecordSearchContext, ctx => ctx?.fzfSearch ?? false);
     const [loaded, setLoaded] = useState(false);
     const [multiline, setMultiline] = useState(false);
     const [y, setY] = useState(0);
@@ -90,7 +90,7 @@ const HitQuery = ({ searching = false, disabled = false, compact = false, trigge
         window.addEventListener('mouseup', onMouseUp);
     }, [onMouseMove, onMouseUp]);
     const onMount = useCallback((ed) => {
-        ed.createContextKey('isHitQuery', true);
+        ed.createContextKey('isRecordQuery', true);
         setLoaded(true);
     }, []);
     const options = useMemo(() => ({
@@ -148,4 +148,4 @@ const HitQuery = ({ searching = false, disabled = false, compact = false, trigge
                     zIndex: 1000
                 }, onMouseDown: onMouseDown }))] }));
 };
-export default memo(HitQuery);
+export default memo(RecordQuery);

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);