commit bb1cc59a2f67c2d617dda04dc492ad02f3724980
author Isabelle Taylor <taylori@google.com> Thu Jul 25 15:15:27 2019 +0100
committer Isabelle Taylor <taylori@google.com> Mon Jul 29 08:44:02 2019 +0000
tree b7ecce793cbb1d1736d77b575cbf2d0d182ee2d0
parent ae9673f68e841dba8f7c2a027264dbfc68ed3454

perfetto-ui: Track data request changes

How it now works:
- The visible time in global state is updated every 50ms
- The track controller will check and request more data for that
visible time if necessary. (Only if a pending request is not already
in progress and that track is actually visible)

Visible tracks are kept up to date in the frontendLocalState when
the canvas is rendered for a track. If the visible tracks have changed
since the last canvas redraw then the global state is updated with
the new visible tracks.

This fixes the issue that was causing a patch to be sent to the
global state and the DOM to be redrawn every time a dataReq was sent.
Now the horizontally scrolling is very fast + smooth.

Bug:136162323
Change-Id: I6d96b21dce2b798970de295cb2919841fbbf7e88

ui/src/frontend/track_panel.ts

diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts
index 06fc589..30177ad 100644
--- a/ui/src/frontend/track_panel.ts
+++ b/ui/src/frontend/track_panel.ts
@@ -159,10 +159,17 @@
 }
 class TrackComponent implements m.ClassComponent<TrackComponentAttrs> {
   view({attrs}: m.CVnode<TrackComponentAttrs>) {
-    return m('.track', [
-      m(TrackShell, {trackState: attrs.trackState}),
-      m(TrackContent, {track: attrs.track})
-    ]);
+    return m(
+        '.track',
+        {
+          style: {
+            height: `${attrs.track.getHeight()}px`,
+          }
+        },
+        [
+          m(TrackShell, {trackState: attrs.trackState}),
+          m(TrackContent, {track: attrs.track})
+        ]);
   }
 }
 
@@ -196,17 +203,6 @@
   }
 
   view() {
-    return m(
-        '.track',
-        {
-          style: {
-            height: `${this.track.getHeight()}px`,
-          }
-        },
-        [
-          m(TrackShell, {trackState: this.trackState}),
-          m(TrackContent, {track: this.track})
-        ]);
     return m(TrackComponent, {trackState: this.trackState, track: this.track});
   }
 
@@ -221,7 +217,7 @@
 
     ctx.translate(TRACK_SHELL_WIDTH, 0);
 
-    this.track.renderCanvas(ctx);
+    this.track.render(ctx);
 
     ctx.restore();