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

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

@@ -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/components.js

@@ -0,0 +1,28 @@
+// 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 styled from 'styled-components';
+import {PanelLabel} from 'components/common/styled-components';
+
+export const StyledFilterPanel = styled(PanelLabel)`
+  font-weight: 500;
+  color: white;
+  flex: 1;
+`;

package/src/components/filters/filter-panels/filter-panel-types.d.ts

@@ -0,0 +1,28 @@
+import {FunctionComponent, ComponentType} from 'react';
+import {Filter, Dataset, Field} from 'reducers';
+import {Layer} from 'layers';
+
+interface PanelAction {
+  id: string,
+  tooltip: string,
+  onClick: () => void,
+  iconComponent: ComponentType<any>,
+  active: boolean
+}
+
+export type FilterPanelProps = {
+  idx: number,
+  layers: ReadonlyArray<Layer>,
+  datasets: ReadonlyArray<Dataset>,
+  allAvailableFields: ReadonlyArray<Field>,
+  filter: Filter,
+  panelActions: ReadonlyArray<PanelAction>,
+  isAnyFilterAnimating: boolean,
+  enlargeFilter: () => void,
+  setFilter: (idx: number, field: string, value: any) => void,
+  removeFilter: () => void,
+  toggleAnimation: () => void,
+  toggleFilterFeature: () => void
+};
+
+export type FilterPanelComponent = FunctionComponent<FilterPanelProps>;

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

@@ -0,0 +1,124 @@
+// 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';
+
+FieldPanelWithFieldSelectFactory.deps = [
+  FilterPanelHeaderFactory,
+  SourceDataSelectorFactory,
+  FieldSelectorFactory,
+  PanelHeaderActionFactory
+];
+
+function FieldPanelWithFieldSelectFactory(
+  FilterPanelHeader,
+  SourceDataSelector,
+  FieldSelector,
+  PanelHeaderAction
+) {
+  /** @type {import('./filter-panel-types').FilterPanelComponent} */
+  const FilterPanelWithFieldSelect = React.memo(
+    ({
+      allAvailableFields,
+      children,
+      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 = datasets[filter.dataId[0]];
+      const supportedFields = useMemo(
+        () => getSupportedFilterFields(dataset.supportedFilterTypes, allAvailableFields),
+        [dataset.supportedFilterTypes, allAvailableFields]
+      );
+      return (
+        <>
+          <FilterPanelHeader
+            datasets={[dataset]}
+            allAvailableFields={supportedFields}
+            idx={idx}
+            filter={filter}
+            removeFilter={removeFilter}
+          >
+            <FieldSelector
+              inputTheme="secondary"
+              fields={supportedFields}
+              value={fieldValue}
+              erasable={false}
+              onSelect={onFieldSelector}
+            />
+            {panelActions &&
+              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.js

@@ -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 React, {useCallback} from 'react';
+import MultiSelectFilterFactory from 'components/filters/multi-select-filter';
+import FieldPanelWithFieldSelectFactory from 'components/filters/filter-panels/filter-panel-with-field-select';
+
+MultiSelectFilterPanelFactory.deps = [FieldPanelWithFieldSelectFactory, MultiSelectFilterFactory];
+
+function MultiSelectFilterPanelFactory(FieldPanelWithFieldSelect, MultiSelectFilter) {
+  /** @type {import('./filter-panel-types').FilterPanelComponent} */
+  const MultiSelectFilterPanel = React.memo(
+    ({
+      idx,
+      datasets,
+      allAvailableFields,
+      filter,
+      isAnyFilterAnimating,
+      enlargeFilter,
+      setFilter,
+      removeFilter,
+      toggleAnimation
+    }) => {
+      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}
+                  idx={idx}
+                  isAnyFilterAnimating={isAnyFilterAnimating}
+                  toggleAnimation={toggleAnimation}
+                  setFilter={onSetFilter}
+                />
+              </div>
+            )}
+          </FieldPanelWithFieldSelect>
+        </div>
+      );
+    }
+  );
+
+  MultiSelectFilterPanel.displayName = 'MultiSelectFilterPanel';
+
+  return MultiSelectFilterPanel;
+}
+
+export default MultiSelectFilterPanelFactory;

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

@@ -0,0 +1,99 @@
+// 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';
+
+NewFilterPanelFactory.deps = [
+  FilterPanelHeaderFactory,
+  SourceDataSelectorFactory,
+  FieldSelectorFactory
+];
+
+export function getSupportedFilterFields(supportedFilterTypes, fields) {
+  return supportedFilterTypes
+    ? fields.filter(field => supportedFilterTypes.includes(field.type))
+    : fields;
+}
+
+function NewFilterPanelFactory(FilterPanelHeader, SourceDataSelector, FieldSelector) {
+  /** @type {import('./filter-panel-types').FilterPanelComponent} */
+  const NewFilterPanel = React.memo(
+    ({idx, filter, datasets, allAvailableFields, setFilter, removeFilter, enlargeFilter}) => {
+      const onFieldSelector = useCallback(field => setFilter(idx, 'name', field.name), [
+        idx,
+        setFilter
+      ]);
+
+      const onSourceDataSelector = useCallback(value => setFilter(idx, 'dataId', value), [
+        idx,
+        setFilter
+      ]);
+
+      const dataset = datasets[filter.dataId[0]];
+      const supportedFields = useMemo(
+        () => getSupportedFilterFields(dataset.supportedFilterTypes, allAvailableFields),
+        [dataset.supportedFilterTypes, allAvailableFields]
+      );
+
+      return (
+        <>
+          <FilterPanelHeader
+            datasets={[dataset]}
+            allAvailableFields={supportedFields}
+            idx={idx}
+            filter={filter}
+            removeFilter={removeFilter}
+            enlargeFilter={enlargeFilter}
+            enlarged={filter.enlarged}
+          >
+            <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.js

@@ -0,0 +1,96 @@
+// 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';
+
+PolygonFilterPanelFactory.deps = [
+  FilterPanelHeaderFactory,
+  PolygonFilterFactory,
+  PanelHeaderActionFactory
+];
+
+function PolygonFilterPanelFactory(FilterPanelHeader, PolygonFilter, PanelHeaderAction) {
+  /** @type {import('./filter-panel-types').FilterPanelComponent} */
+  const PolygonFilterPanel = React.memo(
+    ({
+      idx,
+      datasets,
+      layers,
+      allAvailableFields,
+      filter,
+      removeFilter,
+      setFilter,
+      toggleFilterFeature
+    }) => {
+      const filterDatasets = 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}
+            allAvailableFields={allAvailableFields}
+            idx={idx}
+            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}
+                toggleFilterFeature={toggleFilterFeature}
+              />
+            </div>
+          </StyledFilterContent>
+        </div>
+      );
+    }
+  );
+
+  PolygonFilterPanel.displayName = 'PolygonFilterPanel';
+
+  return PolygonFilterPanel;
+}
+
+export default PolygonFilterPanelFactory;

package/src/components/filters/filter-panels/range-filter-panel.js

@@ -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 React, {useCallback} from 'react';
+import RangeFilterFactory from 'components/filters/range-filter';
+import FieldPanelWithFieldSelectFactory from 'components/filters/filter-panels/filter-panel-with-field-select';
+
+RangeFilterPanelFactory.deps = [FieldPanelWithFieldSelectFactory, RangeFilterFactory];
+
+function RangeFilterPanelFactory(FieldPanelWithFieldSelect, RangeFilter) {
+  /** @type {import('./filter-panel-types').FilterPanelComponent} */
+  const RangeFilterPanel = React.memo(
+    ({
+      idx,
+      datasets,
+      allAvailableFields,
+      filter,
+      isAnyFilterAnimating,
+      enlargeFilter,
+      removeFilter,
+      setFilter,
+      toggleAnimation
+    }) => {
+      const onSetFilter = useCallback(value => setFilter(idx, 'value', value), [idx, setFilter]);
+
+      return (
+        <div className="range-filter-panel">
+          <FieldPanelWithFieldSelect
+            allAvailableFields={allAvailableFields}
+            datasets={datasets}
+            filter={filter}
+            idx={idx}
+            removeFilter={removeFilter}
+            setFilter={setFilter}
+          >
+            {filter.type && !filter.enlarged && (
+              <div className="filter-panel__filter">
+                <RangeFilter
+                  filter={filter}
+                  idx={idx}
+                  isAnyFilterAnimating={isAnyFilterAnimating}
+                  toggleAnimation={toggleAnimation}
+                  setFilter={onSetFilter}
+                />
+              </div>
+            )}
+          </FieldPanelWithFieldSelect>
+        </div>
+      );
+    }
+  );
+
+  RangeFilterPanel.displayName = 'RangeFilterPanel';
+
+  return RangeFilterPanel;
+}
+
+export default RangeFilterPanelFactory;