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

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({
@@ -85,7 +86,8 @@ export class VectorChartLayerComponent implements OnDestroy {
                   ? chart[1].layers
                   : null
             }),
-            maxZoom: maxZ
+            maxZoom: maxZ,
+            tileLoadFunction: createAbortableVectorTileLoader()
           }),
           preload: 0,
           zIndex: this.zIndex(),

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

@@ -0,0 +1,120 @@
+import { expect, describe, it } from 'vitest';
+import {
+  bucketForZoom,
+  releaseController,
+  type PendingByZoom
+} from './tile-loader-abort';
+
+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);
+  });
+});

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

@@ -0,0 +1,91 @@
+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';
+
+export type PendingByZoom = Map<number, Set<AbortController>>;
+
+/**
+ * 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.
+ */
+export 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;
+}
+
+export 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);
+  }
+}
+
+/**
+ * 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(): (
+  tile: VectorTile<FeatureLike>,
+  src: string
+) => void {
+  const pending: PendingByZoom = new Map();
+
+  return function loader(tile: VectorTile<FeatureLike>, src: string) {
+    const z = tile.getTileCoord()[0];
+    const bucket = bucketForZoom(pending, z);
+
+    tile.setLoader(
+      (extent: Extent, _resolution: number, projection: Projection) => {
+        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((err) => {
+            if (err?.name !== 'AbortError') {
+              tile.setState(TileState.ERROR);
+            }
+          })
+          .finally(() => {
+            releaseController(pending, z, controller);
+          });
+      }
+    );
+  };
+}

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

@@ -134,7 +134,11 @@ export class MapComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     const target = this.element.nativeElement.firstElementChild;
-    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