[Graph] trying out forceAtlas pausing

This doesn't work yet.

src/Gargantext/Components/Graph.purs

@@ -5,7 +5,9 @@ module Gargantext.Components.Graph
   -- )
   where
 import Prelude
-import Data.Nullable (null)
+import Data.Maybe (Maybe(..))
+import Data.Nullable (Nullable, null)
+import DOM.Simple.Console (log2)
 import Reactix as R
 import Reactix.DOM.HTML as RH
 import Gargantext.Hooks.Sigmax
@@ -27,8 +29,10 @@ type Graph = Sigmax.Graph Node Edge
 
 type Props sigma forceatlas2 =
   ( graph :: Graph
+  , forceAtlas2Settings :: forceatlas2
   , sigmaSettings :: sigma
-  , forceAtlas2Settings :: forceatlas2 )
+  , sigmaRef :: R.Ref (Maybe Sigma)
+  )
 
 graph :: forall s fa2. Record (Props s fa2) -> R.Element
 graph props = R.createElement graphCpt props []
@@ -38,7 +42,14 @@ graphCpt = R.hooksComponent "Graph" cpt
   where
     cpt props _ = do
       ref <- R.useRef null
-      sigma <- useSigma ref props.sigmaSettings
+      let mSigma = R.readRef props.sigmaRef
+      _ <- pure $ log2 "[graphCpt] mSigma" mSigma
+      sigma <- case mSigma of
+        Just s -> pure s
+        Nothing -> do
+          sigma_ <- useSigma ref props.sigmaSettings
+          _ <- pure $ R.setRef props.sigmaRef $ Just sigma_
+          pure sigma_
       useCanvasRenderer ref sigma
       useData sigma props.graph
       useForceAtlas2 sigma props.forceAtlas2Settings

src/Gargantext/Components/GraphExplorer.purs

@@ -14,6 +14,7 @@ import Thermite (Render, Spec, simpleSpec)
 import Reactix as R
 import Reactix.DOM.HTML as RH
 
+import Gargantext.Hooks.Sigmax.Sigma (Sigma)
 import Gargantext.Hooks.Sigmax.Types as Sigmax
 import Gargantext.Components.GraphExplorer.Controls as Controls
 import Gargantext.Components.GraphExplorer.Sidebar as Sidebar
@@ -70,6 +71,7 @@ explorerCpt state = R.hooksComponent "GraphExplorer" cpt
   where
     cpt {graphId, mCurrentRoute, treeId, graph} _ = do
       controls <- Controls.useGraphControls
+
       pure $
         RH.div
           { id: "graph-explorer" }
@@ -84,7 +86,9 @@ explorerCpt state = R.hooksComponent "GraphExplorer" cpt
                   , col [ pullRight [ Toggle.sidebarToggleButton controls.showSidePanel ] ]
                   ]
                 , row [ Controls.controls controls ]
-                , row [ tree {mCurrentRoute, treeId} controls, mGraph {graphId, graph} controls, Sidebar.sidebar controls ]
+                , row [ tree {mCurrentRoute, treeId} controls
+                      , mGraph controls {graphId, graph}
+                      , Sidebar.sidebar controls ]
                 , row [ ]
                 ]
               ]
@@ -103,9 +107,9 @@ explorerCpt state = R.hooksComponent "GraphExplorer" cpt
     tree {mCurrentRoute, treeId: Just treeId} _ =
       RH.div { className: "col-md-2" } [ Tree.elTreeview {mCurrentRoute, root: treeId} ]
 
-    mGraph :: {graphId :: GraphId, graph :: Maybe Graph.Graph} -> Record Controls.Controls -> R.Element
-    mGraph {graph: Nothing} _ = RH.div {} []
-    mGraph {graphId, graph: Just graph} controls = graphView controls {graphId, graph}
+    mGraph :: Record Controls.Controls -> {graphId :: GraphId, graph :: Maybe Graph.Graph} -> R.Element
+    mGraph _ {graph: Nothing} = RH.div {} []
+    mGraph controls {graphId, graph: Just graph} = graphView controls {graphId, graph}
 
 type GraphProps = (
     graphId :: GraphId
@@ -123,6 +127,7 @@ graphView controls props = R.createElement el props []
                forceAtlas2Settings: Graph.forceAtlas2Settings
              , graph
              , sigmaSettings: Controls.controlsToSigmaSettings controls
+             , sigmaRef: controls.sigmaRef
              }
         ]
     -- TODO: this doesn't work? seems to always render "col-md-9"

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -14,6 +14,8 @@ module Gargantext.Components.GraphExplorer.Controls
  , getMultiNodeSelect, setMultiNodeSelect
  ) where
 
+import Data.Maybe (Maybe(..))
+import DOM.Simple as DOM
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Prelude
@@ -23,7 +25,8 @@ import Reactix.DOM.HTML as RH
 import Gargantext.Components.Graph as Graph
 import Gargantext.Components.GraphExplorer.RangeControl (edgeSizeControl, nodeSizeControl)
 import Gargantext.Components.GraphExplorer.SlideButton (cursorSizeButton, labelSizeButton)
-import Gargantext.Components.GraphExplorer.ToggleButton (edgesToggleButton)
+import Gargantext.Components.GraphExplorer.ToggleButton (edgesToggleButton, pauseForceAtlasButton)
+import Gargantext.Hooks.Sigmax as Sigmax
 import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
 
@@ -34,10 +37,12 @@ type Controls =
   , labelSize :: R.State Number
   , nodeSize :: R.State Range.NumberRange
   , multiNodeSelect :: R.Ref Boolean
+  , pauseForceAtlas :: R.State Boolean
   , showControls :: R.State Boolean
   , showEdges :: R.State Boolean
   , showSidePanel :: R.State Boolean
   , showTree :: R.State Boolean
+  , sigmaRef :: R.Ref (Maybe Sigmax.Sigma)
   )
 
 controlsToSigmaSettings :: Record Controls -> Record Graph.SigmaSettings
@@ -70,7 +75,8 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
             [ R2.menu { id: "toolbar" }
               [ RH.ul {}
                 [ -- change type button (?)
-                  RH.li {} [ edgesToggleButton props.showEdges ]
+                  RH.li {} [ pauseForceAtlasButton props.sigmaRef props.pauseForceAtlas ] -- spatialization (pause ForceAtlas2)
+                , RH.li {} [ edgesToggleButton props.showEdges ]
                 , RH.li {} [ edgeSizeControl props.edgeSize ] -- edge size : 0-3
                   -- change level
                   -- file upload
@@ -82,7 +88,6 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
                 , RH.li {} [ nodeSizeControl props.nodeSize ] -- node size : 5-15
                   -- zoom: 0 -100 - calculate ratio
                   -- toggle multi node selection
-                  -- spatialization (pause ForceAtlas2)
                   -- save button
                 ]
               ]
@@ -95,20 +100,25 @@ useGraphControls = do
   labelSize <- R.useState' 3.0
   nodeSize <- R.useState' $ Range.Closed { min: 5.0, max: 10.0 }
   multiNodeSelect <- R.useRef false
+  pauseForceAtlas <- R.useState' true
   showControls <- R.useState' false
   showEdges <- R.useState' true
   showSidePanel <- R.useState' false
   showTree <- R.useState' false
+  sigmaRef <- R.useRef Nothing
+
   pure {
-      showTree
-    , showControls
-    , showSidePanel
-    , showEdges
-    , cursorSize
+      cursorSize
     , edgeSize
     , labelSize
-    , nodeSize
     , multiNodeSelect
+    , nodeSize
+    , pauseForceAtlas
+    , showControls
+    , showEdges
+    , showSidePanel
+    , showTree
+    , sigmaRef
     }
 
 getShowTree :: Record Controls -> Boolean

src/Gargantext/Components/GraphExplorer/ToggleButton.purs

@@ -3,15 +3,28 @@ module Gargantext.Components.GraphExplorer.ToggleButton
   , controlsToggleButton
   , edgesToggleButton
   , sidebarToggleButton
+  , pauseForceAtlasButton
   , treeToggleButton
   ) where
 
 import Prelude
+
+import Data.Maybe (Maybe(..))
 import Data.Tuple.Nested ((/\))
+import DOM.Simple.Console (log2)
+import Effect.Class (liftEffect)
 import Reactix as R
 import Reactix.DOM.HTML as H
 
-type Props = ( state :: R.State Boolean, onMessage :: String, offMessage :: String )
+import Gargantext.Hooks.Sigmax as Sigmax
+import Gargantext.Hooks.Sigmax.Sigma (startForceAtlas2, stopForceAtlas2)
+import Gargantext.Utils.Reactix as R2
+
+type Props = (
+    state :: R.State Boolean
+  , onMessage :: String
+  , offMessage :: String
+  )
 
 toggleButton :: Record Props -> R.Element
 toggleButton props = R.createElement toggleButtonCpt props []
@@ -25,7 +38,7 @@ toggleButtonCpt = R.hooksComponent "ToggleButton" cpt
         H.span {}
           [
             H.button
-              { className: "btn btn-primary", on: {click: \_ -> setToggled not } }
+              { className: "btn btn-primary", on: {click: \_ -> setToggled not} }
               [ H.text (text onMessage offMessage toggled) ]
           ]
     text on _off true = on
@@ -33,16 +46,71 @@ toggleButtonCpt = R.hooksComponent "ToggleButton" cpt
 
 controlsToggleButton :: R.State Boolean -> R.Element
 controlsToggleButton state =
-  toggleButton { state: state, onMessage: "Hide Controls", offMessage: "Show Controls" }
+  toggleButton {
+      state: state
+    , onMessage: "Hide Controls"
+    , offMessage: "Show Controls"
+    }
 
 edgesToggleButton :: R.State Boolean -> R.Element
 edgesToggleButton state =
-  toggleButton { state: state, onMessage: "Hide Edges", offMessage: "Show Edges" }
+  toggleButton {
+      state: state
+    , onMessage: "Hide Edges"
+    , offMessage: "Show Edges"
+    }
+
+pauseForceAtlasButton :: R.Ref (Maybe Sigmax.Sigma) -> R.State Boolean -> R.Element
+pauseForceAtlasButton sigmaRef state = R.createElement el props []
+  where
+    props = {
+        state
+      , onMessage: "Pause Force Atlas"
+      , offMessage: "Start Force Atlas"
+      }
+    el = R.hooksComponent "ForceAtlasButton" cpt
+    cpt {state, onMessage, offMessage} _ = do
+      let (toggled /\ setToggled) = state
+      pure $
+        H.span {}
+          [
+            H.button
+              { className: "btn btn-primary"
+              , on: {click: \_ -> do
+                        let mSigma = R.readRef sigmaRef
+                        log2 "[pauseForceAtlasButton] mSigma" mSigma
+                        case mSigma of
+                          Nothing -> pure unit
+                          Just sigma -> do
+                            log2 "[pauseForceAtlasButton] sigma" sigma
+                            log2 "[pauseForceAtlasButton] toggled" toggled
+                            if toggled then
+                              case Sigmax.readSigma sigma of
+                                Nothing -> pure unit
+                                Just s -> stopForceAtlas2 s
+                            else
+                              --startForceAtlas2 $ graph.sigma
+                              pure unit
+                        --setToggled not
+                    }
+              }
+              [ H.text (text onMessage offMessage toggled) ]
+          ]
+    text on _off true = on
+    text _on off false = off
 
 treeToggleButton :: R.State Boolean -> R.Element
 treeToggleButton state =
-  toggleButton { state: state, onMessage: "Hide Tree", offMessage: "Show Tree" }
+  toggleButton {
+      state: state
+    , onMessage: "Hide Tree"
+    , offMessage: "Show Tree"
+    }
 
 sidebarToggleButton :: R.State Boolean -> R.Element
 sidebarToggleButton state =
-  toggleButton { state: state, onMessage: "Hide Sidebar", offMessage: "Show Sidebar" }
+  toggleButton {
+      state: state
+    , onMessage: "Hide Sidebar"
+    , offMessage: "Show Sidebar"
+    }