diff --git a/ell-studio/package-lock.json b/ell-studio/package-lock.json index 2d251e57..971295cc 100644 --- a/ell-studio/package-lock.json +++ b/ell-studio/package-lock.json @@ -11744,14 +11744,6 @@ "node": ">=10.17.0" } }, - "node_modules/i": { - "version": "0.3.7", - "resolved": "https://registry.npmjs.org/i/-/i-0.3.7.tgz", - "integrity": "sha512-FYz4wlXgkQwIPqhzC5TdNMLSE5+GS1IIDJZY/1ZiEPCT2S3COUVZeT5OW4BmW4r5LHLQuOosSwsvnroG9GR59Q==", - "engines": { - "node": ">=0.4" - } - }, "node_modules/iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", diff --git a/ell-studio/src/components/depgraph/DependencyGraph.js b/ell-studio/src/components/depgraph/DependencyGraph.js index eae3d427..de385949 100644 --- a/ell-studio/src/components/depgraph/DependencyGraph.js +++ b/ell-studio/src/components/depgraph/DependencyGraph.js @@ -45,23 +45,27 @@ function LMPNode({ data }) { ); } - const LayoutFlow = ({ initialNodes, initialEdges }) => { - const [nodes, _, onNodesChange] = useNodesState(initialNodes); - const [edges, __, onEdgesChange] = useEdgesState(initialEdges); + const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); + const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const [initialised, { toggle, isRunning }] = useLayoutedElements(); const [didInitialSimulation, setDidInitialSimulation] = useState(false); + const { fitView } = useReactFlow(); - // Start the simulation automatically when the initialized is good & run it for like 1second + // Start the simulation automatically when initialized and run it for 1 second useEffect(() => { if (initialised && !didInitialSimulation) { setDidInitialSimulation(true); toggle(); + + fitView({ duration: 500, padding: 0.1 }); setTimeout(() => { toggle(); + // Fit view after the simulation has run + fitView({ duration: 500, padding: 0.1 }); }, 1000); } - }, [initialised, didInitialSimulation]); + }, [initialised, didInitialSimulation, toggle, fitView]); const nodeTypes = useMemo(() => ({ lmp: LMPNode }), []);