73 lines
3.0 KiB
Markdown
73 lines
3.0 KiB
Markdown
# Task: Constellation Hover Focus Mode With Global Dimming
|
|
|
|
Implement a focused hover mode so that when a user hovers a skill or node in the constellation area, non-related UI darkens and only the relevant relationship remains emphasized.
|
|
|
|
## Requirements
|
|
|
|
- Support hover-triggered focus mode from:
|
|
- constellation node hover
|
|
- skill pill hover
|
|
- In focus mode, darken non-related UI across the page, including:
|
|
- graph axis/background
|
|
- unrelated graph nodes/labels/links
|
|
- unrelated timeline and dashboard elements
|
|
- Keep the following elements visually emphasized (not darkened):
|
|
- hovered skill pill
|
|
- hovered/active constellation node
|
|
- connection lines between related node/skill items
|
|
- timeline series item related to that skill/node
|
|
- On hover exit, restore default appearance cleanly with no stuck state.
|
|
- Preserve existing click behavior, keyboard behavior, and detail panel opening logic.
|
|
- Respect reduced-motion preferences and existing accessibility patterns.
|
|
|
|
## Likely Files To Update
|
|
|
|
- `src/components/DashboardLayout.tsx`
|
|
- `src/hooks/useConstellationInteraction.ts`
|
|
- `src/hooks/useConstellationHighlight.ts`
|
|
- `src/components/TimelineInterventionsSubsection.tsx`
|
|
- `src/components/RepeatMedicationsSubsection.tsx`
|
|
- `src/components/ExpandableCardShell.tsx`
|
|
- `src/index.css`
|
|
|
|
Update additional files only if necessary.
|
|
|
|
## Success Criteria
|
|
|
|
All of the following must be true:
|
|
|
|
- [ ] Hovering a constellation node enters focus mode with global dimming.
|
|
- [ ] Hovering a skill pill enters focus mode with global dimming.
|
|
- [ ] In focus mode, only the relevant node + relationship links + related timeline series item + active skill pill remain visually highlighted.
|
|
- [ ] Graph axis/background visibly darken during focus mode.
|
|
- [ ] Focus mode exits correctly on mouse leave with no lingering darkened state.
|
|
- [ ] Existing interactions (role click, skill click, panel open, timeline expand/collapse) still work.
|
|
- [ ] `npm run lint` passes.
|
|
- [ ] `npm run typecheck` passes.
|
|
- [ ] `npm run build` passes.
|
|
- [ ] Playwright MCP evidence confirms behavior for both node-hover and skill-pill-hover scenarios.
|
|
|
|
## Playwright MCP Verification
|
|
|
|
Reviewer must validate with Playwright MCP and record evidence in `.ralph/review.md`:
|
|
|
|
- Run or confirm dev server at `http://localhost:5173`
|
|
- Capture baseline screenshot before hover
|
|
- Hover a constellation node and capture screenshot
|
|
- Hover a skill pill and capture screenshot
|
|
- In both hover screenshots, verify:
|
|
- unrelated areas are darkened
|
|
- related graph + timeline + skill elements remain emphasized
|
|
|
|
## Constraints
|
|
|
|
- Do not add new dependencies.
|
|
- Follow existing TypeScript/React conventions and current styling system.
|
|
- Keep changes focused to this feature only.
|
|
- If a blocker repeats with identical evidence across 3 cycles, escalate in `.ralph/review.md` instead of forcing completion.
|
|
|
|
## Status
|
|
|
|
Track progress in `.ralph/plan.md`, `.ralph/build.md`, and `.ralph/review.md`.
|
|
When all success criteria are met, print `LOOP_COMPLETE`.
|