Add support for range events.

Signed-off-by: Ankush Tyagi <ankush.tyagi@ericsson.com>
eclipse-cdt-cloud · Jun 9, 2021 · 8c2b695 · 8c2b695
1 parent f4204fa
commit 8c2b695
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/packages/react-components/src/components/data-providers/tsp-data-provider.ts b/packages/react-components/src/components/data-providers/tsp-data-provider.ts
@@ -29,13 +29,14 @@ export class TspDataProvider {
     }
 
     async getData(ids: number[], entries: TimeGraphEntry[], totalTimeRange: TimeRange,
-            viewRange?: TimelineChart.TimeGraphRange, resolution?: number): Promise<TimelineChart.TimeGraphModel> {
+        viewRange?: TimelineChart.TimeGraphRange, resolution?: number): Promise<TimelineChart.TimeGraphModel> {
         this.timeGraphEntries = [...entries];
         if (!this.timeGraphEntries.length) {
             return {
                 id: 'model',
                 totalLength: this.totalRange,
                 rows: [],
+                rangeEvents: [],
                 arrows: [],
                 data: {}
             };
@@ -71,16 +72,22 @@ export class TspDataProvider {
         const annotations: Map<number, TimelineChart.TimeGraphAnnotation[]> = new Map();
         const tspClientResponse2 = await this.client.fetchAnnotations(this.traceUUID, this.outputId, fetchParameters);
         const annotationsResponse = tspClientResponse2.getModel();
+        const rangeEvents: TimelineChart.TimeGraphAnnotation[] = [];
+
         if (tspClientResponse2.isOk() && annotationsResponse) {
             Object.values(annotationsResponse.model.annotations).forEach(categoryArray => {
                 categoryArray.forEach(annotation => {
                     if (annotation.type === Type.CHART) {
-                        let entryArray = annotations.get(annotation.entryId);
-                        if (entryArray === undefined) {
-                            entryArray = [];
-                            annotations.set(annotation.entryId, entryArray);
+                        if (annotation.entryId === -1) {
+                            rangeEvents.push(this.getAnnotation(annotation, rangeEvents.length, chartStart));
+                        } else {
+                            let entryArray = annotations.get(annotation.entryId);
+                            if (entryArray === undefined) {
+                                entryArray = [];
+                                annotations.set(annotation.entryId, entryArray);
+                            }
+                            entryArray.push(this.getAnnotation(annotation, entryArray.length, chartStart));
                         }
-                        entryArray.push(this.getAnnotation(annotation, entryArray.length, chartStart));
                     }
                 });
             });
@@ -92,11 +99,13 @@ export class TspDataProvider {
             }
         }
         const arrows = await this.getArrows(ids, viewRange, resolution);
+
         return {
             id: 'model',
             totalLength: this.totalRange,
             rows,
             arrows,
+            rangeEvents,
             data: {
                 originalStart: chartStart
             }

diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { TimeGraphStateComponent, TimeGraphStateStyle } from 'timeline-chart/lib/components/time-graph-state';
 import { TimeGraphChart, TimeGraphChartProviders } from 'timeline-chart/lib/layer/time-graph-chart';
 import { TimeGraphChartArrows } from 'timeline-chart/lib/layer/time-graph-chart-arrows';
+import { TimeGraphRangeEventsLayer } from 'timeline-chart/lib/layer/time-graph-range-events-layer';
 import { TimeGraphChartCursors } from 'timeline-chart/lib/layer/time-graph-chart-cursors';
 import { TimeGraphChartGrid } from 'timeline-chart/lib/layer/time-graph-chart-grid';
 import { TimeGraphChartSelectionRange } from 'timeline-chart/lib/layer/time-graph-chart-selection-range';
@@ -43,6 +44,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     private chartCursors: TimeGraphChartCursors;
     private arrowLayer: TimeGraphChartArrows;
     private horizontalContainer: React.RefObject<HTMLDivElement>;
+    private rangeEventsLayer: TimeGraphRangeEventsLayer;
 
     private tspDataProvider: TspDataProvider;
     private styleProvider: StyleProvider;
@@ -78,6 +80,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
                 lineThickness: 1, // hasStates ? 1 : 3 // row.data && row.data.hasStates
             })
         };
+        this.rangeEventsLayer = new TimeGraphRangeEventsLayer('timeGraphRangeEvents', providers);
         this.chartLayer = new TimeGraphChart('timeGraphChart', providers, this.rowController);
         this.arrowLayer = new TimeGraphChartArrows('timeGraphChartArrows', this.rowController);
         this.vscrollLayer = new TimeGraphVerticalScrollbar('timeGraphVerticalScrollbar', this.rowController);
@@ -159,6 +162,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             this.state.collapsedNodes !== prevState.collapsedNodes) {
             this.chartLayer.updateChart();
             this.arrowLayer.update();
+            this.rangeEventsLayer.update();
         }
     }
 
@@ -288,7 +292,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             unitController={this.props.unitController}
             id='timegraph-chart'
             layer={[
-                grid, this.chartLayer, selectionRange, this.chartCursors, this.arrowLayer
+                grid, this.chartLayer, selectionRange, this.chartCursors, this.arrowLayer, this.rangeEventsLayer
             ]}
         >
         </ReactTimeGraphContainer>;
@@ -330,6 +334,8 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         const timeGraphData: TimelineChart.TimeGraphModel = await this.tspDataProvider.getData(orderedTreeIds, this.state.timegraphTree,
             this.props.range, newRange, this.props.style.chartWidth);
         this.arrowLayer.addArrows(timeGraphData.arrows);
+        this.rangeEventsLayer.addRangeEvents(timeGraphData.rangeEvents);
+
         return {
             rows: timeGraphData ? timeGraphData.rows : [],
             range: newRange,
@@ -472,7 +478,9 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
                     size: symbolSize,
                     color: color ? color.color : 0x000000,
                     alpha: color ? color.alpha : 1.0,
-                    verticalAlign: vAlign ? vAlign : 'middle'
+                    verticalAlign: vAlign ? vAlign : 'middle',
+                    opacity: color ? color.alpha : 0.2
+
                 };
             }
         }

diff --git a/yarn.lock b/yarn.lock
@@ -15330,9 +15330,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.e0da58ac"
-  resolved "https://registry.yarnpkg.com/timeline-chart/-/timeline-chart-0.2.0-next.e0da58ac.tgz#1e37818f205292db6dd77c20396058f0faa627eb"
-  integrity sha512-yaMMH7fzLoOz/HBUsB+bWMgTRhhH1h8B2ukAHzbPVeQUZs7Z0nafAGTOrfZX1277p7QanY1Y3pZ4Svd+W+Ocag==
+  version "0.2.0-next.a8847375"
+  resolved "https://registry.yarnpkg.com/timeline-chart/-/timeline-chart-0.2.0-next.a8847375.tgz#b49936090901c1519b47db9d456e20f1f2a65797"
+  integrity sha512-+4xpZ7NwWubQL/vrMHoaeS+8kbi0ZOo8Jinqah+v5j8m6pbaEKN8rLVXaXgjt67Hjy0qdOnRZGSupqQ1e06PjA==
   dependencies:
     "@types/lodash.throttle" "^4.1.4"
     glob "^7.1.6"