Can customize shown depth

geneit_app/src/widgets/BasicFamilyTree.tsx

@@ -13,6 +13,7 @@ import { MemberPhoto } from "./MemberPhoto";
 
 export function BasicFamilyTree(p: {
   tree: FamilyTreeNode;
+  depth: number;
 }): React.ReactElement {
   return (
     <TreeView
@@ -20,12 +21,15 @@ export function BasicFamilyTree(p: {
       defaultExpandIcon={<ChevronRightIcon />}
       sx={{ flexGrow: 1 }}
     >
-      <FamilyTreeItem n={p.tree} />
+      <FamilyTreeItem n={p.tree} depth={p.depth} />
     </TreeView>
   );
 }
 
-function FamilyTreeItem(p: { n: FamilyTreeNode }): React.ReactElement {
+function FamilyTreeItem(p: {
+  depth: number;
+  n: FamilyTreeNode;
+}): React.ReactElement {
   let children = p.n.down ?? [];
 
   if (p.n.couples) {
@@ -55,9 +59,10 @@ function FamilyTreeItem(p: { n: FamilyTreeNode }): React.ReactElement {
         </div>
       }
     >
-      {children.map((c) => (
-        <FamilyTreeItem key={c.member.id} n={c} />
-      ))}
+      {p.depth >= 2 &&
+        children.map((c) => (
+          <FamilyTreeItem depth={p.depth - 1} key={c.member.id} n={c} />
+        ))}
     </TreeItem>
   );
 }