@bundle-stats/ui 4.4.0-beta.1 → 4.4.0-beta.3

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import get from 'lodash/get';
@@ -6,7 +6,9 @@ import {
   ASSET_ENTRY_TYPE,
   ASSET_FILE_TYPE,
   ASSET_FILTERS,
+  COMPONENT,
   FILE_TYPE_LABELS,
+  SECTIONS,
 } from '@bundle-stats/utils';
 
 import config from '../../config.json';
@@ -15,13 +17,13 @@ import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../../ui/icon';
 import { FileName } from '../../ui/file-name';
 import { HoverCard } from '../../ui/hover-card';
-import { Tooltip } from '../../ui/tooltip';
 import { Tag } from '../../ui/tag';
 import { Filters } from '../../ui/filters';
 import { SortDropdown } from '../../ui/sort-dropdown';
 import { EmptySet } from '../../ui/empty-set';
 import { Toolbar } from '../../ui/toolbar';
 import { AssetInfo } from '../asset-info';
+import { AssetNotPredictive } from '../asset-not-predictive';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableSearch } from '../metrics-table-search';
@@ -80,56 +82,27 @@ const getFilters = ({ compareMode, filters }) => ({
   },
 });
 
-const TooltipNotPredictive = ({ runs }) => (
-  <div className={css.tooltipNotPredictive}>
-    <p className={css.tooltipNotPredictiveText}>File name is the same, but the size has changed:</p>
-    <table className={css.tooltipTable}>
-      <tr>
-        {runs.map(({ name, value }, index) => {
-          const key = index;
-          return (
-            <tr key={key}>
-              <th>{RUNS_LABELS[index]}</th>
-              <td>{name}</td>
-              <td>{value}</td>
-            </tr>
-          );
-        })}
-      </tr>
-    </table>
-  </div>
-);
-
-TooltipNotPredictive.defaultProps = {
-  runs: [],
-};
-
-TooltipNotPredictive.propTypes = {
-  runs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-};
-
-const RowHeader = ({ row, labels, chunks, CustomComponentLink }) => {
+const RowHeader = ({ row, customComponentLink: CustomComponentLink, filters, search }) => {
   const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = row;
-  const [showHoverCard, setHoverCard] = useState(false);
-  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
 
-  const content = useMemo(
-    () => (
-      <span className={css.assetName}>
+  return (
+    <span className={css.assetNameWrapper}>
+      {isNotPredictive && (
+        <HoverCard
+          label={<Icon className={css.notPredictiveIcon} glyph="warning" />}
+          className={css.notPredictive}
+          anchorClassName={css.notPredictiveAnchor}
+        >
+          <AssetNotPredictive runs={runs} labels={RUNS_LABELS} />
+        </HoverCard>
+      )}
+
+      <CustomComponentLink
+        section={SECTIONS.ASSETS}
+        params={{ [COMPONENT.BUNDLE_ASSETS]: { filters, search, entryId: row.key } }}
+        className={css.assetName}
+      >
         <span className={css.assetNameTags}>
-          {isNotPredictive && (
-            <Tooltip className={css.notPredictive} title={<TooltipNotPredictive runs={runs} />}>
-              <Icon className={css.notPredictiveIcon} glyph="warning" />
-            </Tooltip>
-          )}
-          {isChunk && (
-            <Tag
-              className={cx(css.assetNameTag, css.assetNameTagChunk)}
-              title="Chunk"
-              size={Tag.SIZES.SMALL}
-              kind={Tag.KINDS.INFO}
-            />
-          )}
           {isEntry && (
             <Tag
               className={cx(css.assetNameTag, css.assetNameTagEntry)}
@@ -146,27 +119,18 @@ const RowHeader = ({ row, labels, chunks, CustomComponentLink }) => {
               kind={Tag.KINDS.INFO}
             />
           )}
+          {isChunk && (
+            <Tag
+              className={cx(css.assetNameTag, css.assetNameTagChunk)}
+              title="Chunk"
+              size={Tag.SIZES.SMALL}
+              kind={Tag.KINDS.INFO}
+            />
+          )}
         </span>
         <FileName className={css.assetNameText} name={label} />
-      </span>
-    ),
-    [isChunk, isEntry, isInitial, isNotPredictive, runs],
-  );
-
-  if (!showHoverCard) {
-    return <span onMouseEnter={handleOnMouseEnter}>{content}</span>;
-  }
-
-  return (
-    <HoverCard label={content}>
-      <AssetInfo
-        className={css.assetInfo}
-        item={row}
-        labels={labels}
-        chunks={chunks}
-        CustomComponentLink={CustomComponentLink}
-      />
-    </HoverCard>
+      </CustomComponentLink>
+    </span>
   );
 };
 
@@ -198,11 +162,13 @@ export const BundleAssets = (props) => {
     className,
     jobs,
     items,
+    allItems,
     updateFilters,
     resetFilters,
     resetAllFilters,
     totalRowCount,
     filters,
+    entryId,
     hasActiveFilters,
     sortFields,
     sort,
@@ -210,6 +176,7 @@ export const BundleAssets = (props) => {
     search,
     updateSearch,
     customComponentLink: CustomComponentLink,
+    hideEntryInfo,
   } = props;
 
   const dropdownFilters = useMemo(
@@ -230,12 +197,12 @@ export const BundleAssets = (props) => {
     (row) => (
       <RowHeader
         row={row}
-        labels={jobs?.map(({ label }) => label)}
-        chunks={jobs[0]?.meta?.webpack?.chunks || []}
-        CustomComponentLink={CustomComponentLink}
+        customComponentLink={CustomComponentLink}
+        filters={filters}
+        search={search}
       />
     ),
-    [jobs, CustomComponentLink],
+    [CustomComponentLink, filters, search],
   );
 
   const emptyMessage = useMemo(() => (
@@ -248,45 +215,58 @@ export const BundleAssets = (props) => {
   ), [totalRowCount, resetFilters, resetAllFilters]);
 
   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}
+    <>
+      <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}
+              />
+            </FlexStack>
+          )}
+        >
+          <FlexStack space="xxsmall">
+            <MetricsTableSearch
+              className={css.toolbarSearch}
+              placeholder="Search by name"
+              search={search}
+              updateSearch={updateSearch}
+            />
+            <Filters
+              className={css.toolbarFilters}
+              filters={dropdownFilters}
+              hasActiveFilters={hasActiveFilters}
+              onChange={updateFilters}
             />
           </FlexStack>
-        )}
-      >
-        <FlexStack space="xxsmall">
-          <MetricsTableSearch
-            className={css.toolbarSearch}
-            placeholder="Search by name"
-            search={search}
-            updateSearch={updateSearch}
+        </Toolbar>
+        <main>
+          <MetricsTable
+            runs={jobs}
+            items={items}
+            renderRowHeader={renderRowHeader}
+            emptyMessage={emptyMessage}
+            showHeaderSum
+            title={metricsTableTitle}
           />
-          <Filters
-            className={css.toolbarFilters}
-            filters={dropdownFilters}
-            hasActiveFilters={hasActiveFilters}
-            onChange={updateFilters}
-          />
-        </FlexStack>
-      </Toolbar>
-      <main>
-        <MetricsTable
-          runs={jobs}
-          items={items}
-          renderRowHeader={renderRowHeader}
-          emptyMessage={emptyMessage}
-          showHeaderSum
-          title={metricsTableTitle}
+        </main>
+      </section>
+
+      {entryId && (
+        <AssetInfo
+          className={css.assetInfo}
+          item={allItems.find(({ key }) => key === entryId)}
+          labels={jobs?.map(({ label }) => label)}
+          chunks={jobs[0]?.meta?.webpack?.chunks || []}
+          customComponentLink={CustomComponentLink}
+          onClose={hideEntryInfo}
         />
-      </main>
-    </section>
+      )}
+    </>
   );
 };
 
@@ -295,6 +275,7 @@ BundleAssets.defaultProps = {
   totalRowCount: 0,
   hasActiveFilters: false,
   customComponentLink: ComponentLink,
+  entryId: '',
 };
 
 BundleAssets.propTypes = {
@@ -328,7 +309,9 @@ BundleAssets.propTypes = {
   totalRowCount: PropTypes.number,
   filters: PropTypes.shape({
     changed: PropTypes.bool,
+    id: PropTypes.string,
   }).isRequired,
+  entryId: PropTypes.string,
   hasActiveFilters: PropTypes.bool,
   sortFields: PropTypes.shape({
     [PropTypes.string]: PropTypes.shape({
@@ -343,5 +326,9 @@ BundleAssets.propTypes = {
     direction: PropTypes.string,
   }).isRequired,
   updateSort: PropTypes.func.isRequired,
+  allItems: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+  })),
   customComponentLink: PropTypes.elementType,
+  hideEntryInfo: PropTypes.func.isRequired,
 };

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

@@ -8,6 +8,9 @@
   margin-right: -1px; /** collapse border */
 }
 
+.assetNameWrapper {
+}
+
 .assetName {}
 
 .notPredictive {
@@ -15,12 +18,12 @@
   display: inline-block;
   width: var(--space-small);
   height: var(--space-small);
-  vertical-align: middle;
 }
 
+.notPredictiveAnchor {}
+
 .notPredictiveIcon {
   color: var(--color-warning-dark);
-  vertical-align: top;
 }
 
 .assetNameTags {
@@ -41,7 +44,7 @@
 }
 
 .assetNameTagEntry {
-  background: var(--color-info-light);
+  background: var(--color-info-dark);
 }
 
 .assetNameTagEntry::before {
@@ -49,13 +52,17 @@
 }
 
 .assetNameTagInitial {
-  background: var(--color-info-light);
+  background: var(--color-info);
 }
 
 .assetNameTagInitial::before {
   content: 'i';
 }
 
+.assetNameTagChunk {
+  background: var(--color-info-light);
+}
+
 .assetNameTagChunk::before {
   content: 'c';
 }
@@ -65,25 +72,7 @@
   vertical-align: middle;
 }
 
-/* Tooltip not predictive */
-.tooltipNotPredictive {
-  text-align: left;
-}
-
-.tooltipNotPredictiveText {
-  margin-bottom: var(--space-xxxsmall);
-}
-
-.tooltipNotPredictiveName {
-  display: block;
-  line-height: var(--line-height-heading);
-}
-
 .search {
   margin: 0;
   width: 100%;
 }
-
-.assetInfo {
-  min-width: 280px;
-}

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

@@ -8,8 +8,8 @@ export const addRowAssetFlags = (row) => {
   const isEntry = runs.map((run) => run?.isEntry).includes(true);
   const isInitial = runs.map((run) => run?.isInitial).includes(true);
   const isChunk = runs.map((run) => run?.isChunk).includes(true);
-
   const isAsset = !(isEntry || isInitial || isChunk);
+  const fileType = getFileType(row.key);
 
   return {
     ...row,
@@ -17,6 +17,7 @@ export const addRowAssetFlags = (row) => {
     isInitial,
     isChunk,
     isAsset,
+    fileType,
   };
 };
 
@@ -64,7 +65,7 @@ export const getRowFilter = (filters) => (item) => {
     return false;
   }
 
-  if (!filters[`${ASSET_FILE_TYPE}.${getFileType(item.key)}`]) {
+  if (!filters[`${ASSET_FILE_TYPE}.${item.fileType}`]) {
     return false;
   }
 

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 import { ASSET_FILTERS } from '@bundle-stats/utils';
@@ -61,13 +61,19 @@ export const BundleAssets = (props) => {
     getCustomSort,
   });
 
+  const hideEntryInfo = useCallback(() => {
+    setState({ entryId: '' });
+  }, [setState]);
+
   return (
     <BundleAssetsComponent
       jobs={jobs}
       {...restProps}
       {...searchParams}
       {...sortParams}
+      allItems={rows}
       totalRowCount={totalRowCount}
+      hideEntryInfo={hideEntryInfo}
     />
   );
 };

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

@@ -5,29 +5,33 @@ import map from 'lodash/map';
 import max from 'lodash/max';
 import sum from 'lodash/sum';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
-import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
+import { getBundleAssetsFileTypeComponentLink, getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
 import { HorizontalBarChart } from '../../ui/horizontal-bar-chart';
 import { ComponentLink } from '../component-link'
 import { getColors } from '../../utils';
 import { Stack } from '../../layout/stack';
-import { SummaryItem } from '../summary-item';
+import { JobName } from '../job-name';
+import { MetricRunInfo } from '../metric-run-info';
 import css from './bundle-assets-totals-chart-bars.module.css';
 
-const getTooltip = (items, jobs, itemIndex, runIndex) => () => (
-  <SummaryItem
-    className={css.itemTooltip}
-    id={items?.[itemIndex]?.key}
-    data={{
-      current: items?.[itemIndex]?.runs?.[runIndex]?.value || 0,
-      baseline: items?.[itemIndex]?.runs?.[runIndex + 1]?.value || 0,
-    }}
-    showDelta={runIndex < jobs.length - 1}
-    showBaselineValue={runIndex < jobs.length - 1}
-    size="large"
-  />
-);
+const getTooltip = (items, jobs, itemIndex, runIndex) => () => {
+  const metricId = items?.[itemIndex]?.key;
+  const current = items?.[itemIndex]?.runs?.[runIndex]?.value || 0;
+  const baseline = items?.[itemIndex]?.runs?.[runIndex + 1]?.value;
+
+  return (
+    <MetricRunInfo
+      className={css.itemTooltip}
+      metricId={metricId}
+      current={current}
+      baseline={baseline}
+      showMetridDescription={false}
+      size="large"
+    />
+  );
+};
 
 export const BundleAssetsTotalsChartBars = ({
   className,
@@ -60,7 +64,7 @@ export const BundleAssetsTotalsChartBars = ({
   const colors = getColors(max(map(dataGraphs, (values) => values.length)));
 
   return (
-    <Stack className={rootClassName} space="medium">
+    <Stack className={rootClassName} space="small">
       {dataGraphs.map((data, runIndex) => {
         const { internalBuildNumber } = jobs[runIndex];
 
@@ -73,7 +77,7 @@ export const BundleAssetsTotalsChartBars = ({
 
         return (
           <div key={internalBuildNumber || runIndex} className={css.item}>
-            <h3 className={css.itemTitle}>{`Job #${internalBuildNumber}`}</h3>
+            <h3 className={css.itemTitle}><JobName internalBuildNumber={internalBuildNumber} /></h3>
             <HorizontalBarChart
               className={css.itemChart}
               data={{ labels, values }}

package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css

@@ -6,7 +6,7 @@
   position: absolute;
   right: 0;
   bottom: 100%;
-  margin: 0 0 var(--space-xxxsmall);
+  margin: 0 0 2px;
 
   color: var(--color-text-light);
   font-size: var(--size-xsmall);