@gemx-dev/heatmap-react 3.5.58 → 3.5.60

package/dist/esm/index.js

@@ -57,13 +57,19 @@ const BACKDROP_CONFIG = {
      * Default cutout expansion (pixels)
      * Adds padding around the active element cutout
      */
-    CUTOUT_EXPANSION: 2,
+    CUTOUT_EXPANSION: 0,
     /**
      * Z-index for backdrop canvas
      */
     Z_INDEX: 999,
 };
 
+const ELM_CALLOUT_CONFIG = {
+    MOUSE_POSITION: true,
+    SHOW_RANK_BADGE: false,
+    HIDE_OUTLINE_ON_CLICKED: true,
+};
+
 // Portal mode: Full permissions for proper functionality
 // Need allow-forms for add to cart, allow-popups for some features
 const HEATMAP_IFRAME = {
@@ -1351,6 +1357,25 @@ function isElementInViewport(elementRect, visualRef, scale) {
     // Element is visible if it overlaps with the viewport
     return elementBottom > viewportTop && elementTop < viewportBottom;
 }
+function isElementRectInViewport(elementRect, visualRect, scale) {
+    if (!elementRect)
+        return false;
+    if (!visualRect)
+        return false;
+    // Element position relative to the document (or container's content)
+    const elementTop = elementRect.top * scale;
+    console.log(`🚀 🐥 ~ isElementRectInViewport ~ scale:`, scale);
+    console.log(`🚀 🐥 ~ isElementRectInViewport ~ elementRect.top:`, elementRect.top);
+    const elementBottom = (elementRect.top + elementRect.height) * scale;
+    // Current scroll position
+    const scrollTop = (visualRect?.scrollTop || 0) - 8;
+    console.log(`🚀 🐥 ~ isElementRectInViewport ~ visualRect?.scrollTop:`, visualRect?.scrollTop);
+    const viewportHeight = visualRect.height;
+    // Visible viewport range in the scrollable content
+    const viewportTop = scrollTop;
+    const viewportBottom = scrollTop + viewportHeight;
+    return elementTop > viewportTop && elementBottom < viewportBottom;
+}
 
 const CLARITY_HEATMAP_CANVAS_ID = 'clarity-heatmap-canvas';
 const HEATMAP_ELEMENT_ATTRIBUTE = 'data-clarity-hashalpha';
@@ -2211,6 +2236,25 @@ const buildElementInfo = (hash, rect, heatmapInfo) => {
         ...rect,
     };
 };
+// GETTERS
+const getScaledCalloutRect = (_element, _widthScale) => {
+    return {
+        width: 230,
+        height: 263,
+    };
+};
+const getStyleFromCandidate = (candidate, widthScale) => {
+    const { horizontalAlign, placement, top, left } = candidate;
+    const yTransformAlign = placement === 'top' ? 'bottom' : 'top';
+    const xTransformAlign = horizontalAlign === 'left' ? 'left' : 'right';
+    return {
+        top,
+        left,
+        zIndex: Z_INDEX.CALLOUT,
+        transform: `scale(${1 / widthScale})`, // TODO: remove this when we have a better way to handle the scale
+        transformOrigin: `${xTransformAlign} ${yTransformAlign}`,
+    };
+};
 
 function calculateRankPosition(rect, widthScale) {
     const top = rect.top <= 18 ? rect.top + 3 : rect.top - 18;
@@ -2222,11 +2266,11 @@ function calculateRankPosition(rect, widthScale) {
     };
 }
 
-const getViewportDimensions = (containerElm, scale) => {
+const getContainerViewport = (containerElm, _scale) => {
     if (containerElm) {
         const containerRect = containerElm.getBoundingClientRect();
-        const width = scale ? containerRect.width / scale : containerRect.width;
-        const height = scale ? containerRect.height / scale : containerRect.height;
+        const width = containerRect.width;
+        const height = containerRect.width;
         return { width, height };
     }
     return {
@@ -2234,11 +2278,29 @@ const getViewportDimensions = (containerElm, scale) => {
         height: window.innerHeight,
     };
 };
+const getVisualDomViewport = (visualDomElm, scale = 1) => {
+    if (visualDomElm) {
+        const rect = visualDomElm.getBoundingClientRect();
+        return {
+            width: rect.width,
+            height: rect.height,
+            scrollTop: visualDomElm.scrollTop,
+            scrollLeft: visualDomElm.scrollLeft,
+        };
+    }
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        scrollTop: 0,
+        scrollLeft: 0,
+    };
+};
 const getElementDimensions = (options) => {
     const { targetElm, calloutElm, scale, containerElm } = options;
     const targetRect = targetElm.getBoundingClientRect();
     const calloutRect = calloutElm.getBoundingClientRect();
     const containerRect = containerElm.getBoundingClientRect();
+    const scaledCalloutRect = getScaledCalloutRect();
     if (scale && containerRect) {
         const relativeTop = (targetRect.top - containerRect.top) / scale;
         const relativeLeft = (targetRect.left - containerRect.left) / scale;
@@ -2254,21 +2316,13 @@ const getElementDimensions = (options) => {
                 width: scaledWidth,
                 height: scaledHeight,
             },
-            calloutRect: {
-                ...calloutRect,
-                width: calloutRect.width / scale,
-                height: calloutRect.height / scale,
-            },
+            calloutRect: scaledCalloutRect,
         };
     }
     if (scale) {
         return {
             targetRect,
-            calloutRect: {
-                ...calloutRect,
-                width: calloutRect.width / scale,
-                height: calloutRect.height / scale,
-            },
+            calloutRect: scaledCalloutRect,
         };
     }
     return { targetRect, calloutRect };
@@ -2334,36 +2388,50 @@ const isLeftPositionValid = (leftPos, options) => {
     const { width: viewportWidth } = viewport;
     const absLeft = rectDimensions.targetAbsoluteRect?.left ?? 0;
     const relLeftPos = absLeft + leftPos - offset.x;
-    const maxViewportWidth = viewportWidth - padding + EPSILON;
+    const calloutWidthScaled = calloutWidth / options.widthScale;
+    const maxViewportWidth = viewportWidth + EPSILON;
     const isValidLeft = relLeftPos >= padding - EPSILON;
-    const isRectCalloutShowValid = relLeftPos + calloutWidth <= maxViewportWidth;
+    const isRectCalloutShowValid = relLeftPos + calloutWidthScaled - EPSILON <= maxViewportWidth / options.widthScale;
     return isValidLeft && isRectCalloutShowValid;
 };
 const isRightPositionValid = (leftPos, options) => {
-    const { rectDimensions, viewport, padding } = options;
+    const { rectDimensions, viewport } = options;
     const { width: calloutWidth } = rectDimensions.calloutRect;
     const { width: viewportWidth } = viewport;
-    const maxViewportWidth = viewportWidth - padding + EPSILON;
-    const isValidRight = leftPos - calloutWidth - padding - EPSILON <= maxViewportWidth;
+    const calloutWidthScaled = calloutWidth / options.widthScale;
+    const absLeft = rectDimensions.targetAbsoluteRect?.left ?? 0;
+    const relLeftPos = absLeft + leftPos;
+    const maxViewportWidth = viewportWidth + EPSILON;
+    const isValidRight = relLeftPos - calloutWidthScaled - EPSILON <= maxViewportWidth / options.widthScale;
     return isValidRight;
 };
 const isVerticalPositionValid = (placement, options) => {
     const { rectDimensions, viewport, padding, arrowSize } = options;
-    const { targetRect, calloutRect } = rectDimensions;
+    const { targetRect, targetAbsoluteRect, calloutRect } = rectDimensions;
     const { height: viewportHeight } = viewport;
     const { height: calloutHeight } = calloutRect;
-    return placement === 'top'
-        ? targetRect.top - calloutHeight - padding - arrowSize > -EPSILON
-        : targetRect.bottom + calloutHeight + padding + arrowSize < viewportHeight + EPSILON;
+    const relativeTop = (targetAbsoluteRect?.top ?? 0) + targetRect.top;
+    const calloutHeightScaled = calloutHeight / options.widthScale;
+    switch (placement) {
+        case 'top':
+            return relativeTop - calloutHeightScaled - padding - arrowSize > -EPSILON;
+        case 'bottom':
+            return targetRect.bottom + calloutHeight + padding + arrowSize < viewportHeight + EPSILON;
+    }
 };
 const isHorizontalPositionValid = (placement, options) => {
     const { rectDimensions, viewport, padding, arrowSize } = options;
-    const { targetRect, calloutRect } = rectDimensions;
+    const { targetRect, targetAbsoluteRect, calloutRect } = rectDimensions;
     const { width: viewportWidth } = viewport;
     const { width: calloutWidth } = calloutRect;
-    return placement === 'right'
-        ? targetRect.right + calloutWidth + padding + arrowSize < viewportWidth + EPSILON
-        : targetRect.left - calloutWidth - padding - arrowSize > -EPSILON;
+    const relativeLeft = (targetAbsoluteRect?.left ?? 0) + targetRect.left;
+    const relativeRight = relativeLeft + targetRect.width;
+    switch (placement) {
+        case 'right':
+            return relativeRight + calloutWidth + padding + arrowSize < viewportWidth + EPSILON;
+        case 'left':
+            return relativeLeft - calloutWidth - padding - arrowSize > -EPSILON;
+    }
 };
 
 const generateVerticalPositionCandidates = (options) => {
@@ -2403,12 +2471,24 @@ const generateHorizontalPositionCandidates = (options) => {
     });
 };
 const generateAllCandidates = (options) => {
+    const { visualViewport, rectDimensions } = options;
     const verticalCandidates = generateVerticalPositionCandidates(options);
     const horizontalCandidates = generateHorizontalPositionCandidates(options);
-    return [...verticalCandidates, ...horizontalCandidates];
+    const allCandidates = [...verticalCandidates, ...horizontalCandidates];
+    // Thêm isVisibleInViewport cho mỗi candidate
+    return allCandidates.map((candidate) => ({
+        ...candidate,
+        isVisibleInViewport: isElementRectInViewport({
+            top: candidate.top,
+            left: candidate.left,
+            width: rectDimensions.calloutRect.width,
+            height: rectDimensions.calloutRect.height,
+        }, visualViewport || { scrollTop: 0, scrollLeft: 0, width: 0, height: 0 }, options.widthScale),
+    }));
 };
 
 const selectBestPosition = (candidates) => {
+    // return candidates.find((p) => p.valid && p.isVisibleInViewport) || candidates[0];
     return candidates.find((p) => p.valid) || candidates[0];
 };
 const constrainToViewport = (candidate, options) => {
@@ -2493,17 +2573,20 @@ const calcCalloutPosition = (options) => {
         const containerElm = isAbsolute ? calloutElm.parentElement : visualRef?.current;
         if (!containerElm)
             return;
-        const viewport = getViewportDimensions(visualRef?.current, scale);
+        const viewport = getContainerViewport(containerElm);
+        const visualViewport = getVisualDomViewport(visualRef?.current, scale);
         const rectDimensions = getElementDimensions({ targetElm, calloutElm, scale, containerElm });
         const containerRect = createAdjustedContainerRect({ containerElm, scale, isAbsolute, visualRef });
         const options = {
             rectDimensions,
             viewport,
+            visualViewport,
             alignment,
             offset,
             padding,
             arrowSize,
             containerRect,
+            widthScale,
         };
         const candidates = generateAllCandidates(options);
         const candidate = selectBestPosition(candidates);
@@ -2520,7 +2603,7 @@ const calcCalloutPosition = (options) => {
     };
 };
 const calcCalloutPositionAbsolute = (props) => {
-    const { widthScale, calloutElm, containerElm, element, onChange } = props;
+    const { widthScale, calloutElm, containerElm, element, setPosition } = props;
     const mousePosition = element?.mousePosition;
     if (!mousePosition)
         return;
@@ -2529,14 +2612,7 @@ const calcCalloutPositionAbsolute = (props) => {
     const rawCalloutRect = calloutElm.getBoundingClientRect();
     if (rawCalloutRect.width === 0 || rawCalloutRect.height === 0)
         return;
-    const calloutRect = {
-        ...rawCalloutRect,
-        width: rawCalloutRect.width / widthScale,
-        height: rawCalloutRect.height / widthScale,
-    };
     const containerRect = containerElm.getBoundingClientRect();
-    const containerWidth = containerRect.width / widthScale;
-    const containerHeight = containerRect.height / widthScale;
     const mouseX = mousePosition.x;
     const mouseY = mousePosition.y;
     const targetRect = {
@@ -2552,16 +2628,13 @@ const calcCalloutPositionAbsolute = (props) => {
     };
     const rectDimensions = {
         targetRect,
-        calloutRect,
+        calloutRect: getScaledCalloutRect(),
         targetAbsoluteRect: {
             top: element.top,
             left: element.left,
         },
     };
-    const viewport = {
-        width: containerWidth,
-        height: containerHeight,
-    };
+    const viewport = getContainerViewport(containerElm);
     const options = {
         rectDimensions,
         viewport,
@@ -2570,16 +2643,19 @@ const calcCalloutPositionAbsolute = (props) => {
         padding,
         arrowSize,
         containerRect,
+        widthScale,
     };
     const candidates = generateAllCandidates(options);
     const bestPosition = selectBestPosition(candidates);
-    const style = {
-        position: 'absolute',
+    const finalPosition = {
         top: bestPosition.top,
         left: bestPosition.left,
-        zIndex: 1000,
+        placement: bestPosition.placement,
+        horizontalAlign: bestPosition.horizontalAlign,
     };
-    onChange(style);
+    setPosition(finalPosition);
+    // const styleBestPosition = getStyleFromCandidate(bestPosition, widthScale);
+    // onChange(styleBestPosition);
 };
 
 /**
@@ -4395,8 +4471,8 @@ const useElementCalloutVisible = ({ visualRef, getRect, positionMode }) => {
 };
 
 const useHeatmapEffects = ({ isVisible }) => {
-    useHeatmapClick((s) => s.selectedElement);
-    useHeatmapClick((s) => s.setShouldShowCallout);
+    // const selectedElement = useHeatmapClick((s) => s.selectedElement);
+    // const setShouldShowCallout = useHeatmapClick((s) => s.setShouldShowCallout);
     const resetAll = () => {
         // setShouldShowCallout(false);
     };
@@ -4621,6 +4697,8 @@ const useHoveredElement = ({ iframeRef, getRect }) => {
     };
 };
 const getElementMousePosition = (event, widthScale) => {
+    if (!ELM_CALLOUT_CONFIG.MOUSE_POSITION)
+        return;
     const containerElm = event.target;
     if (!containerElm)
         return;
@@ -6567,7 +6645,7 @@ const useObserveIframeHeight = (props) => {
 };
 
 // Max zoom ratio constant: 100% = fit to width
-const MAX_ZOOM_RATIO = 100;
+const MAX_ZOOM_RATIO = 200;
 const useScaleCalculation = (props) => {
     const widthScale = useHeatmapViz((s) => s.widthScale);
     const zoomRatio = useHeatmapViz((s) => s.zoomRatio);
@@ -7745,7 +7823,7 @@ VizAreaClick.displayName = 'VizAreaClick';
 const RankBadgeComponent = ({ index, hash, elementRect, widthScale, show = true, clickOnElement, }) => {
     const clickedHash = useHeatmapClick((s) => s.selectedElement?.hash);
     const isShow = !!show && clickedHash !== hash;
-    if (!isShow)
+    if (!isShow || !ELM_CALLOUT_CONFIG.SHOW_RANK_BADGE)
         return null;
     const style = calculateRankPosition(elementRect, widthScale);
     return (jsx("div", { className: "gx-hm-rank-badge", style: style, onClick: clickOnElement, children: index }));
@@ -7778,6 +7856,7 @@ const DEFAULT_POSITION = {
 };
 const ElementCallout = (props) => {
     const viewId = useViewIdContext();
+    const widthScale = useHeatmapViz((s) => s.widthScale);
     const CompElementCallout = useHeatmapControlStore((state) => state.controls.ElementCallout);
     const calloutRef = useRef(null);
     const element = props.element;
@@ -7790,9 +7869,7 @@ const ElementCallout = (props) => {
         return null;
     const calloutContent = (jsx("div", { ref: calloutRef, className: className, style: {
             position: positionMode,
-            top: position.top,
-            left: position.left,
-            zIndex: Z_INDEX.CALLOUT,
+            ...getStyleFromCandidate(position, widthScale),
         }, "aria-live": "assertive", role: "tooltip", children: CompElementCallout && jsx(CompElementCallout, { elementHash: element.hash }) }));
     if (!document.getElementById(portalContainerId))
         return null;
@@ -7820,10 +7897,17 @@ const useAnchorPosition = (calloutRef, props) => {
         const calloutElm = calloutRef.current;
         if (!targetElm || !calloutElm)
             return;
+        const onSetPosition = (position) => {
+            setPosition((prev) => {
+                if (prev.top === position.top && prev.left === position.left)
+                    return prev;
+                return position;
+            });
+        };
         const positionFn = calcCalloutPosition({
             targetElm,
             calloutElm,
-            setPosition,
+            setPosition: onSetPosition,
             alignment,
             positionMode,
             visualRef,
@@ -7974,7 +8058,18 @@ const ElementCalloutOverlay = (props) => {
     const widthScale = useHeatmapViz((s) => s.widthScale);
     const CompElementCallout = useHeatmapControlStore((state) => state.controls.ElementCallout);
     const calloutRef = useRef(null);
-    const [calloutStyle, setCalloutStyle] = useState(undefined);
+    const [position, setPosition] = useState({
+        top: 0,
+        left: 0,
+        placement: 'bottom',
+        horizontalAlign: 'left',
+    });
+    const calloutStyle = useMemo(() => {
+        return {
+            ...getStyleFromCandidate(position, widthScale),
+            position: 'absolute',
+        };
+    }, [position, widthScale]);
     useEffect(() => {
         const calloutElm = calloutRef.current;
         const containerElm = containerRef?.current;
@@ -7985,7 +8080,7 @@ const ElementCalloutOverlay = (props) => {
             calloutElm,
             containerElm,
             element,
-            onChange: setCalloutStyle,
+            setPosition,
         });
     }, [element, widthScale, containerRef]);
     if (!element)
@@ -7995,7 +8090,7 @@ const ElementCalloutOverlay = (props) => {
 ElementCalloutOverlay.displayName = 'ElementCalloutOverlay';
 
 const ElementOverlayComponent = (props) => {
-    const { type, element, onClick, elementId } = props;
+    const { type, element, onClick, elementId, hideOutline } = props;
     const widthScale = useHeatmapViz((s) => s.widthScale);
     const viewportHeight = useHeatmapVizRect((s) => s.iframeHeight);
     const viewportWidth = useHeatmapConfigStore((s) => s.width);
@@ -8015,7 +8110,7 @@ const ElementOverlayComponent = (props) => {
     const isHovered = type === 'hovered';
     const badgeWidthScale = isHovered ? 1 : widthScale;
     const showCallout = !!element?.mousePosition && !isHovered;
-    return (jsxs(Fragment$1, { children: [jsx("div", { onClick: onClick, className: `heatmapElement heatmapElement--${type}`, id: elementId, style: overlayStyle, children: showCallout && jsx(ElementCalloutOverlay, { ...props }) }), jsx(BackdropCanvas, { activeElement: overlayStyle, viewportWidth: viewportWidth, viewportHeight: viewportHeight, show: !isHovered }), jsx(RankBadge, { hash: element.hash, show: isHovered, index: element.rank, elementRect: element, widthScale: badgeWidthScale, clickOnElement: onClick })] }));
+    return (jsxs(Fragment$1, { children: [jsx("div", { onClick: onClick, className: `heatmapElement heatmapElement--${type} ${hideOutline ? 'heatmapElement--hide-outline' : ''}`, id: elementId, style: overlayStyle, children: showCallout && jsx(ElementCalloutOverlay, { ...props }) }), jsx(BackdropCanvas, { activeElement: overlayStyle, viewportWidth: viewportWidth, viewportHeight: viewportHeight, show: !isHovered }), jsx(RankBadge, { hash: element.hash, show: isHovered, index: element.rank, elementRect: element, widthScale: badgeWidthScale, clickOnElement: onClick })] }));
 };
 ElementOverlayComponent.displayName = 'ElementOverlay';
 const ElementOverlay = memo(ElementOverlayComponent);
@@ -8039,6 +8134,7 @@ const ElementCalloutClicked = memo(ElementCalloutClickedComponent);
 const HoveredElementOverlayComponent = ({ onClick }) => {
     const viewId = useViewIdContext();
     const hoveredElement = useHeatmapHover((s) => s.hoveredElement);
+    const clickedElement = useHeatmapClick((s) => s.selectedElement);
     const handleClick = (event) => {
         if (onClick) {
             onClick(event, hoveredElement?.hash ?? '');
@@ -8047,7 +8143,8 @@ const HoveredElementOverlayComponent = ({ onClick }) => {
     if (!hoveredElement)
         return null;
     const elementId = getHoveredElementId(viewId, false);
-    return (jsx(Fragment$1, { children: jsx(ElementOverlay, { type: "hovered", element: hoveredElement, elementId: elementId, onClick: handleClick }) }));
+    const hideOutline = clickedElement?.hash === hoveredElement?.hash && ELM_CALLOUT_CONFIG.HIDE_OUTLINE_ON_CLICKED;
+    return (jsx(Fragment$1, { children: jsx(ElementOverlay, { type: "hovered", element: hoveredElement, elementId: elementId, onClick: handleClick, hideOutline: hideOutline }) }));
 };
 const HoveredElementOverlay = memo(HoveredElementOverlayComponent);
 
@@ -8065,22 +8162,16 @@ const HeatmapElements = (props) => {
     const viewId = useViewIdContext();
     const iframeHeight = useHeatmapVizRect((s) => s.iframeHeight);
     const elementCalloutRef = useRef(null);
-    const { iframeDimensions, isVisible = true, areDefaultRanksHidden, positionMode } = props;
-    const { getRect } = useHeatmapElementPosition({
-        iframeRef: props.iframeRef,
-        wrapperRef: props.wrapperRef,
-        visualizer: props.visualizer,
-    });
-    const { handleMouseMove, handleMouseLeave, handleClick } = useHoveredElement({
-        iframeRef: props.iframeRef,
-        getRect,
-    });
-    useElementCalloutVisible({ visualRef: props.visualRef, getRect, positionMode });
+    const { iframeDimensions, positionMode } = props;
+    const { visualRef, iframeRef, wrapperRef, visualizer } = props;
+    const { isVisible = true, isSecondary, isHideTopRank } = props;
+    const { getRect } = useHeatmapElementPosition({ iframeRef, wrapperRef, visualizer });
+    const { handleMouseMove, handleMouseLeave, handleClick } = useHoveredElement({ iframeRef, getRect });
+    useElementCalloutVisible({ visualRef, getRect, positionMode });
     useHeatmapEffects({ isVisible });
-    useRenderCount('HeatmapElements');
     if (!isVisible)
         return null;
-    return (jsxs("div", { id: `gx-hm-elements-${viewId}`, ref: elementCalloutRef, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: "gx-hm-elements", style: { ...iframeDimensions, height: `${iframeHeight}px` }, children: [jsx(DefaultRankBadges, { getRect: getRect, hidden: areDefaultRanksHidden }), jsx(ElementCalloutClicked, { visualRef: props.visualRef, positionMode: props.positionMode, getRect: getRect, isSecondary: props.isSecondary, containerRef: elementCalloutRef }), jsx(ElementCalloutHovered, { visualRef: props.visualRef, onClick: handleClick, isSecondary: props.isSecondary, positionMode: props.positionMode })] }));
+    return (jsxs("div", { id: `gx-hm-elements-${viewId}`, ref: elementCalloutRef, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: "gx-hm-elements", style: { ...iframeDimensions, height: `${iframeHeight}px` }, children: [jsx(DefaultRankBadges, { getRect: getRect, hidden: isHideTopRank }), jsx(ElementCalloutClicked, { visualRef: visualRef, positionMode: positionMode, getRect: getRect, isSecondary: isSecondary, containerRef: elementCalloutRef }), jsx(ElementCalloutHovered, { visualRef: visualRef, onClick: handleClick, isSecondary: isSecondary, positionMode: positionMode })] }));
 };
 
 const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
@@ -8097,7 +8188,7 @@ const VizElements = ({ iframeRef, visualRef, wrapperRef }) => {
     // useRenderCount('VizElements');
     if (!iframeRef.current)
         return null;
-    return (jsx(HeatmapElements, { visualizer: visualizer, visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef, heatmapInfo: dataInfo, isVisible: true, positionMode: DEFAULT_POSITION_MODE, areDefaultRanksHidden: true, iframeDimensions: {
+    return (jsx(HeatmapElements, { visualizer: visualizer, visualRef: visualRef, iframeRef: iframeRef, wrapperRef: wrapperRef, heatmapInfo: dataInfo, isVisible: true, positionMode: DEFAULT_POSITION_MODE, isHideTopRank: true, iframeDimensions: {
             width: contentWidth,
             position: 'absolute',
             top: 0,
@@ -8542,4 +8633,4 @@ const HeatmapLayout = ({ data, clickmap, clickAreas, scrollmap, controls, dataIn
     }
 };
 
-export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickMode, IClickType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClick, useHeatmapCanvas, useHeatmapClick, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHover, useHeatmapLiveStore, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapViz, useHeatmapVizRect, useHoveredElement, useIframeHeight, useIframeHeightProcessor, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };
+export { BACKDROP_CONFIG, DEFAULT_SIDEBAR_WIDTH, DEFAULT_VIEW_ID, ELM_CALLOUT_CONFIG, GraphView, HEATMAP_CONFIG, HEATMAP_IFRAME, HEATMAP_STYLE, HeatmapLayout, IClickMode, IClickType, IHeatmapType, IScrollType, ViewIdContext, Z_INDEX, compareViewPerformance, convertViewportToIframeCoords, createStorePerformanceTracker, downloadPerformanceReport, getCompareViewId, getMetricsByViewId, getPerformanceReportJSON, getScrollGradientColor, performanceLogger, printPerformanceSummary, scrollToElementIfNeeded, sendPerformanceReport, serializeAreas, trackStoreAction, useAreaCreation, useAreaEditMode, useAreaFilterVisible, useAreaHydration, useAreaInteraction, useAreaPositionsUpdater, useAreaRectSync, useAreaRendererContainer, useAreaTopAutoDetect, useClickedElement, useDebounceCallback, useElementCalloutVisible, useHeatmapAreaClick, useHeatmapCanvas, useHeatmapClick, useHeatmapCompareStore, useHeatmapConfigStore, useHeatmapCopyView, useHeatmapData, useHeatmapEffects, useHeatmapElementPosition, useHeatmapHover, useHeatmapLiveStore, useHeatmapRenderByMode, useHeatmapScale, useHeatmapScroll, useHeatmapViz, useHeatmapVizRect, useHoveredElement, useIframeHeight, useIframeHeightProcessor, useMeasureFunction, useRegisterConfig, useRegisterControl, useRegisterData, useRegisterHeatmap, useRenderCount, useScrollmapZones, useTrackHookCall, useViewIdContext, useVizLiveRender, useWhyDidYouUpdate, useWrapperRefHeight, useZonePositions, withPerformanceTracking };