@carto/kepler.gl 0.0.65-alpha.labels → 0.0.65-alpha.labels.10

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",
+  "version": "0.0.65-alpha.labels.10",
   "description": "kepler.gl is a webgl based application to visualize large scale location data in the browser",
   "license": "MIT",
   "main": "dist/index.js",
@@ -238,13 +238,14 @@
     "tough-cookie": "4.0.0"
   },
   "peerDependencies": {
-    "@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",
+    "@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",
     "@loaders.gl/core": "^3.1.5",
     "@loaders.gl/csv": "^3.1.5",
     "@loaders.gl/gltf": "^3.1.5",

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: 600px;
+  max-height: 650px;
 `;
 
 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: 600px;
+      max-height: 650px;
     }
     .layer-config-group__content {
       .layer-config-group__content__collapsible {

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

@@ -69,16 +69,6 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector, Col
       const currentFields = textLabel.map(tl => tl.field && tl.field.name).filter(d => d);
 
       return (
-        // Switch only works with group/property set to customMarkers???
-        /* <LayerConfigGroup
-          type="boolean"
-          disabled={undefined}
-          layer={layer}
-          group="labels"
-          property="labelsEnabled"
-          label="panel.text.label"
-          collapsible
-        >*/
         <LayerConfigGroup label={'panel.text.label'} collapsible>
           <ConfigGroupCollapsibleHeader>
             <FieldSelector

package/src/layers/base-layer.js

@@ -22,53 +22,7 @@ import {console as Console} from 'global/window';
 import keymirror from 'keymirror';
 import {CollisionFilterExtension, DataFilterExtension} from '@deck.gl/extensions';
 import {COORDINATE_SYSTEM, Layer as DeckLayer} from '@deck.gl/core';
-import {TextLayer} from '@deck.gl/layers';
-
-// TODO remove prior to release
-const SHOW_TEXT_BORDER = false;
-
-const [LEFT, TOP, RIGHT, BOTTOM] = [0, 1, 2, 3];
-class EnhancedTextLayer extends TextLayer {
-  filterSubLayer({layer, renderPass}) {
-    const background = layer.id.includes('background');
-    if (renderPass === 'collision') {
-      return background; // Only draw background layer in collision pass
-    } else {
-      return !background || (SHOW_TEXT_BORDER && this.props.getBorderWidth); // Do not draw background layer in other passes
-    }
-  }
-}
-
-// 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 {_PointLabelLayer as PointLabelLayer} from '@deck.gl/carto';
 import DefaultLayerIcon from './default-layer-icon';
 import {diffUpdateTriggers} from './layer-update';
 
@@ -1357,110 +1311,89 @@ class Layer {
     };
   }
 
-  renderTextLabelLayer({getPosition, getPixelOffset, updateTriggers, sharedProps}, renderOpts) {
+  renderTextLabelLayer(
+    {getPosition, getRadius, radiusScale, updateTriggers, sharedProps},
+    renderOpts
+  ) {
     const {data, mapState} = renderOpts;
     const {textLabel, visibilityByZoom} = this.config;
-    // const extensions = [...sharedProps.extensions];
     const extensions = [...sharedProps.extensions, collisionFilterExtension];
 
-    return data.textLabels.reduce((accu, d, i) => {
-      if (d.getText) {
-        // Alignment based only on first label
-        const mainLabel = textLabel[0];
-        const {alignment, anchor, size} = mainLabel;
-        // Heuristics to avoid label overlap (should we base this on the text length?)
-        const paddingX = 12 * size;
-        const paddingY = 3 * size;
-        const backgroundPadding = [0, 0, 0, 0];
-        if (alignment === 'top') {
-          backgroundPadding[TOP] = paddingY;
-        } else if (alignment === 'bottom') {
-          backgroundPadding[BOTTOM] = paddingY;
-        } else {
-          backgroundPadding[TOP] = 0.5 * paddingY;
-          backgroundPadding[BOTTOM] = 0.5 * paddingY;
-        }
-        if (anchor === 'start') {
-          backgroundPadding[LEFT] = paddingX;
-        } else if (anchor === 'end') {
-          backgroundPadding[RIGHT] = paddingX;
-        } else {
-          backgroundPadding[LEFT] = 0.5 * paddingX;
-          backgroundPadding[RIGHT] = 0.5 * paddingX;
-        }
+    if (!data || !data.textLabels || !data.textLabels[0] || !data.textLabels[0].getText) {
+      return [];
+    }
 
-        const pixelOffset = getPixelOffset(mainLabel);
-        if (i !== 0) {
-          // Place secondary label under main label (spacing 1 / 3 main label font size)
-          pixelOffset[1] += (1 + 1 / 3) * size;
-        }
+    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
+        }),
 
-        // TODO handle function case
-        backgroundPadding[LEFT] += pixelOffset[0];
-        backgroundPadding[RIGHT] -= pixelOffset[0];
-        backgroundPadding[TOP] += pixelOffset[1];
-        backgroundPadding[BOTTOM] -= pixelOffset[1];
-
-        const {size: sizeScale} = textLabel[i];
-
-        accu.push(
-          new EnhancedTextLayer({
-            ...sharedProps,
-            extensions,
-            collisionEnabled: true,
-            collisionGroup: 'labels',
-            id: `${this.id}-label-${textLabel[i].field?.name}`,
-            data: data.data,
-            visibilityByZoom,
-            getText: d.getText,
-            getPosition,
-            characterSet: d.characterSet,
-            getPixelOffset: pixelOffset,
-            getSize: 1,
-            sizeScale,
-            getTextAnchor: anchor,
-            getAlignmentBaseline: alignment,
-
-            background: true,
-            backgroundPadding,
-
-            // DEBUG
-            ...(SHOW_TEXT_BORDER && {
-              getBorderColor: [255, 0, 0, 80],
-              getBackgroundColor: [0, 0, 0, 0],
-              getBorderWidth: 1
-            }),
-
-            getColor: textLabel[i].color,
-            fontFamily: 'Inter, sans',
-            fontSettings: {sdf: true},
-            fontWeight: 500,
-            outlineColor: textLabel[i].outlineColor,
-            outlineWidth: 4, // 1 seems to be thinner than 1px in CSS
-            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: mainLabel.anchor,
-                alignment: mainLabel.alignment
-              },
-              getTextAnchor: mainLabel.anchor,
-              getAlignmentBaseline: mainLabel.alignment,
-              getColor: textLabel[i].color
-            }
-          })
-        );
-      }
-      return accu;
-    }, []);
+        // 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
+        }
+      })
+    ];
   }
 
   /**

package/src/layers/layer-factory.js

@@ -45,13 +45,20 @@ export {DEFAULT_COLOR_RANGE};
 export const DEFAULT_TEXT_LABEL = {
   field: null,
   color: [44, 48, 50],
-  outlineColor: [0, 0, 0],
+  outlineColor: [255, 255, 255],
   size: 12,
   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',

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

@@ -21,31 +21,25 @@
 import {notNullorUndefined} from 'utils/data-utils';
 import uniq from 'lodash.uniq';
 
-export const defaultPadding = 20;
-
 export function getTextOffsetByRadius(radiusScale, getRadius) {
   return textLabel => {
     const xMult = textLabel.anchor === 'middle' ? 0 : textLabel.anchor === 'start' ? 1 : -1;
     const yMult = textLabel.alignment === 'center' ? 0 : textLabel.alignment === 'bottom' ? 1 : -1;
 
-    const sizeOffset =
-      textLabel.alignment === 'center'
-        ? 0
-        : textLabel.alignment === 'bottom'
-        ? textLabel.size
-        : textLabel.size;
+    const sizeOffset = Math.abs(yMult * textLabel.size);
 
-    const padding = textLabel.size / 4; // Padding based on font size (font size / 4)
-    const pointPadding = 1 + 1 / 4; // Padding based on point size (point size / 4)
+    const xPadding = textLabel.size / 4; // Padding based on font size (font size / 4)
+    const yPadding = textLabel.size;
+    const radiusPadding = 1 + 1 / 4; // Padding based on point radius (radius/ 4)
 
     return typeof getRadius === 'function'
       ? d => [
-          xMult * (getRadius(d) * radiusScale * pointPadding + padding),
-          yMult * (getRadius(d) * radiusScale * pointPadding + sizeOffset)
+          xMult * (getRadius(d) * radiusScale * radiusPadding + xPadding),
+          yMult * (getRadius(d) * radiusScale * radiusPadding + yPadding)
         ]
       : [
-          xMult * (getRadius * radiusScale * pointPadding + padding),
-          yMult * (getRadius * radiusScale * pointPadding + sizeOffset)
+          xMult * (getRadius * radiusScale * radiusPadding + xPadding),
+          yMult * (getRadius * radiusScale * radiusPadding + yPadding)
         ];
   };
 }
@@ -55,40 +49,9 @@ export const textLabelAccessor = textLabel => dc => d => {
   return notNullorUndefined(val) ? String(val) : '';
 };
 
-export const formatTextLabelData = ({
-  textLabel,
-  triggerChanged,
-  oldLayerData,
-  data,
-  dataContainer
-}) => {
+export const formatTextLabelData = ({textLabel, dataContainer}) => {
   return textLabel.map((tl, i) => {
-    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
-    };
+    const getText = tl.field ? textLabelAccessor(tl)(dataContainer) : null;
+    return {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 {getTextOffsetByRadius, formatTextLabelData} from '../layer-text-label';
+import {formatTextLabelData} from '../layer-text-label';
 
 export const pointPosAccessor = ({lat, lng, altitude}) => dc => d => [
   dc.valueAt(d.index, lng.fieldIdx),
@@ -243,13 +243,7 @@ export default class PointLayer extends Layer {
     const getPosition = this.getPositionAccessor(dataContainer);
 
     // get all distinct characters in the text labels
-    const textLabels = formatTextLabelData({
-      textLabel,
-      triggerChanged,
-      oldLayerData,
-      data,
-      dataContainer
-    });
+    const textLabels = formatTextLabelData({textLabel, dataContainer});
 
     const accessors = this.getAttributeAccessors({dataContainer});
 
@@ -285,11 +279,6 @@ export default class PointLayer extends Layer {
 
     const defaultLayerProps = this.getDefaultDeckLayerProps(opts);
     const brushingProps = this.getBrushingExtensionProps(interactionConfig);
-    const getPixelOffset = getTextOffsetByRadius(
-      // TODO remove this scaling by half here and elsewhere
-      customMarkers ? radiusScale / 2 : radiusScale,
-      data.getRadius
-    );
     const extensions = [...defaultLayerProps.extensions, brushingExtension];
 
     const updateTriggers = {
@@ -302,6 +291,7 @@ export default class PointLayer extends Layer {
       getFilterValue: data.getFilterValue,
       extensions,
       filterRange: defaultLayerProps.filterRange,
+      maskId: defaultLayerProps.maskId,
       visible: defaultLayerProps.visible,
       ...brushingProps
     };
@@ -311,7 +301,9 @@ export default class PointLayer extends Layer {
       {
         getPosition: data.getPosition,
         sharedProps,
-        getPixelOffset,
+        // TODO remove this scaling by half here and elsewhere
+        radiusScale: customMarkers ? radiusScale / 2 : radiusScale,
+        getRadius: data.getRadius,
         updateTriggers
       },
       opts

package/src/localization/en.js

@@ -72,10 +72,10 @@ export default {
       secondaryLabel: 'Secondary Label',
       fontSize: 'Font size',
       fontColor: 'Font color',
-      outlineColor: 'Outline Color',
+      outlineColor: 'Outline color',
       textAnchor: 'Text anchor',
       alignment: 'Alignment',
-      addMoreLabel: 'Add More Label'
+      addMoreLabel: 'Add secondary label'
     }
   },
   sidebar: {

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} from 'layers/layer-factory';
+import {DEFAULT_TEXT_LABEL, DEFAULT_SECONDARY_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,16 +315,19 @@ 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),
-    ...addFields.map(af => ({
-      ...DEFAULT_TEXT_LABEL,
-      field: af
-    }))
-  ];
+  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;
 
   return newTextLabel;
 }
@@ -359,7 +362,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, DEFAULT_TEXT_LABEL];
+    newTextLabel = [...textLabel, idx === 0 ? DEFAULT_TEXT_LABEL : DEFAULT_SECONDARY_TEXT_LABEL];
   }
 
   if (idx === 'all' && prop === 'fields') {