This document outlines the changes to the JFR Threads Page as proposed in the RFR for JMC-6364. This is a follow-up to an RFC that had discussion on the jmc-dev maillist in October [0] and November [1] of 2019.
[0] http://mail.openjdk.java.net/pipermail/jmc-dev/2019-October/001454.html
[1] http://mail.openjdk.java.net/pipermail/jmc-dev/2019-November/001516.html
As outlined in JMC-6364 (Epic), there are a number of usability issues associated with the JFR Threads Page. The epic has since been pruned, but some of the issues that were present at the time of the RFC include:
JMC-4475: Zoom out to full range in chart is not obvious
JMC-5001: Difficult to unselect in graph
JMC-5301: Shorter events hidden if drawn in same pixels as long one
JMC-6165: Missing thread names in graph view (Thread view)
JMC-6366: Event graph, make label area resizable
JMC-6368: Foldable threads table in the Threads Page
This RFC offers solutions to alleviate these issues and introduce a new level of interaction to the existing chart. The proposed patch leverages the existing chart classes and introduces new components to be used by the Threads Page. At a high-level, these changes can be summarized as:
- spliting the original chart canvas into two canvases for the thread names and lanes - both placed in scrolled composites
- the addition of a toolbar for filtering events from the chart
- the addition of a toolbar for altering the view of the chart
Just for the sake of comparison, here's a screenshot of what the JFR Threads Page currently looks like when viewing plain_recording.jfr (used for uitests).
- the main container for holding the contents of the page has been updated to use a scrolled composite
- previously, the thread names were rendered onto the same canvas that displayed the chart (ChartCanvas)
- this has been updated to allow the thread names to be displayed in its own canvas (TextCanvas), which allows for both canvases to be placed in their own respective scrollable composites
- previously, the height of each thread lane was dependant on how many threads were being shown (as seen plain_recording.jfr)
- the lanes have been updated to have a more consistent height, and a minimum allowable height
- there is a widget in the bottom-left of the threads page that allows the user to increase or decrease the height of the thread lanes to their liking
- with the migration of the thread names to their own canvas, the existing threads table has been relocated
- there's a button on the top-right of the page that opens a popup table, containing the same contents as the previous threads table
- previously, mouse selection on the chart didn't have any functionality, and selection of table elements would change the view of the chart
- additionally, there wasn't always an easy way to reset the chart to its default state when a table item was selected
- the lanes on the chart are now selectable via
ctrl+clickorshift+click, and this causes the thread lane to appear "highlighted" on the chart, and will update the stack trace view - these selections can be reversed by using the
ESCkey - the filter bar also has a button that allows the chart to be reset to its original state
- previously, zooming was performed using either the mouse wheel or the arrow keys
- it was difficult to navigate the chart accurately, and the zoom power was not consistent (e.g., 10 steps in != 10 steps out)
- there are now two buttons and a Scale that can be used to perform chart zooms
- clicking either the zoom-in or zoom-out magnifying class will change the mouse cursor and allow for subsequent clicks on the chart to zoom
- alternatively, clicking and holding the buttons will result in a continuous zoom in that particular direction
- the zoom scale serves as a visual representation of how far zoomed in the chart is, and can be used to zoom in and out as well
- a new feature is the zoom pan display, which shows a visual representation of the current chart view in relation to the entire chart
- the contents of the preview window can be dragged to change the viewing location of the chart
- the filter bar contains a dropdown component which wraps the combobox portion of the existing lane editor component, allowing for thread activity lanes to be toggled
- note: because there can be multiple activity lane filters active at once, it was not clear how to best handle toggling/untoggling of lane activity. At the moment, if the dropdown lane filter is used then a copy of the active lanes is made into a "quick filter", which will be manipulated by the dropdown and not interfere with the underlying filters
- a component has been created to display the current time frame the chart is displaying
- the time filter is updated when the chart is zoomed or panned, and is responsive to new text input
- in the event that the recording spans more than one day (as shown below), the time filters will adjust to include the date
- these designs were created by Red Hat UX, and as such they have provided some new icons (from FontAwesome .. I should probably reference/acknowledge that in a header or readme)
- additionally, I have adapted the current lane colour scheme to use the PatternFly palette, which was designed for reinforcing application content and workflows [3].
- the following screenshots display a before and after using the PatternFly palette, and there is a nice increase in contrast between events that allows for better distinguishability
[3] https://www.patternfly.org/v3/styles/color-palette/index.html
Before
