bruce-cesium 5.4.0 → 5.4.2

package/dist/lib/rendering/render-managers/entities/entities-ids-render-manager.js

@@ -7,21 +7,7 @@ const entity_render_engine_1 = require("../../entity-render-engine");
 const visuals_register_1 = require("../../visuals-register");
 const point_clustering_1 = require("../common/point-clustering");
 const batched_data_getter_1 = require("../../getters/batched-data-getter");
-const js_utils_1 = require("../../../internal/js-utils");
 const BATCH_SIZE = 500;
-function getValue(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(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);
-}
 /**
  * Render manager for rendering an array of entity ids.
  * This will render them in batches to avoid overloading the viewer.
@@ -38,23 +24,27 @@ var EntitiesIdsRenderManager;
             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 point_clustering_1.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."));
             }
@@ -74,15 +64,19 @@ var EntitiesIdsRenderManager;
             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 batched_data_getter_1.BatchedDataGetter.Getter(this.item.BruceEntity.EntityIds, this.monitor, BATCH_SIZE);
+            this.getter = new batched_data_getter_1.BatchedDataGetter.Getter(this.item.BruceEntity.EntityIds, this.monitor, BATCH_SIZE, 
+            // 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) {
@@ -100,11 +94,11 @@ var EntitiesIdsRenderManager;
             });
             (_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;
@@ -139,10 +133,6 @@ var EntitiesIdsRenderManager;
             }
             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);
@@ -154,15 +144,25 @@ var EntitiesIdsRenderManager;
             }
         }
         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 bruce_models_1.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);
             }
@@ -171,347 +171,82 @@ var EntitiesIdsRenderManager;
             }
         }
         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 == bruce_models_1.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 == bruce_models_1.ZoomControl.EDisplayType.Model3D && entities.length) {
-                const { lods } = await bruce_models_1.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 bruce_models_1.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);
-                }
-            }
-            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"];
-            }
-            // 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 bruce_models_1.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 bruce_models_1.Style.Get({
-                                api: this.apiGetter.getApi(),
-                                styleId: entityType["DisplaySetting.ID"]
-                            })).style) === null || _f === void 0 ? void 0 : _f.Settings;
-                        }
-                    }
-                }
-                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 = bruce_models_1.Calculator.GetColor(pStyle.fillColor, {}, []);
-            const cFillColor = bFillColor ? colorToCColor(bFillColor) : Cesium.Color.fromCssColorString("rgba(139, 195, 74, 0.8)");
-            const bLineColor = bruce_models_1.Calculator.GetColor(pStyle.lineColor, {}, []);
-            const cLineColor = bLineColor ? colorToCColor(bLineColor) : Cesium.Color.fromCssColorString("rgba(80, 80, 80, 0.8)");
-            let lineWidthPx = pStyle.lineWidth ? bruce_models_1.Calculator.GetNumber(pStyle.lineWidth, {}, []) : null;
-            if (lineWidthPx == null) {
-                lineWidthPx = 1;
-            }
-            lineWidthPx = (0, js_utils_1.EnsureNumber)(lineWidthPx);
-            if (lineWidthPx < 0.01) {
-                lineWidthPx = 0;
-            }
-            lineWidthPx = Math.round(lineWidthPx);
-            const collection = {
-                features: [],
-                type: "FeatureCollection"
-            };
-            for (let i = 0; i < entities.length; i++) {
-                const entity = entities[i];
-                const feature = bruce_models_1.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);
-                }
-            }
-            // 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) {
+            // If no active render is happening, start processing immediately.
+            if (!this.renderQueueActive) {
+                this.renderQueueActive = true;
+                await this.processRenderQueue(entities, force);
                 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);
+            // 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.doDispose();
+                this.renderQueueActive = false;
                 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 = bruce_models_1.Calculator.GetColor(pStyle.fillColor, data, []);
-                    const cFillColor = bFillColor ? colorToCColor(bFillColor) : Cesium.Color.fromCssColorString("rgba(139, 195, 74, 0.8)");
-                    const bLineColor = bruce_models_1.Calculator.GetColor(pStyle.lineColor, data, []);
-                    const cLineColor = bLineColor ? colorToCColor(bLineColor) : Cesium.Color.fromCssColorString("rgba(80, 80, 80, 0.8)");
-                    let width = pStyle.lineWidth ? bruce_models_1.Calculator.GetNumber(pStyle.lineWidth, data, []) : null;
-                    if (width == null) {
-                        width = 1;
-                    }
-                    width = (0, js_utils_1.EnsureNumber)(width);
-                    if (width < 0.01) {
-                        width = 0;
-                    }
-                    let curFillColor = getValue(this.viewer, thing.polygon.material);
-                    if (curFillColor && curFillColor instanceof Cesium.ColorMaterialProperty) {
-                        curFillColor = curFillColor.color;
-                    }
-                    let curLineColor = getValue(this.viewer, thing.polygon.outlineColor);
-                    if (curLineColor && curLineColor instanceof Cesium.ColorMaterialProperty) {
-                        curLineColor = curLineColor.color;
-                    }
-                    const curWidth = getValue(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 ? bruce_models_1.Calculator.GetColor(lStyle.lineColor, data, []) : null;
-                    const cColor = bColor ? colorToCColor(bColor) : Cesium.Color.fromCssColorString("rgba(255, 193, 7, 0.8)");
-                    let width = lStyle.lineWidth ? bruce_models_1.Calculator.GetNumber(lStyle.lineWidth, data, []) : null;
-                    if (width == null) {
-                        width = 2;
-                    }
-                    width = (0, js_utils_1.EnsureNumber)(width);
-                    if (width < 0.01) {
-                        width = 0;
-                    }
-                    let curColor = getValue(this.viewer, thing.polyline.material);
-                    if (curColor && curColor instanceof Cesium.ColorMaterialProperty) {
-                        curColor = curColor.color;
-                    }
-                    const curWidth = getValue(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(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) {
+            try {
+                // Process the initial batch.
+                await this.renderAsIndividuals(initialEntities, initialForce);
+                if (this.disposed) {
                     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 = bruce_models_1.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);
+                // 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);
+                    }
+                }
+            }
+            finally {
+                this.renderQueueActive = false;
+            }
+        }
+        deduplicateEntities(entities) {
+            const entityMap = new Map();
+            for (const entity of entities) {
+                if (entity && entity.Bruce && entity.Bruce.ID) {
+                    entityMap.set(entity.Bruce.ID, entity);
                 }
-            };
-            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.
@@ -522,16 +257,28 @@ var EntitiesIdsRenderManager;
          */
         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 entity_render_engine_1.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);
@@ -580,10 +327,143 @@ var EntitiesIdsRenderManager;
                     (_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 bruce_models_1.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 bruce_models_1.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;