perf(map): raise tile concurrency and cancel superseded vector tile loads

Raise OL maxTilesLoading from the default 16 to 32 so zoom-out tile
bursts keep the browser's HTTP/1.1 connection pool fed.

Add an abortable VectorTile tileLoadFunction that cancels in-flight
loads from superseded zoom levels, freeing the connection pool for the
now-visible level.

Raster-source cancellation is intentionally left out: OL deprecates
tileLoadFunction on raster (UrlTile) sources in favor of an ImageTile
loader, which is a larger rework for a follow-up.

Author: NearlCrews

src/app/modules/map/ol/lib/charts/layer-vector-chart.component.ts

@@ -18,6 +18,7 @@ import { MapComponent } from '../map.component';
 import { FBChart } from 'src/app/types';
 import { initPMTilesVectorLayer } from './pmtiles-utils';
 import { extentFromBounds, resolveLayerMaxZoom } from './chart-utils';
+import { createAbortableVectorTileLoader } from './tile-loader-abort';
 
 // ** Freeboard Vector TileLayer Chart **
 @Component({
@@ -33,6 +34,7 @@ export class VectorChartLayerComponent implements OnDestroy {
   protected mapMaxZoom = input<number>();
 
   private layer: VectorTileLayer;
+  private abortPendingTileLoads?: () => void;
   private changeDetectorRef = inject(ChangeDetectorRef);
   private mapComponent = inject(MapComponent);
 
@@ -48,6 +50,8 @@ export class VectorChartLayerComponent implements OnDestroy {
   }
 
   ngOnDestroy() {
+    this.abortPendingTileLoads?.();
+    this.abortPendingTileLoads = undefined;
     const map = this.mapComponent.getMap();
     if (this.layer) {
       map.removeLayer(this.layer);
@@ -76,6 +80,8 @@ export class VectorChartLayerComponent implements OnDestroy {
       if (chart[1].url.indexOf('.pmtiles') !== -1) {
         this.layer = initPMTilesVectorLayer(chart[1], this.zIndex());
       } else {
+        const abortableLoader = createAbortableVectorTileLoader();
+        this.abortPendingTileLoads = abortableLoader.abortPending;
         this.layer = new VectorTileLayer({
           source: new VectorTileSource({
             url: chart[1].url,
@@ -85,7 +91,8 @@ export class VectorChartLayerComponent implements OnDestroy {
                   ? chart[1].layers
                   : null
             }),
-            maxZoom: maxZ
+            maxZoom: maxZ,
+            tileLoadFunction: abortableLoader.tileLoadFunction
           }),
           preload: 0,
           zIndex: this.zIndex(),
@@ -100,7 +107,7 @@ export class VectorChartLayerComponent implements OnDestroy {
         this.layer.setMaxZoom(layerMaxZ);
         this.layer.setExtent(extentFromBounds(chart[1].bounds));
         if (chart[1].style) {
-          applyStyle(this.layer as any, chart[1].style);
+          applyStyle(this.layer, chart[1].style);
         }
         this.layer.set('id', chart[0]);
         this.layer.set('chartId', chart[0]);

src/app/modules/map/ol/lib/charts/tile-loader-abort.spec.ts

@@ -0,0 +1,216 @@
+import type { FeatureLike } from 'ol/Feature';
+import type { Extent } from 'ol/extent';
+import type Projection from 'ol/proj/Projection';
+import type VectorTile from 'ol/VectorTile';
+import TileState from 'ol/TileState';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  abortPendingControllers,
+  bucketForZoom,
+  createAbortableVectorTileLoader,
+  releaseController,
+  type PendingByZoom
+} from './tile-loader-abort';
+
+type TileLoader = (
+  extent: Extent,
+  resolution: number,
+  projection: Projection
+) => void;
+
+function makeTile(z = 9) {
+  let loader: TileLoader | undefined;
+  const states: number[] = [];
+  const tile = {
+    getTileCoord: () => [z, 0, 0],
+    setLoader: (nextLoader: TileLoader) => {
+      loader = nextLoader;
+    },
+    setState: (state: number) => states.push(state)
+  } as unknown as VectorTile<FeatureLike>;
+
+  return {
+    tile,
+    states,
+    start: () => loader?.([] as unknown as Extent, 1, {} as Projection)
+  };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+function makePending(): PendingByZoom {
+  return new Map();
+}
+
+describe('bucketForZoom', () => {
+  it('returns the same bucket on repeated calls at the same zoom', () => {
+    const pending = makePending();
+    const bucket1 = bucketForZoom(pending, 10);
+    const bucket2 = bucketForZoom(pending, 10);
+    expect(bucket1).toBe(bucket2);
+  });
+
+  it('does not abort any controller when the zoom is unchanged', () => {
+    const pending = makePending();
+    const bucket = bucketForZoom(pending, 10);
+    const controller = new AbortController();
+    bucket.add(controller);
+
+    bucketForZoom(pending, 10);
+
+    expect(controller.signal.aborted).toBe(false);
+  });
+
+  it('aborts all controllers from a superseded zoom', () => {
+    const pending = makePending();
+    const bucket = bucketForZoom(pending, 8);
+    const c1 = new AbortController();
+    const c2 = new AbortController();
+    bucket.add(c1);
+    bucket.add(c2);
+
+    bucketForZoom(pending, 12);
+
+    expect(c1.signal.aborted).toBe(true);
+    expect(c2.signal.aborted).toBe(true);
+  });
+
+  it('removes the old zoom bucket after superseding', () => {
+    const pending = makePending();
+    const oldBucket = bucketForZoom(pending, 8);
+    const c = new AbortController();
+    oldBucket.add(c);
+
+    bucketForZoom(pending, 12);
+
+    expect(pending.has(8)).toBe(false);
+    expect(pending.has(12)).toBe(true);
+  });
+
+  it('aborts controllers across multiple superseded zooms in one call', () => {
+    const pending = makePending();
+    const c5 = new AbortController();
+    const c7 = new AbortController();
+    pending.set(5, new Set([c5]));
+    pending.set(7, new Set([c7]));
+
+    bucketForZoom(pending, 10);
+
+    expect(c5.signal.aborted).toBe(true);
+    expect(c7.signal.aborted).toBe(true);
+    expect(pending.has(5)).toBe(false);
+    expect(pending.has(7)).toBe(false);
+    expect(pending.has(10)).toBe(true);
+  });
+});
+
+describe('releaseController', () => {
+  it('deletes the bucket when its last controller is removed', () => {
+    const pending = makePending();
+    const bucket = bucketForZoom(pending, 9);
+    const controller = new AbortController();
+    bucket.add(controller);
+
+    releaseController(pending, 9, controller);
+
+    expect(pending.has(9)).toBe(false);
+  });
+
+  it('leaves the bucket intact when other controllers remain', () => {
+    const pending = makePending();
+    const bucket = bucketForZoom(pending, 9);
+    const c1 = new AbortController();
+    const c2 = new AbortController();
+    bucket.add(c1);
+    bucket.add(c2);
+
+    releaseController(pending, 9, c1);
+
+    expect(pending.has(9)).toBe(true);
+    expect(pending.get(9)?.has(c2)).toBe(true);
+    expect(pending.get(9)?.has(c1)).toBe(false);
+  });
+
+  it('is a no-op when the zoom bucket has already been removed', () => {
+    const pending = makePending();
+    const controller = new AbortController();
+
+    expect(() => releaseController(pending, 9, controller)).not.toThrow();
+    expect(pending.has(9)).toBe(false);
+  });
+
+  it('is a no-op when the controller is not in the bucket', () => {
+    const pending = makePending();
+    const bucket = bucketForZoom(pending, 9);
+    const resident = new AbortController();
+    bucket.add(resident);
+    const stranger = new AbortController();
+
+    expect(() => releaseController(pending, 9, stranger)).not.toThrow();
+    expect(pending.has(9)).toBe(true);
+    expect(pending.get(9)?.has(resident)).toBe(true);
+  });
+});
+
+describe('abortPendingControllers', () => {
+  it('aborts every pending controller and clears the bookkeeping', () => {
+    const c8 = new AbortController();
+    const c9 = new AbortController();
+    const pending: PendingByZoom = new Map([
+      [8, new Set([c8])],
+      [9, new Set([c9])]
+    ]);
+
+    abortPendingControllers(pending);
+
+    expect(c8.signal.aborted).toBe(true);
+    expect(c9.signal.aborted).toBe(true);
+    expect(pending.size).toBe(0);
+  });
+});
+
+describe('createAbortableVectorTileLoader', () => {
+  it('marks an aborted tile as an error during teardown', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn((_src: string, init?: RequestInit) => {
+        return new Promise<Response>((_resolve, reject) => {
+          init?.signal?.addEventListener('abort', () => {
+            reject(new DOMException('Aborted', 'AbortError'));
+          });
+        });
+      })
+    );
+    const { tileLoadFunction, abortPending } =
+      createAbortableVectorTileLoader();
+    const tile = makeTile();
+
+    tileLoadFunction(tile.tile, 'https://example.test/tile.pbf');
+    tile.start();
+    expect(tile.states).toEqual([TileState.LOADING]);
+
+    abortPending();
+
+    await vi.waitFor(() => {
+      expect(tile.states).toEqual([TileState.LOADING, TileState.ERROR]);
+    });
+  });
+
+  it('marks ordinary fetch failures as errors', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(() => Promise.reject(new Error('offline')))
+    );
+    const { tileLoadFunction } = createAbortableVectorTileLoader();
+    const tile = makeTile();
+
+    tileLoadFunction(tile.tile, 'https://example.test/tile.pbf');
+    tile.start();
+
+    await vi.waitFor(() => {
+      expect(tile.states).toEqual([TileState.LOADING, TileState.ERROR]);
+    });
+  });
+});

src/app/modules/map/ol/lib/charts/tile-loader-abort.ts

@@ -0,0 +1,108 @@
+import TileState from 'ol/TileState';
+import type VectorTile from 'ol/VectorTile';
+import type { FeatureLike } from 'ol/Feature';
+import type { Extent } from 'ol/extent';
+import type Projection from 'ol/proj/Projection';
+
+type PendingByZoom = Map<number, Set<AbortController>>;
+
+export type VectorTileLoadFunction = (
+  tile: VectorTile<FeatureLike>,
+  src: string
+) => void;
+
+export interface AbortableVectorTileLoader {
+  tileLoadFunction: VectorTileLoadFunction;
+  abortPending: () => void;
+}
+
+/**
+ * Abort and drop controllers held under zoom levels other than `z`, then
+ * return (or create) the controller bucket for `z`. Keeps the vector
+ * loader's per-zoom bookkeeping in lockstep.
+ */
+function bucketForZoom(
+  pending: PendingByZoom,
+  z: number
+): Set<AbortController> {
+  for (const [oldZ, controllers] of pending) {
+    if (oldZ !== z) {
+      for (const c of controllers) c.abort();
+      pending.delete(oldZ);
+    }
+  }
+  let set = pending.get(z);
+  if (!set) {
+    set = new Set();
+    pending.set(z, set);
+  }
+  return set;
+}
+
+function releaseController(
+  pending: PendingByZoom,
+  z: number,
+  controller: AbortController
+) {
+  const s = pending.get(z);
+  if (s) {
+    s.delete(controller);
+    if (s.size === 0) pending.delete(z);
+  }
+}
+
+export function abortPendingControllers(pending: PendingByZoom): void {
+  for (const controllers of pending.values()) {
+    for (const controller of controllers) controller.abort();
+  }
+  pending.clear();
+}
+
+/**
+ * Build an OL VectorTile `tileLoadFunction` that aborts in-flight loads from
+ * superseded zoom levels. When a new tile request arrives at zoom Z, any
+ * outstanding controllers for zoom !== Z are aborted so they free up the
+ * browser's connection pool for the now-visible level. The fetch is wrapped
+ * inside `tile.setLoader` because OL's VectorTile contract has the tile own
+ * its decoded features.
+ */
+export function createAbortableVectorTileLoader(): AbortableVectorTileLoader {
+  const pending: PendingByZoom = new Map();
+
+  const tileLoadFunction: VectorTileLoadFunction = (tile, src) => {
+    const z = tile.getTileCoord()[0];
+
+    tile.setLoader(
+      (extent: Extent, _resolution: number, projection: Projection) => {
+        const bucket = bucketForZoom(pending, z);
+        const controller = new AbortController();
+        bucket.add(controller);
+
+        tile.setState(TileState.LOADING);
+        fetch(src, { signal: controller.signal })
+          .then((r) => r.arrayBuffer())
+          .then((data) => {
+            const format = tile.getFormat();
+            const features = format.readFeatures(data, {
+              extent,
+              featureProjection: projection
+            }) as FeatureLike[];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (tile as any).setFeatures(features);
+            tile.setState(TileState.LOADED);
+          })
+          .catch(() => {
+            tile.setState(TileState.ERROR);
+          })
+          .finally(() => {
+            releaseController(pending, z, controller);
+          });
+      }
+    );
+  };
+
+  return {
+    tileLoadFunction,
+    abortPending: () => abortPendingControllers(pending)
+  };
+}

src/app/modules/map/ol/lib/map.component.ts

@@ -171,7 +171,11 @@ export class MapComponent implements OnInit, OnDestroy {
     // outside the zone eliminates that; the specific handlers that must update
     // Angular state re-enter the zone via ngZone.run() (see below).
     this.ngZone.runOutsideAngular(() => {
-      this.map = new Map();
+      this.map = new Map({
+        // 2x OL default (16); keeps the browser HTTP/1.1 per-host connection
+        // pool fully fed during zoom-out tile bursts.
+        maxTilesLoading: 32
+      });
       this.map.setTarget(target);
       this.map.setProperties(this.properties, true);
       // register the map in the injectable mapService