7304574214

Committed 22 Dec 2023 11:11PM UTC coverage: 30.44% (-0.05%) from 30.494%

Build # 7304574214

Build Type

Pull #2501

github

Committed by

web-flow

Commit Message

Merge 45b3c98f7 into 24acc1a01

Pull Request Pull Request #2501: (chore) Bump `prettier` to 3.1.1

Run Details

1789 of 10840 branches covered (0.0%)

Branch coverage included in aggregate %.

344 of 1851 new or added lines in 258 files covered. (18.58%)

11 existing lines in 9 files now uncovered.

6251 of 15573 relevant lines covered (40.14%)

16.82 hits per line

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

56.0

/src/components/src/side-panel/layer-manager.tsx

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

import React, {Component, useCallback} from 'react';

import {injectIntl, WrappedComponentProps} from 'react-intl';
import styled from 'styled-components';
import {FormattedMessage} from '@kepler.gl/localization';

import LayerListFactory from './layer-panel/layer-list';
import DatasetLayerGroupFactory from './layer-panel/dataset-layer-group';
import PanelViewListToggleFactory from './panel-view-list-toggle';
import PanelTitleFactory from './panel-title';
import DatasetSectionFactory from './layer-panel/dataset-section';
import AddLayerButtonFactory from './layer-panel/add-layer-button';

import ItemSelector from '../common/item-selector/item-selector';
import {PanelLabel, SidePanelDivider, SidePanelSection} from '../common/styled-components';
import InfoHelperFactory from '../common/info-helper';

import {LAYER_BLENDINGS, OVERLAY_BLENDINGS, PANEL_VIEW_TOGGLES} from '@kepler.gl/constants';
import {Layer, LayerClassesType} from '@kepler.gl/layers';
import {UIStateActions, VisStateActions, ActionHandler} from '@kepler.gl/actions';
import {SidePanelItem} from '../types';
import {PanelListView} from '@kepler.gl/types';
import {Datasets} from '@kepler.gl/table';

type LayerBlendingSelectorProps = {
  layerBlending: string;
  updateLayerBlending: ActionHandler<typeof VisStateActions.updateLayerBlending>;
} & WrappedComponentProps;

type OverlayBlendingSelectorProps = {
  overlayBlending: string;
  updateOverlayBlending: ActionHandler<typeof VisStateActions.updateOverlayBlending>;
  infoHelper: React.ReactNode;
} & WrappedComponentProps;

type LayerManagerProps = {
  datasets: Datasets;
  layers: Layer[];
  layerOrder: string[];
  layerClasses: LayerClassesType;
  layerBlending: string;
  overlayBlending: string;
  uiStateActions: typeof UIStateActions;
  visStateActions: typeof VisStateActions;
  showAddDataModal: () => void;
  removeDataset: ActionHandler<typeof UIStateActions.openDeleteModal>;
  showDatasetTable: ActionHandler<typeof VisStateActions.showDatasetTable>;
  updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
  panelListView: PanelListView;
  panelMetadata: SidePanelItem;
} & WrappedComponentProps;

export const LayerBlendingSelector = React.memo(
  ({layerBlending, updateLayerBlending, intl}: LayerBlendingSelectorProps) => {
    const labeledLayerBlendings = Object.keys(LAYER_BLENDINGS).reduce(
      (acc, current) => ({
        ...acc,
        [intl.formatMessage({id: LAYER_BLENDINGS[current].label})]: current
      }),
      {}
    );

    const onChange = useCallback(
      (blending) => updateLayerBlending(labeledLayerBlendings[blending]),
      [updateLayerBlending, labeledLayerBlendings]
    );

    return (
      <SidePanelSection>
        <PanelLabel>
          <FormattedMessage id="layerBlending.title" />
        </PanelLabel>
        <ItemSelector
          selectedItems={intl.formatMessage({id: LAYER_BLENDINGS[layerBlending].label})}
          options={Object.keys(labeledLayerBlendings)}
          multiSelect={false}
          searchable={false}
          onChange={onChange}
        />
      </SidePanelSection>
    );
  }
);
LayerBlendingSelector.displayName = 'LayerBlendingSelector';

const InfoHelperWrapper = styled.div`
  float: right;
`;

const OverlayBlendingSelectorTitleRow = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
`;

const OverlayBlendingSelector = React.memo(
  ({overlayBlending, updateOverlayBlending, intl, infoHelper}: OverlayBlendingSelectorProps) => {
    const labeledOverlayBlendings = Object.keys(OVERLAY_BLENDINGS).reduce(
      (acc, current) => ({
        ...acc,
        [intl.formatMessage({id: OVERLAY_BLENDINGS[current].label})]: current
      }),
      {}
    );

    const onChange = useCallback(
      (blending) => updateOverlayBlending(labeledOverlayBlendings[blending]),
      [updateOverlayBlending, labeledOverlayBlendings]
    );

    return (
      <SidePanelSection>
        <OverlayBlendingSelectorTitleRow>
          <PanelLabel>
            <FormattedMessage id="overlayBlending.title" />
          </PanelLabel>
          <InfoHelperWrapper>{infoHelper}</InfoHelperWrapper>
        </OverlayBlendingSelectorTitleRow>
        <ItemSelector
          selectedItems={intl.formatMessage({id: OVERLAY_BLENDINGS[overlayBlending].label})}
          options={Object.keys(labeledOverlayBlendings)}
          multiSelect={false}
          searchable={false}
          onChange={onChange}
        />
      </SidePanelSection>
    );
  }
);
OverlayBlendingSelector.displayName = 'OverlayBlendingSelector';

LayerManagerFactory.deps = [
  LayerListFactory,
  DatasetLayerGroupFactory,
  PanelViewListToggleFactory,
  PanelTitleFactory,
  DatasetSectionFactory,
  AddLayerButtonFactory,
  InfoHelperFactory
];

function LayerManagerFactory(
  LayerList: ReturnType<typeof LayerListFactory>,
  DatasetLayerGroup: ReturnType<typeof DatasetLayerGroupFactory>,
  PanelViewListToggle: ReturnType<typeof PanelViewListToggleFactory>,
  PanelTitle: ReturnType<typeof PanelTitleFactory>,
  DatasetSection: ReturnType<typeof DatasetSectionFactory>,
  AddLayerButton: ReturnType<typeof AddLayerButtonFactory>,
  InfoHelper: ReturnType<typeof InfoHelperFactory>
) {
  class LayerManager extends Component<LayerManagerProps> {
    _addLayer = (dataset: string) => {
      const {visStateActions} = this.props;
      visStateActions.addLayer(undefined, dataset);
    };

    _togglePanelListView = (listView: string) => {
      const {uiStateActions} = this.props;
      uiStateActions.togglePanelListView({panelId: 'layer', listView});
    };

    render() {
      const {
        layers,
        datasets,
        intl,
        layerOrder,
        showAddDataModal,
        updateTableColor,
        showDatasetTable,
        removeDataset,
        uiStateActions,
        visStateActions,
        panelListView,
        panelMetadata
      } = this.props;

      const isSortByDatasetMode = panelListView === PANEL_VIEW_TOGGLES.byDataset;

      return (
        <div className="layer-manager">
          <SidePanelSection>
            <PanelViewListToggle
              togglePanelListView={this._togglePanelListView}
              mode={panelListView}
            />
          </SidePanelSection>
          <DatasetSection
            datasets={datasets}
            showDatasetTable={showDatasetTable}
            updateTableColor={updateTableColor}
            removeDataset={removeDataset}
            showDeleteDataset
            showDatasetList={!isSortByDatasetMode}
            showAddDataModal={showAddDataModal}
          />
          <SidePanelDivider />
          <SidePanelSection>
            <PanelTitle
              className="layer-manager-title"
              title={intl.formatMessage({id: panelMetadata.label})}
            >
              <AddLayerButton datasets={datasets} onAdd={this._addLayer} />
            </PanelTitle>
          </SidePanelSection>
          <SidePanelSection>
            {isSortByDatasetMode ? (
              <DatasetLayerGroup
                datasets={datasets}
                showDatasetTable={showDatasetTable}
                layers={layers}
                updateTableColor={updateTableColor}
                removeDataset={removeDataset}
                layerOrder={layerOrder}
                layerClasses={this.props.layerClasses}
                uiStateActions={uiStateActions}
                visStateActions={visStateActions}
                showDeleteDataset
              />
            ) : (
              // TODO replace ignore
              // @ts-ignore
              <LayerList
                layers={layers}
                datasets={datasets}
                layerOrder={layerOrder}
                uiStateActions={uiStateActions}
                visStateActions={visStateActions}
                layerClasses={this.props.layerClasses}
              />
            )}
          </SidePanelSection>
          <LayerBlendingSelector
            layerBlending={this.props.layerBlending}
            updateLayerBlending={visStateActions.updateLayerBlending}
            intl={intl}
          />
          <OverlayBlendingSelector
            overlayBlending={this.props.overlayBlending}
            updateOverlayBlending={visStateActions.updateOverlayBlending}
            intl={intl}
            infoHelper={
              <InfoHelper
                id={`overlayBlending-description`}
                description={'overlayBlending.description'}
              />
            }
          />
        </div>
      );
    }
  }
  return injectIntl(LayerManager);
}

export default LayerManagerFactory;

1	// SPDX-License-Identifier: MIT
2	// Copyright contributors to the kepler.gl project
3
4	import React, {Component, useCallback} from 'react';	4✔
5
6	import {injectIntl, WrappedComponentProps} from 'react-intl';	4✔
7	import styled from 'styled-components';	4✔
8	import {FormattedMessage} from '@kepler.gl/localization';	4✔
9
10	import LayerListFactory from './layer-panel/layer-list';	4✔
11	import DatasetLayerGroupFactory from './layer-panel/dataset-layer-group';	4✔
12	import PanelViewListToggleFactory from './panel-view-list-toggle';	4✔
13	import PanelTitleFactory from './panel-title';	4✔
14	import DatasetSectionFactory from './layer-panel/dataset-section';	4✔
15	import AddLayerButtonFactory from './layer-panel/add-layer-button';	4✔
16
17	import ItemSelector from '../common/item-selector/item-selector';	4✔
18	import {PanelLabel, SidePanelDivider, SidePanelSection} from '../common/styled-components';	4✔
19	import InfoHelperFactory from '../common/info-helper';	4✔
20
21	import {LAYER_BLENDINGS, OVERLAY_BLENDINGS, PANEL_VIEW_TOGGLES} from '@kepler.gl/constants';	4✔
22	import {Layer, LayerClassesType} from '@kepler.gl/layers';
23	import {UIStateActions, VisStateActions, ActionHandler} from '@kepler.gl/actions';
24	import {SidePanelItem} from '../types';
25	import {PanelListView} from '@kepler.gl/types';
26	import {Datasets} from '@kepler.gl/table';
27
28	type LayerBlendingSelectorProps = {
29	layerBlending: string;
30	updateLayerBlending: ActionHandler<typeof VisStateActions.updateLayerBlending>;
31	} & WrappedComponentProps;
32
33	type OverlayBlendingSelectorProps = {
34	overlayBlending: string;
35	updateOverlayBlending: ActionHandler<typeof VisStateActions.updateOverlayBlending>;
36	infoHelper: React.ReactNode;
37	} & WrappedComponentProps;
38
39	type LayerManagerProps = {
40	datasets: Datasets;
41	layers: Layer[];
42	layerOrder: string[];
43	layerClasses: LayerClassesType;
44	layerBlending: string;
45	overlayBlending: string;
46	uiStateActions: typeof UIStateActions;
47	visStateActions: typeof VisStateActions;
48	showAddDataModal: () => void;
49	removeDataset: ActionHandler<typeof UIStateActions.openDeleteModal>;
50	showDatasetTable: ActionHandler<typeof VisStateActions.showDatasetTable>;
51	updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
52	panelListView: PanelListView;
53	panelMetadata: SidePanelItem;
54	} & WrappedComponentProps;
55
56	export const LayerBlendingSelector = React.memo(	4✔
57	({layerBlending, updateLayerBlending, intl}: LayerBlendingSelectorProps) => {	×
58	const labeledLayerBlendings = Object.keys(LAYER_BLENDINGS).reduce(	×
59	(acc, current) => ({	×
60	...acc,
61	[intl.formatMessage({id: LAYER_BLENDINGS[current].label})]: current
62	}),
63	{}
64	);
65
NEW 66	const onChange = useCallback(	×
NEW 67	(blending) => updateLayerBlending(labeledLayerBlendings[blending]),	×
68	[updateLayerBlending, labeledLayerBlendings]
69	);
70
71	return (	×
72	<SidePanelSection>
73	<PanelLabel>
74	<FormattedMessage id="layerBlending.title" />
75	</PanelLabel>
76	<ItemSelector
77	selectedItems={intl.formatMessage({id: LAYER_BLENDINGS[layerBlending].label})}
78	options={Object.keys(labeledLayerBlendings)}
79	multiSelect={false}
80	searchable={false}
81	onChange={onChange}
82	/>
83	</SidePanelSection>
84	);
85	}
86	);
87	LayerBlendingSelector.displayName = 'LayerBlendingSelector';	4✔
88
89	const InfoHelperWrapper = styled.div`	4✔
90	float: right;
91	`;
92
93	const OverlayBlendingSelectorTitleRow = styled.div`	4✔
94	display: flex;
95	flex-direction: row;
96	align-items: center;
97	`;
98
99	const OverlayBlendingSelector = React.memo(	4✔
100	({overlayBlending, updateOverlayBlending, intl, infoHelper}: OverlayBlendingSelectorProps) => {	×
101	const labeledOverlayBlendings = Object.keys(OVERLAY_BLENDINGS).reduce(	×
102	(acc, current) => ({	×
103	...acc,
104	[intl.formatMessage({id: OVERLAY_BLENDINGS[current].label})]: current
105	}),
106	{}
107	);
108
109	const onChange = useCallback(	×
NEW 110	(blending) => updateOverlayBlending(labeledOverlayBlendings[blending]),	×
111	[updateOverlayBlending, labeledOverlayBlendings]
112	);
113
114	return (	×
115	<SidePanelSection>
116	<OverlayBlendingSelectorTitleRow>
117	<PanelLabel>
118	<FormattedMessage id="overlayBlending.title" />
119	</PanelLabel>
120	<InfoHelperWrapper>{infoHelper}</InfoHelperWrapper>
121	</OverlayBlendingSelectorTitleRow>
122	<ItemSelector
123	selectedItems={intl.formatMessage({id: OVERLAY_BLENDINGS[overlayBlending].label})}
124	options={Object.keys(labeledOverlayBlendings)}
125	multiSelect={false}
126	searchable={false}
127	onChange={onChange}
128	/>
129	</SidePanelSection>
130	);
131	}
132	);
133	OverlayBlendingSelector.displayName = 'OverlayBlendingSelector';	4✔
134
135	LayerManagerFactory.deps = [	4✔
136	LayerListFactory,
137	DatasetLayerGroupFactory,
138	PanelViewListToggleFactory,
139	PanelTitleFactory,
140	DatasetSectionFactory,
141	AddLayerButtonFactory,
142	InfoHelperFactory
143	];
144
145	function LayerManagerFactory(
146	LayerList: ReturnType<typeof LayerListFactory>,
147	DatasetLayerGroup: ReturnType<typeof DatasetLayerGroupFactory>,
148	PanelViewListToggle: ReturnType<typeof PanelViewListToggleFactory>,
149	PanelTitle: ReturnType<typeof PanelTitleFactory>,
150	DatasetSection: ReturnType<typeof DatasetSectionFactory>,
151	AddLayerButton: ReturnType<typeof AddLayerButtonFactory>,
152	InfoHelper: ReturnType<typeof InfoHelperFactory>
153	) {	20✔
154	class LayerManager extends Component<LayerManagerProps> {
155	_addLayer = (dataset: string) => {
156	const {visStateActions} = this.props;	×
157	visStateActions.addLayer(undefined, dataset);	×
158	};
159
160	_togglePanelListView = (listView: string) => {
161	const {uiStateActions} = this.props;	×
162	uiStateActions.togglePanelListView({panelId: 'layer', listView});	×
163	};
164
165	render() {	×
166	const {
167	layers,
168	datasets,
169	intl,
170	layerOrder,
171	showAddDataModal,
172	updateTableColor,
173	showDatasetTable,
174	removeDataset,
175	uiStateActions,
176	visStateActions,
177	panelListView,
178	panelMetadata
179	} = this.props;	×
180
181	const isSortByDatasetMode = panelListView === PANEL_VIEW_TOGGLES.byDataset;	×
182
183	return (	×
184	<div className="layer-manager">
185	<SidePanelSection>
186	<PanelViewListToggle
187	togglePanelListView={this._togglePanelListView}
188	mode={panelListView}
189	/>
190	</SidePanelSection>
191	<DatasetSection
192	datasets={datasets}
193	showDatasetTable={showDatasetTable}
194	updateTableColor={updateTableColor}
195	removeDataset={removeDataset}
196	showDeleteDataset
197	showDatasetList={!isSortByDatasetMode}
198	showAddDataModal={showAddDataModal}
199	/>
200	<SidePanelDivider />
201	<SidePanelSection>
202	<PanelTitle
203	className="layer-manager-title"
204	title={intl.formatMessage({id: panelMetadata.label})}
205	>
206	<AddLayerButton datasets={datasets} onAdd={this._addLayer} />
207	</PanelTitle>
208	</SidePanelSection>
209	<SidePanelSection>
210	{isSortByDatasetMode ? (
211	<DatasetLayerGroup	×
212	datasets={datasets}
213	showDatasetTable={showDatasetTable}
214	layers={layers}
215	updateTableColor={updateTableColor}
216	removeDataset={removeDataset}
217	layerOrder={layerOrder}
218	layerClasses={this.props.layerClasses}
219	uiStateActions={uiStateActions}
220	visStateActions={visStateActions}
221	showDeleteDataset
222	/>
223	) : (
224	// TODO replace ignore
225	// @ts-ignore
226	<LayerList
227	layers={layers}
228	datasets={datasets}
229	layerOrder={layerOrder}
230	uiStateActions={uiStateActions}
231	visStateActions={visStateActions}
232	layerClasses={this.props.layerClasses}
233	/>
234	)}
235	</SidePanelSection>
236	<LayerBlendingSelector
237	layerBlending={this.props.layerBlending}
238	updateLayerBlending={visStateActions.updateLayerBlending}
239	intl={intl}
240	/>
241	<OverlayBlendingSelector
242	overlayBlending={this.props.overlayBlending}
243	updateOverlayBlending={visStateActions.updateOverlayBlending}
244	intl={intl}
245	infoHelper={
246	<InfoHelper
247	id={`overlayBlending-description`}
248	description={'overlayBlending.description'}
249	/>
250	}
251	/>
252	</div>
253	);
254	}
255	}
256	return injectIntl(LayerManager);	4✔
257	}
258
259	export default LayerManagerFactory;	4✔

keplergl / kepler.gl / 7304574214

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