@parca/profile 0.16.510 → 0.17.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.17.0](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.511...@parca/profile@0.17.0) (2025-05-14)
+
+### Features
+
+- ui: Add support for dashed lines for limit metrics in graphs ([ff2a43a](https://github.com/parca-dev/parca/commit/ff2a43a9ead4e3c7ce47beb824c2b3165caf73df))
+
+## [0.16.511](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.510...@parca/profile@0.16.511) (2025-05-08)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.510](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.509...@parca/profile@0.16.510) (2025-05-08)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/UtilizationMetrics/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAqD,MAAM,mBAAmB,CAAC;AAKpG,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAO9E,UAAU,WAAW;IACnB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAQD,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAkdF,QAAA,MAAM,kBAAkB,2GASrB,KAAK,KAAG,GAAG,CAAC,OAgCd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAqD,MAAM,mBAAmB,CAAC;AAKpG,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAO9E,UAAU,WAAW;IACnB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAQD,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAudF,QAAA,MAAM,kBAAkB,2GASrB,KAAK,KAAG,GAAG,CAAC,OAgCd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/MetricsGraph/UtilizationMetrics/index.js

@@ -229,11 +229,13 @@ const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, hei
                                                 return false;
                                             });
                                         }
+                                        const isLimit = s.metric.findIndex(m => m.name === '__type__' && m.value === 'limit') > -1;
+                                        const strokeDasharray = isLimit ? '8 4' : '';
                                         return (_jsx("g", { className: "line cursor-pointer", children: _jsx(MetricsSeries, { data: s, line: l, color: getSeriesColor(s.metric), strokeWidth: isSelected
                                                     ? lineStrokeSelected
                                                     : hovering && highlighted != null && i === highlighted.seriesIndex
                                                         ? lineStrokeHover
-                                                        : lineStroke, xScale: xScale, yScale: yScale, onClick: () => {
+                                                        : lineStroke, strokeDasharray: strokeDasharray, xScale: xScale, yScale: yScale, onClick: () => {
                                                     if (highlighted != null) {
                                                         setSelectedSeries(JSON.stringify(highlighted.labels.map(l => ({
                                                             key: l.name,

package/dist/MetricsGraph/utils/colorMapping.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colorMapping.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/utils/colorMapping.ts"],"names":[],"mappings":"AAqBA;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,GAAG,MAAM,CAgBnF"}
+{"version":3,"file":"colorMapping.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/utils/colorMapping.ts"],"names":[],"mappings":"AAqBA;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,GAAG,MAAM,CAiBnF"}

package/dist/MetricsGraph/utils/colorMapping.js

@@ -21,6 +21,7 @@ const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
 export function getSeriesColor(labels) {
     // Create a key from all labels to ensure unique identification
     const key = labels
+        .filter(l => l.name !== '__type__' && l.name !== 'limit') // ignore injected virtual labels
         .map(l => `${l.name}=${l.value}`)
         .sort()
         .join(',');

package/dist/MetricsSeries/index.d.ts

@@ -4,10 +4,11 @@ interface MetricsSeriesProps {
     line: d3.Line<[number, number]>;
     color: string;
     strokeWidth: string;
+    strokeDasharray?: string;
     xScale: (input: number) => number;
     yScale: (input: number) => number;
     onClick?: () => void;
 }
-declare const MetricsSeries: ({ data, line, color, strokeWidth, onClick, }: MetricsSeriesProps) => JSX.Element;
+declare const MetricsSeries: ({ data, line, color, strokeWidth, strokeDasharray, onClick, }: MetricsSeriesProps) => JSX.Element;
 export default MetricsSeries;
 //# sourceMappingURL=index.d.ts.map

package/dist/MetricsSeries/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsSeries/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AAEzB,UAAU,kBAAkB;IAC1B,IAAI,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,iDAMhB,kBAAkB,KAAG,GAAG,CAAC,OAY3B,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsSeries/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AAEzB,UAAU,kBAAkB;IAC1B,IAAI,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,kEAOhB,kBAAkB,KAAG,GAAG,CAAC,OAa3B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/MetricsSeries/index.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const MetricsSeries = ({ data, line, color, strokeWidth, onClick, }) => (_jsx("g", { className: "line-group", children: _jsx("path", { className: "line", d: line(data.values) ?? undefined, style: {
+const MetricsSeries = ({ data, line, color, strokeWidth, strokeDasharray = '', onClick, }) => (_jsx("g", { className: "line-group", children: _jsx("path", { className: "line", d: line(data.values) ?? undefined, style: {
             stroke: color,
             strokeWidth,
+            strokeDasharray,
         }, onClick: onClick }) }));
 export default MetricsSeries;

package/dist/ProfileIcicleGraph/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAKhF,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAOpE,OAAO,EAAC,gBAAgB,EAA0B,MAAM,0BAA0B,CAAC;AAInF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAUD,eAAO,MAAM,wBAAwB,kBACpB,mBAAmB,KACjC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAIpE,CAAC;AAEF,QAAA,MAAM,kBAAkB,uMAiBrB,uBAAuB,KAAG,GAAG,CAAC,OAyPhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAKhF,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAOpE,OAAO,EAAC,gBAAgB,EAA0B,MAAM,0BAA0B,CAAC;AAInF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAUD,eAAO,MAAM,wBAAwB,kBACpB,mBAAmB,KACjC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAIpE,CAAC;AAEF,QAAA,MAAM,kBAAkB,uMAiBrB,uBAAuB,KAAG,GAAG,CAAC,OAoQhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileIcicleGraph/index.js

@@ -133,15 +133,17 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         icicleChartRef,
         iciclechartHelpText,
     ]);
+    useEffect(() => {
+        if (isTrimmed) {
+            console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
+        }
+    }, [isTrimmed, trimmedFormatted, trimmedPercentage]);
     if (error != null) {
         onError?.(error);
         if (authenticationErrorMessage !== undefined && error.code === 'UNAUTHENTICATED') {
             return _jsx(ErrorContent, { errorMessage: authenticationErrorMessage });
         }
-        return _jsx(ErrorContent, { errorMessage: capitalizeOnlyFirstLetter(error.message) });
-    }
-    if (isTrimmed) {
-        console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
+        return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { children: capitalizeOnlyFirstLetter(error.message) }), isIcicleChart ? iciclechartHelpText ?? null : null] }) }));
     }
     return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, _jsx("div", { className: "min-h-48", id: "h-icicle-graph", children: _jsx(_Fragment, { children: icicleGraph }) }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }, "icicle-graph-loaded") }));
 };

package/dist/ProfileSelector/MetricsGraphSection.js

@@ -79,7 +79,7 @@ export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGra
     const UtilizationGraphToShow = ({ utilizationMetrics, }) => {
         const throughputMetrics = utilizationMetrics.filter(metric => metric.name === 'gpu_pcie_throughput_transmit_bytes' ||
             metric.name === 'gpu_pcie_throughput_receive_bytes');
-        if (utilizationMetrics === undefined || utilizationMetrics.length === 0) {
+        if (utilizationMetrics.length === 0) {
             return _jsx(_Fragment, {});
         }
         return (_jsxs("div", { children: [utilizationMetrics.map(({ name, humanReadableName, data }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.510",
+  "version": "0.17.0",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -77,5 +77,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "f4e72e76db29ff458ec1acae19df5f2ad9df3ed1"
+  "gitHead": "71a61d8524e92e2e9fb1f4b2ea9d53b066bf5b3c"
 }

package/src/MetricsGraph/UtilizationMetrics/index.tsx

@@ -481,6 +481,10 @@ const RawUtilizationMetrics = ({
                   });
                 }
 
+                const isLimit =
+                  s.metric.findIndex(m => m.name === '__type__' && m.value === 'limit') > -1;
+                const strokeDasharray = isLimit ? '8 4' : '';
+
                 return (
                   <g key={i} className="line cursor-pointer">
                     <MetricsSeries
@@ -494,6 +498,7 @@ const RawUtilizationMetrics = ({
                           ? lineStrokeHover
                           : lineStroke
                       }
+                      strokeDasharray={strokeDasharray}
                       xScale={xScale}
                       yScale={yScale}
                       onClick={() => {

package/src/MetricsGraph/utils/colorMapping.ts

@@ -25,6 +25,7 @@ const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
 export function getSeriesColor(labels: Array<{name: string; value: string}>): string {
   // Create a key from all labels to ensure unique identification
   const key = labels
+    .filter(l => l.name !== '__type__' && l.name !== 'limit') // ignore injected virtual labels
     .map(l => `${l.name}=${l.value}`)
     .sort()
     .join(',');

package/src/MetricsSeries/index.tsx

@@ -18,6 +18,7 @@ interface MetricsSeriesProps {
   line: d3.Line<[number, number]>;
   color: string;
   strokeWidth: string;
+  strokeDasharray?: string;
   xScale: (input: number) => number;
   yScale: (input: number) => number;
   onClick?: () => void;
@@ -28,6 +29,7 @@ const MetricsSeries = ({
   line,
   color,
   strokeWidth,
+  strokeDasharray = '',
   onClick,
 }: MetricsSeriesProps): JSX.Element => (
   <g className="line-group">
@@ -37,6 +39,7 @@ const MetricsSeries = ({
       style={{
         stroke: color,
         strokeWidth,
+        strokeDasharray,
       }}
       onClick={onClick}
     />

package/src/ProfileIcicleGraph/index.tsx

@@ -296,6 +296,12 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     iciclechartHelpText,
   ]);
 
+  useEffect(() => {
+    if (isTrimmed) {
+      console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
+    }
+  }, [isTrimmed, trimmedFormatted, trimmedPercentage]);
+
   if (error != null) {
     onError?.(error);
 
@@ -303,11 +309,16 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
       return <ErrorContent errorMessage={authenticationErrorMessage} />;
     }
 
-    return <ErrorContent errorMessage={capitalizeOnlyFirstLetter(error.message)} />;
-  }
-
-  if (isTrimmed) {
-    console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
+    return (
+      <ErrorContent
+        errorMessage={
+          <>
+            <span>{capitalizeOnlyFirstLetter(error.message)}</span>
+            {isIcicleChart ? iciclechartHelpText ?? null : null}
+          </>
+        }
+      />
+    );
   }
 
   return (

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -153,7 +153,7 @@ export function MetricsGraphSection({
         metric.name === 'gpu_pcie_throughput_receive_bytes'
     );
 
-    if (utilizationMetrics === undefined || utilizationMetrics.length === 0) {
+    if (utilizationMetrics.length === 0) {
       return <></>;
     }