IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-19 13:03:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

TimeSeries: Improve keyboard focus and fix spacebar override (#86848)

Browse Source 
* Make GrpahNG focusable

* Move to VizLayout instead

* Update uPlot plugins for better keyboard support

* Remove unrelated changes

* different fix

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
This commit is contained in:
Tobias Skarhed 2024-05-10 14:07:12 +02:00 committed by GitHub
parent 459673b539
commit fa95b41715
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/components/uPlot/plugins/KeyboardPlugin.tsx
View File

@ -13,7 +13,7 @@ const SHIFT_MULTIPLIER = 2 as const;
const KNOWN_KEYS = new Set(['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Shift', ' ']);
const initHook = (u: uPlot) => {
let parentWithFocus: HTMLElement | null = u.root.closest('[tabindex]');
let parentWithFocus: HTMLElement | null = u.root;
let pressedKeys = new Set<string>();
let dragStartX: number | null = null;
let keysLastHandledAt: number | null = null;
@ -21,6 +21,8 @@ const initHook = (u: uPlot) => {
if (!parentWithFocus) {
return;
}
// Make Graph area focusable. Setting this in Viz* components will make focus available on panels that do not yet have keyboard support
parentWithFocus.tabIndex = 0;
const moveCursor = (dx: number, dy: number) => {
const { cursor } = u;

7
packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
View File

@ -545,7 +545,12 @@ export const TooltipPlugin2 = ({
// if not viaSync, re-dispatch real event
if (event != null) {
plot!.over.dispatchEvent(event);
// this works around the fact that uPlot does not unset cursor.event (for perf reasons)
// so if the last real mouse event was mouseleave and you manually trigger u.setCursor()
// it would end up re-dispatching mouseleave
const isStaleEvent = performance.now() - event.timeStamp > 16;
!isStaleEvent && plot!.over.dispatchEvent(event);
} else {
plot!.setCursor(
{