ui: useURLStateCustom hook to parse and set custom objects from the u…

…rl params (#5446)

* useURLStateCustom hook to parse and set custom objects from the url params

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

* Fixes missing dependency

* Handled undefined

* [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>

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/package.json

@@ -32,6 +32,7 @@
     "d3-scale-chromatic": "^3.1.0",
     "d3-selection": "3.0.0",
     "d3-shape": "^3.2.0",
+    "fast-deep-equal": "^3.1.3",
     "framer-motion": "6.5.1",
     "graphviz-wasm": "3.0.2",
     "lodash.throttle": "^4.1.1",

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, selectedTimeframe?.labels) ? selectedTimeframe?.bounds : undefined
                 }
                 setSelectionBounds={bounds => {
                   onSelectedTimeframe(cpu, bounds);