Skip to content

Commit ad4ac95

Browse files
nreesenreese
committed
review feedback
1 parent 3c73072 commit ad4ac95

8 files changed

Lines changed: 90 additions & 99 deletions

File tree

‎x-pack/plugins/maps/public/connected_components/map_container/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { getFlyoutDisplay, getIsFullScreen } from '../../selectors/ui_selectors'
1313
import { triggerRefreshTimer, cancelAllInFlightRequests, exitFullScreen } from '../../actions';
1414
import {
1515
areLayersLoaded,
16+
getLayerList,
1617
getRefreshConfig,
1718
getMapInitError,
1819
getMapSettings,
@@ -30,6 +31,7 @@ function mapStateToProps(state: MapStoreState) {
3031
mapInitError: getMapInitError(state),
3132
indexPatternIds: getQueryableUniqueIndexPatternIds(state),
3233
settings: getMapSettings(state),
34+
layerList: getLayerList(state),
3335
};
3436
}
3537

‎x-pack/plugins/maps/public/connected_components/map_container/map_container.tsx‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { registerLayerWizards } from '../../classes/layers/load_layer_wizards';
3131
import { RenderToolTipContent } from '../../classes/tooltips/tooltip_property';
3232
import { GeoFieldWithIndex } from '../../components/geo_field_with_index';
3333
import { MapRefreshConfig } from '../../../common/descriptor_types';
34+
import { ILayer } from '../../classes/layers/layer';
3435
import 'mapbox-gl/dist/mapbox-gl.css';
3536

3637
const RENDER_COMPLETE_EVENT = 'renderComplete';
@@ -53,12 +54,15 @@ export interface Props {
5354
title?: string;
5455
description?: string;
5556
settings: MapSettings;
57+
layerList: ILayer[];
5658
}
5759

5860
interface State {
5961
isInitialLoadRenderTimeoutComplete: boolean;
6062
domId: string;
6163
geoFields: GeoFieldWithIndex[];
64+
showFitToBoundsButton: boolean;
65+
showTimesliderButton: boolean;
6266
}
6367

6468
export class MapContainer extends Component<Props, State> {
@@ -73,16 +77,22 @@ export class MapContainer extends Component<Props, State> {
7377
isInitialLoadRenderTimeoutComplete: false,
7478
domId: uuid(),
7579
geoFields: [],
80+
showFitToBoundsButton: false,
81+
showTimesliderButton: false,
7682
};
7783

7884
componentDidMount() {
7985
this._isMounted = true;
8086
this._setRefreshTimer();
87+
this._loadShowFitToBoundsButton();
88+
this._loadShowTimesliderButton();
8189
registerLayerWizards();
8290
}
8391

8492
componentDidUpdate() {
8593
this._setRefreshTimer();
94+
this._loadShowFitToBoundsButton();
95+
this._loadShowTimesliderButton();
8696
if (this.props.areLayersLoaded && !this._isInitalLoadRenderTimerStarted) {
8797
this._isInitalLoadRenderTimerStarted = true;
8898
this._startInitialLoadRenderTimer();
@@ -114,7 +124,29 @@ export class MapContainer extends Component<Props, State> {
114124
}
115125
};
116126

117-
_loadGeoFields = async (nextIndexPatternIds: string[]) => {
127+
async _loadShowFitToBoundsButton() {
128+
const promises = this.props.layerList.map(async (layer) => {
129+
return await layer.isFittable();
130+
});
131+
const showFitToBoundsButton = (await Promise.all(promises)).some((isFittable) => isFittable);
132+
if (this._isMounted && this.state.showFitToBoundsButton !== showFitToBoundsButton) {
133+
this.setState({ showFitToBoundsButton });
134+
}
135+
}
136+
137+
async _loadShowTimesliderButton() {
138+
const promises = this.props.layerList.map(async (layer) => {
139+
return await layer.isFilteredByGlobalTime();
140+
});
141+
const showTimesliderButton = (await Promise.all(promises)).some(
142+
(isFilteredByGlobalTime) => isFilteredByGlobalTime
143+
);
144+
if (this._isMounted && this.state.showTimesliderButton !== showTimesliderButton) {
145+
this.setState({ showTimesliderButton });
146+
}
147+
}
148+
149+
async _loadGeoFields(nextIndexPatternIds: string[]) {
118150
if (_.isEqual(nextIndexPatternIds, this._prevIndexPatternIds)) {
119151
// all ready loaded index pattern ids
120152
return;
@@ -146,7 +178,7 @@ export class MapContainer extends Component<Props, State> {
146178
}
147179

148180
this.setState({ geoFields });
149-
};
181+
}
150182

151183
_setRefreshTimer = () => {
152184
const { isPaused, interval } = this.props.refreshConfig;
@@ -261,6 +293,8 @@ export class MapContainer extends Component<Props, State> {
261293
geoFields={this.state.geoFields}
262294
getFilterActions={getFilterActions}
263295
getActionContext={getActionContext}
296+
showFitToBoundsButton={this.state.showFitToBoundsButton}
297+
showTimesliderButton={this.state.showTimesliderButton}
264298
/>
265299
)}
266300
<RightSideControls />

‎x-pack/plugins/maps/public/connected_components/timeslider/timeslider.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ interface State {
2727
min: number;
2828
range: number;
2929
timeslice: [number, number];
30-
timesliceText: string;
3130
ticks: EuiRangeTick[];
3231
}
3332

@@ -65,7 +64,6 @@ class KeyedTimeslider extends Component<Props, State> {
6564
range: interval,
6665
ticks: getTicks(min, max, interval),
6766
timeslice,
68-
timesliceText: prettyPrintTimeslice(timeslice),
6967
};
7068
}
7169

@@ -92,7 +90,6 @@ class KeyedTimeslider extends Component<Props, State> {
9290
_onChange = (value: [number, number]) => {
9391
this.setState({
9492
timeslice: value,
95-
timesliceText: prettyPrintTimeslice(value),
9693
});
9794
this._propagateChange(value);
9895
};
@@ -136,7 +133,7 @@ class KeyedTimeslider extends Component<Props, State> {
136133
/>
137134

138135
<div className="mapTimeslider__timeWindow">
139-
<EuiText size="s">{this.state.timesliceText}</EuiText>
136+
<EuiText size="s">{prettyPrintTimeslice(this.state.timeslice)}</EuiText>
140137
</div>
141138

142139
<div className="mapTimeslider__innerPanel">

‎x-pack/plugins/maps/public/connected_components/toolbar_overlay/__snapshots__/toolbar_overlay.test.tsx.snap‎

Lines changed: 2 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎x-pack/plugins/maps/public/connected_components/toolbar_overlay/fit_to_data/fit_to_data.tsx‎

Lines changed: 18 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -9,68 +9,27 @@ import React from 'react';
99

1010
import { EuiButtonIcon, EuiPanel } from '@elastic/eui';
1111
import { i18n } from '@kbn/i18n';
12-
import { ILayer } from '../../../classes/layers/layer';
1312

1413
export interface Props {
15-
layerList: ILayer[];
1614
fitToBounds: () => void;
1715
}
1816

19-
interface State {
20-
canFit: boolean;
21-
}
22-
23-
export class FitToData extends React.Component<Props, State> {
24-
_isMounted: boolean = false;
25-
26-
state = { canFit: false };
27-
28-
componentDidMount(): void {
29-
this._isMounted = true;
30-
this._loadCanFit();
31-
}
32-
33-
componentWillUnmount(): void {
34-
this._isMounted = false;
35-
}
36-
37-
componentDidUpdate(): void {
38-
this._loadCanFit();
39-
}
40-
41-
async _loadCanFit() {
42-
const promises = this.props.layerList.map(async (layer) => {
43-
return await layer.isFittable();
44-
});
45-
const canFit = (await Promise.all(promises)).some((isFittable) => isFittable);
46-
if (this._isMounted && this.state.canFit !== canFit) {
47-
this.setState({
48-
canFit,
49-
});
50-
}
51-
}
52-
53-
render() {
54-
if (!this.state.canFit) {
55-
return null;
56-
}
57-
58-
return (
59-
<EuiPanel paddingSize="none" className="mapToolbarOverlay__button">
60-
<EuiButtonIcon
61-
size="s"
62-
onClick={this.props.fitToBounds}
63-
data-test-subj="fitToData"
64-
iconType="expand"
65-
color="text"
66-
aria-label={i18n.translate('xpack.maps.fitToData.fitButtonLabel', {
67-
defaultMessage: 'Fit to data bounds',
68-
})}
69-
title={i18n.translate('xpack.maps.fitToData.fitAriaLabel', {
70-
defaultMessage: 'Fit to data bounds',
71-
})}
72-
/>
73-
</EuiPanel>
74-
);
75-
}
17+
export function FitToData(props: Props) {
18+
return (
19+
<EuiPanel paddingSize="none" className="mapToolbarOverlay__button">
20+
<EuiButtonIcon
21+
size="s"
22+
onClick={props.fitToBounds}
23+
data-test-subj="fitToData"
24+
iconType="expand"
25+
color="text"
26+
aria-label={i18n.translate('xpack.maps.fitToData.fitButtonLabel', {
27+
defaultMessage: 'Fit to data bounds',
28+
})}
29+
title={i18n.translate('xpack.maps.fitToData.fitAriaLabel', {
30+
defaultMessage: 'Fit to data bounds',
31+
})}
32+
/>
33+
</EuiPanel>
34+
);
7635
}

‎x-pack/plugins/maps/public/connected_components/toolbar_overlay/fit_to_data/index.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,10 @@ import { ThunkDispatch } from 'redux-thunk';
1010
import { connect } from 'react-redux';
1111
import { MapStoreState } from '../../../reducers/store';
1212
import { fitToDataBounds } from '../../../actions';
13-
import { getLayerList } from '../../../selectors/map_selectors';
1413
import { FitToData } from './fit_to_data';
1514

1615
function mapStateToProps(state: MapStoreState) {
17-
return {
18-
layerList: getLayerList(state),
19-
};
16+
return {};
2017
}
2118

2219
function mapDispatchToProps(dispatch: ThunkDispatch<MapStoreState, void, AnyAction>) {

‎x-pack/plugins/maps/public/connected_components/toolbar_overlay/toolbar_overlay.test.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,14 @@ jest.mock('../../kibana_services', () => {
1919

2020
import { ToolbarOverlay } from './toolbar_overlay';
2121

22-
test('Must render zoom tools', async () => {
23-
const component = shallow(<ToolbarOverlay geoFields={[]} />);
22+
test('Should only show set view control', async () => {
23+
const component = shallow(
24+
<ToolbarOverlay geoFields={[]} showFitToBoundsButton={false} showTimesliderButton={false} />
25+
);
2426
expect(component).toMatchSnapshot();
2527
});
2628

27-
test('Must zoom tools and draw filter tools', async () => {
29+
test('Should show all controls', async () => {
2830
const geoFieldWithIndex = {
2931
geoFieldName: 'myGeoFieldName',
3032
geoFieldType: 'geo_point',
@@ -35,6 +37,8 @@ test('Must zoom tools and draw filter tools', async () => {
3537
<ToolbarOverlay
3638
addFilters={async (filters: Filter[], actionId: string) => {}}
3739
geoFields={[geoFieldWithIndex]}
40+
showFitToBoundsButton={true}
41+
showTimesliderButton={true}
3842
/>
3943
);
4044
expect(component).toMatchSnapshot();

‎x-pack/plugins/maps/public/connected_components/toolbar_overlay/toolbar_overlay.tsx‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -20,25 +20,33 @@ export interface Props {
2020
geoFields: GeoFieldWithIndex[];
2121
getFilterActions?: () => Promise<Action[]>;
2222
getActionContext?: () => ActionExecutionContext;
23+
showFitToBoundsButton: boolean;
24+
showTimesliderButton: boolean;
2325
}
2426

2527
export function ToolbarOverlay(props: Props) {
26-
function renderToolsControl() {
27-
const { addFilters, geoFields, getFilterActions, getActionContext } = props;
28-
if (!addFilters || !geoFields.length) {
29-
return null;
30-
}
31-
32-
return (
28+
const toolsButton =
29+
props.addFilters && props.geoFields.length ? (
3330
<EuiFlexItem>
3431
<ToolsControl
35-
geoFields={geoFields}
36-
getFilterActions={getFilterActions}
37-
getActionContext={getActionContext}
32+
geoFields={props.geoFields}
33+
getFilterActions={props.getFilterActions}
34+
getActionContext={props.getActionContext}
3835
/>
3936
</EuiFlexItem>
40-
);
41-
}
37+
) : null;
38+
39+
const fitToBoundsButton = props.showFitToBoundsButton ? (
40+
<EuiFlexItem>
41+
<FitToData />
42+
</EuiFlexItem>
43+
) : null;
44+
45+
const timesliderToogleButon = props.showTimesliderButton ? (
46+
<EuiFlexItem>
47+
<TimesliderToggleButton />
48+
</EuiFlexItem>
49+
) : null;
4250

4351
return (
4452
<EuiFlexGroup
@@ -52,15 +60,11 @@ export function ToolbarOverlay(props: Props) {
5260
<SetViewControl />
5361
</EuiFlexItem>
5462

55-
<EuiFlexItem>
56-
<FitToData />
57-
</EuiFlexItem>
63+
{fitToBoundsButton}
5864

59-
{renderToolsControl()}
65+
{toolsButton}
6066

61-
<EuiFlexItem>
62-
<TimesliderToggleButton />
63-
</EuiFlexItem>
67+
{timesliderToogleButon}
6468
</EuiFlexGroup>
6569
);
6670
}

0 commit comments

Comments
 (0)