Knowledge Graph

Challenge

• Create a component to be easily consumed by different products with similar needs.
• Graph should have legends and should togllable.
• Must provide extensibility to add custom logic for visibility of nodes.
• Must have undo,redo feature.
• Must provide ways to expand the graph by adding additional nodes.
• This component was already written in Angular that we were migrating to React.

Solution

• Used established visjs that was previously in Angular app for network rendering.
• I re-structured the data in react way and exposed several methods to manipulate the graph like,
  • Reset graph
  • Re-render
  • Undo
  • Redo
  • Clear history etc.

Result

• I was able to deliver the component and make it available through the ui library.
• Later team was able to make all the product specific features using the component, with minor changes in the library.