From 911d59cddb6b97c26d0d5bb5f84615efdae65e67 Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Tue, 22 Aug 2023 17:17:36 +0200
Subject: [PATCH] Typed data

---
 .../complex_family_tree/ComplexFamilyTree.tsx | 333 +++++++++---------
 .../complex_family_tree/family_chart.d.ts     |  25 +-
 2 files changed, 189 insertions(+), 169 deletions(-)

diff --git a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
index 370b50d..c26dc2e 100644
--- a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
+++ b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import f3 from "family-chart";
+import f3, { f3Data } from "family-chart";
 import "./family-chart.css";
 
 export function ComplexFamilyTree(): React.ReactElement {
@@ -29,7 +29,7 @@ export function ComplexFamilyTree(): React.ReactElement {
           img_y: 5,
         },
         card_display: [
-          (d) => `${d.data["first name"] || ""} ${d.data["last name"] || ""}`,
+          (d) => `${d.data.first_name || ""} ${d.data.last_name || ""}`,
           (d) => `${d.data["birthday"] || ""}`,
         ],
         mini_tree: true,
@@ -44,182 +44,181 @@ export function ComplexFamilyTree(): React.ReactElement {
   return <div className="f3" id="FamilyChart" ref={refCb}></div>;
 }
 
-const data = () =>
-  structuredClone([
-    {
-      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",
-        ],
-      },
-      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",
-      },
+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",
+      ],
     },
-    {
-      id: "8c92765f-92d3-4120-90dd-85a28302504c",
-      data: {
-        gender: "F",
-        "first name": "Andrea",
-        "last name": "",
-        birthday: "",
-        avatar: "",
-      },
-      rels: {
-        spouses: ["0"],
-        children: [
-          "ce2fcb9a-6058-4326-b56a-aced35168561",
-          "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
-        ],
-      },
+    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: "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: "8c92765f-92d3-4120-90dd-85a28302504c",
+    data: {
+      gender: "F",
+      first_name: "Andrea",
+      last_name: "",
+      birthday: "",
+      avatar: "",
     },
-    {
-      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",
-      },
+    rels: {
+      spouses: ["0"],
+      children: [
+        "ce2fcb9a-6058-4326-b56a-aced35168561",
+        "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
+      ],
     },
-    {
-      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: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19",
+    data: {
+      gender: "M",
+      first_name: "Zen",
+      last_name: "",
+      birthday: "",
+      avatar: "",
     },
-    {
-      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",
-      },
+    rels: {
+      children: ["0"],
+      spouses: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
     },
-    {
-      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: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56",
+    data: {
+      gender: "F",
+      first_name: "Zebra",
+      last_name: "",
+      birthday: "",
+      avatar: "",
     },
-    {
-      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",
-        ],
-      },
+    rels: {
+      spouses: ["0c09cfa0-5e7c-4073-8beb-94f6c69ada19"],
+      children: ["0"],
+      father: "12a9bddf-855a-4583-a695-c73fa8c0e9b2",
+      mother: "bd56a527-b613-474d-9f38-fcac0aae218b",
     },
-    {
-      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: "ce2fcb9a-6058-4326-b56a-aced35168561",
+    data: {
+      gender: "M",
+      first_name: "Ben",
+      last_name: "",
+      birthday: "",
+      avatar: "",
     },
-    {
-      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"],
-      },
+    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: "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"],
-      },
+  },
+  {
+    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";
diff --git a/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts b/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts
index f1f2752..971620d 100644
--- a/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts
+++ b/geneit_app/src/widgets/complex_family_tree/family_chart.d.ts
@@ -2,8 +2,29 @@ declare module "family-chart" {
   type f3data = any;
   type f3tree = any;
 
+  interface f3Rels {
+    spouses?: string[];
+    father?: string;
+    mother?: string;
+    children?: string[];
+  }
+
+  interface f3DataData {
+    gender: "M" | "F";
+    avatar?: string;
+    birthday?: string;
+    first_name: string;
+    last_name: string;
+  }
+
+  interface f3Data {
+    id: string;
+    rels: f3Rels;
+    data: f3DataData;
+  }
+
   type f3State = {
-    data: any;
+    data: f3Data[];
     main_id?: any;
     tree?: f3tree;
     node_separation?: number;
@@ -60,7 +81,7 @@ declare module "family-chart" {
         img_x: number;
         img_y: number;
       };
-      card_display: ((data: any) => string)[];
+      card_display: ((data: f3Data) => string)[];
     }) => (p: { node; d }) => HTMLElement;
   };
   const elements: F3elements;