@parca/profile 0.19.82 → 0.19.83

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.19.83](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.82...@parca/profile@0.19.83) (2025-11-26)
+
+### Reverts
+
+- Revert "Refactor ProfileSelector and MetricsGraphSection components (#6025)" (#6072) ([4dcbafb](https://github.com/parca-dev/parca/commit/4dcbafb3757dca64e2ce4f7a111208ca7ee88355)), closes [#6025](https://github.com/parca-dev/parca/issues/6025) [#6072](https://github.com/parca-dev/parca/issues/6072)
+
 ## 0.19.82 (2025-11-26)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MatchersInput/index.d.ts

@@ -1,3 +1,35 @@
-declare const MatchersInput: () => JSX.Element;
-export default MatchersInput;
+import { LabelsResponse, QueryServiceClient } from '@parca/client';
+import { Query } from '@parca/parser';
+import { UtilizationLabels } from '../ProfileSelector';
+interface MatchersInputProps {
+    queryClient: QueryServiceClient;
+    setMatchersString: (arg: string) => void;
+    runQuery: () => void;
+    currentQuery: Query;
+    profileType: string;
+    start?: number;
+    end?: number;
+}
+export interface ILabelNamesResult {
+    response?: LabelsResponse;
+    error?: Error;
+}
+interface UseLabelNames {
+    result: ILabelNamesResult;
+    loading: boolean;
+    refetch: () => Promise<void>;
+}
+export declare const useLabelNames: (client: QueryServiceClient, profileType: string, start?: number, end?: number, match?: string[]) => UseLabelNames;
+interface UseLabelValues {
+    result: {
+        response: string[];
+        error?: Error;
+    };
+    loading: boolean;
+    refetch: () => Promise<void>;
+}
+export declare const useLabelValues: (client: QueryServiceClient, labelName: string, profileType: string, start?: number, end?: number) => UseLabelValues;
+export declare const useFetchUtilizationLabelValues: (labelName: string, utilizationLabels?: UtilizationLabels) => string[];
+export default function MatchersInputWithProvider(props: MatchersInputProps): JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MatchersInput/index.tsx"],"names":[],"mappings":"AAyBA,QAAA,MAAM,aAAa,QAAO,GAAG,CAAC,OAsM7B,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MatchersInput/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAgB,cAAc,EAAE,kBAAkB,EAAgB,MAAM,eAAe,CAAC;AAE/F,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAIpC,OAAO,EAAC,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AAKrD,UAAU,kBAAkB;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,KAAK,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,UAAU,aAAa;IACrB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,GACxB,QAAQ,kBAAkB,EAC1B,aAAa,MAAM,EACnB,QAAQ,MAAM,EACd,MAAM,MAAM,EACZ,QAAQ,MAAM,EAAE,KACf,aAkCF,CAAC;AAEF,UAAU,cAAc;IACtB,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,EAAE,CAAC;QACnB,KAAK,CAAC,EAAE,KAAK,CAAC;KACf,CAAC;IACF,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,cAAc,GACzB,QAAQ,kBAAkB,EAC1B,WAAW,MAAM,EACjB,aAAa,MAAM,EACnB,QAAQ,MAAM,EACd,MAAM,MAAM,KACX,cAiCF,CAAC;AAEF,eAAO,MAAM,8BAA8B,GACzC,WAAW,MAAM,EACjB,oBAAoB,iBAAiB,KACpC,MAAM,EAWR,CAAC;AA2MF,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAWxF"}

package/dist/MatchersInput/index.js

@@ -11,24 +11,99 @@ import { jsx as _jsx, jsxs as _jsxs } 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 { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import cx from 'classnames';
 import TextareaAutosize from 'react-textarea-autosize';
+import { useGrpcMetadata } from '@parca/components';
 import { Query } from '@parca/parser';
 import { TEST_IDS, testId } from '@parca/test-utils';
-import { useUnifiedLabels } from '../contexts/UnifiedLabelsContext';
-import { useQueryState } from '../hooks/useQueryState';
+import { millisToProtoTimestamp, sanitizeLabelValue } from '@parca/utilities';
+import { LabelsProvider, useLabels } from '../contexts/MatchersInputLabelsContext';
+import useGrpcQuery from '../useGrpcQuery';
 import SuggestionsList, { Suggestion, Suggestions } from './SuggestionsList';
-const MatchersInput = () => {
+export const useLabelNames = (client, profileType, start, end, match) => {
+    const metadata = useGrpcMetadata();
+    const { data, isLoading, error, refetch } = useGrpcQuery({
+        key: ['labelNames', profileType, match?.join(','), start, end],
+        queryFn: async (signal) => {
+            const request = { match: match !== undefined ? match : [] };
+            if (start !== undefined && end !== undefined) {
+                request.start = millisToProtoTimestamp(start);
+                request.end = millisToProtoTimestamp(end);
+            }
+            if (profileType !== undefined) {
+                request.profileType = profileType;
+            }
+            const { response } = await client.labels(request, { meta: metadata, abort: signal });
+            return response;
+        },
+        options: {
+            enabled: profileType !== undefined && profileType !== '',
+            keepPreviousData: false,
+        },
+    });
+    useEffect(() => {
+        console.log('Label names query result:', { data, error, isLoading });
+    }, [data, error, isLoading]);
+    return {
+        result: { response: data, error: error },
+        loading: isLoading,
+        refetch: async () => {
+            await refetch();
+        },
+    };
+};
+export const useLabelValues = (client, labelName, profileType, start, end) => {
+    const metadata = useGrpcMetadata();
+    const { data, isLoading, error, refetch } = useGrpcQuery({
+        key: ['labelValues', labelName, profileType, start, end],
+        queryFn: async (signal) => {
+            const request = { labelName, match: [], profileType };
+            if (start !== undefined && end !== undefined) {
+                request.start = millisToProtoTimestamp(start);
+                request.end = millisToProtoTimestamp(end);
+            }
+            const { response } = await client.values(request, { meta: metadata, abort: signal });
+            return sanitizeLabelValue(response.labelValues);
+        },
+        options: {
+            enabled: profileType !== undefined &&
+                profileType !== '' &&
+                labelName !== undefined &&
+                labelName !== '',
+            keepPreviousData: false,
+        },
+    });
+    console.log('Label values query result:', { data, error, isLoading, labelName });
+    return {
+        result: { response: data ?? [], error: error },
+        loading: isLoading,
+        refetch: async () => {
+            await refetch();
+        },
+    };
+};
+export const useFetchUtilizationLabelValues = (labelName, utilizationLabels) => {
+    const { data } = useQuery({
+        queryKey: ['utilizationLabelValues', labelName],
+        queryFn: async () => {
+            const result = await utilizationLabels?.utilizationFetchLabelValues?.(labelName);
+            return result ?? [];
+        },
+        enabled: utilizationLabels?.utilizationFetchLabelValues != null && labelName !== '',
+    });
+    return data ?? [];
+};
+const MatchersInput = ({ setMatchersString, runQuery, currentQuery, }) => {
     const inputRef = useRef(null);
     const [focusedInput, setFocusedInput] = useState(false);
     const [lastCompleted, setLastCompleted] = useState(new Suggestion('', '', ''));
-    const { labelNames, labelValues, labelNameMappingsForMatchersInput: labelNameMappings, isLabelNamesLoading, isLabelValuesLoading, currentLabelName, setCurrentLabelName, shouldHandlePrefixes, refetchLabelValues, refetchLabelNames, suffix, } = useUnifiedLabels();
-    const { setDraftMatchers, commitDraft, draftParsedQuery } = useQueryState({ suffix });
-    const value = draftParsedQuery != null ? draftParsedQuery.matchersString() : '';
+    const { labelNames, labelValues, labelNameMappings, isLabelNamesLoading, isLabelValuesLoading, currentLabelName, setCurrentLabelName, shouldHandlePrefixes, refetchLabelValues, refetchLabelNames, } = useLabels();
+    const value = currentQuery.matchersString();
     const suggestionSections = useMemo(() => {
         const suggestionSections = new Suggestions();
-        Query.suggest(`${draftParsedQuery?.profileName()}{${value}`).forEach(function (s) {
+        Query.suggest(`${currentQuery.profileName()}{${value}`).forEach(function (s) {
             // Skip suggestions that we just completed. This really only works,
             // because we know the language is not repetitive. For a language that
             // has a repeating word, this would not work.
@@ -91,7 +166,7 @@ const MatchersInput = () => {
         });
         return suggestionSections;
     }, [
-        draftParsedQuery,
+        currentQuery,
         lastCompleted,
         labelNames,
         labelValues,
@@ -104,7 +179,7 @@ const MatchersInput = () => {
     const resetLastCompleted = () => setLastCompleted(new Suggestion('', '', ''));
     const onChange = (e) => {
         const newValue = e.target.value;
-        setDraftMatchers(newValue);
+        setMatchersString(newValue);
         resetLastCompleted();
     };
     const complete = (suggestion) => {
@@ -122,7 +197,7 @@ const MatchersInput = () => {
     const applySuggestion = (suggestion) => {
         const newValue = complete(suggestion);
         setLastCompleted(suggestion);
-        setDraftMatchers(newValue);
+        setMatchersString(newValue);
         if (inputRef.current !== null) {
             inputRef.current.value = newValue;
             inputRef.current.focus();
@@ -134,11 +209,13 @@ const MatchersInput = () => {
     const unfocus = () => {
         setFocusedInput(false);
     };
-    const profileSelected = draftParsedQuery?.profileName() === '';
+    const profileSelected = currentQuery.profileName() === '';
     return (_jsxs("div", { className: "w-full min-w-[300px] flex-1 font-mono relative", ...testId(TEST_IDS.MATCHERS_INPUT_CONTAINER), children: [_jsx(TextareaAutosize, { ref: inputRef, className: cx('block h-[38px] w-full flex-1 rounded-md border bg-white px-2 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900', profileSelected && 'cursor-not-allowed'), placeholder: profileSelected
                     ? 'Select a profile first to enter a filter...'
                     : 'filter profiles... eg. node="test"', onChange: onChange, value: value, onBlur: unfocus, ...testId(TEST_IDS.MATCHERS_TEXTAREA), onFocus: focus, disabled: profileSelected, title: profileSelected
                     ? 'Select a profile first to enter a filter...'
-                    : 'filter profiles... eg. node="test"', id: "matchers-input" }), _jsx(SuggestionsList, { isLabelNamesLoading: isLabelNamesLoading, suggestions: suggestionSections, applySuggestion: applySuggestion, inputRef: inputRef.current, runQuery: commitDraft, focusedInput: focusedInput, isLabelValuesLoading: isLabelValuesLoading && lastCompleted.type === 'literal' && lastCompleted.value !== ',', shouldTrimPrefix: shouldHandlePrefixes, refetchLabelValues: refetchLabelValues, refetchLabelNames: refetchLabelNames })] }));
+                    : 'filter profiles... eg. node="test"', id: "matchers-input" }), _jsx(SuggestionsList, { isLabelNamesLoading: isLabelNamesLoading, suggestions: suggestionSections, applySuggestion: applySuggestion, inputRef: inputRef.current, runQuery: runQuery, focusedInput: focusedInput, isLabelValuesLoading: isLabelValuesLoading && lastCompleted.type === 'literal' && lastCompleted.value !== ',', shouldTrimPrefix: shouldHandlePrefixes, refetchLabelValues: refetchLabelValues, refetchLabelNames: refetchLabelNames })] }));
 };
-export default MatchersInput;
+export default function MatchersInputWithProvider(props) {
+    return (_jsx(LabelsProvider, { queryClient: props.queryClient, profileType: props.profileType, start: props.start, end: props.end, children: _jsx(MatchersInput, { ...props }) }));
+}

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

@@ -0,0 +1,29 @@
+import { DateTimeRange } from '@parca/components';
+import { type UtilizationMetrics as MetricSeries } from '../../ProfileSelector';
+interface CommonProps {
+    transmitData: MetricSeries[];
+    receiveData: 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;
+    selectedSeries?: Array<{
+        key: string;
+        value: string;
+    }>;
+    onSeriesClick?: (name: string, seriesIndex: number) => void;
+}
+type Props = CommonProps & {
+    utilizationMetricsLoading?: boolean;
+};
+declare const AreaChart: ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, selectedSeries, onSeriesClick, }: Props) => JSX.Element;
+export default AreaChart;
+//# sourceMappingURL=Throughput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Throughput.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/Throughput.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACL,aAAa,EAId,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAiB9E,UAAU,WAAW;IACnB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,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,cAAc,CAAC,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IACrD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7D;AAUD,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAoRF,QAAA,MAAM,SAAS,GAAI,4JAYhB,KAAK,KAAG,GAAG,CAAC,OA8Cd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/MetricsGraph/UtilizationMetrics/Throughput.js

@@ -0,0 +1,175 @@
+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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useMemo } from 'react';
+import { Icon } from '@iconify/react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { MetricsGraphSkeleton, TextWithTooltip, useParcaContext, } from '@parca/components';
+import { formatDate, timePattern, valueFormatter } from '@parca/utilities';
+import MetricsGraph from '../index';
+import { useMetricsGraphDimensions } from '../useMetricsGraphDimensions';
+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) {
+            const metric = s.labelset.labels.sort((a, b) => a.name.localeCompare(b.name));
+            agg.push({
+                metric,
+                values: s.samples.reduce(function (agg, d) {
+                    if (d.timestamp !== undefined && d.value !== undefined) {
+                        // Multiply receive values by -1 to display below zero
+                        const value = isReceive ? -1 * d.value : d.value;
+                        agg.push([d.timestamp, value]);
+                    }
+                    return agg;
+                }, []),
+                labelset: metric.map(m => `${m.name}=${m.value}`).join(','),
+                isReceive,
+                isSelected: s.isSelected,
+            });
+        }
+        return agg;
+    }, []);
+    // Sort values by timestamp for each series
+    return series.map(series => ({
+        ...series,
+        values: series.values.sort((a, b) => a[0] - b[0]),
+    }));
+}
+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 {
+            id,
+            values: networkSeries.values.map(([timestamp, value]) => [
+                timestamp,
+                value,
+            ]),
+            highlighted: networkSeries.isSelected ?? false,
+        };
+    });
+}
+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(humanReadableName, 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, onSeriesClick, }) => {
+    const { isDarkMode } = useParcaContext();
+    const { width, height, margin, heightStyle } = useMetricsGraphDimensions(false, true);
+    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: false, 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

@@ -0,0 +1,28 @@
+import { DateTimeRange } from '@parca/components';
+import { type UtilizationMetrics as MetricSeries } from '../../ProfileSelector';
+interface CommonProps {
+    setTimeRange: (range: DateTimeRange) => void;
+    humanReadableName: string;
+    from: number;
+    to: number;
+    onSeriesClick?: (seriesIndex: number) => void;
+}
+type Props = CommonProps & {
+    data: MetricSeries[];
+    yAxisUnit: string;
+    utilizationMetricsLoading?: boolean;
+    addLabelMatcher?: (labels: {
+        key: string;
+        value: string;
+    } | Array<{
+        key: string;
+        value: string;
+    }>) => void;
+    onSelectedSeriesChange?: (series: Array<{
+        key: string;
+        value: string;
+    }>) => void;
+};
+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

@@ -0,0 +1 @@
+{"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;AA4TF,QAAA,MAAM,kBAAkB,GAAI,6KAWzB,KAAK,KAAG,GAAG,CAAC,OAwCd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/MetricsGraph/UtilizationMetrics/index.js

@@ -0,0 +1,186 @@
+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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useMemo } from 'react';
+import { Icon } from '@iconify/react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { MetricsGraphSkeleton, TextWithTooltip, useParcaContext, } from '@parca/components';
+import { formatDate, timePattern, valueFormatter } from '@parca/utilities';
+import MetricsGraph from '../index';
+import { useMetricsGraphDimensions } from '../useMetricsGraphDimensions';
+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);
+                    }
+                }
+            },
+        },
+        {
+            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 {
+            id: 'default',
+            values: [],
+        };
+    });
+};
+const _getYAxisUnit = (name) => {
+    switch (name) {
+        case 'gpu_power_watt':
+            return 'watts';
+        case 'gpu_temperature_celsius':
+            return 'celsius';
+        case 'gpu_clock_hertz':
+            return 'hertz';
+        default:
+            return 'percent';
+    }
+};
+const RawUtilizationMetrics = ({ data, originalData, setTimeRange, width, height, margin, humanReadableName, from, to, yAxisUnit, contextMenuItems, onSeriesClick, }) => {
+    const { timezone } = useParcaContext();
+    return (_jsx(MetricsGraph, { data: data.map((val, idx) => ({
+            ...val,
+            highlighted: originalData?.[idx]?.isSelected ?? false,
+        })), 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;
+        } }));
+};
+const UtilizationMetrics = ({ data, setTimeRange, utilizationMetricsLoading, humanReadableName, from, to, yAxisUnit, addLabelMatcher, onSeriesClick, onSelectedSeriesChange: _onSelectedSeriesChange, }) => {
+    const { isDarkMode } = useParcaContext();
+    const { width, height, margin, heightStyle } = useMetricsGraphDimensions(false, true);
+    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: false, 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;