Start to build basic family tree

geneit_app/src/api/CoupleApi.ts

@@ -1,6 +1,5 @@
 import { APIClient } from "./ApiClient";
 import { DateValue, Member } from "./MemberApi";
-import { ServerApi } from "./ServerApi";
 
 interface CoupleApiInterface {
   id: number;

geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx

@@ -20,6 +20,7 @@ import {
 import { useFamily } from "../../widgets/BaseFamilyRoute";
 import { MemberItem } from "../../widgets/MemberItem";
 import { RouterLink } from "../../widgets/RouterLink";
+import { BasicFamilyTree } from "../../widgets/BasicFamilyTree";
 
 enum CurrTab {
   BasicTree,
@@ -116,7 +117,13 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
       </div>
 
       {/* the tree itself */}
-      <Paper style={{ flex: "1" }}>todo</Paper>
+      <Paper style={{ flex: "1" }}>
+        {currTab === CurrTab.BasicTree ? (
+          <BasicFamilyTree tree={tree!} />
+        ) : (
+          <>todo</>
+        )}
+      </Paper>
     </div>
   );
 }

geneit_app/src/widgets/BasicFamilyTree.tsx

@@ -0,0 +1,81 @@
+import { TreeItem, TreeView } from "@mui/lab";
+import { FamilyTreeNode } from "../utils/family_tree";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import React from "react";
+import { MemberPhoto } from "./MemberPhoto";
+import { Member, fmtDate } from "../api/MemberApi";
+import Icon from "@mdi/react";
+import { mdiCross } from "@mdi/js";
+
+export function BasicFamilyTree(p: {
+  tree: FamilyTreeNode;
+}): React.ReactElement {
+  return (
+    <TreeView
+      defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpandIcon={<ChevronRightIcon />}
+      sx={{ flexGrow: 1 }}
+    >
+      <FamilyTreeItem n={p.tree} />
+    </TreeView>
+  );
+}
+
+function FamilyTreeItem(p: { n: FamilyTreeNode }): React.ReactElement {
+  let children = p.n.down ?? [];
+
+  if (p.n.couples) {
+    for (const c of p.n.couples) {
+      children = children.concat(c.down);
+    }
+  }
+
+  return (
+    <TreeItem
+      nodeId={p.n.member.id.toString()}
+      style={{ margin: "10px" }}
+      label={
+        <div style={{ display: "flex" }}>
+          <BasicFamilyMemberItem member={p.n.member} primary={true} />
+
+          {p.n.couples?.map((c, n) => (
+            <span
+              key={n}
+              style={{
+                marginLeft: "20px",
+              }}
+            >
+              <BasicFamilyMemberItem member={c.member} />
+            </span>
+          ))}
+        </div>
+      }
+    >
+      {children.map((c) => (
+        <FamilyTreeItem key={c.member.id} n={c} />
+      ))}
+    </TreeItem>
+  );
+}
+
+function BasicFamilyMemberItem(p: {
+  member: Member;
+  primary?: boolean;
+}): React.ReactElement {
+  return (
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <MemberPhoto member={p.member} />
+      <span style={{ width: "10px" }}></span>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <span style={{ fontWeight: p.primary ? "bold" : "unset" }}>
+          {p.member.fullName}{" "}
+          {p.member?.dead && <Icon path={mdiCross} size={"1rem"} />}
+        </span>
+        {(p.member.dateOfBirth || p.member.dateOfDeath) &&
+          fmtDate(p.member.dateOfBirth) +
+            (p.member.dateOfDeath ? " - " + fmtDate(p.member.dateOfDeath) : "")}
+      </div>
+    </div>
+  );
+}