@carto/kepler.gl 0.0.77 → 0.0.78-0

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

@@ -0,0 +1,90 @@
+// 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';
+import {DatasetItemProps, SourceDataSelectorProps} from './types';
+
+const defaultPlaceHolder = 'Select A Data Source';
+
+SourceDataSelectorFactory.deps = [DatasetTagFactory];
+
+export default function SourceDataSelectorFactory(
+  DatasetTag: ReturnType<typeof DatasetTagFactory>
+): React.ComponentType<SourceDataSelectorProps> {
+  const DatasetItem = ({value}: DatasetItemProps) => <DatasetTag dataset={value} />;
+
+  class SourceDataSelector extends Component<SourceDataSelectorProps> {
+    static defaultProps = {
+      defaultValue: defaultPlaceHolder
+    };
+
+    /* selectors */
+    dataIdSelector = (props: SourceDataSelectorProps) => props.dataId;
+    datasetsSelector = (props: SourceDataSelectorProps) => props.datasets;
+    dsOptionsSelector = createSelector(this.datasetsSelector, datasets =>
+      Object.values(datasets).map(ds => ({
+        label: ds.label,
+        value: ds.id,
+        color: ds.color
+      }))
+    );
+    dsSelectedItemsSelector = createSelector(
+      this.dataIdSelector,
+      this.datasetsSelector,
+      (dataId, datasets) =>
+        dataId ? ((Array.isArray(dataId) && dataId) || [dataId]).map(id => datasets[id]) : []
+    );
+
+    render() {
+      const {disabled, onSelect, defaultValue, inputTheme} = this.props;
+      const dsOptions = this.dsOptionsSelector(this.props);
+      const selectedItems = this.dsSelectedItemsSelector(this.props);
+
+      return (
+        <SidePanelSection className="data-source-selector">
+          <PanelLabel>
+            <FormattedMessage id={'misc.dataSource'} />
+          </PanelLabel>
+          <ItemSelector
+            inputTheme={inputTheme}
+            selectedItems={selectedItems}
+            options={dsOptions}
+            getOptionValue={'value'}
+            filterOption={'label'}
+            multiSelect={false}
+            onChange={onSelect}
+            placeholder={defaultValue}
+            disabled={Boolean(disabled)}
+            displayOption={'label'}
+            DropDownLineItemRenderComponent={DatasetItem}
+          />
+        </SidePanelSection>
+      );
+    }
+  }
+
+  return SourceDataSelector;
+}

package/src/components/side-panel/common/types.ts

@@ -0,0 +1,76 @@
+import React, {MouseEvent} from 'react';
+import KeplerTable from 'utils/table-utils/kepler-table';
+import {openDeleteModal} from 'actions/ui-state-actions';
+import * as VisStateActions from 'actions/vis-state-actions';
+import {Datasets} from 'reducers';
+import {ActionHandler} from 'actions';
+
+export type DatasetInfoProps = {
+  dataset: KeplerTable;
+};
+
+export type UpdateTableColorTypes = {
+  id: string;
+  children: React.ReactNode;
+};
+
+export type DatasetTagProps = {
+  id?: string;
+  dataset: KeplerTable;
+  updateTableColor?: ActionHandler<typeof VisStateActions.updateTableColor>;
+  onClick?: (e: MouseEvent) => void;
+  onClickSquare?: (e: MouseEvent) => void;
+};
+
+export type ShowDataTableProps = {
+  id: string;
+  showDatasetTable?: ActionHandler<typeof VisStateActions.showDatasetTable>;
+};
+
+export type RemoveDatasetProps = {
+  datasetKey: string;
+  removeDataset?: ActionHandler<typeof openDeleteModal>;
+};
+
+export type StyledDatasetTitleProps = {
+  clickable: boolean;
+};
+
+export type DatasetTitleProps = {
+  dataset: KeplerTable;
+  showDeleteDataset: boolean;
+  onTitleClick?: () => void;
+  showDatasetTable?: ActionHandler<typeof VisStateActions.showDatasetTable>;
+  updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
+  removeDataset?: ActionHandler<typeof openDeleteModal>;
+};
+
+export type SourceDataCatalogProps = {
+  datasets: Datasets;
+  showDeleteDataset?: boolean;
+  onTitleClick?: () => void;
+  showDatasetTable?: ActionHandler<typeof VisStateActions.showDatasetTable>;
+  updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
+  removeDataset?: ActionHandler<typeof openDeleteModal>;
+};
+
+export type DatasetItemProps = {
+  value: KeplerTable;
+};
+
+export type SourceDataSelectorProps = {
+  dataId: string | string[] | null;
+  datasets: Datasets;
+  disabled: boolean;
+  defaultValue?: string;
+  inputTheme: string;
+  onSelect: (
+    items:
+      | ReadonlyArray<string | number | boolean | object>
+      | string
+      | number
+      | boolean
+      | object
+      | null
+  ) => void;
+};

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

@@ -0,0 +1,120 @@
+// 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 {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';
+import {Datasets, Filter} from 'reducers';
+import {Layer} from 'layers';
+import * as VisStateActions from 'actions/vis-state-actions';
+import {ActionHandler} from 'actions';
+
+type FilterManagerProps = {
+  filters: Filter[];
+  datasets: Datasets;
+  layers: Layer[];
+  showDatasetTable: ActionHandler<typeof VisStateActions.showDatasetTable>;
+  updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
+  visStateActions: typeof VisStateActions;
+};
+
+FilterManagerFactory.deps = [SourceDataCatalogFactory, FilterPanelFactory];
+
+function FilterManagerFactory(
+  SourceDataCatalog: ReturnType<typeof SourceDataCatalogFactory>,
+  FilterPanel: ReturnType<typeof FilterPanelFactory>
+) {
+  const FilterManager = ({
+    filters = [],
+    datasets,
+    layers,
+    showDatasetTable,
+    updateTableColor,
+    visStateActions
+  }: FilterManagerProps) => {
+    const {
+      addFilter,
+      enlargeFilter,
+      removeFilter,
+      setFilter,
+      toggleFilterAnimation,
+      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}
+          updateTableColor={updateTableColor}
+        />
+        <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={() => toggleFilterAnimation(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>
+    );
+  };
+
+  return FilterManager;
+}
+
+export default FilterManagerFactory;

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

@@ -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, {ComponentType} 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, StyledPanelHeaderProps} from 'components/common/styled-components';
+import {Filter, RGBColor} from 'reducers';
+import KeplerTable from 'utils/table-utils/kepler-table';
+
+interface StyledFilterHeaderProps extends StyledPanelHeaderProps {
+  $labelRCGColorValues: RGBColor[];
+}
+
+export const StyledFilterHeader = styled(StyledPanelHeader)<StyledFilterHeaderProps>`
+  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;
+`;
+
+type FilterPanelHeaderProps = {
+  children: React.ReactNode;
+  datasets: KeplerTable[];
+  filter: Filter;
+  removeFilter: () => void;
+  actionIcons?: Record<string, ComponentType>;
+};
+
+FilterPanelHeaderFactory.deps = [PanelHeaderActionFactory];
+
+function FilterPanelHeaderFactory(
+  PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>
+): React.ComponentType<FilterPanelHeaderProps> {
+  const defaultActionIcons = {
+    delete: Trash
+  };
+  const FilterPanelHeader = ({
+    children,
+    datasets,
+    filter,
+    removeFilter,
+    actionIcons = defaultActionIcons
+  }: FilterPanelHeaderProps) => (
+    <StyledFilterHeader
+      className="filter-panel__header"
+      $labelRCGColorValues={datasets.map((d: KeplerTable) => 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.tsx

@@ -0,0 +1,125 @@
+// 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 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';
+import {Filter} from 'reducers/vis-state-updaters';
+import {Field} from 'utils/table-utils/kepler-table';
+import {FilterPanelProps} from 'components/filters/filter-panels/types';
+import {Layer} from 'layers';
+
+const StyledFilterPanel = styled.div`
+  margin-bottom: 12px;
+  border-radius: 1px;
+`;
+
+interface FilterPanelPropsImpl extends Omit<FilterPanelProps, 'allAvailableFields'> {
+  filters: Filter[];
+  layers: ReadonlyArray<Layer>;
+  isAnyFilterAnimating: boolean;
+  enlargeFilter: () => void;
+  toggleAnimation: () => void;
+  toggleFilterFeature: () => void;
+}
+
+FilterPanelFactory.deps = [
+  NewFilterPanelFactory,
+  TimeRangeFilterPanelFactory,
+  SingleSelectFilterPanelFactory,
+  MultiSelectFilterPanelFactory,
+  RangeFilterPanelFactory,
+  PolygonFilterPanelFactory
+];
+
+function FilterPanelFactory(
+  NewFilterPanel: ReturnType<typeof NewFilterPanelFactory>,
+  TimeRangeFilterPanel: ReturnType<typeof TimeRangeFilterPanelFactory>,
+  SingleSelectFilterPanel: ReturnType<typeof SingleSelectFilterPanelFactory>,
+  MultiSelectFilterPanel: ReturnType<typeof MultiSelectFilterPanelFactory>,
+  RangeFilterPanel: ReturnType<typeof RangeFilterPanelFactory>,
+  PolygonFilterPanel: ReturnType<typeof PolygonFilterPanelFactory>
+): React.ComponentType<FilterPanelPropsImpl> {
+  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<FilterPanelPropsImpl> {
+    /* selectors */
+    fieldsSelector = (props: FilterPanelPropsImpl) => {
+      const datasetId = props.filter.dataId[0];
+      if (!datasetId) {
+        return [];
+      }
+      return get(props, ['datasets', datasetId, 'fields'], []);
+    };
+
+    filterSelector = (props: FilterPanelPropsImpl) => props.filters;
+    nameSelector = (props: FilterPanelPropsImpl) => props.filter.name;
+    dataIdSelector = (props: FilterPanelPropsImpl) => 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: Field) =>
+            f.type &&
+            f.type !== ALL_FIELD_TYPES.geojson &&
+            (name.includes(f.name) ||
+              !filters.find(d => d.name.includes(f.name) && d.dataId.includes(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;

package/src/components/side-panel/interaction-manager.tsx

@@ -0,0 +1,59 @@
+// 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 {Datasets, InteractionConfig} from 'reducers';
+import InteractionPanelFactory from './interaction-panel/interaction-panel';
+import * as VisStateActions from 'actions/vis-state-actions';
+
+type InteractionManagerProps = {
+  interactionConfig: InteractionConfig;
+  datasets: Datasets;
+  visStateActions: typeof VisStateActions;
+};
+
+InteractionManagerFactory.deps = [InteractionPanelFactory];
+
+function InteractionManagerFactory(InteractionPanel: ReturnType<typeof InteractionPanelFactory>) {
+  const InteractionManager = ({
+    interactionConfig,
+    datasets,
+    visStateActions
+  }: InteractionManagerProps) => {
+    const {interactionConfigChange: onConfigChange} = visStateActions;
+
+    return (
+      <div className="interaction-manager">
+        {Object.keys(interactionConfig).map(key => (
+          <InteractionPanel
+            datasets={datasets}
+            config={interactionConfig[key]}
+            key={key}
+            onConfigChange={onConfigChange}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  return InteractionManager;
+}
+
+export default InteractionManagerFactory;

package/src/components/side-panel/interaction-panel/brush-config.tsx

@@ -0,0 +1,58 @@
+// 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 {PanelLabel, SidePanelSection} from 'components/common/styled-components';
+import {BRUSH_CONFIG} from 'utils/interaction-utils';
+import {FormattedMessage} from 'localization';
+
+BrushConfigFactory.deps = [RangeSliderFactory];
+
+type BrushConfigProps = {
+  config: {
+    size: number;
+  };
+  onChange: (config: {size: number}) => void;
+};
+
+function BrushConfigFactory(RangeSlider: ReturnType<typeof RangeSliderFactory>) {
+  const BrushConfig = ({config, onChange}: BrushConfigProps) => (
+    <SidePanelSection>
+      <PanelLabel>
+        <FormattedMessage id={'misc.brushRadius'} />
+      </PanelLabel>
+      <RangeSlider
+        range={BRUSH_CONFIG.range}
+        value0={0}
+        value1={config.size || 10 / 2}
+        step={0.1}
+        isRanged={false}
+        onChange={value => onChange({...config, size: value[1]})}
+        inputTheme="secondary"
+      />
+    </SidePanelSection>
+  );
+
+  return BrushConfig;
+}
+
+export default BrushConfigFactory;