feat: add visible ER diagram entry button to database toolbar#119
Open
Blankll wants to merge 15 commits into
Open
feat: add visible ER diagram entry button to database toolbar#119Blankll wants to merge 15 commits into
Blankll wants to merge 15 commits into
Conversation
Add a visible ER diagram button next to the refresh button in the database selector toolbar. Previously users could only access the ER diagram via right-click context menu on a table in the schema tree. Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
Handle showErDiagram action in handleDatabaseAction to call tabStore.openErDiagramTab with the active connection, selected database, and schema. Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
Remove standalone toolbar button, add 'ER Diagram' item to the database actions dropdown menu instead. This keeps the toolbar clean and groups all database-level actions together. Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
When opening ER diagram from database toolbar, omit the schema parameter so all tables across all schemas are displayed instead of only the currently selected schema. Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
… replace emoji icons - Zoom: use proportional scaling based on deltaY for better trackpad precision - Toolbar: add zoom in (+) and zoom out (-) buttons with step factor 1.3x - Schema: add schema selector dropdown before filter input, default 'All Schemas' - Icons: replace 🔑🔗• emoji with clean inline SVG icons (key, link, circle) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
Schema selector was not showing because available schemas may not be populated in the store yet. Add fallback to call databaseStore.fetchSchemas when cache is empty. Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
- Replace empty string '' with '__all__' for the 'all schemas' option to avoid Radix Vue Select issues - Reorder zoom controls to: zoom out → zoom in → percentage (matching user expectation) - Add z-[100] to SelectContent to ensure dropdown renders above other elements - Add schemaParam computed to map '__all__' → null for API calls Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
Use invoke('list_schemas', ...) directly to avoid any Pinia store reactivity issues when the store hasn't cached schemas for the current database yet.
Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
…eral Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
…ssues - Click: remove opacity dimming on non-selected tables, just highlight selected + connected table cards - Drag: add mouse-drag to reposition table nodes on the canvas - Expand button: add whitespace-nowrap and increase button height to prevent truncation - Nullable indicator: remove confusing circle icon (NOT NULL is the default assumption) - Edge dimming: remove opacity reduction on non-highlighted edges Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
… badges - Orthogonal path routing: relationship lines now route around table cards with collision avoidance, replacing straight dagre edges - Ctrl/Meta+Wheel zoom: zoom now requires ctrl/meta modifier, centered on mouse position. Plain wheel scrolls vertically - Focus mode: clicking a table filters the view to only show the selected table and its directly related tables (via FK) - Info badges: toolbar shows table count and relationship count badges - Column marker alignment: non-PK/FK columns now get an empty spacer to keep all column text aligned - Gesture support: added gesturestart/gesturechange handlers for trackpad pinch-to-zoom Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
…verflow - Drag: use dragDelta offset ref instead of updating nodePositions on every mousemove. Node positions and edge routes only update on drop. Eliminates shaking and position drift. - SVG: add overflow=visible to prevent table clipping outside viewport during drag/pan - Tooltips: add titles to tables badge, relationships badge, and layout direction button Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
…uto-size, header drag - Pure HTML rendering: replaced SVG+foreignObject with HTML div cards in an overflow:auto viewport with CSS scale zoom. SVG overlay used only for relationship lines (pointer-events:none) - Header-only drag: drag now originates only from table header (cursor:grab). Uses delta-offset pattern, commits position on drop only - Engineering mode: new entity-relationship view with rounded entities and column pills. Toggle via segmented control in toolbar - Canvas auto-sizing: canvas dimensions computed from bounding box of all positioned tables. fitToScreen centers content - Reset Layout: toolbar button restores dagre auto-layout positions - View mode toggle: table view / engineering view switch preserving all interactions - Native scroll pan: viewport uses overflow:auto, pan is native browser scroll. Ctrl+wheel zoom centered on mouse - Extracted pure modules: types.ts, graph-routing.ts, graph-layout.ts with Jest TDD (32 new tests) - TableCard.vue and EngineeringEntity.vue: presentational components with matching prop/emit interfaces - All existing features preserved: schema selector, search, info badges, focus mode, layout direction, expand/collapse, orthogonal routing, large schema warning Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
Add right-click drag panning: hold right button on blank canvas area and drag to scroll the viewport. Prevents browser context menu during drag. Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a visible ER Diagram button to the database selector toolbar in the Queries page, so users can open the ER diagram view with one click instead of hunting through the right-click context menu on a table.
Changes
Commit 1:
feat(sidebar): add ER diagram button to database toolbarshowErDiagramtoActionKindtype inDatabaseSelectorRow.vuei-carbon-data-vis-3icon) between the database selector and refresh buttonsidebar.database.erDiagramTooltip(enUS + zhCN)Commit 2:
feat(queries): wire ER diagram button to openErDiagramTabshowErDiagramhandler inQueriesPage.handleDatabaseActiontabStore.openErDiagramTab(connId, db, schema)— same path as the existing context menu entryCommit 3:
chore: bump data-studio-agent to v0.1.4Before vs After
![ER diagram button location: next to refresh button, left of the more-actions dropdown]