@parca/profile 0.19.80 → 0.19.82

package/src/MatchersInput/index.tsx

@@ -11,157 +11,19 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, {useMemo, useRef, useState} from 'react';
 
-import {useQuery} from '@tanstack/react-query';
 import cx from 'classnames';
 import TextareaAutosize from 'react-textarea-autosize';
 
-import {LabelsRequest, LabelsResponse, QueryServiceClient, ValuesRequest} from '@parca/client';
-import {useGrpcMetadata} from '@parca/components';
 import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
-import {millisToProtoTimestamp, sanitizeLabelValue} from '@parca/utilities';
 
-import {UtilizationLabels} from '../ProfileSelector';
-import {LabelsProvider, useLabels} from '../contexts/MatchersInputLabelsContext';
-import useGrpcQuery from '../useGrpcQuery';
+import {useUnifiedLabels} from '../contexts/UnifiedLabelsContext';
+import {useQueryState} from '../hooks/useQueryState';
 import SuggestionsList, {Suggestion, Suggestions} from './SuggestionsList';
 
-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 const useLabelNames = (
-  client: QueryServiceClient,
-  profileType: string,
-  start?: number,
-  end?: number,
-  match?: string[]
-): UseLabelNames => {
-  const metadata = useGrpcMetadata();
-
-  const {data, isLoading, error, refetch} = useGrpcQuery<LabelsResponse>({
-    key: ['labelNames', profileType, match?.join(','), start, end],
-    queryFn: async signal => {
-      const request: LabelsRequest = {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 as Error},
-    loading: isLoading,
-    refetch: async () => {
-      await refetch();
-    },
-  };
-};
-
-interface UseLabelValues {
-  result: {
-    response: string[];
-    error?: Error;
-  };
-  loading: boolean;
-  refetch: () => Promise<void>;
-}
-
-export const useLabelValues = (
-  client: QueryServiceClient,
-  labelName: string,
-  profileType: string,
-  start?: number,
-  end?: number
-): UseLabelValues => {
-  const metadata = useGrpcMetadata();
-
-  const {data, isLoading, error, refetch} = useGrpcQuery<string[]>({
-    key: ['labelValues', labelName, profileType, start, end],
-    queryFn: async signal => {
-      const request: ValuesRequest = {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 as Error},
-    loading: isLoading,
-    refetch: async () => {
-      await refetch();
-    },
-  };
-};
-
-export const useFetchUtilizationLabelValues = (
-  labelName: string,
-  utilizationLabels?: UtilizationLabels
-): string[] => {
-  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,
-}: MatchersInputProps): JSX.Element => {
+const MatchersInput = (): JSX.Element => {
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const [focusedInput, setFocusedInput] = useState(false);
   const [lastCompleted, setLastCompleted] = useState<Suggestion>(new Suggestion('', '', ''));
@@ -169,7 +31,7 @@ const MatchersInput = ({
   const {
     labelNames,
     labelValues,
-    labelNameMappings,
+    labelNameMappingsForMatchersInput: labelNameMappings,
     isLabelNamesLoading,
     isLabelValuesLoading,
     currentLabelName,
@@ -177,13 +39,16 @@ const MatchersInput = ({
     shouldHandlePrefixes,
     refetchLabelValues,
     refetchLabelNames,
-  } = useLabels();
+    suffix,
+  } = useUnifiedLabels();
+
+  const {setDraftMatchers, commitDraft, draftParsedQuery} = useQueryState({suffix});
 
-  const value = currentQuery.matchersString();
+  const value = draftParsedQuery != null ? draftParsedQuery.matchersString() : '';
 
   const suggestionSections = useMemo(() => {
     const suggestionSections = new Suggestions();
-    Query.suggest(`${currentQuery.profileName()}{${value}`).forEach(function (s) {
+    Query.suggest(`${draftParsedQuery?.profileName() as string}{${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.
@@ -256,7 +121,7 @@ const MatchersInput = ({
     });
     return suggestionSections;
   }, [
-    currentQuery,
+    draftParsedQuery,
     lastCompleted,
     labelNames,
     labelValues,
@@ -271,7 +136,7 @@ const MatchersInput = ({
 
   const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
     const newValue = e.target.value;
-    setMatchersString(newValue);
+    setDraftMatchers(newValue);
     resetLastCompleted();
   };
 
@@ -294,7 +159,7 @@ const MatchersInput = ({
   const applySuggestion = (suggestion: Suggestion): void => {
     const newValue = complete(suggestion);
     setLastCompleted(suggestion);
-    setMatchersString(newValue);
+    setDraftMatchers(newValue);
     if (inputRef.current !== null) {
       inputRef.current.value = newValue;
       inputRef.current.focus();
@@ -309,7 +174,7 @@ const MatchersInput = ({
     setFocusedInput(false);
   };
 
-  const profileSelected = currentQuery.profileName() === '';
+  const profileSelected = draftParsedQuery?.profileName() === '';
 
   return (
     <div
@@ -345,7 +210,7 @@ const MatchersInput = ({
         suggestions={suggestionSections}
         applySuggestion={applySuggestion}
         inputRef={inputRef.current}
-        runQuery={runQuery}
+        runQuery={commitDraft}
         focusedInput={focusedInput}
         isLabelValuesLoading={
           isLabelValuesLoading && lastCompleted.type === 'literal' && lastCompleted.value !== ','
@@ -358,15 +223,4 @@ const MatchersInput = ({
   );
 };
 
-export default function MatchersInputWithProvider(props: MatchersInputProps): JSX.Element {
-  return (
-    <LabelsProvider
-      queryClient={props.queryClient}
-      profileType={props.profileType}
-      start={props.start}
-      end={props.end}
-    >
-      <MatchersInput {...props} />
-    </LabelsProvider>
-  );
-}
+export default MatchersInput;

package/src/MetricsGraph/index.tsx

@@ -114,6 +114,7 @@ const MetricsGraph = ({
 };
 
 export default MetricsGraph;
+
 export type {ContextMenuItemOrSubmenu, ContextMenuItem, ContextMenuSubmenu};
 
 export const parseValue = (value: string): number | null => {
@@ -207,6 +208,13 @@ export const RawMetricsGraph = ({
     }
 
     const closestPointPerSeries = series.map(function (s) {
+      if (s.values.length === 0) {
+        return {
+          pointIndex: undefined,
+          distance: Infinity,
+        };
+      }
+
       const distances = s.values.map(d => {
         const x = xScale(d[0]) + margin / 2; // d[0] is timestamp_ms
         const y = yScale(d[1]) - margin / 3; // d[1] is value
@@ -216,7 +224,7 @@ export const RawMetricsGraph = ({
       });
 
       const pointIndex = d3.minIndex(distances);
-      const minDistance = distances[pointIndex];
+      const minDistance = pointIndex != null ? distances[pointIndex] : Infinity;
 
       return {
         pointIndex,
@@ -225,7 +233,15 @@ export const RawMetricsGraph = ({
     });
 
     const closestSeriesIndex = d3.minIndex(closestPointPerSeries, s => s.distance);
+    if (closestSeriesIndex == null || closestPointPerSeries[closestSeriesIndex] == null) {
+      return null;
+    }
+
     const pointIndex = closestPointPerSeries[closestSeriesIndex].pointIndex;
+    if (pointIndex == null) {
+      return null;
+    }
+
     return {
       seriesIndex: closestSeriesIndex,
       pointIndex,

package/src/ProfileMetricsGraph/index.tsx

@@ -37,19 +37,11 @@ import MetricsGraph, {ContextMenuItemOrSubmenu, Series, SeriesPoint} from '../Me
 import {useMetricsGraphDimensions} from '../MetricsGraph/useMetricsGraphDimensions';
 import {useQueryRange} from './hooks/useQueryRange';
 
-const transformUtilizationLabels = (label: string, utilizationMetrics: boolean): string => {
-  if (utilizationMetrics) {
-    return label.replace('attributes.', '').replace('attributes_resource.', '');
-  }
-  return label;
-};
-
 const createProfileContextMenuItems = (
   addLabelMatcher: (
     labels: {key: string; value: string} | Array<{key: string; value: string}>
   ) => void,
-  data: MetricsSeriesPb[], // The original MetricsSeriesPb[] data
-  utilizationMetrics = false
+  data: MetricsSeriesPb[] // The original MetricsSeriesPb[] data
 ): ContextMenuItemOrSubmenu[] => {
   return [
     {
@@ -107,7 +99,7 @@ const createProfileContextMenuItems = (
           id: `add-label-${label.name}`,
           label: (
             <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">
-              {`${transformUtilizationLabels(label.name, utilizationMetrics)}="${label.value}"`}
+              {`${label.name}="${label.value}"`}
             </div>
           ),
           onClick: () => {
@@ -239,12 +231,28 @@ const ProfileMetricsGraph = ({
     if (response?.series != null) {
       // Check if user wants ALL series for THIS specific response
       const userWantsAllForThisResponse = showAllSeriesForResponse === response;
+      const maxSeriesLimit = 100;
+
+      // Limit the number of series to maxSeriesLimit to avoid performance issues (unless user opts to show all)
+      if (response.series.length > maxSeriesLimit && !userWantsAllForThisResponse) {
+        // Select top `maxSeriesLimit` series based on their max value (to catch series with large spikes)
+        const seriesWithMaxValue = response.series.map(series => {
+          const maxValue = series.samples.reduce((max, sample) => {
+            const value = sample.valuePerSecond ?? 0;
+            return value > max ? value : max;
+          }, 0);
+          return {series, maxValue};
+        });
+
+        // Sort by max value descending and take top `maxSeriesLimit` series
+        const topSeries = seriesWithMaxValue
+          .sort((a, b) => b.maxValue - a.maxValue)
+          .slice(0, maxSeriesLimit)
+          .map(item => item.series);
 
-      // Limit the number of series to 100 to avoid performance issues (unless user opts to show all)
-      if (response.series.length > 100 && !userWantsAllForThisResponse) {
         return [
-          response.series.slice(0, 100),
-          {isTrimmed: true, beforeTrim: response.series.length, afterTrim: 100},
+          topSeries,
+          {isTrimmed: true, beforeTrim: response.series.length, afterTrim: maxSeriesLimit},
         ];
       }
       return [response.series, {isTrimmed: false, beforeTrim: 0, afterTrim: 0}];
@@ -422,28 +430,6 @@ const ProfileMetricsGraph = ({
                   const nameLabel = labels.find(e => e.name === '__name__');
                   const highlightedNameLabel = nameLabel ?? {name: '', value: ''};
 
-                  // Calculate attributes maps for utilization metrics
-                  const utilizationMetrics = false; // This is for profile metrics, not utilization
-                  const attributesMap = labels
-                    .filter(
-                      label =>
-                        label.name.startsWith('attributes.') &&
-                        !label.name.startsWith('attributes_resource.')
-                    )
-                    .reduce<Record<string, string>>((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<Record<string, string>>((acc, label) => {
-                      const key = label.name.replace('attributes_resource.', '');
-                      acc[key] = label.value;
-                      return acc;
-                    }, {});
-
                   const isDeltaType =
                     profile !== null
                       ? (profile as MergedProfileSelection)?.query.profType.delta
@@ -512,72 +498,21 @@ const ProfileMetricsGraph = ({
                           </table>
                         </span>
                         <span className="my-2 block text-gray-500">
-                          {utilizationMetrics ? (
-                            <>
-                              {Object.keys(attributesResourceMap).length > 0 && (
-                                <span className="text-sm font-bold text-gray-700 dark:text-white">
-                                  Resource Attributes
-                                </span>
-                              )}
-                              <span className="my-2 block text-gray-500">
-                                {Object.keys(attributesResourceMap).map(name => (
-                                  <div
-                                    key={name}
-                                    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"
-                                    {...testId(TEST_IDS.TOOLTIP_LABEL)}
-                                  >
-                                    <TextWithTooltip
-                                      text={`${name.replace('attributes.', '')}="${
-                                        attributesResourceMap[name]
-                                      }"`}
-                                      maxTextLength={48}
-                                      id={`tooltip-${name}-${attributesResourceMap[name]}`}
-                                    />
-                                  </div>
-                                ))}
-                              </span>
-                              {Object.keys(attributesMap).length > 0 && (
-                                <span className="text-sm font-bold text-gray-700 dark:text-white">
-                                  Attributes
-                                </span>
-                              )}
-                              <span className="my-2 block text-gray-500">
-                                {Object.keys(attributesMap).map(name => (
-                                  <div
-                                    key={name}
-                                    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"
-                                    {...testId(TEST_IDS.TOOLTIP_LABEL)}
-                                  >
-                                    <TextWithTooltip
-                                      text={`${name.replace('attributes.', '')}="${
-                                        attributesMap[name]
-                                      }"`}
-                                      maxTextLength={48}
-                                      id={`tooltip-${name}-${attributesMap[name]}`}
-                                    />
-                                  </div>
-                                ))}
-                              </span>
-                            </>
-                          ) : (
-                            <>
-                              {labels
-                                .filter((label: Label) => label.name !== '__name__')
-                                .map((label: Label) => (
-                                  <div
-                                    key={label.name}
-                                    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"
-                                    {...testId(TEST_IDS.TOOLTIP_LABEL)}
-                                  >
-                                    <TextWithTooltip
-                                      text={`${label.name}="${label.value}"`}
-                                      maxTextLength={37}
-                                      id={`tooltip-${label.name}`}
-                                    />
-                                  </div>
-                                ))}
-                            </>
-                          )}
+                          {labels
+                            .filter((label: Label) => label.name !== '__name__')
+                            .map((label: Label) => (
+                              <div
+                                key={label.name}
+                                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"
+                                {...testId(TEST_IDS.TOOLTIP_LABEL)}
+                              >
+                                <TextWithTooltip
+                                  text={`${label.name}="${label.value}"`}
+                                  maxTextLength={37}
+                                  id={`tooltip-${label.name}`}
+                                />
+                              </div>
+                            ))}
                         </span>
                         <div className="flex w-full items-center gap-1 text-xs text-gray-500">
                           <Icon icon="iconoir:mouse-button-right" />

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -18,11 +18,9 @@ import {DateTimeRange, useURLStateBatch} from '@parca/components';
 import {Query} from '@parca/parser';
 
 import {ProfileSelection} from '..';
-import UtilizationMetricsGraph from '../MetricsGraph/UtilizationMetrics';
-import AreaChart from '../MetricsGraph/UtilizationMetrics/Throughput';
 import ProfileMetricsGraph, {ProfileMetricsEmptyState} from '../ProfileMetricsGraph';
 import {useResetStateOnSeriesChange} from '../ProfileView/hooks/useResetStateOnSeriesChange';
-import {QuerySelection, type UtilizationMetrics as UtilizationMetricsType} from './index';
+import {QuerySelection} from './index';
 
 interface MetricsGraphSectionProps {
   showMetricsGraph: boolean;
@@ -41,13 +39,6 @@ interface MetricsGraphSectionProps {
   query: Query;
   setNewQueryExpression: (queryExpression: string, commit?: boolean) => void;
   setQueryExpression: (updateTs?: boolean) => void;
-  utilizationMetrics?: Array<{
-    name: string;
-    humanReadableName: string;
-    data: UtilizationMetricsType[];
-  }>;
-  utilizationMetricsLoading?: boolean;
-  onUtilizationSeriesSelect?: (name: string, seriesIndex: number) => void;
 }
 
 export function MetricsGraphSection({
@@ -66,9 +57,6 @@ export function MetricsGraphSection({
   setProfileSelection,
   query,
   setNewQueryExpression,
-  utilizationMetrics,
-  utilizationMetricsLoading,
-  onUtilizationSeriesSelect,
 }: MetricsGraphSectionProps): JSX.Element {
   const resetStateOnSeriesChange = useResetStateOnSeriesChange();
   const batchUpdates = useURLStateBatch();
@@ -147,89 +135,6 @@ export function MetricsGraphSection({
     });
   };
 
-  const UtilizationGraphToShow = ({
-    utilizationMetrics,
-  }: {
-    utilizationMetrics: Array<{
-      name: string;
-      humanReadableName: string;
-      data: UtilizationMetricsType[];
-    }>;
-  }): JSX.Element => {
-    const throughputMetrics = utilizationMetrics.filter(
-      metric =>
-        metric.name === 'gpu_pcie_throughput_transmit_bytes' ||
-        metric.name === 'gpu_pcie_throughput_receive_bytes'
-    );
-    const transmitData =
-      throughputMetrics.find(metric => metric.name === 'gpu_pcie_throughput_transmit_bytes')
-        ?.data ?? [];
-    const receiveData =
-      throughputMetrics.find(metric => metric.name === 'gpu_pcie_throughput_receive_bytes')?.data ??
-      [];
-
-    if (utilizationMetrics.length === 0) {
-      return <></>;
-    }
-
-    return (
-      <div>
-        {utilizationMetrics.map(({name, humanReadableName, data}) => {
-          if (
-            name !== 'gpu_pcie_throughput_transmit_bytes' &&
-            name !== 'gpu_pcie_throughput_receive_bytes'
-          ) {
-            return (
-              <UtilizationMetricsGraph
-                key={name}
-                data={data}
-                setTimeRange={handleTimeRangeChange}
-                utilizationMetricsLoading={utilizationMetricsLoading}
-                humanReadableName={humanReadableName}
-                from={querySelection.from}
-                to={querySelection.to}
-                yAxisUnit="percentage"
-                addLabelMatcher={addLabelMatcher}
-                onSeriesClick={seriesIndex => {
-                  // For generic UtilizationMetrics, just pass the series index
-                  if (onUtilizationSeriesSelect != null) {
-                    onUtilizationSeriesSelect(name, seriesIndex);
-                  }
-                }}
-              />
-            );
-          }
-          return null;
-        })}
-        {throughputMetrics.length > 0 && (
-          <AreaChart
-            transmitData={transmitData}
-            receiveData={receiveData}
-            addLabelMatcher={addLabelMatcher}
-            setTimeRange={handleTimeRangeChange}
-            name={throughputMetrics[0].name}
-            humanReadableName={throughputMetrics[0].humanReadableName}
-            from={querySelection.from}
-            to={querySelection.to}
-            utilizationMetricsLoading={utilizationMetricsLoading}
-            selectedSeries={undefined}
-            onSeriesClick={(_, seriesIndex) => {
-              // For throughput metrics, just pass the series index
-              if (onUtilizationSeriesSelect != null) {
-                let name = 'gpu_pcie_throughput_transmit_bytes';
-                if (seriesIndex > transmitData.length - 1) {
-                  name = 'gpu_pcie_throughput_receive_bytes';
-                  seriesIndex -= transmitData.length;
-                }
-                onUtilizationSeriesSelect(name, seriesIndex);
-              }
-            }}
-          />
-        )}
-      </div>
-    );
-  };
-
   return (
     <div className={cx('relative', {'py-4': !showMetricsGraph})}>
       {setDisplayHideMetricsGraphButton != null ? (
@@ -251,25 +156,19 @@ export function MetricsGraphSection({
             querySelection.from !== undefined &&
             querySelection.to !== undefined ? (
               <>
-                {utilizationMetrics !== undefined ? (
-                  <UtilizationGraphToShow utilizationMetrics={utilizationMetrics} />
-                ) : (
-                  <>
-                    <ProfileMetricsGraph
-                      queryClient={queryClient}
-                      queryExpression={querySelection.expression}
-                      from={querySelection.from}
-                      to={querySelection.to}
-                      profile={profileSelection}
-                      comparing={comparing}
-                      sumBy={querySelection.sumBy ?? sumBy ?? []}
-                      sumByLoading={defaultSumByLoading}
-                      setTimeRange={handleTimeRangeChange}
-                      addLabelMatcher={addLabelMatcher}
-                      onPointClick={handlePointClick}
-                    />
-                  </>
-                )}
+                <ProfileMetricsGraph
+                  queryClient={queryClient}
+                  queryExpression={querySelection.expression}
+                  from={querySelection.from}
+                  to={querySelection.to}
+                  profile={profileSelection}
+                  comparing={comparing}
+                  sumBy={querySelection.sumBy ?? sumBy ?? []}
+                  sumByLoading={defaultSumByLoading}
+                  setTimeRange={handleTimeRangeChange}
+                  addLabelMatcher={addLabelMatcher}
+                  onPointClick={handlePointClick}
+                />
               </>
             ) : (
               profileSelection === null && (