@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.272

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

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Assignment, Edit, HowToVote, KeyboardArrowRight, OpenInNew, QueryStats, SettingsSuggest, Terminal } from '@mui/icons-material';
+import { Box, Divider, Fade, ListItemIcon, ListItemText, Menu, MenuItem, MenuList, Paper } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { TOP_ROW, VOTE_OPTIONS } from '@cccsaurora/howler-ui/components/elements/hit/actions/SharedComponents';
+import useHitActions from '@cccsaurora/howler-ui/components/hooks/useHitActions';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMyActionFunctions from '@cccsaurora/howler-ui/components/routes/action/useMyActionFunctions';
+import { capitalize, groupBy } from 'lodash-es';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { Link } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+const ORDER = ['assessment', 'vote', 'action'];
+const ICON_MAP = {
+    assessment: _jsx(Assignment, {}),
+    vote: _jsx(HowToVote, {}),
+    action: _jsx(Edit, {})
+};
+const HitContextMenu = ({ children, getSelectedId, Component = Box }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { executeAction } = useMyActionFunctions();
+    const { config } = useContext(ApiConfigContext);
+    const pluginStore = usePluginStore();
+    const { getMatchingAnalytic } = useMatchers();
+    const [id, setId] = useState(null);
+    const hit = useContextSelector(HitContext, ctx => ctx.hits[id]);
+    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+    const [analytic, setAnalytic] = useState(null);
+    const [anchorEl, setAnchorEl] = useState();
+    const [clickLocation, setClickLocation] = useState([-1, -1]);
+    const [actions, setActions] = useState([]);
+    const [show, setShow] = useState({});
+    const hits = useMemo(() => (selectedHits.some(_hit => _hit.howler.id === hit?.howler.id) ? selectedHits : [hit]), [hit, selectedHits]);
+    const { availableTransitions, canVote, canAssess, assess, vote } = useHitActions(hits);
+    const onContextMenu = useCallback(async (event) => {
+        if (anchorEl) {
+            event.preventDefault();
+            setAnchorEl(null);
+            return;
+        }
+        event.preventDefault();
+        const _id = getSelectedId(event);
+        setId(_id);
+        const clientRect = event.target.getBoundingClientRect();
+        setClickLocation([event.clientX - clientRect.x, event.clientY - clientRect.y]);
+        setAnchorEl(event.target);
+        const _actions = (await dispatchApi(api.search.action.post({ query: 'action_id:*' }), { throwError: false }))
+            ?.items;
+        if (_actions) {
+            setActions(_actions);
+        }
+    }, [anchorEl, dispatchApi, getSelectedId]);
+    const rowStatus = useMemo(() => ({
+        assessment: canAssess,
+        vote: canVote
+    }), [canAssess, canVote]);
+    const pluginActions = howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.actions`, hits));
+    const entries = useMemo(() => {
+        let _actions = [...availableTransitions, ...pluginActions];
+        if (canVote) {
+            _actions = [
+                ..._actions,
+                ...VOTE_OPTIONS.map(option => ({ ...option, actionFunction: () => vote(option.name.toLowerCase()) }))
+            ];
+        }
+        if (config.lookups?.['howler.assessment'] && canAssess) {
+            _actions = [
+                ..._actions,
+                ...config.lookups['howler.assessment']
+                    .filter(_assessment => analytic?.triage_settings?.valid_assessments
+                    ? analytic.triage_settings?.valid_assessments.includes(_assessment)
+                    : true)
+                    .sort((a, b) => +TOP_ROW.includes(b) - +TOP_ROW.includes(a))
+                    .map(assessment => ({
+                    type: 'assessment',
+                    name: assessment,
+                    actionFunction: async () => {
+                        await assess(assessment, analytic?.triage_settings?.skip_rationale);
+                    }
+                }))
+            ];
+        }
+        return Object.entries(groupBy(_actions, 'type')).sort(([a], [b]) => ORDER.indexOf(a) - ORDER.indexOf(b));
+    }, [analytic, assess, availableTransitions, canAssess, canVote, config.lookups, vote, pluginActions]);
+    useEffect(() => {
+        if (!hit?.howler.analytic) {
+            return;
+        }
+        getMatchingAnalytic(hit).then(setAnalytic);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hit?.howler.analytic]);
+    useEffect(() => {
+        if (!anchorEl) {
+            setClickLocation([-1, -1]);
+            setShow({});
+            setAnalytic(null);
+        }
+    }, [anchorEl]);
+    return (_jsxs(Component, { id: "contextMenu", onContextMenu: onContextMenu, children: [children, _jsxs(Menu, { id: "hit-menu", open: !!anchorEl, anchorEl: anchorEl, onClose: () => setAnchorEl(null), slotProps: {
+                    paper: {
+                        sx: {
+                            transform: `translate(${clickLocation[0]}px, ${clickLocation[1]}px) !important`,
+                            overflow: 'visible !important'
+                        }
+                    }
+                }, MenuListProps: { dense: true, sx: { minWidth: '250px' } }, anchorOrigin: { vertical: 'top', horizontal: 'left' }, onClick: () => setAnchorEl(null), children: [_jsxs(MenuItem, { component: Link, to: `/hits/${hit?.howler.id}`, disabled: !hit, children: [_jsx(ListItemIcon, { children: _jsx(OpenInNew, {}) }), _jsx(ListItemText, { children: t('hit.panel.open') })] }), _jsxs(MenuItem, { component: Link, to: `/analytics/${analytic?.analytic_id}`, disabled: !analytic, children: [_jsx(ListItemIcon, { children: _jsx(QueryStats, {}) }), _jsx(ListItemText, { children: t('hit.panel.analytic.open') })] }), _jsx(Divider, {}), entries.map(([type, items]) => (_jsxs(MenuItem, { sx: { position: 'relative' }, onMouseEnter: () => setShow(_show => ({ ..._show, [type]: true })), onMouseLeave: () => setShow(_show => ({ ..._show, [type]: false })), disabled: rowStatus[type] === false, children: [_jsx(ListItemIcon, { children: ICON_MAP[type] ?? _jsx(Terminal, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t(`hit.details.actions.${type}`) }), rowStatus[type] !== false && (_jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } })), _jsx(Fade, { in: show[type], unmountOnExit: true, children: _jsx(Paper, { sx: { position: 'absolute', top: 0, left: '100%', maxHeight: '300px', overflow: 'auto' }, elevation: 8, children: _jsx(MenuList, { sx: { p: 0, borderTopLeftRadius: 0 }, dense: true, children: items.map(a => (_jsx(MenuItem, { value: a.name, onClick: a.actionFunction, children: a.i18nKey ? t(a.i18nKey) : capitalize(a.name) }, a.name))) }) }) })] }, type))), _jsxs(MenuItem, { sx: { position: 'relative' }, onMouseEnter: () => setShow(_show => ({ ..._show, actions: true })), onMouseLeave: () => setShow(_show => ({ ..._show, actions: false })), disabled: actions.length < 1, children: [_jsx(ListItemIcon, { children: _jsx(SettingsSuggest, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t('route.actions.change') }), actions.length > 0 && _jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } }), _jsx(Fade, { in: show.actions, unmountOnExit: true, children: _jsx(Paper, { sx: { position: 'absolute', top: 0, left: '100%', maxHeight: '300px', overflow: 'auto' }, elevation: 8, children: _jsx(MenuList, { sx: { p: 0 }, dense: true, children: actions.map(action => (_jsx(MenuItem, { onClick: () => executeAction(action.action_id, `howler.id:${hit?.howler.id}`), children: _jsx(ListItemText, { children: action.name }) }, action.action_id))) }) }) })] })] })] }));
+};
+export default HitContextMenu;

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

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

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

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMonaco } from '@monaco-editor/react';
+import { Clear, Height, History, Search } from '@mui/icons-material';
+import { Badge, Box, Card, Skeleton, Tooltip, alpha, useTheme } from '@mui/material';
+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 { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+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 { t } = useTranslation();
+    const location = useLocation();
+    const theme = useTheme();
+    const monaco = useMonaco();
+    const savedQuery = useContextSelector(ParameterContext, ctx => ctx.query || 'howler.id:*');
+    const prevQuery = useRef(null);
+    const [query, setQuery] = useState(new URLSearchParams(window.location.search).get('query') || 'howler.id:*');
+    const fzfSearch = useContextSelector(HitSearchContext, ctx => ctx?.fzfSearch ?? false);
+    const [loaded, setLoaded] = useState(false);
+    const [multiline, setMultiline] = useState(false);
+    const [y, setY] = useState(0);
+    const wrapper = useRef();
+    const search = useCallback(() => triggerSearch(sanitizeMultilineLucene(query)), [query, triggerSearch]);
+    const isDirty = useMemo(() => query !== savedQuery, [query, savedQuery]);
+    useEffect(() => {
+        onChange?.(query, isDirty);
+    }, [isDirty, onChange, query]);
+    useEffect(() => {
+        if (!monaco) {
+            return;
+        }
+        const executeDisposable = monaco.editor.addEditorAction({
+            id: 'execute-query',
+            label: t('route.advanced.execute.query'),
+            contextMenuGroupId: 'howler',
+            keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
+            run: search
+        });
+        return () => {
+            executeDisposable.dispose();
+        };
+    }, [monaco, t, search]);
+    useEffect(() => {
+        if (!monaco) {
+            return;
+        }
+        let disposable;
+        if (!multiline) {
+            disposable = monaco.editor.addKeybindingRule({
+                command: 'execute-query',
+                keybinding: monaco.KeyCode.Enter,
+                when: PROMPT_CONTEXT
+            });
+        }
+        else {
+            disposable = monaco.editor.addKeybindingRule({
+                command: null,
+                keybinding: monaco.KeyCode.Enter,
+                when: PROMPT_CONTEXT
+            });
+        }
+        return () => {
+            disposable.dispose();
+        };
+    }, [monaco, multiline, search]);
+    const onMouseMove = useCallback((event) => {
+        const wrapperRect = wrapper.current?.getBoundingClientRect();
+        const offset = event.clientY - (wrapperRect.top + DEFAULT_MULTILINE_HEIGHT);
+        setY(offset);
+    }, []);
+    useEffect(() => {
+        if (savedQuery && savedQuery !== prevQuery.current) {
+            prevQuery.current = savedQuery;
+            setQuery(prevQuery.current);
+        }
+    }, [savedQuery]);
+    const onMouseUp = useCallback(() => {
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    }, [onMouseMove]);
+    const onMouseDown = useCallback(() => {
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    }, [onMouseMove, onMouseUp]);
+    const onMount = useCallback((ed) => {
+        ed.createContextKey('isHitQuery', true);
+        setLoaded(true);
+    }, []);
+    const options = useMemo(() => ({
+        fontSize: 17,
+        lineHeight: 19,
+        lineNumbers: multiline ? 'on' : 'off',
+        lineDecorationsWidth: multiline ? 8 : 0,
+        lineNumbersMinChars: multiline ? 2 : 0,
+        showFoldingControls: 'never',
+        scrollBeyondLastLine: !multiline,
+        glyphMargin: !multiline,
+        renderLineHighlight: multiline ? 'gutter' : 'none',
+        overviewRulerLanes: multiline ? 1 : 0
+    }), [multiline]);
+    const preppedQuery = useMemo(() => (multiline ? query : query.replaceAll('\n', ' ')), [multiline, query]);
+    return (_jsxs(Card, { ref: wrapper, variant: "outlined", sx: [
+            {
+                width: '100%',
+                height: multiline ? `${DEFAULT_MULTILINE_HEIGHT + y}px` : theme.spacing(7),
+                p: 1,
+                position: 'relative',
+                overflow: 'visible',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                '& .monaco-editor': {
+                    position: 'absolute !important'
+                },
+                transition: theme.transitions.create('border-color')
+            },
+            isDirty &&
+                new URLSearchParams(location.search).has('query') && {
+                borderColor: 'warning.main'
+            },
+            compact && {
+                p: 0.5,
+                height: multiline ? `${DEFAULT_MULTILINE_HEIGHT + y}px` : theme.spacing(5)
+            }
+        ], onKeyDown: e => e.stopPropagation(), children: [_jsx(TuiIconButton, { disabled: query.includes('\n#') || disabled, sx: { mr: 1, alignSelf: 'start' }, onClick: () => setMultiline(!multiline), color: multiline ? 'primary' : theme.palette.text.primary, transparent: !multiline, size: compact ? 'small' : 'medium', children: _jsx(Height, { sx: { fontSize: '20px' } }) }), _jsx(QueryEditor, { query: preppedQuery, setQuery: setQuery, language: "lucene", height: multiline ? `${DEFAULT_MULTILINE_HEIGHT - 30}px` : '20px', onMount: onMount, editorOptions: options }), fzfSearch && (_jsx(Tooltip, { title: t('route.history'), children: _jsx(History, {}) })), _jsx(TuiIconButton, { disabled: searching || disabled, onClick: () => setQuery('howler.id:*'), sx: { ml: 1, alignSelf: 'start', flexShrink: 0 }, size: compact ? 'small' : 'medium', children: _jsx(Tooltip, { title: t('route.clear'), children: _jsx(Clear, { sx: { fontSize: '20px' } }) }) }), _jsx(TuiIconButton, { disabled: searching || disabled, onClick: search, sx: { ml: 1, alignSelf: 'start', flexShrink: 0 }, size: compact ? 'small' : 'medium', children: _jsx(Tooltip, { title: t('route.search'), children: _jsx(Badge, { invisible: !isDirty, color: "warning", variant: "dot", children: _jsx(Search, { sx: { fontSize: '20px' } }) }) }) }), !loaded && (_jsx(Skeleton, { variant: "rectangular", sx: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, height: "100%" })), multiline && (_jsx(Box, { sx: {
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    height: '10px',
+                    backgroundColor: theme.palette.divider,
+                    cursor: 'row-resize',
+                    zIndex: 1000
+                }, onMouseDown: onMouseDown })), disabled && (_jsx(Box, { sx: {
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    top: 0,
+                    backgroundColor: alpha(theme.palette.background.paper, 0.65),
+                    zIndex: 1000
+                }, onMouseDown: onMouseDown }))] }));
+};
+export default memo(HitQuery);

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

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

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

@@ -0,0 +1,204 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Clear, Code, Comment, DataObject, History, LinkSharp, OpenInNew, QueryStats } from '@mui/icons-material';
+import { Badge, Box, Divider, IconButton, Skeleton, Stack, Tab, Tabs, Tooltip, useTheme } from '@mui/material';
+import TuiIconButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomIconButton';
+import { Icon } from '@iconify/react/dist/iconify.js';
+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 { 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 HitNotebooks from '@cccsaurora/howler-ui/components/elements/hit/HitNotebooks';
+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 PivotLink from '@cccsaurora/howler-ui/components/elements/hit/related/PivotLink';
+import RelatedLink from '@cccsaurora/howler-ui/components/elements/hit/related/RelatedLink';
+import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
+import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
+import { uniqBy } from 'lodash-es';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { useLocation } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { getUserList } from '@cccsaurora/howler-ui/utils/hitFunctions';
+import { validateRegex } from '@cccsaurora/howler-ui/utils/stringUtils';
+import { tryParse } from '@cccsaurora/howler-ui/utils/utils';
+import LeadRenderer from '../view/LeadRenderer';
+const InformationPane = ({ onClose }) => {
+    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 pluginStore = usePluginStore();
+    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
+    const [userIds, setUserIds] = useState(new Set());
+    const [analytic, setAnalytic] = useState();
+    const [hasOverview, setHasOverview] = useState(false);
+    const [tab, setTab] = useState('overview');
+    const [loading, setLoading] = useState(false);
+    const [filter, setFilter] = useState('');
+    // In order to properly check for dossiers, we split dossiers into two
+    const [_dossiers, setDossiers] = useState(null);
+    const dossiers = useMemo(() => _dossiers ?? [], [_dossiers]);
+    const users = useMyUserList(userIds);
+    const hit = useContextSelector(HitContext, ctx => ctx.hits[selected]);
+    howlerPluginStore.plugins.forEach(plugin => {
+        pluginStore.executeFunction(`${plugin}.on`, 'viewing');
+    });
+    useEffect(() => {
+        if (!selected) {
+            return;
+        }
+        if (!hit?.howler.data) {
+            setLoading(true);
+            getHit(selected, true).finally(() => setLoading(false));
+            return;
+        }
+        setUserIds(getUserList(hit));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getHit, selected]);
+    useEffect(() => {
+        if (hit && !analytic) {
+            getMatchingAnalytic(hit).then(setAnalytic);
+        }
+    }, [analytic, getMatchingAnalytic, hit]);
+    useEffect(() => {
+        if (hit && !_dossiers) {
+            getMatchingDossiers(hit).then(setDossiers);
+        }
+    }, [_dossiers, getMatchingDossiers, hit]);
+    useEffect(() => {
+        getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
+    }, [getMatchingOverview, hit]);
+    useEffect(() => {
+        if (tab === 'hit_aggregate' && !hit?.howler.is_bundle) {
+            setTab('overview');
+        }
+    }, [hit?.howler.is_bundle, tab]);
+    useEffect(() => {
+        if (selected && isOpen()) {
+            emit({
+                broadcast: false,
+                action: 'viewing',
+                id: selected
+            });
+            return () => emit({
+                broadcast: false,
+                action: 'stop_viewing',
+                id: selected
+            });
+        }
+    }, [emit, selected, isOpen]);
+    useEffect(() => {
+        if (hasOverview && tab === 'details') {
+            setTab('overview');
+        }
+        else if (!hasOverview && tab === 'overview') {
+            setTab('details');
+        }
+        // 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;
+        }
+        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 }),
+            hit_aggregate: () => _jsx(HitSummary, { query: `howler.bundles:(${hit?.howler?.id})` }),
+            hit_related: () => _jsx(HitRelated, { hit: 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}`,
+                () => _jsx(LeadRenderer, { lead: _lead, hit: hit })
+            ])))
+        }[tab]?.();
+    }, [dossiers, filter, hit, 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 }), _jsx(HitLabels, { hit: hit })] })) : (_jsx(Skeleton, { height: 124 }))), (hit?.howler?.links?.length > 0 ||
+                        analytic?.notebooks?.length > 0 ||
+                        dossiers.filter(_dossier => _dossier.pivots?.length > 0).length > 0) && (_jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [analytic?.notebooks?.length > 0 && _jsx(HitNotebooks, { analytic: analytic, hit: hit }), hit?.howler?.links?.length > 0 &&
+                                uniqBy(hit.howler.links, 'href')
+                                    .slice(0, 3)
+                                    .map(l => _jsx(RelatedLink, { compact: true, ...l }, l.href)), dossiers.flatMap(_dossier => (_dossier.pivots ?? []).map((_pivot, index) => (
+                            // eslint-disable-next-line react/no-array-index-key
+                            _jsx(PivotLink, { pivot: _pivot, hit: hit, compact: true }, _dossier.dossier_id + index))))] })), _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,
+                                    alignItems: 'center',
+                                    position: 'relative',
+                                    '& > .MuiTabScrollButton-root': {
+                                        position: 'absolute',
+                                        top: 0,
+                                        bottom: 0,
+                                        zIndex: 5,
+                                        backgroundColor: theme.palette.background.paper,
+                                        '&:not(.Mui-disabled)': {
+                                            opacity: 1
+                                        },
+                                        '&:first-of-type': {
+                                            left: 0
+                                        },
+                                        '&:last-of-type': {
+                                            right: 0
+                                        }
+                                    }
+                                }, variant: "scrollable", children: [_jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.comments'), children: _jsx(Badge, { sx: {
+                                                    '& > .MuiBadge-badge': {
+                                                        backgroundColor: theme.palette.divider,
+                                                        zIndex: 1,
+                                                        right: theme.spacing(-0.5)
+                                                    },
+                                                    '& > svg': { zIndex: 2 }
+                                                }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), 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
+                                    // 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 })] }))] }));
+};
+export default InformationPane;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.NamedExoticComponent<{}>;
+export default _default;

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

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Close, ErrorOutline, List, SavedSearch, TableChart, Terminal } from '@mui/icons-material';
+import { Box, IconButton, LinearProgress, Stack, ToggleButton, ToggleButtonGroup, 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 { 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';
+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 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 { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import React, { memo, useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useLocation, useNavigate, useParams } 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 ViewLink from './ViewLink';
+import QuerySettings from './shared/QuerySettings';
+const Item = memo(({ hit, onClick }) => {
+    const theme = useTheme();
+    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+    const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
+    const layout = useContextSelector(HitSearchContext, ctx => ctx.layout);
+    const checkMiddleClick = useCallback((e, id) => {
+        if (e.button === 1) {
+            window.open(`${window.origin}/hits/${id}`, '_blank');
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }, []);
+    // 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: [
+            {
+                mb: 2,
+                cursor: 'pointer',
+                '& span,p,h6': {
+                    cursor: 'text'
+                },
+                '& .MuiPaper-root': {
+                    border: '4px solid transparent',
+                    boxShadow: `0px 0px 0px 0px transparent`,
+                    transition: theme.transitions.create(['border-color', 'box-shadow'])
+                },
+                '& .MuiCardContent-root': {
+                    p: 1,
+                    pb: 1
+                },
+                '& .MuiCardContent-root:last-child': {
+                    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]}` }
+            },
+            selected === hit.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 }) }));
+});
+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 displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
+    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
+    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 viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
+    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 searchPaneWidth = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null)[0];
+    const verticalSorters = useMediaQuery('(max-width: 1919px)') || (searchPaneWidth ?? Number.MAX_SAFE_INTEGER) < 900;
+    const selectedView = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
+    const getSelectedId = useCallback((event) => {
+        const target = event.target;
+        const selectedElement = target.closest('[id]');
+        if (!selectedElement) {
+            return;
+        }
+        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: [_jsx(ViewLink, {}), 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, {}) }) }), _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(VSBoxHeader, { ml: -3, mr: -3, px: 2, pb: 1, sx: { zIndex: 999 }, children: [_jsxs(Stack, { sx: { pt: 1 }, children: [_jsxs(Stack, { sx: { position: 'relative', flex: 1 }, children: [_jsx(HitQuery, { disabled: viewId && !selectedView, 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))) }) })] }) }) }));
+};
+export default memo(SearchPane);