@carto/kepler.gl 0.0.15 → 0.0.18-alpha.0

package/src/components/map/map-legend-panel.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/map/map-legend.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/map/map-popover.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/map/split-map-button.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/map/toggle-3d-button.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/map-container.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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
@@ -418,6 +418,10 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         deckGlLayers = deckGlLayers.concat(dataLayers);
       }
 
+      if (this.props.deckGlProps?.layersOnTop) {
+        deckGlLayers = deckGlLayers.concat(this.props.deckGlProps.layersOnTop);
+      }
+
       if (mapStyle.visibleLayerGroups['3d building']) {
         deckGlLayers.push(
           new ThreeDBuildingLayer({
@@ -436,6 +440,8 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         <DeckGL
           {...this.props.deckGlProps}
           viewState={mapState}
+          controller={true}
+          onViewStateChange={({viewState}) => this._onViewportChange(viewState)}
           id="default-deckgl-overlay"
           layers={deckGlLayers}
           onBeforeRender={this._onBeforeRender}
@@ -526,7 +532,6 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         preserveDrawingBuffer: true,
         mapboxApiAccessToken,
         mapboxApiUrl,
-        onViewportChange: this._onViewportChange,
         transformRequest
       };
 

package/src/components/maps-layout.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modal-container.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/add-map-style-modal.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/cloud-tile.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/data-table-modal.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/delete-data-modal.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/error-display.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/export-data-modal.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/export-image-modal.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/export-map-modal/components.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/export-map-modal/export-html-map.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/export-map-modal/export-json-map.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/export-map-modal/export-map-modal.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/image-modal-container.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/load-data-modal.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/load-storage-map.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/loading-dialog.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/modal-dialog.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/modal-tabs.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/overwrite-map-modal.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/provider-modal-container.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/save-map-modal.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/share-map-modal.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/status-panel.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/modals/storage-map-viewer.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/notification-panel/notification-item.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/notification-panel.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/plot-container.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/side-panel/cloud-storage-dropdown.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/side-panel/common/dataset-info.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/side-panel/common/dataset-tag.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/side-panel/common/dataset-title.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/side-panel/common/source-data-catalog.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/side-panel/common/source-data-selector.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/side-panel/filter-panel/filter-panel-header.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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
@@ -27,7 +27,9 @@ const propTypes = {
   height: PropTypes.number,
   className: PropTypes.string,
   isSelected: PropTypes.bool,
-  isReversed: PropTypes.bool
+  isReversed: PropTypes.bool,
+  children: PropTypes.node,
+  rootProps: PropTypes.object
 };
 
 const defaultProps = {
@@ -67,13 +69,18 @@ const StyledColorBlock = styled.div.attrs({
   flex-grow: 1;
 `;
 
-const ColorPalette = ({colors, height, className, isSelected, isReversed}) => (
-  <PaletteContainer className={className} isSelected={isSelected}>
+const ColorPalette = ({colors, height, className, isSelected, isReversed, children, rootProps}) => (
+  <PaletteContainer
+    className={className}
+    isSelected={isSelected}
+    {...(Boolean(rootProps) && rootProps)}
+  >
     <PaletteWrapper style={{height, transform: `scale(${isReversed ? -1 : 1}, 1)`}}>
       {colors.map((color, index) => (
         <StyledColorBlock key={`${color}-${index}`} style={{backgroundColor: color}} />
       ))}
     </PaletteWrapper>
+    {Boolean(children) && children}
   </PaletteContainer>
 );
 

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

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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
@@ -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/color-selector.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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

package/src/components/side-panel/layer-panel/column-selector.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2021 Uber Technologies, Inc.
+// 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