From f65e6534ae523cd44495978b67b9064ecaaa7716 Mon Sep 17 00:00:00 2001
From: Vio <vio@beanon.com>
Date: Tue, 13 Jun 2023 22:50:57 +0200
Subject: [PATCH 1/5] enhance(ui): MetricsTable - improve totals header

---
 .../src/components/metrics-table/metrics-table.jsx  | 13 +++++++------
 .../metrics-table/metrics-table.module.css          | 10 +++-------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/components/metrics-table/metrics-table.jsx b/packages/ui/src/components/metrics-table/metrics-table.jsx
index 7226578de3..b98dbdec4c 100644
--- a/packages/ui/src/components/metrics-table/metrics-table.jsx
+++ b/packages/ui/src/components/metrics-table/metrics-table.jsx
@@ -24,8 +24,7 @@ const getHeaderLabelCells = (rows) => (run, runIndex, runs) => {
 
   if (!run) {
     return [
-      { children: '-', className },
-      ...(!isBaseline ? [{ children: ' ', className: styles.delta }] : []),
+      { children: '-', className, colSpan: isBaseline ? 1 : 2 },
     ];
   }
 
@@ -41,11 +40,13 @@ const getHeaderLabelCells = (rows) => (run, runIndex, runs) => {
     </JobName>
   );
 
+  // Value column
   return [
-    // Value column
-    { children: jobName, className },
-    // Delta column
-    ...(!isBaseline ? [{ children: ' ', className: cx(styles.delta) }] : []),
+    {
+      children: jobName,
+      className,
+      colSpan: isBaseline ? 1 : 2,
+    },
   ];
 };
 
diff --git a/packages/ui/src/components/metrics-table/metrics-table.module.css b/packages/ui/src/components/metrics-table/metrics-table.module.css
index b6874c94f1..bfcdd1907b 100644
--- a/packages/ui/src/components/metrics-table/metrics-table.module.css
+++ b/packages/ui/src/components/metrics-table/metrics-table.module.css
@@ -27,7 +27,7 @@
 
 .root .delta {
   padding-left: 0;
-  text-align: left;
+  text-align: right;
   font-size: var(--size-xsmall);
   vertical-align: baseline;
 }
@@ -36,10 +36,6 @@
   line-height: 1.6rem; /* baseline alignment with the value */
 }
 
-.root .value.current {
-  padding-right: var(--space-xxsmall);
-}
-
 .jobName {
   white-space: nowrap;
 }
@@ -52,9 +48,9 @@
 }
 
 .headerRowTotals th {
-  padding-top: 0 !important;
+  padding-top: var(--space-xxxsmall) !important;
   font-weight: normal;
-  font-size: var(--size-xsmall);
+  font-size: var(--size-small);
   vertical-align: middle;
 }
 

From 8931a6af74bfa2890d40c5fb7fe56d83bd339f97 Mon Sep 17 00:00:00 2001
From: Vio <vio@beanon.com>
Date: Tue, 13 Jun 2023 23:26:26 +0200
Subject: [PATCH 2/5] enhance(ui): MetricsTable - show abs delta column

---
 .../metrics-table/metrics-table.jsx           | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/metrics-table/metrics-table.jsx b/packages/ui/src/components/metrics-table/metrics-table.jsx
index b98dbdec4c..29b5b98d61 100644
--- a/packages/ui/src/components/metrics-table/metrics-table.jsx
+++ b/packages/ui/src/components/metrics-table/metrics-table.jsx
@@ -24,7 +24,7 @@ const getHeaderLabelCells = (rows) => (run, runIndex, runs) => {
 
   if (!run) {
     return [
-      { children: '-', className, colSpan: isBaseline ? 1 : 2 },
+      { children: '-', className, colSpan: isBaseline ? 1 : 3 },
     ];
   }
 
@@ -45,7 +45,7 @@ const getHeaderLabelCells = (rows) => (run, runIndex, runs) => {
     {
       children: jobName,
       className,
-      colSpan: isBaseline ? 1 : 2,
+      colSpan: isBaseline ? 1 : 3,
     },
   ];
 };
@@ -71,12 +71,21 @@ const getHeaderTotalCells = (rows) => (run, runIndex, runs) => {
           {
             children: (
               <Delta
-                displayValue={infoTotal.displayDeltaPercentage}
+                displayValue={infoTotal.displayDelta}
                 deltaType={infoTotal.deltaType}
               />
             ),
             className: styles.delta,
           },
+          {
+            children: (
+              <Delta
+                displayValue={infoTotal.displayDeltaPercentage}
+                deltaType={infoTotal.deltaType}
+              />
+            ),
+            className: cx(styles.delta, styles.deltaPercentage),
+          },
         ]
       : []),
   ];
@@ -121,11 +130,12 @@ 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 (
         <>
@@ -133,9 +143,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>
+            </>
           )}
         </>
       );

From 1851befd44854198fd41efa75065ea69b5fad8ab Mon Sep 17 00:00:00 2001
From: Vio <vio@beanon.com>
Date: Mon, 10 Jul 2023 22:59:53 +0200
Subject: [PATCH 3/5] refactor(ui): MetricsTable - inline headers

---
 .../metrics-table/metrics-table.jsx           | 172 +++++++-----------
 .../metrics-table/metrics-table.module.css    |  16 +-
 .../metrics-table/metrics-table.stories.jsx   |   4 +
 3 files changed, 74 insertions(+), 118 deletions(-)

diff --git a/packages/ui/src/components/metrics-table/metrics-table.jsx b/packages/ui/src/components/metrics-table/metrics-table.jsx
index 29b5b98d61..bf332786b7 100644
--- a/packages/ui/src/components/metrics-table/metrics-table.jsx
+++ b/packages/ui/src/components/metrics-table/metrics-table.jsx
@@ -15,108 +15,68 @@ 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 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, colSpan: isBaseline ? 1 : 3 },
-    ];
+    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>
   );
-
-  // Value column
-  return [
-    {
-      children: jobName,
-      className,
-      colSpan: isBaseline ? 1 : 3,
-    },
-  ];
 };
 
-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 }) => {
   const currentRunTotal = getRowsRunTotal(rows, runIndex);
   const baselineRunTotal = !isBaseline && getRowsRunTotal(rows, runIndex + 1);
   const infoTotal = getMetricRunInfo(METRIC_TYPE_DATA, currentRunTotal, baselineRunTotal);
 
-  return [
-    // Value column
-    {
-      children: <Metric className={styles.tableHeaderRunMetric} value={infoTotal.displayValue} />,
-      className,
-    },
-
-    // Delta column
-    ...(!isBaseline
-      ? [
-          {
-            children: (
-              <Delta
-                displayValue={infoTotal.displayDelta}
-                deltaType={infoTotal.deltaType}
-              />
-            ),
-            className: styles.delta,
-          },
-          {
-            children: (
-              <Delta
-                displayValue={infoTotal.displayDeltaPercentage}
-                deltaType={infoTotal.deltaType}
-              />
-            ),
-            className: cx(styles.delta, styles.deltaPercentage),
-          },
-        ]
-      : []),
-  ];
+  return (
+    <>
+      <Table.Th className={cx(styles.value, styles.sum)}>
+        <Metric className={styles.tableHeaderRunMetric} value={infoTotal.displayValue} />
+      </Table.Th>
+      {!isBaseline && (
+        <>
+          <Table.Th className={cx(styles.delta, styles.sum)}>
+            <Delta
+              displayValue={infoTotal.displayDelta}
+              deltaType={infoTotal.deltaType}
+            />
+          </Table.Th>
+          <Table.Th className={cx(styles.delta, styles.sum)}>
+            <Delta
+              displayValue={infoTotal.displayDeltaPercentage}
+              deltaType={infoTotal.deltaType}
+            />
+          </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>
 
@@ -158,7 +118,7 @@ const MetricsTableRow = ({ item, renderRowHeader }) => (
   </Table.Tr>
 );
 
-MetricsTableRow.propTypes = {
+Row.propTypes = {
   item: PropTypes.shape({
     changed: PropTypes.bool,
     runs: PropTypes.arrayOf(
@@ -181,21 +141,13 @@ export const MetricsTable = ({
   items,
   emptyMessage,
   showHeaderSum,
-  headerRows,
+  headerRows: parentHeaderRows,
   title,
   showAllItems,
   setShowAllItems,
   ...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,
@@ -212,24 +164,22 @@ 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} />)}
+          </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" />
@@ -243,12 +193,12 @@ 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)}
diff --git a/packages/ui/src/components/metrics-table/metrics-table.module.css b/packages/ui/src/components/metrics-table/metrics-table.module.css
index bfcdd1907b..2781b0202c 100644
--- a/packages/ui/src/components/metrics-table/metrics-table.module.css
+++ b/packages/ui/src/components/metrics-table/metrics-table.module.css
@@ -19,6 +19,10 @@
   text-transform: none;
 }
 
+.root .job {
+  text-align: right;
+}
+
 .root .value {
   padding-left: var(--space-large);
   text-align: right;
@@ -33,7 +37,7 @@
 }
 
 .root tbody .delta {
-  line-height: 1.6rem; /* baseline alignment with the value */
+  line-height: 1.6rem; /* baseline alignment with the column value */
 }
 
 .jobName {
@@ -41,16 +45,14 @@
 }
 
 /* columns overrides for showHeaderSum */
-.showHeaderSum .headerRowColumns .value,
-.showHeaderSum .headerRowColumns .delta {
+.showHeaderSum .headerRow .job {
   border-bottom: 0;
   padding-bottom: 0;
 }
 
-.headerRowTotals th {
-  padding-top: var(--space-xxxsmall) !important;
-  font-weight: normal;
-  font-size: var(--size-small);
+.showHeaderSum .headerRow .sum {
+  padding-top: var(--space-xxxsmall);
+  font-size: var(--size-xsmall);
   vertical-align: middle;
 }
 
diff --git a/packages/ui/src/components/metrics-table/metrics-table.stories.jsx b/packages/ui/src/components/metrics-table/metrics-table.stories.jsx
index 70ac670232..b5cdcaa9a4 100644
--- a/packages/ui/src/components/metrics-table/metrics-table.stories.jsx
+++ b/packages/ui/src/components/metrics-table/metrics-table.stories.jsx
@@ -217,6 +217,10 @@ export const MultipleRuns = () => (
   <MetricsTable runs={RUNS} items={ITEMS_MULTIPLE_RUNS} />
 );
 
+export const WithHeaderSum = () => (
+  <MetricsTable runs={RUNS} items={[ITEMS_MULTIPLE_RUNS[0], ITEMS_MULTIPLE_RUNS[4]]} showHeaderSum />
+);
+
 export const WithHeaderRows = () => (
   <MetricsTable
     runs={RUNS}

From 97cd5c4bf1d64757b48f90194bf5d124b1e1c5c8 Mon Sep 17 00:00:00 2001
From: Vio <vio@beanon.com>
Date: Tue, 11 Jul 2023 19:13:52 +0200
Subject: [PATCH 4/5] fix(ui): MetricsTable - remove obsolete custom header
 props

---
 .../metrics-table/metrics-table.jsx           | 14 +-------------
 .../metrics-table/metrics-table.stories.jsx   | 19 -------------------
 2 files changed, 1 insertion(+), 32 deletions(-)

diff --git a/packages/ui/src/components/metrics-table/metrics-table.jsx b/packages/ui/src/components/metrics-table/metrics-table.jsx
index bf332786b7..f65f9755cc 100644
--- a/packages/ui/src/components/metrics-table/metrics-table.jsx
+++ b/packages/ui/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';
@@ -141,7 +141,6 @@ export const MetricsTable = ({
   items,
   emptyMessage,
   showHeaderSum,
-  headerRows: parentHeaderRows,
   title,
   showAllItems,
   setShowAllItems,
@@ -232,7 +231,6 @@ MetricsTable.defaultProps = {
   renderRowHeader: (item) => item.label,
   emptyMessage: 'No entries found.',
   showHeaderSum: false,
-  headerRows: [],
   title: '',
 };
 
@@ -258,15 +256,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,
 };
diff --git a/packages/ui/src/components/metrics-table/metrics-table.stories.jsx b/packages/ui/src/components/metrics-table/metrics-table.stories.jsx
index b5cdcaa9a4..433bad133f 100644
--- a/packages/ui/src/components/metrics-table/metrics-table.stories.jsx
+++ b/packages/ui/src/components/metrics-table/metrics-table.stories.jsx
@@ -221,23 +221,4 @@ export const WithHeaderSum = () => (
   <MetricsTable runs={RUNS} items={[ITEMS_MULTIPLE_RUNS[0], ITEMS_MULTIPLE_RUNS[4]]} showHeaderSum />
 );
 
-export const WithHeaderRows = () => (
-  <MetricsTable
-    runs={RUNS}
-    items={ITEMS_MULTIPLE_RUNS}
-    headerRows={[
-      [
-        'Metric',
-        {
-          children: 'Colspan',
-          colSpan: 1 + (RUNS.length - 1) * 2 + 1,
-          style: {
-            textAlign: 'center'
-          }
-        }
-      ]
-    ]}
-  />
-);
-
 export const Empty = () =><MetricsTable runs={RUNS} items={[]} />;

From 210ecec96248ae6c54b4e98747ab666a4f64ccdd Mon Sep 17 00:00:00 2001
From: Vio <vio@beanon.com>
Date: Tue, 11 Jul 2023 19:25:15 +0200
Subject: [PATCH 5/5] fix(ui): MetricTableTitle - consistent info styling &
 spacing

---
 .../components/metrics-table-title/metrics-table-title.jsx    | 2 +-
 .../metrics-table-title/metrics-table-title.module.css        | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/metrics-table-title/metrics-table-title.jsx b/packages/ui/src/components/metrics-table-title/metrics-table-title.jsx
index ac389fbab7..8e27622996 100644
--- a/packages/ui/src/components/metrics-table-title/metrics-table-title.jsx
+++ b/packages/ui/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>
 
diff --git a/packages/ui/src/components/metrics-table-title/metrics-table-title.module.css b/packages/ui/src/components/metrics-table-title/metrics-table-title.module.css
index 268a0507d1..ce9e01afc6 100644
--- a/packages/ui/src/components/metrics-table-title/metrics-table-title.module.css
+++ b/packages/ui/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 {