Minor improvements of simple family tree

geneit_app/src/api/MemberApi.ts

@@ -170,6 +170,13 @@ export class Member implements MemberDataApi {
     return birthDeath.join(" - ");
   }
 
+  get displayBirthDeathShort(): string {
+    let birthDeath = [];
+    if (this.birth_year) birthDeath.push(this.birth_year.toString());
+    if (this.death_year) birthDeath.push(this.death_year.toString());
+    return birthDeath.join(" - ");
+  }
+
   get hasContactInfo(): boolean {
     return this.email ||
       this.phone ||

geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx

@@ -35,7 +35,7 @@ const SPOUSE_SPACING = 10;
 /**
  * Space between two siblings hierachy
  */
-const SIBLINGS_SPACING = 0;
+const SIBLINGS_SPACING = 15;
 
 /**
  * Vertical space between two generations
@@ -76,9 +76,10 @@ interface SimpleTreeNode {
  */
 function memberCardWidth(m?: Member): number {
   if (!m) return 0;
-  const nameWidth = getTextWidth(m.fullName, NAME_FONT);
+  const firstNameWidth = getTextWidth(m.first_name ?? "", NAME_FONT);
+  const lastNameWidth = getTextWidth(m.lastNameUpperCase ?? "", NAME_FONT);
   const birthDeathWidth = getTextWidth(m.displayBirthDeath, BIRTH_FONT);
-  return Math.max(FACE_WIDTH, nameWidth, birthDeathWidth);
+  return Math.max(FACE_WIDTH, firstNameWidth, lastNameWidth, birthDeathWidth);
 }
 
 function center(container_width: number, el_width: number): number {
@@ -389,12 +390,15 @@ function MemberCard(p: {
           {p.member.lastNameUpperCase ?? ""}
         </tspan>
         <tspan
-          x={center(w, getTextWidth(p.member.displayBirthDeath, BIRTH_FONT))}
+          x={center(
+            w,
+            getTextWidth(p.member.displayBirthDeathShort, BIRTH_FONT)
+          )}
           dy="14"
           font-size="10"
           fontFamily="Roboto"
         >
-          {p.member.displayBirthDeath}
+          {p.member.displayBirthDeathShort}
         </tspan>
       </text>
     </g>