kepler.gl 3.1.0 → 3.1.1

package/src/components/src/geocoder/geocoder.tsx

@@ -11,6 +11,7 @@ import {KeyEvent} from '@kepler.gl/constants';
 import {Input} from '../common/styled-components';
 import {Search, Delete} from '../common/icons';
 import {Viewport} from '@kepler.gl/types';
+import {isTest} from '@kepler.gl/utils';
 
 type StyledContainerProps = {
   width?: number;
@@ -18,13 +19,21 @@ type StyledContainerProps = {
 
 // matches only valid coordinates
 const COORDINATE_REGEX_STRING =
-  '^[-+]?([1-8]?\\d(\\.\\d+)?|90(\\.0+)?),\\s*[-+]?(180(\\.0+)?|((1[0-7]\\d)|([1-9]?\\d))(\\.\\d+)?)';
+  '(^[-+]?(?:[1-8]?\\d(?:\\.\\d+)?|90(?:\\.0+)?)),\\s*([-+]?(?:180(?:\\.0+)?|(?:(?:1[0-7]\\d)|(?:[1-9]?\\d))(?:\\.\\d+)?))$';
+
 const COORDINATE_REGEX = RegExp(COORDINATE_REGEX_STRING);
 
 const PLACEHOLDER = 'Enter an address or coordinates, ex 37.79,-122.40';
 
 let debounceTimeout: NodeJS.Timeout | null = null;
 
+/**
+ * Tests if a given query string contains valid coordinates.
+ * @param query The input string to test for coordinates.
+ * @returns A tuple where:
+ *   - If valid, returns `[true, longitude, latitude]`.
+ *   - If invalid, returns `[false, query]`.
+ */
 export const testForCoordinates = (query: string): [true, number, number] | [false, string] => {
   const isValid = COORDINATE_REGEX.test(query.trim());
 
@@ -33,8 +42,10 @@ export const testForCoordinates = (query: string): [true, number, number] | [fal
   }
 
   const tokens = query.trim().split(',');
+  const latitude = Number(tokens[0]);
+  const longitude = Number(tokens[1]);
 
-  return [isValid, Number(tokens[0]), Number(tokens[1])];
+  return [isValid, longitude, latitude];
 };
 
 const StyledContainer = styled.div<StyledContainerProps>`
@@ -121,7 +132,6 @@ type IntlProps = {
   intl: IntlShape;
 };
 
-/** @type {import('./geocoder').GeocoderComponent} */
 const GeoCoder: React.FC<GeocoderProps & IntlProps> = ({
   mapboxApiAccessToken,
   className = '',
@@ -139,13 +149,12 @@ const GeoCoder: React.FC<GeocoderProps & IntlProps> = ({
   const [inputValue, setInputValue] = useState('');
   const [showResults, setShowResults] = useState(false);
   const [showDelete, setShowDelete] = useState(false);
-  /** @type {import('./geocoder').Results} */
   const initialResults: Result[] = [];
   const [results, setResults] = useState(initialResults);
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   const client = useMemo(
-    () => geocoderService({accessToken: mapboxApiAccessToken}),
+    () => (isTest() ? null : geocoderService({accessToken: mapboxApiAccessToken})),
     [mapboxApiAccessToken]
   );
 
@@ -155,9 +164,8 @@ const GeoCoder: React.FC<GeocoderProps & IntlProps> = ({
       setInputValue(queryString);
       const resultCoordinates = testForCoordinates(queryString);
       if (resultCoordinates[0]) {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const [_, latitude, longitude] = resultCoordinates;
-        setResults([{center: [latitude, longitude], place_name: queryString}]);
+        const [_isValid, longitude, latitude] = resultCoordinates;
+        setResults([{center: [longitude, latitude], place_name: queryString}]);
       } else {
         if (debounceTimeout) {
           clearTimeout(debounceTimeout);

package/src/components/src/geocoder-panel.tsx

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import React, {Component, ComponentType} from 'react';
+import React, {useCallback} from 'react';
 import styled, {IStyledComponent} from 'styled-components';
 import classnames from 'classnames';
 import {processRowObject} from '@kepler.gl/processors';
@@ -138,90 +138,100 @@ interface GeocoderPanelProps {
   unsyncedViewports: boolean;
 }
 
-export default function GeocoderPanelFactory(): ComponentType<GeocoderPanelProps> {
-  class GeocoderPanel extends Component<GeocoderPanelProps> {
-    defaultProps = {
-      transitionDuration: 3000
-    };
-
-    removeGeocoderDataset() {
-      this.props.removeDataset(GEOCODER_DATASET_NAME);
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onSelected = (viewport: Viewport | null = null, geoItem: Result) => {
-      const {
-        center: [lon, lat],
-        text,
-        bbox
-      } = geoItem;
-      const {layerOrder} = this.props;
-
-      const updateVisDataPayload = getUpdateVisDataPayload(lat, lon, text);
-      if (updateVisDataPayload) {
-        this.removeGeocoderDataset();
-        this.props.updateVisData(...updateVisDataPayload, generateConfig(layerOrder));
-      }
-
-      const bounds = bbox || [
-        lon - GEOCODER_GEO_OFFSET,
-        lat - GEOCODER_GEO_OFFSET,
-        lon + GEOCODER_GEO_OFFSET,
-        lat + GEOCODER_GEO_OFFSET
-      ];
-      const centerAndZoom = getCenterAndZoomFromBounds(bounds, {
-        width: this.props.mapState.width,
-        height: this.props.mapState.height
-      });
-
-      if (!centerAndZoom) {
-        // failed to fit bounds
-        return;
-      }
-
-      this.props.updateMap(
-        {
-          latitude: centerAndZoom.center[1],
-          longitude: centerAndZoom.center[0],
-          // For marginal or invalid bounds, zoom may be NaN. Make sure to provide a valid value in order
-          // to avoid corrupt state and potential crashes as zoom is expected to be a number
-          ...(Number.isFinite(centerAndZoom.zoom) ? {zoom: centerAndZoom.zoom} : {}),
-          pitch: 0,
-          bearing: 0,
-          transitionDuration: this.props.transitionDuration,
-          transitionInterpolator: new FlyToInterpolator()
-        },
-        this.props.index
-      );
-    };
-
-    removeMarker = () => {
-      this.removeGeocoderDataset();
-    };
-
-    render() {
-      const {className, isGeocoderEnabled, mapboxApiAccessToken, width, index, unsyncedViewports} =
-        this.props;
-      return (
-        <StyledGeocoderPanel
-          className={classnames('geocoder-panel', className)}
-          width={width}
-          index={index}
-          unsyncedViewports={unsyncedViewports}
-          style={{display: isGeocoderEnabled ? 'block' : 'none'}}
-        >
-          {isValid(mapboxApiAccessToken) && (
-            <Geocoder
-              mapboxApiAccessToken={mapboxApiAccessToken}
-              onSelected={this.onSelected}
-              onDeleteMarker={this.removeMarker}
-              width={width}
-            />
-          )}
-        </StyledGeocoderPanel>
-      );
-    }
-  }
+export default function GeocoderPanelFactory(): React.FC<GeocoderPanelProps> {
+  const GeocoderPanel = ({
+    isGeocoderEnabled,
+    mapState,
+    mapboxApiAccessToken,
+    updateVisData,
+    removeDataset,
+    updateMap,
+    layerOrder,
+    transitionDuration = 3000,
+    width,
+    className,
+    index,
+    unsyncedViewports
+  }: GeocoderPanelProps) => {
+    const removeGeocoderDataset = useCallback(() => {
+      removeDataset(GEOCODER_DATASET_NAME);
+    }, [removeDataset]);
+
+    const onSelected = useCallback(
+      (_viewport: Viewport | null = null, geoItem: Result) => {
+        const {
+          center: [lon, lat],
+          text,
+          bbox
+        } = geoItem;
+
+        const updateVisDataPayload = getUpdateVisDataPayload(lat, lon, text);
+        if (updateVisDataPayload) {
+          removeGeocoderDataset();
+          updateVisData(...updateVisDataPayload, generateConfig(layerOrder));
+        }
+
+        const bounds = bbox || [
+          lon - GEOCODER_GEO_OFFSET,
+          lat - GEOCODER_GEO_OFFSET,
+          lon + GEOCODER_GEO_OFFSET,
+          lat + GEOCODER_GEO_OFFSET
+        ];
+        const centerAndZoom = getCenterAndZoomFromBounds(bounds, {
+          width: mapState.width,
+          height: mapState.height
+        });
+
+        if (!centerAndZoom) {
+          // failed to fit bounds
+          return;
+        }
+
+        updateMap(
+          {
+            latitude: centerAndZoom.center[1],
+            longitude: centerAndZoom.center[0],
+            // For marginal or invalid bounds, zoom may be NaN. Make sure to provide a valid value in order
+            // to avoid corrupt state and potential crashes as zoom is expected to be a number
+            ...(Number.isFinite(centerAndZoom.zoom) ? {zoom: centerAndZoom.zoom} : {}),
+            pitch: 0,
+            bearing: 0,
+            transitionDuration,
+            transitionInterpolator: new FlyToInterpolator()
+          },
+          index
+        );
+      },
+      [
+        index,
+        layerOrder,
+        mapState,
+        removeGeocoderDataset,
+        transitionDuration,
+        updateMap,
+        updateVisData
+      ]
+    );
+
+    return (
+      <StyledGeocoderPanel
+        className={classnames('geocoder-panel', className)}
+        width={width}
+        index={index}
+        unsyncedViewports={unsyncedViewports}
+        style={{display: isGeocoderEnabled ? 'block' : 'none'}}
+      >
+        {isValid(mapboxApiAccessToken) && (
+          <Geocoder
+            mapboxApiAccessToken={mapboxApiAccessToken}
+            onSelected={onSelected}
+            onDeleteMarker={removeGeocoderDataset}
+            width={width}
+          />
+        )}
+      </StyledGeocoderPanel>
+    );
+  };
 
   return GeocoderPanel;
 }

package/src/components/src/hooks/use-fetch-vector-tile-metadata.ts

@@ -1,16 +1,17 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import {useCallback, useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
 
-import {/* MVTSource,*/ TileJSON} from '@loaders.gl/mvt';
+import {TileJSON} from '@loaders.gl/mvt';
 import {PMTilesSource, PMTilesMetadata} from '@loaders.gl/pmtiles';
 
 import {RemoteTileFormat} from '@kepler.gl/constants';
-import {getMVTMetadata, VectorTileMetadata} from '@kepler.gl/table';
+import {getMVTMetadata, VectorTileMetadata, getFieldsFromTile} from '@kepler.gl/table';
 
 type FetchVectorTileMetadataProps = {
-  url: string | null;
+  metadataUrl: string | null;
+  tilesetUrl: string | null;
   remoteTileFormat: RemoteTileFormat;
   process?: (json: PMTilesMetadata | TileJSON) => VectorTileMetadata | Error | null;
 };
@@ -36,39 +37,25 @@ type FetchVectorTileMetadataReturn = {
 /** Hook to fetch and return mvt or pmtiles metadata. */
 export default function useFetchVectorTileMetadata({
   remoteTileFormat,
-  url,
+  tilesetUrl,
+  metadataUrl,
   process = DEFAULT_PROCESS_FUNCTION
 }: FetchVectorTileMetadataProps): FetchVectorTileMetadataReturn {
   const [error, setError] = useState<Error | null>(null);
   const [data, setData] = useState<VectorTileMetadata | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
 
-  const setProcessedData = useCallback(
-    (value: PMTilesMetadata | TileJSON | null) => {
-      if (!value) {
-        return setError(value);
-      }
-      const processedData = process(value);
-      if (processedData instanceof Error) {
-        setError(processedData);
-      } else {
-        setData(processedData);
-      }
-    },
-    [setError, setData, process]
-  );
-
   useEffect(() => {
     const getAndProcessMetadata = async () => {
       setError(null);
       setData(null);
-      if (url) {
+      if (metadataUrl) {
         setLoading(true);
 
         try {
           let metadata: PMTilesMetadata | TileJSON | null = null;
           if (remoteTileFormat === RemoteTileFormat.MVT) {
-            metadata = await getMVTMetadata(url);
+            metadata = await getMVTMetadata(metadataUrl);
 
             // MVTSource returns messy partial metadata
             // MVTSource.createDataSource('', {
@@ -77,7 +64,7 @@ export default function useFetchVectorTileMetadata({
             //   }
             // })
           } else {
-            const tileSource = PMTilesSource.createDataSource(url, {});
+            const tileSource = PMTilesSource.createDataSource(metadataUrl, {});
             metadata = await tileSource.metadata;
           }
 
@@ -85,7 +72,22 @@ export default function useFetchVectorTileMetadata({
           if (!metadata) {
             throw new Error('Failed to fetch metadata');
           }
-          setProcessedData(metadata);
+
+          const processedMetadata = process(metadata);
+          if (processedMetadata instanceof Error) {
+            setError(processedMetadata);
+          } else {
+            setError(null);
+
+            await getFieldsFromTile({
+              remoteTileFormat,
+              tilesetUrl,
+              metadataUrl,
+              metadata: processedMetadata
+            });
+
+            setData(processedMetadata);
+          }
         } catch (metadataError) {
           setError(metadataError as any);
         }
@@ -94,7 +96,7 @@ export default function useFetchVectorTileMetadata({
     };
 
     getAndProcessMetadata();
-  }, [url, remoteTileFormat, setProcessedData]);
+  }, [metadataUrl, tilesetUrl, remoteTileFormat, setError, setData, process]);
 
   return {data, loading, error};
 }

package/src/components/src/hooks/use-legend-position.ts

@@ -81,7 +81,8 @@ export function useCalcLegendPosition({
         ? {y: topOffset, anchorY: 'top'}
         : {y: bottomOffset, anchorY: 'bottom'})
     };
-  }, [isSidePanelShown, legendContentRef?.current, sidePanelWidth]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSidePanelShown, sidePanelWidth]);
 }
 
 /**
@@ -116,6 +117,7 @@ export default function useLegendPosition({
     if (content instanceof HTMLElement) {
       startHeightRef.current = content.offsetHeight;
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const resize = useCallback(
     deltaY => {
@@ -133,6 +135,7 @@ export default function useLegendPosition({
         }
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [contentHeight, pos, onChangeSettings]
   );
 
@@ -152,7 +155,7 @@ export default function useLegendPosition({
         });
       }
     }
-  }, [isSidePanelShown, onChangeSettings]);
+  }, [isSidePanelShown, onChangeSettings, sidePanelWidth]);
 
   return {positionStyles, updatePosition, contentHeight, startResize, resize};
 }

package/src/components/src/map/map-legend-panel.tsx

@@ -300,7 +300,6 @@ const MapLegendPanelComponent = ({
   onClickControlBtn,
   isViewportUnsyncAllowed = true,
   className,
-  interactionConfig,
   MapControlTooltip,
   MapControlPanel,
   MapLegend
@@ -387,7 +386,7 @@ function MapLegendPanelFactory(
 ): MapLegendPanelComponentType {
   const MapLegendPanel = withState(
     [uiStateLens],
-    state => {
+    _state => {
       return {
         MapControlTooltip,
         MapControlPanel,

package/src/components/src/modal-container.tsx

@@ -60,7 +60,6 @@ import {
 } from '@kepler.gl/actions';
 import {ModalDialogProps} from './common/modal';
 import {Provider} from '@kepler.gl/cloud-providers';
-import {findDOMNode} from 'react-dom';
 import {VisState} from '@kepler.gl/schemas';
 
 const DataTableModalStyle = css`
@@ -195,7 +194,8 @@ export default function ModalContainerFactory(
           disableDataOperation: true
         },
         {
-          autoCreateLayers: true
+          autoCreateLayers: true,
+          centerMap: true
         }
       );
       this._closeModal();
@@ -228,12 +228,12 @@ export default function ModalContainerFactory(
       const toSave = exportMap(this.props);
 
       this.props.providerActions.exportFileToCloud({
-        // @ts-ignore
         mapData: toSave,
         provider,
         options: {
           isPublic,
-          overwrite
+          overwrite,
+          mapIdToOverwrite: this.props.providerState.savedMapId
         },
         closeModal,
         onSuccess: this.props.onExportToCloudSuccess,
@@ -250,8 +250,8 @@ export default function ModalContainerFactory(
       });
     };
 
-    _onOverwriteMap = () => {
-      this._onSaveMap(true);
+    _onOverwriteMap = provider => {
+      this._onSaveMap(provider, true);
     };
 
     _onShareMapUrl = provider => {
@@ -532,7 +532,7 @@ export default function ModalContainerFactory(
 
       return rootNode ? (
         <ModalDialog
-          parentSelector={() => findDOMNode(rootNode) as HTMLElement}
+          parentSelector={() => rootNode as HTMLElement}
           isOpen={Boolean(currentModal)}
           onCancel={this._closeModal}
           {...modalProps}

package/src/components/src/modals/tilesets-modals/tileset-vector-form.tsx

@@ -95,10 +95,13 @@ const TilesetVectorForm: React.FC<TilesetVectorFormProps> = ({setResponse}) => {
       event.preventDefault();
       const newTileUrl = event.target.value;
       setTileUrl(newTileUrl);
-      const potentialMetadataUrl = isPMTilesUrl(newTileUrl) ? newTileUrl : getMetaUrl(newTileUrl);
+
+      const usePMTiles = isPMTilesUrl(newTileUrl);
+      const potentialMetadataUrl = usePMTiles ? newTileUrl : getMetaUrl(newTileUrl);
       if (!metadataUrl && potentialMetadataUrl) {
         // check if URL exists before setting it as the metadata URL
-        const resp = await fetch(potentialMetadataUrl);
+        // Note: The {method: HEAD} request often fails, likely due to individual storage settings.
+        const resp = usePMTiles ? ({ok: true} as Response) : await fetch(potentialMetadataUrl);
         if (resp.ok) {
           setInitialFetchError(null);
           setMetadataUrl(potentialMetadataUrl);
@@ -127,11 +130,17 @@ const TilesetVectorForm: React.FC<TilesetVectorFormProps> = ({setResponse}) => {
     loading,
     error: metaError
   } = useFetchVectorTileMetadata({
-    url: metadataUrl,
+    metadataUrl,
+    tilesetUrl: tileUrl,
     remoteTileFormat: isPMTilesUrl(metadataUrl) ? RemoteTileFormat.PMTILES : RemoteTileFormat.MVT,
     process
   });
 
+  // reset initial fetch error if the metadata is available
+  if (metadata && initialFetchError) {
+    setInitialFetchError(null);
+  }
+
   useEffect(() => {
     if (tileName && tileUrl) {
       const dataset = getDatasetAttributesFromVectorTile({

package/src/components/src/side-panel/layer-panel/color-palette-preset.tsx

@@ -54,7 +54,7 @@ const PresetColorPalette: React.FC<PresetColorPaletteProps> = ({
   <StyledColorPalette>
     {themes.map(theme => (
       <StyledColorColumn key={theme} className="single-color-palette__column">
-        {range(1, ROWS + 1, 1).map((key, i) => (
+        {range(1, ROWS + 1, 1).map(key => (
           <StyledColorBlock
             className="single-color-palette__block"
             style={{

package/src/components/src/side-panel/layer-panel/color-range-selector.tsx

@@ -105,16 +105,19 @@ const CONFIG_SETTINGS = {
 };
 const displayOption = d => capitalizeFirstLetter(d);
 const getOptionValue = d => d;
+const noop = () => {
+  // do nothing
+};
 
 ColorRangeSelectorFactory.deps = [CustomPaletteFactory];
 function ColorRangeSelectorFactory(
   CustomPalette: ReturnType<typeof CustomPaletteFactory>
 ): React.FC<ColorRangeSelectorProps> {
   const ColorRangeSelector: React.FC<ColorRangeSelectorProps> = ({
-    colorPalettes,
+    colorPalettes = KEPLER_COLOR_PALETTES,
     colorPaletteUI,
-    setColorPaletteUI,
-    onSelectColorRange,
+    setColorPaletteUI = noop,
+    onSelectColorRange = noop,
     selectedColorRange
   }) => {
     const {customPalette, showSketcher, colorRangeConfig} = colorPaletteUI;
@@ -214,14 +217,6 @@ function ColorRangeSelectorFactory(
     );
   };
 
-  ColorRangeSelector.defaultProps = {
-    colorPalettes: KEPLER_COLOR_PALETTES,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onSelectColorRange: () => {},
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    setColorPaletteUI: () => {}
-  };
-
   return ColorRangeSelector;
 }
 

package/src/components/src/side-panel/layer-panel/color-selector.tsx

@@ -168,7 +168,7 @@ function ColorSelectorFactory(
           setColor(colorSet, color, colorSet.selectedColor[3]);
         }
       },
-      [colorSets, editingColorSet, setColor]
+      [editingColorSet, setColor]
     );
 
     const onSelectOpacity = useCallback(
@@ -179,7 +179,7 @@ function ColorSelectorFactory(
           setColor(colorSet, colorSet.selectedColor, Math.round(opacity[1] * 255));
         }
       },
-      [colorSets, editingColorSet, setColor]
+      [editingColorSet, setColor]
     );
 
     const onToggleDropdown = useCallback(

package/src/components/src/side-panel/layer-panel/custom-palette.tsx

@@ -714,7 +714,6 @@ export const CategoricalCustomPaletteInput: React.FC<CategoricalCustomPaletteInp
   actionIcons = defaultActionIcons,
   onDelete,
   disableDelete,
-  onAdd,
   onToggleSketcher,
   addColorMapValue,
   removeColorMapValue,