Can build ascending tree

geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx

@@ -122,7 +122,10 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
         {currTab === CurrTab.BasicTree ? (
           <BasicFamilyTree tree={tree!} />
         ) : (
-          <ComplexFamilyTree tree={tree!} />
+          <ComplexFamilyTree
+            tree={tree!}
+            isUp={currMode === TreeMode.Ascending}
+          />
         )}
       </Paper>
     </div>

geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx

@@ -2,16 +2,17 @@ import React from "react";
 import f3, { f3Data } from "family-chart";
 import "./family-chart.css";
 import { FamilyTreeNode } from "../../utils/family_tree";
-import { fmtDate } from "../../api/MemberApi";
+import { Member, fmtDate } from "../../api/MemberApi";
 
 export function ComplexFamilyTree(p: {
   tree: FamilyTreeNode;
+  isUp: boolean;
 }): React.ReactElement {
   const refCb = (container: HTMLDivElement) => {
     if (!container) return;
 
     const store = f3.createStore({
-        data: treeToF3Data(p.tree),
+        data: treeToF3Data(p.tree, p.isUp),
         node_separation: 250,
         level_separation: 150,
       }),
@@ -48,12 +49,14 @@ export function ComplexFamilyTree(p: {
   return <div className="f3" id="FamilyChart" ref={refCb}></div>;
 }
 
-function treeToF3Data(node: FamilyTreeNode): f3Data[] {
+function treeToF3Data(node: FamilyTreeNode, isUp: boolean): f3Data[] {
   const availableMembers = new Set<number>();
   getAvailableMembers(node, availableMembers);
 
   const list: f3Data[] = [];
-  treeToF3DataRecurse(node, list, availableMembers);
+  if (isUp) {
+    treeToF3DataUpRecurse(node, list, availableMembers);
+  } else treeToF3DataDownRecurse(node, list, availableMembers);
   console.info(list);
   return list;
 }
@@ -69,7 +72,57 @@ function getAvailableMembers(t: FamilyTreeNode, s: Set<number>) {
   t.down?.forEach((e) => getAvailableMembers(e, s));
 }
 
-function treeToF3DataRecurse(
+function memberData(m: Member): f3.f3DataData {
+  return {
+    first_name: m.first_name ?? "_",
+    last_name: m.last_name ?? "_",
+    gender: m.sex ?? "M",
+    avatar: m.thumbnailURL ?? undefined,
+    birthday: m.dateOfBirth ? fmtDate(m.dateOfBirth) : undefined,
+  };
+}
+
+function treeToF3DataUpRecurse(
+  node: FamilyTreeNode,
+  array: f3Data[],
+  availableMembers: Set<number>,
+  child?: number,
+  spouses?: number[]
+) {
+  array.push({
+    data: memberData(node.member),
+    id: node.member.id.toString(),
+    rels: {
+      father:
+        node.member.father && availableMembers.has(node.member.father)
+          ? node.member.father.toString()
+          : undefined,
+      mother:
+        node.member.mother && availableMembers.has(node.member.mother)
+          ? node.member.mother.toString()
+          : undefined,
+
+      spouses: spouses
+        ?.filter((c) => c !== node.member.id)
+        .map((c) => c.toString()),
+      children: child ? [child.toString()] : undefined,
+    },
+  });
+
+  const parentSpouses = node.down?.map((c) => c.member.id);
+
+  node.down?.forEach((d) =>
+    treeToF3DataUpRecurse(
+      d,
+      array,
+      availableMembers,
+      node.member.id,
+      parentSpouses
+    )
+  );
+}
+
+function treeToF3DataDownRecurse(
   node: FamilyTreeNode,
   array: f3Data[],
   availableMembers: Set<number>
@@ -81,15 +134,7 @@ function treeToF3DataRecurse(
   );
 
   array.push({
-    data: {
-      first_name: node.member.first_name ?? "_",
-      last_name: node.member.last_name ?? "_",
-      gender: node.member.sex ?? "M",
-      avatar: node.member.thumbnailURL ?? undefined,
-      birthday: node.member.dateOfBirth
-        ? fmtDate(node.member.dateOfBirth)
-        : undefined,
-    },
+    data: memberData(node.member),
     id: node.member.id.toString(),
     rels: {
       father:
@@ -106,20 +151,14 @@ function treeToF3DataRecurse(
     },
   });
 
-  node?.down?.forEach((e) => treeToF3DataRecurse(e, array, availableMembers));
+  node?.down?.forEach((e) =>
+    treeToF3DataDownRecurse(e, array, availableMembers)
+  );
 
   if (node.couples) {
     for (const c of node.couples) {
       array.push({
-        data: {
-          first_name: c.member.first_name ?? "_",
-          last_name: c.member.last_name ?? "_",
-          gender: c.member.sex ?? "M",
-          avatar: c.member.thumbnailURL ?? undefined,
-          birthday: c.member.dateOfBirth
-            ? fmtDate(c.member.dateOfBirth)
-            : undefined,
-        },
+        data: memberData(c.member),
         id: c.member.id.toString(),
         rels: {
           father:
@@ -135,7 +174,9 @@ function treeToF3DataRecurse(
         },
       });
 
-      c.down.forEach((e) => treeToF3DataRecurse(e, array, availableMembers));
+      c.down.forEach((e) =>
+        treeToF3DataDownRecurse(e, array, availableMembers)
+      );
     }
   }
 }