kepler.gl
Version:
kepler.gl is a webgl based application to visualize large scale location data in the browser
615 lines (610 loc) • 164 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AggregationTypeSelector = void 0;
exports["default"] = LayerConfiguratorFactory;
exports.getVisConfiguratorProps = exports.getLayerFields = exports.getLayerDataset = 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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _localization = require("@kepler.gl/localization");
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _itemSelector = _interopRequireDefault(require("../../common/item-selector/item-selector"));
var _styledComponents2 = require("../../common/styled-components");
var _sourceDataSelector = _interopRequireDefault(require("../common/source-data-selector"));
var _aggrScaleSelector = _interopRequireDefault(require("./aggr-scale-selector"));
var _channelByValueSelector = _interopRequireDefault(require("./channel-by-value-selector"));
var _howToButton = _interopRequireDefault(require("./how-to-button"));
var _layerColorSelector = require("./layer-color-selector");
var _layerColumnModeConfig = _interopRequireDefault(require("./layer-column-mode-config"));
var _layerConfigGroup = _interopRequireWildcard(require("./layer-config-group"));
var _layerErrorMessage = _interopRequireDefault(require("./layer-error-message"));
var _layerTypeSelector = _interopRequireDefault(require("./layer-type-selector"));
var _textLabelPanel = _interopRequireDefault(require("./text-label-panel"));
var _visConfigSlider = _interopRequireDefault(require("./vis-config-slider"));
var _visConfigSwitch = _interopRequireDefault(require("./vis-config-switch"));
var _vectorTileLayerConfigurator = _interopRequireDefault(require("./vector-tile-layer-configurator"));
var _constants = require("@kepler.gl/constants");
var _table = require("@kepler.gl/table");
var _utils = require("@kepler.gl/utils");
var _templateObject, _templateObject2; // SPDX-License-Identifier: MIT
// Copyright contributors to the kepler.gl project
/* eslint-disable complexity */
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var StyledLayerConfigurator = _styledComponents["default"].div.attrs({
className: 'layer-panel__config'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n margin-top: ", ";\n padding: ", ";\n border-left: ", " dashed\n ", ";\n"])), function (props) {
return props.theme.layerConfiguratorMargin;
}, function (props) {
return props.theme.layerConfiguratorPadding;
}, function (props) {
return props.theme.layerConfiguratorBorder;
}, function (props) {
return props.theme.layerConfiguratorBorderColor;
});
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) {
var _layer$config;
return datasets[((_layer$config = layer.config) === null || _layer$config === void 0 ? void 0 : _layer$config.dataId) || ''] ? datasets[layer.config.dataId].fields : [];
};
/** Return any to be able to customize the Dataset entity */
var getLayerDataset = exports.getLayerDataset = function getLayerDataset(datasets, layer) {
var _layer$config2;
return datasets[((_layer$config2 = layer.config) === null || _layer$config2 === void 0 ? void 0 : _layer$config2.dataId) || ''];
};
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,
dataset: getLayerDataset(props.datasets, props.layer),
fields: getLayerFields(props.datasets, props.layer),
onChange: props.updateLayerVisualChannelConfig,
setColorUI: props.updateLayerColorUI
};
};
LayerConfiguratorFactory.deps = [_sourceDataSelector["default"], _visConfigSlider["default"], _textLabelPanel["default"], _layerConfigGroup["default"], _channelByValueSelector["default"], _layerColumnModeConfig["default"], _layerTypeSelector["default"], _visConfigSwitch["default"], _layerColorSelector.LayerColorSelectorFactory, _layerColorSelector.LayerColorRangeSelectorFactory, _layerColorSelector.ArcLayerColorSelectorFactory, _aggrScaleSelector["default"], _vectorTileLayerConfigurator["default"]];
function LayerConfiguratorFactory(SourceDataSelector, VisConfigSlider, TextLabelPanel, LayerConfigGroup, ChannelByValueSelector, LayerColumnModeConfig, LayerTypeSelector, VisConfigSwitch, LayerColorSelector, LayerColorRangeSelector, ArcLayerColorSelector, AggrScaleSelector, VectorTileLayerConfigurator) {
var LayerConfigurator = /*#__PURE__*/function (_Component) {
function LayerConfigurator() {
var _this;
(0, _classCallCheck2["default"])(this, LayerConfigurator);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, LayerConfigurator, [].concat(args));
(0, _defineProperty2["default"])(_this, "handleSelectColumnMode", function (key) {
var updateLayerConfig = _this.props.updateLayerConfig;
updateLayerConfig({
columnMode: key
});
});
return _this;
}
(0, _inherits2["default"])(LayerConfigurator, _Component);
return (0, _createClass2["default"])(LayerConfigurator, [{
key: "_renderPointLayerConfig",
value: function _renderPointLayerConfig(props) {
return this._renderScatterplotLayerConfig(props, true);
}
}, {
key: "_renderIconLayerConfig",
value: function _renderIconLayerConfig(props) {
return this._renderScatterplotLayerConfig(props, false);
}
}, {
key: "_renderVectorTileLayerConfig",
value: function _renderVectorTileLayerConfig(props) {
return /*#__PURE__*/_react["default"].createElement(VectorTileLayerConfigurator, props);
}
}, {
key: "_renderScatterplotLayerConfig",
value: function _renderScatterplotLayerConfig(_ref, showInteractionControls) {
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, (0, _extends2["default"])({}, layer.visConfigSettings.filled || {
label: 'layer.color'
}, visConfiguratorProps, {
collapsible: true
}), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.color
}, layerChannelConfigProps)), 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(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.opacity, visConfiguratorProps)))), layer.type === _constants.LAYER_TYPES.point ? /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, (0, _extends2["default"])({}, layer.visConfigSettings.outline, visConfiguratorProps, {
collapsible: true
}), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.strokeColor
}, layerChannelConfigProps)), 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(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.thickness, visConfiguratorProps, {
disabled: !layer.config.visConfig.outline
})))) : null, /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.radius',
collapsible: true
}, !layer.config.sizeField ? /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.radius, visConfiguratorProps, {
label: false,
disabled: Boolean(layer.config.sizeField)
})) : /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (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, (0, _extends2["default"])({}, layer.visConfigSettings.fixedRadius, visConfiguratorProps)) : null, /*#__PURE__*/_react["default"].createElement(VisConfigSwitch, (0, _extends2["default"])({}, layer.visConfigSettings.billboard, visConfiguratorProps)))), /*#__PURE__*/_react["default"].createElement(TextLabelPanel, {
id: layer.id,
fields: visConfiguratorProps.fields,
updateLayerTextLabel: this.props.updateLayerTextLabel,
textLabel: layer.config.textLabel
}), showInteractionControls ? /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.interaction',
collapsible: true
}, /*#__PURE__*/_react["default"].createElement(VisConfigSwitch, (0, _extends2["default"])({}, layer.visConfigSettings.allowHover, visConfiguratorProps)), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(VisConfigSwitch, (0, _extends2["default"])({}, layer.visConfigSettings.showNeighborOnHover, visConfiguratorProps)), /*#__PURE__*/_react["default"].createElement(VisConfigSwitch, (0, _extends2["default"])({}, layer.visConfigSettings.showHighlightColor, visConfiguratorProps)))) : null);
}
}, {
key: "_renderClusterLayerConfig",
value: function _renderClusterLayerConfig(_ref2) {
var layer = _ref2.layer,
visConfiguratorProps = _ref2.visConfiguratorProps,
layerChannelConfigProps = _ref2.layerChannelConfigProps;
return /*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.color',
collapsible: true
}, /*#__PURE__*/_react["default"].createElement(LayerColorRangeSelector, visConfiguratorProps), /*#__PURE__*/_react["default"].createElement(AggrScaleSelector, (0, _extends2["default"])({}, layerChannelConfigProps, {
channel: layer.visualChannels.color
})), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.color
}, layerChannelConfigProps)), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, 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, (0, _extends2["default"])({}, layer.visConfigSettings.opacity, visConfiguratorProps)))), /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.radius',
collapsible: true
}, /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.clusterRadius, visConfiguratorProps)), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.radiusRange, visConfiguratorProps)))));
}
}, {
key: "_renderHeatmapLayerConfig",
value: function _renderHeatmapLayerConfig(_ref3) {
var layer = _ref3.layer,
visConfiguratorProps = _ref3.visConfiguratorProps,
layerChannelConfigProps = _ref3.layerChannelConfigProps;
return /*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.color',
collapsible: true
}, /*#__PURE__*/_react["default"].createElement(LayerColorRangeSelector, visConfiguratorProps), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.opacity, visConfiguratorProps)))), /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.radius'
}, /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.radius, visConfiguratorProps, {
label: false
}))), /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.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(_ref4) {
var layer = _ref4.layer,
visConfiguratorProps = _ref4.visConfiguratorProps,
layerChannelConfigProps = _ref4.layerChannelConfigProps;
var config = layer.config;
var _config$visConfig = config.visConfig,
enable3d = _config$visConfig.enable3d,
fixedHeight = _config$visConfig.fixedHeight;
var elevationByDescription = 'layer.elevationByDescription';
var colorByDescription = 'layer.colorByDescription';
return /*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.color',
collapsible: true
}, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.color
}, layerChannelConfigProps)), /*#__PURE__*/_react["default"].createElement(AggrScaleSelector, (0, _extends2["default"])({}, layerChannelConfigProps, {
channel: layer.visualChannels.color
})), /*#__PURE__*/_react["default"].createElement(LayerColorRangeSelector, visConfiguratorProps), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, 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, (0, _extends2["default"])({}, layer.visConfigSettings.percentile, visConfiguratorProps)) : null, /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.opacity, visConfiguratorProps)))), /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.radius',
collapsible: true
}, /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.worldUnitSize, visConfiguratorProps)), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.coverage, visConfiguratorProps)))), layer.visConfigSettings.enable3d ? /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, (0, _extends2["default"])({}, layer.visConfigSettings.enable3d, visConfiguratorProps, {
collapsible: true
}), /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.elevationScale, visConfiguratorProps, {
label: 'layerVisConfigs.heightMultiplier'
})), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__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, /*#__PURE__*/_react["default"].createElement(AggrScaleSelector, (0, _extends2["default"])({}, layerChannelConfigProps, {
channel: layer.visualChannels.size,
label: 'Height Scale'
})), /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.sizeRange, visConfiguratorProps, {
label: 'layerVisConfigs.heightRange',
disabled: fixedHeight
})), /*#__PURE__*/_react["default"].createElement(VisConfigSwitch, (0, _extends2["default"])({}, layer.visConfigSettings.fixedHeight, visConfiguratorProps)), layer.visConfigSettings.elevationPercentile.condition(layer.config) ? /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.elevationPercentile, visConfiguratorProps)) : null)) : null);
}
// TODO: Shan move these into layer class
}, {
key: "_renderHexagonIdLayerConfig",
value: function _renderHexagonIdLayerConfig(_ref5) {
var layer = _ref5.layer,
visConfiguratorProps = _ref5.visConfiguratorProps,
layerConfiguratorProps = _ref5.layerConfiguratorProps,
layerChannelConfigProps = _ref5.layerChannelConfigProps;
return /*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, (0, _extends2["default"])({}, layer.visConfigSettings.filled, visConfiguratorProps, {
label: 'layer.fillColor',
collapsible: true
}), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.color
}, layerChannelConfigProps)), 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(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.opacity, visConfiguratorProps, {
disabled: !layer.config.visConfig.filled
})))), /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, (0, _extends2["default"])({}, layer.visConfigSettings.outline, visConfiguratorProps, {
collapsible: true
}), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.strokeColor
}, layerChannelConfigProps)), 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(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.strokeOpacity, visConfiguratorProps, {
disabled: !layer.config.visConfig.outline
})), /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.thickness, visConfiguratorProps, {
disabled: !layer.config.visConfig.outline
})))), /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.coverage',
collapsible: true
}, !layer.config.coverageField ? /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.coverage, visConfiguratorProps, {
label: false
})) : /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.coverageRange, visConfiguratorProps, {
label: false
})), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.coverage
}, layerChannelConfigProps)))), /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, (0, _extends2["default"])({}, layer.visConfigSettings.enable3d, visConfiguratorProps, {
collapsible: true
}), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.size
}, layerChannelConfigProps)), /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.elevationScale, visConfiguratorProps, {
label: 'layerVisConfigs.heightMultiplier'
})), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.sizeRange, visConfiguratorProps, {
label: "layerVisConfigs.heightRange"
})), /*#__PURE__*/_react["default"].createElement(VisConfigSwitch, (0, _extends2["default"])({}, layer.visConfigSettings.fixedHeight, visConfiguratorProps)))), /*#__PURE__*/_react["default"].createElement(TextLabelPanel, {
id: layer.id,
fields: visConfiguratorProps.fields,
updateLayerTextLabel: this.props.updateLayerTextLabel,
textLabel: layer.config.textLabel
}));
}
}, {
key: "_renderArcLayerConfig",
value: function _renderArcLayerConfig(args) {
return this._renderLineLayerConfig(args);
}
}, {
key: "_renderLineLayerConfig",
value: function _renderLineLayerConfig(_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, {
label: 'layer.color',
collapsible: true
}, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.sourceColor
}, layerChannelConfigProps)), 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(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.opacity, visConfiguratorProps)))), /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.stroke',
collapsible: true
}, layer.config.sizeField ? /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.sizeRange, visConfiguratorProps, {
disabled: !layer.config.sizeField,
label: false
})) : /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.thickness, visConfiguratorProps, {
label: false
})), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.size
}, layerChannelConfigProps)))), layer.visConfigSettings.elevationScale ? /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: "layerVisConfigs.elevationScale",
collapsible: true
}, /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.elevationScale, visConfiguratorProps))) : null);
}
}, {
key: "_renderTripLayerConfig",
value: function _renderTripLayerConfig(_ref7) {
var layer = _ref7.layer,
visConfiguratorProps = _ref7.visConfiguratorProps,
layerConfiguratorProps = _ref7.layerConfiguratorProps,
layerChannelConfigProps = _ref7.layerChannelConfigProps;
var _layer$meta$featureTy = layer.meta.featureTypes,
featureTypes = _layer$meta$featureTy === void 0 ? {} : _layer$meta$featureTy;
return /*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.color',
collapsible: true
}, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.color
}, layerChannelConfigProps)), 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(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.opacity, visConfiguratorProps)))), /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, (0, _extends2["default"])({}, visConfiguratorProps, {
label: "layer.strokeWidth",
collapsible: true
}), layer.config.sizeField ? /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.sizeRange, visConfiguratorProps, {
label: false
})) : /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.thickness, visConfiguratorProps, {
label: false
})), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(VisConfigSwitch, (0, _extends2["default"])({}, layer.visConfigSettings.billboard, visConfiguratorProps)), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.size
}, layerChannelConfigProps)))), /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, (0, _extends2["default"])({}, visConfiguratorProps, featureTypes.polygon ? layer.visConfigSettings.stroked : {}, {
label: "layer.trailLength",
description: "layer.trailLengthDescription",
collapsible: true
}), /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.trailLength, visConfiguratorProps, {
label: false
})), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(VisConfigSwitch, (0, _extends2["default"])({}, layer.visConfigSettings.fadeTrail, visConfiguratorProps)))));
}
}, {
key: "_renderGeojsonLayerConfig",
value: function _renderGeojsonLayerConfig(_ref8) {
var layer = _ref8.layer,
visConfiguratorProps = _ref8.visConfiguratorProps,
layerConfiguratorProps = _ref8.layerConfiguratorProps,
layerChannelConfigProps = _ref8.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, (0, _extends2["default"])({}, layer.visConfigSettings.filled, visConfiguratorProps, {
label: "layer.fillColor",
collapsible: true
}), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.color
}, layerChannelConfigProps)), 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(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.opacity, visConfiguratorProps)))) : null, /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, (0, _extends2["default"])({}, layer.visConfigSettings.stroked, visConfiguratorProps, {
label: "layer.strokeColor",
collapsible: true
}), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.strokeColor
}, layerChannelConfigProps)), 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(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.strokeOpacity, visConfiguratorProps)))), /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, (0, _extends2["default"])({}, visConfiguratorProps, featureTypes.polygon ? layer.visConfigSettings.stroked : {}, {
label: "layer.strokeWidth",
collapsible: true
}), layer.config.sizeField ? /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.sizeRange, visConfiguratorProps, {
label: false
})) : /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.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.polygon ? /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, (0, _extends2["default"])({}, visConfiguratorProps, layer.visConfigSettings.enable3d, {
disabled: !visConfig.filled,
collapsible: true
}), /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.elevationScale, visConfiguratorProps, {
label: false
})), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.height
}, layerChannelConfigProps)), /*#__PURE__*/_react["default"].createElement(VisConfigSwitch, (0, _extends2["default"])({}, layer.visConfigSettings.fixedHeight, visConfiguratorProps)), /*#__PURE__*/_react["default"].createElement(VisConfigSwitch, (0, _extends2["default"])({}, visConfiguratorProps, layer.visConfigSettings.wireframe)))) : null, featureTypes.point ? /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.radius',
collapsible: true
}, !layer.config.radiusField ? /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.radius, visConfiguratorProps, {
label: false,
disabled: Boolean(layer.config.radiusField)
})) : /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.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: "_render3DLayerConfig",
value: function _render3DLayerConfig(_ref9) {
var layer = _ref9.layer,
visConfiguratorProps = _ref9.visConfiguratorProps;
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.3DModel',
collapsible: true
}, /*#__PURE__*/_react["default"].createElement(_styledComponents2.Input, {
type: "file",
accept: ".glb,.gltf",
onChange: function onChange(e) {
if (e.target.files && e.target.files[0]) {
var url = URL.createObjectURL(e.target.files[0]);
visConfiguratorProps.onChange({
scenegraph: url
});
}
}
})), /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.3DModelOptions',
collapsible: true
}, /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.sizeScale, visConfiguratorProps, {
disabled: false
})), /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.angleX, visConfiguratorProps, {
disabled: false
})), /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.angleY, visConfiguratorProps, {
disabled: false
})), /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.angleZ, visConfiguratorProps, {
disabled: false
}))));
}
}, {
key: "_renderS2LayerConfig",
value: function _renderS2LayerConfig(_ref10) {
var layer = _ref10.layer,
visConfiguratorProps = _ref10.visConfiguratorProps,
layerConfiguratorProps = _ref10.layerConfiguratorProps,
layerChannelConfigProps = _ref10.layerChannelConfigProps;
var visConfig = layer.config.visConfig;
return /*#__PURE__*/_react["default"].createElement(StyledLayerVisualConfigurator, null, /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, (0, _extends2["default"])({}, layer.visConfigSettings.filled, visConfiguratorProps, {
label: "layer.fillColor",
collapsible: true
}), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.color
}, layerChannelConfigProps)), 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(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.opacity, visConfiguratorProps)))), /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, (0, _extends2["default"])({}, layer.visConfigSettings.stroked, visConfiguratorProps, {
label: "layer.strokeColor",
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(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.strokeColor
}, layerChannelConfigProps))), /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, (0, _extends2["default"])({}, visConfiguratorProps, {
label: "layer.strokeWidth",
collapsible: true
}), layer.config.sizeField ? /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.sizeRange, visConfiguratorProps, {
label: false
})) : /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.thickness, visConfiguratorProps, {
label: false
})), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.size
}, layerChannelConfigProps)))), /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, (0, _extends2["default"])({}, visConfiguratorProps, layer.visConfigSettings.enable3d, {
disabled: !visConfig.filled,
collapsible: true
}), /*#__PURE__*/_react["default"].createElement(ChannelByValueSelector, (0, _extends2["default"])({
channel: layer.visualChannels.height
}, layerChannelConfigProps)), /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.elevationScale, visConfiguratorProps, {
label: 'layerVisConfigs.heightMultiplier'
})), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(VisConfigSlider, (0, _extends2["default"])({}, layer.visConfigSettings.heightRange, visConfiguratorProps, {
label: "layerVisConfigs.heightRange"
})), /*#__PURE__*/_react["default"].createElement(VisConfigSwitch, (0, _extends2["default"])({}, layer.visConfigSettings.fixedHeight, visConfiguratorProps)), /*#__PURE__*/_react["default"].createElement(VisConfigSwitch, (0, _extends2["default"])({}, visConfiguratorProps, layer.visConfigSettings.wireframe)))));
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
layer = _this$props.layer,
datasets = _this$props.datasets,
openModal = _this$props.openModal,
updateLayerConfig = _this$props.updateLayerConfig,
layerTypeOptions = _this$props.layerTypeOptions,
updateLayerType = _this$props.updateLayerType,
_this$props$disableTy = _this$props.disableTypeSelect,
disableTypeSelect = _this$props$disableTy === void 0 ? false : _this$props$disableTy;
var _ref11 = layer.config.dataId ? datasets[layer.config.dataId] : {},
_ref11$fields = _ref11.fields,
fields = _ref11$fields === void 0 ? [] : _ref11$fields,
_ref11$fieldPairs = _ref11.fieldPairs,
fieldPairs = _ref11$fieldPairs === void 0 ? undefined : _ref11$fieldPairs;
var config = layer.config;
var visConfiguratorProps = getVisConfiguratorProps(this.props);
var layerConfiguratorProps = getLayerConfiguratorProps(this.props);
var layerChannelConfigProps = getLayerChannelConfigProps(this.props);
var dataset = getLayerDataset(datasets, layer);
var renderTemplate = layer.type && "_render".concat((0, _utils.capitalizeFirstLetter)(layer.type), "LayerConfig");
// show only datasets that can be used by the layer
var sourceDataSelectorOptions = Object.keys(datasets).reduce(function (acc, id) {
return (0, _table.matchDatasetType)(datasets[id], layer) ? _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2["default"])({}, id, datasets[id])) : acc;
}, {});
return /*#__PURE__*/_react["default"].createElement(StyledLayerConfigurator, null, layer.layerInfoModal && !layer.supportedColumnModes ?
/*#__PURE__*/
// TODO figure out handler type. String or return type of layer.layerInfoModal ?
_react["default"].createElement(_howToButton["default"], {
onClick: function onClick() {
return openModal(layer.layerInfoModal);
}
}) : null, /*#__PURE__*/_react["default"].createElement(LayerConfigGroup, {
label: 'layer.basic',
collapsible: true,
expanded: !layer.hasAllColumns()
}, /*#__PURE__*/_react["default"].createElement(LayerTypeSelector, {
selected: layer.type,
disabled: disableTypeSelect,
options: layerTypeOptions
// @ts-ignore
,
onSelect: updateLayerType
}), /*#__PURE__*/_react["default"].createElement(_layerConfigGroup.ConfigGroupCollapsibleContent, null, /*#__PURE__*/_react["default"].createElement(SourceDataSelector, {
datasets: sourceDataSelectorOptions,
id: layer.id,
dataId: config.dataId
// @ts-ignore
,
onSelect: function onSelect(value) {
return updateLayerConfig({
dataId: value
});
}
}), /*#__PURE__*/_react["default"].createElement(LayerColumnModeConfig, {
layer: layer,
supportedColumnModes: layer.supportedColumnModes,
id: layer.id,
layerConfig: layer.config
// TODO figure out handler type. String or return type of layer.layerInfoModal ?
,
openModal: openModal,
updateLayerConfig: updateLayerConfig,
updateLayerType: updateLayerType,
fields: fields,
fieldPairs: fieldPairs
})), layer.errorMessage ? /*#__PURE__*/_react["default"].createElement(_layerErrorMessage["default"], {
errorMessage: layer.errorMessage
}) : null), renderTemplate && this[renderTemplate] && this[renderTemplate]({
layer: layer,
dataset: dataset,
visConfiguratorProps: visConfiguratorProps,
layerChannelConfigProps: layerChannelConfigProps,
layerConfiguratorProps: layerConfiguratorProps
}));
}
}]);
}(_react.Component);
return LayerConfigurator;
}
var AggregationTypeSelector = exports.AggregationTypeSelector = function AggregationTypeSelector(_ref12) {
var channel = _ref12.channel,
layer = _ref12.layer,
_onChange = _ref12.onChange;
var field = channel.field,
aggregation = channel.aggregation,
key = channel.key;
var selectedField = layer.config[field];
var visConfig = layer.config.visConfig;
// aggregation should only be selectable when field is selected
var layerAggregationTypes = layer.getAggregationOptions(key);
var aggregationOptions = _constants.AGGREGATION_TYPE_OPTIONS.filter(function (_ref13) {
var id = _ref1