fix: render errors + add maia to tournament games + access errors

CSSLab · Jan 25, 2025 · 9c82b2d · 9c82b2d
1 parent b373209
commit 9c82b2d
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 65 deletions.
diff --git a/src/components/Analysis/Highlight.tsx b/src/components/Analysis/Highlight.tsx
@@ -31,8 +31,9 @@ export const Highlight: React.FC<Props> = ({
           <p className="text-xl font-semibold">Current Position</p>
           <p className="text-sm text-secondary">
             Maia predicts that Black will play{' '}
-            {moveEvaluation.maia
-              ? colorSanMapping[Object.keys(moveEvaluation.maia.policy)[0]].san
+            {moveEvaluation?.maia
+              ? (colorSanMapping[Object.keys(moveEvaluation.maia.policy)[0]]
+                  ?.san ?? Object.keys(moveEvaluation.maia.policy)[0])
               : '...'}{' '}
             next. This is a blunder.
           </p>
@@ -41,20 +42,20 @@ export const Highlight: React.FC<Props> = ({
           <div className="flex flex-col items-center justify-center bg-human-3/5 py-4">
             <p className="text-sm text-human-2">Maia White Win %</p>
             <p className="text-2xl font-bold text-human-1">
-              {moveEvaluation.maia
+              {moveEvaluation?.maia
                 ? `${Math.round(moveEvaluation.maia?.value * 1000) / 10}%`
                 : '...'}
             </p>
           </div>
           <div className="flex flex-col items-center justify-center bg-engine-3/5 py-4">
             <p className="text-sm text-engine-2">
               SF Eval
-              {moveEvaluation.stockfish?.depth
+              {moveEvaluation?.stockfish?.depth
                 ? ` (D${moveEvaluation.stockfish?.depth})`
                 : ''}
             </p>
             <p className="text-2xl font-bold text-engine-1">
-              {moveEvaluation.stockfish
+              {moveEvaluation?.stockfish
                 ? `${moveEvaluation.stockfish.model_optimal_cp / 100 > 0 ? '+' : ''}${moveEvaluation.stockfish.model_optimal_cp / 100}`
                 : '...'}
             </p>

diff --git a/src/components/Analysis/MoveMap.tsx b/src/components/Analysis/MoveMap.tsx
@@ -173,7 +173,6 @@ export const MoveMap: React.FC<Props> = ({
                   fill={colorSanMapping[entry.move].color || '#fff'}
                   onMouseEnter={() => onMouseEnter(entry.move)}
                   onMouseOutCapture={() => {
-                    console.log('beep')
                     setHoverArrow(null)
                   }}
                 />

diff --git a/src/components/Analysis/MoveRecommendations.tsx b/src/components/Analysis/MoveRecommendations.tsx
@@ -45,26 +45,28 @@ export const MoveRecommendations: React.FC<Props> = ({
               %
             </p>
           </div>
-          {recommendations.maia?.map(({ move, prob }, index) => (
-            <div
-              key={index}
-              className="flex items-center justify-between"
-              style={{
-                color: colorSanMapping[move].color,
-              }}
-            >
-              <p
-                className="cursor-default font-mono hover:underline"
-                onMouseEnter={() => onMouseEnter(move)}
-                onMouseOutCapture={() => setHoverArrow(null)}
+          {recommendations.maia?.map(({ move, prob }, index) => {
+            return (
+              <div
+                key={index}
+                className="flex items-center justify-between"
+                style={{
+                  color: colorSanMapping[move].color,
+                }}
               >
-                {colorSanMapping[move].san}
-              </p>
-              <p className="font-mono text-sm">
-                {Math.round(prob * 1000) / 10}%
-              </p>
-            </div>
-          ))}
+                <p
+                  className="cursor-default font-mono hover:underline"
+                  onMouseEnter={() => onMouseEnter(move)}
+                  onMouseOutCapture={() => setHoverArrow(null)}
+                >
+                  {colorSanMapping[move]?.san ?? move}
+                </p>
+                <p className="font-mono text-sm">
+                  {Math.round(prob * 1000) / 10}%
+                </p>
+              </div>
+            )
+          })}
         </div>
       </div>
       <div className="flex flex-col gap-2 bg-background-1/60 p-5">
@@ -83,7 +85,7 @@ export const MoveRecommendations: React.FC<Props> = ({
               key={index}
               className="flex items-center justify-between"
               style={{
-                color: colorSanMapping[move].color,
+                color: colorSanMapping[move].color ?? '#FFFFFF',
               }}
             >
               <p

diff --git a/src/hooks/useAnalysisController/useAnalysisController.ts b/src/hooks/useAnalysisController/useAnalysisController.ts
@@ -56,7 +56,6 @@ export const useAnalysisController = (
   const [currentMaiaModel, setCurrentMaiaModel] = useState(MAIA_MODELS[0])
 
   useEffect(() => {
-    if (game.type === 'tournament') return
     const board = new Chess(game.moves[controller.currentIndex].board)
 
     ;(async () => {
@@ -176,22 +175,28 @@ export const useAnalysisController = (
       const lastMove = game.moves[controller.currentIndex].lastMove?.join('')
       if (!lastMove) return null
 
-      const cp_vec = game.stockfishEvaluations[
-        controller.currentIndex
-      ] as MoveMap
-      const model_optimal_cp = Math.max(...Object.values(cp_vec))
-      const cp_relative_vec = Object.fromEntries(
-        Object.entries(cp_vec).map(([move, evaluation]) => [
-          move,
-          model_optimal_cp - evaluation,
-        ]),
+      const cp_vec = Object.fromEntries(
+        Object.entries(
+          game.stockfishEvaluations[controller.currentIndex] as MoveMap,
+        ).sort(([, a], [, b]) => b - a),
       )
 
-      stockfish = {
-        cp_vec,
-        cp_relative_vec,
-        model_optimal_cp,
-      } as StockfishEvaluation
+      if (cp_vec) {
+        const model_optimal_cp = Math.max(...Object.values(cp_vec))
+
+        const cp_relative_vec = Object.fromEntries(
+          Object.entries(cp_vec).map(([move, evaluation]) => [
+            move,
+            model_optimal_cp - evaluation,
+          ]),
+        )
+
+        stockfish = {
+          cp_vec,
+          cp_relative_vec,
+          model_optimal_cp,
+        } as StockfishEvaluation
+      }
     }
 
     let maia
@@ -325,27 +330,20 @@ export const useAnalysisController = (
       stockfish?: { move: string; cp: number }[]
     } = {}
 
-    if (maiaEvaluations[controller.currentIndex]) {
-      const policy =
-        maiaEvaluations[controller.currentIndex][currentMaiaModel].policy
-
+    if (moveEvaluation?.maia) {
+      const policy = moveEvaluation.maia.policy
       const maia = Object.entries(policy)
         .slice(0, 5)
-        .map(([move, prob]) => {
-          return { move, prob } // Replace this with SAN notation
-        })
+        .map(([move, prob]) => ({ move, prob }))
 
       recommendations.maia = maia
     }
 
-    if (stockfishEvaluations[controller.currentIndex]) {
-      const cp_vec = stockfishEvaluations[controller.currentIndex].cp_vec
-
+    if (moveEvaluation?.stockfish) {
+      const cp_vec = moveEvaluation.stockfish.cp_vec
       const stockfish = Object.entries(cp_vec)
         .slice(0, 5)
-        .map(([move, cp]) => {
-          return { move, cp }
-        })
+        .map(([move, cp]) => ({ move, cp }))
 
       recommendations.stockfish = stockfish
     }
@@ -354,18 +352,15 @@ export const useAnalysisController = (
   }, [controller.currentIndex, maiaEvaluations, stockfishEvaluations])
 
   const moveMap = useMemo(() => {
-    const maiaRaw = maiaEvaluations[controller.currentIndex]
-    const stockfishRaw = stockfishEvaluations[controller.currentIndex]
-
-    if (!maiaRaw || !stockfishRaw) {
+    if (!moveEvaluation?.maia || !moveEvaluation?.stockfish) {
       return
     }
 
     const maia = Object.fromEntries(
-      Object.entries(maiaRaw[currentMaiaModel].policy).slice(0, 3),
+      Object.entries(moveEvaluation.maia.policy).slice(0, 3),
     )
     const stockfish = Object.fromEntries(
-      Object.entries(stockfishRaw.cp_vec).slice(0, 3),
+      Object.entries(moveEvaluation.stockfish.cp_vec).slice(0, 3),
     )
 
     const moves = Array.from(
@@ -375,8 +370,8 @@ export const useAnalysisController = (
     const data = []
 
     for (const move of moves) {
-      const cp = Math.max(-4, stockfishRaw.cp_relative_vec[move])
-      const prob = maiaRaw[currentMaiaModel].policy[move] * 100
+      const cp = Math.max(-4, moveEvaluation.stockfish.cp_relative_vec[move])
+      const prob = moveEvaluation?.maia.policy[move] * 100
 
       data.push({
         move,
@@ -386,7 +381,7 @@ export const useAnalysisController = (
     }
 
     return data
-  }, [controller.currentIndex, maiaEvaluations, stockfishEvaluations])
+  }, [controller.currentIndex, moveEvaluation])
 
   const move = useMemo(() => {
     if (

diff --git a/src/pages/analysis/[...id].tsx b/src/pages/analysis/[...id].tsx
@@ -379,8 +379,8 @@ const Analysis: React.FC<Props> = ({
                     min={0}
                     max={800}
                     value={
-                      moveEvaluation
-                        ? 400 + moveEvaluation?.stockfish?.model_optimal_cp
+                      moveEvaluation?.stockfish
+                        ? 400 + moveEvaluation.stockfish.model_optimal_cp
                         : void 0
                     }
                     label="Stockfish Evaluation"