Reimplement the tree / network

package.json

@@ -18,6 +18,7 @@
     "@redux-devtools/extension": "^3.2.2",
     "@visx/axis": "^2.6.0",
     "@visx/heatmap": "^2.10.0",
+    "@visx/tooltip": "^2.10.0",
     "@visx/visx": "^2.10.0",
     "axios": "^0.27.2",
     "d3": "^7.4.0",

src/components/header/index.tsx

@@ -34,8 +34,8 @@ const Header = (props: HeaderProps) => {
       <div
         style={{
           position: "absolute",
-          left: 20,
-          top: 20,
+          left: 0,
+          top: 0,
           fontSize: 24,
           margin: 0,
         }}

src/components/mainViz.tsx

@@ -5,6 +5,7 @@ import { useDispatch } from "react-redux";
 import { ForceGraph } from "./viz/drawForceGraph";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup/ToggleButtonGroup";
 import ToggleButton from "@mui/material/ToggleButton";
+import UnrootedTree from "./viz/unrootedTree";
 
 type MainVizProps = {
   sectionHeight: number;
@@ -46,7 +47,7 @@ export const MainViz = (props: MainVizProps) => {
         }}
       >
         {viewPlot === "forceGraph" && state.mrca ? (
-          <ForceGraph
+          <UnrootedTree
             chartWidth={chartWidth}
             chartHeight={chartHeight}
             chartMargin={chartMargin}