@bundle-stats/ui 4.12.0 → 4.13.0-beta.0

package/src/components/bundle-packages/bundle-packages.jsx

@@ -18,6 +18,10 @@ import { MetricsTableTitle } from '../metrics-table-title';
 import { PackageInfo } from '../package-info';
 import { SEARCH_PLACEHOLDER } from './bundle-packages.i18n';
 import css from './bundle-packages.module.css';
+import { MetricsDisplaySelector } from '../metrics-display-selector';
+import { MetricsDisplayType } from '../../constants';
+import { MetricsTreemap } from '../metrics-treemap';
+import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
 
 const getDropdownFilters = ({ compareMode, filters }) => ({
   [PACKAGE_FILTERS.CHANGED]: {
@@ -126,10 +130,13 @@ export const BundlePackages = (props) => {
     entryId,
     allItems,
     hideEntryInfo,
+    showEntryInfo,
   } = props;
 
   const jobLabels = jobs?.map((job) => job?.label);
 
+  const [displayType, setDisplayType] = useMetricsDisplayType();
+
   const dropdownFilters = useMemo(
     () => getDropdownFilters({ compareMode: jobs?.length > 1, filters }),
     [jobs, filters],
@@ -187,6 +194,7 @@ export const BundlePackages = (props) => {
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
+              <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -210,16 +218,21 @@ export const BundlePackages = (props) => {
           </FlexStack>
         </Toolbar>
         <main>
-          <MetricsTable
-            runs={jobs}
-            items={items}
-            emptyMessage={emptyMessage}
-            renderRowHeader={renderRowHeader}
-            showHeaderSum
-            title={metricsTableTitle}
-            sort={sort}
-            updateSort={updateSort}
-          />
+          {displayType === MetricsDisplayType.TABLE && (
+            <MetricsTable
+              runs={jobs}
+              items={items}
+              emptyMessage={emptyMessage}
+              renderRowHeader={renderRowHeader}
+              showHeaderSum
+              title={metricsTableTitle}
+              sort={sort}
+              updateSort={updateSort}
+            />
+          )}
+          {displayType === MetricsDisplayType.TREEMAP && (
+            <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
+          )}
         </main>
       </section>
       {entryItem && (
@@ -283,4 +296,5 @@ BundlePackages.propTypes = {
   customComponentLink: PropTypes.elementType,
   entryId: PropTypes.string,
   hideEntryInfo: PropTypes.func.isRequired,
+  showEntryInfo: PropTypes.func.isRequired,
 };

package/src/components/bundle-packages/index.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { PACKAGE_FILTERS } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack/compare';
@@ -6,6 +6,7 @@ import * as webpack from '@bundle-stats/utils/lib-esm/webpack/compare';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
+import { useShowEntry } from '../../hooks/show-entry';
 import { BundlePackages as BundlePackagesComponent } from './bundle-packages';
 import { getDuplicatePackages, getAddRowDuplicateFlag, getRowFilter, getCustomSort } from './bundle-packages.utils';
 
@@ -54,9 +55,7 @@ export const BundlePackages = (props) => {
     getCustomSort,
   });
 
-  const hideEntryInfo = useCallback(() => {
-    setState({ entryId: '' });
-  }, [setState]);
+  const { hideEntryInfo, showEntryInfo } = useShowEntry({ setState });
 
   return (
     <BundlePackagesComponent
@@ -67,6 +66,7 @@ export const BundlePackages = (props) => {
       allItems={rows}
       totalRowCount={totalRowCount}
       hideEntryInfo={hideEntryInfo}
+      showEntryInfo={showEntryInfo}
     />
   );
 };

package/src/components/index.js

@@ -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/src/components/metrics-display-selector/index.tsx

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

package/src/components/metrics-display-selector/metrics-display-selector.module.css

@@ -0,0 +1,10 @@
+.button {
+  text-decoration: none;
+}
+
+.buttonActive,
+.buttonActive:active,
+.buttonActive:focus {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}

package/src/components/metrics-display-selector/metrics-display-selector.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { MetricsDisplayType } from '../../constants';
+import { FlexStack } from '../../layout/flex-stack';
+import { Button } from '../../ui/button';
+import { Icon } from '../../ui/icon';
+import css from './metrics-display-selector.module.css';
+
+interface MetricsDisplaySelectorProps {
+  value: MetricsDisplayType;
+  onSelect: (newValue: MetricsDisplayType) => void;
+}
+
+export const MetricsDisplaySelector = (
+  props: MetricsDisplaySelectorProps &
+    Omit<React.ComponentProps<typeof FlexStack>, 'onSelect' | 'value'>,
+) => {
+  const { className = '', value, onSelect, ...restProps } = props;
+
+  return (
+    <FlexStack space="xxsmall" as="nav" className={cx(css.root, className)} {...restProps}>
+      <Button
+        outline
+        active={value === MetricsDisplayType.TABLE}
+        size="small"
+        type="button"
+        onClick={() => onSelect(MetricsDisplayType.TABLE)}
+        className={css.button}
+      >
+        <FlexStack space="xxxsmall" alignItems="center">
+          <Icon glyph={Icon.ICONS.TABLE} className={css.icon} />
+          <span>Table</span>
+        </FlexStack>
+      </Button>
+      <Button
+        outline
+        active={value === MetricsDisplayType.TREEMAP}
+        size="small"
+        type="button"
+        onClick={() => onSelect(MetricsDisplayType.TREEMAP)}
+        className={cx(css.button)}
+      >
+        <FlexStack space="xxxsmall" alignItems="center">
+          <Icon glyph={Icon.ICONS.TREEMAP} className={css.icon} />
+          <span>Treemap</span>
+        </FlexStack>
+      </Button>
+    </FlexStack>
+  );
+};

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

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

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

@@ -0,0 +1,168 @@
+.root {
+  position: relative;
+  aspect-ratio: 16/9;
+  background: var(--color-background);
+}
+
+.canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  fill: var(--color-text);
+  font-family: var(--font-family);
+}
+
+/** Tile overlay fill background transition */
+.root {
+  transition: var(--ui-transition-out);
+  transition-property: opacity;
+}
+
+.tileOverlay {
+  fill: var(--color-outline);
+  transition: var(--ui-transition-out);
+  transition-property: opacity;
+  opacity: 0.4;
+}
+
+.root .tile:hover .tileOverlay {
+  transition: var(--ui-transition-in);
+  opacity: 0.8;
+}
+
+/** Tile content */
+.tileContent {
+  appearance: none;
+  border: 0;
+  border-radius: none;
+  padding: 0;
+  background: none;
+
+  width: 100%;
+  height: 100%;
+  padding: var(--space-xxsmall) var(--space-small);
+  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;
+}
+
+.tileContentWrapper {
+  width: 100%;
+  max-height: 100%;
+  display: flex;
+  flex-flow: column;
+  gap: 4px;
+}
+
+.tileContentLabel {
+  margin-right: calc(0px - var(--space-xxsmall)); /* take more space if necessary */
+  margin-bottom: calc(0px - 2px);
+  flex: 1 1 auto;
+  max-width: calc(100% + var(--space-xxsmall));  /* take more space if necessary */
+  overflow: hidden;
+  word-break: break-word;
+}
+
+.tileContentValue {
+  flex: 0 0 auto;
+  max-width: calc(100% + var(--space-xxsmall));
+  margin-right: calc(0px - var(--space-xxsmall)); /* take more space if necessary */
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.tileContentMetric {
+  font-weight: bold;
+}
+
+.tileContentDelta {
+  margin-left: var(--space-xxxsmall);
+}
+
+/** Tile size variation */
+.tileSmall .tileContent {
+  font-size: var(--size-xsmall);
+}
+
+.tileSmall .tileContentLabel {
+  margin-top: 0;
+}
+
+/** Tile diff variation */
+.tile-NO_CHANGE .tileContent {
+  color: var(--color-text-light);
+}
+
+.tile-HIGH_NEGATIVE .tileOverlay {
+  fill: var(--color-red-100);
+}
+
+.tile-NEGATIVE .tileOverlay {
+  fill: var(--color-red-50);
+}
+
+.tile-LOW_NEGATIVE .tileOverlay {
+  fill: var(--color-red-25);
+}
+
+.tile-LOW_POSITIVE .tileOverlay {
+  fill: var(--color-green-25);
+}
+
+.tile-POSITIVE .tileOverlay {
+  fill: var(--color-green-50);
+}
+
+.tile-HIGH_POSITIVE .tileOverlay {
+  fill: var(--color-green-100);
+}
+
+
+/** empty message */
+.emptyMessage {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.emptyMessageWrapper {
+  max-width: 100%;
+  text-align: center;
+}
+
+/** tooltip content */
+.tooltip {
+  z-index: var(--layer-xxhigh);
+  padding: var(--space-xsmall) var(--space-small);
+  border-radius: var(--radius-medium);
+  width: calc(100vw - 2 * var(--space-small));
+  max-width: 340px;
+  outline: none;
+  filter: drop-shadow(var(--shadow-layer-high));
+  will-change: filter;
+  background: var(--color-light);
+  font-size: var(--size-small);
+}
+
+.tooltipArrow {
+  border: var(--space-xxsmall) solid var(--color-background);
+  border-width: var(--space-xxsmall) var(--space-xxsmall) 0;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  position: absolute;
+  top: 100%;
+}
+
+.tooltipContentTitle {
+  font-size: var(--size-medium);
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { action } from '@storybook/addon-actions';
+
+// eslint-disable-next-line import/no-relative-packages
+import moduleItemsFixture from '../../../../../fixtures/module-items.json';
+import { MetricsTreemap } from '.';
+
+export default {
+  title: 'Components/MetricsTreemap',
+  component: MetricsTreemap,
+} as Meta;
+
+export const Default: StoryObj = {
+  render: (props: React.ComponentProps<typeof MetricsTreemap>) => (
+    <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />
+  ),
+  args: {
+    items: moduleItemsFixture,
+    onItemClick: action('CLICK'),
+  },
+};

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

@@ -0,0 +1,271 @@
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import cx from 'classnames';
+import { useMeasure } from 'react-use';
+import type { ReportMetricRow, MetricRunInfo, MetricRunInfoBaseline } from '@bundle-stats/utils';
+import { hierarchy, treemap, treemapSquarify } from 'd3';
+import {
+  FloatingPortal,
+  useClientPoint,
+  useFloating,
+  useHover,
+  useInteractions,
+} from '@floating-ui/react';
+import { arrow, offset } from '@floating-ui/react-dom';
+
+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 resolveTileSizeDisplay(width: number, height: number): TileSizeDisplay {
+  if (
+    height > PADDING_TOP + PADDING_BOTTOM + VERTICAL_SPACING + LINE_HEIGHT * 2 &&
+    width > PADDING_LEFT + PADDING_RIGHT + 96
+  ) {
+    return 'default';
+  }
+
+  if (
+    height > PADDING_TOP + PADDING_BOTTOM + LINE_HEIGHT_SMALL * 2 &&
+    width > PADDING_LEFT + PADDING_BOTTOM + 48
+  ) {
+    return 'small';
+  }
+
+  return 'minimal';
+}
+
+interface TooltipContentProps {
+  data: ReportMetricRow;
+}
+
+const TooltipContent = (props: TooltipContentProps) => {
+  const { data } = props;
+  const currentRun = data.runs[0] as MetricRunInfo;
+  const baselineRun = data.runs[data.runs.length - 1] as MetricRunInfoBaseline;
+
+  return (
+    <Stack space="small" className={css.tooltipContent}>
+      <h3 className={css.tooltipContentTitle}>
+        <FileName as="code" name={data.label} />
+      </h3>
+      <RunInfo
+        current={currentRun.displayValue}
+        delta={currentRun.displayDeltaPercentage}
+        deltaType={currentRun.deltaType}
+        baseline={baselineRun?.displayValue || '0B'}
+      />
+    </Stack>
+  );
+};
+
+const TileButton = 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 Tile = (props: LeafProps) => {
+  const { x, y, width, height, data, onClick } = props;
+  const { item } = data;
+  const runInfo = item.runs?.[0] as MetricRunInfo;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const arrowRef = useRef(null);
+  const { refs, floatingStyles, context, middlewareData } = useFloating({
+    placement: 'top',
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [arrow({ element: arrowRef }), offset(16)],
+  });
+  const clientPoint = useClientPoint(context);
+  const hover = useHover(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, clientPoint]);
+
+  const tileSizeDisplay = useMemo(() => resolveTileSizeDisplay(width, height), [width, height]);
+
+  const handleOnClick = useCallback(() => {
+    if (onClick) {
+      onClick(item.key);
+    }
+  }, [item.key]);
+
+  return (
+    <g
+      className={cx(
+        css.tile,
+        !item.changed && css['tile-NO_CHANGE'],
+        css[`tile-${runInfo.deltaType}`],
+        tileSizeDisplay === 'small' && css.tileSmall,
+      )}
+    >
+      <rect x={x} y={y} width={width} height={height} className={css.tileOverlay} />
+      <foreignObject height={height} width={width} x={x} y={y}>
+        <TileButton
+          onClick={handleOnClick}
+          className={css.tileContent}
+          ref={refs.setReference}
+          {...getReferenceProps()}
+        >
+          {tileSizeDisplay !== 'minimal' && (
+            <div className={css.tileContentWrapper}>
+              <p className={css.tileContentLabel}>{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>
+          )}
+        </TileButton>
+        {isOpen && (
+          <FloatingPortal>
+            <div
+              ref={refs.setFloating}
+              style={floatingStyles}
+              {...getFloatingProps()}
+              className={css.tooltip}
+            >
+              <div
+                ref={arrowRef}
+                style={{ left: middlewareData.arrow?.x }}
+                className={css.tooltipArrow}
+              />
+              <TooltipContent data={item} />
+            </div>
+          </FloatingPortal>
+        )}
+      </foreignObject>
+    </g>
+  );
+};
+
+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 treemapHierarchy = useMemo(() => {
+    const children = items.map((item) => {
+      // set tile value to the largest run value 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 (
+    <div className={cx(css.root, className)} {...restProps} ref={containerRef}>
+      {cells.length > 0 ? (
+        <svg
+          width={width}
+          height={height}
+          viewBox={`0 0 ${width} ${height}`}
+          className={css.canvas}
+        >
+          {cells.map((leaf) => {
+            if (!leaf.parent) {
+              return null;
+            }
+
+            return (
+              <Tile
+                x={leaf.x0}
+                y={leaf.y0}
+                width={leaf.x1 - leaf.x0}
+                height={leaf.y1 - leaf.y0}
+                data={leaf.data as TreeNode}
+                key={leaf.id}
+                onClick={onItemClick}
+              />
+            );
+          })}
+        </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',
+}