github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Lens] [TSVB] reduce syncronized cursor debounce time (#183244)

Browse source 
## Summary

This quick fix reduces the debounce time to 8 milliseconds (from 40
millis) for synchronized cursors in dashboards.
This results in snappier synchronized cursors in dashboard with an
improved perceived performance.

This change can be done safely due to the improvements in the chart
Tooltip implementation in
https://github.com/elastic/elastic-charts/pull/2310.

Fix [#176609](https://github.com/elastic/kibana/issues/176609)


599d4157-3f75-41a9-b838-4eb40938dcaa

I've tested with 4x and 6x CPU slowdown and I don't see any major
differences between the current main (with 40ms debounce) and this
version with small debounce: both have similar lag.

To test this, create a dashboard with multiple TSVB charts and other
Timeseries Lens charts and move the cursor across them. The synchronized
cursor should move smoothly across each chart

---------

Co-authored-by: Nick Partridge <nicholas.partridge@elastic.co>
This commit is contained in:
Marco Vettorello 2024-05-16 09:52:43 +02:00 • committed by GitHub
parent 197f56cf8a
commit 5cfb994571
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 13 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap generated
View file

@ -1142,6 +1142,7 @@ exports[`XYChart component it renders area 1`] = `
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}
@ -2691,6 +2692,7 @@ exports[`XYChart component it renders bar 1`] = `
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}
@ -4240,6 +4242,7 @@ exports[`XYChart component it renders horizontal bar 1`] = `
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
pointerUpdateDebounce={0}
rotation={90}
showLegend={false}
showLegendExtra={false}
@ -5789,6 +5792,7 @@ exports[`XYChart component it renders line 1`] = `
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}
@ -7338,6 +7342,7 @@ exports[`XYChart component it renders stacked area 1`] = `
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}
@ -8887,6 +8892,7 @@ exports[`XYChart component it renders stacked bar 1`] = `
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}
@ -10436,6 +10442,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
pointerUpdateDebounce={0}
rotation={90}
showLegend={false}
showLegendExtra={false}
@ -12015,6 +12022,7 @@ exports[`XYChart component split chart should render split chart if both, splitR
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}
@ -13802,6 +13810,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}
@ -15582,6 +15591,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
onElementClick={[Function]}
onPointerUpdate={[Function]}
onRenderChange={[Function]}
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}

1
src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx
View file

@ -812,6 +812,7 @@ export function XYChart({
/>
}
onRenderChange={onRenderChange}
pointerUpdateDebounce={0} // use the `handleCursorUpdate` debounce time
onPointerUpdate={syncCursor ? handleCursorUpdate : undefined}
externalPointerEvents={{
tooltip: { visible: syncTooltips, placement: Placement.Right },

4
src/plugins/charts/public/services/active_cursor/use_active_cursor.ts
View file

@ -18,7 +18,7 @@ import { parseSyncOptions } from './active_cursor_utils';
import type { ActiveCursor } from './active_cursor';
import type { ActiveCursorSyncOption } from './types';
const DEFAULT_DEBOUNCE_TIME = 40;
const DEFAULT_DEBOUNCE_TIME_MS = 8; // don't update more than once per frame but try to avoid skipping frames
export const useActiveCursor = (
activeCursor: ActiveCursor,
@ -40,7 +40,7 @@ export const useActiveCursor = (
useEffect(() => {
const cursorSubscription = activeCursor.activeCursor$
?.pipe(
debounceTime(syncOptions.debounce ?? DEFAULT_DEBOUNCE_TIME, animationFrameScheduler),
debounceTime(syncOptions.debounce ?? DEFAULT_DEBOUNCE_TIME_MS, animationFrameScheduler),
filter((payload) => {
if (payload.isDateHistogram && isDateHistogram) {
return true;