boost z-index of grid item when pinned

grafana · Oct 11, 2023 · b5e5a81 · b5e5a81
1 parent 6983af3
commit b5e5a81
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/packages/grafana-data/src/themes/zIndex.ts b/packages/grafana-data/src/themes/zIndex.ts
@@ -1,7 +1,8 @@
 // We need to centralize the zIndex definitions as they work
 // like global values in the browser.
 export const zIndex = {
-  activePanel: 999,
+  activePanel: 998,
+  pinnedGridItem: 999,
   navbarFixed: 1000,
   sidemenu: 1020,
   dropdown: 1030,

diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
@@ -5,14 +5,13 @@ import uPlot from 'uplot';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes/ThemeContext';
+import { useStyles2 } from '../../../themes';
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 
 import { CloseButton } from './CloseButton';
 
 interface TooltipPlugin2Props {
   config: UPlotConfigBuilder;
-  // or via .children() render prop callback?
   render: (
     u: uPlot,
     dataIdxs: Array<number | null>,
@@ -67,7 +66,7 @@ export const TooltipPlugin2 = ({ config, render }: TooltipPlugin2Props) => {
 
   const sizeRef = useRef<TooltipContainerSize>();
 
-  const className = useStyles2(getStyles).tooltipWrapper;
+  const styles = useStyles2(getStyles);
 
   useLayoutEffect(() => {
     sizeRef.current = {
@@ -108,8 +107,9 @@ export const TooltipPlugin2 = ({ config, render }: TooltipPlugin2Props) => {
     let closestSeriesIdx: number | null = null;
 
     let pendingRender = false;
+    let pendingPinned = false;
 
-    const scheduleRender = () => {
+    const scheduleRender = (setPinned = false) => {
       if (!pendingRender) {
         // defer unrender for 100ms to reduce flickering in small gaps
         if (!_isHovering) {
@@ -119,12 +119,21 @@ export const TooltipPlugin2 = ({ config, render }: TooltipPlugin2Props) => {
         }
 
         pendingRender = true;
+
+        if (setPinned) {
+          pendingPinned = true;
+        }
       }
     };
 
     const _render = () => {
       pendingRender = false;
 
+      if (pendingPinned) {
+        domRef.current!.closest<HTMLDivElement>('.react-grid-item')?.classList.toggle(styles.pinnedGridItem, _isPinned);
+        pendingPinned = false;
+      }
+
       let state: TooltipContainerState = {
         style: _style,
         isPinned: _isPinned,
@@ -144,7 +153,7 @@ export const TooltipPlugin2 = ({ config, render }: TooltipPlugin2Props) => {
       // @ts-ignore
       _plot!.cursor._lock = _isPinned;
 
-      scheduleRender();
+      scheduleRender(true);
     };
 
     config.addHook('init', (u) => {
@@ -156,7 +165,7 @@ export const TooltipPlugin2 = ({ config, render }: TooltipPlugin2Props) => {
           if (e.target === u.over) {
             _isPinned = !_isPinned;
             _style = { pointerEvents: _isPinned ? 'all' : 'none' };
-            scheduleRender();
+            scheduleRender(true);
           }
 
           // @ts-ignore
@@ -268,7 +277,7 @@ export const TooltipPlugin2 = ({ config, render }: TooltipPlugin2Props) => {
 
   if (plot && isHovering) {
     return createPortal(
-      <div className={className} style={style} ref={domRef}>
+      <div className={styles.tooltipWrapper} style={style} ref={domRef}>
         {isPinned && <CloseButton onClick={dismiss} style={{ top: '16px' }} />}
         {contents}
       </div>,
@@ -291,4 +300,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     background: theme.colors.background.secondary,
     boxShadow: `0 4px 8px ${theme.colors.background.primary}`,
   }),
+  pinnedGridItem: css({
+    zIndex: `${theme.zIndex.pinnedGridItem} !important`,
+  })
 });
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
@@ -163,7 +163,7 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
 // -------------------------
 // Used for a bird's eye view of components dependent on the z-axis
 // Try to avoid customizing these :)
-$zindex-active-panel: 999;
+$zindex-active-panel: 998;
 $zindex-dropdown: 1030;
 $zindex-navbar-fixed: 1000;
 $zindex-sidemenu: 1020;