From d0013d41bb6356ef337c1bafb0653f0000e907ac Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Sat, 26 Aug 2023 15:05:53 +0200
Subject: [PATCH] Update simple tree appearance

---
 geneit_app/src/api/MemberApi.ts               |  4 ++++
 .../simple_family_tree/SimpleFamilyTree.tsx   | 21 ++++++++++++++-----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/geneit_app/src/api/MemberApi.ts b/geneit_app/src/api/MemberApi.ts
index 7823e6b..0a0074b 100644
--- a/geneit_app/src/api/MemberApi.ts
+++ b/geneit_app/src/api/MemberApi.ts
@@ -107,6 +107,10 @@ export class Member implements MemberDataApi {
     });
   }
 
+  get lastNameUpperCase(): string | undefined {
+    return this.last_name?.toUpperCase();
+  }
+
   get fullName(): string {
     const firstName = this.first_name ?? "";
 
diff --git a/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx b/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx
index 375ac8c..e4ac845 100644
--- a/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx
+++ b/geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx
@@ -16,7 +16,7 @@ const FACE_TEXT_SPACING = 2;
 /**
  * Cards height
  */
-const CARD_HEIGHT = 103;
+const CARD_HEIGHT = 114;
 
 /**
  * Space between spouse cards
@@ -26,7 +26,7 @@ const SPOUSE_SPACING = 10;
 /**
  * Space between two siblings hierachy
  */
-const SIBLINGS_SPACING = 10;
+const SIBLINGS_SPACING = 0;
 
 /**
  * Vertical space between two generations
@@ -235,7 +235,7 @@ function NodeArea(p: {
   } else {
     childrenLinkX =
       parent_x_offset + Math.floor(memberCardWidth(p.node.member) / 2);
-    childrenLinkY = p.y + CARD_HEIGHT;
+    childrenLinkY = p.y + CARD_HEIGHT + 2;
   }
 
   return (
@@ -320,12 +320,23 @@ function MemberCard(p: {
       {/* Member text */}
       <text y={FACE_HEIGHT + FACE_TEXT_SPACING}>
         <tspan
-          x={center(w, getTextWidth(p.member.fullName, NAME_FONT))}
+          x={center(w, getTextWidth(p.member.first_name ?? "", NAME_FONT))}
           dy="14"
           font-size="13"
           fontFamily="Roboto"
         >
-          {p.member.fullName}
+          {p.member.first_name ?? ""}
+        </tspan>
+        <tspan
+          x={center(
+            w,
+            getTextWidth(p.member.lastNameUpperCase ?? "", NAME_FONT)
+          )}
+          dy="14"
+          font-size="13"
+          fontFamily="Roboto"
+        >
+          {p.member.lastNameUpperCase ?? ""}
         </tspan>
         <tspan
           x={center(w, getTextWidth(p.member.displayBirthDeath, BIRTH_FONT))}