timeline-chart 0.3.0-next.f3add09.0 → 0.3.1

package/lib/layer/time-graph-chart.js

@@ -29,7 +29,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -50,6 +50,17 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimeGraphChart = exports.keyBoardNavs = void 0;
 var time_graph_annotation_1 = require("../components/time-graph-annotation");
@@ -65,24 +76,47 @@ exports.keyBoardNavs = {
     "panleft": ['a', 'j'],
     "panright": ['d', 'l']
 };
+var VISIBLE_ROW_BUFFER = 3; // number of buffer rows above and below visible range
+var FINE_RESOLUTION_FACTOR = 1; // fine resolution factor or default to disable coarse update
 var TimeGraphChart = /** @class */ (function (_super) {
     __extends(TimeGraphChart, _super);
-    function TimeGraphChart(id, providers, rowController) {
+    function TimeGraphChart(id, providers, rowController, _coarseResolutionFactor) {
+        if (_coarseResolutionFactor === void 0) { _coarseResolutionFactor = FINE_RESOLUTION_FACTOR; }
         var _this = _super.call(this, id, rowController) || this;
         _this.providers = providers;
         _this.rowController = rowController;
-        _this.selectedElementChangedHandler = [];
+        _this._coarseResolutionFactor = _coarseResolutionFactor;
+        _this.rowComponents = new Map(); // map of rowId to row component
+        _this.selectedStateChangedHandler = [];
         _this.mousePanning = false;
         _this.mouseZooming = false;
         _this.mouseButtons = 0;
-        _this._debouncedMaybeFetchNewData = (0, lodash_1.debounce)(function () { return _this.maybeFetchNewData(); }, 400);
+        _this._filterExpressionsMap = undefined;
+        _this._debouncedMaybeFetchNewData = (0, lodash_1.debounce)(function () { return _this.maybeFetchNewData(false); }, 400);
+        _this._debouncedMaybeFetchNewDataFine = (0, lodash_1.debounce)(function () { return _this.maybeFetchNewData(false, true); }, 400);
+        _this._debouncedMaybeFetchNewDataFineFullSearch = (0, lodash_1.debounce)(function () { return _this.maybeFetchNewData(false, true, true); }, 400);
         // Keep track of the most recently clicked point.
         // If clicked again during _multiClickTime duration (milliseconds) record multi-click
         _this._recentlyClickedGlobal = null;
         _this._multiClickTime = 500;
         _this._mouseClicks = 0;
-        _this.providedRange = { start: BigInt(0), end: BigInt(0) };
-        _this.providedResolution = 1;
+        /**
+         * Ensures that we always see the row lines.
+         * This is a hacky solution that triggers every view range change.
+         */
+        _this.ensureRowLinesFitViewWidth = function () {
+            var newRowWidth = _this.stateController.canvasDisplayWidth / _this.stateController.scaleFactor;
+            _this.rowComponents.forEach(function (rowComponent) {
+                rowComponent.update({
+                    height: _this.rowController.rowHeight,
+                    position: {
+                        x: -_this.stateController.positionOffset.x,
+                        y: rowComponent.position.y
+                    },
+                    width: newRowWidth,
+                });
+            });
+        };
         _this.isNavigating = false;
         return _this;
     }
@@ -91,8 +125,8 @@ var TimeGraphChart = /** @class */ (function (_super) {
             return;
         }
         if (zoomPosition === undefined) {
-            var start_1 = this.getPixel(this.unitController.selectionRange ? this.unitController.selectionRange.start - this.unitController.viewRange.start : BigInt(0));
-            var end_1 = this.getPixel(this.unitController.selectionRange ? this.unitController.selectionRange.end - this.unitController.viewRange.start : this.unitController.viewRangeLength);
+            var start_1 = this.getWorldPixel(this.unitController.selectionRange ? this.unitController.selectionRange.start : BigInt(0));
+            var end_1 = this.getWorldPixel(this.unitController.selectionRange ? this.unitController.selectionRange.end : this.stateController.worldRangeLength);
             zoomPosition = (start_1 + end_1) / 2;
         }
         var zoomTime = zoomPosition / this.stateController.zoomFactor;
@@ -108,7 +142,6 @@ var TimeGraphChart = /** @class */ (function (_super) {
             };
         }
     };
-    ;
     TimeGraphChart.prototype.afterAddToContainer = function () {
         var _this = this;
         this.stage.cursor = 'default';
@@ -173,6 +206,12 @@ var TimeGraphChart = /** @class */ (function (_super) {
                 else if (exports.keyBoardNavs['panright'].indexOf(keyPressed) >= 0) {
                     moveHorizontally(horizontalDelta);
                 }
+                else if (keyPressed === 'ArrowUp') {
+                    _this.navigateUp();
+                }
+                else if (keyPressed === 'ArrowDown') {
+                    _this.navigateDown();
+                }
                 event.preventDefault();
             }
             if (keyPressed === 'Escape' && _this.mouseZooming) {
@@ -314,51 +353,87 @@ var TimeGraphChart = /** @class */ (function (_super) {
         this.onCanvasEvent('contextmenu', this._contextMenuHandler);
         this.rowController.onVerticalOffsetChangedHandler(function (verticalOffset) {
             _this.layer.position.y = -verticalOffset;
+            _this._debouncedMaybeFetchNewData();
         });
         this._viewRangeChangedHandler = function () {
-            _this.updateScaleAndPosition();
-            if (_this.mouseZooming) {
-                _this.updateZoomingSelection();
-            }
+            _this.updateZoomingSelection();
+            _this.ensureRowLinesFitViewWidth();
         };
         this.unitController.onViewRangeChanged(this._viewRangeChangedHandler);
         this.unitController.onViewRangeChanged(this._debouncedMaybeFetchNewData);
+        this._scaleFactorChangedHandler = function () {
+            _this.scaleComponents();
+        };
+        this.stateController.onScaleFactorChange(this._scaleFactorChangedHandler);
+        /**
+         * We need to explicitly re-render every zoom change because of edge case:
+         *   WorldRange = Absolute Range && ViewRange < WorldRange
+         * When we are at above state, and reset view to home, nothing happens.
+         *   We already rendered the world and don't rerender (WorldRange doesn't change)
+         *   this.maybeFetchNewData is called and we don't fetch or trigger viewport.handleOnWorldRange.
+         *   This is because don't re-render the world since it's we already have the entire trace rendered.
+         *   We don't currently have any logic for scaling the world down.
+         * UpdatingScaleAndPosition also scales everything down nicely when zooming out :)
+         * Side effect - stage.width is always reset to renderer.width when this is called.
+         */
+        this._zoomRangeChangedHandler = function (zoomFactor) {
+            _this.ensureRowLinesFitViewWidth();
+            _this.stateController.handleOnWorldRender();
+        };
+        this.stateController.onZoomChanged(this._zoomRangeChangedHandler);
         if (this.unitController.viewRangeLength && this.stateController.canvasDisplayWidth) {
             this.maybeFetchNewData();
         }
     };
-    TimeGraphChart.prototype.updateChart = function () {
+    TimeGraphChart.prototype.updateChart = function (filterExpressionsMap) {
         var update = true;
+        this._filterExpressionsMap = filterExpressionsMap;
         if (this.unitController && this.stateController) {
             this.maybeFetchNewData(update);
         }
     };
     TimeGraphChart.prototype.update = function () {
-        this.updateScaleAndPosition();
+        this.ensureRowLinesFitViewWidth();
         this._debouncedMaybeFetchNewData();
     };
     TimeGraphChart.prototype.updateZoomingSelection = function () {
-        if (this.zoomingSelection) {
+        if (!this.mouseZooming && this.zoomingSelection) {
             this.removeChild(this.zoomingSelection);
             delete this.zoomingSelection;
         }
-        if (this.mouseZooming) {
-            var mouseStartX = Number(this.mouseZoomingStart - this.unitController.viewRange.start) * this.stateController.zoomFactor;
-            this.zoomingSelection = new time_graph_rectangle_1.TimeGraphRectangle({
+        else if (this.mouseZooming) {
+            // The zooming selection should not be scaled. It should use the actual mouse coordinates.
+            var x = this.getWorldPixel(this.mouseZoomingStart) / this.stateController.scaleFactor;
+            var options = {
                 color: 0xbbbbbb,
                 opacity: 0.2,
                 position: {
-                    x: mouseStartX,
+                    x: x,
                     y: 0
                 },
                 height: Math.max(this.stateController.canvasDisplayHeight, this.rowController.totalHeight),
-                width: this.mouseEndX - mouseStartX
-            });
-            this.addChild(this.zoomingSelection);
+                width: (this.mouseEndX - this.mouseStartX) / this.stateController.scaleFactor
+            };
+            if (!this.zoomingSelection) {
+                // Add the rectangle if we don't have one
+                this.zoomingSelection = new time_graph_rectangle_1.TimeGraphRectangle(options);
+                this.addChild(this.zoomingSelection);
+            }
+            else {
+                // Update the rectangle if we do
+                this.zoomingSelection.update(options);
+            }
         }
     };
+    TimeGraphChart.prototype.removeChildren = function () {
+        this.rowComponents.clear();
+        _super.prototype.removeChildren.call(this);
+    };
     TimeGraphChart.prototype.destroy = function () {
+        this.stateController.removeOnZoomChanged(this._zoomRangeChangedHandler);
+        this.stateController.removeOnScaleFactorChanged(this._scaleFactorChangedHandler);
         this.unitController.removeViewRangeChangedHandler(this._debouncedMaybeFetchNewData);
+        this.unitController.removeViewRangeChangedHandler(this._viewRangeChangedHandler);
         if (this._viewRangeChangedHandler) {
             this.unitController.removeViewRangeChangedHandler(this._viewRangeChangedHandler);
         }
@@ -387,46 +462,152 @@ var TimeGraphChart = /** @class */ (function (_super) {
             this.stage.off('mouseup', this._stageMouseUpHandler);
             this.stage.off('mouseupoutside', this._stageMouseUpHandler);
         }
+        this.rowComponents.clear();
         _super.prototype.destroy.call(this);
     };
-    TimeGraphChart.prototype.maybeFetchNewData = function (update) {
+    TimeGraphChart.prototype.maybeFetchNewData = function (update, fine, fullSearch) {
         return __awaiter(this, void 0, void 0, function () {
-            var resolution, viewRange, request, rowData;
+            var visibleRowIds, viewRange, resolutionFactor, resolution, rowIds, allRowsUpdated, worldRange, additionalParams, i, request, error_1, i, rowComponent, request, error_2;
+            var _this = this;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        resolution = Number(this.unitController.viewRangeLength) / this.stateController.canvasDisplayWidth;
+                        this.rowIds = this.providers.rowProvider().rowIds;
+                        if (update) {
+                            // update position of existing rows and remove deleted rows
+                            this.rowComponents.forEach(function (rowComponent, rowId) {
+                                var index = _this.rowIds.indexOf(rowId);
+                                if (index == -1) {
+                                    _this.rowComponents.delete(rowId);
+                                    _this.removeChild(rowComponent);
+                                }
+                                else {
+                                    rowComponent.position.y = _this.rowController.rowHeight * index;
+                                    rowComponent.providedModel = undefined;
+                                }
+                            });
+                            // update selected row
+                            if (this.rowController.selectedRow) {
+                                this.rowController.selectedRowIndex = this.rowIds.indexOf(this.rowController.selectedRow.id);
+                                if (this.rowController.selectedRowIndex === -1) {
+                                    this.rowController.selectedRow = undefined;
+                                }
+                            }
+                            // create placeholder rows
+                            this.rowIds.forEach(function (rowId) {
+                                if (!_this.rowComponents.get(rowId)) {
+                                    _this.addRow(rowId);
+                                }
+                            });
+                        }
+                        visibleRowIds = this.getVisibleRowIds(VISIBLE_ROW_BUFFER);
                         viewRange = this.unitController.viewRange;
-                        if (!(viewRange && (viewRange.start < this.providedRange.start ||
-                            viewRange.end > this.providedRange.end ||
-                            resolution != this.providedResolution ||
-                            update))) return [3 /*break*/, 4];
-                        request = { viewRange: viewRange, resolution: resolution };
+                        resolutionFactor = fine ? FINE_RESOLUTION_FACTOR : this._coarseResolutionFactor;
+                        resolution = (resolutionFactor * Number(this.unitController.viewRangeLength)) / this.stateController.canvasDisplayWidth;
+                        rowIds = visibleRowIds.filter(function (rowId) {
+                            var rowComponent = _this.rowComponents.get(rowId);
+                            return (update ||
+                                !rowComponent ||
+                                !rowComponent.providedModel ||
+                                viewRange.start < rowComponent.providedModel.range.start || // This logic can be updated for pre-rendering before we reach the end.
+                                viewRange.end > rowComponent.providedModel.range.end || // This logic can be updated for pre-rendering before we reach the end.
+                                !(0, lodash_1.isEqual)(_this.stateController.worldRange, rowComponent.providedModel.range) ||
+                                resolution < rowComponent.providedModel.resolution || !(0, lodash_1.isEqual)(rowComponent.providedModel.filterExpressionsMap, _this._filterExpressionsMap));
+                        });
+                        if (!(rowIds.length > 0)) return [3 /*break*/, 11];
+                        allRowsUpdated = rowIds.length === visibleRowIds.length;
+                        worldRange = allRowsUpdated ? this.stateController.computeWorldRangeFromViewRange() : this.stateController.worldRange;
+                        additionalParams = {};
+                        if (this._filterExpressionsMap) {
+                            additionalParams['filter_query_parameters'] = { 'filter_expressions_map': this._filterExpressionsMap, 'strategy': fullSearch ? 'DEEP' : 'SAMPLED' };
+                        }
+                        if (!fullSearch) return [3 /*break*/, 7];
+                        i = 0;
+                        _a.label = 1;
+                    case 1:
+                        if (!(i < rowIds.length)) return [3 /*break*/, 6];
+                        _a.label = 2;
+                    case 2:
+                        _a.trys.push([2, 4, , 5]);
+                        request = { worldRange: worldRange, resolution: resolution, rowIds: [rowIds[i]], additionalParams: additionalParams, fullSearch: fullSearch };
+                        return [4 /*yield*/, this.fetchRows(request, i === rowIds.length - 1, fine)];
+                    case 3:
+                        _a.sent();
+                        return [3 /*break*/, 5];
+                    case 4:
+                        error_1 = _a.sent();
+                        return [2 /*return*/];
+                    case 5:
+                        i++;
+                        return [3 /*break*/, 1];
+                    case 6:
+                        // When row-by-row fetch is completed (not interrupted by new request), update model with filter
+                        for (i = 0; i < rowIds.length; i++) {
+                            rowComponent = this.rowComponents.get(rowIds[i]);
+                            if (rowComponent && rowComponent.providedModel) {
+                                rowComponent.providedModel.filterExpressionsMap = this._filterExpressionsMap;
+                            }
+                        }
+                        return [3 /*break*/, 10];
+                    case 7:
+                        _a.trys.push([7, 9, , 10]);
+                        request = { worldRange: worldRange, resolution: resolution, rowIds: rowIds, additionalParams: additionalParams, fullSearch: fullSearch };
+                        return [4 /*yield*/, this.fetchRows(request, !fullSearch, fine)];
+                    case 8:
+                        _a.sent();
+                        return [3 /*break*/, 10];
+                    case 9:
+                        error_2 = _a.sent();
+                        return [2 /*return*/];
+                    case 10: return [3 /*break*/, 12];
+                    case 11:
+                        if (!fine && this._coarseResolutionFactor !== FINE_RESOLUTION_FACTOR) {
+                            // no row to update for coarse resolution, try fine resolution
+                            this.maybeFetchNewData(update, true);
+                        }
+                        _a.label = 12;
+                    case 12: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    TimeGraphChart.prototype.fetchRows = function (request, fetchArrows, fine) {
+        return __awaiter(this, void 0, void 0, function () {
+            var rowData;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
                         if ((0, lodash_1.isEqual)(request, this.ongoingRequest)) {
                             // request ignored because equal to ongoing request
                             return [2 /*return*/];
                         }
+                        this._debouncedMaybeFetchNewDataFine.cancel();
+                        this._debouncedMaybeFetchNewDataFineFullSearch.cancel();
                         _a.label = 1;
                     case 1:
                         _a.trys.push([1, , 3, 4]);
                         this.ongoingRequest = request;
-                        return [4 /*yield*/, this.providers.dataProvider(viewRange, resolution)];
+                        return [4 /*yield*/, this.providers.dataProvider(request.worldRange, request.resolution, fetchArrows, request.rowIds, request.additionalParams)];
                     case 2:
                         rowData = _a.sent();
                         if (!(0, lodash_1.isEqual)(request, this.ongoingRequest)) {
                             // response discarded because not equal to ongoing request
-                            return [2 /*return*/];
+                            return [2 /*return*/, Promise.reject(new Error("Ongoing request updated"))];
                         }
                         if (rowData) {
-                            this.providedResolution = rowData.resolution;
-                            this.providedRange = rowData.range;
-                            this.setRowModel(rowData.rows);
-                            this.removeChildren();
-                            this.addRows(this.rows, this.rowController.rowHeight);
+                            if (!request.fullSearch) {
+                                this.stateController.worldRange = request.worldRange;
+                                this.stateController.worldZoomFactor = this.stateController.zoomFactor;
+                                this.stateController.resetScale();
+                            }
+                            this.addOrUpdateRows(rowData);
                             if (this.isNavigating) {
                                 this.selectStateInNavigation();
                             }
                             if (this.mouseZooming) {
+                                if (this.zoomingSelection) {
+                                    this.removeChild(this.zoomingSelection);
+                                }
                                 delete this.zoomingSelection;
                                 this.updateZoomingSelection();
                             }
@@ -437,132 +618,103 @@ var TimeGraphChart = /** @class */ (function (_super) {
                             this.ongoingRequest = undefined;
                         }
                         this.isNavigating = false;
+                        if (!fine && this._coarseResolutionFactor !== FINE_RESOLUTION_FACTOR) {
+                            this._debouncedMaybeFetchNewDataFine();
+                        }
+                        if (this._filterExpressionsMap && !request.fullSearch && (fine || this._coarseResolutionFactor === FINE_RESOLUTION_FACTOR)) {
+                            // fine resolution done for sampled search, time for deep search in fine res
+                            this._debouncedMaybeFetchNewDataFineFullSearch();
+                        }
                         return [7 /*endfinally*/];
-                    case 4: return [2 /*return*/];
+                    case 4:
+                        // After we build the new world from new data, execute render handlers.
+                        // Only execute after first, coarse render.  Don't need to repeat after second, fine render.
+                        this.stateController.handleOnWorldRender();
+                        return [2 /*return*/];
                 }
             });
         });
     };
-    TimeGraphChart.prototype.updateScaleAndPosition = function () {
+    TimeGraphChart.prototype.handleSelectedStateChange = function () {
         var _this = this;
-        if (this.rows) {
-            this.rows.forEach(function (row) {
-                var rowComponent = _this.rowComponents.get(row);
-                if (rowComponent) {
-                    var opts = {
-                        height: _this.rowController.rowHeight,
-                        position: {
-                            x: 0,
-                            y: rowComponent.position.y
-                        },
-                        width: _this.stateController.canvasDisplayWidth
-                    };
-                    rowComponent.update(opts);
-                }
-                var lastX;
-                var lastTime;
-                var lastBlank = false;
-                row.states.forEach(function (state, elementIndex) {
-                    var _a;
-                    var el = _this.rowStateComponents.get(state);
-                    var start = state.range.start;
-                    var xStart = _this.getPixel(start - _this.unitController.viewRange.start);
-                    if (el) {
-                        var end = state.range.end;
-                        var xEnd = _this.getPixel(end - _this.unitController.viewRange.start);
-                        var opts = {
-                            height: el.height,
-                            position: {
-                                x: xStart,
-                                y: el.position.y
-                            },
-                            width: Math.max(1, xEnd - xStart),
-                            displayWidth: _this.getPixel(bigint_utils_1.BIMath.min(_this.unitController.viewRange.end, end)) - _this.getPixel(bigint_utils_1.BIMath.max(_this.unitController.viewRange.start, start))
-                        };
-                        el.update(opts);
-                    }
-                    if (rowComponent && row.gapStyle) {
-                        _this.updateGap(state, rowComponent, row.gapStyle, xStart, lastX, lastTime, lastBlank);
-                    }
-                    lastX = Math.max(xStart + 1, _this.getPixel(state.range.end - _this.unitController.viewRange.start));
-                    lastTime = state.range.end;
-                    lastBlank = (((_a = state.data) === null || _a === void 0 ? void 0 : _a.style) === undefined);
-                });
-                row.annotations.forEach(function (annotation, elementIndex) {
-                    var el = _this.rowAnnotationComponents.get(annotation);
-                    if (el) {
-                        // only handle ticks for now
-                        var start = annotation.range.start;
-                        var opts = {
-                            position: {
-                                x: _this.getPixel(start - _this.unitController.viewRange.start),
-                                y: el.displayObject.y
-                            }
-                        };
-                        el.update(opts);
-                    }
-                });
-            });
-        }
+        this.selectedStateChangedHandler.forEach(function (handler) { return handler(_this.selectedStateModel); });
     };
-    TimeGraphChart.prototype.handleSelectedStateChange = function () {
+    TimeGraphChart.prototype.addOrUpdateRows = function (rowData) {
         var _this = this;
-        this.selectedElementChangedHandler.forEach(function (handler) { return handler(_this.selectedStateModel); });
+        if (!this.stateController) {
+            throw 'Add this TimeGraphChart to a container before adding rows.';
+        }
+        var providedModel = { range: rowData.range, resolution: rowData.resolution };
+        rowData.rows.forEach(function (row) {
+            var rowComponent = _this.rowComponents.get(row.id);
+            if (rowComponent) {
+                _this.removeChild(rowComponent);
+            }
+            _this.addRow(row.id, row, providedModel);
+        });
     };
-    TimeGraphChart.prototype.addRow = function (row, height, rowIndex) {
+    TimeGraphChart.prototype.addRow = function (rowId, row, providedModel) {
         var _this = this;
-        var rowId = 'row_' + rowIndex;
+        var id = 'row_' + rowId;
+        var rowIndex = this.rowIds.indexOf(rowId);
         var rowStyle = this.providers.rowStyleProvider ? this.providers.rowStyleProvider(row) : undefined;
-        var rowComponent = new time_graph_row_1.TimeGraphRow(rowId, {
+        var rowComponent = new time_graph_row_1.TimeGraphRow(id, {
             position: {
                 x: 0,
-                y: (height * rowIndex)
+                y: this.rowController.rowHeight * rowIndex
             },
-            width: this.stateController.canvasDisplayWidth,
-            height: height
+            width: this.rowWidth,
+            height: this.rowController.rowHeight
         }, rowIndex, row, rowStyle);
         rowComponent.displayObject.interactive = true;
         rowComponent.displayObject.on('click', (function (e) {
             _this.selectRow(row);
         }).bind(this));
         this.addChild(rowComponent);
-        this.rowComponents.set(row, rowComponent);
-        if (this.rowController.selectedRow && this.rowController.selectedRow.id === row.id) {
+        this.rowComponents.set(rowId, rowComponent);
+        if (this.rowController.selectedRowIndex == rowIndex) {
             this.selectRow(row);
         }
+        if (row && providedModel) {
+            this.updateRow(rowComponent, row, providedModel);
+        }
+    };
+    TimeGraphChart.prototype.updateRow = function (rowComponent, row, providedModel) {
+        var _this = this;
         var lastX;
         var lastTime;
         var lastBlank = false;
         row.states.forEach(function (stateModel) {
             var _a, _b;
-            var x = _this.getPixel(stateModel.range.start - _this.unitController.viewRange.start);
+            var x = _this.getWorldPixel(stateModel.range.start);
             if ((_a = stateModel.data) === null || _a === void 0 ? void 0 : _a.style) {
                 var el = _this.createNewState(stateModel, rowComponent);
                 if (el) {
                     _this.addElementInteractions(el);
-                    _this.addChild(el);
-                    if (_this.selectedStateModel && _this.rowController.selectedRow
-                        && _this.rowController.selectedRow.id === row.id
-                        && _this.selectedStateModel.range.start === el.model.range.start
-                        && _this.selectedStateModel.range.end === el.model.range.end) {
-                        _this.selectState(el.model);
-                    }
+                    rowComponent.addState(el);
                 }
             }
             if (row.gapStyle) {
                 _this.updateGap(stateModel, rowComponent, row.gapStyle, x, lastX, lastTime, lastBlank);
             }
-            lastX = Math.max(x + 1, _this.getPixel(stateModel.range.end - _this.unitController.viewRange.start));
+            lastX = Math.max(x + 1, _this.getWorldPixel(stateModel.range.end));
             lastTime = stateModel.range.end;
             lastBlank = (((_b = stateModel.data) === null || _b === void 0 ? void 0 : _b.style) === undefined);
         });
+        if (this.rowController.selectedRow && this.unitController.selectionRange && this.rowController.selectedRow.id === row.id) {
+            var state = row.states.find(function (state) {
+                return _this.unitController.selectionRange && state.range.start <= _this.unitController.selectionRange.start && state.range.end > _this.unitController.selectionRange.start;
+            });
+            this.selectState(state);
+        }
         row.annotations.forEach(function (annotation) {
             var el = _this.createNewAnnotation(annotation, rowComponent);
             if (el) {
                 _this.addElementInteractions(el);
-                _this.addChild(el);
+                rowComponent.addAnnotation(el);
             }
         });
+        rowComponent.providedModel = providedModel;
     };
     TimeGraphChart.prototype.updateGap = function (state, rowComponent, gapStyle, x, lastX, lastTime, lastBlank) {
         var _a, _b, _c, _d;
@@ -595,38 +747,35 @@ var TimeGraphChart = /** @class */ (function (_super) {
                 };
                 var gap_1 = this.createNewState(stateModel, rowComponent);
                 if (gap_1) {
-                    this.addChild(gap_1);
+                    rowComponent.addChild(gap_1);
                     if (state.data) {
                         state.data['gap'] = gap_1;
                     }
+                    this.addElementInteractions(gap_1);
                 }
             }
         }
         else {
             if (state.data && ((_c = state.data) === null || _c === void 0 ? void 0 : _c.gap)) {
-                this.removeChild((_d = state.data) === null || _d === void 0 ? void 0 : _d.gap);
+                rowComponent.removeChild((_d = state.data) === null || _d === void 0 ? void 0 : _d.gap);
                 state.data.gap = undefined;
             }
         }
     };
     TimeGraphChart.prototype.createNewAnnotation = function (annotation, rowComponent) {
-        var start = this.getPixel(annotation.range.start - this.unitController.viewRange.start);
+        var start = this.getWorldPixel(annotation.range.start);
         var el;
         var elementStyle = this.providers.rowAnnotationStyleProvider ? this.providers.rowAnnotationStyleProvider(annotation) : undefined;
-        el = new time_graph_annotation_1.TimeGraphAnnotationComponent(annotation.id, annotation, { position: { x: start, y: rowComponent.position.y + (rowComponent.height * 0.5) } }, elementStyle, rowComponent);
-        this.rowAnnotationComponents.set(annotation, el);
+        el = new time_graph_annotation_1.TimeGraphAnnotationComponent(annotation.id, annotation, { position: { x: start, y: rowComponent.position.y + (rowComponent.height * 0.5) } }, elementStyle, rowComponent, this.stateController.scaleFactor);
         return el;
     };
     TimeGraphChart.prototype.createNewState = function (stateModel, rowComponent) {
-        var xStart = this.getPixel(stateModel.range.start - this.unitController.viewRange.start);
-        var xEnd = this.getPixel(stateModel.range.end - this.unitController.viewRange.start);
+        var xStart = this.getWorldPixel(stateModel.range.start, true);
+        var xEnd = this.getWorldPixel(stateModel.range.end, true);
         var el;
-        var displayStart = this.getPixel(bigint_utils_1.BIMath.max(stateModel.range.start, this.unitController.viewRange.start));
-        var displayEnd = this.getPixel(bigint_utils_1.BIMath.min(stateModel.range.end, this.unitController.viewRange.end));
-        var displayWidth = displayEnd - displayStart;
+        var displayWidth = xEnd - xStart;
         var elementStyle = this.providers.stateStyleProvider ? this.providers.stateStyleProvider(stateModel) : undefined;
-        el = new time_graph_state_1.TimeGraphStateComponent(stateModel.id, stateModel, xStart, xEnd, rowComponent, elementStyle, displayWidth);
-        this.rowStateComponents.set(stateModel, el);
+        el = new time_graph_state_1.TimeGraphStateComponent(stateModel.id, stateModel, xStart, xEnd, rowComponent, elementStyle, displayWidth, this.stateController.scaleFactor);
         return el;
     };
     TimeGraphChart.prototype.addElementInteractions = function (el) {
@@ -642,7 +791,7 @@ var TimeGraphChart = /** @class */ (function (_super) {
                 _this.selectState(el.model);
             }
             // Mouse clicks count keeps increasing without limit as long as we keep clicking on the same coordinate.
-            if (_this._recentlyClickedGlobal && (_this._recentlyClickedGlobal.equals(e.data.global))) {
+            if (_this._recentlyClickedGlobal && _this._recentlyClickedGlobal.equals(e.data.global)) {
                 _this._mouseClicks++;
             }
             else {
@@ -681,46 +830,49 @@ var TimeGraphChart = /** @class */ (function (_super) {
             }
         }).bind(this));
     };
-    TimeGraphChart.prototype.addRows = function (rows, height) {
-        var _this = this;
-        if (!this.stateController) {
-            throw ('Add this TimeGraphChart to a container before adding rows.');
-        }
-        this.rowComponents = new Map();
-        this.rowStateComponents = new Map();
-        this.rowAnnotationComponents = new Map();
-        this.rowController.rowHeight = height;
-        rows.forEach(function (row, index) {
-            _this.addRow(row, height, index);
-        });
-    };
-    TimeGraphChart.prototype.setRowModel = function (rows) {
-        this.rows = rows;
-    };
-    TimeGraphChart.prototype.updateElementStyle = function (model) {
+    TimeGraphChart.prototype.updateStateStyle = function (model) {
         var style = this.providers.stateStyleProvider && this.providers.stateStyleProvider(model);
-        var component = this.rowStateComponents.get(model);
+        var component = this.getStateById(model.id);
         component && style && (component.style = style);
     };
     TimeGraphChart.prototype.updateRowStyle = function (model) {
         var style = this.providers.rowStyleProvider && this.providers.rowStyleProvider(model);
-        var component = this.rowComponents.get(model);
+        var component = this.rowComponents.get(model.id);
         component && style && (component.style = style);
     };
     TimeGraphChart.prototype.registerMouseInteractions = function (interactions) {
         this.mouseInteractions = interactions;
     };
     TimeGraphChart.prototype.onSelectedStateChanged = function (handler) {
-        this.selectedElementChangedHandler.push(handler);
+        this.selectedStateChangedHandler.push(handler);
     };
-    TimeGraphChart.prototype.getRowModels = function () {
-        return this.rows;
+    TimeGraphChart.prototype.getRowModel = function (index) {
+        var _a;
+        if (index >= this.rowIds.length) {
+            return undefined;
+        }
+        return (_a = this.rowComponents.get(this.rowIds[index])) === null || _a === void 0 ? void 0 : _a.model;
     };
-    TimeGraphChart.prototype.getElementById = function (id) {
-        var element = this.children.find(function (child) {
-            return child.id === id;
-        });
-        return element;
+    TimeGraphChart.prototype.getStateById = function (id) {
+        var e_1, _a;
+        var state = undefined;
+        try {
+            for (var _b = __values(this.rowComponents.values()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var rowComponent = _c.value;
+                state = rowComponent.getStateById(id);
+                if (state) {
+                    break;
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return state;
     };
     TimeGraphChart.prototype.selectRow = function (row) {
         if (this.rowController.selectedRow) {
@@ -728,37 +880,46 @@ var TimeGraphChart = /** @class */ (function (_super) {
             this.updateRowStyle(this.rowController.selectedRow);
         }
         this.rowController.selectedRow = row;
-        row.selected = true;
-        this.updateRowStyle(row);
+        if (row) {
+            this.rowController.selectedRowIndex = this.rowIds.indexOf(row.id);
+            row.selected = true;
+            this.updateRowStyle(row);
+        }
     };
     TimeGraphChart.prototype.getSelectedState = function () {
         return this.selectedStateModel;
     };
     TimeGraphChart.prototype.selectState = function (model) {
+        if (this.selectedStateModel === model) {
+            return;
+        }
         if (this.selectedStateModel) {
             delete this.selectedStateModel.selected;
-            this.updateElementStyle(this.selectedStateModel);
+            this.updateStateStyle(this.selectedStateModel);
         }
         if (model) {
-            var el = this.getElementById(model.id);
-            if (el) {
-                var row = el.row;
+            var state = this.getStateById(model.id);
+            if (state) {
+                var row = state.row;
                 if (row) {
-                    this.selectedStateModel = el.model;
-                    el.model.selected = true;
-                    this.updateElementStyle(this.selectedStateModel);
+                    state.model.selected = true;
+                    this.updateStateStyle(state.model);
                     this.selectRow(row.model);
                 }
             }
         }
-        else {
-            this.selectedStateModel = undefined;
-        }
+        this.selectedStateModel = model;
         this.handleSelectedStateChange();
     };
     TimeGraphChart.prototype.setNavigationFlag = function (flag) {
         this.isNavigating = flag;
     };
+    TimeGraphChart.prototype.selectAndReveal = function (rowIndex) {
+        if (rowIndex >= 0 && rowIndex < this.rowIds.length) {
+            this.rowController.selectedRowIndex = rowIndex;
+            this.navigate(rowIndex, true);
+        }
+    };
     TimeGraphChart.prototype.selectStateInNavigation = function () {
         var row = this.rowController.selectedRow;
         if (row && this.unitController.selectionRange) {
@@ -768,6 +929,108 @@ var TimeGraphChart = /** @class */ (function (_super) {
         }
         this.setNavigationFlag(false);
     };
+    TimeGraphChart.prototype.navigateDown = function () {
+        if (this.rowIds.length > 0) {
+            this.rowController.selectedRowIndex = Math.min(this.rowController.selectedRowIndex + 1, this.rowIds.length - 1);
+            this.navigate(this.rowController.selectedRowIndex);
+        }
+    };
+    TimeGraphChart.prototype.navigateUp = function () {
+        if (this.rowIds.length > 0) {
+            this.rowController.selectedRowIndex = Math.max(this.rowController.selectedRowIndex - 1, 0);
+            this.navigate(this.rowController.selectedRowIndex);
+        }
+    };
+    TimeGraphChart.prototype.navigate = function (rowIndex, center) {
+        var _this = this;
+        this.ensureVisible(rowIndex, center);
+        var selectedRowId = this.rowIds[rowIndex];
+        var selectedRowComponent = this.rowComponents.get(selectedRowId);
+        if (!selectedRowComponent) {
+            this.selectRow(undefined);
+            this.selectState(undefined);
+            return;
+        }
+        var selectedRow = selectedRowComponent.model;
+        this.selectRow(selectedRow);
+        var state = selectedRow === null || selectedRow === void 0 ? void 0 : selectedRow.states.find(function (state) {
+            return _this.unitController.selectionRange && state.range.start <= _this.unitController.selectionRange.start && state.range.end > _this.unitController.selectionRange.start;
+        });
+        this.selectState(state);
+    };
+    TimeGraphChart.prototype.getVisibleRowIds = function (buffer) {
+        var visibleRowIds = [];
+        var rowHeight = this.rowController.rowHeight;
+        // return all rows that intersect the visible height range with a number of buffer rows
+        var minY = this.rowController.verticalOffset - buffer * rowHeight;
+        var maxY = this.rowController.verticalOffset + this.stateController.canvasDisplayHeight + buffer * rowHeight;
+        this.rowIds.forEach(function (rowId, index) {
+            var y = rowHeight * index;
+            if (y + rowHeight >= minY && y <= maxY) {
+                visibleRowIds.push(rowId);
+            }
+        });
+        return visibleRowIds;
+    };
+    TimeGraphChart.prototype.ensureVisible = function (rowIndex, center) {
+        if (rowIndex === -1) {
+            return;
+        }
+        if (rowIndex * this.rowController.rowHeight < this.rowController.verticalOffset) {
+            center ? this.centerRow(rowIndex) : this.rowController.verticalOffset = rowIndex * this.rowController.rowHeight;
+        }
+        else if ((rowIndex + 1) * this.rowController.rowHeight > this.rowController.verticalOffset + this.stateController.canvasDisplayHeight) {
+            center ? this.centerRow(rowIndex) : this.rowController.verticalOffset = (rowIndex + 1) * this.rowController.rowHeight - this.stateController.canvasDisplayHeight;
+        }
+    };
+    TimeGraphChart.prototype.centerRow = function (rowIndex) {
+        if (rowIndex === -1) {
+            return;
+        }
+        var rowHeight = this.rowController.rowHeight;
+        var canvasDisplayHeight = this.stateController.canvasDisplayHeight;
+        var numberOfVisibleRows = Math.floor(canvasDisplayHeight / rowHeight);
+        var halfVizRows = Math.floor(numberOfVisibleRows / 2);
+        var numberOfRows = this.rowComponents.size;
+        if (rowIndex < halfVizRows) {
+            // Index too low to center.
+            this.rowController.verticalOffset = 0;
+        }
+        else if (rowIndex > (numberOfRows - halfVizRows - 1)) {
+            // Index too high to center.
+            this.rowController.verticalOffset = (numberOfRows - numberOfVisibleRows) * rowHeight;
+        }
+        else {
+            // Can be centered.
+            var numberOfHiddenRows = rowIndex - halfVizRows;
+            this.rowController.verticalOffset = numberOfHiddenRows * rowHeight;
+        }
+    };
+    TimeGraphChart.prototype.scaleComponents = function () {
+        var _this = this;
+        this.rowComponents.forEach(function (rowComponent) {
+            var row = rowComponent.model;
+            row === null || row === void 0 ? void 0 : row.states.forEach(function (state) {
+                var el = rowComponent.getStateById(state.id);
+                if (el) {
+                    el.scaleLabel(_this.stateController.scaleFactor);
+                }
+            });
+            row === null || row === void 0 ? void 0 : row.annotations.forEach(function (annotation) {
+                var el = rowComponent.getAnnotationById(annotation.id);
+                if (el) {
+                    el.scaleAnnotation(_this.stateController.scaleFactor);
+                }
+            });
+        });
+    };
+    Object.defineProperty(TimeGraphChart.prototype, "rowWidth", {
+        get: function () {
+            return Number(this.stateController.worldRangeLength) * this.stateController.zoomFactor;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return TimeGraphChart;
 }(time_graph_chart_layer_1.TimeGraphChartLayer));
 exports.TimeGraphChart = TimeGraphChart;