@carto/kepler.gl 0.0.76 → 0.0.78-0

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

@@ -1,46 +0,0 @@
-// 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 InteractionPanelFactory from './interaction-panel/interaction-panel';
-
-InteractionManagerFactory.deps = [InteractionPanelFactory];
-
-function InteractionManagerFactory(InteractionPanel) {
-  const InteractionManager = ({interactionConfig, datasets, visStateActions}) => {
-    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.js

@@ -1,51 +0,0 @@
-// 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];
-
-function BrushConfigFactory(RangeSlider) {
-  const BrushConfig = ({config, onChange}) => (
-    <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;

package/src/components/side-panel/interaction-panel/interaction-panel.js

@@ -1,115 +0,0 @@
-// 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 styled from 'styled-components';
-import Switch from 'components/common/switch';
-
-import BrushConfigFactory from './brush-config';
-import TooltipConfigFactory from './tooltip-config';
-
-import {
-  StyledPanelHeader,
-  PanelHeaderTitle,
-  PanelHeaderContent,
-  PanelContent
-} from 'components/common/styled-components';
-import {FormattedMessage} from 'localization';
-
-const StyledInteractionPanel = styled.div`
-  padding-bottom: 6px;
-`;
-
-InteractionPanelFactory.deps = [TooltipConfigFactory, BrushConfigFactory];
-
-function InteractionPanelFactory(TooltipConfig, BrushConfig) {
-  return class InteractionPanel extends Component {
-    static propTypes = {
-      datasets: PropTypes.object.isRequired,
-      config: PropTypes.object.isRequired,
-      onConfigChange: PropTypes.func.isRequired
-    };
-
-    state = {isConfigActive: false};
-
-    _updateConfig = newProp => {
-      this.props.onConfigChange({
-        ...this.props.config,
-        ...newProp
-      });
-    };
-
-    _enableConfig = () => {
-      this.setState({isConfigActive: !this.state.isConfigActive});
-    };
-
-    render() {
-      const {config, datasets} = this.props;
-      const onChange = newConfig => this._updateConfig({config: newConfig});
-      let template = null;
-
-      switch (config.id) {
-        case 'tooltip':
-          template = (
-            <TooltipConfig datasets={datasets} config={config.config} onChange={onChange} />
-          );
-          break;
-
-        case 'brush':
-          template = <BrushConfig config={config.config} onChange={onChange} />;
-          break;
-
-        default:
-          break;
-      }
-
-      return (
-        <StyledInteractionPanel className="interaction-panel">
-          <StyledPanelHeader className="interaction-panel__header" onClick={this._enableConfig}>
-            <PanelHeaderContent className="interaction-panel__header__content">
-              <div className="interaction-panel__header__icon icon">
-                <config.iconComponent height="16px" />
-              </div>
-              <div className="interaction-panel__header__title">
-                <PanelHeaderTitle>
-                  <FormattedMessage id={config.label} />
-                </PanelHeaderTitle>
-              </div>
-            </PanelHeaderContent>
-            <div className="interaction-panel__header__actions">
-              <Switch
-                checked={config.enabled}
-                id={`${config.id}-toggle`}
-                onChange={() => this._updateConfig({enabled: !config.enabled})}
-                secondary
-              />
-            </div>
-          </StyledPanelHeader>
-          {config.enabled && template && (
-            <PanelContent className="interaction-panel__content">{template}</PanelContent>
-          )}
-        </StyledInteractionPanel>
-      );
-    }
-  };
-}
-
-export default InteractionPanelFactory;

package/src/components/side-panel/interaction-panel/tooltip-config/tooltip-chicklet.js

@@ -1,199 +0,0 @@
-// 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 styled from 'styled-components';
-import {ChickletButton, ChickletTag} from 'components/common/item-selector/chickleted-input';
-import {Hash, Delete} from 'components/common/icons';
-import DropdownList from 'components/common/item-selector/dropdown-list';
-import {Tooltip} from 'components/common/styled-components';
-import {FormattedMessage} from 'localization';
-import onClickOutside from 'react-onclickoutside';
-import {FIELD_OPTS} from 'constants/default-settings';
-import {TOOLTIP_FORMATS, TOOLTIP_FORMAT_TYPES, TOOLTIP_KEY} from 'constants/tooltip';
-import {getFormatter} from 'utils/data-utils';
-
-const TIME_DISPLAY = '2020-05-11 14:00';
-const getValue = fmt => fmt[TOOLTIP_KEY];
-
-const addDTimeLabel = formats =>
-  formats.map(f => ({
-    ...f,
-    label:
-      f.type === TOOLTIP_FORMAT_TYPES.DATE_TIME || f.type === TOOLTIP_FORMAT_TYPES.DATE
-        ? getFormatter(getValue(f))(TIME_DISPLAY)
-        : f.label
-  }));
-
-function getFormatLabels(fields, fieldName) {
-  const fieldType = fields.find(f => f.name === fieldName).type;
-  const tooltipTypes = (fieldType && FIELD_OPTS[fieldType].format.tooltip) || [];
-  const formatLabels = Object.values(TOOLTIP_FORMATS).filter(t => tooltipTypes.includes(t.type));
-
-  return addDTimeLabel(formatLabels);
-}
-
-const ChickletAddonWrapper = styled.div`
-  position: relative;
-`;
-
-const ChickletAddon = styled.div`
-  margin-right: 4px;
-`;
-
-const StyledPopover = styled.div`
-  margin-left: -64px;
-  position: absolute;
-  top: 20px;
-  width: 140px;
-  z-index: 101;
-`;
-
-const hashStyles = {
-  SHOW: 'SHOW',
-  ACTIVE: 'ACTIVE'
-};
-
-const IconDiv = styled.div.attrs({
-  className: 'tooltip-chicklet__icon'
-})`
-  color: ${props =>
-    props.status === hashStyles.SHOW
-      ? props.theme.subtextColorActive
-      : props.status === hashStyles.ACTIVE
-      ? props.theme.activeColor
-      : props.theme.textColor};
-`;
-
-function getFormatTooltip(formatLabels, format) {
-  if (!format) {
-    return null;
-  }
-  const formatLabel = formatLabels.find(fl => getValue(fl) === format);
-  if (formatLabel) {
-    return formatLabel.label;
-  }
-  return typeof format === 'object' ? JSON.stringify(format, null, 2) : String(format);
-}
-
-function TooltipChickletFactory(dataId, config, onChange, fields) {
-  class TooltipChicklet extends Component {
-    state = {
-      show: false
-    };
-
-    componentDidMount() {
-      document.addEventListener('mousedown', this.handleClickOutside, false);
-    }
-
-    componentWillUnmount() {
-      document.removeEventListener('mousedown', this.handleClickOutside, false);
-    }
-
-    handleClickOutside = e => {
-      if (this.node.contains(e.target)) {
-        return;
-      }
-      this.setState({show: false});
-    };
-
-    render() {
-      const {disabled, item, displayOption, remove} = this.props;
-      const {show} = this.state;
-      const tooltipField = config.fieldsToShow[dataId].find(
-        fieldToShow => fieldToShow.name === item.name
-      );
-      if (!tooltipField) {
-        return null;
-      }
-      const formatLabels = getFormatLabels(fields, tooltipField.name);
-      const hasFormat = Boolean(tooltipField.format);
-      const selectionIndex = formatLabels.findIndex(fl => getValue(fl) === tooltipField.format);
-      const hashStyle = show ? hashStyles.SHOW : hasFormat ? hashStyles.ACTIVE : null;
-
-      return (
-        <ChickletButton ref={node => (this.node = node)}>
-          <ChickletTag>{displayOption(item)}</ChickletTag>
-          {formatLabels.length > 1 && (
-            <ChickletAddonWrapper>
-              <ChickletAddon data-tip data-for={`addon-${tooltipField.name}`}>
-                <IconDiv status={hashStyle}>
-                  <Hash
-                    height="8px"
-                    onClick={e => {
-                      e.stopPropagation();
-                      this.setState({show: Boolean(!show)});
-                    }}
-                  />
-                </IconDiv>
-                <Tooltip id={`addon-${tooltipField.name}`} effect="solid">
-                  <span>
-                    {hasFormat ? (
-                      getFormatTooltip(formatLabels, tooltipField.format)
-                    ) : (
-                      <FormattedMessage id={'fieldSelector.formatting'} />
-                    )}
-                  </span>
-                </Tooltip>
-              </ChickletAddon>
-              {show && (
-                <StyledPopover>
-                  <DropdownList
-                    options={formatLabels}
-                    selectionIndex={selectionIndex}
-                    displayOption={({label}) => label}
-                    onOptionSelected={(result, e) => {
-                      e.stopPropagation();
-                      this.setState({
-                        show: false
-                      });
-
-                      const oldFieldsToShow = config.fieldsToShow[dataId];
-                      const fieldsToShow = oldFieldsToShow.map(fieldToShow => {
-                        return fieldToShow.name === tooltipField.name
-                          ? {
-                              name: tooltipField.name,
-                              format: getValue(result)
-                            }
-                          : fieldToShow;
-                      });
-                      const newConfig = {
-                        ...config,
-                        fieldsToShow: {
-                          ...config.fieldsToShow,
-                          [dataId]: fieldsToShow
-                        }
-                      };
-                      onChange(newConfig);
-                    }}
-                  />
-                </StyledPopover>
-              )}
-            </ChickletAddonWrapper>
-          )}
-          <Delete onClick={disabled ? null : remove} />
-        </ChickletButton>
-      );
-    }
-  }
-  return onClickOutside(TooltipChicklet);
-}
-
-export default TooltipChickletFactory;

package/src/components/side-panel/interaction-panel/tooltip-config.js

@@ -1,190 +0,0 @@
-// 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 styled from 'styled-components';
-import {injectIntl} from 'react-intl';
-import {FormattedMessage} from 'localization';
-
-import {
-  SidePanelSection,
-  SBFlexboxNoMargin,
-  Button,
-  PanelLabel
-} from 'components/common/styled-components';
-import DatasetTagFactory from 'components/side-panel/common/dataset-tag';
-import TooltipChickletFactory from './tooltip-config/tooltip-chicklet';
-import Switch from 'components/common/switch';
-import ItemSelector from 'components/common/item-selector/item-selector';
-import {COMPARE_TYPES} from 'constants/tooltip';
-import FieldSelectorFactory from '../../common/field-selector';
-
-const TooltipConfigWrapper = styled.div`
-  .item-selector > div > div {
-    overflow: visible;
-  }
-`;
-
-const ButtonWrapper = styled.div`
-  display: inherit;
-  padding: 0;
-
-  .button.clear-all {
-    background: transparent;
-    color: ${props => props.theme.subtextColor};
-    margin: 0 0 0 8px;
-    padding: 0;
-
-    &:hover {
-      color: ${props => props.theme.textColor};
-    }
-  }
-`;
-
-const CompareSwitchWrapper = styled.div`
-  color: ${props => props.theme.labelColor};
-  display: flex;
-  font-size: ${props => props.theme.inputFontSize};
-  justify-content: space-between;
-  line-height: 11px;
-  margin-bottom: 8px;
-`;
-
-TooltipConfigFactory.deps = [DatasetTagFactory, FieldSelectorFactory];
-function TooltipConfigFactory(DatasetTag, FieldSelector) {
-  const DatasetTooltipConfig = ({config, onChange, dataset}) => {
-    const dataId = dataset.id;
-    return (
-      <SidePanelSection key={dataId}>
-        <SBFlexboxNoMargin>
-          <DatasetTag dataset={dataset} />
-          {Boolean(config.fieldsToShow[dataId].length) && (
-            <ButtonWrapper>
-              <Button
-                className="clear-all"
-                onClick={() => {
-                  const newConfig = {
-                    ...config,
-                    fieldsToShow: {
-                      ...config.fieldsToShow,
-                      [dataId]: []
-                    }
-                  };
-                  onChange(newConfig);
-                }}
-                width="54px"
-                secondary
-              >
-                <FormattedMessage id="fieldSelector.clearAll" />
-              </Button>
-            </ButtonWrapper>
-          )}
-        </SBFlexboxNoMargin>
-        <FieldSelector
-          fields={dataset.fields}
-          value={config.fieldsToShow[dataId]}
-          onSelect={selected => {
-            const newConfig = {
-              ...config,
-              fieldsToShow: {
-                ...config.fieldsToShow,
-                [dataId]: selected.map(
-                  f =>
-                    config.fieldsToShow[dataId].find(
-                      tooltipField => tooltipField.name === f.name
-                    ) || {
-                      name: f.name,
-                      // default initial tooltip is null
-                      format: null
-                    }
-                )
-              }
-            };
-            onChange(newConfig);
-          }}
-          closeOnSelect={false}
-          multiSelect
-          inputTheme="secondary"
-          CustomChickletComponent={TooltipChickletFactory(dataId, config, onChange, dataset.fields)}
-        />
-      </SidePanelSection>
-    );
-  };
-
-  const TooltipConfig = ({config, datasets, onChange, intl}) => {
-    return (
-      <TooltipConfigWrapper>
-        {Object.keys(config.fieldsToShow).map(dataId => (
-          <DatasetTooltipConfig
-            key={dataId}
-            config={config}
-            onChange={onChange}
-            dataset={datasets[dataId]}
-          />
-        ))}
-        <CompareSwitchWrapper>
-          <FormattedMessage id="compare.modeLabel" />
-          <Switch
-            checked={config.compareMode}
-            id="compare-mode-toggle"
-            onChange={() => {
-              const newConfig = {
-                ...config,
-                compareMode: !config.compareMode
-              };
-              onChange(newConfig);
-            }}
-            secondary
-          />
-        </CompareSwitchWrapper>
-        <SidePanelSection>
-          <PanelLabel>
-            <FormattedMessage id="compare.typeLabel" />
-          </PanelLabel>
-          <ItemSelector
-            disabled={!config.compareMode}
-            displayOption={d =>
-              intl.formatMessage({
-                id: `compare.types.${d}`
-              })
-            }
-            selectedItems={config.compareType}
-            options={Object.values(COMPARE_TYPES)}
-            multiSelect={false}
-            searchable={false}
-            inputTheme={'secondary'}
-            getOptionValue={d => d}
-            onChange={option => {
-              const newConfig = {
-                ...config,
-                compareType: option
-              };
-              onChange(newConfig);
-            }}
-          />
-        </SidePanelSection>
-      </TooltipConfigWrapper>
-    );
-  };
-
-  return injectIntl(TooltipConfig);
-}
-
-export default TooltipConfigFactory;