@parca/profile 0.16.465 → 0.16.467

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.467](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.466...@parca/profile@0.16.467) (2025-01-22)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.466](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.465...@parca/profile@0.16.466) (2025-01-21)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.465 (2025-01-21)
 
 **Note:** Version bump only for package @parca/profile

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

@@ -0,0 +1,26 @@
+import { DateTimeRange } from '@parca/components';
+interface MetricSeries {
+    timestamp: number;
+    value: number;
+    resource: {
+        [key: string]: string;
+    };
+    attributes: {
+        [key: string]: string;
+    };
+}
+interface Props {
+    data: MetricSeries[];
+    addLabelMatcher: (labels: {
+        key: string;
+        value: string;
+    } | Array<{
+        key: string;
+        value: string;
+    }>) => void;
+    setTimeRange: (range: DateTimeRange) => void;
+    utilizationMetricsLoading?: boolean;
+}
+declare const UtilizationMetrics: ({ data, addLabelMatcher, setTimeRange, utilizationMetricsLoading, }: Props) => JSX.Element;
+export default UtilizationMetrics;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAwC,MAAM,mBAAmB,CAAC;AAUvF,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;AAaD,UAAU,KAAK;IACb,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;AAgaD,QAAA,MAAM,kBAAkB,wEAKrB,KAAK,KAAG,GAAG,CAAC,OA4Bd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/MetricsGraph/UtilizationMetrics/index.js

@@ -0,0 +1,211 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Fragment, useCallback, useId, useMemo, useRef, useState } from 'react';
+import * as d3 from 'd3';
+import { pointer } from 'd3-selection';
+import { AnimatePresence, motion } from 'framer-motion';
+import throttle from 'lodash.throttle';
+import { useContextMenu } from 'react-contexify';
+import { DateTimeRange, MetricsGraphSkeleton, useParcaContext } from '@parca/components';
+import { formatDate, formatForTimespan, getPrecision, valueFormatter } from '@parca/utilities';
+import MetricsCircle from '../../MetricsCircle';
+import MetricsSeries from '../../MetricsSeries';
+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,
+            };
+        }
+        acc[resourceKey].values.push([series.timestamp, series.value, 0, 0]);
+        return acc;
+    }, {});
+    // Sort values by timestamp for each series
+    return Object.values(groupedData).map(series => ({
+        ...series,
+        values: series.values.sort((a, b) => a[0] - b[0]),
+    }));
+}
+const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, height, margin, }) => {
+    const { timezone } = useParcaContext();
+    const graph = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const [hovering, setHovering] = useState(false);
+    const [relPos, setRelPos] = useState(-1);
+    const [pos, setPos] = useState([0, 0]);
+    const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
+    const metricPointRef = useRef(null);
+    const idForContextMenu = useId();
+    const lineStroke = '1px';
+    const lineStrokeHover = '2px';
+    const graphWidth = width - margin * 1.5 - margin / 2;
+    // Calculate the time range from the data
+    const timeExtent = d3.extent(data, d => d.timestamp);
+    const from = timeExtent[0] ?? 0;
+    const to = timeExtent[1] ?? 0;
+    // Add a small padding (2%) to the time range to avoid points touching the edges
+    const timeRange = to - from;
+    const paddedFrom = from - timeRange * 0.02;
+    const paddedTo = to + timeRange * 0.02;
+    const series = transformToSeries(data);
+    const extentsY = series.map(function (s) {
+        return d3.extent(s.values, function (d) {
+            return d[1];
+        });
+    });
+    const minY = d3.min(extentsY, function (d) {
+        return d[0];
+    });
+    const maxY = d3.max(extentsY, function (d) {
+        return d[1];
+    });
+    // Setup scales with padded time range
+    const xScale = d3.scaleUtc().domain([paddedFrom, paddedTo]).range([0, graphWidth]);
+    const yScale = d3
+        .scaleLinear()
+        // tslint:disable-next-line
+        .domain([minY, maxY])
+        .range([height - margin, 0])
+        .nice();
+    const throttledSetPos = throttle(setPos, 20);
+    const onMouseMove = (e) => {
+        if (isContextMenuOpen) {
+            return;
+        }
+        // X/Y coordinate array relative to svg
+        const rel = pointer(e);
+        const xCoordinate = rel[0];
+        const xCoordinateWithoutMargin = xCoordinate - margin;
+        const yCoordinate = rel[1];
+        const yCoordinateWithoutMargin = yCoordinate - margin;
+        throttledSetPos([xCoordinateWithoutMargin, yCoordinateWithoutMargin]);
+    };
+    const trackVisibility = (isVisible) => {
+        setIsContextMenuOpen(isVisible);
+    };
+    const MENU_ID = `utilizationmetrics-context-menu-${idForContextMenu}`;
+    const { show } = useContextMenu({
+        id: MENU_ID,
+    });
+    const displayMenu = useCallback((e) => {
+        show({
+            event: e,
+        });
+    }, [show]);
+    const color = d3.scaleOrdinal(d3.schemeCategory10);
+    const l = d3.line(d => xScale(d[0]), d => yScale(d[1]));
+    const highlighted = useMemo(() => {
+        // Return the closest point as the highlighted point
+        const closestPointPerSeries = series.map(function (s) {
+            const distances = s.values.map(d => {
+                const x = xScale(d[0]) + margin / 2;
+                const y = yScale(d[1]) - margin / 3;
+                return Math.sqrt(Math.pow(pos[0] - x, 2) + Math.pow(pos[1] - y, 2));
+            });
+            const pointIndex = d3.minIndex(distances);
+            const minDistance = distances[pointIndex];
+            return {
+                pointIndex,
+                distance: minDistance,
+            };
+        });
+        const closestSeriesIndex = d3.minIndex(closestPointPerSeries, s => s.distance);
+        const pointIndex = closestPointPerSeries[closestSeriesIndex].pointIndex;
+        const point = series[closestSeriesIndex].values[pointIndex];
+        return {
+            seriesIndex: closestSeriesIndex,
+            labels: series[closestSeriesIndex].metric,
+            timestamp: point[0],
+            valuePerSecond: point[1],
+            value: point[2],
+            duration: point[3],
+            x: xScale(point[0]),
+            y: yScale(point[1]),
+        };
+    }, [pos, series, xScale, yScale, margin]);
+    const onMouseDown = (e) => {
+        // only left mouse button
+        if (e.button !== 0) {
+            return;
+        }
+        // X/Y coordinate array relative to svg
+        const rel = pointer(e);
+        const xCoordinate = rel[0];
+        const xCoordinateWithoutMargin = xCoordinate - margin;
+        if (xCoordinateWithoutMargin >= 0) {
+            setRelPos(xCoordinateWithoutMargin);
+            setDragging(true);
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    };
+    const onMouseUp = (e) => {
+        setDragging(false);
+        if (relPos === -1) {
+            // MouseDown happened outside of this element.
+            return;
+        }
+        // This is a normal click. We tolerate tiny movements to still be a
+        // click as they can occur when clicking based on user feedback.
+        if (Math.abs(relPos - pos[0]) <= 1) {
+            setRelPos(-1);
+            return;
+        }
+        let startPos = relPos;
+        let endPos = pos[0];
+        if (startPos > endPos) {
+            startPos = pos[0];
+            endPos = relPos;
+        }
+        const startCorrection = 10;
+        const endCorrection = 30;
+        const firstTime = xScale.invert(startPos - startCorrection).valueOf();
+        const secondTime = xScale.invert(endPos - endCorrection).valueOf();
+        setTimeRange(DateTimeRange.fromAbsoluteDates(firstTime, secondTime));
+        setRelPos(-1);
+        e.stopPropagation();
+        e.preventDefault();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(MetricsContextMenu, { onAddLabelMatcher: addLabelMatcher, menuId: MENU_ID, highlighted: highlighted, trackVisibility: trackVisibility }), 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 () {
+                    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(5).map((d, i, allTicks) => {
+                                            let decimals = 2;
+                                            const intervalBetweenTicks = allTicks[1] - allTicks[0];
+                                            if (intervalBetweenTicks < 1) {
+                                                const precision = getPrecision(intervalBetweenTicks);
+                                                decimals = precision;
+                                            }
+                                            return (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
+                                                        /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
+                                                        transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x2: -6 }), _jsx("text", { fill: "currentColor", x: -9, dy: '0.32em', children: valueFormatter(d, 'percent', decimals) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: yScale(d), y2: yScale(d) }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`));
+                                        }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: 0, y1: 0, y2: height - margin }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(to), x2: xScale(to), y1: 0, y2: height - margin }), _jsx("g", { transform: `translate(${-margin}, ${(height - margin) / 2}) rotate(270)`, children: _jsx("text", { fill: "currentColor", dy: "-0.7em", className: "text-sm capitalize", textAnchor: "middle", children: "Utilization" }) })] }), _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) => (_jsx("g", { className: "line", children: _jsx(MetricsSeries, { data: s, line: l, color: color(i.toString()), strokeWidth: hovering && highlighted != null && i === highlighted.seriesIndex
+                                                ? lineStrokeHover
+                                                : lineStroke, xScale: xScale, yScale: yScale }) }, i))) }), hovering && highlighted != null && (_jsx("g", { className: "circle-group", ref: metricPointRef, style: { fill: color(highlighted.seriesIndex.toString()) }, children: _jsx(MetricsCircle, { cx: highlighted.x, cy: highlighted.y }) }))] })] }) })] }));
+};
+const UtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, utilizationMetricsLoading, }) => {
+    const { isDarkMode } = useParcaContext();
+    const { width, height, margin, heightStyle } = useMetricsGraphDimensions(false);
+    return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "h-full 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 })) : (_jsx(RawUtilizationMetrics, { data: data, addLabelMatcher: addLabelMatcher, setTimeRange: setTimeRange, width: width, height: height, margin: margin })) }, "utilization-metrics-graph-loaded") }));
+};
+export default UtilizationMetrics;

package/dist/MetricsGraph/index.d.ts

@@ -31,6 +31,11 @@ export interface HighlightedSeries {
     x: number;
     y: number;
 }
+export interface Series {
+    metric: Label[];
+    values: number[][];
+    labelset: string;
+}
 declare const MetricsGraph: ({ data, from, to, profile, onSampleClick, addLabelMatcher, setTimeRange, sampleUnit, width, height, margin, sumBy, }: Props) => JSX.Element;
 export default MetricsGraph;
 export declare const parseValue: (value: string) => number | null;

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,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;AAQD,QAAA,MAAM,YAAY,yHAaf,KAAK,KAAG,GAAG,CAAC,OA0Bd,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,eAAO,MAAM,UAAU,UAAW,MAAM,KAAG,MAAM,GAAG,IAKnD,CAAC;AAKF,eAAO,MAAM,eAAe,yHAazB,KAAK,KAAG,GAAG,CAAC,OA4ed,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,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,yHAaf,KAAK,KAAG,GAAG,CAAC,OA0Bd,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,eAAO,MAAM,UAAU,UAAW,MAAM,KAAG,MAAM,GAAG,IAKnD,CAAC;AAKF,eAAO,MAAM,eAAe,yHAazB,KAAK,KAAG,GAAG,CAAC,OA6ed,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.js

@@ -36,8 +36,8 @@ export const IcicleChartRootNode = React.memo(function IcicleChartRootNodeNonMem
     }
     return (_jsx(_Fragment, { children: childRows.map(row => {
             const groupByFields = (groupByMetadata?.get(row)).toJSON();
-            const tsStr = arrowToString(groupByFields.timestamp);
-            const tsNanos = BigInt(parseInt(tsStr, 10)) * 1000000n;
+            const tsStr = arrowToString(groupByFields.time_nanos);
+            const tsNanos = BigInt(parseInt(tsStr, 10));
             const durationStr = arrowToString(groupByFields.duration);
             const duration = parseInt(durationStr, 10);
             const x = tsXScale(tsNanos);

package/dist/ProfileMetricsGraph/hooks/useQueryRange.d.ts

@@ -0,0 +1,10 @@
+import { RpcError } from '@protobuf-ts/runtime-rpc';
+import { QueryRangeResponse, QueryServiceClient } from '@parca/client';
+interface IQueryRangeState {
+    response: QueryRangeResponse | null;
+    isLoading: boolean;
+    error: RpcError | null;
+}
+export declare const useQueryRange: (client: QueryServiceClient, queryExpression: string, start: number, end: number, sumBy: string[], skip?: boolean) => IQueryRangeState;
+export {};
+//# sourceMappingURL=useQueryRange.d.ts.map

package/dist/ProfileMetricsGraph/hooks/useQueryRange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQueryRange.d.ts","sourceRoot":"","sources":["../../../src/ProfileMetricsGraph/hooks/useQueryRange.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAW,kBAAkB,EAAE,kBAAkB,EAAY,MAAM,eAAe,CAAC;AAM1F,UAAU,gBAAgB;IACxB,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;CACxB;AAYD,eAAO,MAAM,aAAa,WAChB,kBAAkB,mBACT,MAAM,SAChB,MAAM,OACR,MAAM,SACJ,MAAM,EAAE,qBAEd,gBA+CF,CAAC"}

package/dist/ProfileMetricsGraph/hooks/useQueryRange.js

@@ -0,0 +1,64 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useEffect, useMemo } from 'react';
+import { Duration, Timestamp } from '@parca/client';
+import { useGrpcMetadata, useURLState } from '@parca/components';
+import { getStepDuration } from '@parca/utilities';
+import useGrpcQuery from '../../useGrpcQuery';
+const getStepCountFromScreenWidth = (pixelsPerPoint) => {
+    let width = 
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    // subtract the padding around the graph
+    width = width - (20 + 24 + 68) * 2;
+    return Math.round(width / pixelsPerPoint);
+};
+export const useQueryRange = (client, queryExpression, start, end, sumBy, skip = false) => {
+    const metadata = useGrpcMetadata();
+    const [stepCountStr, setStepCount] = useURLState('step_count');
+    const defaultStepCount = useMemo(() => {
+        return getStepCountFromScreenWidth(10);
+    }, []);
+    const stepCount = useMemo(() => {
+        if (stepCountStr != null) {
+            return parseInt(stepCountStr, 10);
+        }
+        return defaultStepCount;
+    }, [stepCountStr, defaultStepCount]);
+    useEffect(() => {
+        if (stepCountStr == null) {
+            setStepCount(defaultStepCount.toString());
+        }
+    }, [stepCountStr, defaultStepCount, setStepCount]);
+    const { data, isLoading, error } = useGrpcQuery({
+        key: ['query-range', queryExpression, start, end, (sumBy ?? []).join(','), stepCount, metadata],
+        queryFn: async () => {
+            const stepDuration = getStepDuration(start, end, stepCount);
+            const { response } = await client.queryRange({
+                query: queryExpression,
+                start: Timestamp.fromDate(new Date(start)),
+                end: Timestamp.fromDate(new Date(end)),
+                step: Duration.create(stepDuration),
+                limit: 0,
+                sumBy,
+            }, { meta: metadata });
+            return response;
+        },
+        options: {
+            retry: false,
+            enabled: !skip,
+            staleTime: 1000 * 60 * 5, // 5 minutes
+        },
+    });
+    return { isLoading, error: error, response: data ?? null };
+};

package/dist/ProfileMetricsGraph/index.d.ts

@@ -1,5 +1,4 @@
-import { RpcError } from '@protobuf-ts/runtime-rpc';
-import { Label, QueryRangeResponse, QueryServiceClient } from '@parca/client';
+import { Label, QueryServiceClient } from '@parca/client';
 import { DateTimeRange } from '@parca/components';
 import { ProfileSelection } from '..';
 interface ProfileMetricsEmptyStateProps {
@@ -25,12 +24,6 @@ interface ProfileMetricsGraphProps {
     onPointClick: (timestamp: number, labels: Label[], queryExpression: string, duration: number) => void;
     comparing?: boolean;
 }
-export interface IQueryRangeState {
-    response: QueryRangeResponse | null;
-    isLoading: boolean;
-    error: RpcError | null;
-}
-export declare const useQueryRange: (client: QueryServiceClient, queryExpression: string, start: number, end: number, sumBy: string[], skip?: boolean) => IQueryRangeState;
 declare const ProfileMetricsGraph: ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing, sumBy, sumByLoading, }: ProfileMetricsGraphProps) => JSX.Element;
 export default ProfileMetricsGraph;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileMetricsGraph/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAW,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAY,MAAM,eAAe,CAAC;AACjG,OAAO,EACL,aAAa,EAKd,MAAM,mBAAmB,CAAC;AAI3B,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAK5D,UAAU,6BAA6B;IACrC,OAAO,EAAE,MAAM,CAAC;CACjB;AAaD,eAAO,MAAM,wBAAwB,gBAAe,6BAA6B,KAAG,GAAG,CAAC,OAMvF,CAAC;AAEF,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,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,CACZ,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,KAAK,EAAE,EACf,eAAe,EAAE,MAAM,EACvB,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;CACxB;AAYD,eAAO,MAAM,aAAa,WAChB,kBAAkB,mBACT,MAAM,SAChB,MAAM,OACR,MAAM,SACJ,MAAM,EAAE,qBAEd,gBA+CF,CAAC;AAEF,QAAA,MAAM,mBAAmB,sIAYtB,wBAAwB,KAAG,GAAG,CAAC,OAsFjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileMetricsGraph/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAC,KAAK,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACxD,OAAO,EAAC,aAAa,EAAwC,MAAM,mBAAmB,CAAC;AAIvF,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAK5D,UAAU,6BAA6B;IACrC,OAAO,EAAE,MAAM,CAAC;CACjB;AAaD,eAAO,MAAM,wBAAwB,gBAAe,6BAA6B,KAAG,GAAG,CAAC,OAMvF,CAAC;AAEF,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,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,CACZ,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,KAAK,EAAE,EACf,eAAe,EAAE,MAAM,EACvB,QAAQ,EAAE,MAAM,KACb,IAAI,CAAC;IACV,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,sIAYtB,wBAAwB,KAAG,GAAG,CAAC,OAuFjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/ProfileMetricsGraph/index.js

@@ -11,68 +11,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // 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, useMemo } from 'react';
+import { useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Duration, Timestamp } from '@parca/client';
-import { MetricsGraphSkeleton, useGrpcMetadata, useParcaContext, useURLState, } from '@parca/components';
+import { MetricsGraphSkeleton, useParcaContext } from '@parca/components';
 import { Query } from '@parca/parser';
-import { capitalizeOnlyFirstLetter, getStepDuration } from '@parca/utilities';
+import { capitalizeOnlyFirstLetter } from '@parca/utilities';
 import MetricsGraph from '../MetricsGraph';
 import { useMetricsGraphDimensions } from '../MetricsGraph/useMetricsGraphDimensions';
-import useGrpcQuery from '../useGrpcQuery';
+import { useQueryRange } from './hooks/useQueryRange';
 const ErrorContent = ({ errorMessage }) => {
     return (_jsx("div", { className: "relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700", role: "alert", children: _jsx("span", { className: "block sm:inline", children: errorMessage }) }));
 };
 export const ProfileMetricsEmptyState = ({ message }) => {
     return (_jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: _jsx("p", { children: message }) }));
 };
-const getStepCountFromScreenWidth = (pixelsPerPoint) => {
-    let width = 
-    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-    window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-    // subtract the padding around the graph
-    width = width - (20 + 24 + 68) * 2;
-    return Math.round(width / pixelsPerPoint);
-};
-export const useQueryRange = (client, queryExpression, start, end, sumBy, skip = false) => {
-    const metadata = useGrpcMetadata();
-    const [stepCountStr, setStepCount] = useURLState('step_count');
-    const defaultStepCount = useMemo(() => {
-        return getStepCountFromScreenWidth(10);
-    }, []);
-    const stepCount = useMemo(() => {
-        if (stepCountStr != null) {
-            return parseInt(stepCountStr, 10);
-        }
-        return defaultStepCount;
-    }, [stepCountStr, defaultStepCount]);
-    useEffect(() => {
-        if (stepCountStr == null) {
-            setStepCount(defaultStepCount.toString());
-        }
-    }, [stepCountStr, defaultStepCount, setStepCount]);
-    const { data, isLoading, error } = useGrpcQuery({
-        key: ['query-range', queryExpression, start, end, (sumBy ?? []).join(','), stepCount, metadata],
-        queryFn: async () => {
-            const stepDuration = getStepDuration(start, end, stepCount);
-            const { response } = await client.queryRange({
-                query: queryExpression,
-                start: Timestamp.fromDate(new Date(start)),
-                end: Timestamp.fromDate(new Date(end)),
-                step: Duration.create(stepDuration),
-                limit: 0,
-                sumBy,
-            }, { meta: metadata });
-            return response;
-        },
-        options: {
-            retry: false,
-            enabled: !skip,
-            staleTime: 1000 * 60 * 5, // 5 minutes
-        },
-    });
-    return { isLoading, error: error, response: data ?? null };
-};
 const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing = false, sumBy, sumByLoading, }) => {
     const { isLoading: metricsGraphLoading, response, error, } = useQueryRange(queryClient, queryExpression, from, to, sumBy, sumByLoading);
     const { onError, perf, authenticationErrorMessage, isDarkMode } = useParcaContext();

package/dist/ProfileSelector/MetricsGraphSection.d.ts

@@ -2,7 +2,7 @@ import { QueryServiceClient } from '@parca/client';
 import { DateTimeRange } from '@parca/components';
 import { Query } from '@parca/parser';
 import { ProfileSelection } from '..';
-import { QuerySelection } from './index';
+import { QuerySelection, type UtilizationMetrics as UtilizationMetricsType } from './index';
 interface MetricsGraphSectionProps {
     showMetricsGraph: boolean;
     setDisplayHideMetricsGraphButton: (show: boolean) => void;
@@ -20,7 +20,9 @@ interface MetricsGraphSectionProps {
     query: Query;
     setNewQueryExpression: (queryExpression: string) => void;
     setQueryExpression: (updateTs?: boolean) => void;
+    utilizationMetrics?: UtilizationMetricsType[];
+    utilizationMetricsLoading?: boolean;
 }
-export declare function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery, selectProfile, query, setNewQueryExpression, }: MetricsGraphSectionProps): JSX.Element;
+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 {};
 //# 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;AAE5D,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAEvC,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gCAAgC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,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;CAClD;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,GACtB,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CAiHxC"}
+{"version":3,"file":"MetricsGraphSection.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/MetricsGraphSection.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAQ,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACxD,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAG5D,OAAO,EAAC,cAAc,EAAE,KAAK,kBAAkB,IAAI,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAE1F,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gCAAgC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,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,sBAAsB,EAAE,CAAC;IAC9C,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,CAgIxC"}

package/dist/ProfileSelector/MetricsGraphSection.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -14,8 +14,9 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import cx from 'classnames';
 import { Query } from '@parca/parser';
 import { MergedProfileSelection } from '..';
+import UtilizationMetricsGraph from '../MetricsGraph/UtilizationMetrics';
 import ProfileMetricsGraph, { ProfileMetricsEmptyState } from '../ProfileMetricsGraph';
-export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery, selectProfile, query, setNewQueryExpression, }) {
+export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery, selectProfile, query, setNewQueryExpression, utilizationMetrics, utilizationMetricsLoading, }) {
     const handleTimeRangeChange = (range) => {
         const from = range.getFromMs();
         const to = range.getToMs();
@@ -74,7 +75,7 @@ export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGra
         const mergeTo = query.profileType().delta ? mergeFrom + durationInMilliseconds : mergeFrom;
         selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query));
     };
-    return (_jsxs("div", { className: cx('relative', { 'py-4': !showMetricsGraph }), children: [_jsxs("button", { onClick: () => setDisplayHideMetricsGraphButton(!showMetricsGraph), className: cx('hidden z-10 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', showMetricsGraph && 'absolute right-0 bottom-3 !flex', !showMetricsGraph && 'relative !flex ml-auto'), children: [showMetricsGraph ? 'Hide' : 'Show', " Metrics Graph"] }), showMetricsGraph && (_jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== '' &&
-                    querySelection.from !== undefined &&
-                    querySelection.to !== undefined ? (_jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? sumBy ?? [], sumByLoading: defaultSumByLoading, setTimeRange: handleTimeRangeChange, addLabelMatcher: addLabelMatcher, onPointClick: handlePointClick })) : (profileSelection === null && (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsEmptyState, { message: "Please select a profile type and click 'Search' to begin." }) }))) }))] }));
+    return (_jsxs("div", { className: cx('relative', { 'py-4': !showMetricsGraph }), children: [_jsxs("button", { onClick: () => setDisplayHideMetricsGraphButton(!showMetricsGraph), className: cx('hidden z-10 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', showMetricsGraph && 'absolute right-0 bottom-3 !flex', !showMetricsGraph && 'relative !flex ml-auto'), children: [showMetricsGraph ? 'Hide' : 'Show', " Metrics Graph"] }), showMetricsGraph && (_jsx(_Fragment, { children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== '' &&
+                        querySelection.from !== undefined &&
+                        querySelection.to !== undefined ? (_jsx(_Fragment, { children: utilizationMetrics !== undefined ? (_jsx(UtilizationMetricsGraph, { data: utilizationMetrics, addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, utilizationMetricsLoading: utilizationMetricsLoading })) : (_jsx(_Fragment, { children: _jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? sumBy ?? [], sumByLoading: defaultSumByLoading, setTimeRange: handleTimeRangeChange, addLabelMatcher: addLabelMatcher, onPointClick: handlePointClick }) })) })) : (profileSelection === null && (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsEmptyState, { message: "Please select a profile type and click 'Search' to begin." }) }))) }) }))] }));
 }

package/dist/ProfileSelector/index.d.ts

@@ -19,6 +19,16 @@ interface ProfileSelectorFeatures {
     disableExplorativeQuerying?: boolean;
     disableProfileTypesDropdown?: boolean;
 }
+export interface UtilizationMetrics {
+    timestamp: number;
+    value: number;
+    resource: {
+        [key: string]: string;
+    };
+    attributes: {
+        [key: string]: string;
+    };
+}
 interface ProfileSelectorProps extends ProfileSelectorFeatures {
     queryClient: QueryServiceClient;
     querySelection: QuerySelection;
@@ -31,6 +41,8 @@ interface ProfileSelectorProps extends ProfileSelectorFeatures {
     navigateTo: NavigateFunction;
     setDisplayHideMetricsGraphButton: Dispatch<SetStateAction<boolean>>;
     suffix?: string;
+    utilizationMetrics?: UtilizationMetrics[];
+    utilizationMetricsLoading?: boolean;
 }
 export interface IProfileTypesResult {
     loading: boolean;
@@ -38,6 +50,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, }: ProfileSelectorProps) => JSX.Element;
+declare const ProfileSelector: ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph, showSumBySelector, showProfileTypeSelector, disableExplorativeQuerying, setDisplayHideMetricsGraphButton, utilizationMetrics, utilizationMetricsLoading, }: 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;AAQpC,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,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,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;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,yQAelB,oBAAoB,KAAG,GAAG,CAAC,OAyM7B,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;AAQpC,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,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,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC1C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;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,wTAiBlB,oBAAoB,KAAG,GAAG,CAAC,OA0M7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileSelector/index.js

@@ -38,7 +38,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, }) => {
+const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQuery, closeProfile, enforcedProfileName, profileSelection, comparing, navigateTo, showMetricsGraph = true, showSumBySelector = true, showProfileTypeSelector = true, disableExplorativeQuerying = false, setDisplayHideMetricsGraphButton, utilizationMetrics, utilizationMetricsLoading, }) => {
     const { loading: profileTypesLoading, data: profileTypesData, error, } = useProfileTypes(queryClient);
     const { heightStyle } = useMetricsGraphDimensions(comparing);
     const { viewComponent } = useParcaContext();
@@ -139,6 +139,6 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
         queryExpressionString === '{}';
     const queryBrowserRef = useRef(null);
     const sumByRef = useRef(null);
-    return (_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 ?? [], setUserSumBySelection: setUserSumBySelection, profileType: profileType, profileTypesError: error }), comparing && (_jsx("div", { children: _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) }))] }), _jsx(MetricsGraphSection, { showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setDisplayHideMetricsGraphButton, heightStyle: 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 })] }));
+    return (_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 ?? [], setUserSumBySelection: setUserSumBySelection, profileType: profileType, profileTypesError: error }), comparing && (_jsx("div", { children: _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) }))] }), _jsx(MetricsGraphSection, { showMetricsGraph: showMetricsGraph, setDisplayHideMetricsGraphButton: setDisplayHideMetricsGraphButton, heightStyle: 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 })] }));
 };
 export default ProfileSelector;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.465",
+  "version": "0.16.467",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -75,5 +75,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "249ea57ecb9338451d0bf9a34f345c139accaa8d"
+  "gitHead": "2515639e6593c345f1ed3499da31cfcb0c8b932e"
 }