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

package/src/components/metrics-treemap/metrics-treemap.utils.ts

@@ -1,15 +1,18 @@
-import { type RefObject, useCallback } from 'react';
-import { useDebounce, useMouseHovered } from 'react-use';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTooltipState } from 'ariakit/tooltip';
 import {
   DeltaType,
   type MetricRunInfoBaseline,
   type MetricRunInfo,
   type ReportMetricRow,
+  METRIC_TYPE_CONFIGS,
+  formatFileSize,
+  getMetricRunInfo,
 } from '@bundle-stats/utils';
 
 import {
   type TreeLeaf,
+  type TreeNode,
   type TreeNodeChildren,
   type Tree,
   type TreeTotal,
@@ -158,6 +161,28 @@ export function getTreemapNodesGroupedByPath(items: Array<ReportMetricRow>): Tre
   };
 }
 
+/**
+ * Index every tree node by id, to allow resolving the hovered node from the
+ * `data-treemap-id` DOM marker without walking the tree on every pointer move
+ */
+export function getTreemapNodesIndex(
+  node: Tree,
+  index: Map<string, TreeNode> = new Map(),
+): Map<string, TreeNode> {
+  index.set(node.id, node);
+
+  node.children.forEach((childNode) => {
+    if ('children' in childNode) {
+      getTreemapNodesIndex(childNode, index);
+      return;
+    }
+
+    index.set(childNode.id, childNode);
+  });
+
+  return index;
+}
+
 export function resolveGroupDeltaType(
   metricRunInfo?: MetricRunInfo | MetricRunInfoBaseline,
 ): DeltaType.NO_CHANGE | DeltaType.NEGATIVE | DeltaType.POSITIVE {
@@ -178,6 +203,23 @@ export function resolveGroupDeltaType(
   return DeltaType.NO_CHANGE;
 }
 
+/**
+ * Resolve the run info of a tile group from the children total
+ */
+export function getGroupRunInfo(total: TreeTotal) {
+  const runInfo = getMetricRunInfo(
+    METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE,
+    total.current,
+    total.baseline,
+  ) as MetricRunInfo;
+
+  return {
+    runInfo,
+    baselineDisplayValue: formatFileSize(total.baseline),
+    deltaType: resolveGroupDeltaType(runInfo),
+  };
+}
+
 /**
  * Resolve the tile's size using predefined values to avoid
  * computing the size of the content for every tile
@@ -225,50 +267,142 @@ export function resolveTileSizeDisplay(width: number, height: number): TileSizeD
   return 'default';
 }
 
-interface UseTooltipStateWithMouseFollowOptions {
-  /**
-   * React ref to parent div
-   */
-  parentRef: RefObject<Element>;
+interface UseTreemapTooltipStateOptions {
   /**
    * Tooltip gutter
    */
   gutter?: number;
   /**
-   * Tooltip timeout
+   * Delay before showing the tooltip
    */
   timeout?: number;
+  /**
+   * Delay before hiding the tooltip once the pointer is no longer over a cell.
+   *
+   * Tiles are separated by a gutter that belongs to no node, so without this
+   * grace period moving from one cell to another would close and reopen the
+   * tooltip every time the pointer crosses the gap.
+   */
+  hideTimeout?: number;
 }
 
 /**
- * Ariakit tooltip state hook with mouse follow functionality
+ * Ariakit tooltip state shared by every tile/tile group of a treemap.
+ *
+ * The tooltip is anchored to a virtual 1x1 rect that follows the pointer, so
+ * no `TooltipAnchor` is rendered per cell: the anchor position is stored on a
+ * ref and ariakit is asked to reposition at most once per animation frame,
+ * which keeps the treemap itself out of the pointer move render path.
+ *
+ * The hovered node id is owned here as well, so that all the tooltip timing
+ * lives in a single place.
  */
-export function useTooltipStateWithMouseFollow(options: UseTooltipStateWithMouseFollowOptions) {
-  const { parentRef, gutter = 16, timeout = 240 } = options;
+export function useTreemapTooltipState(options: UseTreemapTooltipStateOptions = {}) {
+  const { gutter = 16, timeout = 240, hideTimeout = timeout } = options;
 
-  const pointer = useMouseHovered(parentRef, { whenHovered: true });
+  const pointerRef = useRef<{ x: number; y: number } | null>(null);
+  const frameRef = useRef(0);
+  const hideTimeoutRef = useRef(0);
 
-  // Return custom rect based on the mouse position
+  // Return custom rect based on the pointer position
   const getAnchorRect = useCallback(() => {
-    // Skip custom component rect area if the pointer position is empty
-    if (pointer.docX === 0 && pointer.docY === 0 && pointer.elW === 0 && pointer.elH === 0) {
+    const pointer = pointerRef.current;
+
+    // Skip the custom rect until we have a pointer position
+    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 = useTooltipState({ gutter, getAnchorRect, timeout });
+  const { mounted, render, show, hide } = tooltipState;
+
+  const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null);
+  const hoveredNodeIdRef = useRef<string | null>(null);
+
+  useEffect(
+    () => () => {
+      cancelAnimationFrame(frameRef.current);
+      window.clearTimeout(hideTimeoutRef.current);
+    },
+    [],
+  );
+
+  const setPointer = useCallback(
+    (x: number, y: number) => {
+      pointerRef.current = { x, y };
+
+      // Reposition only while the tooltip is visible, once per frame
+      if (!mounted || frameRef.current) {
+        return;
+      }
+
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = 0;
+        render();
+      });
+    },
+    [mounted, render],
+  );
+
+  const commitHoveredNode = useCallback(
+    (nodeId: string | null) => {
+      hoveredNodeIdRef.current = nodeId;
+      setHoveredNodeId(nodeId);
+
+      if (nodeId === null) {
+        hide();
+        return;
+      }
+
+      show();
+    },
+    [hide, show],
+  );
+
+  /**
+   * Set the hovered node. Showing another node is applied right away, while
+   * hiding is deferred so that the tooltip survives the gap between two cells.
+   */
+  const setHoveredNode = useCallback(
+    (nodeId: string | null) => {
+      window.clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = 0;
+
+      // Guard against re-triggering `show`, which would restart the show timeout
+      if (nodeId === hoveredNodeIdRef.current) {
+        return;
+      }
+
+      if (nodeId !== null || !hideTimeout) {
+        commitHoveredNode(nodeId);
+        return;
+      }
+
+      hideTimeoutRef.current = window.setTimeout(() => {
+        hideTimeoutRef.current = 0;
+        commitHoveredNode(null);
+      }, hideTimeout);
+    },
+    [commitHoveredNode, hideTimeout],
+  );
+
+  /**
+   * Hide the tooltip right away, without the grace period - the pointer left
+   * the treemap, there is no next cell to move to.
+   */
+  const clearHoveredNode = useCallback(() => {
+    window.clearTimeout(hideTimeoutRef.current);
+    hideTimeoutRef.current = 0;
+
+    if (hoveredNodeIdRef.current === null) {
+      return;
+    }
 
-  // Update tooltip position when pointer values change
-  useDebounce(tooltipState.render, 10, [pointer.docX, pointer.docY]);
+    commitHoveredNode(null);
+  }, [commitHoveredNode]);
 
-  return tooltipState;
+  return { tooltipState, setPointer, hoveredNodeId, setHoveredNode, clearHoveredNode };
 }

package/src/components/metrics-treemap/tile/index.ts

@@ -0,0 +1 @@
+export * from './tile';

package/src/components/metrics-treemap/tile/tile.module.css

@@ -0,0 +1,145 @@
+/** Leaf wrapper button */
+.root {
+  position: absolute;
+  appearance: none;
+  border: 0;
+  border-radius: var(--radius-xsmall);
+  padding: 0;
+  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;
+}
+
+.root::before {
+  content: '';
+  display: block;
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background-color: currentColor;
+}
+
+.tileContent {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  padding: var(--space-xxsmall);
+  line-height: var(--line-height-heading);
+  cursor: default;
+}
+
+/** 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: var(--size-xsmall);
+}
+
+.tileSizeSmall .tileContentLabel {
+  margin-top: 0;
+}
+
+/** Tile diff variation */
+.root {
+  outline: 1px solid rgba(255, 255, 255, 1);
+  color: var(--color-text);
+}
+
+.root::before {
+  color: var(--color-highlight);
+  transition: var(--transition-out);
+  transition-property: opacity;
+  opacity: 0.6;
+}
+
+.root:hover::before {
+  transition: var(--transition-in);
+  transition-property: opacity;
+  opacity: 0.8;
+}
+
+.root: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);
+}

package/src/components/metrics-treemap/tile/tile.stories.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import { getWrapperDecorator } from '../../../stories';
+import { type TreeLeaf, PADDING_INNER } from '../metrics-treemap.constants';
+import {
+  CURRENT_VALUE_BY_DELTA_TYPE,
+  createReportMetricRow,
+} from '../metrics-treemap.stories.utils';
+import { Tile } from '.';
+
+function createTreeLeaf(current: number): TreeLeaf {
+  const item = createReportMetricRow('src/components/button/button.tsx', current);
+
+  return {
+    id: item.key,
+    label: 'button.tsx',
+    value: current,
+    item,
+  };
+}
+
+const meta = {
+  title: 'Components/MetricsTreemap/Tile',
+  component: Tile,
+  decorators: [
+    // Tiles are absolutely positioned inside the treemap canvas
+    (Story, { args }) => (
+      <div
+        style={{
+          position: 'relative',
+          width: args.left + args.width,
+          height: args.top + args.height,
+        }}
+      >
+        <Story />
+      </div>
+    ),
+    getWrapperDecorator(),
+  ],
+  args: {
+    left: 0,
+    top: 0,
+    width: 240,
+    height: 96,
+    data: createTreeLeaf(CURRENT_VALUE_BY_DELTA_TYPE.NEGATIVE),
+    onClick: action('CLICK'),
+  },
+} satisfies Meta<typeof Tile>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/**
+ * Size
+ */
+export const SizeSmall: Story = {
+  args: {
+    width: 160,
+    height: 36,
+  },
+};
+
+export const SizeMinimal: Story = {
+  args: {
+    width: 48,
+    height: 24,
+  },
+};
+
+/**
+ * Position
+ */
+export const FirstColumn: Story = {
+  args: {
+    left: PADDING_INNER,
+  },
+};
+
+/**
+ * Label
+ */
+export const LabelFallback: Story = {
+  args: {
+    data: {
+      ...createTreeLeaf(CURRENT_VALUE_BY_DELTA_TYPE.NEGATIVE),
+      label: '',
+    },
+  },
+};
+
+/**
+ * Delta type
+ */
+export const NoChange: Story = {
+  args: {
+    data: createTreeLeaf(CURRENT_VALUE_BY_DELTA_TYPE.NO_CHANGE),
+  },
+};
+
+export const LowNegative: Story = {
+  args: {
+    data: createTreeLeaf(CURRENT_VALUE_BY_DELTA_TYPE.LOW_NEGATIVE),
+  },
+};
+
+export const Negative: Story = {
+  args: {
+    data: createTreeLeaf(CURRENT_VALUE_BY_DELTA_TYPE.NEGATIVE),
+  },
+};
+
+export const HighNegative: Story = {
+  args: {
+    data: createTreeLeaf(CURRENT_VALUE_BY_DELTA_TYPE.HIGH_NEGATIVE),
+  },
+};
+
+export const LowPositive: Story = {
+  args: {
+    data: createTreeLeaf(CURRENT_VALUE_BY_DELTA_TYPE.LOW_POSITIVE),
+  },
+};
+
+export const Positive: Story = {
+  args: {
+    data: createTreeLeaf(CURRENT_VALUE_BY_DELTA_TYPE.POSITIVE),
+  },
+};
+
+export const HighPositive: Story = {
+  args: {
+    data: createTreeLeaf(CURRENT_VALUE_BY_DELTA_TYPE.HIGH_POSITIVE),
+  },
+};

package/src/components/metrics-treemap/tile/tile.tsx

@@ -0,0 +1,121 @@
+import React, { type ComponentProps, type MouseEventHandler, useCallback, useMemo } from 'react';
+import cx from 'classnames';
+import type { MetricRunInfo, ReportMetricRow } from '@bundle-stats/utils';
+
+import { FlexStack } from '../../../layout/flex-stack';
+import { Delta } from '../../delta';
+import { type TreeLeaf, PADDING_INNER, TileSizeDisplay } from '../metrics-treemap.constants';
+import * as I18N from '../metrics-treemap.i18n';
+import { resolveTileSizeDisplay } from '../metrics-treemap.utils';
+import css from './tile.module.css';
+
+interface TileContentProps {
+  /**
+   * Node label
+   */
+  label: string;
+  /**
+   * Tile id - metric label or basename for grouped tiles
+   */
+  item: ReportMetricRow;
+  /**
+   * The estimated size of the tile
+   */
+  sizeDisplay: TileSizeDisplay;
+  /**
+   * Metric run info
+   */
+  runInfo: MetricRunInfo;
+}
+
+const TileContentContainer = (props: ComponentProps<'div'>) => (
+  <FlexStack
+    direction="column"
+    justifyContent="center"
+    gap="xxxsmall"
+    className={css.tileContent}
+    {...props}
+  />
+);
+
+const TileContent = (props: TileContentProps) => {
+  const { label, sizeDisplay, item, runInfo } = props;
+
+  // Render only the container
+  if (sizeDisplay === 'minimal') {
+    return <TileContentContainer />;
+  }
+
+  const resolvedLabel = label || item.label;
+
+  // Render only the label
+  if (sizeDisplay === 'small') {
+    return (
+      <TileContentContainer>
+        <p className={css.tileContentLabel}>{resolvedLabel}</p>
+      </TileContentContainer>
+    );
+  }
+
+  return (
+    <TileContentContainer>
+      <p className={css.tileContentLabel}>{label || item.label}</p>
+      <p className={css.tileContentValue}>
+        <span className={css.tileContentMetric}>{runInfo.displayValue}</span>
+        <Delta
+          className={css.tileContentDelta}
+          displayValue={runInfo.displayDeltaPercentage}
+          deltaType={runInfo.deltaType}
+        />
+      </p>
+    </TileContentContainer>
+  );
+};
+
+export interface TileProps {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  data: TreeLeaf;
+  onClick?: (id: string) => void;
+}
+
+export const Tile = (props: TileProps) => {
+  const { left, top, width, height, data, onClick } = props;
+
+  const { item, label } = data;
+  const runInfo = item.runs?.[0] as MetricRunInfo;
+
+  const sizeDisplay = useMemo(() => resolveTileSizeDisplay(width, height), [width, height]);
+  const handleOnClick: MouseEventHandler<HTMLDivElement> = useCallback(
+    (event) => {
+      event.stopPropagation();
+      onClick?.(item.key);
+    },
+    [item.key, onClick],
+  );
+
+  const className = cx(
+    css.root,
+    css[`tile-${runInfo.deltaType}`],
+    sizeDisplay === 'small' && css.tileSizeSmall,
+    sizeDisplay === 'default' && css.tileSizeDefault,
+    left === PADDING_INNER && css.tileFirstCol,
+  );
+
+  /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus */
+  return (
+    <div
+      onClick={handleOnClick}
+      role="button"
+      aria-label={I18N.TILE_LABEL}
+      data-treemap-id={data.id}
+      data-treemap-tile
+      style={{ left, top, width, height }}
+      className={className}
+    >
+      <TileContent label={label} sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
+    </div>
+  );
+};

package/src/components/metrics-treemap/tile-group/index.ts

@@ -0,0 +1 @@
+export * from './tile-group';

package/src/components/metrics-treemap/tile-group/tile-group.module.css

@@ -0,0 +1,57 @@
+.root {
+  border-radius: var(--radius-xsmall);
+  position: absolute;
+}
+
+/** Tile group size variation */
+.root {
+  transition: var(--transition-out);
+  transition-property: background-color, outline;
+}
+
+/** Tile group nested variation */
+.root.nested {
+  background-color: rgba(27, 26, 33, 0.03);
+  outline: 1px solid rgba(255, 255, 255, 0.8);
+}
+
+.root.nested:has(> [data-treemap-tile-group-title]:hover),
+.root.nested:has(> [data-treemap-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(> [data-treemap-tile-group-title]:hover),
+.nested.tileGroup--NEGATIVE:has(> [data-treemap-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(> [data-treemap-tile-group-title]:hover),
+.nested.tileGroup--POSITIVE:has(> [data-treemap-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(> [data-treemap-tile-group-title]:hover),
+.nested.tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> [data-treemap-tile]:hover),
+.nested.tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> [data-treemap-tile-group-title]:hover),
+.nested.tileGroup--NEGATIVE > .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> [data-treemap-tile]:hover) {
+  background-color: var(--color-background);
+  background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
+}