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

package/lib-esm/ui/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAUvC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL;QACE,oBAAC,eAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,mBACC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,cAAc,0CAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KACzD,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,GACb;QACD,KAAK,IAAI,CACR,oBAAC,SAAS,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC;YACrE,oBAAC,cAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAUvC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpF,OAAO,CACL;QACE,oBAAC,eAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,mBACC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,cAAc,0CAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KACzD,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,GACb;QACD,KAAK,IAAI,CACR,oBAAC,SAAS,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC;YACrE,oBAAC,cAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/ui/tooltip/tooltip.module.css

@@ -21,6 +21,17 @@
   text-align: center;
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.tooltip[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.tooltip[data-leave] {
+  pointer-events: none;
 }
 
 .arrow svg {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.22.3",
+  "version": "4.23.0-beta.1",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -38,7 +38,7 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "8.0.2",
+    "@babel/preset-env": "8.0.5",
     "@babel/preset-react": "8.0.1",
     "@babel/preset-typescript": "8.0.1",
     "@storybook/addon-vitest": "10.5.10",
@@ -47,9 +47,9 @@
     "@types/d3": "7.4.3",
     "@types/react": "18.3.13",
     "@types/react-router-dom": "5.3.3",
-    "@vitejs/plugin-react": "6.1.0",
-    "@vitest/browser": "4.1.11",
-    "@vitest/browser-playwright": "4.1.11",
+    "@vitejs/plugin-react": "6.1.1",
+    "@vitest/browser": "5.0.0",
+    "@vitest/browser-playwright": "5.0.0",
     "babel-plugin-polyfill-corejs3": "1.0.0",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.5.1",
@@ -58,11 +58,11 @@
     "cross-env": "10.1.0",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "30.4.2",
+    "jest": "^30.5.0",
     "jest-date-mock": "1.0.10",
-    "jest-environment-jsdom": "30.4.1",
+    "jest-environment-jsdom": "30.5.1",
     "lodash": "4.18.1",
-    "playwright": "1.62.1",
+    "playwright": "1.63.0",
     "prop-types": "15.8.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -70,9 +70,9 @@
     "rimraf": "6.1.3",
     "storybook": "10.5.10",
     "typescript": "5.9.3",
-    "vite": "8.2.2",
+    "vite": "8.3.0",
     "vite-plugin-svgr": "5.2.0",
-    "vitest": "4.1.11"
+    "vitest": "5.0.0"
   },
   "peerDependencies": {
     "classnames": "^2.0.0",
@@ -83,7 +83,7 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.22.3",
+    "@bundle-stats/utils": "^4.23.0-beta.1",
     "ariakit": "2.0.0-next.44",
     "d3": "7.9.0",
     "modern-css-reset": "1.4.0",
@@ -91,5 +91,5 @@
     "snarkdown": "2.0.0",
     "use-query-params": "2.2.2"
   },
-  "gitHead": "40d689d101ffc69421f87e29fb7449b4f1ae8bff"
+  "gitHead": "5ed30de2bfdfe488b8a5f3490b11d1429d89b6ad"
 }

package/src/app/app.jsx

@@ -10,7 +10,7 @@ import { BundleAssetsTotals } from '../components/bundle-assets-totals';
 import { BundleModules } from '../components/bundle-modules';
 import { BundlePackages } from '../components/bundle-packages';
 import { Insights } from '../components/insights';
-import { MetricsTableTitle } from '../components';
+import { MetricChangeLegend, MetricsTableTitle } from '../components';
 import { Summary } from '../components/summary';
 import { Box } from '../layout/box';
 import { Footer } from '../layout/footer';
@@ -150,6 +150,11 @@ const AppComponent = ({ version, jobs }) => {
   return (
     <JobsProvider jobs={jobs}>
       <Layout jobs={jobs} version={version}>
+        <Container className={css.metricChangeLegendContainer}>
+          <div className={css.metricChangeLegendContainerInner}>
+            <MetricChangeLegend />
+          </div>
+        </Container>
         <Container className={css.summaryContainer}>
           <Summary
             data={jobs[0].summary}

package/src/app/app.module.css

@@ -17,11 +17,21 @@
   border-bottom: 1px solid var(--color-outline);
 }
 
-.summaryContainer {
+.metricChangeLegendContainer {
   padding-top: var(--space-small);
   padding-bottom: var(--space-xxsmall);
 }
 
+.metricChangeLegendContainerInner {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.summaryContainer {
+  padding-top: var(--space-xxsmall);
+  padding-bottom: var(--space-xxsmall);
+}
+
 .tabsContainer {
   border-bottom: 1px solid var(--color-outline);
   background: var(--color-light);

package/src/components/delta/delta.module.css

@@ -8,16 +8,16 @@
   color: var(--color-info);
 }
 
-.HIGH_NEGATIVE {
-  color: var(--color-red-dark);
+.LOW_NEGATIVE {
+  color: var(--color-red-light);
 }
 
 .NEGATIVE {
-  color: var(--color-red-dark);
+  color: var(--color-red);
 }
 
-.LOW_NEGATIVE {
-  color: var(--color-red-light);
+.HIGH_NEGATIVE {
+  color: var(--color-red-dark);
 }
 
 .LOW_POSITIVE {
@@ -25,7 +25,7 @@
 }
 
 .POSITIVE {
-  color: var(--color-green-dark);
+  color: var(--color-green);
 }
 
 .HIGH_POSITIVE {
@@ -43,24 +43,25 @@
   background: var(--color-info-light);
 }
 
-.inverted.HIGH_NEGATIVE {
-  background: var(--color-red-dark);
+.inverted.LOW_NEGATIVE {
+  background: var(--color-red-light);
 }
 
 .inverted.NEGATIVE {
-  background: var(--color-red-dark);
+  background: var(--color-red);
 }
 
-.inverted.LOW_NEGATIVE {
-  background: var(--color-red-light);
+.inverted.HIGH_NEGATIVE {
+  background: var(--color-red-dark);
 }
 
+
 .inverted.LOW_POSITIVE {
   background: var(--color-green-light);
 }
 
 .inverted.POSITIVE {
-  background: var(--color-green-dark);
+  background: var(--color-green);
 }
 
 .inverted.HIGH_POSITIVE {

package/src/components/delta/delta.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import cx from 'classnames';
+import type { MetricRunInfoDeltaType } from '@bundle-stats/utils';
+
+import css from './delta.module.css';
+
+export interface DeltaProps {
+  /**
+   * Formatted delta value
+   */
+  displayValue: string;
+  /**
+   * Delta type - drives the color scale
+   */
+  deltaType: MetricRunInfoDeltaType;
+  /**
+   * Inverted variant - render the delta type as background color
+   */
+  inverted?: boolean;
+}
+
+export const Delta = (props: DeltaProps & React.ComponentProps<'span'>) => {
+  const { className = '', displayValue, deltaType, inverted = false, ...restProps } = props;
+
+  const rootClassName = cx(css.root, className, inverted && css.inverted, css[deltaType]);
+
+  return (
+    <span className={rootClassName} {...restProps}>
+      {displayValue}
+    </span>
+  );
+};

package/src/components/index.ts

@@ -5,12 +5,15 @@ export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
 export { ComponentLink } from './component-link';
 export { Delta } from './delta';
+export type { DeltaProps } from './delta';
 export { InsightIcon } from './insight-icon';
 export { Insights } from './insights';
 export { JobName } from './job-name';
 export { JobsHeader } from './jobs-header';
 export { LighthouseTable } from './lighthouse-table';
 export { Metric } from './metric';
+export { MetricChangeLegend } from './metric-change-legend';
+export type { MetricChangeLegendProps } from './metric-change-legend';
 export { MetricRunInfo } from './metric-run-info';
 export type { MetricRunInfoProps } from './metric-run-info';
 export { MetricsTable } from './metrics-table';

package/src/components/insight-icon/insight-icon.module.css

@@ -1,20 +1,20 @@
 .root {
-  width: calc(var(--space-small) + 6px);
-  height: calc(var(--space-small) + 6px);
-  padding: 3px;
+  width: calc(var(--space-small) + var(--space-xxsmall));
+  height: calc(var(--space-small) + var(--space-xxsmall));
+  padding: var(--space-xxxsmall);
   border-radius: 50%;
   background: var(--color-highlight);
 }
 
 .error {
-  background: var(--color-red-50);
+  background: var(--color-highlight-danger);
   color: var(--color-danger);
 }
 
 .warning {
   padding-top: 1px;
-  background: var(--color-yellow-100);
-  color: var(--color-yellow-900);
+  background: var(--color-highlight-warning);
+  color: var(--color-warning);
 }
 
 .info {

package/src/components/job-name/job-name.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Tooltip } from '../../ui/tooltip';
 import css from './job-name.module.css';
 
 export const JobName = ({
@@ -11,9 +10,9 @@ export const JobName = ({
   children,
   ...restProps
 }) => (
-  <Tooltip className={css.root} as={Component} title={title} {...restProps}>
+  <Component className={css.root} title={title} {...restProps}>
     {children || `Job #${internalBuildNumber}`}
-  </Tooltip>
+  </Component>
 );
 
 JobName.defaultProps = {

package/src/components/metric-change-legend/index.ts

@@ -0,0 +1 @@
+export * from './metric-change-legend';

package/src/components/metric-change-legend/metric-change-legend.module.css

@@ -0,0 +1,69 @@
+.root {
+  font-size: var(--size-small);
+}
+
+.itemAnchor {
+  color: var(--color-text-light);
+}
+
+.itemAnchor:hover {
+  color: var(--color-text);
+}
+
+.variants {
+  display: flex;
+  gap: 1px;
+  overflow: hidden;
+  border-radius: var(--radius-xsmall);
+}
+
+.infoPreviewCell {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.infoDescriptionCell {
+  padding-left: 0 !important;
+}
+
+.variant {
+  width: var(--space-xxsmall);
+  height: var(--space-xxsmall);
+}
+
+.large .variant {
+  width: var(--space-small);
+  height: var(--space-small);
+}
+
+.bar-improvement .variant-low {
+  background: var(--color-green-light);
+}
+
+.bar-improvement .variant-medium {
+  background: var(--color-green);
+}
+
+.bar-improvement .variant-high {
+  background: var(--color-green-dark);
+}
+
+.bar-regression .variant-low {
+  background: var(--color-red-light);
+}
+
+.bar-regression .variant-medium {
+  background: var(--color-red);
+}
+
+.bar-regression .variant-high {
+  background: var(--color-red-dark);
+}
+
+.bar-neutral .variant-medium {
+  background: var(--color-info);
+}
+
+.bar-no-change .variant-medium {
+  background: var(--color-gray-ultra-light);
+}

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MetricChangeLegend } from '.';
+
+const meta = {
+  title: 'Components/MetricChangeLegend',
+  component: MetricChangeLegend,
+} satisfies Meta<typeof MetricChangeLegend>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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} />
+              <span>{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,13 @@ 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'];
-}
+} & Pick<RunInfoProps, 'showDelta' | 'showBaseline' | 'size' | 'loading'>;
 
 export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'div'>) => {
   const {
@@ -92,16 +88,47 @@ 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,
+      };
+    }
+
+    // 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 {
-      delta: metricRunInfo.displayDeltaPercentage,
+      showDelta: true,
+      delta: metricRunInfo.displayDelta,
       deltaType: metricRunInfo.deltaType,
     };
-  }, [metricRunInfo]);
+  }, [metric, metricRunInfo, showDelta]);
 
   return (
     <RunInfo
@@ -109,10 +136,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);