64 lines
3.7 KiB
Markdown
64 lines
3.7 KiB
Markdown
# 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
|