[Maps] timeslider

x-pack/plugins/maps/common/descriptor_types/data_request_descriptor_types.ts

@@ -13,6 +13,11 @@ import { RENDER_AS, SCALING_TYPES } from '../constants';
 import { MapExtent, MapQuery } from './map_descriptor';
 import { Filter, TimeRange } from '../../../../../src/plugins/data/common';
 
+export type Timeslice = {
+  from: number;
+  to: number;
+};
+
 // Global map state passed to every layer.
 export type MapFilters = {
   buffer?: MapExtent; // extent with additional buffer
@@ -22,6 +27,7 @@ export type MapFilters = {
   refreshTimerLastTriggeredAt?: string;
   searchSessionId?: string;
   timeFilters: TimeRange;
+  timeslice?: Timeslice;
   zoom: number;
 };
 

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

@@ -271,6 +271,9 @@ describe('map_actions', () => {
       require('../selectors/map_selectors').getTimeFilters = () => {
         return timeFilters;
       };
+      require('../selectors/map_selectors').getTimeslice = () => {
+        return undefined;
+      };
       require('../selectors/map_selectors').getFilters = () => {
         return filters;
       };

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

@@ -20,6 +20,7 @@ import {
   getWaitingForMapReadyLayerListRaw,
   getQuery,
   getTimeFilters,
+  getTimeslice,
   getLayerList,
   getSearchSessionId,
   getSearchSessionMapBuffer,
@@ -54,6 +55,7 @@ import {
   MapCenterAndZoom,
   MapExtent,
   MapRefreshConfig,
+  Timeslice,
 } from '../../common/descriptor_types';
 import { INITIAL_LOCATION } from '../../common/constants';
 import { scaleBounds } from '../../common/elasticsearch_util';
@@ -227,17 +229,21 @@ function generateQueryTimestamp() {
 export function setQuery({
   query,
   timeFilters,
+  timeslice,
   filters = [],
   forceRefresh = false,
   searchSessionId,
   searchSessionMapBuffer,
+  clearTimeslice,
 }: {
   filters?: Filter[];
   query?: Query;
   timeFilters?: TimeRange;
+  timeslice?: Timeslice;
   forceRefresh?: boolean;
   searchSessionId?: string;
   searchSessionMapBuffer?: MapExtent;
+  clearTimeslice?: boolean;
 }) {
   return async (
     dispatch: ThunkDispatch<MapStoreState, void, AnyAction>,
@@ -249,10 +255,24 @@ export function setQuery({
         ? prevQuery.queryLastTriggeredAt
         : generateQueryTimestamp();
 
+    const prevTimeFilters = getTimeFilters(getState());
+
+    function getNextTimeslice() {
+      if (
+        clearTimeslice ||
+        (timeFilters !== undefined && !_.isEqual(timeFilters, prevTimeFilters))
+      ) {
+        return undefined;
+      }
+
+      return timeslice ? timeslice : getTimeslice(getState());
+    }
+
     const nextQueryContext = {
-      timeFilters: timeFilters ? timeFilters : getTimeFilters(getState()),
+      timeFilters: timeFilters ? timeFilters : prevTimeFilters,
+      timeslice: getNextTimeslice(),
       query: {
-        ...(query ? query : getQuery(getState())),
+        ...(query ? query : prevQuery),
         // ensure query changes to trigger re-fetch when "Refresh" clicked
         queryLastTriggeredAt: forceRefresh ? generateQueryTimestamp() : prevTriggeredAt,
       },
@@ -262,8 +282,9 @@ export function setQuery({
     };
 
     const prevQueryContext = {
-      timeFilters: getTimeFilters(getState()),
-      query: getQuery(getState()),
+      timeFilters: prevTimeFilters,
+      timeslice: getTimeslice(getState()),
+      query: prevQuery,
       filters: getFilters(getState()),
       searchSessionId: getSearchSessionId(getState()),
       searchSessionMapBuffer: getSearchSessionMapBuffer(getState()),

x-pack/plugins/maps/public/actions/ui_actions.ts

@@ -10,11 +10,12 @@ import { ThunkDispatch } from 'redux-thunk';
 import { MapStoreState } from '../reducers/store';
 import { getFlyoutDisplay } from '../selectors/ui_selectors';
 import { FLYOUT_STATE } from '../reducers/ui';
-import { trackMapSettings } from './map_actions';
+import { setQuery, trackMapSettings } from './map_actions';
 import { setSelectedLayer } from './layer_actions';
 
 export const UPDATE_FLYOUT = 'UPDATE_FLYOUT';
 export const SET_IS_LAYER_TOC_OPEN = 'SET_IS_LAYER_TOC_OPEN';
+export const SET_IS_TIME_SLIDER_OPEN = 'SET_IS_TIME_SLIDER_OPEN';
 export const SET_FULL_SCREEN = 'SET_FULL_SCREEN';
 export const SET_READ_ONLY = 'SET_READ_ONLY';
 export const SET_OPEN_TOC_DETAILS = 'SET_OPEN_TOC_DETAILS';
@@ -87,3 +88,20 @@ export function hideTOCDetails(layerId: string) {
     layerId,
   };
 }
+
+export function openTimeslider() {
+  return {
+    type: SET_IS_TIME_SLIDER_OPEN,
+    isTimesliderOpen: true,
+  };
+}
+
+export function closeTimeslider() {
+  return (dispatch: ThunkDispatch<MapStoreState, void, AnyAction>) => {
+    dispatch({
+      type: SET_IS_TIME_SLIDER_OPEN,
+      isTimesliderOpen: false,
+    });
+    dispatch(setQuery({ clearTimeslice: true }));
+  };
+}

x-pack/plugins/maps/public/classes/layers/blended_vector_layer/blended_vector_layer.ts

@@ -294,7 +294,7 @@ export class BlendedVectorLayer extends VectorLayer implements IVectorLayer {
   async syncData(syncContext: DataRequestContext) {
     const dataRequestId = ACTIVE_COUNT_DATA_ID;
     const requestToken = Symbol(`layer-active-count:${this.getId()}`);
-    const searchFilters: VectorSourceRequestMeta = this._getSearchFilters(
+    const requestMeta: VectorSourceRequestMeta = await this._getSearchFilters(
       syncContext.dataFilters,
       this.getSource(),
       this.getCurrentStyle()
@@ -303,7 +303,7 @@ export class BlendedVectorLayer extends VectorLayer implements IVectorLayer {
     const canSkipFetch = await canSkipSourceUpdate({
       source,
       prevDataRequest: this.getDataRequest(dataRequestId),
-      nextMeta: searchFilters,
+      nextMeta: requestMeta,
       extentAware: source.isFilterByMapBounds(),
     });
 
@@ -321,11 +321,11 @@ export class BlendedVectorLayer extends VectorLayer implements IVectorLayer {
     } else {
       let isSyncClustered;
       try {
-        syncContext.startLoading(dataRequestId, requestToken, searchFilters);
+        syncContext.startLoading(dataRequestId, requestToken, requestMeta);
         const abortController = new AbortController();
         syncContext.registerCancelCallback(requestToken, () => abortController.abort());
         const maxResultWindow = await this._documentSource.getMaxResultWindow();
-        const searchSource = await this._documentSource.makeSearchSource(searchFilters, 0);
+        const searchSource = await this._documentSource.makeSearchSource(requestMeta, 0);
         searchSource.setField('trackTotalHits', maxResultWindow + 1);
         const resp = await searchSource.fetch({
           abortSignal: abortController.signal,
@@ -336,8 +336,9 @@ export class BlendedVectorLayer extends VectorLayer implements IVectorLayer {
           (resp.hits.total as unknown) as TotalHits,
           maxResultWindow
         );
-        const countData = { isSyncClustered } as CountData;
-        syncContext.stopLoading(dataRequestId, requestToken, countData, searchFilters);
+        const results = { isSyncClustered } as CountData;
+        const resultsMeta = { areResultsTrimmed: isSyncClustered };
+        syncContext.stopLoading(dataRequestId, requestToken, results, resultsMeta);
       } catch (error) {
         if (!(error instanceof DataRequestAbortError) || !isSearchSourceAbortError(error)) {
           syncContext.onLoadError(dataRequestId, requestToken, error.message);

x-pack/plugins/maps/public/classes/layers/heatmap_layer/heatmap_layer.ts

@@ -10,7 +10,7 @@ import { FeatureCollection } from 'geojson';
 import { AbstractLayer } from '../layer';
 import { HeatmapStyle } from '../../styles/heatmap/heatmap_style';
 import { EMPTY_FEATURE_COLLECTION, LAYER_TYPE } from '../../../../common/constants';
-import { HeatmapLayerDescriptor, MapQuery } from '../../../../common/descriptor_types';
+import { HeatmapLayerDescriptor, MapQuery, Timeslice } from '../../../../common/descriptor_types';
 import { ESGeoGridSource } from '../../sources/es_geo_grid_source';
 import { addGeoJsonMbSource, getVectorSourceBounds, syncVectorSource } from '../vector_layer';
 import { DataRequestContext } from '../../../actions';
@@ -119,7 +119,7 @@ export class HeatmapLayer extends AbstractLayer {
     }
   }
 
-  syncLayerWithMB(mbMap: MbMap) {
+  async syncLayerWithMB(mbMap: MbMap, timeslice?: Timeslice) {
     addGeoJsonMbSource(this._getMbSourceId(), this.getMbLayerIds(), mbMap);
 
     const heatmapLayerId = this._getHeatmapLayerId();

x-pack/plugins/maps/public/classes/layers/layer.tsx

@@ -36,6 +36,7 @@ import {
   LayerDescriptor,
   MapExtent,
   StyleDescriptor,
+  Timeslice,
 } from '../../../common/descriptor_types';
 import { ImmutableSourceProperty, ISource, SourceEditorArgs } from '../sources/source';
 import { DataRequestContext } from '../../actions';
@@ -78,7 +79,7 @@ export interface ILayer {
   ownsMbLayerId(mbLayerId: string): boolean;
   ownsMbSourceId(mbSourceId: string): boolean;
   canShowTooltip(): boolean;
-  syncLayerWithMB(mbMap: MbMap): void;
+  syncLayerWithMB(mbMap: MbMap, timeslice?: Timeslice): Promise<void>;
   getLayerTypeIconName(): string;
   isInitialDataLoadComplete(): boolean;
   getIndexPatternIds(): string[];
@@ -456,7 +457,7 @@ export class AbstractLayer implements ILayer {
     return false;
   }
 
-  syncLayerWithMB(mbMap: MbMap) {
+  syncLayerWithMB(mbMap: MbMap, timeslice?: Timeslice): Promise<void> {
     throw new Error('Should implement AbstractLayer#syncLayerWithMB');
   }
 

x-pack/plugins/maps/public/classes/layers/tile_layer/tile_layer.js

@@ -70,7 +70,7 @@ export class TileLayer extends AbstractLayer {
     return this.getId() === mbSourceId;
   }
 
-  syncLayerWithMB(mbMap) {
+  async syncLayerWithMB(mbMap) {
     const source = mbMap.getSource(this.getId());
     const mbLayerId = this._getMbLayerId();
 

x-pack/plugins/maps/public/classes/layers/tiled_vector_layer/tiled_vector_layer.tsx

@@ -21,6 +21,7 @@ import { VectorLayer, VectorLayerArguments } from '../vector_layer';
 import { ITiledSingleLayerVectorSource } from '../../sources/tiled_single_layer_vector_source';
 import { DataRequestContext } from '../../../actions';
 import {
+  Timeslice,
   VectorLayerDescriptor,
   VectorSourceRequestMeta,
 } from '../../../../common/descriptor_types';
@@ -66,7 +67,7 @@ export class TiledVectorLayer extends VectorLayer {
     dataFilters,
   }: DataRequestContext) {
     const requestToken: symbol = Symbol(`layer-${this.getId()}-${SOURCE_DATA_REQUEST_ID}`);
-    const searchFilters: VectorSourceRequestMeta = this._getSearchFilters(
+    const searchFilters: VectorSourceRequestMeta = await this._getSearchFilters(
       dataFilters,
       this.getSource(),
       this._style as IVectorStyle
@@ -162,7 +163,7 @@ export class TiledVectorLayer extends VectorLayer {
     return this._getMbSourceId() === mbSourceId;
   }
 
-  _syncStylePropertiesWithMb(mbMap: MbMap) {
+  async _syncStylePropertiesWithMb(mbMap: MbMap) {
     // @ts-ignore
     const mbSource = mbMap.getSource(this._getMbSourceId());
     if (!mbSource) {
@@ -229,7 +230,7 @@ export class TiledVectorLayer extends VectorLayer {
     return false;
   }
 
-  syncLayerWithMB(mbMap: MbMap) {
+  async syncLayerWithMB(mbMap: MbMap, timeslice?: Timeslice) {
     this._removeStaleMbSourcesAndLayers(mbMap);
     this._syncSourceBindingWithMb(mbMap);
     this._syncStylePropertiesWithMb(mbMap);

x-pack/plugins/maps/public/classes/layers/vector_layer/utils.tsx

@@ -136,6 +136,7 @@ export async function getVectorSourceBounds({
     sourceQuery: sourceQuery ? sourceQuery : undefined,
     query: dataFilters.query,
     timeFilters: dataFilters.timeFilters,
+    timeslice: dataFilters.timeslice,
     filters: dataFilters.filters,
     applyGlobalQuery: source.getApplyGlobalQuery(),
     applyGlobalTime: source.getApplyGlobalTime(),