JS API to show specific points of execution on the timeline.

[Fishrock123]

I've been thinking about this, and I think it could be useful if we had a JS API such so that one could mark when specific execution points happen (like console.log) but have it show up on the timeline.

It could be something like:

dprof.createMarker('info string', 'optional hex color')

[AndreasMadsen]

I have been thinking the same, but I'm not sure what would be a nice way of doing it. Mostly visualization wise but also json format.

[Fishrock123]

@AndreasMadsen I think the JSON format would be almost like before or after:

markers: [[Number, text, color]] // or maybe a list of objects

I'm not 100% sure how to with d3, but I think they would just show up on the graph as fixed-size for the amount of zoom with the appropriate color. Mousing over could then give the relevant text info.

If more than one is too close, it could be theoretically possible to mix them into one, with mouse over showing all the texts. Perhaps we should not worry about that for an initial implementation.

[AndreasMadsen]

Sounds good. I would definitely prefer a list of objects, it is gzip compressed anyway. The d3/svg part can be implemented using <g> containing <path> lines. I think this can be implemented using a second data and enter, see the matrix example in https://github.com/d3/d3-3.x-api-reference/blob/master/Selections.md#data.

I think it would look like this, but don't hang me up on it, I'm also not good at d3 :)

barEnter.append('g')
  .attr('class', 'markers');

// bind data
const markers = bar.select('.markers')
  .selectAll('.marker')
  .data((node) => node.markers);
// exit
markers.exit().remove();
// enter
markers.enter()
  .append('path')
    .attr('class', 'marker');
    .on('mouseenter', (marker) => showMarker(marker))
    .on('mouseleave', (marker) => hideMarker(marker))
// modify
markers
  .attr('d', (marker) => makeMarker(makeLine))