documentationfor yFiles for HTML 2.6

Component for Graph Outline

Graphs can be of arbitrary size and shape. On the screen, however, you can only display the contents of a discrete, rectangular area at once and if a graph is large or maybe has a non-rectangular shape, chances are that not all its elements will be visible in the view at zoom level 1.0. True, by zooming out you can show more elements on the screen simultaneously, but the visualization of the elements will quickly become very small as well. And most of the time, the visualization is meant to convey information to the user as well.

Hence, while exploring a large or complex graph using the GraphComponent it may be difficult for a user to grasp where the current visible area is in the context of the whole graph. For situations like these, developers might want to add an overview of the whole graph.

yFiles for HTML offers an extra component for this purpose: the GraphOverviewComponent. It displays a simplified version of the whole graph to outline the graph’s structure. In addition, it also indicates the current visible area of the main GraphComponent.

An example application that shows a GraphComponent with an attached GraphOverviewComponent on the left. Notice how the GraphOverviewComponent shows the currently visible area.
displaying the graph overview

The GraphOverviewComponent is set up with a GraphComponent to which it connects. The overview is then automatically created and updated. It offers the following features:

  • Works out of the box with any GraphComponent
  • Easy to use
  • Efficiently displays the graph structure in a clear and concise manner
  • Shows the current viewport of the connected GraphComponent as a transparent rectangle
  • Provides a set of custom interactive features such as:
    • Dragging the rectangle that depicts the GraphComponent viewport will actually move the viewport
    • A handle at the lower right corner of the rectangle can be used to resize the viewport, which will zoom in/out in the GraphComponent accordingly
    • Alternatively, the same can be achieved using the mouse wheel
    • Clicking anywhere on the overview will move the viewport to that position