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

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

@@ -2,6 +2,9 @@
   position: relative;
   aspect-ratio: 16/9;
   background: var(--color-background);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  overflow: hidden;
 }
 
 .canvas {
@@ -10,34 +13,133 @@
   top: 0;
   width: 100%;
   height: 100%;
-  fill: var(--color-text);
-  font-family: var(--font-family);
   background: var(--color-background);
 }
 
-/** Tile overlay fill background transition */
-.root {
+/**
+ * Tile group
+ */
+.tileGroup {
+  position: absolute;
+}
+
+.tileGroupTitle {
+  width: 100%;
+}
+
+.tileGroupTitleContent {
+  width: 100%;
+  padding: var(--space-xxxsmall) 2px var(--space-xxxsmall) var(--space-xxsmall);
+  display: flex;
+  align-items: center;
+  color: var(--color-text);
+  font-family: var(--font-family-fixed);
+  font-size: 10px;
+  line-height: var(--space-small);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tileGroupTitleText,
+.tileGroupTitleTotal {
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.tileGroupTitleTotal {
+  margin-left: var(--space-xxsmall);
+  color: var(--color-text-light);
+}
+
+.tileGroupTitle {
   transition: var(--ui-transition-out);
-  transition-property: opacity;
+}
+
+.tileGroupTitle:hover .tileGroupTitleText {
+  text-decoration: underline;
+  transition: var(--ui-transition-in);
+}
+
+/** Tile group size variation */
+.tileGroup {
+  transition: var(--ui-transition-in);
+  transition-property: left, top, width, height;
+}
+
+.tileGroup--minimal .tileGroupTitle,
+.tileGroup--small .tileGroupTitle {
+  height: 100%; /* full height when title is missing or we do not render any children */
+}
+
+.tileGroup--minimal .tileGroupTitleContent,
+.tileGroup--small .tileGroupTitleContent {
+  min-height: 100%;
+}
+
+/** Tile group nested variation */
+.nested .tileGroup {
+  background-color: rgba(27, 26, 33, 0.05);
+  outline: 1px solid rgba(255, 255, 255, 0.75);
+}
+
+.nested .tileGroup:has(> .tileGroupTitle:hover),
+.nested .tileGroup:has(> .tile:hover) {
+  background-color: rgba(27, 26, 33, 0.1);
+  outline: 1px solid rgba(255, 255, 255, 1);
+}
+
+.nested .tileGroup--NEGATIVE {
+  background-color: rgba(194, 31, 37, 0.05);
+}
+
+.nested .tileGroup--NEGATIVE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--NEGATIVE:has(> .tile:hover) {
+  background-color: rgba(194, 31, 37, 0.1);
+}
+
+.nested .tileGroup--POSITIVE {
+  background-color: rgba(42, 147, 39, 0.05);
+}
+
+.nested .tileGroup--POSITIVE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--POSITIVE:has(> .tile:hover) {
+  background-color: rgba(42, 147, 39, 0.1);
+}
+
+/* reset bacground color when having a not changed group */
+.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE,
+.nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE {
+  background-color: var(--color-background);
+  background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
+}
+
+.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tile:hover),
+.nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
+.nested .tileGroup--NEGATIVE > .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tile:hover) {
+  background-color: var(--color-background);
+  background-image: linear-gradient(rgba(27, 26, 33, 0.1), rgba(27, 26, 33, 0.1));
 }
 
 /** Leaf wrapper button */
-.leaf {
+.tile {
   position: absolute;
   appearance: none;
   border: 0;
   border-radius: 0;
   padding: 0;
-  background: none;
+  background: var(--color-background);
   display: flex;
   align-items: center;
   font-family: var(--font-family-fixed);
   font-size: var(--size-small);
   line-height: var(--line-height-heading);
   text-align: left;
+  transition: var(--ui-transition-out);
 }
 
-.leaf::before {
+.tile::before {
   content: "";
   display: block;
   position: absolute;
@@ -47,18 +149,9 @@
   width: 100%;
   height: 100%;
   background-color: currentColor;
-  color: var(--color-background);
-  transition: var(--ui-transition-out);
-  transition-property: opacity;
-  opacity: 0.6;
-}
-
-.leaf:hover::before {
-  transition: var(--ui-transition-in);
-  opacity: 0.4;
 }
 
-.leafContent {
+.tileContent {
   position: relative;
   z-index: 1;
   width: 100%;
@@ -71,80 +164,113 @@
   line-height: var(--line-height-heading);
 }
 
-/** Align label to other elements on the first column leafs */
-.leafFirstCol .leafContent {
+/** Align label to other elements on the first column cells */
+.tileFirstCol .tileContent {
   padding-left: var(--space-small);
 }
 
-.leadContentLabel {
+.tileContentLabel {
   flex: 0 1 auto;
   width: 100%;
   min-width: 0;
-  max-height: calc(2em * var(--line-height-heading));
+  max-height: calc(2em * var(--line-height-heading)); /* render max 2 rows */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-all;
+  word-break: break-word;
+  hyphens: auto;
+  white-space: normal;
   overflow: hidden;
 }
 
-.leadContentValue {
+.tileContentValue {
   flex: 0 0 auto;
   max-width: calc(100% + var(--space-xxsmall));
   white-space: nowrap;
   overflow: hidden;
 }
 
-.leadContentMetric {
+.tileContentMetric {
   font-weight: bold;
 }
 
-.leadContentDelta {
+.tileContentDelta {
   margin-left: var(--space-xxxsmall);
 }
 
 /** Tile size variation */
-.leafSmall .leafContent {
-  padding: var(--space-xxxsmall) var(--space-xxsmall);
-  gap: 0;
-  font-size: var(--size-xsmall);
+.tileSizeSmall .tileContent {
+  padding: var(--space-xxxsmall);
+  font-size: 10px;
 }
 
-.leafSmall .leadContentLabel {
+.tileSizeSmall .tileContentLabel {
   margin-top: 0;
 }
 
+.tileSizeDefault {
+  transition: var(--ui-transition-in);
+  transition-property: left, top, width, height;
+}
+
 /** Tile diff variation */
-.leaf-NO_CHANGE {
-  color: var(--color-text-light);
+.tile {
+  outline: 1px solid rgba(255, 255, 255, 1);
+  color: var(--color-text);
+  transition: var(--ui-transition-out);
 }
 
-.leaf-NO_CHANGE::before {
-  color: var(--color-gray-50);
+.tile::before {
+  color: var(--color-highlight);
+  transition: var(--ui-transition-out);
+  transition-property: opacity;
+  opacity: 0.5;
+}
+
+.tile:hover::before {
+  transition: var(--ui-transition-in);
   opacity: 0.4;
 }
 
-.leaf-NO_CHANGE:hover::before {
-  opacity: 0.2;
+.tile-NO_CHANGE {
+  color: var(--color-text-light);
 }
 
-.leaf-HIGH_NEGATIVE::before {
+.tile-NO_CHANGE::before {
+  color: var(--color-gray-50);
+}
+
+.tile-HIGH_NEGATIVE::before {
   color: var(--color-red-100);
 }
 
-.leaf-NEGATIVE::before {
+.tile-NEGATIVE::before {
+  color: var(--color-red-50);
+}
+
+.tile-LOW_NEGATIVE::before {
   color: var(--color-red-50);
+  opacity: 0.6;
+}
+
+.tile-LOW_NEGATIVE:hover::before {
+  opacity: 0.5;
 }
 
-.leaf-LOW_NEGATIVE::before {
-  color: var(--color-red-25);
+.tile-LOW_POSITIVE::before {
+  color: var(--color-green-50);
+  opacity: 0.6;
 }
 
-.leaf-LOW_POSITIVE::before {
-  color: var(--color-green-25);
+.tile-LOW_POSITIVE:hover::before {
+  opacity: 0.5;
 }
 
-.leaf-POSITIVE::before {
+.tile-POSITIVE::before {
   color: var(--color-green-50);
 }
 
-.leaf-HIGH_POSITIVE::before {
+.tile-HIGH_POSITIVE::before {
   color: var(--color-green-100);
 }
 
@@ -166,7 +292,7 @@
 }
 
 /** tooltip */
-.leafContentTooltipAnchor {
+.tileContentTooltipAnchor {
   width: 100%;
   height: 100%;
 }
@@ -185,17 +311,16 @@
   pointer-events: none;
 }
 
-/* prevent tooltip portal wrapper from capturing events */
-div[role="presentation"]:has(.tooltip) {
-  pointer-events: none;
-}
-
-
-.leafTooltipArrow svg {
+.tileTooltipArrow svg {
   display: block;
   fill: var(--color-background) !important;
 }
 
-.leafTooltipContentTitle {
-  font-size: var(--size-medium);
+.tileTooltipContentTitle {
+  font-size: var(--size-small);
+}
+
+/* prevent tooltip portal wrapper from capturing events */
+div[role="presentation"]:has(.tooltip) {
+  pointer-events: none;
 }

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

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTooltipStateWithMouseFollow = exports.resolveTileSizeDisplay = exports.resolveTileGroupSizeDisplay = exports.resolveGroupDeltaType = exports.getTreemapNodesGroupedByPath = exports.getTreemapNodes = void 0;
+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");
+const ROOT_LABEL = '(root)';
+function getReportMetricRowMaxValue(item) {
+    const values = item.runs.map((run) => run?.value || 0);
+    return Math.max(...values);
+}
+function getTreemapNodes(items) {
+    const rootChildren = items.map((item) => ({
+        id: item.key,
+        label: item.label,
+        value: getReportMetricRowMaxValue(item),
+        item,
+    }));
+    return {
+        id: '',
+        label: ROOT_LABEL,
+        value: 0,
+        children: rootChildren,
+    };
+}
+exports.getTreemapNodes = getTreemapNodes;
+function getItemValues(runs) {
+    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,
+    };
+}
+function setTreeNode(nodes, slugs, currentSlugId, newNode) {
+    const baseSlugs = slugs.slice(0, currentSlugId);
+    const [currentSlug, ...restSlug] = slugs.slice(currentSlugId);
+    if (!currentSlug) {
+        nodes.push(newNode);
+        return getItemValues(newNode.item.runs);
+    }
+    const currentNodePath = [...baseSlugs, currentSlug].join('/');
+    let parentNode = nodes.find((treeNode) => treeNode.id === currentNodePath);
+    if (!parentNode) {
+        parentNode = {
+            id: currentNodePath,
+            label: currentSlug,
+            value: 0,
+            children: [],
+            total: {
+                current: 0,
+                baseline: 0,
+            },
+        };
+        nodes.push(parentNode);
+    }
+    const nodeValues = getItemValues(newNode?.item?.runs);
+    parentNode.total = {
+        current: (parentNode.total?.current || 0) + nodeValues.current,
+        baseline: (parentNode.total?.baseline || 0) + (nodeValues.baseline || 0),
+    };
+    if (restSlug.length === 0) {
+        parentNode.children.push(newNode);
+        return getItemValues(newNode.item.runs);
+    }
+    return setTreeNode(parentNode.children, slugs, currentSlugId + 1, newNode);
+}
+function getTreemapNodesGroupedByPath(items) {
+    const treeNodes = [];
+    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,
+    };
+}
+exports.getTreemapNodesGroupedByPath = getTreemapNodesGroupedByPath;
+function resolveGroupDeltaType(metricRunInfo) {
+    if (!metricRunInfo) {
+        return utils_1.DeltaType.NO_CHANGE;
+    }
+    const deltaType = 'displayDelta' in metricRunInfo ? metricRunInfo.deltaType : undefined;
+    if (deltaType?.match(/NEGATIVE/)) {
+        return utils_1.DeltaType.NEGATIVE;
+    }
+    if (deltaType?.match(/POSITIVE/)) {
+        return utils_1.DeltaType.POSITIVE;
+    }
+    return utils_1.DeltaType.NO_CHANGE;
+}
+exports.resolveGroupDeltaType = resolveGroupDeltaType;
+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;
+function resolveTileGroupSizeDisplay(width, height) {
+    if (height < metrics_treemap_constants_1.NESTED_PADDING_TOP) {
+        return 'minimal';
+    }
+    if (width < 24) {
+        return 'minimal';
+    }
+    if (height < metrics_treemap_constants_1.NESTED_PADDING_TOP + 8) {
+        return 'small';
+    }
+    return 'default';
+}
+exports.resolveTileGroupSizeDisplay = resolveTileGroupSizeDisplay;
+function resolveTileSizeDisplay(width, height) {
+    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';
+}
+exports.resolveTileSizeDisplay = resolveTileSizeDisplay;
+function useTooltipStateWithMouseFollow(options) {
+    const { parentRef, gutter = 16, timeout = 180 } = options;
+    const pointer = (0, react_use_1.useMouseHovered)(parentRef, { whenHovered: true });
+    const getAnchorRect = (0, react_1.useCallback)(() => {
+        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 = (0, tooltip_1.useTooltipState)({ gutter, getAnchorRect, timeout });
+    (0, react_use_1.useDebounce)(tooltipState.render, 10, [pointer.docX, pointer.docY]);
+    return tooltipState;
+}
+exports.useTooltipStateWithMouseFollow = useTooltipStateWithMouseFollow;
+//# sourceMappingURL=metrics-treemap.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-treemap.utils.js","sourceRoot":"","sources":["../../../src/components/metrics-treemap/metrics-treemap.utils.ts"],"names":[],"mappings":";;;AAAA,iCAAoD;AACpD,yCAAyD;AACzD,6CAAkD;AAClD,+CAK6B;AAE7B,2EAQqC;AAErC,MAAM,UAAU,GAAG,QAAQ,CAAC;AAM5B,SAAS,0BAA0B,CAAC,IAAqB;IACvD,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC;IACvD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;AAC7B,CAAC;AAKD,SAAgB,eAAe,CAAC,KAA6B;IAC3D,MAAM,YAAY,GAAoB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACzD,EAAE,EAAE,IAAI,CAAC,GAAG;QACZ,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,KAAK,EAAE,0BAA0B,CAAC,IAAI,CAAC;QACvC,IAAI;KACL,CAAC,CAAC,CAAC;IAEJ,OAAO;QACL,EAAE,EAAE,EAAE;QACN,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,YAAY;KACvB,CAAC;AACJ,CAAC;AAdD,0CAcC;AAED,SAAS,aAAa,CAAC,IAA6B;IAClD,MAAM,QAAQ,GAAG,IAAI,EAAE,MAAM,CAAC;IAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC;IAEpC,IAAI,QAAQ,GAAG,CAAC,EAAE;QAChB,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;KACjC;IAED,OAAO;QACL,OAAO;QACP,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;KACzC,CAAC;AACJ,CAAC;AAKD,SAAS,WAAW,CAClB,KAAuB,EACvB,KAAoB,EACpB,aAAqB,EACrB,OAAiB;IAEjB,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC;IAChD,MAAM,CAAC,WAAW,EAAE,GAAG,QAAQ,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IAG9D,IAAI,CAAC,WAAW,EAAE;QAChB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACpB,OAAO,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACzC;IAED,MAAM,eAAe,GAAG,CAAC,GAAG,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAG9D,IAAI,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,eAAe,CAAS,CAAC;IAGnF,IAAI,CAAC,UAAU,EAAE;QACf,UAAU,GAAG;YACX,EAAE,EAAE,eAAe;YACnB,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE,CAAC;YACR,QAAQ,EAAE,EAAE;YACZ,KAAK,EAAE;gBACL,OAAO,EAAE,CAAC;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF,CAAC;QAEF,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACxB;IAGD,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAEtD,UAAU,CAAC,KAAK,GAAG;QACjB,OAAO,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,CAAC,GAAG,UAAU,CAAC,OAAO;QAC9D,QAAQ,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,CAAC;KACzE,CAAC;IAGF,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;QACzB,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAClC,OAAO,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACzC;IAED,OAAO,WAAW,CAAC,UAAU,CAAC,QAAQ,EAAE,KAAK,EAAE,aAAa,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC;AAC7E,CAAC;AAKD,SAAgB,4BAA4B,CAAC,KAA6B;IACxE,MAAM,SAAS,GAAqB,EAAE,CAAC;IACvC,MAAM,KAAK,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;IAE1C,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACrB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAClC,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACrC,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAEpC,MAAM,QAAQ,GAAG;YACf,EAAE,EAAE,IAAI,CAAC,GAAG;YACZ,KAAK,EAAE,QAAQ;YACf,KAAK,EAAE,0BAA0B,CAAC,IAAI,CAAC;YACvC,IAAI;SACL,CAAC;QAEF,MAAM,aAAa,GAAG,WAAW,CAAC,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;QAErE,KAAK,CAAC,OAAO,IAAI,aAAa,CAAC,OAAO,IAAI,CAAC,CAAC;QAC5C,KAAK,CAAC,QAAQ,IAAI,aAAa,CAAC,QAAQ,IAAI,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,EAAE,EAAE,EAAE;QACN,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,SAAS;QACnB,KAAK;KACN,CAAC;AACJ,CAAC;AA7BD,oEA6BC;AAED,SAAgB,qBAAqB,CACnC,aAAqD;IAErD,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,iBAAS,CAAC,SAAS,CAAC;KAC5B;IAED,MAAM,SAAS,GAAG,cAAc,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAExF,IAAI,SAAS,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE;QAChC,OAAO,iBAAS,CAAC,QAAQ,CAAC;KAC3B;IAED,IAAI,SAAS,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE;QAChC,OAAO,iBAAS,CAAC,QAAQ,CAAC;KAC3B;IAED,OAAO,iBAAS,CAAC,SAAS,CAAC;AAC7B,CAAC;AAlBD,sDAkBC;AAMD,MAAM,WAAW,GAAG,CAAC,CAAC;AACtB,MAAM,cAAc,GAAG,CAAC,CAAC;AACzB,MAAM,YAAY,GAAG,CAAC,CAAC;AACvB,MAAM,aAAa,GAAG,CAAC,CAAC;AACxB,MAAM,WAAW,GAAG,EAAE,CAAC;AACvB,MAAM,iBAAiB,GAAG,IAAI,CAAC;AAE/B,SAAgB,2BAA2B,CAAC,KAAa,EAAE,MAAc;IACvE,IAAI,MAAM,GAAG,8CAAkB,EAAE;QAC/B,OAAO,SAAS,CAAC;KAClB;IAED,IAAI,KAAK,GAAG,EAAE,EAAE;QACd,OAAO,SAAS,CAAC;KAClB;IAED,IAAI,MAAM,GAAG,8CAAkB,GAAG,CAAC,EAAE;QACnC,OAAO,OAAO,CAAC;KAChB;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAdD,kEAcC;AAED,SAAgB,sBAAsB,CAAC,KAAa,EAAE,MAAc;IAClE,IAAI,MAAM,GAAG,WAAW,GAAG,cAAc,GAAG,iBAAiB,EAAE;QAC7D,OAAO,SAAS,CAAC;KAClB;IAED,IAAI,KAAK,GAAG,YAAY,GAAG,aAAa,GAAG,EAAE,EAAE;QAC7C,OAAO,SAAS,CAAC;KAClB;IAED,IAAI,MAAM,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,CAAC,EAAE;QACxD,OAAO,OAAO,CAAC;KAChB;IAED,IAAI,KAAK,GAAG,YAAY,GAAG,aAAa,GAAG,EAAE,EAAE;QAC7C,OAAO,OAAO,CAAC;KAChB;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAlBD,wDAkBC;AAoBD,SAAgB,8BAA8B,CAAC,OAA8C;IAC3F,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,EAAE,EAAE,OAAO,GAAG,GAAG,EAAE,GAAG,OAAO,CAAC;IAE1D,MAAM,OAAO,GAAG,IAAA,2BAAe,EAAC,SAAS,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;IAGlE,MAAM,aAAa,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAErC,IAAI,OAAO,CAAC,IAAI,KAAK,CAAC,IAAI,OAAO,CAAC,IAAI,KAAK,CAAC,IAAI,OAAO,CAAC,GAAG,KAAK,CAAC,IAAI,OAAO,CAAC,GAAG,KAAK,CAAC,EAAE;YACtF,OAAO,IAAI,CAAC;SACb;QAED,MAAM,OAAO,GAAG;YACd,CAAC,EAAE,OAAO,CAAC,IAAI,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,OAAO,IAAI,CAAC,CAAC;YACvD,CAAC,EAAE,OAAO,CAAC,IAAI,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,OAAO,IAAI,CAAC,CAAC;YACvD,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;SACL,CAAC;QAEF,OAAO,OAAO,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAEjC,MAAM,YAAY,GAAG,IAAA,yBAAe,EAAC,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC,CAAC;IAGzE,IAAA,uBAAW,EAAC,YAAY,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAEnE,OAAO,YAAY,CAAC;AACtB,CAAC;AA5BD,wEA4BC"}

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

@@ -54,8 +54,7 @@ const ModuleInfo = (props) => {
     return (react_1.default.createElement(entry_info_1.EntryInfo, { item: item, labels: labels, tags: tags, onClose: onClose, className: rootClassName },
         react_1.default.createElement(stack_1.Stack, { space: "xxxsmall" },
             item.runs?.map((currentRun, index) => !(0, isEmpty_1.default)(currentRun?.chunkIds) && (react_1.default.createElement(entry_info_1.EntryInfo.Meta, { label: "Chunks", className: module_info_module_css_1.default.chunks },
-                "Job #",
-                index + 1,
+                labels[index],
                 ":",
                 currentRun.chunkIds.map((chunkId) => {
                     const chunk = chunks?.find(({ id }) => id === chunkId);

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

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

package/lib/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/lib/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);