@parca/profile 0.16.506 → 0.16.508

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.508](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.507...@parca/profile@0.16.508) (2025-05-07)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.507](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.506...@parca/profile@0.16.507) (2025-05-06)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.506](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.505...@parca/profile@0.16.506) (2025-05-06)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/UtilizationMetrics/index.js

@@ -49,12 +49,12 @@ function transformToSeries(data) {
 }
 const getYAxisUnit = (name) => {
     switch (name) {
-        case 'gpu_utilization_percent':
-            return 'percent';
-        case 'gpu_memory_utilization_percent':
-            return 'percent';
         case 'gpu_power_watt':
             return 'watts';
+        case 'gpu_temperature_celsius':
+            return 'celsius';
+        case 'gpu_clock_hertz':
+            return 'hertz';
         default:
             return 'percent';
     }

package/dist/ProfileIcicleGraph/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Flamegraph, FlamegraphArrow } from '@parca/client';
 import { ProfileType } from '@parca/parser';
-import { ProfileSource } from '../ProfileSource';
+import { MergedProfileSource, ProfileSource } from '../ProfileSource';
 import { CurrentPathFrame } from './IcicleGraphArrow/utils';
 export type ResizeHandler = (width: number, height: number) => void;
 interface ProfileIcicleGraphProps {
@@ -24,6 +24,11 @@ interface ProfileIcicleGraphProps {
     metadataLoading?: boolean;
     isIcicleChart?: boolean;
 }
+export declare const validateIcicleChartQuery: (profileSource: MergedProfileSource) => {
+    isValid: boolean;
+    isNonDelta: boolean;
+    isDurationTooLong: boolean;
+};
 declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart, profileSource, }: ProfileIcicleGraphProps) => JSX.Element;
 export default ProfileIcicleGraph;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAKrE,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAO/C,OAAO,EAAC,gBAAgB,EAA0B,MAAM,0BAA0B,CAAC;AAInF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAMD,QAAA,MAAM,kBAAkB,uMAiBrB,uBAAuB,KAAG,GAAG,CAAC,OAuMhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAKrE,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAOpE,OAAO,EAAC,gBAAgB,EAA0B,MAAM,0BAA0B,CAAC;AAInF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAMD,eAAO,MAAM,wBAAwB,kBACpB,mBAAmB,KACjC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAIpE,CAAC;AAEF,QAAA,MAAM,kBAAkB,uMAiBrB,uBAAuB,KAAG,GAAG,CAAC,OA4NhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileIcicleGraph/index.js

@@ -27,6 +27,11 @@ const numberFormatter = new Intl.NumberFormat('en-US');
 const ErrorContent = ({ errorMessage }) => {
     return _jsx("div", { className: "flex justify-center p-10", children: errorMessage });
 };
+export const validateIcicleChartQuery = (profileSource) => {
+    const isNonDelta = !profileSource.ProfileType().delta;
+    const isDurationTooLong = profileSource.mergeTo - profileSource.mergeFrom > 60000;
+    return { isValid: !isNonDelta && !isDurationTooLong, isNonDelta, isDurationTooLong };
+};
 const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart = false, profileSource, }) {
     const { onError, authenticationErrorMessage, isDarkMode } = useParcaContext();
     const { compareMode } = useProfileViewContext();
@@ -76,9 +81,25 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         }
     }, [loadingState]);
     const icicleGraph = useMemo(() => {
-        if (isLoading) {
+        const { isValid: isIcicleChartValid, isNonDelta, isDurationTooLong, } = isIcicleChart
+            ? validateIcicleChartQuery(profileSource)
+            : { isValid: true, isNonDelta: false, isDurationTooLong: false };
+        const isInvalidIcicleChartQuery = isIcicleChart && !isIcicleChartValid;
+        if (isLoading && !isInvalidIcicleChartQuery) {
             return (_jsx("div", { className: "h-auto overflow-clip", children: _jsx(IcicleGraphSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode }) }));
         }
+        // Do necessary checks to ensure that icicle chart can be rendered for this query.
+        if (isInvalidIcicleChartQuery) {
+            if (isNonDelta) {
+                return _jsx(ErrorContent, { errorMessage: "Icicle chart is only available for delta profiles." });
+            }
+            else if (isDurationTooLong) {
+                return (_jsx(ErrorContent, { errorMessage: "Icicle chart is not available for queries with a duration longer than a minute, select a point in the metrics graph to continue." }));
+            }
+            else {
+                return _jsx(ErrorContent, { errorMessage: "Icicle chart is not available for this query." });
+            }
+        }
         if (graph === undefined && arrow === undefined)
             return _jsx("div", { className: "mx-auto text-center", children: "No data..." });
         if (total === 0n && !loading)

package/dist/ProfileViewWithData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileViewWithData.d.ts","sourceRoot":"","sources":["../src/ProfileViewWithData.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAK1E,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAK9C,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,mBAAmB,+DAI7B,wBAAwB,KAAG,GAAG,CAAC,OAqPjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ProfileViewWithData.d.ts","sourceRoot":"","sources":["../src/ProfileViewWithData.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAM1E,OAAO,EAAsB,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAKnE,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,mBAAmB,+DAI7B,wBAAwB,KAAG,GAAG,CAAC,OAwPjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/ProfileViewWithData.js

@@ -15,6 +15,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { QueryRequest_ReportType } from '@parca/client';
 import { useGrpcMetadata, useParcaContext, useURLState } from '@parca/components';
 import { saveAsBlob } from '@parca/utilities';
+import { validateIcicleChartQuery } from './ProfileIcicleGraph';
 import { FIELD_FUNCTION_NAME } from './ProfileIcicleGraph/IcicleGraphArrow';
 import { ProfileView } from './ProfileView';
 import { useQuery } from './useQuery';
@@ -53,7 +54,8 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
         binaryFrameFilter,
     });
     const { isLoading: flamechartLoading, response: flamechartResponse, error: flamechartError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMECHART, {
-        skip: !dashboardItems.includes('iciclechart'),
+        skip: !(dashboardItems.includes('iciclechart') &&
+            validateIcicleChartQuery(profileSource).isValid),
         nodeTrimThreshold,
         groupBy,
         invertCallStack,

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.506",
+  "version": "0.16.508",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.16.128",
-    "@parca/components": "0.16.332",
+    "@parca/components": "0.16.333",
     "@parca/dynamicsize": "0.16.65",
-    "@parca/hooks": "0.0.84",
+    "@parca/hooks": "0.0.85",
     "@parca/icons": "0.16.71",
     "@parca/parser": "0.16.78",
-    "@parca/store": "0.16.169",
-    "@parca/utilities": "0.0.95",
+    "@parca/store": "0.16.170",
+    "@parca/utilities": "0.0.96",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@storybook/preview-api": "^8.4.3",
@@ -77,5 +77,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "7b92ebba22c9bb62474ce950517b2b8adbfe1e81"
+  "gitHead": "43f190912407bbb3959f24ccc931eca866496fbe"
 }

package/src/MetricsGraph/UtilizationMetrics/index.tsx

@@ -90,12 +90,12 @@ function transformToSeries(data: MetricSeries[]): Series[] {
 
 const getYAxisUnit = (name: string): string => {
   switch (name) {
-    case 'gpu_utilization_percent':
-      return 'percent';
-    case 'gpu_memory_utilization_percent':
-      return 'percent';
     case 'gpu_power_watt':
       return 'watts';
+    case 'gpu_temperature_celsius':
+      return 'celsius';
+    case 'gpu_clock_hertz':
+      return 'hertz';
     default:
       return 'percent';
   }

package/src/ProfileIcicleGraph/index.tsx

@@ -21,7 +21,7 @@ import {IcicleGraphSkeleton, useParcaContext, useURLState} from '@parca/componen
 import {ProfileType} from '@parca/parser';
 import {capitalizeOnlyFirstLetter, divide} from '@parca/utilities';
 
-import {ProfileSource} from '../ProfileSource';
+import {MergedProfileSource, ProfileSource} from '../ProfileSource';
 import DiffLegend from '../ProfileView/components/DiffLegend';
 import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
 import {TimelineGuide} from '../TimelineGuide';
@@ -59,6 +59,14 @@ const ErrorContent = ({errorMessage}: {errorMessage: string}): JSX.Element => {
   return <div className="flex justify-center p-10">{errorMessage}</div>;
 };
 
+export const validateIcicleChartQuery = (
+  profileSource: MergedProfileSource
+): {isValid: boolean; isNonDelta: boolean; isDurationTooLong: boolean} => {
+  const isNonDelta = !profileSource.ProfileType().delta;
+  const isDurationTooLong = profileSource.mergeTo - profileSource.mergeFrom > 60000;
+  return {isValid: !isNonDelta && !isDurationTooLong, isNonDelta, isDurationTooLong};
+};
+
 const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   graph,
   arrow,
@@ -149,7 +157,15 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
   }, [loadingState]);
 
   const icicleGraph = useMemo(() => {
-    if (isLoading) {
+    const {
+      isValid: isIcicleChartValid,
+      isNonDelta,
+      isDurationTooLong,
+    } = isIcicleChart
+      ? validateIcicleChartQuery(profileSource as MergedProfileSource)
+      : {isValid: true, isNonDelta: false, isDurationTooLong: false};
+    const isInvalidIcicleChartQuery = isIcicleChart && !isIcicleChartValid;
+    if (isLoading && !isInvalidIcicleChartQuery) {
       return (
         <div className="h-auto overflow-clip">
           <IcicleGraphSkeleton isHalfScreen={isHalfScreen} isDarkMode={isDarkMode} />
@@ -157,6 +173,19 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
       );
     }
 
+    // Do necessary checks to ensure that icicle chart can be rendered for this query.
+    if (isInvalidIcicleChartQuery) {
+      if (isNonDelta) {
+        return <ErrorContent errorMessage="Icicle chart is only available for delta profiles." />;
+      } else if (isDurationTooLong) {
+        return (
+          <ErrorContent errorMessage="Icicle chart is not available for queries with a duration longer than a minute, select a point in the metrics graph to continue." />
+        );
+      } else {
+        return <ErrorContent errorMessage="Icicle chart is not available for this query." />;
+      }
+    }
+
     if (graph === undefined && arrow === undefined)
       return <div className="mx-auto text-center">No data...</div>;
 

package/src/ProfileViewWithData.tsx

@@ -17,8 +17,9 @@ import {QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
 import {useGrpcMetadata, useParcaContext, useURLState} from '@parca/components';
 import {saveAsBlob} from '@parca/utilities';
 
+import {validateIcicleChartQuery} from './ProfileIcicleGraph';
 import {FIELD_FUNCTION_NAME} from './ProfileIcicleGraph/IcicleGraphArrow';
-import {ProfileSource} from './ProfileSource';
+import {MergedProfileSource, ProfileSource} from './ProfileSource';
 import {ProfileView} from './ProfileView';
 import {useQuery} from './useQuery';
 import {downloadPprof} from './utils';
@@ -83,7 +84,10 @@ export const ProfileViewWithData = ({
     response: flamechartResponse,
     error: flamechartError,
   } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMECHART, {
-    skip: !dashboardItems.includes('iciclechart'),
+    skip: !(
+      dashboardItems.includes('iciclechart') &&
+      validateIcicleChartQuery(profileSource as MergedProfileSource).isValid
+    ),
     nodeTrimThreshold,
     groupBy,
     invertCallStack,