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

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/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);

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

@@ -1,51 +1,34 @@
 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 { 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 useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { Info } from '@mui/icons-material';
+import { LinearProgress, Paper, Stack, TableBody, Typography, useTheme } from '@mui/material';
+import { GridColumnsContext } from '@cccsaurora/howler-ui/components/app/providers/GridColumnsProvider';
 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 SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
 import DevelopmentBanner from '@cccsaurora/howler-ui/components/elements/display/features/DevelopmentBanner';
+import AddColumnModal from '@cccsaurora/howler-ui/components/elements/hit/grid/AddColumnModal';
+import HitTable from '@cccsaurora/howler-ui/components/elements/hit/grid/HitTable';
+import HitContextMenu from '@cccsaurora/howler-ui/components/elements/hit/HitContextMenu';
 import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelection';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import { uniq } from 'lodash-es';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 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 '../QuerySettings';
-import AddColumnModal from './AddColumnModal';
-import ColumnHeader from './ColumnHeader';
-import HitRow from './HitRow';
+import SearchActionMenu from '../shared/SearchActionMenu';
 const HitGrid = () => {
     const { t } = useTranslation();
     const theme = useTheme();
-    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
     const { onClick } = useHitSelection();
-    const { getMatchingAnalytic } = useMatchers();
     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 selected = useContextSelector(ParameterContext, ctx => ctx.selected);
-    const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
-    const [columns, setColumns] = useMyLocalStorageItem(StorageKey.GRID_COLUMNS, [
-        'howler.outline.threat',
-        'howler.outline.target',
-        'howler.outline.indicators',
-        'howler.outline.summary'
-    ]);
-    const [columnWidths, setColumnWidths] = useMyLocalStorageItem(StorageKey.GRID_COLUMN_WIDTHS, {});
-    const [analyticIds, setAnalyticIds] = useState({});
-    const resizingCol = useRef();
+    const { columns, setColumns, isReady } = useContext(GridColumnsContext);
     const showSelectBar = useMemo(() => {
         if (selectedHits.length > 1) {
             return true;
@@ -55,60 +38,12 @@ const HitGrid = () => {
         }
         return false;
     }, [selected, selectedHits]);
-    useEffect(() => {
-        response?.items.forEach(hit => {
-            if (!analyticIds[hit.howler.analytic]) {
-                getMatchingAnalytic(hit).then(_analytic => setAnalyticIds(_analyticIds => ({ ..._analyticIds, [hit.howler.analytic]: _analytic.analytic_id })));
-            }
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [analyticIds, 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({
-            ...columnWidths,
-            [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);
-    }, [columnWidths, onMouseMove, setColumnWidths]);
-    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 (over && 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, setColumns]);
     const getSelectedId = useCallback((event) => {
         const target = event.target;
         const selectedElement = target.closest('[id]');
@@ -117,16 +52,13 @@ const HitGrid = () => {
         }
         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, {}), _jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5, textAlign: 'left' }, variant: "body2", children: t('hit.search.prompt') }), response && (_jsx(SearchTotal, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", offset: response.offset, pageLength: response.rows, total: response.total }))] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(HitQuery, { 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%", alignItems: "center", children: [_jsx(QuerySettings, { boxSx: { flex: 1 } }), _jsx(AddColumnModal, { columns: columns, addColumn: key => setColumns(uniq([...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') })] }) }))] })] }));
+    return (_jsxs(Stack, { spacing: 1, p: 2, width: "100%", sx: { overflow: 'hidden', height: `calc(100vh - ${theme.spacing(showSelectBar ? 13 : 8)})` }, children: [_jsx(DevelopmentBanner, {}), _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(SearchActionMenu, { query: query })] }), _jsx(Stack, { direction: "row", spacing: 1, children: _jsxs(Stack, { position: "relative", flex: 1, children: [_jsx(HitQuery, { 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(Stack, { direction: "row", spacing: 1, width: "100%", alignItems: "center", children: [_jsx(QuerySettings, { boxSx: { flex: 1 } }), _jsx(AddColumnModal, { columns: columns, addColumn: key => isReady && setColumns(uniq([...columns, key])) })] }), response && (_jsx(SearchTotal, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", offset: response.offset, pageLength: response.rows, total: response.total })), _jsxs(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, onScroll: onScroll, children: [_jsx(HitTable, { query: query, items: response?.items, refreshItems: search, ContextMenu: HitContextMenu, contextMenuProps: { Component: TableBody, getSelectedId: getSelectedId }, onItemClick: onClick }), (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/shared/LayoutSettings.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDropDown, InfoOutlined, Settings, ViewComfy, ViewCompact, ViewModule } from '@mui/icons-material';
+import { Checkbox, Divider, FormLabel, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import LayoutToggle from '@cccsaurora/howler-ui/components/elements/view/LayoutToggle';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+const LayoutSettings = () => {
+    const { t } = useTranslation();
+    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
+    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
+    const [hitLayout, setHitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, false);
+    const [templateFieldCount, setTemplateFieldCount] = useMyLocalStorageItem(StorageKey.TEMPLATE_FIELD_COUNT, null);
+    return (_jsx(ChipPopper, { icon: _jsx(Tooltip, { title: t('search.layout.settings'), children: _jsx(Settings, {}) }), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, disablePortal: false, slotProps: { chip: { size: 'medium', 'aria-label': t('search.layout.settings') } }, placement: "bottom-end", children: _jsxs(Stack, { spacing: 1, alignItems: "start", children: [_jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "display_type", children: t('page.settings.local.hits.display_type') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.display_type.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsx(LayoutToggle, { displayType: displayType, setDisplayType: setDisplayType }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "layout", children: t('page.settings.local.hits.layout') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.layout.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(ToggleButtonGroup, { exclusive: true, size: "small", value: hitLayout, onChange: (_, value) => setHitLayout(value), "aria-labelledby": "layout", children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "field_count", children: t('page.settings.local.hits.field_count') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.field_count.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignSelf: "stretch", children: [_jsx(Checkbox, { checked: templateFieldCount !== null, onChange: (_, checked) => setTemplateFieldCount(checked ? 3 : null), size: "small" }), _jsx(TextField, { type: "number", size: "small", disabled: templateFieldCount === null, value: templateFieldCount ?? 3, fullWidth: true, onChange: e => {
+                                const val = parseInt(e.target.value);
+                                if (!isNaN(val)) {
+                                    setTemplateFieldCount(Math.min(15, Math.max(0, val)));
+                                }
+                            }, inputProps: { min: 0, max: 15, 'aria-labelledby': 'field_count' } })] })] }) }));
+};
+export default LayoutSettings;

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

@@ -0,0 +1,4 @@
+declare const SearchActionMenu: ({ query }: {
+    query: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SearchActionMenu;

package/components/routes/hits/search/shared/SearchActionMenu.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Close, SavedSearch, Terminal } from '@mui/icons-material';
+import { IconButton, Stack, Tooltip } from '@mui/material';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { useTranslation } from 'react-i18next';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import BundleParentMenu from './BundleParentMenu';
+import LayoutSettings from './LayoutSettings';
+const SearchActionMenu = ({ query }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const routeParams = useParams();
+    const bundleHit = useContextSelector(HitContext, ctx => location.pathname.startsWith('/bundles') ? ctx.hits[routeParams.id] : null);
+    return (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [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, {})] }));
+};
+export default SearchActionMenu;

package/components/routes/home/ViewCard.js

@@ -6,9 +6,9 @@ import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppLi
 import { useHitContextSelector } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
+import HitContextMenu from '@cccsaurora/howler-ui/components/elements/hit/HitContextMenu';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import HitContextMenu from '@cccsaurora/howler-ui/components/routes/hits/search/HitContextMenu';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';

package/components/routes/views/ViewComposer.js

@@ -1,25 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { HelpOutline, Save } from '@mui/icons-material';
-import { Alert, Checkbox, CircularProgress, LinearProgress, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
+import { HelpOutline, Save, Settings } from '@mui/icons-material';
+import { Alert, Checkbox, CircularProgress, LinearProgress, Paper, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { GridColumnsContext } from '@cccsaurora/howler-ui/components/app/providers/GridColumnsProvider';
 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 CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
+import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexPort';
 import VSBox from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBox';
 import VSBoxContent from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxContent';
 import VSBoxHeader from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxHeader';
 import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import AddColumnModal from '@cccsaurora/howler-ui/components/elements/hit/grid/AddColumnModal';
+import HitTable from '@cccsaurora/howler-ui/components/elements/hit/grid/HitTable';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import LayoutToggle, {} from '@cccsaurora/howler-ui/components/elements/view/LayoutToggle';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import { uniq } from 'lodash-es';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { DEFAULT_QUERY, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
@@ -44,6 +52,7 @@ const ViewComposer = () => {
     const [title, setTitle] = useState('');
     const [type, setType] = useState('global');
     const [advanceOnTriage, setAdvanceOnTriage] = useState(false);
+    const { columns, setColumns, columnWidths, isReady } = useContext(GridColumnsContext);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const sort = useContextSelector(ParameterContext, ctx => ctx.sort);
@@ -56,8 +65,14 @@ const ViewComposer = () => {
     const [searching, setSearching] = useState(false);
     const [error, setError] = useState(null);
     const [response, setResponse] = useState();
+    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
+    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
     const onSave = useCallback(async () => {
         setLoading(true);
+        const _columnData = columns.map(column => ({
+            field: column,
+            width: columnWidths[column] ?? null
+        }));
         try {
             if (!routeParams.id) {
                 const newView = await addView({
@@ -67,7 +82,9 @@ const ViewComposer = () => {
                     sort: sort || null,
                     span: span || null,
                     settings: {
-                        advance_on_triage: advanceOnTriage
+                        advance_on_triage: advanceOnTriage,
+                        display: displayType,
+                        columns: displayType === 'grid' ? _columnData : null
                     }
                 });
                 navigate(buildViewUrl(newView));
@@ -79,7 +96,11 @@ const ViewComposer = () => {
                     query,
                     sort,
                     span,
-                    settings: { advance_on_triage: advanceOnTriage }
+                    settings: {
+                        advance_on_triage: advanceOnTriage,
+                        display: displayType,
+                        columns: displayType === 'grid' ? _columnData : null
+                    }
                 });
             }
             showSuccessMessage(t(routeParams.id ? 'route.views.update.success' : 'route.views.create.success'));
@@ -101,7 +122,10 @@ const ViewComposer = () => {
         sort,
         span,
         advanceOnTriage,
+        displayType,
+        columns,
         navigate,
+        columnWidths,
         editView,
         showErrorMessage
     ]);
@@ -154,6 +178,8 @@ const ViewComposer = () => {
             setTitle(viewToEdit.title);
             setAdvanceOnTriage(viewToEdit.settings?.advance_on_triage ?? false);
             setQuery(viewToEdit.query);
+            setDisplayType((viewToEdit.settings?.display ?? null));
+            setType(viewToEdit.type);
             if (viewToEdit.sort) {
                 setSort(viewToEdit.sort);
             }
@@ -172,6 +198,6 @@ const ViewComposer = () => {
                                             fontSize: '0.9em',
                                             fontStyle: 'italic',
                                             mb: 0.5
-                                        }), variant: "body2", children: t('hit.search.prompt') }), _jsx(HitQuery, { triggerSearch: search, searching: searching, onChange: (_query, isDirty) => setIsSearchDirty(isDirty) }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HitSort, {}), _jsx(SearchSpan, { omitCustom: true }), _jsx("div", { style: { flex: 1 } }), _jsxs(Stack, { spacing: 1, direction: "row", alignItems: "center", sx: { flex: '0 !important', minWidth: '300px' }, children: [_jsx(Typography, { component: "span", children: t('view.settings.advance_on_triage') }), _jsx(Tooltip, { title: t('view.settings.advance_on_triage.description'), children: _jsx(HelpOutline, { sx: { fontSize: '16px' } }) }), _jsx(Checkbox, { size: "small", checked: advanceOnTriage, onChange: (_event, checked) => setAdvanceOnTriage(checked) })] })] }), response?.total ? (_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) })) : null, _jsx(LinearProgress, { sx: [!searching && { opacity: 0 }] })] }) }), _jsx(VSBoxContent, { children: _jsxs(Stack, { spacing: 1, children: [!response?.total && _jsx(AppListEmpty, {}), response?.items.map(hit => (_jsx(HitCard, { id: hit.howler.id, layout: HitLayout.DENSE }, hit.howler.id)))] }) })] }) }) }) }));
+                                        }), variant: "body2", children: t('hit.search.prompt') }), _jsx(Stack, { direction: "row", width: "100%", spacing: 2, alignItems: "flex-start", paddingBottom: 1, children: _jsxs(Stack, { direction: "column", width: "100%", spacing: 1, children: [_jsx(HitQuery, { triggerSearch: search, searching: searching, onChange: (_query, isDirty) => setIsSearchDirty(isDirty) }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HitSort, {}), _jsx(SearchSpan, { omitCustom: true }), _jsx("div", { style: { flex: 1 } }), _jsx(ChipPopper, { label: _jsx(Typography, { variant: "body2", children: t('view.settings') }), deleteIcon: _jsx(Settings, {}), toggleOnDelete: true, slotProps: { chip: { size: 'small' } }, placement: "bottom-end", children: _jsxs(Stack, { direction: "column", spacing: 1, children: [_jsxs(Stack, { spacing: 1, direction: "row", alignItems: "center", sx: { flex: '0 !important', minWidth: '300px' }, children: [_jsx(Typography, { component: "span", children: t('view.settings.advance_on_triage') }), _jsx(Tooltip, { title: t('view.settings.advance_on_triage.description'), children: _jsx(HelpOutline, { sx: { fontSize: '16px' } }) }), _jsx(FlexOne, {}), _jsx(Checkbox, { size: "small", checked: advanceOnTriage, onChange: (_event, checked) => setAdvanceOnTriage(checked) })] }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", justifyContent: "space-between", children: [_jsx(Typography, { component: "span", children: t('view.settings.layout') }), _jsx(LayoutToggle, { displayType: displayType, setDisplayType: setDisplayType, size: "small", allowNullValue: true })] })] }) })] })] }) }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "flex-end", justifyContent: "space-between", children: [response && (_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) })), _jsx(FlexOne, {}), displayType === 'grid' && (_jsx(AddColumnModal, { columns: columns, addColumn: key => isReady && setColumns(uniq([...columns, key])) }))] }), _jsx(LinearProgress, { sx: [!searching && { opacity: 0 }] })] }) }), _jsx(VSBoxContent, { children: displayType === 'grid' ? (_jsx(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, children: _jsx(HitTable, { query: query, items: response?.items }) })) : (_jsxs(Stack, { spacing: 1, children: [!response?.total && _jsx(AppListEmpty, {}), response?.items.map(hit => (_jsx(HitCard, { id: hit.howler.id, layout: HitLayout.DENSE }, hit.howler.id)))] })) })] }) }) }) }));
 };
 export default ViewComposer;