[graph] disable various other controls when FA2 is running

src/Gargantext/Components/GraphExplorer/Toolbar/Buttons.purs

@@ -48,7 +48,7 @@ here = R2.here "Gargantext.Components.GraphExplorer.Toolbar.Button"
 ------------------------------------------------------
 
 type CenterButtonProps =
-  ( forceAtlasState :: SigmaxTypes.ForceAtlasState
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
   , sigmaRef        :: R.Ref Sigmax.Sigma )
 
 centerButton :: R2.Leaf CenterButtonProps
@@ -58,11 +58,13 @@ centerButtonCpt = here.component "centerButton" cpt
   where
     cpt { forceAtlasState
         , sigmaRef } _ = do
+      forceAtlasState' <- R2.useLive' forceAtlasState
+
       pure $ B.button
         { callback: \_ -> do
           Sigmax.dependOnSigma (R.readRef sigmaRef) "[centerButton] sigma: Nothing" $ \s ->
             Camera.updateCamera (Camera.camera s) Camera.defaultCamera
-        , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState
+        , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
         , variant: OutlinedButtonVariant Secondary
         }
         [ H.text "Center" ]
@@ -72,7 +74,7 @@ centerButtonCpt = here.component "centerButton" cpt
 type CameraButtonProps =
   ( id              :: Int
   , hyperdataGraph  :: GET.HyperdataGraph
-  , forceAtlasState :: SigmaxTypes.ForceAtlasState
+  , forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
   , reloadForest    :: T2.ReloadS
   , session         :: Session
   , sigmaRef        :: R.Ref Sigmax.Sigma
@@ -96,6 +98,8 @@ cameraButtonCpt = here.component "cameraButton" cpt
         , reloadForest
         , session
         , sigmaRef } _ = do
+      forceAtlasState' <- R2.useLive' forceAtlasState
+
       pure $ B.button
         { callback: \_ -> do
              filename <- screenshotFilename
@@ -118,7 +122,7 @@ cameraButtonCpt = here.component "cameraButton" cpt
                        Left err -> liftEffect $ log2 "[cameraButton] RESTError" err
                        Right _ret -> do
                          liftEffect $ T2.reload reloadForest
-        , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState
+        , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
         , variant: OutlinedButtonVariant Secondary
         } [ H.text "Screenshot" ]
 
@@ -139,28 +143,23 @@ edgesToggleButtonCpt = here.component "edgesToggleButton" cpt
       state'      <- R2.useLive' state
       stateAtlas' <- R2.useLive' stateAtlas
 
-      -- Computed
-      let
-        cst SigmaxTypes.InitialRunning  = Disabled
-        cst SigmaxTypes.Running         = Disabled
-        cst _                           = Enabled
-
       -- Render
       pure $
         B.button
-        { variant: state' == SigmaxTypes.EShow ?
+        { -- TODO: Move this to Graph.purs to the R.useEffect handler which renders nodes/edges
+          callback: \_ -> T.modify_ SigmaxTypes.toggleShowEdgesState state
+        , status: SigmaxTypes.forceAtlasComponentStatus stateAtlas'
+        , variant: state' == SigmaxTypes.EShow ?
             ButtonVariant Secondary $
             OutlinedButtonVariant Secondary
-        , status: cst stateAtlas'
-          -- TODO: Move this to Graph.purs to the R.useEffect handler which renders nodes/edges
-        , callback: \_ -> T.modify_ SigmaxTypes.toggleShowEdgesState state
         }
         [ H.text "Edges" ]
 
 ------------------------------------------------------
 
 type LouvainToggleButtonProps =
-  ( state :: T.Box Boolean
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , state           :: T.Box Boolean
   )
 
 louvainToggleButton :: R2.Leaf LouvainToggleButtonProps
@@ -168,16 +167,17 @@ louvainToggleButton = R2.leaf louvainToggleButtonCpt
 louvainToggleButtonCpt :: R.Component LouvainToggleButtonProps
 louvainToggleButtonCpt = here.component "louvainToggleButton" cpt
   where
-    cpt { state } _ = do
+    cpt { forceAtlasState, state } _ = do
       state' <- R2.useLive' state
+      forceAtlasState' <- R2.useLive' forceAtlasState
 
       pure $
-
         B.button
-        { variant: state' ?
+        { callback: \_ -> T.modify_ (not) state
+        , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
+        , variant: state' ?
             ButtonVariant Secondary $
             OutlinedButtonVariant Secondary
-        , callback: \_ -> T.modify_ (not) state
         }
         [ H.text "Louvain" ]
 
@@ -257,7 +257,8 @@ resetForceAtlasButtonCpt = here.component "resetForceAtlasToggleButton" cpt
 ------------------------------------------------------------------
 
 type MultiSelectEnabledButtonProps =
-  ( state       :: T.Box Boolean
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , state           :: T.Box Boolean
   )
 
 multiSelectEnabledButton :: R2.Leaf MultiSelectEnabledButtonProps
@@ -265,29 +266,31 @@ multiSelectEnabledButton = R2.leaf multiSelectEnabledButtonCpt
 multiSelectEnabledButtonCpt :: R.Component MultiSelectEnabledButtonProps
 multiSelectEnabledButtonCpt = here.component "multiSelectEnabledButton" cpt
   where
-    cpt { state } _ = do
+    cpt { forceAtlasState, state } _ = do
       state' <- R2.useLive' state
+      forceAtlasState' <- R2.useLive' forceAtlasState
 
       pure $
-
         H.div
         { className: "btn-group"
         , role: "group"
         }
         [
           B.button
-          { variant: state' ?
+          { callback: \_ -> T.write_ false state
+          , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
+          , variant: state' ?
               OutlinedButtonVariant Secondary $
               ButtonVariant Secondary
-          , callback: \_ -> T.write_ false state
           }
           [ H.text "Single" ]
         ,
           B.button
-          { variant: state' ?
+          { callback: \_ -> T.write_ true state
+          , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
+          , variant: state' ?
               ButtonVariant Secondary $
               OutlinedButtonVariant Secondary
-          , callback: \_ -> T.write_ true state
           }
           [ H.text "Multiple" ]
         ]

src/Gargantext/Components/GraphExplorer/Toolbar/Controls.purs

@@ -16,7 +16,7 @@ import Gargantext.Components.GraphExplorer.Resources as Graph
 import Gargantext.Components.GraphExplorer.Store as GraphStore
 import Gargantext.Components.GraphExplorer.Toolbar.Buttons (centerButton, cameraButton, edgesToggleButton, louvainToggleButton, pauseForceAtlasButton, multiSelectEnabledButton)
 import Gargantext.Components.GraphExplorer.Toolbar.RangeControl (edgeConfluenceControl, edgeWeightControl, nodeSizeControl)
-import Gargantext.Components.GraphExplorer.Toolbar.SlideButton (labelSizeButton, labelRenderedSizeThresholdButton, mouseSelectorSizeButton)
+import Gargantext.Components.GraphExplorer.Toolbar.SlideButton (labelSizeButton, labelRenderedSizeThresholdButton, mouseSelectorSizeSlider)
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Hooks.Session (useSession)
 import Gargantext.Hooks.Sigmax.ForceAtlas2 as ForceAtlas
@@ -184,7 +184,7 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
             ,
               cameraButton
               { id: graphId'
-              , forceAtlasState: forceAtlasState'
+              , forceAtlasState
               , hyperdataGraph: hyperdataGraph'
               , reloadForest
               , session: session
@@ -198,7 +198,7 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
             , titleSlot: H.text "View settings"
             }
             [
-              centerButton { forceAtlasState: forceAtlasState'
+              centerButton { forceAtlasState
                            , sigmaRef }
             ,
               gap
@@ -210,7 +210,8 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
             ,
               gap
             ,
-              louvainToggleButton { state: showLouvain }
+              louvainToggleButton { forceAtlasState
+                                  , state: showLouvain }
             ]
           ]
         ,
@@ -224,13 +225,16 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
           }
           [
             -- zoom: 0 -100 - calculate ratio
-            multiSelectEnabledButton { state: multiSelectEnabled }
+            multiSelectEnabledButton { forceAtlasState
+                                     , state: multiSelectEnabled }
           ,
             gap
           ,
             -- toggle multi node selection
             -- save button
-            mouseSelectorSizeButton sigmaRef mouseSelectorSize
+            mouseSelectorSizeSlider { forceAtlasState
+                                    , sigmaRef
+                                    , state: mouseSelectorSize }
           ]
         ]
       ,
@@ -264,7 +268,9 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
             -- run demo
             -- search button
             -- search topics
-            labelSizeButton sigmaRef labelSize
+            labelSizeButton { forceAtlasState
+                            , sigmaRef
+                            , state: labelSize }
           ,
             -- labels size: 1-4
             nodeSizeControl
@@ -281,7 +287,9 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
             -- run demo
             -- search button
             -- search topics
-            labelRenderedSizeThresholdButton sigmaRef labelRenderedSizeThreshold
+            labelRenderedSizeThresholdButton { forceAtlasState
+                                             , sigmaRef
+                                             , state: labelRenderedSizeThreshold }
           -- ,
           --   -- labels size: 1-4
           --   nodeSizeControl

src/Gargantext/Components/GraphExplorer/Toolbar/SlideButton.purs

@@ -3,7 +3,7 @@ module Gargantext.Components.GraphExplorer.Toolbar.SlideButton
   , sizeButton
   , labelSizeButton
   , labelRenderedSizeThresholdButton
-  , mouseSelectorSizeButton
+  , mouseSelectorSizeSlider
   ) where
 
 import Data.Maybe (Maybe(..))
@@ -14,27 +14,33 @@ import Reactix as R
 import Reactix.DOM.HTML as H
 import Toestand as T
 
+import Gargantext.Components.Bootstrap.Types (ComponentStatus(Disabled))
 import Gargantext.Hooks.Sigmax as Sigmax
 import Gargantext.Hooks.Sigmax.Sigma as Sigma
+import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
 import Gargantext.Utils.Reactix as R2
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.GraphExplorer.Toolbar.SlideButton"
 
 type Props =
-  ( caption  :: String
-  , min      :: Number
-  , max      :: Number
-  , onChange :: forall e. e -> Effect Unit
-  , state    :: T.Box Number
+  ( caption         :: String
+  , forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , min             :: Number
+  , max             :: Number
+  , onChange        :: forall e. e -> Effect Unit
+  , state           :: T.Box Number
   )
 
 sizeButton :: Record Props -> R.Element
 sizeButton props = R.createElement sizeButtonCpt props []
 sizeButtonCpt :: R.Component Props
 sizeButtonCpt = here.component "sizeButton" cpt where
-  cpt { state, caption, min, max, onChange } _ = do
+  cpt { state, caption, forceAtlasState, min, max, onChange } _ = do
     defaultValue <- T.useLive T.unequal state
+    forceAtlasState' <- R2.useLive' forceAtlasState
+
+    let status = SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
 
     pure $
 
@@ -55,70 +61,101 @@ sizeButtonCpt = here.component "sizeButton" cpt where
           , defaultValue
           , on: { input: onChange }
           , className: "range-simple__input"
+          , disabled: status == Disabled
           }
         ]
       ]
 
-labelSizeButton :: R.Ref Sigmax.Sigma -> T.Box Number -> R.Element
-labelSizeButton sigmaRef state =
-  sizeButton {
-      state
-    , caption: "Label size"
-    , min: 1.0
-    , max: 30.0
-    , onChange: \e -> do
-      let sigma = R.readRef sigmaRef
-      let newValue' = DN.fromString $ R.unsafeEventValue e
-      case newValue' of
-        Nothing -> pure unit
-        Just newValue ->
-          Sigmax.dependOnSigma sigma "[labelSizeButton] sigma: Nothing" $ \s -> do
-            Sigma.setSettings s {
-                defaultLabelSize: newValue
-              , drawLabels: true
-              , labelSize: newValue
-              , maxNodeSize: newValue / 2.5
-                --, labelSizeRatio: newValue / 2.5
-              }
-            T.write_ newValue state
-    }
+type LabelSizeButtonProps =
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , sigmaRef :: R.Ref Sigmax.Sigma
+  , state    :: T.Box Number)
+
+labelSizeButton :: R2.Leaf LabelSizeButtonProps
+labelSizeButton = R2.leaf labelSizeButtonCpt
+labelSizeButtonCpt :: R.Component LabelSizeButtonProps
+labelSizeButtonCpt = here.component "labelSizeButton" cpt
+  where
+    cpt { forceAtlasState, sigmaRef, state} _ = do
+      pure $ sizeButton {
+          state
+        , caption: "Label size"
+        , forceAtlasState
+        , min: 1.0
+        , max: 30.0
+        , onChange: \e -> do
+          let sigma = R.readRef sigmaRef
+          let newValue' = DN.fromString $ R.unsafeEventValue e
+          case newValue' of
+            Nothing -> pure unit
+            Just newValue ->
+              Sigmax.dependOnSigma sigma "[labelSizeButton] sigma: Nothing" $ \s -> do
+                Sigma.setSettings s {
+                    defaultLabelSize: newValue
+                  , drawLabels: true
+                  , labelSize: newValue
+                  , maxNodeSize: newValue / 2.5
+                    --, labelSizeRatio: newValue / 2.5
+                  }
+                T.write_ newValue state
+        }
+
+type LabelRenderedSizeThresholdButtonProps =
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , sigmaRef :: R.Ref Sigmax.Sigma
+  , state    :: T.Box Number)
+
+labelRenderedSizeThresholdButton :: R2.Leaf LabelRenderedSizeThresholdButtonProps
+labelRenderedSizeThresholdButton = R2.leaf labelRenderedSizeThresholdButtonCpt
+labelRenderedSizeThresholdButtonCpt :: R.Component LabelRenderedSizeThresholdButtonProps
+labelRenderedSizeThresholdButtonCpt = here.component "labelRenderedSizeThresholdButton" cpt
+  where
+    cpt { forceAtlasState, sigmaRef, state} _ = do
+      pure $ sizeButton {
+        state
+        , caption: "Label rendered size threshold"
+        , forceAtlasState
+        , min: 0.0
+        , max: 10.0
+        , onChange: \e -> do
+          let sigma = R.readRef sigmaRef
+          let newValue' = DN.fromString $ R.unsafeEventValue e
+          case newValue' of
+            Nothing -> pure unit
+            Just newValue ->
+              Sigmax.dependOnSigma sigma "[labelRenderdSizeThresholdButton] sigma: Nothing" $ \s -> do
+                Sigma.setSettings s {
+                  labelRenderedSizeThreshold: newValue
+                  }
+                T.write_ newValue state
+        }
 
-labelRenderedSizeThresholdButton :: R.Ref Sigmax.Sigma -> T.Box Number -> R.Element
-labelRenderedSizeThresholdButton sigmaRef state =
-  sizeButton {
-      state
-    , caption: "Label rendered size threshold"
-    , min: 0.0
-    , max: 10.0
-    , onChange: \e -> do
-      let sigma = R.readRef sigmaRef
-      let newValue' = DN.fromString $ R.unsafeEventValue e
-      case newValue' of
-        Nothing -> pure unit
-        Just newValue ->
-          Sigmax.dependOnSigma sigma "[labelRenderdSizeThresholdButton] sigma: Nothing" $ \s -> do
-            Sigma.setSettings s {
-                labelRenderedSizeThreshold: newValue
-              }
-            T.write_ newValue state
-    }
+type MouseSelectorSizeSliderProps =
+  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
+  , sigmaRef :: R.Ref Sigmax.Sigma
+  , state    :: T.Box Number)
 
-mouseSelectorSizeButton :: R.Ref Sigmax.Sigma -> T.Box Number -> R.Element
-mouseSelectorSizeButton sigmaRef state =
-  sizeButton {
-      state
-    , caption: "Selector size (Shift + wheel)"
-    , min: 1.0
-    , max: 50.0
-    , onChange: \e -> do
-      let sigma = R.readRef sigmaRef
-      let newValue' = DN.fromString $ R.unsafeEventValue e
-      case newValue' of
-        Nothing -> pure unit
-        Just newValue ->
-          Sigmax.dependOnSigma sigma "[mouseSelectorSizeButton] sigma: Nothing" $ \s -> do
-            Sigma.setSettings s {
-              mouseSelectorSize: newValue
-              }
-            T.write_ newValue state
-    }
+mouseSelectorSizeSlider :: R2.Leaf MouseSelectorSizeSliderProps
+mouseSelectorSizeSlider = R2.leaf mouseSelectorSizeSliderCpt
+mouseSelectorSizeSliderCpt :: R.Component MouseSelectorSizeSliderProps
+mouseSelectorSizeSliderCpt = here.component "mouseSelectorSizeSlider" cpt
+  where
+    cpt { forceAtlasState, sigmaRef, state } _ = do
+      pure $ sizeButton {
+          caption: "Selector size (Shift + wheel)"
+        , forceAtlasState
+        , min: 1.0
+        , max: 50.0
+        , onChange: \e -> do
+          let sigma = R.readRef sigmaRef
+          let newValue' = DN.fromString $ R.unsafeEventValue e
+          case newValue' of
+            Nothing -> pure unit
+            Just newValue ->
+              Sigmax.dependOnSigma sigma "[mouseSelectorSizeButton] sigma: Nothing" $ \s -> do
+                Sigma.setSettings s {
+                  mouseSelectorSize: newValue
+                  }
+                T.write_ newValue state
+        , state
+        }

src/Gargantext/Hooks/Sigmax/Types.purs

@@ -229,10 +229,8 @@ forceAtlasEdgeState Killed es = es
 -- | Return state in which labels should be depending on forceAtlasState
 forceAtlasLabelState :: ForceAtlasState -> Boolean
 forceAtlasLabelState InitialRunning = false
-forceAtlasLabelState InitialStopped = true
-forceAtlasLabelState Running = false
-forceAtlasLabelState Paused = true
-forceAtlasLabelState Killed = true
+forceAtlasLabelState Running        = false
+forceAtlasLabelState _              = true