Refactor useViewportFeatures

packages/react-api/src/hooks/useCartoLayerProps.js

@@ -1,19 +1,31 @@
 import { DataFilterExtension } from '@deck.gl/extensions';
 import { _buildFeatureFilter } from '@carto/react-core';
-import useViewportFeatures from './useViewportFeatures';
 import { MAP_TYPES, API_VERSIONS } from '@deck.gl/carto';
+import { useSelector } from 'react-redux';
+import useGeoJsonFeatures from './useGeoJsonFeatures';
+import useTilesetFeatures from './useTilesetFeatures';
 
 export default function useCartoLayerProps({
   source,
   uniqueIdProperty,
   viewportFeatures = true,
-  viewporFeaturesDebounceTimeout = 500
+  viewporFeaturesDebounceTimeout = 250
 }) {
-  const [onViewportLoad, onDataLoad, fetch] = useViewportFeatures(
+  const viewport = useSelector((state) => state.carto.viewport);
+
+  const [onDataLoad] = useGeoJsonFeatures({
     source,
+    viewport,
     uniqueIdProperty,
-    viewporFeaturesDebounceTimeout
-  );
+    debounceTimeout: viewporFeaturesDebounceTimeout
+  });
+
+  const [onViewportLoad, fetch] = useTilesetFeatures({
+    source,
+    viewport,
+    uniqueIdProperty,
+    debounceTimeout: viewporFeaturesDebounceTimeout
+  });
 
   let props = {};
 
@@ -23,13 +35,14 @@ export default function useCartoLayerProps({
   ) {
     props = {
       binary: true,
-      onViewportLoad: viewportFeatures ? onViewportLoad : null,
-      fetch: viewportFeatures ? fetch : null
+      ...(viewportFeatures && {
+        onViewportLoad,
+        fetch
+      })
     };
   } else if (source?.type === MAP_TYPES.QUERY || source?.type === MAP_TYPES.TABLE) {
-    props = {
-      // empty function should be removed by null, but need a fix in CartoLayer
-      onDataLoad: viewportFeatures ? onDataLoad : () => null
+    props = viewportFeatures && {
+      onDataLoad
     };
   }
 

packages/react-api/src/hooks/useGeoJsonFeatures.js

@@ -0,0 +1,92 @@
+import { useEffect, useCallback, useState, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { setViewportFeaturesReady } from '@carto/react-redux';
+import { debounce } from '@carto/react-core';
+import { Methods, executeTask } from '@carto/react-workers';
+import { throwError } from './utils';
+
+export default function useGeoJsonFeatures({
+  source,
+  viewport,
+  uniqueIdProperty = 'cartodb_id',
+  debounceTimeout = 250
+}) {
+  const dispatch = useDispatch();
+  const [isGeoJsonLoaded, setGeoJsonLoaded] = useState(false);
+  const debounceIdRef = useRef(null);
+
+  const clearDebounce = () => {
+    if (debounceIdRef.current) {
+      clearTimeout(debounceIdRef.current);
+    }
+    debounceIdRef.current = null;
+  };
+
+  const sourceId = source?.id;
+
+  const setSourceViewportFeaturesReady = useCallback(
+    (ready) => {
+      if (sourceId) {
+        dispatch(setViewportFeaturesReady({ sourceId, ready }));
+      }
+    },
+    [dispatch, sourceId]
+  );
+
+  const computeFeaturesGeoJson = useCallback(
+    ({ viewport, uniqueIdProperty }) => {
+      executeTask(sourceId, Methods.VIEWPORT_FEATURES_GEOJSON, {
+        viewport: Float32Array.of(...viewport),
+        uniqueIdProperty
+      })
+        .then(() => {
+          setSourceViewportFeaturesReady(true);
+        })
+        .catch(throwError);
+    },
+    [setSourceViewportFeaturesReady, sourceId]
+  );
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedComputeFeaturesGeoJson = useCallback(
+    debounce(computeFeaturesGeoJson, debounceTimeout),
+    [computeFeaturesGeoJson]
+  );
+
+  useEffect(() => {
+    if (sourceId && isGeoJsonLoaded) {
+      setSourceViewportFeaturesReady(false);
+      clearDebounce();
+      debounceIdRef.current = debouncedComputeFeaturesGeoJson({
+        viewport,
+        uniqueIdProperty
+      });
+    }
+  }, [
+    viewport,
+    uniqueIdProperty,
+    debouncedComputeFeaturesGeoJson,
+    sourceId,
+    isGeoJsonLoaded,
+    setSourceViewportFeaturesReady
+  ]);
+
+  useEffect(() => {
+    if (!source) {
+      setGeoJsonLoaded(false);
+    }
+  }, [source]);
+
+  const onDataLoad = useCallback(
+    (geojson) => {
+      clearDebounce();
+      setSourceViewportFeaturesReady(false);
+      executeTask(sourceId, Methods.LOAD_GEOJSON_FEATURES, { geojson })
+        .then(() => setGeoJsonLoaded(true))
+        .catch(throwError);
+    },
+    [sourceId, setSourceViewportFeaturesReady]
+  );
+
+  return [onDataLoad];
+}

packages/react-api/src/hooks/useTilesetFeatures.js

@@ -0,0 +1,132 @@
+import { useEffect, useCallback, useState, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { setViewportFeaturesReady } from '@carto/react-redux';
+import { debounce } from '@carto/react-core';
+import { Methods, executeTask } from '@carto/react-workers';
+import { Layer } from '@deck.gl/core';
+import { throwError } from './utils';
+
+export default function useTilesetFeatures({
+  source,
+  viewport,
+  uniqueIdProperty,
+  debounceTimeout = 250
+}) {
+  const dispatch = useDispatch();
+  const [isTilesetLoaded, setTilesetLoaded] = useState(false);
+  const debounceIdRef = useRef(null);
+
+  const clearDebounce = () => {
+    if (debounceIdRef.current) {
+      clearTimeout(debounceIdRef.current);
+    }
+    debounceIdRef.current = null;
+  };
+
+  const stopAnyCompute = useCallback(() => {
+    clearDebounce();
+    setTilesetLoaded(false);
+  }, [setTilesetLoaded]);
+
+  const sourceId = source?.id;
+
+  const setSourceViewportFeaturesReady = useCallback(
+    (ready) => {
+      if (sourceId) {
+        dispatch(setViewportFeaturesReady({ sourceId, ready }));
+      }
+    },
+    [dispatch, sourceId]
+  );
+
+  const computeViewportFeatures = useCallback(
+    ({ viewport, uniqueIdProperty }) => {
+      setSourceViewportFeaturesReady(false);
+
+      executeTask(sourceId, Methods.VIEWPORT_FEATURES, {
+        viewport: Float32Array.of(...viewport),
+        uniqueIdProperty
+      })
+        .then(() => {
+          setSourceViewportFeaturesReady(true);
+        })
+        .catch(throwError)
+        .finally(clearDebounce);
+    },
+    [setSourceViewportFeaturesReady, sourceId]
+  );
+
+  const loadTiles = useCallback(
+    (tiles) => {
+      const cleanedTiles = tiles.reduce((acc, { data, isVisible, bbox }) => {
+        if (isVisible && data) {
+          acc.push({
+            data,
+            bbox
+          });
+        }
+        return acc;
+      }, []);
+
+      executeTask(sourceId, Methods.LOAD_TILES, { tiles: cleanedTiles })
+        .then(() => setTilesetLoaded(true))
+        .catch(throwError);
+    },
+    [sourceId]
+  );
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedComputeViewportFeatures = useCallback(
+    debounce(computeViewportFeatures, debounceTimeout),
+    [computeViewportFeatures]
+  );
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedLoadTiles = useCallback(debounce(loadTiles, debounceTimeout), [
+    loadTiles
+  ]);
+
+  useEffect(() => {
+    if (sourceId && isTilesetLoaded) {
+      clearDebounce();
+      setSourceViewportFeaturesReady(false);
+      debounceIdRef.current = debouncedComputeViewportFeatures({
+        viewport,
+        uniqueIdProperty
+      });
+    }
+  }, [
+    viewport,
+    uniqueIdProperty,
+    debouncedComputeViewportFeatures,
+    sourceId,
+    isTilesetLoaded,
+    setSourceViewportFeaturesReady
+  ]);
+
+  useEffect(() => {
+    if (!source) {
+      setTilesetLoaded(false);
+    }
+  }, [source]);
+
+  const onViewportLoad = useCallback(
+    (tiles) => {
+      stopAnyCompute();
+      setSourceViewportFeaturesReady(false);
+
+      debounceIdRef.current = debouncedLoadTiles(tiles);
+    },
+    [stopAnyCompute, setSourceViewportFeaturesReady, debouncedLoadTiles]
+  );
+
+  const fetch = useCallback(
+    (...args) => {
+      stopAnyCompute();
+      return Layer.defaultProps.fetch.value(...args);
+    },
+    [stopAnyCompute]
+  );
+
+  return [onViewportLoad, fetch];
+}