@carto/kepler.gl 0.0.64 → 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.64",
+  "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",
@@ -270,6 +271,10 @@
   "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: 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/layer-configurator.js

@@ -246,6 +246,7 @@ export default function LayerConfiguratorFactory(
           {/* text label */}
           <TextLabelPanel
             fields={visConfiguratorProps.fields}
+            layer={layer}
             updateLayerTextLabel={this.props.updateLayerTextLabel}
             textLabel={layer.config.textLabel}
             colorPalette={visConfiguratorProps.colorPalette}

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

@@ -65,8 +65,9 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector, Col
     };
 
     render() {
-      const {updateLayerTextLabel, textLabel, fields, AddButton} = this.props;
+      const {layer, 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>
@@ -80,11 +81,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.labelWithId'} values={{labelId: idx + 1}} />
+                  <FormattedMessage id={`panel.text.${idx === 0 ? 'main' : 'secondary'}Label`} />
                 </PanelLabel>
                 <SidePanelSection>
                   <FieldSelector
@@ -120,33 +121,51 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector, Col
                   />
                 </SidePanelSection>
                 <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>
+                  <PanelLabel>
+                    <FormattedMessage id="panel.text.outlineColor" />
+                  </PanelLabel>
+                  <ColorSelector
+                    colorSets={[
+                      {
+                        selectedColor: tl.outlineColor,
+                        setColor: v => updateLayerTextLabel(idx, 'outlineColor', v)
+                      }
+                    ]}
+                  />
                 </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 onClick={val => updateLayerTextLabel(textLabel.length)} />
+              <AddButton
+                disabled={textLabel.length >= 2}
+                onClick={val => updateLayerTextLabel(textLabel.length)}
+              />
             </SidePanelSection>
           </ConfigGroupCollapsibleContent>
         </LayerConfigGroup>

package/src/layers/base-layer.js

@@ -20,40 +20,9 @@
 
 import {console as Console} from 'global/window';
 import keymirror from 'keymirror';
-import {DataFilterExtension} from '@deck.gl/extensions';
+import {CollisionFilterExtension, DataFilterExtension} from '@deck.gl/extensions';
 import {COORDINATE_SYSTEM, Layer as DeckLayer} from '@deck.gl/core';
-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 {_PointLabelLayer as PointLabelLayer} from '@deck.gl/carto';
 import DefaultLayerIcon from './default-layer-icon';
 import {diffUpdateTriggers} from './layer-update';
 
@@ -103,6 +72,7 @@ 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);
@@ -1341,51 +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, collisionFilterExtension];
 
-    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;
-    }, []);
+    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
+        }
+      })
+    ];
   }
 
   /**

package/src/layers/layer-factory.js

@@ -27,6 +27,7 @@ export const PROPERTY_GROUPS = keyMirror({
   color: null,
   stroke: null,
   customMarkers: null,
+  labels: null,
   radius: null,
   height: null,
   angle: null,
@@ -43,13 +44,21 @@ export {DEFAULT_COLOR_RANGE};
 /** @type {import('./layer-factory').LayerTextLabel} */
 export const DEFAULT_TEXT_LABEL = {
   field: null,
-  color: [255, 255, 255],
-  size: 18,
+  color: [44, 48, 50],
+  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',
@@ -387,6 +396,13 @@ export const LAYER_VIS_CONFIGS = {
     group: PROPERTY_GROUPS.display,
     property: 'filled'
   },
+  labels: {
+    type: 'boolean',
+    label: 'layerVisConfigs.labels',
+    defaultValue: false,
+    group: PROPERTY_GROUPS.labels,
+    property: 'labels'
+  },
   extruded: {
     type: 'boolean',
     defaultValue: false,
@@ -430,6 +446,13 @@ export const LAYER_VIS_CONFIGS = {
     group: PROPERTY_GROUPS.customMarkers,
     property: 'customMarkers'
   },
+  labelsEnabled: {
+    type: 'boolean',
+    defaultValue: true,
+    label: 'layerVisConfigs.labelsEnabled',
+    group: PROPERTY_GROUPS.labels,
+    property: 'labelsEnabled'
+  },
   customMarkersUrl: {
     type: 'text',
     defaultValue: '',
@@ -450,8 +473,8 @@ export const LAYER_VIS_CONFIGS = {
 export const LAYER_TEXT_CONFIGS = {
   fontSize: {
     type: 'number',
-    range: [1, 100],
-    value0: 1,
+    range: [6, 32],
+    value0: 6,
     step: 1,
     isRanged: false,
     label: 'Font size',

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

@@ -21,30 +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 = defaultPadding;
+    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 + padding),
-          yMult * (getRadius(d) * radiusScale + padding + sizeOffset)
+          xMult * (getRadius(d) * radiusScale * radiusPadding + xPadding),
+          yMult * (getRadius(d) * radiusScale * radiusPadding + yPadding)
         ]
       : [
-          xMult * (getRadius * radiusScale + padding),
-          yMult * (getRadius * radiusScale + padding + sizeOffset)
+          xMult * (getRadius * radiusScale * radiusPadding + xPadding),
+          yMult * (getRadius * radiusScale * radiusPadding + yPadding)
         ];
   };
 }
@@ -54,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),
@@ -47,6 +47,7 @@ export const pointVisConfigs = {
   customMarkers: 'customMarkers',
   customMarkersUrl: 'customMarkersUrl',
   customMarkersRange: 'customMarkersRange',
+  labelsEnabled: 'labelsEnabled',
   opacity: 'opacity',
   outline: 'outline',
   thickness: 'thickness',
@@ -242,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});
 
@@ -278,12 +273,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 = {
@@ -296,6 +291,7 @@ export default class PointLayer extends Layer {
       getFilterValue: data.getFilterValue,
       extensions,
       filterRange: defaultLayerProps.filterRange,
+      maskId: defaultLayerProps.maskId,
       visible: defaultLayerProps.visible,
       ...brushingProps
     };
@@ -305,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
@@ -319,7 +317,6 @@ 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,12 +68,14 @@ export default {
   panel: {
     text: {
       label: 'label',
-      labelWithId: 'Label {labelId}',
+      mainLabel: 'Main Label',
+      secondaryLabel: 'Secondary Label',
       fontSize: 'Font size',
       fontColor: 'Font color',
+      outlineColor: 'Outline color',
       textAnchor: 'Text anchor',
       alignment: 'Alignment',
-      addMoreLabel: 'Add More Label'
+      addMoreLabel: 'Add secondary label'
     }
   },
   sidebar: {
@@ -157,6 +159,7 @@ 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',

package/src/processors/data-processor.js

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