@cccsaurora/howler-ui 2.18.0-dev.710 → 2.18.0-dev.722

package/components/routes/help/HitDocumentation.js

@@ -5,6 +5,7 @@ import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/use
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
+import BundleDocumentation from './BundleDocumentation';
 import HelpTabs from './components/HelpTabs';
 import HitBannerDocumentation from './HitBannerDocumentation';
 import HitLabelsDocumentation from './HitLabelsDocumentation';
@@ -22,7 +23,8 @@ const HitDocumentation = () => {
         searchParams.set('tab', _tab);
         setSearchParams(new URLSearchParams(searchParams));
     }, [searchParams, setSearchParams]);
-    return (_jsx(PageCenter, { margin: 4, width: "100%", maxWidth: "1750px", textAlign: "left", children: _jsxs(Stack, { sx: { flexDirection: useHorizontal ? 'column' : 'row', '& h1': { mt: 0 } }, children: [_jsxs(HelpTabs, { value: tab, children: [_jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.schema.title') }), value: "schema", onClick: () => onChange('schema') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.banner.title') }), value: "header", onClick: () => onChange('header') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.links.title') }), value: "links", onClick: () => onChange('links') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.labels.title') }), value: "labels", onClick: () => onChange('labels') })] }), _jsx(Box, { children: {
+    return (_jsx(PageCenter, { margin: 4, width: "100%", maxWidth: "1750px", textAlign: "left", children: _jsxs(Stack, { sx: { flexDirection: useHorizontal ? 'column' : 'row', '& h1': { mt: 0 } }, children: [_jsxs(HelpTabs, { value: tab, children: [_jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.schema.title') }), value: "schema", onClick: () => onChange('schema') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.banner.title') }), value: "header", onClick: () => onChange('header') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.bundle.title') }), value: "bundle", onClick: () => onChange('bundle') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.links.title') }), value: "links", onClick: () => onChange('links') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.labels.title') }), value: "labels", onClick: () => onChange('labels') })] }), _jsx(Box, { children: {
+                        bundle: () => _jsx(BundleDocumentation, {}),
                         header: () => _jsx(HitBannerDocumentation, {}),
                         links: () => _jsx(HitLinksDocumentation, {}),
                         labels: () => _jsx(HitLabelsDocumentation, {}),

package/components/routes/help/markdown/en/bundles.md.js

@@ -0,0 +1 @@
+export default "<!-- docs/ingestion/bundles.md -->\n\n# Howler Hit Bundles\n\nHit bundles can be used to easily package together a large number of similar alerts, allowing analysts to easily triage them as a single incident. For example, consider a single computer that repeatedly makes a network call to `baddomain.ru` - while an alert may be generated for every instance of this computer hitting that domain, it makes sense for analysts to treat all these alerts as a single case.\n\n## Creating bundles through the Howler Client\n\nThere are a couple of ways to create a bundle through the howler client:\n\n```python\nfrom howler_client import get_client\n\nhowler = get_client(\"https://howler.dev.analysis.cyber.gc.ca\")\n\n\"\"\"Creating a howler bundle and the hits at the same time\"\"\"\nhowler.bundle.create(\n    # First argument is the bundle hit\n    {\n        \"howler.analytic\": \"example-test\",\n        \"howler.score\": 0\n    },\n    # Second argument is a hit or list of hits to include in the bundle\n    [\n        {\n            \"howler.analytic\": \"example-test\",\n            \"howler.score\": 0\n        },\n        {\n            \"howler.analytic\": \"example-test\",\n            \"howler.score\": 0\n        }\n    ]\n)\n\n\"\"\"Creating a howler bundle from existing hits\"\"\"\nhowler.bundle.create(\n    {\n        \"howler.analytic\": \"example-test\",\n        \"howler.score\": 0,\n        \"howler.hits\": [\"YcUsL8QsjmwwIdstieROk\", \"6s7MztwuSvz6tM0PgGJhvz\"]\n    },\n    # Note: In future releases, you won't need to include this argument\n    []\n)\n\n\n\"\"\"Creating from a map\"\"\"\nbundle_hit = {\n    \"score\": 0,\n    \"bundle\": True\n}\n\nmap = {\n    \"score\": [\"howler.score\"],\n    \"bundle\": [\"howler.is_bundle\"]\n}\n\nhowler.bundle.create_from_map(\"example-test\", bundle_hit, map, [{\"score\": 0}])\n```\n\n## Viewing bundles on the Howler UI\n\nIn order to view created bundles on the Howler UI, you can use the query `howler.is_bundle:true`. This will provide a list of created bundles you can look through.\n\nClicking on a bundle will open up a slightly different search UI to normal. In this case, we automatically filter the search results to include only hits that are included in the bundle. To make this obvious, the header representing the bundle will appear above the search bar.\n\nYou can continue to filter through hits using the same queries as usual, and view them as usual. When triaging a bundle, assessing it will apply this assessment to all hits in the bundle, **except those that have already been triaged**. That is, if the bundle is open, all open hits will be assessed when you assess it.\n\nBundles also have a **Summary** tab not available for regular hits. This summary tab will aid you in aggregating data about all the hits in the bundle. Simply open the tab and click \"Create Summary\". Note that this may take some time, as a large number of queries are being run to aggregate the data.\n"

package/components/routes/help/markdown/fr/bundles.md.js

@@ -0,0 +1 @@
+export default "<!-- docs/ingestion/bundles.fr.md -->\n\n# Les groupes des hits Howler\n\nLes groupes des hits peuvent \u00eatre utilis\u00e9s pour regrouper facilement un grand nombre d'alertes similaires, ce qui permet aux analystes de les traiter comme un seul incident. Prenons l'exemple d'un ordinateur qui effectue \u00e0 plusieurs reprises un appel r\u00e9seau vers `baddomain.ru` - bien qu'une alerte puisse \u00eatre g\u00e9n\u00e9r\u00e9e pour chaque cas o\u00f9 cet ordinateur acc\u00e8de \u00e0 ce domaine, il est logique que les analystes traitent toutes ces alertes comme un seul et m\u00eame cas.\n\n## Cr\u00e9ation de groupes via le client Howler\n\nIl y a plusieurs fa\u00e7ons de cr\u00e9er un groupe via le client Howler:\n\n```python\nfrom howler_client import get_client\n\nhowler = get_client(\"https://howler.dev.analysis.cyber.gc.ca\")\n\n\"\"\"Cr\u00e9ation simultan\u00e9e d'un groupe howler et de hits\"\"\"\nhowler.bundle.create(\n    # Le premier argument est le hit de l'offre group\u00e9e\n    {\n        \"howler.analytic\": \"example-test\",\n        \"howler.score\": 0\n    },\n    # Le deuxi\u00e8me argument est un hit ou une liste de hits \u00e0 inclure dans l'offre group\u00e9e.\n    [\n        {\n            \"howler.analytic\": \"example-test\",\n            \"howler.score\": 0\n        },\n        {\n            \"howler.analytic\": \"example-test\",\n            \"howler.score\": 0\n        }\n    ]\n)\n\n\"\"\"Cr\u00e9ation d'un groupe howler \u00e0 partir de hits existants\"\"\"\nhowler.bundle.create(\n    {\n        \"howler.analytic\": \"example-test\",\n        \"howler.score\": 0,\n        \"howler.hits\": [\"YcUsL8QsjmwwIdstieROk\", \"6s7MztwuSvz6tM0PgGJhvz\"]\n    },\n    # Noter: Dans les prochaines versions, vous n'aurez plus besoin d'inclure cet argument.\n    []\n)\n\n\n\"\"\"Cr\u00e9ation \u00e0 partir d'une carte\"\"\"\nbundle_hit = {\n    \"score\": 0,\n    \"bundle\": True\n}\n\nmap = {\n    \"score\": [\"howler.score\"],\n    \"bundle\": [\"howler.is_bundle\"]\n}\n\nhowler.bundle.create_from_map(\"example-test\", bundle_hit, map, [{\"score\": 0}])\n```\n\n## Visualiser les groupes sur l'interface utilisateur de Howler\n\nAfin de visualiser les groupes cr\u00e9\u00e9s sur l'interface utilisateur de Howler, vous pouvez utiliser la requ\u00eate `howler.is_bundle:true`. Cela fournira une liste de groupes cr\u00e9\u00e9s que vous pourrez consulter.\n\nEn cliquant sur un groupe, vous ouvrirez une interface de recherche l\u00e9g\u00e8rement diff\u00e9rente de l'interface normale. Dans ce cas, nous filtrons automatiquement les r\u00e9sultats de la recherche pour n'inclure que les r\u00e9sultats inclus dans le groupe. Pour que cela soit \u00e9vident, l'en-t\u00eate repr\u00e9sentant le groupe appara\u00eet au-dessus de la barre de recherche.\n\nVous pouvez continuer \u00e0 filtrer les r\u00e9sultats en utilisant les m\u00eames requ\u00eates que d'habitude et \u00e0 les visualiser comme d'habitude. Lors du triage d'un groupe, son \u00e9valuation s'appliquera \u00e0 tous les hits du groupe, **sauf ceux qui ont d\u00e9j\u00e0 \u00e9t\u00e9 tri\u00e9s**. En d'autres termes, si le groupe est ouvert, tous les hits ouverts seront \u00e9valu\u00e9s lorsque vous l'\u00e9valuerez.\n\nLes groupes disposent \u00e9galement d'un onglet **R\u00e9sum\u00e9** qui n'est pas disponible pour les hits ordinaires. Cet onglet vous aidera \u00e0 regrouper les donn\u00e9es relatives \u00e0 tous les r\u00e9sultats du groupe. Il suffit d'ouvrir l'onglet et de cliquer sur \"Cr\u00e9er un sommaire\". Notez que cette op\u00e9ration peut prendre un certain temps, car un grand nombre de requ\u00eates sont ex\u00e9cut\u00e9es pour agr\u00e9ger les donn\u00e9es.\n"

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

@@ -0,0 +1,6 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { FC } from 'react';
+declare const BundleParentMenu: FC<{
+    bundle: Hit;
+}>;
+export default BundleParentMenu;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AccountTree } from '@mui/icons-material';
+import { IconButton, Paper, Popover, Skeleton, Stack, Tooltip } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
+import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+const BundleParentMenu = ({ bundle }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [parentAnchor, setParentAnchor] = useState(null);
+    const [parentHits, setParentHits] = useState([]);
+    const onSelect = useCallback((bundleId) => {
+        navigate(`/bundles/${bundleId}?span=date.range.all&query=howler.id%3A*`);
+        setParentAnchor(null);
+    }, [navigate]);
+    useEffect(() => {
+        if (!parentAnchor) {
+            return;
+        }
+        api.search.hit
+            .post({ query: `howler.id:(${bundle.howler.bundles.join(' OR ')})` })
+            .then(response => setParentHits(response.items));
+    }, [bundle.howler.bundles, parentAnchor]);
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: t('hit.bundle.parents.show'), children: _jsx(IconButton, { size: "small", onClick: event => setParentAnchor(event.currentTarget), children: _jsx(AccountTree, { fontSize: "small" }) }) }), _jsx(Popover, { open: !!parentAnchor, anchorEl: parentAnchor, anchorOrigin: { vertical: 'top', horizontal: 'left' }, transformOrigin: { horizontal: 'right', vertical: 'top' }, onClose: () => setParentAnchor(null), children: _jsx(Paper, { sx: { p: 1, minWidth: '750px' }, children: _jsx(Stack, { spacing: 1, children: parentHits.length < 1
+                            ? bundle.howler.bundles.map(id => _jsx(Skeleton, { variant: "rounded", height: "100px" }, id))
+                            : parentHits.map(parent => (_jsx(HowlerCard, { sx: { p: 1, cursor: 'pointer' }, onClick: () => onSelect(parent.howler.id), children: _jsx(HitBanner, { hit: parent, layout: HitLayout.DENSE }) }, parent.howler.id))) }) }) })] }));
+};
+export default BundleParentMenu;

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

@@ -0,0 +1,2 @@
+import type { FC, PropsWithChildren } from 'react';
+export declare const BundleScroller: FC<PropsWithChildren>;

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

@@ -0,0 +1,6 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
+export const BundleScroller = ({ children }) => {
+    useScrollRestoration('hitscrollbar');
+    return _jsx(_Fragment, { children: children });
+};

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

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

package/components/{elements/record/RecordContextMenu.d.ts → routes/hits/search/HitContextMenu.d.ts}

@@ -3,7 +3,7 @@ import React from 'react';
 /**
  * Props for the HitContextMenu component
  */
-interface RecordContextMenuProps {
+interface HitContextMenuProps {
     /**
      * Function to extract the hit ID from a mouse event
      */
@@ -18,5 +18,5 @@ interface RecordContextMenuProps {
  * Provides quick access to common hit actions including assessment, voting,
  * transitions, and exclusion filters based on template fields.
  */
-declare const RecordContextMenu: FC<PropsWithChildren<RecordContextMenuProps>>;
-export default RecordContextMenu;
+declare const HitContextMenu: FC<PropsWithChildren<HitContextMenuProps>>;
+export default HitContextMenu;

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

@@ -0,0 +1,227 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AddCircleOutline, 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, get, groupBy, isEmpty, toString } from 'lodash-es';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+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, 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 [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();
+            setAnchorEl(null);
+            return;
+        }
+        event.preventDefault();
+        const _id = getSelectedId(event);
+        setId(_id);
+        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;
+        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));
+    /**
+     * 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) {
+            _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]);
+    /**
+     * 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]);
+    // Reset menu state when context menu is closed
+    useEffect(() => {
+        if (!anchorEl) {
+            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: {
+                            ...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, { 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 ?? []) && setQuery && (_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));
+                                                }) }) }) })] }), _jsxs(MenuItem, { id: "includes-menu-item", sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, includes: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, includes: null })), children: [_jsx(ListItemIcon, { children: _jsx(AddCircleOutline, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t('hit.panel.include') }), _jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } }), _jsx(Fade, { in: !!show.includes, unmountOnExit: true, children: _jsx(Paper, { id: "includes-submenu", sx: calculateSubMenuStyles(show.includes), elevation: 8, children: _jsx(MenuList, { sx: { p: 0 }, dense: true, role: "group", children: template?.keys.map(key => {
+                                                    // Build inclusion query based on current query and field
+                                                    // If default, we include default query
+                                                    let newQuery = `(${query}) AND `;
+                                                    const value = get(hit, key);
+                                                    if (!value) {
+                                                        return null;
+                                                    }
+                                                    else if (Array.isArray(value)) {
+                                                        // Handle array values by including 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;