[feat] vector tile layer - add feature uid selector (#3203)

* [feat] vector tile layer - add feature uid selector

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

* nit

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

---------

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

Author: igorDykhta

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>
     );
   };

src/layers/src/vector-tile/vector-tile-layer.ts

@@ -179,6 +179,8 @@ export type VectorTileLayerConfig = Merge<
     radiusScale?: string;
     radiusDomain?: VisualChannelDomain;
     radiusRange?: any;
+
+    uniqueIdField?: string | null;
   }
 >;
 
@@ -335,7 +337,9 @@ export default class VectorTileLayer extends AbstractTileLayer<VectorTile, Featu
 
       radiusField: null,
       radiusDomain: [0, 1],
-      radiusScale: SCALE_TYPES.linear
+      radiusScale: SCALE_TYPES.linear,
+
+      uniqueIdField: null
     };
   }
 
@@ -553,15 +557,13 @@ export default class VectorTileLayer extends AbstractTileLayer<VectorTile, Featu
     if (data.tileSource) {
       const hoveredObject = this.hasHoveredObject(objectHovered);
 
-      // Try to infer a stable unique id property from the hovered feature so we can
-      // highlight the same feature across adjacent tiles. If none is found, rely on
-      // feature.id when available.
+      // Resolve unique id property: use configured uniqueIdField if set, otherwise infer
       let uniqueIdProperty: string | undefined;
       let highlightedFeatureId: string | number | undefined;
       if (hoveredObject && hoveredObject.properties) {
-        uniqueIdProperty = UUID_CANDIDATES.find(
-          k => hoveredObject.properties && k in hoveredObject.properties
-        );
+        uniqueIdProperty =
+          this.config.uniqueIdField ??
+          UUID_CANDIDATES.find(k => hoveredObject.properties && k in hoveredObject.properties);
         highlightedFeatureId = uniqueIdProperty
           ? hoveredObject.properties[uniqueIdProperty]
           : (hoveredObject as any).id;
@@ -570,7 +572,8 @@ export default class VectorTileLayer extends AbstractTileLayer<VectorTile, Featu
       // Build per-tile clipped overlay to draw only the outer stroke of highlighted feature per tile
       const perTileOverlays = this._getPerTileOverlays(hoveredObject, {
         defaultLayerProps,
-        visConfig
+        visConfig,
+        uniqueIdProperty
       });
 
       const layers = [
@@ -705,18 +708,15 @@ export default class VectorTileLayer extends AbstractTileLayer<VectorTile, Featu
    */
   _getPerTileOverlays(
     hoveredObject: Feature,
-    options: {defaultLayerProps: any; visConfig: any}
+    options: {defaultLayerProps: any; visConfig: any; uniqueIdProperty?: string}
   ): DeckLayer[] {
     let perTileOverlays: DeckLayer[] = [];
     if (hoveredObject) {
       try {
         const tiles = this.tileDataset?.getTiles?.() || [];
         // Derive hovered id from hoveredObject
-        const hoveredPid = UUID_CANDIDATES.find(
-          k => hoveredObject?.properties && k in hoveredObject.properties
-        );
-        const hoveredId = hoveredPid
-          ? String(hoveredObject?.properties?.[hoveredPid])
+        const hoveredId = options.uniqueIdProperty
+          ? String(hoveredObject?.properties?.[options.uniqueIdProperty])
           : String((hoveredObject as any)?.id);
 
         // Group matched fragments by tile id
@@ -727,8 +727,9 @@ export default class VectorTileLayer extends AbstractTileLayer<VectorTile, Featu
           if (!Array.isArray(features)) continue;
           const tileId = (tile as any).id;
           for (const f of features) {
-            const pid = UUID_CANDIDATES.find(k => f.properties && k in f.properties);
-            const fid = pid ? f.properties?.[pid] : (f as any).id;
+            const fid = options.uniqueIdProperty
+              ? f.properties?.[options.uniqueIdProperty]
+              : (f as any).id;
             if (fid !== undefined && String(fid) === hoveredId) {
               (byTile[tileId] = byTile[tileId] || []).push(f as Feature);
             }

src/localization/src/translations/en.ts

@@ -99,6 +99,7 @@ export default {
     service: 'Service',
     layer: 'Layer',
     appearance: 'Appearance',
+    uniqueIdField: 'Unique ID Field',
     type: {
       point: 'point',
       arc: 'arc',