In the documentation we need a page to describe database schemas and they require too much space and lot of text to explain pretty much nothing; basically most elements like id don't need much explaining and people can usually tell relatively quickly what each table does, plus you can't just omit parts you don't think are important from the docs and the text based descriptions do nothing to visualize the relations between tables. Thus, we need to add a canvas that displays an interactive box like this:
To implement this we need to create a Prop (<SchemaCanvas />) that takes as an input a json object that would look something like so:
{
domain: "collection_name",
tables: [
{
name: "user",
columns: [
{ collumn_id: "id", type: "pk", label: "INT", references: "" description: "Some text to appear on hover"},
[...]
]
}
]
}
If we want the references to follow this format table_name.column_id we would need this regex: `\D[^\s]+[.]+\D[^\s]+`s.
I think it should render an image with a maximize button or something equivalent to enable the functionality, once the user clicks that a popup opens with the canvas or we can just replace the image with the interactive element. Ideally, the user should be able to move inside the canvas with the mouse (or his fingers for mobile), zoom in and out and the canvas should have a maximum area.
I found this project (konva) that seems to be made exactly for what we want it. It has a tutorials page from which I skimmed and found connected object which is seems to be useful for connecting the pk and fk columns in the db, Zooming Relative to Pointer which can help with zooming functionality and Gestures that does something similar on mobile events. Generally, this seems like the appropriate library but if y'all find a better one go with that one.
If you have anything to add, ask of want to be assigned to this, just comment!
In the documentation we need a page to describe database schemas and they require too much space and lot of text to explain pretty much nothing; basically most elements like
iddon't need much explaining and people can usually tell relatively quickly what each table does, plus you can't just omit parts you don't think are important from the docs and the text based descriptions do nothing to visualize the relations between tables. Thus, we need to add a canvas that displays an interactive box like this:To implement this we need to create a Prop (
<SchemaCanvas />) that takes as an input ajsonobject that would look something like so:If we want the references to follow this format
table_name.column_idwe would need this regex:`\D[^\s]+[.]+\D[^\s]+`s.I think it should render an image with a maximize button or something equivalent to enable the functionality, once the user clicks that a popup opens with the canvas or we can just replace the image with the interactive element. Ideally, the user should be able to move inside the canvas with the mouse (or his fingers for mobile), zoom in and out and the canvas should have a maximum area.
I found this project (konva) that seems to be made exactly for what we want it. It has a tutorials page from which I skimmed and found connected object which is seems to be useful for connecting the pk and fk columns in the db, Zooming Relative to Pointer which can help with zooming functionality and Gestures that does something similar on mobile events. Generally, this seems like the appropriate library but if y'all find a better one go with that one.
If you have anything to add, ask of want to be assigned to this, just comment!