Tree simulation running or not status now persists across clusters (p…

…ausing simulation in one cluster pauses in all).
phyloviz · Jul 3, 2023 · c85a83b · c85a83b
1 parent 0d53133
commit c85a83b
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 3 deletions.
diff --git a/src/frontend/src/Components/Project/TreeView/TreeViewSettingsCard.tsx b/src/frontend/src/Components/Project/TreeView/TreeViewSettingsCard.tsx
@@ -15,6 +15,8 @@ import {
 interface TreeViewSettingsCardProps {
     loadingGraph: boolean
 
+    simulationRunning: boolean
+
     onPauseAnimation: () => void
     onRestartAnimation: () => void
 
@@ -46,6 +48,8 @@ export function TreeViewSettingsCard(
     {
         loadingGraph,
 
+        simulationRunning,
+
         onPauseAnimation,
         onRestartAnimation,
 
@@ -70,7 +74,7 @@ export function TreeViewSettingsCard(
         onPrint
     }: TreeViewSettingsCardProps
 ) {
-    const [animationRunning, setAnimationRunning] = useState(true)
+    const [animationRunning, setAnimationRunning] = useState(simulationRunning)
     const [transformationsOpen, setTransformationsOpen] = useState(false)
 
     return <Box sx={{

diff --git a/src/frontend/src/Pages/Project/TreeView/Layouts/ForceDirectedLayout/ForceDirectedLayout.tsx b/src/frontend/src/Pages/Project/TreeView/Layouts/ForceDirectedLayout/ForceDirectedLayout.tsx
@@ -143,6 +143,8 @@ export default function ForceDirectedLayout() {
             <TreeViewSettingsCard
                 loadingGraph={loadingGraph}
 
+                simulationRunning={simulationConfig.simulationRunning}
+
                 onPauseAnimation={pauseAnimation}
                 onRestartAnimation={restartAnimation}
 

diff --git a/...frontend/src/Pages/Project/TreeView/Layouts/ForceDirectedLayout/useForceDirectedLayout.ts b/...frontend/src/Pages/Project/TreeView/Layouts/ForceDirectedLayout/useForceDirectedLayout.ts
@@ -106,6 +106,7 @@ export function useForceDirectedLayout() {
 
     return {
         canvasRef,
+        graphRef,
         loadingGraph,
         treeView: cascadingInfoTreeView,
 
@@ -116,8 +117,14 @@ export function useForceDirectedLayout() {
         numClusters,
         selectedCluster,
         setSelectedCluster,
-        pauseAnimation: () => graphRef.current?.pause(),
-        restartAnimation: () => graphRef.current?.restart(),
+        pauseAnimation: () => {
+            simulationConfig.setSimulationRunning(false)
+            graphRef.current?.pause()
+        },
+        restartAnimation: () => {
+            simulationConfig.setSimulationRunning(true)
+            graphRef.current?.restart()
+        },
 
         resetSimulationFilters: () => {
             // TODO: reset filters

diff --git a/src/frontend/src/Pages/Project/TreeView/Layouts/ForceDirectedLayout/utils/useGraph.ts b/src/frontend/src/Pages/Project/TreeView/Layouts/ForceDirectedLayout/utils/useGraph.ts
@@ -131,6 +131,9 @@ export function useGraph(projectId: string, datasetId: string, treeViewId: strin
         await graphRef.current!.setData(nodes, links)
         graphRef.current?.renderNodeLabels(graphTransformationsConfig.nodeLabel)
         graphRef.current?.renderLinkLabels(graphTransformationsConfig.linkLabel)
+        if(!simulationConfig.simulationRunning) {
+            graphRef.current?.pause()
+        }
 
         console.log("finished loading graph")
         setLoadingGraph(false)

diff --git a/...ntend/src/Pages/Project/TreeView/Layouts/ForceDirectedLayout/utils/useSimulationConfig.ts b/...ntend/src/Pages/Project/TreeView/Layouts/ForceDirectedLayout/utils/useSimulationConfig.ts
@@ -13,6 +13,7 @@ export interface SimulationConfig {
     friction: number;
     repulsionTheta: number;
     decay: number;
+    simulationRunning: boolean;
 
     setLinkSpring: (value: number) => void;
     setLinkDistance: (value: number) => void;
@@ -21,6 +22,7 @@ export interface SimulationConfig {
     setRepulsion: (value: number) => void;
     setRepulsionTheta: (value: number) => void;
     setDecay: (value: number) => void;
+    setSimulationRunning: (value: boolean) => void;
 
     resetAll: () => void;
 }
@@ -43,6 +45,8 @@ export function useSimulationConfig(
     const [repulsionTheta, setRepulsionTheta] = useState(graphRef.current?.config.simulation.repulsionTheta ?? defaultConfig.simulation!.repulsionTheta!)
     const [decay, setDecay] = useState(graphRef.current?.config.simulation.decay ?? defaultConfig.simulation!.decay!)
 
+    const [simulationRunning, setSimulationRunning] = useState(graphRef.current?.isSimulationRunning ?? true)
+
     useEffect(() => {
         if (loadingGraph)
             return
@@ -54,6 +58,8 @@ export function useSimulationConfig(
         setFriction(graphRef.current?.config.simulation.friction ?? defaultConfig.simulation!.friction!)
         setRepulsionTheta(graphRef.current?.config.simulation.repulsionTheta ?? defaultConfig.simulation!.repulsionTheta!)
         setDecay(graphRef.current?.config.simulation.decay ?? defaultConfig.simulation!.decay!)
+        setSimulationRunning(graphRef.current?.isSimulationRunning ?? true)
+
     }, [loadingGraph])
 
     return {
@@ -64,6 +70,7 @@ export function useSimulationConfig(
         friction,
         repulsionTheta,
         decay,
+        simulationRunning,
 
         setLinkSpring: (value: number) => {
             setLinkSpring(value)
@@ -93,6 +100,9 @@ export function useSimulationConfig(
             setDecay(value)
             graphRef.current?.setConfig({simulation: {decay: value}})
         },
+        setSimulationRunning: (value: boolean) => {
+            setSimulationRunning(value)
+        },
 
         resetAll: () => {
             setLinkSpring(defaultConfig.simulation!.linkSpring!)