[Graph] fix tree clicking when refreshing graphs

src/Gargantext/Components/GraphExplorer.purs

@@ -89,6 +89,7 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
           Sigmax.cleanupSigma rSigma "explorerCpt"
           R.setRef dataRef graph
           snd controls.selectedNodeIds $ const Set.empty
+          snd controls.forceAtlasState $ const SigmaxTypes.InitialRunning
           snd controls.graphStage $ const Graph.Init
 
       pure $

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -15,6 +15,7 @@ import Data.Sequence as Seq
 import Data.Set as Set
 import Data.Tuple (fst, snd)
 import Data.Tuple.Nested ((/\), get1)
+import DOM.Simple.Console (log, log2)
 import Effect (Effect)
 import Effect.Timer (setTimeout)
 import Prelude
@@ -37,6 +38,7 @@ type Controls =
   ( cursorSize      :: R.State Number
   , edgeConfluence :: R.State Range.NumberRange
   , edgeWeight :: R.State Range.NumberRange
+  , forceAtlasState :: R.State SigmaxTypes.ForceAtlasState
   , graph           :: SigmaxTypes.SGraph
   , graphStage      :: R.State Graph.Stage
   , multiSelectEnabled :: R.State Boolean
@@ -53,22 +55,17 @@ controlsToSigmaSettings { cursorSize: (cursorSize /\ _)} = Graph.sigmaSettings
 
 type LocalControls =
   ( labelSize :: R.State Number
-  , pauseForceAtlas :: R.State Boolean
   , showEdges :: R.State Boolean
   )
 
 initialLocalControls :: R.Hooks (Record LocalControls)
 initialLocalControls = do
   labelSize <- R.useState' 14.0
-  --nodeSize <- R.useState' $ Range.Closed { min: 0.0, max: 10.0 }
-  pauseForceAtlas <- R.useState' true
   search <- R.useState' ""
   showEdges <- R.useState' true
 
   pure $ {
     labelSize
-  --, nodeSize
-  , pauseForceAtlas
   , showEdges
   }
 
@@ -90,7 +87,7 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
           Graph.Init -> R.setRef mFAPauseRef Nothing
           _          -> pure unit
 
-      R.useEffect' $ Sigmax.handleForceAtlas2Pause props.sigmaRef localControls.pauseForceAtlas (get1 localControls.showEdges) mFAPauseRef
+      R.useEffect' $ Sigmax.handleForceAtlas2Pause props.sigmaRef props.forceAtlasState (get1 localControls.showEdges) mFAPauseRef
 
       R.useEffect' $ do
         if fst props.showSidePanel == GET.InitialClosed && (not Set.isEmpty $ fst props.selectedNodeIds) then
@@ -98,16 +95,18 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
         else
           pure unit
 
-      R.useEffectOnce' $ do
-        timeoutId <- setTimeout 2000 $ do
-          let (toggled /\ setToggled) = localControls.pauseForceAtlas
-          if toggled then
-            setToggled $ const false
-          else
-            pure unit
-          R.setRef mFAPauseRef Nothing
-        R.setRef mFAPauseRef $ Just timeoutId
-        pure unit
+      R.useEffect1' (fst props.forceAtlasState) $ do
+        if (fst props.forceAtlasState) == SigmaxTypes.InitialRunning then do
+          timeoutId <- setTimeout 2000 $ do
+            let (toggled /\ setToggled) = props.forceAtlasState
+            case toggled of
+              SigmaxTypes.InitialRunning -> setToggled $ const SigmaxTypes.Paused
+              _ -> pure unit
+            R.setRef mFAPauseRef Nothing
+          R.setRef mFAPauseRef $ Just timeoutId
+          pure unit
+         else
+           pure unit
 
       let nodesSorted = A.sortWith (_.size) $ Seq.toUnfoldable $ SigmaxTypes.graphNodes props.graph
       let nodeSizeMin = maybe 0.0 _.size $ A.head nodesSorted
@@ -121,7 +120,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 {} [ pauseForceAtlasButton {state: props.forceAtlasState} ]
                 , RH.li {} [ edgesToggleButton props.sigmaRef localControls.showEdges ]
                 , RH.li {} [ edgeConfluenceControl props.sigmaRef props.edgeConfluence ]
                 , RH.li {} [ edgeWeightControl props.sigmaRef props.edgeWeight ]
@@ -149,6 +148,7 @@ useGraphControls graph = do
   cursorSize      <- R.useState' 10.0
   edgeConfluence <- R.useState' $ Range.Closed { min: 0.0, max: 1.0 }
   edgeWeight <- R.useState' $ Range.Closed { min: 0.0, max: 1.0 }
+  forceAtlasState <- R.useState' SigmaxTypes.InitialRunning
   graphStage      <- R.useState' Graph.Init
   multiSelectEnabled <- R.useState' false
   nodeSize <- R.useState' $ Range.Closed { min: 0.0, max: 100.0 }
@@ -162,6 +162,7 @@ useGraphControls graph = do
   pure { cursorSize
        , edgeConfluence
        , edgeWeight
+       , forceAtlasState
        , graph
        , graphStage
        , multiSelectEnabled

src/Gargantext/Components/GraphExplorer/ToggleButton.purs

@@ -20,6 +20,7 @@ import Reactix.DOM.HTML as H
 
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Hooks.Sigmax as Sigmax
+import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
 
 type Props = (
     state :: R.State Boolean
@@ -78,16 +79,29 @@ multiSelectEnabledButton state =
     , onClick: \_ -> snd state not
     }
 
-pauseForceAtlasButton :: R.Ref Sigmax.Sigma -> R.State Boolean -> R.Element
-pauseForceAtlasButton sigmaRef state =
-  toggleButton {
-      state: state
-    , onMessage: "Pause Force Atlas"
-    , offMessage: "Start Force Atlas"
-    , onClick: \_ -> do
-      let (_ /\ setToggled) = state
-      setToggled not
-    }
+type ForceAtlasProps = (
+  state :: R.State SigmaxTypes.ForceAtlasState
+)
+
+pauseForceAtlasButton :: Record ForceAtlasProps -> R.Element
+pauseForceAtlasButton props = R.createElement pauseForceAtlasButtonCpt props []
+
+pauseForceAtlasButtonCpt :: R.Component ForceAtlasProps
+pauseForceAtlasButtonCpt = R.hooksComponent "ForceAtlasToggleButton" cpt
+  where
+    cpt {state: (state /\ setState)} _ = do
+      pure $
+        H.span {}
+          [
+            H.button
+              { className: "btn btn-primary", on: {click: onClick setState} }
+              [ H.text (text state) ]
+          ]
+    text SigmaxTypes.InitialRunning = "Pause Force Atlas"
+    text SigmaxTypes.Running = "Pause Force Atlas"
+    text SigmaxTypes.Paused = "Start Force Atlas"
+
+    onClick setState _ = setState SigmaxTypes.toggleForceAtlasState
 
 treeToggleButton :: R.State Boolean -> R.Element
 treeToggleButton state =

src/Gargantext/Hooks/Sigmax.purs

@@ -22,7 +22,7 @@ import Effect.Class.Console (error)
 import Effect.Timer (TimeoutId, clearTimeout)
 import FFI.Simple ((.=))
 import Gargantext.Hooks.Sigmax.Sigma as Sigma
-import Gargantext.Hooks.Sigmax.Types (Graph(..), SGraph, EdgesMap, NodesMap, SelectedNodeIds, SelectedEdgeIds, graphEdges)
+import Gargantext.Hooks.Sigmax.Types as ST
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 
@@ -32,7 +32,7 @@ type Sigma =
   , cleanup :: R.Ref (Seq (Effect Unit))
   }
 
-type Data n e = { graph :: R.Ref (Graph n e) }
+type Data n e = { graph :: R.Ref (ST.Graph n e) }
 
 initSigma :: R.Hooks Sigma
 initSigma = do
@@ -85,8 +85,8 @@ refreshData sigma graph
     refreshingMsg = "[refreshData] Refreshing graph"
     errorMsg = "[refreshData] Error reading graph data:"
 
-sigmafy :: forall n e. Graph n e -> Sigma.Graph n e
-sigmafy (Graph g) = {nodes,edges}
+sigmafy :: forall n e. ST.Graph n e -> Sigma.Graph n e
+sigmafy (ST.Graph g) = {nodes,edges}
   where
     nodes = A.fromFoldable g.nodes
     edges = A.fromFoldable g.edges
@@ -110,7 +110,7 @@ dependOnContainer container notFoundMsg f = do
 -- | pausing can be done not only via buttons but also from the initial
 -- | setTimer.
 --handleForceAtlasPause sigmaRef (toggled /\ setToggled) mFAPauseRef = do
-handleForceAtlas2Pause :: R.Ref Sigma -> R.State Boolean -> Boolean -> R.Ref (Maybe TimeoutId) -> Effect Unit
+handleForceAtlas2Pause :: R.Ref Sigma -> R.State ST.ForceAtlasState -> Boolean -> R.Ref (Maybe TimeoutId) -> Effect Unit
 handleForceAtlas2Pause sigmaRef (toggled /\ setToggled) showEdges mFAPauseRef = do
   let sigma = R.readRef sigmaRef
   dependOnSigma sigma "[handleForceAtlas2Pause] sigma: Nothing" $ \s -> do
@@ -119,14 +119,18 @@ handleForceAtlas2Pause sigmaRef (toggled /\ setToggled) showEdges mFAPauseRef =
     isFARunning <- Sigma.isForceAtlas2Running s
     --log2 "[handleForceAtlas2Pause] isFARunning: " isFARunning
     case Tuple toggled isFARunning of
-      Tuple true false -> do
+      Tuple ST.InitialRunning false -> do
+        -- hide edges during forceAtlas rendering, this prevents flickering
+        Sigma.restartForceAtlas2 s
+        setEdges s false
+      Tuple ST.Running false -> do
         -- hide edges during forceAtlas rendering, this prevents flickering
         Sigma.restartForceAtlas2 s
         setEdges s false
         case R.readRef mFAPauseRef of
           Nothing -> pure unit
           Just timeoutId -> clearTimeout timeoutId
-      Tuple false true -> do
+      Tuple ST.Paused true -> do
         -- restore edges state
         Sigma.stopForceAtlas2 s
         setEdges s showEdges
@@ -154,7 +158,7 @@ setEdges sigma val = do
       Sigma.setSettings sigma settings
     _ -> pure unit
 
-markSelectedEdges :: Sigma.Sigma -> SelectedEdgeIds -> EdgesMap -> Effect Unit
+markSelectedEdges :: Sigma.Sigma -> ST.SelectedEdgeIds -> ST.EdgesMap -> Effect Unit
 markSelectedEdges sigma selectedEdgeIds graphEdges = do
   Sigma.forEachEdge sigma \e -> do
     case Map.lookup e.id graphEdges of
@@ -169,7 +173,7 @@ markSelectedEdges sigma selectedEdgeIds graphEdges = do
         pure unit
   Sigma.refresh sigma
 
-markSelectedNodes :: Sigma.Sigma -> SelectedNodeIds -> NodesMap -> Effect Unit
+markSelectedNodes :: Sigma.Sigma -> ST.SelectedNodeIds -> ST.NodesMap -> Effect Unit
 markSelectedNodes sigma selectedNodeIds graphNodes = do
   Sigma.forEachNode sigma \n -> do
     case Map.lookup n.id graphNodes of
@@ -185,7 +189,7 @@ markSelectedNodes sigma selectedNodeIds graphNodes = do
   Sigma.refresh sigma
 
 
-updateEdges :: Sigma.Sigma -> EdgesMap -> Effect Unit
+updateEdges :: Sigma.Sigma -> ST.EdgesMap -> Effect Unit
 updateEdges sigma edgesMap = do
   Sigma.forEachEdge sigma \e -> do
     let mTEdge = Map.lookup e.id edgesMap
@@ -198,7 +202,7 @@ updateEdges sigma edgesMap = do
   Sigma.refresh sigma
 
 
-updateNodes :: Sigma.Sigma -> NodesMap -> Effect Unit
+updateNodes :: Sigma.Sigma -> ST.NodesMap -> Effect Unit
 updateNodes sigma nodesMap = do
   Sigma.forEachNode sigma \n -> do
     let mTNode = Map.lookup n.id nodesMap
@@ -212,7 +216,7 @@ updateNodes sigma nodesMap = do
 
 
 -- | Toggles item visibility in the selected set
-multiSelectUpdate :: SelectedNodeIds -> SelectedNodeIds -> SelectedNodeIds
+multiSelectUpdate :: ST.SelectedNodeIds -> ST.SelectedNodeIds -> ST.SelectedNodeIds
 multiSelectUpdate new selected = foldl fld selected new
   where
     fld selectedAcc item =
@@ -222,7 +226,7 @@ multiSelectUpdate new selected = foldl fld selected new
         Set.insert item selectedAcc
 
 
-bindSelectedNodesClick :: Sigma.Sigma -> R.State SelectedNodeIds -> R.Ref Boolean -> Effect Unit
+bindSelectedNodesClick :: Sigma.Sigma -> R.State ST.SelectedNodeIds -> R.Ref Boolean -> Effect Unit
 bindSelectedNodesClick sigma (_ /\ setSelectedNodeIds) multiSelectEnabledRef =
   Sigma.bindClickNodes sigma $ \nodes -> do
     let multiSelectEnabled = R.readRef multiSelectEnabledRef
@@ -232,7 +236,7 @@ bindSelectedNodesClick sigma (_ /\ setSelectedNodeIds) multiSelectEnabledRef =
     else
       setSelectedNodeIds $ const nodeIds
 
-bindSelectedEdgesClick :: R.Ref Sigma -> R.State SelectedEdgeIds -> Effect Unit
+bindSelectedEdgesClick :: R.Ref Sigma -> R.State ST.SelectedEdgeIds -> Effect Unit
 bindSelectedEdgesClick sigmaRef (_ /\ setSelectedEdgeIds) =
   dependOnSigma (R.readRef sigmaRef) "[graphCpt] no sigma" $ \sigma -> do
     Sigma.bindClickEdge sigma $ \edge -> do

src/Gargantext/Hooks/Sigmax/Types.purs

 module Gargantext.Hooks.Sigmax.Types where
 
-import Prelude (map, ($), (&&), (==), class Ord, Ordering, compare)
+import Prelude (map, ($), (&&), (==), class Ord, Ordering, compare, class Eq)
 import Data.Map as Map
 import Data.Sequence (Seq)
 import Data.Set as Set
@@ -63,3 +63,13 @@ nodesGraphMap graph =
 
 eqGraph :: (Graph Node Edge) -> (Graph Node Edge) -> Boolean
 eqGraph (Graph {nodes: n1, edges: e1}) (Graph {nodes: n2, edges: e2}) = (n1 == n2) && (e1 == e2)
+
+
+data ForceAtlasState = InitialRunning | Running | Paused
+
+derive instance eqForceAtlasState :: Eq ForceAtlasState
+
+toggleForceAtlasState :: ForceAtlasState -> ForceAtlasState
+toggleForceAtlasState InitialRunning = Paused
+toggleForceAtlasState Running = Paused
+toggleForceAtlasState Paused = Running