Merge remote-tracking branch...

Merge remote-tracking branch 'origin/451-dev-disable-controls-when-forceatlas-is-running' into dev-merge

spago.dhall

@@ -40,6 +40,7 @@ to generate this file without the comments in this block.
   , "foreign"
   , "foreign-object"
   , "form-urlencoded"
+  , "formatters"
   , "formula"
   , "functions"
   , "graphql-client"
@@ -47,9 +48,7 @@ to generate this file without the comments in this block.
   , "integers"
   , "js-timers"
   , "lists"
-  -- , "markdown"
   , "markdown-it"
-  --, "markdown-smolder"
   , "maybe"
   , "media-types"
   , "milkis"
@@ -75,7 +74,6 @@ to generate this file without the comments in this block.
   , "simple-json"
   , "simple-json-generics"
   , "simplecrypto"
-  -- , "smolder"
   , "strings"
   , "strings-extra"
   , "stringutils"

src/Gargantext/Components/Bootstrap/Inline/Button.purs

@@ -20,24 +20,24 @@ type Props =
   )
 
 type Options =
-  ( status    :: ComponentStatus
-  , size      :: Sizing
-  , variant   :: ButtonVariant
-  , type      :: String
+  ( block     :: Boolean
   , className :: String
-  , block     :: Boolean
+  , size      :: Sizing
+  , status    :: ComponentStatus
   , title     :: String
+  , type      :: String
+  , variant   :: ButtonVariant
   )
 
 options :: Record Options
 options =
-  { status    : Enabled
-  , size      : MediumSize
-  , variant   : ButtonVariant Primary
-  , type      : "button"
+  { block     : false
   , className : ""
-  , block     : false
+  , status    : Enabled
+  , size      : MediumSize
   , title     : ""
+  , type      : "button"
+  , variant   : ButtonVariant Primary
   }
 
 -- | Structural Component for the Bootstrap button

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,10 +184,11 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
             ,
               cameraButton
               { id: graphId'
+              , forceAtlasState
               , hyperdataGraph: hyperdataGraph'
+              , reloadForest
               , session: session
               , sigmaRef: sigmaRef
-              , reloadForest
               }
             ]
           ,
@@ -197,7 +198,8 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
             , titleSlot: H.text "View settings"
             }
             [
-              centerButton sigmaRef
+              centerButton { forceAtlasState
+                           , sigmaRef }
             ,
               gap
             ,
@@ -208,7 +210,8 @@ controlsCpt = R.memo' $ here.component "controls" cpt where
             ,
               gap
             ,
-              louvainToggleButton { state: showLouvain }
+              louvainToggleButton { forceAtlasState
+                                  , state: showLouvain }
             ]
           ]
         ,
@@ -222,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 }
           ]
         ]
       ,
@@ -262,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
@@ -279,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

@@ -13,6 +13,7 @@ import Data.Tuple (Tuple(..))
 import Partial.Unsafe (unsafePartial)
 import Prelude (class Eq, class Show, map, ($), (&&), (==), (||), (<$>), (<), mod, not)
 
+import Gargantext.Components.Bootstrap.Types (ComponentStatus(..))
 import Gargantext.Components.GraphExplorer.GraphTypes as GEGT
 import Gargantext.Data.Louvain as Louvain
 import Gargantext.Types as GT
@@ -172,6 +173,15 @@ toggleForceAtlasState Running = Paused
 toggleForceAtlasState Paused = Running
 toggleForceAtlasState Killed = InitialRunning
 
+
+forceAtlasComponentStatus :: ForceAtlasState -> ComponentStatus
+forceAtlasComponentStatus InitialRunning = Disabled
+forceAtlasComponentStatus InitialStopped = Enabled
+forceAtlasComponentStatus Running = Disabled
+forceAtlasComponentStatus Paused = Enabled
+forceAtlasComponentStatus Killed = Enabled
+
+
 -- | Custom state for show edges. Normally it is EShow or EHide (show/hide
 -- | edges). However, edges are temporarily turned off when forceAtlas is
 -- | running.
@@ -219,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