From ad7349dea98aef68bec5164142f0c8c46a376caa Mon Sep 17 00:00:00 2001
From: Manoj Vivek <p.manoj.vivek@gmail.com>
Date: Mon, 20 Jan 2025 15:31:10 +0530
Subject: [PATCH] useURLStateCustom hook to parse and set custom objects from
 the url params

---
 .../components/src/hooks/URLState/index.tsx   | 27 +++++++++++++++++++
 .../profile/src/MetricsGraphStrips/index.tsx  |  3 ++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/ui/packages/shared/components/src/hooks/URLState/index.tsx b/ui/packages/shared/components/src/hooks/URLState/index.tsx
index 6785033c2a2..a840a4266d8 100644
--- a/ui/packages/shared/components/src/hooks/URLState/index.tsx
+++ b/ui/packages/shared/components/src/hooks/URLState/index.tsx
@@ -130,4 +130,31 @@ export const useURLState = <T extends ParamValue>(
   return [(value ?? defaultValue) as T, setParam];
 };
 
+interface OptionsCustom<T> {
+  parse: (val: ParamValue) => T;
+  stringify: (val: T) => ParamValue;
+}
+
+type ParamValueSetterCustom<T> = (val: T) => void;
+
+export const useURLStateCustom = <T extends object>(
+  param: string,
+  { parse, stringify, ..._options }: Options & OptionsCustom<T>
+): [T, ParamValueSetterCustom<T>] => {
+  const [urlValue, setURLValue] = useURLState<string>(param, _options);
+
+  const val = useMemo<T>(() => {
+    return parse(urlValue);
+  }, [parse, urlValue]);
+
+  const setVal = useCallback(
+    (val: T) => {
+      setURLValue(stringify(val));
+    },
+    [setURLValue, stringify]
+  );
+
+  return [val, setVal];
+}
+
 export default URLStateContext;
diff --git a/ui/packages/shared/profile/src/MetricsGraphStrips/index.tsx b/ui/packages/shared/profile/src/MetricsGraphStrips/index.tsx
index 8910f135e56..8058a6bd302 100644
--- a/ui/packages/shared/profile/src/MetricsGraphStrips/index.tsx
+++ b/ui/packages/shared/profile/src/MetricsGraphStrips/index.tsx
@@ -15,6 +15,7 @@ import {useMemo, useState} from 'react';
 
 import {Icon} from '@iconify/react';
 import * as d3 from 'd3';
+import isEqual from 'fast-deep-equal';
 
 import {LabelSet} from '@parca/client';
 
@@ -119,7 +120,7 @@ export const MetricsGraphStrips = ({
                 width={width ?? 1468}
                 fill={color(labelStr) as string}
                 selectionBounds={
-                  cpu === selectedTimeframe?.labels ? selectedTimeframe.bounds : undefined
+                  isEqual(cpu.labels, selectedTimeframe?.labels.labels) ? selectedTimeframe?.bounds : undefined
                 }
                 setSelectionBounds={bounds => {
                   onSelectedTimeframe(cpu, bounds);