[Maps] timeslider play button

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

@@ -13,6 +13,7 @@ import { i18n } from '@kbn/i18n';
 import uuid from 'uuid/v4';
 import { Filter } from 'src/plugins/data/public';
 import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
+import { Observable } from 'rxjs';
 import { MBMap } from '../mb_map';
 import { RightSideControls } from '../right_side_controls';
 import { Timeslider } from '../timeslider';
@@ -47,6 +48,7 @@ export interface Props {
  description?: string;
  settings: MapSettings;
  layerList: ILayer[];
+ waitUntilTimeLayersLoad$: Observable<void>;
 }
 
 interface State {
@@ -223,7 +225,7 @@ export class MapContainer extends Component<Props, State> {
  <RightSideControls />
  </EuiFlexItem>
 
- <Timeslider />
+ <Timeslider waitForTimesliceToLoad$={this.props.waitUntilTimeLayersLoad$} />
 
  <EuiFlexItem
  className={classNames('mapMapLayerPanel', {

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

@@ -10,6 +10,8 @@ import React, { Component } from 'react';
 import { EuiButtonIcon, EuiDualRange, EuiText } from '@elastic/eui';
 import { EuiRangeTick } from '@elastic/eui/src/components/form/range/range_ticks';
 import { i18n } from '@kbn/i18n';
+import { Observable, Subscription } from 'rxjs';
+import { first } from 'rxjs/operators';
 import { epochToKbnDateFormat, getInterval, getTicks } from './time_utils';
 import { TimeRange } from '../../../../../../src/plugins/data/common';
 import { getTimeFilter } from '../../kibana_services';
@@ -20,9 +22,11 @@ export interface Props {
  setTimeslice: (timeslice: Timeslice) => void;
  isTimesliderOpen: boolean;
  timeRange: TimeRange;
+ waitForTimesliceToLoad$: Observable<void>;
 }
 
 interface State {
+ isPaused: boolean;
  max: number;
  min: number;
  range: number;
@@ -44,6 +48,8 @@ export function Timeslider(props: Props) {
 
 class KeyedTimeslider extends Component<Props, State> {
  private _isMounted: boolean = false;
+ private _timeoutId: number | undefined;
+ private _subscription: Subscription | undefined;
 
  constructor(props: Props) {
  super(props);
@@ -59,6 +65,7 @@ class KeyedTimeslider extends Component<Props, State> {
  const timeslice: [number, number] = [min, max];
 
  this.state = {
+ isPaused: true,
  max,
  min,
  range: interval,
@@ -68,6 +75,7 @@ class KeyedTimeslider extends Component<Props, State> {
  }
 
  componentWillUnmount() {
+ this._onPause();
  this._isMounted = false;
  }
 
@@ -118,6 +126,44 @@ class KeyedTimeslider extends Component<Props, State> {
  }
  }, 300);
 
+ _onPlay = () => {
+ this.setState({ isPaused: false });
+ this._playNextFrame();
+ };
+
+ _onPause = () => {
+ this.setState({ isPaused: true });
+ if (this._subscription) {
+ this._subscription.unsubscribe();
+ this._subscription = undefined;
+ }
+ if (this._timeoutId) {
+ clearTimeout(this._timeoutId);
+ this._timeoutId = undefined;
+ }
+ };
+
+ _playNextFrame() {
+ // advance to next frame
+ this._onNext();
+
+ // use waitForTimesliceToLoad$ observable to wait until next frame loaded
+ // .pipe(first()) waits until the first value is emitted from an observable and then automatically unsubscribes
+ this._subscription = this.props.waitForTimesliceToLoad$.pipe(first()).subscribe(() => {
+ if (this.state.isPaused) {
+ return;
+ }
+
+ // use timeout to display frame for small time period before moving to next frame
+ this._timeoutId = window.setTimeout(() => {
+ if (this.state.isPaused) {
+ return;
+ }
+ this._playNextFrame();
+ }, 1750);
+ });
+ }
+
  render() {
  return (
  <div className="mapTimeslider">
@@ -154,6 +200,20 @@ class KeyedTimeslider extends Component<Props, State> {
  defaultMessage: 'Next time window',
  })}
  />
+ <EuiButtonIcon
+ onClick={this.state.isPaused ? this._onPlay : this._onPause}
+ iconType={this.state.isPaused ? 'play' : 'pause'}
+ color="text"
+ aria-label={
+ this.state.isPaused
+ ? i18n.translate('xpack.maps.timeslider.playLabel', {
+ defaultMessage: 'Play',
+ })
+ : i18n.translate('xpack.maps.timeslider.pauseLabel', {
+ defaultMessage: 'Pause',
+ })
+ }
+ />
  </div>
  </div>
  </div>

x-pack/plugins/maps/public/embeddable/map_embeddable.tsx

@@ -73,6 +73,7 @@ import { SavedMap } from '../routes/map_page';
 import { getIndexPatternsFromIds } from '../index_pattern_util';
 import { getMapAttributeService } from '../map_attribute_service';
 import { isUrlDrilldown, toValueClickDataFormat } from '../trigger_actions/trigger_utils';
+import { waitUntilTimeLayersLoad$ } from '../routes/map_page/map_app/wait_until_time_layers_load';
 
 import {
  MapByValueInput,
@@ -345,6 +346,7 @@ export class MapEmbeddable
  renderTooltipContent={this._renderTooltipContent}
  title={this.getTitle()}
  description={this.getDescription()}
+ waitUntilTimeLayersLoad$={waitUntilTimeLayersLoad$(this._savedMap.getStore())}
  />
  </I18nContext>
  </Provider>,

x-pack/plugins/maps/public/routes/map_page/map_app/map_app.tsx

@@ -455,6 +455,7 @@ export class MapApp extends React.Component<Props, State> {
  addFilters={this._addFilter}
  title={this.props.savedMap.getAttributes().title}
  description={this.props.savedMap.getAttributes().description}
+ waitUntilTimeLayersLoad$={waitUntilTimeLayersLoad$(this.props.savedMap.getStore())}
  />
  </div>
  </div>

x-pack/plugins/maps/public/routes/map_page/map_app/wait_until_time_layers_load.ts

@@ -6,7 +6,7 @@
  */
 
 import { from } from 'rxjs';
-import { debounceTime, first, switchMap } from 'rxjs/operators';
+import { debounceTime, first, map, switchMap } from 'rxjs/operators';
 import { getLayerList } from '../../../selectors/map_selectors';
 import { MapStore } from '../../../reducers/store';
 
@@ -31,6 +31,11 @@ export function waitUntilTimeLayersLoad$(store: MapStore) {
  .filter(({ isFilteredByGlobalTime }) => isFilteredByGlobalTime)
  .some(({ layer }) => layer.isLayerLoading());
  return !areTimeLayersStillLoading;
+ }),
+ map(() => {
+ // Observable notifies subscriber when loading is finished
+ // Return void to not expose internal implemenation details of observabale
+ return;
  })
  );
 }