fix: heatmap anchor

Author: astandrik

src/containers/Heatmap/Heatmap.scss

@@ -51,6 +51,8 @@
     }
 
     &__items {
+        position: relative;
+
         overflow: auto;
     }
     &__canvas-container {
@@ -59,6 +61,15 @@
         cursor: pointer;
     }
 
+    &__tooltip-anchor {
+        position: absolute;
+
+        width: 1px;
+        height: 1px;
+
+        pointer-events: none;
+    }
+
     &__filters {
         display: flex;
         align-items: center;

src/containers/Heatmap/Heatmap.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Checkbox, Popup, Select, useVirtualElementRef} from '@gravity-ui/uikit';
+import {Checkbox, Popup, Select} from '@gravity-ui/uikit';
 
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {Loader} from '../../components/Loader';
@@ -37,10 +37,7 @@ export const Heatmap = ({path, database, databaseFullPath}: HeatmapProps) => {
         position: {left: number; top: number};
     } | null>(null);
     const [isTabletTooltipHovered, setIsTabletTooltipHovered] = React.useState(false);
-
-    const tabletTooltipAnchorRef = useVirtualElementRef({
-        rect: tabletTooltip?.position,
-    });
+    const tabletTooltipAnchorRef = React.useRef<HTMLDivElement | null>(null);
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
@@ -133,6 +130,16 @@ export const Heatmap = ({path, database, databaseFullPath}: HeatmapProps) => {
 
         return (
             <div ref={itemsContainer} className={b('items')}>
+                {tabletTooltip ? (
+                    <div
+                        ref={tabletTooltipAnchorRef}
+                        className={b('tooltip-anchor')}
+                        style={{
+                            left: tabletTooltip.position.left,
+                            top: tabletTooltip.position.top,
+                        }}
+                    />
+                ) : null}
                 <HeatmapCanvas
                     tablets={sortedTablets}
                     parentRef={itemsContainer}
@@ -158,7 +165,7 @@ export const Heatmap = ({path, database, databaseFullPath}: HeatmapProps) => {
                         open
                         hasArrow
                         placement={['top', 'bottom', 'left', 'right']}
-                        anchorRef={tabletTooltipAnchorRef}
+                        anchorElement={tabletTooltipAnchorRef.current}
                         onOutsideClick={handleHideTabletTooltip}
                     >
                         <div

src/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.tsx

@@ -182,14 +182,17 @@ export const HeatmapCanvas = (props: HeatmapCanvasProps) => {
 
         if (tablet) {
             const {columnsCount} = dimensions;
+            if (!columnsCount) {
+                return;
+            }
             const colIndex = tabletIndex % columnsCount;
             const rowIndex = Math.floor(tabletIndex / columnsCount);
 
             const rectX = colIndex * (TABLET_SIZE + TABLET_PADDING);
             const rectY = rowIndex * (TABLET_SIZE + TABLET_PADDING);
 
-            const left = getOffsetLeft() - parent.scrollLeft + rectX + TABLET_SIZE / 2;
-            const top = getOffsetTop() - parent.scrollTop + rectY + TABLET_SIZE / 2;
+            const left = rectX + TABLET_SIZE / 2;
+            const top = rectY + TABLET_SIZE / 2;
 
             onShowTabletTooltip(tablet, {left, top});
         } else {