@cccsaurora/howler-ui 2.17.0-dev.526 → 2.17.0-dev.539

package/api/index.d.ts

@@ -10,7 +10,6 @@ import * as overview from '@cccsaurora/howler-ui/api/overview';
 import * as search from '@cccsaurora/howler-ui/api/search';
 import * as template from '@cccsaurora/howler-ui/api/template';
 import * as user from '@cccsaurora/howler-ui/api/user';
-import * as v2 from '@cccsaurora/howler-ui/api/v2';
 import * as view from '@cccsaurora/howler-ui/api/view';
 /**
  * Defining the default export exposing all children routes of '/api/v1/'.
@@ -29,7 +28,6 @@ declare const api: {
     user: typeof user;
     view: typeof view;
     notebook: typeof notebook;
-    v2: typeof v2;
 };
 /**
  * The specification interface of an Howler HTTP response.

package/api/index.js

@@ -10,7 +10,6 @@ import * as overview from '@cccsaurora/howler-ui/api/overview';
 import * as search from '@cccsaurora/howler-ui/api/search';
 import * as template from '@cccsaurora/howler-ui/api/template';
 import * as user from '@cccsaurora/howler-ui/api/user';
-import * as v2 from '@cccsaurora/howler-ui/api/v2';
 import * as view from '@cccsaurora/howler-ui/api/view';
 import AxiosClient from '@cccsaurora/howler-ui/rest/AxiosClient';
 import urlJoin from 'url-join';
@@ -39,8 +38,7 @@ const api = {
     template,
     user,
     view,
-    notebook,
-    v2
+    notebook
 };
 /**
  * The base section of the Howler API uri.
@@ -59,7 +57,7 @@ export const uri = () => {
  * @returns `string` - properly formatted howler uri.
  */
 const format = (_uri) => {
-    return _uri.startsWith('/api') ? _uri : `${uri()}/${_uri.replace(/\/$/, '')}`;
+    return _uri.startsWith(uri()) ? _uri : `${uri()}/${_uri.replace(/\/$/, '')}`;
 };
 /**
  * Append series of search parameters to the specified uri.

package/api/search/index.d.ts

@@ -1,6 +1,5 @@
 import * as action from '@cccsaurora/howler-ui/api/search/action';
 import * as analytic from '@cccsaurora/howler-ui/api/search/analytic';
-import * as case_ from '@cccsaurora/howler-ui/api/search/case';
 import * as count from '@cccsaurora/howler-ui/api/search/count';
 import * as dossier from '@cccsaurora/howler-ui/api/search/dossier';
 import * as facet from '@cccsaurora/howler-ui/api/search/facet';
@@ -61,4 +60,4 @@ export type HowlerExplainSearchResponse = {
         explanation: string;
     }[];
 };
-export { action, analytic, case_ as case, count, dossier, facet, fields, grouped, histogram, hit, overview, template, user, view };
+export { action, analytic, count, dossier, facet, fields, grouped, histogram, hit, overview, template, user, view };

package/api/search/index.js

@@ -1,7 +1,6 @@
 import { joinUri, uri as parentUri } from '@cccsaurora/howler-ui/api';
 import * as action from '@cccsaurora/howler-ui/api/search/action';
 import * as analytic from '@cccsaurora/howler-ui/api/search/analytic';
-import * as case_ from '@cccsaurora/howler-ui/api/search/case';
 import * as count from '@cccsaurora/howler-ui/api/search/count';
 import * as dossier from '@cccsaurora/howler-ui/api/search/dossier';
 import * as facet from '@cccsaurora/howler-ui/api/search/facet';
@@ -16,4 +15,4 @@ import * as view from '@cccsaurora/howler-ui/api/search/view';
 export const uri = () => {
     return joinUri(parentUri(), 'search');
 };
-export { action, analytic, case_ as case, count, dossier, facet, fields, grouped, histogram, hit, overview, template, user, view };
+export { action, analytic, count, dossier, facet, fields, grouped, histogram, hit, overview, template, user, view };

package/commons/components/leftnav/LeftNavDrawer.js

@@ -75,7 +75,7 @@ const LeftNavDrawer = () => {
                     }
                 }, children: _jsx(AppName, {}) }), !isTopLayout && _jsx(Divider, {})] }));
     const hide = (_jsx(List, { disablePadding: true, children: _jsxs(ListItemButton, { onClick: leftnav.toggle, children: [_jsx(ListItemIcon, { children: leftnav.open ? _jsx(ChevronLeftIcon, {}) : _jsx(ChevronRightIcon, {}) }), _jsx(ListItemText, { primary: t('drawer.collapse') })] }, "chevron") }));
-    return (_jsx(ClickAwayListener, { mouseEvent: "onMouseDown", touchEvent: "onTouchStart", onClickAway: onCloseDrawerIfOpen, children: _jsxs(StyledDrawer, { variant: "permanent", style: { height: '100%' }, width: preferences.leftnav.width, open: leftnav.open, children: [leftnav.open ? (header) : (_jsx(Tooltip, { title: preferences.appName, "aria-label": preferences.appName, placement: "right", children: header })), _jsx(List, { disablePadding: true, children: leftnav.elements.map((e, i) => {
+    return (_jsx(ClickAwayListener, { mouseEvent: "onMouseDown", touchEvent: "onTouchStart", onClickAway: onCloseDrawerIfOpen, children: _jsxs(StyledDrawer, { PaperProps: { elevation: 1 }, variant: "permanent", style: { height: '100%' }, width: preferences.leftnav.width, open: leftnav.open, children: [leftnav.open ? (header) : (_jsx(Tooltip, { title: preferences.appName, "aria-label": preferences.appName, placement: "right", children: header })), _jsx(List, { disablePadding: true, children: leftnav.elements.map((e, i) => {
                         if (e.type === 'item') {
                             const item = e.element;
                             return _jsx(LeftNavItem, { item: item, onClick: isSmDown && onCloseDrawerIfOpen }, item.id);

package/components/app/App.js

@@ -25,8 +25,6 @@ import UserSearchProvider from '@cccsaurora/howler-ui/components/routes/admin/us
 import QueryBuilder from '@cccsaurora/howler-ui/components/routes/advanced/QueryBuilder';
 import AnalyticDetails from '@cccsaurora/howler-ui/components/routes/analytics/AnalyticDetails';
 import AnalyticSearch from '@cccsaurora/howler-ui/components/routes/analytics/AnalyticSearch';
-import CaseViewer from '@cccsaurora/howler-ui/components/routes/cases/CaseViewer';
-import Cases from '@cccsaurora/howler-ui/components/routes/cases/Cases';
 import DossierEditor from '@cccsaurora/howler-ui/components/routes/dossiers/DossierEditor';
 import Dossiers from '@cccsaurora/howler-ui/components/routes/dossiers/Dossiers';
 import ActionDocumentation from '@cccsaurora/howler-ui/components/routes/help/ActionDocumentation';
@@ -187,18 +185,6 @@ const router = createBrowserRouter([
                 path: 'bundles/:id',
                 element: _jsx(HitBrowser, {})
             },
-            {
-                path: 'cases',
-                element: _jsx(Cases, {})
-            },
-            {
-                path: 'cases/:id',
-                element: _jsx(CaseViewer, {})
-            },
-            {
-                path: 'cases/:id/*',
-                element: _jsx(CaseViewer, {})
-            },
             {
                 path: 'templates',
                 element: _jsx(Templates, {})

package/components/app/providers/FavouritesProvider.js

@@ -120,11 +120,11 @@ const FavouriteProvider = ({ children }) => {
         (async () => {
             const analyticElement = processAnalyticElement();
             if (analyticElement) {
-                newElements.splice(2, 0, analyticElement);
+                newElements.splice(1, 0, analyticElement);
             }
             const viewElement = await processViewElement();
             if (viewElement) {
-                newElements.splice(2, 0, viewElement);
+                newElements.splice(1, 0, viewElement);
             }
             leftNav.setElements(newElements);
         })();

package/components/elements/PluginTypography.d.ts

@@ -1,11 +1,10 @@
 import { type TypographyProps } from '@mui/material';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
 export type PluginTypographyProps = TypographyProps & {
     value: string;
     context: string;
     field?: string;
-    obj?: Hit | Observable;
+    hit?: Hit;
 };
 declare const _default: import("react").NamedExoticComponent<PluginTypographyProps>;
 export default _default;

package/components/elements/PluginTypography.js

@@ -3,7 +3,7 @@ import { Typography } from '@mui/material';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { memo } from 'react';
 import { usePluginStore } from 'react-pluggable';
-const PluginTypography = ({ children, value, context, field, obj, ...props }) => {
+const PluginTypography = ({ children, value, context, field, hit, ...props }) => {
     const pluginStore = usePluginStore();
     for (const plugin of howlerPluginStore.plugins) {
         const component = pluginStore.executeFunction(`${plugin}.typography`, {
@@ -11,8 +11,7 @@ const PluginTypography = ({ children, value, context, field, obj, ...props }) =>
             value,
             context,
             field,
-            hit: obj,
-            obj,
+            hit,
             ...props
         });
         if (component) {

package/components/elements/UserList.d.ts

@@ -2,11 +2,8 @@ import type { SxProps, Theme } from '@mui/material';
 import type { FC } from 'react';
 declare const UserList: FC<{
     buttonSx?: SxProps<Theme>;
-    userIds: string[];
-    onChange: (userIds: string[]) => void;
+    userId: string;
+    onChange: (userId: string) => void;
     i18nLabel: string;
-    avatarHeight?: number;
-    disabled?: boolean;
-    multiple?: boolean;
 }>;
 export default UserList;

package/components/elements/UserList.js

@@ -1,20 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Add } from '@mui/icons-material';
-import { Autocomplete, AvatarGroup, Box, IconButton, Popover, Stack, TextField, Typography } from '@mui/material';
+import { Autocomplete, Box, IconButton, Popover, TextField, Typography } from '@mui/material';
 import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
-import { uniq } from 'lodash-es';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import HowlerAvatar from './display/HowlerAvatar';
-const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight = 32, multiple = false, disabled = false }) => {
+const UserList = ({ buttonSx = {}, userId, onChange, i18nLabel }) => {
     const { t } = useTranslation();
     const [anchorEl, setAnchorEl] = useState(null);
     const { users, searchUsers } = useContext(UserListContext);
-    const allUserIds = useMemo(() => Object.keys(users), [users]);
+    const userIds = useMemo(() => Object.keys(users), [users]);
     useEffect(() => {
         searchUsers('uname:*');
     }, [searchUsers]);
-    return (_jsxs(_Fragment, { children: [multiple ? (_jsxs(Stack, { direction: "row", spacing: 0.25, alignItems: "center", children: [_jsx(AvatarGroup, { children: uniq(userIds ?? [null]).map(userId => (_jsx(HowlerAvatar, { userId: userId, sx: { height: avatarHeight, width: avatarHeight } }, userId))) }), _jsx(IconButton, { size: "small", sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(Add, {}) })] })) : (_jsx(IconButton, { sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(HowlerAvatar, { userId: userIds[0], sx: { height: avatarHeight, width: avatarHeight } }) })), _jsx(Popover, { open: !!anchorEl, onClose: () => setAnchorEl(null), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsx(Box, { sx: { p: 2 }, children: _jsx(Autocomplete, { disabled: disabled, multiple: multiple, sx: { minWidth: '300px' }, options: allUserIds, renderInput: params => _jsx(TextField, { ...params, label: t(i18nLabel), size: "small" }), renderOption: (props, _userId) => {
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: buttonSx, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(HowlerAvatar, { userId: userId }) }), _jsx(Popover, { open: !!anchorEl, onClose: () => setAnchorEl(null), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsx(Box, { sx: { p: 2 }, children: _jsx(Autocomplete, { sx: { minWidth: '300px' }, options: userIds, renderInput: params => _jsx(TextField, { ...params, label: t(i18nLabel), size: "small" }), renderOption: (props, _userId) => {
                             const user = users[_userId];
                             return (_jsx("li", { ...props, children: _jsxs(Box, { sx: {
                                         display: 'grid',
@@ -23,13 +21,6 @@ const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight =
                                         gridTemplateAreas: `"profile name"\n"profile email"`,
                                         columnGap: 1.5
                                     }, children: [_jsx(HowlerAvatar, { sx: { gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }, userId: user.username }), _jsx(Typography, { sx: { gridArea: 'name' }, variant: "body1", children: user.name }), _jsx(Typography, { sx: { gridArea: 'email' }, variant: "caption", children: user.email })] }) }));
-                        }, value: userIds, onChange: (__, options) => {
-                            if (multiple) {
-                                onChange(Array.isArray(options) ? options : [options]);
-                            }
-                            else {
-                                onChange([Array.isArray(options) ? (options[0] ?? null) : options]);
-                            }
-                        } }) }) })] }));
+                        }, value: userId, onChange: (__, option) => onChange(option) }) }) })] }));
 };
 export default UserList;

package/components/elements/addons/search/phrase/Phrase.js

@@ -80,7 +80,7 @@ const Phrase = ({ value = '', variant = 'outlined', suggestions = [], lexer, sug
                         onSelectCapture: _onSelectCapture,
                         startAdornment: startAdornment && _jsx(InputAdornment, { position: "start", children: startAdornment }),
                         endAdornment: endAdornment && _jsx(InputAdornment, { position: "end", children: endAdornment })
-                    } }), _jsx(Popper, { anchorEl: containerRef.current, style: { width: '100%', zIndex: 100 }, open: optionsOpen && (options.length > 0 || (debug && analysisRef.current?.tokens.length > 0)), disablePortal: true, children: _jsx(Paper, { elevation: 1, sx: { maxHeight: 200, overflow: 'auto', borderTopRightRadius: 0, borderTopLeftRadius: 0 }, children: _jsx(MenuList, { ref: menuRef, onKeyDown: _onMenuKeyDown, sx: {
+                    } }), _jsx(Popper, { anchorEl: containerRef.current, style: { width: '100%', zIndex: 100 }, open: optionsOpen && (options.length > 0 || (debug && analysisRef.current?.tokens.length > 0)), disablePortal: true, children: _jsx(Paper, { elevation: 2, sx: { maxHeight: 200, overflow: 'auto', borderTopRightRadius: 0, borderTopLeftRadius: 0 }, children: _jsx(MenuList, { ref: menuRef, onKeyDown: _onMenuKeyDown, sx: {
                                 '&:focus': {
                                     outline: 'none'
                                 }

package/components/elements/display/HowlerCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Card } from '@mui/material';
 import { memo } from 'react';
-const HowlerCard = props => _jsx(Card, { elevation: props.variant !== 'outlined' ? 1 : 0, ...props });
+const HowlerCard = props => (_jsx(Card, { style: { outline: 'none' }, elevation: props.variant !== 'outlined' ? 4 : 0, ...props }));
 export default memo(HowlerCard);

package/components/elements/display/Modal.js

@@ -15,7 +15,6 @@ const Modal = () => {
                 left: '50%',
                 maxWidth: options.maxWidth || '1200px',
                 maxHeight: options.maxHeight || '400px',
-                height: '100%',
                 transform: 'translate(-50%, -50%)',
                 backgroundColor: 'background.paper',
                 borderRadius: theme.shape.borderRadius,

package/components/elements/display/icons/BundleButton.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+declare const BundleButton: FC<{
+    ids: string[];
+    disabled?: boolean;
+}>;
+export default BundleButton;

package/components/elements/display/icons/BundleButton.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 { ListItemText, Menu, MenuItem, Typography } from '@mui/material';
+import TuiIconButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomIconButton';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+const BundleButton = ({ ids, disabled = false }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const onClick = useCallback((event) => {
+        if (ids.length === 1) {
+            navigate(`/bundles/${ids[0]}`);
+        }
+        else {
+            setAnchorEl(event.currentTarget);
+        }
+    }, [ids, navigate]);
+    const handleClose = useCallback(() => setAnchorEl(null), []);
+    return (_jsxs(_Fragment, { children: [_jsx(TuiIconButton, { size: "small", tooltip: t(`hit.panel.bundles.open${ids.length > 1 ? '' : '.prompt'}`), onClick: onClick, disabled: disabled, "aria-disabled": disabled, "aria-haspopup": "true", "aria-controls": anchorEl ? 'bundle-action-menu' : undefined, "aria-expanded": anchorEl ? 'true' : undefined, children: _jsx(AccountTree, {}) }), _jsx(Menu, { id: "bundle-action-menu", anchorEl: anchorEl, open: !!anchorEl, onClose: handleClose, MenuListProps: {
+                    dense: true,
+                    'aria-labelledby': `bundle-button`
+                }, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right'
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right'
+                }, children: ids.map(id => (_jsx(MenuItem, { onClick: () => navigate(`/bundles/${id}`), children: _jsx(ListItemText, { primary: t('hit.panel.bundles.open.prompt'), secondary: _jsx(Typography, { variant: "caption", color: "text.secondary", children: id }) }) }, id))) })] }));
+};
+export default BundleButton;

package/components/elements/hit/HitBanner.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Chip, Divider, Grid, Stack, Tooltip, Typography, avatarClasses, iconButtonClasses, useTheme } from '@mui/material';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { uniq } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import { useCallback, useContext, useMemo } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
+import { Link } from 'react-router-dom';
 import { ESCALATION_COLORS, PROVIDER_COLORS } from '@cccsaurora/howler-ui/utils/constants';
 import { stringToColor } from '@cccsaurora/howler-ui/utils/utils';
 import PluginTypography from '../PluginTypography';
-import AnalyticLink from './elements/AnalyticLink';
 import Assigned from './elements/Assigned';
 import EscalationChip from './elements/EscalationChip';
 import HitTimestamp from './elements/HitTimestamp';
@@ -20,14 +21,18 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
     const { config } = useContext(ApiConfigContext);
     const theme = useTheme();
     const pluginStore = usePluginStore();
+    const { getMatchingAnalytic } = useMatchers();
+    const [analyticId, setAnalyticId] = useState();
     const compressed = useMemo(() => layout === HitLayout.DENSE, [layout]);
     const textVariant = useMemo(() => (layout === HitLayout.COMFY ? 'body1' : 'caption'), [layout]);
-    const providerColor = useMemo(() => {
-        if (!hit?.event.provider) {
-            return PROVIDER_COLORS.unknown;
+    useEffect(() => {
+        if (!hit?.howler.analytic) {
+            return;
         }
-        return PROVIDER_COLORS[hit?.event.provider] ?? stringToColor(hit?.event.provider);
-    }, [hit?.event.provider]);
+        getMatchingAnalytic(hit).then(analytic => setAnalyticId(analytic?.analytic_id));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hit?.howler.analytic]);
+    const providerColor = useMemo(() => PROVIDER_COLORS[hit.event?.provider ?? 'unknown'] ?? stringToColor(hit.event.provider), [hit.event?.provider]);
     const mitreId = useMemo(() => {
         if (hit.threat?.framework?.toLowerCase().startsWith('mitre')) {
             return;
@@ -47,23 +52,35 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
         }
         return `/api/static/mitre/${mitreId}.svg`;
     }, [mitreId]);
-    const leftBox = useMemo(() => (_jsx(HitBannerTooltip, { hit: hit, children: _jsxs(Box, { sx: {
-                gridColumn: { xs: 'span 3', sm: 'span 1' },
-                minWidth: '90px',
-                backgroundColor: providerColor,
-                color: theme.palette.getContrastText(providerColor),
-                alignSelf: 'start',
-                borderRadius: theme.shape.borderRadius,
-                p: compressed ? 0.5 : 1,
-                pt: 2,
-                pl: 1
-            }, display: "flex", flexDirection: "column", children: [_jsx(Typography, { variant: compressed ? 'caption' : 'body1', style: { wordBreak: 'break-all' }, children: hit.organization?.name ?? _jsx(Trans, { i18nKey: "unknown" }) }), iconUrl && (_jsx(Box, { sx: {
-                        width: '40px',
-                        height: '40px',
-                        mask: `url("${iconUrl}")`,
-                        maskSize: 'cover',
-                        background: theme.palette.getContrastText(providerColor)
-                    } }))] }) })), [compressed, hit, iconUrl, providerColor, theme.palette, theme.shape.borderRadius]);
+    const leftBox = useMemo(() => {
+        if (hit.howler.is_bundle) {
+            return (_jsx(Box, { sx: {
+                    alignSelf: 'stretch',
+                    backgroundColor: providerColor,
+                    borderRadius: theme.shape.borderRadius,
+                    minWidth: '15px'
+                } }));
+        }
+        else {
+            return (_jsx(HitBannerTooltip, { hit: hit, children: _jsxs(Box, { sx: {
+                        gridColumn: { xs: 'span 3', sm: 'span 1' },
+                        minWidth: '90px',
+                        backgroundColor: providerColor,
+                        color: theme.palette.getContrastText(providerColor),
+                        alignSelf: 'start',
+                        borderRadius: theme.shape.borderRadius,
+                        p: compressed ? 0.5 : 1,
+                        pt: 2,
+                        pl: 1
+                    }, display: "flex", flexDirection: "column", children: [_jsx(Typography, { variant: compressed ? 'caption' : 'body1', style: { wordBreak: 'break-all' }, children: hit.organization?.name ?? _jsx(Trans, { i18nKey: "unknown" }) }), iconUrl && (_jsx(Box, { sx: {
+                                width: '40px',
+                                height: '40px',
+                                mask: `url("${iconUrl}")`,
+                                maskSize: 'cover',
+                                background: theme.palette.getContrastText(providerColor)
+                            } }))] }) }));
+        }
+    }, [compressed, hit, iconUrl, providerColor, theme.palette, theme.shape.borderRadius]);
     /**
      * The tooltips are necessary only when in the most compressed format
      */
@@ -71,7 +88,7 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
         const _children = (_jsxs(Stack, { direction: "row", spacing: 1, flex: 1, children: [_jsxs(Typography, { variant: textVariant, noWrap: compressed, textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, sx: [
                         { display: 'flex', flexDirection: 'row' },
                         ...(Array.isArray(typographyProps?.sx) ? typographyProps?.sx : [typographyProps?.sx])
-                    ], children: [t(i18nKey), ":"] }), (Array.isArray(value) ? value : [value]).map(val => (_jsx(PluginTypography, { component: "span", context: "banner", variant: textVariant, noWrap: compressed, textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, value: val, field: field, obj: hit }, val)))] }));
+                    ], children: [t(i18nKey), ":"] }), (Array.isArray(value) ? value : [value]).map(val => (_jsx(PluginTypography, { component: "span", context: "banner", variant: textVariant, noWrap: compressed, textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, value: val, field: field, hit: hit }, val)))] }));
         return compressed ? (_jsx(Tooltip, { title: Array.isArray(value) ? (_jsx("div", { children: value.map(_indicator => (_jsx("p", { style: { margin: 0, padding: 0 }, children: _indicator }, _indicator))) })) : (value), children: _children })) : (_children);
     }, [compressed, hit, t, textVariant]);
     return (_jsxs(Box, { display: "grid", gridTemplateColumns: "minmax(0, auto) minmax(0, 1fr) minmax(0, auto)", alignItems: "stretch", sx: { width: '100%', ml: 0, overflow: 'hidden' }, children: [leftBox, _jsxs(Stack, { sx: {
@@ -81,7 +98,11 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
                 }, spacing: layout !== HitLayout.COMFY ? 1 : 2, divider: _jsx(Divider, { orientation: "horizontal", sx: [
                         layout !== HitLayout.COMFY && { marginTop: '4px !important' },
                         { mr: `${theme.spacing(-1)} !important` }
-                    ] }), children: [_jsx(AnalyticLink, { hit: hit }), hit.howler?.rationale && (_jsxs(Typography, { flex: 1, variant: textVariant, color: ESCALATION_COLORS[hit.howler.escalation] + '.main', sx: { fontWeight: 'bold' }, children: [t('hit.header.rationale'), ": ", hit.howler.rationale] })), hit.howler?.outline && (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: layout !== HitLayout.COMFY ? 1 : 2, sx: { ml: `${theme.spacing(-1)} !important` }, children: [hit.howler.outline.threat && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat, field: "howler.outline.threat" }) })), hit.howler.outline.target && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.howler.outline.target, field: "howler.outline.target" }) }))] }), hit.howler.outline.indicators?.length > 0 && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, children: [t('hit.header.indicators'), ":"] }), _jsx(Grid, { container: true, spacing: 0.5, sx: { mt: `${theme.spacing(-0.5)} !important`, ml: `${theme.spacing(0.25)} !important` }, children: uniq(hit.howler.outline.indicators).map((_indicator, index) => {
+                    ] }), children: [_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf: 'start', '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, onAuxClick: e => {
+                                    e.stopPropagation();
+                                }, onClick: e => {
+                                    e.stopPropagation();
+                                }, children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }), hit.howler?.rationale && (_jsxs(Typography, { flex: 1, variant: textVariant, color: ESCALATION_COLORS[hit.howler.escalation] + '.main', sx: { fontWeight: 'bold' }, children: [t('hit.header.rationale'), ": ", hit.howler.rationale] })), hit.howler?.outline && (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: layout !== HitLayout.COMFY ? 1 : 2, sx: { ml: `${theme.spacing(-1)} !important` }, children: [hit.howler.outline.threat && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat, field: "howler.outline.threat" }) })), hit.howler.outline.target && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.howler.outline.target, field: "howler.outline.target" }) }))] }), hit.howler.outline.indicators?.length > 0 && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, children: [t('hit.header.indicators'), ":"] }), _jsx(Grid, { container: true, spacing: 0.5, sx: { mt: `${theme.spacing(-0.5)} !important`, ml: `${theme.spacing(0.25)} !important` }, children: uniq(hit.howler.outline.indicators).map((_indicator, index) => {
                                             return (_jsx(Grid, { item: true, children: _jsxs(Stack, { direction: "row", children: [_jsx(PluginTypography, { context: "indicators", variant: textVariant, value: _indicator, children: _indicator }), index < hit.howler.outline.indicators.length - 1 && (_jsx(Typography, { variant: textVariant, children: ',' }))] }) }, _indicator));
                                         }) })] })), hit.howler.outline.summary && (_jsx(Wrapper, { i18nKey: "hit.header.summary", value: hit.howler.outline.summary, paragraph: true, textOverflow: "wrap", sx: [compressed && { marginTop: `0 !important` }], field: "howler.outline.summary" }))] }))] }), _jsxs(Stack, { direction: "column", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, alignSelf: "stretch", sx: [
                     { minWidth: 0, alignItems: { sm: 'end', md: 'start' }, flex: 1, pl: 1 },
@@ -95,6 +116,6 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
                             width: theme.spacing(3)
                         }
                     }
-                ], children: [_jsx(HitTimestamp, { hit: hit, layout: layout }), showAssigned && _jsx(Assigned, { hit: hit, layout: layout }), _jsxs(Stack, { direction: "row", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, children: [_jsx(EscalationChip, { hit: hit, layout: layout }), ['in-progress', 'on-hold'].includes(hit.howler.status) && (_jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, size: layout !== HitLayout.COMFY ? 'small' : 'medium', color: "primary" }))] }), hit.howler.related && (_jsx(Chip, { size: layout !== HitLayout.COMFY ? 'small' : 'medium', label: t('hit.header.related', { count: hit.howler.related.length }) })), howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.status`, { hit, layout }))] })] }));
+                ], children: [_jsx(HitTimestamp, { hit: hit, layout: layout }), showAssigned && _jsx(Assigned, { hit: hit, layout: layout }), _jsxs(Stack, { direction: "row", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, children: [_jsx(EscalationChip, { hit: hit, layout: layout }), ['in-progress', 'on-hold'].includes(hit.howler.status) && (_jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, size: layout !== HitLayout.COMFY ? 'small' : 'medium', color: "primary" })), hit.howler.is_bundle && (_jsx(Chip, { size: layout !== HitLayout.COMFY ? 'small' : 'medium', label: t('hit.header.bundlesize', { hits: hit.howler.hits.length }) }))] }), howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.status`, { hit, layout }))] })] }));
 };
 export default HitBanner;

package/components/elements/{ObjectDetails.d.ts → hit/HitDetails.d.ts}

@@ -1,6 +1,5 @@
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
 declare const _default: import("react").NamedExoticComponent<{
-    obj: Hit | Observable;
+    hit: Hit;
 }>;
 export default _default;

package/components/elements/{ObjectDetails.js → hit/HitDetails.js}

@@ -5,12 +5,12 @@ import { ArrowDropDown, InfoOutlined } from '@mui/icons-material';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Divider, Grid, Stack, TextField, Tooltip, Typography, useTheme } from '@mui/material';
 import { flatten } from 'flat';
 import Fuse from 'fuse.js';
-import { capitalize, groupBy, isArray, isBoolean, isEmpty, isNull, isNumber, isObject, isPlainObject, isUndefined, max, sortBy, uniq } from 'lodash-es';
+import { capitalize, groupBy, isArray, isEmpty, isNull, isObject, isPlainObject, isUndefined, max, sortBy, uniq } from 'lodash-es';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
-import PluginTypography from './PluginTypography';
-const ListRenderer = memo(({ obj, objKey: key, entries, maxKeyLength }) => {
+import PluginTypography from '../PluginTypography';
+const ListRenderer = memo(({ hit, objKey: key, entries, maxKeyLength }) => {
     const theme = useTheme();
     const { t } = useTranslation();
     const allPrimitives = useMemo(() => entries.every(entry => !isObject(entry)), [entries]);
@@ -36,15 +36,15 @@ const ListRenderer = memo(({ obj, objKey: key, entries, maxKeyLength }) => {
                         marginBottom: allPrimitives ? 0 : theme.spacing(1)
                     }, children: allPrimitives ? key.padStart(maxKeyLength ?? key.length) : key }) }), _jsxs(Grid, { container: true, spacing: allPrimitives ? 1 : 4, ml: allPrimitives ? -1 : -4, overflow: "hidden", maxWidth: "100%", children: [uniqueEntries.map((entry, index) => {
                         if (Array.isArray(entry)) {
-                            return (_jsx(Grid, { item: true, xs: "auto", maxWidth: "100%", children: _jsx(ListRenderer, { obj: obj, objKey: `${key}.${index}`, entries: entry }) }, index));
+                            return (_jsx(Grid, { item: true, xs: "auto", maxWidth: "100%", children: _jsx(ListRenderer, { hit: hit, objKey: `${key}.${index}`, entries: entry }) }, index));
                         }
                         if (isPlainObject(entry)) {
                             return (_jsx(Grid, { item: true, xs: 'auto', maxWidth: "100%", minWidth: "350px", children: _jsx(ObjectRenderer, { parentKey: `${key}.${index}`, indent: true, data: entry }) }, index));
                         }
-                        return (_jsxs(Grid, { item: true, maxWidth: "100%", className: `${key}_${index}`.replace(/\./g, '_'), component: "code", display: "flex", flexDirection: "row", children: [_jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: entry, field: key.replace(/\.[0-9]+/g, ''), obj: obj, children: entry }), allPrimitives && index < uniqueEntries.length - 1 && _jsx("span", { children: "," })] }, entry));
+                        return (_jsxs(Grid, { item: true, maxWidth: "100%", className: `${key}_${index}`.replace(/\./g, '_'), component: "code", display: "flex", flexDirection: "row", children: [_jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: entry, field: key.replace(/\.[0-9]+/g, ''), hit: hit, children: entry }), allPrimitives && index < uniqueEntries.length - 1 && _jsx("span", { children: "," })] }, entry));
                     }), omittedDuplicates && (_jsx(Grid, { item: true, display: "flex", alignItems: "center", children: _jsx(Tooltip, { title: t('duplicates.omitted'), children: _jsx(InfoOutlined, { sx: { fontSize: '20px', ml: 1 }, color: "disabled" }) }) }))] })] }));
 });
-const ObjectRenderer = memo(({ obj: obj, data, parentKey, indent = false }) => {
+const ObjectRenderer = memo(({ hit, data, parentKey, indent = false }) => {
     const theme = useTheme();
     const entries = useMemo(() => {
         const unsorted = Object.entries(flatten(data, { safe: true })).map(([key, val]) => [key, val]);
@@ -56,10 +56,10 @@ const ObjectRenderer = memo(({ obj: obj, data, parentKey, indent = false }) => {
     }, [data]);
     const longestKey = useMemo(() => max(entries.map(([key]) => key.length)), [entries]);
     return (_jsxs(Stack, { direction: "row", overflow: "hidden", maxWidth: "100%", children: [indent && _jsx(Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: 'primary.main', borderWidth: '2px' } }), _jsx(Stack, { flex: 1, ml: 1, maxWidth: "100%", children: entries
-                    .filter(([__, val]) => !isNull(val) && !isUndefined(val) && !isEmpty(val) && !isBoolean(val) && !isNumber(val))
+                    .filter(([__, val]) => !isNull(val) && !isUndefined(val) && !isEmpty(val))
                     .map(([key, val]) => {
                     if (Array.isArray(val)) {
-                        return _jsx(ListRenderer, { obj: obj, maxKeyLength: longestKey, objKey: key, entries: val }, key);
+                        return _jsx(ListRenderer, { hit: hit, maxKeyLength: longestKey, objKey: key, entries: val }, key);
                     }
                     return (_jsxs("code", { className: (parentKey ? `${parentKey}.${key}` : key).replace(/\./g, '_'), style: {
                             display: 'grid',
@@ -75,14 +75,14 @@ const ObjectRenderer = memo(({ obj: obj, data, parentKey, indent = false }) => {
                                     paddingRight: theme.spacing(1),
                                     height: '100%',
                                     wordWrap: 'break-word'
-                                }, children: _jsx("code", { style: { maxWidth: '100%' }, children: key }) }), _jsx(Box, { display: "flex", alignItems: "start", children: _jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: val, field: (parentKey ? parentKey.concat('.', key) : key).replace(/\.[0-9]+/g, ''), obj: obj, children: val }) })] }, key));
+                                }, children: _jsx("code", { style: { maxWidth: '100%' }, children: key }) }), _jsx(Box, { display: "flex", alignItems: "start", children: _jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: val, field: (parentKey ? parentKey.concat('.', key) : key).replace(/\.[0-9]+/g, ''), hit: hit, children: val }) })] }, key));
                 }) })] }));
 });
-const Collapsible = memo(({ obj, title, data, query }) => {
+const Collapsible = memo(({ hit, title, data, query }) => {
     const throttler = useMemo(() => new Throttler(400), []);
     const [scores, setScores] = useState([]);
     const [results, setResults] = useState({});
-    const options = useMemo(() => Object.entries(data).map(([key, value]) => ({ key, value: value.toString() })), [data]);
+    const options = useMemo(() => Object.entries(data).map(([key, value]) => ({ key, value })), [data]);
     const keys = useMemo(() => options
         .flatMap(option => (isArray(option.value) ? Object.keys(flatten(option.value)) : []))
         .map(key => key.replace(/\d+/g, 'value'))
@@ -109,20 +109,20 @@ const Collapsible = memo(({ obj, title, data, query }) => {
     if (isEmpty(results)) {
         return null;
     }
-    return (_jsxs(Accordion, { defaultExpanded: true, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ArrowDropDown, {}), sx: { my: 0 }, children: _jsx(Typography, { children: title }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 0.5, justifyContent: "stretch", sx: styles, children: _jsx(ObjectRenderer, { obj: obj, showParentKey: true, data: results }) }) })] }));
+    return (_jsxs(Accordion, { defaultExpanded: true, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ArrowDropDown, {}), children: _jsx(Typography, { children: title }) }), _jsx(AccordionDetails, { children: _jsx(Stack, { spacing: 1, justifyContent: "stretch", sx: styles, children: _jsx(ObjectRenderer, { hit: hit, showParentKey: true, data: results }) }) })] }));
 });
-const ObjectDetails = ({ obj }) => {
+const HitDetails = ({ hit }) => {
     const { t } = useTranslation();
     const [query, setQuery] = useState('');
-    const groups = useMemo(() => groupBy(Object.entries(flatten(obj ?? {}, { safe: true })).filter(([key, value]) => !key.startsWith('__') &&
+    const groups = useMemo(() => groupBy(Object.entries(flatten(hit ?? {}, { safe: true })).filter(([key, value]) => !key.startsWith('__') &&
         key.includes('.') &&
         ['howler', 'labels'].every(prefix => !key.startsWith(prefix)) &&
-        (!isEmpty(value) || isNumber(value) || isBoolean(value))), ([key]) => key.split('.')[0]), [obj]);
+        !isEmpty(value)), ([key]) => key.split('.')[0]), [hit]);
     return (_jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { value: query, onChange: event => setQuery(event.target.value), label: t('overview.search') }), Object.entries(groups).map(([section, entries]) => {
-                return (_jsx(Collapsible, { obj: obj, query: query, title: section
+                return (_jsx(Collapsible, { hit: hit, query: query, title: section
                         .split('_')
                         .map(word => capitalize(word))
                         .join(' '), data: Object.fromEntries(entries) }, section));
             })] }));
 };
-export default memo(ObjectDetails);
+export default memo(HitDetails);

package/components/elements/hit/outlines/DefaultOutline.js

@@ -41,7 +41,7 @@ const DefaultOutline = ({ hit, fields, template, layout = HitLayout.NORMAL, read
                 if (!displayedData) {
                     return null;
                 }
-                return (_jsxs(React.Fragment, { children: [_jsx(Tooltip, { title: (config.indexes.hit[field]?.description ?? t('none')).split('\n')[0], children: _jsxs(Typography, { variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', fontWeight: "bold", children: [field, ":"] }) }), _jsx(PluginTypography, { context: "outline", variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', whiteSpace: "normal", sx: { width: '100%', wordBreak: 'break-all' }, value: displayedData, field: field, obj: hit, children: displayedData })] }, field));
+                return (_jsxs(React.Fragment, { children: [_jsx(Tooltip, { title: (config.indexes.hit[field]?.description ?? t('none')).split('\n')[0], children: _jsxs(Typography, { variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', fontWeight: "bold", children: [field, ":"] }) }), _jsx(PluginTypography, { context: "outline", variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', whiteSpace: "normal", sx: { width: '100%', wordBreak: 'break-all' }, value: displayedData, field: field, hit: hit, children: displayedData })] }, field));
             })] }));
 };
 export default memo(DefaultOutline);

package/components/elements/view/ViewTitle.js

@@ -21,5 +21,5 @@ export const ViewTitle = ({ title, type, query, sort, span }) => {
                             readonly: _jsx(Lock, { fontSize: "small" }),
                             global: _jsx(Language, { fontSize: "small" }),
                             personal: _jsx(Person, { fontSize: "small" })
-                        }[type] }), _jsx(Typography, { variant: "body1", children: t(title) })] }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: query }) }), (sort || span) && (_jsxs(Stack, { direction: "row", sx: { mt: 1 }, spacing: 1, children: [sort?.split(',').map(_sort => (_jsx(Chip, { size: "small", label: _sort.split(' ')[0], icon: _sort.endsWith('desc') ? _jsx(ArrowDownward, {}) : _jsx(ArrowUpward, {}) }, _sort.split(' ')[0]))), spanLabel && _jsx(Chip, { label: spanLabel })] }))] }));
+                        }[type] }), _jsx(Typography, { variant: "body1", children: t(title) })] }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: query }) }), (sort || span) && (_jsxs(Stack, { direction: "row", sx: { mt: 1 }, spacing: 1, children: [sort?.split(',').map(_sort => (_jsx(Chip, { size: "small", label: _sort.split(' ')[0], icon: _sort.endsWith('desc') ? _jsx(ArrowDownward, {}) : _jsx(ArrowUpward, {}) }, _sort.split(' ')[0]))), spanLabel && _jsx(Chip, { size: "small", label: spanLabel })] }))] }));
 };

package/components/hooks/useHitActions.d.ts

@@ -7,7 +7,7 @@ declare const useHitActions: (_hits: Hit | Hit[]) => {
     canAssess: boolean;
     loading: boolean;
     manage: (transition: string) => Promise<void>;
-    assess: (assessment: string, skipRationale?: boolean, providedRationale?: any) => Promise<void>;
+    assess: (assessment: string, skipRationale?: boolean) => Promise<void>;
     vote: (v: string) => Promise<void>;
     selectedVote: string;
 };

package/components/hooks/useHitActions.js

@@ -90,9 +90,9 @@ const useHitActions = (_hits) => {
             }
         }
     }, [dispatchApi, hits, selectedVote, updateHit, user.email]);
-    const assess = useCallback(async (assessment, skipRationale = false, providedRationale = null) => {
+    const assess = useCallback(async (assessment, skipRationale = false) => {
         const rationale = skipRationale
-            ? (providedRationale ?? t('rationale.default', { assessment }))
+            ? t('rationale.default', { assessment })
             : await new Promise(res => {
                 showModal(_jsx(RationaleModal, { hits: hits, onSubmit: _rationale => {
                         res(_rationale);