[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
+  , 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,12 +106,8 @@ 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'
@@ -116,6 +126,7 @@ labelSizeButtonCpt = here.component "labelSizeButton" cpt
                 --, 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
+        , 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
         , 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