[Maps] Add global fit to data (#64702) (#65261)

x-pack/plugins/maps/public/actions/map_actions.d.ts

@@ -13,6 +13,7 @@ import {
   MapFilters,
   MapCenterAndZoom,
   MapRefreshConfig,
+  MapExtent,
 } from '../../common/descriptor_types';
 import { MapSettings } from '../reducers/map';
 
@@ -34,6 +35,9 @@ export function updateSourceProp(
 ): void;
 
 export function setGotoWithCenter(config: MapCenterAndZoom): AnyAction;
+export function setGotoWithBounds(config: MapExtent): AnyAction;
+
+export function fitToDataBounds(): AnyAction;
 
 export function replaceLayerList(layerList: unknown[]): AnyAction;
 

x-pack/plugins/maps/public/actions/map_actions.js

@@ -19,6 +19,7 @@ import {
   getOpenTooltips,
   getQuery,
   getDataRequestDescriptor,
+  getFittableLayers,
 } from '../selectors/map_selectors';
 
 import { FLYOUT_STATE } from '../reducers/ui';
@@ -567,6 +568,55 @@ export function fitToLayerExtent(layerId) {
   };
 }
 
+export function fitToDataBounds() {
+  return async function(dispatch, getState) {
+    const layerList = getFittableLayers(getState());
+
+    if (!layerList.length) {
+      return;
+    }
+
+    const dataFilters = getDataFilters(getState());
+    const boundsPromises = layerList.map(async layer => {
+      return layer.getBounds(dataFilters);
+    });
+
+    const bounds = await Promise.all(boundsPromises);
+    const corners = [];
+    for (let i = 0; i < bounds.length; i++) {
+      const b = bounds[i];
+
+      //filter out undefined bounds (uses Infinity due to turf responses)
+
+      if (
+        b.minLon === Infinity ||
+        b.maxLon === Infinity ||
+        b.minLat === -Infinity ||
+        b.maxLat === -Infinity
+      ) {
+        continue;
+      }
+
+      corners.push([b.minLon, b.minLat]);
+      corners.push([b.maxLon, b.maxLat]);
+    }
+
+    if (!corners.length) {
+      return;
+    }
+
+    const turfUnionBbox = turf.bbox(turf.multiPoint(corners));
+    const dataBounds = {
+      minLon: turfUnionBbox[0],
+      minLat: turfUnionBbox[1],
+      maxLon: turfUnionBbox[2],
+      maxLat: turfUnionBbox[3],
+    };
+
+    dispatch(setGotoWithBounds(dataBounds));
+  };
+}
+
 export function setGotoWithBounds(bounds) {
   return {
     type: SET_GOTO,

x-pack/plugins/maps/public/connected_components/toolbar_overlay/_index.scss

@@ -12,6 +12,7 @@
   // sass-lint:disable-block no-important
   background-color: $euiColorEmptyShade !important;
   pointer-events: all;
+  position: relative;
 
   &:enabled,
   &:enabled:hover,

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

@@ -0,0 +1,38 @@
+/*
+ * 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 { EuiButtonIcon } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { ILayer } from '../../../layers/layer';
+
+interface Props {
+  layerList: ILayer[];
+  fitToBounds: () => void;
+}
+
+export const FitToData: React.FunctionComponent<Props> = ({ layerList, fitToBounds }: Props) => {
+  if (layerList.length === 0) {
+    return null;
+  }
+
+  return (
+    <EuiButtonIcon
+      className="mapToolbarOverlay__button"
+      onClick={fitToBounds}
+      data-test-subj="fitToData"
+      iconType="expand"
+      color="text"
+      aria-label={i18n.translate('xpack.maps.fitToData.fitButtonLabel', {
+        defaultMessage: 'Fit to data bounds',
+      })}
+      title={i18n.translate('xpack.maps.fitToData.fitAriaLabel', {
+        defaultMessage: 'Fit to data bounds',
+      })}
+    />
+  );
+};

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

@@ -0,0 +1,29 @@
+/*
+ * 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 { AnyAction, Dispatch } from 'redux';
+import { connect } from 'react-redux';
+import { MapStoreState } from '../../../reducers/store';
+import { fitToDataBounds } from '../../../actions/map_actions';
+import { getFittableLayers } from '../../../selectors/map_selectors';
+import { FitToData } from './fit_to_data';
+
+function mapStateToProps(state: MapStoreState) {
+  return {
+    layerList: getFittableLayers(state),
+  };
+}
+
+function mapDispatchToProps(dispatch: Dispatch<AnyAction>) {
+  return {
+    fitToBounds: () => {
+      dispatch(fitToDataBounds());
+    },
+  };
+}
+
+const connectedFitToData = connect(mapStateToProps, mapDispatchToProps)(FitToData);
+export { connectedFitToData as FitToData };

x-pack/plugins/maps/public/connected_components/toolbar_overlay/toolbar_overlay.js

@@ -8,6 +8,7 @@ import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { SetViewControl } from './set_view_control';
 import { ToolsControl } from './tools_control';
+import { FitToData } from './fit_to_data';
 
 export class ToolbarOverlay extends React.Component {
   _renderToolsControl() {
@@ -36,6 +37,10 @@ export class ToolbarOverlay extends React.Component {
           <SetViewControl />
         </EuiFlexItem>
 
+        <EuiFlexItem>
+          <FitToData />
+        </EuiFlexItem>
+
         {this._renderToolsControl()}
       </EuiFlexGroup>
     );

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

@@ -0,0 +1,21 @@
+/*
+ * 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 { shallow } from 'enzyme';
+
+// @ts-ignore
+import { ToolbarOverlay } from './toolbar_overlay';
+
+test('Must render zoom tools', async () => {
+  const component = shallow(<ToolbarOverlay />);
+  expect(component).toMatchSnapshot();
+});
+
+test('Must zoom tools and draw filter tools', async () => {
+  const component = shallow(<ToolbarOverlay addFilters={() => {}} geoFields={['coordinates']} />);
+  expect(component).toMatchSnapshot();
+});

x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.tsx

@@ -137,7 +137,7 @@ export class TOCEntryActionsPopover extends Component<Props, State> {
         name: i18n.translate('xpack.maps.layerTocActions.fitToDataTitle', {
           defaultMessage: 'Fit to data',
         }),
-        icon: <EuiIcon type="search" size="m" />,
+        icon: <EuiIcon type="expand" size="m" />,
         'data-test-subj': 'fitToBoundsButton',
         toolTipContent: this.state.supportsFitToBounds
           ? null

x-pack/plugins/maps/public/selectors/map_selectors.d.ts

@@ -4,11 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { AnyAction } from 'redux';
 import { MapCenter } from '../../common/descriptor_types';
 import { MapStoreState } from '../reducers/store';
 import { MapSettings } from '../reducers/map';
 import { IVectorLayer } from '../layers/vector_layer';
+import { ILayer } from '../layers/layer';
 
 export function getHiddenLayerIds(state: MapStoreState): string[];
 
@@ -25,3 +25,6 @@ export function hasMapSettingsChanges(state: MapStoreState): boolean;
 export function isUsingSearch(state: MapStoreState): boolean;
 
 export function getSpatialFiltersLayer(state: MapStoreState): IVectorLayer;
+
+export function getLayerList(state: MapStoreState): ILayer[];
+export function getFittableLayers(state: MapStoreState): ILayer[];

x-pack/plugins/maps/public/selectors/map_selectors.js

@@ -251,6 +251,19 @@ export const getLayerList = createSelector(
   }
 );
 
+export const getFittableLayers = createSelector(getLayerList, layerList => {
+  return layerList.filter(layer => {
+    //These are the only layer-types that implement bounding-box retrieval reliably
+    //This will _not_ work if Maps will allow register custom layer types
+    const isFittable =
+      layer.getType() === LAYER_TYPE.VECTOR ||
+      layer.getType() === LAYER_TYPE.BLENDED_VECTOR ||
+      layer.getType() === LAYER_TYPE.HEATMAP;
+
+    return isFittable && layer.isVisible();
+  });
+});
+
 export const getHiddenLayerIds = createSelector(getLayerListRaw, layers =>
   layers.filter(layer => !layer.visible).map(layer => layer.id)
 );