[Controls] Debounce time slider selections #201885

paulinashakirova · 2024-11-26T23:31:31Z

Summary

This PR fixes the [Controls] Debounce time slider selections issue.

Previously when the user was dragging the time slider, the dashboard would be updating constantly causing lagging on more complex dashboards. This PR adds a local state that will hold the updating values while the user is dragging, and updates the dashboards once the user stops dragging with a delay of 300.

Screen.Recording.2024-11-27.at.11.21.41.mov

elasticmachine · 2024-11-27T10:38:07Z

Pinging @elastic/kibana-presentation (Team:Presentation)

src/plugins/controls/public/controls/timeslider_control/get_timeslider_control_factory.tsx

paulinashakirova · 2024-12-18T17:05:19Z

/ci

...ugins/controls/public/controls/timeslider_control/components/time_slider_popover_content.tsx

Heenawter · 2024-12-18T20:09:06Z

...ugins/controls/public/controls/timeslider_control/components/time_slider_popover_content.tsx

+  const rangeInput = isAnchored ? (
    <TimeSliderAnchoredRange
-      value={props.value}
-      onChange={props.onChange}
-      stepSize={props.stepSize}
-      ticks={props.ticks}
-      timeRangeMin={props.timeRangeMin}
-      timeRangeMax={props.timeRangeMax}
-      compressed={props.compressed}
+      value={[displayedValue[0] || timeRangeMin, displayedValue[1] || timeRangeMax]}
+      onChange={(newValue) => {
+        setDisplayedValue(newValue as Timeslice);
+        debouncedOnChange(newValue);
+      }}
+      stepSize={stepSize}
+      ticks={ticks}
+      timeRangeMin={timeRangeMin}
+      timeRangeMax={timeRangeMax}
+      compressed={compressed}
    />
  ) : (
    <TimeSliderSlidingWindowRange
-      value={props.value}
-      onChange={props.onChange}
-      stepSize={props.stepSize}
-      ticks={props.ticks}
-      timeRangeMin={props.timeRangeMin}
-      timeRangeMax={props.timeRangeMax}
-      compressed={props.compressed}
+      value={[displayedValue[0] || timeRangeMin, displayedValue[1] || timeRangeMax]}
+      onChange={(newValue) => {
+        setDisplayedValue(newValue as Timeslice);
+        debouncedOnChange(newValue);
+      }}
+      stepSize={stepSize}
+      ticks={ticks}
+      timeRangeMin={timeRangeMin}
+      timeRangeMax={timeRangeMax}
+      compressed={compressed}


We should definitely refactor this at some point - there is no reason to have these as two separate components 🤦 Not related to this PR, though - this is just super old code that hasn't been cleaned up in awhile.

src/plugins/controls/public/controls/timeslider_control/get_timeslider_control_factory.tsx

...ugins/controls/public/controls/timeslider_control/components/time_slider_popover_content.tsx

Co-authored-by: Hannah Mudge <[email protected]>

…-fix'

elasticmachine · 2024-12-19T12:31:48Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: f9092ba

Failed CI Steps

Test Failures

[job] [logs] FTR Configs #83 / serverless search UI index details page - search solution developer search index details page API key details should show api key
[job] [logs] Jest Tests #11 / StepDefinePackagePolicy default API response should display vars coming from package policy

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`controls`	494.7KB	494.8KB	+157.0B

History

💚 Build #261969 succeeded eb70cbb
💔 Build #261533 failed 0a17687
💛 Build #260724 was flaky 983cf27
💚 Build #258148 succeeded 464af43
💚 Build #255380 succeeded d3d7d7d
💔 Build #254956 failed fc16cfb

cc @paulinashakirova

Heenawter

Tested locally + code review - thanks so much for tackling this! It works great 🎉

kibanamachine · 2024-12-19T16:33:35Z

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/12416841137

## Summary This PR fixes the [[Controls] Debounce time slider selections](elastic#193227) issue. Previously when the user was dragging the time slider, the dashboard would be updating constantly causing lagging on more complex dashboards. This PR adds a local state that will hold the updating values while the user is dragging, and updates the dashboards once the user stops dragging with a delay of 300. https://github.com/user-attachments/assets/45bca92e-f92a-4c1f-8417-a0a0818c7415 --------- Co-authored-by: Hannah Mudge <[email protected]> Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit 87d15ba)

kibanamachine · 2024-12-19T16:38:57Z

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

## Summary This PR fixes the [[Controls] Debounce time slider selections](elastic#193227) issue. Previously when the user was dragging the time slider, the dashboard would be updating constantly causing lagging on more complex dashboards. This PR adds a local state that will hold the updating values while the user is dragging, and updates the dashboards once the user stops dragging with a delay of 300. https://github.com/user-attachments/assets/45bca92e-f92a-4c1f-8417-a0a0818c7415 --------- Co-authored-by: Hannah Mudge <[email protected]> Co-authored-by: kibanamachine <[email protected]>

# Backport This will backport the following commits from `main` to `8.x`: - [[Controls] Debounce time slider selections (#201885)](#201885)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Paulina Shakirova <[email protected]>

paulinashakirova self-assigned this Nov 26, 2024

paulinashakirova marked this pull request as ready for review November 27, 2024 10:33

paulinashakirova requested a review from a team as a code owner November 27, 2024 10:34

paulinashakirova added backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas papercut Small "burr" in the product that we should fix. labels Nov 27, 2024

paulinashakirova added the release_note:fix label Nov 27, 2024

paulinashakirova marked this pull request as draft November 27, 2024 13:01

paulinashakirova force-pushed the debounce-timeslider-range-control branch from aef5b6c to 924d07d Compare November 27, 2024 13:14

paulinashakirova marked this pull request as ready for review November 28, 2024 15:13

Heenawter self-requested a review November 28, 2024 15:16

Heenawter reviewed Nov 29, 2024

View reviewed changes

src/plugins/controls/public/controls/timeslider_control/get_timeslider_control_factory.tsx Outdated Show resolved Hide resolved

paulinashakirova force-pushed the debounce-timeslider-range-control branch from d3d7d7d to 9ebee93 Compare December 9, 2024 10:44

paulinashakirova requested a review from Heenawter December 9, 2024 14:14

paulinashakirova added 7 commits December 16, 2024 11:24

[Controls] Debounce time slider selections

9f12519

variant dashboard update on mouse release

113c144

revert to keep the first solution without mouseup

e3153c9

fix to use value in debounce

5133de5

fix error based on broken functional test

22cb81f

use useEffect instead of BehavSubj

dd4a5bb

add onMouseUp to slider content

983cf27

paulinashakirova force-pushed the debounce-timeslider-range-control branch from 464af43 to 983cf27 Compare December 16, 2024 10:25

Heenawter reviewed Dec 16, 2024

View reviewed changes

src/plugins/controls/public/controls/timeslider_control/get_timeslider_control_factory.tsx Outdated Show resolved Hide resolved

src/plugins/controls/public/controls/timeslider_control/get_timeslider_control_factory.tsx Outdated Show resolved Hide resolved

paulinashakirova added 2 commits December 17, 2024 19:27

refactor to use localTimeslice inside content component

0a17687

Merge branch 'main' into debounce-timeslider-range-control

eb70cbb

paulinashakirova requested a review from Heenawter December 18, 2024 20:09

Heenawter reviewed Dec 18, 2024

View reviewed changes

Apply suggestions from code review

e73c2a1

Co-authored-by: Hannah Mudge <[email protected]>

paulinashakirova and others added 2 commits December 19, 2024 10:57

Merge branch 'main' into debounce-timeslider-range-control

ede23c9

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

f9092ba

…-fix'

Heenawter approved these changes Dec 19, 2024

View reviewed changes

paulinashakirova merged commit 87d15ba into main Dec 19, 2024
8 checks passed

paulinashakirova deleted the debounce-timeslider-range-control branch December 19, 2024 16:33

kibanamachine added the v9.0.0 label Dec 19, 2024

kibanamachine mentioned this pull request Dec 19, 2024

[8.x] [Controls] Debounce time slider selections (#201885) #204979

Merged

kibanamachine added the v8.18.0 label Dec 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Controls] Debounce time slider selections #201885

[Controls] Debounce time slider selections #201885

paulinashakirova commented Nov 26, 2024 •

edited by kibanamachine

Loading

elasticmachine commented Nov 27, 2024

paulinashakirova commented Dec 18, 2024

Heenawter Dec 18, 2024

elasticmachine commented Dec 19, 2024

Heenawter left a comment

kibanamachine commented Dec 19, 2024

kibanamachine commented Dec 19, 2024

[Controls] Debounce time slider selections #201885

[Controls] Debounce time slider selections #201885

Conversation

paulinashakirova commented Nov 26, 2024 • edited by kibanamachine Loading

Summary

elasticmachine commented Nov 27, 2024

paulinashakirova commented Dec 18, 2024

Heenawter Dec 18, 2024

Choose a reason for hiding this comment

elasticmachine commented Dec 19, 2024

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Async chunks

History

Heenawter left a comment

Choose a reason for hiding this comment

kibanamachine commented Dec 19, 2024

kibanamachine commented Dec 19, 2024

💚 All backports created successfully

Questions ?

paulinashakirova commented Nov 26, 2024 •

edited by kibanamachine

Loading