Add support for arrows

This change makes use of the getData provider of the time-graph-chart.
Another way of implementing it would to change time-graph-chart-arrows  to have its own data provider.

This change fixes #39 and it is dependent on:
- github.com/eclipse-cdt-cloud/timeline-chart/pull/115
- github.com/eclipse-cdt-cloud/tsp-typescript-client/pull/19
- git.eclipse.org/r/c/tracecompass.incubator/org.eclipse.tracecompass.incubator/+/177071

Signed-off-by: Arnaud Fiorini <fiorini.arnaud@gmail.com>

packages/react-components/src/components/data-providers/tsp-data-provider.ts

@@ -1,5 +1,5 @@
 import { TspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
-import { TimeGraphEntry, TimeGraphRow, TimeGraphState } from 'tsp-typescript-client/lib/models/timegraph';
+import { TimeGraphArrow, TimeGraphEntry, TimeGraphRow, TimeGraphState } from 'tsp-typescript-client/lib/models/timegraph';
 import { TimelineChart } from 'timeline-chart/lib/time-graph-model';
 import { QueryHelper } from 'tsp-typescript-client/lib/models/query/query-helper';
 import { OutputElementStyle } from 'tsp-typescript-client/lib/models/styles';
@@ -15,12 +15,14 @@ export class TspDataProvider {
     private traceUUID: string;
     private timeGraphEntries: TimeGraphEntry[];
     private timeGraphRows: TimeGraphRow[];
+    private timeGraphArrows: TimeGraphArrow[];
 
     public totalRange: number;
 
     constructor(client: TspClient, traceUUID: string, outputId: string, canvasDisplayWidth?: number) {
         this.timeGraphEntries = [];
         this.timeGraphRows = [];
+        this.timeGraphArrows = [];
         this.canvasDisplayWidth = canvasDisplayWidth;
         this.client = client;
         this.outputId = outputId;
@@ -91,17 +93,44 @@ export class TspDataProvider {
                 row.annotations = entryArray;
             }
         }
+        const arrows = await this.getArrows(ids, viewRange, resolution);
         return {
             id: 'model',
             totalLength: this.totalRange,
             rows,
-            arrows: [],
+            arrows,
             data: {
                 originalStart: chartStart
             }
         };
     }
 
+    async getArrows(ids: number[], viewRange?: TimelineChart.TimeGraphRange, resolution?: number): Promise<TimelineChart.TimeGraphArrow[]> {
+        if (viewRange && resolution) {
+            const start = viewRange.start + this.timeGraphEntries[0].start;
+            const end = viewRange.end + this.timeGraphEntries[0].start;
+            const fetchParameters = QueryHelper.selectionTimeQuery(QueryHelper.splitRangeIntoEqualParts(
+                Math.trunc(start), Math.trunc(end), resolution), ids);
+            const tspClientResponseArrows = await this.client.fetchTimeGraphArrows(this.traceUUID, this.outputId, fetchParameters);
+            const stateResponseArrows = tspClientResponseArrows.getModel();
+            if (tspClientResponseArrows.isOk() && stateResponseArrows) {
+                this.timeGraphArrows = stateResponseArrows.model;
+            }
+        }
+        const offset = this.timeGraphEntries[0].start;
+        this.timeGraphArrows.filter(arrow => ids.find(
+            id => id === arrow.sourceId) || ids.find(id => id === arrow.targetId));
+        const arrows = this.timeGraphArrows.map(arrow => ({
+            sourceId: ids.indexOf(arrow.sourceId),
+            destinationId: ids.indexOf(arrow.targetId),
+            range: {
+                start: arrow.start - offset,
+                end: arrow.end - offset
+            } as TimelineChart.TimeGraphRange
+        } as TimelineChart.TimeGraphArrow));
+        return arrows;
+    }
+
     private timeGraphRowsOrdering(orderedIds: number[]) {
         const newTimeGraphRows: TimeGraphRow[] = [];
         orderedIds.forEach(id => {

packages/react-components/src/components/timegraph-output-component.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TimeGraphRowElement, TimeGraphRowElementStyle } from 'timeline-chart/lib/components/time-graph-row-element';
 import { TimeGraphChart, TimeGraphChartProviders } from 'timeline-chart/lib/layer/time-graph-chart';
+import { TimeGraphChartArrows } from 'timeline-chart/lib/layer/time-graph-chart-arrows';
 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';
@@ -38,6 +39,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     private chartLayer: TimeGraphChart;
     private vscrollLayer: TimeGraphVerticalScrollbar;
     private chartCursors: TimeGraphChartCursors;
+    private arrowLayer: TimeGraphChartArrows;
     private horizontalContainer: React.RefObject<HTMLDivElement>;
 
     private tspDataProvider: TspDataProvider;
@@ -75,6 +77,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             })
         };
         this.chartLayer = new TimeGraphChart('timeGraphChart', providers, this.rowController);
+        this.arrowLayer = new TimeGraphChartArrows('timeGraphChartArrows', this.rowController);
         this.vscrollLayer = new TimeGraphVerticalScrollbar('timeGraphVerticalScrollbar', this.rowController);
         this.chartCursors = new TimeGraphChartCursors('chart-cursors', this.chartLayer, this.rowController, { color: this.props.style.cursorColor });
         this.rowController.onVerticalOffsetChangedHandler(() => {
@@ -153,6 +156,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         if (prevState.outputStatus === ResponseStatus.RUNNING ||
             this.state.collapsedNodes !== prevState.collapsedNodes) {
             this.chartLayer.updateChart();
+            this.arrowLayer.update();
         }
     }
 
@@ -279,7 +283,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             unitController={this.props.unitController}
             id='timegraph-chart'
             layer={[
-                grid, this.chartLayer, selectionRange, this.chartCursors
+                grid, this.chartLayer, selectionRange, this.chartCursors, this.arrowLayer
             ]}
         >
         </ReactTimeGraphContainer>;
@@ -319,6 +323,9 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         const newResolution: number = resolution * 0.8;
         const timeGraphData: TimelineChart.TimeGraphModel = await this.tspDataProvider.getData(orderedTreeIds, this.state.timegraphTree,
             this.props.range, newRange, this.props.style.chartWidth);
+        if (timeGraphData.arrows.length > 0) {
+            this.arrowLayer.addArrows(timeGraphData.arrows);
+        }
         return {
             rows: timeGraphData ? timeGraphData.rows : [],
             range: newRange,