@carto/kepler.gl 0.0.81 → 0.0.82

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

@@ -0,0 +1,284 @@
+// 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 from 'react';
+import styled from 'styled-components';
+import {rgb} from 'd3-color';
+import ColorLegend from 'components/common/color-legend';
+import {CHANNEL_SCALES, DIMENSIONS} from 'constants/default-settings';
+import {FormattedMessage} from 'localization';
+import Layer, {LayerBaseConfig, VisualChannel, VisualChannelDescription} from 'layers/base-layer';
+
+interface StyledMapControlLegendProps {
+  width?: number;
+  last?: boolean;
+}
+
+export const StyledMapControlLegend = styled.div<StyledMapControlLegendProps>`
+  padding: 10px ${props => props.theme.mapControl.padding}px 10px
+    ${props => props.theme.mapControl.padding}px;
+  font-size: 11px;
+  font-family: ${props => props.theme.fontFamily};
+  border-bottom-color: ${props => props.theme.panelBorderColor};
+  border-bottom-style: solid;
+  border-bottom-width: ${props => (props.last ? 0 : '1px')};
+  width: ${props => props.width}px;
+  box-sizing: border-box;
+
+  .legend--layer_name {
+    font-size: 12px;
+    padding-right: ${props => props.theme.mapControl.padding}px;
+    color: ${props => props.theme.textColor};
+    font-weight: 500;
+  }
+  .legend--layer_type {
+    color: ${props => props.theme.subtextColor};
+    font-weight: 500;
+    font-size: 11px;
+    padding-right: ${props => props.theme.mapControl.padding}px;
+  }
+
+  .legend--layer__title {
+    padding-right: ${props => props.theme.mapControl.padding}px;
+  }
+
+  .legend--layer_by {
+    color: ${props => props.theme.subtextColor};
+  }
+
+  .legend--layer_color_field {
+    color: ${props => props.theme.textColorHl};
+    font-weight: 500;
+  }
+
+  .legend--layer_color-legend {
+    margin-top: 6px;
+  }
+`;
+
+export const VisualChannelMetric = ({name}) => {
+  return (
+    <div className="legend--layer__title">
+      <span className="legend--layer_color_field">
+        <FormattedMessage id={name} />
+      </span>
+    </div>
+  );
+};
+
+export type LayerSizeLegendProps = {
+  label: string;
+  name: string;
+};
+
+/** @type {typeof import('./map-legend').LayerSizeLegend} */
+export const LayerSizeLegend: React.FC<LayerSizeLegendProps> = ({label, name}) =>
+  label ? (
+    <div className="legend--layer_size-schema">
+      <p>
+        <span className="legend--layer_by">{label ? <FormattedMessage id={label} /> : null}</span>
+        <span className="legend--layer_by"> by </span>
+      </p>
+      <VisualChannelMetric name={name} />
+    </div>
+  ) : null;
+
+const SINGLE_COLOR_DOMAIN = [''];
+
+export type SingleColorLegendProps = {
+  width: number;
+  color: string;
+};
+
+/** @type {typeof import('./map-legend').SingleColorLegend} */
+export const SingleColorLegend: React.FC<SingleColorLegendProps> = React.memo(({width, color}) => (
+  <ColorLegend
+    scaleType="ordinal"
+    displayLabel={false}
+    domain={SINGLE_COLOR_DOMAIN}
+    fieldType={null}
+    // @ts-expect-error
+    range={{colors: [rgb(...color).toString()]}}
+    width={width}
+  />
+));
+
+SingleColorLegend.displayName = 'SingleColorLegend';
+
+export type LayerColorLegendProps = {
+  description: VisualChannelDescription;
+  config: LayerBaseConfig;
+  width: number;
+  colorChannel: VisualChannel;
+};
+
+/** @type {typeof import('./map-legend').LayerColorLegend} */
+export const LayerColorLegend: React.FC<LayerColorLegendProps> = React.memo(
+  ({description, config, width, colorChannel}) => {
+    const enableColorBy = description.measure;
+    const {scale, field, domain, range, property} = colorChannel;
+    const [colorScale, colorField, colorDomain] = [scale, field, domain].map(k => config[k]);
+    const colorRange = config.visConfig[range];
+
+    return (
+      <div>
+        <div className="legend--layer_color-schema">
+          <div>
+            {enableColorBy ? <VisualChannelMetric name={enableColorBy} /> : null}
+            <div className="legend--layer_color-legend">
+              {enableColorBy ? (
+                <ColorLegend
+                  scaleType={colorScale}
+                  displayLabel
+                  domain={colorDomain}
+                  fieldType={(colorField && colorField.type) || 'real'}
+                  range={colorRange}
+                  width={width}
+                />
+              ) : (
+                <SingleColorLegend
+                  color={config.visConfig[property] || config[property] || config.color}
+                  width={width}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+LayerColorLegend.displayName = 'LayerColorLegend';
+
+const isColorChannel = visualChannel =>
+  [CHANNEL_SCALES.color, CHANNEL_SCALES.colorAggr].includes(visualChannel.channelScaleType);
+
+export type LayerLegendHeaderProps = {
+  layer: Layer;
+  options?: {
+    showLayerName?: boolean;
+  };
+};
+
+export function LayerLegendHeaderFactory() {
+  /** @type {typeof import('./map-legend').LayerLegendHeader }> */
+  const LayerLegendHeader: React.FC<LayerLegendHeaderProps> = ({options, layer}) => {
+    return options?.showLayerName !== false ? (
+      <div className="legend--layer_name">{layer.config.label}</div>
+    ) : null;
+  };
+  return LayerLegendHeader;
+}
+
+export type LayerLegendContentProps = {
+  layer: Layer;
+  containerW: number;
+};
+
+export function LayerLegendContentFactory() {
+  /** @type {typeof import('./map-legend').LayerLegendContent }> */
+  const LayerLegendContent: React.FC<LayerLegendContentProps> = ({layer, containerW}) => {
+    const colorChannels = Object.values(layer.visualChannels).filter(isColorChannel);
+    const nonColorChannels = Object.values(layer.visualChannels).filter(vc => !isColorChannel(vc));
+
+    return (
+      <>
+        {colorChannels.map(colorChannel =>
+          !colorChannel.condition || colorChannel.condition(layer.config) ? (
+            <LayerColorLegend
+              key={colorChannel.key}
+              description={layer.getVisualChannelDescription(colorChannel.key)}
+              config={layer.config}
+              width={containerW - 2 * DIMENSIONS.mapControl.padding}
+              colorChannel={colorChannel}
+            />
+          ) : null
+        )}
+        {nonColorChannels.map(visualChannel => {
+          const matchCondition = !visualChannel.condition || visualChannel.condition(layer.config);
+          const enabled = layer.config[visualChannel.field] || visualChannel.defaultMeasure;
+
+          const description = layer.getVisualChannelDescription(visualChannel.key);
+
+          return matchCondition && enabled ? (
+            <LayerSizeLegend
+              key={visualChannel.key}
+              label={description.label}
+              name={description.measure}
+            />
+          ) : null;
+        })}
+      </>
+    );
+  };
+
+  return LayerLegendContent;
+}
+
+export type MapLegendProps = {
+  layers?: ReadonlyArray<Layer>;
+  width?: number;
+  mapHeight?: number;
+  options?: {
+    showLayerName?: boolean;
+  };
+};
+
+MapLegendFactory.deps = [LayerLegendHeaderFactory, LayerLegendContentFactory];
+function MapLegendFactory(LayerLegendHeader, LayerLegendContent) {
+  /** @type {typeof import('./map-legend').MapLegend }> */
+  const MapLegend: React.FC<MapLegendProps> = ({layers = [], width, mapHeight, options}) => (
+    <div
+      className="map-legend"
+      {...(mapHeight && {
+        style: {
+          /* subtracting rough size of 4 map control buttons and padding */
+          maxHeight: mapHeight - 250
+        }
+      })}
+    >
+      {layers.map((layer, index) => {
+        if (!layer.isValidToSave() || layer.config.hidden) {
+          return null;
+        }
+        const containerW = width || DIMENSIONS.mapControl.width;
+
+        return (
+          <StyledMapControlLegend
+            className="legend--layer"
+            last={index === layers.length - 1}
+            key={index}
+            width={containerW}
+          >
+            <LayerLegendHeader options={options} layer={layer} />
+            <LayerLegendContent containerW={containerW} layer={layer} />
+          </StyledMapControlLegend>
+        );
+      })}
+    </div>
+  );
+
+  MapLegend.displayName = 'MapLegend';
+
+  return MapLegend;
+}
+
+export default MapLegendFactory;

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

@@ -0,0 +1,268 @@
+// 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, {useState} from 'react';
+import styled from 'styled-components';
+import LayerHoverInfoFactory from './layer-hover-info';
+import CoordinateInfoFactory from './coordinate-info';
+import {ArrowLeft, ArrowRight, Pin} from 'components/common/icons';
+import {injectIntl, IntlShape} from 'react-intl';
+import {FormattedMessage} from 'localization';
+import Tippy from '@tippyjs/react/headless';
+import {LayerHoverProp} from 'utils/layer-utils';
+
+const MAX_WIDTH = 500;
+const MAX_HEIGHT = 600;
+
+const StyledMapPopover = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: ${MAX_WIDTH}px;
+  max-height: ${MAX_HEIGHT}px;
+  padding: 14px;
+  & > * + * {
+    margin-top: 6px;
+  }
+  ${props => props.theme.scrollBar};
+  font-family: ${props => props.theme.fontFamily};
+  font-size: 11px;
+  font-weight: 500;
+  background-color: ${props => props.theme.panelBackground};
+  color: ${props => props.theme.textColor};
+  z-index: 1000;
+  overflow-x: auto;
+  box-shadow: ${props => props.theme.panelBoxShadow};
+
+  :hover {
+    background-color: ${props => `${props.theme.panelBackground}dd`};
+  }
+
+  .primary-label {
+    color: ${props => props.theme.notificationColors.success};
+    font-size: 10px;
+  }
+
+  .map-popover__layer-info,
+  .coordingate-hover-info {
+    & > * + * {
+      margin-top: 7px;
+    }
+  }
+
+  table {
+    width: auto;
+    display: grid;
+    border-collapse: collapse;
+    row-gap: 5px;
+    column-gap: 5px;
+  }
+
+  .coordingate-hover-info > table {
+    grid-template-columns: auto auto auto;
+  }
+  .map-popover__layer-info > table {
+    grid-template-columns: auto auto;
+  }
+
+  tbody,
+  tr {
+    display: contents;
+  }
+
+  td {
+    border-color: transparent;
+    color: ${props => props.theme.textColor};
+  }
+
+  td.row__value {
+    text-align: right;
+    font-weight: 500;
+    color: ${props => props.theme.textColorHl};
+  }
+`;
+
+const PinnedButtons = styled.div`
+  display: flex;
+  align-self: center;
+  align-items: center;
+  justify-items: center;
+  & > * + * {
+    margin-left: 10px;
+  }
+`;
+
+const PopoverContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  & > * + * {
+    margin-top: 12px;
+  }
+`;
+
+const StyledIcon = styled.div`
+  color: ${props => props.theme.activeColor};
+
+  :hover {
+    cursor: pointer;
+    color: ${props => props.theme.linkBtnColor};
+  }
+`;
+
+MapPopoverFactory.deps = [LayerHoverInfoFactory, CoordinateInfoFactory];
+
+function zoomBetweenLimits(visibilityByZoom, zoom) {
+  if (visibilityByZoom) {
+    const roundedZoom = Math.round(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() : {};
+  const left = (bounds.left || 0) + x - size / 2;
+  const top = (bounds.top || 0) + y - size / 2;
+  return {
+    left,
+    top,
+    right: left + size,
+    bottom: top + size,
+    width: size,
+    height: size
+  };
+}
+
+function getOffsetForPlacement({placement, reference, popper}, gap = 20) {
+  switch (placement) {
+    case 'top-start':
+    case 'bottom-start':
+      return [gap, gap];
+    case 'top-end':
+    case 'bottom-end':
+      return [-gap, gap];
+    default:
+      return [0, 0];
+  }
+}
+
+function getPopperOptions(container) {
+  return {
+    modifiers: [
+      {
+        name: 'preventOverflow',
+        options: {
+          boundary: container
+        }
+      }
+    ]
+  };
+}
+
+export type MapPopoverProps = {
+  x: number;
+  y: number;
+  frozen?: boolean;
+  coordinate: [number, number] | boolean;
+  layerHoverProp: LayerHoverProp | null;
+  isBase?: boolean;
+  zoom: number;
+  container?: HTMLElement | null;
+  onClose: () => void;
+};
+
+type IntlProps = {
+  intl: IntlShape;
+};
+
+export default function MapPopoverFactory(
+  LayerHoverInfo: ReturnType<typeof LayerHoverInfoFactory>,
+  CoordinateInfo: ReturnType<typeof CoordinateInfoFactory>
+) {
+  /** @type {typeof import('./map-popover').MapPopover} */
+  const MapPopover: React.FC<MapPopoverProps & IntlProps> = ({
+    x,
+    y,
+    frozen,
+    coordinate,
+    layerHoverProp,
+    isBase,
+    zoom,
+    container,
+    onClose
+  }) => {
+    const [horizontalPlacement, setHorizontalPlacement] = useState('start');
+    const moveLeft = () => setHorizontalPlacement('end');
+    const moveRight = () => setHorizontalPlacement('start');
+    // @ts-expect-error
+    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={isVisible}
+        interactive={true}
+        // @ts-expect-error
+        getReferenceClientRect={() => createVirtualReference(container, x, y)}
+        // @ts-ignore
+        placement={`bottom-${horizontalPlacement}`}
+        // @ts-ignore
+        offset={getOffsetForPlacement}
+        appendTo={document.body}
+        render={attrs => (
+          <StyledMapPopover {...attrs} className="map-popover">
+            {frozen ? (
+              <PinnedButtons>
+                {horizontalPlacement === 'start' && (
+                  <StyledIcon className="popover-arrow-left" onClick={moveLeft}>
+                    <ArrowLeft />
+                  </StyledIcon>
+                )}
+                <StyledIcon className="popover-pin" onClick={onClose}>
+                  <Pin height="16px" />
+                </StyledIcon>
+                {horizontalPlacement === 'end' && (
+                  <StyledIcon className="popover-arrow-right" onClick={moveRight}>
+                    <ArrowRight />
+                  </StyledIcon>
+                )}
+                {isBase && (
+                  <div className="primary-label">
+                    <FormattedMessage id="mapPopover.primary" />
+                  </div>
+                )}
+              </PinnedButtons>
+            ) : null}
+            <PopoverContent>
+              {Array.isArray(coordinate) && <CoordinateInfo coordinate={coordinate} zoom={zoom} />}
+              {layerHoverProp && <LayerHoverInfo {...layerHoverProp} />}
+            </PopoverContent>
+          </StyledMapPopover>
+        )}
+      />
+    );
+  };
+  return injectIntl(MapPopover);
+}

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

@@ -0,0 +1,98 @@
+// 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, {ComponentType, useCallback, useMemo} from 'react';
+import classnames from 'classnames';
+import {MapControlButton} from 'components/common/styled-components';
+import {Delete, Split} from 'components/common/icons';
+import {FormattedMessage} from '../../localization';
+import TippyTooltip from '../common/tippy-tooltip';
+import {MapControl, MapControls} from 'reducers';
+
+SplitMapButtonFactory.deps = [];
+
+interface SplitMapButtonIcons {
+  delete: ComponentType<any>;
+  split: ComponentType<any>;
+}
+
+export type SplitMapButtonProps = {
+  isSplit: boolean;
+  mapIndex: number;
+  onToggleSplitMap: (index?: number) => void;
+  actionIcons: SplitMapButtonIcons;
+  readOnly: boolean;
+  mapControls: MapControls;
+};
+
+function SplitMapButtonFactory() {
+  const defaultActionIcons = {
+    delete: Delete,
+    split: Split
+  };
+
+  /** @type {import('./split-map-button').SplitMapButtonComponent} */
+  const SplitMapButton: React.FC<SplitMapButtonProps> = ({
+    isSplit,
+    mapIndex,
+    onToggleSplitMap,
+    actionIcons = defaultActionIcons,
+    mapControls,
+    readOnly
+  }) => {
+    const splitMap = mapControls?.splitMap || ({} as MapControl);
+    const onClick = useCallback(
+      event => {
+        event.preventDefault();
+        onToggleSplitMap(isSplit ? mapIndex : undefined);
+      },
+      [isSplit, mapIndex, onToggleSplitMap]
+    );
+
+    const isVisible = useMemo(() => splitMap.show && readOnly !== true, [splitMap.show, readOnly]);
+
+    if (!splitMap.show) {
+      return null;
+    }
+    return isVisible ? (
+      <TippyTooltip
+        placement="left"
+        render={() => (
+          <div id="action-toggle">
+            <FormattedMessage id={isSplit ? 'tooltip.closePanel' : 'tooltip.switchToDualView'} />
+          </div>
+        )}
+      >
+        <MapControlButton
+          active={isSplit}
+          onClick={onClick}
+          className={classnames('map-control-button', 'split-map', {'close-map': isSplit})}
+        >
+          {isSplit ? <actionIcons.delete height="18px" /> : <actionIcons.split height="18px" />}
+        </MapControlButton>
+      </TippyTooltip>
+    ) : null;
+  };
+
+  SplitMapButton.displayName = 'SplitMapButton';
+  return React.memo(SplitMapButton);
+}
+
+export default SplitMapButtonFactory;