22361650031

Committed 24 Feb 2026 05:09PM UTC coverage: 61.612% (-0.2%) from 61.806%

Build # 22361650031

Build Type

Pull #3219

github

Committed by

web-flow

Commit Message

Merge 1d9b34cb5 into cc33b0c8f

Pull Request Pull Request #3219: Update kepler-jupyter to use kepler.gl v3.2.0

Coverage Stats

6382 of 12288 branches covered (51.94%)

Branch coverage included in aggregate %.

13078 of 19297 relevant lines covered (67.77%)

81.44 hits per line

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

20.69

/src/components/src/modals/export-map-modal/export-html-map.tsx

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

import React from 'react';
import {StyledExportSection, StyledType, CheckMark} from '../../common/styled-components';
import {StyledExportMapSection, StyledWarning, ExportMapLink} from './components';
import {
  EXPORT_HTML_MAP_MODE_OPTIONS,
  EXPORT_HTML_MAP_DOC,
  EXPORT_HTML_MAP_MODES_DOC
} from '@kepler.gl/constants';
import styled from 'styled-components';
import {injectIntl} from 'react-intl';
import {FormattedMessage} from '@kepler.gl/localization';
import {IntlShape} from 'react-intl';

import {setUserMapboxAccessToken, setExportHTMLMapMode, ActionHandler} from '@kepler.gl/actions';

const ExportMapStyledExportSection = styled(StyledExportSection)`
  .disclaimer {
    font-size: ${props => props.theme.inputFontSize};
    color: ${props => props.theme.inputColor};
    margin-top: 12px;
  }
`;

interface StyledInputProps {
  error?: boolean;
}

const StyledInput = styled.input<StyledInputProps>`
  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;
  }
`;

type ExportHtmlMapProps = {
  onChangeExportMapHTMLMode: ActionHandler<typeof setExportHTMLMapMode>;
  onEditUserMapboxAccessToken: ActionHandler<typeof setUserMapboxAccessToken>;
  options: {
    userMapboxToken?: string;
    mode?: string;
  };
};

type IntlProps = {
  intl: IntlShape;
};

function ExportHtmlMapFactory(): React.ComponentType<ExportHtmlMapProps> {
  /** @type {typeof import('./export-html-map').ExportHtmlMap} */
  const ExportHtmlMap: React.FC<ExportHtmlMapProps & IntlProps> = ({
    onChangeExportMapHTMLMode = () => {
      return;
    },
    onEditUserMapboxAccessToken = () => {
      return;
    },
    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>
            <StyledWarning>
              <FormattedMessage id={'modal.exportMap.html.tokenSecurityWarning'} />
            </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}
              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;

1	// SPDX-License-Identifier: MIT
2	// Copyright contributors to the kepler.gl project
3
4	import React from 'react';
5	import {StyledExportSection, StyledType, CheckMark} from '../../common/styled-components';
6	import {StyledExportMapSection, StyledWarning, ExportMapLink} from './components';
7	import {
8	EXPORT_HTML_MAP_MODE_OPTIONS,
9	EXPORT_HTML_MAP_DOC,
10	EXPORT_HTML_MAP_MODES_DOC
11	} from '@kepler.gl/constants';
12	import styled from 'styled-components';
13	import {injectIntl} from 'react-intl';
14	import {FormattedMessage} from '@kepler.gl/localization';
15	import {IntlShape} from 'react-intl';
16
17	import {setUserMapboxAccessToken, setExportHTMLMapMode, ActionHandler} from '@kepler.gl/actions';
18
19	const ExportMapStyledExportSection = styled(StyledExportSection)`	7✔
20	.disclaimer {
21	font-size: ${props => props.theme.inputFontSize};	×
22	color: ${props => props.theme.inputColor};	×
23	margin-top: 12px;
24	}
25	`;
26
27	interface StyledInputProps {
28	error?: boolean;
29	}
30
31	const StyledInput = styled.input<StyledInputProps>`	7✔
32	width: 100%;
33	padding: ${props => props.theme.inputPadding};	×
34	color: ${props => (props.error ? 'red' : props.theme.titleColorLT)};	×
35	height: ${props => props.theme.inputBoxHeight};	×
36	outline: 0;
37	font-size: ${props => props.theme.inputFontSize};	×
38
39	&:active,
40	&:focus,
41	&.focus,
42	&.active {
43	outline: 0;
44	}
45	`;
46
47	const BigStyledTile = styled(StyledType)`	7✔
48	height: unset;
49	width: unset;
50	img {
51	width: 180px;
52	height: 120px;
53	}
54	`;
55
56	type ExportHtmlMapProps = {
57	onChangeExportMapHTMLMode: ActionHandler<typeof setExportHTMLMapMode>;
58	onEditUserMapboxAccessToken: ActionHandler<typeof setUserMapboxAccessToken>;
59	options: {
60	userMapboxToken?: string;
61	mode?: string;
62	};
63	};
64
65	type IntlProps = {
66	intl: IntlShape;
67	};
68
69	function ExportHtmlMapFactory(): React.ComponentType<ExportHtmlMapProps> {
70	/** @type {typeof import('./export-html-map').ExportHtmlMap} */
71	const ExportHtmlMap: React.FC<ExportHtmlMapProps & IntlProps> = ({	14✔
72	onChangeExportMapHTMLMode = () => {	×
73	return;	×
74	},
75	onEditUserMapboxAccessToken = () => {	×
76	return;	×
77	},
78	options = {},	×
79	intl
80	}) => (
81	<div>	×
82	<StyledExportMapSection>
83	<div className="description" />
84	<div className="selection">
85	<FormattedMessage id={'modal.exportMap.html.selection'} />
86	</div>
87	</StyledExportMapSection>
88	<ExportMapStyledExportSection className="export-map-modal__html-options">
89	<div className="description">
90	<div className="title">
91	<FormattedMessage id={'modal.exportMap.html.tokenTitle'} />
92	</div>
93	<div className="subtitle">
94	<FormattedMessage id={'modal.exportMap.html.tokenSubtitle'} />
95	</div>
96	</div>
97	<div className="selection">
98	<StyledInput
99	onChange={e => onEditUserMapboxAccessToken(e.target.value)}	×
100	type="text"
101	placeholder={intl.formatMessage({id: 'modal.exportMap.html.tokenPlaceholder'})}
102	value={options ? options.userMapboxToken : ''}	×
103	/>
104	<div className="disclaimer">
105	<StyledWarning>
106	<FormattedMessage id={'modal.exportMap.html.tokenMisuseWarning'} />
107	</StyledWarning>
108	<StyledWarning>
109	<FormattedMessage id={'modal.exportMap.html.tokenSecurityWarning'} />
110	</StyledWarning>
111	<FormattedMessage id={'modal.exportMap.html.tokenDisclaimer'} />
112	<ExportMapLink href={EXPORT_HTML_MAP_DOC}>
113	<FormattedMessage id={'modal.exportMap.html.tokenUpdate'} />
114	</ExportMapLink>
115	</div>
116	</div>
117	</ExportMapStyledExportSection>
118	<ExportMapStyledExportSection>
119	<div className="description">
120	<div className="title">
121	<FormattedMessage id={'modal.exportMap.html.modeTitle'} />
122	</div>
123	<div className="subtitle">
124	<FormattedMessage id={'modal.exportMap.html.modeSubtitle1'} />
125	<a href={EXPORT_HTML_MAP_MODES_DOC}>
126	<FormattedMessage id={'modal.exportMap.html.modeSubtitle2'} />
127	</a>
128	</div>
129	</div>
130	<div className="selection">
131	{EXPORT_HTML_MAP_MODE_OPTIONS.map(mode => (
132	<BigStyledTile	×
133	key={mode.id}
134	selected={options.mode === mode.id}
135	onClick={() => mode.available && onChangeExportMapHTMLMode(mode.id)}	×
136	>
137	<img src={mode.url} alt="" />
138	<p>
139	<FormattedMessage
140	id={'modal.exportMap.html.modeDescription'}
141	values={{mode: intl.formatMessage({id: mode.label})}}
142	/>
143	</p>
144	{options.mode === mode.id && <CheckMark />}	×
145	</BigStyledTile>
146	))}
147	</div>
148	</ExportMapStyledExportSection>
149	</div>
150	);
151
152	ExportHtmlMap.displayName = 'ExportHtmlMap';	14✔
153
154	return injectIntl(ExportHtmlMap);	14✔
155	}
156
157	export default ExportHtmlMapFactory;

keplergl / kepler.gl / 22361650031

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