bruce-cesium 7.2.0 → 7.2.2

package/dist/bruce-cesium.es5.js

@@ -1,6 +1,6 @@
 import * as Cesium from 'cesium';
-import { Cartographic, ColorMaterialProperty, Entity, Color, ConstantProperty, CallbackProperty, Primitive, Cesium3DTileFeature, ShaderSource, Cartesian3, Math as Math$1, Ellipsoid, Transforms, Matrix4, Geometry, GeometryAttribute, ComponentDatatype, PrimitiveType, BoundingSphere, GeometryPipeline, sampleTerrain, Texture, PixelFormat, Sampler, TextureWrap, TextureMinificationFilter, TextureMagnificationFilter, VertexArray, BufferUsage, ShaderProgram, RenderState, BlendingState, DrawCommand, Pass, Cartesian2, DistanceDisplayCondition, JulianDate, Quaternion, HeadingPitchRoll, HeightReference, ColorBlendMode, ShadowMode, ClassificationType, Model, HorizontalOrigin, VerticalOrigin, ConstantPositionProperty, ArcType, CornerType, ImageMaterialProperty, PolygonHierarchy, PolylineGraphics, Rectangle, SceneTransforms, NearFarScalar, Matrix3, KmlDataSource, SceneMode, GeoJsonDataSource, Cesium3DTileStyle, HeadingPitchRange, Ion, IonResource, Cesium3DTileColorBlendMode, Cesium3DTileset, OrthographicFrustum, EasingFunction, EllipsoidTerrainProvider, IonImageryProvider, createWorldImagery, createWorldImageryAsync, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, UrlTemplateImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, TileMapServiceImageryProvider, CesiumTerrainProvider, Intersect, ModelGraphics, PolygonGraphics, CorridorGraphics, PointGraphics, BillboardGraphics, EllipseGraphics, PolylineDashMaterialProperty, EllipsoidGeodesic, sampleTerrainMostDetailed, defined, CustomDataSource, PolygonPipeline, CesiumInspector, ClockRange, DynamicEnvironmentMapManager, GeometryInstance, ScreenSpaceEventHandler, ScreenSpaceEventType, Fullscreen, CzmlDataSource } from 'cesium';
-import { Cartes, Entity as Entity$1, ProjectViewTile, ENVIRONMENT, Calculator, ClientFile, EntityLod, EntityTag, EntityType, LRUCache, ObjectUtils, Style, Api, Carto, Geometry as Geometry$1, MenuItem, ProjectView, ProjectViewBookmark, Tileset, ZoomControl, Bounds, Color as Color$1, BruceEvent, EntityCoords, DataLab, DelayQueue, EntityHistoricData, EntityRelation, AccountConcept, RecordChangeFeed, BruceApi, EntitySource, Camera, ProgramKey, ProjectViewLegacyTile, Account, AccountLimits, Session, UrlUtils, ProjectViewBookmarkGroup, EntityAttachment, EntityAttachmentType, EntityAttribute, MathUtils, EntityRelationType } from 'bruce-models';
+import { Cartographic, ColorMaterialProperty, Entity, Color, ConstantProperty, CallbackProperty, Primitive, Cesium3DTileFeature, ShaderSource, Cartesian3, Math as Math$1, Ellipsoid, Transforms, Matrix4, Geometry, GeometryAttribute, ComponentDatatype, PrimitiveType, BoundingSphere, GeometryPipeline, sampleTerrain, Texture, PixelFormat, Sampler, TextureWrap, TextureMinificationFilter, TextureMagnificationFilter, VertexArray, BufferUsage, ShaderProgram, RenderState, BlendingState, DrawCommand, Pass, Cartesian2, DistanceDisplayCondition, JulianDate, Quaternion, HeadingPitchRoll, HeightReference, ColorBlendMode, ShadowMode, ClassificationType, Model, ArcType, CornerType, ConstantPositionProperty, HorizontalOrigin, VerticalOrigin, SceneTransforms, ImageMaterialProperty, PolygonHierarchy, PolylineGraphics, Rectangle, NearFarScalar, Matrix3, GeoJsonDataSource, SceneMode, KmlDataSource, Ion, IonResource, Cesium3DTileStyle, HeadingPitchRange, EllipsoidTerrainProvider, IonImageryProvider, createWorldImagery, createWorldImageryAsync, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, UrlTemplateImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, TileMapServiceImageryProvider, CesiumTerrainProvider, Cesium3DTileColorBlendMode, Cesium3DTileset, Intersect, OrthographicFrustum, EasingFunction, EllipsoidGeodesic, sampleTerrainMostDetailed, defined, PolygonPipeline, CustomDataSource, CesiumInspector, ClockRange, DynamicEnvironmentMapManager, GeometryInstance, ScreenSpaceEventHandler, ScreenSpaceEventType, Fullscreen, ModelGraphics, PolygonGraphics, CorridorGraphics, PointGraphics, BillboardGraphics, EllipseGraphics, PolylineDashMaterialProperty, CzmlDataSource } from 'cesium';
+import { Cartes, Entity as Entity$1, ProjectViewTile, ENVIRONMENT, Calculator, ClientFile, EntityLod, EntityTag, EntityType, LRUCache, ObjectUtils, Style, Carto, Geometry as Geometry$1, Api, MenuItem, ProjectView, ProjectViewBookmark, Tileset, ZoomControl, Bounds, Color as Color$1, BruceEvent, EntityCoords, DataLab, DelayQueue, AccountConcept, RecordChangeFeed, BruceApi, EntityRelation, EntitySource, ProgramKey, ProjectViewLegacyTile, Camera, Account, AccountLimits, Session, UrlUtils, EntityAttachment, EntityAttachmentType, EntityAttribute, MathUtils, ProjectViewBookmarkGroup, EntityRelationType, EntityHistoricData } from 'bruce-models';
 
 /**
  * Ensures a number is returned from a given value.
@@ -9054,7 +9054,8 @@ var VisualsRegister;
                     entityId: rego.entityId,
                     menuItemId: rego.menuItemId,
                     doUpdate: false,
-                    requestRender: false
+                    requestRender: false,
+                    keepVisual: rego.visual
                 });
             }
             const entityId = rego.entityId;
@@ -9347,7 +9348,9 @@ var VisualsRegister;
                     EntityLabel.Detatch({
                         rego
                     });
-                    if (doRemove != false) {
+                    // Never tear down the graphic the caller is registering: the renderers hand back
+                    // the same object when they reuse it, so removing it here destroys what replaces it.
+                    if (doRemove != false && rego.visual !== params.keepVisual) {
                         removeEntity(this.viewer, rego.visual);
                     }
                     rego.visual = null;
@@ -9401,7 +9404,9 @@ var VisualsRegister;
                     EntityLabel.Detatch({
                         rego
                     });
-                    if (doRemove != false) {
+                    // Never tear down the graphic the caller is registering: the renderers hand back
+                    // the same object when they reuse it, so removing it here destroys what replaces it.
+                    if (doRemove != false && rego.visual !== params.keepVisual) {
                         removeEntity(this.viewer, rego.visual);
                     }
                     rego.visual = null;
@@ -10721,6 +10726,468 @@ class PointClustering {
     }
 }
 
+/**
+ * How often a historic refresh is worth running, and which Entities it should ask about first.
+ *
+ * A handful of tracked vehicles can afford to re-read on almost every clock tick. Thousands of
+ * parcels cannot, and refreshing them that often was never buying anything since the answer barely
+ * changes between ticks.
+ */
+var HistoricFetchOrder;
+(function (HistoricFetchOrder) {
+    // The cadence for a set small enough that latency is what the user notices.
+    HistoricFetchOrder.MIN_INTERVAL_MS = 250;
+    // The cadence for a set large enough that the request itself is what the user notices.
+    HistoricFetchOrder.MAX_INTERVAL_MS = 10000;
+    // Below this many Entities the cadence stays at its fastest.
+    HistoricFetchOrder.SMALL_SET = 30;
+    // At and above this many it stays at its slowest.
+    HistoricFetchOrder.LARGE_SET = 5000;
+    /**
+     * Returns how long to wait between historic refreshes for a set of this size.
+     */
+    function IntervalFor(entityCount, minMs = HistoricFetchOrder.MIN_INTERVAL_MS, maxMs = HistoricFetchOrder.MAX_INTERVAL_MS) {
+        if (!(entityCount > HistoricFetchOrder.SMALL_SET)) {
+            return minMs;
+        }
+        if (entityCount >= HistoricFetchOrder.LARGE_SET) {
+            return maxMs;
+        }
+        // Log scaled, so going from 30 to 300 Entities costs more than going from 3000 to 5000.
+        const progress = Math.log(entityCount / HistoricFetchOrder.SMALL_SET) / Math.log(HistoricFetchOrder.LARGE_SET / HistoricFetchOrder.SMALL_SET);
+        return Math.round(minMs + ((maxMs - minMs) * progress));
+    }
+    HistoricFetchOrder.IntervalFor = IntervalFor;
+    /**
+     * Returns the Entities grouped into bands by distance from the camera, nearest band first.
+     *
+     * Bands rather than a true sort, so a small camera move does not reshuffle the whole queue and
+     * restart it. What the user is looking at resolves first either way.
+     */
+    function ByCameraDistance(params) {
+        var _a;
+        const { viewer, entities } = params;
+        const bands = params.bands || [500, 2000, 10000, 50000];
+        if (!(entities === null || entities === void 0 ? void 0 : entities.length)) {
+            return [];
+        }
+        const cameraPos = (_a = viewer === null || viewer === void 0 ? void 0 : viewer.camera) === null || _a === void 0 ? void 0 : _a.position;
+        if (!cameraPos) {
+            return [entities];
+        }
+        // One band past the named bounds, for everything beyond the last of them.
+        const banded = bands.map(() => []).concat([[]]);
+        for (const entity of entities) {
+            const pos = SafePos(entity, viewer);
+            if (!pos) {
+                banded[banded.length - 1].push(entity);
+                continue;
+            }
+            const distance = Cartesian3.distance(cameraPos, pos);
+            let index = bands.findIndex(bound => distance <= bound);
+            if (index < 0) {
+                index = banded.length - 1;
+            }
+            banded[index].push(entity);
+        }
+        return banded.filter(band => band.length > 0);
+    }
+    HistoricFetchOrder.ByCameraDistance = ByCameraDistance;
+    /*
+     * Returns an Entity's world position, or null when it has none to place it by.
+     */
+    function SafePos(entity, viewer) {
+        try {
+            const pos = EntityUtils.GetPos({
+                entity: entity,
+                viewer: viewer,
+                allowRendered: true
+            });
+            if (!pos || isNaN(pos.x) || isNaN(pos.y) || isNaN(pos.z)) {
+                return null;
+            }
+            return pos;
+        }
+        catch {
+            return null;
+        }
+    }
+})(HistoricFetchOrder || (HistoricFetchOrder = {}));
+/**
+ * Decides what slice of history is worth fetching for the clock as it is currently moving.
+ */
+var HistoricFetchPlan;
+(function (HistoricFetchPlan) {
+    // How many seconds of playback the detail window tries to stay ahead by.
+    HistoricFetchPlan.DEFAULT_LEAD_SECONDS = 10;
+    // The detail window never shrinks below this, so a paused clock still has something around it.
+    HistoricFetchPlan.DEFAULT_MIN_DETAIL_MS = 60 * 1000;
+    // Nor grows past it, which is what stops a fast scrub asking for the whole archive.
+    HistoricFetchPlan.DEFAULT_MAX_DETAIL_MS = 6 * 60 * 60 * 1000;
+    // Records the coarse pass may spend describing the whole range.
+    HistoricFetchPlan.DEFAULT_SAMPLE = 200;
+    /*
+     * Returns how wide the detail window should be for the rate the clock is moving at.
+     */
+    function DetailSpanFor(trajectory, leadSeconds, minMs, maxMs) {
+        const rate = Math.abs((trajectory === null || trajectory === void 0 ? void 0 : trajectory.ratePerSecondMs) || 0);
+        const span = rate * leadSeconds;
+        if (!(span > minMs)) {
+            return minMs;
+        }
+        return Math.min(span, maxMs);
+    }
+    HistoricFetchPlan.DetailSpanFor = DetailSpanFor;
+    /**
+     * Returns the detail window and the coarse pass for the clock as it stands.
+     */
+    function Plan(params) {
+        var _a;
+        const { currentTime, windowStart, windowStop, trajectory, leadSeconds = HistoricFetchPlan.DEFAULT_LEAD_SECONDS, minDetailMs = HistoricFetchPlan.DEFAULT_MIN_DETAIL_MS, maxDetailMs = HistoricFetchPlan.DEFAULT_MAX_DETAIL_MS, sample = HistoricFetchPlan.DEFAULT_SAMPLE } = params;
+        if (!(windowStop > windowStart)) {
+            return { detail: null, coarse: null };
+        }
+        // A range that fits the detail budget has nothing worth sampling: reading it whole is both
+        // cheaper than two requests and better than an approximation of it.
+        if ((windowStop - windowStart) <= maxDetailMs) {
+            return { detail: { start: windowStart, stop: windowStop }, coarse: null };
+        }
+        const span = DetailSpanFor(trajectory, leadSeconds, minDetailMs, maxDetailMs);
+        const direction = (_a = trajectory === null || trajectory === void 0 ? void 0 : trajectory.direction) !== null && _a !== void 0 ? _a : 0;
+        // Time running forward only ever reveals what is ahead, so the window leads rather than centres.
+        // A little is still kept behind so a record just passed can still be interpolated from.
+        const behind = direction === 0 ? span / 2 : span * 0.2;
+        const ahead = direction === 0 ? span / 2 : span * 0.8;
+        let start = direction < 0 ? currentTime - ahead : currentTime - behind;
+        let stop = direction < 0 ? currentTime + behind : currentTime + ahead;
+        start = Math.max(windowStart, start);
+        stop = Math.min(windowStop, stop);
+        if (!(stop > start)) {
+            return { detail: null, coarse: { start: windowStart, stop: windowStop, sample } };
+        }
+        const detail = { start, stop };
+        // Nothing to be coarse about once the detail window is the whole range.
+        if (start <= windowStart && stop >= windowStop) {
+            return { detail, coarse: null };
+        }
+        return { detail, coarse: { start: windowStart, stop: windowStop, sample } };
+    }
+    HistoricFetchPlan.Plan = Plan;
+    /**
+     * Tracks which way the clock is moving and how fast, from the times it is observed at.
+     * Playback and a user dragging the timeline both look the same here, which is the point.
+     */
+    class TrajectoryTracker {
+        // Smooths the rate so one slow frame does not collapse the window.
+        constructor(smoothing = 0.4) {
+            this.smoothing = smoothing;
+            this.lastTime = null;
+            this.lastObservedAt = null;
+            this.direction = 0;
+            this.ratePerSecondMs = 0;
+        }
+        /**
+         * Records where the clock is now. observedAt is the wall clock, in milliseconds.
+         */
+        Observe(sceneTime, observedAt) {
+            if (this.lastTime == null) {
+                this.lastTime = sceneTime;
+                this.lastObservedAt = observedAt;
+                return;
+            }
+            const elapsed = observedAt - this.lastObservedAt;
+            const moved = sceneTime - this.lastTime;
+            this.lastTime = sceneTime;
+            this.lastObservedAt = observedAt;
+            if (!(elapsed > 0)) {
+                return;
+            }
+            if (moved === 0) {
+                this.direction = 0;
+                this.ratePerSecondMs = 0;
+                return;
+            }
+            this.direction = moved > 0 ? 1 : -1;
+            const rate = Math.abs(moved) / (elapsed / 1000);
+            this.ratePerSecondMs = this.ratePerSecondMs === 0
+                ? rate
+                : (this.ratePerSecondMs * (1 - this.smoothing)) + (rate * this.smoothing);
+        }
+        Get() {
+            return { direction: this.direction, ratePerSecondMs: this.ratePerSecondMs };
+        }
+        Reset() {
+            this.lastTime = null;
+            this.lastObservedAt = null;
+            this.direction = 0;
+            this.ratePerSecondMs = 0;
+        }
+    }
+    HistoricFetchPlan.TrajectoryTracker = TrajectoryTracker;
+})(HistoricFetchPlan || (HistoricFetchPlan = {}));
+/**
+ * Tracks which time ranges of historic data have already been requested, and the records they
+ * returned, so moving the clock only fetches the part that is genuinely new.
+ *
+ * Coverage is tracked by the ranges that were asked for, not by the timestamps that came back. A
+ * window holding no records is still covered, otherwise an empty stretch is re-requested forever.
+ */
+class HistoricRangeCache {
+    // Ranges this far apart are treated as one, so a scrub does not leave a trail of slivers.
+    constructor(mergeToleranceMs = 60000) {
+        this.mergeToleranceMs = mergeToleranceMs;
+        // Requested ranges, kept sorted and non-overlapping.
+        this.held = [];
+        // Ranges covered only by a sampled read, which describe their span without holding every record.
+        this.heldCoarse = [];
+        this.records = {};
+    }
+    /**
+     * Returns the parts of the window that have not been requested yet.
+     */
+    MissingRanges(start, stop) {
+        if (!(stop > start)) {
+            return [];
+        }
+        const missing = [];
+        let cursor = start;
+        for (const range of this.held) {
+            if (range.stop <= cursor) {
+                continue;
+            }
+            if (range.start >= stop) {
+                break;
+            }
+            if (range.start > cursor) {
+                missing.push({ start: cursor, stop: Math.min(range.start, stop) });
+            }
+            cursor = Math.max(cursor, range.stop);
+            if (cursor >= stop) {
+                break;
+            }
+        }
+        if (cursor < stop) {
+            missing.push({ start: cursor, stop: stop });
+        }
+        return this.mergeAdjacent(missing);
+    }
+    /**
+     * Marks a range as requested and merges the records it returned into what is already held.
+     */
+    Absorb(start, stop, recordsByIds, coarse = false) {
+        if (stop > start) {
+            if (coarse) {
+                this.heldCoarse = this.mergeAdjacent([...this.heldCoarse, { start, stop }].sort((a, b) => a.start - b.start));
+            }
+            else {
+                this.held = this.mergeAdjacent([...this.held, { start, stop }].sort((a, b) => a.start - b.start));
+            }
+        }
+        if (!recordsByIds) {
+            return;
+        }
+        for (const entityId of Object.keys(recordsByIds)) {
+            const incoming = recordsByIds[entityId] || [];
+            const current = this.records[entityId] || [];
+            // Keyed by instant so a range fetched twice cannot double up its records.
+            const byInstant = new Map();
+            for (const record of current) {
+                byInstant.set(new Date(record.dateTime).getTime(), record);
+            }
+            for (const record of incoming) {
+                byInstant.set(new Date(record.dateTime).getTime(), record);
+            }
+            this.records[entityId] = Array.from(byInstant.values())
+                .sort((a, b) => new Date(a.dateTime).getTime() - new Date(b.dateTime).getTime());
+        }
+    }
+    GetRecords() {
+        return this.records;
+    }
+    /**
+     * Returns whether the window is already covered in full.
+     */
+    Covers(start, stop) {
+        return this.MissingRanges(start, stop).length === 0;
+    }
+    /**
+     * Returns whether a sampled pass already describes the window.
+     */
+    CoversCoarse(start, stop) {
+        if (!(stop > start)) {
+            return true;
+        }
+        return this.heldCoarse.some(range => range.start <= start && range.stop >= stop);
+    }
+    Clear() {
+        this.held = [];
+        this.heldCoarse = [];
+        this.records = {};
+    }
+    mergeAdjacent(ranges) {
+        if (ranges.length <= 1) {
+            return ranges;
+        }
+        const sorted = [...ranges].sort((a, b) => a.start - b.start);
+        const merged = [];
+        let current = { ...sorted[0] };
+        for (let i = 1; i < sorted.length; i++) {
+            const next = sorted[i];
+            if (next.start - current.stop <= this.mergeToleranceMs) {
+                current.stop = Math.max(current.stop, next.stop);
+            }
+            else {
+                merged.push(current);
+                current = { ...next };
+            }
+        }
+        merged.push(current);
+        return merged;
+    }
+}
+/**
+ * Pulls historic records for the visible clock range: what to ask for, in what order, and what has
+ * already been asked for.
+ */
+class HistoricGatherer {
+    constructor(params) {
+        this.params = params;
+        this.trajectory = new HistoricFetchPlan.TrajectoryTracker();
+        // Range key to the request in flight for it, so the same range is never asked for twice at once.
+        this.inFlight = new Map();
+        this.disposed = false;
+        this.cache = new HistoricRangeCache();
+    }
+    get Records() {
+        return this.cache.GetRecords();
+    }
+    Clear() {
+        this.cache.Clear();
+        this.trajectory.Reset();
+        this.inFlight.clear();
+    }
+    Dispose() {
+        this.disposed = true;
+        this.Clear();
+    }
+    /**
+     * Returns how long to wait between refreshes for a set of this size.
+     */
+    IntervalFor(entityCount) {
+        return HistoricFetchOrder.IntervalFor(entityCount);
+    }
+    /**
+     * Fetches whatever the current clock range needs that is not already held.
+     * Returns whether anything was requested, alongside every record held for these Entities.
+     */
+    async Gather(entities) {
+        var _a;
+        if (this.disposed || !(entities === null || entities === void 0 ? void 0 : entities.length)) {
+            return { fetched: false, recordsByIds: this.cache.GetRecords() };
+        }
+        const { viewer } = this.params;
+        const windowStart = new Date(viewer.clock.startTime.toString()).getTime();
+        const windowStop = new Date(viewer.clock.stopTime.toString()).getTime();
+        const currentTime = new Date(viewer.clock.currentTime.toString()).getTime();
+        this.trajectory.Observe(currentTime, Date.now());
+        const liveEdge = ViewUtils.GetTimeDetails({ viewer }).isLive ? currentTime : null;
+        const liveTail = (_a = this.params.liveTailMs) !== null && _a !== void 0 ? _a : HistoricGatherer.LIVE_TAIL_MS;
+        const plan = HistoricFetchPlan.Plan({
+            currentTime,
+            windowStart,
+            windowStop,
+            trajectory: this.trajectory.Get(),
+            sample: this.params.sample
+        });
+        let fetched = false;
+        if (plan.coarse && !this.cache.CoversCoarse(plan.coarse.start, plan.coarse.stop)) {
+            const records = await this.request(plan.coarse.start, plan.coarse.stop, entities, plan.coarse.sample);
+            if (this.disposed) {
+                return { fetched, recordsByIds: this.cache.GetRecords() };
+            }
+            this.cache.Absorb(plan.coarse.start, this.holdTo(plan.coarse.stop, liveEdge, liveTail), records, true);
+            fetched = true;
+        }
+        if (plan.detail) {
+            const bands = entities.length > HistoricFetchOrder.SMALL_SET
+                ? HistoricFetchOrder.ByCameraDistance({ viewer, entities })
+                : [entities];
+            for (const range of this.cache.MissingRanges(plan.detail.start, plan.detail.stop)) {
+                if (this.disposed) {
+                    break;
+                }
+                for (const band of bands) {
+                    if (this.disposed) {
+                        break;
+                    }
+                    const records = await this.request(range.start, range.stop, band, 0);
+                    if (this.disposed) {
+                        break;
+                    }
+                    // Records land as each band arrives, while the range is only marked held once
+                    // every band has been asked for.
+                    this.cache.Absorb(0, 0, records);
+                    fetched = true;
+                }
+                if (this.disposed) {
+                    break;
+                }
+                const heldTo = this.holdTo(range.stop, liveEdge, liveTail);
+                if (heldTo > range.start) {
+                    this.cache.Absorb(range.start, heldTo, {});
+                }
+            }
+        }
+        return { fetched, recordsByIds: this.cache.GetRecords() };
+    }
+    /*
+     * Returns how much of a range that was just read may be marked as held.
+     */
+    holdTo(stop, liveEdge, liveTailMs) {
+        if (liveEdge == null) {
+            return stop;
+        }
+        return Math.min(stop, liveEdge - liveTailMs);
+    }
+    /*
+     * Reads one range, joining a request already in flight for it rather than repeating it.
+     */
+    request(start, stop, entities, sample) {
+        var _a;
+        const padding = (_a = this.params.paddingMs) !== null && _a !== void 0 ? _a : 0;
+        const dateTimeFrom = new Date(start - padding).toISOString();
+        const dateTimeTo = new Date(stop + padding).toISOString();
+        const entityIds = entities.map(x => { var _a; return (_a = x.Bruce) === null || _a === void 0 ? void 0 : _a.ID; }).filter(x => !!x);
+        const key = `${dateTimeFrom}|${dateTimeTo}|${sample}|${entityIds.join(",")}`;
+        const existing = this.inFlight.get(key);
+        if (existing) {
+            return existing;
+        }
+        const prom = EntityHistoricData.GetRecordsByEntity({
+            attrKey: this.params.getAttrKey(),
+            dateTimeFrom,
+            dateTimeTo,
+            entityIds,
+            sample: sample > 0 ? sample : undefined,
+            api: this.params.getApi()
+        }).then((res) => {
+            const records = res.recordsByIds || {};
+            if (!this.disposed && this.params.onRecords) {
+                this.params.onRecords(records);
+            }
+            return records;
+        }).finally(() => {
+            this.inFlight.delete(key);
+        });
+        this.inFlight.set(key, prom);
+        return prom;
+    }
+}
+// How far back from the live edge is left unheld, so a record written moments ago still falls in
+// something that gets asked for again. It has to outlast a write, a commit and a refresh, plus
+// whatever the writer's clock and this one disagree by.
+HistoricGatherer.LIVE_TAIL_MS = 15000;
+
 const BATCH_SIZE = 500;
 const CHECK_BATCH_SIZE = 250;
 function getValue$2(viewer, obj) {
@@ -10810,6 +11277,13 @@ var EntitiesRenderManager;
             this.item = item;
             this.visualsManager = visualsManager;
             this.onSeriesDiscovered = onSeriesDiscovered;
+            this.historicGatherer = new HistoricGatherer({
+                viewer: this.viewer,
+                getApi: () => this.apiGetter.getApi(),
+                getAttrKey: () => { var _a; return (_a = this.item.BruceEntity) === null || _a === void 0 ? void 0 : _a.historicAttrKey; },
+                // A second either side, to take in records sitting exactly on the boundary.
+                paddingMs: 1000
+            });
             this.useGeojson = item.renderAsGeojson == true;
             if (item.enableClustering) {
                 this.clustering = new PointClustering(this.visualsManager, this.item.id);
@@ -11773,6 +12247,13 @@ var EntitiesRenderManager;
             this.renderAsIndividualsChain = next;
             return next;
         }
+        /**
+         * Returns the historic records to interpolate between, fetching only what is not already held.
+         */
+        async gatherHistoric(entities) {
+            const { recordsByIds } = await this.historicGatherer.Gather(entities);
+            return recordsByIds;
+        }
         async doRenderAsIndividuals(entities, force = false) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
             // When live we just want to show the latest pos.
@@ -11787,19 +12268,7 @@ var EntitiesRenderManager;
             const isHistoric = ((_a = this.item.BruceEntity) === null || _a === void 0 ? void 0 : _a.historic) || ((_b = this.item.BruceEntity) === null || _b === void 0 ? void 0 : _b.historicAttrKey);
             // If we're interpolating then we request additional records to quickly swap between.
             if (!isLive && isHistoric && entities.length && this.item.historicInterpolation) {
-                // We'll add/remove 1 second to ensure we cover all records.
-                const startTmp = JulianDate.toDate(this.viewer.clock.startTime);
-                const stopTmp = JulianDate.toDate(this.viewer.clock.stopTime);
-                const startStr = new Date(startTmp.getTime() - 1000).toISOString();
-                const stopStr = new Date(stopTmp.getTime() + 1000).toISOString();
-                const historicData = await EntityHistoricData.GetList({
-                    attrKey: this.item.BruceEntity.historicAttrKey,
-                    dateTimeFrom: startStr,
-                    dateTimeTo: stopStr,
-                    entityIds: entities.map(x => x.Bruce.ID),
-                    api: this.apiGetter.getApi()
-                });
-                entitiesHistoric = historicData.recordsByIds;
+                entitiesHistoric = await this.gatherHistoric(entities);
             }
             if (this.disposed) {
                 this.doDispose();
@@ -12924,6 +13393,13 @@ var EntitiesIdsRenderManager;
             this.monitor = monitor;
             this.item = item;
             this.visualsManager = visualsManager;
+            this.historicGatherer = new HistoricGatherer({
+                viewer: this.viewer,
+                getApi: () => this.apiGetter.getApi(),
+                getAttrKey: () => { var _a; return (_a = this.item.BruceEntity) === null || _a === void 0 ? void 0 : _a.historicAttrKey; },
+                // Padding either side of a requested range, for clock desync between us and the server.
+                paddingMs: 15000
+            });
             if (this.item.enableClustering) {
                 this.clustering = new PointClustering(visualsManager, this.item.id, (_a = this.item) === null || _a === void 0 ? void 0 : _a.clustering);
             }
@@ -13273,138 +13749,22 @@ var EntitiesIdsRenderManager;
          * @param entities
          */
         async getHistoricInfo(entities) {
-            // Time padding in milliseconds (15 seconds).
-            // Helps account for desync between client and server.
-            const TIME_PADDING_MS = 15000;
-            const minDateTimeStr = this.viewer.clock.startTime.toString();
-            const maxDateTimeStr = this.viewer.clock.stopTime.toString();
-            const minDateTime = new Date(minDateTimeStr).getTime();
-            const maxDateTime = new Date(maxDateTimeStr).getTime();
-            const tDetails = ViewUtils.GetTimeDetails({
-                viewer: this.viewer,
-            });
-            const isLive = tDetails.isLive;
-            let rangesToRequest = [{
-                    start: minDateTime,
-                    stop: maxDateTime
-                }];
-            // If we already have cached data, determine what ranges we're missing.
-            if (Object.keys(this.entitiesHistoric).length >= entities.length) {
-                let foundMinDateTime = null;
-                let foundMaxDateTime = null;
-                // Find the min/max based on cached data.
-                // Since we set the values sorted, we only have to check the first and last records for each entity.
-                for (const entityId of Object.keys(this.entitiesHistoric)) {
-                    const records = this.entitiesHistoric[entityId] || [];
-                    if (records.length) {
-                        const dateTime = new Date(records[0].dateTime).getTime();
-                        if (foundMinDateTime == null || dateTime < foundMinDateTime) {
-                            foundMinDateTime = dateTime;
-                        }
-                        const dateTime2 = new Date(records[records.length - 1].dateTime).getTime();
-                        if (foundMaxDateTime == null || dateTime2 > foundMaxDateTime) {
-                            foundMaxDateTime = dateTime2;
-                        }
-                    }
-                }
-                // Complete overlap - we already have all the data.
-                if (foundMinDateTime != null && foundMaxDateTime != null && foundMinDateTime <= minDateTime && foundMaxDateTime >= maxDateTime) {
-                    return [false, this.entitiesHistoric];
-                }
-                // Calculate missing ranges.
-                rangesToRequest = [];
-                // Check if we need data before our cached range.
-                if (foundMinDateTime != null && foundMinDateTime > minDateTime) {
-                    // When live we focus on getting the next range rather than old data.
-                    // Ends up being one less request to perform every second.
-                    if (!isLive || foundMinDateTime == null) {
-                        rangesToRequest.push({
-                            start: minDateTime,
-                            stop: new Date(foundMinDateTime).getTime()
-                        });
-                    }
-                }
-                // Check if we need data after our cached range.
-                if (foundMaxDateTime != null && foundMaxDateTime < maxDateTime) {
-                    rangesToRequest.push({
-                        start: new Date(foundMaxDateTime).getTime(),
-                        stop: maxDateTime
-                    });
-                }
-                // If the ranges to request are within a tolerance, combine them.
-                if (rangesToRequest.length > 1) {
-                    const TOLERANCE_MS = 60000; // 1 minute.
-                    let currentRange = rangesToRequest[0];
-                    for (let i = 1; i < rangesToRequest.length; i++) {
-                        const nextRange = rangesToRequest[i];
-                        if (nextRange.start - currentRange.stop <= TOLERANCE_MS) {
-                            currentRange.stop = nextRange.stop;
-                        }
-                        else {
-                            currentRange = nextRange;
-                        }
-                    }
-                }
-            }
-            const entityIds = entities.map(x => x.Bruce.ID);
-            const combined = { ...this.entitiesHistoric };
-            // Make requests for each missing range
-            for (const range of rangesToRequest) {
-                if (this.disposed) {
-                    break;
-                }
-                const start = new Date(range.start - TIME_PADDING_MS);
-                const stop = new Date(range.stop + TIME_PADDING_MS);
-                const historicData = await EntityHistoricData.GetList({
-                    attrKey: this.item.BruceEntity.historicAttrKey,
-                    dateTimeFrom: start.toISOString(),
-                    dateTimeTo: stop.toISOString(),
-                    entityIds: entityIds,
-                    api: this.apiGetter.getApi()
-                });
-                if (this.disposed) {
-                    break;
-                }
-                // Merge the new data with existing data
-                const records = historicData.recordsByIds;
-                const recordsIds = Object.keys(records);
-                for (let i = 0; i < recordsIds.length; i++) {
-                    const entityId = recordsIds[i];
-                    const latest = records[entityId] || [];
-                    const current = combined[entityId] || [];
-                    // Use a Map to de-duplicate by timestamp.
-                    const tmp = new Map();
-                    for (let j = 0; j < current.length; j++) {
-                        const record = current[j];
-                        const dateTime = new Date(record.dateTime).getTime();
-                        tmp.set(dateTime, record);
-                    }
-                    for (let j = 0; j < latest.length; j++) {
-                        const record = latest[j];
-                        const dateTime = new Date(record.dateTime).getTime();
-                        tmp.set(dateTime, record);
-                    }
-                    // Convert to array and sort by date.
-                    const sorted = Array.from(tmp.values()).sort((a, b) => {
-                        return new Date(a.dateTime).getTime() - new Date(b.dateTime).getTime();
-                    });
-                    combined[entityId] = sorted;
-                }
-            }
+            const { fetched, recordsByIds } = await this.historicGatherer.Gather(entities);
             if (!this.disposed) {
-                this.entitiesHistoric = combined;
+                this.entitiesHistoric = recordsByIds;
             }
-            return [rangesToRequest.length > 0, combined];
+            return [fetched, recordsByIds];
         }
         viewerDateTimeSub() {
             var _a, _b;
             if ((!((_a = this.item.BruceEntity) === null || _a === void 0 ? void 0 : _a.historic) && !((_b = this.item.BruceEntity) === null || _b === void 0 ? void 0 : _b.historicAttrKey)) || this.viewerDateTimeChangeRemoval) {
                 return;
             }
-            const THROTTLE_INTERVAL = 2000;
+            // Scaled by how many Entities are on screen rather than fixed, since the cost of a refresh
+            // is the set size and a large set barely changes between ticks anyway.
             let queue = new DelayQueue(() => {
                 this.onGetterUpdate(Object.keys(this.renderedEntities));
-            }, THROTTLE_INTERVAL, true);
+            }, this.historicGatherer.IntervalFor(Object.keys(this.renderedEntities).length), true);
             let clockTickRemoval;
             let prevTick = this.viewer.clock.currentTime.toString();
             clockTickRemoval = this.viewer.clock.onTick.addEventListener(() => {
@@ -14096,6 +14456,9 @@ class TilesetStyler {
         // Indicates that we are retrieving historic records.
         // This means that the current scene's time is included in the request.
         this.historic = false;
+        // When false the Entity data is still gathered and the regos still updated, but no colour is
+        // applied. A historic item that did not ask for styling needs the first without the second.
+        this.applyStyles = true;
         this.reRenderState = new EntityReRenderMaintainState();
         // More expensive process.
         // When an Entity is styled, the rego is reviewed and updated if needed.
@@ -14132,13 +14495,16 @@ class TilesetStyler {
     }
     Init(params) {
         var _a, _b;
-        let { viewer, api, cTileset, fallbackStyleId, styleMapping, expandSources, menuItemId, register, scenario, historic } = params;
+        let { viewer, api, cTileset, fallbackStyleId, styleMapping, expandSources, menuItemId, register, scenario, historic, applyStyles } = params;
         this.viewer = viewer;
         this.api = api;
         this.cTileset = cTileset;
         this.register = register;
         this.menuItemId = menuItemId;
         this.historic = Boolean(historic);
+        if (applyStyles != null) {
+            this.applyStyles = Boolean(applyStyles);
+        }
         if (expandSources != null) {
             this.expandSources = expandSources;
         }
@@ -14632,33 +14998,31 @@ class TilesetStyler {
             return;
         }
         const { settings: style, styleId: resolvedStyleId } = this.getTilesetFeatureStyleWithId(rego.entityTypeId);
-        const fillColorTrace = (style && ((_a = style.modelStyle) === null || _a === void 0 ? void 0 : _a.fillColor)) ? Calculator.TraceGetColor(style.modelStyle.fillColor, data, tags) : { value: null, effective: null };
-        const bColor = fillColorTrace.value;
-        let cColor = null;
-        if (bColor == null) {
-            cColor = Color.WHITE;
-        }
-        else {
-            cColor = colorToCColor$3(bColor);
-        }
+        const fillColorTrace = (this.applyStyles && style && ((_a = style.modelStyle) === null || _a === void 0 ? void 0 : _a.fillColor)) ? Calculator.TraceGetColor(style.modelStyle.fillColor, data, tags) : { value: null, effective: null };
+        // Without styling the feature keeps whatever the tileset baked in. Falling through would paint
+        // it the default white, which is a visible change for an item that only asked for historic.
         const override = this.overrideFeatureColor.get(rego.entityId) == true;
-        CesiumEntityStyler.SetDefaultColor({
-            color: cColor,
-            entity: visual,
-            viewer: this.viewer,
-            override: override
-        });
-        this.overrideFeatureColor.set(rego.entityId, true);
-        if (((_b = data === null || data === void 0 ? void 0 : data.Bruce) === null || _b === void 0 ? void 0 : _b.InternalID) != null) {
+        if (this.applyStyles) {
+            const bColor = fillColorTrace.value;
+            const cColor = bColor == null ? Color.WHITE : colorToCColor$3(bColor);
+            CesiumEntityStyler.SetDefaultColor({
+                color: cColor,
+                entity: visual,
+                viewer: this.viewer,
+                override: override
+            });
+            this.overrideFeatureColor.set(rego.entityId, true);
+            if (resolvedStyleId != null) {
+                rego.styleId = resolvedStyleId;
+            }
+            rego.styleEffective = (_b = StyleEffective.Combine([
+                { key: "color", effective: fillColorTrace.effective }
+            ])) !== null && _b !== void 0 ? _b : rego.styleEffective;
+        }
+        if (((_c = data === null || data === void 0 ? void 0 : data.Bruce) === null || _c === void 0 ? void 0 : _c.InternalID) != null) {
             rego.internalId = data.Bruce.InternalID;
             this.styledByInternalId.set(data.Bruce.InternalID, rego.entityId);
         }
-        if (resolvedStyleId != null) {
-            rego.styleId = resolvedStyleId;
-        }
-        rego.styleEffective = (_c = StyleEffective.Combine([
-            { key: "color", effective: fillColorTrace.effective }
-        ])) !== null && _c !== void 0 ? _c : rego.styleEffective;
         this.styledEntityIds.set(rego.entityId, true);
         this._styleProgressQueue.Call();
         // Since we only need to update it for scenarios right now.
@@ -15629,6 +15993,7 @@ var TilesetCadRenderManager;
             // Series of points to help interpolate movement when the timeline changes.
             this.historicPossesInitialLoaded = false;
             this.historicAnimation = null;
+            this.historicGatherer = null;
             this.historicPossesLoadingProm = null;
             // Queue of loaded in features that we haven't processed yet.
             this.featureQueue = [];
@@ -16666,120 +17031,41 @@ var TilesetCadRenderManager;
             const api = this.getters.GetBruceApi({
                 accountId: accountId
             });
-            // Time padding in milliseconds (15 seconds).
-            // Helps account for desync between client and server.
-            const TIME_PADDING_MS = 15000;
-            // 'start-stop' time string that maps to a pending request.
-            // Helps us avoid repeated requests that are the same.
-            const pendingRequests = new Map();
-            /**
-             * Returns a list of historic positions for a given time range.
-             * @param startStr
-             * @param stopStr
-             * @returns
+            // The root Entity is the only one here, so nothing is banded and the plan sees a set of one.
+            const rootEntity = { Bruce: { ID: this.rootId } };
+            /*
+             * Turns historic records into the animated positions this tileset moves along.
              */
-            const getPossesForRange = async (startStr, stopStr) => {
-                const requestKey = `${startStr}-${stopStr}`;
-                if (pendingRequests.has(requestKey)) {
-                    return pendingRequests.get(requestKey);
-                }
-                const requestPromise = new Promise(async (res) => {
-                    try {
-                        const historicData = await EntityHistoricData.GetList({
-                            attrKey: null,
-                            dateTimeFrom: startStr,
-                            dateTimeTo: stopStr,
-                            entityIds: [this.rootId],
-                            api: api
-                        });
-                        const posses = CesiumAnimatedProperty.GetSeriesPossesForHistoricEntity(this.viewer, HeightReference.NONE, HeightReference.CLAMP_TO_GROUND, historicData.recordsByIds[this.rootId]);
-                        res(posses);
-                    }
-                    catch (e) {
-                        console.error(e);
-                        res([]);
-                    }
-                    finally {
-                        pendingRequests.delete(requestKey);
-                    }
-                });
-                pendingRequests.set(requestKey, requestPromise);
-                return requestPromise;
+            const toPosses = (records) => {
+                return CesiumAnimatedProperty.GetSeriesPossesForHistoricEntity(this.viewer, HeightReference.NONE, HeightReference.CLAMP_TO_GROUND, records);
             };
+            this.historicGatherer = new HistoricGatherer({
+                viewer: this.viewer,
+                getApi: () => api,
+                // The assembly root snapshots the whole Entity, so no key narrows it.
+                getAttrKey: () => null,
+                // Time padding in milliseconds (15 seconds).
+                // Helps account for desync between client and server.
+                paddingMs: 15000,
+                onRecords: (recordsByIds) => {
+                    var _a;
+                    const records = recordsByIds[this.rootId];
+                    if (!(records === null || records === void 0 ? void 0 : records.length) || !((_a = this.historicAnimation) === null || _a === void 0 ? void 0 : _a.addPositions)) {
+                        return;
+                    }
+                    this.historicAnimation.addPositions(toPosses(records));
+                }
+            });
             /**
-             * Checks if the current timeline range is not fully loaded and requests the difference.
-             * This will call getPossesForRange() if it needs more data.
+             * Fetches whatever the current timeline range needs that is not already held.
+             * Positions reach the animation through the gatherer's callback as each batch lands.
              * @returns
              */
             const checkTimelineRange = async () => {
-                // Current timeline range.
-                const minDateTime = new Date(this.viewer.clock.startTime.toString()).getTime();
-                const maxDateTime = new Date(this.viewer.clock.stopTime.toString()).getTime();
-                // What we have loaded.
-                const range = this.historicAnimation.getDateRange();
-                const foundMinDateTime = (range === null || range === void 0 ? void 0 : range.minDate) ? range.minDate.getTime() : null;
-                const foundMaxDateTime = (range === null || range === void 0 ? void 0 : range.maxDate) ? range.maxDate.getTime() : null;
-                // See if the current range is within the range we already have.
-                if (this.historicPossesInitialLoaded &&
-                    foundMinDateTime &&
-                    foundMaxDateTime &&
-                    minDateTime >= foundMinDateTime &&
-                    maxDateTime <= foundMaxDateTime) {
-                    return;
-                }
-                const tDetails = ViewUtils.GetTimeDetails({
-                    viewer: this.viewer,
-                });
-                const isLive = tDetails.isLive;
-                // See if the requested range is before or after the range we have.
-                const fetchBefore = !foundMinDateTime || (!isLive && minDateTime < foundMinDateTime);
-                const fetchAfter = !foundMaxDateTime || maxDateTime > foundMaxDateTime;
-                if (!fetchBefore && !fetchAfter) {
-                    // Already have the data we need.
+                if (this.disposed) {
                     return;
                 }
-                // No known range so we need to fetch the whole thing.
-                if (!foundMinDateTime || !foundMaxDateTime) {
-                    const startStr = new Date(minDateTime - TIME_PADDING_MS).toISOString();
-                    const stopStr = new Date(maxDateTime + TIME_PADDING_MS).toISOString();
-                    const newPositions = await getPossesForRange(startStr, stopStr);
-                    if (this.disposed) {
-                        return;
-                    }
-                    if (this.historicAnimation && this.historicAnimation.addPositions) {
-                        this.historicAnimation.addPositions(newPositions);
-                    }
-                }
-                else {
-                    // The data we want is before the range we've currently loaded.
-                    if (fetchBefore) {
-                        // Calculate the missing difference and request it.
-                        const startStr = new Date(minDateTime - TIME_PADDING_MS).toISOString();
-                        const stopStr = new Date(foundMinDateTime + TIME_PADDING_MS).toISOString();
-                        getPossesForRange(startStr, stopStr).then((newPositions) => {
-                            if (this.disposed) {
-                                return;
-                            }
-                            if (this.historicAnimation && this.historicAnimation.addPositions) {
-                                this.historicAnimation.addPositions(newPositions);
-                            }
-                        });
-                    }
-                    // The data we want is after the range we've currently loaded.
-                    if (fetchAfter) {
-                        // Calculate the missing difference and request it.
-                        const startStr = new Date(foundMaxDateTime - TIME_PADDING_MS).toISOString();
-                        const stopStr = new Date(maxDateTime + TIME_PADDING_MS).toISOString();
-                        getPossesForRange(startStr, stopStr).then((newPositions) => {
-                            if (this.disposed) {
-                                return;
-                            }
-                            if (this.historicAnimation && this.historicAnimation.addPositions) {
-                                this.historicAnimation.addPositions(newPositions);
-                            }
-                        });
-                    }
-                }
+                await this.historicGatherer.Gather([rootEntity]);
             };
             /**
              * Requests the initial set of historic positions for the timeline range.
@@ -16793,11 +17079,8 @@ var TilesetCadRenderManager;
                             res(false);
                             return;
                         }
-                        const startTmp = JulianDate.toDate(this.viewer.clock.startTime);
-                        const stopTmp = JulianDate.toDate(this.viewer.clock.stopTime);
-                        const startStr = new Date(startTmp.getTime() - 1000).toISOString();
-                        const stopStr = new Date(stopTmp.getTime() + 1000).toISOString();
-                        const positions = await getPossesForRange(startStr, stopStr);
+                        const { recordsByIds } = await this.historicGatherer.Gather([rootEntity]);
+                        const positions = toPosses(recordsByIds[this.rootId] || []);
                         if (this.disposed) {
                             res(false);
                             return;
@@ -19584,12 +19867,11 @@ var TilesetEntitiesRenderManager;
                     }
                     this.viewer.scene.requestRender();
                     TilesetRenderEngine.OnTilesetReady(this.cTileset).then(() => {
-                        var _a;
                         try {
                             if (this.disposed || this.viewer.isDestroyed()) {
                                 return;
                             }
-                            if (this.item.ApplyStyles) {
+                            if (Manager.NeedsStyler(this.item)) {
                                 const api = this.getters.GetBruceApi();
                                 this.styler.Init({
                                     viewer: this.viewer,
@@ -19600,7 +19882,8 @@ var TilesetEntitiesRenderManager;
                                     expandSources: false,
                                     menuItemId: this.item.id,
                                     register: this.visualsManager,
-                                    historic: (_a = this.item.BruceEntity) === null || _a === void 0 ? void 0 : _a.historic
+                                    historic: Manager.IsHistoric(this.item),
+                                    applyStyles: Boolean(this.item.ApplyStyles)
                                 });
                             }
                             this.onCTilesetLoad();
@@ -19807,6 +20090,19 @@ var TilesetEntitiesRenderManager;
         get HandoffKey() {
             return Manager.GetHandoffKey(this.item);
         }
+        /*
+         * Returns whether the item asks for Entities as they were at the scene time.
+         */
+        static IsHistoric(item) {
+            var _a, _b;
+            return Boolean(((_a = item === null || item === void 0 ? void 0 : item.BruceEntity) === null || _a === void 0 ? void 0 : _a.historic) || ((_b = item === null || item === void 0 ? void 0 : item.BruceEntity) === null || _b === void 0 ? void 0 : _b.historicAttrKey));
+        }
+        /*
+         * Returns whether the styler has to run, which it does for historic even without styling.
+         */
+        static NeedsStyler(item) {
+            return Boolean(item === null || item === void 0 ? void 0 : item.ApplyStyles) || Manager.IsHistoric(item);
+        }
         static GetHandoffKey(item) {
             var _a, _b;
             const tilesetId = (_a = item === null || item === void 0 ? void 0 : item.tileset) === null || _a === void 0 ? void 0 : _a.TilesetID;
@@ -19816,7 +20112,10 @@ var TilesetEntitiesRenderManager;
             const accountId = ((_b = item.tileset) === null || _b === void 0 ? void 0 : _b.ClientAccountID) || "";
             // Styled <-> unstyled has no cheap revert path, force a reload instead.
             const applyStyles = Boolean(item.ApplyStyles);
-            return `${accountId}:${tilesetId}:${applyStyles}`;
+            // Historic drives a different gather,
+            // so a handoff must not reuse a styler set up for the other mode.
+            const historic = Manager.IsHistoric(item);
+            return `${accountId}:${tilesetId}:${applyStyles}:${historic}`;
         }
         // Returns null (fall back to a normal Dispose()) if the tileset hasn't finished loading yet.
         PrepareHandoff() {
@@ -19856,7 +20155,6 @@ var TilesetEntitiesRenderManager;
         // Takes ownership of a PrepareHandoff() payload instead of loading via Init().
         // Then re-parents every already-registered rego to this menu item and re-runs styling.
         AdoptHandoff(payload) {
-            var _a;
             this.cTileset = payload.cTileset;
             this.tileset = payload.tileset;
             this.typeId = payload.typeId;
@@ -19888,7 +20186,7 @@ var TilesetEntitiesRenderManager;
                 toPriority: this.renderPriority,
                 requestRender: false
             });
-            if (this.item.ApplyStyles) {
+            if (Manager.NeedsStyler(this.item)) {
                 this.styler.Init({
                     viewer: this.viewer,
                     api: this.getters.GetBruceApi(),
@@ -19898,7 +20196,8 @@ var TilesetEntitiesRenderManager;
                     expandSources: false,
                     menuItemId: this.item.id,
                     register: this.visualsManager,
-                    historic: (_a = this.item.BruceEntity) === null || _a === void 0 ? void 0 : _a.historic
+                    historic: Manager.IsHistoric(this.item),
+                    applyStyles: Boolean(this.item.ApplyStyles)
                 });
                 this.queueHandoffRestyle(this.visualsManager.GetRegos({ menuItemId: this.item.id }));
             }
@@ -39989,6 +40288,107 @@ function ApplyGrayscaleColorMask(imageData, minColor, maxColor) {
         data[i + 3] = Math.round(srcAlpha * maskAlpha * 255);
     }
 }
+/**
+ * The colour a ramp gives a normalised value.
+ * @param sorted stops in ascending position, normalised into the texture's value range
+ */
+function SampleRamp(sorted, t) {
+    let upper = 0;
+    while (upper < sorted.length && sorted[upper].position < t) {
+        upper++;
+    }
+    if (upper === 0) {
+        return sorted[0].color;
+    }
+    if (upper >= sorted.length) {
+        return sorted[sorted.length - 1].color;
+    }
+    const a = sorted[upper - 1];
+    const b = sorted[upper];
+    const span = b.position - a.position;
+    // Equal positions are a hard step rather than a division by zero, which is how a band
+    // gets a crisp edge instead of a gradient into its neighbour.
+    const f = span > 0 ? (t - a.position) / span : 1;
+    return {
+        red: a.color.red + (b.color.red - a.color.red) * f,
+        green: a.color.green + (b.color.green - a.color.green) * f,
+        blue: a.color.blue + (b.color.blue - a.color.blue) * f,
+        alpha: a.color.alpha + (b.color.alpha - a.color.alpha) * f
+    };
+}
+/**
+ * A ramp baked into RGBA bytes, for a shader that cannot walk stops per fragment.
+ * @param steps entries in the lookup, each covering an equal slice of the value range
+ */
+function RampLookup(stops, low, high, steps = 256) {
+    const sorted = stops && stops.length > 0
+        ? stops.slice().sort((a, b) => a.position - b.position)
+        : null;
+    const out = new Uint8Array(steps * 4);
+    for (let i = 0; i < steps; i++) {
+        const t = steps > 1 ? i / (steps - 1) : 0;
+        const color = sorted
+            ? SampleRamp(sorted, t)
+            : {
+                red: low.red + (high.red - low.red) * t,
+                green: low.green + (high.green - low.green) * t,
+                blue: low.blue + (high.blue - low.blue) * t,
+                alpha: low.alpha + (high.alpha - low.alpha) * t
+            };
+        out[i * 4] = Math.round(color.red);
+        out[i * 4 + 1] = Math.round(color.green);
+        out[i * 4 + 2] = Math.round(color.blue);
+        out[i * 4 + 3] = Math.round(Math.min(1, Math.max(0, color.alpha)) * 255);
+    }
+    return out;
+}
+function ApplyGradientStops(imageData, stops) {
+    if (!stops || stops.length === 0) {
+        return;
+    }
+    const sorted = stops.slice().sort((a, b) => a.position - b.position);
+    const data = imageData.data;
+    for (let i = 0; i < data.length; i += 4) {
+        const t = data[i] / 255;
+        const color = SampleRamp(sorted, t);
+        data[i] = Math.round(color.red);
+        data[i + 1] = Math.round(color.green);
+        data[i + 2] = Math.round(color.blue);
+        const srcAlpha = data[i + 3] / 255;
+        data[i + 3] = Math.round(srcAlpha * color.alpha * 255);
+    }
+}
+/**
+ * Draws the texture's own cell grid into the tinted pixels.
+ *
+ * Drawn in texture space rather than screen space so it stays with the cells it describes and needs
+ * no per-frame work as the camera moves.
+ */
+function ApplyCellBorders(imageData, cellTexels, widthTexels, color) {
+    if (!(cellTexels > 0) || !(widthTexels > 0) || !color || color.alpha <= 0) {
+        return;
+    }
+    const { width, height, data } = imageData;
+    const edge = Math.max(1, Math.round(widthTexels));
+    for (let y = 0; y < height; y++) {
+        const onRow = (y % cellTexels) < edge;
+        for (let x = 0; x < width; x++) {
+            if (!onRow && (x % cellTexels) >= edge) {
+                continue;
+            }
+            const i = (y * width + x) * 4;
+            // Only where something is already drawn, so a border cannot invent coverage the data
+            // does not have.
+            if (data[i + 3] === 0) {
+                continue;
+            }
+            const a = color.alpha;
+            data[i] = Math.round(data[i] * (1 - a) + color.red * a);
+            data[i + 1] = Math.round(data[i + 1] * (1 - a) + color.green * a);
+            data[i + 2] = Math.round(data[i + 2] * (1 - a) + color.blue * a);
+        }
+    }
+}
 function loadImage(src) {
     return new Promise((res, rej) => {
         const image = new Image();
@@ -40000,6 +40400,87 @@ function loadImage(src) {
 
 var TextureFrameSeriesAnimator;
 (function (TextureFrameSeriesAnimator) {
+    // Values are measured up from the ground beneath them.
+    TextureFrameSeriesAnimator.QUANTITY_THICKNESS = "thickness";
+    // Values are heights against a vertical datum, so they need that datum to be placed.
+    TextureFrameSeriesAnimator.QUANTITY_ELEVATION = "elevation";
+    TextureFrameSeriesAnimator.LAYOUT_TILES = "tiles";
+    /**
+     * The generator that produced an archive, for telling a stale one from a current one.
+     *
+     * Read the version rather than sniffing for fields: an archive can legitimately omit Tiles or
+     * GeoidSeparation and still be current, so their absence says nothing about its age.
+     * @param metadata the archive's Data.generation
+     */
+    function GeneratorVersion(metadata) {
+        if (!metadata || typeof metadata.GeneratorVersion !== "number") {
+            return 1;
+        }
+        return metadata.GeneratorVersion;
+    }
+    TextureFrameSeriesAnimator.GeneratorVersion = GeneratorVersion;
+    /**
+     * Whether an archive is an adaptive pyramid rather than one raster.
+     * @param metadata the archive's Data.generation
+     */
+    function IsTiledLayout(metadata) {
+        return (Boolean(metadata && metadata.Layout === TextureFrameSeriesAnimator.LAYOUT_TILES &&
+            metadata.Tiles && metadata.Tiles.length > 0));
+    }
+    TextureFrameSeriesAnimator.IsTiledLayout = IsTiledLayout;
+    // Frames carry the value as the source reported it.
+    TextureFrameSeriesAnimator.MEASURE_ABSOLUTE = "absolute";
+    // Frames carry the value minus each cell's own minimum over the series.
+    TextureFrameSeriesAnimator.MEASURE_ANOMALY = "anomaly";
+    /**
+     * Turns a value in the attribute's own units into the 0 to 1 position the ramp is indexed by.
+     *
+     * Stops are authored in real units, since "hide anything under 0.1 m" is the sentence a user
+     * actually has, and the archive's own published range is what makes that expressible.
+     * @param metadata the archive's Data.generation
+     * @param value in the attribute's units
+     */
+    function NormalisePosition(metadata, value) {
+        const lo = metadata && typeof metadata.ValueMin === "number" ? metadata.ValueMin : 0;
+        const hi = metadata && typeof metadata.ValueMax === "number" ? metadata.ValueMax : 1;
+        const span = hi - lo;
+        if (!(span > 0)) {
+            return 0;
+        }
+        return Math.min(1, Math.max(0, (value - lo) / span));
+    }
+    TextureFrameSeriesAnimator.NormalisePosition = NormalisePosition;
+    /**
+     * Whether the frames are a departure from each cell's own normal rather than a raw reading.
+     *
+     * Worth asking before labelling anything: the two measures need different words for the same
+     * number, and calling an anomaly "water depth" is a worse error than the coarse ramp it replaced.
+     * @param metadata the archive's Data.generation
+     */
+    function IsAnomalyMeasure(metadata) {
+        return Boolean(metadata && metadata.Measure === TextureFrameSeriesAnimator.MEASURE_ANOMALY);
+    }
+    TextureFrameSeriesAnimator.IsAnomalyMeasure = IsAnomalyMeasure;
+    /**
+     * How much the value moves anywhere in the series, in source units.
+     *
+     * Falls back to the published range, which is the right answer for an anomaly archive (its range
+     * IS the movement) and the only available one for an archive predating AnomalyMax.
+     * @param metadata the archive's Data.generation
+     */
+    function MovingRange(metadata) {
+        if (!metadata) {
+            return undefined;
+        }
+        if (typeof metadata.AnomalyMax === "number" && metadata.AnomalyMax > 0) {
+            return metadata.AnomalyMax;
+        }
+        if (typeof metadata.ValueMin === "number" && typeof metadata.ValueMax === "number") {
+            return Math.abs(metadata.ValueMax - metadata.ValueMin);
+        }
+        return undefined;
+    }
+    TextureFrameSeriesAnimator.MovingRange = MovingRange;
     /**
      * Detects whether a ClientFile's `Data.generation` metadata describes a frame archive rather than a single static image,
      * so a caller can decide whether to construct an Animator or fall back to the existing static-texture path.
@@ -40009,15 +40490,51 @@ var TextureFrameSeriesAnimator;
         return Boolean(data && data.generation && Array.isArray(data.generation.Frames) && data.generation.Frames.length > 0);
     }
     TextureFrameSeriesAnimator.IsFrameArchiveMetadata = IsFrameArchiveMetadata;
-    // How far covered values bleed outward into uncovered texels before the GPU samples them.
+    // First resolvable static number out of a calculator field list, since that is all a border needs.
+    function resolveNumber(fields) {
+        if (!fields) {
+            return 0;
+        }
+        for (const field of fields) {
+            const value = Number(field && field.value);
+            if (Number.isFinite(value)) {
+                return value;
+            }
+        }
+        return 0;
+    }
+    // First resolvable static colour out of a calculator field list.
+    function resolveColor(fields) {
+        if (!fields) {
+            return null;
+        }
+        for (const field of fields) {
+            const parsed = typeof (field === null || field === void 0 ? void 0 : field.value) === "string"
+                ? Color$1.ColorFromStr(field.value)
+                : null;
+            if (parsed) {
+                return parsed;
+            }
+        }
+        return null;
+    }
+    /*
+     * Everything about an Animator that a style can change, as a comparable string.
+     */
+    function AppearanceSignature(options) {
+        var _a, _b, _c;
+        return JSON.stringify([
+            (_a = options.textureColorMask) !== null && _a !== void 0 ? _a : null,
+            (_b = options.cellBorder) !== null && _b !== void 0 ? _b : null,
+            (_c = options.cellTexels) !== null && _c !== void 0 ? _c : null,
+            Boolean(options.maskBaseline)
+        ]);
+    }
+    TextureFrameSeriesAnimator.AppearanceSignature = AppearanceSignature;
+    const MAX_COMPOSITE_TEXELS = 2048;
     const VALUE_DILATE_PASSES = 2;
     /*
      * Bleeds covered values outward into uncovered texels, leaving alpha untouched.
-     *
-     * The GPU samples the value texture with linear filtering, so an uncovered texel's RGB still gets
-     * averaged into the vertices next to it even though its alpha is zero. Land sits at one end of the
-     * ramp, so without this the coastline grows a row of spikes exactly where the data stops. Masking the
-     * baseline creates more of these edges, which is what makes this necessary rather than cosmetic.
      */
     function dilateValues(value, width, height, passes) {
         const texels = width * height;
@@ -40063,7 +40580,7 @@ var TextureFrameSeriesAnimator;
     const DEFAULT_HIGH_COLOR = { red: 21, green: 96, blue: 196, alpha: 0.92 };
     class Animator {
         constructor(options) {
-            var _a, _b;
+            var _a, _b, _c;
             this.removeOnTick = null;
             this.removeCrossfadeTick = null;
             this.disposed = false;
@@ -40089,8 +40606,12 @@ var TextureFrameSeriesAnimator;
             // forcing Cesium to re-upload the texture only when something changed.
             this.pool = [document.createElement("canvas"), document.createElement("canvas")];
             this.poolIdx = 0;
+            this.scratch = null;
             this.valueDims = null;
             this.presentVersion = 0;
+            this.extremesLoad = null;
+            this.floorPixels = null;
+            this.ceilingPixels = null;
             if (!options.entity.polygon) {
                 throw new Error("TextureFrameSeriesAnimator requires an entity with polygon graphics.");
             }
@@ -40102,16 +40623,41 @@ var TextureFrameSeriesAnimator;
             this.archiveUrl = options.archiveUrl;
             this.frames = options.frames;
             this.crossfadeMs = (_a = options.crossfadeMs) !== null && _a !== void 0 ? _a : DEFAULT_CROSSFADE_MS;
+            this.appearance = AppearanceSignature(options);
             const mask = options.textureColorMask;
             this.lowColor = (mask && Color$1.ColorFromStr(mask.minColor)) || DEFAULT_LOW_COLOR;
             this.highColor = (mask && Color$1.ColorFromStr(mask.maxColor)) || DEFAULT_HIGH_COLOR;
+            // Positions are authored in the attribute's units and normalised once here, so the
+            // per-pixel loop stays a comparison against 0 to 1 like the two-colour path.
+            const points = mask === null || mask === void 0 ? void 0 : mask.points;
+            this.rampStops = (points && points.length > 0)
+                ? points.map((p) => ({
+                    position: NormalisePosition(options.metadata, p.position),
+                    color: Color$1.ColorFromStr(p.color) || DEFAULT_LOW_COLOR
+                }))
+                : null;
+            const border = options.cellBorder;
+            const borderWidth = border ? resolveNumber(border.width) : 0;
+            const borderColor = border ? resolveColor(border.color) : null;
+            // Zero width or a fully transparent colour means no grid, matching how the polygon's own
+            // outline behaves, so an existing style that wants no border keeps getting none.
+            this.cellBorder = (border && borderWidth > 0 && borderColor && borderColor.alpha > 0)
+                ? {
+                    cellTexels: Math.max(1, Math.round((_b = options.cellTexels) !== null && _b !== void 0 ? _b : 1)),
+                    widthTexels: borderWidth,
+                    color: borderColor
+                }
+                : null;
             this.frameDates = this.frames.map((f) => JulianDate.fromIso8601(f.Timestamp));
             this.frameCache = new Array(this.frames.length).fill(null);
             this.frameDims = new Array(this.frames.length).fill(null);
             this.valueCache = new Array(this.frames.length).fill(null);
             this.produceValueCanvas = Boolean(options.produceValueCanvas);
+            this.metadata = options.metadata;
+            this.drapeExtent = options.drapeExtent;
+            this.tiles = IsTiledLayout(options.metadata) ? options.metadata.Tiles : undefined;
             this.baselineMaskEntry = options.baselineMask || null;
-            this.maskBaseline = (_b = options.maskBaseline) !== null && _b !== void 0 ? _b : Boolean(options.baselineMask);
+            this.maskBaseline = (_c = options.maskBaseline) !== null && _c !== void 0 ? _c : Boolean(options.baselineMask);
             this.valueCanvas = this.produceValueCanvas ? document.createElement("canvas") : null;
             this.driveMaterial = options.driveMaterial !== false;
             this.originalMaterial = options.entity.polygon.material;
@@ -40147,6 +40693,10 @@ var TextureFrameSeriesAnimator;
         IsDisposed() {
             return this.disposed;
         }
+        // What this Animator was built to look like, for deciding whether it can be reused.
+        GetAppearanceSignature() {
+            return this.appearance;
+        }
         /**
          * The archive URL this instance was constructed with,
          * lets a caller re-rendering the same entity tell whether an existing instance is already correct, without reaching into private state.
@@ -40161,6 +40711,15 @@ var TextureFrameSeriesAnimator;
         GetImageProperty() {
             return this.imageProperty;
         }
+        /**
+         * The presented frame's TINTED pixels, where alpha is what the ramp actually painted.
+         *
+         * Distinct from the value canvas, whose alpha only says a texel has data. A cell can hold a
+         * reading and still be painted nothing, which is exactly what a hidden floor band does.
+         */
+        GetDisplayedPixels() {
+            return this.displayedPixels;
+        }
         /**
          * The untinted canvas carrying the presented frame's value in RGB and its coverage in alpha,
          * or null unless the instance was constructed with produceValueCanvas.
@@ -40273,11 +40832,33 @@ var TextureFrameSeriesAnimator;
             });
         }
         async fetchAndTint(idx) {
-            const entry = this.frames[idx];
-            const start = entry.ByteOffset;
-            const end = entry.ByteOffset + entry.ByteLength - 1;
-            const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${start}-${end}` } });
-            const buffer = await response.arrayBuffer();
+            const tiles = this.tiles;
+            let buffer;
+            let span = 0;
+            if (tiles) {
+                // Every tile's frame for one timestep sits contiguously, because the generator writes
+                // frame major. So a tiled frame is still ONE range request, not one per tile.
+                let lo = Number.MAX_SAFE_INTEGER;
+                let hi = 0;
+                for (const tile of tiles) {
+                    const at = tile.Frames[idx];
+                    if (!at) {
+                        continue;
+                    }
+                    lo = Math.min(lo, at.ByteOffset);
+                    hi = Math.max(hi, at.ByteOffset + at.ByteLength);
+                }
+                span = lo;
+                const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${lo}-${hi - 1}` } });
+                buffer = await response.arrayBuffer();
+            }
+            else {
+                const entry = this.frames[idx];
+                const start = entry.ByteOffset;
+                const end = entry.ByteOffset + entry.ByteLength - 1;
+                const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${start}-${end}` } });
+                buffer = await response.arrayBuffer();
+            }
             if (this.disposed) {
                 return;
             }
@@ -40287,7 +40868,9 @@ var TextureFrameSeriesAnimator;
             if (this.disposed) {
                 return;
             }
-            const decoded = await this.decodeAndTint(buffer);
+            const decoded = tiles
+                ? await this.composeTiles(tiles, idx, buffer, span)
+                : await this.decodeAndTint(buffer);
             if (this.disposed) {
                 return;
             }
@@ -40316,21 +40899,438 @@ var TextureFrameSeriesAnimator;
             canvas.height = image.height;
             const ctx = canvas.getContext("2d");
             ctx.drawImage(image, 0, 0);
-            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            return this.tint(ctx.getImageData(0, 0, canvas.width, canvas.height));
+        }
+        /*
+         * Draws every tile of one frame into a single raster covering the drape extent.
+         */
+        async composeTiles(tiles, idx, buffer, spanStart) {
+            const target = this.compositeExtent();
+            const size = this.compositeSize(tiles, target);
+            const canvas = document.createElement("canvas");
+            canvas.width = size.width;
+            canvas.height = size.height;
+            const ctx = canvas.getContext("2d");
+            ctx.imageSmoothingEnabled = false;
+            ctx.clearRect(0, 0, size.width, size.height);
+            const images = await this.decodeSlices(buffer, spanStart, tiles.map((tile) => tile.Frames[idx]));
+            for (let i = 0; i < tiles.length; i++) {
+                const image = images[i];
+                if (!image || this.disposed) {
+                    continue;
+                }
+                const at = this.tileRect(tiles[i], target, size);
+                ctx.drawImage(image, at.x, at.y, at.w, at.h);
+            }
+            return this.tint(ctx.getImageData(0, 0, size.width, size.height));
+        }
+        /*
+         * Where a composited frame is draped, which is the polygon's rectangle when there is one.
+         */
+        compositeExtent() {
+            if (this.drapeExtent) {
+                return this.drapeExtent;
+            }
+            const m = this.metadata;
+            return {
+                West: m && m.West != null ? m.West : -180,
+                East: m && m.East != null ? m.East : 180,
+                South: m && m.South != null ? m.South : -90,
+                North: m && m.North != null ? m.North : 90
+            };
+        }
+        /*
+         * Composite resolution, capped by what can be uploaded as a texture every frame.
+         */
+        compositeSize(tiles, target) {
+            let finest = Number.MAX_VALUE;
+            for (const tile of tiles) {
+                if (tile.TexelMetres > 0) {
+                    finest = Math.min(finest, tile.TexelMetres);
+                }
+            }
+            if (!(finest > 0) || finest === Number.MAX_VALUE) {
+                finest = 1;
+            }
+            const mid = (target.South + target.North) / 2 * Math.PI / 180;
+            const widthM = Math.max((target.East - target.West) * 111320 * Math.cos(mid), 1);
+            const heightM = Math.max((target.North - target.South) * 110574, 1);
+            let width = Math.ceil(widthM / finest);
+            let height = Math.ceil(heightM / finest);
+            const longest = Math.max(width, height);
+            if (longest > MAX_COMPOSITE_TEXELS) {
+                const shrink = MAX_COMPOSITE_TEXELS / longest;
+                width = Math.max(1, Math.round(width * shrink));
+                height = Math.max(1, Math.round(height * shrink));
+            }
+            return { width: Math.max(1, width), height: Math.max(1, height) };
+        }
+        /*
+         * Applies the ramp, borders and baseline mask to raw value pixels, whatever produced them.
+         */
+        tint(imageData) {
+            const canvas = { width: imageData.width, height: imageData.height };
             // Copied before tinting: the ramp is a lerp between two colours, so the value cannot be
             // recovered from the tinted pixels afterwards.
             const valuePixels = this.produceValueCanvas ? new Uint8ClampedArray(imageData.data) : undefined;
-            ApplyGrayscaleColorMask(imageData, this.lowColor, this.highColor);
+            // Stops win when supplied: they can express a band and a hidden floor, which a two
+            // colour ramp cannot. The pair stays the fallback so an older style still draws.
+            if (this.rampStops && this.rampStops.length > 0) {
+                ApplyGradientStops(imageData, this.rampStops);
+            }
+            else {
+                ApplyGrayscaleColorMask(imageData, this.lowColor, this.highColor);
+            }
+            if (this.cellBorder) {
+                ApplyCellBorders(imageData, this.cellBorder.cellTexels, this.cellBorder.widthTexels, this.cellBorder.color);
+            }
             this.applyBaselineMask(imageData.data, valuePixels, canvas.width, canvas.height);
             if (valuePixels) {
                 dilateValues(valuePixels, canvas.width, canvas.height, VALUE_DILATE_PASSES);
             }
             return { pixels: imageData.data, width: canvas.width, height: canvas.height, valuePixels };
         }
+        /*
+         * Paints one frame's pixels onto a canvas, resampled into the drape extent when there is one.
+         */
+        writeInto(canvas, pixels, dims) {
+            const rect = this.sourceRect(dims);
+            if (!rect) {
+                canvas.width = dims.width;
+                canvas.height = dims.height;
+                const direct = canvas.getContext("2d");
+                const image = direct.createImageData(dims.width, dims.height);
+                image.data.set(pixels);
+                direct.putImageData(image, 0, 0);
+                return;
+            }
+            if (!this.scratch) {
+                this.scratch = document.createElement("canvas");
+            }
+            this.scratch.width = dims.width;
+            this.scratch.height = dims.height;
+            const scratchCtx = this.scratch.getContext("2d");
+            const image = scratchCtx.createImageData(dims.width, dims.height);
+            image.data.set(pixels);
+            scratchCtx.putImageData(image, 0, 0);
+            canvas.width = dims.width;
+            canvas.height = dims.height;
+            const ctx = canvas.getContext("2d");
+            // Nearest neighbour: a value texel has to survive the resample exactly, or a label reads
+            // a blend of two cells rather than the cell it points at.
+            ctx.imageSmoothingEnabled = false;
+            ctx.clearRect(0, 0, dims.width, dims.height);
+            ctx.drawImage(this.scratch, rect.x, rect.y, rect.width, rect.height, 0, 0, dims.width, dims.height);
+        }
+        /*
+         * The part of the archive raster that the drape extent covers, in source pixels.
+         */
+        sourceRect(dims) {
+            const drape = this.drapeExtent;
+            const m = this.metadata;
+            // A composited frame was drawn into the drape extent already, so resampling it again
+            // would apply the same correction twice.
+            if (this.tiles) {
+                return null;
+            }
+            if (!drape || !m || m.West == null || m.East == null || m.South == null || m.North == null) {
+                return null;
+            }
+            const spanLon = m.East - m.West;
+            const spanLat = m.North - m.South;
+            if (!(spanLon > 0) || !(spanLat > 0)) {
+                return null;
+            }
+            const x = (drape.West - m.West) / spanLon * dims.width;
+            const width = (drape.East - drape.West) / spanLon * dims.width;
+            const y = (m.North - drape.North) / spanLat * dims.height;
+            const height = (drape.North - drape.South) / spanLat * dims.height;
+            // A drape that already matches the archive is the common case and must not pay for a
+            // resample, nor lose a half pixel to rounding.
+            if (Math.abs(x) < 0.01 && Math.abs(y) < 0.01
+                && Math.abs(width - dims.width) < 0.01 && Math.abs(height - dims.height) < 0.01) {
+                return null;
+            }
+            return { x, y, width, height };
+        }
+        /**
+         * The archive's per-cell floor and ceiling rasters, once EnsureExtremes has resolved.
+         */
+        GetExtremes() {
+            return { floor: this.floorPixels, ceiling: this.ceilingPixels };
+        }
+        /**
+         * Fetches and decodes the floor and ceiling rasters, at most once.
+         */
+        EnsureExtremes() {
+            if (this.extremesLoad) {
+                return this.extremesLoad;
+            }
+            if (this.tiles) {
+                this.extremesLoad = this.loadTiledExtremes();
+                return this.extremesLoad;
+            }
+            const floor = this.metadata && this.metadata.Floor;
+            const ceiling = this.metadata && this.metadata.Ceiling;
+            if (!floor && !ceiling) {
+                this.extremesLoad = Promise.resolve();
+                return this.extremesLoad;
+            }
+            this.extremesLoad = Promise.all([
+                floor ? this.loadImageDataAt(floor) : Promise.resolve(null),
+                ceiling ? this.loadImageDataAt(ceiling) : Promise.resolve(null)
+            ]).then(([f, c]) => {
+                if (this.disposed) {
+                    return;
+                }
+                this.floorPixels = f;
+                this.ceilingPixels = c;
+            }).catch((e) => {
+                // Missing extremes cost a label its range, and must not take the animation with them.
+                console.warn("TextureFrameSeriesAnimator: could not load the extremes rasters.", e);
+            });
+            return this.extremesLoad;
+        }
+        /*
+         * Composites each tile's baseline mask into one covering the composited frames.
+         *
+         * A tiled archive publishes the mask per tile, so reading the archive level BaselineMask
+         * finds nothing and hiding dry cells silently does nothing at all.
+         */
+        async loadTiledBaselineMask() {
+            const tiles = this.tiles;
+            if (!tiles) {
+                return;
+            }
+            const entries = tiles.map((tile) => tile.BaselineMask);
+            let lo = Number.MAX_SAFE_INTEGER;
+            let hi = 0;
+            for (const at of entries) {
+                if (!at) {
+                    continue;
+                }
+                lo = Math.min(lo, at.ByteOffset);
+                hi = Math.max(hi, at.ByteOffset + at.ByteLength);
+            }
+            if (!(hi > lo)) {
+                return;
+            }
+            try {
+                const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${lo}-${hi - 1}` } });
+                const block = await response.arrayBuffer();
+                if (this.disposed) {
+                    return;
+                }
+                const images = await this.decodeSlices(block, lo, entries);
+                if (this.disposed) {
+                    return;
+                }
+                const target = this.compositeExtent();
+                const size = this.compositeSize(tiles, target);
+                const canvas = document.createElement("canvas");
+                canvas.width = size.width;
+                canvas.height = size.height;
+                const ctx = canvas.getContext("2d");
+                ctx.imageSmoothingEnabled = false;
+                ctx.clearRect(0, 0, size.width, size.height);
+                for (let i = 0; i < tiles.length; i++) {
+                    if (!images[i]) {
+                        continue;
+                    }
+                    const at = this.tileRect(tiles[i], target, size);
+                    ctx.drawImage(images[i], at.x, at.y, at.w, at.h);
+                }
+                const pixels = ctx.getImageData(0, 0, size.width, size.height).data;
+                const flags = new Uint8Array(size.width * size.height);
+                for (let p = 0; p < flags.length; p++) {
+                    flags[p] = pixels[p * 4 + 3] >= 128 ? 1 : 0;
+                }
+                this.baselineFlags = flags;
+                this.baselineDims = { width: size.width, height: size.height };
+            }
+            catch (e) {
+                console.warn("TextureFrameSeriesAnimator: could not load the tiled baseline mask.", e);
+            }
+        }
+        /*
+         * Composites each tile's floor and ceiling into rasters matching the composited frames.
+         *
+         * A tiled archive has no whole-extent extremes to fetch, only per-tile ones, and a label
+         * indexes them by the same texel as the value canvas, so they have to be laid out the same way.
+         */
+        async loadTiledExtremes() {
+            const tiles = this.tiles;
+            if (!tiles) {
+                return;
+            }
+            const target = this.compositeExtent();
+            const size = this.compositeSize(tiles, target);
+            // One request for the whole extremes block. They sit contiguously after the frames, so
+            // fetching per tile would be 164 round trips for an 82 tile pyramid.
+            let lo = Number.MAX_SAFE_INTEGER;
+            let hi = 0;
+            for (const tile of tiles) {
+                for (const at of [tile.Floor, tile.Ceiling]) {
+                    if (!at) {
+                        continue;
+                    }
+                    lo = Math.min(lo, at.ByteOffset);
+                    hi = Math.max(hi, at.ByteOffset + at.ByteLength);
+                }
+            }
+            if (!(hi > lo)) {
+                return;
+            }
+            const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${lo}-${hi - 1}` } });
+            const block = await response.arrayBuffer();
+            if (this.disposed) {
+                return;
+            }
+            const draw = async (pick) => {
+                const images = await this.decodeSlices(block, lo, tiles.map(pick));
+                if (this.disposed) {
+                    return null;
+                }
+                const canvas = document.createElement("canvas");
+                canvas.width = size.width;
+                canvas.height = size.height;
+                const ctx = canvas.getContext("2d");
+                ctx.imageSmoothingEnabled = false;
+                ctx.clearRect(0, 0, size.width, size.height);
+                let drew = false;
+                for (let i = 0; i < tiles.length; i++) {
+                    const image = images[i];
+                    if (!image) {
+                        continue;
+                    }
+                    const at = this.tileRect(tiles[i], target, size);
+                    ctx.drawImage(image, at.x, at.y, at.w, at.h);
+                    drew = true;
+                }
+                return drew ? ctx.getImageData(0, 0, size.width, size.height) : null;
+            };
+            try {
+                this.floorPixels = await draw((tile) => tile.Floor);
+                this.ceilingPixels = await draw((tile) => tile.Ceiling);
+            }
+            catch (e) {
+                console.warn("TextureFrameSeriesAnimator: could not load the tiled extremes.", e);
+            }
+        }
+        /*
+         * Where one tile lands on the composite, snapped to whole pixels.
+         *
+         * Rounding each edge rather than the origin and size is what makes neighbours meet exactly:
+         * a tile's right edge and the next tile's left edge round to the same pixel, so no seam of
+         * background shows between them.
+         */
+        tileRect(tile, target, size) {
+            const spanLon = target.East - target.West;
+            const spanLat = target.North - target.South;
+            const x0 = Math.round((tile.West - target.West) / spanLon * size.width);
+            const x1 = Math.round((tile.East - target.West) / spanLon * size.width);
+            const y0 = Math.round((target.North - tile.North) / spanLat * size.height);
+            const y1 = Math.round((target.North - tile.South) / spanLat * size.height);
+            return { x: x0, y: y0, w: Math.max(1, x1 - x0), h: Math.max(1, y1 - y0) };
+        }
+        /*
+         * Decodes many tile images at once.
+         *
+         * Serially awaiting each decode makes a frame cost as many round trips through the image
+         * decoder as there are tiles, which for an 82 tile pyramid is seconds rather than one.
+         */
+        decodeSlices(block, base, entries) {
+            return Promise.all(entries.map(async (at) => {
+                if (!at) {
+                    return null;
+                }
+                const slice = block.slice(at.ByteOffset - base, at.ByteOffset - base + at.ByteLength);
+                const objectUrl = URL.createObjectURL(new Blob([slice], { type: "image/png" }));
+                try {
+                    return await loadImage(objectUrl);
+                }
+                catch {
+                    return null;
+                }
+                finally {
+                    URL.revokeObjectURL(objectUrl);
+                }
+            }));
+        }
+        /*
+         * Range GETs one entry and decodes it to an image.
+         */
+        async loadImageAt(entry) {
+            const start = entry.ByteOffset;
+            const end = entry.ByteOffset + entry.ByteLength - 1;
+            const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${start}-${end}` } });
+            const buffer = await response.arrayBuffer();
+            const objectUrl = URL.createObjectURL(new Blob([buffer], { type: "image/png" }));
+            try {
+                return await loadImage(objectUrl);
+            }
+            finally {
+                URL.revokeObjectURL(objectUrl);
+            }
+        }
+        /*
+         * Puts a static raster through the same resample the frames get.
+         */
+        remap(image) {
+            if (!image) {
+                return null;
+            }
+            const rect = this.sourceRect({ width: image.width, height: image.height });
+            if (!rect) {
+                return image;
+            }
+            const from = document.createElement("canvas");
+            from.width = image.width;
+            from.height = image.height;
+            from.getContext("2d").putImageData(image, 0, 0);
+            const to = document.createElement("canvas");
+            to.width = image.width;
+            to.height = image.height;
+            const ctx = to.getContext("2d");
+            ctx.imageSmoothingEnabled = false;
+            ctx.clearRect(0, 0, image.width, image.height);
+            ctx.drawImage(from, rect.x, rect.y, rect.width, rect.height, 0, 0, image.width, image.height);
+            return ctx.getImageData(0, 0, image.width, image.height);
+        }
+        /*
+         * Range GETs one entry out of the blob and decodes it to pixels.
+         */
+        async loadImageDataAt(entry) {
+            const start = entry.ByteOffset;
+            const end = entry.ByteOffset + entry.ByteLength - 1;
+            const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${start}-${end}` } });
+            const buffer = await response.arrayBuffer();
+            const blob = new Blob([buffer], { type: "image/png" });
+            const objectUrl = URL.createObjectURL(blob);
+            let image;
+            try {
+                image = await loadImage(objectUrl);
+            }
+            finally {
+                URL.revokeObjectURL(objectUrl);
+            }
+            const canvas = document.createElement("canvas");
+            canvas.width = image.width;
+            canvas.height = image.height;
+            const ctx = canvas.getContext("2d");
+            ctx.drawImage(image, 0, 0);
+            return ctx.getImageData(0, 0, canvas.width, canvas.height);
+        }
         /**
          * Fetches and decodes the archive's static baseline mask, at most once.
          */
         ensureBaselineMask() {
+            if (this.maskBaseline && this.tiles) {
+                if (!this.baselineLoad) {
+                    this.baselineLoad = this.loadTiledBaselineMask();
+                }
+                return this.baselineLoad;
+            }
             if (!this.maskBaseline || !this.baselineMaskEntry) {
                 return Promise.resolve();
             }
@@ -40443,24 +41443,17 @@ var TextureFrameSeriesAnimator;
         presentPixels(pixels, dims, valuePixels) {
             this.poolIdx = 1 - this.poolIdx;
             const target = this.pool[this.poolIdx];
-            target.width = dims.width;
-            target.height = dims.height;
-            const ctx = target.getContext("2d");
-            const imgData = ctx.createImageData(dims.width, dims.height);
-            imgData.data.set(pixels);
-            ctx.putImageData(imgData, 0, 0);
+            this.writeInto(target, pixels, dims);
             this.displayedPixels = pixels;
             if (this.valueCanvas && valuePixels) {
-                this.valueCanvas.width = dims.width;
-                this.valueCanvas.height = dims.height;
-                const valueCtx = this.valueCanvas.getContext("2d");
-                const valueImgData = valueCtx.createImageData(dims.width, dims.height);
-                valueImgData.data.set(valuePixels);
-                valueCtx.putImageData(valueImgData, 0, 0);
+                this.writeInto(this.valueCanvas, valuePixels, dims);
                 this.displayedValuePixels = valuePixels;
                 this.valueDims = dims;
             }
             this.presentVersion++;
+            if (this.viewer && this.viewer.scene && this.viewer.scene.requestRenderMode) {
+                this.viewer.scene.requestRender();
+            }
         }
     }
     TextureFrameSeriesAnimator.Animator = Animator;
@@ -40472,6 +41465,688 @@ var TextureFrameSeriesAnimator;
     }
 })(TextureFrameSeriesAnimator || (TextureFrameSeriesAnimator = {}));
 
+/**
+ * Prints a value texture's own numbers over the cells they belong to.
+ */
+var TextureValueLabels;
+(function (TextureValueLabels) {
+    // Off by default: a caller can still set a floor, but thinning is the mechanism that keeps a
+    // distant view readable.
+    const DEFAULT_MIN_CELL_PIXELS = 0;
+    const MIN_VISIBLE_PIXELS = 60;
+    const MAX_STRIDE = 512;
+    const STRIDE_HYSTERESIS = 1.4;
+    const DEFAULT_MIN_SPACING_PIXELS = 78;
+    const DEFAULT_MAX_LABELS = 240;
+    const LABEL_RADIUS = 4;
+    const LABEL_FONT = "600 11px ui-monospace, SFMono-Regular, Menlo, monospace";
+    // Clear space either side of a label box, so neighbours read as separate.
+    const LABEL_GAP_PIXELS = 16;
+    const LABEL_ANCHOR_COLOR = "rgba(255,255,255,0.85)";
+    // 8 rather than 5: below this a cell reads as texture rather than as a boundary, and it also
+    // bounds the worst case, since a full screen of 8 px cells fits inside MAX_GRID_CELLS.
+    const DEFAULT_MIN_GRID_CELL_PIXELS = 8;
+    const DEFAULT_GRID_WIDTH_PIXELS = 1;
+    // Enough for a full screen at the minimum legible cell size, with headroom for an oblique view
+    // whose texel window is larger than the screen. The budget is shared across tiles, so sizing it
+    // too tightly made the grid depend on which tile happened to be walked first.
+    const MAX_GRID_CELLS = 40000;
+    // Probes per side when hunting a labellable cell inside one lattice block.
+    const MAX_LABEL_PROBES_PER_SIDE = 8;
+    const TILE_OUTLINE_ALPHA = 0.45;
+    // Cells per grid square at the coarsest. Beyond this a tile is outlined instead.
+    const MAX_GRID_STRIDE = 256;
+    const LINE_HEIGHT = 13;
+    /**
+     * A clip outline from a projected ring, or null when the ring cannot be drawn.
+     * @param projected one entry per ring vertex, null where the vertex has no window coordinate
+     */
+    function ClipOutline(projected) {
+        if (projected.length < 3) {
+            return null;
+        }
+        const out = [];
+        for (const at of projected) {
+            if (!at) {
+                return null;
+            }
+            out.push(at);
+        }
+        return out;
+    }
+    TextureValueLabels.ClipOutline = ClipOutline;
+    /**
+     * How many cells apart labels should sit, as a power of two.
+     * @param options cellPixels is one cell's size on screen, held is the stride already in use
+     */
+    function ChooseLabelStride(options) {
+        const { cellPixels, visibleCols, visibleRows, maxLabels, minSpacingPixels } = options;
+        const fits = (s, slack) => cellPixels * s >= minSpacingPixels / slack
+            && Math.ceil(visibleCols / s) * Math.ceil(visibleRows / s) <= maxLabels * slack;
+        let stride = 1;
+        while (stride < MAX_STRIDE && !fits(stride, 1)) {
+            stride *= 2;
+        }
+        const held = options.held;
+        if (held && fits(held, STRIDE_HYSTERESIS)) {
+            if (held === stride / 2 && cellPixels * held >= minSpacingPixels / STRIDE_HYSTERESIS) {
+                return held;
+            }
+            if (held === stride * 2 && cellPixels * stride < minSpacingPixels * STRIDE_HYSTERESIS) {
+                return held;
+            }
+        }
+        return stride;
+    }
+    TextureValueLabels.ChooseLabelStride = ChooseLabelStride;
+    class Labels {
+        constructor(options) {
+            this.source = null;
+            this.painted = null;
+            this.floor = null;
+            this.ceiling = null;
+            this.disposed = false;
+            this.drawn = 0;
+            this.stride = 0;
+            this.viewer = options.viewer;
+            this.extent = options.extent;
+            this.settings = options.settings || {};
+            this.metadata = options.metadata;
+            this.tiles = options.tiles;
+            this.clipRing = options.clipRing;
+            this.canvas = document.createElement("canvas");
+            this.canvas.style.position = "absolute";
+            this.canvas.style.inset = "0";
+            this.canvas.style.pointerEvents = "none";
+            const parent = this.viewer.canvas.parentElement;
+            if (parent) {
+                parent.appendChild(this.canvas);
+            }
+            this.ctx = this.canvas.getContext("2d");
+        }
+        SetExtent(extent) {
+            this.extent = extent;
+        }
+        /**
+         * The current frame's decoded values, as the animator's value canvas already provides them.
+         * @param source value pixels, one texel per cell
+         */
+        SetSource(source) {
+            this.source = source;
+        }
+        /**
+         * The tinted pixels of the same frame, so the grid can skip cells the ramp painted nothing in.
+         * @param painted RGBA of the presented frame, or null to fall back to coverage alone
+         */
+        SetPainted(painted) {
+            this.painted = painted;
+        }
+        /**
+         * The archive's per-cell extremes, when it publishes them. Without these a label can still
+         * print the current reading, just not the range behind it.
+         */
+        SetExtremes(floor, ceiling) {
+            this.floor = floor;
+            this.ceiling = ceiling;
+        }
+        GetDrawnCount() {
+            return this.drawn;
+        }
+        Clear() {
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            this.drawn = 0;
+        }
+        Dispose() {
+            this.disposed = true;
+            if (this.canvas.parentElement) {
+                this.canvas.parentElement.removeChild(this.canvas);
+            }
+        }
+        /**
+         * Redraws every visible label. Cheap enough to call per rendered frame, because the cell
+         * count it considers is bounded by the view rather than by the texture.
+         */
+        Render() {
+            var _a, _b, _c;
+            if (this.disposed || !this.source) {
+                return;
+            }
+            const view = this.viewer.canvas;
+            if (this.canvas.width !== view.clientWidth || this.canvas.height !== view.clientHeight) {
+                this.canvas.width = view.clientWidth;
+                this.canvas.height = view.clientHeight;
+            }
+            this.Clear();
+            const cols = this.source.width;
+            const rows = this.source.height;
+            const window = this.visibleTexels(cols, rows);
+            if (!window) {
+                return;
+            }
+            const midCol = (window.col0 + window.col1) / 2;
+            const midRow = (window.row0 + window.row1) / 2;
+            const a = this.project(this.lonAt(midCol, cols), this.latAt(midRow, rows));
+            const b = this.project(this.lonAt(midCol + 1, cols), this.latAt(midRow + 1, rows));
+            if (!a || !b) {
+                return;
+            }
+            const cellPixels = Math.min(Math.abs(b.x - a.x), Math.abs(b.y - a.y));
+            // Ahead of the label threshold on purpose: a grid still reads at a cell size where a
+            // number no longer fits.
+            this.drawGrid(window, cols, rows, cellPixels);
+            if (cellPixels < ((_a = this.settings.minCellPixels) !== null && _a !== void 0 ? _a : DEFAULT_MIN_CELL_PIXELS)) {
+                return;
+            }
+            const visibleWidth = cellPixels * (window.col1 - window.col0 + 1);
+            const visibleHeight = cellPixels * (window.row1 - window.row0 + 1);
+            if (Math.max(visibleWidth, visibleHeight) < MIN_VISIBLE_PIXELS) {
+                return;
+            }
+            const parts = this.settings.parts || ["value", "floor", "ceiling"];
+            this.ctx.font = LABEL_FONT;
+            this.ctx.textAlign = "center";
+            const maxLabels = (_b = this.settings.maxLabels) !== null && _b !== void 0 ? _b : DEFAULT_MAX_LABELS;
+            this.stride = ChooseLabelStride({
+                cellPixels,
+                visibleCols: window.col1 - window.col0 + 1,
+                visibleRows: window.row1 - window.row0 + 1,
+                maxLabels,
+                // Measured, not assumed: the spacing that keeps labels apart is whatever the widest
+                // one is, so changing what a label says cannot quietly start overlapping them.
+                minSpacingPixels: Math.max((_c = this.settings.minSpacingPixels) !== null && _c !== void 0 ? _c : DEFAULT_MIN_SPACING_PIXELS, this.widestLabel(parts)),
+                held: this.stride
+            });
+            const stride = this.stride;
+            const firstRow = Math.floor(window.row0 / stride) * stride;
+            const firstCol = Math.floor(window.col0 / stride) * stride;
+            for (let row = firstRow; row <= window.row1 && this.drawn < maxLabels; row += stride) {
+                for (let col = firstCol; col <= window.col1 && this.drawn < maxLabels; col += stride) {
+                    const found = this.readNear(col, row, cols, rows, stride);
+                    if (!found) {
+                        continue;
+                    }
+                    const point = this.project(this.lonAt(found.col, cols), this.latAt(found.row, rows));
+                    if (!point || point.x < 0 || point.y < 0
+                        || point.x > this.canvas.width || point.y > this.canvas.height) {
+                        continue;
+                    }
+                    this.drawLabel(point, found.reading, parts, this.cellOutline(found.col, found.row, cols, rows));
+                }
+            }
+        }
+        /*
+         * Outlines each covered cell, from a projected lattice of its corners.
+         */
+        drawGrid(window, cols, rows, cellPixels) {
+            var _a, _b;
+            const color = this.settings.gridColor;
+            if (!color) {
+                return;
+            }
+            if (this.tiles && this.tiles.length) {
+                this.ctx.save();
+                this.applyRingClip();
+                this.drawTileGrid(color);
+                this.ctx.restore();
+                return;
+            }
+            if (cellPixels < ((_a = this.settings.minGridCellPixels) !== null && _a !== void 0 ? _a : DEFAULT_MIN_GRID_CELL_PIXELS)) {
+                return;
+            }
+            // Corners are shared by four cells, so projecting the lattice once rather than per cell
+            // cuts the work by about four and keeps neighbouring outlines exactly coincident.
+            const wide = window.col1 - window.col0 + 1;
+            const high = window.row1 - window.row0 + 1;
+            if (wide * high > MAX_GRID_CELLS) {
+                return;
+            }
+            const lattice = new Array((wide + 1) * (high + 1));
+            for (let r = 0; r <= high; r++) {
+                for (let c = 0; c <= wide; c++) {
+                    // Corners sit half a texel out from the centres lonAt/latAt return.
+                    const lon = this.lonAt(window.col0 + c - 0.5, cols);
+                    const lat = this.latAt(window.row0 + r - 0.5, rows);
+                    lattice[r * (wide + 1) + c] = this.project(lon, lat);
+                }
+            }
+            const path = new Path2D();
+            let drew = false;
+            for (let r = 0; r < high; r++) {
+                for (let c = 0; c < wide; c++) {
+                    if (!this.isCovered(window.col0 + c, window.row0 + r, cols)) {
+                        continue;
+                    }
+                    const tl = lattice[r * (wide + 1) + c];
+                    const tr = lattice[r * (wide + 1) + c + 1];
+                    const bl = lattice[(r + 1) * (wide + 1) + c];
+                    const br = lattice[(r + 1) * (wide + 1) + c + 1];
+                    if (!tl || !tr || !bl || !br) {
+                        continue;
+                    }
+                    path.moveTo(tl.x, tl.y);
+                    path.lineTo(tr.x, tr.y);
+                    path.lineTo(br.x, br.y);
+                    path.lineTo(bl.x, bl.y);
+                    path.closePath();
+                    drew = true;
+                }
+            }
+            if (!drew) {
+                return;
+            }
+            this.ctx.strokeStyle = color;
+            this.ctx.lineWidth = (_b = this.settings.gridWidthPixels) !== null && _b !== void 0 ? _b : DEFAULT_GRID_WIDTH_PIXELS;
+            this.ctx.stroke(path);
+            +" alpha" + this.ctx.globalAlpha;
+        }
+        /*
+         * Restricts drawing to the polygon, so nothing is ruled over ground it does not cover.
+         */
+        applyRingClip() {
+            const ring = this.clipRing;
+            if (!ring || ring.length < 3) {
+                return;
+            }
+            const outline = ClipOutline(ring.map(point => this.project(point.lon, point.lat)));
+            if (!outline) {
+                return;
+            }
+            const path = new Path2D();
+            path.moveTo(outline[0].x, outline[0].y);
+            for (let i = 1; i < outline.length; i++) {
+                path.lineTo(outline[i].x, outline[i].y);
+            }
+            path.closePath();
+            this.ctx.clip(path);
+        }
+        /*
+         * The cell of whichever tile covers a point, as screen corners.
+         */
+        tileCellOutline(lon, lat) {
+            for (const tile of this.tiles) {
+                if (lon < tile.West || lon > tile.East || lat < tile.South || lat > tile.North) {
+                    continue;
+                }
+                const c = (Math.min(tile.ResolutionX - 1, Math.max(0, Math.floor((lon - tile.West) / (tile.East - tile.West) * tile.ResolutionX))));
+                const r = (Math.min(tile.ResolutionY - 1, Math.max(0, Math.floor((tile.North - lat) / (tile.North - tile.South) * tile.ResolutionY))));
+                const w0 = tile.West + (c / tile.ResolutionX) * (tile.East - tile.West);
+                const w1 = tile.West + ((c + 1) / tile.ResolutionX) * (tile.East - tile.West);
+                const n0 = tile.North - (r / tile.ResolutionY) * (tile.North - tile.South);
+                const n1 = tile.North - ((r + 1) / tile.ResolutionY) * (tile.North - tile.South);
+                const corners = [
+                    this.project(w0, n0), this.project(w1, n0),
+                    this.project(w1, n1), this.project(w0, n1)
+                ];
+                return corners.every((q) => q) ? corners : null;
+            }
+            return null;
+        }
+        /*
+         * Outlines each tile's own cells, so cell size still shows where the mesh is refined.
+         */
+        drawTileGrid(color) {
+            var _a, _b, _c;
+            const view = this.viewer.camera.computeViewRectangle(Ellipsoid.WGS84);
+            if (!view) {
+                return;
+            }
+            const west = Math$1.toDegrees(view.west);
+            const east = Math$1.toDegrees(view.east);
+            const south = Math$1.toDegrees(view.south);
+            const north = Math$1.toDegrees(view.north);
+            const minCell = (_a = this.settings.minGridCellPixels) !== null && _a !== void 0 ? _a : DEFAULT_MIN_GRID_CELL_PIXELS;
+            const focus = this.groundAtScreenCentre();
+            const path = new Path2D();
+            // A tile too fine to rule, or one the budget cannot afford, contributes its own outline
+            // instead of vanishing. Dropping such tiles entirely is what made whole regions blink out.
+            const coarse = new Path2D();
+            let drew = false;
+            let drewCoarse = false;
+            const outlineTile = (tile) => {
+                const tl = this.project(tile.West, tile.North);
+                const tr = this.project(tile.East, tile.North);
+                const br = this.project(tile.East, tile.South);
+                const bl = this.project(tile.West, tile.South);
+                if (!tl || !tr || !br || !bl) {
+                    return;
+                }
+                coarse.moveTo(tl.x, tl.y);
+                coarse.lineTo(tr.x, tr.y);
+                coarse.lineTo(br.x, br.y);
+                coarse.lineTo(bl.x, bl.y);
+                coarse.closePath();
+                drewCoarse = true;
+            };
+            // Planned for every visible tile BEFORE any is drawn.
+            const planned = [];
+            for (const tile of this.tiles) {
+                if (tile.East < west || tile.West > east || tile.North < south || tile.South > north) {
+                    continue;
+                }
+                const c0 = Math.max(0, Math.floor((Math.max(west, tile.West) - tile.West)
+                    / (tile.East - tile.West) * tile.ResolutionX));
+                const c1 = Math.min(tile.ResolutionX, Math.ceil((Math.min(east, tile.East) - tile.West)
+                    / (tile.East - tile.West) * tile.ResolutionX));
+                const r0 = Math.max(0, Math.floor((tile.North - Math.min(north, tile.North))
+                    / (tile.North - tile.South) * tile.ResolutionY));
+                const r1 = Math.min(tile.ResolutionY, Math.ceil((tile.North - Math.max(south, tile.South))
+                    / (tile.North - tile.South) * tile.ResolutionY));
+                if (c1 <= c0 || r1 <= r0) {
+                    continue;
+                }
+                const focusC = focus
+                    ? Math.round((focus.lon - tile.West) / (tile.East - tile.West) * tile.ResolutionX)
+                    : Math.floor((c0 + c1) / 2);
+                const focusR = focus
+                    ? Math.round((tile.North - focus.lat) / (tile.North - tile.South) * tile.ResolutionY)
+                    : Math.floor((r0 + r1) / 2);
+                const midC = Math.min(c1 - 1, Math.max(c0, focusC));
+                const midR = Math.min(r1 - 1, Math.max(r0, focusR));
+                const cellLon = (tile.East - tile.West) / tile.ResolutionX;
+                const cellLat = (tile.North - tile.South) / tile.ResolutionY;
+                const at = this.project(tile.West + midC * cellLon, tile.North - midR * cellLat);
+                const next = (this.project(tile.West + (midC + 1) * cellLon, tile.North - (midR + 1) * cellLat));
+                if (!at || !next) {
+                    outlineTile(tile);
+                    continue;
+                }
+                const onScreen = Math.min(Math.abs(next.x - at.x), Math.abs(next.y - at.y));
+                let step = 1;
+                while (step < MAX_GRID_STRIDE && onScreen * step < minCell) {
+                    step *= 2;
+                }
+                if (onScreen * step < minCell) {
+                    outlineTile(tile);
+                    continue;
+                }
+                planned.push({ tile, c0, c1, r0, r1, step });
+            }
+            // Coarsened together rather than dropped one by one, so a busy view thins out evenly.
+            const blocksOf = (p) => Math.ceil((p.c1 - p.c0) / p.step) * Math.ceil((p.r1 - p.r0) / p.step);
+            let total = planned.reduce((sum, p) => sum + blocksOf(p), 0);
+            while (total > MAX_GRID_CELLS && planned.some((p) => p.step < MAX_GRID_STRIDE)) {
+                for (const p of planned) {
+                    p.step = Math.min(MAX_GRID_STRIDE, p.step * 2);
+                }
+                total = planned.reduce((sum, p) => sum + blocksOf(p), 0);
+            }
+            for (const { tile, c0, c1, r0, r1, step } of planned) {
+                // Anchored to the tile's own origin so lines stay on the same boundaries as the camera
+                // moves, and so each step up is a subset of the one below it.
+                const firstR = Math.floor(r0 / step) * step;
+                const firstC = Math.floor(c0 / step) * step;
+                for (let r = firstR; r < r1; r += step) {
+                    const n0 = tile.North - (r / tile.ResolutionY) * (tile.North - tile.South);
+                    const n1 = tile.North
+                        - (Math.min(r + step, tile.ResolutionY) / tile.ResolutionY) * (tile.North - tile.South);
+                    for (let c = firstC; c < c1; c += step) {
+                        const w0 = tile.West + (c / tile.ResolutionX) * (tile.East - tile.West);
+                        const w1 = tile.West
+                            + (Math.min(c + step, tile.ResolutionX) / tile.ResolutionX) * (tile.East - tile.West);
+                        if (!this.coveredAt((w0 + w1) / 2, (n0 + n1) / 2)) {
+                            continue;
+                        }
+                        const tl = this.project(w0, n0);
+                        const tr = this.project(w1, n0);
+                        const br = this.project(w1, n1);
+                        const bl = this.project(w0, n1);
+                        if (!tl || !tr || !br || !bl) {
+                            continue;
+                        }
+                        path.moveTo(tl.x, tl.y);
+                        path.lineTo(tr.x, tr.y);
+                        path.lineTo(br.x, br.y);
+                        path.lineTo(bl.x, bl.y);
+                        path.closePath();
+                        drew = true;
+                    }
+                }
+            }
+            const gridWidth = (_b = this.settings.gridWidthPixels) !== null && _b !== void 0 ? _b : DEFAULT_GRID_WIDTH_PIXELS;
+            if (drewCoarse) {
+                this.ctx.save();
+                // Dimmer than a cell edge, so a tile boundary reads as "there is finer data here"
+                // rather than as a cell in its own right.
+                this.ctx.globalAlpha = TILE_OUTLINE_ALPHA;
+                this.ctx.strokeStyle = color;
+                this.ctx.lineWidth = gridWidth;
+                this.ctx.stroke(coarse);
+                this.ctx.restore();
+            }
+            if (!drew) {
+                return;
+            }
+            this.ctx.strokeStyle = color;
+            this.ctx.lineWidth = (_c = this.settings.gridWidthPixels) !== null && _c !== void 0 ? _c : DEFAULT_GRID_WIDTH_PIXELS;
+            this.ctx.stroke(path);
+        }
+        /*
+         * Lon/lat of the ground at the centre of the view, or null when the centre misses the globe.
+         */
+        groundAtScreenCentre() {
+            const scene = this.viewer.scene;
+            const centre = new Cartesian2(this.viewer.canvas.clientWidth / 2, this.viewer.canvas.clientHeight / 2);
+            const hit = scene.camera.pickEllipsoid(centre, Ellipsoid.WGS84);
+            if (!hit) {
+                return null;
+            }
+            const carto = Cartographic.fromCartesian(hit);
+            return {
+                lon: Math$1.toDegrees(carto.longitude),
+                lat: Math$1.toDegrees(carto.latitude)
+            };
+        }
+        /*
+         * Whether the composited raster holds data at a lon/lat.
+         */
+        coveredAt(lon, lat) {
+            if (!this.source) {
+                return false;
+            }
+            const cols = this.source.width;
+            const rows = this.source.height;
+            const col = Math.floor((lon - this.extent.West) / (this.extent.East - this.extent.West) * cols);
+            const row = Math.floor((this.extent.North - lat) / (this.extent.North - this.extent.South) * rows);
+            if (col < 0 || row < 0 || col >= cols || row >= rows) {
+                return false;
+            }
+            const at = (row * cols + col) * 4 + 3;
+            // Painted, not merely covered: a dry cell holds a reading the ramp deliberately hides, and
+            // ruling a grid over it draws detail where the picture shows none.
+            if (this.painted && this.painted.length === cols * rows * 4) {
+                return this.painted[at] > 0;
+            }
+            return this.source.data[at] >= 128;
+        }
+        isCovered(col, row, cols) {
+            return Boolean(this.source && this.source.data[(row * cols + col) * 4 + 3] >= 128);
+        }
+        /*
+         * Width of the widest label this overlay could draw, in pixels.
+         */
+        widestLabel(parts) {
+            const sample = [];
+            if (parts.indexOf("value") >= 0) {
+                sample.push("-000.00");
+            }
+            const range = [];
+            if (parts.indexOf("floor") >= 0) {
+                range.push("min: -000.00");
+            }
+            if (parts.indexOf("ceiling") >= 0) {
+                range.push("max: -000.00");
+            }
+            if (range.length) {
+                sample.push(range.join(" - "));
+            }
+            if (!sample.length) {
+                return 0;
+            }
+            const widest = Math.max(...sample.map((line) => this.ctx.measureText(line).width));
+            return widest + LABEL_GAP_PIXELS;
+        }
+        /*
+         * The four screen corners of one cell, or null if any of them will not project.
+         */
+        cellOutline(col, row, cols, rows) {
+            // On a pyramid the composited texel is not a cell. Outlining it would draw a second,
+            // uniform lattice over the tile grid, misaligned with it everywhere.
+            if (this.tiles && this.tiles.length) {
+                return this.tileCellOutline(this.lonAt(col, cols), this.latAt(row, rows));
+            }
+            const corners = [
+                this.project(this.lonAt(col - 0.5, cols), this.latAt(row - 0.5, rows)),
+                this.project(this.lonAt(col + 0.5, cols), this.latAt(row - 0.5, rows)),
+                this.project(this.lonAt(col + 0.5, cols), this.latAt(row + 0.5, rows)),
+                this.project(this.lonAt(col - 0.5, cols), this.latAt(row + 0.5, rows))
+            ];
+            return corners.every((c) => c) ? corners : null;
+        }
+        drawLabel(point, reading, parts, outline) {
+            var _a;
+            const dp = (_a = this.settings.decimals) !== null && _a !== void 0 ? _a : (Math.abs(reading.value) < 10 ? 2 : 1);
+            const lines = [];
+            if (parts.indexOf("value") >= 0) {
+                lines.push(reading.value.toFixed(dp));
+            }
+            // Named rather than a bare pair: two numbers under a third say nothing about which is
+            // the series low and which is its high.
+            const range = [];
+            if (parts.indexOf("floor") >= 0 && reading.floor !== undefined) {
+                range.push(`min: ${reading.floor.toFixed(dp)}`);
+            }
+            if (parts.indexOf("ceiling") >= 0 && reading.ceiling !== undefined) {
+                range.push(`max: ${reading.ceiling.toFixed(dp)}`);
+            }
+            if (range.length) {
+                lines.push(range.join(" - "));
+            }
+            if (!lines.length) {
+                return;
+            }
+            if (outline) {
+                this.ctx.strokeStyle = LABEL_ANCHOR_COLOR;
+                this.ctx.lineWidth = 1.5;
+                this.ctx.beginPath();
+                this.ctx.moveTo(outline[0].x, outline[0].y);
+                for (let i = 1; i < outline.length; i++) {
+                    this.ctx.lineTo(outline[i].x, outline[i].y);
+                }
+                this.ctx.closePath();
+                this.ctx.stroke();
+            }
+            const width = Math.max(...lines.map((l) => this.ctx.measureText(l).width)) + 10;
+            const height = lines.length * LINE_HEIGHT + 6;
+            const top = point.y - height / 2;
+            this.ctx.fillStyle = "rgba(16,16,14,0.72)";
+            this.ctx.beginPath();
+            this.ctx.roundRect(point.x - width / 2, top, width, height, LABEL_RADIUS);
+            this.ctx.fill();
+            lines.forEach((line, i) => {
+                this.ctx.fillStyle = i === 0 ? "#ffffff" : "#a8a89f";
+                this.ctx.fillText(line, point.x, top + LINE_HEIGHT * (i + 1) - 1);
+            });
+            this.drawn++;
+        }
+        /*
+         * The first cell with a reading at or near a lattice point, searched within its own block.
+         */
+        readNear(col, row, cols, rows, stride) {
+            const direct = this.readAt(col, row, cols);
+            if (direct && this.paintedAt(col, row, cols)) {
+                return { col, row, reading: direct };
+            }
+            if (stride <= 1) {
+                return null;
+            }
+            // Bounded, and stepped rather than exhaustive, so a large stride cannot make this the
+            // expensive part of a frame.
+            const step = Math.max(1, Math.floor(stride / MAX_LABEL_PROBES_PER_SIDE));
+            for (let r = row; r < Math.min(rows, row + stride); r += step) {
+                for (let c = col; c < Math.min(cols, col + stride); c += step) {
+                    const reading = this.readAt(c, r, cols);
+                    if (reading && this.paintedAt(c, r, cols)) {
+                        return { col: c, row: r, reading };
+                    }
+                }
+            }
+            return null;
+        }
+        paintedAt(col, row, cols) {
+            if (!this.painted) {
+                return true;
+            }
+            const at = (row * cols + col) * 4 + 3;
+            return this.painted[at] > 0;
+        }
+        // Decodes one cell, skipping anything the texture marks as having no data.
+        readAt(col, row, cols) {
+            var _a, _b;
+            const i = (row * cols + col) * 4;
+            if (!this.source || this.source.data[i + 3] < 128) {
+                return null;
+            }
+            const lo = this.metadata && typeof this.metadata.ValueMin === "number" ? this.metadata.ValueMin : 0;
+            const hi = this.metadata && typeof this.metadata.ValueMax === "number" ? this.metadata.ValueMax : 1;
+            const value = lo + (this.source.data[i] / 255) * (hi - lo);
+            const reading = { value };
+            const eLo = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.ExtremesValueMin;
+            const eHi = (_b = this.metadata) === null || _b === void 0 ? void 0 : _b.ExtremesValueMax;
+            if (this.floor && typeof eLo === "number" && typeof eHi === "number") {
+                reading.floor = eLo + decode16(this.floor.data, i) * (eHi - eLo);
+                // An anomaly archive's frames are already floor-relative, so the reading a user
+                // wants is the absolute one. This is the whole reason the floor is published.
+                if (TextureFrameSeriesAnimator.IsAnomalyMeasure(this.metadata)) {
+                    reading.value += reading.floor;
+                }
+            }
+            if (this.ceiling && typeof eLo === "number" && typeof eHi === "number") {
+                reading.ceiling = eLo + decode16(this.ceiling.data, i) * (eHi - eLo);
+            }
+            return reading;
+        }
+        lonAt(col, cols) {
+            return this.extent.West + ((col + 0.5) / cols) * (this.extent.East - this.extent.West);
+        }
+        latAt(row, rows) {
+            return this.extent.North - ((row + 0.5) / rows) * (this.extent.North - this.extent.South);
+        }
+        // The texel range overlapping the camera's view, so an off-screen texture costs nothing.
+        visibleTexels(cols, rows) {
+            const view = this.viewer.camera.computeViewRectangle(Ellipsoid.WGS84);
+            if (!view) {
+                return null;
+            }
+            const west = Math.max(this.extent.West, Math$1.toDegrees(view.west));
+            const east = Math.min(this.extent.East, Math$1.toDegrees(view.east));
+            const south = Math.max(this.extent.South, Math$1.toDegrees(view.south));
+            const north = Math.min(this.extent.North, Math$1.toDegrees(view.north));
+            if (west >= east || south >= north) {
+                return null;
+            }
+            const spanLon = this.extent.East - this.extent.West;
+            const spanLat = this.extent.North - this.extent.South;
+            return {
+                col0: Math.max(0, Math.floor((west - this.extent.West) / spanLon * cols) - 1),
+                col1: Math.min(cols - 1, Math.ceil((east - this.extent.West) / spanLon * cols) + 1),
+                row0: Math.max(0, Math.floor((this.extent.North - north) / spanLat * rows) - 1),
+                row1: Math.min(rows - 1, Math.ceil((this.extent.North - south) / spanLat * rows) + 1)
+            };
+        }
+        project(lon, lat) {
+            const world = Cartesian3.fromDegrees(lon, lat, 0);
+            const transforms = SceneTransforms;
+            // Renamed in newer Cesium, and this library runs on whatever the host app supplies.
+            const fn = transforms.worldToWindowCoordinates || transforms.wgs84ToWindowCoordinates;
+            return fn ? fn.call(transforms, this.viewer.scene, world) : null;
+        }
+    }
+    TextureValueLabels.Labels = Labels;
+    function decode16(data, i) {
+        return (data[i] * 256 + data[i + 1]) / 65535;
+    }
+})(TextureValueLabels || (TextureValueLabels = {}));
+
 /**
  * Renders a value texture as a displaced, coloured surface.
  * The source canvas is expected as RGBA: value in R, coverage in A.
@@ -40494,6 +42169,9 @@ var DisplacedSurfacePrimitive;
     const COVERAGE_CUTOFF = 0.35;
     // With no exaggeration stated, the full value range is drawn as this fraction of the extent's shorter side.
     const AUTO_RELIEF_FRACTION = 0.02;
+    // Ceiling on the derived relief. Sizing purely off the extent is fine for a parcel and absurd for
+    // a whole estuary: 4 m of water over an 82 km extent came out 1.6 km tall.
+    const AUTO_MAX_RELIEF_METRES = 250.0;
     // Terrain is sampled on this grid and interpolated between samples.
     // Per-texel sampling would be hundreds of thousands of lookups for a surface whose own data is far coarser than that.
     const GROUND_SAMPLES_PER_SIDE = 64;
@@ -40572,8 +42250,7 @@ void main() {
 `;
     const FRAGMENT_SHADER_GLSL300 = `
 uniform sampler2D u_valueTexture;
-uniform vec4 u_lowColor;
-uniform vec4 u_highColor;
+uniform sampler2D u_rampTexture;
 uniform float u_coverageCutoff;
 uniform vec2 u_texelSize;
 uniform float u_valueRange;
@@ -40588,7 +42265,13 @@ void main() {
     if (v_coverage < u_coverageCutoff) {
         discard;
     }
-    vec4 color = mix(u_lowColor, u_highColor, v_value);
+    // The ramp is baked to a lookup rather than lerped between two colours, so a banded style with a
+    // hidden floor reads the same here as it does on the flat drape.
+    // Without it this surface painted water the style hides, and the cell grid then correctly refused to outline any of it.
+    vec4 color = texture(u_rampTexture, vec2(clamp(v_value, 0.0, 1.0), 0.5));
+    if (color.a <= 0.0) {
+        discard;
+    }
 
     // Relief shading from the value gradient, so the displacement reads at a distance without
     // recomputing vertex normals every time the texture changes.
@@ -40787,6 +42470,7 @@ void main() {
             this.show = true;
             this.valueSource = null;
             this.lastPresentVersion = -1;
+            this.rampTexture = null;
             this.texture = null;
             this.textureDirty = true;
             this.shaderProgram = null;
@@ -40808,8 +42492,7 @@ void main() {
             this.baseHeight = (_d = options.baseHeight) !== null && _d !== void 0 ? _d : 0;
             this.pixelPlacement = options.pixelPlacement;
             this.tileSkirts = Boolean(options.tileSkirts);
-            this.lowColor = toCesiumColor(options.lowColor || DEFAULT_LOW_COLOR);
-            this.highColor = toCesiumColor(options.highColor || DEFAULT_HIGH_COLOR);
+            this.rampPixels = RampLookup(options.rampStops || null, options.lowColor || DEFAULT_LOW_COLOR, options.highColor || DEFAULT_HIGH_COLOR);
             this.tiles = buildTiles(hasCoverage);
         }
         GetFollowsGround() {
@@ -40868,6 +42551,7 @@ void main() {
                 return;
             }
             this.syncTexture(context);
+            this.syncRampTexture(context);
             this.requestGround();
             this.syncGroundTexture(context);
             // A tile needs one mesh before it has a bounding sphere to measure against.
@@ -40906,6 +42590,10 @@ void main() {
                 this.texture.destroy();
                 this.texture = null;
             }
+            if (this.rampTexture) {
+                this.rampTexture.destroy();
+                this.rampTexture = null;
+            }
             if (this.groundTexture) {
                 this.groundTexture.destroy();
                 this.groundTexture = null;
@@ -40999,6 +42687,25 @@ void main() {
             const width = Cartesian3.distance(southWest, southEast);
             return Math.max(1, width / Math.max(1, this.source ? this.source.width : 1));
         }
+        syncRampTexture(context) {
+            if (this.rampTexture) {
+                return;
+            }
+            this.rampTexture = new Texture({
+                context,
+                pixelFormat: PixelFormat.RGBA,
+                source: { width: this.rampPixels.length / 4, height: 1,
+                    arrayBufferView: this.rampPixels },
+                flipY: false,
+                sampler: new Sampler({
+                    wrapS: TextureWrap.CLAMP_TO_EDGE,
+                    wrapT: TextureWrap.CLAMP_TO_EDGE,
+                    // Linear across the ramp, so a gradient between stops stays smooth.
+                    minificationFilter: TextureMinificationFilter.LINEAR,
+                    magnificationFilter: TextureMagnificationFilter.LINEAR
+                })
+            });
+        }
         syncTexture(context) {
             const sizeChanged = this.texture
                 && (this.texture.width !== this.source.width || this.texture.height !== this.source.height);
@@ -41129,8 +42836,7 @@ void main() {
                             ? Math.max(2, Math.abs(self.valueMax - self.valueMin) * self.exaggeration * SKIRT_FRACTION)
                             : 0,
                         u_coverageCutoff: () => COVERAGE_CUTOFF,
-                        u_lowColor: () => self.lowColor,
-                        u_highColor: () => self.highColor,
+                        u_rampTexture: () => self.rampTexture,
                         u_texelSize: () => new Cartesian2(1 / self.source.width, 1 / self.source.height)
                     }
                 });
@@ -41191,12 +42897,10 @@ void main() {
         if (!(shorterSide > 0)) {
             return 1;
         }
-        return (shorterSide * AUTO_RELIEF_FRACTION) / range;
+        const relief = Math.min(shorterSide * AUTO_RELIEF_FRACTION, AUTO_MAX_RELIEF_METRES);
+        return relief / range;
     }
     DisplacedSurfacePrimitive.autoExaggeration = autoExaggeration;
-    function toCesiumColor(color) {
-        return new Color(color.red / 255, color.green / 255, color.blue / 255, color.alpha);
-    }
     function now() {
         return typeof performance !== "undefined" ? performance.now() : Date.now();
     }
@@ -41204,11 +42908,12 @@ void main() {
 
 const TEXTURE_FRAME_SERIES_ANIMATOR_KEY = "TextureFrameSeriesAnimator.Animator";
 const EXTRUSION_ANIMATOR_KEY = "TextureFrameSeriesAnimator.ExtrusionAnimator";
+const TEXTURE_VALUE_LABELS_KEY = "TextureValueLabels.Overlay";
 const DISPLACED_SURFACE_KEY = "DisplacedSurfacePrimitive.Surface";
 var EntityRenderEnginePolygon;
 (function (EntityRenderEnginePolygon) {
     async function Render(params) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const entity = params.entity;
         const style = params.style;
         const pRings = Entity$1.GetValue({
@@ -41259,18 +42964,22 @@ var EntityRenderEnginePolygon;
                 console.error(`Polygon.Render: failed to resolve extrusion texture for entity ${((_b = entity === null || entity === void 0 ? void 0 : entity.Bruce) === null || _b === void 0 ? void 0 : _b.ID) || "<NONE>"}:`, e);
             }
         }
+        const retained = params.offline
+            ? (_c = params.rendered) === null || _c === void 0 ? void 0 : _c[TEXTURE_FRAME_SERIES_ANIMATOR_KEY]
+            : null;
+        const keepsAnimator = Boolean(retained && !retained.IsDisposed());
         const drawsDisplacedSurface = Boolean(extrusionArchive);
         // The displaced surface IS the entity's fill, drawn as its own primitive at the value's height.
         // Leaving the flat polygon filled as well shows a second copy of the parcel on the ground under it.
         const hasFill = (drawsDisplacedSurface ? true
             : fillType === Style.EPolygonFillType.Texture
-                ? Boolean(textureDataUri || frameArchive || cFillColor.alpha > 0)
+                ? Boolean(textureDataUri || frameArchive || keepsAnimator || cFillColor.alpha > 0)
                 : cFillColor.alpha > 0);
         const fillMaterial = drawsDisplacedSurface
             ? Color.WHITE.withAlpha(0)
             : textureDataUri
                 ? new ImageMaterialProperty({ image: textureDataUri, transparent: true })
-                : frameArchive
+                : (frameArchive || keepsAnimator)
                     ? Color.WHITE.withAlpha(0)
                     : cFillColor;
         const lineColorTrace = style.lineColor ? Calculator.TraceGetColor(style.lineColor, entity, params.tags) : { value: null, effective: null };
@@ -41440,7 +43149,7 @@ var EntityRenderEnginePolygon;
         }
         // Must run before any material is baked below: the Animator takes over polygon.material, so a bake
         // has to know whether it is baking over a live animation or over a disposed one's restored material.
-        const animator = syncTextureFrameArchive(cEntity, drawsDisplacedSurface ? null : frameArchive, params.viewer, style.textureColorMask, style.maskTextureBaseline);
+        const animator = syncTextureFrameArchive(cEntity, drawsDisplacedSurface ? null : frameArchive, params.viewer, style.textureColorMask, style.maskTextureBaseline, undefined, undefined, wantsLabels(style), params.offline, polygonBbox(posses));
         syncDisplacedSurface({
             cEntity,
             extrusionArchive,
@@ -41448,7 +43157,30 @@ var EntityRenderEnginePolygon;
             style,
             entity,
             heightRef,
-            outerRingPosses: posses
+            outerRingPosses: posses,
+            offline: params.offline
+        });
+        const drapeExtent = polygonBbox(posses);
+        const labelArchive = drawsDisplacedSurface ? extrusionArchive : frameArchive;
+        syncTextureValueLabels({
+            cEntity,
+            viewer: params.viewer,
+            settings: overlaySettings(style, entity, params.tags),
+            extent: labelArchive
+                ? (drawsDisplacedSurface ? archiveExtent(labelArchive.metadata, posses) : drapeExtent)
+                : null,
+            animator: drawsDisplacedSurface
+                ? cEntity[EXTRUSION_ANIMATOR_KEY]
+                : animator,
+            metadata: labelArchive ? labelArchive.metadata : undefined,
+            offline: params.offline,
+            clipRing: posses.map((pos) => {
+                const carto = Cartographic.fromCartesian(pos);
+                return {
+                    lon: Math$1.toDegrees(carto.longitude),
+                    lat: Math$1.toDegrees(carto.latitude)
+                };
+            })
         });
         if (animator) {
             CesiumEntityStyler.SetDefaultTextureImage({
@@ -41509,7 +43241,7 @@ var EntityRenderEnginePolygon;
                 }
             }
             let borderPosses = posses.map(x => x.clone ? x.clone() : { ...x });
-            let cEntityBorder = (_d = (_c = params.rendered) === null || _c === void 0 ? void 0 : _c._siblingGraphics) === null || _d === void 0 ? void 0 : _d[0];
+            let cEntityBorder = (_e = (_d = params.rendered) === null || _d === void 0 ? void 0 : _d._siblingGraphics) === null || _e === void 0 ? void 0 : _e[0];
             cEntity._siblingGraphics = [];
             if (!cEntityBorder || ((!cEntityBorder.polyline && units == "px") ||
                 (!cEntityBorder.corridor && units == "m"))) {
@@ -41760,6 +43492,11 @@ var EntityRenderEnginePolygon;
      * Disposes a cEntity's TextureFrameSeriesAnimator.Animator (if any).
      */
     function DisposeTextureFrameSeriesAnimator(cEntity, viewer) {
+        const labelOverlay = cEntity === null || cEntity === void 0 ? void 0 : cEntity[TEXTURE_VALUE_LABELS_KEY];
+        if (labelOverlay) {
+            labelOverlay.remove();
+            cEntity[TEXTURE_VALUE_LABELS_KEY] = null;
+        }
         const existing = cEntity === null || cEntity === void 0 ? void 0 : cEntity[TEXTURE_FRAME_SERIES_ANIMATOR_KEY];
         if (existing && !existing.IsDisposed()) {
             existing.Dispose();
@@ -41885,10 +43622,13 @@ const _textureCache = new LRUCache(50);
  * @param params
  */
 function syncDisplacedSurface(params) {
-    var _a;
     const { cEntity, extrusionArchive, viewer, style, entity, heightRef, outerRingPosses } = params;
     const existingAnimator = cEntity[EXTRUSION_ANIMATOR_KEY];
     const existingSurface = cEntity[DISPLACED_SURFACE_KEY];
+    // Same reason as the fill animator: an unresolvable archive is not a removed one.
+    if (params.offline && existingSurface && !existingSurface.isDestroyed()) {
+        return;
+    }
     // Nothing to draw and nothing left over, which is every polygon that does not use this feature.
     if (!extrusionArchive && !existingAnimator && !existingSurface) {
         return;
@@ -41904,7 +43644,7 @@ function syncDisplacedSurface(params) {
     // to rebuild rather than update in place.
     if (reusable && existingSurface.GetFollowsGround() === placement.followGround) {
         existingSurface.SetBaseHeight(placement.baseHeight);
-        existingSurface.SetExaggeration((_a = style.extrusionExaggeration) !== null && _a !== void 0 ? _a : DisplacedSurfacePrimitive.autoExaggeration(existingSurface.GetExtent(), extrusionArchive.metadata.ValueMin, extrusionArchive.metadata.ValueMax));
+        existingSurface.SetExaggeration(exaggerationFor(style, extrusionArchive.metadata, existingSurface.GetExtent()));
         return;
     }
     disposeDisplacedSurface(cEntity, viewer);
@@ -41926,6 +43666,8 @@ function syncDisplacedSurface(params) {
         textureColorMask: style.textureColorMask,
         driveMaterial: false,
         produceValueCanvas: true,
+        metadata: extrusionArchive.metadata,
+        cellTexels: 1,
         baselineMask: extrusionArchive.metadata.BaselineMask,
         // Off-type for the same reason as the fill path: the pinned bruce-models predates the field.
         maskBaseline: style.maskTextureBaseline
@@ -41942,9 +43684,15 @@ function syncDisplacedSurface(params) {
         terrainProvider: viewer && viewer.terrainProvider,
         valueMin: extrusionArchive.metadata.ValueMin,
         valueMax: extrusionArchive.metadata.ValueMax,
-        exaggeration: style.extrusionExaggeration,
+        exaggeration: exaggerationFor(style, extrusionArchive.metadata, extent),
         lowColor: mask ? Color$1.ColorFromStr(mask.minColor) : null,
-        highColor: mask ? Color$1.ColorFromStr(mask.maxColor) : null
+        highColor: mask ? Color$1.ColorFromStr(mask.maxColor) : null,
+        // Normalised the same way the animator normalises them, so the surface and the flat drape
+        // agree about which values the style hides.
+        rampStops: (mask && mask.points || []).map((stop) => ({
+            position: TextureFrameSeriesAnimator.NormalisePosition(extrusionArchive.metadata, stop.position),
+            color: Color$1.ColorFromStr(stop.color)
+        })).filter((stop) => Boolean(stop.color))
     });
     surface.BindAnimator(animator);
     viewer.scene.primitives.add(surface);
@@ -41977,6 +43725,40 @@ function surfacePlacement(entity, heightRef) {
  * @param metadata
  * @param posses
  */
+/*
+ * The factor a displaced surface should use, honouring an explicit style setting first.
+ *
+ * An elevation is a real height against a datum, so scaling it is not a display choice: it lifts the
+ * surface off the datum it belongs to. Only a thickness is safe to exaggerate, which is why an
+ * elevation archive defaults to 1 rather than to a derived factor.
+ */
+function exaggerationFor(style, metadata, extent) {
+    if (style.extrusionExaggeration != null) {
+        return style.extrusionExaggeration;
+    }
+    if (metadata.Quantity === TextureFrameSeriesAnimator.QUANTITY_ELEVATION) {
+        return 1;
+    }
+    if (!extent) {
+        return undefined;
+    }
+    return DisplacedSurfacePrimitive.autoExaggeration(extent, metadata.ValueMin, metadata.ValueMax);
+}
+/*
+ * The lon/lat bounding rectangle of a ring, which is the frame Cesium drapes an image material in.
+ */
+function polygonBbox(posses) {
+    if (!posses || posses.length === 0) {
+        return undefined;
+    }
+    const rectangle = Rectangle.fromCartesianArray(posses);
+    return {
+        West: Math$1.toDegrees(rectangle.west),
+        East: Math$1.toDegrees(rectangle.east),
+        South: Math$1.toDegrees(rectangle.south),
+        North: Math$1.toDegrees(rectangle.north)
+    };
+}
 function archiveExtent(metadata, posses) {
     if (metadata.West != null && metadata.East != null && metadata.South != null && metadata.North != null) {
         return { West: metadata.West, East: metadata.East, South: metadata.South, North: metadata.North };
@@ -42027,9 +43809,22 @@ function disposeDisplacedSurface(cEntity, viewer) {
  * @param viewer
  * @param textureColorMask
  */
-function syncTextureFrameArchive(cEntity, frameArchive, viewer, textureColorMask, maskTextureBaseline) {
+function syncTextureFrameArchive(cEntity, frameArchive, viewer, textureColorMask, maskTextureBaseline, cellBorder, cellTexels, produceValueCanvas, offline, drapeExtent) {
     const existing = cEntity[TEXTURE_FRAME_SERIES_ANIMATOR_KEY];
-    if (frameArchive && existing && !existing.IsDisposed() && existing.GetArchiveUrl() === frameArchive.url) {
+    // Offline says nothing about whether the archive changed, only that it could not be asked.
+    if (offline && existing && !existing.IsDisposed()) {
+        return existing;
+    }
+    // Appearance is part of the reuse test, not just the archive URL. Recolouring a texture-driven
+    // polygon keeps the same archive, so matching on the URL alone kept the old Animator and the
+    // style edit appeared to do nothing at all.
+    const appearance = TextureFrameSeriesAnimator.AppearanceSignature({
+        textureColorMask, cellBorder, cellTexels, maskBaseline: maskTextureBaseline,
+        valueCanvas: produceValueCanvas, drape: drapeExtent
+    });
+    if (frameArchive && existing && !existing.IsDisposed()
+        && existing.GetArchiveUrl() === frameArchive.url
+        && existing.GetAppearanceSignature() === appearance) {
         return existing;
     }
     if (existing && !existing.IsDisposed()) {
@@ -42045,12 +43840,118 @@ function syncTextureFrameArchive(cEntity, frameArchive, viewer, textureColorMask
         archiveUrl: frameArchive.url,
         frames: frameArchive.metadata.Frames,
         textureColorMask,
+        metadata: frameArchive.metadata,
+        cellBorder,
+        cellTexels,
         baselineMask: frameArchive.metadata.BaselineMask,
-        maskBaseline: maskTextureBaseline
+        maskBaseline: maskTextureBaseline,
+        produceValueCanvas,
+        drapeExtent
     });
     cEntity[TEXTURE_FRAME_SERIES_ANIMATOR_KEY] = animator;
     return animator;
 }
+/**
+ * Folds the cell-border and value-label style into the single overlay that draws both.
+ *
+ * Returns undefined when neither is asked for, which is what keeps the overlay off entirely.
+ */
+function wantsLabels(style) {
+    const texture = style.texture;
+    return Boolean(texture && !Array.isArray(texture) && texture.label);
+}
+/*
+ * How the cell grid and its values are drawn, which the style does not get a say in.
+ *
+ * A white hairline reads over every ramp colour without competing with it, and the spacing and cap
+ * are what a parcel-sized archive needs to stay readable while the camera moves. Exposing them
+ * bought nothing except thresholds an author could get wrong.
+ */
+const LABEL_GRID_COLOR = "rgba(255,255,255,0.55)";
+const LABEL_GRID_WIDTH_PIXELS = 1;
+const LABEL_MIN_SPACING_PIXELS = 78;
+const LABEL_MAX_LABELS = 240;
+function overlaySettings(style, entity, tags) {
+    if (!wantsLabels(style)) {
+        return undefined;
+    }
+    return {
+        gridColor: LABEL_GRID_COLOR,
+        gridWidthPixels: LABEL_GRID_WIDTH_PIXELS,
+        minSpacingPixels: LABEL_MIN_SPACING_PIXELS,
+        maxLabels: LABEL_MAX_LABELS
+    };
+}
+/**
+ * Keeps a value-label overlay in step with whichever animator is driving the polygon.
+ *
+ * Redrawn on preRender rather than on frame changes: labels are screen-space, so panning and zooming
+ * move them even when the data has not advanced at all.
+ */
+function syncTextureValueLabels(params) {
+    const { cEntity, viewer, settings, extent, animator, metadata } = params;
+    const existing = cEntity[TEXTURE_VALUE_LABELS_KEY];
+    // Offline has no extent to rebuild the overlay from, so an existing one is left running.
+    if (params.offline && existing) {
+        return;
+    }
+    if (existing) {
+        existing.remove();
+        cEntity[TEXTURE_VALUE_LABELS_KEY] = null;
+    }
+    if (!settings || !extent || !animator) {
+        return;
+    }
+    const labels = new TextureValueLabels.Labels({
+        viewer, extent, settings, metadata,
+        tiles: TextureFrameSeriesAnimator.IsTiledLayout(metadata)
+            ? metadata.Tiles.map((tile) => ({
+                West: tile.West, East: tile.East, South: tile.South, North: tile.North,
+                ResolutionX: tile.ResolutionX, ResolutionY: tile.ResolutionY
+            }))
+            : undefined,
+        clipRing: params.clipRing
+    });
+    let lastVersion = -1;
+    let appliedFloor = null;
+    let appliedCeiling = null;
+    // The extremes are what turn an anomaly frame back into a reading, so they are worth two extra
+    // Range GETs here even though nothing else in the render path wants them.
+    animator.EnsureExtremes();
+    const remove = viewer.scene.preRender.addEventListener(() => {
+        if (animator.IsDisposed()) {
+            return;
+        }
+        const canvas = animator.GetValueCanvas();
+        if (!canvas) {
+            return;
+        }
+        const version = animator.GetPresentVersion();
+        if (version !== lastVersion) {
+            lastVersion = version;
+            const ctx = canvas.getContext("2d");
+            labels.SetSource(ctx.getImageData(0, 0, canvas.width, canvas.height));
+            labels.SetPainted(animator.GetDisplayedPixels());
+        }
+        // Tracked by reference rather than latched on the first one to arrive: a tiled archive
+        // composites the floor and the ceiling separately, so latching once would leave every label
+        // showing a minimum and no maximum.
+        const extremes = animator.GetExtremes();
+        if (extremes.floor !== appliedFloor || extremes.ceiling !== appliedCeiling) {
+            appliedFloor = extremes.floor;
+            appliedCeiling = extremes.ceiling;
+            labels.SetExtremes(appliedFloor, appliedCeiling);
+        }
+        labels.Render();
+    });
+    cEntity[TEXTURE_VALUE_LABELS_KEY] = {
+        labels,
+        remove: () => {
+            remove();
+            labels.Dispose();
+        }
+    };
+}
 /**
  * Derives a min/max/label time-range segment from a resolved frame archive's Frames metadata,
  * for reporting up to whoever owns the menu item this entity belongs to (see IParams.onSeriesDiscovered).
@@ -43658,7 +45559,7 @@ var StyleUtils;
     StyleUtils.ApplyTypeStyle = ApplyTypeStyle;
 })(StyleUtils || (StyleUtils = {}));
 
-const VERSION = "7.2.0";
+const VERSION = "7.2.2";
 /**
  * Updates the environment instance used by bruce-cesium to one specified.
  * This can be used to ensure that the instance a parent is referencing is shared between bruce-cesium, bruce-models, and the parent app.
@@ -43675,5 +45576,5 @@ const getENVIRONMENT = () => {
     return ENVIRONMENT;
 };
 
-export { VERSION, setENVIRONMENT, getENVIRONMENT, CesiumAnimatedInOut, DisplacedSurfacePrimitive, CesiumAnimatedProperty, isStyleChanged, isOutlineChanged$1 as isOutlineChanged, StyleEffective, EntityRenderEngine, EntityRenderEngineModel3d, EntityRenderEnginePoint, EntityRenderEnginePolygon, EntityRenderEnginePolyline, MenuItemCreator, MenuItemManager, CesiumParabola, EntityLabel, LiveCursor, SharedGetters, DataSourceStaticKmlManager, DataLabRenderManager, EntitiesIdsRenderManager, EntitiesLoadedRenderManager, EntitiesRenderManager, EntityRenderManager, AssemblyRenderManager, GoogleSearchRenderManager, RelationsRenderManager, RenderManager, TilesetArbRenderManager, TilesetCadRenderManager, TilesetEntitiesRenderManager, TilesetGooglePhotosRenderManager, TilesetOsmRenderManager, TilesetPointcloudRenderManager, TileRenderEngine, createTileset, TilesetRenderEngine, ViewRenderEngine, VisualRegisterCuller, VisualsRegister, XGridsRenderEngine, CesiumEntityStyler, DrawingUtils, EntityUtils, MeasureUtils, StyleUtils, CESIUM_INSPECTOR_KEY, CESIUM_TIMELINE_KEY, CESIUM_TIMELINE_LIVE_KEY, CESIUM_TIMELINE_LIVE_PADDING_KEY, CESIUM_TIMELINE_INTERVAL_KEY, CESIUM_MODEL_SPACE_KEY, DEFAULT_LIVE_PADDING_SECONDS, DEFAULT_BRIGHTNESS_SHIFT, DEFAULT_LIGHT_INTENSITY, LIGHTING_SETTINGS_VERSION, LIGHT_INTENSITY_COMPENSATION, MAX_COMPENSATED_LIGHT_INTENSITY, ViewUtils, CesiumViewMonitor, ViewGroundArea, ViewerEventTracker, ViewerUtils, Draw3dPolygon, Draw3dPolyline, MeasureCreator, Walkthrough, WidgetControlViewBar, WidgetControlViewBarSearch, WidgetLeftPanelTab, WidgetLeftPanelTabBookmarks, WidgetLeftPanelTabDashboard, EMenuItemState, WidgetLeftPanelTabMenuItems, Widget, VIEWER_BOOKMARKS_WIDGET_KEY, WidgetBookmarks, WidgetBranding, WidgetCursorBar, WidgetEmbeddedInfoView, WidgetInfoView, VIEWER_LEFT_PANEL_WIDGET_KEY, VIEWER_LEFT_PANEL_CSS_VAR_LEFT, WidgetLeftPanel, WidgetNavCompass$$1 as WidgetNavCompass, VIEWER_VIEW_BAR_WIDGET_KEY, WidgetViewBar };
+export { VERSION, setENVIRONMENT, getENVIRONMENT, CesiumAnimatedInOut, DisplacedSurfacePrimitive, CesiumAnimatedProperty, isStyleChanged, isOutlineChanged$1 as isOutlineChanged, StyleEffective, EntityRenderEngine, EntityRenderEngineModel3d, EntityRenderEnginePoint, EntityRenderEnginePolygon, EntityRenderEnginePolyline, TextureValueLabels, MenuItemCreator, MenuItemManager, CesiumParabola, EntityLabel, LiveCursor, SharedGetters, DataSourceStaticKmlManager, DataLabRenderManager, EntitiesIdsRenderManager, EntitiesLoadedRenderManager, EntitiesRenderManager, EntityRenderManager, AssemblyRenderManager, GoogleSearchRenderManager, RelationsRenderManager, RenderManager, TilesetArbRenderManager, TilesetCadRenderManager, TilesetEntitiesRenderManager, TilesetGooglePhotosRenderManager, TilesetOsmRenderManager, TilesetPointcloudRenderManager, TileRenderEngine, createTileset, TilesetRenderEngine, ViewRenderEngine, VisualRegisterCuller, VisualsRegister, XGridsRenderEngine, CesiumEntityStyler, DrawingUtils, EntityUtils, MeasureUtils, StyleUtils, CESIUM_INSPECTOR_KEY, CESIUM_TIMELINE_KEY, CESIUM_TIMELINE_LIVE_KEY, CESIUM_TIMELINE_LIVE_PADDING_KEY, CESIUM_TIMELINE_INTERVAL_KEY, CESIUM_MODEL_SPACE_KEY, DEFAULT_LIVE_PADDING_SECONDS, DEFAULT_BRIGHTNESS_SHIFT, DEFAULT_LIGHT_INTENSITY, LIGHTING_SETTINGS_VERSION, LIGHT_INTENSITY_COMPENSATION, MAX_COMPENSATED_LIGHT_INTENSITY, ViewUtils, CesiumViewMonitor, ViewGroundArea, ViewerEventTracker, ViewerUtils, Draw3dPolygon, Draw3dPolyline, MeasureCreator, Walkthrough, WidgetControlViewBar, WidgetControlViewBarSearch, WidgetLeftPanelTab, WidgetLeftPanelTabBookmarks, WidgetLeftPanelTabDashboard, EMenuItemState, WidgetLeftPanelTabMenuItems, Widget, VIEWER_BOOKMARKS_WIDGET_KEY, WidgetBookmarks, WidgetBranding, WidgetCursorBar, WidgetEmbeddedInfoView, WidgetInfoView, VIEWER_LEFT_PANEL_WIDGET_KEY, VIEWER_LEFT_PANEL_CSS_VAR_LEFT, WidgetLeftPanel, WidgetNavCompass$$1 as WidgetNavCompass, VIEWER_VIEW_BAR_WIDGET_KEY, WidgetViewBar };
 //# sourceMappingURL=bruce-cesium.es5.js.map