@parca/profile 0.16.496 → 0.16.498

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.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
+
 ## 0.16.496 (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/dist/ProfileSelector/index.d.ts

@@ -35,6 +35,7 @@ export interface UtilizationLabels {
     utilizationLabelNames?: string[];
     utilizationFetchLabelValues?: (key: string) => Promise<string[]>;
     utilizationLabelValues?: string[];
+    utilizationLabelNamesLoading?: boolean;
 }
 interface ProfileSelectorProps extends ProfileSelectorFeatures {
     queryClient: QueryServiceClient;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,QAAQ,EAAE,cAAc,EAAuC,MAAM,OAAO,CAAC;AAErF,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAC,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAUvE,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAC,gBAAgB,EAAC,MAAM,IAAI,CAAC;AASpC,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,uBAAuB;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE;QACR,MAAM,EAAE,KAAK,CAAC;YACZ,IAAI,EAAE,MAAM,CAAC;YACb,KAAK,EAAE,MAAM,CAAC;SACf,CAAC,CAAC;KACJ,CAAC;IACF,OAAO,EAAE,KAAK,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,iBAAiB;IAChC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,2BAA2B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACjE,sBAAsB,CAAC,EAAE,MAAM,EAAE,CAAC;CACnC;AAED,UAAU,oBAAqB,SAAQ,uBAAuB;IAC5D,WAAW,EAAE,kBAAkB,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,gCAAgC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,KAAK,CAAC;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,iBAAiB,EAAE,MAAM,CAAC;QAC1B,IAAI,EAAE,kBAAkB,EAAE,CAAC;KAC5B,CAAC,CAAC;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,WAAY,kBAAkB,KAAG,mBAkB5D,CAAC;AAEF,QAAA,MAAM,eAAe,2UAkBlB,oBAAoB,KAAG,GAAG,CAAC,OAkN7B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,QAAQ,EAAE,cAAc,EAAuC,MAAM,OAAO,CAAC;AAErF,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAC,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAUvE,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAC,gBAAgB,EAAC,MAAM,IAAI,CAAC;AASpC,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,uBAAuB;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE;QACR,MAAM,EAAE,KAAK,CAAC;YACZ,IAAI,EAAE,MAAM,CAAC;YACb,KAAK,EAAE,MAAM,CAAC;SACf,CAAC,CAAC;KACJ,CAAC;IACF,OAAO,EAAE,KAAK,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,iBAAiB;IAChC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,2BAA2B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACjE,sBAAsB,CAAC,EAAE,MAAM,EAAE,CAAC;IAClC,4BAA4B,CAAC,EAAE,OAAO,CAAC;CACxC;AAED,UAAU,oBAAqB,SAAQ,uBAAuB;IAC5D,WAAW,EAAE,kBAAkB,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,gCAAgC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,KAAK,CAAC;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,iBAAiB,EAAE,MAAM,CAAC;QAC1B,IAAI,EAAE,kBAAkB,EAAE,CAAC;KAC5B,CAAC,CAAC;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,WAAY,kBAAkB,KAAG,mBAkB5D,CAAC;AAEF,QAAA,MAAM,eAAe,2UAkBlB,oBAAoB,KAAG,GAAG,CAAC,OAkN7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/SimpleMatchers/Select.d.ts

@@ -8,8 +8,15 @@ export interface SelectItem {
     disabled?: boolean;
     element: SelectElement;
 }
+export interface TypedSelectItem extends SelectItem {
+    type: string;
+}
+export interface GroupedSelectItem {
+    type: string;
+    values: SelectItem[];
+}
 interface CustomSelectProps {
-    items: SelectItem[];
+    items: GroupedSelectItem[] | SelectItem[];
     selectedKey: string | undefined;
     onSelection: (value: string) => void;
     placeholder?: string;

package/dist/SimpleMatchers/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/Select.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8Q7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/Select.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,iBAAiB,EAAE,GAAG,UAAU,EAAE,CAAC;IAC1C,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqR7C,CAAC;AAkDF,eAAe,YAAY,CAAC"}

package/dist/SimpleMatchers/Select.js

@@ -15,8 +15,8 @@ import { useEffect, useRef, useState } from 'react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
 import levenshtein from 'fast-levenshtein';
-import { Button, useParcaContext } from '@parca/components';
-const CustomSelect = ({ items, selectedKey, onSelection, placeholder = 'Select an item', width, className = '', loading, primary = false, disabled = false, icon, id, optionsClassname = '', searchable = false, onButtonClick, editable = false, }) => {
+import { Button, DividerWithLabel, useParcaContext } from '@parca/components';
+const CustomSelect = ({ items: itemsProp, selectedKey, onSelection, placeholder = 'Select an item', width, className = '', loading, primary = false, disabled = false, icon, id, optionsClassname = '', searchable = false, onButtonClick, editable = false, }) => {
     const { loader } = useParcaContext();
     const [isOpen, setIsOpen] = useState(false);
     const [focusedIndex, setFocusedIndex] = useState(-1);
@@ -25,6 +25,13 @@ const CustomSelect = ({ items, selectedKey, onSelection, placeholder = 'Select a
     const optionsRef = useRef(null);
     const searchInputRef = useRef(null);
     const optionRefs = useRef([]);
+    let items = [];
+    if (itemsProp[0] != null && 'type' in itemsProp[0]) {
+        items = itemsProp.flatMap(item => item.values.map(v => ({ ...v, type: item.type })));
+    }
+    else {
+        items = itemsProp.map(item => ({ ...item, type: '' }));
+    }
     const filteredItems = searchable
         ? items
             .filter(item => item.element.active.props.children
@@ -139,19 +146,32 @@ const CustomSelect = ({ items, selectedKey, onSelection, placeholder = 'Select a
         e.target.value = '';
         e.target.value = value;
     };
+    const groupedFilteredItems = filteredItems
+        .reduce((acc, item) => {
+        const group = acc.find(g => g.type === item.type);
+        if (group != null) {
+            group.values.push(item);
+        }
+        else {
+            acc.push({ type: item.type, values: [item] });
+        }
+        return acc;
+    }, [])
+        .sort((a, b) => a.values.length - b.values.length);
     return (_jsxs("div", { ref: containerRef, className: "relative", onKeyDown: handleKeyDown, onClick: onButtonClick, children: [_jsxs("div", { id: id, onClick: () => !disabled && setIsOpen(!isOpen), className: cx(styles, width !== undefined ? `w-${width}` : 'w-full', disabled ? 'cursor-not-allowed opacity-50 pointer-events-none' : '', primary ? primaryStyles : defaultStyles, { [className]: className.length > 0 }), tabIndex: 0, role: "button", "aria-haspopup": "listbox", "aria-expanded": isOpen, children: [_jsx("div", { className: cx(icon != null ? '' : 'block overflow-x-hidden text-ellipsis whitespace-nowrap'), children: renderSelection(selection) }), _jsx("div", { className: cx(icon != null ? '' : 'pointer-events-none text-gray-400'), children: icon ?? _jsx(Icon, { icon: "heroicons:chevron-up-down-20-solid", "aria-hidden": "true" }) })] }), isOpen && (_jsxs("div", { ref: optionsRef, className: cx('absolute z-50 mt-1 pt-0 max-h-[50vh] w-max overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm', { [optionsClassname]: optionsClassname.length > 0 }), role: "listbox", children: [searchable && (_jsx("div", { className: "sticky z-10 top-[-5px] w-auto max-w-full", children: _jsx("div", { className: "flex flex-col", children: editable ? (_jsxs(_Fragment, { children: [_jsx("textarea", { ref: searchInputRef, className: "w-full px-4 py-2 text-sm border-b border-gray-200 rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white min-h-[50px]", placeholder: "Type a RegEx to add", value: searchTerm, onChange: e => setSearchTerm(e.target.value), onFocus: e => moveCaretToEnd(e) }), editable && searchTerm.length > 0 && (_jsx("div", { className: "p-2 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800", children: _jsx(Button, { variant: "primary", className: "w-full h-[30px]", onClick: () => {
                                                 onSelection(searchTerm);
                                                 setIsOpen(false);
-                                            }, children: "Add" }) }))] })) : (_jsx("input", { ref: searchInputRef, type: "text", className: "w-full px-4 h-[45px] text-sm border-none rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white", placeholder: "Search...", value: searchTerm, onChange: e => setSearchTerm(e.target.value) })) }) })), loading === true ? (_jsx("div", { className: "w-[270px]", children: loader })) : (filteredItems.map((item, index) => (_jsxs("div", { ref: el => {
-                            if (el !== null) {
-                                optionRefs.current[index] = el;
-                            }
-                        }, className: cx('relative cursor-default select-none py-2 pl-3 pr-9', index === focusedIndex && 'bg-indigo-600 text-white', item.key === selectedKey && 'bg-indigo-100 dark:bg-indigo-700', item.disabled !== null &&
-                            item.disabled === true &&
-                            'opacity-50 cursor-not-allowed', 'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 hover:bg-indigo-600 hover:text-white'), role: "option", "aria-selected": item.key === selectedKey, tabIndex: -1, onClick: () => {
-                            if (!(item.disabled ?? false)) {
-                                handleSelection(item.key);
-                            }
-                        }, children: [item.element.expanded, item.key === selectedKey && (_jsx("span", { className: "absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600", children: _jsx(Icon, { icon: "heroicons:check-20-solid", "aria-hidden": "true" }) }))] }, item.key))))] }))] }));
+                                            }, children: "Add" }) }))] })) : (_jsx("input", { ref: searchInputRef, type: "text", className: "w-full px-4 h-[45px] text-sm border-none rounded-none ring-0 outline-none bg-gray-50 dark:bg-gray-800 dark:text-white", placeholder: "Search...", value: searchTerm, onChange: e => setSearchTerm(e.target.value) })) }) })), loading === true ? (_jsx("div", { className: "w-[270px]", children: loader })) : (groupedFilteredItems.map(group => (_jsxs(_Fragment, { children: [groupedFilteredItems.length > 1 ? (_jsx("div", { className: "pl-2", children: _jsx(DividerWithLabel, { label: group.type }) })) : null, group.values.map((item, index) => (_jsx(OptionItem, { item: item, index: index, optionRefs: optionRefs, focusedIndex: focusedIndex, selectedKey: selectedKey, handleSelection: handleSelection }, item.key)))] }))))] }))] }));
+};
+const OptionItem = ({ item, optionRefs, index, focusedIndex, selectedKey, handleSelection, }) => {
+    return (_jsxs("div", { ref: el => {
+            if (el !== null) {
+                optionRefs.current[index] = el;
+            }
+        }, className: cx('relative cursor-default select-none py-2 pl-3 pr-9', index === focusedIndex && 'bg-indigo-600 text-white', item.key === selectedKey && 'bg-indigo-100 dark:bg-indigo-700', item.disabled !== null && item.disabled === true && 'opacity-50 cursor-not-allowed', 'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 hover:bg-indigo-600 hover:text-white'), role: "option", "aria-selected": item.key === selectedKey, tabIndex: -1, onClick: () => {
+            if (!(item.disabled ?? false)) {
+                handleSelection(item.key);
+            }
+        }, children: [item.element.expanded, item.key === selectedKey && (_jsx("span", { className: "absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600", children: _jsx(Icon, { icon: "heroicons:check-20-solid", "aria-hidden": "true" }) }))] }));
 };
 export default CustomSelect;

package/dist/SimpleMatchers/index.d.ts

@@ -9,7 +9,7 @@ interface Props {
     profileType: string;
     queryBrowserRef: React.RefObject<HTMLDivElement>;
 }
-export declare const transformLabelsForSelect: (labelNames: string[], shouldTrimPrefix?: boolean) => SelectItem[];
+export declare const transformLabelsForSelect: (labelNames: string[]) => SelectItem[];
 export default function SimpleMathersWithProvider(props: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAKpC,OAAe,EAAC,KAAK,UAAU,EAAC,MAAM,UAAU,CAAC;AAEjD,UAAU,KAAK;IACb,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,KAAK,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAClD;AAUD,eAAO,MAAM,wBAAwB,eACvB,MAAM,EAAE,iCAEnB,UAAU,EAQZ,CAAC;AA+UF,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkB3E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SimpleMatchers/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAKpC,OAAe,EAAC,KAAK,UAAU,EAAC,MAAM,UAAU,CAAC;AAEjD,UAAU,KAAK;IACb,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,KAAK,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CAClD;AAoBD,eAAO,MAAM,wBAAwB,eAAgB,MAAM,EAAE,KAAG,UAAU,EAQzE,CAAC;AAwUF,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkB3E"}

package/dist/SimpleMatchers/index.js

@@ -20,12 +20,21 @@ import { sanitizeLabelValue } from '@parca/utilities';
 import { LabelProvider, useLabels } from '../contexts/SimpleMatchersLabelContext';
 import { useUtilizationLabels } from '../contexts/UtilizationLabelsContext';
 import Select from './Select';
-export const transformLabelsForSelect = (labelNames, shouldTrimPrefix = false) => {
+const trimOtelPrefix = (labelName) => {
+    if (labelName.startsWith('attributes_resource.')) {
+        return labelName.replace('attributes_resource.', '');
+    }
+    if (labelName.startsWith('attributes.')) {
+        return labelName.replace('attributes.', '');
+    }
+    return labelName;
+};
+export const transformLabelsForSelect = (labelNames) => {
     return labelNames.map(labelName => ({
         key: labelName,
         element: {
-            active: _jsx(_Fragment, { children: shouldTrimPrefix ? labelName.split('.').pop() : labelName }),
-            expanded: _jsx(_Fragment, { children: shouldTrimPrefix ? labelName.split('.').pop() : labelName }),
+            active: _jsx(_Fragment, { children: trimOtelPrefix(labelName) }),
+            expanded: _jsx(_Fragment, { children: trimOtelPrefix(labelName) }),
         },
     }));
 };
@@ -100,6 +109,14 @@ const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileT
             .join(',');
         setMatchersString(matcherString);
     }, [setMatchersString]);
+    const { labelNameOptions, isLoading: labelNamesLoading } = useLabels();
+    const fetchLabelValuesUnified = useCallback(async (labelName) => {
+        const labelType = labelNameOptions.find(option => option.values.some(e => e.key === labelName))?.type;
+        const labelValues = labelType === 'gpu'
+            ? await fetchLabelValuesUtilization(labelName)
+            : await fetchLabelValues(labelName);
+        return labelValues;
+    }, [fetchLabelValues, fetchLabelValuesUtilization, labelNameOptions]);
     useEffect(() => {
         if (currentMatchers === '') {
             return;
@@ -113,9 +130,7 @@ const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileT
                 const trimmedLabelName = labelName.trim();
                 if (trimmedLabelName === '')
                     return null;
-                const labelValues = utilizationLabels?.utilizationFetchLabelValues !== undefined
-                    ? await fetchLabelValuesUtilization(trimmedLabelName)
-                    : await fetchLabelValues(trimmedLabelName);
+                const labelValues = await fetchLabelValuesUnified(trimmedLabelName);
                 const sanitizedLabelValue = labelValue.startsWith('"') && labelValue.endsWith('"')
                     ? labelValue.slice(1, -1)
                     : labelValue;
@@ -131,14 +146,7 @@ const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileT
             updateMatchersString(filteredRows);
         };
         void fetchAndSetQueryRows();
-    }, [
-        currentMatchers,
-        fetchLabelValues,
-        updateMatchersString,
-        fetchLabelValuesUtilization,
-        utilizationLabels,
-    ]);
-    const { labelNameOptions, isLoading: labelNamesLoading } = useLabels();
+    }, [currentMatchers, fetchLabelValuesUnified, updateMatchersString]);
     const updateRow = useCallback(async (index, field, value) => {
         const updatedRows = [...queryRows];
         const prevLabelName = updatedRows[index].labelName;
@@ -148,21 +156,13 @@ const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileT
             updatedRows[index].labelValue = '';
             updatedRows[index].isLoading = true;
             setQueryRows([...updatedRows]);
-            const labelValues = utilizationLabels?.utilizationFetchLabelValues !== undefined
-                ? await fetchLabelValuesUtilization(value)
-                : await fetchLabelValues(value);
+            const labelValues = await fetchLabelValuesUnified(value);
             updatedRows[index].labelValues = labelValues;
             updatedRows[index].isLoading = false;
         }
         setQueryRows([...updatedRows]);
         updateMatchersString(updatedRows);
-    }, [
-        queryRows,
-        fetchLabelValues,
-        updateMatchersString,
-        fetchLabelValuesUtilization,
-        utilizationLabels,
-    ]);
+    }, [queryRows, fetchLabelValuesUnified, updateMatchersString]);
     const handleUpdateRow = useCallback((index, field, value) => {
         void updateRow(index, field, value);
     }, [updateRow]);
@@ -200,9 +200,7 @@ const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileT
                 updatedRows[index].isLoading = true;
                 setQueryRows([...updatedRows]);
                 try {
-                    const labelValues = utilizationLabels?.utilizationFetchLabelValues !== undefined
-                        ? await fetchLabelValuesUtilization(updatedRows[index].labelName)
-                        : await fetchLabelValues(updatedRows[index].labelName);
+                    const labelValues = await fetchLabelValuesUnified(updatedRows[index].labelName);
                     updatedRows[index].labelValues = labelValues;
                 }
                 catch (error) {
@@ -217,7 +215,7 @@ const SimpleMatchers = ({ queryClient, setMatchersString, currentQuery, profileT
                 console.log(`Label values already present or empty label name`);
             }
         };
-    }, [queryRows, fetchLabelValues, fetchLabelValuesUtilization, utilizationLabels]);
+    }, [queryRows, fetchLabelValuesUnified]);
     const isRowRegex = (row) => row.operator === '=~' || row.operator === '!~';
     return (_jsxs("div", { className: `flex items-center gap-3 ${maxWidthInPixels} w-full flex-wrap`, id: "simple-matchers", children: [visibleRows.map((row, index) => (_jsxs("div", { className: "flex items-center", children: [_jsx(Select, { items: labelNameOptions, onSelection: value => handleUpdateRow(index, 'labelName', value), placeholder: "Select label name", selectedKey: row.labelName, className: "rounded-tr-none rounded-br-none ring-0 focus:ring-0 outline-none", loading: labelNamesLoading, searchable: true }), _jsx(Select, { items: operatorOptions, onSelection: value => handleUpdateRow(index, 'operator', value), selectedKey: row.operator, className: "rounded-none ring-0 focus:ring-0 outline-none" }), _jsx(Select, { items: transformLabelsForSelect(row.labelValues), onSelection: value => handleUpdateRow(index, 'labelValue', value), placeholder: "Select label value", selectedKey: row.labelValue, className: "rounded-none ring-0 focus:ring-0 outline-none max-w-48", optionsClassname: cx('max-w-[300px]', {
                             'w-[300px]': isRowRegex(row),