Table Visualizations
 



Introduction
This is the first article in a series looking at the information visualizations found in JInspired's JXInsight J2EE™ performance management console. I thought it would be best to start with the standard table view which appears in nearly all performance management tools. It's usage is so widespread that it is a standard component of any mature and production ready UI toolkit including Java Swing the cross platform technology used and extended by JXInsight's award winning console.


Most of the visualizations in JXInsight console are inspired by the graphics and guided by the principles within Edward Tufte's 3 beautiful volumes on information visualization:

The Visual Display of Quantitative Information

Envisioning Information

Visual Explanations: Images and Quantities, Evidence and Narrative




The following table view screen shot will be used when describing the table visualizations in JXInsight. Multiple screen grabs where made and then layered on top of each other to show the tool tips displayed over different parts of the table screen space. The table view is taken from the transactions perspective within the profile mode of the performance management console and displays statistical information for transaction paths occurring in the BEA WebLogic Medical Records J2EE™ sample application. For database bound applications this is one of the most important views to start from.




Transaction Paths
A transaction path is an ordered set of tuples each one uniquely identified by the SQL, Java call stack, Trace stack and position in set. The JXInsight server will aggregate execution resource counters - clock time, cpu, thread monitor waiting and blocking, GC time, object allocations and clock time adjusted. Count, maximum, minimum, average, and total statistics are recording for each counter.


Lets break down each graphical element in the table view. Following this breakdown you should have a better appreciation of the amount of information that is presented in such a small screen real estate.

Call Stack Prefix
The 'Call Stack Prefix' column provides a graphical display of the common call stack prefix between the first and last visit executions in the transaction path. The icons to the left of the text, the method name and line number of the transaction entry point, represent a partial sequence of the Java call stack when the entry point occurred. The icons represent classified Java classes with methods on the Java call stack. Classes with consecutive method invocations are compressed to a single graphical icon entry. The sequence when processed from left to right represents the incoming caller list thus it is the reverse of the typical stack display where the top element is displayed first.



This is an extremely useful visualization of the call stack because one can quickly see that that first path, an XA transaction, was started after the following call sequence: message driven bean -> ejb object -> session bean -> entity home -> entity bean -> xa resource. The time to scan and understand is very fast. The graphic also helps in distinguishing the type of incoming requests to the J2EE container. A moment processing of the second row and one understands this is an incoming web request that was processed by a filter, then a servlet, which was then forwarded to a Struts specific servlet and action, eventually arriving at an ejb object.


Access
The next column, 'Access', states the type of transaction based on the DML type of SQL statements executed, Read-Only = {SELECT}, Read-Write = {SELECT, INSERT | UPDATE | DELETE}, and Write-Only = {INSERT | UPDATE | DELETE}. The graphic to the left displays the types of operations executed within the transaction.




Table Access
The next column, 'Table Access', is extremely powerful in helping to quickly identify transactions paths (history patterns) that have similar table access but slight differences in the Java call. Each table identified via parsing of all SQL statements in the model is represented as a column of 3 pixels. Each column has 4 rows for the type of access (INSERT, SELECT, UPDATE and DELETE). A tool tip displays the database table name associated with each graphic column. In the following screen shot UPDATE and SELECT statements where executed against the record_seq table.




Trace Stack
The next column, 'Trace Stack, displays the transactions entry point trace stack. The top most (in terms of the stack) is displayed in the cell. A tool tip is available when moving over the cell displaying the complete entry point trace stack. The first graphical icon indicates whether the trace is explicit and has a trace point (arrow drawn in box) or that the trace identifier has been added for delineation for trace stacks trees as well as aggregation of statistics. The second graphical icon indicates the type of trace identifier.




Depth
The depth column has a common cell rendering technique used in all console table columns with numeric values - the slight shading of cells with values above the average for the column. The shading is subtle because in a table with a large number of columns any other rendering effects would loudly distract the user. Please note that maximum values in a column are prefixed with '*' .




Count
All table column headers have 2 rows. The top row for the label. The bottom for a statistic value of the values in the column. This can be a total, max, min, or average. When a column is selected in a table, as is the case for 'Count' column in the main screen shot above, then a color scheme is applied. This same color scheme is used across different visualizations in the console. The color selected for rendering of a cell's background is based on the ratio of the cell's value to the maximum column value.




Clock Avg
The 'Clock Avg' column has an embedded graphic showing a miniature bar chart for the distribution of all recorded values. A tool tip is displayed with a larger scale of the bar chart when a mouse is moved over.




Bar Chart Row Header
A bar chart is displayed in the table row header when a numeric column is selected in the table. This graphical element compliments the color shading of the selected column. When the selected column contains non-numeric values then the row number is displayed.



A tooltip is displayed when the mouse is moved over the row header. The tool tip provides a quick comparison of a transaction path's metrics and statistics. This view is very helpful in assessing what events (GC and thread monitor contention) contribute to the total and maximum wall clock times. The max graphical bars have lines drawn indicating the minimum and average values.




Table View Thumbnail
A thumbnail of the table can be displayed by clicking on the icon button in the bottom left hand corner of the table view. The thumbnail provides an analysis of numerical columns in the table. The color selected for rendering of each individual cell is derived from the ratio of the cell's value to the maximum column value. The thumbnail can be used to quickly navigate the table identifying high values in a large set of columns. This is especially useful in correlating high column values across columns as well as identifying outliner's not easily identified by sorting because of the number of columns required to be sorted. Within the thumbnail the selected column and visible table view portion are indicated to aid navigation.




William Louth, JXInsight's Product Architect