@carto/kepler.gl 0.0.77 → 0.0.78-0

package/src/components/editor/feature-action-panel.tsx

@@ -0,0 +1,155 @@
+// 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, useState} from 'react';
+import {useIntl} from 'react-intl';
+
+import ActionPanel, {ActionPanelItem} from 'components/common/action-panel';
+import styled from 'styled-components';
+import onClickOutside from 'react-onclickoutside';
+import classnames from 'classnames';
+import {Trash, Layers, Copy, Checkmark} from 'components/common/icons';
+import copy from 'copy-to-clipboard';
+import {Layer} from 'layers';
+import {Datasets, Filter} from 'reducers';
+import {Feature} from '@nebula.gl/edit-modes';
+
+const LAYOVER_OFFSET = 4;
+
+const StyledActionsLayer = styled.div`
+  position: absolute;
+`;
+
+PureFeatureActionPanelFactory.deps = [];
+
+export interface FeatureActionPanelProps {
+  className?: string;
+  datasets: Datasets;
+  selectedFeature: Feature | null;
+  position: {
+    x: number;
+    y: number;
+  } | null;
+  layers: Layer[];
+  currentFilter?: Filter;
+  onToggleLayer: (l: Layer) => void;
+  onDeleteFeature: () => void;
+  onClose: () => void;
+}
+
+export function PureFeatureActionPanelFactory(): React.FC<FeatureActionPanelProps> {
+  const FeatureActionPanel = ({
+    className,
+    datasets,
+    selectedFeature,
+    position,
+    layers,
+    currentFilter,
+    onToggleLayer,
+    onDeleteFeature
+  }: FeatureActionPanelProps) => {
+    const [copied, setCopied] = useState(false);
+    const {layerId = []} = currentFilter || {};
+    const intl = useIntl();
+
+    const copyGeometry = useCallback(() => {
+      if (selectedFeature?.geometry) copy(JSON.stringify(selectedFeature.geometry));
+      setCopied(true);
+    }, [selectedFeature?.geometry]);
+
+    if (!position) {
+      return null;
+    }
+
+    return (
+      <StyledActionsLayer
+        className={classnames('feature-action-panel', className)}
+        style={{
+          top: `${position.y + LAYOVER_OFFSET}px`,
+          left: `${position.x + LAYOVER_OFFSET}px`
+        }}
+      >
+        <ActionPanel>
+          <ActionPanelItem
+            className="editor-layers-list"
+            label={intl.formatMessage({id: 'editor.filterLayer', defaultMessage: 'Filter layers'})}
+            Icon={Layers}
+          >
+            {layers.map((layer, index) => (
+              <ActionPanelItem
+                key={index}
+                label={layer.config.label}
+                // @ts-ignore
+                color={datasets[layer.config.dataId].color}
+                isSelection={true}
+                isActive={layerId.includes(layer.id)}
+                onClick={() => onToggleLayer(layer)}
+                className="layer-panel-item"
+              />
+            ))}
+          </ActionPanelItem>
+          <ActionPanelItem
+            label={intl.formatMessage({id: 'editor.copyGeometry', defaultMessage: 'Copy Geometry'})}
+            className="delete-panel-item"
+            Icon={copied ? Checkmark : Copy}
+            onClick={copyGeometry}
+          />
+
+          <ActionPanelItem
+            label={intl.formatMessage({id: 'tooltip.delete', defaultMessage: 'Delete'})}
+            className="delete-panel-item"
+            Icon={Trash}
+            onClick={onDeleteFeature}
+          />
+        </ActionPanel>
+      </StyledActionsLayer>
+    );
+  };
+
+  FeatureActionPanel.displayName = 'FeatureActionPanel';
+  FeatureActionPanel.defaultProps = {
+    position: null
+  };
+
+  return FeatureActionPanel;
+}
+
+FeatureActionPanelFactory.deps = PureFeatureActionPanelFactory.deps;
+
+export default function FeatureActionPanelFactory() {
+  const PureFeatureActionPanel = PureFeatureActionPanelFactory();
+
+  const ClickOutsideFeatureActionPanel: React.FC<FeatureActionPanelProps> = props => {
+    // @ts-ignore
+    ClickOutsideFeatureActionPanel.handleClickOutside = (e: Event) => {
+      e.preventDefault();
+      e.stopPropagation();
+      props.onClose?.();
+    };
+    return <PureFeatureActionPanel {...props} />;
+  };
+
+  const clickOutsideConfig = {
+    // @ts-ignore
+    handleClickOutside: () => ClickOutsideFeatureActionPanel.handleClickOutside
+  };
+
+  return onClickOutside(ClickOutsideFeatureActionPanel, clickOutsideConfig);
+}

package/src/components/editor/feature-styles.ts

@@ -0,0 +1,75 @@
+// 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 {RenderStates, RenderTypes} from 'react-map-gl-draw';
+import get from 'lodash.get';
+import {COLORS} from './constants';
+
+export const DEFAULT_RADIUS = 5;
+export const DEFAULT_STATE_STYLE_STROKE = COLORS.PRIMARY;
+
+export const STATE_STYLES_STROKE = {
+  [RenderStates.INACTIVE]: '#26B5F2',
+  [RenderStates.UNCOMMITTED]: '#a9a9a9',
+  [RenderStates.CLOSING]: '#a9a9a9',
+  [RenderStates.SELECTED]: '#26B5F2',
+  [RenderStates.HOVERED]: '#26B5F2'
+};
+
+export const DEFAULT_STATE_STYLE_FILL = '#000';
+
+export const STATE_STYLES_FILL = {
+  [RenderStates.INACTIVE]: '#333333',
+  [RenderStates.HOVERED]: '#7ac943',
+  [RenderStates.SELECTED]: '#ffff00',
+  [RenderStates.UNCOMMITTED]: '#a9a9a9',
+  [RenderStates.CLOSING]: '#a9a9a9'
+};
+
+export const DEFAULT_STATE_STYLE_OPACITY = 0.1;
+
+export const STATE_STYLES_STROKE_WIDTH = 2;
+
+export const DEFAULT_STROKE_DASH_ARRAY = '4,2';
+
+export const RENDER_TYPE_STYLES = {
+  [RenderTypes.POINT]: () => ({r: DEFAULT_RADIUS}),
+  [RenderTypes.LINE_STRING]: () => ({fill: 'none'})
+};
+
+export function noOp() {}
+
+export function getStyle({feature, state}) {
+  const isVisible = get(feature, ['properties', 'isVisible'], true);
+  const style = {
+    stroke: STATE_STYLES_STROKE[state] || DEFAULT_STATE_STYLE_STROKE,
+    strokeWidth: isVisible ? STATE_STYLES_STROKE_WIDTH : 0,
+    fill: STATE_STYLES_FILL[state] || DEFAULT_STATE_STYLE_FILL,
+    fillOpacity: DEFAULT_STATE_STYLE_OPACITY,
+    ...(state !== RenderStates.SELECTED ? {strokeDasharray: DEFAULT_STROKE_DASH_ARRAY} : null)
+  };
+
+  const renderType = feature.properties ? feature.properties.renderType : feature.renderType;
+
+  return {
+    ...style,
+    ...(RENDER_TYPE_STYLES[renderType] || noOp)()
+  };
+}

package/src/components/editor/handle-style.ts

@@ -0,0 +1,89 @@
+// 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 {RenderStates, RenderTypes} from 'react-map-gl-draw';
+import {COLORS} from './constants';
+import get from 'lodash.get';
+
+const DEFAULT_EDIT_HANDLE_SHAPE = 'circle';
+
+const rectStyle = {
+  x: -6,
+  y: -6,
+  height: 12,
+  width: 12
+};
+
+export const DEFAULT_STATE_STYLE_STROKE = COLORS.PRIMARY;
+
+export const STATE_STYLES_STROKE = {
+  [RenderStates.SELECTED]: COLORS.PRIMARY,
+  [RenderStates.HOVERED]: COLORS.SECONDARY
+};
+
+export const DEFAULT_STATE_STYLE_FILL = '#ffffff';
+
+export const STATE_STYLES_FILL = {
+  [RenderStates.SELECTED]: COLORS.SECONDARY,
+  [RenderStates.HOVERED]: COLORS.SECONDARY,
+  [RenderStates.INACTIVE]: COLORS.PRIMARY,
+  [RenderStates.UNCOMMITTED]: COLORS.PRIMARY
+};
+
+const STATE_STYLES_STROKE_WIDTH = 1;
+
+export const RENDER_TYPE_STYLES = {
+  [RenderTypes.POINT]: state => ({
+    fill: STATE_STYLES_FILL[state],
+    stroke: state === RenderStates.SELECTED ? COLORS.PRIMARY : DEFAULT_STATE_STYLE_STROKE
+  }),
+  [RenderTypes.LINE_STRING]: () => rectStyle,
+  [RenderTypes.RECTANGLE]: () => rectStyle,
+  [RenderTypes.POLYGON]: () => rectStyle
+};
+
+export const DEFAULT_STATE_STYLE_OPACITY = 0;
+
+export const DEFAULT_RADIUS = 5;
+
+function noOp() {}
+
+export function getStyle({feature, state}) {
+  const isVisible = get(feature, ['properties', 'isVisible'], true);
+
+  const style = {
+    stroke: STATE_STYLES_STROKE[state] || DEFAULT_STATE_STYLE_STROKE,
+    strokeWidth: isVisible ? STATE_STYLES_STROKE_WIDTH : 0,
+    fill: DEFAULT_STATE_STYLE_FILL,
+    fillOpacity: DEFAULT_STATE_STYLE_OPACITY,
+    r: DEFAULT_RADIUS
+  };
+
+  const renderType = feature.properties ? feature.properties.renderType : feature.renderType;
+
+  return {
+    ...style,
+    ...(RENDER_TYPE_STYLES[renderType] || noOp)(state)
+  };
+}
+
+export function getEditHandleShape() {
+  return DEFAULT_EDIT_HANDLE_SHAPE;
+}

package/src/components/filters/filter-panels/filter-panel-with-field-select.tsx

@@ -0,0 +1,118 @@
+// 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 {StyledFilterContent} from 'components/common/styled-components';
+import FilterPanelHeaderFactory from 'components/side-panel/filter-panel/filter-panel-header';
+import PanelHeaderActionFactory from 'components/side-panel/panel-header-action';
+import SourceDataSelectorFactory from 'components/side-panel/common/source-data-selector';
+import FieldSelectorFactory from '../../common/field-selector';
+import {getSupportedFilterFields} from './new-filter-panel';
+import {FilterPanelWithFieldSelectComponent} from './types';
+import KeplerTable from 'utils/table-utils/kepler-table';
+
+FieldPanelWithFieldSelectFactory.deps = [
+  FilterPanelHeaderFactory,
+  SourceDataSelectorFactory,
+  FieldSelectorFactory,
+  PanelHeaderActionFactory
+];
+
+function FieldPanelWithFieldSelectFactory(
+  FilterPanelHeader: ReturnType<typeof FilterPanelHeaderFactory>,
+  SourceDataSelector: ReturnType<typeof SourceDataSelectorFactory>,
+  FieldSelector: ReturnType<typeof FieldSelectorFactory>,
+  PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>
+) {
+  const FilterPanelWithFieldSelect: FilterPanelWithFieldSelectComponent = React.memo(
+    ({
+      children,
+      allAvailableFields,
+      datasets,
+      filter,
+      idx,
+      removeFilter,
+      setFilter,
+      panelActions = []
+    }) => {
+      const onFieldSelector = useCallback(field => setFilter(idx, 'name', field.name), [
+        idx,
+        setFilter
+      ]);
+
+      const onSourceDataSelector = useCallback(value => setFilter(idx, 'dataId', [value]), [
+        idx,
+        setFilter
+      ]);
+
+      const fieldValue = useMemo(
+        () => (Array.isArray(filter.name) ? filter.name[0] : filter.name),
+        [filter.name]
+      );
+
+      const dataset: KeplerTable = datasets[filter.dataId[0]];
+      const supportedFields = useMemo(
+        () => getSupportedFilterFields(dataset.supportedFilterTypes, allAvailableFields),
+        [dataset.supportedFilterTypes, allAvailableFields]
+      );
+      return (
+        <>
+          <FilterPanelHeader datasets={[dataset]} filter={filter} removeFilter={removeFilter}>
+            <FieldSelector
+              inputTheme="secondary"
+              fields={supportedFields}
+              value={fieldValue}
+              erasable={false}
+              onSelect={onFieldSelector}
+            />
+            {panelActions?.map(panelAction => (
+              <PanelHeaderAction
+                id={panelAction.id}
+                key={panelAction.id}
+                onClick={panelAction.onClick}
+                tooltip={panelAction.tooltip}
+                IconComponent={panelAction.iconComponent}
+                active={panelAction.active}
+              />
+            ))}
+          </FilterPanelHeader>
+          <StyledFilterContent className="filter-panel__content">
+            {Object.keys(datasets).length > 1 && (
+              <SourceDataSelector
+                inputTheme="secondary"
+                datasets={datasets}
+                disabled={filter.freeze}
+                dataId={filter.dataId}
+                onSelect={onSourceDataSelector}
+              />
+            )}
+            {children}
+          </StyledFilterContent>
+        </>
+      );
+    }
+  );
+
+  FilterPanelWithFieldSelect.displayName = 'FilterPanelWithFieldSelect';
+
+  return FilterPanelWithFieldSelect;
+}
+
+export default FieldPanelWithFieldSelectFactory;

package/src/components/filters/filter-panels/multi-select-filter-panel.tsx

@@ -0,0 +1,63 @@
+// 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} from 'react';
+import MultiSelectFilterFactory from 'components/filters/multi-select-filter';
+import {MultiSelectFilter} from 'reducers';
+import FieldPanelWithFieldSelectFactory from 'components/filters/filter-panels/filter-panel-with-field-select';
+import {FilterPanelComponent} from './types';
+
+MultiSelectFilterPanelFactory.deps = [FieldPanelWithFieldSelectFactory, MultiSelectFilterFactory];
+
+function MultiSelectFilterPanelFactory(
+  FieldPanelWithFieldSelect: ReturnType<typeof FieldPanelWithFieldSelectFactory>,
+  MultiSelectFilter: ReturnType<typeof MultiSelectFilterFactory>
+) {
+  const MultiSelectFilterPanel: FilterPanelComponent<MultiSelectFilter> = React.memo(
+    ({idx, datasets, allAvailableFields, filter, setFilter, removeFilter}) => {
+      const onSetFilter = useCallback(value => setFilter(idx, 'value', value), [idx, setFilter]);
+
+      return (
+        <div className="multi-select-filter-panel">
+          <FieldPanelWithFieldSelect
+            allAvailableFields={allAvailableFields}
+            datasets={datasets}
+            filter={filter}
+            idx={idx}
+            removeFilter={removeFilter}
+            setFilter={setFilter}
+          >
+            {filter.type && !filter.enlarged && (
+              <div className="filter-panel__filter">
+                <MultiSelectFilter filter={filter} setFilter={onSetFilter} />
+              </div>
+            )}
+          </FieldPanelWithFieldSelect>
+        </div>
+      );
+    }
+  );
+
+  MultiSelectFilterPanel.displayName = 'MultiSelectFilterPanel';
+
+  return MultiSelectFilterPanel;
+}
+
+export default MultiSelectFilterPanelFactory;

package/src/components/filters/filter-panels/new-filter-panel.tsx

@@ -0,0 +1,100 @@
+// 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 {StyledFilterContent} from 'components/common/styled-components';
+import FilterPanelHeaderFactory from 'components/side-panel/filter-panel/filter-panel-header';
+import SourceDataSelectorFactory from 'components/side-panel/common/source-data-selector';
+import FieldSelectorFactory from '../../common/field-selector';
+import {FilterBase} from 'reducers';
+import {FilterPanelComponent} from './types';
+import KeplerTable, {Field} from 'utils/table-utils/kepler-table';
+
+NewFilterPanelFactory.deps = [
+  FilterPanelHeaderFactory,
+  SourceDataSelectorFactory,
+  FieldSelectorFactory
+];
+
+export function getSupportedFilterFields(
+  supportedFilterTypes: KeplerTable['supportedFilterTypes'],
+  fields: Field[]
+) {
+  return supportedFilterTypes
+    ? fields.filter(field => supportedFilterTypes.includes(field.type))
+    : fields;
+}
+
+function NewFilterPanelFactory(
+  FilterPanelHeader: ReturnType<typeof FilterPanelHeaderFactory>,
+  SourceDataSelector: ReturnType<typeof SourceDataSelectorFactory>,
+  FieldSelector: ReturnType<typeof FieldSelectorFactory>
+) {
+  const NewFilterPanel: FilterPanelComponent<FilterBase> = React.memo(
+    ({idx, filter, datasets, allAvailableFields, setFilter, removeFilter}) => {
+      const onFieldSelector = useCallback(field => setFilter(idx, 'name', field.name), [
+        idx,
+        setFilter
+      ]);
+
+      const onSourceDataSelector = useCallback(value => setFilter(idx, 'dataId', value), [
+        idx,
+        setFilter
+      ]);
+
+      const dataset: KeplerTable = datasets[filter.dataId[0]];
+      const supportedFields = useMemo(
+        () => getSupportedFilterFields(dataset.supportedFilterTypes, allAvailableFields),
+        [dataset.supportedFilterTypes, allAvailableFields]
+      );
+
+      return (
+        <>
+          <FilterPanelHeader datasets={[dataset]} filter={filter} removeFilter={removeFilter}>
+            <FieldSelector
+              inputTheme="secondary"
+              fields={supportedFields}
+              value={Array.isArray(filter.name) ? filter.name[0] : filter.name}
+              erasable={false}
+              onSelect={onFieldSelector}
+            />
+          </FilterPanelHeader>
+          <StyledFilterContent className="filter-panel__content">
+            {Object.keys(datasets).length > 1 && (
+              <SourceDataSelector
+                inputTheme="secondary"
+                datasets={datasets}
+                disabled={filter.freeze}
+                dataId={filter.dataId}
+                onSelect={onSourceDataSelector}
+              />
+            )}
+          </StyledFilterContent>
+        </>
+      );
+    }
+  );
+
+  NewFilterPanel.displayName = 'NewFilterPanel';
+
+  return NewFilterPanel;
+}
+
+export default NewFilterPanelFactory;

package/src/components/filters/filter-panels/polygon-filter-panel.tsx

@@ -0,0 +1,84 @@
+// 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, {useMemo, useCallback} from 'react';
+import {StyledFilterContent} from 'components/common/styled-components';
+import PolygonFilterFactory from 'components/filters/polygon-filter';
+import PanelHeaderActionFactory from 'components/side-panel/panel-header-action';
+import {EyeSeen, EyeUnseen} from 'components/common/icons';
+
+import FilterPanelHeaderFactory from 'components/side-panel/filter-panel/filter-panel-header';
+import {StyledFilterPanel} from '../components';
+
+import get from 'lodash.get';
+import {PolygonFilterPanelComponent} from './types';
+import KeplerTable from 'utils/table-utils/kepler-table';
+
+PolygonFilterPanelFactory.deps = [
+  FilterPanelHeaderFactory,
+  PolygonFilterFactory,
+  PanelHeaderActionFactory
+];
+
+function PolygonFilterPanelFactory(
+  FilterPanelHeader: ReturnType<typeof FilterPanelHeaderFactory>,
+  PolygonFilter: ReturnType<typeof PolygonFilterFactory>,
+  PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>
+) {
+  const PolygonFilterPanel: PolygonFilterPanelComponent = React.memo(
+    ({idx, datasets, layers, filter, removeFilter, setFilter, toggleFilterFeature}) => {
+      const filterDatasets: KeplerTable[] = useMemo(() => filter.dataId.map(d => datasets[d]), [
+        filter,
+        datasets
+      ]);
+
+      const onSetLayers = useCallback(value => setFilter(idx, 'layerId', value), [setFilter, idx]);
+
+      const isVisible = get(filter, ['value', 'properties', 'isVisible'], true);
+      const featureType = get(filter, ['value', 'properties', 'renderType'], true);
+
+      return (
+        <div className="polygon-filter-panel">
+          <FilterPanelHeader datasets={filterDatasets} filter={filter} removeFilter={removeFilter}>
+            <StyledFilterPanel>Geo - {featureType}</StyledFilterPanel>
+            <PanelHeaderAction
+              id={filter.id}
+              onClick={toggleFilterFeature}
+              tooltip={isVisible ? 'tooltip.hideFeature' : 'tooltip.showFeature'}
+              IconComponent={isVisible ? EyeSeen : EyeUnseen}
+              active={isVisible}
+            />
+          </FilterPanelHeader>
+          <StyledFilterContent className="filter-panel__content">
+            <div className="filter-panel__filter">
+              <PolygonFilter filter={filter} layers={layers} setLayers={onSetLayers} />
+            </div>
+          </StyledFilterContent>
+        </div>
+      );
+    }
+  );
+
+  PolygonFilterPanel.displayName = 'PolygonFilterPanel';
+
+  return PolygonFilterPanel;
+}
+
+export default PolygonFilterPanelFactory;