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

package/src/components/side-panel/layer-panel/layer-visibility-by-zoom.js

@@ -0,0 +1,123 @@
+// 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 PropTypes from 'prop-types';
+import styled from 'styled-components';
+import RangeSliderFactory from 'components/common/range-slider';
+import {PanelLabel, SidePanelSection} from 'components/common/styled-components';
+import {FormattedMessage} from 'localization';
+import {ZOOM_LEVEL_LIMITS} from 'constants/default-settings';
+
+const SliderWrapper = styled.div`
+  position: relative;
+`;
+
+const TopRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+LayerVisibilityByZoomFactory.deps = [RangeSliderFactory];
+
+function LayerVisibilityByZoomFactory(RangeSlider) {
+  const LayerVisibilityByZoom = ({
+    updateLayerConfig,
+    layer,
+    rangeMinValue,
+    rangeMaxValue,
+    iconComponent,
+    disabled
+  }) => {
+    const {config} = layer;
+    const minLimit = rangeMinValue || ZOOM_LEVEL_LIMITS.min;
+    const maxLimit = rangeMaxValue || ZOOM_LEVEL_LIMITS.max;
+
+    const [zoomMin, setZoomMin] = React.useState(
+      config.visibilityByZoom?.min
+        ? config.visibilityByZoom?.min < minLimit
+          ? minLimit
+          : config.visibilityByZoom?.min
+        : minLimit
+    );
+    const [zoomMax, setZoomMax] = React.useState(
+      config.visibilityByZoom?.max
+        ? config.visibilityByZoom?.max > maxLimit
+          ? maxLimit
+          : config.visibilityByZoom?.max
+        : maxLimit
+    );
+
+    const _onChange = useCallback(
+      val => {
+        setZoomMin(val[0]);
+        setZoomMax(val[1]);
+        updateLayerConfig({visibilityByZoom: {min: val[0], max: val[1]}});
+      },
+      [updateLayerConfig]
+    );
+
+    const IconElement = () => iconComponent || null;
+
+    return (
+      <div>
+        <SidePanelSection disabled={disabled}>
+          <div className="layer-visibility__zoom">
+            <TopRow>
+              <PanelLabel>
+                <FormattedMessage id={'layerVisibility.title'} />{' '}
+                <IconElement data-test="icon-help-button" />
+              </PanelLabel>
+            </TopRow>
+            <SliderWrapper>
+              <RangeSlider
+                range={[
+                  rangeMinValue || ZOOM_LEVEL_LIMITS.min,
+                  rangeMaxValue || ZOOM_LEVEL_LIMITS.max
+                ]}
+                value0={zoomMin}
+                value1={zoomMax}
+                min={minLimit}
+                max={maxLimit}
+                onChange={_onChange}
+                isRanged={true}
+                showTooltip
+                showInput
+                inputTheme="secondary"
+                inputSize="tiny"
+              />
+            </SliderWrapper>
+          </div>
+        </SidePanelSection>
+      </div>
+    );
+  };
+
+  LayerVisibilityByZoom.propTypes = {
+    updateLayerConfig: PropTypes.func.isRequired,
+    rangeMinValue: PropTypes.number,
+    rangeMaxValue: PropTypes.number,
+    iconComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
+  };
+
+  return LayerVisibilityByZoom;
+}
+
+export default LayerVisibilityByZoomFactory;

package/src/components/side-panel/layer-panel/single-color-palette.js

@@ -0,0 +1,98 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {range} from 'd3-array';
+import styled from 'styled-components';
+import {hexToRgb} from 'utils/color-utils';
+
+import {ColorsByTheme, Themes} from 'constants/color-palette';
+
+const PALETTE_HEIGHT = '8px';
+const ROWS = 22;
+
+const StyledColorPalette = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 12px;
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+
+const StyledColorColumn = styled.div`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const StyledColorBlock = styled.div`
+  flex-grow: 1;
+  height: ${PALETTE_HEIGHT};
+  border-width: 1px;
+  border-style: solid;
+`;
+SingleColorPaletteFactory.deps = [];
+
+function SingleColorPaletteFactory() {
+  class SingleColorPalette extends Component {
+    static propTypes = {
+      onSelectColor: PropTypes.func.isRequired,
+      // hex value
+      selectedColor: PropTypes.string.isRequired
+    };
+
+    render() {
+      const {selectedColor, onSelectColor} = this.props;
+      return (
+        <StyledColorPalette className="single-color-palette">
+          {Themes.map((theme, col) => (
+            <StyledColorColumn key={theme} className="single-color-palette__column">
+              {range(1, ROWS + 1, 1).map((key, i) => (
+                <StyledColorBlock
+                  className="single-color-palette__block"
+                  style={{
+                    backgroundColor: ColorsByTheme[theme][key],
+                    borderColor:
+                      selectedColor === ColorsByTheme[theme][key].toUpperCase()
+                        ? 'white'
+                        : ColorsByTheme[theme][key]
+                  }}
+                  key={`${theme}_${key}`}
+                  selected={selectedColor === ColorsByTheme[theme][key].toUpperCase()}
+                  onClick={e => onSelectColor(hexToRgb(ColorsByTheme[theme][key]), e)}
+                />
+              ))}
+            </StyledColorColumn>
+          ))}
+        </StyledColorPalette>
+      );
+    }
+  }
+  return SingleColorPalette;
+}
+
+// SingleColorPalette.propTypes = propTypes;
+
+export default SingleColorPaletteFactory;

package/src/components/side-panel/layer-panel/text-label-panel.js

@@ -0,0 +1,179 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'localization';
+
+import {
+  Button,
+  PanelLabel,
+  SBFlexboxItem,
+  SidePanelSection,
+  SpaceBetweenFlexbox
+} from 'components/common/styled-components';
+import {Add} from 'components/common/icons';
+import ItemSelector from 'components/common/item-selector/item-selector';
+import LayerConfigGroupFactory, {
+  ConfigGroupCollapsibleContent,
+  ConfigGroupCollapsibleHeader
+} from './layer-config-group';
+import RangeSliderFactory from 'components/common/range-slider';
+
+import {LAYER_TEXT_CONFIGS} from 'layers/layer-factory';
+import FieldSelectorFactory from '../../common/field-selector';
+import ColorSelectorFactory from './color-selector';
+
+TextLabelPanelFactory.deps = [
+  RangeSliderFactory,
+  LayerConfigGroupFactory,
+  FieldSelectorFactory,
+  ColorSelectorFactory
+];
+function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector, ColorSelector) {
+  class TextLabelPanel extends Component {
+    static propTypes = {
+      fields: PropTypes.arrayOf(PropTypes.object),
+      textLabel: PropTypes.arrayOf(PropTypes.object),
+      updateLayerTextLabel: PropTypes.func.isRequired
+    };
+
+    static defaultProps = {
+      AddButton: props => (
+        <Button {...props} link>
+          <Add height="12px" />
+          <FormattedMessage id="panel.text.addMoreLabel" />
+        </Button>
+      )
+    };
+
+    render() {
+      const {updateLayerTextLabel, textLabel, fields, AddButton} = this.props;
+      const currentFields = textLabel.map(tl => tl.field && tl.field.name).filter(d => d);
+
+      return (
+        <LayerConfigGroup label={'panel.text.label'} collapsible>
+          <ConfigGroupCollapsibleHeader>
+            <FieldSelector
+              fields={fields}
+              value={currentFields}
+              onSelect={selected => updateLayerTextLabel('all', 'fields', selected)}
+              multiSelect
+            />
+          </ConfigGroupCollapsibleHeader>
+          <ConfigGroupCollapsibleContent>
+            {textLabel.map((tl, idx) => (
+              <div
+                key={`${tl.field ? tl.field.name : 'null'}-${idx}`}
+                className="side-panel-section-group"
+              >
+                <PanelLabel>
+                  <FormattedMessage id={`panel.text.${idx === 0 ? 'main' : 'secondary'}Label`} />
+                </PanelLabel>
+                <SidePanelSection>
+                  <FieldSelector
+                    fields={fields}
+                    value={(tl.field && tl.field.name) || 'placeholder.selectField'}
+                    placeholder={'placeholder.empty'}
+                    onSelect={v => updateLayerTextLabel(idx, 'field', v)}
+                    erasable
+                  />
+                </SidePanelSection>
+                <SidePanelSection>
+                  <PanelLabel>
+                    <FormattedMessage id="panel.text.fontSize" />
+                  </PanelLabel>
+                  <RangeSlider
+                    {...LAYER_TEXT_CONFIGS.fontSize}
+                    value1={tl.size}
+                    isRange={false}
+                    onChange={v => updateLayerTextLabel(idx, 'size', v[1])}
+                  />
+                </SidePanelSection>
+                <SidePanelSection>
+                  <PanelLabel>
+                    <FormattedMessage id="panel.text.fontColor" />
+                  </PanelLabel>
+                  <ColorSelector
+                    colorSets={[
+                      {
+                        selectedColor: tl.color,
+                        setColor: v => updateLayerTextLabel(idx, 'color', v)
+                      }
+                    ]}
+                  />
+                </SidePanelSection>
+                <SidePanelSection>
+                  <PanelLabel>
+                    <FormattedMessage id="panel.text.outlineColor" />
+                  </PanelLabel>
+                  <ColorSelector
+                    colorSets={[
+                      {
+                        selectedColor: tl.outlineColor,
+                        setColor: v => updateLayerTextLabel(idx, 'outlineColor', v)
+                      }
+                    ]}
+                  />
+                </SidePanelSection>
+                {idx === 0 && (
+                  <SidePanelSection>
+                    <SpaceBetweenFlexbox>
+                      <SBFlexboxItem>
+                        <PanelLabel>
+                          <FormattedMessage id="panel.text.textAnchor" />
+                        </PanelLabel>
+                        <ItemSelector
+                          {...LAYER_TEXT_CONFIGS.textAnchor}
+                          selectedItems={tl.anchor}
+                          onChange={val => updateLayerTextLabel(idx, 'anchor', val)}
+                        />
+                      </SBFlexboxItem>
+                      <SBFlexboxItem>
+                        <PanelLabel>
+                          <FormattedMessage id="panel.text.alignment" />
+                        </PanelLabel>
+                        <ItemSelector
+                          {...LAYER_TEXT_CONFIGS.textAlignment}
+                          selectedItems={tl.alignment}
+                          onChange={val => updateLayerTextLabel(idx, 'alignment', val)}
+                        />
+                      </SBFlexboxItem>
+                    </SpaceBetweenFlexbox>
+                  </SidePanelSection>
+                )}
+              </div>
+            ))}
+            <SidePanelSection>
+              <AddButton
+                disabled={textLabel.length >= 2}
+                onClick={val => updateLayerTextLabel(textLabel.length)}
+              />
+            </SidePanelSection>
+          </ConfigGroupCollapsibleContent>
+        </LayerConfigGroup>
+      );
+    }
+  }
+
+  return TextLabelPanel;
+}
+
+export default TextLabelPanelFactory;

package/src/components/side-panel/layer-panel/vis-config-by-field-selector.js

@@ -0,0 +1,163 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage, injectIntl} from 'react-intl';
+
+import {PanelLabel, PanelLabelWrapper, SidePanelSection} from 'components/common/styled-components';
+import InfoHelperFacotry from 'components/common/info-helper';
+import DimensionScaleSelector from './dimension-scale-selector';
+import {camelize} from 'utils/utils';
+import FieldSelectorFactory from '../../common/field-selector';
+import ColorDimensionScaleSelectorFactory from './color-dimension-scale-selector';
+
+VisConfigByFieldSelectorFactory.deps = [
+  InfoHelperFacotry,
+  FieldSelectorFactory,
+  ColorDimensionScaleSelectorFactory
+];
+function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector, ColorDimensionScaleSelector) {
+  class VisConfigByFieldSelector extends Component {
+    static propTypes = {
+      channel: PropTypes.string.isRequired,
+      fields: PropTypes.arrayOf(PropTypes.any).isRequired,
+      id: PropTypes.string.isRequired,
+      property: PropTypes.string.isRequired,
+      showScale: PropTypes.bool.isRequired,
+      showScaleCustomizable: PropTypes.bool.isRequired,
+      updateField: PropTypes.func.isRequired,
+      updateScale: PropTypes.func.isRequired,
+      updateCustomPalette: PropTypes.func.isRequired,
+
+      // optional
+      scaleType: PropTypes.string,
+      selectedField: PropTypes.object,
+      description: PropTypes.string,
+      label: PropTypes.string,
+      placeholder: PropTypes.string,
+      isLoading: PropTypes.bool,
+      fieldsAggregated: PropTypes.bool,
+      aggregator: PropTypes.string
+    };
+
+    _updateVisByField = val => {
+      this.props.updateField(val);
+    };
+
+    _onFieldSelectorFocused = () => {
+      this.setState({fieldSelectorActive: true});
+    };
+
+    _onFieldSelectorBlur = () => {
+      this.setState({fieldSelectorActive: false});
+    };
+
+    render() {
+      const {
+        property,
+        showScale,
+        showScaleCustomizable,
+        selectedField,
+        description,
+        label,
+        intl,
+        scaleOptions = [],
+        domain,
+        range
+      } = this.props;
+
+      return (
+        <SidePanelSection>
+          <SidePanelSection>
+            <PanelLabelWrapper>
+              <PanelLabel active={this.state?.fieldSelectorActive}>
+                {(label && <FormattedMessage id={label} />) || (
+                  <FormattedMessage
+                    id="layer.propertyBasedOn"
+                    values={{
+                      property: intl.formatMessage({
+                        id: `property.${camelize(property)}`,
+                        defaultMessage: property
+                      })
+                    }}
+                  />
+                )}
+              </PanelLabel>
+              {description && (
+                <InfoHelper
+                  description={description}
+                  property={property}
+                  id={`${this.props.id}-${property}`}
+                />
+              )}
+            </PanelLabelWrapper>
+            <FieldSelector
+              fields={this.props.fields}
+              value={selectedField && selectedField.name}
+              placeholder={this.props.placeholder}
+              onSelect={this._updateVisByField}
+              erasable
+              isLoading={this.props.isLoading}
+              withAggregator={this.props.fieldsAggregated}
+              aggregator={this.props.fieldsAggregated && this.props.aggregator}
+              onFocus={this._onFieldSelectorFocused}
+              onBlur={this._onFieldSelectorBlur}
+            />
+          </SidePanelSection>
+
+          {showScale && !this.props.isLoading ? (
+            <div>
+              <DimensionScaleSelector
+                scaleType={this.props.scaleType}
+                options={scaleOptions}
+                label={`${property} scale`}
+                onSelect={this.props.updateScale}
+                disabled={scaleOptions.length < 2}
+              />
+            </div>
+          ) : null}
+
+          {showScaleCustomizable && !this.props.isLoading && (
+            <div>
+              <ColorDimensionScaleSelector
+                label={
+                  <FormattedMessage
+                    id={`scale.${camelize(`${property} scale`)}`}
+                    defaultMessage={label}
+                  />
+                }
+                scaleType={this.props.scaleType}
+                options={scaleOptions}
+                domain={domain}
+                range={range}
+                onSelect={this.props.updateScale}
+                onSetCustomPalette={this.props.updateCustomPalette}
+              />
+            </div>
+          )}
+        </SidePanelSection>
+      );
+    }
+  }
+  return injectIntl(VisConfigByFieldSelector);
+}
+
+export default VisConfigByFieldSelectorFactory;

package/src/components/side-panel/layer-panel/vis-config-slider.js

@@ -0,0 +1,82 @@
+// 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 PropTypes from 'prop-types';
+import {PanelLabel, SidePanelSection} from 'components/common/styled-components';
+
+import RangeSliderFactory from 'components/common/range-slider';
+import {FormattedMessage} from 'localization';
+
+const propTypes = {
+  layer: PropTypes.object.isRequired,
+  property: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.func]),
+  range: PropTypes.arrayOf(PropTypes.number).isRequired,
+  step: PropTypes.number,
+  isRanged: PropTypes.bool,
+  disabled: PropTypes.bool,
+  inputTheme: PropTypes.bool
+};
+
+VisConfigSliderFactory.deps = [RangeSliderFactory];
+
+export default function VisConfigSliderFactory(RangeSlider) {
+  const VisConfigSlider = ({
+    layer: {config},
+    property,
+    label,
+    range,
+    step,
+    isRanged,
+    disabled,
+    onChange,
+    inputTheme
+  }) => (
+    <SidePanelSection disabled={Boolean(disabled)}>
+      {label ? (
+        <PanelLabel>
+          {typeof label === 'string' ? (
+            <FormattedMessage id={label} />
+          ) : typeof label === 'function' ? (
+            <FormattedMessage id={label(config)} />
+          ) : (
+            <FormattedMessage id={`property.${property}`} />
+          )}
+        </PanelLabel>
+      ) : null}
+      <RangeSlider
+        range={range}
+        value0={isRanged ? config.visConfig[property][0] : range[0]}
+        value1={isRanged ? config.visConfig[property][1] : config.visConfig[property]}
+        step={step}
+        isRanged={Boolean(isRanged)}
+        onChange={value => onChange({[property]: isRanged ? value : value[1]})}
+        inputTheme={inputTheme}
+        showInput
+      />
+    </SidePanelSection>
+  );
+
+  VisConfigSlider.propTypes = propTypes;
+
+  return VisConfigSlider;
+}