@parca/profile 0.19.44 → 0.19.46

package/dist/MetricsGraph/UtilizationMetrics/Throughput.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,18 +11,84 @@ 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 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';
+const transformUtilizationLabels = (label) => {
+    return label.replace('attributes.', '').replace('attributes_resource.', '');
+};
+const createThroughputContextMenuItems = (addLabelMatcher, transmitData, receiveData) => {
+    const allData = [...transmitData, ...receiveData];
+    return [
+        {
+            id: 'focus-on-single-series',
+            label: 'Focus only on this series',
+            icon: 'ph:star',
+            onClick: (closestPoint, _series) => {
+                if (closestPoint != null &&
+                    allData.length > 0 &&
+                    allData[closestPoint.seriesIndex] != null) {
+                    const originalSeriesData = allData[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 ||
+                    allData.length === 0 ||
+                    allData[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 = allData[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,
+                        });
+                    },
+                }));
+            },
+        },
+    ];
+};
 function transformToSeries(data, isReceive = false) {
     const series = data.reduce(function (agg, s) {
         if (s.labelset !== undefined) {
@@ -49,204 +115,59 @@ function transformToSeries(data, isReceive = false) {
         values: series.values.sort((a, b) => a[0] - b[0]),
     }));
 }
-const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, width, height, margin, humanReadableName, from, to, selectedSeries, onSelectedSeriesChange, }) => {
-    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 parsedSelectedSeries = useMemo(() => {
-        if (selectedSeries == null || selectedSeries.length === 0) {
-            return [];
-        }
-        return selectedSeries.map(s => ({
-            key: s.key,
-            value: s.value,
-            matcherType: '=',
-        }));
-    }, [selectedSeries]);
-    const lineStroke = '1px';
-    const lineStrokeHover = '2px';
-    const lineStrokeSelected = '3px';
-    const graphWidth = width - margin * 1.5 - margin / 2;
-    const paddedFrom = from;
-    const paddedTo = to;
-    const series = useMemo(() => {
-        const transmitSeries = transformToSeries(transmitData);
-        const receiveSeries = transformToSeries(receiveData, true);
-        return [...transmitSeries, ...receiveSeries];
-    }, [transmitData, receiveData]);
-    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()
-        // Ensure domain is symmetric around 0 for balanced visualization
-        .domain([minY ?? 0, maxY ?? 0])
-        .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 = `areachart-context-menu-${idForContextMenu}`;
-    const { show } = useContextMenu({
-        id: MENU_ID,
-    });
-    const displayMenu = useCallback((e) => {
-        show({
-            event: e,
-        });
-    }, [show]);
-    // Create line generator for both transmit and receive
-    const lineGenerator = d3
-        .line()
-        .x(d => xScale(d[0]))
-        .y(d => yScale(d[1]));
-    const highlighted = useMemo(() => {
-        if (series.length === 0) {
-            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];
+function transformNetworkSeriesToSeries(transmitData, receiveData) {
+    const transmitSeries = transformToSeries(transmitData);
+    const receiveSeries = transformToSeries(receiveData, true);
+    const allSeries = [...transmitSeries, ...receiveSeries];
+    return allSeries.map(networkSeries => {
+        const labels = networkSeries.metric ?? [];
+        const sortedLabels = labels
+            .filter(label => label.name !== '__name__')
+            .sort((a, b) => a.name.localeCompare(b.name));
+        const labelString = sortedLabels.map(label => `${label.name}=${label.value}`).join(',');
+        const id = (networkSeries.isReceive === true ? 'receive-' : 'transmit-') +
+            (labelString !== '' ? labelString : 'default');
         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]),
+            id,
+            values: networkSeries.values.map(([timestamp, value]) => [
+                timestamp,
+                value,
+            ]),
         };
-    }, [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,
-                        valuePerSecond: Math.abs(highlighted.valuePerSecond),
-                    }, contextElement: graph.current, sampleType: 'throughput', sampleUnit: 'bytes_per_second', delta: false, utilizationMetrics: true, valuePrefix: highlighted.seriesIndex >= transmitData.length ? 'Receive ' : 'Transmit ' })) })), _jsx("div", { ref: graph, onMouseEnter: () => 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(6).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", transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x2: -6 }), _jsxs("text", { fill: "currentColor", x: -9, dy: '0.32em', children: [d < 0 ? '-' : '', valueFormatter(Math.abs(d), 'bytes_per_second', 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" }) })] }), _jsxs("g", { className: "areas", children: [_jsx("line", { x1: xScale(from), x2: xScale(to), y1: yScale(0), y2: yScale(0), stroke: "#64748b", strokeDasharray: "4 2", strokeWidth: 1, opacity: 0.7 }), series.map((s, i) => {
-                                            let isSelected = false;
-                                            if (parsedSelectedSeries != null && parsedSelectedSeries.length > 0) {
-                                                isSelected = parsedSelectedSeries.every(m => {
-                                                    for (let i = 0; i < s.metric.length; i++) {
-                                                        if (s.metric[i].name === m.key && s.metric[i].value === m.value) {
-                                                            return true;
-                                                        }
-                                                    }
-                                                    return false;
-                                                });
-                                            }
-                                            return (_jsx("g", { className: "line cursor-pointer", children: _jsx("path", { d: lineGenerator(s.values) ?? '', fill: "none", stroke: getSeriesColor(s.metric), strokeWidth: isSelected
-                                                        ? lineStrokeSelected
-                                                        : hovering && highlighted != null && i === highlighted.seriesIndex
-                                                            ? lineStrokeHover
-                                                            : lineStroke, strokeOpacity: isSelected ? 1 : 0.8, onClick: () => {
-                                                        if (highlighted != null && onSelectedSeriesChange != null) {
-                                                            onSelectedSeriesChange(highlighted.labels.map(l => ({
-                                                                key: l.name,
-                                                                value: l.value,
-                                                            })));
-                                                            setSelectedTimeframe(undefined);
-                                                        }
-                                                    } }) }, i));
-                                        })] })] })] }) })] }));
+    });
+}
+const RawAreaChart = ({ transmitData, receiveData, transformedData, addLabelMatcher: _addLabelMatcher, setTimeRange, width, height, margin, humanReadableName, from, to, selectedSeries: _selectedSeries, onSeriesClick, contextMenuItems, }) => {
+    const { timezone } = useParcaContext();
+    // Compute original series data for rich tooltip
+    const allOriginalData = useMemo(() => [...transmitData, ...receiveData], [transmitData, receiveData]);
+    return (_jsx(MetricsGraph, { data: transformedData, from: from, to: to, setTimeRange: setTimeRange, onSampleClick: closestPoint => {
+            if (onSeriesClick != null) {
+                onSeriesClick(closestPoint.seriesIndex);
+            }
+        }, yAxisLabel: humanReadableName, yAxisUnit: "bytes_per_second", width: width, height: height, margin: margin, contextMenuItems: contextMenuItems, renderTooltipContent: (seriesIndex, pointIndex) => {
+            if (allOriginalData?.[seriesIndex]?.samples?.[pointIndex] != null) {
+                const originalSeriesData = allOriginalData[seriesIndex];
+                const originalPoint = allOriginalData[seriesIndex].samples[pointIndex];
+                const labels = originalSeriesData.labelset?.labels ?? [];
+                const nameLabel = labels.find(e => e.name === '__name__');
+                const highlightedNameLabel = nameLabel ?? { name: '', value: '' };
+                // Determine if this is receive data (negative values)
+                const isReceive = seriesIndex >= transmitData.length;
+                const valuePrefix = isReceive ? 'Receive ' : 'Transmit ';
+                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: [_jsxs("td", { className: "w-1/4", children: [valuePrefix, "Value"] }), _jsx("td", { className: "w-3/4", children: valueFormatter(Math.abs(originalPoint.value), 'bytes_per_second', 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) })] })] }) }) }), _jsx("span", { className: "my-2 block text-gray-500", 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: `${transformUtilizationLabels(label.name)}="${label.value}"`, maxTextLength: 37, id: `${seriesIndex.toString()}-${pointIndex.toString()}-tooltip-${label.name}` }) }, `${seriesIndex.toString()}-${pointIndex.toString()}-${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;
+        } }));
 };
-const AreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, selectedSeries, onSelectedSeriesChange, }) => {
+const AreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, selectedSeries, onSeriesClick, }) => {
     const { isDarkMode } = useParcaContext();
     const { width, height, margin, heightStyle } = useMetricsGraphDimensions(false, true);
-    return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "w-full relative", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: utilizationMetricsLoading === true ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode, isMini: true })) : (_jsx(RawAreaChart, { transmitData: transmitData, receiveData: receiveData, addLabelMatcher: addLabelMatcher, setTimeRange: setTimeRange, width: width, height: height, margin: margin, name: name, humanReadableName: humanReadableName, from: from, to: to, selectedSeries: selectedSeries, onSelectedSeriesChange: onSelectedSeriesChange })) }, "area-chart-graph-loaded") }));
+    const transformedData = useMemo(() => transformNetworkSeriesToSeries(transmitData, receiveData), [transmitData, receiveData]);
+    const contextMenuItems = useMemo(() => {
+        return createThroughputContextMenuItems(addLabelMatcher, transmitData, receiveData);
+    }, [addLabelMatcher, transmitData, receiveData]);
+    return (_jsx(AnimatePresence, { children: _jsx(motion.div, { className: "w-full relative", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: utilizationMetricsLoading === true ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode, isMini: true })) : (_jsx(RawAreaChart, { transmitData: transmitData, receiveData: receiveData, transformedData: transformedData, addLabelMatcher: addLabelMatcher, setTimeRange: setTimeRange, width: width, height: height, margin: margin, name: name, humanReadableName: humanReadableName, from: from, to: to, selectedSeries: selectedSeries, onSeriesClick: onSeriesClick, contextMenuItems: contextMenuItems })) }, "area-chart-graph-loaded") }));
 };
 export default AreaChart;

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

@@ -1,36 +1,28 @@
 import { DateTimeRange } from '@parca/components';
 import { type UtilizationMetrics as MetricSeries } from '../../ProfileSelector';
 interface CommonProps {
-    data: MetricSeries[];
-    addLabelMatcher: (labels: {
-        key: string;
-        value: string;
-    } | Array<{
-        key: string;
-        value: string;
-    }>) => void;
     setTimeRange: (range: DateTimeRange) => void;
-    name: string;
     humanReadableName: string;
     from: number;
     to: number;
-    onSelectedSeriesChange?: (series: Array<{
-        key: string;
-        value: string;
-    }>) => void;
+    onSeriesClick?: (seriesIndex: number) => void;
 }
 type Props = CommonProps & {
     data: MetricSeries[];
-    addLabelMatcher: (labels: {
+    yAxisUnit: string;
+    utilizationMetricsLoading?: boolean;
+    addLabelMatcher?: (labels: {
         key: string;
         value: string;
     } | Array<{
         key: string;
         value: string;
     }>) => void;
-    setTimeRange: (range: DateTimeRange) => void;
-    utilizationMetricsLoading?: boolean;
+    onSelectedSeriesChange?: (series: Array<{
+        key: string;
+        value: string;
+    }>) => void;
 };
-declare const UtilizationMetrics: ({ data, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, onSelectedSeriesChange, }: Props) => JSX.Element;
+declare const UtilizationMetrics: ({ data, setTimeRange, utilizationMetricsLoading, humanReadableName, from, to, yAxisUnit, addLabelMatcher, onSeriesClick, onSelectedSeriesChange: _onSelectedSeriesChange, }: Props) => JSX.Element;
 export default UtilizationMetrics;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAqD,MAAM,mBAAmB,CAAC;AAIpG,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAO9E,UAAU,WAAW;IACnB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KAAK,IAAI,CAAC;CAChF;AAQD,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAucF,QAAA,MAAM,kBAAkB,GAAI,gIAUzB,KAAK,KAAG,GAAG,CAAC,OAiCd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACL,aAAa,EAId,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAI9E,UAAU,WAAW;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAYD,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,eAAe,CAAC,EAAE,CAChB,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,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KAAK,IAAI,CAAC;CAChF,CAAC;AAyTF,QAAA,MAAM,kBAAkB,GAAI,6KAWzB,KAAK,KAAG,GAAG,CAAC,OAwCd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}