@cccsaurora/howler-ui 2.15.0-dev.318 → 2.15.0-dev.326

package/api/search/count/hit.js

@@ -1,8 +1,9 @@
 import { hpost, joinUri } from '@cccsaurora/howler-ui/api';
 import { uri as parentUri } from '@cccsaurora/howler-ui/api/search/count';
+import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
 export const uri = () => {
     return joinUri(parentUri(), 'hit');
 };
 export const post = (request) => {
-    return hpost(uri(), { ...(request || {}), query: request?.query || 'howler.id:*' });
+    return hpost(uri(), { ...(request || {}), query: request?.query || DEFAULT_QUERY });
 };

package/api/search/explain/hit.js

@@ -1,8 +1,9 @@
 import { hpost, joinAllUri } from '@cccsaurora/howler-ui/api';
 import { uri as parentUri } from '@cccsaurora/howler-ui/api/search';
+import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
 export const uri = () => {
     return joinAllUri(parentUri(), 'hit', 'explain');
 };
 export const post = (request) => {
-    return hpost(uri(), { ...(request || {}), eql_query: request?.query || 'howler.id:*' });
+    return hpost(uri(), { ...(request || {}), eql_query: request?.query || DEFAULT_QUERY });
 };

package/api/search/facet/hit.js

@@ -1,8 +1,9 @@
 import { hpost, joinUri } from '@cccsaurora/howler-ui/api';
 import { uri as parentUri } from '@cccsaurora/howler-ui/api/search/facet';
+import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
 export const uri = () => {
     return joinUri(parentUri(), 'hit');
 };
 export const post = (request) => {
-    return hpost(uri(), { ...(request || {}), query: request?.query || 'howler.id:*' });
+    return hpost(uri(), { ...(request || {}), query: request?.query || DEFAULT_QUERY });
 };

package/api/search/grouped/hit.js

@@ -1,8 +1,9 @@
 import { hpost, joinAllUri } from '@cccsaurora/howler-ui/api';
 import { uri as parentUri } from '@cccsaurora/howler-ui/api/search/grouped';
+import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
 export const uri = (field) => {
     return joinAllUri(parentUri(), 'hit', field);
 };
 export const post = (field, request) => {
-    return hpost(uri(field), { ...(request || {}), query: request?.query || 'howler.id:*' });
+    return hpost(uri(field), { ...(request || {}), query: request?.query || DEFAULT_QUERY });
 };

package/api/search/histogram/hit.js

@@ -1,8 +1,9 @@
 import { hpost, joinAllUri } from '@cccsaurora/howler-ui/api';
 import { uri as parentUri } from '@cccsaurora/howler-ui/api/search/histogram';
+import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
 export const uri = (field) => {
     return joinAllUri(parentUri(), 'hit', field);
 };
 export const post = (field, request) => {
-    return hpost(uri(field), { ...(request || {}), query: request?.query || 'howler.id:*' });
+    return hpost(uri(field), { ...(request || {}), query: request?.query || DEFAULT_QUERY });
 };

package/api/search/hit.d.ts

@@ -1,8 +1,8 @@
 import type { HowlerSearchRequest, HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import * as eql from '@cccsaurora/howler-ui/api/search/eql/hit';
 import * as explain from '@cccsaurora/howler-ui/api/search/explain/hit';
 import * as sigma from '@cccsaurora/howler-ui/api/search/sigma/hit';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 export declare const uri: () => string;
 export declare const post: (request?: HowlerSearchRequest) => Promise<HowlerSearchResponse<Hit>>;
 export { eql, explain, sigma };

package/api/search/hit.js

@@ -3,10 +3,11 @@ import { uri as parentUri } from '@cccsaurora/howler-ui/api/search';
 import * as eql from '@cccsaurora/howler-ui/api/search/eql/hit';
 import * as explain from '@cccsaurora/howler-ui/api/search/explain/hit';
 import * as sigma from '@cccsaurora/howler-ui/api/search/sigma/hit';
+import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
 export const uri = () => {
     return joinUri(parentUri(), 'hit');
 };
 export const post = (request) => {
-    return hpost(uri(), { ...(request || {}), query: request?.query || 'howler.id:*' });
+    return hpost(uri(), { ...(request || {}), query: request?.query || DEFAULT_QUERY });
 };
 export { eql, explain, sigma };

package/components/app/providers/HitSearchProvider.js

@@ -10,7 +10,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { isMobile } from 'react-device-detect';
 import { useLocation, useParams } from 'react-router-dom';
 import { createContext, useContextSelector } from 'use-context-selector';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { DEFAULT_QUERY, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { getStored } from '@cccsaurora/howler-ui/utils/localStorage';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
 import { convertCustomDateRangeToLucene, convertDateToLucene } from '@cccsaurora/howler-ui/utils/utils';
@@ -73,12 +73,12 @@ const HitSearchProvider = ({ children }) => {
             }
             try {
                 const bundle = location.pathname.startsWith('/bundles') && routeParams.id;
-                let fullQuery = _query || 'howler.id:*';
+                let fullQuery = _query || DEFAULT_QUERY;
                 if (bundle) {
                     fullQuery = `(howler.bundles:${bundle}) AND (${fullQuery})`;
                 }
                 else if (viewId) {
-                    fullQuery = `(${(await getCurrentView({ viewId }))?.query || 'howler.id:*'}) AND (${fullQuery})`;
+                    fullQuery = `(${(await getCurrentView({ viewId }))?.query || DEFAULT_QUERY}) AND (${fullQuery})`;
                 }
                 const _response = await dispatchApi(api.search.hit.post({
                     offset: appendResults ? response.rows : offset,
@@ -139,7 +139,7 @@ const HitSearchProvider = ({ children }) => {
         if (span.endsWith('custom') && (!startDate || !endDate)) {
             return;
         }
-        if (viewId || bundleId || (query && query !== 'howler.id:*') || offset > 0) {
+        if (viewId || bundleId || (query && query !== DEFAULT_QUERY) || offset > 0) {
             search(query);
         }
         else {

package/components/app/providers/ParameterProvider.js

@@ -3,10 +3,11 @@ import { isEmpty, isNull, isUndefined, omitBy, pickBy } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useParams, useSearchParams } from 'react-router-dom';
 import { createContext, useContextSelector } from 'use-context-selector';
+import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
 export const ParameterContext = createContext(null);
 const DEFAULT_VALUES = {
-    query: 'howler.id:*',
+    query: DEFAULT_QUERY,
     sort: 'event.created desc',
     span: 'date.range.1.month'
 };

package/components/app/providers/ViewProvider.test.js

@@ -4,7 +4,7 @@ import { hget, hpost, hput } from '@cccsaurora/howler-ui/api';
 import MockLocalStorage from '@cccsaurora/howler-ui/tests/MockLocalStorage';
 import { MOCK_RESPONSES } from '@cccsaurora/howler-ui/tests/server-handlers';
 import { useContextSelector } from 'use-context-selector';
-import { MY_LOCAL_STORAGE_PREFIX, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { DEFAULT_QUERY, MY_LOCAL_STORAGE_PREFIX, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import ViewProvider, { ViewContext } from './ViewProvider';
 let mockUser = {
     favourite_views: ['favourited_view_id']
@@ -65,7 +65,7 @@ describe('ViewContext', () => {
                 advance_on_triage: false
             },
             view_id: 'example_created_view',
-            query: 'howler.id:*',
+            query: DEFAULT_QUERY,
             sort: 'event.created desc',
             title: 'Example View',
             type: 'personal',
@@ -159,9 +159,9 @@ describe('ViewContext', () => {
             vi.mocked(hpost).mockClear();
         });
         it('should allow users to edit views', async () => {
-            const result = await act(async () => hook.result.current('example_view_id', { query: 'howler.id:*' }));
+            const result = await act(async () => hook.result.current('example_view_id', { query: DEFAULT_QUERY }));
             expect(hput).toHaveBeenCalledOnce();
-            expect(hput).toBeCalledWith('/api/v1/view/example_view_id', { query: 'howler.id:*' });
+            expect(hput).toBeCalledWith('/api/v1/view/example_view_id', { query: DEFAULT_QUERY });
             expect(result).toEqual(MOCK_RESPONSES['/api/v1/view/example_view_id']);
         });
     });

package/components/elements/display/modals/RationaleModal.d.ts

@@ -1,5 +1,7 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { FC } from 'react';
 declare const RationaleModal: FC<{
+    hits: Hit[];
     onSubmit: (rationale: string) => void;
 }>;
 export default RationaleModal;

package/components/elements/display/modals/RationaleModal.js

@@ -1,13 +1,37 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Stack, TextField, Typography } from '@mui/material';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, Button, CircularProgress, ListItemText, Stack, TextField, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppUser';
 import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
-import { useCallback, useContext, useState } from 'react';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { isEqual } from 'lodash-es';
+import flatten from 'lodash-es/flatten';
+import isString from 'lodash-es/isString';
+import uniqBy from 'lodash-es/uniqBy';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-const RationaleModal = ({ onSubmit }) => {
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+const RationaleModal = ({ hits, onSubmit }) => {
     const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
     const { close } = useContext(ModalContext);
+    const { user } = useAppUser();
+    const [loading, setLoading] = useState(false);
     const [rationale, setRationale] = useState('');
+    const [suggestedRationales, setSuggestedRationales] = useState([]);
+    const queries = useMemo(() => [
+        {
+            type: 'analytic',
+            query: hits
+                .map(hit => `(howler.rationale:* AND howler.analytic:"${sanitizeLuceneQuery(hit.howler.analytic)}")`)
+                .join(' OR ')
+        },
+        {
+            type: 'assignment',
+            query: `howler.rationale:* AND howler.assignment:${user.username} AND howler.timestamp:[now-14d TO now]`
+        }
+    ], [hits, user.username]);
     const handleSubmit = useCallback(() => {
         onSubmit(rationale);
         close();
@@ -21,8 +45,21 @@ const RationaleModal = ({ onSubmit }) => {
             close();
         }
     }, [close, handleSubmit]);
-    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.rationale.title') }), _jsx(Typography, { children: t('modal.rationale.description') }), _jsx(TextField, { label: t('modal.rationale.label'), value: rationale, 
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: true, fullWidth: true, multiline: true, maxRows: 6, onChange: e => setRationale(e.target.value), onKeyDown: handleKeydown }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", onClick: handleSubmit, children: t('submit') })] })] }));
+    useEffect(() => {
+        (async () => {
+            setLoading(true);
+            // TODO: Eventually switch a a facet call once the elasticsearch refactor is complete
+            const results = flatten(await Promise.all(queries.map(async ({ query, type }) => {
+                const result = await dispatchApi(api.search.hit.post({ query, rows: 250, fl: 'howler.rationale,howler.assignment' }), { throwError: false });
+                return uniqBy((result?.items ?? []).map(_hit => ({ rationale: _hit.howler.rationale, type })), 'rationale');
+            })));
+            setSuggestedRationales(results);
+            setLoading(false);
+        })();
+    }, [dispatchApi, queries]);
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.rationale.title') }), _jsx(Typography, { children: t('modal.rationale.description') }), _jsx(Autocomplete, { loading: loading, loadingText: t('loading'), freeSolo: true, value: rationale, onChange: (_, newValue) => setRationale(isString(newValue) ? newValue : (newValue?.rationale ?? '')), options: suggestedRationales, getOptionLabel: suggestion => (isString(suggestion) ? suggestion : suggestion.rationale), isOptionEqualToValue: (option, value) => isString(value) ? option.rationale === value : isEqual(option, value), fullWidth: true, disablePortal: true, renderInput: params => (_jsx(TextField, { ...params, label: t('modal.rationale.label'), onChange: e => setRationale(e.target.value), onKeyDown: handleKeydown, InputProps: {
+                        ...params.InputProps,
+                        endAdornment: (_jsxs(_Fragment, { children: [loading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] }))
+                    } })), renderOption: (props, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: option.rationale, secondary: t(`modal.rationale.type.${option.type}`) })) }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", onClick: handleSubmit, children: t('submit') })] })] }));
 };
 export default RationaleModal;

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

@@ -15,6 +15,7 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'r
 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';
 const MAX_ROWS = 2500;
 const OVERRIDE_ROWS = 10000;
@@ -79,7 +80,7 @@ const HitGraph = ({ query }) => {
                 setDisabled(false);
             }
             const _data = await dispatchApi(api.search.grouped.hit.post(filterField, {
-                query: query || 'howler.id:*',
+                query: query || DEFAULT_QUERY,
                 fl: 'event.created,howler.assessment,howler.analytic,howler.detection,howler.outline.threat,howler.outline.target,howler.outline.summary,howler.id',
                 // We want a generally random sample across all date ranges, so we use hash.
                 // If we used event.created instead, when 1 million hits/hour are created, you'd only see hits from this past minute

package/components/hooks/useHitActions.js

@@ -94,7 +94,7 @@ const useHitActions = (_hits) => {
         const rationale = skipRationale
             ? t('rationale.default', { assessment })
             : await new Promise(res => {
-                showModal(_jsx(RationaleModal, { onSubmit: _rationale => {
+                showModal(_jsx(RationaleModal, { hits: hits, onSubmit: _rationale => {
                         res(_rationale);
                     } }));
             });

package/components/routes/advanced/luceneCompletionProvider.js

@@ -4,6 +4,7 @@ import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers
 import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
 import Fuse from 'fuse.js';
 import { useContext, useEffect, useMemo } from 'react';
+import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
 const useLuceneCompletionProvider = () => {
     const { config } = useContext(ApiConfigContext);
     const monaco = useMonaco();
@@ -42,7 +43,7 @@ const useLuceneCompletionProvider = () => {
                 }
                 else {
                     const options = await api.search.facet.hit
-                        .post({ query: 'howler.id:*', rows: 250, fields: [key] })
+                        .post({ query: DEFAULT_QUERY, rows: 250, fields: [key] })
                         .catch(() => ({}));
                     const _position = model.getWordUntilPosition(position);
                     return {

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import omit from 'lodash-es/omit';
+import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
 // Mock the API
 const mockApiSearchHitPost = vi.fn();
 const mockApiDossierGet = vi.fn();
@@ -86,7 +87,7 @@ vi.mock('../hits/search/HitQuery', () => ({
                         if (e.key === 'Enter') {
                             triggerSearch(e.target.value);
                         }
-                    } }), _jsx("button", { id: "trigger-search", onClick: () => triggerSearch('howler.id:*'), children: 'search' })] }));
+                    } }), _jsx("button", { id: "trigger-search", onClick: () => triggerSearch(DEFAULT_QUERY), children: 'search' })] }));
     }
 }));
 import ApiConfigProvider from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
@@ -103,7 +104,7 @@ const mockDossier = {
     id: 'test-dossier-1',
     title: 'Test Dossier',
     type: 'global',
-    query: 'howler.id:*',
+    query: DEFAULT_QUERY,
     leads: [
         {
             label: { en: 'Lead 1', fr: 'Piste 1' },

package/components/routes/help/ActionIntroductionDocumentation.js

@@ -8,7 +8,7 @@ import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown
 import { difference } from 'lodash-es';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { VALID_ACTION_TRIGGERS } from '@cccsaurora/howler-ui/utils/constants';
+import { DEFAULT_QUERY, VALID_ACTION_TRIGGERS } from '@cccsaurora/howler-ui/utils/constants';
 import QueryResultText from '../../elements/display/QueryResultText';
 import ActionReportDisplay from '../action/shared/ActionReportDisplay';
 import OperationStep from '../action/shared/OperationStep';
@@ -42,13 +42,13 @@ const ActionIntroductionDocumentation = () => {
             report: (_jsx(ActionReportDisplay, { report: {
                     add_label: [
                         {
-                            query: 'howler.id:*',
+                            query: DEFAULT_QUERY,
                             outcome: 'skipped',
                             title: 'Skipped Hit with Label',
                             message: `These hits already have the label ${OPERATION_VALUES.label}.`
                         },
                         {
-                            query: 'howler.id:*',
+                            query: DEFAULT_QUERY,
                             outcome: 'success',
                             title: 'Executed Successfully',
                             message: `Label '${OPERATION_VALUES.label}' added to category '${OPERATION_VALUES.category}' for all matching hits.`

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

@@ -16,7 +16,7 @@ import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useLocation, useParams, useSearchParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { DEFAULT_QUERY, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import InformationPane from './InformationPane';
 import SearchPane from './SearchPane';
 import HitGrid from './grid/HitGrid';
@@ -60,7 +60,7 @@ const HitBrowser = () => {
             _fullQuery = `(howler.bundles:${bundle}) AND (${_fullQuery})`;
         }
         else if (viewId) {
-            _fullQuery = `(${views[viewId]?.query || 'howler.id:*'}) AND (${_fullQuery})`;
+            _fullQuery = `(${views[viewId]?.query || DEFAULT_QUERY}) AND (${_fullQuery})`;
         }
         return _fullQuery;
     }, [location.pathname, query, routeParams.id, views, viewId]);

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

@@ -1,7 +1,22 @@
 import type { FC, PropsWithChildren } from 'react';
+import React from 'react';
+/**
+ * Props for the HitContextMenu component
+ */
 interface HitContextMenuProps {
+    /**
+     * Function to extract the hit ID from a mouse event
+     */
     getSelectedId: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => string;
+    /**
+     * Optional component to wrap the children, defaults to Box
+     */
     Component?: React.ElementType;
 }
+/**
+ * Context menu component for hit operations.
+ * Provides quick access to common hit actions including assessment, voting,
+ * transitions, and exclusion filters based on template fields.
+ */
 declare const HitContextMenu: FC<PropsWithChildren<HitContextMenuProps>>;
 export default HitContextMenu;

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

@@ -1,44 +1,71 @@
-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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Assignment, Edit, HowToVote, KeyboardArrowRight, OpenInNew, QueryStats, RemoveCircleOutline, 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 { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 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 { capitalize, get, groupBy, isEmpty, toString } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { 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';
+import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+/**
+ * Order in which action types should be displayed in the context menu
+ */
 const ORDER = ['assessment', 'vote', 'action'];
+/**
+ * The margin at the bottom of the screen by which the context menu should be inverted.
+ * That is, if right clicking within this many pixels of the bottom, render the context menu to the top right
+ * of the pointer instead of the bottom right.
+ */
+const CONTEXTMENU_MARGIN = 350;
+/**
+ * Icon mapping for different action types
+ */
 const ICON_MAP = {
     assessment: _jsx(Assignment, {}),
     vote: _jsx(HowToVote, {}),
     action: _jsx(Edit, {})
 };
+/**
+ * Context menu component for hit operations.
+ * Provides quick access to common hit actions including assessment, voting,
+ * transitions, and exclusion filters based on template fields.
+ */
 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 { getMatchingAnalytic, getMatchingTemplate } = useMatchers();
+    const query = useContextSelector(ParameterContext, ctx => ctx.query);
+    const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     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 [template, setTemplate] = useState(null);
     const [anchorEl, setAnchorEl] = useState();
-    const [clickLocation, setClickLocation] = useState([-1, -1]);
+    const [transformProps, setTransformProps] = useState({});
     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);
+    /**
+     * Handles right-click context menu events.
+     * Opens the context menu at the click location and loads available actions.
+     */
     const onContextMenu = useCallback(async (event) => {
         if (anchorEl) {
             event.preventDefault();
@@ -48,8 +75,21 @@ const HitContextMenu = ({ children, getSelectedId, Component = Box }) => {
         event.preventDefault();
         const _id = getSelectedId(event);
         setId(_id);
-        const clientRect = event.target.getBoundingClientRect();
-        setClickLocation([event.clientX - clientRect.x, event.clientY - clientRect.y]);
+        if (window.innerHeight - event.clientY < 300) {
+            setTransformProps({
+                position: 'fixed',
+                bottom: `${window.innerHeight - event.clientY}px !important`,
+                top: 'unset !important',
+                left: `${event.clientX}px !important`
+            });
+        }
+        else {
+            setTransformProps({
+                position: 'fixed',
+                top: `${event.clientY}px !important`,
+                left: `${event.clientX}px !important`
+            });
+        }
         setAnchorEl(event.target);
         const _actions = (await dispatchApi(api.search.action.post({ query: 'action_id:*' }), { throwError: false }))
             ?.items;
@@ -62,6 +102,10 @@ const HitContextMenu = ({ children, getSelectedId, Component = Box }) => {
         vote: canVote
     }), [canAssess, canVote]);
     const pluginActions = howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.actions`, hits));
+    /**
+     * Generates grouped action entries for the context menu.
+     * Combines transitions, plugin actions, votes, and assessments based on permissions.
+     */
     const entries = useMemo(() => {
         let _actions = [...availableTransitions, ...pluginActions];
         if (canVote) {
@@ -89,16 +133,34 @@ const HitContextMenu = ({ children, getSelectedId, Component = Box }) => {
         }
         return Object.entries(groupBy(_actions, 'type')).sort(([a], [b]) => ORDER.indexOf(a) - ORDER.indexOf(b));
     }, [analytic, assess, availableTransitions, canAssess, canVote, config.lookups, vote, pluginActions]);
+    /**
+     * Calculates appropriate styles for submenu positioning.
+     * Adjusts position based on available screen space to prevent overflow.
+     */
+    const calculateSubMenuStyles = useCallback((parent) => {
+        const baseStyles = { position: 'absolute', maxHeight: '300px', overflow: 'auto' };
+        const defaultStyles = { ...baseStyles, top: 0, left: '100%' };
+        if (!parent) {
+            return defaultStyles;
+        }
+        const parentBounds = parent.getBoundingClientRect();
+        if (window.innerHeight - parentBounds.y < CONTEXTMENU_MARGIN) {
+            return { ...baseStyles, bottom: 0, left: '100%' };
+        }
+        return defaultStyles;
+    }, []);
+    // Load analytic and template data when a hit is selected
     useEffect(() => {
         if (!hit?.howler.analytic) {
             return;
         }
         getMatchingAnalytic(hit).then(setAnalytic);
+        getMatchingTemplate(hit).then(setTemplate);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hit?.howler.analytic]);
+    }, [hit]);
+    // Reset menu state when context menu is closed
     useEffect(() => {
         if (!anchorEl) {
-            setClickLocation([-1, -1]);
             setShow({});
             setAnalytic(null);
         }
@@ -106,10 +168,36 @@ const HitContextMenu = ({ children, getSelectedId, Component = Box }) => {
     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`,
+                            ...transformProps,
                             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))) }) }) })] })] })] }));
+                }, 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, { id: `${type}-menu-item`, sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, [type]: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, [type]: null })), 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, { id: `${type}-submenu`, sx: calculateSubMenuStyles(show[type]), elevation: 8, children: _jsx(MenuList, { sx: { p: 0, borderTopLeftRadius: 0 }, dense: true, role: "group", 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, { id: "actions-menu-item", sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, actions: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, actions: null })), 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, { id: "actions-submenu", sx: calculateSubMenuStyles(show.actions), elevation: 8, children: _jsx(MenuList, { sx: { p: 0 }, dense: true, role: "group", 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))) }) }) })] }), !isEmpty(template?.keys ?? []) && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(MenuItem, { id: "excludes-menu-item", sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, excludes: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, excludes: null })), children: [_jsx(ListItemIcon, { children: _jsx(RemoveCircleOutline, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t('hit.panel.exclude') }), _jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } }), _jsx(Fade, { in: !!show.excludes, unmountOnExit: true, children: _jsx(Paper, { id: "excludes-submenu", sx: calculateSubMenuStyles(show.excludes), elevation: 8, children: _jsx(MenuList, { sx: { p: 0 }, dense: true, role: "group", children: template?.keys.map(key => {
+                                                    // Build exclusion query based on current query and field value
+                                                    let newQuery = '';
+                                                    if (query !== DEFAULT_QUERY) {
+                                                        newQuery = `(${query}) AND `;
+                                                    }
+                                                    const value = get(hit, key);
+                                                    if (!value) {
+                                                        return null;
+                                                    }
+                                                    else if (Array.isArray(value)) {
+                                                        // Handle array values by excluding all items
+                                                        const sanitizedValues = value
+                                                            .map(toString)
+                                                            .filter(val => !!val)
+                                                            .map(val => `"${sanitizeLuceneQuery(val)}"`);
+                                                        if (sanitizedValues.length < 1) {
+                                                            return null;
+                                                        }
+                                                        newQuery += `-${key}:(${sanitizedValues.join(' OR ')})`;
+                                                    }
+                                                    else {
+                                                        // Handle single value
+                                                        newQuery += `-${key}:"${sanitizeLuceneQuery(value.toString())}"`;
+                                                    }
+                                                    return (_jsx(MenuItem, { onClick: () => setQuery(newQuery), children: _jsx(ListItemText, { children: key }) }, key));
+                                                }) }) }) })] })] }))] })] }));
 };
 export default HitContextMenu;

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

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