jenschristianschroder / pcf-network-graph

PCF Network Graph

A Power Apps custom control that implements cytoscape.js network graph library. Cytoscape.js is a highly configurable and flexible library for visualizing network graphs.

Features

• Display an interactive graph
  • Select nodes
  • Highlight on hover
  • Search for nodes
• Apply you own style using css stylesheets (see https://js.cytoscape.org/#style/node-body) for details.
• Multiple layout algorithms (see https://js.cytoscape.org/#layouts) for details

Configuration

1. configure the graphData or items property of the control. If graphData is set the items property will be disregarded. This makes it simpler to debug as you can change your graph inline.
2. Optionally configure the styling. If not it will use cytoscape default styling
3. Optionally configure the layout. If not it will use cytoscape default layout

Demo

Example Power Apps implementation

CDS Data Model Explorer (https://github.com/jenschristianschroder/CPAL-Data-Model-Explorer)

pcf-network-graph's Issues

Issue with larger datasets and suggestions for improvement

Hi Jens Christian,

I love this component, but i have some suggestions for improvement and found some issues that you may want to fix:

• for large dataset with several classes the component will not display all nodes/edges when inputted into the Graph DataSet(Items). If the same dataset in JSON format is provided to the GraphData input field it does display all nodes/edges. It looks like somewhere in iterating through all the records in the component something is lost.
• There is a double definition of Width / Height. One sets the width/height of the component container, the other the width/height of the cytoscape container. It would be nicer if there is only 1.
• There is a fixed black border around the cystoscape container. it would be nicer to have a border as an option or no border at all
• It would be nice to have the add-on layout options included in the component, e.g. spread
• The version used of cytoscape is rather old.
• The Search option is confusing, why are there 2 inputs for Search Input. How should they be used?
• What is the autoupdate button meant for?

Best regards,

Jaco Band

Importing

Hi there @jenschristianschroder I love the presentation and the functionality you show for the app. But could you help me out with using the solution? Do i import it as an canvas app solution? Or is it a component? In both cases i run into errors. Maybe I could add to the ReadMe here once I get it to allow for adoption by noobs as well haha.

Thomas