@cccsaurora/howler-ui 2.12.1 → 2.13.0-dev.77

package/api/search/facet/hit.d.ts

@@ -1,3 +1,5 @@
 import type { HowlerFacetSearchRequest, HowlerFacetSearchResponse } from '@cccsaurora/howler-ui/api/search/facet';
-export declare const uri: (field: string) => string;
-export declare const post: (field: string, request?: HowlerFacetSearchRequest) => Promise<HowlerFacetSearchResponse>;
+export declare const uri: () => string;
+export declare const post: (request?: HowlerFacetSearchRequest) => Promise<{
+    [index: string]: HowlerFacetSearchResponse;
+}>;

package/api/search/facet/hit.js

@@ -1,8 +1,8 @@
-import { hpost, joinAllUri } from '@cccsaurora/howler-ui/api';
+import { hpost, joinUri } from '@cccsaurora/howler-ui/api';
 import { uri as parentUri } from '@cccsaurora/howler-ui/api/search/facet';
-export const uri = (field) => {
-    return joinAllUri(parentUri(), 'hit', field);
+export const uri = () => {
+    return joinUri(parentUri(), 'hit');
 };
-export const post = (field, request) => {
-    return hpost(uri(field), { ...(request || {}), query: request?.query || 'howler.id:*' });
+export const post = (request) => {
+    return hpost(uri(), { ...(request || {}), query: request?.query || 'howler.id:*' });
 };

package/api/search/facet/index.d.ts

@@ -1,6 +1,7 @@
 import * as hit from '@cccsaurora/howler-ui/api/search/facet/hit';
 export declare const uri: () => string;
 export type HowlerFacetSearchRequest = {
+    fields?: string[];
     query?: string;
     mincount?: number;
     rows?: number;

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/elements/hit/HitSummary.js

@@ -84,10 +84,10 @@ const HitSummary = ({ query, response, onStart, onComplete }) => {
             setAggregateResults({});
             // Sort the fields based on the number of occurrences
             const sortedKeys = Object.keys(_keyCounts).sort((a, b) => (_keyCounts[b]?.count ?? 0) - (_keyCounts[a]?.count ?? 0));
-            setLoading(true);
-            // Facet each field
-            for (const key of sortedKeys) {
-                const result = await dispatchApi(api.search.facet.hit.post(key, {
+            if (sortedKeys.length > 0) {
+                setLoading(true);
+                const result = await dispatchApi(api.search.facet.hit.post({
+                    fields: sortedKeys,
                     query,
                     rows: pageCount,
                     filters
@@ -99,7 +99,7 @@ const HitSummary = ({ query, response, onStart, onComplete }) => {
                 if (result) {
                     setAggregateResults(_results => ({
                         ..._results,
-                        [key]: result
+                        ...result
                     }));
                 }
             }

package/components/elements/hit/aggregate/HitGraph.js

@@ -41,7 +41,6 @@ const HitGraph = ({ query }) => {
     const addHitToSelection = useContextSelector(HitContext, ctx => ctx.addHitToSelection);
     const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
     const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
-    const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
     const error = useContextSelector(HitSearchContext, ctx => ctx.error);
     const chartRef = useRef();
     const [loading, setLoading] = useState(false);
@@ -63,6 +62,9 @@ const HitGraph = ({ query }) => {
             else if (startDate && endDate) {
                 filters.push(`event.created:${convertCustomDateRangeToLucene(startDate, endDate)}`);
             }
+            if (escalationFilter) {
+                filters.push(`howler.escalation:${escalationFilter}`);
+            }
             const total = (await dispatchApi(api.search.count.hit.post({
                 query,
                 filters
@@ -75,13 +77,8 @@ const HitGraph = ({ query }) => {
             else {
                 setDisabled(false);
             }
-            const subQueries = [query || 'howler.id:*'];
-            if (escalationFilter) {
-                subQueries.push(`howler.escalation:${escalationFilter}`);
-            }
-            const graphQuery = subQueries.map(_query => `(${_query})`).join(' AND ');
             const _data = await dispatchApi(api.search.grouped.hit.post(filterField, {
-                query: graphQuery,
+                query: query || 'howler.id:*',
                 fl: 'event.created,howler.assessment,howler.analytic,howler.detection,howler.outline.threat,howler.outline.target,howler.outline.summary,howler.id',
                 // We want a generally random sample across all date ranges, so we use hash.
                 // If we used event.created instead, when 1 million hits/hour are created, you'd only see hits from this past minute
@@ -116,12 +113,12 @@ const HitGraph = ({ query }) => {
         }
     }, [dispatchApi, endDate, escalationFilter, filterField, override, query, span, startDate]);
     useEffect(() => {
-        if ((!query && !viewId) || searching || error) {
+        if ((!query && !viewId) || error) {
             return;
         }
         performQuery();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [query, viewId, searching, error]);
+    }, [query, viewId, error, span]);
     const options = useMemo(() => {
         const parentOptions = scatter('hit.summary.title', 'hit.summary.subtitle');
         return {

package/components/routes/advanced/luceneCompletionProvider.js

@@ -41,10 +41,12 @@ const useLuceneCompletionProvider = () => {
                     };
                 }
                 else {
-                    const options = await api.search.facet.hit.post(key, { query: 'howler.id:*', rows: 250 }).catch(() => ({}));
+                    const options = await api.search.facet.hit
+                        .post({ query: 'howler.id:*', rows: 250, fields: [key] })
+                        .catch(() => ({}));
                     const _position = model.getWordUntilPosition(position);
                     return {
-                        suggestions: Object.keys(options).map(_value => ({
+                        suggestions: Object.keys(options[key] || {}).map(_value => ({
                             label: _value,
                             kind: monaco.languages.CompletionItemKind.Constant,
                             insertText: `"${_value}"`,

package/components/routes/analytics/widgets/Assessment.js

@@ -18,10 +18,11 @@ const Assessment = forwardRef(({ analytic }, ref) => {
         }
         setLoading(true);
         api.search.facet.hit
-            .post('howler.assessment', {
+            .post({
+            fields: ['howler.assessment'],
             query: `howler.analytic:("${analytic.name}")`
         })
-            .then(data => setAssessmentData(data))
+            .then(data => setAssessmentData(data['howler.assessment']))
             .finally(() => setLoading(false));
     }, [analytic]);
     if (!loading && assessmentData.length < 1) {

package/components/routes/analytics/widgets/Escalation.js

@@ -18,10 +18,11 @@ const Escalation = forwardRef(({ analytic, maxWidth = '45%' }, ref) => {
         }
         setLoading(true);
         api.search.facet.hit
-            .post('howler.escalation', {
-            query: `howler.analytic:("${analytic.name}")`
+            .post({
+            query: `howler.analytic:("${analytic.name}")`,
+            fields: ['howler.escalation']
         })
-            .then(data => setEscalationData(data))
+            .then(data => setEscalationData(data['howler.escalation']))
             .finally(() => setLoading(false));
     }, [analytic]);
     return analytic && !loading ? (_jsx("div", { style: { maxWidth }, children: _jsx(Doughnut, { ref: ref, options: doughnut('route.analytics.escalation.title', ''), data: {

package/components/routes/analytics/widgets/Stacked.js

@@ -13,10 +13,11 @@ const Stacked = forwardRef(({ analytic, field, color }, ref) => {
     const fetchData = useCallback(async () => {
         try {
             setLoading(true);
-            const result = await api.search.facet.hit.post(field, {
-                query: `howler.analytic:("${analytic.name}")`
+            const result = await api.search.facet.hit.post({
+                query: `howler.analytic:("${analytic.name}")`,
+                fields: [field]
             });
-            const values = Object.entries(result)
+            const values = Object.entries(result[field])
                 .sort(([__, valA], [___, valB]) => valB - valA)
                 .map(([key]) => key);
             setDatasets(await Promise.all(values.map(async (_value) => {

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/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]) {