@cccsaurora/howler-ui 2.13.0-dev.75 → 2.13.0-dev.96

package/components/app/providers/FavouritesProvider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { QueryStats, SavedSearch } from '@mui/icons-material';
 import { useAppLeftNav, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { uniqBy } from 'lodash-es';
+import { uniq } from 'lodash-es';
 import { createContext, useCallback, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
@@ -13,11 +13,10 @@ const FavouriteProvider = ({ children }) => {
     const leftNav = useAppLeftNav();
     const appUser = useAppUser();
     const analytics = useContext(AnalyticContext);
-    const views = useContextSelector(ViewContext, ctx => ctx.views);
-    const viewsReady = useContextSelector(ViewContext, ctx => ctx.ready);
-    const processViewElement = useCallback(() => {
+    const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
+    const processViewElement = useCallback(async () => {
         const viewElement = leftNav.elements.find(el => el.element?.id === 'views');
-        const favourites = appUser.user?.favourite_views || [];
+        const favourites = uniq(appUser.user?.favourite_views || []);
         // There are no favourites and no nav elements - return
         if (favourites.length < 1 && !viewElement) {
             return null;
@@ -30,19 +29,15 @@ const FavouriteProvider = ({ children }) => {
         if (favourites.length === viewElement?.element?.items?.length) {
             return viewElement;
         }
-        const items = uniqBy(favourites
-            .map(view_id => {
-            const view = views?.find(v => v.view_id === view_id);
-            return view
-                ? {
-                    id: view.view_id,
-                    text: t(view.title),
-                    route: `/views/${view.view_id}`,
-                    nested: true
-                }
-                : null;
-        })
-            .filter(v => !!v), val => val.id);
+        const savedViews = await fetchViews(favourites);
+        const items = savedViews
+            .filter(view => !!view)
+            .map(view => ({
+            id: view.view_id,
+            text: t(view.title),
+            route: `/views/${view.view_id}`,
+            nested: true
+        }));
         if (viewElement) {
             const newViewElement = {
                 ...viewElement,
@@ -64,7 +59,7 @@ const FavouriteProvider = ({ children }) => {
                 }
             };
         }
-    }, [appUser.user?.favourite_views, leftNav, t, views]);
+    }, [appUser.user?.favourite_views, fetchViews, leftNav.elements, t]);
     const processAnalyticElement = useCallback(() => {
         const analyticElement = leftNav.elements.find(el => el.element?.id === 'analytics');
         const favourites = appUser.user?.favourite_analytics;
@@ -115,23 +110,25 @@ const FavouriteProvider = ({ children }) => {
         }
     }, [analytics.analytics, appUser.user?.favourite_analytics, leftNav, t]);
     useEffect(() => {
-        if (!appUser.isReady() || !viewsReady || !analytics.ready) {
+        if (!appUser.isReady() || !analytics.ready) {
             return;
         }
         const newElements = leftNav.elements
             .filter(el => !['views', 'analytics'].includes(el.element?.id))
             .filter(el => !!el);
-        const analyticElement = processAnalyticElement();
-        if (analyticElement) {
-            newElements.splice(1, 0, analyticElement);
-        }
-        const viewElement = processViewElement();
-        if (viewElement) {
-            newElements.splice(1, 0, viewElement);
-        }
-        leftNav.setElements(newElements);
+        (async () => {
+            const analyticElement = processAnalyticElement();
+            if (analyticElement) {
+                newElements.splice(1, 0, analyticElement);
+            }
+            const viewElement = await processViewElement();
+            if (viewElement) {
+                newElements.splice(1, 0, viewElement);
+            }
+            leftNav.setElements(newElements);
+        })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [analytics.ready, appUser, viewsReady]);
+    }, [analytics.ready, appUser]);
     return _jsx(FavouriteContext.Provider, { value: {}, children: children });
 };
 export default FavouriteProvider;

package/components/app/providers/HitSearchProvider.js

@@ -25,8 +25,8 @@ const HitSearchProvider = ({ children }) => {
     const location = useLocation();
     const { dispatchApi } = useMyApi();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
-    const viewsReady = useContextSelector(ViewContext, ctx => ctx.ready);
-    const views = useContextSelector(ViewContext, ctx => ctx.views);
+    const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
+    const defaultView = useContextSelector(ViewContext, ctx => ctx.defaultView);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const offset = useContextSelector(ParameterContext, ctx => ctx.offset);
@@ -44,7 +44,7 @@ const HitSearchProvider = ({ children }) => {
     const [response, setResponse] = useState();
     const [queryHistory, setQueryHistory] = useState(JSON.parse(get(StorageKey.QUERY_HISTORY)) || { 'howler.id: *': new Date().toISOString() });
     const [fzfSearch, setFzfSearch] = useState(false);
-    const viewId = useMemo(() => (location.pathname.startsWith('/views') ? routeParams.id : null), [location.pathname, routeParams.id]);
+    const viewId = useMemo(() => (location.pathname.startsWith('/views') ? routeParams.id : defaultView) ?? null, [defaultView, location.pathname, routeParams.id]);
     const bundleId = useMemo(() => (location.pathname.startsWith('/bundles') ? routeParams.id : null), [location.pathname, routeParams.id]);
     const layout = useMemo(() => (isMobile ? HitLayout.COMFY : (get(StorageKey.HIT_LAYOUT) ?? HitLayout.NORMAL)), [get]);
     const search = useCallback(async (_query, appendResults) => {
@@ -78,7 +78,7 @@ const HitSearchProvider = ({ children }) => {
                     fullQuery = `(howler.bundles:${bundle}) AND (${fullQuery})`;
                 }
                 else if (viewId) {
-                    fullQuery = `(${views.find(_view => _view.view_id === viewId)?.query || 'howler.id:*'}) AND (${fullQuery})`;
+                    fullQuery = `(${(await getCurrentView())?.query || 'howler.id:*'}) AND (${fullQuery})`;
                 }
                 const _response = await dispatchApi(api.search.hit.post({
                     offset: appendResults ? response.rows : offset,
@@ -130,15 +130,12 @@ const HitSearchProvider = ({ children }) => {
         pageCount,
         trackTotalHits,
         loadHits,
-        views,
+        getCurrentView,
+        defaultView,
         setOffset
     ]);
     // We only run this when ancillary properties (i.e. filters, sorting) change
     useEffect(() => {
-        // We're being asked to present a view, but we don't currently have the views loaded
-        if (viewId && !viewsReady) {
-            return;
-        }
         if (span.endsWith('custom') && (!startDate || !endDate)) {
             return;
         }
@@ -149,7 +146,7 @@ const HitSearchProvider = ({ children }) => {
             setResponse(null);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filter, offset, pageCount, sort, span, bundleId, location.pathname, viewsReady, startDate, endDate]);
+    }, [filter, offset, pageCount, sort, span, bundleId, location.pathname, startDate, endDate]);
     return (_jsx(HitSearchContext.Provider, { value: {
             layout,
             displayType,

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

@@ -1,17 +1,18 @@
 import type { View } from '@cccsaurora/howler-ui/models/entities/generated/View';
 import { type FC, type PropsWithChildren } from 'react';
 export interface ViewContextType {
-    ready: boolean;
     defaultView: string;
     setDefaultView: (viewId: string) => void;
-    views: View[];
+    views: {
+        [viewId: string]: View;
+    };
     addFavourite: (id: string) => Promise<void>;
     removeFavourite: (id: string) => Promise<void>;
-    fetchViews: (force?: boolean) => Promise<void>;
+    fetchViews: (ids?: string[]) => Promise<View[]>;
     addView: (v: View) => Promise<View>;
     editView: (id: string, title: string, query: string, sort: string, span: string, advanceOnTriage: boolean) => Promise<View>;
     removeView: (id: string) => Promise<void>;
-    getCurrentView: () => View;
+    getCurrentView: (lazy?: boolean) => Promise<View>;
 }
 export declare const ViewContext: import("use-context-selector").Context<ViewContextType>;
 declare const ViewProvider: FC<PropsWithChildren>;

package/components/app/providers/ViewProvider.js

@@ -3,6 +3,7 @@ import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { has, omit } from 'lodash-es';
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { createContext, useContextSelector } from 'use-context-selector';
@@ -14,77 +15,98 @@ const ViewProvider = ({ children }) => {
     const [defaultView, setDefaultView] = useMyLocalStorageItem(StorageKey.DEFAULT_VIEW);
     const location = useLocation();
     const routeParams = useParams();
-    const [loading, setLoading] = useState(false);
-    const [views, setViews] = useState({ ready: false, views: [] });
-    const fetchViews = useCallback(async (force = false) => {
-        if (views.ready && !force) {
-            return;
+    const [views, setViews] = useState({});
+    const fetchViews = useCallback(async (ids) => {
+        if (!ids) {
+            const newViews = (await dispatchApi(api.view.get(), { throwError: false })) ?? [];
+            setViews(_views => ({
+                ..._views,
+                ...Object.fromEntries(newViews.map(_view => [_view.view_id, _view]))
+            }));
+            return newViews;
         }
-        if (!appUser.isReady()) {
-            return;
+        const missingIds = ids.filter(_id => !views[_id]);
+        if (missingIds.length < 1) {
+            return ids.map(id => views[id]);
         }
-        setLoading(true);
         try {
-            setViews({ ready: true, views: await api.view.get() });
-        }
-        finally {
-            setLoading(false);
+            const response = await dispatchApi(api.search.view.post({
+                query: `view_id:(${missingIds.join(' OR ')})`,
+                rows: missingIds.length
+            }));
+            const newViews = Object.fromEntries(response.items.map(_view => [_view.view_id, _view]));
+            setViews(_views => ({
+                ..._views,
+                ...Object.fromEntries(missingIds.map(_view_id => [_view_id, null])),
+                ...newViews
+            }));
+            return ids.map(id => views[id] ?? newViews[id]);
         }
-    }, [appUser, views.ready]);
-    useEffect(() => {
-        if (!views.ready && !loading) {
-            fetchViews();
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn(e);
+            return [];
         }
-    }, [fetchViews, views.ready, appUser, loading]);
+    }, [dispatchApi, views]);
     useEffect(() => {
-        if (defaultView && views.views?.length > 0 && !views.views?.find(v => v.view_id === defaultView)) {
-            setDefaultView(undefined);
+        if (!defaultView || has(views, defaultView)) {
+            return;
         }
-    });
-    const getCurrentView = useCallback(() => {
-        if (!location.pathname.startsWith('/views')) {
+        (async () => {
+            const result = await fetchViews([defaultView]);
+            if (!result.length) {
+                setDefaultView(undefined);
+            }
+        })();
+    }, [defaultView, fetchViews, setDefaultView, views]);
+    const getCurrentView = useCallback(async (lazy = false) => {
+        const id = location.pathname.startsWith('/views') ? routeParams.id : defaultView;
+        if (!id) {
             return null;
         }
-        return views.views.find(_view => _view.view_id === routeParams.id);
-    }, [location.pathname, routeParams.id, views.views]);
+        if (!has(views, id) && !lazy) {
+            return (await fetchViews([id]))[0];
+        }
+        return views[id];
+    }, [defaultView, fetchViews, location.pathname, routeParams.id, views]);
     const editView = useCallback(async (id, title, query, sort, span, advanceOnTriage) => {
-        const result = await api.view.put(id, title, query, sort, span, advanceOnTriage);
+        const result = await dispatchApi(api.view.put(id, title, query, sort, span, advanceOnTriage));
         setViews(_views => ({
             ..._views,
-            views: _views.views.map(v => v.view_id === id ? { ...v, title, query, sort, span, settings: { advance_on_triage: advanceOnTriage } } : v)
+            [id]: { ...(_views[id] ?? {}), title, query, sort, span, settings: { advance_on_triage: advanceOnTriage } }
         }));
         return result;
-    }, []);
+    }, [dispatchApi]);
     const addFavourite = useCallback(async (id) => {
-        await api.view.favourite.post(id);
+        await dispatchApi(api.view.favourite.post(id));
         appUser.setUser({
             ...appUser.user,
             favourite_views: [...appUser.user.favourite_views, id]
         });
-    }, [appUser]);
+    }, [appUser, dispatchApi]);
     const addView = useCallback(async (view) => {
         const newView = await dispatchApi(api.view.post(view));
-        setViews(_views => ({ ..._views, views: [..._views.views, newView] }));
+        setViews(_views => ({ ..._views, [newView.view_id]: newView }));
         addFavourite(newView.view_id);
         return newView;
     }, [addFavourite, dispatchApi]);
     const removeFavourite = useCallback(async (id) => {
-        await api.view.favourite.del(id);
+        await dispatchApi(api.view.favourite.del(id));
         appUser.setUser({
             ...appUser.user,
             favourite_views: appUser.user.favourite_views.filter(v => v !== id)
         });
-    }, [appUser]);
+    }, [appUser, dispatchApi]);
     const removeView = useCallback(async (id) => {
-        const result = await api.view.del(id);
-        setViews(_views => ({ ..._views, views: _views.views.filter(v => v.view_id !== id) }));
+        const result = await dispatchApi(api.view.del(id));
+        setViews(_views => omit(_views, id));
         if (appUser.user?.favourite_views.includes(id)) {
             removeFavourite(id);
         }
         return result;
-    }, [appUser.user?.favourite_views, removeFavourite]);
+    }, [appUser.user?.favourite_views, dispatchApi, removeFavourite]);
     return (_jsx(ViewContext.Provider, { value: {
-            ...views,
+            views,
             addFavourite,
             removeFavourite,
             fetchViews,

package/components/elements/hit/HitActions.js

@@ -68,7 +68,7 @@ const HitActions = ({ hit, orientation = 'horizontal' }) => {
                     actionFunction: async () => {
                         if (!loading) {
                             await assess(assessment, analytic?.triage_settings?.skip_rationale);
-                            if (getCurrentView()?.settings?.advance_on_triage && nextHit) {
+                            if ((await getCurrentView())?.settings?.advance_on_triage && nextHit) {
                                 clearSelectedHits(nextHit.howler.id);
                                 setSelected?.(nextHit.howler.id);
                             }

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

@@ -10,7 +10,7 @@ import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/Fl
 import HitSummary from '@cccsaurora/howler-ui/components/elements/hit/HitSummary';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
-import { isNull } from 'lodash-es';
+import { has, isNull } from 'lodash-es';
 import moment from 'moment';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -28,7 +28,6 @@ const HitBrowser = () => {
     const { t } = useTranslation();
     const theme = useTheme();
     const views = useContextSelector(ViewContext, ctx => ctx.views);
-    const viewsReady = useContextSelector(ViewContext, ctx => ctx.ready);
     const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
@@ -61,7 +60,7 @@ const HitBrowser = () => {
             _fullQuery = `(howler.bundles:${bundle}) AND (${_fullQuery})`;
         }
         else if (viewId) {
-            _fullQuery = `(${views.find(_view => _view.view_id === viewId)?.query || 'howler.id:*'}) AND (${_fullQuery})`;
+            _fullQuery = `(${views[viewId]?.query || 'howler.id:*'}) AND (${_fullQuery})`;
         }
         return _fullQuery;
     }, [location.pathname, query, routeParams.id, views, viewId]);
@@ -69,11 +68,11 @@ const HitBrowser = () => {
         if (selectedHits.length > 1) {
             return true;
         }
-        if (selectedHits.length === 1 && selectedHits[0]?.howler.id !== routeParams.id) {
+        if (selectedHits.length === 1 && selected && selectedHits[0]?.howler.id !== selected) {
             return true;
         }
         return false;
-    }, [routeParams.id, selectedHits]);
+    }, [selected, selectedHits]);
     useEffect(() => {
         const newQuery = searchParams.get('query');
         if (newQuery) {
@@ -94,11 +93,12 @@ const HitBrowser = () => {
         });
     }, [setQueryHistory]);
     useEffect(() => {
-        if (location.pathname.startsWith('/views') && !viewsReady) {
-            fetchViews(true);
+        if (!location.pathname.startsWith('/views') || has(views, viewId)) {
+            return;
         }
+        fetchViews([viewId]);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [location.pathname, viewsReady]);
+    }, [location.pathname, viewId]);
     const onClose = useCallback(() => {
         setSelected(null);
     }, [setSelected]);

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

@@ -128,7 +128,7 @@ const HitQuery = ({ searching = false, disabled = false, compact = false, trigge
                 p: 0.5,
                 height: multiline ? `${DEFAULT_MULTILINE_HEIGHT + y}px` : theme.spacing(5)
             }
-        ], onKeyDown: e => e.stopPropagation(), children: [_jsx(TuiIconButton, { disabled: query.includes('\n#') || disabled, sx: { mr: 1, alignSelf: 'start' }, onClick: () => setMultiline(!multiline), color: multiline ? 'primary' : theme.palette.text.primary, transparent: !multiline, size: compact ? 'small' : 'medium', children: _jsx(Height, { sx: { fontSize: '20px' } }) }), _jsx(QueryEditor, { query: preppedQuery, setQuery: setQuery, language: "lucene", height: multiline ? '100%' : '20px', onMount: onMount, editorOptions: options }), fzfSearch && (_jsx(Tooltip, { title: t('route.history'), children: _jsx(History, {}) })), _jsx(TuiIconButton, { disabled: searching || disabled, onClick: search, sx: { ml: 1, alignSelf: 'start', flexShrink: 0 }, size: compact ? 'small' : 'medium', children: _jsx(Tooltip, { title: t('route.search'), children: _jsx(Badge, { invisible: !isDirty, color: "warning", variant: "dot", children: _jsx(Search, { sx: { fontSize: '20px' } }) }) }) }), !loaded && (_jsx(Skeleton, { variant: "rectangular", sx: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, height: "100%" })), multiline && (_jsx(Box, { sx: {
+        ], onKeyDown: e => e.stopPropagation(), children: [_jsx(TuiIconButton, { disabled: query.includes('\n#') || disabled, sx: { mr: 1, alignSelf: 'start' }, onClick: () => setMultiline(!multiline), color: multiline ? 'primary' : theme.palette.text.primary, transparent: !multiline, size: compact ? 'small' : 'medium', children: _jsx(Height, { sx: { fontSize: '20px' } }) }), _jsx(QueryEditor, { query: preppedQuery, setQuery: setQuery, language: "lucene", height: multiline ? `${DEFAULT_MULTILINE_HEIGHT - 30}px` : '20px', onMount: onMount, editorOptions: options }), fzfSearch && (_jsx(Tooltip, { title: t('route.history'), children: _jsx(History, {}) })), _jsx(TuiIconButton, { disabled: searching || disabled, onClick: search, sx: { ml: 1, alignSelf: 'start', flexShrink: 0 }, size: compact ? 'small' : 'medium', children: _jsx(Tooltip, { title: t('route.search'), children: _jsx(Badge, { invisible: !isDirty, color: "warning", variant: "dot", children: _jsx(Search, { sx: { fontSize: '20px' } }) }) }) }), !loaded && (_jsx(Skeleton, { variant: "rectangular", sx: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, height: "100%" })), multiline && (_jsx(Box, { sx: {
                     position: 'absolute',
                     left: 0,
                     right: 0,

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

@@ -100,7 +100,7 @@ const SearchPane = () => {
     const bundleHit = useContextSelector(HitContext, ctx => location.pathname.startsWith('/bundles') ? ctx.hits[routeParams.id] : null);
     const searchPaneWidth = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null)[0];
     const verticalSorters = useMediaQuery('(max-width: 1919px)') || (searchPaneWidth ?? Number.MAX_SAFE_INTEGER) < 900;
-    const selectedView = useContextSelector(ViewContext, ctx => ctx.views?.find(val => val.view_id === viewId));
+    const selectedView = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
     const getSelectedId = useCallback((event) => {
         const target = event.target;
         const selectedElement = target.closest('[id]');

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

@@ -4,6 +4,7 @@ import { Alert, IconButton, Stack, Tooltip, Typography } from '@mui/material';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
+import { has } from 'lodash-es';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -14,8 +15,8 @@ const ViewLink = () => {
     const sort = useContextSelector(ParameterContext, ctx => ctx.sort);
     const span = useContextSelector(ParameterContext, ctx => ctx.span);
     const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
-    const viewsReady = useContextSelector(ViewContext, ctx => ctx.ready);
-    const selectedView = useContextSelector(ViewContext, ctx => ctx.views?.find(val => val.view_id === viewId));
+    const viewsReady = useContextSelector(ViewContext, ctx => has(ctx.views, viewId));
+    const selectedView = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
     const viewUrl = useMemo(() => {
         if (viewId) {
             return `/views/${viewId}/edit`;

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

@@ -16,7 +16,6 @@ import useHitSelection from '@cccsaurora/howler-ui/components/hooks/useHitSelect
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import HitContextMenu from '../HitContextMenu';
@@ -29,8 +28,6 @@ import HitRow from './HitRow';
 const HitGrid = () => {
     const { t } = useTranslation();
     const { getIdFromName } = useContext(AnalyticContext);
-    const routeParams = useParams();
-    const location = useLocation();
     const theme = useTheme();
     const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
     const { onClick } = useHitSelection();
@@ -39,10 +36,11 @@ const HitGrid = () => {
     const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
     const response = useContextSelector(HitSearchContext, ctx => ctx.response);
     const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
+    const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
     const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
-    const viewId = useMemo(() => (location.pathname.startsWith('/views') ? routeParams.id : null), [location.pathname, routeParams.id]);
-    const selectedView = useContextSelector(ViewContext, ctx => ctx.views?.find(val => val.view_id === viewId));
+    const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
+    const selectedView = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
     const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
     const [analyticIds, setAnalyticIds] = useState({});
     const columnModalRef = useRef();
@@ -59,11 +57,11 @@ const HitGrid = () => {
         if (selectedHits.length > 1) {
             return true;
         }
-        if (selectedHits.length === 1 && selectedHits[0]?.howler.id !== routeParams.id) {
+        if (selectedHits.length === 1 && selected && selectedHits[0]?.howler.id !== selected) {
             return true;
         }
         return false;
-    }, [routeParams.id, selectedHits]);
+    }, [selected, selectedHits]);
     useEffect(() => {
         response?.items.forEach(hit => {
             if (!analyticIds[hit.howler.analytic]) {

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

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

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

@@ -10,7 +10,7 @@ import HitSort from './HitSort';
 import SearchSpan from './SearchSpan';
 const QuerySettings = ({ verticalSorters = false, boxSx }) => {
     const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
-    const selectedView = useContextSelector(ViewContext, ctx => ctx.views?.find(val => val.view_id === viewId));
+    const selectedView = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
     return (_jsxs(Box, { sx: boxSx ?? { position: 'relative', maxWidth: '1200px' }, children: [_jsxs(Stack, { direction: verticalSorters ? 'column' : 'row', justifyContent: "space-between", spacing: 1, divider: !verticalSorters && _jsx(Divider, { flexItem: true, orientation: "vertical" }), sx: [
                     viewId &&
                         !selectedView && {

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

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

package/components/routes/home/AddNewCard.js

@@ -16,9 +16,12 @@ const VISUALIZATIONS = ['assessment', 'created', 'escalation', 'status', 'detect
 const AddNewCard = ({ dashboard, addCard }) => {
     const { t } = useTranslation();
     const views = useContextSelector(ViewContext, ctx => ctx.views ?? []);
+    const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
     const [selectedType, setSelectedType] = useState('');
     const [analytics, setAnalytics] = useState([]);
     const [config, _setConfig] = useState({});
+    const [viewOpen, setViewOpen] = useState(false);
+    const [viewLoading, setViewLoading] = useState(false);
     const setConfig = useCallback((key, value) => _setConfig(_config => ({ ..._config, [key]: value })), []);
     const _addCard = useCallback(() => {
         if (!selectedType) {
@@ -43,9 +46,19 @@ const AddNewCard = ({ dashboard, addCard }) => {
             _setConfig({});
         }
     }, [selectedType]);
+    const onViewOpen = useCallback(async () => {
+        setViewOpen(true);
+        setViewLoading(true);
+        try {
+            await fetchViews();
+        }
+        finally {
+            setViewLoading(false);
+        }
+    }, [fetchViews]);
     return (_jsx(Grid, { item: true, xs: 12, md: 6, children: _jsxs(Card, { variant: "outlined", sx: { height: '100%' }, children: [_jsx(CardHeader, { title: t('route.home.add'), subheader: _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('route.home.add.description') }) }), _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.type') }), _jsx(Select, { value: selectedType, onChange: event => setSelectedType(event.target.value), label: t('route.home.add.type'), children: Object.keys(TYPES).map(type => (_jsx(MenuItem, { value: type, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.type.${type}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.type.${type}.description`) })] }) }, type))) })] }), selectedType && _jsx(Divider, { flexItem: true }), selectedType === 'analytic' && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: t('route.home.add.analytic.title') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.analytic.description') }), _jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('analyticId', opt.analytic_id), options: analytics, filterOptions: (options, state) => options.filter(opt => opt.name.toLowerCase().includes(state.inputValue.toLowerCase()) ||
                                             opt.description?.split('\n')[0]?.toLowerCase().includes(state.inputValue.toLowerCase())), renderOption: (props, option) => (_createElement("li", { ...props, key: option.analytic_id },
-                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: option.name }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description?.split('\n')[0] })] }))), getOptionLabel: option => option.name, renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.analytic') }) }), _jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.visualization') }), _jsx(Select, { value: config.type ?? '', onChange: event => setConfig('type', event.target.value), label: t('route.home.add.visualization'), children: VISUALIZATIONS.map(viz => (_jsx(MenuItem, { value: viz, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.visualization.${viz}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.visualization.${viz}.description`) })] }) }, viz))) })] })] })), selectedType === 'view' && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('viewId', opt.view_id), options: views, filterOptions: (options, state) => options.filter(opt => !dashboard?.find(entry => entry.type === 'view' && JSON.parse(entry.config).viewId === opt.view_id) &&
+                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: option.name }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description?.split('\n')[0] })] }))), getOptionLabel: option => option.name, renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.analytic') }) }), _jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.visualization') }), _jsx(Select, { value: config.type ?? '', onChange: event => setConfig('type', event.target.value), label: t('route.home.add.visualization'), children: VISUALIZATIONS.map(viz => (_jsx(MenuItem, { value: viz, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.visualization.${viz}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.visualization.${viz}.description`) })] }) }, viz))) })] })] })), selectedType === 'view' && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('viewId', opt.view_id), onOpen: onViewOpen, onClose: () => setViewOpen(false), open: viewOpen, loading: viewLoading, options: Object.values(views), filterOptions: (options, state) => options.filter(opt => !dashboard?.find(entry => entry.type === 'view' && JSON.parse(entry.config).viewId === opt.view_id) &&
                                             (opt.title.toLowerCase().includes(state.inputValue.toLowerCase()) ||
                                                 opt.query.toLowerCase().includes(state.inputValue.toLowerCase()))), renderOption: (props, option) => (_createElement("li", { ...props, key: option.view_id },
                                             _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(option.title) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.query })] }))), getOptionLabel: option => t(option.title), renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.view') }) }), _jsx(Typography, { variant: "body1", sx: { pt: 1 }, children: t('route.home.add.limit') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.limit.description') }), _jsx(Box, { sx: { px: 0.5 }, children: _jsx(Slider, { value: config.limit ?? 3, valueLabelDisplay: "auto", onChange: (_, value) => setConfig('limit', value), min: 1, max: 10, step: 1, marks: true }) })] })), _jsx(Stack, { direction: "row", justifyContent: "end", children: _jsx(CustomButton, { variant: "outlined", size: "small", color: "primary", startIcon: _jsx(Check, {}), disabled: !selectedType || TYPES[selectedType]?.filter(field => !config[field])?.length > 0, onClick: _addCard, children: t('create') }) })] }) })] }) }));

package/components/routes/home/ViewCard.js

@@ -17,7 +17,11 @@ const ViewCard = ({ viewId, limit }) => {
     const { dispatchApi } = useMyApi();
     const [hits, setHits] = useState([]);
     const [loading, setLoading] = useState(false);
-    const view = useContextSelector(ViewContext, ctx => ctx.views?.find(_view => _view.view_id === viewId));
+    const view = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
+    const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
+    useEffect(() => {
+        fetchViews([viewId]);
+    }, [fetchViews, viewId]);
     useEffect(() => {
         if (!view?.query) {
             return;

package/components/routes/home/index.js

@@ -77,7 +77,7 @@ const Home = () => {
         api.search.hit
             .post({
             query: updateQuery,
-            rows: 5
+            rows: 0
         })
             .then(result => setUpdatedHitTotal(result.total));
     }, [updateQuery]);

package/components/routes/views/ViewComposer.js

@@ -36,7 +36,7 @@ const ViewComposer = () => {
     const navigate = useNavigate();
     const addView = useContextSelector(ViewContext, ctx => ctx.addView);
     const editView = useContextSelector(ViewContext, ctx => ctx.editView);
-    const views = useContextSelector(ViewContext, ctx => ctx.views);
+    const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const loadHits = useContextSelector(HitContext, ctx => ctx.loadHits);
     // view state
@@ -130,29 +130,30 @@ const ViewComposer = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [sort, span]);
     useEffect(() => {
-        if (routeParams.id) {
-            const viewToEdit = views?.find(_view => _view.view_id === routeParams.id);
-            if (!viewToEdit && views?.length > 0) {
+        if (!routeParams.id) {
+            return;
+        }
+        (async () => {
+            const viewToEdit = await getCurrentView();
+            if (!viewToEdit) {
                 setError('route.views.missing');
                 return;
             }
             else {
                 setError(null);
             }
-            if (viewToEdit) {
-                setTitle(viewToEdit.title);
-                setAdvanceOnTriage(viewToEdit.settings?.advance_on_triage ?? false);
-                setQuery(viewToEdit.query);
-                if (viewToEdit.sort) {
-                    setSort(viewToEdit.sort);
-                }
-                if (viewToEdit.span) {
-                    setSpan(viewToEdit.span);
-                }
+            setTitle(viewToEdit.title);
+            setAdvanceOnTriage(viewToEdit.settings?.advance_on_triage ?? false);
+            setQuery(viewToEdit.query);
+            if (viewToEdit.sort) {
+                setSort(viewToEdit.sort);
             }
-        }
+            if (viewToEdit.span) {
+                setSpan(viewToEdit.span);
+            }
+        })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [routeParams.id, views]);
+    }, [routeParams.id, getCurrentView]);
     return (_jsx(FlexPort, { children: _jsx(ErrorBoundary, { children: _jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: _jsxs(VSBox, { top: 0, children: [_jsx(VSBoxHeader, { pb: 1, children: _jsxs(Stack, { spacing: 1, children: [error && (_jsx(Alert, { variant: "outlined", severity: "error", children: t(error) })), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { label: t('route.views.name'), size: "small", value: title, onChange: e => setTitle(e.target.value), fullWidth: true }), _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, size: "small", exclusive: true, value: type, onChange: (__, _type) => {
                                                     if (_type) {
                                                         setType(_type);

package/components/routes/views/Views.js

@@ -1,3 +1,4 @@
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Clear, Edit, SavedSearch, Star, StarBorder } from '@mui/icons-material';
 import { Autocomplete, Card, Checkbox, IconButton, Skeleton, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
@@ -12,6 +13,7 @@ import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemM
 import { ViewTitle } from '@cccsaurora/howler-ui/components/elements/view/ViewTitle';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { isNull, omitBy, size } from 'lodash-es';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
@@ -24,8 +26,8 @@ const ViewsBase = () => {
     const { user } = useAppUser();
     const navigate = useNavigate();
     const { dispatchApi } = useMyApi();
-    const addFavourite = useContextSelector(ViewContext, ctx => ctx.addFavourite);
     const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
+    const addFavourite = useContextSelector(ViewContext, ctx => ctx.addFavourite);
     const removeFavourite = useContextSelector(ViewContext, ctx => ctx.removeFavourite);
     const removeView = useContextSelector(ViewContext, ctx => ctx.removeView);
     const views = useContextSelector(ViewContext, ctx => ctx.views);
@@ -41,6 +43,8 @@ const ViewsBase = () => {
     const [hasError, setHasError] = useState(false);
     const [searching, setSearching] = useState(false);
     const [favouritesOnly, setFavouritesOnly] = useState(false);
+    const [defaultViewOpen, setDefaultViewOpen] = useState(false);
+    const [defaultViewLoading, setDefaultViewLoading] = useState(false);
     const onSearch = useCallback(async () => {
         try {
             setSearching(true);
@@ -52,7 +56,6 @@ const ViewsBase = () => {
                 searchParams.delete('phrase');
             }
             setSearchParams(searchParams, { replace: true });
-            fetchViews(true);
             const searchTerm = phrase ? `*${sanitizeLuceneQuery(phrase)}*` : '*';
             const phraseQuery = FIELDS_TO_SEARCH.map(_field => `${_field}:${searchTerm}`).join(' OR ');
             const typeQuery = `(type:global OR owner:(${user.username} OR none)) AND type:(${types.join(' OR ') || '*'}${types.includes('personal') ? ' OR readonly' : ''})`;
@@ -73,7 +76,6 @@ const ViewsBase = () => {
         phrase,
         setSearchParams,
         searchParams,
-        fetchViews,
         user.username,
         user.favourite_views,
         types,
@@ -105,29 +107,37 @@ const ViewsBase = () => {
     const onDelete = useCallback(async (event, id) => {
         event.preventDefault();
         event.stopPropagation();
-        await dispatchApi(removeView(id));
+        await removeView(id);
         onSearch();
-    }, [dispatchApi, onSearch, removeView]);
+    }, [onSearch, removeView]);
     const onFavourite = useCallback(async (event, id) => {
         event.preventDefault();
         if (user.favourite_views?.includes(id)) {
-            await dispatchApi(removeFavourite(id));
+            await removeFavourite(id);
             if (user.favourite_views?.length < 2) {
                 setFavouritesOnly(false);
             }
         }
         else {
-            await dispatchApi(addFavourite(id));
+            await addFavourite(id);
+        }
+    }, [addFavourite, removeFavourite, user.favourite_views]);
+    const onDefaultViewOpen = useCallback(async () => {
+        setDefaultViewOpen(true);
+        setDefaultViewLoading(true);
+        try {
+            await fetchViews();
         }
-    }, [addFavourite, dispatchApi, removeFavourite, user.favourite_views]);
+        finally {
+            setDefaultViewLoading(false);
+        }
+    }, [fetchViews]);
     useEffect(() => {
-        onSearch();
         if (!searchParams.has('offset')) {
             searchParams.set('offset', '0');
             setSearchParams(searchParams, { replace: true });
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dispatchApi, types]);
+    }, [searchParams, setSearchParams]);
     useEffect(() => {
         if (response?.total <= offset) {
             setOffset(0);
@@ -140,13 +150,14 @@ const ViewsBase = () => {
             onSearch();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [offset, favouritesOnly]);
+    }, [offset, favouritesOnly, types]);
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, searchFilters: _jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, size: "small", value: types, onChange: (__, _types) => {
                     if (_types) {
                         setTypes(_types.length < 2 ? _types : []);
                     }
-                }, children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.views.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.views.manager.global') })] }) }), aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.views.search.prompt') }), afterSearch: views?.length > 0 ? (_jsx(Autocomplete, { options: views, renderOption: (props, o) => (_jsx("li", { ...props, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(o.title) }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: o.query }) })] }) })), renderInput: params => (_jsx(TextField, { ...params, label: t('route.views.manager.default'), sx: { minWidth: '300px' } })), filterOptions: (_views, { inputValue }) => _views.filter(v => t(v.title).toLowerCase().includes(inputValue.toLowerCase()) ||
-                v.query.toLowerCase().includes(inputValue.toLowerCase())), getOptionLabel: (v) => t(v.title), isOptionEqualToValue: (view, value) => view.view_id === value.view_id, value: views?.find(v => v.view_id === defaultView) ?? null, onChange: (_, option) => setDefaultView(option?.view_id) })) : (_jsx(Skeleton, { variant: "rounded", width: "300px", height: "initial" })), belowSearch: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Checkbox, { size: "small", disabled: user.favourite_views?.length < 1, checked: favouritesOnly, onChange: (_, checked) => setFavouritesOnly(checked) }), _jsx(Typography, { variant: "body1", sx: theme => ({ color: theme.palette.text.disabled }), children: t('route.views.manager.favourites') })] }), renderer: ({ item }, classRenderer) => (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1, transitionProperty: 'border-color', '&:hover': { borderColor: 'primary.main' } }, className: classRenderer(), children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { color: 'inherit', textDecoration: 'none' }, component: Link, to: `/views/${item.item.view_id}`, children: [_jsx(ViewTitle, { ...item.item }), _jsx(FlexOne, {}), ((item.item.owner === user.username && item.item.type !== 'readonly') ||
+                }, children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.views.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.views.manager.global') })] }) }), aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.views.search.prompt') }), afterSearch: size(views) > 0 ? (_jsx(Autocomplete, { open: defaultViewOpen, loading: defaultViewLoading, onOpen: onDefaultViewOpen, onClose: () => setDefaultViewOpen(false), options: Object.values(omitBy(views, isNull)), renderOption: ({ key, ...props }, o) => (_createElement("li", { ...props, key: key },
+                _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(o.title) }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: o.query }) })] }))), renderInput: params => (_jsx(TextField, { ...params, label: t('route.views.manager.default'), sx: { minWidth: '300px' } })), filterOptions: (_views, { inputValue }) => _views.filter(v => t(v.title).toLowerCase().includes(inputValue.toLowerCase()) ||
+                v.query.toLowerCase().includes(inputValue.toLowerCase())), getOptionLabel: (v) => t(v.title), isOptionEqualToValue: (view, value) => view.view_id === value.view_id, value: views[defaultView] ?? null, onChange: (_, option) => setDefaultView(option?.view_id) })) : (_jsx(Skeleton, { variant: "rounded", width: "300px", height: "initial" })), belowSearch: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Checkbox, { size: "small", disabled: user.favourite_views?.length < 1, checked: favouritesOnly, onChange: (_, checked) => setFavouritesOnly(checked) }), _jsx(Typography, { variant: "body1", sx: theme => ({ color: theme.palette.text.disabled }), children: t('route.views.manager.favourites') })] }), renderer: ({ item }, classRenderer) => (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1, transitionProperty: 'border-color', '&:hover': { borderColor: 'primary.main' } }, className: classRenderer(), children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { color: 'inherit', textDecoration: 'none' }, component: Link, to: `/views/${item.item.view_id}`, children: [_jsx(ViewTitle, { ...item.item }), _jsx(FlexOne, {}), ((item.item.owner === user.username && item.item.type !== 'readonly') ||
                         (item.item.type === 'global' && user.is_admin)) && (_jsx(Tooltip, { title: t('button.edit'), children: _jsx(IconButton, { component: Link, to: `/views/${item.item.view_id}/edit?query=${item.item.query}`, children: _jsx(Edit, {}) }) })), item.item.owner === user.username && item.item.type !== 'readonly' && (_jsx(Tooltip, { title: t('button.delete'), children: _jsx(IconButton, { onClick: event => onDelete(event, item.item.view_id), children: _jsx(Clear, {}) }) })), item.item.type === 'global' && item.item.owner !== user.username && (_jsx(Tooltip, { title: item.item.owner, children: _jsx("div", { children: _jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important', marginLeft: '8px !important' }, userId: item.item.owner }) }) })), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { onClick: e => onFavourite(e, item.item.view_id), children: user.favourite_views?.includes(item.item.view_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }, item.item.view_id)), response: response, searchPrompt: "route.views.manager.search", onCreate: () => navigate('/views/create'), createPrompt: "route.views.create", createIcon: _jsx(SavedSearch, { sx: { mr: 1 } }) }));
 };
 const Views = () => {

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.13.0-dev.75",
+  "version": "2.13.0-dev.96",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",