@bundle-stats/ui 4.12.1 → 4.13.0-beta.2

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

@@ -2,10 +2,11 @@ import React, { useCallback, useMemo } from 'react';
 import cx from 'classnames';
 import { SECTIONS, COMPONENT } from '@bundle-stats/utils';
 
-import type { SortAction } from '../../types';
+import { SortAction } from '../../types';
 import config from '../../config.json';
 import I18N from '../../i18n';
 import { Box } from '../../layout/box';
+import { MetricsDisplayType } from '../../constants';
 import { FlexStack } from '../../layout/flex-stack';
 import { Button } from '../../ui/button';
 import { EmptySet } from '../../ui/empty-set';
@@ -17,7 +18,9 @@ import { Toolbar } from '../../ui/toolbar';
 import { Tooltip } from '../../ui/tooltip';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
+import { MetricsTreemap } from '../metrics-treemap';
 import { MetricsTableOptions } from '../metrics-table-options';
+import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { ModuleInfo } from '../module-info';
 import { generateFilterFieldsData } from './bundle-modules.utils';
@@ -25,6 +28,7 @@ import { ModuleMetric } from './bundle-modules.constants';
 import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
 import * as I18N_MODULES from './bundle-modules.i18n';
 import css from './bundle-modules.module.css';
+import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
 
 interface RowHeaderProps {
   row: ReportMetricModuleRow;
@@ -72,6 +76,7 @@ interface BundleModulesProps extends React.ComponentProps<'div'> {
 
   entryId?: string;
   hideEntryInfo: () => void;
+  showEntryInfo: (entryId: string) => void;
 
   moduleMetric: ModuleMetric;
   setModuleMetric: (newValue: ModuleMetric) => void;
@@ -99,12 +104,15 @@ export const BundleModules = (props: BundleModulesProps) => {
     hideEntryInfo,
     moduleMetric,
     setModuleMetric,
+    showEntryInfo,
     customComponentLink: CustomComponentLink = ComponentLink,
   } = props;
 
   const rootClassName = cx(css.root, className);
   const jobLabels = jobs?.map((job) => job?.label);
 
+  const [displayType, setDisplayType] = useMetricsDisplayType();
+
   const filterFieldsData = useMemo(
     () => generateFilterFieldsData({ filters, chunks, compareMode: jobs.length > 1 }),
     [jobs, filters, chunks],
@@ -162,6 +170,7 @@ export const BundleModules = (props: BundleModulesProps) => {
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
+              <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -205,17 +214,22 @@ export const BundleModules = (props: BundleModulesProps) => {
             </Button>
           </FlexStack>
         </Box>
-        <MetricsTable
-          className={css.table}
-          items={items}
-          runs={jobs}
-          renderRowHeader={renderRowHeader}
-          emptyMessage={emptyMessage}
-          showHeaderSum
-          title={metricsTableTitle}
-          sort={sort}
-          updateSort={updateSort}
-        />
+        {displayType === MetricsDisplayType.TABLE && (
+          <MetricsTable
+            className={css.table}
+            items={items}
+            runs={jobs}
+            renderRowHeader={renderRowHeader}
+            emptyMessage={emptyMessage}
+            showHeaderSum
+            title={metricsTableTitle}
+            sort={sort}
+            updateSort={updateSort}
+          />
+        )}
+        {displayType === MetricsDisplayType.TREEMAP && (
+          <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
+        )}
       </div>
       {entryItem && (
         <ModuleInfo

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

@@ -6,6 +6,7 @@ import type { SortAction } from '../../types';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
+import { useEntryInfo } from '../../hooks/entry-info';
 import { BundleModules as BaseComponent } from './bundle-modules';
 import {
   addRowFlags,
@@ -61,6 +62,7 @@ interface BundleModulesProps
     | 'allItems'
     | 'totalRowCount'
     | 'hideEntryInfo'
+    | 'showEntryInfo'
   > {
   jobs: Array<types.Job>;
   filters: Record<string, boolean>;
@@ -118,9 +120,7 @@ export const BundleModules = (props: BundleModulesProps) => {
     getCustomSort,
   });
 
-  const hideEntryInfo = useCallback(() => {
-    setState({ entryId: '' });
-  }, [setState]);
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
 
   return (
     <BaseComponent
@@ -134,6 +134,7 @@ export const BundleModules = (props: BundleModulesProps) => {
       hideEntryInfo={hideEntryInfo}
       moduleMetric={moduleMetric}
       setModuleMetric={setModuleMetric}
+      showEntryInfo={showEntryInfo}
     />
   );
 };

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

@@ -18,6 +18,10 @@ import { MetricsTableTitle } from '../metrics-table-title';
 import { PackageInfo } from '../package-info';
 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 { useMetricsDisplayType } from '../../hooks/metrics-display-type';
 
 const getDropdownFilters = ({ compareMode, filters }) => ({
   [PACKAGE_FILTERS.CHANGED]: {
@@ -126,10 +130,13 @@ export const BundlePackages = (props) => {
     entryId,
     allItems,
     hideEntryInfo,
+    showEntryInfo,
   } = props;
 
   const jobLabels = jobs?.map((job) => job?.label);
 
+  const [displayType, setDisplayType] = useMetricsDisplayType();
+
   const dropdownFilters = useMemo(
     () => getDropdownFilters({ compareMode: jobs?.length > 1, filters }),
     [jobs, filters],
@@ -187,6 +194,7 @@ export const BundlePackages = (props) => {
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
+              <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -210,16 +218,21 @@ export const BundlePackages = (props) => {
           </FlexStack>
         </Toolbar>
         <main>
-          <MetricsTable
-            runs={jobs}
-            items={items}
-            emptyMessage={emptyMessage}
-            renderRowHeader={renderRowHeader}
-            showHeaderSum
-            title={metricsTableTitle}
-            sort={sort}
-            updateSort={updateSort}
-          />
+          {displayType === MetricsDisplayType.TABLE && (
+            <MetricsTable
+              runs={jobs}
+              items={items}
+              emptyMessage={emptyMessage}
+              renderRowHeader={renderRowHeader}
+              showHeaderSum
+              title={metricsTableTitle}
+              sort={sort}
+              updateSort={updateSort}
+            />
+          )}
+          {displayType === MetricsDisplayType.TREEMAP && (
+            <MetricsTreemap emptyMessage={emptyMessage} items={items} onItemClick={showEntryInfo} />
+          )}
         </main>
       </section>
       {entryItem && (
@@ -283,4 +296,5 @@ BundlePackages.propTypes = {
   customComponentLink: PropTypes.elementType,
   entryId: PropTypes.string,
   hideEntryInfo: PropTypes.func.isRequired,
+  showEntryInfo: PropTypes.func.isRequired,
 };

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { PACKAGE_FILTERS } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack/compare';
@@ -6,8 +6,14 @@ 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 { useEntryInfo } from '../../hooks/entry-info';
 import { BundlePackages as BundlePackagesComponent } from './bundle-packages';
-import { getDuplicatePackages, getAddRowDuplicateFlag, getRowFilter, getCustomSort } from './bundle-packages.utils';
+import {
+  getDuplicatePackages,
+  getAddRowDuplicateFlag,
+  getRowFilter,
+  getCustomSort,
+} from './bundle-packages.utils';
 
 export const BundlePackages = (props) => {
   const { jobs, search, filters, setState, sortBy, direction, ...restProps } = props;
@@ -54,9 +60,7 @@ export const BundlePackages = (props) => {
     getCustomSort,
   });
 
-  const hideEntryInfo = useCallback(() => {
-    setState({ entryId: '' });
-  }, [setState]);
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
 
   return (
     <BundlePackagesComponent
@@ -67,6 +71,7 @@ export const BundlePackages = (props) => {
       allItems={rows}
       totalRowCount={totalRowCount}
       hideEntryInfo={hideEntryInfo}
+      showEntryInfo={showEntryInfo}
     />
   );
 };

package/src/components/index.js

@@ -1,7 +1,6 @@
 export { BrowsertimeTable } from './browsertime-table';
 export { BundleAssets } from './bundle-assets';
-export { BundleAssetsTotalsTable } from './bundle-assets-totals-table';
-export { BundleAssetsTotalsChartBars } from './bundle-assets-totals-chart-bars';
+export { BundleAssetsTotals } from './bundle-assets-totals';
 export { BundlePackages } from './bundle-packages';
 export { BundleModules } from './bundle-modules';
 export { ComponentLink } from './component-link';

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

@@ -0,0 +1 @@
+export * from './metrics-display-selector';

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

@@ -0,0 +1,10 @@
+.button {
+  text-decoration: none;
+}
+
+.buttonActive,
+.buttonActive:active,
+.buttonActive:focus {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { MetricsDisplayType } from '../../constants';
+import { FlexStack } from '../../layout/flex-stack';
+import { Button } from '../../ui/button';
+import { Icon } from '../../ui/icon';
+import css from './metrics-display-selector.module.css';
+
+interface MetricsDisplaySelectorProps {
+  value: MetricsDisplayType;
+  onSelect: (newValue: MetricsDisplayType) => void;
+}
+
+export const MetricsDisplaySelector = (
+  props: MetricsDisplaySelectorProps &
+    Omit<React.ComponentProps<typeof FlexStack>, 'onSelect' | 'value'>,
+) => {
+  const { className = '', value, onSelect, ...restProps } = props;
+
+  return (
+    <FlexStack space="xxsmall" as="nav" 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>
+    </FlexStack>
+  );
+};

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

@@ -0,0 +1 @@
+export * from './metrics-treemap';

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

@@ -0,0 +1,184 @@
+.root {
+  position: relative;
+  aspect-ratio: 16/9;
+  background: var(--color-background);
+}
+
+.canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  fill: var(--color-text);
+  font-family: var(--font-family);
+  background: var(--color-outline);
+}
+
+/** Tile overlay fill background transition */
+.root {
+  transition: var(--ui-transition-out);
+  transition-property: opacity;
+}
+
+.leafBackground {
+  fill: var(--color-background);
+}
+
+.leafBackdrop {
+  fill: var(--color-background);
+  transition: var(--ui-transition-out);
+  transition-property: opacity;
+  opacity: 0.2;
+}
+
+.leaf:hover .leafBackdrop {
+  transition: var(--ui-transition-in);
+  opacity: 0.5;
+}
+
+/** Leaf wrapper button */
+.leafAction {
+  appearance: none;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: none;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  font-family: var(--font-family-fixed);
+  font-size: var(--size-small);
+  line-height: var(--line-height-heading);
+  text-align: left;
+}
+
+.leafContent {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  padding: var(--space-xxsmall) var(--space-xxsmall);
+  gap: var(--space-xxsmall);
+  line-height: var(--line-height-heading);
+}
+
+/** Align label to other elements on the first column leafs */
+.leafWrapper[x="0"] .leafContent {
+  padding-left: var(--space-small);
+}
+
+.leadContentLabel {
+  flex: 0 1 auto;
+  width: 100%;
+  min-width: 0;
+  max-height: calc(2em * var(--line-height-heading));
+  overflow: hidden;
+  word-break: break-word;
+}
+
+.leadContentValue {
+  flex: 0 0 auto;
+  max-width: calc(100% + var(--space-xxsmall));
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.leadContentMetric {
+  font-weight: bold;
+}
+
+.leadContentDelta {
+  margin-left: var(--space-xxxsmall);
+}
+
+/** Tile size variation */
+.leafSmall .leafContent {
+  padding: var(--space-xxxsmall) var(--space-xxsmall);
+  gap: 0;
+  font-size: var(--size-xsmall);
+}
+
+.leafSmall .leadContentLabel {
+  margin-top: 0;
+}
+
+/** Tile diff variation */
+.leaf-NO_CHANGE .leafBackdrop {
+  fill: transparent;
+}
+
+.leaf-NO_CHANGE .leafAction {
+  color: var(--color-text-light);
+}
+
+.leaf-HIGH_NEGATIVE .leafBackdrop {
+  fill: var(--color-red-100);
+}
+
+.leaf-NEGATIVE .leafBackdrop {
+  fill: var(--color-red-50);
+}
+
+.leaf-LOW_NEGATIVE .leafBackdrop {
+  fill: var(--color-red-25);
+}
+
+.leaf-LOW_POSITIVE .leafBackdrop {
+  fill: var(--color-green-25);
+}
+
+.leaf-POSITIVE .leafBackdrop {
+  fill: var(--color-green-50);
+}
+
+.leaf-HIGH_POSITIVE .leafBackdrop {
+  fill: var(--color-green-100);
+}
+
+/** empty message */
+.emptyMessage {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.emptyMessageWrapper {
+  max-width: 100%;
+  text-align: center;
+}
+
+/** tooltip */
+.leafContentTooltipAnchor {
+  width: 100%;
+  height: 100%;
+}
+
+.tooltip {
+  z-index: var(--layer-xxhigh);
+  padding: var(--space-xsmall) var(--space-small);
+  border-radius: var(--radius-medium);
+  width: calc(100vw - 2 * var(--space-small));
+  max-width: 340px;
+  outline: none;
+  filter: drop-shadow(var(--shadow-layer-high));
+  will-change: filter;
+  background: var(--color-light);
+  font-size: var(--size-small);
+}
+
+.leafTooltipArrow svg {
+  display: block;
+  fill: var(--color-background) !important;
+}
+
+.leafTooltipContentTitle {
+  font-size: var(--size-medium);
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { action } from '@storybook/addon-actions';
+
+// eslint-disable-next-line import/no-relative-packages
+import moduleItemsFixture from '../../../../../fixtures/module-items.json';
+import { MetricsTreemap } from '.';
+
+export default {
+  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'),
+  },
+};