ui: Flamegraph state reset bug fix and verbose logs (#6054)

* Flamegraph state reset bug fix and verbose logs

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

* Linter fixes

---------

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

Author: manojVivek

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

@@ -251,17 +251,46 @@ export const useURLState = <T extends ParamValue>(
   const value = useMemo<ParamValue>(() => {
     if (typeof state[param] === 'string') {
       if (alwaysReturnArray === true) {
+        if (debugLog === true) {
+          console.log('useURLState returning single string value as array for param', param, [
+            state[param],
+          ]);
+        }
         return [state[param]] as ParamValue;
       }
+      if (debugLog === true) {
+        console.log('useURLState returning string value for param', param, state[param]);
+      }
       return state[param];
     } else if (state[param] != null && Array.isArray(state[param])) {
       if (state[param]?.length === 1 && alwaysReturnArray !== true) {
+        if (debugLog === true) {
+          console.log(
+            'useURLState returning first array value as string for param',
+            param,
+            state[param][0]
+          );
+        }
         return state[param]?.[0] as ParamValue;
       } else {
+        if (debugLog === true) {
+          console.log('useURLState returning array value for param', param, state[param]);
+        }
         return state[param];
       }
     }
-  }, [state, param, alwaysReturnArray]);
+  }, [state, param, alwaysReturnArray, debugLog]);
+
+  if (value == null) {
+    if (debugLog === true) {
+      console.log(
+        'useURLState returning defaultValue for param',
+        param,
+        defaultValue,
+        window.location.href
+      );
+    }
+  }
 
   return [(value ?? defaultValue) as T, setParam];
 };

ui/packages/shared/profile/src/hooks/useQueryState.ts

@@ -18,6 +18,7 @@ import {Query} from '@parca/parser';
 
 import {QuerySelection} from '../ProfileSelector';
 import {ProfileSelection, ProfileSelectionFromParams, ProfileSource} from '../ProfileSource';
+import {useResetFlameGraphState} from '../ProfileView/hooks/useResetFlameGraphState';
 import {sumByToParam, useSumBy, useSumByFromParams} from '../useSumBy';
 
 interface UseQueryStateOptions {
@@ -71,6 +72,7 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
   } = options;
 
   const batchUpdates = useURLStateBatch();
+  const resetFlameGraphState = useResetFlameGraphState();
 
   // URL state hooks with appropriate suffixes
   const [expression, setExpressionState] = useURLState<string>(`expression${suffix}`, {
@@ -304,6 +306,7 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
           // Clear ProfileSelection for non-delta profiles
           setSelectionParam(undefined);
         }
+        resetFlameGraphState();
       });
     },
     [
@@ -324,6 +327,7 @@ export const useQueryState = (options: UseQueryStateOptions = {}): UseQueryState
       setMergeFromState,
       setMergeToState,
       setSelectionParam,
+      resetFlameGraphState,
     ]
   );