diff --git a/client/src/components/PedigreeTree.css b/client/src/components/PedigreeTree.css index 072a51c..43b69f5 100644 --- a/client/src/components/PedigreeTree.css +++ b/client/src/components/PedigreeTree.css @@ -1,11 +1,17 @@ +/* ─── Pedigree Tree Wrapper ──────────────────────────────────────── */ .pedigree-tree-wrapper { position: relative; width: 100%; height: calc(100vh - 200px); - background: #f9fafb; - border-radius: 8px; + background: radial-gradient( + ellipse at 20% 50%, + rgba(194, 134, 42, 0.06) 0%, + var(--bg-primary) 60% + ); + border-radius: var(--radius); 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 { @@ -13,172 +19,184 @@ 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 { position: absolute; - top: 20px; - right: 20px; + top: 16px; + right: 16px; z-index: 10; display: flex; - gap: 1rem; + gap: 0.75rem; align-items: center; } .control-group { display: flex; - gap: 0.5rem; - background: white; - padding: 0.5rem; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + gap: 0.25rem; + background: var(--bg-elevated); + padding: 0.375rem; + border-radius: var(--radius-sm); + border: 1px solid var(--border); + box-shadow: var(--shadow); + backdrop-filter: blur(8px); } .control-btn { - background: white; - border: 1px solid #e5e7eb; - border-radius: 6px; - padding: 0.5rem; + background: transparent; + border: 1px solid transparent; + border-radius: var(--radius-sm); + padding: 0.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; - transition: all 0.2s; + color: var(--text-secondary); + transition: var(--transition); } .control-btn:hover { - background: #f3f4f6; - border-color: #d1d5db; + background: var(--bg-tertiary); + border-color: var(--border); + color: var(--primary-light); } .control-btn:active { - transform: scale(0.95); + transform: scale(0.93); } +/* ─── COI Display ────────────────────────────────────────────────── */ .coi-display { - background: white; - padding: 0.75rem 1rem; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + background: var(--bg-elevated); + padding: 0.5rem 0.875rem; + border-radius: var(--radius-sm); + border: 1px solid var(--border); + box-shadow: var(--shadow); display: flex; align-items: center; gap: 0.5rem; + backdrop-filter: blur(8px); } .coi-label { font-weight: 600; - color: #6b7280; - font-size: 0.875rem; + color: var(--text-muted); + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; } .coi-value { font-weight: 700; - font-size: 1.25rem; + font-size: 1.1rem; + letter-spacing: -0.02em; } -.coi-value.low { - color: #10b981; -} - -.coi-value.medium { - color: #f59e0b; -} - -.coi-value.high { - color: #ef4444; -} +.coi-value.low { color: var(--success); } +.coi-value.medium { color: var(--warning); } +.coi-value.high { color: var(--danger); } +/* ─── Legend ─────────────────────────────────────────────────────── */ .pedigree-legend { position: absolute; - bottom: 20px; - left: 20px; + bottom: 16px; + left: 16px; z-index: 10; - background: white; - padding: 1rem; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + background: var(--bg-elevated); + padding: 0.625rem 1rem; + border-radius: var(--radius-sm); + border: 1px solid var(--border); + box-shadow: var(--shadow); display: flex; - gap: 1.5rem; + gap: 1.25rem; + backdrop-filter: blur(8px); } .legend-item { display: flex; align-items: center; - gap: 0.5rem; - font-size: 0.875rem; - color: #6b7280; + gap: 0.4rem; + font-size: 0.8rem; + color: var(--text-secondary); + font-weight: 500; } .legend-color { - width: 20px; - height: 20px; + width: 14px; + height: 14px; border-radius: 50%; - border: 2px solid white; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + border: 2px solid rgba(255,255,255,0.15); + box-shadow: 0 0 6px rgba(0,0,0,0.4); } -.legend-color.male { - background: #3b82f6; +.legend-color.male { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.4); } +.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 { - background: #ec4899; -} - -/* Mobile responsive */ +/* ─── Mobile ─────────────────────────────────────────────────────── */ @media (max-width: 768px) { .pedigree-tree-wrapper { height: calc(100vh - 150px); } - + .pedigree-controls { top: 10px; right: 10px; flex-direction: column; - gap: 0.5rem; + gap: 0.4rem; } - + .coi-display { - padding: 0.5rem 0.75rem; + padding: 0.375rem 0.625rem; } - - .coi-label { - font-size: 0.75rem; - } - - .coi-value { - font-size: 1rem; - } - + + .coi-label { font-size: 0.7rem; } + .coi-value { font-size: 0.95rem; } + .pedigree-legend { bottom: 10px; left: 10px; - padding: 0.75rem; - gap: 1rem; - } - - .legend-item { - font-size: 0.75rem; - } - - .legend-color { - width: 16px; - height: 16px; + padding: 0.5rem 0.75rem; + gap: 0.875rem; } + + .legend-item { font-size: 0.75rem; } + .legend-color { width: 12px; height: 12px; } } -/* Print styles */ +/* ─── Print ──────────────────────────────────────────────────────── */ @media print { .pedigree-controls, - .pedigree-legend { - display: none; - } - + .pedigree-legend, + .zoom-indicator { display: none; } + .pedigree-tree-wrapper { height: 100vh; box-shadow: none; background: white; + border: none; } - - .tree-container { - page-break-inside: avoid; - } -} \ No newline at end of file + + .tree-container { page-break-inside: avoid; } +} diff --git a/client/src/components/PedigreeTree.jsx b/client/src/components/PedigreeTree.jsx index ee72413..a0e7d7d 100644 --- a/client/src/components/PedigreeTree.jsx +++ b/client/src/components/PedigreeTree.jsx @@ -1,6 +1,6 @@ import { useState, useCallback, useEffect } from 'react' import Tree from 'react-d3-tree' -import { ZoomIn, ZoomOut, Maximize2, Download } from 'lucide-react' +import { ZoomIn, ZoomOut, Maximize2 } from 'lucide-react' import './PedigreeTree.css' const PedigreeTree = ({ dogId, pedigreeData, coi }) => { @@ -12,90 +12,151 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => { const updateDimensions = () => { const container = document.getElementById('tree-container') if (container) { - setDimensions({ - width: container.offsetWidth, - height: container.offsetHeight - }) - setTranslate({ - x: container.offsetWidth / 4, - y: container.offsetHeight / 2 - }) + setDimensions({ width: container.offsetWidth, height: container.offsetHeight }) + setTranslate({ x: container.offsetWidth / 4, y: container.offsetHeight / 2 }) } } - updateDimensions() window.addEventListener('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 handleReset = () => { + const handleReset = () => { setZoom(0.8) - setTranslate({ - x: dimensions.width / 4, - y: dimensions.height / 2 - }) + setTranslate({ x: dimensions.width / 4, y: dimensions.height / 2 }) } - const renderCustomNode = ({ nodeDatum, toggleNode }) => { - const isMale = nodeDatum.attributes?.sex === 'male' - const nodeColor = isMale ? '#3b82f6' : '#ec4899' - + const renderCustomNode = ({ nodeDatum }) => { + const isRoot = nodeDatum.attributes?.isRoot + 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 ( + {/* Glow halo */} + + {/* Outer ring */} + + + {/* Main node */} + { - if (nodeDatum.attributes?.id) { - window.location.href = `/dogs/${nodeDatum.attributes.id}` - } + if (hasId) window.location.href = `/dogs/${nodeDatum.attributes.id}` }} /> + + {/* SVG gradient definition for root node */} + {isRoot && ( + + + + + + + )} + + {/* Gender / crown icon */} - {isMale ? '♂' : '♀'} + {isRoot ? '👑' : (isMale ? '♂' : '♀')} + + {/* Name label */} {nodeDatum.name} - {nodeDatum.attributes?.registration && ( + + {/* Breed label (subtle) */} + {breed && ( + {breed} + + )} + + {/* Registration number */} + {nodeDatum.attributes?.registration && ( + {nodeDatum.attributes.registration} )} + + {/* Birth year */} {nodeDatum.attributes?.birth_year && ( ({nodeDatum.attributes.birth_year}) @@ -107,21 +168,24 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => { return (
+ + {/* Controls */}
- -
+ {coi !== null && coi !== undefined && (
- COI: + COI 10 ? 'high' : coi > 5 ? 'medium' : 'low'}`}> {coi.toFixed(2)}% @@ -129,31 +193,47 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => { )}
+ {/* Legend */}
-
- Male +
+ Sire
-
- Female +
+ Dam +
+
+
+ Subject
+ {/* Zoom indicator */} +
+ {Math.round(zoom * 100)}% +
+ + {/* Tree canvas */}
{pedigreeData && dimensions.width > 0 && ( { - setZoom(zoom) - setTranslate(translate) + onUpdate={({ zoom: z, translate: t }) => { + setZoom(z) + setTranslate(t) }} orientation="horizontal" pathFunc="step" - separation={{ siblings: 1.5, nonSiblings: 2 }} - nodeSize={{ x: 200, y: 150 }} + separation={{ siblings: 1.6, nonSiblings: 2.2 }} + nodeSize={{ x: 220, y: 160 }} renderCustomNodeElement={renderCustomNode} enableLegacyTransitions transitionDuration={300} @@ -164,4 +244,4 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => { ) } -export default PedigreeTree \ No newline at end of file +export default PedigreeTree diff --git a/client/src/pages/PedigreeView.jsx b/client/src/pages/PedigreeView.jsx index 8d14a5e..0d72a9a 100644 --- a/client/src/pages/PedigreeView.jsx +++ b/client/src/pages/PedigreeView.jsx @@ -22,19 +22,15 @@ function PedigreeView() { const fetchPedigreeData = async () => { setLoading(true) setError('') - + try { - // Fetch pedigree tree data const pedigreeRes = await axios.get(`/api/pedigree/${id}`) const dogData = pedigreeRes.data - setDog(dogData) - - // Transform data for react-d3-tree + const treeData = transformPedigreeData(dogData, generations) setPedigreeData(treeData) - - // Fetch COI calculation + try { const coiRes = await axios.get(`/api/pedigree/${id}/coi`) setCoiData(coiRes.data) @@ -42,7 +38,7 @@ function PedigreeView() { console.warn('COI calculation unavailable:', coiError) setCoiData(null) } - + setLoading(false) } catch (err) { console.error('Error fetching pedigree:', err) @@ -72,8 +68,8 @@ function PedigreeView() {

Error Loading Pedigree

{error}

- - +

- + {dog?.name}'s Pedigree

{dog?.registration_number && ( @@ -113,17 +112,19 @@ function PedigreeView() { {/* Stats Bar */}
+ + {/* COI */}
-
+
Coefficient of Inbreeding
{coiInfo.value} -
-
+
{coiInfo.description}
+ {/* Completeness */}
-
+
Pedigree Completeness
-
+
{completeness}%
-
-
+ {/* Generations */}
-
+
Generations Displayed
-