Sunday, March 11, 2018

OData Visualizer

While writing my former blog OData Explorer, i always had in mind to be able to visualize the OData Model and be able to export it for including into customer documentations.

And now, i found a first solution, that fits my needs.

OData Explorer - Visualizer

The new Visualizer is integrated into the OData Explorer.

For the impatient, launch the explorer and get your hands on the visualizer.

It is based on the sapui5 Network Graph, so it is not really an OpenUI5 widget because it needs SAPUI5. But as always, borders are fluid ;-)

The network graph is available since 1.50 and still has some layout issues, but is currently useable to render graphs as inline SVG images. After investigating this control, i figured out, that it will fit my needs to render a parent/child graph of odata dependencies.

I copied all the options from the sample to be able to play around with the options of the control. This is not only for fun, because all the options will be rendered into the exported graph also.

Sadly, the control currently does not support out-of-the-box export options, so after some research i figured out a working solution by myself.

In short, the solution clones the SVG while including all referenced external styles as inline styles and serializes it for download.

The export to PNG option uses the same approach, but internaly creates a canvas to render/draw the SVG and then using canvas.toDataURL to convert it into PNG while converting the Base64 into Blob.

Both approaches uses sap.ui.core.util.File to allow locally saving of file data.

Here is an example of the generated model for the used Northwind demo service.

Northwind OData v2 service

Have fun...