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

package/src/components/modals/add-map-style-modal.js

@@ -0,0 +1,301 @@
+// 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 {polyfill} from 'react-lifecycles-compat';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styled from 'styled-components';
+import MapboxGLMap from 'react-map-gl';
+import {
+  StyledModalContent,
+  InputLight,
+  StyledMapContainer,
+  StyledModalVerticalPanel,
+  StyledModalSection
+} from 'components/common/styled-components';
+import {media} from 'styles/media-breakpoints';
+
+// Utils
+import {transformRequest} from 'utils/map-style-utils/mapbox-utils';
+import {injectIntl} from 'react-intl';
+import {FormattedMessage} from 'localization';
+
+const MapH = 190;
+const MapW = 264;
+const ErrorMsg = {
+  styleError:
+    'Failed to load map style, make sure it is published. For private style, paste in your access token.'
+};
+
+const PreviewMap = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 116px;
+  flex-shrink: 0;
+
+  .preview-title {
+    font-weight: 500;
+    font-size: 10px;
+    padding: 8px 0px;
+  }
+
+  .preview-title.error {
+    color: ${props => props.theme.errorColor};
+  }
+
+  ${media.portable`
+    margin-left: 32px;
+  `};
+
+  ${media.palm`
+    margin-left: unset;
+    .preview-title {
+      margin-top: 0px;
+    }
+  `};
+`;
+
+const StyledPreviewImage = styled.div`
+  background: ${props => props.theme.modalImagePlaceHolder};
+  border-radius: 4px;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.18);
+  width: ${MapW}px;
+  height: ${MapH}px;
+  position: relative;
+
+  .preview-image-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .preview-image-spinner {
+    position: absolute;
+    left: calc(50% - 25px);
+    top: calc(50% - 25px);
+  }
+`;
+
+const InlineLink = styled.a`
+  font-weight: 500;
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+
+function AddMapStyleModalFactory() {
+  class AddMapStyleModal extends Component {
+    static propTypes = {
+      inputMapStyle: PropTypes.func.isRequired,
+      inputStyle: PropTypes.object.isRequired,
+      loadCustomMapStyle: PropTypes.func.isRequired,
+      mapboxApiAccessToken: PropTypes.string.isRequired,
+      mapboxApiUrl: PropTypes.string.isRequired,
+      mapState: PropTypes.object.isRequired
+    };
+
+    state = {
+      reRenderKey: 0,
+      previousToken: null
+    };
+
+    static getDerivedStateFromProps(props, state) {
+      if (
+        props.inputStyle &&
+        props.inputStyle.accessToken &&
+        props.inputStyle.accessToken !== state.previousToken
+      ) {
+        // toke has changed
+        // ReactMapGl doesn't re-create map when token has changed
+        // here we force the map to update
+
+        return {
+          reRenderKey: state.reRenderKey + 1,
+          previousToken: props.inputStyle.accessToken
+        };
+      }
+
+      return null;
+    }
+
+    componentDidUpdate() {
+      const map = this.mapRef && this.mapRef.getMap();
+      if (map && this._map !== map) {
+        this._map = map;
+
+        map.on('style.load', () => {
+          const style = map.getStyle();
+          this.loadMapStyleJson(style);
+        });
+
+        map.on('error', () => {
+          this.loadMapStyleError();
+        });
+      }
+    }
+
+    loadMapStyleJson = style => {
+      this.props.loadCustomMapStyle({style, error: false});
+    };
+
+    loadMapStyleError = () => {
+      this.props.loadCustomMapStyle({error: true});
+    };
+
+    render() {
+      const {inputStyle, mapState, mapboxApiUrl, intl} = this.props;
+
+      const mapboxApiAccessToken = inputStyle.accessToken || this.props.mapboxApiAccessToken;
+      const mapProps = {
+        ...mapState,
+        mapboxApiUrl,
+        mapboxApiAccessToken,
+        preserveDrawingBuffer: true,
+        transformRequest
+      };
+
+      return (
+        <div className="add-map-style-modal">
+          <StyledModalContent>
+            <StyledModalVerticalPanel>
+              <StyledModalSection>
+                <div className="modal-section-title">
+                  <FormattedMessage id={'modal.addStyle.pasteTitle'} />
+                </div>
+                <div className="modal-section-subtitle">
+                  {intl.formatMessage({id: 'modal.addStyle.pasteSubtitle0'})}
+                  <InlineLink
+                    target="_blank"
+                    href="https://www.mapbox.com/help/studio-manual-publish/#style-url"
+                  >
+                    {' '}
+                    {intl.formatMessage({id: 'modal.addStyle.pasteSubtitle2'})}
+                  </InlineLink>{' '}
+                  {intl.formatMessage({id: 'modal.addStyle.pasteSubtitle3'})}
+                  <InlineLink
+                    target="_blank"
+                    href="https://docs.mapbox.com/mapbox-gl-js/style-spec"
+                  >
+                    {' '}
+                    {intl.formatMessage({id: 'modal.addStyle.pasteSubtitle4'})}
+                  </InlineLink>
+                </div>
+                <InputLight
+                  type="text"
+                  value={inputStyle.url || ''}
+                  onChange={({target: {value}}) => this.props.inputMapStyle({url: value})}
+                  placeholder="e.g. mapbox://styles/username/style, http://my.stles.com/xxx/style.json "
+                />
+              </StyledModalSection>
+
+              <StyledModalSection>
+                <div className="modal-section-title">
+                  <FormattedMessage id={'modal.addStyle.publishTitle'} />
+                </div>
+                <div className="modal-section-subtitle">
+                  {intl.formatMessage({id: 'modal.addStyle.publishSubtitle1'})}
+                  <InlineLink target="_blank" href="https://www.mapbox.com/studio/styles/">
+                    {' '}
+                    mapbox
+                  </InlineLink>{' '}
+                  {intl.formatMessage({id: 'modal.addStyle.publishSubtitle2'})}
+                  <InlineLink
+                    target="_blank"
+                    href="https://www.mapbox.com/help/studio-manual-publish/"
+                  >
+                    {' '}
+                    {intl.formatMessage({id: 'modal.addStyle.publishSubtitle3'})}
+                  </InlineLink>{' '}
+                  {intl.formatMessage({id: 'modal.addStyle.publishSubtitle4'})}
+                </div>
+
+                <div className="modal-section-subtitle">
+                  {intl.formatMessage({id: 'modal.addStyle.publishSubtitle5'})}
+                  <InlineLink
+                    target="_blank"
+                    href="https://www.mapbox.com/help/how-access-tokens-work/"
+                  >
+                    {' '}
+                    {intl.formatMessage({id: 'modal.addStyle.publishSubtitle6'})}
+                  </InlineLink>{' '}
+                  {intl.formatMessage({id: 'modal.addStyle.publishSubtitle7'})}
+                </div>
+                <InputLight
+                  type="text"
+                  value={inputStyle.accessToken || ''}
+                  onChange={({target: {value}}) => this.props.inputMapStyle({accessToken: value})}
+                  placeholder={intl.formatMessage({id: 'modal.addStyle.exampleToken'})}
+                />
+              </StyledModalSection>
+
+              <StyledModalSection>
+                <div className="modal-section-title">
+                  <FormattedMessage id={'modal.addStyle.namingTitle'} />
+                </div>
+                <InputLight
+                  type="text"
+                  value={inputStyle.label || ''}
+                  onChange={({target: {value}}) => this.props.inputMapStyle({label: value})}
+                />
+              </StyledModalSection>
+            </StyledModalVerticalPanel>
+            <PreviewMap>
+              <div
+                className={classnames('preview-title', {
+                  error: inputStyle.error
+                })}
+              >
+                {inputStyle.error
+                  ? ErrorMsg.styleError
+                  : (inputStyle.style && inputStyle.style.name) || ''}
+              </div>
+              <StyledPreviewImage className="preview-image">
+                {!inputStyle.isValid ? (
+                  <div className="preview-image-spinner" />
+                ) : (
+                  <StyledMapContainer>
+                    <MapboxGLMap
+                      {...mapProps}
+                      ref={el => {
+                        this.mapRef = el;
+                      }}
+                      key={this.state.reRenderKey}
+                      width={MapW}
+                      height={MapH}
+                      mapStyle={inputStyle.url}
+                    />
+                  </StyledMapContainer>
+                )}
+              </StyledPreviewImage>
+            </PreviewMap>
+          </StyledModalContent>
+        </div>
+      );
+    }
+  }
+
+  return injectIntl(polyfill(AddMapStyleModal));
+}
+
+export default AddMapStyleModalFactory;

package/src/components/modals/cloud-tile.js

@@ -0,0 +1,147 @@
+// 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 {Logout, Login} from 'components/common/icons';
+import {CenterVerticalFlexbox, Button, CheckMark} from 'components/common/styled-components';
+import LoadingSpinner from 'components/common/loading-spinner';
+
+const StyledTileWrapper = styled.div.attrs({
+  className: 'provider-tile__wrapper'
+})`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  border-radius: 2px;
+  border: 1px solid
+    ${props => (props.selected ? props.theme.primaryBtnBgd : props.theme.selectBorderColorLT)};
+  color: ${props => (props.selected ? props.theme.primaryBtnBgd : props.theme.selectBorderColorLT)};
+  cursor: pointer;
+  font-weight: 500;
+  width: 120px;
+  height: 168px;
+  background-color: #ffffff;
+  transition: ${props => props.theme.transition};
+  position: relative;
+  :hover {
+    border: 1px solid ${props => props.theme.primaryBtnBgd};
+    color: ${props => props.theme.primaryBtnBgd};
+  }
+
+  .button {
+    margin-top: 20px;
+  }
+`;
+
+const StyledBox = styled(CenterVerticalFlexbox)`
+  margin-right: 12px;
+`;
+
+const StyledCloudName = styled.div`
+  font-size: 12px;
+  margin-top: 12px;
+  margin-bottom: 4px;
+`;
+
+const StyledUserName = styled.div`
+  font-size: 11px;
+  margin-top: 8px;
+  text-align: center;
+  color: ${props => props.theme.primaryBtnActBgd};
+  overflow: hidden;
+  width: 100px;
+  text-overflow: ellipsis;
+`;
+
+const LoginButton = ({onClick}) => (
+  <Button className="login-button" link small onClick={onClick}>
+    <Login />
+    Login
+  </Button>
+);
+
+const LogoutButton = ({onClick}) => (
+  <Button className="logout-button" link small onClick={onClick}>
+    <Logout />
+    Logout
+  </Button>
+);
+
+const ActionButton = ({isConnected, actionName = null, isReady}) =>
+  isConnected && actionName ? (
+    <Button className="cloud-tile__action" small secondary disabled={!isReady}>
+      {isReady ? actionName : <LoadingSpinner size={12} />}
+    </Button>
+  ) : null;
+
+const CloudTile = ({
+  // action when click on the tile
+  onSelect,
+  // default to login
+  onConnect = null,
+  // default to logout
+  onLogout = null,
+  // action name
+  actionName = null,
+  // cloud provider class
+  cloudProvider,
+  // function to take after login or logout
+  onSetCloudProvider,
+  // whether provider is selected as currentProvider
+  isSelected,
+  // whether user has logged in
+  isConnected,
+
+  isReady = true
+}) => {
+  const userName =
+    typeof cloudProvider.getUserName === 'function' ? cloudProvider.getUserName() : null;
+
+  const onClickConnect =
+    typeof onConnect === 'function'
+      ? onConnect
+      : () => cloudProvider.login(() => onSetCloudProvider(cloudProvider.name));
+
+  const onClickLogout =
+    typeof onLogout === 'function'
+      ? onLogout
+      : () => cloudProvider.logout(() => (isSelected ? onSetCloudProvider(null) : null));
+
+  return (
+    <StyledBox>
+      <StyledTileWrapper onClick={isConnected ? onSelect : onClickConnect} selected={isSelected}>
+        <StyledCloudName>{cloudProvider.displayName || cloudProvider.name}</StyledCloudName>
+        {cloudProvider.icon ? <cloudProvider.icon height="64px" /> : null}
+        <ActionButton isConnected={isConnected} actionName={actionName} isReady={isReady} />
+        {userName && <StyledUserName>{userName}</StyledUserName>}
+        {isSelected && <CheckMark />}
+      </StyledTileWrapper>
+      {isConnected ? (
+        <LogoutButton onClick={onClickLogout} />
+      ) : (
+        <LoginButton onClick={onClickConnect} />
+      )}
+    </StyledBox>
+  );
+};
+
+export default CloudTile;

package/src/components/modals/data-table-modal.js

@@ -0,0 +1,217 @@
+// 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, {withTheme} from 'styled-components';
+import DatasetLabel from 'components/common/dataset-label';
+import DataTableFactory from 'components/common/data-table';
+import {createSelector} from 'reselect';
+import {renderedSize} from 'components/common/data-table/cell-size';
+import CanvasHack from 'components/common/data-table/canvas';
+
+const dgSettings = {
+  sidePadding: '38px',
+  verticalPadding: '16px',
+  height: '36px'
+};
+
+const StyledModal = styled.div`
+  min-height: 70vh;
+  overflow: hidden;
+  display: flex;
+`;
+
+const DatasetCatalog = styled.div`
+  display: flex;
+  padding: ${dgSettings.verticalPadding} ${dgSettings.sidePadding} 0;
+`;
+
+export const DatasetModalTab = styled.div`
+  align-items: center;
+  border-bottom: 3px solid ${props => (props.active ? 'black' : 'transparent')};
+  cursor: pointer;
+  display: flex;
+  height: 35px;
+  margin: 0 3px;
+  padding: 0 5px;
+
+  :first-child {
+    margin-left: 0;
+    padding-left: 0;
+  }
+`;
+
+const DatasetTabsUnmemoized = ({activeDataset, datasets, showDatasetTable}) => (
+  <DatasetCatalog className="dataset-modal-catalog">
+    {Object.values(datasets).map(dataset => (
+      <DatasetModalTab
+        className="dataset-modal-tab"
+        active={dataset === activeDataset}
+        key={dataset.id}
+        onClick={() => showDatasetTable(dataset.id)}
+      >
+        <DatasetLabel dataset={dataset} />
+      </DatasetModalTab>
+    ))}
+  </DatasetCatalog>
+);
+
+export const DatasetTabs = React.memo(DatasetTabsUnmemoized);
+
+DatasetTabs.displayName = 'DatasetTabs';
+
+DataTableModalFactory.deps = [DataTableFactory];
+
+const TableContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 100%;
+  max-height: 100%;
+`;
+
+function DataTableModalFactory(DataTable) {
+  class DataTableModal extends React.Component {
+    datasetCellSizeCache = {};
+    dataId = props => props.dataId;
+    datasets = props => props.datasets;
+    fields = props => (props.datasets[props.dataId] || {}).fields;
+    columns = createSelector(this.fields, fields => fields.map(f => f.name));
+    colMeta = createSelector(this.fields, fields =>
+      fields.reduce(
+        (acc, {name, displayName, type}) => ({
+          ...acc,
+          [name]: {
+            name: displayName || name,
+            type
+          }
+        }),
+        {}
+      )
+    );
+
+    cellSizeCache = createSelector(this.dataId, this.datasets, (dataId, datasets) => {
+      if (!datasets[dataId]) {
+        return {};
+      }
+      const {fields, dataContainer} = datasets[dataId];
+
+      let showCalculate = null;
+      if (!this.datasetCellSizeCache[dataId]) {
+        showCalculate = true;
+      } else if (
+        this.datasetCellSizeCache[dataId].fields !== fields ||
+        this.datasetCellSizeCache[dataId].dataContainer !== dataContainer
+      ) {
+        showCalculate = true;
+      }
+
+      if (!showCalculate) {
+        return this.datasetCellSizeCache[dataId].cellSizeCache;
+      }
+
+      const cellSizeCache = fields.reduce(
+        (acc, field, colIdx) => ({
+          ...acc,
+          [field.name]: renderedSize({
+            text: {
+              dataContainer,
+              column: field.name
+            },
+            colIdx,
+            type: field.type,
+            fontSize: this.props.theme.cellFontSize,
+            font: this.props.theme.fontFamily
+          })
+        }),
+        {}
+      );
+      // save it to cache
+      this.datasetCellSizeCache[dataId] = {
+        cellSizeCache,
+        fields,
+        dataContainer
+      };
+      return cellSizeCache;
+    });
+
+    copyTableColumn = column => {
+      const {dataId, copyTableColumn} = this.props;
+      copyTableColumn(dataId, column);
+    };
+
+    pinTableColumn = column => {
+      const {dataId, pinTableColumn} = this.props;
+      pinTableColumn(dataId, column);
+    };
+
+    sortTableColumn = (column, mode) => {
+      const {dataId, sortTableColumn} = this.props;
+      sortTableColumn(dataId, column, mode);
+    };
+
+    render() {
+      const {datasets, dataId, showDatasetTable, showTab} = this.props;
+      if (!datasets || !dataId) {
+        return null;
+      }
+      const activeDataset = datasets[dataId];
+      const columns = this.columns(this.props);
+      const colMeta = this.colMeta(this.props);
+      const cellSizeCache = this.cellSizeCache(this.props);
+
+      return (
+        <StyledModal className="dataset-modal" id="dataset-modal">
+          <CanvasHack />
+          <TableContainer>
+            {showTab ? (
+              <DatasetTabs
+                activeDataset={activeDataset}
+                datasets={datasets}
+                showDatasetTable={showDatasetTable}
+              />
+            ) : null}
+            {datasets[dataId] ? (
+              <DataTable
+                key={dataId}
+                columns={columns}
+                colMeta={colMeta}
+                cellSizeCache={cellSizeCache}
+                dataContainer={activeDataset.dataContainer}
+                pinnedColumns={activeDataset.pinnedColumns}
+                sortOrder={activeDataset.sortOrder}
+                sortColumn={activeDataset.sortColumn}
+                copyTableColumn={this.copyTableColumn}
+                pinTableColumn={this.pinTableColumn}
+                sortTableColumn={this.sortTableColumn}
+              />
+            ) : null}
+          </TableContainer>
+        </StyledModal>
+      );
+    }
+  }
+  DataTableModal.defaultProps = {
+    showTab: true
+  };
+  return withTheme(DataTableModal);
+}
+
+export default DataTableModalFactory;