1 files changed, 26 insertions, 19 deletions

diff --git a/ui/src/frontend/flow_events_renderer.ts b/ui/src/frontend/flow_events_renderer.ts
index 33b7dab57..1d2a71925 100644
--- a/ui/src/frontend/flow_events_renderer.ts
+++ b/ui/src/frontend/flow_events_renderer.ts
@@ -16,7 +16,6 @@ import {TRACK_SHELL_WIDTH} from './css_constants';
 import {ALL_CATEGORIES, getFlowCategories} from './flow_events_panel';
 import {Flow, FlowPoint, globals} from './globals';
 import {PanelVNode} from './panel';
-import {findUiTrackId} from './scroll_helper';
 import {SliceRect} from './track';
 import {TrackGroupPanel} from './track_group_panel';
 import {TrackPanel} from './track_panel';
@@ -98,7 +97,7 @@ export class FlowEventsRendererArgs {
 
 export class FlowEventsRenderer {
   private getTrackGroupIdByTrackId(trackId: number): string|undefined {
-    const uiTrackId = findUiTrackId(trackId);
+    const uiTrackId = globals.state.uiTrackIdByTraceTrackId[trackId];
     return uiTrackId ? globals.state.tracks[uiTrackId].trackGroup : undefined;
   }
 
@@ -212,11 +211,10 @@ export class FlowEventsRenderer {
       y: endYConnection.y,
       dir: endDir
     };
-    const highlighted =
-        flow.end.sliceId === globals.frontendLocalState.highlightedSliceId ||
-        flow.begin.sliceId === globals.frontendLocalState.highlightedSliceId;
-    const focused = flow.id === globals.frontendLocalState.focusedFlowIdLeft ||
-        flow.id === globals.frontendLocalState.focusedFlowIdRight;
+    const highlighted = flow.end.sliceId === globals.state.highlightedSliceId ||
+        flow.begin.sliceId === globals.state.highlightedSliceId;
+    const focused = flow.id === globals.state.focusedFlowIdLeft ||
+        flow.id === globals.state.focusedFlowIdRight;
 
     let intensity = DEFAULT_FLOW_INTENSITY;
     let width = DEFAULT_FLOW_WIDTH;
@@ -265,8 +263,11 @@ export class FlowEventsRenderer {
       begin: {x: number, y: number, dir: LineDirection},
       end: {x: number, y: number, dir: LineDirection}, hue: number,
       intensity: number, width: number) {
+    const hasArrowHead = Math.abs(begin.x - end.x) > 3 * TRIANGLE_SIZE;
     const END_OFFSET =
-        (end.dir === 'RIGHT' || end.dir === 'LEFT' ? TRIANGLE_SIZE : 0);
+        (((end.dir === 'RIGHT' || end.dir === 'LEFT') && hasArrowHead) ?
+             TRIANGLE_SIZE :
+             0);
     const color = `hsl(${hue}, 50%, ${intensity}%)`;
     // draw curved line from begin to end (bezier curve)
     ctx.strokeStyle = color;
@@ -302,17 +303,23 @@ export class FlowEventsRenderer {
       ctx.arc(end.x, end.y, CIRCLE_RADIUS, 0, 2 * Math.PI);
       ctx.closePath();
       ctx.fill();
-    } else {
-      const dx = this.getDeltaX(end.dir, TRIANGLE_SIZE);
-      const dy = this.getDeltaY(end.dir, TRIANGLE_SIZE);
-      // draw small triangle
-      ctx.fillStyle = color;
-      ctx.beginPath();
-      ctx.moveTo(end.x, end.y);
-      ctx.lineTo(end.x - dx - dy, end.y + dx - dy);
-      ctx.lineTo(end.x - dx + dy, end.y - dx - dy);
-      ctx.closePath();
-      ctx.fill();
+    } else if (hasArrowHead) {
+      this.drawArrowHead(end, ctx, color);
     }
   }
+
+  private drawArrowHead(
+      end: {x: number; y: number; dir: LineDirection},
+      ctx: CanvasRenderingContext2D, color: string) {
+    const dx = this.getDeltaX(end.dir, TRIANGLE_SIZE);
+    const dy = this.getDeltaY(end.dir, TRIANGLE_SIZE);
+    // draw small triangle
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(end.x, end.y);
+    ctx.lineTo(end.x - dx - dy, end.y + dx - dy);
+    ctx.lineTo(end.x - dx + dy, end.y - dx - dy);
+    ctx.closePath();
+    ctx.fill();
+  }
 }