WDPA: read them from scenario instead of store in certain cases

app/hoc/projects.ts

@@ -2,6 +2,7 @@ import { QueryClient } from 'react-query';
 
 import { getSession } from 'next-auth/client';
 import { dehydrate } from 'react-query/hydration';
+
 import PROJECTS from 'services/projects';
 
 import { mergeDehydratedState } from './utils';

app/hoc/scenarios.ts

@@ -0,0 +1,71 @@
+import { QueryClient } from 'react-query';
+
+import { getSession } from 'next-auth/client';
+import { dehydrate } from 'react-query/hydration';
+
+import SCENARIOS from 'services/scenarios';
+
+import { mergeDehydratedState } from './utils';
+
+export function withScenario(getServerSidePropsFunc?: Function) {
+  return async (context: any) => {
+    const session = await getSession(context);
+
+    if (!session) {
+      if (getServerSidePropsFunc) {
+        const SSPF = await getServerSidePropsFunc(context) || {};
+
+        return {
+          props: {
+            ...SSPF.props,
+          },
+        };
+      }
+
+      return {
+        props: {},
+      };
+    }
+
+    const { params } = context;
+
+    const { sid } = params;
+
+    const queryClient = new QueryClient();
+
+    await queryClient.prefetchQuery(['scenarios', sid], () => SCENARIOS.request({
+      method: 'GET',
+      url: `/${sid}`,
+      headers: {
+        Authorization: `Bearer ${session.accessToken}`,
+      },
+    }).then((response) => {
+      return response.data;
+    }));
+
+    if (getServerSidePropsFunc) {
+      const SSPF = await getServerSidePropsFunc(context) || {};
+
+      const { dehydratedState: prevDehydratedState } = SSPF.props;
+      const currentDehydratedState = JSON.parse(JSON.stringify(dehydrate(queryClient)));
+
+      const newDehydratedState = mergeDehydratedState(prevDehydratedState, currentDehydratedState);
+
+      return {
+        ...SSPF,
+        props: {
+          session,
+          ...SSPF.props,
+          dehydratedState: newDehydratedState,
+        },
+      };
+    }
+
+    return {
+      props: {
+        session,
+        dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
+      },
+    };
+  };
+}

app/hooks/map/index.ts

@@ -259,6 +259,7 @@ export function usePUGridLayer({
       wdpaThreshold = 0,
       puIncludedValue,
       puExcludedValue,
+      solution,
     } = options;
 
     return {
@@ -419,7 +420,22 @@ export function usePUGridLayer({
               },
             },
           ] : [],
-
+          ...type === 'solutions' && !!solution ? [
+            {
+              type: 'line',
+              'source-layer': 'layer0',
+              filter: [
+                'all',
+                ['in', ['get', 'scenarioPuId'], ['literal', solution]],
+              ],
+              paint: {
+                'line-color': '#ff0000',
+                'line-opacity': 1,
+                'line-width': 1.5,
+                'line-offset': 0.75,
+              },
+            },
+          ] : [],
         ],
       },
     };

app/hooks/map/types.ts

@@ -63,6 +63,7 @@ export interface UsePUGridLayer {
     puAction?: string;
     puIncludedValue?: string[];
     puExcludedValue?: string[];
+    solution?: string;
   };
 }
 
@@ -75,5 +76,6 @@ export interface UseLegend {
     puAction?: string;
     puIncludedValue?: string[];
     puExcludedValue?: string[];
+    solution?: string;
   };
 }

app/hooks/solutions/index.ts

@@ -94,7 +94,7 @@ export function useSolutions(sid, options: UseSolutionsOptionsProps = {}) {
 export function useSolution(sid, solutionId) {
   const [session] = useSession();
 
-  const query = useQuery(['scenarios', sid, solutionId], async () => SCENARIOS.request({
+  const query = useQuery(['solution-id', sid, solutionId], async () => SCENARIOS.request({
     method: 'GET',
     url: `/${sid}/marxan/solutions/${solutionId}`,
     headers: {
@@ -116,36 +116,23 @@ export function useSolution(sid, solutionId) {
   }, [query, data?.data]);
 }
 
-export function useMostDifferentSolutions(sid, options: UseSolutionsOptionsProps = {}) {
+export function useMostDifferentSolutions(sid) {
   const [session] = useSession();
 
-  const {
-    filters = {},
-  } = options;
-
-  const parsedFilters = Object.keys(filters)
-    .reduce((acc, k) => {
-      return {
-        ...acc,
-        [`filter[${k}]`]: filters[k],
-      };
-    }, {});
-
-  const query = useQuery(['scenarios', sid], async () => SCENARIOS.request({
+  const query = useQuery(['solutions-different', sid], async () => SCENARIOS.request({
     method: 'GET',
     url: `/${sid}/marxan/solutions/most-different`,
     headers: {
       Authorization: `Bearer ${session.accessToken}`,
     },
-    params: {
-      ...parsedFilters,
-    },
+  }).then((response) => {
+    return response.data;
   }));
 
   const { data } = query;
 
   return useMemo(() => {
-    const parsedData = Array.isArray(data.data.data) ? data.data.data.map((d) => {
+    const parsedData = Array.isArray(data?.data) ? data.data.map((d) => {
       const {
         id,
         runId,
@@ -175,7 +162,7 @@ export function useMostDifferentSolutions(sid, options: UseSolutionsOptionsProps
 export function useBestSolution(sid) {
   const [session] = useSession();
 
-  const query = useQuery(['scenarios', sid], async () => SCENARIOS.request({
+  const query = useQuery(['solutions-best', sid], async () => SCENARIOS.request({
     method: 'GET',
     url: `/${sid}/marxan/solutions/best`,
     headers: {

app/layout/scenarios/edit/features/component.tsx

@@ -8,7 +8,7 @@ import { useRouter } from 'next/router';
 import { getScenarioEditSlice } from 'store/slices/scenarios/edit';
 
 import { motion } from 'framer-motion';
-import { mergeScenarioStatusMetaData, SCENARIO_EDITING_META_DATA_DEFAULT_VALUES } from 'utils/utils-scenarios';
+import { mergeScenarioStatusMetaData } from 'utils/utils-scenarios';
 
 import { useSelectedFeatures } from 'hooks/features';
 import { useScenario, useSaveScenario } from 'hooks/scenarios';
@@ -56,7 +56,7 @@ export const ScenariosSidebarEditFeatures: React.FC<ScenariosSidebarEditFeatures
   const { scenarioEditingMetadata } = metadata || {};
   const {
     subtab: metaSubtab,
-  } = scenarioEditingMetadata || SCENARIO_EDITING_META_DATA_DEFAULT_VALUES;
+  } = scenarioEditingMetadata;
 
   const {
     data: selectedFeaturesData,

app/layout/scenarios/edit/map/component.tsx

@@ -17,6 +17,7 @@ import {
   useWDPAPreviewLayer, usePUGridLayer, useFeaturePreviewLayers, useLegend,
 } from 'hooks/map';
 import { useProject } from 'hooks/projects';
+import { useScenario } from 'hooks/scenarios';
 
 import ScenariosDrawingManager from 'layout/scenarios/edit/map/drawing-manager';
 
@@ -46,6 +47,10 @@ export const ScenariosEditMap: React.FC<ScenariosEditMapProps> = () => {
   const { data = {} } = useProject(pid);
   const { bbox } = data;
 
+  const {
+    data: scenarioData,
+  } = useScenario(sid);
+
   const {
     data: selectedFeaturesData,
   } = useSelectedFeatures(sid, {});
@@ -59,6 +64,7 @@ export const ScenariosEditMap: React.FC<ScenariosEditMapProps> = () => {
     tab,
     subtab,
     cache,
+
     // WDPA
     wdpaCategories,
     wdpaThreshold,
@@ -101,8 +107,8 @@ export const ScenariosEditMap: React.FC<ScenariosEditMapProps> = () => {
     type: tab,
     subtype: subtab,
     options: {
-      ...wdpaCategories,
-      wdpaThreshold,
+      wdpaIucnCategories: tab === 'protected-areas' && subtab === 'protected-areas-preview' ? wdpaCategories.wdpaIucnCategories : scenarioData.wdpaIucnCategories,
+      wdpaThreshold: tab === 'protected-areas' && subtab === 'protected-areas-percentage' ? wdpaThreshold : scenarioData.wdpaThreshold,
       puAction,
       puIncludedValue: puTmpIncludedValue,
       puExcludedValue: puTmpExcludedValue,
@@ -115,8 +121,8 @@ export const ScenariosEditMap: React.FC<ScenariosEditMapProps> = () => {
     type: tab,
     subtype: subtab,
     options: {
-      ...wdpaCategories,
-      wdpaThreshold,
+      wdpaIucnCategories: tab === 'protected-areas' && subtab === 'protected-areas-preview' ? wdpaCategories.wdpaIucnCategories : scenarioData.wdpaIucnCategories,
+      wdpaThreshold: tab === 'protected-areas' && subtab === 'protected-areas-percentage' ? wdpaThreshold : scenarioData.wdpaThreshold,
       puAction,
       puIncludedValue: puTmpIncludedValue,
       puExcludedValue: puTmpExcludedValue,

app/layout/scenarios/edit/run/component.tsx

@@ -8,7 +8,6 @@ import { useRouter } from 'next/router';
 
 import cx from 'classnames';
 import { usePlausible } from 'next-plausible';
-import { SCENARIO_EDITING_META_DATA_DEFAULT_VALUES } from 'utils/utils-scenarios';
 
 import { useMe } from 'hooks/me';
 import { useProject } from 'hooks/projects';
@@ -44,7 +43,7 @@ export const ScenariosRun: React.FC<ScenariosRunProps> = () => {
 
   const { data: scenarioData } = useScenario(sid);
   const { metadata } = scenarioData || {};
-  const { scenarioEditingMetadata = SCENARIO_EDITING_META_DATA_DEFAULT_VALUES } = metadata || {};
+  const { scenarioEditingMetadata } = metadata || {};
 
   const saveScenarioMutation = useSaveScenario({
     requestConfig: {

app/layout/scenarios/edit/tabs/component.tsx

@@ -7,7 +7,6 @@ import { useRouter } from 'next/router';
 import { getScenarioEditSlice } from 'store/slices/scenarios/edit';
 
 import { motion } from 'framer-motion';
-import { SCENARIO_EDITING_META_DATA_DEFAULT_VALUES } from 'utils/utils-scenarios';
 
 import { useScenario } from 'hooks/scenarios';
 
@@ -32,7 +31,7 @@ export const ScenariosSidebarTabs: React.FC<ScenariosSidebarTabsProps> = () => {
   const { scenarioEditingMetadata } = metadata || {};
   const {
     status: metaStatus,
-  } = scenarioEditingMetadata || SCENARIO_EDITING_META_DATA_DEFAULT_VALUES;
+  } = scenarioEditingMetadata;
 
   const scenarioSlice = getScenarioEditSlice(sid);
   const { setTab, setSubTab } = scenarioSlice.actions;

app/layout/scenarios/edit/wdpa/component.tsx

@@ -7,7 +7,6 @@ import { useRouter } from 'next/router';
 import { getScenarioEditSlice } from 'store/slices/scenarios/edit';
 
 import { motion } from 'framer-motion';
-import { SCENARIO_EDITING_META_DATA_DEFAULT_VALUES } from 'utils/utils-scenarios';
 
 import { useProject } from 'hooks/projects';
 import { useScenario } from 'hooks/scenarios';
@@ -45,7 +44,7 @@ export const ScenariosSidebarEditWDPA: React.FC<ScenariosSidebarEditWDPAProps> =
 
   const {
     subtab: metaSubtab,
-  } = scenarioEditingMetadata || SCENARIO_EDITING_META_DATA_DEFAULT_VALUES;
+  } = scenarioEditingMetadata;
 
   const { data: wdpaData } = useWDPACategories({
     adminAreaId: projectData?.adminAreaLevel2Id

app/layout/scenarios/show/map/component.tsx

@@ -18,6 +18,7 @@ import {
 } from 'hooks/map';
 import { useProject } from 'hooks/projects';
 import { useScenario, useScenarioPU } from 'hooks/scenarios';
+import { useBestSolution } from 'hooks/solutions';
 
 import Map from 'components/map';
 // Controls
@@ -52,11 +53,18 @@ export const ScenariosMap: React.FC<ScenariosShowMapProps> = () => {
 
   const { wdpaIucnCategories, wdpaThreshold } = scenarioData || {};
 
+  const {
+    data: bestSolutionData,
+  } = useBestSolution(sid);
+
+  const bestSolution = bestSolutionData || {};
+
   getScenarioSlice(sid);
 
   const {
     tab,
     subtab,
+    selectedSolutionId,
   } = useSelector((state) => state[`/scenarios/${sid}`]);
 
   const minZoom = 2;
@@ -74,6 +82,7 @@ export const ScenariosMap: React.FC<ScenariosShowMapProps> = () => {
       wdpaThreshold,
       puIncludedValue: included,
       puExcludedValue: excluded,
+      solution: selectedSolutionId || bestSolution.id,
     },
   });
 
@@ -87,6 +96,7 @@ export const ScenariosMap: React.FC<ScenariosShowMapProps> = () => {
       wdpaThreshold,
       puIncludedValue: included,
       puExcludedValue: excluded,
+      solution: selectedSolutionId || bestSolution.id,
     },
   });
 

app/layout/scenarios/show/solutions/details/component.tsx

@@ -52,10 +52,10 @@ export const ScenariosSolutionsDetails: React.FC<ScenariosSolutionsDetailsProps>
     isFetched: bestSolutionisFetched,
   } = useBestSolution(sid);
 
-  const isBestSolutionShown = selectedSolutionId === bestSolutionData.id || !selectedSolutionId;
+  const isBestSolutionShown = selectedSolutionId === bestSolutionData?.id || !selectedSolutionId;
 
   const solutionIsLoading = bestSolutionisFetching && !bestSolutionisFetched
-  && selectedSolutionisFetching && !selectedSolutionisFetched;
+    && selectedSolutionisFetching && !selectedSolutionisFetched;
 
   const frequencyValues = [
     {
@@ -157,12 +157,12 @@ export const ScenariosSolutionsDetails: React.FC<ScenariosSolutionsDetailsProps>
               iconClassName="w-10 h-10 text-primary-500"
             />
             {(selectedSolutionData || bestSolutionData) && (
-            <SolutionSelected
-              best={isBestSolutionShown}
-              values={selectedSolutionData || bestSolutionData}
-              onToggleSelectedSolutionOnMap={onToggleSelectedSolutionOnMap}
-              selectedSolutionOnMap={selectedSolutionOnMap}
-            />
+              <SolutionSelected
+                best={isBestSolutionShown}
+                values={selectedSolutionData || bestSolutionData}
+                onToggleSelectedSolutionOnMap={onToggleSelectedSolutionOnMap}
+                selectedSolutionOnMap={selectedSolutionOnMap}
+              />
             )}
           </div>
         </div>