ui: FilterByFunction improvements

pkg/query/columnquery.go

@@ -144,7 +144,7 @@ func (q *ColumnQueryAPI) Query(ctx context.Context, req *pb.QueryRequest) (*pb.Q
 	}
 
 	if req.FilterQuery != nil {
-		p = filterProfileData(p, *req.FilterQuery)
+		p = q.filterProfileData(ctx, p, *req.FilterQuery)
 	}
 
 	return q.renderReport(ctx, p, req.GetReportType())
@@ -161,7 +161,9 @@ func keepSample(s *profile.SymbolizedSample, filterQuery string) bool {
 	return false
 }
 
-func filterProfileData(p *profile.Profile, filterQuery string) *profile.Profile {
+func (q *ColumnQueryAPI) filterProfileData(ctx context.Context, p *profile.Profile, filterQuery string) *profile.Profile {
+	_, span := q.tracer.Start(ctx, "filterByFunction")
+	defer span.End()
 	filteredSamples := []*profile.SymbolizedSample{}
 	for _, s := range p.Samples {
 		if keepSample(s, filterQuery) {

ui/packages/app/web/src/components/ui/UserPreferences.tsx

@@ -52,9 +52,14 @@ const UserPreferences = () => {
         title="Preferences"
       >
         <div className="min-h-40 min-w-96 mt-8">
-          <h4 className="font-medium mb-2">Experimental Features</h4>
-          <FlagToggle name="Enable Callgraph" id="callgraph" />
-          <FlagToggle name="Enable Filter By Function" id="filterByFunction" />
+          <FlagToggle
+            name="Highlight matching nodes after filtering"
+            id="highlightAfterFiltering"
+          />
+          <div className=" min-w-96 mt-8">
+            <h4 className="font-medium mb-2">Experimental Features</h4>
+            <FlagToggle name="Enable Callgraph" id="callgraph" />
+          </div>
         </div>
         <div className="flex justify-end">
           <Button onClick={() => setIsOpen(false)} className="w-fit">

ui/packages/shared/components/src/index.tsx

@@ -25,7 +25,6 @@ import Pill, {PillVariant} from './Pill';
 import ResponsiveSvg from './ResponsiveSvg';
 import Select from './Select';
 import type {SelectElement} from './Select';
-import SearchNodes from './SearchNodes';
 import Spinner from './Spinner';
 import Tab from './Tab';
 import EmptyState from './EmptyState';
@@ -51,7 +50,6 @@ export {
   Pill,
   ResponsiveSvg,
   Select,
-  SearchNodes,
   Spinner,
   Tab,
   EmptyState,

ui/packages/shared/profile/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" />}
     />
   );
 };

ui/packages/shared/profile/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}