Update simple tree appearance

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 ?? "";
 

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))}