kepler.gl.geoiq/dist/components/side-panel/layer-panel/layer-configurator.js

kepler.gl is a webgl based application to visualize large scale location data in the browser

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LayerColorSelector = exports.LayerColorRangeSelector = exports.HowToButton = exports.ColorRangeConfig = exports.ChannelByValueSelector = exports.BoundaryTypeSelector = exports.ArcLayerColorSelector = exports.AggregationTypeSelector = exports.AggrScaleSelector = exports.AggrColorScaleSelector = void 0;
exports["default"] = LayerConfiguratorFactory;
exports.getVisConfiguratorProps = exports.getLayerFields = exports.getLayerConfiguratorProps = exports.getLayerChannelConfigProps = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _styledComponents2 = require("../../common/styled-components");

var _itemSelector = _interopRequireDefault(require("../../common/item-selector/item-selector"));

var _visConfigByFieldSelector = _interopRequireDefault(require("./vis-config-by-field-selector"));

var _layerColumnConfig = _interopRequireDefault(require("./layer-column-config"));

var _layerTypeSelector = _interopRequireDefault(require("./layer-type-selector"));

var _dimensionScaleSelector = _interopRequireDefault(require("./dimension-scale-selector"));

var _colorSelector = _interopRequireDefault(require("./color-selector"));

var _sourceDataSelector = _interopRequireDefault(require("../common/source-data-selector"));

var _visConfigSwitch = _interopRequireDefault(require("./vis-config-switch"));

var _visConfigSlider = _interopRequireDefault(require("./vis-config-slider"));

var _layerConfigGroup = _interopRequireWildcard(require("./layer-config-group"));

var _textLabelPanel = _interopRequireDefault(require("./text-label-panel"));

var _layerFactory = require("../../../layers/layer-factory");

var _utils = require("../../../utils/utils");

var _defaultSettings = require("../../../constants/default-settings");

var _templateObject, _templateObject2, _templateObject3;

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }

function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var StyledLayerConfigurator = _styledComponents["default"].div.attrs({
  className: 'layer-panel__config'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  margin-top: 12px;\n"])));

var StyledLayerVisualConfigurator = _styledComponents["default"].div.attrs({
  className: 'layer-panel__config__visualC-config'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-top: 12px;\n"])));

var getLayerFields = exports.getLayerFields = function getLayerFields(datasets, layer) {
  return datasets[layer.config.dataId] ? datasets[layer.config.dataId].fields : [];
};

var getLayerConfiguratorProps = exports.getLayerConfiguratorProps = function getLayerConfiguratorProps(props) {
  return {
    layer: props.layer,
    fields: getLayerFields(props.datasets, props.layer),
    onChange: props.updateLayerConfig,
    setColorUI: props.updateLayerColorUI
  };
};

var getVisConfiguratorProps = exports.getVisConfiguratorProps = function getVisConfiguratorProps(props) {
  return {
    layer: props.layer,
    fields: getLayerFields(props.datasets, props.layer),
    onChange: props.updateLayerVisConfig,
    setColorUI: props.updateLayerColorUI
  };
};

var getLayerChannelConfigProps = exports.getLayerChannelConfigProps = function getLayerChannelConfigProps(props) {
  return {
    layer: props.layer,
    fields: getLayerFields(props.datasets, props.layer),
    onChange: props.updateLayerVisualChannelConfig
  };
};

LayerConfiguratorFactory.deps = [_sourceDataSelector["default"]];

function LayerConfiguratorFactory(SourceDataSelector) {
  var LayerConfigurator = /*#__PURE__*/function (_Component) {
    (0, _inherits2["default"])(LayerConfigurator, _Component);

    var _super = _createSuper(LayerConfigurator);

    function LayerConfigurator() {
      (0, _classCallCheck2["default"])(this, LayerConfigurator);
      return _super.apply(this, arguments);
    }

    (0, _createClass2["default"])(LayerConfigurator, [{
      key: "_renderPointLayerConfig",
      value: function _renderPointLayerConfig(props) {
        return this._renderScatterplotLayerConfig(props);
      }
    }, {
      key: "_renderIconLayerConfig",
      value: function _renderIconLayerConfig(props) {
        return this._renderScatterplotLayerConfig(props);
      }
    }, {
      key: "_renderScatterplotLayerConfig",
      value: function _renderScatterplotLayerConfig(_ref) {
        var layer = _ref.layer,
            visConfiguratorProps = _ref.visConfiguratorProps,
            layerChannelConfigProps = _ref.layerChannelConfigProps,
            layerConfiguratorProps = _ref.layerConfiguratorProps;
        return (/*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({}, layer.visConfigSettings.filled, visConfiguratorProps, {
            collapsible: true
          }), layer.config.colorField ? /*#__PURE__*/_react["default"].createElement(LayerColorRangeSelector, visConfiguratorProps) : /*#__PURE__*/_react["default"].createElement(LayerColorSelector, layerConfiguratorProps), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.color
          }, layerChannelConfigProps)), /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, layer.visConfigSettings.opacity, visConfiguratorProps)))), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'radius',
            collapsible: true
          }, !layer.config.sizeField ? /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, layer.visConfigSettings.radius, visConfiguratorProps, {
            label: false,
            disabled: Boolean(layer.config.sizeField)
          })) : /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, layer.visConfigSettings.radiusRange, visConfiguratorProps, {
            label: false,
            disabled: !layer.config.sizeField || layer.config.visConfig.fixedRadius
          })), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.size
          }, layerChannelConfigProps)), layer.config.sizeField ? /*#__PURE__*/_react["default"].createElement(_visConfigSwitch["default"], (0, _extends2["default"])({}, layer.visConfigSettings.fixedRadius, visConfiguratorProps)) : null)))
        );
      }
    }, {
      key: "_renderArcLayerConfig",
      value: function _renderArcLayerConfig(args) {
        return this._renderLineLayerConfig(args);
      }
    }, {
      key: "_renderLineLayerConfig",
      value: function _renderLineLayerConfig(_ref2) {
        var layer = _ref2.layer,
            visConfiguratorProps = _ref2.visConfiguratorProps,
            layerConfiguratorProps = _ref2.layerConfiguratorProps,
            layerChannelConfigProps = _ref2.layerChannelConfigProps;
        return (/*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'color',
            collapsible: true
          }, layer.config.colorField ? /*#__PURE__*/_react["default"].createElement(LayerColorRangeSelector, visConfiguratorProps) : /*#__PURE__*/_react["default"].createElement(ArcLayerColorSelector, {
            layer: layer,
            setColorUI: layerConfiguratorProps.setColorUI,
            onChangeConfig: layerConfiguratorProps.onChange,
            onChangeVisConfig: visConfiguratorProps.onChange
          }), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.color
          }, layerChannelConfigProps)), /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.opacity, visConfiguratorProps)))), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'stroke',
            collapsible: true
          }, layer.config.sizeField ? /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.strokeWidthRange, visConfiguratorProps, {
            disabled: !layer.config.sizeField,
            label: false
          })) : /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.thickness, visConfiguratorProps, {
            label: false
          })), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.size
          }, layerChannelConfigProps)))))
        );
      }
    }, {
      key: "_renderBackendPointLayerConfig",
      value: function _renderBackendPointLayerConfig(props) {
        return this._renderGeoPointLayerConfig(props);
      }
    }, {
      key: "_renderGeoPointLayerConfig",
      value: function _renderGeoPointLayerConfig(_ref3) {
        var layer = _ref3.layer,
            visConfiguratorProps = _ref3.visConfiguratorProps,
            layerConfiguratorProps = _ref3.layerConfiguratorProps,
            layerChannelConfigProps = _ref3.layerChannelConfigProps;
        var _layer$meta$featureTy = layer.meta.featureTypes,
            featureTypes = _layer$meta$featureTy === void 0 ? {} : _layer$meta$featureTy,
            visConfig = layer.config.visConfig;
        return (/*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, featureTypes.polygon || featureTypes.point ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({}, layer.visConfigSettings.filled, visConfiguratorProps, {
            label: "Fill Color",
            collapsible: true
          }), layer.config.colorField ? /*#__PURE__*/_react["default"].createElement(LayerColorRangeSelector, visConfiguratorProps) : /*#__PURE__*/_react["default"].createElement(LayerColorSelector, layerConfiguratorProps), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.color
          }, layerChannelConfigProps)), /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.opacity, visConfiguratorProps)))) : null, featureTypes.point ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'radius',
            collapsible: true
          }, !layer.config.radiusField ? /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.radius, visConfiguratorProps, {
            label: false,
            disabled: Boolean(layer.config.radiusField)
          })) : /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.radiusRange, visConfiguratorProps, {
            label: false,
            disabled: !layer.config.radiusField
          })), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.radius
          }, layerChannelConfigProps)))) : null)
        );
      }
    }, {
      key: "_renderPolygonLayerConfig",
      value: function _renderPolygonLayerConfig(_ref4) {
        var layer = _ref4.layer,
            visConfiguratorProps = _ref4.visConfiguratorProps,
            layerConfiguratorProps = _ref4.layerConfiguratorProps,
            layerChannelConfigProps = _ref4.layerChannelConfigProps;
        var _layer$meta$featureTy2 = layer.meta.featureTypes,
            featureTypes = _layer$meta$featureTy2 === void 0 ? {} : _layer$meta$featureTy2,
            visConfig = layer.config.visConfig;
        return (/*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, featureTypes.polygon || featureTypes.point ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({}, layer.visConfigSettings.filled, visConfiguratorProps, {
            label: "Fill Color",
            collapsible: true
          }), layer.config.colorField ? /*#__PURE__*/_react["default"].createElement(LayerColorRangeSelector, visConfiguratorProps) : /*#__PURE__*/_react["default"].createElement(LayerColorSelector, layerConfiguratorProps), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.color
          }, layerChannelConfigProps)), /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.opacity, visConfiguratorProps)))) : null, featureTypes.point ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'radius',
            collapsible: true
          }, !layer.config.radiusField ? /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.radius, visConfiguratorProps, {
            label: false,
            disabled: Boolean(layer.config.radiusField)
          })) : /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.radiusRange, visConfiguratorProps, {
            label: false,
            disabled: !layer.config.radiusField
          })), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.radius
          }, layerChannelConfigProps)))) : null, /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({}, visConfiguratorProps, featureTypes.polygon ? _layerFactory.LAYER_VIS_CONFIGS.stroked : {}, {
            label: "Stroke Width",
            collapsible: true
          }), layer.config.sizeField ? /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.strokeWidthRange, visConfiguratorProps, {
            label: false
          })) : /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.thickness, visConfiguratorProps, {
            label: false
          }))))
        );
      }
    }, {
      key: "_renderBackendGeojsonLayerConfig",
      value: function _renderBackendGeojsonLayerConfig(props) {
        return this._renderPolygonLayerConfig(props);
      }
    }, {
      key: "_renderGeojsonLayerConfig",
      value: function _renderGeojsonLayerConfig(_ref5) {
        var layer = _ref5.layer,
            visConfiguratorProps = _ref5.visConfiguratorProps,
            layerConfiguratorProps = _ref5.layerConfiguratorProps,
            layerChannelConfigProps = _ref5.layerChannelConfigProps;
        var _layer$meta$featureTy3 = layer.meta.featureTypes,
            featureTypes = _layer$meta$featureTy3 === void 0 ? {} : _layer$meta$featureTy3,
            visConfig = layer.config.visConfig;
        return (/*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, featureTypes.polygon || featureTypes.point ?
          /*#__PURE__*/
          // ||
          // layer.type === 'MVT'
          _react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({}, layer.visConfigSettings.filled, visConfiguratorProps, {
            label: "Fill Color",
            collapsible: true
          }), layer.config.colorField ? /*#__PURE__*/_react["default"].createElement(LayerColorRangeSelector, visConfiguratorProps) : /*#__PURE__*/_react["default"].createElement(LayerColorSelector, layerConfiguratorProps), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.color
          }, layerChannelConfigProps)), /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.opacity, visConfiguratorProps)))) : null, /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({}, visConfiguratorProps, featureTypes.polygon ? _layerFactory.LAYER_VIS_CONFIGS.stroked : {}, {
            label: "Stroke Width",
            collapsible: true
          }), layer.config.sizeField ? /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.strokeWidthRange, visConfiguratorProps, {
            label: false
          })) : /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.thickness, visConfiguratorProps, {
            label: false
          })), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.size
          }, layerChannelConfigProps)))), featureTypes.point ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'radius',
            collapsible: true
          }, !layer.config.radiusField ? /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.radius, visConfiguratorProps, {
            label: false,
            disabled: Boolean(layer.config.radiusField)
          })) : /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.radiusRange, visConfiguratorProps, {
            label: false,
            disabled: !layer.config.radiusField
          })), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.radius
          }, layerChannelConfigProps)))) : null)
        );
      }
    }, {
      key: "_renderPincodeLayerConfig",
      value: function _renderPincodeLayerConfig(props) {
        return this._renderAdminBoundaryLayerConfig(props);
      }
    }, {
      key: "_renderBoundaryLayerConfig",
      value: function _renderBoundaryLayerConfig(props) {
        return this._renderAdminBoundaryLayerConfig(props);
      }
    }, {
      key: "_renderDynamicLayerConfig",
      value: function _renderDynamicLayerConfig(props) {
        var layer = props.layer;
        var _layer$meta$featureTy4 = layer.meta.featureTypes,
            featureTypes = _layer$meta$featureTy4 === void 0 ? {} : _layer$meta$featureTy4,
            visConfig = layer.config.visConfig;

        if (featureTypes.point) {
          return this._renderGeoBoundaryPointLayerConfig(props);
        } else if (featureTypes.polygon) {
          return this._renderGeoBoundaryLayerConfig(props);
        }
      }
    }, {
      key: "_renderGeoHashLayerConfig",
      value: function _renderGeoHashLayerConfig(props) {
        return this._renderGeoBoundaryLayerConfig(props);
      }
    }, {
      key: "_renderClusterLayerConfig",
      value: function _renderClusterLayerConfig(_ref6) {
        var layer = _ref6.layer,
            visConfiguratorProps = _ref6.visConfiguratorProps,
            layerConfiguratorProps = _ref6.layerConfiguratorProps,
            layerChannelConfigProps = _ref6.layerChannelConfigProps;
        return (/*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'color',
            collapsible: true
          }, /*#__PURE__*/_react["default"].createElement(LayerColorRangeSelector, visConfiguratorProps), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(AggrScaleSelector, (0, _extends2["default"])({}, layerConfiguratorProps, {
            channel: layer.visualChannels.color
          })), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.color
          }, layerChannelConfigProps)), layer.visConfigSettings.colorAggregation.condition(layer.config) ? /*#__PURE__*/_react["default"].createElement(AggregationTypeSelector, (0, _extends2["default"])({}, layer.visConfigSettings.colorAggregation, layerChannelConfigProps, {
            channel: layer.visualChannels.color
          })) : null, /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, layer.visConfigSettings.opacity, visConfiguratorProps)))), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'radius',
            collapsible: true
          }, /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, layer.visConfigSettings.clusterRadius, visConfiguratorProps)), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, layer.visConfigSettings.radiusRange, visConfiguratorProps)))))
        );
      }
    }, {
      key: "_renderHeatmapLayerConfig",
      value: function _renderHeatmapLayerConfig(_ref7) {
        var layer = _ref7.layer,
            visConfiguratorProps = _ref7.visConfiguratorProps,
            layerConfiguratorProps = _ref7.layerConfiguratorProps,
            layerChannelConfigProps = _ref7.layerChannelConfigProps;
        return (/*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'color',
            collapsible: true
          }, /*#__PURE__*/_react["default"].createElement(LayerColorRangeSelector, visConfiguratorProps), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, layer.visConfigSettings.opacity, visConfiguratorProps)))), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'radius'
          }, /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, layer.visConfigSettings.radius, visConfiguratorProps, {
            label: false
          }))), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'weight'
          }, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.weight
          }, layerChannelConfigProps))))
        );
      }
    }, {
      key: "_renderGridLayerConfig",
      value: function _renderGridLayerConfig(props) {
        return this._renderAggregationLayerConfig(props);
      }
    }, {
      key: "_renderHexagonLayerConfig",
      value: function _renderHexagonLayerConfig(props) {
        return this._renderAggregationLayerConfig(props);
      }
    }, {
      key: "_renderAggregationLayerConfig",
      value: function _renderAggregationLayerConfig(_ref8) {
        var layer = _ref8.layer,
            visConfiguratorProps = _ref8.visConfiguratorProps,
            layerConfiguratorProps = _ref8.layerConfiguratorProps,
            layerChannelConfigProps = _ref8.layerChannelConfigProps;
        var config = layer.config;
        var enable3d = config.visConfig.enable3d;
        var elevationByDescription = 'When off, height is based on count of points';
        var colorByDescription = 'When off, color is based on count of points';
        return (/*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'color',
            collapsible: true
          }, /*#__PURE__*/_react["default"].createElement(LayerColorRangeSelector, visConfiguratorProps), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(AggrScaleSelector, (0, _extends2["default"])({}, layerConfiguratorProps, {
            channel: layer.visualChannels.color
          })), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.color
          }, layerChannelConfigProps)), layer.visConfigSettings.colorAggregation.condition(layer.config) ? /*#__PURE__*/_react["default"].createElement(AggregationTypeSelector, (0, _extends2["default"])({}, layer.visConfigSettings.colorAggregation, layerChannelConfigProps, {
            description: colorByDescription,
            channel: layer.visualChannels.color
          })) : null, layer.visConfigSettings.percentile && layer.visConfigSettings.percentile.condition(layer.config) ? /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, layer.visConfigSettings.percentile, visConfiguratorProps)) : null, /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, layer.visConfigSettings.opacity, visConfiguratorProps)))), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'radius',
            collapsible: true
          }, /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, layer.visConfigSettings.worldUnitSize, visConfiguratorProps)), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, layer.visConfigSettings.coverage, visConfiguratorProps)))), layer.visConfigSettings.enable3d ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({}, layer.visConfigSettings.enable3d, visConfiguratorProps, {
            collapsible: true
          }), /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, layer.visConfigSettings.elevationScale, visConfiguratorProps)), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(AggrScaleSelector, (0, _extends2["default"])({}, layerConfiguratorProps, {
            channel: layer.visualChannels.size
          })), /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, layer.visConfigSettings.sizeRange, visConfiguratorProps)), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({}, layerChannelConfigProps, {
            channel: layer.visualChannels.size,
            description: elevationByDescription,
            disabled: !enable3d
          })), layer.visConfigSettings.sizeAggregation.condition(layer.config) ? /*#__PURE__*/_react["default"].createElement(AggregationTypeSelector, (0, _extends2["default"])({}, layer.visConfigSettings.sizeAggregation, layerChannelConfigProps, {
            channel: layer.visualChannels.size
          })) : null, layer.visConfigSettings.elevationPercentile.condition(layer.config) ? /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, layer.visConfigSettings.elevationPercentile, visConfiguratorProps)) : null)) : null)
        );
      }
    }, {
      key: "_renderGeoDynamicLayerConfig",
      value: function _renderGeoDynamicLayerConfig(_ref9) {
        var layer = _ref9.layer,
            visConfiguratorProps = _ref9.visConfiguratorProps,
            layerConfiguratorProps = _ref9.layerConfiguratorProps,
            layerChannelConfigProps = _ref9.layerChannelConfigProps;
        var _layer$meta$featureTy5 = layer.meta.featureTypes,
            featureTypes = _layer$meta$featureTy5 === void 0 ? {} : _layer$meta$featureTy5,
            visConfig = layer.config.visConfig;
        return (/*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, featureTypes.polygon || featureTypes.point ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({}, layer.visConfigSettings.filled, visConfiguratorProps, {
            label: "Fill Color",
            collapsible: true
          }), layer.config.colorField ? /*#__PURE__*/_react["default"].createElement(LayerColorRangeSelector, visConfiguratorProps) : /*#__PURE__*/_react["default"].createElement(LayerColorSelector, layerConfiguratorProps), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.color
          }, layerChannelConfigProps)), /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.opacity, visConfiguratorProps)))) : null, /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({}, layer.visConfigSettings.stroked, visConfiguratorProps, {
            label: "Stroke Color",
            collapsible: true
          }), layer.config.strokeColorField ? /*#__PURE__*/_react["default"].createElement(LayerColorRangeSelector, (0, _extends2["default"])({}, visConfiguratorProps, {
            property: "strokeColorRange"
          })) : /*#__PURE__*/_react["default"].createElement(LayerColorSelector, (0, _extends2["default"])({}, visConfiguratorProps, {
            selectedColor: layer.config.visConfig.strokeColor,
            property: "strokeColor"
          })), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.strokeColor
          }, layerChannelConfigProps)))), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({}, visConfiguratorProps, featureTypes.polygon ? _layerFactory.LAYER_VIS_CONFIGS.stroked : {}, {
            label: "Stroke Width",
            collapsible: true
          }), layer.config.sizeField ? /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.strokeWidthRange, visConfiguratorProps, {
            label: false
          })) : /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.thickness, visConfiguratorProps, {
            label: false
          })), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.size
          }, layerChannelConfigProps)))), featureTypes.point ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'radius',
            collapsible: true
          }, !layer.config.radiusField ? /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.radius, visConfiguratorProps, {
            label: false,
            disabled: Boolean(layer.config.radiusField)
          })) : /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.radiusRange, visConfiguratorProps, {
            label: false,
            disabled: !layer.config.radiusField
          })), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.radius
          }, layerChannelConfigProps)))) : null)
        );
      }
    }, {
      key: "_renderGeoBoundaryLayerConfig",
      value: function _renderGeoBoundaryLayerConfig(_ref10) {
        var layer = _ref10.layer,
            visConfiguratorProps = _ref10.visConfiguratorProps,
            layerConfiguratorProps = _ref10.layerConfiguratorProps,
            layerChannelConfigProps = _ref10.layerChannelConfigProps;
        var _layer$meta$featureTy6 = layer.meta.featureTypes,
            featureTypes = _layer$meta$featureTy6 === void 0 ? {} : _layer$meta$featureTy6,
            visConfig = layer.config.visConfig;
        var enable3d = visConfig.enable3d;
        var elevationByDescription = 'When off, height is based on count of points';
        var colorByDescription = 'When off, color is based on count of points';
        return (/*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'color',
            collapsible: true
          }, /*#__PURE__*/_react["default"].createElement(LayerColorRangeSelector, visConfiguratorProps), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(AggrColorScaleSelector, layerConfiguratorProps), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.color
          }, layerChannelConfigProps)), layer.visConfigSettings.colorAggregation.condition(layer.config) ? /*#__PURE__*/_react["default"].createElement(AggregationTypeSelector, (0, _extends2["default"])({}, layer.visConfigSettings.colorAggregation, layerChannelConfigProps, {
            descreiption: colorByDescription,
            channel: layer.visualChannels.color
          })) : null, /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.opacity, visConfiguratorProps)))), featureTypes.polygon ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({
            label: 'fill'
          }, visConfiguratorProps, layer.visConfigSettings.filled)) : null, featureTypes.line || featureTypes.polygon ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({
            label: "stroke"
          }, visConfiguratorProps, featureTypes.polygon ? _layerFactory.LAYER_VIS_CONFIGS.stroked : {}, {
            collapsible: true
          }), /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.thickness, visConfiguratorProps, {
            label: false
          }))) : null)
        );
      }
    }, {
      key: "_renderGeoBoundaryPointLayerConfig",
      value: function _renderGeoBoundaryPointLayerConfig(_ref11) {
        var layer = _ref11.layer,
            visConfiguratorProps = _ref11.visConfiguratorProps,
            layerConfiguratorProps = _ref11.layerConfiguratorProps,
            layerChannelConfigProps = _ref11.layerChannelConfigProps;
        var _layer$meta$featureTy7 = layer.meta.featureTypes,
            featureTypes = _layer$meta$featureTy7 === void 0 ? {} : _layer$meta$featureTy7,
            visConfig = layer.config.visConfig;
        return (/*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, featureTypes.polygon || featureTypes.point ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({}, layer.visConfigSettings.filled, visConfiguratorProps, {
            label: "Fill Color",
            collapsible: true
          }), layer.config.colorField ? /*#__PURE__*/_react["default"].createElement(LayerColorRangeSelector, visConfiguratorProps) : /*#__PURE__*/_react["default"].createElement(LayerColorSelector, layerConfiguratorProps), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.color
          }, layerChannelConfigProps)), /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.opacity, visConfiguratorProps)))) : null, featureTypes.line || featureTypes.point ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({
            label: "stroke"
          }, visConfiguratorProps, featureTypes.polygon ? _layerFactory.LAYER_VIS_CONFIGS.stroked : {}, {
            collapsible: true
          }), /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.thickness, visConfiguratorProps, {
            label: false
          }))) : null)
        );
      }
    }, {
      key: "_renderAdminBoundaryLayerConfig",
      value: function _renderAdminBoundaryLayerConfig(_ref12) {
        var layer = _ref12.layer,
            visConfiguratorProps = _ref12.visConfiguratorProps,
            layerConfiguratorProps = _ref12.layerConfiguratorProps,
            layerChannelConfigProps = _ref12.layerChannelConfigProps;
        var _layer$meta$featureTy8 = layer.meta.featureTypes,
            featureTypes = _layer$meta$featureTy8 === void 0 ? {} : _layer$meta$featureTy8,
            visConfig = layer.config.visConfig;
        var enable3d = visConfig.enable3d;
        var elevationByDescription = 'When off, height is based on count of points';
        var colorByDescription = 'When off, color is based on count of points';
        return (/*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: layer.type === 'boundary' ? 'boundary' : ''
          }, /*#__PURE__*/_react["default"].createElement(BoundaryTypeSelector, (0, _extends2["default"])({}, layer.visConfigSettings.colorAggregation, layerConfiguratorProps, {
            descreiption: colorByDescription,
            channel: layer.visualChannels.color
          }))), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'color',
            collapsible: true
          }, /*#__PURE__*/_react["default"].createElement(ColorRangeConfig, visConfiguratorProps), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(AggrColorScaleSelector, layerConfiguratorProps), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.color
          }, layerChannelConfigProps)), layer.visConfigSettings.colorAggregation.condition(layer.config) ? /*#__PURE__*/_react["default"].createElement(AggregationTypeSelector, (0, _extends2["default"])({}, layer.visConfigSettings.colorAggregation, layerChannelConfigProps, {
            descreiption: colorByDescription,
            channel: layer.visualChannels.color
          })) : null, /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.opacity, visConfiguratorProps)))), featureTypes.polygon ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({
            label: 'fill'
          }, visConfiguratorProps, _layerFactory.LAYER_VIS_CONFIGS.filled)) : null, featureTypes.line || featureTypes.polygon ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({
            label: "stroke"
          }, visConfiguratorProps, featureTypes.polygon ? _layerFactory.LAYER_VIS_CONFIGS.stroked : {}, {
            collapsible: true
          }), /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.thickness, visConfiguratorProps, {
            label: false
          }))) : null, featureTypes.polygon && visConfig.filled ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], (0, _extends2["default"])({}, visConfiguratorProps, _layerFactory.LAYER_VIS_CONFIGS.enable3d, {
            collapsible: true
          }), /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.elevationScale, visConfiguratorProps, {
            label: false
          })), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({}, layerChannelConfigProps, {
            channel: layer.visualChannels.height,
            description: elevationByDescription,
            disabled: !enable3d
          })), layer.visConfigSettings.heightAggregation.condition(layer.config) ? /*#__PURE__*/_react["default"].createElement(AggregationTypeSelector, (0, _extends2["default"])({}, layer.visConfigSettings.sizeAggregation, layerChannelConfigProps, {
            channel: layer.visualChannels.height
          })) : null)) : null, featureTypes.point ? /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'radius',
            collapsible: true
          }, !layer.config.radiusField ? /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.radius, visConfiguratorProps, {
            label: false,
            disabled: Boolean(layer.config.radiusField)
          })) : /*#__PURE__*/_react["default"].createElement(_visConfigSlider["default"], (0, _extends2["default"])({}, _layerFactory.LAYER_VIS_CONFIGS.radiusRange, visConfiguratorProps, {
            label: false,
            disabled: !layer.config.radiusField
          })), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
            channel: layer.visualChannels.radius
          }, layerChannelConfigProps)))) : null)
        );
      }
    }, {
      key: "render",
      value: function render() {
        var _this = this;

        var _this$props = this.props,
            layer = _this$props.layer,
            datasets = _this$props.datasets,
            updateLayerConfig = _this$props.updateLayerConfig,
            layerTypeOptions = _this$props.layerTypeOptions,
            updateLayerType = _this$props.updateLayerType;

        var _ref13 = layer.config.dataId ? datasets[layer.config.dataId] : {},
            _ref13$fields = _ref13.fields,
            fields = _ref13$fields === void 0 ? [] : _ref13$fields,
            fieldPairs = _ref13.fieldPairs;

        var config = layer.config;
        var visConfiguratorProps = getVisConfiguratorProps(this.props);
        var layerConfiguratorProps = getLayerConfiguratorProps(this.props);
        var layerChannelConfigProps = getLayerChannelConfigProps(this.props);
        var renderTemplate = layer.type && "_render".concat((0, _utils.capitalizeFirstLetter)(layer.type), "LayerConfig");
        return (/*#__PURE__*/_react["default"].createElement(StyledLayerConfigurator, null, layer.layerInfoModal ? /*#__PURE__*/_react["default"].createElement(HowToButton, {
            onClick: function onClick() {
              return _this.props.openModal(layer.layerInfoModal);
            }
          }) : null, /*#__PURE__*/_react["default"].createElement(_layerConfigGroup["default"], {
            label: 'basic',
            collapsible: true,
            expanded: !layer.hasAllColumns()
          }, /*#__PURE__*/_react["default"].createElement(_layerTypeSelector["default"], {
            layer: layer,
            layerTypeOptions: layerTypeOptions,
            onSelect: updateLayerType
          }), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, Object.keys(datasets).length > 1 && /*#__PURE__*/_react["default"].createElement(SourceDataSelector, {
            datasets: datasets,
            id: layer.id,
            disabled: false,
            dataId: config.dataId,
            onSelect: function onSelect(value) {
              return updat