Removed the getCorrelationById redundant call

Author: praveen5959

src/components/Navbar/components/CorrelationIcon.tsx

@@ -12,23 +12,23 @@ export const CorrelationIcon = forwardRef<
 			d="M13.3335 17.3335L14.6669 18.6669C15.0205 19.0205 15.5001 19.2192 16.0002 19.2192C16.5003 19.2192 16.9799 19.0205 17.3335 18.6669L22.6669 13.3335C23.0205 12.9799 23.2192 12.5003 23.2192 12.0002C23.2192 11.5001 23.0205 11.0205 22.6669 10.6669L17.3335 5.33353C16.9799 4.97991 16.5003 4.78125 16.0002 4.78125C15.5001 4.78125 15.0205 4.97991 14.6669 5.33353L9.33353 10.6669C8.97991 11.0205 8.78125 11.5001 8.78125 12.0002C8.78125 12.5003 8.97991 12.9799 9.33353 13.3335L10.6669 14.6669"
 			stroke={stroke}
 			strokeWidth={strokeWidth}
-			stroke-linecap="round"
-			stroke-linejoin="round"
+			strokeLinecap="round"
+			strokeLinejoin="round"
 		/>
 		<path
 			d="M10.6669 6.66687L9.33353 5.33353C8.97991 4.97991 8.5003 4.78125 8.0002 4.78125C7.5001 4.78125 7.02049 4.97991 6.66687 5.33353L1.33353 10.6669C0.979912 11.0205 0.78125 11.5001 0.78125 12.0002C0.78125 12.5003 0.979912 12.9799 1.33353 13.3335L6.66687 18.6669C7.02049 19.0205 7.5001 19.2192 8.0002 19.2192C8.5003 19.2192 8.97991 19.0205 9.33353 18.6669L14.6669 13.3335C15.0205 12.9799 15.2192 12.5003 15.2192 12.0002C15.2192 11.5001 15.0205 11.0205 14.6669 10.6669L13.3335 9.33353"
 			stroke={stroke}
 			strokeWidth={strokeWidth}
-			stroke-linecap="round"
-			stroke-linejoin="round"
+			strokeLinecap="round"
+			strokeLinejoin="round"
 		/>
 		<rect x="14" y="14" width="9.61539" height="10" rx="4.80769" fill="#F8F9FA" />
 		<path
 			d="M17.0771 22.4617V17.077C17.0771 16.669 17.2392 16.2777 17.5278 15.9892C17.8163 15.7007 18.2076 15.5386 18.6156 15.5386H18.8079C19.1649 15.5386 19.5073 15.6804 19.7598 15.9329C20.0122 16.1853 20.1541 16.5277 20.1541 16.8847C20.1541 17.2418 20.0122 17.5841 19.7598 17.8366C19.5073 18.0891 19.1649 18.2309 18.8079 18.2309M18.8079 18.2309H18.6156M18.8079 18.2309C19.1502 18.2309 19.4849 18.3324 19.7695 18.5226C20.0541 18.7127 20.2759 18.9831 20.4069 19.2993C20.5379 19.6156 20.5722 19.9636 20.5054 20.2993C20.4386 20.635 20.2738 20.9434 20.0318 21.1855C19.7897 21.4275 19.4813 21.5924 19.1456 21.6592C18.8098 21.7259 18.4618 21.6917 18.1456 21.5607C17.8293 21.4297 17.559 21.2078 17.3688 20.9232C17.1787 20.6386 17.0771 20.304 17.0771 19.9617V19.7693"
 			stroke="green"
 			strokeWidth={strokeWidth}
-			stroke-linecap="round"
-			stroke-linejoin="round"
+			strokeLinecap="round"
+			strokeLinejoin="round"
 		/>
 	</svg>
 

src/hooks/useCorrelationQueryLogs.tsx

@@ -14,7 +14,7 @@ import { useQuery } from 'react-query';
 import { LogsResponseWithHeaders } from '@/@types/parseable/api/query';
 import { useState } from 'react';
 
-const { setStreamData } = correlationStoreReducers;
+const { setStreamData, setIsCorrelatedFlag } = correlationStoreReducers;
 
 export const useCorrelationQueryLogs = () => {
 	const [error, setError] = useMountedState<string | null>(null);
@@ -68,6 +68,7 @@ export const useCorrelationQueryLogs = () => {
 						notifyError({ message: `${currentStream} doesn't have any fields` });
 					}
 				});
+				setCorrelationStore((store) => setIsCorrelatedFlag(store, true));
 			},
 			onError: (data: AxiosError) => {
 				setLoading(false);

src/hooks/useCorrelations.tsx

@@ -1,18 +1,11 @@
 import { useMutation, useQuery } from 'react-query';
 import _ from 'lodash';
 
-import {
-	deleteSavedCorrelation,
-	getCorrelationById,
-	getCorrelations,
-	saveCorrelation,
-	updateCorrelation,
-} from '@/api/correlations';
+import { deleteSavedCorrelation, getCorrelations, saveCorrelation, updateCorrelation } from '@/api/correlations';
 import { correlationStoreReducers, useCorrelationStore } from '@/pages/Correlation/providers/CorrelationProvider';
 import { notifyError, notifySuccess } from '@/utils/notification';
 import { AxiosError, isAxiosError } from 'axios';
 import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
-import dayjs from 'dayjs';
 
 const {
 	setCorrelations,
@@ -22,7 +15,7 @@ const {
 	cleanCorrelationStore,
 	toggleSavedCorrelationsModal,
 } = correlationStoreReducers;
-const { setTimeRange, syncTimeRange } = appStoreReducers;
+const { syncTimeRange } = appStoreReducers;
 export const useCorrelationsQuery = () => {
 	const [{ correlationId }, setCorrelatedStore] = useCorrelationStore((store) => store);
 	const [, setAppStore] = useAppStore((store) => store);
@@ -44,30 +37,6 @@ export const useCorrelationsQuery = () => {
 		},
 	});
 
-	const {
-		mutate: getCorrelationByIdMutation,
-		isError: fetchCorrelationIdError,
-		isSuccess: fetchCorrelationIdSuccess,
-		isLoading: fetchCorrelationIdLoading,
-	} = useMutation((correlationId: string) => getCorrelationById(correlationId), {
-		onSuccess: (data: any) => {
-			data.data.startTime &&
-				data.data.endTime &&
-				setAppStore((store) =>
-					setTimeRange(store, {
-						startTime: dayjs(data.data.startTime),
-						endTime: dayjs(data.data.endTime),
-						type: 'custom',
-					}),
-				);
-			setCorrelatedStore((store) => setCorrelationId(store, data.data.id));
-			setCorrelatedStore((store) => setActiveCorrelation(store, data.data));
-		},
-		onError: () => {
-			notifyError({ message: 'Failed to fetch correlation' });
-		},
-	});
-
 	const { mutate: deleteSavedCorrelationMutation, isLoading: isDeleting } = useMutation(
 		(data: { correlationId: string; onSuccess?: () => void }) => deleteSavedCorrelation(data.correlationId),
 		{
@@ -143,11 +112,6 @@ export const useCorrelationsQuery = () => {
 		deleteSavedCorrelationMutation,
 		isDeleting,
 
-		fetchCorrelationIdError,
-		fetchCorrelationIdSuccess,
-		fetchCorrelationIdLoading,
-		getCorrelationByIdMutation,
-
 		saveCorrelationMutation,
 		isCorrelationSaving,
 

src/pages/Correlation/index.tsx

@@ -34,8 +34,9 @@ import SaveCorrelationModal from './components/SaveCorrelationModal';
 import { useCorrelationFetchCount } from './hooks/useCorrelationFetchCount';
 import CorrleationJSONView from './Views/CorrelationJSONView';
 import ViewToggle from './components/CorrelationViewToggle';
+import dayjs from 'dayjs';
 
-const { changeStream, syncTimeRange } = appStoreReducers;
+const { changeStream, syncTimeRange, setTimeRange } = appStoreReducers;
 const {
 	deleteStreamData,
 	setSelectedFields,
@@ -64,6 +65,7 @@ const Correlation = () => {
 			correlationId,
 			savedCorrelationId,
 			viewMode,
+			correlations,
 		},
 		setCorrelationData,
 	] = useCorrelationStore((store) => store);
@@ -83,7 +85,7 @@ const Correlation = () => {
 
 	const { getCorrelationData, loadingState, error: errorMessage } = useCorrelationQueryLogs();
 	const { getFetchStreamData, loading: streamsLoading } = useFetchStreamData();
-	const { fetchCorrelations, getCorrelationByIdMutation } = useCorrelationsQuery();
+	const { fetchCorrelations } = useCorrelationsQuery();
 	const { refetchCount, countLoading } = useCorrelationFetchCount();
 
 	// Local State
@@ -116,7 +118,6 @@ const Correlation = () => {
 
 	useEffect(() => {
 		if (multipleSchemasLoading || !activeCorrelation) return;
-		setCorrelationData((store) => setSelectedFields(store, '', '', true));
 
 		const tableOrder = activeCorrelation?.tableConfigs.reduce((acc, config, index) => {
 			acc[config.tableName] = index;
@@ -143,8 +144,22 @@ const Correlation = () => {
 
 	useEffect(() => {
 		if (!isSavedCorrelation || !correlationId) return;
-		getCorrelationByIdMutation(correlationId);
-	}, [correlationId]);
+		const activeCorrelation = correlations?.find((correlation) => correlation.id === correlationId) || null;
+		activeCorrelation?.startTime &&
+			activeCorrelation?.endTime &&
+			setAppStore((store) =>
+				setTimeRange(store, {
+					startTime: dayjs(activeCorrelation?.startTime),
+					endTime: dayjs(activeCorrelation?.endTime),
+					type: 'custom',
+				}),
+			);
+		setSelect1Value(null);
+		setSelect2Value(null);
+		setCorrelationData((store) => setCorrelationCondition(store, ''));
+		setCorrelationData((store) => setSelectedFields(store, '', '', true));
+		setCorrelationData((store) => setActiveCorrelation(store, activeCorrelation));
+	}, [correlationId, correlations]);
 
 	useEffect(() => {
 		if (currentStream && streamNames.length > 0 && Object.keys(fields).includes(currentStream)) {
@@ -162,21 +177,11 @@ const Correlation = () => {
 		} else {
 			getFetchStreamData();
 		}
-	}, [currentOffset]);
-
-	useEffect(() => {
-		if (isCorrelatedData) {
-			refetchCount();
-			getCorrelationData();
-		} else {
-			getFetchStreamData();
-		}
-	}, [timeRange]);
+	}, [currentOffset, timeRange]);
 
 	useEffect(() => {
 		updateCorrelationCondition();
 		if (activeCorrelation && correlationCondition && isSavedCorrelation) {
-			setCorrelationData((store) => setIsCorrelatedFlag(store, true));
 			refetchCount();
 			getCorrelationData();
 		}
@@ -196,7 +201,6 @@ const Correlation = () => {
 			const condition = `"${streamNames[0]}".${select1Value} = "${streamNames[1]}".${select2Value}`;
 			setAppStore((store) => changeStream(store, 'correlatedStream'));
 			setCorrelationData((store) => setCorrelationCondition(store, condition));
-			setIsCorrelationEnabled(true);
 		}
 	};
 
@@ -488,8 +492,8 @@ const Correlation = () => {
 							<SavedCorrelationsButton />
 							<ViewToggle />
 
-							{isCorrelatedData && (
-								<Stack style={{ flexDirection: 'row' }} gap={8}>
+							{isCorrelationEnabled && (
+								<Stack style={{ flexDirection: 'row', alignItems: 'center' }} gap={8}>
 									<Pill
 										withRemoveButton
 										onRemove={() => {

src/pages/Stream/hooks/useParamsController.ts

@@ -167,7 +167,7 @@ const useParamsController = () => {
 			setLogsStore((store) => setPerPage(store, _.toNumber(presentParams.rows)));
 		}
 
-		if (storeAsParams.fields !== presentParams.fields) {
+		if (storeAsParams.fields !== presentParams.fields && !_.isEmpty(presentParams.fields)) {
 			setLogsStore((store) => setTargetColumns(store, joinOrSplit(presentParams.fields) as string[]));
 		}