Files
supabase/apps/studio/components/interfaces/Database/Schemas/SchemaGraphContext.tsx
Gildas Garcia 06190d15b9 Gildasgarcia/fe 2426 show relationship line context and highlight on hover (#44023)
## 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
2026-03-23 17:41:50 +01:00

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
}