WIP building descending tree

geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx

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

geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx

@@ -1,13 +1,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";
 
-export function ComplexFamilyTree(): React.ReactElement {
+export function ComplexFamilyTree(p: {
+  tree: FamilyTreeNode;
+}): React.ReactElement {
   const refCb = (container: HTMLDivElement) => {
     if (!container) return;
 
     const store = f3.createStore({
-        data: data(),
+        data: treeToF3Data(p.tree),
         node_separation: 250,
         level_separation: 150,
       }),
@@ -44,181 +48,97 @@ export function ComplexFamilyTree(): React.ReactElement {
   return <div className="f3" id="FamilyChart" ref={refCb}></div>;
 }
 
-const data: () => f3Data[] = () => [
+function treeToF3Data(node: FamilyTreeNode): f3Data[] {
-  {
+  const availableMembers = new Set<number>();
-    id: "0",
+  getAvailableMembers(node, availableMembers);
-    rels: {
+
-      spouses: ["8c92765f-92d3-4120-90dd-85a28302504c"],
+  const list: f3Data[] = [];
-      father: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19",
+  treeToF3DataRecurse(node, list, availableMembers);
-      mother: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56",
+  console.info(list);
-      children: [
+  return list;
-        "ce2fcb9a-6058-4326-b56a-aced35168561",
+}
-        "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
+
-      ],
+function getAvailableMembers(t: FamilyTreeNode, s: Set<number>) {
-    },
+  s.add(t.member.id);
+
+  t.couples?.forEach((c) => {
+    s.add(c.member.id);
+    c.down.forEach((e) => getAvailableMembers(e, s));
+  });
+
+  t.down?.forEach((e) => getAvailableMembers(e, s));
+}
+
+function treeToF3DataRecurse(
+  node: FamilyTreeNode,
+  array: f3Data[],
+  availableMembers: Set<number>
+) {
+  // Get all members ids
+  const children = node?.down?.map((c) => c.member.id.toString()) ?? [];
+  node.couples?.map((c) =>
+    c.down.forEach((m) => children.push(m.member.id.toString()))
+  );
+
+  array.push({
     data: {
-      first_name: "Agnus",
+      first_name: node.member.first_name ?? "_",
-      last_name: "",
+      last_name: node.member.last_name ?? "_",
-      birthday: "1970",
+      gender: node.member.sex ?? "M",
-      avatar:
+      avatar: node.member.thumbnailURL ?? undefined,
-        "https://static8.depositphotos.com/1009634/988/v/950/depositphotos_9883921-stock-illustration-no-user-profile-picture.jpg",
+      birthday: node.member.dateOfBirth
-      gender: "M",
+        ? fmtDate(node.member.dateOfBirth)
-    },
+        : undefined,
-  },
-  {
-    id: "8c92765f-92d3-4120-90dd-85a28302504c",
-    data: {
-      gender: "F",
-      first_name: "Andrea",
-      last_name: "",
-      birthday: "",
-      avatar: "",
     },
+    id: node.member.id.toString(),
     rels: {
-      spouses: ["0"],
+      father:
-      children: [
+        node.member.father && availableMembers.has(node.member.father)
-        "ce2fcb9a-6058-4326-b56a-aced35168561",
+          ? node.member.father.toString()
-        "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
+          : undefined,
-      ],
+      mother:
+        node.member.mother && availableMembers.has(node.member.mother)
+          ? node.member.mother.toString()
+          : undefined,
+
+      spouses: node.couples?.map((c) => c.member.id.toString()),
+      children: children,
     },
-  },
+  });
-  {
+
-    id: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19",
+  node?.down?.forEach((e) => treeToF3DataRecurse(e, array, availableMembers));
-    data: {
+
-      gender: "M",
+  if (node.couples) {
-      first_name: "Zen",
+    for (const c of node.couples) {
-      last_name: "",
+      array.push({
-      birthday: "",
+        data: {
-      avatar: "",
+          first_name: c.member.first_name ?? "_",
-    },
+          last_name: c.member.last_name ?? "_",
-    rels: {
+          gender: c.member.sex ?? "M",
-      children: ["0"],
+          avatar: c.member.thumbnailURL ?? undefined,
-      spouses: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
+          birthday: c.member.dateOfBirth
-    },
+            ? fmtDate(c.member.dateOfBirth)
-  },
+            : undefined,
-  {
+        },
-    id: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56",
+        id: c.member.id.toString(),
-    data: {
+        rels: {
-      gender: "F",
+          father:
-      first_name: "Zebra",
+            c.member.father && availableMembers.has(c.member.father)
-      last_name: "",
+              ? c.member.father.toString()
-      birthday: "",
+              : undefined,
-      avatar: "",
+          mother:
-    },
+            c.member.mother && availableMembers.has(c.member.mother)
-    rels: {
+              ? c.member.mother.toString()
-      spouses: ["0c09cfa0-5e7c-4073-8beb-94f6c69ada19"],
+              : undefined,
-      children: ["0"],
+          spouses: [node.member.id.toString()],
-      father: "12a9bddf-855a-4583-a695-c73fa8c0e9b2",
+          children: c.down.map((c) => c.member.id.toString()),
-      mother: "bd56a527-b613-474d-9f38-fcac0aae218b",
+        },
-    },
+      });
-  },
+
-  {
+      c.down.forEach((e) => treeToF3DataRecurse(e, array, availableMembers));
-    id: "ce2fcb9a-6058-4326-b56a-aced35168561",
+    }
-    data: {
+  }
-      gender: "M",
+}
-      first_name: "Ben",
-      last_name: "",
-      birthday: "",
-      avatar: "",
-    },
-    rels: {
-      mother: "8c92765f-92d3-4120-90dd-85a28302504c",
-      father: "0",
-      spouses: ["b4e33c68-20a7-47ba-9dcc-1168a07d5b52"],
-      children: [
-        "eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
-        "240a3f71-c921-42d7-8a13-dec5e1acc4fd",
-      ],
-    },
-  },
-  {
-    id: "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
-    data: {
-      gender: "F",
-      first_name: "Becky",
-      last_name: "",
-      birthday: "",
-      avatar: "",
-    },
-    rels: {
-      mother: "8c92765f-92d3-4120-90dd-85a28302504c",
-      father: "0",
-    },
-  },
-  {
-    id: "eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
-    data: {
-      gender: "M",
-      first_name: "Carlos",
-      last_name: "",
-      birthday: "",
-      avatar: "",
-    },
-    rels: {
-      mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
-      father: "ce2fcb9a-6058-4326-b56a-aced35168561",
-    },
-  },
-  {
-    id: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
-    data: {
-      gender: "F",
-      first_name: "Branka",
-      last_name: "",
-      birthday: "",
-      avatar: "",
-    },
-    rels: {
-      spouses: ["ce2fcb9a-6058-4326-b56a-aced35168561"],
-      children: [
-        "eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
-        "240a3f71-c921-42d7-8a13-dec5e1acc4fd",
-      ],
-    },
-  },
-  {
-    id: "240a3f71-c921-42d7-8a13-dec5e1acc4fd",
-    data: {
-      gender: "F",
-      first_name: "Carla",
-      last_name: "",
-      birthday: "",
-      avatar: "",
-    },
-    rels: {
-      mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
-      father: "ce2fcb9a-6058-4326-b56a-aced35168561",
-    },
-  },
-  {
-    id: "12a9bddf-855a-4583-a695-c73fa8c0e9b2",
-    data: {
-      gender: "M",
-      first_name: "Yvo",
-      last_name: "",
-      birthday: "",
-      avatar: "",
-    },
-    rels: {
-      children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
-      spouses: ["bd56a527-b613-474d-9f38-fcac0aae218b"],
-    },
-  },
-  {
-    id: "bd56a527-b613-474d-9f38-fcac0aae218b",
-    data: {
-      gender: "F",
-      first_name: "Yva",
-      last_name: "",
-      birthday: "",
-      avatar: "",
-    },
-    rels: {
-      spouses: ["12a9bddf-855a-4583-a695-c73fa8c0e9b2"],
-      children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
-    },
-  },
-];
 
 /*
 import { jsPDF } from "jspdf";