Merge pull request #322 from jeafreezy/oam-temp-fix

hotosm · Feb 9, 2025 · 6252170 · 6252170
2 parents b216228 + d940b7f
commit 6252170
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 34 deletions.
diff --git a/frontend/.env.sample b/frontend/.env.sample
@@ -156,4 +156,14 @@ VITE_FAIR_PREDICTOR_API_URL =  https://predictor-dev.fair.hotosm.org/predict/.
 # The OSM Database status API.
 # Data type: String (e.g., https://api-prod.raw-data.hotosm.org/v1/status/).
 # Default value: https://api-prod.raw-data.hotosm.org/v1/status/.
-VITE_OSM_DATABASE_STATUS_API_URL: https://api-prod.raw-data.hotosm.org/v1/status/
+VITE_OSM_DATABASE_STATUS_API_URL = https://api-prod.raw-data.hotosm.org/v1/status/
+
+# The Base URL for OAM Titiler.
+# Data type: String (e.g.,https://titiler.hotosm.org).
+# Default value: https://titiler.hotosm.org.
+VITE_OAM_TITILER_ENDPOINT = https://titiler.hotosm.org/
+
+# The new S3 bucket for OAM aerial imageries.
+# Data type: String (e.g.,https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/).
+# Default value: https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/.
+VITE_OAM_S3_BUCKET_URL = https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/
diff --git a/frontend/src/config/env.ts b/frontend/src/config/env.ts
@@ -246,4 +246,20 @@ export const ENVS = {
     Default value: https://api-prod.raw-data.hotosm.org/v1/status/.
    */
   OSM_DATABASE_STATUS_API_URL: import.meta.env.VITE_OSM_DATABASE_STATUS_API_URL,
+
+  /**
+    The Base URL for OAM's Titiler.
+    Data type: String (e.g.,https://titiler.hotosm.org/).
+    Default value: https://titiler.hotosm.org/.
+  */
+  OAM_TITILER_ENDPOINT: import.meta.env.VITE_OAM_TITILER_ENDPOINT,
+
+  /**
+    The new S3 bucket for OAM aerial imageries.
+    Data type: String (e.g.,https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/).
+    Default value: https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/.
+  */
+
+  OAM_S3_BUCKET_URL: import.meta.env.VITE_OAM_S3_BUCKET_URL,
+
 };
diff --git a/frontend/src/constants/config.ts b/frontend/src/constants/config.ts
@@ -1,6 +1,6 @@
-import { BASE_MODELS } from "@/enums";
-import { ENVS } from "@/config/env";
-import { StyleSpecification } from "maplibre-gl";
+import { BASE_MODELS } from '@/enums';
+import { ENVS } from '@/config/env';
+import { StyleSpecification } from 'maplibre-gl';
 
 /**
  * The key used to store the access token in local storage for the application.
@@ -38,7 +38,7 @@ const REFRESH_BUFFER_MS = 1000;
  */
 export const KPI_STATS_CACHE_TIME_MS =
   (Number(ENVS.KPI_STATS_CACHE_TIME) || DEFAULT_KPI_STATS_CACHE_TIME_SECONDS) *
-    1000 +
+  1000 +
   REFRESH_BUFFER_MS;
 
 /**
@@ -241,3 +241,20 @@ export const MAX_GEOJSON_FILE_UPLOAD_FOR_TRAINING_AREAS =
 */
 export const MAX_ACCEPTABLE_POLYGON_IN_TRAINING_AREA_GEOJSON_FILE =
   ENVS.MAX_ACCEPTABLE_POLYGON_IN_TRAINING_AREA_GEOJSON_FILE || 10;
+
+
+/**
+  The Base URL for OAM's Titiler.
+  Data type: String (e.g.,https://titiler.hotosm.org/).
+  Default value: https://titiler.hotosm.org/.
+*/
+export const OAM_TITILER_ENDPOINT = ENVS.OAM_TITILER_ENDPOINT || "https://titiler.hotosm.org/";
+
+
+
+/**
+  The new S3 bucket for OAM aerial imageries.
+  Data type: String (e.g.,https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/).
+  Default value: https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/.
+*/
+export const OAM_S3_BUCKET_URL = ENVS.OAM_S3_BUCKET_URL || "https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/";
diff --git a/frontend/src/features/model-creation/components/training-area/open-area-map.tsx b/frontend/src/features/model-creation/components/training-area/open-area-map.tsx
@@ -1,10 +1,11 @@
-import { FullScreenIcon } from "@/components/ui/icons";
-import { Map } from "maplibre-gl";
-import { MODELS_CONTENT } from "@/constants";
-import { ToolTip } from "@/components/ui/tooltip";
-import { truncateString } from "@/utils";
-import { useCallback, useEffect } from "react";
-import { useGetTMSTileJSON } from "@/features/model-creation/hooks/use-tms-tilejson";
+import { FullScreenIcon } from '@/components/ui/icons';
+import { Map } from 'maplibre-gl';
+import { MODELS_CONTENT } from '@/constants';
+import { showErrorToast, truncateString } from '@/utils';
+import { ToolTip } from '@/components/ui/tooltip';
+import { useCallback, useEffect } from 'react';
+import { useGetTMSTileJSON } from '@/features/model-creation/hooks/use-tms-tilejson';
+import { useGetTrainingDataset } from '@/features/models/hooks/use-dataset';
 import {
   MODEL_CREATION_FORM_NAME,
   useModelsContext,
@@ -13,14 +14,25 @@ import {
 const OpenAerialMap = ({
   tileJSONURL,
   map,
+  trainingDatasetId,
 }: {
   tileJSONURL: string;
   map: Map | null;
+  trainingDatasetId: number;
 }) => {
   const { handleChange } = useModelsContext();
 
   const { isPending, data, isError } = useGetTMSTileJSON(tileJSONURL);
 
+  const { data: trainingDataset, isError: trainingDatasetFetchError } =
+    useGetTrainingDataset(trainingDatasetId);
+
+  useEffect(() => {
+    if (trainingDatasetFetchError) {
+      showErrorToast(undefined, 'Failed to fetch training dataset');
+    }
+  }, [trainingDatasetFetchError]);
+
   const fitToTMSBounds = useCallback(() => {
     if (!map || !data?.bounds) return;
     map?.fitBounds(data?.bounds);
@@ -59,7 +71,7 @@ const OpenAerialMap = ({
                 className="basis-4/5 text-start text-body-3 text-wrap w-full"
                 title={data?.name}
               >
-                {truncateString(data?.name, 40)}
+                {truncateString(trainingDataset?.name, 40)}
               </p>
               <ToolTip
                 content={

diff --git a/frontend/src/features/model-creation/components/training-area/training-area.tsx b/frontend/src/features/model-creation/components/training-area/training-area.tsx
@@ -1,18 +1,18 @@
-import FileUploadDialog from "@/features/model-creation/components/dialogs/file-upload-dialog";
-import OpenAerialMap from "@/features/model-creation/components/training-area/open-area-map";
-import TrainingAreaList from "@/features/model-creation/components/training-area/training-area-list";
-import TrainingAreaMap from "@/features/model-creation/components/training-area/training-area-map";
-import useScreenSize from "@/hooks/use-screen-size";
-import { Button, ButtonWithIcon } from "@/components/ui/button";
-import { DrawingModes, SHOELACE_SIZES } from "@/enums";
-import { geojsonToWKT } from "@terraformer/wkt";
-import { MODELS_CONTENT, TOAST_NOTIFICATIONS } from "@/constants";
-import { Polygon } from "geojson";
-import { StepHeading } from "@/features/model-creation/components/";
-import { UploadIcon, YouTubePlayIcon } from "@/components/ui/icons";
-import { useDialog } from "@/hooks/use-dialog";
-import { useEffect, useState } from "react";
-import { useMapInstance } from "@/hooks/use-map-instance";
+import FileUploadDialog from '@/features/model-creation/components/dialogs/file-upload-dialog';
+import OpenAerialMap from '@/features/model-creation/components/training-area/open-area-map';
+import TrainingAreaList from '@/features/model-creation/components/training-area/training-area-list';
+import TrainingAreaMap from '@/features/model-creation/components/training-area/training-area-map';
+import useScreenSize from '@/hooks/use-screen-size';
+import { Button, ButtonWithIcon } from '@/components/ui/button';
+import { DrawingModes, SHOELACE_SIZES } from '@/enums';
+import { geojsonToWKT } from '@terraformer/wkt';
+import { MODELS_CONTENT, TOAST_NOTIFICATIONS } from '@/constants';
+import { Polygon } from 'geojson';
+import { StepHeading } from '@/features/model-creation/components/';
+import { UploadIcon, YouTubePlayIcon } from '@/components/ui/icons';
+import { useDialog } from '@/hooks/use-dialog';
+import { useEffect, useState } from 'react';
+import { useMapInstance } from '@/hooks/use-map-instance';
 import {
   MODEL_CREATION_FORM_NAME,
   useModelsContext,
@@ -105,7 +105,7 @@ const TrainingAreaForm = () => {
         </div>
 
         <div className="border-t-8 border-x-8 border-off-white mb-10 fullscreen md:no-fullscreen md:hidden">
-          <OpenAerialMap tileJSONURL={tileJSONURL} map={map} />
+          <OpenAerialMap tileJSONURL={tileJSONURL} map={map} trainingDatasetId={Number(formData.selectedTrainingDatasetId)} />
         </div>
         <div className="h-full grid grid-cols-12 md:grid-cols-9  border-8 border-off-white fullscreen md:no-fullscreen">
           <div className="w-full h-[90vh] col-span-12 md:col-span-6 2xl:col-span-7">
@@ -123,7 +123,7 @@ const TrainingAreaForm = () => {
             />
           </div>
           <div className="hidden md:flex h-[90vh] max-h-screen col-span-12 md:col-span-3 2xl:col-span-2 flex-col w-full border-l-8 border-off-white gap-y-6 py-4 ">
-            <OpenAerialMap tileJSONURL={tileJSONURL} map={map} />
+            <OpenAerialMap tileJSONURL={tileJSONURL} map={map} trainingDatasetId={Number(formData.selectedTrainingDatasetId)} />
             <TrainingAreaList
               offset={offset}
               setOffset={setOffset}

diff --git a/frontend/src/features/model-creation/hooks/use-tms-tilejson.ts b/frontend/src/features/model-creation/hooks/use-tms-tilejson.ts
@@ -1,5 +1,6 @@
-import { useQuery } from "@tanstack/react-query";
-import { getTMSTileJSONQueryOptions } from "@/features/model-creation/api/factory";
+import { getTMSTileJSONQueryOptions } from '@/features/model-creation/api/factory';
+import { useQuery } from '@tanstack/react-query';
+
 
 export const useGetTMSTileJSON = (url: string) => {
   return useQuery({

diff --git a/frontend/src/utils/string-utils.ts b/frontend/src/utils/string-utils.ts
@@ -1,3 +1,5 @@
+import { OAM_S3_BUCKET_URL, OAM_TITILER_ENDPOINT } from '@/constants';
+
 /**
  * Truncates a string to a specified maximum length, appending ellipsis if truncated.
  *
@@ -16,6 +18,16 @@ export const truncateString = (string?: string, maxLength: number = 30) => {
   return string;
 };
 
-export const extractTileJSONURL = (openAerialMapTMSURL: string) => {
-  return openAerialMapTMSURL.split("/{z}/{x}/{y}")[0];
+
+export const extractTileJSONURL = (OAMTMSURL: string) => {
+
+  // Before, when we hit this url https://tiles.openaerialmap.org/63b457ba3fb8c100063c55f0/0/63b457ba3fb8c100063c55f1/{z}/{x}/{y} (without the /{z}/{x}/{y}), 
+  // we get the TileJSON which is passed to Maplibre GL JS to render the aerial imagery, but with the recent OAM updates
+  // we have to grab the unique id of the aerial imagery, construct the new S3 bucket location and give it to titiler to get the new TileJSON. 
+  const uniqueImageryId = OAMTMSURL
+    .replace('https://tiles.openaerialmap.org/', '')
+    .replace('/{z}/{x}/{y}', '');
+
+  // Construct the URL to fetch the TileJSON from titiler.
+  return `${OAM_TITILER_ENDPOINT}cog/WebMercatorQuad/tilejson.json?url=${OAM_S3_BUCKET_URL}${uniqueImageryId}.tif`;
 };