From 277205ea53fe7dd7dadd7ea56310b67af5167aa3 Mon Sep 17 00:00:00 2001
From: David Inga <david.inga@vizzuality.com>
Date: Wed, 20 Mar 2024 10:56:07 +0100
Subject: [PATCH] fit plots to bounds when data is fetched or changed

---
 client/package.json                           |  1 +
 .../analysis-eudr/map/component.tsx           | 24 +++++++++++++++--
 client/yarn.lock                              | 27 +++++++++++++++++++
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/client/package.json b/client/package.json
index 2d8cdffcf..1c467af1d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -55,6 +55,7 @@
     "@tanstack/react-query": "^4.2.1",
     "@tanstack/react-table": "8.13.2",
     "@tanstack/react-virtual": "3.0.1",
+    "@turf/bbox": "^6.5.0",
     "autoprefixer": "10.2.5",
     "axios": "1.3.4",
     "chroma-js": "2.1.2",
diff --git a/client/src/containers/analysis-eudr/map/component.tsx b/client/src/containers/analysis-eudr/map/component.tsx
index 9131ca3ab..9a8989636 100644
--- a/client/src/containers/analysis-eudr/map/component.tsx
+++ b/client/src/containers/analysis-eudr/map/component.tsx
@@ -1,12 +1,13 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import DeckGL from '@deck.gl/react/typed';
 import { BitmapLayer, GeoJsonLayer } from '@deck.gl/layers/typed';
 import Map from 'react-map-gl/maplibre';
-import { MapView } from '@deck.gl/core/typed';
+import { MapView, WebMercatorViewport } from '@deck.gl/core/typed';
 import { TileLayer } from '@deck.gl/geo-layers/typed';
 import { CartoLayer, setDefaultCredentials, MAP_TYPES, API_VERSIONS } from '@deck.gl/carto/typed';
 import { useParams } from 'next/navigation';
 import { format } from 'date-fns';
+import bbox from '@turf/bbox';
 
 import ZoomControl from './zoom';
 import LegendControl from './legend';
@@ -200,6 +201,25 @@ const EUDRMap = () => {
     setViewState({ ...viewState, zoom });
   }, [viewState]);
 
+  useEffect(() => {
+    if (!plotGeometries.data || !plotGeometries.isLoading) return;
+    const dataBounds = bbox(plotGeometries.data);
+    const newViewport = new WebMercatorViewport(viewState);
+    if (newViewport) {
+      const { latitude, longitude, zoom } = newViewport.fitBounds(
+        [
+          [dataBounds[0], dataBounds[1]],
+          [dataBounds[2], dataBounds[3]],
+        ],
+        {
+          padding: 10,
+        },
+      );
+      setViewState({ ...viewState, latitude, longitude, zoom });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [plotGeometries.data, plotGeometries.isLoading]);
+
   return (
     <>
       <div className="absolute left-0 top-0 h-full w-full overflow-hidden">
diff --git a/client/yarn.lock b/client/yarn.lock
index ed158db3e..f78139c60 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2651,6 +2651,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@turf/bbox@npm:^6.5.0":
+  version: 6.5.0
+  resolution: "@turf/bbox@npm:6.5.0"
+  dependencies:
+    "@turf/helpers": ^6.5.0
+    "@turf/meta": ^6.5.0
+  checksum: 537be56ae0c5ad44e71a691717b35745e947e19a6bd9f20fdac2ab4318caf98cd88472d7dbf576e8b32ead5da034d273ffb3f4559d6d386820ddcb88a1f7fedd
+  languageName: node
+  linkType: hard
+
+"@turf/helpers@npm:^6.5.0":
+  version: 6.5.0
+  resolution: "@turf/helpers@npm:6.5.0"
+  checksum: d57f746351357838c654e0a9b98be3285a14b447504fd6d59753d90c6d437410bb24805d61c65b612827f07f6c2ade823bb7e56e41a1a946217abccfbd64c117
+  languageName: node
+  linkType: hard
+
+"@turf/meta@npm:^6.5.0":
+  version: 6.5.0
+  resolution: "@turf/meta@npm:6.5.0"
+  dependencies:
+    "@turf/helpers": ^6.5.0
+  checksum: c6bb936aa92bf3365e87a50dc65f248e070c5767a36fac390754c00c89bf2d1583418686ab19a10332bfa9340b8cac6aaf2c55dad7f5fcf77f1a2dda75ccf363
+  languageName: node
+  linkType: hard
+
 "@types/chroma-js@npm:2.1.3":
   version: 2.1.3
   resolution: "@types/chroma-js@npm:2.1.3"
@@ -7889,6 +7915,7 @@ __metadata:
     "@tanstack/react-query": ^4.2.1
     "@tanstack/react-table": 8.13.2
     "@tanstack/react-virtual": 3.0.1
+    "@turf/bbox": ^6.5.0
     "@types/chroma-js": 2.1.3
     "@types/d3-format": 3.0.1
     "@types/d3-scale": 4.0.2