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

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

@@ -0,0 +1,124 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component, ComponentType, ReactElement} from 'react';
+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';
+
+interface InteractionPanelProps {
+  datasets: any;
+  config: {
+    id: string;
+    enabled: boolean;
+    label: string;
+    iconComponent: any;
+    config: any;
+  };
+  onConfigChange: any;
+}
+
+const StyledInteractionPanel = styled.div`
+  padding-bottom: 6px;
+`;
+
+InteractionPanelFactory.deps = [TooltipConfigFactory, BrushConfigFactory];
+
+function InteractionPanelFactory(
+  TooltipConfig: ReturnType<typeof TooltipConfigFactory>,
+  BrushConfig: ReturnType<typeof BrushConfigFactory>
+): ComponentType<InteractionPanelProps> {
+  return class InteractionPanel extends Component<InteractionPanelProps> {
+    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: ReactElement | null = 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.tsx

@@ -0,0 +1,243 @@
+// 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, ComponentType} 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 {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';
+import TippyTooltip from 'components/common/tippy-tooltip';
+
+interface TooltipChickletProps {
+  disabled: boolean;
+  item: {name: string};
+  displayOption: Function;
+  remove: any;
+}
+
+type TooltipConfig = {
+  fieldsToShow: {
+    [key: string]: {name: string; format: string | null}[];
+  };
+  compareMode: boolean;
+  compareType: string[];
+};
+
+type TooltipFields = {
+  format?: string;
+  id?: string;
+  name?: string;
+  fieldIdx?: number;
+  type?: number;
+};
+
+type TimeLabelFormat = {
+  id: string;
+  format: string | null;
+  type: string;
+  label: string;
+};
+
+type IconDivProps = {
+  status: string | null;
+};
+
+const TIME_DISPLAY = '2020-05-11 14:00';
+const getValue = fmt => fmt[TOOLTIP_KEY];
+
+const addDTimeLabel = (formats: TimeLabelFormat[]) =>
+  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: any, fieldName: string) {
+  const fieldType = fields.find((f: TooltipFields) => f.name === fieldName).type;
+  const tooltipTypes = (fieldType && FIELD_OPTS[fieldType].format.tooltip) || [];
+  const formatLabels: TimeLabelFormat[] = 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'
+})<IconDivProps>`
+  color: ${props =>
+    props.status === hashStyles.SHOW
+      ? props.theme.subtextColorActive
+      : props.status === hashStyles.ACTIVE
+      ? props.theme.activeColor
+      : props.theme.textColor};
+`;
+
+function getFormatTooltip(formatLabels: TimeLabelFormat[], format: string | null) {
+  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: string,
+  config: TooltipConfig,
+  onChange: (config: TooltipConfig) => void,
+  fields: TooltipFields[]
+): ComponentType<TooltipChickletProps> {
+  class TooltipChicklet extends Component<TooltipChickletProps> {
+    state = {
+      show: false
+    };
+    private node!: HTMLDivElement;
+
+    componentDidMount() {
+      document.addEventListener('mousedown', this.handleClickOutside, false);
+    }
+
+    componentWillUnmount() {
+      document.removeEventListener('mousedown', this.handleClickOutside, false);
+    }
+
+    handleClickOutside = (e: any) => {
+      if (this.node.contains(e.target)) {
+        return;
+      }
+    };
+
+    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: HTMLDivElement) => (this.node = node)}>
+          <ChickletTag>{displayOption(item)}</ChickletTag>
+          {formatLabels.length > 1 && (
+            <ChickletAddonWrapper>
+              <TippyTooltip
+                placement="top"
+                render={() => (
+                  <span>
+                    {hasFormat ? (
+                      getFormatTooltip(formatLabels, tooltipField.format)
+                    ) : (
+                      <FormattedMessage id={'fieldSelector.formatting'} />
+                    )}
+                  </span>
+                )}
+              >
+                <ChickletAddon>
+                  <IconDiv status={hashStyle}>
+                    <Hash
+                      height="8px"
+                      onClick={e => {
+                        e.stopPropagation();
+                        this.setState({show: Boolean(!show)});
+                      }}
+                    />
+                  </IconDiv>
+                </ChickletAddon>
+              </TippyTooltip>
+              {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.tsx

@@ -0,0 +1,238 @@
+// 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, IntlShape} 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';
+import {GEOCODER_DATASET_NAME} from 'constants/default-settings';
+import KeplerTable from 'utils/table-utils/kepler-table';
+import {Datasets} from 'reducers';
+
+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;
+`;
+
+type TooltipConfigProps = {
+  config: {
+    fieldsToShow: {
+      [key: string]: {name: string; format: string | null}[];
+    };
+    compareMode: boolean;
+    compareType: string[];
+  };
+  onChange: (config: {
+    fieldsToShow: {
+      [key: string]: {name: string; format: string | null}[];
+    };
+    compareMode: boolean;
+    compareType: string[];
+  }) => void;
+  datasets: Datasets;
+  intl: IntlShape;
+};
+
+type DatasetTooltipConfigProps = {
+  config: {
+    fieldsToShow: {
+      [key: string]: {name: string; format: string | null}[];
+    };
+    compareMode: boolean;
+    compareType: string[];
+  };
+  onChange: (config: {
+    fieldsToShow: {
+      [key: string]: {name: string; format: string | null}[];
+    };
+    compareMode: boolean;
+    compareType: string[];
+  }) => void;
+  dataset: KeplerTable;
+};
+
+TooltipConfigFactory.deps = [DatasetTagFactory, FieldSelectorFactory];
+function TooltipConfigFactory(
+  DatasetTag: ReturnType<typeof DatasetTagFactory>,
+  FieldSelector: ReturnType<typeof FieldSelectorFactory>
+) {
+  const DatasetTooltipConfig = ({config, onChange, dataset}: DatasetTooltipConfigProps) => {
+    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: DatasetTooltipConfigProps['config'] = {
+              ...config,
+              fieldsToShow: {
+                ...config.fieldsToShow,
+                //@ts-expect-error
+                [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"
+          //@ts-expect-error
+          CustomChickletComponent={TooltipChickletFactory(dataId, config, onChange, dataset.fields)}
+        />
+      </SidePanelSection>
+    );
+  };
+
+  const TooltipConfig = ({config, datasets, onChange, intl}: TooltipConfigProps) => {
+    return (
+      <TooltipConfigWrapper>
+        {Object.keys(config.fieldsToShow).map(dataId =>
+          dataId === GEOCODER_DATASET_NAME ? null : (
+            <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: TooltipConfigProps['config'] = {
+                ...config,
+                //@ts-expect-error
+                compareType: option
+              };
+              onChange(newConfig);
+            }}
+          />
+        </SidePanelSection>
+      </TooltipConfigWrapper>
+    );
+  };
+
+  return injectIntl(TooltipConfig);
+}
+
+export default TooltipConfigFactory;