1 files changed, 16 insertions, 84 deletions

diff --git a/ui/src/frontend/overview_timeline_panel.ts b/ui/src/frontend/overview_timeline_panel.ts
index d87072934..cfc6ee897 100644
--- a/ui/src/frontend/overview_timeline_panel.ts
+++ b/ui/src/frontend/overview_timeline_panel.ts
@@ -15,28 +15,21 @@
 import * as m from 'mithril';
 
 import {assertExists} from '../base/logging';
-import {hueForCpu} from '../common/colorizer';
 import {TimeSpan, timeToString} from '../common/time';
 
-import {SIDEBAR_WIDTH, TRACK_SHELL_WIDTH} from './css_constants';
-import {BorderDragStrategy} from './drag/border_drag_strategy';
-import {DragStrategy} from './drag/drag_strategy';
-import {InnerDragStrategy} from './drag/inner_drag_strategy';
-import {OuterDragStrategy} from './drag/outer_drag_strategy';
+import {hueForCpu} from './colorizer';
+import {TRACK_SHELL_WIDTH} from './css_constants';
 import {DragGestureHandler} from './drag_gesture_handler';
 import {globals} from './globals';
 import {Panel, PanelSize} from './panel';
 import {TimeScale} from './time_scale';
 
 export class OverviewTimelinePanel extends Panel {
-  private static HANDLE_SIZE_PX = 7;
-
   private width = 0;
+  private dragStartPx = 0;
   private gesture?: DragGestureHandler;
   private timeScale?: TimeScale;
   private totTime = new TimeSpan(0, 0);
-  private dragStrategy?: DragStrategy;
-  private readonly boundOnMouseMove = this.onMouseMove.bind(this);
 
   // Must explicitly type now; arguments types are no longer auto-inferred.
   // https://github.com/Microsoft/TypeScript/issues/1373
@@ -58,13 +51,6 @@ export class OverviewTimelinePanel extends Panel {
 
   oncreate(vnode: m.CVnodeDOM) {
     this.onupdate(vnode);
-    (vnode.dom as HTMLElement)
-        .addEventListener('mousemove', this.boundOnMouseMove);
-  }
-
-  onremove({dom}: m.CVnodeDOM) {
-    (dom as HTMLElement)
-        .removeEventListener('mousemove', this.boundOnMouseMove);
   }
 
   view() {
@@ -118,8 +104,9 @@ export class OverviewTimelinePanel extends Panel {
     ctx.fillRect(0, size.height - 1, this.width, 1);
 
     // Draw semi-opaque rects that occlude the non-visible time range.
-    const [vizStartPx, vizEndPx] =
-        OverviewTimelinePanel.extractBounds(this.timeScale);
+    const vizTime = globals.frontendLocalState.visibleWindowTime;
+    const vizStartPx = Math.floor(this.timeScale.timeToPx(vizTime.start));
+    const vizEndPx = Math.ceil(this.timeScale.timeToPx(vizTime.end));
 
     ctx.fillStyle = 'rgba(200, 200, 200, 0.8)';
     ctx.fillRect(
@@ -133,79 +120,24 @@ export class OverviewTimelinePanel extends Panel {
     ctx.fillStyle = '#999';
     ctx.fillRect(vizStartPx - 1, headerHeight, 1, tracksHeight);
     ctx.fillRect(vizEndPx, headerHeight, 1, tracksHeight);
-
-    const hbarWidth = OverviewTimelinePanel.HANDLE_SIZE_PX;
-    const hbarDivisionFactor = 3.5;
-    // Draw handlebar
-    ctx.fillRect(
-        vizStartPx - Math.floor(hbarWidth / 2) - 1,
-        headerHeight,
-        hbarWidth,
-        tracksHeight / hbarDivisionFactor);
-    ctx.fillRect(
-        vizEndPx - Math.floor(hbarWidth / 2),
-        headerHeight,
-        hbarWidth,
-        tracksHeight / hbarDivisionFactor);
-  }
-
-  private onMouseMove(e: MouseEvent) {
-    if (this.gesture === undefined || this.gesture.isDragging) {
-      return;
-    }
-    (e.target as HTMLElement).style.cursor = this.chooseCursor(e.x);
-  }
-
-  private chooseCursor(x: number) {
-    if (this.timeScale === undefined) return 'default';
-    const [vizStartPx, vizEndPx] =
-        OverviewTimelinePanel.extractBounds(this.timeScale);
-    const startBound = vizStartPx - 1 + SIDEBAR_WIDTH;
-    const endBound = vizEndPx + SIDEBAR_WIDTH;
-    if (OverviewTimelinePanel.inBorderRange(x, startBound) ||
-        OverviewTimelinePanel.inBorderRange(x, endBound)) {
-      return 'ew-resize';
-    } else if (x < SIDEBAR_WIDTH + TRACK_SHELL_WIDTH) {
-      return 'default';
-    } else if (x < startBound || endBound < x) {
-      return 'crosshair';
-    } else {
-      return 'all-scroll';
-    }
   }
 
   onDrag(x: number) {
-    if (this.dragStrategy === undefined) return;
-    this.dragStrategy.onDrag(x);
+    // Set visible time limits from selection.
+    if (this.timeScale === undefined) return;
+    let tStart = this.timeScale.pxToTime(this.dragStartPx);
+    let tEnd = this.timeScale.pxToTime(x);
+    if (tStart > tEnd) [tStart, tEnd] = [tEnd, tStart];
+    const vizTime = new TimeSpan(tStart, tEnd);
+    globals.frontendLocalState.updateVisibleTime(vizTime);
+    globals.rafScheduler.scheduleRedraw();
   }
 
   onDragStart(x: number) {
-    if (this.timeScale === undefined) return;
-    const pixelBounds = OverviewTimelinePanel.extractBounds(this.timeScale);
-    if (OverviewTimelinePanel.inBorderRange(x, pixelBounds[0]) ||
-        OverviewTimelinePanel.inBorderRange(x, pixelBounds[1])) {
-      this.dragStrategy = new BorderDragStrategy(this.timeScale, pixelBounds);
-    } else if (x < pixelBounds[0] || pixelBounds[1] < x) {
-      this.dragStrategy = new OuterDragStrategy(this.timeScale);
-    } else {
-      this.dragStrategy = new InnerDragStrategy(this.timeScale, pixelBounds);
-    }
-    this.dragStrategy.onDragStart(x);
+    this.dragStartPx = x;
   }
 
   onDragEnd() {
-    this.dragStrategy = undefined;
-  }
-
-  private static extractBounds(timeScale: TimeScale): [number, number] {
-    const vizTime = globals.frontendLocalState.getVisibleStateBounds();
-    return [
-      Math.floor(timeScale.timeToPx(vizTime[0])),
-      Math.ceil(timeScale.timeToPx(vizTime[1]))
-    ];
-  }
-
-  private static inBorderRange(a: number, b: number): boolean {
-    return Math.abs(a - b) < this.HANDLE_SIZE_PX / 2;
+    this.dragStartPx = 0;
   }
 }