pierre/GeneIT
1
0
Fork 0
Code Issues Pull Requests 6 Packages Projects Releases Wiki Activity

WIP building descending tree

Browse Source
This commit is contained in:
Pierre HUBERT 2023-08-23 10:27:51 +02:00
parent 911d59cddb
commit f4c226ac98
2 changed files with 94 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
View File

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

266
geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
View File

@ -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[] = () => [
{
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<number>();
getAvailableMembers(node, availableMembers);
const list: f3Data[] = [];
treeToF3DataRecurse(node, list, availableMembers);
console.info(list);
return list;
}
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",
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";