@cccsaurora/howler-ui 2.12.0-dev.30

package/dist/components/routes/hits/search/grid/HitRow.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { KeyboardArrowUp } from '@mui/icons-material';
+import { Box, Collapse, IconButton, lighten, Stack, TableCell, TableRow, Typography, useTheme } from '@mui/material';
+import { HitContext } from 'components/app/providers/HitProvider';
+import { HitSearchContext } from 'components/app/providers/HitSearchProvider';
+import { ParameterContext } from 'components/app/providers/ParameterProvider';
+import Assigned from 'components/elements/hit/elements/Assigned';
+import EscalationChip from 'components/elements/hit/elements/EscalationChip';
+import HitCard from 'components/elements/hit/HitCard';
+import { HitLayout } from 'components/elements/hit/HitLayout';
+import useHitSelection from 'components/hooks/useHitSelection';
+import { get } from 'lodash-es';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import EnhancedCell from './EnchancedCell';
+const HitRow = ({ hit, analyticIds, columns, columnWidths, collapseMainColumn }) => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
+    const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
+    const { onClick } = useHitSelection(response);
+    const [expandRow, setExpandRow] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsxs(TableRow, { id: hit.howler.id, onClick: ev => onClick(ev, hit), sx: [
+                    {
+                        transition: theme.transitions.create('background-color'),
+                        '&:hover': {
+                            cursor: 'pointer',
+                            backgroundColor: theme.palette.background.paper
+                        }
+                    },
+                    selectedHits.some(_hit => _hit.howler.id === hit.howler.id) && {
+                        backgroundColor: lighten(theme.palette.background.paper, 0.15)
+                    },
+                    selected === hit.howler.id && {
+                        backgroundColor: lighten(theme.palette.background.paper, 0.25)
+                    }
+                ], children: [_jsx(TableCell, { sx: {
+                            borderBottom: 'none',
+                            borderRight: 'thin solid',
+                            borderRightColor: 'divider',
+                            '& a': { color: 'text.primary' }
+                        }, children: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(IconButton, { size: "small", sx: [
+                                        { transform: 'rotate(0)', transition: theme.transitions.create('transform') },
+                                        expandRow && { transform: 'rotate(180deg)' }
+                                    ], onClick: e => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        setExpandRow(_expanded => !_expanded);
+                                    }, children: _jsx(KeyboardArrowUp, {}) }), _jsx(Collapse, { in: !collapseMainColumn, orientation: "horizontal", unmountOnExit: true, children: _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "nowrap", children: [_jsx(EscalationChip, { hit: hit, layout: HitLayout.DENSE, hideLabel: true }), _jsxs(Typography, { sx: { textWrap: 'nowrap', whiteSpace: 'nowrap', fontSize: 'inherit' }, children: [analyticIds[hit.howler.analytic] ? (_jsx(Link, { to: `/analytics/${analyticIds[hit.howler.analytic]}`, onClick: e => e.stopPropagation(), children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }), hit.howler.assignment !== 'unassigned' && _jsx(Assigned, { hit: hit, layout: HitLayout.DENSE, hideLabel: true })] }) })] }) }), columns.map(col => (_jsx(EnhancedCell, { className: `col-${col.replaceAll('.', '-')}`, value: get(hit, col) ?? t('none'), sx: columnWidths[col] ? { width: columnWidths[col] } : { width: '150px', maxWidth: '300px' } }, col))), _jsx(TableCell, { style: { borderBottom: 'none' } })] }, hit.howler.id), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 2, style: { paddingBottom: 0, paddingTop: 0 }, children: _jsx(Collapse, { in: expandRow, unmountOnExit: true, children: _jsx(Box, { width: "100%", maxWidth: "1200px", margin: 1, onClick: ev => onClick(ev, hit), children: _jsx(HitCard, { id: hit.howler.id, layout: HitLayout.NORMAL }) }) }) }) })] }));
+};
+export default memo(HitRow);

package/dist/components/routes/hits/search/shared/CustomSpan.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react").NamedExoticComponent<{}>;
+export default _default;

package/dist/components/routes/hits/search/shared/CustomSpan.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from '@mui/material';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { ParameterContext } from 'components/app/providers/ParameterProvider';
+import moment from 'moment';
+import { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+const CustomSpan = () => {
+    const { t } = useTranslation();
+    const span = useContextSelector(ParameterContext, ctx => ctx.span);
+    const startDate = useContextSelector(ParameterContext, ctx => (ctx.startDate ? moment(ctx.startDate) : null));
+    const setCustomSpan = useContextSelector(ParameterContext, ctx => ctx.setCustomSpan);
+    const endDate = useContextSelector(ParameterContext, ctx => (ctx.endDate ? moment(ctx.endDate) : null));
+    useEffect(() => {
+        if (span?.endsWith('custom') && (!startDate || !endDate)) {
+            setCustomSpan(moment().subtract(3, 'days').toISOString(), moment().toISOString());
+        }
+    }, [endDate, setCustomSpan, span, startDate]);
+    return span?.endsWith('custom') ? (_jsx(LocalizationProvider, { dateAdapter: AdapterMoment, children: _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: [_jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.start'), value: startDate ? moment(startDate) : moment().subtract(1, 'days'), maxDate: endDate, onChange: (newStartDate) => setCustomSpan(newStartDate.toISOString(), endDate.toISOString()), ampm: false, disableFuture: true }), _jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.end'), value: endDate, minDate: startDate, onChange: (newEndDate) => setCustomSpan(startDate.toISOString(), newEndDate.toISOString()), ampm: false, disableFuture: true })] }) })) : null;
+};
+export default memo(CustomSpan);

package/dist/components/routes/hits/search/shared/HitFilter.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react").NamedExoticComponent<{
+    size?: "small" | "medium";
+}>;
+export default _default;

package/dist/components/routes/hits/search/shared/HitFilter.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, Stack, TextField } from '@mui/material';
+import api from 'api';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import { ParameterContext } from 'components/app/providers/ParameterProvider';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+import { sanitizeLuceneQuery } from 'utils/stringUtils';
+const ACCEPTED_LOOKUPS = [
+    'howler.assessment',
+    'howler.escalation',
+    'howler.analytic',
+    'howler.detection',
+    'event.provider',
+    'organization.name'
+];
+const HitFilter = ({ size }) => {
+    const { t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    const savedFilter = useContextSelector(ParameterContext, ctx => ctx.filter);
+    const setSavedFilter = useContextSelector(ParameterContext, ctx => ctx.setFilter);
+    const [category, setCategory] = useState(ACCEPTED_LOOKUPS[0]);
+    const [filter, setFilter] = useState('');
+    const [customLookups, setCustomLookups] = useState([]);
+    useEffect(() => {
+        if (savedFilter) {
+            const [_category, _filter] = (savedFilter || ':').split(':');
+            if (_category) {
+                setCategory(_category);
+            }
+            if (_filter) {
+                setFilter(_filter);
+            }
+            if (_category && _filter) {
+                setSavedFilter(`${_category}:${_filter}`);
+            }
+        }
+    }, [setSavedFilter, savedFilter]);
+    const onCategoryChange = useCallback(async (_, _category) => {
+        setCategory(_category);
+        setFilter('');
+        setSavedFilter(null);
+        if (!config.lookups[_category]) {
+            const facets = await api.search.facet.hit.post(_category, { query: 'howler.id:*' });
+            setCustomLookups(Object.keys(facets));
+        }
+        else {
+            setCustomLookups([]);
+        }
+    }, [config.lookups, setSavedFilter]);
+    const onValueChange = useCallback((_, value) => {
+        setFilter(value);
+        if (value) {
+            const newFilter = `${category}:"${sanitizeLuceneQuery(value)}"`;
+            setSavedFilter(newFilter);
+        }
+        else {
+            setSavedFilter(null);
+        }
+    }, [category, setSavedFilter]);
+    return (_jsxs(Stack, { direction: "row", spacing: 1, sx: { flex: 1.75 }, children: [_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '200px' }, size: size ?? 'small', value: category, options: ACCEPTED_LOOKUPS, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.fields') }), onChange: onCategoryChange }), _jsx(Autocomplete, { fullWidth: true, freeSolo: true, sx: { minWidth: '150px' }, disabled: !category, size: size ?? 'small', value: filter?.replaceAll('"', '').replaceAll('\\-', '-') || '', options: config.lookups[category] ? config.lookups[category] : customLookups, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.filter.values') }), getOptionLabel: option => t(option), onChange: onValueChange })] }));
+};
+export default memo(HitFilter);

package/dist/components/routes/hits/search/shared/HitSort.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react").NamedExoticComponent<{
+    size?: "small" | "medium";
+}>;
+export default _default;

package/dist/components/routes/hits/search/shared/HitSort.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, MenuItem, Select, Stack, TextField } from '@mui/material';
+import { ParameterContext } from 'components/app/providers/ParameterProvider';
+import { ViewContext } from 'components/app/providers/ViewProvider';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import CustomSort from '../CustomSort';
+const CUSTOM = '__custom__';
+const ACCEPTED_SORTS = [
+    'event.created',
+    'howler.assessment',
+    'howler.escalation',
+    'howler.analytic',
+    'howler.detection',
+    'event.provider',
+    'organization.name',
+    CUSTOM
+];
+const HitSort = ({ size = 'small' }) => {
+    const { t } = useTranslation();
+    const location = useLocation();
+    const routeParams = useParams();
+    const views = useContextSelector(ViewContext, ctx => ctx.views);
+    const savedSort = useContextSelector(ParameterContext, ctx => ctx.sort);
+    const setSavedSort = useContextSelector(ParameterContext, ctx => ctx.setSort);
+    const sortEntries = useMemo(() => savedSort.split(',').filter(part => !!part), [savedSort]);
+    /**
+     * The currently selected field when not using custom sorting
+     */
+    const field = useMemo(() => (sortEntries.length === 1 ? sortEntries[0].split(' ')[0] : null), [sortEntries]);
+    /**
+     * The currently selected sorter when not using custom sorting
+     */
+    const sort = useMemo(() => (sortEntries.length === 1 ? sortEntries[0].split(' ')[1] : null), [sortEntries]);
+    /**
+     * Should the custom sorter be shown? Defaults to true if there's more than one sort field, or we're sorting on a field not supported by the default dropdown
+     */
+    const [showCustomSort, setShowCustomSort] = useState(sortEntries.length > 1 || (sortEntries.length > 0 && !ACCEPTED_SORTS.includes(sortEntries[0]?.split(' ')[0])));
+    const viewId = useMemo(() => (location.pathname.startsWith('/views') ? routeParams.id : null), [location.pathname, routeParams.id]);
+    /**
+     * This handles changing the sort if the basic sorter is used, OR enables the custom sorting.
+     */
+    const handleChange = useCallback((value) => {
+        if (value === CUSTOM) {
+            setShowCustomSort(true);
+        }
+        else {
+            setSavedSort(`${value} ${sort}`);
+        }
+    }, [setSavedSort, sort]);
+    useEffect(() => {
+        if (viewId) {
+            const selectedView = views.find(_view => _view.view_id === viewId);
+            if (selectedView?.sort && !location.search.includes('sort')) {
+                setSavedSort(selectedView.sort);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [views, viewId]);
+    return !showCustomSort ? (_jsxs(Stack, { direction: "row", spacing: 1, sx: { flex: 1.5 }, children: [_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '175px' }, size: size, value: field, options: ACCEPTED_SORTS, getOptionLabel: option => (option === CUSTOM ? t('hit.search.custom') : option), isOptionEqualToValue: (option, value) => option === value || (!value && option === ACCEPTED_SORTS[0]), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.sort.fields') }), onChange: (_, value) => handleChange(value) }), _jsxs(Select, { size: size, sx: { minWidth: '150px' }, value: sort, onChange: e => setSavedSort(`${field} ${e.target.value}`), children: [_jsx(MenuItem, { value: "asc", children: t('asc') }), _jsx(MenuItem, { value: "desc", children: t('desc') })] })] })) : (_jsx(CustomSort, {}));
+};
+export default memo(HitSort);

package/dist/components/routes/hits/search/shared/QuerySettings.d.ts

@@ -0,0 +1,6 @@
+import { type SxProps } from '@mui/material';
+declare const _default: import("react").NamedExoticComponent<{
+    verticalSorters?: boolean;
+    boxSx?: SxProps;
+}>;
+export default _default;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Stack } from '@mui/material';
+import { HitSearchContext } from 'components/app/providers/HitSearchProvider';
+import { ViewContext } from 'components/app/providers/ViewProvider';
+import { memo } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import CustomSpan from './CustomSpan';
+import HitFilter from './HitFilter';
+import HitSort from './HitSort';
+import SearchSpan from './SearchSpan';
+const QuerySettings = ({ verticalSorters = false, boxSx }) => {
+    const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
+    const selectedView = useContextSelector(ViewContext, ctx => ctx.views?.find(val => val.view_id === viewId));
+    return (_jsxs(Box, { sx: boxSx ?? { position: 'relative', maxWidth: '1200px' }, children: [_jsxs(Stack, { direction: verticalSorters ? 'column' : 'row', justifyContent: "space-between", spacing: 1, divider: !verticalSorters && _jsx(Divider, { flexItem: true, orientation: "vertical" }), sx: [
+                    viewId &&
+                        !selectedView && {
+                        opacity: 0.25,
+                        pointerEvents: 'none'
+                    }
+                ], children: [_jsx(HitSort, {}), _jsx(HitFilter, {}), _jsx(SearchSpan, {})] }), _jsx(CustomSpan, {})] }));
+};
+export default memo(QuerySettings);

package/dist/components/routes/hits/search/shared/SearchSpan.d.ts

@@ -0,0 +1,5 @@
+declare const _default: import("react").NamedExoticComponent<{
+    omitCustom?: boolean;
+    size?: "small" | "medium";
+}>;
+export default _default;

package/dist/components/routes/hits/search/shared/SearchSpan.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Autocomplete, TextField } from '@mui/material';
+import { ParameterContext } from 'components/app/providers/ParameterProvider';
+import { ViewContext } from 'components/app/providers/ViewProvider';
+import { memo, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { convertLuceneToDate } from 'utils/utils';
+const DATE_RANGES = [
+    'date.range.1.day',
+    'date.range.3.day',
+    'date.range.1.week',
+    'date.range.1.month',
+    'date.range.all',
+    'date.range.custom'
+];
+const SearchSpan = ({ omitCustom = false, size }) => {
+    const { t } = useTranslation();
+    const location = useLocation();
+    const routeParams = useParams();
+    const span = useContextSelector(ParameterContext, ctx => ctx.span);
+    const setSpan = useContextSelector(ParameterContext, ctx => ctx.setSpan);
+    const viewId = useMemo(() => (location.pathname.startsWith('/views') ? routeParams.id : null), [location.pathname, routeParams.id]);
+    const selectedView = useContextSelector(ViewContext, ctx => ctx.views?.find(_view => _view.view_id === viewId));
+    useEffect(() => {
+        if (!selectedView?.span || location.search.includes('span')) {
+            return;
+        }
+        if (selectedView.span.includes(':')) {
+            setSpan(convertLuceneToDate(selectedView.span));
+        }
+        else {
+            setSpan(selectedView.span);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedView]);
+    return (_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '150px', flex: 1 }, size: size ?? 'small', value: span, options: omitCustom ? DATE_RANGES.slice(0, DATE_RANGES.length - 1) : DATE_RANGES, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.span') }), getOptionLabel: option => t(option), onChange: (_, value) => setSpan(value), disableClearable: true }));
+};
+export default memo(SearchSpan);

package/dist/components/routes/hits/view/HitViewer.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+export declare enum Orientation {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+declare const HitViewer: FC;
+export default HitViewer;

package/dist/components/routes/hits/view/HitViewer.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Code, Comment, DataObject, History, LinkSharp, QueryStats, ViewAgenda } from '@mui/icons-material';
+import { Badge, Box, CardContent, Collapse, IconButton, Skeleton, Stack, Tab, Tabs, Tooltip, useMediaQuery, useTheme } from '@mui/material';
+import PageCenter from 'commons/components/pages/PageCenter';
+import { AnalyticContext } from 'components/app/providers/AnalyticProvider';
+import { DossierContext } from 'components/app/providers/DossierProvider';
+import { HitContext } from 'components/app/providers/HitProvider';
+import { OverviewContext } from 'components/app/providers/OverviewProvider';
+import { TemplateContext } from 'components/app/providers/TemplateProvider';
+import FlexOne from 'components/elements/addons/layout/FlexOne';
+import HowlerCard from 'components/elements/display/HowlerCard';
+import BundleButton from 'components/elements/display/icons/BundleButton';
+import SocketBadge from 'components/elements/display/icons/SocketBadge';
+import JSONViewer from 'components/elements/display/json/JSONViewer';
+import HitActions from 'components/elements/hit/HitActions';
+import HitBanner from 'components/elements/hit/HitBanner';
+import HitComments from 'components/elements/hit/HitComments';
+import HitDetails from 'components/elements/hit/HitDetails';
+import HitLabels from 'components/elements/hit/HitLabels';
+import { HitLayout } from 'components/elements/hit/HitLayout';
+import HitNotebooks from 'components/elements/hit/HitNotebooks';
+import HitOutline from 'components/elements/hit/HitOutline';
+import HitOverview from 'components/elements/hit/HitOverview';
+import HitRelated from 'components/elements/hit/HitRelated';
+import HitWorklog from 'components/elements/hit/HitWorklog';
+import PivotLink from 'components/elements/hit/related/PivotLink';
+import RelatedLink from 'components/elements/hit/related/RelatedLink';
+import { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import useMyUserList from 'components/hooks/useMyUserList';
+import uniqBy from 'lodash-es/uniqBy';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from 'utils/constants';
+import { getUserList } from 'utils/hitFunctions';
+import { tryParse } from 'utils/utils';
+import LeadRenderer from './LeadRenderer';
+export var Orientation;
+(function (Orientation) {
+    Orientation["VERTICAL"] = "vertical";
+    Orientation["HORIZONTAL"] = "horizontal";
+})(Orientation || (Orientation = {}));
+const HitViewer = () => {
+    const { t, i18n } = useTranslation();
+    const params = useParams();
+    const navigate = useNavigate();
+    const theme = useTheme();
+    const isUnderLg = useMediaQuery(theme.breakpoints.down('lg'));
+    const [orientation, setOrientation] = useMyLocalStorageItem(StorageKey.VIEWER_ORIENTATION, Orientation.VERTICAL);
+    const refreshTemplates = useContextSelector(TemplateContext, ctx => ctx.refresh);
+    const { getAnalyticFromName } = useContext(AnalyticContext);
+    const { getMatchingOverview, refresh: refreshOverviews } = useContext(OverviewContext);
+    const getMatchingDossiers = useContextSelector(DossierContext, ctx => ctx.getMatchingDossiers);
+    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
+    const hit = useContextSelector(HitContext, ctx => ctx.hits[params.id]);
+    const [userIds, setUserIds] = useState(new Set());
+    const users = useMyUserList(userIds);
+    const [tab, setTab] = useState('details');
+    const [analytic, setAnalytic] = useState();
+    const [dossiers, setDossiers] = useState([]);
+    const fetchData = useCallback(async () => {
+        try {
+            let existingHit = hit;
+            if (!existingHit) {
+                existingHit = await getHit(params.id, true);
+            }
+            setUserIds(getUserList(existingHit));
+            setAnalytic(await getAnalyticFromName(existingHit.howler.analytic));
+        }
+        catch (err) {
+            if (err.cause?.api_status_code === 404) {
+                navigate('/404');
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getAnalyticFromName, getHit, params.id, navigate]);
+    useEffect(() => {
+        if (isUnderLg) {
+            setOrientation(Orientation.HORIZONTAL);
+        }
+    }, [isUnderLg, setOrientation]);
+    useEffect(() => {
+        fetchData();
+    }, [params.id, fetchData]);
+    const onOrientationChange = useCallback(() => setOrientation(orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL), [orientation, setOrientation]);
+    const matchingOverview = useMemo(() => getMatchingOverview(hit), [getMatchingOverview, hit]);
+    useEffect(() => {
+        refreshTemplates();
+        refreshOverviews();
+    }, [refreshOverviews, refreshTemplates]);
+    useEffect(() => {
+        if (matchingOverview && tab === 'details') {
+            setTab('overview');
+        }
+        else if (!matchingOverview && tab === 'overview') {
+            setTab('details');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [matchingOverview]);
+    const tabContent = useMemo(() => {
+        if (!tab || !hit) {
+            return;
+        }
+        return {
+            overview: () => _jsx(HitOverview, { hit: hit }),
+            details: () => _jsx(HitDetails, { hit: hit }),
+            hit_comments: () => _jsx(HitComments, { hit: hit, users: users }),
+            hit_raw: () => _jsx(JSONViewer, { data: hit }),
+            hit_data: () => _jsx(JSONViewer, { data: hit?.howler?.data?.map(entry => tryParse(entry)), collapse: false }),
+            hit_worklog: () => _jsx(HitWorklog, { hit: hit, users: users }),
+            hit_related: () => _jsx(HitRelated, { hit: hit }),
+            ...Object.fromEntries(hit?.howler.dossier?.map((lead, index) => ['lead:' + index, () => _jsx(LeadRenderer, { lead: lead })]) ?? []),
+            ...Object.fromEntries(dossiers.flatMap((_dossier, dossierIndex) => _dossier.leads?.map((_lead, leadIndex) => [
+                `external-lead:${dossierIndex}:${leadIndex}`,
+                () => _jsx(LeadRenderer, { lead: _lead, hit: hit })
+            ])))
+        }[tab]?.();
+    }, [dossiers, hit, tab, users]);
+    useEffect(() => {
+        if (!hit) {
+            return;
+        }
+        getMatchingDossiers(hit.howler.id).then(setDossiers);
+    }, [getMatchingDossiers, hit]);
+    if (!hit) {
+        return (_jsx(PageCenter, { children: _jsx(Skeleton, { variant: "rounded", height: "520px" }) }));
+    }
+    return (_jsx(PageCenter, { maxWidth: "1500px", children: _jsxs(Box, { sx: {
+                display: 'grid',
+                position: 'relative',
+                gridTemplateColumns: `1fr ${orientation === 'vertical' ? '300px' : '0px'}`,
+                alignItems: 'stretch',
+                gap: theme.spacing(2),
+                transition: `${theme.transitions.duration.standard}ms`,
+                mb: 1
+            }, textAlign: "left", children: [_jsx(Collapse, { sx: { gridColumn: '1 / span 2', '& [class*=MuiStack-root]': { padding: '0 !important' } }, in: orientation === 'horizontal', children: _jsx(HitActions, { hit: hit, orientation: "horizontal" }) }), _jsxs(Box, { sx: {
+                        display: 'flex',
+                        '& > .MuiPaper-root': { flex: 1 },
+                        mr: orientation === 'vertical' ? 0 : -2
+                    }, children: [_jsx(HowlerCard, { tabIndex: 0, sx: { position: 'relative' }, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: HitLayout.COMFY, useListener: true }), _jsx(HitOutline, { hit: hit, layout: HitLayout.COMFY }), _jsx(HitLabels, { hit: hit }), (hit?.howler?.links?.length > 0 ||
+                                        analytic?.notebooks?.length > 0 ||
+                                        dossiers.filter(_dossier => _dossier.pivots?.length > 0).length > 0) && (_jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [analytic?.notebooks?.length > 0 && _jsx(HitNotebooks, { analytic: analytic, hit: hit }), hit?.howler?.links?.length > 0 &&
+                                                uniqBy(hit.howler.links, 'href')
+                                                    .slice(0, 3)
+                                                    .map(l => _jsx(RelatedLink, { compact: true, ...l }, l.href)), dossiers.flatMap(_dossier => (_dossier.pivots ?? []).map((_pivot, index) => (
+                                            // eslint-disable-next-line react/no-array-index-key
+                                            _jsx(PivotLink, { pivot: _pivot, hit: hit, compact: true }, _dossier.dossier_id + index))))] }))] }) }), !isUnderLg && (_jsxs(Stack, { spacing: 1, sx: {
+                                position: 'absolute',
+                                top: theme.spacing(2),
+                                right: theme.spacing(-6)
+                            }, children: [_jsx(Tooltip, { title: t('page.hits.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('hit.panel.analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles })] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !matchingOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), matchingOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
+                            // eslint-disable-next-line react/no-array-index-key
+                            , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => _dossier.leads?.map((_lead, leadIndex) => (_jsx(Tab
+                            // eslint-disable-next-line react/no-array-index-key
+                            , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_lead.icon && _jsx(Icon, { icon: _lead.icon }), _jsx("span", { children: i18n.language === 'en' ? _lead.label.en : _lead.label.fr })] }), value: `external-lead:${dossierIndex}:${leadIndex}`, onClick: () => setTab(`external-lead:${dossierIndex}:${leadIndex}`) }, `external-lead:${dossierIndex}:${leadIndex}`)))), _jsx(FlexOne, {}), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.data'), children: _jsx(DataObject, {}) }), value: "hit_data", onClick: () => setTab('hit_data'), disabled: !hit?.howler?.data }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.json'), children: _jsx(Code, {}) }), value: "hit_raw", onClick: () => setTab('hit_raw') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.comments'), children: _jsx(Badge, { sx: {
+                                            '& > .MuiBadge-badge': {
+                                                backgroundColor: theme.palette.divider,
+                                                zIndex: 1,
+                                                right: theme.spacing(-0.5)
+                                            },
+                                            '& > svg': { zIndex: 2 }
+                                        }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.worklog'), children: _jsx(History, {}) }), value: "hit_worklog", onClick: () => setTab('hit_worklog') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.related'), children: _jsx(LinkSharp, {}) }), value: "hit_related", onClick: () => setTab('hit_related') })] }) }), _jsx(Box, { sx: {
+                        gridColumn: '1 / span 2',
+                        '& > div': { padding: 0 },
+                        '& .react-json-view': { backgroundColor: 'transparent !important' }
+                    }, children: tabContent })] }) }));
+};
+export default HitViewer;

package/dist/components/routes/hits/view/LeadRenderer.d.ts

@@ -0,0 +1,7 @@
+import type { Hit } from 'models/entities/generated/Hit';
+import type { Lead } from 'models/entities/generated/Lead';
+declare const _default: import("react").NamedExoticComponent<{
+    lead: Lead;
+    hit?: Hit;
+}>;
+export default _default;

package/dist/components/routes/hits/view/LeadRenderer.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Stack, Typography } from '@mui/material';
+import HandlebarsMarkdown from 'components/elements/display/HandlebarsMarkdown';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+const LeadRenderer = ({ lead, hit }) => {
+    const { t } = useTranslation();
+    const pluginStore = usePluginStore();
+    if (lead.format === 'markdown') {
+        return (_jsx(Box, { sx: {
+                mt: -2
+            }, children: _jsx(HandlebarsMarkdown, { disableLinks: true, md: lead.content, object: hit ?? lead }) }));
+    }
+    const pluginLead = pluginStore.executeFunction(`lead.${lead.format}`, lead.content, lead.metadata);
+    if (pluginLead) {
+        return pluginLead;
+    }
+    return (_jsxs(Stack, { p: 3, direction: "column", spacing: 2, alignItems: "center", children: [_jsx(Typography, { variant: "h3", color: "error.light", children: t('lead.invalid') }), _jsx(Divider, { flexItem: true }), _jsx(Typography, { variant: "body1", children: t('lead.invalid.description') })] }));
+};
+export default memo(LeadRenderer);

package/dist/components/routes/home/AddNewCard.d.ts

@@ -0,0 +1,7 @@
+import type { HowlerUser } from 'models/entities/HowlerUser';
+import type { FC } from 'react';
+declare const AddNewCard: FC<{
+    dashboard: HowlerUser['dashboard'];
+    addCard: (newCard: any) => void;
+}>;
+export default AddNewCard;

package/dist/components/routes/home/AddNewCard.js

@@ -0,0 +1,53 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check } from '@mui/icons-material';
+import { Autocomplete, Box, Card, CardContent, CardHeader, Divider, FormControl, Grid, InputLabel, MenuItem, Select, Slider, Stack, TextField, Typography } from '@mui/material';
+import api from 'api';
+import { ViewContext } from 'components/app/providers/ViewProvider';
+import CustomButton from 'components/elements/addons/buttons/CustomButton';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+const TYPES = {
+    view: ['viewId', 'limit'],
+    analytic: ['analyticId', 'type']
+};
+const VISUALIZATIONS = ['assessment', 'created', 'escalation', 'status', 'detection'];
+const AddNewCard = ({ dashboard, addCard }) => {
+    const { t } = useTranslation();
+    const views = useContextSelector(ViewContext, ctx => ctx.views ?? []);
+    const [selectedType, setSelectedType] = useState('');
+    const [analytics, setAnalytics] = useState([]);
+    const [config, _setConfig] = useState({});
+    const setConfig = useCallback((key, value) => _setConfig(_config => ({ ..._config, [key]: value })), []);
+    const _addCard = useCallback(() => {
+        if (!selectedType) {
+            return;
+        }
+        addCard({
+            entry_id: selectedType === 'view' ? config.viewId : `${config.analyticId}-${config.type}`,
+            type: selectedType,
+            config: JSON.stringify(config)
+        });
+    }, [addCard, config, selectedType]);
+    useEffect(() => {
+        api.search.analytic.post({ query: '*:*' }).then(result => setAnalytics(result.items ?? []));
+    }, []);
+    useEffect(() => {
+        if (selectedType === 'view') {
+            _setConfig({
+                limit: 3
+            });
+        }
+        else {
+            _setConfig({});
+        }
+    }, [selectedType]);
+    return (_jsx(Grid, { item: true, xs: 12, md: 6, children: _jsxs(Card, { variant: "outlined", sx: { height: '100%' }, children: [_jsx(CardHeader, { title: t('route.home.add'), subheader: _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('route.home.add.description') }) }), _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.type') }), _jsx(Select, { value: selectedType, onChange: event => setSelectedType(event.target.value), label: t('route.home.add.type'), children: Object.keys(TYPES).map(type => (_jsx(MenuItem, { value: type, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.type.${type}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.type.${type}.description`) })] }) }, type))) })] }), selectedType && _jsx(Divider, { flexItem: true }), selectedType === 'analytic' && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: t('route.home.add.analytic.title') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.analytic.description') }), _jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('analyticId', opt.analytic_id), options: analytics, filterOptions: (options, state) => options.filter(opt => opt.name.toLowerCase().includes(state.inputValue.toLowerCase()) ||
+                                            opt.description?.split('\n')[0]?.toLowerCase().includes(state.inputValue.toLowerCase())), renderOption: (props, option) => (_createElement("li", { ...props, key: option.analytic_id },
+                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: option.name }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description?.split('\n')[0] })] }))), getOptionLabel: option => option.name, renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.analytic') }) }), _jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.visualization') }), _jsx(Select, { value: config.type ?? '', onChange: event => setConfig('type', event.target.value), label: t('route.home.add.visualization'), children: VISUALIZATIONS.map(viz => (_jsx(MenuItem, { value: viz, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.visualization.${viz}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.visualization.${viz}.description`) })] }) }, viz))) })] })] })), selectedType === 'view' && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('viewId', opt.view_id), options: views, filterOptions: (options, state) => options.filter(opt => !dashboard?.find(entry => entry.type === 'view' && JSON.parse(entry.config).viewId === opt.view_id) &&
+                                            (opt.title.toLowerCase().includes(state.inputValue.toLowerCase()) ||
+                                                opt.query.toLowerCase().includes(state.inputValue.toLowerCase()))), renderOption: (props, option) => (_createElement("li", { ...props, key: option.view_id },
+                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(option.title) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.query })] }))), getOptionLabel: option => t(option.title), renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.view') }) }), _jsx(Typography, { variant: "body1", sx: { pt: 1 }, children: t('route.home.add.limit') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.limit.description') }), _jsx(Box, { sx: { px: 0.5 }, children: _jsx(Slider, { value: config.limit ?? 3, valueLabelDisplay: "auto", onChange: (_, value) => setConfig('limit', value), min: 1, max: 10, step: 1, marks: true }) })] })), _jsx(Stack, { direction: "row", justifyContent: "end", children: _jsx(CustomButton, { variant: "outlined", size: "small", color: "primary", startIcon: _jsx(Check, {}), disabled: !selectedType || TYPES[selectedType]?.filter(field => !config[field])?.length > 0, onClick: _addCard, children: t('create') }) })] }) })] }) }));
+};
+export default AddNewCard;

package/dist/components/routes/home/AnalyticCard.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+export interface AnalyticSettings {
+    analyticId: string;
+    type: 'assessment' | 'created' | 'escalation';
+}
+declare const AnalyticCard: FC<AnalyticSettings>;
+export default AnalyticCard;