Merge pull request #884 from Vizzuality/feature/grid-tiles

Grid tiles
Vizzuality · Mar 14, 2022 · 4c01004 · 4c01004
2 parents 0767a81 + 53b1463
commit 4c01004
Show file tree

Hide file tree

Showing 16 changed files with 295 additions and 71 deletions.
diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
@@ -24,7 +24,7 @@ jobs:
         uses: actions/setup-node@v1
         with:
           working-directory: app
-          node-version: '12.13.x'
+          node-version: '14.19.x'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

diff --git a/api/apps/api/src/modules/projects/projects.controller.ts b/api/apps/api/src/modules/projects/projects.controller.ts
@@ -417,6 +417,7 @@ export class ProjectsController {
       throw new ForbiddenException();
     }
     req.url = req.url.replace(result.right.from, result.right.to);
+    req.originalUrl = req.originalUrl.replace(result.right.from, result.right.to);
 
     return await this.proxyService.proxyTileRequest(req, response);
   }
@@ -461,7 +462,13 @@ export class ProjectsController {
     if (isLeft(result)) {
       throw new ForbiddenException();
     }
+
+
+
     req.url = req.url.replace(result.right.from, result.right.to);
+    req.originalUrl = req.originalUrl.replace(result.right.from, result.right.to);
+
+    req.query = result.right.query;
 
     return await this.proxyService.proxyTileRequest(req, response);
   }

diff --git a/api/apps/api/src/modules/projects/projects.service.ts b/api/apps/api/src/modules/projects/projects.service.ts
@@ -195,9 +195,10 @@ export class ProjectsService {
   ): Promise<
     Either<
       GetProjectErrors | typeof forbiddenError | typeof projectNotFound,
-      { from: string; to: string }
+      { from: string; to: string, query: {} }
     >
   > {
+
     if (!(await this.projectAclService.canViewProject(userId, projectId))) {
       return left(forbiddenError);
     }
@@ -207,24 +208,25 @@ export class ProjectsService {
     if (!project.planningUnitGridShape) {
       return left(projectNotFound);
     }
-    project.bbox[0];
-    /*
+    /**
     we are redirecting to the planning area service to get the tiles.
 
     @todo: In the future we should decouple this text url stuff.
 
-    **/
+    */
     if (project.planningUnitGridShape === 'from_shapefile') {
       return right({
         from: `/projects/${projectId}/grid/tiles`,
-        to: `/projects/planning-area/${projectId}/preview/tiles`,
+        to: `/projects/planning-area/${projectId}/grid/preview/tiles`,
+        query: {}
       });
     } else {
       return right({
         from: `/projects/${projectId}/grid/tiles/${z}/${x}/${y}.mvt`,
-        to: `/planning-units/preview/regular/${project.planningUnitGridShape}/${
-          project.planningUnitAreakm2
-        }/tiles/${z}/${x}/${y}.mvt?bbox=${project.bbox.join(',')}`,
+        to: `/planning-units/preview/regular/${project.planningUnitGridShape}/${project.planningUnitAreakm2}/tiles/${z}/${x}/${y}.mvt?bbox=${JSON.stringify(project.bbox)}`,
+        query: {
+          bbox: JSON.stringify(project.bbox),
+        }
       });
     }
   }

diff --git a/app/components/map/legend/component.tsx b/app/components/map/legend/component.tsx
@@ -46,6 +46,7 @@ export const Legend: React.FC<LegendProps> = ({
     <div
       className={cx({
         'bg-black rounded-3xl flex flex-col flex-grow overflow-hidden w-full': true,
+        hidden: !isChildren,
         [className]: !!className,
       })}
     >

diff --git a/app/hooks/map/index.ts b/app/hooks/map/index.ts
@@ -5,18 +5,30 @@ import cx from 'classnames';
 
 import { COLORS, LEGEND_LAYERS } from './constants';
 import {
+  UseGeoJSONLayer,
+
   UseAdminPreviewLayer,
+  UsePlanningAreaPreviewLayer,
+  UseWDPAPreviewLayer,
   UseFeaturePreviewLayer,
   UseFeaturePreviewLayers,
-  UseGeoJSONLayer,
-  UseLegend,
-  UsePUCompareLayer,
-  UsePUGridLayer,
   UsePUGridPreviewLayer,
-  UseWDPAPreviewLayer,
+
+  UseProyectPlanningAreaLayer,
+  UseProyectGridLayer,
+
+  UsePUGridLayer,
+  UsePUCompareLayer,
+
+  UseLegend,
+  UseGridPreviewLayer,
 } from './types';
 
-// GeoJSON
+/**
+ *******************************************************************
+ * GLOBAL LAYERS
+ *******************************************************************
+ */
 export function useGeoJsonLayer({
   id, active, data, options,
 }: UseGeoJSONLayer) {
@@ -47,7 +59,13 @@ export function useGeoJsonLayer({
   }, [id, active, data, customPAshapefileGrid]);
 }
 
-// AdminPreview
+/**
+ *******************************************************************
+ * PREVIEW LAYERS
+ *******************************************************************
+ */
+
+// Admin preview layer
 export function useAdminPreviewLayer({
   active, country, region, subregion, cache = 0,
 }: UseAdminPreviewLayer) {
@@ -87,7 +105,68 @@ export function useAdminPreviewLayer({
   }, [active, level, guid, cache]);
 }
 
-// WDPApreview
+// Planning area preview layer
+export function usePlanningAreaPreviewLayer({
+  active, planningAreaId, cache = 0,
+}: UsePlanningAreaPreviewLayer) {
+  return useMemo(() => {
+    if (!active || !planningAreaId) return null;
+
+    return {
+      id: `planning-area-preview-layer-${planningAreaId}-${cache}`,
+      type: 'vector',
+      source: {
+        type: 'vector',
+        tiles: [`${process.env.NEXT_PUBLIC_API_URL}/api/v1/projects/planning-area/${planningAreaId}/preview/tiles/{z}/{x}/{y}.mvt`],
+      },
+      render: {
+        layers: [
+          {
+            type: 'line',
+            'source-layer': 'layer0',
+            paint: {
+              'line-color': '#FFF',
+              'line-width': 3,
+            },
+          },
+        ],
+      },
+    };
+  }, [active, planningAreaId, cache]);
+}
+
+export function useGridPreviewLayer({
+  active, gridId, cache = 0,
+}: UseGridPreviewLayer) {
+  return useMemo(() => {
+    if (!active || !gridId) return null;
+
+    return {
+      id: `grid-preview-layer-${gridId}-${cache}`,
+      type: 'vector',
+      source: {
+        type: 'vector',
+        tiles: [`${process.env.NEXT_PUBLIC_API_URL}/api/v1/projects/planning-area/${gridId}/grid/preview/tiles/{z}/{x}/{y}.mvt`],
+      },
+      render: {
+        layers: [
+          {
+            type: 'line',
+            'source-layer': 'layer0',
+            paint: {
+              'line-width': 1,
+              'line-color': COLORS.primary,
+              'line-opacity': 0.5,
+            },
+
+          },
+        ],
+      },
+    };
+  }, [active, gridId, cache]);
+}
+
+// WDPA preview layer
 export function useWDPAPreviewLayer({
   pid, active, bbox, wdpaIucnCategories, cache = 0, options,
 }: UseWDPAPreviewLayer) {
@@ -142,7 +221,7 @@ export function useWDPAPreviewLayer({
   }, [pid, active, bbox, wdpaIucnCategories, cache, opacity, visibility]);
 }
 
-// Featurepreview
+// Feature preview layer
 export function useFeaturePreviewLayer({
   active, bbox, id, cache = 0,
 }: UseFeaturePreviewLayer) {
@@ -281,7 +360,7 @@ export function useFeaturePreviewLayers({
   }, [active, bbox, features, cache, options]);
 }
 
-// PUGridpreview
+// PU Grid preview layer
 export function usePUGridPreviewLayer({
   active, bbox, planningUnitGridShape, planningUnitAreakm2, cache, options = {},
 }: UsePUGridPreviewLayer) {
@@ -328,7 +407,75 @@ export function usePUGridPreviewLayer({
   }, [active, bbox, planningUnitGridShape, planningUnitAreakm2, cache, options]);
 }
 
-// PUGrid
+/**
+ *******************************************************************
+ * PROYECT LAYERS
+ *******************************************************************
+ */
+export function useProyectPlanningAreaLayer({
+  active, pId, cache = 0,
+}: UseProyectPlanningAreaLayer) {
+  return useMemo(() => {
+    if (!active || !pId) return null;
+
+    return {
+      id: `proyect-planning-area-layer-${pId}-${cache}`,
+      type: 'vector',
+      source: {
+        type: 'vector',
+        tiles: [`${process.env.NEXT_PUBLIC_API_URL}/api/v1/projects/${pId}/planning-area/tiles/{z}/{x}/{y}.mvt`],
+      },
+      render: {
+        layers: [
+          {
+            type: 'line',
+            'source-layer': 'layer0',
+            paint: {
+              'line-color': '#FFF',
+              'line-width': 3,
+            },
+          },
+        ],
+      },
+    };
+  }, [active, pId, cache]);
+}
+
+export function useProyectGridLayer({
+  active, pId, cache = 0,
+}: UseProyectGridLayer) {
+  return useMemo(() => {
+    if (!active || !pId) return null;
+
+    return {
+      id: `proyect-grid-layer-${pId}-${cache}`,
+      type: 'vector',
+      source: {
+        type: 'vector',
+        tiles: [`${process.env.NEXT_PUBLIC_API_URL}/api/v1/projects/${pId}/grid/tiles/{z}/{x}/{y}.mvt`],
+      },
+      render: {
+        layers: [
+          {
+            type: 'line',
+            'source-layer': 'layer0',
+            paint: {
+              'line-color': COLORS.primary,
+              'line-opacity': 0.5,
+            },
+
+          },
+        ],
+      },
+    };
+  }, [active, pId, cache]);
+}
+
+/**
+ *******************************************************************
+ * GRID LAYERS
+ *******************************************************************
+ */
 export function usePUGridLayer({
   active, sid, include, sublayers, options = {}, cache,
 }: UsePUGridLayer) {

diff --git a/app/hooks/map/types.ts b/app/hooks/map/types.ts
@@ -17,6 +17,30 @@ export interface UseAdminPreviewLayer {
   search?: string;
 }
 
+export interface UsePlanningAreaPreviewLayer {
+  cache?: number;
+  active?: boolean;
+  planningAreaId: string;
+}
+
+export interface UseGridPreviewLayer {
+  cache?: number;
+  active?: boolean;
+  gridId: string;
+}
+
+export interface UseProyectPlanningAreaLayer {
+  cache?: number;
+  active?: boolean;
+  pId: string;
+}
+
+export interface UseProyectGridLayer {
+  cache?: number;
+  active?: boolean;
+  pId: string;
+}
+
 export interface UsePUGridPreviewLayer {
   cache?: number;
   active?: boolean;

diff --git a/app/hooks/organizations/index.ts b/app/hooks/organizations/index.ts
@@ -5,6 +5,7 @@ import {
 } from 'react-query';
 
 import flatten from 'lodash/flatten';
+
 import { useSession } from 'next-auth/client';
 
 import ORGANIZATIONS from 'services/organizations';