@bundle-stats/ui 4.2.0-beta.1 → 4.3.0-beta.1

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

@@ -107,17 +107,15 @@ const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
   }
 
   return (
-    <HoverCard label={content} hoverCardClassName={css.nameHoverCard}>
-      {({ close }) => (
-        <ModuleInfo
-          item={row}
-          chunks={chunks}
-          chunkIds={chunkIds}
-          labels={labels}
-          customComponentLink={CustomComponentLink}
-          onClick={close}
-        />
-      )}
+    <HoverCard label={content}>
+      <ModuleInfo
+        className={css.namePopover}
+        item={row}
+        chunks={chunks}
+        chunkIds={chunkIds}
+        labels={labels}
+        customComponentLink={CustomComponentLink}
+      />
     </HoverCard>
   );
 };

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

@@ -25,7 +25,3 @@
   display: inline;
   vertical-align: middle;
 }
-
-.nameHoverCard {
-  max-width: 480px;
-}

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

@@ -35,7 +35,7 @@ export const getCustomSort = (sortBy) => (item) => {
   }
 
   if (sortBy === SORT_BY_DELTA) {
-    return item?.runs?.[0]?.deltaPercentage || 0;
+    return item?.runs?.[0]?.delta ? Math.abs(item.runs[0].delta) : 0;
   }
 
   return [!item.changed, item.key];

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

@@ -24,8 +24,21 @@ import { SORT_BY } from './bundle-modules.constants';
 export const BundleModules = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
 
-  const chunks = uniqBy(jobs.map((job) => job?.meta?.webpack?.chunks || []).flat(), ({ id }) => id);
-  const chunkIds = chunks?.map(({ id }) => id);
+  const { chunks, chunkIds } = useMemo(
+    () => {
+      const bundleChunks = uniqBy(
+        jobs.map((job) => job?.meta?.webpack?.chunks || []).flat(),
+        ({ id }) => id
+      );
+      const bundleChunkIds = bundleChunks?.map(({ id }) => id);
+
+      return {
+        chunks: bundleChunks,
+        chunkIds: bundleChunkIds,
+      };
+    },
+    [jobs],
+  );
 
   const { defaultFilters, allEntriesFilters } = useMemo(
     () => ({

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

@@ -31,7 +31,7 @@ export const getCustomSort = (sortId) => (item) => {
   }
 
   if (sortId === SORT_BY_DELTA) {
-    return item?.runs?.[0]?.deltaPercentage || 0;
+    return item?.runs?.[0]?.delta ? Math.abs(item.runs[0].delta) : 0;
   }
 
   if (sortId === SORT_BY_SIZE) {

package/src/components/metrics-table/index.jsx

@@ -0,0 +1,11 @@
+import React, { useState } from 'react';
+
+import { MetricsTable as BaseComponent } from './metrics-table';
+
+export const MetricsTable = (props) => {
+  const [showAllItems, setShowAllItems] = useState(false);
+
+  return (
+    <BaseComponent {...props} showAllItems={showAllItems}  setShowAllItems={setShowAllItems} />
+  );
+};

package/src/components/metrics-table/metrics-table.jsx

@@ -12,6 +12,7 @@ import { JobName } from '../job-name';
 import styles from './metrics-table.module.css';
 
 const METRIC_TYPE_DATA = getGlobalMetricType(null, METRIC_TYPE_FILE_SIZE);
+const VISIBLE_COUNT = 500;
 
 const getRowsRunTotal = (rows, runIndex) => sum(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
 
@@ -164,6 +165,8 @@ export const MetricsTable = ({
   showHeaderSum,
   headerRows,
   title,
+  showAllItems,
+  setShowAllItems,
   ...restProps
 }) => {
   const { headers, columnClassNames } = useMemo(() => {
@@ -183,6 +186,11 @@ export const MetricsTable = ({
     showHeaderSum && styles.showHeaderSum,
   );
 
+  const showEmpty = isEmpty(items);
+  const showItems = !showEmpty;
+  const hasHiddenItems = items?.length > VISIBLE_COUNT;
+  const visibleItems = !hasHiddenItems || showAllItems ? items : items?.slice(0, VISIBLE_COUNT);
+
   return (
     <Table className={rootClassName} compact {...restProps}>
       <Table.THead>
@@ -201,17 +209,46 @@ export const MetricsTable = ({
         })}
       </Table.THead>
       <Table.TBody>
-        {!isEmpty(items) ? (
-          items.map((item) => (
-            <MetricsTableRow key={item.key} item={item} renderRowHeader={renderRowHeader} />
-          ))
-        ) : (
+        {showEmpty && (
           <Table.Tr>
             <Table.Td className={styles.empty} colSpan={columnClassNames?.length || 1}>
               {emptyMessage}
             </Table.Td>
           </Table.Tr>
         )}
+
+        {showItems && (
+          <>
+            {visibleItems.map((item) => (
+              <MetricsTableRow key={item.key} item={item} renderRowHeader={renderRowHeader} />
+            ))}
+
+            {hasHiddenItems && (
+              <Table.Tr>
+                <Table.Td className={styles.showAllItems} colSpan={columnClassNames?.length || 1}>
+                  {showAllItems ? (
+                      <button
+                        onClick={() => setShowAllItems(false)}
+                        type="button"
+                        className={styles.showAllItemsButton}
+                      >
+                        Show less
+                      </button>
+                    ) : (
+                      <button
+                        onClick={() => setShowAllItems(true)}
+                        type="button"
+                        className={styles.showAllItemsButton}
+                      >
+                        Show all
+                      </button>
+                    )
+                  }
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </>
+        )}
       </Table.TBody>
     </Table>
   );

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

@@ -15,6 +15,10 @@
   width: 100%;
 }
 
+.tableHeaderRunMetric {
+  text-transform: none;
+}
+
 .root .value {
   padding-left: var(--space-large);
   text-align: right;
@@ -67,6 +71,29 @@
   text-align: center;
 }
 
+.root .showAllItems {
+  background: none !important;
+  text-align: center;
+}
+
+/** show all */
+.showAllItemsButton {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: var(--space-xxxsmall);
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.showAllItemsButton:hover,
+.showAllItemsButton:focus,
+.showAllItemsButton:active {
+  color: var(--color-primary-dark);
+}
+
 /** Breakpoints */
 .root tr {
   display: flex;

package/src/components/module-info/module-info.jsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
-import { getBundleModulesByChunk, getBundleModulesBySearch } from '@bundle-stats/utils';
+import { getBundleModulesByChunk } from '@bundle-stats/utils';
 
 import { Stack } from '../../layout/stack';
-import { FlexStack } from '../../layout/flex-stack';
 import { FileName } from '../../ui/file-name';
-import { Tag } from '../../ui/tag';
 import { ComponentLink } from '../component-link';
 import css from './module-info.module.css';
 
@@ -24,34 +21,25 @@ export const ModuleInfo = (props) => {
   } = props;
 
   return (
-    <Stack space="small" className={cx(css.root, className)}>
-      {item.runs.map((run, index) => (
-        <Stack space="xsmall" key={`module-info-${run?.name || index}-${index}`} className={css.run}>
-          <Stack space="xxxsmall">
-            <FlexStack space="xxxsmall" alignItems="center" as="h4" className={css.title}>
-              <span>{labels[index]}</span>
-              <Tag className={css.titleTag}>{index === 0 ? 'current' : 'baseline'}</Tag>
-            </FlexStack>
-            <FileName className={css.fileName} as="code" name={run?.name || '-'} />
-          </Stack>
+    <Stack space="xsmall" className={className}>
+      {item.runs.map((run, index) => {
+        const TitleComponent = index !== 0 ? 'h4' : 'h3';
+        const key = `module-info-${run?.name || index}-${index}`;
 
-          {/**
-            * Render chunks only for the current run
-            * we do not have the correct chunk ids for baselines
-            */}
-          {index === 0 && !isEmpty(run?.chunkIds) && (
-            <Stack className={css.chunks}>
-              <h5>Chunks</h5>
-              <ul className={css.list}>
-              {run.chunkIds.map((chunkId) => {
-                const chunk = chunks?.find(({ id }) => id === chunkId);
+        return (
+          <Stack space="xxxsmall" key={key}>
+            <TitleComponent>{labels[index]}</TitleComponent>
+            {index === 0 && !isEmpty(run?.chunkIds) && (
+              <div className={css.chunks}>
+                <span className={css.chunksTitle}>Chunks:</span>
+                {run.chunkIds.map((chunkId) => {
+                  const chunk = chunks?.find(({ id }) => id === chunkId);
 
-                if (!chunk) {
-                  return null;
-                }
+                  if (!chunk) {
+                    return null;
+                  }
 
-                return (
-                  <li>
+                  return (
                     <CustomComponentLink
                       {...getBundleModulesByChunk(chunkIds, chunkId)}
                       onClick={onClick}
@@ -59,33 +47,15 @@ export const ModuleInfo = (props) => {
                     >
                       {chunk.name}
                     </CustomComponentLink>
-                  </li>
-                );
-              })}
-              </ul>
-            </Stack>
-          )}
+                  );
+                })}
+              </div>
+            )}
 
-          {run?.reasons && (
-            <Stack>
-              <h5>Reasons</h5>
-              <ul className={css.list}>
-                {run.reasons.map((reason) => (
-                  <li key={reason}>
-                    <CustomComponentLink
-                      {...getBundleModulesBySearch(`^${reason}$`)}
-                      onClick={onClick}
-                      className={css.reasonLink}
-                      >
-                      <FileName name={reason} className={css.reason} />
-                    </CustomComponentLink>
-                  </li>
-                ))}
-              </ul>
-            </Stack>
-          )}
-        </Stack>
-      ))}
+            <FileName className={css.fileName} as="code" name={run?.name || '-'} />
+          </Stack>
+        );
+      })}
     </Stack>
   );
 };

package/src/components/module-info/module-info.module.css

@@ -1,40 +1,21 @@
-.titleTag {
-  border: 1px solid var(--color-outline);
-  background: var(--color-highlight);
-  color: var(--color-text-light);
+.chunksTitle {
+  margin-right: var(--space-xxxsmall);
 }
 
-.run:first-child .title {
-  font-size: var(--size-xlarge);
+.chunksItems {
+  display: inline;
 }
 
 .chunksItem {
   overflow-wrap: break-word;
 }
 
+.chunksItem + .chunksItem {
+  margin-left: var(--space-xxxsmall);
+}
+
 .fileName {
   max-width: 100%;
   padding: 2px;
   background: var(--color-highlight-warning);
 }
-
-.reasonLink {
-  text-decoration: underline;
-}
-
-.reasonLink .reason {
-  text-decoration: inherit;
-}
-
-.reason {
-  display: inline;
-}
-
-.list {
-  padding: 0 0 0 var(--space-small);
-  list-style: outside;
-}
-
-.list li::marker {
-  color: var(--color-text-ultra-light);
-}

package/src/components/summary-item/summary-item.jsx

@@ -63,7 +63,7 @@ export const SummaryItem = ({
   const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
 
   return (
-    <Stack space="xxxsmall" as={Component} className={rootClassName} {...props}>
+    <Stack space="xxsmall" as={Component} className={rootClassName} {...props}>
       <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
         <span>
           {metric.label}

package/src/components/summary-item/summary-item.module.css

@@ -6,6 +6,11 @@
   white-space: nowrap;
 }
 
+.titleIcon {
+  margin-top: -4px !important;
+  margin-bottom: -4px !important;
+}
+
 .currentMetric {
   color: var(--color-heading);
   font-size: var(--size-large);

package/src/css/variables.css

@@ -23,8 +23,8 @@
   --size-xxlarge: 1.424rem;
   --size-xxxlarge: 1.602rem;
 
-  --line-height: 1.66em;
-  --line-height-heading: 1.33em;
+  --line-height: 1.66;
+  --line-height-heading: 1.33;
 
   /*
    * Color scheme:

package/src/hooks/search-params.js

@@ -1,4 +1,4 @@
-import { useCallback, useLayoutEffect, useReducer } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useReducer } from 'react';
 import isEqual from 'lodash/isEqual';
 import merge from 'lodash/merge';
 
@@ -150,14 +150,26 @@ export const useSearchParams = ({
     dispatch({ type: ACTION_RESET_ALL });
   }, [dispatch]);
 
-  return {
-    search,
-    searchPattern,
-    filters,
-    hasActiveFilters: !isEqual(allEntriesFilters, filters),
-    updateSearch: handleUpdateSearch,
-    updateFilters: handleUpdateFilters,
-    resetFilters: handleResetFilters,
-    resetAllFilters: handleResetAllFilters,
-  };
+  return useMemo(
+    () => ({
+      search,
+      searchPattern,
+      filters,
+      hasActiveFilters: !isEqual(allEntriesFilters, filters),
+      updateSearch: handleUpdateSearch,
+      updateFilters: handleUpdateFilters,
+      resetFilters: handleResetFilters,
+      resetAllFilters: handleResetAllFilters,
+    }),
+    [
+      search,
+      searchPattern,
+      filters,
+      allEntriesFilters,
+      handleUpdateSearch,
+      handleUpdateFilters,
+      handleResetFilters,
+      handleResetAllFilters,
+    ],
+  );
 };

package/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["src/**/*"],
+  "compilerOptions": {
+    "jsx": "react"
+  }
 }

package/types/components/metrics-table/index.d.ts

@@ -1 +1 @@
-export * from "./metrics-table";
+export function MetricsTable(props: any): JSX.Element;

package/types/components/metrics-table/metrics-table.d.ts

@@ -1,4 +1,4 @@
-export function MetricsTable({ className, renderRowHeader, runs, items, emptyMessage, showHeaderSum, headerRows, title, ...restProps }: {
+export function MetricsTable({ className, renderRowHeader, runs, items, emptyMessage, showHeaderSum, headerRows, title, showAllItems, setShowAllItems, ...restProps }: {
     [x: string]: any;
     className: any;
     renderRowHeader: any;
@@ -8,6 +8,8 @@ export function MetricsTable({ className, renderRowHeader, runs, items, emptyMes
     showHeaderSum: any;
     headerRows: any;
     title: any;
+    showAllItems: any;
+    setShowAllItems: any;
 }): JSX.Element;
 export namespace MetricsTable {
     namespace defaultProps {

package/src/components/metrics-table/index.js

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