feat: add drag support to alert history horizontal graph

frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx

@@ -1,10 +1,15 @@
 import { Color } from '@signozhq/design-tokens';
 import Uplot from 'components/Uplot';
+import { QueryParams } from 'constants/query';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
+import useUrlQuery from 'hooks/useUrlQuery';
+import history from 'lib/history';
 import heatmapPlugin from 'lib/uPlotLib/plugins/heatmapPlugin';
 import timelinePlugin from 'lib/uPlotLib/plugins/timelinePlugin';
 import { useMemo, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { UpdateTimeInterval } from 'store/actions';
 import { AlertRuleTimelineGraphResponse } from 'types/api/alerts/def';
 import uPlot, { AlignedData } from 'uplot';
 
@@ -41,11 +46,13 @@ function HorizontalTimelineGraph({
 		return [timestamps, states];
 	}, [data]);
 
+	const urlQuery = useUrlQuery();
+	const dispatch = useDispatch();
+
 	const options: uPlot.Options = useMemo(
 		() => ({
 			width,
 			height: 85,
-			cursor: { show: false },
 
 			axes: [
 				{
@@ -66,6 +73,40 @@ function HorizontalTimelineGraph({
 					label: 'States',
 				},
 			],
+			hooks: {
+				setSelect: [
+					(self): void => {
+						const selection = self.select;
+						if (selection) {
+							const startTime = self.posToVal(selection.left, 'x');
+							const endTime = self.posToVal(selection.left + selection.width, 'x');
+
+							const diff = endTime - startTime;
+
+							if (diff > 0) {
+								if (urlQuery.has(QueryParams.relativeTime)) {
+									urlQuery.delete(QueryParams.relativeTime);
+								}
+
+								const startTimestamp = Math.floor(startTime * 1000);
+								const endTimestamp = Math.floor(endTime * 1000);
+
+								if (startTimestamp !== endTimestamp) {
+									dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+								}
+
+								urlQuery.set(QueryParams.startTime, startTimestamp.toString());
+								urlQuery.set(QueryParams.endTime, endTimestamp.toString());
+
+								history.push({
+									search: urlQuery.toString(),
+								});
+							}
+						}
+					},
+				],
+			},
+
 			plugins:
 				transformedData?.length > 1
 					? [
@@ -76,7 +117,7 @@ function HorizontalTimelineGraph({
 					  ]
 					: [],
 		}),
-		[width, isDarkMode, transformedData],
+		[width, isDarkMode, transformedData.length, urlQuery, dispatch],
 	);
 	return <Uplot data={transformedData} options={options} />;
 }

frontend/src/pages/AlertDetails/hooks.tsx

@@ -17,6 +17,7 @@ import AlertHistory from 'container/AlertHistory';
 import { TIMELINE_TABLE_PAGE_SIZE } from 'container/AlertHistory/constants';
 import { AlertDetailsTab, TimelineFilter } from 'container/AlertHistory/types';
 import { urlKey } from 'container/AllError/utils';
+import { RelativeTimeMap } from 'container/TopNav/DateTimeSelection/config';
 import useAxiosError from 'hooks/useAxiosError';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -31,9 +32,7 @@ import PaginationInfoText from 'periscope/components/PaginationInfoText/Paginati
 import { useAlertRule } from 'providers/Alert';
 import { useCallback, useMemo } from 'react';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
-import { useSelector } from 'react-redux';
 import { generatePath, useLocation } from 'react-router-dom';
-import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
 	AlertDef,
@@ -44,7 +43,6 @@ import {
 	AlertRuleTopContributorsPayload,
 } from 'types/api/alerts/def';
 import { PayloadProps } from 'types/api/alerts/get';
-import { GlobalReducer } from 'types/reducer/globalTime';
 import { nanoToMilli } from 'utils/timeUtils';
 
 export const useAlertHistoryQueryParams = (): {
@@ -56,11 +54,10 @@ export const useAlertHistoryQueryParams = (): {
 } => {
 	const params = useUrlQuery();
 
-	const globalTime = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
 	const startTime = params.get(QueryParams.startTime);
 	const endTime = params.get(QueryParams.endTime);
+	const relativeTime =
+		params.get(QueryParams.relativeTime) ?? RelativeTimeMap['6hr'];
 
 	const intStartTime = parseInt(startTime || '0', 10);
 	const intEndTime = parseInt(endTime || '0', 10);
@@ -69,8 +66,8 @@ export const useAlertHistoryQueryParams = (): {
 	const { maxTime, minTime } = useMemo(() => {
 		if (hasStartAndEndParams)
 			return GetMinMax('custom', [intStartTime, intEndTime]);
-		return GetMinMax(globalTime.selectedTime);
-	}, [hasStartAndEndParams, intStartTime, intEndTime, globalTime.selectedTime]);
+		return GetMinMax(relativeTime);
+	}, [hasStartAndEndParams, intStartTime, intEndTime, relativeTime]);
 
 	const ruleId = params.get(QueryParams.ruleId);