132 lines
7.2 KiB
Markdown
132 lines
7.2 KiB
Markdown
# Task: Career Constellation Chart & Layout Polish
|
|
|
|
Visual polish and layout adjustments to the career constellation chart, sidebar, and repeat medications section. 12 discrete changes across 10 files.
|
|
|
|
## Requirements
|
|
|
|
### 1. Reduce link opacity (`src/components/constellation/constants.ts`)
|
|
- Lower `LINK_BASE_OPACITY` from `0.08` → `0.04`
|
|
- Lower `LINK_STRENGTH_OPACITY_FACTOR` from `0.12` → `0.06`
|
|
- Makes skill connection lines subtler so job pills are visually clearer
|
|
|
|
### 2. White background on hovered job pill (`src/hooks/useConstellationHighlight.ts`)
|
|
- When a role/education node is the `activeNodeId`, override its `.node-circle` fill to `#FFFFFF` with `fill-opacity: 1`
|
|
- Currently uses a gradient fill with `fill-opacity: 0.25` — make it solid white, fully opaque
|
|
|
|
### 3. Move legend to top of chart + increase font size (`src/components/constellation/ConstellationLegend.tsx`)
|
|
- Position legend as absolutely-positioned overlay at the **top** of the chart container (not below the SVG)
|
|
- Increase font size from `10px` to `12px` to match work node label text size
|
|
- Separate the "Hover to explore connections" text from the legend — see item 12
|
|
|
|
### 4. Move year labels to right side of chart (`src/hooks/useForceSimulation.ts`)
|
|
- Keep the current node layout unchanged (roles, skills, timeline line stay where they are)
|
|
- Move year label text elements to the right edge of the chart: position at `width - sidePadding`, `text-anchor: 'end'`
|
|
|
|
### 5. Change chart fonts to dashboard style (`src/hooks/useForceSimulation.ts`)
|
|
- Year labels: change `font-family` from `var(--font-geist-mono)` to `var(--font-ui)`
|
|
- Year indicator (animation): same font change
|
|
|
|
### 6. Reverse pathway column split to 40/60 (`src/index.css`)
|
|
- Change `.pathway-columns` grid from `minmax(0, 1.3fr) minmax(0, 1fr)` to `minmax(0, 2fr) minmax(0, 3fr)`
|
|
- This gives 40% to work experience text and 60% to the graph
|
|
|
|
### 7. Sidebar: collapses to icon rail when patient summary scrolls out of view (`src/components/Sidebar.tsx` + `src/components/DashboardLayout.tsx`)
|
|
- Sidebar already starts expanded on desktop — no change needed there
|
|
- Add IntersectionObserver on the PatientSummaryTile element in DashboardLayout
|
|
- When PatientSummaryTile scrolls out of view, pass a `forceCollapsed` prop to Sidebar
|
|
- Sidebar collapses to icon rail (same as current mobile rail behaviour with nav buttons + hamburger menu)
|
|
- When PatientSummaryTile scrolls back into view, re-expand the sidebar
|
|
- Only applies on desktop (≥1024px) — mobile behaviour unchanged
|
|
|
|
### 8. Change pathway stacking breakpoint from 1024px to 768px (`src/index.css`)
|
|
- The `.pathway-columns` two-column layout currently triggers at `min-width: 1024px`
|
|
- Change this to `min-width: 768px` so the graph sits beside text on tablets too
|
|
- Sidebar breakpoint remains at 1024px (this only affects pathway columns)
|
|
- Also update `.pathway-graph-sticky` responsive rule to match the `768px` breakpoint
|
|
|
|
### 9. Repeat medications: 3-column layout (`src/components/RepeatMedicationsSubsection.tsx`)
|
|
- Render all 3 category sections (Technical, Healthcare Domain, Strategic & Leadership) side-by-side
|
|
- Use CSS grid: `grid-template-columns: repeat(3, 1fr)` on `md` (768px+) screens
|
|
- Stack vertically on mobile (<768px)
|
|
- Remove the `marginTop` between categories when in grid mode (they'll be in columns)
|
|
|
|
### 10. Skills hover → chart highlight (verify only)
|
|
- `RepeatMedicationsSubsection` already calls `onNodeHighlight` on hover
|
|
- This flows through `DashboardLayout` → `highlightedNodeId` → `CareerConstellation` → `useConstellationHighlight`
|
|
- Verify this interaction works end-to-end. If it does, no code change needed.
|
|
|
|
### 11. Play/pause button: left edge of chart, visible only when chart is in view (`src/components/constellation/PlayPauseButton.tsx` + `src/components/constellation/CareerConstellation.tsx`)
|
|
- Move button to the far-left edge of the chart container (not bottom-right)
|
|
- Use IntersectionObserver on the chart container to track if chart is visible
|
|
- When chart is in viewport: show button at left edge, vertically centered
|
|
- When chart scrolls out of view: hide the button
|
|
- Increase base opacity from 0.6 to 0.85
|
|
- Add slightly stronger border and subtle box-shadow for visibility
|
|
|
|
### 12. "Hover to explore connections" text — more visible, top-left above year indicator (`src/components/constellation/ConstellationLegend.tsx` or `src/components/constellation/CareerConstellation.tsx`)
|
|
- Separate this text from the legend dot items
|
|
- Position at the top-left of the chart, above the year indicator text
|
|
- Increase opacity from 0.7 to 1
|
|
- Increase font size (match or approach the legend font size)
|
|
- On touch devices, show "Tap to explore connections" instead
|
|
|
|
## Success Criteria
|
|
|
|
All of the following must be true:
|
|
- [ ] `npm run lint` passes with zero errors
|
|
- [ ] `npm run typecheck` passes with zero errors
|
|
- [ ] `npm run build` completes successfully
|
|
- [ ] Link opacity constants lowered (LINK_BASE_OPACITY=0.04, LINK_STRENGTH_OPACITY_FACTOR=0.06)
|
|
- [ ] Hovered role/education node gets white fill (#FFFFFF, fill-opacity 1)
|
|
- [ ] Legend positioned at top of chart with 12px font size
|
|
- [ ] Year labels positioned at right edge of chart with `var(--font-ui)` font
|
|
- [ ] Pathway columns use 40/60 split (2fr/3fr)
|
|
- [ ] Sidebar collapses to icon rail when patient summary scrolls out of view (desktop only)
|
|
- [ ] Pathway columns go side-by-side at 768px (not 1024px)
|
|
- [ ] Repeat medications renders 3 categories in grid columns on md+ screens
|
|
- [ ] Play/pause button on left edge of chart, hidden when chart not in view
|
|
- [ ] "Hover to explore" text at top-left of chart, full opacity, larger font
|
|
|
|
## Constraints
|
|
|
|
- TypeScript strict mode — `noUnusedLocals`, `noUnusedParameters` enforced
|
|
- Path alias: `@/*` → `src/*`
|
|
- Styling: Tailwind utility classes + inline `CSSProperties` for dynamic/theme values
|
|
- Animations: Framer Motion; respects `prefers-reduced-motion`
|
|
- Design tokens: Primary teal `#00897B`, Accent coral `#FF6B6B`
|
|
- Font tokens: `--font-ui` (Elvaro Grotesque), `--font-geist-mono` (Geist Mono)
|
|
- Do not break existing hover/click/keyboard interactions on the constellation
|
|
- Do not alter the D3 force simulation physics or node positioning logic (except year labels)
|
|
- Preserve existing mobile behaviour unless explicitly changed (items 8, 9)
|
|
|
|
## Files to Modify
|
|
|
|
1. `src/components/constellation/constants.ts`
|
|
2. `src/hooks/useConstellationHighlight.ts`
|
|
3. `src/components/constellation/ConstellationLegend.tsx`
|
|
4. `src/hooks/useForceSimulation.ts`
|
|
5. `src/index.css`
|
|
6. `src/components/Sidebar.tsx`
|
|
7. `src/components/DashboardLayout.tsx`
|
|
8. `src/components/RepeatMedicationsSubsection.tsx`
|
|
9. `src/components/constellation/PlayPauseButton.tsx`
|
|
10. `src/components/constellation/CareerConstellation.tsx`
|
|
|
|
## Status
|
|
|
|
Track progress here. Mark items complete as you go.
|
|
When all success criteria are met, print LOOP_COMPLETE.
|
|
|
|
- [ ] Item 1: Link opacity
|
|
- [ ] Item 2: White hover pill
|
|
- [ ] Item 3: Legend top position
|
|
- [ ] Item 4: Year labels right
|
|
- [ ] Item 5: Font change
|
|
- [ ] Item 6: Column split 40/60
|
|
- [ ] Item 7: Sidebar scroll collapse
|
|
- [ ] Item 8: Stacking breakpoint 768px
|
|
- [ ] Item 9: Medications 3-column
|
|
- [ ] Item 10: Skills hover verify
|
|
- [ ] Item 11: Play/pause button
|
|
- [ ] Item 12: Hover text visibility
|