Debug Event Visualization

[nspruit]

This PR adds a Gantt chart to the WDView in both Eclipse and IntelliJ showing a timeline of events that occurred during a selected debug interval. This debug interval can be selected from a drop-down list containing the latest 10 debug intervals. Selecting a new debug interval will update the view accordingly.

What the views look like in Eclipse and IntelliJ can be seen below. The new chart looks a bit different in different IDEs because of the sizes that are determined automatically by SWT/Swing.

Eclipse:

IntelliJ:

[Inventitech]

Cool! Might it make sense to give the chart a bit more room by extending it to fill horizontally?

[nspruit]

That might definitely make sense. I also tried to do that, but currently all charts are inside a single grid layout, which means that you can't make a single chart fill horizontally AFAIK. I'll try once again if I can accomplish this in another way

[Inventitech]

Three more comments I just thought of:

1. The Eclipse view does not offer vertical scrolling, but I think we really need that (looks very distorted otherwise).
2. It is now not really clear that the text refers to the chart. There is no real separation between the "globally" active controls for all charts and the one which just works on the Gantt chart. So it might make sense to remove that from the common grid. (Less priority)
3. It's a bit difficult to get a sense of "what is going on", as the single points are not connected. So it is visually difficult to reconstruct the timeline of a debugging session. Thinking about this more, does a Gantt chart really make sense when all data is essentially points (and not durations)? My original idea of showing "debugging sessions" (one debugger run) as Gantt charts stemmed from the idea to visualize different sessions at once; but that's what the drop down list does now.

[nspruit]

This is what I could get by making the chart fill horizontally:

Eclipse

IntelliJ

[nspruit]

1. The Eclipse view does not offer vertical scrolling, but I think we really need that (looks very distorted otherwise).

Agreed, the charts are now really stretched out, which especially makes the debug chart quite ugly, as it is filled out horizontally. I'll see if I can easily add this functionality now.

2.It is now not really clear that the text refers to the chart. There is no real separation between the "globally" active controls for all charts and the one which just works on the Gantt chart. So it might make sense to remove that from the common grid. (Less priority)

Agreed, might it make more sense to try to put the Gantt chart control directly above the chart instead of directly below it?

3.It's a bit difficult to get a sense of "what is going on", as the single points are not connected. So it is visually difficult to reconstruct the timeline of a debugging session. Thinking about this more, does a Gantt chart really make sense when all data is essentially points (and not durations)? My original idea of showing "debugging sessions" (one debugger run) as Gantt charts stemmed from the idea to visualize different sessions at once; but that's what the drop down list does now.

Agreed. It would definitely be clearer if we could connect the individual events so you can just follow the connection to see what happened. Unfortunately, this does not seem to be possible with JFreeChart. So, might it make sense to switch to another, more modern UI library/framework? However, I don't think we should do this in WD 2.0 because that would definitely postpone the release quite a bit. Regarding the choice for a Gantt chart, it is indeed not 100% appropriate for showing events as they don't have a duration. Currently, they have an artificial duration of 500ms to be able to actually show them in the chart, which I think works for now. What came to my mind when thinking of another chart type was a chart similar to a git flow diagram. An example of a (JS) library for such diagrams can be found here: http://gitgraphjs.com/. However, I don't think these diagrams actually contain a notion of time, but are only concerned with the order of events.

[nspruit]

The WDView in Eclipse is now also scrollable, see 1f89796. This reduces the stretching, but the amount of stretching still depends on the size of the view (and therefore the size of your screen). So, if you have a wide screen and you maximize the WDView, then everything fits on the screen and there is no scrolling required. In this case, the charts still get stretched out as they need to fill an entire column in a GridLayout.

[Inventitech]

2.It is now not really clear that the text refers to the chart. There is no real separation between the "globally" active controls for all charts and the one which just works on the Gantt chart. So it might make sense to remove that from the common grid. (Less priority) Agreed, might it make more sense to try to put the Gantt chart control directly above the chart instead of directly below it?

Yeah, and introduce additional vertical spacing.

Agreed. It would definitely be clearer if we could connect the individual events so you can just follow the connection to see what happened. Unfortunately, this does not seem to be possible with JFreeChart. So, might it make sense to switch to another, more modern UI library/framework? However, I don't think we should do this in WD 2.0 because that would definitely postpone the release quite a bit. Regarding the choice for a Gantt chart, it is indeed not 100% appropriate for showing events as they don't have a duration. Currently, they have an artificial duration of 500ms to be able to actually show them in the chart, which I think works for now. What came to my mind when thinking of another chart type was a chart similar to a git flow diagram. An example of a (JS) library for such diagrams can be found here: http://gitgraphjs.com/. However, I don't think these diagrams actually contain a notion of time, but are only concerned with the order of events.

What about a simple XY plot which uses categorical data on the Y axis and time on the X axis (might have to flip axes to allow that)? I think it would also be helpful to give each "y-axis" category a different color. Too bad JFreeChart's Gantt charts are so limited.

Another option might be to replace the current statistics view altogether, and display an HTML page with nice reactive JS-charts in the IDE's embedded browser. Gitgraphjs looks nice. Another solution is to try and get the JavaFX charts from https://github.com/TestRoots/watchdog/tree/javafx to work universally. After more than two years, I guess we can assume Java7 >.29 (?) everywhere now, when they introduced JavaFX? Yet another option might be to leave the current statistics as-are, and use a hopefully more powerful library just for the Gantt chart like http://swiftgantt.sourceforge.net/, https://github.com/dhadka/DGantt, http://www.jidesoft.com/products/gantt.htm, ...

[Inventitech]

The WDView in Eclipse is now also scrollable, see 1f89796. This reduces the stretching, but the amount of stretching still depends on the size of the view (and therefore the size of your screen). So, if you have a wide screen and you maximize the WDView, then everything fits on the screen and there is no scrolling required. In this case, the charts still get stretched out as they need to fill an entire column in a GridLayout.

That seems good enough to me at this point.

[nspruit]

Yeah, and introduce additional vertical spacing.

Sure, I'll try to change that right now.

What about a simple XY plot which uses categorical data on the Y axis and time on the X axis (might have to flip axes to allow that)? I think it would also be helpful to give each "y-axis" category a different color. Too bad JFreeChart's Gantt charts are so limited.

Another option might be to replace the current statistics view altogether, and display an HTML page with nice reactive JS-charts in the IDE's embedded browser. Gitgraphjs looks nice. Another solution is to try and get the JavaFX charts from https://github.com/TestRoots/watchdog/tree/javafx to work universally. After more than two years, I guess we can assume Java7 >.29 (?) everywhere now, when they introduced JavaFX? Yet another option might be to leave the current statistics as-are, and use a hopefully more powerful library just for the Gantt chart like http://swiftgantt.sourceforge.net/, https://github.com/dhadka/DGantt, ...

A simple XY plot like you described might be a relatively easy alternative to Gantt charts indeed, although I don't think it is really useful to change this right now if we decide to change the statistics view altogether.

Regarding the entire statistics view, I believe an updated UI would definitively improve WD's UX. Furthermore, changing the entire view opens up the possibility to remove a lot of duplicate code when both IDEs support the new UI framework. As JavaFx and HTML pages are both supported by Eclipse and IntelliJ, they are both good options. The advantage that a HTML view has over JavaFx is that it can also be used in non-Java IDEs as well as online pages.

That seems good enough to me at this point.

Cool! So, should we just leave the WDView like it is now (after moving the interval selection control) for WD 2.0?

[nspruit]

0e1f7be moves the interval selection control above the Gantt chart and adds some vertical spacing in IntelliJ.

[Inventitech]

OK, let's leave it as-is for now. Maybe you could introduce different colors for the different WD event categories, that should be a relatively easy change and make it easier to differentiate between events/see which event are the same?

[nspruit]

Good suggestion! Sounds relatively easy indeed, so I hope to finish it soon.

[nspruit]

It took a bit longer than I expected, but now each event type gets its own color. Is this clear enough or do we want the labels to have the same colors as the events?

An example of the chart in IntelliJ containing quite some debug events:

[Inventitech]

Would be cool if the labels had the same colors, too. Maybe some colors are not so easy to read (white)?

[nspruit]

Sure, I'll check whether that's possible. Agreed, I'll just pick another arbitrary RGB value for those colors then (as we ran out of default colors already)

[nspruit]

After digging through JFreeChart's API for quite a while, I found out that you can only set the color of all labels, not one color per label.

[nspruit]

Unnecessary 'final' keywords have now been removed