feat: added moves by rating graph and began ui changes

Author: kevinjosethomas

package-lock.json

@@ -31,6 +31,7 @@
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.2",
     "react-tooltip": "^5.28.0",
+    "recharts": "^2.15.0",
     "sass": "^1.47.0"
   },
   "devDependencies": {

package.json

@@ -15,8 +15,8 @@ export const HorizontalEvaluationBar: React.FC<Props> = ({
   width = Math.max(0, Math.min(100, width))
 
   return (
-    <div className="relative flex h-6 w-[75vh] max-w-[70vw] flex-col justify-center overflow-hidden rounded-sm bg-engine-3/30">
-      <p className="z-10 ml-2 whitespace-nowrap text-sm">{label}</p>
+    <div className="relative flex h-6 w-[60vh] max-w-[70vw] flex-col justify-center overflow-hidden rounded-sm bg-engine-3/30">
+      <p className="z-10 ml-2 whitespace-nowrap text-xs">{label}</p>
       <div
         className="absolute bottom-0 left-0 z-0 h-full w-full transform rounded-r-sm bg-engine-3 duration-300"
         style={{ width: `${width}%` }}

src/components/Analysis/HorizontalEvaluationBar.tsx

@@ -0,0 +1,103 @@
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from 'recharts'
+
+interface Props {
+  moves: { [key: string]: number }[] | undefined
+}
+
+export const MovesByRating: React.FC<Props> = ({ moves }: Props) => {
+  return (
+    <div className="col-span-2 flex h-full max-h-full flex-col rounded bg-background-1/60 pb-4">
+      <p className="p-4 text-xl text-white">Moves by Rating</p>
+      <div className="flex h-full w-full flex-col">
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart data={moves} margin={{ left: 20, right: 0 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#3C3C3C" />
+            <XAxis
+              dataKey="rating"
+              axisLine={false}
+              tick={{
+                fill: 'white',
+                fontSize: 14,
+              }}
+              tickMargin={6}
+              ticks={[1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900]}
+            />
+            <YAxis
+              yAxisId="left"
+              orientation="left"
+              axisLine={false}
+              domain={[0, 100]}
+              tick={{
+                fill: 'white',
+                fontSize: 14,
+              }}
+              label={{
+                value: 'Maia Probability',
+                angle: -90,
+                fill: '#ff0000',
+                position: 'insideLeft',
+                dy: 46,
+                offset: 4,
+                fontWeight: 600,
+                fontSize: 14,
+              }}
+              tickCount={4}
+              tickMargin={5}
+              tickLine={false}
+              tickFormatter={(value) => `${value}%`}
+            />
+            <YAxis
+              yAxisId="right"
+              orientation="right"
+              axisLine={false}
+              domain={[0, 100]}
+              tick={{
+                fill: 'white',
+                fontSize: 14,
+              }}
+              tickCount={4}
+              tickMargin={5}
+              tickLine={false}
+              tickFormatter={(value) => `${value}%`}
+            />
+            {moves &&
+              Object.keys(moves[0]).map((move, i) => {
+                if (move === 'rating') {
+                  return null
+                }
+                return (
+                  <Area
+                    key={i}
+                    yAxisId="left"
+                    dataKey={move}
+                    dot={{
+                      stroke: '#fff',
+                      strokeWidth: 1,
+                    }}
+                    stroke={'#fff'}
+                    fill={'#fff'}
+                    fillOpacity={0.1}
+                    strokeWidth={3}
+                  />
+                )
+              })}
+            <Legend
+              verticalAlign="top"
+              align="right"
+              wrapperStyle={{ top: -14, right: 20, fontSize: 14 }}
+              iconSize={0}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}

src/components/Analysis/MovesByRating.tsx

@@ -14,8 +14,8 @@ export const VerticalEvaluationBar: React.FC<Props> = ({
   const height = ((value ?? min - min) / (max - min)) * 100
 
   return (
-    <div className="relative flex h-[75vh] max-h-[70vw] w-6 flex-col justify-end overflow-hidden rounded-sm bg-human-3/30">
-      <p className="z-10 mb-2 -rotate-90 whitespace-nowrap text-sm">{label}</p>
+    <div className="relative flex h-[60vh] max-h-[70vw] w-6 flex-col justify-end overflow-hidden rounded-sm bg-human-3/30">
+      <p className="z-10 mb-3 -rotate-90 whitespace-nowrap text-xs">{label}</p>
       <div
         className="absolute bottom-0 left-0 z-0 h-full w-full transform rounded-t-sm bg-human-3 duration-300"
         style={{ height: `${height}%` }}

src/components/Analysis/VerticalEvaluationBar.tsx

@@ -6,3 +6,4 @@ export * from './AnalysisGameList'
 export * from './HorizontalEvaluationBar'
 export * from './PositionEvaluationContainer'
 export * from './VerticalEvaluationBar'
+export * from './MovesByRating'

src/components/Analysis/index.ts

@@ -60,7 +60,7 @@ export const MovesContainer: React.FC<Props> = ({
   )
 
   const container = (
-    <div className="red-scrollbar flex h-64 flex-col overflow-y-auto overflow-x-hidden whitespace-nowrap rounded-sm bg-background-1/60 md:h-full">
+    <div className="red-scrollbar flex h-64 flex-col overflow-y-auto overflow-x-hidden whitespace-nowrap rounded-sm bg-background-1/60 md:h-full md:w-full">
       <Tooltip id="check" />
       {moves.map(([white, black], index) => {
         const prevMoveIndex = index * 2

src/components/Board/MovesContainer.tsx

@@ -75,8 +75,6 @@ export const useAnalysisController = (
       })
     }
 
-    console.log(moveMap)
-
     return moveMap
   }, [controller.currentIndex, game.maiaEvaluations, maiaModels])
 

src/hooks/useAnalysisController/useAnalysisController.ts

@@ -229,6 +229,59 @@ export const useClientAnalysisController = (
     }
   }, [moveEvaluation])
 
+  const movesByRating = useMemo(() => {
+    if (
+      !maiaEvaluations[controller.currentIndex] ||
+      !stockfishEvaluations[controller.currentIndex]
+    )
+      return
+
+    const maia = maiaEvaluations[controller.currentIndex]
+    const stockfish = stockfishEvaluations[controller.currentIndex]
+
+    const candidates: string[][] = []
+
+    // Get top 3 Maia moves from selected rating level
+    for (const move of Object.keys(maia[currentMaiaModel].policy).slice(0, 3)) {
+      if (candidates.find((c) => c[0] === move)) continue
+      candidates.push([move, move])
+    }
+
+    // Get top 3 Stockfish moves
+    for (const move of Object.keys(stockfish.cp_vec).slice(0, 3)) {
+      if (candidates.find((c) => c[0] === move)) continue
+      candidates.push([move, move])
+    }
+
+    // Get top Maia move from each rating level
+    for (const rating of MAIA_MODELS) {
+      const move = Object.keys(maia[rating].policy)[0]
+      if (candidates.find((c) => c[0] === move)) continue
+      candidates.push([move, move])
+    }
+
+    const data = []
+    for (const rating of MAIA_MODELS) {
+      const entry: { [key: string]: number } = {
+        rating: parseInt(rating.slice(-4)),
+      }
+
+      for (const move of candidates) {
+        const probability = maia[rating].policy[move[0]] * 100
+        entry[move[1]] = probability
+      }
+
+      data.push(entry)
+    }
+
+    return data
+  }, [
+    controller.currentIndex,
+    maiaEvaluations,
+    stockfishEvaluations,
+    currentMaiaModel,
+  ])
+
   const move = useMemo(() => {
     if (
       currentMove &&
@@ -253,6 +306,7 @@ export const useClientAnalysisController = (
     currentMove,
     setCurrentMove,
     moveEvaluation,
+    movesByRating,
     blunderMeter,
     stockfishEvaluations,
     maiaEvaluations,