[Graph] forceAtlasButton2 which uses props

src/Gargantext/Components/Graph.purs

@@ -29,6 +29,7 @@ type Graph = Sigmax.Graph Node Edge
 
 type Props sigma forceatlas2 =
   ( graph :: Graph
+  , forceAtlas2Paused :: Boolean
   , forceAtlas2Settings :: forceatlas2
   , sigmaSettings :: sigma
   , sigmaRef :: R.Ref (Maybe Sigma)
@@ -40,11 +41,20 @@ graph props = R.createElement graphCpt props []
 graphCpt :: forall s fa2. R.Component (Props s fa2)
 graphCpt = R.hooksComponent "Graph" cpt
   where
-    cpt props _ = do
+    cpt {graph, forceAtlas2Paused, forceAtlas2Settings, sigmaSettings, sigmaRef} _ = do
+      let memoProps = {
+          graph
+        , forceAtlas2Paused
+        , forceAtlas2Settings
+        , sigmaSettings
+        , sigmaRef
+        }
+
       ref <- R.useRef null
-      startSigma ref props.sigmaRef props.sigmaSettings props.forceAtlas2Settings props.graph
+      startSigma ref sigmaRef sigmaSettings forceAtlas2Paused forceAtlas2Settings graph
 
-      pure $ RH.div { ref, style: {height: "95%"} } []
+      --pure $ RH.div { ref, style: {height: "95%"} } []
+      R.useMemo1 memoProps $ const $ RH.div { ref, style: {height: "95%"} } []
 
 type SigmaSettings =
   ( animationsTime :: Number
@@ -204,7 +214,7 @@ type ForceAtlas2Settings =
   , startingIterations :: Number
   , strongGravityMode :: Boolean
   -- , timeout :: Number
-  -- , worker :: Boolean
+  , worker :: Boolean
   )
 
 forceAtlas2Settings :: {|ForceAtlas2Settings}
@@ -222,4 +232,5 @@ forceAtlas2Settings =
   , slowDown : 0.7
   , startingIterations : 2.0
   , strongGravityMode : false
+  , worker: true
   }

src/Gargantext/Components/GraphExplorer.purs

@@ -89,7 +89,10 @@ explorerCpt state = R.hooksComponent "GraphExplorer" cpt
                   ]
                 , row [ Controls.controls controls ]
                 , row [ tree {mCurrentRoute, treeId} controls
-                      , mGraph controls.sigmaRef {graphId, graph}
+                      , mGraph controls.sigmaRef {
+                          forceAtlas2Paused: fst controls.forceAtlas2Paused
+                        , graphId
+                        , graph}
                       , Sidebar.sidebar {showSidePanel: fst controls.showSidePanel} ]
                 , row [ ]
                 ]
@@ -111,12 +114,13 @@ explorerCpt state = R.hooksComponent "GraphExplorer" cpt
         Tree.elTreeview {mCurrentRoute, root: treeId}
       ]
 
-    mGraph :: R.Ref (Maybe Sigmax.Sigma) -> {graphId :: GraphId, graph :: Maybe Graph.Graph} -> R.Element
+    mGraph :: R.Ref (Maybe Sigmax.Sigma) -> {forceAtlas2Paused :: Boolean, graphId :: GraphId, graph :: Maybe Graph.Graph} -> R.Element
     mGraph _ {graph: Nothing} = RH.div {} []
-    mGraph sigmaRef {graphId, graph: Just graph} = graphView sigmaRef {graphId, graph}
+    mGraph sigmaRef {forceAtlas2Paused, graphId, graph: Just graph} = graphView sigmaRef {forceAtlas2Paused, graphId, graph}
 
 type GraphProps = (
-    graphId :: GraphId
+    forceAtlas2Paused :: Boolean
+  , graphId :: GraphId
   , graph :: Graph.Graph
 )
 
@@ -126,12 +130,13 @@ graphView sigmaRef props = R.createElement el props []
   where
     --memoCmp props1 props2 = props1.graphId == props2.graphId
     el = R.hooksComponent "GraphView" cpt
-    cpt {graphId, graph} _children = do
+    cpt {forceAtlas2Paused, graphId, graph} _children = do
       pure $
         RH.div { id: "graph-view", className: "col-md-12" }
         [
           Graph.graph {
-               forceAtlas2Settings: Graph.forceAtlas2Settings
+               forceAtlas2Paused
+             , forceAtlas2Settings: Graph.forceAtlas2Settings
              , graph
              , sigmaSettings: Graph.sigmaSettings
              , sigmaRef: sigmaRef

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -27,7 +27,7 @@ import Gargantext.Components.Graph as Graph
 import Gargantext.Components.GraphExplorer.Button (centerButton)
 import Gargantext.Components.GraphExplorer.RangeControl (edgeSizeControl, nodeSizeControl)
 import Gargantext.Components.GraphExplorer.SlideButton (cursorSizeButton, labelSizeButton)
-import Gargantext.Components.GraphExplorer.ToggleButton (edgesToggleButton, pauseForceAtlasButton)
+import Gargantext.Components.GraphExplorer.ToggleButton (edgesToggleButton, pauseForceAtlasButton, pauseForceAtlasButton2)
 import Gargantext.Hooks.Sigmax.Sigma as Sigma
 import Gargantext.Hooks.Sigmax as Sigmax
 import Gargantext.Utils.Range as Range
@@ -36,6 +36,7 @@ import Gargantext.Utils.Reactix as R2
 
 type Controls =
   ( cursorSize :: R.State Number
+  , forceAtlas2Paused :: R.State Boolean
   , multiNodeSelect :: R.Ref Boolean
   , showControls :: R.State Boolean
   , showSidePanel :: R.State Boolean
@@ -103,6 +104,7 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
                 [ -- change type button (?)
                   RH.li {} [ centerButton props.sigmaRef ]
                 , RH.li {} [ pauseForceAtlasButton props.sigmaRef localControls.pauseForceAtlas ] -- spatialization (pause ForceAtlas2)
+                , RH.li {} [ pauseForceAtlasButton2 props.forceAtlas2Paused ]
                 , RH.li {} [ edgesToggleButton props.sigmaRef localControls.showEdges ]
                 , RH.li {} [ edgeSizeControl props.sigmaRef localControls.edgeSize ] -- edge size : 0-3
                   -- change level
@@ -123,6 +125,7 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
 useGraphControls :: R.Hooks (Record Controls)
 useGraphControls = do
   cursorSize <- R.useState' 10.0
+  forceAtlas2Paused <- R.useState' false
   multiNodeSelect <- R.useRef false
   showControls <- R.useState' false
   showSidePanel <- R.useState' false
@@ -131,6 +134,7 @@ useGraphControls = do
 
   pure {
     cursorSize
+  , forceAtlas2Paused
   , multiNodeSelect
   , showControls
   , showSidePanel

src/Gargantext/Components/GraphExplorer/ToggleButton.purs

@@ -4,6 +4,7 @@ module Gargantext.Components.GraphExplorer.ToggleButton
   , edgesToggleButton
   , sidebarToggleButton
   , pauseForceAtlasButton
+  , pauseForceAtlasButton2
   , treeToggleButton
   ) where
 
@@ -95,6 +96,15 @@ pauseForceAtlasButton sigmaRef state =
       setToggled not
     }
 
+pauseForceAtlasButton2 :: R.State Boolean -> R.Element
+pauseForceAtlasButton2 state =
+  toggleButton {
+      state: state
+    , onMessage: "Pause Force Atlas2"
+    , offMessage: "Start Force Atlas2"
+    , onClick: \_ -> snd state not
+    }
+
 treeToggleButton :: R.State Boolean -> R.Element
 treeToggleButton state =
   toggleButton {

src/Gargantext/Hooks/Sigmax.purs

@@ -51,8 +51,8 @@ cleanupFirst :: Sigma -> Effect Unit -> Effect Unit
 cleanupFirst sigma =
   R.setRef sigma.cleanup <<< (flip Seq.cons) (R.readRef sigma.cleanup)
 
-startSigma :: forall settings faSettings n e. R.Ref (Nullable Element) -> R.Ref (Maybe Sigma) -> settings -> faSettings -> Graph n e -> R.Hooks Unit
-startSigma ref sigmaRef settings forceAtlas2Settings graph = do
+startSigma :: forall settings faSettings n e. R.Ref (Nullable Element) -> R.Ref (Maybe Sigma) -> settings -> Boolean -> faSettings -> Graph n e -> R.Hooks Unit
+startSigma ref sigmaRef settings forceAtlas2Paused forceAtlas2Settings graph = do
   {sigma, isNew} <- useSigma ref settings sigmaRef
   useCanvasRenderer ref sigma
 
@@ -71,7 +71,10 @@ startSigma ref sigmaRef settings forceAtlas2Settings graph = do
       _ <- case rSigma of
         Nothing -> log2 "[handleRefresh] can't refresh" sigma
         Just s -> do
+          if forceAtlas2Paused then do
             Sigma.refreshForceAtlas s
+          else
+            Sigma.restartForceAtlas2 s
       pure $ pure unit
 
 -- | Manages a sigma with the given settings

src/Gargantext/Hooks/Sigmax/Sigma.purs

@@ -61,10 +61,10 @@ foreign import _refresh :: EffectFn1 Sigma Unit
 
 refreshForceAtlas :: Sigma -> Effect Unit
 refreshForceAtlas sigma = do
-  isRunning <- isForceAtlas2Running sigma
-  if isRunning then
-    pure unit
-  else do
+  --isRunning <- isForceAtlas2Running sigma
+  --if isRunning then
+    --pure unit
+  --else do
   _ <- setTimeout 100 $ do
     restartForceAtlas2 sigma
     _ <- setTimeout 100 $