commit 1f658fe0d6514586621ba035b65fc671f4d0c970
author Deepanjan Roy <dproy@google.com> Tue Sep 11 08:38:17 2018 -0400
committer Deepanjan Roy <dproy@google.com> Tue Sep 11 08:38:17 2018 -0400
tree 23ff55052dc26961d240700a35d8ae7a3bdad2c3
parent 580b5f8618340820419a84b2c0f3ce1aec9843cf

Panels as mithril components + renderCanvas

- Removed top/scrolling_panel_container.
- Changed panel-container to ES6 component.

To be done in future CLs:
- Change other mithril components to ES6
- Handle change in doesScroll attribute in panel_container, and
maybe simplify its updateDimensions/repositioning code.


Change-Id: I675b0588c58e85a0e92ceab46b46c1d94d966279

ui/src/frontend/track_panel.ts

diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts
index 13f3327..d2e121d 100644
--- a/ui/src/frontend/track_panel.ts
+++ b/ui/src/frontend/track_panel.ts
@@ -19,7 +19,7 @@
 
 import {globals} from './globals';
 import {drawGridLines} from './gridline_helper';
-import {Panel} from './panel';
+import {Panel, PanelSize} from './panel';
 import {Track} from './track';
 import {trackRegistry} from './track_registry';
 
@@ -83,36 +83,42 @@
 },
                         {}>;
 
-export class TrackPanel extends Panel {
+interface TrackPanelAttrs {
+  id: string;
+}
+
+export class TrackPanel extends Panel<TrackPanelAttrs> {
   private track: Track;
-  constructor(public trackState: TrackState) {
-    // TODO: Since ES6 modules are asynchronous and it is conceivable that we
-    // want to load a track implementation on demand, we should not rely here on
-    // the fact that the track is already registered. We should show some
-    // default content until a track implementation is found.
+  private trackState: TrackState;
+  constructor(vnode: m.CVnode<TrackPanelAttrs>) {
     super();
+    this.trackState = globals.state.tracks[vnode.attrs.id];
     const trackCreator = trackRegistry.get(this.trackState.kind);
     this.track = trackCreator.create(this.trackState);
   }
 
-  getHeight(): number {
-    return this.track.getHeight();
+  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});
   }
 
-  updateDom(dom: HTMLElement): void {
-    // TODO: Let tracks render DOM in the content area.
-    m.render(
-        dom,
-        m(TrackComponent, {trackState: this.trackState, track: this.track}));
-  }
-
-  renderCanvas(ctx: CanvasRenderingContext2D) {
+  renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) {
     ctx.translate(TRACK_SHELL_WIDTH, 0);
     drawGridLines(
         ctx,
         globals.frontendLocalState.timeScale,
         globals.frontendLocalState.visibleWindowTime,
-        this.track.getHeight());
+        size.height);
 
     this.track.renderCanvas(ctx);
   }