useURLStateCustom hook to parse and set custom objects from the url p…

…arams

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;

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);