ui: Fix the bug preventing multiple sum_by entries (#5741)

* Fix the bug preventing multiple sumby entries

* [pre-commit.ci lite] apply automatic fixes

---------

Co-authored-by: pre-commit-ci-lite[bot] <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>

Author: manojVivek

ui/packages/shared/profile/src/ProfileExplorer/index.test.ts

@@ -0,0 +1,97 @@
+// 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 {describe, expect, it} from 'vitest';
+
+import {filterEmptyParams} from './index';
+
+describe('filterEmptyParams', () => {
+  it('should return an array with 2 elements when given object with 2 valid and multiple invalid values', () => {
+    const input = {
+      validString: 'hello',
+      validArray: ['item1', 'item2'],
+      emptyString: '',
+      undefinedValue: undefined,
+      emptyArray: [],
+      anotherEmptyString: '',
+    };
+
+    const result = filterEmptyParams(input);
+    const resultEntries = Object.entries(result);
+
+    expect(resultEntries).toHaveLength(2);
+    expect(result).toEqual({
+      validString: 'hello',
+      validArray: ['item1', 'item2'],
+    });
+  });
+
+  it('should filter out empty strings', () => {
+    const input = {
+      valid: 'test',
+      empty: '',
+    };
+
+    const result = filterEmptyParams(input);
+    expect(result).toEqual({valid: 'test'});
+  });
+
+  it('should filter out undefined values', () => {
+    const input = {
+      valid: 'test',
+      notDefined: undefined,
+    };
+
+    const result = filterEmptyParams(input);
+    expect(result).toEqual({valid: 'test'});
+  });
+
+  it('should filter out empty arrays', () => {
+    const input = {
+      valid: 'test',
+      emptyArray: [],
+      nonEmptyArray: ['item'],
+    };
+
+    const result = filterEmptyParams(input);
+    expect(result).toEqual({
+      valid: 'test',
+      nonEmptyArray: ['item'],
+    });
+  });
+
+  it('should keep all valid values including numbers, booleans, and objects', () => {
+    const input = {
+      string: 'test',
+      number: 0,
+      boolean: false,
+      object: {key: 'value'},
+      array: ['item'],
+    };
+
+    const result = filterEmptyParams(input);
+    expect(result).toEqual(input);
+  });
+
+  it('should return empty object when all values are invalid', () => {
+    const input = {
+      empty1: '',
+      empty2: '',
+      undefined1: undefined,
+      emptyArray: [],
+    };
+
+    const result = filterEmptyParams(input);
+    expect(result).toEqual({});
+  });
+});

ui/packages/shared/profile/src/ProfileExplorer/index.tsx

@@ -71,7 +71,7 @@ const sanitizeDateRange = (
 };
 /* eslint-enable @typescript-eslint/naming-convention */
 
-const filterEmptyParams = (o: Record<string, any>): Record<string, any> => {
+export const filterEmptyParams = (o: Record<string, any>): Record<string, any> => {
   return Object.fromEntries(
     Object.entries(o)
       .filter(

ui/packages/shared/profile/src/ProfileView/hooks/useResetStateOnNewSearch.ts

@@ -14,10 +14,13 @@
 import {useURLState} from '@parca/components';
 
 export const useResetStateOnNewSearch = (): (() => void) => {
-  const [, setCurPath] = useURLState('cur_path');
+  const [val, setCurPath] = useURLState('cur_path');
 
   return () => {
     setTimeout(() => {
+      if (val === undefined) {
+        return;
+      }
       setCurPath(undefined);
     });
   };

ui/packages/shared/profile/src/ProfileView/hooks/useResetStateOnProfileTypeChange.ts

@@ -14,19 +14,29 @@
 import {useURLState} from '@parca/components';
 
 export const useResetStateOnProfileTypeChange = (): (() => void) => {
-  const [, setGroupBy] = useURLState('group_by');
-  const [, setFilterByFunction] = useURLState('filter_by_function');
-  const [, setExcludeFunction] = useURLState('exclude_function');
-  const [, setSearchString] = useURLState('search_string');
-  const [, setCurPath] = useURLState('cur_path');
+  const [groupBy, setGroupBy] = useURLState('group_by');
+  const [filterByFunction, setFilterByFunction] = useURLState('filter_by_function');
+  const [excludeFunction, setExcludeFunction] = useURLState('exclude_function');
+  const [searchString, setSearchString] = useURLState('search_string');
+  const [curPath, setCurPath] = useURLState('cur_path');
 
   return () => {
     setTimeout(() => {
-      setGroupBy(undefined);
-      setFilterByFunction(undefined);
-      setExcludeFunction(undefined);
-      setSearchString(undefined);
-      setCurPath(undefined);
+      if (groupBy !== undefined) {
+        setGroupBy(undefined);
+      }
+      if (filterByFunction !== undefined) {
+        setFilterByFunction(undefined);
+      }
+      if (excludeFunction !== undefined) {
+        setExcludeFunction(undefined);
+      }
+      if (searchString !== undefined) {
+        setSearchString(undefined);
+      }
+      if (curPath !== undefined) {
+        setCurPath(undefined);
+      }
     });
   };
 };