From 17a1455d528194e6bbb5c48b9d5177e5b345e550 Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Mon, 3 Oct 2022 17:06:14 -0400
Subject: [PATCH] react flow auto zoom

---
 ui/src/Network.js  | 4 +++-
 ui/src/Overview.js | 5 ++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/src/Network.js b/ui/src/Network.js
index 148fda11..46a42ff2 100644
--- a/ui/src/Network.js
+++ b/ui/src/Network.js
@@ -1,7 +1,7 @@
 import Environments from './Environments';
 import * as metadata from './api/metadata';
 import {useEffect, useLayoutEffect, useRef, useState} from "react";
-import ReactFlow, {isNode, useNodesState} from "react-flow-renderer";
+import ReactFlow, {isNode, useNodesState, useReactFlow} from "react-flow-renderer";
 import dagre from 'dagre';
 import { mdiDesktopClassic, mdiAccessPointNetwork } from '@mdi/js';
 import Icon from "@mdi/react";
@@ -10,6 +10,7 @@ const Network = () => {
     const [overview, setOverview] = useState([]);
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges] = useState([]);
+    const reactFlow = useReactFlow();
 
     useEffect(() => {
         let mounted = true
@@ -20,6 +21,7 @@ const Network = () => {
                 let g = buildGraph(resp.data)
                 setNodes(getLayout(g))
                 setEdges(g.edges)
+                reactFlow.fitView()
             }
         });
     })
diff --git a/ui/src/Overview.js b/ui/src/Overview.js
index e47a0493..814e22c4 100644
--- a/ui/src/Overview.js
+++ b/ui/src/Overview.js
@@ -4,6 +4,7 @@ import Version from "./Version";
 import Token from "./Token";
 import Logout from "./Logout";
 import Network from "./Network";
+import {ReactFlowProvider} from "react-flow-renderer";
 
 const Overview = () => {
     const [user, setUser] = useState();
@@ -45,7 +46,9 @@ const Overview = () => {
                     </div>
                 </div>
                 <div className="main">
-                    <Network />
+                    <ReactFlowProvider>
+                        <Network />
+                    </ReactFlowProvider>
                 </div>
             </div>
         </div>