[TiledHeatmapMesh] Adding a way to cancel tile fetching

[t20100]

Is your feature request related to a problem?

To limit the number of fetch operation it would be good to cancel tiles that are no longer needed.
As it is now, fetch are never cancelled, so if tiles are slow to fetch it ends-up adding more and more pending fetch.

Requested solution or feature

Add a TilesApi.cancel(layer: number, offset: Vector2) method called when the Tile is unmounted.
I don't know how this plays with Suspense in TiledLayer though?

h5web/packages/lib/src/vis/tiles/TiledLayer.tsx

Lines 51 to 61 in 214727a

	<Suspense key={`${offset.x},${offset.y}`} fallback={null}>
	<Tile
	api={api}
	layer={layer}
	x={offset.x}
	y={offset.y}
	{...colorMapProps}
	magFilter={layer === baseLayerIndex ? NearestFilter : LinearFilter}
	onPointerMove={onPointerMove}
	/>
	</Suspense>

Alternatives you've considered

Additional context

[axelboc]

Hmm indeed, this is a challenging problem as useEffect (and its potential clean-up effect) does not run until the component has fully rendered, so useEffect(() => () => { /* cancel request */ }) would not work with the current implementation.

What would work, however, would be to cancel the previous request with an AbortSignal managed via useRef and useMemo (i.e. abort previous signal when x and y props change). This is the purpose of rest-hook's useCancelling hook (cf. source code).

This should work as long as 1) the Tile components get re-used and 2) useMemo runs before the request is made.

• For 1), I think the key passed to Suspense can simply be replaced with the index of the tile as provided by map. For once, this would be done with actual purpose 😂
• For 2), the useMemo must be called before api.get(), and the abort signal must be passed to api.get().