@parca/profile 0.18.0 → 0.18.2

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.18.2](https://github.com/parca-dev/parca/compare/@parca/profile@0.18.1...@parca/profile@0.18.2) (2025-06-17)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.18.1](https://github.com/parca-dev/parca/compare/@parca/profile@0.18.0...@parca/profile@0.18.1) (2025-06-17)
+
+**Note:** Version bump only for package @parca/profile
+
 # [0.18.0](https://github.com/parca-dev/parca/compare/@parca/profile@0.17.11...@parca/profile@0.18.0) (2025-06-16)
 
 ### Features

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

@@ -15,10 +15,18 @@ interface CommonProps {
     humanReadableName: string;
     from: number;
     to: number;
+    selectedSeries?: Array<{
+        key: string;
+        value: string;
+    }>;
+    onSelectedSeriesChange?: (series: Array<{
+        key: string;
+        value: string;
+    }>) => void;
 }
 type Props = CommonProps & {
     utilizationMetricsLoading?: boolean;
 };
-declare const AreaChart: ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, }: Props) => JSX.Element;
+declare const AreaChart: ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, selectedSeries, onSelectedSeriesChange, }: Props) => JSX.Element;
 export default AreaChart;
 //# sourceMappingURL=Throughput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Throughput.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/Throughput.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAqD,MAAM,mBAAmB,CAAC;AAIpG,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAkB9E,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;AA2dF,QAAA,MAAM,SAAS,gIAUZ,KAAK,KAAG,GAAG,CAAC,OAiCd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Throughput.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/Throughput.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAqD,MAAM,mBAAmB,CAAC;AAIpG,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAkB9E,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;IACX,cAAc,CAAC,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IACrD,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KAAK,IAAI,CAAC;CAChF;AAQD,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AA8dF,QAAA,MAAM,SAAS,wKAYZ,KAAK,KAAG,GAAG,CAAC,OAmCd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/MetricsGraph/UtilizationMetrics/Throughput.js

@@ -49,7 +49,7 @@ function transformToSeries(data, isReceive = false) {
         values: series.values.sort((a, b) => a[0] - b[0]),
     }));
 }
-const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, width, height, margin, humanReadableName, from, to, }) => {
+const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, width, height, margin, humanReadableName, from, to, selectedSeries, onSelectedSeriesChange, }) => {
     const { timezone } = useParcaContext();
     const graph = useRef(null);
     const [dragging, setDragging] = useState(false);
@@ -58,13 +58,16 @@ const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange
     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) {
+        if (selectedSeries == null || selectedSeries.length === 0) {
             return [];
         }
-        return JSON.parse(decodeURIComponent(selectedSeries));
+        return selectedSeries.map(s => ({
+            key: s.key,
+            value: s.value,
+            matcherType: '=',
+        }));
     }, [selectedSeries]);
     const lineStroke = '1px';
     const lineStrokeHover = '2px';
@@ -231,19 +234,19 @@ const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange
                                                         : hovering && highlighted != null && i === highlighted.seriesIndex
                                                             ? lineStrokeHover
                                                             : lineStroke, strokeOpacity: isSelected ? 1 : 0.8, onClick: () => {
-                                                        if (highlighted != null) {
-                                                            setSelectedSeries(JSON.stringify(highlighted.labels.map(l => ({
+                                                        if (highlighted != null && onSelectedSeriesChange != null) {
+                                                            onSelectedSeriesChange(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 AreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, selectedSeries, onSelectedSeriesChange, }) => {
     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") }));
+    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, selectedSeries: selectedSeries, onSelectedSeriesChange: onSelectedSeriesChange })) }, "area-chart-graph-loaded") }));
 };
 export default AreaChart;

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

@@ -14,6 +14,10 @@ interface CommonProps {
     humanReadableName: string;
     from: number;
     to: number;
+    onSelectedSeriesChange?: (series: Array<{
+        key: string;
+        value: string;
+    }>) => void;
 }
 type Props = CommonProps & {
     data: MetricSeries[];
@@ -27,6 +31,6 @@ type Props = CommonProps & {
     setTimeRange: (range: DateTimeRange) => void;
     utilizationMetricsLoading?: boolean;
 };
-declare const UtilizationMetrics: ({ data, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, }: Props) => JSX.Element;
+declare const UtilizationMetrics: ({ data, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, onSelectedSeriesChange, }: Props) => JSX.Element;
 export default UtilizationMetrics;
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/MetricsGraph/UtilizationMetrics/index.js

@@ -30,6 +30,7 @@ function transformToSeries(data) {
             const metric = s.labelset.labels.sort((a, b) => a.name.localeCompare(b.name));
             agg.push({
                 metric,
+                isSelected: s.isSelected ?? false,
                 values: s.samples.reduce(function (agg, d) {
                     if (d.timestamp !== undefined && d.value !== undefined) {
                         agg.push([d.timestamp, d.value]);
@@ -59,7 +60,7 @@ const getYAxisUnit = (name) => {
             return 'percent';
     }
 };
-const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, height, margin, name, humanReadableName, from, to, }) => {
+const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, height, margin, name, humanReadableName, from, to, onSelectedSeriesChange, }) => {
     const { timezone } = useParcaContext();
     const graph = useRef(null);
     const [dragging, setDragging] = useState(false);
@@ -68,14 +69,7 @@ const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, hei
     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';
@@ -218,38 +212,27 @@ const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, hei
                                         }), _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: "lines fill-transparent", 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 isLimit = s.metric.findIndex(m => m.name === '__type__' && m.value === 'limit') > -1;
                                         const strokeDasharray = isLimit ? '8 4' : '';
-                                        return (_jsx("g", { className: "line cursor-pointer", children: _jsx(MetricsSeries, { data: s, line: l, color: getSeriesColor(s.metric), strokeWidth: isSelected
+                                        return (_jsx("g", { className: "line cursor-pointer", children: _jsx(MetricsSeries, { data: s, line: l, color: getSeriesColor(s.metric), strokeWidth: s.isSelected === true
                                                     ? lineStrokeSelected
                                                     : hovering && highlighted != null && i === highlighted.seriesIndex
                                                         ? lineStrokeHover
                                                         : lineStroke, strokeDasharray: strokeDasharray, xScale: xScale, yScale: yScale, onClick: () => {
-                                                    if (highlighted != null) {
-                                                        setSelectedSeries(JSON.stringify(highlighted.labels.map(l => ({
+                                                    if (highlighted != null && onSelectedSeriesChange != null) {
+                                                        onSelectedSeriesChange(highlighted.labels.map(l => ({
                                                             key: l.name,
                                                             value: l.value,
-                                                        }))));
+                                                        })));
                                                         // reset the selected_timeframe
                                                         setSelectedTimeframe(undefined);
                                                     }
                                                 } }) }, i));
                                     }) })] })] }) })] }));
 };
-const UtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, }) => {
+const UtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, onSelectedSeriesChange, }) => {
     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(RawUtilizationMetrics, { data: data, addLabelMatcher: addLabelMatcher, setTimeRange: setTimeRange, width: width, height: height, margin: margin, name: name, humanReadableName: humanReadableName, from: from, to: to })) }, "utilization-metrics-graph-loaded") }));
+    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(RawUtilizationMetrics, { data: data, addLabelMatcher: addLabelMatcher, setTimeRange: setTimeRange, width: width, height: height, margin: margin, name: name, humanReadableName: humanReadableName, from: from, to: to, onSelectedSeriesChange: onSelectedSeriesChange })) }, "utilization-metrics-graph-loaded") }));
 };
 export default UtilizationMetrics;

package/dist/MetricsGraph/index.d.ts

@@ -36,6 +36,7 @@ export interface Series {
     metric: Label[];
     values: number[][];
     labelset: string;
+    isSelected?: boolean;
 }
 declare const MetricsGraph: ({ data, from, to, profile, onSampleClick, addLabelMatcher, setTimeRange, sampleType, sampleUnit, width, height, margin, sumBy, }: Props) => JSX.Element;
 export default MetricsGraph;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraph/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAC,KAAK,EAAiB,aAAa,IAAI,eAAe,EAAC,MAAM,eAAe,CAAC;AACrF,OAAO,EAAC,aAAa,EAAkB,MAAM,mBAAmB,CAAC;AASjE,OAAO,EAAC,sBAAsB,EAAC,MAAM,IAAI,CAAC;AAO1C,UAAU,KAAK;IACb,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7F,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,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,MAAM;IACrB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,YAAY,qIAcf,KAAK,KAAG,GAAG,CAAC,OA2Bd,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,eAAO,MAAM,UAAU,UAAW,MAAM,KAAG,MAAM,GAAG,IAKnD,CAAC;AAKF,eAAO,MAAM,eAAe,qIAczB,KAAK,KAAG,GAAG,CAAC,OAmfd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraph/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAC,KAAK,EAAiB,aAAa,IAAI,eAAe,EAAC,MAAM,eAAe,CAAC;AACrF,OAAO,EAAC,aAAa,EAAkB,MAAM,mBAAmB,CAAC;AASjE,OAAO,EAAC,sBAAsB,EAAC,MAAM,IAAI,CAAC;AAO1C,UAAU,KAAK;IACb,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7F,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,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,MAAM;IACrB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,qIAcf,KAAK,KAAG,GAAG,CAAC,OA2Bd,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,eAAO,MAAM,UAAU,UAAW,MAAM,KAAG,MAAM,GAAG,IAKnD,CAAC;AAKF,eAAO,MAAM,eAAe,qIAczB,KAAK,KAAG,GAAG,CAAC,OAmfd,CAAC"}

package/dist/ProfileSelector/MetricsGraphSection.d.ts

@@ -26,7 +26,11 @@ interface MetricsGraphSectionProps {
         data: UtilizationMetricsType[];
     }>;
     utilizationMetricsLoading?: boolean;
+    onUtilizationSeriesSelect?: (series: Array<{
+        key: string;
+        value: string;
+    }>) => void;
 }
-export declare function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery, selectProfile, query, setNewQueryExpression, utilizationMetrics, utilizationMetricsLoading, }: MetricsGraphSectionProps): JSX.Element;
+export declare function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery, selectProfile, query, setNewQueryExpression, utilizationMetrics, utilizationMetricsLoading, onUtilizationSeriesSelect, }: MetricsGraphSectionProps): JSX.Element;
 export {};
 //# sourceMappingURL=MetricsGraphSection.d.ts.map

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;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,CAgMxC"}
+{"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;IACpC,yBAAyB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KAAK,IAAI,CAAC;CACnF;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,EACzB,yBAAyB,GAC1B,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CAmMxC"}

package/dist/ProfileSelector/MetricsGraphSection.js

@@ -17,7 +17,7 @@ import { MergedProfileSelection } from '..';
 import UtilizationMetricsGraph from '../MetricsGraph/UtilizationMetrics';
 import AreaChart from '../MetricsGraph/UtilizationMetrics/Throughput';
 import ProfileMetricsGraph, { ProfileMetricsEmptyState } from '../ProfileMetricsGraph';
-export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery, selectProfile, query, setNewQueryExpression, utilizationMetrics, utilizationMetricsLoading, }) {
+export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery, selectProfile, query, setNewQueryExpression, utilizationMetrics, utilizationMetricsLoading, onUtilizationSeriesSelect, }) {
     const handleTimeRangeChange = (range) => {
         const from = range.getFromMs();
         const to = range.getToMs();
@@ -85,12 +85,12 @@ export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGra
         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 (_jsx(_Fragment, { children: _jsx(UtilizationMetricsGraph, { data: data, addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, utilizationMetricsLoading: utilizationMetricsLoading, name: name, humanReadableName: humanReadableName, from: querySelection.from, to: querySelection.to, onSelectedSeriesChange: onUtilizationSeriesSelect }, name) }));
                     }
                     return null;
                 }), throughputMetrics.length > 0 && (_jsx(AreaChart, { transmitData: throughputMetrics.find(metric => metric.name === 'gpu_pcie_throughput_transmit_bytes')
                         ?.data ?? [], receiveData: throughputMetrics.find(metric => metric.name === 'gpu_pcie_throughput_receive_bytes')
-                        ?.data ?? [], addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, name: throughputMetrics[0].name, humanReadableName: throughputMetrics[0].humanReadableName, from: querySelection.from, to: querySelection.to, utilizationMetricsLoading: utilizationMetricsLoading }))] }));
+                        ?.data ?? [], addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, name: throughputMetrics[0].name, humanReadableName: throughputMetrics[0].humanReadableName, from: querySelection.from, to: querySelection.to, utilizationMetricsLoading: utilizationMetricsLoading, selectedSeries: undefined, onSelectedSeriesChange: onUtilizationSeriesSelect }))] }));
     };
     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 &&

package/dist/ProfileSelector/index.d.ts

@@ -20,6 +20,7 @@ interface ProfileSelectorFeatures {
     disableProfileTypesDropdown?: boolean;
 }
 export interface UtilizationMetrics {
+    isSelected: boolean;
     labelset: {
         labels: Array<{
             name: string;
@@ -56,6 +57,10 @@ interface ProfileSelectorProps extends ProfileSelectorFeatures {
     }>;
     utilizationMetricsLoading?: boolean;
     utilizationLabels?: UtilizationLabels;
+    onUtilizationSeriesSelect?: (series: Array<{
+        key: string;
+        value: string;
+    }>) => void;
 }
 export interface IProfileTypesResult {
     loading: boolean;
@@ -63,6 +68,6 @@ export interface IProfileTypesResult {
     error?: RpcError;
 }
 export declare const useProfileTypes: (client: QueryServiceClient) => IProfileTypesResult;
-declare const ProfileSelector: ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph, showSumBySelector, showProfileTypeSelector, disableExplorativeQuerying, setDisplayHideMetricsGraphButton, utilizationMetrics, utilizationMetricsLoading, utilizationLabels, }: ProfileSelectorProps) => JSX.Element;
+declare const ProfileSelector: ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph, showSumBySelector, showProfileTypeSelector, disableExplorativeQuerying, setDisplayHideMetricsGraphButton, utilizationMetrics, utilizationMetricsLoading, utilizationLabels, onUtilizationSeriesSelect, }: ProfileSelectorProps) => JSX.Element;
 export default ProfileSelector;
 //# sourceMappingURL=index.d.ts.map

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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"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"}

package/dist/ProfileSelector/index.js

@@ -39,7 +39,7 @@ export const useProfileTypes = (client) => {
     }, [client, metadata, loading]);
     return { loading, data: result, error };
 };
-const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph = true, showSumBySelector = true, showProfileTypeSelector = true, disableExplorativeQuerying = false, setDisplayHideMetricsGraphButton, utilizationMetrics, utilizationMetricsLoading, utilizationLabels, }) => {
+const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph = true, showSumBySelector = true, showProfileTypeSelector = true, disableExplorativeQuerying = false, setDisplayHideMetricsGraphButton, utilizationMetrics, utilizationMetricsLoading, utilizationLabels, onUtilizationSeriesSelect, }) => {
     const { loading: profileTypesLoading, data: profileTypesData, error, } = useProfileTypes(queryClient);
     const { heightStyle } = useMetricsGraphDimensions(comparing, utilizationMetrics != null);
     const { viewComponent } = useParcaContext();
@@ -142,6 +142,6 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
     const sumByRef = useRef(null);
     return (_jsx(UtilizationLabelsProvider, { value: { ...utilizationLabels }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-2 flex", children: [_jsx(QueryControls, { showProfileTypeSelector: showProfileTypeSelector, showSumBySelector: showSumBySelector, disableExplorativeQuerying: disableExplorativeQuerying, profileTypesData: profileTypesData, profileTypesLoading: profileTypesLoading, selectedProfileName: selectedProfileName, setProfileName: setProfileName, setMatchersString: setMatchersString, setQueryExpression: setQueryExpression, query: query, queryBrowserRef: queryBrowserRef, timeRangeSelection: timeRangeSelection, setTimeRangeSelection: setTimeRangeSelection, searchDisabled: searchDisabled, queryBrowserMode: queryBrowserMode, setQueryBrowserMode: setQueryBrowserMode, advancedModeForQueryBrowser: advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser: setAdvancedModeForQueryBrowser, queryClient: queryClient, sumByRef: sumByRef, labels: labels, sumBySelection: sumBySelection ?? [], sumBySelectionLoading: sumBySelectionLoading, setUserSumBySelection: setUserSumBySelection, profileType: profileType, profileTypesError: error, viewComponent: viewComponent }), comparing && (_jsx("div", { children: _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) }))] }), _jsx(MetricsGraphSection, { showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setDisplayHideMetricsGraphButton, heightStyle: utilizationMetrics !== undefined && utilizationMetrics?.length > 0
                         ? 'auto'
-                        : heightStyle, querySelection: querySelection, profileSelection: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? defaultSumBy ?? [], defaultSumByLoading: defaultSumByLoading, queryClient: queryClient, queryExpressionString: queryExpressionString, setTimeRangeSelection: setTimeRangeSelection, selectQuery: selectQuery, selectProfile: selectProfile, query: query, setQueryExpression: setQueryExpression, setNewQueryExpression: setNewQueryExpression, utilizationMetrics: utilizationMetrics, utilizationMetricsLoading: utilizationMetricsLoading })] }) }));
+                        : heightStyle, querySelection: querySelection, profileSelection: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? defaultSumBy ?? [], defaultSumByLoading: defaultSumByLoading, queryClient: queryClient, queryExpressionString: queryExpressionString, setTimeRangeSelection: setTimeRangeSelection, selectQuery: selectQuery, selectProfile: selectProfile, query: query, setQueryExpression: setQueryExpression, setNewQueryExpression: setNewQueryExpression, utilizationMetrics: utilizationMetrics, utilizationMetricsLoading: utilizationMetricsLoading, onUtilizationSeriesSelect: onUtilizationSeriesSelect })] }) }));
 };
 export default ProfileSelector;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -77,5 +77,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "a31286be85fb81561b8f56a85244ad55c39fa8ef"
+  "gitHead": "d32c2be676d39ea179551b46c464324627be27d0"
 }

package/src/MetricsGraph/UtilizationMetrics/Throughput.tsx

@@ -52,6 +52,8 @@ interface CommonProps {
   humanReadableName: string;
   from: number;
   to: number;
+  selectedSeries?: Array<{key: string; value: string}>;
+  onSelectedSeriesChange?: (series: Array<{key: string; value: string}>) => void;
 }
 
 type RawAreaChartProps = CommonProps & {
@@ -112,6 +114,8 @@ const RawAreaChart = ({
   humanReadableName,
   from,
   to,
+  selectedSeries,
+  onSelectedSeriesChange,
 }: RawAreaChartProps): JSX.Element => {
   const {timezone} = useParcaContext();
   const graph = useRef(null);
@@ -121,15 +125,18 @@ const RawAreaChart = ({
   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) {
+    if (selectedSeries == null || selectedSeries.length === 0) {
       return [];
     }
 
-    return JSON.parse(decodeURIComponent(selectedSeries));
+    return selectedSeries.map(s => ({
+      key: s.key,
+      value: s.value,
+      matcherType: '=' as const,
+    }));
   }, [selectedSeries]);
 
   const lineStroke = '1px';
@@ -513,14 +520,12 @@ const RawAreaChart = ({
                       }
                       strokeOpacity={isSelected ? 1 : 0.8}
                       onClick={() => {
-                        if (highlighted != null) {
-                          setSelectedSeries(
-                            JSON.stringify(
-                              highlighted.labels.map(l => ({
-                                key: l.name,
-                                value: l.value,
-                              }))
-                            )
+                        if (highlighted != null && onSelectedSeriesChange != null) {
+                          onSelectedSeriesChange(
+                            highlighted.labels.map(l => ({
+                              key: l.name,
+                              value: l.value,
+                            }))
                           );
                           setSelectedTimeframe(undefined);
                         }
@@ -547,6 +552,8 @@ const AreaChart = ({
   humanReadableName,
   from,
   to,
+  selectedSeries,
+  onSelectedSeriesChange,
 }: Props): JSX.Element => {
   const {isDarkMode} = useParcaContext();
   const {width, height, margin, heightStyle} = useMetricsGraphDimensions(false, true);
@@ -575,6 +582,8 @@ const AreaChart = ({
             humanReadableName={humanReadableName}
             from={from}
             to={to}
+            selectedSeries={selectedSeries}
+            onSelectedSeriesChange={onSelectedSeriesChange}
           />
         )}
       </motion.div>

package/src/MetricsGraph/UtilizationMetrics/index.tsx

@@ -20,7 +20,6 @@ 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 MetricsSeries from '../../MetricsSeries';
@@ -41,6 +40,7 @@ interface CommonProps {
   humanReadableName: string;
   from: number;
   to: number;
+  onSelectedSeriesChange?: (series: Array<{key: string; value: string}>) => void;
 }
 
 type RawUtilizationMetricsProps = CommonProps & {
@@ -69,6 +69,7 @@ function transformToSeries(data: MetricSeries[]): Series[] {
       const metric = s.labelset.labels.sort((a, b) => a.name.localeCompare(b.name));
       agg.push({
         metric,
+        isSelected: s.isSelected ?? false,
         values: s.samples.reduce<number[][]>(function (agg: number[][], d: MetricsSample) {
           if (d.timestamp !== undefined && d.value !== undefined) {
             agg.push([d.timestamp, d.value]);
@@ -112,6 +113,7 @@ const RawUtilizationMetrics = ({
   humanReadableName,
   from,
   to,
+  onSelectedSeriesChange,
 }: RawUtilizationMetricsProps): JSX.Element => {
   const {timezone} = useParcaContext();
   const graph = useRef(null);
@@ -121,17 +123,8 @@ const RawUtilizationMetrics = ({
   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';
@@ -470,18 +463,6 @@ const RawUtilizationMetrics = ({
             </g>
             <g className="lines fill-transparent">
               {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 isLimit =
                   s.metric.findIndex(m => m.name === '__type__' && m.value === 'limit') > -1;
                 const strokeDasharray = isLimit ? '8 4' : '';
@@ -493,7 +474,7 @@ const RawUtilizationMetrics = ({
                       line={l}
                       color={getSeriesColor(s.metric)}
                       strokeWidth={
-                        isSelected
+                        s.isSelected === true
                           ? lineStrokeSelected
                           : hovering && highlighted != null && i === highlighted.seriesIndex
                           ? lineStrokeHover
@@ -503,14 +484,12 @@ const RawUtilizationMetrics = ({
                       xScale={xScale}
                       yScale={yScale}
                       onClick={() => {
-                        if (highlighted != null) {
-                          setSelectedSeries(
-                            JSON.stringify(
-                              highlighted.labels.map(l => ({
-                                key: l.name,
-                                value: l.value,
-                              }))
-                            )
+                        if (highlighted != null && onSelectedSeriesChange != null) {
+                          onSelectedSeriesChange(
+                            highlighted.labels.map(l => ({
+                              key: l.name,
+                              value: l.value,
+                            }))
                           );
                           // reset the selected_timeframe
                           setSelectedTimeframe(undefined);
@@ -537,6 +516,7 @@ const UtilizationMetrics = ({
   humanReadableName,
   from,
   to,
+  onSelectedSeriesChange,
 }: Props): JSX.Element => {
   const {isDarkMode} = useParcaContext();
   const {width, height, margin, heightStyle} = useMetricsGraphDimensions(false, true);
@@ -564,6 +544,7 @@ const UtilizationMetrics = ({
             humanReadableName={humanReadableName}
             from={from}
             to={to}
+            onSelectedSeriesChange={onSelectedSeriesChange}
           />
         )}
       </motion.div>

package/src/MetricsGraph/index.tsx

@@ -68,6 +68,7 @@ export interface Series {
   metric: Label[];
   values: number[][];
   labelset: string;
+  isSelected?: boolean;
 }
 
 const MetricsGraph = ({

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -46,6 +46,7 @@ interface MetricsGraphSectionProps {
     data: UtilizationMetricsType[];
   }>;
   utilizationMetricsLoading?: boolean;
+  onUtilizationSeriesSelect?: (series: Array<{key: string; value: string}>) => void;
 }
 
 export function MetricsGraphSection({
@@ -66,6 +67,7 @@ export function MetricsGraphSection({
   setNewQueryExpression,
   utilizationMetrics,
   utilizationMetricsLoading,
+  onUtilizationSeriesSelect,
 }: MetricsGraphSectionProps): JSX.Element {
   const handleTimeRangeChange = (range: DateTimeRange): void => {
     const from = range.getFromMs();
@@ -176,6 +178,7 @@ export function MetricsGraphSection({
                   humanReadableName={humanReadableName}
                   from={querySelection.from}
                   to={querySelection.to}
+                  onSelectedSeriesChange={onUtilizationSeriesSelect}
                 />
               </>
             );
@@ -199,6 +202,8 @@ export function MetricsGraphSection({
             from={querySelection.from}
             to={querySelection.to}
             utilizationMetricsLoading={utilizationMetricsLoading}
+            selectedSeries={undefined}
+            onSelectedSeriesChange={onUtilizationSeriesSelect}
           />
         )}
       </div>

package/src/ProfileSelector/index.tsx

@@ -55,6 +55,7 @@ interface ProfileSelectorFeatures {
 }
 
 export interface UtilizationMetrics {
+  isSelected: boolean;
   labelset: {
     labels: Array<{
       name: string;
@@ -93,6 +94,7 @@ interface ProfileSelectorProps extends ProfileSelectorFeatures {
   }>;
   utilizationMetricsLoading?: boolean;
   utilizationLabels?: UtilizationLabels;
+  onUtilizationSeriesSelect?: (series: Array<{key: string; value: string}>) => void;
 }
 
 export interface IProfileTypesResult {
@@ -139,6 +141,7 @@ const ProfileSelector = ({
   utilizationMetrics,
   utilizationMetricsLoading,
   utilizationLabels,
+  onUtilizationSeriesSelect,
 }: ProfileSelectorProps): JSX.Element => {
   const {
     loading: profileTypesLoading,
@@ -345,6 +348,7 @@ const ProfileSelector = ({
           setNewQueryExpression={setNewQueryExpression}
           utilizationMetrics={utilizationMetrics}
           utilizationMetricsLoading={utilizationMetricsLoading}
+          onUtilizationSeriesSelect={onUtilizationSeriesSelect}
         />
       </>
     </UtilizationLabelsProvider>