@cccsaurora/howler-ui 2.13.0-dev.107 → 2.13.0-dev.125

package/api/hit/index.d.ts

@@ -20,7 +20,7 @@ export type HitActionResponse = {
     success: boolean;
 };
 export declare const uri: (id?: string) => string;
-export declare const get: (id: string) => Promise<Hit>;
+export declare const get: <T extends Hit>(id: string, metadata?: string[]) => Promise<T>;
 interface PostResponse {
     valid: Hit[];
     invalid: {

package/api/hit/index.js

@@ -7,8 +7,12 @@ import * as transition from '@cccsaurora/howler-ui/api/hit/transition';
 export const uri = (id) => {
     return id ? joinAllUri(parentUri(), 'hit', id) : joinUri(parentUri(), 'hit');
 };
-export const get = (id) => {
-    return hget(uri(id));
+export const get = (id, metadata) => {
+    const params = new URLSearchParams();
+    if (metadata) {
+        params.append('metadata', metadata.join(','));
+    }
+    return hget(uri(id), params);
 };
 export const post = (hits) => {
     return hpost(uri(), hits);

package/api/search/index.d.ts

@@ -21,6 +21,7 @@ export type HowlerSearchRequest = {
     fl?: string;
     timeout?: number;
     filters?: string[];
+    metadata?: string[];
 };
 export type HowlerSearchResponse<T> = {
     items: T[];

package/commons/components/utils/hooks/useEnv.d.ts

@@ -1 +1 @@
-export default function useAppEnv(key?: string): any;
+export default function useAppEnv(key?: string): string | NodeJS.ProcessEnv;

package/components/app/App.js

@@ -63,7 +63,6 @@ import AnalyticProvider from './providers/AnalyticProvider';
 import ApiConfigProvider, { ApiConfigContext } from './providers/ApiConfigProvider';
 import AvatarProvider from './providers/AvatarProvider';
 import CustomPluginProvider from './providers/CustomPluginProvider';
-import DossierProvider from './providers/DossierProvider';
 import FavouriteProvider from './providers/FavouritesProvider';
 import FieldProvider from './providers/FieldProvider';
 import HitProvider from './providers/HitProvider';
@@ -72,7 +71,6 @@ import ModalProvider from './providers/ModalProvider';
 import OverviewProvider from './providers/OverviewProvider';
 import ParameterProvider from './providers/ParameterProvider';
 import SocketProvider from './providers/SocketProvider';
-import TemplateProvider from './providers/TemplateProvider';
 import UserListProvider from './providers/UserListProvider';
 import ViewProvider from './providers/ViewProvider';
 loader.config({ monaco });
@@ -140,7 +138,7 @@ const MyAppProvider = ({ children }) => {
     const mySitemap = useMySitemap();
     const myUser = useMyUser();
     const mySearch = useMySearch();
-    return (_jsx(ErrorBoundary, { children: _jsx(AppProvider, { preferences: myPreferences, theme: myTheme, sitemap: mySitemap, user: myUser, search: mySearch, children: _jsx(CustomPluginProvider, { children: _jsx(ErrorBoundary, { children: _jsx(ErrorBoundary, { children: _jsx(DossierProvider, { children: _jsx(ViewProvider, { children: _jsx(AvatarProvider, { children: _jsx(ModalProvider, { children: _jsx(FieldProvider, { children: _jsx(LocalStorageProvider, { children: _jsx(SocketProvider, { children: _jsx(HitProvider, { children: _jsx(TemplateProvider, { children: _jsx(OverviewProvider, { children: _jsx(AnalyticProvider, { children: _jsx(FavouriteProvider, { children: _jsx(UserListProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return (_jsx(ErrorBoundary, { children: _jsx(AppProvider, { preferences: myPreferences, theme: myTheme, sitemap: mySitemap, user: myUser, search: mySearch, children: _jsx(CustomPluginProvider, { children: _jsx(ErrorBoundary, { children: _jsx(ErrorBoundary, { children: _jsx(ViewProvider, { children: _jsx(AvatarProvider, { children: _jsx(ModalProvider, { children: _jsx(FieldProvider, { children: _jsx(LocalStorageProvider, { children: _jsx(SocketProvider, { children: _jsx(HitProvider, { children: _jsx(OverviewProvider, { children: _jsx(AnalyticProvider, { children: _jsx(FavouriteProvider, { children: _jsx(UserListProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 const AppProviderWrapper = () => {
     return (_jsx(I18nextProvider, { i18n: i18n, defaultNS: "translation", children: _jsx(ApiConfigProvider, { children: _jsx(PluginProvider, { pluginStore: howlerPluginStore.pluginStore, children: _jsxs(MyAppProvider, { children: [_jsx(MyApp, {}), _jsx(Modal, {})] }) }) }) }));

package/components/app/hooks/useMatchers.d.ts

@@ -0,0 +1,8 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
+declare const useMatchers: () => {
+    getMatchingDossiers: (hit: WithMetadata<Hit>) => Promise<import("../../../models/entities/generated/Dossier").Dossier[]>;
+    getMatchingOverview: (hit: WithMetadata<Hit>) => Promise<import("../../../models/entities/generated/Overview").Overview>;
+    getMatchingTemplate: (hit: WithMetadata<Hit>) => Promise<import("../../../models/entities/generated/Template").Template>;
+};
+export default useMatchers;

package/components/app/hooks/useMatchers.js

@@ -0,0 +1,46 @@
+import { has } from 'lodash-es';
+import { useCallback } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import { HitContext } from '../providers/HitProvider';
+const useMatchers = () => {
+    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
+    const getMatchingTemplate = useCallback(async (hit) => {
+        if (!hit) {
+            return null;
+        }
+        if (has(hit, '__template')) {
+            return hit.__template;
+        }
+        // This is a fallback in case metadata is not included. In most cases templates are shown, the template metadata
+        // should also exist
+        return (await getHit(hit.howler.id, true)).__template;
+    }, [getHit]);
+    const getMatchingOverview = useCallback(async (hit) => {
+        if (!hit) {
+            return null;
+        }
+        if (has(hit, '__overview')) {
+            return hit.__overview;
+        }
+        // This is a fallback in case metadata is not included. In most cases templates are shown, the template metadata
+        // should also exist
+        return (await getHit(hit.howler.id, true)).__overview;
+    }, [getHit]);
+    const getMatchingDossiers = useCallback(async (hit) => {
+        if (!hit) {
+            return null;
+        }
+        if (has(hit, '__dossiers')) {
+            return hit.__dossiers;
+        }
+        // This is a fallback in case metadata is not included. In most cases templates are shown, the template metadata
+        // should also exist
+        return (await getHit(hit.howler.id, true)).__dossiers;
+    }, [getHit]);
+    return {
+        getMatchingDossiers,
+        getMatchingOverview,
+        getMatchingTemplate
+    };
+};
+export default useMatchers;

package/components/app/hooks/useMatchers.test.d.ts

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

package/components/app/hooks/useMatchers.test.js

@@ -0,0 +1,237 @@
+import { renderHook } from '@testing-library/react';
+import { useContextSelector } from 'use-context-selector';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { HitContext } from '../providers/HitProvider';
+import useMatchers from './useMatchers';
+// Mock the useContextSelector hook
+vi.mock('use-context-selector', () => ({
+    useContextSelector: vi.fn(),
+    createContext: vi.fn()
+}));
+// Mock lodash-es has function
+vi.mock('lodash-es', () => ({
+    has: vi.fn()
+}));
+// Create mock data
+const mockTemplate = {
+    name: 'test-template',
+    template: 'Test template content'
+};
+const mockOverview = {
+    name: 'test-overview',
+    overview: 'Test overview content'
+};
+const mockDossiers = [
+    {
+        name: 'test-dossier',
+        description: 'Test dossier content'
+    }
+];
+const mockHit = {
+    howler: {
+        id: 'test-hit-id',
+        analytic: 'test-analytic',
+        data: {}
+    }
+};
+const mockHitWithMetadata = {
+    ...mockHit,
+    __template: mockTemplate,
+    __overview: mockOverview,
+    __dossiers: mockDossiers
+};
+const mockGetHit = vi.fn();
+describe('useMatchers', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        // Mock useContextSelector to return our mock getHit function
+        useContextSelector.mockImplementation((context, selector) => {
+            if (context === HitContext) {
+                return selector({ getHit: mockGetHit });
+            }
+            return null;
+        });
+    });
+    describe('getMatchingTemplate', () => {
+        it('should return null when hit is null', async () => {
+            const { result } = renderHook(() => useMatchers());
+            const template = await result.current.getMatchingTemplate(null);
+            expect(template).toBeNull();
+        });
+        it('should return null when hit is undefined', async () => {
+            const { result } = renderHook(() => useMatchers());
+            const template = await result.current.getMatchingTemplate(undefined);
+            expect(template).toBeNull();
+        });
+        it('should return template from metadata when it exists', async () => {
+            const { has } = await import('lodash-es');
+            has.mockReturnValue(true);
+            const { result } = renderHook(() => useMatchers());
+            const template = await result.current.getMatchingTemplate(mockHitWithMetadata);
+            expect(template).toBe(mockTemplate);
+            expect(mockGetHit).not.toHaveBeenCalled();
+        });
+        it('should fetch hit with metadata when template is not present', async () => {
+            const { has } = await import('lodash-es');
+            has.mockReturnValue(false);
+            const hitWithFetchedMetadata = { ...mockHit, __template: mockTemplate };
+            mockGetHit.mockResolvedValue(hitWithFetchedMetadata);
+            const { result } = renderHook(() => useMatchers());
+            const template = await result.current.getMatchingTemplate(mockHit);
+            expect(template).toBe(mockTemplate);
+            expect(mockGetHit).toHaveBeenCalledWith('test-hit-id', true);
+        });
+        it('should handle getHit rejection gracefully', async () => {
+            const { has } = await import('lodash-es');
+            has.mockReturnValue(false);
+            mockGetHit.mockRejectedValue(new Error('Failed to fetch hit'));
+            const { result } = renderHook(() => useMatchers());
+            await expect(result.current.getMatchingTemplate(mockHit)).rejects.toThrow('Failed to fetch hit');
+            expect(mockGetHit).toHaveBeenCalledWith('test-hit-id', true);
+        });
+    });
+    describe('getMatchingOverview', () => {
+        it('should return null when hit is null', async () => {
+            const { result } = renderHook(() => useMatchers());
+            const overview = await result.current.getMatchingOverview(null);
+            expect(overview).toBeNull();
+        });
+        it('should return null when hit is undefined', async () => {
+            const { result } = renderHook(() => useMatchers());
+            const overview = await result.current.getMatchingOverview(undefined);
+            expect(overview).toBeNull();
+        });
+        it('should return overview from metadata when it exists', async () => {
+            const { has } = await import('lodash-es');
+            has.mockReturnValue(true);
+            const { result } = renderHook(() => useMatchers());
+            const overview = await result.current.getMatchingOverview(mockHitWithMetadata);
+            expect(overview).toBe(mockOverview);
+            expect(mockGetHit).not.toHaveBeenCalled();
+        });
+        it('should fetch hit with metadata when overview is not present', async () => {
+            const { has } = await import('lodash-es');
+            has.mockReturnValue(false);
+            const hitWithFetchedMetadata = { ...mockHit, __overview: mockOverview };
+            mockGetHit.mockResolvedValue(hitWithFetchedMetadata);
+            const { result } = renderHook(() => useMatchers());
+            const overview = await result.current.getMatchingOverview(mockHit);
+            expect(overview).toBe(mockOverview);
+            expect(mockGetHit).toHaveBeenCalledWith('test-hit-id', true);
+        });
+        it('should handle getHit rejection gracefully', async () => {
+            const { has } = await import('lodash-es');
+            has.mockReturnValue(false);
+            mockGetHit.mockRejectedValue(new Error('Failed to fetch hit'));
+            const { result } = renderHook(() => useMatchers());
+            await expect(result.current.getMatchingOverview(mockHit)).rejects.toThrow('Failed to fetch hit');
+            expect(mockGetHit).toHaveBeenCalledWith('test-hit-id', true);
+        });
+    });
+    describe('getMatchingDossiers', () => {
+        it('should return null when hit is null', async () => {
+            const { result } = renderHook(() => useMatchers());
+            const dossiers = await result.current.getMatchingDossiers(null);
+            expect(dossiers).toBeNull();
+        });
+        it('should return null when hit is undefined', async () => {
+            const { result } = renderHook(() => useMatchers());
+            const dossiers = await result.current.getMatchingDossiers(undefined);
+            expect(dossiers).toBeNull();
+        });
+        it('should return dossiers from metadata when they exist', async () => {
+            const { has } = await import('lodash-es');
+            has.mockReturnValue(true);
+            const { result } = renderHook(() => useMatchers());
+            const dossiers = await result.current.getMatchingDossiers(mockHitWithMetadata);
+            expect(dossiers).toBe(mockDossiers);
+            expect(mockGetHit).not.toHaveBeenCalled();
+        });
+        it('should fetch hit with metadata when dossiers are not present', async () => {
+            const { has } = await import('lodash-es');
+            has.mockReturnValue(false);
+            const hitWithFetchedMetadata = { ...mockHit, __dossiers: mockDossiers };
+            mockGetHit.mockResolvedValue(hitWithFetchedMetadata);
+            const { result } = renderHook(() => useMatchers());
+            const dossiers = await result.current.getMatchingDossiers(mockHit);
+            expect(dossiers).toBe(mockDossiers);
+            expect(mockGetHit).toHaveBeenCalledWith('test-hit-id', true);
+        });
+        it('should handle getHit rejection gracefully', async () => {
+            const { has } = await import('lodash-es');
+            has.mockReturnValue(false);
+            mockGetHit.mockRejectedValue(new Error('Failed to fetch hit'));
+            const { result } = renderHook(() => useMatchers());
+            await expect(result.current.getMatchingDossiers(mockHit)).rejects.toThrow('Failed to fetch hit');
+            expect(mockGetHit).toHaveBeenCalledWith('test-hit-id', true);
+        });
+    });
+    describe('integration tests', () => {
+        it('should correctly handle has function calls for different metadata properties', async () => {
+            const { has } = await import('lodash-es');
+            // Mock has to return true for __template, false for others
+            has.mockImplementation((_obj, prop) => {
+                return prop === '__template';
+            });
+            const hitWithPartialMetadata = {
+                ...mockHit,
+                __template: mockTemplate
+            };
+            mockGetHit.mockResolvedValue({
+                ...mockHit,
+                __overview: mockOverview,
+                __dossiers: mockDossiers
+            });
+            const { result } = renderHook(() => useMatchers());
+            // Should return template from metadata
+            const template = await result.current.getMatchingTemplate(hitWithPartialMetadata);
+            expect(template).toBe(mockTemplate);
+            // Should fetch overview
+            const overview = await result.current.getMatchingOverview(hitWithPartialMetadata);
+            expect(overview).toBe(mockOverview);
+            // Should fetch dossiers
+            const dossiers = await result.current.getMatchingDossiers(hitWithPartialMetadata);
+            expect(dossiers).toBe(mockDossiers);
+            // Verify has was called with correct parameters
+            expect(has).toHaveBeenCalledWith(hitWithPartialMetadata, '__template');
+            expect(has).toHaveBeenCalledWith(hitWithPartialMetadata, '__overview');
+            expect(has).toHaveBeenCalledWith(hitWithPartialMetadata, '__dossiers');
+        });
+        it('should handle empty or undefined metadata gracefully', async () => {
+            const { has } = await import('lodash-es');
+            has.mockReturnValue(false);
+            mockGetHit.mockResolvedValue({
+                ...mockHit,
+                __template: undefined,
+                __overview: null,
+                __dossiers: []
+            });
+            const { result } = renderHook(() => useMatchers());
+            const template = await result.current.getMatchingTemplate(mockHit);
+            const overview = await result.current.getMatchingOverview(mockHit);
+            const dossiers = await result.current.getMatchingDossiers(mockHit);
+            expect(template).toBeUndefined();
+            expect(overview).toBeNull();
+            expect(dossiers).toEqual([]);
+            expect(mockGetHit).toHaveBeenCalledTimes(3);
+        });
+        it('should maintain referential equality of returned functions', () => {
+            const { result, rerender } = renderHook(() => useMatchers());
+            const firstRender = {
+                getMatchingTemplate: result.current.getMatchingTemplate,
+                getMatchingOverview: result.current.getMatchingOverview,
+                getMatchingDossiers: result.current.getMatchingDossiers
+            };
+            rerender();
+            const secondRender = {
+                getMatchingTemplate: result.current.getMatchingTemplate,
+                getMatchingOverview: result.current.getMatchingOverview,
+                getMatchingDossiers: result.current.getMatchingDossiers
+            };
+            // Functions should be the same reference due to useCallback
+            expect(firstRender.getMatchingTemplate).toBe(secondRender.getMatchingTemplate);
+            expect(firstRender.getMatchingOverview).toBe(secondRender.getMatchingOverview);
+            expect(firstRender.getMatchingDossiers).toBe(secondRender.getMatchingDossiers);
+        });
+    });
+});

package/components/app/hooks/useTitle.js

@@ -1,10 +1,11 @@
-import api from '@cccsaurora/howler-ui/api';
 import useMySitemap from '@cccsaurora/howler-ui/components/hooks/useMySitemap';
 import { capitalize } from 'lodash-es';
 import { useCallback, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useParams, useSearchParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
 import { AnalyticContext } from '../providers/AnalyticProvider';
+import { HitContext } from '../providers/HitProvider';
 const useTitle = () => {
     const { t } = useTranslation();
     const location = useLocation();
@@ -12,6 +13,7 @@ const useTitle = () => {
     const searchParams = useSearchParams()[0];
     const sitemap = useMySitemap();
     const { getAnalyticFromId } = useContext(AnalyticContext);
+    const hits = useContextSelector(HitContext, ctx => ctx.hits);
     const setTitle = useCallback((title) => {
         document.querySelector('title').innerHTML = title;
     }, []);
@@ -32,8 +34,7 @@ const useTitle = () => {
             }
         }
         else if (searchType === 'hit' && params.id) {
-            const result = await api.search.hit.post({ query: `howler.id:${params.id}`, rows: 1 });
-            const hit = result.items[0];
+            const hit = hits[params.id];
             let newTitle = `${capitalize(hit.howler.escalation)} - ${hit.howler.analytic}`;
             if (hit.howler.detection) {
                 newTitle += `: ${hit.howler.detection}`;
@@ -59,7 +60,7 @@ const useTitle = () => {
                 setTitle(`Howler - ${t(matchingRoute.title)}`);
             }
         }
-    }, [getAnalyticFromId, location.pathname, params.id, searchParams, setTitle, sitemap.routes, t]);
+    }, [getAnalyticFromId, location.pathname, params.id, searchParams, hits, setTitle, sitemap.routes, t]);
     useEffect(() => {
         runChecks();
     }, [runChecks]);

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

@@ -1,4 +1,5 @@
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
 import type { FC, PropsWithChildren } from 'react';
 interface HitProviderType {
     hits: {
@@ -10,7 +11,7 @@ interface HitProviderType {
     clearSelectedHits: (except?: string) => void;
     loadHits: (hits: Hit[]) => void;
     updateHit: (newHit: Hit) => void;
-    getHit: (id: string, force?: boolean) => Promise<Hit>;
+    getHit: (id: string, force?: boolean) => Promise<WithMetadata<Hit>>;
 }
 export declare const HitContext: import("use-context-selector").Context<HitProviderType>;
 /**

package/components/app/providers/HitProvider.js

@@ -32,7 +32,13 @@ const HitProvider = ({ children }) => {
             // eslint-disable-next-line no-console
             console.debug('Received websocket update for hit', data.hit.howler.id);
             hitRequests.current[data.hit.howler.id] = Promise.resolve(data.hit);
-            setHits(_hits => ({ ..._hits, [data.hit.howler.id]: data.hit }));
+            setHits(_hits => ({
+                ..._hits,
+                [data.hit.howler.id]: {
+                    ..._hits[data.hit.howler.id],
+                    ...data.hit
+                }
+            }));
         }
     }, []);
     useEffect(() => {
@@ -45,7 +51,7 @@ const HitProvider = ({ children }) => {
      */
     const getHit = useCallback(async (id, force = false) => {
         if (!hitRequests.current[id] || force) {
-            hitRequests.current[id] = dispatchApi(api.hit.get(id));
+            hitRequests.current[id] = dispatchApi(api.hit.get(id, ['template', 'dossiers', 'analytic', 'overview']));
             const newHit = await hitRequests.current[id];
             setHits(_hits => ({ ..._hits, [id]: newHit }));
         }

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

@@ -1,6 +1,7 @@
 import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
 import { type Dispatch, type FC, type PropsWithChildren, type SetStateAction } from 'react';
 export interface QueryEntry {
     [query: string]: string;
@@ -10,7 +11,7 @@ interface HitSearchProviderType {
     displayType: 'list' | 'grid';
     searching: boolean;
     error: string | null;
-    response: HowlerSearchResponse<Hit> | null;
+    response: HowlerSearchResponse<WithMetadata<Hit>> | null;
     viewId: string | null;
     bundleId: string | null;
     queryHistory: QueryEntry;

package/components/app/providers/HitSearchProvider.js

@@ -86,7 +86,8 @@ const HitSearchProvider = ({ children }) => {
                     query: fullQuery,
                     sort,
                     filters,
-                    track_total_hits: trackTotalHits
+                    track_total_hits: trackTotalHits,
+                    metadata: ['template', 'overview', 'analytic']
                 }), { showError: false, throwError: true });
                 if (_response.total < offset) {
                     setOffset(0);

package/components/app/providers/SocketProvider.js

@@ -121,7 +121,7 @@ const SocketProvider = ({ children }) => {
         setRetry(false);
         // Here we go!
         setStatus(Status.CONNECTING);
-        const host = window.location.host;
+        const host = window.location.host.includes('localhost') ? 'localhost:5000' : window.location.host;
         const protocol = window.location.protocol.startsWith('http:') ? 'ws' : 'wss';
         const ws = new WebSocket(`${protocol}://${host}/socket/v1/connect`);
         // Add our listeners to the websocket

package/components/elements/display/handlebars/helpers.js

@@ -11,6 +11,7 @@ import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useMemo } from 'react';
 import { usePluginStore } from 'react-pluggable';
 import JSONViewer from '../json/JSONViewer';
+const FETCH_RESULTS = {};
 export const useHelpers = () => {
     const pluginStore = usePluginStore();
     const allHelpers = useMemo(() => [
@@ -55,8 +56,10 @@ export const useHelpers = () => {
             documentation: 'Fetches the url provided and returns the given (flattened) key from the returned JSON object. Note that the result must be JSON!',
             callback: async (url, key) => {
                 try {
-                    const response = await fetch(url);
-                    const json = await response.json();
+                    if (!FETCH_RESULTS[url]) {
+                        FETCH_RESULTS[url] = fetch(url).then(res => res.json());
+                    }
+                    const json = await FETCH_RESULTS[url];
                     return flatten(json)[key];
                 }
                 catch (e) {

package/components/elements/hit/HitCard.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { CardContent, Skeleton } from '@mui/material';
 import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
 import { memo, useEffect } from 'react';
 import { useContextSelector } from 'use-context-selector';
 import HowlerCard from '../display/HowlerCard';
@@ -10,12 +9,8 @@ import HitLabels from './HitLabels';
 import { HitLayout } from './HitLayout';
 import HitOutline from './HitOutline';
 const HitCard = ({ id, layout, readOnly = true }) => {
-    const refresh = useContextSelector(TemplateContext, ctx => ctx.refresh);
     const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
     const hit = useContextSelector(HitContext, ctx => ctx.hits[id]);
-    useEffect(() => {
-        refresh();
-    }, [refresh]);
     useEffect(() => {
         if (!hit) {
             getHit(id);

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

@@ -1,9 +1,9 @@
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
 import { HitLayout } from './HitLayout';
 export declare const DEFAULT_FIELDS: string[];
 declare const _default: import("react").NamedExoticComponent<{
-    hit: Hit;
+    hit: WithMetadata<Hit>;
     layout: HitLayout;
-    type?: "global" | "personal";
 }>;
 export default _default;

package/components/elements/hit/HitOutline.js

@@ -1,30 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Divider, Skeleton, Typography } from '@mui/material';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
-import { createElement, memo, useMemo } from 'react';
+import { Box, Divider, Typography } from '@mui/material';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { createElement, memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useContextSelector } from 'use-context-selector';
 import { HitLayout } from './HitLayout';
 import DefaultOutline from './outlines/DefaultOutline';
 export const DEFAULT_FIELDS = ['howler.hash'];
-const HitOutline = ({ hit, layout, type }) => {
+const HitOutline = ({ hit, layout }) => {
     const { t } = useTranslation();
-    const loaded = useContextSelector(TemplateContext, ctx => ctx.loaded);
-    const getMatchingTemplate = useContextSelector(TemplateContext, ctx => ctx.getMatchingTemplate);
-    const template = useMemo(() => getMatchingTemplate(hit), [getMatchingTemplate, hit]);
+    const { getMatchingTemplate } = useMatchers();
+    const [template, setTemplate] = useState(null);
+    useEffect(() => {
+        getMatchingTemplate(hit).then(setTemplate);
+    }, [getMatchingTemplate, hit]);
     const outline = useMemo(() => {
-        if (template && template.type === type) {
-            return createElement(DefaultOutline, {
-                hit,
-                layout,
-                template,
-                fields: template.keys
-            });
-        }
-        else if (!loaded) {
-            return _jsx(Skeleton, { variant: "rounded", height: "50px" });
-        }
-        else if (template) {
+        if (template) {
             return createElement(DefaultOutline, {
                 hit,
                 layout,
@@ -40,7 +30,7 @@ const HitOutline = ({ hit, layout, type }) => {
                 fields: DEFAULT_FIELDS
             });
         }
-    }, [hit, layout, loaded, template, type]);
+    }, [hit, layout, template]);
     return (_jsxs(Box, { sx: { py: 1, width: '100%', pr: 2 }, children: [layout === HitLayout.COMFY && (_jsx(Typography, { variant: "body1", fontWeight: "bold", sx: { mb: 1 }, children: t('hit.details.title') })), layout !== HitLayout.DENSE && _jsx(Divider, { orientation: "horizontal", sx: { mb: 1 } }), outline] }));
 };
 export default memo(HitOutline);

package/components/elements/hit/HitOverview.js

@@ -1,14 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InsertLink } from '@mui/icons-material';
 import { Box, IconButton, Skeleton } from '@mui/material';
-import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
-import { memo, useContext, useMemo } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import HandlebarsMarkdown from '../display/HandlebarsMarkdown';
 const HitOverview = ({ content, hit }) => {
-    const { getMatchingOverview } = useContext(OverviewContext);
-    const matchingOverview = useMemo(() => (hit ? getMatchingOverview(hit) : null), [getMatchingOverview, hit]);
+    const { getMatchingOverview } = useMatchers();
+    const [matchingOverview, setMatchingOverview] = useState(null);
+    useEffect(() => {
+        getMatchingOverview(hit).then(setMatchingOverview);
+    }, [getMatchingOverview, hit]);
     const link = useMemo(() => matchingOverview
         ? `/overviews/view?analytic=${encodeURIComponent(matchingOverview.analytic)}${matchingOverview.detection && '&detection=' + encodeURIComponent(matchingOverview.detection)}`
         : hit

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

@@ -1,8 +1,9 @@
 import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
 declare const _default: import("react").NamedExoticComponent<{
     query: string;
-    response?: HowlerSearchResponse<Hit>;
+    response?: HowlerSearchResponse<WithMetadata<Hit>>;
     execute?: boolean;
     onStart?: () => void;
     onComplete?: () => void;