@parca/profile 0.16.415 → 0.16.417

package/dist/ProfileIcicleGraph/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAS1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,kBAAkB,CAAC;AAa1B,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAgJD,QAAA,MAAM,kBAAkB,yJAerB,uBAAuB,KAAG,GAAG,CAAC,OAkQhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAS1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAc1C,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAyHD,QAAA,MAAM,kBAAkB,6IAcrB,uBAAuB,KAAG,GAAG,CAAC,OAgPhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileIcicleGraph/index.js

@@ -16,28 +16,22 @@ import { Icon } from '@iconify/react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Button, IcicleGraphSkeleton, IconButton, useParcaContext, useURLState, } from '@parca/components';
 import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
-import { capitalizeOnlyFirstLetter, divide, selectQueryParam, } from '@parca/utilities';
+import { capitalizeOnlyFirstLetter, divide, selectQueryParam } from '@parca/utilities';
 import { useProfileViewContext } from '../ProfileView/ProfileViewContext';
 import DiffLegend from '../components/DiffLegend';
 import GroupByDropdown from './ActionButtons/GroupByDropdown';
 import SortBySelect from './ActionButtons/SortBySelect';
-import IcicleGraph from './IcicleGraph';
-import IcicleGraphArrow, { FIELD_FUNCTION_NAME } from './IcicleGraphArrow';
+import { IcicleGraph } from './IcicleGraph';
+import { FIELD_FUNCTION_NAME, IcicleGraphArrow } from './IcicleGraphArrow';
 import ColorStackLegend from './IcicleGraphArrow/ColorStackLegend';
 import useMappingList from './IcicleGraphArrow/useMappingList';
 const numberFormatter = new Intl.NumberFormat('en-US');
 const ErrorContent = ({ errorMessage }) => {
     return _jsx("div", { className: "flex justify-center p-10", children: errorMessage });
 };
-const ShowHideLegendButton = ({ navigateTo, isHalfScreen, }) => {
-    const [colorStackLegend, setStoreColorStackLegend] = useURLState({
-        param: 'color_stack_legend',
-        navigateTo,
-    });
-    const [binaryFrameFilter, setBinaryFrameFilter] = useURLState({
-        param: 'binary_frame_filter',
-        navigateTo,
-    });
+const ShowHideLegendButton = ({ isHalfScreen }) => {
+    const [colorStackLegend, setStoreColorStackLegend] = useURLState('color_stack_legend');
+    const [binaryFrameFilter, setBinaryFrameFilter] = useURLState('binary_frame_filter');
     const { compareMode } = useProfileViewContext();
     const isColorStackLegendEnabled = colorStackLegend === 'true';
     const [colorProfileName] = useUserPreference(USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key);
@@ -49,28 +43,18 @@ const ShowHideLegendButton = ({ navigateTo, isHalfScreen, }) => {
     };
     return (_jsx(_Fragment, { children: colorProfileName === 'default' || compareMode ? null : (_jsx(_Fragment, { children: isHalfScreen ? (_jsxs(_Fragment, { children: [_jsx(IconButton, { className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center !py-2 !px-3 cursor-pointer min-h-[38px]", icon: isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye', toolTipText: isColorStackLegendEnabled ? 'Hide legend' : 'Show legend', onClick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true'), id: "h-show-legend-button" }), binaryFrameFilter !== undefined && binaryFrameFilter.length > 0 && (_jsx(IconButton, { className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center !py-2 !px-3 cursor-pointer min-h-[38px]", icon: "system-uicons:reset", toolTipText: "Reset the legend selection", onClick: () => resetLegend(), id: "h-reset-legend-button" }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Button, { className: "gap-2 w-max", variant: "neutral", onClick: () => setColorStackLegend(isColorStackLegendEnabled ? 'false' : 'true'), id: "h-show-legend-button", children: [isColorStackLegendEnabled ? 'Hide legend' : 'Show legend', _jsx(Icon, { icon: isColorStackLegendEnabled ? 'ph:eye-closed' : 'ph:eye', width: 20 })] }), binaryFrameFilter !== undefined && binaryFrameFilter.length > 0 && (_jsxs(Button, { className: "gap-2 w-max", variant: "neutral", onClick: () => resetLegend(), id: "h-reset-legend-button", children: ["Reset Legend", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }))] })) })) }));
 };
-const GroupAndSortActionButtons = ({ navigateTo }) => {
-    const [storeSortBy = FIELD_FUNCTION_NAME, setStoreSortBy] = useURLState({
-        param: 'sort_by',
-        navigateTo,
+const GroupAndSortActionButtons = () => {
+    const [storeSortBy, setStoreSortBy] = useURLState('sort_by', {
+        defaultValue: FIELD_FUNCTION_NAME,
     });
     const { compareMode } = useProfileViewContext();
-    const [storeGroupBy = [FIELD_FUNCTION_NAME], setStoreGroupBy] = useURLState({
-        param: 'group_by',
-        navigateTo,
+    const [groupBy, setStoreGroupBy] = useURLState('group_by', {
+        defaultValue: [FIELD_FUNCTION_NAME],
+        alwaysReturnArray: true,
     });
     const setGroupBy = useCallback((keys) => {
         setStoreGroupBy(keys);
     }, [setStoreGroupBy]);
-    const groupBy = useMemo(() => {
-        if (storeGroupBy !== undefined) {
-            if (typeof storeGroupBy === 'string') {
-                return [storeGroupBy];
-            }
-            return storeGroupBy;
-        }
-        return [FIELD_FUNCTION_NAME];
-    }, [storeGroupBy]);
     const toggleGroupBy = useCallback((key) => {
         groupBy.includes(key)
             ? setGroupBy(groupBy.filter(v => v !== key)) // remove
@@ -78,29 +62,19 @@ const GroupAndSortActionButtons = ({ navigateTo }) => {
     }, [groupBy, setGroupBy]);
     return (_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy }), _jsx(SortBySelect, { compareMode: compareMode, sortBy: storeSortBy, setSortBy: setStoreSortBy })] }));
 };
-const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, navigateTo, loading, setActionButtons, error, width, isHalfScreen, mappings, }) {
+const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, setActionButtons, error, width, isHalfScreen, mappings, }) {
     const { onError, authenticationErrorMessage, isDarkMode } = useParcaContext();
     const { compareMode } = useProfileViewContext();
     const [isLoading, setIsLoading] = useState(true);
     const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
     const mappingsList = useMappingList(mappings);
-    const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState({
-        param: 'sort_by',
-        navigateTo,
-    });
-    const [invertStack = '', setInvertStack] = useURLState({
-        param: 'invert_call_stack',
-        navigateTo,
-    });
+    const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState('sort_by');
+    const [invertStack = '', setInvertStack] = useURLState('invert_call_stack');
     const isInvert = invertStack === 'true';
     // By default, we want delta profiles (CPU) to be relatively compared.
     // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
     const compareAbsoluteDefault = profileType?.delta === false ? 'true' : 'false';
-    const [compareAbsolute = compareAbsoluteDefault, setCompareAbsolute] = useURLState({
-        param: 'compare_absolute',
-        navigateTo,
-        withURLUpdate: true,
-    });
+    const [compareAbsolute = compareAbsoluteDefault, setCompareAbsolute] = useURLState('compare_absolute');
     const isCompareAbsolute = compareAbsolute === 'true';
     const [totalFormatted, totalUnfilteredFormatted, isTrimmed, trimmedFormatted, trimmedPercentage, isFiltered, filteredPercentage,] = useMemo(() => {
         if (graph === undefined && arrow === undefined) {
@@ -121,9 +95,8 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         ];
     }, [graph, arrow, filtered, total]);
     useEffect(() => {
-        setActionButtons?.(_jsx("div", { className: "flex w-full justify-end gap-2 pb-2", children: _jsxs("div", { className: "ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end", children: [_jsx(GroupAndSortActionButtons, { navigateTo: navigateTo }), isHalfScreen ? (_jsx(IconButton, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', toolTipText: isInvert ? 'Original Call Stack' : 'Invert Call Stack', onClick: () => setInvertStack(isInvert ? '' : 'true'), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setInvertStack(isInvert ? '' : 'true'), children: [isInvert ? 'Original Call Stack' : 'Invert Call Stack', _jsx(Icon, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', width: 20 })] })), _jsx(ShowHideLegendButton, { isHalfScreen: isHalfScreen, navigateTo: navigateTo }), compareMode && (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setCompareAbsolute(isCompareAbsolute ? '' : 'true'), children: [isCompareAbsolute ? 'Compare Relative' : 'Compare Absolute', _jsx(Icon, { icon: isCompareAbsolute ? 'fluent-mdl2:compare' : 'fluent-mdl2:compare-uneven', width: 20 })] })), isHalfScreen ? (_jsx(IconButton, { icon: "system-uicons:reset", disabled: curPath.length === 0, toolTipText: "Reset View", onClick: () => setNewCurPath([]), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: ["Reset View", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }))] }) }));
+        setActionButtons?.(_jsx("div", { className: "flex w-full justify-end gap-2 pb-2", children: _jsxs("div", { className: "ml-2 flex w-full flex-col items-start justify-between gap-2 md:flex-row md:items-end", children: [_jsx(GroupAndSortActionButtons, {}), isHalfScreen ? (_jsx(IconButton, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', toolTipText: isInvert ? 'Original Call Stack' : 'Invert Call Stack', onClick: () => setInvertStack(isInvert ? '' : 'true'), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setInvertStack(isInvert ? '' : 'true'), children: [isInvert ? 'Original Call Stack' : 'Invert Call Stack', _jsx(Icon, { icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending', width: 20 })] })), _jsx(ShowHideLegendButton, { isHalfScreen: isHalfScreen }), compareMode && (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setCompareAbsolute(isCompareAbsolute ? '' : 'true'), children: [isCompareAbsolute ? 'Compare Relative' : 'Compare Absolute', _jsx(Icon, { icon: isCompareAbsolute ? 'fluent-mdl2:compare' : 'fluent-mdl2:compare-uneven', width: 20 })] })), isHalfScreen ? (_jsx(IconButton, { icon: "system-uicons:reset", disabled: curPath.length === 0, toolTipText: "Reset View", onClick: () => setNewCurPath([]), className: "rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 items-center flex border border-gray-200 dark:border-gray-600 dark:text-white justify-center py-2 px-3 cursor-pointer min-h-[38px]" })) : (_jsxs(Button, { variant: "neutral", className: "gap-2 w-max", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: ["Reset View", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }))] }) }));
     }, [
-        navigateTo,
         isInvert,
         setInvertStack,
         arrow,
@@ -155,9 +128,9 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         if (total === 0n && !loading)
             return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
         if (graph !== undefined)
-            return (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, navigateTo: navigateTo }));
+            return (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType }));
         if (arrow !== undefined)
-            return (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, navigateTo: navigateTo, sortBy: storeSortBy, flamegraphLoading: isLoading, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList }));
+            return (_jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, sortBy: storeSortBy, flamegraphLoading: isLoading, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList }));
     }, [
         isLoading,
         graph,
@@ -169,7 +142,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
         curPath,
         setNewCurPath,
         profileType,
-        navigateTo,
         storeSortBy,
         isHalfScreen,
         isDarkMode,
@@ -185,6 +157,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
     if (isTrimmed) {
         console.info(`Trimmed ${trimmedFormatted} (${trimmedPercentage}%) too small values.`);
     }
-    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, isColorStackLegendEnabled && (_jsx(ColorStackLegend, { navigateTo: navigateTo, compareMode: compareMode, mappings: mappings, loading: isLoading })), _jsx("div", { className: "min-h-48", id: "h-icicle-graph", children: _jsx(_Fragment, { children: icicleGraph }) }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }, "icicle-graph-loaded") }));
+    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, isColorStackLegendEnabled && (_jsx(ColorStackLegend, { compareMode: compareMode, mappings: mappings, loading: isLoading })), _jsx("div", { className: "min-h-48", id: "h-icicle-graph", children: _jsx(_Fragment, { children: icicleGraph }) }), _jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] })] }, "icicle-graph-loaded") }));
 };
 export default ProfileIcicleGraph;

package/dist/ProfileMetricsGraph/index.js

@@ -36,8 +36,7 @@ const getStepCountFromScreenWidth = (pixelsPerPoint) => {
 };
 export const useQueryRange = (client, queryExpression, start, end, sumBy, skip = false) => {
     const metadata = useGrpcMetadata();
-    const { navigateTo } = useParcaContext();
-    const [stepCountStr, setStepCount] = useURLState({ param: 'step_count', navigateTo });
+    const [stepCountStr, setStepCount] = useURLState('step_count');
     const defaultStepCount = useMemo(() => {
         return getStepCountFromScreenWidth(10);
     }, []);

package/dist/ProfileSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAQ,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAY9E,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAQ5D,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,oBAAoB;IAC5B,WAAW,EAAE,kBAAkB,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,WAAY,kBAAkB,KAAG,mBAkB5D,CAAC;AAEF,QAAA,MAAM,eAAe,6IAUlB,oBAAoB,KAAG,GAAG,CAAC,OAwT7B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,QAAQ,EAAC,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAQ,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAY9E,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAQ5D,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,oBAAoB;IAC5B,WAAW,EAAE,kBAAkB,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,eAAO,MAAM,eAAe,WAAY,kBAAkB,KAAG,mBAkB5D,CAAC;AAEF,QAAA,MAAM,eAAe,6IAUlB,oBAAoB,KAAG,GAAG,CAAC,OA6U7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileSelector/index.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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 { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import Select from 'react-select';
 import { Button, ButtonGroup, DateTimeRange, DateTimeRangePicker, IconButton, useGrpcMetadata, useParcaContext, } from '@parca/components';
 import { CloseIcon } from '@parca/icons';
@@ -44,6 +44,7 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
     const { loading: profileTypesLoading, data: profileTypesData, error, } = useProfileTypes(queryClient);
     const { heightStyle } = useMetricsGraphDimensions(comparing);
     const { viewComponent } = useParcaContext();
+    const sumByRef = useRef(null);
     const [timeRangeSelection, setTimeRangeSelection] = useState(DateTimeRange.fromRangeKey(querySelection.timeSelection, querySelection.from, querySelection.to));
     const [queryExpressionString, setQueryExpressionString] = useState(querySelection.expression);
     const profileType = useMemo(() => {
@@ -171,7 +172,23 @@ const ProfileSelector = ({ queryClient, querySelection, selectProfile, selectQue
                                             setUserSumBySelection(selectedOptions.map(option => option.value));
                                         }, placeholder: "Labels...", styles: {
                                             indicatorSeparator: () => ({ display: 'none' }),
-                                        }, isDisabled: !profileType.delta })] }), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection }), _jsx(ButtonGroup, { children: _jsx(Button, { disabled: searchDisabled, onClick: (e) => {
+                                        }, isDisabled: !profileType.delta, ref: sumByRef, onKeyDown: e => {
+                                            const currentRef = sumByRef.current;
+                                            if (currentRef == null) {
+                                                return;
+                                            }
+                                            const inputRef = currentRef.inputRef;
+                                            if (inputRef == null) {
+                                                return;
+                                            }
+                                            if (e.key === 'Enter' &&
+                                                inputRef.value === '' &&
+                                                currentRef.state.focusedOptionId === null // menu is not open
+                                            ) {
+                                                setQueryExpression(true);
+                                                currentRef.blur();
+                                            }
+                                        } })] }), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection }), _jsx(ButtonGroup, { children: _jsx(Button, { disabled: searchDisabled, onClick: (e) => {
                                         e.preventDefault();
                                         setQueryExpression(true);
                                     }, id: "h-matcher-search-button", children: "Search" }) })] }), _jsx("div", { children: comparing && _jsx(IconButton, { onClick: () => closeProfile(), icon: _jsx(CloseIcon, {}) }) })] }), _jsx("div", { className: "rounded bg-white shadow dark:border-gray-500 dark:bg-gray-700", children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== undefined &&

package/dist/ProfileView/FilterByFunctionButton.d.ts

@@ -1,6 +1,3 @@
-import type { NavigateFunction } from '@parca/utilities';
-declare const FilterByFunctionButton: ({ navigateTo, }: {
-    navigateTo: NavigateFunction | undefined;
-}) => JSX.Element;
+declare const FilterByFunctionButton: () => JSX.Element;
 export default FilterByFunctionButton;
 //# sourceMappingURL=FilterByFunctionButton.d.ts.map

package/dist/ProfileView/FilterByFunctionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterByFunctionButton.d.ts","sourceRoot":"","sources":["../../src/ProfileView/FilterByFunctionButton.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,QAAA,MAAM,sBAAsB,oBAEzB;IACD,UAAU,EAAE,gBAAgB,GAAG,SAAS,CAAC;CAC1C,KAAG,GAAG,CAAC,OA6BP,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"FilterByFunctionButton.d.ts","sourceRoot":"","sources":["../../src/ProfileView/FilterByFunctionButton.tsx"],"names":[],"mappings":"AAoBA,QAAA,MAAM,sBAAsB,QAAO,GAAG,CAAC,OAuCtC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/ProfileView/FilterByFunctionButton.js

@@ -14,8 +14,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
 import { Icon } from '@iconify/react';
 import { Input, useURLState } from '@parca/components';
-const FilterByFunctionButton = ({ navigateTo, }) => {
-    const [storeValue, setStoreValue] = useURLState({ param: 'filter_by_function', navigateTo });
+import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
+const FilterByFunctionButton = () => {
+    const [highlightAfterFilteringEnabled] = useUserPreference(USER_PREFERENCES.HIGHTLIGHT_AFTER_FILTERING.key);
+    const [storeValue, setStoreValue] = useURLState('filter_by_function');
+    const [_, setSearchString] = useURLState('search_string');
     const [localValue, setLocalValue] = useState(storeValue);
     const isClearAction = useMemo(() => {
         return localValue === storeValue && localValue != null && localValue !== '';
@@ -24,11 +27,17 @@ const FilterByFunctionButton = ({ navigateTo, }) => {
         if (isClearAction) {
             setLocalValue('');
             setStoreValue('');
+            if (highlightAfterFilteringEnabled) {
+                setSearchString('');
+            }
         }
         else {
             setStoreValue(localValue);
+            if (highlightAfterFilteringEnabled) {
+                setSearchString(localValue);
+            }
         }
-    }, [localValue, isClearAction, setStoreValue]);
+    }, [localValue, isClearAction, setStoreValue, highlightAfterFilteringEnabled, setSearchString]);
     return (_jsx(Input, { placeholder: "Filter by function", className: "text-sm", onAction: onAction, onChange: e => setLocalValue(e.target.value), value: localValue ?? '', onBlur: () => setLocalValue(storeValue), actionIcon: isClearAction ? _jsx(Icon, { icon: "ep:circle-close" }) : _jsx(Icon, { icon: "ep:arrow-right" }), id: "h-filter-by-function" }));
 };
 export default FilterByFunctionButton;

package/dist/ProfileView/ViewSelector.d.ts

@@ -1,8 +1,6 @@
-import type { NavigateFunction } from '@parca/utilities';
 interface Props {
     position: number;
     defaultValue: string;
-    navigateTo?: NavigateFunction;
     placeholderText?: string;
     primary?: boolean;
     addView?: boolean;
@@ -10,6 +8,6 @@ interface Props {
     icon?: JSX.Element;
     id?: string;
 }
-declare const ViewSelector: ({ defaultValue, navigateTo, position, placeholderText, primary, addView, disabled, icon, id, }: Props) => JSX.Element;
+declare const ViewSelector: ({ defaultValue, position, placeholderText, primary, addView, disabled, icon, id, }: Props) => JSX.Element;
 export default ViewSelector;
 //# sourceMappingURL=ViewSelector.d.ts.map

package/dist/ProfileView/ViewSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewSelector.d.ts","sourceRoot":"","sources":["../../src/ProfileView/ViewSelector.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,UAAU,KAAK;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,YAAY,mGAUf,KAAK,KAAG,GAAG,CAAC,OAkFd,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ViewSelector.d.ts","sourceRoot":"","sources":["../../src/ProfileView/ViewSelector.tsx"],"names":[],"mappings":"AAgBA,UAAU,KAAK;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,YAAY,uFASf,KAAK,KAAG,GAAG,CAAC,OAoFd,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/ProfileView/ViewSelector.js

@@ -13,11 +13,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // limitations under the License.
 import { Select, useParcaContext, useURLState } from '@parca/components';
 import { useUIFeatureFlag } from '@parca/hooks';
-const ViewSelector = ({ defaultValue, navigateTo, position, placeholderText, primary = false, addView = false, disabled = false, icon, id, }) => {
+const ViewSelector = ({ defaultValue, position, placeholderText, primary = false, addView = false, disabled = false, icon, id, }) => {
     const [callgraphEnabled] = useUIFeatureFlag('callgraph');
-    const [dashboardItems = ['icicle'], setDashboardItems] = useURLState({
-        param: 'dashboard_items',
-        navigateTo,
+    const [dashboardItems = ['icicle'], setDashboardItems] = useURLState('dashboard_items', {
+        alwaysReturnArray: true,
     });
     const { enableSourcesView } = useParcaContext();
     const allItems = [

package/dist/ProfileView/VisualizationPanel.d.ts

@@ -1,12 +1,10 @@
 import React from 'react';
 import type { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
-import type { NavigateFunction } from '@parca/utilities';
 interface Props {
     dashboardItem: string;
     index: number;
     isMultiPanelView: boolean;
     handleClosePanel: (dashboardItem: string) => void;
-    navigateTo: NavigateFunction | undefined;
     dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
     getDashboardItemByType: (props: {
         type: string;

package/dist/ProfileView/VisualizationPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisualizationPanel.d.ts","sourceRoot":"","sources":["../../src/ProfileView/VisualizationPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,KAAK,EAAC,gCAAgC,EAAC,MAAM,qBAAqB,CAAC;AAI1E,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAIvD,UAAU,KAAK;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,UAAU,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACzC,eAAe,EAAE,gCAAgC,GAAG,IAAI,GAAG,SAAS,CAAC;IACrE,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAC9B,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,EAAE,OAAO,CAAC;QACtB,gBAAgB,EAAE,CAAC,aAAa,EAAE,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;KACxD,KAAK,GAAG,CAAC,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,mCA+D7B,CAAC"}
+{"version":3,"file":"VisualizationPanel.d.ts","sourceRoot":"","sources":["../../src/ProfileView/VisualizationPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,KAAK,EAAC,gCAAgC,EAAC,MAAM,qBAAqB,CAAC;AAO1E,UAAU,KAAK;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,EAAE,gCAAgC,GAAG,IAAI,GAAG,SAAS,CAAC;IACrE,sBAAsB,EAAE,CAAC,KAAK,EAAE;QAC9B,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,EAAE,OAAO,CAAC;QACtB,gBAAgB,EAAE,CAAC,aAAa,EAAE,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;KACxD,KAAK,GAAG,CAAC,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,mCAyD7B,CAAC"}

package/dist/ProfileView/VisualizationPanel.js

@@ -17,10 +17,10 @@ import cx from 'classnames';
 import { IconButton, useParcaContext } from '@parca/components';
 import { CloseIcon } from '@parca/icons';
 import ViewSelector from './ViewSelector';
-export const VisualizationPanel = React.memo(function VisualizationPanel({ dashboardItem, index, isMultiPanelView, handleClosePanel, navigateTo, dragHandleProps, getDashboardItemByType, }) {
+export const VisualizationPanel = React.memo(function VisualizationPanel({ dashboardItem, index, isMultiPanelView, handleClosePanel, dragHandleProps, getDashboardItemByType, }) {
     const [actionButtons, setActionButtons] = useState(_jsx(_Fragment, {}));
     const { flamegraphHint } = useParcaContext();
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full items-center justify-end gap-2 pb-2 min-h-[78px]", children: [_jsxs("div", { className: cx('flex w-full justify-between flex-col-reverse md:flex-row', isMultiPanelView && dashboardItem === 'icicle' ? 'items-end gap-x-2' : 'items-end'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: cx(isMultiPanelView ? '' : 'hidden', 'flex items-center'), ...dragHandleProps, children: _jsx(Icon, { className: "text-xl", icon: "material-symbols:drag-indicator" }) }), _jsx("div", { className: "flex gap-2", children: actionButtons })] }), _jsxs("div", { className: cx('flex flex-row items-center gap-4', isMultiPanelView && dashboardItem === 'icicle' && 'pb-[10px]'), children: [_jsx(ViewSelector, { id: "h-switch-viz", defaultValue: dashboardItem, navigateTo: navigateTo, position: index }), dashboardItem === 'icicle' && flamegraphHint != null ? (_jsx("div", { className: "px-2", children: flamegraphHint })) : null] })] }), isMultiPanelView && (_jsx(IconButton, { className: "py-0", onClick: () => handleClosePanel(dashboardItem), icon: _jsx(CloseIcon, {}) }))] }), getDashboardItemByType({
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full items-center justify-end gap-2 pb-2 min-h-[78px]", children: [_jsxs("div", { className: cx('flex w-full justify-between flex-col-reverse md:flex-row', isMultiPanelView && dashboardItem === 'icicle' ? 'items-end gap-x-2' : 'items-end'), children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: cx(isMultiPanelView ? '' : 'hidden', 'flex items-center'), ...dragHandleProps, children: _jsx(Icon, { className: "text-xl", icon: "material-symbols:drag-indicator" }) }), _jsx("div", { className: "flex gap-2", children: actionButtons })] }), _jsxs("div", { className: cx('flex flex-row items-center gap-4', isMultiPanelView && dashboardItem === 'icicle' && 'pb-[10px]'), children: [_jsx(ViewSelector, { id: "h-switch-viz", defaultValue: dashboardItem, position: index }), dashboardItem === 'icicle' && flamegraphHint != null ? (_jsx("div", { className: "px-2", children: flamegraphHint })) : null] })] }), isMultiPanelView && (_jsx(IconButton, { className: "py-0", onClick: () => handleClosePanel(dashboardItem), icon: _jsx(CloseIcon, {}) }))] }), getDashboardItemByType({
                 type: dashboardItem,
                 isHalfScreen: isMultiPanelView,
                 setActionButtons,

package/dist/ProfileView/index.d.ts

@@ -1,8 +1,5 @@
 import { Callgraph as CallgraphType, Flamegraph, FlamegraphArrow, QueryServiceClient, Source, TableArrow, Top } from '@parca/client';
 import { ProfileSource } from '../ProfileSource';
-type NavigateFunction = (path: string, queryParams: any, options?: {
-    replace?: boolean;
-}) => void;
 export interface FlamegraphData {
     loading: boolean;
     data?: Flamegraph;
@@ -43,11 +40,10 @@ export interface ProfileViewProps {
     sourceData?: SourceData;
     profileSource?: ProfileSource;
     queryClient?: QueryServiceClient;
-    navigateTo?: NavigateFunction;
     compare?: boolean;
     onDownloadPProf: () => void;
     pprofDownloading?: boolean;
 }
-export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, compare, }: ProfileViewProps) => JSX.Element;
+export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, }: ProfileViewProps) => JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/ProfileView/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA2BA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACV,GAAG,EACJ,MAAM,eAAe,CAAC;AAgBvB,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAS/C,KAAK,gBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAC,KAAK,IAAI,CAAC;AAEhG,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,UAAU,UAAU;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAWD,eAAO,MAAM,WAAW,sKAarB,gBAAgB,KAAG,GAAG,CAAC,OA+UzB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA2BA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACV,GAAG,EACJ,MAAM,eAAe,CAAC;AAgBvB,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAS/C,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,UAAU,UAAU;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAWD,eAAO,MAAM,WAAW,0JAYrB,gBAAgB,KAAG,GAAG,CAAC,OAoUzB,CAAC"}

package/dist/ProfileView/index.js

@@ -12,7 +12,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // 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 { Profiler, useEffect, useMemo, useState } from 'react';
+import { Profiler, useEffect, useState } from 'react';
 import { Icon } from '@iconify/react';
 import cx from 'classnames';
 import { scaleLinear } from 'd3';
@@ -26,7 +26,7 @@ import { Callgraph } from '../';
 import { jsonToDot } from '../Callgraph/utils';
 import ProfileIcicleGraph from '../ProfileIcicleGraph';
 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';
@@ -38,23 +38,16 @@ function arrayEquals(a, b) {
         a.length === b.length &&
         a.every((val, index) => val === b[index]));
 }
-export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, navigateTo, onDownloadPProf, pprofDownloading, compare, }) => {
+export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, }) => {
     const { timezone } = useParcaContext();
     const { ref, dimensions } = useContainerDimensions();
     const [curPath, setCurPath] = useState([]);
-    const [rawDashboardItems = ['icicle'], setDashboardItems] = useURLState({
-        param: 'dashboard_items',
-        navigateTo,
+    const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
+        alwaysReturnArray: true,
     });
     const [graphvizLoaded, setGraphvizLoaded] = useState(false);
     const [callgraphSVG, setCallgraphSVG] = useState(undefined);
-    const [currentSearchString] = useURLState({ param: 'search_string' });
-    const dashboardItems = useMemo(() => {
-        if (rawDashboardItems !== undefined) {
-            return rawDashboardItems;
-        }
-        return ['icicle'];
-    }, [rawDashboardItems]);
+    const [currentSearchString, setSearchString] = useURLState('search_string');
     const isDarkMode = useAppSelector(selectDarkMode);
     const isMultiPanelView = dashboardItems.length > 1;
     const { perf, profileViewExternalMainActions, profileViewExternalSubActions } = useParcaContext();
@@ -107,7 +100,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                 return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
                         id: 'icicleGraph',
                         onRender: perf?.onRender,
-                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamegraphData?.arrow, graph: flamegraphData?.data, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), navigateTo: navigateTo, loading: flamegraphData.loading, setActionButtons: setActionButtons, error: flamegraphData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
+                    }, children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamegraphData?.arrow, graph: flamegraphData?.data, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), loading: flamegraphData.loading, setActionButtons: setActionButtons, error: flamegraphData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
                             ? isHalfScreen
                                 ? (dimensions.width - 40) / 2
                                 : dimensions.width - 16
@@ -119,7 +112,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                     dimensions?.width !== undefined ? (_jsx(Callgraph, { data: callgraphData.data, svgString: callgraphSVG, profileType: profileSource?.ProfileType(), width: isHalfScreen ? dimensions?.width / 2 : dimensions?.width })) : (_jsx(_Fragment, {}));
             }
             case 'table': {
-                return topTableData != null ? (_jsx(Table, { total: total, filtered: filtered, loading: topTableData.loading, data: topTableData.arrow?.record, unit: topTableData.unit, profileType: profileSource?.ProfileType(), navigateTo: navigateTo, setActionButtons: setActionButtons, currentSearchString: currentSearchString, isHalfScreen: isHalfScreen })) : (_jsx(_Fragment, {}));
+                return topTableData != null ? (_jsx(Table, { total: total, filtered: filtered, loading: topTableData.loading, data: topTableData.arrow?.record, unit: topTableData.unit, profileType: profileSource?.ProfileType(), setActionButtons: setActionButtons, currentSearchString: currentSearchString, setSearchString: setSearchString, isHalfScreen: isHalfScreen })) : (_jsx(_Fragment, {}));
             }
             case 'source': {
                 return sourceData != null ? (_jsx(SourceView, { loading: sourceData.loading, data: sourceData.data, total: total, filtered: filtered, setActionButtons: setActionButtons })) : (_jsx(_Fragment, {}));
@@ -157,13 +150,13 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
                         'items-center': hasProfileSource,
                     }), children: [_jsxs("div", { children: [hasProfileSource && (_jsxs("div", { className: "max-w-[300px]", children: [_jsx("div", { className: "text-sm font-medium capitalize", children: headerParts.length > 0 ? headerParts[0].replace(/"/g, '') : '' }), _jsx("div", { className: "text-xs", children: headerParts.length > 1
                                                 ? headerParts[headerParts.length - 1].replace(/"/g, '')
-                                                : '' })] })), profileViewExternalMainActions != null ? profileViewExternalMainActions : null] }), _jsxs("div", { className: "lg:flex flex-wrap items-center gap-2 md:justify-end hidden", children: [_jsx(FilterByFunctionButton, { navigateTo: navigateTo }), profileViewExternalSubActions != null ? profileViewExternalSubActions : null, _jsx(UserPreferences, { customButton: _jsxs(Button, { className: "gap-2", variant: "neutral", id: "h-viz-preferences", children: ["Preferences", _jsx(Icon, { icon: "pajamas:preferences", width: 20 })] }) }), profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsxs(Button, { className: "gap-2", variant: "neutral", onClick: e => {
+                                                : '' })] })), profileViewExternalMainActions != null ? profileViewExternalMainActions : null] }), _jsxs("div", { className: "lg:flex flex-wrap items-center gap-2 md:justify-end hidden", children: [_jsx(FilterByFunctionButton, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null, _jsx(UserPreferences, { customButton: _jsxs(Button, { className: "gap-2", variant: "neutral", id: "h-viz-preferences", children: ["Preferences", _jsx(Icon, { icon: "pajamas:preferences", width: 20 })] }) }), profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsxs(Button, { className: "gap-2", variant: "neutral", onClick: e => {
                                         e.preventDefault();
                                         onDownloadPProf();
-                                    }, disabled: pprofDownloading, id: "h-download-pprof", children: [pprofDownloading != null && pprofDownloading ? 'Downloading...' : 'Download pprof', _jsx(Icon, { icon: "material-symbols:download", width: 20 })] }), _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel", icon: _jsx(Icon, { icon: "material-symbols:add", width: 20 }), addView: true, disabled: isMultiPanelView || dashboardItems.length < 1, id: "h-add-panel" })] })] }), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: cx('grid w-full gap-2', isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'), ...provided.droppableProps, children: dashboardItems.map((dashboardItem, index) => {
+                                    }, disabled: pprofDownloading, id: "h-download-pprof", children: [pprofDownloading != null && pprofDownloading ? 'Downloading...' : 'Download pprof', _jsx(Icon, { icon: "material-symbols:download", width: 20 })] }), _jsx(ViewSelector, { defaultValue: "", position: -1, placeholderText: "Add panel", icon: _jsx(Icon, { icon: "material-symbols:add", width: 20 }), addView: true, disabled: isMultiPanelView || dashboardItems.length < 1, id: "h-add-panel" })] })] }), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: provided => (_jsx("div", { ref: provided.innerRef, className: cx('grid w-full gap-2', isMultiPanelView ? 'grid-cols-2' : 'grid-cols-1'), ...provided.droppableProps, children: dashboardItems.map((dashboardItem, index) => {
                                     return (_jsx(Draggable, { draggableId: dashboardItem, index: index, isDragDisabled: !isMultiPanelView, children: (provided, snapshot) => (_createElement("div", { ref: provided.innerRef, ...provided.draggableProps, key: dashboardItem, className: cx('w-full rounded p-2 shadow dark:border dark:border-gray-700 dark:bg-gray-700 min-h-96', snapshot.isDragging
                                                 ? 'bg-gray-200 dark:bg-gray-500'
                                                 : 'bg-white dark:bg-gray-700') },
-                                            _jsx(VisualizationPanel, { handleClosePanel: handleClosePanel, isMultiPanelView: isMultiPanelView, dashboardItem: dashboardItem, getDashboardItemByType: getDashboardItemByType, dragHandleProps: provided.dragHandleProps, navigateTo: navigateTo, index: index }))) }, dashboardItem));
+                                            _jsx(VisualizationPanel, { handleClosePanel: handleClosePanel, isMultiPanelView: isMultiPanelView, dashboardItem: dashboardItem, getDashboardItemByType: getDashboardItemByType, dragHandleProps: provided.dragHandleProps, index: index }))) }, dashboardItem));
                                 }) })) }) }) })] }) }));
 };

package/dist/ProfileViewWithData.d.ts

@@ -1,12 +1,10 @@
 import { QueryServiceClient } from '@parca/client';
-import { type NavigateFunction } from '@parca/utilities';
 import { ProfileSource } from './ProfileSource';
 interface ProfileViewWithDataProps {
     queryClient: QueryServiceClient;
     profileSource: ProfileSource;
-    navigateTo?: NavigateFunction;
     compare?: boolean;
 }
-export declare const ProfileViewWithData: ({ queryClient, profileSource, navigateTo, }: ProfileViewWithDataProps) => JSX.Element;
+export declare const ProfileViewWithData: ({ queryClient, profileSource, }: ProfileViewWithDataProps) => JSX.Element;
 export default ProfileViewWithData;
 //# sourceMappingURL=ProfileViewWithData.d.ts.map

package/dist/ProfileViewWithData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileViewWithData.d.ts","sourceRoot":"","sources":["../src/ProfileViewWithData.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAa,KAAK,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AAGnE,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAK9C,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,mBAAmB,gDAI7B,wBAAwB,KAAG,GAAG,CAAC,OAgNjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ProfileViewWithData.d.ts","sourceRoot":"","sources":["../src/ProfileViewWithData.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAK1E,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAK9C,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,mBAAmB,oCAG7B,wBAAwB,KAAG,GAAG,CAAC,OA+MjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/ProfileViewWithData.js

@@ -19,15 +19,20 @@ import { FIELD_FUNCTION_NAME } from './ProfileIcicleGraph/IcicleGraphArrow';
 import { ProfileView } from './ProfileView';
 import { useQuery } from './useQuery';
 import { downloadPprof } from './utils';
-export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, }) => {
+export const ProfileViewWithData = ({ queryClient, profileSource, }) => {
     const metadata = useGrpcMetadata();
-    const [dashboardItems = ['icicle']] = useURLState({ param: 'dashboard_items', navigateTo });
-    const [sourceBuildID] = useURLState({ param: 'source_buildid', navigateTo });
-    const [sourceFilename] = useURLState({ param: 'source_filename', navigateTo });
-    const [groupBy = [FIELD_FUNCTION_NAME]] = useURLState({ param: 'group_by', navigateTo });
-    const [invertStack] = useURLState({ param: 'invert_call_stack', navigateTo });
+    const [dashboardItems] = useURLState('dashboard_items', {
+        alwaysReturnArray: true,
+    });
+    const [sourceBuildID] = useURLState('source_buildid');
+    const [sourceFilename] = useURLState('source_filename');
+    const [groupBy] = useURLState('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('binary_frame_filter');
     const binaryFrameFilter = typeof binaryFrameFilterStr === 'string'
         ? binaryFrameFilterStr.split(',')
         : binaryFrameFilterStr;
@@ -40,19 +45,17 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
         width = width - 12 - 16 - 12;
         return (1 / width) * 100;
     }, []);
-    // make sure we get a string[]
-    const groupByParam = typeof groupBy === 'string' ? [groupBy] : groupBy;
     const { isLoading: flamegraphLoading, response: flamegraphResponse, error: flamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
         skip: !dashboardItems.includes('icicle'),
         nodeTrimThreshold,
-        groupBy: groupByParam,
+        groupBy,
         invertCallStack,
         binaryFrameFilter,
     });
     const { isLoading: profilemetadataLoading, response: profilemetadataResponse } = useQuery(queryClient, profileSource, QueryRequest_ReportType.PROFILE_METADATA, {
         skip: !dashboardItems.includes('icicle'),
         nodeTrimThreshold,
-        groupBy: groupByParam,
+        groupBy,
         invertCallStack,
         binaryFrameFilter: undefined,
     });
@@ -164,6 +167,6 @@ export const ProfileViewWithData = ({ queryClient, profileSource, navigateTo, })
                 ? sourceResponse?.report?.source
                 : undefined,
             error: sourceError,
-        }, profileSource: profileSource, queryClient: queryClient, navigateTo: navigateTo, onDownloadPProf: () => void downloadPProfClick(), pprofDownloading: pprofDownloading }));
+        }, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: () => void downloadPProfClick(), pprofDownloading: pprofDownloading }));
 };
 export default ProfileViewWithData;

package/dist/SourceView/index.js

@@ -22,7 +22,7 @@ import { Highlighter, profileAwareRenderer } from './Highlighter';
 import useLineRange from './useSelectedLineRange';
 const MENU_ID = 'source-view-context-menu';
 export const SourceView = React.memo(function SourceView({ data, loading, total, filtered, setActionButtons, }) {
-    const [sourceFileName] = useURLState({ param: 'source_filename', navigateTo: () => { } });
+    const [sourceFileName] = useURLState('source_filename');
     const { isDarkMode, sourceViewContextMenuItems = [] } = useParcaContext();
     const sourceCode = useMemo(() => {
         if (data === undefined) {

package/dist/SourceView/useSelectedLineRange.js

@@ -13,7 +13,7 @@
 import { useMemo } from 'react';
 import { useURLState } from '@parca/components';
 const useLineRange = () => {
-    const [sourceLine, setSourceLine] = useURLState({ param: 'source_line', navigateTo: () => { } });
+    const [sourceLine, setSourceLine] = useURLState('source_line');
     const [startLine, endLine] = useMemo(() => {
         if (sourceLine == null) {
             return [-1, -1];

package/dist/Table/index.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Vector } from 'apache-arrow';
 import { ProfileType } from '@parca/parser';
-import { type NavigateFunction } from '@parca/utilities';
 export interface DataRow {
     id: number;
     name: string;
@@ -30,9 +29,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;