jason/breedr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat/pedigree-theme-visual #33

Merged
jason merged 3 commits from feat/pedigree-theme-visual into master 2026-03-09 22:47:10 -05:00
Conversation 0 Commits 3 Files Changed 3 +305 -193
3 changed files with 305 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
client/src/components/PedigreeTree.css
View File

@@ -1,11 +1,17 @@
/* ─── Pedigree Tree Wrapper ──────────────────────────────────────── */
.pedigree-tree-wrapper { .pedigree-tree-wrapper {
position: relative; position: relative;
width: 100%; width: 100%;
height: calc(100vh - 200px); height: calc(100vh - 200px);
background: #f9fafb; background: radial-gradient(
border-radius: 8px; ellipse at 20% 50%,
rgba(194, 134, 42, 0.06) 0%,
var(--bg-primary) 60%
);
border-radius: var(--radius);
overflow: hidden; overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border: 1px solid var(--border);
box-shadow: var(--shadow-lg);
} }
.tree-container { .tree-container {
@@ -13,172 +19,184 @@
height: 100%; height: 100%;
} }
/* ─── SVG Link Paths ─────────────────────────────────────────────── */
.pedigree-tree-wrapper svg .rd3t-link {
stroke: var(--border-light) !important;
stroke-width: 1.5px !important;
stroke-opacity: 0.6;
}
/* ─── Controls ───────────────────────────────────────────────────── */
.pedigree-controls { .pedigree-controls {
position: absolute; position: absolute;
top: 20px; top: 16px;
right: 20px; right: 16px;
z-index: 10; z-index: 10;
display: flex; display: flex;
gap: 1rem; gap: 0.75rem;
align-items: center; align-items: center;
} }
.control-group { .control-group {
display: flex; display: flex;
gap: 0.5rem; gap: 0.25rem;
background: white; background: var(--bg-elevated);
padding: 0.5rem; padding: 0.375rem;
border-radius: 8px; border-radius: var(--radius-sm);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border: 1px solid var(--border);
box-shadow: var(--shadow);
backdrop-filter: blur(8px);
} }
.control-btn { .control-btn {
background: white; background: transparent;
border: 1px solid #e5e7eb; border: 1px solid transparent;
border-radius: 6px; border-radius: var(--radius-sm);
padding: 0.5rem; padding: 0.4rem;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s; color: var(--text-secondary);
transition: var(--transition);
} }
.control-btn:hover { .control-btn:hover {
background: #f3f4f6; background: var(--bg-tertiary);
border-color: #d1d5db; border-color: var(--border);
color: var(--primary-light);
} }
.control-btn:active { .control-btn:active {
transform: scale(0.95); transform: scale(0.93);
} }
/* ─── COI Display ────────────────────────────────────────────────── */
.coi-display { .coi-display {
background: white; background: var(--bg-elevated);
padding: 0.75rem 1rem; padding: 0.5rem 0.875rem;
border-radius: 8px; border-radius: var(--radius-sm);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border: 1px solid var(--border);
box-shadow: var(--shadow);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
backdrop-filter: blur(8px);
} }
.coi-label { .coi-label {
font-weight: 600; font-weight: 600;
color: #6b7280; color: var(--text-muted);
font-size: 0.875rem; font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
} }
.coi-value { .coi-value {
font-weight: 700; font-weight: 700;
font-size: 1.25rem; font-size: 1.1rem;
letter-spacing: -0.02em;
} }
.coi-value.low { .coi-value.low { color: var(--success); }
color: #10b981; .coi-value.medium { color: var(--warning); }
} .coi-value.high { color: var(--danger); }
.coi-value.medium {
color: #f59e0b;
}
.coi-value.high {
color: #ef4444;
}
/* ─── Legend ─────────────────────────────────────────────────────── */
.pedigree-legend { .pedigree-legend {
position: absolute; position: absolute;
bottom: 20px; bottom: 16px;
left: 20px; left: 16px;
z-index: 10; z-index: 10;
background: white; background: var(--bg-elevated);
padding: 1rem; padding: 0.625rem 1rem;
border-radius: 8px; border-radius: var(--radius-sm);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border: 1px solid var(--border);
box-shadow: var(--shadow);
display: flex; display: flex;
gap: 1.5rem; gap: 1.25rem;
backdrop-filter: blur(8px);
} }
.legend-item { .legend-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.4rem;
font-size: 0.875rem; font-size: 0.8rem;
color: #6b7280; color: var(--text-secondary);
font-weight: 500;
} }
.legend-color { .legend-color {
width: 20px; width: 14px;
height: 20px; height: 14px;
border-radius: 50%; border-radius: 50%;
border: 2px solid white; border: 2px solid rgba(255,255,255,0.15);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 6px rgba(0,0,0,0.4);
} }
.legend-color.male { .legend-color.male { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.4); }
background: #3b82f6; .legend-color.female { background: #ec4899; box-shadow: 0 0 8px rgba(236,72,153,0.4); }
/* ─── Zoom Indicator ─────────────────────────────────────────────── */
.zoom-indicator {
position: absolute;
bottom: 16px;
right: 16px;
z-index: 10;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.3rem 0.6rem;
font-size: 0.7rem;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
backdrop-filter: blur(8px);
} }
.legend-color.female { /* ─── Mobile ─────────────────────────────────────────────────────── */
background: #ec4899;
}
/* Mobile responsive */
@media (max-width: 768px) { @media (max-width: 768px) {
.pedigree-tree-wrapper { .pedigree-tree-wrapper {
height: calc(100vh - 150px); height: calc(100vh - 150px);
} }
.pedigree-controls { .pedigree-controls {
top: 10px; top: 10px;
right: 10px; right: 10px;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.4rem;
} }
.coi-display { .coi-display {
padding: 0.5rem 0.75rem; padding: 0.375rem 0.625rem;
} }
.coi-label { .coi-label { font-size: 0.7rem; }
font-size: 0.75rem; .coi-value { font-size: 0.95rem; }
}
.coi-value {
font-size: 1rem;
}
.pedigree-legend { .pedigree-legend {
bottom: 10px; bottom: 10px;
left: 10px; left: 10px;
padding: 0.75rem; padding: 0.5rem 0.75rem;
gap: 1rem; gap: 0.875rem;
}
.legend-item {
font-size: 0.75rem;
}
.legend-color {
width: 16px;
height: 16px;
} }
.legend-item { font-size: 0.75rem; }
.legend-color { width: 12px; height: 12px; }
} }
/* Print styles */ /* ─── Print ──────────────────────────────────────────────────────── */
@media print { @media print {
.pedigree-controls, .pedigree-controls,
.pedigree-legend { .pedigree-legend,
display: none; .zoom-indicator { display: none; }
}
.pedigree-tree-wrapper { .pedigree-tree-wrapper {
height: 100vh; height: 100vh;
box-shadow: none; box-shadow: none;
background: white; background: white;
border: none;
} }
.tree-container { .tree-container { page-break-inside: avoid; }
page-break-inside: avoid; }
}
}

202
client/src/components/PedigreeTree.jsx
View File

@@ -1,6 +1,6 @@
import { useState, useCallback, useEffect } from 'react' import { useState, useCallback, useEffect } from 'react'
import Tree from 'react-d3-tree' import Tree from 'react-d3-tree'
import { ZoomIn, ZoomOut, Maximize2, Download } from 'lucide-react' import { ZoomIn, ZoomOut, Maximize2 } from 'lucide-react'
import './PedigreeTree.css' import './PedigreeTree.css'
const PedigreeTree = ({ dogId, pedigreeData, coi }) => { const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
@@ -12,90 +12,151 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
const updateDimensions = () => { const updateDimensions = () => {
const container = document.getElementById('tree-container') const container = document.getElementById('tree-container')
if (container) { if (container) {
setDimensions({ setDimensions({ width: container.offsetWidth, height: container.offsetHeight })
width: container.offsetWidth, setTranslate({ x: container.offsetWidth / 4, y: container.offsetHeight / 2 })
height: container.offsetHeight
})
setTranslate({
x: container.offsetWidth / 4,
y: container.offsetHeight / 2
})
} }
} }
updateDimensions() updateDimensions()
window.addEventListener('resize', updateDimensions) window.addEventListener('resize', updateDimensions)
return () => window.removeEventListener('resize', updateDimensions) return () => window.removeEventListener('resize', updateDimensions)
}, []) }, [])
const handleZoomIn = () => setZoom(z => Math.min(z + 0.2, 2)) const handleZoomIn = () => setZoom(z => Math.min(z + 0.2, 2))
const handleZoomOut = () => setZoom(z => Math.max(z - 0.2, 0.2)) const handleZoomOut = () => setZoom(z => Math.max(z - 0.2, 0.2))
const handleReset = () => { const handleReset = () => {
setZoom(0.8) setZoom(0.8)
setTranslate({ setTranslate({ x: dimensions.width / 4, y: dimensions.height / 2 })
x: dimensions.width / 4,
y: dimensions.height / 2
})
} }
const renderCustomNode = ({ nodeDatum, toggleNode }) => { const renderCustomNode = ({ nodeDatum }) => {
const isMale = nodeDatum.attributes?.sex === 'male' const isRoot = nodeDatum.attributes?.isRoot
const nodeColor = isMale ? '#3b82f6' : '#ec4899' const isMale = nodeDatum.attributes?.sex === 'male'
const hasId = !!nodeDatum.attributes?.id
const breed = nodeDatum.attributes?.breed
// Colour palette aligned to app theme
const maleColor = '#3b82f6'
const femaleColor = '#ec4899'
const rootGold = '#c2862a' // --primary
const rootAccent = '#9b3a10' // --accent
const nodeColor = isRoot ? rootGold : (isMale ? maleColor : femaleColor)
const glowColor = isRoot
? 'rgba(194,134,42,0.35)'
: (isMale ? 'rgba(59,130,246,0.3)' : 'rgba(236,72,153,0.3)')
const ringColor = isRoot ? rootAccent : nodeColor
const r = isRoot ? 34 : 28
return ( return (
<g> <g>
{/* Glow halo */}
<circle <circle
r={30} r={r + 10}
fill={nodeColor} fill={glowColor}
stroke="#fff" style={{ filter: 'blur(6px)' }}
strokeWidth={3} />
opacity={0.9}
style={{ cursor: nodeDatum.attributes?.id ? 'pointer' : 'default' }} {/* Outer ring */}
<circle
r={r + 4}
fill="none"
stroke={ringColor}
strokeWidth={isRoot ? 2 : 1.5}
strokeOpacity={0.5}
/>
{/* Main node */}
<circle
r={r}
fill={isRoot
? `url(#rootGradient)`
: nodeColor}
stroke="rgba(255,255,255,0.15)"
strokeWidth={2}
style={{
cursor: hasId ? 'pointer' : 'default',
filter: isRoot ? 'drop-shadow(0 0 8px rgba(194,134,42,0.6))' : 'none'
}}
onClick={() => { onClick={() => {
if (nodeDatum.attributes?.id) { if (hasId) window.location.href = `/dogs/${nodeDatum.attributes.id}`
window.location.href = `/dogs/${nodeDatum.attributes.id}`
}
}} }}
/> />
{/* SVG gradient definition for root node */}
{isRoot && (
<defs>
<radialGradient id="rootGradient" cx="35%" cy="35%">
<stop offset="0%" stopColor="#e0a84a" />
<stop offset="100%" stopColor="#9b3a10" />
</radialGradient>
</defs>
)}
{/* Gender / crown icon */}
<text <text
fill="#fff" fill={isRoot ? '#fff' : '#fff'}
fontSize="24" fontSize={isRoot ? 22 : 18}
textAnchor="middle" textAnchor="middle"
dy="8" dy="7"
style={{ pointerEvents: 'none' }} style={{ pointerEvents: 'none', userSelect: 'none' }}
> >
{isMale ? '♂' : '♀'} {isRoot ? '👑' : (isMale ? '♂' : '♀')}
</text> </text>
{/* Name label */}
<text <text
fill="#1f2937" fill="var(--text-primary, #f5f0e8)"
fontSize="14" fontSize={isRoot ? 15 : 13}
fontWeight="600" fontWeight={isRoot ? '700' : '600'}
fontFamily="Inter, sans-serif"
textAnchor="middle" textAnchor="middle"
x="0" x="0"
y="50" y={r + 18}
style={{ pointerEvents: 'none' }} style={{ pointerEvents: 'none' }}
> >
{nodeDatum.name} {nodeDatum.name}
</text> </text>
{nodeDatum.attributes?.registration && (
{/* Breed label (subtle) */}
{breed && (
<text <text
fill="#6b7280" fill="var(--text-muted, #8c8472)"
fontSize="11" fontSize="10"
fontFamily="Inter, sans-serif"
textAnchor="middle" textAnchor="middle"
x="0" x="0"
y="65" y={r + 31}
style={{ pointerEvents: 'none' }}
>
{breed}
</text>
)}
{/* Registration number */}
{nodeDatum.attributes?.registration && (
<text
fill="var(--text-muted, #8c8472)"
fontSize="10"
fontFamily="Inter, sans-serif"
textAnchor="middle"
x="0"
y={r + (breed ? 44 : 31)}
style={{ pointerEvents: 'none' }} style={{ pointerEvents: 'none' }}
> >
{nodeDatum.attributes.registration} {nodeDatum.attributes.registration}
</text> </text>
)} )}
{/* Birth year */}
{nodeDatum.attributes?.birth_year && ( {nodeDatum.attributes?.birth_year && (
<text <text
fill="#6b7280" fill="var(--text-muted, #8c8472)"
fontSize="11" fontSize="10"
fontFamily="Inter, sans-serif"
textAnchor="middle" textAnchor="middle"
x="0" x="0"
y="78" y={r + (breed ? 57 : (nodeDatum.attributes?.registration ? 44 : 31))}
style={{ pointerEvents: 'none' }} style={{ pointerEvents: 'none' }}
> >
({nodeDatum.attributes.birth_year}) ({nodeDatum.attributes.birth_year})
@@ -107,21 +168,24 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
return ( return (
<div className="pedigree-tree-wrapper"> <div className="pedigree-tree-wrapper">
{/* Controls */}
<div className="pedigree-controls"> <div className="pedigree-controls">
<div className="control-group"> <div className="control-group">
<button onClick={handleZoomIn} className="control-btn" title="Zoom In"> <button onClick={handleZoomIn} className="control-btn" title="Zoom In">
<ZoomIn size={20} /> <ZoomIn size={18} />
</button> </button>
<button onClick={handleZoomOut} className="control-btn" title="Zoom Out"> <button onClick={handleZoomOut} className="control-btn" title="Zoom Out">
<ZoomOut size={20} /> <ZoomOut size={18} />
</button> </button>
<button onClick={handleReset} className="control-btn" title="Reset View"> <button onClick={handleReset} className="control-btn" title="Reset View">
<Maximize2 size={20} /> <Maximize2 size={18} />
</button> </button>
</div> </div>
{coi !== null && coi !== undefined && ( {coi !== null && coi !== undefined && (
<div className="coi-display"> <div className="coi-display">
<span className="coi-label">COI:</span> <span className="coi-label">COI</span>
<span className={`coi-value ${coi > 10 ? 'high' : coi > 5 ? 'medium' : 'low'}`}> <span className={`coi-value ${coi > 10 ? 'high' : coi > 5 ? 'medium' : 'low'}`}>
{coi.toFixed(2)}% {coi.toFixed(2)}%
</span> </span>
@@ -129,31 +193,47 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
)} )}
</div> </div>
{/* Legend */}
<div className="pedigree-legend"> <div className="pedigree-legend">
<div className="legend-item"> <div className="legend-item">
<div className="legend-color male"></div> <div className="legend-color male" />
<span>Male</span> <span>Sire</span>
</div> </div>
<div className="legend-item"> <div className="legend-item">
<div className="legend-color female"></div> <div className="legend-color female" />
<span>Female</span> <span>Dam</span>
</div>
<div className="legend-item">
<div style={{
width: 14, height: 14, borderRadius: '50%',
background: 'linear-gradient(135deg, #e0a84a, #9b3a10)',
boxShadow: '0 0 8px rgba(194,134,42,0.5)',
border: '2px solid rgba(255,255,255,0.15)'
}} />
<span>Subject</span>
</div> </div>
</div> </div>
{/* Zoom indicator */}
<div className="zoom-indicator">
{Math.round(zoom * 100)}%
</div>
{/* Tree canvas */}
<div id="tree-container" className="tree-container"> <div id="tree-container" className="tree-container">
{pedigreeData && dimensions.width > 0 && ( {pedigreeData && dimensions.width > 0 && (
<Tree <Tree
data={pedigreeData} data={pedigreeData}
translate={translate} translate={translate}
zoom={zoom} zoom={zoom}
onUpdate={({ zoom, translate }) => { onUpdate={({ zoom: z, translate: t }) => {
setZoom(zoom) setZoom(z)
setTranslate(translate) setTranslate(t)
}} }}
orientation="horizontal" orientation="horizontal"
pathFunc="step" pathFunc="step"
separation={{ siblings: 1.5, nonSiblings: 2 }} separation={{ siblings: 1.6, nonSiblings: 2.2 }}
nodeSize={{ x: 200, y: 150 }} nodeSize={{ x: 220, y: 160 }}
renderCustomNodeElement={renderCustomNode} renderCustomNodeElement={renderCustomNode}
enableLegacyTransitions enableLegacyTransitions
transitionDuration={300} transitionDuration={300}
@@ -164,4 +244,4 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
) )
} }
export default PedigreeTree export default PedigreeTree

94
client/src/pages/PedigreeView.jsx
View File

@@ -22,19 +22,15 @@ function PedigreeView() {
const fetchPedigreeData = async () => { const fetchPedigreeData = async () => {
setLoading(true) setLoading(true)
setError('') setError('')
try { try {
// Fetch pedigree tree data
const pedigreeRes = await axios.get(`/api/pedigree/${id}`) const pedigreeRes = await axios.get(`/api/pedigree/${id}`)
const dogData = pedigreeRes.data const dogData = pedigreeRes.data
setDog(dogData) setDog(dogData)
// Transform data for react-d3-tree
const treeData = transformPedigreeData(dogData, generations) const treeData = transformPedigreeData(dogData, generations)
setPedigreeData(treeData) setPedigreeData(treeData)
// Fetch COI calculation
try { try {
const coiRes = await axios.get(`/api/pedigree/${id}/coi`) const coiRes = await axios.get(`/api/pedigree/${id}/coi`)
setCoiData(coiRes.data) setCoiData(coiRes.data)
@@ -42,7 +38,7 @@ function PedigreeView() {
console.warn('COI calculation unavailable:', coiError) console.warn('COI calculation unavailable:', coiError)
setCoiData(null) setCoiData(null)
} }
setLoading(false) setLoading(false)
} catch (err) { } catch (err) {
console.error('Error fetching pedigree:', err) console.error('Error fetching pedigree:', err)
@@ -72,8 +68,8 @@ function PedigreeView() {
<AlertCircle size={64} style={{ color: 'var(--danger)', margin: '0 auto 1rem' }} /> <AlertCircle size={64} style={{ color: 'var(--danger)', margin: '0 auto 1rem' }} />
<h2>Error Loading Pedigree</h2> <h2>Error Loading Pedigree</h2>
<p style={{ color: 'var(--text-secondary)', marginTop: '0.5rem' }}>{error}</p> <p style={{ color: 'var(--text-secondary)', marginTop: '0.5rem' }}>{error}</p>
<button <button
className="btn btn-primary" className="btn btn-primary"
onClick={() => navigate('/dogs')} onClick={() => navigate('/dogs')}
style={{ marginTop: '1.5rem' }} style={{ marginTop: '1.5rem' }}
> >
@@ -84,11 +80,14 @@ function PedigreeView() {
) )
} }
// Completeness bar colour — uses theme tokens
const barColor = completeness === 100 ? 'var(--success)' : 'var(--primary)'
return ( return (
<div className="container"> <div className="container">
{/* Header */} {/* Header */}
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem' }}>
<button <button
className="btn btn-secondary" className="btn btn-secondary"
onClick={() => navigate(`/dogs/${id}`)} onClick={() => navigate(`/dogs/${id}`)}
style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
@@ -96,10 +95,10 @@ function PedigreeView() {
<ArrowLeft size={20} /> <ArrowLeft size={20} />
Back to Profile Back to Profile
</button> </button>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<h1 style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '0.75rem' }}> <h1 style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
<GitBranch size={32} /> <GitBranch size={32} style={{ color: 'var(--primary)' }} />
{dog?.name}'s Pedigree {dog?.name}'s Pedigree
</h1> </h1>
{dog?.registration_number && ( {dog?.registration_number && (
@@ -113,17 +112,19 @@ function PedigreeView() {
{/* Stats Bar */} {/* Stats Bar */}
<div className="card" style={{ marginBottom: '1rem', padding: '1rem' }}> <div className="card" style={{ marginBottom: '1rem', padding: '1rem' }}>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1.5rem' }}> <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1.5rem' }}>
{/* COI */}
<div> <div>
<div style={{ fontSize: '0.875rem', color: 'var(--text-secondary)', marginBottom: '0.25rem' }}> <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)', marginBottom: '0.25rem', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 500 }}>
Coefficient of Inbreeding Coefficient of Inbreeding
</div> </div>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<span style={{ fontSize: '1.5rem', fontWeight: '700', color: coiInfo.color }}> <span style={{ fontSize: '1.5rem', fontWeight: '700', color: coiInfo.color }}>
{coiInfo.value} {coiInfo.value}
</span> </span>
<span style={{ <span style={{
fontSize: '0.75rem', fontSize: '0.75rem',
padding: '0.25rem 0.5rem', padding: '0.25rem 0.5rem',
borderRadius: '4px', borderRadius: '4px',
background: coiInfo.color + '20', background: coiInfo.color + '20',
color: coiInfo.color, color: coiInfo.color,
@@ -133,41 +134,46 @@ function PedigreeView() {
{coiInfo.level} {coiInfo.level}
</span> </span>
</div> </div>
<div style={{ fontSize: '0.75rem', color: 'var(--text-secondary)', marginTop: '0.25rem' }}> <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginTop: '0.25rem' }}>
{coiInfo.description} {coiInfo.description}
</div> </div>
</div> </div>
{/* Completeness */}
<div> <div>
<div style={{ fontSize: '0.875rem', color: 'var(--text-secondary)', marginBottom: '0.25rem' }}> <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)', marginBottom: '0.25rem', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 500 }}>
Pedigree Completeness Pedigree Completeness
</div> </div>
<div style={{ fontSize: '1.5rem', fontWeight: '700' }}> <div style={{ fontSize: '1.5rem', fontWeight: '700', color: 'var(--text-primary)' }}>
{completeness}% {completeness}%
</div> </div>
<div style={{ marginTop: '0.5rem' }}> <div style={{ marginTop: '0.5rem' }}>
<div style={{ <div style={{
height: '8px', height: '6px',
background: '#e5e7eb', background: 'var(--bg-tertiary)',
borderRadius: '4px', borderRadius: '3px',
overflow: 'hidden' overflow: 'hidden',
border: '1px solid var(--border)'
}}> }}>
<div style={{ <div style={{
height: '100%', height: '100%',
width: `${completeness}%`, width: `${completeness}%`,
background: completeness === 100 ? '#10b981' : '#3b82f6', background: barColor,
transition: 'width 0.3s ease' borderRadius: '3px',
transition: 'width 0.4s ease',
boxShadow: `0 0 6px ${barColor}`
}} /> }} />
</div> </div>
</div> </div>
</div> </div>
{/* Generations */}
<div> <div>
<div style={{ fontSize: '0.875rem', color: 'var(--text-secondary)', marginBottom: '0.25rem' }}> <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)', marginBottom: '0.25rem', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 500 }}>
Generations Displayed Generations Displayed
</div> </div>
<select <select
className="input" className="input"
value={generations} value={generations}
onChange={(e) => setGenerations(Number(e.target.value))} onChange={(e) => setGenerations(Number(e.target.value))}
style={{ marginTop: '0.25rem' }} style={{ marginTop: '0.25rem' }}
@@ -183,14 +189,14 @@ function PedigreeView() {
{/* Pedigree Tree */} {/* Pedigree Tree */}
<div className="card" style={{ padding: 0 }}> <div className="card" style={{ padding: 0 }}>
{pedigreeData ? ( {pedigreeData ? (
<PedigreeTree <PedigreeTree
dogId={id} dogId={id}
pedigreeData={pedigreeData} pedigreeData={pedigreeData}
coi={coiData?.coi} coi={coiData?.coi}
/> />
) : ( ) : (
<div style={{ textAlign: 'center', padding: '4rem' }}> <div style={{ textAlign: 'center', padding: '4rem' }}>
<GitBranch size={64} style={{ color: 'var(--text-secondary)', margin: '0 auto 1rem' }} /> <GitBranch size={64} style={{ color: 'var(--text-muted)', margin: '0 auto 1rem' }} />
<h3>No Pedigree Data Available</h3> <h3>No Pedigree Data Available</h3>
<p style={{ color: 'var(--text-secondary)' }}> <p style={{ color: 'var(--text-secondary)' }}>
Add parent information to this dog to build the pedigree tree. Add parent information to this dog to build the pedigree tree.
@@ -199,15 +205,23 @@ function PedigreeView() {
)} )}
</div> </div>
{/* Help Text */} {/* Tip */}
<div className="card" style={{ marginTop: '1rem', background: '#eff6ff', border: '1px solid #bfdbfe' }}> <div className="card" style={{
<div style={{ fontSize: '0.875rem', color: '#1e40af' }}> marginTop: '1rem',
<strong>💡 Tip:</strong> Click on any ancestor node to navigate to their profile. background: 'var(--bg-elevated)',
Use the zoom controls to explore the tree, or drag to pan around. border: '1px solid var(--border-light)'
}}>
<div style={{ fontSize: '0.875rem', color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<span style={{ color: 'var(--primary)' }}>&#128161;</span>
<span>
<strong style={{ color: 'var(--text-primary)' }}>Tip:</strong>{' '}
Click any ancestor node to navigate to their profile.
Use the zoom controls or scroll to explore the tree, and drag to pan.
</span>
</div> </div>
</div> </div>
</div> </div>
) )
} }
export default PedigreeView export default PedigreeView