Can customize shown depth

geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx

@@ -5,22 +5,27 @@ import {
   FormControlLabel,
   FormLabel,
   IconButton,
+  InputLabel,
+  MenuItem,
   Paper,
   Radio,
   RadioGroup,
+  Select,
   Tab,
   Tabs,
 } from "@mui/material";
 import React from "react";
 import { useParams } from "react-router-dom";
 import {
+  FamilyTreeNode,
   buildAscendingTree,
   buildDescendingTree,
+  treeHeight,
 } from "../../utils/family_tree";
 import { useFamily } from "../../widgets/BaseFamilyRoute";
+import { BasicFamilyTree } from "../../widgets/BasicFamilyTree";
 import { MemberItem } from "../../widgets/MemberItem";
 import { RouterLink } from "../../widgets/RouterLink";
-import { BasicFamilyTree } from "../../widgets/BasicFamilyTree";
 import { ComplexFamilyTree } from "../../widgets/complex_family_tree/ComplexFamilyTree";
 
 enum CurrTab {
@@ -43,15 +48,17 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
 
   const member = family.members.get(Number(memberId));
 
-  const tree = React.useMemo(
-    () =>
-      !member
-        ? null
-        : currMode === TreeMode.Ascending
+  const memo: [FamilyTreeNode, number] | null = React.useMemo(() => {
+    if (!member) return null;
+    const tree =
+      currMode === TreeMode.Ascending
         ? buildAscendingTree(member.id, family.members, family.couples)
-        : buildDescendingTree(member.id, family.members, family.couples),
-    [member, currMode, family.members, family.couples]
-  );
+        : buildDescendingTree(member.id, family.members, family.couples);
+
+    return [tree, treeHeight(tree)];
+  }, [member, currMode, family.members, family.couples]);
+
+  const [currDepth, setCurrDepth] = React.useState(0);
 
   if (!member) {
     return (
@@ -61,6 +68,10 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
     );
   }
 
+  const [tree, maxDepth] = memo!;
+
+  if (currDepth === 0) setCurrDepth(maxDepth);
+
   return (
     <div
       style={{
@@ -90,7 +101,10 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
           <RadioGroup
             row
             value={currMode}
-            onChange={(_e, v) => setCurrMode(Number(v))}
+            onChange={(_e, v) => {
+              setCurrDepth(0);
+              setCurrMode(Number(v));
+            }}
           >
             <FormControlLabel
               value={TreeMode.Descending}
@@ -105,7 +119,26 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
           </RadioGroup>
         </FormControl>
 
-        <div style={{ flex: "2" }}></div>
+        <div style={{ flex: "1" }}></div>
+
+        <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
+          <InputLabel>Profondeur</InputLabel>
+          <Select
+            value={currDepth}
+            onChange={(v) => setCurrDepth(Number(v.target.value))}
+            label="Profondeur"
+          >
+            {Array(maxDepth)
+              .fill(0)
+              .map((_v, index) => (
+                <MenuItem key={index} value={index + 1}>
+                  {index + 1}
+                </MenuItem>
+              ))}
+          </Select>
+        </FormControl>
+
+        <div style={{ flex: "1" }}></div>
 
         <Tabs
           value={currTab}
@@ -120,11 +153,12 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
       {/* the tree itself */}
       <Paper style={{ flex: "1" }}>
         {currTab === CurrTab.BasicTree ? (
-          <BasicFamilyTree tree={tree!} />
+          <BasicFamilyTree tree={tree!} depth={currDepth} />
         ) : (
           <ComplexFamilyTree
             tree={tree!}
             isUp={currMode === TreeMode.Ascending}
+            depth={currDepth}
           />
         )}
       </Paper>