preview map: fixes rendering cog layers and loading state

Vizzuality · Feb 24, 2025 · 9ea648c · 9ea648c
1 parent bb84890
commit 9ea648c
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 13 deletions.
diff --git a/.../analysis-visualization/analysis-contextual-layer/categories/category-layer/component.tsx b/.../analysis-visualization/analysis-contextual-layer/categories/category-layer/component.tsx
@@ -45,7 +45,7 @@ const CategoryLayer = ({
               }}
             />
             {previewStatus === 'loading' && isPreviewActive ? (
-              <Loading />
+              <Loading className="h-4 w-4" />
             ) : (
               <TogglePreview
                 isPreviewActive={isPreviewActive}

diff --git a/...src/containers/analysis-visualization/analysis-contextual-layer/preview-map/component.tsx b/...src/containers/analysis-visualization/analysis-contextual-layer/preview-map/component.tsx
@@ -1,19 +1,21 @@
 import { useEffect, useCallback, useMemo } from 'react';
 import { H3HexagonLayer } from '@deck.gl/geo-layers/typed';
+import { useQueryClient, UseQueryResult } from '@tanstack/react-query';
 
-import DeckLayer from 'components/map/layers/deck';
-import Map from 'components/map';
-import ZoomControl from 'components/map/controls/zoom';
-import LayerManager from 'components/map/layer-manager';
+import Map from '@/components/map';
+import DeckLayer from '@/components/map/layers/deck';
+import ZoomControl from '@/components/map/controls/zoom';
+import LayerManager from '@/components/map/layer-manager';
+import MapboxRasterLayer from '@/components/map/layers/maplibre/raster';
 import { useH3Data } from 'hooks/h3-data';
 import PageLoading from 'containers/page-loading';
 import { useYears } from 'hooks/years';
+import { CategoryWithLayers } from '@/hooks/layers/getContextualLayers';
 
 import type { H3HexagonLayerProps } from '@deck.gl/geo-layers/typed';
-import type { UseQueryResult } from '@tanstack/react-query';
 import type { Dispatch } from 'react';
 import type { Material, Layer } from 'types';
-import type { MapboxLayerProps } from 'components/map/layers/types';
+import type { MapboxLayerProps } from '@/components/map/layers/types';
 
 interface PreviewMapProps {
   selectedLayerId?: Layer['id'];
@@ -37,27 +39,54 @@ const PreviewMap = ({ selectedLayerId, selectedMaterialId, onStatusChange }: Pre
     },
   });
 
+  const queryClient = useQueryClient();
+  const contextualLayers = queryClient.getQueryData<CategoryWithLayers[]>(['contextual-layers']);
+  const selectedLayer = contextualLayers
+    ?.flatMap((category) => category.layers)
+    .find((layer) => layer.id === selectedLayerId);
+
+  const isCogLayer = !!selectedLayer?.tilerUrl;
+
   const { data, isFetching, status } = useH3Data({
     id: selectedLayerId,
     params: {
       materialId: selectedMaterialId,
       year: materialYear,
     },
     options: {
-      enabled: !!selectedLayerId && (selectedLayerId !== 'material' || !!materialYear),
+      enabled:
+        !!selectedLayerId && (selectedLayerId !== 'material' || !!materialYear) && !isCogLayer,
       select: (response) => response.data,
-      staleTime: 10000,
       // having placeholder data makes the status always be success
       placeholderData: undefined,
     },
   });
 
+  const getLayerFetchingStatus = useCallback(() => {
+    if (isCogLayer) return 'success';
+    if (status === 'error') return status;
+    if (isFetching) return 'loading';
+
+    return status;
+  }, [isCogLayer, isFetching, status]);
+
   useEffect(() => {
-    onStatusChange?.(status);
-  }, [onStatusChange, status]);
+    onStatusChange?.(getLayerFetchingStatus());
+  }, [onStatusChange, getLayerFetchingStatus]);
 
   const PreviewLayer = useCallback(() => {
-    if (!data?.length) return null;
+    if (!data?.length && !selectedLayer?.tilerUrl) return null;
+
+    if (isCogLayer) {
+      return (
+        <MapboxRasterLayer
+          id={selectedLayer.id}
+          beforeId="custom-layers"
+          tilerUrl={selectedLayer.tilerUrl}
+          defaultTilerParams={selectedLayer.defaultTilerParams}
+        />
+      );
+    }
 
     return (
       <DeckLayer<MapboxLayerProps<H3HexagonLayerProps>>
@@ -69,7 +98,7 @@ const PreviewMap = ({ selectedLayerId, selectedMaterialId, onStatusChange }: Pre
         getLineColor={(d) => d.c}
       />
     );
-  }, [data]);
+  }, [data, isCogLayer, selectedLayer]);
 
   const layers = useMemo(() => [{ id: PREVIEW_LAYER_ID, layer: PreviewLayer }], [PreviewLayer]);