@parca/profile 0.16.363 → 0.16.367

package/src/ProfileIcicleGraph/index.tsx

@@ -219,6 +219,13 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     navigateTo,
   });
 
+  const [invertStack = '', setInvertStack] = useURLState({
+    param: 'invert_call_stack',
+    navigateTo,
+  });
+
+  const isInvert = invertStack === 'true';
+
   const [
     totalFormatted,
     totalUnfilteredFormatted,
@@ -263,6 +270,23 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
       <div className="flex w-full justify-end gap-2 pb-2">
         <div className="ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end">
           {arrow !== undefined && <GroupAndSortActionButtons navigateTo={navigateTo} />}
+          {isHalfScreen ? (
+            <IconButton
+              icon={isInvert ? 'ph:sort-ascending' : 'ph:sort-descending'}
+              toolTipText={isInvert ? 'Original Call Stack' : 'Invert Call Stack'}
+              onClick={() => setInvertStack(isInvert ? '' : 'true')}
+              className="rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]"
+            />
+          ) : (
+            <Button
+              variant="neutral"
+              className="gap-2 w-max"
+              onClick={() => setInvertStack(isInvert ? '' : 'true')}
+            >
+              {isInvert ? 'Original Call Stack' : 'Invert Call Stack'}
+              <Icon icon={isInvert ? 'ph:sort-ascending' : 'ph:sort-descending'} width={20} />
+            </Button>
+          )}
           <ShowHideLegendButton isHalfScreen={isHalfScreen} navigateTo={navigateTo} />
           {isHalfScreen ? (
             <IconButton
@@ -286,7 +310,17 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
         </div>
       </div>
     );
-  }, [navigateTo, arrow, curPath, setNewCurPath, setActionButtons, loading, isHalfScreen]);
+  }, [
+    navigateTo,
+    isInvert,
+    setInvertStack,
+    arrow,
+    curPath,
+    setNewCurPath,
+    setActionButtons,
+    loading,
+    isHalfScreen,
+  ]);
 
   if (loading) {
     return (

package/src/ProfileView/ViewSelector.tsx

@@ -66,17 +66,13 @@ const ViewSelector = ({
     key: string;
     supportingText?: string;
   }): SelectElement => {
-    const capitalizeFirstLetter = (string: string): string => {
-      return `${string.charAt(0).toUpperCase()}${string.slice(1)}`;
-    };
-
-    const title = capitalizeFirstLetter(key);
+    const title = <span className="capitalize">{key.replaceAll('-', ' ')}</span>;
 
     return {
-      active: <>{title}</>,
+      active: title,
       expanded: (
         <>
-          <span>{title}</span>
+          {title}
           {supportingText !== null && <span className="text-xs">{supportingText}</span>}
         </>
       ),

package/src/ProfileViewWithData.tsx

@@ -49,6 +49,8 @@ export const ProfileViewWithData = ({
   const showRuntimePython = showRuntimePythonStr === 'true';
   const [showInterpretedOnlyStr] = useURLState({param: 'show_interpreted_only', navigateTo});
   const showInterpretedOnly = showInterpretedOnlyStr === 'true';
+  const [invertStack] = useURLState({param: 'invert_call_stack', navigateTo});
+  const invertCallStack = invertStack === 'true';
 
   const [pprofDownloading, setPprofDownloading] = useState<boolean>(false);
 
@@ -75,7 +77,9 @@ export const ProfileViewWithData = ({
     showRuntimeRuby,
     showRuntimePython,
     showInterpretedOnly,
+    invertCallStack,
   });
+
   const {perf} = useParcaContext();
 
   const {

package/src/index.tsx

@@ -11,8 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import type {Props as CallgraphProps} from '@parca/profile/src/Callgraph';
-
+import type {Props as CallgraphProps} from './Callgraph';
 import ProfileExplorer from './ProfileExplorer';
 import ProfileTypeSelector from './ProfileTypeSelector';
 

package/src/useQuery.tsx

@@ -35,6 +35,7 @@ interface UseQueryOptions {
   showRuntimeRuby?: boolean;
   showRuntimePython?: boolean;
   showInterpretedOnly?: boolean;
+  invertCallStack?: boolean;
 }
 
 export const useQuery = (
@@ -58,6 +59,7 @@ export const useQuery = (
       options?.showRuntimeRuby ?? false,
       options?.showRuntimePython ?? false,
       options?.showInterpretedOnly ?? false,
+      options?.invertCallStack ?? false,
     ],
     queryFn: async () => {
       const req = profileSource.QueryRequest();
@@ -78,6 +80,7 @@ export const useQuery = (
         showPython: options?.showRuntimePython ?? false,
         showInterpretedOnly: options?.showInterpretedOnly ?? false,
       };
+      req.invertCallStack = options?.invertCallStack ?? false;
 
       try {
         const {response} = await client.query(req, {meta: metadata});