@cccsaurora/howler-ui 2.19.0-dev.1085 → 2.19.0-dev.1143

package/components/elements/hit/HitNotebooks.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Backdrop, Box, Button, Chip, CircularProgress, ClickAwayListener, Fade, MenuItem, Paper, Popper, Stack, TextField } from '@mui/material';
+import { Avatar, Backdrop, Box, Button, Chip, CircularProgress, ClickAwayListener, Fade, MenuItem, Paper, Popper, Stack, TextField, Tooltip } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import NotebookTooltip from '@cccsaurora/howler-ui/components/elements/hit/NotebookTooltip';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { memo, useCallback, useContext, useEffect, useState } from 'react';
@@ -124,26 +125,26 @@ const HitNotebooks = ({ analytic, selectedNotebook, hit, compact }) => {
                                                 MenuProps: {
                                                     style: { zIndex: 35001 }
                                                 }
-                                            }, defaultValue: selectedNotebook ? analytic?.notebooks.find(n => n.name === selectedNotebook).value : '', children: [_jsx(MenuItem, { disabled: true, value: "", children: _jsx("em", { children: t('hit.notebook.select') }) }), analytic?.notebooks.sort(safeStringPropertyCompare('detection')).map(e => (_jsx(MenuItem, { value: e.value, children: _jsxs(Stack, { direction: 'row', sx: { width: '100%' }, children: [e.name, e.detection && (_jsxs(_Fragment, { children: [_jsx(Box, { flex: 1 }), _jsx(Chip, { label: e.detection, size: "small" })] }))] }) }, e.value)))] }), _jsx(Button, { variant: "outlined", disabled: loadedNotebook.name === '' || envs.length === 0, color: "success", onClick: () => checkJupyhub(), children: t('hit.notebook.goTo') })] })] }) })) }), _jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: handleToggle, sx: [
-                        theme => ({
-                            cursor: 'pointer',
-                            backgroundColor: 'transparent',
-                            transition: theme.transitions.create(['border-color']),
-                            '&:hover': { borderColor: 'primary.main', '& a': { textDecoration: 'underline' } },
-                            '& > div': {
-                                height: '100%'
-                            },
-                            '& a': { textDecoration: 'none', color: 'text.primary' }
-                        }),
-                        !compact && { border: 'thin solid', borderColor: 'transparent' }
-                    ], children: _jsxs(Stack, { direction: "row", p: 1, spacing: 1, alignItems: "center", children: [_jsx(Avatar, { variant: "rounded", src: '/images/jupyter_notebook_file_icon.png', sx: [
-                                    theme => ({
-                                        width: theme.spacing(3),
-                                        height: theme.spacing(3),
-                                        '& img': {
-                                            objectFit: 'contain'
-                                        }
-                                    })
-                                ], children: 'jupyter_notebook_file_icon.png' }), t('hit.notebook.tooltip')] }) })] }) })));
+                                            }, defaultValue: selectedNotebook ? analytic?.notebooks.find(n => n.name === selectedNotebook).value : '', children: [_jsx(MenuItem, { disabled: true, value: "", children: _jsx("em", { children: t('hit.notebook.select') }) }), analytic?.notebooks.sort(safeStringPropertyCompare('detection')).map(e => (_jsx(MenuItem, { value: e.value, children: _jsxs(Stack, { direction: 'row', sx: { width: '100%' }, children: [e.name, e.detection && (_jsxs(_Fragment, { children: [_jsx(Box, { flex: 1 }), _jsx(Chip, { label: e.detection, size: "small" })] }))] }) }, e.value)))] }), _jsx(Button, { variant: "outlined", disabled: loadedNotebook.name === '' || envs.length === 0, color: "success", onClick: () => checkJupyhub(), children: t('hit.notebook.goTo') })] })] }) })) }), _jsx(Tooltip, { title: _jsx(NotebookTooltip, {}), children: _jsx("span", { children: _jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: handleToggle, sx: [
+                                theme => ({
+                                    cursor: 'pointer',
+                                    backgroundColor: 'transparent',
+                                    transition: theme.transitions.create(['border-color']),
+                                    '&:hover': { borderColor: 'primary.main', '& a': { textDecoration: 'underline' } },
+                                    '& > div': {
+                                        height: '100%'
+                                    },
+                                    '& a': { textDecoration: 'none', color: 'text.primary' }
+                                }),
+                                !compact && { border: 'thin solid', borderColor: 'transparent' }
+                            ], children: _jsxs(Stack, { direction: "row", p: 1, spacing: 1, alignItems: "center", children: [_jsx(Avatar, { variant: "rounded", src: '/images/jupyter_notebook_file_icon.png', sx: [
+                                            theme => ({
+                                                width: theme.spacing(3),
+                                                height: theme.spacing(3),
+                                                '& img': {
+                                                    objectFit: 'contain'
+                                                }
+                                            })
+                                        ], children: 'jupyter_notebook_file_icon.png' }), t('hit.notebook.tooltip')] }) }) }) })] }) })));
 };
 export default memo(HitNotebooks);

package/components/elements/hit/NotebookTooltip.d.ts

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

package/components/elements/hit/NotebookTooltip.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+const NotebookTooltip = () => {
+    const { t } = useTranslation();
+    return (_jsxs(Box, { sx: { maxWidth: 300 }, children: [_jsx(Typography, { variant: "subtitle2", children: t('notebook.title') }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('notebook.opens.panel') })] }));
+};
+export default NotebookTooltip;

package/components/elements/hit/PivotTooltip.d.ts

@@ -0,0 +1,7 @@
+import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
+import type { FC } from 'react';
+declare const PivotTooltip: FC<{
+    dossier: Dossier;
+    resolvedUrl: string;
+}>;
+export default PivotTooltip;

package/components/elements/hit/PivotTooltip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Link, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+const PivotTooltip = ({ dossier, resolvedUrl }) => {
+    const dossierUrl = `/dossiers/${dossier.dossier_id}/edit?tab=leads&query=${encodeURIComponent(dossier.query)}`;
+    const { t } = useTranslation();
+    return (_jsxs(Box, { sx: { maxWidth: 300 }, children: [_jsx(Typography, { variant: "subtitle2", children: dossier.title }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: dossier.owner }), _jsx(Typography, { variant: "body2", sx: { mt: 2 }, children: dossier.leads?.[0]?.content?.slice(0, 120) ?? t('pivot.description.none') }), _jsxs(Box, { sx: { mt: 2, wordBreak: 'break-all' }, children: [_jsx(Typography, { variant: "caption", display: "block", children: t('pivot.url') }), _jsx(Link, { href: resolvedUrl, target: "_blank", rel: "noopener noreferrer", underline: "hover", children: resolvedUrl })] }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Link, { href: dossierUrl, target: "_blank", rel: "noopener noreferrer", underline: "hover", children: t('pivot.dossier.open') }) })] }));
+};
+export default PivotTooltip;

package/components/elements/hit/RelatedLinkTooltip.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+declare const RelatedLinkTooltip: FC<{
+    title: string;
+    href: string;
+}>;
+export default RelatedLinkTooltip;

package/components/elements/hit/RelatedLinkTooltip.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Link, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+const RelatedLinkTooltip = ({ title, href }) => {
+    const { t } = useTranslation();
+    return (_jsxs(Box, { sx: { maxWidth: 300 }, children: [_jsx(Typography, { variant: "subtitle2", children: title }), _jsx(Box, { sx: { mt: 1, wordBreak: 'break-all' }, children: _jsx(Link, { href: href, target: "_blank", rel: "noopener noreferrer", underline: "hover", children: href }) }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Link, { href: href, target: "_blank", rel: "noopener noreferrer", underline: "hover", children: t('hit.header.link') }) })] }));
+};
+export default RelatedLinkTooltip;

package/components/elements/hit/ResolvePivotUrl.d.ts

@@ -0,0 +1,4 @@
+import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+declare const resolvePivotUrl: (pivot: NonNullable<Dossier["pivots"]>[number], currentHit?: Hit) => string;
+export default resolvePivotUrl;

package/components/elements/hit/ResolvePivotUrl.js

@@ -0,0 +1,22 @@
+import Handlebars from 'handlebars';
+import { flattenDeep } from '@cccsaurora/howler-ui/utils/utils';
+const resolvePivotUrl = (pivot, currentHit) => {
+    const flatHit = flattenDeep(currentHit ?? {});
+    const templateObject = Object.fromEntries((pivot.mappings ?? []).map(mapping => {
+        const value = mapping.field === 'custom'
+            ? mapping.custom_value
+            : Array.isArray(flatHit[mapping.field])
+                ? flatHit[mapping.field][0]
+                : flatHit[mapping.field];
+        return [mapping.key, value];
+    }));
+    try {
+        return Handlebars.compile(pivot.value)(templateObject);
+    }
+    catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(`Failed to compile pivot template for value "${pivot.value}":`, e);
+        return pivot.value;
+    }
+};
+export default resolvePivotUrl;

package/components/{routes/hits/search → elements/hit}/grid/ColumnHeader.d.ts

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

package/components/{routes/hits/search → elements/hit}/grid/ColumnHeader.js

@@ -1,12 +1,12 @@
 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 { DragIndicator, JoinFull, 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 ColumnHeader = ({ col, width, colSource, setColumns, onMouseDown }) => {
     const theme = useTheme();
     const { config } = useContext(ApiConfigContext);
     const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: col });
@@ -15,7 +15,7 @@ const ColumnHeader = ({ col, width, setColumns, onMouseDown }) => {
             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: {
+        }, 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 }) }), colSource?.length > 1 && (_jsx(Tooltip, { title: colSource.join(', '), children: _jsx(JoinFull, { fontSize: "small" }) })), _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),

package/components/{routes/hits/search → elements/hit}/grid/HitRow.d.ts

@@ -3,7 +3,7 @@ declare const _default: import("react").NamedExoticComponent<{
     hit: Hit;
     analyticIds: Record<string, string>;
     columns: string[];
-    columnWidths: Record<string, string>;
+    columnWidths: Record<string, number>;
     collapseMainColumn: boolean;
     onClick: (e: React.MouseEvent<HTMLDivElement>, hit: Hit) => void;
 }>;

package/components/elements/hit/grid/HitTable.d.ts

@@ -0,0 +1,12 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
+import React, { type PropsWithChildren } from 'react';
+declare const HitTable: ({ query, items, refreshItems, ContextMenu, contextMenuProps, onItemClick }: {
+    query: string;
+    items?: WithMetadata<Hit>[];
+    refreshItems?: (query: string, append?: boolean) => void;
+    ContextMenu?: React.FC<PropsWithChildren<object>>;
+    contextMenuProps?: object;
+    onItemClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, hit: Hit) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default HitTable;

package/components/elements/hit/grid/HitTable.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, Fragment as _Fragment, 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 { FormatIndentDecrease, FormatIndentIncrease, Search } from '@mui/icons-material';
+import { IconButton, Stack, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { GridColumnsContext } from '@cccsaurora/howler-ui/components/app/providers/GridColumnsProvider';
+import ColumnHeader from '@cccsaurora/howler-ui/components/elements/hit/grid/ColumnHeader';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import HitRow from './HitRow';
+const HitTable = ({ query, items, refreshItems, ContextMenu, contextMenuProps, onItemClick }) => {
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const { getMatchingAnalytic } = useMatchers();
+    const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
+    const [analyticIds, setAnalyticIds] = useState({});
+    const { columns, columnWidths, columnSources, setColumnWidth, setColumns, isReady } = useContext(GridColumnsContext);
+    const resizingCol = useRef();
+    useEffect(() => {
+        items?.forEach(hit => {
+            if (!analyticIds[hit.howler.analytic]) {
+                getMatchingAnalytic(hit).then(_analytic => {
+                    if (_analytic) {
+                        setAnalyticIds(_analyticIds => ({ ..._analyticIds, [hit.howler.analytic]: _analytic.analytic_id }));
+                    }
+                });
+            }
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [analyticIds, items]);
+    const onMouseMove = useCallback((event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const { col, width } = resizingCol.current;
+        const newWidth = width + event.movementX;
+        document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
+            el.style.maxWidth = newWidth + 'px';
+            el.style.width = newWidth + 'px';
+        });
+        resizingCol.current.width = newWidth;
+    }, []);
+    const onMouseUp = useCallback(() => {
+        const { col, width, element } = resizingCol.current;
+        if (isReady) {
+            setColumnWidth(col, Math.round(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, setColumnWidth, isReady]);
+    const onMouseDown = useCallback((col, event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        const element = event.target.parentElement;
+        const rect = element.getBoundingClientRect();
+        resizingCol.current = { col, width: rect.width, element };
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    }, [onMouseMove, onMouseUp]);
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        if (over && active.id !== over.id) {
+            const oldIndex = (columns ?? []).findIndex(entry => entry === active.id);
+            const newIndex = (columns ?? []).findIndex(entry => entry === over.id);
+            if (isReady) {
+                setColumns(arrayMove(columns, oldIndex, newIndex));
+            }
+        }
+    }, [columns, setColumns, isReady]);
+    const tableContent = (_jsxs(_Fragment, { children: [items?.map(hit => (_jsx(HitRow, { hit: hit, analyticIds: analyticIds, columns: columns, columnWidths: columnWidths, collapseMainColumn: collapseMainColumn, onClick: onItemClick ? onItemClick : (_ev, _hit) => null }, hit.howler.id))), refreshItems && (_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: () => refreshItems(query, true), children: _jsx(Search, {}) }) }) }) }))] }));
+    return (_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], colSource: columnSources[col], onMouseDown: onMouseDown, setColumns: isReady ? setColumns : () => null }, col))) }) }), _jsx(TableCell, { sx: { width: '100%' } })] }) }), ContextMenu ? (_jsx(ContextMenu, { ...contextMenuProps, children: tableContent })) : (_jsx(TableBody, { children: tableContent }))] }));
+};
+export default HitTable;

package/components/elements/hit/related/PivotLink.d.ts

@@ -1,3 +1,4 @@
+import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { Pivot } from '@cccsaurora/howler-ui/models/entities/generated/Pivot';
 import { type FC } from 'react';
@@ -5,6 +6,8 @@ export interface PivotLinkProps {
     pivot: Pivot;
     hit: Hit;
     compact?: boolean;
+    dossier: Dossier;
+    resolvedUrl: string;
 }
 declare const PivotLink: FC<PivotLinkProps>;
 export default PivotLink;

package/components/elements/hit/related/PivotLink.js

@@ -3,6 +3,7 @@ import { ErrorOutline } from '@mui/icons-material';
 import { Tooltip } from '@mui/material';
 import { useHelpers } from '@cccsaurora/howler-ui/components/elements/display/handlebars/helpers';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
+import PivotTooltip from '@cccsaurora/howler-ui/components/elements/hit/PivotTooltip';
 import Handlebars from 'handlebars';
 import { isEmpty } from 'lodash-es';
 import React, { useMemo } from 'react';
@@ -10,7 +11,7 @@ import { useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
 import { flattenDeep } from '@cccsaurora/howler-ui/utils/utils';
 import RelatedLink from './RelatedLink';
-const PivotLink = ({ pivot, hit, compact = false }) => {
+const PivotLink = ({ pivot, hit, compact = false, dossier, resolvedUrl }) => {
     const { i18n } = useTranslation();
     const helpers = useHelpers({ async: false, components: false });
     const pluginStore = usePluginStore();
@@ -47,11 +48,13 @@ const PivotLink = ({ pivot, hit, compact = false }) => {
             return handlebars.compile(pivot.value)(templateObject);
         }
         catch (e) {
+            // eslint-disable-next-line no-console
+            console.error(`Failed to compile pivot template for value "${pivot.value}":`, e);
             return pivot.value;
         }
     }, [flatHit, pivot, handlebars, helpers]);
     if (href) {
-        return (_jsx(RelatedLink, { title: pivot.label[i18n.language], href: href, compact: compact, icon: pivot.icon, target: "_blank", rel: "noopener noreferrer" }));
+        return (_jsx(RelatedLink, { title: pivot.label[i18n.language], href: href, compact: compact, icon: pivot.icon, target: "_blank", rel: "noopener noreferrer", tooltip: _jsx(PivotTooltip, { dossier: dossier, resolvedUrl: resolvedUrl }) }));
     }
     // Hide a relatively useless console error, we'll show a UI component instead
     // eslint-disable-next-line no-console

package/components/elements/hit/related/RelatedLink.d.ts

@@ -6,5 +6,6 @@ declare const RelatedLink: React.FC<PropsWithChildren<{
     compact?: boolean;
     target?: string;
     rel?: string;
+    tooltip?: React.ReactNode;
 }>>;
 export default RelatedLink;

package/components/elements/hit/related/RelatedLink.js

@@ -1,22 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack, Typography } from '@mui/material';
+import { Stack, Tooltip, Typography } from '@mui/material';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
+import RelatedLinkTooltip from '@cccsaurora/howler-ui/components/elements/hit/RelatedLinkTooltip';
 import React, {} from 'react';
 import { Link } from 'react-router-dom';
 import RelatedIcon from './RelatedIcon';
-const RelatedLink = ({ icon, title, href, target, rel, compact = false, children }) => {
-    return (_jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: () => window.open(href, target), sx: [
-            theme => ({
-                cursor: 'pointer',
-                backgroundColor: 'transparent',
-                transition: theme.transitions.create(['border-color']),
-                '&:hover': { borderColor: 'primary.main', '& a': { textDecoration: 'underline' } },
-                '& > div': {
-                    height: '100%'
-                },
-                '& a': { textDecoration: 'none', color: 'text.primary' }
-            }),
-            !compact && { border: 'thin solid', borderColor: 'transparent' }
-        ], children: _jsxs(Stack, { direction: "row", p: compact ? 0.5 : 1, spacing: 1, alignItems: "center", children: [children || _jsx(RelatedIcon, { icon: icon, title: title, href: href, compact: compact }), _jsx(Typography, { component: Link, to: href, target: target, rel: rel, onClick: e => e.stopPropagation(), children: title ?? href })] }) }, href));
+const RelatedLink = ({ icon, title, href, target, rel, compact = false, tooltip, children }) => {
+    const safeTitle = title ?? href ?? '';
+    const tooltipContent = tooltip ?? _jsx(RelatedLinkTooltip, { title: safeTitle, href: href ?? '' });
+    return (_jsx(Tooltip, { title: tooltipContent, children: _jsx("div", { style: { display: 'flex' }, children: _jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: () => href && window.open(href, target), sx: [
+                    theme => ({
+                        cursor: 'pointer',
+                        backgroundColor: 'transparent',
+                        transition: theme.transitions.create(['border-color']),
+                        '&:hover': { borderColor: 'primary.main', '& a': { textDecoration: 'underline' } },
+                        '& > div': {
+                            height: '100%'
+                        },
+                        '& a': { textDecoration: 'none', color: 'text.primary' }
+                    }),
+                    !compact && { border: 'thin solid', borderColor: 'transparent' }
+                ], children: _jsxs(Stack, { direction: "row", p: compact ? 0.5 : 1, spacing: 1, alignItems: "center", children: [children || _jsx(RelatedIcon, { icon: icon, title: title, href: href, compact: compact }), _jsx(Typography, { component: Link, to: href ?? '#', target: target, rel: rel, onClick: e => e.stopPropagation(), children: safeTitle })] }) }, href) }) }));
 };
 export default RelatedLink;

package/components/elements/view/LayoutToggle.d.ts

@@ -0,0 +1,8 @@
+export type HowlerViewLayoutType = 'list' | 'grid' | null;
+declare const LayoutToggle: ({ displayType, setDisplayType, size, allowNullValue }: {
+    displayType: HowlerViewLayoutType;
+    setDisplayType: (type: HowlerViewLayoutType) => void;
+    size?: "small" | "medium" | "large";
+    allowNullValue?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default LayoutToggle;

package/components/elements/view/LayoutToggle.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { List, TableChart } from '@mui/icons-material';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
+const LayoutToggle = ({ displayType, setDisplayType, size, allowNullValue = false }) => {
+    return (_jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => {
+            if (!value && !allowNullValue) {
+                return;
+            }
+            setDisplayType(value);
+        }, size: size ?? 'small', children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, { fontSize: size ?? 'medium' }) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, { fontSize: size ?? 'medium' }) })] }));
+};
+export default LayoutToggle;

package/components/elements/view/ViewTitle.d.ts

@@ -5,6 +5,9 @@ interface ViewTitleProps {
     query?: string;
     sort?: string;
     span?: string;
+    settings?: {
+        display?: string;
+    };
 }
 export declare const ViewTitle: FC<ViewTitleProps>;
 export {};

package/components/elements/view/ViewTitle.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDownward, ArrowUpward, Language, Lock, Person } from '@mui/icons-material';
+import { ArrowDownward, ArrowUpward, Language, List, Lock, Person, TableChart } from '@mui/icons-material';
 import { Chip, Stack, Tooltip, Typography } from '@mui/material';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { convertLuceneToDate } from '@cccsaurora/howler-ui/utils/utils';
-export const ViewTitle = ({ title, type, query, sort, span }) => {
+export const ViewTitle = ({ title, type, query, sort, span, settings }) => {
     const { t } = useTranslation();
     const spanLabel = useMemo(() => {
         if (!span) {
@@ -21,5 +21,8 @@ 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, { size: "small", label: spanLabel })] }))] }));
+                        }[type] }), settings?.display && (_jsx(Tooltip, { title: t(`page.settings.local.hits.display_type.${settings.display}`), children: {
+                            list: _jsx(List, { fontSize: "small" }),
+                            grid: _jsx(TableChart, { fontSize: "small" })
+                        }[settings.display] })), _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/routes/hits/search/HitBrowser.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeft, Close, ManageSearch } from '@mui/icons-material';
 import { Box, Card, Checkbox, Collapse, Drawer, Fab, IconButton, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+import GridColumnsProvider from '@cccsaurora/howler-ui/components/app/providers/GridColumnsProvider';
 import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import HitSearchProvider, { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import ParameterProvider, { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
@@ -128,6 +129,6 @@ const HitBrowser = () => {
                 }, children: _jsx(ChevronLeft, { sx: { transition: 'rotate 250ms', rotate: show ? '180deg' : '0deg' } }) }))] }));
 };
 const HitBrowserProvider = () => {
-    return (_jsx(ParameterProvider, { children: _jsx(HitSearchProvider, { children: _jsx(HitBrowser, {}) }) }));
+    return (_jsx(ParameterProvider, { children: _jsx(HitSearchProvider, { children: _jsx(GridColumnsProvider, { children: _jsx(HitBrowser, {}) }) }) }));
 };
 export default HitBrowserProvider;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Close, ErrorOutline, SavedSearch, Terminal } from '@mui/icons-material';
-import { Box, IconButton, LinearProgress, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { ErrorOutline } from '@mui/icons-material';
+import { Box, LinearProgress, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { grey } from '@mui/material/colors';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
@@ -17,21 +17,20 @@ import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
 import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
+import HitContextMenu from '@cccsaurora/howler-ui/components/elements/hit/HitContextMenu';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import React, { memo, useCallback, useEffect, useMemo } from 'react';
 import { isMobile } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import BundleParentMenu from './BundleParentMenu';
 import { BundleScroller } from './BundleScroller';
-import HitContextMenu from './HitContextMenu';
 import HitQuery from './HitQuery';
-import LayoutSettings from './LayoutSettings';
 import QuerySettings from './QuerySettings';
+import SearchActionMenu from './shared/SearchActionMenu';
 const Item = memo(({ hit, onClick }) => {
     const theme = useTheme();
     const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
@@ -80,7 +79,6 @@ const Item = memo(({ hit, onClick }) => {
 const SearchPane = () => {
     const { t } = useTranslation();
     const location = useLocation();
-    const navigate = useNavigate();
     const routeParams = useParams();
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
@@ -117,7 +115,7 @@ const SearchPane = () => {
                                             ], onClick: () => {
                                                 clearSelectedHits(bundleHit.howler.id);
                                                 setSelected(bundleHit.howler.id);
-                                            }, children: _jsx(HitBanner, { hit: bundleHit, layout: HitLayout.DENSE, useListener: true }) }) }) }) })), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", children: t('hit.search.prompt') }), error && (_jsx(Tooltip, { title: `${t('route.advanced.error')}: ${error}`, children: _jsx(ErrorOutline, { fontSize: "small", color: "error" }) })), _jsx(FlexOne, {}), bundleHit?.howler.bundles.length > 0 && _jsx(BundleParentMenu, { bundle: bundleHit }), bundleHit && (_jsx(Tooltip, { title: t('hit.bundle.close'), children: _jsx(IconButton, { size: "small", onClick: () => navigate('/search'), children: _jsx(Close, {}) }) })), _jsx(Tooltip, { title: t('route.views.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/views/create?query=${query}`, children: _jsx(SavedSearch, {}) }) }), _jsx(Tooltip, { title: t('route.actions.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/action/execute?query=${query}`, children: _jsx(Terminal, {}) }) }), _jsx(LayoutSettings, {})] })] }), _jsxs(VSBoxHeader, { ml: -3, mr: -3, px: 2, pb: 1, sx: { zIndex: 989 }, children: [_jsxs(Stack, { sx: { pt: 1 }, children: [_jsxs(Stack, { sx: { position: 'relative', flex: 1 }, children: [_jsx(HitQuery, { searching: searching, triggerSearch: triggerSearch }), searching && (_jsx(LinearProgress, { sx: theme => ({
+                                            }, children: _jsx(HitBanner, { hit: bundleHit, layout: HitLayout.DENSE, useListener: true }) }) }) }) })), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", children: t('hit.search.prompt') }), error && (_jsx(Tooltip, { title: `${t('route.advanced.error')}: ${error}`, children: _jsx(ErrorOutline, { fontSize: "small", color: "error" }) })), _jsx(FlexOne, {}), _jsx(SearchActionMenu, { query: query })] })] }), _jsxs(VSBoxHeader, { ml: -3, mr: -3, px: 2, pb: 1, sx: { zIndex: 989 }, children: [_jsxs(Stack, { sx: { pt: 1 }, children: [_jsxs(Stack, { sx: { position: 'relative', flex: 1 }, children: [_jsx(HitQuery, { searching: searching, triggerSearch: triggerSearch }), searching && (_jsx(LinearProgress, { sx: theme => ({
                                                     position: 'absolute',
                                                     left: 0,
                                                     right: 0,

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

@@ -1,6 +1,6 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDropDown, Delete, Edit, Language, Lock, OpenInNew, Person, Refresh, SavedSearch, SelectAll } from '@mui/icons-material';
+import { ArrowDropDown, Delete, Edit, Language, Lock, OpenInNew, Person, Refresh, SavedSearch, SelectAll, Warning } from '@mui/icons-material';
 import { Autocomplete, Chip, CircularProgress, IconButton, Stack, TextField, 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';
@@ -21,6 +21,7 @@ const ViewLink = ({ id, viewId }) => {
     const removeView = useContextSelector(ParameterContext, ctx => ctx.removeView);
     const setParamView = useContextSelector(ParameterContext, ctx => ctx.setView);
     const search = useContextSelector(HitSearchContext, ctx => ctx.search);
+    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
     const [loading, setLoading] = useState(true);
     const [view, setView] = useState(null);
     useEffect(() => {
@@ -60,6 +61,6 @@ const ViewLink = ({ id, viewId }) => {
                 readonly: _jsx(Lock, { fontSize: "small", "aria-label": t(`route.views.manager.${view.type}`) }),
                 global: _jsx(Language, { fontSize: "small", "aria-label": t(`route.views.manager.${view.type}`) }),
                 personal: _jsx(Person, { fontSize: "small", "aria-label": t(`route.views.manager.${view.type}`) })
-            }[view.type] }), label: _jsx(Tooltip, { title: view.query, children: _jsx(Typography, { role: "link", sx: { color: 'text.primary' }, variant: "body2", component: Link, to: `/views/${view.view_id}/edit`, "aria-label": `${t(view.title)} - ${view.query ?? t('unknown')}`, children: t(view.title) }) }), onDelete: () => removeView(viewId), children: _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(Tooltip, { title: view ? t('route.views.edit') : t('route.views.create'), children: _jsx(IconButton, { "aria-label": view ? t('route.views.edit') : t('route.views.create'), size: "small", component: Link, disabled: (!view && !query) || span?.endsWith('custom'), to: viewUrl, role: "link", children: view ? _jsx(Edit, { fontSize: "small" }) : _jsx(SavedSearch, {}) }) }), _jsx(Tooltip, { title: t('view.refresh'), children: _jsx(IconButton, { size: "small", onClick: () => search(query), "aria-label": t('view.refresh'), children: _jsx(Refresh, { fontSize: "small" }) }) }), _jsx(Tooltip, { title: t('view.open'), children: _jsx(IconButton, { size: "small", component: Link, to: `/search?query=${view.query}`, "aria-label": t('view.open'), role: "link", children: _jsx(OpenInNew, { fontSize: "small" }) }) })] }) }));
+            }[view.type] }), label: _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(Tooltip, { title: view.query, children: _jsx(Typography, { role: "link", sx: { color: 'text.primary' }, variant: "body2", component: Link, to: `/views/${view.view_id}/edit`, "aria-label": `${t(view.title)} - ${view.query ?? t('unknown')}`, children: t(view.title) }) }), view.settings?.display === 'grid' && displayType !== 'grid' && (_jsx(Tooltip, { title: t('view.display.grid.inactive_warning'), children: _jsx(Warning, { fontSize: "small", color: "warning" }) }))] }), onDelete: () => removeView(viewId), children: _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(Tooltip, { title: view ? t('route.views.edit') : t('route.views.create'), children: _jsx(IconButton, { "aria-label": view ? t('route.views.edit') : t('route.views.create'), size: "small", component: Link, disabled: (!view && !query) || span?.endsWith('custom'), to: viewUrl, role: "link", children: view ? _jsx(Edit, { fontSize: "small" }) : _jsx(SavedSearch, {}) }) }), _jsx(Tooltip, { title: t('view.refresh'), children: _jsx(IconButton, { size: "small", onClick: () => search(query), "aria-label": t('view.refresh'), children: _jsx(Refresh, { fontSize: "small" }) }) }), _jsx(Tooltip, { title: t('view.open'), children: _jsx(IconButton, { size: "small", component: Link, to: `/search?query=${view.query}`, "aria-label": t('view.open'), role: "link", children: _jsx(OpenInNew, { fontSize: "small" }) }) })] }) }));
 };
 export default memo(ViewLink);