Graphical visual in ORCASK

[vivek-metricdust]

need to create the graphical visualization similar to the graphs in neo4j database

• [x] select the library for use
• [x] implement the basic version using library
• [x] implement the graph in orcask ai response section

[vivek-metricdust]

the poc is implemented in the reagraph library but it seems like it not popular so finding a way to implement the graph using D3

[kamalkrbh]

We can use reagraph. Please document the reasearch.

[vivek-metricdust]

Comparison Blog - https://www.cylynx.io/blog/a-comparison-of-javascript-graph-network-visualisation-libraries/

Based on this blog concluded that D3 is the best version of graph representation and there are many other libraries like Regraph and KeyLine

Neo4j UI building - https://cambridgeintel.medium.com/how-to-build-a-simple-data-visualization-web-app-with-neo4j-b8e172cab612

Conclusion of this blog is that neo4j uses the Regraph and KeyLine by cambridge intelligence which has all the functions in neo4j web. Regraph is used for react and keyline is for javascript.

Problem : But both version are paid so this option is ruled out

ReGraph website- ReGraph - https://cambridge-intelligence.com/regraph/

So based on the 1st blog it was clear that D3 is the best and most popular graphical representation format to be used.

D3 website - https://d3js.org/what-is-d3 Based on the official D3 website it is only supporting the visualization for JavaScript based projects.

https://medium.com/@imranfarooq0306/data-visualization-in-react-with-d3-js-d733cae0dca5 https://blog.logrocket.com/getting-started-d3-js-react/#make-chart-react-d3-js

Based on this blogs it is difficult to add the direct D3 JavaScript in the react app and also tried to add the JavaScript to react and was successful in create the visualization

So implemented the D3 in ORCASK response from the api wising D3 package library D3 npm - d3 - https://www.npmjs.com/package/d3

Problem : But there was a problem due to D3 also manipulate the DOM and react also used DOM manipulation it is difficult to handle the multiply graphical representation

As direct D3 was not a good solution next searched for the wrapper packages of D3

https://docs.google.com/spreadsheets/d/1tq2uyeBLJDOCYT3TftOg3LE2N-QspoFbMyBqBGxwnG4/edit#gid=260715456

Above sheet contains the name and links with some data of different react D3 wrapper pakages

https://www.smashingmagazine.com/2018/02/react-d3-ecosystem/

Found that NIVO, VX and React D3 Graph are the optimal solution available

https://github.com/danielcaldas/react-d3-graph

https://github.com/plouc/nivo

https://github.com/airbnb/visx

Problem: but Nivo and VX only have visualization of data no other options like collapse, drag etc and React D3 Graph has minimum operations

Final Conclusion

Finally believed that the best, optimum and feasible solution is to use ReaGraph which is most likely with all the option required, better documentation and similar to the UI in neo4j browser

https://reagraph.dev/?path=/docs/docs-intro--docs

reagraph - npm (npmjs.com)

reaviz/reagraph: 🕸 WebGL Graph Visualizations for React. Maintained by @goodcodeus. (github.com)

[kamalkrbh]

Sigma JS might also be a good option. Worth Trying.

[vivek-metricdust]

Tested the sample intigration using sigmajs

was successful in creating the graph in ORCAsk UI

Attaching some documents for future reference.

example and code for sigma.js - https://www.sigmajs.org/storybook/?path=/story/cluster-label--story

to manage the node edge property - https://graphology.github.io/ this package is required by sigma.js