kepler.gl 3.1.6 → 3.1.7

package/src/components/src/side-panel/layer-panel/layer-type-list-item.tsx

@@ -1,11 +1,13 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
+import classNames from 'classnames';
 import React, {ComponentType} from 'react';
 import styled, {withTheme} from 'styled-components';
-import {KEPLER_UNFOLDED_BUCKET} from '@kepler.gl/constants';
-import classNames from 'classnames';
+
 import {FormattedMessage} from '@kepler.gl/localization';
+import {getApplicationConfig} from '@kepler.gl/utils';
+
 import {BaseProps} from '../../common/icons';
 
 export type LayerTypeListItemProps = {
@@ -21,7 +23,11 @@ type WithThemeProps = LayerTypeListItemProps & {theme: Record<string, string>};
 
 export type LayerTypeListItemType = React.FC<LayerTypeListItemProps>;
 
-const StyledListItem = styled.div`
+type StyledListItemProps = {
+  cdnUrl: string;
+};
+
+const StyledListItem = styled.div<StyledListItemProps>`
   &.list {
     display: flex;
     align-items: center;
@@ -46,7 +52,7 @@ const StyledListItem = styled.div`
   .layer-type-selector__item__icon {
     color: ${props => props.theme.labelColor};
     display: flex;
-    background-image: url(${`${KEPLER_UNFOLDED_BUCKET}/images/kepler.gl-layer-icon-bg.png`});
+    background-image: url(${props => `${props.cdnUrl}/images/kepler.gl-layer-icon-bg.png`});
     background-size: ${props => props.theme.layerTypeIconSizeL}px
       ${props => props.theme.layerTypeIconSizeL}px;
     height: ${props => props.theme.layerTypeIconSizeL}px;
@@ -68,6 +74,7 @@ export function LayerTypeListItemFactory() {
       className={classNames('layer-type-selector__item__inner', className, {
         list: !isTile
       })}
+      cdnUrl={getApplicationConfig().cdnUrl}
     >
       <div className="layer-type-selector__item__icon">
         <value.icon height={`${isTile ? theme.layerTypeIconSizeL : theme.layerTypeIconSizeSM}px`} />

package/src/components/src/side-panel/layer-panel/raster-tile-colormap-list-item.tsx

@@ -4,8 +4,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import {RasterLayerResources as cdnUrls} from '@kepler.gl/constants';
-import {getCategoricalColormapDataUrl} from '@kepler.gl/layers';
+import {getCategoricalColormapDataUrl, RasterLayerResources} from '@kepler.gl/layers';
 import type {CategoricalColormapOptions} from '@kepler.gl/layers';
 
 const StyledColorMapListItem = styled.div`
@@ -40,7 +39,7 @@ const ColorMapImg: React.FC<{id: string; categoricalOptions: CategoricalColormap
     }
     url = dataUrl;
   } else {
-    url = cdnUrls.rasterColorMap(id);
+    url = RasterLayerResources.rasterColorMap(id);
   }
   return <img src={url} style={{width: '100%', height: '100%'}} />;
 };

package/src/components/src/side-panel/layer-panel/vis-config-slider.tsx

@@ -64,7 +64,7 @@ const CustomInputLabel = styled.label`
 const RangeInput = styled.input`
   ${props => props.theme.input};
   font-size: ${props => props.theme.sliderInputFontSize};
-  width: 44px;
+  width: ${props => props.theme.customRangeInputWidth}px;
   overflow: auto;
   height: 20px;
   margin-top: 5px;
@@ -82,7 +82,7 @@ const LazyInput: React.FC<LazyInputProps> = ({value, onChange, name}) => {
       switch (e.keyCode) {
         case KeyEvent.DOM_VK_ENTER:
         case KeyEvent.DOM_VK_RETURN:
-          onChange(stateValue);
+          onChange(name, stateValue);
           if (inputRef !== null) {
             // @ts-ignore
             inputRef?.current.blur();
@@ -92,7 +92,7 @@ const LazyInput: React.FC<LazyInputProps> = ({value, onChange, name}) => {
           break;
       }
     },
-    [onChange, stateValue]
+    [onChange, name, stateValue]
   );
 
   const _onChange = useCallback(e => setValue(e.target.value), [setValue]);
@@ -114,8 +114,15 @@ const LazyInput: React.FC<LazyInputProps> = ({value, onChange, name}) => {
 const CustomInput: React.FC<CustomInputProps> = ({isRanged, value, onChangeCustomInput}) => {
   const onChangeInput = useCallback(
     (name, v) => {
-      if (isRanged) onChangeCustomInput(name === 'value0' ? [v, value[1]] : [value[0], v]);
-      else onChangeCustomInput(v);
+      const prevValue = isRanged ? (name === 'value1' ? value[0] : value[1]) : value;
+      const valueAsNumber = Number(v);
+      const convertedValue =
+        typeof prevValue === 'number' ? (isNaN(valueAsNumber) ? prevValue : valueAsNumber) : v;
+      if (isRanged)
+        onChangeCustomInput(
+          name === 'value0' ? [convertedValue, value[1]] : [value[0], convertedValue]
+        );
+      else onChangeCustomInput(convertedValue);
     },
     [isRanged, value, onChangeCustomInput]
   );

package/src/components/src/side-panel/map-style-panel/map-style-selector.tsx

@@ -9,6 +9,7 @@ import {FormattedMessage} from '@kepler.gl/localization';
 import {MapStyle} from '@kepler.gl/reducers';
 import {NO_BASEMAP_ICON} from '@kepler.gl/constants';
 import {MapStyles} from '@kepler.gl/types';
+import {getApplicationConfig} from '@kepler.gl/utils';
 
 import {ArrowDown} from '../../common/icons';
 import PanelHeaderActionFactory from '../panel-header-action';
@@ -113,7 +114,12 @@ function MapStyleSelectorFactory(PanelHeaderAction: ReturnType<typeof PanelHeade
         </PanelLabel>
 
         {Object.values(mapStyles).map(
-          ({id, custom, icon = NO_BASEMAP_ICON, label = 'Untitled'}) => (
+          ({
+            id,
+            custom,
+            icon = `${getApplicationConfig().cdnUrl}/${NO_BASEMAP_ICON}`,
+            label = 'Untitled'
+          }) => (
             <StyledMapDropdown
               className={classnames('map-dropdown-option', {
                 collapsed: !isSelecting && id !== styleType,

package/src/constants/dist/default-settings.d.ts

@@ -2,7 +2,7 @@ import { BaseMapStyle, EffectDescription, RGBAColor, SyncTimelineMode, BaseMapCo
 import { scaleLinear, scaleLog, scaleOrdinal, scalePoint, scaleQuantile, scaleQuantize, scaleSqrt, scaleThreshold } from 'd3-scale';
 export declare const ACTION_PREFIX = "@@kepler.gl/";
 export declare const KEPLER_UNFOLDED_BUCKET = "https://studio-public-data.foursquare.com/statics/keplergl";
-export declare const BASEMAP_ICON_PREFIX: string;
+export declare const BASEMAP_ICON_PREFIX = "geodude";
 export declare const DEFAULT_MAPBOX_API_URL = "https://api.mapbox.com";
 export declare const TRANSITION_DURATION = 0;
 /**
@@ -856,15 +856,17 @@ export declare enum GEOARROW_EXTENSIONS {
     MULTIPOLYGON = "geoarrow.multipolygon",
     WKB = "geoarrow.wkb"
 }
-export declare const RasterLayerResources: {
-    rasterColorMap: (colormapId: string) => string;
-};
+export declare const LOADERS_CDN_VERSION = "4.3.2";
 export declare const LOADERS_CDN_URL = "https://unpkg.com/@loaders.gl";
 export declare const getLoaderOptions: () => {
     mvt: {
         workerUrl: string;
     };
-    'quantized-mesh': {};
-    npy: {};
+    'quantized-mesh': {
+        workerUrl: string;
+    };
+    npy: {
+        workerUrl: string;
+    };
 };
 export {};