Use TimeGraphContainer noWebGl option

There's a relatively low limit of WebGL contexts available for a
Chrome-based browser tab (16). Each time a "TimeGraphContainer" is
created, one such context is consumed. We use these contexts for a
few things, not just time-line charts (where it makes most sense).

This commit takes advantage of the new option and declines that a
WebGL context be used for containers we create, except for proper
chart views. This means that we will now be able to create about
16 timeline-chart views per session, spread over however many
experiments.

Signed-off-by: Marc Dumais <marc.dumais@ericsson.com>

Author: marcdumais-work

packages/react-components/package.json

@@ -34,7 +34,7 @@
         "react-grid-layout": "1.2.0",
         "react-modal": "^3.8.1",
         "react-virtualized": "^9.21.0",
-        "timeline-chart": "^0.4.1",
+        "timeline-chart": "^0.4.2",
         "traceviewer-base": "0.8.0",
         "tsp-typescript-client": "^0.6.0"
     },

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

@@ -987,7 +987,8 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
                     width: this.getChartWidth(),
                     backgroundColor: this.props.style.chartBackgroundColor,
                     lineColor: this.props.style.lineColor,
-                    classNames: 'horizontal-canvas'
+                    classNames: 'horizontal-canvas',
+                    forceCanvasRenderer: false // default, but adds clarity
                 }}
                 addWidgetResizeHandler={this.props.addWidgetResizeHandler}
                 removeWidgetResizeHandler={this.props.removeWidgetResizeHandler}
@@ -1021,7 +1022,8 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
                     width: this.getChartWidth(),
                     backgroundColor: this.props.style.chartBackgroundColor,
                     lineColor: this.props.backgroundTheme === 'light' ? 0xdddddd : 0x34383c,
-                    classNames: 'horizontal-canvas'
+                    classNames: 'horizontal-canvas',
+                    forceCanvasRenderer: false // default, but adds clarity
                 }}
                 addWidgetResizeHandler={this.props.addWidgetResizeHandler}
                 removeWidgetResizeHandler={this.props.removeWidgetResizeHandler}
@@ -1055,7 +1057,8 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
                     id: 'vscroll',
                     width: 10,
                     height: parseInt(this.props.style.height.toString()),
-                    backgroundColor: this.props.style.naviBackgroundColor
+                    backgroundColor: this.props.style.naviBackgroundColor,
+                    forceCanvasRenderer: true
                 }}
                 addWidgetResizeHandler={this.props.addWidgetResizeHandler}
                 removeWidgetResizeHandler={this.props.removeWidgetResizeHandler}

packages/react-components/src/components/utils/time-axis-component.tsx

@@ -28,7 +28,8 @@ export class TimeAxisComponent extends React.Component<TimeAxisProps> {
                     height: 30,
                     backgroundColor: this.props.style.chartBackgroundColor,
                     lineColor: this.props.style.lineColor,
-                    classNames: 'horizontal-canvas'
+                    classNames: 'horizontal-canvas',
+                    forceCanvasRenderer: true
                 }}
                 addWidgetResizeHandler={this.props.addWidgetResizeHandler}
                 removeWidgetResizeHandler={this.props.removeWidgetResizeHandler}

packages/react-components/src/components/utils/time-navigator-component.tsx

@@ -26,7 +26,8 @@ export class TimeNavigatorComponent extends React.Component<TimeNavigatorProps>
                     width: this.props.style.width,
                     height: 10,
                     backgroundColor: this.props.style.naviBackgroundColor,
-                    classNames: 'horizontal-canvas'
+                    classNames: 'horizontal-canvas',
+                    forceCanvasRenderer: true
                 }}
                 addWidgetResizeHandler={this.props.addWidgetResizeHandler}
                 removeWidgetResizeHandler={this.props.removeWidgetResizeHandler}

yarn.lock

@@ -11533,9 +11533,9 @@ parse-path@^7.0.0:
     protocols "^2.0.0"
 
 parse-uri@^1.0.0:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/parse-uri/-/parse-uri-1.0.9.tgz#813c2a1107f9e833a12490cb1cb0408a67294b8f"
-  integrity sha512-YZfRHHkEZa6qTfPF/xgZ1ErQYCABfud/Vcqp1Q1GNa7RKwv6Oe0YaxXfQQMnQsGdNTo3fwaT0GbVEX7dMAr7tw==
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/parse-uri/-/parse-uri-1.0.11.tgz#3ce39a3102dfe548cc693a914a01a36135063490"
+  integrity sha512-nQQNb6GJinexGecJEbfKJdoQ9mbwAHDbYUIDTB0y+DTQaxdZwERtx7LJ631QEBFDXkcxD5+ixBYmt0n2LkWcwQ==
 
 parse-url@^8.1.0:
   version "8.1.0"
@@ -13763,10 +13763,10 @@ through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6, through@^2.3.8:
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
-timeline-chart@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/timeline-chart/-/timeline-chart-0.4.1.tgz#57cefac6cfa928cd84842cfb5031a157d8bb716e"
-  integrity sha512-f5lNTaY4438ml6x4bHdh29/FTXZgMOvunM5FDA1fWocxlq5PCBWvndwSh/HiqOHT0HLuom7jz9juxFtjyFCZmg==
+timeline-chart@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/timeline-chart/-/timeline-chart-0.4.2.tgz#7163a911b0d3a9aa398872952aa0c1f40b3abda9"
+  integrity sha512-jzI6aDORoA0dTB7SbAJpLFvDwuXD6sy+uVB3BLW4dOwyH2uehDOSJ+uxF1XjBAd7sn2Xxq9oA+aAjiWa2pEc2A==
   dependencies:
     "@types/lodash.throttle" "^4.1.4"
     glob "^7.1.6"