@parca/profile 0.19.139 → 0.19.140

package/src/ProfileViewWithData.tsx

@@ -13,15 +13,10 @@
 
 import {useEffect, useMemo, useState} from 'react';
 
+import {useQueryState} from 'nuqs';
+
 import {QueryRequest_ReportType, QueryServiceClient} from '@parca/client';
-import {
-  NumberParser,
-  NumberSerializer,
-  useGrpcMetadata,
-  useParcaContext,
-  useURLState,
-  useURLStateCustom,
-} from '@parca/components';
+import {useGrpcMetadata, useParcaContext} from '@parca/components';
 import {saveAsBlob} from '@parca/utilities';
 
 import {validateFlameChartQuery} from './ProfileFlameGraph';
@@ -35,6 +30,14 @@ import {MergedProfileSource, ProfileSource} from './ProfileSource';
 import {ProfileView} from './ProfileView';
 import {useProfileFilters} from './ProfileView/components/ProfileFilters/useProfileFilters';
 import type {SamplesSeries} from './ProfileView/types/visualization';
+import {
+  flamechartDimensionParser,
+  groupByParser,
+  intParam,
+  invertCallStackParser,
+  stringParam,
+} from './hooks/urlParsers';
+import {useDashboardItems} from './hooks/useDashboardItems';
 import {useQuery} from './useQuery';
 import {downloadPprof} from './utils';
 
@@ -53,22 +56,14 @@ export const ProfileViewWithData = ({
   onSwitchToFifteenMinutes,
 }: ProfileViewWithDataProps): JSX.Element => {
   const metadata = useGrpcMetadata();
-  const [dashboardItems, setDashboardItems] = 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 [sandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
-  const [flamechartDimension] = useURLState<string[]>('flamechart_dimension', {
-    alwaysReturnArray: true,
-  });
+  const {dashboardItems, setDashboardItems} = useDashboardItems();
+  const [sourceBuildID] = useQueryState('source_buildid', stringParam);
+  const [sourceFilename] = useQueryState('source_filename', stringParam);
+  const [groupBy] = useQueryState('group_by', groupByParser.withDefault([FIELD_FUNCTION_NAME]));
+  const [sandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+  const [flamechartDimension] = useQueryState('flamechart_dimension', flamechartDimensionParser);
 
-  const [invertStack] = useURLState('invert_call_stack');
-  const invertCallStack = invertStack === 'true';
+  const [invertCallStack] = useQueryState('invert_call_stack', invertCallStackParser);
 
   const [pprofDownloading, setPprofDownloading] = useState<boolean>(false);
 
@@ -110,7 +105,7 @@ export const ProfileViewWithData = ({
     skip: !dashboardItems.includes('flamegraph'),
     nodeTrimThreshold,
     groupBy,
-    invertCallStack,
+    invertCallStack: invertCallStack ?? false,
     protoFilters,
   });
 
@@ -134,11 +129,10 @@ export const ProfileViewWithData = ({
   );
 
   // Samples step count: 2px per data point for finer granularity in strips
-  const [samplesStepCount] = useURLStateCustom<number>('samples_step_count', {
-    defaultValue: String(getStepCountFromScreenWidth(2)),
-    parse: NumberParser,
-    stringify: NumberSerializer,
-  });
+  const [samplesStepCount] = useQueryState(
+    'samples_step_count',
+    intParam.withDefault(getStepCountFromScreenWidth(2))
+  );
 
   const {
     isLoading: samplesLoading,
@@ -203,8 +197,8 @@ export const ProfileViewWithData = ({
     error: sourceError,
   } = useQuery(queryClient, profileSource, QueryRequest_ReportType.SOURCE, {
     skip: !dashboardItems.includes('source'),
-    sourceBuildID,
-    sourceFilename,
+    sourceBuildID: sourceBuildID ?? undefined,
+    sourceFilename: sourceFilename ?? undefined,
     protoFilters,
   });
 
@@ -216,8 +210,8 @@ export const ProfileViewWithData = ({
     nodeTrimThreshold,
     groupBy: [FIELD_FUNCTION_NAME],
     invertCallStack: true,
-    sandwichByFunction: sandwichFunctionName,
-    skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+    sandwichByFunction: sandwichFunctionName ?? undefined,
+    skip: sandwichFunctionName == null && !dashboardItems.includes('sandwich'),
     protoFilters,
   });
 
@@ -229,8 +223,8 @@ export const ProfileViewWithData = ({
     nodeTrimThreshold,
     groupBy: [FIELD_FUNCTION_NAME],
     invertCallStack: false,
-    sandwichByFunction: sandwichFunctionName,
-    skip: sandwichFunctionName === undefined && !dashboardItems.includes('sandwich'),
+    sandwichByFunction: sandwichFunctionName ?? undefined,
+    skip: sandwichFunctionName == null && !dashboardItems.includes('sandwich'),
     protoFilters,
   });
 

package/src/Sandwich/index.tsx

@@ -14,14 +14,15 @@
 import React, {useRef, useState} from 'react';
 
 import {AnimatePresence, motion} from 'framer-motion';
+import {useQueryState} from 'nuqs';
 
-import {useURLState} from '@parca/components';
 import {TEST_IDS, testId} from '@parca/test-utils';
 
 import {ProfileSource} from '../ProfileSource';
 import {useDashboard} from '../ProfileView/context/DashboardContext';
 import {useVisualizationState} from '../ProfileView/hooks/useVisualizationState';
 import {SandwichData} from '../ProfileView/types/visualization';
+import {stringParam} from '../hooks/urlParsers';
 import {CalleesSection} from './components/CalleesSection';
 import {CallersSection} from './components/CallersSection';
 
@@ -35,7 +36,7 @@ const Sandwich = React.memo(function Sandwich({
   profileSource,
 }: Props): React.JSX.Element {
   const {dashboardItems} = useDashboard();
-  const [sandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
+  const [sandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
 
   const callersRef = React.useRef<HTMLDivElement | null>(null);
   const calleesRef = React.useRef<HTMLDivElement | null>(null);
@@ -57,7 +58,7 @@ const Sandwich = React.memo(function Sandwich({
           transition={{duration: 0.5}}
         >
           <div className="relative flex flex-row">
-            {sandwichFunctionName !== undefined ? (
+            {sandwichFunctionName != null ? (
               <div className="w-full flex flex-col" ref={callersCalleesContainerRef}>
                 <CallersSection
                   callersRef={callersRef}

package/src/SourceView/index.tsx

@@ -15,12 +15,14 @@ import React, {useCallback, useEffect, useMemo} from 'react';
 
 import {tableFromIPC} from '@uwdata/flechette';
 import {AnimatePresence, motion} from 'framer-motion';
+import {useQueryState} from 'nuqs';
 import {Item, Menu, useContextMenu} from 'react-contexify';
 
 import {Source} from '@parca/client';
-import {SourceSkeleton, useParcaContext, useURLState, type ProfileData} from '@parca/components';
+import {SourceSkeleton, useParcaContext, type ProfileData} from '@parca/components';
 
 import {ExpandOnHover} from '../GraphTooltipArrow/ExpandOnHoverValue';
+import {stringParam} from '../hooks/urlParsers';
 import {alignedUint8Array, truncateStringReverse} from '../utils';
 import {Highlighter, profileAwareRenderer, type LineDataLookup} from './Highlighter';
 import useLineRange from './useSelectedLineRange';
@@ -42,7 +44,7 @@ export const SourceView = React.memo(function SourceView({
   filtered,
   setActionButtons,
 }: SourceViewProps): JSX.Element {
-  const [sourceFileName] = useURLState<string | undefined>('source_filename');
+  const [sourceFileName] = useQueryState('source_filename', stringParam);
   const {isDarkMode, sourceViewContextMenuItems = []} = useParcaContext();
 
   const sourceCode = useMemo(() => {

package/src/SourceView/useSelectedLineRange.ts

@@ -11,9 +11,25 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useMemo} from 'react';
+import {useCallback} from 'react';
 
-import {useURLState} from '@parca/components';
+import {createParser, useQueryState} from 'nuqs';
+
+interface SelectedLineRange {
+  start: number;
+  end: number;
+}
+
+const lineRangeParser = createParser<SelectedLineRange>({
+  parse: (value: string) => {
+    const [start, end] = value.split('-');
+    const startNum = parseInt(start, 10);
+    if (isNaN(startNum)) return null;
+    const endNum = end !== undefined ? parseInt(end, 10) : startNum;
+    return {start: startNum, end: isNaN(endNum) ? startNum : endNum};
+  },
+  serialize: (value: SelectedLineRange) => `${value.start}-${value.end}`,
+}).withOptions({history: 'replace'});
 
 interface LineRange {
   startLine: number;
@@ -22,24 +38,23 @@ interface LineRange {
 }
 
 const useLineRange = (): LineRange => {
-  const [sourceLine, setSourceLine] = useURLState<string | undefined>('source_line');
-  const [startLine, endLine] = useMemo(() => {
-    if (sourceLine == null) {
-      return [-1, -1];
-    }
-    const [start, end] = sourceLine.split('-');
-
-    if (end === undefined) {
-      return [parseInt(start, 10), parseInt(start, 10)];
-    }
-    return [parseInt(start, 10), parseInt(end, 10)];
-  }, [sourceLine]);
-
-  const setLineRange = (start: number, end: number): void => {
-    setSourceLine(`${start}-${end}`);
+  const [lineRange, setRawLineRange] = useQueryState(
+    'source_line',
+    lineRangeParser.withDefault({start: -1, end: -1})
+  );
+
+  const setLineRange = useCallback(
+    (start: number, end: number): void => {
+      void setRawLineRange({start, end});
+    },
+    [setRawLineRange]
+  );
+
+  return {
+    startLine: lineRange.start,
+    endLine: lineRange.end,
+    setLineRange,
   };
-
-  return {startLine, endLine, setLineRange};
 };
 
 export default useLineRange;

package/src/Table/MoreDropdown.tsx

@@ -13,23 +13,21 @@
 
 import {Menu} from '@headlessui/react';
 import {Icon} from '@iconify/react';
+import {useQueryState} from 'nuqs';
 
-import {useParcaContext, useURLState, useURLStateBatch} from '@parca/components';
+import {useParcaContext} from '@parca/components';
+
+import {stringParam} from '../hooks/urlParsers';
+import {useDashboardItems} from '../hooks/useDashboardItems';
 
 const MoreDropdown = ({functionName}: {functionName: string}): React.JSX.Element | null => {
-  const [_, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
-  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
-    alwaysReturnArray: true,
-  });
+  const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+  const {dashboardItems, setDashboardItems} = useDashboardItems();
   const {enableSandwichView} = useParcaContext();
-  const batchUpdates = useURLStateBatch();
 
   const onSandwichViewSelect = (): void => {
-    // Batch updates to combine setSandwichFunctionName + setDashboardItems into single URL navigation
-    batchUpdates(() => {
-      setSandwichFunctionName(functionName.trim());
-      setDashboardItems([...dashboardItems, 'sandwich']);
-    });
+    void setSandwichFunctionName(functionName.trim());
+    setDashboardItems([...dashboardItems, 'sandwich']);
   };
 
   const menuItems: Array<{label: string; action: () => void}> = [];

package/src/Table/TableContextMenu.tsx

@@ -13,15 +13,18 @@
 
 import {Icon} from '@iconify/react';
 import cx from 'classnames';
+import {useQueryState} from 'nuqs';
 import {Item, Menu, Submenu} from 'react-contexify';
 
 import 'react-contexify/dist/ReactContexify.css';
 
-import {useParcaContext, useURLState, useURLStateBatch} from '@parca/components';
+import {useParcaContext} from '@parca/components';
 import {valueFormatter} from '@parca/utilities';
 
 import {type Row} from '.';
 import {getTextForCumulative} from '../ProfileFlameGraph/FlameGraphArrow/utils';
+import {stringParam} from '../hooks/urlParsers';
+import {useDashboardItems} from '../hooks/useDashboardItems';
 import {truncateString} from '../utils';
 import {type ColumnName} from './utils/functions';
 
@@ -42,22 +45,16 @@ const TableContextMenu = ({
   totalUnfiltered,
   columnVisibility,
 }: TableContextMenuProps): React.JSX.Element => {
-  const [_, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
-  const [dashboardItems, setDashboardItems] = useURLState<string[]>('dashboard_items', {
-    alwaysReturnArray: true,
-  });
+  const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+  const {dashboardItems, setDashboardItems} = useDashboardItems();
   const {enableSandwichView, isDarkMode} = useParcaContext();
-  const batchUpdates = useURLStateBatch();
 
   const onSandwichViewSelect = (): void => {
     if (row?.name != null && row.name.length > 0) {
-      // Batch updates to combine setSandwichFunctionName + setDashboardItems into single URL navigation
-      batchUpdates(() => {
-        setSandwichFunctionName(row.name.trim());
-        if (!dashboardItems.includes('sandwich')) {
-          setDashboardItems([...dashboardItems, 'sandwich']);
-        }
-      });
+      void setSandwichFunctionName(row.name.trim());
+      if (!dashboardItems.includes('sandwich')) {
+        setDashboardItems([...dashboardItems, 'sandwich']);
+      }
     }
   };
 

package/src/Table/hooks/useTableConfiguration.tsx

@@ -14,11 +14,12 @@
 import {useEffect, useMemo, useState} from 'react';
 
 import {createColumnHelper, type ColumnDef} from '@tanstack/table-core';
+import {useQueryState} from 'nuqs';
 
-import {useURLState} from '@parca/components';
 import {valueFormatter} from '@parca/utilities';
 
 import {type Row} from '..';
+import {tableColumnsParser} from '../../hooks/urlParsers';
 import {ColorCell} from '../ColorCell';
 import {addPlusSign, ratioString, type ColumnName} from '../utils/functions';
 
@@ -43,9 +44,7 @@ export function useTableConfiguration({
   compareMode,
 }: UseTableConfigurationProps): TableConfiguration {
   const columnHelper = createColumnHelper<Row>();
-  const [tableColumns] = useURLState<string[]>('table_columns', {
-    alwaysReturnArray: true,
-  });
+  const [tableColumns] = useQueryState('table_columns', tableColumnsParser);
 
   const [columnVisibility, setColumnVisibility] = useState(() => {
     return {

package/src/Table/index.tsx

@@ -16,14 +16,10 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 import {tableFromIPC} from '@uwdata/flechette';
 import {AnimatePresence, motion} from 'framer-motion';
+import {useQueryState} from 'nuqs';
 import {useContextMenu} from 'react-contexify';
 
-import {
-  Table as TableComponent,
-  TableSkeleton,
-  useParcaContext,
-  useURLState,
-} from '@parca/components';
+import {Table as TableComponent, TableSkeleton, useParcaContext} from '@parca/components';
 import {useCurrentColorProfile} from '@parca/hooks';
 import {ProfileType} from '@parca/parser';
 
@@ -31,6 +27,9 @@ import useMappingList, {
   useFilenamesList,
 } from '../ProfileFlameGraph/FlameGraphArrow/useMappingList';
 import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
+import {stringParam} from '../hooks/urlParsers';
+import {useColorBy} from '../hooks/useColorBy';
+import {useDashboardItems} from '../hooks/useDashboardItems';
 import {alignedUint8Array} from '../utils';
 import TableContextMenuWrapper, {TableContextMenuWrapperRef} from './TableContextMenuWrapper';
 import {useColorManagement} from './hooks/useColorManagement';
@@ -76,11 +75,9 @@ export const Table = React.memo(function Table({
   error,
 }: TableProps): React.JSX.Element {
   const currentColorProfile = useCurrentColorProfile();
-  const [dashboardItems] = useURLState<string[]>('dashboard_items', {
-    alwaysReturnArray: true,
-  });
-  const [_, setSandwichFunctionName] = useURLState<string | undefined>('sandwich_function_name');
-  const [colorBy, setColorBy] = useURLState('color_by');
+  const {dashboardItems} = useDashboardItems();
+  const [_, setSandwichFunctionName] = useQueryState('sandwich_function_name', stringParam);
+  const {colorBy, setColorBy} = useColorBy();
   const {isDarkMode} = useParcaContext();
   const {compareMode} = useProfileViewContext();
 
@@ -108,7 +105,7 @@ export const Table = React.memo(function Table({
   // If there is only one mapping file, we want to color by filename by default.
   useEffect(() => {
     if (mappingsListCount === 1 && colorBy !== 'filename') {
-      setColorBy('filename');
+      void setColorBy('filename');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mappingsListCount]);
@@ -118,7 +115,7 @@ export const Table = React.memo(function Table({
     currentColorProfile,
     mappingsList,
     filenamesList,
-    colorBy: colorBy as string,
+    colorBy,
   });
 
   unit = useMemo(() => unit ?? profileType?.sampleUnit ?? '', [unit, profileType?.sampleUnit]);
@@ -135,7 +132,7 @@ export const Table = React.memo(function Table({
   const selectSpan = useCallback(
     (span: string): void => {
       if (!dashboardItems.includes('flamegraph')) {
-        setSandwichFunctionName(span.trim());
+        void setSandwichFunctionName(span.trim());
       }
     },
     [setSandwichFunctionName, dashboardItems]
@@ -191,13 +188,7 @@ export const Table = React.memo(function Table({
       return {
         id: i,
         colorProperty: {
-          color: getRowColor(
-            colorByColors,
-            mappingFileColumn,
-            i,
-            functionFileNameColumn,
-            colorBy as string
-          ),
+          color: getRowColor(colorByColors, mappingFileColumn, i, functionFileNameColumn, colorBy),
           mappingFile,
         },
         name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),

package/src/TopTable/index.tsx

@@ -16,7 +16,7 @@ import React, {useCallback, useEffect, useMemo} from 'react';
 import {createColumnHelper, type ColumnDef} from '@tanstack/react-table';
 
 import {Top, TopNode, TopNodeMeta} from '@parca/client';
-import {Button, Table, useURLState} from '@parca/components';
+import {Button, Table} from '@parca/components';
 import {
   getLastItem,
   isSearchMatch,
@@ -26,6 +26,7 @@ import {
 } from '@parca/utilities';
 
 import {useProfileViewContext} from '../ProfileView/context/ProfileViewContext';
+import {useDashboardItems} from '../hooks/useDashboardItems';
 import {hexifyAddress} from '../utils';
 
 interface TopTableProps {
@@ -72,9 +73,7 @@ export const TopTable = React.memo(function TopTable({
   setActionButtons,
 }: TopTableProps): JSX.Element {
   const router = parseParams(window?.location.search);
-  const [dashboardItems] = useURLState<string[]>('dashboard_items', {
-    alwaysReturnArray: true,
-  });
+  const {dashboardItems} = useDashboardItems();
 
   const {compareMode} = useProfileViewContext();
 

package/src/hooks/urlParsers.ts

@@ -0,0 +1,38 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {createParser, parseAsArrayOf, parseAsBoolean, parseAsInteger, parseAsString} from 'nuqs';
+
+const opts = {history: 'replace' as const};
+
+// === Base parsers with common options ===
+export const stringParam = parseAsString.withOptions(opts);
+export const boolParam = parseAsBoolean.withOptions(opts);
+export const intParam = parseAsInteger.withOptions(opts);
+export const commaArrayParam = parseAsArrayOf(parseAsString, ',').withOptions(opts);
+
+// === Param-specific parsers with defaults ===
+export const invertCallStackParser = boolParam.withDefault(false);
+export const groupByParser = commaArrayParam;
+export const flamechartDimensionParser = commaArrayParam;
+export const tableColumnsParser = commaArrayParam;
+export const hiddenBinariesParser = commaArrayParam.withDefault([]);
+
+// === JSON parser with BigInt support ===
+export function jsonParser<T>(): ReturnType<typeof createParser<T>> {
+  return createParser<T>({
+    parse: (value: string) => JSON.parse(value) as T,
+    serialize: (value: T) =>
+      JSON.stringify(value, (_, v) => (typeof v === 'bigint' ? v.toString() : v)),
+  }).withOptions(opts);
+}

package/src/hooks/useColorBy.ts

@@ -0,0 +1,42 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {useCallback} from 'react';
+
+import {useQueryState} from 'nuqs';
+
+import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
+
+import {stringParam} from './urlParsers';
+
+export const useColorBy = (): {
+  colorBy: string;
+  setColorBy: (value: string) => void;
+} => {
+  const [colorByPreference, setColorByPreference] = useUserPreference<string>(
+    USER_PREFERENCES.COLOR_BY.key
+  );
+  const [colorByRaw, setRawColorBy] = useQueryState('color_by', stringParam);
+
+  const colorBy = colorByRaw ?? colorByPreference ?? 'binary';
+
+  const setColorBy = useCallback(
+    (value: string) => {
+      void setRawColorBy(value);
+      setColorByPreference(value);
+    },
+    [setRawColorBy, setColorByPreference]
+  );
+
+  return {colorBy, setColorBy};
+};