@bundle-stats/ui 4.13.0-beta.9 → 4.13.0-rc.1

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

@@ -1,65 +1,65 @@
-import React, { RefObject, forwardRef, useCallback, useMemo, useRef } from 'react';
-import { useDebounce, useHoverDirty, useMeasure, useMouseHovered } from 'react-use';
+import React, {
+  type ComponentProps,
+  type MouseEventHandler,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+  forwardRef,
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
+import { useHoverDirty, useMeasure } from 'react-use';
 import cx from 'classnames';
-import type { ReportMetricRow, MetricRunInfo, MetricRunInfoBaseline } from '@bundle-stats/utils';
-import { hierarchy, treemap, treemapSquarify } from 'd3';
-import { Tooltip, TooltipArrow, TooltipAnchor, useTooltipState } from 'ariakit/tooltip';
+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 { 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,
+  PADDING_OUTER,
+  PADDING_INNER,
+  NESTED_PADDING,
+  NESTED_PADDING_TOP,
+  NESTED_PADDING_LEFT,
+  TileSizeDisplay,
+} from './metrics-treemap.constants';
+import * as I18N from './metrics-treemap.i18n';
 import css from './metrics-treemap.module.css';
-
-const SQUARIFY_RATIO = 1.33;
-const PADDING_OUTER = 0;
-const PADDING_INNER = 2;
-
-type TileSizeDisplay = 'minimal' | 'small' | 'default';
-
-/**
- * Resolve the tile size using predefined values to avoid
- * computing the size of the content for every tile
- */
-const PADDING_TOP = 4;
-const PADDING_BOTTOM = 2; // substracted to allow longer texts to appear
-const PADDING_LEFT = 16;
-const PADDING_RIGHT = 4; // substracted to allow longer texts to not break
-const VERTICAL_SPACING = 4;
-const LINE_HEIGHT = 16;
-const LINE_HEIGHT_SMALL = 13.3;
-
-function resolveLeafSizeDisplay(width: number, height: number): TileSizeDisplay {
-  if (
-    height > PADDING_TOP + PADDING_BOTTOM + VERTICAL_SPACING + LINE_HEIGHT * 2 &&
-    width > PADDING_LEFT + PADDING_RIGHT + 128
-  ) {
-    return 'default';
-  }
-
-  if (
-    height > PADDING_TOP + PADDING_BOTTOM + LINE_HEIGHT_SMALL * 2 &&
-    width > PADDING_LEFT + PADDING_BOTTOM + 48
-  ) {
-    return 'small';
-  }
-
-  return 'minimal';
-}
-
-interface LeafTooltipContentProps {
+import {
+  resolveGroupDeltaType,
+  resolveTileSizeDisplay,
+  resolveTileGroupSizeDisplay,
+  useTooltipStateWithMouseFollow,
+} from './metrics-treemap.utils';
+
+interface TileTooltipContentProps {
   item: ReportMetricRow;
 }
 
-const LeafTooltipContent = (props: LeafTooltipContentProps) => {
+const TileTooltipContent = (props: TileTooltipContentProps) => {
   const { item } = props;
 
   const currentRun = item.runs[0] as MetricRunInfo;
   const baselineRun = item.runs[item.runs.length - 1] as MetricRunInfoBaseline;
 
   return (
-    <Stack space="small" className={css.leafTooltipContent}>
-      <h3 className={css.leafTooltipContentTitle}>
+    <Stack space="small" className={css.tileTooltipContent}>
+      <h3 className={css.tileTooltipContentTitle}>
         <FileName as="code" name={item.label} />
       </h3>
       <RunInfo
@@ -72,227 +72,496 @@ const LeafTooltipContent = (props: LeafTooltipContentProps) => {
   );
 };
 
-interface LeafContentProps {
-  sizeDisplay: 'minimal' | 'small' | 'default';
+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 LeafContent = forwardRef((props: LeafContentProps, ref: React.Ref<HTMLDivElement>) => {
-  const { sizeDisplay, item, runInfo } = props;
+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.leafContent} ref={ref} />;
+    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.leafContent} ref={ref}>
-      <FileName as="p" className={css.leadContentLabel} name={item.label} />
-      {sizeDisplay !== 'small' && (
-        <p className={css.leadContentValue}>
-          <span className={css.leadContentMetric}>{runInfo.displayValue}</span>
-          <Delta
-            className={css.leadContentDelta}
-            displayValue={runInfo.displayDeltaPercentage}
-            deltaType={runInfo.deltaType}
-          />
-        </p>
-      )}
+    <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 LeafContentWithTooltip = (props: LeafContentProps & { parentRef: RefObject<Element> }) => {
-  const { sizeDisplay, item, runInfo, parentRef } = props;
+const TileContentWithTooltip = (props: TileContentProps & { parentRef: RefObject<Element> }) => {
+  const { label, sizeDisplay, item, runInfo, parentRef } = props;
 
-  const pointer = useMouseHovered(parentRef, { whenHovered: true });
-
-  // Return custom rect based on the mouse 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) {
-      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]);
-
-  const tooltipState = useTooltipState({ gutter: 12, getAnchorRect, timeout: 120 });
-
-  // Update tooltip position when poiner values are changing
-  useDebounce(tooltipState.render, 5, [pointer.docX, pointer.docY]);
+  const tooltipState = useTooltipStateWithMouseFollow({ parentRef });
 
   return (
     <>
-      <TooltipAnchor state={tooltipState} className={css.leafContentTooltipAnchor}>
-        <LeafContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
+      <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.leafTooltipArrow} />
-        <LeafTooltipContent item={item} />
+        <TooltipArrow state={tooltipState} size={16} className={css.tileTooltipArrow} />
+        <TileTooltipContent item={item} />
       </Tooltip>
     </>
   );
 };
 
-interface TreeNode {
-  id: string;
-  value: number;
-  item: ReportMetricRow;
-  children?: Array<TreeNode>;
-}
-
-interface RootTree {
-  id: string;
-  value: number;
-  children: Array<TreeNode>;
-}
-
-interface LeafProps {
+interface TileProps {
   left: number;
   top: number;
   width: number;
   height: number;
-  data: TreeNode;
+  data: TreeLeaf;
   onClick?: (id: string) => void;
 }
 
-const Leaf = (props: LeafProps) => {
+const Tile = (props: TileProps) => {
   const { left, top, width, height, data, onClick } = props;
 
-  const { item } = data;
+  const { item, label } = data;
   const runInfo = item.runs?.[0] as MetricRunInfo;
 
-  const sizeDisplay = useMemo(() => resolveLeafSizeDisplay(width, height), [width, height]);
-  const handleOnClick = useCallback(() => onClick?.(item.key), [item.key, onClick]);
+  const sizeDisplay = useMemo(() => resolveTileSizeDisplay(width, height), [width, height]);
+  const handleOnClick: MouseEventHandler<HTMLDivElement> = useCallback(
+    (event) => {
+      event.stopPropagation();
+      onClick?.(item.key);
+    },
+    [item.key, onClick],
+  );
 
-  const leafContentRef = useRef<HTMLButtonElement>(null);
-  const hover = useHoverDirty(leafContentRef);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const hover = useHoverDirty(contentRef);
 
-  const leafClassName = cx(
-    css.leaf,
-    css[`leaf-${runInfo.deltaType}`],
-    sizeDisplay === 'small' && css.leafSmall,
-    left === 0 && css.leafFirstCol,
+  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 (
-    <button
-      type="button"
+    <div
       onClick={handleOnClick}
-      ref={leafContentRef}
+      role="button"
+      aria-label={I18N.TILE_LABEL}
+      ref={contentRef}
       style={{ left, top, width, height }}
-      className={leafClassName}
+      className={className}
     >
       {hover ? (
-        <LeafContentWithTooltip
+        <TileContentWithTooltip
+          label={label}
           sizeDisplay={sizeDisplay}
           item={item}
           runInfo={runInfo}
-          parentRef={leafContentRef}
+          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}>
+      <h3 className={css.tileTooltipContentTitle}>
+        <FileName as="code" name={title} />
+      </h3>
+      <RunInfo
+        current={runInfo.displayValue}
+        baseline={baselineDisplayValue}
+        delta={runInfo.displayDeltaPercentage}
+        deltaType={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}
         />
       ) : (
-        <LeafContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
+        <TileGroupTitleContent {...restProps} />
       )}
-    </button>
+    </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;
+}
+
+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 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>
+    );
+  }
+
+  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>
   );
 };
 
 interface UseMetricsTreemapHierarchyParams {
-  items: Array<ReportMetricRow>;
+  treeNodes: Tree;
   width: number;
   height: number;
+  nested: boolean;
 }
 
 function useMetricsTreemapHierarchy(params: UseMetricsTreemapHierarchyParams) {
-  const { items, width, height } = params;
+  const { treeNodes, width, height, nested } = params;
 
   const treemapHierarchy = useMemo(() => {
-    const children = items.map((item) => {
-      /**
-       * Set leaf value to the largest run value to allow to
-       * display the impact of deleted / items
-       */
-      const values = item.runs.map((run) => run?.value || 0);
-      const value = Math.max(...values);
-
-      return {
-        id: item.key,
-        value,
-        item,
-      };
-    });
-
-    const treemapData = {
-      id: 'root',
-      name: 'root',
-      value: 0,
-      children,
-    };
-
-    const customHierarchy = hierarchy<RootTree>(treemapData);
+    const customHierarchy = hierarchy<Tree>(treeNodes);
+
     customHierarchy.sum((node) => node.value);
+    // sort by value descending for all cases
     // @ts-expect-error
     customHierarchy.sort((a, b) => b.value - a.value);
 
     return customHierarchy;
-  }, [items]);
+  }, [treeNodes]);
 
-  const cells = useMemo(() => {
-    const createTremapLayout = treemap()
+  const treemapNodes = useMemo(() => {
+    let createTremapLayout = treemap()
       .size([width, height])
       .tile(treemapSquarify.ratio(SQUARIFY_RATIO))
-      .paddingOuter(PADDING_OUTER)
-      .paddingInner(PADDING_INNER);
-    // @ts-expect-error
-    const tremapLayout = createTremapLayout(treemapHierarchy);
+      .paddingOuter(PADDING_OUTER);
+
+    // Add padding top for group title
+    if (nested) {
+      createTremapLayout = createTremapLayout
+        .padding(NESTED_PADDING)
+        .paddingLeft(NESTED_PADDING_LEFT)
+        .paddingTop(NESTED_PADDING_TOP);
+    } else {
+      createTremapLayout = createTremapLayout.paddingInner(PADDING_INNER);
+    }
 
-    return tremapLayout.leaves().filter((leaf) => Boolean(leaf.parent));
+    // @ts-expect-error
+    return createTremapLayout(treemapHierarchy) as HierarchyRectangularNode<TreeNode>;
   }, [height, width, treemapHierarchy]);
 
-  return cells;
+  return treemapNodes;
 }
 
 interface MetricsTreemapProps {
-  items: Array<ReportMetricRow>;
-  emptyMessage?: React.ReactNode;
+  treeNodes: Tree;
+  emptyMessage?: ReactNode;
+  nested?: boolean;
   onItemClick?: (entryId: string) => void;
+  onGroupClick?: (entryId: string) => void;
 }
 
-export const MetricsTreemap = (props: MetricsTreemapProps & React.ComponentProps<'div'>) => {
-  const { className = '', items, onItemClick, emptyMessage = 'No data', ...restProps } = props;
+export const MetricsTreemap = (props: MetricsTreemapProps & ComponentProps<'div'>) => {
+  const {
+    className = '',
+    treeNodes,
+    onItemClick,
+    onGroupClick,
+    emptyMessage = 'No data',
+    nested = false,
+    ...restProps
+  } = props;
 
   const [containerRef, { width, height }] = useMeasure<HTMLDivElement>();
-  const cells = useMetricsTreemapHierarchy({ items, width, height });
+  const rootNode = useMetricsTreemapHierarchy({ treeNodes, width, height, nested });
 
   return (
-    <div className={cx(css.root, className)} {...restProps} ref={containerRef}>
-      {cells.length > 0 ? (
+    <div
+      className={cx(css.root, nested && css.nested, className)}
+      {...restProps}
+      ref={containerRef}
+    >
+      {rootNode.children && rootNode.children?.length > 0 ? (
         <div className={css.canvas}>
-          {cells.map((leaf) => {
-            if (!leaf.parent) {
-              return null;
-            }
-
-            return (
-              <Leaf
-                data={leaf.data as TreeNode}
-                left={leaf.x0}
-                top={leaf.y0}
-                width={leaf.x1 - leaf.x0}
-                height={leaf.y1 - leaf.y0}
-                onClick={onItemClick}
-                key={leaf.id}
-              />
-            );
-          })}
+          <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>
       ) : (
         <div className={css.emptyMessage}>