@carto/kepler.gl 0.0.65-alpha.labels.2 → 0.0.65-alpha.labels.4

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-alpha.labels.2",
+  "version": "0.0.65-alpha.labels.4",
   "description": "kepler.gl is a webgl based application to visualize large scale location data in the browser",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/map-container.js

@@ -303,7 +303,6 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         return;
       }
 
-      throw error;
       const errorMessage = `An error in deck.gl: ${error?.message} in ${layer?.id}`;
       const notificationId = `${layer?.id}-${error?.message}`;
 

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

@@ -16,8 +16,8 @@ class EnhancedTextLayer extends TextLayer {
   }
 }
 
-// TODO fix in deck.gl
-TextLayer.defaultProps.fontSettings = {type: 'object', value: {}, optional: true, compare: 2};
+// TODO remove once https://github.com/visgl/deck.gl/pull/7757 out
+TextLayer.defaultProps.fontSettings = {type: 'object', value: {}, optional: true, compare: 1};
 
 const defaultProps = {
   ...TextLayer.defaultProps,
@@ -41,9 +41,13 @@ export class PointLabelLayer extends CompositeLayer {
 
     // Place secondary label under main label (spacing 1 / 3 main label font size)
     const yOffset = secondary ? (1 + 1 / 3) * sizeScale : 0;
-    const xPadding = sizeScale / 4; // Padding based on font size (font size / 4)
-    const yPadding = sizeScale;
-    const radiusPadding = 1 + 1 / 4; // Padding based on point radius (radius/ 4)
+
+    // Padding based on font size (font size / 4)
+    const xPadding = sizeScale / 4;
+    const yPadding = sizeScale + 1 / 4;
+
+    // Padding based on point radius (radius/ 4)
+    const radiusPadding = 1 + 1 / 4;
 
     return typeof getRadius === 'function'
       ? d => {
@@ -57,8 +61,7 @@ export class PointLabelLayer extends CompositeLayer {
   }
 
   calculateBackgroundPadding(getPixelOffset) {
-    // Alignment based only on first label
-    const {alignment, anchor, sizeScale} = this.props;
+    const {getTextAnchor: anchor, getAlignmentBaseline: alignment, sizeScale} = this.props;
 
     // Heuristics to avoid label overlap (should we base this on the text length?)
     const paddingX = 12 * sizeScale;
@@ -146,9 +149,10 @@ export class PointLabelLayer extends CompositeLayer {
       getSecondaryColor,
       getSecondaryText,
       secondaryOutlineColor,
-      secondarySizeScale
+      secondarySizeScale,
+      updateTriggers
     } = this.props;
-    const getPixelOffset = this.calculatePixelOffset();
+    const getPixelOffset = this.calculatePixelOffset(false);
     const backgroundPadding = this.calculateBackgroundPadding(getPixelOffset);
     const out = [
       this.renderTextLayer('primary', {
@@ -161,6 +165,7 @@ export class PointLabelLayer extends CompositeLayer {
         this.renderTextLayer('secondary', {
           getText: getSecondaryText,
           getPixelOffset: this.calculatePixelOffset(true),
+          updateTriggers: {getText: updateTriggers.getSecondaryText},
 
           // Optional overrides
           ...(getSecondaryColor && {getColor: getSecondaryColor}),

package/src/layers/base-layer.js

@@ -23,37 +23,6 @@ import keymirror from 'keymirror';
 import {CollisionFilterExtension, DataFilterExtension} from '@deck.gl/extensions';
 import {COORDINATE_SYSTEM, Layer as DeckLayer} from '@deck.gl/core';
 import {PointLabelLayer} from '../deckgl-layers/point-label-layer/point-label-layer';
-
-// 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';
 
@@ -1348,20 +1317,24 @@ class Layer {
   ) {
     const {data, mapState} = renderOpts;
     const {textLabel, visibilityByZoom} = this.config;
-    // const extensions = [...sharedProps.extensions];
     const extensions = [...sharedProps.extensions, collisionFilterExtension];
 
     if (!data || !data.textLabels || !data.textLabels[0] || !data.textLabels[0].getText) {
-      return null;
+      return [];
     }
 
-    // TODO other labels
-    const i = 0;
-
     const [mainLabel, secondaryLabel] = textLabel;
-    const {alignment, anchor, color: getColor, outlineColor, size: sizeScale} = mainLabel;
+    const {
+      alignment,
+      anchor,
+      color: getColor,
+      field: mainField,
+      outlineColor,
+      size: sizeScale
+    } = mainLabel;
     const {
       color: getSecondaryColor,
+      field: secondaryField,
       outlineColor: secondaryOutlineColor,
       size: secondarySizeScale
     } = secondaryLabel || {};
@@ -1369,12 +1342,15 @@ class Layer {
     return [
       new PointLabelLayer({
         ...sharedProps,
-        id: `${this.id}-label`,
+
+        // 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,
-        characterSet: 'auto',
-
         extensions,
+
+        characterSet: 'auto',
         collisionEnabled: true,
         collisionGroup: `${this.id}-labels`,
 
@@ -1383,7 +1359,7 @@ class Layer {
         sizeScale,
         outlineColor,
 
-        ...(secondaryLabel && {
+        ...(secondaryField && {
           getSecondaryText: data.textLabels[1].getText,
           getSecondaryColor,
           secondarySizeScale,
@@ -1410,7 +1386,8 @@ class Layer {
         getFilterValue: data.getFilterValue,
         updateTriggers: {
           ...updateTriggers,
-          getText: textLabel[i].field?.name,
+          getText: mainField?.name,
+          getColor: mainField?.color,
           getPixelOffset: {
             ...updateTriggers.getPixelOffset,
             ...updateTriggers.getRadius,
@@ -1419,7 +1396,7 @@ class Layer {
           },
           getTextAnchor: mainLabel.anchor,
           getAlignmentBaseline: mainLabel.alignment,
-          getColor: textLabel[i].color
+          getSecondaryText: secondaryField?.name
         }
       })
     ];