@parca/profile 0.19.109 → 0.19.111

package/src/ProfileView/components/ProfileFilters/useProfileFiltersUrlState.ts

@@ -11,9 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useMemo} from 'react';
+import {useCallback, useMemo} from 'react';
 
-import {useURLStateCustom, type ParamValueSetterCustom} from '@parca/components';
+import {useURLStateBatch, useURLStateCustom, type ParamValueSetterCustom} from '@parca/components';
 import {safeDecode} from '@parca/utilities';
 
 import {isPresetKey} from './filterPresets';
@@ -140,10 +140,13 @@ export const decodeProfileFilters = (encoded: string): ProfileFilter[] => {
 export const useProfileFiltersUrlState = (): {
   appliedFilters: ProfileFilter[];
   setAppliedFilters: ParamValueSetterCustom<ProfileFilter[]>;
+  forceApplyFilters: (filters: ProfileFilter[]) => void;
 } => {
+  const batchUpdates = useURLStateBatch();
+
   // Store applied filters in URL state for persistence using compact encoding
   const [appliedFilters, setAppliedFilters] = useURLStateCustom<ProfileFilter[]>(
-    'profile_filters',
+    `profile_filters`,
     {
       parse: value => {
         return decodeProfileFilters(value as string);
@@ -159,8 +162,26 @@ export const useProfileFiltersUrlState = (): {
     return appliedFilters ?? [];
   }, [appliedFilters]);
 
+  // Force apply filters (bypasses preserve-existing strategy)
+  const forceApplyFilters = useCallback(
+    (filters: ProfileFilter[]) => {
+      const validFilters = filters.filter(f => {
+        if (f.type != null && isPresetKey(f.type)) {
+          return f.value !== '' && f.type != null;
+        }
+        return f.value !== '' && f.type != null && f.field != null && f.matchType != null;
+      });
+
+      batchUpdates(() => {
+        setAppliedFilters(validFilters);
+      });
+    },
+    [batchUpdates, setAppliedFilters]
+  );
+
   return {
     appliedFilters: memoizedAppliedFilters,
     setAppliedFilters,
+    forceApplyFilters,
   };
 };

package/src/QueryControls/index.tsx

@@ -177,9 +177,7 @@ export function QueryControls({
           {viewComponent?.createViewComponent}
         </div>
 
-        {viewComponent?.disableExplorativeQuerying === true &&
-        viewComponent?.labelnames !== undefined &&
-        viewComponent?.labelnames.length >= 1 ? (
+        {viewComponent?.labelnames !== undefined && viewComponent?.labelnames.length >= 1 ? (
           <ViewMatchers labelNames={viewComponent.labelnames} />
         ) : showAdvancedMode && advancedModeForQueryBrowser ? (
           <MatchersInput

package/src/SourceView/Highlighter.tsx

@@ -13,7 +13,6 @@
 
 import {MouseEventHandler, useId, useMemo} from 'react';
 
-import {Vector} from 'apache-arrow';
 import cx from 'classnames';
 import {scaleLinear} from 'd3-scale';
 import {type createElementProps} from 'react-syntax-highlighter';
@@ -114,9 +113,10 @@ const charsToWidth = (chars: number): string => {
   return charsToWidthMap[chars];
 };
 
+export type LineDataLookup = (lineNumber: number) => {cumulative: bigint; flat: bigint} | undefined;
+
 export const profileAwareRenderer = (
-  cumulative: Vector | null,
-  flat: Vector | null,
+  getLineData: LineDataLookup,
   total: bigint,
   filtered: bigint,
   onContextMenu: MouseEventHandler<HTMLDivElement>
@@ -135,6 +135,7 @@ export const profileAwareRenderer = (
           const lineNumber: number = node.children[0].children[0].value as number;
           const isCurrentLine = lineNumber >= startLine && lineNumber <= endLine;
           node.children = node.children.slice(1);
+          const data = getLineData(lineNumber);
           return (
             <div className="flex gap-1" key={`${i}`}>
               <div
@@ -161,11 +162,11 @@ export const profileAwareRenderer = (
                 />
               </div>
               <LineProfileMetadata
-                value={cumulative?.get(i) ?? 0n}
+                value={data?.cumulative ?? 0n}
                 total={total}
                 filtered={filtered}
               />
-              <LineProfileMetadata value={flat?.get(i) ?? 0n} total={total} filtered={filtered} />
+              <LineProfileMetadata value={data?.flat ?? 0n} total={total} filtered={filtered} />
               <div
                 className={cx(
                   'w-full flex-grow-0 border-l border-gray-200 pl-1 dark:border-gray-700',

package/src/SourceView/index.tsx

@@ -22,7 +22,7 @@ import {SourceSkeleton, useParcaContext, useURLState, type ProfileData} from '@p
 
 import {ExpandOnHover} from '../GraphTooltipArrow/ExpandOnHoverValue';
 import {truncateStringReverse} from '../utils';
-import {Highlighter, profileAwareRenderer} from './Highlighter';
+import {Highlighter, profileAwareRenderer, type LineDataLookup} from './Highlighter';
 import useLineRange from './useSelectedLineRange';
 
 interface SourceViewProps {
@@ -59,31 +59,64 @@ export const SourceView = React.memo(function SourceView({
 
   const {startLine, endLine} = useLineRange();
 
-  const [cumulative, flat] = useMemo(() => {
+  const sourceTable = useMemo(() => {
     if (data === undefined) {
-      return [null, null];
+      return null;
     }
     const table = tableFromIPC(data.record);
-    const cumulative = table.getChild('cumulative');
-    const flat = table.getChild('flat');
-    return [cumulative, flat];
+    return {
+      numRows: table.numRows,
+      lineNumbers: table.getChild('line_number'),
+      cumulative: table.getChild('cumulative'),
+      flat: table.getChild('flat'),
+    };
   }, [data]);
 
+  const getLineData: LineDataLookup = useCallback(
+    (lineNumber: number) => {
+      if (sourceTable === null || sourceTable.lineNumbers === null) {
+        return undefined;
+      }
+      const {numRows, lineNumbers, cumulative, flat} = sourceTable;
+
+      let lo = 0;
+      let hi = numRows - 1;
+      while (lo <= hi) {
+        const mid = (lo + hi) >>> 1;
+        const midVal = Number(lineNumbers.get(mid));
+        if (midVal === lineNumber) {
+          return {
+            cumulative: (cumulative?.get(mid) as bigint) ?? 0n,
+            flat: (flat?.get(mid) as bigint) ?? 0n,
+          };
+        }
+        if (midVal < lineNumber) {
+          lo = mid + 1;
+        } else {
+          hi = mid - 1;
+        }
+      }
+      return undefined;
+    },
+    [sourceTable]
+  );
+
   const getProfileDataForLine = useCallback(
     (line: number, newLine: number): ProfileData | undefined => {
-      if (cumulative == null && flat == null) {
+      const data = getLineData(line);
+      if (data === undefined) {
         return undefined;
       }
-      if (cumulative?.get(line - 1) === 0n && flat?.get(line - 1) === 0n) {
+      if (data.cumulative === 0n && data.flat === 0n) {
         return undefined;
       }
       return {
         line: newLine,
-        cumulative: Number(cumulative?.get(line - 1) ?? 0),
-        flat: Number(flat?.get(line - 1) ?? 0),
+        cumulative: Number(data.cumulative),
+        flat: Number(data.flat),
       };
     },
-    [cumulative, flat]
+    [getLineData]
   );
 
   const [selectedCode, profileData] = useMemo(() => {
@@ -155,7 +188,7 @@ export const SourceView = React.memo(function SourceView({
         <Highlighter
           file={sourceFileName as string}
           content={data.source}
-          renderer={profileAwareRenderer(cumulative, flat, total, filtered, onContextMenu)}
+          renderer={profileAwareRenderer(getLineData, total, filtered, onContextMenu)}
         />
         {sourceViewContextMenuItems.length > 0 ? (
           <Menu id={MENU_ID}>

package/src/hooks/useLabels.ts

@@ -11,8 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useEffect} from 'react';
-
 import {LabelsRequest, LabelsResponse, QueryServiceClient, ValuesRequest} from '@parca/client';
 import {useGrpcMetadata} from '@parca/components';
 import {millisToProtoTimestamp, sanitizeLabelValue} from '@parca/utilities';
@@ -70,10 +68,6 @@ export const useLabelNames = (
     },
   });
 
-  useEffect(() => {
-    console.log('Label names query result:', {data, error, isLoading});
-  }, [data, error, isLoading]);
-
   return {
     result: {response: data, error: error as Error},
     loading: isLoading,
@@ -113,10 +107,6 @@ export const useLabelValues = (
     },
   });
 
-  useEffect(() => {
-    console.log('Label values query result:', {data, error, isLoading, labelName});
-  }, [data, error, isLoading, labelName]);
-
   return {
     result: {response: data ?? [], error: error as Error},
     loading: isLoading,

package/src/hooks/useQueryState.test.tsx

@@ -11,10 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {ReactNode} from 'react';
+import {ReactNode, act} from 'react';
 
 // eslint-disable-next-line import/named
-import {act, renderHook, waitFor} from '@testing-library/react';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+// eslint-disable-next-line import/named
+import {renderHook, waitFor} from '@testing-library/react';
 import {beforeEach, describe, expect, it, vi} from 'vitest';
 
 import {URLStateProvider} from '@parca/components';
@@ -99,14 +101,60 @@ vi.mock('../useSumBy', async () => {
   };
 });
 
+// Track profile types loading state for tests
+let mockProfileTypesLoading = false;
+let mockProfileTypesData:
+  | {
+      types: Array<{
+        name: string;
+        sampleType: string;
+        sampleUnit: string;
+        periodType: string;
+        periodUnit: string;
+        delta: boolean;
+      }>;
+    }
+  | undefined;
+
+// Mock useProfileTypes to control loading state in tests
+vi.mock('../ProfileSelector', async () => {
+  const actual = await vi.importActual('../ProfileSelector');
+  return {
+    ...actual,
+    useProfileTypes: () => ({
+      loading: mockProfileTypesLoading,
+      data: mockProfileTypesData,
+      error: null,
+    }),
+  };
+});
+
+// Helper to set profile types loading state for tests
+const setProfileTypesLoading = (loading: boolean): void => {
+  mockProfileTypesLoading = loading;
+};
+
+const setProfileTypesData = (data: typeof mockProfileTypesData): void => {
+  mockProfileTypesData = data;
+};
+
 // Helper to create wrapper with URLStateProvider
 const createWrapper = (
   paramPreferences = {}
 ): (({children}: {children: ReactNode}) => JSX.Element) => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
   const Wrapper = ({children}: {children: ReactNode}): JSX.Element => (
-    <URLStateProvider navigateTo={mockNavigateTo} paramPreferences={paramPreferences}>
-      {children}
-    </URLStateProvider>
+    <QueryClientProvider client={queryClient}>
+      <URLStateProvider navigateTo={mockNavigateTo} paramPreferences={paramPreferences}>
+        {children}
+      </URLStateProvider>
+    </QueryClientProvider>
   );
   Wrapper.displayName = 'URLStateProviderWrapper';
   return Wrapper;
@@ -120,6 +168,9 @@ describe('useQueryState', () => {
       writable: true,
     });
     mockLocation.search = '';
+    // Reset profile types mock state
+    setProfileTypesLoading(false);
+    setProfileTypesData(undefined);
   });
 
   describe('Basic functionality', () => {
@@ -127,7 +178,7 @@ describe('useQueryState', () => {
       const {result} = renderHook(
         () =>
           useQueryState({
-            defaultExpression: 'process_cpu{}',
+            defaultExpression: 'process_cpu:cpu:nanoseconds:cpu:nanoseconds{}',
             defaultTimeSelection: 'relative:hour|1',
             defaultFrom: 1000,
             defaultTo: 2000,
@@ -136,7 +187,7 @@ describe('useQueryState', () => {
       );
 
       const {querySelection} = result.current;
-      expect(querySelection.expression).toBe('process_cpu{}');
+      expect(querySelection.expression).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{}');
       expect(querySelection.timeSelection).toBe('relative:hour|1');
       // From/to should be calculated from the range
       expect(querySelection.from).toBeDefined();
@@ -524,7 +575,9 @@ describe('useQueryState', () => {
   });
 
   describe('Edge cases', () => {
-    it('should handle invalid expression gracefully', () => {
+    it('should handle invalid expression gracefully and log warning', () => {
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
       const {result} = renderHook(
         () =>
           useQueryState({
@@ -533,8 +586,33 @@ describe('useQueryState', () => {
         {wrapper: createWrapper()}
       );
 
-      // Should not throw error
+      // Should not throw error - invalid expressions are caught and logged
+      expect(() => result.current.querySelection).not.toThrow();
+      // Should fall back to empty expression
+      expect(result.current.querySelection.expression).toBe('invalid{{}expression');
+      // Should log a warning about the parse failure
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Failed to parse expression',
+        expect.objectContaining({
+          expression: 'invalid{{}expression',
+        })
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('should handle empty expression gracefully', () => {
+      const {result} = renderHook(
+        () =>
+          useQueryState({
+            defaultExpression: '',
+          }),
+        {wrapper: createWrapper()}
+      );
+
+      // Should not throw error with empty expression
       expect(() => result.current.querySelection).not.toThrow();
+      expect(result.current.querySelection.expression).toBe('');
     });
 
     it('should clear merge params for non-delta profiles', async () => {
@@ -1191,7 +1269,8 @@ describe('useQueryState', () => {
     });
 
     it('should preserve other URL params when setting ProfileSelection', async () => {
-      mockLocation.search = '?expression_a=process_cpu{}&other_param=value&unrelated=test';
+      mockLocation.search =
+        '?expression_a=process_cpu:cpu:nanoseconds:cpu:nanoseconds{}&other_param=value&unrelated=test';
 
       const {result} = renderHook(() => useQueryState({suffix: '_a'}), {wrapper: createWrapper()});
 
@@ -1212,7 +1291,7 @@ describe('useQueryState', () => {
         expect(params.selection_a).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{pod="test"}');
 
         // Other params should be preserved
-        expect(params.expression_a).toBe('process_cpu{}');
+        expect(params.expression_a).toBe('process_cpu:cpu:nanoseconds:cpu:nanoseconds{}');
         expect(params.other_param).toBe('value');
         expect(params.unrelated).toBe('test');
       });

package/src/hooks/useQueryState.ts

@@ -29,6 +29,7 @@ interface UseQueryStateOptions {
   defaultFrom?: number;
   defaultTo?: number;
   comparing?: boolean; // If true, don't auto-select for delta profiles
+  onProfileTypeChange?: () => void; // Called when profile type changes on commit, after reset
 }
 
 interface UseQueryStateReturn {
@@ -65,6 +66,10 @@ interface UseQueryStateReturn {
 
   // parsed query
   parsedQuery: Query | null;
+
+  setExpressionParam: (value: string | undefined) => void;
+  setSumByParam: (value: string | undefined) => void;
+  setGroupByParam: (value: string[] | undefined) => void;
 }
 
 export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryStateReturn => {
@@ -76,6 +81,7 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
     defaultFrom,
     defaultTo,
     comparing = false,
+    onProfileTypeChange,
   } = options;
 
   const batchUpdates = useURLStateBatch();
@@ -101,6 +107,10 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
 
   const [sumByParam, setSumByParam] = useURLState<string>(`sum_by${suffix}`);
 
+  const [, setGroupByParam] = useURLState<string>('group_by', {
+    alwaysReturnArray: true,
+  });
+
   const [mergeFrom, setMergeFromState] = useURLState<string>(`merge_from${suffix}`);
   const [mergeTo, setMergeToState] = useURLState<string>(`merge_to${suffix}`);
 
@@ -121,7 +131,11 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
   const draftQuery = useMemo(() => {
     try {
       return Query.parse(draftExpression ?? '');
-    } catch {
+    } catch (error) {
+      console.warn('Failed to parse draft expression', {
+        expression: draftExpression,
+        error: error instanceof Error ? error.message : String(error),
+      });
       return Query.parse('');
     }
   }, [draftExpression]);
@@ -129,7 +143,11 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
   const query = useMemo(() => {
     try {
       return Query.parse(expression ?? '');
-    } catch {
+    } catch (error) {
+      console.warn('Failed to parse expression', {
+        expression,
+        error: error instanceof Error ? error.message : String(error),
+      });
       return Query.parse('');
     }
   }, [expression]);
@@ -346,6 +364,7 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
           Query.parse(querySelection.expression).profileType().toString()
         ) {
           resetStateOnProfileTypeChange();
+          onProfileTypeChange?.();
         }
       });
     },
@@ -369,6 +388,7 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
       setSelectionParam,
       resetFlameGraphState,
       resetStateOnProfileTypeChange,
+      onProfileTypeChange,
       draftProfileType,
       querySelection.expression,
     ]
@@ -426,7 +446,11 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
   const draftParsedQuery = useMemo(() => {
     try {
       return Query.parse(draftSelection.expression ?? '');
-    } catch {
+    } catch (error) {
+      console.warn('Failed to parse draft selection expression', {
+        expression: draftSelection.expression,
+        error: error instanceof Error ? error.message : String(error),
+      });
       return Query.parse('');
     }
   }, [draftSelection.expression]);
@@ -434,7 +458,11 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
   const parsedQuery = useMemo(() => {
     try {
       return Query.parse(querySelection.expression ?? '');
-    } catch {
+    } catch (error) {
+      console.warn('Failed to parse query selection expression', {
+        expression: querySelection.expression,
+        error: error instanceof Error ? error.message : String(error),
+      });
       return Query.parse('');
     }
   }, [querySelection.expression]);
@@ -466,5 +494,9 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
 
     draftParsedQuery,
     parsedQuery,
+
+    setExpressionParam: setExpressionState,
+    setSumByParam,
+    setGroupByParam,
   };
 };

package/src/index.tsx

@@ -34,6 +34,8 @@ export * from './ProfileSource';
 export {
   convertToProtoFilters,
   convertFromProtoFilters,
+  useProfileFilters,
+  type ProfileFilter,
 } from './ProfileView/components/ProfileFilters/useProfileFilters';
 export * from './ProfileView';
 export * from './ProfileViewWithData';
@@ -57,6 +59,8 @@ export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES: ParamPreferences = {
   },
 };
 
+export {useProfileTypes} from './ProfileSelector';
+
 export {
   ProfileExplorer,
   ProfileTypeSelector,