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

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

@@ -1,31 +1,38 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import {
-  PACKAGE_FILTERS,
-  PACKAGES_SEPARATOR,
-  PACKAGE_ID_SEPARATOR,
-  getBundleModulesBySearch,
-  getBundlePackagesByNameComponentLink,
-} from '@bundle-stats/utils';
+import escapeRegExp from 'lodash/escapeRegExp';
+import { COMPONENT, PACKAGE_FILTERS, PACKAGES_SEPARATOR, SECTIONS } from '@bundle-stats/utils';
 
 import config from '../../config.json';
 import I18N from '../../i18n';
-import { Stack } from '../../layout/stack';
+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 { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
-import { HoverCard } from '../../ui/hover-card';
-import { SortDropdown } from '../../ui/sort-dropdown';
 import { Tag } from '../../ui/tag';
+import { Table } from '../../ui/table';
 import { Toolbar } from '../../ui/toolbar';
-import { FileName } from '../../ui/file-name';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
-import { MetricsTableSearch } from '../metrics-table-search';
+import { MetricsTableExport } from '../metrics-table-export';
+import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTableOptions } from '../metrics-table-options';
 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 { MetricsDisplayGroupBy, MetricsDisplayType } from '../../constants';
+import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
+import { useMetricsDisplayType } from '../../hooks/metrics-display-type';
+
+const DISPLAY_TYPE_GROUPS = {
+  [MetricsDisplayType.TREEMAP]: [MetricsDisplayGroupBy.FOLDER],
+};
 
 const getDropdownFilters = ({ compareMode, filters }) => ({
   [PACKAGE_FILTERS.CHANGED]: {
@@ -39,125 +46,25 @@ const getDropdownFilters = ({ compareMode, filters }) => ({
   },
 });
 
-
-const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponentLink }) => {
-  const fallbackPackagePath = `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}`;
-  const normalizedPackagePath = `${path || fallbackPackagePath}/`;
-  const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
-
+const PackageName = ({ row, packageName, showDetails, EntryComponentLink }) => {
   return (
-    <Stack space="xsmall" className={css.packageHoverCard}>
-      <Stack space="xxxsmall">
-        <h3 className={css.packageHoverCardTitle}>
-          {normalizedName}
-          {packageId && (
-            <span className={css.packageHoverCardTitleIndex}>
-              {`${PACKAGE_ID_SEPARATOR}${packageId}`}
-            </span>
-          )}
-        </h3>
-        <p className={css.packageHoverCardPath}>
-          <FileName className={css.packageHoverCardPathValue} name={normalizedPackagePath} />
-        </p>
-      </Stack>
-
-      <ul className={css.packageHoverCardList}>
-        <li className={css.packageHoverCardItem}>
-          <a
-            href={`https://www.npmjs.com/package/${normalizedName}`}
-            target="_blank"
-            rel="noreferrer"
-          >
-            npmjs.com
-          </a>
-        </li>
-        <li className={css.packageHoverCardItem}>
-          <a
-            href={`https://bundlephobia.com/result?p=${normalizedName}`}
-            target="_blank"
-            rel="noreferrer"
-          >
-            bundlephobia.com
-          </a>
-        </li>
-      </ul>
-
-      <Stack space="xxxsmall" className={css.packageHoverCardActions}>
-        {duplicate && (
-          <div>
-            <CustomComponentLink {...getBundlePackagesByNameComponentLink(normalizedName)}>
-              View all duplicate instances
-            </CustomComponentLink>
-          </div>
-        )}
-
-        <CustomComponentLink {...getBundleModulesBySearch(normalizedPackagePath)}>
-          Search modules by package path
-        </CustomComponentLink>
-      </Stack>
-    </Stack>
-  );
-};
-
-PackagePopoverContent.propTypes = {
-  name: PropTypes.string.isRequired,
-  path: PropTypes.string,
-  fullName: PropTypes.string.isRequired,
-  duplicate: PropTypes.bool.isRequired,
-  CustomComponentLink: PropTypes.elementType.isRequired,
-};
-
-PackagePopoverContent.defaultProps = {
-  path: '',
-};
-
-const PackageName = ({ packageName, path, showDuplicateFlag, row, CustomComponentLink }) => {
-  const [showHoverCard, setHoverCard] = useState(false);
-  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
-
-  const label = useMemo(
-    () => (
-      <>
-        {showDuplicateFlag && row.duplicate && (
-          <Tag
-            className={css.packageNameTagDuplicate}
-            title="Duplicate package"
-            kind={Tag.KINDS.DANGER}
-            size={Tag.SIZES.SMALL}
-          />
-        )}
-        <span className={css.packageNameLabel}>{packageName}</span>
-      </>
-    ),
-    [packageName, showDuplicateFlag, row],
-  );
-
-  if (!showHoverCard) {
-    return (
-      <span className={css.packageName} onMouseEnter={handleOnMouseEnter}>
-        {label}
-      </span>
-    );
-  }
-
-  return (
-    <HoverCard className={css.packageName} label={<span className={css.packageName}>{label}</span>}>
-      <PackagePopoverContent
-        name={packageName}
-        path={path}
-        fullName={row.label}
-        duplicate={row.duplicate}
-        CustomComponentLink={CustomComponentLink}
-      />
-    </HoverCard>
+    <EntryComponentLink entryId={showDetails ? row.key : packageName} className={css.packageName}>
+      {showDetails && row.duplicate && (
+        <Tag
+          className={css.packageNameTagDuplicate}
+          title="Duplicate package"
+          kind={Tag.KINDS.DANGER}
+          size={Tag.SIZES.SMALL}
+        />
+      )}
+      <span className={css.packageNameLabel}>{packageName}</span>
+    </EntryComponentLink>
   );
 };
 
 PackageName.propTypes = {
-  packageName: PropTypes.string.isRequired,
-  path: PropTypes.string.isRequired,
-  showDuplicateFlag: PropTypes.bool.isRequired,
   row: PropTypes.shape({
+    key: PropTypes.string,
     label: PropTypes.string,
     duplicate: PropTypes.bool,
     runs: PropTypes.arrayOf(
@@ -166,23 +73,22 @@ PackageName.propTypes = {
       }),
     ).isRequired,
   }).isRequired,
-  CustomComponentLink: PropTypes.elementType.isRequired,
+  packageName: PropTypes.string.isRequired,
+  showDetails: PropTypes.bool.isRequired,
+  EntryComponentLink: PropTypes.elementType.isRequired,
 };
 
-const RowHeader = ({ row, CustomComponentLink }) => {
+const RowHeader = ({ row, EntryComponentLink }) => {
   const packageNames = row.label.split(PACKAGES_SEPARATOR);
-  const { path } = row.runs[0] || {};
 
   return (
     <span className={css.packageNames}>
       {packageNames.map((packageName, index) => (
         <PackageName
           packageName={packageName}
-          path={path}
-          // Render duplicate flag only for the last entry
-          showDuplicateFlag={index === packageNames.length - 1}
           row={row}
-          CustomComponentLink={CustomComponentLink}
+          showDetails={index === packageNames.length - 1}
+          EntryComponentLink={EntryComponentLink}
         />
       ))}
     </span>
@@ -199,7 +105,81 @@ RowHeader.propTypes = {
       }),
     ).isRequired,
   }).isRequired,
-  CustomComponentLink: PropTypes.elementType.isRequired,
+  EntryComponentLink: PropTypes.elementType.isRequired,
+};
+
+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 = `^${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}
+      />
+    </>
+  );
+};
+
+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 BundlePackages = (props) => {
@@ -212,83 +192,174 @@ export const BundlePackages = (props) => {
     resetAllFilters,
     totalRowCount,
     filters,
-    sortFields,
     sort,
     updateSort,
     search,
     updateSearch,
     hasActiveFilters,
     customComponentLink: CustomComponentLink,
+    entryId,
+    allItems,
+    hideEntryInfo,
+    showEntryInfo,
   } = props;
 
+  const jobLabels = jobs?.map((job) => job?.label);
+
+  const [displayType, setDisplayType] = useMetricsDisplayType(DISPLAY_TYPE_GROUPS);
+
   const dropdownFilters = useMemo(
     () => getDropdownFilters({ compareMode: jobs?.length > 1, filters }),
     [jobs, filters],
   );
 
-  const metricsTableTitle = useMemo(() => (
-    <MetricsTableTitle
-      title={I18N.PACKAGES}
-      info={`${items.length}/${totalRowCount}`}
-      popoverInfo={I18N.PACKAGES_INFO}
-      popoverHref={config.documentation.packages}
-    />
-  ), [items, totalRowCount]);
+  const metricsTableTitle = useMemo(
+    () => (
+      <MetricsTableTitle
+        title={I18N.PACKAGES}
+        info={`${items.length}/${totalRowCount}`}
+        popoverInfo={I18N.PACKAGES_INFO}
+        popoverHref={config.documentation.packages}
+      />
+    ),
+    [items, totalRowCount],
+  );
+
+  const PackageNameCustomComponentLink = useCallback(
+    ({ entryId: packageEntryId, ...assetNameRestProps }) => (
+      <CustomComponentLink
+        section={SECTIONS.PACKAGES}
+        params={{
+          [COMPONENT.BUNDLE_PACKAGES]: {
+            filters,
+            search,
+            entryId: packageEntryId,
+            sortBy: sort.field,
+            direction: sort.direction,
+          },
+        }}
+        {...assetNameRestProps}
+      />
+    ),
+    [CustomComponentLink, filters, search, sort],
+  );
 
   const renderRowHeader = useCallback(
-    (row) => <RowHeader row={row} CustomComponentLink={CustomComponentLink} />,
-    [CustomComponentLink],
+    (row) => <RowHeader row={row} EntryComponentLink={PackageNameCustomComponentLink} />,
+    [PackageNameCustomComponentLink],
+  );
+
+  const emptyMessage = useMemo(
+    () => (
+      <EmptySet
+        resources="packages"
+        filtered={totalRowCount !== 0}
+        handleResetFilters={resetFilters}
+        handleViewAll={resetAllFilters}
+      />
+    ),
+    [totalRowCount, resetFilters, resetAllFilters],
   );
 
-  const emptyMessage = useMemo(() => (
-    <EmptySet
-      resources="packages"
-      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(undefined);
+
+  const handleExportClick = useCallback((sourceType) => {
+    setExportSourceType(sourceType);
+    exportDialog.toggle();
+  }, []);
 
   return (
-    <section className={cx(css.root, className)}>
-      <Toolbar
-        className={css.toolbar}
-        renderActions={({ actionClassName }) => (
-          <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-            <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
-            <MetricsTableOptions
-              handleViewAll={resetAllFilters}
-              handleResetFilters={resetFilters}
+    <>
+      <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.value}
+                groupBy={displayType.groupBy}
+                groups={DISPLAY_TYPE_GROUPS}
+              />
+              <MetricsTableOptions
+                onViewAllClick={resetAllFilters}
+                onResetClick={resetFilters}
+                onExportClick={handleExportClick}
+              />
+            </FlexStack>
+          )}
+        >
+          <FlexStack space="xxsmall">
+            <InputSearch
+              className={css.toolbarSearch}
+              placeholder={SEARCH_PLACEHOLDER}
+              defaultValue={search}
+              onChange={updateSearch}
+            />
+            <Filters
+              filters={dropdownFilters}
+              label={`Filters (${items.length}/${totalRowCount})`}
+              onChange={updateFilters}
+              hasActiveFilters={hasActiveFilters}
             />
           </FlexStack>
-        )}
-      >
-        <FlexStack space="xxsmall">
-          <MetricsTableSearch
-            className={css.toolbarSearch}
-            placeholder="Search by name"
-            search={search}
-            updateSearch={updateSearch}
-          />
-          <Filters
-            filters={dropdownFilters}
-            label={`Filters (${items.length}/${totalRowCount})`}
-            onChange={updateFilters}
-            hasActiveFilters={hasActiveFilters}
-          />
-        </FlexStack>
-      </Toolbar>
-      <main>
-        <MetricsTable
-          runs={jobs}
-          items={items}
-          emptyMessage={emptyMessage}
-          renderRowHeader={renderRowHeader}
-          showHeaderSum
-          title={metricsTableTitle}
+        </Toolbar>
+        <Box outline as="main">
+          {displayType.value === MetricsDisplayType.TABLE && (
+            <MetricsTable
+              runs={jobs}
+              items={items}
+              emptyMessage={emptyMessage}
+              renderRowHeader={renderRowHeader}
+              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 && (
+        <PackageInfo
+          className={css.packageInfo}
+          item={entryItem}
+          labels={jobLabels}
+          customComponentLink={CustomComponentLink}
+          onClose={hideEntryInfo}
         />
-      </main>
-    </section>
+      )}
+
+      <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--packages"
+          />
+        )}
+      </Dialog>
+    </>
   );
 };
 
@@ -297,6 +368,7 @@ BundlePackages.defaultProps = {
   totalRowCount: 0,
   hasActiveFilters: false,
   customComponentLink: ComponentLink,
+  entryId: '',
 };
 
 BundlePackages.propTypes = {
@@ -326,18 +398,20 @@ BundlePackages.propTypes = {
     changed: PropTypes.bool,
   }).isRequired,
   hasActiveFilters: PropTypes.bool,
-  sortFields: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      label: PropTypes.string,
-      defaultDirection: PropTypes.bool,
-    }),
-  }).isRequired,
   sort: PropTypes.shape({
-    sortBy: PropTypes.string,
+    field: PropTypes.string,
     direction: PropTypes.string,
   }).isRequired,
   updateSort: PropTypes.func.isRequired,
   search: PropTypes.string.isRequired,
   updateSearch: PropTypes.func.isRequired,
+  allItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string,
+    }),
+  ).isRequired,
   customComponentLink: PropTypes.elementType,
+  entryId: PropTypes.string,
+  hideEntryInfo: PropTypes.func.isRequired,
+  showEntryInfo: PropTypes.func.isRequired,
 };

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

@@ -2,14 +2,13 @@
   color: var(--color-text-light);
 }
 
-.toolbar {
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .toolbarSearch {
   width: 100%;
   max-width: 240px;
-  margin-right: -1px; /** collapse border */
+}
+
+.hoverCard {
+  max-width: var(--entry-info-hovercard-width);
 }
 
 .packageName {
@@ -41,20 +40,14 @@
   content: 'd';
 }
 
-
-.packageHoverCardTitleIndex {
-  color: var(--color-text-light);
-  font-weight: normal;
-}
-
-.packageHoverCardPathValue {
-  width: 100%;
-  padding: var(--space-xxxsmall);
-  background: var(--color-highlight-warning);
-  font-family: var(--font-family-monospace);
+.root .packageName:hover,
+.root .packageName:active,
+.root .packageName:focus {
+  text-decoration: none;
 }
 
-.packageHoverCardList {
-  padding: 0;
-  list-style: inside;
+.root .packageName:hover .packageNameLabel,
+.root .packageName:active .packageNameLabel,
+.root .packageName:focus .packageNameLabel {
+  text-decoration: underline;
 }

package/src/components/bundle-packages/bundle-packages.utils.js

@@ -1,8 +1,6 @@
 import uniq from 'lodash/uniq';
 import { PACKAGE_FILTERS } from '@bundle-stats/utils';
 
-import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-packages.constants';
-
 // Get a list of duplicate packages across jobs
 export const getDuplicatePackages = (jobs) => {
   const jobsDuplicatePackages = jobs.map((job) => {
@@ -25,21 +23,7 @@ export const getRowFilter = (filters) => (item) => {
   return true;
 };
 
-export const getCustomSort = (sortId) => (item) => {
-  if (sortId === SORT_BY_NAME) {
-    return item.key;
-  }
-
-  if (sortId === SORT_BY_DELTA) {
-    return item?.runs?.[0]?.delta ? Math.abs(item.runs[0].delta) : 0;
-  }
-
-  if (sortId === SORT_BY_SIZE) {
-    return item?.runs?.[0]?.value || 0;
-  }
-
-  return [!item.changed, item.key];
-};
+export const getCustomSort = (item) => [!item.changed, item.key];
 
 export const getAddRowDuplicateFlag = (duplicateJobs) => (row) => ({
   ...row,

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

@@ -6,9 +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 { SORT_BY } from './bundle-packages.constants';
+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;
@@ -50,19 +55,24 @@ export const BundlePackages = (props) => {
 
   const sortParams = useRowsSort({
     rows: filteredRows,
-    sortFields: SORT_BY,
-    sortBy,
-    sortDirection: direction,
+    initialField: sortBy,
+    initialDirection: direction,
     getCustomSort,
+    setQueryState: setState,
   });
 
+  const [hideEntryInfo, showEntryInfo] = useEntryInfo({ setState });
+
   return (
     <BundlePackagesComponent
       jobs={jobs}
       {...restProps}
       {...searchParams}
       {...sortParams}
+      allItems={rows}
       totalRowCount={totalRowCount}
+      hideEntryInfo={hideEntryInfo}
+      showEntryInfo={showEntryInfo}
     />
   );
 };