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

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

@@ -0,0 +1,199 @@
+// 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

@@ -0,0 +1,190 @@
+// 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;

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

@@ -0,0 +1,290 @@
+// 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, useCallback} from 'react';
+import classnames from 'classnames';
+
+import PropTypes from 'prop-types';
+import {SortableContainer, SortableElement} from 'react-sortable-hoc';
+import styled from 'styled-components';
+import {createSelector} from 'reselect';
+import {injectIntl} from 'react-intl';
+import {FormattedMessage} from 'localization';
+import {arrayMove} from 'utils/data-utils';
+
+import LayerPanelFactory from './layer-panel/layer-panel';
+import SourceDataCatalogFactory from './common/source-data-catalog';
+import {Add} from 'components/common/icons';
+import ItemSelector from 'components/common/item-selector/item-selector';
+import {
+  Button,
+  PanelLabel,
+  SidePanelDivider,
+  SidePanelSection
+} from 'components/common/styled-components';
+
+import {LAYER_BLENDINGS} from 'constants/default-settings';
+
+export function LayerBlendingSelectorFactory() {
+  const LayerBlendingSelector = ({layerBlending, updateLayerBlending, intl}) => {
+    const labeledLayerBlendings = Object.keys(LAYER_BLENDINGS).reduce(
+      (acc, current) => ({
+        ...acc,
+        [intl.formatMessage({id: LAYER_BLENDINGS[current].label})]: current
+      }),
+      {}
+    );
+
+    const onChange = useCallback(blending => updateLayerBlending(labeledLayerBlendings[blending]), [
+      updateLayerBlending,
+      labeledLayerBlendings
+    ]);
+
+    return (
+      <SidePanelSection>
+        <PanelLabel>
+          <FormattedMessage id="layerBlending.title" />
+        </PanelLabel>
+        <ItemSelector
+          selectedItems={intl.formatMessage({id: LAYER_BLENDINGS[layerBlending].label})}
+          options={Object.keys(labeledLayerBlendings)}
+          multiSelect={false}
+          searchable={false}
+          onChange={onChange}
+        />
+      </SidePanelSection>
+    );
+  };
+
+  return LayerBlendingSelector;
+}
+
+// make sure the element is always visible while is being dragged
+// item being dragged is appended in body, here to reset its global style
+const SortableStyledItem = styled.div`
+  z-index: ${props => props.theme.dropdownWrapperZ + 1};
+
+  &.sorting {
+    pointer-events: none;
+  }
+
+  &.sorting-layers .layer-panel__header {
+    background-color: ${props => props.theme.panelBackgroundHover};
+    font-family: ${props => props.theme.fontFamily};
+    font-weight: ${props => props.theme.fontWeight};
+    font-size: ${props => props.theme.fontSize};
+    line-height: ${props => props.theme.lineHeight};
+    *,
+    *:before,
+    *:after {
+      box-sizing: border-box;
+    }
+    .layer__drag-handle {
+      opacity: 1;
+      color: ${props => props.theme.textColorHl};
+    }
+  }
+`;
+
+export function AddDataButtonFactory() {
+  const AddDataButton = ({onClick, isInactive}) => (
+    <Button
+      className="add-data-button"
+      onClick={onClick}
+      isInactive={!isInactive}
+      width="105px"
+      secondary
+    >
+      <Add height="12px" />
+      <FormattedMessage id={'layerManager.addData'} />
+    </Button>
+  );
+
+  return AddDataButton;
+}
+
+LayerManagerFactory.deps = [
+  AddDataButtonFactory,
+  LayerPanelFactory,
+  SourceDataCatalogFactory,
+  LayerBlendingSelectorFactory
+];
+
+function LayerManagerFactory(AddDataButton, LayerPanel, SourceDataCatalog, LayerBlendingSelector) {
+  // By wrapping layer panel using a sortable element we don't have to implement the drag and drop logic into the panel itself;
+  // Developers can provide any layer panel implementation and it will still be sortable
+  const SortableItem = SortableElement(({children, isSorting}) => {
+    return (
+      <SortableStyledItem className={classnames('sortable-layer-items', {sorting: isSorting})}>
+        {children}
+      </SortableStyledItem>
+    );
+  });
+
+  const WrappedSortableContainer = SortableContainer(({children}) => {
+    return <div>{children}</div>;
+  });
+
+  class LayerManager extends Component {
+    static propTypes = {
+      datasets: PropTypes.object.isRequired,
+      layerBlending: PropTypes.string.isRequired,
+      layerClasses: PropTypes.object.isRequired,
+      layers: PropTypes.arrayOf(PropTypes.any).isRequired,
+      visStateActions: PropTypes.object.isRequired,
+      // functions
+      removeDataset: PropTypes.func.isRequired,
+      showDatasetTable: PropTypes.func.isRequired
+    };
+    state = {
+      isSorting: false
+    };
+
+    layerClassSelector = props => props.layerClasses;
+    layerTypeOptionsSelector = createSelector(this.layerClassSelector, layerClasses =>
+      Object.keys(layerClasses).map(key => {
+        const layer = new layerClasses[key]();
+        return {
+          id: key,
+          label: layer.name,
+          icon: layer.layerIcon,
+          requireData: layer.requireData
+        };
+      })
+    );
+
+    _addEmptyNewLayer = () => {
+      const {visStateActions} = this.props;
+      visStateActions.addLayer();
+    };
+
+    _handleSort = ({oldIndex, newIndex}) => {
+      const {visStateActions} = this.props;
+      visStateActions.reorderLayer(arrayMove(this.props.layerOrder, oldIndex, newIndex));
+      this.setState({isSorting: false});
+    };
+
+    _onSortStart = () => {
+      this.setState({isSorting: true});
+    };
+
+    _updateBeforeSortStart = ({index}) => {
+      // if layer config is active, close it
+      const {layerOrder, layers, visStateActions} = this.props;
+      const layerIdx = layerOrder[index];
+      if (layers[layerIdx].config.isConfigActive) {
+        visStateActions.layerConfigChange(layers[layerIdx], {isConfigActive: false});
+      }
+    };
+
+    render() {
+      const {
+        layers,
+        datasets,
+        intl,
+        layerOrder,
+        showAddDataModal,
+        showDatasetTable,
+        removeDataset,
+        uiStateActions,
+        visStateActions
+      } = this.props;
+      const {toggleModal: openModal} = uiStateActions;
+      const defaultDataset = Object.keys(datasets)[0];
+      const layerTypeOptions = this.layerTypeOptionsSelector(this.props);
+
+      const layerActions = {
+        layerColorUIChange: visStateActions.layerColorUIChange,
+        layerConfigChange: visStateActions.layerConfigChange,
+        layerVisualChannelConfigChange: visStateActions.layerVisualChannelConfigChange,
+        layerTypeChange: visStateActions.layerTypeChange,
+        layerVisConfigChange: visStateActions.layerVisConfigChange,
+        layerTextLabelChange: visStateActions.layerTextLabelChange,
+        removeLayer: visStateActions.removeLayer,
+        duplicateLayer: visStateActions.duplicateLayer
+      };
+
+      const panelProps = {
+        datasets,
+        openModal,
+        layerTypeOptions
+      };
+
+      return (
+        <div className="layer-manager">
+          <SourceDataCatalog
+            datasets={datasets}
+            showDatasetTable={showDatasetTable}
+            removeDataset={removeDataset}
+            showDeleteDataset
+          />
+          <AddDataButton onClick={showAddDataModal} isInactive={!defaultDataset} />
+          <SidePanelDivider />
+          <SidePanelSection>
+            <WrappedSortableContainer
+              onSortEnd={this._handleSort}
+              onSortStart={this._onSortStart}
+              updateBeforeSortStart={this._updateBeforeSortStart}
+              lockAxis="y"
+              helperClass="sorting-layers"
+              useDragHandle
+            >
+              {layerOrder.map(
+                (layerIdx, index) =>
+                  !layers[layerIdx].config.hidden && (
+                    <SortableItem
+                      key={`layer-${layerIdx}`}
+                      index={index}
+                      isSorting={this.state.isSorting}
+                    >
+                      <LayerPanel
+                        {...panelProps}
+                        {...layerActions}
+                        sortData={layerIdx}
+                        key={layers[layerIdx].id}
+                        idx={layerIdx}
+                        layer={layers[layerIdx]}
+                      />
+                    </SortableItem>
+                  )
+              )}
+            </WrappedSortableContainer>
+          </SidePanelSection>
+          <SidePanelSection>
+            {defaultDataset ? (
+              <Button className="add-layer-button" onClick={this._addEmptyNewLayer} width="105px">
+                <Add height="12px" />
+                <FormattedMessage id={'layerManager.addLayer'} />
+              </Button>
+            ) : null}
+          </SidePanelSection>
+          <LayerBlendingSelector
+            layerBlending={this.props.layerBlending}
+            updateLayerBlending={visStateActions.updateLayerBlending}
+            intl={intl}
+          />
+        </div>
+      );
+    }
+  }
+  return injectIntl(LayerManager);
+}
+
+export default LayerManagerFactory;