@carto/kepler.gl 0.0.1-alpha.map-libre

package/src/components/plot-container.js

@@ -0,0 +1,228 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+// libraries
+import React, {Component, createRef} from 'react';
+import PropTypes from 'prop-types';
+import {createSelector} from 'reselect';
+import styled from 'styled-components';
+import {StaticMap} from 'react-map-gl';
+import debounce from 'lodash.debounce';
+import {exportImageError} from 'utils/notifications-utils';
+import MapContainerFactory from './map-container';
+import MapsLayoutFactory from './maps-layout';
+import {convertToPng, getScaleFromImageSize} from 'utils/export-utils';
+import {scaleMapStyleByResolution} from 'utils/map-style-utils/mapbox-gl-style-editor';
+
+import {findMapBounds} from 'utils/data-utils';
+import {getCenterAndZoomFromBounds} from 'utils/projection-utils';
+import {GEOCODER_LAYER_ID} from 'constants/default-settings';
+
+const CLASS_FILTER = ['mapboxgl-control-container', 'attrition-link', 'attrition-logo'];
+const DOM_FILTER_FUNC = node => !CLASS_FILTER.includes(node.className);
+const OUT_OF_SCREEN_POSITION = -9999;
+
+const propTypes = {
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  exportImageSetting: PropTypes.object.isRequired,
+  addNotification: PropTypes.func.isRequired,
+  mapFields: PropTypes.object.isRequired,
+  setExportImageSetting: PropTypes.object.isRequired,
+  setExportImageDataUri: PropTypes.func.isRequired,
+  setExportImageError: PropTypes.func.isRequired,
+  splitMaps: PropTypes.arrayOf(PropTypes.object)
+};
+
+PlotContainerFactory.deps = [MapContainerFactory, MapsLayoutFactory];
+
+// Remove mapbox logo in exported map, because it contains non-ascii characters
+const StyledPlotContainer = styled.div`
+  position: absolute;
+  top: ${OUT_OF_SCREEN_POSITION}px;
+  left: ${OUT_OF_SCREEN_POSITION}px;
+`;
+
+const StyledMapContainer = styled.div`
+  width: ${props => props.width}px;
+  height: ${props => props.height}px;
+  display: flex;
+`;
+
+const deckGlProps = {
+  glOptions: {
+    preserveDrawingBuffer: true,
+    useDevicePixels: false
+  }
+};
+
+export default function PlotContainerFactory(MapContainer, MapsLayout) {
+  class PlotContainer extends Component {
+    constructor(props) {
+      super(props);
+      // _onMapRender defined in cloud-native
+      this._generateThumbnail = null;
+      this._retrieveNewScreenshot = debounce(this._retrieveNewScreenshot, 500);
+    }
+
+    componentDidMount() {
+      this.props.setExportImageSetting({processing: true});
+    }
+
+    componentDidUpdate(prevProps) {
+      // re-fetch the new screenshot only when ratio legend or resolution changes
+      const checks = ['ratio', 'resolution', 'legend'];
+      const shouldRetrieveScreenshot = checks.some(
+        item => this.props.exportImageSetting[item] !== prevProps.exportImageSetting[item]
+      );
+      if (shouldRetrieveScreenshot) {
+        this.props.setExportImageSetting({processing: true});
+        this._retrieveNewScreenshot();
+      }
+    }
+
+    plottingAreaRef = createRef();
+
+    mapStyleSelector = props => props.mapFields.mapStyle;
+    mapScaleSelector = props => {
+      const {imageSize} = props.exportImageSetting;
+      const {mapState} = props.mapFields;
+      if (imageSize.scale) {
+        return imageSize.scale;
+      }
+
+      const scale = getScaleFromImageSize(
+        imageSize.imageW,
+        imageSize.imageH,
+        mapState.width * (mapState.isSplit ? 2 : 1),
+        mapState.height
+      );
+
+      return scale > 0 ? scale : 1;
+    };
+
+    scaledMapStyleSelector = createSelector(
+      this.mapStyleSelector,
+      this.mapScaleSelector,
+      (mapStyle, scale) => ({
+        ...mapStyle,
+        bottomMapStyle: scaleMapStyleByResolution(mapStyle.bottomMapStyle, scale),
+        topMapStyle: scaleMapStyleByResolution(mapStyle.topMapStyle, scale)
+      })
+    );
+
+    _retrieveNewScreenshot = () => {
+      if (this.plottingAreaRef.current) {
+        convertToPng(this.plottingAreaRef.current, {filter: DOM_FILTER_FUNC})
+          .then(this.props.setExportImageDataUri)
+          .catch(err => {
+            this.props.setExportImageError(err);
+            if (this.props.enableErrorNotification) {
+              this.props.addNotification(exportImageError({err}));
+            }
+          });
+      }
+    };
+
+    render() {
+      const {exportImageSetting, mapFields, splitMaps, maskPolygon} = this.props;
+      const {imageSize = {}, legend} = exportImageSetting;
+      const {mapState} = mapFields;
+      const isSplit = splitMaps && splitMaps.length > 1;
+
+      const size = {
+        width: imageSize.imageW || 1,
+        height: imageSize.imageH || 1
+      };
+      const width = size.width / (isSplit ? 2 : 1);
+      const height = size.height;
+      const scale = this.mapScaleSelector(this.props);
+      const newMapState = {
+        ...mapState,
+        width,
+        height,
+        zoom: mapState.zoom + (Math.log2(scale) || 0)
+      };
+
+      // center and all layer bounds
+      if (exportImageSetting.center) {
+        const renderedLayers = mapFields.layers.filter(
+          (layer, idx) =>
+            layer.id !== GEOCODER_LAYER_ID && layer.shouldRenderLayer(mapFields.layerData[idx])
+        );
+        const bounds = findMapBounds(renderedLayers);
+        const centerAndZoom = getCenterAndZoomFromBounds(bounds, {width, height});
+        if (centerAndZoom) {
+          const zoom = Number.isFinite(centerAndZoom.zoom) ? centerAndZoom.zoom : mapState.zoom;
+
+          newMapState.longitude = centerAndZoom.center[0];
+          newMapState.latitude = centerAndZoom.center[1];
+          newMapState.zoom = zoom + Number(Math.log2(scale) || 0);
+        }
+      }
+
+      const mapProps = {
+        ...mapFields,
+        mapStyle: this.scaledMapStyleSelector(this.props),
+
+        // override viewport based on export settings
+        mapState: newMapState,
+        mapControls: {
+          // override map legend visibility
+          mapLegend: {
+            show: legend,
+            active: true
+          }
+        },
+        MapComponent: StaticMap,
+        generateThumbnail: this._generateThumbnail,
+        isExport: true,
+        deckGlProps,
+        maskPolygon
+      };
+
+      const mapContainers = !isSplit ? (
+        <MapContainer index={0} primary={true} {...mapProps} />
+      ) : (
+        <MapsLayout isExport={true}>
+          {splitMaps.map((settings, index) => (
+            <MapContainer
+              key={index}
+              index={index}
+              primary={index === 1}
+              {...mapProps}
+              mapLayers={splitMaps[index].layers}
+            />
+          ))}
+        </MapsLayout>
+      );
+      return (
+        <StyledPlotContainer className="export-map-instance">
+          <StyledMapContainer ref={this.plottingAreaRef} width={size.width} height={size.height}>
+            {mapContainers}
+          </StyledMapContainer>
+        </StyledPlotContainer>
+      );
+    }
+  }
+
+  PlotContainer.propsTypes = propTypes;
+  return PlotContainer;
+}

package/src/components/side-panel/cloud-storage-dropdown.js

@@ -0,0 +1,52 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import {PanelHeaderDropdownFactory, Icons} from 'components';
+
+const CloudStorageItems = [
+  {
+    label: 'Save',
+    icon: Icons.Save2,
+    key: 'data',
+    onClick: props => props.onSaveMap
+  },
+  {
+    label: 'Settings',
+    icon: Icons.Gear,
+    key: 'settings',
+    onClick: props => props.onExportData
+  }
+];
+
+const PanelHeaderDropdown = PanelHeaderDropdownFactory();
+
+const CloudStorageDropdown = ({show, onClose}) => {
+  return (
+    <PanelHeaderDropdown
+      items={CloudStorageItems}
+      show={show}
+      onClose={onClose}
+      id="cloud-storage"
+    />
+  );
+};
+
+export default CloudStorageDropdown;

package/src/components/side-panel/common/dataset-info.js

@@ -0,0 +1,45 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import styled from 'styled-components';
+import {format} from 'd3-format';
+import {FormattedMessage} from 'localization';
+
+const numFormat = format(',');
+
+const StyledDataRowCount = styled.div`
+  font-size: 11px;
+  color: ${props => props.theme.subtextColor};
+  padding-left: 19px;
+`;
+
+export default function DatasetInfoFactory() {
+  const DatasetInfo = ({dataset}) => (
+    <StyledDataRowCount className="source-data-rows">
+      <FormattedMessage
+        id={'datasetInfo.rowCount'}
+        values={{rowCount: numFormat(dataset.dataContainer.numRows())}}
+      />
+    </StyledDataRowCount>
+  );
+
+  return DatasetInfo;
+}

package/src/components/side-panel/common/dataset-tag.js

@@ -0,0 +1,55 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import styled from 'styled-components';
+import {DatasetSquare} from 'components/common/styled-components';
+
+const DatasetTagWrapper = styled.div`
+  display: flex;
+  color: ${props => props.theme.textColor};
+  font-size: 11px;
+  letter-spacing: 0.2px;
+  overflow: auto;
+
+  .dataset-color {
+    flex-shrink: 0;
+    margin-top: 5px;
+  }
+
+  .dataset-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+export default function DatasetTagFactory() {
+  const DatasetTag = ({onClick, dataset}) => (
+    <DatasetTagWrapper className="source-data-tag" onClick={onClick}>
+      <DatasetSquare className="dataset-color" color={dataset.color} />
+      <div className="dataset-name" title={dataset.label}>
+        {dataset.label}
+      </div>
+    </DatasetTagWrapper>
+  );
+
+  return DatasetTag;
+}

package/src/components/side-panel/common/dataset-title.js

@@ -0,0 +1,146 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {PureComponent} from 'react';
+import styled from 'styled-components';
+import {FormattedMessage} from 'localization';
+
+import {CenterFlexbox, Tooltip} from 'components/common/styled-components';
+import {ArrowRight, Table, Trash} from 'components/common/icons';
+import DatasetTagFactory from 'components/side-panel/common/dataset-tag';
+
+function nop(_) {}
+
+const StyledDatasetTitle = styled.div`
+  color: ${props => props.theme.textColor};
+  display: flex;
+  align-items: flex-start;
+
+  .source-data-arrow {
+    height: 16px;
+  }
+  :hover {
+    cursor: ${props => (props.clickable ? 'pointer' : 'auto')};
+
+    .dataset-name {
+      color: ${props => (props.clickable ? props.theme.textColorHl : props.theme.textColor)};
+    }
+
+    .dataset-action {
+      color: ${props => props.theme.textColor};
+      opacity: 1;
+    }
+
+    .dataset-action:hover {
+      color: ${props => props.theme.textColorHl};
+    }
+  }
+`;
+
+const DataTagAction = styled.div`
+  margin-left: 12px;
+  height: 16px;
+  opacity: 0;
+`;
+
+const ShowDataTable = ({id, showDatasetTable = nop}) => (
+  <DataTagAction className="dataset-action show-data-table" data-tip data-for={`data-table-${id}`}>
+    <Table
+      height="16px"
+      onClick={e => {
+        e.stopPropagation();
+        showDatasetTable(id);
+      }}
+    />
+    <Tooltip id={`data-table-${id}`} effect="solid">
+      <span>
+        <FormattedMessage id={'datasetTitle.showDataTable'} />
+      </span>
+    </Tooltip>
+  </DataTagAction>
+);
+
+const RemoveDataset = ({datasetKey, removeDataset = nop}) => (
+  <DataTagAction
+    className="dataset-action remove-dataset"
+    data-tip
+    data-for={`delete-${datasetKey}`}
+  >
+    <Trash
+      height="16px"
+      onClick={e => {
+        e.stopPropagation();
+        removeDataset(datasetKey);
+      }}
+    />
+    <Tooltip id={`delete-${datasetKey}`} effect="solid" type="error">
+      <span>
+        <FormattedMessage id={'datasetTitle.removeDataset'} />
+      </span>
+    </Tooltip>
+  </DataTagAction>
+);
+
+DatasetTitleFactory.deps = [DatasetTagFactory];
+
+export default function DatasetTitleFactory(DatasetTag) {
+  class DatasetTitle extends PureComponent {
+    _onClickTitle = e => {
+      e.stopPropagation();
+      if (typeof this.props.onTitleClick === 'function') {
+        this.props.onTitleClick();
+      } else if (typeof this.props.showDatasetTable === 'function') {
+        this.props.showDatasetTable(this.props.dataset.id);
+      }
+    };
+
+    render() {
+      const {
+        showDatasetTable,
+        showDeleteDataset,
+        onTitleClick,
+        removeDataset,
+        dataset
+      } = this.props;
+
+      return (
+        <StyledDatasetTitle
+          className="source-data-title"
+          clickable={Boolean(showDatasetTable || onTitleClick)}
+        >
+          <DatasetTag dataset={dataset} onClick={this._onClickTitle} />
+          {showDatasetTable ? (
+            <CenterFlexbox className="source-data-arrow">
+              <ArrowRight height="12px" />
+            </CenterFlexbox>
+          ) : null}
+          {showDatasetTable ? (
+            <ShowDataTable id={dataset.id} showDatasetTable={showDatasetTable} />
+          ) : null}
+          {showDeleteDataset ? (
+            <RemoveDataset datasetKey={dataset.id} removeDataset={removeDataset} />
+          ) : null}
+        </StyledDatasetTitle>
+      );
+    }
+  }
+
+  return DatasetTitle;
+}

package/src/components/side-panel/common/source-data-catalog.js

@@ -0,0 +1,61 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import styled from 'styled-components';
+
+import {SidePanelSection} from 'components/common/styled-components';
+import DatasetTitleFactory from 'components/side-panel/common/dataset-title';
+import DatasetInfoFactory from 'components/side-panel/common/dataset-info';
+
+const SourceDataCatalogWrapper = styled.div`
+  transition: ${props => props.theme.transition};
+`;
+
+SourceDataCatalogFactory.deps = [DatasetTitleFactory, DatasetInfoFactory];
+
+function SourceDataCatalogFactory(DatasetTitle, DatasetInfo) {
+  const SourceDataCatalog = ({
+    datasets,
+    showDatasetTable,
+    removeDataset,
+    onTitleClick,
+    showDeleteDataset = false
+  }) => (
+    <SourceDataCatalogWrapper className="source-data-catalog">
+      {Object.values(datasets).map((dataset, index) => (
+        <SidePanelSection key={dataset.id}>
+          <DatasetTitle
+            showDatasetTable={showDatasetTable}
+            showDeleteDataset={showDeleteDataset}
+            removeDataset={removeDataset}
+            dataset={dataset}
+            onTitleClick={onTitleClick}
+          />
+          {showDatasetTable ? <DatasetInfo dataset={dataset} /> : null}
+        </SidePanelSection>
+      ))}
+    </SourceDataCatalogWrapper>
+  );
+
+  return SourceDataCatalog;
+}
+
+export default SourceDataCatalogFactory;

package/src/components/side-panel/common/source-data-selector.js

@@ -0,0 +1,79 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component} from 'react';
+import {createSelector} from 'reselect';
+
+import {PanelLabel, SidePanelSection} from 'components/common/styled-components';
+import ItemSelector from 'components/common/item-selector/item-selector';
+import DatasetTagFactory from 'components/side-panel/common/dataset-tag';
+import {FormattedMessage} from 'localization';
+
+const defaultPlaceHolder = 'Select A Data Source';
+
+SourceDataSelectorFactory.deps = [DatasetTagFactory];
+
+export default function SourceDataSelectorFactory(DatasetTag) {
+  const DatasetItem = ({value}) => <DatasetTag dataset={value} />;
+
+  class SourceDataSelector extends Component {
+    /* selectors */
+    /* eslint-disable no-invalid-this */
+    datasetsSelector = props => props.datasets;
+    dsOptionsSelector = createSelector(this.datasetsSelector, datasets =>
+      Object.values(datasets).map(ds => ({
+        label: ds.label,
+        value: ds.id,
+        color: ds.color
+      }))
+    );
+
+    render() {
+      const {dataId, disabled, onSelect, defaultValue, inputTheme} = this.props;
+      const dsOptions = this.dsOptionsSelector(this.props);
+
+      return (
+        <SidePanelSection className="data-source-selector">
+          <PanelLabel>
+            <FormattedMessage id={'misc.dataSource'} />
+          </PanelLabel>
+          <ItemSelector
+            inputTheme={inputTheme}
+            selectedItems={dataId ? this.props.datasets[dataId] : null}
+            options={dsOptions}
+            getOptionValue={'value'}
+            filterOption={'label'}
+            multiSelect={false}
+            onChange={onSelect}
+            placeholder={defaultValue}
+            disabled={Boolean(disabled)}
+            displayOption={'label'}
+            DropDownLineItemRenderComponent={DatasetItem}
+          />
+        </SidePanelSection>
+      );
+    }
+  }
+
+  SourceDataSelector.defaultProps = {
+    defaultValue: defaultPlaceHolder
+  };
+  return SourceDataSelector;
+}