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

ped changes #51

Merged
jason merged 1 commits from pedigree-update into master 2026-03-11 15:27:42 -05:00
Conversation 0 Commits 1 Files Changed 2 +38 -37
2 changed files with 38 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,13 +46,13 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
: (isMale ? 'rgba(59,130,246,0.3)' : 'rgba(236,72,153,0.3)')
const ringColor = isRoot ? rootAccent : nodeColor
const r = isRoot ? 34 : 28
const r = isRoot ? 46 : 38
return (
<g>
{/* Glow halo */}
<circle
r={r + 10}
r={r + 12}
fill={glowColor}
style={{ filter: 'blur(6px)' }}
/>
@@ -95,10 +95,10 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
{/* Gender / crown icon */}
<text
fill={isRoot ? '#fff' : '#fff'}
fontSize={isRoot ? 22 : 18}
fill="#fff"
fontSize={isRoot ? 26 : 22}
textAnchor="middle"
dy="7"
dy="8"
style={{ pointerEvents: 'none', userSelect: 'none' }}
>
{isRoot ? '👑' : (isMale ? '♂' : '♀')}
@@ -106,14 +106,14 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
{/* Name label */}
<text
fill="var(--text-primary, #f5f0e8)"
fontSize={isRoot ? 15 : 13}
fill="var(--text-primary, #ffffff)"
fontSize={isRoot ? 18 : 15}
fontWeight={isRoot ? '700' : '600'}
fontFamily="Inter, sans-serif"
textAnchor="middle"
x="0"
y={r + 18}
style={{ pointerEvents: 'none' }}
y={r + 24}
style={{ pointerEvents: 'none', textShadow: '0 2px 4px rgba(0,0,0,0.8)' }}
>
{nodeDatum.name}
</text>
@@ -121,13 +121,13 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
{/* Breed label (subtle) */}
{breed && (
<text
fill="var(--text-muted, #8c8472)"
fontSize="10"
fill="var(--text-muted, #d1d5db)"
fontSize="12"
fontFamily="Inter, sans-serif"
textAnchor="middle"
x="0"
y={r + 31}
style={{ pointerEvents: 'none' }}
y={r + 42}
style={{ pointerEvents: 'none', textShadow: '0 1px 3px rgba(0,0,0,0.8)' }}
>
{breed}
</text>
@@ -136,13 +136,13 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
{/* Registration number */}
{nodeDatum.attributes?.registration && (
<text
fill="var(--text-muted, #8c8472)"
fontSize="10"
fill="var(--text-muted, #d1d5db)"
fontSize="12"
fontFamily="Inter, sans-serif"
textAnchor="middle"
x="0"
y={r + (breed ? 44 : 31)}
style={{ pointerEvents: 'none' }}
y={r + (breed ? 58 : 42)}
style={{ pointerEvents: 'none', textShadow: '0 1px 3px rgba(0,0,0,0.8)' }}
>
{nodeDatum.attributes.registration}
</text>
@@ -151,13 +151,13 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
{/* Birth year */}
{nodeDatum.attributes?.birth_year && (
<text
fill="var(--text-muted, #8c8472)"
fontSize="10"
fill="var(--text-muted, #d1d5db)"
fontSize="12"
fontFamily="Inter, sans-serif"
textAnchor="middle"
x="0"
y={r + (breed ? 57 : (nodeDatum.attributes?.registration ? 44 : 31))}
style={{ pointerEvents: 'none' }}
y={r + (breed ? 74 : (nodeDatum.attributes?.registration ? 58 : 42))}
style={{ pointerEvents: 'none', textShadow: '0 1px 3px rgba(0,0,0,0.8)' }}
>
({nodeDatum.attributes.birth_year})
</text>
@@ -232,8 +232,8 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
}}
orientation="horizontal"
pathFunc="step"
separation={{ siblings: 1.6, nonSiblings: 2.2 }}
nodeSize={{ x: 220, y: 160 }}
separation={{ siblings: 1.8, nonSiblings: 2.4 }}
nodeSize={{ x: 280, y: 200 }}
renderCustomNodeElement={renderCustomNode}
enableLegacyTransitions
transitionDuration={300}

29
client/src/components/PedigreeView.css
View File

@@ -2,7 +2,8 @@
position: relative;
width: 95vw;
height: 90vh;
background: white;
background: var(--bg-primary, #1e1e24);
border: 1px solid var(--border, #333);
border-radius: 12px;
display: flex;
flex-direction: column;
@@ -11,7 +12,7 @@
.pedigree-container {
flex: 1;
background: linear-gradient(to bottom, #f8fafc 0%, #e2e8f0 100%);
background: var(--bg-primary, #1e1e24);
position: relative;
overflow: hidden;
}
@@ -26,8 +27,8 @@
display: flex;
gap: 2rem;
padding: 0.75rem 1.5rem;
background: #f1f5f9;
border-bottom: 1px solid #e2e8f0;
background: var(--bg-elevated, #2a2a35);
border-bottom: 1px solid var(--border, #333);
justify-content: center;
}
@@ -35,8 +36,8 @@
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: #475569;
font-size: 1rem;
color: var(--text-secondary, #a1a1aa);
}
.legend-color {
@@ -57,10 +58,10 @@
.pedigree-info {
padding: 0.75rem 1.5rem;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
font-size: 0.875rem;
color: #64748b;
background: var(--bg-elevated, #2a2a35);
border-top: 1px solid var(--border, #333);
font-size: 1rem;
color: var(--text-muted, #a1a1aa);
text-align: center;
}
@@ -69,7 +70,7 @@
}
.pedigree-info strong {
color: #334155;
color: var(--text-primary, #ffffff);
}
/* Override react-d3-tree styles */
@@ -94,12 +95,12 @@
.rd3t-label__title {
font-weight: 600;
fill: #1e293b;
fill: var(--text-primary, #ffffff);
}
.rd3t-label__attributes {
font-size: 0.875rem;
fill: #64748b;
font-size: 1rem;
fill: var(--text-muted, #a1a1aa);
}
/* Loading state */