Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Add Schema Visualizer to Supabase Studio #15739

Merged
merged 4 commits into from
Jul 27, 2023
Merged

feat: Add Schema Visualizer to Supabase Studio #15739

merged 4 commits into from
Jul 27, 2023

Conversation

kamilogorek
Copy link
Member

@kamilogorek kamilogorek commented Jul 12, 2023 •
edited
Loading

What kind of change does this PR introduce?

This PR introduces a new sub-page called Schemas to the Database page.
It visualizes the selected schema (public by default) as an interactive graph.

What is the new behavior?

image

Additional context

There are some improvements and features that can be added (and better styling!), but for the rest of the community to jump in, the main functionality has to be in place.

Would appreciate some other folks testing it out locally, as due to its generative nature, the graph might be rendered in a funky way in case someone has a very complex schema in place.

Please note that I'm gone until Monday 17th starting tomorrow, so won't be able to respond to the feedback or help with setting things up till then.

Possible improvements

  • better styling overall
  • adding indicators
    • primary key (right now its just a colored border)
    • foreign key
    • is nullable
    • is identity
    • unique
  • show truncated column names on hover (right now it shows as a native title attribute but would be nice to make it instant as a "floating" label
  • a more complex addition would be to render a foreign table as a full node (although not sure if it's a good idea tbh, maybe just upgrade that node to be shown as a 3-line node with schema/table/column rows column type and same indicators as above
  • adding component with matching styles - https://reactflow.dev/docs/api/plugin-components/controls/; I had it in the initial implementation but didn't find it that useful tbh, but maybe with just a custom "force layout" button and "center" it might be actually helpful, it'd have to be a design UX decision

Closes #15585

@kamilogorek kamilogorek requested a review from a team as a code owner July 12, 2023 17:46
@vercel
Copy link

vercel bot commented Jul 12, 2023

@kamilogorek is attempting to deploy a commit to the Supabase Team on Vercel.

A member of the Team first needs to authorize it.

@kamilogorek kamilogorek mentioned this pull request Jul 12, 2023
Closed
@adiologydev
Copy link
Contributor

Hey Kamil, I made a PR to add legends for constraints but require some help to gather additional data.
#15585 (comment)

@vercel
Copy link

vercel bot commented Jul 20, 2023 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 27, 2023 3:59am
studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 27, 2023 3:59am
studio-self-hosted ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 27, 2023 3:59am
studio-staging ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 27, 2023 3:59am
supabase-studio-prod ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 27, 2023 3:59am
supabase-studio-staging ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 27, 2023 3:59am
zone-www-dot-com ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 27, 2023 3:59am

joshenlim
joshenlim reviewed Jul 20, 2023
View reviewed changes
studio/components/interfaces/Database/Schemas/SchemaGraph.tsx Outdated
hideAttribution: true,
}}
>
<Background id="1" gap={10} color="#262626" variant={BackgroundVariant.Lines} />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i might be selecting the wrong line here but on light mode the grid lines against the background are standing out too much - could we use a lighter color? (and if possible using our tailwind classes for this?)

image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated. Unfortunately, we cannot use tailwind here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we could set up some tailwind custom classes to deal with some of this if we need to.
but probably no need if we just import a css file onto the NextJs page.

@joshenlim
Copy link
Member

This is amazing btw! great stuff @kamilogorek 🙏

@kamilogorek
Copy link
Member Author

kamilogorek commented Jul 21, 2023 •
edited
Loading

Thanks for the review @joshenlim! Will follow-up on the changes on weekend :)

@kamilogorek
Copy link
Member Author

Added:

  • Updated styles for light mode
  • Cap maxZoom to 1.5 for better presentation and zooming experience
  • Add floating label for truncated column names

I now consider it a good, shippable MVP, which everyone can iterate over.

@joshenlim
Copy link
Member

hey @kamilogorek all looks good now :) would you mind resolving the conflict on package-lock? be sure to update your branch with what we have currently on master and that you're on node 18 🙏

@kamilogorek
Copy link
Member Author

kamilogorek commented Jul 26, 2023 •
edited
Loading

@joshenlim done, rebased, and resolved.

Please keep in mind that there's a ReactFlow attribution now, before moving to Pro version - https://github.com/supabase/supabase/pull/15739/files#diff-f5b900e6c6e71b1d7299c3c595ddce3af30bcaf6c520700a628ff3e0ccb550e0R311-R315

@adiologydev
Copy link
Contributor

Amazing work @kamilogorek.
@joshenlim I'll start working on the constraint legends as soon as this PR has merged.

@joshenlim
Copy link
Member

just a heads up - i noticed a tiny bug whereby hovering your cursor on the column hides the column type, not sure if thats intentional?
image

but we can fix this later on - i'm planning to get this in today :) Also just FYI i'm adding a feature flag to this page, so if you're developing locally on this just feel free to remove it first, then add it back in before submitting future PRs :)

@joshenlim
Copy link
Member

joshenlim commented Jul 27, 2023 •
edited
Loading

gotcha on the attribution as well @kamilogorek! Supabase is now sponsoring react-flow 😄
image

@joshenlim joshenlim merged commit f4479ea into supabase:master Jul 27, 2023
7 checks passed
@kamilogorek
Copy link
Member Author

i noticed a tiny bug whereby hovering your cursor on the column hides the column type, not sure if thats intentional?

Yes, that was intentional to make more room for truncated column names, but maybe there's more elegant solution :)

Lovely, thanks for the review and for taking care of the integration!

@adiologydev adiologydev mentioned this pull request Jul 28, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MildTomato MildTomato MildTomato left review comments

@joshenlim joshenlim joshenlim approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Schema visualizer
4 participants
@kamilogorek @adiologydev @joshenlim @MildTomato