@bundle-stats/ui 4.22.3 → 4.23.0-beta.2

package/lib/components/metrics-treemap/metrics-treemap.module.css

@@ -20,6 +20,7 @@
  * Tile group
  */
 .tileGroup {
+  border-radius: var(--radius-xsmall);
   position: absolute;
 }
 
@@ -31,6 +32,7 @@
 .tileGroupTitleContent {
   width: 100%;
   padding: var(--space-xxxsmall) 2px var(--space-xxxsmall) var(--space-xxsmall);
+  border-radius: var(--radius-xsmall);
   display: flex;
   align-items: center;
   color: var(--color-text);
@@ -66,12 +68,6 @@
 .tileGroup {
   transition: var(--transition-out);
   transition-property: background-color, outline;
-  border-radius: var(--radius-xsmall);
-}
-
-.tileGroup--minimal,
-.tileGroup--small {
-  border-radius: calc(var(--radius-xsmall) / 2);
 }
 
 .tileGroup--minimal .tileGroupTitle,
@@ -136,9 +132,8 @@
   position: absolute;
   appearance: none;
   border: 0;
-  border-radius: 0;
+  border-radius: var(--radius-xsmall);
   padding: 0;
-  border-radius: calc(var(--radius-xsmall) / 2);
   background: var(--color-background);
   display: flex;
   align-items: center;
@@ -159,6 +154,7 @@
   top: 0;
   width: 100%;
   height: 100%;
+  border-radius: inherit;
   background-color: currentColor;
 }
 
@@ -170,9 +166,10 @@
   display: flex;
   flex-flow: column;
   justify-content: center;
-  padding: var(--space-xxsmall) var(--space-xxsmall);
+  padding: var(--space-xxsmall);
   gap: var(--space-xxxsmall);
   line-height: var(--line-height-heading);
+  cursor: default;
 }
 
 /** Align label to other elements on the first column cells */
@@ -213,7 +210,7 @@
 /** Tile size variation */
 .tileSizeSmall .tileContent {
   padding: var(--space-xxxsmall);
-  font-size: 10px;
+  font-size: var(--size-xsmall);
 }
 
 .tileSizeSmall .tileContentLabel {
@@ -298,11 +295,6 @@
 }
 
 /** tooltip */
-.tileContentTooltipAnchor {
-  width: 100%;
-  height: 100%;
-}
-
 .tooltip {
   z-index: var(--layer-high);
   padding: var(--space-xsmall) var(--space-small);
@@ -326,7 +318,8 @@
   font-size: var(--size-small);
 }
 
-/* prevent tooltip portal wrapper from capturing events */
+/* prevent the tooltip portal wrapper from capturing pointer events - the
+   treemap relies on pointer events reaching the canvas to track the hovered cell */
 div[role='presentation']:has(.tooltip) {
   pointer-events: none;
 }

package/lib/components/metrics-treemap/metrics-treemap.utils.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTreemapNodes = getTreemapNodes;
 exports.getTreemapNodesGroupedByPath = getTreemapNodesGroupedByPath;
+exports.getTreemapNodesIndex = getTreemapNodesIndex;
 exports.resolveGroupDeltaType = resolveGroupDeltaType;
 exports.resolveTileGroupSizeDisplay = resolveTileGroupSizeDisplay;
 exports.resolveTileSizeDisplay = resolveTileSizeDisplay;
-exports.useTooltipStateWithMouseFollow = useTooltipStateWithMouseFollow;
+exports.useTreemapTooltipState = useTreemapTooltipState;
 const react_1 = require("react");
-const react_use_1 = require("react-use");
 const tooltip_1 = require("ariakit/tooltip");
 const utils_1 = require("@bundle-stats/utils");
 const metrics_treemap_constants_1 = require("./metrics-treemap.constants");
@@ -105,6 +105,17 @@ function getTreemapNodesGroupedByPath(items) {
         total,
     };
 }
+function getTreemapNodesIndex(node, index = new Map()) {
+    index.set(node.id, node);
+    node.children.forEach((childNode) => {
+        if ('children' in childNode) {
+            getTreemapNodesIndex(childNode, index);
+            return;
+        }
+        index.set(childNode.id, childNode);
+    });
+    return index;
+}
 function resolveGroupDeltaType(metricRunInfo) {
     if (!metricRunInfo) {
         return utils_1.DeltaType.NO_CHANGE;
@@ -151,23 +162,68 @@ function resolveTileSizeDisplay(width, height) {
     }
     return 'default';
 }
-function useTooltipStateWithMouseFollow(options) {
-    const { parentRef, gutter = 16, timeout = 240 } = options;
-    const pointer = (0, react_use_1.useMouseHovered)(parentRef, { whenHovered: true });
+function useTreemapTooltipState(options = {}) {
+    const { gutter = 16, timeout = 240, hideTimeout = timeout } = options;
+    const pointerRef = (0, react_1.useRef)(null);
+    const frameRef = (0, react_1.useRef)(0);
+    const hideTimeoutRef = (0, react_1.useRef)(0);
     const getAnchorRect = (0, react_1.useCallback)(() => {
-        if (pointer.docX === 0 && pointer.docY === 0 && pointer.elW === 0 && pointer.elH === 0) {
+        const pointer = pointerRef.current;
+        if (!pointer) {
             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]);
+        return { x: pointer.x, y: pointer.y, w: 1, h: 1 };
+    }, []);
     const tooltipState = (0, tooltip_1.useTooltipState)({ gutter, getAnchorRect, timeout });
-    (0, react_use_1.useDebounce)(tooltipState.render, 10, [pointer.docX, pointer.docY]);
-    return tooltipState;
+    const { mounted, render, show, hide } = tooltipState;
+    const [hoveredNodeId, setHoveredNodeId] = (0, react_1.useState)(null);
+    const hoveredNodeIdRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => () => {
+        cancelAnimationFrame(frameRef.current);
+        window.clearTimeout(hideTimeoutRef.current);
+    }, []);
+    const setPointer = (0, react_1.useCallback)((x, y) => {
+        pointerRef.current = { x, y };
+        if (!mounted || frameRef.current) {
+            return;
+        }
+        frameRef.current = requestAnimationFrame(() => {
+            frameRef.current = 0;
+            render();
+        });
+    }, [mounted, render]);
+    const commitHoveredNode = (0, react_1.useCallback)((nodeId) => {
+        hoveredNodeIdRef.current = nodeId;
+        setHoveredNodeId(nodeId);
+        if (nodeId === null) {
+            hide();
+            return;
+        }
+        show();
+    }, [hide, show]);
+    const setHoveredNode = (0, react_1.useCallback)((nodeId) => {
+        window.clearTimeout(hideTimeoutRef.current);
+        hideTimeoutRef.current = 0;
+        if (nodeId === hoveredNodeIdRef.current) {
+            return;
+        }
+        if (nodeId !== null || !hideTimeout) {
+            commitHoveredNode(nodeId);
+            return;
+        }
+        hideTimeoutRef.current = window.setTimeout(() => {
+            hideTimeoutRef.current = 0;
+            commitHoveredNode(null);
+        }, hideTimeout);
+    }, [commitHoveredNode, hideTimeout]);
+    const clearHoveredNode = (0, react_1.useCallback)(() => {
+        window.clearTimeout(hideTimeoutRef.current);
+        hideTimeoutRef.current = 0;
+        if (hoveredNodeIdRef.current === null) {
+            return;
+        }
+        commitHoveredNode(null);
+    }, [commitHoveredNode]);
+    return { tooltipState, setPointer, hoveredNodeId, setHoveredNode, clearHoveredNode };
 }
 //# sourceMappingURL=metrics-treemap.utils.js.map

package/lib/components/metrics-treemap/metrics-treemap.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"metrics-treemap.utils.js","sourceRoot":"","sources":["../../../src/components/metrics-treemap/metrics-treemap.utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"metrics-treemap.utils.js","sourceRoot":"","sources":["../../../src/components/metrics-treemap/metrics-treemap.utils.ts"],"names":[],"mappings":"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"}

package/lib/components/run-info/run-info.js

@@ -56,27 +56,39 @@ const getMetricParams = (value) => {
     }
     return [matches[1], matches[2]];
 };
-const RunInfo = ({ className = '', title = null, titleHoverCard = null, titleTooltip = null, current = '', baseline = '', delta = '', deltaPercentage = '', deltaType = '', as: Component = 'div', size = 'medium', showBaseline = true, loading = false, enhance = false, ...restProps }) => {
-    const rootClassName = (0, classnames_1.default)(run_info_module_css_1.default.root, className, run_info_module_css_1.default[size], (delta || deltaPercentage) && run_info_module_css_1.default.showDelta);
+const RunInfoTitle = ({ className, title, titleHoverCard, titleTooltip }) => (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", as: "h3", className: (0, classnames_1.default)(run_info_module_css_1.default.title, className) },
+    react_1.default.createElement("span", { className: run_info_module_css_1.default.titleText }, title),
+    titleHoverCard && (react_1.default.createElement(hover_card_1.HoverCard, { label: react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.HELP }), className: (0, classnames_1.default)(run_info_module_css_1.default.titleIcon, run_info_module_css_1.default.titleHoverCardIcon) }, titleHoverCard)),
+    titleTooltip && (react_1.default.createElement(tooltip_1.Tooltip, { title: titleTooltip, className: (0, classnames_1.default)(run_info_module_css_1.default.titleIcon, run_info_module_css_1.default.titleTooltipIcon) },
+        react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.HELP })))));
+const RunInfoContent = ({ className, loading = false, current = '', enhance = false, baseline = '', delta = '', deltaPercentage = '', deltaType = 'NO_CHANGE', showBaseline = true, showDelta = true, }) => {
     const currentValueParams = (0, react_1.useMemo)(() => {
         if (!enhance || typeof current !== 'string') {
             return [current];
         }
         return getMetricParams(current);
     }, [current, enhance]);
+    const contentClassName = (0, classnames_1.default)(run_info_module_css_1.default.content, className);
+    if (loading) {
+        return (react_1.default.createElement(stack_1.Stack, { space: "xxxsmall", className: contentClassName },
+            react_1.default.createElement(skeleton_1.Skeleton, { className: run_info_module_css_1.default.currentMetric }),
+            showBaseline && react_1.default.createElement(skeleton_1.Skeleton, { className: run_info_module_css_1.default.baselineMetric })));
+    }
+    return (react_1.default.createElement(stack_1.Stack, { space: "xxxsmall", className: contentClassName },
+        react_1.default.createElement(metric_1.Metric, { value: currentValueParams[0], unit: currentValueParams[1], inline: true, className: run_info_module_css_1.default.currentMetric }, showDelta && (react_1.default.createElement("div", { className: run_info_module_css_1.default.delta },
+            deltaPercentage && (react_1.default.createElement(delta_1.Delta, { displayValue: deltaPercentage, deltaType: deltaType, className: run_info_module_css_1.default.deltaValue })),
+            delta && (react_1.default.createElement(delta_1.Delta, { displayValue: delta, deltaType: deltaType, className: run_info_module_css_1.default.deltaValue }))))),
+        showBaseline && (react_1.default.createElement(flex_stack_1.FlexStack, { alignItems: "center", space: "xxxsmall", className: run_info_module_css_1.default.baselineMetric },
+            react_1.default.createElement("span", { className: run_info_module_css_1.default.baselineMetricLabel }, "vs"),
+            react_1.default.createElement(metric_1.Metric, { value: baseline, inline: true, className: run_info_module_css_1.default.baselineMetricValue })))));
+};
+const RunInfo = ({ className = '', title = null, titleHoverCard = null, titleTooltip = null, current = '', baseline = '', delta = '', deltaPercentage = '', deltaType = 'NO_CHANGE', as: Component = 'div', size = 'medium', showBaseline = true, showDelta = true, loading = false, enhance = false, children, ...restProps }) => {
+    const rootClassName = (0, classnames_1.default)(run_info_module_css_1.default.root, loading && run_info_module_css_1.default.loading, run_info_module_css_1.default[size], className);
     return (react_1.default.createElement(Component, { className: rootClassName, ...restProps },
-        title && (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", as: "h3", className: run_info_module_css_1.default.title },
-            react_1.default.createElement("span", { className: run_info_module_css_1.default.titleText }, title),
-            titleHoverCard && (react_1.default.createElement(hover_card_1.HoverCard, { label: react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.HELP }), className: (0, classnames_1.default)(run_info_module_css_1.default.titleIcon, run_info_module_css_1.default.titleHoverCardIcon) }, titleHoverCard)),
-            titleTooltip && (react_1.default.createElement(tooltip_1.Tooltip, { title: titleTooltip, className: (0, classnames_1.default)(run_info_module_css_1.default.titleIcon, run_info_module_css_1.default.titleTooltipIcon) },
-                react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.HELP }))))),
-        !loading ? (react_1.default.createElement(stack_1.Stack, { space: "xxxsmall", className: run_info_module_css_1.default.info },
-            react_1.default.createElement(metric_1.Metric, { value: currentValueParams[0], unit: currentValueParams[1], inline: true, className: run_info_module_css_1.default.currentMetric }, (delta || deltaPercentage) && (react_1.default.createElement("span", { className: run_info_module_css_1.default.delta },
-                deltaPercentage && (react_1.default.createElement(delta_1.Delta, { displayValue: deltaPercentage, deltaType: deltaType, className: run_info_module_css_1.default.deltaValue })),
-                delta && (react_1.default.createElement(delta_1.Delta, { displayValue: delta, deltaType: deltaType, className: run_info_module_css_1.default.deltaValue }))))),
-            showBaseline && react_1.default.createElement(metric_1.Metric, { className: run_info_module_css_1.default.baselineMetric, value: baseline }))) : (react_1.default.createElement(stack_1.Stack, { space: "xxxsmall", className: run_info_module_css_1.default.info },
-            react_1.default.createElement(skeleton_1.Skeleton, { className: (0, classnames_1.default)(run_info_module_css_1.default.currentMetric, run_info_module_css_1.default.loading) }),
-            showBaseline && react_1.default.createElement(skeleton_1.Skeleton, { as: "p", className: (0, classnames_1.default)(run_info_module_css_1.default.baselineMetric, run_info_module_css_1.default.loading) })))));
+        react_1.default.createElement(stack_1.Stack, { space: "xsmall" },
+            title && (react_1.default.createElement(RunInfoTitle, { title: title, titleHoverCard: titleHoverCard, titleTooltip: titleTooltip })),
+            react_1.default.createElement(RunInfoContent, { loading: loading, current: current, enhance: enhance, baseline: baseline, delta: delta, deltaPercentage: deltaPercentage, deltaType: deltaType, showBaseline: showBaseline, showDelta: showDelta }),
+            children)));
 };
 exports.RunInfo = RunInfo;
 //# sourceMappingURL=run-info.js.map

package/lib/components/run-info/run-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"run-info.js","sourceRoot":"","sources":["../../../src/components/run-info/run-info.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"run-info.js","sourceRoot":"","sources":["../../../src/components/run-info/run-info.tsx"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 .title {
-  color: var(--color-text-ultra-light);
+  color: var(--color-text-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
   text-transform: uppercase;
@@ -16,14 +16,11 @@
 
 .titleIcon {
   flex: 0 0 var(--space-small);
+  /* compensate for the button icon spacing */
   margin-top: -3px !important;
   margin-bottom: -3px !important;
 }
 
-.title + .info {
-  margin-top: var(--space-xxsmall);
-}
-
 .currentMetric {
   color: var(--color-heading);
   white-space: nowrap;
@@ -32,33 +29,32 @@
   height: var(--line-height-number);
 }
 
-.delta {
-  font-weight: bold;
-}
-
-.deltaValue + .deltaValue::before {
-  margin-left: calc(var(--space-xxxsmall) / 2);
-  margin-right: calc(var(--space-xxxsmall) / 2);
-  content: '/';
-  color: var(--color-text-ultra-light);
-}
-
 .baselineMetric {
   color: var(--color-text-ultra-light);
   font-size: var(--size-small);
+  font-family: var(--font-family-fixed);
+  font-weight: normal;
   line-height: var(--line-height-number);
   height: var(--line-height-number);
 }
 
-/* Loading state */
-.loading.currentMetric {
-  min-width: 0;
-  max-width: 8em;
+.baselineMetricValue {
+  color: var(--color-text-light);
+  line-height: inherit;
 }
 
-.loading.baselineMetric {
-  min-width: 0;
-  max-width: 8em;
+
+.delta {
+  font-weight: bold;
+  font-size: var(--size-small);
+  line-height: var(--line-height-number);
+}
+
+.deltaValue + .deltaValue::before {
+  margin-left: var(--space-xxxsmall);
+  margin-right: var(--space-xxxsmall);
+  content: '/';
+  color: var(--color-outline-dark);
 }
 
 /* Hover state */
@@ -82,15 +78,28 @@
     visibility 0s;
 }
 
-/* Size variation */
-.currentMetric {
-  font-size: var(--size-xxlarge);
+/* Loading state */
+.loading .currentMetric {
+  max-width: 6em;
 }
 
+.loading .baselineMetric {
+  max-width: 6em;
+}
+
+.loading .delta {
+  max-width: 12em;
+}
+
+/* Size variation */
 .small .currentMetric {
   font-size: var(--size-medium);
 }
 
+.currentMetric {
+  font-size: var(--size-xxlarge);
+}
+
 .large .currentMetric {
   font-size: var(--size-xxxlarge);
 }

package/lib/components/summary/summary.js

@@ -13,22 +13,21 @@ const box_1 = require("../../layout/box");
 const component_link_1 = require("../component-link");
 const metric_run_info_1 = require("../metric-run-info");
 const summary_module_css_1 = __importDefault(require("./summary.module.css"));
-const METRICS_WEBPACK_OTHERS = [
-    ...constants_1.METRICS_WEBPACK_ASSETS,
-    ...constants_1.METRICS_WEBPACK_MODULES,
-    ...constants_1.METRICS_WEBPACK_PACKAGES,
-];
+const layout_1 = require("../../layout");
 const SummaryItem = (props) => {
     const { className = '', metricId, data, customLink: SummaryItemCustomLink, size, loading, showDelta, showBaseline, } = props;
     const componentLink = utils_1.METRIC_COMPONENT_LINKS.get(metricId);
     const metricData = (0, get_1.default)(data, metricId, { current: 0, baseline: 0 });
-    return (react_1.default.createElement(box_1.Box, { key: metricId, outline: true, outlineHover: true, padding: "small", as: SummaryItemCustomLink, ...componentLink?.link, className: className },
+    return (react_1.default.createElement(SummaryItemCustomLink, { key: metricId, ...componentLink?.link, className: className },
         react_1.default.createElement(metric_run_info_1.MetricRunInfo, { metricId: metricId, current: metricData.current, baseline: metricData.baseline, showDelta: showDelta, showBaseline: showBaseline, size: size, loading: loading })));
 };
 const Summary = ({ className = '', data = null, loading = false, showSummaryItemDelta = true, showSummaryItemBaseline = true, summaryItemLink = component_link_1.ComponentLink, }) => (react_1.default.createElement(box_1.Box, { className: (0, classnames_1.default)(summary_module_css_1.default.root, className) },
-    react_1.default.createElement("div", { className: summary_module_css_1.default.wrapper },
-        react_1.default.createElement("div", { className: summary_module_css_1.default.items }, constants_1.METRICS_WEBPACK_GENERAL.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: summary_module_css_1.default.item, metricId: metricId, data: data, size: "large", loading: loading, customLink: summaryItemLink, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline }))))),
-    react_1.default.createElement("div", { className: summary_module_css_1.default.wrapper },
-        react_1.default.createElement("div", { className: summary_module_css_1.default.items }, METRICS_WEBPACK_OTHERS.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: (0, classnames_1.default)(summary_module_css_1.default.item, summary_module_css_1.default.itemSmall), metricId: metricId, data: data, customLink: summaryItemLink, loading: loading, showDelta: showSummaryItemDelta, showBaseline: false })))))));
+    react_1.default.createElement("div", { className: summary_module_css_1.default.row },
+        react_1.default.createElement(box_1.Box, { outline: true, padding: "small", className: summary_module_css_1.default.rowGroup },
+            react_1.default.createElement("div", { className: summary_module_css_1.default.items }, constants_1.METRICS_WEBPACK_GENERAL.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: summary_module_css_1.default.item, metricId: metricId, data: data, size: "xlarge", loading: loading, customLink: summaryItemLink, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline })))))),
+    react_1.default.createElement("div", { className: summary_module_css_1.default.row }, [constants_1.METRICS_GROUP_ASSETS, constants_1.METRICS_GROUP_MODULES, constants_1.METRICS_GROUP_PACKAGES].map((metricGroup) => (react_1.default.createElement(layout_1.Stack, { className: summary_module_css_1.default.rowGroup, key: metricGroup.title },
+        react_1.default.createElement("h3", { className: summary_module_css_1.default.rowGroupTitle }, metricGroup.title),
+        react_1.default.createElement(box_1.Box, { outline: true, padding: "small" },
+            react_1.default.createElement("div", { className: summary_module_css_1.default.items }, metricGroup.metrics.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: summary_module_css_1.default.item, metricId: metricId, data: data, size: "large", loading: loading, customLink: summaryItemLink, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline })))))))))));
 exports.Summary = Summary;
 //# sourceMappingURL=summary.js.map

package/lib/components/summary/summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,qDAA6B;AAC7B,+CAA6D;AAE7D,+CAKyB;AACzB,0CAAuC;AACvC,sDAAkD;AAClD,wDAAuE;AACvE,8EAAuC;AAEvC,MAAM,sBAAsB,GAAG;IAC7B,GAAG,kCAAsB;IACzB,GAAG,mCAAuB;IAC1B,GAAG,oCAAwB;CAC5B,CAAC;AAYF,MAAM,WAAW,GAAG,CAAC,KAAqD,EAAE,EAAE;IAC5E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,EACJ,UAAU,EAAE,qBAAqB,EACjC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,YAAY,GACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,8BAAsB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,IAAA,aAAG,EAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL,8BAAC,SAAG,IACF,GAAG,EAAE,QAAQ,EACb,OAAO,QACP,YAAY,QACZ,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,qBAAqB,KACrB,aAAa,EAAE,IAAI,EACvB,SAAS,EAAE,SAAS;QAEpB,8BAAC,+BAAa,IACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,UAAU,CAAC,OAAO,EAC3B,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAC7B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAeK,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,KAAK,EACf,oBAAoB,GAAG,IAAI,EAC3B,uBAAuB,GAAG,IAAI,EAC9B,eAAe,GAAG,8BAAa,GACY,EAAE,EAAE,CAAC,CAChD,8BAAC,SAAG,IAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IACrC,uCAAK,SAAS,EAAE,4BAAG,CAAC,OAAO;QACzB,uCAAK,SAAS,EAAE,4BAAG,CAAC,KAAK,IACtB,mCAAuB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACzC,8BAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,4BAAG,CAAC,IAAI,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,eAAe,EAC3B,SAAS,EAAE,oBAAoB,EAC/B,YAAY,EAAE,uBAAuB,GACrC,CACH,CAAC,CACE,CACF;IACN,uCAAK,SAAS,EAAE,4BAAG,CAAC,OAAO;QACzB,uCAAK,SAAS,EAAE,4BAAG,CAAC,KAAK,IACtB,sBAAsB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACxC,8BAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,IAAI,EAAE,4BAAG,CAAC,SAAS,CAAC,EACtC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,eAAe,EAC3B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,oBAAoB,EAC/B,YAAY,EAAE,KAAK,GACnB,CACH,CAAC,CACE,CACF,CACF,CACP,CAAC;AA3CW,QAAA,OAAO,WA2ClB"}
+{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.tsx"],"names":[],"mappings":"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"}

package/lib/components/summary/summary.module.css

@@ -3,29 +3,79 @@
   width: 100%;
 }
 
-.wrapper {
+.row {
   width: 100%;
+  display: flex;
+  align-items: stretch;
+  flex-wrap: wrap;
+  gap: var(--space-small);
+}
+
+.rowGroup {
+  flex: 1 1 auto;
 }
 
-.wrapper + .wrapper {
+.rowGroupTitle {
+  position: absolute;
+  font-size: 0;
+  width: 0;
+  left: -99999px;
+}
+
+.row + .row {
   margin-top: var(--summary-gap);
 }
 
 .items {
   display: flex;
+  align-items: stretch;
   flex-wrap: wrap;
-  width: calc(100% + var(--summary-gap));
-  margin-top: calc(0px - var(--summary-gap));
-  margin-left: calc(0px - var(--summary-gap));
+  gap: var(--space-medium);
 }
 
 .item {
-  margin: var(--summary-gap) 0 0 var(--summary-gap);
-  flex: 1 0 10%; /* force equal sizes */
-  min-width: 12em;
+  flex: 1 1 10%; /* force equal sizes */
+  min-width: 8em;
   text-decoration: none;
+  position: relative;
+  z-index: 0;
 }
 
-.itemSmall {
-  min-width: 8em;
+.item::before {
+  content: "";
+  border-radius: var(--radius-medium);
+  background: var(--color-highlight);
+  display: block;
+  position: absolute;
+  z-index: -1;
+  top: calc(0px - var(--space-xsmall));
+  right: calc(0px - var(--space-xsmall));
+  bottom: calc(0px - var(--space-xsmall));
+  left: calc(0px - var(--space-xsmall));
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.item:hover::before {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.item + .item::after {
+  content: "";
+  border-radius: var(--radius-medium);
+  background: var(--color-outline);
+  display: block;
+  width: 1px;
+  position: absolute;
+  left: calc(0px - var(--space-xsmall));
+  top: var(--space-xxsmall);
+  bottom: var(--space-xxsmall);
+  opacity: 1;
+  transition: var(--transition-out);
+}
+
+.item:hover::after,  .item:hover + .item::after {
+  opacity: 0;
+  transition: var(--transition-in);
 }

package/lib/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModuleSizeMetrics = exports.ModuleSizeMetric = exports.MetricsDisplayGroupByDefault = exports.MetricsDisplayGroupBy = exports.MetricsDisplayTypeDefault = exports.MetricsDisplayType = exports.SORT = exports.METRICS_WEBPACK_PACKAGES = exports.METRICS_WEBPACK_MODULES = exports.METRICS_WEBPACK_ASSETS = exports.METRICS_WEBPACK_GENERAL = exports.ASSETS_SIZES_FILE_TYPE_MAP = exports.SECTION_URLS = exports.URLS = void 0;
+exports.ModuleSizeMetrics = exports.ModuleSizeMetric = exports.MetricsDisplayGroupByDefault = exports.MetricsDisplayGroupBy = exports.MetricsDisplayTypeDefault = exports.MetricsDisplayType = exports.SORT = exports.METRICS_GROUP_PACKAGES = exports.METRICS_GROUP_MODULES = exports.METRICS_GROUP_ASSETS = exports.METRICS_WEBPACK_PACKAGES = exports.METRICS_WEBPACK_MODULES = exports.METRICS_WEBPACK_ASSETS = exports.METRICS_WEBPACK_GENERAL = exports.ASSETS_SIZES_FILE_TYPE_MAP = exports.SECTION_URLS = exports.URLS = void 0;
 const utils_1 = require("@bundle-stats/utils");
 exports.URLS = {
     OVERVIEW: '/',
@@ -31,6 +31,18 @@ exports.METRICS_WEBPACK_MODULES = [
     'webpack.duplicateCode',
 ];
 exports.METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
+exports.METRICS_GROUP_ASSETS = {
+    title: 'Assets',
+    metrics: exports.METRICS_WEBPACK_ASSETS,
+};
+exports.METRICS_GROUP_MODULES = {
+    title: 'Modules',
+    metrics: exports.METRICS_WEBPACK_MODULES,
+};
+exports.METRICS_GROUP_PACKAGES = {
+    title: 'Packages',
+    metrics: exports.METRICS_WEBPACK_PACKAGES,
+};
 exports.SORT = {
     ASC: 'asc',
     DESC: 'desc',

package/lib/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":";;;AAAA,+CAA2D;AAE9C,QAAA,IAAI,GAAG;IAClB,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEW,QAAA,YAAY,GAAG;IAC1B,CAAC,gBAAQ,CAAC,MAAM,CAAC,EAAE,YAAI,CAAC,QAAQ;IAChC,CAAC,gBAAQ,CAAC,MAAM,CAAC,EAAE,YAAI,CAAC,MAAM;IAC9B,CAAC,gBAAQ,CAAC,OAAO,CAAC,EAAE,YAAI,CAAC,OAAO;IAChC,CAAC,gBAAQ,CAAC,QAAQ,CAAC,EAAE,YAAI,CAAC,QAAQ;CACnC,CAAC;AAEW,QAAA,0BAA0B,GAAG,kBAAU,CAAC,MAAM,CACzD,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;IAClB,GAAG,GAAG;IACN,CAAC,gCAAgC,QAAQ,EAAE,CAAC,EAAE,QAAQ;CACvD,CAAC,EACF,EAAE,CACH,CAAC;AAEW,QAAA,uBAAuB,GAAG;IACrC,4BAA4B;IAC5B,4BAA4B;IAC5B,6BAA6B;IAC7B,2BAA2B;CAC5B,CAAC;AACW,QAAA,sBAAsB,GAAG,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAC;AACtE,QAAA,uBAAuB,GAAG;IACrC,qBAAqB;IACrB,+BAA+B;IAC/B,uBAAuB;CACxB,CAAC;AACW,QAAA,wBAAwB,GAAG,CAAC,sBAAsB,EAAE,gCAAgC,CAAC,CAAC;AAEtF,QAAA,IAAI,GAAG;IAClB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,qCAAe,CAAA;AACjB,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAEY,QAAA,yBAAyB,GAAG,kBAAkB,CAAC,KAAK,CAAC;AAElE,IAAY,qBAGX;AAHD,WAAY,qBAAqB;IAC/B,0CAAiB,CAAA;IACjB,0CAAiB,CAAA;AACnB,CAAC,EAHW,qBAAqB,qCAArB,qBAAqB,QAGhC;AAEY,QAAA,4BAA4B,GAAG,qBAAqB,CAAC,MAAM,CAAC;AAEzE,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,kCAAc,CAAA;IACd,oDAAgC,CAAA;IAChC,4CAAwB,CAAA;AAC1B,CAAC,EAJW,gBAAgB,gCAAhB,gBAAgB,QAI3B;AAEY,QAAA,iBAAiB,GAAG;IAC/B,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;QACvB,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,2CAA2C;KACrD;IACD,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE;QAC7B,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE,iDAAiD;KAC3D;IACD,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE;QACjC,KAAK,EAAE,gBAAgB;QACvB,OAAO,EAAE,uBAAuB;KACjC;CACF,CAAC"}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":";;;AAAA,+CAA2D;AAE9C,QAAA,IAAI,GAAG;IAClB,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEW,QAAA,YAAY,GAAG;IAC1B,CAAC,gBAAQ,CAAC,MAAM,CAAC,EAAE,YAAI,CAAC,QAAQ;IAChC,CAAC,gBAAQ,CAAC,MAAM,CAAC,EAAE,YAAI,CAAC,MAAM;IAC9B,CAAC,gBAAQ,CAAC,OAAO,CAAC,EAAE,YAAI,CAAC,OAAO;IAChC,CAAC,gBAAQ,CAAC,QAAQ,CAAC,EAAE,YAAI,CAAC,QAAQ;CACnC,CAAC;AAEW,QAAA,0BAA0B,GAAG,kBAAU,CAAC,MAAM,CACzD,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;IAClB,GAAG,GAAG;IACN,CAAC,gCAAgC,QAAQ,EAAE,CAAC,EAAE,QAAQ;CACvD,CAAC,EACF,EAAE,CACH,CAAC;AAEW,QAAA,uBAAuB,GAAG;IACrC,4BAA4B;IAC5B,4BAA4B;IAC5B,6BAA6B;IAC7B,2BAA2B;CAC5B,CAAC;AACW,QAAA,sBAAsB,GAAG,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAC;AACtE,QAAA,uBAAuB,GAAG;IACrC,qBAAqB;IACrB,+BAA+B;IAC/B,uBAAuB;CACxB,CAAC;AACW,QAAA,wBAAwB,GAAG,CAAC,sBAAsB,EAAE,gCAAgC,CAAC,CAAC;AAEtF,QAAA,oBAAoB,GAAG;IAClC,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,8BAAsB;CAChC,CAAC;AACW,QAAA,qBAAqB,GAAG;IACnC,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,+BAAuB;CACjC,CAAC;AACW,QAAA,sBAAsB,GAAG;IACpC,KAAK,EAAE,UAAU;IACjB,OAAO,EAAE,gCAAwB;CAClC,CAAC;AAEW,QAAA,IAAI,GAAG;IAClB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,qCAAe,CAAA;AACjB,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAEY,QAAA,yBAAyB,GAAG,kBAAkB,CAAC,KAAK,CAAC;AAElE,IAAY,qBAGX;AAHD,WAAY,qBAAqB;IAC/B,0CAAiB,CAAA;IACjB,0CAAiB,CAAA;AACnB,CAAC,EAHW,qBAAqB,qCAArB,qBAAqB,QAGhC;AAEY,QAAA,4BAA4B,GAAG,qBAAqB,CAAC,MAAM,CAAC;AAEzE,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,kCAAc,CAAA;IACd,oDAAgC,CAAA;IAChC,4CAAwB,CAAA;AAC1B,CAAC,EAJW,gBAAgB,gCAAhB,gBAAgB,QAI3B;AAEY,QAAA,iBAAiB,GAAG;IAC/B,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;QACvB,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,2CAA2C;KACrD;IACD,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE;QAC7B,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE,iDAAiD;KAC3D;IACD,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE;QACjC,KAAK,EAAE,gBAAgB;QACvB,OAAO,EAAE,uBAAuB;KACjC;CACF,CAAC"}