removes isComparisonEnabled state from store

client/src/components/legend/item/component.tsx

@@ -1,15 +1,14 @@
 import classNames from 'classnames';
 import { EyeIcon, EyeOffIcon, XIcon } from '@heroicons/react/solid';
 import { useCallback } from 'react';
+import { useSearchParams } from 'next/navigation';
 
 import OpacityControl from './opacityControl';
 import DragHandle from './dragHandle';
 import { ComparisonToggle } from './comparisonModeToggle';
 import InfoModal from './info-modal';
 
 import Loading from 'components/loading';
-import { useAppSelector } from 'store/hooks';
-import { scenarios } from 'store/features/analysis';
 
 import type { Dispatch } from 'react';
 import type { InfoModalProps } from './info-modal';
@@ -45,7 +44,8 @@ export const LegendItem = ({
   onToggle,
   isActive,
 }: LegendItemProps) => {
-  const { isComparisonEnabled } = useAppSelector(scenarios);
+  const searchParams = useSearchParams();
+  const isComparisonEnabled = Boolean(searchParams.get('compareScenarioId'));
 
   const handleToggleActive = useCallback(() => {
     onToggle(!isActive);

client/src/containers/analysis-sidebar/component.tsx

@@ -7,7 +7,6 @@ import { pickBy } from 'lodash-es';
 import { useAppSelector, useAppDispatch } from 'store/hooks';
 import {
   scenarios,
-  setComparisonEnabled,
   setCurrentScenario,
   setScenarioToCompare as setScenarioToCompareAction,
 } from 'store/features/analysis/scenarios';
@@ -64,7 +63,6 @@ const ScenariosComponent: React.FC<{ scrollref?: MutableRefObject<HTMLDivElement
       // TODO: deprecated, we'll keep only for retro-compatibility
       dispatch(setCurrentScenario(id));
       dispatch(setScenarioToCompareAction(null));
-      dispatch(setComparisonEnabled(false));
     },
     [dispatch, push, query],
   );

client/src/containers/analysis-visualization/analysis-dynamic-metadata/component.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useCallback } from 'react';
 import classNames from 'classnames';
 import { InformationCircleIcon } from '@heroicons/react/outline';
+import { useSearchParams } from 'next/navigation';
 
 import { useAppSelector, useAppDispatch } from 'store/hooks';
 import { useScenario } from 'hooks/scenarios';
@@ -26,8 +27,11 @@ type AnalysisDynamicMetadataTypes = {
 const AnalysisDynamicMetadata: FC<AnalysisDynamicMetadataTypes> = ({
   className,
 }: AnalysisDynamicMetadataTypes) => {
+  const searchParams = useSearchParams();
+  const isComparisonEnabled = Boolean(searchParams.get('compareScenarioId'));
+
   const dispatch = useAppDispatch();
-  const { currentScenario, scenarioToCompare, isComparisonEnabled } = useAppSelector(scenarios);
+  const { currentScenario, scenarioToCompare } = useAppSelector(scenarios);
   const { data: scenario } = useScenario(currentScenario);
   const { data: scenarioB } = useScenario(scenarioToCompare);
 

client/src/containers/analysis-visualization/analysis-legend/impact-legend-item/component.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useMemo } from 'react';
+import { useSearchParams } from 'next/navigation';
 
 import { useAppSelector, useAppDispatch, useSyncIndicators } from 'store/hooks';
 import { analysisMap, setLayer } from 'store/features/analysis/map';
-import { scenarios } from 'store/features/analysis';
 import LegendTypeChoropleth from 'components/legend/types/choropleth';
 import LegendTypeComparative from 'components/legend/types/comparative';
 import LegendItem from 'components/legend/item';
@@ -13,6 +13,9 @@ import type { Legend } from 'types';
 const LAYER_ID = 'impact';
 
 const ImpactLayer = () => {
+  const searchParams = useSearchParams();
+  const isComparisonEnabled = Boolean(searchParams.get('compareScenarioId'));
+
   const dispatch = useAppDispatch();
   const [syncedIndicators] = useSyncIndicators();
 
@@ -40,8 +43,6 @@ const ImpactLayer = () => {
     [layer.metadata?.legend.items],
   );
 
-  const { isComparisonEnabled } = useAppSelector(scenarios);
-
   const name = useMemo(() => {
     if (!layer.metadata?.legend?.name) return null;
 

client/src/containers/analysis-visualization/analysis-table/index.tsx

@@ -566,7 +566,7 @@ const AnalysisTable = () => {
       <div className="relative flex-1" data-testid="analysis-table">
         <Table {...tableProps} />
       </div>
-      <AnalysisTableFooter />
+      {isComparisonEnabled && <AnalysisTableFooter />}
     </div>
   );
 };

client/src/containers/scenarios/comparison/component.tsx

@@ -4,12 +4,8 @@ import { pickBy } from 'lodash-es';
 
 import { useScenarios } from 'hooks/scenarios';
 import { useAppDispatch } from 'store/hooks';
-import {
-  setComparisonEnabled,
-  setScenarioToCompare as setScenarioToCompareAction,
-} from 'store/features/analysis/scenarios';
+import { setScenarioToCompare as setScenarioToCompareAction } from 'store/features/analysis/scenarios';
 import { AutoCompleteSelect } from 'components/forms/select';
-import useEffectOnce from 'hooks/once';
 
 import type { Option } from 'components/forms/select';
 import type { Dispatch, FC } from 'react';
@@ -39,7 +35,6 @@ const ScenariosComparison: FC = () => {
   const handleOnChange = useCallback<Dispatch<Option>>(
     (current) => {
       // TODO: deprecated, we'll keep only for retro-compatibility
-      dispatch(setComparisonEnabled(!!current));
       dispatch(setScenarioToCompareAction(current?.value || null));
 
       push({ query: pickBy({ ...query, compareScenarioId: current?.value || null }) }, null, {
@@ -51,7 +46,6 @@ const ScenariosComparison: FC = () => {
 
   const handleScenarioRemoval = useCallback(() => {
     // TODO: deprecated, we'll keep only for retro-compatibility
-    dispatch(setComparisonEnabled(false));
     dispatch(setScenarioToCompareAction(null));
 
     push({ query: pickBy({ ...query, compareScenarioId: null }) }, null, {
@@ -64,7 +58,6 @@ const ScenariosComparison: FC = () => {
     if (selected?.value && compareScenarioId !== selected?.value) {
       // TO-DO: deprecated, we'll keep only for retro-compatibility
       dispatch(setScenarioToCompareAction(null));
-      dispatch(setComparisonEnabled(false));
 
       push(
         {
@@ -78,11 +71,6 @@ const ScenariosComparison: FC = () => {
     }
   }, [selected, dispatch, options, compareScenarioId, push, query]);
 
-  // We consider comparison is enabled when compareScenarioId is present
-  useEffectOnce(() => {
-    if (compareScenarioId) dispatch(setComparisonEnabled(true));
-  });
-
   return (
     <>
       <label className="mb-1 block text-sm text-gray-500">Compare with:</label>

client/src/hooks/h3-data/index.ts

@@ -39,19 +39,18 @@ export const useH3Data = <T = H3APIResponse>({
   const isImpact = id === 'impact';
 
   const filters = useAppSelector(analysisFilters);
-  const { currentScenario, scenarioToCompare, isComparisonEnabled } = useAppSelector(scenarios);
+  const { currentScenario, scenarioToCompare } = useAppSelector(scenarios);
 
   const impactParams = useMemo(
     () =>
       storeToQueryParams({
         ...filters,
         currentScenario,
         scenarioToCompare,
-        isComparisonEnabled,
         materialId,
         startYear: year,
       }),
-    [currentScenario, filters, isComparisonEnabled, materialId, scenarioToCompare, year],
+    [currentScenario, filters, materialId, scenarioToCompare, year],
   );
 
   const materialParams = useMemo(() => ({ materialId, year }), [materialId, year]);

client/src/hooks/layers/impact.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from 'react';
-import { useRouter } from 'next/router';
 import { omit } from 'lodash-es';
+import { useSearchParams } from 'next/navigation';
 
 import { useIndicator } from '../indicators';
 
@@ -17,14 +17,15 @@ import { storeToQueryParams } from 'hooks/h3-data/utils';
 import type { LegendItem as LegendItemProp } from 'types';
 
 export const useImpactLayer = () => {
+  const searchParams = useSearchParams();
+  const compareScenarioId = searchParams.get('compareScenarioId');
+  const scenarioId = searchParams.get('scenarioId');
+  const isComparisonEnabled = Boolean(compareScenarioId);
+
   const dispatch = useAppDispatch();
   const filters = useAppSelector(analysisFilters);
-  const {
-    query: { scenarioId, compareScenarioId },
-  } = useRouter();
-  const isComparisonEnabled = !!compareScenarioId;
   const { comparisonMode } = useAppSelector(scenarios);
-  const colorKey = !!compareScenarioId ? 'compare' : 'impact';
+  const colorKey = isComparisonEnabled ? 'compare' : 'impact';
   const [syncedIndicators] = useSyncIndicators();
 
   const {
@@ -36,11 +37,10 @@ export const useImpactLayer = () => {
       storeToQueryParams({
         ...filters,
         indicators: syncedIndicators?.[0] ? [syncedIndicators?.[0]] : undefined,
-        currentScenario: scenarioId as string,
-        scenarioToCompare: compareScenarioId as string,
-        isComparisonEnabled,
+        currentScenario: scenarioId,
+        scenarioToCompare: compareScenarioId,
       }),
-    [compareScenarioId, filters, isComparisonEnabled, scenarioId, syncedIndicators],
+    [compareScenarioId, filters, scenarioId, syncedIndicators],
   );
 
   const { year } = params;

client/src/store/features/analysis/scenarios.ts

@@ -7,7 +7,6 @@ import type { Scenario } from 'containers/scenarios/types';
 export type ScenarioComparisonMode = 'relative' | 'absolute';
 
 export type ScenariosState = {
-  isComparisonEnabled: boolean;
   comparisonMode: ScenarioComparisonMode;
   /**
    * The current scenario id
@@ -27,7 +26,6 @@ export type ScenariosState = {
 
 // Define the initial state using that type
 export const initialState: ScenariosState = {
-  isComparisonEnabled: false,
   comparisonMode: 'absolute',
   currentScenario: null,
   scenarioToCompare: null,
@@ -48,13 +46,6 @@ export const analysisScenariosSlice = createSlice({
       ...state,
       currentScenario: action.payload,
     }),
-    setComparisonEnabled: (
-      state,
-      action: PayloadAction<ScenariosState['isComparisonEnabled']>,
-    ) => ({
-      ...state,
-      isComparisonEnabled: action.payload,
-    }),
     setScenarioToCompare: (state, action: PayloadAction<ScenariosState['scenarioToCompare']>) => ({
       ...state,
       scenarioToCompare: action.payload,
@@ -80,7 +71,6 @@ export const analysisScenariosSlice = createSlice({
 
 export const {
   setCurrentScenario,
-  setComparisonEnabled,
   setScenarioToCompare,
   setComparisonMode,
   setScenarioFilter,