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

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

@@ -0,0 +1,148 @@
+import React, { ReactNode } from 'react';
+import cx from 'classnames';
+
+import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
+import { HoverCard } from '../../ui/hover-card';
+import { Table } from '../../ui/table';
+import css from './metric-change-legend.module.css';
+import { Separator } from '../../layout';
+
+type ChangeKind = 'improvement' | 'regression' | 'neutral' | 'no-change';
+type ChangeKindVariant = 'low' | 'medium' | 'high';
+
+type BarProps = {
+  className?: string;
+  kind: ChangeKind;
+  variants: ChangeKindVariant[];
+  size?: 'medium' | 'large';
+};
+
+const Variants = (props: BarProps) => {
+  const { className, kind, variants, size = 'medium' } = props;
+
+  return (
+    <span className={cx(css.variants, css[`bar-${kind}`], css[size], className)}>
+      {variants.map((variant) => (
+        <span key={variant} className={cx(css.variant, css[`variant-${variant}`])} />
+      ))}
+    </span>
+  );
+};
+
+type ChangeMagnitudeInfoProps = {
+  kind: 'improvement' | 'regression';
+  impact: string;
+};
+
+const ChangeMagnitudeInfo = (props: ChangeMagnitudeInfoProps) => {
+  const { kind, impact } = props;
+
+  return (
+    <Stack space="small">
+      <p>
+        Changes flagged as <strong>{kind}s</strong> have a {impact} impact on user performance.
+      </p>
+      <p>
+        The report shows different intensity colors depending on the magnitude of the percentage
+        change.
+      </p>
+      <Stack space="xxsmall">
+        <Separator />
+        <FlexStack alignItems="center" space="xxsmall">
+          <Variants kind={kind} variants={['low']} size="large" />
+          Change is smaller or equal than <strong>5%</strong>
+        </FlexStack>
+        <Separator />
+        <FlexStack alignItems="center" space="xxsmall">
+          <Variants kind={kind} variants={['medium']} size="large" />
+          Change is smaller or equal than <strong>50%</strong>
+        </FlexStack>
+        <Separator />
+        <FlexStack alignItems="center" space="xxsmall">
+          <Variants kind={kind} variants={['high']} size="large" />
+          Change is larger than <strong>50%</strong>
+        </FlexStack>
+      </Stack>
+    </Stack>
+  );
+};
+
+const ImprovementInfo = () => <ChangeMagnitudeInfo kind="improvement" impact="positive" />;
+const RegressionInfo = () => <ChangeMagnitudeInfo kind="regression" impact="negative" />;
+
+const NeutralInfo = () => (
+  <Stack space="small">
+    <p>
+      <strong>Neutral</strong> changes do not have a clear positive or negative impact on user
+      performance.
+    </p>
+  </Stack>
+);
+
+const NoChangeInfo = () => (
+  <Stack space="small">
+    <p>
+      The metric value is <strong>unchanged</strong> between the compared builds.
+    </p>
+  </Stack>
+);
+
+type ChangeConfig = {
+  id: ChangeKind;
+  label: string;
+  variants: ChangeKindVariant[];
+  info: ReactNode;
+};
+
+const ITEMS: ChangeConfig[] = [
+  {
+    id: 'improvement',
+    label: 'Improvement',
+    variants: ['low', 'medium', 'high'],
+    info: <ImprovementInfo />,
+  },
+  {
+    id: 'regression',
+    label: 'Regression',
+    variants: ['low', 'medium', 'high'],
+    info: <RegressionInfo />,
+  },
+  {
+    id: 'neutral',
+    label: 'Neutral',
+    variants: ['medium'],
+    info: <NeutralInfo />,
+  },
+  {
+    id: 'no-change',
+    label: 'No change',
+    variants: ['medium'],
+    info: <NoChangeInfo />,
+  },
+];
+
+export interface MetricChangeLegendProps extends React.ComponentProps<'div'> {}
+
+export const MetricChangeLegend = (props: MetricChangeLegendProps) => {
+  const { className, ...restProps } = props;
+
+  return (
+    <FlexStack inline space="small" className={cx(css.root, className)} {...restProps}>
+      {ITEMS.map(({ id, variants, label, info }) => (
+        <HoverCard
+          key={id}
+          anchorClassName={css.itemAnchor}
+          label={
+            <FlexStack inline alignItems="center" space="xxsmall" className={css.item}>
+              <Variants kind={id} variants={variants} className={css.itemVariants} />
+              <span className={css.itemLabel}>{label}</span>
+            </FlexStack>
+          }
+        >
+          {info}
+        </HoverCard>
+      ))}
+    </FlexStack>
+  );
+};

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

@@ -1,5 +1,5 @@
 import React, { type MouseEvent, useCallback, useMemo, ElementType } from 'react';
-import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
+import { getGlobalMetricType, getMetricRunInfo, MetricTypes } from '@bundle-stats/utils';
 import { Focusable } from 'ariakit/focusable';
 
 import { Stack } from '../../layout/stack';
@@ -8,11 +8,11 @@ import { Icon } from '../../ui/icon';
 import { RunInfo, RunInfoProps } from '../run-info';
 import css from './metric-run-info.module.css';
 
-interface MetricInfoProps {
+type MetricInfoProps = {
   title: string;
   description?: string;
   url?: string;
-}
+};
 
 const MetricHoverCard = ({ title, description, url }: MetricInfoProps) => {
   // The component parent can be rendered inside a link or a button
@@ -50,17 +50,14 @@ const MetricHoverCard = ({ title, description, url }: MetricInfoProps) => {
   );
 };
 
-export interface MetricRunInfoProps {
+export type MetricRunInfoProps = {
   metricId: string;
   current: number;
   baseline?: number;
-  showDelta?: boolean;
   showMetricDescription?: boolean;
-  showBaseline?: boolean;
   titleWrapper?: ElementType;
-  size?: RunInfoProps['size'];
-  loading?: RunInfoProps['loading'];
-}
+  showDeltaValue?: boolean;
+} & Pick<RunInfoProps, 'showDelta' | 'showBaseline' | 'size' | 'loading'>;
 
 export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'div'>) => {
   const {
@@ -92,16 +89,37 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
     [CustomTitleWrapper, metric.label],
   );
 
+  const baselineProps = useMemo(() => {
+    if (showBaseline) {
+      return {
+        showBaseline,
+        baseline: metric.formatter(baseline),
+      };
+    }
+
+    return { showBaseline };
+  }, [showBaseline, baseline]);
+
   const deltaProps = useMemo(() => {
-    if (!showDelta || metric.skipDelta || !('delta' in metricRunInfo)) {
-      return {};
+    if (!showDelta || metric.skipDelta) {
+      return {
+        showDelta: false,
+      };
+    }
+
+    // If the delta data is missing, do not render the dats
+    if (!('delta' in metricRunInfo)) {
+      return {
+        showDelta: false,
+      };
     }
 
     return {
-      delta: metricRunInfo.displayDeltaPercentage,
+      showDelta: true,
       deltaType: metricRunInfo.deltaType,
+      deltaPercentage: metricRunInfo.displayDeltaPercentage,
     };
-  }, [metricRunInfo]);
+  }, [metric, metricRunInfo, showDelta]);
 
   return (
     <RunInfo
@@ -109,10 +127,7 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
       titleHoverCard={titleHoverCard}
       enhance
       current={metricRunInfo.displayValue}
-      showBaseline={showBaseline}
-      {...(showBaseline && {
-        baseline: metric.formatter(baseline),
-      })}
+      {...baselineProps}
       {...deltaProps}
       {...restProps}
     />

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

@@ -7,31 +7,6 @@
   padding: calc(var(--space-xxsmall) - 1px);
 }
 
-.dropdownGroupAnchor {
-  border: none;
-  border-radius: 0;
-  position: relative;
-}
-
-.dropdownGroupAnchor::before {
-  content: '';
-  display: block;
-  width: 1px;
-  background: var(--color-outline-dark);
-  position: absolute;
-  left: 0;
-  top: var(--space-xxxsmall);
-  bottom: var(--space-xxxsmall);
-}
-
-.dropdownGroupAnchor:hover,
-.dropdownGroupAnchor:focus,
-.dropdownGroupAnchor:active {
-  border-color: var(--color-outline);
-  box-shadow: none;
-  background: none;
-}
-
 .dropdownGroup:hover {
   border-color: var(--color-outline-dark);
   transition: var(--transition-in);

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

@@ -90,44 +90,32 @@ export const MetricsDisplaySelector = (
         );
 
         return (
-          <FlexStack className={itemClassName} key={displayType}>
-            <Button
-              size="small"
-              glyph={displayProps.glyph}
-              onClick={() => onSelect(displayType)}
-              className={css.dropdownGroupButton}
-            >
-              {displayProps.label}
-            </Button>
-            <Dropdown
-              glyph={Icon.ICONS.CHEVRON_DOWN}
-              placement="bottom-end"
-              shift={-1}
-              className={css.dropdownGroupAnchor}
-            >
-              {displayGroupsData.map((displayGroupData) => {
-                const isGroupActive = isActive && displayGroupData.value === groupBy;
+          <Dropdown
+            label={displayProps.label}
+            glyph={displayProps.glyph}
+            placement="bottom-end"
+            shift={-1}
+            className={itemClassName}
+            key={displayType}
+          >
+            {displayGroupsData.map((displayGroupData) => {
+              const isGroupActive = isActive && displayGroupData.value === groupBy;
 
-                return (
-                  <DropdownItem
-                    onClick={() => onSelect(displayType, displayGroupData.value)}
-                    isActive={isGroupActive}
-                    className={cx(css.dropdownItem, isGroupActive && css.dropdownItemActive)}
-                    key={displayGroupData.value}
-                  >
-                    <FlexStack space="xxxsmall" alignItems="center">
-                      <Icon
-                        glyph={Icon.ICONS.CHECK}
-                        size="small"
-                        className={css.dropdownItemIcon}
-                      />
-                      <span>{displayGroupData.label}</span>
-                    </FlexStack>
-                  </DropdownItem>
-                );
-              })}
-            </Dropdown>
-          </FlexStack>
+              return (
+                <DropdownItem
+                  onClick={() => onSelect(displayType, displayGroupData.value)}
+                  isActive={isGroupActive}
+                  className={cx(css.dropdownItem, isGroupActive && css.dropdownItemActive)}
+                  key={displayGroupData.value}
+                >
+                  <FlexStack space="xxxsmall" alignItems="center">
+                    <Icon glyph={Icon.ICONS.CHECK} size="small" className={css.dropdownItemIcon} />
+                    <span>{displayGroupData.label}</span>
+                  </FlexStack>
+                </DropdownItem>
+              );
+            })}
+          </Dropdown>
         );
       })}
     </ControlGroup>

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}>
+      <DropdownGroup>
         {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
         {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
-      </div>
-      <div className={css.group}>
+      </DropdownGroup>
+      <DropdownGroup>
         {onExportClick && (
           <>
             <DropdownItem onClick={() => onExportClick('csv')}>{I18N.EXPORT_CSV}</DropdownItem>
             <DropdownItem onClick={() => onExportClick('json')}>{I18N.EXPORT_JSON}</DropdownItem>
           </>
         )}
-      </div>
+      </DropdownGroup>
     </Dropdown>
   );
 };

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,14 @@ export type TileGroupSizeDisplay = 'minimal' | 'small' | 'default';
 
 export type TileSizeDisplay = 'minimal' | 'small' | 'default';
 
+/**
+ * DOM marker set on every tile and tile group title (see `metrics-treemap.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

@@ -20,6 +20,7 @@
  * Tile group
  */
 .tileGroup {
+  border-radius: var(--radius-xsmall);
   position: absolute;
 }
 
@@ -31,6 +32,7 @@
 .tileGroupTitleContent {
   width: 100%;
   padding: var(--space-xxxsmall) 2px var(--space-xxxsmall) var(--space-xxsmall);
+  border-radius: var(--radius-xsmall);
   display: flex;
   align-items: center;
   color: var(--color-text);
@@ -66,12 +68,6 @@
 .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,
@@ -136,9 +132,8 @@
   position: absolute;
   appearance: none;
   border: 0;
-  border-radius: 0;
+  border-radius: var(--radius-xsmall);
   padding: 0;
-  border-radius: calc(var(--radius-xsmall) / 2);
   background: var(--color-background);
   display: flex;
   align-items: center;
@@ -159,6 +154,7 @@
   top: 0;
   width: 100%;
   height: 100%;
+  border-radius: inherit;
   background-color: currentColor;
 }
 
@@ -170,9 +166,10 @@
   display: flex;
   flex-flow: column;
   justify-content: center;
-  padding: var(--space-xxsmall) var(--space-xxsmall);
+  padding: var(--space-xxsmall);
   gap: var(--space-xxxsmall);
   line-height: var(--line-height-heading);
+  cursor: default;
 }
 
 /** Align label to other elements on the first column cells */
@@ -213,7 +210,7 @@
 /** Tile size variation */
 .tileSizeSmall .tileContent {
   padding: var(--space-xxxsmall);
-  font-size: 10px;
+  font-size: var(--size-xsmall);
 }
 
 .tileSizeSmall .tileContentLabel {
@@ -298,11 +295,6 @@
 }
 
 /** tooltip */
-.tileContentTooltipAnchor {
-  width: 100%;
-  height: 100%;
-}
-
 .tooltip {
   z-index: var(--layer-high);
   padding: var(--space-xsmall) var(--space-small);
@@ -326,7 +318,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;
 }