@parca/profile 0.19.44 → 0.19.46

package/dist/MetricsGraph/UtilizationMetrics/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,44 +11,104 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Fragment, useCallback, useId, useMemo, useRef, useState } from 'react';
-import * as d3 from 'd3';
-import { pointer } from 'd3-selection';
+import { useMemo } from 'react';
+import { Icon } from '@iconify/react';
 import { AnimatePresence, motion } from 'framer-motion';
-import throttle from 'lodash.throttle';
-import { useContextMenu } from 'react-contexify';
-import { DateTimeRange, MetricsGraphSkeleton, useParcaContext, useURLState } from '@parca/components';
-import { formatDate, formatForTimespan, getPrecision, valueFormatter } from '@parca/utilities';
-import MetricsSeries from '../../MetricsSeries';
-import MetricsContextMenu from '../MetricsContextMenu';
-import MetricsTooltip from '../MetricsTooltip';
+import { MetricsGraphSkeleton, TextWithTooltip, useParcaContext, } from '@parca/components';
+import { formatDate, timePattern, valueFormatter } from '@parca/utilities';
+import MetricsGraph from '../index';
 import { useMetricsGraphDimensions } from '../useMetricsGraphDimensions';
-import { getSeriesColor } from '../utils/colorMapping';
-function transformToSeries(data) {
-    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,
-                isSelected: s.isSelected ?? false,
-                values: s.samples.reduce(function (agg, d) {
-                    if (d.timestamp !== undefined && d.value !== undefined) {
-                        agg.push([d.timestamp, d.value]);
+const transformUtilizationLabels = (label) => {
+    return label.replace('attributes.', '').replace('attributes_resource.', '');
+};
+const createUtilizationContextMenuItems = (addLabelMatcher, originalData) => {
+    return [
+        {
+            id: 'focus-on-single-series',
+            label: 'Focus only on this series',
+            icon: 'ph:star',
+            onClick: (closestPoint, _series) => {
+                if (closestPoint != null &&
+                    originalData.length > 0 &&
+                    originalData[closestPoint.seriesIndex] != null) {
+                    const originalSeriesData = originalData[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);
                     }
-                    return agg;
-                }, []),
-                labelset: metric.map(m => `${m.name}=${m.value}`).join(','),
-            });
+                }
+            },
+        },
+        {
+            id: 'add-to-query',
+            label: 'Add to query',
+            icon: 'material-symbols:add',
+            createDynamicItems: (closestPoint, _series) => {
+                if (closestPoint == null ||
+                    originalData.length === 0 ||
+                    originalData[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 = originalData[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)}="${label.value}"` })),
+                    onClick: () => {
+                        addLabelMatcher({
+                            key: label.name,
+                            value: label.value,
+                        });
+                    },
+                }));
+            },
+        },
+    ];
+};
+const transformMetricSeriesToSeries = (data) => {
+    return data.map(metricSeries => {
+        if (metricSeries.labelset != null) {
+            const labels = metricSeries.labelset.labels ?? [];
+            const sortedLabels = labels.sort((a, b) => a.name.localeCompare(b.name));
+            const id = sortedLabels.map(label => `${label.name}=${label.value}`).join(',');
+            return {
+                id: id !== '' ? id : 'default',
+                values: metricSeries.samples.map((sample) => [
+                    sample.timestamp,
+                    sample.value,
+                ]),
+            };
         }
-        return agg;
-    }, []);
-    // Sort values by timestamp for each series
-    return series.map(series => ({
-        ...series,
-        values: series.values.sort((a, b) => a[0] - b[0]),
-    }));
-}
-const getYAxisUnit = (name) => {
+        return {
+            id: 'default',
+            values: [],
+        };
+    });
+};
+const _getYAxisUnit = (name) => {
     switch (name) {
         case 'gpu_power_watt':
             return 'watts';
@@ -60,183 +120,64 @@ const getYAxisUnit = (name) => {
             return 'percent';
     }
 };
-const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, height, margin, name, humanReadableName, from, to, onSelectedSeriesChange, }) => {
+const RawUtilizationMetrics = ({ data, originalData, setTimeRange, width, height, margin, humanReadableName, from, to, yAxisUnit, contextMenuItems, onSeriesClick, }) => {
     const { timezone } = useParcaContext();
-    const graph = useRef(null);
-    const [dragging, setDragging] = useState(false);
-    const [hovering, setHovering] = useState(false);
-    const [relPos, setRelPos] = useState(-1);
-    const [pos, setPos] = useState([0, 0]);
-    const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
-    const idForContextMenu = useId();
-    const [_, setSelectedTimeframe] = useURLState('gpu_selected_timeframe');
-    const lineStroke = '1px';
-    const lineStrokeHover = '2px';
-    const lineStrokeSelected = '3px';
-    const graphWidth = useMemo(() => width - margin * 1.5 - margin / 2, [width, margin]);
-    const graphTransform = useMemo(() => {
-        // Adds 10px padding which aligns the graph on the grid
-        return `translate(10, 0) scale(${(graphWidth - 10) / graphWidth}, 1)`;
-    }, [graphWidth]);
-    const paddedFrom = from;
-    const paddedTo = to;
-    const series = useMemo(() => transformToSeries(data), [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 l = d3.line(d => xScale(d[0]), d => yScale(d[1]));
-    const highlighted = useMemo(() => {
-        if (series.length === 0) {
+    return (_jsx(MetricsGraph, { data: data, from: from, to: to, setTimeRange: setTimeRange, onSampleClick: closestPoint => {
+            if (onSeriesClick != null) {
+                onSeriesClick(closestPoint.seriesIndex);
+            }
+        }, yAxisLabel: humanReadableName, yAxisUnit: yAxisUnit, width: width, height: height, margin: margin, contextMenuItems: contextMenuItems, renderTooltipContent: (seriesIndex, pointIndex) => {
+            if (originalData?.[seriesIndex]?.samples?.[pointIndex] != null) {
+                const originalSeriesData = originalData[seriesIndex];
+                const originalPoint = originalData[seriesIndex].samples[pointIndex];
+                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 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;
+                }, {});
+                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: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Value" }), _jsx("td", { className: "w-3/4", children: valueFormatter(originalPoint.value, yAxisUnit, 2) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(new Date(originalPoint.timestamp), timePattern(timezone), timezone) })] })] }) }) }), _jsxs("span", { className: "my-2 block text-gray-500", children: [Object.keys(attributesResourceMap).length > 0 ? (_jsx("span", { className: "text-sm font-bold text-gray-700 dark:text-white", children: "Resource Attributes" })) : null, _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: `${transformUtilizationLabels(name)}="${attributesResourceMap[name] ?? ''}"`, maxTextLength: 48, id: `tooltip-${name}-${attributesResourceMap[name] ?? ''}` }) }, 'resourceattribute-' +
+                                            seriesIndex.toString() +
+                                            '-' +
+                                            pointIndex.toString() +
+                                            '-' +
+                                            name))) }), Object.keys(attributesMap).length > 0 ? (_jsx("span", { className: "text-sm font-bold text-gray-700 dark:text-white", children: "Attributes" })) : null, _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: `${transformUtilizationLabels(name)}="${attributesMap[name] ?? ''}"`, maxTextLength: 48, id: `tooltip-${name}-${attributesMap[name] ?? ''}` }) }, 'attribute-' +
+                                            seriesIndex.toString() +
+                                            '-' +
+                                            pointIndex.toString() +
+                                            '-' +
+                                            name))) }), labels
+                                        .filter(label => label.name !== '__name__' && !label.name.startsWith('attributes'))
+                                        .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: `${transformUtilizationLabels(label.name)}="${label.value}"`, maxTextLength: 37, id: `tooltip-${label.name}` }) }, 'attribute-' +
+                                        seriesIndex.toString() +
+                                        '-' +
+                                        pointIndex.toString() +
+                                        '-label-' +
+                                        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;
-        }
-        // Return the closest point as the highlighted point
-        const closestPointPerSeries = series.map(function (s) {
-            const distances = s.values.map(d => {
-                const x = xScale(d[0]) + margin / 2;
-                const y = yScale(d[1]) - margin / 3;
-                return Math.sqrt(Math.pow(pos[0] - x, 2) + Math.pow(pos[1] - y, 2));
-            });
-            const pointIndex = d3.minIndex(distances);
-            const minDistance = distances[pointIndex];
-            return {
-                pointIndex,
-                distance: minDistance,
-            };
-        });
-        const closestSeriesIndex = d3.minIndex(closestPointPerSeries, s => s.distance);
-        const pointIndex = closestPointPerSeries[closestSeriesIndex].pointIndex;
-        const point = series[closestSeriesIndex].values[pointIndex];
-        return {
-            seriesIndex: closestSeriesIndex,
-            labels: series[closestSeriesIndex].metric,
-            timestamp: point[0],
-            valuePerSecond: point[1],
-            value: point[2],
-            duration: point[3],
-            x: xScale(point[0]),
-            y: yScale(point[1]),
-        };
-    }, [pos, series, xScale, yScale, margin]);
-    const onMouseDown = (e) => {
-        // only left mouse button
-        if (e.button !== 0) {
-            return;
-        }
-        // X/Y coordinate array relative to svg
-        const rel = pointer(e);
-        const xCoordinate = rel[0];
-        const xCoordinateWithoutMargin = xCoordinate - margin;
-        if (xCoordinateWithoutMargin >= 0) {
-            setRelPos(xCoordinateWithoutMargin);
-            setDragging(true);
-        }
-        e.stopPropagation();
-        e.preventDefault();
-    };
-    const onMouseUp = (e) => {
-        setDragging(false);
-        if (relPos === -1) {
-            // MouseDown happened outside of this element.
-            return;
-        }
-        // This is a normal click. We tolerate tiny movements to still be a
-        // click as they can occur when clicking based on user feedback.
-        if (Math.abs(relPos - pos[0]) <= 1) {
-            setRelPos(-1);
-            return;
-        }
-        let startPos = relPos;
-        let endPos = pos[0];
-        if (startPos > endPos) {
-            startPos = pos[0];
-            endPos = relPos;
-        }
-        const startCorrection = 10;
-        const endCorrection = 30;
-        const firstTime = xScale.invert(startPos - startCorrection).valueOf();
-        const secondTime = xScale.invert(endPos - endCorrection).valueOf();
-        setTimeRange(DateTimeRange.fromAbsoluteDates(firstTime, secondTime));
-        setRelPos(-1);
-        e.stopPropagation();
-        e.preventDefault();
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(MetricsContextMenu, { onAddLabelMatcher: addLabelMatcher, menuId: MENU_ID, highlighted: highlighted, trackVisibility: trackVisibility, utilizationMetrics: true }), highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", { onMouseMove: onMouseMove, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), children: !isContextMenuOpen && (_jsx(MetricsTooltip, { x: pos[0] + margin, y: pos[1] + margin, highlighted: highlighted, contextElement: graph.current, sampleType: name, sampleUnit: getYAxisUnit(name), delta: false, utilizationMetrics: true })) })), _jsx("div", { ref: graph, onMouseEnter: function () {
-                    setHovering(true);
-                }, onMouseLeave: () => setHovering(false), onContextMenu: displayMenu, children: _jsxs("svg", { width: `${width}px`, height: `${height + margin}px`, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove, children: [_jsx("g", { transform: `translate(${margin}, 0)`, children: dragging && (_jsx("g", { className: "zoom-time-rect", children: _jsx("rect", { className: "bar", x: pos[0] - relPos < 0 ? pos[0] : relPos, y: 0, height: height, width: Math.abs(pos[0] - relPos), fill: 'rgba(0, 0, 0, 0.125)' }) })) }), _jsxs("g", { transform: `translate(${margin * 1.5}, ${margin / 1.5})`, children: [_jsxs("g", { className: "y axis", textAnchor: "end", fontSize: "10", fill: "none", children: [yScale.ticks(3).map((d, i, allTicks) => {
-                                            let decimals = 2;
-                                            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, getYAxisUnit(name), decimals) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: yScale(d), y2: yScale(d) }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`));
-                                        }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: 0, y1: 0, y2: height - margin }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(to), x2: xScale(to), y1: 0, y2: height - margin }), _jsx("g", { transform: `translate(${-margin}, ${(height - margin) / 2}) rotate(270)`, children: _jsx("text", { fill: "currentColor", dy: "-0.7em", className: "text-sm capitalize", textAnchor: "middle", children: humanReadableName }) })] }), _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
-                                                    /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
-                                                    transform: `translate(${xScale(d)}, 0)`, children: [_jsx("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-500" }), _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: formatDate(d, formatForTimespan(from, to), timezone) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: graphWidth, y1: 0, y2: 0 }), _jsx("g", { transform: `translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`, children: _jsx("text", { fill: "currentColor", dy: ".71em", y: 5, className: "text-sm", children: "Time" }) })] }), _jsx("g", { className: "lines fill-transparent", transform: graphTransform, children: series.map((s, i) => {
-                                        const isLimit = s.metric.findIndex(m => m.name === '__type__' && m.value === 'limit') > -1;
-                                        const strokeDasharray = isLimit ? '8 4' : '';
-                                        return (_jsx("g", { className: "line cursor-pointer", children: _jsx(MetricsSeries, { data: s, line: l, color: getSeriesColor(s.metric), strokeWidth: s.isSelected === true
-                                                    ? lineStrokeSelected
-                                                    : hovering && highlighted != null && i === highlighted.seriesIndex
-                                                        ? lineStrokeHover
-                                                        : lineStroke, strokeDasharray: strokeDasharray, xScale: xScale, yScale: yScale, onClick: () => {
-                                                    if (highlighted != null && onSelectedSeriesChange != null) {
-                                                        onSelectedSeriesChange(highlighted.labels.map(l => ({
-                                                            key: l.name,
-                                                            value: l.value,
-                                                        })));
-                                                        // reset the selected_timeframe
-                                                        setSelectedTimeframe(undefined);
-                                                    }
-                                                } }) }, i));
-                                    }) })] })] }) })] }));
+        } }));
 };
-const UtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, onSelectedSeriesChange, }) => {
+const UtilizationMetrics = ({ data, setTimeRange, utilizationMetricsLoading, humanReadableName, from, to, yAxisUnit, addLabelMatcher, onSeriesClick, onSelectedSeriesChange: _onSelectedSeriesChange, }) => {
     const { isDarkMode } = useParcaContext();
     const { width, height, margin, heightStyle } = useMetricsGraphDimensions(false, true);
-    return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "w-full relative", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: utilizationMetricsLoading === true ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode, isMini: true })) : (_jsx(RawUtilizationMetrics, { data: data, addLabelMatcher: addLabelMatcher, setTimeRange: setTimeRange, width: width, height: height, margin: margin, name: name, humanReadableName: humanReadableName, from: from, to: to, onSelectedSeriesChange: onSelectedSeriesChange })) }, "utilization-metrics-graph-loaded") }));
+    const transformedData = useMemo(() => transformMetricSeriesToSeries(data), [data]);
+    const contextMenuItems = useMemo(() => {
+        return addLabelMatcher != null ? createUtilizationContextMenuItems(addLabelMatcher, data) : [];
+    }, [addLabelMatcher, data]);
+    return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "w-full relative", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: utilizationMetricsLoading === true ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode, isMini: true })) : (_jsx(RawUtilizationMetrics, { data: transformedData, originalData: data, setTimeRange: setTimeRange, width: width, height: height, margin: margin, humanReadableName: humanReadableName, from: from, to: to, yAxisUnit: yAxisUnit, contextMenuItems: contextMenuItems, onSeriesClick: onSeriesClick })) }, "utilization-metrics-graph-loaded") }));
 };
 export default UtilizationMetrics;

package/dist/MetricsGraph/index.d.ts

@@ -1,45 +1,38 @@
-import { Label, MetricsSeries as MetricsSeriesPb } from '@parca/client';
+import React from 'react';
 import { DateTimeRange } from '@parca/components';
-import { MergedProfileSelection } from '..';
+import { ContextMenuItem, ContextMenuItemOrSubmenu, ContextMenuSubmenu } from './MetricsContextMenu';
 interface Props {
-    data: MetricsSeriesPb[];
+    data: Series[];
     from: number;
     to: number;
-    profile: MergedProfileSelection | null;
-    onSampleClick: (timestamp: number, value: number, labels: Label[], duration: number) => void;
-    addLabelMatcher: (labels: {
-        key: string;
-        value: string;
-    } | Array<{
-        key: string;
-        value: string;
-    }>) => void;
+    onSampleClick: (closestPoint: SeriesPoint) => void;
     setTimeRange: (range: DateTimeRange) => void;
-    sampleType: string;
-    sampleUnit: string;
+    yAxisLabel: string;
+    yAxisUnit: string;
     width?: number;
     height?: number;
     margin?: number;
-    sumBy?: string[];
+    selectedPoint?: SeriesPoint | null;
+    contextMenuItems?: ContextMenuItemOrSubmenu[];
+    renderTooltipContent?: (seriesIndex: number, pointIndex: number) => React.ReactNode;
+}
+export interface SeriesPoint {
+    seriesIndex: number;
+    pointIndex: number;
 }
 export interface HighlightedSeries {
     seriesIndex: number;
-    labels: Label[];
-    timestamp: number;
-    value: number;
-    valuePerSecond: number;
-    duration: number;
+    pointIndex: number;
     x: number;
     y: number;
 }
 export interface Series {
-    metric: Label[];
-    values: number[][];
-    labelset: string;
-    isSelected?: boolean;
+    id: string;
+    values: Array<[number, number]>;
 }
-declare const MetricsGraph: ({ data, from, to, profile, onSampleClick, addLabelMatcher, setTimeRange, sampleType, sampleUnit, width, height, margin, sumBy, }: Props) => JSX.Element;
+declare const MetricsGraph: ({ data, from, to, onSampleClick, setTimeRange, yAxisLabel, yAxisUnit, width, height, margin, selectedPoint, contextMenuItems, renderTooltipContent, }: Props) => JSX.Element;
 export default MetricsGraph;
+export type { ContextMenuItemOrSubmenu, ContextMenuItem, ContextMenuSubmenu };
 export declare const parseValue: (value: string) => number | null;
-export declare const RawMetricsGraph: ({ data, from, to, profile, onSampleClick, addLabelMatcher, setTimeRange, sampleType, sampleUnit, width, height, margin, sumBy, }: Props) => JSX.Element;
+export declare const RawMetricsGraph: ({ data, from, to, onSampleClick, setTimeRange, yAxisLabel, yAxisUnit, width, height, margin, selectedPoint, contextMenuItems, renderTooltipContent, }: Props) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraph/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAC,KAAK,EAAiB,aAAa,IAAI,eAAe,EAAC,MAAM,eAAe,CAAC;AACrF,OAAO,EAAC,aAAa,EAAkB,MAAM,mBAAmB,CAAC;AASjE,OAAO,EAAC,sBAAsB,EAAC,MAAM,IAAI,CAAC;AAO1C,UAAU,KAAK;IACb,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7F,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,MAAM;IACrB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,GAAI,kIAcnB,KAAK,KAAG,GAAG,CAAC,OA2Bd,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,KAAG,MAAM,GAAG,IAKnD,CAAC;AAKF,eAAO,MAAM,eAAe,GAAI,kIAc7B,KAAK,KAAG,GAAG,CAAC,OA6fd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAOrF,OAAO,EAAC,aAAa,EAAkB,MAAM,mBAAmB,CAAC;AAKjE,OAA2B,EACzB,eAAe,EACf,wBAAwB,EACxB,kBAAkB,EACnB,MAAM,sBAAsB,CAAC;AAI9B,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,CAAC,YAAY,EAAE,WAAW,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAC9C,oBAAoB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACrF;AAED,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;CACjC;AAED,QAAA,MAAM,YAAY,GAAI,uJAcnB,KAAK,KAAG,GAAG,CAAC,OA2Bd,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,YAAY,EAAC,wBAAwB,EAAE,eAAe,EAAE,kBAAkB,EAAC,CAAC;AAE5E,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,KAAG,MAAM,GAAG,IAKnD,CAAC;AAKF,eAAO,MAAM,eAAe,GAAI,uJAc7B,KAAK,KAAG,GAAG,CAAC,OA6ad,CAAC"}