FishEye JTree

The Java Swing element "JTree" allows representation and navigation in tree structures. But as soon as the amount of hierarchical data structures increases (e.g. the file system) one can easily lose overview and orientation while navigating through different nodes on deep hierarchic levels.

The well-known information visualization method   "Fisheye View" solves this problem. This kind of Focus+Context visualization supplies overview and orientation by means of simultaneous representation of information in the focus and in the environmental range. Unfortunately standard UI elements for tree representation, like "JTree" for Java, don´t provide such functionality. In order to provide such a UI element for Java, a Fisheye extension for Java JTrees was implemented in the context of this practical course.

Furthermore a tree browser was implemented, which displays the JTree, the fisheye algorithm is executed on. The user is able to activate and deactivate the fisheye operation, imposed by the fisheye algorithm, by simply checking/unchecking the fisheye checkbox located in the menubar of the tree browser.

Fisheye views are an example of a more basic strategy for the display of large structures. This basic strategy uses a ?Degree of Interest? (DOI) function which assigns to each point in the structure, a number telling how interested the user is in seeing that point. In its simplest, additive form the generalized fisheye degree of interest function is,

DOI = API(x) - D(x,y)

where DOI is, according to the fisheye model, the user`s degree of interest in a point x, given that the current point of focus is y. API(x) is the global a priori importance of x and D(x,y) is the distance between x and the current point y. The interest increases with the a priori importance and decreases with the distance.

Basically the main goals in this practical course are:

• the application of the method of the "Generalized Fisheye Views" (G. Furnas, 1986) on tree structures
• the extension of JTree elements to implement Fisheye functionality
• to give the possibility for flexible parameterizing

Concept of the FishEye JTree: The fisheye visualization was implemented using 3 JTrees:

The three JTrees, displayed above, are handled by the class "FishEyeJTree.java" (see The Fisheye Toolkit Javadoc), which takes the Original JTree (first JTree) as parameter. It copies the Original JTree, creating a new Fisheye (DOI) JTree. In the process of copying, each node, located in the Original JTree, is converted into a FishEyeJTreeNode and stored in the created Fisheye (DOI) JTree. As a result, the Fisheye (DOI) JTree has the same tree structure as its Original JTree. Each treenode in the Fisheye (DOI) JTree stores a reference to its original node (node located in the Original JTree), a reference to its display node (node displayed by the browser in fisheye mode), the DOI value (calculated by the DOI function) and a boolean, indicating, whether it is a focus node or not.

The Fisheye (DOI) JTree is the JTree displayed by the browser in JTree mode (the fisheye view is deactivated). It is used to calculate the DOI value for each node, without deleting the nodes, whose DOI values are smaller than the threshold, defined by the user. The JTree used in fisheye mode is the Fisheye (Display) JTree. It is created by executing the fisheye operation. With each fisheye operation, the FishEyeJTree class first calculates and stores the DOI value for each node in the Fisheye (DOI) JTree. If the value is greater than the threshold (defined by the user), it checks, whether the doi-node has a reference to its display node (node in the Fisheye (Display) JTree). If the reference is null (node was deleted before or Display JTree wasnŽt created yet), it creates a new FisheyeJTreeNode in the Fisheye (Display) JTree, setting the attributes according to its doi-node (doi value, reference to doi-node, boolean value, ...). Therefore the created treenode stored in the Fisheye (Display) JTree is a copy of the doinode. If the reference is not null, the attributes of the display-node are set according to the ones of its doi-node. In the other case, if the doi value stored in the doinode, located in the Fisheye (DOI) JTree, is smaller than the threshold, then the display-node referenced by the doinode is simply deleted from the Fisheye (Display) JTree.

Example: MetaData Editor extended by Fisheye JTree

The MetaDataEditor is a graphical user interface for collecting metadata enhancing medical readings. The collected data is stored in an XML based database, from which it can later be retrieved. This program uses a prototypical XML-based framework which allows gathering following metadata concerning:

- Name, Short Term, Description of the measured parameters

- Physical Unit, Data Format in which the parameters are measured and stored

- Semantical Grouping, Hierarchical Structuring between the paramerters

- Dependencies between parameters

- Context Sensitive Normal values and Valid Values of parameters

- Context Definitions defining if a Context is valid

It provides a parameter-centered view on the various domains of metadata stored in the framework. Moreover it serves the user with cross-referenced dialogs to semantically connected data, together with a concise tree view displaying hierarchical structures, as well as traditional table oriented views and access to the data.

The fisheye implementation had to be done in such a way, so that the Fisheye JTree can be reused by any other programmer, extending his software program. As a test case, the MetaData Editor Software, available using this link http://ieg.ifs.tuwien.ac.at/projects/metadataeditor/, was used to show the reusability of the fisheye implementation.

The fisheye functionality was integrated into this software by adding the fisheye checkbox into the menubar of the MetaDataEditor. Thus the user is able to activate/deactivate the fisheye view.

The user activates the fisheye view by simply checking the fisheye checkbox. The JTree is then replaced by the Fisheye (Display) JTree, created by the "FisheyeJTree.java" class. The slider, used for the threshold, is added to the menubar, just like in the fisheye implementation. The focus node is set by double-clicking on the node in the Fisheye JTree.

The user can use the slider to set the threshold. The nodes in the jtree disappears, depending on which value the threshold is set to. The panel, which displays the information of the selected node, appears once the respective node is clicked. This is done by the MouseListener of the Fisheye JTree. Each node in the Fisheye JTree has a reference to its original node. If a node is clicked, the MouseListener gets the selected fisheyenode and passes its original node to the "MainFrame" class of the MetaDataEditor.

Downloads