@parca/profile 0.16.415 → 0.16.417

package/src/ProfileViewWithData.tsx

@@ -15,7 +15,7 @@ import {useEffect, useMemo, useState} from 'react';
 
 import {QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
 import {useGrpcMetadata, useParcaContext, useURLState} from '@parca/components';
-import {saveAsBlob, type NavigateFunction} from '@parca/utilities';
+import {saveAsBlob} from '@parca/utilities';
 
 import {FIELD_FUNCTION_NAME} from './ProfileIcicleGraph/IcicleGraphArrow';
 import {ProfileSource} from './ProfileSource';
@@ -26,26 +26,27 @@ import {downloadPprof} from './utils';
 interface ProfileViewWithDataProps {
   queryClient: QueryServiceClient;
   profileSource: ProfileSource;
-  navigateTo?: NavigateFunction;
   compare?: boolean;
 }
 
 export const ProfileViewWithData = ({
   queryClient,
   profileSource,
-  navigateTo,
 }: ProfileViewWithDataProps): JSX.Element => {
   const metadata = useGrpcMetadata();
-  const [dashboardItems = ['icicle']] = useURLState({param: 'dashboard_items', navigateTo});
-  const [sourceBuildID] = useURLState({param: 'source_buildid', navigateTo}) as unknown as [string];
-  const [sourceFilename] = useURLState({param: 'source_filename', navigateTo}) as unknown as [
-    string
-  ];
-  const [groupBy = [FIELD_FUNCTION_NAME]] = useURLState({param: 'group_by', navigateTo});
-
-  const [invertStack] = useURLState({param: 'invert_call_stack', navigateTo});
+  const [dashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
+  });
+  const [sourceBuildID] = useURLState<string>('source_buildid');
+  const [sourceFilename] = useURLState<string>('source_filename');
+  const [groupBy] = useURLState<string[]>('group_by', {
+    defaultValue: [FIELD_FUNCTION_NAME],
+    alwaysReturnArray: true,
+  });
+
+  const [invertStack] = useURLState('invert_call_stack');
   const invertCallStack = invertStack === 'true';
-  const [binaryFrameFilterStr] = useURLState({param: 'binary_frame_filter', navigateTo});
+  const [binaryFrameFilterStr] = useURLState<string[] | string>('binary_frame_filter');
 
   const binaryFrameFilter: string[] =
     typeof binaryFrameFilterStr === 'string'
@@ -63,9 +64,6 @@ export const ProfileViewWithData = ({
     return (1 / width) * 100;
   }, []);
 
-  // make sure we get a string[]
-  const groupByParam: string[] = typeof groupBy === 'string' ? [groupBy] : groupBy;
-
   const {
     isLoading: flamegraphLoading,
     response: flamegraphResponse,
@@ -73,7 +71,7 @@ export const ProfileViewWithData = ({
   } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
     skip: !dashboardItems.includes('icicle'),
     nodeTrimThreshold,
-    groupBy: groupByParam,
+    groupBy,
     invertCallStack,
     binaryFrameFilter,
   });
@@ -85,7 +83,7 @@ export const ProfileViewWithData = ({
     {
       skip: !dashboardItems.includes('icicle'),
       nodeTrimThreshold,
-      groupBy: groupByParam,
+      groupBy,
       invertCallStack,
       binaryFrameFilter: undefined,
     }
@@ -237,7 +235,6 @@ export const ProfileViewWithData = ({
       }}
       profileSource={profileSource}
       queryClient={queryClient}
-      navigateTo={navigateTo}
       onDownloadPProf={() => void downloadPProfClick()}
       pprofDownloading={pprofDownloading}
     />

package/src/SourceView/index.tsx

@@ -42,7 +42,7 @@ export const SourceView = React.memo(function SourceView({
   filtered,
   setActionButtons,
 }: SourceViewProps): JSX.Element {
-  const [sourceFileName] = useURLState({param: 'source_filename', navigateTo: () => {}});
+  const [sourceFileName] = useURLState<string | undefined>('source_filename');
   const {isDarkMode, sourceViewContextMenuItems = []} = useParcaContext();
 
   const sourceCode = useMemo(() => {

package/src/SourceView/useSelectedLineRange.ts

@@ -22,12 +22,12 @@ interface LineRange {
 }
 
 const useLineRange = (): LineRange => {
-  const [sourceLine, setSourceLine] = useURLState({param: 'source_line', navigateTo: () => {}});
+  const [sourceLine, setSourceLine] = useURLState<string | undefined>('source_line');
   const [startLine, endLine] = useMemo(() => {
     if (sourceLine == null) {
       return [-1, -1];
     }
-    const [start, end] = (sourceLine as string).split('-');
+    const [start, end] = sourceLine.split('-');
 
     if (end === undefined) {
       return [parseInt(start, 10), parseInt(start, 10)];

package/src/Table/index.tsx

@@ -34,13 +34,7 @@ import {
 } from '@parca/components';
 import {type RowRendererProps} from '@parca/components/dist/Table';
 import {ProfileType} from '@parca/parser';
-import {
-  getLastItem,
-  isSearchMatch,
-  parseParams,
-  valueFormatter,
-  type NavigateFunction,
-} from '@parca/utilities';
+import {getLastItem, isSearchMatch, valueFormatter} from '@parca/utilities';
 
 import {useProfileViewContext} from '../ProfileView/ProfileViewContext';
 import {hexifyAddress} from '../utils';
@@ -96,9 +90,9 @@ interface TableProps {
   total: bigint;
   filtered: bigint;
   profileType?: ProfileType;
-  navigateTo?: NavigateFunction;
   loading: boolean;
   currentSearchString?: string;
+  setSearchString?: (searchString: string) => void;
   setActionButtons?: (buttons: React.JSX.Element) => void;
   isHalfScreen: boolean;
   unit?: string;
@@ -295,29 +289,22 @@ export const Table = React.memo(function Table({
   total,
   filtered,
   profileType,
-  navigateTo,
   loading,
   currentSearchString,
+  setSearchString = () => {},
   setActionButtons,
   isHalfScreen,
   unit,
 }: TableProps): React.JSX.Element {
-  const router = parseParams(window?.location.search);
-  const [rawDashboardItems] = useURLState({param: 'dashboard_items'});
-  const [filterByFunctionInput] = useURLState({param: 'filter_by_function'});
+  const [dashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
+  });
   const {isDarkMode} = useParcaContext();
   const [expanded, setExpanded] = useState<ExpandedState>({});
   const [scrollToIndex, setScrollToIndex] = useState<number | undefined>(undefined);
 
   const {compareMode} = useProfileViewContext();
 
-  const dashboardItems = useMemo(() => {
-    if (rawDashboardItems !== undefined) {
-      return rawDashboardItems as string[];
-    }
-    return ['icicle'];
-  }, [rawDashboardItems]);
-
   const percentageString = (value: bigint | number, total: bigint | number): string => {
     if (total === 0n) {
       return '0%';
@@ -486,18 +473,9 @@ export const Table = React.memo(function Table({
 
   const selectSpan = useCallback(
     (span: string): void => {
-      if (navigateTo != null) {
-        navigateTo(
-          '/',
-          {
-            ...router,
-            ...{search_string: span.trim()},
-          },
-          {replace: true}
-        );
-      }
+      setSearchString(span.trim());
     },
-    [navigateTo, router]
+    [setSearchString]
   );
 
   const onRowClick = useCallback(
@@ -563,17 +541,8 @@ export const Table = React.memo(function Table({
   }, [currentSearchString]);
 
   const clearSelection = useCallback((): void => {
-    if (navigateTo != null) {
-      navigateTo(
-        '/',
-        {
-          ...router,
-          ...{search_string: filterByFunctionInput ?? ''},
-        },
-        {replace: true}
-      );
-    }
-  }, [navigateTo, router, filterByFunctionInput]);
+    setSearchString('');
+  }, [setSearchString]);
 
   useEffect(() => {
     setActionButtons?.(

package/src/TopTable/index.tsx

@@ -72,17 +72,12 @@ export const TopTable = React.memo(function TopTable({
   setActionButtons,
 }: TopTableProps): JSX.Element {
   const router = parseParams(window?.location.search);
-  const [rawDashboardItems] = useURLState({param: 'dashboard_items'});
+  const [dashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
+  });
 
   const {compareMode} = useProfileViewContext();
 
-  const dashboardItems = useMemo(() => {
-    if (rawDashboardItems !== undefined) {
-      return rawDashboardItems as string[];
-    }
-    return ['icicle'];
-  }, [rawDashboardItems]);
-
   const columns = useMemo(() => {
     const cols: Array<ColumnDef<TopNode, any>> = [
       columnHelper.accessor('meta', {

package/src/index.tsx

@@ -25,6 +25,10 @@ export * from './ProfileTypeSelector';
 export * from './SourceView';
 export {default as Callgraph} from './Callgraph';
 
+export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES = {
+  dashboard_items: 'icicle',
+};
+
 export type {CallgraphProps};
 
 export {ProfileExplorer, ProfileTypeSelector, getExpressionAsAString};