@cccsaurora/howler-ui 2.16.0-dev.376 → 2.16.0-dev.380

package/components/elements/hit/HitSummary.js

@@ -14,23 +14,22 @@ import { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import { convertCustomDateRangeToLucene, convertDateToLucene, getTimeRange } from '@cccsaurora/howler-ui/utils/utils';
+import { getTimeRange } from '@cccsaurora/howler-ui/utils/utils';
 import PluginChip from '../PluginChip';
 import HitGraph from './aggregate/HitGraph';
-const HitSummary = ({ query, response, onStart, onComplete }) => {
+const HitSummary = ({ response, onStart, onComplete }) => {
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
     const { hitFields } = useContext(FieldContext);
     const { showErrorMessage } = useMySnackbar();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const { getMatchingTemplate } = useMatchers();
-    const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
-    const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
     const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
     const error = useContextSelector(HitSearchContext, ctx => ctx.error);
-    const span = useContextSelector(ParameterContext, ctx => ctx.span);
-    const startDate = useContextSelector(ParameterContext, ctx => ctx.startDate);
-    const endDate = useContextSelector(ParameterContext, ctx => ctx.endDate);
+    const getFilters = useContextSelector(HitSearchContext, ctx => ctx.getFilters);
+    const query = useContextSelector(ParameterContext, ctx => ctx.query);
+    const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
+    const views = useContextSelector(ParameterContext, ctx => ctx.views);
     const [loading, setLoading] = useState(false);
     const [customKeys, setCustomKeys] = useState([]);
     const [keyCounts, setKeyCounts] = useState({});
@@ -39,13 +38,6 @@ const HitSummary = ({ query, response, onStart, onComplete }) => {
         if (onStart) {
             onStart();
         }
-        const filters = [];
-        if (span && !span.endsWith('custom')) {
-            filters.push(`event.created:${convertDateToLucene(span)}`);
-        }
-        else if (startDate && endDate) {
-            filters.push(`event.created:${convertCustomDateRangeToLucene(startDate, endDate)}`);
-        }
         try {
             // Get a list of every key in every template of the hits we're searching
             const rawCounts = await Promise.all((response?.items ?? []).map(async (h) => {
@@ -91,7 +83,7 @@ const HitSummary = ({ query, response, onStart, onComplete }) => {
                     fields: sortedKeys,
                     query,
                     rows: pageCount,
-                    filters
+                    filters: await getFilters()
                 }), {
                     throwError: false,
                     logError: true,
@@ -118,7 +110,7 @@ const HitSummary = ({ query, response, onStart, onComplete }) => {
     }, [
         customKeys,
         dispatchApi,
-        endDate,
+        getFilters,
         getMatchingTemplate,
         onComplete,
         onStart,
@@ -126,21 +118,19 @@ const HitSummary = ({ query, response, onStart, onComplete }) => {
         query,
         response?.items,
         showErrorMessage,
-        span,
-        startDate,
         t
     ]);
     const setSearch = useCallback((key, value) => {
         setQuery(`${key}:${value}`);
     }, [setQuery]);
     useEffect(() => {
-        if ((!query && !viewId) || searching || error) {
+        if ((!query && views?.length < 1) || searching || error) {
             return;
         }
         performAggregation();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [query, viewId, searching, error]);
-    return (_jsxs(Stack, { sx: { mx: 2, height: '100%' }, spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('hit.summary.aggregate.title') }), _jsx(Divider, { flexItem: true }), _jsx(HitGraph, { query: query }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { sx: { overflow: 'auto', marginTop: '0 !important' }, pt: 1, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(Autocomplete, { fullWidth: true, multiple: true, sx: { minWidth: '175px' }, size: "small", value: customKeys, options: hitFields.map(_field => _field.key), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.summary.adhoc') }), onChange: (_, value) => setCustomKeys(value) }), _jsx(Button, { variant: "outlined", startIcon: loading ? _jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : _jsx(Analytics, { sx: { ml: 1 } }), disabled: loading, onClick: () => performAggregation(), children: t('button.aggregate') })] }), isEmpty(aggregateResults) && (_jsxs(Alert, { severity: "info", variant: "outlined", children: [_jsx(AlertTitle, { children: t('hit.summary.aggregate.nokeys.title') }), t('hit.summary.aggregate.nokeys.description')] })), loading && _jsx(LinearProgress, { sx: { minHeight: '4px' } }), Object.keys(aggregateResults)
+    }, [query, views, searching, error]);
+    return (_jsxs(Stack, { sx: { mx: 2, height: '100%' }, spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('hit.summary.aggregate.title') }), _jsx(Divider, { flexItem: true }), _jsx(HitGraph, {}), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { sx: { overflow: 'auto', marginTop: '0 !important' }, pt: 1, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(Autocomplete, { fullWidth: true, multiple: true, sx: { minWidth: '175px' }, size: "small", value: customKeys, options: hitFields.map(_field => _field.key), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.summary.adhoc') }), onChange: (_, value) => setCustomKeys(value) }), _jsx(Button, { variant: "outlined", startIcon: loading ? _jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : _jsx(Analytics, { sx: { ml: 1 } }), disabled: loading, onClick: () => performAggregation(), children: t('button.aggregate') })] }), isEmpty(aggregateResults) && (_jsxs(Alert, { severity: "info", variant: "outlined", children: [_jsx(AlertTitle, { children: t('hit.summary.aggregate.nokeys.title') }), t('hit.summary.aggregate.nokeys.description')] })), loading && _jsx(LinearProgress, { sx: { minHeight: '4px' } }), Object.keys(aggregateResults)
                         .filter(key => !isEmpty(aggregateResults[key]))
                         .flatMap(key => [
                         _jsx(Fade, { in: true, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { variant: "body1", children: key }, key + '-title'), keyCounts[key]?.count < 0 ? (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", t('hit.summary.adhoc.custom'), ")"] })) : (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", keyCounts[key]?.count ?? '?', " ", t('references'), ")"] })), _jsx(Tooltip, { title: _jsxs(Stack, { children: [_jsx(Typography, { variant: "caption", children: t('hit.summary.aggregate.sources') }), keyCounts[key]?.sources.map(source => (_jsx(Typography, { variant: "caption", children: source }, source))) ?? '?'] }), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }) }, key + '-refs'),

package/components/elements/hit/aggregate/HitGraph.d.ts

@@ -1,6 +1,4 @@
 import 'chartjs-adapter-dayjs-4';
 import type { FC } from 'react';
-declare const HitGraph: FC<{
-    query: string;
-}>;
+declare const HitGraph: FC;
 export default HitGraph;

package/components/elements/hit/aggregate/HitGraph.js

@@ -16,7 +16,7 @@ import { Scatter } from 'react-chartjs-2';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
-import { convertCustomDateRangeToLucene, convertDateToLucene, stringToColor } from '@cccsaurora/howler-ui/utils/utils';
+import { stringToColor } from '@cccsaurora/howler-ui/utils/utils';
 const MAX_ROWS = 2500;
 const OVERRIDE_ROWS = 10000;
 const MAX_QUERY_SIZE = 50000;
@@ -27,23 +27,23 @@ const FILTER_FIELDS = [
     'howler.assessment',
     'howler.detection'
 ];
-const HitGraph = ({ query }) => {
+const HitGraph = () => {
     const { t } = useTranslation();
     const theme = useTheme();
     const { dispatchApi } = useMyApi();
     const { scatter } = useMyChart();
     const { config } = useContext(ApiConfigContext);
     const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
+    const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const span = useContextSelector(ParameterContext, ctx => ctx.span);
-    const startDate = useContextSelector(ParameterContext, ctx => ctx.startDate);
-    const endDate = useContextSelector(ParameterContext, ctx => ctx.endDate);
+    const views = 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 viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
     const error = useContextSelector(HitSearchContext, ctx => ctx.error);
     const response = useContextSelector(HitSearchContext, ctx => ctx.response);
+    const getFilters = useContextSelector(HitSearchContext, ctx => ctx.getFilters);
     const chartRef = useRef();
     const [loading, setLoading] = useState(false);
     const [filterField, setFilterField] = useState(FILTER_FIELDS[0]);
@@ -57,13 +57,7 @@ const HitGraph = ({ query }) => {
         setLoading(true);
         setSearchTotal(0);
         try {
-            const filters = [];
-            if (span && !span.endsWith('custom')) {
-                filters.push(`event.created:${convertDateToLucene(span)}`);
-            }
-            else if (startDate && endDate) {
-                filters.push(`event.created:${convertCustomDateRangeToLucene(startDate, endDate)}`);
-            }
+            const filters = await getFilters();
             if (escalationFilter) {
                 filters.push(`howler.escalation:${escalationFilter}`);
             }
@@ -113,14 +107,14 @@ const HitGraph = ({ query }) => {
         finally {
             setLoading(false);
         }
-    }, [dispatchApi, endDate, escalationFilter, filterField, override, query, span, startDate]);
+    }, [dispatchApi, escalationFilter, filterField, getFilters, override, query]);
     useEffect(() => {
-        if ((!query && !viewId) || error || !response) {
+        if ((!query && views?.length < 1) || error || !response) {
             return;
         }
         performQuery();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [query, viewId, error, span, response]);
+    }, [query, views, error, span, response, escalationFilter, filterField]);
     const options = useMemo(() => {
         const parentOptions = scatter('hit.summary.title', 'hit.summary.subtitle');
         return {

package/components/routes/dossiers/DossierCard.test.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable react/jsx-no-literals */
-/* eslint-disable import/imports-first */
 /// <reference types="vitest" />
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent, {} from '@testing-library/user-event';

package/components/routes/dossiers/DossierEditor.test.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable import/imports-first */
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import omit from 'lodash-es/omit';
+import { act } from 'react';
+import { setupContextSelectorMock, setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
 import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
 // Mock the API
 const mockApiSearchHitPost = vi.fn();
@@ -23,28 +24,8 @@ vi.mock('api', () => ({
         }
     }
 }));
-// Mock react-router-dom
-vi.mock('react-router-dom', async () => {
-    const actual = await vi.importActual('react-router-dom');
-    return {
-        ...actual,
-        useParams: vi.fn(),
-        useSearchParams: vi.fn(() => [new URLSearchParams(), () => { }]),
-        useNavigate: () => vi.fn()
-    };
-});
-// Mock ParameterContext
-const mockSetQuery = vi.fn();
-vi.mock('use-context-selector', async () => {
-    const actual = await vi.importActual('use-context-selector');
-    return {
-        ...actual,
-        useContextSelector: (_context, selector) => {
-            const mockContext = { setQuery: mockSetQuery };
-            return selector(mockContext);
-        }
-    };
-});
+setupReactRouterMock();
+setupContextSelectorMock();
 vi.mock('components/elements/ThemedEditor', () => ({
     default: ({ value, onChange, id }) => {
         return (_jsx("input", { id: id || 'themed-editor', value: value, onChange: e => {
@@ -92,6 +73,7 @@ vi.mock('../hits/search/HitQuery', () => ({
     }
 }));
 import ApiConfigProvider from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
@@ -100,6 +82,11 @@ const mockUseParams = vi.mocked(useParams);
 const mockUseSearchParams = vi.mocked(useSearchParams);
 // eslint-disable-next-line react-hooks/rules-of-hooks
 const mockNavigate = vi.mocked(useNavigate());
+// Mock ParameterContext
+const mockSetQuery = vi.fn();
+let mockParameterContext = {
+    setQuery: mockSetQuery
+};
 // Mock data
 const mockDossier = {
     dossier_id: 'test-dossier-1',
@@ -132,7 +119,7 @@ const Wrapper = ({ children }) => {
                 configuration: {},
                 c12nDef: {},
                 mapping: {}
-            }, children: children }) }));
+            }, children: _jsx(ParameterContext.Provider, { value: mockParameterContext, children: children }) }) }));
 };
 describe('DossierEditor', () => {
     beforeEach(() => {
@@ -142,6 +129,8 @@ describe('DossierEditor', () => {
         mockApiDossierPut.mockClear();
         mockNavigate.mockClear();
         mockSetQuery.mockClear();
+        // Reset mock context
+        mockParameterContext.setQuery = mockSetQuery;
         // Default mock implementations
         mockApiSearchHitPost.mockResolvedValue({ total: 42, items: [] });
     });
@@ -294,17 +283,22 @@ describe('DossierEditor', () => {
                 expect(saveButton).toBeDisabled();
             });
             it('should enable save button when all required fields are filled', async () => {
-                const user = userEvent.setup();
                 mockUseParams.mockReturnValue({ id: null });
+                const searchParams = new URLSearchParams('tab=leads');
+                const mockSetSearchParams = vi.fn();
+                mockUseSearchParams.mockReturnValue([searchParams, mockSetSearchParams]);
+                const user = userEvent.setup();
                 render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
-                // Fill title
-                const titleInput = screen.getByTestId('dossier-title');
-                await user.type(titleInput, 'Test Title');
-                // Add query and trigger search
-                const queryInput = screen.getByTestId('query-input');
-                await user.click(queryInput);
-                await user.keyboard('test query');
-                await user.keyboard('{Enter}');
+                await act(async () => {
+                    // Fill title
+                    const titleInput = screen.getByTestId('dossier-title');
+                    await user.type(titleInput, 'Test Title');
+                    // Add query and trigger search
+                    const queryInput = screen.getByTestId('query-input');
+                    await user.click(queryInput);
+                    await user.keyboard('test query');
+                    await user.keyboard('{Enter}');
+                });
                 await waitFor(() => {
                     expect(screen.getByTestId('query-result-text')).toBeInTheDocument();
                     expect(screen.getByTestId('create-lead-alert')).toBeInTheDocument();

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

@@ -10,13 +10,12 @@ import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/Fl
 import HitSummary from '@cccsaurora/howler-ui/components/elements/hit/HitSummary';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
-import dayjs from 'dayjs';
-import { has, isNull } from 'lodash-es';
+import { isNull } from 'lodash-es';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useLocation, useParams, useSearchParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
-import { DEFAULT_QUERY, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import InformationPane from './InformationPane';
 import SearchPane from './SearchPane';
 import HitGrid from './grid/HitGrid';
@@ -27,13 +26,12 @@ const Wrapper = memo(({ show, showDrawer, children, onClose }) => {
 const HitBrowser = () => {
     const { t } = useTranslation();
     const theme = useTheme();
-    const views = useContextSelector(ViewContext, ctx => ctx.views);
     const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
-    const query = useContextSelector(ParameterContext, ctx => ctx.query);
     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);
@@ -41,29 +39,12 @@ const HitBrowser = () => {
     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 viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
     const response = useContextSelector(HitSearchContext, ctx => ctx.response);
-    const queryHistory = useContextSelector(HitSearchContext, ctx => ctx?.queryHistory ?? {});
-    const setQueryHistory = useContextSelector(HitSearchContext, ctx => ctx?.setQueryHistory);
-    const setQueryList = useMyLocalStorageItem(StorageKey.QUERY_HISTORY, '')[1];
     const location = useLocation();
     const routeParams = useParams();
-    const [searchParams] = useSearchParams();
     const [show, setShow] = useState(!!selected);
     useEffect(() => setShow(!!selected), [selected]);
     const showDrawer = useMediaQuery(theme.breakpoints.down(1600)) || forceDrawer || displayType === 'grid';
-    // State that makes up the request
-    const summaryQuery = useMemo(() => {
-        const bundle = location.pathname.startsWith('/bundles') && routeParams.id;
-        let _fullQuery = query;
-        if (bundle) {
-            _fullQuery = `(howler.bundles:${bundle}) AND (${_fullQuery})`;
-        }
-        else if (viewId) {
-            _fullQuery = `(${views[viewId]?.query || DEFAULT_QUERY}) AND (${_fullQuery})`;
-        }
-        return _fullQuery;
-    }, [location.pathname, query, routeParams.id, views, viewId]);
     const showSelectBar = useMemo(() => {
         if (selectedHits.length > 1) {
             return true;
@@ -74,31 +55,9 @@ const HitBrowser = () => {
         return false;
     }, [selected, selectedHits]);
     useEffect(() => {
-        const newQuery = searchParams.get('query');
-        if (newQuery) {
-            setQueryHistory(_queryHistory => ({
-                ..._queryHistory,
-                [newQuery]: new Date().toISOString()
-            }));
-        }
-    }, [searchParams, setQueryHistory]);
-    useEffect(() => {
-        setQueryList(JSON.stringify(queryHistory));
-    }, [queryHistory, setQueryList]);
-    useEffect(() => {
-        // On load check to filter out any queries older than one month
-        setQueryHistory(_queryHistory => {
-            const filterQueryTime = dayjs().subtract(1, 'month').toISOString();
-            return Object.fromEntries(Object.entries(_queryHistory).filter(([_, value]) => value > filterQueryTime));
-        });
-    }, [setQueryHistory]);
-    useEffect(() => {
-        if (!location.pathname.startsWith('/views') || !viewId || has(views, viewId)) {
-            return;
-        }
-        fetchViews([viewId]);
+        fetchViews(selectedViews);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [location.pathname, viewId]);
+    }, [location.pathname, location.search]);
     const onClose = useCallback(() => {
         setSelected(null);
     }, [setSelected]);
@@ -132,7 +91,7 @@ const HitBrowser = () => {
                                         }, children: _jsx(Close, {}) }) }), _jsx(Tooltip, { title: t('hit.search.select.view'), children: _jsx(IconButton, { size: "small", onClick: () => {
                                             setOffset(0);
                                             setQuery(`howler.id:(${selectedHits.map(hit => hit.howler.id).join(' OR ')})`);
-                                        }, children: _jsx(ManageSearch, {}) }) })] }) })] }), _jsxs(Wrapper, { show: show, showDrawer: showDrawer, onClose: () => setShow(false), children: [_jsx(HitSummary, { query: summaryQuery, response: response }), _jsxs(Card, { variant: "outlined", sx: [
+                                        }, children: _jsx(ManageSearch, {}) }) })] }) })] }), _jsxs(Wrapper, { show: show, showDrawer: showDrawer, onClose: () => setShow(false), children: [_jsx(HitSummary, { response: response }), _jsxs(Card, { variant: "outlined", sx: [
                             {
                                 zIndex: 100,
                                 overflow: 'visible',

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

@@ -1,23 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-/* eslint-disable react/jsx-no-literals */
-/* eslint-disable import/imports-first */
-/// <reference types="vitest" />
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent, {} from '@testing-library/user-event';
 import { omit } from 'lodash-es';
-import { act, createContext, useContext } from 'react';
+import { act } from 'react';
+import { setupContextSelectorMock } from '@cccsaurora/howler-ui/tests/mocks';
 import { vi } from 'vitest';
-globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 // Mock API
 vi.mock('api', { spy: true });
-vi.mock('use-context-selector', async () => {
-    return {
-        createContext,
-        useContextSelector: (context, selector) => {
-            return selector(useContext(context));
-        }
-    };
-});
+setupContextSelectorMock();
 // Mock react-router-dom
 const mockNavigate = vi.fn();
 vi.mock('react-router-dom', async () => {
@@ -140,10 +130,8 @@ describe('HitContextMenu', () => {
     });
     describe('Context Menu Initialization', () => {
         it('should open menu on right-click', async () => {
-            act(() => {
-                const contextMenuWrapper = screen.getByText('Test Content').parentElement;
-                fireEvent.contextMenu(contextMenuWrapper);
-            });
+            const contextMenuWrapper = screen.getByText('Test Content').parentElement;
+            await user.pointer({ keys: '[MouseRight]', target: contextMenuWrapper });
             await waitFor(() => {
                 expect(screen.getByRole('menu')).toBeInTheDocument();
             });
@@ -644,12 +632,10 @@ describe('HitContextMenu', () => {
                 mockGetSelectedId.mockReturnValue('hit-1');
             });
             const contextMenuWrapper = screen.getByText('Test Content').parentElement;
-            fireEvent.contextMenu(contextMenuWrapper);
-            await waitFor(() => {
-                expect(screen.getByRole('menu')).toBeInTheDocument();
-            });
+            await user.pointer({ keys: '[MouseRight]', target: contextMenuWrapper });
             // The component should use selectedHits for actions
             // We can verify this indirectly through the useHitActions hook receiving the right data
+            expect(screen.getByRole('menu')).toBeInTheDocument();
             expect(mockGetSelectedId).toHaveBeenCalled();
         });
         it('should use only current hit when not in selectedHits', async () => {
@@ -659,7 +645,7 @@ describe('HitContextMenu', () => {
                 mockGetSelectedId.mockReturnValue('test-hit-1');
             });
             const contextMenuWrapper = screen.getByText('Test Content').parentElement;
-            fireEvent.contextMenu(contextMenuWrapper);
+            await user.pointer({ keys: '[MouseRight]', target: contextMenuWrapper });
             await waitFor(() => {
                 expect(screen.getByRole('menu')).toBeInTheDocument();
             });
@@ -668,9 +654,9 @@ describe('HitContextMenu', () => {
     });
     describe('Dynamic Data Loading', () => {
         let contextMenuWrapper;
-        beforeEach(() => {
+        beforeEach(async () => {
             contextMenuWrapper = screen.getByText('Test Content').parentElement;
-            fireEvent.contextMenu(contextMenuWrapper);
+            await user.pointer({ keys: '[MouseRight]', target: contextMenuWrapper });
         });
         it('should call getMatchingAnalytic when hit has analytic', async () => {
             await waitFor(() => {
@@ -694,11 +680,7 @@ describe('HitContextMenu', () => {
             await waitFor(() => {
                 expect(screen.getByTestId('assessment-submenu')).toBeInTheDocument();
             });
-            await act(async () => {
-                // Close menu
-                const menu = screen.getByRole('menu');
-                await user.click(menu);
-            });
+            await user.click(screen.getByRole('menu'));
             await waitFor(() => {
                 expect(screen.queryByRole('menu')).not.toBeInTheDocument();
             });

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

@@ -151,7 +151,7 @@ const InformationPane = ({ onClose }) => {
             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_aggregate: () => _jsx(HitSummary, {}),
             hit_related: () => _jsx(HitRelated, { hit: hit }),
             ...Object.fromEntries((hit?.howler.dossier ?? []).map((lead, index) => [
                 'lead:' + index,

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Add, ArrowDropDown } from '@mui/icons-material';
+import { Box, Button, Grid, Stack } from '@mui/material';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+import HitFilter from './shared/HitFilter';
+import HitSort from './shared/HitSort';
+import SearchSpan from './shared/SearchSpan';
+import ViewLink from './ViewLink';
+const QuerySettings = ({ boxSx }) => {
+    const { t } = useTranslation();
+    const views = useContextSelector(ViewContext, ctx => ctx.views);
+    const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
+    const currentViews = useContextSelector(ParameterContext, ctx => ctx.views);
+    const filters = useContextSelector(ParameterContext, ctx => ctx.filters);
+    const addFilter = useContextSelector(ParameterContext, ctx => ctx.addFilter);
+    const addView = useContextSelector(ParameterContext, ctx => ctx.addView);
+    const allowAddViews = useMemo(() => Object.values(views).filter(_view => !!_view && !currentViews?.includes(_view.view_id))?.length > 0 &&
+        !currentViews?.includes(''), [views, currentViews]);
+    const onAddView = async () => {
+        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') })] })] }) })] }) }));
+};
+export default memo(QuerySettings);

package/components/routes/hits/search/QuerySettings.test.d.ts

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