Merge pull request 'halo effect' (#54) from pedigree-update into master

Reviewed-on: #54

client/src/components/PedigreeTree.jsx

@@ -46,15 +46,15 @@ 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 */}
+        {/* Glow halo — kept within the circle so it doesn't bleed onto text labels */}
         <circle
-          r={r + 10}
+          r={r - 4}
           fill={glowColor}
-          style={{ filter: 'blur(6px)' }}
+          style={{ filter: 'blur(4px)' }}
         />
 
         {/* Outer ring */}
@@ -95,25 +95,23 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
 
         {/* Gender / crown icon */}
         <text
-          fill={isRoot ? '#fff' : '#fff'}
-          fontSize={isRoot ? 22 : 18}
+          fontSize={isRoot ? 28 : 24}
           textAnchor="middle"
-          dy="7"
-          style={{ pointerEvents: 'none', userSelect: 'none' }}
+          dy="8"
+          style={{ fill: '#ffffff', pointerEvents: 'none', userSelect: 'none' }}
         >
           {isRoot ? '👑' : (isMale ? '♂' : '♀')}
         </text>
 
         {/* Name label */}
         <text
-          fill="var(--text-primary, #f5f0e8)"
-          fontSize={isRoot ? 15 : 13}
+          fontSize={isRoot ? 22 : 18}
           fontWeight={isRoot ? '700' : '600'}
           fontFamily="Inter, sans-serif"
           textAnchor="middle"
           x="0"
-          y={r + 18}
-          style={{ pointerEvents: 'none' }}
+          y={r + 32}
+          style={{ fill: isRoot ? '#ffffff' : '#f8fafc', pointerEvents: 'none' }}
         >
           {nodeDatum.name}
         </text>
@@ -121,13 +119,12 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
         {/* Breed label (subtle) */}
         {breed && (
           <text
-            fill="var(--text-muted, #8c8472)"
-            fontSize="10"
+            fontSize="14"
             fontFamily="Inter, sans-serif"
             textAnchor="middle"
             x="0"
-            y={r + 31}
-            style={{ pointerEvents: 'none' }}
+            y={r + 52}
+            style={{ fill: '#cbd5e1', pointerEvents: 'none' }}
           >
             {breed}
           </text>
@@ -136,13 +133,12 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
         {/* Registration number */}
         {nodeDatum.attributes?.registration && (
           <text
-            fill="var(--text-muted, #8c8472)"
-            fontSize="10"
+            fontSize="14"
             fontFamily="Inter, sans-serif"
             textAnchor="middle"
             x="0"
-            y={r + (breed ? 44 : 31)}
-            style={{ pointerEvents: 'none' }}
+            y={r + (breed ? 70 : 52)}
+            style={{ fill: '#94a3b8', pointerEvents: 'none' }}
           >
             {nodeDatum.attributes.registration}
           </text>
@@ -151,13 +147,12 @@ const PedigreeTree = ({ dogId, pedigreeData, coi }) => {
         {/* Birth year */}
         {nodeDatum.attributes?.birth_year && (
           <text
-            fill="var(--text-muted, #8c8472)"
-            fontSize="10"
+            fontSize="14"
             fontFamily="Inter, sans-serif"
             textAnchor="middle"
             x="0"
-            y={r + (breed ? 57 : (nodeDatum.attributes?.registration ? 44 : 31))}
-            style={{ pointerEvents: 'none' }}
+            y={r + (breed ? 88 : (nodeDatum.attributes?.registration ? 70 : 52))}
+            style={{ fill: '#94a3b8', pointerEvents: 'none' }}
           >
             ({nodeDatum.attributes.birth_year})
           </text>
@@ -232,8 +227,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}

client/src/components/PedigreeView.css

@@ -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 */

server/routes/pedigree.js

@@ -124,8 +124,7 @@ function calculateCOI(db, sireId, damId) {
 // 'trial-pairing' as dog IDs and return 404/wrong data.
 // =====================================================================
 
-// POST /api/pedigree/trial-pairing (alias for /coi)
-router.post(['/trial-pairing', '/coi'], (req, res) => {
+const handleTrialPairing = (req, res) => {
   try {
     const { sire_id, dam_id } = req.body;
     if (!sire_id || !dam_id) {
@@ -156,7 +155,13 @@ router.post(['/trial-pairing', '/coi'], (req, res) => {
   } catch (error) {
     res.status(500).json({ error: error.message });
   }
-});
+};
+
+// POST /api/pedigree/trial-pairing
+router.post('/trial-pairing', handleTrialPairing);
+
+// POST /api/pedigree/coi
+router.post('/coi', handleTrialPairing);
 
 // GET /api/pedigree/:id/coi
 router.get('/:id/coi', (req, res) => {

server/test_app.js

@@ -0,0 +1,26 @@
+const app = require('./index');
+const http = require('http');
+
+// Start temporary server
+const server = http.createServer(app);
+server.listen(3030, async () => {
+  console.log('Server started on 3030');
+  try {
+    const res = await fetch('http://localhost:3030/api/pedigree/relations/1/2');
+    const text = await res.text();
+    console.log('GET /api/pedigree/relations/1/2 RESPONSE:', res.status, text.substring(0, 150));
+
+    const postRes = await fetch('http://localhost:3030/api/pedigree/trial-pairing', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ sire_id: 1, dam_id: 2 })
+    });
+    const postText = await postRes.text();
+    console.log('POST /api/pedigree/trial-pairing RESPONSE:', postRes.status, postText.substring(0, 150));
+  } catch (err) {
+    console.error('Fetch error:', err);
+  } finally {
+    server.close();
+    process.exit(0);
+  }
+});

server/test_express.js

@@ -0,0 +1,8 @@
+const express = require('express');
+const router = express.Router();
+
+router.post(['/a', '/b'], (req, res) => {
+  res.send('ok');
+});
+
+console.log('Started successfully');