@carto/kepler.gl 0.0.88 → 0.0.89

package/src/components/editor/editor.tsx

@@ -20,7 +20,7 @@
 
 import React, {Component, CSSProperties, KeyboardEvent} from 'react';
 import styled from 'styled-components';
-import {Editor as Draw} from 'react-map-gl-draw';
+import {Editor as Draw} from 'vendor/react-map-gl-draw';
 import window from 'global/window';
 import classnames from 'classnames';
 import get from 'lodash/get';

package/src/components/editor/feature-styles.ts

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {RenderStates, RenderTypes} from 'react-map-gl-draw';
+import {RenderStates, RenderTypes} from 'vendor/react-map-gl-draw';
 import get from 'lodash/get';
 import {COLORS} from './constants';
 

package/src/components/editor/handle-style.ts

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {RenderStates, RenderTypes} from 'react-map-gl-draw';
+import {RenderStates, RenderTypes} from 'vendor/react-map-gl-draw';
 import {COLORS} from './constants';
 import get from 'lodash/get';
 

package/src/components/map/layer-selector-panel.tsx

@@ -93,8 +93,7 @@ function LayerSelectorPanelFactory(
           key={1}
           onClick={onToggleMenuPanel}
           className={classnames('map-control-button', 'toggle-layer', {isActive})}
-          data-tip
-          data-for="toggle-layer"
+          data-tooltip-id="toggle-layer"
         >
           {iconLayersComponent ? iconLayersComponent : <Layers height="22px" />}
           <MapControlTooltip

package/src/components/map/map-control-tooltip.tsx

@@ -30,7 +30,7 @@ export type MapControlTooltipProps = {
 function MapControlTooltipFactory() {
   /** @type {import('./map-control-tooltip').MapControlTooltipComponent} */
   const MapControlTooltip: React.FC<MapControlTooltipProps> = React.memo(({id, message}) => (
-    <Tooltip id={id} place="left" effect="solid">
+    <Tooltip id={id} place="left">
       <span>
         <FormattedMessage id={message} />
       </span>

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

@@ -50,8 +50,7 @@ const DatasetColorPicker = styled.div`
 const UpdateTableColor = ({children, id}: UpdateTableColorTypes) => (
   <DatasetColorPicker
     className="dataset-action update-color"
-    data-tip
-    data-for={`update-color-${id}`}
+    data-tooltip-id={`update-color-${id}`}
   >
     {children}
   </DatasetColorPicker>
@@ -65,11 +64,10 @@ export default function DatasetTagFactory() {
           className="dataset-color"
           backgroundColor={dataset.color}
           onClick={onClickSquare}
-          data-tip
-          data-for={`update-color-${id}`}
+          data-tooltip-id={`update-color-${id}`}
         />
         {updateTableColor ? (
-          <Tooltip id={`update-color-${id}`} effect="solid">
+          <Tooltip id={`update-color-${id}`}>
             <span>
               <FormattedMessage id={'Update color'} />
             </span>

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

@@ -68,7 +68,7 @@ const DataTagAction = styled.div`
 `;
 
 const ShowDataTable = ({id, showDatasetTable}: ShowDataTableProps) => (
-  <DataTagAction className="dataset-action show-data-table" data-tip data-for={`data-table-${id}`}>
+  <DataTagAction className="dataset-action show-data-table" data-tooltip-id={`data-table-${id}`}>
     <Table
       height="16px"
       onClick={e => {
@@ -76,7 +76,7 @@ const ShowDataTable = ({id, showDatasetTable}: ShowDataTableProps) => (
         showDatasetTable?.(id);
       }}
     />
-    <Tooltip id={`data-table-${id}`} effect="solid">
+    <Tooltip id={`data-table-${id}`}>
       <span>
         <FormattedMessage id={'datasetTitle.showDataTable'} />
       </span>
@@ -85,11 +85,7 @@ const ShowDataTable = ({id, showDatasetTable}: ShowDataTableProps) => (
 );
 
 const RemoveDataset = ({datasetKey, removeDataset}: RemoveDatasetProps) => (
-  <DataTagAction
-    className="dataset-action remove-dataset"
-    data-tip
-    data-for={`delete-${datasetKey}`}
-  >
+  <DataTagAction className="dataset-action remove-dataset" data-tooltip-id={`delete-${datasetKey}`}>
     <Trash
       height="16px"
       onClick={e => {
@@ -97,7 +93,7 @@ const RemoveDataset = ({datasetKey, removeDataset}: RemoveDatasetProps) => (
         removeDataset?.(datasetKey);
       }}
     />
-    <Tooltip id={`delete-${datasetKey}`} effect="solid" type="error">
+    <Tooltip id={`delete-${datasetKey}`} variant="error">
       <span>
         <FormattedMessage id={'datasetTitle.removeDataset'} />
       </span>

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

@@ -323,13 +323,12 @@ export function PaletteConfigFactory() {
             className={`color-palette__config__button ${
               value ? 'color-palette__config__button--active' : ''
             }`}
-            data-tip
-            data-for={`${label}-tooltip`}
+            data-tooltip-id={`${label}-tooltip`}
             {...(!value && {link: true})}
             onClick={() => onChange(!value)}
           >
             <SwapHorizontal />
-            <Tooltip id={`${label}-tooltip`} effect="solid" place="top">
+            <Tooltip id={`${label}-tooltip`} place="top">
               {label}
             </Tooltip>
           </Button>
@@ -371,11 +370,10 @@ export function ColorPaletteGroupFactory() {
               isReversed={reversed}
               isSelected={colorRange.name === selected.name}
               rootProps={{
-                'data-tip': true,
-                'data-for': `color-range-${i}-tooltip`
+                'data-tooltip-id': `color-range-${i}-tooltip`
               }}
             >
-              <Tooltip id={`color-range-${i}-tooltip`} effect="solid" place="top">
+              <Tooltip id={`color-range-${i}-tooltip`} place="top">
                 {colorRange.name}
               </Tooltip>
             </ColorPalette>

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

@@ -216,7 +216,7 @@ function LayerConfigGroupFactory(
             <LayerConfigGroupLabel label={label} description={description} />
             <StyledLayerConfigGroupAction className="layer-config-group__action">
               {property ? (
-                <StyledLayerConfigGroupSwitch data-tip data-for={`${layer.id}-${label}-tooltip`}>
+                <StyledLayerConfigGroupSwitch data-tooltip-id={`${layer.id}-${label}-tooltip`}>
                   <Switch
                     checked={layer?.config.visConfig[property]}
                     id={`${layer?.id}-${property}`}
@@ -224,7 +224,7 @@ function LayerConfigGroupFactory(
                     onChange={() => onChange?.({[property]: !layer?.config.visConfig[property]})}
                   />
                   {switchTooltip ? (
-                    <Tooltip id={`${layer?.id}-${label}-tooltip`} effect="solid" place="top">
+                    <Tooltip id={`${layer?.id}-${label}-tooltip`} place="top">
                       {switchTooltip}
                     </Tooltip>
                   ) : null}

package/src/components/side-panel/layer-panel/panel-view-list-toggle.tsx

@@ -66,13 +66,12 @@ export const StyledToggleOption = styled.div.attrs({
 function ToggleOptionFactory() {
   const ToggleOption: React.FC<ToggleOptionProps> = ({isActive, onClick, option}) => (
     <StyledToggleOption
-      data-tip
-      data-for={`${option.id}-toggle-option`}
+      data-tooltip-id={`${option.id}-toggle-option`}
       active={isActive}
       onClick={onClick}
     >
       <option.iconComponent height="20px" />
-      <Tooltip id={`${option.id}-toggle-option`} effect="solid" delayShow={500} place="bottom">
+      <Tooltip id={`${option.id}-toggle-option`} delayShow={500} place="bottom">
         <span>
           <FormattedMessage id={option.label} />
         </span>

package/src/components/side-panel/panel-header-action.tsx

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import React, {Component, ComponentType, MouseEventHandler} from 'react';
-import {TooltipProps} from 'react-tooltip';
+import {VariantType} from 'react-tooltip';
 import classnames from 'classnames';
 import styled from 'styled-components';
 import {FormattedMessage} from 'localization';
@@ -35,7 +35,7 @@ interface PanelHeaderActionProps {
   flush?: boolean;
   disabled?: boolean;
   onClick?: MouseEventHandler;
-  tooltipType?: TooltipProps['type'];
+  tooltipType?: VariantType;
   IconComponent: ComponentType<Partial<BaseProps>>;
 }
 
@@ -94,13 +94,12 @@ export default function PanelHeaderActionFactory(): React.ComponentType<PanelHea
           flush={flush}
         >
           <this.props.IconComponent
-            data-tip
-            data-for={`${tooltip}_${id}`}
+            data-tooltip-id={`${tooltip}_${id}`}
             height="16px"
             onClick={onClick}
           />
           {tooltip ? (
-            <Tooltip id={`${tooltip}_${id}`} effect="solid" delayShow={500} type={tooltipType}>
+            <Tooltip id={`${tooltip}_${id}`} delayShow={500} variant={tooltipType}>
               <span>
                 <FormattedMessage id={tooltip} />
               </span>

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

@@ -156,13 +156,13 @@ const StyledToolbar = styled(Toolbar)`
 `;
 
 export const PanelAction: React.FC<PanelActionProps> = ({item, onClick}) => (
-  <StyledPanelAction data-tip data-for={`${item.id}-action`} onClick={onClick}>
+  <StyledPanelAction data-tooltip-id={`${item.id}-action`} onClick={onClick}>
     {item.label ? <p>{item.label}</p> : null}
     <a target={item.blank ? '_blank' : ''} href={item.href} rel="noreferrer">
       <item.iconComponent height="20px" {...item.iconComponentProps} />
     </a>
     {item.tooltip ? (
-      <Tooltip id={`${item.id}-action`} place="bottom" delayShow={500} effect="solid">
+      <Tooltip id={`${item.id}-action`} place="bottom" delayShow={500}>
         <FormattedMessage id={item.tooltip} />
       </Tooltip>
     ) : null}

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

@@ -63,9 +63,9 @@ export const StyledPanelTab = styled.div.attrs({
 
 export function PanelTabFactory() {
   const PanelTab: React.FC<PanelTabProps> = ({isActive, onClick, panel}) => (
-    <StyledPanelTab data-tip data-for={`${panel.id}-nav`} active={isActive} onClick={onClick}>
+    <StyledPanelTab data-tooltip-id={`${panel.id}-nav`} active={isActive} onClick={onClick}>
       <panel.iconComponent height="20px" />
-      <Tooltip id={`${panel.id}-nav`} effect="solid" delayShow={500} place="bottom">
+      <Tooltip id={`${panel.id}-nav`} delayShow={500} place="bottom">
         <span>
           <FormattedMessage id={panel.label || panel.id} />
         </span>

package/src/constants/default-settings.ts

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import keyMirror from 'keymirror';
-import {EditorModes} from 'react-map-gl-draw';
+import {EditorModes} from 'vendor/react-map-gl-draw';
 
 import {Color} from '@deck.gl/core';
 import {

package/src/vendor/react-map-gl-draw/LICENSE

@@ -0,0 +1,9 @@
+nebula.gl
+Copyright (c) 2018 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.
+

package/src/vendor/react-map-gl-draw/constants.js

@@ -0,0 +1,70 @@
+// Vendored from react-map-gl-draw@0.14.8 (MIT, Copyright (c) 2018 Uber Technologies, Inc.), see ./LICENSE
+export const MODES = {
+  READ_ONLY: 'READ_ONLY',
+  SELECT_FEATURE: 'SELECT_FEATURE',
+  EDIT_VERTEX: 'EDIT_VERTEX',
+  DRAW_POINT: 'DRAW_POINT',
+  DRAW_PATH: 'DRAW_PATH',
+  DRAW_POLYGON: 'DRAW_POLYGON',
+  DRAW_RECTANGLE: 'DRAW_RECTANGLE'
+};
+
+export const DRAWING_MODES = [
+  MODES.DRAW_POINT,
+  MODES.DRAW_PATH,
+  MODES.DRAW_POLYGON,
+  MODES.DRAW_RECTANGLE
+];
+
+export const GEOJSON_TYPE = {
+  POINT: 'Point',
+  LINE_STRING: 'LineString',
+  POLYGON: 'Polygon'
+};
+
+export const MODE_TO_GEOJSON_TYPE = {
+  [MODES.DRAW_POINT]: GEOJSON_TYPE.POINT,
+  [MODES.DRAW_PATH]: GEOJSON_TYPE.LINE_STRING,
+  [MODES.DRAW_POLYGON]: GEOJSON_TYPE.POLYGON,
+  [MODES.DRAW_RECTANGLE]: GEOJSON_TYPE.POLYGON
+};
+
+export const RENDER_TYPE = {
+  POINT: 'Point',
+  LINE_STRING: 'LineString',
+  POLYGON: 'Polygon',
+  RECTANGLE: 'Rectangle'
+};
+
+export const MODE_TO_RENDER_TYPE = {
+  [MODES.DRAW_POINT]: RENDER_TYPE.POINT,
+  [MODES.DRAW_PATH]: RENDER_TYPE.LINE_STRING,
+  [MODES.DRAW_POLYGON]: RENDER_TYPE.POLYGON,
+  [MODES.DRAW_RECTANGLE]: RENDER_TYPE.RECTANGLE
+};
+
+export const RENDER_STATE = {
+  INACTIVE: 'INACTIVE',
+  UNCOMMITTED: 'UNCOMMITTED',
+  SELECTED: 'SELECTED',
+  HOVERED: 'HOVERED',
+  CLOSING: 'CLOSING'
+};
+
+export const OPERATIONS = {
+  NONE: 'NONE',
+  SET: 'SET',
+  INTERSECT: 'INTERSECT',
+  INSERT: 'INSERT'
+};
+
+export const STATIC_STYLE = {
+  cursor: 'default',
+  pointerEvents: 'none'
+};
+
+export const ELEMENT_TYPE = {
+  FEATURE: 'feature',
+  SEGMENT: 'segment',
+  VERTEX: 'vertex'
+};