diff --git a/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx b/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
index 9e09d14..31d16a0 100644
--- a/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
+++ b/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
@@ -122,7 +122,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
{currTab === CurrTab.BasicTree ? (
) : (
-
+
)}
diff --git a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
index c26dc2e..d4a5a1e 100644
--- a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
+++ b/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
;
}
-const data: () => f3Data[] = () => [
- {
- id: "0",
- rels: {
- spouses: ["8c92765f-92d3-4120-90dd-85a28302504c"],
- father: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19",
- mother: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56",
- children: [
- "ce2fcb9a-6058-4326-b56a-aced35168561",
- "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
- ],
- },
+function treeToF3Data(node: FamilyTreeNode): f3Data[] {
+ const availableMembers = new Set();
+ getAvailableMembers(node, availableMembers);
+
+ const list: f3Data[] = [];
+ treeToF3DataRecurse(node, list, availableMembers);
+ console.info(list);
+ return list;
+}
+
+function getAvailableMembers(t: FamilyTreeNode, s: Set) {
+ 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
+) {
+ // 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",
- last_name: "",
- birthday: "1970",
- avatar:
- "https://static8.depositphotos.com/1009634/988/v/950/depositphotos_9883921-stock-illustration-no-user-profile-picture.jpg",
- gender: "M",
- },
- },
- {
- id: "8c92765f-92d3-4120-90dd-85a28302504c",
- data: {
- gender: "F",
- first_name: "Andrea",
- last_name: "",
- birthday: "",
- avatar: "",
+ 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,
},
+ id: node.member.id.toString(),
rels: {
- spouses: ["0"],
- children: [
- "ce2fcb9a-6058-4326-b56a-aced35168561",
- "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
- ],
+ 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: node.couples?.map((c) => c.member.id.toString()),
+ children: children,
},
- },
- {
- id: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19",
- data: {
- gender: "M",
- first_name: "Zen",
- last_name: "",
- birthday: "",
- avatar: "",
- },
- rels: {
- children: ["0"],
- spouses: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
- },
- },
- {
- id: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56",
- data: {
- gender: "F",
- first_name: "Zebra",
- last_name: "",
- birthday: "",
- avatar: "",
- },
- rels: {
- spouses: ["0c09cfa0-5e7c-4073-8beb-94f6c69ada19"],
- children: ["0"],
- father: "12a9bddf-855a-4583-a695-c73fa8c0e9b2",
- mother: "bd56a527-b613-474d-9f38-fcac0aae218b",
- },
- },
- {
- 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"],
- },
- },
-];
+ });
+
+ node?.down?.forEach((e) => treeToF3DataRecurse(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,
+ },
+ id: c.member.id.toString(),
+ rels: {
+ father:
+ c.member.father && availableMembers.has(c.member.father)
+ ? c.member.father.toString()
+ : undefined,
+ mother:
+ c.member.mother && availableMembers.has(c.member.mother)
+ ? c.member.mother.toString()
+ : undefined,
+ spouses: [node.member.id.toString()],
+ children: c.down.map((c) => c.member.id.toString()),
+ },
+ });
+
+ c.down.forEach((e) => treeToF3DataRecurse(e, array, availableMembers));
+ }
+ }
+}
/*
import { jsPDF } from "jspdf";