Improve State Navigation using Left/Right Arrow Buttons

Add next and prev possible state fields to each row in tsp-data-provider.ts and store the timestamps of first and last states to fetch prev/next possbile states. Signed-off-by: muddana-satish <satish.muddana@ericsson.com>
eclipse-cdt-cloud · Oct 26, 2020 · d37f9c8 · d37f9c8
1 parent 91f685f
commit d37f9c8
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/viewer-prototype/src/browser/trace-viewer/components/data-providers/tsp-data-provider.ts b/viewer-prototype/src/browser/trace-viewer/components/data-providers/tsp-data-provider.ts
@@ -57,16 +57,7 @@ export class TspDataProvider {
             const rowId: number = row.entryId;
             const entry = this.timeGraphEntries.find(tgEntry => tgEntry.id === rowId);
             if (entry) {
-                const states = this.getStateModelByRow(row, chartStart);
-                rows.push({
-                    id: rowId,
-                    name: entry.labels[0], // 'row' + rowId,
-                    range: {
-                        start: entry.start - chartStart,
-                        end: entry.end - chartStart
-                    },
-                    states
-                });
+                rows.push(this.getRowModel(row, chartStart, rowId, entry));
             }
         });
 
@@ -96,8 +87,10 @@ export class TspDataProvider {
         this.timeGraphRows = newTimeGraphRows;
     }
 
-    protected getStateModelByRow(row: TimeGraphRow, chartStart: number): TimelineChart.TimeGraphRowElementModel[] {
+    private getRowModel(row: TimeGraphRow, chartStart: number, rowId: number, entry: TimeGraphEntry) {
         const states: TimelineChart.TimeGraphRowElementModel[] = [];
+        let prevPossibleState = entry.start;
+        let nextPossibleState = entry.end;
         row.states.forEach((state: TimeGraphState, idx: number) => {
             const end = state.end - chartStart;
             if (state.style) {
@@ -119,6 +112,7 @@ export class TspDataProvider {
                 if (nextState && nextState.start > state.end + 1) {
                     // Add gap state
                     states.push({
+                        // TODO: We should probably remove id from state. We don't use it anywhere.
                         id: row.entryId + '-' + idx,
                         label: 'GAP',
                         range: {
@@ -131,7 +125,24 @@ export class TspDataProvider {
                     });
                 }
             }
+            if (idx === 0) {
+                prevPossibleState = state.start - chartStart;
+            }
+            if (idx === row.states.length - 1) {
+                nextPossibleState = state.end - chartStart;
+            }
         });
-        return states;
+
+        return {
+            id: rowId,
+            name: entry.labels[0], // 'row' + rowId,
+            range: {
+                start: entry.start - chartStart,
+                end: entry.end - chartStart
+            },
+            states,
+            prevPossibleState,
+            nextPossibleState
+        };
     }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -13459,9 +13459,9 @@ timed-out@^4.0.0, timed-out@^4.0.1:
   integrity sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=
 
 timeline-chart@next:
-  version "0.2.0-next.a0e2dfbe"
-  resolved "https://registry.yarnpkg.com/timeline-chart/-/timeline-chart-0.2.0-next.a0e2dfbe.tgz#00e3a5c40f54c47b6f0ca15a2f01f9a327e60588"
-  integrity sha512-K9jy/GtUfInEoYQIWW66xbllcLA0Co8KRP8T4MzX86F1L6ai8cin5Ln0d04TKRToNYGnZfPEY1WQn2mNwVSHuw==
+  version "0.2.0-next.006aac47"
+  resolved "https://registry.yarnpkg.com/timeline-chart/-/timeline-chart-0.2.0-next.006aac47.tgz#7730cd4b5ff12d78979b1cf2b428ae12cfb86189"
+  integrity sha512-ZSoj7fIotxHSaZIHF5gDVrgXzzKD2EsGe0ED/llmFP7Jlq/Sdm1GafxiWjIor4kqyHECJeVBao1oF93HNkbzXA==
   dependencies:
     "@types/lodash.throttle" "^4.1.4"
     glob "^7.1.6"