[graph] add debouncing/throttling to slider and range controls

spago.lock

@@ -732,7 +732,7 @@ workspace:
     data-default:
       git: https://github.com/garganscript/purescript-data-default.git
       ref: v0.4.0
-    debouncing: 0.1.0
+    debouncing: 0.1.2
     graphql-client:
       git: https://github.com/garganscript/purescript-graphql-client.git
       ref: spago-next-9.3.2
@@ -1058,8 +1058,8 @@ packages:
       - tuples
   debouncing:
     type: registry
-    version: 0.1.0
-    integrity: sha256-iAfmC8stYPctDdevBWYgydUZ02OB96uYYSACF5Zzyy4=
+    version: 0.1.2
+    integrity: sha256-2Ajskjmc+r3gnpcv6L8U4BfiSKj4N7sCINiBD99RjO8=
     dependencies:
       - effect
       - prelude

spago.yaml

@@ -6,7 +6,7 @@ workspace:
     d3:
       git: https://github.com/garganscript/purescript-d3.git
       ref: v0.11.0
-    debouncing: 0.1.0
+    debouncing: 0.1.2
     reactix: 0.6.1
     string-search:
       git: https://gitlab.iscpif.fr/gargantext/purescript-string-search.git

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

@@ -7,10 +7,11 @@ module Gargantext.Components.GraphExplorer.Toolbar.SlideButton
   ) where
 
 import Data.Map as Map
-import Data.Maybe (Maybe(..))
+import Data.Maybe (Maybe(..), fromMaybe)
 import Data.Number as DN
-import Prelude
 import Effect (Effect)
+import Effect.Debouncing as Debounce
+import Prelude
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Toestand as T
@@ -25,20 +26,29 @@ import Gargantext.Utils.Reactix as R2
 here :: R2.Here
 here = R2.here "Gargantext.Components.GraphExplorer.Toolbar.SlideButton"
 
+defaultThrottleInterval :: Int
+defaultThrottleInterval = 500
+
 type Props =
-  ( caption         :: String
-  , forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
-  , 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         :: Number -> Effect Unit
+  , state            :: T.Box Number
+  , throttleInterval :: Maybe Int          -- then Nothing, no throttling is done
   )
 
 sizeButton :: Record Props -> R.Element
 sizeButton props = R.createElement sizeButtonCpt props []
 sizeButtonCpt :: R.Component Props
 sizeButtonCpt = here.component "sizeButton" cpt where
-  cpt { state, caption, forceAtlasState, min, max, onChange } _ = do
+  cpt { state, caption, forceAtlasState, min, max, onChange, throttleInterval } _ = do
+    let throttled = Debounce.throttleWithDebounceAtEnd onChange (fromMaybe 0 throttleInterval)
+    let onChangeThrottled = case throttleInterval of
+          Nothing -> onChange
+          Just ti -> \rng -> Debounce.call throttled rng
+          
     defaultValue <- T.useLive T.unequal state
     forceAtlasState' <- R2.useLive' forceAtlasState
 
@@ -61,7 +71,11 @@ sizeButtonCpt = here.component "sizeButton" cpt where
           , min: show min
           , max: show max
           , defaultValue
-          , on: { input: onChange }
+          , on: { input: \e -> do
+                               let v = DN.fromString $ R.unsafeEventValue e
+                               case v of
+                                 Nothing -> pure unit
+                                 Just vv -> onChangeThrottled vv }
           , className: "range-simple__input"
           , disabled: status == Disabled
           }
@@ -92,30 +106,27 @@ labelSizeButtonCpt = here.component "labelSizeButton" cpt
         , forceAtlasState
         , min: minLabelSize
         , max: maxLabelSize
-        , onChange: \e -> do
+        , onChange: \newValue -> 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
-                let ratio = (newValue - minLabelSize) / (defaultLabelSize - minLabelSize)
-                let nodes = SigmaxTypes.graphNodes graph'
-                let nodesResized = (\n@{ size } -> n { size = size * ratio }) <$> nodes
-                let nodesMap = SigmaxTypes.idMap nodesResized
-                Graphology.forEachNode (Sigma.graph s) $ \{ id } -> do
-                  case Map.lookup id nodesMap of
-                    Nothing -> pure unit
-                    Just { size } -> Graphology.mergeNodeAttributes (Sigma.graph s) id { size }
-
-                Sigma.setSettings s {
-                    defaultLabelSize: newValue
-                  , drawLabels: true
-                  , labelSize: newValue
-                  -- , maxNodeSize: newValue / 2.5
-                    --, labelSizeRatio: newValue / 2.5
-                  }
-                T.write_ newValue state
+          Sigmax.dependOnSigma sigma "[labelSizeButton] sigma: Nothing" $ \s -> do
+            let ratio = (newValue - minLabelSize) / (defaultLabelSize - minLabelSize)
+            let nodes = SigmaxTypes.graphNodes graph'
+            let nodesResized = (\n@{ size } -> n { size = size * ratio }) <$> nodes
+            let nodesMap = SigmaxTypes.idMap nodesResized
+            Graphology.forEachNode (Sigma.graph s) $ \{ id } -> do
+              case Map.lookup id nodesMap of
+                Nothing -> pure unit
+                Just { size } -> Graphology.mergeNodeAttributes (Sigma.graph s) id { size }
+
+            Sigma.setSettings s {
+                defaultLabelSize: newValue
+              , drawLabels: true
+              , labelSize: newValue
+              -- , maxNodeSize: newValue / 2.5
+                --, labelSizeRatio: newValue / 2.5
+              }
+            T.write_ newValue state
+        , throttleInterval: Just defaultThrottleInterval
         }
 
 type LabelRenderedSizeThresholdButtonProps =
@@ -135,17 +146,14 @@ labelRenderedSizeThresholdButtonCpt = here.component "labelRenderedSizeThreshold
         , forceAtlasState
         , min: 0.0
         , max: 10.0
-        , onChange: \e -> do
+        , onChange: \newValue -> 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
+          Sigmax.dependOnSigma sigma "[labelRenderdSizeThresholdButton] sigma: Nothing" $ \s -> do
+            Sigma.setSettings s {
+              labelRenderedSizeThreshold: newValue
+              }
+            T.write_ newValue state
+        , throttleInterval: Just defaultThrottleInterval
         }
 
 type MouseSelectorSizeSliderProps =
@@ -164,16 +172,13 @@ mouseSelectorSizeSliderCpt = here.component "mouseSelectorSizeSlider" cpt
         , forceAtlasState
         , min: 1.0
         , max: 100.0
-        , onChange: \e -> do
+        , onChange: \newValue -> 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
+          Sigmax.dependOnSigma sigma "[mouseSelectorSizeButton] sigma: Nothing" $ \s -> do
+            Sigma.setSettings s {
+              mouseSelectorSize: newValue
+              }
+            T.write_ newValue state
         , state
+        , throttleInterval: Just defaultThrottleInterval
         }

src/Gargantext/Components/RangeSlider.purs

@@ -67,7 +67,7 @@ rangeSlider props = R.createElement rangeSliderCpt props []
 rangeSliderCpt :: R.Component Props
 rangeSliderCpt = here.component "rangeSlider" cpt where
   cpt props _ = do
-    let throttled = Debounce.throttle props.onChange (fromMaybe 0 props.throttleInterval)
+    let throttled = Debounce.throttleWithDebounceAtEnd props.onChange (fromMaybe 0 props.throttleInterval)
     let onChangeThrottled = case props.throttleInterval of
           Nothing -> props.onChange
           Just ti -> \rng -> Debounce.call throttled rng