14430112347

Committed 13 Apr 2025 01:53PM UTC coverage: 61.717% (-4.4%) from 66.129%

Build # 14430112347

Build Type

Pull #3048

github

Committed by

web-flow

Commit Message

Merge 4d33fb563 into 9de30e2ba

Pull Request Pull Request #3048: [feat] Raster Tile Layer

Run Details

6066 of 11656 branches covered (52.04%)

Branch coverage included in aggregate %.

136 of 1263 new or added lines in 45 files covered. (10.77%)

5 existing lines in 3 files now uncovered.

12551 of 18509 relevant lines covered (67.81%)

82.41 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

5.0

/src/components/src/modals/export-data-modal.tsx

// SPDX-License-Identifier: MIT
// Copyright contributors to the kepler.gl project

import React, {Component} from 'react';
import {injectIntl, IntlShape} from 'react-intl';

import {DatasetType, EXPORT_DATA_TYPE_OPTIONS} from '@kepler.gl/constants';
import {FormattedMessage} from '@kepler.gl/localization';
import {Datasets} from '@kepler.gl/table';

import {FileType} from '../common/icons';
import {
  StyledExportSection,
  StyledFilteredOption,
  StyledModalContent,
  StyledType,
  CheckMark
} from '../common/styled-components';
import {StyledWarning} from './export-map-modal/components';

const getDataRowCount = (
  datasets: Datasets,
  selectedDataset: string | undefined,
  filtered: boolean,
  intl: IntlShape
) => {
  if (selectedDataset === undefined) {
    return;
  }
  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()}
  );
};

export interface ExportDataModalProps {
  datasets: Datasets;
  selectedDataset?: string;
  dataType: string;
  filtered: boolean;
  // callbacks
  applyCPUFilter: (filter: string | string[]) => void;
  onChangeExportSelectedDataset: (dataset: string) => void;
  onChangeExportDataType: (type: string) => void;
  onChangeExportFiltered: (isFiltered: boolean) => void;
  intl: IntlShape;
  supportedDataTypes: {
    id: string;
    label: string;
    available: boolean;
  }[];
}

const ExportDataModalFactory = () => {
  class ExportDataModal extends Component<ExportDataModalProps> {
    componentDidMount() {
      const toCPUFilter = this.props.selectedDataset || Object.keys(this.props.datasets);
      this.props.applyCPUFilter(toCPUFilter);
    }

    _onSelectDataset: React.ChangeEventHandler<HTMLSelectElement> = ({target: {value}}) => {
      this.props.applyCPUFilter(value);
      this.props.onChangeExportSelectedDataset(value);
    };

    render() {
      const {
        supportedDataTypes = EXPORT_DATA_TYPE_OPTIONS,
        datasets,
        selectedDataset,
        dataType,
        filtered,
        onChangeExportDataType,
        onChangeExportFiltered,
        intl
      } = this.props;

      const exportAllDatasets = selectedDataset ? !datasets[selectedDataset] : true;
      const showTiledDatasetWarning = Object.keys(datasets).some(datasetId => {
        return (
          (datasets[datasetId].type === DatasetType.VECTOR_TILE ||
            datasets[datasetId].type === DatasetType.RASTER_TILE) &&
          (selectedDataset === datasetId || exportAllDatasets)
        );
      });

      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}
                    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>
            {showTiledDatasetWarning ? (
              <div className="title">
                <StyledWarning>
                  <FormattedMessage id={'modal.exportData.tiledDatasetWarning'} />
                </StyledWarning>
              </div>
            ) : null}
          </div>
        </StyledModalContent>
      );
    }
  }

  return injectIntl(ExportDataModal);
};

export default ExportDataModalFactory;

1	// SPDX-License-Identifier: MIT
2	// Copyright contributors to the kepler.gl project
3
4	import React, {Component} from 'react';
5	import {injectIntl, IntlShape} from 'react-intl';
6
7	import {DatasetType, EXPORT_DATA_TYPE_OPTIONS} from '@kepler.gl/constants';
8	import {FormattedMessage} from '@kepler.gl/localization';
9	import {Datasets} from '@kepler.gl/table';
10
11	import {FileType} from '../common/icons';
12	import {
13	StyledExportSection,
14	StyledFilteredOption,
15	StyledModalContent,
16	StyledType,
17	CheckMark
18	} from '../common/styled-components';
19	import {StyledWarning} from './export-map-modal/components';
20
21	const getDataRowCount = (	7✔
22	datasets: Datasets,
23	selectedDataset: string \| undefined,
24	filtered: boolean,
25	intl: IntlShape
26	) => {
27	if (selectedDataset === undefined) {	×
28	return;	×
29	}
30	const selectedData = datasets[selectedDataset];	×
31	if (!selectedData) {	×
32	return intl.formatMessage(	×
33	{id: 'modal.exportData.fileCount'},
34	{fileCount: Object.keys(datasets).length}
35	);
36	}
37	const {dataContainer, filteredIdxCPU} = selectedData;	×
38
39	if (filtered && !filteredIdxCPU) {	×
40	return '-';	×
41	}
42
43	const rowCount = filtered ? filteredIdxCPU?.length : dataContainer.numRows();	×
44
45	return intl.formatMessage(	×
46	{id: 'modal.exportData.rowCount'},
47	{rowCount: rowCount?.toLocaleString()}
48	);
49	};
50
51	export interface ExportDataModalProps {
52	datasets: Datasets;
53	selectedDataset?: string;
54	dataType: string;
55	filtered: boolean;
56	// callbacks
57	applyCPUFilter: (filter: string \| string[]) => void;
58	onChangeExportSelectedDataset: (dataset: string) => void;
59	onChangeExportDataType: (type: string) => void;
60	onChangeExportFiltered: (isFiltered: boolean) => void;
61	intl: IntlShape;
62	supportedDataTypes: {
63	id: string;
64	label: string;
65	available: boolean;
66	}[];
67	}
68
69	const ExportDataModalFactory = () => {	7✔
70	class ExportDataModal extends Component<ExportDataModalProps> {
71	componentDidMount() {
72	const toCPUFilter = this.props.selectedDataset \|\| Object.keys(this.props.datasets);	×
73	this.props.applyCPUFilter(toCPUFilter);	×
74	}
75
76	_onSelectDataset: React.ChangeEventHandler<HTMLSelectElement> = ({target: {value}}) => {	×
77	this.props.applyCPUFilter(value);	×
78	this.props.onChangeExportSelectedDataset(value);	×
79	};
80
81	render() {
82	const {
83	supportedDataTypes = EXPORT_DATA_TYPE_OPTIONS,	×
84	datasets,
85	selectedDataset,
86	dataType,
87	filtered,
88	onChangeExportDataType,
89	onChangeExportFiltered,
90	intl
91	} = this.props;	×
92
93	const exportAllDatasets = selectedDataset ? !datasets[selectedDataset] : true;	×
NEW 94	const showTiledDatasetWarning = Object.keys(datasets).some(datasetId => {	×
95	return (	×
96	(datasets[datasetId].type === DatasetType.VECTOR_TILE \|\|	×
97	datasets[datasetId].type === DatasetType.RASTER_TILE) &&
98	(selectedDataset === datasetId \|\| exportAllDatasets)
99	);
100	});
101
102	return (	×
103	<StyledModalContent className="export-data-modal">
104	<div>
105	<StyledExportSection>
106	<div className="description">
107	<div className="title">
108	<FormattedMessage id={'modal.exportData.datasetTitle'} />
109	</div>
110	<div className="subtitle">
111	<FormattedMessage id={'modal.exportData.datasetSubtitle'} />
112	</div>
113	</div>
114	<div className="selection">
115	<select value={selectedDataset} onChange={this._onSelectDataset}>
116	{[intl.formatMessage({id: 'modal.exportData.allDatasets'})]
117	.concat(Object.keys(datasets))
118	.map(d => (
119	<option key={d} value={d}>	×
120	{(datasets[d] && datasets[d].label) \|\| d}	×
121	</option>
122	))}
123	</select>
124	</div>
125	</StyledExportSection>
126	<StyledExportSection>
127	<div className="description">
128	<div className="title">
129	<FormattedMessage id={'modal.exportData.dataTypeTitle'} />
130	</div>
131	<div className="subtitle">
132	<FormattedMessage id={'modal.exportData.dataTypeSubtitle'} />
133	</div>
134	</div>
135	<div className="selection">
136	{supportedDataTypes.map(op => (
137	<StyledType	×
138	key={op.id}
139	selected={dataType === op.id}
140	onClick={() => op.available && onChangeExportDataType(op.id)}	×
141	>
142	<FileType ext={op.label} height="80px" fontSize="11px" />
143	{dataType === op.id && <CheckMark />}	×
144	</StyledType>
145	))}
146	</div>
147	</StyledExportSection>
148	<StyledExportSection>
149	<div className="description">
150	<div className="title">
151	<FormattedMessage id={'modal.exportData.dataTypeTitle'} />
152	</div>
153	<div className="subtitle">
154	<FormattedMessage id={'modal.exportData.filterDataSubtitle'} />
155	</div>
156	</div>
157	<div className="selection">
158	<StyledFilteredOption
159	className="unfiltered-option"
160	selected={!filtered}
161	onClick={() => onChangeExportFiltered(false)}	×
162	>
163	<div className="filter-option-title">
164	<FormattedMessage id={'modal.exportData.unfilteredData'} />
165	</div>
166	<div className="filter-option-subtitle">
167	{getDataRowCount(datasets, selectedDataset, false, intl)}
168	</div>
169	{!filtered && <CheckMark />}	×
170	</StyledFilteredOption>
171	<StyledFilteredOption
172	className="filtered-option"
173	selected={filtered}
174	onClick={() => onChangeExportFiltered(true)}	×
175	>
176	<div className="filter-option-title">
177	<FormattedMessage id={'modal.exportData.filteredData'} />
178	</div>
179	<div className="filter-option-subtitle">
180	{getDataRowCount(datasets, selectedDataset, true, intl)}
181	</div>
182	{filtered && <CheckMark />}	×
183	</StyledFilteredOption>
184	</div>
185	</StyledExportSection>
186	{showTiledDatasetWarning ? (	×
187	<div className="title">
188	<StyledWarning>
189	<FormattedMessage id={'modal.exportData.tiledDatasetWarning'} />
190	</StyledWarning>
191	</div>
192	) : null}
193	</div>
194	</StyledModalContent>
195	);
196	}
197	}
198
199	return injectIntl(ExportDataModal);	14✔
200	};
201
202	export default ExportDataModalFactory;

keplergl / kepler.gl / 14430112347

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous