feat: add tooltip to move list + remove move recommendations component

src/components/Analysis/Highlight.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from 'react-tooltip'
 import { MovesByRating } from './MovesByRating'
 import { MaiaEvaluation, StockfishEvaluation, ColorSanMapping } from 'src/types'
 
@@ -26,6 +27,59 @@ export const Highlight: React.FC<Props> = ({
   recommendations,
   currentMaiaModel,
 }: Props) => {
+  const findMatchingMove = (move: string, source: 'maia' | 'stockfish') => {
+    if (source === 'maia') {
+      return recommendations.stockfish?.find((rec) => rec.move === move)
+    } else {
+      return recommendations.maia?.find((rec) => rec.move === move)
+    }
+  }
+
+  const getTooltipContent = (
+    move: string,
+    source: 'maia' | 'stockfish',
+    prob?: number,
+    cp?: number,
+  ) => {
+    const matchingMove = findMatchingMove(move, source)
+    const maiaProb =
+      source === 'maia' ? prob : (matchingMove as { prob: number })?.prob
+    const stockfishCp =
+      source === 'stockfish' ? cp : (matchingMove as { cp: number })?.cp
+
+    return (
+      <div className="flex flex-col gap-1 overflow-hidden rounded border border-background-2 bg-backdrop">
+        <div className="flex items-center bg-backdrop px-3 py-1.5">
+          <span
+            style={{
+              color: colorSanMapping[move]?.color ?? '#fff',
+            }}
+            className="font-medium"
+          >
+            {colorSanMapping[move]?.san ?? move}
+          </span>
+        </div>
+        <div className="flex flex-col items-start justify-start gap-1 bg-background-1/80 px-3 py-1.5 text-sm">
+          {maiaProb !== undefined && (
+            <div className="flex w-full items-center justify-between gap-2 font-mono">
+              <span className="text-human-3">Maia:</span>
+              <span>{(Math.round(maiaProb * 1000) / 10).toFixed(1)}%</span>
+            </div>
+          )}
+          {stockfishCp !== undefined && (
+            <div className="flex w-full items-center justify-between gap-2 font-mono">
+              <span className="text-engine-3">Stockfish:</span>
+              <span>
+                {stockfishCp > 0 ? '+' : ''}
+                {(stockfishCp / 100).toFixed(2)}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="flex h-full w-full flex-col items-start overflow-hidden rounded border-[0.5px] border-white/40 bg-background-1 md:flex-row">
       <div className="flex h-full w-full flex-col border-b-[0.5px] border-white/40 md:w-auto md:min-w-[40%] md:border-b-0 md:border-r-[0.5px]">
@@ -58,8 +112,19 @@ export const Highlight: React.FC<Props> = ({
           </div>
         </div>
         <div className="grid grid-cols-2">
+          <Tooltip
+            place="bottom"
+            id="move-tooltip"
+            noArrow={true}
+            className="!z-50 !bg-none !p-0 !opacity-100"
+            render={({ content }) => {
+              if (!content) return null
+              const { move, source, prob, cp } = JSON.parse(content)
+              return getTooltipContent(move, source, prob, cp)
+            }}
+          />
           <div className="grid grid-rows-2 items-center justify-center p-3">
-            {recommendations.maia?.map(({ move, prob }, index) => {
+            {recommendations.maia?.slice(0, 6).map(({ move, prob }, index) => {
               return (
                 <button
                   key={index}
@@ -70,6 +135,12 @@ export const Highlight: React.FC<Props> = ({
                   onMouseLeave={() => hover()}
                   onMouseEnter={() => hover(move)}
                   onClick={() => makeMove(move)}
+                  data-tooltip-id="move-tooltip"
+                  data-tooltip-content={JSON.stringify({
+                    move,
+                    source: 'maia',
+                    prob,
+                  })}
                 >
                   <p className="text-right font-mono text-sm">
                     {(Math.round(prob * 1000) / 10).toFixed(1)}%
@@ -82,28 +153,36 @@ export const Highlight: React.FC<Props> = ({
             })}
           </div>
           <div className="grid grid-rows-2 flex-col items-center justify-center p-3">
-            {recommendations.stockfish?.map(({ move, cp }, index) => {
-              return (
-                <button
-                  key={index}
-                  className="grid cursor-default grid-cols-2 gap-3 hover:underline"
-                  style={{
-                    color: colorSanMapping[move]?.color ?? '#fff',
-                  }}
-                  onMouseLeave={() => hover()}
-                  onMouseEnter={() => hover(move)}
-                  onClick={() => makeMove(move)}
-                >
-                  <p className="w-[42px] text-right font-mono text-sm">
-                    {cp > 0 ? '+' : null}
-                    {`${(cp / 100).toFixed(2)}`}
-                  </p>
-                  <p className="text-left font-mono text-sm">
-                    {colorSanMapping[move]?.san ?? move}
-                  </p>
-                </button>
-              )
-            })}
+            {recommendations.stockfish
+              ?.slice(0, 6)
+              .map(({ move, cp }, index) => {
+                return (
+                  <button
+                    key={index}
+                    className="grid cursor-default grid-cols-2 gap-3 hover:underline"
+                    style={{
+                      color: colorSanMapping[move]?.color ?? '#fff',
+                    }}
+                    onMouseLeave={() => hover()}
+                    onMouseEnter={() => hover(move)}
+                    onClick={() => makeMove(move)}
+                    data-tooltip-id="move-tooltip"
+                    data-tooltip-content={JSON.stringify({
+                      move,
+                      source: 'stockfish',
+                      cp,
+                    })}
+                  >
+                    <p className="w-[42px] text-right font-mono text-sm">
+                      {cp > 0 ? '+' : null}
+                      {`${(cp / 100).toFixed(2)}`}
+                    </p>
+                    <p className="text-left font-mono text-sm">
+                      {colorSanMapping[move]?.san ?? move}
+                    </p>
+                  </button>
+                )
+              })}
           </div>
         </div>
       </div>

src/components/Analysis/MovesByRating.tsx

@@ -43,7 +43,7 @@ export const MovesByRating: React.FC<Props> = ({
             axisLine={false}
             tick={{
               fill: 'white',
-              fontSize: 11, // Increased font size here
+              fontSize: 11,
             }}
             tickMargin={4}
             ticks={[1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900]}
@@ -55,15 +55,15 @@ export const MovesByRating: React.FC<Props> = ({
             domain={domain}
             tick={{
               fill: 'white',
-              fontSize: 11, // Increased font size here
+              fontSize: 11,
             }}
             label={{
               value: 'Maia Probability',
               angle: -90,
               fill: '#FE7F6D',
               position: 'insideLeft',
               dy: 46,
-              offset: 15, // Changed offset here
+              offset: 15,
               fontWeight: 600,
               fontSize: 14,
             }}

src/components/Analysis/index.ts

@@ -11,7 +11,6 @@ export * from './HorizontalEvaluationBar'
 export * from './PositionEvaluationContainer'
 export * from './VerticalEvaluationBar'
 export * from './ConfigurableScreens'
-export * from './MoveRecommendations'
 export * from './MovesByRating'
 export * from './Tournament'
 export * from './BlunderMeter'

src/hooks/useAnalysisController/useAnalysisController.ts

@@ -348,18 +348,20 @@ export const useAnalysisController = (game: AnalyzedGame) => {
 
     if (moveEvaluation?.maia) {
       const policy = moveEvaluation.maia.policy
-      const maia = Object.entries(policy)
-        .slice(0, 6)
-        .map(([move, prob]) => ({ move, prob }))
+      const maia = Object.entries(policy).map(([move, prob]) => ({
+        move,
+        prob,
+      }))
 
       recommendations.maia = maia
     }
 
     if (moveEvaluation?.stockfish) {
       const cp_vec = moveEvaluation.stockfish.cp_vec
-      const stockfish = Object.entries(cp_vec)
-        .slice(0, 6)
-        .map(([move, cp]) => ({ move, cp }))
+      const stockfish = Object.entries(cp_vec).map(([move, cp]) => ({
+        move,
+        cp,
+      }))
 
       recommendations.stockfish = stockfish
     }