Timeline chart: Update chart after collapsing or expanding entries in…

… the tree

Added a new condition in time-graph-chart.ts that allows to fetch new
data when collapsing or expanding entries. The function updateChart()
allows to update the chart's rows simulteanously when it is called
in the timegraph-output-component.ts in theia-trace-extension.
++ Added optional parameter to maybeFetchNewData() that enables the
chart update.

Signed-off-by: Soukaina Moussaoui <soukaina.moussaoui@polymtl.ca>

timeline-chart/src/layer/time-graph-chart.ts

@@ -36,8 +36,6 @@ export class TimeGraphChart extends TimeGraphChartLayer {
     protected providedResolution: number;
 
     protected fetching: boolean;
-    protected allowToUpdateChart: boolean;
-
     protected shiftKeyDown: boolean;
     protected ctrlKeyDown: boolean;
 
@@ -47,7 +45,6 @@ export class TimeGraphChart extends TimeGraphChartLayer {
         super(id, rowController);
         this.providedRange = { start: 0, end: 0 };
         this.providedResolution = 1;
-        this.allowToUpdateChart = false;
     }
 
     protected afterAddToContainer() {
@@ -137,23 +134,23 @@ export class TimeGraphChart extends TimeGraphChartLayer {
         }
     }
 
-    update() {
-        this.updateScaleAndPosition();
+    updateChart() {
+        const update = true;
+        this.maybeFetchNewData(update);
     }
 
-    updateChart() {
-        this.allowToUpdateChart = true;
-        this.maybeFetchNewData();
+    update() {
+        this.updateScaleAndPosition();
     }
 
-    protected async maybeFetchNewData() {
+    protected async maybeFetchNewData(update?: boolean) {
         const resolution = this.unitController.viewRangeLength / this.stateController.canvasDisplayWidth;
         const viewRange = this.unitController.viewRange;
         if (viewRange && (
             viewRange.start < this.providedRange.start ||
             viewRange.end > this.providedRange.end ||
             resolution < this.providedResolution ||
-            this.allowToUpdateChart
+            update
         )) {
             this.fetching = true;
             const rowData = await this.providers.dataProvider(viewRange, resolution);
@@ -350,14 +347,20 @@ 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) {
-                    this.selectedElementModel = el.model;
-                    el.model.selected = true;
-                    this.updateElementStyle(this.selectedElementModel);
-                    this.selectRow(row.model);
+                    const newEl = this.createNewRowElement(model, row);
+                    if (newEl) {
+                        this.removeChild(el);
+                        this.addElementInteractions(newEl);
+                        this.addChild(newEl);
+                        this.selectRow(newEl.row.model);
+                    }
                 }
             }
         }