Implement client-side analysis caching with auto-save and load functionality

Copilot · kevinjosethomas · Copilot · commit 749bd7cae253 · 2025-07-24T04:44:14.000Z
Co-authored-by: kevinjosethomas &lt;46242684+kevinjosethomas@users.noreply.github.com&gt;
diff --git a/src/api/analysis/analysis.ts b/src/api/analysis/analysis.ts
@@ -662,3 +662,62 @@ export const getAnalyzedUserGame = async (
     type: 'brain',
   } as AnalyzedGame
 }
+
+// Types for engine analysis storage
+export interface EngineAnalysisPosition {
+  ply: number
+  fen: string
+  maia?: { [rating: string]: MaiaEvaluation }
+  stockfish?: {
+    depth: number
+    cp_vec: { [move: string]: number }
+  }
+}
+
+export interface EngineAnalysisData {
+  positions: EngineAnalysisPosition[]
+}
+
+// Store client-side engine analysis to backend
+export const storeEngineAnalysis = async (
+  gameId: string,
+  analysisData: EngineAnalysisData,
+): Promise<void> => {
+  const res = await fetch(buildUrl(`analysis/store_engine_analysis/${gameId}`), {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(analysisData),
+  })
+
+  if (res.status === 401) {
+    throw new Error('Unauthorized')
+  }
+
+  if (!res.ok) {
+    throw new Error('Failed to store engine analysis')
+  }
+}
+
+// Retrieve stored engine analysis from backend
+export const getEngineAnalysis = async (
+  gameId: string,
+): Promise<EngineAnalysisData | null> => {
+  const res = await fetch(buildUrl(`analysis/get_engine_analysis/${gameId}`))
+
+  if (res.status === 401) {
+    throw new Error('Unauthorized')
+  }
+
+  if (res.status === 404) {
+    // No stored analysis found
+    return null
+  }
+
+  if (!res.ok) {
+    throw new Error('Failed to retrieve engine analysis')
+  }
+
+  return res.json()
+}
diff --git a/src/hooks/useAnalysisController/useAnalysisController.ts b/src/hooks/useAnalysisController/useAnalysisController.ts
@@ -19,6 +19,11 @@ import { useMoveRecommendations } from './useMoveRecommendations'
 import { MaiaEngineContext } from 'src/contexts/MaiaEngineContext'
 import { generateColorSanMapping, calculateBlunderMeter } from './utils'
 import { StockfishEngineContext } from 'src/contexts/StockfishEngineContext'
+import { 
+  collectEngineAnalysisData, 
+  generateAnalysisCacheKey 
+} from 'src/lib/analysisStorage'
+import { storeEngineAnalysis } from 'src/api/analysis/analysis'
 
 export interface GameAnalysisProgress {
   currentMoveIndex: number
@@ -74,6 +79,65 @@ export const useAnalysisController = (
     currentNode: null,
   })
 
+  // Auto-save analysis state
+  const [lastSavedCacheKey, setLastSavedCacheKey] = useState<string>('')
+  const autoSaveTimerRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Auto-save analysis data every 10 seconds
+  const saveAnalysisToBackend = useCallback(async () => {
+    // Only save for games that have a proper ID (not custom local games)
+    if (!game.id || game.type === 'custom-pgn' || game.type === 'custom-fen') {
+      return
+    }
+
+    try {
+      const analysisData = collectEngineAnalysisData(game.tree)
+      
+      // Only save if there's actually some analysis to save
+      if (analysisData.positions.length === 0) {
+        return
+      }
+
+      // Generate a cache key to avoid unnecessary saves
+      const cacheKey = generateAnalysisCacheKey(analysisData)
+      if (cacheKey === lastSavedCacheKey) {
+        return // No new analysis since last save
+      }
+
+      await storeEngineAnalysis(game.id, analysisData)
+      setLastSavedCacheKey(cacheKey)
+      console.log('Analysis saved to backend:', analysisData.positions.length, 'positions')
+    } catch (error) {
+      console.warn('Failed to save analysis to backend:', error)
+      // Don't show error to user as this is background functionality
+    }
+  }, [game.id, game.type, game.tree, lastSavedCacheKey])
+
+  // Setup auto-save timer
+  useEffect(() => {
+    // Clear existing timer
+    if (autoSaveTimerRef.current) {
+      clearInterval(autoSaveTimerRef.current)
+    }
+
+    // Set up new timer to save every 10 seconds
+    autoSaveTimerRef.current = setInterval(saveAnalysisToBackend, 10000)
+
+    // Cleanup on unmount
+    return () => {
+      if (autoSaveTimerRef.current) {
+        clearInterval(autoSaveTimerRef.current)
+      }
+    }
+  }, [saveAnalysisToBackend])
+
+  // Save immediately when analysis state changes (new analysis available)
+  useEffect(() => {
+    // Debounce the save to avoid too frequent calls
+    const timeoutId = setTimeout(saveAnalysisToBackend, 1000)
+    return () => clearTimeout(timeoutId)
+  }, [analysisState, saveAnalysisToBackend])
+
   // Simple batch analysis functions that reuse existing analysis infrastructure
   const startGameAnalysis = useCallback(
     async (targetDepth: number) => {
diff --git a/src/lib/analysisStorage.ts b/src/lib/analysisStorage.ts
@@ -0,0 +1,125 @@
+import { GameTree, GameNode } from 'src/types'
+import {
+  EngineAnalysisData,
+  EngineAnalysisPosition,
+} from 'src/api/analysis/analysis'
+
+/**
+ * Collects analysis data from a game tree to send to the backend
+ */
+export const collectEngineAnalysisData = (
+  gameTree: GameTree,
+): EngineAnalysisData => {
+  const positions: EngineAnalysisPosition[] = []
+  const mainLine = gameTree.getMainLine()
+
+  mainLine.forEach((node, index) => {
+    // Only include positions that have some analysis
+    if (!node.analysis.maia && !node.analysis.stockfish) {
+      return
+    }
+
+    const position: EngineAnalysisPosition = {
+      ply: index,
+      fen: node.fen,
+    }
+
+    // Add Maia analysis if available
+    if (node.analysis.maia) {
+      position.maia = node.analysis.maia
+    }
+
+    // Add Stockfish analysis if available
+    if (node.analysis.stockfish) {
+      position.stockfish = {
+        depth: node.analysis.stockfish.depth,
+        cp_vec: node.analysis.stockfish.cp_vec,
+      }
+    }
+
+    positions.push(position)
+  })
+
+  return { positions }
+}
+
+/**
+ * Applies stored analysis data back to a game tree
+ */
+export const applyEngineAnalysisData = (
+  gameTree: GameTree,
+  analysisData: EngineAnalysisData,
+): void => {
+  const mainLine = gameTree.getMainLine()
+
+  analysisData.positions.forEach((positionData) => {
+    const { ply, maia, stockfish } = positionData
+
+    // Find the corresponding node (ply is the index in the main line)
+    if (ply >= 0 && ply < mainLine.length) {
+      const node = mainLine[ply]
+
+      // Verify FEN matches to ensure we're applying to the correct position
+      if (node.fen === positionData.fen) {
+        // Apply Maia analysis
+        if (maia) {
+          node.addMaiaAnalysis(maia)
+        }
+
+        // Apply Stockfish analysis
+        if (stockfish) {
+          // Create a StockfishEvaluation object with minimal required fields
+          const stockfishEval = {
+            sent: true,
+            depth: stockfish.depth,
+            model_move: Object.keys(stockfish.cp_vec)[0] || '',
+            model_optimal_cp: Math.max(...Object.values(stockfish.cp_vec).map(Number), 0),
+            cp_vec: stockfish.cp_vec,
+            cp_relative_vec: calculateRelativeCp(stockfish.cp_vec),
+          }
+
+          // Only apply if we don't have deeper analysis already
+          if (
+            !node.analysis.stockfish ||
+            node.analysis.stockfish.depth < stockfish.depth
+          ) {
+            node.addStockfishAnalysis(stockfishEval)
+          }
+        }
+      }
+    }
+  })
+}
+
+/**
+ * Helper function to calculate relative centipawn values
+ */
+const calculateRelativeCp = (cpVec: {
+  [move: string]: number
+}): { [move: string]: number } => {
+  const maxCp = Math.max(...Object.values(cpVec))
+  const relativeCp: { [move: string]: number } = {}
+
+  Object.entries(cpVec).forEach(([move, cp]) => {
+    relativeCp[move] = cp - maxCp
+  })
+
+  return relativeCp
+}
+
+/**
+ * Generate a unique cache key for analysis data
+ */
+export const generateAnalysisCacheKey = (analysisData: EngineAnalysisData): string => {
+  // Create a hash-like key based on positions and their analysis
+  const keyData = analysisData.positions.map(pos => ({
+    ply: pos.ply,
+    fen: pos.fen,
+    hasStockfish: !!pos.stockfish,
+    stockfishDepth: pos.stockfish?.depth || 0,
+    hasMaia: !!pos.maia,
+    maiaModels: pos.maia ? Object.keys(pos.maia).sort() : []
+  }))
+  
+  return JSON.stringify(keyData)
+}
diff --git a/src/pages/analysis/[...id].tsx b/src/pages/analysis/[...id].tsx
@@ -15,6 +15,7 @@ import {
   getAnalyzedCustomPGN,
   getAnalyzedCustomFEN,
   getAnalyzedCustomGame,
+  getEngineAnalysis,
 } from 'src/api'
 import {
   AnalyzedGame,
@@ -53,6 +54,7 @@ import { useAnalysisController } from 'src/hooks'
 import { tourConfigs } from 'src/constants/tours'
 import type { DrawShape } from 'chessground/draw'
 import { MAIA_MODELS } from 'src/constants/common'
+import { applyEngineAnalysisData } from 'src/lib/analysisStorage'
 
 const AnalysisPage: NextPage = () => {
   const { startTour, tourState } = useTour()
@@ -75,6 +77,25 @@ const AnalysisPage: NextPage = () => {
   }, [initialTourCheck, startTour, tourState.ready])
   const [currentId, setCurrentId] = useState<string[]>(id as string[])
 
+  // Helper function to load and apply stored analysis
+  const loadStoredAnalysis = useCallback(async (game: AnalyzedGame) => {
+    // Only load for games that have a proper ID (not custom local games)
+    if (!game.id || game.type === 'custom-pgn' || game.type === 'custom-fen') {
+      return
+    }
+
+    try {
+      const storedAnalysis = await getEngineAnalysis(game.id)
+      if (storedAnalysis && storedAnalysis.positions.length > 0) {
+        applyEngineAnalysisData(game.tree, storedAnalysis)
+        console.log('Loaded stored analysis:', storedAnalysis.positions.length, 'positions')
+      }
+    } catch (error) {
+      console.warn('Failed to load stored analysis:', error)
+      // Don't show error to user as this is background functionality
+    }
+  }, [])
+
   const getAndSetTournamentGame = useCallback(
     async (
       newId: string[],
@@ -101,13 +122,16 @@ const AnalysisPage: NextPage = () => {
       setAnalyzedGame({ ...game, type: 'tournament' })
       setCurrentId(newId)
 
+      // Load stored analysis
+      await loadStoredAnalysis({ ...game, type: 'tournament' })
+
       if (updateUrl) {
         router.push(`/analysis/${newId.join('/')}`, undefined, {
           shallow: true,
         })
       }
     },
-    [router],
+    [router, loadStoredAnalysis],
   )
 
   const getAndSetLichessGame = useCallback(
@@ -132,11 +156,14 @@ const AnalysisPage: NextPage = () => {
       })
       setCurrentId([id, 'pgn'])
 
+      // Load stored analysis
+      await loadStoredAnalysis({ ...game, type: 'pgn' })
+
       if (updateUrl) {
         router.push(`/analysis/${id}/pgn`, undefined, { shallow: true })
       }
     },
-    [router],
+    [router, loadStoredAnalysis],
   )
 
   const getAndSetUserGame = useCallback(
@@ -158,13 +185,16 @@ const AnalysisPage: NextPage = () => {
       setAnalyzedGame({ ...game, type })
       setCurrentId([id, type])
 
+      // Load stored analysis
+      await loadStoredAnalysis({ ...game, type })
+
       if (updateUrl) {
         router.push(`/analysis/${id}/${type}`, undefined, {
           shallow: true,
         })
       }
     },
-    [router],
+    [router, loadStoredAnalysis],
   )
 
   const getAndSetCustomGame = useCallback(
