@parca/profile 0.16.92 → 0.16.94

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.94](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.93...@parca/profile@0.16.94) (2023-01-12)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.93](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.92...@parca/profile@0.16.93) (2023-01-11)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.92](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.89...@parca/profile@0.16.92) (2023-01-11)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/index.js

@@ -64,8 +64,7 @@ import * as d3 from 'd3';
 import { Stage, Layer, Rect, Arrow, Text, Label } from 'react-konva';
 import { Button } from '@parca/components';
 import { jsonToDot, getCurvePoints } from './utils';
-import { useAppSelector, selectSearchNodeString } from '@parca/store';
-import { isSearchMatch } from '@parca/functions';
+import { isSearchMatch, selectQueryParam } from '@parca/functions';
 import Tooltip from '../GraphTooltip';
 import { DEFAULT_NODE_HEIGHT, GRAPH_MARGIN } from './constants';
 var Node = function (_a) {
@@ -97,18 +96,18 @@ var Edge = function (_a) {
     return (_jsx(Arrow, { points: points, bezier: true, stroke: color, strokeWidth: 3, pointerLength: 10, pointerWidth: 10, fill: color, opacity: isCurrentSearchMatch ? Number(opacity) : 0 }));
 };
 var Callgraph = function (_a) {
-    var _b, _c;
+    var _b, _c, _d;
     var graph = _a.graph, sampleUnit = _a.sampleUnit, width = _a.width, colorRange = _a.colorRange;
     var containerRef = useRef(null);
-    var _d = useState(null), graphData = _d[0], setGraphData = _d[1];
-    var _e = useState(null), hoveredNode = _e[0], setHoveredNode = _e[1];
-    var _f = useState({
+    var _e = useState(null), graphData = _e[0], setGraphData = _e[1];
+    var _f = useState(null), hoveredNode = _f[0], setHoveredNode = _f[1];
+    var _g = useState({
         scale: { x: 1, y: 1 },
         x: 0,
         y: 0,
-    }), stage = _f[0], setStage = _f[1];
+    }), stage = _g[0], setStage = _g[1];
     var rawNodes = graph.nodes, total = graph.cumulative;
-    var currentSearchString = useAppSelector(selectSearchNodeString);
+    var currentSearchString = (_b = selectQueryParam('search_string')) !== null && _b !== void 0 ? _b : '';
     var isSearchEmpty = currentSearchString === undefined || currentSearchString === '';
     useEffect(function () {
         var getDataWithPositions = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -139,7 +138,9 @@ var Callgraph = function (_a) {
     // 3. Render the graph with calculated layout in Canvas container
     if (width == null || graphData == null)
         return _jsx(_Fragment, {});
-    var _g = JSON.parse(graphData), gvizNodes = _g.objects, edges = _g.edges, boundingBox = _g.bb;
+    var _h = JSON.parse(graphData), gvizNodes = _h.objects, edges = _h.edges, boundingBox = _h.bb;
+    if (gvizNodes.length < 1)
+        return _jsx(_Fragment, { children: "Profile has no samples" });
     var graphBB = boundingBox.split(',');
     var bbWidth = Number(graphBB[2]);
     var bbHeight = Number(graphBB[3]);
@@ -217,6 +218,6 @@ var Callgraph = function (_a) {
                                     ? true
                                     : isSearchMatch(currentSearchString, node.functionName);
                                 return (_jsx(Node, { node: node, hoveredNode: hoveredNode, setHoveredNode: setHoveredNode, isCurrentSearchMatch: isCurrentSearchMatch }, "node-".concat(node._gvid)));
-                            })] })) })), _jsx(Tooltip, { hoveringNode: rawNodes.find(function (n) { return n.id === (hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.data.id); }), unit: sampleUnit, total: +total, isFixed: false, x: (_b = hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.mouseX) !== null && _b !== void 0 ? _b : 0, y: (_c = hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.mouseY) !== null && _c !== void 0 ? _c : 0, contextElement: containerRef.current }), stage.scale.x !== 1 && (_jsx(Button, __assign({ className: "w-auto !absolute top-0 right-0", variant: "neutral", onClick: resetZoom }, { children: "Reset Zoom" })))] })) })));
+                            })] })) })), _jsx(Tooltip, { hoveringNode: rawNodes.find(function (n) { return n.id === (hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.data.id); }), unit: sampleUnit, total: +total, isFixed: false, x: (_c = hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.mouseX) !== null && _c !== void 0 ? _c : 0, y: (_d = hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.mouseY) !== null && _d !== void 0 ? _d : 0, contextElement: containerRef.current }), stage.scale.x !== 1 && (_jsx(Button, __assign({ className: "w-auto !absolute top-0 left-0", variant: "neutral", onClick: resetZoom }, { children: "Reset Zoom" })))] })) })));
 };
 export default Callgraph;

package/dist/IcicleGraph.js

@@ -27,9 +27,10 @@ import { throttle } from 'lodash';
 import { pointer } from 'd3-selection';
 import { scaleLinear } from 'd3-scale';
 import GraphTooltip from './GraphTooltip';
-import { diffColor, getLastItem, isSearchMatch } from '@parca/functions';
-import { selectDarkMode, selectSearchNodeString, useAppSelector } from '@parca/store';
+import { diffColor, getLastItem, isSearchMatch, selectQueryParam } from '@parca/functions';
+import { selectDarkMode, useAppSelector } from '@parca/store';
 import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
+import { Button } from '@parca/components';
 import { hexifyAddress } from './utils';
 var RowHeight = 26;
 var icicleRectStyles = {
@@ -42,8 +43,9 @@ var fadedIcicleRectStyles = {
     opacity: '0.5',
 };
 function IcicleRect(_a) {
+    var _b;
     var x = _a.x, y = _a.y, width = _a.width, height = _a.height, color = _a.color, name = _a.name, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClick = _a.onClick, curPath = _a.curPath;
-    var currentSearchString = useAppSelector(selectSearchNodeString);
+    var currentSearchString = (_b = selectQueryParam('search_string')) !== null && _b !== void 0 ? _b : '';
     var isFaded = curPath.length > 0 && name !== curPath[curPath.length - 1];
     var styles = isFaded ? fadedIcicleRectStyles : icicleRectStyles;
     return (_jsxs("g", __assign({ transform: "translate(".concat(x + 1, ", ").concat(y + 1, ")"), style: styles, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick }, { children: [_jsx("rect", { x: 0, y: 0, width: width - 1, height: height - 1, style: {
@@ -169,5 +171,5 @@ export default function IcicleGraph(_a) {
         var rel = pointer(e);
         throttledSetPos([rel[0], rel[1]]);
     };
-    return (_jsxs("div", __assign({ onMouseLeave: function () { return setHoveringNode(undefined); } }, { children: [_jsx(GraphTooltip, { unit: sampleUnit, total: total, x: pos[0], y: pos[1], hoveringNode: hoveringNode, contextElement: svg.current, strings: graph.stringTable, mappings: graph.mapping, locations: graph.locations, functions: graph.function }), _jsx("svg", __assign({ className: "font-robotoMono", width: width, height: height, onMouseMove: onMouseMove, preserveAspectRatio: "xMinYMid", ref: svg }, { children: _jsx("g", __assign({ ref: ref }, { children: _jsx(MemoizedIcicleGraphRootNode, { node: graph.root, strings: graph.stringTable, mappings: graph.mapping, locations: graph.locations, functions: graph.function, setHoveringNode: setHoveringNode, curPath: curPath, setCurPath: setCurPath, xScale: xScale, total: total, totalWidth: width }) })) }))] })));
+    return (_jsxs("div", __assign({ onMouseLeave: function () { return setHoveringNode(undefined); } }, { children: [_jsx(GraphTooltip, { unit: sampleUnit, total: total, x: pos[0], y: pos[1], hoveringNode: hoveringNode, contextElement: svg.current, strings: graph.stringTable, mappings: graph.mapping, locations: graph.locations, functions: graph.function }), _jsx("div", __assign({ className: "w-full flex justify-start" }, { children: _jsx(Button, __assign({ color: "neutral", onClick: function () { return setCurPath([]); }, disabled: curPath.length === 0, className: "w-auto", variant: "neutral" }, { children: "Reset zoom" })) })), _jsx("svg", __assign({ className: "font-robotoMono", width: width, height: height, onMouseMove: onMouseMove, preserveAspectRatio: "xMinYMid", ref: svg }, { children: _jsx("g", __assign({ ref: ref }, { children: _jsx(MemoizedIcicleGraphRootNode, { node: graph.root, strings: graph.stringTable, mappings: graph.mapping, locations: graph.locations, functions: graph.function, setHoveringNode: setHoveringNode, curPath: curPath, setCurPath: setCurPath, xScale: xScale, total: total, totalWidth: width }) })) }))] })));
 }

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { ProfileSelection, NavigateFunction } from '..';
+import { NavigateFunction } from '@parca/functions';
 import { QueryServiceClient } from '@parca/client';
+import { ProfileSelection } from '..';
 import { QuerySelection } from '../ProfileSelector';
 interface ProfileExplorerCompareProps {
     queryClient: QueryServiceClient;

package/dist/ProfileExplorer/ProfileExplorerCompare.js

@@ -10,20 +10,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// 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 { ProfileDiffSource, ProfileViewWithData } from '..';
 import { Query } from '@parca/parser';
+import { ProfileDiffSource, ProfileViewWithData } from '..';
 import ProfileSelector from '../ProfileSelector';
 var ProfileExplorerCompare = function (_a) {
     var queryClient = _a.queryClient, queryA = _a.queryA, queryB = _a.queryB, profileA = _a.profileA, profileB = _a.profileB, selectQueryA = _a.selectQueryA, selectQueryB = _a.selectQueryB, selectProfileA = _a.selectProfileA, selectProfileB = _a.selectProfileB, closeProfile = _a.closeProfile, navigateTo = _a.navigateTo;

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
+import { NavigateFunction } from '@parca/functions';
 import { QueryServiceClient } from '@parca/client';
-import { ProfileSelection, NavigateFunction } from '..';
+import { ProfileSelection } from '..';
 import { QuerySelection } from '../ProfileSelector';
 interface ProfileExplorerSingleProps {
     queryClient: QueryServiceClient;

package/dist/ProfileExplorer/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { NavigateFunction } from '..';
 import { QueryServiceClient } from '@parca/client';
+import { NavigateFunction } from '@parca/functions';
 interface ProfileExplorerProps {
     queryClient: QueryServiceClient;
     queryParams: any;

package/dist/ProfileExplorer/index.js

@@ -13,14 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ProfileSelectionFromParams, SuffixParams } from '..';
 import ProfileExplorerSingle from './ProfileExplorerSingle';
 import ProfileExplorerCompare from './ProfileExplorerCompare';
-import { useAppSelector, useAppDispatch, setCompare, selectCompareMode, setSearchNodeString, store, selectFilterByFunction, } from '@parca/store';
-import { Provider, batch } from 'react-redux';
+import { store } from '@parca/store';
+import { Provider } from 'react-redux';
 import { DateTimeRange } from '@parca/components';
-import { useEffect } from 'react';
 var getExpressionAsAString = function (expression) {
     var x = Array.isArray(expression) ? expression.join() : expression;
     return x;
 };
+var DEFAULT_DASHBOARD_ITEMS = ['icicle'];
 /* eslint-disable @typescript-eslint/naming-convention */
 var sanitizeDateRange = function (time_selection_a, from_a, to_a) {
     var range = DateTimeRange.fromRangeKey(time_selection_a);
@@ -49,12 +49,9 @@ var swapQueryParameters = function (o) {
 var ProfileExplorerApp = function (_a) {
     var _b, _c;
     var queryClient = _a.queryClient, queryParams = _a.queryParams, navigateTo = _a.navigateTo;
-    var dispatch = useAppDispatch();
-    var compareMode = useAppSelector(selectCompareMode);
     /* eslint-disable @typescript-eslint/naming-convention */
-    var from_a = queryParams.from_a, to_a = queryParams.to_a, merge_a = queryParams.merge_a, profile_name_a = queryParams.profile_name_a, labels_a = queryParams.labels_a, time_a = queryParams.time_a, time_selection_a = queryParams.time_selection_a, compare_a = queryParams.compare_a, from_b = queryParams.from_b, to_b = queryParams.to_b, merge_b = queryParams.merge_b, profile_name_b = queryParams.profile_name_b, labels_b = queryParams.labels_b, time_b = queryParams.time_b, time_selection_b = queryParams.time_selection_b, compare_b = queryParams.compare_b;
+    var from_a = queryParams.from_a, to_a = queryParams.to_a, merge_a = queryParams.merge_a, profile_name_a = queryParams.profile_name_a, labels_a = queryParams.labels_a, time_a = queryParams.time_a, time_selection_a = queryParams.time_selection_a, compare_a = queryParams.compare_a, from_b = queryParams.from_b, to_b = queryParams.to_b, merge_b = queryParams.merge_b, profile_name_b = queryParams.profile_name_b, labels_b = queryParams.labels_b, time_b = queryParams.time_b, time_selection_b = queryParams.time_selection_b, compare_b = queryParams.compare_b, filter_by_function = queryParams.filter_by_function, dashboard_items = queryParams.dashboard_items;
     /* eslint-enable @typescript-eslint/naming-convention */
-    var filterByFunction = useAppSelector(selectFilterByFunction);
     var sanitizedRange = sanitizeDateRange(time_selection_a, from_a, to_a);
     time_selection_a = sanitizedRange.time_selection_a;
     from_a = sanitizedRange.from_a;
@@ -67,18 +64,10 @@ var ProfileExplorerApp = function (_a) {
         queryParams.expression_a = expression_a;
     if (((_c = queryParams === null || queryParams === void 0 ? void 0 : queryParams.expression_b) !== null && _c !== void 0 ? _c : '') !== '')
         queryParams.expression_b = expression_b;
-    useEffect(function () {
-        if (compare_a === 'true' && compare_b === 'true') {
-            dispatch(setCompare(true));
-        }
-        else {
-            dispatch(setCompare(false));
-        }
-    }, [dispatch, compare_a, compare_b]);
     var selectProfile = function (p, suffix) {
         queryParams.expression_a = encodeURIComponent(queryParams.expression_a);
         queryParams.expression_b = encodeURIComponent(queryParams.expression_b);
-        return navigateTo('/', __assign(__assign({}, queryParams), SuffixParams(p.HistoryParams(), suffix)));
+        return navigateTo('/', __assign(__assign(__assign({}, queryParams), SuffixParams(p.HistoryParams(), suffix)), { dashboard_items: dashboard_items !== null && dashboard_items !== void 0 ? dashboard_items : DEFAULT_DASHBOARD_ITEMS }));
     };
     var selectProfileA = function (p) {
         return selectProfile(p, '_a');
@@ -96,7 +85,7 @@ var ProfileExplorerApp = function (_a) {
             profile_name: profile_name_a,
             timeSelection: time_selection_a,
         };
-        var profile_1 = ProfileSelectionFromParams(expression_a, from_a, to_a, merge_a, labels_a, profile_name_a, time_a, filterByFunction);
+        var profile_1 = ProfileSelectionFromParams(expression_a, from_a, to_a, merge_a, labels_a, profile_name_a, time_a, filter_by_function);
         var selectQuery = function (q) {
             return navigateTo('/', __assign(__assign({}, filterSuffix(queryParams, '_a')), {
                 expression_a: encodeURIComponent(q.expression),
@@ -104,12 +93,12 @@ var ProfileExplorerApp = function (_a) {
                 to_a: q.to.toString(),
                 merge_a: q.merge,
                 time_selection_a: q.timeSelection,
-                currentProfileView: 'icicle',
+                dashboard_items: dashboard_items !== null && dashboard_items !== void 0 ? dashboard_items : DEFAULT_DASHBOARD_ITEMS,
             }));
         };
         var selectProfile_1 = function (p) {
             queryParams.expression_a = encodeURIComponent(queryParams.expression_a);
-            return navigateTo('/', __assign(__assign({}, queryParams), SuffixParams(p.HistoryParams(), '_a')));
+            return navigateTo('/', __assign(__assign(__assign({}, queryParams), SuffixParams(p.HistoryParams(), '_a')), { dashboard_items: dashboard_items !== null && dashboard_items !== void 0 ? dashboard_items : DEFAULT_DASHBOARD_ITEMS }));
         };
         var compareProfile = function () {
             var compareQuery = {
@@ -131,14 +120,7 @@ var ProfileExplorerApp = function (_a) {
             if (profile_1 != null) {
                 compareQuery = __assign(__assign({}, SuffixParams(profile_1.HistoryParams(), '_a')), compareQuery);
             }
-            compareQuery = __assign(__assign({}, compareQuery), {
-                currentProfileView: 'icicle',
-            });
-            batch(function () {
-                dispatch(setCompare(!compareMode));
-                dispatch(setSearchNodeString(undefined));
-            });
-            void navigateTo('/', compareQuery);
+            void navigateTo('/', __assign(__assign({}, compareQuery), { search_string: '', dashboard_items: dashboard_items !== null && dashboard_items !== void 0 ? dashboard_items : DEFAULT_DASHBOARD_ITEMS }));
         };
         return (_jsx(ProfileExplorerSingle, { queryClient: queryClient, query: query_1, profile: profile_1, selectQuery: selectQuery, selectProfile: selectProfile_1, compareProfile: compareProfile, navigateTo: navigateTo }));
     }
@@ -169,7 +151,8 @@ var ProfileExplorerApp = function (_a) {
             to_a: q.to.toString(),
             merge_a: q.merge,
             time_selection_a: q.timeSelection,
-            filterByFunction: filterByFunction,
+            filter_by_function: filter_by_function !== null && filter_by_function !== void 0 ? filter_by_function : '',
+            dashboard_items: dashboard_items !== null && dashboard_items !== void 0 ? dashboard_items : DEFAULT_DASHBOARD_ITEMS,
         }));
     };
     var selectQueryB = function (q) {
@@ -181,7 +164,8 @@ var ProfileExplorerApp = function (_a) {
             to_b: q.to.toString(),
             merge_b: q.merge,
             time_selection_b: q.timeSelection,
-            filterByFunction: filterByFunction,
+            filter_by_function: filter_by_function !== null && filter_by_function !== void 0 ? filter_by_function : '',
+            dashboard_items: dashboard_items !== null && dashboard_items !== void 0 ? dashboard_items : DEFAULT_DASHBOARD_ITEMS,
         }));
     };
     var closeProfile = function (card) {
@@ -189,12 +173,10 @@ var ProfileExplorerApp = function (_a) {
         if (card === 'A') {
             newQueryParameters = swapQueryParameters(queryParams);
         }
-        batch(function () {
-            dispatch(setCompare(!compareMode));
-            dispatch(setSearchNodeString(undefined));
-        });
         return navigateTo('/', __assign(__assign({}, filterSuffix(newQueryParameters, '_b')), {
             compare_a: 'false',
+            compare_b: 'false',
+            search_string: '',
         }));
     };
     return (_jsx(ProfileExplorerCompare, { queryClient: queryClient, queryA: queryA, queryB: queryB, profileA: profileA, profileB: profileB, selectQueryA: selectQueryA, selectQueryB: selectQueryB, selectProfileA: selectProfileA, selectProfileB: selectProfileB, closeProfile: closeProfile, navigateTo: navigateTo }));

package/dist/ProfileIcicleGraph/index.js

@@ -10,15 +10,15 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAppSelector, selectCompareMode } from '@parca/store';
 import { useContainerDimensions } from '@parca/dynamicsize';
 import DiffLegend from '../components/DiffLegend';
 import IcicleGraph from '../IcicleGraph';
+import { selectQueryParam } from '@parca/functions';
 import { useEffect, useMemo } from 'react';
 var numberFormatter = new Intl.NumberFormat('en-US');
 var ProfileIcicleGraph = function (_a) {
     var graph = _a.graph, curPath = _a.curPath, setNewCurPath = _a.setNewCurPath, sampleUnit = _a.sampleUnit, onContainerResize = _a.onContainerResize;
-    var compareMode = useAppSelector(selectCompareMode);
+    var compareMode = Boolean(selectQueryParam('compare_a')) && Boolean(selectQueryParam('compare_b'));
     var _b = useContainerDimensions(), ref = _b.ref, dimensions = _b.dimensions;
     useEffect(function () {
         if (dimensions === undefined)

package/dist/ProfileView/FilterByFunctionButton.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-declare const FilterByFunctionButton: () => JSX.Element;
+import { NavigateFunction } from '@parca/functions';
+declare const FilterByFunctionButton: ({ navigateTo, }: {
+    navigateTo: NavigateFunction | undefined;
+}) => JSX.Element;
 export default FilterByFunctionButton;

package/dist/ProfileView/FilterByFunctionButton.js

@@ -12,22 +12,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Input } from '@parca/components';
-import { selectFilterByFunction, setFilterByFunction, useAppDispatch, useAppSelector, } from '@parca/store';
+import { useURLState } from '@parca/functions';
 import { Icon } from '@iconify/react';
 import { useCallback, useMemo, useState } from 'react';
-var FilterByFunctionButton = function () {
-    var dispatch = useAppDispatch();
-    var storeVal = useAppSelector(selectFilterByFunction);
-    var _a = useState(storeVal !== null && storeVal !== void 0 ? storeVal : ''), value = _a[0], setValue = _a[1];
+var FilterByFunctionButton = function (_a) {
+    var navigateTo = _a.navigateTo;
+    var _b = useURLState({ param: 'filter_by_function', navigateTo: navigateTo }), storeValue = _b[0], setStoreValue = _b[1];
+    var _c = useState(storeValue), localValue = _c[0], setLocalValue = _c[1];
     var isClearAction = useMemo(function () {
-        return value === storeVal && value != null;
-    }, [value, storeVal]);
+        return localValue === storeValue && localValue != null && localValue !== '';
+    }, [localValue, storeValue]);
     var onAction = useCallback(function () {
-        dispatch(setFilterByFunction(isClearAction ? undefined : value));
         if (isClearAction) {
-            setValue('');
+            setLocalValue('');
+            setStoreValue('');
         }
-    }, [dispatch, isClearAction, value]);
-    return (_jsx(Input, { placeholder: "Filter by function", className: "text-sm", onAction: onAction, onChange: function (e) { return setValue(e.target.value); }, value: value, onBlur: function () { return setValue(storeVal !== null && storeVal !== void 0 ? storeVal : ''); }, actionIcon: isClearAction ? _jsx(Icon, { icon: "ep:circle-close" }) : _jsx(Icon, { icon: "ep:arrow-right" }) }));
+        else {
+            setStoreValue(localValue);
+        }
+    }, [localValue, isClearAction, setStoreValue]);
+    return (_jsx(Input, { placeholder: "Filter by function", className: "text-sm", onAction: onAction, onChange: function (e) { return setLocalValue(e.target.value); }, value: localValue !== null && localValue !== void 0 ? localValue : '', onBlur: function () { return setLocalValue(storeValue); }, actionIcon: isClearAction ? _jsx(Icon, { icon: "ep:circle-close" }) : _jsx(Icon, { icon: "ep:arrow-right" }) }));
 };
 export default FilterByFunctionButton;

package/dist/ProfileView/ViewSelector.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { NavigateFunction } from '@parca/functions';
+interface Props {
+    position: number;
+    defaultValue: string;
+    navigateTo?: NavigateFunction;
+    placeholderText?: string;
+    primary?: boolean;
+    addView?: boolean;
+    disabled?: boolean;
+}
+declare const ViewSelector: ({ defaultValue, navigateTo, position, placeholderText, primary, addView, disabled, }: Props) => JSX.Element;
+export default ViewSelector;

package/dist/ProfileView/ViewSelector.js

@@ -0,0 +1,80 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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 { Select } from '@parca/components';
+import { useURLState } from '@parca/functions';
+import useUIFeatureFlag from '@parca/functions/useUIFeatureFlag';
+var ViewSelector = function (_a) {
+    var defaultValue = _a.defaultValue, navigateTo = _a.navigateTo, position = _a.position, placeholderText = _a.placeholderText, _b = _a.primary, primary = _b === void 0 ? false : _b, _c = _a.addView, addView = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
+    var callgraphEnabled = useUIFeatureFlag('callgraph')[0];
+    var _e = useURLState({
+        param: 'dashboard_items',
+        navigateTo: navigateTo,
+    }), dashboardItems = _e[0], setDashboardItems = _e[1];
+    var allItems = [
+        { key: 'table', canBeSelected: !dashboardItems.includes('table') },
+        { key: 'icicle', canBeSelected: !dashboardItems.includes('icicle') },
+    ];
+    if (callgraphEnabled) {
+        allItems.push({
+            key: 'callgraph',
+            canBeSelected: !dashboardItems.includes('callgraph'),
+        });
+    }
+    var getOption = function (_a) {
+        var key = _a.key, supportingText = _a.supportingText;
+        var capitalizeFirstLetter = function (string) {
+            return "".concat(string.charAt(0).toUpperCase()).concat(string.slice(1));
+        };
+        var title = capitalizeFirstLetter(key);
+        return {
+            active: _jsx(_Fragment, { children: title }),
+            expanded: (_jsxs(_Fragment, { children: [_jsx("span", { children: title }), supportingText !== null && _jsx("span", __assign({ className: "text-xs" }, { children: supportingText }))] })),
+        };
+    };
+    var items = allItems.map(function (item) { return ({
+        key: item.key,
+        disabled: !item.canBeSelected,
+        element: getOption(item),
+    }); });
+    var onSelection = function (value) {
+        if (addView) {
+            setDashboardItems([dashboardItems[0], value]);
+            return;
+        }
+        var isOnlyChart = dashboardItems.length === 1;
+        if (isOnlyChart) {
+            setDashboardItems([value]);
+            return;
+        }
+        // Note: this will need to be updated if we ever have more more than 2 panels
+        var isFirstChart = position === 0;
+        var newDashboardItems = isFirstChart
+            ? [value, dashboardItems[1]]
+            : [dashboardItems[0], value];
+        setDashboardItems(newDashboardItems);
+    };
+    return (_jsx(Select, { items: items, selectedKey: defaultValue, onSelection: onSelection, placeholder: placeholderText !== null && placeholderText !== void 0 ? placeholderText : 'Select view type...', primary: primary, disabled: disabled }));
+};
+export default ViewSelector;

package/dist/ProfileView/index.d.ts

@@ -3,7 +3,9 @@ import { QueryServiceClient, Flamegraph, Top, Callgraph as CallgraphType } from
 import { ResizeHandler } from '../ProfileIcicleGraph';
 import { ProfileSource } from '../ProfileSource';
 import '../ProfileView.styles.css';
-type NavigateFunction = (path: string, queryParams: any) => void;
+type NavigateFunction = (path: string, queryParams: any, options?: {
+    replace?: boolean;
+}) => void;
 export interface FlamegraphData {
     loading: boolean;
     data?: Flamegraph;
@@ -19,17 +21,11 @@ interface CallgraphData {
     data?: CallgraphType;
     error?: any;
 }
-export type VisualizationType = 'icicle' | 'table' | 'callgraph' | 'both';
-export interface ProfileVisState {
-    currentView: VisualizationType;
-    setCurrentView: (view: VisualizationType) => void;
-}
 export interface ProfileViewProps {
     flamegraphData?: FlamegraphData;
     topTableData?: TopTableData;
     callgraphData?: CallgraphData;
     sampleUnit: string;
-    profileVisState: ProfileVisState;
     profileSource?: ProfileSource;
     queryClient?: QueryServiceClient;
     navigateTo?: NavigateFunction;
@@ -37,6 +33,5 @@ export interface ProfileViewProps {
     onDownloadPProf: () => void;
     onFlamegraphContainerResize?: ResizeHandler;
 }
-export declare const useProfileVisState: () => ProfileVisState;
-export declare const ProfileView: ({ flamegraphData, topTableData, callgraphData, sampleUnit, profileSource, queryClient, navigateTo, profileVisState, onDownloadPProf, onFlamegraphContainerResize, }: ProfileViewProps) => JSX.Element;
+export declare const ProfileView: ({ flamegraphData, topTableData, callgraphData, sampleUnit, profileSource, queryClient, navigateTo, onDownloadPProf, onFlamegraphContainerResize, }: ProfileViewProps) => JSX.Element;
 export {};