kepler.gl 3.1.10 → 3.2.1

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

@@ -15,11 +15,12 @@ import {getApplicationConfig} from '@kepler.gl/utils';
 import {default as useFetchJson} from '../../hooks/use-fetch-raster-tile-metadata';
 import {DatasetCreationAttributes, MetaResponse} from './common';
 import {InputLight} from '../../common';
+import {Help} from '../../common/icons';
 
 const TilesetInputContainer = styled.div`
   display: grid;
   grid-template-rows: repeat(3, 1fr);
-  row-gap: 18px;
+  row-gap: 0px;
   font-size: 12px;
 `;
 
@@ -29,6 +30,11 @@ const TilesetInputDescription = styled.div`
   font-size: 11px;
 `;
 
+const LabelRow = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
 export type RasterTilesetMeta = {
   name: string;
   metadataUrl: string;
@@ -40,12 +46,20 @@ export function getDatasetAttributesFromRasterTile({
   metadataUrl,
   rasterTileServerUrls
 }: RasterTilesetMeta): DatasetCreationAttributes {
+  const appConfig = getApplicationConfig();
   return {
     name,
     type: DatasetType.RASTER_TILE,
     metadata: {
       metadataUrl,
-      ...(rasterTileServerUrls ? {rasterTileServerUrls} : {})
+      ...(rasterTileServerUrls ? {rasterTileServerUrls} : {}),
+      // Persist raster server-related application config with the layer
+      rasterServerUseLatestTitiler: appConfig.rasterServerUseLatestTitiler,
+      rasterServerSupportsElevation: appConfig.rasterServerSupportsElevation,
+      rasterServerMaxRetries: appConfig.rasterServerMaxRetries,
+      rasterServerRetryDelay: appConfig.rasterServerRetryDelay,
+      rasterServerServerErrorsToRetry: appConfig.rasterServerServerErrorsToRetry,
+      rasterServerMaxPerServerRequests: appConfig.rasterServerMaxPerServerRequests
     }
   };
 }
@@ -54,6 +68,28 @@ type RasterTileFormProps = {
   setResponse: (response: MetaResponse) => void;
 };
 
+const InfoIconLink = styled.a`
+  margin-left: 4px;
+  color: ${props => props.theme.labelColor};
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+  vertical-align: middle;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  svg {
+    display: block;
+  }
+`;
+
+const RASTER_TILE_DOCUMENTATION_URL =
+  'https://docs.kepler.gl/docs/user-guides/c-types-of-layers/n-raster-tile-layer';
+
 const parseMetadataAllowCollections = (
   metadata: JsonObjectOrArray | PMTilesMetadata,
   {metadataUrl, rasterTileType}: {metadataUrl: string; rasterTileType: RasterTileType}
@@ -201,7 +237,17 @@ const RasterTileForm: React.FC<RasterTileFormProps> = ({setResponse}) => {
         />
       </div>
       <div>
-        <label htmlFor="tile-metadata">Tileset metadata URL</label>
+        <LabelRow>
+          <label htmlFor="tile-metadata">Tileset metadata URL</label>
+          <InfoIconLink
+            href={RASTER_TILE_DOCUMENTATION_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Open Raster Tile Layer documentation"
+          >
+            <Help height="16px" />
+          </InfoIconLink>
+        </LabelRow>
         <InputLight
           id="tile-metadata"
           placeholder="Tileset metadata URL"
@@ -214,7 +260,17 @@ const RasterTileForm: React.FC<RasterTileFormProps> = ({setResponse}) => {
       </div>
       {showServerInput && (
         <div>
-          <label htmlFor="tileset-raster-servers">Raster tile servers</label>
+          <LabelRow>
+            <label htmlFor="tileset-raster-servers">Raster tile servers</label>
+            <InfoIconLink
+              href={RASTER_TILE_DOCUMENTATION_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Open Raster Tile Layer documentation"
+            >
+              <Help height="16px" />
+            </InfoIconLink>
+          </LabelRow>
           <InputLight
             id="tileset-raster-servers"
             placeholder="Raster tile servers (separated by commas)"

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

@@ -276,7 +276,8 @@ export default function PlotContainerFactory(
         mapControls: {
           mapLegend: {
             show: Boolean(legend),
-            active: true
+            active: true,
+            settings: mapFields.mapControls?.mapLegend?.settings
           }
         },
         MapComponent: Map,

package/src/components/src/side-panel/interaction-panel/interaction-panel.tsx

@@ -35,6 +35,7 @@ interface InteractionPanelProps {
 
 const StyledInteractionPanel = styled.div`
   padding-bottom: 6px;
+  contain: layout paint;
 `;
 
 InteractionPanelFactory.deps = [TooltipConfigFactory, BrushConfigFactory];

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

@@ -12,7 +12,7 @@ import {
   colorMapToColorBreaks,
   isNumericColorBreaks as notOrdinalColorBreaks
 } from '@kepler.gl/utils';
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo, useEffect} from 'react';
 import styled from 'styled-components';
 import ColumnStatsChartFactory from '../../common/column-stats-chart';
 import {Edit} from '../../common/icons';
@@ -155,6 +155,17 @@ function ColorBreaksPanelFactory(
       [customPalette.colorMap, isEditingCustomBreaks, colorBreaks]
     );
 
+    // Update layers on editing custom breaks
+    useEffect(() => {
+      const {type} = customPalette || {};
+      if (
+        isEditingCustomBreaks &&
+        (type === SCALE_TYPES.customOrdinal || type === SCALE_TYPES.custom)
+      ) {
+        onScaleChange(type, customPalette);
+      }
+    }, [isEditingCustomBreaks, customPalette, onScaleChange]);
+
     const onClickEditCustomBreaks = useCallback(() => {
       setColorUI({
         colorRangeConfig: {
@@ -231,8 +242,8 @@ function ColorBreaksPanelFactory(
               currentBreaks={currentBreaks}
               onEdit={isCustomBreaks ? onClickEditCustomBreaks : null}
             />
-          ) : customPalette.colorMap &&
-            customPalette.type === 'customOrdinal' &&
+          ) : (isCustomBreaks || customPalette.type === SCALE_TYPES.customOrdinal) &&
+            customPalette.colorMap &&
             customPalette.name?.endsWith(colorField.name) ? (
             <CategoricalColorDisplay
               colorMap={customPalette.colorMap}

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

@@ -148,6 +148,28 @@ function ColorScaleSelectorFactory(
     );
     const [tippyInstance, setTippyInstance] = useState<TippyInstance>();
     const isEditingColorBreaks = colorUIConfig?.colorRangeConfig?.customBreaks;
+
+    // Stores the previous selection for live preview: when choosing Custom/Custom Ordinal, we apply a temporary palette.
+    // Cancel restores {scale, range} from this ref; Confirm keeps the change and clears the ref.
+    // If the user switches between different custom scale types (e.g., from "Custom" to "Custom Ordinal") or is already in a custom scale state,
+    // this ref is updated to always store the most recent non-custom selection. Only the latest non-custom selection is restorable on cancel.
+    const prevSelectionRef = React.useRef<{scale: string; range: ColorRange} | null>(null);
+
+    // when custom color scale - but Confirm is not clicked yet
+    const pendingOption = useMemo(
+      () =>
+        isEditingColorBreaks
+          ? (dropdownSelectProps.options || []).find(
+              o => getOptionValue(o) === colorUIConfig?.customPalette?.type
+            ) || null
+          : null,
+      [
+        isEditingColorBreaks,
+        dropdownSelectProps.options,
+        getOptionValue,
+        colorUIConfig?.customPalette?.type
+      ]
+    );
     const colorScale = useMemo(
       () =>
         getLayerColorScale({
@@ -234,14 +256,16 @@ function ColorScaleSelectorFactory(
     const onSelectScale = useCallback(
       val => {
         // highlight selected option
-        if (!val || isEditingColorBreaks) return;
+        if (!val) return;
+
         const selectedScale = getOptionValue(val);
-        if (selectedScale === SCALE_TYPES.custom) {
+        if (selectedScale === SCALE_TYPES.custom || selectedScale === SCALE_TYPES.customOrdinal) {
           const customPalette = initCustomPaletteByCustomScale({
             scale: selectedScale,
             field,
             range,
-            colorBreaks
+            colorBreaks,
+            ...(selectedScale === SCALE_TYPES.customOrdinal ? {ordinalDomain} : {})
           });
           setColorUI({
             showColorChart: true,
@@ -250,28 +274,55 @@ function ColorScaleSelectorFactory(
             },
             customPalette
           });
+          // store previous selection for cancel, then preview custom on the map
+          if (!prevSelectionRef.current) {
+            prevSelectionRef.current = {scale: scaleType, range};
+          }
           onSelect(selectedScale, customPalette);
-        } else if (hasColorMap(range) && selectedScale !== SCALE_TYPES.customOrdinal) {
+        } else if (hasColorMap(range)) {
           // not custom
           // remove colorMap
           // eslint-disable-next-line no-unused-vars
           const {colorMap: _, ...newRange} = range;
+          // reset colorUI before changing the scale
+          setColorUI({
+            showColorChart: false,
+            colorRangeConfig: {
+              customBreaks: false
+            }
+          });
           onSelect(selectedScale, newRange);
         } else {
+          // reset colorUI before changing the scale
+          setColorUI({
+            showColorChart: false,
+            colorRangeConfig: {
+              customBreaks: false
+            }
+          });
           onSelect(selectedScale);
         }
       },
-      [isEditingColorBreaks, field, setColorUI, onSelect, range, getOptionValue, colorBreaks]
+      [field, setColorUI, onSelect, range, getOptionValue, colorBreaks, ordinalDomain, scaleType]
     );
 
     const onApply = useCallback(() => {
-      onSelect(scaleType, colorUIConfig.customPalette);
+      // change scale type only if confirmed
+      const nextScaleType = colorUIConfig?.customPalette?.type || scaleType;
+      onSelect(nextScaleType, colorUIConfig.customPalette);
       hideTippy(tippyInstance);
+      prevSelectionRef.current = null;
     }, [onSelect, colorUIConfig.customPalette, tippyInstance, scaleType]);
 
     const onCancel = useCallback(() => {
+      // restore previous selection if any
+      if (prevSelectionRef.current) {
+        const {scale: prevScale, range: prevRange} = prevSelectionRef.current;
+        onSelect(prevScale, prevRange);
+      }
       hideTippy(tippyInstance);
-    }, [tippyInstance]);
+      prevSelectionRef.current = null;
+    }, [tippyInstance, onSelect]);
 
     const isCustomBreaks =
       scaleType === SCALE_TYPES.custom || scaleType === SCALE_TYPES.customOrdinal;
@@ -317,6 +368,9 @@ function ColorScaleSelectorFactory(
                     customListComponent={ColorScaleSelectDropdown}
                     searchable={false}
                     showOptionsWhenEmpty
+                    selectedItems={
+                      pendingOption ? [pendingOption] : dropdownSelectProps.selectedItems
+                    }
                   />
                 )}
               </DropdownWrapper>
@@ -327,7 +381,7 @@ function ColorScaleSelectorFactory(
               <DropdownSelect
                 {...dropdownSelectProps}
                 displayOption={displayOption}
-                value={dropdownSelectProps.selectedItems[0]}
+                value={pendingOption || dropdownSelectProps.selectedItems[0]}
               />
             </div>
           </LazyTippy>

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

@@ -377,8 +377,11 @@ export const EditableColorRange: React.FC<EditableColorRangeProps> = ({
   editColorMap,
   editable
 }) => {
-  const noMinBound = !Number.isFinite(item.inputs[0]) && index === 0;
-  const noMaxBound = !Number.isFinite(item.inputs[1]) && isLast;
+  const hasInputs = Array.isArray(item?.inputs);
+  const leftInput = hasInputs ? item.inputs[0] : undefined;
+  const rightInput = hasInputs ? item.inputs[1] : undefined;
+  const noMinBound = !Number.isFinite(leftInput) && index === 0;
+  const noMaxBound = !Number.isFinite(rightInput) && isLast;
   const onChangeLeft = useCallback(
     val => {
       if (editable && editColorMap) editColorMap(parseFloat(val), index - 1);
@@ -395,7 +398,7 @@ export const EditableColorRange: React.FC<EditableColorRangeProps> = ({
   return (
     <StyledRangeInput>
       <ColorPaletteInput
-        value={noMinBound ? 'Less' : item.inputs[0].toString()}
+        value={noMinBound ? 'Less' : String(leftInput ?? '')}
         id={`color-palette-input-${index}-left`}
         width="50px"
         textAlign="end"
@@ -404,7 +407,7 @@ export const EditableColorRange: React.FC<EditableColorRangeProps> = ({
       />
       <Dash />
       <ColorPaletteInput
-        value={noMaxBound ? 'More' : item.inputs[1].toString()}
+        value={noMaxBound ? 'More' : String(rightInput ?? '')}
         id={`color-palette-input-${index}-right`}
         width="50px"
         textAlign="end"
@@ -468,7 +471,7 @@ export const CustomPaletteInput: React.FC<CustomPaletteInputProps> = ({
                 />
               </StyledColorHexInput>
             ) : null}
-            {isNumericColorBreaks(colorBreaks) ? (
+            {colorBreaks && index < colorBreaks.length && isNumericColorBreaks(colorBreaks) ? (
               <EditableColorRange
                 item={colorBreaks[index]}
                 isLast={index === colorBreaks.length - 1}
@@ -719,6 +722,9 @@ export const CategoricalSelector: React.FC<CategoricalSelectorProps> = ({
                     listAnchor: 'list__item__anchor'
                   }}
                   options={allValues}
+                  // add safe string casting for the Typeahead, so fuzzy search never receives non-strings, preventing the toLowerCase crash
+                  displayOption={o => String(o ?? '')}
+                  filterOption={(input, o) => String(o ?? '').includes(String(input ?? ''))}
                   placeholder={'Search'}
                   onOptionSelected={onOptionSelected}
                   customListComponent={ModifiedDropdownList}

package/src/components/src/side-panel/layer-panel/raster-tile-layer-configurator.tsx

@@ -336,7 +336,8 @@ function RasterTileLayerConfiguratorFactory(
 
     const elevationUI = (
       <>
-        {getApplicationConfig().rasterServerSupportsElevation &&
+        {(stac.rasterServerSupportsElevation ??
+          getApplicationConfig().rasterServerSupportsElevation) &&
           stac.rasterTileServerUrls?.length && (
             <LayerConfigGroup
               {...(layer.visConfigSettings.enableTerrain || {label: 'layer.color'})}

package/src/components/src/side-panel/layer-panel/vector-tile-layer-configurator.tsx

@@ -9,6 +9,7 @@ import {VectorTileLayer} from '@kepler.gl/layers';
 import {KeplerTable as KeplerDataset} from '@kepler.gl/table';
 
 import SourceDataSelectorFactory from '../common/source-data-selector';
+import FieldSelectorFactory from '../../common/field-selector';
 import ChannelByValueSelectorFactory from './channel-by-value-selector';
 import LayerConfigGroupFactory, {ConfigGroupCollapsibleContent} from './layer-config-group';
 import {LayerColorRangeSelectorFactory, LayerColorSelectorFactory} from './layer-color-selector';
@@ -37,7 +38,8 @@ VectorTileLayerConfiguratorFactory.deps = [
   LayerConfigGroupFactory,
   VisConfigSliderFactory,
   VisConfigSwitchFactory,
-  SourceDataSelectorFactory
+  SourceDataSelectorFactory,
+  FieldSelectorFactory
 ];
 
 function VectorTileLayerConfiguratorFactory(
@@ -46,7 +48,9 @@ function VectorTileLayerConfiguratorFactory(
   LayerColorSelector: ReturnType<typeof LayerColorSelectorFactory>,
   LayerConfigGroup: ReturnType<typeof LayerConfigGroupFactory>,
   VisConfigSlider: ReturnType<typeof VisConfigSliderFactory>,
-  VisConfigSwitch: ReturnType<typeof VisConfigSwitchFactory>
+  VisConfigSwitch: ReturnType<typeof VisConfigSwitchFactory>,
+  _SourceDataSelector: ReturnType<typeof SourceDataSelectorFactory>,
+  FieldSelector: ReturnType<typeof FieldSelectorFactory>
 ): React.FC<Props> {
   const VectorTileLayerConfigurator = ({
     layer,
@@ -190,6 +194,19 @@ function VectorTileLayerConfiguratorFactory(
             <VisConfigSwitch {...layer.visConfigSettings.radiusUnits} {...visConfiguratorProps} />
           </ConfigGroupCollapsibleContent>
         </LayerConfigGroup>
+
+        {/* Unique ID Field */}
+        <LayerConfigGroup {...visConfiguratorProps} label="layer.uniqueIdField">
+          <FieldSelector
+            fields={layerChannelConfigProps.fields || []}
+            value={layer.config.uniqueIdField || null}
+            onSelect={(val: any) =>
+              layerConfiguratorProps.onChange?.({uniqueIdField: val?.name || null})
+            }
+            placeholder={'placeholder.selectField'}
+            erasable
+          />
+        </LayerConfigGroup>
       </StyledLayerConfigurator>
     );
   };