Fix dashboard weekly sets caching and muscle analysis tooltip

aree6 · aree6 · commit 237d94172cfa · 2026-05-06T15:26:42.000+08:00
diff --git a/frontend/components/dashboard/hooks/useDashboardWeeklySetsDashboard.ts b/frontend/components/dashboard/hooks/useDashboardWeeklySetsDashboard.ts
@@ -4,6 +4,7 @@ import type { ExerciseAsset } from '../../../utils/data/exerciseAssets';
 import {
   computeWeeklySetsDashboardData,
   type WeeklySetsGrouping,
+  type WeeklySetsDashboardResult,
   type WeeklySetsWindow,
 } from '../../../utils/muscle/analytics';
 import { computationCache } from '../../../utils/storage/computationCache';
@@ -34,25 +35,23 @@ export const useDashboardWeeklySetsDashboard = (args: {
     }
 
     const cacheKey = dashboardCacheKeys.weeklySets(filterCacheKey, muscleCompQuick, compositionGrouping, secondarySetMultiplier);
-    return computationCache.getOrCompute(
+    const computed = computationCache.getOrCompute<WeeklySetsDashboardResult>(
       cacheKey,
       fullData,
-      () => {
-        const computed = computeWeeklySetsDashboardData(
-          fullData,
-          assetsMap,
-          effectiveNow,
-          muscleCompQuick,
-          compositionGrouping,
-          secondarySetMultiplier
-        );
-        return {
-          heatmap: computed.heatmap,
-          windowStart: computed.windowStart,
-        };
-      },
+      () => computeWeeklySetsDashboardData(
+        fullData,
+        assetsMap,
+        effectiveNow,
+        muscleCompQuick,
+        compositionGrouping,
+        secondarySetMultiplier
+      ),
       { ttl: 10 * 60 * 1000 }
     );
+    return {
+      heatmap: computed.heatmap,
+      windowStart: computed.windowStart,
+    };
   }, [assetsMap, fullData, effectiveNow, muscleCompQuick, compositionGrouping, filterCacheKey, secondarySetMultiplier]);
 
   return { weeklySetsDashboard };
diff --git a/frontend/components/muscleAnalysis/hooks/useMuscleAnalysisHandlers.ts b/frontend/components/muscleAnalysis/hooks/useMuscleAnalysisHandlers.ts
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   getHeadlessIdForDetailedSvgId,
   HEADLESS_MUSCLE_NAMES,
@@ -35,9 +35,26 @@ export const useMuscleAnalysisHandlers = ({
   hypertrophyScoreMap,
 }: UseMuscleAnalysisHandlersParams) => {
   const [hoveredMuscle, setHoveredMuscle] = useState<string | null>(null);
+  const [hoverContext, setHoverContext] = useState<{ muscleId: string; rect: DOMRect } | null>(null);
 
   const volumeThresholds = useMemo(() => getVolumeThresholds(trainingLevel), [trainingLevel]);
 
+  const buildTooltip = useCallback((muscleId: string, rect: DOMRect): TooltipData => {
+    const headlessId = getHeadlessIdForDetailedSvgId(muscleId) ?? muscleId;
+    const rate = headlessRatesMap.get(headlessId) || 0;
+    const zone = getVolumeZone(rate, volumeThresholds);
+    const hScore = hypertrophyScoreMap.get(headlessId);
+    const scoreLine = hScore !== undefined ? `Hypertrophy Score: ${hScore}/100` : `No score yet`;
+    const bodyText = `${rate.toFixed(1)} sets/wk — ${zone.label}\n${scoreLine}\n${zone.explanation}`;
+
+    return {
+      rect,
+      title: (HEADLESS_MUSCLE_NAMES as any)[headlessId] ?? muscleId,
+      body: bodyText,
+      status: rate > 0 ? 'success' : 'default',
+    };
+  }, [headlessRatesMap, hypertrophyScoreMap, volumeThresholds]);
+
   const handleMuscleClick = useCallback((muscleId: string) => {
     const isMobile = typeof window !== 'undefined' && window.innerWidth < 1024;
     
@@ -64,6 +81,7 @@ export const useMuscleAnalysisHandlers = ({
   const handleMuscleHover = useCallback((muscleId: string | null, e?: MouseEvent) => {
     setHoveredMuscle(muscleId);
     if (!muscleId || !e) {
+      setHoverContext(null);
       setHoverTooltip(null);
       return;
     }
@@ -72,24 +90,19 @@ export const useMuscleAnalysisHandlers = ({
     const groupEl = target?.closest?.('g[id]') as Element | null;
     const rect = groupEl?.getBoundingClientRect?.() as DOMRect | undefined;
     if (!rect) {
+      setHoverContext(null);
       setHoverTooltip(null);
       return;
     }
 
-    const headlessId = getHeadlessIdForDetailedSvgId(muscleId!) ?? muscleId!;
-    const rate = headlessRatesMap.get(headlessId) || 0;
-    const zone = getVolumeZone(rate, volumeThresholds);
-    const hScore = hypertrophyScoreMap.get(muscleId);
-    const scoreLine = hScore !== undefined ? `Hypertrophy Score: ${hScore}/100` : `No score yet`;
-    const bodyText = `${rate.toFixed(1)} sets/wk — ${zone.label}\n${scoreLine}\n${zone.explanation}`;
+    setHoverContext({ muscleId, rect });
+    setHoverTooltip(buildTooltip(muscleId, rect));
+  }, [buildTooltip, setHoverTooltip]);
 
-    setHoverTooltip({
-      rect,
-      title: (HEADLESS_MUSCLE_NAMES as any)[headlessId] ?? muscleId,
-      body: bodyText,
-      status: rate > 0 ? 'success' : 'default',
-    });
-  }, [headlessRatesMap, setHoverTooltip, volumeThresholds]);
+  useEffect(() => {
+    if (!hoverContext) return;
+    setHoverTooltip(buildTooltip(hoverContext.muscleId, hoverContext.rect));
+  }, [hoverContext, buildTooltip, setHoverTooltip]);
 
   const selectedBodyMapIds = useMemo(() => {
     if (!selectedMuscle) return undefined;
diff --git a/frontend/components/muscleAnalysis/hooks/useMuscleHeatmapData.ts b/frontend/components/muscleAnalysis/hooks/useMuscleHeatmapData.ts
@@ -1,7 +1,11 @@
 import { useMemo } from 'react';
 import type { WorkoutSet } from '../../../types';
 import { computationCache } from '../../../utils/storage/computationCache';
-import { computeWeeklySetsDashboardData, type WeeklySetsWindow } from '../../../utils/muscle/analytics';
+import {
+  computeWeeklySetsDashboardData,
+  type WeeklySetsDashboardResult,
+  type WeeklySetsWindow,
+} from '../../../utils/muscle/analytics';
 import { toHeadlessVolumeMap } from '../../../utils/muscle/mapping';
 import { MUSCLE_GROUP_ORDER, SVG_TO_MUSCLE_GROUP, getHeadlessRadarSeries } from '../../../utils/muscle/mapping';
 import type { NormalizedMuscleGroup } from '../../../utils/muscle/analytics';
@@ -30,30 +34,49 @@ export const useMuscleHeatmapData = ({
   filterCacheKey,
   secondarySetMultiplier,
 }: UseMuscleHeatmapDataParams) => {
+  const getWeeklySetsDashboard = (
+    cacheKey: string,
+    window: WeeklySetsWindow,
+    grouping: 'muscles' | 'groups'
+  ): WeeklySetsDashboardResult => {
+    const compute = () =>
+      computeWeeklySetsDashboardData(data, assetsMap!, effectiveNow, window, grouping, secondarySetMultiplier);
+
+    const cached = computationCache.getOrCompute<WeeklySetsDashboardResult>(
+      cacheKey,
+      data,
+      compute,
+      { ttl: 10 * 60 * 1000 }
+    );
+
+    // Older dashboard cache entries stored a heatmap-only shape under this key.
+    // If we encounter one, force a recompute so tooltip rates are available.
+    if (!(cached.weeklyRatesBySubject instanceof Map)) {
+      return computationCache.getOrCompute<WeeklySetsDashboardResult>(
+        cacheKey,
+        data,
+        compute,
+        { ttl: 10 * 60 * 1000, forceRecompute: true }
+      );
+    }
+
+    return cached;
+  };
+
   const weeklySetsDashboardMuscles = useMemo(() => {
     if (!assetsMap) return null;
 
     const window: WeeklySetsWindow = weeklySetsWindow === 'all' ? 'all' : weeklySetsWindow;
     const cacheKey = muscleCacheKeys.weeklySets(filterCacheKey, window, 'muscles', secondarySetMultiplier);
-    return computationCache.getOrCompute(
-      cacheKey,
-      data,
-      () => computeWeeklySetsDashboardData(data, assetsMap, effectiveNow, window, 'muscles', secondarySetMultiplier),
-      { ttl: 10 * 60 * 1000 }
-    );
+    return getWeeklySetsDashboard(cacheKey, window, 'muscles');
   }, [assetsMap, data, effectiveNow, weeklySetsWindow, filterCacheKey, secondarySetMultiplier]);
 
   const weeklySetsDashboardGroups = useMemo(() => {
     if (!assetsMap) return null;
 
     const window: WeeklySetsWindow = weeklySetsWindow === 'all' ? 'all' : weeklySetsWindow;
     const cacheKey = muscleCacheKeys.weeklySets(filterCacheKey, window, 'groups', secondarySetMultiplier);
-    return computationCache.getOrCompute(
-      cacheKey,
-      data,
-      () => computeWeeklySetsDashboardData(data, assetsMap, effectiveNow, window, 'groups', secondarySetMultiplier),
-      { ttl: 10 * 60 * 1000 }
-    );
+    return getWeeklySetsDashboard(cacheKey, window, 'groups');
   }, [assetsMap, data, effectiveNow, weeklySetsWindow, filterCacheKey, secondarySetMultiplier]);
 
   const windowedHeatmapData = useMemo(() => {
diff --git a/frontend/utils/muscle/analytics/dashboardWeeklySets.ts b/frontend/utils/muscle/analytics/dashboardWeeklySets.ts
@@ -125,9 +125,11 @@ export const computeWeeklySetsDashboardData = (
     }
   }
 
-  const windowDays = window === 'all'
-    ? Math.max(1, differenceInCalendarDays(now, windowStart))
-    : parseInt(window, 10);
+  const clampedSpanDays = Math.max(1, differenceInCalendarDays(now, windowStart));
+  const windowDays =
+    window === 'all' || window === '365d'
+      ? clampedSpanDays
+      : parseInt(window, 10);
   const weeks = Math.max(1, windowDays / 7);
 
   const weeklyRates = new Map<string, number>();
diff --git a/frontend/utils/storage/cacheKeys.ts b/frontend/utils/storage/cacheKeys.ts
@@ -28,7 +28,7 @@ export const cacheKeys = {
  */
 export const dashboardCacheKeys = {
   weeklySets: (filterKey: string, window: WeeklySetsWindow, grouping: WeeklySetsGrouping, secondaryMultiplier: number = 0.5) =>
-    `weeklySets:${VERSION}:${filterKey}:${window}:${grouping}:sec:${secondaryMultiplier}`,
+    `weeklySets:${VERSION}:calc2:${filterKey}:${window}:${grouping}:sec:${secondaryMultiplier}`,
   
   muscleSeries: (filterKey: string, mode: 'groups' | 'muscles', secondaryMultiplier: number = 0.5) =>
     `muscleSeries:${VERSION}:${filterKey}:${mode}:sec:${secondaryMultiplier}`,

Original file line number	Diff line number	Diff line change
`@@ -125,9 +125,11 @@ export const computeWeeklySetsDashboardData = (`
`125`	`125`	`}`
`126`	`126`	`}`
`127`	`127`
`128`		`- const windowDays = window === 'all'`
`129`		`- ? Math.max(1, differenceInCalendarDays(now, windowStart))`
`130`		`- : parseInt(window, 10);`
	`128`	`+ const clampedSpanDays = Math.max(1, differenceInCalendarDays(now, windowStart));`
	`129`	`+ const windowDays =`
	`130`	`+ window === 'all' \|\| window === '365d'`
	`131`	`+ ? clampedSpanDays`
	`132`	`+ : parseInt(window, 10);`
`131`	`133`	`const weeks = Math.max(1, windowDays / 7);`
`132`	`134`
`133`	`135`	`const weeklyRates = new Map<string, number>();`