@carto/kepler.gl 0.0.65 → 0.0.66

package/package.json

@@ -2,7 +2,7 @@
   "name": "@carto/kepler.gl",
   "author": "CARTO",
   "homepage": "https://github.com/CartoDB/carto-kepler#readme",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "description": "kepler.gl is a webgl based application to visualize large scale location data in the browser",
   "license": "MIT",
   "main": "dist/index.js",
@@ -238,14 +238,13 @@
     "tough-cookie": "4.0.0"
   },
   "peerDependencies": {
-    "@deck.gl/aggregation-layers": "^8.9.5",
-    "@deck.gl/carto": "^8.9.5",
-    "@deck.gl/core": "^8.9.5",
-    "@deck.gl/extensions": "^8.9.5",
-    "@deck.gl/geo-layers": "^8.9.5",
-    "@deck.gl/layers": "^8.9.5",
-    "@deck.gl/mesh-layers": "^8.9.5",
-    "@deck.gl/react": "^8.9.5",
+    "@deck.gl/aggregation-layers": "^8.7.3",
+    "@deck.gl/core": "^8.7.3",
+    "@deck.gl/extensions": "^8.7.3",
+    "@deck.gl/geo-layers": "^8.7.3",
+    "@deck.gl/layers": "^8.7.3",
+    "@deck.gl/mesh-layers": "^8.7.3",
+    "@deck.gl/react": "^8.7.3",
     "@loaders.gl/core": "^3.1.5",
     "@loaders.gl/csv": "^3.1.5",
     "@loaders.gl/gltf": "^3.1.5",
@@ -271,10 +270,6 @@
   "engines": {
     "node": ">=12.0.0"
   },
-  "maintainers": [
-    "Shan He <heshan0131@gmail.com>",
-    "Giuseppe Macri <gmacri@uber.com>"
-  ],
   "volta": {
     "node": "12.19.0"
   }

package/src/components/side-panel/layer-panel/layer-config-group.js

@@ -40,7 +40,7 @@ export const ConfigGroupCollapsibleContent = styled.div.attrs({
   overflow: visible;
   transition: max-height 0.3s ease-out;
   height: max-content;
-  max-height: 650px;
+  max-height: 600px;
 `;
 
 export const ConfigGroupCollapsibleHeader = styled.div.attrs({
@@ -62,7 +62,7 @@ export const StyledLayerConfigGroup = styled.div`
   &.collapsed {
     .layer-config-group__header__collapsible {
       overflow: visible;
-      max-height: 650px;
+      max-height: 600px;
     }
     .layer-config-group__content {
       .layer-config-group__content__collapsible {

package/src/components/side-panel/layer-panel/text-label-panel.js

@@ -67,7 +67,6 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector, Col
     render() {
       const {updateLayerTextLabel, textLabel, fields, AddButton} = this.props;
       const currentFields = textLabel.map(tl => tl.field && tl.field.name).filter(d => d);
-
       return (
         <LayerConfigGroup label={'panel.text.label'} collapsible>
           <ConfigGroupCollapsibleHeader>
@@ -81,11 +80,11 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector, Col
           <ConfigGroupCollapsibleContent>
             {textLabel.map((tl, idx) => (
               <div
-                key={`${tl.field ? tl.field.name : 'null'}-${idx}`}
+                key={tl.field ? tl.field.name : `null-${idx}`}
                 className="side-panel-section-group"
               >
                 <PanelLabel>
-                  <FormattedMessage id={`panel.text.${idx === 0 ? 'main' : 'secondary'}Label`} />
+                  <FormattedMessage id={'panel.text.labelWithId'} values={{labelId: idx + 1}} />
                 </PanelLabel>
                 <SidePanelSection>
                   <FieldSelector
@@ -121,51 +120,33 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector, Col
                   />
                 </SidePanelSection>
                 <SidePanelSection>
-                  <PanelLabel>
-                    <FormattedMessage id="panel.text.outlineColor" />
-                  </PanelLabel>
-                  <ColorSelector
-                    colorSets={[
-                      {
-                        selectedColor: tl.outlineColor,
-                        setColor: v => updateLayerTextLabel(idx, 'outlineColor', v)
-                      }
-                    ]}
-                  />
+                  <SpaceBetweenFlexbox>
+                    <SBFlexboxItem>
+                      <PanelLabel>
+                        <FormattedMessage id="panel.text.textAnchor" />
+                      </PanelLabel>
+                      <ItemSelector
+                        {...LAYER_TEXT_CONFIGS.textAnchor}
+                        selectedItems={tl.anchor}
+                        onChange={val => updateLayerTextLabel(idx, 'anchor', val)}
+                      />
+                    </SBFlexboxItem>
+                    <SBFlexboxItem>
+                      <PanelLabel>
+                        <FormattedMessage id="panel.text.alignment" />
+                      </PanelLabel>
+                      <ItemSelector
+                        {...LAYER_TEXT_CONFIGS.textAlignment}
+                        selectedItems={tl.alignment}
+                        onChange={val => updateLayerTextLabel(idx, 'alignment', val)}
+                      />
+                    </SBFlexboxItem>
+                  </SpaceBetweenFlexbox>
                 </SidePanelSection>
-                {idx === 0 && (
-                  <SidePanelSection>
-                    <SpaceBetweenFlexbox>
-                      <SBFlexboxItem>
-                        <PanelLabel>
-                          <FormattedMessage id="panel.text.textAnchor" />
-                        </PanelLabel>
-                        <ItemSelector
-                          {...LAYER_TEXT_CONFIGS.textAnchor}
-                          selectedItems={tl.anchor}
-                          onChange={val => updateLayerTextLabel(idx, 'anchor', val)}
-                        />
-                      </SBFlexboxItem>
-                      <SBFlexboxItem>
-                        <PanelLabel>
-                          <FormattedMessage id="panel.text.alignment" />
-                        </PanelLabel>
-                        <ItemSelector
-                          {...LAYER_TEXT_CONFIGS.textAlignment}
-                          selectedItems={tl.alignment}
-                          onChange={val => updateLayerTextLabel(idx, 'alignment', val)}
-                        />
-                      </SBFlexboxItem>
-                    </SpaceBetweenFlexbox>
-                  </SidePanelSection>
-                )}
               </div>
             ))}
             <SidePanelSection>
-              <AddButton
-                disabled={textLabel.length >= 2}
-                onClick={val => updateLayerTextLabel(textLabel.length)}
-              />
+              <AddButton onClick={val => updateLayerTextLabel(textLabel.length)} />
             </SidePanelSection>
           </ConfigGroupCollapsibleContent>
         </LayerConfigGroup>

package/src/layers/base-layer.js

@@ -20,9 +20,40 @@
 
 import {console as Console} from 'global/window';
 import keymirror from 'keymirror';
-import {CollisionFilterExtension, DataFilterExtension} from '@deck.gl/extensions';
+import {DataFilterExtension} from '@deck.gl/extensions';
 import {COORDINATE_SYSTEM, Layer as DeckLayer} from '@deck.gl/core';
-import {_PointLabelLayer as PointLabelLayer} from '@deck.gl/carto';
+import {TextLayer} from '@deck.gl/layers';
+
+// Workaround until https://github.com/visgl/deck.gl/pull/7513 is released
+DeckLayer.defaultProps.getFilterValue = {type: 'accessor', value: 0};
+
+// Workaround until https://github.com/visgl/deck.gl/pull/7507 is released
+function deepEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (!a || !b) {
+    return false;
+  }
+  for (const key in a) {
+    const aValue = a[key];
+    const bValue = b[key];
+    const equals = aValue === bValue || deepEqual(aValue, bValue);
+    if (!equals) {
+      return false;
+    }
+  }
+  return true;
+}
+
+DeckLayer.defaultProps.loadOptions = {
+  type: 'object',
+  value: {},
+  optional: true,
+  compare: true,
+  equal: deepEqual
+};
+
 import DefaultLayerIcon from './default-layer-icon';
 import {diffUpdateTriggers} from './layer-update';
 
@@ -72,7 +103,6 @@ const FALLBACK_ICON =
 const MAX_SAMPLE_SIZE = 5000;
 const defaultDomain = [0, 1];
 const dataFilterExtension = new DataFilterExtension({filterSize: MAX_GPU_FILTERS});
-const collisionFilterExtension = new CollisionFilterExtension();
 
 const defaultDataAccessor = dc => d => d;
 const defaultGetFieldValue = (field, d) => field.valueAccessor(d);
@@ -1311,89 +1341,51 @@ class Layer {
     };
   }
 
-  renderTextLabelLayer(
-    {getPosition, getRadius, radiusScale, updateTriggers, sharedProps},
-    renderOpts
-  ) {
+  renderTextLabelLayer({getPosition, getPixelOffset, updateTriggers, sharedProps}, renderOpts) {
     const {data, mapState} = renderOpts;
     const {textLabel, visibilityByZoom} = this.config;
-    const extensions = [...sharedProps.extensions, collisionFilterExtension];
-
-    if (!data || !data.textLabels || !data.textLabels[0] || !data.textLabels[0].getText) {
-      return [];
-    }
 
-    const [mainLabel, secondaryLabel] = textLabel;
-    const {
-      alignment,
-      anchor,
-      color: getColor,
-      field: mainField,
-      outlineColor,
-      size: sizeScale
-    } = mainLabel;
-    const {
-      color: getSecondaryColor,
-      field: secondaryField,
-      outlineColor: secondaryOutlineColor,
-      size: secondarySizeScale
-    } = secondaryLabel || {};
-
-    return [
-      new PointLabelLayer({
-        ...sharedProps,
-
-        // Recreate layer when labels change otherwise rendering breaks
-        // TODO could be more efficient with updateTriggers?
-        id: `${this.id}-${mainField?.name}-${secondaryField?.name}-label`,
-        data: data.data,
-        visibilityByZoom,
-        extensions,
-
-        characterSet: 'auto',
-        collisionEnabled: true,
-        collisionGroup: `${this.id}-labels`,
-
-        getText: data.textLabels[0].getText,
-        getColor,
-        sizeScale,
-        outlineColor,
-
-        ...(secondaryField && {
-          getSecondaryText: data.textLabels[1].getText,
-          getSecondaryColor,
-          secondarySizeScale,
-          secondaryOutlineColor
-        }),
-
-        // Position
-        getPosition,
-        getRadius,
-        radiusScale,
-        getTextAnchor: anchor,
-        getAlignmentBaseline: alignment,
-
-        // Style
-        fontFamily: 'Inter, sans',
-        fontSettings: {sdf: true},
-        fontWeight: 500,
-        outlineWidth: 4,
-        parameters: {
-          // text will always show on top of all layers
-          depthTest: false
-        },
-
-        getFilterValue: data.getFilterValue,
-        updateTriggers: {
-          ...updateTriggers,
-          getText: mainField?.name,
-          getColor: mainField?.color,
-          getTextAnchor: mainLabel.anchor,
-          getAlignmentBaseline: mainLabel.alignment,
-          getSecondaryText: secondaryField?.name
-        }
-      })
-    ];
+    return data.textLabels.reduce((accu, d, i) => {
+      if (d.getText) {
+        accu.push(
+          new TextLayer({
+            ...sharedProps,
+            id: `${this.id}-label-${textLabel[i].field?.name}`,
+            data: data.data,
+            visibilityByZoom,
+            getText: d.getText,
+            getPosition,
+            characterSet: d.characterSet,
+            getPixelOffset: getPixelOffset(textLabel[i]),
+            getSize: 1,
+            sizeScale: textLabel[i].size,
+            getTextAnchor: textLabel[i].anchor,
+            getAlignmentBaseline: textLabel[i].alignment,
+            getColor: textLabel[i].color,
+            parameters: {
+              // text will always show on top of all layers
+              depthTest: false
+            },
+
+            getFilterValue: data.getFilterValue,
+            updateTriggers: {
+              ...updateTriggers,
+              getText: textLabel[i].field?.name,
+              getPixelOffset: {
+                ...updateTriggers.getPixelOffset,
+                ...updateTriggers.getRadius,
+                anchor: textLabel[i].anchor,
+                alignment: textLabel[i].alignment
+              },
+              getTextAnchor: textLabel[i].anchor,
+              getAlignmentBaseline: textLabel[i].alignment,
+              getColor: textLabel[i].color
+            }
+          })
+        );
+      }
+      return accu;
+    }, []);
   }
 
   /**

package/src/layers/layer-factory.js

@@ -43,21 +43,13 @@ export {DEFAULT_COLOR_RANGE};
 /** @type {import('./layer-factory').LayerTextLabel} */
 export const DEFAULT_TEXT_LABEL = {
   field: null,
-  color: [44, 48, 50],
-  outlineColor: [255, 255, 255],
-  size: 12,
+  color: [255, 255, 255],
+  size: 18,
   offset: [0, 0],
   anchor: 'start',
   alignment: 'center'
 };
 
-/** @type {import('./layer-factory').LayerTextLabel} */
-export const DEFAULT_SECONDARY_TEXT_LABEL = {
-  ...DEFAULT_TEXT_LABEL,
-  color: [128, 130, 132],
-  size: 10
-};
-
 /** @type {import('./layer-factory').ColorRange} */
 export const DEFAULT_CUSTOM_PALETTE = {
   name: 'color.customPalette',
@@ -458,8 +450,8 @@ export const LAYER_VIS_CONFIGS = {
 export const LAYER_TEXT_CONFIGS = {
   fontSize: {
     type: 'number',
-    range: [6, 32],
-    value0: 6,
+    range: [1, 100],
+    value0: 1,
     step: 1,
     isRanged: false,
     label: 'Font size',

package/src/layers/layer-text-label.js

@@ -54,9 +54,40 @@ export const textLabelAccessor = textLabel => dc => d => {
   return notNullorUndefined(val) ? String(val) : '';
 };
 
-export const formatTextLabelData = ({textLabel, dataContainer}) => {
+export const formatTextLabelData = ({
+  textLabel,
+  triggerChanged,
+  oldLayerData,
+  data,
+  dataContainer
+}) => {
   return textLabel.map((tl, i) => {
-    const getText = tl.field ? textLabelAccessor(tl)(dataContainer) : null;
-    return {getText};
+    if (!tl.field) {
+      // if no field selected,
+      return {
+        getText: null,
+        characterSet: []
+      };
+    }
+
+    const getText = textLabelAccessor(tl)(dataContainer);
+    let characterSet;
+
+    if (
+      !triggerChanged[`getLabelCharacterSet-${i}`] &&
+      oldLayerData &&
+      oldLayerData.textLabels &&
+      oldLayerData.textLabels[i]
+    ) {
+      characterSet = oldLayerData.textLabels[i].characterSet;
+    } else {
+      const allLabels = tl.field ? data.map(getText) : [];
+      characterSet = uniq(allLabels.join(''));
+    }
+
+    return {
+      characterSet,
+      getText
+    };
   });
 };

package/src/layers/point-layer/point-layer.js

@@ -29,7 +29,7 @@ import {findDefaultColorField} from 'utils/dataset-utils';
 import PointLayerIcon from './point-layer-icon';
 import {DEFAULT_LAYER_COLOR, CHANNEL_SCALES, UNKNOWN_COLOR} from 'constants/default-settings';
 
-import {formatTextLabelData} from '../layer-text-label';
+import {getTextOffsetByRadius, formatTextLabelData} from '../layer-text-label';
 
 export const pointPosAccessor = ({lat, lng, altitude}) => dc => d => [
   dc.valueAt(d.index, lng.fieldIdx),
@@ -242,7 +242,13 @@ export default class PointLayer extends Layer {
     const getPosition = this.getPositionAccessor(dataContainer);
 
     // get all distinct characters in the text labels
-    const textLabels = formatTextLabelData({textLabel, dataContainer});
+    const textLabels = formatTextLabelData({
+      textLabel,
+      triggerChanged,
+      oldLayerData,
+      data,
+      dataContainer
+    });
 
     const accessors = this.getAttributeAccessors({dataContainer});
 
@@ -272,12 +278,12 @@ export default class PointLayer extends Layer {
   // eslint-disable-next-line complexity, max-statements
   renderLayer(opts) {
     const {data, gpuFilter, objectHovered, interactionConfig} = opts;
-    const {customMarkers, customMarkersUrl, customMarkersRange} = this.config.visConfig;
 
     const radiusScale = this.getRadiusScale();
 
     const defaultLayerProps = this.getDefaultDeckLayerProps(opts);
     const brushingProps = this.getBrushingExtensionProps(interactionConfig);
+    const getPixelOffset = getTextOffsetByRadius(radiusScale, data.getRadius);
     const extensions = [...defaultLayerProps.extensions, brushingExtension];
 
     const updateTriggers = {
@@ -290,7 +296,6 @@ export default class PointLayer extends Layer {
       getFilterValue: data.getFilterValue,
       extensions,
       filterRange: defaultLayerProps.filterRange,
-      maskId: defaultLayerProps.maskId,
       visible: defaultLayerProps.visible,
       ...brushingProps
     };
@@ -300,9 +305,7 @@ export default class PointLayer extends Layer {
       {
         getPosition: data.getPosition,
         sharedProps,
-        // TODO remove this scaling by half here and elsewhere
-        radiusScale: customMarkers ? radiusScale / 2 : radiusScale,
-        getRadius: data.getRadius,
+        getPixelOffset,
         updateTriggers
       },
       opts
@@ -316,6 +319,7 @@ export default class PointLayer extends Layer {
     };
 
     const customMarkersField = this.config.customMarkersField;
+    const {customMarkers, customMarkersUrl, customMarkersRange} = this.config.visConfig;
     const customMarkersConfigured =
       customMarkers && Boolean(customMarkersUrl || (customMarkersField && customMarkersRange));
     const customMarkersMisConfigured = customMarkers && !customMarkersConfigured;

package/src/localization/en.js

@@ -68,14 +68,12 @@ export default {
   panel: {
     text: {
       label: 'label',
-      mainLabel: 'Main Label',
-      secondaryLabel: 'Secondary Label',
+      labelWithId: 'Label {labelId}',
       fontSize: 'Font size',
       fontColor: 'Font color',
-      outlineColor: 'Outline color',
       textAnchor: 'Text anchor',
       alignment: 'Alignment',
-      addMoreLabel: 'Add secondary label'
+      addMoreLabel: 'Add More Label'
     }
   },
   sidebar: {
@@ -83,7 +81,7 @@ export default {
       layer: 'Layers',
       filter: 'Filters',
       interaction: 'Interactions',
-      basemap: 'Basemap'
+      basemap: 'Base map'
     }
   },
   layer: {
@@ -159,7 +157,6 @@ export default {
     highPrecisionRenderingDescription: 'High precision will result in slower performance',
     height: 'Height',
     heightDescription: 'Click button at top right of the map to switch to 3d view',
-    labels: 'Labels',
     fill: 'Fill',
     enablePolygonHeight: 'Enable Polygon Height',
     showWireframe: 'Show Wireframe',
@@ -216,7 +213,7 @@ export default {
     hideLayerPanel: 'Hide layer panel',
     showLayerPanel: 'Show layer panel',
     moveToTop: 'Move to top of data layers',
-    selectBaseMapStyle: 'Select Basemap Style',
+    selectBaseMapStyle: 'Select Base Map Style',
     delete: 'Delete',
     timePlayback: 'Time Playback',
     cloudStorage: 'Cloud Storage',

package/src/processors/data-processor.js

@@ -288,7 +288,10 @@ export function getFieldsFromData(data, fieldOrder) {
   // add a check for epoch timestamp
   const metadata = Analyzer.computeColMeta(
     data,
-    [{regex: /.*geojson|all_points/g, dataType: 'GEOMETRY'}],
+    [
+      {regex: /.*geojson|all_points/g, dataType: 'GEOMETRY'},
+      {regex: /.*census/g, dataType: 'STRING'}
+    ],
     {ignoredDataTypes: IGNORE_DATA_TYPES}
   );
 

package/src/reducers/vis-state-updaters.js

@@ -76,7 +76,7 @@ import {
 } from 'utils/split-map-utils';
 
 import {Layer, LayerClasses, LAYER_ID_LENGTH} from 'layers';
-import {DEFAULT_TEXT_LABEL, DEFAULT_SECONDARY_TEXT_LABEL} from 'layers/layer-factory';
+import {DEFAULT_TEXT_LABEL} from 'layers/layer-factory';
 import {EDITOR_MODES, SORT_ORDER, FILTER_TYPES} from 'constants/default-settings';
 import {pick_, merge_, swap_} from './composer-helpers';
 import {processFileContent} from 'actions/vis-state-actions';
@@ -315,19 +315,16 @@ function addOrRemoveTextLabels(newFields, textLabel) {
 
   // delete
   newTextLabel = newTextLabel.filter(tl => tl.field && !deleteFields.includes(tl.field.name));
+  newTextLabel = !newTextLabel.length ? [DEFAULT_TEXT_LABEL] : newTextLabel;
 
   // add
-  newTextLabel = newTextLabel.filter(tl => tl.field);
-  const defaultLabel = newTextLabel.length ? DEFAULT_SECONDARY_TEXT_LABEL : DEFAULT_TEXT_LABEL;
-  newTextLabel = [...newTextLabel, ...addFields.map(af => ({...defaultLabel, field: af}))];
-
-  // limit to 2 labels (overwrite 2nd label with 3rd)
-  if (newTextLabel.length > 2) {
-    newTextLabel = [newTextLabel[0], newTextLabel[2]];
-  }
-
-  // default
-  newTextLabel = !newTextLabel.length ? [DEFAULT_TEXT_LABEL] : newTextLabel;
+  newTextLabel = [
+    ...newTextLabel.filter(tl => tl.field),
+    ...addFields.map(af => ({
+      ...DEFAULT_TEXT_LABEL,
+      field: af
+    }))
+  ];
 
   return newTextLabel;
 }
@@ -362,7 +359,7 @@ export function layerTextLabelChangeUpdater(state, action) {
   let newTextLabel = textLabel.slice();
   if (!textLabel[idx] && idx === textLabel.length) {
     // if idx is set to length, add empty text label
-    newTextLabel = [...textLabel, idx === 0 ? DEFAULT_TEXT_LABEL : DEFAULT_SECONDARY_TEXT_LABEL];
+    newTextLabel = [...textLabel, DEFAULT_TEXT_LABEL];
   }
 
   if (idx === 'all' && prop === 'fields') {