@carto/kepler.gl 0.0.1-alpha.map-libre

package/src/components/map/layer-hover-info.js

@@ -0,0 +1,185 @@
+// 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 {CenterFlexbox} from 'components/common/styled-components';
+import {Layers} from 'components/common/icons';
+import PropTypes from 'prop-types';
+import {notNullorUndefined} from 'utils/data-utils';
+import {getTooltipDisplayValue, getTooltipDisplayDeltaValue} from 'utils/interaction-utils';
+
+export const StyledLayerName = styled(CenterFlexbox)`
+  color: ${props => props.theme.textColorHl};
+  font-size: 12px;
+  letter-spacing: 0.43px;
+  text-transform: capitalize;
+
+  svg {
+    margin-right: 4px;
+  }
+`;
+
+const StyledTable = styled.table`
+  & .row__delta-value {
+    text-align: right;
+
+    &.positive {
+      color: ${props => props.theme.primaryBtnBgd};
+    }
+
+    &.negative {
+      color: ${props => props.theme.negativeBtnActBgd};
+    }
+  }
+`;
+
+/** @type {import('./layer-hover-info').RowComponent} */
+const Row = ({name, value, deltaValue, url}) => {
+  // Set 'url' to 'value' if it looks like a url
+  if (!url && value && typeof value === 'string' && value.match(/^http/)) {
+    url = value;
+  }
+
+  const asImg = /<img>/.test(name);
+  return (
+    <tr className="row" key={name}>
+      <td className="row__name">{name}</td>
+      <td className="row__value">
+        {asImg ? (
+          <img src={value} />
+        ) : url ? (
+          <a target="_blank" rel="noopener noreferrer" href={url}>
+            {value}
+          </a>
+        ) : (
+          value
+        )}
+      </td>
+      {notNullorUndefined(deltaValue) && (
+        <td
+          className={`row__delta-value ${
+            deltaValue.toString().charAt(0) === '+' ? 'positive' : 'negative'
+          }`}
+        >
+          {deltaValue}
+        </td>
+      )}
+    </tr>
+  );
+};
+
+const EntryInfo = ({fieldsToShow, fields, data, primaryData, compareType}) => (
+  <tbody>
+    {fieldsToShow.map(item => (
+      <EntryInfoRow
+        key={item.name}
+        item={item}
+        fields={fields}
+        data={data}
+        primaryData={primaryData}
+        compareType={compareType}
+      />
+    ))}
+  </tbody>
+);
+
+const EntryInfoRow = ({item, fields, data, primaryData, compareType}) => {
+  const fieldIdx = fields.findIndex(f => f.name === item.name);
+  if (fieldIdx < 0) {
+    return null;
+  }
+  const field = fields[fieldIdx];
+  const displayValue = getTooltipDisplayValue({item, field, data, fieldIdx});
+
+  const displayDeltaValue = getTooltipDisplayDeltaValue({
+    item,
+    field,
+    data,
+    fieldIdx,
+    primaryData,
+    compareType
+  });
+
+  return (
+    <Row
+      name={field.displayName || field.name}
+      value={displayValue}
+      deltaValue={displayDeltaValue}
+    />
+  );
+};
+
+// TODO: supporting comparative value for aggregated cells as well
+const CellInfo = ({data, layer}) => {
+  const {colorField, sizeField} = layer.config;
+
+  return (
+    <tbody>
+      <Row name={'total points'} key="count" value={data.points && data.points.length} />
+      {colorField && layer.visualChannels.color ? (
+        <Row
+          name={layer.getVisualChannelDescription('color').measure}
+          key="color"
+          value={data.colorValue || 'N/A'}
+        />
+      ) : null}
+      {sizeField && layer.visualChannels.size ? (
+        <Row
+          name={layer.getVisualChannelDescription('size').measure}
+          key="size"
+          value={data.elevationValue || 'N/A'}
+        />
+      ) : null}
+    </tbody>
+  );
+};
+
+const LayerHoverInfoFactory = () => {
+  const LayerHoverInfo = props => {
+    const {data, layer} = props;
+
+    if (!data || !layer) {
+      return null;
+    }
+
+    return (
+      <div className="map-popover__layer-info">
+        <StyledLayerName className="map-popover__layer-name">
+          <Layers height="12px" />
+          {props.layer.config.label}
+        </StyledLayerName>
+        <StyledTable>
+          {props.layer.isAggregated ? <CellInfo {...props} /> : <EntryInfo {...props} />}
+        </StyledTable>
+      </div>
+    );
+  };
+
+  LayerHoverInfo.propTypes = {
+    fields: PropTypes.arrayOf(PropTypes.any),
+    fieldsToShow: PropTypes.arrayOf(PropTypes.any),
+    layer: PropTypes.object,
+    data: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.any), PropTypes.object])
+  };
+  return LayerHoverInfo;
+};
+
+export default LayerHoverInfoFactory;

package/src/components/map/layer-selector-panel.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Layer} from 'layers';
+import {MapControls} from 'reducers/ui-state-updaters';
+
+export type LayerSelectorPanelProps = {
+  onMapToggleLayer: (layerId: string) => void;
+  onToggleMapControl: (control: string) => void;
+  layers: ReadonlyArray<Layer>;
+  layersToRender: {[key: string]: boolean};
+  isSplit: boolean;
+  mapControls: MapControls;
+  readOnly: boolean;
+  iconLayersComponent?: React.component;
+};
+
+export type LayerSelectorPanelComponent = React.FunctionComponent<LayerSelectorPanelProps>;

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

@@ -0,0 +1,106 @@
+// 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, useMemo} from 'react';
+import classnames from 'classnames';
+
+import {MapControlButton} from 'components/common/styled-components';
+import {Layers} from '../common/icons';
+import MapLayerSelector from '../common/map-layer-selector';
+import MapControlTooltipFactory from './map-control-tooltip';
+import MapControlPanelFactory from './map-control-panel';
+
+LayerSelectorPanelFactory.deps = [MapControlTooltipFactory, MapControlPanelFactory];
+
+function LayerSelectorPanelFactory(MapControlTooltip, MapControlPanel) {
+  /** @type {import('./layer-selector-panel').LayerSelectorPanelComponent} */
+  const LayerSelectorPanel = ({
+    onMapToggleLayer,
+    onToggleMapControl,
+    layers,
+    layersToRender,
+    isSplit,
+    mapControls,
+    readOnly,
+    iconLayersComponent
+  }) => {
+    const visibleLayers = mapControls?.visibleLayers || {};
+    const {active: isActive, show, disableClose} = visibleLayers || {};
+
+    const legendLayers = useMemo(
+      () =>
+        layers
+          .filter(({config}) => config.isVisible)
+          .map(({id, config}) => ({
+            id,
+            name: config.label,
+            // layer
+            isVisible: layersToRender[id]
+          })),
+      [layers, layersToRender]
+    );
+
+    const isVisible = useMemo(() => isSplit && show && readOnly !== true, [
+      isSplit,
+      show,
+      readOnly
+    ]);
+
+    const onToggleMenuPanel = useCallback(
+      event => {
+        event.preventDefault();
+        onToggleMapControl('visibleLayers');
+      },
+      [onToggleMapControl]
+    );
+
+    return isVisible ? (
+      (!isActive ? (
+        <MapControlButton
+          key={1}
+          onClick={onToggleMenuPanel}
+          className={classnames('map-control-button', 'toggle-layer', {isActive})}
+          data-tip
+          data-for="toggle-layer"
+        >
+          {iconLayersComponent ? iconLayersComponent : <Layers height="22px" />}
+          <MapControlTooltip
+            id="toggle-layer"
+            message={isActive ? 'tooltip.hideLayerPanel' : 'tooltip.showLayerPanel'}
+          />
+        </MapControlButton>
+      ) : (
+        <MapControlPanel
+          header="header.visibleLayers"
+          onClick={onToggleMenuPanel}
+          disableClose={disableClose}
+        >
+          <MapLayerSelector layers={legendLayers} onMapToggleLayer={onMapToggleLayer} />
+        </MapControlPanel>
+      ))
+    ) : null;
+  };
+
+  LayerSelectorPanel.displayName = 'LayerSelectorPanel';
+
+  return React.memo(LayerSelectorPanel);
+}
+
+export default LayerSelectorPanelFactory;

package/src/components/map/locale-panel.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import {MapControls} from '../../reducers';
+
+export type LocalePanelProps = {
+  availableLocales: ReadonlyArray<string>;
+  onSetLocale: (locale: string) => void;
+  locale: string;
+  onToggleMapControl: (control: string) => void;
+  mapControls: MapControls;
+};
+
+export type LocalePanelComponent = React.FunctionComponent<LocalePanelProps>;

package/src/components/map/locale-panel.js

@@ -0,0 +1,91 @@
+// 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 classnames from 'classnames';
+
+import ToolbarItem from 'components/common/toolbar-item';
+import {MapControlButton} from 'components/common/styled-components';
+import MapControlTooltipFactory from './map-control-tooltip';
+import MapControlToolbarFactory from './map-control-toolbar';
+
+LocalePanelFactory.deps = [MapControlTooltipFactory, MapControlToolbarFactory];
+
+function LocalePanelFactory(MapControlTooltip, MapControlToolbar) {
+  /** @type {import('./locale-panel').LocalePanelComponent} */
+  const LocalePanel = React.memo(
+    ({availableLocales, onToggleMapControl, onSetLocale, locale: currentLocal, mapControls}) => {
+      const {active: isActive, disableClose, show} = mapControls.mapLocale || {};
+
+      const onClickItem = useCallback(
+        locale => {
+          onSetLocale(locale);
+        },
+        [onSetLocale]
+      );
+
+      const onClickButton = useCallback(
+        e => {
+          e.preventDefault();
+          onToggleMapControl('mapLocale');
+        },
+        [onToggleMapControl]
+      );
+      const getLabel = useCallback(locale => `toolbar.${locale}`, []);
+
+      if (!show) {
+        return null;
+      }
+      return (
+        <div className="map-locale-controls" style={{position: 'relative'}}>
+          {isActive ? (
+            <MapControlToolbar show={isActive}>
+              {availableLocales.map(locale => (
+                <ToolbarItem
+                  key={locale}
+                  onClick={() => onClickItem(locale)}
+                  label={getLabel(locale)}
+                  active={currentLocal === locale}
+                />
+              ))}
+            </MapControlToolbar>
+          ) : null}
+          <MapControlButton
+            onClick={onClickButton}
+            className={classnames('map-control-button', 'map-locale', {isActive})}
+            active={isActive}
+            data-tip
+            data-for="locale"
+            disableClose={disableClose}
+          >
+            <span className="map-control-button__locale">{currentLocal.toUpperCase()}</span>
+            <MapControlTooltip id="locale" message="tooltip.selectLocale" />
+          </MapControlButton>
+        </div>
+      );
+    }
+  );
+
+  LocalePanel.displayName = 'LocalePanel';
+
+  return LocalePanel;
+}
+
+export default LocalePanelFactory;

package/src/components/map/map-control-panel.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export type MapControlPanelProps = {
+  header?: string;
+  scale?: number;
+  onClick: () => void;
+  isExport?: boolean;
+  logoComponent?: Element;
+};
+
+export type MapControlPanelComponent = React.FunctionComponent<MapControlPanelProps>;

package/src/components/map/map-control-panel.js

@@ -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 from 'react';
+import styled from 'styled-components';
+import {FormattedMessage} from 'localization';
+import {IconRoundSmall} from 'components/common/styled-components';
+import {Close} from 'components/common/icons';
+
+const StyledMapControlPanel = styled.div`
+  background-color: ${props => props.theme.mapPanelBackgroundColor};
+  flex-grow: 1;
+  z-index: 1;
+  p {
+    margin-bottom: 0;
+  }
+`;
+
+const StyledMapControlPanelContent = styled.div.attrs({
+  className: 'map-control__panel-content'
+})`
+  ${props => props.theme.dropdownScrollBar};
+  max-height: 500px;
+  min-height: 100px;
+  min-width: ${props => props.theme.mapControl.width}px;
+  overflow: auto;
+`;
+
+const StyledMapControlPanelHeader = styled.div.attrs({
+  className: 'map-control__panel-header'
+})`
+  display: flex;
+  justify-content: space-between;
+  background-color: ${props => props.theme.mapPanelHeaderBackgroundColor};
+  height: 32px;
+  padding: 6px 12px;
+  font-size: 11px;
+  color: ${props => props.theme.titleTextColor};
+  position: relative;
+
+  button {
+    width: 18px;
+    height: 18px;
+  }
+`;
+
+function MapControlPanelFactory() {
+  /** @type {import('./map-control-panel').MapControlPanelComponent} */
+  const MapControlPanel = React.memo(
+    ({children, header, onClick, scale = 1, isExport, logoComponent}) => (
+      <StyledMapControlPanel
+        style={{
+          transform: `scale(${scale})`,
+          marginBottom: '8px'
+        }}
+      >
+        <StyledMapControlPanelHeader>
+          {isExport && logoComponent ? (
+            logoComponent
+          ) : header ? (
+            <span style={{verticalAlign: 'middle'}}>
+              <FormattedMessage id={header} />
+            </span>
+          ) : null}
+          {isExport ? null : (
+            <IconRoundSmall className="close-map-control-item" onClick={onClick}>
+              <Close height="16px" />
+            </IconRoundSmall>
+          )}
+        </StyledMapControlPanelHeader>
+        <StyledMapControlPanelContent>{children}</StyledMapControlPanelContent>
+      </StyledMapControlPanel>
+    )
+  );
+
+  MapControlPanel.displayName = 'MapControlPanel';
+
+  return MapControlPanel;
+}
+
+export default MapControlPanelFactory;

package/src/components/map/map-control-toolbar.js

@@ -0,0 +1,33 @@
+// 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 styled from 'styled-components';
+import VerticalToolbar from '../common/vertical-toolbar';
+
+function MapControlToolbar() {
+  const StyledToolbar = styled(VerticalToolbar)`
+    position: absolute;
+    right: 32px;
+  `;
+
+  return StyledToolbar;
+}
+
+export default MapControlToolbar;

package/src/components/map/map-control-tooltip.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export type MapControlTooltipProps = {
+  id: string;
+  message: string;
+};
+
+export type MapControlTooltipComponent = React.FunctionComponent<MapControlTooltipProps>;

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

@@ -0,0 +1,40 @@
+// 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 {Tooltip} from '..';
+import {FormattedMessage} from 'localization';
+
+function MapControlTooltipFactory() {
+  /** @type {import('./map-control-tooltip').MapControlTooltipComponent} */
+  const MapControlTooltip = React.memo(({id, message}) => (
+    <Tooltip id={id} place="left" effect="solid">
+      <span>
+        <FormattedMessage id={message} />
+      </span>
+    </Tooltip>
+  ));
+
+  MapControlTooltip.displayName = 'MapControlTooltip';
+
+  return MapControlTooltip;
+}
+
+export default MapControlTooltipFactory;

package/src/components/map/map-control.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import {Editor, MapControls} from '../../reducers';
+import {Datasets} from 'reducers/vis-state-updaters';
+import {FeatureFlags} from '../context';
+import {Layer} from 'layers';
+
+export type MapControlComponentProps = Partial<MapControlProps>;
+
+export type MapControlProps = {
+  availableLocales: ReadonlyArray<string>;
+  datasets: Datasets;
+  dragRotate: boolean;
+  isSplit: boolean;
+  primary: boolean;
+  layers: Layer[];
+  layersToRender: {[key: string]: boolean};
+  mapIndex: number;
+  mapControls: MapControls;
+  readOnly?: boolean;
+  scale: number;
+  top: number;
+  editor: Editor;
+  locale: string;
+
+  onTogglePerspective: () => void;
+  onToggleGlobe: () => void;
+  onToggleSplitMap: () => void;
+  onToggleMapControl: (control: string) => void;
+  onSetEditorMode: (mode: string) => void;
+  onSetLocale: () => void;
+  onToggleEditorVisibility: () => void;
+  logoComponent: React.FC | React.ReactNode;
+  actionComponents: React.FC[] | React.Component[];
+};
+
+export type MapControl = React.FC<MapControlProps>;
+export function MapControlFactory(): MapControl;