@parca/profile 0.16.77 → 0.16.79

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.79](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.78...@parca/profile@0.16.79) (2022-12-07)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.78](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.77...@parca/profile@0.16.78) (2022-12-06)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.77](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.76...@parca/profile@0.16.77) (2022-11-29)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Callgraph as CallgraphType } from '@parca/client';
 export interface Props {
     graph: CallgraphType;

package/dist/GraphTooltip/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CallgraphNode, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode } from '@parca/client';
 import { Function, Location, Mapping } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface GraphTooltipProps {

package/dist/GraphTooltip/index.js

@@ -107,14 +107,13 @@ var TooltipMetaInfo = function (_a) {
         }
     }
     var getTextForFile = function (hoveringNode) {
-        var _a, _b, _c, _d;
-        if (hoveringNode.meta === undefined)
+        var _a, _b, _c, _d, _e;
+        if (((_a = hoveringNode.meta) === null || _a === void 0 ? void 0 : _a.function) == null)
             return '<unknown>';
-        // @ts-expect-error
-        return "".concat(hoveringNode.meta.function.filename, " ").concat(((_a = hoveringNode.meta.line) === null || _a === void 0 ? void 0 : _a.line) !== undefined && ((_b = hoveringNode.meta.line) === null || _b === void 0 ? void 0 : _b.line) !== '0'
+        return "".concat(hoveringNode.meta.function.filename, " ").concat(((_b = hoveringNode.meta.line) === null || _b === void 0 ? void 0 : _b.line) !== undefined && ((_c = hoveringNode.meta.line) === null || _c === void 0 ? void 0 : _c.line) !== '0'
             ? " +".concat(hoveringNode.meta.line.line.toString())
-            : "".concat(((_c = hoveringNode.meta.function) === null || _c === void 0 ? void 0 : _c.startLine) !== undefined &&
-                ((_d = hoveringNode.meta.function) === null || _d === void 0 ? void 0 : _d.startLine) !== '0'
+            : "".concat(((_d = hoveringNode.meta.function) === null || _d === void 0 ? void 0 : _d.startLine) !== undefined &&
+                ((_e = hoveringNode.meta.function) === null || _e === void 0 ? void 0 : _e.startLine) !== '0'
                 ? " +".concat(hoveringNode.meta.function.startLine)
                 : ''));
     };

package/dist/IcicleGraph.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Flamegraph, FlamegraphNode, FlamegraphRootNode } from '@parca/client';
 import { Mapping, Function, Location } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface IcicleGraphProps {

package/dist/MatchersInput/SuggestionItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Props {
     isHighlighted: boolean;
     onHighlight: () => void;

package/dist/MatchersInput/SuggestionsList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare class Suggestion {
     type: string;
     typeahead: string;

package/dist/MatchersInput/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Query } from '@parca/parser';
 import { LabelsResponse, QueryServiceClient } from '@parca/client';
 interface MatchersInputProps {

package/dist/MetricsCircle/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface MetricsCircleProps {
     cx: number;
     cy: number;

package/dist/MetricsGraph/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SingleProfileSelection } from '..';
 import { MetricsSeries as MetricsSeriesPb, Label } from '@parca/client';
 import { DateTimeRange } from '@parca/components';

package/dist/MetricsSeries/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as d3 from 'd3';
 interface MetricsSeriesProps {
     data: any;

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ProfileSelection, NavigateFunction } from '..';
 import { QueryServiceClient } from '@parca/client';
 import { QuerySelection } from '../ProfileSelector';

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSelection, NavigateFunction } from '..';
 import { QuerySelection } from '../ProfileSelector';

package/dist/ProfileExplorer/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NavigateFunction } from '..';
 import { QueryServiceClient } from '@parca/client';
 interface ProfileExplorerProps {

package/dist/{ProfileIcicleGraph.d.ts → ProfileIcicleGraph/index.d.ts}

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Flamegraph } from '@parca/client';
 interface ProfileIcicleGraphProps {
     width?: number;

package/dist/{ProfileIcicleGraph.js → ProfileIcicleGraph/index.js}

@@ -12,8 +12,8 @@ var __assign = (this && this.__assign) || function () {
 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 DiffLegend from '../components/DiffLegend';
+import IcicleGraph from '../IcicleGraph';
 var ProfileIcicleGraph = function (_a) {
     var graph = _a.graph, curPath = _a.curPath, setNewCurPath = _a.setNewCurPath, sampleUnit = _a.sampleUnit;
     var compareMode = useAppSelector(selectCompareMode);

package/dist/ProfileMetricsGraph/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ProfileSelection } from '..';
 import { QueryServiceClient, QueryRangeResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';

package/dist/ProfileSelector/CompareButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const CompareButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/MergeButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const MergeButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient, ProfileTypesResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { ProfileSelection } from '..';

package/dist/ProfileSource.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ProfileType } from '@parca/parser';
 import { Label, QueryRequest, ProfileDiffSelection } from '@parca/client';
 export interface ProfileSource {

package/dist/ProfileTypeSelector/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ProfileType, ProfileTypesResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 interface WellKnownProfile {

package/dist/ProfileView/FilterByFunctionButton.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const FilterByFunctionButton: () => JSX.Element;
 export default FilterByFunctionButton;

package/dist/ProfileView/FilterByFunctionButton.js

@@ -13,14 +13,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // limitations under the License.
 import { Input } from '@parca/components';
 import { selectFilterByFunction, setFilterByFunction, useAppDispatch, useAppSelector, } from '@parca/store';
-import { useState } from 'react';
+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 onAction = function () {
-        dispatch(setFilterByFunction(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 : ''); } }));
+    var isClearAction = useMemo(function () {
+        return value === storeVal && value != null;
+    }, [value, storeVal]);
+    var onAction = useCallback(function () {
+        dispatch(setFilterByFunction(isClearAction ? undefined : value));
+        if (isClearAction) {
+            setValue('');
+        }
+    }, [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" }) }));
 };
 export default FilterByFunctionButton;

package/dist/ProfileView/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient, Flamegraph, Top, Callgraph as CallgraphType } from '@parca/client';
 import { ProfileSource } from '../ProfileSource';
 import '../ProfileView.styles.css';

package/dist/ProfileView/index.js

@@ -26,9 +26,9 @@ import { Profiler, useEffect, useMemo, useState } from 'react';
 import { scaleLinear } from 'd3';
 import { getNewSpanColor, parseParams } from '@parca/functions';
 import useUIFeatureFlag from '@parca/functions/useUIFeatureFlag';
-import { Button, Card, SearchNodes, useParcaContext } from '@parca/components';
+import { Button, Card, useParcaContext } from '@parca/components';
 import { useContainerDimensions } from '@parca/dynamicsize';
-import { useAppSelector, selectDarkMode, selectSearchNodeString } from '@parca/store';
+import { useAppSelector, selectDarkMode, selectSearchNodeString, selectFilterByFunction, useAppDispatch, setSearchNodeString, } from '@parca/store';
 import { Callgraph } from '../';
 import ProfileShareButton from '../components/ProfileShareButton';
 import FilterByFunctionButton from './FilterByFunctionButton';
@@ -58,13 +58,15 @@ export var useProfileVisState = function () {
 };
 export var ProfileView = function (_a) {
     var flamegraphData = _a.flamegraphData, topTableData = _a.topTableData, callgraphData = _a.callgraphData, sampleUnit = _a.sampleUnit, profileSource = _a.profileSource, queryClient = _a.queryClient, navigateTo = _a.navigateTo, profileVisState = _a.profileVisState, onDownloadPProf = _a.onDownloadPProf;
+    var dispatch = useAppDispatch();
     var _b = useContainerDimensions(), ref = _b.ref, dimensions = _b.dimensions;
     var _c = useState([]), curPath = _c[0], setCurPath = _c[1];
     var currentView = profileVisState.currentView, setCurrentView = profileVisState.setCurrentView;
     var isDarkMode = useAppSelector(selectDarkMode);
     var currentSearchString = useAppSelector(selectSearchNodeString);
+    var filterByFunctionString = useAppSelector(selectFilterByFunction);
     var callgraphEnabled = useUIFeatureFlag('callgraph')[0];
-    var filterByFunctionEnabled = useUIFeatureFlag('filterByFunction')[0];
+    var highlightAfterFilteringEnabled = useUIFeatureFlag('highlightAfterFiltering')[0];
     var _d = useParcaContext(), loader = _d.loader, perf = _d.perf;
     useEffect(function () {
         // Reset the current path when the profile source changes
@@ -85,6 +87,27 @@ export var ProfileView = function (_a) {
         }
         return false;
     }, [currentView, callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.loading, flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.loading, topTableData === null || topTableData === void 0 ? void 0 : topTableData.loading]);
+    useEffect(function () {
+        if (!highlightAfterFilteringEnabled) {
+            if (currentSearchString !== undefined && currentSearchString !== '') {
+                dispatch(setSearchNodeString(''));
+            }
+            return;
+        }
+        if (isLoading) {
+            return;
+        }
+        if (filterByFunctionString === currentSearchString) {
+            return;
+        }
+        dispatch(setSearchNodeString(filterByFunctionString));
+    }, [
+        isLoading,
+        filterByFunctionString,
+        dispatch,
+        highlightAfterFilteringEnabled,
+        currentSearchString,
+    ]);
     var isLoaderVisible = useDelayedLoader(isLoading);
     if (isLoaderVisible) {
         return _jsx(_Fragment, { children: loader });
@@ -117,5 +140,5 @@ export var ProfileView = function (_a) {
     return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "py-3" }, { children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", __assign({ className: "flex py-3 w-full" }, { children: [_jsxs("div", __assign({ className: "w-2/5 flex space-x-4" }, { children: [_jsxs("div", __assign({ className: "flex space-x-1" }, { children: [profileSource != null && queryClient != null ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsx(Button, __assign({ color: "neutral", onClick: function (e) {
                                                         e.preventDefault();
                                                         onDownloadPProf();
-                                                    } }, { children: "Download pprof" }))] })), filterByFunctionEnabled ? _jsx(FilterByFunctionButton, {}) : _jsx(SearchNodes, {})] })), _jsxs("div", __assign({ className: "flex ml-auto gap-2" }, { children: [filterByFunctionEnabled ? _jsx(SearchNodes, {}) : null, _jsx(Button, __assign({ color: "neutral", onClick: resetIcicleGraph, disabled: curPath.length === 0, className: "whitespace-nowrap text-ellipsis" }, { children: "Reset View" })), callgraphEnabled ? (_jsx(Button, __assign({ variant: "".concat(currentView === 'callgraph' ? 'primary' : 'neutral'), onClick: function () { return switchProfileView('callgraph'); }, className: "whitespace-nowrap text-ellipsis" }, { children: "Callgraph" }))) : null, _jsxs("div", __assign({ className: "flex" }, { children: [_jsx(Button, __assign({ variant: "".concat(currentView === 'table' ? 'primary' : 'neutral'), className: "items-center rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('table'); } }, { children: "Table" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'both' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons text-ellipsis", onClick: function () { return switchProfileView('both'); } }, { children: "Both" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'icicle' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('icicle'); } }, { children: "Icicle Graph" }))] }))] }))] })), _jsxs("div", __assign({ ref: ref, className: "flex space-x-4 justify-between w-full" }, { children: [currentView === 'icicle' && (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(Profiler, __assign({ id: "icicleGraph", onRender: perf === null || perf === void 0 ? void 0 : perf.onRender }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit }) })) }))), currentView === 'callgraph' && (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined && (_jsx(Callgraph, { graph: callgraphData.data, sampleUnit: sampleUnit, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, colorRange: colorRange })) }))), currentView === 'table' && topTableData != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(TopTable, { data: topTableData.data, sampleUnit: sampleUnit }) }))), currentView === 'both' && (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "w-1/2" }, { children: _jsx(TopTable, { data: topTableData === null || topTableData === void 0 ? void 0 : topTableData.data, sampleUnit: sampleUnit }) })), _jsx("div", __assign({ className: "w-1/2" }, { children: flamegraphData != null && (_jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit })) }))] }))] }))] }) }) })) }));
+                                                    } }, { children: "Download pprof" }))] })), _jsx(FilterByFunctionButton, {})] })), _jsxs("div", __assign({ className: "flex ml-auto gap-2" }, { children: [_jsx(Button, __assign({ color: "neutral", onClick: resetIcicleGraph, disabled: curPath.length === 0, className: "whitespace-nowrap text-ellipsis" }, { children: "Reset View" })), callgraphEnabled ? (_jsx(Button, __assign({ variant: "".concat(currentView === 'callgraph' ? 'primary' : 'neutral'), onClick: function () { return switchProfileView('callgraph'); }, className: "whitespace-nowrap text-ellipsis" }, { children: "Callgraph" }))) : null, _jsxs("div", __assign({ className: "flex" }, { children: [_jsx(Button, __assign({ variant: "".concat(currentView === 'table' ? 'primary' : 'neutral'), className: "items-center rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('table'); } }, { children: "Table" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'both' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons text-ellipsis", onClick: function () { return switchProfileView('both'); } }, { children: "Both" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'icicle' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('icicle'); } }, { children: "Icicle Graph" }))] }))] }))] })), _jsxs("div", __assign({ ref: ref, className: "flex space-x-4 justify-between w-full" }, { children: [currentView === 'icicle' && (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(Profiler, __assign({ id: "icicleGraph", onRender: perf === null || perf === void 0 ? void 0 : perf.onRender }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit }) })) }))), currentView === 'callgraph' && (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined && (_jsx(Callgraph, { graph: callgraphData.data, sampleUnit: sampleUnit, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, colorRange: colorRange })) }))), currentView === 'table' && topTableData != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(TopTable, { data: topTableData.data, sampleUnit: sampleUnit }) }))), currentView === 'both' && (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "w-1/2" }, { children: _jsx(TopTable, { data: topTableData === null || topTableData === void 0 ? void 0 : topTableData.data, sampleUnit: sampleUnit }) })), _jsx("div", __assign({ className: "w-1/2" }, { children: flamegraphData != null && (_jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit })) }))] }))] }))] }) }) })) }));
 };

package/dist/ProfileViewWithData.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSource } from './ProfileSource';
 export type NavigateFunction = (path: string, queryParams: any) => void;

package/dist/TopTable.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TopNodeMeta, Top } from '@parca/client';
 import './TopTable.styles.css';
 interface TopTableProps {

package/dist/components/DiffLegend.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const DiffLegend: () => JSX.Element;
 export default DiffLegend;

package/dist/components/ProfileShareButton/ResultBox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Props {
     value: string;
     className?: string;

package/dist/components/ProfileShareButton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryRequest, QueryServiceClient } from '@parca/client';
 interface Props {
     queryRequest: QueryRequest;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.77",
+  "version": "0.16.79",
   "description": "Profile viewing libraries",
   "dependencies": {
-    "@parca/client": "^0.16.56",
-    "@parca/components": "^0.16.67",
+    "@parca/client": "^0.16.57",
+    "@parca/components": "^0.16.69",
     "@parca/dynamicsize": "^0.16.51",
     "@parca/functions": "^0.16.53",
     "@parca/parser": "^0.16.51",
@@ -42,5 +42,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "32660c63e7b5d189c3e29abb0321d8e49bbcbc28"
+  "gitHead": "0dd3c9d9932a54c9d2ee031610f1c4645b9038dc"
 }

package/src/GraphTooltip/index.tsx

@@ -123,9 +123,8 @@ const TooltipMetaInfo = ({
   }
 
   const getTextForFile = (hoveringNode: FlamegraphNode): string => {
-    if (hoveringNode.meta === undefined) return '<unknown>';
+    if (hoveringNode.meta?.function == null) return '<unknown>';
 
-    // @ts-expect-error
     return `${hoveringNode.meta.function.filename} ${
       hoveringNode.meta.line?.line !== undefined && hoveringNode.meta.line?.line !== '0'
         ? ` +${hoveringNode.meta.line.line.toString()}`

package/src/ProfileIcicleGraph/benchmarks/ProfileIcicleGraph-10M.benchmark.tsx

@@ -0,0 +1,38 @@
+// 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 React from 'react';
+import ProfileIcicleGraph from '..';
+import {Provider} from 'react-redux';
+import {store} from '@parca/store';
+import parca10mGraphData from './benchdata/parca-10m.json';
+import {Flamegraph} from '@parca/client';
+
+const {store: reduxStore} = store();
+
+const parca10mGraph = parca10mGraphData as Flamegraph;
+
+export default function ({callback = () => {}}): React.ReactElement {
+  return (
+    <div ref={callback}>
+      <Provider store={reduxStore}>
+        <ProfileIcicleGraph
+          graph={parca10mGraph}
+          sampleUnit={parca10mGraph.unit}
+          curPath={[]}
+          setNewCurPath={() => {}}
+        />
+      </Provider>
+    </div>
+  );
+}

package/src/ProfileIcicleGraph/benchmarks/ProfileIcicleGraph-1M.benchmark.tsx

@@ -0,0 +1,38 @@
+// 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 React from 'react';
+import ProfileIcicleGraph from '../';
+import {Provider} from 'react-redux';
+import {store} from '@parca/store';
+import {Flamegraph} from '@parca/client';
+import parca1mGraphData from './benchdata/parca-1m.json';
+
+const {store: reduxStore} = store();
+
+const parca1mGraph = parca1mGraphData as Flamegraph;
+
+export default function ({callback = () => {}}): React.ReactElement {
+  return (
+    <div ref={callback}>
+      <Provider store={reduxStore}>
+        <ProfileIcicleGraph
+          graph={parca1mGraph}
+          sampleUnit={parca1mGraph.unit}
+          curPath={[]}
+          setNewCurPath={() => {}}
+        />
+      </Provider>
+    </div>
+  );
+}

package/src/ProfileIcicleGraph/benchmarks/ProfileIcicleGraph-20M.benchmark.tsx

@@ -0,0 +1,38 @@
+// 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 React from 'react';
+import ProfileIcicleGraph from '..';
+import {Provider} from 'react-redux';
+import {store} from '@parca/store';
+import parca20mGraphData from './benchdata/parca-20m.json';
+import {Flamegraph} from '@parca/client';
+
+const {store: reduxStore} = store();
+
+const parca20mGraph = parca20mGraphData as Flamegraph;
+
+export default function ({callback = () => {}}): React.ReactElement {
+  return (
+    <div ref={callback}>
+      <Provider store={reduxStore}>
+        <ProfileIcicleGraph
+          graph={parca20mGraph}
+          sampleUnit={parca20mGraph.unit}
+          curPath={[]}
+          setNewCurPath={() => {}}
+        />
+      </Provider>
+    </div>
+  );
+}

package/src/ProfileIcicleGraph/benchmarks/benchdata/populateData.js

@@ -0,0 +1,85 @@
+// 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.
+
+const {GrpcWebFetchTransport} = require('@protobuf-ts/grpcweb-transport');
+const client = require('@parca/client');
+const fs = require('fs-extra');
+const path = require('path');
+// const {fileURLToPath} = require('url');
+const fetch = require('node-fetch');
+
+globalThis.fetch = fetch;
+globalThis.Headers = fetch.Headers;
+const DIR_NAME = __dirname; // path.dirname(fileURLToPath(import.meta.url));
+
+const apiEndpoint = 'https://demo.parca.dev';
+
+const queryClient = new client.QueryServiceClient(
+  new GrpcWebFetchTransport({
+    baseUrl: `${apiEndpoint}/api`,
+  })
+);
+
+const populateDataIfNeeded = async (from, filename) => {
+  const filePath = path.join(DIR_NAME, filename);
+  if (Object.keys(await readFile(filePath)).length > 0) {
+    return;
+  }
+  const {response} = await queryClient.query({
+    options: {
+      oneofKind: 'merge',
+      merge: {
+        start: client.Timestamp.fromDate(from),
+        end: client.Timestamp.fromDate(new Date()),
+        query: 'parca_agent_cpu:samples:count:cpu:nanoseconds:delta{container="parca"}',
+      },
+    },
+    reportType: client.QueryRequest_ReportType.FLAMEGRAPH_TABLE,
+    mode: client.QueryRequest_Mode.MERGE,
+  });
+  if (response.report.oneofKind !== 'flamegraph') {
+    throw new Error('Expected flamegraph report');
+  }
+  await writeToFile(response.report.flamegraph, filePath);
+};
+
+const writeToFile = async (data, filename) => {
+  await fs.createFile(filename);
+  return await fs.writeFile(filename, JSON.stringify(data));
+};
+
+const readFile = async filename => {
+  try {
+    return await fs.readJSON(filename);
+  } catch (e) {
+    return {};
+  }
+};
+
+const run = async () => {
+  await Promise.all([
+    populateDataIfNeeded(new Date(new Date().getTime() - 1000 * 60), 'parca-1m.json'),
+    populateDataIfNeeded(new Date(new Date().getTime() - 1000 * 60 * 10), 'parca-10m.json'),
+    populateDataIfNeeded(new Date(new Date().getTime() - 1000 * 60 * 20), 'parca-20m.json'),
+  ]);
+};
+
+run()
+  .then(() => {
+    console.log('done');
+    process.exit(0);
+  })
+  .catch(err => {
+    console.error('Error:', err);
+    process.exit(1);
+  });

package/src/{ProfileIcicleGraph.tsx → ProfileIcicleGraph/index.tsx}

@@ -15,8 +15,8 @@ import {Flamegraph} from '@parca/client';
 import {useAppSelector, selectCompareMode} from '@parca/store';
 import {useContainerDimensions} from '@parca/dynamicsize';
 
-import DiffLegend from './components/DiffLegend';
-import IcicleGraph from './IcicleGraph';
+import DiffLegend from '../components/DiffLegend';
+import IcicleGraph from '../IcicleGraph';
 
 interface ProfileIcicleGraphProps {
   width?: number;

package/src/ProfileView/FilterByFunctionButton.tsx

@@ -18,16 +18,24 @@ import {
   useAppDispatch,
   useAppSelector,
 } from '@parca/store';
-import {useState} from 'react';
+import {Icon} from '@iconify/react';
+import {useCallback, useMemo, useState} from 'react';
 
 const FilterByFunctionButton = (): JSX.Element => {
   const dispatch = useAppDispatch();
   const storeVal = useAppSelector(selectFilterByFunction);
   const [value, setValue] = useState<string>(storeVal ?? '');
 
-  const onAction = (): void => {
-    dispatch(setFilterByFunction(value));
-  };
+  const isClearAction = useMemo(() => {
+    return value === storeVal && value != null;
+  }, [value, storeVal]);
+
+  const onAction = useCallback((): void => {
+    dispatch(setFilterByFunction(isClearAction ? undefined : value));
+    if (isClearAction) {
+      setValue('');
+    }
+  }, [dispatch, isClearAction, value]);
 
   return (
     <Input
@@ -37,6 +45,7 @@ const FilterByFunctionButton = (): JSX.Element => {
       onChange={e => setValue(e.target.value)}
       value={value}
       onBlur={() => setValue(storeVal ?? '')}
+      actionIcon={isClearAction ? <Icon icon="ep:circle-close" /> : <Icon icon="ep:arrow-right" />}
     />
   );
 };

package/src/ProfileView/index.tsx

@@ -17,9 +17,16 @@ import {scaleLinear} from 'd3';
 import {getNewSpanColor, parseParams} from '@parca/functions';
 import useUIFeatureFlag from '@parca/functions/useUIFeatureFlag';
 import {QueryServiceClient, Flamegraph, Top, Callgraph as CallgraphType} from '@parca/client';
-import {Button, Card, SearchNodes, useParcaContext} from '@parca/components';
+import {Button, Card, useParcaContext} from '@parca/components';
 import {useContainerDimensions} from '@parca/dynamicsize';
-import {useAppSelector, selectDarkMode, selectSearchNodeString} from '@parca/store';
+import {
+  useAppSelector,
+  selectDarkMode,
+  selectSearchNodeString,
+  selectFilterByFunction,
+  useAppDispatch,
+  setSearchNodeString,
+} from '@parca/store';
 
 import {Callgraph} from '../';
 import ProfileShareButton from '../components/ProfileShareButton';
@@ -107,14 +114,16 @@ export const ProfileView = ({
   profileVisState,
   onDownloadPProf,
 }: ProfileViewProps): JSX.Element => {
+  const dispatch = useAppDispatch();
   const {ref, dimensions} = useContainerDimensions();
   const [curPath, setCurPath] = useState<string[]>([]);
   const {currentView, setCurrentView} = profileVisState;
   const isDarkMode = useAppSelector(selectDarkMode);
   const currentSearchString = useAppSelector(selectSearchNodeString);
+  const filterByFunctionString = useAppSelector(selectFilterByFunction);
 
   const [callgraphEnabled] = useUIFeatureFlag('callgraph');
-  const [filterByFunctionEnabled] = useUIFeatureFlag('filterByFunction');
+  const [highlightAfterFilteringEnabled] = useUIFeatureFlag('highlightAfterFiltering');
 
   const {loader, perf} = useParcaContext();
 
@@ -139,6 +148,28 @@ export const ProfileView = ({
     return false;
   }, [currentView, callgraphData?.loading, flamegraphData?.loading, topTableData?.loading]);
 
+  useEffect(() => {
+    if (!highlightAfterFilteringEnabled) {
+      if (currentSearchString !== undefined && currentSearchString !== '') {
+        dispatch(setSearchNodeString(''));
+      }
+      return;
+    }
+    if (isLoading) {
+      return;
+    }
+    if (filterByFunctionString === currentSearchString) {
+      return;
+    }
+    dispatch(setSearchNodeString(filterByFunctionString));
+  }, [
+    isLoading,
+    filterByFunctionString,
+    dispatch,
+    highlightAfterFilteringEnabled,
+    currentSearchString,
+  ]);
+
   const isLoaderVisible = useDelayedLoader(isLoading);
 
   if (isLoaderVisible) {
@@ -210,11 +241,10 @@ export const ProfileView = ({
                     Download pprof
                   </Button>
                 </div>
-                {filterByFunctionEnabled ? <FilterByFunctionButton /> : <SearchNodes />}
+                <FilterByFunctionButton />
               </div>
 
               <div className="flex ml-auto gap-2">
-                {filterByFunctionEnabled ? <SearchNodes /> : null}
                 <Button
                   color="neutral"
                   onClick={resetIcicleGraph}

package/tsconfig.json

@@ -8,5 +8,5 @@
     "noEmit": false,
     "declaration": true
   },
-  "exclude": ["node_modules", "dist", "dist/**/*.d.ts", "**/*.test.ts"]
+  "exclude": ["node_modules", "dist", "dist/**/*.d.ts", "**/*.test.ts", "**/*.benchmark.tsx"]
 }