mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 18:35:07 +03:00
Gildas Garcia
db14762aa6
## Problem - The schema visualiser lacks editing capabilities which leads to a lot of navigation (ediing tables, columns) - ReactFlow prevents users from selecting table and column names (to copy them). Diasbling drag and pan on those texts would make moving items cumbersome - Long table and column names are hidden and even hide other elements ## Solution - Add menus for both tables and columns - Truncate long names with ellipsis and add a tooltip - Hide menus when exporting to png/svg [Screen Recording 2026-03-12 at 10.10.08.webm](https://github.com/user-attachments/assets/b2780266-e874-41d1-ac82-7c2c4ba5abf2)
25 lines
762 B
TypeScript
25 lines
762 B
TypeScript
import { createContext, useContext, type ReactNode } from 'react'
|
|
|
|
export type SchemaGraphContextType = {
|
|
isDownloading: boolean
|
|
onEditColumn: (tableId: number, columnId: string) => void
|
|
onEditTable: (tableId: number) => void
|
|
}
|
|
|
|
export const SchemaGraphContext = createContext<SchemaGraphContextType | null>(null)
|
|
|
|
export const SchemaGraphContextProvider = ({
|
|
children,
|
|
value,
|
|
}: {
|
|
children: ReactNode
|
|
value: SchemaGraphContextType
|
|
}) => <SchemaGraphContext.Provider value={value}>{children}</SchemaGraphContext.Provider>
|
|
|
|
export const useSchemaGraphContext = () => {
|
|
const context = useContext(SchemaGraphContext)
|
|
if (!context)
|
|
throw new Error('useSchemaGraphContext must be used inside a <SchemaGraphContextProvider>')
|
|
return context
|
|
}
|