Flow events displayed incorrectly with large number of flow events.

[robertnishihara]

Hi! Thanks a lot for making chrome://tracing, it's amazing. Any help here would be appreciated.

Related Issues

Possibly related to #2204 and #3528, but I think this issue is different.

I also tried using the "flow_in"/"flow_out" approach described in #2394, but that had a similar issue.

Version Info

I'm using chrome://tracing. Info from chrome://version.

Google Chrome | 68.0.3440.84 (Official Build) (64-bit)
Revision | 520a5c14b858e4b1441dd2d3bab9bc745911a23b-refs/branch-heads/3440@{#774}
OS | Mac OS X
JavaScript | V8 6.8.275.24
Flash | 30.0.0.154 /Users/rkn/Library/Application Support/Google/Chrome/PepperFlash/30.0.0.154/PepperFlashPlayer.plugin
User Agent | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.84 Safari/537.36

Issue

When I display a small number of flow events, they display correctly.

However, with large numbers of flow events, the arrows start to appear in the wrong locations (notice that the arrows appear staggered and at some point disappear altogether (this isn't the case at the very top of the timeline but it consistently appears like this when I scroll down)).

Reproducing the issue

I attached the two JSON files, and also here is the Python script I used to generate the JSON files.

import json

def make_event(tid):
    # Initial duration event.
    all_events.append({
        "pid": "0",
        "tid": tid,
        "ts": 0,
        "dur": 100,
        "ph": "X",
        "name": "event",
    })

    # Final duration event.
    all_events.append({
        "pid": "0",
        "tid": tid + 1,
        "ts": 1000,
        "dur": 100,
        "ph": "X",
        "name": "event",
    })

    # Flow event begin.
    all_events.append({
        "pid": "0",
        "tid": tid,
        "ts": 100,
        "ph": "s",
        "name": "name" + str(tid),
        "id": "id" + str(tid)
    })

    # Flow event end.
    all_events.append({
        "pid": "0",
        "tid": tid + 1,
        "ts": 1000,
        "ph": "f",
        "bp": "e",  # Omitting this causes the chrome://tracing to fail to load the JSON file.
        "name": "name" + str(tid),
        "id": "id" + str(tid)
    })

all_events = []
for i in range(2):
    make_event(2 * i)
json.dump(all_events, open('example_timeline_correct.json', 'w'))

all_events = []
for i in range(100):
    make_event(2 * i)
json.dump(all_events, open('example_timeline_incorrect.json', 'w'))

example_timeline_correct.json.gz example_timeline_incorrect.json.gz

cc @alanamarzoev

[robertnishihara]

Any help on this would be appreciated :)

[toddlipcon]

Seeing a similar (same?) issue in traces with large number of flows as well.

[toddlipcon]

I dug into this a little bit and found that the issue is not a large number of flows, but rather just very high traces. When you scroll down, at some point the canvas is repositioned, and the drawing of flow arrows calculates things incorrectly.

I found that by commenting out the 'ctx.translate(...)' line in drawTrack(type) in tracing/tracing/ui/tracks/model_track.html the problem is resolved. I don't quite understand all this code but it seems like the translation is being applied twice -- once there and once by some code in calculateTrackY.

[NathanZabriskie]

I think this commit should fix the problem. Thanks @toddlipcon for tracking down the problem!