fix scaling

src/components/Graph/index.tsx

@@ -51,17 +51,18 @@ const GraphComponent = ({
   openModal,
   setSelectedNode,
 }: LayoutProps) => {
-  const [minScale, setMinScale] = React.useState(0.3);
+  const [minScale, setMinScale] = React.useState(0.4);
   const setGraphValue = useGraph(state => state.setGraphValue);
   const setConfig = useConfig(state => state.setConfig);
+  const centerView = useConfig(state => state.centerView);
   const loading = useGraph(state => state.loading);
   const layout = useConfig(state => state.layout);
   const nodes = useGraph(state => state.nodes);
   const edges = useGraph(state => state.edges);
 
   const [size, setSize] = React.useState({
-    width: 2000,
-    height: 2000,
+    width: 1,
+    height: 1,
   });
 
   const handleNodeClick = React.useCallback(
@@ -83,18 +84,25 @@ const GraphComponent = ({
     (layout: ElkRoot) => {
       if (layout.width && layout.height) {
         const areaSize = layout.width * layout.height;
+        const changeRatio = Math.abs(
+          (areaSize * 100) / (size.width * size.height) - 100
+        );
 
-        setMinScale((1_000_000 * 0.5) / areaSize);
+        const MIN_SCALE = Math.round((450_000 / areaSize) * 100) / 100;
+        const scale = MIN_SCALE > 2 ? 1 : MIN_SCALE <= 0 ? 0.1 : MIN_SCALE;
+
+        setMinScale(scale);
         setSize({ width: layout.width + 400, height: layout.height + 400 });
 
         requestAnimationFrame(() => {
           setTimeout(() => {
             setGraphValue("loading", false);
+            setTimeout(() => changeRatio > 100 && centerView(), 0);
           }, 0);
         });
       }
     },
-    [setGraphValue]
+    [centerView, setGraphValue, size.height, size.width]
   );
 
   const onCanvasClick = React.useCallback(() => {