Add simple tree graph mode (#4)

Add a new kind of family tree: simple tree

Reviewed-on: #4

geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx

@@ -27,9 +27,11 @@ import { BasicFamilyTree } from "../../widgets/BasicFamilyTree";
 import { MemberItem } from "../../widgets/MemberItem";
 import { RouterLink } from "../../widgets/RouterLink";
 import { ComplexFamilyTree } from "../../widgets/complex_family_tree/ComplexFamilyTree";
+import { SimpleFamilyTree } from "../../widgets/simple_family_tree/SimpleFamilyTree";
 
 enum CurrTab {
   BasicTree,
+  SimpleTree,
   AdvancedTree,
 }
 
@@ -43,7 +45,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
 
   const family = useFamily();
 
-  const [currTab, setCurrTab] = React.useState(CurrTab.AdvancedTree);
+  const [currTab, setCurrTab] = React.useState(CurrTab.SimpleTree);
   const [currMode, setCurrMode] = React.useState(TreeMode.Descending);
 
   const member = family.members.get(Number(memberId));
@@ -146,14 +148,17 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
           aria-label="basic tabs example"
         >
           <Tab tabIndex={CurrTab.BasicTree} label="Basique" />
+          <Tab tabIndex={CurrTab.SimpleTree} label="Simple" />
           <Tab tabIndex={CurrTab.AdvancedTree} label="Avancé" />
         </Tabs>
       </div>
 
       {/* the tree itself */}
-      <Paper style={{ flex: "1" }}>
+      <Paper style={{ flex: "1", display: "flex", flexDirection: "column" }}>
         {currTab === CurrTab.BasicTree ? (
           <BasicFamilyTree tree={tree!} depth={currDepth} />
+        ) : currTab === CurrTab.SimpleTree ? (
+          <SimpleFamilyTree tree={tree!} depth={currDepth} />
         ) : (
           <ComplexFamilyTree
             tree={tree!}