@parca/profile 0.19.73 → 0.19.74

package/dist/hooks/useCompareModeMeta.js

@@ -0,0 +1,113 @@
+// 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 { useURLState, useURLStateBatch } from '@parca/components';
+/**
+ * Hook to manage compare mode state and operations
+ * Returns compare mode flags and a function to close compare mode
+ */
+export const useCompareModeMeta = () => {
+    const batchUpdates = useURLStateBatch();
+    // Side A URL state (only setters needed)
+    const [, setExpressionA] = useURLState('expression_a');
+    const [, setFromA] = useURLState('from_a');
+    const [, setToA] = useURLState('to_a');
+    const [, setTimeSelectionA] = useURLState('time_selection_a');
+    const [, setSumByA] = useURLState('sum_by_a');
+    const [, setMergeFromA] = useURLState('merge_from_a');
+    const [, setMergeToA] = useURLState('merge_to_a');
+    const [, setSelectionA] = useURLState('selection_a');
+    // Side B URL state
+    const [expressionB, setExpressionB] = useURLState('expression_b');
+    const [fromB, setFromB] = useURLState('from_b');
+    const [toB, setToB] = useURLState('to_b');
+    const [timeSelectionB, setTimeSelectionB] = useURLState('time_selection_b');
+    const [sumByB, setSumByB] = useURLState('sum_by_b');
+    const [mergeFromB, setMergeFromB] = useURLState('merge_from_b');
+    const [mergeToB, setMergeToB] = useURLState('merge_to_b');
+    const [selectionB, setSelectionB] = useURLState('selection_b');
+    // Compare mode flags (expose values for routing decisions)
+    const [compareA, setCompareA] = useURLState('compare_a');
+    const [compareB, setCompareB] = useURLState('compare_b');
+    const [compareAbsolute, setCompareAbsolute] = useURLState('compare_absolute');
+    const closeCompareMode = useCallback((side) => {
+        batchUpdates(() => {
+            // If closing side A, swap A and B params first (keep B's data as the single view)
+            if (side === 'A') {
+                // Copy B to A
+                setExpressionA(expressionB);
+                setFromA(fromB);
+                setToA(toB);
+                setTimeSelectionA(timeSelectionB);
+                setSumByA(sumByB);
+                setMergeFromA(mergeFromB);
+                setMergeToA(mergeToB);
+                setSelectionA(selectionB);
+            }
+            // Clear all B params
+            setExpressionB(undefined);
+            setFromB(undefined);
+            setToB(undefined);
+            setTimeSelectionB(undefined);
+            setSumByB(undefined);
+            setMergeFromB(undefined);
+            setMergeToB(undefined);
+            setSelectionB(undefined);
+            // Clear compare mode flags
+            setCompareA(undefined);
+            setCompareB(undefined);
+            setCompareAbsolute(undefined);
+        });
+    }, [
+        batchUpdates,
+        // Side A setters
+        setExpressionA,
+        setFromA,
+        setToA,
+        setTimeSelectionA,
+        setSumByA,
+        setMergeFromA,
+        setMergeToA,
+        setSelectionA,
+        // Side B values (for swapping)
+        expressionB,
+        fromB,
+        toB,
+        timeSelectionB,
+        sumByB,
+        mergeFromB,
+        mergeToB,
+        selectionB,
+        // Side B setters
+        setExpressionB,
+        setFromB,
+        setToB,
+        setTimeSelectionB,
+        setSumByB,
+        setMergeFromB,
+        setMergeToB,
+        setSelectionB,
+        // Compare flags
+        setCompareA,
+        setCompareB,
+        setCompareAbsolute,
+    ]);
+    // Derive isCompareMode from flags
+    const isCompareMode = compareA === 'true' || compareB === 'true';
+    const isCompareAbsolute = compareAbsolute === 'true';
+    return {
+        isCompareMode,
+        isCompareAbsolute,
+        closeCompareMode,
+    };
+};

package/dist/hooks/useQueryState.d.ts

@@ -0,0 +1,32 @@
+import { Query } from '@parca/parser';
+import { QuerySelection } from '../ProfileSelector';
+import { ProfileSelection, ProfileSource } from '../ProfileSource';
+interface UseQueryStateOptions {
+    suffix?: '_a' | '_b';
+    defaultExpression?: string;
+    defaultTimeSelection?: string;
+    defaultFrom?: number;
+    defaultTo?: number;
+    comparing?: boolean;
+}
+interface UseQueryStateReturn {
+    querySelection: QuerySelection;
+    draftSelection: QuerySelection;
+    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;
+    commitDraft: (refreshedTimeRange?: {
+        from: number;
+        to: number;
+        timeSelection: string;
+    }) => void;
+    profileSelection: ProfileSelection | null;
+    profileSource: ProfileSource | null;
+    setProfileSelection: (mergeFrom: bigint, mergeTo: bigint, query: Query) => void;
+    sumByLoading: boolean;
+}
+export declare const useQueryState: (options?: UseQueryStateOptions) => UseQueryStateReturn;
+export {};
+//# sourceMappingURL=useQueryState.d.ts.map

package/dist/hooks/useQueryState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQueryState.d.ts","sourceRoot":"","sources":["../../src/hooks/useQueryState.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAC,gBAAgB,EAA8B,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAG7F,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,mBAAmB;IAE3B,cAAc,EAAE,cAAc,CAAC;IAG/B,cAAc,EAAE,cAAc,CAAC;IAG/B,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnE,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAG7C,WAAW,EAAE,CAAC,kBAAkB,CAAC,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAC;IAG9F,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAG1C,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IAGpC,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAGhF,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,GAAI,UAAS,oBAAyB,KAAG,mBAgWlE,CAAC"}

package/dist/hooks/useQueryState.js

@@ -0,0 +1,285 @@
+// 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 { ProfileSelectionFromParams } from '../ProfileSource';
+import { sumByToParam, useSumBy, useSumByFromParams } from '../useSumBy';
+export const useQueryState = (options = {}) => {
+    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(`expression${suffix}`, {
+        defaultValue: defaultExpression,
+    });
+    const [from, setFromState] = useURLState(`from${suffix}`, {
+        defaultValue: defaultFrom?.toString(),
+    });
+    const [to, setToState] = useURLState(`to${suffix}`, {
+        defaultValue: defaultTo?.toString(),
+    });
+    const [timeSelection, setTimeSelectionState] = useURLState(`time_selection${suffix}`, {
+        defaultValue: defaultTimeSelection,
+    });
+    const [sumByParam, setSumByParam] = useURLState(`sum_by${suffix}`);
+    const [mergeFrom, setMergeFromState] = useURLState(`merge_from${suffix}`);
+    const [mergeTo, setMergeToState] = useURLState(`merge_to${suffix}`);
+    // ProfileSelection URL state hooks - reuses merge_from/merge_to but adds selection
+    const [selectionParam, setSelectionParam] = useURLState(`selection${suffix}`);
+    // Parse sumBy from URL parameter format
+    const sumBy = useSumByFromParams(sumByParam);
+    // Draft state management
+    const [draftExpression, setDraftExpression] = useState(expression ?? defaultExpression);
+    const [draftFrom, setDraftFrom] = useState(from ?? defaultFrom?.toString() ?? '');
+    const [draftTo, setDraftTo] = useState(to ?? defaultTo?.toString() ?? '');
+    const [draftTimeSelection, setDraftTimeSelection] = useState(timeSelection ?? defaultTimeSelection);
+    const [draftSumBy, setDraftSumBy] = useState(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 = 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 = useMemo(() => {
+        const isDelta = draftProfileType.delta;
+        const draftMergeFrom = isDelta
+            ? (BigInt(draftTimeRange.getFromMs()) * 1000000n).toString()
+            : undefined;
+        const draftMergeTo = isDelta
+            ? (BigInt(draftTimeRange.getToMs()) * 1000000n).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(() => {
+        return ProfileSelectionFromParams(mergeFrom, mergeTo, selectionParam);
+    }, [mergeFrom, mergeTo, selectionParam]);
+    // Compute ProfileSource from ProfileSelection
+    const profileSource = useMemo(() => {
+        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, expression) => {
+        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) * 1000000n).toString());
+                setMergeToState((BigInt(toMs) * 1000000n).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, 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, newTo, newTimeSelection) => {
+        setDraftFrom(newFrom.toString());
+        setDraftTo(newTo.toString());
+        setDraftTimeSelection(newTimeSelection);
+    }, []);
+    const setDraftSumByCallback = useCallback((newSumBy) => {
+        setDraftSumBy(newSumBy);
+    }, []);
+    const setDraftProfileName = useCallback((newProfileName) => {
+        if (newProfileName === '')
+            return;
+        const [newQuery, changed] = draftQuery.setProfileName(newProfileName);
+        if (changed) {
+            setDraftExpression(newQuery.toString());
+        }
+    }, [draftQuery]);
+    const setDraftMatchers = useCallback((matchers) => {
+        const newExpression = `${draftProfileName}{${matchers}}`;
+        setDraftExpression(newExpression);
+    }, [draftProfileName]);
+    // Set ProfileSelection (auto-commits to URL immediately)
+    const setProfileSelection = useCallback((mergeFrom, mergeTo, 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/dist/hooks/useQueryState.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useQueryState.test.d.ts.map

package/dist/hooks/useQueryState.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useQueryState.test.d.ts","sourceRoot":"","sources":["../../src/hooks/useQueryState.test.tsx"],"names":[],"mappings":""}