@parca/profile 0.19.113 → 0.19.114

package/src/ProfileMetricsGraph/hooks/useQueryRange.ts

@@ -11,20 +11,24 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect, useMemo} from 'react';
-
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 
 import {Duration, QueryRangeResponse, QueryServiceClient, Timestamp} from '@parca/client';
-import {useGrpcMetadata, useURLState} from '@parca/components';
-import {getStepDuration} from '@parca/utilities';
+import {useGrpcMetadata} from '@parca/components';
+import {getStepDuration, getStepDurationInMilliseconds} from '@parca/utilities';
 
 import useGrpcQuery from '../../useGrpcQuery';
 
+interface QueryRangeResult {
+  response: QueryRangeResponse;
+  stepDurationMs: number;
+}
+
 interface IQueryRangeState {
   response: QueryRangeResponse | null;
   isLoading: boolean;
   error: RpcError | null;
+  stepDurationMs: number;
 }
 
 export const getStepCountFromScreenWidth = (pixelsPerPoint: number): number => {
@@ -43,33 +47,16 @@ export const useQueryRange = (
   start: number,
   end: number,
   sumBy: string[],
+  stepCount: number,
   skip = false
 ): IQueryRangeState => {
   const metadata = useGrpcMetadata();
-  const [stepCountStr, setStepCount] = useURLState('step_count');
-
-  const defaultStepCount = useMemo(() => {
-    return getStepCountFromScreenWidth(10);
-  }, []);
-
-  const stepCount = useMemo(() => {
-    if (stepCountStr != null) {
-      return parseInt(stepCountStr as string, 10);
-    }
-
-    return defaultStepCount;
-  }, [stepCountStr, defaultStepCount]);
-
-  useEffect(() => {
-    if (stepCountStr == null) {
-      setStepCount(defaultStepCount.toString());
-    }
-  }, [stepCountStr, defaultStepCount, setStepCount]);
 
-  const {data, isLoading, error} = useGrpcQuery<QueryRangeResponse | undefined>({
+  const {data, isLoading, error} = useGrpcQuery<QueryRangeResult | undefined>({
     key: ['query-range', queryExpression, start, end, (sumBy ?? []).join(','), stepCount, metadata],
     queryFn: async signal => {
       const stepDuration = getStepDuration(start, end, stepCount);
+      const stepDurationMs = getStepDurationInMilliseconds(stepDuration);
       const {response} = await client.queryRange(
         {
           query: queryExpression,
@@ -81,7 +68,7 @@ export const useQueryRange = (
         },
         {meta: metadata, abort: signal}
       );
-      return response;
+      return {response, stepDurationMs};
     },
     options: {
       retry: false,
@@ -90,5 +77,10 @@ export const useQueryRange = (
     },
   });
 
-  return {isLoading, error: error as RpcError | null, response: data ?? null};
+  return {
+    isLoading,
+    error: error as RpcError | null,
+    response: data?.response ?? null,
+    stepDurationMs: data?.stepDurationMs ?? 0,
+  };
 };

package/src/ProfileMetricsGraph/index.tsx

@@ -25,8 +25,11 @@ import {
 import {
   DateTimeRange,
   MetricsGraphSkeleton,
+  NumberParser,
+  NumberSerializer,
   TextWithTooltip,
   useParcaContext,
+  useURLStateCustom,
 } from '@parca/components';
 import {Query} from '@parca/parser';
 import {TEST_IDS, testId} from '@parca/test-utils';
@@ -35,7 +38,7 @@ import {capitalizeOnlyFirstLetter, formatDate, timePattern, valueFormatter} from
 import {MergedProfileSelection, ProfileSelection} from '..';
 import MetricsGraph, {ContextMenuItemOrSubmenu, Series, SeriesPoint} from '../MetricsGraph';
 import {useMetricsGraphDimensions} from '../MetricsGraph/useMetricsGraphDimensions';
-import {useQueryRange} from './hooks/useQueryRange';
+import {getStepCountFromScreenWidth, useQueryRange} from './hooks/useQueryRange';
 
 const createProfileContextMenuItems = (
   addLabelMatcher: (
@@ -197,11 +200,30 @@ const ProfileMetricsGraph = ({
   comparing = false,
   sumBy,
 }: ProfileMetricsGraphProps): JSX.Element => {
+  const [rawStepCount] = useURLStateCustom<number>('step_count', {
+    defaultValue: String(getStepCountFromScreenWidth(10)),
+    parse: NumberParser,
+    stringify: NumberSerializer,
+  });
+  // Clamp step count so the step duration is at least 1 second as we don't have this enforced server-side anymore.
+  const stepCount = useMemo(() => {
+    const maxForOneSecond = Math.floor((to - from) / 1000);
+    return Math.min(rawStepCount, maxForOneSecond);
+  }, [rawStepCount, from, to]);
+
   const {
     isLoading: metricsGraphLoading,
     response,
     error,
-  } = useQueryRange(queryClient, queryExpression, from, to, sumBy, queryExpression === '');
+  } = useQueryRange(
+    queryClient,
+    queryExpression,
+    from,
+    to,
+    sumBy,
+    stepCount,
+    queryExpression === ''
+  );
   const {onError, perf, authenticationErrorMessage, isDarkMode, timezone} = useParcaContext();
   const {width, height, margin, heightStyle} = useMetricsGraphDimensions(comparing);
   const [showAllSeriesForResponse, setShowAllSeriesForResponse] = useState<typeof response | null>(

package/src/ProfileSelector/index.tsx

@@ -153,6 +153,17 @@ const ProfileSelector = ({
     DateTimeRange.fromRangeKey(draftSelection.timeSelection, draftSelection.from, draftSelection.to)
   );
 
+  // Sync local timeRangeSelection when URL state changes externally (e.g., "Switch to 1 minute" button)
+  useEffect(() => {
+    setTimeRangeSelection(
+      DateTimeRange.fromRangeKey(
+        querySelection.timeSelection,
+        querySelection.from,
+        querySelection.to
+      )
+    );
+  }, [querySelection.timeSelection, querySelection.from, querySelection.to]);
+
   const [queryExpressionString, setQueryExpressionString] = useState(draftSelection.expression);
 
   const [advancedModeForQueryBrowser, setAdvancedModeForQueryBrowser] = useState(

package/src/ProfileView/components/ActionButtons/GroupByDropdown.tsx

@@ -21,6 +21,7 @@ interface GroupByControlsProps {
   setGroupByLabels: (labels: string[]) => void;
   metadataRefetch?: () => Promise<void>;
   metadataLoading: boolean;
+  label?: string;
 }
 
 const GroupByControls: React.FC<GroupByControlsProps> = ({
@@ -29,6 +30,7 @@ const GroupByControls: React.FC<GroupByControlsProps> = ({
   setGroupByLabels,
   metadataRefetch,
   metadataLoading,
+  label,
 }) => {
   return (
     <div className="relative flex" id="h-group-by-controls">
@@ -38,6 +40,7 @@ const GroupByControls: React.FC<GroupByControlsProps> = ({
         setGroupByLabels={setGroupByLabels}
         metadataRefetch={metadataRefetch}
         metadataLoading={metadataLoading}
+        label={label}
       />
     </div>
   );

package/src/ProfileView/components/DashboardItems/index.tsx

@@ -16,6 +16,7 @@ import {Profiler, ProfilerOnRenderCallback} from 'react';
 import {QueryServiceClient} from '@parca/client';
 import {ConditionalWrapper} from '@parca/components';
 
+import ProfileFlameChart from '../../../ProfileFlameChart';
 import ProfileFlameGraph from '../../../ProfileFlameGraph';
 import {CurrentPathFrame} from '../../../ProfileFlameGraph/FlameGraphArrow/utils';
 import {ProfileSource} from '../../../ProfileSource';
@@ -24,6 +25,7 @@ import {SourceView} from '../../../SourceView';
 import {Table} from '../../../Table';
 import type {
   FlamegraphData,
+  SamplesData,
   SandwichData,
   SourceData,
   TopTableData,
@@ -35,7 +37,7 @@ interface GetDashboardItemProps {
   isHalfScreen: boolean;
   dimensions: DOMRect | undefined;
   flamegraphData: FlamegraphData;
-  flamechartData: FlamegraphData;
+  samplesData?: SamplesData;
   topTableData?: TopTableData;
   sandwichData: SandwichData;
   sourceData?: SourceData;
@@ -47,7 +49,8 @@ interface GetDashboardItemProps {
   perf?: {
     onRender?: ProfilerOnRenderCallback;
   };
-  queryClient?: QueryServiceClient;
+  queryClient: QueryServiceClient;
+  onSwitchToOneMinute?: () => void;
 }
 
 export const getDashboardItem = ({
@@ -55,7 +58,7 @@ export const getDashboardItem = ({
   isHalfScreen,
   dimensions,
   flamegraphData,
-  flamechartData,
+  samplesData,
   topTableData,
   sourceData,
   sandwichData,
@@ -65,6 +68,8 @@ export const getDashboardItem = ({
   curPathArrow,
   setNewCurPathArrow,
   perf,
+  queryClient,
+  onSwitchToOneMinute,
 }: GetDashboardItemProps): JSX.Element => {
   switch (type) {
     case 'flamegraph':
@@ -102,16 +107,10 @@ export const getDashboardItem = ({
       );
     case 'flamechart':
       return (
-        <ProfileFlameGraph
-          curPathArrow={[]}
-          setNewCurPathArrow={() => {}}
-          arrow={flamechartData?.arrow}
-          total={total}
-          filtered={filtered}
-          profileType={profileSource?.ProfileType()}
-          loading={flamechartData.loading}
-          error={flamechartData.error}
-          isHalfScreen={isHalfScreen}
+        <ProfileFlameChart
+          samplesData={samplesData}
+          queryClient={queryClient}
+          profileSource={profileSource}
           width={
             dimensions?.width !== undefined
               ? isHalfScreen
@@ -119,10 +118,13 @@ export const getDashboardItem = ({
                 : dimensions.width - 16
               : 0
           }
-          metadataMappingFiles={flamechartData.metadataMappingFiles}
-          metadataLoading={flamechartData.metadataLoading}
-          profileSource={profileSource}
-          isFlameChart={true}
+          total={total}
+          filtered={filtered}
+          profileType={profileSource?.ProfileType()}
+          isHalfScreen={isHalfScreen}
+          metadataMappingFiles={flamegraphData.metadataMappingFiles}
+          metadataLoading={flamegraphData.metadataLoading}
+          onSwitchToOneMinute={onSwitchToOneMinute}
         />
       );
     case 'table':

package/src/ProfileView/components/GroupByLabelsDropdown/index.tsx

@@ -27,6 +27,7 @@ interface Props {
   setGroupByLabels: (labels: string[]) => void;
   metadataRefetch?: () => Promise<void>;
   metadataLoading: boolean;
+  label?: string;
 }
 
 const GroupByLabelsDropdown = ({
@@ -35,12 +36,13 @@ const GroupByLabelsDropdown = ({
   setGroupByLabels,
   metadataRefetch,
   metadataLoading,
+  label = 'Group by',
 }: Props): JSX.Element => {
   return (
     <div className="flex flex-col relative" {...testId(TEST_IDS.GROUP_BY_CONTAINER)}>
       <div className="flex items-center justify-between">
         <label className="text-sm" {...testId(TEST_IDS.GROUP_BY_LABEL)}>
-          Group by
+          {label}
         </label>
       </div>
 
@@ -56,7 +58,7 @@ const GroupByLabelsDropdown = ({
         refreshTitle="Refresh label names"
         refreshTestId="group-by-refresh-button"
         menuTestId={TEST_IDS.GROUP_BY_SELECT_FLYOUT}
-        value={groupBy
+        value={(groupBy ?? [])
           .filter(l => l.startsWith(FIELD_LABELS))
           .map(l => ({value: l, label: l.slice(FIELD_LABELS.length + 1)}))}
         onChange={newValue => {

package/src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx

@@ -412,7 +412,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
               <Menu.Items
                 className={cx(
                   isTableVizOnly ? 'w-64' : 'w-80',
-                  'absolute z-30 mt-2 py-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600',
+                  'absolute z-50 mt-2 py-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600',
                   shouldOpenLeft ? 'right-0 origin-top-right' : 'left-0 origin-top-left'
                 )}
               >

package/src/ProfileView/components/Toolbars/index.tsx

@@ -47,6 +47,8 @@ export interface VisualisationToolbarProps {
   preferencesModal?: boolean;
   profileViewExternalSubActions?: React.ReactNode;
   setGroupByLabels: (labels: string[]) => void;
+  flamechartDimension: string[];
+  setFlamechartDimension: (labels: string[]) => void;
   showVisualizationSelector?: boolean;
   sandwichFunctionName?: string;
   alignFunctionName: string;
@@ -135,6 +137,8 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
   groupBy,
   toggleGroupBy,
   setGroupByLabels,
+  flamechartDimension,
+  setFlamechartDimension,
   profileType,
   profileSource,
   queryClient,
@@ -158,6 +162,8 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
   const isTableVizOnly = dashboardItems?.length === 1 && isTableViz;
   const isGraphViz = dashboardItems?.includes('flamegraph');
   const isGraphVizOnly = dashboardItems?.length === 1 && isGraphViz;
+  const isFlamechartViz = dashboardItems?.includes('flamechart');
+  const isFlamechartVizOnly = dashboardItems?.length === 1 && isFlamechartViz;
 
   const req = profileSource?.QueryRequest();
   if (req !== null && req !== undefined) {
@@ -184,8 +190,19 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
             </>
           )}
 
+          {isFlamechartViz && (
+            <GroupByDropdown
+              groupBy={flamechartDimension}
+              labels={groupByLabels}
+              setGroupByLabels={setFlamechartDimension}
+              metadataRefetch={metadataRefetch}
+              metadataLoading={metadataLoading}
+              label="Samples group by"
+            />
+          )}
+
           <div className="flex mt-5">
-            <ProfileFilters />
+            {!isFlamechartVizOnly && <ProfileFilters />}
 
             {profileViewExternalSubActions != null ? profileViewExternalSubActions : null}
           </div>

package/src/ProfileView/hooks/useAutoSelectDimension.ts

@@ -0,0 +1,90 @@
+// 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 {useEffect, useRef} from 'react';
+
+import {ProfileType} from '@parca/parser';
+
+import {wellKnownProfiles} from '../../ProfileTypeSelector';
+
+const CPU_PREFERRED_DIMENSIONS = ['cpu', 'cpuid', 'thread', 'thread_id'];
+
+const GPU_DIMENSIONS = ['node', 'gpu', 'stream'];
+
+const getWellKnownProfileName = (profileType?: ProfileType): string | undefined => {
+  if (profileType == null) return undefined;
+  const key = profileType.toString();
+  return wellKnownProfiles[key]?.name;
+};
+
+const isOnGpuProfile = (profileType?: ProfileType): boolean => {
+  const wellKnownName = getWellKnownProfileName(profileType);
+  return wellKnownName === 'On-GPU';
+};
+
+const isOnCpuProfile = (profileType?: ProfileType): boolean => {
+  const wellKnownName = getWellKnownProfileName(profileType);
+  return wellKnownName === 'On-CPU';
+};
+
+/**
+ * Auto-selects the best flamechart "group by" dimension on first load.
+ *
+ * For On-GPU profiles:
+ *   - Selects all available from: ['node', 'gpu', 'stream']
+ *
+ * For On-CPU profiles:
+ *   - Priority: cpu > cpuid > thread > thread_id
+ *   - Adds 'node' alongside the primary dimension if available
+ *
+ * For all other profile types:
+ *   - No auto-selection
+ */
+export const useAutoSelectDimension = (
+  metadataLabels: string[] | undefined,
+  flamechartDimension: string[] | undefined,
+  setFlamechartDimension: (v: string[]) => void,
+  profileType?: ProfileType
+): void => {
+  const hasAutoSelected = useRef(false);
+
+  useEffect(() => {
+    if (hasAutoSelected.current) return;
+    if (metadataLabels == null || metadataLabels.length === 0) return;
+    if ((flamechartDimension ?? []).length > 0) {
+      hasAutoSelected.current = true;
+      return;
+    }
+
+    if (isOnGpuProfile(profileType)) {
+      const availableGpuDims = GPU_DIMENSIONS.filter(d => metadataLabels.includes(d));
+      if (availableGpuDims.length > 0) {
+        setFlamechartDimension(availableGpuDims.map(d => `labels.${d}`));
+        hasAutoSelected.current = true;
+        return;
+      }
+    }
+
+    if (isOnCpuProfile(profileType)) {
+      const hasNode = metadataLabels.includes('node');
+      for (const name of CPU_PREFERRED_DIMENSIONS) {
+        if (metadataLabels.includes(name)) {
+          const dims = hasNode ? ['node', name] : [name];
+          setFlamechartDimension(dims.map(d => `labels.${d}`));
+          hasAutoSelected.current = true;
+          return;
+        }
+      }
+    }
+  }, [metadataLabels, flamechartDimension, setFlamechartDimension, profileType]);
+};

package/src/ProfileView/hooks/useVisualizationState.ts

@@ -42,6 +42,8 @@ export const useVisualizationState = (): {
   setGroupBy: (keys: string[]) => void;
   toggleGroupBy: (key: string) => void;
   setGroupByLabels: (labels: string[]) => void;
+  flamechartDimension: string[];
+  setFlamechartDimension: (labels: string[]) => void;
   sandwichFunctionName: string | undefined;
   setSandwichFunctionName: (sandwichFunctionName: string | undefined) => void;
   resetSandwichFunctionName: () => void;
@@ -74,6 +76,12 @@ export const useVisualizationState = (): {
   const [sandwichFunctionName, setSandwichFunctionName] = useURLState<string | undefined>(
     'sandwich_function_name'
   );
+  const [flamechartDimension, setStoreFlamechartDimension] = useURLState<string[]>(
+    'flamechart_dimension',
+    {
+      alwaysReturnArray: true,
+    }
+  );
   const resetFlameGraphState = useResetFlameGraphState();
   const batchUpdates = useURLStateBatch();
 
@@ -123,6 +131,13 @@ export const useVisualizationState = (): {
     [groupBy, setGroupBy, resetFlameGraphState, batchUpdates]
   );
 
+  const setFlamechartDimension = useCallback(
+    (labels: string[]): void => {
+      setStoreFlamechartDimension(labels.filter(l => l.startsWith(`${FIELD_LABELS}.`)));
+    },
+    [setStoreFlamechartDimension]
+  );
+
   const resetSandwichFunctionName = useCallback((): void => {
     setSandwichFunctionName(undefined);
   }, [setSandwichFunctionName]);
@@ -153,6 +168,8 @@ export const useVisualizationState = (): {
     setGroupBy,
     toggleGroupBy,
     setGroupByLabels,
+    flamechartDimension,
+    setFlamechartDimension,
     sandwichFunctionName,
     setSandwichFunctionName,
     resetSandwichFunctionName,

package/src/ProfileView/index.tsx

@@ -27,6 +27,7 @@ import {
 } from './components/Toolbars';
 import {DashboardProvider} from './context/DashboardContext';
 import {ProfileViewContextProvider} from './context/ProfileViewContext';
+import {useAutoSelectDimension} from './hooks/useAutoSelectDimension';
 import {useProfileMetadata} from './hooks/useProfileMetadata';
 import {useVisualizationState} from './hooks/useVisualizationState';
 import type {ProfileViewProps, VisualizationType} from './types/visualization';
@@ -35,7 +36,7 @@ export const ProfileView = ({
   total,
   filtered,
   flamegraphData,
-  flamechartData,
+  samplesData,
   topTableData,
   sourceData,
   profileSource,
@@ -45,6 +46,7 @@ export const ProfileView = ({
   compare,
   showVisualizationSelector,
   sandwichData,
+  onSwitchToOneMinute,
 }: ProfileViewProps): JSX.Element => {
   const {
     timezone,
@@ -64,12 +66,21 @@ export const ProfileView = ({
     groupBy,
     toggleGroupBy,
     setGroupByLabels,
+    flamechartDimension,
+    setFlamechartDimension,
     sandwichFunctionName,
     resetSandwichFunctionName,
     alignFunctionName,
     setAlignFunctionName,
   } = useVisualizationState();
 
+  useAutoSelectDimension(
+    flamegraphData.metadataLabels,
+    flamechartDimension,
+    setFlamechartDimension,
+    profileSource?.ProfileType()
+  );
+
   const {colorMappings} = useProfileMetadata({
     flamegraphArrow: flamegraphData.arrow,
     metadataMappingFiles: flamegraphData.metadataMappingFiles,
@@ -95,7 +106,7 @@ export const ProfileView = ({
       isHalfScreen,
       dimensions,
       flamegraphData,
-      flamechartData,
+      samplesData,
       topTableData,
       sourceData,
       profileSource,
@@ -105,6 +116,7 @@ export const ProfileView = ({
       setNewCurPathArrow: setCurPathArrow,
       perf,
       queryClient,
+      onSwitchToOneMinute,
     });
   };
 
@@ -153,6 +165,8 @@ export const ProfileView = ({
             preferencesModal={preferencesModal}
             profileViewExternalSubActions={profileViewExternalSubActions}
             setGroupByLabels={setGroupByLabels}
+            flamechartDimension={flamechartDimension}
+            setFlamechartDimension={setFlamechartDimension}
             showVisualizationSelector={showVisualizationSelector}
             sandwichFunctionName={sandwichFunctionName}
             alignFunctionName={alignFunctionName}

package/src/ProfileView/types/visualization.ts

@@ -13,8 +13,9 @@
 
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 
-import {FlamegraphArrow, QueryServiceClient, Source, TableArrow} from '@parca/client';
+import {FlamegraphArrow, LabelSet, QueryServiceClient, Source, TableArrow} from '@parca/client';
 
+import {DataPoint} from '../../ProfileFlameChart/SamplesStrips/SamplesGraph';
 import {ProfileSource} from '../../ProfileSource';
 
 export interface FlamegraphData {
@@ -49,6 +50,18 @@ export interface SandwichData {
   callers: FlamegraphData;
 }
 
+export interface SamplesSeries {
+  labelset: LabelSet;
+  data: DataPoint[];
+}
+
+export interface SamplesData {
+  loading: boolean;
+  series?: SamplesSeries[];
+  error: RpcError | null;
+  stepMs?: number;
+}
+
 export type VisualizationType =
   | 'flamegraph'
   | 'callgraph'
@@ -61,14 +74,15 @@ export interface ProfileViewProps {
   total: bigint;
   filtered: bigint;
   flamegraphData: FlamegraphData;
-  flamechartData: FlamegraphData;
+  samplesData?: SamplesData;
   sandwichData: SandwichData;
   topTableData?: TopTableData;
   sourceData?: SourceData;
   profileSource: ProfileSource;
-  queryClient?: QueryServiceClient;
+  queryClient: QueryServiceClient;
   compare?: boolean;
   onDownloadPProf: () => void;
   pprofDownloading?: boolean;
   showVisualizationSelector?: boolean;
+  onSwitchToOneMinute?: () => void;
 }