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

package/src/components/side-panel/panel-header.js

@@ -0,0 +1,321 @@
+// 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 styled from 'styled-components';
+import PropTypes from 'prop-types';
+import {createSelector} from 'reselect';
+import {Tooltip} from 'components/common/styled-components';
+import KeplerGlLogo from 'components/common/logo';
+import {Save, DataTable, Save2, Picture, Db, Map as MapIcon, Share} from 'components/common/icons';
+import ClickOutsideCloseDropdown from 'components/side-panel/panel-dropdown';
+import Toolbar from 'components/common/toolbar';
+import ToolbarItem from 'components/common/toolbar-item';
+import {FormattedMessage} from 'localization';
+
+const StyledPanelHeader = styled.div.attrs({
+  className: 'side-side-panel__header'
+})`
+  background-color: ${props => props.theme.sidePanelHeaderBg};
+  padding: 12px 16px 0 16px;
+`;
+
+const StyledPanelHeaderTop = styled.div.attrs({
+  className: 'side-panel__header__top'
+})`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  width: 100%;
+`;
+
+const StyledPanelTopActions = styled.div.attrs({
+  className: 'side-panel__top__actions'
+})`
+  display: flex;
+`;
+
+const StyledPanelAction = styled.div.attrs({
+  className: 'side-panel__panel-header__action'
+})`
+  align-items: center;
+  border-radius: 2px;
+  color: ${props => (props.active ? props.theme.textColorHl : props.theme.subtextColor)};
+  display: flex;
+  height: 26px;
+  justify-content: space-between;
+  margin-left: 4px;
+  padding: 5px;
+  font-weight: bold;
+  p {
+    display: inline-block;
+    margin-right: 6px;
+  }
+  a {
+    height: 20px;
+  }
+
+  :hover {
+    cursor: pointer;
+    color: ${props => props.theme.textColorHl};
+
+    a {
+      color: ${props => props.theme.textColorHl};
+    }
+  }
+`;
+
+const StyledToolbar = styled(Toolbar)`
+  position: absolute;
+`;
+
+export const PanelAction = ({item, onClick}) => (
+  <StyledPanelAction data-tip data-for={`${item.id}-action`} onClick={onClick}>
+    {item.label ? <p>{item.label}</p> : null}
+    <a target={item.blank ? '_blank' : ''} href={item.href} rel="noreferrer">
+      <item.iconComponent height="20px" {...item.iconComponentProps} />
+    </a>
+    {item.tooltip ? (
+      <Tooltip id={`${item.id}-action`} place="bottom" delayShow={500} effect="solid">
+        <FormattedMessage id={item.tooltip} />
+      </Tooltip>
+    ) : null}
+  </StyledPanelAction>
+);
+
+export const PanelHeaderDropdownFactory = () => {
+  const PanelHeaderDropdown = ({items, show, onClose, id}) => {
+    return (
+      <StyledToolbar show={show} className={`${id}-dropdown`}>
+        <ClickOutsideCloseDropdown
+          className="panel-header-dropdown__inner"
+          show={show}
+          onClose={onClose}
+        >
+          {items.map(item => (
+            <ToolbarItem
+              id={item.key}
+              key={item.key}
+              label={item.label}
+              icon={item.icon}
+              onClick={item.onClick}
+              onClose={onClose}
+            />
+          ))}
+        </ClickOutsideCloseDropdown>
+      </StyledToolbar>
+    );
+  };
+
+  return PanelHeaderDropdown;
+};
+
+const getDropdownItemsSelector = () =>
+  createSelector(
+    props => props,
+    props =>
+      props.items
+        .map(t => ({
+          ...t,
+          onClick: t.onClick && t.onClick(props) ? t.onClick(props) : null
+        }))
+        .filter(l => l.onClick)
+  );
+
+export const SaveExportDropdownFactory = PanelHeaderDropdown => {
+  const dropdownItemsSelector = getDropdownItemsSelector();
+
+  const SaveExportDropdown = props => (
+    <PanelHeaderDropdown
+      items={dropdownItemsSelector(props)}
+      show={props.show}
+      onClose={props.onClose}
+      id="save-export"
+    />
+  );
+
+  SaveExportDropdown.defaultProps = {
+    items: [
+      {
+        label: 'toolbar.exportImage',
+        icon: Picture,
+        key: 'image',
+        onClick: props => props.onExportImage
+      },
+      {
+        label: 'toolbar.exportData',
+        icon: DataTable,
+        key: 'data',
+        onClick: props => props.onExportData
+      },
+      {
+        label: 'toolbar.exportMap',
+        icon: MapIcon,
+        key: 'map',
+        onClick: props => props.onExportMap
+      },
+      {
+        label: 'toolbar.saveMap',
+        icon: Save2,
+        key: 'save',
+        onClick: props => props.onSaveMap
+      },
+      {
+        label: 'toolbar.shareMapURL',
+        icon: Share,
+        key: 'share',
+        onClick: props => props.onShareMap
+      }
+    ]
+  };
+
+  return SaveExportDropdown;
+};
+SaveExportDropdownFactory.deps = [PanelHeaderDropdownFactory];
+
+export const CloudStorageDropdownFactory = PanelHeaderDropdown => {
+  const dropdownItemsSelector = getDropdownItemsSelector();
+
+  const CloudStorageDropdown = props => (
+    <PanelHeaderDropdown
+      items={dropdownItemsSelector(props)}
+      show={props.show}
+      onClose={props.onClose}
+      id="cloud-storage"
+    />
+  );
+  CloudStorageDropdown.defaultProps = {
+    items: [
+      {
+        label: 'Save',
+        icon: Save2,
+        key: 'save',
+        onClick: props => props.onSaveToStorage
+      },
+      {
+        label: 'Save As',
+        icon: Save2,
+        key: 'saveAs',
+        onClick: props => props.onSaveAsToStorage
+      }
+    ]
+  };
+  return CloudStorageDropdown;
+};
+CloudStorageDropdownFactory.deps = [PanelHeaderDropdownFactory];
+
+PanelHeaderFactory.deps = [SaveExportDropdownFactory, CloudStorageDropdownFactory];
+
+function PanelHeaderFactory(SaveExportDropdown, CloudStorageDropdown) {
+  return class PanelHeader extends Component {
+    static propTypes = {
+      appName: PropTypes.string,
+      appWebsite: PropTypes.string,
+      version: PropTypes.string,
+      visibleDropdown: PropTypes.string,
+      logoComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+      actionItems: PropTypes.arrayOf(PropTypes.any),
+      onExportImage: PropTypes.func,
+      onExportData: PropTypes.func,
+      onExportConfig: PropTypes.func,
+      onExportMap: PropTypes.func,
+      onSaveToStorage: PropTypes.func,
+      onSaveAsToStorage: PropTypes.func,
+      onSaveMap: PropTypes.func,
+      onShareMap: PropTypes.func
+    };
+
+    static defaultProps = {
+      logoComponent: KeplerGlLogo,
+      actionItems: [
+        {
+          id: 'storage',
+          iconComponent: Db,
+          tooltip: 'tooltip.cloudStorage',
+          onClick: () => {},
+          dropdownComponent: CloudStorageDropdown
+        },
+        {
+          id: 'save',
+          iconComponent: Save,
+          onClick: () => {},
+          label: 'Share',
+          dropdownComponent: SaveExportDropdown
+        }
+      ]
+    };
+
+    render() {
+      const {
+        appName,
+        appWebsite,
+        version,
+        actionItems,
+        visibleDropdown,
+        showExportDropdown,
+        hideExportDropdown,
+        ...dropdownCallbacks
+      } = this.props;
+      let items = actionItems || [];
+
+      // don't render cloud storage icon if onSaveToStorage is not provided
+      if (typeof this.props.onSaveToStorage !== 'function') {
+        items = actionItems.filter(ai => ai.id !== 'storage');
+      }
+
+      return (
+        <StyledPanelHeader className="side-panel__panel-header">
+          <StyledPanelHeaderTop className="side-panel__panel-header__top">
+            <this.props.logoComponent appName={appName} version={version} appWebsite={appWebsite} />
+            <StyledPanelTopActions>
+              {items.map(item => (
+                <div
+                  className="side-panel__panel-header__right"
+                  key={item.id}
+                  style={{position: 'relative'}}
+                >
+                  <PanelAction
+                    item={item}
+                    onClick={() => {
+                      if (item.dropdownComponent) {
+                        showExportDropdown(item.id);
+                      } else {
+                        item.onClick && item.onClick(this.props);
+                      }
+                    }}
+                  />
+                  {item.dropdownComponent ? (
+                    <item.dropdownComponent
+                      onClose={hideExportDropdown}
+                      show={visibleDropdown === item.id}
+                      {...dropdownCallbacks}
+                    />
+                  ) : null}
+                </div>
+              ))}
+            </StyledPanelTopActions>
+          </StyledPanelHeaderTop>
+        </StyledPanelHeader>
+      );
+    }
+  };
+}
+
+export default PanelHeaderFactory;

package/src/components/side-panel/panel-tab.js

@@ -0,0 +1,62 @@
+// 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 {Tooltip} from 'components/common/styled-components';
+import {FormattedMessage} from 'localization';
+
+export const StyledPanelTab = styled.div.attrs({
+  className: 'side-panel__tab'
+})`
+  align-items: flex-end;
+  border-bottom-style: solid;
+  border-bottom-width: 2px;
+  border-bottom-color: ${props =>
+    props.active ? props.theme.panelToggleBorderColor : 'transparent'};
+  color: ${props => (props.active ? props.theme.subtextColorActive : props.theme.panelTabColor)};
+  display: flex;
+  justify-content: center;
+  margin-right: ${props => props.theme.panelToggleMarginRight}px;
+  padding-bottom: ${props => props.theme.panelToggleBottomPadding}px;
+  width: ${props => props.theme.panelTabWidth};
+
+  :hover {
+    cursor: pointer;
+    color: ${props => props.theme.textColorHl};
+  }
+`;
+
+export function PanelTabFactory() {
+  const PanelTab = ({isActive, onClick, panel}) => (
+    <StyledPanelTab data-tip data-for={`${panel.id}-nav`} active={isActive} onClick={onClick}>
+      <panel.iconComponent height="20px" />
+      <Tooltip id={`${panel.id}-nav`} effect="solid" delayShow={500} place="bottom">
+        <span>
+          <FormattedMessage id={panel.label || panel.id} />
+        </span>
+      </Tooltip>
+    </StyledPanelTab>
+  );
+
+  return PanelTab;
+}
+
+export default PanelTabFactory;

package/src/components/side-panel/panel-title.js

@@ -0,0 +1,32 @@
+// 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';
+
+const PanelTitleFactory = () => styled.div`
+  color: ${props => props.theme.titleTextColor};
+  font-size: ${props => props.theme.sidePanelTitleFontsize};
+  line-height: ${props => props.theme.sidePanelTitleLineHeight};
+  font-weight: 400;
+  letter-spacing: 1.25px;
+  margin-bottom: 14px;
+`;
+
+export default PanelTitleFactory;

package/src/components/side-panel/panel-toggle.js

@@ -0,0 +1,70 @@
+// 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 PanelTabFactory from './panel-tab';
+
+const propTypes = {
+  panels: PropTypes.arrayOf(PropTypes.object),
+  activePanel: PropTypes.string,
+  togglePanel: PropTypes.func
+};
+
+const PanelHeaderBottom = styled.div.attrs({
+  className: 'side-side-panel__header__bottom'
+})`
+  background-color: ${props => props.theme.sidePanelHeaderBg};
+  border-bottom: 1px solid ${props => props.theme.sidePanelHeaderBorder};
+  padding: 0 16px;
+  display: flex;
+  min-height: 30px;
+`;
+
+PanelToggleFactory.deps = [PanelTabFactory];
+function PanelToggleFactory(PanelTab) {
+  const PanelToggle = ({activePanel, panels, togglePanel}) => {
+    const onClick = useCallback(
+      panel => {
+        const callback = panel.onClick || togglePanel;
+        callback(panel.id);
+      },
+      [togglePanel]
+    );
+    return (
+      <PanelHeaderBottom>
+        {panels.map(panel => (
+          <PanelTab
+            key={panel.id}
+            panel={panel}
+            isActive={activePanel === panel.id}
+            onClick={() => onClick(panel)}
+          />
+        ))}
+      </PanelHeaderBottom>
+    );
+  };
+
+  PanelToggle.propTypes = propTypes;
+  return PanelToggle;
+}
+
+export default PanelToggleFactory;

package/src/components/side-panel/side-bar.js

@@ -0,0 +1,136 @@
+// 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 styled from 'styled-components';
+import {ArrowRight} from 'components/common/icons';
+
+const StyledSidePanelContainer = styled.div`
+  z-index: 99;
+  height: 100%;
+  width: ${props => props.width + 2 * props.theme.sidePanel.margin.left}px;
+  display: flex;
+  transition: width 250ms;
+  position: absolute;
+  padding-top: ${props => props.theme.sidePanel.margin.top}px;
+  padding-right: ${props => props.theme.sidePanel.margin.right}px;
+  padding-bottom: ${props => props.theme.sidePanel.margin.bottom}px;
+  padding-left: ${props => props.theme.sidePanel.margin.left}px;
+  pointer-events: none; /* prevent padding from blocking input */
+  & > * {
+    /* all children should allow input */
+    pointer-events: all;
+  }
+`;
+
+const SideBarContainer = styled.div`
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: left 250ms, right 250ms;
+  left: ${props => props.left}px;
+  align-items: stretch;
+  flex-grow: 1;
+`;
+
+const SideBarInner = styled.div`
+  background-color: ${props => props.theme.sidePanelBg};
+  border-radius: 1px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-left: ${props => props.theme.sidePanelBorder}px solid
+    ${props => props.theme.sidePanelBorderColor};
+`;
+
+const StyledCollapseButton = styled.div`
+  align-items: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  justify-content: center;
+  background-color: ${props => props.theme.sideBarCloseBtnBgd};
+  border-radius: 1px;
+  color: ${props => props.theme.sideBarCloseBtnColor};
+  display: flex;
+  height: 20px;
+  position: absolute;
+  right: -8px;
+  top: ${props => props.theme.sidePanel.margin.top}px;
+  width: 20px;
+
+  :hover {
+    cursor: pointer;
+    box-shadow: none;
+    background-color: ${props => props.theme.sideBarCloseBtnBgdHover};
+  }
+`;
+
+export const CollapseButtonFactory = () => {
+  const CollapseButton = ({onClick, isOpen}) => (
+    <StyledCollapseButton className="side-bar__close" onClick={onClick}>
+      <ArrowRight height="12px" style={{transform: `rotate(${isOpen ? 180 : 0}deg)`}} />
+    </StyledCollapseButton>
+  );
+  return CollapseButton;
+};
+
+SidebarFactory.deps = [CollapseButtonFactory];
+
+function SidebarFactory(CollapseButton) {
+  return class SideBar extends Component {
+    static propTypes = {
+      width: PropTypes.number,
+      isOpen: PropTypes.bool,
+      minifiedWidth: PropTypes.number,
+      onOpenOrClose: PropTypes.func
+    };
+
+    static defaultProps = {
+      width: 300,
+      minifiedWidth: 0,
+      isOpen: true,
+      onOpenOrClose: function noop() {}
+    };
+
+    _onOpenOrClose = () => {
+      this.props.onOpenOrClose({isOpen: !this.props.isOpen});
+    };
+
+    render() {
+      const {isOpen, minifiedWidth, width} = this.props;
+      const horizontalOffset = isOpen ? 0 : minifiedWidth - width;
+
+      return (
+        <StyledSidePanelContainer width={isOpen ? width : 0} className="side-panel--container">
+          <SideBarContainer
+            className="side-bar"
+            style={{width: `${width}px`}}
+            left={horizontalOffset}
+          >
+            {isOpen ? (
+              <SideBarInner className="side-bar__inner">{this.props.children}</SideBarInner>
+            ) : null}
+            <CollapseButton isOpen={isOpen} onClick={this._onOpenOrClose} />
+          </SideBarContainer>
+        </StyledSidePanelContainer>
+      );
+    }
+  };
+}
+
+export default SidebarFactory;

package/src/components/side-panel.d.ts

@@ -0,0 +1,33 @@
+import {ComponentType} from 'react';
+import {Datasets, Filter, InteractionConfig, MapStyle} from '../reducers';
+import {Layer, LayerClassesType} from '../layers';
+
+import * as MapStyleActions from 'actions/map-style-actions';
+import * as VisStateActions from 'actions/vis-state-actions';
+import * as MapStateActions from 'actions/map-state-actions';
+
+export type SidePanelItem = {
+  id: stirng;
+  label: string;
+  iconComponent: ComponentType<any>;
+};
+
+export type SidePanelProps = {
+  filters: Filter;
+  interactionConfig: InteractionConfig;
+  layerBlending: stirng;
+  layers: Layer;
+  layerClasses: LayerClassesType;
+  mapStyle: MapStyle;
+  width: number;
+  datasets: Datasets;
+  visStateActions: typeof VisStateActions;
+  mapStateActions: typeof MapStateActions;
+  mapStyleActions: typeof MapStyleActions;
+  availableProviders: object;
+  mapSaved?: string | null;
+  panels: SidePanelItem[];
+};
+
+export const SidePanel: PureComponent<SidePanelProps>;
+export default function SidePanelFactory(): PureComponent<SidePanelProps>;