@parca/profile 0.16.497 → 0.16.498

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
 ## [0.16.497](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.496...@parca/profile@0.16.497) (2025-04-24)
 
 **Note:** Version bump only for package @parca/profile

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

@@ -0,0 +1,24 @@
+import { DateTimeRange } from '@parca/components';
+import { type UtilizationMetrics as MetricSeries } from '../../ProfileSelector';
+interface CommonProps {
+    transmitData: MetricSeries[];
+    receiveData: MetricSeries[];
+    addLabelMatcher: (labels: {
+        key: string;
+        value: string;
+    } | Array<{
+        key: string;
+        value: string;
+    }>) => void;
+    setTimeRange: (range: DateTimeRange) => void;
+    name: string;
+    humanReadableName: string;
+    from: number;
+    to: number;
+}
+type Props = CommonProps & {
+    utilizationMetricsLoading?: boolean;
+};
+declare const AreaChart: ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, }: Props) => JSX.Element;
+export default AreaChart;
+//# sourceMappingURL=AreaChart.d.ts.map

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

@@ -0,0 +1 @@
+{"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"}

package/dist/MetricsGraph/UtilizationMetrics/AreaChart.js

@@ -0,0 +1,278 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Fragment, useCallback, useId, useMemo, useRef, useState } from 'react';
+import * as d3 from 'd3';
+import { pointer } from 'd3-selection';
+import { AnimatePresence, motion } from 'framer-motion';
+import throttle from 'lodash.throttle';
+import { useContextMenu } from 'react-contexify';
+import { DateTimeRange, MetricsGraphSkeleton, useParcaContext, useURLState } from '@parca/components';
+import { formatDate, formatForTimespan, getPrecision, valueFormatter } from '@parca/utilities';
+import MetricsContextMenu from '../MetricsContextMenu';
+import MetricsTooltip from '../MetricsTooltip';
+import { useMetricsGraphDimensions } from '../useMetricsGraphDimensions';
+function transformToSeries(data, isReceive = false) {
+    const series = data.reduce(function (agg, s) {
+        if (s.labelset !== undefined) {
+            const metric = s.labelset.labels.sort((a, b) => a.name.localeCompare(b.name));
+            agg.push({
+                metric,
+                values: s.samples.reduce(function (agg, d) {
+                    if (d.timestamp !== undefined && d.value !== undefined) {
+                        // Multiply receive values by -1 to display below zero
+                        const value = isReceive ? -1 * d.value : d.value;
+                        agg.push([d.timestamp, value]);
+                    }
+                    return agg;
+                }, []),
+                labelset: metric.map(m => `${m.name}=${m.value}`).join(','),
+                isReceive,
+            });
+        }
+        return agg;
+    }, []);
+    // Sort values by timestamp for each series
+    return series.map(series => ({
+        ...series,
+        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 { timezone } = useParcaContext();
+    const graph = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const [hovering, setHovering] = useState(false);
+    const [relPos, setRelPos] = useState(-1);
+    const [pos, setPos] = useState([0, 0]);
+    const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
+    const idForContextMenu = useId();
+    const [selectedSeries, setSelectedSeries] = useURLState('selectedSeries');
+    const [_, setSelectedTimeframe] = useURLState('gpu_selected_timeframe');
+    const parsedSelectedSeries = useMemo(() => {
+        if (selectedSeries === undefined) {
+            return [];
+        }
+        return JSON.parse(decodeURIComponent(selectedSeries));
+    }, [selectedSeries]);
+    const lineStroke = '1px';
+    const lineStrokeHover = '2px';
+    const lineStrokeSelected = '3px';
+    const graphWidth = width - margin * 1.5 - margin / 2;
+    const paddedFrom = from;
+    const paddedTo = to;
+    const series = useMemo(() => {
+        const transmitSeries = transformToSeries(transmitData);
+        const receiveSeries = transformToSeries(receiveData, true);
+        return [...transmitSeries, ...receiveSeries];
+    }, [transmitData, receiveData]);
+    const extentsY = series.map(function (s) {
+        return d3.extent(s.values, function (d) {
+            return d[1];
+        });
+    });
+    const minY = d3.min(extentsY, function (d) {
+        return d[0];
+    });
+    const maxY = d3.max(extentsY, function (d) {
+        return d[1];
+    });
+    // Setup scales with padded time range
+    const xScale = d3.scaleUtc().domain([paddedFrom, paddedTo]).range([0, graphWidth]);
+    const yScale = d3
+        .scaleLinear()
+        // Ensure domain is symmetric around 0 for balanced visualization
+        .domain([minY ?? 0, maxY ?? 0])
+        .range([height - margin, 0])
+        .nice();
+    const throttledSetPos = throttle(setPos, 20);
+    const onMouseMove = (e) => {
+        if (isContextMenuOpen) {
+            return;
+        }
+        // X/Y coordinate array relative to svg
+        const rel = pointer(e);
+        const xCoordinate = rel[0];
+        const xCoordinateWithoutMargin = xCoordinate - margin;
+        const yCoordinate = rel[1];
+        const yCoordinateWithoutMargin = yCoordinate - margin;
+        throttledSetPos([xCoordinateWithoutMargin, yCoordinateWithoutMargin]);
+    };
+    const trackVisibility = (isVisible) => {
+        setIsContextMenuOpen(isVisible);
+    };
+    const MENU_ID = `areachart-context-menu-${idForContextMenu}`;
+    const { show } = useContextMenu({
+        id: MENU_ID,
+    });
+    const displayMenu = useCallback((e) => {
+        show({
+            event: e,
+        });
+    }, [show]);
+    const getSeriesColor = (series) => {
+        return series.isReceive === true ? '#EAB308' : '#22C55E'; // Yellow for receive, Green for transmit
+    };
+    // 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()
+        .x(d => xScale(d[0]))
+        .y0(yScale(0)) // Start from zero line
+        .y1(d => yScale(d[1])); // Bottom of the area (negative data point)
+    const highlighted = useMemo(() => {
+        if (series.length === 0) {
+            return null;
+        }
+        // Return the closest point as the highlighted point
+        const closestPointPerSeries = series.map(function (s) {
+            const distances = s.values.map(d => {
+                const x = xScale(d[0]) + margin / 2;
+                const y = yScale(d[1]) - margin / 3;
+                return Math.sqrt(Math.pow(pos[0] - x, 2) + Math.pow(pos[1] - y, 2));
+            });
+            const pointIndex = d3.minIndex(distances);
+            const minDistance = distances[pointIndex];
+            return {
+                pointIndex,
+                distance: minDistance,
+            };
+        });
+        const closestSeriesIndex = d3.minIndex(closestPointPerSeries, s => s.distance);
+        const pointIndex = closestPointPerSeries[closestSeriesIndex].pointIndex;
+        const point = series[closestSeriesIndex].values[pointIndex];
+        return {
+            seriesIndex: closestSeriesIndex,
+            labels: series[closestSeriesIndex].metric,
+            timestamp: point[0],
+            valuePerSecond: point[1],
+            value: point[2],
+            duration: point[3],
+            x: xScale(point[0]),
+            y: yScale(point[1]),
+        };
+    }, [pos, series, xScale, yScale, margin]);
+    const onMouseDown = (e) => {
+        // only left mouse button
+        if (e.button !== 0) {
+            return;
+        }
+        // X/Y coordinate array relative to svg
+        const rel = pointer(e);
+        const xCoordinate = rel[0];
+        const xCoordinateWithoutMargin = xCoordinate - margin;
+        if (xCoordinateWithoutMargin >= 0) {
+            setRelPos(xCoordinateWithoutMargin);
+            setDragging(true);
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    };
+    const onMouseUp = (e) => {
+        setDragging(false);
+        if (relPos === -1) {
+            // MouseDown happened outside of this element.
+            return;
+        }
+        // This is a normal click. We tolerate tiny movements to still be a
+        // click as they can occur when clicking based on user feedback.
+        if (Math.abs(relPos - pos[0]) <= 1) {
+            setRelPos(-1);
+            return;
+        }
+        let startPos = relPos;
+        let endPos = pos[0];
+        if (startPos > endPos) {
+            startPos = pos[0];
+            endPos = relPos;
+        }
+        const startCorrection = 10;
+        const endCorrection = 30;
+        const firstTime = xScale.invert(startPos - startCorrection).valueOf();
+        const secondTime = xScale.invert(endPos - endCorrection).valueOf();
+        setTimeRange(DateTimeRange.fromAbsoluteDates(firstTime, secondTime));
+        setRelPos(-1);
+        e.stopPropagation();
+        e.preventDefault();
+    };
+    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) => {
+                                            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()}`));
+                                        }), _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;
+                                                    }
+                                                }
+                                                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));
+                                    }) })] })] }) })] }));
+};
+const AreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, }) => {
+    const { isDarkMode } = useParcaContext();
+    const { width, height, margin, heightStyle } = useMetricsGraphDimensions(false, true);
+    return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "w-full relative", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: utilizationMetricsLoading === true ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode, isMini: true })) : (_jsx(RawAreaChart, { transmitData: transmitData, receiveData: receiveData, addLabelMatcher: addLabelMatcher, setTimeRange: setTimeRange, width: width, height: height, margin: margin, name: name, humanReadableName: humanReadableName, from: from, to: to })) }, "area-chart-graph-loaded") }));
+};
+export default AreaChart;

package/dist/ProfileSelector/MetricsGraphSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricsGraphSection.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/MetricsGraphSection.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAQ,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACxD,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAG5D,OAAO,EAAC,cAAc,EAAE,KAAK,kBAAkB,IAAI,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAE1F,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gCAAgC,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACvB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,kBAAkB,CAAC;IAChC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC;IACb,qBAAqB,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,kBAAkB,CAAC,EAAE,KAAK,CAAC;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,iBAAiB,EAAE,MAAM,CAAC;QAC1B,IAAI,EAAE,sBAAsB,EAAE,CAAC;KAChC,CAAC,CAAC;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,gBAAgB,EAChB,gCAAgC,EAChC,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,mBAAmB,EACnB,WAAW,EACX,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,KAAK,EACL,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,GAC1B,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CA2IxC"}
+{"version":3,"file":"MetricsGraphSection.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/MetricsGraphSection.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAQ,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACxD,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAI5D,OAAO,EAAC,cAAc,EAAE,KAAK,kBAAkB,IAAI,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAE1F,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gCAAgC,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACvB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,kBAAkB,CAAC;IAChC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC;IACb,qBAAqB,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,kBAAkB,CAAC,EAAE,KAAK,CAAC;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,iBAAiB,EAAE,MAAM,CAAC;QAC1B,IAAI,EAAE,sBAAsB,EAAE,CAAC;KAChC,CAAC,CAAC;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,gBAAgB,EAChB,gCAAgC,EAChC,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,mBAAmB,EACnB,WAAW,EACX,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,KAAK,EACL,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,GAC1B,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CA0LxC"}

package/dist/ProfileSelector/MetricsGraphSection.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -15,6 +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 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) => {
@@ -75,7 +76,21 @@ export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGra
         const mergeTo = query.profileType().delta ? mergeFrom + durationInMilliseconds : mergeFrom;
         selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query));
     };
+    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) {
+            return _jsx(_Fragment, {});
+        }
+        return (_jsxs("div", { children: [utilizationMetrics.map(({ name, humanReadableName, data }) => {
+                    if (name !== 'gpu_pcie_throughput_transmit_bytes' &&
+                        name !== 'gpu_pcie_throughput_receive_bytes') {
+                        return (_jsx(_Fragment, { children: _jsx(UtilizationMetricsGraph, { data: data, addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, utilizationMetricsLoading: utilizationMetricsLoading, name: name, humanReadableName: humanReadableName, from: querySelection.from, to: querySelection.to }, name) }));
+                    }
+                    return null;
+                }), throughputMetrics.length > 0 && (_jsx(AreaChart, { transmitData: throughputMetrics[0].data, receiveData: throughputMetrics[1].data, addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, name: throughputMetrics[0].name, humanReadableName: throughputMetrics[0].humanReadableName, from: querySelection.from, to: querySelection.to, utilizationMetricsLoading: utilizationMetricsLoading }))] }));
+    };
     return (_jsxs("div", { className: cx('relative', { 'py-4': !showMetricsGraph }), children: [setDisplayHideMetricsGraphButton != null ? (_jsxs("button", { onClick: () => setDisplayHideMetricsGraphButton(!showMetricsGraph), className: cx('hidden px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900 z-10', showMetricsGraph && 'absolute right-0 bottom-3 !flex', !showMetricsGraph && 'relative !flex ml-auto'), children: [showMetricsGraph ? 'Hide' : 'Show', " Metrics Graph"] })) : null, showMetricsGraph && (_jsx(_Fragment, { children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== '' &&
                         querySelection.from !== undefined &&
-                        querySelection.to !== undefined ? (_jsx(_Fragment, { children: utilizationMetrics !== undefined ? (utilizationMetrics.map(({ name, humanReadableName, data }) => (_jsx(_Fragment, { children: _jsx(UtilizationMetricsGraph, { data: data, addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, utilizationMetricsLoading: utilizationMetricsLoading, name: name, humanReadableName: humanReadableName, from: querySelection.from, to: querySelection.to }, name) })))) : (_jsx(_Fragment, { children: _jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? sumBy ?? [], sumByLoading: defaultSumByLoading, setTimeRange: handleTimeRangeChange, addLabelMatcher: addLabelMatcher, onPointClick: handlePointClick }) })) })) : (profileSelection === null && (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsEmptyState, { message: "Please select a profile type and click 'Search' to begin." }) }))) }) }))] }));
+                        querySelection.to !== undefined ? (_jsx(_Fragment, { children: utilizationMetrics !== undefined ? (_jsx(UtilizationGraphToShow, { utilizationMetrics: utilizationMetrics })) : (_jsx(_Fragment, { children: _jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? sumBy ?? [], sumByLoading: defaultSumByLoading, setTimeRange: handleTimeRangeChange, addLabelMatcher: addLabelMatcher, onPointClick: handlePointClick }) })) })) : (profileSelection === null && (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsEmptyState, { message: "Please select a profile type and click 'Search' to begin." }) }))) }) }))] }));
 }

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.497",
+  "version": "0.16.498",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.16.128",
-    "@parca/components": "0.16.328",
+    "@parca/components": "0.16.329",
     "@parca/dynamicsize": "0.16.65",
-    "@parca/hooks": "0.0.83",
+    "@parca/hooks": "0.0.84",
     "@parca/icons": "0.16.71",
     "@parca/parser": "0.16.78",
-    "@parca/store": "0.16.168",
-    "@parca/utilities": "0.0.94",
+    "@parca/store": "0.16.169",
+    "@parca/utilities": "0.0.95",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@storybook/preview-api": "^8.4.3",
@@ -77,5 +77,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "3bc555cbbc3e53222bbd799218fc01149d8274d3"
+  "gitHead": "fc0740783d9673d30bf0020d3744bceaba02a345"
 }

package/src/MetricsGraph/UtilizationMetrics/AreaChart.tsx

@@ -0,0 +1,605 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {Fragment, useCallback, useId, useMemo, useRef, useState} from 'react';
+
+import * as d3 from 'd3';
+import {pointer} from 'd3-selection';
+import {AnimatePresence, motion} from 'framer-motion';
+import throttle from 'lodash.throttle';
+import {useContextMenu} from 'react-contexify';
+
+import {DateTimeRange, MetricsGraphSkeleton, useParcaContext, useURLState} from '@parca/components';
+import {Matcher} from '@parca/parser';
+import {formatDate, formatForTimespan, getPrecision, valueFormatter} from '@parca/utilities';
+
+import {type UtilizationMetrics as MetricSeries} from '../../ProfileSelector';
+import MetricsContextMenu from '../MetricsContextMenu';
+import MetricsTooltip from '../MetricsTooltip';
+import {useMetricsGraphDimensions} from '../useMetricsGraphDimensions';
+
+interface NetworkLabel {
+  name: string;
+  value: string;
+}
+
+interface NetworkSeries {
+  metric: NetworkLabel[];
+  values: number[][];
+  labelset: string;
+  isReceive?: boolean;
+}
+
+interface CommonProps {
+  transmitData: MetricSeries[];
+  receiveData: MetricSeries[];
+  addLabelMatcher: (
+    labels: {key: string; value: string} | Array<{key: string; value: string}>
+  ) => void;
+  setTimeRange: (range: DateTimeRange) => void;
+  name: string;
+  humanReadableName: string;
+  from: number;
+  to: number;
+}
+
+type RawAreaChartProps = CommonProps & {
+  width: number;
+  height: number;
+  margin: number;
+};
+
+type Props = CommonProps & {
+  utilizationMetricsLoading?: boolean;
+};
+
+interface MetricsSample {
+  timestamp: number;
+  value: number;
+}
+
+function transformToSeries(data: MetricSeries[], isReceive = false): NetworkSeries[] {
+  const series: NetworkSeries[] = data.reduce<NetworkSeries[]>(function (
+    agg: NetworkSeries[],
+    s: MetricSeries
+  ) {
+    if (s.labelset !== undefined) {
+      const metric = s.labelset.labels.sort((a, b) => a.name.localeCompare(b.name));
+      agg.push({
+        metric,
+        values: s.samples.reduce<number[][]>(function (agg: number[][], d: MetricsSample) {
+          if (d.timestamp !== undefined && d.value !== undefined) {
+            // Multiply receive values by -1 to display below zero
+            const value = isReceive ? -1 * d.value : d.value;
+            agg.push([d.timestamp, value]);
+          }
+          return agg;
+        }, []),
+        labelset: metric.map(m => `${m.name}=${m.value}`).join(','),
+        isReceive,
+      });
+    }
+    return agg;
+  },
+  []);
+
+  // Sort values by timestamp for each series
+  return series.map(series => ({
+    ...series,
+    values: series.values.sort((a, b) => a[0] - b[0]),
+  }));
+}
+
+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,
+  addLabelMatcher,
+  setTimeRange,
+  width,
+  height,
+  margin,
+  name,
+  humanReadableName,
+  from,
+  to,
+}: RawAreaChartProps): JSX.Element => {
+  const {timezone} = useParcaContext();
+  const graph = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const [hovering, setHovering] = useState(false);
+  const [relPos, setRelPos] = useState(-1);
+  const [pos, setPos] = useState([0, 0]);
+  const [isContextMenuOpen, setIsContextMenuOpen] = useState<boolean>(false);
+  const idForContextMenu = useId();
+  const [selectedSeries, setSelectedSeries] = useURLState<string>('selectedSeries');
+  const [_, setSelectedTimeframe] = useURLState('gpu_selected_timeframe');
+
+  const parsedSelectedSeries: Matcher[] = useMemo(() => {
+    if (selectedSeries === undefined) {
+      return [];
+    }
+
+    return JSON.parse(decodeURIComponent(selectedSeries));
+  }, [selectedSeries]);
+
+  const lineStroke = '1px';
+  const lineStrokeHover = '2px';
+  const lineStrokeSelected = '3px';
+
+  const graphWidth = width - margin * 1.5 - margin / 2;
+
+  const paddedFrom = from;
+  const paddedTo = to;
+
+  const series = useMemo(() => {
+    const transmitSeries = transformToSeries(transmitData);
+    const receiveSeries = transformToSeries(receiveData, true);
+    return [...transmitSeries, ...receiveSeries];
+  }, [transmitData, receiveData]);
+
+  const extentsY = series.map(function (s) {
+    return d3.extent(s.values, function (d) {
+      return d[1];
+    });
+  });
+
+  const minY = d3.min(extentsY, function (d) {
+    return d[0];
+  });
+
+  const maxY = d3.max(extentsY, function (d) {
+    return d[1];
+  });
+
+  // Setup scales with padded time range
+  const xScale = d3.scaleUtc().domain([paddedFrom, paddedTo]).range([0, graphWidth]);
+
+  const yScale = d3
+    .scaleLinear()
+    // Ensure domain is symmetric around 0 for balanced visualization
+    .domain([minY ?? 0, maxY ?? 0])
+    .range([height - margin, 0])
+    .nice();
+
+  const throttledSetPos = throttle(setPos, 20);
+
+  const onMouseMove = (e: React.MouseEvent<SVGSVGElement | HTMLDivElement, MouseEvent>): void => {
+    if (isContextMenuOpen) {
+      return;
+    }
+
+    // X/Y coordinate array relative to svg
+    const rel = pointer(e);
+
+    const xCoordinate = rel[0];
+    const xCoordinateWithoutMargin = xCoordinate - margin;
+    const yCoordinate = rel[1];
+    const yCoordinateWithoutMargin = yCoordinate - margin;
+
+    throttledSetPos([xCoordinateWithoutMargin, yCoordinateWithoutMargin]);
+  };
+
+  const trackVisibility = (isVisible: boolean): void => {
+    setIsContextMenuOpen(isVisible);
+  };
+
+  const MENU_ID = `areachart-context-menu-${idForContextMenu}`;
+
+  const {show} = useContextMenu({
+    id: MENU_ID,
+  });
+
+  const displayMenu = useCallback(
+    (e: React.MouseEvent): void => {
+      show({
+        event: e,
+      });
+    },
+    [show]
+  );
+
+  const getSeriesColor = (series: NetworkSeries): string => {
+    return series.isReceive === true ? '#EAB308' : '#22C55E'; // Yellow for receive, Green for transmit
+  };
+
+  // Create area generator for transmit (above zero)
+  const transmitArea = d3
+    .area<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)
+
+  const highlighted = useMemo(() => {
+    if (series.length === 0) {
+      return null;
+    }
+
+    // Return the closest point as the highlighted point
+    const closestPointPerSeries = series.map(function (s) {
+      const distances = s.values.map(d => {
+        const x = xScale(d[0]) + margin / 2;
+        const y = yScale(d[1]) - margin / 3;
+
+        return Math.sqrt(Math.pow(pos[0] - x, 2) + Math.pow(pos[1] - y, 2));
+      });
+
+      const pointIndex = d3.minIndex(distances);
+      const minDistance = distances[pointIndex];
+
+      return {
+        pointIndex,
+        distance: minDistance,
+      };
+    });
+
+    const closestSeriesIndex = d3.minIndex(closestPointPerSeries, s => s.distance);
+    const pointIndex = closestPointPerSeries[closestSeriesIndex].pointIndex;
+    const point = series[closestSeriesIndex].values[pointIndex];
+    return {
+      seriesIndex: closestSeriesIndex,
+      labels: series[closestSeriesIndex].metric,
+      timestamp: point[0],
+      valuePerSecond: point[1],
+      value: point[2],
+      duration: point[3],
+      x: xScale(point[0]),
+      y: yScale(point[1]),
+    };
+  }, [pos, series, xScale, yScale, margin]);
+
+  const onMouseDown = (e: React.MouseEvent<SVGSVGElement | HTMLDivElement, MouseEvent>): void => {
+    // only left mouse button
+    if (e.button !== 0) {
+      return;
+    }
+
+    // X/Y coordinate array relative to svg
+    const rel = pointer(e);
+
+    const xCoordinate = rel[0];
+    const xCoordinateWithoutMargin = xCoordinate - margin;
+    if (xCoordinateWithoutMargin >= 0) {
+      setRelPos(xCoordinateWithoutMargin);
+      setDragging(true);
+    }
+
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const onMouseUp = (e: React.MouseEvent<SVGSVGElement | HTMLDivElement, MouseEvent>): void => {
+    setDragging(false);
+
+    if (relPos === -1) {
+      // MouseDown happened outside of this element.
+      return;
+    }
+
+    // This is a normal click. We tolerate tiny movements to still be a
+    // click as they can occur when clicking based on user feedback.
+    if (Math.abs(relPos - pos[0]) <= 1) {
+      setRelPos(-1);
+      return;
+    }
+
+    let startPos = relPos;
+    let endPos = pos[0];
+
+    if (startPos > endPos) {
+      startPos = pos[0];
+      endPos = relPos;
+    }
+
+    const startCorrection = 10;
+    const endCorrection = 30;
+
+    const firstTime = xScale.invert(startPos - startCorrection).valueOf();
+    const secondTime = xScale.invert(endPos - endCorrection).valueOf();
+
+    setTimeRange(DateTimeRange.fromAbsoluteDates(firstTime, secondTime));
+
+    setRelPos(-1);
+
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  return (
+    <>
+      <MetricsContextMenu
+        onAddLabelMatcher={addLabelMatcher}
+        menuId={MENU_ID}
+        highlighted={highlighted}
+        trackVisibility={trackVisibility}
+        utilizationMetrics={true}
+      />
+
+      {highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (
+        <div
+          onMouseMove={onMouseMove}
+          onMouseEnter={() => setHovering(true)}
+          onMouseLeave={() => setHovering(false)}
+        >
+          {!isContextMenuOpen && (
+            <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}
+            />
+          )}
+        </div>
+      )}
+      <div
+        ref={graph}
+        onMouseEnter={() => setHovering(true)}
+        onMouseLeave={() => setHovering(false)}
+        onContextMenu={displayMenu}
+      >
+        <svg
+          width={`${width}px`}
+          height={`${height + margin}px`}
+          onMouseDown={onMouseDown}
+          onMouseUp={onMouseUp}
+          onMouseMove={onMouseMove}
+        >
+          <g transform={`translate(${margin}, 0)`}>
+            {dragging && (
+              <g className="zoom-time-rect">
+                <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)'}
+                />
+              </g>
+            )}
+          </g>
+          <g transform={`translate(${margin * 1.5}, ${margin / 1.5})`}>
+            <g className="y axis" textAnchor="end" fontSize="10" fill="none">
+              {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 (
+                  <Fragment key={`${i.toString()}-${d.toString()}`}>
+                    <g key={`tick-${i}`} className="tick" transform={`translate(0, ${yScale(d)})`}>
+                      <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)}
+                      </text>
+                    </g>
+                    <g key={`grid-${i}`}>
+                      <line
+                        className="stroke-gray-300 dark:stroke-gray-500"
+                        x1={xScale(from)}
+                        x2={xScale(to)}
+                        y1={yScale(d)}
+                        y2={yScale(d)}
+                      />
+                    </g>
+                  </Fragment>
+                );
+              })}
+              <line
+                className="stroke-gray-300 dark:stroke-gray-500"
+                x1={0}
+                x2={0}
+                y1={0}
+                y2={height - margin}
+              />
+              <line
+                className="stroke-gray-300 dark:stroke-gray-500"
+                x1={xScale(to)}
+                x2={xScale(to)}
+                y1={0}
+                y2={height - margin}
+              />
+              <g transform={`translate(${-margin}, ${(height - margin) / 2}) rotate(270)`}>
+                <text
+                  fill="currentColor"
+                  dy="-0.7em"
+                  className="text-sm capitalize"
+                  textAnchor="middle"
+                >
+                  {humanReadableName}
+                </text>
+              </g>
+            </g>
+            <g
+              className="x axis"
+              fill="none"
+              fontSize="10"
+              textAnchor="middle"
+              transform={`translate(0,${height - margin})`}
+            >
+              {xScale.ticks(5).map((d, i) => (
+                <Fragment key={`${i.toString()}-${d.toString()}`}>
+                  <g
+                    key={`tick-${i}`}
+                    className="tick"
+                    /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
+                    transform={`translate(${xScale(d)}, 0)`}
+                  >
+                    <line y2={6} className="stroke-gray-300 dark:stroke-gray-500" />
+                    <text fill="currentColor" dy=".71em" y={9}>
+                      {formatDate(d, formatForTimespan(from, to), timezone)}
+                    </text>
+                  </g>
+                  <g key={`grid-${i}`}>
+                    <line
+                      className="stroke-gray-300 dark:stroke-gray-500"
+                      x1={xScale(d)}
+                      x2={xScale(d)}
+                      y1={0}
+                      y2={-height + margin}
+                    />
+                  </g>
+                </Fragment>
+              ))}
+              <line
+                className="stroke-gray-300 dark:stroke-gray-500"
+                x1={0}
+                x2={graphWidth}
+                y1={0}
+                y2={0}
+              />
+              <g transform={`translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`}>
+                <text fill="currentColor" dy=".71em" y={5} className="text-sm">
+                  Time
+                </text>
+              </g>
+            </g>
+            <g className="areas">
+              {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 (
+                  <g key={i} className="area cursor-pointer">
+                    <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);
+                        }
+                      }}
+                    />
+                  </g>
+                );
+              })}
+            </g>
+          </g>
+        </svg>
+      </div>
+    </>
+  );
+};
+
+const AreaChart = ({
+  transmitData,
+  receiveData,
+  addLabelMatcher,
+  setTimeRange,
+  utilizationMetricsLoading,
+  name,
+  humanReadableName,
+  from,
+  to,
+}: Props): JSX.Element => {
+  const {isDarkMode} = useParcaContext();
+  const {width, height, margin, heightStyle} = useMetricsGraphDimensions(false, true);
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        className="w-full relative"
+        key="area-chart-graph-loaded"
+        initial={{display: 'none', opacity: 0}}
+        animate={{display: 'block', opacity: 1}}
+        transition={{duration: 0.5}}
+      >
+        {utilizationMetricsLoading === true ? (
+          <MetricsGraphSkeleton heightStyle={heightStyle} isDarkMode={isDarkMode} isMini={true} />
+        ) : (
+          <RawAreaChart
+            transmitData={transmitData}
+            receiveData={receiveData}
+            addLabelMatcher={addLabelMatcher}
+            setTimeRange={setTimeRange}
+            width={width}
+            height={height}
+            margin={margin}
+            name={name}
+            humanReadableName={humanReadableName}
+            from={from}
+            to={to}
+          />
+        )}
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default AreaChart;

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -19,6 +19,7 @@ import {Query} from '@parca/parser';
 
 import {MergedProfileSelection, ProfileSelection} from '..';
 import UtilizationMetricsGraph from '../MetricsGraph/UtilizationMetrics';
+import AreaChart from '../MetricsGraph/UtilizationMetrics/AreaChart';
 import ProfileMetricsGraph, {ProfileMetricsEmptyState} from '../ProfileMetricsGraph';
 import {QuerySelection, type UtilizationMetrics as UtilizationMetricsType} from './index';
 
@@ -137,6 +138,67 @@ export function MetricsGraphSection({
     selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query));
   };
 
+  const UtilizationGraphToShow = ({
+    utilizationMetrics,
+  }: {
+    utilizationMetrics: Array<{
+      name: string;
+      humanReadableName: string;
+      data: UtilizationMetricsType[];
+    }>;
+  }): JSX.Element => {
+    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) {
+      return <></>;
+    }
+
+    return (
+      <div>
+        {utilizationMetrics.map(({name, humanReadableName, data}) => {
+          if (
+            name !== 'gpu_pcie_throughput_transmit_bytes' &&
+            name !== 'gpu_pcie_throughput_receive_bytes'
+          ) {
+            return (
+              <>
+                <UtilizationMetricsGraph
+                  key={name}
+                  data={data}
+                  addLabelMatcher={addLabelMatcher}
+                  setTimeRange={handleTimeRangeChange}
+                  utilizationMetricsLoading={utilizationMetricsLoading}
+                  name={name}
+                  humanReadableName={humanReadableName}
+                  from={querySelection.from}
+                  to={querySelection.to}
+                />
+              </>
+            );
+          }
+          return null;
+        })}
+        {throughputMetrics.length > 0 && (
+          <AreaChart
+            transmitData={throughputMetrics[0].data}
+            receiveData={throughputMetrics[1].data}
+            addLabelMatcher={addLabelMatcher}
+            setTimeRange={handleTimeRangeChange}
+            name={throughputMetrics[0].name}
+            humanReadableName={throughputMetrics[0].humanReadableName}
+            from={querySelection.from}
+            to={querySelection.to}
+            utilizationMetricsLoading={utilizationMetricsLoading}
+          />
+        )}
+      </div>
+    );
+  };
+
   return (
     <div className={cx('relative', {'py-4': !showMetricsGraph})}>
       {setDisplayHideMetricsGraphButton != null ? (
@@ -159,21 +221,7 @@ export function MetricsGraphSection({
             querySelection.to !== undefined ? (
               <>
                 {utilizationMetrics !== undefined ? (
-                  utilizationMetrics.map(({name, humanReadableName, data}) => (
-                    <>
-                      <UtilizationMetricsGraph
-                        key={name}
-                        data={data}
-                        addLabelMatcher={addLabelMatcher}
-                        setTimeRange={handleTimeRangeChange}
-                        utilizationMetricsLoading={utilizationMetricsLoading}
-                        name={name}
-                        humanReadableName={humanReadableName}
-                        from={querySelection.from}
-                        to={querySelection.to}
-                      />
-                    </>
-                  ))
+                  <UtilizationGraphToShow utilizationMetrics={utilizationMetrics} />
                 ) : (
                   <>
                     <ProfileMetricsGraph