[MetaMaps] Update MetaMaps to use VisJS

[META-DREAMER]

The UX of MetaMaps isn't ideal right now:

• Lines are static and cannot be moved with the objects
• squares and circles don't have any text / labels, hard to know what they are for
• can't pan or zoom the graph
• Not mobile/touch friendly

It would be advantageous for us to leverage existing libraries instead of trying to implement all these complicated interactions on our own. Can have something much more battle tested and sophisticated that way.

Top contender is VisJS. There's a React wrapper available here.

VisJS has an easy way to serialize the graph to JSON, which will make it easy to save / load: https://visjs.github.io/vis-network/examples/network/other/saveAndLoad.html

Example on how to add / edit nodes and edges with labels: https://visjs.github.io/vis-network/examples/network/other/manipulationEditEdgeNoDrag.html

Example showing interactions like having a popup on hover: https://visjs.github.io/vis-network/examples/network/events/interactionEvents.html

Overall, there's lots of fun stuff we can do with this, but for the scope of the issue, lets aim to have a working MVP with:

• data loading / saving from 3Box
• adding nodes / edges with labels
• Ability to edit / delete nodes / edges
• Lightly styled with the MetaGame theme
• Ability to add a URL and/or image to nodes
• Standard UX best practives, e.g. highlight on hover / select, etc. Should be built in since it works like that in examples

We can start with just one type of shape for now (rounded rectangle).

I imagine this will also be useful for things like the skill tree, where we can use the hierarchal layouts shown here: https://visjs.github.io/vis-network/examples/network/layout/hierarchicalLayout.html

[dysbulic]

Systems to examine for inspiration include:

• eth.build
• Tableau Prep + Tableau Desktop
• GraphQL Voyager
• Miro

[IxaBrjnko]

GraphQL Voyager came with a really easy to implement schema query, and may be a good source to excavate that portion of the model onboarding process needed in the full rendering of a integrated metamap with more than one datasource...

I think we could include in this scope the addition of multiple datasources: at a minimum I would like to see the hasura from our main TheGame repo and that of the MetaGame's XP/SourceCred instance as well, as these are parts we will need to construct a metamap of MetaVille <3

[dysbulic]

MetaMaps has been removed from active development.