Jump to: navigation, search

GEF/GEF4/Zest

< GEF‎ | GEF4(Redirected from GEF/GEF4/Zest/FX)

Note to non-wiki readers: This documentation is generated from the Eclipse wiki - if you have corrections or additions it would be awesome if you added them in the original wiki page.


Introduction

The GEF4 Zest component provides support for visualizing GEF4 Graph-based graph models, applying automatic layout as provided by GEF4 Layout. It is internally decomposed into the Zest.FX and Zest.FX.UI modules. In addition, there is a deployed Zest Graph Example as well as some undeployed Zest Examples and Zest UI Examples.

GEF4-Components-Zest.png

Zest.FX

  • feature: org.eclipse.gef4.zest.fx
  • bundle: org.eclipse.gef4.zest.fx

The Zest.FX module of GEF4 Zest provides a graph viewer and implements all functionality therefore. It uses JavaFX and GEF4 FX for visualization purposes and is internally based on GEF4 MVC, can thus also be used standalone. Integrating with the Eclipse UI is realized by the Zest.FX.UI module.

{Root}

  • package: org.eclipse.gef4.zest.fx

The {Root} package provides a com.google.inject.Module (ZestFxModule) with bindings, as well as a utility class (ZestProperties) to work with the visualization and layout attributes/properties recognized by GEF4 Zest.

GEF4-Zest-FX-root.jpg

ZestFxModule

The ZestFxModule defines various (default) bindings, concerning parts, policies, etc. needed to realize the graph visualization.

ZestProperties

ZestProperties defines attributes that are associated to graphs, nodes, and edges (of GEF4 Graph), to control the visualization as well as the layout.

The visualization is based on the following attribute, which are associated with graphs (g), nodes (n), or edges (e):

The layout is based on the following attributes, which are associated with graphs (g), nodes (n), or edges (e):


Behaviors

  • package: org.eclipse.gef4.zest.fx.behaviors

The Behaviors package contains specific IBehavior implementations for exchanging layout information (LayoutContextBehavior, AbstractLayoutBehavior, NodeLayoutBehavior, EdgeLayoutBehavior), hiding/unhiding of nodes (and edges) (HidingBehavior, AbstractHidingBehavior, EdgeHidingBehavior, EdgeLabelHidingBehavior), and navigating nested graphs via semantic zooming (SynchronizeChildrenOnZoomBehavior, OpenNestedGraphOnZoomBehavior, OpenParentGraphOnZoomBehavior).

GEF4-Zest-FX-behaviors.png

LayoutContextBehavior, AbstractLayoutBehavior, NodeLayoutBehavior, EdgeLayoutBehavior

The LayoutContextBehavior maintains a GraphLayoutContext, i.e. it is responsible for the creation of such a layout context, updating the layout bounds (based on the corresponding GraphContentPart), and initiating layout passes (based on content or bounds changes).

The AbstractLayoutBehavior registers pre- and post-layout-passes on a given LayoutModel. The NodeLayoutBehavior provides the layout model with the current location and size of its corresponding NodeContentPart before a layout pass is applied, and, accordingly, copies the location and size from the LayoutModel to its corresponding NodeContentPart after a layout pass was applied. The EdgeLayoutBehavior does not need to provide layout information, but instead refreshes the visualization of its corresponding EdgeContentPart after a layout pass was applied.

HidingBehavior, AbstractHidingBehavior, EdgeHidingBehavior, EdgeLabelHidingBehavior

The HidingBehavior, EdgeHidingBehavior, and EdgeLabelHidingBehavior react to changes in the HidingModel by hiding/showing the corresponding visuals. In addition, for nodes, a HiddenNeighborsPart is created when any neighboring nodes are currently hidden.

SynchronizeChildrenOnZoomBehavior, OpenNestedGraphOnZoomBehavior, OpenParentGraphOnZoomBehavior

The SynchronizeChildrenOnZoomBehavior starts a content synchronization when the zoom level is changed. This is necessary for consecutive zooming since a NodeContentPart returns its nested graph only when a certain zoom level is reached.

The OpenNestedGraphOnZoomBehavior and OpenParentGraphOnZoomBehavior implement nested graph navigation upon zoom level changes. The graph of the node where the current graph is nested is opened when the user zooms out of the current graph, and the nested graph of a nesting node is opened when the user zooms into the corresponding NodeContentPart.



Layout

  • package: org.eclipse.gef4.zest.fx.layout

The Layout package provides object adapters (GraphLayoutContext, GraphNodeLayout, and GraphEdgeLayout that implement the layout data interfaces provided by GEF4 Layout and target the graph model elements provided by GEF4 Graph, i.e. org.eclipse.gef4.graph.Graph, org.eclipse.gef4.graph.Node, and org.eclipse.gef4.graph.Edge.

It also provides a GraphSubgraphLayout that groups node layout adapters, which is currently unused and will be removed in the future; see bug #469469 for details). Furthermore, GraphLayoutContext and LayoutModel will be merged in the future, as indicated in bug #469466.

GEF4-Zest-FX-layout.png

GraphLayoutContext, GraphNodeLayout, GraphEdgeLayout, GraphSubgraphLayout

Automated layout as provided by GEF4 Layout relies on respective layout data interfaces to provide input data to the layout algorithms and retrieve the computed layout output data.

The GrapLayoutContext, GraphNodeLayout, and GraphEdgeLayout are object adapters targeting the GEF4 Graph data model elements, i.e. org.eclipse.gef4.graph.Graph, org.eclipse.gef4.graph.Node, and org.eclipse.gef4.graph.Edge. They all support a general property mechanism to exchange layout information.

The creation of layout adapters is performed by a GraphLayoutContext (i.e. a LayoutModel) for each graph (root as well as nested). It is registered as an adapter on the GraphContentPart that controls the graph or nested graph respectively, and can thus be retrieved as follows:

GraphLayoutContext layoutContext = viewer.getContentPartMap().get(graph).getAdapter(GraphLayoutContext.class);

The attributes contained in graph model elements and the layout properties (contained in the layout adapters) are transferred within LayoutContextBehavior and NodeLayoutBehavior, which update the required layout attributes of the layout adapters before each layout pass (based on the positions and sizes of the visuals) and refresh the visuals afterwards (the graph model elements contain no properties related to positions and sizes).


Models

  • package: org.eclipse.gef4.zest.fx.models

The Models package provides viewer models to support hiding of nodes (HidingModel) as well as semantic zooming (ViewportStackModel).

It also provides a LayoutModel, which will be merged with GraphLayoutContext in the future, as indicated in bug #469466.

GEF4-Zest-FX-models.png

HidingModel

The HidingModel is a viewer model that stores which nodes are currently hidden. Every visible node shows a small marker indicating how many of its neighbors are hidden. You can hide/show nodes using the hover handles, respectively. The visualization is automatically synchronized with the HidingModel.

LayoutModel

The LayoutModel is a specific GraphLayoutContext that will create an empty default graph if no graph its provided. It is adapted to each GraphContentPart and controls the related graph model element.

ViewportStackModel

The ViewportStackModel is a viewer model needed to persist viewport configurations. It is used to keep track of all viewports that are passed during nested graph navigation when zooming in and can be used to restore viewports when zooming out again.


Operations

  • package: org.eclipse.gef4.zest.fx.operations

The Operations package currently provides only a single operation for the hiding (visible) and showing (invisible) nodes (HideOperation).

GEF4-Zest-FX-operations.png

HideOperation

The HideOperation is used by HideNodePolicy to hide or show nodes. It adds/removes a respective content part to/from the HidingModel.


Parts

  • package: org.eclipse.gef4.zest.fx.parts

The Parts package provides a specific org.eclipse.gef4.mvc.fx.parts.FXRootPart which adds support for CSS styling.

GEF4-Zest-FX-parts-root.png

It furthermore provides specific AbstractFXContentPart implementations (GraphContentPart, NodeContentPart, and EdgeContentPart) to control the visualizations of graphs, nodes, and edges.

GEF4-Zest-FX-parts-contents.png

In addition, it provides specific AbstractFXHandlePart implementations (ZestFxHidingHandlePart and ZestFxExpandingHandlePart) to realize hiding and showing of nodes via hover handles.

GEF4-Zest-FX-parts-handles.png

There are also specific AbstractFXFeedbackPart implementations (HiddenNeighborsPart and ZestFxEdgeLinkFeedbackPart) to indicate feedback for hidden nodes and anchor links (from edge labels to their related edges).

GEF4-Zest-FX-parts-feedback.png

Last, the package provides a specific ZestFxCursorProvider that contributes a specific cursor to indicate rotation during handle-drag based rotation.

GEF4-Zest-FX-parts-providers.png

Classes within this package will probably be renamed in the future to achieve a better consistency, as outlined in bug #468804.

GraphRootPart

The GraphRootPart is a specific org.eclipse.gef4.mvc.fx.parts.FXRootPart that adds support for CSS styling. In detail, it loads a file (STYLES_CSS_FILE) with default CSS styles and applies it as stylesheet on the javafx.scene.Scene.

GraphContentPart, NodeContentPart, EdgeContentPart, EdgeLabelPart, ContentPartFactory

The GraphContentPart, NodeContentPart, and EdgeContentPart implementations control the visualization of the underlying GEF4 Graph model elements, i.e. graphs, nodes, and edges. The default visualization for nodes (contributed by NodeContentPart) consists of a javafx.scene.shape.Rectangle for background and border, a javafx.scene.text.Text for the label, and an javafx.scene.image.ImageView for the icon. The default visualization for edges (contributed by EdgeContentPart consists of an FXConnection. It is augmented by a javafx.scene.text.Text for the label, which is controlled by EdgeLabelPart.

ZestFxHidingHandlePart, ZestFxExpandingHandlePart, ZestFxHandlePartFactory

The ZestFxHidingHandlePart and ZestFxExpandingHandlePart are complementary org.eclipse.gef4.mvc.fx.parts.AbstractFXSegmentHandlePart implementations that are used as hover handles. Being anchored on a respective NodeContentPart, they react to mouse clicks and delegate to the respective HideNodePolicy to perform hiding or showing of nodes.

Hover handles for hide/show

The ZestFxHandlePartFactory extends the FXDefaultHandlePartFactory to create both hover handle parts for an underlying target NodeContentPart. It also suppresses the multi selection handles that are created by default within FXDefaultHandlePartFactory.

HiddenNeighborsPart, ZestFxEdgeLinkFeedbackPart, ZestFxFeedbackPartFactory

The HiddenNeighborsPart is a specific AbstractFXFeedbackPart that indicates the number of hidden neighbor nodes via a circle decoration (with a number label).

Feedback for hidden neighbor nodes

The ZestFxEdgeLinkFeedbackPart provides anchor link feedback support between EdgeContentPart and EdgeLabelPart, indicating a dashed feedback line, which is anchored at the edge visual, whenever the label is moved.

Anchor link feedback for edge labels

The ZestFxFeedbackPartFactory extends the FXDefaultFeedbackPartFactory to enable the anchor link feedback between edge and edge label.

ZestFxCursorProvider

The ZestFxCursorProvider contributes a specific rotate cursor that is shown when performing interaction via corner handles, when CTRL-key is pressed (which corresponds to rotation of nodes). It is enabled by FXCursorBehavior.


Policies

  • package: org.eclipse.gef4.zest.fx.policies

The Policies package contains specific IPolicy implementations for hiding/unhiding of nodes (HideNodePolicy, HideOnTypePolicy), selection and hovering (FocusAndSelectFirstAnchorageOnClickPolicy, HoverFirstAnchorageOnHoverPolicy), dragging edge labels (OffsetEdgeLabelOnDragPolicy), and navigating nested graphs via double click (OpenNestedGraphOnDoubleClickPolicy, OpenParentGraphOnDoubleClickPolicy).

GEF4-Zest-FX-policies.png

HideNodePolicy, HideOnTypePolicy

The HideNodePolicy is registered as an adapter on NodeContentParts. It will be retrieved by ZestFxHidingHandlePart and ZestFxExpandingHandlePart to add/remove its host NodeContentPart to/from the HidingModel.

FocusAndSelectFirstAnchorageOnClickPolicy, HoverFirstAnchorageOnHoverPolicy

The FocusAndSelectFirstAnchorageOnClickPolicy is registered as an adapter on EdgeLabelParts in order to focus and select the corresponding EdgeContentPart when the user clicks an edge label.

The HoverFirstAnchorageOnHoverPolicy is registered as an adapter on ZestFxHidingHandleParts and ZestFxExpandingHandleParts, so that hover feedback for the respective NodeContentPart is not removed when the user hovers the hiding/expanding handle part (i.e. leaves the NodeContentPart).

OffsetEdgeLabelOnDragPolicy

The OffsetEdgeLabelOnDragPolicy is a specific AbstractFXOnDragPolicy that enables the positioning of edge labels (i.e. EdgeLabelPart) during mouse drag.

OpenNestedGraphOnDoubleClickPolicy, OpenParentGraphOnDoubleClickPolicy

The OpenNestedGraphOnDoubleClickPolicy and OpenParentGraphOnDoubleClickPolicy policies implement nested graph navigation via double clicking with the mouse. The graph of the node where the current graph is nested is opened when the user double clicks in the background (i.e. in a GraphRootPart), and the nested graph is opened when the user double clicks in a NodeContentPart that contains a nested graph.


Zest.FX.UI

  • feature: org.eclipse.gef4.zest.fx.ui
  • bundle: org.eclipse.gef4.zest.fx.ui

The Zest.FX.UI module of GEF4 Zest contains Eclipse Workbench UI related graph visualization support. This includes a com.google.inject.Module] (ZestFxUiModule), which augments the bindings of ZestFxModule to realize the Eclipse Workbench UI integration, an Eclipse view (ZestFxUiView) to render graphs based on Zest.FX, as well as a JFace-based API to populate a Zest viewer (i.e. an FXViewer with bindings defined in ZestFxModule.


{Root}

  • package: org.eclipse.gef4.zest.fx.ui

The {Root} package provides a com.google.inject.Module (ZestFxUiModule) with bindings related to the Eclipse UI Workbench integration of Zest.FX.

GEF4-Zest-FX-UI-root.png

ZestFxUiModule

The ZestFxUiModule extends MvcUiModule and thus delivers specific bindings related to the integration of Zest.FX with the Eclipse Workbench UI.


JFace

  • package: org.eclipse.gef4.zest.fx.ui.jface

The JFace package provides a specific org.eclipse.jface.viewers.ContentViewer (ZestContentViewer), related content (IGraphNodeContentProvider, INestedGraphContentProvider) and label (IGraphNodeLabelProvider, INestedGraphLabelProvider) providers, as well as a specific provider for edge decorations (IEdgeDecorationProvider).

GEF4-Zest-FX-UI-jface.png

As outlined in bug #469330 this API will be adjusted in the future.

ZestContentViewer

A ZestContentViewer is a specific org.eclipse.jface.viewers.ContentViewer that renders an input model as a directed graph, using Zest.FX.

The to be rendered graph is inferred from the input model by means of a org.eclipse.jface.viewers.IContentProvider. In the context of a ZestContentViewer, the content provider has to implement IGraphNodeContentProvider or INestedGraphContentProvider (if the graph is not flat but contains nested graphs). The content provider is node-based, i.e. edges are not represented as first level entities, but are only inferred from input objects via getConnectedTo(Object).

The visualization of the graph (i.e. of its nodes and edges) can be controlled via a org.eclipse.jface.viewers.ILabelProvider. The getText(Object) and getImage(Object) of the label provider will be used to infer labels and icons for nodes. In case the label provider implements org.eclipse.jface.viewers.IColorProvider, its getForeground(Object) will be used to infer the color of the node outline and its label, and getBackground(Object) will be used as the node's fill color. In case the label provider implements org.eclipse.jface.viewers.IFontProvider, getFont(Object) will be used to infer the name, size, and style (bold or italic) of the font, used by the node label. The label provider may furthermore implement org.eclipse.jface.viewers.IToolTipProvider in case a tooltip should be shown on hovering the node.

Further, the label provider may implement IEdgeDecorationProvider to provide visual source and target decorations for edges.

If the label provider in addition implements IGraphNodeLabelProvider or INestedGraphLabelProvider, it can provide ZestProperties for graphs, nodes and edges, via which the visualization can be controlled even more fine-grained. It will overwrite the values returned via the standard label and dedicated provider methods. For edges, this is currently the only way to provide a label text (using the label attribute).

IGraphNodeContentProvider

The IGraphNodeContentProvider is responsible of returning those input elements (getNodes()) that are to be visualized as nodes, and to provide information about which nodes are connected via edges to other nodes. The IGraphNodeContentProvider is node-based, i.e. the to be visualized edges are only represented implicitly, by providing the connection target nodes of a node via getConnectedTo(Object), and are not explicitly mapped to underlying input elements.

INestedGraphContentProvider

The INestedGraphContentProvider is responsible of returning the nested nodes of a given node (getChildren(Object). It extends the IGraphNodeContentProvider, so that edges can also be inferred between nested nodes, i.e. those being returned as children.

IGraphNodeLabelProvider, INestedGraphLabelProvider

The IGraphNodeLabelProvider, in addition to the standard label provider functionality, is responsible of returning attributes, i.e. ZestProperties for a root graph, as well as for nodes and edges. The INestedGraphLabelProvider in addition returns those attributes for nested graphs.

IEdgeDecorationProvider

The IEdgeDecorationProvider is responsible of returning source and target decorations (org.eclipse.gef4.fx.nodes.IFXDecoration) for an inferred edge, which is identified via a source and target input object.


Parts

  • package: org.eclipse.gef4.zest.fx.ui.parts

The Parts package provides an Eclipse org.eclipse.ui.part.ViewPart (ZestFxUiView) for visualizing graph models.

GEF4-Zest-FX-UI-parts.png

ZestFxUiView

ZestFxUiView is a specific FXView that can render graphs. It uses the bindings provided by ZestFxModule and ZestFxUiModule.

At the moment, ZestFxUiModule does not specify any bindings by default, but expects an injector with the bindings provided in ZestFxModule and ZestFxUiModule to be passed into its constructor. In the future, the ZestFxModule and ZestFxUiModule bindings will be used by default already, as outlined in bug #469484 .


Migration from Zest 1.x to GEF4 Zest

GEF4 Zest was mostly written from scratch, replacing the Zest 1.x API as well as the provisional Zest 2.x API (Zest 2.0 Layout API) that was developed as an intermediate step.

The Zest 1.x API consists of two parts:

  1. a Core API for the visualization of graphs, and
  2. a JFace API with specific content and label providers and a viewer dedicated to displaying Zest graphs.

The former has been replaced by Zest.FX and the latter by Zest.FX.UI.


Migration from Zest 1.x Core to GEF4 Zest.FX

In comparison to the Zest 1.x Core API, which is based on SWT/Draw2d visualization and interweaves graph data, layout data, and visuals, Zest.FX is based on GEF4 MVC and maintains distinct object hierarchies for the graph data (content model), the layout data (layout model), and the visuals. As a result, in order to perform structural changes to the visualized graph, you cannot directly affect the visualization as in Zest 1.x Core, but instead modify the underlying graph model which will effect a content synchronization, i.e. update the visualization based on the content changes. Therefore, to transition from Zest 1.x Core to Zest.FX, you have to create/modify a org.eclipse.gef4.graph.Graph where previously org.eclipse.zest.core.widgets.Graph, org.eclipse.zest.core.widgets.GraphNode, and org.eclipse.zest.core.widgets.GraphConnection were created/modified.

Since Zest.FX is based on GEF4 MVC, you should be familiar with the mechanisms and concepts of GEF4 MVC, which are employed as follows:

  • A org.eclipse.gef4.mvc.models.ContentModel stores the Graph that is currently rendered.
  • A org.eclipse.gef4.mvc.parts.IContentPartFactory (ContentPartFactory) constructs controller objects (content parts) for graphs, nodes, and edges. These are responsible for updating the visualization, synchronizing visualizations with contents, and layout integration.
  • All content parts support an adapter mechanism where you can set/query adapters for distinct keys. Functionality can be added to a content part by setting a corresponding adapter on it. For example, you can enable different interactions (moving nodes via drag, etc.) by setting the corresponding policies as adapters on the content parts.
  • A com.google.inject.Module (ZestFxModule) defines bindings for the context of an application. Using this mechanism, you can specify which adapters should be set on the different content parts. For example, the adapter mechanism is used to integrate GEF4 Layout into GEF4 Zest.

The Zest Graph Example demonstrates best how to use the new API. The example is very simple as the rendered graph is not modified later on. However, it contains everything that is needed for a fully functional example. As you can see when taking a look into the source code, attributes are set on the graph model to specify certain visualization features such as label, tooltip, CSS id, etc. Actually, the whole visualization results from those attributes (Visualization Properties).

Some specific Zest 1.x core functionalities are implemented differently within Zest.FX. The corresponding use case scenerios are as follows.

Customizing Styles

Many visual features can be specified via JavaFX CSS within GEF4 Zest which would have required either a style provider or a custom figure in previous versions. The CSS styles can be applied to individual elements, or entire classes of elements. There are four parts of the visualization which can be styled individually:

  • "node-rect-css-style": Styles the JavaFX Rectangle which renders the border and background of a node.
  • "node-label-css-style": Styles the JavaFX Text which renders the label of a node.
  • "edge-curve-css-style": Styles the FXGeometryNode which renders an edge.
  • "edge-label-css-style": Styles the JavaFX Text which renders the label of an edge.

Customizing Visualizations

Within GEF4 MVC, on which Zest.FX is based, an org.eclipse.gef4.mvc.parts.IContentPart is responsible of contributing a respective visualization. You can exchange the parts provided by Zest.FX to control nodes and edges, and thereby replace their visualizations. To do so, you have to create a custom org.eclipse.gef4.mvc.parts.IContentPartFactory (e.g. by subclassing ContentPartFactory) to create different content parts.

To exchange the original ContentPartFactory with your custom implementation, you have to overwrite the respective binding defined within ZestFxModule. This can easily be achieved by subclassing ZestFxModule and overriding bindIContentPartFactory(). Your custom module has to be handed into the constructor of the ZestContentViewer, so the specified bindings are evaluated.

The JFaceCustomNodeExample demonstrates this scenario. However, be aware that colors, fonts, borders, and sizes can already be configured via JavaFX CSS and do not require a custom visualization, as outlined in Customizing Styles.

Modifying graphs

Since you cannot modify the visualization directly, you have to adjust the underlying graph model instead. The FullyMeshedLayoutExample demonstrates this scenario.

Layout filter

Nodes and edges can be marked as layout-irrelevant, meaning they will not get reported to layout algorithms. The FilterLayoutExample demonstrates this scenario.


Migration from Zest 1.x JFace to GEF4 Zest.FX.UI

Zest.FX.UI consists of a ZestContentViewer and related specializations of org.eclipse.jface.viewers.IContentProvider and org.eclipse.jface.viewers.ILabelProvider.

In comparison to the org.eclipse.zest.core.viewers.GraphViewer provided by Zest 1.x, the ZestContentViewer is not a org.eclipse.jface.viewers.StructuredViewer, but a org.eclipse.jface.viewers.ContentViewer, which seems to be the more adequate abstraction (as a structured viewer imposes a tree-, list-, or table-based structure, which does not naturally resemble a graph).

Content Providers

Probably, the biggest difference between Zest 1.x and Zest.FX.UI is related to content providers. Zest.FX defines the following ones:

Both new content providers are node-oriented, i.e. they provide content elements which represent nodes, not edges. The Zest 1.x API additionally defines an org.eclipse.zest.core.viewers.IGraphEntityRelationshipContentProvider which provides content elements that represent edges. This is not yet covered by Zest.FX.UI.

Label Providers

While Zest 1.x was based on the default org.eclipse.jface.viewers.ILabelProvider, Zest.FX.UI provides two specializations, namely IGraphNodeLabelProvider and INestedGraphLabelProvider. They allow to provide attributes for graphs, nodes, edges, and nested graphs, which may also overwrite those values provided by dedicated providers.

Dedicated Providers for Styles, Tooltip, Colors, Fonts

Most of the custom Zest 1.x JFace providers have been replaced with the respective standard JFace providers:

The values returned by a provider for the font, foreground, and background color are transferred into equivalent CSS styles which can be overwritten by the label provides.

The following providers have not been migrated, because their corresponding functionality is implemented by means of default GEF4 MVC mechanisms, on which Zest.FX and thus Zest.FX.UI are based:

You can find examples on how to use the different providers in the JFace-API examples.

Zooming

Basic support for zooming, which is specifically implemented within org.eclipse.zest.core.viewers.GraphViewer, is already provided as a base feature of GEF4 MVC.FX, on which Zest.FX and thus also Zest.FX.UI are based. Within GEF4 MVC, a ViewportModel maintains a content transformation which can be modified to zoom in/out of a visualization. Zest.FX adds a semantic zoom that allows to zoom into nested graphs. That is, when zooming into a nesting node, it will - from a certain zoom level onwards - show the nested contents and will eventually replace the viewer contents with the nested graph.