@parca/profile 0.16.478 → 0.16.479

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.479](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.478...@parca/profile@0.16.479) (2025-02-25)
+
+## 0.23.1 (2025-02-24)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.478 (2025-02-25)
 
 ## 0.23.1 (2025-02-24)

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

@@ -10,7 +10,8 @@ interface MetricsContextMenuProps {
     }>) => void;
     highlighted: HighlightedSeries | null;
     trackVisibility: (isVisible: boolean) => void;
+    utilizationMetrics?: boolean;
 }
-declare const MetricsContextMenu: ({ menuId, onAddLabelMatcher, highlighted, trackVisibility, }: MetricsContextMenuProps) => JSX.Element;
+declare const MetricsContextMenu: ({ menuId, onAddLabelMatcher, highlighted, trackVisibility, utilizationMetrics, }: MetricsContextMenuProps) => JSX.Element;
 export default MetricsContextMenu;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsContextMenu/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,iBAAiB,EAAC,MAAM,KAAK,CAAC;AAEtC,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,CACjB,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,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACtC,eAAe,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,kBAAkB,iEAKrB,uBAAuB,KAAG,GAAG,CAAC,OA8ChC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsContextMenu/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,iBAAiB,EAAC,MAAM,KAAK,CAAC;AAEtC,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,CACjB,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,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACtC,eAAe,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AASD,QAAA,MAAM,kBAAkB,qFAMrB,uBAAuB,KAAG,GAAG,CAAC,OA8ChC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/MetricsGraph/MetricsContextMenu/index.js

@@ -14,7 +14,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '@iconify/react';
 import { Item, Menu, Submenu } from 'react-contexify';
 import { useParcaContext } from '@parca/components';
-const MetricsContextMenu = ({ menuId, onAddLabelMatcher, highlighted, trackVisibility, }) => {
+const transformUtilizationLabels = (label, utilizationMetrics) => {
+    if (utilizationMetrics) {
+        return label.replace('attributes.', '').replace('attributes_resource.', '');
+    }
+    return label;
+};
+const MetricsContextMenu = ({ menuId, onAddLabelMatcher, highlighted, trackVisibility, utilizationMetrics = false, }) => {
     const { isDarkMode } = useParcaContext();
     const labels = highlighted?.labels.filter((label) => label.name !== '__name__');
     const handleFocusOnSingleSeries = () => {
@@ -24,6 +30,6 @@ const MetricsContextMenu = ({ menuId, onAddLabelMatcher, highlighted, trackVisib
         }));
         labelsToAdd !== undefined && onAddLabelMatcher(labelsToAdd);
     };
-    return (_jsxs(Menu, { id: menuId, onVisibilityChange: trackVisibility, theme: isDarkMode ? 'dark' : '', children: [_jsx(Item, { id: "focus-on-single-series", onClick: handleFocusOnSingleSeries, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:star" }), _jsx("div", { children: "Focus only on this series" })] }) }), _jsx(Submenu, { label: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "material-symbols:add" }), _jsx("div", { children: "Add to query" })] }), children: _jsx("div", { className: "max-h-[300px] overflow-scroll", children: labels?.map((label) => (_jsx(Item, { id: label.name, onClick: () => onAddLabelMatcher({ key: label.name, value: label.value }), className: "max-w-[400px] overflow-hidden", children: _jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300", children: `${label.name}="${label.value}"` }) }, label.name))) }) })] }));
+    return (_jsxs(Menu, { id: menuId, onVisibilityChange: trackVisibility, theme: isDarkMode ? 'dark' : '', children: [_jsx(Item, { id: "focus-on-single-series", onClick: handleFocusOnSingleSeries, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:star" }), _jsx("div", { children: "Focus only on this series" })] }) }), _jsx(Submenu, { label: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "material-symbols:add" }), _jsx("div", { children: "Add to query" })] }), children: _jsx("div", { className: "max-h-[300px] overflow-scroll", children: labels?.map((label) => (_jsx(Item, { id: label.name, onClick: () => onAddLabelMatcher({ key: label.name, value: label.value }), className: "max-w-[400px] overflow-hidden", children: _jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300", children: `${transformUtilizationLabels(label.name, utilizationMetrics)}="${label.value}"` }) }, label.name))) }) })] }));
 };
 export default MetricsContextMenu;

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

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

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

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

package/dist/MetricsGraph/MetricsTooltip/index.js

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

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

@@ -1,15 +1,6 @@
 import { DateTimeRange } from '@parca/components';
 import { Matcher } from '@parca/parser';
-interface MetricSeries {
-    timestamp: number;
-    value: number;
-    resource: {
-        [key: string]: string;
-    };
-    attributes: {
-        [key: string]: string;
-    };
-}
+import { type UtilizationMetrics as MetricSeries } from '../../ProfileSelector';
 interface CommonProps {
     data: MetricSeries[];
     addLabelMatcher: (labels: {

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,EAAwC,MAAM,mBAAmB,CAAC;AACvF,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AAStC,UAAU,YAAY;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE;QACR,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,UAAU,EAAE;QACV,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACH;AAED,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,sBAAsB,CAAC,EAAE,OAAO,EAAE,CAAC;CACpC;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;AAqbF,QAAA,MAAM,kBAAkB,gGAMrB,KAAK,KAAG,GAAG,CAAC,OA6Bd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAwC,MAAM,mBAAmB,CAAC;AACvF,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AAItC,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAM9E,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,sBAAsB,CAAC,EAAE,OAAO,EAAE,CAAC;CACpC;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;AAgcF,QAAA,MAAM,kBAAkB,gGAMrB,KAAK,KAAG,GAAG,CAAC,OA6Bd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/MetricsGraph/UtilizationMetrics/index.js

@@ -24,22 +24,24 @@ import MetricsContextMenu from '../MetricsContextMenu';
 import MetricsTooltip from '../MetricsTooltip';
 import { useMetricsGraphDimensions } from '../useMetricsGraphDimensions';
 function transformToSeries(data) {
-    const groupedData = data.reduce((acc, series) => {
-        const resourceKey = Object.entries(series.resource)
-            .map(([name, value]) => `${name}=${value}`)
-            .join(',');
-        if (!Object.hasOwn(acc, resourceKey)) {
-            acc[resourceKey] = {
-                metric: Object.entries(series.resource).map(([name, value]) => ({ name, value })),
-                values: [],
-                labelset: resourceKey,
-            };
+    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) {
+                        agg.push([d.timestamp, d.value]);
+                    }
+                    return agg;
+                }, []),
+                labelset: metric.map(m => `${m.name}=${m.value}`).join(','),
+            });
         }
-        acc[resourceKey].values.push([series.timestamp, series.value, 0, 0]);
-        return acc;
-    }, {});
+        return agg;
+    }, []);
     // Sort values by timestamp for each series
-    return Object.values(groupedData).map(series => ({
+    return series.map(series => ({
         ...series,
         values: series.values.sort((a, b) => a[0] - b[0]),
     }));
@@ -57,13 +59,12 @@ const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, hei
     const lineStrokeHover = '2px';
     const lineStrokeSelected = '3px';
     const graphWidth = width - margin * 1.5 - margin / 2;
-    // Calculate the time range from the data
-    const timeExtent = d3.extent(data, d => d.timestamp);
+    const timeExtent = d3.extent(data.flatMap(d => d.samples.map(s => s.timestamp)));
     const from = timeExtent[0] ?? 0;
     const to = timeExtent[1] ?? 0;
     const paddedFrom = from;
     const paddedTo = to;
-    const series = transformToSeries(data);
+    const series = useMemo(() => transformToSeries(data), [data]);
     const extentsY = series.map(function (s) {
         return d3.extent(s.values, function (d) {
             return d[1];
@@ -185,7 +186,7 @@ const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, hei
         e.stopPropagation();
         e.preventDefault();
     };
-    return (_jsxs(_Fragment, { children: [_jsx(MetricsContextMenu, { onAddLabelMatcher: addLabelMatcher, menuId: MENU_ID, highlighted: highlighted, trackVisibility: trackVisibility }), 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, contextElement: graph.current, sampleUnit: "%", delta: false })) })), _jsx("div", { ref: graph, onMouseEnter: function () {
+    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, contextElement: graph.current, sampleUnit: "%", delta: false, utilizationMetrics: true })) })), _jsx("div", { ref: graph, onMouseEnter: function () {
                     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(3).map((d, i, allTicks) => {
                                             let decimals = 2;
@@ -219,7 +220,12 @@ const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, hei
                                                         ? lineStrokeHover
                                                         : lineStroke, xScale: xScale, yScale: yScale, onClick: () => {
                                                     if (highlighted != null) {
-                                                        addLabelMatcher(highlighted.labels.map(l => ({ key: l.name, value: l.value })));
+                                                        addLabelMatcher(highlighted.labels
+                                                            .filter(l => l.name.startsWith('attributes_resource.'))
+                                                            .map(l => ({
+                                                            key: l.name.replace('attributes_resource.', ''),
+                                                            value: l.value,
+                                                        })));
                                                     }
                                                 } }) }, i));
                                     }) })] })] }) })] }));

package/dist/ProfileSelector/index.d.ts

@@ -20,14 +20,16 @@ interface ProfileSelectorFeatures {
     disableProfileTypesDropdown?: boolean;
 }
 export interface UtilizationMetrics {
-    timestamp: number;
-    value: number;
-    resource: {
-        [key: string]: string;
-    };
-    attributes: {
-        [key: string]: string;
+    labelset: {
+        labels: Array<{
+            name: string;
+            value: string;
+        }>;
     };
+    samples: Array<{
+        timestamp: number;
+        value: number;
+    }>;
 }
 export interface UtilizationLabels {
     utilizationLabelNames?: string[];

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,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE;QACR,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,UAAU,EAAE;QACV,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACH;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,kBAAkB,EAAE,CAAC;IAC1C,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,OA4M7B,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;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,kBAAkB,EAAE,CAAC;IAC1C,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,OA4M7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.478",
+  "version": "0.16.479",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -75,5 +75,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "43097f0543dd2bfcb337724764478ddcdd3f5a01"
+  "gitHead": "11658aa6fcf7455df7adb7d45ca68e8235566d5d"
 }

package/src/MetricsGraph/MetricsContextMenu/index.tsx

@@ -26,13 +26,22 @@ interface MetricsContextMenuProps {
   ) => void;
   highlighted: HighlightedSeries | null;
   trackVisibility: (isVisible: boolean) => void;
+  utilizationMetrics?: boolean;
 }
 
+const transformUtilizationLabels = (label: string, utilizationMetrics: boolean): string => {
+  if (utilizationMetrics) {
+    return label.replace('attributes.', '').replace('attributes_resource.', '');
+  }
+  return label;
+};
+
 const MetricsContextMenu = ({
   menuId,
   onAddLabelMatcher,
   highlighted,
   trackVisibility,
+  utilizationMetrics = false,
 }: MetricsContextMenuProps): JSX.Element => {
   const {isDarkMode} = useParcaContext();
   const labels = highlighted?.labels.filter((label: Label) => label.name !== '__name__');
@@ -71,7 +80,7 @@ const MetricsContextMenu = ({
               className="max-w-[400px] overflow-hidden"
             >
               <div className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300">
-                {`${label.name}="${label.value}"`}
+                {`${transformUtilizationLabels(label.name, utilizationMetrics)}="${label.value}"`}
               </div>
             </Item>
           ))}

package/src/MetricsGraph/MetricsTooltip/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useState} from 'react';
+import {useEffect, useMemo, useState} from 'react';
 
 import {Icon} from '@iconify/react';
 import type {VirtualElement} from '@popperjs/core';
@@ -30,6 +30,7 @@ interface Props {
   contextElement: Element | null;
   sampleUnit: string;
   delta: boolean;
+  utilizationMetrics?: boolean;
 }
 
 const virtualElement: VirtualElement = {
@@ -67,6 +68,7 @@ const MetricsTooltip = ({
   contextElement,
   sampleUnit,
   delta,
+  utilizationMetrics = false,
 }: Props): JSX.Element => {
   const {timezone} = useParcaContext();
 
@@ -94,6 +96,29 @@ const MetricsTooltip = ({
 
   const update = popperProps.update;
 
+  const attributesMap = useMemo(() => {
+    return highlighted.labels
+      .filter(
+        label =>
+          label.name.startsWith('attributes.') && !label.name.startsWith('attributes_resource.')
+      )
+      .reduce<Record<string, string>>((acc, label) => {
+        const key = label.name.replace('attributes.', '');
+        acc[key] = label.value;
+        return acc;
+      }, {});
+  }, [highlighted.labels]);
+
+  const attributesResourceMap = useMemo(() => {
+    return highlighted.labels
+      .filter(label => label.name.startsWith('attributes_resource.'))
+      .reduce<Record<string, string>>((acc, label) => {
+        const key = label.name.replace('attributes_resource.', '');
+        acc[key] = label.value;
+        return acc;
+      }, {});
+  }, [highlighted.labels]);
+
   useEffect(() => {
     if (contextElement != null) {
       virtualElement.getBoundingClientRect = generateGetBoundingClientRect(contextElement, x, y);
@@ -167,20 +192,67 @@ const MetricsTooltip = ({
                   </table>
                 </span>
                 <span className="my-2 block text-gray-500">
-                  {highlighted.labels
-                    .filter((label: Label) => label.name !== '__name__')
-                    .map((label: Label) => (
-                      <div
-                        key={label.name}
-                        className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
-                      >
-                        <TextWithTooltip
-                          text={`${label.name}="${label.value}"`}
-                          maxTextLength={37}
-                          id={`tooltip-${label.name}`}
-                        />
-                      </div>
-                    ))}
+                  {utilizationMetrics ? (
+                    <>
+                      {Object.keys(attributesResourceMap).length > 0 && (
+                        <span className="text-sm font-bold text-gray-700 dark:text-white">
+                          Resource Attributes
+                        </span>
+                      )}
+                      <span className="my-2 block text-gray-500">
+                        {Object.keys(attributesResourceMap).map(name => (
+                          <div
+                            key={name}
+                            className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
+                          >
+                            <TextWithTooltip
+                              text={`${name.replace('attributes.', '')}="${
+                                attributesResourceMap[name]
+                              }"`}
+                              maxTextLength={48}
+                              id={`tooltip-${name}-${attributesResourceMap[name]}`}
+                            />
+                          </div>
+                        ))}
+                      </span>
+                      {Object.keys(attributesMap).length > 0 && (
+                        <span className="text-sm font-bold text-gray-700 dark:text-white">
+                          Attributes
+                        </span>
+                      )}
+                      <span className="my-2 block text-gray-500">
+                        {Object.keys(attributesMap).map(name => (
+                          <div
+                            key={name}
+                            className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
+                          >
+                            <TextWithTooltip
+                              text={`${name.replace('attributes.', '')}="${attributesMap[name]}"`}
+                              maxTextLength={48}
+                              id={`tooltip-${name}-${attributesMap[name]}`}
+                            />
+                          </div>
+                        ))}
+                      </span>
+                    </>
+                  ) : (
+                    <>
+                      {highlighted.labels
+                        .filter((label: Label) => label.name !== '__name__')
+                        .map((label: Label) => (
+                          <div
+                            key={label.name}
+                            className="mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
+                          >
+                            <TextWithTooltip
+                              text={`${label.name}="${label.value}"`}
+                              maxTextLength={37}
+                              id={`tooltip-${label.name}`}
+                            />
+                          </div>
+                        ))}
+                    </>
+                  )}
                 </span>
                 <div className="flex w-full items-center gap-1 text-xs text-gray-500">
                   <Icon icon="iconoir:mouse-button-right" />

package/src/MetricsGraph/UtilizationMetrics/index.tsx

@@ -24,22 +24,12 @@ import {Matcher} from '@parca/parser';
 import {formatDate, formatForTimespan, getPrecision, valueFormatter} from '@parca/utilities';
 
 import MetricsSeries from '../../MetricsSeries';
+import {type UtilizationMetrics as MetricSeries} from '../../ProfileSelector';
 import MetricsContextMenu from '../MetricsContextMenu';
 import MetricsTooltip from '../MetricsTooltip';
 import {type Series} from '../index';
 import {useMetricsGraphDimensions} from '../useMetricsGraphDimensions';
 
-interface MetricSeries {
-  timestamp: number;
-  value: number;
-  resource: {
-    [key: string]: string;
-  };
-  attributes: {
-    [key: string]: string;
-  };
-}
-
 interface CommonProps {
   data: MetricSeries[];
   addLabelMatcher: (
@@ -64,26 +54,31 @@ type Props = CommonProps & {
   utilizationMetricsLoading?: boolean;
 };
 
+interface MetricsSample {
+  timestamp: number;
+  value: number;
+}
+
 function transformToSeries(data: MetricSeries[]): Series[] {
-  const groupedData = data.reduce<Record<string, Series>>((acc, series) => {
-    const resourceKey = Object.entries(series.resource)
-      .map(([name, value]) => `${name}=${value}`)
-      .join(',');
-
-    if (!Object.hasOwn(acc, resourceKey)) {
-      acc[resourceKey] = {
-        metric: Object.entries(series.resource).map(([name, value]) => ({name, value})),
-        values: [],
-        labelset: resourceKey,
-      };
+  const series: Series[] = data.reduce<Series[]>(function (agg: Series[], s: MetricSeries) {
+    if (s.labelset !== undefined) {
+      const metric = s.labelset.labels.sort((a, b) => a.name.localeCompare(b.name));
+      agg.push({
+        metric,
+        values: s.samples.reduce<number[][]>(function (agg: number[][], d: MetricsSample) {
+          if (d.timestamp !== undefined && d.value !== undefined) {
+            agg.push([d.timestamp, d.value]);
+          }
+          return agg;
+        }, []),
+        labelset: metric.map(m => `${m.name}=${m.value}`).join(','),
+      });
     }
-
-    acc[resourceKey].values.push([series.timestamp, series.value, 0, 0]);
-    return acc;
-  }, {});
+    return agg;
+  }, []);
 
   // Sort values by timestamp for each series
-  return Object.values(groupedData).map(series => ({
+  return series.map(series => ({
     ...series,
     values: series.values.sort((a, b) => a[0] - b[0]),
   }));
@@ -113,15 +108,14 @@ const RawUtilizationMetrics = ({
 
   const graphWidth = width - margin * 1.5 - margin / 2;
 
-  // Calculate the time range from the data
-  const timeExtent = d3.extent(data, d => d.timestamp);
+  const timeExtent = d3.extent(data.flatMap(d => d.samples.map(s => s.timestamp)));
   const from = timeExtent[0] ?? 0;
   const to = timeExtent[1] ?? 0;
 
   const paddedFrom = from;
   const paddedTo = to;
 
-  const series = transformToSeries(data);
+  const series = useMemo(() => transformToSeries(data), [data]);
 
   const extentsY = series.map(function (s) {
     return d3.extent(s.values, function (d) {
@@ -293,6 +287,7 @@ const RawUtilizationMetrics = ({
         menuId={MENU_ID}
         highlighted={highlighted}
         trackVisibility={trackVisibility}
+        utilizationMetrics={true}
       />
 
       {highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (
@@ -309,6 +304,7 @@ const RawUtilizationMetrics = ({
               contextElement={graph.current}
               sampleUnit="%"
               delta={false}
+              utilizationMetrics={true}
             />
           )}
         </div>
@@ -483,7 +479,12 @@ const RawUtilizationMetrics = ({
                       onClick={() => {
                         if (highlighted != null) {
                           addLabelMatcher(
-                            highlighted.labels.map(l => ({key: l.name, value: l.value}))
+                            highlighted.labels
+                              .filter(l => l.name.startsWith('attributes_resource.'))
+                              .map(l => ({
+                                key: l.name.replace('attributes_resource.', ''),
+                                value: l.value,
+                              }))
                           );
                         }
                       }}

package/src/ProfileSelector/index.tsx

@@ -55,14 +55,16 @@ interface ProfileSelectorFeatures {
 }
 
 export interface UtilizationMetrics {
-  timestamp: number;
-  value: number;
-  resource: {
-    [key: string]: string;
-  };
-  attributes: {
-    [key: string]: string;
+  labelset: {
+    labels: Array<{
+      name: string;
+      value: string;
+    }>;
   };
+  samples: Array<{
+    timestamp: number;
+    value: number;
+  }>;
 }
 
 export interface UtilizationLabels {