@parca/profile 0.16.416 → 0.16.418

package/src/ProfileView/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Profiler, ProfilerProps, useEffect, useMemo, useState} from 'react';
+import {Profiler, ProfilerProps, useEffect, useState} from 'react';
 
 import {Icon} from '@iconify/react';
 import cx from 'classnames';
@@ -51,15 +51,13 @@ import {jsonToDot} from '../Callgraph/utils';
 import ProfileIcicleGraph from '../ProfileIcicleGraph';
 import {ProfileSource} from '../ProfileSource';
 import {SourceView} from '../SourceView';
-import Table from '../Table';
+import {Table} from '../Table';
 import ProfileShareButton from '../components/ProfileShareButton';
 import FilterByFunctionButton from './FilterByFunctionButton';
 import {ProfileViewContextProvider} from './ProfileViewContext';
 import ViewSelector from './ViewSelector';
 import {VisualizationPanel} from './VisualizationPanel';
 
-type NavigateFunction = (path: string, queryParams: any, options?: {replace?: boolean}) => void;
-
 export interface FlamegraphData {
   loading: boolean;
   data?: Flamegraph;
@@ -104,7 +102,6 @@ export interface ProfileViewProps {
   sourceData?: SourceData;
   profileSource?: ProfileSource;
   queryClient?: QueryServiceClient;
-  navigateTo?: NavigateFunction;
   compare?: boolean;
   onDownloadPProf: () => void;
   pprofDownloading?: boolean;
@@ -128,7 +125,6 @@ export const ProfileView = ({
   sourceData,
   profileSource,
   queryClient,
-  navigateTo,
   onDownloadPProf,
   pprofDownloading,
   compare,
@@ -136,20 +132,12 @@ export const ProfileView = ({
   const {timezone} = useParcaContext();
   const {ref, dimensions} = useContainerDimensions();
   const [curPath, setCurPath] = useState<string[]>([]);
-  const [rawDashboardItems = ['icicle'], setDashboardItems] = useURLState({
-    param: 'dashboard_items',
-    navigateTo,
+  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
+    alwaysReturnArray: true,
   });
   const [graphvizLoaded, setGraphvizLoaded] = useState(false);
   const [callgraphSVG, setCallgraphSVG] = useState<string | undefined>(undefined);
-  const [currentSearchString] = useURLState({param: 'search_string'});
-
-  const dashboardItems = useMemo(() => {
-    if (rawDashboardItems !== undefined) {
-      return rawDashboardItems as string[];
-    }
-    return ['icicle'];
-  }, [rawDashboardItems]);
+  const [currentSearchString, setSearchString] = useURLState<string | undefined>('search_string');
 
   const isDarkMode = useAppSelector(selectDarkMode);
   const isMultiPanelView = dashboardItems.length > 1;
@@ -240,7 +228,6 @@ export const ProfileView = ({
               total={total}
               filtered={filtered}
               profileType={profileSource?.ProfileType()}
-              navigateTo={navigateTo}
               loading={flamegraphData.loading}
               setActionButtons={setActionButtons}
               error={flamegraphData.error}
@@ -281,9 +268,9 @@ export const ProfileView = ({
             data={topTableData.arrow?.record}
             unit={topTableData.unit}
             profileType={profileSource?.ProfileType()}
-            navigateTo={navigateTo}
             setActionButtons={setActionButtons}
-            currentSearchString={currentSearchString as string}
+            currentSearchString={currentSearchString}
+            setSearchString={setSearchString}
             isHalfScreen={isHalfScreen}
           />
         ) : (
@@ -371,7 +358,7 @@ export const ProfileView = ({
           </div>
 
           <div className="lg:flex flex-wrap items-center gap-2 md:justify-end hidden">
-            <FilterByFunctionButton navigateTo={navigateTo} />
+            <FilterByFunctionButton />
             {profileViewExternalSubActions != null ? profileViewExternalSubActions : null}
             <UserPreferences
               customButton={
@@ -402,7 +389,6 @@ export const ProfileView = ({
             </Button>
             <ViewSelector
               defaultValue=""
-              navigateTo={navigateTo}
               position={-1}
               placeholderText="Add panel"
               icon={<Icon icon="material-symbols:add" width={20} />}
@@ -451,7 +437,6 @@ export const ProfileView = ({
                               dashboardItem={dashboardItem}
                               getDashboardItemByType={getDashboardItemByType}
                               dragHandleProps={provided.dragHandleProps}
-                              navigateTo={navigateTo}
                               index={index}
                             />
                           </div>

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};