Merge branch 'dev-warnings-cleanup' into dev

dist/styles/Graph.css

@@ -10,6 +10,19 @@
   display: flex;
   max-width: 200px;
 }
+#graph-explorer .row.controls {
+  height: 79px;
+}
+#graph-explorer .graph-tree {
+  position: absolute;
+  top: 120px;
+  max-height: 600px;
+  overflow-y: scroll;
+  z-index: 1;
+}
+#graph-explorer #graph-view {
+  height: 95%;
+}
 #graph-explorer #sp-container {
   position: absolute;
   left: 70%;
@@ -17,6 +30,8 @@
   z-index: 1;
   border: 1px white solid;
   background-color: white;
+  max-height: 600px;
+  overflow-y: scroll;
 }
 #graph-explorer #sp-container #myTab {
   marginBottom: 18px;

dist/styles/Graph.sass

@@ -10,6 +10,19 @@
         display: flex
         max-width: 200px
 
+  .row.controls
+    height: 79px
+
+  .graph-tree
+    position: absolute
+    top: 120px
+    max-height: 600px
+    overflow-y: scroll
+    z-index: 1
+
+  #graph-view
+    height: 95%
+
   #sp-container
     position: absolute
     left: 70%
@@ -17,6 +30,8 @@
     z-index: 1
     border: 1px white solid
     background-color: white
+    max-height: 600px
+    overflow-y: scroll
 
     #myTab
       marginBottom: 18px

src/Gargantext/Components/Graph.purs

@@ -4,7 +4,7 @@ module Gargantext.Components.Graph
   -- , forceAtlas2Settings, ForceAtlas2Settings, ForceAtlas2OptionalSettings
   -- )
   where
-import Prelude (bind, const, discard, pure, ($), unit, map)
+import Prelude (bind, const, discard, pure, ($), unit, map, not, show)
 
 import Data.Array as A
 import Data.Either (Either(..))
@@ -32,6 +32,7 @@ type Props sigma forceatlas2 =
   , graph :: SigmaxTypes.SGraph
   , multiSelectEnabledRef :: R.Ref Boolean
   , selectedNodeIds :: R.State SigmaxTypes.SelectedNodeIds
+  , showEdges :: R.State SigmaxTypes.ShowEdgesState
   , sigmaRef :: R.Ref Sigmax.Sigma
   , sigmaSettings :: sigma
   , stage :: R.State Stage
@@ -90,7 +91,7 @@ graphCpt = R.hooksComponent "Graph" cpt
           log "[graphCpt] cleanup"
           pure $ pure unit
 
-    stageHooks props@{sigmaRef, stage: (Ready /\ setStage), transformedGraph} = do
+    stageHooks props@{showEdges: (showEdges /\ _), sigmaRef, stage: (Ready /\ setStage), transformedGraph} = do
       let tEdgesMap = SigmaxTypes.edgesGraphMap transformedGraph
       let tNodesMap = SigmaxTypes.nodesGraphMap transformedGraph
 
@@ -99,6 +100,7 @@ graphCpt = R.hooksComponent "Graph" cpt
         Sigmax.dependOnSigma (R.readRef sigmaRef) "[graphCpt (Ready)] no sigma" $ \sigma -> do
           Sigmax.updateEdges sigma tEdgesMap
           Sigmax.updateNodes sigma tNodesMap
+          Sigmax.setEdges sigma (not $ SigmaxTypes.edgeStateHidden showEdges)
 
     stageHooks _ = pure unit
 

src/Gargantext/Components/GraphExplorer.purs

@@ -12,6 +12,7 @@ import Data.Sequence as Seq
 import Data.Set as Set
 import Data.Tuple (fst, snd, Tuple(..))
 import Data.Tuple.Nested ((/\))
+import DOM.Simple.Console (log2)
 import DOM.Simple.Types (Element)
 import Effect.Aff (Aff)
 import Math (log)
@@ -85,11 +86,16 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
         if SigmaxTypes.eqGraph readData graph then
           pure unit
         else do
+          -- Graph data changed, reinitialize sigma.
           let rSigma = R.readRef controls.sigmaRef
           Sigmax.cleanupSigma rSigma "explorerCpt"
           R.setRef dataRef graph
+          -- Reinitialize bunch of state as well.
           snd controls.selectedNodeIds $ const Set.empty
+          snd controls.showEdges $ const SigmaxTypes.EShow
+          snd controls.forceAtlasState $ const SigmaxTypes.InitialRunning
           snd controls.graphStage $ const Graph.Init
+          snd controls.showSidePanel $ const GET.InitialClosed
 
       pure $
         RH.div
@@ -102,38 +108,32 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
                   , col [ Toggle.controlsToggleButton controls.showControls ]
                   , col [ pullRight [ Toggle.sidebarToggleButton controls.showSidePanel ] ]
                   ]
-                , row [ Controls.controls controls ]
+                , rowControls [ Controls.controls controls ]
                 , row [ tree (fst controls.showTree) {sessions, mCurrentRoute, frontends} (snd showLogin)
-                      , RH.div { ref: graphRef, id: "graph-view", className: graphClassName controls, style: {height: "95%"} } []  -- graph container
+                      , RH.div { ref: graphRef, id: "graph-view", className: "col-md-12" } []  -- graph container
                       , graphView { controls
                                   , elRef: graphRef
                                   , graphId
                                   , graph
                                   , multiSelectEnabledRef
                                   }
-                      , mSidebar graph mMetaData { frontends
+                      , mSidebar mMetaData { frontends
+                                           , graph
                                            , session
                                            , selectedNodeIds: controls.selectedNodeIds
                                            , showSidePanel: fst controls.showSidePanel
                                            }
                       ]
-                , row [
-                  ]
                 ]
               ]
             ]
           ]
 
-    graphClassName :: Record Controls.Controls -> String
-    graphClassName {showSidePanel: (GET.Opened /\ _), showTree: (true /\ _)} = "col-md-8"
-    graphClassName {showTree: (true /\ _)} = "col-md-10"
-    graphClassName {showSidePanel: (GET.Opened /\ _)} = "col-md-10"
-    graphClassName _ = "col-md-12"
-
     outer = RH.div { className: "col-md-12" }
     inner = RH.div { className: "container-fluid", style: { paddingTop: "90px" } }
     row1  = RH.div { className: "row", style: { paddingBottom: "10px", marginTop: "-24px" } }
     row   = RH.div { className: "row" }
+    rowControls = RH.div { className: "row controls" }
     col       = RH.div { className: "col-md-4" }
     pullLeft  = RH.div { className: "pull-left" }
     pullRight = RH.div { className: "pull-right" }
@@ -144,18 +144,17 @@ explorerCpt = R.hooksComponent "G.C.GraphExplorer.explorer" cpt
          -> R.Element
     tree false _ _ = RH.div { id: "tree" } []
     tree true {sessions, mCurrentRoute: route, frontends} showLogin =
-      RH.div {className: "col-md-2", style: {paddingTop: "60px"}}
-      [forest {sessions, route, frontends, showLogin}]
+      RH.div {className: "col-md-2 graph-tree"} [forest {sessions, route, frontends, showLogin}]
 
-    mSidebar :: SigmaxTypes.SGraph
-             -> Maybe GET.MetaData
+    mSidebar :: Maybe GET.MetaData
              -> { frontends :: Frontends
+                , graph :: SigmaxTypes.SGraph
                 , showSidePanel :: GET.SidePanelState
                 , selectedNodeIds :: R.State SigmaxTypes.SelectedNodeIds
                 , session :: Session }
              -> R.Element
-    mSidebar _ Nothing _ = RH.div {} []
-    mSidebar graph (Just metaData) {frontends, session, selectedNodeIds, showSidePanel} =
+    mSidebar Nothing _ = RH.div {} []
+    mSidebar (Just metaData) {frontends, graph, session, selectedNodeIds, showSidePanel} =
       Sidebar.sidebar { frontends
                       , graph
                       , metaData
@@ -192,6 +191,7 @@ graphViewCpt = R.hooksComponent "GraphView" cpt
         , graph
         , multiSelectEnabledRef
         , selectedNodeIds: controls.selectedNodeIds
+        , showEdges: controls.showEdges
         , sigmaRef: controls.sigmaRef
         , sigmaSettings: Graph.sigmaSettings
         , stage: controls.graphStage
@@ -378,7 +378,7 @@ transformGraph controls graph = SigmaxTypes.Graph {nodes: newNodes, edges: newEd
     hasSelection = not $ Set.isEmpty (fst controls.selectedNodeIds)
 
     newNodes = nodeSizeFilter <$> nodeMarked <$> nodes
-    newEdges = edgeConfluenceFilter <$> edgeWeightFilter <$> edgeMarked <$> edges
+    newEdges = edgeConfluenceFilter <$> edgeWeightFilter <$> edgeShowFilter <$> edgeMarked <$> edges
 
     nodeSizeFilter node@{ size } =
       if Range.within (fst controls.nodeSize) size then
@@ -391,6 +391,11 @@ transformGraph controls graph = SigmaxTypes.Graph {nodes: newNodes, edges: newEd
         edge
       else
         edge { hidden = true }
+    edgeShowFilter edge =
+      if (SigmaxTypes.edgeStateHidden $ fst controls.showEdges) then
+        edge { hidden = true }
+      else
+        edge
     edgeWeightFilter edge@{ weight } =
       if Range.within (fst controls.edgeWeight) weight then
         edge

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -14,7 +14,7 @@ import Data.Maybe (Maybe(..), maybe)
 import Data.Sequence as Seq
 import Data.Set as Set
 import Data.Tuple (fst, snd)
-import Data.Tuple.Nested ((/\), get1)
+import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Effect.Timer (setTimeout)
 import Prelude
@@ -37,12 +37,14 @@ 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
   , nodeSize        :: R.State Range.NumberRange
   , selectedNodeIds :: R.State SigmaxTypes.SelectedNodeIds
   , showControls    :: R.State Boolean
+  , showEdges       :: R.State SigmaxTypes.ShowEdgesState
   , showSidePanel   :: R.State GET.SidePanelState
   , showTree        :: R.State Boolean
   , sigmaRef        :: R.Ref Sigmax.Sigma
@@ -53,23 +55,15 @@ 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
   }
 
 controls :: Record Controls -> R.Element
@@ -84,30 +78,41 @@ controlsCpt = R.hooksComponent "GraphControls" cpt
       -- If user pauses FA before auto is triggered, clear the timeoutId
       mFAPauseRef <- R.useRef Nothing
 
-      -- when graph is changed, cleanup the mFAPauseRef
+      -- When graph is changed, cleanup the mFAPauseRef so that forceAtlas
+      -- timeout is retriggered.
       R.useEffect' $ do
         case fst props.graphStage of
           Graph.Init -> R.setRef mFAPauseRef Nothing
           _          -> pure unit
 
-      R.useEffect' $ Sigmax.handleForceAtlas2Pause props.sigmaRef localControls.pauseForceAtlas (get1 localControls.showEdges) mFAPauseRef
+      -- Handle case when FA is paused from outside events, eg. the automatic timer.
+      R.useEffect' $ Sigmax.handleForceAtlas2Pause props.sigmaRef props.forceAtlasState mFAPauseRef
+
+      -- Handle automatic edge hiding when FA is running (to prevent flickering).
+      R.useEffect2' props.sigmaRef props.forceAtlasState $
+        snd props.showEdges $ SigmaxTypes.forceAtlasEdgeState (fst props.forceAtlasState)
 
+      -- Automatic opening of sidebar when a node is selected (but only first time).
       R.useEffect' $ do
         if fst props.showSidePanel == GET.InitialClosed && (not Set.isEmpty $ fst props.selectedNodeIds) then
           snd props.showSidePanel $ \_ -> GET.Opened
         else
           pure unit
 
-      R.useEffectOnce' $ do
+      -- Timer to turn off the initial FA. This is because FA eats up lot of
+      -- CPU, has memory leaks etc.
+      R.useEffect1' (fst props.forceAtlasState) $ do
+        if (fst props.forceAtlasState) == SigmaxTypes.InitialRunning then do
           timeoutId <- setTimeout 2000 $ do
-          let (toggled /\ setToggled) = localControls.pauseForceAtlas
-          if toggled then
-            setToggled $ const false
-          else
-            pure unit
+            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,8 +126,8 @@ 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 {} [ edgesToggleButton props.sigmaRef localControls.showEdges ]
+                , RH.li {} [ pauseForceAtlasButton {state: props.forceAtlasState} ]
+                , RH.li {} [ edgesToggleButton {state: props.showEdges} ]
                 , RH.li {} [ edgeConfluenceControl props.sigmaRef props.edgeConfluence ]
                 , RH.li {} [ edgeWeightControl props.sigmaRef props.edgeWeight ]
                   -- change level
@@ -149,12 +154,14 @@ 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 }
   showTree <- R.useState' false
   selectedNodeIds <- R.useState' $ Set.empty
   showControls    <- R.useState' false
+  showEdges <- R.useState' SigmaxTypes.EShow
   showSidePanel   <- R.useState' GET.InitialClosed
   sigma <- Sigmax.initSigma
   sigmaRef <- R.useRef sigma
@@ -162,12 +169,14 @@ useGraphControls graph = do
   pure { cursorSize
        , edgeConfluence
        , edgeWeight
+       , forceAtlasState
        , graph
        , graphStage
        , multiSelectEnabled
        , nodeSize
        , selectedNodeIds
        , showControls
+       , showEdges
        , showSidePanel
        , showTree
        , sigmaRef

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
@@ -55,19 +56,28 @@ controlsToggleButton state =
     , onClick: \_ -> snd state not
     }
 
-edgesToggleButton :: R.Ref Sigmax.Sigma -> R.State Boolean -> R.Element
-edgesToggleButton sigmaRef state =
-  toggleButton {
-      state: state
-    , onMessage: "Hide Edges"
-    , offMessage: "Show Edges"
-    , onClick: \_ -> do
-      let sigma = R.readRef sigmaRef
-      let (toggled /\ setToggled) = state
-      Sigmax.dependOnSigma sigma "[edgesToggleButton] sigma: Nothing" $ \s -> do
-        Sigmax.setEdges s $ not toggled
-      setToggled not
-    }
+type EdgesButtonProps = (
+  state :: R.State SigmaxTypes.ShowEdgesState
+)
+
+edgesToggleButton :: Record EdgesButtonProps -> R.Element
+edgesToggleButton props = R.createElement edgesToggleButtonCpt props []
+
+edgesToggleButtonCpt :: R.Component EdgesButtonProps
+edgesToggleButtonCpt = R.hooksComponent "EdgesToggleButton" 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 s = if SigmaxTypes.edgeStateHidden s then "Show edges" else "Hide edges"
+
+    -- TODO: Move this to Graph.purs to the R.useEffect handler which renders nodes/edges
+    onClick setState _ = setState SigmaxTypes.toggleShowEdgesState
 
 multiSelectEnabledButton :: R.State Boolean -> R.Element
 multiSelectEnabledButton state =
@@ -78,16 +88,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,8 +110,8 @@ 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 sigmaRef (toggled /\ setToggled) showEdges mFAPauseRef = do
+handleForceAtlas2Pause :: R.Ref Sigma -> R.State ST.ForceAtlasState -> R.Ref (Maybe TimeoutId) -> Effect Unit
+handleForceAtlas2Pause sigmaRef (toggled /\ setToggled) mFAPauseRef = do
   let sigma = R.readRef sigmaRef
   dependOnSigma sigma "[handleForceAtlas2Pause] sigma: Nothing" $ \s -> do
     --log2 "[handleForceAtlas2Pause] mSigma: Just " s
@@ -119,17 +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
+      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
       _ -> pure unit
     -- handle case when user pressed pause/start fa button before timeout fired
     --case R.readRef mFAPauseRef of
@@ -145,16 +146,18 @@ setEdges sigma val = do
       , drawEdgeLabels: val
       , hideEdgesOnMove: not val
     }
-  -- prevent showing edges (via show edges button) when FA is running (flickering)
-  isFARunning <- Sigma.isForceAtlas2Running sigma
-  case Tuple val isFARunning of
-    Tuple false _ ->
   Sigma.setSettings sigma settings
-    Tuple true false ->
-      Sigma.setSettings sigma settings
-    _ -> pure unit
 
-markSelectedEdges :: Sigma.Sigma -> SelectedEdgeIds -> EdgesMap -> Effect Unit
+  -- -- prevent showing edges (via show edges button) when FA is running (flickering)
+  -- isFARunning <- Sigma.isForceAtlas2Running sigma
+  -- case Tuple val isFARunning of
+  --   Tuple false _ ->
+  --     Sigma.setSettings sigma settings
+  --   Tuple true false ->
+  --     Sigma.setSettings sigma settings
+  --   _ -> pure 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 +172,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 +188,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
@@ -195,10 +198,10 @@ updateEdges sigma edgesMap = do
         _ <- pure $ (e .= "color") tColor
         _ <- pure $ (e .= "hidden") tHidden
         pure unit
-  Sigma.refresh sigma
+  --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
@@ -208,11 +211,11 @@ updateNodes sigma nodesMap = do
         _ <- pure $ (n .= "color") tColor
         _ <- pure $ (n .= "hidden") tHidden
         pure unit
-  Sigma.refresh sigma
+  --Sigma.refresh sigma
 
 
 -- | 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 +225,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 +235,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 Eq, class Ord, class Show, Ordering, compare)
+import Data.Generic.Rep (class Generic)
+import Data.Generic.Rep.Eq (genericEq)
+import Data.Generic.Rep.Show (genericShow)
 import Data.Map as Map
 import Data.Sequence (Seq)
 import Data.Set as Set
@@ -63,3 +66,68 @@ 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)
+
+
+-- | Custom state for force atlas. Basically, it can be "Running" or "Paused"
+-- however when graph is loaded initially, forceAtlas is running for a couple of
+-- seconds and then stops (unless the user alters this by clicking the toggle
+-- button).
+data ForceAtlasState = InitialRunning | Running | Paused
+
+derive instance genericForceAtlasState :: Generic ForceAtlasState _
+instance eqForceAtlasState :: Eq ForceAtlasState where
+  eq = genericEq
+
+toggleForceAtlasState :: ForceAtlasState -> ForceAtlasState
+toggleForceAtlasState InitialRunning = Paused
+toggleForceAtlasState Running = Paused
+toggleForceAtlasState Paused = Running
+
+-- | Custom state for show edges. Normally it is EShow or EHide (show/hide
+-- | edges). However, edges are temporarily turned off when forceAtlas is
+-- | running.
+data ShowEdgesState = EShow | EHide | ETempHiddenThenShow
+
+derive instance genericShowEdgesState :: Generic ShowEdgesState _
+instance eqShowEdgesState :: Eq ShowEdgesState where
+  eq = genericEq
+instance showShowEdgesState :: Show ShowEdgesState where
+  show = genericShow
+
+-- | Whether the edges are hidden now (temp or "stable").
+edgeStateHidden :: ShowEdgesState -> Boolean
+edgeStateHidden EHide = true
+edgeStateHidden ETempHiddenThenShow = true
+edgeStateHidden _ = false
+
+-- | Switch from hidden to shown, handling the temp state as well.
+toggleShowEdgesState :: ShowEdgesState -> ShowEdgesState
+toggleShowEdgesState s =
+  if edgeStateHidden s then
+    EShow
+  else
+    EHide
+
+-- | Return the temporary hidden state, if applicable.
+edgeStateTempHide :: ShowEdgesState -> ShowEdgesState
+edgeStateTempHide EHide = EHide
+edgeStateTempHide _ = ETempHiddenThenShow
+
+-- | Whether, after disabling the temp state, edges will be shown or hidden.
+edgeStateWillBeHidden :: ShowEdgesState -> Boolean
+edgeStateWillBeHidden EHide = true
+edgeStateWillBeHidden _ = false
+
+-- | Get rid of the temporary transition
+edgeStateStabilize :: ShowEdgesState -> ShowEdgesState
+edgeStateStabilize ETempHiddenThenShow = EShow
+edgeStateStabilize s = s
+
+-- | Return state in which showEdges should be depending on forceAtlasState
+forceAtlasEdgeState :: ForceAtlasState -> ShowEdgesState -> ShowEdgesState
+forceAtlasEdgeState InitialRunning EShow = ETempHiddenThenShow
+forceAtlasEdgeState InitialRunning es = es
+forceAtlasEdgeState Running EShow = ETempHiddenThenShow
+forceAtlasEdgeState Running es = es
+forceAtlasEdgeState Paused ETempHiddenThenShow = EShow
+forceAtlasEdgeState Paused es = es