@bundle-stats/ui 4.2.2 → 4.2.3-beta.1

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

@@ -0,0 +1,323 @@
+import type { ElementType, ReactNode } from 'react';
+import React, { ComponentProps, useCallback, useMemo, useState } from 'react';
+import cx from 'classnames';
+import escapeRegExp from 'lodash/escapeRegExp';
+import type { Job, ReportMetricRow, WebpackChunk } from '@bundle-stats/utils';
+import { COMPONENT, SECTIONS } from '@bundle-stats/utils';
+
+import type { ReportMetricAssetRow, SortAction } from '../../types';
+import config from '../../config.json';
+import I18N from '../../i18n';
+import { MetricsDisplayGroupBy, 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 { Dialog, useDialogState } from '../../ui/dialog';
+import { InputSearch } from '../../ui/input-search';
+import { Table } from '../../ui/table';
+import { Filters } from '../../ui/filters';
+import { EmptySet } from '../../ui/empty-set';
+import { Toolbar } from '../../ui/toolbar';
+import { AssetInfo } from '../asset-info';
+import { AssetName } from '../asset-name';
+import { ComponentLink } from '../component-link';
+import { MetricsTable } from '../metrics-table';
+import { MetricsTableExport } from '../metrics-table-export';
+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, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
+import * as BUNDLE_ASSETS_I18N from './bundle-assets.i18n';
+import { getFilters } from './bundle-assets.utils';
+import css from './bundle-assets.module.css';
+
+const DISPLAY_TYPE_GROUPS = {
+  [MetricsDisplayType.TREEMAP]: [MetricsDisplayGroupBy.FOLDER],
+};
+
+interface ViewMetricsTreemapProps {
+  metricsTableTitle: ReactNode;
+  jobs: Array<Job>;
+  items: Array<ReportMetricAssetRow>;
+  displayType: { value: MetricsDisplayType; groupBy?: string };
+  emptyMessage: ReactNode;
+  showEntryInfo: (entryId: string) => void;
+  updateSearch: (search: string) => void;
+  search: string;
+}
+
+const ViewMetricsTreemap = (props: ViewMetricsTreemapProps) => {
+  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: 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 exactly match the directory
+      const newSearch = `^${escapeRegExp(groupPath)}/`;
+
+      // Reset search when toggling the same groupPath
+      if (newSearch === search) {
+        updateSearch('');
+        return;
+      }
+
+      updateSearch(newSearch);
+    },
+    [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}
+      />
+    </>
+  );
+};
+
+export interface BundleAssetsProps extends ComponentProps<typeof Stack> {
+  jobs: Array<Job>;
+  chunks: Array<WebpackChunk>;
+  items: Array<ReportMetricAssetRow>;
+  allItems: Array<ReportMetricAssetRow>;
+  filters: Record<string, boolean>;
+  updateFilters: (newFilters: Record<string, boolean>) => void;
+  resetFilters: () => void;
+  resetAllFilters: () => void;
+  totalRowCount?: number;
+  entryId?: string;
+  sort: SortAction;
+  updateSort: (params: SortAction) => void;
+  search: string;
+  updateSearch: (search: string) => void;
+  customComponentLink?: ElementType;
+  hideEntryInfo: () => void;
+  showEntryInfo: (entryId: string) => void;
+}
+
+export const BundleAssets = (props: BundleAssetsProps) => {
+  const {
+    className = '',
+    jobs,
+    chunks,
+    items,
+    allItems,
+    updateFilters,
+    resetFilters,
+    resetAllFilters,
+    totalRowCount = 0,
+    filters,
+    entryId = '',
+    sort,
+    updateSort,
+    search,
+    updateSearch,
+    customComponentLink: CustomComponentLink = ComponentLink,
+    hideEntryInfo,
+    showEntryInfo,
+  } = props;
+
+  const jobLabels = jobs?.map((job) => job?.label);
+
+  const [displayType, setDisplayType] = useMetricsDisplayType(DISPLAY_TYPE_GROUPS);
+
+  const filterFieldsData = useMemo(
+    () => getFilters({ compareMode: jobs?.length > 1, filters, chunks }),
+    [jobs, filters, chunks],
+  );
+
+  const metricsTableTitle = useMemo(
+    () => (
+      <MetricsTableTitle
+        title={I18N.ASSETS}
+        info={`${items.length}/${totalRowCount}`}
+        popoverInfo={I18N.ASSETS_INFO}
+        popoverHref={config.documentation.assets}
+      />
+    ),
+    [items, totalRowCount],
+  );
+
+  const EntryComponentLink = useCallback(
+    ({
+      entryId: assetEntryId,
+      ...assetNameRestProps
+    }: { entryId: string } & ComponentProps<typeof CustomComponentLink>) => (
+      <CustomComponentLink
+        section={SECTIONS.ASSETS}
+        params={{
+          [COMPONENT.BUNDLE_ASSETS]: {
+            filters,
+            search,
+            entryId: assetEntryId,
+            sortBy: sort.field,
+            direction: sort.direction,
+          },
+        }}
+        {...assetNameRestProps}
+      />
+    ),
+    [CustomComponentLink, filters, search, sort],
+  );
+
+  const renderRowHeader = useCallback(
+    (row: ReportMetricRow) => (
+      <AssetName
+        row={row as ReportMetricAssetRow}
+        EntryComponentLink={EntryComponentLink}
+        className={css.assetName}
+      />
+    ),
+    [EntryComponentLink],
+  );
+
+  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);
+  }, [allItems, entryId]);
+
+  const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState<string>();
+
+  const handleExportClick = useCallback(
+    (sourceType: string) => {
+      setExportSourceType(sourceType);
+      exportDialog.toggle();
+    },
+    [exportDialog, setExportSourceType],
+  );
+
+  return (
+    <>
+      <Stack space="xsmall" as="section" className={cx(css.root, className)}>
+        <Toolbar
+          renderActions={({ actionClassName }) => (
+            <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
+              <MetricsDisplaySelector
+                value={displayType.value}
+                groupBy={displayType.groupBy}
+                groups={DISPLAY_TYPE_GROUPS}
+                onSelect={setDisplayType}
+              />
+              <MetricsTableOptions
+                onViewAllClick={resetAllFilters}
+                onResetClick={resetFilters}
+                onExportClick={handleExportClick}
+              />
+            </FlexStack>
+          )}
+        >
+          <FlexStack space="xxsmall">
+            <InputSearch
+              className={css.toolbarSearch}
+              placeholder={BUNDLE_ASSETS_I18N.SEARCH_PLACEHOLDER}
+              defaultValue={search}
+              onChange={updateSearch}
+            />
+            <Filters
+              className={css.toolbarFilters}
+              filters={filterFieldsData}
+              onChange={updateFilters}
+            />
+          </FlexStack>
+        </Toolbar>
+        <Box outline as="main">
+          {displayType.value === MetricsDisplayType.TABLE && (
+            <MetricsTable
+              runs={jobs}
+              items={items}
+              renderRowHeader={renderRowHeader}
+              emptyMessage={emptyMessage}
+              showHeaderSum
+              title={metricsTableTitle}
+              sort={sort}
+              updateSort={updateSort}
+            />
+          )}
+          {displayType.value === MetricsDisplayType.TREEMAP && (
+            <ViewMetricsTreemap
+              jobs={jobs}
+              items={items}
+              metricsTableTitle={metricsTableTitle}
+              displayType={displayType}
+              emptyMessage={emptyMessage}
+              showEntryInfo={showEntryInfo}
+              updateSearch={updateSearch}
+              search={search}
+            />
+          )}
+        </Box>
+      </Stack>
+
+      {entryItem && (
+        <AssetInfo
+          className={css.assetInfo}
+          item={entryItem}
+          labels={jobLabels}
+          chunks={chunks}
+          customComponentLink={CustomComponentLink}
+          onClose={hideEntryInfo}
+        />
+      )}
+
+      <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--assets"
+          />
+        )}
+      </Dialog>
+    </>
+  );
+};

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

@@ -0,0 +1,276 @@
+import get from 'lodash/get';
+import intersection from 'lodash/intersection';
+import isEmpty from 'lodash/isEmpty';
+import orderBy from 'lodash/orderBy';
+import type { ReportMetricRow, WebpackChunk } from '@bundle-stats/utils';
+import type { AssetMetricRun } from '@bundle-stats/utils/types/webpack';
+import {
+  ASSET_CHUNK,
+  ASSET_ENTRY_TYPE,
+  ASSET_FILE_TYPE,
+  ASSET_FILTERS,
+  FILE_TYPE_LABELS,
+  getFileType,
+} from '@bundle-stats/utils';
+
+import type {
+  FilterFieldsData,
+  ReportMetricAssetRow,
+  ReportMetricAssetRowMetaStatus,
+  FilterGroupFieldData,
+} from '../../types';
+import * as I18N from './bundle-assets.i18n';
+
+const NO_CHUNK_FILTER = 'NO_CHUNK';
+
+/**
+ * Check if the asset cache is not predictive
+ */
+export const getIsNotPredictive = (row: ReportMetricRow): boolean => {
+  const { key, runs } = row;
+
+  return runs.reduce((agg, run, index) => {
+    if (agg) {
+      return agg;
+    }
+
+    if (index + 1 === runs.length) {
+      return agg;
+    }
+
+    const preRun = runs[index + 1];
+
+    if (
+      run &&
+      preRun &&
+      key !== run.name &&
+      run.name === preRun.name &&
+      run.value !== preRun.value
+    ) {
+      return true;
+    }
+
+    return agg;
+  }, false);
+};
+
+/**
+ * Return asset meta status
+ */
+export const getAssetMetaStatus = (
+  values: Array<boolean | undefined>,
+): ReportMetricAssetRowMetaStatus | boolean => {
+  if (!values.includes(true)) {
+    return false;
+  }
+
+  // filter empty runs
+  const metaValues = values.filter((value) => typeof value !== 'undefined');
+
+  const current = metaValues[0];
+  const metaValuesLength = metaValues.length;
+
+  if (metaValuesLength === 1) {
+    return Boolean(current);
+  }
+
+  const baseline = metaValues[metaValuesLength - 1];
+
+  if (current && !baseline) {
+    return 'added';
+  }
+
+  if (!current && baseline) {
+    return 'removed';
+  }
+
+  return true;
+};
+
+/**
+ * Add asset row flags
+ */
+export const addMetricReportAssetRowData = (row: ReportMetricRow): ReportMetricAssetRow => {
+  const { changed, runs } = row;
+
+  // Collect meta for each run
+  const runsEntry: Array<boolean | undefined> = [];
+  const runsInitial: Array<boolean | undefined> = [];
+  const runsChunk: Array<boolean | undefined> = [];
+
+  (runs as Array<AssetMetricRun | null>).forEach((run) => {
+    runsEntry.push(run?.isEntry);
+    runsInitial.push(run?.isInitial);
+    runsChunk.push(run?.isChunk);
+  });
+
+  const isEntry = getAssetMetaStatus(runsEntry);
+  const isInitial = getAssetMetaStatus(runsInitial);
+  const isChunk = getAssetMetaStatus(runsChunk);
+  const isAsset = !(isEntry || isInitial || isChunk);
+  const isNotPredictive = getIsNotPredictive(row);
+  const fileType = getFileType(row.key);
+
+  // Flag asset as changed if name and value are identical, if one of the meta tags is changed
+  const assetChanged =
+    changed ||
+    typeof isEntry !== 'boolean' ||
+    typeof isInitial !== 'boolean' ||
+    typeof isChunk !== 'boolean';
+
+  return {
+    ...row,
+    changed: assetChanged,
+    isEntry,
+    isInitial,
+    isChunk,
+    isAsset,
+    isNotPredictive,
+    fileType,
+  };
+};
+
+type GenerateGetRowFilterOptions = {
+  chunkIds: Array<string>;
+};
+
+export const getCustomSort = (item: ReportMetricAssetRow): Array<boolean | string> => [
+  !item.isNotPredictive,
+  !item.changed,
+  !item.isInitial,
+  !item.isEntry,
+  !item.isChunk,
+  item.key,
+];
+
+/* eslint-disable prettier/prettier */
+const getFileTypeFilters = (filters: Record<string, unknown>): FilterGroupFieldData['children'] => Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
+  key,
+  label,
+  defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true) as boolean,
+}));
+
+type GetFiltersOptions = {
+  compareMode: boolean;
+  filters: Record<string, boolean>;
+  chunks: Array<WebpackChunk>;
+};
+
+export const getFilters = ({
+  compareMode,
+  filters,
+  chunks,
+}: GetFiltersOptions): FilterFieldsData => {
+  const result: FilterFieldsData = {
+    [ASSET_FILTERS.CHANGED]: {
+      label: I18N.CHANGED,
+      defaultValue: filters[ASSET_FILTERS.CHANGED],
+      disabled: !compareMode,
+    },
+  };
+
+  if (!isEmpty(chunks)) {
+    const chunksFilter: FilterGroupFieldData = {
+      label: I18N.CHUNKS,
+      children: [
+        {
+          key: NO_CHUNK_FILTER,
+          label: I18N.NO_CHUNK,
+          defaultValue: filters[`${ASSET_CHUNK}.${NO_CHUNK_FILTER}`] ?? true,
+        },
+      ],
+    };
+
+    const chunksOrderedByName = orderBy(chunks, 'name');
+
+    chunksOrderedByName.forEach((chunk) => {
+      chunksFilter.children.push({
+        key: chunk.id,
+        label: chunk.name,
+        defaultValue: filters[`${ASSET_CHUNK}.${chunk.id}`] ?? true,
+      });
+    });
+
+    result[ASSET_CHUNK] = chunksFilter;
+  }
+
+  result[ASSET_ENTRY_TYPE] = {
+    label: I18N.ASSET_TYPE,
+    children: [
+      {
+        key: ASSET_FILTERS.ENTRY,
+        label: I18N.ENTRY,
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true),
+      },
+      {
+        key: ASSET_FILTERS.INITIAL,
+        label: I18N.INITIAL,
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true),
+      },
+      {
+        key: ASSET_FILTERS.CHUNK,
+        label: I18N.CHUNK,
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true),
+      },
+      {
+        key: ASSET_FILTERS.OTHER,
+        label: I18N.OTHER,
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`, true),
+      },
+    ],
+  };
+
+  result[ASSET_FILE_TYPE] = {
+    label: I18N.FILE_TYPE,
+    children: getFileTypeFilters(filters),
+  };
+
+  return result;
+};
+
+/* eslint-disable prettier/prettier */
+export const generateGetRowFilter =
+  ({ chunkIds }: GenerateGetRowFilterOptions) => (filters: Record<string, unknown>) => {
+    // List of chunkIds with filter value set to `true`
+    const checkedChunkIds: Array<string> = [];
+    // List of chunks ids, including the NO_CHUNK
+    const filtersChunkIds = [NO_CHUNK_FILTER, ...chunkIds];
+
+    filtersChunkIds.forEach((chunkId) => {
+      if (filters[`${ASSET_CHUNK}.${chunkId}`]) {
+        checkedChunkIds.push(chunkId);
+      }
+    });
+
+    const hasChunkFilters =
+      checkedChunkIds.length > 0 && checkedChunkIds.length !== filtersChunkIds.length;
+
+    return (item: ReportMetricAssetRow) => {
+      if (filters[ASSET_FILTERS.CHANGED] && !item.changed) {
+        return false;
+      }
+
+      if (
+        !(
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`] && item.isEntry) ||
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`] && item.isInitial) ||
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`] && item.isChunk) ||
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`] && item.isAsset)
+        )
+      ) {
+        return false;
+      }
+
+      if (!filters[`${ASSET_FILE_TYPE}.${item.fileType}`]) {
+        return false;
+      }
+
+      // Filter if any of the chunkIds are checked
+      if (hasChunkFilters) {
+        const rowRunsChunkIds = item?.runs?.map((run) => run?.chunkId || NO_CHUNK_FILTER) || [];
+        return intersection(rowRunsChunkIds, checkedChunkIds).length > 0;
+      }
+
+      return true;
+    };
+  };

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

@@ -0,0 +1,112 @@
+import React, { useMemo } from 'react';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
+import type { Job } from '@bundle-stats/utils';
+import { ASSET_FILTERS } from '@bundle-stats/utils';
+import {
+  getAssetEntryTypeFilters,
+  getAssetFileTypeFilters,
+} from '@bundle-stats/utils/lib-esm/utils/component-links';
+
+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 {
+  addMetricReportAssetRowData,
+  generateGetRowFilter,
+  getCustomSort,
+} from './bundle-assets.utils';
+import { ReportMetricAssetRow } from '../../types';
+
+export type BundleAssetsProps = {
+  jobs: Array<Job>;
+  filters?: Record<string, boolean>;
+  search?: string;
+  sortBy?: string;
+  direction?: string;
+  setState: () => void;
+};
+
+export const BundleAssets = (props: BundleAssetsProps) => {
+  const {
+    jobs,
+    filters = undefined,
+    search = undefined,
+    sortBy = undefined,
+    direction = undefined,
+    setState,
+    ...restProps
+  } = props;
+
+  // Get chunks data
+  const { chunks, chunkIds } = useMemo(() => getJobsChunksData(jobs), [jobs]);
+
+  // Get filters
+  const { defaultFilters, allEntriesFilters } = useMemo(
+    () => ({
+      defaultFilters: {
+        [ASSET_FILTERS.CHANGED]: jobs?.length > 1,
+        ...getAssetEntryTypeFilters(true),
+        ...getAssetFileTypeFilters(true),
+      },
+      allEntriesFilters: {
+        [ASSET_FILTERS.CHANGED]: false,
+        ...getAssetEntryTypeFilters(true),
+        ...getAssetFileTypeFilters(true),
+      },
+    }),
+    [jobs],
+  );
+
+  // Get search params data
+  const searchProps = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState,
+  });
+
+  // Get metric rows
+  const { rows, totalRowCount } = useMemo(() => {
+    const result = webpack.compareBySection.assets(jobs, [addMetricReportAssetRowData]);
+    return { rows: result, totalRowCount: result.length };
+  }, [jobs]);
+
+  // Filter rows
+  const filteredRows = useRowsFilter({
+    rows,
+    searchPattern: searchProps.searchPattern,
+    filters: searchProps.filters,
+    getRowFilter: generateGetRowFilter({ chunkIds }),
+  });
+
+  // Sort rows
+  const sortProps = useRowsSort<ReportMetricAssetRow>({
+    rows: filteredRows,
+    initialField: sortBy,
+    initialDirection: direction,
+    getCustomSort,
+    setQueryState: setState,
+  });
+
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
+
+  return (
+    <BundleAssetsComponent
+      {...restProps}
+      {...searchProps}
+      jobs={jobs}
+      chunks={chunks}
+      sort={sortProps.sort}
+      items={sortProps.items}
+      allItems={rows}
+      totalRowCount={totalRowCount}
+      updateSort={sortProps.updateSort}
+      hideEntryInfo={hideEntryInfo}
+      showEntryInfo={showEntryInfo}
+    />
+  );
+};