Improve minimap UX

Change-Id: I2b8db9ddb3509487339434f19df35f29eba4774c

Author: stevegolton

ui/src/assets/timeline_page.scss

@@ -44,6 +44,60 @@
     .pf-overview-timeline {
       height: 70px;
       border-bottom: solid 1px var(--pf-color-border);
+      position: relative;
+      overflow: hidden;
+
+      .pf-minimap__drag-handle {
+        opacity: 0.2;
+        background: var(--pf-color-accent);
+      }
+
+      .pf-minimap__brush {
+        background: var(--pf-color-background);
+        border: solid 1px var(--pf-color-accent);
+        width: 12px;
+        height: 16px;
+        cursor: col-resize;
+        transform: translateX(-50%);
+        border-radius: 3px;
+        z-index: 1;
+
+        &::after {
+          content: "";
+          background: var(--pf-color-background);
+          border: solid 1px var(--pf-color-accent);
+          border-width: 0 0 1px 1px;
+          transform: rotate(-45deg);
+          position: absolute;
+          top: 8px;
+          width: 9px;
+          height: 9px;
+          border-radius: 3px;
+          clip-path: polygon(0 0, 0 100%, 100% 100%);
+        }
+
+        &::before {
+          content: "";
+          z-index: 2;
+          border: solid 1px var(--pf-color-accent);
+          border-width: 0 1px 0 1px;
+          position: absolute;
+          width: 3px;
+          height: 10px;
+          top: 2px;
+          left: 2.5px;
+        }
+      }
+
+      .pf-minimap__brush-line {
+        position: absolute;
+        top: 20px; // HEADER_HEIGHT_PX
+        left: 4px; // Center of the brush
+        width: 1px;
+        height: 50px; // Heatmap height (70px - 20px header)
+        background: var(--pf-color-accent);
+        pointer-events: none;
+      }
     }
   }
 

ui/src/core/timeline.ts

@@ -304,20 +304,18 @@ export class TimelineImpl implements Timeline {
     }
   }
 
-  moveStart(delta: number) {
-    this._visibleWindow = new HighPrecisionTimeSpan(
-      this._visibleWindow.start.addNumber(delta),
-      this._visibleWindow.duration - delta,
-    );
+  moveStart(start: HighPrecisionTime) {
+    const endTime = this._visibleWindow.end;
+    const newDur = endTime.sub(start).toNumber();
+    this._visibleWindow = new HighPrecisionTimeSpan(start, newDur);
 
     raf.scheduleCanvasRedraw();
   }
 
-  moveEnd(delta: number) {
-    this._visibleWindow = new HighPrecisionTimeSpan(
-      this._visibleWindow.start,
-      this._visibleWindow.duration + delta,
-    );
+  moveEnd(end: HighPrecisionTime) {
+    const startTime = this._visibleWindow.start;
+    const newDuration = end.sub(startTime).toNumber();
+    this._visibleWindow = new HighPrecisionTimeSpan(startTime, newDuration);
 
     raf.scheduleCanvasRedraw();
   }