@bundle-stats/ui 4.13.0-rc.0 → 4.13.0-rc.2

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

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import get from 'lodash/get';
+import escapeRegExp from 'lodash/escapeRegExp';
 import {
   ASSET_ENTRY_TYPE,
   ASSET_FILE_TYPE,
@@ -48,12 +49,11 @@ const DISPLAY_TYPE_GROUPS = {
 };
 
 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]: {
@@ -146,6 +146,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,
@@ -153,23 +154,28 @@ 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 } = 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);
@@ -178,19 +184,28 @@ const ViewMetricsTreemap = (props) => {
     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 match only exact directories
-      // 3. if the group path is empty(root), clear search
-      if (groupPath) {
-        updateSearch(`^${groupPath}/`);
-      } else {
+      // 2. add `/` suffix to exactly match the directory
+      const newSearch = `^${escapeRegExp(groupPath)}/`;
+
+      // Reset search when toggling the same groupPath
+      if (newSearch === search) {
         updateSearch('');
+        return;
       }
+
+      updateSearch(`^${groupPath}/`);
     },
-    [updateSearch],
+    [updateSearch, search],
   );
 
   return (
@@ -219,12 +234,14 @@ ViewMetricsTreemap.propTypes = {
   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,
@@ -252,14 +269,17 @@ export const BundleAssets = (props) => {
     [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) => (
@@ -273,21 +293,24 @@ 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 (
@@ -341,10 +364,12 @@ export const BundleAssets = (props) => {
             <ViewMetricsTreemap
               jobs={jobs}
               items={items}
+              metricsTableTitle={metricsTableTitle}
               displayType={displayType}
               emptyMessage={emptyMessage}
               showEntryInfo={showEntryInfo}
               updateSearch={updateSearch}
+              search={search}
             />
           )}
         </Box>
@@ -355,7 +380,7 @@ export const BundleAssets = (props) => {
           className={css.assetInfo}
           item={entryItem}
           labels={jobLabels}
-          chunks={jobs[0]?.meta?.webpack?.chunks || []}
+          chunks={chunks}
           customComponentLink={CustomComponentLink}
           onClose={hideEntryInfo}
         />
@@ -378,13 +403,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,
@@ -414,9 +438,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/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-modules/bundle-modules.tsx

@@ -1,7 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
 import cx from 'classnames';
-import { SECTIONS, COMPONENT } from '@bundle-stats/utils';
+import { SECTIONS, COMPONENT, type Job } from '@bundle-stats/utils';
+import escapeRegExp from 'lodash/escapeRegExp';
 
+import { WebpackChunk } from '@bundle-stats/utils';
 import { SortAction } from '../../types';
 import config from '../../config.json';
 import I18N from '../../i18n';
@@ -29,7 +31,7 @@ import { MetricsTableTitle } from '../metrics-table-title';
 import { ModuleInfo } from '../module-info';
 import { generateFilterFieldsData } from './bundle-modules.utils';
 import { ModuleMetric } from './bundle-modules.constants';
-import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
+import type { 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';
@@ -73,12 +75,22 @@ interface ViewMetricsTreemapProps {
   emptyMessage: React.ReactNode;
   showEntryInfo: React.ComponentProps<typeof MetricsTreemap>['onItemClick'];
   updateSearch: (newSerarch: string) => void;
+  search: string;
 }
 
 const ViewMetricsTreemap = (props: ViewMetricsTreemapProps) => {
-  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch } =
-    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);
@@ -87,19 +99,28 @@ const ViewMetricsTreemap = (props: ViewMetricsTreemapProps) => {
     return getTreemapNodes(items);
   }, [items, displayType]);
 
+  // Search based on the group path on group title click
   const onGroupClick = useCallback(
     (groupPath: string) => {
+      // 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 match only exact directories
-      // 3. if the group path is empty(root), clear search
-      if (groupPath) {
-        updateSearch(`^${groupPath}/`);
-      } else {
+      // 2. add `/` suffix to exactly match the directory
+      const newSearch = `^${escapeRegExp(groupPath)}/`;
+
+      // Reset search when toggling the same groupPath
+      if (newSearch === search) {
         updateSearch('');
+        return;
       }
+
+      updateSearch(newSearch);
     },
-    [updateSearch],
+    [updateSearch, search],
   );
 
   return (
@@ -122,7 +143,7 @@ interface BundleModulesProps extends React.ComponentProps<'div'> {
   jobs?: Array<Job>;
   items?: Array<ReportMetricModuleRow>;
   allItems?: Array<ReportMetricModuleRow>;
-  chunks?: Array<Chunk>;
+  chunks?: Array<WebpackChunk>;
 
   totalRowCount: number;
 
@@ -305,6 +326,7 @@ export const BundleModules = (props: BundleModulesProps) => {
               emptyMessage={emptyMessage}
               showEntryInfo={showEntryInfo}
               updateSearch={updateSearch}
+              search={search}
             />
           )}
         </Box>

package/src/components/bundle-modules/bundle-modules.types.d.ts

@@ -1,10 +1,5 @@
-import { Module } from '@bundle-stats/utils/lib-esm/webpack/types';
-import { ReportMetricRun } from '@bundle-stats/utils/types/report/types';
-
-export interface Chunk {
-  id: string;
-  name: string;
-}
+import type { Module } from '@bundle-stats/utils/lib-esm/webpack/types';
+import type { ReportMetricRun } from '@bundle-stats/utils/types/report/types';
 
 export type ReportMetricModuleRow = {
   thirdParty: boolean;
@@ -12,13 +7,3 @@ export type ReportMetricModuleRow = {
   fileType: string;
 } & ReportMetricRun &
   Module;
-
-export interface Job {
-  label: string;
-  internalBuildNumber: number;
-  meta?: {
-    webpack?: {
-      chunks?: Array<Chunk>;
-    };
-  };
-}

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

@@ -2,12 +2,11 @@ import intersection from 'lodash/intersection';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import union from 'lodash/union';
-import uniqBy from 'lodash/uniqBy';
 import orderBy from 'lodash/orderBy';
-import type { MetricRunInfo, ReportMetricRow } from '@bundle-stats/utils';
-// @ts-ignore
-import { MODULE_PATH_PACKAGES, type Module } from '@bundle-stats/utils/lib-esm/webpack';
 import {
+  type WebpackChunk,
+  type MetricRunInfo,
+  type ReportMetricRow,
   FILE_TYPE_LABELS,
   MODULE_CHUNK,
   MODULE_FILTERS,
@@ -19,10 +18,12 @@ import {
   getModuleSourceTypeFilters,
   getModuleFileTypeFilters,
 } from '@bundle-stats/utils';
+// @ts-ignore
+import { MODULE_PATH_PACKAGES, type Module } from '@bundle-stats/utils/lib-esm/webpack';
 import type { ReportMetricRun } from '@bundle-stats/utils/types/report/types';
 
 import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
-import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
+import type { ReportMetricModuleRow } from './bundle-modules.types';
 import * as I18N from './bundle-modules.i18n';
 
 export const addRowFlags = (row: Module & ReportMetricRow): ReportMetricModuleRow => {
@@ -98,18 +99,6 @@ export const generateGetRowFilter =
   };
 /* eslint-enable prettier/prettier */
 
-export const extractChunkData = (jobs: Array<Job>) => {
-  const jobChunks = jobs.map((job) => job?.meta?.webpack?.chunks || []);
-  const chunks = uniqBy(jobChunks.flat(), ({ id }) => id);
-
-  const chunkIds = chunks?.map(({ id }) => id);
-
-  return {
-    chunks,
-    chunkIds,
-  };
-};
-
 export const generateFilters = (chunkIds: Array<string>, multipleJobs: boolean) => {
   const allEntriesFilters = {
     [MODULE_FILTERS.CHANGED]: false,
@@ -137,7 +126,7 @@ interface GetFiltersFormDataParams {
   /**
    * Chunk data
    */
-  chunks: Array<Chunk>;
+  chunks: Array<WebpackChunk>;
   /**
    * Compare mode
    */

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

@@ -1,8 +1,10 @@
 import React, { useCallback, useMemo } from 'react';
+import type { Job } from '@bundle-stats/utils';
 // @ts-ignore
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 
 import type { SortAction } from '../../types';
+import { getJobsChunksData } from '../../utils/jobs';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
@@ -10,7 +12,6 @@ import { useEntryInfo } from '../../hooks/entry-info';
 import { BundleModules as BaseComponent } from './bundle-modules';
 import {
   addRowFlags,
-  extractChunkData,
   generateGetRowFilter,
   generateFilters,
   getCustomSort,
@@ -64,7 +65,7 @@ interface BundleModulesProps
     | 'hideEntryInfo'
     | 'showEntryInfo'
   > {
-  jobs: Array<types.Job>;
+  jobs: Array<Job>;
   filters: Record<string, boolean>;
   search?: string;
   metric?: string;
@@ -78,7 +79,7 @@ export const BundleModules = (props: BundleModulesProps) => {
 
   const [moduleMetric, setModuleMetric] = useModuleMetric({ metric, setState });
 
-  const { chunks, chunkIds } = useMemo(() => extractChunkData(jobs), [jobs]);
+  const { chunks, chunkIds } = useMemo(() => getJobsChunksData(jobs), [jobs]);
 
   const { defaultFilters, allEntriesFilters } = useMemo(
     () => generateFilters(chunkIds, jobs.length > 1),

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { escapeRegExp } from 'lodash/escapeRegExp';
 import { COMPONENT, PACKAGE_FILTERS, PACKAGES_SEPARATOR, SECTIONS } from '@bundle-stats/utils';
 
 import config from '../../config.json';
@@ -120,8 +121,9 @@ RowHeader.propTypes = {
 };
 
 const ViewMetricsTreemap = (props) => {
-  const { metricsTableTitle, jobs, items, displayType, emptyMessage, showEntryInfo, updateSearch } = 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);
@@ -130,19 +132,28 @@ const ViewMetricsTreemap = (props) => {
     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 match only exact directories
-      // 3. if the group path is empty(root), clear search
-      if (groupPath) {
-        updateSearch(`^${groupPath}/`);
-      } else {
+      // 2. add `/` suffix to exactly match the directory
+      const newSearch = `^${escapeRegExp(groupPath)}/`;
+
+      // Reset search when toggling the same groupPath
+      if (newSearch === search) {
         updateSearch('');
+        return;
       }
+
+      updateSearch(newSearch);
     },
-    [updateSearch],
+    [updateSearch, search],
   );
 
   return (
@@ -171,6 +182,7 @@ ViewMetricsTreemap.propTypes = {
   emptyMessage: PropTypes.node.isRequired,
   showEntryInfo: PropTypes.func.isRequired,
   updateSearch: PropTypes.func.isRequired,
+  search: PropTypes.string.isRequired,
 };
 
 export const BundlePackages = (props) => {
@@ -296,10 +308,12 @@ export const BundlePackages = (props) => {
             <ViewMetricsTreemap
               jobs={jobs}
               items={items}
+              metricsTableTitle={metricsTableTitle}
               displayType={displayType}
               emptyMessage={emptyMessage}
               showEntryInfo={showEntryInfo}
               updateSearch={updateSearch}
+              search={search}
             />
           )}
         </Box>

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

@@ -50,3 +50,14 @@ export interface Tree {
 export type TreeNode = Tree | TreeLeaf;
 
 export type TreeNodeChildren = Array<TreeNode>;
+
+export type TileGroupSizeDisplay = 'minimal' | 'small' | 'default';
+
+export type TileSizeDisplay = 'minimal' | 'small' | 'default';
+
+export const SQUARIFY_RATIO = 1.66;
+export const PADDING_OUTER = 1;
+export const PADDING_INNER = 2;
+export const NESTED_PADDING = 4;
+export const NESTED_PADDING_TOP = 16 + NESTED_PADDING * 2;
+export const NESTED_PADDING_LEFT = 8;