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

* 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>

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

@@ -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;

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

@@ -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(
           {