@bundle-stats/ui 4.13.0-beta.9 → 4.13.0-rc.1

package/src/components/metrics-treemap/metrics-treemap.utils.ts

@@ -0,0 +1,268 @@
+import { type RefObject, useCallback } from 'react';
+import { useDebounce, useMouseHovered } from 'react-use';
+import { useTooltipState } from 'ariakit/tooltip';
+import {
+  DeltaType,
+  type MetricRunInfoBaseline,
+  type MetricRunInfo,
+  type ReportMetricRow,
+} from '@bundle-stats/utils';
+
+import {
+  type TreeLeaf,
+  type TreeNodeChildren,
+  type Tree,
+  type TreeTotal,
+  type TileSizeDisplay,
+  type TileGroupSizeDisplay,
+  NESTED_PADDING_TOP,
+} from './metrics-treemap.constants';
+
+const ROOT_LABEL = '(root)';
+
+/**
+ * Set node value to the largest run value to allow to
+ * display the impact of deleted/new entries
+ */
+function getReportMetricRowMaxValue(item: ReportMetricRow): number {
+  const values = item.runs.map((run) => run?.value || 0);
+  return Math.max(...values);
+}
+
+/**
+ * Generate treemap node list(flat)
+ */
+export function getTreemapNodes(items: Array<ReportMetricRow>): Tree {
+  const rootChildren: Array<TreeLeaf> = items.map((item) => ({
+    id: item.key,
+    label: item.label,
+    value: getReportMetricRowMaxValue(item),
+    item,
+  }));
+
+  return {
+    id: '',
+    label: ROOT_LABEL,
+    value: 0,
+    children: rootChildren,
+  };
+}
+
+function getItemValues(runs: ReportMetricRow['runs']): TreeTotal {
+  const runCount = runs?.length;
+  const current = runs[0]?.value || 0;
+
+  if (runCount < 2) {
+    return { current, baseline: 0 };
+  }
+
+  return {
+    current,
+    baseline: runs[runCount - 1]?.value || 0,
+  };
+}
+
+/**
+ * Recursively set treemap nodes
+ */
+function setTreeNode(
+  nodes: TreeNodeChildren,
+  slugs: Array<string>,
+  currentSlugId: number,
+  newNode: TreeLeaf,
+): TreeTotal {
+  const baseSlugs = slugs.slice(0, currentSlugId);
+  const [currentSlug, ...restSlug] = slugs.slice(currentSlugId);
+
+  // Add to current nodes if there are no child nodes
+  if (!currentSlug) {
+    nodes.push(newNode);
+    return getItemValues(newNode.item.runs);
+  }
+
+  const currentNodePath = [...baseSlugs, currentSlug].join('/');
+
+  // Check for existing parent in current nodes
+  let parentNode = nodes.find((treeNode) => treeNode.id === currentNodePath) as Tree;
+
+  // Create the new parentNode if missing
+  if (!parentNode) {
+    parentNode = {
+      id: currentNodePath,
+      label: currentSlug,
+      value: 0,
+      children: [],
+      total: {
+        current: 0,
+        baseline: 0,
+      },
+    };
+
+    nodes.push(parentNode);
+  }
+
+  // accumulate children values
+  const nodeValues = getItemValues(newNode?.item?.runs);
+
+  parentNode.total = {
+    current: (parentNode.total?.current || 0) + nodeValues.current,
+    baseline: (parentNode.total?.baseline || 0) + (nodeValues.baseline || 0),
+  };
+
+  // If there are no other slugs, the new node is as leaf and we add it to the parent
+  if (restSlug.length === 0) {
+    parentNode.children.push(newNode);
+    return getItemValues(newNode.item.runs);
+  }
+
+  return setTreeNode(parentNode.children, slugs, currentSlugId + 1, newNode);
+}
+
+/**
+ * Generate treemap nodes tree by directory
+ */
+export function getTreemapNodesGroupedByPath(items: Array<ReportMetricRow>): Tree {
+  const treeNodes: TreeNodeChildren = [];
+  const total = { current: 0, baseline: 0 };
+
+  items.forEach((item) => {
+    const slugs = item.key.split('/');
+    const baseSlugs = slugs.slice(0, -1);
+    const baseName = slugs.slice(-1)[0];
+
+    const treeNode = {
+      id: item.key,
+      label: baseName,
+      value: getReportMetricRowMaxValue(item),
+      item,
+    };
+
+    const childrenTotal = setTreeNode(treeNodes, baseSlugs, 0, treeNode);
+
+    total.current += childrenTotal.current || 0;
+    total.baseline += childrenTotal.baseline || 0;
+  });
+
+  return {
+    id: '',
+    label: ROOT_LABEL,
+    value: 0,
+    children: treeNodes,
+    total,
+  };
+}
+
+export function resolveGroupDeltaType(
+  metricRunInfo?: MetricRunInfo | MetricRunInfoBaseline,
+): DeltaType.NO_CHANGE | DeltaType.NEGATIVE | DeltaType.POSITIVE {
+  if (!metricRunInfo) {
+    return DeltaType.NO_CHANGE;
+  }
+
+  const deltaType = 'displayDelta' in metricRunInfo ? metricRunInfo.deltaType : undefined;
+
+  if (deltaType?.match(/NEGATIVE/)) {
+    return DeltaType.NEGATIVE;
+  }
+
+  if (deltaType?.match(/POSITIVE/)) {
+    return DeltaType.POSITIVE;
+  }
+
+  return DeltaType.NO_CHANGE;
+}
+
+/**
+ * Resolve the tile's size using predefined values to avoid
+ * computing the size of the content for every tile
+ */
+const PADDING_TOP = 8;
+const PADDING_BOTTOM = 8;
+const PADDING_LEFT = 8;
+const PADDING_RIGHT = 8;
+const LINE_HEIGHT = 16;
+const LINE_HEIGHT_SMALL = 13.3;
+
+export function resolveTileGroupSizeDisplay(width: number, height: number): TileGroupSizeDisplay {
+  if (height < NESTED_PADDING_TOP) {
+    return 'minimal';
+  }
+
+  if (width < 24) {
+    return 'minimal';
+  }
+
+  if (height < NESTED_PADDING_TOP + 8) {
+    return 'small';
+  }
+
+  return 'default';
+}
+
+export function resolveTileSizeDisplay(width: number, height: number): TileSizeDisplay {
+  if (height < PADDING_TOP + PADDING_BOTTOM + LINE_HEIGHT_SMALL) {
+    return 'minimal';
+  }
+
+  if (width < PADDING_LEFT + PADDING_RIGHT + 42) {
+    return 'minimal';
+  }
+
+  if (height < PADDING_TOP + PADDING_TOP + LINE_HEIGHT * 2) {
+    return 'small';
+  }
+
+  if (width < PADDING_LEFT + PADDING_RIGHT + 96) {
+    return 'small';
+  }
+
+  return 'default';
+}
+
+interface UseTooltipStateWithMouseFollowOptions {
+  /**
+   * React ref to parent div
+   */
+  parentRef: RefObject<Element>;
+  /**
+   * Tooltip gutter
+   */
+  gutter?: number;
+  /**
+   * Tooltip timeout
+   */
+  timeout?: number;
+}
+
+/**
+ * Ariakit tooltip state hook with mouse follow functionality
+ */
+export function useTooltipStateWithMouseFollow(options: UseTooltipStateWithMouseFollowOptions) {
+  const { parentRef, gutter = 16, timeout = 180 } = options;
+
+  const pointer = useMouseHovered(parentRef, { whenHovered: true });
+
+  // Return custom rect based on the mouse position
+  const getAnchorRect = useCallback(() => {
+    // Skip custom component rect area if the pointer position is empty
+    if (pointer.docX === 0 && pointer.docY === 0 && pointer.elW === 0 && pointer.elH === 0) {
+      return null;
+    }
+
+    const newRect = {
+      x: pointer.docX - (document?.defaultView?.scrollX ?? 0),
+      y: pointer.docY - (document?.defaultView?.scrollY ?? 0),
+      w: 1,
+      h: 1,
+    };
+
+    return newRect;
+  }, [pointer.docX, pointer.docY]);
+
+  const tooltipState = useTooltipState({ gutter, getAnchorRect, timeout });
+
+  // Update tooltip position when pointer values change
+  useDebounce(tooltipState.render, 10, [pointer.docX, pointer.docY]);
+
+  return tooltipState;
+}

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

@@ -76,7 +76,7 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
           (currentRun, index) =>
             !isEmpty(currentRun?.chunkIds) && (
               <EntryInfo.Meta label="Chunks" className={css.chunks}>
-                Job #{index + 1}:
+                {labels[index]}:
                 {currentRun.chunkIds.map((chunkId) => {
                   const chunk = chunks?.find(({ id }) => id === chunkId);
 

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

@@ -31,6 +31,10 @@
   font-weight: bold;
 }
 
+.delta {
+  font-weight: normal;
+}
+
 .deltaValue + .deltaValue::before {
   margin-left: calc(var(--space-xxxsmall) / 2);
   margin-right: calc(var(--space-xxxsmall) / 2);
@@ -72,17 +76,13 @@
 
 /* Size variation */
 .small .currentMetric {
-  font-size: var(--size-large);
+  font-size: var(--size-medium);
 }
 
 .large .currentMetric {
-  font-size: var(--size-xxxlarge);
+  font-size: var(--size-xxlarge);
 }
 
 .large .baselineMetric {
-  font-size: var(--size-medium);
-}
-
-.large .delta {
-  margin-left: var(--space-xxxsmall);
+  font-size: var(--size-small);
 }

package/src/css/variables.css

@@ -29,20 +29,20 @@
   /*
    * Color scheme:
    * https://coolors.co/287acc-da444e-55b950-efcc1a-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23efcc1a&mcgpalette3=%23353138&mcgpalette4=%23287acc&themename=mcgtheme
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23efcc1a&mcgpalette3=%233e3c49&mcgpalette4=%23287acc&themename=bundle-stats
    * https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
    */
   --color-gray-25: #f9f9fa;
   --color-gray-50: #e8e8e9;
-  --color-gray-100: #c6c5c7;
-  --color-gray-200: #a2a0a4;
-  --color-gray-300: #7e7b80;
-  --color-gray-400: #59565c;
-  --color-gray-500: #353138;
-  --color-gray-600: #302b31;
-  --color-gray-700: #2a252a;
-  --color-gray-800: #231e22;
-  --color-gray-900: #1c181b;
+  --color-gray-100: #c5c5c8;
+  --color-gray-200: #9f9ea4;
+  --color-gray-300: #787780;
+  --color-gray-400: #5b5964;
+  --color-gray-500: #3e3c49;
+  --color-gray-600: #383642;
+  --color-gray-700: #302e39;
+  --color-gray-800: #282731;
+  --color-gray-900: #1b1a21;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -192,9 +192,10 @@
   --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
   --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
 
-  --radius-small: 4px;
-  --radius-medium: 5px;
-  --radius-large: 6px;
+  --radius-xsmall: 3px;
+  --radius-small: 5px;
+  --radius-medium: 7px;
+  --radius-large: 9px;
 
   --outline-hover: 0 0 0 3px var(--color-highlight);
 

package/src/hooks/metrics-display-type.ts

@@ -4,53 +4,103 @@ import { StringParam, useQueryParams } from 'use-query-params';
 
 import { MetricsDisplayType } from '../constants';
 
-const DEFAULT_DISPLAY_TYPE = MetricsDisplayType.TABLE;
-const PARAM_NAME = 'dt';
+const DEFAULT_VALUE = MetricsDisplayType.TABLE;
+const DEFAULT_GROUP_BY = '';
 
-type UseMetricsDisplayType = [MetricsDisplayType, (value: MetricsDisplayType) => void];
+// Display type query param name
+const QUERY_PARAM_VALUE = 'dt';
+// Display type group by param name
+const QUERY_PARAM_GROUP_BY = 'dtg';
 
-export const useMetricsDisplayType = (): UseMetricsDisplayType => {
-  const [{ [PARAM_NAME]: queryDisplayType }, setQueryParams] = useQueryParams({
-    [PARAM_NAME]: StringParam,
+type MetricsDisplayTypeData = {
+  value: MetricsDisplayType;
+  groupBy: string;
+};
+
+type UseMetricsDisplayType = [
+  { value: MetricsDisplayType; groupBy?: string },
+  (newDisplayType: MetricsDisplayType, newGroupBy?: string) => void,
+];
+
+export const useMetricsDisplayType = (
+  groups?: Partial<Record<MetricsDisplayType, Array<string>>>,
+): UseMetricsDisplayType => {
+  const [queryParams, setQueryParams] = useQueryParams({
+    [QUERY_PARAM_VALUE]: StringParam,
+    [QUERY_PARAM_GROUP_BY]: StringParam,
   });
-  const [storageDisplayType, setStoreageDisplayType] = useLocalStorage(
-    PARAM_NAME,
-    MetricsDisplayType.TABLE,
+
+  const { [QUERY_PARAM_VALUE]: queryParamValue, [QUERY_PARAM_GROUP_BY]: queryParamGroupBy } =
+    queryParams;
+  const [localStorage, setLocalStorage] = useLocalStorage<Partial<MetricsDisplayTypeData>>(
+    'storage',
+    {
+      value: DEFAULT_VALUE,
+      groupBy: DEFAULT_GROUP_BY,
+    },
   );
 
-  const displayType = useMemo(() => {
-    const value = queryDisplayType || storageDisplayType;
+  /**
+   * Normalize display type value
+   */
+  const value = useMemo(() => {
+    const resolvedValue = queryParamValue ?? localStorage?.value;
+
+    if (!resolvedValue) {
+      return DEFAULT_VALUE;
+    }
+
+    if (!Object.values(MetricsDisplayType).includes(resolvedValue as MetricsDisplayType)) {
+      return DEFAULT_VALUE;
+    }
 
-    if (!value) {
-      return DEFAULT_DISPLAY_TYPE;
+    return resolvedValue as MetricsDisplayType;
+  }, [queryParamValue, localStorage?.value]);
+
+  /**
+   * Normalize display type group by
+   */
+  const groupBy = useMemo(() => {
+    const resolvedValue = queryParamGroupBy ?? localStorage?.groupBy;
+
+    if (!resolvedValue) {
+      return DEFAULT_GROUP_BY;
     }
 
-    if (!Object.values(MetricsDisplayType).includes(value as MetricsDisplayType)) {
-      return DEFAULT_DISPLAY_TYPE;
+    if (!groups?.[value]?.includes(resolvedValue as MetricsDisplayType)) {
+      return DEFAULT_GROUP_BY;
     }
 
-    return value as MetricsDisplayType;
-  }, [queryDisplayType, storageDisplayType]);
+    return resolvedValue;
+  }, [queryParamGroupBy, localStorage?.groupBy]);
 
+  /**
+   * Synchronize query params when values are different
+   */
   useEffect(() => {
-    // Update query string display type when missing
-    if (queryDisplayType !== displayType) {
-      setQueryParams({ [PARAM_NAME]: displayType });
+    if (value !== queryParamValue || groupBy !== queryParamGroupBy) {
+      setQueryParams({ [QUERY_PARAM_VALUE]: value, [QUERY_PARAM_GROUP_BY]: groupBy });
     }
+  }, [value, queryParamValue, groupBy, queryParamGroupBy, setQueryParams]);
 
-    // Update storage state when query string is set and different
-    if (storageDisplayType !== displayType) {
-      setStoreageDisplayType(queryDisplayType as MetricsDisplayType);
+  /**
+   * Synchronize storage when values are different
+   */
+  useEffect(() => {
+    if (value !== localStorage?.value || groupBy !== localStorage.groupBy) {
+      setLocalStorage({ value, groupBy });
     }
-  }, [displayType, queryDisplayType, storageDisplayType, setQueryParams, setStoreageDisplayType]);
+  }, [value, groupBy, setLocalStorage, localStorage]);
 
   const setDisplayType = useCallback(
-    (value: MetricsDisplayType) => {
-      setStoreageDisplayType(value);
-      setQueryParams({ [PARAM_NAME]: value });
+    (newValue: MetricsDisplayType, newGroupBy: string = DEFAULT_GROUP_BY) => {
+      setQueryParams({
+        [QUERY_PARAM_VALUE]: newValue,
+        [QUERY_PARAM_GROUP_BY]: newGroupBy,
+      });
     },
-    [setStoreageDisplayType, setQueryParams],
+    [setQueryParams],
   );
 
-  return [displayType, setDisplayType];
+  return useMemo(() => [{ value, groupBy }, setDisplayType], [value, groupBy, setDisplayType]);
 };

package/src/hooks/search-params.js

@@ -38,6 +38,7 @@ const getSearchReducer =
         const newState = {
           filters: payload,
           search: state.search,
+          searchPattern: getSearchPattern(state.search),
         };
         setParentState(newState);
         return newState;

package/src/layout/box/box.module.css

@@ -8,11 +8,13 @@
 }
 
 .outline > :first-child {
-  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
+  border-top-left-radius: var(--radius-medium);
+  border-top-right-radius: var(--radius-medium);
 }
 
 .outline > :last-child {
-  border-radius: 0 0 var(--radius-medium) var(--radius-medium);
+  border-bottom-left-radius: var(--radius-medium);
+  border-bottom-right-radius: var(--radius-medium);
 }
 
 .outlineHover {

package/src/layout/flex-stack/flex-stack.module.css

@@ -1,48 +1,44 @@
 .root {
   display: flex;
-  align-items: stretch;
   justify-content: flex-start;
-}
-
-.root > .item:last-child {
-  margin-right: 0;
+  gap: 0;
 }
 
 /** Space variation */
-.space--xxxsmall > .item {
-  margin: 0 var(--space-xxxsmall) 0 0;
+.space--xxxsmall {
+  gap: var(--space-xxxsmall);
 }
 
-.space--xxsmall > .item {
-  margin: 0 var(--space-xxsmall) 0 0;
+.space--xxsmall {
+  gap: var(--space-xxsmall);
 }
 
-.space--xsmall > .item {
-  margin: 0 var(--space-xsmall) 0 0;
+.space--xsmall {
+  gap: var(--space-xsmall);
 }
 
-.space--small > .item {
-  margin: 0 var(--space-small) 0 0;
+.space--small {
+  gap: var(--space-small);
 }
 
-.space--medium > .item {
-  margin: 0 var(--space-medium) 0 0;
+.space--medium {
+  gap: var(--space-medium);
 }
 
-.space--large > .item {
-  margin: 0 var(--space-large) 0 0;
+.space--large {
+  gap: var(--space-large);
 }
 
-.space--xlarge > .item {
-  margin: 0 var(--space-xlarge) 0 0;
+.space--xlarge {
+  gap: var(--space-xlarge);
 }
 
-.space--xxlarge > .item {
-  margin: 0 var(--space-xxlarge) 0 0;
+.space--xxlarge {
+  gap: var(--space-xxlarge);
 }
 
-.space--xxxlarge > .item {
-  margin: 0 var(--space-xxxlarge) 0 0;
+.space--xxxlarge {
+  gap: var(--space-xxxlarge);
 }
 
 /** Align items variation */

package/src/layout/flex-stack/flex-stack.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import cx from 'classnames';
 
 import { NO_SPACE, SPACES } from '../../tokens';
-import { getRenderChildWithClassName } from '../../utils';
 import css from './flex-stack.module.css';
 
 type SpaceValue = (typeof SPACES)[number];
@@ -22,22 +21,17 @@ export const FlexStack = <T extends React.ElementType = 'div'>(
     className = '',
     space = NO_SPACE,
     inline = false,
-    children = null,
     alignItems = '',
     ...restProps
   } = props;
 
   const rootClassName = cx(
-    className,
     css.root,
     css[`space--${space}`],
     css[`align-items--${alignItems}`],
     inline && css.inline,
+    className,
   );
 
-  return (
-    <Component {...restProps} className={rootClassName}>
-      {React.Children.map(children, getRenderChildWithClassName(css.item))}
-    </Component>
-  );
+  return <Component {...restProps} className={rootClassName} />;
 };