@cccsaurora/howler-ui 2.17.0-dev.547 → 2.17.0-dev.550

package/commons/components/app/AppUserService.d.ts

@@ -11,7 +11,7 @@ export type AppUser = {
 };
 export type AppUserService<T extends AppUser> = {
     user: T;
-    setUser: (user: T) => void;
+    setUser: (user: T | ((prev: T) => T)) => void;
     isReady: () => boolean;
     validateProps?: (props: AppUserValidatedProp[]) => boolean;
 };

package/components/app/providers/HitProvider.js

@@ -42,8 +42,8 @@ const HitProvider = ({ children }) => {
         }
     }, []);
     useEffect(() => {
-        addListener('hit_provider', handler);
-        return () => removeListener('hit_provider');
+        addListener('hits', handler);
+        return () => removeListener('hits');
     }, [addListener, handler, removeListener]);
     /**
      * A method to retrieve a hit from the context. It first checks the hit state,

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.includes('localhost') ? 'localhost:5000' : window.location.host;
+        const host = 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/hit/actions/ButtonActions.js

@@ -91,7 +91,9 @@ const ButtonActions = ({ actions, loading, orientation, shortcuts, currentVote }
                                 gridRow: rowIndex + 2
                             }
                             : { gridColumn: rowIndex + 1, gridRow: index + 3 + actionRows[0].length };
-                        const button = (_jsx(Tooltip, { title: t(`hit.details.asessments.${action.name}.description`), children: _jsx(Button, { variant: "outlined", size: "small", disabled: loading, onClick: action.actionFunction, sx: [
+                        const button = (
+                        // Set tooltip placement to be uniform for all buttons
+                        _jsx(Tooltip, { title: t(`hit.details.asessments.${action.name}.description`), placement: "top", children: _jsx(Button, { variant: "outlined", size: "small", disabled: loading, onClick: action.actionFunction, sx: [
                                     {
                                         width: '100%',
                                         p: 0.6

package/components/hooks/useMyUserFunctions.d.ts

@@ -19,6 +19,7 @@ declare const useMyUserFunctions: () => {
             type: "view" | "analytic";
             config: string;
         }[];
+        refresh_rate?: number;
         avatar?: string;
         is_admin?: boolean;
     }>;
@@ -41,6 +42,7 @@ declare const useMyUserFunctions: () => {
             type: "view" | "analytic";
             config: string;
         }[];
+        refresh_rate?: number;
         avatar?: string;
         is_admin?: boolean;
     }>;
@@ -64,6 +66,7 @@ declare const useMyUserFunctions: () => {
             type: "view" | "analytic";
             config: string;
         }[];
+        refresh_rate?: number;
         avatar?: string;
         is_admin?: boolean;
     }>;
@@ -87,6 +90,7 @@ declare const useMyUserFunctions: () => {
             type: "view" | "analytic";
             config: string;
         }[];
+        refresh_rate?: number;
         avatar?: string;
         is_admin?: boolean;
     }>;
@@ -109,10 +113,12 @@ declare const useMyUserFunctions: () => {
             type: "view" | "analytic";
             config: string;
         }[];
+        refresh_rate?: number;
         avatar?: string;
         is_admin?: boolean;
     }>;
     viewGroups: () => Promise<void>;
     setDashboard: (dashboard: HowlerUser["dashboard"]) => Promise<void>;
+    setRefreshRate: (refresh_rate: number) => Promise<void>;
 };
 export default useMyUserFunctions;

package/components/hooks/useMyUserFunctions.js

@@ -107,6 +107,12 @@ const useMyUserFunctions = () => {
                 throwError: true,
                 showError: true
             });
+        }, [currentUser.username, dispatchApi]),
+        setRefreshRate: useCallback(async (refresh_rate) => {
+            await dispatchApi(api.user.put(currentUser.username, { refresh_rate }), {
+                throwError: true,
+                showError: true
+            });
         }, [currentUser.username, dispatchApi])
     };
 };

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

@@ -49,8 +49,8 @@ const HitContextMenu = ({ children, getSelectedId, Component = Box }) => {
     const { config } = useContext(ApiConfigContext);
     const pluginStore = usePluginStore();
     const { getMatchingAnalytic, getMatchingTemplate } = useMatchers();
-    const query = useContextSelector(ParameterContext, ctx => ctx.query);
-    const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
+    const query = useContextSelector(ParameterContext, ctx => ctx?.query);
+    const setQuery = useContextSelector(ParameterContext, ctx => ctx?.setQuery);
     const [id, setId] = useState(null);
     const hit = useContextSelector(HitContext, ctx => ctx.hits[id]);
     const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
@@ -172,7 +172,7 @@ const HitContextMenu = ({ children, getSelectedId, Component = Box }) => {
                             overflow: 'visible !important'
                         }
                     }
-                }, MenuListProps: { dense: true, sx: { minWidth: '250px' } }, anchorOrigin: { vertical: 'top', horizontal: 'left' }, onClick: () => setAnchorEl(null), children: [_jsxs(MenuItem, { component: Link, to: `/hits/${hit?.howler.id}`, disabled: !hit, children: [_jsx(ListItemIcon, { children: _jsx(OpenInNew, {}) }), _jsx(ListItemText, { children: t('hit.panel.open') })] }), _jsxs(MenuItem, { component: Link, to: `/analytics/${analytic?.analytic_id}`, disabled: !analytic, children: [_jsx(ListItemIcon, { children: _jsx(QueryStats, {}) }), _jsx(ListItemText, { children: t('hit.panel.analytic.open') })] }), _jsx(Divider, {}), entries.map(([type, items]) => (_jsxs(MenuItem, { id: `${type}-menu-item`, sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, [type]: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, [type]: null })), disabled: rowStatus[type] === false, children: [_jsx(ListItemIcon, { children: ICON_MAP[type] ?? _jsx(Terminal, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t(`hit.details.actions.${type}`) }), rowStatus[type] !== false && (_jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } })), _jsx(Fade, { in: !!show[type], unmountOnExit: true, children: _jsx(Paper, { id: `${type}-submenu`, sx: calculateSubMenuStyles(show[type]), elevation: 8, children: _jsx(MenuList, { sx: { p: 0, borderTopLeftRadius: 0 }, dense: true, role: "group", children: items.map(a => (_jsx(MenuItem, { value: a.name, onClick: a.actionFunction, children: a.i18nKey ? t(a.i18nKey) : capitalize(a.name) }, a.name))) }) }) })] }, type))), _jsxs(MenuItem, { id: "actions-menu-item", sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, actions: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, actions: null })), disabled: actions.length < 1, children: [_jsx(ListItemIcon, { children: _jsx(SettingsSuggest, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t('route.actions.change') }), actions.length > 0 && _jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } }), _jsx(Fade, { in: !!show.actions, unmountOnExit: true, children: _jsx(Paper, { id: "actions-submenu", sx: calculateSubMenuStyles(show.actions), elevation: 8, children: _jsx(MenuList, { sx: { p: 0 }, dense: true, role: "group", children: actions.map(action => (_jsx(MenuItem, { onClick: () => executeAction(action.action_id, `howler.id:${hit?.howler.id}`), children: _jsx(ListItemText, { children: action.name }) }, action.action_id))) }) }) })] }), !isEmpty(template?.keys ?? []) && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(MenuItem, { id: "excludes-menu-item", sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, excludes: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, excludes: null })), children: [_jsx(ListItemIcon, { children: _jsx(RemoveCircleOutline, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t('hit.panel.exclude') }), _jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } }), _jsx(Fade, { in: !!show.excludes, unmountOnExit: true, children: _jsx(Paper, { id: "excludes-submenu", sx: calculateSubMenuStyles(show.excludes), elevation: 8, children: _jsx(MenuList, { sx: { p: 0 }, dense: true, role: "group", children: template?.keys.map(key => {
+                }, MenuListProps: { dense: true, sx: { minWidth: '250px' } }, anchorOrigin: { vertical: 'top', horizontal: 'left' }, onClick: () => setAnchorEl(null), children: [_jsxs(MenuItem, { component: Link, to: `/hits/${hit?.howler.id}`, disabled: !hit, children: [_jsx(ListItemIcon, { children: _jsx(OpenInNew, {}) }), _jsx(ListItemText, { children: t('hit.panel.open') })] }), _jsxs(MenuItem, { component: Link, to: `/analytics/${analytic?.analytic_id}`, disabled: !analytic, children: [_jsx(ListItemIcon, { children: _jsx(QueryStats, {}) }), _jsx(ListItemText, { children: t('hit.panel.analytic.open') })] }), _jsx(Divider, {}), entries.map(([type, items]) => (_jsxs(MenuItem, { id: `${type}-menu-item`, sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, [type]: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, [type]: null })), disabled: rowStatus[type] === false, children: [_jsx(ListItemIcon, { children: ICON_MAP[type] ?? _jsx(Terminal, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t(`hit.details.actions.${type}`) }), rowStatus[type] !== false && (_jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } })), _jsx(Fade, { in: !!show[type], unmountOnExit: true, children: _jsx(Paper, { id: `${type}-submenu`, sx: calculateSubMenuStyles(show[type]), elevation: 8, children: _jsx(MenuList, { sx: { p: 0, borderTopLeftRadius: 0 }, dense: true, role: "group", children: items.map(a => (_jsx(MenuItem, { value: a.name, onClick: a.actionFunction, children: a.i18nKey ? t(a.i18nKey) : capitalize(a.name) }, a.name))) }) }) })] }, type))), _jsxs(MenuItem, { id: "actions-menu-item", sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, actions: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, actions: null })), disabled: actions.length < 1, children: [_jsx(ListItemIcon, { children: _jsx(SettingsSuggest, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t('route.actions.change') }), actions.length > 0 && _jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } }), _jsx(Fade, { in: !!show.actions, unmountOnExit: true, children: _jsx(Paper, { id: "actions-submenu", sx: calculateSubMenuStyles(show.actions), elevation: 8, children: _jsx(MenuList, { sx: { p: 0 }, dense: true, role: "group", children: actions.map(action => (_jsx(MenuItem, { onClick: () => executeAction(action.action_id, `howler.id:${hit?.howler.id}`), children: _jsx(ListItemText, { children: action.name }) }, action.action_id))) }) }) })] }), !isEmpty(template?.keys ?? []) && setQuery && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(MenuItem, { id: "excludes-menu-item", sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, excludes: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, excludes: null })), children: [_jsx(ListItemIcon, { children: _jsx(RemoveCircleOutline, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t('hit.panel.exclude') }), _jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } }), _jsx(Fade, { in: !!show.excludes, unmountOnExit: true, children: _jsx(Paper, { id: "excludes-submenu", sx: calculateSubMenuStyles(show.excludes), elevation: 8, children: _jsx(MenuList, { sx: { p: 0 }, dense: true, role: "group", children: template?.keys.map(key => {
                                                     // Build exclusion query based on current query and field value
                                                     let newQuery = '';
                                                     if (query !== DEFAULT_QUERY) {

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

@@ -18,7 +18,7 @@ const CustomSpan = () => {
     const endDate = useContextSelector(ParameterContext, ctx => (ctx.endDate ? dayjs(ctx.endDate) : defaultEndDate));
     useEffect(() => {
         if (span?.endsWith('custom')) {
-            setCustomSpan(startDate.format('YYYY-MM-DD HH:mm'), endDate.format('YYYY-MM-DD HH:mm'));
+            setCustomSpan(startDate.toISOString(), endDate.toISOString());
         }
     }, [endDate, setCustomSpan, span, startDate]);
     return span?.endsWith('custom') ? (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: [_jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.start'), value: startDate ? dayjs(startDate) : dayjs().subtract(1, 'days'), maxDate: endDate, onChange: (newStartDate) => setCustomSpan(newStartDate.toISOString(), endDate.toISOString()), ampm: false, disableFuture: true }), _jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.end'), value: endDate, minDate: startDate, onChange: (newEndDate) => setCustomSpan(startDate.toISOString(), newEndDate.toISOString()), ampm: false, disableFuture: true })] }) })) : null;

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

@@ -132,7 +132,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' && !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
+                            }, children: [_jsx(Tooltip, { title: t('hit.panel.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/home/ViewCard.d.ts

@@ -1,7 +1,9 @@
-import type { FC } from 'react';
+import { type FC } from 'react';
 export interface ViewSettings {
     viewId: string;
     limit: number;
+    refreshTick?: symbol;
+    onRefreshComplete?: () => void;
 }
 declare const ViewCard: FC<ViewSettings>;
 export default ViewCard;

package/components/routes/home/ViewCard.js

@@ -3,22 +3,109 @@ import { OpenInNew } from '@mui/icons-material';
 import { Card, CardContent, IconButton, Skeleton, Stack, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
+import { useHitContextSelector } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { useCallback, useEffect, useState } from 'react';
+import HitContextMenu from '@cccsaurora/howler-ui/components/routes/hits/search/HitContextMenu';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
-const ViewCard = ({ viewId, limit }) => {
+// Custom hook to select hits by IDs with proper memoization
+const useSelectHitsByIds = (hitIds) => {
+    const hitIdsRef = useRef(hitIds);
+    const prevResultRef = useRef([]);
+    const prevHitIdsRef = useRef([]);
+    // Keep ref up to date with latest hitIds
+    hitIdsRef.current = hitIds;
+    const selector = useCallback(ctx => {
+        const currentHitIds = hitIdsRef.current;
+        // Fast path: if hitIds array didn't change, check if hit objects changed
+        if (prevHitIdsRef.current.length === currentHitIds.length &&
+            currentHitIds.every((id, i) => id === prevHitIdsRef.current[i])) {
+            // HitIds unchanged - check if any hit objects changed by reference
+            const anyHitChanged = currentHitIds.some((id, i) => ctx.hits[id] !== prevResultRef.current[i]);
+            if (!anyHitChanged) {
+                return prevResultRef.current;
+            }
+        }
+        // Something changed - rebuild the array
+        const currentHits = currentHitIds.map(id => ctx.hits[id]).filter(Boolean);
+        prevHitIdsRef.current = currentHitIds;
+        prevResultRef.current = currentHits;
+        return currentHits;
+    }, []); // Empty deps - selector never changes
+    return useHitContextSelector(selector);
+};
+// Utility functions
+const normalize = (val) => (val == null ? '' : String(val));
+// Have to normalize the fields as websockets and api return null and undefined respectively. This causes false positives when comparing signatures if not normalized to a consistent value. We also stringify non-primitive values to ensure changes are detected.
+const createHitSignature = (hit) => {
+    if (!hit)
+        return '';
+    return `${hit.howler?.id}:${normalize(hit.howler?.status)}:${normalize(hit.howler?.assignment)}:${normalize(hit.howler?.assessment)}`;
+};
+const createSignatureFromHits = (hits) => {
+    if (hits.length === 0)
+        return '';
+    return hits.map(createHitSignature).join('|');
+};
+const DEBOUNCE_TIME = 1000; // 1 second debounce for signature changes
+const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
     const navigate = useNavigate();
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
-    const [hits, setHits] = useState([]);
+    const [hitIds, setHitIds] = useState([]);
     const [loading, setLoading] = useState(false);
+    const debounceTimerRef = useRef(null);
+    const isRefreshing = useRef(false);
+    const lastSignature = useRef('');
     const view = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
     const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
+    const loadHits = useHitContextSelector(ctx => ctx.loadHits);
+    // Subscribe to hits from HitProvider cache based on current hitIds in the view
+    // Uses memoized selector to avoid unnecessary re-renders on unrelated hit updates
+    const hits = useSelectHitsByIds(hitIds);
+    // Create a stable signature that only changes when relevant fields change
+    const hitsSignature = useMemo(() => createSignatureFromHits(hits), [hits]);
+    const refreshView = useCallback(async () => {
+        if (!view?.query || isRefreshing.current) {
+            onRefreshComplete?.();
+            return;
+        }
+        isRefreshing.current = true;
+        try {
+            const res = await dispatchApi(api.search.hit.post({
+                query: view.query,
+                rows: limit,
+                metadata: ['analytic']
+            }));
+            const fetchedHits = res.items ?? [];
+            loadHits(fetchedHits);
+            setHitIds(fetchedHits.map(h => h.howler.id));
+            lastSignature.current = createSignatureFromHits(fetchedHits);
+        }
+        finally {
+            isRefreshing.current = false;
+            onRefreshComplete?.();
+        }
+    }, [dispatchApi, limit, view?.query, loadHits, onRefreshComplete]);
+    const debouncedRefresh = useCallback(() => {
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = setTimeout(() => {
+            refreshView();
+        }, DEBOUNCE_TIME);
+    }, [refreshView]);
+    useEffect(() => {
+        if (refreshTick) {
+            refreshView();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [refreshTick]);
     useEffect(() => {
         fetchViews([viewId]);
     }, [fetchViews, viewId]);
@@ -26,19 +113,43 @@ const ViewCard = ({ viewId, limit }) => {
         if (!view?.query) {
             return;
         }
-        const timeout = setTimeout(() => setLoading(true), 200);
-        dispatchApi(api.search.hit.post({
-            query: view.query,
-            rows: limit,
-            metadata: ['analytic']
-        }))
-            .then(res => setHits(res.items ?? []))
-            .finally(() => {
-            clearTimeout(timeout);
+        const loadingTimeout = setTimeout(() => setLoading(true), 200);
+        refreshView().finally(() => {
+            clearTimeout(loadingTimeout);
             setLoading(false);
         });
-    }, [dispatchApi, limit, view?.query]);
+        return () => {
+            clearTimeout(loadingTimeout);
+        };
+    }, [view?.query, limit, refreshView]);
+    // Monitor hits currently in the view for changes that might affect query results
+    useEffect(() => {
+        if (!hitsSignature || hitIds.length === 0 || !lastSignature.current) {
+            lastSignature.current = hitsSignature;
+            return;
+        }
+        // Check if signature actually changed
+        if (lastSignature.current === hitsSignature) {
+            return;
+        }
+        debouncedRefresh();
+    }, [hitsSignature, hitIds, debouncedRefresh]);
+    useEffect(() => {
+        return () => {
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, []);
     const onClick = useCallback((query) => navigate('/hits?query=' + query), [navigate]);
-    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : hits.length > 0 ? (hits.map(h => (_jsx(Card, { variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate((h.howler.is_bundle ? '/bundles/' : '/hits/') + h.howler.id), children: _jsx(CardContent, { children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: h }) }) }, h.howler.id)))) : (_jsx(AppListEmpty, {}))] }) }));
+    const getSelectedId = useCallback((event) => {
+        const target = event.target;
+        const selectedElement = target.closest('[id]');
+        if (!selectedElement) {
+            return;
+        }
+        return selectedElement.id;
+    }, []);
+    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : hits.length > 0 ? (_jsx(HitContextMenu, { getSelectedId: getSelectedId, children: hits.map(h => (_jsx(Card, { id: h.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate((h.howler.is_bundle ? '/bundles/' : '/hits/') + h.howler.id), children: _jsx(CardContent, { children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: h }) }) }, h.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
 };
 export default ViewCard;

package/components/routes/home/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
 import { SortableContext, arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-import { Cancel, Check, Close, Edit, OpenInNew } from '@mui/icons-material';
-import { Alert, AlertTitle, CircularProgress, Grid, IconButton, Stack, Typography } from '@mui/material';
+import { Cancel, Check, Close, Edit, MoreVert, OpenInNew, Refresh } from '@mui/icons-material';
+import { Alert, AlertTitle, Box, CircularProgress, FormControl, FormLabel, Grid, IconButton, ListItemIcon, Menu, MenuItem, Slider, Stack, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { AppBrand } from '@cccsaurora/howler-ui/branding/AppBrand';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
@@ -12,7 +12,7 @@ import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/us
 import useMyUserFunctions from '@cccsaurora/howler-ui/components/hooks/useMyUserFunctions';
 import dayjs from 'dayjs';
 import isEqual from 'lodash-es/isEqual';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
@@ -22,16 +22,25 @@ import AnalyticCard, {} from './AnalyticCard';
 import EntryWrapper from './EntryWrapper';
 import ViewCard, {} from './ViewCard';
 const LUCENE_DATE_FMT = 'YYYY-MM-DD[T]HH:mm:ss';
+const REFRESH_RATES = [15, 30, 60, 300];
 const Home = () => {
     const { t } = useTranslation();
     const { user, setUser } = useAppUser();
-    const { setDashboard } = useMyUserFunctions();
+    const { setDashboard, setRefreshRate: setRefreshRateBackend } = useMyUserFunctions();
     const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
     const [lastViewed, setLastViewed] = useMyLocalStorageItem(StorageKey.LAST_VIEW, dayjs().utc().format(LUCENE_DATE_FMT));
     const [loading, setLoading] = useState(false);
     const [isEditing, setIsEditing] = useState(false);
     const [updatedHitTotal, setUpdatedHitTotal] = useState(0);
     const [dashboard, setStateDashboard] = useState(user.dashboard ?? []);
+    const [progress, setProgress] = useState(0);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [openSettings, setOpenSettings] = useState(null);
+    const [refreshRate, setRefreshRate] = useState(user.refresh_rate ?? 15);
+    const [refreshTick, setRefreshTick] = useState(null);
+    const pendingRefreshes = useRef(0);
+    const timerRef = useRef(null);
+    const debounceTimerRef = useRef(null);
     const updateQuery = useMemo(() => `(howler.log.user:${user.username} OR howler.assignment:${user.username}) AND howler.log.timestamp:{${lastViewed} TO now} AND -howler.status:resolved`, [lastViewed, user.username]);
     const getIdFromEntry = useCallback((entry) => {
         const settings = JSON.parse(entry.config);
@@ -48,6 +57,41 @@ const Home = () => {
     const setLocalDashboard = useCallback((_dashboard) => {
         setStateDashboard(_dashboard);
     }, []);
+    const handleRefreshComplete = useCallback(() => {
+        pendingRefreshes.current -= 1;
+        if (pendingRefreshes.current <= 0) {
+            setIsRefreshing(false);
+            setProgress(0);
+        }
+    }, []);
+    const handleRefreshRateChange = useCallback((newRate) => {
+        setRefreshRate(newRate);
+        setUser(prev => ({
+            ...prev,
+            refresh_rate: newRate
+        }));
+        // Debounce the backend API call
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = setTimeout(() => {
+            setRefreshRateBackend(newRate);
+        }, 500);
+    }, [setRefreshRateBackend, setUser]);
+    const refreshViews = useCallback(() => {
+        const viewCardCount = (dashboard ?? []).filter(e => e.type === 'view').length;
+        setIsRefreshing(true);
+        pendingRefreshes.current = viewCardCount;
+        if (viewCardCount === 0) {
+            setIsRefreshing(false);
+            setProgress(0);
+            return;
+        }
+        setRefreshTick(Symbol());
+    }, [dashboard]);
+    const handleOpenSettings = (event) => {
+        setOpenSettings(event.currentTarget);
+    };
     const saveChanges = useCallback(async () => {
         setLoading(true);
         try {
@@ -82,7 +126,48 @@ const Home = () => {
         })
             .then(result => setUpdatedHitTotal(result.total));
     }, [updateQuery]);
-    return (_jsx(PageCenter, { maxWidth: "1800px", textAlign: "left", height: "100%", children: _jsx(ErrorBoundary, { children: _jsxs(Stack, { direction: "column", spacing: 1, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", justifyContent: "end", spacing: 1, children: [isEditing && (_jsx(CustomButton, { variant: "outlined", size: "small", color: "error", startIcon: _jsx(Cancel, {}), onClick: discardChanges, children: t('cancel') })), _jsx(CustomButton, { variant: "outlined", size: "small", disabled: isEditing && isEqual(dashboard, user.dashboard), color: isEditing ? 'success' : 'primary', startIcon: isEditing ? loading ? _jsx(CircularProgress, { size: 20 }) : _jsx(Check, {}) : _jsx(Edit, {}), onClick: () => (!isEditing ? setIsEditing(true) : saveChanges()), children: t(isEditing ? 'save' : 'edit') })] }), updatedHitTotal > 0 && (_jsxs(Alert, { severity: "info", variant: "outlined", action: _jsxs(Stack, { spacing: 1, direction: "row", children: [_jsx(IconButton, { color: "info", component: Link, to: `/hits?query=${encodeURIComponent(updateQuery)}`, onClick: () => setLastViewed(dayjs().utc().format(LUCENE_DATE_FMT)), children: _jsx(OpenInNew, {}) }), _jsx(IconButton, { color: "info", onClick: () => {
+    useEffect(() => {
+        if (isRefreshing)
+            return;
+        if (progress >= 100) {
+            refreshViews();
+            return;
+        }
+        timerRef.current = setTimeout(() => {
+            setProgress(prev => prev + 1);
+        }, refreshRate * 10);
+        return () => {
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+        };
+    }, [progress, isRefreshing, refreshRate, refreshViews]);
+    useEffect(() => {
+        return () => {
+            if (debounceTimerRef.current)
+                clearTimeout(debounceTimerRef.current);
+        };
+    }, []);
+    return (_jsx(PageCenter, { maxWidth: "1800px", textAlign: "left", height: "100%", children: _jsx(ErrorBoundary, { children: _jsxs(Stack, { direction: "column", spacing: 1, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", justifyContent: "end", spacing: 1, children: [isEditing && (_jsx(CustomButton, { variant: "outlined", size: "small", color: "error", startIcon: _jsx(Cancel, {}), onClick: discardChanges, children: t('cancel') })), isEditing && (_jsx(CustomButton, { variant: "outlined", size: "small", disabled: isEqual(dashboard, user.dashboard), color: 'success', startIcon: loading ? _jsx(CircularProgress, { size: 20 }) : _jsx(Check, {}), onClick: saveChanges, children: t('save') })), _jsxs(Box, { sx: { position: 'relative', display: 'inline-flex' }, children: [isRefreshing ? (_jsx(CircularProgress, { variant: "indeterminate" })) : (_jsx(CircularProgress, { variant: "determinate", value: progress })), _jsx(Box, { sx: {
+                                            top: 0,
+                                            left: 0,
+                                            bottom: 0,
+                                            right: 0,
+                                            position: 'absolute',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center'
+                                        }, children: _jsx(Tooltip, { title: t('refresh'), children: _jsx(IconButton, { onClick: refreshViews, disabled: isRefreshing, color: "primary", children: _jsx(Refresh, {}) }) }) })] }), _jsx(IconButton, { size: "small", color: "primary", onClick: handleOpenSettings, children: _jsx(MoreVert, {}) }), _jsxs(Menu, { id: "settings-menu", anchorEl: openSettings, open: !!openSettings, onClose: () => setOpenSettings(null), children: [_jsxs(MenuItem, { disabled: isEditing, onClick: () => {
+                                            setOpenSettings(null);
+                                            setIsEditing(true);
+                                        }, children: [_jsx(ListItemIcon, { children: _jsx(Edit, {}) }), t('page.dashboard.settings.edit')] }), _jsx(MenuItem, { disableRipple: true, disableTouchRipple: true, sx: { '&:hover': { bgcolor: 'transparent' }, cursor: 'default' }, children: _jsxs(FormControl, { sx: { px: 2, py: 1, minWidth: 250, pointerEvents: 'auto' }, children: [_jsx(FormLabel, { id: "refresh-rate-label", sx: { mb: 2 }, children: t('page.dashboard.settings.refreshRate') }), _jsx(Slider, { "aria-labelledby": "refresh-rate-label", value: REFRESH_RATES.indexOf(refreshRate), onChange: (_, value) => handleRefreshRateChange(REFRESH_RATES[value]), step: 1, marks: [
+                                                        { value: 0, label: '15s' },
+                                                        { value: 1, label: '30s' },
+                                                        { value: 2, label: '1m' },
+                                                        { value: 3, label: '5m' }
+                                                    ], min: 0, max: 3, valueLabelDisplay: "auto", valueLabelFormat: value => {
+                                                        const rates = ['15s', '30s', '1m', '5m'];
+                                                        return rates[value] || '';
+                                                    } })] }) })] })] }), updatedHitTotal > 0 && (_jsxs(Alert, { severity: "info", variant: "outlined", action: _jsxs(Stack, { spacing: 1, direction: "row", children: [_jsx(IconButton, { color: "info", component: Link, to: `/hits?query=${encodeURIComponent(updateQuery)}`, onClick: () => setLastViewed(dayjs().utc().format(LUCENE_DATE_FMT)), children: _jsx(OpenInNew, {}) }), _jsx(IconButton, { color: "info", onClick: () => {
                                         setLastViewed(dayjs().utc().format(LUCENE_DATE_FMT));
                                         setUpdatedHitTotal(0);
                                     }, children: _jsx(Close, {}) })] }), children: [_jsx(AlertTitle, { children: t('route.home.alert.updated.title') }), t('route.home.alert.updated.description', { count: updatedHitTotal })] })), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: (dashboard ?? []).map(entry => getIdFromEntry(entry)), children: _jsxs(Grid, { container: true, spacing: 1, alignItems: "stretch", sx: [
@@ -98,7 +183,7 @@ const Home = () => {
                                 ], children: [(dashboard ?? []).map(entry => {
                                         if (entry.type === 'view') {
                                             const settings = JSON.parse(entry.config);
-                                            return (_jsx(EntryWrapper, { editing: isEditing, id: settings.viewId, onDelete: () => setLocalDashboard((dashboard ?? []).filter(_entry => _entry.entry_id !== getIdFromEntry(entry))), children: _jsx(ViewCard, { ...settings }, entry.config) }, entry.entry_id));
+                                            return (_jsx(EntryWrapper, { editing: isEditing, id: settings.viewId, onDelete: () => setLocalDashboard((dashboard ?? []).filter(_entry => _entry.entry_id !== getIdFromEntry(entry))), children: _jsx(ViewCard, { refreshTick: refreshTick, onRefreshComplete: handleRefreshComplete, ...settings }, entry.config) }, entry.entry_id));
                                         }
                                         else if (entry.type === 'analytic') {
                                             const settings = JSON.parse(entry.config);

package/locales/en/translation.json

@@ -175,6 +175,7 @@
     "hit.panel.analytic.open": "Open Analytic",
     "hit.panel.bundles.open": "Parent Bundles",
     "hit.panel.bundles.open.prompt": "Open Parent Bundle",
+    "hit.panel.view.layout": "Change View Panel",
     "hit.panel.details.show": "Show Hit Details",
     "hit.panel.details.hide": "Hide Hit Details",
     "hit.panel.details.exit": "Close Hit",
@@ -342,6 +343,8 @@
     "page.error.description": "The application stopped working suddenly. If the problem persists please reach out on teams.",
     "page.error.support": "Please click here for teams support",
     "page.dashboard.title": "Dashboard",
+    "page.dashboard.settings.edit": "Edit Dashboard",
+    "page.dashboard.settings.refreshRate": "Refresh Rate",
     "page.documentation.categories": "API Categories",
     "page.documentation.categories.category": "Category",
     "page.documentation.categories.description": "Description",

package/locales/fr/translation.json

@@ -176,6 +176,7 @@
     "hit.panel.analytic.open": "Ouvrir l'analyse",
     "hit.panel.bundles.open": "Groupes parentaux",
     "hit.panel.bundles.open.prompt": "Ouvrir le groupe parent",
+    "hit.panel.view.layout": "Modifier le panneau d'affichage",
     "hit.panel.details.show": "Montrer les détails du hit",
     "hit.panel.details.hide": "Cacher les détails du hit",
     "hit.panel.details.exit": "Fermer hit",
@@ -344,6 +345,8 @@
     "page.error.description": "L'application a cessé de fonctionner soudainement. Si le problème persiste, veuillez nous contacter sur teams.",
     "page.error.support": "Cliquez ici pour obtenir du soutien sur teams",
     "page.dashboard.title": "Tableau de bord",
+    "page.dashboard.settings.edit": "Modifier le tableau de bord",
+    "page.dashboard.settings.refreshRate": "Fréquence de rafraîchissement",
     "page.documentation.categories": "Catégories d'API",
     "page.documentation.categories.category": "Catégorie",
     "page.documentation.categories.description": "Description",

package/models/entities/HowlerUser.d.ts

@@ -15,4 +15,5 @@ export interface HowlerUser extends AppUser {
   favourite_views?: string[];
   favourite_analytics?: string[];
   dashboard?: { entry_id: string; type: 'view' | 'analytic'; config: string }[];
+  refresh_rate?: number;
 }

package/package.json

@@ -101,7 +101,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.17.0-dev.547",
+  "version": "2.17.0-dev.550",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",