Integrating Neo4j Bloom in a React JS Application using iFrame

Question

Is it possible to embed Neo4j Bloom into a React.js application using an iFrame? I have a React.js application where I want to provide users with data visualization capabilities using Neo4j Bloom, but I'm unsure about the best approach to achieve this integration.

Any insights, tips, or alternative suggestions on how to embed Neo4j Bloom into a React.js app would be greatly appreciated. Thank you!

Answer 1

That is currently not really possible, or at least not really possible in a good way. I think you can technically embedd Neo4j Bloom into an iframe, but you would have the following problems:

• Neo4j Bloom requires a direct database access, therefore your end users would have direct database access. Unless you restrict the Bloom account to a readonly one, this can and will be exploited at some point by malicious actors.
• You can not control Neo4j Bloom through an iFrame, i.e. you can not change the view, content and settings via JS.
• I am not a legal expert, but using Neo4j Bloom in third party websites (i.e. your one) might require another license.

There are a few alternatives you can try:

• Neo4j's NeoDash is based on react.js and open source: https://github.com/neo4j-labs/neodash
• Neo4j's NeoDash also uses the library react-force-graph-2d for displaying the graph in the first place.
• Neo4j's Arrows was also open sourced recently, although iirc the team is currently working on a rewrite of Arrows: https://github.com/neo4j-labs/arrows.app
• You can also use other graph rendering libraries. I can really recommend G6, it has basically the same features like Neo4j Bloom, but it's just a library. Note: It's main documentation is written in Chinese, so you should use a translator / ChatGPT. You can see how I use it here: https://ember-nexus.github.io/api/#/security/access and my source code: https://github.com/ember-nexus/api/blob/main/docs/index.html#L74