Visualize a DTE Specification

DTEvisual visualizes a DTE specification by displaying two types of graphs: a general graph and a type graph. Users can switch between the two graphs through the context menu (right-clicking in the empty area of the display widget). A type graph is displayed using a radial tree. All the directories/files at the same level are connected using a dotted circle. Directories are indicated by the trailing slash. type graphs are displayed using a radial tree

There are two ways to visualize a DTE specification: (1) import a DTE specification and (2) open a diagram which is saved in a format unique to DTEvisual. If users choose to import a DTE specification, our system will try to automatically layout the general graph so that visual clutter is reduced as much as possible. In this process, users will see the real-time animation of how the nodes in general graph change their positions. If he/she thinks the layout is good enough, he/she can stop the process by hitting space bar. The type graph is also constructed in the mean time. A DTE specification can also come in a text file whose format is unique to DTEvisual. Such a file records the layouts of both general graph and type graph as well as the information contained in the original DTE specification.

Since a general graph may become cluttered when the number of nodes in it increases, DTEvisual allows users to highlight certain part of the graph to alleviate this problem. Two types of highlighting are available: (1) global highlighting which affectes all the items of certain types and (2) local highlighting which only affectes user-defined items. Global highlighting can be controled from the View menu and includes:

Local highlighting is available by first switching to highlighting mode through the tool bar. The first time users click on a node/edge, the item itself and its adjacent edges/nodes are highlighted while the rest of a general graph is grayed out. The second click on the same item does the opposite: only highlight the rest of a general graph. The thrid click brings the rendering back to normal.
First Click
Second Click
Third Click