Bugfixes related to state navigation using the left/right arrow keys.

--States in timeline-chart frozen in place when scrolling in the horizontal direction. --Sporadic browser assertions triggered by accessing props (states) of an undefined selectedRow. Signed-off-by: Akshay Sharma <akshay.c.sharma@ericsson.com>
eclipse-cdt-cloud · Aug 14, 2020 · 559e8f7 · 559e8f7
1 parent 14e1c84
commit 559e8f7
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 45 deletions.
diff --git a/timeline-chart/src/layer/time-graph-chart-cursors.ts b/timeline-chart/src/layer/time-graph-chart-cursors.ts
@@ -39,7 +39,7 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
         document.addEventListener('keyup', (event: KeyboardEvent) => {
             this.shiftKeyDown = event.shiftKey;
         });
-        
+
         this.stage.on('mousedown', (event: PIXI.InteractionEvent) => {
             this.mouseIsDown = true;
             const mouseX = event.data.global.x;
@@ -89,47 +89,51 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
 
     protected navigateOrSelectLeft() {
         const row = this.rowController.selectedRow;
-        const states = row.states;
-        const nextIndex = states.findIndex((rowElementModel: TimelineChart.TimeGraphRowElementModel) => {
-            const selStart = this.unitController.selectionRange ? (this.shiftKeyDown ? this.unitController.selectionRange.end : this.unitController.selectionRange.start) : 0;
-            return rowElementModel.range.start >= selStart;
-        });
-        let newPos = 0;
-        let elIndex = 0;
-        if (states.length == 0)
-            return false;
-        if (nextIndex > 0) {
-            elIndex = nextIndex - 1;
-        } else if (nextIndex === -1) {
-            elIndex = states.length - 1;
-        }
-        newPos = states[elIndex].range.start;
-        if (this.unitController.selectionRange && this.shiftKeyDown) {
-            this.unitController.selectionRange = { start: this.unitController.selectionRange.start, end: newPos };
-        } else {
-            this.unitController.selectionRange = { start: newPos, end: newPos };
+        if (row) {
+            const states = row.states;
+            const nextIndex = states.findIndex((rowElementModel: TimelineChart.TimeGraphRowElementModel) => {
+                const selStart = this.unitController.selectionRange ? (this.shiftKeyDown ? this.unitController.selectionRange.end : this.unitController.selectionRange.start) : 0;
+                return rowElementModel.range.start >= selStart;
+            });
+            let newPos = 0;
+            let elIndex = 0;
+            if (states.length == 0)
+                return false;
+            if (nextIndex > 0) {
+                elIndex = nextIndex - 1;
+            } else if (nextIndex === -1) {
+                elIndex = states.length - 1;
+            }
+            newPos = states[elIndex].range.start;
+            if (this.unitController.selectionRange && this.shiftKeyDown) {
+                this.unitController.selectionRange = { start: this.unitController.selectionRange.start, end: newPos };
+            } else {
+                this.unitController.selectionRange = { start: newPos, end: newPos };
+            }
+            this.maybeCenterCursor();
+            this.chartLayer.selectRowElement(states[elIndex]);
         }
-        this.maybeCenterCursor();
-        this.chartLayer.selectRowElement(states[elIndex]);
     }
 
     protected navigateOrSelectRight() {
         const row = this.rowController.selectedRow;
-        const states = row.states;
-        const nextIndex = states.findIndex((rowElementModel: TimelineChart.TimeGraphRowElementModel) => {
-            const cursorPosition = this.unitController.selectionRange ? (this.shiftKeyDown ? this.unitController.selectionRange.end : this.unitController.selectionRange.start) : 0;
-            return rowElementModel.range.start > cursorPosition;
-        });
-        if (nextIndex < states.length) {
-            const newPos = states[nextIndex] ? states[nextIndex].range.start : this.unitController.absoluteRange;
-            if (this.unitController.selectionRange && this.shiftKeyDown) {
-                this.unitController.selectionRange = { start: this.unitController.selectionRange.start, end: newPos };
-            } else {
-                this.unitController.selectionRange = { start: newPos, end: newPos };
+        if (row) {
+            const states = row.states;
+            const nextIndex = states.findIndex((rowElementModel: TimelineChart.TimeGraphRowElementModel) => {
+                const cursorPosition = this.unitController.selectionRange ? (this.shiftKeyDown ? this.unitController.selectionRange.end : this.unitController.selectionRange.start) : 0;
+                return rowElementModel.range.start > cursorPosition;
+            });
+            if (nextIndex < states.length) {
+                const newPos = states[nextIndex] ? states[nextIndex].range.start : this.unitController.absoluteRange;
+                if (this.unitController.selectionRange && this.shiftKeyDown) {
+                    this.unitController.selectionRange = { start: this.unitController.selectionRange.start, end: newPos };
+                } else {
+                    this.unitController.selectionRange = { start: newPos, end: newPos };
+                }
             }
+            this.maybeCenterCursor();
+            this.chartLayer.selectRowElement(states[nextIndex]);
         }
-        this.maybeCenterCursor();
-        this.chartLayer.selectRowElement(states[nextIndex]);
     }
 
     protected navigateDown(){

diff --git a/timeline-chart/src/layer/time-graph-chart.ts b/timeline-chart/src/layer/time-graph-chart.ts
@@ -342,20 +342,14 @@ export class TimeGraphChart extends TimeGraphChartLayer {
             this.updateElementStyle(this.selectedElementModel);
         }
         if (model) {
-            this.selectedElementModel = model;
-            model.selected = true;
-            this.updateElementStyle(this.selectedElementModel);
             const el = this.getElementById(model.id);
             if (el) {
                 const row = el.row;
                 if (row) {
-                    const newEl = this.createNewRowElement(model, row);
-                    if (newEl) {
-                        this.removeChild(el);
-                        this.addElementInteractions(newEl);
-                        this.addChild(newEl);
-                        this.selectRow(newEl.row.model);
-                    }
+                    this.selectedElementModel = el.model;
+                    el.model.selected = true;
+                    this.updateElementStyle(this.selectedElementModel);
+                    this.selectRow(row.model);
                 }
             }
         }