[N/A]: cost surfaces adjustments after API implementation

app/hooks/cost-surface/index.ts

@@ -5,52 +5,50 @@ import { useSession } from 'next-auth/react';
 import { CostSurface } from 'types/api/cost-surface';
 import { Project } from 'types/api/project';
 
-import { API } from 'services/api';
+import { API, JSONAPI } from 'services/api';
 import UPLOADS from 'services/uploads';
 
 export function useProjectCostSurfaces<T = CostSurface[]>(
   pid: Project['id'],
-  params: { search?: string; sort?: string } = {},
+  params: { sort?: string } = {},
   queryOptions: QueryObserverOptions<CostSurface[], Error, T> = {}
 ) {
   const { data: session } = useSession();
 
-  const mockData: CostSurface[] = [
-    {
-      id: 'b7454579-c48e-4e2f-8438-833280cb65d8',
-      name: 'Brazil 15 k Cost Surface',
-      isCustom: true,
-      scenarioUsageCount: 3,
-    },
-    {
-      id: 'rfjghhrtersdtbkjshfw',
-      name: 'Cost Surface Rwanda B',
-      isCustom: true,
-      scenarioUsageCount: 0,
-    },
-    {
-      id: '23275455HGVVCMSJHDFk',
-      name: 'Cost Surface Rwanda C',
-      isCustom: true,
-      scenarioUsageCount: 0,
-    },
-  ];
-
   return useQuery({
     queryKey: ['cost-surfaces', pid],
     queryFn: async () =>
-      API.request<CostSurface[]>({
+      JSONAPI.request<{ data: CostSurface[] }>({
         method: 'GET',
-        // !TODO: change this to the correct endpoint
-        url: `/projects/${pid}/protected-areas`,
+        url: `/projects/${pid}/cost-surfaces`,
         headers: {
           Authorization: `Bearer ${session.accessToken}`,
         },
         params,
-      }).then(({ data }) => mockData),
-    // TODO: enable this when the endpoint is ready
-    enabled: true,
-    // enabled: Boolean(pid),
+      }).then(({ data }) => data?.data),
+    enabled: Boolean(pid),
+    ...queryOptions,
+  });
+}
+
+export function useProjectCostSurface<T = CostSurface>(
+  pid: Project['id'],
+  csid: CostSurface['id'],
+  queryOptions: QueryObserverOptions<CostSurface, Error, T> = {}
+) {
+  const { data: session } = useSession();
+
+  return useQuery({
+    queryKey: ['cost-surface', csid],
+    queryFn: async () =>
+      JSONAPI.request<{ data: CostSurface }>({
+        method: 'GET',
+        url: `/projects/${pid}/cost-surfaces/${csid}`,
+        headers: {
+          Authorization: `Bearer ${session.accessToken}`,
+        },
+      }).then(({ data }) => data?.data),
+    enabled: Boolean(csid),
     ...queryOptions,
   });
 }
@@ -67,7 +65,6 @@ export function useEditProjectCostSurface() {
     projectId: Project['id'];
     body: Record<string, unknown>;
   }) => {
-    // TODO: change this to the correct endpoint
     return API.patch<CostSurface>(
       `projects/${projectId}/cost-surfaces/${costSurfaceId}`,
       {
@@ -90,8 +87,7 @@ export function useUploadProjectCostSurface() {
   const uploadProjectCostSurface = ({ id, data }: { id: CostSurface['id']; data: FormData }) => {
     return UPLOADS.request({
       method: 'POST',
-      // TODO: change this to the correct endpoint
-      url: `/projects/${id}/cost-surface/shapefile`,
+      url: `/projects/${id}/cost-surfaces/shapefile`,
       data,
       headers: {
         Authorization: `Bearer ${session.accessToken}`,

app/hooks/map/constants.tsx

@@ -313,22 +313,6 @@ export const LEGEND_LAYERS = {
       visibility: true,
     },
   }),
-  // 'features-highlight': () => ({
-  //   id: 'features-highlight',
-  //   name: 'Selected Features',
-  //   icon: (
-  //     <Icon
-  //       icon={HEXAGON_SVG}
-  //       className="mt-0.5 h-3.5 w-3.5 stroke-current stroke-2"
-  //       style={{ color: COLORS.highlightFeatures }}
-  //     />
-  //   ),
-  //   settingsManager: {
-  //     opacity: true,
-  //     visibility: true,
-  //   },
-  // }),
-
   // ANALYSIS
   ['features-abundance']: (options: {
     items: {
@@ -366,7 +350,7 @@ export const LEGEND_LAYERS = {
   },
   'cost-surface': (options: {
     items: { id: CostSurface['id']; name: CostSurface['name']; min?: number; max?: number }[];
-    onChangeVisibility: () => void;
+    onChangeVisibility: (id: CostSurface['id']) => void;
   }) => {
     const { items, onChangeVisibility } = options;
 
@@ -388,7 +372,9 @@ export const LEGEND_LAYERS = {
           value: `${max}`,
         },
       ],
-      onChangeVisibility,
+      onChangeVisibility: () => {
+        onChangeVisibility?.(id);
+      },
     }));
   },
   'lock-available': (options) => {

app/hooks/map/index.ts

@@ -1,6 +1,10 @@
 import { useMemo } from 'react';
 
 import chroma from 'chroma-js';
+import { Layer } from 'mapbox-gl';
+
+import { CostSurface } from 'types/api/cost-surface';
+import { Project } from 'types/api/project';
 
 import { COLORS, LEGEND_LAYERS } from './constants';
 import {
@@ -171,6 +175,56 @@ export function useGridPreviewLayer({ active, gridId, cache = 0 }: UseGridPrevie
   }, [active, gridId, cache]);
 }
 
+export function useCostSurfaceLayer({
+  active,
+  pid,
+  costSurfaceId,
+  layerSettings,
+}: {
+  active: boolean;
+  pid: Project['id'];
+  costSurfaceId: CostSurface['id'];
+  layerSettings: UsePUGridLayer['options']['settings']['cost-surface'];
+}): Layer {
+  return useMemo(() => {
+    if (!active) return null;
+
+    return {
+      id: `cost-surface-layer-${pid}-${costSurfaceId}`,
+      type: 'vector',
+      source: {
+        type: 'vector',
+        tiles: [
+          `${process.env.NEXT_PUBLIC_API_URL}/api/v1/projects/${pid}/cost-surfaces/${costSurfaceId}/preview/tiles/{z}/{x}/{y}.mvt`,
+        ],
+      },
+      render: {
+        layers: [
+          {
+            type: 'fill',
+            'source-layer': 'layer0',
+            layout: {
+              visibility: layerSettings.visibility ? 'visible' : 'none',
+            },
+            paint: {
+              'fill-color': [
+                'interpolate',
+                ['linear'],
+                ['get', 'cost'],
+                layerSettings.min === layerSettings.max ? 0 : layerSettings.min,
+                COLORS.cost[0],
+                layerSettings.max,
+                COLORS.cost[1],
+              ],
+              'fill-opacity': 0.75 * (layerSettings.opacity || 1),
+            },
+          },
+        ],
+      },
+    };
+  }, [active, pid, costSurfaceId, layerSettings]);
+}
+
 // WDPA preview layer
 export function useWDPAPreviewLayer({
   pid,
@@ -601,14 +655,9 @@ export function usePUGridLayer({
     const {
       wdpaIucnCategories = [],
       wdpaThreshold = 0,
-      cost = {
-        min: 0,
-        max: 100,
-      },
       puIncludedValue,
       puExcludedValue,
       puAvailableValue,
-      // features = [],
       preHighlightFeatures = [],
       postHighlightFeatures = [],
       runId,
@@ -617,8 +666,6 @@ export function usePUGridLayer({
     const {
       pugrid: PUgridSettings = {},
       'wdpa-percentage': WdpaPercentageSettings = {},
-      // features: FeaturesSettings = {},
-      'cost-surface': CostSettings = {},
       'lock-in': LockInSettings = {},
       'lock-out': LockOutSettings = {},
       'lock-available': LockAvailableSettings = {},
@@ -630,9 +677,6 @@ export function usePUGridLayer({
     const { opacity: PUgridOpacity = 1, visibility: PUgridVisibility = true } = PUgridSettings;
     const { opacity: WdpaPercentageOpacity = 1, visibility: WdpaPercentageVisibility = true } =
       WdpaPercentageSettings;
-    // const { opacity: FeaturesOpacity = 1, visibility: FeaturesVisibility = true } =
-    //   FeaturesSettings;
-    const { opacity: CostOpacity = 1, visibility: CostVisibility = true } = CostSettings;
     const { opacity: LockInOpacity = 1, visibility: LockInVisibility = true } = LockInSettings;
     const { opacity: LockOutOpacity = 1, visibility: LockOutVisibility = true } = LockOutSettings;
     const { opacity: LockAvailableOpacity = 1, visibility: LockAvailableVisibility = true } =
@@ -723,31 +767,6 @@ export function usePUGridLayer({
               ]
             : []),
 
-          // ANALYSIS - COST SURFACE
-          ...(sublayers.includes('cost')
-            ? [
-                {
-                  type: 'fill',
-                  'source-layer': 'layer0',
-                  layout: {
-                    visibility: getLayerVisibility(CostVisibility),
-                  },
-                  paint: {
-                    'fill-color': [
-                      'interpolate',
-                      ['linear'],
-                      ['get', 'costValue'],
-                      cost.min === cost.max ? 0 : cost.min,
-                      COLORS.cost[0],
-                      cost.max,
-                      COLORS.cost[1],
-                    ],
-                    'fill-opacity': 0.75 * CostOpacity,
-                  },
-                },
-              ]
-            : []),
-
           // PROTECTED AREAS
           ...(sublayers.includes('wdpa-percentage') &&
           wdpaThreshold !== null &&

app/hooks/map/types.ts

@@ -1,6 +1,7 @@
 import { PUAction } from 'store/slices/scenarios/types';
 
 import { TargetSPFItemProps } from 'components/features/target-spf-item/types';
+import { CostSurface } from 'types/api/cost-surface';
 import { Feature } from 'types/api/feature';
 import { Scenario } from 'types/api/scenario';
 import { WDPA } from 'types/api/wdpa';
@@ -145,6 +146,8 @@ export interface UsePUGridLayer {
       'cost-surface'?: {
         opacity?: number;
         visibility?: boolean;
+        min: CostSurface['min'];
+        max: CostSurface['max'];
       };
       'lock-in'?: {
         opacity?: number;

app/hooks/scenarios/index.ts

@@ -34,8 +34,6 @@ import {
   UseScenariosOptionsProps,
   UseDeleteScenarioProps,
   DeleteScenarioProps,
-  UseUploadScenarioCostSurfaceProps,
-  UploadScenarioCostSurfaceProps,
   UseUploadScenarioPUProps,
   UploadScenarioPUProps,
   UseSaveScenarioPUProps,
@@ -650,36 +648,6 @@ export function useCostSurfaceRange(id: Scenario['id']) {
   }, [query, data]);
 }
 
-export function useUploadCostSurface({
-  requestConfig = {
-    method: 'GET',
-  },
-}: UseUploadScenarioCostSurfaceProps) {
-  const { data: session } = useSession();
-
-  const uploadScenarioCostSurface = ({ id, data }: UploadScenarioCostSurfaceProps) => {
-    return UPLOADS.request({
-      url: `/scenarios/${id}/cost-surface/shapefile`,
-      data,
-      headers: {
-        Authorization: `Bearer ${session.accessToken}`,
-        'Content-Type': 'multipart/form-data',
-      },
-      ...requestConfig,
-    });
-  };
-
-  return useMutation(uploadScenarioCostSurface, {
-    onSuccess: (data, variables, context) => {
-      console.info('Success', data, variables, context);
-    },
-    onError: (error, variables, context) => {
-      // An error happened!
-      console.info('Error', error, variables, context);
-    },
-  });
-}
-
 // PLANNING UNITS
 export function useScenarioPU(
   sid: string,

app/hooks/scenarios/types.ts

@@ -39,15 +39,6 @@ export interface UploadScenarioPUProps {
   data: FormData;
 }
 
-export interface UseUploadScenarioCostSurfaceProps {
-  requestConfig?: AxiosRequestConfig;
-}
-
-export interface UploadScenarioCostSurfaceProps {
-  id?: string;
-  data: any;
-}
-
 export interface UseSaveScenarioPUProps {
   requestConfig?: AxiosRequestConfig;
 }

app/layout/project/navigation/hooks.tsx

@@ -19,7 +19,7 @@ export const useInventoryItems = (): SubMenuItem[] => {
   const { showCS } = useFeatureFlags();
   const { query, route } = useRouter();
   const { pid, tab } = query as { pid: string; tab: string };
-  const isProjectRoute = route.startsWith('/projects/[pid]');
+  const isProjectRoute = route.startsWith('/projects/[pid]') && !route.includes('/scenarios');
 
   return [
     {

app/layout/project/navigation/index.tsx

@@ -63,7 +63,7 @@ export const Navigation = (): JSX.Element => {
   const { query, route } = useRouter();
   const { pid, sid, tab } = query as { pid: string; sid: string; tab: string };
 
-  const isProjectRoute = route.startsWith('/projects/[pid]');
+  const isProjectRoute = route.startsWith('/projects/[pid]') && !route.includes('/scenarios');
   const isScenarioRoute = route.startsWith('/projects/[pid]/scenarios/') && !route.endsWith('/new');
 
   const { addToast } = useToasts();

app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx

@@ -40,10 +40,8 @@ const RowItem = ({
       >
         <span className="inline-flex">{name}</span>
         <div className="mt-1.5 text-xs text-gray-400">
-          Currently in use in
-          <span className="rounded bg-blue-600 bg-opacity-10 px-1 text-blue-600">
-            {scenarios}
-          </span>{' '}
+          Currently in use in{' '}
+          <span className="rounded bg-blue-600 bg-opacity-10 px-1 text-blue-600">{scenarios}</span>{' '}
           scenarios.
         </div>
       </td>

app/layout/project/sidebar/project/inventory-panel/cost-surfaces/bulk-action-menu/utils.ts

@@ -17,7 +17,7 @@ export function bulkDeleteCostSurfaceFromProject(
     pid: Project['id'];
     csid: CostSurface['id'];
   }) => {
-    return PROJECTS.delete(`/${pid}/cost-surfaces/${csid}`, {
+    return PROJECTS.delete(`/${pid}/cost-surface/${csid}`, {
       headers: {
         Authorization: `Bearer ${session.accessToken}`,
       },