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

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

@@ -130,6 +130,18 @@ const StyledIcon = styled.div`
 
 MapPopoverFactory.deps = [LayerHoverInfoFactory, CoordinateInfoFactory];
 
+function zoomBetweenLimits(visibilityByZoom, zoom) {
+  if (visibilityByZoom) {
+    const roundedZoom = Math.floor(zoom);
+    const currentZoomUnderMin = roundedZoom < visibilityByZoom?.min;
+    const currentZoomOverMax = roundedZoom > visibilityByZoom?.max;
+    if (currentZoomUnderMin || currentZoomOverMax) {
+      return false;
+    }
+  }
+  return true;
+}
+
 function createVirtualReference(container, x, y, size = 0) {
   const bounds =
     container && container.getBoundingClientRect ? container.getBoundingClientRect() : {};
@@ -187,11 +199,13 @@ export default function MapPopoverFactory(LayerHoverInfo, CoordinateInfo) {
     const [horizontalPlacement, setHorizontalPlacement] = useState('start');
     const moveLeft = () => setHorizontalPlacement('end');
     const moveRight = () => setHorizontalPlacement('start');
+    const visibilityByZoom = layerHoverProp?.layer.config?.visibilityByZoom;
+    const isVisible = visibilityByZoom ? zoomBetweenLimits(visibilityByZoom, zoom) : true;
     return (
       <Tippy
         popperOptions={getPopperOptions(container)}
         zIndex={999} /* should be below Modal which has zIndex=1000 */
-        visible={true}
+        visible={isVisible}
         interactive={true}
         getReferenceClientRect={() => createVirtualReference(container, x, y)}
         // @ts-ignore

package/src/components/map-container.js

@@ -481,6 +481,20 @@ 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,6 +30,7 @@ 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';
@@ -97,7 +98,8 @@ LayerConfiguratorFactory.deps = [
   LayerColumnConfigFactory,
   LayerTypeSelectorFactory,
   VisConfigSwitchFactory,
-  AggrScaleSelectorFactory
+  AggrScaleSelectorFactory,
+  LayerVisibilityByZoomFactory
 ];
 
 export default function LayerConfiguratorFactory(
@@ -109,7 +111,8 @@ export default function LayerConfiguratorFactory(
   LayerColumnConfig,
   LayerTypeSelector,
   VisConfigSwitch,
-  AggrScaleSelector
+  AggrScaleSelector,
+  LayerVisibilityByZoom
 ) {
   class LayerConfigurator extends Component {
     static propTypes = {
@@ -959,6 +962,7 @@ export default function LayerConfiguratorFactory(
               layerTypeOptions={layerTypeOptions}
               onSelect={updateLayerType}
             />
+            <LayerVisibilityByZoom updateLayerConfig={this.props.updateLayerConfig} layer={layer} />
             {Object.keys(datasets).length > 1 && (
               <SourceDataSelector
                 datasets={datasets}

package/src/components/side-panel/layer-panel/layer-visibility-by-zoom.js

@@ -0,0 +1,120 @@
+// 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, {useCallback} from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import RangeSliderFactory from 'components/common/range-slider';
+import {PanelLabel, SidePanelSection} from 'components/common/styled-components';
+import {FormattedMessage} from 'localization';
+import {ZOOM_LEVEL_LIMITS} from 'constants/default-settings';
+
+const SliderWrapper = styled.div`
+  position: relative;
+`;
+
+const TopRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+LayerVisibilityByZoomFactory.deps = [RangeSliderFactory];
+
+function LayerVisibilityByZoomFactory(RangeSlider) {
+  const LayerVisibilityByZoom = ({
+    updateLayerConfig,
+    layer,
+    rangeMinValue,
+    rangeMaxValue,
+    iconComponent
+  }) => {
+    const {config} = layer;
+    const minLimit = rangeMinValue || ZOOM_LEVEL_LIMITS.min;
+    const maxLimit = rangeMaxValue || ZOOM_LEVEL_LIMITS.max;
+
+    const [zoomMin, setZoomMin] = React.useState(
+      config.visibilityByZoom?.min
+        ? config.visibilityByZoom?.min < minLimit
+          ? minLimit
+          : config.visibilityByZoom?.min
+        : minLimit
+    );
+    const [zoomMax, setZoomMax] = React.useState(
+      config.visibilityByZoom?.max
+        ? config.visibilityByZoom?.max > maxLimit
+          ? maxLimit
+          : config.visibilityByZoom?.max
+        : maxLimit
+    );
+
+    const _onChange = useCallback(
+      val => {
+        setZoomMin(val[0]);
+        setZoomMax(val[1]);
+        updateLayerConfig({visibilityByZoom: {min: val[0], max: val[1]}});
+      },
+      [updateLayerConfig]
+    );
+
+    const IconElement = () => iconComponent || null;
+
+    return (
+      <div>
+        <SidePanelSection>
+          <div className="layer-visibility__zoom">
+            <TopRow>
+              <PanelLabel>
+                <FormattedMessage id={'layerVisibility.title'} />{' '}
+                <IconElement data-test="icon-help-button" />
+              </PanelLabel>
+            </TopRow>
+            <SliderWrapper>
+              <RangeSlider
+                range={[
+                  rangeMinValue || ZOOM_LEVEL_LIMITS.min,
+                  rangeMaxValue || ZOOM_LEVEL_LIMITS.max
+                ]}
+                value0={zoomMin}
+                value1={zoomMax}
+                onChange={_onChange}
+                isRanged={true}
+                showTooltip
+                showInput
+                inputTheme="secondary"
+                inputSize="tiny"
+              />
+            </SliderWrapper>
+          </div>
+        </SidePanelSection>
+      </div>
+    );
+  };
+
+  LayerVisibilityByZoom.propTypes = {
+    updateLayerConfig: PropTypes.func.isRequired,
+    rangeMinValue: PropTypes.number,
+    rangeMaxValue: PropTypes.number,
+    iconComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
+  };
+
+  return LayerVisibilityByZoom;
+}
+
+export default LayerVisibilityByZoomFactory;

package/src/constants/default-settings.js

@@ -954,3 +954,8 @@ export const MAP_CONTROLS = keyMirror({
 });
 
 export const MASK_LAYER_ID = 'mask_layer';
+
+export const ZOOM_LEVEL_LIMITS = {
+  min: 0,
+  max: 21
+};

package/src/layers/base-layer.js

@@ -36,7 +36,8 @@ import {
   SCALE_FUNC,
   CHANNEL_SCALE_SUPPORTED_FIELDS,
   MAX_GPU_FILTERS,
-  UNKNOWN_COLOR
+  UNKNOWN_COLOR,
+  ZOOM_LEVEL_LIMITS
 } from 'constants/default-settings';
 import {COLOR_RANGES} from 'constants/color-ranges';
 import {DataVizColors} from 'constants/custom-color-ranges';
@@ -298,6 +299,10 @@ 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,
@@ -464,7 +469,6 @@ class Layer {
       shallowCopy,
       notToCopy
     });
-
     this.updateLayerConfig(copied);
     // validate visualChannel field type and scale types
     Object.keys(this.visualChannels).forEach(channel => {
@@ -1215,7 +1219,6 @@ class Layer {
 
   getDefaultDeckLayerProps({idx, gpuFilter, mapState, visible, maskPolygon}) {
     const maskExtensionProps = getMaskExtensionProps(maskPolygon);
-
     return {
       ...maskExtensionProps,
       id: this.id,
@@ -1225,6 +1228,10 @@ 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,6 +18,7 @@ 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,6 +163,9 @@ 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,6 +160,9 @@ export default {
     zoomScale: '缩放比例',
     heightRange: '高度范围'
   },
+  layerVisibility: {
+    title: '缩放级别的可见性'
+  },
   layerManager: {
     addData: '添加数据',
     addLayer: '添加图层',

package/src/localization/en.js

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

package/src/localization/pt.js

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

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

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

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

@@ -70,6 +70,7 @@ 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,6 +235,7 @@ 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'}),
@@ -451,6 +452,7 @@ export const layerPropsV1 = {
         version: VERSIONS.v1
       }),
       hidden: null,
+      visibilityByZoom: null,
       textLabel: new TextLabelSchemaV1({
         version: VERSIONS.v1,
         key: 'textLabel'