@parca/profile 0.19.73 → 0.19.74

package/src/hooks/useQueryState.ts

@@ -0,0 +1,414 @@
+// 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, useEffect, useMemo, useState} from 'react';
+
+import {DateTimeRange, useParcaContext, useURLState, useURLStateBatch} from '@parca/components';
+import {Query} from '@parca/parser';
+
+import {QuerySelection} from '../ProfileSelector';
+import {ProfileSelection, ProfileSelectionFromParams, ProfileSource} from '../ProfileSource';
+import {sumByToParam, useSumBy, useSumByFromParams} from '../useSumBy';
+
+interface UseQueryStateOptions {
+  suffix?: '_a' | '_b'; // For comparison mode
+  defaultExpression?: string;
+  defaultTimeSelection?: string; // Should be in format like 'relative:hour|1' or 'absolute:...'
+  defaultFrom?: number;
+  defaultTo?: number;
+  comparing?: boolean; // If true, don't auto-select for delta profiles
+}
+
+interface UseQueryStateReturn {
+  // Current committed state (from URL)
+  querySelection: QuerySelection;
+
+  // Draft state (local changes not yet committed)
+  draftSelection: QuerySelection;
+
+  // Draft setters (update local state only)
+  setDraftExpression: (expression: string, commit?: boolean) => void;
+  setDraftTimeRange: (from: number, to: number, timeSelection: string) => void;
+  setDraftSumBy: (sumBy: string[] | undefined) => void;
+  setDraftProfileName: (profileName: string) => void;
+  setDraftMatchers: (matchers: string) => void;
+
+  // Commit function
+  commitDraft: (refreshedTimeRange?: {from: number; to: number; timeSelection: string}) => void;
+
+  // ProfileSelection state (separate from QuerySelection)
+  profileSelection: ProfileSelection | null;
+
+  // ProfileSource derived from ProfileSelection
+  profileSource: ProfileSource | null;
+
+  // ProfileSelection setter (auto-commits to URL)
+  setProfileSelection: (mergeFrom: bigint, mergeTo: bigint, query: Query) => void;
+
+  // Loading state for sumBy computation
+  sumByLoading: boolean;
+}
+
+export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryStateReturn => {
+  const {queryServiceClient: queryClient} = useParcaContext();
+  const {
+    suffix = '',
+    defaultExpression = '',
+    defaultTimeSelection = 'relative:minute|15', // Default to 15 minutes relative
+    defaultFrom,
+    defaultTo,
+    comparing = false,
+  } = options;
+
+  const batchUpdates = useURLStateBatch();
+
+  // URL state hooks with appropriate suffixes
+  const [expression, setExpressionState] = useURLState<string>(`expression${suffix}`, {
+    defaultValue: defaultExpression,
+  });
+
+  const [from, setFromState] = useURLState<string>(`from${suffix}`, {
+    defaultValue: defaultFrom?.toString(),
+  });
+
+  const [to, setToState] = useURLState<string>(`to${suffix}`, {
+    defaultValue: defaultTo?.toString(),
+  });
+
+  const [timeSelection, setTimeSelectionState] = useURLState<string>(`time_selection${suffix}`, {
+    defaultValue: defaultTimeSelection,
+  });
+
+  const [sumByParam, setSumByParam] = useURLState<string>(`sum_by${suffix}`);
+
+  const [mergeFrom, setMergeFromState] = useURLState<string>(`merge_from${suffix}`);
+  const [mergeTo, setMergeToState] = useURLState<string>(`merge_to${suffix}`);
+
+  // ProfileSelection URL state hooks - reuses merge_from/merge_to but adds selection
+  const [selectionParam, setSelectionParam] = useURLState<string>(`selection${suffix}`);
+
+  // Parse sumBy from URL parameter format
+  const sumBy = useSumByFromParams(sumByParam);
+
+  // Draft state management
+  const [draftExpression, setDraftExpression] = useState<string>(expression ?? defaultExpression);
+  const [draftFrom, setDraftFrom] = useState<string>(from ?? defaultFrom?.toString() ?? '');
+  const [draftTo, setDraftTo] = useState<string>(to ?? defaultTo?.toString() ?? '');
+  const [draftTimeSelection, setDraftTimeSelection] = useState<string>(
+    timeSelection ?? defaultTimeSelection
+  );
+  const [draftSumBy, setDraftSumBy] = useState<string[] | undefined>(sumBy);
+
+  // Sync draft state with URL state when URL changes externally
+  useEffect(() => {
+    setDraftExpression(expression ?? defaultExpression);
+  }, [expression, defaultExpression]);
+
+  useEffect(() => {
+    setDraftFrom(from ?? defaultFrom?.toString() ?? '');
+  }, [from, defaultFrom]);
+
+  useEffect(() => {
+    setDraftTo(to ?? defaultTo?.toString() ?? '');
+  }, [to, defaultTo]);
+
+  useEffect(() => {
+    setDraftTimeSelection(timeSelection ?? defaultTimeSelection);
+  }, [timeSelection, defaultTimeSelection]);
+
+  useEffect(() => {
+    setDraftSumBy(sumBy);
+  }, [sumBy]);
+
+  // Parse the draft query to extract profile information
+  const draftQuery = useMemo(() => {
+    try {
+      return Query.parse(draftExpression ?? '');
+    } catch {
+      return Query.parse('');
+    }
+  }, [draftExpression]);
+
+  const draftProfileType = useMemo(() => draftQuery.profileType(), [draftQuery]);
+  const draftProfileName = useMemo(() => draftQuery.profileName(), [draftQuery]);
+
+  // Compute draft time range for label fetching
+  const draftTimeRange = useMemo(() => {
+    return DateTimeRange.fromRangeKey(
+      draftTimeSelection ?? defaultTimeSelection,
+      draftFrom !== '' ? parseInt(draftFrom) : defaultFrom,
+      draftTo !== '' ? parseInt(draftTo) : defaultTo
+    );
+  }, [draftTimeSelection, draftFrom, draftTo, defaultTimeSelection, defaultFrom, defaultTo]);
+
+  // Use combined sumBy hook for fetching labels and computing defaults (based on committed state)
+  const {sumBy: computedSumByFromURL, isLoading: sumBySelectionLoading} = useSumBy(
+    queryClient,
+    draftProfileType,
+    draftTimeRange,
+    sumBy
+  );
+
+  // Construct the QuerySelection object (committed state from URL)
+  const querySelection: QuerySelection = useMemo(() => {
+    const range = DateTimeRange.fromRangeKey(
+      timeSelection ?? defaultTimeSelection,
+      from !== undefined && from !== '' ? parseInt(from) : defaultFrom,
+      to !== undefined && to !== '' ? parseInt(to) : defaultTo
+    );
+
+    return {
+      expression: expression ?? defaultExpression,
+      from: range.getFromMs(),
+      to: range.getToMs(),
+      timeSelection: range.getRangeKey(),
+      sumBy: computedSumByFromURL,
+      ...(mergeFrom !== undefined && mergeFrom !== '' && mergeTo !== undefined && mergeTo !== ''
+        ? {mergeFrom, mergeTo}
+        : {}),
+    };
+  }, [
+    expression,
+    from,
+    to,
+    timeSelection,
+    computedSumByFromURL,
+    mergeFrom,
+    mergeTo,
+    defaultExpression,
+    defaultTimeSelection,
+    defaultFrom,
+    defaultTo,
+  ]);
+
+  // Construct the draft QuerySelection object (local draft state)
+  const draftSelection: QuerySelection = useMemo(() => {
+    const isDelta = draftProfileType.delta;
+    const draftMergeFrom = isDelta
+      ? (BigInt(draftTimeRange.getFromMs()) * 1_000_000n).toString()
+      : undefined;
+    const draftMergeTo = isDelta
+      ? (BigInt(draftTimeRange.getToMs()) * 1_000_000n).toString()
+      : undefined;
+
+    return {
+      expression: draftExpression ?? defaultExpression,
+      from: draftTimeRange.getFromMs(),
+      to: draftTimeRange.getToMs(),
+      timeSelection: draftTimeRange.getRangeKey(),
+      sumBy: draftSumBy ?? computedSumByFromURL, // Use draft if set, otherwise fallback to computed
+      ...(draftMergeFrom !== undefined &&
+      draftMergeFrom !== '' &&
+      draftMergeTo !== undefined &&
+      draftMergeTo !== ''
+        ? {mergeFrom: draftMergeFrom, mergeTo: draftMergeTo}
+        : {}),
+    };
+  }, [
+    draftExpression,
+    draftTimeRange,
+    draftSumBy,
+    computedSumByFromURL,
+    draftProfileType.delta,
+    defaultExpression,
+  ]);
+
+  // Compute ProfileSelection from URL params
+  const profileSelection = useMemo<ProfileSelection | null>(() => {
+    return ProfileSelectionFromParams(mergeFrom, mergeTo, selectionParam);
+  }, [mergeFrom, mergeTo, selectionParam]);
+
+  // Compute ProfileSource from ProfileSelection
+  const profileSource = useMemo<ProfileSource | null>(() => {
+    if (profileSelection === null) return null;
+    return profileSelection.ProfileSource();
+  }, [profileSelection]);
+
+  // Commit draft changes to URL
+  // Optional refreshedTimeRange parameter allows re-evaluating relative time ranges (e.g., "last 15 minutes")
+  // to the current moment when the Search button is clicked
+  // Optional expression parameter allows updating the expression before committing
+  const commitDraft = useCallback(
+    (
+      refreshedTimeRange?: {from: number; to: number; timeSelection: string},
+      expression?: string
+    ) => {
+      batchUpdates(() => {
+        // Use provided expression or current draft expression
+        const finalExpression = expression ?? draftExpression;
+
+        // Update draft state with new expression if provided
+        if (expression !== undefined) {
+          setDraftExpression(expression);
+        }
+
+        // Calculate the actual from/to values from draftSelection if not provided
+        const calculatedFrom = draftSelection.from.toString();
+        const calculatedTo = draftSelection.to.toString();
+
+        const finalFrom =
+          refreshedTimeRange?.from?.toString() ?? (draftFrom !== '' ? draftFrom : calculatedFrom);
+        const finalTo =
+          refreshedTimeRange?.to?.toString() ?? (draftTo !== '' ? draftTo : calculatedTo);
+        const finalTimeSelection = refreshedTimeRange?.timeSelection ?? draftTimeSelection;
+
+        // Update draft state with refreshed time range if provided
+        if (refreshedTimeRange?.from !== undefined) {
+          setDraftFrom(finalFrom);
+        }
+        if (refreshedTimeRange?.to !== undefined) {
+          setDraftTo(finalTo);
+        }
+        if (refreshedTimeRange?.timeSelection !== undefined) {
+          setDraftTimeSelection(finalTimeSelection);
+        }
+
+        setExpressionState(finalExpression);
+        setFromState(finalFrom);
+        setToState(finalTo);
+        setTimeSelectionState(finalTimeSelection);
+        setSumByParam(sumByToParam(draftSumBy));
+
+        // Auto-calculate merge parameters for delta profiles
+        // Parse the final expression to check if it's a delta profile
+        const finalQuery = Query.parse(finalExpression);
+        const isDelta = finalQuery.profileType().delta;
+
+        if (isDelta && finalFrom !== '' && finalTo !== '') {
+          const fromMs = parseInt(finalFrom);
+          const toMs = parseInt(finalTo);
+          setMergeFromState((BigInt(fromMs) * 1_000_000n).toString());
+          setMergeToState((BigInt(toMs) * 1_000_000n).toString());
+
+          // Auto-select the time range for delta profiles (but not in compare mode)
+          // This applies both on initial load AND when Search is clicked
+          // The selection will use the final expression and the updated time range
+          if (!comparing) {
+            setSelectionParam(finalExpression);
+          } else {
+            setSelectionParam(undefined);
+          }
+        } else {
+          setMergeFromState(undefined);
+          setMergeToState(undefined);
+          // Clear ProfileSelection for non-delta profiles
+          setSelectionParam(undefined);
+        }
+      });
+    },
+    [
+      batchUpdates,
+      draftExpression,
+      draftFrom,
+      draftTo,
+      draftTimeSelection,
+      draftSumBy,
+      draftSelection.from,
+      draftSelection.to,
+      comparing,
+      setExpressionState,
+      setFromState,
+      setToState,
+      setTimeSelectionState,
+      setSumByParam,
+      setMergeFromState,
+      setMergeToState,
+      setSelectionParam,
+    ]
+  );
+
+  // Draft setters (update local state only, or commit directly if specified)
+  const setDraftExpressionCallback = useCallback(
+    (newExpression: string, commit = false) => {
+      if (commit) {
+        // Commit with the new expression, which will also update merge params and selection
+        commitDraft(undefined, newExpression);
+      } else {
+        // Only update draft state
+        setDraftExpression(newExpression);
+      }
+    },
+    [commitDraft]
+  );
+
+  const setDraftTimeRange = useCallback(
+    (newFrom: number, newTo: number, newTimeSelection: string) => {
+      setDraftFrom(newFrom.toString());
+      setDraftTo(newTo.toString());
+      setDraftTimeSelection(newTimeSelection);
+    },
+    []
+  );
+
+  const setDraftSumByCallback = useCallback((newSumBy: string[] | undefined) => {
+    setDraftSumBy(newSumBy);
+  }, []);
+
+  const setDraftProfileName = useCallback(
+    (newProfileName: string) => {
+      if (newProfileName === '') return;
+
+      const [newQuery, changed] = draftQuery.setProfileName(newProfileName);
+      if (changed) {
+        setDraftExpression(newQuery.toString());
+      }
+    },
+    [draftQuery]
+  );
+
+  const setDraftMatchers = useCallback(
+    (matchers: string) => {
+      const newExpression = `${draftProfileName}{${matchers}}`;
+      setDraftExpression(newExpression);
+    },
+    [draftProfileName]
+  );
+
+  // Set ProfileSelection (auto-commits to URL immediately)
+  const setProfileSelection = useCallback(
+    (mergeFrom: bigint, mergeTo: bigint, query: Query) => {
+      batchUpdates(() => {
+        setSelectionParam(query.toString());
+        setMergeFromState(mergeFrom.toString());
+        setMergeToState(mergeTo.toString());
+      });
+    },
+    [batchUpdates, setSelectionParam, setMergeFromState, setMergeToState]
+  );
+
+  return {
+    // Current committed state
+    querySelection,
+
+    // Draft state
+    draftSelection,
+
+    // Draft setters
+    setDraftExpression: setDraftExpressionCallback,
+    setDraftTimeRange,
+    setDraftSumBy: setDraftSumByCallback,
+    setDraftProfileName,
+    setDraftMatchers,
+
+    // Commit function
+    commitDraft,
+
+    // ProfileSelection state
+    profileSelection,
+    profileSource,
+    setProfileSelection,
+
+    // Loading state
+    sumByLoading: sumBySelectionLoading,
+  };
+};

package/src/index.tsx

@@ -11,8 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import type {ParamPreferences} from '@parca/components';
+
 import {useLabelNames} from './MatchersInput';
-import ProfileExplorer, {getExpressionAsAString} from './ProfileExplorer';
+import ProfileExplorer from './ProfileExplorer';
 import ProfileTypeSelector from './ProfileTypeSelector';
 import SelectWithRefresh from './SelectWithRefresh';
 import CustomSelect from './SimpleMatchers/Select';
@@ -34,15 +36,11 @@ export * from './useSumBy';
 export {default as ProfileFilters} from './ProfileView/components/ProfileFilters';
 export {useProfileFiltersUrlState} from './ProfileView/components/ProfileFilters/useProfileFiltersUrlState';
 
-export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES = {
-  dashboard_items: 'flamegraph',
+export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES: ParamPreferences = {
+  dashboard_items: {
+    defaultValue: 'flamegraph',
+    splitOnCommas: true, // This param should split on commas for array values
+  },
 };
 
-export {
-  ProfileExplorer,
-  ProfileTypeSelector,
-  getExpressionAsAString,
-  CustomSelect,
-  SelectWithRefresh,
-  useLabelNames,
-};
+export {ProfileExplorer, ProfileTypeSelector, CustomSelect, SelectWithRefresh, useLabelNames};

package/src/useSumBy.ts

@@ -11,10 +11,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useCallback, useEffect, useMemo, useState} from 'react';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 
+import {QueryServiceClient} from '@parca/client';
+import {DateTimeRange} from '@parca/components';
 import {ProfileType} from '@parca/parser';
 
+import {useLabelNames} from './MatchersInput/index';
+
 export const DEFAULT_EMPTY_SUM_BY: string[] = [];
 
 const getDefaultSumBy = (
@@ -92,15 +96,30 @@ export const useSumBySelection = (
 
   const {defaultSumBy} = useDefaultSumBy(profileType, labelNamesLoading, labels);
 
-  let sumBy =
-    userSelectedSumBy[profileType?.toString() ?? ''] ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY;
+  // Store the last valid sumBy value to return during loading
+  const lastValidSumByRef = useRef<string[]>(DEFAULT_EMPTY_SUM_BY);
 
-  if (profileType?.delta !== true) {
-    sumBy = DEFAULT_EMPTY_SUM_BY;
-  }
+  const sumBy = useMemo(() => {
+    // If loading, return the last valid value to prevent input from blanking
+    if (labelNamesLoading && lastValidSumByRef.current !== DEFAULT_EMPTY_SUM_BY) {
+      return lastValidSumByRef.current;
+    }
+
+    let result =
+      userSelectedSumBy[profileType?.toString() ?? ''] ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY;
+
+    if (profileType?.delta !== true) {
+      result = DEFAULT_EMPTY_SUM_BY;
+    }
+
+    // Store the computed value for next loading state
+    lastValidSumByRef.current = result;
+
+    return result;
+  }, [userSelectedSumBy, profileType, defaultSumBy, labelNamesLoading]);
 
   return [
-    labelNamesLoading ? undefined : sumBy,
+    sumBy,
     setSumBy,
     {
       isLoading: labelNamesLoading,
@@ -162,3 +181,39 @@ export const sumByToParam = (sumBy: string[] | undefined): string | string[] | u
 
   return sumBy;
 };
+
+// Combined hook that handles all sumBy logic: fetching labels, computing defaults, and managing selection
+export const useSumBy = (
+  queryClient: QueryServiceClient,
+  profileType: ProfileType | undefined,
+  timeRange: DateTimeRange,
+  defaultValue?: string[]
+): {
+  sumBy: string[] | undefined;
+  setSumBy: (sumBy: string[]) => void;
+  isLoading: boolean;
+} => {
+  const {loading: labelNamesLoading, result} = useLabelNames(
+    queryClient,
+    profileType?.toString() ?? '',
+    timeRange.getFromMs(),
+    timeRange.getToMs()
+  );
+
+  const labels = useMemo(() => {
+    return result.response?.labelNames === undefined ? [] : result.response.labelNames;
+  }, [result]);
+
+  const [sumBySelection, setSumByInternal, {isLoading}] = useSumBySelection(
+    profileType,
+    labelNamesLoading,
+    labels,
+    {defaultValue}
+  );
+
+  return {
+    sumBy: sumBySelection,
+    setSumBy: setSumByInternal,
+    isLoading,
+  };
+};

package/src/ProfileExplorer/index.test.ts

@@ -1,97 +0,0 @@
-// 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 {describe, expect, it} from 'vitest';
-
-import {filterEmptyParams} from './index';
-
-describe('filterEmptyParams', () => {
-  it('should return an array with 2 elements when given object with 2 valid and multiple invalid values', () => {
-    const input = {
-      validString: 'hello',
-      validArray: ['item1', 'item2'],
-      emptyString: '',
-      undefinedValue: undefined,
-      emptyArray: [],
-      anotherEmptyString: '',
-    };
-
-    const result = filterEmptyParams(input);
-    const resultEntries = Object.entries(result);
-
-    expect(resultEntries).toHaveLength(2);
-    expect(result).toEqual({
-      validString: 'hello',
-      validArray: ['item1', 'item2'],
-    });
-  });
-
-  it('should filter out empty strings', () => {
-    const input = {
-      valid: 'test',
-      empty: '',
-    };
-
-    const result = filterEmptyParams(input);
-    expect(result).toEqual({valid: 'test'});
-  });
-
-  it('should filter out undefined values', () => {
-    const input = {
-      valid: 'test',
-      notDefined: undefined,
-    };
-
-    const result = filterEmptyParams(input);
-    expect(result).toEqual({valid: 'test'});
-  });
-
-  it('should filter out empty arrays', () => {
-    const input = {
-      valid: 'test',
-      emptyArray: [],
-      nonEmptyArray: ['item'],
-    };
-
-    const result = filterEmptyParams(input);
-    expect(result).toEqual({
-      valid: 'test',
-      nonEmptyArray: ['item'],
-    });
-  });
-
-  it('should keep all valid values including numbers, booleans, and objects', () => {
-    const input = {
-      string: 'test',
-      number: 0,
-      boolean: false,
-      object: {key: 'value'},
-      array: ['item'],
-    };
-
-    const result = filterEmptyParams(input);
-    expect(result).toEqual(input);
-  });
-
-  it('should return empty object when all values are invalid', () => {
-    const input = {
-      empty1: '',
-      empty2: '',
-      undefined1: undefined,
-      emptyArray: [],
-    };
-
-    const result = filterEmptyParams(input);
-    expect(result).toEqual({});
-  });
-});