Rearranged graph vs timeline
This commit is contained in:
@@ -9,21 +9,24 @@ interface CareerConstellationProps {
|
||||
highlightedNodeId?: string | null
|
||||
}
|
||||
|
||||
const DESKTOP_HEIGHT = 400
|
||||
const TABLET_HEIGHT = 300
|
||||
const MOBILE_HEIGHT = 250
|
||||
const DESKTOP_HEIGHT = 480
|
||||
const TABLET_HEIGHT = 380
|
||||
const MOBILE_HEIGHT = 310
|
||||
|
||||
const ROLE_RADIUS = 30
|
||||
const SKILL_RADIUS = 14
|
||||
const COLLIDE_RADIUS = 36
|
||||
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
||||
const supportsCoarsePointer = window.matchMedia('(pointer: coarse)').matches
|
||||
|
||||
const domainColorMap: Record<string, string> = {
|
||||
clinical: '#059669',
|
||||
technical: '#0D6E6E',
|
||||
leadership: '#D97706',
|
||||
}
|
||||
const roleNodes = constellationNodes.filter(n => n.type === 'role')
|
||||
const srDescription = buildScreenReaderDescription()
|
||||
|
||||
function getHeight(width: number): number {
|
||||
if (width < 768) return MOBILE_HEIGHT
|
||||
@@ -38,6 +41,8 @@ interface SimNode extends ConstellationNode {
|
||||
vy: number
|
||||
fx?: number | null
|
||||
fy?: number | null
|
||||
homeX: number
|
||||
homeY: number
|
||||
}
|
||||
|
||||
interface SimLink {
|
||||
@@ -46,6 +51,15 @@ interface SimLink {
|
||||
strength: number
|
||||
}
|
||||
|
||||
function hashString(input: string): number {
|
||||
let hash = 0
|
||||
for (let i = 0; i < input.length; i++) {
|
||||
hash = (hash << 5) - hash + input.charCodeAt(i)
|
||||
hash |= 0
|
||||
}
|
||||
return Math.abs(hash)
|
||||
}
|
||||
|
||||
function buildScreenReaderDescription(): string {
|
||||
const roleNodes = constellationNodes.filter(n => n.type === 'role')
|
||||
const skillNodes = constellationNodes.filter(n => n.type === 'skill')
|
||||
@@ -59,12 +73,12 @@ function buildScreenReaderDescription(): string {
|
||||
.join(', ')
|
||||
: ''
|
||||
const yearRange = role.endYear
|
||||
? `${role.startYear}–${role.endYear}`
|
||||
: `${role.startYear}–present`
|
||||
? `${role.startYear}-${role.endYear}`
|
||||
: `${role.startYear}-present`
|
||||
return `${role.label} at ${role.organization} (${yearRange}): ${skillNames}`
|
||||
})
|
||||
|
||||
return `Career constellation graph with ${roleNodes.length} roles and ${skillNodes.length} skills. ` +
|
||||
return `Career constellation graph with ${roleNodes.length} roles and ${skillNodes.length} skills aligned against a vertical timeline. ` +
|
||||
roleDescriptions.join('. ') + '.'
|
||||
}
|
||||
|
||||
@@ -76,19 +90,19 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
|
||||
const svgRef = useRef<SVGSVGElement>(null)
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const simulationRef = useRef<d3.Simulation<SimNode, SimLink> | null>(null)
|
||||
const connectedMapRef = useRef<Map<string, Set<string>>>(new Map())
|
||||
const highlightGraphRef = useRef<((activeNodeId: string | null) => void) | null>(null)
|
||||
const callbacksRef = useRef({ onRoleClick, onSkillClick })
|
||||
const [dimensions, setDimensions] = useState({ width: 800, height: DESKTOP_HEIGHT })
|
||||
const [focusedNodeId, setFocusedNodeId] = useState<string | null>(null)
|
||||
const [pinnedNodeId, setPinnedNodeId] = useState<string | null>(null)
|
||||
const [nodeButtonPositions, setNodeButtonPositions] = useState<Record<string, { x: number; y: number }>>({})
|
||||
|
||||
const callbacksRef = useRef({ onRoleClick, onSkillClick })
|
||||
callbacksRef.current = { onRoleClick, onSkillClick }
|
||||
|
||||
const roleNodes = constellationNodes.filter(n => n.type === 'role')
|
||||
const srDescription = buildScreenReaderDescription()
|
||||
|
||||
const handleNodeKeyDown = useCallback((e: React.KeyboardEvent, nodeId: string, nodeType: 'role' | 'skill') => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
setPinnedNodeId(nodeId)
|
||||
if (nodeType === 'role') {
|
||||
onRoleClick(nodeId)
|
||||
} else {
|
||||
@@ -127,47 +141,198 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
|
||||
|
||||
svg.selectAll('*').remove()
|
||||
|
||||
// Defs with radial gradient
|
||||
const years = roleNodes.map(n => n.startYear ?? 2016)
|
||||
const minYear = Math.min(...years)
|
||||
const maxYear = Math.max(...years)
|
||||
|
||||
const topPadding = 46
|
||||
const bottomPadding = 46
|
||||
const sidePadding = 56
|
||||
const timelineX = Math.max(100, Math.min(160, width * 0.18))
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([minYear, maxYear])
|
||||
.range([topPadding, height - bottomPadding])
|
||||
|
||||
// Defs with subtle radial gradient
|
||||
const defs = svg.append('defs')
|
||||
const gradient = defs.append('radialGradient')
|
||||
.attr('id', 'constellation-bg')
|
||||
.attr('cx', '50%')
|
||||
.attr('cy', '50%')
|
||||
.attr('r', '60%')
|
||||
gradient.append('stop').attr('offset', '0%').attr('stop-color', '#EDF2F1')
|
||||
gradient.append('stop').attr('offset', '100%').attr('stop-color', '#F7FAF9')
|
||||
.attr('cx', '45%')
|
||||
.attr('cy', '40%')
|
||||
.attr('r', '75%')
|
||||
gradient.append('stop').attr('offset', '0%').attr('stop-color', '#F2F7F6')
|
||||
gradient.append('stop').attr('offset', '100%').attr('stop-color', '#FAFCFB')
|
||||
|
||||
// Background rect
|
||||
svg.append('rect')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.attr('fill', 'url(#constellation-bg)')
|
||||
.attr('rx', 6)
|
||||
|
||||
// Prepare data
|
||||
const nodes: SimNode[] = constellationNodes.map(n => ({
|
||||
...n,
|
||||
x: 0,
|
||||
y: 0,
|
||||
vx: 0,
|
||||
vy: 0,
|
||||
}))
|
||||
// Timeline guides and subtle era lanes
|
||||
const timelineGroup = svg.append('g').attr('class', 'timeline-guides')
|
||||
|
||||
const tickYears = d3.range(minYear, maxYear + 1)
|
||||
timelineGroup.selectAll('line.year-guide')
|
||||
.data(tickYears)
|
||||
.join('line')
|
||||
.attr('class', 'year-guide')
|
||||
.attr('x1', sidePadding)
|
||||
.attr('x2', width - sidePadding)
|
||||
.attr('y1', d => yScale(d))
|
||||
.attr('y2', d => yScale(d))
|
||||
.attr('stroke', '#D5E3E0')
|
||||
.attr('stroke-opacity', d => roleNodes.some(r => r.startYear === d) ? 0.9 : 0.38)
|
||||
.attr('stroke-width', d => roleNodes.some(r => r.startYear === d) ? 1.2 : 1)
|
||||
|
||||
timelineGroup.append('line')
|
||||
.attr('x1', timelineX)
|
||||
.attr('x2', timelineX)
|
||||
.attr('y1', topPadding - 12)
|
||||
.attr('y2', height - bottomPadding + 12)
|
||||
.attr('stroke', '#A8C4BF')
|
||||
.attr('stroke-width', 2)
|
||||
.attr('stroke-opacity', 0.8)
|
||||
|
||||
timelineGroup.selectAll('circle.year-dot')
|
||||
.data(tickYears)
|
||||
.join('circle')
|
||||
.attr('class', 'year-dot')
|
||||
.attr('cx', timelineX)
|
||||
.attr('cy', d => yScale(d))
|
||||
.attr('r', d => roleNodes.some(r => r.startYear === d) ? 3.2 : 2)
|
||||
.attr('fill', '#6A8E88')
|
||||
.attr('fill-opacity', d => roleNodes.some(r => r.startYear === d) ? 0.8 : 0.35)
|
||||
|
||||
timelineGroup.selectAll('text.year-label')
|
||||
.data(tickYears)
|
||||
.join('text')
|
||||
.attr('class', 'year-label')
|
||||
.attr('x', timelineX - 12)
|
||||
.attr('y', d => yScale(d) + 4)
|
||||
.attr('text-anchor', 'end')
|
||||
.attr('font-size', '10')
|
||||
.attr('font-family', 'var(--font-geist-mono)')
|
||||
.attr('fill', '#6F8F8A')
|
||||
.text(d => d)
|
||||
|
||||
// Compact legend
|
||||
const legendX = width - sidePadding - 190
|
||||
const legendY = 16
|
||||
const legendGroup = svg.append('g').attr('class', 'constellation-legend')
|
||||
.attr('transform', `translate(${Math.max(12, legendX)}, ${legendY})`)
|
||||
|
||||
legendGroup.append('rect')
|
||||
.attr('width', 182)
|
||||
.attr('height', 64)
|
||||
.attr('rx', 6)
|
||||
.attr('fill', 'rgba(255,255,255,0.72)')
|
||||
.attr('stroke', '#D8E6E3')
|
||||
|
||||
legendGroup.append('circle')
|
||||
.attr('cx', 12)
|
||||
.attr('cy', 16)
|
||||
.attr('r', 5)
|
||||
.attr('fill', '#0D6E6E')
|
||||
legendGroup.append('text')
|
||||
.attr('x', 24)
|
||||
.attr('y', 20)
|
||||
.attr('font-size', '11')
|
||||
.attr('fill', '#3A5F5A')
|
||||
.attr('font-family', 'var(--font-geist-mono)')
|
||||
.text('Roles (timeline anchored)')
|
||||
|
||||
legendGroup.append('circle')
|
||||
.attr('cx', 12)
|
||||
.attr('cy', 34)
|
||||
.attr('r', 4)
|
||||
.attr('fill', '#D97706')
|
||||
legendGroup.append('text')
|
||||
.attr('x', 24)
|
||||
.attr('y', 38)
|
||||
.attr('font-size', '11')
|
||||
.attr('fill', '#3A5F5A')
|
||||
.attr('font-family', 'var(--font-geist-mono)')
|
||||
.text('Skills (linked clusters)')
|
||||
|
||||
legendGroup.append('text')
|
||||
.attr('x', 12)
|
||||
.attr('y', 56)
|
||||
.attr('font-size', '10')
|
||||
.attr('fill', '#5E7F7B')
|
||||
.attr('font-family', 'var(--font-geist-mono)')
|
||||
.text('Tap/click a node to pin links')
|
||||
|
||||
// Prepare data with deterministic initial positions
|
||||
const links: SimLink[] = constellationLinks.map(l => ({
|
||||
source: l.source,
|
||||
target: l.target,
|
||||
strength: l.strength,
|
||||
}))
|
||||
|
||||
const simRoleNodes = nodes.filter(n => n.type === 'role')
|
||||
const years = simRoleNodes.map(n => n.startYear ?? 2016)
|
||||
const minYear = Math.min(...years)
|
||||
const maxYear = Math.max(...years)
|
||||
const padding = 60
|
||||
const roleOrder = [...roleNodes].sort((a, b) => (a.startYear ?? 0) - (b.startYear ?? 0))
|
||||
const roleInitialMap = new Map<string, { x: number; y: number }>()
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([minYear, maxYear])
|
||||
.range([padding, width - padding])
|
||||
roleOrder.forEach((role, index) => {
|
||||
const jitter = (index % 2 === 0 ? -1 : 1) * 32
|
||||
roleInitialMap.set(role.id, {
|
||||
x: Math.min(width - sidePadding, Math.max(timelineX + 64, timelineX + 124 + jitter)),
|
||||
y: yScale(role.startYear ?? minYear),
|
||||
})
|
||||
})
|
||||
|
||||
const nodes: SimNode[] = constellationNodes.map(n => {
|
||||
if (n.type === 'role') {
|
||||
const pos = roleInitialMap.get(n.id)!
|
||||
return {
|
||||
...n,
|
||||
x: pos.x,
|
||||
y: pos.y,
|
||||
vx: 0,
|
||||
vy: 0,
|
||||
homeX: pos.x,
|
||||
homeY: pos.y,
|
||||
}
|
||||
}
|
||||
|
||||
const roleIds = constellationLinks
|
||||
.filter(l => l.target === n.id)
|
||||
.map(l => l.source)
|
||||
|
||||
const linkedRolePositions = roleIds
|
||||
.map(roleId => roleInitialMap.get(roleId))
|
||||
.filter(Boolean) as Array<{ x: number; y: number }>
|
||||
|
||||
const centroid = linkedRolePositions.length > 0
|
||||
? {
|
||||
x: linkedRolePositions.reduce((sum, p) => sum + p.x, 0) / linkedRolePositions.length,
|
||||
y: linkedRolePositions.reduce((sum, p) => sum + p.y, 0) / linkedRolePositions.length,
|
||||
}
|
||||
: { x: width * 0.55, y: height * 0.5 }
|
||||
|
||||
const hash = hashString(n.id)
|
||||
const domainBaseAngle = n.domain === 'clinical'
|
||||
? Math.PI * 0.5
|
||||
: n.domain === 'leadership'
|
||||
? Math.PI * 1.35
|
||||
: Math.PI * 0.05
|
||||
const angle = domainBaseAngle + ((hash % 360) * Math.PI / 180) * 0.18
|
||||
const radius = 54 + (hash % 46)
|
||||
|
||||
const seededX = centroid.x + Math.cos(angle) * radius
|
||||
const seededY = centroid.y + Math.sin(angle) * radius
|
||||
|
||||
return {
|
||||
...n,
|
||||
x: seededX,
|
||||
y: seededY,
|
||||
vx: 0,
|
||||
vy: 0,
|
||||
homeX: seededX,
|
||||
homeY: seededY,
|
||||
}
|
||||
})
|
||||
|
||||
const linkGroup = svg.append('g').attr('class', 'links')
|
||||
const nodeGroup = svg.append('g').attr('class', 'nodes')
|
||||
@@ -186,7 +351,6 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
|
||||
.style('cursor', 'pointer')
|
||||
.attr('data-node-id', d => d.id)
|
||||
|
||||
// Role nodes: large circles with focus ring support
|
||||
nodeSelection.filter(d => d.type === 'role')
|
||||
.append('circle')
|
||||
.attr('class', 'focus-ring')
|
||||
@@ -213,9 +377,8 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
|
||||
.attr('font-weight', '600')
|
||||
.attr('font-family', 'var(--font-ui)')
|
||||
.attr('pointer-events', 'none')
|
||||
.text(d => d.shortLabel ?? d.label.slice(0, 8))
|
||||
.text(d => d.shortLabel ?? d.label.slice(0, 9))
|
||||
|
||||
// Skill nodes
|
||||
nodeSelection.filter(d => d.type === 'skill')
|
||||
.append('circle')
|
||||
.attr('class', 'node-circle')
|
||||
@@ -223,20 +386,22 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
|
||||
.attr('fill', d => domainColorMap[d.domain ?? 'technical'] ?? '#0D6E6E')
|
||||
.attr('stroke', '#FFFFFF')
|
||||
.attr('stroke-width', 1.5)
|
||||
.attr('fill-opacity', 0.85)
|
||||
.attr('fill-opacity', 0.86)
|
||||
|
||||
nodeSelection.filter(d => d.type === 'skill')
|
||||
.append('text')
|
||||
.attr('class', 'node-label')
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('dy', SKILL_RADIUS + 14)
|
||||
.attr('fill', '#4A6B69')
|
||||
.attr('fill', '#436964')
|
||||
.attr('font-size', '11')
|
||||
.attr('font-family', 'var(--font-geist-mono)')
|
||||
.attr('pointer-events', 'none')
|
||||
.text(d => d.shortLabel ?? d.label)
|
||||
.text(d => {
|
||||
const label = d.shortLabel ?? d.label
|
||||
return label.length > 16 ? `${label.slice(0, 15)}…` : label
|
||||
})
|
||||
|
||||
// Build adjacency lookup for hover interactions
|
||||
const connectedMap = new Map<string, Set<string>>()
|
||||
constellationLinks.forEach(l => {
|
||||
if (!connectedMap.has(l.source)) connectedMap.set(l.source, new Set())
|
||||
@@ -244,74 +409,102 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
|
||||
connectedMap.get(l.source)!.add(l.target)
|
||||
connectedMap.get(l.target)!.add(l.source)
|
||||
})
|
||||
connectedMapRef.current = connectedMap
|
||||
|
||||
const HOVER_TRANSITION = '150ms'
|
||||
|
||||
// Hover interactions
|
||||
nodeSelection.on('mouseenter', function(_event, d) {
|
||||
const connected = connectedMap.get(d.id) ?? new Set()
|
||||
|
||||
// Dim non-connected nodes
|
||||
const updateSkillLabelVisibility = (activeNodeId: string | null) => {
|
||||
const shownPositions: Array<{ x: number; y: number }> = []
|
||||
nodeSelection
|
||||
.style('transition', `opacity ${HOVER_TRANSITION}`)
|
||||
.style('opacity', n => {
|
||||
if (n.id === d.id) return '1'
|
||||
if (connected.has(n.id)) return '1'
|
||||
return '0.15'
|
||||
})
|
||||
.filter(n => n.type === 'skill')
|
||||
.each(function(n) {
|
||||
const textSel = d3.select(this).select<SVGTextElement>('text.node-label')
|
||||
const connected = activeNodeId ? connectedMap.get(activeNodeId) : null
|
||||
const shouldForceShow = Boolean(activeNodeId && (n.id === activeNodeId || connected?.has(n.id)))
|
||||
|
||||
// Scale up connected skill nodes when hovering a role
|
||||
if (d.type === 'role') {
|
||||
nodeSelection.filter(n => n.type === 'skill' && connected.has(n.id))
|
||||
if (shouldForceShow) {
|
||||
textSel.attr('opacity', 1)
|
||||
shownPositions.push({ x: n.x, y: n.y + SKILL_RADIUS + 14 })
|
||||
return
|
||||
}
|
||||
|
||||
const x = n.x
|
||||
const y = n.y + SKILL_RADIUS + 14
|
||||
const collides = shownPositions.some(p => Math.abs(p.x - x) < 28 && Math.abs(p.y - y) < 14)
|
||||
|
||||
textSel.attr('opacity', collides ? 0 : 1)
|
||||
|
||||
if (!collides) {
|
||||
shownPositions.push({ x, y })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const applyGraphHighlight = (activeNodeId: string | null) => {
|
||||
if (!activeNodeId) {
|
||||
nodeSelection.style('opacity', '1')
|
||||
nodeSelection.filter(d => d.type === 'skill')
|
||||
.select('.node-circle')
|
||||
.transition().duration(150)
|
||||
.attr('r', SKILL_RADIUS + 4)
|
||||
.attr('r', SKILL_RADIUS)
|
||||
linkSelection
|
||||
.attr('stroke', '#B0C4C0')
|
||||
.attr('stroke-width', 1.5)
|
||||
.attr('stroke-opacity', 0.45)
|
||||
updateSkillLabelVisibility(null)
|
||||
return
|
||||
}
|
||||
|
||||
// Brighten connected links, dim others
|
||||
const connected = connectedMap.get(activeNodeId) ?? new Set()
|
||||
|
||||
nodeSelection.style('opacity', d => {
|
||||
if (d.id === activeNodeId || connected.has(d.id)) return '1'
|
||||
return '0.16'
|
||||
})
|
||||
|
||||
nodeSelection.filter(d => d.type === 'skill')
|
||||
.select('.node-circle')
|
||||
.attr('r', d => (d.id === activeNodeId || connected.has(d.id)) ? SKILL_RADIUS + 3 : SKILL_RADIUS)
|
||||
|
||||
linkSelection
|
||||
.style('transition', `stroke-opacity ${HOVER_TRANSITION}, stroke ${HOVER_TRANSITION}`)
|
||||
.attr('stroke', l => {
|
||||
const src = typeof l.source === 'string' ? l.source : (l.source as SimNode).id
|
||||
const tgt = typeof l.target === 'string' ? l.target : (l.target as SimNode).id
|
||||
if (src === d.id || tgt === d.id) return '#0D6E6E'
|
||||
if (src === activeNodeId || tgt === activeNodeId) return '#0D6E6E'
|
||||
return '#B0C4C0'
|
||||
})
|
||||
.attr('stroke-opacity', l => {
|
||||
const src = typeof l.source === 'string' ? l.source : (l.source as SimNode).id
|
||||
const tgt = typeof l.target === 'string' ? l.target : (l.target as SimNode).id
|
||||
if (src === d.id || tgt === d.id) return 0.7
|
||||
if (src === activeNodeId || tgt === activeNodeId) return 0.76
|
||||
return 0.1
|
||||
})
|
||||
.attr('stroke-width', l => {
|
||||
const src = typeof l.source === 'string' ? l.source : (l.source as SimNode).id
|
||||
const tgt = typeof l.target === 'string' ? l.target : (l.target as SimNode).id
|
||||
if (src === d.id || tgt === d.id) return 2.5
|
||||
if (src === activeNodeId || tgt === activeNodeId) return 2.5
|
||||
return 1.5
|
||||
})
|
||||
|
||||
updateSkillLabelVisibility(activeNodeId)
|
||||
}
|
||||
|
||||
highlightGraphRef.current = applyGraphHighlight
|
||||
|
||||
nodeSelection.on('mouseenter', function(_event, d) {
|
||||
if (supportsCoarsePointer) return
|
||||
applyGraphHighlight(d.id)
|
||||
})
|
||||
|
||||
nodeSelection.on('mouseleave', function() {
|
||||
// Reset all nodes
|
||||
nodeSelection
|
||||
.style('opacity', '1')
|
||||
|
||||
// Reset skill node sizes
|
||||
nodeSelection.filter(n => n.type === 'skill')
|
||||
.select('.node-circle')
|
||||
.transition().duration(150)
|
||||
.attr('r', SKILL_RADIUS)
|
||||
|
||||
// Reset all links
|
||||
linkSelection
|
||||
.attr('stroke', '#B0C4C0')
|
||||
.attr('stroke-width', 1.5)
|
||||
.attr('stroke-opacity', 0.45)
|
||||
if (supportsCoarsePointer) return
|
||||
applyGraphHighlight(highlightedNodeId ?? pinnedNodeId)
|
||||
})
|
||||
|
||||
// Click interactions
|
||||
nodeSelection.on('click', function(_event, d) {
|
||||
if (supportsCoarsePointer && pinnedNodeId !== d.id) {
|
||||
setPinnedNodeId(d.id)
|
||||
applyGraphHighlight(d.id)
|
||||
return
|
||||
}
|
||||
|
||||
setPinnedNodeId(prev => prev === d.id ? null : d.id)
|
||||
|
||||
if (d.type === 'role') {
|
||||
callbacksRef.current.onRoleClick(d.id)
|
||||
} else {
|
||||
@@ -319,38 +512,32 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
|
||||
}
|
||||
})
|
||||
|
||||
// Force simulation
|
||||
const simulation = d3.forceSimulation<SimNode>(nodes)
|
||||
.force('charge', d3.forceManyBody<SimNode>().strength(-120))
|
||||
.alpha(0.65)
|
||||
.alphaDecay(prefersReducedMotion ? 0.26 : 0.06)
|
||||
.force('charge', d3.forceManyBody<SimNode>().strength(-85))
|
||||
.force('link', d3.forceLink<SimNode, SimLink>(links)
|
||||
.id(d => d.id)
|
||||
.distance(65)
|
||||
.strength(d => (d as SimLink).strength * 0.6))
|
||||
.force('x', d3.forceX<SimNode>(d => {
|
||||
if (d.type === 'role' && d.startYear != null) {
|
||||
return xScale(d.startYear)
|
||||
.distance(56)
|
||||
.strength(d => (d as SimLink).strength * 0.7))
|
||||
.force('x', d3.forceX<SimNode>(d => d.homeX).strength(d => d.type === 'role' ? 1 : 0.2))
|
||||
.force('y', d3.forceY<SimNode>(d => {
|
||||
if (d.type === 'role') {
|
||||
return yScale(d.startYear ?? minYear)
|
||||
}
|
||||
return width / 2
|
||||
}).strength(d => d.type === 'role' ? 0.8 : 0.08))
|
||||
.force('y', d3.forceY<SimNode>(height / 2).strength(0.4))
|
||||
return d.homeY
|
||||
}).strength(d => d.type === 'role' ? 1 : 0.2))
|
||||
.force('collide', d3.forceCollide<SimNode>(d =>
|
||||
d.type === 'role' ? COLLIDE_RADIUS : SKILL_RADIUS + 6
|
||||
d.type === 'role' ? COLLIDE_RADIUS : SKILL_RADIUS + 8
|
||||
))
|
||||
|
||||
simulationRef.current = simulation
|
||||
|
||||
if (prefersReducedMotion) {
|
||||
// Run simulation to completion synchronously — no animation
|
||||
simulation.stop()
|
||||
for (let i = 0; i < 300; i++) {
|
||||
simulation.tick()
|
||||
}
|
||||
|
||||
// Constrain and render final positions
|
||||
const renderTick = () => {
|
||||
nodes.forEach(d => {
|
||||
const r = d.type === 'role' ? ROLE_RADIUS : SKILL_RADIUS
|
||||
d.x = Math.max(r, Math.min(width - r, d.x))
|
||||
d.y = Math.max(r, Math.min(height - r, d.y))
|
||||
d.x = Math.max(r + 6, Math.min(width - r - 6, d.x))
|
||||
d.y = Math.max(r + 6, Math.min(height - r - 6, d.y))
|
||||
})
|
||||
|
||||
linkSelection
|
||||
@@ -360,39 +547,56 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
|
||||
.attr('y2', d => (d.target as SimNode).y)
|
||||
|
||||
nodeSelection.attr('transform', d => `translate(${d.x},${d.y})`)
|
||||
} else {
|
||||
simulation.on('tick', () => {
|
||||
nodes.forEach(d => {
|
||||
const r = d.type === 'role' ? ROLE_RADIUS : SKILL_RADIUS
|
||||
d.x = Math.max(r, Math.min(width - r, d.x))
|
||||
d.y = Math.max(r, Math.min(height - r, d.y))
|
||||
})
|
||||
|
||||
linkSelection
|
||||
.attr('x1', d => (d.source as SimNode).x)
|
||||
.attr('y1', d => (d.source as SimNode).y)
|
||||
.attr('x2', d => (d.target as SimNode).x)
|
||||
.attr('y2', d => (d.target as SimNode).y)
|
||||
|
||||
nodeSelection.attr('transform', d => `translate(${d.x},${d.y})`)
|
||||
const nextNodePositions: Record<string, { x: number; y: number }> = {}
|
||||
nodes.forEach(node => {
|
||||
nextNodePositions[node.id] = {
|
||||
x: Math.round(node.x),
|
||||
y: Math.round(node.y),
|
||||
}
|
||||
})
|
||||
|
||||
setNodeButtonPositions(prev => {
|
||||
const prevKeys = Object.keys(prev)
|
||||
const nextKeys = Object.keys(nextNodePositions)
|
||||
if (prevKeys.length !== nextKeys.length) return nextNodePositions
|
||||
|
||||
for (const key of nextKeys) {
|
||||
const prevPos = prev[key]
|
||||
const nextPos = nextNodePositions[key]
|
||||
if (!prevPos || prevPos.x !== nextPos.x || prevPos.y !== nextPos.y) {
|
||||
return nextNodePositions
|
||||
}
|
||||
}
|
||||
|
||||
return prev
|
||||
})
|
||||
|
||||
applyGraphHighlight(highlightedNodeId ?? pinnedNodeId)
|
||||
}
|
||||
|
||||
if (prefersReducedMotion) {
|
||||
simulation.stop()
|
||||
for (let i = 0; i < 220; i++) {
|
||||
simulation.tick()
|
||||
}
|
||||
renderTick()
|
||||
} else {
|
||||
simulation.on('tick', renderTick)
|
||||
}
|
||||
|
||||
return () => {
|
||||
simulation.stop()
|
||||
}
|
||||
}, [dimensions])
|
||||
}, [dimensions, highlightedNodeId, pinnedNodeId])
|
||||
|
||||
// Update focus ring when focusedNodeId changes
|
||||
useEffect(() => {
|
||||
if (!svgRef.current) return
|
||||
const svg = d3.select(svgRef.current)
|
||||
|
||||
// Reset all focus rings
|
||||
svg.selectAll('.focus-ring')
|
||||
.attr('stroke', 'transparent')
|
||||
|
||||
// Highlight focused node
|
||||
if (focusedNodeId) {
|
||||
svg.selectAll<SVGGElement, SimNode>('g.node')
|
||||
.filter(d => d.id === focusedNodeId)
|
||||
@@ -401,63 +605,10 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
|
||||
}
|
||||
}, [focusedNodeId])
|
||||
|
||||
// External highlight from hovering experience/skill entries
|
||||
useEffect(() => {
|
||||
if (!svgRef.current) return
|
||||
const svg = d3.select(svgRef.current)
|
||||
const nodeSelection = svg.selectAll<SVGGElement, SimNode>('g.node')
|
||||
const linkSelection = svg.selectAll<SVGLineElement, SimLink>('g.links line')
|
||||
|
||||
if (!highlightedNodeId) {
|
||||
// Reset all
|
||||
nodeSelection.style('opacity', '1')
|
||||
nodeSelection.filter(d => d.type === 'skill')
|
||||
.select('.node-circle')
|
||||
.attr('r', SKILL_RADIUS)
|
||||
linkSelection
|
||||
.attr('stroke', '#B0C4C0')
|
||||
.attr('stroke-width', 1.5)
|
||||
.attr('stroke-opacity', 0.45)
|
||||
return
|
||||
}
|
||||
|
||||
const connected = connectedMapRef.current.get(highlightedNodeId) ?? new Set()
|
||||
|
||||
// Dim non-connected nodes
|
||||
nodeSelection.style('opacity', d => {
|
||||
if (d.id === highlightedNodeId || connected.has(d.id)) return '1'
|
||||
return '0.15'
|
||||
})
|
||||
|
||||
// Scale up connected skill nodes
|
||||
const highlightedNode = constellationNodes.find(n => n.id === highlightedNodeId)
|
||||
if (highlightedNode?.type === 'role') {
|
||||
nodeSelection.filter(d => d.type === 'skill' && connected.has(d.id))
|
||||
.select('.node-circle')
|
||||
.attr('r', SKILL_RADIUS + 4)
|
||||
}
|
||||
|
||||
// Brighten connected links
|
||||
linkSelection
|
||||
.attr('stroke', l => {
|
||||
const src = typeof l.source === 'string' ? l.source : (l.source as SimNode).id
|
||||
const tgt = typeof l.target === 'string' ? l.target : (l.target as SimNode).id
|
||||
if (src === highlightedNodeId || tgt === highlightedNodeId) return '#0D6E6E'
|
||||
return '#B0C4C0'
|
||||
})
|
||||
.attr('stroke-opacity', l => {
|
||||
const src = typeof l.source === 'string' ? l.source : (l.source as SimNode).id
|
||||
const tgt = typeof l.target === 'string' ? l.target : (l.target as SimNode).id
|
||||
if (src === highlightedNodeId || tgt === highlightedNodeId) return 0.7
|
||||
return 0.1
|
||||
})
|
||||
.attr('stroke-width', l => {
|
||||
const src = typeof l.source === 'string' ? l.source : (l.source as SimNode).id
|
||||
const tgt = typeof l.target === 'string' ? l.target : (l.target as SimNode).id
|
||||
if (src === highlightedNodeId || tgt === highlightedNodeId) return 2.5
|
||||
return 1.5
|
||||
})
|
||||
}, [highlightedNodeId])
|
||||
if (!highlightGraphRef.current) return
|
||||
highlightGraphRef.current(highlightedNodeId ?? pinnedNodeId)
|
||||
}, [highlightedNodeId, pinnedNodeId])
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -478,7 +629,7 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
|
||||
aria-label="Career constellation showing roles and skills across career timeline"
|
||||
style={{ display: 'block' }}
|
||||
/>
|
||||
{/* Screen-reader-only description */}
|
||||
|
||||
<p
|
||||
style={{
|
||||
position: 'absolute',
|
||||
@@ -494,10 +645,10 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
|
||||
>
|
||||
{srDescription}
|
||||
</p>
|
||||
{/* Keyboard-navigable role buttons (visually hidden, positioned over SVG) */}
|
||||
|
||||
<div
|
||||
role="group"
|
||||
aria-label="Career roles — use Tab to navigate, Enter to view details"
|
||||
aria-label="Career nodes - use Tab to navigate and Enter to open details"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
@@ -507,33 +658,48 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
{roleNodes.map(role => {
|
||||
const yearRange = role.endYear
|
||||
? `${role.startYear}–${role.endYear}`
|
||||
: `${role.startYear}–present`
|
||||
{constellationNodes.map(node => {
|
||||
const yearRange = node.endYear
|
||||
? `${node.startYear}-${node.endYear}`
|
||||
: `${node.startYear}-present`
|
||||
|
||||
const position = nodeButtonPositions[node.id] ?? { x: dimensions.width * 0.5, y: dimensions.height * 0.5 }
|
||||
const buttonSize = node.type === 'role' ? 54 : 34
|
||||
|
||||
return (
|
||||
<button
|
||||
key={role.id}
|
||||
key={node.id}
|
||||
type="button"
|
||||
aria-label={`${role.label} at ${role.organization}, ${yearRange}. Press Enter to view details.`}
|
||||
aria-label={
|
||||
node.type === 'role'
|
||||
? `${node.label} at ${node.organization}, ${yearRange}. Press Enter to view details.`
|
||||
: `${node.label} skill node. Press Enter to view details.`
|
||||
}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: 48,
|
||||
height: 48,
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
width: buttonSize,
|
||||
height: buttonSize,
|
||||
top: `${position.y}px`,
|
||||
left: `${position.x}px`,
|
||||
transform: 'translate(-50%, -50%)',
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
pointerEvents: 'auto',
|
||||
pointerEvents: 'none',
|
||||
padding: 0,
|
||||
opacity: 0,
|
||||
}}
|
||||
onFocus={() => setFocusedNodeId(role.id)}
|
||||
onFocus={() => setFocusedNodeId(node.id)}
|
||||
onBlur={() => setFocusedNodeId(null)}
|
||||
onClick={() => onRoleClick(role.id)}
|
||||
onKeyDown={e => handleNodeKeyDown(e, role.id, 'role')}
|
||||
onClick={() => {
|
||||
setPinnedNodeId(node.id)
|
||||
if (node.type === 'role') {
|
||||
onRoleClick(node.id)
|
||||
} else {
|
||||
onSkillClick(node.id)
|
||||
}
|
||||
}}
|
||||
onKeyDown={e => handleNodeKeyDown(e, node.id, node.type)}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
||||
@@ -382,28 +382,61 @@ export function DashboardLayout() {
|
||||
|
||||
{/* Patient Pathway — parent section with constellation graph + subsections */}
|
||||
<ParentSection title="Patient Pathway" tileId="patient-pathway">
|
||||
<CareerConstellation
|
||||
onRoleClick={handleRoleClick}
|
||||
onSkillClick={handleSkillClick}
|
||||
highlightedNodeId={highlightedNodeId}
|
||||
/>
|
||||
|
||||
{/* Last Consultation subsection */}
|
||||
<LastConsultationSubsection />
|
||||
|
||||
{/* Two-column experience/skills grid */}
|
||||
<div className="pathway-columns" style={{ marginTop: '24px' }}>
|
||||
<div data-tile-id="section-experience">
|
||||
<WorkExperienceSubsection onNodeHighlight={handleNodeHighlight} />
|
||||
<div className="pathway-columns">
|
||||
<div className="pathway-graph-sticky">
|
||||
<CareerConstellation
|
||||
onRoleClick={handleRoleClick}
|
||||
onSkillClick={handleSkillClick}
|
||||
highlightedNodeId={highlightedNodeId}
|
||||
/>
|
||||
</div>
|
||||
<div data-tile-id="section-skills">
|
||||
<RepeatMedicationsSubsection onNodeHighlight={handleNodeHighlight} />
|
||||
|
||||
<div className="chronology-stream" data-tile-id="section-experience">
|
||||
<div
|
||||
style={{
|
||||
marginBottom: '14px',
|
||||
padding: '10px 12px',
|
||||
border: '1px solid var(--border-light)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
background: 'var(--bg-dashboard)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.06em',
|
||||
color: 'var(--text-tertiary)',
|
||||
marginBottom: '4px',
|
||||
fontFamily: 'var(--font-geist-mono)',
|
||||
}}
|
||||
>
|
||||
Clinical Record Stream
|
||||
</div>
|
||||
<div style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>
|
||||
Chronological role and education entries. Select items to inspect full records.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="chronology-item">
|
||||
<span className="chronology-badge">Role</span>
|
||||
<LastConsultationSubsection />
|
||||
</div>
|
||||
|
||||
<div className="chronology-item">
|
||||
<span className="chronology-badge">Role</span>
|
||||
<WorkExperienceSubsection onNodeHighlight={handleNodeHighlight} />
|
||||
</div>
|
||||
|
||||
<div className="chronology-item" data-tile-id="section-education">
|
||||
<span className="chronology-badge">Education</span>
|
||||
<EducationSubsection />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Education subsection */}
|
||||
<div data-tile-id="section-education">
|
||||
<EducationSubsection />
|
||||
<div data-tile-id="section-skills" style={{ marginTop: '22px' }}>
|
||||
<RepeatMedicationsSubsection onNodeHighlight={handleNodeHighlight} />
|
||||
</div>
|
||||
</ParentSection>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { FileText, ChevronRight } from 'lucide-react'
|
||||
import { CardHeader } from '../Card'
|
||||
import { ParentSection } from '../ParentSection'
|
||||
import { kpis } from '@/data/kpis'
|
||||
@@ -11,20 +12,26 @@ const colorMap: Record<KPI['colorVariant'], string> = {
|
||||
teal: '#0D6E6E',
|
||||
}
|
||||
|
||||
const KPI_COACHMARK_KEY = 'kpi-evidence-coachmark-dismissed-v1'
|
||||
|
||||
interface MetricCardProps {
|
||||
kpi: KPI
|
||||
showCoachmark?: boolean
|
||||
onOpen: () => void
|
||||
}
|
||||
|
||||
function MetricCard({ kpi }: MetricCardProps) {
|
||||
function MetricCard({ kpi, showCoachmark = false, onOpen }: MetricCardProps) {
|
||||
const { openPanel } = useDetailPanel()
|
||||
|
||||
const handleClick = () => {
|
||||
onOpen()
|
||||
openPanel({ type: 'kpi', kpi })
|
||||
}
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
onOpen()
|
||||
openPanel({ type: 'kpi', kpi })
|
||||
}
|
||||
}
|
||||
@@ -37,7 +44,11 @@ function MetricCard({ kpi }: MetricCardProps) {
|
||||
border: '1px solid var(--border-light)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
cursor: 'pointer',
|
||||
transition: 'border-color 150ms ease-out, box-shadow 150ms ease-out',
|
||||
transition: 'border-color 160ms ease-out, box-shadow 160ms ease-out, transform 120ms ease-out',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '2px',
|
||||
}
|
||||
|
||||
const valueStyles: React.CSSProperties = {
|
||||
@@ -63,28 +74,71 @@ function MetricCard({ kpi }: MetricCardProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleClick}
|
||||
onKeyDown={handleKeyDown}
|
||||
style={buttonStyles}
|
||||
aria-label={`${kpi.label}: ${kpi.value}. Click to view details.`}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--accent-border)'
|
||||
e.currentTarget.style.boxShadow = 'var(--shadow-md)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'var(--border-light)'
|
||||
e.currentTarget.style.boxShadow = 'none'
|
||||
}}
|
||||
>
|
||||
<div style={valueStyles}>{kpi.value}</div>
|
||||
<div style={labelStyles}>{kpi.label}</div>
|
||||
<div style={subStyles}>{kpi.sub}</div>
|
||||
</button>
|
||||
<div className={showCoachmark ? 'kpi-card-coachmark-target' : undefined} style={{ position: 'relative' }}>
|
||||
{showCoachmark && (
|
||||
<div className="kpi-coachmark" role="status" aria-live="polite">
|
||||
Open any metric to see evidence
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={handleClick}
|
||||
onKeyDown={handleKeyDown}
|
||||
style={buttonStyles}
|
||||
className={`metric-card ${showCoachmark ? 'metric-card-pulse' : ''}`}
|
||||
aria-label={`${kpi.label}: ${kpi.value}. Click to view details.`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '14px',
|
||||
right: '14px',
|
||||
color: 'var(--accent)',
|
||||
opacity: 0.85,
|
||||
}}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<FileText size={14} />
|
||||
</div>
|
||||
<div style={valueStyles}>{kpi.value}</div>
|
||||
<div style={labelStyles}>{kpi.label}</div>
|
||||
<div style={subStyles}>{kpi.sub}</div>
|
||||
<div
|
||||
style={{
|
||||
marginTop: '10px',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
color: 'var(--accent)',
|
||||
fontFamily: 'var(--font-geist-mono)',
|
||||
}}
|
||||
>
|
||||
Click to view evidence
|
||||
<ChevronRight size={13} />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function PatientSummaryTile() {
|
||||
const [showCoachmark, setShowCoachmark] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined') return
|
||||
const hasDismissed = window.localStorage.getItem(KPI_COACHMARK_KEY) === '1'
|
||||
if (!hasDismissed) {
|
||||
setShowCoachmark(true)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleMetricOpen = () => {
|
||||
if (!showCoachmark) return
|
||||
setShowCoachmark(false)
|
||||
window.localStorage.setItem(KPI_COACHMARK_KEY, '1')
|
||||
}
|
||||
|
||||
const profileTextStyles: React.CSSProperties = {
|
||||
fontSize: '15px',
|
||||
lineHeight: '1.65',
|
||||
@@ -111,10 +165,20 @@ export function PatientSummaryTile() {
|
||||
|
||||
{/* Latest Results subsection */}
|
||||
<div style={{ marginTop: '28px' }}>
|
||||
<CardHeader dotColor="teal" title="LATEST RESULTS" rightText="Updated May 2025" />
|
||||
<CardHeader dotColor="teal" title="LATEST RESULTS (CLICK TO VIEW FULL REFERENCE RANGE)" rightText="Updated May 2025" />
|
||||
<p
|
||||
style={{
|
||||
margin: '0 0 12px 0',
|
||||
fontSize: '12px',
|
||||
color: 'var(--text-secondary)',
|
||||
fontFamily: 'var(--font-geist-mono)',
|
||||
}}
|
||||
>
|
||||
Select a metric to inspect methodology, impact, and outcomes.
|
||||
</p>
|
||||
<div className="grid-cols-1 xs:grid-cols-2" style={kpiGridStyles}>
|
||||
{kpis.map((kpi) => (
|
||||
<MetricCard key={kpi.id} kpi={kpi} />
|
||||
{kpis.map((kpi, index) => (
|
||||
<MetricCard key={kpi.id} kpi={kpi} onOpen={handleMetricOpen} showCoachmark={showCoachmark && index === 0} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user