StatsHouse UI: fix badge fetch

Author: vauweb

statshouse-ui/src/api/badges.ts

@@ -10,8 +10,8 @@ import type { PlotParams, TimeRange, VariableKey, VariableParams } from '@/url2'
 import { useLiveModeStore } from '@/store2/liveModeStore';
 import { useMemo } from 'react';
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
-import { useStatsHouse } from '@/store2';
 import { getLoadPlotUrlParamsLight } from '@/store2/plotDataStore/loadPlotData2';
+import { usePlotHeal } from '@/hooks/usePlotHeal';
 
 export const ApiBadgesEndpoint = '/api/badges';
 
@@ -52,10 +52,7 @@ export function useApiBadges<T = ApiBadges>(
     return getLoadPlotUrlParamsLight(plot, timeRange, timeShifts, variables, interval);
   }, [interval, plot, timeRange, timeShifts, variables]);
 
-  const plotHeals = useStatsHouse((s) => {
-    const status = s.plotHeals[plot.id];
-    return !(!!status && !status.status && status.lastTimestamp + status.timeout * 1000 > Date.now());
-  });
+  const plotHeals = usePlotHeal(plot.id);
 
   const fetchParams = useMemo(() => {
     if (!plot?.id) {
@@ -65,7 +62,12 @@ export function useApiBadges<T = ApiBadges>(
   }, [interval, plot, priority, timeRange, timeShifts, variables]);
 
   return useQuery({
-    enabled: plotHeals && enabled,
+    enabled: (): boolean => {
+      if (enabled) {
+        return plotHeals === true || plotHeals > Date.now();
+      }
+      return false;
+    },
     select,
     queryKey: [ApiBadgesEndpoint, keyParams],
     queryFn: async ({ signal }) => {

statshouse-ui/src/components2/Plot/PlotView/PlotSubMenu.tsx

@@ -29,7 +29,7 @@ export const PlotSubMenu = memo(function PlotSubMenu({ className }: PlotSubMenuP
   const { timeRange, timeShifts, variables } = useStatsHouseShallow(selectorStore);
   const metricName = useMetricName(true);
   const { receiveErrors, receiveWarnings, samplingFactorSrc, samplingFactorAgg, mappingFloodEvents, isLoading } =
-    useMetricBadges(plot, timeRange, timeShifts, variables);
+    useMetricBadges(plot, timeRange, timeShifts, variables, true, 1);
 
   const linkCSV = useLinkCSV2(plot.id);
   return (

statshouse-ui/src/hooks/useMetricBadges.ts

@@ -4,8 +4,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-import { ApiBadges, useApiBadges } from '../api/badges';
-import { getNewMetric, PlotParams, type TimeRange, type VariableKey, type VariableParams } from '../url2';
+import { type ApiBadges, useApiBadges } from '@/api/badges';
+import { getNewMetric, type PlotParams, type TimeRange, type VariableKey, type VariableParams } from '@/url2';
 import { useMemo } from 'react';
 
 const badgesSelector = (r?: ApiBadges) => ({
@@ -21,9 +21,11 @@ export function useMetricBadges(
   plot: PlotParams = defaultPlot,
   timeRange: TimeRange,
   timeShifts: number[],
-  variables: Partial<Record<VariableKey, VariableParams>>
+  variables: Partial<Record<VariableKey, VariableParams>>,
+  enabled: boolean = false,
+  priority: number = 2
 ) {
-  const queryData = useApiBadges(plot, timeRange, timeShifts, variables, badgesSelector);
+  const queryData = useApiBadges(plot, timeRange, timeShifts, variables, badgesSelector, enabled, priority);
   return useMemo(
     () => ({
       isLoading: queryData.isLoading,