42 lines
3.5 KiB
Plaintext
42 lines
3.5 KiB
Plaintext
# Progress Log — Career Constellation Refinement
|
|
# Branch: ralph/constellation-refinement
|
|
# Started: 2026-02-16
|
|
|
|
## Codebase Patterns
|
|
- CareerConstellation.tsx (~868 lines) is a D3 force-directed graph with React overlay buttons for accessibility
|
|
- D3 simulation uses forceSimulation with charge, link, x, y, and collide forces
|
|
- Module-level window.matchMedia reads for prefersReducedMotion and supportsCoarsePointer
|
|
- DashboardLayout manages constellation state: highlightedNodeId, pinnedNodeId via callbacks
|
|
- Work experience data in src/data/consultations.ts, constellation-specific data in src/data/constellation.ts
|
|
- CSS layout: .pathway-columns grid — first column is .chronology-stream (work experience), second is .pathway-graph-sticky (constellation graph)
|
|
- Current grid: minmax(0, 1.15fr) minmax(0, 1.5fr) at desktop — work experience 43%, graph 57%
|
|
- containerHeight prop drives graph height on desktop; on mobile (viewport < 1024px) uses MOBILE_FALLBACK_HEIGHT (360px)
|
|
- Use window.innerWidth for breakpoint checks, not container.clientWidth — the SVG container overflows on mobile
|
|
- Design tokens in index.css :root — use var(--accent), var(--border-light), var(--text-tertiary), etc.
|
|
- SVG shadows: use <filter> with <feDropShadow> in <defs>, apply to <g> groups via .attr('filter', 'url(#filter-id)')
|
|
- Role nodes are pill-shaped rects (ROLE_WIDTH=104, ROLE_HEIGHT=32, ROLE_RX=16) with orgColor badge styling
|
|
- Skill nodes use SKILL_RADIUS_DEFAULT (7) resting, SKILL_RADIUS_ACTIVE (11) highlighted — D3 transitions, not CSS
|
|
- Link lines are <path> elements with quadratic bezier curves — tick handler sets d attr
|
|
- Accessibility buttons are React <button> elements overlaid on SVG at opacity 0, container pointerEvents 'none', buttons 'auto'
|
|
- callbacksRef pattern prevents stale closures — use for all D3→React callbacks
|
|
- Bidirectional highlighting: highlightedNodeId (timeline→graph) and highlightedRoleId (graph→timeline)
|
|
- Force simulation: role forceY ~0.98, charge -120/-55, link distance 72, collision ~52-65px roles
|
|
- applyGraphHighlight is the single source of truth for all visual states (resting, highlighted, dimmed)
|
|
- Use the d3-viz skill for all D3 rendering stories
|
|
- Consultation entries ordered reverse-chronologically (newest first) — new entries go at the end of the array
|
|
- Constellation role nodes, skill mappings, and links are in constellation.ts — adding nodes there automatically extends yScale domain and screen reader description
|
|
|
|
## 2026-02-16 - US-001
|
|
- Added Duty Pharmacy Manager (2016-2017, Tesco PLC) and Pre-Registration Pharmacist (2015-2016, Paydens Pharmacy) role nodes to constellation.ts
|
|
- Added roleSkillMappings entries for both new roles (5 skills for Duty Pharm Mgr, 3 for Pre-Reg)
|
|
- Added constellationLinks with strength values for both new roles
|
|
- Added consultation entries for both new roles to consultations.ts with examination, plan, and codedEntries
|
|
- Fixed Pharmacy Manager orgColor from '#00897B' (teal) to '#E53935' (Tesco red) in both constellation.ts and consultations.ts
|
|
- Updated role count comment from "4 roles" to "6 roles"
|
|
- Files changed: src/data/constellation.ts, src/data/consultations.ts
|
|
- **Learnings for future iterations:**
|
|
- buildScreenReaderDescription() iterates constellationNodes dynamically — no manual update needed when adding roles
|
|
- The #00897B teal colour in index.css (:root --teal) is a generic design token, NOT the Tesco-specific colour — don't change it
|
|
- Consultation.orgColor must match the constellation node orgColor for visual consistency between graph and cards
|
|
---
|