Merge pull request #1575 from Vizzuality/MRXN23-502-webshot-is-timing…

…-out-while

[MRXN23-502]: fixes timeout in webshooting solutions report

app/hooks/features/index.ts

@@ -193,11 +193,12 @@ export function useSelectedFeatures(
 
   return useQuery(['selected-features', sid], fetchFeatures, {
     ...queryOptions,
-    enabled: !!sid && featureColorQueryState?.status === 'success',
+    enabled:
+      !!sid && ((featureColorQueryState && featureColorQueryState.status === 'success') || true),
     select: ({ data }) => {
       const { features = [] } = data;
 
-      let parsedData = features.map((d, index) => {
+      let parsedData = features.map((d) => {
         const { featureId, geoprocessingOperations, metadata } = d;
 
         const {
@@ -275,7 +276,9 @@ export function useSelectedFeatures(
             min: amountMin,
             max: amountMax,
           },
-          color: featureColorQueryState.data.find(({ id }) => featureId === id)?.color,
+          color: featureColorQueryState
+            ? featureColorQueryState.data.find(({ id }) => featureId === id)?.color
+            : null,
 
           // SPLIT
           splitOptions,

app/hooks/scenarios/index.ts

@@ -564,44 +564,6 @@ export function useUploadPA({
   return useMutation(uploadPAShapefile);
 }
 
-export function useCostSurfaceRange(id: Scenario['id']) {
-  const { data: session } = useSession();
-
-  const query = useQuery(
-    ['scenarios-cost-surface', id],
-    async () =>
-      // ! this endpoint is deprecated: https://marxan23.northeurope.cloudapp.azure.com/swagger#/Scenario/ScenariosController_getCostRange
-      SCENARIOS.request<{ min: number; max: number }>({
-        method: 'GET',
-        url: `/${id}/cost-surface`,
-        headers: {
-          Authorization: `Bearer ${session.accessToken}`,
-        },
-        transformResponse: (data) => {
-          try {
-            return JSON.parse(data);
-          } catch (error) {
-            return data;
-          }
-        },
-      }).then((response) => {
-        return response.data;
-      }),
-    {
-      enabled: !!id,
-    }
-  );
-
-  const { data } = query;
-
-  return useMemo(() => {
-    return {
-      ...query,
-      data,
-    };
-  }, [query, data]);
-}
-
 // PLANNING UNITS
 export function useScenarioPU(
   sid: string,

app/layout/scenarios/reports/solutions/advanced-settings/index.tsx

@@ -80,8 +80,8 @@ export const AdvancedSettingsPage = (): JSX.Element => {
       <div className="flex w-5/12 flex-col space-y-2">
         {calibrationResultsQuery.data?.map((cr) => {
           return (
-            <div key={cr.scenarioId} className="flex space-x-3 bg-gray-600">
-              <Image src={cr.pngData} alt="Blm Image" width={115} height={115} />
+            <div key={`${cr.scenarioId}-${cr.blmValue}`} className="flex space-x-3 bg-gray-600">
+              {cr.pngData && <Image src={cr.pngData} alt="Blm Image" width={115} height={115} />}
               <div className="flex flex-col space-y-2 py-2 text-sm">
                 <div>
                   <p className="font-medium uppercase text-white">BLM:</p>

app/layout/scenarios/reports/solutions/cost-surface/index.tsx

@@ -2,17 +2,25 @@ import React, { useMemo } from 'react';
 
 import { useRouter } from 'next/router';
 
+import { useProjectCostSurfaces } from 'hooks/cost-surface';
 import { COLORS } from 'hooks/map/constants';
-import { useCostSurfaceRange } from 'hooks/scenarios';
 
 import LegendItem from 'components/map/legend/item';
 import LegendTypeGradient from 'components/map/legend/types/gradient';
 import CostSurfaceReportMap from 'layout/scenarios/reports/solutions/cost-surface/map';
 
 export const CostSurfaceReport = (): JSX.Element => {
   const { query } = useRouter();
-  const { sid } = query as { sid: string };
-  const costSurfaceQuery = useCostSurfaceRange(sid);
+  const { pid, sid } = query as { pid: string; sid: string };
+
+  const costSurfaceQuery = useProjectCostSurfaces(
+    pid,
+    {},
+    {
+      select: (data) =>
+        data.filter((cs) => cs.scenarios.filter((s) => s.id === sid).length > 0)?.[0],
+    }
+  );
 
   const LEGEND = useMemo(() => {
     return {

app/layout/scenarios/reports/solutions/cost-surface/map/index.tsx

@@ -9,14 +9,17 @@ import PluginMapboxGl from '@vizzuality/layer-manager-plugin-mapboxgl';
 import { LayerManager, Layer } from '@vizzuality/layer-manager-react';
 
 import { useAccessToken } from 'hooks/auth';
-import { useBBOX, usePUGridLayer } from 'hooks/map';
+import { useProjectCostSurfaces } from 'hooks/cost-surface';
+import { useBBOX, useCostSurfaceLayer } from 'hooks/map';
 import { useProject } from 'hooks/projects';
 
 import Map from 'components/map';
 
-export const ReportMap = ({ id }: { id: string }): JSX.Element => {
+const minZoom = 2;
+const maxZoom = 20;
+
+export const CostSurfaceReportMap = ({ id }: { id: string }): JSX.Element => {
   const accessToken = useAccessToken();
-  const [cache] = useState<number>(Date.now());
   const [mapTilesLoaded, setMapTilesLoaded] = useState(false);
 
   const { query } = useRouter();
@@ -27,27 +30,31 @@ export const ReportMap = ({ id }: { id: string }): JSX.Element => {
 
   const { data } = useProject(pid);
 
+  const costSurfaceQuery = useProjectCostSurfaces(
+    pid,
+    {},
+    {
+      select: (data) =>
+        data.filter((cs) => cs.scenarios.filter((s) => s.id === sid).length > 0)?.[0],
+    }
+  );
+
   const BBOX = useBBOX({
     bbox: data?.bbox,
   });
 
-  const minZoom = 2;
-  const maxZoom = 20;
   const [viewport, setViewport] = useState({});
   const [bounds, setBounds] = useState(null);
 
-  const PUGridLayer = usePUGridLayer({
-    cache,
-    active: true,
-    sid: sid ? `${sid}` : null,
-    include: 'cost',
-    sublayers: ['cost'],
-    options: {
-      cost: {
-        min: 0,
-        max: 1,
-      },
-      settings: {},
+  const PUGridLayer = useCostSurfaceLayer({
+    active: Boolean(costSurfaceQuery?.data),
+    pid,
+    costSurfaceId: costSurfaceQuery?.data?.id,
+    layerSettings: {
+      opacity: 1,
+      visibility: true,
+      min: costSurfaceQuery?.data?.min,
+      max: costSurfaceQuery?.data?.max,
     },
   });
 
@@ -123,4 +130,4 @@ export const ReportMap = ({ id }: { id: string }): JSX.Element => {
   );
 };
 
-export default ReportMap;
+export default CostSurfaceReportMap;

app/layout/scenarios/reports/solutions/webshot-status/index.tsx

@@ -4,10 +4,11 @@ import { useSelector } from 'react-redux';
 
 import { useRouter } from 'next/router';
 
+import { useProjectCostSurfaces } from 'hooks/cost-surface';
 import { useSelectedFeatures } from 'hooks/features';
 import { useProjectUsers } from 'hooks/project-users';
 import { useProject } from 'hooks/projects';
-import { useCostSurfaceRange, useScenario, useScenarioPU } from 'hooks/scenarios';
+import { useScenario, useScenarioPU } from 'hooks/scenarios';
 import { useWDPACategories } from 'hooks/wdpa';
 
 globalThis.MARXAN = {
@@ -44,8 +45,14 @@ export const WebShotStatus = () => {
 
   const { data: featuresData, isFetched: featuresDataIsFetched } = useSelectedFeatures(sid, {});
 
-  const { data: costSurfaceRangeData, isFetched: costSurfaceRangeDataIsFetched } =
-    useCostSurfaceRange(sid);
+  const costSurfaceQuery = useProjectCostSurfaces(
+    pid,
+    {},
+    {
+      select: (data) =>
+        data.filter((cs) => cs.scenarios.filter((s) => s.id === sid).length > 0)?.[0],
+    }
+  );
 
   const reportDataIsFetched =
     projectData &&
@@ -60,8 +67,8 @@ export const WebShotStatus = () => {
     PUDataIsFetched &&
     featuresData &&
     featuresDataIsFetched &&
-    costSurfaceRangeData &&
-    costSurfaceRangeDataIsFetched &&
+    costSurfaceQuery.data &&
+    costSurfaceQuery.isFetched &&
     mapsLoaded;
 
   useEffect(() => {

app/types/api/cost-surface.ts

@@ -1,8 +1,11 @@
+import { Scenario } from './scenario';
+
 export interface CostSurface {
   id: string;
   name: string;
   isDefault: boolean;
   min: number;
   max: number;
   scenarioUsageCount: number;
+  scenarios?: (Pick<Scenario, 'id' | 'name'> & { type: 'scenarios' })[];
 }