@carto/kepler.gl 0.0.13 → 0.0.16

package/src/components/side-panel/layer-panel/color-range-selector.js

@@ -25,7 +25,7 @@ import styled from 'styled-components';
 import {createSelector} from 'reselect';
 
 import ItemSelector from 'components/common/item-selector/item-selector';
-import {PanelLabel} from 'components/common/styled-components';
+import {PanelLabel, Button, Tooltip} from 'components/common/styled-components';
 import Switch from 'components/common/switch';
 import ColorPalette from './color-palette';
 import CustomPalette from './custom-palette';
@@ -33,12 +33,13 @@ import {COLOR_RANGES} from 'constants/color-ranges';
 import {numberSort} from 'utils/data-utils';
 import {reverseColorRange} from 'utils/color-utils';
 import {FormattedMessage} from 'localization';
+import {SwapHorizontal} from 'components/common/icons';
 
-export const ALL_TYPES = uniq(
-  COLOR_RANGES.map(c => c.type)
-    .filter(ctype => ctype)
-    .concat(['all', 'custom'])
-);
+export const ALL_TYPES = uniq([
+  'all',
+  ...COLOR_RANGES.map(c => c.type).filter(ctype => ctype),
+  'custom'
+]);
 
 export const ALL_STEPS = uniq(COLOR_RANGES.map(d => d.colors.length)).sort(numberSort);
 
@@ -66,8 +67,15 @@ const StyledPaletteConfig = styled.div`
   .item-selector .item-selector__dropdown {
     ${props => props.theme.secondaryInput};
   }
+  .color-palette__config__button {
+    svg {
+      margin: 0;
+    }
+  }
 `;
 
+const CONFIG_SETTINGS_CUSTOM_REVERSED_BUTTON_TYPE = 'custom-reversed-button';
+
 const CONFIG_SETTINGS = {
   type: {
     type: 'select',
@@ -78,12 +86,7 @@ const CONFIG_SETTINGS = {
     options: ALL_STEPS
   },
   reversed: {
-    type: 'switch',
-    options: [true, false]
-  },
-  custom: {
-    label: 'customPalette',
-    type: 'switch',
+    type: CONFIG_SETTINGS_CUSTOM_REVERSED_BUTTON_TYPE,
     options: [true, false]
   }
 };
@@ -122,7 +125,10 @@ export default class ColorRangeSelect extends Component {
   );
 
   _updateConfig = ({key, value}) => {
-    this._setColorRangeConfig({[key]: value});
+    this._setColorRangeConfig({
+      [key]: value,
+      ...(key === 'type' && {custom: value === 'custom'})
+    });
   };
 
   _onSetCustomPalette = config => {
@@ -157,16 +163,21 @@ export default class ColorRangeSelect extends Component {
 
     return (
       <StyledColorRangeSelector>
-        <StyledColorConfig>
-          {(colorRangeConfig.custom ? ['custom'] : Object.keys(colorRangeConfig)).map(key => (
-            <PaletteConfig
-              key={key}
-              label={CONFIG_SETTINGS[key].label || key}
-              config={CONFIG_SETTINGS[key]}
-              value={colorRangeConfig[key]}
-              onChange={value => this._updateConfig({key, value})}
-            />
-          ))}
+        <StyledColorConfig className="color-range-selector__config">
+          {Object.keys(colorRangeConfig)
+            .filter(
+              key =>
+                Boolean(CONFIG_SETTINGS[key]) && (colorRangeConfig.custom ? key === 'type' : true)
+            )
+            .map(key => (
+              <PaletteConfig
+                key={key}
+                label={CONFIG_SETTINGS[key].label || key}
+                config={CONFIG_SETTINGS[key]}
+                value={colorRangeConfig[key]}
+                onChange={value => this._updateConfig({key, value})}
+              />
+            ))}
         </StyledColorConfig>
 
         {colorRangeConfig.custom ? (
@@ -193,11 +204,16 @@ export default class ColorRangeSelect extends Component {
 }
 
 export const PaletteConfig = ({label, value, config: {type, options}, onChange}) => (
-  <StyledPaletteConfig className="color-palette__config" onClick={e => e.stopPropagation()}>
+  <StyledPaletteConfig
+    className={`color-palette__config color-palette__config--${label}`}
+    onClick={e => e.stopPropagation()}
+  >
     <div className="color-palette__config__label">
-      <PanelLabel>
-        <FormattedMessage id={`color.${label}`} />
-      </PanelLabel>
+      {type !== CONFIG_SETTINGS_CUSTOM_REVERSED_BUTTON_TYPE && (
+        <PanelLabel>
+          <FormattedMessage id={`color.${label}`} />
+        </PanelLabel>
+      )}
     </div>
     {type === 'select' && (
       <div className="color-palette__config__select">
@@ -213,6 +229,22 @@ export const PaletteConfig = ({label, value, config: {type, options}, onChange})
     {type === 'switch' && (
       <Switch checked={value} id={`${label}-toggle`} onChange={() => onChange(!value)} secondary />
     )}
+    {type === CONFIG_SETTINGS_CUSTOM_REVERSED_BUTTON_TYPE && (
+      <Button
+        className={`color-palette__config__button ${
+          value ? 'color-palette__config__button--active' : ''
+        }`}
+        data-tip
+        data-for={`${label}-tooltip`}
+        {...(!value && {link: true})}
+        onClick={() => onChange(!value)}
+      >
+        <SwapHorizontal />
+        <Tooltip id={`${label}-tooltip`} effect="solid" place="top">
+          {label}
+        </Tooltip>
+      </Button>
+    )}
   </StyledPaletteConfig>
 );
 
@@ -237,7 +269,15 @@ export const ColorPaletteGroup = ({reversed, onSelect, selected, colorRanges}) =
           colors={colorRange.colors}
           isReversed={reversed}
           isSelected={colorRange.name === selected.name && reversed === Boolean(selected.reversed)}
-        />
+          rootProps={{
+            'data-tip': true,
+            'data-for': `color-range-${i}-tooltip`
+          }}
+        >
+          <Tooltip id={`color-range-${i}-tooltip`} effect="solid" place="top">
+            {colorRange.name}
+          </Tooltip>
+        </ColorPalette>
       </StyledColorRange>
     ))}
   </div>

package/src/components/side-panel/layer-panel/custom-palette.js

@@ -30,6 +30,7 @@ import {VertDots, Trash} from 'components/common/icons';
 import ColorPalette from './color-palette';
 import CustomPicker from './custom-picker';
 import {arrayMove} from 'utils/data-utils';
+import {FormattedMessage} from 'react-intl';
 
 const dragHandleActive = css`
   .layer__drag-handle {
@@ -115,7 +116,9 @@ const StyledButtonContainer = styled.div`
   direction: rtl;
 `;
 
-const StyledInlineInput = styled.div`
+const StyledInlineInput = styled.div.attrs({
+  className: 'custom-palette__input'
+})`
   margin-left: 12px;
   input {
     color: ${props => props.theme.textColorHl};
@@ -198,7 +201,6 @@ class CustomPalette extends Component {
   _onApply = event => {
     event.stopPropagation();
     event.preventDefault();
-    this.props.onCancel();
     this.props.onApply(this.props.customPalette, event);
   };
 
@@ -254,27 +256,31 @@ class CustomPalette extends Component {
                   id={`input-layer-label-${index}`}
                 />
               </StyledInlineInput>
-              <StyledTrash onClick={() => this._onColorDelete(index)}>
+              <StyledTrash
+                className="custom-palette__trash"
+                onClick={() => this._onColorDelete(index)}
+              >
                 <Trash className="trashbin" />
               </StyledTrash>
             </SortableItem>
           ))}
         </WrappedSortableContainer>
-        {/* Add Step Button */}
-        <Button className="add-step__button" link onClick={this._onColorAdd}>
-          + Add Step
-        </Button>
-        <StyledLine />
-        {/* Cancel or Confirm Buttons */}
-        <StyledButtonContainer>
-          <Button className="confirm-apply__button" link onClick={this._onApply}>
-            Confirm
-          </Button>
-          <Button link onClick={this.props.onCancel}>
-            Cancel
+        <div className="custom-palette-actions">
+          {/* Add Step Button */}
+          <Button className="add-step__button" link onClick={this._onColorAdd}>
+            <FormattedMessage id="customPalette.addStep" />
           </Button>
-        </StyledButtonContainer>
-
+          <StyledLine className="custom-palette-actions__separator" />
+          {/* Cancel or Confirm Buttons */}
+          <StyledButtonContainer>
+            <Button className="confirm-apply__button" link onClick={this._onApply}>
+              <FormattedMessage id="customPalette.apply" />
+            </Button>
+            <Button className="cancel-apply__button" link onClick={this.props.onCancel}>
+              <FormattedMessage id="customPalette.cancel" />
+            </Button>
+          </StyledButtonContainer>
+        </div>
         <Portaled isOpened={this.props.showSketcher !== false} left={280} top={-300}>
           <CustomPicker
             color={colors[this.props.showSketcher]}

package/src/components/side-panel/layer-panel/layer-config-group.js

@@ -144,7 +144,8 @@ function LayerConfigGroupFactory(LayerConfigGroupLabel) {
       expanded: false,
       onChange: () => {},
       description: null,
-      disabled: false
+      disabled: false,
+      CollapseButton: VertThreeDots
     };
 
     static getDerivedStateFromProps(props, state) {
@@ -153,6 +154,10 @@ function LayerConfigGroupFactory(LayerConfigGroupLabel) {
         return {collapsed: false};
       }
 
+      if (props.layer && !props.layer.config.visConfig[props.property] && !state.collapsed) {
+        return {collapsed: true};
+      }
+
       return null;
     }
 
@@ -169,17 +174,15 @@ function LayerConfigGroupFactory(LayerConfigGroupLabel) {
         onChange,
         collapsible,
         description,
-        disabled
+        disabled,
+        CollapseButton
       } = this.props;
 
       const {collapsed} = this.state;
 
       return (
         <StyledLayerConfigGroup className={classnames('layer-config-group', {collapsed, disabled})}>
-          <StyledConfigGroupHeader
-            className="layer-config-group__header"
-            onClick={() => this.setState({collapsed: !this.state.collapsed})}
-          >
+          <StyledConfigGroupHeader className="layer-config-group__header">
             <LayerConfigGroupLabel label={label} description={description} />
             <StyledLayerConfigGroupAction className="layer-config-group__action">
               {property ? (
@@ -189,7 +192,13 @@ function LayerConfigGroupFactory(LayerConfigGroupLabel) {
                   onChange={() => onChange({[property]: !layer.config.visConfig[property]})}
                 />
               ) : null}
-              {collapsible ? <VertThreeDots height="18px" /> : null}
+              {collapsible ? (
+                <CollapseButton
+                  onClick={() => this.setState({collapsed: !this.state.collapsed})}
+                  active={!this.state.collapsed}
+                  height="18px"
+                />
+              ) : null}
             </StyledLayerConfigGroupAction>
           </StyledConfigGroupHeader>
           <ConfigGroupContent

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

@@ -951,7 +951,11 @@ export default function LayerConfiguratorFactory(
           {layer.layerInfoModal ? (
             <HowToButton onClick={() => this.props.openModal(layer.layerInfoModal)} />
           ) : null}
-          <LayerConfigGroup label={'layer.basic'} collapsible expanded={!layer.hasAllColumns()}>
+          <LayerConfigGroup
+            label={'layer.basic'}
+            collapsible={Object.keys(layer.config.columns).length > 0}
+            expanded={!layer.hasAllColumns()}
+          >
             <LayerTypeSelector
               datasets={datasets}
               layer={layer}
@@ -966,17 +970,21 @@ export default function LayerConfiguratorFactory(
                 onSelect={value => updateLayerConfig({dataId: value})}
               />
             )}
-            <LayerColumnConfig
-              columnPairs={layer.columnPairs}
-              columns={layer.config.columns}
-              assignColumnPairs={layer.assignColumnPairs.bind(layer)}
-              assignColumn={layer.assignColumn.bind(layer)}
-              columnLabels={layer.columnLabels}
-              fields={fields}
-              fieldPairs={fieldPairs}
-              updateLayerConfig={updateLayerConfig}
-              updateLayerType={this.props.updateLayerType}
-            />
+            {Object.keys(layer.config.columns).length > 0 && (
+              <ConfigGroupCollapsibleContent>
+                <LayerColumnConfig
+                  columnPairs={layer.columnPairs}
+                  columns={layer.config.columns}
+                  assignColumnPairs={layer.assignColumnPairs.bind(layer)}
+                  assignColumn={layer.assignColumn.bind(layer)}
+                  columnLabels={layer.columnLabels}
+                  fields={fields}
+                  fieldPairs={fieldPairs}
+                  updateLayerConfig={updateLayerConfig}
+                  updateLayerType={this.props.updateLayerType}
+                />
+              </ConfigGroupCollapsibleContent>
+            )}
           </LayerConfigGroup>
           {this[renderTemplate] &&
             this[renderTemplate]({

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

@@ -50,8 +50,17 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector) {
       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} = this.props;
+      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>
@@ -65,7 +74,10 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector) {
           </ConfigGroupCollapsibleHeader>
           <ConfigGroupCollapsibleContent>
             {textLabel.map((tl, idx) => (
-              <div key={tl.field ? tl.field.name : `null-${idx}`}>
+              <div
+                key={tl.field ? tl.field.name : `null-${idx}`}
+                className="side-panel-section-group"
+              >
                 <PanelLabel>
                   <FormattedMessage id={'panel.text.labelWithId'} values={{labelId: idx + 1}} />
                 </PanelLabel>
@@ -129,10 +141,7 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector) {
               </div>
             ))}
             <SidePanelSection>
-              <Button link onClick={val => updateLayerTextLabel(textLabel.length)}>
-                <Add height="12px" />
-                <FormattedMessage id="panel.text.addMoreLabel" />
-              </Button>
+              <AddButton onClick={val => updateLayerTextLabel(textLabel.length)} />
             </SidePanelSection>
           </ConfigGroupCollapsibleContent>
         </LayerConfigGroup>

package/src/localization/en.js

@@ -439,6 +439,11 @@ export default {
     type: 'type',
     reversed: 'reversed'
   },
+  customPalette: {
+    apply: 'Apply',
+    cancel: 'Cancel',
+    addStep: '+ Add Step'
+  },
   scale: {
     colorScale: 'Color Scale',
     sizeScale: 'Size Scale',