@bundle-stats/ui 4.23.0-beta.1 → 4.23.0-beta.11

package/src/app/app.jsx

@@ -2,6 +2,7 @@ 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 { PortalContext } from 'ariakit/portal';
 import { COMPONENT } from '@bundle-stats/utils';
 
 import { URLS } from '../constants';
@@ -13,11 +14,13 @@ import { Insights } from '../components/insights';
 import { MetricChangeLegend, MetricsTableTitle } from '../components';
 import { Summary } from '../components/summary';
 import { Box } from '../layout/box';
+import { FlexStack } from '../layout/flex-stack';
 import { Footer } from '../layout/footer';
 import { Stack } from '../layout/stack';
 import { Container } from '../ui/container';
 import { Tabs } from '../ui/tabs';
 import { QueryStateProvider, useComponentQueryState } from '../query-state';
+import { usePortalRoot } from '../utils/portal';
 import I18N from '../i18n';
 import { Header } from './header';
 import css from './app.module.css';
@@ -136,6 +139,20 @@ const PackagesRoute = () => {
   );
 };
 
+/**
+ * Render the overlays (hovercards, tooltips) of the content above the tabs
+ * (metric change legend, summary) above the sticky tabs
+ */
+const RaisedOverlaysProvider = ({ children }) => {
+  const portalRoot = usePortalRoot(css.raisedOverlaysPortal);
+
+  return <PortalContext.Provider value={portalRoot}>{children}</PortalContext.Provider>;
+};
+
+RaisedOverlaysProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
 const AppComponent = ({ version, jobs }) => {
   if (jobs?.length === 0) {
     return (
@@ -150,18 +167,20 @@ const AppComponent = ({ version, jobs }) => {
   return (
     <JobsProvider jobs={jobs}>
       <Layout jobs={jobs} version={version}>
-        <Container className={css.metricChangeLegendContainer}>
-          <div className={css.metricChangeLegendContainerInner}>
-            <MetricChangeLegend />
-          </div>
-        </Container>
-        <Container className={css.summaryContainer}>
-          <Summary
-            data={jobs[0].summary}
-            showSummaryItemDelta={jobs.length !== 1}
-            showSummaryItemBaseline={jobs?.length !== 1}
-          />
-        </Container>
+        <RaisedOverlaysProvider>
+          <Container className={css.metricChangeLegendContainer}>
+            <FlexStack justifyContent="flex-end">
+              <MetricChangeLegend />
+            </FlexStack>
+          </Container>
+          <Container className={css.summaryContainer}>
+            <Summary
+              data={jobs[0].summary}
+              showSummaryItemDelta={jobs.length !== 1}
+              showSummaryItemBaseline={jobs?.length !== 1}
+            />
+          </Container>
+        </RaisedOverlaysProvider>
 
         <Container className={css.tabsContainer}>
           <Tabs className={css.tabs}>

package/src/app/app.module.css

@@ -22,16 +22,16 @@
   padding-bottom: var(--space-xxsmall);
 }
 
-.metricChangeLegendContainerInner {
-  display: flex;
-  justify-content: flex-end;
-}
-
 .summaryContainer {
   padding-top: var(--space-xxsmall);
   padding-bottom: var(--space-xxsmall);
 }
 
+/** legend and summary overlays: above the sticky tabs, below the header */
+.raisedOverlaysPortal {
+  --layer-overlay: calc(var(--layer-xhigh) + 2);
+}
+
 .tabsContainer {
   border-bottom: 1px solid var(--color-outline);
   background: var(--color-light);
@@ -42,11 +42,13 @@
 }
 
 .tabActive {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition-duration: var(--transition-duration-in);
 }
 
 .tabActive::after {
-  background: currentColor;
+  opacity: 1;
+  transition-duration: var(--transition-duration-in);
 }
 
 .tabsContent {
@@ -62,7 +64,8 @@
 
   .header {
     position: fixed;
-    z-index: calc(var(--layer-xhigh) + 2);
+    /** above the sticky tabs, entry info and the entry info overlays */
+    z-index: calc(var(--layer-xhigh) + 3);
     left: 0;
     top: 0;
     right: 0;
@@ -72,6 +75,7 @@
   .tabsContainer {
     position: sticky;
     top: var(--header-height);
-    z-index: calc(var(--layer-high));
+    /** above the overlays (tooltips, hovercards, dropdowns), except the legend and summary overlays */
+    z-index: var(--layer-xhigh);
   }
 }

package/src/app/header/header.module.css

@@ -11,14 +11,12 @@
   border-radius: 50%;
   opacity: 0.8;
   color: var(--color-text-ultra-dark);
-  transition: var(--transition-out);
 }
 
-.toolsGitHub:hover,
 .toolsGitHub:focus,
+.toolsGitHub:hover,
 .toolsGitHub:active {
   opacity: 1;
-  transition: var(--transition-in);
 }
 
 .toolsGitHubIcon {

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

@@ -1,6 +1,5 @@
 .notPredictive {
-  margin-right: var(--space-xxsmall);
-  display: inline-block;
+  flex: 0 0 auto;
   width: var(--space-small);
   height: var(--space-small);
 }
@@ -13,20 +12,22 @@
   max-width: 480px;
 }
 
-.metaTags {
-  display: inline;
-  margin-right: var(--space-xxxsmall);
+.link {
+  flex: 1 1 auto;
 }
 
-.metaTag + .metaTag {
-  margin-left: calc(var(--space-xxxsmall) / 2);
+.tags {
+  flex: 0 0 auto;
+  display: inline-flex;
+  gap: 1px;
 }
 
-.metaTags:empty {
+.tags:empty {
   display: none;
 }
 
-.nameText {
-  display: inline-block;
+.name {
+  flex: 1 1 auto;
   vertical-align: middle;
+  text-decoration: inherit;
 }

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

@@ -1,5 +1,6 @@
 import React, { ElementType } from 'react';
 
+import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../../ui/icon';
 import { FileName } from '../../ui/file-name';
 import { HoverCard } from '../../ui/hover-card';
@@ -24,7 +25,7 @@ export const AssetName = (props: AssetNameProps) => {
   const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = row;
 
   return (
-    <span className={className}>
+    <FlexStack as="span" inline alignItems="center" gap="xxxsmall" className={className}>
       {isNotPredictive && (
         <HoverCard
           label={<Icon className={css.notPredictiveIcon} glyph={Icon.ICONS.WARNING} />}
@@ -35,25 +36,27 @@ export const AssetName = (props: AssetNameProps) => {
         </HoverCard>
       )}
 
-      <EntryComponentLink entryId={row.key} className={css.name}>
-        <span className={css.metaTags}>
+      <FlexStack
+        as={EntryComponentLink}
+        entryId={row.key}
+        inline
+        alignItems="center"
+        gap="xxxsmall"
+        className={css.link}
+      >
+        <span className={css.tags}>
           {isEntry && (
-            <AssetMetaTag className={css.metaTag} title="Entrypoint" tag="entry" status={isEntry} />
+            <AssetMetaTag className={css.tag} title="Entrypoint" tag="entry" status={isEntry} />
           )}
           {isInitial && (
-            <AssetMetaTag
-              className={css.metaTag}
-              title="Initial"
-              tag="initial"
-              status={isInitial}
-            />
+            <AssetMetaTag className={css.tag} title="Initial" tag="initial" status={isInitial} />
           )}
           {isChunk && (
-            <AssetMetaTag className={css.metaTag} title="Chunk" tag="chunk" status={isChunk} />
+            <AssetMetaTag className={css.tag} title="Chunk" tag="chunk" status={isChunk} />
           )}
         </span>
-        <FileName className={css.nameText} name={label} />
-      </EntryComponentLink>
-    </span>
+        <FileName className={css.name} name={label} />
+      </FlexStack>
+    </FlexStack>
   );
 };

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

@@ -3,18 +3,6 @@
   max-width: 240px;
 }
 
-.root .assetName:hover,
-.root .assetName:active,
-.root .assetName:focus {
-  text-decoration: none;
-}
-
-.root .assetName:hover .assetNameText,
-.root .assetName:active .assetNameText,
-.root .assetName:focus .assetNameText {
-  text-decoration: underline;
-}
-
 .search {
   margin: 0;
   width: 100%;

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

@@ -26,6 +26,7 @@ import { MetricsTable } from '../metrics-table';
 import { MetricsTableExport } from '../metrics-table-export';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
+import { MetricsTableRowCount } from '../metrics-table-row-count';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
@@ -164,7 +165,7 @@ export const BundleAssets = (props: BundleAssetsProps) => {
     () => (
       <MetricsTableTitle
         title={I18N.ASSETS}
-        info={`${items.length}/${totalRowCount}`}
+        info={<MetricsTableRowCount count={items.length} total={totalRowCount} />}
         popoverInfo={I18N.ASSETS_INFO}
         popoverHref={config.documentation.assets}
       />
@@ -205,6 +206,11 @@ export const BundleAssets = (props: BundleAssetsProps) => {
     [EntryComponentLink],
   );
 
+  const handleRowClick = useCallback(
+    (row: ReportMetricRow) => showEntryInfo(row.key),
+    [showEntryInfo],
+  );
+
   const emptyMessage = useMemo(
     () => (
       <EmptySet
@@ -276,6 +282,7 @@ export const BundleAssets = (props: BundleAssetsProps) => {
               runs={jobs}
               items={items}
               renderRowHeader={renderRowHeader}
+              onRowClick={handleRowClick}
               emptyMessage={emptyMessage}
               showHeaderSum
               title={metricsTableTitle}

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

@@ -75,12 +75,14 @@ export const BundleAssets = (props: BundleAssetsProps) => {
     return { rows: result, totalRowCount: result.length };
   }, [jobs]);
 
+  const getRowFilter = useMemo(() => generateGetRowFilter({ chunkIds }), [chunkIds]);
+
   // Filter rows
   const filteredRows = useRowsFilter({
     rows,
     searchPattern: searchProps.searchPattern,
     filters: searchProps.filters,
-    getRowFilter: generateGetRowFilter({ chunkIds }),
+    getRowFilter,
   });
 
   // Sort rows

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

@@ -72,6 +72,10 @@ export const BundleAssetsTotals = ({
     [history],
   );
 
+  const handleItemClick = onTreemapItemClick || handleMetricsTreemapItemClick;
+
+  const handleRowClick = useCallback((row) => handleItemClick(row.key), [handleItemClick]);
+
   const exportDialog = useDialogState();
   const [exportSourceType, setExportSourceType] = useState(undefined);
 
@@ -98,6 +102,7 @@ export const BundleAssetsTotals = ({
               runs={jobs}
               items={items}
               renderRowHeader={renderRowHeader}
+              onRowClick={handleRowClick}
               showHeaderSum
               {...restProps}
             />
@@ -112,10 +117,7 @@ export const BundleAssetsTotals = ({
                   rows={items}
                 />
               </Table>
-              <MetricsTreemap
-                treeNodes={getTreemapNodes(items)}
-                onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
-              />
+              <MetricsTreemap treeNodes={getTreemapNodes(items)} onItemClick={handleItemClick} />
             </>
           )}
         </Box>

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

@@ -12,8 +12,7 @@
 }
 
 .nameTagDuplicated {
-  margin-right: var(--space-xxxsmall);
-  vertical-align: baseline;
+  flex: 0 0 auto;
 }
 
 .nameTagDuplicated::before {
@@ -21,18 +20,5 @@
 }
 
 .nameText {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.root .name:hover,
-.root .name:active,
-.root .name:focus {
-  text-decoration: none;
-}
-
-.root .name:hover .nameText,
-.root .name:active .nameText,
-.root .name:focus .nameText {
-  text-decoration: underline;
+  flex: 1 1 auto;
 }

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

@@ -36,6 +36,7 @@ import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '.
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableTitle } from '../metrics-table-title';
+import { MetricsTableRowCount } from '../metrics-table-row-count';
 import { ModuleInfo } from '../module-info';
 import { generateFilterFieldsData } from './bundle-modules.utils';
 import * as I18N_MODULES from './bundle-modules.i18n';
@@ -57,12 +58,12 @@ const RowHeader = (props: RowHeaderProps) => {
   const moduleRow = row as ReportMetricModuleRow;
 
   return (
-    <EntryComponentLink entryId={row.key} className={css.name}>
+    <FlexStack as={EntryComponentLink} entryId={row.key} inline alignItems="center" gap="xxxsmall">
       {moduleRow.duplicated && (
         <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
       )}
       <FileName className={css.nameText} name={moduleRow.label} />
-    </EntryComponentLink>
+    </FlexStack>
   );
 };
 
@@ -228,7 +229,7 @@ export const BundleModules = (props: BundleModulesProps) => {
     () => (
       <MetricsTableTitle
         title={I18N.MODULES}
-        info={`${items.length}/${totalRowCount}`}
+        info={<MetricsTableRowCount count={items.length} total={totalRowCount} />}
         popoverInfo={I18N.MODULES_INFO}
         popoverHref={config.documentation.modules}
       />
@@ -241,6 +242,11 @@ export const BundleModules = (props: BundleModulesProps) => {
     [EntryComponentLink],
   );
 
+  const handleRowClick = useCallback(
+    (row: ReportMetricRow) => showEntryInfo(row.key),
+    [showEntryInfo],
+  );
+
   const emptyMessage = useMemo(
     () => (
       <EmptySet
@@ -348,6 +354,7 @@ export const BundleModules = (props: BundleModulesProps) => {
               items={items}
               runs={jobs}
               renderRowHeader={renderRowHeader}
+              onRowClick={handleRowClick}
               emptyMessage={emptyMessage}
               showHeaderSum
               title={metricsTableTitle}

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

@@ -116,11 +116,13 @@ export const BundleModules = (props: BundleModulesProps) => {
     };
   }, [jobs, moduleMetric]);
 
+  const getRowFilter = useMemo(() => generateGetRowFilter({ chunkIds }), [chunkIds]);
+
   const filteredRows = useRowsFilter({
     rows,
     searchPattern: searchParams.searchPattern,
     filters: searchParams.filters,
-    getRowFilter: generateGetRowFilter({ chunkIds }),
+    getRowFilter,
   }) as Array<ReportMetricModuleRow>;
 
   const sortParams = useRowsSort({

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

@@ -22,6 +22,7 @@ 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 { MetricsTableRowCount } from '../metrics-table-row-count';
 import { PackageInfo } from '../package-info';
 import { SEARCH_PLACEHOLDER } from './bundle-packages.i18n';
 import css from './bundle-packages.module.css';
@@ -48,7 +49,14 @@ const getDropdownFilters = ({ compareMode, filters }) => ({
 
 const PackageName = ({ row, packageName, showDetails, EntryComponentLink }) => {
   return (
-    <EntryComponentLink entryId={showDetails ? row.key : packageName} className={css.packageName}>
+    <FlexStack
+      as={EntryComponentLink}
+      entryId={showDetails ? row.key : packageName}
+      inline
+      alignItems="center"
+      gap="xxxsmall"
+      className={css.packageName}
+    >
       {showDetails && row.duplicate && (
         <Tag
           className={css.packageNameTagDuplicate}
@@ -58,7 +66,7 @@ const PackageName = ({ row, packageName, showDetails, EntryComponentLink }) => {
         />
       )}
       <span className={css.packageNameLabel}>{packageName}</span>
-    </EntryComponentLink>
+    </FlexStack>
   );
 };
 
@@ -217,7 +225,7 @@ export const BundlePackages = (props) => {
     () => (
       <MetricsTableTitle
         title={I18N.PACKAGES}
-        info={`${items.length}/${totalRowCount}`}
+        info={<MetricsTableRowCount count={items.length} total={totalRowCount} />}
         popoverInfo={I18N.PACKAGES_INFO}
         popoverHref={config.documentation.packages}
       />
@@ -249,6 +257,8 @@ export const BundlePackages = (props) => {
     [PackageNameCustomComponentLink],
   );
 
+  const handleRowClick = useCallback((row) => showEntryInfo(row.key), [showEntryInfo]);
+
   const emptyMessage = useMemo(
     () => (
       <EmptySet
@@ -320,6 +330,7 @@ export const BundlePackages = (props) => {
               items={items}
               emptyMessage={emptyMessage}
               renderRowHeader={renderRowHeader}
+              onRowClick={handleRowClick}
               showHeaderSum
               title={metricsTableTitle}
               sort={sort}

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

@@ -12,8 +12,20 @@
 }
 
 .packageName {
-  display: inline-block;
   color: var(--color-text-light);
+  text-decoration: none;
+}
+
+.packageNameTagDuplicate {
+  flex: 0 0 auto;
+}
+
+.packageNameTagDuplicate::before {
+  content: 'd';
+}
+
+.packageNameLabel {
+  flex: 1 1 auto;
 }
 
 .packageName:last-child {
@@ -25,29 +37,13 @@
   margin: 0 var(--space-xxxsmall);
   content: '/';
   color: var(--color-text-ultra-light);
+  text-decoration: none;
 }
 
-.packageNameTagDuplicate {
-  margin-right: var(--space-xxxsmall);
-  vertical-align: middle;
-}
-
-.packageNameLabel {
-  vertical-align: middle;
-}
-
-.packageNameTagDuplicate::before {
-  content: 'd';
-}
-
-.root .packageName:hover,
-.root .packageName:active,
-.root .packageName:focus {
-  text-decoration: none;
+.packageName:hover {
+  text-decoration: none !important;
 }
 
-.root .packageName:hover .packageNameLabel,
-.root .packageName:active .packageNameLabel,
-.root .packageName:focus .packageNameLabel {
-  text-decoration: underline;
+.packageName:hover .packageNameLabel {
+  text-decoration: underline !important;
 }

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

@@ -1,3 +1,8 @@
+/** place overlays triggered from inside the entry info above the panel, under the header */
+.portal {
+  --layer-overlay: calc(var(--layer-xhigh) + 2);
+}
+
 .root {
   position: fixed;
   right: 0;
@@ -5,7 +10,8 @@
   bottom: 0;
   width: 100vw;
   max-width: var(--entry-info-width);
-  z-index: var(--layer-high);
+  /** above the sticky tabs */
+  z-index: calc(var(--layer-xhigh) + 1);
   background: var(--color-background);
   box-shadow: var(--shadow-layer-high);
 }
@@ -23,6 +29,7 @@
 .contentWrapper {
   flex: 1 1 auto;
   overflow: auto;
+  overscroll-behavior: contain;
 }
 
 /** header */
@@ -107,7 +114,6 @@
   line-height: var(--line-height-heading);
   border-radius: var(--radius-small);
   background: var(--color-highlight);
-  transition: var(--transition-out);
 
   text-decoration: none;
   text-transform: none;

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

@@ -12,6 +12,7 @@ import { FileName } from '../../ui/file-name';
 import { Button } from '../../ui/button';
 import { Icon } from '../../ui/icon';
 import { Table } from '../../ui/table';
+import { getCreatePortalElement } from '../../utils/portal';
 import { RunInfo } from '../run-info';
 import * as I18N from './entry-info.i18n';
 import css from './entry-info.module.css';
@@ -50,6 +51,11 @@ const EntryInfoMeta = ({
   </div>
 );
 
+/**
+ * Raise the z-index of the overlays nested inside the entry info
+ */
+const createPortalElement = getCreatePortalElement(css.portal);
+
 function defaultRenderRunInfo(item: ReportMetricRow) {
   const baselineRun = item.runs.length > 1 ? item.runs?.[item.runs.length - 1] : null;
 
@@ -63,8 +69,8 @@ function defaultRenderRunInfo(item: ReportMetricRow) {
   return (
     <RunInfo
       current={metricRunInfo.displayValue}
-      delta={metricRunInfo.displayDeltaPercentage}
-      deltaPercentage={metricRunInfo.displayDelta}
+      delta={metricRunInfo.displayDelta}
+      deltaPercentage={metricRunInfo.displayDeltaPercentage}
       deltaType={metricRunInfo.deltaType}
       baseline={baselineRun?.displayValue || '0B'}
       size="large"
@@ -108,7 +114,7 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
   } = props;
 
   return (
-    <Portal className={cx(css.root, className)}>
+    <Portal portalElement={createPortalElement} className={cx(css.root, className)}>
       <Box padding="medium" as="header" className={css.header}>
         <Stack space="small">
           <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.label}>

package/src/components/jobs-header/jobs-header.module.css

@@ -1,7 +1,6 @@
 .root {
   padding: var(--space-small) 0;
   width: 100%;
-  display: flex;
 }
 
 .item {

package/src/components/jobs-header/jobs-header.tsx

@@ -76,7 +76,7 @@ export const JobsHeader = (props: JobsHeaderProps & React.ComponentProps<'header
   const rootClassName = cx(css.root, className);
 
   return (
-    <header className={rootClassName}>
+    <FlexStack as="header" className={rootClassName}>
       {jobs?.map((job, index) => (
         <Item
           key={job.internalBuildNumber || index}
@@ -84,6 +84,6 @@ export const JobsHeader = (props: JobsHeaderProps & React.ComponentProps<'header
           tag={index === 0 ? I18N.CURRENT : I18N.BASELINE}
         />
       ))}
-    </header>
+    </FlexStack>
   );
 };

package/src/components/metric-change-legend/metric-change-legend.module.css

@@ -2,6 +2,17 @@
   font-size: var(--size-small);
 }
 
+.itemVariants {
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.itemLabel {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+}
+
 .itemAnchor {
   color: var(--color-text-light);
 }