in src/components/side-panel/layer-manager.js [195:271]
render() {
const {layers, datasets, layerOrder, openModal, intl} = this.props;
const defaultDataset = Object.keys(datasets)[0];
const layerTypeOptions = this.layerTypeOptionsSelector(this.props);
const layerActions = {
layerColorUIChange: this.props.layerColorUIChange,
layerConfigChange: this.props.layerConfigChange,
layerVisualChannelConfigChange: this.props.layerVisualChannelConfigChange,
layerTypeChange: this.props.layerTypeChange,
layerVisConfigChange: this.props.layerVisConfigChange,
layerTextLabelChange: this.props.layerTextLabelChange,
removeLayer: this.props.removeLayer
};
const panelProps = {
datasets,
openModal,
layerTypeOptions
};
return (
<div className="layer-manager">
<SourceDataCatalog
datasets={datasets}
showDatasetTable={this.props.showDatasetTable}
removeDataset={this.props.removeDataset}
showDeleteDataset
/>
<AddDataButton onClick={this.props.showAddDataModal} isInactive={!defaultDataset} />
<SidePanelDivider />
<SidePanelSection>
<SortableContainer
onSortEnd={this._handleSort}
onSortStart={this._onSortStart}
updateBeforeSortStart={this._updateBeforeSortStart}
lockAxis="y"
helperClass="sorting-layers"
useDragHandle
>
{layerOrder.map(
(layerIdx, index) =>
!layers[layerIdx].config.hidden && (
<SortableItem
key={`layer-${layerIdx}`}
index={index}
isSorting={this.state.isSorting}
>
<LayerPanel
{...panelProps}
{...layerActions}
sortData={layerIdx}
key={layers[layerIdx].id}
idx={layerIdx}
layer={layers[layerIdx]}
/>
</SortableItem>
)
)}
</SortableContainer>
</SidePanelSection>
<SidePanelSection>
{defaultDataset ? (
<Button className="add-layer-button" onClick={this._addEmptyNewLayer} width="105px">
<Add height="12px" />
<FormattedMessage id={'layerManager.addLayer'} />
</Button>
) : null}
</SidePanelSection>
<LayerBlendingSelector
layerBlending={this.props.layerBlending}
updateLayerBlending={this.props.updateLayerBlending}
intl={intl}
/>
</div>
);
}