@carto/kepler.gl 0.0.80 → 0.1.0-alpha.1

package/src/components/filters/filter-panels/range-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 RangeFilterFactory from 'components/filters/range-filter';
+import {RangeFilter} from 'reducers';
+import FieldPanelWithFieldSelectFactory from 'components/filters/filter-panels/filter-panel-with-field-select';
+import {FilterPanelComponent} from './types';
+
+RangeFilterPanelFactory.deps = [FieldPanelWithFieldSelectFactory, RangeFilterFactory];
+
+function RangeFilterPanelFactory(
+  FieldPanelWithFieldSelect: ReturnType<typeof FieldPanelWithFieldSelectFactory>,
+  RangeFilter: ReturnType<typeof RangeFilterFactory>
+) {
+  const RangeFilterPanel: FilterPanelComponent<RangeFilter> = React.memo(
+    ({idx, datasets, allAvailableFields, filter, removeFilter, setFilter}) => {
+      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} setFilter={onSetFilter} />
+              </div>
+            )}
+          </FieldPanelWithFieldSelect>
+        </div>
+      );
+    }
+  );
+
+  RangeFilterPanel.displayName = 'RangeFilterPanel';
+
+  return RangeFilterPanel;
+}
+
+export default RangeFilterPanelFactory;

package/src/components/filters/filter-panels/single-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 SingleSelectFilterFactory from 'components/filters/single-select-filter';
+import {SelectFilter} from 'reducers';
+import FieldPanelWithFieldSelectFactory from 'components/filters/filter-panels/filter-panel-with-field-select';
+import {FilterPanelComponent} from './types';
+
+SingleSelectFilterPanelFactory.deps = [FieldPanelWithFieldSelectFactory, SingleSelectFilterFactory];
+
+function SingleSelectFilterPanelFactory(
+  FieldPanelWithFieldSelect: ReturnType<typeof FieldPanelWithFieldSelectFactory>,
+  SingleSelectFilter: ReturnType<typeof SingleSelectFilterFactory>
+) {
+  const SingleSelectFilterPanel: FilterPanelComponent<SelectFilter> = React.memo(
+    ({idx, datasets, allAvailableFields, filter, setFilter, removeFilter}) => {
+      const onSetFilter = useCallback(value => setFilter(idx, 'value', value), [idx, setFilter]);
+
+      return (
+        <div className="single-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">
+                <SingleSelectFilter filter={filter} setFilter={onSetFilter} />
+              </div>
+            )}
+          </FieldPanelWithFieldSelect>
+        </div>
+      );
+    }
+  );
+
+  SingleSelectFilterPanel.displayName = 'SingleSelectFilterPanel';
+
+  return SingleSelectFilterPanel;
+}
+
+export default SingleSelectFilterPanelFactory;

package/src/components/filters/filter-panels/time-range-filter-panel.tsx

@@ -0,0 +1,92 @@
+// 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 TimeRangeFilterFactory from 'components/filters/time-range-filter';
+import {Clock} from 'components/common/icons';
+import FieldPanelWithFieldSelectFactory from 'components/filters/filter-panels/filter-panel-with-field-select';
+import {TimeRangeFilterPanelComponent} from './types';
+
+TimeRangeFilterPanelFactory.deps = [FieldPanelWithFieldSelectFactory, TimeRangeFilterFactory];
+
+function TimeRangeFilterPanelFactory(
+  FieldPanelWithFieldSelect: ReturnType<typeof FieldPanelWithFieldSelectFactory>,
+  TimeRangeFilter: ReturnType<typeof TimeRangeFilterFactory>
+) {
+  const TimeRangeFilterPanel: TimeRangeFilterPanelComponent = React.memo(
+    ({
+      idx,
+      datasets,
+      allAvailableFields,
+      filter,
+      enlargeFilter,
+      setFilter,
+      removeFilter,
+      toggleAnimation
+    }) => {
+      const onSetFilter = useCallback(value => setFilter(idx, 'value', value), [idx, setFilter]);
+
+      const panelActions = useMemo(
+        () => [
+          {
+            id: filter.id,
+            onClick: enlargeFilter,
+            tooltip: 'tooltip.timePlayback',
+            iconComponent: Clock,
+            active: filter.enlarged
+          }
+        ],
+        [filter.id, filter.enlarged, enlargeFilter]
+      );
+
+      return (
+        <>
+          <FieldPanelWithFieldSelect
+            allAvailableFields={allAvailableFields}
+            datasets={datasets}
+            filter={filter}
+            idx={idx}
+            removeFilter={removeFilter}
+            setFilter={setFilter}
+            panelActions={panelActions}
+          >
+            {filter.type && !filter.enlarged && (
+              <div className="filter-panel__filter">
+                <TimeRangeFilter
+                  filter={filter}
+                  toggleAnimation={toggleAnimation}
+                  setFilter={onSetFilter}
+                  isAnimatable
+                  hideTimeTitle
+                />
+              </div>
+            )}
+          </FieldPanelWithFieldSelect>
+        </>
+      );
+    }
+  );
+
+  TimeRangeFilterPanel.displayName = 'TimeRangeFilterPanel';
+
+  return TimeRangeFilterPanel;
+}
+
+export default TimeRangeFilterPanelFactory;

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

@@ -0,0 +1,40 @@
+import {FunctionComponent, ComponentType} from 'react';
+import {Datasets, Filter, PolygonFilter, TimeRangeFilter} from 'reducers';
+import {Layer} from 'layers';
+import {Field} from 'utils/table-utils/kepler-table';
+
+interface PanelAction {
+  id: string;
+  tooltip: string;
+  onClick: () => void;
+  iconComponent: ComponentType;
+  active: boolean;
+}
+
+export interface FilterPanelProps<F = Filter> {
+  idx: number;
+  datasets: Datasets;
+  allAvailableFields: Field[];
+  filter: F;
+  removeFilter: () => void;
+  setFilter: (idx: number, field: string, value: any) => void;
+}
+export interface PolygonFilterPanelProps extends FilterPanelProps<PolygonFilter> {
+  layers: ReadonlyArray<Layer>;
+  toggleFilterFeature: () => void;
+}
+export interface TimeRangeFilterPanelProps extends FilterPanelProps<TimeRangeFilter> {
+  enlargeFilter: () => void;
+  toggleAnimation: () => void;
+}
+export interface FilterPanelWithFieldSelectProps extends FilterPanelProps {
+  children?: React.ReactNode;
+  panelActions?: ReadonlyArray<PanelAction>;
+}
+
+export type FilterPanelComponent<F> = FunctionComponent<FilterPanelProps<F>>;
+export type PolygonFilterPanelComponent = FunctionComponent<PolygonFilterPanelProps>;
+export type TimeRangeFilterPanelComponent = FunctionComponent<TimeRangeFilterPanelProps>;
+export type FilterPanelWithFieldSelectComponent = FunctionComponent<
+  FilterPanelWithFieldSelectProps
+>;

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

@@ -0,0 +1,37 @@
+// 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 ItemSelector from '../common/item-selector/item-selector';
+import {PanelLabel} from '../common/styled-components';
+import {FormattedMessage} from 'localization';
+import {MultiSelectFilterProps} from './types';
+
+export default function MultiSelectFilterFactory() {
+  const MultiSelectFilter: React.FC<MultiSelectFilterProps> = ({filter, setFilter}) => (
+    <div>
+      <PanelLabel htmlFor={`filter-${filter.id}`}>
+        <FormattedMessage id={'misc.valuesIn'} />
+      </PanelLabel>
+      <ItemSelector options={filter.domain} selectedItems={filter.value} onChange={setFilter} />
+    </div>
+  );
+  return MultiSelectFilter;
+}

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

@@ -0,0 +1,74 @@
+// 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 ItemSelector from 'components/common/item-selector/item-selector';
+import {Layer} from 'layers';
+import {LAYER_TYPES} from 'layers/types';
+import {PolygonFilterProps} from './types';
+import {StyledFilterPanel} from './components';
+
+const layerFilter = (layer: Layer) => layer.type === LAYER_TYPES.point;
+const isAlreadySelected = (selectedLayers: Layer[], layerId: string) =>
+  selectedLayers.findIndex(l => l.id === layerId) === -1;
+
+function PolygonFilterFactory() {
+  const PolygonFilter: React.FC<PolygonFilterProps> = React.memo(({filter, layers, setLayers}) => {
+    const setNewLayers = useCallback(
+      newLayers => {
+        return setLayers(newLayers.map((l: Layer) => l.id));
+      },
+      [setLayers]
+    );
+
+    const selectedLayers = useMemo(() => layers.filter(l => filter.layerId?.includes(l.id)), [
+      filter,
+      layers
+    ]);
+
+    const availableLayers = useMemo(() => {
+      // remove already added layers and filter out non point layers
+      return layers.filter(
+        layer => layerFilter(layer) && isAlreadySelected(selectedLayers, layer.id)
+      );
+    }, [layers, selectedLayers]);
+
+    return (
+      <div>
+        <StyledFilterPanel htmlFor={`filter-${filter.id}`}>Layers:</StyledFilterPanel>
+        <ItemSelector
+          options={availableLayers}
+          selectedItems={selectedLayers}
+          onChange={setNewLayers}
+          searchable={false}
+          multiSelect={true}
+          getOptionValue={(l: Layer) => l.id}
+          displayOption={(l: Layer) => l.config.label}
+        />
+      </div>
+    );
+  });
+
+  PolygonFilter.displayName = 'PolygonFilter';
+
+  return PolygonFilter;
+}
+
+export default PolygonFilterFactory;

package/src/components/filters/range-filter.tsx

@@ -0,0 +1,44 @@
+// 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 RangeSliderFactory from 'components/common/range-slider';
+import {RangeFilterProps} from './types';
+
+RangeFilterFactory.deps = [RangeSliderFactory];
+
+export default function RangeFilterFactory(RangeSlider: ReturnType<typeof RangeSliderFactory>) {
+  const RangeFilter: React.FC<RangeFilterProps> = ({filter, setFilter}) => (
+    <div>
+      <RangeSlider
+        range={filter.domain}
+        value0={filter.value[0]}
+        value1={filter.value[1]}
+        step={filter.step}
+        histogram={filter.histogram}
+        isEnlarged={filter.enlarged}
+        onChange={setFilter}
+        inputTheme="secondary"
+      />
+    </div>
+  );
+
+  return RangeFilter;
+}

package/src/components/filters/single-select-filter.tsx

@@ -0,0 +1,50 @@
+// 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 ItemSelector from '../common/item-selector/item-selector';
+import {PanelLabel, SidePanelSection} from '../common/styled-components';
+import {FormattedMessage} from 'localization';
+import {SingleSelectFilterProps} from './types';
+
+export default function SingleSelectFilterFactory() {
+  const SingleSelectFilter: React.FC<SingleSelectFilterProps> = ({filter, setFilter}) => (
+    <SidePanelSection>
+      <PanelLabel>
+        <FormattedMessage id={'misc.valueEquals'} />
+      </PanelLabel>
+      <ItemSelector
+        selectedItems={filter.value}
+        placeholder="placeholder.selectValue"
+        options={filter.domain}
+        multiSelect={false}
+        searchable={false}
+        displayOption={d => String(d)}
+        getOptionValue={d => d}
+        onChange={setFilter}
+        inputTheme="secondary"
+      />
+    </SidePanelSection>
+  );
+
+  SingleSelectFilter.displayName = 'SingleSelectFilter';
+
+  return SingleSelectFilter;
+}

package/src/components/filters/time-range-filter.tsx

@@ -0,0 +1,76 @@
+// 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 TimeRangeSliderFactory from 'components/common/time-range-slider';
+import {DEFAULT_TIME_FORMAT} from 'constants/default-settings';
+import {TimeRangeFilter} from 'reducers';
+import {TimeRangeFilterProps} from './types';
+
+/*
+ * TimeRangeFilter -> TimeRangeSlider -> RangeSlider
+ */
+export function timeRangeSliderFieldsSelector(filter: TimeRangeFilter) {
+  const hasUserFormat = typeof filter.timeFormat === 'string';
+  const timeFormat =
+    (hasUserFormat ? filter.timeFormat : filter.defaultTimeFormat) || DEFAULT_TIME_FORMAT;
+
+  return {
+    id: filter.id,
+    domain: filter.domain,
+    bins: filter.bins,
+    value: filter.value,
+    plotType: filter.plotType,
+    lineChart: filter.lineChart,
+    yAxis: filter.yAxis,
+    step: filter.step,
+    speed: filter.speed,
+    histogram: filter.enlarged ? filter.enlargedHistogram : filter.histogram,
+    isEnlarged: filter.enlarged,
+    animationWindow: filter.animationWindow,
+    isAnimating: filter.isAnimating,
+    timezone: filter.timezone,
+    timeFormat
+  };
+}
+
+TimeRangeFilterFactory.deps = [TimeRangeSliderFactory];
+
+function TimeRangeFilterFactory(TimeRangeSlider: ReturnType<typeof TimeRangeSliderFactory>) {
+  const TimeRangeFilter: React.FC<TimeRangeFilterProps> = ({
+    filter,
+    setFilter,
+    isAnimatable,
+    toggleAnimation,
+    hideTimeTitle
+  }) => (
+    <TimeRangeSlider
+      {...timeRangeSliderFieldsSelector(filter)}
+      onChange={setFilter}
+      toggleAnimation={toggleAnimation}
+      isAnimatable={isAnimatable}
+      hideTimeTitle={hideTimeTitle}
+    />
+  );
+
+  return TimeRangeFilter;
+}
+
+export default TimeRangeFilterFactory;