@parca/profile 0.19.44 → 0.19.46

package/dist/MetricsGraph/index.js

@@ -17,15 +17,15 @@ import { pointer } from 'd3-selection';
 import throttle from 'lodash.throttle';
 import { useContextMenu } from 'react-contexify';
 import { DateTimeRange, useParcaContext } from '@parca/components';
-import { formatDate, formatForTimespan, getPrecision, sanitizeHighlightedValues, valueFormatter, } from '@parca/utilities';
+import { formatDate, formatForTimespan, getPrecision, valueFormatter } from '@parca/utilities';
 import MetricsCircle from '../MetricsCircle';
 import MetricsSeries from '../MetricsSeries';
 import MetricsContextMenu from './MetricsContextMenu';
 import MetricsInfoPanel from './MetricsInfoPanel';
 import MetricsTooltip from './MetricsTooltip';
-const MetricsGraph = ({ data, from, to, profile, onSampleClick, addLabelMatcher, setTimeRange, sampleType, sampleUnit, width = 0, height = 0, margin = 0, sumBy, }) => {
+const MetricsGraph = ({ data, from, to, onSampleClick, setTimeRange, yAxisLabel, yAxisUnit, width = 0, height = 0, margin = 0, selectedPoint, contextMenuItems, renderTooltipContent, }) => {
     const [isInfoPanelOpen, setIsInfoPanelOpen] = useState(false);
-    return (_jsxs("div", { className: "relative", onClick: () => isInfoPanelOpen && setIsInfoPanelOpen(false), children: [_jsx("div", { className: "absolute right-0 top-0", children: _jsx(MetricsInfoPanel, { isInfoPanelOpen: isInfoPanelOpen, onInfoIconClick: () => setIsInfoPanelOpen(true) }) }), _jsx(RawMetricsGraph, { data: data, from: from, to: to, profile: profile, onSampleClick: onSampleClick, addLabelMatcher: addLabelMatcher, setTimeRange: setTimeRange, sampleType: sampleType, sampleUnit: sampleUnit, width: width, height: height, margin: margin, sumBy: sumBy })] }));
+    return (_jsxs("div", { className: "relative", onClick: () => isInfoPanelOpen && setIsInfoPanelOpen(false), children: [_jsx("div", { className: "absolute right-0 top-0", children: _jsx(MetricsInfoPanel, { isInfoPanelOpen: isInfoPanelOpen, onInfoIconClick: () => setIsInfoPanelOpen(true) }) }), _jsx(RawMetricsGraph, { data: data, from: from, to: to, onSampleClick: onSampleClick, setTimeRange: setTimeRange, yAxisLabel: yAxisLabel, yAxisUnit: yAxisUnit, width: width, height: height, margin: margin, selectedPoint: selectedPoint, contextMenuItems: contextMenuItems, renderTooltipContent: renderTooltipContent })] }));
 };
 export default MetricsGraph;
 export const parseValue = (value) => {
@@ -36,7 +36,7 @@ export const parseValue = (value) => {
 };
 const lineStroke = '1px';
 const lineStrokeHover = '2px';
-export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLabelMatcher, setTimeRange, sampleType, sampleUnit, width, height = 50, margin = 0, sumBy, }) => {
+export const RawMetricsGraph = ({ data, from, to, onSampleClick, setTimeRange, yAxisLabel, yAxisUnit, width, height = 50, margin = 0, selectedPoint, contextMenuItems, renderTooltipContent, }) => {
     const { timezone } = useParcaContext();
     const graph = useRef(null);
     const [dragging, setDragging] = useState(false);
@@ -46,8 +46,6 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     const metricPointRef = useRef(null);
     const idForContextMenu = useId();
-    // the time of the selected point is the start of the merge window
-    const time = parseFloat(profile?.HistoryParams().merge_from);
     if (width === undefined || width == null) {
         width = 0;
     }
@@ -56,28 +54,10 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
         // Adds 6px padding which aligns the graph on the grid
         return `translate(6, 0) scale(${(graphWidth - 6) / graphWidth}, 1)`;
     }, [graphWidth]);
-    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.valuePerSecond !== undefined) {
-                        const t = (Number(d.timestamp.seconds) * 1e9 + d.timestamp.nanos) / 1e6; // https://github.com/microsoft/TypeScript/issues/5710#issuecomment-157886246
-                        agg.push([t, d.valuePerSecond, Number(d.value), Number(d.duration)]);
-                    }
-                    return agg;
-                }, []),
-                labelset: metric.map(m => `${m.name}=${m.value}`).join(','),
-            });
-        }
-        return agg;
-    }, []);
-    // Sort series by id to make sure the colors are consistent
-    series.sort((a, b) => a.labelset.localeCompare(b.labelset));
+    const series = data;
     const extentsY = series.map(function (s) {
         return d3.extent(s.values, function (d) {
-            return d[1];
+            return d[1]; // d[1] is the value
         });
     });
     const minY = d3.min(extentsY, function (d) {
@@ -94,14 +74,22 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
         .domain([minY, maxY])
         .range([height - margin, 0])
         .nice();
-    const color = d3.scaleOrdinal(d3.schemeCategory10);
+    // Create deterministic color mapping based on series IDs
+    const color = useMemo(() => {
+        const scale = d3.scaleOrdinal(d3.schemeCategory10);
+        // Pre-populate the scale with sorted series IDs to ensure consistent colors
+        const sortedIds = [...new Set(series.map(s => s.id))].sort();
+        sortedIds.forEach(id => scale(id));
+        return scale;
+    }, [series]);
     const l = d3.line(d => xScale(d[0]), d => yScale(d[1]));
-    const highlighted = useMemo(() => {
+    const closestPoint = 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;
+                const x = xScale(d[0]) + margin / 2; // d[0] is timestamp_ms
+                const y = yScale(d[1]) - margin / 3; // d[1] is value
+                // Cartesian distance from the mouse position to the point
                 return Math.sqrt(Math.pow(pos[0] - x, 2) + Math.pow(pos[1] - y, 2));
             });
             const pointIndex = d3.minIndex(distances);
@@ -113,18 +101,35 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
         });
         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],
+            pointIndex,
+        };
+    }, [pos, series, xScale, yScale, margin]);
+    const highlighted = useMemo(() => {
+        if (series.length === 0 || closestPoint == null) {
+            return null;
+        }
+        const point = series[closestPoint.seriesIndex].values[closestPoint.pointIndex];
+        return {
+            seriesIndex: closestPoint.seriesIndex,
+            pointIndex: closestPoint.pointIndex,
             x: xScale(point[0]),
             y: yScale(point[1]),
         };
-    }, [pos, series, xScale, yScale, margin]);
+    }, [closestPoint, series, xScale, yScale]);
+    const selected = useMemo(() => {
+        if (series.length === 0 || selectedPoint == null) {
+            return null;
+        }
+        const point = series[selectedPoint.seriesIndex].values[selectedPoint.pointIndex];
+        return {
+            seriesIndex: selectedPoint.seriesIndex,
+            pointIndex: selectedPoint.pointIndex,
+            x: xScale(point[0]),
+            y: yScale(point[1]),
+        };
+    }, [selectedPoint, series, xScale, yScale]);
     const onMouseDown = (e) => {
         // only left mouse button
         if (e.button !== 0) {
@@ -141,10 +146,9 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
         e.stopPropagation();
         e.preventDefault();
     };
-    const openClosestProfile = () => {
-        if (highlighted != null) {
-            onSampleClick(Math.round(highlighted.timestamp), highlighted.value, sanitizeHighlightedValues(highlighted.labels), // When a user clicks on any sample in the graph, replace single `\` in the `labelValues` string with doubles `\\` if available.
-            highlighted.duration);
+    const handleClosestPointClick = () => {
+        if (closestPoint != null) {
+            onSampleClick(closestPoint);
         }
     };
     const onMouseUp = (e) => {
@@ -156,7 +160,7 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
         // 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) {
-            openClosestProfile();
+            handleClosestPointClick();
             setRelPos(-1);
             return;
         }
@@ -188,58 +192,6 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
         const yCoordinateWithoutMargin = yCoordinate - margin;
         throttledSetPos([xCoordinateWithoutMargin, yCoordinateWithoutMargin]);
     };
-    const findSelectedProfile = () => {
-        if (profile == null) {
-            return null;
-        }
-        let s = null;
-        let seriesIndex = -1;
-        // if there are both query matchers and also a sumby value, we need to check if the sumby value is part of the query matchers.
-        // if it is, then we should prioritize using the sumby label name and value to find the selected profile.
-        const useSumBy = sumBy !== undefined &&
-            sumBy.length > 0 &&
-            profile.query.matchers.length > 0 &&
-            profile.query.matchers.some(e => sumBy.includes(e.key));
-        // get only the sumby keys and values from the profile query matchers
-        const sumByMatchers = sumBy !== undefined ? profile.query.matchers.filter(e => sumBy.includes(e.key)) : [];
-        const keysToMatch = useSumBy ? sumByMatchers : profile.query.matchers;
-        outer: for (let i = 0; i < series.length; i++) {
-            const keys = keysToMatch.map(e => e.key);
-            for (let j = 0; j < keys.length; j++) {
-                const matcherKey = keys[j];
-                const label = series[i].metric.find(e => e.name === matcherKey);
-                if (label === undefined) {
-                    continue outer; // label doesn't exist to begin with
-                }
-                if (keysToMatch[j].value !== label.value) {
-                    continue outer; // label values don't match
-                }
-            }
-            seriesIndex = i;
-            s = series[i];
-        }
-        if (s == null) {
-            return null;
-        }
-        // Find the sample that matches the timestamp
-        const sample = s.values.find(v => {
-            return Math.round(v[0]) === time;
-        });
-        if (sample === undefined) {
-            return null;
-        }
-        return {
-            labels: [],
-            seriesIndex,
-            timestamp: sample[0],
-            valuePerSecond: sample[1],
-            value: sample[2],
-            duration: sample[3],
-            x: xScale(sample[0]),
-            y: yScale(sample[1]),
-        };
-    };
-    const selected = findSelectedProfile();
     const MENU_ID = `metrics-context-menu-${idForContextMenu}`;
     const { show } = useContextMenu({
         id: MENU_ID,
@@ -252,24 +204,7 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
     const trackVisibility = (isVisible) => {
         setIsContextMenuOpen(isVisible);
     };
-    const isDeltaType = profile !== null ? profile?.query.profType.delta : false;
-    let yAxisLabel = sampleUnit;
-    let yAxisUnit = sampleUnit;
-    if (isDeltaType) {
-        if (sampleUnit === 'nanoseconds') {
-            if (sampleType === 'cpu') {
-                yAxisLabel = 'CPU Cores';
-                yAxisUnit = '';
-            }
-            if (sampleType === 'cuda') {
-                yAxisLabel = 'GPU Time';
-            }
-        }
-        if (sampleUnit === 'bytes') {
-            yAxisLabel = 'Bytes per Second';
-        }
-    }
-    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, sampleType: sampleType, sampleUnit: sampleUnit, delta: isDeltaType })) })), _jsx("div", { ref: graph, onMouseEnter: function () {
+    return (_jsxs(_Fragment, { children: [contextMenuItems != null && (_jsx(MetricsContextMenu, { menuId: MENU_ID, closestPoint: closestPoint, series: series, trackVisibility: trackVisibility, menuItems: contextMenuItems })), 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, contextElement: graph.current, content: renderTooltipContent?.(highlighted.seriesIndex, highlighted.pointIndex) })) })), _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;
@@ -283,9 +218,9 @@ export const RawMetricsGraph = ({ data, from, to, profile, onSampleClick, addLab
                                                         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, yAxisUnit, 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: yAxisLabel }) })] }), _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", transform: graphTransform, width: graphWidth - 100, 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
+                                                    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", transform: graphTransform, width: graphWidth - 100, children: series.map((s, i) => (_jsx("g", { className: "line", children: _jsx(MetricsSeries, { data: s, line: l, color: color(s.id), 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()) }, transform: graphTransform, children: _jsx(MetricsCircle, { cx: highlighted.x, cy: highlighted.y }) })), selected != null && (_jsx("g", { className: "circle-group", style: selected?.seriesIndex != null
-                                        ? { fill: color(selected.seriesIndex.toString()) }
+                                                : lineStroke, xScale: xScale, yScale: yScale }) }, s.id))) }), hovering && highlighted != null && (_jsx("g", { className: "circle-group", ref: metricPointRef, style: { fill: color(series[highlighted.seriesIndex]?.id ?? '0') }, transform: graphTransform, children: _jsx(MetricsCircle, { cx: highlighted.x, cy: highlighted.y }) })), selected != null && (_jsx("g", { className: "circle-group", style: selected?.seriesIndex != null
+                                        ? { fill: color(series[selected.seriesIndex]?.id ?? '0') }
                                         : {}, transform: graphTransform, children: _jsx(MetricsCircle, { cx: selected.x, cy: selected.y, radius: 5 }) }))] })] }) })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAO9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAMpE,OAAO,EAAC,gBAAgB,EAA0B,MAAM,yBAAyB,CAAC;AAIlF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAUD,eAAO,MAAM,uBAAuB,GAClC,eAAe,mBAAmB,KACjC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAIpE,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAqC,oPAmBzD,sBAAsB,KAAG,GAAG,CAAC,OAkT/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAO9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAMpE,OAAO,EAAC,gBAAgB,EAA0B,MAAM,yBAAyB,CAAC;AAIlF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAUD,eAAO,MAAM,uBAAuB,GAClC,eAAe,mBAAmB,KACjC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAMpE,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAqC,oPAmBzD,sBAAsB,KAAG,GAAG,CAAC,OAkT/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/ProfileFlameGraph/index.js

@@ -30,7 +30,9 @@ const ErrorContent = ({ errorMessage }) => {
 };
 export const validateFlameChartQuery = (profileSource) => {
     const isNonDelta = !profileSource.ProfileType().delta;
-    const isDurationTooLong = profileSource.mergeTo - profileSource.mergeFrom > 60000;
+    const duration = profileSource.mergeTo - profileSource.mergeFrom;
+    console.log('duration of flame chart query: ', duration, 'ns');
+    const isDurationTooLong = duration > 60000000000n; // 60 seconds in nanoseconds
     return { isValid: !isNonDelta && !isDurationTooLong, isNonDelta, isDurationTooLong };
 };
 const ProfileFlameGraph = function ProfileFlameGraphNonMemo({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isFlameChart = false, profileSource, isInSandwichView = false, isRenderedAsFlamegraph = false, tooltipId, maxFrameCount, isExpanded = false, }) {

package/dist/ProfileMetricsGraph/index.d.ts

@@ -21,7 +21,7 @@ interface ProfileMetricsGraphProps {
         key: string;
         value: string;
     }>) => void;
-    onPointClick: (timestamp: number, labels: Label[], queryExpression: string, duration: number) => void;
+    onPointClick: (timestamp: bigint, labels: Label[], queryExpression: string, duration: number) => void;
     comparing?: boolean;
 }
 declare const ProfileMetricsGraph: ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing, sumBy, sumByLoading, }: ProfileMetricsGraphProps) => JSX.Element;

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

@@ -1 +1 @@
-{"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,GAAI,aAAW,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,GAAI,mIAY1B,wBAAwB,KAAG,GAAG,CAAC,OA4FjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileMetricsGraph/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACL,KAAK,EAGL,kBAAkB,EACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,aAAa,EAId,MAAM,mBAAmB,CAAC;AAI3B,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAwH5D,UAAU,6BAA6B;IACrC,OAAO,EAAE,MAAM,CAAC;CACjB;AAaD,eAAO,MAAM,wBAAwB,GAAI,aAAW,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,GAAI,mIAY1B,wBAAwB,KAAG,GAAG,CAAC,OAuWjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/ProfileMetricsGraph/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+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.
@@ -11,14 +11,110 @@ 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 } from 'react';
+import { useEffect, useMemo } from 'react';
+import { Icon } from '@iconify/react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { MetricsGraphSkeleton, useParcaContext } from '@parca/components';
+import { MetricsGraphSkeleton, TextWithTooltip, useParcaContext, } from '@parca/components';
 import { Query } from '@parca/parser';
-import { capitalizeOnlyFirstLetter } from '@parca/utilities';
+import { capitalizeOnlyFirstLetter, formatDate, timePattern, valueFormatter } from '@parca/utilities';
+import { MergedProfileSelection } from '..';
 import MetricsGraph from '../MetricsGraph';
 import { useMetricsGraphDimensions } from '../MetricsGraph/useMetricsGraphDimensions';
 import { useQueryRange } from './hooks/useQueryRange';
+const transformUtilizationLabels = (label, utilizationMetrics) => {
+    if (utilizationMetrics) {
+        return label.replace('attributes.', '').replace('attributes_resource.', '');
+    }
+    return label;
+};
+const createProfileContextMenuItems = (addLabelMatcher, data, // The original MetricsSeriesPb[] data
+utilizationMetrics = false) => {
+    return [
+        {
+            id: 'focus-on-single-series',
+            label: 'Focus only on this series',
+            icon: 'ph:star',
+            onClick: (closestPoint, _series) => {
+                if (closestPoint != null && data.length > 0 && data[closestPoint.seriesIndex] != null) {
+                    const originalSeriesData = data[closestPoint.seriesIndex];
+                    if (originalSeriesData.labelset?.labels != null) {
+                        const labels = originalSeriesData.labelset.labels.filter((label) => label.name !== '__name__');
+                        const labelsToAdd = labels.map((label) => ({
+                            key: label.name,
+                            value: label.value,
+                        }));
+                        addLabelMatcher(labelsToAdd);
+                    }
+                }
+            },
+        },
+        {
+            id: 'add-to-query',
+            label: 'Add to query',
+            icon: 'material-symbols:add',
+            createDynamicItems: (closestPoint, _series) => {
+                if (closestPoint == null || data.length === 0 || data[closestPoint.seriesIndex] == null) {
+                    return [
+                        {
+                            id: 'no-labels-available',
+                            label: 'No labels available',
+                            icon: 'ph:warning',
+                            disabled: () => true,
+                            onClick: () => { }, // No-op for disabled item
+                        },
+                    ];
+                }
+                const originalSeriesData = data[closestPoint.seriesIndex];
+                if (originalSeriesData.labelset?.labels == null) {
+                    return [
+                        {
+                            id: 'no-labels-available',
+                            label: 'No labels available',
+                            icon: 'ph:warning',
+                            disabled: () => true,
+                            onClick: () => { }, // No-op for disabled item
+                        },
+                    ];
+                }
+                const labels = originalSeriesData.labelset.labels.filter((label) => label.name !== '__name__');
+                return labels.map((label) => ({
+                    id: `add-label-${label.name}`,
+                    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-300", children: `${transformUtilizationLabels(label.name, utilizationMetrics)}="${label.value}"` })),
+                    onClick: () => {
+                        addLabelMatcher({
+                            key: label.name,
+                            value: label.value,
+                        });
+                    },
+                }));
+            },
+        },
+    ];
+};
+const transformMetricsData = (data) => {
+    const series = data.reduce((agg, s) => {
+        if (s.labelset !== undefined) {
+            // Generate ID from sorted labelsets
+            const labels = s.labelset.labels ?? [];
+            const sortedLabels = labels
+                .filter(label => label.name !== '__name__') // Exclude __name__ from ID generation
+                .sort((a, b) => a.name.localeCompare(b.name));
+            const id = sortedLabels.map(label => `${label.name}=${label.value}`).join(',');
+            agg.push({
+                id: id !== '' ? id : 'default', // fallback to 'default' if no labels
+                values: s.samples.reduce((agg, d) => {
+                    if (d.timestamp !== undefined && d.valuePerSecond !== undefined) {
+                        const timestampMs = Number(d.timestamp.seconds) * 1000 + d.timestamp.nanos / 1000000;
+                        agg.push([timestampMs, d.valuePerSecond]);
+                    }
+                    return agg;
+                }, []),
+            });
+        }
+        return agg;
+    }, []);
+    return series;
+};
 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 }) }));
 };
@@ -27,7 +123,7 @@ export const ProfileMetricsEmptyState = ({ message }) => {
 };
 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();
+    const { onError, perf, authenticationErrorMessage, isDarkMode, timezone } = useParcaContext();
     const { width, height, margin, heightStyle } = useMetricsGraphDimensions(comparing);
     useEffect(() => {
         if (error !== null) {
@@ -40,30 +136,143 @@ const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to,
         }
         perf?.markInteraction('Metrics graph render', response.series[0].samples.length);
     }, [perf, response]);
-    const series = response?.series;
-    const dataAvailable = series !== null && series !== undefined && series?.length > 0;
+    const originalSeries = response?.series;
+    const selectedPoint = useMemo(() => {
+        if (profile !== null && profile instanceof MergedProfileSelection) {
+            // Iterate over the series and find the series index that matches all
+            // labels of the profile selection. We specifically need the index
+            // because that's what the SeriesPoint interface expects.
+            const seriesIndex = originalSeries?.findIndex(s => {
+                return s.labelset?.labels?.every(label => {
+                    return profile.query.matchers.some(matcher => {
+                        return matcher.key === label.name && matcher.value === label.value;
+                    });
+                });
+            });
+            // if we found a series, return the point that matches the from/to timestamp exactly (in millisecond precision)
+            if (seriesIndex !== undefined &&
+                seriesIndex !== -1 &&
+                originalSeries !== undefined &&
+                originalSeries[seriesIndex] != null) {
+                const series = originalSeries[seriesIndex];
+                const pointIndex = series.samples.findIndex(sample => {
+                    return (sample.timestamp?.seconds === BigInt(profile.mergeFrom / 1000000000n) &&
+                        sample.timestamp?.nanos === Number(profile.mergeFrom % 1000000000n));
+                });
+                if (pointIndex !== -1) {
+                    return {
+                        seriesIndex,
+                        pointIndex,
+                    };
+                }
+            }
+            return null;
+        }
+        return null;
+    }, [profile, originalSeries]);
+    const transformedSeries = useMemo(() => {
+        return originalSeries != null ? transformMetricsData(originalSeries) : [];
+    }, [originalSeries]);
+    const contextMenuItems = useMemo(() => {
+        return originalSeries != null
+            ? createProfileContextMenuItems(addLabelMatcher, originalSeries)
+            : [];
+    }, [originalSeries, addLabelMatcher]);
+    const dataAvailable = originalSeries !== null && originalSeries !== undefined && originalSeries?.length > 0;
+    const { sampleUnit, sampleType, yAxisLabel, yAxisUnit } = useMemo(() => {
+        let sampleUnit = '';
+        let sampleType = '';
+        if (dataAvailable) {
+            if (originalSeries?.every((val, i, arr) => val?.sampleType?.unit === arr[0]?.sampleType?.unit)) {
+                sampleUnit = originalSeries[0]?.sampleType?.unit ?? '';
+                sampleType = originalSeries[0]?.sampleType?.type ?? '';
+            }
+            if (sampleUnit === '') {
+                const profileType = Query.parse(queryExpression).profileType();
+                sampleUnit = profileType.sampleUnit;
+                sampleType = profileType.sampleType;
+            }
+        }
+        // Calculate axis labels based on profile data
+        const isDeltaType = profile !== null ? profile?.query.profType.delta : false;
+        let yAxisLabel = sampleUnit;
+        let yAxisUnit = sampleUnit;
+        if (isDeltaType) {
+            if (sampleUnit === 'nanoseconds') {
+                if (sampleType === 'cpu') {
+                    yAxisLabel = 'CPU Cores';
+                    yAxisUnit = '';
+                }
+                if (sampleType === 'cuda') {
+                    yAxisLabel = 'GPU Time';
+                }
+            }
+            if (sampleUnit === 'bytes') {
+                yAxisLabel = 'Bytes per Second';
+            }
+        }
+        return { sampleUnit, sampleType, yAxisLabel, yAxisUnit };
+    }, [dataAvailable, originalSeries, queryExpression, profile]);
     const loading = metricsGraphLoading;
+    // Handle errors after all hooks have been called
     if (!metricsGraphLoading && error !== null) {
         if (authenticationErrorMessage !== undefined && error.code === 'UNAUTHENTICATED') {
             return _jsx(ErrorContent, { errorMessage: authenticationErrorMessage });
         }
         return _jsx(ErrorContent, { errorMessage: capitalizeOnlyFirstLetter(error.message) });
     }
-    let sampleUnit = '';
-    let sampleType = '';
-    if (dataAvailable) {
-        if (series.every((val, i, arr) => val?.sampleType?.unit === arr[0]?.sampleType?.unit)) {
-            sampleUnit = series[0]?.sampleType?.unit ?? '';
-            sampleType = series[0]?.sampleType?.type ?? '';
-        }
-        if (sampleUnit === '') {
-            const profileType = Query.parse(queryExpression).profileType();
-            sampleUnit = profileType.sampleUnit;
-            sampleType = profileType.sampleType;
-        }
-    }
-    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: loading ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode })) : dataAvailable ? (_jsx(MetricsGraph, { data: series, from: from, to: to, profile: profile, setTimeRange: setTimeRange, onSampleClick: (timestamp, _value, labels, duration) => {
-                    onPointClick(timestamp, labels, queryExpression, duration);
-                }, addLabelMatcher: addLabelMatcher, sampleUnit: sampleUnit, sampleType: sampleType, height: height, width: width, margin: margin, sumBy: sumBy })) : (_jsx(ProfileMetricsEmptyState, { message: "No data found. Try a different query." })) }, "metrics-graph-loaded") }));
+    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: loading ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode })) : dataAvailable ? (_jsx(MetricsGraph, { data: transformedSeries, from: from, to: to, setTimeRange: setTimeRange, selectedPoint: selectedPoint, onSampleClick: (closestPoint) => {
+                    // Use original data for both series and point
+                    if (originalSeries?.[closestPoint.seriesIndex] != null) {
+                        const originalSeriesData = originalSeries[closestPoint.seriesIndex];
+                        const originalPoint = originalSeriesData.samples[closestPoint.pointIndex];
+                        if (originalPoint.timestamp != null && originalPoint.valuePerSecond !== undefined) {
+                            const timestampNanos = originalPoint.timestamp.seconds * 1000000000n +
+                                BigInt(originalPoint.timestamp.nanos);
+                            onPointClick(timestampNanos, // Convert to number to match interface
+                            originalSeriesData.labelset?.labels ?? [], queryExpression, Number(originalPoint.duration ?? 0) // Convert bigint to number
+                            );
+                        }
+                    }
+                }, renderTooltipContent: (seriesIndex, pointIndex) => {
+                    if (originalSeries?.[seriesIndex]?.samples?.[pointIndex] != null) {
+                        const originalSeriesData = originalSeries[seriesIndex];
+                        const originalPoint = originalSeriesData.samples[pointIndex];
+                        if (originalPoint.timestamp != null && originalPoint.valuePerSecond !== undefined) {
+                            const timestampMs = Number(originalPoint.timestamp.seconds) * 1000 +
+                                originalPoint.timestamp.nanos / 1000000;
+                            const labels = originalSeriesData.labelset?.labels ?? [];
+                            const nameLabel = labels.find(e => e.name === '__name__');
+                            const highlightedNameLabel = nameLabel ?? { name: '', value: '' };
+                            // Calculate attributes maps for utilization metrics
+                            const utilizationMetrics = false; // This is for profile metrics, not utilization
+                            const attributesMap = 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;
+                            }, {});
+                            const attributesResourceMap = labels
+                                .filter(label => label.name.startsWith('attributes_resource.'))
+                                .reduce((acc, label) => {
+                                const key = label.name.replace('attributes_resource.', '');
+                                acc[key] = label.value;
+                                return acc;
+                            }, {});
+                            const isDeltaType = profile !== null
+                                ? profile?.query.profType.delta
+                                : false;
+                            return (_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: [isDeltaType ? (_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(originalPoint.valuePerSecond, sampleUnit === 'nanoseconds' && sampleType === 'cpu'
+                                                                                ? 'CPU Cores'
+                                                                                : sampleUnit, 5) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Total" }), _jsx("td", { className: "w-3/4", children: valueFormatter(originalPoint.value ?? 0, sampleUnit, 2) })] })] })) : (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Value" }), _jsx("td", { className: "w-3/4", children: valueFormatter(originalPoint.valuePerSecond, sampleUnit, 5) })] })), originalPoint.duration != null &&
+                                                            Number(originalPoint.duration) > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Duration" }), _jsx("td", { className: "w-3/4", children: valueFormatter(Number(originalPoint.duration.toString()), 'nanoseconds', 2) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(new Date(timestampMs), 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: 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 null;
+                }, yAxisLabel: yAxisLabel, yAxisUnit: yAxisUnit, height: height, width: width, margin: margin, contextMenuItems: contextMenuItems })) : (_jsx(ProfileMetricsEmptyState, { message: "No data found. Try a different query." })) }, "metrics-graph-loaded") }));
 };
 export default ProfileMetricsGraph;

package/dist/ProfileSelector/MetricsGraphSection.d.ts

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

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;AAK5D,OAAO,EAAC,cAAc,EAAE,KAAK,kBAAkB,IAAI,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAE1F,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gCAAgC,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACvB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,kBAAkB,CAAC;IAChC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC;IACb,qBAAqB,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,kBAAkB,CAAC,EAAE,KAAK,CAAC;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,iBAAiB,EAAE,MAAM,CAAC;QAC1B,IAAI,EAAE,sBAAsB,EAAE,CAAC;KAChC,CAAC,CAAC;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,yBAAyB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KAAK,IAAI,CAAC;CACnF;AAED,wBAAgB,mBAAmB,CAAC,EAClC,gBAAgB,EAChB,gCAAgC,EAChC,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,mBAAmB,EACnB,WAAW,EACX,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,KAAK,EACL,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,EACzB,yBAAyB,GAC1B,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CAsMxC"}
+{"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;AAK5D,OAAO,EAAC,cAAc,EAAE,KAAK,kBAAkB,IAAI,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAE1F,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gCAAgC,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACvB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,kBAAkB,CAAC;IAChC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC;IACb,qBAAqB,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,kBAAkB,CAAC,EAAE,KAAK,CAAC;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,iBAAiB,EAAE,MAAM,CAAC;QAC1B,IAAI,EAAE,sBAAsB,EAAE,CAAC;KAChC,CAAC,CAAC;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,yBAAyB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3D;AAED,wBAAgB,mBAAmB,CAAC,EAClC,gBAAgB,EAChB,gCAAgC,EAChC,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,mBAAmB,EACnB,WAAW,EACX,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,KAAK,EACL,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,EACzB,yBAAyB,GAC1B,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CA0MxC"}