1 files changed, 27 insertions, 23 deletions

diff --git a/ui/src/frontend/overview_timeline_panel.ts b/ui/src/frontend/overview_timeline_panel.ts
index 76b451582..54f932e54 100644
--- a/ui/src/frontend/overview_timeline_panel.ts
+++ b/ui/src/frontend/overview_timeline_panel.ts
@@ -14,9 +14,12 @@
 
 import m from 'mithril';
 
-import {assertExists} from '../base/logging';
 import {hueForCpu} from '../common/colorizer';
-import {TimeSpan} from '../common/time';
+import {
+  Span,
+  TPTime,
+  tpTimeToSeconds,
+} from '../common/time';
 
 import {
   OVERVIEW_TIMELINE_NON_VISIBLE_COLOR,
@@ -29,9 +32,9 @@ import {InnerDragStrategy} from './drag/inner_drag_strategy';
 import {OuterDragStrategy} from './drag/outer_drag_strategy';
 import {DragGestureHandler} from './drag_gesture_handler';
 import {globals} from './globals';
-import {TickGenerator, TickType} from './gridline_helper';
+import {getMaxMajorTicks, TickGenerator, TickType} from './gridline_helper';
 import {Panel, PanelSize} from './panel';
-import {TimeScale} from './time_scale';
+import {PxSpan, TimeScale} from './time_scale';
 
 export class OverviewTimelinePanel extends Panel {
   private static HANDLE_SIZE_PX = 5;
@@ -39,7 +42,7 @@ export class OverviewTimelinePanel extends Panel {
   private width = 0;
   private gesture?: DragGestureHandler;
   private timeScale?: TimeScale;
-  private totTime = new TimeSpan(0, 0);
+  private traceTime?: Span<TPTime>;
   private dragStrategy?: DragStrategy;
   private readonly boundOnMouseMove = this.onMouseMove.bind(this);
 
@@ -47,11 +50,11 @@ export class OverviewTimelinePanel extends Panel {
   // https://github.com/Microsoft/TypeScript/issues/1373
   onupdate({dom}: m.CVnodeDOM) {
     this.width = dom.getBoundingClientRect().width;
-    this.totTime = new TimeSpan(
-        globals.state.traceTime.startSec, globals.state.traceTime.endSec);
-    this.timeScale = new TimeScale(
-        this.totTime, [TRACK_SHELL_WIDTH, assertExists(this.width)]);
-
+    this.traceTime = globals.stateTraceTimeTP();
+    const traceTime = globals.stateTraceTime();
+    const pxSpan = new PxSpan(TRACK_SHELL_WIDTH, this.width);
+    this.timeScale =
+        new TimeScale(traceTime.start, traceTime.duration.nanos, pxSpan);
     if (this.gesture === undefined) {
       this.gesture = new DragGestureHandler(
           dom as HTMLElement,
@@ -78,26 +81,27 @@ export class OverviewTimelinePanel extends Panel {
 
   renderCanvas(ctx: CanvasRenderingContext2D, size: PanelSize) {
     if (this.width === undefined) return;
+    if (this.traceTime === undefined) return;
     if (this.timeScale === undefined) return;
     const headerHeight = 20;
     const tracksHeight = size.height - headerHeight;
-    const timeSpan = new TimeSpan(0, this.totTime.duration);
-
-    const timeScale = new TimeScale(timeSpan, [TRACK_SHELL_WIDTH, this.width]);
 
-    if (timeScale.timeSpan.duration > 0 && timeScale.widthPx > 0) {
-      const tickGen = new TickGenerator(timeScale);
+    if (size.width > TRACK_SHELL_WIDTH && this.traceTime.duration > 0n) {
+      const maxMajorTicks = getMaxMajorTicks(this.width - TRACK_SHELL_WIDTH);
+      const tickGen = new TickGenerator(
+          this.traceTime, maxMajorTicks, globals.state.traceTime.start);
 
       // Draw time labels on the top header.
       ctx.font = '10px Roboto Condensed';
       ctx.fillStyle = '#999';
-      for (const {type, time, position} of tickGen) {
-        const xPos = Math.round(position);
+      for (const {type, time} of tickGen) {
+        const xPos = Math.floor(this.timeScale.tpTimeToPx(time));
         if (xPos <= 0) continue;
         if (xPos > this.width) break;
         if (type === TickType.MAJOR) {
           ctx.fillRect(xPos - 1, 0, 1, headerHeight - 5);
-          ctx.fillText(time.toFixed(tickGen.digits) + ' s', xPos + 5, 18);
+          const sec = tpTimeToSeconds(time - globals.state.traceTime.start);
+          ctx.fillText(sec.toFixed(tickGen.digits) + ' s', xPos + 5, 18);
         } else if (type == TickType.MEDIUM) {
           ctx.fillRect(xPos - 1, 0, 1, 8);
         } else if (type == TickType.MINOR) {
@@ -114,8 +118,8 @@ export class OverviewTimelinePanel extends Panel {
       for (const key of globals.overviewStore.keys()) {
         const loads = globals.overviewStore.get(key)!;
         for (let i = 0; i < loads.length; i++) {
-          const xStart = Math.floor(this.timeScale.timeToPx(loads[i].startSec));
-          const xEnd = Math.ceil(this.timeScale.timeToPx(loads[i].endSec));
+          const xStart = Math.floor(this.timeScale.tpTimeToPx(loads[i].start));
+          const xEnd = Math.ceil(this.timeScale.tpTimeToPx(loads[i].end));
           const yOff = Math.floor(headerHeight + y * trackHeight);
           const lightness = Math.ceil((1 - loads[i].load * 0.7) * 100);
           ctx.fillStyle = `hsl(${hueForCpu(y)}, 50%, ${lightness}%)`;
@@ -210,10 +214,10 @@ export class OverviewTimelinePanel extends Panel {
   }
 
   private static extractBounds(timeScale: TimeScale): [number, number] {
-    const vizTime = globals.frontendLocalState.getVisibleStateBounds();
+    const vizTime = globals.frontendLocalState.visibleWindowTime;
     return [
-      Math.floor(timeScale.timeToPx(vizTime[0])),
-      Math.ceil(timeScale.timeToPx(vizTime[1])),
+      Math.floor(timeScale.hpTimeToPx(vizTime.start)),
+      Math.ceil(timeScale.hpTimeToPx(vizTime.end)),
     ];
   }