@carto/kepler.gl 0.0.40-alpha.3 → 0.0.40-alpha.aggregation-selector

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

@@ -43,7 +43,7 @@ const TypeaheadWrapper = styled.div`
   display: flex;
   flex-direction: column;
   background-color: ${props =>
-    props.light ? props.theme.dropdownListBgdLT : props.theme.dropdownListBgd};
+    props.light ? props.theme.dropdownListBgdLT : props.theme.inputBgd};
   box-shadow: ${props => props.theme.dropdownListShadow};
 
   :focus {
@@ -51,27 +51,29 @@ const TypeaheadWrapper = styled.div`
   }
 `;
 
-const InputBox = styled.div.attrs({
-  className: 'typeahead__input_box'
-})`
-  padding: 8px;
-`;
+const InputBox = styled.div`
+  position: relative;
+  margin: 8px;
+`
 
 const TypeaheadInput = styled.input`
-  ${props => (props.light ? props.theme.inputLT : props.theme.secondaryInput)} :hover {
-    cursor: pointer;
-    background-color: ${props =>
-      props.light ? props.theme.selectBackgroundLT : props.theme.secondaryInputBgd};
-  }
+  ${props => (props.light ? props.theme.inputLT : props.theme.secondaryInput)};
+  width: 100%;
+  padding-left: 35px;
+  background-color: ${props => props.light ? props.theme.inputBgd : '#eee'};
+  border: none;
 `;
 
-const InputIcon = styled.div.attrs({
-  className: 'typeahead__input_icon'
-})`
+const InputIcon = styled.div`
   position: absolute;
-  right: 15px;
-  top: 14px;
+  left: 10px;
+  top: 50%;
+  z-index: 2;
+  transform: translateY(-50%);
   color: ${props => props.theme.inputPlaceholderColor};
+  svg {
+    display: block;
+  }
 `;
 
 function generateSearchFunction(props) {
@@ -151,7 +153,8 @@ class Typeahead extends Component {
     customListItemComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
     customListHeaderComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
     showOptionsWhenEmpty: PropTypes.bool,
-    searchable: PropTypes.bool
+    searchable: PropTypes.bool,
+    withSubOptions: PropTypes.bool
   };
 
   static defaultProps = {
@@ -181,7 +184,8 @@ class Typeahead extends Component {
     customListHeaderComponent: null,
     showOptionsWhenEmpty: true,
     searchable: true,
-    resultsTruncatedMessage: null
+    resultsTruncatedMessage: null,
+    withSubOptions: false
   };
 
   static getDerivedStateFromProps(props, state) {
@@ -247,6 +251,7 @@ class Typeahead extends Component {
     return (
       <this.props.customListComponent
         fixedOptions={this.props.fixedOptions}
+        searchEntryValue={this.state.entryValue}
         options={
           this.props.maxVisible
             ? this.state.searchResults.slice(0, this.props.maxVisible)
@@ -267,6 +272,7 @@ class Typeahead extends Component {
         displayOption={this.props.displayOption}
         selectedItems={this.props.selectedItems}
         light={this.props.light}
+        withSubOptions={this.props.withSubOptions}
       />
     );
   }
@@ -473,6 +479,9 @@ class Typeahead extends Component {
         {this._renderHiddenInput()}
         {this.props.searchable ? (
           <InputBox>
+            <InputIcon>
+              <this.props.inputIcon height="18px" />
+            </InputIcon>
             <TypeaheadInput
               ref={this.entry}
               type="text"
@@ -485,9 +494,6 @@ class Typeahead extends Component {
               onBlur={this._onBlur}
               light={this.props.light}
             />
-            <InputIcon>
-              <this.props.inputIcon height="18px" />
-            </InputIcon>
           </InputBox>
         ) : null}
         {this._renderIncrementalSearchResults()}

package/src/components/index.js

@@ -70,7 +70,6 @@ export {default as LayerPanelHeaderFactory} from './side-panel/layer-panel/layer
 export {default as LayerConfiguratorFactory} from './side-panel/layer-panel/layer-configurator';
 export {default as TextLabelPanelFactory} from './side-panel/layer-panel/text-label-panel';
 export {LayerConfigGroupLabelFactory} from './side-panel/layer-panel/layer-config-group';
-export {default as LayerVisibilityByZoomFactory} from './side-panel/layer-panel/layer-visibility-by-zoom';
 
 export {default as SourceDataCatalogFactory} from './side-panel/common/source-data-catalog';
 export {default as SourceDataSelectorFactory} from './side-panel/common/source-data-selector';

package/src/components/map-container.js

@@ -481,20 +481,6 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
             }
           }}
           onWebGLInitialized={gl => this._onDeckInitialized(gl)}
-          layerFilter={({layer, viewport}) => {
-            if (
-              isNaN(layer.props.visibilityByZoom?.min) ||
-              isNaN(layer.props.visibilityByZoom?.max)
-            ) {
-              return true;
-            }
-            const currentZoomRange = Math.floor(mapState.zoom);
-
-            return (
-              layer.props.visibilityByZoom.min <= currentZoomRange &&
-              layer.props.visibilityByZoom.max >= currentZoomRange
-            );
-          }}
         />
       );
     }

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

@@ -30,7 +30,6 @@ import ItemSelector from 'components/common/item-selector/item-selector';
 import VisConfigByFieldSelectorFactory from './vis-config-by-field-selector';
 import LayerColumnConfigFactory from './layer-column-config';
 import LayerTypeSelectorFactory from './layer-type-selector';
-import LayerVisibilityByZoomFactory from './layer-visibility-by-zoom';
 import DimensionScaleSelector from './dimension-scale-selector';
 import ColorSelector from './color-selector';
 import SourceDataSelectorFactory from 'components/side-panel/common/source-data-selector';
@@ -98,8 +97,7 @@ LayerConfiguratorFactory.deps = [
   LayerColumnConfigFactory,
   LayerTypeSelectorFactory,
   VisConfigSwitchFactory,
-  AggrScaleSelectorFactory,
-  LayerVisibilityByZoomFactory
+  AggrScaleSelectorFactory
 ];
 
 export default function LayerConfiguratorFactory(
@@ -111,8 +109,7 @@ export default function LayerConfiguratorFactory(
   LayerColumnConfig,
   LayerTypeSelector,
   VisConfigSwitch,
-  AggrScaleSelector,
-  LayerVisibilityByZoom
+  AggrScaleSelector
 ) {
   class LayerConfigurator extends Component {
     static propTypes = {
@@ -962,7 +959,6 @@ export default function LayerConfiguratorFactory(
               layerTypeOptions={layerTypeOptions}
               onSelect={updateLayerType}
             />
-            <LayerVisibilityByZoom updateLayerConfig={this.props.updateLayerConfig} layer={layer} />
             {Object.keys(datasets).length > 1 && (
               <SourceDataSelector
                 datasets={datasets}
@@ -1108,6 +1104,7 @@ export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
     onChange,
     onChangeVisConfig,
     fields,
+    fieldsAggregated,
     description,
     isLoading
   }) => {
@@ -1115,6 +1112,7 @@ export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
       channelScaleType,
       domain,
       field,
+      aggregation,
       key,
       property,
       range,
@@ -1138,6 +1136,7 @@ export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
       scaleOptions.length > 1;
     const defaultDescription = 'layerConfiguration.defaultDescription';
     const visRange = layer.config.visConfig[range];
+    const aggregator = layer.config.visConfig[aggregation];
 
     return (
       <VisConfigByFieldSelector
@@ -1145,6 +1144,8 @@ export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
         description={description || defaultDescription}
         domain={layer.config[domain]}
         fields={supportedFields}
+        aggregator={aggregator}
+        fieldsAggregated={fieldsAggregated}
         id={layer.id}
         key={`${key}-channel-selector`}
         property={property}
@@ -1159,7 +1160,18 @@ export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
           if (visRange?.colorMap) {
             onChangeVisConfig({[range]: {...visRange, colorMap: undefined}});
           }
-          onChange({[field]: val}, key);
+          onChange(
+            {
+              [field]: val,
+              ...(fieldsAggregated && {
+                visConfig: {
+                  ...layer.config.visConfig,
+                  [aggregation]: val?.selectedAggregator
+                }
+              })
+            },
+            key
+          );
         }}
         updateScale={val => onChange({[scale]: val}, key)}
         updateCustomPalette={colorMap => onChangeVisConfig({[range]: {...visRange, colorMap}})}

package/src/components/side-panel/layer-panel/vis-config-by-field-selector.js

@@ -53,7 +53,9 @@ function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector, ColorDimensi
       description: PropTypes.string,
       label: PropTypes.string,
       placeholder: PropTypes.string,
-      isLoading: PropTypes.bool
+      isLoading: PropTypes.bool,
+      fieldsAggregated: PropTypes.bool,
+      aggregator: PropTypes.string
     };
 
     _updateVisByField = val => {
@@ -106,6 +108,8 @@ function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector, ColorDimensi
               onSelect={this._updateVisByField}
               erasable
               isLoading={this.props.isLoading}
+              withAggregator={this.props.fieldsAggregated}
+              aggregator={this.props.fieldsAggregated && this.props.aggregator}
             />
           </SidePanelSection>
           <div>

package/src/constants/default-settings.js

@@ -451,6 +451,57 @@ export const AGGREGATION_TYPES = {
   countUnique: 'count unique'
 };
 
+export const FIELD_TYPES_AGGREGATORS = {
+  date: null,
+  geojson: null,
+  integer: [
+    AGGREGATION_TYPES.average,
+    AGGREGATION_TYPES.maximum,
+    AGGREGATION_TYPES.minimum,
+    AGGREGATION_TYPES.stdev,
+    AGGREGATION_TYPES.sum,
+    AGGREGATION_TYPES.variance
+  ],
+  real: [
+    AGGREGATION_TYPES.average,
+    AGGREGATION_TYPES.maximum,
+    AGGREGATION_TYPES.minimum,
+    AGGREGATION_TYPES.stdev,
+    AGGREGATION_TYPES.sum,
+    AGGREGATION_TYPES.variance
+  ],
+  string: null,
+  timestamp: null,
+  point: null
+};
+
+export const FIELD_AGGREGATORS = [
+  {
+    id: AGGREGATION_TYPES.average,
+    displayName: 'AVG'
+  },
+  {
+    id: AGGREGATION_TYPES.maximum,
+    displayName: 'MAX'
+  },
+  {
+    id: AGGREGATION_TYPES.minimum,
+    displayName: 'MIN'
+  },
+  {
+    id: AGGREGATION_TYPES.stdev,
+    displayName: 'STDEV'
+  },
+  {
+    id: AGGREGATION_TYPES.sum,
+    displayName: 'SUM'
+  },
+  {
+    id: AGGREGATION_TYPES.variance,
+    displayName: 'VARIANCE'
+  }
+];
+
 export const linearFieldScaleFunctions = {
   [CHANNEL_SCALES.color]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
   [CHANNEL_SCALES.radius]: [SCALE_TYPES.sqrt],
@@ -903,8 +954,3 @@ export const MAP_CONTROLS = keyMirror({
 });
 
 export const MASK_LAYER_ID = 'mask_layer';
-
-export const ZOOM_LEVEL_LIMITS = {
-  min: 0,
-  max: 21
-};

package/src/constants/index.js

@@ -67,7 +67,8 @@ export {
   RESOLUTIONS,
   SORT_ORDER,
   MAP_CONTROLS,
-  UNKNOWN_COLOR
+  UNKNOWN_COLOR,
+  FIELD_AGGREGATORS
 } from './default-settings';
 
 export {BUG_REPORT_LINK, USER_GUIDE_DOC} from './user-guides';

package/src/layers/base-layer.js

@@ -36,8 +36,7 @@ import {
   SCALE_FUNC,
   CHANNEL_SCALE_SUPPORTED_FIELDS,
   MAX_GPU_FILTERS,
-  UNKNOWN_COLOR,
-  ZOOM_LEVEL_LIMITS
+  UNKNOWN_COLOR
 } from 'constants/default-settings';
 import {COLOR_RANGES} from 'constants/color-ranges';
 import {DataVizColors} from 'constants/custom-color-ranges';
@@ -299,10 +298,6 @@ class Layer {
   getDefaultLayerConfig(props = {}) {
     return {
       dataId: props.dataId || null,
-      visibilityByZoom: {
-        min: props.visibilityByZoom?.min || ZOOM_LEVEL_LIMITS.min,
-        max: props.visibilityByZoom?.max || ZOOM_LEVEL_LIMITS.max
-      },
       label: props.label || DEFAULT_LAYER_LABEL,
       color: props.color || colorMaker.next().value,
       columns: props.columns || null,
@@ -469,6 +464,7 @@ class Layer {
       shallowCopy,
       notToCopy
     });
+
     this.updateLayerConfig(copied);
     // validate visualChannel field type and scale types
     Object.keys(this.visualChannels).forEach(channel => {
@@ -1219,6 +1215,7 @@ class Layer {
 
   getDefaultDeckLayerProps({idx, gpuFilter, mapState, visible, maskPolygon}) {
     const maskExtensionProps = getMaskExtensionProps(maskPolygon);
+
     return {
       ...maskExtensionProps,
       id: this.id,
@@ -1228,10 +1225,6 @@ class Layer {
       wrapLongitude: true,
       parameters: {depthTest: Boolean(mapState.dragRotate || this.config.visConfig.enable3d)},
       hidden: this.config.hidden,
-      visibilityByZoom: {
-        min: this.config.visibilityByZoom.min,
-        max: this.config.visibilityByZoom.max
-      },
       // visconfig
       opacity: this.config.visConfig.opacity,
       highlightColor: this.config.highlightColor,

package/src/layers/index.d.ts

@@ -18,7 +18,6 @@ export type LayerConfig = {
   isConfigActive: boolean;
   highlightColor: RGBColor | RGBAColor;
   hidden: boolean;
-  visibilityByZoom: {min: number; max: number};
 
   colorField: VisualChannelField;
   colorDomain: VisualChannelDomain;

package/src/localization/ca.js

@@ -163,9 +163,6 @@ export default {
     heightRange: 'Rang alçada',
     heightMultiplier: "Multiplicador d'alçada"
   },
-  layerVisibility: {
-    title: 'Visibilitat per nivell de zoom'
-  },
   layerManager: {
     addData: 'Afegeix Dades',
     addLayer: 'Afegeix Capes',

package/src/localization/cn.js

@@ -160,9 +160,6 @@ export default {
     zoomScale: '缩放比例',
     heightRange: '高度范围'
   },
-  layerVisibility: {
-    title: '缩放级别的可见性'
-  },
   layerManager: {
     addData: '添加数据',
     addLayer: '添加图层',

package/src/localization/en.js

@@ -163,9 +163,6 @@ export default {
     heightRange: 'Height Range',
     heightMultiplier: 'Height Multiplier'
   },
-  layerVisibility: {
-    title: 'Visibility by zoom level'
-  },
   layerManager: {
     addData: 'Add Data',
     addLayer: 'Add Layer',

package/src/localization/es.js

@@ -164,9 +164,6 @@ export default {
     heightRange: 'Rango de alturas',
     heightMultiplier: 'Multiplicador de altura'
   },
-  layerVisibility: {
-    title: 'Visibilidad por nivel de zoom'
-  },
   layerManager: {
     addData: 'Añadir datos',
     addLayer: 'Añadir capa',

package/src/localization/fi.js

@@ -161,9 +161,6 @@ export default {
     heightRange: 'Korkeuden rajat',
     heightMultiplier: 'Korkeuskerroin'
   },
-  layerVisibility: {
-    title: 'Näkyvyys zoomaustason mukaan'
-  },
   layerManager: {
     addData: 'Lisää aineisto',
     addLayer: 'Lisää taso',

package/src/localization/ja.js

@@ -162,9 +162,6 @@ export default {
     heightRange: '高さの範囲',
     heightMultiplier: '高さ乗数'
   },
-  layerVisibility: {
-    title: 'ズームレベルによる視認性'
-  },
   layerManager: {
     addData: 'データ追加',
     addLayer: 'レイヤ追加',

package/src/localization/pt.js

@@ -162,9 +162,6 @@ export default {
     heightRange: 'Alcance da Altura',
     heightMultiplier: 'Multiplicador de altura'
   },
-  layerVisibility: {
-    title: 'Visibilidade por nível de zoom'
-  },
   layerManager: {
     addData: 'Adicionar Dados',
     addLayer: 'Adicionar Camada',

package/src/localization/ru.js

@@ -164,9 +164,6 @@ export default {
     heightRange: 'Диапазон высоты',
     heightMultiplier: 'Множитель высоты'
   },
-  layerVisibility: {
-    title: 'Видимость по уровню масштабирования'
-  },
   layerManager: {
     addData: 'Добавить данные',
     addLayer: 'Добавить слой',

package/src/reducers/vis-state-merger.js

@@ -491,8 +491,7 @@ export function validateLayerWithData(
     color: savedLayer.config.color,
     isVisible: savedLayer.config.isVisible,
     hidden: savedLayer.config.hidden,
-    highlightColor: savedLayer.config.highlightColor,
-    visibilityByZoom: savedLayer.config.visibilityByZoom
+    highlightColor: savedLayer.config.highlightColor
   });
 
   // find column fieldIdx

package/src/schemas/schema-manager.d.ts

@@ -70,7 +70,6 @@ export type SavedLayer = {
     isVisible: boolean;
     visConfig: object;
     hidden: boolean;
-    visibilityByZoom: {min: number; max: number};
     textLabel: Merge<LayerTextLabel, {field: {name: string; type: string} | null}>;
   };
   visualChannels: SavedVisualChannels;

package/src/schemas/vis-state-schema.js

@@ -235,7 +235,6 @@ export const layerPropsV0 = {
   color: new LayerConfigSchemaV0({key: 'color'}),
   isVisible: new LayerConfigSchemaV0({key: 'isVisible'}),
   hidden: new LayerConfigSchemaV0({key: 'hidden'}),
-  visibilityByZoom: new LayerConfigSchemaV0({key: 'visibilityByZoom'}),
 
   // convert visConfig
   visConfig: new LayerVisConfigSchemaV0({key: 'visConfig'}),
@@ -452,7 +451,6 @@ export const layerPropsV1 = {
         version: VERSIONS.v1
       }),
       hidden: null,
-      visibilityByZoom: null,
       textLabel: new TextLabelSchemaV1({
         version: VERSIONS.v1,
         key: 'textLabel'

package/src/styles/base.js

@@ -896,6 +896,7 @@ const dropdownList = css`
 
   .list__item {
     ${props => props.theme.dropdownListItem};
+    ${dropdownListItem};
   }
 
   .list__item__anchor {