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

package/components/app/App.js

@@ -74,7 +74,9 @@ import AvatarProvider from './providers/AvatarProvider';
 import CustomPluginProvider from './providers/CustomPluginProvider';
 import FavouriteProvider from './providers/FavouritesProvider';
 import FieldProvider from './providers/FieldProvider';
+import GridColumnsProvider from './providers/GridColumnsProvider';
 import HitProvider from './providers/HitProvider';
+import HitSearchProvider from './providers/HitSearchProvider';
 import LocalStorageProvider from './providers/LocalStorageProvider';
 import ModalProvider from './providers/ModalProvider';
 import OverviewProvider from './providers/OverviewProvider';
@@ -232,7 +234,7 @@ const createRouter = () => createBrowserRouter([
             },
             {
                 path: 'views/create',
-                element: (_jsx(ParameterProvider, { children: _jsx(ViewComposer, {}) }))
+                element: (_jsx(ParameterProvider, { children: _jsx(HitSearchProvider, { children: _jsx(GridColumnsProvider, { viewSource: "path", children: _jsx(ViewComposer, {}) }) }) }))
             },
             {
                 path: 'views/:id',
@@ -240,7 +242,7 @@ const createRouter = () => createBrowserRouter([
             },
             {
                 path: 'views/:id/edit',
-                element: (_jsx(ParameterProvider, { children: _jsx(ViewComposer, {}) }))
+                element: (_jsx(ParameterProvider, { children: _jsx(HitSearchProvider, { children: _jsx(GridColumnsProvider, { viewSource: "path", children: _jsx(ViewComposer, {}) }) }) }))
             },
             {
                 path: 'admin/users',

package/components/app/providers/GridColumnsProvider.d.ts

@@ -0,0 +1,52 @@
+import { type PropsWithChildren, type SetStateAction } from 'react';
+/**
+ * Shape of the context value exposed by {@link GridColumnsProvider}.
+ *
+ * Column state is sourced from active views when present, otherwise from local storage.
+ * Mutations follow the same rule: they write back to local storage only when there are no
+ * active views (or when `syncLocal` is explicitly set to `true`).
+ */
+export type GridColumnsContextType = {
+    /** Ordered list of field keys to display as grid columns. */
+    columns: string[];
+    /**
+     * Replace or update the active column list.
+     * @param syncLocal - When `true`, also persists the change to local storage even if views are active.
+     */
+    setColumns: (columns: SetStateAction<string[]>, syncLocal?: boolean) => void;
+    /** Per-column widths (pixels, e.g. `120`), keyed by field name. */
+    columnWidths: Record<string, number>;
+    /**
+     * Set the width of a single column.
+     * @param syncLocal - When `true`, also persists the change to local storage even if views are active.
+     */
+    setColumnWidth: (column: string, width: number, syncLocal?: boolean) => void;
+    /**
+     * Maps each column field to the list of view titles that declared it.
+     * Empty array for columns that came from local storage rather than a view.
+     */
+    columnSources: Record<string, string[]>;
+    /** Persist the current in-memory column configuration (columns + widths) to local storage. */
+    syncToStorage: () => void;
+    /** `false` while an async view fetch is in flight; `true` once the column state is settled. */
+    isReady: boolean;
+};
+export declare const GridColumnsContext: import("react").Context<GridColumnsContextType>;
+/**
+ * Manages which grid columns are active and how wide they are.
+ *
+ * **Priority order:**
+ * 1. Active views (fetched asynchronously) — columns and widths are derived from view settings.
+ * 2. Local storage — used as fallback when no views are active.
+ *
+ * Local storage is only written when there are no active views, keeping view-driven state
+ * isolated from the user's personal preferences.
+ *
+ * @param viewSource - Determines where view IDs are read from:
+ *   - `"params"` (default) — reads from `ParameterContext` (query-string driven).
+ *   - `"path"` — reads from the current route's `:id` param.
+ */
+declare const GridColumnsProvider: ({ children, viewSource }: PropsWithChildren<{
+    viewSource?: "params" | "path";
+}>) => import("react/jsx-runtime").JSX.Element;
+export default GridColumnsProvider;

package/components/app/providers/GridColumnsProvider.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { parsePixelSizeStringToInt } from '@cccsaurora/howler-ui/utils/stringUtils';
+import { HitSearchContext } from './HitSearchProvider';
+import { ParameterContext } from './ParameterProvider';
+import { ViewContext } from './ViewProvider';
+export const GridColumnsContext = createContext(null);
+/**
+ * Manages which grid columns are active and how wide they are.
+ *
+ * **Priority order:**
+ * 1. Active views (fetched asynchronously) — columns and widths are derived from view settings.
+ * 2. Local storage — used as fallback when no views are active.
+ *
+ * Local storage is only written when there are no active views, keeping view-driven state
+ * isolated from the user's personal preferences.
+ *
+ * @param viewSource - Determines where view IDs are read from:
+ *   - `"params"` (default) — reads from `ParameterContext` (query-string driven).
+ *   - `"path"` — reads from the current route's `:id` param.
+ */
+const GridColumnsProvider = ({ children, viewSource = 'params' }) => {
+    const routeParams = useParams();
+    // Resolve view IDs from the appropriate source.
+    const parameterViewIds = useContextSelector(ParameterContext, ctx => ctx.views);
+    const pathViewIds = useMemo(() => (routeParams.id ? [routeParams.id] : []), [routeParams.id]);
+    const viewIds = viewSource === 'params' ? parameterViewIds : pathViewIds;
+    const getCurrentViews = useContextSelector(ViewContext, ctx => ctx.getCurrentViews);
+    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
+    // --- Local storage state (user's personal preferences) ---
+    const [localStorageColumns, setLocalStorageColumns] = useMyLocalStorageItem(StorageKey.GRID_COLUMNS, [
+        'howler.outline.threat',
+        'howler.outline.target',
+        'howler.outline.indicators',
+        'howler.outline.summary'
+    ]);
+    const [localStorageColumnWidths, setLocalStorageColumnWidths] = useMyLocalStorageItem(StorageKey.GRID_COLUMN_WIDTHS, {});
+    // --- In-memory state (may be overridden by view data) ---
+    const [contextColumns, setContextColumns] = useState(localStorageColumns);
+    /** Non-null only when columns were loaded from views; null means fall back to local storage widths. */
+    const [viewColumnWidths, setViewColumnWidths] = useState(null);
+    /** Non-null only when columns were loaded from views; tracks which view(s) declared each column. */
+    const [viewColumnSources, setViewColumnSources] = useState(null);
+    const [isReady, setIsReady] = useState(false);
+    // Parse local storage widths into numbers for backwards compatibility with css style strings
+    const parsedLocalStorageColumnWidths = useMemo(() => {
+        const parsed = {};
+        for (const [col, width] of Object.entries(localStorageColumnWidths)) {
+            const numWidth = typeof width === 'string' ? parsePixelSizeStringToInt(width) : width;
+            if (numWidth !== null) {
+                parsed[col] = numWidth;
+            }
+        }
+        return parsed;
+    }, [localStorageColumnWidths]);
+    /**
+     * Tracks the current async load "cycle" to guard against stale async results.
+     * - `viewIds` is snapshotted at the start of each effect run; the callback checks
+     *   identity (`===`) before applying results to confirm it is still the current run.
+     * - `hasLocalEdits` is set to `true` the moment the user makes a manual change mid-flight,
+     *   which causes the pending async response to be discarded.
+     */
+    const currentLoadRef = useRef({ viewIds, hasLocalEdits: false });
+    const hasViews = viewIds?.length > 0;
+    // Fetch and apply view column settings whenever the set of active views changes.
+    useEffect(() => {
+        // Start a new load cycle.
+        currentLoadRef.current = { viewIds, hasLocalEdits: false };
+        if (!hasViews) {
+            // No views active — fall back to local storage immediately.
+            setContextColumns(localStorageColumns);
+            setViewColumnWidths(null);
+            setViewColumnSources(null);
+            setIsReady(true);
+            return;
+        }
+        setIsReady(false);
+        getCurrentViews({ views: viewIds }).then(_views => {
+            // Discard stale results: either the user already made a manual edit, or viewIds changed.
+            if (currentLoadRef.current.hasLocalEdits) {
+                setIsReady(true);
+                return;
+            }
+            if (currentLoadRef.current.viewIds !== viewIds) {
+                return;
+            }
+            const views = _views.filter(Boolean);
+            if (!views.length) {
+                // Views resolved to nothing (e.g. all deleted) — fall back to local storage.
+                setContextColumns(localStorageColumns);
+                setViewColumnWidths(null);
+                setViewColumnSources(null);
+                setIsReady(true);
+                return;
+            }
+            // Honour the display-type declared by the highest-priority view.
+            if (views[0].settings?.display === 'list') {
+                setDisplayType('list');
+            }
+            else if (views[0].settings?.display === 'grid') {
+                setDisplayType('grid');
+                // Sort grid views by their position in the requested viewIds array so that
+                // the first-listed view has the highest precedence for column order and width.
+                const idRankMap = new Map(viewIds.map((id, i) => [id, i]));
+                const gridViews = views
+                    .filter(v => v.settings?.display === 'grid')
+                    .sort((a, b) => (idRankMap.get(a.view_id) ?? Infinity) - (idRankMap.get(b.view_id) ?? Infinity));
+                const columns = [];
+                const widths = {};
+                const sources = {};
+                for (const view of gridViews) {
+                    for (const { field, width } of view.settings?.columns ?? []) {
+                        if (!sources[field]) {
+                            // First occurrence wins for column order and width.
+                            columns.push(field);
+                            widths[field] = width ?? undefined;
+                            sources[field] = [view.title];
+                        }
+                        else {
+                            // Subsequent views that also declare this field are recorded as additional sources.
+                            sources[field].push(view.title);
+                        }
+                    }
+                }
+                setContextColumns(columns);
+                setViewColumnWidths(widths);
+                setViewColumnSources(sources);
+            }
+            setIsReady(true);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [viewIds, hasViews, getCurrentViews, localStorageColumns, setDisplayType]);
+    const setColumns = useCallback((columns, syncLocal) => {
+        // Persist to local storage only when there are no active views (or when explicitly requested).
+        if (!hasViews || syncLocal) {
+            const newColumns = typeof columns === 'function' ? columns(contextColumns) : columns;
+            setLocalStorageColumns(newColumns);
+        }
+        // Flag that a user edit has occurred so any in-flight async fetch won't overwrite this change.
+        currentLoadRef.current.hasLocalEdits = true;
+        setContextColumns(columns);
+    }, [hasViews, contextColumns, setLocalStorageColumns]);
+    // When views are active, use their widths; otherwise fall back to local storage widths.
+    const columnWidths = useMemo(() => viewColumnWidths ?? parsedLocalStorageColumnWidths, [viewColumnWidths, parsedLocalStorageColumnWidths]);
+    const setColumnWidth = useCallback((column, width, syncLocal) => {
+        if (!hasViews || syncLocal) {
+            // No active views — persist directly to local storage.
+            setLocalStorageColumnWidths({ ...parsedLocalStorageColumnWidths, [column]: width });
+        }
+        else {
+            // Active views — update the in-memory view widths only, and flag a local edit.
+            currentLoadRef.current.hasLocalEdits = true;
+            setViewColumnWidths(prev => ({ ...prev, [column]: width }));
+        }
+    }, [hasViews, parsedLocalStorageColumnWidths, setLocalStorageColumnWidths]);
+    // Map each column to the view(s) that declared it, or an empty array for local-storage columns.
+    const columnSources = useMemo(() => Object.fromEntries(contextColumns.map(col => [col, viewColumnSources?.[col] ?? []])), [viewColumnSources, contextColumns]);
+    /** Flush the current in-memory state to local storage (used by the "save to storage" action). */
+    const syncToStorage = useCallback(() => {
+        setLocalStorageColumns(contextColumns);
+        setLocalStorageColumnWidths(columnWidths);
+    }, [contextColumns, columnWidths, setLocalStorageColumns, setLocalStorageColumnWidths]);
+    return (_jsx(GridColumnsContext.Provider, { value: {
+            columns: contextColumns,
+            setColumns,
+            columnWidths,
+            setColumnWidth,
+            columnSources,
+            syncToStorage,
+            isReady
+        }, children: children }));
+};
+export default GridColumnsProvider;

package/components/app/providers/GridColumnsProvider.test.js

@@ -0,0 +1,255 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { useContext } from 'react';
+import { setupContextSelectorMock, setupLocalStorageMock, setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import GridColumnsProvider, { GridColumnsContext } from './GridColumnsProvider';
+import { HitSearchContext } from './HitSearchProvider';
+import { ParameterContext } from './ParameterProvider';
+import { ViewContext } from './ViewProvider';
+setupContextSelectorMock();
+setupReactRouterMock();
+const mockLocalStorage = setupLocalStorageMock();
+import { useParams } from 'react-router-dom';
+const mockParams = vi.mocked(useParams);
+const mockGetCurrentViews = vi.fn();
+const mockSetDisplayType = vi.fn();
+const mockViewsContext = {
+    getCurrentViews: mockGetCurrentViews
+};
+const mockHitSearchContext = {
+    setDisplayType: mockSetDisplayType
+};
+const makeWrapper = (parameterViewIds = [], routeId) => {
+    mockParams.mockReturnValue({ id: routeId });
+    const parameterContextValue = {
+        views: parameterViewIds
+    };
+    const Wrapper = ({ children }) => (_jsx(ParameterContext.Provider, { value: parameterContextValue, children: _jsx(ViewContext.Provider, { value: mockViewsContext, children: _jsx(HitSearchContext.Provider, { value: mockHitSearchContext, children: _jsx(GridColumnsProvider, { viewSource: routeId ? 'path' : 'params', children: children }) }) }) }));
+    return Wrapper;
+};
+const _prefixStorageKey = (key) => `howler.ui.${key}`;
+describe('no views', () => {
+    beforeEach(() => {
+        mockLocalStorage.clear();
+        mockGetCurrentViews.mockClear();
+        mockSetDisplayType.mockClear();
+        mockGetCurrentViews.mockResolvedValue([]);
+        mockLocalStorage.setItem(_prefixStorageKey(StorageKey.GRID_COLUMNS), JSON.stringify(['col1', 'col2']));
+        mockLocalStorage.setItem(_prefixStorageKey(StorageKey.GRID_COLUMN_WIDTHS), JSON.stringify({ col1: '100px' }));
+    });
+    it('should get columns from local storage', () => {
+        const Wrapper = makeWrapper();
+        const hook = renderHook(() => useContext(GridColumnsContext), { wrapper: Wrapper });
+        expect(mockLocalStorage.getItem).toHaveBeenCalledWith(_prefixStorageKey(StorageKey.GRID_COLUMNS));
+        expect(hook.result.current.columns).toEqual(['col1', 'col2']);
+        expect(mockLocalStorage.getItem).toHaveBeenCalledWith(_prefixStorageKey(StorageKey.GRID_COLUMN_WIDTHS));
+        expect(hook.result.current.columnWidths).toEqual({ col1: 100 });
+        expect(mockSetDisplayType).not.toHaveBeenCalled();
+    });
+    it('should update columns in local storage', () => {
+        const Wrapper = makeWrapper();
+        const hook = renderHook(() => useContext(GridColumnsContext), { wrapper: Wrapper });
+        act(() => {
+            hook.result.current.setColumns(['col1', 'col3']);
+        });
+        expect(mockLocalStorage.setItem).toHaveBeenCalledWith(_prefixStorageKey(StorageKey.GRID_COLUMNS), JSON.stringify(['col1', 'col3']));
+        expect(hook.result.current.columns).toEqual(['col1', 'col3']);
+    });
+    it('should update column widths in local storage', () => {
+        const Wrapper = makeWrapper();
+        const hook = renderHook(() => useContext(GridColumnsContext), { wrapper: Wrapper });
+        act(() => {
+            hook.result.current.setColumnWidth('col1', 150);
+        });
+        expect(mockLocalStorage.setItem).toHaveBeenCalledWith(_prefixStorageKey(StorageKey.GRID_COLUMN_WIDTHS), JSON.stringify({ col1: 150 }));
+        expect(hook.result.current.columnWidths).toEqual({ col1: 150 });
+    });
+    it("should add a column width to local storage if it doesn't exist", () => {
+        const Wrapper = makeWrapper();
+        const hook = renderHook(() => useContext(GridColumnsContext), { wrapper: Wrapper });
+        act(() => {
+            hook.result.current.setColumnWidth('col2', 200);
+        });
+        expect(mockLocalStorage.setItem).toHaveBeenCalledWith(_prefixStorageKey(StorageKey.GRID_COLUMN_WIDTHS), JSON.stringify({ col1: 100, col2: 200 }));
+        expect(hook.result.current.columnWidths).toEqual({ col1: 100, col2: 200 });
+    });
+});
+describe('with views', () => {
+    const mockViews = new Map([
+        [
+            'view1',
+            {
+                view_id: 'view1',
+                settings: {
+                    display: 'grid',
+                    columns: [
+                        {
+                            field: 'viewCol1',
+                            width: 101
+                        },
+                        {
+                            field: 'viewCol2',
+                            width: 102
+                        },
+                        {
+                            field: 'viewCol3'
+                        }
+                    ]
+                }
+            }
+        ],
+        [
+            'view2',
+            {
+                view_id: 'view2',
+                settings: {
+                    display: 'grid',
+                    columns: [
+                        {
+                            field: 'viewCol3',
+                            width: 103
+                        },
+                        {
+                            field: 'viewCol4',
+                            width: 204
+                        },
+                        {
+                            field: 'viewCol2',
+                            width: 202
+                        }
+                    ]
+                }
+            }
+        ],
+        [
+            'view3',
+            {
+                view_id: 'view3',
+                settings: {
+                    display: 'grid',
+                    columns: [
+                        {
+                            field: 'viewCol5',
+                            width: 300
+                        },
+                        {
+                            field: 'viewCol6',
+                            width: 301
+                        }
+                    ]
+                }
+            }
+        ],
+        ['listView', { view_id: 'listView', settings: { display: 'list' } }]
+    ]);
+    const getDelayedCurrentViews = (timeout) => {
+        return ({ views }) => new Promise(resolve => setTimeout(() => resolve(views ? views.map((viewId) => mockViews.get(viewId)) : Array.from(mockViews.values())), timeout));
+    };
+    const localStorageColumns = JSON.stringify(['localCol1', 'localCol2']);
+    const localStorageColumnWidths = JSON.stringify({ localCol1: '100px' });
+    beforeEach(() => {
+        mockLocalStorage.clear();
+        mockGetCurrentViews.mockClear();
+        mockSetDisplayType.mockClear();
+        mockGetCurrentViews.mockImplementation(({ views }) => Promise.resolve(views ? views.map((viewId) => mockViews.get(viewId)) : Array.from(mockViews.values())));
+        mockLocalStorage.setItem(_prefixStorageKey(StorageKey.GRID_COLUMNS), localStorageColumns);
+        mockLocalStorage.setItem(_prefixStorageKey(StorageKey.GRID_COLUMN_WIDTHS), localStorageColumnWidths);
+    });
+    it('should get columns from parameters', async () => {
+        const Wrapper = makeWrapper(['view1', 'view2']);
+        const hook = renderHook(() => useContext(GridColumnsContext), { wrapper: Wrapper });
+        expect(mockGetCurrentViews).toHaveBeenCalledWith({ views: ['view1', 'view2'] });
+        await waitFor(() => expect(hook.result.current.isReady).toBe(true));
+        expect(hook.result.current.columns).toEqual(['viewCol1', 'viewCol2', 'viewCol3', 'viewCol4']);
+        expect(hook.result.current.columnWidths).toEqual({
+            viewCol1: 101,
+            viewCol2: 102,
+            viewCol4: 204
+        });
+        expect(mockSetDisplayType).toHaveBeenCalledWith('grid');
+        expect(mockLocalStorage.getItem(_prefixStorageKey(StorageKey.GRID_COLUMNS))).toEqual(localStorageColumns);
+        expect(mockLocalStorage.getItem(_prefixStorageKey(StorageKey.GRID_COLUMN_WIDTHS))).toEqual(localStorageColumnWidths);
+    });
+    it('should get columns from path', async () => {
+        const Wrapper = makeWrapper(['view1', 'view2'], 'view3');
+        const hook = renderHook(() => useContext(GridColumnsContext), { wrapper: Wrapper });
+        expect(mockGetCurrentViews).toHaveBeenCalledWith({ views: ['view3'] });
+        await waitFor(() => expect(hook.result.current.isReady).toBe(true));
+        expect(hook.result.current.columns).toEqual(['viewCol5', 'viewCol6']);
+        expect(hook.result.current.columnWidths).toEqual({ viewCol5: 300, viewCol6: 301 });
+        expect(mockSetDisplayType).toHaveBeenCalledWith('grid');
+        expect(mockLocalStorage.getItem(_prefixStorageKey(StorageKey.GRID_COLUMNS))).toEqual(localStorageColumns);
+        expect(mockLocalStorage.getItem(_prefixStorageKey(StorageKey.GRID_COLUMN_WIDTHS))).toEqual(localStorageColumnWidths);
+    });
+    it('should update columns in context', async () => {
+        const Wrapper = makeWrapper(['view1']);
+        const hook = renderHook(() => useContext(GridColumnsContext), { wrapper: Wrapper });
+        await waitFor(() => expect(hook.result.current.isReady).toBe(true));
+        await act(async () => {
+            hook.result.current.setColumns(['newCol1', 'newCol2']);
+        });
+        expect(hook.result.current.columns).toEqual(['newCol1', 'newCol2']);
+        expect(mockLocalStorage.getItem(_prefixStorageKey(StorageKey.GRID_COLUMNS))).toEqual(localStorageColumns);
+        expect(mockLocalStorage.getItem(_prefixStorageKey(StorageKey.GRID_COLUMN_WIDTHS))).toEqual(localStorageColumnWidths);
+    });
+    it('should update column widths in context', async () => {
+        const Wrapper = makeWrapper(['view1']);
+        const hook = renderHook(() => useContext(GridColumnsContext), { wrapper: Wrapper });
+        await waitFor(() => expect(hook.result.current.isReady).toBe(true));
+        await act(async () => {
+            hook.result.current.setColumnWidth('viewCol1', 150);
+        });
+        expect(hook.result.current.columnWidths).toEqual({
+            viewCol1: 150,
+            viewCol2: 102
+        });
+        expect(mockLocalStorage.getItem(_prefixStorageKey(StorageKey.GRID_COLUMNS))).toEqual(localStorageColumns);
+        expect(mockLocalStorage.getItem(_prefixStorageKey(StorageKey.GRID_COLUMN_WIDTHS))).toEqual(localStorageColumnWidths);
+    });
+    it("should add a column width to context if it doesn't exist", async () => {
+        const Wrapper = makeWrapper(['view1']);
+        const hook = renderHook(() => useContext(GridColumnsContext), { wrapper: Wrapper });
+        await waitFor(() => expect(hook.result.current.isReady).toBe(true));
+        await act(async () => {
+            hook.result.current.setColumnWidth('viewCol3', 150);
+        });
+        expect(hook.result.current.columnWidths).toEqual({
+            viewCol1: 101,
+            viewCol2: 102,
+            viewCol3: 150
+        });
+        expect(mockLocalStorage.getItem(_prefixStorageKey(StorageKey.GRID_COLUMNS))).toEqual(localStorageColumns);
+        expect(mockLocalStorage.getItem(_prefixStorageKey(StorageKey.GRID_COLUMN_WIDTHS))).toEqual(localStorageColumnWidths);
+    });
+    it('should not update context if views change but local edits have been made', async () => {
+        // force race condition
+        mockGetCurrentViews.mockImplementationOnce(getDelayedCurrentViews(100));
+        const Wrapper = makeWrapper(['view1']);
+        const hook = renderHook(() => useContext(GridColumnsContext), { wrapper: Wrapper });
+        await act(async () => {
+            hook.result.current.setColumns(['newCol1', 'newCol2']);
+        });
+        // dirty takes precedence
+        expect(hook.result.current.columns).toEqual(['newCol1', 'newCol2']);
+    });
+    it('should not update context if async view load returns for an outdated view set', async () => {
+        // force race condition
+        mockGetCurrentViews.mockImplementationOnce(getDelayedCurrentViews(100));
+        const hook = renderHook(() => useContext(GridColumnsContext), { wrapper: makeWrapper([], 'view1') });
+        mockParams.mockReturnValue({ id: 'view2' });
+        hook.rerender();
+        await waitFor(() => expect(hook.result.current.isReady).toBe(true));
+        // most recent request takes precedence
+        expect(hook.result.current.columns).toEqual(['viewCol3', 'viewCol4', 'viewCol2']);
+    });
+    it('should keep isReady false until all async view loads are complete', async () => {
+        mockGetCurrentViews.mockImplementation(getDelayedCurrentViews(100));
+        const hook = renderHook(() => useContext(GridColumnsContext), { wrapper: makeWrapper([], 'view1') });
+        mockGetCurrentViews.mockImplementation(getDelayedCurrentViews(200));
+        mockParams.mockReturnValue({ id: 'view2' });
+        hook.rerender();
+        await waitFor(() => expect(hook.result.current.isReady).toBe(true));
+        expect(hook.result.current.columns).toEqual(['viewCol3', 'viewCol4', 'viewCol2']);
+    });
+});

package/components/elements/hit/HitContextMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

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;