ui: Pass the time range via context (#6203)

Author: yomete

ui/packages/shared/components/src/ParcaContext/index.tsx

@@ -18,6 +18,7 @@ import {RpcError} from '@protobuf-ts/runtime-rpc';
 import {QueryServiceClient} from '@parca/client';
 import type {ColorConfig, NavigateFunction} from '@parca/utilities';
 
+import {DateTimeRange} from '../DateTimeRangePicker/utils';
 import {NoDataPrompt} from '../NoDataPrompt';
 import Spinner, {SpinnerProps} from '../Spinner';
 
@@ -45,6 +46,9 @@ export interface AdditionalMetricsGraphProps {
   };
   queryClient: QueryServiceClient;
   suffix?: '_a' | '_b';
+  timeRange: DateTimeRange;
+  onTimeRangeChange: (range: DateTimeRange) => void;
+  commitTimeRange: () => void;
 }
 
 interface Props {

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

@@ -291,7 +291,14 @@ const ProfileSelector = ({
   return (
     <>
       <div className="mb-2 flex flex-col">
-        {additionalMetricsGraph?.({querySelection, queryClient, suffix})}
+        {additionalMetricsGraph?.({
+          querySelection,
+          queryClient,
+          suffix,
+          timeRange: timeRangeSelection,
+          onTimeRangeChange: handleTimeRangeChange,
+          commitTimeRange: () => setQueryExpression(true),
+        })}
         <LabelsQueryProvider
           setMatchersString={setMatchersString}
           runQuery={setQueryExpression}