[toestand] more refactoring work

src/Gargantext/Components/Forest.purs

@@ -76,8 +76,7 @@ forestCpt = here.component "forest" cpt where
     -- NOTE: this is a hack to reload the forest on demand
     tasks'        <- GAT.useTasks reloadRoot reloadForest
     R.useEffect' $ do
-      _ <- T.write (Just tasks') tasks
-      pure unit
+      T2.write_ (Just tasks') tasks
     handed'       <- T.useLive T.unequal handed
     reloadForest' <- T.useLive T.unequal reloadForest
     reloadRoot'   <- T.useLive T.unequal reloadRoot
@@ -124,8 +123,7 @@ plus handed showLogin backend = H.div { className: "row" }
   where
     click _ = do
       -- _ <- T.modify (const Nothing) backend
-      _ <- T.write true showLogin
-      pure unit
+      T2.write_ true showLogin
     title = "Add or remove connections to the server(s)."
     divClass = "fa fa-universal-access"
     buttonClass =

src/Gargantext/Components/Forest/Tree.purs

@@ -172,7 +172,7 @@ performAction (DeleteNode nt) p@{ forestOpen
     GT.NodePublic GT.FolderPublic -> void $ deleteNode session nt id
     GT.NodePublic _               -> void $ unpublishNode session parent_id id
     _                             -> void $ deleteNode session nt id
-  _ <- liftEffect $ T.modify (Set.delete (mkNodeId session id)) forestOpen
+  liftEffect $ T2.modify_ (Set.delete (mkNodeId session id)) forestOpen
   performAction RefreshTree p
 performAction (DoSearch task) p@{ tasks
                                 , tree: (NTree (LNode {id}) _) } = liftEffect $ do
@@ -198,14 +198,14 @@ performAction (ShareTeam username) p@{ tree: (NTree (LNode {id}) _)} =
 performAction (SharePublic { params }) p@{ forestOpen } = traverse_ f params where
   f (SubTreeOut { in: inId, out }) = do
     void $ Share.shareReq p.session inId $ Share.SharePublicParams { node_id: out }
-    _ <- liftEffect $ T.modify (Set.insert (mkNodeId p.session out)) forestOpen
+    liftEffect $ T2.modify_ (Set.insert (mkNodeId p.session out)) forestOpen
     performAction RefreshTree p
 performAction (AddContact params) p@{ tree: (NTree (LNode {id}) _) } =
     void $ Contact.contactReq p.session id params
 performAction (AddNode name nodeType) p@{ forestOpen
                                         , tree: (NTree (LNode { id }) _) } = do
   task <- addNode p.session id $ AddNodeValue {name, nodeType}
-  _ <- liftEffect $ T.modify (Set.insert (mkNodeId p.session id)) forestOpen
+  liftEffect $ T2.modify_ (Set.insert (mkNodeId p.session id)) forestOpen
   performAction RefreshTree p
 performAction (UploadFile nodeType fileType mName blob) p@{ tasks
                                                           , tree: (NTree (LNode { id }) _) } = do
@@ -230,7 +230,7 @@ performAction (MoveNode {params}) p@{ forestOpen
                                     , session } = traverse_ f params where
   f (SubTreeOut { in: in', out }) = do
     void $ moveNodeReq p.session in' out
-    _ <- liftEffect $ T.modify (Set.insert (mkNodeId session out)) forestOpen
+    liftEffect $ T2.modify_ (Set.insert (mkNodeId session out)) forestOpen
     performAction RefreshTree p
 performAction (MergeNode { params }) p = traverse_ f params where
   f (SubTreeOut { in: in', out }) = do

src/Gargantext/Components/Forest/Tree/Node.purs

@@ -210,7 +210,7 @@ folderIconCpt = here.component "folderIcon" cpt
   where
     cpt { folderOpen, nodeType } _ = do
       open <- T.read folderOpen
-      pure $ H.a { className: "folder-icon", on: { click: \_ -> T.modify not folderOpen } }
+      pure $ H.a { className: "folder-icon", on: { click: \_ -> T2.modify_ not folderOpen } }
         [ H.i { className: GT.fldr nodeType open } [] ]
 
 type ChevronIconProps = (
@@ -231,7 +231,7 @@ chevronIconCpt = here.component "chevronIcon" cpt
     cpt { folderOpen, handed, isLeaf: false, nodeType } _ = do
       open <- T.read folderOpen
       pure $ H.a { className: "chevron-icon"
-          , on: { click: \_ -> T.modify not folderOpen }
+          , on: { click: \_ -> T2.modify_ not folderOpen }
           }
         [ H.i { className: if open
                             then "fa fa-chevron-down"

src/Gargantext/Components/Forest/Tree/Node/Action/Contact.purs

@@ -19,6 +19,7 @@ import Gargantext.Sessions (Session, post)
 import Gargantext.Types (ID)
 import Gargantext.Types as GT
 import Gargantext.Utils.Reactix as R2
+import Gargantext.Utils.Toestand as T2
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Forest.Tree.Node.Action.Contact"
@@ -69,7 +70,7 @@ textInputBoxCpt = here.component "textInputBox" cpt where
               click _ = do
                 firstname <- T.read first
                 lastname  <- T.read last
-                _ <- T.write false isOpen
+                T2.write_ false isOpen
                 launchAff $
                   dispatch (boxAction $ AddContactParams { firstname, lastname })
           cancelBtn =
@@ -77,4 +78,4 @@ textInputBoxCpt = here.component "textInputBox" cpt where
             { className: "btn text-danger glyphitem fa fa-remove col-md-2 pull-left"
             , on: { click }, title: "Cancel", type: "button"
             } [] where
-              click _ = void $ T.write false isOpen
+              click _ = T2.write_ false isOpen

src/Gargantext/Components/Forest/Tree/Node/Box.purs

@@ -81,7 +81,7 @@ nodePopupCpt = here.component "nodePopupView" cpt where
   editIcon _ true = H.div {} []
   editIcon isOpen false =
     H.a { className: glyphicon "pencil", id: "rename1"
-        , title    : "Rename", on: { click: \_ -> void $ T.write true isOpen } } []
+        , title    : "Rename", on: { click: \_ -> T2.write_ true isOpen } } []
   panelBody :: T.Cursor (Maybe NodeAction) -> Record NodePopupProps -> R.Element
   panelBody nodePopupState {dispatch: d, nodeType} =
     let (SettingsBox { edit, doc, buttons }) = settingsBox nodeType in
@@ -134,7 +134,7 @@ buttonClickCpt = here.component "buttonClick" cpt where
     action <- T.useLive T.unequal state
     let className = glyphiconActive (glyphiconNodeAction todo) (action == (Just todo))
     let style = iconAStyle nodeType todo
-    let click _ = T.write (if action == Just todo then Nothing else Just todo) state
+    let click _ = T2.write_ (if action == Just todo then Nothing else Just todo) state
     pure $ H.div { className: "col-1" }
       [ H.a { style, className, id: show todo, title: show todo, on: { click } } [] ]
         -- | Open the help indications if selected already

src/Gargantext/Components/Forest/Tree/Node/Tools.purs

@@ -26,6 +26,7 @@ import Gargantext.Types as GT
 import Gargantext.Utils (glyphicon, toggleSet)
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.ReactTooltip as ReactTooltip
+import Gargantext.Utils.Toestand as T2
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Forest.Tree.Node.Tools"
@@ -81,8 +82,8 @@ textInputBoxCpt = here.component "textInputBox" cpt where
               , className: "text-danger col-2 " <> glyphicon "times" } [] ]
       submit ref _ = do
         launchAff_ $ dispatch (boxAction $ R.readRef ref)
-        void $ T.write false isOpen
-      click _ = void $ T.write false isOpen
+        T2.write_ false isOpen
+      click _ = T2.write_ false isOpen
 
 type DefaultText = String
 
@@ -223,7 +224,7 @@ nodeLinkCpt = here.component "nodeLink" cpt where
            -- NOTE Don't toggle tree if it is not selected
            -- click on closed -> open
            -- click on open   -> ?
-           click _ = when (not isSelected) (void $ T.write true folderOpen)
+           click _ = when (not isSelected) (T2.write_ true folderOpen)
            tooltipId = "node-link-" <> show id
            href = url frontends $ GT.NodePath (sessionId session) nodeType (Just id)
 

src/Gargantext/Components/Graph.purs

@@ -4,17 +4,20 @@ module Gargantext.Components.Graph
   -- , forceAtlas2Settings, ForceAtlas2Settings, ForceAtlas2OptionalSettings
   -- )
   where
-import Prelude (bind, const, discard, not, pure, unit, ($))
 
 import Data.Either (Either(..))
+import Data.Generic.Rep (class Generic)
 import Data.Maybe (Maybe(..))
 import Data.Nullable (Nullable)
-import Data.Tuple.Nested ((/\))
 import DOM.Simple.Console (log, log2)
 import DOM.Simple.Types (Element)
 import FFI.Simple (delay)
 import Reactix as R
 import Reactix.DOM.HTML as RH
+import Record as Record
+import Toestand as T
+
+import Gargantext.Prelude
 
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Hooks.Sigmax as Sigmax
@@ -22,11 +25,15 @@ import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
 import Gargantext.Hooks.Sigmax.Sigma as Sigma
 import Gargantext.Utils.Reactix as R2
 
+here :: R2.Here
 here = R2.here "Gargantext.Components.Graph"
 
 type OnProps  = ()
 
 data Stage = Init | Ready | Cleanup
+derive instance genericStage :: Generic Stage _
+derive instance eqStage :: Eq Stage
+
 
 type Props sigma forceatlas2 = (
     elRef                 :: R.Ref (Nullable Element)
@@ -34,28 +41,42 @@ type Props sigma forceatlas2 = (
   , graph                 :: SigmaxTypes.SGraph
   , mCamera               :: Maybe GET.Camera
   , multiSelectEnabledRef :: R.Ref Boolean
-  , selectedNodeIds :: R.State SigmaxTypes.NodeIds
-  , showEdges :: R.State SigmaxTypes.ShowEdgesState
+  , selectedNodeIds       :: T.Cursor SigmaxTypes.NodeIds
+  , showEdges             :: T.Cursor SigmaxTypes.ShowEdgesState
   , sigmaRef              :: R.Ref Sigmax.Sigma
   , sigmaSettings         :: sigma
-  , stage :: R.State Stage
+  , stage                 :: T.Cursor Stage
   , startForceAtlas       :: Boolean
   , transformedGraph      :: SigmaxTypes.SGraph
   )
 
-graph :: forall s fa2. Record (Props s fa2) -> R.Element
-graph props = R.createElement graphCpt props []
+graph :: forall s fa2. R2.Component (Props s fa2)
+graph = R.createElement graphCpt
 
 graphCpt :: forall s fa2. R.Component (Props s fa2)
 graphCpt = here.component "graph" cpt
   where
-    cpt props _ = do
-      stageHooks props
+    cpt props@{ elRef
+              , forceAtlas2Settings
+              , graph
+              , mCamera
+              , multiSelectEnabledRef
+              , selectedNodeIds
+              , showEdges
+              , sigmaRef
+              , sigmaSettings
+              , stage
+              , startForceAtlas
+              , transformedGraph } _ = do
+      showEdges' <- T.useLive T.unequal showEdges
+      stage' <- T.useLive T.unequal stage
+
+      stageHooks (Record.merge { showEdges', stage' } props)
 
       R.useEffectOnce $ do
         pure $ do
           log "[graphCpt (Cleanup)]"
-          Sigmax.dependOnSigma (R.readRef props.sigmaRef) "[graphCpt (Cleanup)] no sigma" $ \sigma -> do
+          Sigmax.dependOnSigma (R.readRef sigmaRef) "[graphCpt (Cleanup)] no sigma" $ \sigma -> do
             Sigma.stopForceAtlas2 sigma
             log2 "[graphCpt (Cleanup)] forceAtlas stopped for" sigma
             Sigma.kill sigma
@@ -63,24 +84,32 @@ graphCpt = here.component "graph" cpt
 
       -- NOTE: This div is not empty after sigma initializes.
       -- When we change state, we make it empty though.
-      --pure $ RH.div { ref: props.elRef, style: {height: "95%"} } []
-      pure $ case R.readNullableRef props.elRef of
+      --pure $ RH.div { ref: elRef, style: {height: "95%"} } []
+      pure $ case R.readNullableRef elRef of
         Nothing -> RH.div {} []
         Just el -> R.createPortal [] el
 
-    stageHooks props@{multiSelectEnabledRef, selectedNodeIds, sigmaRef, stage: (Init /\ setStage)} = do
+    stageHooks { elRef
+               , graph
+               , mCamera
+               , multiSelectEnabledRef
+               , selectedNodeIds
+               , sigmaRef
+               , stage
+               , stage': Init
+               , startForceAtlas } = do
       R.useEffectOnce' $ do
-        let rSigma = R.readRef props.sigmaRef
+        let rSigma = R.readRef sigmaRef
 
         case Sigmax.readSigma rSigma of
           Nothing -> do
-            eSigma <- Sigma.sigma {settings: props.sigmaSettings}
+            eSigma <- Sigma.sigma {settings: sigmaSettings}
             case eSigma of
               Left err -> log2 "[graphCpt] error creating sigma" err
               Right sig -> do
                 Sigmax.writeSigma rSigma $ Just sig
 
-                Sigmax.dependOnContainer props.elRef "[graphCpt (Ready)] container not found" $ \c -> do
+                Sigmax.dependOnContainer elRef "[graphCpt (Ready)] container not found" $ \c -> do
                   _ <- Sigma.addRenderer sig {
                       "type": "canvas"
                     , container: c
@@ -88,7 +117,7 @@ graphCpt = here.component "graph" cpt
                     }
                   pure unit
 
-                Sigmax.refreshData sig $ Sigmax.sigmafy props.graph
+                Sigmax.refreshData sig $ Sigmax.sigmafy graph
 
                 Sigmax.dependOnSigma (R.readRef sigmaRef) "[graphCpt (Ready)] no sigma" $ \sigma -> do
                   -- bind the click event only initially, when ref was empty
@@ -98,13 +127,13 @@ graphCpt = here.component "graph" cpt
 
                 Sigmax.setEdges sig false
 
-                -- log2 "[graph] startForceAtlas" props.startForceAtlas
-                if props.startForceAtlas then
-                  Sigma.startForceAtlas2 sig props.forceAtlas2Settings
+                -- log2 "[graph] startForceAtlas" startForceAtlas
+                if startForceAtlas then
+                  Sigma.startForceAtlas2 sig forceAtlas2Settings
                 else
                   Sigma.stopForceAtlas2 sig
 
-                case props.mCamera of
+                case mCamera of
                   Nothing -> pure unit
                   Just (GET.Camera { ratio, x, y }) -> do
                     Sigma.updateCamera sig { ratio, x, y }
@@ -113,9 +142,12 @@ graphCpt = here.component "graph" cpt
           Just sig -> do
             pure unit
 
-        setStage $ const Ready
+        T.write Ready stage
 
-    stageHooks props@{ showEdges: (showEdges /\ _), sigmaRef, stage: (Ready /\ setStage), transformedGraph } = do
+    stageHooks { showEdges'
+               , sigmaRef
+               , stage': Ready
+               , transformedGraph } = do
       let tEdgesMap = SigmaxTypes.edgesGraphMap transformedGraph
       let tNodesMap = SigmaxTypes.nodesGraphMap transformedGraph
 
@@ -125,7 +157,7 @@ graphCpt = here.component "graph" cpt
           Sigmax.performDiff sigma transformedGraph
           Sigmax.updateEdges sigma tEdgesMap
           Sigmax.updateNodes sigma tNodesMap
-          Sigmax.setEdges sigma (not $ SigmaxTypes.edgeStateHidden showEdges)
+          Sigmax.setEdges sigma (not $ SigmaxTypes.edgeStateHidden showEdges')
 
     stageHooks _ = pure unit
 

src/Gargantext/Components/GraphExplorer/RangeControl.purs

@@ -10,11 +10,14 @@ import Prelude
 import Data.Tuple.Nested ((/\))
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Toestand as T
 
 import Gargantext.Components.RangeSlider as RS
 import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
+import Gargantext.Utils.Toestand as T2
 
+here :: R2.Here
 here = R2.here "Gargantext.Components.GraphExplorer.RangeControl"
 
 type Props = (
@@ -22,8 +25,8 @@ type Props = (
   , sliderProps :: Record RS.Props
   )
 
-rangeControl :: Record Props -> R.Element
-rangeControl props = R.createElement rangeControlCpt props []
+rangeControl :: R2.Component Props
+rangeControl = R.createElement rangeControlCpt
 
 rangeControlCpt :: R.Component Props
 rangeControlCpt = here.component "rangeButton" cpt
@@ -35,47 +38,86 @@ rangeControlCpt = here.component "rangeButton" cpt
           , RS.rangeSlider sliderProps
           ]
 
-edgeConfluenceControl :: Range.NumberRange -> R.State Range.NumberRange -> R.Element
-edgeConfluenceControl (Range.Closed { min, max }) (state /\ setState) =
-  rangeControl {
+type EdgeConfluenceControlProps = (
+    range :: Range.NumberRange
+  , state :: T.Cursor Range.NumberRange
+  )
+
+edgeConfluenceControl :: R2.Component EdgeConfluenceControlProps
+edgeConfluenceControl = R.createElement edgeConfluenceControlCpt
+
+edgeConfluenceControlCpt :: R.Component EdgeConfluenceControlProps
+edgeConfluenceControlCpt = here.component "edgeConfluenceControl" cpt
+  where
+    cpt { range: Range.Closed { min, max }
+        , state } _ = do
+      state' <- T.useLive T.unequal state
+
+      pure $ rangeControl {
         caption: "Edge Confluence Weight"
         , sliderProps: {
           bounds: Range.Closed { min, max }
-      , initialValue: state
+          , initialValue: state'
           , epsilon: 0.01
           , step: 1.0
           , width: 10.0
           , height: 5.0
-      , onChange: setState <<< const
-      }
+          , onChange: \rng -> T2.write_ rng state
           }
+        } []
+
+type EdgeWeightControlProps = (
+    range :: Range.NumberRange
+  , state :: T.Cursor Range.NumberRange
+  )
+
+edgeWeightControl :: R2.Component EdgeWeightControlProps
+edgeWeightControl = R.createElement edgeWeightControlCpt
 
-edgeWeightControl :: Range.NumberRange -> R.State Range.NumberRange -> R.Element
-edgeWeightControl (Range.Closed { min, max }) (state /\ setState) =
-  rangeControl {
+edgeWeightControlCpt :: R.Component EdgeWeightControlProps
+edgeWeightControlCpt = here.component "edgeWeightControl" cpt
+  where
+    cpt { range: Range.Closed { min, max }
+        , state } _ = do
+      state' <- T.useLive T.unequal state
+
+      pure $ rangeControl {
         caption: "Edge Weight"
         , sliderProps: {
           bounds: Range.Closed { min, max }
-      , initialValue: state
+          , initialValue: state'
           , epsilon: 1.0
           , step: 1.0
           , width: 10.0
           , height: 5.0
-      , onChange: setState <<< const
-      }
+          , onChange: \rng -> T2.write_ rng state
           }
+        } []
+
+type NodeSideControlProps = (
+    range :: Range.NumberRange
+  , state :: T.Cursor Range.NumberRange
+  )
 
-nodeSizeControl :: Range.NumberRange -> R.State Range.NumberRange -> R.Element
-nodeSizeControl (Range.Closed { min, max }) (state /\ setState) =
-  rangeControl {
+nodeSizeControl :: R2.Component NodeSideControlProps
+nodeSizeControl = R.createElement nodeSizeControlCpt
+
+nodeSizeControlCpt :: R.Component NodeSideControlProps
+nodeSizeControlCpt = here.component "nodeSizeControl" cpt
+  where
+    cpt { range: Range.Closed { min, max }
+        , state } _ = do
+      state' <- T.useLive T.unequal state
+
+      pure $ rangeControl {
         caption: "Node Size"
         , sliderProps: {
           bounds: Range.Closed { min, max }
-      , initialValue: state
+          , initialValue: state'
           , epsilon: 0.1
           , step: 1.0
           , width: 10.0
           , height: 5.0
-      , onChange: setState <<< const
-      }
+          , onChange: \rng -> T2.write_ rng state
           }
+        } []

src/Gargantext/Components/GraphExplorer/Search.purs

@@ -11,18 +11,21 @@ import DOM.Simple.Console (log2)
 import Effect (Effect)
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Toestand as T
 
 import Gargantext.Components.InputWithAutocomplete (inputWithAutocomplete)
 import Gargantext.Hooks.Sigmax.Types as SigmaxT
 import Gargantext.Utils (queryMatchesLabel)
 import Gargantext.Utils.Reactix as R2
+import Gargantext.Utils.Toestand as T2
 
+here :: R2.Here
 here = R2.here "Gargantext.Components.GraphExplorer.Search"
 
 type Props = (
     graph              :: SigmaxT.SGraph
-  , multiSelectEnabled :: R.State Boolean
-  , selectedNodeIds :: R.State SigmaxT.NodeIds
+  , multiSelectEnabled :: T.Cursor Boolean
+  , selectedNodeIds    :: T.Cursor SigmaxT.NodeIds
   )
 
 -- | Whether a node matches a search string
@@ -33,24 +36,25 @@ searchNodes :: String -> Seq.Seq (Record SigmaxT.Node) -> Seq.Seq (Record Sigmax
 searchNodes "" _ = Seq.empty
 searchNodes s nodes = Seq.filter (nodeMatchesSearch s) nodes
 
-nodeSearchControl :: Record Props -> R.Element
-nodeSearchControl props = R.createElement sizeButtonCpt props []
+nodeSearchControl :: R2.Component Props
+nodeSearchControl = R.createElement sizeButtonCpt
 
 sizeButtonCpt :: R.Component Props
 sizeButtonCpt = here.component "nodeSearchControl" cpt
   where
-    cpt {graph, multiSelectEnabled, selectedNodeIds} _ = do
+    cpt { graph, multiSelectEnabled, selectedNodeIds } _ = do
       search@(search' /\ setSearch) <- R.useState' ""
+      multiSelectEnabled' <- T.useLive T.unequal multiSelectEnabled
 
       pure $
         H.div { className: "form-group" }
           [ H.div { className: "input-group" }
             [ inputWithAutocomplete { autocompleteSearch: autocompleteSearch graph
-                                    , onAutocompleteClick: \s -> triggerSearch graph s multiSelectEnabled selectedNodeIds
-                                    , onEnterPress: \s -> triggerSearch graph s multiSelectEnabled selectedNodeIds
+                                    , onAutocompleteClick: \s -> triggerSearch graph s multiSelectEnabled' selectedNodeIds
+                                    , onEnterPress: \s -> triggerSearch graph s multiSelectEnabled' selectedNodeIds
                                     , state: search }
             , H.div { className: "btn input-group-addon"
-                    , on: { click: \_ -> triggerSearch graph search' multiSelectEnabled selectedNodeIds }
+                    , on: { click: \_ -> triggerSearch graph search' multiSelectEnabled' selectedNodeIds }
                     }
               [ H.span { className: "fa fa-search" } [] ]
             ]
@@ -63,14 +67,14 @@ autocompleteSearch graph s = Seq.toUnfoldable $ (_.label) <$> searchNodes s node
 
 triggerSearch :: SigmaxT.SGraph
               -> String
-              -> R.State Boolean
-              -> R.State SigmaxT.NodeIds
+              -> Boolean
+              -> T.Cursor SigmaxT.NodeIds
               -> Effect Unit
-triggerSearch graph search (multiSelectEnabled /\ _) (_ /\ setNodeIds) = do
+triggerSearch graph search multiSelectEnabled selectedNodeIds = do
   let graphNodes = SigmaxT.graphNodes graph
   let matching = Set.fromFoldable $ (_.id) <$> searchNodes search graphNodes
 
   log2 "[triggerSearch] search" search
 
-  setNodeIds $ \nodes ->
-    Set.union matching $ if multiSelectEnabled then nodes else SigmaxT.emptyNodeIds
+  T2.modify_ (\nodes ->
+    Set.union matching $ if multiSelectEnabled then nodes else SigmaxT.emptyNodeIds) selectedNodeIds

src/Gargantext/Components/GraphExplorer/SlideButton.purs

@@ -11,19 +11,22 @@ import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Toestand as T
 
 import Gargantext.Hooks.Sigmax as Sigmax
 import Gargantext.Hooks.Sigmax.Sigma as Sigma
 import Gargantext.Utils.Reactix as R2
+import Gargantext.Utils.Toestand as T2
 
+here :: R2.Here
 here = R2.here "Gargantext.Components.GraphExplorer.SlideButton"
 
 type Props = (
-    state :: R.State Number
-  , caption :: String
+    caption  :: String
   , min      :: Number
   , max      :: Number
   , onChange :: forall e. e -> Effect Unit
+  , state    :: T.Cursor Number
   )
 
 sizeButton :: Record Props -> R.Element
@@ -33,7 +36,7 @@ sizeButtonCpt :: R.Component Props
 sizeButtonCpt = here.component "sizeButton" cpt
   where
     cpt {state, caption, min, max, onChange} _ = do
-      let (value /\ setValue) = state
+      state' <- T.useLive T.unequal state
       pure $
         H.span { class: "range-simple" }
           [ H.label {} [ R2.small {} [ H.text caption ] ]
@@ -41,12 +44,12 @@ sizeButtonCpt = here.component "sizeButton" cpt
                     , className: "form-control"
                     , min: show min
                     , max: show max
-                    , defaultValue: value
+                    , defaultValue: state'
                     , on: {input: onChange}
                     }
           ]
 
-labelSizeButton :: R.Ref Sigmax.Sigma -> R.State Number -> R.Element
+labelSizeButton :: R.Ref Sigmax.Sigma -> T.Cursor Number -> R.Element
 labelSizeButton sigmaRef state =
   sizeButton {
       state
@@ -56,7 +59,6 @@ labelSizeButton sigmaRef state =
     , onChange: \e -> do
       let sigma = R.readRef sigmaRef
       let newValue = readFloat $ R.unsafeEventValue e
-      let (_ /\ setValue) = state
       Sigmax.dependOnSigma sigma "[labelSizeButton] sigma: Nothing" $ \s -> do
         Sigma.setSettings s {
           defaultLabelSize: newValue
@@ -64,10 +66,10 @@ labelSizeButton sigmaRef state =
         , maxNodeSize: newValue / 2.5
         --, labelSizeRatio: newValue / 2.5
         }
-      setValue $ const newValue
+      T2.write_ newValue state
     }
 
-mouseSelectorSizeButton :: R.Ref Sigmax.Sigma -> R.State Number -> R.Element
+mouseSelectorSizeButton :: R.Ref Sigmax.Sigma -> T.Cursor Number -> R.Element
 mouseSelectorSizeButton sigmaRef state =
   sizeButton {
       state
@@ -76,11 +78,10 @@ mouseSelectorSizeButton sigmaRef state =
     , max: 50.0
     , onChange: \e -> do
       let sigma = R.readRef sigmaRef
-      let (_ /\ setValue) = state
       let newValue = readFloat $ R.unsafeEventValue e
       Sigmax.dependOnSigma sigma "[mouseSelectorSizeButton] sigma: Nothing" $ \s -> do
         Sigma.setSettings s {
           mouseSelectorSize: newValue
         }
-      setValue $ const newValue
+      T2.write_ newValue state
   }

src/Gargantext/Components/GraphExplorer/ToggleButton.purs

@@ -16,64 +16,83 @@ import Prelude
 import Data.Tuple (snd)
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Toestand as T
+
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
 import Gargantext.Utils.Reactix as R2
-import Reactix as R
-import Reactix.DOM.HTML as H
+import Gargantext.Utils.Toestand as T2
 
+here :: R2.Here
 here = R2.here "Gargantext.Components.GraphExplorer.ToggleButton"
 
 type Props = (
-    state :: R.State Boolean
+    state      :: T.Cursor Boolean
   , onMessage  :: String
   , offMessage :: String
   , style      :: String
   , onClick    :: forall e. e -> Effect Unit
   )
 
-toggleButton :: Record Props -> R.Element
-toggleButton props = R.createElement toggleButtonCpt props []
+toggleButton :: R2.Component Props
+toggleButton = R.createElement toggleButtonCpt
 
 toggleButtonCpt :: R.Component Props
 toggleButtonCpt = here.component "toggleButton" cpt
   where
-    cpt {state, onMessage, offMessage, onClick, style} _ = do
-      let (toggled /\ _) = state
-
-      pure $ H.button { className: "btn btn-outline-" <> style <> " " <> cls toggled
+    cpt { state
+        , onMessage
+        , offMessage
+        , onClick
+        , style } _ = do
+      state' <- T.useLive T.unequal state
+
+      pure $ H.button { className: "btn btn-outline-" <> style <> " " <> cls state'
                       , on: {click: onClick}
-                      } [ R2.small {} [ H.text (text onMessage offMessage toggled) ] ]
+                      } [ R2.small {} [ H.text (text onMessage offMessage state') ] ]
 
     cls true = "active"
     cls false = ""
     text on _off true = on
     text _on off false = off
 
-controlsToggleButton :: R.State Boolean -> R.Element
-controlsToggleButton state =
-  toggleButton {
+type ControlsToggleButtonProps = (
+  state :: T.Cursor Boolean
+  )
+
+controlsToggleButton :: R2.Component ControlsToggleButtonProps
+controlsToggleButton = R.createElement controlsToggleButtonCpt
+
+controlsToggleButtonCpt :: R.Component ControlsToggleButtonProps
+controlsToggleButtonCpt = here.component "controlsToggleButton" cpt
+  where
+    cpt { state } _ = do
+      pure $ toggleButton {
           state: state
         , onMessage: "Hide Controls"
         , offMessage: "Show Controls"
-    , onClick: \_ -> snd state not
+        , onClick: \_ -> T2.modify_ not state
         , style: "light"
-    }
+        } []
 
 type EdgesButtonProps = (
-  state :: R.State SigmaxTypes.ShowEdgesState
+  state :: T.Cursor SigmaxTypes.ShowEdgesState
 )
 
-edgesToggleButton :: Record EdgesButtonProps -> R.Element
-edgesToggleButton props = R.createElement edgesToggleButtonCpt props []
+edgesToggleButton :: R2.Component EdgesButtonProps
+edgesToggleButton = R.createElement edgesToggleButtonCpt
 
 edgesToggleButtonCpt :: R.Component EdgesButtonProps
 edgesToggleButtonCpt = here.component "edgesToggleButton" cpt
   where
-    cpt {state: (state /\ setState)} _ = do
-      pure $ H.button { className: "btn btn-outline-primary " <> cls state
-                      , on: { click: onClick setState }
-                      } [ R2.small {} [ H.text (text state) ] ]
+    cpt { state } _ = do
+      state' <- T.useLive T.unequal state
+
+      pure $ H.button { className: "btn btn-outline-primary " <> cls state'
+                      , on: { click: onClick state }
+                      } [ R2.small {} [ H.text (text state') ] ]
 
     text s = if SigmaxTypes.edgeStateHidden s then "Show edges" else "Hide edges"
 
@@ -81,42 +100,62 @@ edgesToggleButtonCpt = here.component "edgesToggleButton" cpt
     cls _ = "active"
 
     -- TODO: Move this to Graph.purs to the R.useEffect handler which renders nodes/edges
-    onClick setState _ = setState SigmaxTypes.toggleShowEdgesState
+    onClick state _ = T2.modify_ SigmaxTypes.toggleShowEdgesState state
+
+type LouvainToggleButtonProps = (
+  state :: T.Cursor Boolean
+)
+
+louvainToggleButton :: R2.Component LouvainToggleButtonProps
+louvainToggleButton = R.createElement louvainToggleButtonCpt
 
-louvainToggleButton :: R.State Boolean -> R.Element
-louvainToggleButton state =
-  toggleButton {
+louvainToggleButtonCpt :: R.Component LouvainToggleButtonProps
+louvainToggleButtonCpt = here.component "louvainToggleButton" cpt
+  where
+    cpt { state } _ = do
+      pure $ toggleButton {
           state: state
         , onMessage: "Louvain off"
         , offMessage: "Louvain on"
-    , onClick: \_ -> snd state not
+        , onClick: \_ -> T2.modify_ not state
         , style: "primary"
-    }
+        } []
+
+type MultiSelectEnabledButtonProps = (
+  state :: T.Cursor Boolean
+)
+
+multiSelectEnabledButton :: R2.Component MultiSelectEnabledButtonProps
+multiSelectEnabledButton = R.createElement multiSelectEnabledButtonCpt
 
-multiSelectEnabledButton :: R.State Boolean -> R.Element
-multiSelectEnabledButton state =
-  toggleButton {
+multiSelectEnabledButtonCpt :: R.Component MultiSelectEnabledButtonProps
+multiSelectEnabledButtonCpt = here.component "lmultiSelectEnabledButton" cpt
+  where
+    cpt { state } _ = do
+      pure $ toggleButton {
           state: state
         , onMessage: "Single-node"
         , offMessage: "Multi-node"
-    , onClick: \_ -> snd state not
+        , onClick: \_ -> T2.modify_ not state
         , style : "primary"
-    }
+        } []
 
 type ForceAtlasProps = (
-  state :: R.State SigmaxTypes.ForceAtlasState
+  state :: T.Cursor SigmaxTypes.ForceAtlasState
 )
 
-pauseForceAtlasButton :: Record ForceAtlasProps -> R.Element
-pauseForceAtlasButton props = R.createElement pauseForceAtlasButtonCpt props []
+pauseForceAtlasButton :: R2.Component ForceAtlasProps
+pauseForceAtlasButton = R.createElement pauseForceAtlasButtonCpt
 
 pauseForceAtlasButtonCpt :: R.Component ForceAtlasProps
 pauseForceAtlasButtonCpt = here.component "forceAtlasToggleButton" cpt
   where
-    cpt {state: (state /\ setState)} _ = do
-      pure $ H.button { className: "btn btn-outline-primary " <> cls state
-                      , on: { click: onClick setState }
-                      } [ R2.small {} [ H.text (text state) ] ]
+    cpt { state } _ = do
+      state' <- T.useLive T.unequal state
+
+      pure $ H.button { className: "btn btn-outline-primary " <> cls state'
+                      , on: { click: onClick state }
+                      } [ R2.small {} [ H.text (text state') ] ]
 
     cls SigmaxTypes.InitialRunning = "active"
     cls SigmaxTypes.Running = "active"
@@ -127,26 +166,43 @@ pauseForceAtlasButtonCpt = here.component "forceAtlasToggleButton" cpt
     text SigmaxTypes.Running = "Pause Force Atlas"
     text SigmaxTypes.Paused = "Start Force Atlas"
 
-    onClick setState _ = setState SigmaxTypes.toggleForceAtlasState
+    onClick state _ = T2.modify_ SigmaxTypes.toggleForceAtlasState state
+
+type TreeToggleButtonProps = (
+  state :: T.Cursor Boolean
+)
+
+treeToggleButton :: R2.Component TreeToggleButtonProps
+treeToggleButton = R.createElement treeToggleButtonCpt
 
-treeToggleButton :: R.State Boolean -> R.Element
-treeToggleButton state =
-  toggleButton {
+treeToggleButtonCpt :: R.Component TreeToggleButtonProps
+treeToggleButtonCpt = here.component "treeToggleButton" cpt
+  where
+    cpt { state } _ = do
+      pure $ toggleButton {
           state: state
         , onMessage: "Hide Tree"
         , offMessage: "Show Tree"
-    , onClick: \_ -> snd state not
+        , onClick: \_ -> T2.modify_ not state
         , style: "light"
-    }
+        } []
 
-sidebarToggleButton :: R.State GET.SidePanelState -> R.Element
-sidebarToggleButton (state /\ setState) = R.createElement el {} []
+type SidebarToggleButtonProps = (
+  state :: T.Cursor GET.SidePanelState
+)
+
+sidebarToggleButton :: R2.Component SidebarToggleButtonProps
+sidebarToggleButton = R.createElement sidebarToggleButtonCpt
+
+sidebarToggleButtonCpt :: R.Component SidebarToggleButtonProps
+sidebarToggleButtonCpt = here.component "sidebarToggleButton" cpt
   where
-    el = here.component "sidebarToggleButton" cpt
-    cpt {} _ = do
-      pure $ H.button { className: "btn btn-outline-light " <> cls state
-                      , on: { click: onClick}
-                      } [ R2.small {} [ H.text (text onMessage offMessage state) ] ]
+    cpt { state } _ = do
+      state' <- T.useLive T.unequal state
+
+      pure $ H.button { className: "btn btn-outline-light " <> cls state'
+                      , on: { click: onClick state }
+                      } [ R2.small {} [ H.text (text onMessage offMessage state') ] ]
 
     cls (GET.Opened _) = "active"
     cls _ = ""
@@ -157,8 +213,8 @@ sidebarToggleButton (state /\ setState) = R.createElement el {} []
     text _on off GET.InitialClosed = off
     text _on off GET.Closed        = off
 
-    onClick = \_ -> do
-      setState $ \s -> case s of
+    onClick state = \_ ->
+      T2.modify_ (\s -> case s of
         GET.InitialClosed -> GET.Opened GET.SideTabLegend
         GET.Closed        -> GET.Opened GET.SideTabLegend
-        (GET.Opened _)    -> GET.Closed
+        (GET.Opened _)    -> GET.Closed) state

src/Gargantext/Components/Login.purs

@@ -21,6 +21,7 @@ import Gargantext.Hooks.Loader as GHL
 import Gargantext.Sessions (Session, Sessions, Action(Logout), unSessions)
 import Gargantext.Sessions as Sessions
 import Gargantext.Utils.Reactix as R2
+import Gargantext.Utils.Toestand as T2
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Login"
@@ -109,7 +110,7 @@ renderBackend cursor backend@(Backend {name}) =
   , H.td {} [ H.a { on: { click }} [ H.text (backendLabel name) ]]
   , H.td {} [ H.text $ "garg://" <> name ]] where
     className = "fa fa-hand-o-right" -- "glyphitem fa fa-log-in"
-    click _ = T.write (Just backend) cursor
+    click _ = T2.write_ (Just backend) cursor
 
 backendLabel :: String -> String
 backendLabel =

src/Gargantext/Components/Nodes/Corpus/Document.purs

@@ -112,7 +112,7 @@ docViewCpt = here.component "docView" cpt
 
 type LayoutProps =
  (  listId    :: ListId
-  , corpusId :: Maybe NodeID
+  , mCorpusId :: Maybe NodeID
   , nodeId    :: NodeID
   , session   :: R.Context Session
   )
@@ -129,14 +129,14 @@ documentLayout = R.createElement documentLayoutCpt
 
 documentLayoutCpt :: R.Component LayoutProps
 documentLayoutCpt = here.component "documentLayout" cpt where
-  cpt { listId, corpusId, nodeId, session } children = cp <$> R.useContext session where
-    cp s = documentLayoutWithKey { key, listId, corpusId, nodeId, session: s } children where
+  cpt { listId, mCorpusId, nodeId, session } children = cp <$> R.useContext session where
+    cp s = documentLayoutWithKey { key, listId, mCorpusId, nodeId, session: s } children where
       key = show (sessionId s) <> "-" <> show nodeId
 
 type KeyLayoutProps =
   ( key      :: String
   , listId   :: ListId
-  , corpusId :: Maybe NodeID
+  , mCorpusId :: Maybe NodeID
   , nodeId   :: NodeID
   , session  :: Session
   )
@@ -147,12 +147,12 @@ documentLayoutWithKey = R.createElement documentLayoutWithKeyCpt
 documentLayoutWithKeyCpt :: R.Component KeyLayoutProps
 documentLayoutWithKeyCpt = here.component "documentLayoutWithKey" cpt
   where
-    cpt { listId, corpusId, nodeId, session } _ = do
+    cpt { listId, mCorpusId, nodeId, session } _ = do
       useLoader path loadData $ \loaded ->
         docViewWrapper { loaded, path } []
       where
         tabType = TabDocument (TabNgramType CTabTerms)
-        path = { listIds: [listId], corpusId, nodeId, session, tabType }
+        path = { listIds: [listId], mCorpusId, nodeId, session, tabType }
 
 ------------------------------------------------------------------------
 

src/Gargantext/Components/Nodes/Corpus/Document/Types.purs

@@ -12,9 +12,9 @@ import Gargantext.Components.NgramsTable.Core (CoreState, Versioned(..) , Versio
 import Gargantext.Sessions (Session)
 import Gargantext.Types (ListId, NodeID, TabType)
 
-type DocPath =
-  { listIds  :: Array ListId
-  , corpusId :: Maybe NodeID
+type DocPath = {
+    listIds   :: Array ListId
+  , mCorpusId :: Maybe NodeID
   , nodeId    :: NodeID
   , session   :: Session
   , tabType   :: TabType

src/Gargantext/Components/Nodes/Texts.purs

@@ -37,8 +37,8 @@ here :: R2.Here
 here = R2.here "Gargantext.Components.Nodes.Texts"
 
 --------------------------------------------------------
-type TextsWithForest a =
-  ( forestProps :: Record (Forest.LayoutProps a)
+type TextsWithForest = (
+    forestProps :: Record Forest.LayoutProps
   , textsProps  :: Record CommonProps
   )
 
@@ -77,42 +77,45 @@ topBarCpt = here.component "topBar" cpt
 
 
 
-type CommonProps =
-  ( frontends :: Frontends
-  , nodeId    :: Int
-  , session   :: R.Context Session
+type CommonProps = (
+    frontends :: Frontends
+  , nodeId    :: NodeID
+  , session   :: Session
   )
 
 type Props = ( controls :: Record TextsLayoutControls | CommonProps )
 
-type KeyProps =
-  ( key       :: String
-  , controls  :: Record TextsLayoutControls
-  , frontends :: Frontends
-  , nodeId    :: Int
-  , session   :: Session
-  )
-
 textsLayout :: R2.Component Props
 textsLayout = R.createElement textsLayoutCpt
 
 textsLayoutCpt :: R.Component Props
 textsLayoutCpt = here.component "textsLayout" cpt where
-  cpt { controls, frontends, nodeId, session, sessionUpdate } children = do
-    session' <- R.useContext session
-    pure $
-      textsLayoutWithKey
-      { controls, frontends, key, nodeId, session: session' } children where
-        key = show sid <> "-" <> show nodeId where
+  cpt { controls, frontends, nodeId, session } children = do
+    pure $ textsLayoutWithKey { controls
+                              , frontends
+                              , key
+                              , nodeId
+                              , session } children
+      where
+        key = show sid <> "-" <> show nodeId
+          where
             sid = sessionId session
 
+type KeyProps = (
+    key       :: String
+  , controls  :: Record TextsLayoutControls
+  , frontends :: Frontends
+  , nodeId    :: NodeID
+  , session   :: Session
+  )
+
 textsLayoutWithKey :: R2.Component KeyProps
 textsLayoutWithKey = R.createElement textsLayoutWithKeyCpt
 
 textsLayoutWithKeyCpt :: R.Component KeyProps
 textsLayoutWithKeyCpt = here.component "textsLayoutWithKey" cpt
   where
-    cpt { controls, frontends, nodeId, session, sessionUpdate } _children = do
+    cpt { controls, frontends, nodeId, session } _children = do
       cacheState <- R.useState' $ getCacheState NT.CacheOff session nodeId
 
       pure $ loader { nodeId, session } loadCorpusWithChild $
@@ -121,16 +124,27 @@ textsLayoutWithKeyCpt = here.component "textsLayoutWithKey" cpt
               CorpusInfo { authors, desc, query } = getCorpusInfo h.fields
               title = "Corpus " <> name
           R.fragment
-            [ Table.tableHeaderLayout
-              { afterCacheStateChange, cacheState, date, desc, query, title, user: authors
+            [ Table.tableHeaderLayout { afterCacheStateChange
+                                      , cacheState
+                                      , date
+                                      , desc
+                                      , query
+                                      , title
+                                      , user: authors
                                       , key: "textsLayoutWithKey-" <> (show $ fst cacheState) }
-            , tabs { cacheState, corpusData, corpusId, frontends, session
+            , tabs { cacheState
+                   , corpusData
+                   , corpusId
+                   , frontends
+                   , session
                    , sidePanelTriggers: controls.triggers }
             ]
       where
         afterCacheStateChange cacheState = do
           launchAff_ $ clearCache unit
-          sessionUpdate $ setCacheState session nodeId cacheState
+          -- TODO
+          --sessionUpdate $ setCacheState session nodeId cacheState
+          --_ <- setCacheState session nodeId cacheState
 
 data Mode = MoreLikeFav | MoreLikeTrash
 
@@ -148,7 +162,7 @@ modeTabType MoreLikeTrash  = CTabSources  -- TODO
 type TabsProps =
   ( cacheState      :: R.State NT.CacheState
   , corpusData      :: CorpusData
-  , corpusId        :: Int
+  , corpusId        :: NodeID
   , frontends       :: Frontends
   , session         :: Session
   , sidePanelTriggers :: Record SidePanelTriggers
@@ -391,9 +405,9 @@ sidePanelCpt = here.component "sidePanel" cpt
       ]
 
 type SidePanelDocView = (
-    corpusId :: Maybe NodeID
-  , listId   :: Maybe ListId
-  , nodeId   :: Maybe NodeID
+    mCorpusId :: Maybe NodeID
+  , mListId   :: Maybe ListId
+  , mNodeId   :: Maybe NodeID
   , session  :: Session
   )
 
@@ -403,15 +417,16 @@ sidePanelDocView = R.createElement sidePanelDocViewCpt
 sidePanelDocViewCpt :: R.Component SidePanelDocView
 sidePanelDocViewCpt = here.component "sidePanelDocView" cpt
   where
-    cpt { listId: Nothing } _ = do
+    cpt { mListId: Nothing } _ = do
       pure $ H.div {} []
-    cpt { nodeId: Nothing } _ = do
+    cpt { mNodeId: Nothing } _ = do
       pure $ H.div {} []
-    cpt { corpusId
-        , listId: Just listId
-        , nodeId: Just nodeId
+    cpt { mCorpusId
+        , mListId: Just listId
+        , mNodeId: Just nodeId
         , session } _ = do
+      let session' = R.createContext session
       pure $ D.documentLayout { listId
-                              , corpusId
+                              , mCorpusId
                               , nodeId
-                              , session } []
+                              , session: session' } []

src/Gargantext/Components/RangeSlider.purs

@@ -23,11 +23,13 @@ import Effect.Uncurried (mkEffectFn1)
 import Math as M
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Toestand as T
 
 import Gargantext.Utils.Math (roundToMultiple)
 import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
 
+here :: R2.Here
 here = R2.here "Gargantext.Components.RangeSlider"
 -- data Axis = X | Y
 

src/Gargantext/Components/Router.purs

@@ -4,9 +4,12 @@ import Data.Array (fromFoldable)
 import Data.Maybe (Maybe(..), maybe')
 import Reactix as R
 import Toestand as T
+import Unsafe.Coerce (unsafeCoerce)
 
 import Gargantext.Prelude
-import Gargantext.Components.App.Data (Cursors, Views)
+
+import Gargantext.AsyncTasks as GAT
+import Gargantext.Components.App.Data (Cursors)
 import Gargantext.Components.Footer (footer)
 import Gargantext.Components.Forest (forestLayout, forestLayoutWithTopBar)
 import Gargantext.Components.GraphExplorer (explorerLayout)
@@ -23,10 +26,12 @@ import Gargantext.Components.Nodes.Frame (frameLayout)
 import Gargantext.Components.Nodes.Home (homeLayout)
 import Gargantext.Components.Nodes.Lists as Lists
 import Gargantext.Components.Nodes.Texts as Texts
+import Gargantext.Components.SessionLoader (sessionWrapper)
 import Gargantext.Components.SimpleLayout (simpleLayout)
 import Gargantext.Config (defaultFrontends, defaultBackends, publicBackend)
 import Gargantext.Routes (AppRoute(..))
-import Gargantext.Types (NodeType(..))
+import Gargantext.Routes as GR
+import Gargantext.Types (CorpusId, ListId, NodeID, NodeType(..), SessionId(..))
 import Gargantext.Utils.Reactix as R2
 import Gargantext.Utils.Toestand as T2
 
@@ -34,43 +39,43 @@ here :: R2.Here
 here = R2.here "Gargantext.Components.Router"
 
 type Props = (
-    cursors :: App.Cursors
+    cursors :: Cursors
   , tasks   :: T.Cursor (Maybe GAT.Reductor)
   , views   :: App.Views
   )
 
 router :: R2.Leaf Props
-router props = R.createComponent routerCpt props []
+router props = R.createElement routerCpt props []
 
 routerCpt :: R.Component Props
 routerCpt = here.component "root" cpt where
   cpt props@{ cursors, views, tasks } _ = do
     let session = R.createContext (unsafeCoerce {})
-    showLogin <- T.useLive (T2.ne) views.showLogin
+    showLogin <- T.useLive T.unequal views.showLogin
     route <- T.useLive (T.changed notEq) views.route
     if showLogin then login' cursors views
     else case route of
-      Annuaire s n           -> annuaire props s n
-      Corpus s n             -> corpus props s n
-      CorpusDocument s c l n -> corpusDocument props s c l n
-      Dashboard s n          -> dashboard props s n
-      Document s l n         -> document props s l n
-      Folder        s n      -> corpus props s n
-      FolderPrivate s n      -> corpus props s n
-      FolderPublic  s n      -> corpus props s n
-      FolderShared  s n      -> corpus props s n
-      Home                   -> home props
-      Lists s n              -> lists props s n
-      Login                  -> login' cursors
-      PGraphExplorer s g     -> graphExplorer props s g
-      RouteFile s n          -> routeFile props s n
-      RouteFrameCalc  s n    -> routeFrame props s n NodeFrameCalc
-      RouteFrameCode  s n    -> routeFrame props s n NodeFrameNotebook
-      RouteFrameWrite s n    -> routeFrame props s n NodeFrameWrite
-      Team s n               -> team props s n
-      Texts s n              -> texts props s n
-      UserPage s n           -> user props s n
-      ContactPage s a n      -> contact props s a n
+      GR.Annuaire s n           -> annuaire props s n
+      GR.Corpus s n             -> corpus props s n
+      GR.CorpusDocument s c l n -> corpusDocument props s c l n
+      GR.Dashboard s n          -> dashboard props s n
+      GR.Document s l n         -> document props s l n
+      GR.Folder        s n      -> corpus props s n
+      GR.FolderPrivate s n      -> corpus props s n
+      GR.FolderPublic  s n      -> corpus props s n
+      GR.FolderShared  s n      -> corpus props s n
+      GR.Home                   -> home props
+      GR.Lists s n              -> lists props s n
+      GR.Login                  -> login' cursors
+      GR.PGraphExplorer s g     -> graphExplorer props s g
+      GR.RouteFile s n          -> routeFile props s n
+      GR.RouteFrameCalc  s n    -> routeFrame props s n NodeFrameCalc
+      GR.RouteFrameCode  s n    -> routeFrame props s n NodeFrameNotebook
+      GR.RouteFrameWrite s n    -> routeFrame props s n NodeFrameWrite
+      GR.Team s n               -> team props s n
+      GR.Texts s n              -> texts props s n
+      GR.UserPage s n           -> user props s n
+      GR.ContactPage s a n      -> contact props s a n
  
 forested :: Record Props -> Array R.Element -> R.Element
 forested { tasks, views: { route, handed, sessions }
@@ -86,31 +91,31 @@ authed props@{ cursors: { session }, views: views@{ sessions }
   sessionWrapper { sessionId, session, sessions, fallback: home props }
   [ content, footer { session: views.session } ]
 
-annuaire :: Record Props -> SessionId -> NodeId -> R.Element
+annuaire :: Record Props -> SessionId -> NodeID -> R.Element
 annuaire props@{ tasks, cursors, views: { session } } sessionId nodeId =
   authed props sessionId $
     forested props [ annuaireLayout { nodeId, frontends, session } ]
     where frontends = defaultFrontends
 
-corpus :: Record Props -> SessionId -> NodeId -> R.Element
+corpus :: Record Props -> SessionId -> NodeID -> R.Element
 corpus props@{ tasks, cursors, views } sessionId nodeId =
   authed props sessionId $
     forested props
     [ corpusLayout { nodeId, session: views.session  } ]
 
-corpusDocument :: Record Props -> SessionId -> CorpusId -> ListId -> NodeId -> R.Element
+corpusDocument :: Record Props -> SessionId -> CorpusId -> ListId -> NodeID -> R.Element
 corpusDocument props@{ tasks, cursors, views } sessionId corpusId' listId nodeId =
   authed props sessionId $
     forested props
-    [ documentMainLayout { listId, nodeId, corpusId, sessionId, session } [] ]
+    [ documentMainLayout { listId, nodeId, corpusId, sessionId, session: views.session } [] ]
     where corpusId = Just corpusId'
 
-dashboard :: Record Props -> SessionId -> NodeId -> R.Element
+dashboard :: Record Props -> SessionId -> NodeID -> R.Element
 dashboard props@{ tasks, cursors, views: { session } } sessionId nodeId =
   authed props sessionId $
     forested props [ dashboardLayout { nodeId, session } [] ]
 
-document :: Record Props -> SessionId -> ListId -> NodeId -> R.Element
+document :: Record Props -> SessionId -> ListId -> NodeID -> R.Element
 document props@{ tasks, cursors, views: { session } } sessionId listId nodeId =
   authed props sessionId $
     forested props
@@ -121,7 +126,7 @@ home :: Record Props -> R.Element
 home props@{ cursors: { backend, showLogin }, views: { sessions } } =
   forested props [ homeLayout  { sessions, backend, showLogin, lang: LL_EN } ]
 
-lists :: Record Props -> SessionId -> NodeId -> R.Element
+lists :: Record Props -> SessionId -> NodeID -> R.Element
 lists props@{ tasks
             , cursors: { reloadForest, reloadRoot, session, showLogin }
             , views: { backend, route, handed, sessions } } sessionId nodeId =
@@ -154,19 +159,19 @@ graphExplorer props@{ views: { backend, route, handed, session, sessions }
                      , handed, session, sessions, showLogin } ]
     where frontends = defaultFrontends
 
-routeFile :: Record Props -> SessionId -> NodeId -> R.Element
+routeFile :: Record Props -> SessionId -> NodeID -> R.Element
 routeFile props@{ views: { session } } sessionId nodeId =
   authed props sessionId $ forested props [ fileLayout { nodeId, session } ]
 
-routeFrame :: Record Props -> SessionId -> NodeId -> NodeType -> R.Element
-routeFrame Type props@{ views: { session } } sessionId nodeId nodeType =
+routeFrame :: Record Props -> SessionId -> NodeID -> NodeType -> R.Element
+routeFrame props@{ views: { session } } sessionId nodeId nodeType =
   authed props sessionId $ forested props [ frameLayout { nodeId, nodeType, session } ]
 
-team :: Record Props -> SessionId -> NodeId -> R.Element
+team :: Record Props -> SessionId -> NodeID -> R.Element
 team props@{ tasks, cursors, views: { session }  } sessionId nodeId =
   authed props sessionId $ forested props [ corpusLayout { nodeId, session } ]
 
-texts :: Record Props -> SessionId -> NodeId -> R.Element
+texts :: Record Props -> SessionId -> NodeID -> R.Element
 texts props@{ cursors: { backend, reloadForest, reloadRoot, showLogin }
             , views: { route, handed, session, sessions }
             , tasks } sessionId nodeId =
@@ -177,14 +182,14 @@ texts props@{ cursors: { backend, reloadForest, reloadRoot, showLogin }
     , textsProps: { frontends, nodeId, session } }
     [] where frontends = defaultFrontends
 
-user :: Record Props -> SessionId -> NodeId -> R.Element
-user props@props sessionId nodeId =
-  authed { tasks, cursors: { reloadRoot }, views: { session } } sessionId $
+user :: Record Props -> SessionId -> NodeID -> R.Element
+user props@{ cursors: { reloadRoot }, tasks, views } sessionId nodeId =
+  authed props sessionId $
     forested props
-    [ userLayout { tasks, nodeId, session, reloadRoot, frontends } ]
+    [ userLayout { tasks, nodeId, session: views.session, reloadRoot, frontends } ]
     where frontends = defaultFrontends
 
-contact :: Record Props -> SessionId -> NodeId -> R.Element
+contact :: Record Props -> SessionId -> NodeID -> R.Element
 contact props@{ tasks, cursors: { reloadRoot } } sessionId annuaireId nodeId =
   authed props sessionId $
     forested props

src/Gargantext/Components/Search.purs

@@ -10,6 +10,7 @@ import Gargantext.Prelude (class Eq, class Read, class Show)
 
 import Gargantext.Components.Category.Types (Category)
 import Gargantext.Utils.Argonaut (genericSumDecodeJson, genericSumEncodeJson, genericEnumDecodeJson, genericEnumEncodeJson)
+import Gargantext.Utils.Toestand as T2
 
 
 -- Example:

src/Gargantext/Components/Tab.purs

@@ -12,8 +12,8 @@ import Gargantext.Utils.Reactix as R2
 here :: R2.Here
 here = R2.here "Gargantext.Components.Tab"
 
-type TabsProps =
-  ( selected :: Int
+type TabsProps = (
+    selected :: Int
   , tabs     :: Array (Tuple String R.Element)
   )
 

src/Gargantext/Components/Table.purs

@@ -41,8 +41,8 @@ stateParams {pageSize, page, orderBy, searchType} = {offset, limit, orderBy, sea
     limit = pageSizes2Int pageSize
     offset = limit * (page - 1)
 
-type TableHeaderLayoutProps =
-  ( afterCacheStateChange :: NT.CacheState -> Effect Unit
+type TableHeaderLayoutProps = (
+    afterCacheStateChange :: NT.CacheState -> Effect Unit
   , cacheState :: R.State NT.CacheState
   , date  :: String
   , desc  :: String

src/Gargantext/Components/TopBar.purs

@@ -13,6 +13,7 @@ import Gargantext.Prelude
 import Gargantext.Components.Themes (themeSwitcher, defaultTheme, allThemes)
 import Gargantext.Types (Handed(..), reverseHanded)
 import Gargantext.Utils.Reactix as R2
+import Gargantext.Utils.Toestand as T2
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.TopBar"
@@ -248,6 +249,6 @@ handedChooserCpt = here.component "handedChooser" cpt
     handedClass LeftHanded = "fa fa-hand-o-left"
     handedClass RightHanded = "fa fa-hand-o-right"
 
-    onClick handed = T.modify (\h -> case h of
+    onClick handed = T2.modify_ (\h -> case h of
       LeftHanded  -> RightHanded
       RightHanded -> LeftHanded) handed

src/Gargantext/Hooks.purs

@@ -6,11 +6,13 @@ import Routing.Match (Match)
 import Routing.Hash (matches)
 import Toestand as T
 
+import Gargantext.Utils.Toestand as T2
+
 -- | Sets up the hash router so it writes the route to the given cell.
 -- | Note: if it gets sent to an unrecognised url, it will quietly
 -- | drop the change.
 useHashRouter :: forall r c. T.Write c r => Match r -> c -> R.Hooks Unit
 useHashRouter routes cell = R.useEffectOnce $ matches routes h where
-  h _old new = void $ T.write new cell
+  h _old new = T2.write_ new cell
 
 -- useSession cell =

src/Gargantext/Hooks/Sigmax.purs

@@ -22,10 +22,12 @@ import Effect.Class.Console (error)
 import Effect.Timer (TimeoutId, clearTimeout)
 import FFI.Simple ((.=))
 import Reactix as R
+import Toestand as T
 
 import Gargantext.Hooks.Sigmax.Sigma as Sigma
 import Gargantext.Hooks.Sigmax.Types as ST
 import Gargantext.Utils.Reactix as R2
+import Gargantext.Utils.Toestand as T2
 
 type Sigma =
   { sigma :: R.Ref (Maybe Sigma.Sigma)
@@ -112,9 +114,10 @@ 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 ST.ForceAtlasState -> R.Ref (Maybe TimeoutId) -> Effect Unit
-handleForceAtlas2Pause sigmaRef (toggled /\ setToggled) mFAPauseRef = do
+handleForceAtlas2Pause :: R.Ref Sigma -> T.Cursor ST.ForceAtlasState -> R.Ref (Maybe TimeoutId) -> Effect Unit
+handleForceAtlas2Pause sigmaRef forceAtlasState mFAPauseRef = do
   let sigma = R.readRef sigmaRef
+  toggled <- T.read forceAtlasState
   dependOnSigma sigma "[handleForceAtlas2Pause] sigma: Nothing" $ \s -> do
     --log2 "[handleForceAtlas2Pause] mSigma: Just " s
     --log2 "[handleForceAtlas2Pause] toggled: " toggled
@@ -189,15 +192,15 @@ multiSelectUpdate new selected = foldl fld selected new
         Set.insert item selectedAcc
 
 
-bindSelectedNodesClick :: Sigma.Sigma -> R.State ST.NodeIds -> R.Ref Boolean -> Effect Unit
-bindSelectedNodesClick sigma (_ /\ setNodeIds) multiSelectEnabledRef =
+bindSelectedNodesClick :: Sigma.Sigma -> T.Cursor ST.NodeIds -> R.Ref Boolean -> Effect Unit
+bindSelectedNodesClick sigma selectedNodeIds multiSelectEnabledRef =
   Sigma.bindClickNodes sigma $ \nodes -> do
     let multiSelectEnabled = R.readRef multiSelectEnabledRef
     let nodeIds = Set.fromFoldable $ map _.id nodes
     if multiSelectEnabled then
-      setNodeIds $ multiSelectUpdate nodeIds
+      T2.modify_ (multiSelectUpdate nodeIds) selectedNodeIds
     else
-      setNodeIds $ const nodeIds
+      T2.write_ nodeIds selectedNodeIds
 
 bindSelectedEdgesClick :: R.Ref Sigma -> R.State ST.EdgeIds -> Effect Unit
 bindSelectedEdgesClick sigmaRef (_ /\ setEdgeIds) =

src/Gargantext/Sessions.purs

@@ -34,12 +34,12 @@ import Gargantext.Components.Nodes.Lists.Types as NT
 import Gargantext.Config.REST as REST
 import Gargantext.Ends (class ToUrl, Backend, toUrl)
 import Gargantext.Utils.Reactix (getls)
+import Gargantext.Utils.Toestand as T2
 
 load :: forall c. T.Write c Sessions => c -> Effect Sessions
 load cell = do
   sessions <- loadSessions
-  _ <- T.write sessions cell
-  pure sessions
+  T.write sessions cell
 
 change
   :: forall c

src/Gargantext/Utils/Range.purs

@@ -16,6 +16,9 @@ instance closedRange :: Ord t => Range (Closed t) t where
   clamp (Closed r) = max r.min <<< min r.max
   within (Closed r) v = (v <= r.max) && (v >= r.min)
 
+instance eqRange :: Eq t => Eq (Closed t) where
+  eq (Closed r1) (Closed r2) = (r1.min == r2.min) && (r1.max == r2.max)
+
 type NumberRange = Closed Number
 
 range :: NumberRange -> Number

src/Gargantext/Utils/Reload.purs

@@ -8,6 +8,8 @@ import Effect (Effect)
 import Reactix as R
 import Toestand as T
 
+import Gargantext.Utils.Toestand as T2
+
 type Reload  = Int
 type ReloadS = R.State Reload
 type ReloadSRef = R.Ref
@@ -19,9 +21,7 @@ bump :: ReloadS -> Effect Unit
 bump (_ /\ setReload) = setReload (_ + 1)
 
 bumpCursor :: T.Cursor Reload -> Effect Unit
-bumpCursor c = do
-  _ <- T.modify (_ + 1) c
-  pure unit
+bumpCursor c = T2.modify_ (_ + 1) c
 
 value :: ReloadS -> Reload
 value (val /\ _) = val

src/Gargantext/Utils/Toestand.purs

@@ -2,6 +2,7 @@ module Gargantext.Utils.Toestand
   ( class Reloadable, reload
   , Reload, newReload, InitReload(..), ready
   , useCursed, useIdentityCursor, useMemberCursor
+  , write_, modify_
   ) where
 
 import Prelude (class Ord, Unit, bind, identity, pure, unit, void, ($), (+), (>>=))
@@ -22,10 +23,10 @@ newReload :: Reload
 newReload = 0
 
 instance reloadableCellReload :: Reloadable (T.Cell Int) where
-  reload cell = void $ T.modify (_ + 1) cell
+  reload cell = modify_ (_ + 1) cell
 
 instance reloadableCursorReload :: Reloadable (T.Cursor Int) where
-  reload cell = void $ T.modify (_ + 1) cell
+  reload cell = modify_ (_ + 1) cell
 
 instance reloadableInitReloadCell :: Reloadable (c Reload) => Reloadable (T.Cell (InitReload c)) where
   reload cell = do
@@ -51,7 +52,7 @@ ready :: forall cell c. T.ReadWrite cell (InitReload c) => T.ReadWrite (c Reload
 ready cell with = do
   val <- T.read cell
   case val of
-    Init    -> void $ T.write (Ready with) cell
+    Init    -> write_ (Ready with) cell
     Ready _ -> pure unit
 
 -- | Turns a Cell into a Cursor.
@@ -74,3 +75,9 @@ useMemberCursor val cell = T.useCursor (Set.member val) (toggleSet val) cell
 toggleSet :: forall s. Ord s => s -> Boolean -> Set s -> Set s
 toggleSet val true  set = Set.insert val set
 toggleSet val false set = Set.delete val set
+
+modify_ :: forall cell val. T.ReadWrite cell val => (val -> val) -> cell -> Effect Unit
+modify_ f cell = void $ T.modify f cell
+
+write_ :: forall cell val. T.Write cell val => val -> cell -> Effect Unit
+write_ val cell = void $ T.write val cell

test/Gargantext/Utils/Spec.purs

 module Gargantext.Utils.Spec where
 
-import Prelude
-
 import Data.Argonaut as Argonaut
 import Data.Argonaut.Decode.Error (JsonDecodeError)
 import Data.Either (Either(..), isLeft)
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Show (genericShow)
+import Test.Spec (Spec, describe, it)
+import Test.Spec.Assertions (shouldEqual)
+
+import Gargantext.Prelude
+
 import Gargantext.Utils as GU
 import Gargantext.Utils.Argonaut (genericEnumDecodeJson, genericEnumEncodeJson, genericSumDecodeJson, genericSumEncodeJson)
 import Gargantext.Utils.Crypto as Crypto
 import Gargantext.Utils.Math as GUM
-import Test.Spec (Spec, describe, it)
-import Test.Spec.Assertions (shouldEqual)
 
 data Fruit
   = Boat { hi :: Int }