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

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'],
+    },
+  },
+};

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

@@ -4,44 +4,102 @@ import cx from 'classnames';
 import { MetricsDisplayType } from '../../constants';
 import { Button } from '../../ui/button';
 import { ControlGroup } from '../../ui/control-group';
+import { Dropdown, DropdownItem } from '../../ui/dropdown';
 import { Icon } from '../../ui/icon';
 import css from './metrics-display-selector.module.css';
+import { FlexStack } from '../../layout';
+
+const DEFAULT_GROUP_BY = '';
+
+const METRICS_DISPLAY_MAP = {
+  [MetricsDisplayType.TABLE]: {
+    glyph: Icon.ICONS.TABLE,
+    label: 'Table',
+  },
+  [MetricsDisplayType.TREEMAP]: {
+    glyph: Icon.ICONS.TREEMAP,
+    label: 'Treemap',
+  },
+};
+
+const displayTypes = Object.values(MetricsDisplayType);
 
 interface MetricsDisplaySelectorProps {
   value: MetricsDisplayType;
-  onSelect: (newValue: MetricsDisplayType) => void;
+  groupBy?: string;
+  groups?: Partial<Record<MetricsDisplayType, Array<string>>>;
+  onSelect: (newValue: MetricsDisplayType, groupBy?: string) => void;
 }
 
 export const MetricsDisplaySelector = (
   props: MetricsDisplaySelectorProps &
     Omit<React.ComponentProps<typeof ControlGroup>, 'onSelect' | 'value'>,
 ) => {
-  const { className = '', value, onSelect, ...restProps } = props;
+  const { value, groupBy = DEFAULT_GROUP_BY, groups = {}, onSelect, ...restProps } = props;
 
   return (
-    <ControlGroup className={cx(css.root, className)} {...restProps}>
-      <Button
-        outline
-        active={value === MetricsDisplayType.TABLE}
-        size="small"
-        type="button"
-        glyph={Icon.ICONS.TABLE}
-        onClick={() => onSelect(MetricsDisplayType.TABLE)}
-        className={css.button}
-      >
-        Table
-      </Button>
-      <Button
-        outline
-        active={value === MetricsDisplayType.TREEMAP}
-        size="small"
-        type="button"
-        glyph={Icon.ICONS.TREEMAP}
-        onClick={() => onSelect(MetricsDisplayType.TREEMAP)}
-        className={cx(css.button)}
-      >
-        Treemap
-      </Button>
+    <ControlGroup {...restProps}>
+      {displayTypes.map((displayType, index) => {
+        const displayGroups = groups?.[displayType];
+        const displayProps = METRICS_DISPLAY_MAP[displayType];
+        const isLast = displayTypes.length - 1 === index;
+        const isActive = displayType === value;
+
+        if (!displayGroups || displayGroups.length === 0) {
+          return (
+            <Button
+              outline
+              active={isActive}
+              size="small"
+              type="button"
+              glyph={displayProps.glyph}
+              onClick={() => onSelect(displayType)}
+              className={isLast && css.itemLast}
+              key={displayType}
+            >
+              {displayProps.label}
+            </Button>
+          );
+        }
+
+        const displayGroupsData = [
+          {
+            value: DEFAULT_GROUP_BY,
+            label: 'No groups',
+          },
+          ...displayGroups.map((displayGroup) => ({
+            value: displayGroup,
+            label: `Group by ${displayGroup}`,
+          })),
+        ];
+
+        return (
+          <Dropdown
+            glyph={displayProps.glyph}
+            label={displayProps.label}
+            className={cx(isLast && css.itemLast, isActive && css.buttonActive)}
+            key={displayType}
+          >
+            {displayGroupsData.map((displayGroupData) => {
+              const isGroupActive = isActive && displayGroupData.value === groupBy;
+
+              return (
+                <DropdownItem
+                  onClick={() => onSelect(displayType, displayGroupData.value)}
+                  isActive={isGroupActive}
+                  className={cx(css.dropdownItem, isGroupActive && css.dropdownItemActive)}
+                  key={displayGroupData.value}
+                >
+                  <FlexStack space="xxxsmall" alignItems="center">
+                    <Icon glyph={Icon.ICONS.CHECK} size="small" className={css.dropdownItemIcon} />
+                    <span>{displayGroupData.label}</span>
+                  </FlexStack>
+                </DropdownItem>
+              );
+            })}
+          </Dropdown>
+        );
+      })}
     </ControlGroup>
   );
 };

package/src/components/metrics-treemap/__tests__/metrics-treemap.utils.ts

@@ -0,0 +1,143 @@
+import { getTreemapNodesGroupedByPath } from '../metrics-treemap.utils';
+
+describe('MetricsTreemap / getTreeNodesGroupedByPath', () => {
+  test('should group tree ndoes by path', () => {
+    const actual = getTreemapNodesGroupedByPath([
+      {
+        key: './src/app.jsx',
+        runs: [{ value: 100 }],
+      },
+      {
+        key: './src/components/header.jsx',
+        runs: [{ value: 100 }],
+      },
+      {
+        key: './src/components/footer.jsx',
+        runs: [{ value: 100 }],
+      },
+      {
+        key: './src/ui/button.jsx',
+        runs: [{ value: 100 }],
+      },
+      {
+        key: './node_modules/react/dist/react.production.js',
+        runs: [{ value: 100 }],
+      },
+      {
+        key: 'favicon.ico',
+        runs: [{ value: 10 }],
+      },
+    ] as any);
+
+    expect(actual).toStrictEqual({
+      id: '',
+      label: '(root)',
+      value: 0,
+      children: [
+        {
+          id: '.',
+          label: '.',
+          value: 0,
+          children: [
+            {
+              id: './src',
+              label: 'src',
+              value: 0,
+              children: [
+                {
+                  id: './src/app.jsx',
+                  label: 'app.jsx',
+                  value: 100,
+                  item: {
+                    key: './src/app.jsx',
+                    runs: [{ value: 100 }],
+                  },
+                },
+                {
+                  id: './src/components',
+                  label: 'components',
+                  value: 0,
+                  children: [
+                    {
+                      id: './src/components/header.jsx',
+                      label: 'header.jsx',
+                      value: 100,
+                      item: {
+                        key: './src/components/header.jsx',
+                        runs: [{ value: 100 }],
+                      },
+                    },
+                    {
+                      id: './src/components/footer.jsx',
+                      label: 'footer.jsx',
+                      value: 100,
+                      item: {
+                        key: './src/components/footer.jsx',
+                        runs: [{ value: 100 }],
+                      },
+                    },
+                  ],
+                },
+                {
+                  id: './src/ui',
+                  label: 'ui',
+                  value: 0,
+                  children: [
+                    {
+                      id: './src/ui/button.jsx',
+                      label: 'button.jsx',
+                      value: 100,
+                      item: {
+                        key: './src/ui/button.jsx',
+                        runs: [{ value: 100 }],
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              id: './node_modules',
+              label: 'node_modules',
+              value: 0,
+              children: [
+                {
+                  id: './node_modules/react',
+                  label: 'react',
+                  value: 0,
+                  children: [
+                    {
+                      id: './node_modules/react/dist',
+                      label: 'dist',
+                      value: 0,
+                      children: [
+                        {
+                          id: './node_modules/react/dist/react.production.js',
+                          label: 'react.production.js',
+                          value: 100,
+                          item: {
+                            key: './node_modules/react/dist/react.production.js',
+                            runs: [{ value: 100 }],
+                          },
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: 'favicon.ico',
+          label: 'favicon.ico',
+          value: 10,
+          item: {
+            key: 'favicon.ico',
+            runs: [{ value: 10 }],
+          },
+        },
+      ],
+    });
+  });
+});

package/src/components/metrics-treemap/index.ts

@@ -1 +1,2 @@
 export * from './metrics-treemap';
+export { getTreemapNodes, getTreemapNodesGroupedByPath } from './metrics-treemap.utils';

package/src/components/metrics-treemap/metrics-treemap.constants.ts

@@ -0,0 +1,43 @@
+import type { ReportMetricRow } from '@bundle-stats/utils';
+
+export interface TreeLeaf {
+  /**
+   * Node id - file/directory path
+   */
+  id: string;
+  /**
+   * Node label - file/directory baseline
+   */
+  label: string;
+  /**
+   * Node value - the max amount between item run values
+   */
+  value: number;
+  /**
+   * Corresponding report metric item
+   */
+  item: ReportMetricRow;
+}
+
+export interface Tree {
+  /**
+   * Node id - file/directory path
+   */
+  id: string;
+  /**
+   * Node label - file/directory baseline
+   */
+  label: string;
+  /**
+   * Node value - 0 for groups
+   */
+  value: number;
+  /**
+   * List of children nodes
+   */
+  children: TreeNodeChildren;
+}
+
+export type TreeNode = Tree | TreeLeaf;
+
+export type TreeNodeChildren = Array<TreeNode>;