From 91f46a7831a95ddd5df21ad0b8040927eaea08a0 Mon Sep 17 00:00:00 2001 From: jeafreezy Date: Thu, 30 Jan 2025 10:05:27 +0100 Subject: [PATCH 1/2] chore: updated oam tilejson url --- .../training-area/open-area-map.tsx | 28 ++++++++++----- .../training-area/training-area.tsx | 34 +++++++++---------- .../model-creation/hooks/use-tms-tilejson.ts | 5 +-- frontend/src/utils/string-utils.ts | 4 ++- 4 files changed, 43 insertions(+), 28 deletions(-) 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 index 2fc1726e..f1582b54 100644 --- 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)}

{
- +
@@ -123,7 +123,7 @@ const TrainingAreaForm = () => { />
- + { return useQuery({ diff --git a/frontend/src/utils/string-utils.ts b/frontend/src/utils/string-utils.ts index 942ab30f..879877a9 100644 --- a/frontend/src/utils/string-utils.ts +++ b/frontend/src/utils/string-utils.ts @@ -16,6 +16,8 @@ export const truncateString = (string?: string, maxLength: number = 30) => { return string; }; + export const extractTileJSONURL = (openAerialMapTMSURL: string) => { - return openAerialMapTMSURL.split("/{z}/{x}/{y}")[0]; + const tmsId = openAerialMapTMSURL.replace('https://tiles.openaerialmap.org/', '').replace('/{z}/{x}/{y}', ''); + return `https://titiler.hotosm.org/cog/WebMercatorQuad/tilejson.json?url=https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/${tmsId}.tif`; }; From d940b7fbcf68811a5d69195f0755eadb4950215a Mon Sep 17 00:00:00 2001 From: jeafreezy Date: Sat, 8 Feb 2025 20:29:50 +0100 Subject: [PATCH 2/2] feat: temporary fix for OAM disruption --- frontend/.env.sample | 12 +++++++++++- frontend/src/config/env.ts | 16 ++++++++++++++++ frontend/src/constants/config.ts | 25 +++++++++++++++++++++---- frontend/src/utils/string-utils.ts | 16 +++++++++++++--- 4 files changed, 61 insertions(+), 8 deletions(-) diff --git a/frontend/.env.sample b/frontend/.env.sample index 8b78cabe..b2d52f6e 100644 --- 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/ \ No newline at end of file +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/ \ No newline at end of file diff --git a/frontend/src/config/env.ts b/frontend/src/config/env.ts index e764a278..d407d478 100644 --- 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 index dcce05be..10fdead4 100644 --- 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/utils/string-utils.ts b/frontend/src/utils/string-utils.ts index 879877a9..0e6f11a7 100644 --- 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. * @@ -17,7 +19,15 @@ export const truncateString = (string?: string, maxLength: number = 30) => { }; -export const extractTileJSONURL = (openAerialMapTMSURL: string) => { - const tmsId = openAerialMapTMSURL.replace('https://tiles.openaerialmap.org/', '').replace('/{z}/{x}/{y}', ''); - return `https://titiler.hotosm.org/cog/WebMercatorQuad/tilejson.json?url=https://oin-hotosm-temp.s3.us-east-1.amazonaws.com/${tmsId}.tif`; +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`; };