@bundle-stats/ui 4.23.0-beta.1 → 4.23.0-beta.11

package/src/components/metric-change-legend/metric-change-legend.tsx

@@ -135,8 +135,8 @@ export const MetricChangeLegend = (props: MetricChangeLegendProps) => {
           anchorClassName={css.itemAnchor}
           label={
             <FlexStack inline alignItems="center" space="xxsmall" className={css.item}>
-              <Variants kind={id} variants={variants} />
-              <span>{label}</span>
+              <Variants kind={id} variants={variants} className={css.itemVariants} />
+              <span className={css.itemLabel}>{label}</span>
             </FlexStack>
           }
         >

package/src/components/metric-run-info/metric-run-info.stories.tsx

@@ -28,6 +28,15 @@ export const NoBaseline: Story = {
   },
 };
 
+export const ShowDeltaAbsoluteValue: Story = {
+  args: {
+    metricId: 'webpack.totalSizeByTypeALL',
+    current: 120 * 1024,
+    baseline: 100 * 1024,
+    showDeltaAbsoluteValue: true,
+  },
+};
+
 export const NoDelta: Story = {
   args: {
     ...NoBaseline.args,

package/src/components/metric-run-info/metric-run-info.tsx

@@ -56,6 +56,12 @@ export type MetricRunInfoProps = {
   baseline?: number;
   showMetricDescription?: boolean;
   titleWrapper?: ElementType;
+  /**
+   * Show the delta absolute value alongside the percentage value.
+   * Only applies when `showDelta` is `true`.
+   * @default false
+   */
+  showDeltaAbsoluteValue?: boolean;
 } & Pick<RunInfoProps, 'showDelta' | 'showBaseline' | 'size' | 'loading'>;
 
 export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'div'>) => {
@@ -66,6 +72,7 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
     showDelta = true,
     showMetricDescription = true,
     showBaseline = true,
+    showDeltaAbsoluteValue = false,
     titleWrapper: CustomTitleWrapper = React.Fragment,
     ...restProps
   } = props;
@@ -113,22 +120,13 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
       };
     }
 
-    // For file sizes, show the real data
-    if (metric.type === MetricTypes.FileSize) {
-      return {
-        showDelta: true,
-        delta: metricRunInfo.displayDelta,
-        deltaType: metricRunInfo.deltaType,
-        deltaPercentage: metricRunInfo.displayDeltaPercentage,
-      };
-    }
-
     return {
       showDelta: true,
-      delta: metricRunInfo.displayDelta,
       deltaType: metricRunInfo.deltaType,
+      deltaPercentage: metricRunInfo.displayDeltaPercentage,
+      ...(showDeltaAbsoluteValue && { delta: metricRunInfo.displayDelta }),
     };
-  }, [metric, metricRunInfo, showDelta]);
+  }, [metric, metricRunInfo, showDelta, showDeltaAbsoluteValue]);
 
   return (
     <RunInfo

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

@@ -1,6 +1,5 @@
 .dropdownGroup {
   border: 1px solid var(--color-outline);
-  transition: var(--transition-out);
 }
 
 .dropdownGroupButton {
@@ -9,7 +8,6 @@
 
 .dropdownGroup:hover {
   border-color: var(--color-outline-dark);
-  transition: var(--transition-in);
 }
 
 .itemActive {
@@ -29,10 +27,12 @@
 
 .dropdownItemIcon {
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .dropdownItemActive .dropdownItemIcon {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }

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

@@ -1,21 +1,13 @@
-.root a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.root a:hover,
-.root a:active,
-.root a:focus {
-  color: var(--color-primary);
-  text-decoration: underline;
-}
-
 .root .value,
 .root .delta {
   text-align: right;
 }
 
 /** rows */
+.clickable {
+  cursor: default;
+}
+
 .multipleRuns .unchanged th,
 .multipleRuns .unchanged td {
   color: var(--color-text-light);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import cx from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import type { ReportMetricRow } from '@bundle-stats/utils';
@@ -20,51 +20,75 @@ const CURRENT_COLUMN_SPAN = 3;
 interface RowProps extends React.ComponentProps<typeof Table.Tr> {
   item: ReportMetricRow;
   renderHeader: (item: ReportMetricRow) => React.ReactNode;
+  onRowClick?: (item: ReportMetricRow) => void;
 }
 
-const Row = ({ className = '', item, renderHeader, ...restProps }: RowProps) => (
-  <Table.Tr className={cx(!item.changed && css.unchanged, className)} {...restProps}>
-    <Table.Th className={css.metricName}>{renderHeader(item)}</Table.Th>
+const Row = ({ className = '', item, renderHeader, onRowClick, ...restProps }: RowProps) => {
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLTableRowElement>) => {
+      // Skip clicks on interactive elements (eg: links, buttons)
+      if ((event.target as HTMLElement).closest('a, button')) {
+        return;
+      }
+
+      // Skip when the user is selecting text
+      if (window.getSelection()?.toString()) {
+        return;
+      }
 
-    {item.runs.map((run, index) => {
-      const isBaseline = index === item.runs.length - 1;
-      const valueClassName = cx(css.value, !isBaseline && css.current);
+      onRowClick?.(item);
+    },
+    [onRowClick, item],
+  );
+
+  return (
+    <Table.Tr
+      className={cx(!item.changed && css.unchanged, onRowClick && css.clickable, className)}
+      onClick={onRowClick ? handleClick : undefined}
+      {...restProps}
+    >
+      <Table.Th className={css.metricName}>{renderHeader(item)}</Table.Th>
+
+      {item.runs.map((run, index) => {
+        const isBaseline = index === item.runs.length - 1;
+        const valueClassName = cx(css.value, !isBaseline && css.current);
+
+        // Empty cells if no value
+        if (!run || typeof run.value === 'undefined') {
+          return (
+            <>
+              <Table.Td className={valueClassName}>-</Table.Td>
+              {!isBaseline && <Table.Td className={css.delta} />}
+              {!isBaseline && <Table.Td className={cx(css.delta, css.deltaPercentage)} />}
+            </>
+          );
+        }
 
-      // Empty cells if no value
-      if (!run || typeof run.value === 'undefined') {
         return (
           <>
-            <Table.Td className={valueClassName}>-</Table.Td>
-            {!isBaseline && <Table.Td className={css.delta} />}
-            {!isBaseline && <Table.Td className={cx(css.delta, css.deltaPercentage)} />}
+            <Table.Td className={valueClassName}>
+              <Metric value={run.displayValue} />
+            </Table.Td>
+            {!isBaseline && (
+              <>
+                <Table.Td className={css.delta}>
+                  {'delta' in run && (
+                    <Delta displayValue={run.displayDelta} deltaType={run.deltaType} />
+                  )}
+                </Table.Td>
+                <Table.Td className={cx(css.delta, css.deltaPercentage)}>
+                  {'delta' in run && (
+                    <Delta displayValue={run.displayDeltaPercentage} deltaType={run.deltaType} />
+                  )}
+                </Table.Td>
+              </>
+            )}
           </>
         );
-      }
-
-      return (
-        <>
-          <Table.Td className={valueClassName}>
-            <Metric value={run.displayValue} />
-          </Table.Td>
-          {!isBaseline && (
-            <>
-              <Table.Td className={css.delta}>
-                {'delta' in run && (
-                  <Delta displayValue={run.displayDelta} deltaType={run.deltaType} />
-                )}
-              </Table.Td>
-              <Table.Td className={cx(css.delta, css.deltaPercentage)}>
-                {'delta' in run && (
-                  <Delta displayValue={run.displayDeltaPercentage} deltaType={run.deltaType} />
-                )}
-              </Table.Td>
-            </>
-          )}
-        </>
-      );
-    })}
-  </Table.Tr>
-);
+      })}
+    </Table.Tr>
+  );
+};
 
 interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'title'> {
   runs: Array<{
@@ -77,6 +101,7 @@ interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'ti
   sort?: MetricsTableHeaderProps['sort'];
   updateSort?: MetricsTableHeaderProps['updateSort'];
   renderRowHeader?: (item: ReportMetricRow) => React.ReactNode;
+  onRowClick?: (item: ReportMetricRow) => void;
   emptyMessage?: React.ReactNode;
   showAllItems: boolean;
   setShowAllItems: (value: boolean) => void;
@@ -91,6 +116,7 @@ export const MetricsTable = ({
   sort,
   updateSort,
   renderRowHeader = (item: any) => item.label,
+  onRowClick,
   emptyMessage = I18N.EMPTY_MESSAGE,
   showAllItems,
   setShowAllItems,
@@ -132,7 +158,12 @@ export const MetricsTable = ({
         {showItems && (
           <>
             {visibleItems.map((item) => (
-              <Row key={item.key} item={item} renderHeader={renderRowHeader} />
+              <Row
+                key={item.key}
+                item={item}
+                renderHeader={renderRowHeader}
+                onRowClick={onRowClick}
+              />
             ))}
 
             {hasHiddenItems && (

package/src/components/metrics-table-options/metrics-table-options.tsx

@@ -2,8 +2,7 @@ import type { ComponentProps } from 'react';
 import React from 'react';
 
 import I18N from '../../i18n';
-import { Dropdown, DropdownItem } from '../../ui/dropdown';
-import css from './metrics-table-options.module.css';
+import { Dropdown, DropdownGroup, DropdownItem } from '../../ui/dropdown';
 
 type MetricsTableOptionsProps = {
   onViewAllClick?: () => void;
@@ -15,19 +14,19 @@ export const MetricsTableOptions = (props: MetricsTableOptionsProps) => {
   const { onViewAllClick, onResetClick, onExportClick, ...restProps } = props;
 
   return (
-    <Dropdown glyph="more-vertical" placement="bottom-end" showChevron={false} {...restProps}>
-      <div className={css.group}>
-        {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
-        {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
-      </div>
-      <div className={css.group}>
-        {onExportClick && (
-          <>
-            <DropdownItem onClick={() => onExportClick('csv')}>{I18N.EXPORT_CSV}</DropdownItem>
-            <DropdownItem onClick={() => onExportClick('json')}>{I18N.EXPORT_JSON}</DropdownItem>
-          </>
-        )}
-      </div>
+    <Dropdown glyph="more-vertical" placement="bottom-end" {...restProps}>
+      {(onResetClick || onViewAllClick) && (
+        <DropdownGroup>
+          {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
+          {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
+        </DropdownGroup>
+      )}
+      {onExportClick && (
+        <DropdownGroup>
+          <DropdownItem onClick={() => onExportClick('csv')}>{I18N.EXPORT_CSV}</DropdownItem>
+          <DropdownItem onClick={() => onExportClick('json')}>{I18N.EXPORT_JSON}</DropdownItem>
+        </DropdownGroup>
+      )}
     </Dropdown>
   );
 };

package/src/components/metrics-table-row-count/index.ts

@@ -0,0 +1 @@
+export * from './metrics-table-row-count';

package/src/components/metrics-table-row-count/metrics-table-row-count.module.css

@@ -0,0 +1,5 @@
+.root {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 2px;
+}

package/src/components/metrics-table-row-count/metrics-table-row-count.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { FlexStack } from '../../layout';
+import { FlexStackProps } from '../../layout/flex-stack';
+
+export type MetricsTableRowCountProps = {
+  count: number;
+  total: number;
+} & FlexStackProps<'span'>;
+
+export const MetricsTableRowCount = (props: MetricsTableRowCountProps) => {
+  const { count, total, ...restProps } = props;
+
+  return (
+    <FlexStack inline gap="xxxsmall" alignItems="bottom" {...restProps}>
+      <span>{count}</span>
+      <span>/</span>
+      <span>{total}</span>
+    </FlexStack>
+  );
+};

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

@@ -55,6 +55,15 @@ export type TileGroupSizeDisplay = 'minimal' | 'small' | 'default';
 
 export type TileSizeDisplay = 'minimal' | 'small' | 'default';
 
+/**
+ * DOM marker set on every tile and tile group title (see `tile/tile.tsx` and
+ * `tile-group-title/tile-group-title.tsx`).
+ * `MetricsTreemap` uses it to resolve the hovered node from a single delegated
+ * pointer handler, instead of attaching hover listeners to every cell.
+ */
+export const NODE_ID_ATTRIBUTE = 'data-treemap-id';
+export const NODE_ID_SELECTOR = `[${NODE_ID_ATTRIBUTE}]`;
+
 export const SQUARIFY_RATIO = 1.66;
 export const PADDING_OUTER = 1;
 export const PADDING_INNER = 2;

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

@@ -16,270 +16,6 @@
   background: var(--color-background);
 }
 
-/**
- * Tile group
- */
-.tileGroup {
-  position: absolute;
-}
-
-.tileGroupTitle {
-  width: 100%;
-  cursor: default;
-}
-
-.tileGroupTitleContent {
-  width: 100%;
-  padding: var(--space-xxxsmall) 2px var(--space-xxxsmall) var(--space-xxsmall);
-  display: flex;
-  align-items: center;
-  color: var(--color-text);
-  font-family: var(--font-family-fixed);
-  font-size: 10px;
-  line-height: var(--space-small);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.tileGroupTitleText,
-.tileGroupTitleTotal {
-  flex: 0 0 auto;
-  min-width: 0;
-}
-
-.tileGroupTitleTotal {
-  margin-left: var(--space-xxsmall);
-  color: var(--color-text-light);
-}
-
-.tileGroupTitle {
-  transition: var(--transition-out);
-}
-
-.tileGroupTitle:hover .tileGroupTitleText {
-  text-decoration: underline;
-  transition: var(--transition-in);
-}
-
-/** Tile group size variation */
-.tileGroup {
-  transition: var(--transition-out);
-  transition-property: background-color, outline;
-  border-radius: var(--radius-xsmall);
-}
-
-.tileGroup--minimal,
-.tileGroup--small {
-  border-radius: calc(var(--radius-xsmall) / 2);
-}
-
-.tileGroup--minimal .tileGroupTitle,
-.tileGroup--small .tileGroupTitle {
-  height: 100%; /* full height when title is missing or we do not render any children */
-}
-
-.tileGroup--minimal .tileGroupTitleContent,
-.tileGroup--small .tileGroupTitleContent {
-  min-height: 100%;
-}
-
-/** Tile group nested variation */
-.nested .tileGroup {
-  background-color: rgba(27, 26, 33, 0.03);
-  outline: 1px solid rgba(255, 255, 255, 0.8);
-}
-
-.nested .tileGroup:has(> .tileGroupTitle:hover),
-.nested .tileGroup:has(> .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(> .tileGroupTitle:hover),
-.nested .tileGroup--NEGATIVE:has(> .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(> .tileGroupTitle:hover),
-.nested .tileGroup--POSITIVE:has(> .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(> .tileGroupTitle:hover),
-.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tile:hover),
-.nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
-.nested .tileGroup--NEGATIVE > .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tile:hover) {
-  background-color: var(--color-background);
-  background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
-}
-
-/** Leaf wrapper button */
-.tile {
-  position: absolute;
-  appearance: none;
-  border: 0;
-  border-radius: 0;
-  padding: 0;
-  border-radius: calc(var(--radius-xsmall) / 2);
-  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;
-}
-
-.tile::before {
-  content: '';
-  display: block;
-  position: absolute;
-  z-index: 1;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: currentColor;
-}
-
-.tileContent {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  padding: var(--space-xxsmall) var(--space-xxsmall);
-  gap: var(--space-xxxsmall);
-  line-height: var(--line-height-heading);
-}
-
-/** 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: 10px;
-}
-
-.tileSizeSmall .tileContentLabel {
-  margin-top: 0;
-}
-
-/** Tile diff variation */
-.tile {
-  outline: 1px solid rgba(255, 255, 255, 1);
-  color: var(--color-text);
-}
-
-.tile::before {
-  color: var(--color-highlight);
-  transition: var(--transition-out);
-  transition-property: opacity;
-  opacity: 0.6;
-}
-
-.tile:hover::before {
-  transition: var(--transition-in);
-  transition-property: opacity;
-  opacity: 0.4;
-}
-
-.tile: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);
-}
-
 /** empty message */
 .emptyMessage {
   position: absolute;
@@ -287,9 +23,6 @@
   top: 0;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .emptyMessageWrapper {
@@ -298,13 +31,8 @@
 }
 
 /** tooltip */
-.tileContentTooltipAnchor {
-  width: 100%;
-  height: 100%;
-}
-
 .tooltip {
-  z-index: var(--layer-high);
+  z-index: var(--layer-overlay);
   padding: var(--space-xsmall) var(--space-small);
   border-radius: var(--radius-medium);
   width: calc(100vw - 2 * var(--space-small));
@@ -326,7 +54,8 @@
   font-size: var(--size-small);
 }
 
-/* prevent tooltip portal wrapper from capturing events */
+/* prevent the tooltip portal wrapper from capturing pointer events - the
+   treemap relies on pointer events reaching the canvas to track the hovered cell */
 div[role='presentation']:has(.tooltip) {
   pointer-events: none;
 }