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

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-header/metrics-table-header.module.css

@@ -4,23 +4,23 @@
   padding-bottom: var(--space-xxsmall);
 }
 
-.root .metric {
+.root .colMetric {
   width: 55%;
   vertical-align: middle;
 }
 
-.root .job {
+.root .colJob {
   padding-top: var(--space-xxsmall);
   text-align: right;
 }
 
-.root .value {
+.root .colValue {
   text-align: right;
   vertical-align: baseline;
   width: 15%;
 }
 
-.root .delta {
+.root .colDelta {
   text-align: right;
   font-size: var(--size-xsmall);
   vertical-align: baseline;
@@ -28,21 +28,17 @@
   color: pink;
 }
 
-.root .deltaPercentage {
+.root .colDeltaPercentage {
   width: 5%;
 }
 
-.jobName {
-  white-space: nowrap;
-}
-
 /* columns overrides for showHeaderSum */
-.showHeaderSum .job {
+.showHeaderSum .colJob {
   border-bottom: 0;
-  padding-bottom: 0;
+  padding-bottom: var(--space-xxxsmall);
 }
 
-.showHeaderSum .sum {
+.showHeaderSum .colSum {
   padding-top: 0;
   font-size: var(--size-small);
   vertical-align: middle;

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

@@ -34,11 +34,10 @@ const JobColumn = ({ job, isBaseline }: JobColumnProps) => {
   }
 
   return (
-    <Table.Th className={cx(css.col, css.job)} colSpan={colSpan}>
+    <Table.Th className={cx(css.col, css.colJob)} colSpan={colSpan}>
       <JobName
         title={isBaseline ? I18N.BASELINE_TITLE : I18N.CURRENT_TITLE}
         internalBuildNumber={internalBuildNumber}
-        className={css.jobName}
       >
         {label}
       </JobName>
@@ -65,7 +64,7 @@ const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumPr
 
   return (
     <>
-      <Table.Th className={cx(css.col, css.value, css.sum)}>
+      <Table.Th className={cx(css.col, css.colValue, css.colSum)}>
         <SortButton
           fieldPath={fieldPath}
           fieldName="value"
@@ -78,7 +77,7 @@ const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumPr
       </Table.Th>
       {!isBaseline && (
         <>
-          <Table.Th className={cx(css.col, css.delta, css.sum)}>
+          <Table.Th className={cx(css.col, css.colDelta, css.colSum)}>
             <SortButton
               fieldPath={fieldPath}
               fieldName="delta"
@@ -91,7 +90,7 @@ const SumColumn = ({ rows, isBaseline, runIndex, updateSort, sort }: ColumnSumPr
               )}
             </SortButton>
           </Table.Th>
-          <Table.Th className={cx(css.col, css.delta, css.deltaPercentage, css.sum)}>
+          <Table.Th className={cx(css.col, css.colDelta, css.colDeltaPercentage, css.colSum)}>
             <SortButton
               fieldPath={fieldPath}
               fieldName="deltaPercentage"
@@ -147,7 +146,7 @@ export const MetricsTableHeader = (
   return (
     <Table.THead className={rootClassName}>
       <Table.Tr>
-        <Table.Th className={cx(css.col, css.metric)} rowSpan={showSum ? 2 : 1}>
+        <Table.Th className={cx(css.col, css.colMetric)} rowSpan={showSum ? 2 : 1}>
           {metricTitle || ' '}
         </Table.Th>
         {jobs.map((job, runIndex) => (

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;
@@ -16,18 +15,18 @@ export const MetricsTableOptions = (props: MetricsTableOptionsProps) => {
 
   return (
     <Dropdown glyph="more-vertical" placement="bottom-end" {...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>
+      {(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-table-title/metrics-table-title.jsx

@@ -15,7 +15,7 @@ export const MetricsTableTitle = (props) => {
   const rootClassName = cx(css.root, className);
 
   return (
-    <Stack space="none" className={rootClassName}>
+    <Stack space="xxxsmall" className={rootClassName}>
       <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
         <span>{title}</span>
 

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;
 }