kepler.gl 3.1.9 → 3.1.10

package/src/components/src/index.ts

@@ -468,6 +468,14 @@ export {
   VisConfigSwitchFactory,
   appInjector
 };
+export {
+  DROPPABLE_MAP_CONTAINER_TYPE,
+  SORTABLE_LAYER_TYPE,
+  SORTABLE_EFFECT_TYPE,
+  SORTABLE_SIDE_PANEL_TYPE,
+  DND_MODIFIERS,
+  DND_EMPTY_MODIFIERS
+} from './common/dnd-layer-items';
 
 // Individual Component from Dependency Tree
 export const TimeRangeSlider = appInjector.get(TimeRangeSliderFactory);

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

@@ -359,6 +359,9 @@ export interface MapContainerProps {
     onDeckRender?: (deckProps: Record<string, unknown>) => Record<string, unknown> | null;
     onDeckAfterRender?: (deckProps: Record<string, unknown>) => any;
   };
+
+  // Optional: override legend header logo in map controls (used by image export)
+  logoComponent?: React.FC | React.ReactNode;
 }
 
 export default function MapContainerFactory(
@@ -1126,6 +1129,7 @@ export default function MapContainerFactory(
             mapControls={mapControls}
             readOnly={this.props.readOnly}
             scale={mapState.scale || 1}
+            logoComponent={this.props.logoComponent}
             top={
               interactionConfig.geocoder && interactionConfig.geocoder.enabled
                 ? theme.mapControlTop

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

@@ -91,6 +91,9 @@ interface PlotContainerProps {
 
   // Flags
   enableErrorNotification?: boolean;
+
+  // Optional: override legend header logo during export
+  logoComponent?: React.ReactNode;
 }
 
 export default function PlotContainerFactory(
@@ -117,7 +120,8 @@ export default function PlotContainerFactory(
     addNotification,
 
     // Flags
-    enableErrorNotification
+    enableErrorNotification,
+    logoComponent
   }: PlotContainerProps) {
     const plottingAreaRef = useRef<HTMLDivElement>(null);
     const [plotEffects] = useState<Effect[]>(() =>
@@ -288,9 +292,11 @@ export default function PlotContainerFactory(
         visState: {
           ...mapFields.visState,
           effects: plotEffects
-        }
+        },
+        // allow overriding the legend panel logo in export
+        logoComponent
       }),
-      [mapFields, scaledMapStyle, newMapState, legend, onMapRender, plotEffects]
+      [mapFields, scaledMapStyle, newMapState, legend, onMapRender, plotEffects, logoComponent]
     );
 
     const isSplit = splitMaps.length > 1;

package/src/components/src/side-panel/layer-manager.tsx

@@ -54,6 +54,7 @@ type LayerManagerProps = {
   updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
   panelListView: PanelListView;
   panelMetadata: SidePanelItem;
+  showDeleteDataset?: boolean;
 } & WrappedComponentProps;
 
 export const LayerBlendingSelector = React.memo(
@@ -165,6 +166,7 @@ function LayerManagerFactory(
     layerBlending,
     overlayBlending,
     showAddDataModal,
+    showDeleteDataset = true,
     updateTableColor,
     showDatasetTable,
     removeDataset,
@@ -216,7 +218,7 @@ function LayerManagerFactory(
           showDatasetTable={showDatasetTable}
           updateTableColor={updateTableColor}
           removeDataset={removeDataset}
-          showDeleteDataset
+          showDeleteDataset={showDeleteDataset}
           showDatasetList={!isSortByDatasetMode}
           showAddDataModal={showAddDataModal}
         />
@@ -242,7 +244,7 @@ function LayerManagerFactory(
               uiStateActions={uiStateActions}
               visStateActions={visStateActions}
               mapStateActions={mapStateActions}
-              showDeleteDataset
+              showDeleteDataset={showDeleteDataset}
             />
           ) : (
             <LayerList

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

@@ -13,6 +13,7 @@ import {
   getLegendOfScale,
   initCustomPaletteByCustomScale,
   histogramFromValues,
+  histogramFromOrdinal,
   histogramFromThreshold,
   getHistogramDomain,
   hasColorMap
@@ -176,8 +177,17 @@ function ColorScaleSelectorFactory(
         : idx => dataset.dataContainer.rowAsArray(idx);
     }, [dataset, field]);
 
+    const ordinalDomain = useMemo(() => {
+      return layer.config[layer.visualChannels[channelKey].domain] || [];
+    }, [channelKey, layer.config, layer.visualChannels]);
+
     // aggregatedBins should be the raw data
     const allBins = useMemo(() => {
+      if (field?.type === ALL_FIELD_TYPES.string) {
+        // Use ordinal bins for string columns, as d3 could potentially generate invalid numeric bins, and crash
+        return histogramFromOrdinal(ordinalDomain, dataset.allIndexes, fieldValueAccessor);
+      }
+
       if (aggregatedBins) {
         return histogramFromValues(
           Object.values(aggregatedBins).map(bin => bin.i),
@@ -188,16 +198,12 @@ function ColorScaleSelectorFactory(
       return columnStats?.bins
         ? columnStats?.bins
         : histogramFromValues(dataset.allIndexes, HISTOGRAM_BINS, fieldValueAccessor);
-    }, [aggregatedBins, columnStats, dataset, fieldValueAccessor]);
+    }, [aggregatedBins, columnStats, dataset, fieldValueAccessor, field?.type, ordinalDomain]);
 
     const histogramDomain = useMemo(() => {
       return getHistogramDomain({aggregatedBins, columnStats, dataset, fieldValueAccessor});
     }, [dataset, fieldValueAccessor, aggregatedBins, columnStats]);
 
-    const ordinalDomain = useMemo(() => {
-      return layer.config[layer.visualChannels[channelKey].domain] || [];
-    }, [channelKey, layer.config, layer.visualChannels]);
-
     const isFiltered = aggregatedBins
       ? false
       : dataset.filteredIndexForDomain.length !== dataset.allIndexes.length;
@@ -207,16 +213,23 @@ function ColorScaleSelectorFactory(
       if (!isFiltered) {
         return allBins;
       }
-      // get threholds
+      if (field?.type === ALL_FIELD_TYPES.string) {
+        return histogramFromOrdinal(
+          ordinalDomain as any,
+          dataset.filteredIndexForDomain,
+          fieldValueAccessor
+        );
+      }
+      // numeric thresholds
       const filterEmptyBins = false;
-      const threholds = allBins.map(b => b.x0);
+      const thresholds = allBins.map(b => b.x0);
       return histogramFromThreshold(
-        threholds,
+        thresholds,
         dataset.filteredIndexForDomain,
         fieldValueAccessor,
         filterEmptyBins
       );
-    }, [dataset, fieldValueAccessor, allBins, isFiltered]);
+    }, [dataset, fieldValueAccessor, allBins, isFiltered, field?.type, ordinalDomain]);
 
     const onSelectScale = useCallback(
       val => {