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,63 @@
+# Constellation Hover Focus Mode - Scratchpad
+
+## Understanding
+
+The feature requires a **global dimming** effect when hovering constellation nodes or skill pills. Currently:
+
+1. **Constellation internal highlighting** already works well via `useConstellationHighlight` - dims non-connected nodes to 0.15 opacity within the SVG.
+2. **Skill pill hover** (`RepeatMedicationsSubsection`) calls `onHighlight(skill.id)` → flows to `setHighlightedNodeId` → passed to `CareerConstellation` as prop → triggers `applyGraphHighlight(skillId)`.
+3. **Timeline item hover** calls `onHighlight(entity.id)` → same flow → highlights that role in constellation.
+4. **Constellation node hover** calls `onNodeHover(roleId)` → `setHighlightedRoleId` → highlights matching timeline item via `isHighlightedFromGraph` prop.
+
+### What's Missing
+
+The **cross-component dimming** doesn't exist yet:
+- When hovering a constellation node: timeline items and skill pills don't dim (only the matching timeline item highlights)
+- When hovering a skill pill: the constellation highlights but timeline items and other skill pills don't dim
+- No global "focus mode" overlay or coordinated dimming across all three areas
+
+### Architecture Decision
+
+**Approach: CSS class-based global dimming with React context**
+
+Rather than a heavy context, I'll use the existing `DashboardLayout` state pattern:
+1. Add a `globalFocusId` state to `DashboardLayout` (the orchestrator)
+2. Add a `globalFocusType` to know if it's a skill or role focus
+3. Pass this down to timeline, skill pills, and constellation
+4. Each component applies a dimming class/style when not related to the focused ID
+5. Use the existing `connectedMap` data (already built in constellation) to resolve relationships
+
+**Key insight**: When a skill is focused, the "related" timeline items are those whose `entity.skills` array contains that skill ID. When a role is focused, the "related" skills are those in that role's `entity.skills`. This data is already in `timelineEntities`.
+
+**Dimming approach**: CSS transitions on opacity. Apply `opacity: 0.25` to non-related elements, keep related ones at full opacity. Use `transition: opacity 0.15s` for smooth enter/exit.
+
+### Implementation (COMPLETED)
+
+All implemented in a single commit (`47b52b5`):
+
+1. **DashboardLayout** — Added `globalFocusId` state, lookup maps (`skillToRoles`, `roleToSkills`, `nodeTypeById`), and computed `focusRelatedIds: Set<string> | null`. Both `handleNodeHighlight` and `handleNodeHover` now set `globalFocusId`.
+
+2. **useConstellationInteraction** — Removed `d.type !== 'skill'` guard on `onNodeHover` so skill node hovers also propagate to parent for global focus.
+
+3. **TimelineInterventionsSubsection** — Receives `focusRelatedIds`, computes `isDimmedByFocus` per entity, passes to `ExpandableCardShell`.
+
+4. **ExpandableCardShell** — New `isDimmedByFocus` prop applies `opacity: 0.25` with 150ms transition.
+
+5. **RepeatMedicationsSubsection** — `focusRelatedIds` flows through `CategorySection` → `SkillRow`, each skill row dims if not in related set.
+
+6. **LastConsultationCard** — Dims when `focusRelatedIds` is active and consultation.id not in set.
+
+7. **CareerConstellation** — New `globalFocusActive` prop + SVG class `constellation-focus-active` triggers CSS axis dimming.
+
+8. **index.css** — CSS rules dim `.axis-line`, `.year-tick`, `.year-label` to 0.25 opacity when `constellation-focus-active` class is present. Reduced-motion override removes transitions.
+
+### Verification
+
+- `npm run typecheck` — PASS
+- `npm run lint` — PASS (5 pre-existing warnings only)
+- `npm run build` — PASS
+
+### Remaining
+
+- Playwright MCP visual verification (reviewer task)
+- Manual QA: hover each source (constellation node, skill pill, timeline item), verify dimming/restore