1+ import { useEffect , useRef } from 'react'
12import { motion , type MotionValue } from 'framer-motion'
23import type { ColorSanMapping , BlunderMeterResult } from 'src/types'
34
@@ -350,6 +351,21 @@ export const AnalysisCompactBlunderMeter: React.FC<
350351 variant = 'mobile' ,
351352} ) => {
352353 const isDesktop = variant === 'desktop'
354+ const sanLabelCacheRef = useRef < Record < string , string > > ( { } )
355+
356+ useEffect ( ( ) => {
357+ if ( ! colorSanMapping ) return
358+
359+ for ( const [ move , entry ] of Object . entries ( colorSanMapping ) ) {
360+ if ( entry ?. san ) {
361+ sanLabelCacheRef . current [ move ] = entry . san
362+ }
363+ }
364+ } , [ colorSanMapping ] )
365+
366+ const getDisplayMoveLabel = ( move : string ) =>
367+ colorSanMapping ?. [ move ] ?. san ?? sanLabelCacheRef . current [ move ] ?? '...'
368+
353369 const getTopCategoryMoves = (
354370 moves : { move : string ; probability : number } [ ] ,
355371 ) => {
@@ -360,7 +376,7 @@ export const AnalysisCompactBlunderMeter: React.FC<
360376 . map ( ( entry ) => ( {
361377 move : entry . move ,
362378 probability : Math . round ( entry . probability ) ,
363- label : colorSanMapping ?. [ entry . move ] ?. san || entry . move ,
379+ label : getDisplayMoveLabel ( entry . move ) ,
364380 } ) )
365381
366382 if ( ! playedMove || topMoves . some ( ( entry ) => entry . move === playedMove ) ) {
@@ -377,8 +393,7 @@ export const AnalysisCompactBlunderMeter: React.FC<
377393 {
378394 move : playedMoveEntry . move ,
379395 probability : Math . round ( playedMoveEntry . probability ) ,
380- label :
381- colorSanMapping ?. [ playedMoveEntry . move ] ?. san || playedMoveEntry . move ,
396+ label : getDisplayMoveLabel ( playedMoveEntry . move ) ,
382397 } ,
383398 ]
384399 }
0 commit comments