How to draw timelines in a tree table - swing

Question

I am writing an analyzer to visually see where my application is spending time. The interface that I am trying to achieve (see below) is something similar to a tree table with
lines or boxes to denote response time.
be a collapsible tree like graph
the ability to display metrics in the table columns (e.g., start time, cost, etc)
the ability to display the labels or description and metrics on the left and lines on the right
I create the following diagram (see below) in R -- unfortunately, although the graph production is automated, the approach is not interactive. I was wondering if you could suggest a better way -- maybe a tree table. I looked at many Swing, JavaFx tree table examples. I have not seen an example that has lines (time lines) in a tree table.
Any suggestions would be greatly appreciated. Thanks in advance.

Answer 1

You can show any node in a TreeTableCell using the grahic property in javaFX. This includes Rectangles.
This is a simple example of showing bars in a column using Rectangles:
// Arrays in TreeItems contain {startValue, endValue} (both positive)
TreeItem<int[]> root = new TreeItem<>(new int[]{0, 10});
root.getChildren().addAll(new TreeItem<>(new int[]{0, 5}), new TreeItem<>(new int[]{5, 10}));
TreeTableView<int[]> ttv = new TreeTableView<>(root);
// Column displaying bars based on data of TreeItem. Do not use this as
// the first column, otherwise the alignment be off depending on the
// distance to the root.
TreeTableColumn<int[], int[]> column = new TreeTableColumn<>();
column.setCellValueFactory(c -> c.getValue().valueProperty());
final double BAR_SIZE = 20;
column.setCellFactory((t) -> new TreeTableCell<int[], int[]>() {
// the bar
private final Rectangle rectangle = new Rectangle(0, 10);
{
setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
// bar invisible by default
rectangle.setVisible(false);
setGraphic(rectangle);
}
#Override
protected void updateItem(int[] item, boolean empty) {
super.updateItem(item, empty);
if (!empty && item != null) {
// resize and display bar, it item is present
rectangle.setWidth((item[1] - item[0]) * BAR_SIZE);
rectangle.setTranslateX(item[0] * BAR_SIZE);
rectangle.setVisible(true);
} else {
// no item -> hide bar
rectangle.setVisible(false);
}
}
});
// add a columns new column
// add a additional empty column at the start to prevent bars being
// aligned based on distance to the root
ttv.getColumns().addAll(new TreeTableColumn<>(), column);
Things you need to do
use a data type different to int[]; the cell value factory and TreeTableCell needs to be adjusted accordingly; an example of a more complex model can be found e.g. in the oracle tutorial: https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/tree-table-view.htm
Choose better colors; These colors could e.g. be stored in a Map and created if a new one is needed.
add additional colums