Fetch the style model only once

Fetch the style model from the style provider when the component is mounted, not every time the component is updated if the outputStatus is not COMPLETED. Signed-off-by: Patrick Tasse <patrick.tasse@ericsson.com>
eclipse-cdt-cloud · Feb 8, 2021 · c663f12 · c663f12
1 parent 6a34f31
commit c663f12
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 19 deletions.
diff --git a/packages/react-components/src/components/data-providers/style-provider.ts b/packages/react-components/src/components/data-providers/style-provider.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { TspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
 import { QueryHelper } from 'tsp-typescript-client/lib/models/query/query-helper';
-import { OutputElementStyle } from 'tsp-typescript-client/lib/models/styles';
+import { OutputStyleModel } from 'tsp-typescript-client/lib/models/styles';
 
 export class StyleProvider {
     private tspClient: TspClient;
@@ -10,7 +10,7 @@ export class StyleProvider {
 
     private tmpStyleObject: { [key: string]: { [key: string]: { [key: string]: any } } };
 
-    private styles: { [key: string]: OutputElementStyle } | undefined;
+    private styleModel: OutputStyleModel | undefined;
 
     constructor(outputId: string, traceId: string, tspClient: TspClient) {
         this.outputId = outputId;
@@ -80,22 +80,18 @@ export class StyleProvider {
     }
 
     /**
-     * Get the style for a specific output
-     * @param forceUpdate Force the update of the current cached styles from the server
+     * Get the style model for a specific output
+     * @param forceUpdate Force the update of the current cached style model from the server
      */
-    public async getStyles(forceUpdate?: boolean): Promise<{ [key: string]: OutputElementStyle }> {
-        if (!this.styles || forceUpdate) {
+    public async getStyleModel(forceUpdate?: boolean): Promise<OutputStyleModel | undefined> {
+        if (!this.styleModel || forceUpdate) {
             const tspClientResponse = await this.tspClient.fetchStyles(this.traceId, this.outputId, QueryHelper.query());
             const styleResponse = tspClientResponse.getModel();
             if (tspClientResponse.isOk() && styleResponse) {
-                const styleModel = styleResponse.model;
-                const styles = styleModel.styles;
-                this.styles = styles;
-                return styles;
+                this.styleModel = styleResponse.model;
             }
-            this.styles = {};
         }
-        return this.styles;
+        return this.styleModel;
     }
 
     public getStylesTmp(_forceUpdate?: boolean): { [key: string]: { [key: string]: any } } {

diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx
@@ -41,6 +41,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     private horizontalContainer: React.RefObject<HTMLDivElement>;
 
     private tspDataProvider: TspDataProvider;
+    private styleProvider: StyleProvider;
     private styleMap = new Map<string, TimeGraphRowElementStyle>();
 
     private selectedElement: TimeGraphRowElement | undefined;
@@ -55,6 +56,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         };
         this.onToggleCollapse = this.onToggleCollapse.bind(this);
         this.tspDataProvider = new TspDataProvider(this.props.tspClient, this.props.traceId, this.props.outputDescriptor.id);
+        this.styleProvider = new StyleProvider(this.props.outputDescriptor.id, this.props.traceId, this.props.tspClient);
         this.rowController = new TimeGraphRowController(this.props.style.rowHeight, this.totalHeight);
         this.horizontalContainer = React.createRef();
         const providers: TimeGraphChartProviders = {
@@ -98,6 +100,9 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     }
 
     async componentDidMount(): Promise<void> {
+        this.setState({
+            styleModel: await this.styleProvider.getStyleModel()
+        });
         this.waitAnalysisCompletion();
     }
 
@@ -117,17 +122,10 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
                 } else {
                     columns.push({title: 'Name', sortable: true});
                 }
-                const tspClientResponse2 = await this.props.tspClient.fetchStyles(this.props.traceId, this.props.outputDescriptor.id, QueryHelper.query());
-                const styleResponse = tspClientResponse2.getModel();
-                let styleModel = undefined;
-                if (tspClientResponse2.isOk() && styleResponse) {
-                    styleModel = styleResponse.model;
-                }
                 this.setState({
                     outputStatus: treeResponse.status,
                     timegraphTree: treeResponse.model.entries,
                     columns: columns,
-                    styleModel: styleModel
                 }, this.updateTotalHeight);
             }
             this.chartLayer.updateChart();