Model Visualization Improvements

[aaguiarz]

No description provided.

[PatrickMunsey]

I'm not sure what you have planned for the model visualization improvements but I though I'd add some ideas here.

I use NX to manage my monorepos and it has some really good tooling for visualising the project dependancy graph which could be a good reference for an improved implementation in the playground. Their implementation handles displaying really large graphs nicely.

Current playground displaying a 150 line model can get a bit crowded

Example project graph visualisation using the nx graph

Some feature Ideas:

• Being able to group nodes by type or module similar to nx graph's 'group by folder'
• Hiding and unhiding all type relation nodes or only those related to specific types
• Extracting the graph from the playground and exporting via something like a npm installable react ui component that can easily be dropped into an application to visualise a model or different cli query responses similar to the graph view in the playground e.g.

import {OpenFGAGraph} from 'openfga'
<OpenFGAGraph model=${model} query=${cliQueryResponse} viewType='check'/>

[rhamzeh]

Thanks for sharing @PatrickMunsey

Being able to group nodes by type or module similar to nx graph's 'group by folder'
Hiding and unhiding all type relation nodes or only those related to specific types
Noted - thanks for the example!

Extracting the graph from the playground and exporting via something like a npm installable

We don't currently have an installable react module, not sure if we will - if we do, maybe for something more low level like web components rather than react, however the logic for creating the graph for visjs.org is here and can be coupled with any react component for Vis.js, e.g. react-graph-vis:

https://github.com/openfga/frontend-utils/blob/main/src/utilities/graphs/model-graph.ts