@gemx-dev/heatmap-react 3.5.58 → 3.5.59

package/dist/esm/components/VizElement/ElementCallout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElementCallout.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCallout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAoB,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAkBvF,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8CxD,CAAC"}
+{"version":3,"file":"ElementCallout.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCallout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAoB,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAiBvF,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6CxD,CAAC"}

package/dist/esm/components/VizElement/ElementCalloutOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElementCalloutOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCalloutOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+B/D,CAAC"}
+{"version":3,"file":"ElementCalloutOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCalloutOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2C/D,CAAC"}

package/dist/esm/helpers/viz-elm-callout/dimensions.d.ts

@@ -1,5 +1,5 @@
 import type { IRectDimensions, IViewportDimensions } from '../../types';
-export declare const getViewportDimensions: (containerElm?: HTMLElement | null, scale?: number) => IViewportDimensions;
+export declare const getViewportDimensions: (containerElm?: HTMLElement | null, _scale?: number) => IViewportDimensions;
 interface IElementDimensionsOptions {
     targetElm: Element;
     calloutElm: HTMLElement;

package/dist/esm/helpers/viz-elm-callout/dimensions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dimensions.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/dimensions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAExE,eAAO,MAAM,qBAAqB,GAAI,eAAe,WAAW,GAAG,IAAI,EAAE,QAAQ,MAAM,KAAG,mBAYzF,CAAC;AAEF,UAAU,yBAAyB;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,WAAW,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,WAAW,CAAC;CAC3B;AACD,eAAO,MAAM,oBAAoB,GAAI,SAAS,yBAAyB,KAAG,eA2CzE,CAAC"}
+{"version":3,"file":"dimensions.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/dimensions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,eAAe,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAItF,eAAO,MAAM,qBAAqB,GAAI,eAAe,WAAW,GAAG,IAAI,EAAE,SAAS,MAAM,KAAG,mBAY1F,CAAC;AAEF,UAAU,yBAAyB;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,WAAW,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,WAAW,CAAC;CAC3B;AACD,eAAO,MAAM,oBAAoB,GAAI,SAAS,yBAAyB,KAAG,eAqCzE,CAAC"}

package/dist/esm/helpers/viz-elm-callout/getter.d.ts

@@ -1,4 +1,7 @@
-import type { ElementInfo, ElementRect, IHeatmapInfo } from '../../types';
+import type { CSSProperties } from 'react';
+import type { ElementInfo, ElementRect, ICalloutPosition, ICalloutRect, IHeatmapInfo } from '../../types';
 export declare function getElementLayout(element: HTMLElement): ElementRect | null;
 export declare const buildElementInfo: (hash: string, rect: ElementRect | null, heatmapInfo: IHeatmapInfo) => ElementInfo | null;
+export declare const getScaledCalloutRect: (_element: HTMLElement, _widthScale: number) => ICalloutRect;
+export declare const getStyleFromCandidate: (candidate: ICalloutPosition, widthScale: number) => CSSProperties;
 //# sourceMappingURL=getter.d.ts.map

package/dist/esm/helpers/viz-elm-callout/getter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getter.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/getter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAkB,YAAY,EAAE,MAAM,aAAa,CAAC;AAE1F,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,GAAG,IAAI,CAYzE;AAOD,eAAO,MAAM,gBAAgB,GAC3B,MAAM,MAAM,EACZ,MAAM,WAAW,GAAG,IAAI,EACxB,aAAa,YAAY,KACxB,WAAW,GAAG,IAqBhB,CAAC"}
+{"version":3,"file":"getter.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/getter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EAEX,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACb,MAAM,aAAa,CAAC;AAIrB,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,GAAG,IAAI,CAYzE;AAOD,eAAO,MAAM,gBAAgB,GAC3B,MAAM,MAAM,EACZ,MAAM,WAAW,GAAG,IAAI,EACxB,aAAa,YAAY,KACxB,WAAW,GAAG,IAqBhB,CAAC;AAGF,eAAO,MAAM,oBAAoB,GAAI,UAAU,WAAW,EAAE,aAAa,MAAM,KAAG,YAKjF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,WAAW,gBAAgB,EAAE,YAAY,MAAM,KAAG,aAavF,CAAC"}

package/dist/esm/helpers/viz-elm-callout/position-candidates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position-candidates.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/position-candidates.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,kBAAkB,EAClB,wBAAwB,EAEzB,MAAM,aAAa,CAAC;AAerB,eAAO,MAAM,kCAAkC,GAAI,SAAS,wBAAwB,KAAG,kBAAkB,EA8BxG,CAAC;AAEF,eAAO,MAAM,oCAAoC,GAAI,SAAS,wBAAwB,KAAG,kBAAkB,EAU1G,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,SAAS,wBAAwB,KAAG,kBAAkB,EAK3F,CAAC"}
+{"version":3,"file":"position-candidates.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/position-candidates.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,kBAAkB,EAClB,wBAAwB,EAEzB,MAAM,aAAa,CAAC;AAerB,eAAO,MAAM,kCAAkC,GAAI,SAAS,wBAAwB,KAAG,kBAAkB,EA+BxG,CAAC;AAEF,eAAO,MAAM,oCAAoC,GAAI,SAAS,wBAAwB,KAAG,kBAAkB,EAU1G,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,SAAS,wBAAwB,KAAG,kBAAkB,EAK3F,CAAC"}

package/dist/esm/helpers/viz-elm-callout/position-validator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position-validator.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/position-validator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAItG,eAAO,MAAM,mBAAmB,GAAI,SAAS,MAAM,EAAE,SAAS,wBAAwB,KAAG,OAaxF,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,SAAS,MAAM,EAAE,SAAS,wBAAwB,KAAG,OAQzF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,WAAW,kBAAkB,EAAE,SAAS,wBAAwB,KAAG,OAS1G,CAAC;AAEF,eAAO,MAAM,yBAAyB,GACpC,WAAW,oBAAoB,EAC/B,SAAS,wBAAwB,KAChC,OASF,CAAC"}
+{"version":3,"file":"position-validator.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/position-validator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAItG,eAAO,MAAM,mBAAmB,GAAI,SAAS,MAAM,EAAE,SAAS,wBAAwB,KAAG,OAcxF,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,SAAS,MAAM,EAAE,SAAS,wBAAwB,KAAG,OAYzF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,WAAW,kBAAkB,EAAE,SAAS,wBAAwB,KAAG,OAe1G,CAAC;AAEF,eAAO,MAAM,yBAAyB,GACpC,WAAW,oBAAoB,EAC/B,SAAS,wBAAwB,KAChC,OAeF,CAAC"}

package/dist/esm/helpers/viz-elm-callout/viz-elm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viz-elm.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/viz-elm.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iCAAiC,EACjC,yBAAyB,EAK1B,MAAM,aAAa,CAAC;AAiErB,eAAO,MAAM,mBAAmB,GAAI,SAAS,yBAAyB,eA+CrE,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,OAAO,iCAAiC,SAwEnF,CAAC"}
+{"version":3,"file":"viz-elm.d.ts","sourceRoot":"","sources":["../../../src/helpers/viz-elm-callout/viz-elm.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iCAAiC,EACjC,yBAAyB,EAK1B,MAAM,aAAa,CAAC;AAkErB,eAAO,MAAM,mBAAmB,GAAI,SAAS,yBAAyB,eAgDrE,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,OAAO,iCAAiC,SAiEnF,CAAC"}

package/dist/esm/index.js

@@ -2211,6 +2211,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 +2241,11 @@ function calculateRankPosition(rect, widthScale) {
     };
 }
 
-const getViewportDimensions = (containerElm, scale) => {
+const getViewportDimensions = (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 {
@@ -2239,6 +2258,7 @@ const getElementDimensions = (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 +2274,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 +2346,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) => {
@@ -2493,7 +2519,7 @@ const calcCalloutPosition = (options) => {
         const containerElm = isAbsolute ? calloutElm.parentElement : visualRef?.current;
         if (!containerElm)
             return;
-        const viewport = getViewportDimensions(visualRef?.current, scale);
+        const viewport = getViewportDimensions(containerElm);
         const rectDimensions = getElementDimensions({ targetElm, calloutElm, scale, containerElm });
         const containerRect = createAdjustedContainerRect({ containerElm, scale, isAbsolute, visualRef });
         const options = {
@@ -2504,6 +2530,7 @@ const calcCalloutPosition = (options) => {
             padding,
             arrowSize,
             containerRect,
+            widthScale,
         };
         const candidates = generateAllCandidates(options);
         const candidate = selectBestPosition(candidates);
@@ -2520,7 +2547,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 +2556,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 +2572,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 = getViewportDimensions(containerElm);
     const options = {
         rectDimensions,
         viewport,
@@ -2570,16 +2587,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);
 };
 
 /**
@@ -7778,6 +7798,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 +7811,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;
@@ -7974,7 +7993,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 +8015,7 @@ const ElementCalloutOverlay = (props) => {
             calloutElm,
             containerElm,
             element,
-            onChange: setCalloutStyle,
+            setPosition,
         });
     }, [element, widthScale, containerRef]);
     if (!element)

package/dist/esm/index.mjs

@@ -2211,6 +2211,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 +2241,11 @@ function calculateRankPosition(rect, widthScale) {
     };
 }
 
-const getViewportDimensions = (containerElm, scale) => {
+const getViewportDimensions = (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 {
@@ -2239,6 +2258,7 @@ const getElementDimensions = (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 +2274,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 +2346,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) => {
@@ -2493,7 +2519,7 @@ const calcCalloutPosition = (options) => {
         const containerElm = isAbsolute ? calloutElm.parentElement : visualRef?.current;
         if (!containerElm)
             return;
-        const viewport = getViewportDimensions(visualRef?.current, scale);
+        const viewport = getViewportDimensions(containerElm);
         const rectDimensions = getElementDimensions({ targetElm, calloutElm, scale, containerElm });
         const containerRect = createAdjustedContainerRect({ containerElm, scale, isAbsolute, visualRef });
         const options = {
@@ -2504,6 +2530,7 @@ const calcCalloutPosition = (options) => {
             padding,
             arrowSize,
             containerRect,
+            widthScale,
         };
         const candidates = generateAllCandidates(options);
         const candidate = selectBestPosition(candidates);
@@ -2520,7 +2547,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 +2556,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 +2572,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 = getViewportDimensions(containerElm);
     const options = {
         rectDimensions,
         viewport,
@@ -2570,16 +2587,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);
 };
 
 /**
@@ -7778,6 +7798,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 +7811,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;
@@ -7974,7 +7993,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 +8015,7 @@ const ElementCalloutOverlay = (props) => {
             calloutElm,
             containerElm,
             element,
-            onChange: setCalloutStyle,
+            setPosition,
         });
     }, [element, widthScale, containerRef]);
     if (!element)

package/dist/esm/types/viz-elm-callout.d.ts

@@ -14,6 +14,10 @@ export interface IViewportDimensions {
     width: number;
     height: number;
 }
+export interface ICalloutRect {
+    width: number;
+    height: number;
+}
 export interface IRectDimensions {
     /**
      * The target elements rectangle with PORTAL element
@@ -26,7 +30,7 @@ export interface IRectDimensions {
         top: number;
         left: number;
     };
-    calloutRect: DOMRect;
+    calloutRect: ICalloutRect;
 }
 export interface IPositionCandidateBase {
     top: number;
@@ -48,6 +52,7 @@ export interface IPositionCandidateOption {
     offset: IPositionCandidateOffset;
     padding: number;
     arrowSize: number;
+    widthScale: number;
     containerRect?: DOMRect;
 }
 export interface ICalcCalloutPositionProps {
@@ -70,6 +75,6 @@ export interface ICalcCalloutPositionAbsoluteProps {
     calloutElm: HTMLDivElement;
     containerElm: HTMLDivElement;
     element: ElementInfo;
-    onChange: (style: React.CSSProperties) => void;
+    setPosition: (position: ICalloutPosition) => void;
 }
 //# sourceMappingURL=viz-elm-callout.d.ts.map

package/dist/esm/types/viz-elm-callout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viz-elm-callout.d.ts","sourceRoot":"","sources":["../../src/types/viz-elm-callout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAClD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,CAAC;AACpD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG,oBAAoB,CAAC;AAC1E,MAAM,MAAM,oBAAoB,GAAG,oBAAoB,GAAG,QAAQ,CAAC;AAEnE,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,iBAAiB,CAAC;IAC7B,eAAe,EAAE,oBAAoB,CAAC;CACvC;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,kBAAkB,CAAC,EAAE;QACnB,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,SAAS,EAAE,iBAAiB,CAAC;IAC7B,eAAe,EAAE,oBAAoB,CAAC;IACtC,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,wBAAwB;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,wBAAwB;IACvC,cAAc,EAAE,eAAe,CAAC;IAChC,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,MAAM,EAAE,wBAAwB,CAAC;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAID,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,WAAW,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;CACpD;AAED,MAAM,WAAW,iCAAiC;IAChD,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,cAAc,CAAC;IAC7B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAChD"}
+{"version":3,"file":"viz-elm-callout.d.ts","sourceRoot":"","sources":["../../src/types/viz-elm-callout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAClD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,CAAC;AACpD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG,oBAAoB,CAAC;AAC1E,MAAM,MAAM,oBAAoB,GAAG,oBAAoB,GAAG,QAAQ,CAAC;AAEnE,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,iBAAiB,CAAC;IAC7B,eAAe,EAAE,oBAAoB,CAAC;CACvC;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,kBAAkB,CAAC,EAAE;QACnB,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,WAAW,EAAE,YAAY,CAAC;CAC3B;AAED,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,SAAS,EAAE,iBAAiB,CAAC;IAC7B,eAAe,EAAE,oBAAoB,CAAC;IACtC,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,wBAAwB;IACvC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,wBAAwB;IACvC,cAAc,EAAE,eAAe,CAAC;IAChC,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,MAAM,EAAE,wBAAwB,CAAC;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAID,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,WAAW,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;CACpD;AAED,MAAM,WAAW,iCAAiC;IAChD,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,cAAc,CAAC;IAC7B,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACnD"}

package/dist/umd/components/VizElement/ElementCallout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElementCallout.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCallout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAoB,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAkBvF,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8CxD,CAAC"}
+{"version":3,"file":"ElementCallout.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCallout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAoB,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAiBvF,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6CxD,CAAC"}

package/dist/umd/components/VizElement/ElementCalloutOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElementCalloutOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCalloutOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+B/D,CAAC"}
+{"version":3,"file":"ElementCalloutOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/VizElement/ElementCalloutOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO5D,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2C/D,CAAC"}