mirror of
https://github.com/supabase/supabase.git
synced 2026-06-10 04:26:19 +08:00
## Problem When you have many tables, it's hard to follow the relations between them in the Schema Visualiser ## Solution When selecting an edge (the line between tables), highlight it along with the related tables and columns to make it easier. Also, if there is enough space, display a popover showing the relation details ## Screencasts https://github.com/user-attachments/assets/11d35fa7-3674-4f13-b77f-8ebe25c66b04
27 lines
832 B
TypeScript
27 lines
832 B
TypeScript
import { Edge } from '@xyflow/react'
|
|
import { createContext, useContext, type ReactNode } from 'react'
|
|
|
|
export type SchemaGraphContextType = {
|
|
isDownloading: boolean
|
|
selectedEdge: Edge | undefined
|
|
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
|
|
}
|