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

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>;

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

@@ -13,15 +13,44 @@
   top: 0;
   width: 100%;
   height: 100%;
-  fill: var(--color-text);
-  font-family: var(--font-family);
   background: var(--color-background);
 }
 
-/** Tile overlay fill background transition */
-.root {
-  transition: var(--ui-transition-out);
-  transition-property: opacity;
+/**
+ * Tile group
+ */
+.tileGroup {
+  position: absolute;
+}
+
+.tileGroupTitle {
+  width: 100%;
+  padding: 2px var(--space-xxxsmall);
+  color: var(--color-text);
+  font-size: 10px;
+  line-height: 1em;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/** Tile group size variation */
+.tileGroupSizeDefault {
+  transition: var(--ui-transition-in);
+  transition-property: left top width height;
+}
+
+/** Tile group nested variation */
+.nested .tileGroup {
+  background: rgba(128, 128, 128, 0.05);
+}
+
+.nested .tileGroup:hover {
+  background: rgba(128, 128, 128, 0.08);
+}
+
+.nested .tileGroup:hover .tileGroupTitle {
+  color: var(--color-text-dark);
 }
 
 /** Leaf wrapper button */
@@ -31,7 +60,7 @@
   border: 0;
   border-radius: 0;
   padding: 0;
-  background: none;
+  background: var(--color-background);
   display: flex;
   align-items: center;
   font-family: var(--font-family-fixed);
@@ -57,12 +86,9 @@
   opacity: 0.75;
 }
 
-.tile:hover {
-  transition: var(--ui-transition-in);
-}
-
 .tile:hover::before {
   transition: var(--ui-transition-in);
+  transition-property: opacity;
   opacity: 0.5;
 }
 
@@ -84,7 +110,7 @@
   padding-left: var(--space-small);
 }
 
-.leadContentLabel {
+.tileContentLabel {
   flex: 0 1 auto;
   width: 100%;
   min-width: 0;
@@ -92,32 +118,37 @@
   overflow: hidden;
 }
 
-.leadContentValue {
+.tileContentValue {
   flex: 0 0 auto;
   max-width: calc(100% + var(--space-xxsmall));
   white-space: nowrap;
   overflow: hidden;
 }
 
-.leadContentMetric {
+.tileContentMetric {
   font-weight: bold;
 }
 
-.leadContentDelta {
+.tileContentDelta {
   margin-left: var(--space-xxxsmall);
 }
 
 /** Tile size variation */
-.tileSmall .tileContent {
+.tileSizeSmall .tileContent {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   gap: 0;
   font-size: var(--size-xsmall);
 }
 
-.tileSmall .leadContentLabel {
+.tileSizeSmall .tileContentLabel {
   margin-top: 0;
 }
 
+.tileSizeDefault {
+  transition: var(--ui-transition-in);
+  transition-property: left top width height;
+}
+
 /** Tile diff variation */
 .tile-NO_CHANGE {
   color: var(--color-text-light);
@@ -125,7 +156,7 @@
 
 .tile-NO_CHANGE::before {
   color: var(--color-gray-50);
-  opacity: 0.4;
+  opacity: 0.3;
 }
 
 .tile-NO_CHANGE:hover::before {
@@ -193,17 +224,16 @@
   pointer-events: none;
 }
 
-/* prevent tooltip portal wrapper from capturing events */
-div[role="presentation"]:has(.tooltip) {
-  pointer-events: none;
-}
-
-
 .tileTooltipArrow svg {
   display: block;
   fill: var(--color-background) !important;
 }
 
 .tileTooltipContentTitle {
-  font-size: var(--size-medium);
+  font-size: var(--size-small);
+}
+
+/* prevent tooltip portal wrapper from capturing events */
+div[role="presentation"]:has(.tooltip) {
+  pointer-events: none;
 }

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

@@ -2,22 +2,56 @@ import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { action } from '@storybook/addon-actions';
+import { createJobs } from '@bundle-stats/utils';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
-// eslint-disable-next-line import/no-relative-packages
+/* eslint-disable import/no-relative-packages */
+import baselineData from '../../../../../fixtures/webpack-stats.baseline.json';
+import currentData from '../../../../../fixtures/webpack-stats.current.json';
 import moduleItemsFixture from '../../../../../fixtures/module-items.json';
-import { MetricsTreemap } from '.';
+/* eslint-enable import/no-relative-packages */
+import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '.';
 
-export default {
+const meta: Meta<typeof MetricsTreemap> = {
   title: 'Components/MetricsTreemap',
   component: MetricsTreemap,
-} as Meta;
-
-export const Default: StoryObj = {
-  render: (props: React.ComponentProps<typeof MetricsTreemap>) => (
-    <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />
-  ),
   args: {
-    items: moduleItemsFixture,
     onItemClick: action('CLICK'),
   },
 };
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+const MULTIPLE_JOBS = createJobs([{ webpack: currentData }, { webpack: baselineData }]);
+
+export const Assets: Story = {
+  render: (props) => <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />,
+  args: {
+    treeNodes: getTreemapNodes(webpack.compareBySection.assets(MULTIPLE_JOBS)),
+  },
+};
+
+export const AssetsNested: Story = {
+  render: (props) => <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />,
+  args: {
+    treeNodes: getTreemapNodesGroupedByPath(webpack.compareBySection.assets(MULTIPLE_JOBS)),
+    nested: true,
+  },
+};
+
+export const Modules: Story = {
+  render: (props) => <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />,
+  args: {
+    treeNodes: getTreemapNodes(moduleItemsFixture),
+  },
+};
+
+export const ModulesNested: Story = {
+  render: (props) => <MetricsTreemap style={{ maxWidth: 'var(--max-width)' }} {...props} />,
+  args: {
+    treeNodes: getTreemapNodesGroupedByPath(moduleItemsFixture),
+    nested: true,
+  },
+};