@carto/kepler.gl 0.0.42 → 0.0.43

package/package.json

@@ -2,7 +2,7 @@
   "name": "@carto/kepler.gl",
   "author": "CARTO",
   "homepage": "https://github.com/CartoDB/carto-kepler#readme",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "description": "kepler.gl is a webgl based application to visualize large scale location data in the browser",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/common/field-selector.js

@@ -28,32 +28,47 @@ import {classList} from './item-selector/dropdown-list';
 import {toArray} from 'utils/utils';
 import {notNullorUndefined} from 'utils/data-utils';
 import FieldTokenFactory from '../common/field-token';
+import {FIELD_TYPES_AGGREGATORS, FIELD_AGGREGATORS} from 'constants/default-settings';
 
-const defaultDisplayOption = d => d.displayName || d.name;
+const defaultDisplayOption = d => {
+  const optionName = d.displayName || d.name;
+  const aggregator = d.aggregator;
+  const aggegatorDisplay = FIELD_AGGREGATORS.find(a => a.id === aggregator)?.displayName;
+  if (aggegatorDisplay) {
+    return `${aggegatorDisplay}(${optionName})`;
+  }
+  return optionName;
+};
 const defaultValueOption = d => d.name;
 
 const StyledToken = styled.div`
   display: inline-block;
-  margin: 0 ${props => props.theme.fieldTokenRightMargin}px 0 0;
+  margin: 0 0 0 auto;
 `;
 const StyledFieldListItem = styled.div`
+  display: flex;
+  flex: 1 1 auto;
+  margin-right: 10px;
   line-height: 0;
+  align-items: center;
 `;
 
 FieldListItemFactoryFactory.deps = [FieldTokenFactory];
 // custom list Item
 export function FieldListItemFactoryFactory(FieldToken) {
   const FieldListItemFactory = (showToken = true) => {
-    const FieldListItem = ({value, displayOption = defaultDisplayOption}) => (
-      <StyledFieldListItem className="field-selector_list-item">
-        {showToken ? (
-          <StyledToken>
-            <FieldToken type={value.type} />
-          </StyledToken>
-        ) : null}
-        <span className={classList.listItemAnchor}>{displayOption(value)}</span>
-      </StyledFieldListItem>
-    );
+    const FieldListItem = ({value, displayOption = defaultDisplayOption}) => {
+      return (
+        <StyledFieldListItem className="field-selector_list-item">
+          <span className={classList.listItemAnchor}>{displayOption(value)}</span>
+          {showToken && value.type ? (
+            <StyledToken>
+              <FieldToken type={value.type} />
+            </StyledToken>
+          ) : null}
+        </StyledFieldListItem>
+      );
+    };
     return FieldListItem;
   };
   return FieldListItemFactory;
@@ -86,6 +101,8 @@ function FieldSelectorFactory(FieldListItemFactory) {
       onSelect: PropTypes.func.isRequired,
       placement: PropTypes.string,
       value: FieldType,
+      aggregator: PropTypes.string,
+      withAggregator: PropTypes.bool,
       filterFieldTypes: PropTypes.oneOfType([FieldType, PropTypes.arrayOf(FieldType)]),
       inputTheme: PropTypes.string,
       placeholder: PropTypes.string,
@@ -106,6 +123,8 @@ function FieldSelectorFactory(FieldListItemFactory) {
       onSelect: () => {},
       placement: 'bottom',
       value: null,
+      aggregator: null,
+      withAggregator: false,
       multiSelect: false,
       closeOnSelect: true,
       showToken: true,
@@ -114,38 +133,59 @@ function FieldSelectorFactory(FieldListItemFactory) {
 
     fieldsSelector = props => props.fields;
     filteredFieldsSelector = props =>
-      props.fields.filter(
+      props.withAggregator ? props.fields : props.fields.filter(
         field =>
           !toArray(props.value).find(d => (d.name ? d.name === field.name : d === field.name))
       );
     valueSelector = props => props.value;
+    aggregatorSelector = props => props.aggregator;
     filterFieldTypesSelector = props => props.filterFieldTypes;
     showTokenSelector = props => props.showToken;
+    withAggregatorSelector = props => props.withAggregator
 
     selectedItemsSelector = createSelector(
       this.fieldsSelector,
       this.valueSelector,
-      (fields, value) =>
+      this.aggregatorSelector,
+      (fields, value, aggregator) =>
         toArray(value)
-          .map(d =>
-            fields.find(f =>
+          .map(d => {
+            const field = fields.find(f =>
               notNullorUndefined(d) && d.name
                 ? d.name === defaultValueOption(f)
                 : d === defaultValueOption(f)
-            )
-          )
+            );
+
+            if (field && aggregator) {
+              return {...field, aggregator};
+            }
+            return field;
+          })
           .filter(d => d)
     );
 
     fieldOptionsSelector = createSelector(
       this.filteredFieldsSelector,
+      this.valueSelector,
       this.filterFieldTypesSelector,
-      (fields, filterFieldTypes) => {
+      this.aggregatorSelector,
+      this.withAggregatorSelector,
+      (fields, value, filterFieldTypes, aggregator, withAggregator) => {
+        const fieldsWithAggregators = fields.map(field => {
+          return {
+            ...field,
+            ...(withAggregator && {
+              aggregators: FIELD_TYPES_AGGREGATORS[field.type]?.filter(agg => {
+                return field.id === value ? agg !== aggregator : true;
+              })
+            })
+          };
+        });
         if (!filterFieldTypes) {
-          return fields;
+          return fieldsWithAggregators;
         }
         const filters = Array.isArray(filterFieldTypes) ? filterFieldTypes : [filterFieldTypes];
-        return fields.filter(f => filters.includes(f.type));
+        return fieldsWithAggregators.filter(f => filters.includes(f.type));
       }
     );
 
@@ -174,6 +214,7 @@ function FieldSelectorFactory(FieldListItemFactory) {
             DropDownLineItemRenderComponent={this.fieldListItemSelector(this.props)}
             DropdownHeaderComponent={this.props.suggested ? SuggestedFieldHeader : null}
             CustomChickletComponent={this.props.CustomChickletComponent}
+            withSubOptions={this.props.withAggregator}
           />
         </div>
       );

package/src/components/common/field-token.js

@@ -21,25 +21,24 @@
 import React from 'react';
 import styled from 'styled-components';
 import {FILED_TYPE_DISPLAY, FIELD_COLORS} from 'constants/default-settings';
-function FieldTokenFactory(fieldTypeDisplay, fieldColors) {
+function FieldTokenFactory(fieldTypeDisplay) {
   const FieldTag = styled.div`
-    background-color: rgba(${props => props.color}, 0.2);
+    background-color: #f8f9f9;
+    color: #888b8c;
     border-radius: 2px;
-    border: 1px solid rgb(${props => props.color});
-    color: rgb(${props => props.color});
-    display: inline-block;
-    font-size: 10px;
-    font-weight: 400;
-    padding: 0 5px;
-    text-align: center;
-    width: 40px;
-    line-height: 20px;
+    border: 1px solid #cbcdcf;
+    font-family: 'Overpass Mono', monospace;
+    font-weight: 600;
+    font-size: 12px;
+    height: 15px;
+    line-height: 15px;
+    padding: 0 4px;
+    width: auto;
+    text-transform: none;
   `;
 
   const FieldToken = ({type}) => (
-    <FieldTag
-      color={(fieldTypeDisplay[type] && fieldTypeDisplay[type].color) || fieldColors.default}
-    >
+    <FieldTag>
       {fieldTypeDisplay[type].label}
     </FieldTag>
   );

package/src/components/common/icons/chevron-right.js

@@ -0,0 +1,47 @@
+// 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 PropTypes from 'prop-types';
+import Base from './base';
+
+export default class ChevronRight extends Component {
+  static propTypes = {
+    /** Set the height of the icon, ex. '16px' */
+    height: PropTypes.string,
+    predefinedClassName: PropTypes.string,
+    viewBox: PropTypes.string,
+    style: PropTypes.object
+  };
+
+  static defaultProps = {
+    height: '16px',
+    predefinedClassName: 'data-ex-icons-chevron-right',
+    viewBox: '0 0 18 18'
+  };
+
+  render() {
+    return (
+      <Base {...this.props}>
+        <path d="M7.125 12.75 10.875 9l-3.75-3.75z" fill="#2C3032"/>
+      </Base>
+    );
+  }
+}

package/src/components/common/icons/index.js

@@ -32,6 +32,7 @@ export {default as Base} from './base';
 export {default as Bug} from './bug';
 export {default as Cancel} from './cancel';
 export {default as Checkmark} from './checkmark';
+export {default as ChevronRight} from './chevron-right';
 export {default as Clipboard} from './clipboard';
 export {default as Clock} from './clock';
 export {default as Close} from './close';

package/src/components/common/item-selector/dropdown-list.js

@@ -18,10 +18,13 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component} from 'react';
+import React, {Component, createRef} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styled from 'styled-components';
+import ItemSelectorSubmenu from './item-selector-submenu';
+import {ChevronRight} from 'components/common/icons';
+import {FIELD_AGGREGATORS} from 'constants/default-settings';
 
 export const classList = {
   list: 'list-selector',
@@ -45,9 +48,34 @@ const DropdownListWrapper = styled.div`
   ${props => (props.light ? props.theme.dropdownListLT : props.theme.dropdownList)};
 `;
 
+const DropdownListContainer = styled.div`
+  position: relative;
+`;
+
+const Item = styled.div`
+  position: relative;
+  padding-right: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  svg {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    opacity: 0.6;
+  }
+  &:hover, &.hover {
+    svg {
+      opacity: 1;
+    }
+  }
+`;
+
 export default class DropdownList extends Component {
   static propTypes = {
     options: PropTypes.arrayOf(PropTypes.any),
+    subOptions: PropTypes.arrayOf(PropTypes.any),
     allowCustomValues: PropTypes.number,
     customClasses: PropTypes.object,
     customValues: PropTypes.arrayOf(PropTypes.any),
@@ -59,7 +87,9 @@ export default class DropdownList extends Component {
     defaultClassNames: PropTypes.bool,
     areResultsTruncated: PropTypes.bool,
     resultsTruncatedMessage: PropTypes.string,
-    listItemComponent: PropTypes.func
+    listItemComponent: PropTypes.func,
+    searchEntryValue: PropTypes.string,
+    withSubOptions: PropTypes.bool
   };
 
   static defaultProps = {
@@ -71,12 +101,62 @@ export default class DropdownList extends Component {
     displayOption: defaultDisplay,
     onOptionSelected: () => {},
     defaultClassNames: true,
-    selectionIndex: null
+    selectionIndex: null,
+    withSubOptions: false
   };
 
-  _onClick(result, event) {
-    event.preventDefault();
-    this.props.onOptionSelected(result, event);
+  state = {
+    currentOption: {},
+    submenuVisible: false,
+    submenuPosition: {}
+  };
+
+  hasSubOptions = !!this.props.subOptions
+
+  ref = createRef();
+
+  _resetState(callback) {
+    this.setState({currentOption: {}, submenuVisible: false, submenuPosition: {}}, callback);
+  }
+
+  _onClick(option, subOption, event) {
+    const optionSelected =
+      typeof option !== 'object'
+        ? option
+        : {
+            ...option,
+            selectedAggregator: subOption?.id
+          };
+    if (
+      (this.props.withSubOptions && (subOption?.id || !option.aggregators)) ||
+      !this.props.withSubOptions
+    ) {
+      this.props.onOptionSelected(optionSelected, event);
+    }
+  }
+
+  _onMouseOver(option, event) {
+    const el = event.target
+    this.setState((previousState) => ({
+      currentOption: option,
+      submenuVisible: true,
+      submenuPosition: {
+        top: el.getBoundingClientRect().top,
+        left: previousState.submenuPosition.left ?previousState.submenuPosition.left : this.ref.current?.getBoundingClientRect().right
+      }
+    }));
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.searchEntryValue !== this.props.searchEntryValue) {
+      this._resetState();
+    }
+  }
+
+  componentDidMount() {
+    this.setState({
+      subMenuPosition: { left: this.ref.current?.getBoundingClientRect().right }
+    })
   }
 
   render() {
@@ -93,44 +173,63 @@ export default class DropdownList extends Component {
     // For some reason onClick is not fired when clicked on an option
     // onMouseDown is used here as a workaround of #205 and other
     return (
-      <DropdownListWrapper className={classList.list} light={light}>
-        {this.props.customListHeaderComponent ? (
-          <div className={classList.listHeader}>
-            <this.props.customListHeaderComponent />
-          </div>
-        ) : null}
+      <DropdownListContainer onMouseLeave={() => this._resetState()}>
+        <DropdownListWrapper className={classList.list} light={light}>
+          {this.props.customListHeaderComponent ? (
+            <div className={classList.listHeader}>
+              <this.props.customListHeaderComponent />
+            </div>
+          ) : null}
+          <div ref={this.ref}>
+            {valueOffset > 0 ? (
+              <div className={classList.listSection}>
+                {fixedOptions.map((value, i) => (
+                  <div
+                    className={classNames(classList.listItem, {
+                      active: this.props.selectionIndex === i,
+                      hover: value.id && (this.state.currentOption?.id === value.id),
+                      fixed: true
+                    })}
+                    key={`${display(value)}_${i}`}
+                    onMouseDown={e => !this.hasSubOptions && this._onClick(value, null, e)}
+                    onClick={e => !this.hasSubOptions && this._onClick(value, null, e)}
+                    onMouseEnter={e => this._onMouseOver(value, e)}
+                  >
+                    <this.props.customListItemComponent value={value} displayOption={display} />
+                  </div>
+                ))}
+              </div>
+            ) : null}
 
-        {valueOffset > 0 ? (
-          <div className={classList.listSection}>
-            {fixedOptions.map((value, i) => (
-              <div
+            {this.props.options.map((value, i) => (
+              <Item
                 className={classNames(classList.listItem, {
-                  hover: this.props.selectionIndex === i,
-                  fixed: true
+                  active: this.props.selectionIndex === i + valueOffset,
+                  hover: value.id && (this.state.currentOption?.id === value.id)
                 })}
                 key={`${display(value)}_${i}`}
-                onMouseDown={e => this._onClick(value, e)}
-                onClick={e => this._onClick(value, e)}
+                onMouseDown={e => !this.hasSubOptions && this._onClick(value, null, e)}
+                onClick={e => !this.hasSubOptions && this._onClick(value, null, e)}
+                onMouseEnter={e => this._onMouseOver(value, e)}
               >
                 <this.props.customListItemComponent value={value} displayOption={display} />
-              </div>
+                {this.props.withSubOptions && value.aggregators && <ChevronRight />}
+              </Item>
             ))}
           </div>
-        ) : null}
-
-        {this.props.options.map((value, i) => (
-          <div
-            className={classNames(classList.listItem, {
-              hover: this.props.selectionIndex === i + valueOffset
-            })}
-            key={`${display(value)}_${i}`}
-            onMouseDown={e => this._onClick(value, e)}
-            onClick={e => this._onClick(value, e)}
-          >
-            <this.props.customListItemComponent value={value} displayOption={display} />
-          </div>
-        ))}
-      </DropdownListWrapper>
+        </DropdownListWrapper>
+        {this.props.withSubOptions &&
+          this.state.currentOption &&
+          this.state.currentOption.aggregators && (
+            <ItemSelectorSubmenu
+              position={this.state.submenuPosition}
+              options={this.state.currentOption.aggregators.map(a =>
+                FIELD_AGGREGATORS.find(am => am.id === a)
+              )}
+              onClick={(aggregator, e) => this._onClick(this.state.currentOption, aggregator, e)}
+            />
+          )}
+      </DropdownListContainer>
     );
   }
 }

package/src/components/common/item-selector/item-selector-submenu.js

@@ -0,0 +1,88 @@
+// 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, createRef} from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const ItemSelectorSubmenuStyled = styled.div`
+  padding: 5px 0;
+  position: fixed;
+  min-width: 100px;
+  top: ${props => props.position.top}px;
+  left: ${props => props.position.left}px;
+  z-index: 999;
+  font-weight: 500;
+  transform: translateY(${props => props.verticalTranslation}px);
+  ${props => (props.light ? props.theme.dropdownListLT : props.theme.dropdownList)};
+  background-color: ${props =>
+    props.light ? props.theme.dropdownListBgdLT : props.theme.dropdownListBgd};
+`
+
+class ItemSelectorSubmenu extends Component {
+  static propTypes = {
+    position: PropTypes.object,
+    options: PropTypes.array,
+    onClick: PropTypes.func
+  }
+
+  state = {
+    verticalTranslation: 0
+  }
+
+  container = createRef()
+
+  _adjustPosition() {
+    this.setState({ verticalTranslation: 0 }, () => {
+      const containerOffsetBottom = window.innerHeight - this.container.current.getBoundingClientRect().bottom;
+      if (containerOffsetBottom < 0) {
+        this.setState({ verticalTranslation: containerOffsetBottom })
+      }
+    })
+  }
+
+  componentDidMount() {
+    this._adjustPosition()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.position.top !== prevProps.position.top) {
+      this._adjustPosition()
+    }
+  }
+
+  render() {
+    return (
+      <ItemSelectorSubmenuStyled
+        position={this.props.position}
+        ref={this.container}
+        verticalTranslation={this.state.verticalTranslation}
+      >
+        {this.props.options.map((option, i) => (
+          <div className="list__item" key={i} onClick={e => this.props.onClick(option, e)}>
+            {option.displayName}
+          </div>
+        ))}
+      </ItemSelectorSubmenuStyled>
+    )
+  }
+}
+
+export default ItemSelectorSubmenu;

package/src/components/common/item-selector/item-selector.d.ts

@@ -25,7 +25,8 @@ export type ItemSelectorProps = {
   DropdownHeaderComponent?: ComponentType<any> | null,
   DropDownRenderComponent?: ComponentType<any>,
   DropDownLineItemRenderComponent?: ComponentType<any>,
-  CustomChickletComponent?: ComponentType<any>
+  CustomChickletComponent?: ComponentType<any>,
+  withSubOptions?: boolean
 };
 
 const ItemSelector: FunctionComponent<ItemSelectorProps>;

package/src/components/common/item-selector/item-selector.js

@@ -136,7 +136,8 @@ class ItemSelector extends Component {
     DropdownHeaderComponent: PropTypes.func,
     DropDownRenderComponent: PropTypes.func,
     DropDownLineItemRenderComponent: PropTypes.func,
-    CustomChickletComponent: PropTypes.func
+    CustomChickletComponent: PropTypes.func,
+    withSubOptions: PropTypes.bool
   };
 
   static defaultProps = {
@@ -156,7 +157,8 @@ class ItemSelector extends Component {
     dropdownHeader: null,
     DropdownHeaderComponent: null,
     DropDownRenderComponent: DropdownList,
-    DropDownLineItemRenderComponent: ListItem
+    DropDownLineItemRenderComponent: ListItem,
+    withSubOptions: false
   };
 
   state = {
@@ -265,6 +267,7 @@ class ItemSelector extends Component {
           showOptionsWhenEmpty
           selectedItems={toArray(this.props.selectedItems)}
           light={this.props.inputTheme === 'light'}
+          withSubOptions={this.props.withSubOptions}
         />
       </DropdownWrapper>
     );