bruce-cesium 5.4.0 → 5.4.2

package/dist/bruce-cesium.umd.js

@@ -1366,6 +1366,9 @@
         }
         CesiumAnimatedProperty.AnimatePositionSeries = AnimatePositionSeries;
         function GetSeriesPossesForHistoricEntity(viewer, heightRef, historic) {
+            if (!historic || !historic.length) {
+                return [];
+            }
             const series = [];
             for (let i = 0; i < historic.length; i++) {
                 const item = historic[i];
@@ -1404,25 +1407,6 @@
             return series;
         }
         CesiumAnimatedProperty.GetSeriesPossesForHistoricEntity = GetSeriesPossesForHistoricEntity;
-        /**
-         * Animates a tileset position and heading from a series of positions over time.
-         * Unlike other animation functions that directly modify the tileset,
-         * this provides a callback with calculated values for the caller to apply.
-         *
-         * Example:
-         * ```
-         * const dispose = CesiumAnimatedProperty.AnimateTPositionSeries({
-         *    viewer: viewer,
-         *    posses: positionSeries,
-         *    onUpdate: (position, heading) => {}
-         * });
-         *
-         * // To dispose:
-         * dispose();
-         * ```
-         * @param params Animation parameters
-         * @returns Function to stop the animation
-         */
         class AnimateTPositionSeries {
             constructor(params) {
                 // Cache for calculated values.
@@ -1430,23 +1414,74 @@
                 this.lastCalcPos3d = null;
                 this.lastCalcHeading = null;
                 this.removal = null;
+                // Track the timeline range for which we have data.
+                this.minDate = null;
+                this.maxDate = null;
+                // Map of positions by timestamp for quick lookup and deduplication.
+                this.positionsMap = new Map();
                 this.viewer = params.viewer;
                 this.onUpdate = params.onUpdate;
                 this.onDone = params.onDone;
-                // No positions to animate.
-                if (!params.posses || params.posses.length === 0) {
-                    return;
+                this.onRangeChangeCallback = params.onRangeChange;
+                // Initialize the positions map
+                this.positionsMap = new Map();
+                // Add initial positions
+                if (params.posses && params.posses.length > 0) {
+                    this.addPositions(params.posses);
                 }
-                // Order positions by date.
-                const orderedPosses = [...params.posses].sort((a, b) => {
-                    return a.dateTime.getTime() - b.dateTime.getTime();
-                });
-                // Process headings - if all are null or 0, assume all are null.
-                this.positions = this.processHeadings([...orderedPosses]);
                 // Set up the animation loop.
                 this.removal = this.viewer.scene.postUpdate.addEventListener(() => this.update());
                 this.update();
             }
+            /**
+             * Add new positions to the animation.
+             * Will deduplicate positions with the same timestamp and sort them.
+             * @param newPositions Positions to add
+             */
+            addPositions(newPositions) {
+                if (!newPositions || newPositions.length === 0) {
+                    return;
+                }
+                // Add new positions to our map, overwriting any existing positions with the same timestamp
+                for (const pos of newPositions) {
+                    const key = pos.dateTime.toISOString();
+                    this.positionsMap.set(key, pos);
+                }
+                // Rebuild our sorted array from the map
+                this.positions = Array.from(this.positionsMap.values()).sort((a, b) => {
+                    return a.dateTime.getTime() - b.dateTime.getTime();
+                });
+                // Process headings
+                this.positions = this.processHeadings([...this.positions]);
+                // Update our min/max dates
+                if (this.positions.length > 0) {
+                    const first = this.positions[0];
+                    const last = this.positions[this.positions.length - 1];
+                    if (!this.minDate || first.dateTime < this.minDate) {
+                        this.minDate = first.dateTime;
+                    }
+                    if (!this.maxDate || last.dateTime > this.maxDate) {
+                        this.maxDate = last.dateTime;
+                    }
+                }
+            }
+            /**
+             * Get the current date range covered by our positions.
+             */
+            getDateRange() {
+                return {
+                    minDate: this.minDate,
+                    maxDate: this.maxDate
+                };
+            }
+            /**
+             * Trigger the onRangeChange callback to request more data.
+             */
+            onRangeChange() {
+                if (this.onRangeChangeCallback) {
+                    this.onRangeChangeCallback();
+                }
+            }
             /**
              * Stop the animation and call the onDone callback if provided.
              */
@@ -1460,9 +1495,12 @@
                 }
             }
             /**
-             * Update function called on each frame.
+             * Update function called on each render frame.
              */
             update() {
+                if (!this.positions || this.positions.length === 0) {
+                    return;
+                }
                 let now = this.viewer.scene.lastRenderTime;
                 if (!now) {
                     now = this.viewer.clock.currentTime;
@@ -1504,11 +1542,19 @@
                 return posses;
             }
             /**
-             * Calculate the position at the given time
+             * Calculate the position at the given time.
              */
             calculatePosition(currentTimeMs) {
                 const posses = this.positions;
-                // See if we're before the first position
+                // No positions to interpolate
+                if (!posses || posses.length === 0) {
+                    return {
+                        pos3d: new Cesium.Cartesian3(),
+                        indexLast: -1,
+                        indexNext: -1
+                    };
+                }
+                // See if we're before the first position.
                 if (currentTimeMs <= posses[0].dateTime.getTime()) {
                     return {
                         pos3d: posses[0].pos3d,
@@ -1516,7 +1562,7 @@
                         indexNext: 0
                     };
                 }
-                // See if we're after the last position
+                // See if we're after the last position.
                 if (currentTimeMs >= posses[posses.length - 1].dateTime.getTime()) {
                     const lastIndex = posses.length - 1;
                     return {
@@ -1525,35 +1571,41 @@
                         indexNext: lastIndex
                     };
                 }
-                // Find the current position
+                // Binary search to find the closest position.
+                let start = 0;
+                let end = posses.length - 1;
                 let lastIndex = 0;
-                for (let i = 1; i < posses.length; i++) {
-                    let pos = posses[i];
-                    if (currentTimeMs >= pos.dateTime.getTime()) {
-                        lastIndex = i;
+                while (start <= end) {
+                    const mid = Math.floor((start + end) / 2);
+                    const midTime = posses[mid].dateTime.getTime();
+                    if (midTime <= currentTimeMs) {
+                        lastIndex = mid;
+                        start = mid + 1;
                     }
                     else {
-                        break;
+                        end = mid - 1;
                     }
                 }
                 const last = posses[lastIndex];
-                const next = posses[lastIndex + 1];
-                // If no next position, use the last one
-                if (!next) {
+                const nextIndex = Math.min(lastIndex + 1, posses.length - 1);
+                const next = posses[nextIndex];
+                // If we found an exact match or there's no next position.
+                if (currentTimeMs === last.dateTime.getTime() || lastIndex === nextIndex) {
                     return {
                         pos3d: last.pos3d,
                         indexLast: lastIndex,
                         indexNext: lastIndex
                     };
                 }
-                // Interpolate the position
-                const progress = (currentTimeMs - last.dateTime.getTime()) /
-                    (next.dateTime.getTime() - last.dateTime.getTime());
+                // Interpolate between the two closest positions.
+                const lastTime = last.dateTime.getTime();
+                const nextTime = next.dateTime.getTime();
+                const progress = (currentTimeMs - lastTime) / (nextTime - lastTime);
                 const interpolatedPos = Cesium.Cartesian3.lerp(last.pos3d, next.pos3d, progress, new Cesium.Cartesian3());
                 return {
                     pos3d: interpolatedPos,
                     indexLast: lastIndex,
-                    indexNext: lastIndex + 1
+                    indexNext: nextIndex
                 };
             }
             /**
@@ -5225,6 +5277,12 @@
 
     const CESIUM_INSPECTOR_KEY = "_nextspace_inspector";
     const CESIUM_TIMELINE_KEY = "_nextspace_timeline";
+    const CESIUM_TIMELINE_LIVE_KEY = "_nextspace_timeline_live";
+    const CESIUM_TIMELINE_LIVE_PADDING_FORWARD_KEY = "_nextspace_timeline_live_padding_forward";
+    const CESIUM_TIMELINE_LIVE_PADDING_BACKWARD_KEY = "_nextspace_timeline_live_padding_backward";
+    const CESIUM_TIMELINE_INTERVAL_KEY = "_nextspace_timeline_interval";
+    const DEFAULT_LIVE_PADDING_FORWARD_SECONDS = 5 * 60;
+    const DEFAULT_LIVE_PADDING_BACKWARD_SECONDS = 25 * 60;
     (function (ViewUtils) {
         function GatherLegacyMapTiles(params) {
             const viewer = params.viewer;
@@ -5446,7 +5504,10 @@
                 currentTimeIso: clock.currentTime.toString(),
                 stopTime: clock.stopTime,
                 stopTimeIso: clock.stopTime.toString(),
-                areCesiumValues: clock[CESIUM_TIMELINE_KEY] != true
+                areCesiumValues: clock[CESIUM_TIMELINE_KEY] != true,
+                isLive: clock[CESIUM_TIMELINE_LIVE_KEY] == true,
+                livePaddingForwardSeconds: clock[CESIUM_TIMELINE_LIVE_PADDING_FORWARD_KEY] || DEFAULT_LIVE_PADDING_FORWARD_SECONDS,
+                livePaddingBackwardSeconds: clock[CESIUM_TIMELINE_LIVE_PADDING_BACKWARD_KEY] || DEFAULT_LIVE_PADDING_BACKWARD_SECONDS
             };
         }
         ViewUtils.GetTimeDetails = GetTimeDetails;
@@ -5504,8 +5565,59 @@
             }
             viewer.scene.requestRender();
             clock[CESIUM_TIMELINE_KEY] = true;
+            clock[CESIUM_TIMELINE_LIVE_KEY] = params.isLive == true;
+            clock[CESIUM_TIMELINE_LIVE_PADDING_FORWARD_KEY] = params.livePaddingSeconds || DEFAULT_LIVE_PADDING_FORWARD_SECONDS;
+            clock[CESIUM_TIMELINE_LIVE_PADDING_BACKWARD_KEY] = params.livePaddingSeconds || DEFAULT_LIVE_PADDING_BACKWARD_SECONDS;
+            if (params.isLive) {
+                startLive(viewer);
+            }
+            else {
+                stopLive(viewer);
+            }
         }
         ViewUtils.SetTimeDetails = SetTimeDetails;
+        function startLive(viewer) {
+            if (viewer[CESIUM_TIMELINE_INTERVAL_KEY]) {
+                // Already live.
+                return;
+            }
+            const doUpdate = () => {
+                if (!viewer || viewer.isDestroyed() || !viewer.scene) {
+                    stopLive(viewer);
+                    return;
+                }
+                // Get the current settings.
+                const tDetails = GetTimeDetails({ viewer });
+                const clock = viewer.clock;
+                if (clock) {
+                    clock.shouldAnimate = true;
+                    clock.multiplier = 1;
+                    clock.currentTime = Cesium.JulianDate.now();
+                    clock.startTime = Cesium.JulianDate.addSeconds(clock.currentTime, -tDetails.livePaddingBackwardSeconds, new Cesium.JulianDate());
+                    clock.stopTime = Cesium.JulianDate.addSeconds(clock.currentTime, tDetails.livePaddingForwardSeconds, new Cesium.JulianDate());
+                    clock.clockRange = Cesium.ClockRange.UNBOUNDED;
+                }
+            };
+            // We'll start an interval that occasionally updates the Cesium clock to stay in the desired settings.
+            // Since it moves live (1 second per second), we don't have to worry about the ranges being out of date quickly.
+            viewer[CESIUM_TIMELINE_INTERVAL_KEY] = setInterval(() => {
+                doUpdate();
+            }, 800);
+            viewer[CESIUM_TIMELINE_LIVE_KEY] = true;
+            // Initial update.
+            doUpdate();
+        }
+        function stopLive(viewer) {
+            if (!viewer) {
+                return;
+            }
+            let interval = viewer[CESIUM_TIMELINE_INTERVAL_KEY];
+            if (interval) {
+                clearInterval(interval);
+                viewer[CESIUM_TIMELINE_INTERVAL_KEY] = null;
+            }
+            viewer[CESIUM_TIMELINE_LIVE_KEY] = false;
+        }
     })(exports.ViewUtils || (exports.ViewUtils = {}));
 
     const MODEL_MIN_RADIUS = 10;
@@ -13131,14 +13243,16 @@
                 }
                 return this.onUpdate;
             }
-            constructor(data, viewPort, batchSize) {
+            constructor(data, viewPort, batchSize, singleEmit = false) {
                 this.viewPortRemoval = null;
                 this.viewRect = null;
                 this.viewCenter = null;
                 this.onUpdate = null;
+                this.emitted = false;
                 this.data = data;
                 this.viewPort = viewPort;
                 this.batchSize = batchSize;
+                this.singleEmit = singleEmit;
             }
             Start() {
                 this.viewPortRemoval = this.viewPort.Updated().Subscribe(() => {
@@ -13169,6 +13283,10 @@
                 }
             }
             startGetterLoop() {
+                if (this.singleEmit && this.emitted) {
+                    return;
+                }
+                this.emitted = true;
                 clearInterval(this.getterInterval);
                 if (!this.viewRect || !this.viewCenter) {
                     return;
@@ -13895,19 +14013,6 @@
     })(exports.EntitiesLoadedRenderManager || (exports.EntitiesLoadedRenderManager = {}));
 
     const BATCH_SIZE$2 = 500;
-    function getValue$4(viewer, obj) {
-        if (obj === null || obj === void 0 ? void 0 : obj.getValue) {
-            let date = viewer.scene.lastRenderTime;
-            if (!date) {
-                date = viewer.clock.currentTime;
-            }
-            return obj.getValue(date);
-        }
-        return obj;
-    }
-    function colorToCColor$3(color) {
-        return new Cesium.Color(color.red ? color.red / 255 : 0, color.green ? color.green / 255 : 0, color.blue ? color.blue / 255 : 0, color.alpha);
-    }
     (function (EntitiesIdsRenderManager) {
         class Manager {
             get Disposed() {
@@ -13919,23 +14024,27 @@
                 this.getterSub = null;
                 this.disposed = false;
                 this.renderedEntities = {};
-                this.sources = [];
-                // Highly experimental flag to try improve rendering large sets of polygons and polylines.
-                // Many things are not supported when this is enabled.
-                this.useGeojson = false;
+                // Callback to dispose the monitoring of the viewer's timeline for historic data.
+                this.viewerDateTimeChangeRemoval = null;
+                // Entity ID -> historic information on the Entity.
+                // This helps us manage what needs changing whenever we receive the same Entity update, or when the timeline range changes.
+                this.entitiesHistoric = {};
+                // Queue for renderAsIndividuals to avoid concurrent calls.
+                this.renderQueueActive = false;
+                this.renderQueue = [];
+                this.renderQueueForceFlags = [];
                 const { viewer, apiGetter, monitor, item, register: visualsManager } = params;
                 this.viewer = viewer;
                 this.apiGetter = apiGetter;
                 this.monitor = monitor;
                 this.item = item;
                 this.visualsManager = visualsManager;
-                this.useGeojson = item.renderAsGeojson == true;
                 if (this.item.enableClustering) {
                     this.clustering = new PointClustering(visualsManager, this.item.id, (_a = this.item) === null || _a === void 0 ? void 0 : _a.clustering);
                 }
             }
             Init() {
-                var _a;
+                var _a, _b, _c;
                 if (this.disposed) {
                     throw (new Error("This item is disposed."));
                 }
@@ -13955,15 +14064,19 @@
                 if (this.renderPriority == null) {
                     this.renderPriority = 2;
                 }
-                if (this.renderAsGeojson && this.item.CameraZoomSettings.length > 1) {
-                    console.warn("Geojson rendering does not support multiple zoom controls. Only the first one will be used.");
-                    this.item.CameraZoomSettings = [this.item.CameraZoomSettings[0]];
-                }
-                this.getter = new BatchedDataGetter.Getter(this.item.BruceEntity.EntityIds, this.monitor, BATCH_SIZE$2);
+                this.getter = new BatchedDataGetter.Getter(this.item.BruceEntity.EntityIds, this.monitor, BATCH_SIZE$2, 
+                // Don't emit the same Entity multiple times.
+                true);
                 this.getterSub = this.getter.OnUpdate.Subscribe((ids) => {
                     this.onGetterUpdate(ids);
                 });
                 this.getter.Start();
+                if (((_b = this.item.BruceEntity) === null || _b === void 0 ? void 0 : _b.historic) || ((_c = this.item.BruceEntity) === null || _c === void 0 ? void 0 : _c.historicAttrKey)) {
+                    this.viewerDateTimeSub();
+                }
+                else {
+                    this.viewerDateTimeDispose();
+                }
             }
             Dispose() {
                 if (this.disposed) {
@@ -13981,11 +14094,11 @@
                 });
                 (_b = this.clustering) === null || _b === void 0 ? void 0 : _b.Dispose();
                 this.clustering = null;
-                for (let i = 0; i < this.sources.length; i++) {
-                    const source = this.sources[i];
-                    this.viewer.dataSources.remove(source);
-                }
-                this.sources = [];
+                this.viewerDateTimeDispose();
+                // Clear render queue when disposed
+                this.renderQueue = [];
+                this.renderQueueForceFlags = [];
+                this.renderQueueActive = false;
             }
             async ReRender(params) {
                 let { entityIds, force, entities } = params;
@@ -14020,10 +14133,6 @@
                 }
                 if (CameraZoomSettings === null || CameraZoomSettings === void 0 ? void 0 : CameraZoomSettings.length) {
                     this.item.CameraZoomSettings = CameraZoomSettings;
-                    if (this.renderAsGeojson && this.item.CameraZoomSettings.length > 1) {
-                        console.warn("Geojson rendering does not support multiple zoom controls. Only the first one will be used.");
-                        this.item.CameraZoomSettings = [this.item.CameraZoomSettings[0]];
-                    }
                 }
                 if (queueRerender != false) {
                     const entityIds = Object.keys(this.renderedEntities);
@@ -14035,15 +14144,25 @@
                 }
             }
             async onGetterUpdate(entityIds, force = false) {
-                if (this.disposed || this.viewer.isDestroyed()) {
+                if (this.disposed || this.viewer.isDestroyed() || !(entityIds === null || entityIds === void 0 ? void 0 : entityIds.length)) {
                     return;
                 }
                 try {
                     const api = this.apiGetter.getApi();
+                    let newDateTime = null;
+                    if (this.item.BruceEntity.historic || this.item.BruceEntity.historicAttrKey) {
+                        newDateTime = Cesium.JulianDate.toDate(this.viewer.clock.currentTime).toISOString();
+                    }
                     const { entities } = await BModels.Entity.GetListByIds({
                         api,
                         entityIds,
-                        migrated: true
+                        historicPoint: newDateTime,
+                        historicKey: this.item.BruceEntity.historicAttrKey,
+                        migrated: true,
+                        // If we're taking 5+ minutes to make a query, it's a dud.
+                        // This is a timeout imposed on our DB and not external sources.
+                        // Honestly could lower down to 30 seconds, but we'll keep it high for now.
+                        maxSearchTimeSec: 60 * 5,
                     });
                     await this.renderEntities(entities, force);
                 }
@@ -14052,347 +14171,82 @@
                 }
             }
             async renderEntities(entities, force = false) {
-                if (this.disposed || this.viewer.isDestroyed()) {
+                if (this.disposed || this.viewer.isDestroyed() || !(entities === null || entities === void 0 ? void 0 : entities.length)) {
                     return;
                 }
                 try {
-                    if (this.useGeojson) {
-                        const zoomItem = this.item.CameraZoomSettings[0];
-                        if (zoomItem.DisplayType == BModels.ZoomControl.EDisplayType.Point) {
-                            // We'll just render these as individuals since we don't support point geojson.
-                            await this.renderAsIndividuals(entities, force);
-                        }
-                        else {
-                            await this.renderAsGeojson(entities, force);
-                        }
-                    }
-                    else {
-                        await this.renderAsIndividuals(entities, force);
-                    }
+                    await this.queueRenderAsIndividuals(entities, force);
                 }
                 catch (e) {
                     console.error(e);
                 }
             }
             /**
-             * Our optimized and more stable path.
-             * We construct a geojson that we draw in one go.
-             * @param entities
-             * @param force TODO: This should re-render entities that are already rendered.
+             * Queues a render operation to be processed in sequence.
+             * If an operation is already in progress, this will be added to the queue.
              */
-            async renderAsGeojson(entities, force) {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-                entities = entities.filter((entity) => {
-                    var _a;
-                    return !this.renderedEntities[(_a = entity.Bruce) === null || _a === void 0 ? void 0 : _a.ID];
-                });
-                // Mark these as rendered.
-                entities.forEach((entity) => {
-                    var _a;
-                    this.renderedEntities[(_a = entity.Bruce) === null || _a === void 0 ? void 0 : _a.ID] = true;
-                });
-                // This process only supports a single zoom control item.
-                const zoomItem = this.item.CameraZoomSettings[0];
-                // If we're after 3d models then we'll check if there are LODs and render those as individuals.
-                if (zoomItem.DisplayType == BModels.ZoomControl.EDisplayType.Model3D && entities.length) {
-                    const { lods } = await BModels.EntityLod.GetLods({
-                        api: this.apiGetter.getApi(),
-                        filter: {
-                            externalSources: false,
-                            Items: entities.map(x => {
-                                var _a, _b;
-                                return {
-                                    entityId: (_a = x.Bruce) === null || _a === void 0 ? void 0 : _a.ID,
-                                    categoryId: (_b = zoomItem.LODCategoryID) !== null && _b !== void 0 ? _b : "GLB",
-                                    group: "DEFAULT",
-                                    level: Number(zoomItem.LODLevel)
-                                };
-                            }),
-                            strict: false
-                        }
-                    });
-                    if (this.disposed) {
-                        this.doDispose();
-                        return;
-                    }
-                    const withLods = lods.filter(x => x.entityId && !!x.clientFileId).map(x => x.entityId);
-                    const individuals = entities.filter((entity) => {
-                        var _a;
-                        return withLods.includes((_a = entity.Bruce) === null || _a === void 0 ? void 0 : _a.ID);
-                    });
-                    if (individuals.length) {
-                        this.renderAsIndividuals(individuals, force);
-                    }
-                    // Now we proceed with what is left.
-                    entities = entities.filter((entity) => {
-                        var _a;
-                        return !withLods.includes((_a = entity.Bruce) === null || _a === void 0 ? void 0 : _a.ID);
-                    });
-                }
-                if (!entities.length) {
+            async queueRenderAsIndividuals(entities, force = false) {
+                if (this.disposed) {
                     return;
                 }
-                let style = null;
-                if ((zoomItem === null || zoomItem === void 0 ? void 0 : zoomItem.StyleID) && (zoomItem === null || zoomItem === void 0 ? void 0 : zoomItem.StyleID) > -1) {
-                    try {
-                        style = (_a = (await BModels.Style.Get({
-                            api: this.apiGetter.getApi(),
-                            styleId: zoomItem === null || zoomItem === void 0 ? void 0 : zoomItem.StyleID
-                        })).style) === null || _a === void 0 ? void 0 : _a.Settings;
-                    }
-                    // Probably deleted.
-                    catch (e) {
-                        console.error(e);
-                    }
+                // If no active render is happening, start processing immediately.
+                if (!this.renderQueueActive) {
+                    this.renderQueueActive = true;
+                    await this.processRenderQueue(entities, force);
+                    return;
                 }
-                let entityTypeId = (_b = this.item.BruceEntity) === null || _b === void 0 ? void 0 : _b["EntityType.ID"];
-                if (!entityTypeId) {
-                    entityTypeId = (_d = (_c = entities.find(x => { var _a; return !!((_a = x.Bruce) === null || _a === void 0 ? void 0 : _a["EntityType.ID"]); })) === null || _c === void 0 ? void 0 : _c.Bruce) === null || _d === void 0 ? void 0 : _d["EntityType.ID"];
+                // Otherwise, add to the queue.
+                this.renderQueue.push(entities);
+                this.renderQueueForceFlags.push(force);
+            }
+            /**
+             * Processes the render queue, handling one rendering operation at a time.
+             */
+            async processRenderQueue(initialEntities, initialForce = false) {
+                if (this.disposed) {
+                    this.renderQueueActive = false;
+                    return;
                 }
-                // Getting type regardless cause it's needed for name calculations.
-                let entityType;
-                if (entityTypeId) {
-                    // Try using the Entity Type default if one is specified in the menu item.
-                    try {
-                        entityType = (_e = (await BModels.EntityType.Get({
-                            entityTypeId: entityTypeId,
-                            api: this.apiGetter.getApi()
-                        }))) === null || _e === void 0 ? void 0 : _e.entityType;
-                        if (!style && entityType) {
-                            if (entityType["DisplaySetting.ID"] && entityType["DisplaySetting.ID"] > 0) {
-                                style = (_f = (await BModels.Style.Get({
-                                    api: this.apiGetter.getApi(),
-                                    styleId: entityType["DisplaySetting.ID"]
-                                })).style) === null || _f === void 0 ? void 0 : _f.Settings;
+                try {
+                    // Process the initial batch.
+                    await this.renderAsIndividuals(initialEntities, initialForce);
+                    if (this.disposed) {
+                        return;
+                    }
+                    // Process any queued items.
+                    while (this.renderQueue.length > 0 && !this.disposed) {
+                        // If multiple entities are waiting, combine them to reduce render operations.
+                        const allEntities = [];
+                        const forces = [];
+                        // Collect all pending entities.
+                        while (this.renderQueue.length > 0) {
+                            const entities = this.renderQueue.shift();
+                            const force = this.renderQueueForceFlags.shift();
+                            if (entities && entities.length > 0) {
+                                allEntities.push(...entities);
+                                forces.push(force);
                             }
                         }
+                        if (allEntities.length > 0) {
+                            // If any are forced, we need to force the render.
+                            const combinedForce = forces.some(f => f === true);
+                            const uniqueEntities = this.deduplicateEntities(allEntities);
+                            await this.renderAsIndividuals(uniqueEntities, combinedForce);
+                        }
                     }
-                    catch (e) {
-                        console.error(e);
-                    }
-                }
-                const pStyle = (_g = style === null || style === void 0 ? void 0 : style.polygonStyle) !== null && _g !== void 0 ? _g : {};
-                const lStyle = (_h = style === null || style === void 0 ? void 0 : style.polylineStyle) !== null && _h !== void 0 ? _h : {};
-                const polygonsClamped = ((_j = pStyle === null || pStyle === void 0 ? void 0 : pStyle.altitudeOption) === null || _j === void 0 ? void 0 : _j.id) == null ? true : ((_k = pStyle === null || pStyle === void 0 ? void 0 : pStyle.altitudeOption) === null || _k === void 0 ? void 0 : _k.id) == 0;
-                const bFillColor = BModels.Calculator.GetColor(pStyle.fillColor, {}, []);
-                const cFillColor = bFillColor ? colorToCColor$3(bFillColor) : Cesium.Color.fromCssColorString("rgba(139, 195, 74, 0.8)");
-                const bLineColor = BModels.Calculator.GetColor(pStyle.lineColor, {}, []);
-                const cLineColor = bLineColor ? colorToCColor$3(bLineColor) : Cesium.Color.fromCssColorString("rgba(80, 80, 80, 0.8)");
-                let lineWidthPx = pStyle.lineWidth ? BModels.Calculator.GetNumber(pStyle.lineWidth, {}, []) : null;
-                if (lineWidthPx == null) {
-                    lineWidthPx = 1;
                 }
-                lineWidthPx = EnsureNumber(lineWidthPx);
-                if (lineWidthPx < 0.01) {
-                    lineWidthPx = 0;
+                finally {
+                    this.renderQueueActive = false;
                 }
-                lineWidthPx = Math.round(lineWidthPx);
-                const collection = {
-                    features: [],
-                    type: "FeatureCollection"
-                };
-                for (let i = 0; i < entities.length; i++) {
-                    const entity = entities[i];
-                    const feature = BModels.Geometry.ToGeoJsonFeature({
-                        geometry: entity.Bruce.VectorGeometry,
-                        noAltitude: polygonsClamped && lineWidthPx <= 0,
-                        altitude: lineWidthPx > 0 && polygonsClamped ? 1 : null,
-                        properties: {
-                            ...entity,
-                            Bruce: {
-                                ...entity.Bruce,
-                                // Exclude as we just converted it to geojson.
-                                VectorGeometry: null
-                            }
-                        }
-                    });
-                    if (feature) {
-                        collection.features.push(feature);
+            }
+            deduplicateEntities(entities) {
+                const entityMap = new Map();
+                for (const entity of entities) {
+                    if (entity && entity.Bruce && entity.Bruce.ID) {
+                        entityMap.set(entity.Bruce.ID, entity);
                     }
                 }
-                // Anything that failed to turn into geojson or points we'll render as individuals.
-                const individuals = entities.filter((entity) => {
-                    const feature = collection.features.find(x => { var _a, _b; return ((_b = (_a = x.properties) === null || _a === void 0 ? void 0 : _a.Bruce) === null || _b === void 0 ? void 0 : _b.ID) == entity.Bruce.ID; });
-                    if (!feature) {
-                        return true;
-                    }
-                    if (feature.geometry.type == "Point") {
-                        return true;
-                    }
-                    return false;
-                });
-                if (individuals.length) {
-                    this.renderAsIndividuals(individuals, force);
-                }
-                // Filter out points (the ones we just rendered as individuals).
-                collection.features = collection.features.filter(x => x.geometry.type != "Point");
-                // If there is nothing to render now, return.
-                if (!collection.features.length) {
-                    return;
-                }
-                const source = await Cesium.GeoJsonDataSource.load(collection, {
-                    stroke: cLineColor,
-                    fill: cFillColor,
-                    strokeWidth: lineWidthPx,
-                    clampToGround: lineWidthPx <= 0 && polygonsClamped
-                });
-                this.viewer.dataSources.add(source);
-                this.sources.push(source);
-                if (this.disposed) {
-                    this.doDispose();
-                    return;
-                }
-                const groups = [];
-                /**
-                 * Applies individual styling to a rendered entity.
-                 * This will exclude tag styling for now since it's harder to load that on the fly.
-                 * @param thing
-                 * @param entityId
-                 * @param data
-                 * @returns
-                 */
-                const applyStyle = (thing, entityId, data) => {
-                    if (thing.polygon) {
-                        const bFillColor = BModels.Calculator.GetColor(pStyle.fillColor, data, []);
-                        const cFillColor = bFillColor ? colorToCColor$3(bFillColor) : Cesium.Color.fromCssColorString("rgba(139, 195, 74, 0.8)");
-                        const bLineColor = BModels.Calculator.GetColor(pStyle.lineColor, data, []);
-                        const cLineColor = bLineColor ? colorToCColor$3(bLineColor) : Cesium.Color.fromCssColorString("rgba(80, 80, 80, 0.8)");
-                        let width = pStyle.lineWidth ? BModels.Calculator.GetNumber(pStyle.lineWidth, data, []) : null;
-                        if (width == null) {
-                            width = 1;
-                        }
-                        width = EnsureNumber(width);
-                        if (width < 0.01) {
-                            width = 0;
-                        }
-                        let curFillColor = getValue$4(this.viewer, thing.polygon.material);
-                        if (curFillColor && curFillColor instanceof Cesium.ColorMaterialProperty) {
-                            curFillColor = curFillColor.color;
-                        }
-                        let curLineColor = getValue$4(this.viewer, thing.polygon.outlineColor);
-                        if (curLineColor && curLineColor instanceof Cesium.ColorMaterialProperty) {
-                            curLineColor = curLineColor.color;
-                        }
-                        const curWidth = getValue$4(this.viewer, thing.polygon.outlineWidth);
-                        if ((curFillColor instanceof Cesium.Color && curFillColor.equals(cFillColor)) &&
-                            (curLineColor instanceof Cesium.Color && curLineColor.equals(cLineColor)) &&
-                            curWidth == width) {
-                            return;
-                        }
-                        thing.polygon.material = new Cesium.ColorMaterialProperty(cFillColor);
-                        thing.polygon.outlineColor = new Cesium.ConstantProperty(cLineColor);
-                        thing.polygon.outlineWidth = new Cesium.ConstantProperty(width);
-                    }
-                    else if (thing.polyline) {
-                        const bColor = lStyle.lineColor ? BModels.Calculator.GetColor(lStyle.lineColor, data, []) : null;
-                        const cColor = bColor ? colorToCColor$3(bColor) : Cesium.Color.fromCssColorString("rgba(255, 193, 7, 0.8)");
-                        let width = lStyle.lineWidth ? BModels.Calculator.GetNumber(lStyle.lineWidth, data, []) : null;
-                        if (width == null) {
-                            width = 2;
-                        }
-                        width = EnsureNumber(width);
-                        if (width < 0.01) {
-                            width = 0;
-                        }
-                        let curColor = getValue$4(this.viewer, thing.polyline.material);
-                        if (curColor && curColor instanceof Cesium.ColorMaterialProperty) {
-                            curColor = curColor.color;
-                        }
-                        const curWidth = getValue$4(this.viewer, thing.polyline.width);
-                        if ((curColor instanceof Cesium.Color && curColor.equals(cColor)) &&
-                            curWidth == width) {
-                            return;
-                        }
-                        thing.polyline.material = new Cesium.ColorMaterialProperty(cColor);
-                        thing.polyline.width = new Cesium.ConstantProperty(width);
-                    }
-                };
-                let toForceUpdate = [];
-                /**
-                 * Registers a given cesium entity produced from rendering geojson.
-                 * Since one nextspace entity can have multiple cesium entities, there is special logic to group them together.
-                 * @param thing
-                 * @returns
-                 */
-                const register = (thing) => {
-                    var _a, _b, _c, _d;
-                    // See if the cesium entity already exists in a group.
-                    let group = groups.find((x) => { var _a; return ((_a = x.visual) === null || _a === void 0 ? void 0 : _a.id) == thing.id || x.siblings.find(x => (x === null || x === void 0 ? void 0 : x.id) == thing.id); });
-                    if (group) {
-                        return;
-                    }
-                    const metadata = getValue$4(this.viewer, thing === null || thing === void 0 ? void 0 : thing.properties);
-                    const entityId = (_a = metadata === null || metadata === void 0 ? void 0 : metadata.Bruce) === null || _a === void 0 ? void 0 : _a.ID;
-                    if (!entityId) {
-                        return;
-                    }
-                    // Find group for the nextspace entity ID.
-                    group = groups.find((x) => x.entityId == entityId);
-                    // No group yet. We can designate this as the primary entity and create a new group for it.
-                    if (!group) {
-                        group = {
-                            entityId: entityId,
-                            visual: thing,
-                            tagIds: (_b = metadata === null || metadata === void 0 ? void 0 : metadata.Bruce) === null || _b === void 0 ? void 0 : _b["Layer.ID"],
-                            entityTypeId: (_c = metadata === null || metadata === void 0 ? void 0 : metadata.Bruce) === null || _c === void 0 ? void 0 : _c["EntityType.ID"],
-                            siblings: [],
-                            data: entities.find(x => { var _a; return ((_a = x.Bruce) === null || _a === void 0 ? void 0 : _a.ID) == entityId; }),
-                            rego: null
-                        };
-                        groups.push(group);
-                        applyStyle(thing, entityId, group.data);
-                        const rego = {
-                            entityId: entityId,
-                            menuItemId: this.item.id,
-                            menuItemType: this.item.Type,
-                            visual: thing,
-                            priority: this.renderPriority,
-                            entityTypeId: group.entityTypeId,
-                            accountId: this.apiGetter.accountId,
-                            tagIds: group.tagIds ? [].concat(group.tagIds) : [],
-                            name: entityType ? (_d = BModels.Entity.CalculateName({
-                                entity: group.data,
-                                type: entityType,
-                                defaultToId: false
-                            })) !== null && _d !== void 0 ? _d : "Unnamed Entity" : "Unnamed Entity",
-                            cdn: this.item.cdnEnabled,
-                            collection: source.entities
-                        };
-                        group.rego = rego;
-                        this.visualsManager.AddRego({
-                            rego,
-                            requestRender: false
-                        });
-                    }
-                    // Found a group. We flag this as a sibling entity of the primary.
-                    else {
-                        applyStyle(thing, entityId, group.data);
-                        group.siblings.push(thing);
-                        group.visual._siblingGraphics = group.siblings;
-                        thing._parentEntity = group.visual;
-                        if (group.rego) {
-                            this.visualsManager.RefreshMark({
-                                rego: group.rego
-                            });
-                            if (!toForceUpdate.includes(entityId)) {
-                                toForceUpdate.push(entityId);
-                            }
-                        }
-                    }
-                };
-                const sEntities = source.entities.values;
-                for (let i = 0; i < sEntities.length; i++) {
-                    const cEntity = sEntities[i];
-                    register(cEntity);
-                }
-                if (toForceUpdate.length) {
-                    this.visualsManager.ForceUpdate({
-                        entityIds: toForceUpdate,
-                        refreshColors: true,
-                        requestRender: false
-                    });
-                }
-                this.viewer.scene.requestRender();
+                return Array.from(entityMap.values());
             }
             /**
              * Our default path.
@@ -14403,16 +14257,28 @@
              */
             async renderAsIndividuals(entities, force = false) {
                 var _a;
+                if (this.disposed || this.viewer.isDestroyed() || !entities.length) {
+                    return;
+                }
+                let entitiesHistoric = {};
+                if ((this.item.BruceEntity.historic || this.item.BruceEntity.historicAttrKey) && entities.length) {
+                    entitiesHistoric = await this.getHistoricInfo(entities);
+                }
                 const { updated, entities: cEntities } = await exports.EntityRenderEngine.Render({
                     viewer: this.viewer,
                     apiGetter: this.apiGetter,
                     entities: entities,
                     menuItemId: this.item.id,
                     visualRegister: this.visualsManager,
+                    entitiesHistoric: entitiesHistoric,
+                    entityHistoricDrawTrack: this.item.historicDrawTrack,
                     zoomControl: this.item.CameraZoomSettings,
                     force
                 });
                 for (let i = 0; i < entities.length; i++) {
+                    if (this.disposed) {
+                        break;
+                    }
                     const entity = entities[i];
                     const id = entity.Bruce.ID;
                     const cEntity = cEntities.get(id);
@@ -14461,11 +14327,144 @@
                         (_a = this.clustering) === null || _a === void 0 ? void 0 : _a.RemoveEntity(id, false);
                     }
                 }
-                this.viewer.scene.requestRender();
-                if (this.clustering && entities.length) {
-                    this.clustering.Update();
+                if (!this.disposed) {
+                    this.viewer.scene.requestRender();
+                    if (this.clustering && entities.length) {
+                        this.clustering.Update();
+                    }
                 }
             }
+            /**
+             * Returns historic information for the given set of Entities at the current timeline range.
+             * @param entities
+             */
+            async getHistoricInfo(entities) {
+                const startTmp = Cesium.JulianDate.toDate(this.viewer.clock.startTime);
+                const stopTmp = Cesium.JulianDate.toDate(this.viewer.clock.stopTime);
+                let rangesToRequest = [{
+                        start: startTmp.toISOString(),
+                        stop: stopTmp.toISOString()
+                    }];
+                // If we already have cached data, determine what ranges we're missing.
+                if (this.lastHistoricMin && this.lastHistoricMax && Object.keys(this.entitiesHistoric).length >= entities.length) {
+                    const cachedStart = new Date(this.lastHistoricMin).getTime();
+                    const cachedStop = new Date(this.lastHistoricMax).getTime();
+                    const newStart = startTmp.getTime();
+                    const newStop = stopTmp.getTime();
+                    // Complete overlap - we already have all the data.
+                    if (newStart >= cachedStart && newStop <= cachedStop) {
+                        return this.entitiesHistoric;
+                    }
+                    // Calculate missing ranges.
+                    rangesToRequest = [];
+                    // Check if we need data before our cached range.
+                    if (newStart < cachedStart) {
+                        rangesToRequest.push({
+                            start: startTmp.toISOString(),
+                            stop: new Date(cachedStart).toISOString()
+                        });
+                    }
+                    // Check if we need data after our cached range.
+                    if (newStop > cachedStop) {
+                        rangesToRequest.push({
+                            start: new Date(cachedStop).toISOString(),
+                            stop: stopTmp.toISOString()
+                        });
+                    }
+                }
+                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;
+                    }
+                    // Add padding to ensure we get all data.
+                    const start = new Date(range.start);
+                    const stop = new Date(range.stop);
+                    start.setSeconds(start.getSeconds() - 1);
+                    stop.setSeconds(stop.getSeconds() + 1);
+                    const paddedStartStr = start.toISOString();
+                    const paddedStopStr = stop.toISOString();
+                    const historicData = await BModels.EntityHistoricData.GetList({
+                        attrKey: this.item.BruceEntity.historicAttrKey,
+                        dateTimeFrom: paddedStartStr,
+                        dateTimeTo: paddedStopStr,
+                        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;
+                    }
+                }
+                if (!this.disposed) {
+                    // Update our cache boundaries.
+                    this.lastHistoricMin = startTmp.toISOString();
+                    this.lastHistoricMax = stopTmp.toISOString();
+                    this.entitiesHistoric = combined;
+                }
+                return combined;
+            }
+            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;
+                let queue = new BModels.DelayQueue(() => {
+                    this.onGetterUpdate(Object.keys(this.renderedEntities));
+                }, THROTTLE_INTERVAL, true);
+                let clockTickRemoval;
+                let prevTick = this.viewer.clock.currentTime.toString();
+                clockTickRemoval = this.viewer.clock.onTick.addEventListener(() => {
+                    if (this.disposed || this.viewer.isDestroyed()) {
+                        return;
+                    }
+                    const currentTick = this.viewer.clock.currentTime.toString();
+                    if (currentTick === prevTick) {
+                        return;
+                    }
+                    queue.Call();
+                });
+                this.viewerDateTimeChangeRemoval = () => {
+                    if (clockTickRemoval) {
+                        clockTickRemoval();
+                        clockTickRemoval = null;
+                    }
+                    queue.Dispose();
+                    queue = null;
+                };
+            }
+            viewerDateTimeDispose() {
+                var _a;
+                (_a = this.viewerDateTimeChangeRemoval) === null || _a === void 0 ? void 0 : _a.call(this);
+                this.viewerDateTimeChangeRemoval = null;
+            }
         }
         EntitiesIdsRenderManager.Manager = Manager;
     })(exports.EntitiesIdsRenderManager || (exports.EntitiesIdsRenderManager = {}));
@@ -15603,7 +15602,7 @@
         })(Queue = SharedGetters.Queue || (SharedGetters.Queue = {}));
     })(exports.SharedGetters || (exports.SharedGetters = {}));
 
-    function colorToCColor$4(color) {
+    function colorToCColor$3(color) {
         return new Cesium.Color(color.red ? color.red / 255 : 0, color.green ? color.green / 255 : 0, color.blue ? color.blue / 255 : 0, color.alpha);
     }
     /**
@@ -16906,7 +16905,7 @@
                     cColor = Cesium.Color.WHITE;
                 }
                 else {
-                    cColor = colorToCColor$4(bColor);
+                    cColor = colorToCColor$3(bColor);
                 }
                 const override = this.styledEntityIds[entity.entityId] == true;
                 exports.CesiumEntityStyler.SetDefaultColor({
@@ -17099,7 +17098,7 @@
                 this.viewerDateTimeChangeRemoval = null;
                 // Series of points to help interpolate movement when the timeline changes.
                 this.historicPosses = [];
-                this.historicPossesLoading = false;
+                this.historicAnimation = null;
                 this.historicPossesLoadingProm = null;
                 const { viewer, register: visualsManager, getters, item } = params;
                 this.viewer = viewer;
@@ -17556,7 +17555,7 @@
             /**
              * Monitors the Cesium Viewer and updates the root Entity based on the scene time changing.
              * If the root Entity is historic, this can allow for movement of the assembly as a whole.
-             * @parma tileset
+             * @param tileset
              */
             viewerDateTimeSub(tileset) {
                 var _a, _b;
@@ -17570,60 +17569,172 @@
                 const api = this.getters.GetBruceApi({
                     accountId: accountId
                 });
-                // Returns a series of positions to use for position interpolation based on time.
-                // If the timeline range is different to the previous query, we'll re-request the data.
-                const getSeriesPosses = async () => {
+                // '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
+                 */
+                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 BModels.EntityHistoricData.GetList({
+                                attrKey: null,
+                                dateTimeFrom: startStr,
+                                dateTimeTo: stopStr,
+                                entityIds: [this.rootId],
+                                api: api
+                            });
+                            const posses = exports.CesiumAnimatedProperty.GetSeriesPossesForHistoricEntity(this.viewer, Cesium.HeightReference.NONE, historicData.recordsByIds[this.rootId]);
+                            res(posses);
+                        }
+                        catch (e) {
+                            console.error(e);
+                            res([]);
+                        }
+                        finally {
+                            pendingRequests.delete(requestKey);
+                        }
+                    });
+                    pendingRequests.set(requestKey, requestPromise);
+                    return requestPromise;
+                };
+                /**
+                 * Checks if the current timeline range is not fully loaded and requests the difference.
+                 * This will call getPossesForRange() if it needs more data.
+                 * @returns
+                 */
+                const checkTimelineRange = async () => {
                     const minDateTime = this.viewer.clock.startTime.toString();
                     const maxDateTime = this.viewer.clock.stopTime.toString();
-                    if (this.historicPossesMinDateTime == minDateTime &&
-                        this.historicPossesMaxDateTime == maxDateTime) {
-                        if (this.historicPossesLoading) {
-                            if (!await this.historicPossesLoadingProm) {
-                                return false;
-                            }
-                        }
-                        return this.historicPosses;
+                    // See if the current range is within the range we already have.
+                    if (this.historicPosses.length > 0 &&
+                        this.historicPossesMinDateTime &&
+                        this.historicPossesMaxDateTime &&
+                        minDateTime >= this.historicPossesMinDateTime &&
+                        maxDateTime <= this.historicPossesMaxDateTime) {
+                        return;
                     }
-                    this.historicPossesMinDateTime = minDateTime;
-                    this.historicPossesMaxDateTime = maxDateTime;
-                    this.historicPossesLoading = true;
-                    this.historicPossesLoadingProm = new Promise(async (res) => {
-                        // We'll add/remove 1 second to ensure we cover all records.
+                    // See if the requested range is before or after the range we have.
+                    const fetchBefore = !this.historicPossesMinDateTime || minDateTime < this.historicPossesMinDateTime;
+                    const fetchAfter = !this.historicPossesMaxDateTime || maxDateTime > this.historicPossesMaxDateTime;
+                    if (!fetchBefore && !fetchAfter) {
+                        // Already have the data we need.
+                        return;
+                    }
+                    // No known range so we need to fetch the whole thing.
+                    if (!this.historicPossesMinDateTime || !this.historicPossesMaxDateTime) {
                         const startTmp = Cesium.JulianDate.toDate(this.viewer.clock.startTime);
                         const stopTmp = Cesium.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 BModels.EntityHistoricData.GetList({
-                            attrKey: null,
-                            dateTimeFrom: startStr,
-                            dateTimeTo: stopStr,
-                            entityIds: [this.rootId],
-                            api: api
-                        });
-                        const posses = exports.CesiumAnimatedProperty.GetSeriesPossesForHistoricEntity(this.viewer, Cesium.HeightReference.NONE, historicData.recordsByIds[this.rootId]);
-                        if (this.historicPossesMinDateTime == minDateTime &&
-                            this.historicPossesMaxDateTime == maxDateTime) {
-                            this.historicPosses = posses;
+                        const newPositions = await getPossesForRange(startStr, stopStr);
+                        if (this.disposed) {
+                            return;
+                        }
+                        if (this.historicAnimation && this.historicAnimation.addPositions) {
+                            this.historicAnimation.addPositions(newPositions);
+                        }
+                        this.historicPossesMinDateTime = minDateTime;
+                        this.historicPossesMaxDateTime = maxDateTime;
+                    }
+                    else {
+                        // The data we want is before the range we've currently loaded.
+                        if (fetchBefore) {
+                            // Calculate the missing difference and request it.
+                            const startTmp = Cesium.JulianDate.toDate(this.viewer.clock.startTime);
+                            const stopTmp = new Date(this.historicPossesMinDateTime);
+                            const startStr = new Date(startTmp.getTime() - 1000).toISOString();
+                            const stopStr = stopTmp.toISOString();
+                            getPossesForRange(startStr, stopStr).then(newPositions => {
+                                if (this.disposed) {
+                                    return;
+                                }
+                                this.historicPossesMinDateTime = minDateTime;
+                                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 startTmp = new Date(this.historicPossesMaxDateTime);
+                            const stopTmp = Cesium.JulianDate.toDate(this.viewer.clock.stopTime);
+                            const startStr = startTmp.toISOString();
+                            const stopStr = new Date(stopTmp.getTime() + 1000).toISOString();
+                            getPossesForRange(startStr, stopStr).then(newPositions => {
+                                if (this.disposed) {
+                                    return;
+                                }
+                                this.historicPossesMaxDateTime = maxDateTime;
+                                if (this.historicAnimation && this.historicAnimation.addPositions) {
+                                    this.historicAnimation.addPositions(newPositions);
+                                }
+                            });
+                        }
+                    }
+                };
+                /**
+                 * Requests the initial set of historic positions for the timeline range.
+                 * This is called when the tileset is loaded and the timeline range is set.
+                 * @returns
+                 */
+                const getInitialPosses = async () => {
+                    const minDateTime = this.viewer.clock.startTime.toString();
+                    const maxDateTime = this.viewer.clock.stopTime.toString();
+                    this.historicPossesLoadingProm = new Promise(async (res) => {
+                        try {
+                            if (this.disposed) {
+                                res(false);
+                                return;
+                            }
+                            const startTmp = Cesium.JulianDate.toDate(this.viewer.clock.startTime);
+                            const stopTmp = Cesium.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);
+                            if (this.disposed) {
+                                res(false);
+                                return;
+                            }
+                            this.historicPosses = positions;
                             this.historicPossesMinDateTime = minDateTime;
                             this.historicPossesMaxDateTime = maxDateTime;
-                            this.historicPossesLoading = false;
-                            res(posses);
+                            res(positions);
+                        }
+                        catch (e) {
+                            console.error(e);
+                            res(false);
                         }
-                        res(false);
                     });
                     return await this.historicPossesLoadingProm;
                 };
-                getSeriesPosses().then((posses) => {
+                // Last known timeline range. Helps us detect changes.
+                let lastStartTime = this.viewer.clock.startTime.toString();
+                let lastStopTime = this.viewer.clock.stopTime.toString();
+                let clockTickRemoval;
+                getInitialPosses().then((posses) => {
                     if (this.disposed || posses === false) {
                         return;
                     }
-                    let animation = new exports.CesiumAnimatedProperty.AnimateTPositionSeries({
+                    // Generate animation utility for the initial set of positions.
+                    this.historicAnimation = new exports.CesiumAnimatedProperty.AnimateTPositionSeries({
                         viewer: this.viewer,
                         posses: posses,
                         onUpdate: (pos3d, heading) => {
                             if (this.disposed) {
                                 return;
                             }
+                            // Jank code that hacks the position to be different.
+                            // This can mess up our panels so we'll need to disable editing until a better system is in place.
                             const location = Cesium.Cartographic.fromCartesian(pos3d);
                             const lat = Cesium.Math.toDegrees(location.latitude);
                             const lon = Cesium.Math.toDegrees(location.longitude);
@@ -17650,12 +17761,35 @@
                                 }
                             };
                             this.applyCoords(tileset, coords);
+                        },
+                        onRangeChange: () => {
+                            checkTimelineRange();
+                        },
+                        onDone: () => {
+                            if (this.viewerDateTimeChangeRemoval) {
+                                this.viewerDateTimeChangeRemoval();
+                                this.viewerDateTimeChangeRemoval = null;
+                            }
+                        }
+                    });
+                    // When the clock changes we'll see if the range is different and queue a request for the difference.
+                    clockTickRemoval = this.viewer.clock.onTick.addEventListener(() => {
+                        const startTime = this.viewer.clock.startTime.toString();
+                        const stopTime = this.viewer.clock.stopTime.toString();
+                        if (startTime !== lastStartTime || stopTime !== lastStopTime) {
+                            lastStartTime = startTime;
+                            lastStopTime = stopTime;
+                            this.historicAnimation.onRangeChange();
                         }
                     });
                     this.viewerDateTimeChangeRemoval = () => {
-                        if (animation) {
-                            animation.stop();
-                            animation = null;
+                        if (this.historicAnimation) {
+                            this.historicAnimation.stop();
+                            this.historicAnimation = null;
+                        }
+                        if (clockTickRemoval) {
+                            clockTickRemoval();
+                            clockTickRemoval = null;
                         }
                     };
                 });
@@ -24588,7 +24722,8 @@
                 end: null,
                 playing: false,
                 speed: 1,
-                start: null
+                start: null,
+                live: false
             };
         }
         exports.ViewUtils.SetTimeDetails({
@@ -24597,7 +24732,8 @@
             currentTimeIso: dateTime,
             startTimeIso: timeline.start,
             stopTimeIso: timeline.end,
-            isAnimating: timeline.playing
+            isAnimating: timeline.playing,
+            isLive: timeline.live
         });
         // Newer version that has states per Entity ID + Menu Item ID.
         let states = bSettings === null || bSettings === void 0 ? void 0 : bSettings.states;
@@ -30404,13 +30540,17 @@
         }
     }
 
-    const VERSION = "5.4.0";
+    const VERSION = "5.4.2";
 
     exports.VERSION = VERSION;
     exports.isHistoricMetadataChanged = isHistoricMetadataChanged;
     exports.CesiumParabola = CesiumParabola;
     exports.CESIUM_INSPECTOR_KEY = CESIUM_INSPECTOR_KEY;
     exports.CESIUM_TIMELINE_KEY = CESIUM_TIMELINE_KEY;
+    exports.CESIUM_TIMELINE_LIVE_KEY = CESIUM_TIMELINE_LIVE_KEY;
+    exports.CESIUM_TIMELINE_LIVE_PADDING_FORWARD_KEY = CESIUM_TIMELINE_LIVE_PADDING_FORWARD_KEY;
+    exports.CESIUM_TIMELINE_LIVE_PADDING_BACKWARD_KEY = CESIUM_TIMELINE_LIVE_PADDING_BACKWARD_KEY;
+    exports.CESIUM_TIMELINE_INTERVAL_KEY = CESIUM_TIMELINE_INTERVAL_KEY;
     exports.Draw3dPolygon = Draw3dPolygon;
     exports.Draw3dPolyline = Draw3dPolyline;
     exports.VIEWER_BOOKMARKS_WIDGET_KEY = VIEWER_BOOKMARKS_WIDGET_KEY;