From 908a563a485936f31f1b4416898adca5552a2d51 Mon Sep 17 00:00:00 2001
From: Alexandre Germain <alexandre.germain@craft.ai>
Date: Fri, 22 Nov 2024 11:56:59 +0100
Subject: [PATCH 1/2] feat(app): allow pausing physics simulation

---
 src/app/components/App.tsx          |  5 ++++-
 src/app/components/ControlPanel.tsx |  7 ++++++-
 src/app/components/DepGraph.tsx     | 20 +++++++++++++++++---
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/app/components/App.tsx b/src/app/components/App.tsx
index becc421..1a4c0f1 100644
--- a/src/app/components/App.tsx
+++ b/src/app/components/App.tsx
@@ -13,6 +13,7 @@ const JSON_URL =
 
 const App: FC = () => {
   const [data, setData] = useState<ICruiseResult>();
+  const [physicsSimulation, setPhysicsSimulation] = useState(true);
 
   const moduleDeps = useMemo(() => data && parseModuleDeps(data), [data]);
 
@@ -36,8 +37,10 @@ const App: FC = () => {
         moduleDeps={moduleDeps}
         filters={filters}
         onSubmit={setFilters}
+        physicsSimulation={physicsSimulation}
+        setPhysicsSimulation={setPhysicsSimulation}
       />
-      <DepGraph moduleDeps={moduleDeps} filters={filters} />
+      <DepGraph moduleDeps={moduleDeps} filters={filters} physicsSimulation={physicsSimulation} />
     </>
   );
 };
diff --git a/src/app/components/ControlPanel.tsx b/src/app/components/ControlPanel.tsx
index 3aee315..a84f3f4 100644
--- a/src/app/components/ControlPanel.tsx
+++ b/src/app/components/ControlPanel.tsx
@@ -16,9 +16,11 @@ type Props = {
   moduleDeps: ModuleDeps;
   filters: Filters;
   onSubmit?: (filters: Filters) => void;
+  physicsSimulation: boolean
+  setPhysicsSimulation: (enable: boolean) => void
 };
 
-const ControlPanel: FC<Props> = ({ moduleDeps, filters, onSubmit }) => {
+const ControlPanel: FC<Props> = ({ moduleDeps, filters, onSubmit, physicsSimulation, setPhysicsSimulation }) => {
   const modules = useMemo(() => getModules(moduleDeps), [moduleDeps]);
 
   const [targetModules, setTargetModules] = useState<string[]>(
@@ -81,6 +83,9 @@ const ControlPanel: FC<Props> = ({ moduleDeps, filters, onSubmit }) => {
             <Button variant="contained" color="primary" onClick={handleSubmit}>
               Render
             </Button>
+            <Button variant="contained" color="secondary" onClick={() => setPhysicsSimulation(!physicsSimulation)}>
+              {physicsSimulation ? 'Stop' : 'Start'} physics simulation
+            </Button>
           </Grid>
         </Grid>
       </CardActions>
diff --git a/src/app/components/DepGraph.tsx b/src/app/components/DepGraph.tsx
index 258bf92..9d4f040 100644
--- a/src/app/components/DepGraph.tsx
+++ b/src/app/components/DepGraph.tsx
@@ -10,11 +10,12 @@ import { DepGraph, Filters, ModuleDeps } from '../utils/types';
 type Props = {
   moduleDeps: ModuleDeps;
   filters: Filters;
+  physicsSimulation: boolean
 };
 
 type Stage = 'idle' | 'computing' | 'drawing';
 
-const DepGraph: FC<Props> = ({ moduleDeps, filters }) => {
+const DepGraph: FC<Props> = ({ moduleDeps, filters, physicsSimulation }) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const [graph, setGraph] = useState<DepGraph>();
@@ -22,6 +23,7 @@ const DepGraph: FC<Props> = ({ moduleDeps, filters }) => {
   const [worker, setWorker] = useState<Worker>();
 
   const [stage, setStage] = useState<Stage>('idle');
+  const [network, setNetwork] = useState<Network>();
 
   useEffect(() => {
     setStage('computing');
@@ -59,10 +61,11 @@ const DepGraph: FC<Props> = ({ moduleDeps, filters }) => {
         }),
       );
 
-      const network = new Network(
+      const newNetwork = new Network(
         containerRef.current,
         { edges, nodes },
         {
+          physics: {enabled: physicsSimulation},
           nodes: {
             shape: 'image',
             shapeProperties: {
@@ -85,12 +88,23 @@ const DepGraph: FC<Props> = ({ moduleDeps, filters }) => {
         },
       );
 
-      network.on('afterDrawing', () => {
+      newNetwork.on('afterDrawing', () => {
         setStage('idle');
       });
+
+      setNetwork(newNetwork)
     }
   }, [containerRef.current, graph]);
 
+  useEffect(() => {
+    if(physicsSimulation){
+      network?.startSimulation()
+    } else {
+      network?.stopSimulation()
+    }
+    network?.setOptions({physics: {enabled: physicsSimulation}})
+  }, [physicsSimulation, network])
+
   const handleTerminate = () => {
     if (worker != null) {
       worker.terminate();

From 8e5c58d8f054878e24020acf8989a63001c294a1 Mon Sep 17 00:00:00 2001
From: Alexandre Germain <alexandre.germain@craft.ai>
Date: Thu, 5 Dec 2024 21:27:46 +0100
Subject: [PATCH 2/2] style: lint

---
 src/app/components/App.tsx          |  6 +++++-
 src/app/components/ControlPanel.tsx | 18 ++++++++++++++----
 src/app/components/DepGraph.tsx     | 16 ++++++++--------
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/app/components/App.tsx b/src/app/components/App.tsx
index 1a4c0f1..c765699 100644
--- a/src/app/components/App.tsx
+++ b/src/app/components/App.tsx
@@ -40,7 +40,11 @@ const App: FC = () => {
         physicsSimulation={physicsSimulation}
         setPhysicsSimulation={setPhysicsSimulation}
       />
-      <DepGraph moduleDeps={moduleDeps} filters={filters} physicsSimulation={physicsSimulation} />
+      <DepGraph
+        moduleDeps={moduleDeps}
+        filters={filters}
+        physicsSimulation={physicsSimulation}
+      />
     </>
   );
 };
diff --git a/src/app/components/ControlPanel.tsx b/src/app/components/ControlPanel.tsx
index a84f3f4..f051417 100644
--- a/src/app/components/ControlPanel.tsx
+++ b/src/app/components/ControlPanel.tsx
@@ -16,11 +16,17 @@ type Props = {
   moduleDeps: ModuleDeps;
   filters: Filters;
   onSubmit?: (filters: Filters) => void;
-  physicsSimulation: boolean
-  setPhysicsSimulation: (enable: boolean) => void
+  physicsSimulation: boolean;
+  setPhysicsSimulation: (enable: boolean) => void;
 };
 
-const ControlPanel: FC<Props> = ({ moduleDeps, filters, onSubmit, physicsSimulation, setPhysicsSimulation }) => {
+const ControlPanel: FC<Props> = ({
+  moduleDeps,
+  filters,
+  onSubmit,
+  physicsSimulation,
+  setPhysicsSimulation,
+}) => {
   const modules = useMemo(() => getModules(moduleDeps), [moduleDeps]);
 
   const [targetModules, setTargetModules] = useState<string[]>(
@@ -83,7 +89,11 @@ const ControlPanel: FC<Props> = ({ moduleDeps, filters, onSubmit, physicsSimulat
             <Button variant="contained" color="primary" onClick={handleSubmit}>
               Render
             </Button>
-            <Button variant="contained" color="secondary" onClick={() => setPhysicsSimulation(!physicsSimulation)}>
+            <Button
+              variant="contained"
+              color="secondary"
+              onClick={() => setPhysicsSimulation(!physicsSimulation)}
+            >
               {physicsSimulation ? 'Stop' : 'Start'} physics simulation
             </Button>
           </Grid>
diff --git a/src/app/components/DepGraph.tsx b/src/app/components/DepGraph.tsx
index 9d4f040..2e8ff2a 100644
--- a/src/app/components/DepGraph.tsx
+++ b/src/app/components/DepGraph.tsx
@@ -10,7 +10,7 @@ import { DepGraph, Filters, ModuleDeps } from '../utils/types';
 type Props = {
   moduleDeps: ModuleDeps;
   filters: Filters;
-  physicsSimulation: boolean
+  physicsSimulation: boolean;
 };
 
 type Stage = 'idle' | 'computing' | 'drawing';
@@ -65,7 +65,7 @@ const DepGraph: FC<Props> = ({ moduleDeps, filters, physicsSimulation }) => {
         containerRef.current,
         { edges, nodes },
         {
-          physics: {enabled: physicsSimulation},
+          physics: { enabled: physicsSimulation },
           nodes: {
             shape: 'image',
             shapeProperties: {
@@ -92,18 +92,18 @@ const DepGraph: FC<Props> = ({ moduleDeps, filters, physicsSimulation }) => {
         setStage('idle');
       });
 
-      setNetwork(newNetwork)
+      setNetwork(newNetwork);
     }
   }, [containerRef.current, graph]);
 
   useEffect(() => {
-    if(physicsSimulation){
-      network?.startSimulation()
+    if (physicsSimulation) {
+      network?.startSimulation();
     } else {
-      network?.stopSimulation()
+      network?.stopSimulation();
     }
-    network?.setOptions({physics: {enabled: physicsSimulation}})
-  }, [physicsSimulation, network])
+    network?.setOptions({ physics: { enabled: physicsSimulation } });
+  }, [physicsSimulation, network]);
 
   const handleTerminate = () => {
     if (worker != null) {