@bundle-stats/ui 4.13.0-beta.16 → 4.13.0-beta.17

package/src/assets/icons.svg.jsx

@@ -9,7 +9,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-arrow-down"
       id="arrow"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -21,7 +20,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-arrow-right-circle"
       viewBox="0 0 24 24"
       id="arrow-right-circle"
       xmlns="http://www.w3.org/2000/svg"
@@ -29,13 +27,24 @@ export const SvgIcons = (props) => (
       <circle cx="12" cy="12" r="10" />
       <path d="m12 16 4-4-4-4M8 12h8" />
     </symbol>
+    <symbol
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      id="check"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </symbol>
     <symbol
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="lucide lucide-chevron-down"
       viewBox="0 0 24 24"
       id="chevron-down"
       xmlns="http://www.w3.org/2000/svg"
@@ -48,7 +57,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="lucide lucide-chevron-up"
       viewBox="0 0 24 24"
       id="chevron-up"
       xmlns="http://www.w3.org/2000/svg"
@@ -62,7 +70,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-clock"
       id="clock"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -75,7 +82,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-x-circle"
       viewBox="0 0 24 24"
       id="close"
       xmlns="http://www.w3.org/2000/svg"
@@ -90,7 +96,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-git-commit"
       id="commit"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -116,7 +121,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-external-link"
       viewBox="0 0 24 24"
       id="external-link"
       xmlns="http://www.w3.org/2000/svg"
@@ -130,7 +134,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-bar-chart"
       id="filter"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -151,7 +154,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-help-circle"
       id="help"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -178,7 +180,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-menu"
       id="menu"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -233,7 +234,6 @@ export const SvgIcons = (props) => (
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="feather feather-alert-triangle"
       id="warning"
       xmlns="http://www.w3.org/2000/svg"
     >

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

@@ -35,7 +35,7 @@ import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableHeader } from '../metrics-table-header';
-import { MetricsTreemap } from '../metrics-treemap';
+import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
 import { SEARCH_PLACEHOLDER } from './bundle-assets.i18n';
 import css from './bundle-assets.module.css';
 
@@ -43,6 +43,10 @@ const RUN_TITLE_CURRENT = 'Current';
 const RUN_TITLE_BASELINE = 'Baseline';
 const RUNS_LABELS = [RUN_TITLE_CURRENT, RUN_TITLE_BASELINE];
 
+const DISPLAY_TYPE_GROUPS = {
+  [MetricsDisplayType.TREEMAP]: ['folder'],
+};
+
 const getFileTypeFilters = (filters) =>
   Object.entries(FILE_TYPE_LABELS)
     .map(([key, label]) => ({
@@ -163,6 +167,60 @@ RowHeader.defaultProps = {
   chunks: [],
 };
 
+const ViewMetricsTreemap = (props) => {
+  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch } = props;
+
+  const treeNodes = useMemo(() => {
+    if (displayType.groupBy === 'folder') {
+      return getTreemapNodesGroupedByPath(items);
+    }
+
+    return getTreemapNodes(items);
+  }, [items, displayType.groupBy]);
+
+  const onGroupClick = useCallback(
+    (groupPath) => {
+      // Search by group path
+      // 1. use `^` to match only the string beggining
+      // 2. add `/` suffix to match only exact directories
+      // 3. if the group path is empty(root), clear search
+      if (groupPath) {
+        updateSearch(`^${groupPath}/`);
+      } else {
+        updateSearch('');
+      }
+    },
+    [updateSearch],
+  );
+
+  return (
+    <>
+      <Table compact>
+        <MetricsTableHeader metricTitle={metricsTableTitle} showSum jobs={jobs} rows={items} />
+      </Table>
+      <MetricsTreemap
+        treeNodes={treeNodes}
+        nested={Boolean(displayType.groupBy)}
+        emptyMessage={emptyMessage}
+        onItemClick={showEntryInfo}
+        onGroupClick={onGroupClick}
+      />
+    </>
+  );
+};
+
+ViewMetricsTreemap.propTypes = {
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
+  items: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
+  metricsTableTitle: PropTypes.node.isRequired,
+  displayType: PropTypes.shape({
+    groupBy: PropTypes.string,
+  }).isRequired,
+  emptyMessage: PropTypes.node.isRequired,
+  showEntryInfo: PropTypes.func.isRequired,
+  updateSearch: PropTypes.func.isRequired,
+};
+
 export const BundleAssets = (props) => {
   const {
     className,
@@ -187,7 +245,7 @@ export const BundleAssets = (props) => {
 
   const jobLabels = jobs?.map((job) => job?.label);
 
-  const [displayType, setDisplayType] = useMetricsDisplayType();
+  const [displayType, setDisplayType] = useMetricsDisplayType(DISPLAY_TYPE_GROUPS);
 
   const dropdownFilters = useMemo(
     () => getFilters({ compareMode: jobs?.length > 1, filters }),
@@ -238,7 +296,12 @@ export const BundleAssets = (props) => {
         <Toolbar
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-              <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
+              <MetricsDisplaySelector
+                value={displayType.value}
+                groupBy={displayType.groupBy}
+                groups={DISPLAY_TYPE_GROUPS}
+                onSelect={setDisplayType}
+              />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -262,7 +325,7 @@ export const BundleAssets = (props) => {
           </FlexStack>
         </Toolbar>
         <Box outline as="main">
-          {displayType === MetricsDisplayType.TABLE && (
+          {displayType.value === MetricsDisplayType.TABLE && (
             <MetricsTable
               runs={jobs}
               items={items}
@@ -274,22 +337,15 @@ export const BundleAssets = (props) => {
               updateSort={updateSort}
             />
           )}
-          {displayType === MetricsDisplayType.TREEMAP && (
-            <>
-              <Table compact>
-                <MetricsTableHeader
-                  metricTitle={metricsTableTitle}
-                  showSum
-                  jobs={jobs}
-                  rows={items}
-                />
-              </Table>
-              <MetricsTreemap
-                emptyMessage={emptyMessage}
-                items={items}
-                onItemClick={showEntryInfo}
-              />
-            </>
+          {displayType.value === MetricsDisplayType.TREEMAP && (
+            <ViewMetricsTreemap
+              jobs={jobs}
+              items={items}
+              displayType={displayType}
+              emptyMessage={emptyMessage}
+              showEntryInfo={showEntryInfo}
+              updateSearch={updateSearch}
+            />
           )}
         </Box>
       </Stack>

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

@@ -19,7 +19,7 @@ import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { MetricsTableHeader } from '../metrics-table-header';
-import { MetricsTreemap } from '../metrics-treemap';
+import { MetricsTreemap, getTreemapNodes } from '../metrics-treemap';
 import { ComponentLink } from '../component-link';
 
 const metricsTableTitle = (
@@ -72,11 +72,11 @@ export const BundleAssetsTotals = ({
     <Stack space="xsmall" as="section" className={className}>
       <Toolbar
         renderActions={() => (
-          <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
+          <MetricsDisplaySelector onSelect={setDisplayType} value={displayType.value} />
         )}
       />
       <Box outline as="main">
-        {displayType === MetricsDisplayType.TABLE && (
+        {displayType.value === MetricsDisplayType.TABLE && (
           <MetricsTable
             title={metricsTableTitle}
             runs={jobs}
@@ -86,7 +86,7 @@ export const BundleAssetsTotals = ({
             {...restProps}
           />
         )}
-        {displayType === MetricsDisplayType.TREEMAP && (
+        {displayType.value === MetricsDisplayType.TREEMAP && (
           <>
             <Table compact>
               <MetricsTableHeader
@@ -98,6 +98,7 @@ export const BundleAssetsTotals = ({
             </Table>
             <MetricsTreemap
               items={items}
+              treeNodes={getTreemapNodes(items)}
               onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
             />
           </>

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

@@ -22,7 +22,7 @@ import { Tooltip } from '../../ui/tooltip';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableHeader } from '../metrics-table-header';
-import { MetricsTreemap } from '../metrics-treemap';
+import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableTitle } from '../metrics-table-title';
@@ -34,6 +34,10 @@ import * as I18N_MODULES from './bundle-modules.i18n';
 import css from './bundle-modules.module.css';
 import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
 
+const DISPLAY_TYPE_GROUPS = {
+  [MetricsDisplayType.TREEMAP]: ['folder'],
+};
+
 interface RowHeaderProps {
   row: ReportMetricModuleRow;
   filters?: any;
@@ -61,6 +65,59 @@ const RowHeader = (props: RowHeaderProps) => {
   );
 };
 
+interface ViewMetricsTreemapProps {
+  metricsTableTitle: React.ReactNode;
+  jobs: Array<any>;
+  items: Array<any>;
+  displayType: { value: MetricsDisplayType; groupBy?: string };
+  emptyMessage: React.ReactNode;
+  showEntryInfo: React.ComponentProps<typeof MetricsTreemap>['onItemClick'];
+  updateSearch: (newSerarch: string) => void;
+}
+
+const ViewMetricsTreemap = (props: ViewMetricsTreemapProps) => {
+  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch } =
+    props;
+
+  const treeNodes = useMemo(() => {
+    if (displayType.groupBy === 'folder') {
+      return getTreemapNodesGroupedByPath(items);
+    }
+
+    return getTreemapNodes(items);
+  }, [items, displayType]);
+
+  const onGroupClick = useCallback(
+    (groupPath: string) => {
+      // Search by group path
+      // 1. use `^` to match only the string beggining
+      // 2. add `/` suffix to match only exact directories
+      // 3. if the group path is empty(root), clear search
+      if (groupPath) {
+        updateSearch(`^${groupPath}/`);
+      } else {
+        updateSearch('');
+      }
+    },
+    [updateSearch],
+  );
+
+  return (
+    <>
+      <Table compact>
+        <MetricsTableHeader metricTitle={metricsTableTitle} showSum jobs={jobs} rows={items} />
+      </Table>
+      <MetricsTreemap
+        treeNodes={treeNodes}
+        nested={Boolean(displayType.groupBy)}
+        emptyMessage={emptyMessage}
+        onItemClick={showEntryInfo}
+        onGroupClick={onGroupClick}
+      />
+    </>
+  );
+};
+
 interface BundleModulesProps extends React.ComponentProps<'div'> {
   jobs?: Array<Job>;
   items?: Array<ReportMetricModuleRow>;
@@ -117,7 +174,7 @@ export const BundleModules = (props: BundleModulesProps) => {
   const rootClassName = cx(css.root, className);
   const jobLabels = jobs?.map((job) => job?.label);
 
-  const [displayType, setDisplayType] = useMetricsDisplayType();
+  const [displayType, setDisplayType] = useMetricsDisplayType(DISPLAY_TYPE_GROUPS);
 
   const filterFieldsData = useMemo(
     () => generateFilterFieldsData({ filters, chunks, compareMode: jobs.length > 1 }),
@@ -176,7 +233,12 @@ export const BundleModules = (props: BundleModulesProps) => {
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-              <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
+              <MetricsDisplaySelector
+                onSelect={setDisplayType}
+                value={displayType.value}
+                groupBy={displayType.groupBy}
+                groups={DISPLAY_TYPE_GROUPS}
+              />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -221,7 +283,7 @@ export const BundleModules = (props: BundleModulesProps) => {
               </Button>
             </ControlGroup>
           </Box>
-          {displayType === MetricsDisplayType.TABLE && (
+          {displayType.value === MetricsDisplayType.TABLE && (
             <MetricsTable
               className={css.table}
               items={items}
@@ -234,18 +296,16 @@ export const BundleModules = (props: BundleModulesProps) => {
               updateSort={updateSort}
             />
           )}
-          {displayType === MetricsDisplayType.TREEMAP && (
-            <>
-              <Table compact>
-                <MetricsTableHeader
-                  metricTitle={metricsTableTitle}
-                  showSum
-                  jobs={jobs}
-                  rows={items}
-                />
-              </Table>
-              <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
-            </>
+          {displayType.value === MetricsDisplayType.TREEMAP && (
+            <ViewMetricsTreemap
+              metricsTableTitle={metricsTableTitle}
+              jobs={jobs}
+              items={items}
+              displayType={displayType}
+              emptyMessage={emptyMessage}
+              showEntryInfo={showEntryInfo}
+              updateSearch={updateSearch}
+            />
           )}
         </Box>
       </Stack>

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

@@ -24,9 +24,13 @@ import { SEARCH_PLACEHOLDER } from './bundle-packages.i18n';
 import css from './bundle-packages.module.css';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsDisplayType } from '../../constants';
-import { MetricsTreemap } from '../metrics-treemap';
+import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
 import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
 
+const DISPLAY_TYPE_GROUPS = {
+  [MetricsDisplayType.TREEMAP]: ['folder'],
+};
+
 const getDropdownFilters = ({ compareMode, filters }) => ({
   [PACKAGE_FILTERS.CHANGED]: {
     label: 'Changed',
@@ -115,6 +119,60 @@ RowHeader.propTypes = {
   search: PropTypes.string,
 };
 
+const ViewMetricsTreemap = (props) => {
+  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch } = props;
+
+  const treeNodes = useMemo(() => {
+    if (displayType.groupBy === 'folder') {
+      return getTreemapNodesGroupedByPath(items);
+    }
+
+    return getTreemapNodes(items);
+  }, [items, displayType.groupBy]);
+
+  const onGroupClick = useCallback(
+    (groupPath) => {
+      // Search by group path
+      // 1. use `^` to match only the string beggining
+      // 2. add `/` suffix to match only exact directories
+      // 3. if the group path is empty(root), clear search
+      if (groupPath) {
+        updateSearch(`^${groupPath}/`);
+      } else {
+        updateSearch('');
+      }
+    },
+    [updateSearch],
+  );
+
+  return (
+    <>
+      <Table compact>
+        <MetricsTableHeader metricTitle={metricsTableTitle} showSum jobs={jobs} rows={items} />
+      </Table>
+      <MetricsTreemap
+        treeNodes={treeNodes}
+        nested={Boolean(displayType.groupBy)}
+        emptyMessage={emptyMessage}
+        onItemClick={showEntryInfo}
+        onGroupClick={onGroupClick}
+      />
+    </>
+  );
+};
+
+ViewMetricsTreemap.propTypes = {
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
+  items: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
+  metricsTableTitle: PropTypes.node.isRequired,
+  displayType: PropTypes.shape({
+    groupBy: PropTypes.string,
+  }).isRequired,
+  emptyMessage: PropTypes.node.isRequired,
+  showEntryInfo: PropTypes.func.isRequired,
+  updateSearch: PropTypes.func.isRequired,
+};
+
 export const BundlePackages = (props) => {
   const {
     className,
@@ -139,7 +197,7 @@ export const BundlePackages = (props) => {
 
   const jobLabels = jobs?.map((job) => job?.label);
 
-  const [displayType, setDisplayType] = useMetricsDisplayType();
+  const [displayType, setDisplayType] = useMetricsDisplayType(DISPLAY_TYPE_GROUPS);
 
   const dropdownFilters = useMemo(
     () => getDropdownFilters({ compareMode: jobs?.length > 1, filters }),
@@ -198,7 +256,7 @@ export const BundlePackages = (props) => {
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-              <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
+              <MetricsDisplaySelector onSelect={setDisplayType} value={displayType.value} groupBy={displayType.groupBy} groups={DISPLAY_TYPE_GROUPS} />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -222,7 +280,7 @@ export const BundlePackages = (props) => {
           </FlexStack>
         </Toolbar>
         <Box outline as="main">
-          {displayType === MetricsDisplayType.TABLE && (
+          {displayType.value === MetricsDisplayType.TABLE && (
             <MetricsTable
               runs={jobs}
               items={items}
@@ -234,18 +292,15 @@ export const BundlePackages = (props) => {
               updateSort={updateSort}
             />
           )}
-          {displayType === MetricsDisplayType.TREEMAP && (
-            <>
-              <Table compact>
-                <MetricsTableHeader
-                  metricTitle={metricsTableTitle}
-                  showSum
-                  jobs={jobs}
-                  rows={items}
-                />
-              </Table>
-              <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
-            </>
+          {displayType.value === MetricsDisplayType.TREEMAP && (
+            <ViewMetricsTreemap
+              jobs={jobs}
+              items={items}
+              displayType={displayType}
+              emptyMessage={emptyMessage}
+              showEntryInfo={showEntryInfo}
+              updateSearch={updateSearch}
+            />
           )}
         </Box>
       </Stack>

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

@@ -1,10 +1,18 @@
-.button {
-  text-decoration: none;
+.buttonActive {
+  background: var(--color-highlight);
 }
 
-.buttonActive,
-.buttonActive:active,
-.buttonActive:focus {
-  color: var(--color-primary);
-  border-color: var(--color-primary);
+/* explicit ControlGroup last item styles to override ariakit injected sibling nodes */
+.itemLast {
+  border-top-right-radius: var(--radius-small) !important;
+  border-bottom-right-radius: var(--radius-small) !important;
+}
+
+.dropdownItemIcon {
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.dropdownItemActive .dropdownItemIcon {
+  opacity: 1;
 }

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

@@ -0,0 +1,33 @@
+import { action } from '@storybook/addon-actions'; // eslint-disable-line
+import { Meta, StoryObj } from '@storybook/react';
+
+import { MetricsDisplayType } from '../../constants';
+import { MetricsDisplaySelector } from '.';
+
+const meta: Meta<typeof MetricsDisplaySelector> = {
+  title: 'Components/MetricsDisplaySelector',
+  component: MetricsDisplaySelector,
+  args: {
+    onSelect: action('SELECT'),
+  },
+} as Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: MetricsDisplayType.TABLE,
+  },
+};
+
+export const TreemapGroups: Story = {
+  args: {
+    value: MetricsDisplayType.TREEMAP,
+    groupBy: '',
+    groups: {
+      [MetricsDisplayType.TREEMAP]: ['folder'],
+    },
+  },
+};