@carto/kepler.gl 0.0.81 → 0.0.82

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

@@ -1,48 +0,0 @@
-// 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 DatasetLabel from 'components/common/dataset-label';
-import {FormattedMessage} from 'localization';
-
-const StyledMsg = styled.div`
-  margin-top: 24px;
-`;
-
-export const DeleteDatasetModal = ({dataset, layers = []}) => {
-  // retrieve only layers related to the current dataset
-  const currDatasetLayers = layers.filter(layer => layer.config.dataId === (dataset && dataset.id));
-
-  return (
-    <div className="delete-dataset-modal">
-      <DatasetLabel dataset={dataset} />
-      <StyledMsg className="delete-dataset-msg">
-        <FormattedMessage
-          id={'modal.deleteData.warning'}
-          values={{length: currDatasetLayers.length}}
-        />
-      </StyledMsg>
-    </div>
-  );
-};
-
-const DeleteDatasetModalFactory = () => DeleteDatasetModal;
-export default DeleteDatasetModalFactory;

package/src/components/modals/error-display.js

@@ -1,39 +0,0 @@
-// 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 ErrorBoundary from 'components/common/error-boundary';
-import NotificationItemFactory from 'components/notification-panel/notification-item';
-const NotificationItem = NotificationItemFactory();
-
-const ErrorDisplay = ({error}) => (
-  <ErrorBoundary>
-    <NotificationItem
-      notification={{
-        type: 'error',
-        message: error,
-        id: 'cloud-export-error'
-      }}
-      isExpanded
-    />
-  </ErrorBoundary>
-);
-
-export default ErrorDisplay;

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

@@ -1,193 +0,0 @@
-// 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 {EXPORT_DATA_TYPE_OPTIONS} from 'constants/default-settings';
-import {FileType} from 'components/common/icons';
-import {
-  StyledExportSection,
-  StyledFilteredOption,
-  StyledModalContent,
-  StyledType,
-  CheckMark
-} from 'components/common/styled-components';
-import {injectIntl} from 'react-intl';
-import {FormattedMessage} from 'localization';
-
-const propTypes = {
-  datasets: PropTypes.object.isRequired,
-  selectedDataset: PropTypes.string,
-  dataType: PropTypes.string.isRequired,
-  filtered: PropTypes.bool.isRequired,
-  // callbacks
-  applyCPUFilter: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onChangeExportSelectedDataset: PropTypes.func.isRequired,
-  onChangeExportDataType: PropTypes.func.isRequired,
-  onChangeExportFiltered: PropTypes.func.isRequired
-};
-
-const getDataRowCount = (datasets, selectedDataset, filtered, intl) => {
-  const selectedData = datasets[selectedDataset];
-  if (!selectedData) {
-    return intl.formatMessage(
-      {id: 'modal.exportData.fileCount'},
-      {fileCount: Object.keys(datasets).length}
-    );
-  }
-  const {dataContainer, filteredIdxCPU} = selectedData;
-
-  if (filtered && !filteredIdxCPU) {
-    return '-';
-  }
-
-  const rowCount = filtered ? filteredIdxCPU.length : dataContainer.numRows();
-
-  return intl.formatMessage(
-    {id: 'modal.exportData.rowCount'},
-    {rowCount: rowCount.toLocaleString()}
-  );
-};
-
-const ExportDataModalFactory = () => {
-  class ExportDataModal extends Component {
-    componentDidMount() {
-      const toCPUFilter = this.props.selectedDataset || Object.keys(this.props.datasets);
-      this.props.applyCPUFilter(toCPUFilter);
-    }
-
-    _onSelectDataset = ({target: {value}}) => {
-      this.props.applyCPUFilter(value);
-      this.props.onChangeExportSelectedDataset(value);
-    };
-
-    render() {
-      const {
-        supportedDataTypes,
-        datasets,
-        selectedDataset,
-        dataType,
-        filtered,
-        onChangeExportDataType,
-        onChangeExportFiltered,
-        intl
-      } = this.props;
-
-      return (
-        <StyledModalContent className="export-data-modal">
-          <div>
-            <StyledExportSection>
-              <div className="description">
-                <div className="title">
-                  <FormattedMessage id={'modal.exportData.datasetTitle'} />
-                </div>
-                <div className="subtitle">
-                  <FormattedMessage id={'modal.exportData.datasetSubtitle'} />
-                </div>
-              </div>
-              <div className="selection">
-                <select value={selectedDataset} onChange={this._onSelectDataset}>
-                  {[intl.formatMessage({id: 'modal.exportData.allDatasets'})]
-                    .concat(Object.keys(datasets))
-                    .map(d => (
-                      <option key={d} value={d}>
-                        {(datasets[d] && datasets[d].label) || d}
-                      </option>
-                    ))}
-                </select>
-              </div>
-            </StyledExportSection>
-            <StyledExportSection>
-              <div className="description">
-                <div className="title">
-                  <FormattedMessage id={'modal.exportData.dataTypeTitle'} />
-                </div>
-                <div className="subtitle">
-                  <FormattedMessage id={'modal.exportData.dataTypeSubtitle'} />
-                </div>
-              </div>
-              <div className="selection">
-                {supportedDataTypes.map(op => (
-                  <StyledType
-                    key={op.id}
-                    selected={dataType === op.id}
-                    available={op.available}
-                    onClick={() => op.available && onChangeExportDataType(op.id)}
-                  >
-                    <FileType ext={op.label} height="80px" fontSize="11px" />
-                    {dataType === op.id && <CheckMark />}
-                  </StyledType>
-                ))}
-              </div>
-            </StyledExportSection>
-            <StyledExportSection>
-              <div className="description">
-                <div className="title">
-                  <FormattedMessage id={'modal.exportData.dataTypeTitle'} />
-                </div>
-                <div className="subtitle">
-                  <FormattedMessage id={'modal.exportData.filterDataSubtitle'} />
-                </div>
-              </div>
-              <div className="selection">
-                <StyledFilteredOption
-                  className="unfiltered-option"
-                  selected={!filtered}
-                  onClick={() => onChangeExportFiltered(false)}
-                >
-                  <div className="filter-option-title">
-                    <FormattedMessage id={'modal.exportData.unfilteredData'} />
-                  </div>
-                  <div className="filter-option-subtitle">
-                    {getDataRowCount(datasets, selectedDataset, false, intl)}
-                  </div>
-                  {!filtered && <CheckMark />}
-                </StyledFilteredOption>
-                <StyledFilteredOption
-                  className="filtered-option"
-                  selected={filtered}
-                  onClick={() => onChangeExportFiltered(true)}
-                >
-                  <div className="filter-option-title">
-                    <FormattedMessage id={'modal.exportData.filteredData'} />
-                  </div>
-                  <div className="filter-option-subtitle">
-                    {getDataRowCount(datasets, selectedDataset, true, intl)}
-                  </div>
-                  {filtered && <CheckMark />}
-                </StyledFilteredOption>
-              </div>
-            </StyledExportSection>
-          </div>
-        </StyledModalContent>
-      );
-    }
-  }
-  ExportDataModal.propTypes = propTypes;
-  ExportDataModal.defaultProps = {
-    supportedDataTypes: EXPORT_DATA_TYPE_OPTIONS
-  };
-
-  return injectIntl(ExportDataModal);
-};
-
-export default ExportDataModalFactory;

package/src/components/modals/export-image-modal.d.ts

@@ -1,21 +0,0 @@
-import {FunctionComponent} from 'react';
-import {SetExportImageSettingUpdaterAction} from '../../actions';
-import {ExportImage} from '../../reducers';
-import {IntlShape} from 'react-intl';
-
-export type ExportImageModalProps = {
-  exportImage: ExportImage;
-  mapW: number;
-  mapH: number;
-  onUpdateImageSetting: (payload: SetExportImageSettingUpdaterAction.payload) => void;
-  cleanupExportImage: () => void;
-};
-
-type IntlProps = {
-  intl: IntlShape;
-};
-
-export const ExportImageModal: FunctionComponent<ExportImageModalProps & IntlProps>;
-function ExportImageModalFactory(): FunctionComponent<ExportImageModalProps>;
-
-export default ExportImageModalFactory;

package/src/components/modals/export-image-modal.js

@@ -1,144 +0,0 @@
-// 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, {useEffect} from 'react';
-import styled from 'styled-components';
-import ImagePreview from 'components/common/image-preview';
-
-import {EXPORT_IMG_RATIO_OPTIONS, EXPORT_IMG_RESOLUTION_OPTIONS} from 'constants/default-settings';
-
-import {StyledModalContent, SelectionButton, CheckMark} from 'components/common/styled-components';
-import Switch from 'components/common/switch';
-import {injectIntl} from 'react-intl';
-import {FormattedMessage} from 'localization';
-
-const ImageOptionList = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  width: 250px;
-
-  .image-option-section {
-    .image-option-section-title {
-      font-weight: 500;
-      font-size: 14px;
-    }
-  }
-
-  .button-list {
-    display: flex;
-    flex-direction: row;
-    padding: 8px 0px;
-  }
-
-  input {
-    margin-right: 8px;
-  }
-`;
-
-const ExportImageModalFactory = () => {
-  /** @type {typeof import('./export-image-modal').ExportImageModal} */
-  const ExportImageModal = ({
-    mapW,
-    mapH,
-    exportImage,
-    onUpdateImageSetting,
-    cleanupExportImage,
-    intl
-  }) => {
-    const {legend, ratio, resolution} = exportImage;
-
-    useEffect(() => {
-      onUpdateImageSetting({
-        exporting: true
-      });
-      return cleanupExportImage;
-    }, [onUpdateImageSetting, cleanupExportImage]);
-
-    useEffect(() => {
-      if (mapH !== exportImage.mapH || mapW !== exportImage.mapW) {
-        onUpdateImageSetting({
-          mapH,
-          mapW
-        });
-      }
-    }, [mapH, mapW, exportImage, onUpdateImageSetting]);
-
-    return (
-      <StyledModalContent className="export-image-modal">
-        <ImageOptionList>
-          <div className="image-option-section">
-            <div className="image-option-section-title">
-              <FormattedMessage id={'modal.exportImage.ratioTitle'} />
-            </div>
-            <FormattedMessage id={'modal.exportImage.ratioDescription'} />
-            <div className="button-list" id="export-image-modal__option_ratio">
-              {EXPORT_IMG_RATIO_OPTIONS.filter(op => !op.hidden).map(op => (
-                <SelectionButton
-                  key={op.id}
-                  selected={ratio === op.id}
-                  onClick={() => onUpdateImageSetting({ratio: op.id})}
-                >
-                  <FormattedMessage id={op.label} />
-                  {ratio === op.id && <CheckMark />}
-                </SelectionButton>
-              ))}
-            </div>
-          </div>
-          <div className="image-option-section">
-            <div className="image-option-section-title">
-              <FormattedMessage id={'modal.exportImage.resolutionTitle'} />
-            </div>
-            <FormattedMessage id={'modal.exportImage.resolutionDescription'} />
-            <div className="button-list" id="export-image-modal__option_resolution">
-              {EXPORT_IMG_RESOLUTION_OPTIONS.map(op => (
-                <SelectionButton
-                  key={op.id}
-                  selected={resolution === op.id}
-                  onClick={() => op.available && onUpdateImageSetting({resolution: op.id})}
-                >
-                  {op.label}
-                  {resolution === op.id && <CheckMark />}
-                </SelectionButton>
-              ))}
-            </div>
-          </div>
-          <div className="image-option-section">
-            <div className="image-option-section-title">
-              <FormattedMessage id={'modal.exportImage.mapLegendTitle'} />
-            </div>
-            <Switch
-              type="checkbox"
-              id="add-map-legend"
-              checked={legend}
-              label={intl.formatMessage({id: 'modal.exportImage.mapLegendAdd'})}
-              onChange={() => onUpdateImageSetting({legend: !legend})}
-            />
-          </div>
-        </ImageOptionList>
-        <ImagePreview exportImage={exportImage} />
-      </StyledModalContent>
-    );
-  };
-
-  return injectIntl(ExportImageModal);
-};
-
-export default ExportImageModalFactory;

package/src/components/modals/export-map-modal/export-html-map.d.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-import {setUserMapboxAccessToken, setExportHTMLMapMode} from '../../actions';
-import {IntlShape} from 'react-intl';
-
-export type ExportHtmlMapProps = {
-  onChangeExportMapHTMLMode: typeof setExportHTMLMapMode;
-  onEditUserMapboxAccessToken: typeof setUserMapboxAccessToken;
-  options: {
-    userMapboxToken?: string;
-    mode?: string;
-  };
-};
-
-type IntlProps = {
-  intl: IntlShape;
-};
-
-export const ExportHtmlMap: React.FunctionComponent<ExportHtmlMapProps & IntlProps>;
-function ExportHtmlMapFactory(): React.FunctionComponent<ExportHtmlMapProps>;
-
-export default ExportHtmlMapFactory;

package/src/components/modals/export-map-modal/export-html-map.js

@@ -1,145 +0,0 @@
-// 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 {StyledExportSection, StyledType, CheckMark} from 'components/common/styled-components';
-import {StyledExportMapSection, StyledWarning, ExportMapLink} from './components';
-import {EXPORT_HTML_MAP_MODE_OPTIONS} from 'constants/default-settings';
-import {EXPORT_HTML_MAP_DOC, EXPORT_HTML_MAP_MODES_DOC} from 'constants/user-guides';
-import styled from 'styled-components';
-import {injectIntl} from 'react-intl';
-import {FormattedMessage} from 'localization';
-
-const ExportMapStyledExportSection = styled(StyledExportSection)`
-  .disclaimer {
-    font-size: ${props => props.theme.inputFontSize};
-    color: ${props => props.theme.inputColor};
-    margin-top: 12px;
-  }
-`;
-
-const StyledInput = styled.input`
-  width: 100%;
-  padding: ${props => props.theme.inputPadding};
-  color: ${props => (props.error ? 'red' : props.theme.titleColorLT)};
-  height: ${props => props.theme.inputBoxHeight};
-  outline: 0;
-  font-size: ${props => props.theme.inputFontSize};
-
-  :active,
-  :focus,
-  &.focus,
-  &.active {
-    outline: 0;
-  }
-`;
-
-const BigStyledTile = styled(StyledType)`
-  height: unset;
-  width: unset;
-  img {
-    width: 180px;
-    height: 120px;
-  }
-`;
-
-function ExportHtmlMapFactory() {
-  /** @type {typeof import('./export-html-map').ExportHtmlMap} */
-  const ExportHtmlMap = ({
-    onChangeExportMapHTMLMode = mode => {},
-    onEditUserMapboxAccessToken = token => {},
-    options = {},
-    intl
-  }) => (
-    <div>
-      <StyledExportMapSection>
-        <div className="description" />
-        <div className="selection">
-          <FormattedMessage id={'modal.exportMap.html.selection'} />
-        </div>
-      </StyledExportMapSection>
-      <ExportMapStyledExportSection className="export-map-modal__html-options">
-        <div className="description">
-          <div className="title">
-            <FormattedMessage id={'modal.exportMap.html.tokenTitle'} />
-          </div>
-          <div className="subtitle">
-            <FormattedMessage id={'modal.exportMap.html.tokenSubtitle'} />
-          </div>
-        </div>
-        <div className="selection">
-          <StyledInput
-            onChange={e => onEditUserMapboxAccessToken(e.target.value)}
-            type="text"
-            placeholder={intl.formatMessage({id: 'modal.exportMap.html.tokenPlaceholder'})}
-            value={options ? options.userMapboxToken : ''}
-          />
-          <div className="disclaimer">
-            <StyledWarning>
-              <FormattedMessage id={'modal.exportMap.html.tokenMisuseWarning'} />
-            </StyledWarning>
-            <FormattedMessage id={'modal.exportMap.html.tokenDisclaimer'} />
-            <ExportMapLink href={EXPORT_HTML_MAP_DOC}>
-              <FormattedMessage id={'modal.exportMap.html.tokenUpdate'} />
-            </ExportMapLink>
-          </div>
-        </div>
-      </ExportMapStyledExportSection>
-      <ExportMapStyledExportSection>
-        <div className="description">
-          <div className="title">
-            <FormattedMessage id={'modal.exportMap.html.modeTitle'} />
-          </div>
-          <div className="subtitle">
-            <FormattedMessage id={'modal.exportMap.html.modeSubtitle1'} />
-            <a href={EXPORT_HTML_MAP_MODES_DOC}>
-              <FormattedMessage id={'modal.exportMap.html.modeSubtitle2'} />
-            </a>
-          </div>
-        </div>
-        <div className="selection">
-          {EXPORT_HTML_MAP_MODE_OPTIONS.map(mode => (
-            <BigStyledTile
-              key={mode.id}
-              selected={options.mode === mode.id}
-              available={mode.available}
-              onClick={() => mode.available && onChangeExportMapHTMLMode(mode.id)}
-            >
-              <img src={mode.url} alt="" />
-              <p>
-                <FormattedMessage
-                  id={'modal.exportMap.html.modeDescription'}
-                  values={{mode: intl.formatMessage({id: mode.label})}}
-                />
-              </p>
-              {options.mode === mode.id && <CheckMark />}
-            </BigStyledTile>
-          ))}
-        </div>
-      </ExportMapStyledExportSection>
-    </div>
-  );
-
-  ExportHtmlMap.displayName = 'ExportHtmlMap';
-
-  return injectIntl(ExportHtmlMap);
-}
-
-export default ExportHtmlMapFactory;