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

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

@@ -0,0 +1,46 @@
+import {
+  type MetricRunInfo,
+  type ReportMetricRow,
+  METRIC_TYPE_CONFIGS,
+  getMetricRunInfo,
+} from '@bundle-stats/utils';
+
+const METRIC_TYPE = METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE;
+
+/**
+ * Baseline value used by the delta fixtures
+ */
+export const BASELINE_VALUE = 10 * 1024;
+
+/**
+ * Current values resolving to every file size delta type (smaller is better)
+ */
+export const CURRENT_VALUE_BY_DELTA_TYPE = {
+  NO_CHANGE: BASELINE_VALUE,
+  LOW_NEGATIVE: BASELINE_VALUE * 1.02,
+  NEGATIVE: BASELINE_VALUE * 1.2,
+  HIGH_NEGATIVE: BASELINE_VALUE * 2,
+  LOW_POSITIVE: BASELINE_VALUE * 0.98,
+  POSITIVE: BASELINE_VALUE * 0.8,
+  HIGH_POSITIVE: BASELINE_VALUE * 0.4,
+} as const;
+
+/**
+ * Create a file size report row with the current and baseline runs
+ */
+export function createReportMetricRow(
+  key: string,
+  current: number,
+  baseline = BASELINE_VALUE,
+): ReportMetricRow {
+  return {
+    key,
+    label: key,
+    biggerIsBetter: METRIC_TYPE.biggerIsBetter,
+    changed: current !== baseline,
+    runs: [
+      getMetricRunInfo(METRIC_TYPE, current, baseline) as MetricRunInfo,
+      getMetricRunInfo(METRIC_TYPE, baseline),
+    ],
+  };
+}

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

@@ -1,33 +1,22 @@
 import React, {
   type ComponentProps,
-  type MouseEventHandler,
   type ReactNode,
-  type Ref,
-  type RefObject,
-  forwardRef,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
 } from 'react';
-import { useHoverDirty, useMeasure } from 'react-use';
+import { useMeasure } from 'react-use';
 import cx from 'classnames';
 import { HierarchyRectangularNode, hierarchy, treemap, treemapSquarify } from 'd3';
-import { Tooltip, TooltipArrow, TooltipAnchor } from 'ariakit/tooltip';
-import {
-  type ReportMetricRow,
-  type MetricRunInfo,
-  type MetricRunInfoBaseline,
-  METRIC_TYPE_CONFIGS,
-  formatFileSize,
-  getMetricRunInfo,
-} from '@bundle-stats/utils';
+import { Tooltip, TooltipArrow } from 'ariakit/tooltip';
+import type { ReportMetricRow, MetricRunInfo, MetricRunInfoBaseline } from '@bundle-stats/utils';
 
+import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { FileName } from '../../ui/file-name';
-import { Delta } from '../delta';
 import { RunInfo } from '../run-info';
 import {
-  type TreeLeaf,
   type TreeNode,
   type Tree,
   SQUARIFY_RATIO,
@@ -36,16 +25,15 @@ import {
   NESTED_PADDING,
   NESTED_PADDING_TOP,
   NESTED_PADDING_LEFT,
-  TileSizeDisplay,
+  NODE_ID_SELECTOR,
 } from './metrics-treemap.constants';
-import * as I18N from './metrics-treemap.i18n';
 import css from './metrics-treemap.module.css';
 import {
-  resolveGroupDeltaType,
-  resolveTileSizeDisplay,
-  resolveTileGroupSizeDisplay,
-  useTooltipStateWithMouseFollow,
+  getGroupRunInfo,
+  getTreemapNodesIndex,
+  useTreemapTooltipState,
 } from './metrics-treemap.utils';
+import { TileGroup } from './tile-group';
 
 interface TileTooltipContentProps {
   item: ReportMetricRow;
@@ -64,7 +52,8 @@ const TileTooltipContent = (props: TileTooltipContentProps) => {
       </h3>
       <RunInfo
         current={currentRun.displayValue}
-        delta={currentRun.displayDeltaPercentage}
+        delta={currentRun.displayDelta}
+        deltaPercentage={currentRun.displayDeltaPercentage}
         deltaType={currentRun.deltaType}
         baseline={baselineRun?.displayValue || '0B'}
       />
@@ -72,408 +61,46 @@ const TileTooltipContent = (props: TileTooltipContentProps) => {
   );
 };
 
-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;
+interface TileGroupTooltipContentProps {
+  node: Tree;
 }
 
-const TileContent = forwardRef((props: TileContentProps, ref: Ref<HTMLDivElement>) => {
-  const { label, sizeDisplay, item, runInfo } = props;
-
-  // Render only the container
-  if (sizeDisplay === 'minimal') {
-    return <div className={css.tileContent} ref={ref} />;
-  }
-
-  const resolvedLabel = label || item.label;
-
-  // Render only the label
-  if (sizeDisplay === 'small') {
-    return (
-      <div className={css.tileContent} ref={ref}>
-        <p className={css.tileContentLabel}>{resolvedLabel}</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className={css.tileContent} ref={ref}>
-      <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>
-    </div>
-  );
-});
-
-const TileContentWithTooltip = (props: TileContentProps & { parentRef: RefObject<Element> }) => {
-  const { label, sizeDisplay, item, runInfo, parentRef } = props;
-
-  const tooltipState = useTooltipStateWithMouseFollow({ parentRef });
-
-  return (
-    <>
-      <TooltipAnchor state={tooltipState} className={css.tileContentTooltipAnchor}>
-        <TileContent label={label} sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
-      </TooltipAnchor>
-      <Tooltip state={tooltipState} className={css.tooltip}>
-        <TooltipArrow state={tooltipState} size={16} className={css.tileTooltipArrow} />
-        <TileTooltipContent item={item} />
-      </Tooltip>
-    </>
-  );
-};
-
-interface TileProps {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-  data: TreeLeaf;
-  onClick?: (id: string) => void;
-}
-
-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 TileGroupTooltipContent = (props: TileGroupTooltipContentProps) => {
+  const { node } = props;
 
-  const contentRef = useRef<HTMLDivElement>(null);
-  const hover = useHoverDirty(contentRef);
+  // by default show the node id (full path) as title
+  const title = node.id || node.label;
+  const groupRunInfo = node.total && getGroupRunInfo(node.total);
 
-  const className = cx(
-    css.tile,
-    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}
-      ref={contentRef}
-      style={{ left, top, width, height }}
-      className={className}
-    >
-      {hover ? (
-        <TileContentWithTooltip
-          label={label}
-          sizeDisplay={sizeDisplay}
-          item={item}
-          runInfo={runInfo}
-          parentRef={contentRef}
-        />
-      ) : (
-        <TileContent label={label} sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
-      )}
-    </div>
-  );
-};
-
-interface TileGroupTitleTooltipContentProps {
-  title: string;
-  runInfo?: MetricRunInfo;
-  baselineDisplayValue?: string;
-}
-
-const TileGroupTitleTooltipContent = (props: TileGroupTitleTooltipContentProps) => {
-  const { title, runInfo, baselineDisplayValue } = props;
-
-  return (
-    <Stack space="small" className={css.tileTooltip}>
+    <Stack space="small" className={css.tileTooltipContent}>
       <h3 className={css.tileTooltipContentTitle}>
         <FileName as="code" name={title} />
       </h3>
-      {runInfo && (
+      {groupRunInfo && (
         <RunInfo
-          current={runInfo.displayValue}
-          baseline={baselineDisplayValue}
-          delta={runInfo.displayDeltaPercentage}
-          deltaType={runInfo.deltaType}
+          current={groupRunInfo.runInfo.displayValue}
+          baseline={groupRunInfo.baselineDisplayValue}
+          delta={groupRunInfo.runInfo.displayDeltaPercentage}
+          deltaType={groupRunInfo.runInfo.deltaType}
         />
       )}
     </Stack>
   );
 };
 
-interface TileGroupTitleContentProps {
-  title?: string;
-  runInfo?: MetricRunInfo;
-}
-
-const TileGroupTitleContent = (props: TileGroupTitleContentProps) => {
-  const { title, runInfo } = props;
-
-  return (
-    <div className={css.tileGroupTitleContent}>
-      {title && <span className={css.tileGroupTitleText}>{title}</span>}
-      {runInfo && (
-        <span className={css.tileGroupTitleTotal}>
-          {runInfo.displayValue}
-          {'displayDelta' in runInfo && `(${runInfo.displayDeltaPercentage})`}
-        </span>
-      )}
-    </div>
-  );
-};
-
-type TileGroupTitleContentWithTooltipProps = {
-  parentRef: RefObject<Element>;
-  tooltipContent: TileGroupTitleTooltipContentProps;
-} & TileGroupTitleContentProps;
-
-const TileGroupTitleContentWithTooltip = (props: TileGroupTitleContentWithTooltipProps) => {
-  const { parentRef, tooltipContent, ...restProps } = props;
-
-  const tooltipState = useTooltipStateWithMouseFollow({ parentRef });
-
-  return (
-    <>
-      <TooltipAnchor state={tooltipState} className={css.tileContentTooltipAnchor}>
-        <TileGroupTitleContent {...restProps} />
-      </TooltipAnchor>
-      <Tooltip state={tooltipState} className={css.tooltip}>
-        <TooltipArrow state={tooltipState} size={16} className={css.tileTooltipArrow} />
-        <TileGroupTitleTooltipContent {...tooltipContent} />
-      </Tooltip>
-    </>
-  );
-};
-
-type TileGroupTitleProps = Omit<TileGroupTitleContentWithTooltipProps, 'parentRef'>;
-
-const TileGroupTitle = (props: TileGroupTitleProps) => {
-  const { tooltipContent, ...restProps } = props;
-  const contentRef = useRef<HTMLDivElement>(null);
-  const hover = useHoverDirty(contentRef);
-
-  return (
-    <div className={css.tileGroupTitle} ref={contentRef}>
-      {hover ? (
-        <TileGroupTitleContentWithTooltip
-          parentRef={contentRef}
-          tooltipContent={tooltipContent}
-          {...restProps}
-        />
-      ) : (
-        <TileGroupTitleContent {...restProps} />
-      )}
-    </div>
-  );
-};
-
-interface TileGroupProps extends ComponentProps<'div'> {
-  /**
-   * Node title
-   */
-  title?: string;
-  /**
-   * Group sum
-   */
-  total?: Tree['total'];
-  /**
-   * Node id
-   */
-  id: string;
-  /**
-   * Node children
-   */
-  childNodes: HierarchyRectangularNode<TreeNode>['children'];
-  /**
-   * On click tile handler
-   */
-  onItemClick: TileProps['onClick'];
-  /**
-   * On click group title
-   */
-  onGroupClick?: (groupId: string) => void;
-
-  /**
-   * Node rectangle dimensions
-   */
-  width?: number;
-  height?: number;
-
-  /**
-   * Node rectangle relative coordinates (relative to parent)
-   */
-  left: number;
-  top: number;
-
-  /**
-   * Node rectangle absolute coordinates (relative to canvas)
-   */
-  absoluteLeft: number;
-  absoluteTop: number;
+interface TreemapTooltipContentProps {
+  node: TreeNode;
 }
 
-const TileGroup = (props: TileGroupProps) => {
-  const {
-    title = '',
-    total,
-    id,
-    childNodes,
-    onItemClick,
-    onGroupClick,
-    left,
-    top,
-    width,
-    height,
-    absoluteLeft,
-    absoluteTop,
-  } = props;
-
-  const onClick: MouseEventHandler<HTMLDivElement> = useCallback(
-    (event) => {
-      onGroupClick?.(id);
-      event.stopPropagation();
-    },
-    [onGroupClick, id],
-  );
+const TreemapTooltipContent = (props: TreemapTooltipContentProps) => {
+  const { node } = props;
 
-  const displaySize = useMemo(
-    () => resolveTileGroupSizeDisplay(width || 0, height || 0),
-    [width, height],
-  );
-
-  // Prepare data
-  const [runInfo, baselineDisplayValue, deltaType] = useMemo(() => {
-    if (!total) {
-      return [];
-    }
-
-    const resolvedRunInfo = getMetricRunInfo(
-      METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE,
-      total.current,
-      total.baseline,
-    ) as MetricRunInfo;
-    const resolvedBaselineDisplayValue = formatFileSize(total.baseline);
-    const resolvedDeltaType = resolveGroupDeltaType(resolvedRunInfo);
-
-    return [resolvedRunInfo, resolvedBaselineDisplayValue, resolvedDeltaType];
-  }, [total]);
-
-  const rootClassName = cx(
-    css.tileGroup,
-    css[`tileGroup--${deltaType}`],
-    css[`tileGroup--${displaySize}`],
-  );
-
-  // Tooltip data
-  // - by default show the node id (full path) as title
-  const tooltipContent = {
-    title: id || title,
-    runInfo,
-    baselineDisplayValue,
-  } as TileGroupTitleTooltipContentProps;
-
-  if (title && displaySize === 'minimal') {
-    return (
-      <div
-        onClick={onClick}
-        role="button"
-        aria-label={I18N.TILE_GROUP_LABEL}
-        className={rootClassName}
-        style={{ left, top, width, height }}
-      >
-        <TileGroupTitle tooltipContent={tooltipContent} />
-      </div>
-    );
-  }
-
-  if (title && displaySize === 'small') {
-    return (
-      <div
-        onClick={onClick}
-        role="button"
-        aria-label={I18N.TILE_GROUP_LABEL}
-        style={{ left, top, width, height }}
-        className={rootClassName}
-      >
-        <TileGroupTitle title={title} tooltipContent={tooltipContent} />
-      </div>
-    );
+  if ('item' in node) {
+    return <TileTooltipContent item={node.item} />;
   }
 
-  return (
-    <div
-      onClick={onClick}
-      role="button"
-      aria-label={I18N.TILE_GROUP_LABEL}
-      className={cx(rootClassName, css.tileGroupSizeDefault)}
-      style={{ left, top, width, height }}
-    >
-      <TileGroupTitle title={title} runInfo={runInfo} tooltipContent={tooltipContent} />
-      {childNodes?.map((childNode) => {
-        if ('children' in childNode) {
-          const groupData = childNode.data as Tree;
-
-          return (
-            <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 (
-          <Tile
-            data={childNode.data as TreeLeaf}
-            left={childNode.x0 - absoluteLeft}
-            top={childNode.y0 - absoluteTop}
-            width={childNode.x1 - childNode.x0}
-            height={childNode.y1 - childNode.y0}
-            onClick={onItemClick}
-            key={childNode.data.id}
-          />
-        );
-      })}
-    </div>
-  );
+  return <TileGroupTooltipContent node={node} />;
 };
 
 interface UseMetricsTreemapHierarchyParams {
@@ -542,33 +169,101 @@ export const MetricsTreemap = (props: MetricsTreemapProps & ComponentProps<'div'
   const [containerRef, { width, height }] = useMeasure<HTMLDivElement>();
   const rootNode = useMetricsTreemapHierarchy({ treeNodes, width, height, nested });
 
+  /**
+   * A single tooltip is shared by every tile and tile group title:
+   * - tiles are tagged with `data-treemap-id`
+   * - the pointer is tracked by one delegated handler on the canvas
+   * - hiding is deferred so that the tooltip stays up while the pointer
+   *   crosses the gutter between two tiles
+   */
+  const nodesIndex = useMemo(() => getTreemapNodesIndex(treeNodes), [treeNodes]);
+  const { tooltipState, setPointer, hoveredNodeId, setHoveredNode, clearHoveredNode } =
+    useTreemapTooltipState();
+  const canvasRef = useRef<HTMLDivElement>(null);
+
+  // Resolved on render so that the content cannot go stale when the data changes
+  const tooltipNode = hoveredNodeId === null ? null : nodesIndex.get(hoveredNodeId);
+
+  const handlePointerEvent = useCallback(
+    (event: MouseEvent) => {
+      // Anchor to the canvas to let ariakit track scrolling/resizing
+      tooltipState.anchorRef.current = canvasRef.current;
+
+      setPointer(event.clientX, event.clientY);
+
+      const target = (event.target as HTMLElement | null)?.closest<HTMLElement>(NODE_ID_SELECTOR);
+      setHoveredNode(target?.dataset.treemapId ?? null);
+    },
+    [tooltipState, setPointer, setHoveredNode],
+  );
+
+  const hasNodes = Boolean(rootNode.children && rootNode.children.length > 0);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+
+    if (!canvas) {
+      return undefined;
+    }
+
+    /**
+     * `mouseover` is needed on top of `mousemove`: the hovered element can
+     * change without the pointer moving (scrolling, resizing, layout shifts),
+     * and the browser only emits boundary events in that case.
+     *
+     * Native listeners are used instead of the React props because React skips
+     * `mouseover` dispatch when `relatedTarget` is inside the same tree.
+     */
+    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]);
+
+  // Keep the cells out of the tooltip render path
+  // (`rootNode` is mutated in place by d3, so the layout size drives the memo)
+  const canvasContent = useMemo(
+    () => (
+      <TileGroup
+        title={nested ? rootNode.data.label : undefined}
+        total={(rootNode.data as Tree).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 (
-    <div
-      className={cx(css.root, nested && css.nested, className)}
-      {...restProps}
-      ref={containerRef}
-    >
-      {rootNode.children && rootNode.children?.length > 0 ? (
-        <div className={css.canvas}>
-          <TileGroup
-            title={nested ? rootNode.data.label : undefined}
-            total={(rootNode.data as Tree).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}
-          />
+    <div className={cx(css.root, className)} {...restProps} ref={containerRef}>
+      {hasNodes ? (
+        <div className={css.canvas} ref={canvasRef}>
+          {canvasContent}
         </div>
       ) : (
-        <div className={css.emptyMessage}>
+        <FlexStack alignItems="center" justifyContent="center" className={css.emptyMessage}>
           <div className={css.emptyMessageWrapper}>{emptyMessage}</div>
-        </div>
+        </FlexStack>
+      )}
+      {tooltipNode && (
+        <Tooltip state={tooltipState} className={css.tooltip}>
+          <TooltipArrow state={tooltipState} size={16} className={css.tileTooltipArrow} />
+          <TreemapTooltipContent node={tooltipNode} />
+        </Tooltip>
       )}
     </div>
   );