All Artists Need A Canvas

In designing user interfaces, the widgets provide the starting point.  The widget set typically includes lists, tables, trees, buttons, menus, and dialogs, and provides the interface designer with his tools.   Mapping data into a tree or a table, styling the widgets for a branded look and feel, adding scrolling, sorting, and selection behavior brings a user interface to life and provides the end user with instant visibility.

But sometimes these basic widgets don't go far enough with their ability to convey real world concepts. If a picture is truly worth a thousand words, a graphical four column table with rows of data does not a picture make.  So what alternatives are there?  What if I need to display objects arranged in a circular fashion with relationships between them?  What if I need to show a grab bag of elements that share various connections with each other?  How do I give the user that one picture worth a thousand words?

Given my requirements, I went searching for my etch-a-sketch that would both allow me to arrange objects and at the same time help me with the organization of them.  Enter JIT - Javascript InfoVis Toolkit.  A compact, simple, extendable and powerful canvas drawing and manipulation tool that could be easily integrated into my GWT-based application that was already underway.

In conjunction with the JIT documentation, examples and experts on the Google-groups, I was able to build a view that would provide our users with a visual rendition of network components and their connections between each other as shown.

Network View

We achieved support for:

• Search by name with the resulting object being selected and centered on the screen
• User draggable elements for user positioning or JIT auto layout algorithm activation
• Saving of all element positions to redraw later using the same layout 
• Zoom in and Zoom out functions for canvas scaling controlled with a "+" and "-" button press
• Spacing between elements, canvas size, font size and name truncation controlled with view options
• Full element selection, extended selection and right click popups for shortcut operations
• Full link (or edge) selection, extended selection and right click popups for operations
• Dynamic view refreshing using "sum" and "morph" JIT technologies via JSON data
• Much more to come....

What about being able to show a set of objects related to each other in both directions?  A set of elements that form a ring?  Something that supports selection and can show elaborate connections, but that auto layouts the diagram perfectly each time?

Ring View

With the sunburst layout we achieved support for:

• Search by name with the resulting object being selected on the screen 
• Zoom in and Zoom out functions for canvas scaling controlled with a "+" and "-" button press
• Ring size and spacing, font size and name truncation controlled with view options
• Full element selection and right click popups for shortcut operations
• Link (edge) highlighting using various colors based on search or selection criteria
• Dynamic view refreshing
• Much more to come....

By combining the asynchronous processing power and speed of GWT with a simple javascript canvas drawing and manipulation tool, we are well on our way to building an interface that fills trees, tables, buttons, menus and dialogs and provides that thousand word picture.