From 4ab3c1acadf5c2b917d18edaf4c43b86a8d6b328 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Wed, 12 Jun 2024 12:51:37 +0200
Subject: [PATCH] enables cog preview when available

---
 .../categories/category-layer/component.tsx   |  2 +-
 .../preview-map/component.tsx                 | 82 ++++++++++++-------
 2 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/client/src/containers/analysis-visualization/analysis-contextual-layer/categories/category-layer/component.tsx b/client/src/containers/analysis-visualization/analysis-contextual-layer/categories/category-layer/component.tsx
index dbcb537f2..cff1cc118 100644
--- a/client/src/containers/analysis-visualization/analysis-contextual-layer/categories/category-layer/component.tsx
+++ b/client/src/containers/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/client/src/containers/analysis-visualization/analysis-contextual-layer/preview-map/component.tsx b/client/src/containers/analysis-visualization/analysis-contextual-layer/preview-map/component.tsx
index 0356b81f7..87f8d5872 100644
--- a/client/src/containers/analysis-visualization/analysis-contextual-layer/preview-map/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-contextual-layer/preview-map/component.tsx
@@ -1,24 +1,26 @@
 import { useEffect, useCallback, useMemo } from 'react';
 import { H3HexagonLayer } from '@deck.gl/geo-layers/typed';
 
-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 { useH3Data } from 'hooks/h3-data';
-import PageLoading from 'containers/page-loading';
-import { useYears } from 'hooks/years';
+import { PreviewStatus } from '@/containers/analysis-visualization/analysis-contextual-layer/categories/category-layer/types';
+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 { useH3Data } from '@/hooks/h3-data';
+import PageLoading from '@/containers/page-loading';
+import { useYears } from '@/hooks/years';
+import useContextualLayers from '@/hooks/layers/getContextualLayers';
+import ContextualLayer from '@/containers/analysis-visualization/analysis-map/layers/contextual';
 
 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 { Material, Layer } from '@/types';
+import type { MapboxLayerProps } from '@/components/map/layers/types';
 
 interface PreviewMapProps {
   selectedLayerId?: Layer['id'];
   selectedMaterialId?: Material['id'];
-  onStatusChange?: Dispatch<UseQueryResult['status']>;
+  onStatusChange?: Dispatch<PreviewStatus>;
 }
 
 const INITIAL_PREVIEW_SETTINGS = {
@@ -37,39 +39,61 @@ const PreviewMap = ({ selectedLayerId, selectedMaterialId, onStatusChange }: Pre
     },
   });
 
-  const { data, isFetching, status } = useH3Data({
+  const { data: contextualLayers } = useContextualLayers();
+
+  const selectedLayer = useMemo(() => {
+    return contextualLayers
+      ?.flatMap((category) => category.layers)
+      .find((layer) => layer.id === selectedLayerId);
+  }, [contextualLayers, selectedLayerId]);
+
+  const {
+    data: h3data,
+    isFetching,
+    status,
+    fetchStatus,
+  } = useH3Data({
     id: selectedLayerId,
     params: {
       materialId: selectedMaterialId,
       year: materialYear,
     },
     options: {
-      enabled: !!selectedLayerId && (selectedLayerId !== 'material' || !!materialYear),
+      enabled:
+        !!selectedLayerId &&
+        (selectedLayerId !== 'material' || !!materialYear) &&
+        !selectedLayer?.tilerUrl?.length,
       select: (response) => response.data,
-      staleTime: 10000,
-      // having placeholder data makes the status always be success
       placeholderData: undefined,
     },
   });
 
   useEffect(() => {
+    if (selectedLayer?.tilerUrl?.length) {
+      return onStatusChange?.('success');
+    }
     onStatusChange?.(status);
-  }, [onStatusChange, status]);
+  }, [onStatusChange, status, fetchStatus, selectedLayer]);
 
   const PreviewLayer = useCallback(() => {
-    if (!data?.length) return null;
+    if (!selectedLayerId) return null;
 
-    return (
-      <DeckLayer<MapboxLayerProps<H3HexagonLayerProps>>
-        id={PREVIEW_LAYER_ID}
-        type={H3HexagonLayer}
-        data={data}
-        getHexagon={(d) => d.h}
-        getFillColor={(d) => d.c}
-        getLineColor={(d) => d.c}
-      />
-    );
-  }, [data]);
+    if (selectedLayer?.tilerUrl?.length) {
+      return <ContextualLayer id={selectedLayerId} />;
+    }
+    if (h3data?.length) {
+      return (
+        <DeckLayer<MapboxLayerProps<H3HexagonLayerProps>>
+          id={PREVIEW_LAYER_ID}
+          type={H3HexagonLayer}
+          data={h3data}
+          getHexagon={(d) => d.h}
+          getFillColor={(d) => d.c}
+          getLineColor={(d) => d.c}
+        />
+      );
+    }
+  }, [selectedLayerId, h3data, selectedLayer]);
 
   const layers = useMemo(() => [{ id: PREVIEW_LAYER_ID, layer: PreviewLayer }], [PreviewLayer]);
 
@@ -79,7 +103,7 @@ const PreviewMap = ({ selectedLayerId, selectedMaterialId, onStatusChange }: Pre
       <Map id="contextual-preview-map" mapStyle="terrain" viewState={INITIAL_PREVIEW_SETTINGS}>
         {() => <LayerManager layers={layers} />}
       </Map>
-      <div className="absolute bottom-2 right-2 z-10 w-10 space-y-2">
+      <div className="absolute bottom-10 right-2 z-10 w-10 space-y-2">
         <ZoomControl mapId="contextual-preview-map" />
       </div>
     </div>