search

BOCOVO / db-schema-visualizer

A Visual Studio Code extension to visualize database schemas as Entity Relationship Diagrams (ERD) from DBML or Prisma files directly within the editor.
MIT License
48 stars 6 forks source link

Ability to collapse/expand table to simplify the visualization #49

Closed tv-long closed 2 months ago

tv-long commented 3 months ago

Hi @BOCOVO

At present, we use DBML to document our Star-Schema model for communication between Data Engineers, Data Analytics and Business Owners. Therefore, our table usually contains many columns (up-to 100) and the table height is really high (cannot fit into the screen in a readable scale). So, it would be nice if we can collapse/expand the table definition in the visualization to improve the overview capacity (keep visualizing table and reference columns - or just the table)

Features:

BOCOVO commented 3 months ago

Hi @tv-long

Thank you for bringing up this issue and for your detailed explanation. You are absolutely right; with tables containing up to 100 columns, readability becomes a significant challenge.

I understand the proposed solution and think it will make visualization more user-friendly.

Your input is invaluable, and I would greatly appreciate any contribution you can make to implement this feature. If you have any ideas or want to start working on this, please let me know or submit a pull request.

tv-long commented 3 months ago

Hi @BOCOVO I just realize that dbdiagram.io provide it as a premium feature. There is an option in toolbar whether you can visualize only table name, or columns which have relationships or full of details.

I will take some time to work on this.

BOCOVO commented 3 months ago

Hi @tv-long !

I just realize that dbdiagram.io provide it as a premium feature.

Yes, I saw something similar in their demo.

Here is another tool with the similar feature https://azimutt.app/gallery/e-commerce

I will take some time to work on this.

That is great news. Let me know if I can help.

BOCOVO commented 2 months ago

Hey @tv-long !

I merged your PR #52 and released too. The feature is then available in the version 0.3.0 🔥 . Thank you for your contribution 🙏 .

Do you have another feature in mind ?

tv-long commented 2 months ago

Hi @BOCOVO There're 2 things I have in mind right now. 1. Persist stored information in the file instead of Local Storage

Why? We used DBML as single source of truth. Therefore, we want everyone always has a same view including table locations, level of detail, initialized view (optional). They should also be committed as part of the files.

2. Use ReactFlow (https://reactflow.dev/) for visualization Why? It's easier to manage the flow, scale and integrated with auto layout API.

How do you think?

BOCOVO commented 2 months ago

Hi @tv-long ! Thank you for these ideas.

I've already heard of the first Persistence of information stored in the file from a problem on the project.

Here is how I see the feature The user can have the ability to save or not information in a file. That mean we'll keep saving information in the local storage if the user not opt for the file option. This configuration can be defined globally from the plugin configs or locally for a workspace. By default, I suggest using the local storage. I think that we don't need to save the scene position and zoom. But there are other questions I have :

For using React Flow you are right. I heard about it late, otherwise I was going to use it, but that didn't stop me from stealing 😆 some of its source code (the lines that link the columns are made in part). We'll make this refactor over time. I think I'll take care of it.

Let me know how you see the feature. Also do you think you can help on the saving information in a file ?