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

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/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,37 @@
+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 (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 (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 (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/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;

package/components/elements/hit/HitSummary.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Analytics, InfoOutlined } from '@mui/icons-material';
 import { Alert, AlertTitle, Autocomplete, Box, Button, Chip, CircularProgress, Divider, Fade, Grid, LinearProgress, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
@@ -19,11 +19,11 @@ import PluginChip from '../PluginChip';
 import HitGraph from './aggregate/HitGraph';
 const HitSummary = ({ query, response, onStart, onComplete }) => {
     const { t } = useTranslation();
-    const getMatchingTemplate = useContextSelector(TemplateContext, ctx => ctx.getMatchingTemplate);
     const { dispatchApi } = useMyApi();
     const { hitFields } = useContext(FieldContext);
     const { showErrorMessage } = useMySnackbar();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const { getMatchingTemplate } = useMatchers();
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
     const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
@@ -48,16 +48,17 @@ const HitSummary = ({ query, response, onStart, onComplete }) => {
         }
         try {
             // Get a list of every key in every template of the hits we're searching
-            const _keyCounts = (response?.items ?? [])
-                .flatMap(h => {
-                const matchingTemplate = getMatchingTemplate(h);
+            const rawCounts = await Promise.all((response?.items ?? []).map(async (h) => {
+                const matchingTemplate = await getMatchingTemplate(h);
                 return (matchingTemplate?.keys ?? [])
                     .filter(key => !['howler.id', 'howler.hash'].includes(key))
                     .map(key => ({
                     key,
                     source: `${matchingTemplate.analytic}: ${matchingTemplate.detection ?? t('any')}`
                 }));
-            })
+            }));
+            const _keyCounts = rawCounts
+                .flat()
                 .concat(customKeys.map(key => ({ key, source: 'custom' })))
                 // Take that array and reduce it to unique keys and the number of times we see it,
                 // as well as the templates we sourced this key from

package/components/elements/hit/related/PivotLink.js

@@ -34,9 +34,16 @@ const PivotLink = ({ pivot, hit, compact = false }) => {
     if (href) {
         return (_jsx(RelatedLink, { title: pivot.label[i18n.language], href: href, compact: compact, children: _jsx(Icon, { fontSize: "1.5rem", icon: pivot.icon }) }));
     }
-    const pluginPivot = pluginStore.executeFunction(`pivot.${pivot.format}`, { pivot, hit, compact });
-    if (pluginPivot) {
-        return pluginPivot;
+    try {
+        const pluginPivot = pluginStore.executeFunction(`pivot.${pivot.format}`, { pivot, hit, compact });
+        if (pluginPivot) {
+            return pluginPivot;
+        }
+    }
+    catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn(`Pivot plugin for format ${pivot.format} does not exist, not rendering`);
+        return null;
     }
     return _jsx(Skeleton, { variant: "rounded" });
 };

package/components/routes/analytics/AnalyticTemplates.js

@@ -1,24 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Article } from '@mui/icons-material';
 import { Box, Fab, Skeleton, Stack, Typography, useMediaQuery } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
 import 'chartjs-adapter-moment';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { useContextSelector } from 'use-context-selector';
 import TemplateCard from '../templates/TemplateCard';
 const AnalyticTemplates = ({ analytic }) => {
     const { t } = useTranslation();
     const isNarrow = useMediaQuery('(max-width: 1800px)');
-    const getTemplates = useContextSelector(TemplateContext, ctx => ctx.getTemplates);
-    const templates = useContextSelector(TemplateContext, ctx => ctx.templates.filter(_template => _template.analytic === analytic?.name));
+    const { dispatchApi } = useMyApi();
+    const [templates, setTemplates] = useState([]);
     const [loading, setLoading] = useState(false);
     useEffect(() => {
         setLoading(true);
-        getTemplates().finally(() => setLoading(false));
-    }, [getTemplates]);
+        dispatchApi(api.template.get())
+            .then(_templates => _templates.filter(_template => _template.analytic === analytic?.name))
+            .then(setTemplates)
+            .finally(() => setLoading(false));
+    }, [analytic?.name, dispatchApi]);
     if (!analytic) {
         return _jsx(Skeleton, { variant: "rounded", width: "100%", sx: { minHeight: '300px', mt: 2 } });
     }

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

@@ -3,10 +3,9 @@ import { Clear, Code, Comment, DataObject, History, LinkSharp, OpenInNew, QueryS
 import { Badge, Box, Divider, Skeleton, Stack, Tab, Tabs, Tooltip, useTheme } from '@mui/material';
 import TuiIconButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomIconButton';
 import { Icon } from '@iconify/react/dist/iconify.js';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
-import { DossierContext } from '@cccsaurora/howler-ui/components/app/providers/DossierProvider';
 import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
@@ -48,13 +47,13 @@ const InformationPane = ({ onClose }) => {
     const location = useLocation();
     const { emit, isOpen } = useContext(SocketContext);
     const { getAnalyticFromName } = useContext(AnalyticContext);
-    const { getMatchingOverview, refresh } = useContext(OverviewContext);
+    const { getMatchingOverview, getMatchingDossiers } = useMatchers();
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const pluginStore = usePluginStore();
-    const getMatchingDossiers = useContextSelector(DossierContext, ctx => ctx.getMatchingDossiers);
     const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
     const [userIds, setUserIds] = useState(new Set());
     const [analytic, setAnalytic] = useState();
+    const [overview, setOverview] = useState();
     const [tab, setTab] = useState('overview');
     const [loading, setLoading] = useState(false);
     const [dossiers, setDossiers] = useState([]);
@@ -67,29 +66,22 @@ const InformationPane = ({ onClose }) => {
         if (!selected) {
             return;
         }
-        (async () => {
-            if (selected && !hit) {
-                setLoading(true);
-                try {
-                    await getHit(selected, true);
-                }
-                finally {
-                    setLoading(false);
-                    return;
-                }
-            }
-            else if (!hit?.howler.data) {
-                getHit(selected, true);
-            }
-            setUserIds(getUserList(hit));
-            setAnalytic(await getAnalyticFromName(hit.howler.analytic));
-            if (tab === 'hit_aggregate' && !hit.howler.is_bundle) {
-                setTab('overview');
-            }
-        })();
+        if (!hit?.howler.data) {
+            setLoading(true);
+            getHit(selected, true).finally(() => setLoading(false));
+            return;
+        }
+        setUserIds(getUserList(hit));
+        getAnalyticFromName(hit.howler.analytic).then(setAnalytic);
+        getMatchingOverview(hit).then(setOverview);
+        getMatchingDossiers(hit).then(setDossiers);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getAnalyticFromName, getHit, selected, tab]);
-    const matchingOverview = useMemo(() => getMatchingOverview(hit), [getMatchingOverview, hit]);
+    }, [getAnalyticFromName, getHit, selected]);
+    useEffect(() => {
+        if (tab === 'hit_aggregate' && !hit?.howler.is_bundle) {
+            setTab('overview');
+        }
+    }, [hit?.howler.is_bundle, tab]);
     useEffect(() => {
         if (selected && isOpen()) {
             emit({
@@ -105,17 +97,14 @@ const InformationPane = ({ onClose }) => {
         }
     }, [emit, selected, isOpen]);
     useEffect(() => {
-        refresh();
-    }, [refresh]);
-    useEffect(() => {
-        if (matchingOverview && tab === 'details') {
+        if (overview && tab === 'details') {
             setTab('overview');
         }
-        else if (!matchingOverview && tab === 'overview') {
+        else if (!overview && tab === 'overview') {
             setTab('details');
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [matchingOverview]);
+    }, [overview]);
     /**
      * What to show as the header? If loading a skeleton, then it depends on bundle or not. Bundles don't
      * show anything while normal hits do
@@ -151,12 +140,6 @@ const InformationPane = ({ onClose }) => {
             ])))
         }[tab]?.();
     }, [dossiers, hit, loading, tab, users]);
-    useEffect(() => {
-        if (!hit) {
-            return;
-        }
-        getMatchingDossiers(hit.howler.id).then(setDossiers);
-    }, [getMatchingDossiers, hit]);
     return (_jsxs(VSBox, { top: 10, sx: { height: '100%', flex: 1 }, children: [_jsxs(Stack, { direction: "column", flex: 1, sx: { overflowY: 'auto', flexGrow: 1 }, position: "relative", spacing: 1, ml: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, flexShrink: 0, pr: 2, sx: [hit?.howler?.is_bundle && { position: 'absolute', top: 1, right: 0, zIndex: 1100 }], children: [_jsx(FlexOne, {}), onClose && !location.pathname.startsWith('/bundles') && (_jsx(TuiIconButton, { size: "small", onClick: onClose, tooltip: t('hit.panel.details.exit'), children: _jsx(Clear, {}) })), _jsx(SocketBadge, { size: "small" }), analytic && (_jsx(TuiIconButton, { size: "small", tooltip: t('hit.panel.analytic.open'), disabled: !analytic || loading, route: `/analytics/${analytic.analytic_id}`, children: _jsx(QueryStats, {}) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles, disabled: loading }), !!hit && !hit.howler.is_bundle && (_jsx(TuiIconButton, { tooltip: t('hit.panel.open'), href: `/hits/${selected}`, disabled: !hit || loading, size: "small", target: "_blank", children: _jsx(OpenInNew, {}) }))] }), _jsx(Box, { pr: 2, children: header }), !!hit &&
                         !hit.howler.is_bundle &&
                         (!loading ? (_jsxs(_Fragment, { children: [_jsx(HitOutline, { hit: hit, layout: HitLayout.DENSE }), _jsx(HitLabels, { hit: hit })] })) : (_jsx(Skeleton, { height: 124 }))), (hit?.howler?.links?.length > 0 ||
@@ -166,7 +149,7 @@ const InformationPane = ({ onClose }) => {
                                     .slice(0, 3)
                                     .map(l => _jsx(RelatedLink, { compact: true, ...l }, l.href)), dossiers.flatMap(_dossier => (_dossier.pivots ?? []).map((_pivot, index) => (
                             // eslint-disable-next-line react/no-array-index-key
-                            _jsx(PivotLink, { pivot: _pivot, hit: hit, compact: true }, _dossier.dossier_id + index))))] })), _jsx(VSBoxHeader, { ml: -1, mr: -1, pb: 1, sx: { top: '0px' }, children: _jsxs(Tabs, { value: tab === 'overview' && !matchingOverview ? 'details' : tab, sx: {
+                            _jsx(PivotLink, { pivot: _pivot, hit: hit, compact: true }, _dossier.dossier_id + index))))] })), _jsx(VSBoxHeader, { ml: -1, mr: -1, pb: 1, sx: { top: '0px' }, children: _jsxs(Tabs, { value: tab === 'overview' && !overview ? 'details' : tab, sx: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 pr: 2,
@@ -195,7 +178,7 @@ const InformationPane = ({ onClose }) => {
                                                     right: theme.spacing(-0.5)
                                                 },
                                                 '& > svg': { zIndex: 2 }
-                                            }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), matchingOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
+                                            }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), overview && _jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') }), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
                                 // eslint-disable-next-line react/no-array-index-key
                                 , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => _dossier.leads?.map((_lead, leadIndex) => (_jsx(Tab
                                 // eslint-disable-next-line react/no-array-index-key

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

@@ -7,7 +7,6 @@ import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCente
 import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexPort';
@@ -82,7 +81,6 @@ const SearchPane = () => {
     const location = useLocation();
     const navigate = useNavigate();
     const routeParams = useParams();
-    const refresh = useContextSelector(TemplateContext, ctx => ctx.refresh);
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
@@ -109,10 +107,6 @@ const SearchPane = () => {
         }
         return selectedElement.id;
     }, []);
-    // Load the index field for a hit in order to provide autocomplete suggestions.
-    useEffect(() => {
-        refresh();
-    }, [refresh]);
     useEffect(() => {
         if (location.pathname.startsWith('/bundles')) {
             getHit(routeParams.id);

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

@@ -1,21 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Add, Check } from '@mui/icons-material';
 import { Autocomplete, Chip, Divider, Grid, IconButton, Popover, Stack, TextField } from '@mui/material';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
-import { sortBy, uniq } from 'lodash-es';
-import { memo, useContext, useMemo, useState } from 'react';
+import { has, sortBy, uniq } from 'lodash-es';
+import { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 const AddColumnModal = ({ open, onClose, anchorEl, addColumn, columns }) => {
     const { t } = useTranslation();
     const { hitFields } = useContext(FieldContext);
     const response = useContextSelector(HitSearchContext, ctx => ctx.response);
-    const getMatchingTemplate = useContextSelector(TemplateContext, ctx => ctx.getMatchingTemplate);
+    const { getMatchingTemplate } = useMatchers();
     const [columnToAdd, setColumnToAdd] = useState(null);
     const options = useMemo(() => hitFields.map(field => field.key), [hitFields]);
-    const suggestions = useMemo(() => uniq((response?.items ?? []).flatMap(_hit => getMatchingTemplate(_hit)?.keys ?? [])), [getMatchingTemplate, response?.items]);
+    const [suggestions, setSuggestions] = useState([]);
+    useEffect(() => {
+        (async () => {
+            setSuggestions(uniq((await Promise.all((response?.items ?? []).map(async (_hit) => (has(_hit, '__template') ? _hit.__template?.keys : (await getMatchingTemplate(_hit))?.keys) ?? []))).flat()));
+        })();
+    }, [getMatchingTemplate, response?.items]);
     return (_jsx(Popover, { open: open, onClose: onClose, anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsxs(Stack, { spacing: 1, p: 1, width: "500px", children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Autocomplete, { sx: { flex: 1 }, size: "small", options: options, value: columnToAdd, renderInput: params => _jsx(TextField, { fullWidth: true, placeholder: t('hit.fields'), ...params }), onChange: (_ev, value) => setColumnToAdd(value) }), _jsx(IconButton, { disabled: !columnToAdd, onClick: () => {
                                 addColumn(columnToAdd);
                                 setColumnToAdd(null);

package/components/routes/hits/view/HitViewer.js

@@ -3,11 +3,9 @@ import { Icon } from '@iconify/react/dist/iconify.js';
 import { Code, Comment, DataObject, History, LinkSharp, QueryStats, ViewAgenda } from '@mui/icons-material';
 import { Badge, Box, CardContent, Collapse, IconButton, Skeleton, Stack, Tab, Tabs, Tooltip, useMediaQuery, useTheme } from '@mui/material';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
-import { DossierContext } from '@cccsaurora/howler-ui/components/app/providers/DossierProvider';
 import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
 import BundleButton from '@cccsaurora/howler-ui/components/elements/display/icons/BundleButton';
@@ -49,10 +47,8 @@ const HitViewer = () => {
     const theme = useTheme();
     const isUnderLg = useMediaQuery(theme.breakpoints.down('lg'));
     const [orientation, setOrientation] = useMyLocalStorageItem(StorageKey.VIEWER_ORIENTATION, Orientation.VERTICAL);
-    const refreshTemplates = useContextSelector(TemplateContext, ctx => ctx.refresh);
     const { getAnalyticFromName } = useContext(AnalyticContext);
-    const { getMatchingOverview, refresh: refreshOverviews } = useContext(OverviewContext);
-    const getMatchingDossiers = useContextSelector(DossierContext, ctx => ctx.getMatchingDossiers);
+    const { getMatchingOverview, getMatchingDossiers } = useMatchers();
     const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
     const hit = useContextSelector(HitContext, ctx => ctx.hits[params.id]);
     const [userIds, setUserIds] = useState(new Set());
@@ -60,22 +56,22 @@ const HitViewer = () => {
     const [tab, setTab] = useState('details');
     const [analytic, setAnalytic] = useState();
     const [dossiers, setDossiers] = useState([]);
+    const [hasOverview, setHasOverview] = useState(false);
     const fetchData = useCallback(async () => {
         try {
-            let existingHit = hit;
-            if (!existingHit) {
-                existingHit = await getHit(params.id, true);
+            if (!hit) {
+                await getHit(params.id, true);
+                return;
             }
-            setUserIds(getUserList(existingHit));
-            setAnalytic(await getAnalyticFromName(existingHit.howler.analytic));
+            setUserIds(getUserList(hit));
+            setAnalytic(await getAnalyticFromName(hit.howler.analytic));
         }
         catch (err) {
             if (err.cause?.api_status_code === 404) {
                 navigate('/404');
             }
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getAnalyticFromName, getHit, params.id, navigate]);
+    }, [hit, getAnalyticFromName, getHit, params.id, navigate]);
     useEffect(() => {
         if (isUnderLg) {
             setOrientation(Orientation.HORIZONTAL);
@@ -83,22 +79,20 @@ const HitViewer = () => {
     }, [isUnderLg, setOrientation]);
     useEffect(() => {
         fetchData();
-    }, [params.id, fetchData]);
+    }, [params.id, fetchData, hit]);
     const onOrientationChange = useCallback(() => setOrientation(orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL), [orientation, setOrientation]);
-    const matchingOverview = useMemo(() => getMatchingOverview(hit), [getMatchingOverview, hit]);
     useEffect(() => {
-        refreshTemplates();
-        refreshOverviews();
-    }, [refreshOverviews, refreshTemplates]);
+        getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
+    }, [getMatchingOverview, hit]);
     useEffect(() => {
-        if (matchingOverview && tab === 'details') {
+        if (hasOverview && tab === 'details') {
             setTab('overview');
         }
-        else if (!matchingOverview && tab === 'overview') {
+        else if (!hasOverview && tab === 'overview') {
             setTab('details');
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [matchingOverview]);
+    }, [hasOverview]);
     const tabContent = useMemo(() => {
         if (!tab || !hit) {
             return;
@@ -122,7 +116,7 @@ const HitViewer = () => {
         if (!hit) {
             return;
         }
-        getMatchingDossiers(hit.howler.id).then(setDossiers);
+        getMatchingDossiers(hit).then(setDossiers);
     }, [getMatchingDossiers, hit]);
     if (!hit) {
         return (_jsx(PageCenter, { children: _jsx(Skeleton, { variant: "rounded", height: "520px" }) }));
@@ -150,7 +144,7 @@ const HitViewer = () => {
                                 position: 'absolute',
                                 top: theme.spacing(2),
                                 right: theme.spacing(-6)
-                            }, children: [_jsx(Tooltip, { title: t('page.hits.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('hit.panel.analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles })] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !matchingOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), matchingOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
+                            }, children: [_jsx(Tooltip, { title: t('page.hits.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('hit.panel.analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles })] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
                             // eslint-disable-next-line react/no-array-index-key
                             , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => _dossier.leads?.map((_lead, leadIndex) => (_jsx(Tab
                             // eslint-disable-next-line react/no-array-index-key

package/components/routes/templates/TemplateViewer.js

@@ -5,22 +5,17 @@ import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCente
 import TemplateEditor from '@cccsaurora/howler-ui/components/routes/templates/TemplateEditor';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Check, Delete, Remove, SsidChart } from '@mui/icons-material';
+import { Check, Delete, SsidChart } from '@mui/icons-material';
 import AppInfoPanel from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
-import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import HitOutline, { DEFAULT_FIELDS } from '@cccsaurora/howler-ui/components/elements/hit/HitOutline';
+import { DEFAULT_FIELDS } from '@cccsaurora/howler-ui/components/elements/hit/HitOutline';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import isEqual from 'lodash-es/isEqual';
 import { useSearchParams } from 'react-router-dom';
-import { useContextSelector } from 'use-context-selector';
 import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
-const CUSTOM_OUTLINES = ['cmt.aws.sigma.rules', 'assemblyline', '6tailphish'];
 const TemplateViewer = () => {
     const { t } = useTranslation();
     const [params, setParams] = useSearchParams();
-    const getTemplates = useContextSelector(TemplateContext, ctx => ctx.getTemplates);
     const { dispatchApi } = useMyApi();
     const [templateList, setTemplateList] = useState([]);
     const [selectedTemplate, setSelectedTemplate] = useState(null);
@@ -47,32 +42,33 @@ const TemplateViewer = () => {
             }
             setAnalytics(_analytics);
         });
-        getTemplates(true).then(setTemplateList);
+        dispatchApi(api.template.get()).then(setTemplateList);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [analytic, dispatchApi]);
     useEffect(() => {
-        if (analytic) {
-            setLoading(true);
-            dispatchApi(api.search.grouped.hit.post('howler.detection', {
-                limit: 0,
-                query: `howler.analytic:"${sanitizeLuceneQuery(analytic)}"`
-            }), {
-                logError: false,
-                showError: true,
-                throwError: true
-            })
-                .finally(() => setLoading(false))
-                .then(result => result.items.map(i => i.value))
-                .then(_detections => {
-                if (_detections.length < 1 || (type === 'global' && CUSTOM_OUTLINES.includes(analytic.toLowerCase()))) {
-                    setDetection('ANY');
-                }
-                if (detection && !_detections.includes(detection)) {
-                    setDetection('ANY');
-                }
-                setDetections(_detections);
-            });
+        if (!analytic) {
+            return;
         }
+        setLoading(true);
+        dispatchApi(api.search.grouped.hit.post('howler.detection', {
+            limit: 0,
+            query: `howler.analytic:"${sanitizeLuceneQuery(analytic)}"`
+        }), {
+            logError: false,
+            showError: true,
+            throwError: true
+        })
+            .finally(() => setLoading(false))
+            .then(result => result.items.map(i => i.value))
+            .then(_detections => {
+            if (_detections.length < 1) {
+                setDetection('ANY');
+            }
+            if (detection && !_detections.includes(detection)) {
+                setDetection('ANY');
+            }
+            setDetections(_detections);
+        });
     }, [analytic, detection, dispatchApi, params, setParams, type]);
     useEffect(() => {
         if (analytic && detection) {
@@ -149,17 +145,12 @@ const TemplateViewer = () => {
             }
         }
     }, [analytic, detection, dispatchApi, displayFields, selectedTemplate, templateList, type]);
-    const isCustomOutline = useMemo(() => CUSTOM_OUTLINES.includes(analytic.toLowerCase()), [analytic]);
     const analyticOrDetectionMissing = useMemo(() => !analytic || !detection, [analytic, detection]);
     const noFieldChange = useMemo(() => displayFields.length < 1 || isEqual(selectedTemplate?.keys ?? DEFAULT_FIELDS, displayFields), [displayFields, selectedTemplate?.keys]);
-    return (_jsxs(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: [_jsx(LinearProgress, { sx: { mb: 1, opacity: +loading } }), _jsxs(Stack, { direction: "column", spacing: 2, divider: _jsx(Divider, { orientation: "horizontal", flexItem: true }), height: "100%", children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(FormControl, { sx: { flex: 1, maxWidth: '450px' }, children: _jsx(Autocomplete, { id: "analytic", options: analytics.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())), getOptionLabel: option => option.name, value: analytics.find(a => a.name === analytic) || null, onChange: (__, newValue) => setAnalytic(newValue ? newValue.name : ''), renderInput: autocompleteAnalyticParams => (_jsx(TextField, { ...autocompleteAnalyticParams, label: t('route.templates.analytic'), size: "small" })) }) }), !(detections?.length < 2 && detections[0]?.toLowerCase() === 'rule') ? (_jsx(FormControl, { sx: { flex: 1, maxWidth: '300px' }, disabled: !analytic || (isCustomOutline && type === 'global'), children: _jsx(Autocomplete, { id: "detection", options: ['ANY', ...detections.sort()], getOptionLabel: option => option, value: isCustomOutline && type === 'global' ? 'any' : (detection ?? ''), onChange: (__, newValue) => setDetection(newValue), renderInput: autocompleteDetectionParams => (_jsx(TextField, { ...autocompleteDetectionParams, label: t('route.templates.detection'), size: "small" })) }) })) : (_jsx(Tooltip, { title: t('route.templates.rule.explanation'), children: _jsx(SsidChart, { color: "info", sx: { alignSelf: 'center' } }) })), _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, size: "small", exclusive: true, value: type, disabled: analyticOrDetectionMissing, onChange: (__, _type) => {
+    return (_jsxs(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: [_jsx(LinearProgress, { sx: { mb: 1, opacity: +loading } }), _jsxs(Stack, { direction: "column", spacing: 2, divider: _jsx(Divider, { orientation: "horizontal", flexItem: true }), height: "100%", children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(FormControl, { sx: { flex: 1, maxWidth: '450px' }, children: _jsx(Autocomplete, { id: "analytic", options: analytics.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())), getOptionLabel: option => option.name, value: analytics.find(a => a.name === analytic) || null, onChange: (__, newValue) => setAnalytic(newValue ? newValue.name : ''), renderInput: autocompleteAnalyticParams => (_jsx(TextField, { ...autocompleteAnalyticParams, label: t('route.templates.analytic'), size: "small" })) }) }), !(detections?.length < 2 && detections[0]?.toLowerCase() === 'rule') ? (_jsx(FormControl, { sx: { flex: 1, maxWidth: '300px' }, disabled: !analytic, children: _jsx(Autocomplete, { id: "detection", options: ['ANY', ...detections.sort()], getOptionLabel: option => option, value: detection ?? '', onChange: (__, newValue) => setDetection(newValue), renderInput: autocompleteDetectionParams => (_jsx(TextField, { ...autocompleteDetectionParams, label: t('route.templates.detection'), size: "small" })) }) })) : (_jsx(Tooltip, { title: t('route.templates.rule.explanation'), children: _jsx(SsidChart, { color: "info", sx: { alignSelf: 'center' } }) })), _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, size: "small", exclusive: true, value: type, disabled: analyticOrDetectionMissing, onChange: (__, _type) => {
                                     if (_type) {
                                         setType(_type);
                                     }
-                                }, children: [_jsx(ToggleButton, { sx: { flex: 1 }, value: "personal", "aria-label": "personal", children: t('route.templates.personal') }), _jsx(ToggleButton, { sx: { flex: 1 }, value: "global", "aria-label": "global", children: t('route.templates.global') })] }), selectedTemplate && (_jsx(Button, { variant: "outlined", startIcon: _jsx(Delete, {}), onClick: onDelete, children: t('button.delete') })), _jsx(Button, { variant: "outlined", disabled: analyticOrDetectionMissing || (isCustomOutline && type === 'global') || noFieldChange, startIcon: templateLoading ? (_jsx(CircularProgress, { size: 16 })) : isCustomOutline && type === 'global' ? (_jsx(Remove, {})) : (_jsx(Check, {})), onClick: onSave, children: t(isCustomOutline && type === 'global'
-                                    ? 'button.readonly'
-                                    : !analyticOrDetectionMissing && !noFieldChange
-                                        ? 'button.save'
-                                        : 'button.saved') })] }), isCustomOutline && type === 'global' ? (_jsx(HitOutline, { hit: exampleHit, layout: HitLayout.COMFY, type: "global" })) : analyticOrDetectionMissing ? (_jsx(AppInfoPanel, { i18nKey: "route.templates.select", sx: { width: '100%', alignSelf: 'start' } })) : (_jsx(TemplateEditor, { hit: exampleHit, fields: displayFields, setFields: setDisplayFields, onAdd: field => setDisplayFields([...displayFields, field]), onRemove: field => setDisplayFields(displayFields.filter(f => f !== field)) }))] })] }));
+                                }, children: [_jsx(ToggleButton, { sx: { flex: 1 }, value: "personal", "aria-label": "personal", children: t('route.templates.personal') }), _jsx(ToggleButton, { sx: { flex: 1 }, value: "global", "aria-label": "global", children: t('route.templates.global') })] }), selectedTemplate && (_jsx(Button, { variant: "outlined", startIcon: _jsx(Delete, {}), onClick: onDelete, children: t('button.delete') })), _jsx(Button, { variant: "outlined", disabled: analyticOrDetectionMissing || noFieldChange, startIcon: templateLoading ? _jsx(CircularProgress, { size: 16 }) : _jsx(Check, {}), onClick: onSave, children: t(!analyticOrDetectionMissing && !noFieldChange ? 'button.save' : 'button.saved') })] }), analyticOrDetectionMissing ? (_jsx(AppInfoPanel, { i18nKey: "route.templates.select", sx: { width: '100%', alignSelf: 'start' } })) : (_jsx(TemplateEditor, { hit: exampleHit, fields: displayFields, setFields: setDisplayFields, onAdd: field => setDisplayFields([...displayFields, field]), onRemove: field => setDisplayFields(displayFields.filter(f => f !== field)) }))] })] }));
 };
 export default TemplateViewer;

package/components/routes/templates/Templates.js

@@ -1,18 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Article, KeyboardArrowDown } from '@mui/icons-material';
-import { Box, Card, Collapse, IconButton, Stack, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
+import { Article } from '@mui/icons-material';
+import { Stack, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
 import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import TemplateCard from './TemplateCard';
 const TemplatesBase = () => {
@@ -22,11 +20,9 @@ const TemplatesBase = () => {
     const { dispatchApi } = useMyApi();
     const [searchParams, setSearchParams] = useSearchParams();
     const { load } = useContext(TuiListMethodContext);
-    const templates = useContextSelector(TemplateContext, ctx => ctx.templates);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const [phrase, setPhrase] = useState('');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
-    const [showBuiltins, setShowBuiltins] = useState(true);
     const [response, setResponse] = useState(null);
     const [types, setTypes] = useState([]);
     const [hasError, setHasError] = useState(false);
@@ -100,15 +96,12 @@ const TemplatesBase = () => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [offset]);
-    const builtInTemplates = useMemo(() => templates.filter(template => template.type === 'readonly'), [templates]);
     const renderer = useCallback((item, className) => _jsx(TemplateCard, { template: item, className: className }), []);
     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', alignSelf: 'start' }, size: "small", value: types, onChange: (__, _types) => {
                     if (_types) {
                         setTypes(_types.length < 2 ? _types : []);
                     }
-                }, children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.templates.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.templates.manager.global') })] }) }), aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.templates.search.prompt') }), belowSearch: types.length !== 1 &&
-            offset < 1 &&
-            builtInTemplates.length > 0 && (_jsx(Card, { sx: { p: 1, mb: 1 }, children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { children: t('route.templates.builtin.show') }), _jsx(Tooltip, { title: t(`route.templates.builtin.${showBuiltins ? 'hide' : 'show'}`), children: _jsx(IconButton, { size: "small", onClick: () => setShowBuiltins(!showBuiltins), children: _jsx(KeyboardArrowDown, { fontSize: "small", sx: { transition: 'rotate 250ms', rotate: showBuiltins ? '180deg' : '0deg' } }) }) })] }), _jsxs(Collapse, { in: showBuiltins, children: [_jsx(Box, { sx: { mt: 1 } }), builtInTemplates.map(template => renderer(template))] })] }) })), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/templates/view?type=${item.item.type}&analytic=${item.item.analytic}${item.item.detection ? '&detection=' + item.item.detection : ''}`), onCreate: () => navigate('/templates/view'), createPrompt: "route.templates.create", searchPrompt: "route.templates.manager.search", createIcon: _jsx(Article, { sx: { mr: 1 } }) }));
+                }, children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.templates.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.templates.manager.global') })] }) }), aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.templates.search.prompt') }), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/templates/view?type=${item.item.type}&analytic=${item.item.analytic}${item.item.detection ? '&detection=' + item.item.detection : ''}`), onCreate: () => navigate('/templates/view'), createPrompt: "route.templates.create", searchPrompt: "route.templates.manager.search", createIcon: _jsx(Article, { sx: { mr: 1 } }) }));
 };
 const Templates = () => {
     return (_jsx(TuiListProvider, { children: _jsx(TemplatesBase, {}) }));

package/models/WithMetadata.d.ts

@@ -0,0 +1,8 @@
+import type { Dossier } from './entities/generated/Dossier';
+import type { Overview } from './entities/generated/Overview';
+import type { Template } from './entities/generated/Template';
+export type WithMetadata<T> = T & {
+    __template?: Template;
+    __overview?: Overview;
+    __dossiers?: Dossier[];
+};

package/models/WithMetadata.js

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

package/package.json

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

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

@@ -1,16 +0,0 @@
-import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
-import { type FC, type PropsWithChildren } from 'react';
-export interface DossierContextType {
-    ready: boolean;
-    dossiers: Dossier[];
-    fetchDossiers: (force?: boolean) => Promise<void>;
-    addDossier: (v: Dossier) => Promise<Dossier>;
-    editDossier: (dossier: Dossier) => Promise<Dossier>;
-    removeDossier: (id: string) => Promise<void>;
-    getCurrentDossiers: () => Dossier[];
-    getMatchingDossiers: (id: string) => Promise<Dossier[]>;
-}
-export declare const DossierContext: import("use-context-selector").Context<DossierContextType>;
-declare const DossierProvider: FC<PropsWithChildren>;
-export declare const useDossierContextSelector: <Selected>(selector: (value: DossierContextType) => Selected) => Selected;
-export default DossierProvider;

package/components/app/providers/DossierProvider.js

@@ -1,82 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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 { useCallback, useEffect, useState } from 'react';
-import { createContext, useContextSelector } from 'use-context-selector';
-export const DossierContext = createContext(null);
-const DossierProvider = ({ children }) => {
-    const { dispatchApi } = useMyApi();
-    const appUser = useAppUser();
-    const [loading, setLoading] = useState(false);
-    const [ready, setReady] = useState(false);
-    const [dossiers, setDossiers] = useState([]);
-    const [idToDossiers, setIdToDossiers] = useState({});
-    const fetchDossiers = useCallback(async (force = false) => {
-        if (ready && !force) {
-            return;
-        }
-        if (!appUser.isReady()) {
-            return;
-        }
-        setLoading(true);
-        try {
-            setDossiers((await api.dossier.get()));
-            setReady(true);
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [appUser, ready]);
-    useEffect(() => {
-        if (!ready && !loading) {
-            fetchDossiers();
-        }
-    }, [fetchDossiers, ready, loading]);
-    const getCurrentDossiers = useCallback(() => {
-        return [];
-    }, []);
-    const editDossier = useCallback(async (dossier) => {
-        const result = await api.dossier.put(dossier.dossier_id, dossier);
-        setDossiers(_dossiers => _dossiers.map(_dossier => (_dossier.dossier_id === dossier.dossier_id ? { ..._dossier, dossier } : _dossier)));
-        return result;
-    }, []);
-    const addDossier = useCallback(async (dossier) => {
-        const newDossier = await dispatchApi(api.dossier.post(dossier));
-        setDossiers(_dossiers => [..._dossiers, newDossier]);
-        return newDossier;
-    }, [dispatchApi]);
-    const removeDossier = useCallback(async (id) => {
-        const result = await api.dossier.del(id);
-        setDossiers(_dossiers => _dossiers.filter(v => v.dossier_id !== id));
-        return result;
-    }, []);
-    const getMatchingDossiers = useCallback(async (id) => {
-        if (idToDossiers[id]) {
-            return idToDossiers[id];
-        }
-        const result = await dispatchApi(api.dossier.hit.get(id), { throwError: false });
-        if (result) {
-            setIdToDossiers(_dossiers => ({
-                ..._dossiers,
-                [id]: result
-            }));
-            return result;
-        }
-        return [];
-    }, [dispatchApi, idToDossiers]);
-    return (_jsx(DossierContext.Provider, { value: {
-            ready,
-            dossiers,
-            fetchDossiers,
-            addDossier,
-            editDossier,
-            removeDossier,
-            getCurrentDossiers,
-            getMatchingDossiers
-        }, children: children }));
-};
-export const useDossierContextSelector = (selector) => {
-    return useContextSelector(DossierContext, selector);
-};
-export default DossierProvider;

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

@@ -1,14 +0,0 @@
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Template } from '@cccsaurora/howler-ui/models/entities/generated/Template';
-import type { FC, PropsWithChildren } from 'react';
-interface TemplateContextType {
-    templates: Template[];
-    getTemplates: (force?: boolean) => Promise<Template[]>;
-    getMatchingTemplate: (h: Hit) => Template;
-    refresh: () => void;
-    loaded: boolean;
-}
-export declare const TemplateContext: import("use-context-selector").Context<TemplateContextType>;
-declare const TemplateProvider: FC<PropsWithChildren>;
-export declare const useTemplateContextSelector: <Selected>(selector: (value: TemplateContextType) => Selected) => Selected;
-export default TemplateProvider;

package/components/app/providers/TemplateProvider.js

@@ -1,103 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import api from '@cccsaurora/howler-ui/api';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { useCallback, useRef, useState } from 'react';
-import { createContext, useContextSelector } from 'use-context-selector';
-const SIX_TAIL_PHISH_DETAILS = [
-    'event.start',
-    'event.end',
-    'destination.ip',
-    'destination.domain',
-    'cloud.service.name',
-    'error.code',
-    'error.message'
-];
-/**
- * TODO: Ask analysts to move these into the API
- */
-const BUILTIN_TEMPLATES = [
-    {
-        analytic: '6TailPhish',
-        keys: SIX_TAIL_PHISH_DETAILS,
-        owner: 'none',
-        template_id: '6tailphish.builtin',
-        type: 'readonly'
-    }
-];
-export const TemplateContext = createContext(null);
-const TemplateProvider = ({ children }) => {
-    const request = useRef(null);
-    const { dispatchApi } = useMyApi();
-    const [loaded, setLoaded] = useState(false);
-    const templateRequest = useRef(null);
-    const [templates, setTemplates] = useState(BUILTIN_TEMPLATES);
-    const getTemplates = useCallback(async (force = false) => {
-        if (request.current) {
-            return request.current;
-        }
-        if (loaded && !force) {
-            return templates;
-        }
-        else if (templateRequest.current) {
-            return templateRequest.current;
-        }
-        else {
-            try {
-                request.current = dispatchApi(api.template.get());
-                const result = await request.current;
-                const fullList = [...BUILTIN_TEMPLATES, ...result];
-                setTemplates(fullList);
-                setLoaded(true);
-                return fullList;
-            }
-            catch (e) {
-                return [];
-            }
-            finally {
-                request.current = null;
-            }
-        }
-    }, [dispatchApi, loaded, templates]);
-    /**
-     * Based on a given hit, retrieve the best match for a template
-     */
-    const getMatchingTemplate = useCallback((hit) => templates
-        .filter(_template => 
-    // The analytic must match, and the detection must either a) not exist or b) match the hit
-    _template.analytic === hit.howler.analytic &&
-        (!_template.detection || _template.detection.toLowerCase() === hit.howler.detection?.toLowerCase()))
-        .sort((a, b) => {
-        // Sort priority:
-        // 1. personal > readonly > global
-        // 2. detection > !detection
-        if (a.type !== b.type) {
-            const order = {
-                personal: 2,
-                readonly: 1,
-                global: 0
-            };
-            return order[b.type] - order[a.type];
-        }
-        else {
-            if (a.detection && !b.detection) {
-                return -1;
-            }
-            else if (!a.detection && b.detection) {
-                return 1;
-            }
-            else {
-                return 0;
-            }
-        }
-    })[0], [templates]);
-    const refresh = useCallback(() => {
-        setLoaded(false);
-        getTemplates();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return (_jsx(TemplateContext.Provider, { value: { templates, getTemplates, getMatchingTemplate, refresh, loaded }, children: children }));
-};
-export const useTemplateContextSelector = (selector) => {
-    return useContextSelector(TemplateContext, selector);
-};
-export default TemplateProvider;