forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Maps] Track tile loading status (elastic#91585)
- Loading branch information
1 parent
4fd56e3
commit b926e41
Showing
13 changed files
with
352 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
140 changes: 140 additions & 0 deletions
140
x-pack/plugins/maps/public/connected_components/mb_map/tile_status_tracker.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| // eslint-disable-next-line max-classes-per-file | ||
| import { TileStatusTracker } from './tile_status_tracker'; | ||
| import { Map as MbMap } from 'mapbox-gl'; | ||
| import { ILayer } from '../../classes/layers/layer'; | ||
|
|
||
| class MockMbMap { | ||
| public listeners: Array<{ type: string; callback: (e: unknown) => void }> = []; | ||
|
|
||
| on(type: string, callback: (e: unknown) => void) { | ||
| this.listeners.push({ | ||
| type, | ||
| callback, | ||
| }); | ||
| } | ||
|
|
||
| emit(type: string, e: unknown) { | ||
| this.listeners.forEach((listener) => { | ||
| if (listener.type === type) { | ||
| listener.callback(e); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| off(type: string, callback: (e: unknown) => void) { | ||
| this.listeners = this.listeners.filter((listener) => { | ||
| return !(listener.type === type && listener.callback === callback); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| class MockLayer { | ||
| readonly _id: string; | ||
| readonly _mbSourceId: string; | ||
| constructor(id: string, mbSourceId: string) { | ||
| this._id = id; | ||
| this._mbSourceId = mbSourceId; | ||
| } | ||
| getId() { | ||
| return this._id; | ||
| } | ||
|
|
||
| ownsMbSourceId(mbSourceId: string) { | ||
| return this._mbSourceId === mbSourceId; | ||
| } | ||
| } | ||
|
|
||
| function createMockLayer(id: string, mbSourceId: string): ILayer { | ||
| return (new MockLayer(id, mbSourceId) as unknown) as ILayer; | ||
| } | ||
|
|
||
| function createMockMbDataEvent(mbSourceId: string, tileKey: string): unknown { | ||
| return { | ||
| sourceId: mbSourceId, | ||
| dataType: 'source', | ||
| tile: { | ||
| tileID: { | ||
| key: tileKey, | ||
| }, | ||
| }, | ||
| source: { | ||
| type: 'vector', | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| async function sleep(timeout: number) { | ||
| return await new Promise((resolve) => { | ||
| setTimeout(() => { | ||
| resolve(true); | ||
| }, timeout); | ||
| }); | ||
| } | ||
|
|
||
| describe('TileStatusTracker', () => { | ||
| test('should add and remove tiles', async () => { | ||
| const mockMbMap = new MockMbMap(); | ||
| const loadedMap: Map<string, boolean> = new Map<string, boolean>(); | ||
| new TileStatusTracker({ | ||
| mbMap: (mockMbMap as unknown) as MbMap, | ||
| setAreTilesLoaded: (layerId, areTilesLoaded) => { | ||
| loadedMap.set(layerId, areTilesLoaded); | ||
| }, | ||
| getCurrentLayerList: () => { | ||
| return [ | ||
| createMockLayer('foo', 'foosource'), | ||
| createMockLayer('bar', 'barsource'), | ||
| createMockLayer('foobar', 'foobarsource'), | ||
| ]; | ||
| }, | ||
| }); | ||
|
|
||
| mockMbMap.emit('sourcedataloading', createMockMbDataEvent('foosource', 'aa11')); | ||
|
|
||
| const aa11BarTile = createMockMbDataEvent('barsource', 'aa11'); | ||
| mockMbMap.emit('sourcedataloading', aa11BarTile); | ||
|
|
||
| mockMbMap.emit('sourcedata', createMockMbDataEvent('foosource', 'aa11')); | ||
|
|
||
| // simulate delay. Cache-checking is debounced. | ||
| await sleep(300); | ||
|
|
||
| expect(loadedMap.get('foo')).toBe(true); | ||
| expect(loadedMap.get('bar')).toBe(false); // still outstanding tile requests | ||
| expect(loadedMap.has('foobar')).toBe(true); // never received tile requests | ||
|
|
||
| (aa11BarTile as { tile: { aborted: boolean } })!.tile.aborted = true; // abort tile | ||
| mockMbMap.emit('sourcedataloading', createMockMbDataEvent('barsource', 'af1d')); | ||
| mockMbMap.emit('sourcedataloading', createMockMbDataEvent('foosource', 'af1d')); | ||
| mockMbMap.emit('error', createMockMbDataEvent('barsource', 'af1d')); | ||
|
|
||
| // simulate delay. Cache-checking is debounced. | ||
| await sleep(300); | ||
|
|
||
| expect(loadedMap.get('foo')).toBe(false); // still outstanding tile requests | ||
| expect(loadedMap.get('bar')).toBe(true); // tiles were aborted or errored | ||
| expect(loadedMap.has('foobar')).toBe(true); // never received tile requests | ||
| }); | ||
|
|
||
| test('should cleanup listeners on destroy', async () => { | ||
| const mockMbMap = new MockMbMap(); | ||
| const tileStatusTracker = new TileStatusTracker({ | ||
| mbMap: (mockMbMap as unknown) as MbMap, | ||
| setAreTilesLoaded: () => {}, | ||
| getCurrentLayerList: () => { | ||
| return []; | ||
| }, | ||
| }); | ||
|
|
||
| expect(mockMbMap.listeners.length).toBe(3); | ||
| tileStatusTracker.destroy(); | ||
| expect(mockMbMap.listeners.length).toBe(0); | ||
| }); | ||
| }); |
132 changes: 132 additions & 0 deletions
132
x-pack/plugins/maps/public/connected_components/mb_map/tile_status_tracker.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import { Map as MapboxMap, MapSourceDataEvent } from 'mapbox-gl'; | ||
| import _ from 'lodash'; | ||
| import { ILayer } from '../../classes/layers/layer'; | ||
| import { SPATIAL_FILTERS_LAYER_ID } from '../../../common/constants'; | ||
|
|
||
| interface MbTile { | ||
| // references internal object from mapbox | ||
| aborted?: boolean; | ||
| } | ||
|
|
||
| interface Tile { | ||
| mbKey: string; | ||
| mbSourceId: string; | ||
| mbTile: MbTile; | ||
| } | ||
|
|
||
| export class TileStatusTracker { | ||
| private _tileCache: Tile[]; | ||
| private readonly _mbMap: MapboxMap; | ||
| private readonly _setAreTilesLoaded: (layerId: string, areTilesLoaded: boolean) => void; | ||
| private readonly _getCurrentLayerList: () => ILayer[]; | ||
| private readonly _onSourceDataLoading = (e: MapSourceDataEvent) => { | ||
| if ( | ||
| e.sourceId && | ||
| e.sourceId !== SPATIAL_FILTERS_LAYER_ID && | ||
| e.dataType === 'source' && | ||
| e.tile && | ||
| (e.source.type === 'vector' || e.source.type === 'raster') | ||
| ) { | ||
| const tracked = this._tileCache.find((tile) => { | ||
| return ( | ||
| tile.mbKey === ((e.tile.tileID.key as unknown) as string) && | ||
| tile.mbSourceId === e.sourceId | ||
| ); | ||
| }); | ||
|
|
||
| if (!tracked) { | ||
| this._tileCache.push({ | ||
| mbKey: (e.tile.tileID.key as unknown) as string, | ||
| mbSourceId: e.sourceId, | ||
| mbTile: e.tile, | ||
| }); | ||
| this._updateTileStatus(); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| private readonly _onError = (e: MapSourceDataEvent) => { | ||
| if ( | ||
| e.sourceId && | ||
| e.sourceId !== SPATIAL_FILTERS_LAYER_ID && | ||
| e.tile && | ||
| (e.source.type === 'vector' || e.source.type === 'raster') | ||
| ) { | ||
| this._removeTileFromCache(e.sourceId, (e.tile.tileID.key as unknown) as string); | ||
| } | ||
| }; | ||
| private readonly _onSourceData = (e: MapSourceDataEvent) => { | ||
| if ( | ||
| e.sourceId && | ||
| e.sourceId !== SPATIAL_FILTERS_LAYER_ID && | ||
| e.dataType === 'source' && | ||
| e.tile && | ||
| (e.source.type === 'vector' || e.source.type === 'raster') | ||
| ) { | ||
| this._removeTileFromCache(e.sourceId, (e.tile.tileID.key as unknown) as string); | ||
| } | ||
| }; | ||
|
|
||
| constructor({ | ||
| mbMap, | ||
| setAreTilesLoaded, | ||
| getCurrentLayerList, | ||
| }: { | ||
| mbMap: MapboxMap; | ||
| setAreTilesLoaded: (layerId: string, areTilesLoaded: boolean) => void; | ||
| getCurrentLayerList: () => ILayer[]; | ||
| }) { | ||
| this._tileCache = []; | ||
| this._setAreTilesLoaded = setAreTilesLoaded; | ||
| this._getCurrentLayerList = getCurrentLayerList; | ||
|
|
||
| this._mbMap = mbMap; | ||
| this._mbMap.on('sourcedataloading', this._onSourceDataLoading); | ||
| this._mbMap.on('error', this._onError); | ||
| this._mbMap.on('sourcedata', this._onSourceData); | ||
| } | ||
|
|
||
| _updateTileStatus = _.debounce(() => { | ||
| this._tileCache = this._tileCache.filter((tile) => { | ||
| return typeof tile.mbTile.aborted === 'boolean' ? !tile.mbTile.aborted : true; | ||
| }); | ||
| const layerList = this._getCurrentLayerList(); | ||
| for (let i = 0; i < layerList.length; i++) { | ||
| const layer: ILayer = layerList[i]; | ||
| let atLeastOnePendingTile = false; | ||
| for (let j = 0; j < this._tileCache.length; j++) { | ||
| const tile = this._tileCache[j]; | ||
| if (layer.ownsMbSourceId(tile.mbSourceId)) { | ||
| atLeastOnePendingTile = true; | ||
| break; | ||
| } | ||
| } | ||
| this._setAreTilesLoaded(layer.getId(), !atLeastOnePendingTile); | ||
| } | ||
| }, 100); | ||
|
|
||
| _removeTileFromCache = (mbSourceId: string, mbKey: string) => { | ||
| const trackedIndex = this._tileCache.findIndex((tile) => { | ||
| return tile.mbKey === ((mbKey as unknown) as string) && tile.mbSourceId === mbSourceId; | ||
| }); | ||
|
|
||
| if (trackedIndex >= 0) { | ||
| this._tileCache.splice(trackedIndex, 1); | ||
| this._updateTileStatus(); | ||
| } | ||
| }; | ||
|
|
||
| destroy() { | ||
| this._mbMap.off('error', this._onError); | ||
| this._mbMap.off('sourcedata', this._onSourceData); | ||
| this._mbMap.off('sourcedataloading', this._onSourceDataLoading); | ||
| this._tileCache.length = 0; | ||
| } | ||
| } |
Oops, something went wrong.