[maps] rename GisMap to MapContainer and convert to TS (#73690)
* [maps] rename GisMap to MapContainer and convert to TS * fix typo in _index.scss
This commit is contained in:
parent
b4aa750957
commit
57dc9c01f7
|
@ -1,4 +1,4 @@
|
|||
@import 'gis_map/gis_map';
|
||||
@import 'map_container/map_container';
|
||||
@import 'layer_panel/index';
|
||||
@import 'widget_overlay/index';
|
||||
@import 'toolbar_overlay/index';
|
||||
|
|
|
@ -1,19 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Filter } from 'src/plugins/data/public';
|
||||
|
||||
import { RenderToolTipContent } from '../../classes/tooltips/tooltip_property';
|
||||
|
||||
declare const GisMap: React.ComponentType<{
|
||||
addFilters: ((filters: Filter[]) => void) | null;
|
||||
renderTooltipContent?: RenderToolTipContent;
|
||||
}>;
|
||||
|
||||
export { GisMap };
|
||||
// eslint-disable-next-line import/no-default-export
|
||||
export default GisMap;
|
|
@ -5,7 +5,7 @@
|
|||
*/
|
||||
|
||||
import { connect } from 'react-redux';
|
||||
import { MBMapContainer } from './view';
|
||||
import { MBMap } from './view';
|
||||
import {
|
||||
mapExtentChanged,
|
||||
mapReady,
|
||||
|
@ -72,7 +72,7 @@ function mapDispatchToProps(dispatch) {
|
|||
};
|
||||
}
|
||||
|
||||
const connectedMBMapContainer = connect(mapStateToProps, mapDispatchToProps, null, {
|
||||
const connectedMBMap = connect(mapStateToProps, mapDispatchToProps, null, {
|
||||
forwardRef: true,
|
||||
})(MBMapContainer);
|
||||
export { connectedMBMapContainer as MBMapContainer };
|
||||
})(MBMap);
|
||||
export { connectedMBMap as MBMap };
|
||||
|
|
|
@ -26,7 +26,7 @@ import { getPreserveDrawingBuffer } from '../../../kibana_services';
|
|||
mapboxgl.workerUrl = mbWorkerUrl;
|
||||
mapboxgl.setRTLTextPlugin(mbRtlPlugin);
|
||||
|
||||
export class MBMapContainer extends React.Component {
|
||||
export class MBMap extends React.Component {
|
||||
state = {
|
||||
prevLayerList: undefined,
|
||||
hasSyncedLayerList: false,
|
||||
|
|
|
@ -4,8 +4,9 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { AnyAction, Dispatch } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
import { GisMap as UnconnectedGisMap } from './view';
|
||||
import { MapContainer } from './map_container';
|
||||
import { getFlyoutDisplay, getIsFullScreen } from '../../selectors/ui_selectors';
|
||||
import { triggerRefreshTimer, cancelAllInFlightRequests, exitFullScreen } from '../../actions';
|
||||
import {
|
||||
|
@ -15,10 +16,10 @@ import {
|
|||
getQueryableUniqueIndexPatternIds,
|
||||
isToolbarOverlayHidden,
|
||||
} from '../../selectors/map_selectors';
|
||||
|
||||
import { MapStoreState } from '../../reducers/store';
|
||||
import { getCoreChrome } from '../../kibana_services';
|
||||
|
||||
function mapStateToProps(state = {}) {
|
||||
function mapStateToProps(state: MapStoreState) {
|
||||
return {
|
||||
areLayersLoaded: areLayersLoaded(state),
|
||||
flyoutDisplay: getFlyoutDisplay(state),
|
||||
|
@ -30,17 +31,16 @@ function mapStateToProps(state = {}) {
|
|||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch) {
|
||||
function mapDispatchToProps(dispatch: Dispatch<AnyAction>) {
|
||||
return {
|
||||
triggerRefreshTimer: () => dispatch(triggerRefreshTimer()),
|
||||
triggerRefreshTimer: () => dispatch<any>(triggerRefreshTimer()),
|
||||
exitFullScreen: () => {
|
||||
dispatch(exitFullScreen());
|
||||
getCoreChrome().setIsVisible(true);
|
||||
},
|
||||
cancelAllInFlightRequests: () => dispatch(cancelAllInFlightRequests()),
|
||||
cancelAllInFlightRequests: () => dispatch<any>(cancelAllInFlightRequests()),
|
||||
};
|
||||
}
|
||||
|
||||
const connectedGisMap = connect(mapStateToProps, mapDispatchToProps)(UnconnectedGisMap);
|
||||
export { connectedGisMap as GisMap }; // GisMap is pulled in by name by the Maps-app itself
|
||||
export default connectedGisMap; //lazy-loading in the embeddable requires default export
|
||||
const connected = connect(mapStateToProps, mapDispatchToProps)(MapContainer);
|
||||
export { connected as MapContainer };
|
|
@ -7,27 +7,63 @@
|
|||
import _ from 'lodash';
|
||||
import React, { Component } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { MBMapContainer } from '../map/mb';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiCallOut } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import uuid from 'uuid/v4';
|
||||
import { Filter } from 'src/plugins/data/public';
|
||||
// @ts-expect-error
|
||||
import { MBMap } from '../map/mb';
|
||||
// @ts-expect-error
|
||||
import { WidgetOverlay } from '../widget_overlay';
|
||||
// @ts-expect-error
|
||||
import { ToolbarOverlay } from '../toolbar_overlay';
|
||||
// @ts-expect-error
|
||||
import { LayerPanel } from '../layer_panel';
|
||||
import { AddLayerPanel } from '../add_layer_panel';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiCallOut } from '@elastic/eui';
|
||||
import { ExitFullScreenButton } from '../../../../../../src/plugins/kibana_react/public';
|
||||
import { getIndexPatternsFromIds } from '../../index_pattern_util';
|
||||
import { ES_GEO_FIELD_TYPE } from '../../../common/constants';
|
||||
import { indexPatterns as indexPatternsUtils } from '../../../../../../src/plugins/data/public';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import uuid from 'uuid/v4';
|
||||
import { FLYOUT_STATE } from '../../reducers/ui';
|
||||
import { MapSettingsPanel } from '../map_settings_panel';
|
||||
import { registerLayerWizards } from '../../classes/layers/load_layer_wizards';
|
||||
import { RenderToolTipContent } from '../../classes/tooltips/tooltip_property';
|
||||
import { GeoFieldWithIndex } from '../../components/geo_field_with_index';
|
||||
import { MapRefreshConfig } from '../../../common/descriptor_types';
|
||||
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||
|
||||
const RENDER_COMPLETE_EVENT = 'renderComplete';
|
||||
|
||||
export class GisMap extends Component {
|
||||
state = {
|
||||
interface Props {
|
||||
addFilters: ((filters: Filter[]) => void) | null;
|
||||
areLayersLoaded: boolean;
|
||||
cancelAllInFlightRequests: () => void;
|
||||
exitFullScreen: () => void;
|
||||
flyoutDisplay: FLYOUT_STATE;
|
||||
hideToolbarOverlay: boolean;
|
||||
isFullScreen: boolean;
|
||||
indexPatternIds: string[];
|
||||
mapInitError: string | null | undefined;
|
||||
refreshConfig: MapRefreshConfig;
|
||||
renderTooltipContent?: RenderToolTipContent;
|
||||
triggerRefreshTimer: () => void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
isInitialLoadRenderTimeoutComplete: boolean;
|
||||
domId: string;
|
||||
geoFields: GeoFieldWithIndex[];
|
||||
}
|
||||
|
||||
export class MapContainer extends Component<Props, State> {
|
||||
private _isMounted: boolean = false;
|
||||
private _isInitalLoadRenderTimerStarted: boolean = false;
|
||||
private _prevIndexPatternIds: string[] = [];
|
||||
private _refreshTimerId: number | null = null;
|
||||
private _prevIsPaused: boolean | null = null;
|
||||
private _prevInterval: number | null = null;
|
||||
|
||||
state: State = {
|
||||
isInitialLoadRenderTimeoutComplete: false,
|
||||
domId: uuid(),
|
||||
geoFields: [],
|
||||
|
@ -35,7 +71,6 @@ export class GisMap extends Component {
|
|||
|
||||
componentDidMount() {
|
||||
this._isMounted = true;
|
||||
this._isInitalLoadRenderTimerStarted = false;
|
||||
this._setRefreshTimer();
|
||||
registerLayerWizards();
|
||||
}
|
||||
|
@ -73,7 +108,7 @@ export class GisMap extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
_loadGeoFields = async (nextIndexPatternIds) => {
|
||||
_loadGeoFields = async (nextIndexPatternIds: string[]) => {
|
||||
if (_.isEqual(nextIndexPatternIds, this._prevIndexPatternIds)) {
|
||||
// all ready loaded index pattern ids
|
||||
return;
|
||||
|
@ -81,29 +116,24 @@ export class GisMap extends Component {
|
|||
|
||||
this._prevIndexPatternIds = nextIndexPatternIds;
|
||||
|
||||
const geoFields = [];
|
||||
try {
|
||||
const indexPatterns = await getIndexPatternsFromIds(nextIndexPatternIds);
|
||||
indexPatterns.forEach((indexPattern) => {
|
||||
indexPattern.fields.forEach((field) => {
|
||||
if (
|
||||
!indexPatternsUtils.isNestedField(field) &&
|
||||
(field.type === ES_GEO_FIELD_TYPE.GEO_POINT ||
|
||||
field.type === ES_GEO_FIELD_TYPE.GEO_SHAPE)
|
||||
) {
|
||||
geoFields.push({
|
||||
geoFieldName: field.name,
|
||||
geoFieldType: field.type,
|
||||
indexPatternTitle: indexPattern.title,
|
||||
indexPatternId: indexPattern.id,
|
||||
});
|
||||
}
|
||||
});
|
||||
const geoFields: GeoFieldWithIndex[] = [];
|
||||
const indexPatterns = await getIndexPatternsFromIds(nextIndexPatternIds);
|
||||
indexPatterns.forEach((indexPattern) => {
|
||||
indexPattern.fields.forEach((field) => {
|
||||
if (
|
||||
indexPattern.id &&
|
||||
!indexPatternsUtils.isNestedField(field) &&
|
||||
(field.type === ES_GEO_FIELD_TYPE.GEO_POINT || field.type === ES_GEO_FIELD_TYPE.GEO_SHAPE)
|
||||
) {
|
||||
geoFields.push({
|
||||
geoFieldName: field.name,
|
||||
geoFieldType: field.type,
|
||||
indexPatternTitle: indexPattern.title,
|
||||
indexPatternId: indexPattern.id,
|
||||
});
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
// swallow errors.
|
||||
// the Layer-TOC will indicate which layers are disfunctional on a per-layer basis
|
||||
}
|
||||
});
|
||||
|
||||
if (!this._isMounted) {
|
||||
return;
|
||||
|
@ -115,33 +145,34 @@ export class GisMap extends Component {
|
|||
_setRefreshTimer = () => {
|
||||
const { isPaused, interval } = this.props.refreshConfig;
|
||||
|
||||
if (this.isPaused === isPaused && this.interval === interval) {
|
||||
if (this._prevIsPaused === isPaused && this._prevInterval === interval) {
|
||||
// refreshConfig is the same, nothing to do
|
||||
return;
|
||||
}
|
||||
|
||||
this.isPaused = isPaused;
|
||||
this.interval = interval;
|
||||
this._prevIsPaused = isPaused;
|
||||
this._prevInterval = interval;
|
||||
|
||||
this._clearRefreshTimer();
|
||||
|
||||
if (!isPaused && interval > 0) {
|
||||
this.refreshTimerId = setInterval(() => {
|
||||
this._refreshTimerId = window.setInterval(() => {
|
||||
this.props.triggerRefreshTimer();
|
||||
}, interval);
|
||||
}
|
||||
};
|
||||
|
||||
_clearRefreshTimer = () => {
|
||||
if (this.refreshTimerId) {
|
||||
clearInterval(this.refreshTimerId);
|
||||
if (this._refreshTimerId) {
|
||||
window.clearInterval(this._refreshTimerId);
|
||||
this._refreshTimerId = null;
|
||||
}
|
||||
};
|
||||
|
||||
// Mapbox does not provide any feedback when rendering is complete.
|
||||
// Temporary solution is just to wait set period of time after data has loaded.
|
||||
_startInitialLoadRenderTimer = () => {
|
||||
setTimeout(() => {
|
||||
window.setTimeout(() => {
|
||||
if (this._isMounted) {
|
||||
this.setState({ isInitialLoadRenderTimeoutComplete: true });
|
||||
this._onInitialLoadRenderComplete();
|
||||
|
@ -159,8 +190,6 @@ export class GisMap extends Component {
|
|||
renderTooltipContent,
|
||||
} = this.props;
|
||||
|
||||
const { domId } = this.state;
|
||||
|
||||
if (mapInitError) {
|
||||
return (
|
||||
<div data-render-complete data-shared-item>
|
||||
|
@ -194,12 +223,12 @@ export class GisMap extends Component {
|
|||
<EuiFlexGroup
|
||||
gutterSize="none"
|
||||
responsive={false}
|
||||
data-dom-id={domId}
|
||||
data-dom-id={this.state.domId}
|
||||
data-render-complete={this.state.isInitialLoadRenderTimeoutComplete}
|
||||
data-shared-item
|
||||
>
|
||||
<EuiFlexItem className="mapMapWrapper">
|
||||
<MBMapContainer
|
||||
<MBMap
|
||||
addFilters={addFilters}
|
||||
geoFields={this.state.geoFields}
|
||||
renderTooltipContent={renderTooltipContent}
|
|
@ -5,12 +5,11 @@
|
|||
*/
|
||||
|
||||
import _ from 'lodash';
|
||||
import React, { Suspense, lazy } from 'react';
|
||||
import React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { render, unmountComponentAtNode } from 'react-dom';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { Unsubscribe } from 'redux';
|
||||
import { EuiLoadingSpinner } from '@elastic/eui';
|
||||
import { Embeddable, IContainer } from '../../../../../src/plugins/embeddable/public';
|
||||
import { APPLY_FILTER_TRIGGER } from '../../../../../src/plugins/ui_actions/public';
|
||||
import {
|
||||
|
@ -50,11 +49,11 @@ import { MAP_SAVED_OBJECT_TYPE } from '../../common/constants';
|
|||
import { RenderToolTipContent } from '../classes/tooltips/tooltip_property';
|
||||
import { getUiActions, getCoreI18n } from '../kibana_services';
|
||||
import { LayerDescriptor } from '../../common/descriptor_types';
|
||||
import { MapContainer } from '../connected_components/map_container';
|
||||
|
||||
import { MapEmbeddableConfig, MapEmbeddableInput, MapEmbeddableOutput } from './types';
|
||||
export { MapEmbeddableInput, MapEmbeddableConfig };
|
||||
|
||||
const GisMap = lazy(() => import('../connected_components/gis_map'));
|
||||
export class MapEmbeddable extends Embeddable<MapEmbeddableInput, MapEmbeddableOutput> {
|
||||
type = MAP_SAVED_OBJECT_TYPE;
|
||||
|
||||
|
@ -223,12 +222,10 @@ export class MapEmbeddable extends Embeddable<MapEmbeddableInput, MapEmbeddableO
|
|||
render(
|
||||
<Provider store={this._store}>
|
||||
<I18nContext>
|
||||
<Suspense fallback={<EuiLoadingSpinner />}>
|
||||
<GisMap
|
||||
addFilters={this.input.hideFilterActions ? null : this.addFilters}
|
||||
renderTooltipContent={this._renderTooltipContent}
|
||||
/>
|
||||
</Suspense>
|
||||
<MapContainer
|
||||
addFilters={this.input.hideFilterActions ? null : this.addFilters}
|
||||
renderTooltipContent={this._renderTooltipContent}
|
||||
/>
|
||||
</I18nContext>
|
||||
</Provider>,
|
||||
this._domNode
|
||||
|
|
|
@ -30,7 +30,7 @@ import {
|
|||
import { AppStateManager } from '../../state_syncing/app_state_manager';
|
||||
import { useAppStateSyncing } from '../../state_syncing/app_sync';
|
||||
import { esFilters } from '../../../../../../../src/plugins/data/public';
|
||||
import { GisMap } from '../../../connected_components/gis_map';
|
||||
import { MapContainer } from '../../../connected_components/map_container';
|
||||
import { goToSpecifiedPath } from '../../maps_router';
|
||||
|
||||
const unsavedChangesWarning = i18n.translate('xpack.maps.breadCrumbs.unsavedChangesWarning', {
|
||||
|
@ -464,7 +464,7 @@ export class MapsAppView extends React.Component {
|
|||
{this._renderTopNav()}
|
||||
<h1 className="euiScreenReaderOnly">{`screenTitle placeholder`}</h1>
|
||||
<div id="react-maps-root">
|
||||
<GisMap
|
||||
<MapContainer
|
||||
addFilters={(newFilters) => {
|
||||
newFilters.forEach((filter) => {
|
||||
filter.$state = { store: esFilters.FilterStateStore.APP_STATE };
|
||||
|
|
Loading…
Reference in a new issue