@cccsaurora/howler-ui 2.12.0-dev.168

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

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

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Close, Edit, SavedSearch } from '@mui/icons-material';
+import { Alert, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+const ViewLink = () => {
+    const { t } = useTranslation();
+    const query = useContextSelector(ParameterContext, ctx => ctx.query);
+    const sort = useContextSelector(ParameterContext, ctx => ctx.sort);
+    const span = useContextSelector(ParameterContext, ctx => ctx.span);
+    const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
+    const viewsReady = useContextSelector(ViewContext, ctx => ctx.ready);
+    const selectedView = useContextSelector(ViewContext, ctx => ctx.views?.find(val => val.view_id === viewId));
+    const viewUrl = useMemo(() => {
+        if (viewId) {
+            return `/views/${viewId}/edit`;
+        }
+        const keys = [];
+        if (query) {
+            keys.push(`query=${query}`);
+        }
+        if (sort) {
+            keys.push(`sort=${sort}`);
+        }
+        if (span) {
+            keys.push(`span=${span}`);
+        }
+        return keys.length > 0 ? `/views/create?${keys.join('&')}` : '/views/create';
+    }, [query, sort, span, viewId]);
+    const viewButton = useMemo(() => (_jsx(Tooltip, { title: viewId ? t('route.views.edit') : t('route.views.create'), children: _jsx(IconButton, { size: "small", component: Link, disabled: (!viewId && !query) || span?.endsWith('custom'), to: viewUrl, children: viewId ? _jsx(Edit, { fontSize: "small" }) : _jsx(SavedSearch, {}) }) })), [query, span, t, viewId, viewUrl]);
+    if (!viewId) {
+        return null;
+    }
+    return selectedView ? (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Tooltip, { title: selectedView.query, children: _jsx(Typography, { sx: { color: 'text.primary' }, variant: "body1", component: Link, to: `/views/${selectedView.view_id}/edit`, children: t(selectedView.title) }) }), viewButton] })) : (viewsReady && (_jsx(Alert, { variant: "outlined", severity: "error", action: _jsx(IconButton, { size: "small", component: Link, to: "/search", children: _jsx(Close, { fontSize: "small" }) }), children: t('view.notfound') })));
+};
+export default memo(ViewLink);

package/components/routes/hits/search/grid/AddColumnModal.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import("react").NamedExoticComponent<{
+    open: boolean;
+    onClose: () => void;
+    anchorEl: HTMLElement;
+    addColumn: (key: string) => void;
+    columns: string[];
+}>;
+export default _default;

package/components/routes/hits/search/grid/AddColumnModal.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Add, Check } from '@mui/icons-material';
+import { Autocomplete, Chip, Divider, Grid, IconButton, Popover, Stack, TextField } from '@mui/material';
+import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
+import { sortBy, uniq } from 'lodash-es';
+import { memo, useContext, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+const AddColumnModal = ({ open, onClose, anchorEl, addColumn, columns }) => {
+    const { t } = useTranslation();
+    const { hitFields } = useContext(FieldContext);
+    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
+    const getMatchingTemplate = useContextSelector(TemplateContext, ctx => ctx.getMatchingTemplate);
+    const [columnToAdd, setColumnToAdd] = useState(null);
+    const options = useMemo(() => hitFields.map(field => field.key), [hitFields]);
+    const suggestions = useMemo(() => uniq((response?.items ?? []).flatMap(_hit => getMatchingTemplate(_hit)?.keys ?? [])), [getMatchingTemplate, response?.items]);
+    return (_jsx(Popover, { open: open, onClose: onClose, anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsxs(Stack, { spacing: 1, p: 1, width: "500px", children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Autocomplete, { sx: { flex: 1 }, size: "small", options: options, value: columnToAdd, renderInput: params => _jsx(TextField, { fullWidth: true, placeholder: t('hit.fields'), ...params }), onChange: (_ev, value) => setColumnToAdd(value) }), _jsx(IconButton, { disabled: !columnToAdd, onClick: () => {
+                                addColumn(columnToAdd);
+                                setColumnToAdd(null);
+                            }, children: _jsx(Add, {}) })] }), _jsx(Divider, { orientation: "horizontal" }), _jsx(Grid, { container: true, spacing: 1, children: sortBy(suggestions.map(key => ({ key, used: columns.includes(key) })), 'used').map(({ key, used }) => {
+                        return (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", variant: "outlined", color: used ? 'success' : 'default', label: key, icon: used ? _jsx(Check, {}) : _jsx(Add, {}), onClick: () => addColumn(key), disabled: used }) }, key));
+                    }) })] }) }));
+};
+export default memo(AddColumnModal);

package/components/routes/hits/search/grid/ColumnHeader.d.ts

@@ -0,0 +1,8 @@
+import { type FC, type SetStateAction } from 'react';
+declare const ColumnHeader: FC<{
+    width: string;
+    col: string;
+    setColumns: (val: SetStateAction<string[]>) => void;
+    onMouseDown: (col: string, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}>;
+export default ColumnHeader;

package/components/routes/hits/search/grid/ColumnHeader.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { DragIndicator, Remove } from '@mui/icons-material';
+import { Box, IconButton, Stack, TableCell, Tooltip, useTheme } from '@mui/material';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
+import { useContext } from 'react';
+const ColumnHeader = ({ col, width, setColumns, onMouseDown }) => {
+    const theme = useTheme();
+    const { config } = useContext(ApiConfigContext);
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: col });
+    return (_jsx(TableCell, { ref: setNodeRef, sx: {
+            borderRight: 'thin solid',
+            borderRightColor: 'divider',
+            py: 0.5,
+            position: 'relative'
+        }, style: { transform: CSS.Translate.toString(transform), transition }, children: _jsxs(Stack, { className: `col-${col.replaceAll('.', '-')}`, direction: "row", spacing: 1, alignItems: "center", sx: [{ minWidth: '220px' }, !!width ? { width, maxWidth: width } : { maxWidth: '300px' }], children: [_jsx(Tooltip, { title: config.indexes.hit[col].description, children: _jsx("span", { children: col }) }), _jsx(FlexOne, {}), _jsx(IconButton, { size: "small", sx: { fontSize: '1rem' }, onClick: () => setColumns(_columns => _columns.filter(_col => _col !== col)), children: _jsx(Remove, { fontSize: "inherit" }) }), _jsx(DragIndicator, { fontSize: "small", sx: { cursor: 'grab' }, ...attributes, ...listeners }), _jsx(Box, { sx: {
+                        position: 'absolute',
+                        top: theme.spacing(0.75),
+                        bottom: theme.spacing(0.75),
+                        right: -3,
+                        width: '5px',
+                        borderRight: 'thin solid',
+                        borderLeft: 'thin solid',
+                        borderColor: 'divider',
+                        cursor: 'col-resize'
+                    }, onMouseDown: e => onMouseDown(col, e) })] }) }));
+};
+export default ColumnHeader;

package/components/routes/hits/search/grid/EnhancedCell.d.ts

@@ -0,0 +1,7 @@
+import { type SxProps } from '@mui/material';
+declare const _default: import("react").NamedExoticComponent<{
+    value: string;
+    sx?: SxProps;
+    className: string;
+}>;
+export default _default;

package/components/routes/hits/search/grid/EnhancedCell.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react/no-array-index-key */
+import { Stack, TableCell } from '@mui/material';
+import PluginTypography from '@cccsaurora/howler-ui/components/elements/PluginTypography';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+const EnhancedCell = ({ value: rawValue, sx = {}, className }) => {
+    const { t } = useTranslation();
+    if (!rawValue) {
+        return _jsx(TableCell, { style: { borderBottom: 'none' }, children: t('none') });
+    }
+    const values = (Array.isArray(rawValue) ? rawValue : [rawValue]).filter(_value => !!_value);
+    return (_jsx(TableCell, { sx: { borderBottom: 'none', borderRight: 'thin solid', borderRightColor: 'divider', fontSize: '0.8rem' }, children: _jsx(Stack, { direction: "row", className: className, spacing: 0.5, sx: [
+                { display: 'flex', justifyContent: 'start', width: '100%', overflow: 'hidden' },
+                ...(Array.isArray(sx) ? sx : [sx])
+            ], children: values.map((value, index) => (_jsx(PluginTypography, { context: "table", sx: { fontSize: 'inherit', textOverflow: 'ellipsis' }, value: value, children: value }, value + index))) }) }));
+};
+export default memo(EnhancedCell);

package/components/routes/hits/search/grid/HitGrid.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+declare const HitGrid: FC;
+export default HitGrid;

package/components/routes/hits/search/grid/HitGrid.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, pointerWithin, useSensor, useSensors } from '@dnd-kit/core';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { Add, FormatIndentDecrease, FormatIndentIncrease, Info, List, Search, TableChart } from '@mui/icons-material';
+import { IconButton, LinearProgress, Paper, Stack, Table, TableBody, TableCell, TableHead, TableRow, ToggleButton, ToggleButtonGroup, Typography, useTheme } from '@mui/material';
+import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
+import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
+import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
+import DevelopmentBanner from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentBanner';
+import DevelopmentIcon from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentIcon';
+import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import HitContextMenu from '../HitContextMenu';
+import HitQuery from '../HitQuery';
+import QuerySettings from '../shared/QuerySettings';
+import ViewLink from '../ViewLink';
+import AddColumnModal from './AddColumnModal';
+import ColumnHeader from './ColumnHeader';
+import HitRow from './HitRow';
+const HitGrid = () => {
+    const { t } = useTranslation();
+    const { getIdFromName } = useContext(AnalyticContext);
+    const routeParams = useParams();
+    const location = useLocation();
+    const theme = useTheme();
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const { onClick } = useHitSelection();
+    const search = useContextSelector(HitSearchContext, ctx => ctx.search);
+    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
+    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
+    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
+    const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
+    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+    const query = useContextSelector(ParameterContext, ctx => ctx.query);
+    const viewId = useMemo(() => (location.pathname.startsWith('/views') ? routeParams.id : null), [location.pathname, routeParams.id]);
+    const selectedView = useContextSelector(ViewContext, ctx => ctx.views?.find(val => val.view_id === viewId));
+    const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
+    const [analyticIds, setAnalyticIds] = useState({});
+    const columnModalRef = useRef();
+    const [columns, setColumns] = useState([
+        'howler.outline.threat',
+        'howler.outline.target',
+        'howler.outline.indicators',
+        'howler.outline.summary'
+    ]);
+    const [columnWidths, setColumnWidths] = useState({});
+    const [showAddColumn, setShowAddColumn] = useState(false);
+    const resizingCol = useRef();
+    const showSelectBar = useMemo(() => {
+        if (selectedHits.length > 1) {
+            return true;
+        }
+        if (selectedHits.length === 1 && selectedHits[0]?.howler.id !== routeParams.id) {
+            return true;
+        }
+        return false;
+    }, [routeParams.id, selectedHits]);
+    useEffect(() => {
+        response?.items.forEach(hit => {
+            if (!analyticIds[hit.howler.analytic]) {
+                getIdFromName(hit.howler.analytic).then(_analyticId => setAnalyticIds(_analyticIds => ({ ..._analyticIds, [hit.howler.analytic]: _analyticId })));
+            }
+        });
+    }, [analyticIds, getIdFromName, response]);
+    const onMouseMove = useCallback((event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const [col, element] = resizingCol.current;
+        const rect = element.getBoundingClientRect();
+        document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
+            el.style.maxWidth = rect.width + event.movementX + 'px';
+            el.style.width = rect.width + event.movementX + 'px';
+        });
+    }, []);
+    const onMouseUp = useCallback(() => {
+        const [col, element] = resizingCol.current;
+        setColumnWidths(_widths => ({
+            ..._widths,
+            [col]: element.style.width
+        }));
+        element.style.width = null;
+        element.style.maxWidth = null;
+        document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
+            el.style.maxWidth = null;
+            el.style.width = null;
+        });
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    }, [onMouseMove]);
+    const onMouseDown = useCallback((col, event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        resizingCol.current = [col, event.target.parentElement];
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    }, [onMouseMove, onMouseUp]);
+    const onScroll = useCallback((event) => {
+        const target = event.target;
+        if (target.scrollHeight - target.scrollTop === target.clientHeight) {
+            search(query, true);
+        }
+    }, [query, search]);
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        if (active.id !== over.id) {
+            const oldIndex = (columns ?? []).findIndex(entry => entry === active.id);
+            const newIndex = (columns ?? []).findIndex(entry => entry === over.id);
+            setColumns(arrayMove(columns, oldIndex, newIndex));
+        }
+    }, [columns]);
+    const getSelectedId = useCallback((event) => {
+        const target = event.target;
+        const selectedElement = target.closest('[id]');
+        if (!selectedElement) {
+            return;
+        }
+        return selectedElement.id;
+    }, []);
+    return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _jsx(ViewLink, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5, textAlign: 'left' }, variant: "body2", children: t('hit.search.prompt') }), _jsx(DevelopmentIcon, {})] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(HitQuery, { disabled: viewId && !selectedView, searching: searching, triggerSearch: search, compact: true }), searching && (_jsx(LinearProgress, { sx: {
+                                    position: 'absolute',
+                                    left: 0,
+                                    right: 0,
+                                    bottom: 0,
+                                    borderBottomLeftRadius: theme.shape.borderRadius,
+                                    borderBottomRightRadius: theme.shape.borderRadius
+                                } }))] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, {}) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, {}) })] })] }), _jsxs(Stack, { direction: "row", spacing: 1, width: "100%", sx: { '& > *': { flex: 1 } }, children: [_jsx(QuerySettings, {}), response && (_jsx(SearchTotal, { sx: { alignSelf: 'center' }, color: "text.secondary", offset: response.offset, pageLength: response.rows, total: response.total })), _jsxs(Stack, { direction: "row", children: [_jsx(FlexOne, {}), _jsx(IconButton, { ref: columnModalRef, onClick: () => setShowAddColumn(true), children: _jsx(Add, { fontSize: "small" }) })] }), _jsx(AddColumnModal, { anchorEl: columnModalRef.current, open: showAddColumn, onClose: () => setShowAddColumn(false), columns: columns, addColumn: key => setColumns(_columns => [..._columns, key]) })] }), _jsxs(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, onScroll: onScroll, children: [_jsxs(Table, { sx: { '& td,th': { px: 1, py: 0.25, whiteSpace: 'nowrap' } }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sx: {
+                                                borderRight: 'thin solid',
+                                                borderRightColor: 'divider'
+                                            }, children: _jsx(IconButton, { onClick: () => setCollapseMainColumn(!collapseMainColumn), children: collapseMainColumn ? (_jsx(FormatIndentIncrease, { fontSize: "small" })) : (_jsx(FormatIndentDecrease, { fontSize: "small" })) }) }), _jsx(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columns, children: columns.map(col => (_jsx(ColumnHeader, { col: col, width: columnWidths[col], onMouseDown: onMouseDown, setColumns: setColumns }, col))) }) }), _jsx(TableCell, { sx: { width: '100%' } })] }) }), _jsxs(HitContextMenu, { Component: TableBody, getSelectedId: getSelectedId, children: [response?.items.map(hit => (_jsx(HitRow, { hit: hit, analyticIds: analyticIds, columns: columns, columnWidths: columnWidths, collapseMainColumn: collapseMainColumn, onClick: onClick }, hit.howler.id))), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 2, children: _jsx(Stack, { alignItems: "center", justifyContent: "center", py: 0.5, px: 1, children: _jsx(IconButton, { onClick: () => search(query, true), children: _jsx(Search, {}) }) }) }) })] })] }), (response?.total ?? 0) < 1 && (_jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", p: 1, justifyContent: "center", flex: 1, children: _jsxs(Typography, { variant: "h3", color: "text.secondary", display: "flex", flexDirection: "row", alignItems: "center", children: [_jsx(Info, { fontSize: "inherit", sx: { color: 'text.secondary', mr: 1 } }), _jsx("span", { children: t('app.list.empty') })] }) }))] })] }));
+};
+export default HitGrid;

package/components/routes/hits/search/grid/HitRow.d.ts

@@ -0,0 +1,10 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+declare const _default: import("react").NamedExoticComponent<{
+    hit: Hit;
+    analyticIds: Record<string, string>;
+    columns: string[];
+    columnWidths: Record<string, string>;
+    collapseMainColumn: boolean;
+    onClick: (e: React.MouseEvent<HTMLDivElement>, hit: Hit) => void;
+}>;
+export default _default;

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

@@ -0,0 +1,50 @@
+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 '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import Assigned from '@cccsaurora/howler-ui/components/elements/hit/elements/Assigned';
+import EscalationChip from '@cccsaurora/howler-ui/components/elements/hit/elements/EscalationChip';
+import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+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 './EnhancedCell';
+const HitRow = ({ hit, analyticIds, columns, columnWidths, collapseMainColumn, onClick }) => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+    const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
+    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: '220px', maxWidth: '300px' } }, col)))] }, hit.howler.id), _jsx(TableRow, { onClick: ev => onClick(ev, hit), 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, children: _jsx(HitCard, { id: hit.howler.id, layout: HitLayout.NORMAL }) }) }) }) })] }));
+};
+export default memo(HitRow);

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

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

package/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 '@cccsaurora/howler-ui/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/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/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 '@cccsaurora/howler-ui/api';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { ParameterContext } from '@cccsaurora/howler-ui/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 '@cccsaurora/howler-ui/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/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/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 '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { ViewContext } from '@cccsaurora/howler-ui/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/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/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 '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { ViewContext } from '@cccsaurora/howler-ui/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/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/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 '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { ViewContext } from '@cccsaurora/howler-ui/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 '@cccsaurora/howler-ui/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: '200px', 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);