Skip to Content

I am in the airport waiting to go to UI5Con (and my plane is late apparently), so I decided to take the time and write up another UI5 custom controls related blog. This time it’s about a more visual open source library of mine: the graph visualisation library. You can find a very simple demo of the library here: OData (might take a while to load).

Summary

I have built a small UI5 library for displaying graph-like data. This blog post outlines the current features, samples and usage. You can find more information about the library on GitHub. The code itself is written in ES6 and transpiled to ES5 with the help of babel.

Graphs

The graphs are the core of the library. They are built based on a d3 force-directed graph with pan and zoom capabilities.

Inside each graph there may be a collection of Nodes and a collection of Links between these nodes.

Expansion

Each node may be expanded or collapsed.

The node expansion mechanism works as follows:

  • A subset of the nodes are considered as origin nodes. These nodes will always be displayed regardless of the expand / collapse state of any other nodes.
  • A breadth first traversal of the graph is executed starting from these origin nodes.
  • The traversal only follows links which start from expanded nodes.
  • Only the nodes which were visited and only the links which connect two such nodes are displayed.

Directed vs Undirected

Graphs can either be directed or undirected (i.e.links describe either unidirectional or bidirectional relationships). This has both an impact on the breadth first traversal and on the way the graph is drawn. Links of directed graphs are represented through arrows.

Busy State

Nodes may also be in a busy state with a custom loading indicator. The busy state is controlled with the default busy flag from the sap.ui.core.Control class.

Data Binding

The plain graph control relies solely on UI5 associations between links and nodes (i.e. you need to give each node an ID to be able to use them inside a Links’ associations in XML views):

<spet:Graph origins="A">
	<spet:nodes>
		<spet:Node id="A" label="Node A" />
		<spet:Node id="B" label="Node B" />
	</spet:nodes>
	<spet:links>
		<spet:Link source="A" target="B" />
	</spet:links>
</spet:Graph>

As you can imagine, this is not always a suitable way of building the graph, especially when using data binding.

A more suitable way of doing it is by using the key-based graph. In this kind of graph, each node has an associated unique key (which is a property – and thus can be bound) and each link determines its source and target nodes based on the keys.

<spet:Graph nodes="{/nodes}" links="{/links}">
	<spet:nodes>
		<spet:KeyNode key="{key}" origin="true"/>
	</spet:nodes>
	<spet:links>
		<spet:KeyLink sourceKey="{sourceKey}" targetKey="{targetKey}" />
	</spet:links>
</spet:Graph>

Explorers

A more advanced (but less general) class of controls are the explorers. These controls are specialised in displaying OData specific data or metadata.

Metadata

The Metadata Explorer can display all the entity types of an OData model as nodes and the associations between these types as links:

OData

The OData Explorer looks into the data of an OData model. It starts from a single entity (which is the singular origin node of the underlying graph).

Expanding this node opens up all the related entities through navigation properties. When expanding a node, it is busy until the data is received from the backend service.

For * cardinality navigations, a growing mechanism is in place: a specialised “More…” node is used to indicate that there are more entries. Pressing it will load another segment of the collection.

Theming Support

The graphs currently use theme parameters for colours, fonts and font sizes. So in theory, it should work by default in all built-in themes.

Samples and Usage

You can find sample usages of the library here on GitHub: sample code and running samples.

To use the library, you can download it from the GitHub releases or directly from bower:

bower install spet-ui5-viz

 

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply