Fix use of TimeGraphArrow sourceId and destinationId

The sourceId and destinationId should be the row id of source row and
destination row. But it is used as the index of the source and
destination rows in the full list of rows.

Change to use the sourceId and destinationId properly. This requires
that the TimeGraphChartArrows layer receive the full list of row ids.

Signed-off-by: Patrick Tasse <patrick.tasse@gmail.com>

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

@@ -125,7 +125,7 @@ export class TspDataProvider {
                 row.annotations = entryArray;
             }
         }
-        const arrows = await this.getArrows(ids, viewRange, nbTimes);
+        const arrows = await this.getArrows(viewRange, nbTimes);
 
         return {
             id: 'model',
@@ -139,24 +139,22 @@ export class TspDataProvider {
         };
     }
 
-    async getArrows(ids: number[], viewRange?: TimelineChart.TimeGraphRange, nbTimes?: number): Promise<TimelineChart.TimeGraphArrow[]> {
+    async getArrows(viewRange?: TimelineChart.TimeGraphRange, nbTimes?: number): Promise<TimelineChart.TimeGraphArrow[]> {
         let timeGraphArrows: TimeGraphArrow[] = [];
         if (viewRange && nbTimes) {
             const start = viewRange.start + this.timeGraphEntries[0].start;
             const end = viewRange.end + this.timeGraphEntries[0].start;
-            const fetchParameters = QueryHelper.selectionTimeRangeQuery(start, end, nbTimes, ids);
+            const fetchParameters = QueryHelper.timeRangeQuery(start, end, nbTimes);
             const tspClientResponseArrows = await this.client.fetchTimeGraphArrows(this.traceUUID, this.outputId, fetchParameters);
             const stateResponseArrows = tspClientResponseArrows.getModel();
             if (tspClientResponseArrows.isOk() && stateResponseArrows && stateResponseArrows.model) {
                 timeGraphArrows = stateResponseArrows.model;
             }
         }
         const offset = this.timeGraphEntries[0].start;
-        timeGraphArrows = timeGraphArrows.filter(arrow => ids.find(
-            id => id === arrow.sourceId) && ids.find(id => id === arrow.targetId));
         const arrows = timeGraphArrows.map(arrow => ({
-            sourceId: ids.indexOf(arrow.sourceId),
-            destinationId: ids.indexOf(arrow.targetId),
+            sourceId: arrow.sourceId,
+            destinationId: arrow.targetId,
             range: {
                 start: arrow.start - offset,
                 end: arrow.end - offset

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

@@ -500,6 +500,12 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         signalManager().fireTooltipSignal(tooltipObject);
     }
 
+    private getTimegraphRowIds() {
+        return {
+            rowIds: getAllExpandedNodeIds(listToTree(this.state.timegraphTree, this.state.columns), this.state.collapsedNodes)
+        };
+    }
+
     private async fetchTimegraphData(range: TimelineChart.TimeGraphRange, resolution: number) {
         if (document.getElementById(this.props.traceId + this.props.outputDescriptor.id + 'handleSpinner')) {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -516,7 +522,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         const timeGraphData: TimelineChart.TimeGraphModel = await this.tspDataProvider.getData(orderedTreeIds, this.state.timegraphTree,
             this.props.range, newRange, nbTimes, this.props.markerCategories, this.props.markerSetId);
         this.updateMarkersData(timeGraphData.rangeEvents, newRange, nbTimes);
-        this.arrowLayer.addArrows(timeGraphData.arrows);
+        this.arrowLayer.addArrows(timeGraphData.arrows, this.getTimegraphRowIds().rowIds);
         this.rangeEventsLayer.addRangeEvents(timeGraphData.rangeEvents);
 
         if (document.getElementById(this.props.traceId + this.props.outputDescriptor.id + 'handleSpinner')) {