@carto/kepler.gl 0.0.76 → 0.0.78-0

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

@@ -1,55 +0,0 @@
-// 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

@@ -1,146 +0,0 @@
-// 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

@@ -1,61 +0,0 @@
-// 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

@@ -1,79 +0,0 @@
-// 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;
-}

package/src/components/side-panel/filter-manager.js

@@ -1,105 +0,0 @@
-// 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, {useCallback, useMemo} from 'react';
-import PropTypes from 'prop-types';
-import {FormattedMessage} from 'localization';
-import {Button, SidePanelDivider, SidePanelSection} from 'components/common/styled-components';
-import {Add} from 'components/common/icons';
-import SourceDataCatalogFactory from './common/source-data-catalog';
-import FilterPanelFactory from './filter-panel/filter-panel';
-
-FilterManagerFactory.deps = [SourceDataCatalogFactory, FilterPanelFactory];
-
-function FilterManagerFactory(SourceDataCatalog, FilterPanel) {
-  const FilterManager = ({filters = [], datasets, layers, showDatasetTable, visStateActions}) => {
-    const {
-      addFilter,
-      enlargeFilter,
-      removeFilter,
-      setFilter,
-      toggleAnimation,
-      toggleFilterFeature
-    } = visStateActions;
-    const isAnyFilterAnimating = filters.some(f => f.isAnimating);
-    const hadEmptyFilter = filters.some(f => !f.name);
-    const hadDataset = Object.keys(datasets).length;
-    const onClickAddFilter = useCallback(() => {
-      const defaultDataset = (Object.keys(datasets).length && Object.keys(datasets)[0]) || null;
-      addFilter(defaultDataset);
-    }, [datasets, addFilter]);
-    // render last added filter first
-    const reversedIndex = useMemo(() => {
-      return new Array(filters.length)
-        .fill(0)
-        .map((d, i) => i)
-        .reverse();
-    }, [filters.length]);
-
-    return (
-      <div className="filter-manager">
-        <SourceDataCatalog datasets={datasets} showDatasetTable={showDatasetTable} />
-        <SidePanelDivider />
-        <SidePanelSection>
-          {reversedIndex.map(idx => (
-            <FilterPanel
-              key={`${filters[idx].id}-${idx}`}
-              idx={idx}
-              filters={filters}
-              filter={filters[idx]}
-              datasets={datasets}
-              layers={layers}
-              isAnyFilterAnimating={isAnyFilterAnimating}
-              removeFilter={() => removeFilter(idx)}
-              enlargeFilter={() => enlargeFilter(idx)}
-              toggleAnimation={() => toggleAnimation(idx)}
-              toggleFilterFeature={() => toggleFilterFeature(idx)}
-              setFilter={setFilter}
-            />
-          ))}
-        </SidePanelSection>
-        <Button
-          className="add-filter-button"
-          inactive={hadEmptyFilter || !hadDataset}
-          width="105px"
-          onClick={onClickAddFilter}
-        >
-          <Add height="12px" />
-          <FormattedMessage id={'filterManager.addFilter'} />
-        </Button>
-      </div>
-    );
-  };
-
-  FilterManager.propTypes = {
-    datasets: PropTypes.object,
-    layers: PropTypes.arrayOf(PropTypes.any).isRequired,
-    filters: PropTypes.arrayOf(PropTypes.any).isRequired,
-    showDatasetTable: PropTypes.func.isRequired,
-    visStateActions: PropTypes.object.isRequired,
-
-    // fields can be undefined when dataset is not selected
-    fields: PropTypes.arrayOf(PropTypes.any)
-  };
-
-  return FilterManager;
-}
-
-export default FilterManagerFactory;

package/src/components/side-panel/filter-panel/filter-panel-header.js

@@ -1,83 +0,0 @@
-// 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 PanelHeaderActionFactory from 'components/side-panel/panel-header-action';
-import {Trash} from 'components/common/icons';
-import {createLinearGradient} from 'utils/color-utils';
-import {StyledPanelHeader} from 'components/common/styled-components';
-
-export const StyledFilterHeader = styled(StyledPanelHeader)`
-  cursor: pointer;
-  padding: 10px 12px;
-
-  .field-selector {
-    flex: 2;
-  }
-
-  border-left: 3px solid;
-  ${props =>
-    props.labelRCGColorValues && props.labelRCGColorValues.length > 0
-      ? `border-image: ${createLinearGradient('bottom', props.labelRCGColorValues)} 3;`
-      : 'border-color: transparent;'};
-`;
-
-const StyledChildrenContainer = styled.div`
-  display: flex;
-  flex: 2;
-`;
-
-FilterPanelHeaderFactory.deps = [PanelHeaderActionFactory];
-
-function FilterPanelHeaderFactory(PanelHeaderAction) {
-  const defaultActionIcons = {
-    delete: Trash
-  };
-  const FilterPanelHeader = ({
-    children,
-    datasets,
-    allAvailableFields,
-    setFilter,
-    idx,
-    filter,
-    removeFilter,
-    actionIcons = defaultActionIcons
-  }) => (
-    <StyledFilterHeader
-      className="filter-panel__header"
-      labelRCGColorValues={datasets.map(d => d.color)}
-    >
-      <StyledChildrenContainer>{children}</StyledChildrenContainer>
-      <PanelHeaderAction
-        id={filter.id}
-        tooltip="tooltip.delete"
-        tooltipType="error"
-        onClick={removeFilter}
-        hoverColor={'errorColor'}
-        IconComponent={actionIcons.delete}
-      />
-    </StyledFilterHeader>
-  );
-
-  return FilterPanelHeader;
-}
-
-export default FilterPanelHeaderFactory;

package/src/components/side-panel/filter-panel/filter-panel.js

@@ -1,126 +0,0 @@
-// 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 PropTypes from 'prop-types';
-import {createSelector} from 'reselect';
-import styled from 'styled-components';
-import get from 'lodash/get';
-import {ALL_FIELD_TYPES, FILTER_TYPES} from 'constants/default-settings';
-
-import NewFilterPanelFactory from 'components/filters/filter-panels/new-filter-panel';
-import TimeRangeFilterPanelFactory from 'components/filters/filter-panels/time-range-filter-panel';
-import SingleSelectFilterPanelFactory from 'components/filters/filter-panels/single-select-filter-panel';
-import MultiSelectFilterPanelFactory from 'components/filters/filter-panels/multi-select-filter-panel';
-import RangeFilterPanelFactory from 'components/filters/filter-panels/range-filter-panel';
-import PolygonFilterPanelFactory from 'components/filters/filter-panels/polygon-filter-panel';
-
-const StyledFilterPanel = styled.div`
-  margin-bottom: 12px;
-  border-radius: 1px;
-`;
-
-FilterPanelFactory.deps = [
-  NewFilterPanelFactory,
-  TimeRangeFilterPanelFactory,
-  SingleSelectFilterPanelFactory,
-  MultiSelectFilterPanelFactory,
-  RangeFilterPanelFactory,
-  PolygonFilterPanelFactory
-];
-
-function FilterPanelFactory(
-  NewFilterPanel,
-  TimeRangeFilterPanel,
-  SingleSelectFilterPanel,
-  MultiSelectFilterPanel,
-  RangeFilterPanel,
-  PolygonFilterPanel
-) {
-  const FilterPanelComponents = {
-    default: NewFilterPanel,
-    [FILTER_TYPES.timeRange]: TimeRangeFilterPanel,
-    [FILTER_TYPES.select]: SingleSelectFilterPanel,
-    [FILTER_TYPES.multiSelect]: MultiSelectFilterPanel,
-    [FILTER_TYPES.range]: RangeFilterPanel,
-    [FILTER_TYPES.polygon]: PolygonFilterPanel
-  };
-
-  return class FilterPanel extends Component {
-    static propTypes = {
-      idx: PropTypes.number,
-      filters: PropTypes.arrayOf(PropTypes.any).isRequired,
-      filter: PropTypes.object.isRequired,
-      setFilter: PropTypes.func.isRequired,
-      removeFilter: PropTypes.func.isRequired,
-      enlargeFilter: PropTypes.func.isRequired,
-      toggleAnimation: PropTypes.func.isRequired,
-      toggleFilterFeature: PropTypes.func.isRequired,
-      datasets: PropTypes.object,
-      showDatasetTable: PropTypes.func,
-      isAnyFilterAnimating: PropTypes.bool
-    };
-
-    /* selectors */
-    fieldsSelector = props => {
-      const datasetId = props.filter.dataId[0];
-      if (!datasetId) {
-        return [];
-      }
-      return get(props, ['datasets', datasetId, 'fields'], []);
-    };
-
-    filterSelector = props => props.filters;
-    nameSelector = props => props.filter.name;
-    dataIdSelector = props => props.filter.dataId[0];
-
-    // only show current field and field that's not already been used as a filter
-    availableFieldsSelector = createSelector(
-      this.fieldsSelector,
-      this.filterSelector,
-      this.nameSelector,
-      this.dataIdSelector,
-      (fields, filters, name, dataId) =>
-        fields.filter(
-          f =>
-            f.type &&
-            f.type !== ALL_FIELD_TYPES.geojson &&
-            (f.name === name || !filters.find(d => d.name === f.name && d.dataId === dataId))
-        )
-    );
-
-    render() {
-      const {filter} = this.props;
-
-      const {type} = filter;
-      const FilterFilterComponent =
-        (type && FilterPanelComponents[type]) || FilterPanelComponents.default;
-      const allAvailableFields = this.availableFieldsSelector(this.props);
-
-      return (
-        <StyledFilterPanel className="filter-panel">
-          <FilterFilterComponent allAvailableFields={allAvailableFields} {...this.props} />
-        </StyledFilterPanel>
-      );
-    }
-  };
-}
-
-export default FilterPanelFactory;