fix: Prevent time range context error when opening trace details slideover (#7418)

* fix: Prevent time range context error when opening trace details slideover

* Remove extraneous type cast

Author: cephalization

app/src/components/datetime/TimeRangeContext.tsx

@@ -17,8 +17,12 @@ export const TimeRangeContext = createContext<TimeRangeContextType | null>(
   null
 );
 
-export function useTimeRange(): TimeRangeContextType {
-  const context = React.useContext(TimeRangeContext);
+export function useNullableTimeRangeContext() {
+  return React.useContext(TimeRangeContext);
+}
+
+export function useTimeRange() {
+  const context = useNullableTimeRangeContext();
   if (context === null) {
     throw new Error(
       "useTimeRange must be used within a TimeRangeContextProvider"

app/src/components/trace/SpanAnnotationsEditor.tsx

@@ -24,7 +24,7 @@ import {
   Icons,
   Loading,
   Popover,
-  useTimeRange,
+  useNullableTimeRangeContext,
   View,
 } from "@phoenix/components";
 import { Annotation, AnnotationConfig } from "@phoenix/components/annotation";
@@ -273,7 +273,10 @@ function SpanAnnotationsList(props: {
   );
   const annotationConfigs = data.project?.annotationConfigs?.configs;
   const annotationConfigsLength = annotationConfigs?.length ?? 0;
-  const { timeRange } = useTimeRange();
+  // time range is nullable in this context
+  // we only use it to refresh fragments after mutations so it is ok to not have a time range context
+  const timeRangeContext = useNullableTimeRangeContext();
+  const timeRange = timeRangeContext?.timeRange;
 
   const [commitDeleteAnnotation] =
     useMutation<SpanAnnotationsEditorDeleteAnnotationMutation>(graphql`