diff --git a/quickwit/quickwit-ui/src/components/QueryActionBar.tsx b/quickwit/quickwit-ui/src/components/QueryActionBar.tsx
index 1f29315be8e..4621e3184a9 100644
--- a/quickwit/quickwit-ui/src/components/QueryActionBar.tsx
+++ b/quickwit/quickwit-ui/src/components/QueryActionBar.tsx
@@ -39,7 +39,17 @@ export function QueryEditorActionBar(props: SearchComponentProps) {
         </Button>
       </Box>
       { shouldDisplayTimeRangeSelect && <TimeRangeSelect
-        { ...props } />
+          timeRange={{
+            startTimestamp:props.searchRequest.startTimestamp,
+            endTimestamp:props.searchRequest.endTimestamp
+          }}
+          onUpdate={
+            (timeRange)=>{
+              props.runSearch({...props.searchRequest, ...timeRange});
+            }
+          }
+          disabled={props.queryRunning || !props.searchRequest.indexId}
+       />
       }
     </Box>
   )
diff --git a/quickwit/quickwit-ui/src/components/TimeRangeSelect.tsx b/quickwit/quickwit-ui/src/components/TimeRangeSelect.tsx
index 68b10938ddf..830e7af1bf6 100644
--- a/quickwit/quickwit-ui/src/components/TimeRangeSelect.tsx
+++ b/quickwit/quickwit-ui/src/components/TimeRangeSelect.tsx
@@ -35,7 +35,6 @@ import { Dayjs, default as dayjs } from 'dayjs';
 import relativeTime from "dayjs/plugin/relativeTime"
 import utc from "dayjs/plugin/utc"
 import { DateTimePicker } from '@mui/x-date-pickers';
-import { SearchComponentProps } from "../utils/SearchComponentProps";
 import { AdapterDayjs, } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { DATE_TIME_WITH_SECONDS_FORMAT } from "../utils/models";
@@ -53,13 +52,24 @@ const TIME_RANGE_CHOICES = [
   ["Last year", 365 * 24 * 60 * 60],
 ];
 
+type TimeRange = {
+  startTimestamp: number | null,
+  endTimestamp: number | null,
+}
+
+export interface TimeRangeSelectProps {
+  timeRange: TimeRange;
+  disabled?: boolean;
+  onUpdate(newTimeRange:TimeRange): void;
+}
+
 interface TimeRangeSelectState {
   anchor: HTMLElement | null;
   customDatesPanelOpen: boolean;
   width: number;
 }
 
-export function TimeRangeSelect(props: SearchComponentProps): JSX.Element {
+export function TimeRangeSelect(props: TimeRangeSelectProps): JSX.Element {
   const getInitialState = () => {return {width: 220, anchor: null, customDatesPanelOpen: false}};
   const initialState = useMemo(() => {return getInitialState(); }, []);
   const [state, setState] = useState<TimeRangeSelectState>(initialState);
@@ -78,7 +88,7 @@ export function TimeRangeSelect(props: SearchComponentProps): JSX.Element {
 
   useEffect(() => {
     setState(initialState);
-  }, [props.queryRunning, initialState])
+  }, [props.disabled, initialState])
 
   const handleClose = () => {
     setState(initialState);
@@ -92,11 +102,13 @@ export function TimeRangeSelect(props: SearchComponentProps): JSX.Element {
     secondsBeforeNow = +secondsBeforeNow;
     setState(initialState);
     const startTimestamp = Math.trunc(Date.now() / 1000) - secondsBeforeNow;
-    props.runSearch({...props.searchRequest, startTimestamp: startTimestamp, endTimestamp: null});
+    props.onUpdate({startTimestamp, endTimestamp:null})
+        // props.runSearch({...props.searchRequest, startTimestamp: startTimestamp, endTimestamp: null});
   };
 
   const handleReset = () => {
-    props.runSearch({...props.searchRequest, startTimestamp: null, endTimestamp: null});
+    props.onUpdate({startTimestamp:null, endTimestamp:null})
+    // props.runSearch({...props.searchRequest, startTimestamp: null, endTimestamp: null});
   };
 
   const open = Boolean(state.anchor);
@@ -109,9 +121,9 @@ export function TimeRangeSelect(props: SearchComponentProps): JSX.Element {
         disableElevation
         onClick={handleOpenClick}
         startIcon={<AccessTime />}
-        disabled={props.queryRunning || props.searchRequest.indexId == null}
+        disabled={props.disabled}
       >
-        <DateTimeRangeLabel startTimestamp={props.searchRequest.startTimestamp} endTimestamp={props.searchRequest.endTimestamp} />
+        <DateTimeRangeLabel startTimestamp={props.timeRange.startTimestamp} endTimestamp={props.timeRange.endTimestamp} />
       </Button>
       <Popover
         id={id}
@@ -173,25 +185,27 @@ export function TimeRangeSelect(props: SearchComponentProps): JSX.Element {
   );
 }
 
-function CustomDatesPanel(props: SearchComponentProps): JSX.Element {
+function CustomDatesPanel(props: TimeRangeSelectProps): JSX.Element {
   const [startDate, setStartDate] = useState<Dayjs | null>(null);
   const [endDate, setEndDate] = useState<Dayjs | null>(null);
 
   useEffect(() => {
-    setStartDate(props.searchRequest.startTimestamp ? convertTimestampSecsIntoDateUtc(props.searchRequest.startTimestamp) : null);
-    setEndDate(props.searchRequest.endTimestamp ? convertTimestampSecsIntoDateUtc(props.searchRequest.endTimestamp) : null);
-  }, [props.searchRequest.startTimestamp, props.searchRequest.endTimestamp]);
+    setStartDate(props.timeRange.startTimestamp ? convertTimestampSecsIntoDateUtc(props.timeRange.startTimestamp) : null);
+    setEndDate(props.timeRange.endTimestamp ? convertTimestampSecsIntoDateUtc(props.timeRange.endTimestamp) : null);
+  }, [props.timeRange.startTimestamp, props.timeRange.endTimestamp]);
   const handleReset = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     setStartDate(null);
     setEndDate(null)
-    props.onSearchRequestUpdate({...props.searchRequest, startTimestamp: null, endTimestamp: null});
+    props.onUpdate({startTimestamp:null, endTimestamp:null});
+    // props.onSearchRequestUpdate({...props.searchRequest, startTimestamp: null, endTimestamp: null});
   };
   const handleApply = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     const startTimestamp = startDate ? startDate.valueOf() / 1000 : null;
     const endTimestamp = endDate ? endDate.valueOf() / 1000 : null;
-    props.runSearch({...props.searchRequest, startTimestamp: startTimestamp, endTimestamp: endTimestamp});
+    props.onUpdate({startTimestamp, endTimestamp});
+    // props.runSearch({...props.searchRequest, startTimestamp: startTimestamp, endTimestamp: endTimestamp});
   };
 
   return (
diff --git a/quickwit/quickwit-ui/src/utils/SearchComponentProps.ts b/quickwit/quickwit-ui/src/utils/SearchComponentProps.ts
index bf04bdf30c3..5aa54161e41 100644
--- a/quickwit/quickwit-ui/src/utils/SearchComponentProps.ts
+++ b/quickwit/quickwit-ui/src/utils/SearchComponentProps.ts
@@ -19,6 +19,12 @@
 
 import { Index, SearchRequest } from "./models";
 
+
+type TimeRange = {
+  startTimestamp: number | null,
+  endTimestamp: number | null,
+}
+
 export interface SearchComponentProps {
   searchRequest: SearchRequest;
   queryRunning: boolean;
@@ -26,3 +32,9 @@ export interface SearchComponentProps {
   onSearchRequestUpdate(searchRequest: SearchRequest): void;
   runSearch(searchRequest: SearchRequest): void;
 }
+
+export interface TimeRangeSelectProps {
+  timeRange: TimeRange;
+  disabled?: boolean;
+  onUpdate(newTimeRange:TimeRange): void;
+}
\ No newline at end of file