Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
P
purescript-gargantext
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
134
Issues
134
List
Board
Labels
Milestones
Merge Requests
2
Merge Requests
2
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
gargantext
purescript-gargantext
Commits
abebff62
Verified
Commit
abebff62
authored
May 09, 2024
by
Przemyslaw Kaminski
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[graph] add debouncing/throttling to slider and range controls
parent
f976830d
Pipeline
#6055
canceled with stages
in 9 minutes and 59 seconds
Changes
4
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
63 additions
and
58 deletions
+63
-58
spago.lock
spago.lock
+3
-3
spago.yaml
spago.yaml
+1
-1
SlideButton.purs
...gantext/Components/GraphExplorer/Toolbar/SlideButton.purs
+58
-53
RangeSlider.purs
src/Gargantext/Components/RangeSlider.purs
+1
-1
No files found.
spago.lock
View file @
abebff62
...
...
@@ -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
View file @
abebff62
...
...
@@ -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
View file @
abebff62
...
...
@@ -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: \
newValu
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
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: \
newValu
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
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: \
newValu
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
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
View file @
abebff62
...
...
@@ -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.throttle
WithDebounceAtEnd
props.onChange (fromMaybe 0 props.throttleInterval)
let onChangeThrottled = case props.throttleInterval of
Nothing -> props.onChange
Just ti -> \rng -> Debounce.call throttled rng
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment