@bundle-stats/ui 4.13.0-beta.9 → 4.13.0-rc.1

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

@@ -15,7 +15,9 @@ import config from '../../config.json';
 import I18N from '../../i18n';
 import { MetricsDisplayType } from '../../constants';
 import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
+import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
+import { Stack } from '../../layout/stack';
 import { Icon } from '../../ui/icon';
 import { InputSearch } from '../../ui/input-search';
 import { FileName } from '../../ui/file-name';
@@ -33,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';
 
@@ -41,13 +43,16 @@ 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]) => ({
-      key,
-      label,
-      defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
-    }));
+  Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
+    key,
+    label,
+    defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
+  }));
 
 const getFilters = ({ compareMode, filters }) => ({
   [ASSET_FILTERS.CHANGED]: {
@@ -140,6 +145,7 @@ const RowHeader = ({ row, customComponentLink: CustomComponentLink, filters, sea
 
 RowHeader.propTypes = {
   row: PropTypes.shape({
+    key: PropTypes.string,
     label: PropTypes.string,
     isNotPredictive: PropTypes.bool,
     isChunk: PropTypes.bool,
@@ -147,24 +153,94 @@ RowHeader.propTypes = {
     isEntry: PropTypes.bool,
     runs: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   }).isRequired,
-  chunks: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      name: PropTypes.string,
-    }),
-  ),
-  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
-  CustomComponentLink: PropTypes.elementType.isRequired,
+  customComponentLink: PropTypes.elementType.isRequired,
+  filters: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  search: PropTypes.string,
 };
 
 RowHeader.defaultProps = {
-  chunks: [],
+  search: '',
+};
+
+const ViewMetricsTreemap = (props) => {
+  const {
+    metricsTableTitle,
+    jobs,
+    items,
+    displayType,
+    emptyMessage,
+    showEntryInfo,
+    updateSearch,
+    search,
+  } = props;
+
+  // Get treenodes based on group
+  const treeNodes = useMemo(() => {
+    if (displayType.groupBy === 'folder') {
+      return getTreemapNodesGroupedByPath(items);
+    }
+
+    return getTreemapNodes(items);
+  }, [items, displayType.groupBy]);
+
+  // Search based on the group path on group title click
+  const onGroupClick = useCallback(
+    (groupPath) => {
+      // Clear seach when groupPath is emty (root)
+      if (groupPath === '') {
+        updateSearch('');
+        return;
+      }
+      // Search by group path
+      // 1. use `^` to match only the string beggining
+      // 2. add `/` suffix to exactly match the directory
+      const newSearch = `^${groupPath}/`;
+
+      // Reset search when toggling the same groupPath
+      if (newSearch === search) {
+        updateSearch('');
+        return;
+      }
+
+      updateSearch(`^${groupPath}/`);
+    },
+    [updateSearch, search],
+  );
+
+  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,
+  search: PropTypes.string.isRequired,
 };
 
 export const BundleAssets = (props) => {
   const {
     className,
     jobs,
+    chunks,
     items,
     allItems,
     updateFilters,
@@ -185,21 +261,24 @@ 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 }),
     [jobs, filters],
   );
 
-  const metricsTableTitle = useMemo(() => (
-    <MetricsTableTitle
-      title={I18N.ASSETS}
-      info={`${items.length}/${totalRowCount}`}
-      popoverInfo={I18N.ASSETS_INFO}
-      popoverHref={config.documentation.assets}
-    />
-  ), [items, totalRowCount]);
+  const metricsTableTitle = useMemo(
+    () => (
+      <MetricsTableTitle
+        title={I18N.ASSETS}
+        info={`${items.length}/${totalRowCount}`}
+        popoverInfo={I18N.ASSETS_INFO}
+        popoverHref={config.documentation.assets}
+      />
+    ),
+    [items, totalRowCount],
+  );
 
   const renderRowHeader = useCallback(
     (row) => (
@@ -213,31 +292,38 @@ export const BundleAssets = (props) => {
     [CustomComponentLink, filters, search],
   );
 
-  const emptyMessage = useMemo(() => (
-    <EmptySet
-      resources="assets"
-      filtered={totalRowCount !== 0}
-      handleResetFilters={resetFilters}
-      handleViewAll={resetAllFilters}
-    />
-  ), [totalRowCount, resetFilters, resetAllFilters]);
+  const emptyMessage = useMemo(
+    () => (
+      <EmptySet
+        resources="assets"
+        filtered={totalRowCount !== 0}
+        handleResetFilters={resetFilters}
+        handleViewAll={resetAllFilters}
+      />
+    ),
+    [totalRowCount, resetFilters, resetAllFilters],
+  );
 
   const entryItem = useMemo(() => {
     if (!entryId) {
       return null;
     }
 
-    return allItems.find(({ key }) => key === entryId)
+    return allItems.find(({ key }) => key === entryId);
   }, [allItems, entryId]);
 
   return (
     <>
-      <section className={cx(css.root, className)}>
+      <Stack space="xsmall" as="section" className={cx(css.root, className)}>
         <Toolbar
-          className={css.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}
@@ -260,8 +346,8 @@ export const BundleAssets = (props) => {
             />
           </FlexStack>
         </Toolbar>
-        <main>
-          {displayType === MetricsDisplayType.TABLE && (
+        <Box outline as="main">
+          {displayType.value === MetricsDisplayType.TABLE && (
             <MetricsTable
               runs={jobs}
               items={items}
@@ -273,32 +359,26 @@ 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}
+              search={search}
+            />
           )}
-        </main>
-      </section>
+        </Box>
+      </Stack>
 
       {entryItem && (
         <AssetInfo
           className={css.assetInfo}
           item={entryItem}
           labels={jobLabels}
-          chunks={jobs[0]?.meta?.webpack?.chunks || []}
+          chunks={chunks}
           customComponentLink={CustomComponentLink}
           onClose={hideEntryInfo}
         />
@@ -321,13 +401,12 @@ BundleAssets.propTypes = {
     PropTypes.shape({
       internalBuildNumber: PropTypes.number,
       label: PropTypes.string,
-      meta: PropTypes.shape({
-        webpack: PropTypes.shape({
-          chunks: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-        }),
-      }),
     }),
   ).isRequired,
+  chunks: PropTypes.arrayOf({
+    id: PropTypes.string,
+    name: PropTypes.string,
+  }).isRequired,
   items: PropTypes.arrayOf(
     PropTypes.shape({
       key: PropTypes.string,
@@ -357,9 +436,11 @@ BundleAssets.propTypes = {
     direction: PropTypes.string,
   }).isRequired,
   updateSort: PropTypes.func.isRequired,
-  allItems: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.string,
-  })).isRequired,
+  allItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string,
+    }),
+  ).isRequired,
   customComponentLink: PropTypes.elementType,
   hideEntryInfo: PropTypes.func.isRequired,
   showEntryInfo: PropTypes.func.isRequired,

package/src/components/bundle-assets/bundle-assets.module.css

@@ -1,11 +1,6 @@
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .toolbarSearch {
   width: 100%;
   max-width: 240px;
-  margin-right: -1px; /** collapse border */
 }
 
 .assetNameWrapper {

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

@@ -11,6 +11,7 @@ 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 { getJobsChunksData } from '../../utils/jobs';
 import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
 import {
   addRowAssetFlags,
@@ -22,6 +23,8 @@ import {
 export const BundleAssets = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
 
+  const { chunks } = useMemo(() => getJobsChunksData(jobs), [jobs]);
+
   const { defaultFilters, allEntriesFilters } = useMemo(
     () => ({
       defaultFilters: {
@@ -70,6 +73,7 @@ export const BundleAssets = (props) => {
   return (
     <BundleAssetsComponent
       jobs={jobs}
+      chunks={chunks}
       {...restProps}
       {...searchParams}
       {...sortParams}

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

@@ -13,13 +13,22 @@ import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
 import I18N from '../../i18n';
 import { Toolbar } from '../../ui/toolbar';
 import { Table } from '../../ui/table';
+import { Box } from '../../layout/box';
+import { Stack } from '../../layout/stack';
 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';
-import css from './bundle-assets-totals.module.css';
+
+const metricsTableTitle = (
+  <MetricsTableTitle
+    title={I18N.ASSET_TOTALS}
+    popoverInfo={I18N.ASSET_TOTALS_INFO}
+    popoverHref={config.documentation.assets}
+  />
+);
 
 export const BundleAssetsTotals = ({
   className,
@@ -31,18 +40,21 @@ export const BundleAssetsTotals = ({
   const [displayType, setDisplayType] = useMetricsDisplayType();
   const history = useHistory();
 
-  const items = webpack.compareBySection.sizes(jobs);
+  const items = useMemo(() => webpack.compareBySection.sizes(jobs), [jobs]);
 
-  const renderRowHeader = (item) => {
-    const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
-    const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
+  const renderRowHeader = useCallback(
+    (item) => {
+      const fileType = ASSETS_SIZES_FILE_TYPE_MAP[item.key];
+      const { section, title, params } = getBundleAssetsFileTypeComponentLink(fileType, item.label);
 
-    return (
-      <CustomComponentLink section={section} title={title} params={params}>
-        {item.label}
-      </CustomComponentLink>
-    );
-  };
+      return (
+        <CustomComponentLink section={section} title={title} params={params}>
+          {item.label}
+        </CustomComponentLink>
+      );
+    },
+    [CustomComponentLink],
+  );
 
   const handleMetricsTreemapItemClick = useCallback(
     (entryId) => {
@@ -56,47 +68,42 @@ export const BundleAssetsTotals = ({
     [history],
   );
 
-  const metricsTableTitle = useMemo(
-    () => (
-      <MetricsTableTitle
-        title={I18N.ASSET_TOTALS}
-        popoverInfo={I18N.ASSET_TOTALS_INFO}
-        popoverHref={config.documentation.assets}
-      />
-    ),
-    [],
-  );
-
   return (
-    <div className={className}>
+    <Stack space="xsmall" as="section" className={className}>
       <Toolbar
-        className={css.toolbar}
         renderActions={() => (
-          <MetricsDisplaySelector onSelect={setDisplayType} value={displayType} />
+          <MetricsDisplaySelector onSelect={setDisplayType} value={displayType.value} />
         )}
       />
-      {displayType === MetricsDisplayType.TABLE && (
-        <MetricsTable
-          title={metricsTableTitle}
-          runs={jobs}
-          items={items}
-          renderRowHeader={renderRowHeader}
-          showHeaderSum
-          {...restProps}
-        />
-      )}
-      {displayType === MetricsDisplayType.TREEMAP && (
-        <>
-          <Table compact>
-            <MetricsTableHeader metricTitle={metricsTableTitle} showSum jobs={jobs} rows={items} />
-          </Table>
-          <MetricsTreemap
+      <Box outline as="main">
+        {displayType.value === MetricsDisplayType.TABLE && (
+          <MetricsTable
+            title={metricsTableTitle}
+            runs={jobs}
             items={items}
-            onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
+            renderRowHeader={renderRowHeader}
+            showHeaderSum
+            {...restProps}
           />
-        </>
-      )}
-    </div>
+        )}
+        {displayType.value === MetricsDisplayType.TREEMAP && (
+          <>
+            <Table compact>
+              <MetricsTableHeader
+                metricTitle={metricsTableTitle}
+                showSum
+                jobs={jobs}
+                rows={items}
+              />
+            </Table>
+            <MetricsTreemap
+              treeNodes={getTreemapNodes(items)}
+              onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
+            />
+          </>
+        )}
+      </Box>
+    </Stack>
   );
 };
 

package/src/components/bundle-modules/bundle-modules.i18n.ts

@@ -1,4 +1,4 @@
-export const SEARCH = 'Search by module name';
+export const SEARCH = 'Search by module path';
 export const CHANGED = 'Changed';
 export const DUPLICATE = 'Duplicate';
 export const CHUNK = 'Chunk';

package/src/components/bundle-modules/bundle-modules.module.css

@@ -2,14 +2,9 @@
   color: var(--color-text-light);
 }
 
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .toolbarSearch {
   width: 100%;
   max-width: 240px;
-  margin-right: -1px; /** collapse border */
 }
 
 .metricSelector {