@bundle-stats/ui 4.3.0-beta.3 → 4.3.0-rc.1

package/src/app/app.jsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
 import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-dom';
 import { COMPONENT } from '@bundle-stats/utils';
 
@@ -70,24 +71,34 @@ JobsProvider.propTypes = {
 const OverviewContent = () => {
   const { jobs } = useContext(JobsContext);
 
-  const duplicatePackagesInsight = jobs[0].insights?.webpack?.duplicatePackagesV3;
-  const newPackagesInsight = jobs[0].insights?.webpack?.newPackages;
+  const insightsByName = useMemo(() => {
+    const webpackInsights = jobs?.[0]?.insights?.webpack;
+
+    if (!webpackInsights) {
+      return null
+    }
+
+    const res = {
+      ...(webpackInsights.duplicatePackagesV3 && { duplicatePackages: webpackInsights.duplicatePackagesV3 }),
+      ...(webpackInsights.newPackages && { newPackages: webpackInsights.newPackages }),
+    };
+
+    if (isEmpty(res)) {
+      return null;
+    }
+
+    return res;
+  }, [jobs]);
 
-  console.info(duplicatePackagesInsight, newPackagesInsight);
 
   return (
     <Stack space="medium">
-      {(duplicatePackagesInsight || newPackagesInsight) && (
+      {insightsByName && (
         <Container>
           <Stack space="xsmall">
             <MetricsTableTitle title="Insights" />
             <Box padding="small" outline>
-              <Insights
-                duplicatePackages={duplicatePackagesInsight}
-                newPackages={newPackagesInsight}
-                summary={jobs[0].summary?.webpack}
-                showDelta={jobs.length > 1}
-              />
+              <Insights insights={insightsByName} />
             </Box>
           </Stack>
         </Container>
@@ -114,6 +125,7 @@ const AssetsContent = () => {
           keys={METRICS_WEBPACK_ASSETS}
           data={jobs?.[0]?.summary}
           showSummaryItemDelta={jobs?.length !== 1}
+          showSummaryItemBaseline={jobs?.length !== 1}
         />
         <Box outline>
           <BundleAssets jobs={jobs} setState={bundleStatsSetState} {...bundleStatsState} />
@@ -136,6 +148,7 @@ const ModulesContent = () => {
           keys={METRICS_WEBPACK_MODULES}
           data={jobs?.[0]?.summary}
           showSummaryItemDelta={jobs?.length !== 1}
+          showSummaryItemBaseline={jobs?.length !== 1}
         />
         <Box outline>
           <BundleModules jobs={jobs} setState={bundleModulesSetState} {...bundleModulesState} />
@@ -158,6 +171,7 @@ const PackagesContent = () => {
           keys={METRICS_WEBPACK_PACKAGES}
           data={jobs?.[0]?.summary}
           showSummaryItemDelta={jobs?.length !== 1}
+          showSummaryItemBaseline={jobs?.length !== 1}
         />
         <Box outline>
           <BundlePackages jobs={jobs} {...bundlePackagesState} setState={bundlePackagesSetState} />
@@ -187,6 +201,7 @@ const AppComponent = ({ version, jobs }) => {
             keys={METRICS_WEBPACK_GENERAL}
             data={jobs[0].summary}
             showSummaryItemDelta={jobs.length !== 1}
+            showSummaryItemBaseline={jobs?.length !== 1}
           />
         </Container>
 

package/src/assets/icons/more-vertical.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="1"></circle>
+  <circle cx="12" cy="5" r="1"></circle>
+  <circle cx="12" cy="19" r="1"></circle>
+</svg>

package/src/assets/icons.svg

@@ -40,6 +40,11 @@
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu" id="menu" xmlns="http://www.w3.org/2000/svg">
 <path d="M3 12h18M3 6h18M3 18h18"/>
 </symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="more-vertical" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="1"/>
+<circle cx="12" cy="5" r="1"/>
+<circle cx="12" cy="19" r="1"/>
+</symbol>
 <symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg">
 <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
 <path d="M0 0h24v24H0z" fill="none"/>

package/src/assets/icons.svg.jsx

@@ -151,6 +151,20 @@ export const SvgIcons = (props) => (
     >
       <path d="M3 12h18M3 6h18M3 18h18" />
     </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      viewBox="0 0 24 24"
+      id="more-vertical"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="12" cy="5" r="1" />
+      <circle cx="12" cy="19" r="1" />
+    </symbol>
     <symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg">
       <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z" />
       <path d="M0 0h24v24H0z" fill="none" />

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

@@ -1,9 +1,21 @@
-.fileName {
-  max-width: 100%;
-  padding: 2px;
-  background: var(--color-highlight-warning);
+.assetNameTag {
+  color: var(--color-background);
 }
 
-.viewModules {
-  display: block;
+.assetNameTag:hover,
+.assetNameTag:active,
+.assetNameTag:focus {
+  color: var(--color-background);
+}
+
+.assetNameTagEntry {
+  background: var(--color-info-dark);
+}
+
+.assetNameTagInitial {
+  background: var(--color-info);
+}
+
+.assetNameTagChunk {
+  background: var(--color-info-light);
 }

package/src/components/asset-info/asset-info.stories.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { AssetInfo } from '.';
+
+export default {
+  title: 'Components/AssetInfo',
+  component: AssetInfo,
+  decorators: [getWrapperDecorator()],
+};
+
+const RUNS = [
+  {
+    name: 'static/vendor.abcd1234.js',
+    value: 982690,
+    chunkId: '1',
+  },
+  {
+    name: 'static/vendor.defg5678.js',
+    value: 1022530,
+    displayValue: '998.56KiB',
+    chunkId: '2',
+  },
+];
+
+export const Default = () => (
+  <AssetInfo
+    item={{
+      label: 'static/vendor.js',
+      changed: true,
+      isChunk: true,
+      isEntry: true,
+      isInitial: true,
+      isNotPredicative: false,
+      runs: RUNS,
+    }}
+    labels={['Job #2', 'Job #1']}
+  />
+);
+
+export const WithChunks = () => (
+  <AssetInfo
+    item={{
+      label: 'static/vendor.js',
+      changed: true,
+      isChunk: true,
+      isEntry: true,
+      isInitial: true,
+      isNotPredicative: false,
+      runs: RUNS,
+    }}
+    chunks={[
+      {
+        id: '1',
+        name: 'vendor',
+      },
+      {
+        id: '2',
+        name: 'app~common~utils~shared',
+      },
+    ]}
+    labels={['Job #2', 'Job #1']}
+  />
+);

package/src/components/asset-info/asset-info.tsx

@@ -0,0 +1,133 @@
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+import noop from 'lodash/noop';
+import {
+  MetricRunInfo,
+  getBundleModulesByChunk,
+  getBundleAssetsByEntryType,
+  getModuleFileType,
+} from '@bundle-stats/utils';
+import { Asset, MetaChunk } from '@bundle-stats/utils/types/webpack';
+
+import { FlexStack } from '../../layout/flex-stack';
+import { Tag } from '../../ui/tag';
+import { ComponentLink } from '../component-link';
+import { EntryInfo } from '../entry-info';
+import css from './asset-info.module.css';
+
+interface ChunkModulesLinkProps {
+  as: React.ElementType;
+  chunks: Array<MetaChunk>;
+  chunkId: string;
+  name: string;
+}
+
+const ChunkModulesLink = ({
+  as: Component,
+  chunks,
+  chunkId,
+  name,
+  onClick,
+}: ChunkModulesLinkProps & React.ComponentProps<'a'>) => {
+  const chunk = chunks?.find(({ id }) => id === chunkId);
+
+  if (!chunk) {
+    return null;
+  }
+
+  const chunkIds = chunks.map(({ id }) => id);
+  const fileType = getModuleFileType(name);
+
+  return (
+    <Component
+      className={css.viewModules}
+      {...getBundleModulesByChunk(chunkIds, chunkId, fileType)}
+      onClick={onClick}
+    >
+      View chunk modules
+    </Component>
+  );
+};
+
+interface AssetInfoProps {
+  item: {
+    label: string;
+    changed?: boolean;
+    isChunk?: boolean;
+    isEntry?: boolean;
+    isInitial?: boolean;
+    isNotPredicative?: boolean;
+    runs: Array<Asset & MetricRunInfo>;
+  };
+  chunks?: Array<MetaChunk>;
+  labels: Array<string>;
+  customComponentLink?: React.ElementType;
+}
+
+export const AssetInfo = (props: AssetInfoProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    chunks = null,
+    customComponentLink: CustomComponentLink = ComponentLink,
+    item,
+    labels,
+    onClick = noop,
+  } = props;
+
+  const currentRun = item.runs?.[0];
+
+  const tags = useMemo(() => {
+    if (!item.isEntry && !item.isInitial && !item.isChunk) {
+      return null;
+    }
+
+    return (
+      <FlexStack space="xxxsmall" alignItems="center" className={css.tags}>
+        {item.isEntry && (
+          <Tag
+            as={CustomComponentLink}
+            {...getBundleAssetsByEntryType('entry')}
+            onClick={onClick}
+            className={cx(css.assetNameTag, css.assetNameTagEntry)}
+          >
+            Entrypoint
+          </Tag>
+        )}
+        {item.isInitial && (
+          <Tag
+            as={CustomComponentLink}
+            {...getBundleAssetsByEntryType('initial')}
+            onClick={onClick}
+            className={cx(css.assetNameTag, css.assetNameTagInitial)}
+          >
+            Initial
+          </Tag>
+        )}
+        {item.isChunk && (
+          <Tag
+            as={CustomComponentLink}
+            {...getBundleAssetsByEntryType('chunk')}
+            onClick={onClick}
+            className={cx(css.assetNameTag, css.assetNameTagChunk)}
+          >
+            Chunk
+          </Tag>
+        )}
+      </FlexStack>
+    );
+  }, [item]);
+
+  return (
+    <EntryInfo item={item} labels={labels} tags={tags} className={cx(css.root, className)}>
+      {currentRun?.chunkId && chunks && (
+        <ChunkModulesLink
+          as={CustomComponentLink}
+          chunks={chunks}
+          chunkId={currentRun?.chunkId}
+          name={currentRun?.name}
+          onClick={onClick}
+        />
+      )}
+    </EntryInfo>
+  );
+};

package/src/components/asset-not-predictive/asset-not-predictive.module.css

@@ -0,0 +1,3 @@
+.tableValue {
+  text-align: right;
+}

package/src/components/asset-not-predictive/asset-not-predictive.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { AssetNotPredictive } from '.';
+
+export default {
+  title: 'Components/AssetNotPredictive',
+  component: AssetNotPredictive,
+};
+
+export const Default = () => <AssetNotPredictive />;
+
+const RUNS = [
+  {
+    name: 'static/vendor.abcd1234.js',
+    value: 1024 * 1024 - 1,
+  },
+  {
+    name: 'static/vendor.abcd1234.js',
+    value: 1024 * 1024,
+  },
+] as any;
+
+export const WithRuns = () => <AssetNotPredictive runs={RUNS} labels={['Job 2', 'Job 1']} />;

package/src/components/asset-not-predictive/asset-not-predictive.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import cx from 'classnames';
+import type { Asset } from '@bundle-stats/utils/types/webpack';
+
+import { Stack } from '../../layout/stack';
+import { Table } from '../../ui/table';
+import css from './asset-not-predictive.module.css';
+
+interface AssetNotPredictiveProps {
+  runs?: Array<Asset>;
+  labels?: Array<string>
+}
+
+export const AssetNotPredictive = (props: AssetNotPredictiveProps & React.ComponentProps<'div'>) => {
+  const { className = '', runs = null, labels = null, ...restProps } = props;
+
+  return (
+    <Stack space="xsmall" {...restProps} className={cx(css.root, className)}>
+      <p className={css.text}>
+        Asset file name is the same, but the size has changed.
+      </p>
+      {runs && (
+        <Table outline compact>
+          <Table.THead>
+            <Table.Tr>
+              <Table.Th>&nbsp;</Table.Th>
+              <Table.Th>File name</Table.Th>
+              <Table.Th className={css.tableValue}>Size</Table.Th>
+            </Table.Tr>
+          </Table.THead>
+          <Table.TBody>
+            {runs.map(({ name, value }, index) => (
+              <Table.Tr key={name}>
+                <Table.Th>{labels?.[index]}</Table.Th>
+                <Table.Td>{name}</Table.Td>
+                <Table.Td className={css.tableValue}>{value}</Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.TBody>
+        </Table>
+      )}
+    </Stack>
+  );
+};

package/src/components/asset-not-predictive/index.ts

@@ -0,0 +1 @@
+export * from './asset-not-predictive';

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

@@ -15,13 +15,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 +80,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 { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = row;
   const [showHoverCard, setHoverCard] = useState(false);
   const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
 
+  const contentIsNotPredictive = useMemo(() => {
+    if (!isNotPredictive) {
+      return null;
+    }
+
+    return (
+      <HoverCard label={<Icon className={css.notPredictiveIcon} glyph="warning" />} className={css.notPredictive} anchorClassName={css.notPredictiveAnchor}>
+        <AssetNotPredictive runs={runs} labels={RUNS_LABELS} />
+      </HoverCard>
+    );
+  }, [isNotPredictive, runs]);
+
   const content = useMemo(
     () => (
       <span 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 +117,46 @@ 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],
+    [isChunk, isEntry, isInitial, runs],
   );
 
   if (!showHoverCard) {
-    return <span onMouseEnter={handleOnMouseEnter}>{content}</span>;
+    return (
+      <span className={css.assetNameWrapper}>
+        {contentIsNotPredictive}
+        <span onMouseEnter={handleOnMouseEnter}>{content}</span>
+      </span>
+    );
   }
 
   return (
-    <HoverCard label={content}>
-      <AssetInfo
-        className={css.assetInfo}
-        item={row}
-        labels={labels}
-        chunks={chunks}
-        CustomComponentLink={CustomComponentLink}
-      />
-    </HoverCard>
+    <span className={css.assetNameWrapper}>
+      {contentIsNotPredictive}
+      <HoverCard label={content} hoverCardClassName={css.hoverCard}>
+        {({ close }) =>  (
+          <AssetInfo
+            className={css.assetInfo}
+            item={row}
+            labels={labels}
+            chunks={chunks}
+            CustomComponentLink={CustomComponentLink}
+            onClick={close}
+          />
+        )}
+      </HoverCard>
+    </span>
   );
 };
 

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,11 @@
   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);
+.hoverCard {
+  max-width: var(--entry-info-hovercard-width);
 }
 
 .search {
   margin: 0;
   width: 100%;
 }
-
-.assetInfo {
-  min-width: 280px;
-}