@bundle-stats/ui 4.23.0-beta.4 → 4.23.0-beta.6

package/src/components/bundle-assets/bundle-assets.tsx

@@ -26,6 +26,7 @@ import { MetricsTable } from '../metrics-table';
 import { MetricsTableExport } from '../metrics-table-export';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
+import { MetricsTableRowCount } from '../metrics-table-row-count';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
@@ -164,7 +165,7 @@ export const BundleAssets = (props: BundleAssetsProps) => {
     () => (
       <MetricsTableTitle
         title={I18N.ASSETS}
-        info={`${items.length}/${totalRowCount}`}
+        info={<MetricsTableRowCount count={items.length} total={totalRowCount} />}
         popoverInfo={I18N.ASSETS_INFO}
         popoverHref={config.documentation.assets}
       />
@@ -205,6 +206,11 @@ export const BundleAssets = (props: BundleAssetsProps) => {
     [EntryComponentLink],
   );
 
+  const handleRowClick = useCallback(
+    (row: ReportMetricRow) => showEntryInfo(row.key),
+    [showEntryInfo],
+  );
+
   const emptyMessage = useMemo(
     () => (
       <EmptySet
@@ -276,6 +282,7 @@ export const BundleAssets = (props: BundleAssetsProps) => {
               runs={jobs}
               items={items}
               renderRowHeader={renderRowHeader}
+              onRowClick={handleRowClick}
               emptyMessage={emptyMessage}
               showHeaderSum
               title={metricsTableTitle}

package/src/components/bundle-assets-totals/bundle-assets-totals.jsx

@@ -72,6 +72,10 @@ export const BundleAssetsTotals = ({
     [history],
   );
 
+  const handleItemClick = onTreemapItemClick || handleMetricsTreemapItemClick;
+
+  const handleRowClick = useCallback((row) => handleItemClick(row.key), [handleItemClick]);
+
   const exportDialog = useDialogState();
   const [exportSourceType, setExportSourceType] = useState(undefined);
 
@@ -98,6 +102,7 @@ export const BundleAssetsTotals = ({
               runs={jobs}
               items={items}
               renderRowHeader={renderRowHeader}
+              onRowClick={handleRowClick}
               showHeaderSum
               {...restProps}
             />
@@ -112,10 +117,7 @@ export const BundleAssetsTotals = ({
                   rows={items}
                 />
               </Table>
-              <MetricsTreemap
-                treeNodes={getTreemapNodes(items)}
-                onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
-              />
+              <MetricsTreemap treeNodes={getTreemapNodes(items)} onItemClick={handleItemClick} />
             </>
           )}
         </Box>

package/src/components/bundle-modules/bundle-modules.module.css

@@ -12,8 +12,7 @@
 }
 
 .nameTagDuplicated {
-  margin-right: var(--space-xxxsmall);
-  vertical-align: baseline;
+  flex: 0 0 auto;
 }
 
 .nameTagDuplicated::before {
@@ -21,18 +20,5 @@
 }
 
 .nameText {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.root .name:hover,
-.root .name:active,
-.root .name:focus {
-  text-decoration: none;
-}
-
-.root .name:hover .nameText,
-.root .name:active .nameText,
-.root .name:focus .nameText {
-  text-decoration: underline;
+  flex: 1 1 auto;
 }

package/src/components/bundle-modules/bundle-modules.tsx

@@ -36,6 +36,7 @@ import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '.
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableTitle } from '../metrics-table-title';
+import { MetricsTableRowCount } from '../metrics-table-row-count';
 import { ModuleInfo } from '../module-info';
 import { generateFilterFieldsData } from './bundle-modules.utils';
 import * as I18N_MODULES from './bundle-modules.i18n';
@@ -57,12 +58,12 @@ const RowHeader = (props: RowHeaderProps) => {
   const moduleRow = row as ReportMetricModuleRow;
 
   return (
-    <EntryComponentLink entryId={row.key} className={css.name}>
+    <FlexStack as={EntryComponentLink} entryId={row.key} inline alignItems="center" gap="xxxsmall">
       {moduleRow.duplicated && (
         <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
       )}
       <FileName className={css.nameText} name={moduleRow.label} />
-    </EntryComponentLink>
+    </FlexStack>
   );
 };
 
@@ -228,7 +229,7 @@ export const BundleModules = (props: BundleModulesProps) => {
     () => (
       <MetricsTableTitle
         title={I18N.MODULES}
-        info={`${items.length}/${totalRowCount}`}
+        info={<MetricsTableRowCount count={items.length} total={totalRowCount} />}
         popoverInfo={I18N.MODULES_INFO}
         popoverHref={config.documentation.modules}
       />
@@ -241,6 +242,11 @@ export const BundleModules = (props: BundleModulesProps) => {
     [EntryComponentLink],
   );
 
+  const handleRowClick = useCallback(
+    (row: ReportMetricRow) => showEntryInfo(row.key),
+    [showEntryInfo],
+  );
+
   const emptyMessage = useMemo(
     () => (
       <EmptySet
@@ -348,6 +354,7 @@ export const BundleModules = (props: BundleModulesProps) => {
               items={items}
               runs={jobs}
               renderRowHeader={renderRowHeader}
+              onRowClick={handleRowClick}
               emptyMessage={emptyMessage}
               showHeaderSum
               title={metricsTableTitle}

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

@@ -22,6 +22,7 @@ import { MetricsTableExport } from '../metrics-table-export';
 import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
+import { MetricsTableRowCount } from '../metrics-table-row-count';
 import { PackageInfo } from '../package-info';
 import { SEARCH_PLACEHOLDER } from './bundle-packages.i18n';
 import css from './bundle-packages.module.css';
@@ -48,7 +49,14 @@ const getDropdownFilters = ({ compareMode, filters }) => ({
 
 const PackageName = ({ row, packageName, showDetails, EntryComponentLink }) => {
   return (
-    <EntryComponentLink entryId={showDetails ? row.key : packageName} className={css.packageName}>
+    <FlexStack
+      as={EntryComponentLink}
+      entryId={showDetails ? row.key : packageName}
+      inline
+      alignItems="center"
+      gap="xxxsmall"
+      className={css.packageName}
+    >
       {showDetails && row.duplicate && (
         <Tag
           className={css.packageNameTagDuplicate}
@@ -58,7 +66,7 @@ const PackageName = ({ row, packageName, showDetails, EntryComponentLink }) => {
         />
       )}
       <span className={css.packageNameLabel}>{packageName}</span>
-    </EntryComponentLink>
+    </FlexStack>
   );
 };
 
@@ -217,7 +225,7 @@ export const BundlePackages = (props) => {
     () => (
       <MetricsTableTitle
         title={I18N.PACKAGES}
-        info={`${items.length}/${totalRowCount}`}
+        info={<MetricsTableRowCount count={items.length} total={totalRowCount} />}
         popoverInfo={I18N.PACKAGES_INFO}
         popoverHref={config.documentation.packages}
       />
@@ -249,6 +257,8 @@ export const BundlePackages = (props) => {
     [PackageNameCustomComponentLink],
   );
 
+  const handleRowClick = useCallback((row) => showEntryInfo(row.key), [showEntryInfo]);
+
   const emptyMessage = useMemo(
     () => (
       <EmptySet
@@ -320,6 +330,7 @@ export const BundlePackages = (props) => {
               items={items}
               emptyMessage={emptyMessage}
               renderRowHeader={renderRowHeader}
+              onRowClick={handleRowClick}
               showHeaderSum
               title={metricsTableTitle}
               sort={sort}

package/src/components/bundle-packages/bundle-packages.module.css

@@ -12,8 +12,20 @@
 }
 
 .packageName {
-  display: inline-block;
   color: var(--color-text-light);
+  text-decoration: none;
+}
+
+.packageNameTagDuplicate {
+  flex: 0 0 auto;
+}
+
+.packageNameTagDuplicate::before {
+  content: 'd';
+}
+
+.packageNameLabel {
+  flex: 1 1 auto;
 }
 
 .packageName:last-child {
@@ -25,29 +37,13 @@
   margin: 0 var(--space-xxxsmall);
   content: '/';
   color: var(--color-text-ultra-light);
+  text-decoration: none;
 }
 
-.packageNameTagDuplicate {
-  margin-right: var(--space-xxxsmall);
-  vertical-align: middle;
-}
-
-.packageNameLabel {
-  vertical-align: middle;
-}
-
-.packageNameTagDuplicate::before {
-  content: 'd';
-}
-
-.root .packageName:hover,
-.root .packageName:active,
-.root .packageName:focus {
-  text-decoration: none;
+.packageName:hover {
+  text-decoration: none !important;
 }
 
-.root .packageName:hover .packageNameLabel,
-.root .packageName:active .packageNameLabel,
-.root .packageName:focus .packageNameLabel {
-  text-decoration: underline;
+.packageName:hover .packageNameLabel {
+  text-decoration: underline !important;
 }

package/src/components/jobs-header/jobs-header.module.css

@@ -1,7 +1,6 @@
 .root {
   padding: var(--space-small) 0;
   width: 100%;
-  display: flex;
 }
 
 .item {

package/src/components/jobs-header/jobs-header.tsx

@@ -76,7 +76,7 @@ export const JobsHeader = (props: JobsHeaderProps & React.ComponentProps<'header
   const rootClassName = cx(css.root, className);
 
   return (
-    <header className={rootClassName}>
+    <FlexStack as="header" className={rootClassName}>
       {jobs?.map((job, index) => (
         <Item
           key={job.internalBuildNumber || index}
@@ -84,6 +84,6 @@ export const JobsHeader = (props: JobsHeaderProps & React.ComponentProps<'header
           tag={index === 0 ? I18N.CURRENT : I18N.BASELINE}
         />
       ))}
-    </header>
+    </FlexStack>
   );
 };

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

@@ -15,18 +15,18 @@ export const MetricsTableOptions = (props: MetricsTableOptionsProps) => {
 
   return (
     <Dropdown glyph="more-vertical" placement="bottom-end" {...restProps}>
-      <DropdownGroup>
-        {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
-        {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
-      </DropdownGroup>
-      <DropdownGroup>
-        {onExportClick && (
-          <>
-            <DropdownItem onClick={() => onExportClick('csv')}>{I18N.EXPORT_CSV}</DropdownItem>
-            <DropdownItem onClick={() => onExportClick('json')}>{I18N.EXPORT_JSON}</DropdownItem>
-          </>
-        )}
-      </DropdownGroup>
+      {(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.module.css

@@ -163,11 +163,7 @@
   z-index: 1;
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
   padding: var(--space-xxsmall);
-  gap: var(--space-xxxsmall);
   line-height: var(--line-height-heading);
   cursor: default;
 }
@@ -284,9 +280,6 @@
   top: 0;
   width: 100%;
   height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .emptyMessageWrapper {

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

@@ -20,6 +20,7 @@ import {
   getMetricRunInfo,
 } from '@bundle-stats/utils';
 
+import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { FileName } from '../../ui/file-name';
 import { Delta } from '../delta';
@@ -110,12 +111,22 @@ interface TileContentProps {
   runInfo: MetricRunInfo;
 }
 
+const TileContentContainer = (props: ComponentProps<'div'>) => (
+  <FlexStack
+    direction="column"
+    justifyContent="center"
+    gap="xxxsmall"
+    className={css.tileContent}
+    {...props}
+  />
+);
+
 const TileContent = (props: TileContentProps) => {
   const { label, sizeDisplay, item, runInfo } = props;
 
   // Render only the container
   if (sizeDisplay === 'minimal') {
-    return <div className={css.tileContent} />;
+    return <TileContentContainer />;
   }
 
   const resolvedLabel = label || item.label;
@@ -123,14 +134,14 @@ const TileContent = (props: TileContentProps) => {
   // Render only the label
   if (sizeDisplay === 'small') {
     return (
-      <div className={css.tileContent}>
+      <TileContentContainer>
         <p className={css.tileContentLabel}>{resolvedLabel}</p>
-      </div>
+      </TileContentContainer>
     );
   }
 
   return (
-    <div className={css.tileContent}>
+    <TileContentContainer>
       <p className={css.tileContentLabel}>{label || item.label}</p>
       <p className={css.tileContentValue}>
         <span className={css.tileContentMetric}>{runInfo.displayValue}</span>
@@ -140,7 +151,7 @@ const TileContent = (props: TileContentProps) => {
           deltaType={runInfo.deltaType}
         />
       </p>
-    </div>
+    </TileContentContainer>
   );
 };
 
@@ -585,9 +596,9 @@ export const MetricsTreemap = (props: MetricsTreemapProps & ComponentProps<'div'
           {canvasContent}
         </div>
       ) : (
-        <div className={css.emptyMessage}>
+        <FlexStack alignItems="center" justifyContent="center" className={css.emptyMessage}>
           <div className={css.emptyMessageWrapper}>{emptyMessage}</div>
-        </div>
+        </FlexStack>
       )}
       {tooltipNode && (
         <Tooltip state={tooltipState} className={css.tooltip}>

package/src/components/summary/summary.module.css

@@ -5,10 +5,6 @@
 
 .row {
   width: 100%;
-  display: flex;
-  align-items: stretch;
-  flex-wrap: wrap;
-  gap: var(--space-small);
 }
 
 .rowGroup {
@@ -26,13 +22,6 @@
   margin-top: var(--summary-gap);
 }
 
-.items {
-  display: flex;
-  align-items: stretch;
-  flex-wrap: wrap;
-  gap: var(--space-medium);
-}
-
 .item {
   flex: 1 1 10%; /* force equal sizes */
   min-width: 8em;