@bundle-stats/ui 4.4.2 → 4.5.0-beta.0

package/src/components/bundle-modules/index.jsx

@@ -19,7 +19,6 @@ import {
   getCustomSort,
   useModuleFilterByChunk,
 } from './bundle-modules.utils';
-import { SORT_BY } from './bundle-modules.constants';
 
 export const BundleModules = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
@@ -88,9 +87,8 @@ export const BundleModules = (props) => {
 
   const sortParams = useRowsSort({
     rows: filteredRows,
-    sortFields: SORT_BY,
-    sortBy,
-    sortDirection: direction,
+    fieldPath: sortBy,
+    direction,
     getCustomSort,
   });
 

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

@@ -8,7 +8,6 @@ import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
-import { SortDropdown } from '../../ui/sort-dropdown';
 import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { ComponentLink } from '../component-link';
@@ -117,7 +116,6 @@ export const BundlePackages = (props) => {
     resetAllFilters,
     totalRowCount,
     filters,
-    sortFields,
     sort,
     updateSort,
     search,
@@ -178,7 +176,6 @@ export const BundlePackages = (props) => {
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-              <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -209,6 +206,8 @@ export const BundlePackages = (props) => {
             renderRowHeader={renderRowHeader}
             showHeaderSum
             title={metricsTableTitle}
+            sort={sort}
+            updateSort={updateSort}
           />
         </main>
       </section>
@@ -259,12 +258,6 @@ BundlePackages.propTypes = {
     changed: PropTypes.bool,
   }).isRequired,
   hasActiveFilters: PropTypes.bool,
-  sortFields: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      label: PropTypes.string,
-      defaultDirection: PropTypes.bool,
-    }),
-  }).isRequired,
   sort: PropTypes.shape({
     sortBy: PropTypes.string,
     direction: PropTypes.string,

package/src/components/bundle-packages/bundle-packages.utils.js

@@ -1,8 +1,6 @@
 import uniq from 'lodash/uniq';
 import { PACKAGE_FILTERS } from '@bundle-stats/utils';
 
-import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-packages.constants';
-
 // Get a list of duplicate packages across jobs
 export const getDuplicatePackages = (jobs) => {
   const jobsDuplicatePackages = jobs.map((job) => {
@@ -25,21 +23,7 @@ export const getRowFilter = (filters) => (item) => {
   return true;
 };
 
-export const getCustomSort = (sortId) => (item) => {
-  if (sortId === SORT_BY_NAME) {
-    return item.key;
-  }
-
-  if (sortId === SORT_BY_DELTA) {
-    return item?.runs?.[0]?.delta ? Math.abs(item.runs[0].delta) : 0;
-  }
-
-  if (sortId === SORT_BY_SIZE) {
-    return item?.runs?.[0]?.value || 0;
-  }
-
-  return [!item.changed, item.key];
-};
+export const getCustomSort = (item) => [!item.changed, item.key];
 
 export const getAddRowDuplicateFlag = (duplicateJobs) => (row) => ({
   ...row,

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

@@ -6,7 +6,6 @@ import * as webpack from '@bundle-stats/utils/lib-esm/webpack/compare';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
-import { SORT_BY } from './bundle-packages.constants';
 import { BundlePackages as BundlePackagesComponent } from './bundle-packages';
 import { getDuplicatePackages, getAddRowDuplicateFlag, getRowFilter, getCustomSort } from './bundle-packages.utils';
 
@@ -50,9 +49,8 @@ export const BundlePackages = (props) => {
 
   const sortParams = useRowsSort({
     rows: filteredRows,
-    sortFields: SORT_BY,
-    sortBy,
-    sortDirection: direction,
+    fieldPath: sortBy,
+    direction,
     getCustomSort,
   });
 

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import isEmpty from 'lodash/isEmpty';
@@ -11,102 +11,109 @@ import { Stack } from '../../layout/stack';
 import { Metric } from '../metric';
 import { Delta } from '../delta';
 import { JobName } from '../job-name';
+import { SortButton } from '../sort-button';
 import styles from './metrics-table.module.css';
 
 const METRIC_TYPE_DATA = getGlobalMetricType(null, METRIC_TYPE_FILE_SIZE);
 const VISIBLE_COUNT = 500;
+const BASELINE_COLUMN_SPAN = 1;
+const CURRENT_COLUMN_SPAN = 3;
+const BASELINE_TITLE = 'Baseline';
+const CURRENT_TITLE = 'Current';
 
-const getRowsRunTotal = (rows, runIndex) => sum(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
+const getRowsRunTotal = (rows, runIndex) =>
+  sum(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
 
-const getHeaderLabelCells = (rows) => (run, runIndex, runs) => {
-  const isBaseline = runIndex === runs.length - 1;
-  const className = cx(styles.value, isBaseline ? styles.baseline : styles.current);
+const ColumnJob = ({ run, isBaseline }) => {
+  const colSpan = isBaseline ? BASELINE_COLUMN_SPAN : CURRENT_COLUMN_SPAN;
 
   if (!run) {
-    return [
-      { children: '-', className },
-      ...(!isBaseline ? [{ children: ' ', className: styles.delta }] : []),
-    ];
+    return <Table.Th colSpan={colSpan}>-</Table.Th>;
   }
 
   const { label, internalBuildNumber } = run;
 
-  const jobName = (
-    <JobName
-      title={runIndex === 0 ? 'Current' : 'Baseline'}
-      internalBuildNumber={internalBuildNumber}
-      className={styles.jobName}
-    >
-      {label}
-    </JobName>
+  return (
+    <Table.Th className={styles.job} colSpan={colSpan}>
+      <JobName
+        title={isBaseline ? BASELINE_TITLE : CURRENT_TITLE}
+        internalBuildNumber={internalBuildNumber}
+        className={styles.jobName}
+      >
+        {label}
+      </JobName>
+    </Table.Th>
   );
-
-  return [
-    // Value column
-    { children: jobName, className },
-    // Delta column
-    ...(!isBaseline ? [{ children: ' ', className: cx(styles.delta) }] : []),
-  ];
 };
 
-const getHeaderTotalCells = (rows) => (run, runIndex, runs) => {
-  const isBaseline = runIndex === runs.length - 1;
-  const className = cx(styles.value, isBaseline ? styles.baseline : styles.current);
-
+const ColumnSum = ({ rows, isBaseline, runIndex, updateSort, sort }) => {
   const currentRunTotal = getRowsRunTotal(rows, runIndex);
   const baselineRunTotal = !isBaseline && getRowsRunTotal(rows, runIndex + 1);
   const infoTotal = getMetricRunInfo(METRIC_TYPE_DATA, currentRunTotal, baselineRunTotal);
+  const fieldPath = `runs[${runIndex}]`;
 
-  return [
-    // Value column
-    {
-      children: <Metric className={styles.tableHeaderRunMetric} value={infoTotal.displayValue} />,
-      className,
-    },
-
-    // Delta column
-    ...(!isBaseline
-      ? [
-          {
-            children: (
+  return (
+    <>
+      <Table.Th className={cx(styles.value, styles.sum)}>
+        {(updateSort && sort) ? (
+          <SortButton
+            fieldPath={fieldPath}
+            fieldName="value"
+            label="absolute value"
+            updateSort={updateSort}
+            sort={sort}
+          >
+            <Metric value={infoTotal.displayValue} />
+          </SortButton>
+        ) : (
+          <Metric value={infoTotal.displayValue} />
+        )}
+      </Table.Th>
+      {!isBaseline && (
+        <>
+          <Table.Th className={cx(styles.delta, styles.sum)}>
+            {(updateSort && sort) ? (
+              <SortButton
+                fieldPath={fieldPath}
+                fieldName="delta"
+                label="absolute change"
+                updateSort={updateSort}
+                sort={sort}
+              >
+                <Delta displayValue={infoTotal.displayDelta} deltaType={infoTotal.deltaType} />
+              </SortButton>
+            ) : (
+              <Delta displayValue={infoTotal.displayDelta} deltaType={infoTotal.deltaType} />
+            )}
+          </Table.Th>
+          <Table.Th className={cx(styles.delta, styles.sum)}>
+            {(updateSort && sort) ? (
+              <SortButton
+                fieldPath={fieldPath}
+                fieldName="deltaPercentage"
+                label="absolute percentual change"
+                updateSort={updateSort}
+                sort={sort}
+              >
+                <Delta
+                  displayValue={infoTotal.displayDeltaPercentage}
+                  deltaType={infoTotal.deltaType}
+                />
+              </SortButton>
+            ) : (
               <Delta
                 displayValue={infoTotal.displayDeltaPercentage}
                 deltaType={infoTotal.deltaType}
               />
-            ),
-            className: styles.delta,
-          },
-        ]
-      : []),
-  ];
+            )}
+          </Table.Th>
+        </>
+      )}
+    </>
+  );
 };
 
-const getHeaderRows = (runs, items, showHeaderSum, title) => [
-  {
-    className: styles.headerRowColumns,
-    cells: [
-      // Metric name column - one empty strying to render the column
-      {
-        children: title || ' ',
-        className: styles.metricName,
-        rowSpan: showHeaderSum ? 2 : 1,
-      },
-
-      // Runs
-      ...runs.map(getHeaderLabelCells(items)).flat(),
-    ],
-  },
-  ...(showHeaderSum
-    ? [
-        {
-          className: styles.headerRowTotals,
-          cells: runs.map(getHeaderTotalCells(items)).flat(),
-        },
-      ]
-    : []),
-];
-
-const MetricsTableRow = ({ item, renderRowHeader }) => (
+const Row = ({ item, renderRowHeader }) => (
   <Table.Tr className={cx(!item.changed && styles.unchanged)}>
     <Table.Th className={styles.metricName}>{renderRowHeader(item)}</Table.Th>
 
@@ -120,11 +127,13 @@ const MetricsTableRow = ({ item, renderRowHeader }) => (
           <>
             <Table.Td className={valueClassName}>-</Table.Td>
             {!isBaseline && <Table.Td className={styles.delta} />}
+            {!isBaseline && <Table.Td className={cx(styles.delta, styles.deltaPercentage)} />}
           </>
         );
       }
 
-      const { displayValue, deltaPercentage, displayDeltaPercentage, deltaType } = run;
+      const { displayValue, deltaPercentage, displayDelta, displayDeltaPercentage, deltaType } =
+        run;
 
       return (
         <>
@@ -132,9 +141,14 @@ const MetricsTableRow = ({ item, renderRowHeader }) => (
             <Metric value={displayValue} />
           </Table.Td>
           {!isBaseline && typeof deltaPercentage === 'number' && (
-            <Table.Td className={styles.delta}>
-              <Delta displayValue={displayDeltaPercentage} deltaType={deltaType} />
-            </Table.Td>
+            <>
+              <Table.Td className={styles.delta}>
+                <Delta displayValue={displayDelta} deltaType={deltaType} />
+              </Table.Td>
+              <Table.Td className={cx(styles.delta, styles.deltaPercentage)}>
+                <Delta displayValue={displayDeltaPercentage} deltaType={deltaType} />
+              </Table.Td>
+            </>
           )}
         </>
       );
@@ -142,7 +156,7 @@ const MetricsTableRow = ({ item, renderRowHeader }) => (
   </Table.Tr>
 );
 
-MetricsTableRow.propTypes = {
+Row.propTypes = {
   item: PropTypes.shape({
     changed: PropTypes.bool,
     runs: PropTypes.arrayOf(
@@ -165,21 +179,14 @@ export const MetricsTable = ({
   items,
   emptyMessage,
   showHeaderSum,
-  headerRows,
   title,
   showAllItems,
   setShowAllItems,
+  sort,
+  updateSort,
   ...restProps
 }) => {
-  const { headers, columnClassNames } = useMemo(() => {
-    const headerColumns = getHeaderRows(runs, items, showHeaderSum, title);
-
-    return {
-      headers: [...headerRows, ...headerColumns],
-      // First header row has the column class names
-      columnClassNames: headerColumns[0].cells.map((headerColumn) => headerColumn.className),
-    };
-  }, [headerRows, runs, items, showHeaderSum, title]);
+  const columnCount = (runs.length - 1) * CURRENT_COLUMN_SPAN + BASELINE_COLUMN_SPAN + 1;
 
   const rootClassName = cx(
     styles.root,
@@ -196,24 +203,32 @@ export const MetricsTable = ({
   return (
     <Table className={rootClassName} compact {...restProps}>
       <Table.THead>
-        {headers.map((headerRow) => {
-          const { cells, className: rowClassName } = headerRow.cells
-            ? headerRow
-            : { cells: headerRow };
-
-          return (
-            <Table.Tr className={rowClassName}>
-              {cells.map((header) => (
-                <Table.Th {...header} />
-              ))}
-            </Table.Tr>
-          );
-        })}
+        <Table.Tr className={styles.headerRow}>
+          <Table.Th className={styles.metricName} rowSpan={showHeaderSum ? 2 : 1}>
+            {title || ' '}
+          </Table.Th>
+          {runs.map((run, runIndex) => (
+            <ColumnJob run={run} isBaseline={runIndex === runs.length - 1} />
+          ))}
+        </Table.Tr>
+        {showHeaderSum && (
+          <Table.Tr className={styles.headerRow}>
+            {runs.map((run, runIndex) => (
+              <ColumnSum
+                rows={items}
+                isBaseline={runIndex === runs.length - 1}
+                runIndex={runIndex}
+                updateSort={updateSort}
+                sort={sort}
+              />
+            ))}
+          </Table.Tr>
+        )}
       </Table.THead>
       <Table.TBody>
         {showEmpty && (
           <Table.Tr>
-            <Table.Td className={styles.empty} colSpan={columnClassNames?.length || 1}>
+            <Table.Td className={styles.empty} colSpan={columnCount}>
               <Stack space="xxsmall">
                 <div>
                   <Icon glyph={Icon.ICONS.INFO} className={styles.emptyIcon} size="large" />
@@ -227,30 +242,29 @@ export const MetricsTable = ({
         {showItems && (
           <>
             {visibleItems.map((item) => (
-              <MetricsTableRow key={item.key} item={item} renderRowHeader={renderRowHeader} />
+              <Row key={item.key} item={item} renderRowHeader={renderRowHeader} />
             ))}
 
             {hasHiddenItems && (
               <Table.Tr>
-                <Table.Td className={styles.showAllItems} colSpan={columnClassNames?.length || 1}>
+                <Table.Td className={styles.showAllItems} colSpan={columnCount}>
                   {showAllItems ? (
-                      <button
-                        onClick={() => setShowAllItems(false)}
-                        type="button"
-                        className={styles.showAllItemsButton}
-                      >
-                        Show less
-                      </button>
-                    ) : (
-                      <button
-                        onClick={() => setShowAllItems(true)}
-                        type="button"
-                        className={styles.showAllItemsButton}
-                      >
-                        Show all
-                      </button>
-                    )
-                  }
+                    <button
+                      onClick={() => setShowAllItems(false)}
+                      type="button"
+                      className={styles.showAllItemsButton}
+                    >
+                      Show less
+                    </button>
+                  ) : (
+                    <button
+                      onClick={() => setShowAllItems(true)}
+                      type="button"
+                      className={styles.showAllItemsButton}
+                    >
+                      Show all
+                    </button>
+                  )}
                 </Table.Td>
               </Table.Tr>
             )}
@@ -266,7 +280,6 @@ MetricsTable.defaultProps = {
   renderRowHeader: (item) => item.label,
   emptyMessage: 'No entries found.',
   showHeaderSum: false,
-  headerRows: [],
   title: '',
 };
 
@@ -292,15 +305,5 @@ MetricsTable.propTypes = {
   ).isRequired,
   emptyMessage: PropTypes.element,
   showHeaderSum: PropTypes.bool,
-  headerRows: PropTypes.arrayOf(
-    PropTypes.arrayOf(
-      PropTypes.oneOfType([
-        PropTypes.element,
-        PropTypes.shape({
-          children: PropTypes.node,
-        }),
-      ]),
-    ),
-  ),
   title: PropTypes.element,
 };

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

@@ -15,8 +15,9 @@
   width: 100%;
 }
 
-.tableHeaderRunMetric {
-  text-transform: none;
+.root .job {
+  padding-right: calc(var(--space-xxxsmall) + var(--space-small));
+  text-align: right;
 }
 
 .root .value {
@@ -26,18 +27,13 @@
 }
 
 .root .delta {
-  padding-left: 0;
-  text-align: left;
+  text-align: right;
   font-size: var(--size-xsmall);
   vertical-align: baseline;
 }
 
 .root tbody .delta {
-  line-height: 1.6rem; /* baseline alignment with the value */
-}
-
-.root .value.current {
-  padding-right: var(--space-xxsmall);
+  line-height: 1.6rem; /* baseline alignment with the column value */
 }
 
 .jobName {
@@ -45,17 +41,16 @@
 }
 
 /* columns overrides for showHeaderSum */
-.showHeaderSum .headerRowColumns .value,
-.showHeaderSum .headerRowColumns .delta {
+.showHeaderSum .headerRow .job {
   border-bottom: 0;
   padding-bottom: 0;
 }
 
-.headerRowTotals th {
-  padding-top: 0 !important;
-  font-weight: normal;
-  font-size: var(--size-xsmall);
+.showHeaderSum .headerRow .sum {
+  padding-top: var(--space-xxxsmall);
+  font-size: var(--size-small);
   vertical-align: middle;
+  text-transform: none;
 }
 
 /** rows */

package/src/components/metrics-table-title/metrics-table-title.jsx

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

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

@@ -18,8 +18,10 @@
 }
 
 .info {
+  color: var(--color-text-light);
+  font-family: var(--font-family-fixed);
   font-size: var(--size-xsmall);
-  font-weight: normal;
+  font-weight: bold;
 }
 
 .readMoreLink {

package/src/components/sort-button/index.ts

@@ -0,0 +1 @@
+export * from './sort-button';

package/src/components/sort-button/sort-button.module.css

@@ -0,0 +1,89 @@
+.root {
+  --icon-dimension: 15px;
+  display: inline-block;
+  margin: calc(0px - var(--space-xxxsmall));
+  margin-right: calc(0px - 1px - var(--icon-dimension));
+  border-radius: var(--radius-small);
+  position: relative;
+}
+
+.button {
+  appearance: none;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  transition: var(--transition-out);
+}
+
+.toggle {
+  padding: var(--space-xxxsmall);
+  padding-right: calc(1px + var(--icon-dimension));
+}
+
+.direction {
+  position: absolute;
+  padding: 2px;
+  display: block;
+  overflow: hidden;
+  right: -2px; /* compensate for the button padding */
+  color: var(--color-text-ultra-light);
+  transition: var(--transition-out);
+}
+
+.directionIcon {
+  display: block;
+  width: var(--icon-dimension);
+  height: var(--icon-dimension);
+}
+
+.directionActive {
+  color: var(--color-text);
+  transition: var(--transition-in);
+}
+
+.direction:hover,
+.direction:active,
+.direction:focus {
+  color: var(--color-text-dark);
+  transition: var(--transition-in);
+}
+
+.directionAsc {
+  padding-bottom: 0;
+  bottom: 50%;
+}
+
+.directionAsc .directionIcon {
+  transform: translateY(3px);
+}
+
+.directionDesc {
+  padding-top: 0;
+  top: 50%;
+}
+
+.directionDesc .directionIcon {
+  transform: translateY(-5px);
+}
+
+.root:hover,
+.root:active,
+.root:focus {
+  background: var(--color-outline);
+}
+
+.direction {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.active .direction,
+.root:hover .direction,
+.root:active .direction,
+.root:focus .direction {
+  pointer-events: auto;
+  opacity: 1;
+  transition: var(--transition-in);
+}