Jump to: navigation, search

COSMOS Design 224166

Revision as of 10:41, 5 June 2008 by Amehrega.ca.ibm.com (Talk | contribs) (Task Breakdown)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Improve the Graph Response Viewer

Change History

Name: Date: Revised Sections:
Ali Mehregani 05/21/2008
  • Initial version
Ali Mehregani 05/28/2008
  • Modified document based on comments in DV call (May 28/08)

Workload Estimation

Rough workload estimate in person weeks
Process Sizing Names of people doing the work
Design .5 Ali Mehregani
Code 3.5 Ali Mehregani
Test .5 Ali Mehregani
Documentation 0
Build and infrastructure 0
Code review, etc.* 0


The terminologies/acronyms below are commonly used throughout this document. The list below defines each term regarding how it is used in this document:

Term Definition
MDR Management Data Repository


This enhancement is associated with bugzilla 224166.

The purpose of this enhancement is to improve the graph response view displayed when querying an MDR. The view is currently convoluted and difficult to interpret by a novice user. This document lists a number of changes to improve usability and overall structure of the view.

The image below indicates a number of usability issues with the current view:

Graph response.png

It was collectively agreed during the data visualization call (May 28/2008) for this enhancement not to replace the current graphical view. Users will have the option to use either one to display the CMDBf response.

Implementation Detail

This section outlines an alternative layout to address the issues displayed above. The new layout will consist of two parts:

  1. A graphical view to display a visual overview of the response
  2. A logical tree structure to traverse through the elements of the response

The layout will consist of three sections, indicated in the image below:

Graph response new layout.png

Graphical View

The top most section of the view will consist of a graphical representation of the response. The section will leverage dojox.gfx APIs along with atomic shapes to render a graph. The APIs use SVG in FireFox and VML in IE to render the individual shapes. The end result is a static diagram with cross-browser support.

The image below shows a sample of what the graph will look like:

File:Graph response visual.png

The graph layout algorithm renders adjacent nodes closer to each other. This will visually indicate entities that are closer together in relation. The radius of each node is determined by its order (i.e. outgoing edges from the node) and the color of the node is dependent on the template it belongs to. Notice a legend is displayed at the bottom of the diagram.

The graph layout algorithm is not sufficient for responses with many items or relationships. The graph is best suited for 30 or less nodes with a maximum node order of 3. The graph view will not be generated if this condition is not met. A warning will be displayed and the space will be reserved for the logical representation (see next section). Users will have the ability to discard the warning and display the graph if they choose to populate the view.

The image below displays a concrete example based on data from the student-teacher MDR. The value of this graphical overview is the ability to quickly identify relationships between two different entities. Using this diagram, the user is quickly able to identify the following relationships:

  • Staff01 teaches Student01 and Student03
  • Staff02 teaches Student01, Student02, Student03

Graph response visual2.png

Logical View

A tree structure is provided to allow traversal of the response elements. Unlike a grid structure, a tree will only occupy the space needed. The properties view will be used to display any fields associated with a selected tree node. The image below provides an overview of the tree structure:

Graph response logical.png

Each level of the tree is described below:

  • First level: item/relationship template ID
  • Second level: the first item/relationship local ID
  • Third level: record ID

The properties view will be populated based on selection of nodes. The following fields will be displayed for each tree item selected:

Tree Item: Fields:
Item/Relationship template No fields will be displayed
  • All instance IDs
  • Additional record types
  • For relationships, source and target will also be displayed
  • Last modified
  • Snapshot ID
  • Base line ID

Double clicking a record will open a dialog box with the XML content of the associated record.

Task Breakdown

The following section includes the tasks required to complete this enhancement

  1. Isolate the query response view as a separate test page (the one that currently exists is outdated) [complete]
  2. Define a structure to be used by the graph layout algorithm [complete]
  3. Modify outputters to generate the structure [complete]
  4. Create the graph layout algorithm [complete]
  5. Write code to render the graph [complete]
  6. Define a structure to be used by the logical tree structure (determine if the same structure as the graph layout can be used) [complete]
  7. Modify outputters to generate the structure [complete]
  8. Create a tree based on the structure [complete]
  9. Decorate the tree items with icons
  10. Use topic publication/subscription to detect tree item selections [complete]
  11. Populate the properties view based on the selection [complete]
  12. Create the overall layout of the view [complete]
  13. Add the graph and logical component to the main view [complete]
  14. Determine how to add this as an alternative view to displaying the CMDBf query response

Future Direction

  • Showing direction of relationships in the graph view
  • Displaying edges only when user hovers over a node
  • Adding additional interaction (e.g. display information when hovering over a node)
  • Once COSMOS has the capability of adding user profiles, add the ability to disable parts of the view users may not be interested in.

Open Issues/Questions

All reviewer feedback should go in the Talk page for 224166.