[rangecontrol] add debouncing (throttle) to range controls

package.json

@@ -37,6 +37,7 @@
     "crypto": "~1.0.1",
     "d3": "~7.6.1",
     "debounce": "^2.0.0",
+    "debouncing": "^22.7.25",
     "echarts": "~5.1.2",
     "echarts-for-react": "~3.0.1",
     "graphology": "~0.25.1",

spago.lock

@@ -3,7 +3,7 @@ workspace:
     gargantext:
       path: ./
       dependencies:
-        - aff
+        - aff: ">=7.1.0 <8.0.0"
         - aff-promise: ">=4.0.0 <5.0.0"
         - affjax: ">=13.0.0 <14.0.0"
         - affjax-web: ">=1.0.0 <2.0.0"
@@ -21,7 +21,7 @@ workspace:
         - d3: "*"
         - data-default: "*"
         - datetime: ">=6.1.0 <7.0.0"
-        - debounce
+        - debouncing: ">=0.1.0 <0.2.0"
         - debug: ">=6.0.2 <7.0.0"
         - dom-filereader: ">=7.0.0 <8.0.0"
         - dom-simple: ">=0.4.0 <0.5.0"
@@ -59,7 +59,7 @@ workspace:
         - profunctor-lenses: ">=8.0.0 <9.0.0"
         - random: ">=6.0.0 <7.0.0"
         - react: ">=11.0.0 <12.0.0"
-        - reactix
+        - reactix: ">=0.6.1 <0.7.0"
         - record: ">=4.0.0 <5.0.0"
         - record-extra: ">=5.0.1 <6.0.0"
         - routing: ">=11.0.0 <12.0.0"
@@ -81,7 +81,6 @@ workspace:
         - unordered-collections: ">=3.1.0 <4.0.0"
         - unsafe-coerce: ">=6.0.0 <7.0.0"
         - uri: ">=9.0.0 <10.0.0"
-        - use-debounce
         - uuid: ">=9.0.0 <10.0.0"
         - validation: ">=6.0.0 <7.0.0"
         - web-file: ">=4.0.0 <5.0.0"
@@ -120,7 +119,7 @@ workspace:
         - d3
         - data-default
         - datetime
-        - debounce
+        - debouncing
         - debug
         - distributive
         - dom-filereader
@@ -225,7 +224,6 @@ workspace:
         - unsafe-coerce
         - unsafe-reference
         - uri
-        - use-debounce
         - uuid
         - validation
         - variant
@@ -238,7 +236,7 @@ workspace:
         - web-xhr
   package_set:
     address:
-      registry: 50.11.0
+      registry: 50.13.1
     compiler: ">=0.15.15 <0.16.0"
     content:
       abc-parser: 2.0.1
@@ -253,6 +251,7 @@ workspace:
       affjax-node: 1.0.0
       affjax-web: 1.0.0
       ansi: 7.0.0
+      apexcharts: 0.5.0
       applicative-phases: 1.0.0
       argonaut: 9.0.0
       argonaut-aeson-generic: 0.4.1
@@ -314,6 +313,7 @@ workspace:
       coroutines: 7.0.0
       css: 6.0.0
       css-frameworks: 1.0.1
+      csv-stream: 1.1.7
       data-mvc: 0.0.2
       datetime: 6.1.0
       datetime-parsing: 0.2.0
@@ -551,7 +551,7 @@ workspace:
       pointed-list: 0.5.1
       polymorphic-vectors: 4.0.0
       posix-types: 6.0.0
-      postgresql: 1.3.0
+      postgresql: 1.5.1
       precise: 6.0.0
       precise-datetime: 7.0.0
       prelude: 6.0.1
@@ -732,16 +732,14 @@ workspace:
     data-default:
       git: https://github.com/garganscript/purescript-data-default.git
       ref: v0.4.0
-    debounce:
-      path: /data/git-work/github/PURESCRIPT/purescript-debounce
+    debouncing: 0.1.0
     graphql-client:
       git: https://github.com/garganscript/purescript-graphql-client.git
       ref: spago-next-9.3.2
     markdown-it:
       git: https://github.com/garganscript/purescript-markdown-it.git
       ref: spago-next
-    reactix:
-      path: /data/git-work/github/PURESCRIPT/purescript-reactix
+    reactix: 0.6.1
     sequences:
       git: https://github.com/garganscript/purescript-sequences.git
       ref: v3.0.2-spago-next
@@ -755,8 +753,6 @@ workspace:
     tuples-native:
       git: https://github.com/garganscript/purescript-tuples-native.git
       ref: v2.3.0-spago-next
-    use-debounce:
-      path: /data/git-work/github/PURESCRIPT/purescript-use-debounce
 packages:
   aff:
     type: registry
@@ -1060,12 +1056,12 @@ packages:
       - partial
       - prelude
       - tuples
-  debounce:
-    type: local
-    path: /data/git-work/github/PURESCRIPT/purescript-debounce
+  debouncing:
+    type: registry
+    version: 0.1.0
+    integrity: sha256-iAfmC8stYPctDdevBWYgydUZ02OB96uYYSACF5Zzyy4=
     dependencies:
       - effect
-      - ffi-simple
       - prelude
   debug:
     type: registry
@@ -1847,8 +1843,9 @@ packages:
       - typelevel-prelude
       - unsafe-coerce
   reactix:
-    type: local
-    path: /data/git-work/github/PURESCRIPT/purescript-reactix
+    type: registry
+    version: 0.6.1
+    integrity: sha256-mM6JZFWfeMhgMJa9oGdzNchkp/Xcnv2e/oGc0nZp6EQ=
     dependencies:
       - dom-simple
       - effect
@@ -2276,15 +2273,6 @@ packages:
       - these
       - transformers
       - unfoldable
-  use-debounce:
-    type: local
-    path: /data/git-work/github/PURESCRIPT/purescript-use-debounce
-    dependencies:
-      - console
-      - effect
-      - ffi-simple
-      - prelude
-      - reactix
   uuid:
     type: registry
     version: 9.0.0

spago.yaml

 workspace:
   packageSet:
-    registry: 50.11.0
+    registry: 50.13.1
   extraPackages:
     # garganscript packages
     d3:
       git: https://github.com/garganscript/purescript-d3.git
       ref: v0.11.0
-    debounce:
-      path: /data/git-work/github/PURESCRIPT/purescript-debounce
+    debouncing: 0.1.0
+    reactix: 0.6.1
     string-search:
       git: https://gitlab.iscpif.fr/gargantext/purescript-string-search.git
       ref: spago-next
@@ -35,19 +35,11 @@ workspace:
       git: https://github.com/garganscript/purescript-spec-discovery.git
       ref: v8.2.0-spago-next
 
-    use-debounce:
-      path: /data/git-work/github/PURESCRIPT/purescript-use-debounce
-    reactix:
-      path: /data/git-work/github/PURESCRIPT/purescript-reactix
-
 package:
   name: gargantext
   dependencies:
     # debugging
-    - debug: ">=6.0.2 <7.0.0"
-    # - psci-support: ">=6.0.0 <7.0.0"
-    
-    - aff
+    - aff: ">=7.1.0 <8.0.0"
     - aff-promise: ">=4.0.0 <5.0.0"
     - affjax: ">=13.0.0 <14.0.0"
     - affjax-web: ">=1.0.0 <2.0.0"
@@ -65,7 +57,8 @@ package:
     - d3: "*"
     - data-default: "*"
     - datetime: ">=6.1.0 <7.0.0"
-    - debounce
+    - debouncing: ">=0.1.0 <0.2.0"
+    - debug: ">=6.0.2 <7.0.0"
     - dom-filereader: ">=7.0.0 <8.0.0"
     - dom-simple: ">=0.4.0 <0.5.0"
     - effect: ">=4.0.0 <5.0.0"
@@ -102,8 +95,7 @@ package:
     - profunctor-lenses: ">=8.0.0 <9.0.0"
     - random: ">=6.0.0 <7.0.0"
     - react: ">=11.0.0 <12.0.0"
-    #- reactix: ">=0.6.0 <0.7.0"
-    - reactix
+    - reactix: ">=0.6.1 <0.7.0"
     - record: ">=4.0.0 <5.0.0"
     - record-extra: ">=5.0.1 <6.0.0"
     - routing: ">=11.0.0 <12.0.0"
@@ -126,7 +118,6 @@ package:
     - unsafe-coerce: ">=6.0.0 <7.0.0"
     - uri: ">=9.0.0 <10.0.0"
     - uuid: ">=9.0.0 <10.0.0"
-    - use-debounce
     - validation: ">=6.0.0 <7.0.0"
     - web-file: ">=4.0.0 <5.0.0"
     - web-html: ">=4.1.0 <5.0.0"
@@ -150,7 +141,6 @@ package:
       - UnusedName
       - UnusedTypeVar
 
-
   test:
     main: Test.Main
     dependencies:

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

@@ -6,9 +6,12 @@ module Gargantext.Components.GraphExplorer.Toolbar.RangeControl
   , nodeSizeControl
   ) where
 
+import Data.Maybe (Maybe(..))
 import Data.Tuple.Nested((/\))
 import Debug (spy)
-import Effect.Debounce as Debounce
+import Effect.Aff (launchAff_)
+import Effect.Class (liftEffect)
+import Effect.Debouncing as Debounce
 import FFI.Simple (delay)
 import Gargantext.Components.RangeSlider as RS
 import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
@@ -16,7 +19,6 @@ import Gargantext.Utils.Range as Range
 import Gargantext.Utils.Reactix as R2
 import Prelude
 import Reactix as R
-import Reactix.Debounce as RD
 import Reactix.DOM.HTML as H
 import Toestand as T
 
@@ -24,6 +26,9 @@ import Toestand as T
 here :: R2.Here
 here = R2.here "Gargantext.Components.GraphExplorer.Toolbar.RangeControl"
 
+defaultThrottleInterval :: Int
+defaultThrottleInterval = 500
+
 type Props =
   ( caption     :: String
   , sliderProps :: Record RS.Props
@@ -62,35 +67,6 @@ edgeConfluenceControlCpt = here.component "edgeConfluenceControl" cpt
         , range
         , state
         } _ = do
-
-      let onChange' rng = do
-            -- here.log2 "[edgeWeightControl] debounce rng" rng
-            let _ = spy "debounce rng" rng
-            T.write_ rng state
-          onChange = Debounce.debounce onChange' 1000
-
-      pure $ edgeConfluenceControlInternal { forceAtlasState
-                                           , onChange
-                                           , range
-                                           , state }
-
-type EdgeConfluenceControlInternalProps =
-  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
-  , onChange        :: Debounce.Debounce
-  , range           :: Range.NumberRange
-  , state           :: T.Box Range.NumberRange
-  )
-
-edgeConfluenceControlInternal :: R2.Leaf EdgeConfluenceControlInternalProps
-edgeConfluenceControlInternal = R2.leaf edgeConfluenceControlInternalCpt
-edgeConfluenceControlInternalCpt :: R.Component EdgeConfluenceControlInternalProps
-edgeConfluenceControlInternalCpt = here.component "edgeConfluenceControlInternal" cpt
-  where
-    cpt { forceAtlasState
-        , onChange
-        , range: Range.Closed { min, max }
-        , state
-        } _ = do
       
       forceAtlasState' <- R2.useLive' forceAtlasState
       state' <- T.useLive T.unequal state
@@ -98,13 +74,14 @@ edgeConfluenceControlInternalCpt = here.component "edgeConfluenceControlInternal
       pure $ rangeControl {
           caption: "Edge Confluence Weight"
         , sliderProps: {
-            bounds: Range.Closed { min, max }
+            bounds: range
           , epsilon: 0.01
           , height: 5.0
           , initialValue: state'
-          , onChange: \rng -> Debounce.call onChange rng
+          , onChange: \rng -> T.write_ rng state
           , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
           , step: 1.0
+          , throttleInterval: Just defaultThrottleInterval
           , width: 10.0
           }
         }
@@ -127,34 +104,8 @@ edgeWeightControlCpt = here.component "edgeWeightControl" cpt
         , state
         } _ = do
 
-      transition <- R2.useTransition
-      test /\ setTest <- R.useState' 1
-      
-      let onChange' rng = do
-            -- here.log2 "[edgeWeightControl] debounce rng" rng
-            let _ = spy "debounce rng" rng
-            let _ = spy "debounce state" state
-            let _ = spy "transition" transition
-            let _ = spy "test" test
-            -- R2.startTransition transition (\_ -> T.write_ rng state)
-            setTest (_ + 1)
-            T.write_ rng state
-            -- T.modify_ SigmaxTypes.toggleForceAtlasState forceAtlasState
-          onChange = Debounce.debounce onChange' 1000
-
-      -- rd <- RD.useDebouncedCallback (
-      --   \rng -> do
-      --     let _ = spy "debounce rng" rng
-      --     let _ = spy "test" test
-      --     setTest (_ + 1)
-      --     T.write_ rng state
-      --   ) 200
-      
       forceAtlasState' <- R2.useLive' forceAtlasState
       state' <- T.useLive T.unequal state
-      R.useEffect' $ do
-        here.log2 "[edgeWeightControl] state'" state'
-        here.log2 "[edgeWeightControl] test" test
 
       pure $ rangeControl {
           caption: "Edge Weight"
@@ -163,52 +114,13 @@ edgeWeightControlCpt = here.component "edgeWeightControl" cpt
           , initialValue: state'
           , epsilon: (max - min) / 100.0
           , height: 5.0
-          , onChange: \rng -> Debounce.call onChange rng
+          , onChange: \rng -> T.write_ rng state
+          -- , onChange: \rng -> Debounce.call onChange rng
           -- , onChange: \rng -> RD.callDebouncedCallback rd rng
           -- , onChange: onChange'
           , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
           , step: 1.0
-          , width: 10.0
-          }
-        }
-
--- pure $ edgeWeightControlInternal { forceAtlasState
-      --                                  , onChange
-      --                                  , range
-      --                                  , state }
-
-type EdgeWeightControlInternalProps =
-  ( forceAtlasState :: T.Box SigmaxTypes.ForceAtlasState
-  , onChange :: Debounce.Debounce
-  , range :: Range.NumberRange
-  , state :: T.Box Range.NumberRange
-  )
-
-edgeWeightControlInternal :: R2.Leaf EdgeWeightControlInternalProps
-edgeWeightControlInternal = R2.leaf edgeWeightControlInternalCpt
-edgeWeightControlInternalCpt :: R.Component EdgeWeightControlInternalProps
-edgeWeightControlInternalCpt = here.component "edgeWeightControlInternal" cpt
-  where
-    cpt { forceAtlasState
-        , onChange
-        , range: Range.Closed { min, max }
-        , state
-        } _ = do
-      
-      forceAtlasState' <- R2.useLive' forceAtlasState
-      state' <- T.useLive T.unequal state
-      let _ = spy "[edgeWeightControlInteral] onChange" onChange
-
-      pure $ rangeControl {
-          caption: "Edge Weight"
-        , sliderProps: {
-          bounds: Range.Closed { min, max }
-          , initialValue: state'
-          , epsilon: (max - min) / 100.0
-          , height: 5.0
-          , onChange: \rng -> Debounce.call onChange rng
-          , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
-          , step: 1.0
+          , throttleInterval: Just defaultThrottleInterval
           , width: 10.0
           }
         }
@@ -243,6 +155,7 @@ nodeSizeControlCpt = here.component "nodeSizeControl" cpt
           , onChange: \rng -> T.write_ rng state
           , status: SigmaxTypes.forceAtlasComponentStatus forceAtlasState'
           , step: 1.0
+          , throttleInterval: Just defaultThrottleInterval
           , width: 10.0
           }
         }

src/Gargantext/Components/RangeSlider.purs

@@ -21,6 +21,7 @@ import DOM.Simple.Event as Event
 import DOM.Simple.EventListener as EL
 import DOM.Simple (DOMRect)
 import Effect (Effect)
+import Effect.Debouncing as Debounce
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Toestand as T
@@ -51,6 +52,7 @@ type Props =
   , width        :: Number
   , height       :: Number
   , onChange     :: Range.NumberRange -> Effect Unit
+  , throttleInterval :: Maybe Int          -- then Nothing, no throttling is done
   , status       :: ComponentStatus )
 
 data Knob = MinKnob | MaxKnob
@@ -65,6 +67,11 @@ 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 onChangeThrottled = case props.throttleInterval of
+          Nothing -> props.onChange
+          Just ti -> \rng -> Debounce.call throttled rng            
+    
     -- rounding precision (i.e. how many decimal digits are in epsilon)
     let (Range.Closed { min: minR, max: maxR }) = props.initialValue
     let decPrecision num =
@@ -116,7 +123,8 @@ rangeSliderCpt = here.component "rangeSlider" cpt where
                 case reproject drag scalePos props.bounds props.epsilon (R2.domMousePosition event) of
                   Just val -> do
                     setKnob knob value value' val
-                    props.onChange $ knobSetter knob value' val
+                    -- props.onChange $ knobSetter knob value' val
+                    onChangeThrottled $ knobSetter knob value' val
                   Nothing -> destroy unit
           let onMouseUp = EL.callback $ \(_event :: Event.MouseEvent) -> do
                 --props.onChange $ knobSetter knob value val