@parca/profile 0.16.456 → 0.16.458

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -32,8 +32,10 @@ import {getLastItem, scaleLinear, type ColorConfig} from '@parca/utilities';
 import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import {DockedGraphTooltip} from '../../GraphTooltipArrow/DockedGraphTooltip';
+import {ProfileSource} from '../../ProfileSource';
 import {useProfileViewContext} from '../../ProfileView/context/ProfileViewContext';
 import ContextMenu from './ContextMenu';
+import {IcicleChartRootNode} from './IcicleChartRootNode';
 import {IcicleNode, RowHeight, colorByColors} from './IcicleGraphNodes';
 import {useFilenamesList} from './useMappingList';
 import {arrowToString, extractFeature, extractFilenameFeature} from './utils';
@@ -45,6 +47,8 @@ export const FIELD_LOCATION_ADDRESS = 'location_address';
 export const FIELD_LOCATION_LINE = 'location_line';
 export const FIELD_INLINED = 'inlined';
 export const FIELD_TIMESTAMP = 'timestamp';
+export const FIELD_DURATION = 'duration';
+export const FIELD_GROUPBY_METADATA = 'groupby_metadata';
 export const FIELD_FUNCTION_NAME = 'function_name';
 export const FIELD_FUNCTION_SYSTEM_NAME = 'function_system_name';
 export const FIELD_FUNCTION_FILE_NAME = 'function_file_name';
@@ -60,6 +64,7 @@ interface IcicleGraphArrowProps {
   total: bigint;
   filtered: bigint;
   profileType?: ProfileType;
+  profileSource?: ProfileSource;
   width?: number;
   curPath: string[];
   setCurPath: (path: string[]) => void;
@@ -68,6 +73,7 @@ interface IcicleGraphArrowProps {
   isHalfScreen: boolean;
   mappingsListFromMetadata: string[];
   compareAbsolute: boolean;
+  isIcicleChart?: boolean;
 }
 
 export const getMappingColors = (
@@ -108,10 +114,12 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   setCurPath,
   curPath,
   profileType,
+  profileSource,
   sortBy,
   flamegraphLoading,
   mappingsListFromMetadata,
   compareAbsolute,
+  isIcicleChart = false,
 }: IcicleGraphArrowProps): React.JSX.Element {
   const [isContextMenuOpen, setIsContextMenuOpen] = useState<boolean>(false);
   const dispatch = useAppDispatch();
@@ -252,6 +260,54 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
 
   // useMemo for the root graph as it otherwise renders the whole graph if the hoveringRow changes.
   const root = useMemo(() => {
+    if (isIcicleChart) {
+      return (
+        <svg
+          className="font-robotoMono"
+          width={width}
+          height={height}
+          preserveAspectRatio="xMinYMid"
+          ref={svg}
+          onContextMenu={displayMenu}
+        >
+          <g ref={ref}>
+            <g transform={'translate(0, 0)'}>
+              <IcicleChartRootNode
+                table={table}
+                row={0}
+                colors={colorByColors}
+                colorBy={colorByValue}
+                x={0}
+                y={0}
+                totalWidth={width ?? 1}
+                height={RowHeight}
+                setCurPath={setCurPath}
+                curPath={curPath}
+                total={total}
+                xScale={xScale}
+                path={path}
+                level={0}
+                isRoot={true}
+                searchString={(currentSearchString as string) ?? ''}
+                setHoveringRow={setHoveringRow}
+                setHoveringLevel={setHoveringLevel}
+                sortBy={sortBy}
+                darkMode={isDarkMode}
+                compareMode={compareMode}
+                profileType={profileType}
+                isContextMenuOpen={isContextMenuOpen}
+                hoveringName={highlightSimilarStacksName}
+                setHoveringName={highlightSimilarStacksSetName}
+                hoveringRow={highlightSimilarStacksRow}
+                colorForSimilarNodes={colorForSimilarNodes}
+                highlightSimilarStacksPreference={highlightSimilarStacksPreference}
+                profileSource={profileSource}
+              />
+            </g>
+          </g>
+        </svg>
+      );
+    }
     return (
       <svg
         className="font-robotoMono"
@@ -320,6 +376,8 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
     highlightSimilarStacksPreference,
     path,
     highlightSimilarStacksSetName,
+    isIcicleChart,
+    profileSource,
   ]);
 
   return (

package/src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts

@@ -22,7 +22,8 @@ import {
 } from '@parca/store';
 import {divide, getLastItem, valueFormatter} from '@parca/utilities';
 
-import {hexifyAddress} from '../../utils';
+import {MergedProfileSource, ProfileSource} from '../../ProfileSource';
+import {BigIntDuo, hexifyAddress} from '../../utils';
 import {
   FIELD_FUNCTION_NAME,
   FIELD_LABELS_ONLY,
@@ -121,3 +122,30 @@ export const arrowToString = (buffer: any): string | null => {
   }
   return '';
 };
+
+export const boundsFromProfileSource = (profileSource?: ProfileSource): BigIntDuo => {
+  if (profileSource === undefined) {
+    return [0n, 1n];
+  }
+
+  if (!(profileSource instanceof MergedProfileSource)) {
+    return [0n, 1n];
+  }
+
+  const request = profileSource.QueryRequest();
+
+  if (
+    request.options.oneofKind !== 'merge' ||
+    request.options.merge.start === undefined ||
+    request.options.merge.end === undefined
+  ) {
+    return [0n, 1n];
+  }
+
+  const start =
+    request.options.merge.start.seconds * 1000000000n + BigInt(request.options.merge.start.nanos);
+  const end =
+    request.options.merge.end.seconds * 1000000000n + BigInt(request.options.merge.end.nanos);
+
+  return [start, end];
+};

package/src/ProfileIcicleGraph/index.tsx

@@ -20,12 +20,14 @@ import {IcicleGraphSkeleton, useParcaContext, useURLState} from '@parca/componen
 import {ProfileType} from '@parca/parser';
 import {capitalizeOnlyFirstLetter, divide} from '@parca/utilities';
 
+import {ProfileSource} from '../ProfileSource';
 import DiffLegend from '../ProfileView/components/DiffLegend';
 import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
 import {TimelineGuide} from '../TimelineGuide';
 import {IcicleGraph} from './IcicleGraph';
 import {FIELD_FUNCTION_NAME, IcicleGraphArrow} from './IcicleGraphArrow';
 import useMappingList from './IcicleGraphArrow/useMappingList';
+import {boundsFromProfileSource} from './IcicleGraphArrow/utils';
 
 const numberFormatter = new Intl.NumberFormat('en-US');
 
@@ -38,6 +40,7 @@ interface ProfileIcicleGraphProps {
   total: bigint;
   filtered: bigint;
   profileType?: ProfileType;
+  profileSource?: ProfileSource;
   curPath: string[] | [];
   setNewCurPath: (path: string[]) => void;
   loading: boolean;
@@ -46,6 +49,7 @@ interface ProfileIcicleGraphProps {
   isHalfScreen: boolean;
   metadataMappingFiles?: string[];
   metadataLoading?: boolean;
+  isIcicleChart?: boolean;
 }
 
 const ErrorContent = ({errorMessage}: {errorMessage: string}): JSX.Element => {
@@ -65,9 +69,11 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   width,
   isHalfScreen,
   metadataMappingFiles,
+  isIcicleChart = false,
+  profileSource,
 }: ProfileIcicleGraphProps): JSX.Element {
   const {onError, authenticationErrorMessage, isDarkMode} = useParcaContext();
-  const {compareMode, timelineGuide} = useProfileViewContext();
+  const {compareMode} = useProfileViewContext();
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
   const mappingsList = useMappingList(metadataMappingFiles);
@@ -167,15 +173,16 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     if (arrow !== undefined)
       return (
         <div className="relative">
-          {timelineGuide?.show === true && (
+          {isIcicleChart ? (
             <TimelineGuide
-              bounds={timelineGuide.props.bounds}
+              bounds={boundsFromProfileSource(profileSource)}
               width={width}
               height={1000}
               margin={0}
-              ticks={60000 / 10000}
+              ticks={12}
+              timeUnit="nanoseconds"
             />
-          )}
+          ) : null}
           <IcicleGraphArrow
             width={width}
             arrow={arrow}
@@ -189,6 +196,8 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
             isHalfScreen={isHalfScreen}
             mappingsListFromMetadata={mappingsList}
             compareAbsolute={isCompareAbsolute}
+            isIcicleChart={isIcicleChart}
+            profileSource={profileSource}
           />
         </div>
       );
@@ -208,7 +217,8 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     isDarkMode,
     mappingsList,
     isCompareAbsolute,
-    timelineGuide,
+    isIcicleChart,
+    profileSource,
   ]);
 
   if (error != null) {

package/src/ProfileSelector/QueryControls.tsx

@@ -16,7 +16,7 @@ import {RpcError} from '@protobuf-ts/runtime-rpc';
 import Select, {type SelectInstance} from 'react-select';
 
 import {ProfileTypesResponse, QueryServiceClient} from '@parca/client';
-import {Button, ButtonGroup, DateTimeRange, DateTimeRangePicker} from '@parca/components';
+import {Button, DateTimeRange, DateTimeRangePicker} from '@parca/components';
 import {ProfileType, Query} from '@parca/parser';
 
 import MatchersInput from '../MatchersInput';
@@ -90,7 +90,7 @@ export function QueryControls({
   profileTypesError,
 }: QueryControlsProps): JSX.Element {
   return (
-    <div className="flex w-full flex-wrap items-end gap-2">
+    <div className="flex w-full flex-wrap items-start gap-2">
       {showProfileTypeSelector && (
         <div>
           <label className="text-xs">Profile type</label>
@@ -216,7 +216,8 @@ export function QueryControls({
 
       <DateTimeRangePicker onRangeSelection={setTimeRangeSelection} range={timeRangeSelection} />
 
-      <ButtonGroup>
+      <div>
+        <label className="text-xs">&nbsp;</label>
         <Button
           disabled={searchDisabled}
           onClick={(e: React.MouseEvent<HTMLElement>) => {
@@ -227,7 +228,7 @@ export function QueryControls({
         >
           Search
         </Button>
-      </ButtonGroup>
+      </div>
     </div>
   );
 }

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

@@ -33,6 +33,7 @@ interface GetDashboardItemProps {
   isHalfScreen: boolean;
   dimensions: DOMRect | undefined;
   flamegraphData: FlamegraphData;
+  flamechartData: FlamegraphData;
   topTableData?: TopTableData;
   callgraphData?: CallgraphData;
   sourceData?: SourceData;
@@ -54,6 +55,7 @@ export const getDashboardItem = ({
   isHalfScreen,
   dimensions,
   flamegraphData,
+  flamechartData,
   topTableData,
   callgraphData,
   sourceData,
@@ -101,6 +103,31 @@ export const getDashboardItem = ({
           />
         </ConditionalWrapper>
       );
+    case 'iciclechart':
+      return (
+        <ProfileIcicleGraph
+          curPath={curPath}
+          setNewCurPath={setNewCurPath}
+          arrow={flamechartData?.arrow}
+          total={total}
+          filtered={filtered}
+          profileType={profileSource?.ProfileType()}
+          loading={flamechartData.loading}
+          error={flamechartData.error}
+          isHalfScreen={isHalfScreen}
+          width={
+            dimensions?.width !== undefined
+              ? isHalfScreen
+                ? (dimensions.width - 54) / 2
+                : dimensions.width - 16
+              : 0
+          }
+          metadataMappingFiles={flamechartData.metadataMappingFiles}
+          metadataLoading={flamechartData.metadataLoading}
+          profileSource={profileSource}
+          isIcicleChart={true}
+        />
+      );
     case 'callgraph':
       return callgraphData?.data !== undefined &&
         callgraphSVG !== undefined &&

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

@@ -22,12 +22,16 @@ const ViewSelector = (): JSX.Element => {
       alwaysReturnArray: true,
     }
   );
-  const {enableSourcesView} = useParcaContext();
+  const {enableSourcesView, enableIciclechartView} = useParcaContext();
 
   const allItems: Array<{key: string; canBeSelected: boolean; supportingText?: string}> = [
     {key: 'table', canBeSelected: !dashboardItems.includes('table')},
     {key: 'icicle', canBeSelected: !dashboardItems.includes('icicle')},
   ];
+  if (enableIciclechartView === true) {
+    allItems.push({key: 'iciclechart', canBeSelected: !dashboardItems.includes('iciclechart')});
+  }
+
   if (enableSourcesView === true) {
     allItems.push({key: 'source', canBeSelected: false});
   }

package/src/ProfileView/index.tsx

@@ -33,6 +33,7 @@ export const ProfileView = ({
   total,
   filtered,
   flamegraphData,
+  flamechartData,
   topTableData,
   callgraphData,
   sourceData,
@@ -42,7 +43,6 @@ export const ProfileView = ({
   pprofDownloading,
   compare,
   showVisualizationSelector,
-  timelineGuide,
 }: ProfileViewProps): JSX.Element => {
   const {
     timezone,
@@ -98,6 +98,7 @@ export const ProfileView = ({
       isHalfScreen,
       dimensions,
       flamegraphData,
+      flamechartData,
       topTableData,
       callgraphData,
       sourceData,
@@ -130,14 +131,13 @@ export const ProfileView = ({
 
   return (
     <KeyDownProvider>
-      <ProfileViewContextProvider value={{profileSource, compareMode, timelineGuide}}>
+      <ProfileViewContextProvider value={{profileSource, compareMode}}>
         <DashboardProvider>
           <ProfileHeader
             profileSourceString={profileSource?.toString(timezone)}
             hasProfileSource={hasProfileSource}
             externalMainActions={profileViewExternalMainActions}
           />
-
           <VisualisationToolbar
             groupBy={groupBy}
             toggleGroupBy={toggleGroupBy}

package/src/ProfileView/types/visualization.ts

@@ -21,7 +21,6 @@ import {
 } from '@parca/client';
 
 import {ProfileSource} from '../../ProfileSource';
-import {TimelineGuideData} from '../context/ProfileViewContext';
 
 export interface FlamegraphData {
   loading: boolean;
@@ -58,12 +57,13 @@ export interface SourceData {
   error?: any;
 }
 
-export type VisualizationType = 'icicle' | 'callgraph' | 'table' | 'source';
+export type VisualizationType = 'icicle' | 'callgraph' | 'table' | 'source' | 'iciclechart';
 
 export interface ProfileViewProps {
   total: bigint;
   filtered: bigint;
   flamegraphData: FlamegraphData;
+  flamechartData: FlamegraphData;
   topTableData?: TopTableData;
   callgraphData?: CallgraphData;
   sourceData?: SourceData;
@@ -73,6 +73,4 @@ export interface ProfileViewProps {
   onDownloadPProf: () => void;
   pprofDownloading?: boolean;
   showVisualizationSelector?: boolean;
-  showTimelineGuide?: boolean;
-  timelineGuide?: TimelineGuideData;
 }

package/src/ProfileViewWithData.tsx

@@ -17,10 +17,9 @@ import {QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
 import {useGrpcMetadata, useParcaContext, useURLState} from '@parca/components';
 import {saveAsBlob} from '@parca/utilities';
 
-import {FIELD_FUNCTION_NAME, FIELD_TIMESTAMP} from './ProfileIcicleGraph/IcicleGraphArrow';
+import {FIELD_FUNCTION_NAME} from './ProfileIcicleGraph/IcicleGraphArrow';
 import {ProfileSource} from './ProfileSource';
 import {ProfileView} from './ProfileView';
-import {TimelineGuideData} from './ProfileView/context/ProfileViewContext';
 import {useQuery} from './useQuery';
 import {downloadPprof} from './utils';
 
@@ -29,16 +28,12 @@ interface ProfileViewWithDataProps {
   profileSource: ProfileSource;
   compare?: boolean;
   showVisualizationSelector?: boolean;
-  isGroupByTimestamp?: boolean;
-  timelineGuide?: TimelineGuideData;
 }
 
 export const ProfileViewWithData = ({
   queryClient,
   profileSource,
   showVisualizationSelector,
-  isGroupByTimestamp,
-  timelineGuide,
 }: ProfileViewWithDataProps): JSX.Element => {
   const metadata = useGrpcMetadata();
   const [dashboardItems] = useURLState<string[]>('dashboard_items', {
@@ -47,10 +42,7 @@ export const ProfileViewWithData = ({
   const [sourceBuildID] = useURLState<string>('source_buildid');
   const [sourceFilename] = useURLState<string>('source_filename');
   const [groupBy] = useURLState<string[]>('group_by', {
-    defaultValue: [
-      isGroupByTimestamp === true ? FIELD_TIMESTAMP : (null as unknown as string),
-      FIELD_FUNCTION_NAME,
-    ].filter(Boolean),
+    defaultValue: [FIELD_FUNCTION_NAME],
     alwaysReturnArray: true,
   });
 
@@ -86,6 +78,18 @@ export const ProfileViewWithData = ({
     binaryFrameFilter,
   });
 
+  const {
+    isLoading: flamechartLoading,
+    response: flamechartResponse,
+    error: flamechartError,
+  } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMECHART, {
+    skip: !dashboardItems.includes('iciclechart'),
+    nodeTrimThreshold,
+    groupBy,
+    invertCallStack,
+    binaryFrameFilter,
+  });
+
   const {isLoading: profileMetadataLoading, response: profileMetadataResponse} = useQuery(
     queryClient,
     profileSource,
@@ -188,6 +192,9 @@ export const ProfileViewWithData = ({
   } else if (sourceResponse !== null) {
     total = BigInt(sourceResponse.total);
     filtered = BigInt(sourceResponse.filtered);
+  } else if (flamechartResponse !== null) {
+    total = BigInt(flamechartResponse.total);
+    filtered = BigInt(flamechartResponse.filtered);
   }
 
   return (
@@ -217,6 +224,25 @@ export const ProfileViewWithData = ({
             : undefined,
         metadataLoading: profileMetadataLoading,
       }}
+      flamechartData={{
+        loading: flamechartLoading && profileMetadataLoading,
+        arrow:
+          flamechartResponse?.report.oneofKind === 'flamegraphArrow'
+            ? flamechartResponse?.report?.flamegraphArrow
+            : undefined,
+        total: BigInt(flamechartResponse?.total ?? '0'),
+        filtered: BigInt(flamechartResponse?.filtered ?? '0'),
+        error: flamechartError,
+        metadataMappingFiles:
+          profileMetadataResponse?.report.oneofKind === 'profileMetadata'
+            ? profileMetadataResponse?.report?.profileMetadata?.mappingFiles
+            : undefined,
+        metadataLabels:
+          profileMetadataResponse?.report.oneofKind === 'profileMetadata'
+            ? profileMetadataResponse?.report?.profileMetadata?.labels
+            : undefined,
+        metadataLoading: profileMetadataLoading,
+      }}
       topTableData={{
         loading: tableLoading,
         arrow:
@@ -250,7 +276,6 @@ export const ProfileViewWithData = ({
       onDownloadPProf={() => void downloadPProfClick()}
       pprofDownloading={pprofDownloading}
       showVisualizationSelector={showVisualizationSelector}
-      timelineGuide={timelineGuide}
     />
   );
 };

package/src/TimelineGuide/index.tsx

@@ -13,19 +13,20 @@
 
 import {Fragment} from 'react';
 
-import * as d3 from 'd3';
+import {scaleLinear, valueFormatter} from '@parca/utilities';
 
-import {NumberDuo} from '../utils';
+import {BigIntDuo} from '../utils';
 
 interface Props {
   width: number;
   height: number;
   margin: number;
-  bounds: NumberDuo;
+  bounds: BigIntDuo;
   ticks?: number;
+  timeUnit?: string;
 }
 
-const alignBeforeAxisCorrection = (val: number): number => {
+const alignBeforeAxisCorrection = (val: bigint): number => {
   if (val < 10000) {
     return -24;
   }
@@ -36,11 +37,18 @@ const alignBeforeAxisCorrection = (val: number): number => {
   return 0;
 };
 
-export const TimelineGuide = ({bounds, width, height, margin, ticks}: Props): JSX.Element => {
-  const xScale = d3.scaleLinear().domain(bounds).range([0, width]);
+export const TimelineGuide = ({
+  bounds,
+  width,
+  height,
+  margin,
+  ticks,
+  timeUnit = 'milliseconds',
+}: Props): JSX.Element => {
+  const xScale = scaleLinear(bounds, [0, width]);
 
   return (
-    <div className="relative h-4">
+    <div className="relative h-5">
       <div className="absolute" style={{width, height}}>
         <svg style={{width: '100%', height: '100%'}} className="z-[5]">
           <g
@@ -50,30 +58,32 @@ export const TimelineGuide = ({bounds, width, height, margin, ticks}: Props): JS
             textAnchor="middle"
             transform={`translate(0,${height - margin})`}
           >
-            {xScale.ticks(ticks).map((d, i) => (
-              <Fragment key={`${i.toString()}-${d.toString()}`}>
-                <g
-                  key={`tick-${i}`}
-                  className="tick"
-                  /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
-                  transform={`translate(${xScale(d) + alignBeforeAxisCorrection(d)}, ${-height})`}
-                >
-                  {/* <line y2={6} className="stroke-gray-300 dark:stroke-gray-500" /> */}
-                  <text fill="currentColor" dy=".71em" y={9}>
-                    {d} ms
-                  </text>
-                </g>
-                <g key={`grid-${i}`}>
-                  <line
-                    className="stroke-gray-300 dark:stroke-gray-500"
-                    x1={xScale(d)}
-                    x2={xScale(d)}
-                    y1={0}
-                    y2={-height + margin}
-                  />
-                </g>
-              </Fragment>
-            ))}
+            {xScale.ticks(ticks).map((d, i) => {
+              return (
+                <Fragment key={`${i.toString()}-${d.toString()}`}>
+                  <g
+                    key={`tick-${i}`}
+                    className="tick"
+                    /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
+                    transform={`translate(${xScale(d) + alignBeforeAxisCorrection(d)}, ${-height})`}
+                  >
+                    {/* <line y2={6} className="stroke-gray-300 dark:stroke-gray-500" /> */}
+                    <text fill="currentColor" dy=".71em" y={9}>
+                      {valueFormatter(d - bounds[0], timeUnit, 2, true).toString()}
+                    </text>
+                  </g>
+                  <g key={`grid-${i}`}>
+                    <line
+                      className="stroke-gray-300 dark:stroke-gray-500"
+                      x1={xScale(d)}
+                      x2={xScale(d)}
+                      y1={0}
+                      y2={-height + margin}
+                    />
+                  </g>
+                </Fragment>
+              );
+            })}
             <line
               className="stroke-gray-300 dark:stroke-gray-500"
               x1={0}

package/src/utils.ts

@@ -61,3 +61,4 @@ export const truncateStringReverse = (str: string, num: number): string => {
 };
 
 export type NumberDuo = [number, number];
+export type BigIntDuo = [bigint, bigint];