@bundle-stats/ui 4.12.1 → 4.13.0-beta.2

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

@@ -0,0 +1,308 @@
+import React, { RefObject, forwardRef, useCallback, useMemo, useRef } from 'react';
+import { useDebounce, useHoverDirty, useMeasure, useMouseHovered } from 'react-use';
+import cx from 'classnames';
+import type { ReportMetricRow, MetricRunInfo, MetricRunInfoBaseline } from '@bundle-stats/utils';
+import { hierarchy, treemap, treemapSquarify, window } from 'd3';
+import { Tooltip, TooltipArrow, TooltipAnchor, useTooltipState, useTooltip } from 'ariakit/tooltip';
+
+import { Stack } from '../../layout/stack';
+import { FileName } from '../../ui/file-name';
+import { Delta } from '../delta';
+import { RunInfo } from '../run-info';
+import css from './metrics-treemap.module.css';
+
+const SQUARIFY_RATIO = 1.78;
+const PADDING_OUTER = 0;
+const PADDING_INNER = 1;
+
+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 {
+  item: ReportMetricRow;
+}
+
+const LeafTooltipContent = (props: LeafTooltipContentProps) => {
+  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}>
+        <FileName as="code" name={item.label} />
+      </h3>
+      <RunInfo
+        current={currentRun.displayValue}
+        delta={currentRun.displayDeltaPercentage}
+        deltaType={currentRun.deltaType}
+        baseline={baselineRun?.displayValue || '0B'}
+      />
+    </Stack>
+  );
+};
+
+interface LeafContentProps {
+  sizeDisplay: 'minimal' | 'small' | 'default';
+  item: ReportMetricRow;
+  runInfo: MetricRunInfo;
+}
+
+const LeafContent = forwardRef((props: LeafContentProps, ref: React.Ref<HTMLDivElement>) => {
+  const { sizeDisplay, item, runInfo } = props;
+
+  if (sizeDisplay === 'minimal') {
+    return <div className={css.leafContent} ref={ref} />;
+  }
+
+  return (
+    <div className={css.leafContent} ref={ref}>
+      <p className={css.leadContentLabel}>{item.label}</p>
+      {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>
+  );
+});
+
+const LeafContentWithTooltip = (props: LeafContentProps & { parentRef: RefObject<Element> }) => {
+  const { 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?.pageXOffset ?? 0),
+      y: pointer.docY - (document?.defaultView?.pageYOffset ?? 0),
+      w: 1,
+      h: 1,
+    };
+
+    return newRect;
+  }, [pointer.docX, pointer.docY]);
+
+  const tooltipState = useTooltipState({ gutter: 8, getAnchorRect, timeout: 100 });
+
+  // Update tooltip position when poiner values are changing
+  useDebounce(tooltipState.render, 10, [pointer.docX, pointer.docY]);
+
+  return (
+    <>
+      <TooltipAnchor state={tooltipState} className={css.leafContentTooltipAnchor}>
+        <LeafContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
+      </TooltipAnchor>
+      <Tooltip state={tooltipState} className={css.tooltip}>
+        <TooltipArrow state={tooltipState} size={16} className={css.leafTooltipArrow} />
+        <LeafTooltipContent item={item} />
+      </Tooltip>
+    </>
+  );
+};
+
+const LeafAction = forwardRef((props: React.ComponentProps<'button'>, ref) => (
+  // @ts-expect-error
+  <button type="button" xmlns="http://www.w3.org/1999/xhtml" ref={ref} {...props} />
+));
+
+interface TreeNode {
+  id: string;
+  value: number;
+  item: ReportMetricRow;
+  children?: Array<TreeNode>;
+}
+
+interface RootTree {
+  id: string;
+  value: number;
+  children: Array<TreeNode>;
+}
+
+interface LeafProps {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  data: TreeNode;
+  onClick?: (id: string) => void;
+}
+
+const Leaf = (props: LeafProps) => {
+  const { x, y, width, height, data, onClick } = props;
+
+  const { item } = data;
+  const runInfo = item.runs?.[0] as MetricRunInfo;
+
+  const sizeDisplay = useMemo(() => resolveLeafSizeDisplay(width, height), [width, height]);
+  const handleOnClick = useCallback(() => onClick?.(item.key), [item.key]);
+
+  const leafContentRef = useRef<HTMLElement>(null);
+  const hover = useHoverDirty(leafContentRef);
+
+  const leafClassName = cx(
+    css.leaf,
+    css[`leaf-${runInfo.deltaType}`],
+    sizeDisplay === 'small' && css.leafSmall,
+  );
+
+  return (
+    <g className={leafClassName}>
+      <rect x={x} y={y} width={width} height={height} className={css.leafBackground} />
+      <rect x={x} y={y} width={width} height={height} className={css.leafBackdrop} />
+      <foreignObject height={height} width={width} x={x} y={y} className={css.leafWrapper}>
+        <LeafAction onClick={handleOnClick} ref={leafContentRef} className={css.leafAction}>
+          {hover ? (
+            <LeafContentWithTooltip
+              sizeDisplay={sizeDisplay}
+              item={item}
+              runInfo={runInfo}
+              parentRef={leafContentRef}
+            />
+          ) : (
+            <LeafContent sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
+          )}
+        </LeafAction>
+      </foreignObject>
+    </g>
+  );
+};
+
+interface UseMetricsTreemapHierarchyParams {
+  items: Array<ReportMetricRow>;
+  width: number;
+  height: number;
+}
+
+function useMetricsTreemapHierarchy(params: UseMetricsTreemapHierarchyParams) {
+  const { items, width, height } = 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);
+    customHierarchy.sum((node) => node.value);
+    // @ts-expect-error
+    customHierarchy.sort((a, b) => b.value - a.value);
+
+    return customHierarchy;
+  }, [items]);
+
+  const cells = useMemo(() => {
+    const createTremapLayout = treemap()
+      .size([width, height])
+      .tile(treemapSquarify.ratio(SQUARIFY_RATIO))
+      .paddingOuter(PADDING_OUTER)
+      .paddingInner(PADDING_INNER);
+    // @ts-expect-error
+    const tremapLayout = createTremapLayout(treemapHierarchy);
+
+    return tremapLayout.leaves().filter((leaf) => Boolean(leaf.parent));
+  }, [height, width, treemapHierarchy]);
+
+  return cells;
+}
+
+interface MetricsTreemapProps {
+  items: Array<ReportMetricRow>;
+  emptyMessage?: React.ReactNode;
+  onItemClick?: (entryId: string) => void;
+}
+
+export const MetricsTreemap = (props: MetricsTreemapProps & React.ComponentProps<'div'>) => {
+  const { className = '', items, onItemClick, emptyMessage = 'No data', ...restProps } = props;
+
+  const [containerRef, { width, height }] = useMeasure<HTMLDivElement>();
+  const cells = useMetricsTreemapHierarchy({ items, width, height });
+
+  return (
+    <div className={cx(css.root, className)} {...restProps} ref={containerRef}>
+      {cells.length > 0 ? (
+        <svg viewBox={`0 0 ${width} ${height}`} className={css.canvas}>
+          {cells.map((leaf) => {
+            if (!leaf.parent) {
+              return null;
+            }
+
+            return (
+              <Leaf
+                x={leaf.x0}
+                y={leaf.y0}
+                width={leaf.x1 - leaf.x0}
+                height={leaf.y1 - leaf.y0}
+                data={leaf.data as TreeNode}
+                onClick={onItemClick}
+                key={leaf.id}
+              />
+            );
+          })}
+        </svg>
+      ) : (
+        <div className={css.emptyMessage}>
+          <div className={css.emptyMessageWrapper}>{emptyMessage}</div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/{constants.js → constants.ts}

@@ -40,3 +40,8 @@ export const SORT = {
   ASC: 'asc',
   DESC: 'desc',
 };
+
+export enum MetricsDisplayType {
+  TABLE = 'table',
+  TREEMAP = 'treemap',
+}

package/src/hooks/entry-info.ts

@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+
+interface UseEntryInfoParams {
+  setState: (data: { entryId: string }) => void;
+}
+
+type UseEntryInfo = [() => void, (entryId: string) => void];
+
+/**
+ * Show/hide side panel entry
+ */
+export function useEntryInfo(params: UseEntryInfoParams): UseEntryInfo {
+  const { setState } = params;
+
+  const hideEntryInfo = useCallback(() => setState({ entryId: '' }), [setState]);
+  const showEntryInfo = useCallback((entryId: string) => setState({ entryId }), [setState]);
+
+  return [hideEntryInfo, showEntryInfo];
+}

package/src/hooks/metrics-display-type.ts

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useLocalStorage } from 'react-use';
+import { StringParam, useQueryParams } from 'use-query-params';
+
+import { MetricsDisplayType } from '../constants';
+
+const DEFAULT_DISPLAY_TYPE = MetricsDisplayType.TABLE;
+const PARAM_NAME = 'dt';
+
+type UseMetricsDisplayType = [MetricsDisplayType, (value: MetricsDisplayType) => void];
+
+export const useMetricsDisplayType = (): UseMetricsDisplayType => {
+  const [{ [PARAM_NAME]: queryDisplayType }, setQueryParams] = useQueryParams({
+    [PARAM_NAME]: StringParam,
+  });
+  const [storageDisplayType, setStoreageDisplayType] = useLocalStorage(
+    PARAM_NAME,
+    MetricsDisplayType.TABLE,
+  );
+
+  const displayType = useMemo(() => {
+    const value = queryDisplayType || storageDisplayType;
+
+    if (!value) {
+      return DEFAULT_DISPLAY_TYPE;
+    }
+
+    if (!Object.values(MetricsDisplayType).includes(value as MetricsDisplayType)) {
+      return DEFAULT_DISPLAY_TYPE;
+    }
+
+    return value as MetricsDisplayType;
+  }, [queryDisplayType, storageDisplayType]);
+
+  useEffect(() => {
+    // Update query string display type when missing
+    if (queryDisplayType !== displayType) {
+      setQueryParams({ [PARAM_NAME]: displayType });
+    }
+
+    // Update storage state when query string is set and different
+    if (storageDisplayType !== displayType) {
+      setStoreageDisplayType(queryDisplayType as MetricsDisplayType);
+    }
+  }, [displayType, queryDisplayType, storageDisplayType, setQueryParams, setStoreageDisplayType]);
+
+  const setDisplayType = useCallback(
+    (value: MetricsDisplayType) => {
+      setStoreageDisplayType(value);
+      setQueryParams({ [PARAM_NAME]: value });
+    },
+    [setStoreageDisplayType, setQueryParams],
+  );
+
+  return [displayType, setDisplayType];
+};

package/src/query-state.tsx

@@ -30,7 +30,7 @@ export const useComponentQueryState = (componentName: string) => {
 
       setQueryState({ [componentName]: newState });
     },
-    [componentState],
+    [componentState, setQueryState],
   );
 
   return [componentState, setState];

package/src/types.d.ts

@@ -8,8 +8,10 @@ interface FilterFieldData {
   defaultValue: boolean;
   disabled?: boolean;
 }
+
 type FilterGroupFieldData = {
   label: string;
   children: Array<{ key: string } & FilterFieldData>;
 };
+
 type FilterFieldsData = Record<string, FilterFieldData | FilterGroupFieldData>;

package/src/ui/button/button.module.css

@@ -256,6 +256,7 @@ a.root {
 .small .glyph {
   width: calc(var(--space-xsmall) + 2px);
   height: calc(var(--space-xsmall) + 2px);
+  margin: 1px; /* compensate to keep the same height when the text is not provided */
 }
 
 .medium {

package/src/ui/icon/icon.tsx

@@ -18,6 +18,8 @@ const ICONS = {
   GITHUB: 'github',
   INFO: 'info',
   HELP: 'help',
+  TABLE: 'table',
+  TREEMAP: 'treemap',
   MENU: 'menu',
   MORE_VERTICAL: 'more-vertical',
   SORT: 'sort',

package/src/ui/index.js

@@ -6,7 +6,6 @@ export { Dropdown } from './dropdown';
 export { EmptySet } from './empty-set';
 export { FileName } from './file-name';
 export { Filters } from './filters';
-export { HorizontalBarChart } from './horizontal-bar-chart';
 export { HoverCard } from './hover-card';
 export { Icon } from './icon';
 export { Input } from './input';

package/types/components/bundle-assets/bundle-assets.d.ts

@@ -47,11 +47,12 @@ export namespace BundleAssets {
             direction: PropTypes.Requireable<string>;
         }>>>;
         export let updateSort: PropTypes.Validator<(...args: any[]) => any>;
-        export let allItems: PropTypes.Requireable<(PropTypes.InferProps<{
+        export let allItems: PropTypes.Validator<(PropTypes.InferProps<{
             key: PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
         export let customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
         export let hideEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
+        export let showEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
 import React from 'react';

package/types/components/{bundle-assets-totals-table/bundle-assets-totals-table.d.ts → bundle-assets-totals/bundle-assets-totals.d.ts}

@@ -1,10 +1,10 @@
-export function BundleAssetsTotalsTable({ className, jobs, customComponentLink: CustomComponentLink, ...restProps }: {
+export function BundleAssetsTotals({ className, jobs, customComponentLink: CustomComponentLink, ...restProps }: {
     [x: string]: any;
     className: any;
     jobs: any;
     customComponentLink: any;
 }): React.JSX.Element;
-export namespace BundleAssetsTotalsTable {
+export namespace BundleAssetsTotals {
     namespace defaultProps {
         export let className: string;
         export let jobs: never[];

package/types/components/bundle-assets-totals/index.d.ts

@@ -0,0 +1 @@
+export * from "./bundle-assets-totals";

package/types/components/bundle-modules/bundle-modules.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SortAction } from '../../types';
+import { SortAction } from '../../types';
 import { ModuleMetric } from './bundle-modules.constants';
 import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
 interface BundleModulesProps extends React.ComponentProps<'div'> {
@@ -18,6 +18,7 @@ interface BundleModulesProps extends React.ComponentProps<'div'> {
     updateSearch: (newSerarch: string) => void;
     entryId?: string;
     hideEntryInfo: () => void;
+    showEntryInfo: (entryId: string) => void;
     moduleMetric: ModuleMetric;
     setModuleMetric: (newValue: ModuleMetric) => void;
     customComponentLink: React.ElementType;

package/types/components/bundle-modules/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { SortAction } from '../../types';
 import { BundleModules as BaseComponent } from './bundle-modules';
 import * as types from './bundle-modules.types';
-interface BundleModulesProps extends Omit<React.ComponentProps<typeof BaseComponent>, 'jobs' | 'items' | 'chunks' | 'updateFilters' | 'resetFilters' | 'resetAllFilters' | 'filters' | 'sort' | 'updateSort' | 'search' | 'updateSearch' | 'allItems' | 'totalRowCount' | 'hideEntryInfo'> {
+interface BundleModulesProps extends Omit<React.ComponentProps<typeof BaseComponent>, 'jobs' | 'items' | 'chunks' | 'updateFilters' | 'resetFilters' | 'resetAllFilters' | 'filters' | 'sort' | 'updateSort' | 'search' | 'updateSearch' | 'allItems' | 'totalRowCount' | 'hideEntryInfo' | 'showEntryInfo'> {
     jobs: Array<types.Job>;
     filters: Record<string, boolean>;
     search?: string;

package/types/components/bundle-packages/bundle-packages.d.ts

@@ -45,6 +45,7 @@ export namespace BundlePackages {
         let entryId_1: PropTypes.Requireable<string>;
         export { entryId_1 as entryId };
         export let hideEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
+        export let showEntryInfo: PropTypes.Validator<(...args: any[]) => any>;
     }
 }
 import React from 'react';

package/types/components/index.d.ts

@@ -1,7 +1,6 @@
 export { BrowsertimeTable } from "./browsertime-table";
 export { BundleAssets } from "./bundle-assets";
-export { BundleAssetsTotalsTable } from "./bundle-assets-totals-table";
-export { BundleAssetsTotalsChartBars } from "./bundle-assets-totals-chart-bars";
+export { BundleAssetsTotals } from "./bundle-assets-totals";
 export { BundlePackages } from "./bundle-packages";
 export { BundleModules } from "./bundle-modules";
 export { ComponentLink } from "./component-link";

package/types/components/metrics-display-selector/index.d.ts

@@ -0,0 +1 @@
+export * from './metrics-display-selector';

package/types/components/metrics-display-selector/metrics-display-selector.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MetricsDisplayType } from '../../constants';
+import { FlexStack } from '../../layout/flex-stack';
+interface MetricsDisplaySelectorProps {
+    value: MetricsDisplayType;
+    onSelect: (newValue: MetricsDisplayType) => void;
+}
+export declare const MetricsDisplaySelector: (props: MetricsDisplaySelectorProps & Omit<React.ComponentProps<typeof FlexStack>, 'onSelect' | 'value'>) => React.JSX.Element;
+export {};

package/types/components/metrics-treemap/index.d.ts

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

package/types/components/metrics-treemap/metrics-treemap.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ReportMetricRow } from '@bundle-stats/utils';
+interface MetricsTreemapProps {
+    items: Array<ReportMetricRow>;
+    emptyMessage?: React.ReactNode;
+    onItemClick?: (entryId: string) => void;
+}
+export declare const MetricsTreemap: (props: MetricsTreemapProps & React.ComponentProps<'div'>) => React.JSX.Element;
+export {};

package/types/constants.d.ts

@@ -1,18 +1,22 @@
-export namespace URLS {
-    let OVERVIEW: string;
-    let ASSETS: string;
-    let MODULES: string;
-    let PACKAGES: string;
-}
-export const SECTION_URLS: {
+export declare const URLS: {
+    OVERVIEW: string;
+    ASSETS: string;
+    MODULES: string;
+    PACKAGES: string;
+};
+export declare const SECTION_URLS: {
     [x: string]: string;
 };
-export const ASSETS_SIZES_FILE_TYPE_MAP: {};
-export const METRICS_WEBPACK_GENERAL: string[];
-export const METRICS_WEBPACK_ASSETS: string[];
-export const METRICS_WEBPACK_MODULES: string[];
-export const METRICS_WEBPACK_PACKAGES: string[];
-export namespace SORT {
-    let ASC: string;
-    let DESC: string;
+export declare const ASSETS_SIZES_FILE_TYPE_MAP: {};
+export declare const METRICS_WEBPACK_GENERAL: string[];
+export declare const METRICS_WEBPACK_ASSETS: string[];
+export declare const METRICS_WEBPACK_MODULES: string[];
+export declare const METRICS_WEBPACK_PACKAGES: string[];
+export declare const SORT: {
+    ASC: string;
+    DESC: string;
+};
+export declare enum MetricsDisplayType {
+    TABLE = "table",
+    TREEMAP = "treemap"
 }

package/types/hooks/entry-info.d.ts

@@ -0,0 +1,8 @@
+interface UseEntryInfoParams {
+    setState: (data: {
+        entryId: string;
+    }) => void;
+}
+type UseEntryInfo = [() => void, (entryId: string) => void];
+export declare function useEntryInfo(params: UseEntryInfoParams): UseEntryInfo;
+export {};

package/types/hooks/metrics-display-type.d.ts

@@ -0,0 +1,4 @@
+import { MetricsDisplayType } from '../constants';
+type UseMetricsDisplayType = [MetricsDisplayType, (value: MetricsDisplayType) => void];
+export declare const useMetricsDisplayType: () => UseMetricsDisplayType;
+export {};

package/types/ui/icon/icon.d.ts

@@ -14,6 +14,8 @@ declare const ICONS: {
     readonly GITHUB: "github";
     readonly INFO: "info";
     readonly HELP: "help";
+    readonly TABLE: "table";
+    readonly TREEMAP: "treemap";
     readonly MENU: "menu";
     readonly MORE_VERTICAL: "more-vertical";
     readonly SORT: "sort";
@@ -47,6 +49,8 @@ export declare const Icon: {
         readonly GITHUB: "github";
         readonly INFO: "info";
         readonly HELP: "help";
+        readonly TABLE: "table";
+        readonly TREEMAP: "treemap";
         readonly MENU: "menu";
         readonly MORE_VERTICAL: "more-vertical";
         readonly SORT: "sort";

package/types/ui/index.d.ts

@@ -6,7 +6,6 @@ export { Dropdown } from "./dropdown";
 export { EmptySet } from "./empty-set";
 export { FileName } from "./file-name";
 export { Filters } from "./filters";
-export { HorizontalBarChart } from "./horizontal-bar-chart";
 export { HoverCard } from "./hover-card";
 export { Icon } from "./icon";
 export { Input } from "./input";