ensure panel with pinned menu is higher z-index than another hovered …

…panel
grafana · Oct 11, 2023 · 61c449f · 61c449f
1 parent ca6781c
commit 61c449f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
@@ -12,7 +12,6 @@ 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('context-menu-open', _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: '15px' }} />}
         {contents}
       </div>,

diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss
@@ -87,7 +87,7 @@
 }
 
 // Hack to prevent panel overlap during drag/hover (due to descending z-index assignment)
-.react-grid-item {
+.react-grid-item:not(.context-menu-open) {
   &:hover,
   &:active,
   &:focus {
@@ -96,10 +96,11 @@
 }
 
 // Hack for preventing panel menu overlapping.
+.react-grid-item.context-menu-open,
 .react-grid-item.resizing.panel,
 .react-grid-item.panel.dropdown-menu-open,
 .react-grid-item.react-draggable-dragging.panel {
-  z-index: $zindex-dropdown;
+  z-index: $zindex-dropdown !important;
 }
 
 // Disable animation on initial rendering and enable it when component has been mounted.