Fix hover effect on chart causing transition/animation to break

2026-02-17 15:14:10 +00:00
parent 47b52b5a93
commit 0a337b41c2
28 changed files with 460 additions and 186 deletions
@@ -0,0 +1,156 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+
+interface PhoneCaptchaProps {
+  phone: string
+}
+
+function generateChallenge() {
+  const a = Math.floor(Math.random() * 10) + 2
+  const b = Math.floor(Math.random() * 8) + 1
+  return { question: `${a} + ${b}`, answer: a + b }
+}
+
+export function PhoneCaptcha({ phone }: PhoneCaptchaProps) {
+  const [state, setState] = useState<'masked' | 'challenge' | 'revealed'>('masked')
+  const [challenge, setChallenge] = useState(generateChallenge)
+  const [input, setInput] = useState('')
+  const [error, setError] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const maskedPhone = phone.slice(0, 2) + '\u2022\u2022\u2022 \u2022\u2022\u2022\u2022\u2022\u2022'
+
+  useEffect(() => {
+    if (state === 'challenge') {
+      requestAnimationFrame(() => inputRef.current?.focus())
+    }
+  }, [state])
+
+  const handleRevealClick = useCallback(() => {
+    setChallenge(generateChallenge())
+    setInput('')
+    setError(false)
+    setState('challenge')
+  }, [])
+
+  const handleSubmit = useCallback(() => {
+    const parsed = parseInt(input.trim(), 10)
+    if (parsed === challenge.answer) {
+      setState('revealed')
+    } else {
+      setError(true)
+      setTimeout(() => {
+        setError(false)
+        setChallenge(generateChallenge())
+        setInput('')
+      }, 600)
+    }
+  }, [input, challenge.answer])
+
+  const handleDismiss = useCallback(() => {
+    setState('masked')
+    setInput('')
+    setError(false)
+  }, [])
+
+  if (state === 'revealed') {
+    return (
+      <a
+        href={`tel:${phone}`}
+        style={{
+          color: 'var(--accent)',
+          fontWeight: 500,
+          textDecoration: 'none',
+          textAlign: 'right',
+        }}
+        onMouseEnter={(e) => (e.currentTarget.style.textDecoration = 'underline')}
+        onMouseLeave={(e) => (e.currentTarget.style.textDecoration = 'none')}
+      >
+        {phone.replace(/(\d{5})(\d{6})/, '$1 $2')}
+      </a>
+    )
+  }
+
+  if (state === 'challenge') {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '4px' }}>
+        <span
+          style={{
+            fontSize: '11px',
+            color: error ? 'var(--alert, #e53935)' : 'var(--text-tertiary)',
+            fontFamily: 'Geist Mono, monospace',
+            transition: 'color 150ms',
+          }}
+        >
+          {error ? 'Try again' : `${challenge.question} = ?`}
+        </span>
+        <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+          <input
+            ref={inputRef}
+            type="text"
+            inputMode="numeric"
+            autoComplete="off"
+            value={input}
+            onChange={(e) => { setInput(e.target.value); setError(false) }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleSubmit()
+              if (e.key === 'Escape') handleDismiss()
+            }}
+            style={{
+              width: '36px',
+              padding: '3px 4px',
+              fontSize: '12px',
+              fontFamily: 'Geist Mono, monospace',
+              border: `1px solid ${error ? 'var(--alert, #e53935)' : 'var(--border)'}`,
+              borderRadius: '4px',
+              background: 'var(--surface)',
+              color: 'var(--text-primary)',
+              textAlign: 'center',
+              outline: 'none',
+              transition: 'border-color 150ms',
+            }}
+            aria-label={`Solve: ${challenge.question}`}
+          />
+          <button
+            type="button"
+            onClick={handleSubmit}
+            style={{
+              padding: '3px 8px',
+              fontSize: '11px',
+              fontWeight: 600,
+              border: '1px solid var(--accent-border)',
+              borderRadius: '4px',
+              background: 'var(--accent-light)',
+              color: 'var(--accent)',
+              cursor: 'pointer',
+              lineHeight: 1,
+            }}
+          >
+            OK
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleRevealClick}
+      style={{
+        color: 'var(--text-secondary)',
+        fontWeight: 500,
+        textAlign: 'right',
+        background: 'none',
+        border: 'none',
+        padding: 0,
+        cursor: 'pointer',
+        fontSize: 'inherit',
+        fontFamily: 'inherit',
+      }}
+      aria-label="Reveal phone number"
+      title="Click to verify and reveal"
+    >
+      {maskedPhone}
+    </button>
+  )
+}
@@ -11,7 +11,8 @@ import {
  Wrench,
  X,
 } from 'lucide-react'
-import cvmisLogo from '../../cvmis-logo.svg'
+import { CvmisLogo } from './CvmisLogo'
+import { PhoneCaptcha } from './PhoneCaptcha'
 import { patient } from '@/data/patient'
 import { tags } from '@/data/tags'
 import { alerts } from '@/data/alerts'
@@ -266,22 +267,14 @@ export default function Sidebar({ activeSection, onNavigate, onSearchClick }: Si
            <div
              style={{
                display: 'flex',
-                alignItems: 'center',
+                alignItems: 'flex-end',
                justifyContent: 'flex-start',
                gap: '6px',
                marginBottom: '4px',
                width: '100%',
              }}
            >
-              <img
-                src={cvmisLogo}
-                alt="CVMIS"
-                style={{
-                  width: '25%',
-                  height: 'auto',
-                  display: 'block',
-                }}
-              />
+              <CvmisLogo cssHeight="48px" />
                          <button
              type="button"
              onClick={onSearchClick}
@@ -299,7 +292,6 @@ export default function Sidebar({ activeSection, onNavigate, onSearchClick }: Si
                gap: '8px',
                padding: '0 10px',
                cursor: 'pointer',
-                marginBottom: '8px',
              }}
            >
              <Search size={16} style={{ color: 'var(--text-tertiary)', flexShrink: 0 }} aria-hidden="true" />
@@ -440,19 +432,7 @@ export default function Sidebar({ activeSection, onNavigate, onSearchClick }: Si
                }}
              >
                <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>{sidebarCopy.phoneLabel}</span>
-                <a
-                  href={`tel:${patient.phone}`}
-                  style={{
-                    color: 'var(--accent)',
-                    fontWeight: 500,
-                    textDecoration: 'none',
-                    textAlign: 'right',
-                  }}
-                  onMouseEnter={(e) => (e.currentTarget.style.textDecoration = 'underline')}
-                  onMouseLeave={(e) => (e.currentTarget.style.textDecoration = 'none')}
-                >
-                  {patient.phone.replace(/(\d{5})(\d{6})/, '$1 $2')}
-                </a>
+                <PhoneCaptcha phone={patient.phone} />
              </div>

              <div
@@ -1,11 +1,14 @@
 import { useMemo, useState, useCallback } from 'react'
-import { ChevronRight } from 'lucide-react'
+import { ChevronRight, ChevronDown, History } from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
 import { ExpandableCardShell } from './ExpandableCardShell'
 import { useDetailPanel } from '@/contexts/DetailPanelContext'
 import { timelineEntities, timelineConsultations } from '@/data/timeline'
 import { getExperienceEducationUICopy } from '@/lib/profile-content'
 import type { TimelineEntity } from '@/types/pmr'
-import { hexToRgba } from '@/lib/utils'
+import { hexToRgba, motionSafeTransition } from '@/lib/utils'
+
+const VISIBLE_COUNT = 4

 interface TimelineInterventionItemProps {
  entity: TimelineEntity
@@ -262,8 +265,12 @@ interface TimelineInterventionsSubsectionProps {

 export function TimelineInterventionsSubsection({ onNodeHighlight, highlightedRoleId, focusRelatedIds }: TimelineInterventionsSubsectionProps) {
  const [expandedId, setExpandedId] = useState<string | null>(null)
+  const [historicalOpen, setHistoricalOpen] = useState(false)
  const { openPanel } = useDetailPanel()

+  const visibleEntities = useMemo(() => timelineEntities.slice(0, VISIBLE_COUNT), [])
+  const historicalEntities = useMemo(() => timelineEntities.slice(VISIBLE_COUNT), [])
+
  const consultationsById = useMemo(
    () => new Map(timelineConsultations.map((consultation) => [consultation.id, consultation])),
    [],
@@ -284,9 +291,13 @@ export function TimelineInterventionsSubsection({ onNodeHighlight, highlightedRo
    openPanel({ type: 'career-role', consultation })
  }, [consultationsById, openPanel])

+  const historicalHasAnyFocusRelevance = focusRelatedIds !== null && focusRelatedIds !== undefined &&
+    historicalEntities.some((e) => focusRelatedIds.has(e.id))
+  const historicalDimmed = focusRelatedIds !== null && focusRelatedIds !== undefined && !historicalHasAnyFocusRelevance
+
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-      {timelineEntities.map((entity) => (
+      {visibleEntities.map((entity) => (
        <TimelineInterventionItem
          key={entity.id}
          entity={entity}
@@ -299,6 +310,97 @@ export function TimelineInterventionsSubsection({ onNodeHighlight, highlightedRo
          onHighlight={onNodeHighlight}
        />
      ))}
+
+      {historicalEntities.length > 0 && (
+        <div
+          style={{
+            opacity: historicalDimmed ? 0.25 : 1,
+            transition: 'opacity 150ms ease-out',
+          }}
+        >
+          <div
+            role="button"
+            tabIndex={0}
+            onClick={() => setHistoricalOpen((prev) => !prev)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                setHistoricalOpen((prev) => !prev)
+              }
+            }}
+            aria-expanded={historicalOpen}
+            aria-label={`${historicalOpen ? 'Hide' : 'Show'} ${historicalEntities.length} historical entries`}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              padding: '6px 10px',
+              background: 'var(--bg-dashboard)',
+              borderRadius: 'var(--radius-sm)',
+              border: '1px solid var(--border-light)',
+              cursor: 'pointer',
+              transition: 'border-color 0.15s, box-shadow 0.15s',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.borderColor = 'rgba(0, 137, 123, 0.2)'
+              e.currentTarget.style.boxShadow = 'var(--shadow-md)'
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.borderColor = 'var(--border-light)'
+              e.currentTarget.style.boxShadow = 'none'
+            }}
+          >
+            <History size={13} style={{ color: 'var(--text-tertiary)', flexShrink: 0 }} />
+            <span
+              style={{
+                fontSize: '12px',
+                color: 'var(--text-secondary)',
+                fontFamily: 'var(--font-geist-mono)',
+                flex: 1,
+              }}
+            >
+              {historicalOpen ? 'Hide' : 'View'} historical entries ({historicalEntities.length})
+            </span>
+            <ChevronDown
+              size={13}
+              style={{
+                color: 'var(--text-tertiary)',
+                flexShrink: 0,
+                transform: historicalOpen ? 'rotate(180deg)' : 'none',
+                transition: 'transform 0.15s ease-out',
+              }}
+            />
+          </div>
+
+          <AnimatePresence>
+            {historicalOpen && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: 'auto', opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={motionSafeTransition(0.25)}
+                style={{ overflow: 'hidden' }}
+              >
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', paddingTop: '10px' }}>
+                  {historicalEntities.map((entity) => (
+                    <TimelineInterventionItem
+                      key={entity.id}
+                      entity={entity}
+                      isExpanded={expandedId === entity.id}
+                      isHighlightedFromGraph={highlightedRoleId === entity.id}
+                      isDimmedByFocus={focusRelatedIds !== null && focusRelatedIds !== undefined && !focusRelatedIds.has(entity.id)}
+                      isEducationAnchor={entity.id === firstEducationId}
+                      onToggle={() => handleToggle(entity.id)}
+                      onViewFull={() => handleViewFull(entity)}
+                      onHighlight={onNodeHighlight}
+                    />
+                  ))}
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      )}
    </div>
  )
 }
@@ -219,8 +219,6 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
    resolveGraphFallback,
    resolveRoleFallback,
    dimensionsTrigger: dimensions.width + dimensions.height,
-    pauseForInteraction: animation.pauseForInteraction,
-    resumeAfterInteraction: animation.resumeAfterInteraction,
  })

  // External highlight sync
@@ -319,6 +317,7 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
        {!prefersReducedMotion && (
          <PlayPauseButton
            isPlaying={animation.isPlaying}
+            isCompleted={animation.isCompleted}
            onToggle={animation.togglePlayPause}
            isMobile={isMobile}
            visible={chartInView}
@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'

 interface PlayPauseButtonProps {
  isPlaying: boolean
+  isCompleted?: boolean
  onToggle: () => void
  isMobile: boolean
  visible?: boolean
@@ -9,7 +10,7 @@ interface PlayPauseButtonProps {
 }

 export const PlayPauseButton: React.FC<PlayPauseButtonProps> = ({
-  isPlaying, onToggle, isMobile, visible = true, containerRef,
+  isPlaying, isCompleted = false, onToggle, isMobile, visible = true, containerRef,
 }) => {
  const vw = typeof window !== 'undefined' ? window.innerWidth : 1024
  const scale = vw >= 1440 ? 1.75 : vw >= 1280 ? 1.5 : vw >= 1080 ? 1.25 : 1
@@ -62,7 +63,7 @@ export const PlayPauseButton: React.FC<PlayPauseButtonProps> = ({
    <button
      ref={btnRef}
      onClick={onToggle}
-      aria-label={isPlaying ? 'Pause animation' : 'Play animation'}
+      aria-label={isCompleted ? 'Replay animation' : isPlaying ? 'Pause animation' : 'Play animation'}
      style={{
        position: 'absolute',
        left: offset,
@@ -87,7 +88,11 @@ export const PlayPauseButton: React.FC<PlayPauseButtonProps> = ({
      onMouseEnter={e => { if (showButton) e.currentTarget.style.opacity = '1' }}
      onMouseLeave={e => { if (showButton) e.currentTarget.style.opacity = '0.85' }}
    >
-      {isPlaying ? (
+      {isCompleted ? (
+        <svg width={Math.round(14 * scale)} height={Math.round(14 * scale)} viewBox="0 0 76.398 76.398" fill="var(--text-secondary)">
+          <path d="M58.828,16.208l-3.686,4.735c7.944,6.182,11.908,16.191,10.345,26.123C63.121,62.112,48.954,72.432,33.908,70.06C18.863,67.69,8.547,53.522,10.912,38.477c1.146-7.289,5.063-13.694,11.028-18.037c5.207-3.79,11.433-5.613,17.776-5.252l-5.187,5.442l3.848,3.671l8.188-8.596l0.002,0.003l3.668-3.852L46.39,8.188l-0.002,0.001L37.795,0l-3.671,3.852l5.6,5.334c-7.613-0.36-15.065,1.853-21.316,6.403c-7.26,5.286-12.027,13.083-13.423,21.956c-2.879,18.313,9.676,35.558,27.989,38.442c1.763,0.277,3.514,0.411,5.245,0.411c16.254-0.001,30.591-11.85,33.195-28.4C73.317,35.911,68.494,23.73,58.828,16.208z" />
+        </svg>
+      ) : isPlaying ? (
        <svg width={Math.round(14 * scale)} height={Math.round(14 * scale)} viewBox="0 0 14 14" fill="var(--text-secondary)">
          <rect x="2" y="1" width="4" height="12" rx="1" />
          <rect x="8" y="1" width="4" height="12" rx="1" />
@@ -22,6 +22,8 @@ export const LINK_BASE_WIDTH = 0.7
 export const LINK_STRENGTH_WIDTH_FACTOR = 0
 export const LINK_BASE_OPACITY = 0
 export const LINK_STRENGTH_OPACITY_FACTOR = 0
+export const LINK_REST_OPACITY = 0.12
+export const LINK_REST_STRENGTH_FACTOR = 0.08
 export const LINK_HIGHLIGHT_BASE_WIDTH = 1
 export const LINK_HIGHLIGHT_STRENGTH_WIDTH_FACTOR = 2
 export const LINK_BEZIER_VERTICAL_OFFSET = 0.15
@@ -66,7 +68,7 @@ export const ANIM_STEP_GAP_MS = 1000
 export const ANIM_HOLD_MS = 15000
 export const ANIM_RESET_MS = 800
 export const ANIM_RESTART_DELAY_MS = 400
-export const ANIM_INTERACTION_RESUME_MS = 800
+
 export const ANIM_SETTLE_ALPHA = 0.05
 export const ANIM_MONTH_STEP_MS = 80

@@ -40,7 +40,7 @@ export interface ConstellationCallbacks {
  onNodeHover?: (id: string | null) => void
 }

-export type AnimationState = 'IDLE' | 'PLAYING' | 'PAUSED' | 'HOLDING' | 'RESETTING'
+export type AnimationState = 'IDLE' | 'PLAYING' | 'PAUSED' | 'HOLDING' | 'RESETTING' | 'COMPLETED'

 export interface AnimationStep {
  entityId: string