Graph View

[ericallam]

This is a discussion for issue #117, adding a graph view similar to jsoncrack.com. Here's a screenshot:

Let's explore the functionality and design of this possible feature in this discussion.

[ericallam]

Here are some UX challenges we'll need to consider:

• JSON Hero has the concept of a "selected" node, this is something we'll need to support in the Graph View. The Graph View should also work with the Smart Preview right-hand side panel.
• It would be nice if the Graph View supported the same keyboard shortcuts as the Tree View.
• I don't think we'd need the left-hand sidebar that jsoncrack.com has, instead the Graph View should takeover the entire middle section like our other views.
• Can we have a segmented control that allows switching to "data" mode and "schema" mode here? The "data" mode would be similar to jsoncrack.com where the "schema" mode could be like Graph Voyager

[matt-aitken]

There are some good libraries for creating node graphs in React. I know this one is popular: https://github.com/uber/react-digraph

[mmailaender]

I've seen multiple products that use React flow, and it seems quite powerful and easy at the same time. But not used it by myself yet: https://reactflow.dev/
https://github.com/wbkd/react-flow

[Cool-Runningz]

Based on some quick investigating of the package.json it looks like jsoncrack.com uses the reaflow library to assist with building out some of the graphs. In addition, it seems like the react-zoom-pan-pinch package is used to help with maneuvering around the graphical content.