@bundle-stats/ui 4.22.3 → 4.23.0-beta.10

package/lib/components/metrics-treemap/metrics-treemap.js

@@ -42,15 +42,14 @@ const react_use_1 = require("react-use");
 const classnames_1 = __importDefault(require("classnames"));
 const d3_1 = require("d3");
 const tooltip_1 = require("ariakit/tooltip");
-const utils_1 = require("@bundle-stats/utils");
+const flex_stack_1 = require("../../layout/flex-stack");
 const stack_1 = require("../../layout/stack");
 const file_name_1 = require("../../ui/file-name");
-const delta_1 = require("../delta");
 const run_info_1 = require("../run-info");
 const metrics_treemap_constants_1 = require("./metrics-treemap.constants");
-const I18N = __importStar(require("./metrics-treemap.i18n"));
 const metrics_treemap_module_css_1 = __importDefault(require("./metrics-treemap.module.css"));
 const metrics_treemap_utils_1 = require("./metrics-treemap.utils");
+const tile_group_1 = require("./tile-group");
 const TileTooltipContent = (props) => {
     const { item } = props;
     const currentRun = item.runs[0];
@@ -58,118 +57,23 @@ const TileTooltipContent = (props) => {
     return (react_1.default.createElement(stack_1.Stack, { space: "small", className: metrics_treemap_module_css_1.default.tileTooltipContent },
         react_1.default.createElement("h3", { className: metrics_treemap_module_css_1.default.tileTooltipContentTitle },
             react_1.default.createElement(file_name_1.FileName, { as: "code", name: item.label })),
-        react_1.default.createElement(run_info_1.RunInfo, { current: currentRun.displayValue, delta: currentRun.displayDeltaPercentage, deltaType: currentRun.deltaType, baseline: baselineRun?.displayValue || '0B' })));
+        react_1.default.createElement(run_info_1.RunInfo, { current: currentRun.displayValue, delta: currentRun.displayDelta, deltaPercentage: currentRun.displayDeltaPercentage, deltaType: currentRun.deltaType, baseline: baselineRun?.displayValue || '0B' })));
 };
-const TileContent = (0, react_1.forwardRef)((props, ref) => {
-    const { label, sizeDisplay, item, runInfo } = props;
-    if (sizeDisplay === 'minimal') {
-        return react_1.default.createElement("div", { className: metrics_treemap_module_css_1.default.tileContent, ref: ref });
-    }
-    const resolvedLabel = label || item.label;
-    if (sizeDisplay === 'small') {
-        return (react_1.default.createElement("div", { className: metrics_treemap_module_css_1.default.tileContent, ref: ref },
-            react_1.default.createElement("p", { className: metrics_treemap_module_css_1.default.tileContentLabel }, resolvedLabel)));
-    }
-    return (react_1.default.createElement("div", { className: metrics_treemap_module_css_1.default.tileContent, ref: ref },
-        react_1.default.createElement("p", { className: metrics_treemap_module_css_1.default.tileContentLabel }, label || item.label),
-        react_1.default.createElement("p", { className: metrics_treemap_module_css_1.default.tileContentValue },
-            react_1.default.createElement("span", { className: metrics_treemap_module_css_1.default.tileContentMetric }, runInfo.displayValue),
-            react_1.default.createElement(delta_1.Delta, { className: metrics_treemap_module_css_1.default.tileContentDelta, displayValue: runInfo.displayDeltaPercentage, deltaType: runInfo.deltaType }))));
-});
-const TileContentWithTooltip = (props) => {
-    const { label, sizeDisplay, item, runInfo, parentRef } = props;
-    const tooltipState = (0, metrics_treemap_utils_1.useTooltipStateWithMouseFollow)({ parentRef });
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(tooltip_1.TooltipAnchor, { state: tooltipState, className: metrics_treemap_module_css_1.default.tileContentTooltipAnchor },
-            react_1.default.createElement(TileContent, { label: label, sizeDisplay: sizeDisplay, item: item, runInfo: runInfo })),
-        react_1.default.createElement(tooltip_1.Tooltip, { state: tooltipState, className: metrics_treemap_module_css_1.default.tooltip },
-            react_1.default.createElement(tooltip_1.TooltipArrow, { state: tooltipState, size: 16, className: metrics_treemap_module_css_1.default.tileTooltipArrow }),
-            react_1.default.createElement(TileTooltipContent, { item: item }))));
-};
-const Tile = (props) => {
-    const { left, top, width, height, data, onClick } = props;
-    const { item, label } = data;
-    const runInfo = item.runs?.[0];
-    const sizeDisplay = (0, react_1.useMemo)(() => (0, metrics_treemap_utils_1.resolveTileSizeDisplay)(width, height), [width, height]);
-    const handleOnClick = (0, react_1.useCallback)((event) => {
-        event.stopPropagation();
-        onClick?.(item.key);
-    }, [item.key, onClick]);
-    const contentRef = (0, react_1.useRef)(null);
-    const hover = (0, react_use_1.useHoverDirty)(contentRef);
-    const className = (0, classnames_1.default)(metrics_treemap_module_css_1.default.tile, metrics_treemap_module_css_1.default[`tile-${runInfo.deltaType}`], sizeDisplay === 'small' && metrics_treemap_module_css_1.default.tileSizeSmall, sizeDisplay === 'default' && metrics_treemap_module_css_1.default.tileSizeDefault, left === metrics_treemap_constants_1.PADDING_INNER && metrics_treemap_module_css_1.default.tileFirstCol);
-    return (react_1.default.createElement("div", { onClick: handleOnClick, role: "button", "aria-label": I18N.TILE_LABEL, ref: contentRef, style: { left, top, width, height }, className: className }, hover ? (react_1.default.createElement(TileContentWithTooltip, { label: label, sizeDisplay: sizeDisplay, item: item, runInfo: runInfo, parentRef: contentRef })) : (react_1.default.createElement(TileContent, { label: label, sizeDisplay: sizeDisplay, item: item, runInfo: runInfo }))));
-};
-const TileGroupTitleTooltipContent = (props) => {
-    const { title, runInfo, baselineDisplayValue } = props;
-    return (react_1.default.createElement(stack_1.Stack, { space: "small", className: metrics_treemap_module_css_1.default.tileTooltip },
+const TileGroupTooltipContent = (props) => {
+    const { node } = props;
+    const title = node.id || node.label;
+    const groupRunInfo = node.total && (0, metrics_treemap_utils_1.getGroupRunInfo)(node.total);
+    return (react_1.default.createElement(stack_1.Stack, { space: "small", className: metrics_treemap_module_css_1.default.tileTooltipContent },
         react_1.default.createElement("h3", { className: metrics_treemap_module_css_1.default.tileTooltipContentTitle },
             react_1.default.createElement(file_name_1.FileName, { as: "code", name: title })),
-        runInfo && (react_1.default.createElement(run_info_1.RunInfo, { current: runInfo.displayValue, baseline: baselineDisplayValue, delta: runInfo.displayDeltaPercentage, deltaType: runInfo.deltaType }))));
+        groupRunInfo && (react_1.default.createElement(run_info_1.RunInfo, { current: groupRunInfo.runInfo.displayValue, baseline: groupRunInfo.baselineDisplayValue, delta: groupRunInfo.runInfo.displayDeltaPercentage, deltaType: groupRunInfo.runInfo.deltaType }))));
 };
-const TileGroupTitleContent = (props) => {
-    const { title, runInfo } = props;
-    return (react_1.default.createElement("div", { className: metrics_treemap_module_css_1.default.tileGroupTitleContent },
-        title && react_1.default.createElement("span", { className: metrics_treemap_module_css_1.default.tileGroupTitleText }, title),
-        runInfo && (react_1.default.createElement("span", { className: metrics_treemap_module_css_1.default.tileGroupTitleTotal },
-            runInfo.displayValue,
-            'displayDelta' in runInfo && `(${runInfo.displayDeltaPercentage})`))));
-};
-const TileGroupTitleContentWithTooltip = (props) => {
-    const { parentRef, tooltipContent, ...restProps } = props;
-    const tooltipState = (0, metrics_treemap_utils_1.useTooltipStateWithMouseFollow)({ parentRef });
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(tooltip_1.TooltipAnchor, { state: tooltipState, className: metrics_treemap_module_css_1.default.tileContentTooltipAnchor },
-            react_1.default.createElement(TileGroupTitleContent, { ...restProps })),
-        react_1.default.createElement(tooltip_1.Tooltip, { state: tooltipState, className: metrics_treemap_module_css_1.default.tooltip },
-            react_1.default.createElement(tooltip_1.TooltipArrow, { state: tooltipState, size: 16, className: metrics_treemap_module_css_1.default.tileTooltipArrow }),
-            react_1.default.createElement(TileGroupTitleTooltipContent, { ...tooltipContent }))));
-};
-const TileGroupTitle = (props) => {
-    const { tooltipContent, ...restProps } = props;
-    const contentRef = (0, react_1.useRef)(null);
-    const hover = (0, react_use_1.useHoverDirty)(contentRef);
-    return (react_1.default.createElement("div", { className: metrics_treemap_module_css_1.default.tileGroupTitle, ref: contentRef }, hover ? (react_1.default.createElement(TileGroupTitleContentWithTooltip, { parentRef: contentRef, tooltipContent: tooltipContent, ...restProps })) : (react_1.default.createElement(TileGroupTitleContent, { ...restProps }))));
-};
-const TileGroup = (props) => {
-    const { title = '', total, id, childNodes, onItemClick, onGroupClick, left, top, width, height, absoluteLeft, absoluteTop, } = props;
-    const onClick = (0, react_1.useCallback)((event) => {
-        onGroupClick?.(id);
-        event.stopPropagation();
-    }, [onGroupClick, id]);
-    const displaySize = (0, react_1.useMemo)(() => (0, metrics_treemap_utils_1.resolveTileGroupSizeDisplay)(width || 0, height || 0), [width, height]);
-    const [runInfo, baselineDisplayValue, deltaType] = (0, react_1.useMemo)(() => {
-        if (!total) {
-            return [];
-        }
-        const resolvedRunInfo = (0, utils_1.getMetricRunInfo)(utils_1.METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE, total.current, total.baseline);
-        const resolvedBaselineDisplayValue = (0, utils_1.formatFileSize)(total.baseline);
-        const resolvedDeltaType = (0, metrics_treemap_utils_1.resolveGroupDeltaType)(resolvedRunInfo);
-        return [resolvedRunInfo, resolvedBaselineDisplayValue, resolvedDeltaType];
-    }, [total]);
-    const rootClassName = (0, classnames_1.default)(metrics_treemap_module_css_1.default.tileGroup, metrics_treemap_module_css_1.default[`tileGroup--${deltaType}`], metrics_treemap_module_css_1.default[`tileGroup--${displaySize}`]);
-    const tooltipContent = {
-        title: id || title,
-        runInfo,
-        baselineDisplayValue,
-    };
-    if (title && displaySize === 'minimal') {
-        return (react_1.default.createElement("div", { onClick: onClick, role: "button", "aria-label": I18N.TILE_GROUP_LABEL, className: rootClassName, style: { left, top, width, height } },
-            react_1.default.createElement(TileGroupTitle, { tooltipContent: tooltipContent })));
+const TreemapTooltipContent = (props) => {
+    const { node } = props;
+    if ('item' in node) {
+        return react_1.default.createElement(TileTooltipContent, { item: node.item });
     }
-    if (title && displaySize === 'small') {
-        return (react_1.default.createElement("div", { onClick: onClick, role: "button", "aria-label": I18N.TILE_GROUP_LABEL, style: { left, top, width, height }, className: rootClassName },
-            react_1.default.createElement(TileGroupTitle, { title: title, tooltipContent: tooltipContent })));
-    }
-    return (react_1.default.createElement("div", { onClick: onClick, role: "button", "aria-label": I18N.TILE_GROUP_LABEL, className: (0, classnames_1.default)(rootClassName, metrics_treemap_module_css_1.default.tileGroupSizeDefault), style: { left, top, width, height } },
-        react_1.default.createElement(TileGroupTitle, { title: title, runInfo: runInfo, tooltipContent: tooltipContent }),
-        childNodes?.map((childNode) => {
-            if ('children' in childNode) {
-                const groupData = childNode.data;
-                return (react_1.default.createElement(TileGroup, { title: groupData.label, total: groupData.total, id: groupData.id, childNodes: childNode.children, left: childNode.x0 - absoluteLeft, top: childNode.y0 - absoluteTop, absoluteLeft: childNode.x0, absoluteTop: childNode.y0, width: childNode.x1 - childNode.x0, height: childNode.y1 - childNode.y0, onItemClick: onItemClick, onGroupClick: onGroupClick, key: groupData.id }));
-            }
-            return (react_1.default.createElement(Tile, { data: childNode.data, left: childNode.x0 - absoluteLeft, top: childNode.y0 - absoluteTop, width: childNode.x1 - childNode.x0, height: childNode.y1 - childNode.y0, onClick: onItemClick, key: childNode.data.id }));
-        })));
+    return react_1.default.createElement(TileGroupTooltipContent, { node: node });
 };
 function useMetricsTreemapHierarchy(params) {
     const { treeNodes, width, height, nested } = params;
@@ -201,9 +105,38 @@ const MetricsTreemap = (props) => {
     const { className = '', treeNodes, onItemClick, onGroupClick, emptyMessage = 'No data', nested = false, ...restProps } = props;
     const [containerRef, { width, height }] = (0, react_use_1.useMeasure)();
     const rootNode = useMetricsTreemapHierarchy({ treeNodes, width, height, nested });
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(metrics_treemap_module_css_1.default.root, nested && metrics_treemap_module_css_1.default.nested, className), ...restProps, ref: containerRef }, rootNode.children && rootNode.children?.length > 0 ? (react_1.default.createElement("div", { className: metrics_treemap_module_css_1.default.canvas },
-        react_1.default.createElement(TileGroup, { title: nested ? rootNode.data.label : undefined, total: rootNode.data.total, id: rootNode.data.id, childNodes: rootNode.children, onItemClick: onItemClick, onGroupClick: onGroupClick, left: rootNode.x0, top: rootNode.y0, absoluteLeft: rootNode.x0, absoluteTop: rootNode.y0, width: rootNode.x1 - rootNode.x0, height: rootNode.y1 - rootNode.y0 }))) : (react_1.default.createElement("div", { className: metrics_treemap_module_css_1.default.emptyMessage },
-        react_1.default.createElement("div", { className: metrics_treemap_module_css_1.default.emptyMessageWrapper }, emptyMessage)))));
+    const nodesIndex = (0, react_1.useMemo)(() => (0, metrics_treemap_utils_1.getTreemapNodesIndex)(treeNodes), [treeNodes]);
+    const { tooltipState, setPointer, hoveredNodeId, setHoveredNode, clearHoveredNode } = (0, metrics_treemap_utils_1.useTreemapTooltipState)();
+    const canvasRef = (0, react_1.useRef)(null);
+    const tooltipNode = hoveredNodeId === null ? null : nodesIndex.get(hoveredNodeId);
+    const handlePointerEvent = (0, react_1.useCallback)((event) => {
+        tooltipState.anchorRef.current = canvasRef.current;
+        setPointer(event.clientX, event.clientY);
+        const target = event.target?.closest(metrics_treemap_constants_1.NODE_ID_SELECTOR);
+        setHoveredNode(target?.dataset.treemapId ?? null);
+    }, [tooltipState, setPointer, setHoveredNode]);
+    const hasNodes = Boolean(rootNode.children && rootNode.children.length > 0);
+    (0, react_1.useEffect)(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            return undefined;
+        }
+        canvas.addEventListener('mousemove', handlePointerEvent);
+        canvas.addEventListener('mouseover', handlePointerEvent);
+        canvas.addEventListener('mouseleave', clearHoveredNode);
+        return () => {
+            canvas.removeEventListener('mousemove', handlePointerEvent);
+            canvas.removeEventListener('mouseover', handlePointerEvent);
+            canvas.removeEventListener('mouseleave', clearHoveredNode);
+        };
+    }, [hasNodes, handlePointerEvent, clearHoveredNode]);
+    const canvasContent = (0, react_1.useMemo)(() => (react_1.default.createElement(tile_group_1.TileGroup, { title: nested ? rootNode.data.label : undefined, total: rootNode.data.total, id: rootNode.data.id, childNodes: rootNode.children, nested: nested, onItemClick: onItemClick, onGroupClick: onGroupClick, left: rootNode.x0, top: rootNode.y0, absoluteLeft: rootNode.x0, absoluteTop: rootNode.y0, width: rootNode.x1 - rootNode.x0, height: rootNode.y1 - rootNode.y0 })), [rootNode, width, height, nested, onItemClick, onGroupClick]);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(metrics_treemap_module_css_1.default.root, className), ...restProps, ref: containerRef },
+        hasNodes ? (react_1.default.createElement("div", { className: metrics_treemap_module_css_1.default.canvas, ref: canvasRef }, canvasContent)) : (react_1.default.createElement(flex_stack_1.FlexStack, { alignItems: "center", justifyContent: "center", className: metrics_treemap_module_css_1.default.emptyMessage },
+            react_1.default.createElement("div", { className: metrics_treemap_module_css_1.default.emptyMessageWrapper }, emptyMessage))),
+        tooltipNode && (react_1.default.createElement(tooltip_1.Tooltip, { state: tooltipState, className: metrics_treemap_module_css_1.default.tooltip },
+            react_1.default.createElement(tooltip_1.TooltipArrow, { state: tooltipState, size: 16, className: metrics_treemap_module_css_1.default.tileTooltipArrow }),
+            react_1.default.createElement(TreemapTooltipContent, { node: tooltipNode })))));
 };
 exports.MetricsTreemap = MetricsTreemap;
 //# sourceMappingURL=metrics-treemap.js.map

package/lib/components/metrics-treemap/metrics-treemap.js.map

@@ -1 +1 @@
-{"version":3,"file":"metrics-treemap.js","sourceRoot":"","sources":["../../../src/components/metrics-treemap/metrics-treemap.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"metrics-treemap.js","sourceRoot":"","sources":["../../../src/components/metrics-treemap/metrics-treemap.tsx"],"names":[],"mappings":"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"}

package/lib/components/metrics-treemap/metrics-treemap.module.css

@@ -16,270 +16,6 @@
   background: var(--color-background);
 }
 
-/**
- * Tile group
- */
-.tileGroup {
-  position: absolute;
-}
-
-.tileGroupTitle {
-  width: 100%;
-  cursor: default;
-}
-
-.tileGroupTitleContent {
-  width: 100%;
-  padding: var(--space-xxxsmall) 2px var(--space-xxxsmall) var(--space-xxsmall);
-  display: flex;
-  align-items: center;
-  color: var(--color-text);
-  font-family: var(--font-family-fixed);
-  font-size: 10px;
-  line-height: var(--space-small);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.tileGroupTitleText,
-.tileGroupTitleTotal {
-  flex: 0 0 auto;
-  min-width: 0;
-}
-
-.tileGroupTitleTotal {
-  margin-left: var(--space-xxsmall);
-  color: var(--color-text-light);
-}
-
-.tileGroupTitle {
-  transition: var(--transition-out);
-}
-
-.tileGroupTitle:hover .tileGroupTitleText {
-  text-decoration: underline;
-  transition: var(--transition-in);
-}
-
-/** Tile group size variation */
-.tileGroup {
-  transition: var(--transition-out);
-  transition-property: background-color, outline;
-  border-radius: var(--radius-xsmall);
-}
-
-.tileGroup--minimal,
-.tileGroup--small {
-  border-radius: calc(var(--radius-xsmall) / 2);
-}
-
-.tileGroup--minimal .tileGroupTitle,
-.tileGroup--small .tileGroupTitle {
-  height: 100%; /* full height when title is missing or we do not render any children */
-}
-
-.tileGroup--minimal .tileGroupTitleContent,
-.tileGroup--small .tileGroupTitleContent {
-  min-height: 100%;
-}
-
-/** Tile group nested variation */
-.nested .tileGroup {
-  background-color: rgba(27, 26, 33, 0.03);
-  outline: 1px solid rgba(255, 255, 255, 0.8);
-}
-
-.nested .tileGroup:has(> .tileGroupTitle:hover),
-.nested .tileGroup:has(> .tile:hover) {
-  background-color: rgba(27, 26, 33, 0.06);
-  outline: 1px solid rgba(255, 255, 255, 1);
-  transition: var(--transition-in);
-  transition-property: background-color, outline;
-}
-
-.nested .tileGroup--NEGATIVE {
-  background-color: rgba(194, 31, 37, 0.04);
-}
-
-.nested .tileGroup--NEGATIVE:has(> .tileGroupTitle:hover),
-.nested .tileGroup--NEGATIVE:has(> .tile:hover) {
-  background-color: rgba(194, 31, 37, 0.1);
-}
-
-.nested .tileGroup--POSITIVE {
-  background-color: rgba(42, 147, 39, 0.04);
-}
-
-.nested .tileGroup--POSITIVE:has(> .tileGroupTitle:hover),
-.nested .tileGroup--POSITIVE:has(> .tile:hover) {
-  background-color: rgba(42, 147, 39, 0.1);
-}
-
-/* reset bacground color when having a not changed group */
-.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE,
-.nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE {
-  background-color: var(--color-background);
-  background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
-}
-
-.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
-.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tile:hover),
-.nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
-.nested .tileGroup--NEGATIVE > .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tile:hover) {
-  background-color: var(--color-background);
-  background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
-}
-
-/** Leaf wrapper button */
-.tile {
-  position: absolute;
-  appearance: none;
-  border: 0;
-  border-radius: 0;
-  padding: 0;
-  border-radius: calc(var(--radius-xsmall) / 2);
-  background: var(--color-background);
-  display: flex;
-  align-items: center;
-  font-family: var(--font-family-fixed);
-  font-size: var(--size-small);
-  line-height: var(--line-height-heading);
-  text-align: left;
-  transition: var(--transition-out);
-  transition-property: opacity, background-color;
-}
-
-.tile::before {
-  content: '';
-  display: block;
-  position: absolute;
-  z-index: 1;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: currentColor;
-}
-
-.tileContent {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  padding: var(--space-xxsmall) var(--space-xxsmall);
-  gap: var(--space-xxxsmall);
-  line-height: var(--line-height-heading);
-}
-
-/** Align label to other elements on the first column cells */
-.tileFirstCol .tileContent {
-  padding-left: var(--space-small);
-}
-
-.tileContentLabel {
-  flex: 0 1 auto;
-  width: 100%;
-  min-width: 0;
-  line-height: var(--line-height-heading);
-  max-height: calc(2em * var(--line-height-heading)); /* render max 2 rows */
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-all;
-  word-break: break-word;
-  hyphens: auto;
-  white-space: normal;
-  overflow: hidden;
-}
-
-.tileContentValue {
-  flex: 0 0 auto;
-  max-width: calc(100% + var(--space-xxsmall));
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.tileContentMetric {
-  font-weight: bold;
-}
-
-.tileContentDelta {
-  margin-left: var(--space-xxxsmall);
-}
-
-/** Tile size variation */
-.tileSizeSmall .tileContent {
-  padding: var(--space-xxxsmall);
-  font-size: 10px;
-}
-
-.tileSizeSmall .tileContentLabel {
-  margin-top: 0;
-}
-
-/** Tile diff variation */
-.tile {
-  outline: 1px solid rgba(255, 255, 255, 1);
-  color: var(--color-text);
-}
-
-.tile::before {
-  color: var(--color-highlight);
-  transition: var(--transition-out);
-  transition-property: opacity;
-  opacity: 0.6;
-}
-
-.tile:hover::before {
-  transition: var(--transition-in);
-  transition-property: opacity;
-  opacity: 0.4;
-}
-
-.tile:hover .tileContentLabel {
-  text-decoration: underline;
-}
-
-.tile-NO_CHANGE {
-  color: var(--color-text-light);
-}
-
-.tile-NO_CHANGE::before {
-  color: var(--color-gray-50);
-  opacity: 0.4;
-}
-
-.tile-NO_CHANGE:hover::before {
-  opacity: 0.2;
-}
-
-.tile-HIGH_NEGATIVE::before {
-  color: var(--color-red-100);
-}
-
-.tile-NEGATIVE::before {
-  color: var(--color-red-50);
-}
-
-.tile-LOW_NEGATIVE::before {
-  color: var(--color-red-50);
-}
-
-.tile-LOW_POSITIVE::before {
-  color: var(--color-green-50);
-}
-
-.tile-POSITIVE::before {
-  color: var(--color-green-50);
-}
-
-.tile-HIGH_POSITIVE::before {
-  color: var(--color-green-100);
-}
-
 /** empty message */
 .emptyMessage {
   position: absolute;
@@ -287,9 +23,6 @@
   top: 0;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .emptyMessageWrapper {
@@ -298,13 +31,8 @@
 }
 
 /** tooltip */
-.tileContentTooltipAnchor {
-  width: 100%;
-  height: 100%;
-}
-
 .tooltip {
-  z-index: var(--layer-high);
+  z-index: var(--layer-overlay);
   padding: var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
   width: calc(100vw - 2 * var(--space-small));
@@ -326,7 +54,8 @@
   font-size: var(--size-small);
 }
 
-/* prevent tooltip portal wrapper from capturing events */
+/* prevent the tooltip portal wrapper from capturing pointer events - the
+   treemap relies on pointer events reaching the canvas to track the hovered cell */
 div[role='presentation']:has(.tooltip) {
   pointer-events: none;
 }

package/lib/components/metrics-treemap/metrics-treemap.utils.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTreemapNodes = getTreemapNodes;
 exports.getTreemapNodesGroupedByPath = getTreemapNodesGroupedByPath;
+exports.getTreemapNodesIndex = getTreemapNodesIndex;
 exports.resolveGroupDeltaType = resolveGroupDeltaType;
+exports.getGroupRunInfo = getGroupRunInfo;
 exports.resolveTileGroupSizeDisplay = resolveTileGroupSizeDisplay;
 exports.resolveTileSizeDisplay = resolveTileSizeDisplay;
-exports.useTooltipStateWithMouseFollow = useTooltipStateWithMouseFollow;
+exports.useTreemapTooltipState = useTreemapTooltipState;
 const react_1 = require("react");
-const react_use_1 = require("react-use");
 const tooltip_1 = require("ariakit/tooltip");
 const utils_1 = require("@bundle-stats/utils");
 const metrics_treemap_constants_1 = require("./metrics-treemap.constants");
@@ -105,6 +106,17 @@ function getTreemapNodesGroupedByPath(items) {
         total,
     };
 }
+function getTreemapNodesIndex(node, index = new Map()) {
+    index.set(node.id, node);
+    node.children.forEach((childNode) => {
+        if ('children' in childNode) {
+            getTreemapNodesIndex(childNode, index);
+            return;
+        }
+        index.set(childNode.id, childNode);
+    });
+    return index;
+}
 function resolveGroupDeltaType(metricRunInfo) {
     if (!metricRunInfo) {
         return utils_1.DeltaType.NO_CHANGE;
@@ -118,6 +130,14 @@ function resolveGroupDeltaType(metricRunInfo) {
     }
     return utils_1.DeltaType.NO_CHANGE;
 }
+function getGroupRunInfo(total) {
+    const runInfo = (0, utils_1.getMetricRunInfo)(utils_1.METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE, total.current, total.baseline);
+    return {
+        runInfo,
+        baselineDisplayValue: (0, utils_1.formatFileSize)(total.baseline),
+        deltaType: resolveGroupDeltaType(runInfo),
+    };
+}
 const PADDING_TOP = 8;
 const PADDING_BOTTOM = 8;
 const PADDING_LEFT = 8;
@@ -151,23 +171,68 @@ function resolveTileSizeDisplay(width, height) {
     }
     return 'default';
 }
-function useTooltipStateWithMouseFollow(options) {
-    const { parentRef, gutter = 16, timeout = 240 } = options;
-    const pointer = (0, react_use_1.useMouseHovered)(parentRef, { whenHovered: true });
+function useTreemapTooltipState(options = {}) {
+    const { gutter = 16, timeout = 240, hideTimeout = timeout } = options;
+    const pointerRef = (0, react_1.useRef)(null);
+    const frameRef = (0, react_1.useRef)(0);
+    const hideTimeoutRef = (0, react_1.useRef)(0);
     const getAnchorRect = (0, react_1.useCallback)(() => {
-        if (pointer.docX === 0 && pointer.docY === 0 && pointer.elW === 0 && pointer.elH === 0) {
+        const pointer = pointerRef.current;
+        if (!pointer) {
             return null;
         }
-        const newRect = {
-            x: pointer.docX - (document?.defaultView?.scrollX ?? 0),
-            y: pointer.docY - (document?.defaultView?.scrollY ?? 0),
-            w: 1,
-            h: 1,
-        };
-        return newRect;
-    }, [pointer.docX, pointer.docY]);
+        return { x: pointer.x, y: pointer.y, w: 1, h: 1 };
+    }, []);
     const tooltipState = (0, tooltip_1.useTooltipState)({ gutter, getAnchorRect, timeout });
-    (0, react_use_1.useDebounce)(tooltipState.render, 10, [pointer.docX, pointer.docY]);
-    return tooltipState;
+    const { mounted, render, show, hide } = tooltipState;
+    const [hoveredNodeId, setHoveredNodeId] = (0, react_1.useState)(null);
+    const hoveredNodeIdRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => () => {
+        cancelAnimationFrame(frameRef.current);
+        window.clearTimeout(hideTimeoutRef.current);
+    }, []);
+    const setPointer = (0, react_1.useCallback)((x, y) => {
+        pointerRef.current = { x, y };
+        if (!mounted || frameRef.current) {
+            return;
+        }
+        frameRef.current = requestAnimationFrame(() => {
+            frameRef.current = 0;
+            render();
+        });
+    }, [mounted, render]);
+    const commitHoveredNode = (0, react_1.useCallback)((nodeId) => {
+        hoveredNodeIdRef.current = nodeId;
+        setHoveredNodeId(nodeId);
+        if (nodeId === null) {
+            hide();
+            return;
+        }
+        show();
+    }, [hide, show]);
+    const setHoveredNode = (0, react_1.useCallback)((nodeId) => {
+        window.clearTimeout(hideTimeoutRef.current);
+        hideTimeoutRef.current = 0;
+        if (nodeId === hoveredNodeIdRef.current) {
+            return;
+        }
+        if (nodeId !== null || !hideTimeout) {
+            commitHoveredNode(nodeId);
+            return;
+        }
+        hideTimeoutRef.current = window.setTimeout(() => {
+            hideTimeoutRef.current = 0;
+            commitHoveredNode(null);
+        }, hideTimeout);
+    }, [commitHoveredNode, hideTimeout]);
+    const clearHoveredNode = (0, react_1.useCallback)(() => {
+        window.clearTimeout(hideTimeoutRef.current);
+        hideTimeoutRef.current = 0;
+        if (hoveredNodeIdRef.current === null) {
+            return;
+        }
+        commitHoveredNode(null);
+    }, [commitHoveredNode]);
+    return { tooltipState, setPointer, hoveredNodeId, setHoveredNode, clearHoveredNode };
 }
 //# sourceMappingURL=metrics-treemap.utils.js.map