+
@@ -559,9 +560,10 @@ const AnalysisTable = () => {
-
);
};
diff --git a/client/src/containers/analysis-visualization/analysis-table/footer/index.tsx b/client/src/containers/analysis-visualization/analysis-table/footer/index.tsx
new file mode 100644
index 000000000..7c458f6d6
--- /dev/null
+++ b/client/src/containers/analysis-visualization/analysis-table/footer/index.tsx
@@ -0,0 +1,64 @@
+import { FC } from 'react';
+import { useSearchParams } from 'next/navigation';
+
+import { Separator } from '@/components/ui/separator';
+import { Badge } from '@/components/ui/badge';
+import { useScenario } from '@/hooks/scenarios';
+
+const AnalysisTableFooter: FC = () => {
+ const searchParams = useSearchParams();
+ const compareScenarioId = searchParams.get('compareScenarioId');
+
+ const { data: scenarioName } = useScenario(compareScenarioId, undefined, {
+ select: (scenario) => scenario?.title,
+ enabled: Boolean(compareScenarioId),
+ });
+
+ return (
+
+ );
+};
+
+export default AnalysisTableFooter;
diff --git a/client/src/hooks/scenarios/index.ts b/client/src/hooks/scenarios/index.ts
index 5ff888382..4c9bd99fc 100644
--- a/client/src/hooks/scenarios/index.ts
+++ b/client/src/hooks/scenarios/index.ts
@@ -4,11 +4,7 @@ import { useQuery, useQueryClient, useInfiniteQuery, useMutation } from '@tansta
import { apiService } from 'services/api';
// types
-import type {
- UseQueryResult,
- UseInfiniteQueryResult,
- UseQueryOptions,
-} from '@tanstack/react-query';
+import type { UseInfiniteQueryResult, UseQueryOptions } from '@tanstack/react-query';
import type { AxiosResponse } from 'axios';
import type { Scenario, ScenarioDTO } from 'containers/scenarios/types';
import type { APIMetadataPagination } from 'types';
@@ -24,8 +20,6 @@ type ResponseInfiniteData = UseInfiniteQueryResult<
}>
>;
-type ResponseDataScenario = UseQueryResult
;
-
type QueryParams = {
sort?: string;
include?: string;
@@ -98,24 +92,23 @@ export function useInfiniteScenarios(queryParams: QueryParams): ResponseInfinite
return useMemo((): ResponseInfiniteData => query, [query]);
}
-export function useScenario(
- id?: Scenario['id'] | null,
+export function useScenario(
+ id: Scenario['id'],
queryParams?: QueryParams,
-): ResponseDataScenario {
- const response: ResponseDataScenario = useQuery(
+ queryOptions: UseQueryOptions = {},
+) {
+ return useQuery(
['scenario', id],
() =>
apiService
- .request({
+ .request<{ data: Scenario }>({
method: 'GET',
url: `/scenarios/${id}`,
params: queryParams,
})
.then(({ data: responseData }) => responseData.data),
- { ...DEFAULT_QUERY_OPTIONS, enabled: !!id },
+ { enabled: Boolean(id), ...queryOptions },
);
-
- return useMemo(() => response, [response]);
}
export function useDeleteScenario() {