[Graph] forceAtlas pausing fixes

- timer canceling when user starts/stops forceatlas via controls
- remove duplicated 'pause forceatlas' button -- we use the props one
now

src/Gargantext/Components/Graph.purs

@@ -41,20 +41,11 @@ graph props = R.createElement graphCpt props []
 graphCpt :: forall s fa2. R.Component (Props s fa2)
 graphCpt = R.hooksComponent "Graph" cpt
   where
-    cpt {graph, forceAtlas2Paused, forceAtlas2Settings, sigmaSettings, sigmaRef} _ = do
-      let memoProps = {
-          graph
-        , forceAtlas2Paused
-        , forceAtlas2Settings
-        , sigmaSettings
-        , sigmaRef
-        }
-
+    cpt props _ = do
       ref <- R.useRef null
-      startSigma ref sigmaRef sigmaSettings forceAtlas2Paused forceAtlas2Settings graph
+      startSigma ref props.sigmaRef props.sigmaSettings props.forceAtlas2Paused props.forceAtlas2Settings props.graph
 
-      --pure $ RH.div { ref, style: {height: "95%"} } []
-      R.useMemo1 memoProps $ const $ RH.div { ref, style: {height: "95%"} } []
+      R.useMemo1 props $ const $ RH.div { ref, style: {height: "95%"} } []
 
 type SigmaSettings =
   ( animationsTime :: Number

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -18,7 +18,7 @@ import Data.Tuple.Nested ((/\))
 import DOM.Simple as DOM
 import DOM.Simple.Console (log2)
 import Effect (Effect)
-import Effect.Timer (setTimeout)
+import Effect.Timer (TimeoutId, setTimeout)
 import Prelude
 import Reactix as R
 import Reactix.DOM.HTML as RH
@@ -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, pauseForceAtlasButton2)
+import Gargantext.Components.GraphExplorer.ToggleButton (edgesToggleButton, pauseForceAtlasButton)
 import Gargantext.Hooks.Sigmax.Sigma as Sigma
 import Gargantext.Hooks.Sigmax as Sigmax
 import Gargantext.Utils.Range as Range
@@ -51,7 +51,6 @@ type LocalControls =
   ( edgeSize :: R.State Range.NumberRange
   , labelSize :: R.State Number
   , nodeSize :: R.State Range.NumberRange
-  , pauseForceAtlas :: R.State Boolean
   , showEdges :: R.State Boolean
   )
 
@@ -60,14 +59,12 @@ initialLocalControls = do
   edgeSize <- R.useState' $ Range.Closed { min: 0.5, max: 1.0 }
   labelSize <- R.useState' 14.0
   nodeSize <- R.useState' $ Range.Closed { min: 5.0, max: 10.0 }
-  pauseForceAtlas <- R.useState' true
   showEdges <- R.useState' true
 
   pure $ {
     edgeSize
   , labelSize
   , nodeSize
-  , pauseForceAtlas
   , showEdges
   }
 
@@ -77,23 +74,27 @@ controls props = R.createElement controlsCpt props []
 controlsCpt :: R.Component Controls
 controlsCpt = R.hooksComponent "GraphControls" cpt
   where
-    forceAtlas2Timeout = 2.0  -- in seconds
+    forceAtlas2Timeout = 5.0  -- in seconds
 
     cpt props _ = do
       localControls <- initialLocalControls
+      timeoutIdRef <- R.useRef (Nothing :: Maybe TimeoutId)
 
       R.useEffectOnce $ do
-          _ <- setTimeout (round $ forceAtlas2Timeout * 1000.0) $ do
+          timeoutId <- setTimeout (round $ forceAtlas2Timeout * 1000.0) $ do
             log2 "Pausing forceatlas" props.sigmaRef
-            let (pauseForceAtlas /\ setPauseForceAtlas) = localControls.pauseForceAtlas
+            --let (pauseForceAtlas /\ setPauseForceAtlas) = localControls.pauseForceAtlas
+            let (forceAtlas2Paused /\ setForceAtlas2Paused) = props.forceAtlas2Paused
             let mSigma = Sigmax.readSigma <$> R.readRef props.sigmaRef
             case mSigma of
-              Just (Just s) -> if pauseForceAtlas then do
-                  setPauseForceAtlas $ const false
-                  Sigma.stopForceAtlas2 s
-                else
+              Just (Just s) -> if forceAtlas2Paused then do
                   pure unit
+                else
+                  setForceAtlas2Paused $ const true
+                  --Sigma.stopForceAtlas2 s
               _             -> pure unit
+            R.setRef timeoutIdRef Nothing
+          R.setRef timeoutIdRef $ Just timeoutId
           pure $ pure unit
 
       pure $ case getShowControls props of
@@ -103,8 +104,7 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
               [ RH.ul {}
                 [ -- 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 {} [ pauseForceAtlasButton timeoutIdRef props.forceAtlas2Paused ] -- spatialization (pause ForceAtlas2)
                 , RH.li {} [ edgesToggleButton props.sigmaRef localControls.showEdges ]
                 , RH.li {} [ edgeSizeControl props.sigmaRef localControls.edgeSize ] -- edge size : 0-3
                   -- change level

src/Gargantext/Components/GraphExplorer/ToggleButton.purs

@@ -4,24 +4,23 @@ module Gargantext.Components.GraphExplorer.ToggleButton
   , edgesToggleButton
   , sidebarToggleButton
   , pauseForceAtlasButton
-  , pauseForceAtlasButton2
   , treeToggleButton
   ) where
 
 import Prelude
 
+import DOM.Simple.Console (log2)
 import Data.Maybe (Maybe(..))
 import Data.Tuple (snd)
 import Data.Tuple.Nested ((/\))
-import DOM.Simple.Console (log2)
 import Effect (Effect)
 import Effect.Class (liftEffect)
-import Reactix as R
-import Reactix.DOM.HTML as H
-
+import Effect.Timer (TimeoutId, clearTimeout)
 import Gargantext.Hooks.Sigmax as Sigmax
 import Gargantext.Hooks.Sigmax.Sigma as Sigma
 import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
 
 type Props = (
     state :: R.State Boolean
@@ -78,33 +77,24 @@ edgesToggleButton sigmaRef state =
       setToggled not
     }
 
-pauseForceAtlasButton :: R.Ref (Maybe Sigmax.Sigma) -> R.State Boolean -> R.Element
-pauseForceAtlasButton sigmaRef state =
+pauseForceAtlasButton :: R.Ref (Maybe TimeoutId) -> R.State Boolean -> R.Element
+pauseForceAtlasButton mTimeoutIdRef state =
   toggleButton {
       state: state
-    , onMessage: "Pause Force Atlas"
-    , offMessage: "Start Force Atlas"
+    , onMessage: "Start Force Atlas"
+    , offMessage: "Pause Force Atlas"
     , onClick: \_ -> do
-      let mSigma = Sigmax.readSigma <$> R.readRef sigmaRef
+      let mTimeoutId = R.readRef mTimeoutIdRef
       let (toggled /\ setToggled) = state
-      case mSigma of
-        Just (Just s) -> if toggled then
-            Sigma.stopForceAtlas2 s
-          else
-            Sigma.restartForceAtlas2 s
-        _             -> pure unit
+      -- cancel the default stop forceAtlas Timer
+      -- User can quickly click stop/start button.
+      -- In this case the default timer shouldn't fire.
+      case mTimeoutId of
+        Just timeoutId -> clearTimeout timeoutId
+        Nothing -> pure unit
       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 {