@parca/profile 0.16.498 → 0.16.500

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.500](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.499...@parca/profile@0.16.500) (2025-04-28)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.499](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.498...@parca/profile@0.16.499) (2025-04-24)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.498](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.497...@parca/profile@0.16.498) (2025-04-24)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/MetricsTooltip/index.d.ts

@@ -7,7 +7,8 @@ interface Props {
     sampleUnit: string;
     delta: boolean;
     utilizationMetrics?: boolean;
+    valuePrefix?: string;
 }
-declare const MetricsTooltip: ({ x, y, highlighted, contextElement, sampleUnit, delta, utilizationMetrics, }: Props) => JSX.Element;
+declare const MetricsTooltip: ({ x, y, highlighted, contextElement, sampleUnit, delta, utilizationMetrics, valuePrefix, }: Props) => JSX.Element;
 export default MetricsTooltip;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsTooltip/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAC,iBAAiB,EAAC,MAAM,KAAK,CAAC;AAEtC,UAAU,KAAK;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,WAAW,EAAE,iBAAiB,CAAC;IAC/B,cAAc,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AA8BD,QAAA,MAAM,cAAc,kFAQjB,KAAK,KAAG,GAAG,CAAC,OAoMd,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsTooltip/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAC,iBAAiB,EAAC,MAAM,KAAK,CAAC;AAEtC,UAAU,KAAK;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,WAAW,EAAE,iBAAiB,CAAC;IAC/B,cAAc,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA8BD,QAAA,MAAM,cAAc,+FASjB,KAAK,KAAG,GAAG,CAAC,OAuMd,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/MetricsGraph/MetricsTooltip/index.js

@@ -42,7 +42,7 @@ function generateGetBoundingClientRect(contextElement, x = 0, y = 0) {
         bottom: domRect.y + y,
     });
 }
-const MetricsTooltip = ({ x, y, highlighted, contextElement, sampleUnit, delta, utilizationMetrics = false, }) => {
+const MetricsTooltip = ({ x, y, highlighted, contextElement, sampleUnit, delta, utilizationMetrics = false, valuePrefix, }) => {
     const { timezone } = useParcaContext();
     const [popperElement, setPopperElement] = useState(null);
     const { styles, attributes, ...popperProps } = usePopper(virtualElement, popperElement, {
@@ -91,7 +91,7 @@ const MetricsTooltip = ({ x, y, highlighted, contextElement, sampleUnit, delta,
     }, [x, y, contextElement, update]);
     const nameLabel = highlighted?.labels.find(e => e.name === '__name__');
     const highlightedNameLabel = nameLabel !== undefined ? nameLabel : { name: '', value: '' };
-    return (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: "z-50", children: _jsx("div", { className: "flex max-w-lg", children: _jsx("div", { className: "m-auto", children: _jsx("div", { className: "rounded-lg border-gray-300 bg-gray-50 p-3 opacity-90 shadow-lg dark:border-gray-500 dark:bg-gray-900", style: { borderWidth: 1 }, children: _jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "ml-2 mr-6", children: [_jsx("span", { className: "font-semibold", children: highlightedNameLabel.value }), _jsx("span", { className: "my-2 block text-gray-700 dark:text-gray-300", children: _jsx("table", { className: "table-auto", children: _jsxs("tbody", { children: [delta ? (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4 pr-3", children: "Per\u00A0Second" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit === 'nanoseconds' ? 'CPU Cores' : sampleUnit, 5) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Total" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.value, sampleUnit, 2) })] })] })) : (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Value" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) })] })), highlighted.duration > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Duration" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.duration, 'nanoseconds', 2) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(highlighted.timestamp, timePattern(timezone), timezone) })] })] }) }) }), _jsx("span", { className: "my-2 block text-gray-500", children: utilizationMetrics ? (_jsxs(_Fragment, { children: [Object.keys(attributesResourceMap).length > 0 && (_jsx("span", { className: "text-sm font-bold text-gray-700 dark:text-white", children: "Resource Attributes" })), _jsx("span", { className: "my-2 block text-gray-500", children: Object.keys(attributesResourceMap).map(name => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${name.replace('attributes.', '')}="${attributesResourceMap[name]}"`, maxTextLength: 48, id: `tooltip-${name}-${attributesResourceMap[name]}` }) }, name))) }), Object.keys(attributesMap).length > 0 && (_jsx("span", { className: "text-sm font-bold text-gray-700 dark:text-white", children: "Attributes" })), _jsx("span", { className: "my-2 block text-gray-500", children: Object.keys(attributesMap).map(name => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${name.replace('attributes.', '')}="${attributesMap[name]}"`, maxTextLength: 48, id: `tooltip-${name}-${attributesMap[name]}` }) }, name))) })] })) : (_jsx(_Fragment, { children: highlighted.labels
+    return (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: "z-50", children: _jsx("div", { className: "flex max-w-lg", children: _jsx("div", { className: "m-auto", children: _jsx("div", { className: "rounded-lg border-gray-300 bg-gray-50 p-3 opacity-90 shadow-lg dark:border-gray-500 dark:bg-gray-900", style: { borderWidth: 1 }, children: _jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "ml-2 mr-6", children: [_jsx("span", { className: "font-semibold", children: highlightedNameLabel.value }), _jsx("span", { className: "my-2 block text-gray-700 dark:text-gray-300", children: _jsx("table", { className: "table-auto", children: _jsxs("tbody", { children: [delta ? (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4 pr-3", children: "Per\u00A0Second" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit === 'nanoseconds' ? 'CPU Cores' : sampleUnit, 5) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Total" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.value, sampleUnit, 2) })] })] })) : (_jsxs("tr", { children: [_jsxs("td", { className: "w-1/4", children: [valuePrefix ?? '', "Value"] }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) })] })), highlighted.duration > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Duration" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.duration, 'nanoseconds', 2) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(highlighted.timestamp, timePattern(timezone), timezone) })] })] }) }) }), _jsx("span", { className: "my-2 block text-gray-500", children: utilizationMetrics ? (_jsxs(_Fragment, { children: [Object.keys(attributesResourceMap).length > 0 && (_jsx("span", { className: "text-sm font-bold text-gray-700 dark:text-white", children: "Resource Attributes" })), _jsx("span", { className: "my-2 block text-gray-500", children: Object.keys(attributesResourceMap).map(name => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${name.replace('attributes.', '')}="${attributesResourceMap[name]}"`, maxTextLength: 48, id: `tooltip-${name}-${attributesResourceMap[name]}` }) }, name))) }), Object.keys(attributesMap).length > 0 && (_jsx("span", { className: "text-sm font-bold text-gray-700 dark:text-white", children: "Attributes" })), _jsx("span", { className: "my-2 block text-gray-500", children: Object.keys(attributesMap).map(name => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${name.replace('attributes.', '')}="${attributesMap[name]}"`, maxTextLength: 48, id: `tooltip-${name}-${attributesMap[name]}` }) }, name))) })] })) : (_jsx(_Fragment, { children: highlighted.labels
                                             .filter((label) => label.name !== '__name__')
                                             .map((label) => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${label.name}="${label.value}"`, maxTextLength: 37, id: `tooltip-${label.name}` }) }, label.name))) })) }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to add labels to query." })] })] }) }) }) }) }) }));
 };

package/dist/MetricsGraph/UtilizationMetrics/{AreaChart.d.ts → Throughput.d.ts}

@@ -21,4 +21,4 @@ type Props = CommonProps & {
 };
 declare const AreaChart: ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, }: Props) => JSX.Element;
 export default AreaChart;
-//# sourceMappingURL=AreaChart.d.ts.map
+//# sourceMappingURL=Throughput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Throughput.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/Throughput.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAqD,MAAM,mBAAmB,CAAC;AAIpG,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAiB9E,UAAU,WAAW;IACnB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,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,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAmeF,QAAA,MAAM,SAAS,gIAUZ,KAAK,KAAG,GAAG,CAAC,OAiCd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/MetricsGraph/UtilizationMetrics/{AreaChart.js → Throughput.js}

@@ -48,23 +48,7 @@ function transformToSeries(data, isReceive = false) {
         values: series.values.sort((a, b) => a[0] - b[0]),
     }));
 }
-const getYAxisUnit = (name) => {
-    switch (name) {
-        case 'gpu_utilization_percent':
-            return 'percent';
-        case 'gpu_memory_utilization_percent':
-            return 'percent';
-        case 'gpu_power_watt':
-            return 'watts';
-        case 'gpu_pcie_throughput_transmit_bytes':
-            return 'bytes_per_second';
-        case 'gpu_pcie_throughput_receive_bytes':
-            return 'bytes_per_second';
-        default:
-            return 'percent';
-    }
-};
-const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, width, height, margin, name, humanReadableName, from, to, }) => {
+const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, width, height, margin, humanReadableName, from, to, }) => {
     const { timezone } = useParcaContext();
     const graph = useRef(null);
     const [dragging, setDragging] = useState(false);
@@ -136,21 +120,15 @@ const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange
             event: e,
         });
     }, [show]);
+    const color = d3.scaleOrdinal(d3.schemeCategory10);
     const getSeriesColor = (series) => {
-        return series.isReceive === true ? '#EAB308' : '#22C55E'; // Yellow for receive, Green for transmit
+        return color(series.labelset);
     };
-    // Create area generator for transmit (above zero)
-    const transmitArea = d3
-        .area()
-        .x(d => xScale(d[0]))
-        .y0(yScale(0)) // Start from zero line
-        .y1(d => yScale(d[1])); // Top of the area (data point)
-    // Create area generator for receive (below zero)
-    const receiveArea = d3
-        .area()
+    // Create line generator for both transmit and receive
+    const lineGenerator = d3
+        .line()
         .x(d => xScale(d[0]))
-        .y0(yScale(0)) // Start from zero line
-        .y1(d => yScale(d[1])); // Bottom of the area (negative data point)
+        .y(d => yScale(d[1]));
     const highlighted = useMemo(() => {
         if (series.length === 0) {
             return null;
@@ -228,47 +206,45 @@ const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange
     };
     return (_jsxs(_Fragment, { children: [_jsx(MetricsContextMenu, { onAddLabelMatcher: addLabelMatcher, menuId: MENU_ID, highlighted: highlighted, trackVisibility: trackVisibility, utilizationMetrics: true }), highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", { onMouseMove: onMouseMove, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), children: !isContextMenuOpen && (_jsx(MetricsTooltip, { x: pos[0] + margin, y: pos[1] + margin, highlighted: {
                         ...highlighted,
-                        valuePerSecond: Math.abs(highlighted.valuePerSecond), // Show absolute value in tooltip
-                    }, contextElement: graph.current, sampleUnit: getYAxisUnit(name), delta: false, utilizationMetrics: true })) })), _jsx("div", { ref: graph, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), onContextMenu: displayMenu, children: _jsxs("svg", { width: `${width}px`, height: `${height + margin}px`, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove, children: [_jsx("g", { transform: `translate(${margin}, 0)`, children: dragging && (_jsx("g", { className: "zoom-time-rect", children: _jsx("rect", { className: "bar", x: pos[0] - relPos < 0 ? pos[0] : relPos, y: 0, height: height, width: Math.abs(pos[0] - relPos), fill: 'rgba(0, 0, 0, 0.125)' }) })) }), _jsxs("g", { transform: `translate(${margin * 1.5}, ${margin / 1.5})`, children: [_jsxs("g", { className: "y axis", textAnchor: "end", fontSize: "10", fill: "none", children: [yScale.ticks(6).map((d, i, allTicks) => {
+                        valuePerSecond: Math.abs(highlighted.valuePerSecond),
+                    }, contextElement: graph.current, sampleUnit: 'bytes_per_second', delta: false, utilizationMetrics: true, valuePrefix: highlighted.seriesIndex >= transmitData.length ? 'Receive ' : 'Transmit ' })) })), _jsx("div", { ref: graph, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), onContextMenu: displayMenu, children: _jsxs("svg", { width: `${width}px`, height: `${height + margin}px`, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove, children: [_jsx("g", { transform: `translate(${margin}, 0)`, children: dragging && (_jsx("g", { className: "zoom-time-rect", children: _jsx("rect", { className: "bar", x: pos[0] - relPos < 0 ? pos[0] : relPos, y: 0, height: height, width: Math.abs(pos[0] - relPos), fill: 'rgba(0, 0, 0, 0.125)' }) })) }), _jsxs("g", { transform: `translate(${margin * 1.5}, ${margin / 1.5})`, children: [_jsxs("g", { className: "y axis", textAnchor: "end", fontSize: "10", fill: "none", children: [yScale.ticks(6).map((d, i, allTicks) => {
                                             let decimals = 2;
                                             const intervalBetweenTicks = allTicks[1] - allTicks[0];
                                             if (intervalBetweenTicks < 1) {
                                                 const precision = getPrecision(intervalBetweenTicks);
                                                 decimals = precision;
                                             }
-                                            return (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x2: -6 }), _jsxs("text", { fill: "currentColor", x: -9, dy: '0.32em', children: [d < 0 ? '-' : '', valueFormatter(Math.abs(d), getYAxisUnit(name), decimals)] })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: yScale(d), y2: yScale(d) }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`));
+                                            return (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x2: -6 }), _jsxs("text", { fill: "currentColor", x: -9, dy: '0.32em', children: [d < 0 ? '-' : '', valueFormatter(Math.abs(d), 'bytes_per_second', decimals)] })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: yScale(d), y2: yScale(d) }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`));
                                         }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: 0, y1: 0, y2: height - margin }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(to), x2: xScale(to), y1: 0, y2: height - margin }), _jsx("g", { transform: `translate(${-margin}, ${(height - margin) / 2}) rotate(270)`, children: _jsx("text", { fill: "currentColor", dy: "-0.7em", className: "text-sm capitalize", textAnchor: "middle", children: humanReadableName }) })] }), _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
                                                     /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
-                                                    transform: `translate(${xScale(d)}, 0)`, children: [_jsx("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-500" }), _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: formatDate(d, formatForTimespan(from, to), timezone) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: graphWidth, y1: 0, y2: 0 }), _jsx("g", { transform: `translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`, children: _jsx("text", { fill: "currentColor", dy: ".71em", y: 5, className: "text-sm", children: "Time" }) })] }), _jsx("g", { className: "areas", children: series.map((s, i) => {
-                                        let isSelected = false;
-                                        if (parsedSelectedSeries != null && parsedSelectedSeries.length > 0) {
-                                            isSelected = parsedSelectedSeries.every(m => {
-                                                for (let i = 0; i < s.metric.length; i++) {
-                                                    if (s.metric[i].name === m.key && s.metric[i].value === m.value) {
-                                                        return true;
+                                                    transform: `translate(${xScale(d)}, 0)`, children: [_jsx("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-500" }), _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: formatDate(d, formatForTimespan(from, to), timezone) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: graphWidth, y1: 0, y2: 0 }), _jsx("g", { transform: `translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`, children: _jsx("text", { fill: "currentColor", dy: ".71em", y: 5, className: "text-sm", children: "Time" }) })] }), _jsxs("g", { className: "areas", children: [_jsx("line", { x1: xScale(from), x2: xScale(to), y1: yScale(0), y2: yScale(0), stroke: "#64748b", strokeDasharray: "4 2", strokeWidth: 1, opacity: 0.7 }), series.map((s, i) => {
+                                            let isSelected = false;
+                                            if (parsedSelectedSeries != null && parsedSelectedSeries.length > 0) {
+                                                isSelected = parsedSelectedSeries.every(m => {
+                                                    for (let i = 0; i < s.metric.length; i++) {
+                                                        if (s.metric[i].name === m.key && s.metric[i].value === m.value) {
+                                                            return true;
+                                                        }
                                                     }
-                                                }
-                                                return false;
-                                            });
-                                        }
-                                        const seriesColor = getSeriesColor(s);
-                                        const fillOpacity = isSelected ? 0.4 : 0.2;
-                                        const strokeOpacity = isSelected ? 1 : 0.8;
-                                        const areaGenerator = s.isReceive === true ? receiveArea : transmitArea;
-                                        return (_jsx("g", { className: "area cursor-pointer", children: _jsx("path", { d: areaGenerator(s.values) ?? '', fill: seriesColor, fillOpacity: fillOpacity, stroke: seriesColor, strokeWidth: isSelected
-                                                    ? lineStrokeSelected
-                                                    : hovering && highlighted != null && i === highlighted.seriesIndex
-                                                        ? lineStrokeHover
-                                                        : lineStroke, strokeOpacity: strokeOpacity, onClick: () => {
-                                                    if (highlighted != null) {
-                                                        setSelectedSeries(JSON.stringify(highlighted.labels.map(l => ({
-                                                            key: l.name,
-                                                            value: l.value,
-                                                        }))));
-                                                        setSelectedTimeframe(undefined);
-                                                    }
-                                                } }) }, i));
-                                    }) })] })] }) })] }));
+                                                    return false;
+                                                });
+                                            }
+                                            const seriesColor = getSeriesColor(s);
+                                            const strokeOpacity = isSelected ? 1 : 0.8;
+                                            return (_jsx("g", { className: "line cursor-pointer", children: _jsx("path", { d: lineGenerator(s.values) ?? '', fill: "none", stroke: seriesColor, strokeWidth: isSelected
+                                                        ? lineStrokeSelected
+                                                        : hovering && highlighted != null && i === highlighted.seriesIndex
+                                                            ? lineStrokeHover
+                                                            : lineStroke, strokeOpacity: strokeOpacity, onClick: () => {
+                                                        if (highlighted != null) {
+                                                            setSelectedSeries(JSON.stringify(highlighted.labels.map(l => ({
+                                                                key: l.name,
+                                                                value: l.value,
+                                                            }))));
+                                                            setSelectedTimeframe(undefined);
+                                                        }
+                                                    } }) }, i));
+                                        })] })] })] }) })] }));
 };
 const AreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, }) => {
     const { isDarkMode } = useParcaContext();

package/dist/ProfileSelector/MetricsGraphSection.js

@@ -15,7 +15,7 @@ import cx from 'classnames';
 import { Query } from '@parca/parser';
 import { MergedProfileSelection } from '..';
 import UtilizationMetricsGraph from '../MetricsGraph/UtilizationMetrics';
-import AreaChart from '../MetricsGraph/UtilizationMetrics/AreaChart';
+import AreaChart from '../MetricsGraph/UtilizationMetrics/Throughput';
 import ProfileMetricsGraph, { ProfileMetricsEmptyState } from '../ProfileMetricsGraph';
 export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery, selectProfile, query, setNewQueryExpression, utilizationMetrics, utilizationMetricsLoading, }) {
     const handleTimeRangeChange = (range) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.498",
+  "version": "0.16.500",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -77,5 +77,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "fc0740783d9673d30bf0020d3744bceaba02a345"
+  "gitHead": "4fe4798ae9359ce2ca83f9ff5c83ef9868b9ef45"
 }

package/src/MetricsGraph/MetricsTooltip/index.tsx

@@ -31,6 +31,7 @@ interface Props {
   sampleUnit: string;
   delta: boolean;
   utilizationMetrics?: boolean;
+  valuePrefix?: string;
 }
 
 const virtualElement: VirtualElement = {
@@ -69,6 +70,7 @@ const MetricsTooltip = ({
   sampleUnit,
   delta,
   utilizationMetrics = false,
+  valuePrefix,
 }: Props): JSX.Element => {
   const {timezone} = useParcaContext();
 
@@ -164,7 +166,10 @@ const MetricsTooltip = ({
                         </>
                       ) : (
                         <tr>
-                          <td className="w-1/4">Value</td>
+                          <td className="w-1/4">
+                            {valuePrefix ?? ''}
+                            Value
+                          </td>
                           <td className="w-3/4">
                             {valueFormatter(highlighted.valuePerSecond, sampleUnit, 5)}
                           </td>

package/src/MetricsGraph/UtilizationMetrics/{AreaChart.tsx → Throughput.tsx}

@@ -100,23 +100,6 @@ function transformToSeries(data: MetricSeries[], isReceive = false): NetworkSeri
   }));
 }
 
-const getYAxisUnit = (name: string): string => {
-  switch (name) {
-    case 'gpu_utilization_percent':
-      return 'percent';
-    case 'gpu_memory_utilization_percent':
-      return 'percent';
-    case 'gpu_power_watt':
-      return 'watts';
-    case 'gpu_pcie_throughput_transmit_bytes':
-      return 'bytes_per_second';
-    case 'gpu_pcie_throughput_receive_bytes':
-      return 'bytes_per_second';
-    default:
-      return 'percent';
-  }
-};
-
 const RawAreaChart = ({
   transmitData,
   receiveData,
@@ -125,7 +108,6 @@ const RawAreaChart = ({
   width,
   height,
   margin,
-  name,
   humanReadableName,
   from,
   to,
@@ -225,23 +207,17 @@ const RawAreaChart = ({
     [show]
   );
 
+  const color = d3.scaleOrdinal(d3.schemeCategory10);
+
   const getSeriesColor = (series: NetworkSeries): string => {
-    return series.isReceive === true ? '#EAB308' : '#22C55E'; // Yellow for receive, Green for transmit
+    return color(series.labelset);
   };
 
-  // Create area generator for transmit (above zero)
-  const transmitArea = d3
-    .area<number[]>()
+  // Create line generator for both transmit and receive
+  const lineGenerator = d3
+    .line<number[]>()
     .x(d => xScale(d[0]))
-    .y0(yScale(0)) // Start from zero line
-    .y1(d => yScale(d[1])); // Top of the area (data point)
-
-  // Create area generator for receive (below zero)
-  const receiveArea = d3
-    .area<number[]>()
-    .x(d => xScale(d[0]))
-    .y0(yScale(0)) // Start from zero line
-    .y1(d => yScale(d[1])); // Bottom of the area (negative data point)
+    .y(d => yScale(d[1]));
 
   const highlighted = useMemo(() => {
     if (series.length === 0) {
@@ -360,12 +336,15 @@ const RawAreaChart = ({
               y={pos[1] + margin}
               highlighted={{
                 ...highlighted,
-                valuePerSecond: Math.abs(highlighted.valuePerSecond), // Show absolute value in tooltip
+                valuePerSecond: Math.abs(highlighted.valuePerSecond),
               }}
               contextElement={graph.current}
-              sampleUnit={getYAxisUnit(name)}
+              sampleUnit={'bytes_per_second'}
               delta={false}
               utilizationMetrics={true}
+              valuePrefix={
+                highlighted.seriesIndex >= transmitData.length ? 'Receive ' : 'Transmit '
+              }
             />
           )}
         </div>
@@ -414,7 +393,7 @@ const RawAreaChart = ({
                       <line className="stroke-gray-300 dark:stroke-gray-500" x2={-6} />
                       <text fill="currentColor" x={-9} dy={'0.32em'}>
                         {d < 0 ? '-' : ''}
-                        {valueFormatter(Math.abs(d), getYAxisUnit(name), decimals)}
+                        {valueFormatter(Math.abs(d), 'bytes_per_second', decimals)}
                       </text>
                     </g>
                     <g key={`grid-${i}`}>
@@ -499,6 +478,17 @@ const RawAreaChart = ({
               </g>
             </g>
             <g className="areas">
+              {/* Draw baseline at y=0 */}
+              <line
+                x1={xScale(from)}
+                x2={xScale(to)}
+                y1={yScale(0)}
+                y2={yScale(0)}
+                stroke="#64748b"
+                strokeDasharray="4 2"
+                strokeWidth={1}
+                opacity={0.7}
+              />
               {series.map((s, i) => {
                 let isSelected = false;
                 if (parsedSelectedSeries != null && parsedSelectedSeries.length > 0) {
@@ -513,16 +503,13 @@ const RawAreaChart = ({
                 }
 
                 const seriesColor = getSeriesColor(s);
-                const fillOpacity = isSelected ? 0.4 : 0.2;
                 const strokeOpacity = isSelected ? 1 : 0.8;
-                const areaGenerator = s.isReceive === true ? receiveArea : transmitArea;
 
                 return (
-                  <g key={i} className="area cursor-pointer">
+                  <g key={i} className="line cursor-pointer">
                     <path
-                      d={areaGenerator(s.values) ?? ''}
-                      fill={seriesColor}
-                      fillOpacity={fillOpacity}
+                      d={lineGenerator(s.values) ?? ''}
+                      fill="none"
                       stroke={seriesColor}
                       strokeWidth={
                         isSelected

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -19,7 +19,7 @@ import {Query} from '@parca/parser';
 
 import {MergedProfileSelection, ProfileSelection} from '..';
 import UtilizationMetricsGraph from '../MetricsGraph/UtilizationMetrics';
-import AreaChart from '../MetricsGraph/UtilizationMetrics/AreaChart';
+import AreaChart from '../MetricsGraph/UtilizationMetrics/Throughput';
 import ProfileMetricsGraph, {ProfileMetricsEmptyState} from '../ProfileMetricsGraph';
 import {QuerySelection, type UtilizationMetrics as UtilizationMetricsType} from './index';
 

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

@@ -1 +0,0 @@
-{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/AreaChart.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAqD,MAAM,mBAAmB,CAAC;AAIpG,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAiB9E,UAAU,WAAW;IACnB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,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,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAgfF,QAAA,MAAM,SAAS,gIAUZ,KAAK,KAAG,GAAG,CAAC,OAiCd,CAAC;AAEF,eAAe,SAAS,CAAC"}