SchemaVisualizer() — supabase Function Reference

Architecture documentation for the SchemaVisualizer() function in index.tsx from the supabase codebase.

Function tsx ContentManagement Migrations calls 1

Entity Profile

ContentManagement→ Migrations→ SchemaVisualizer() — supabase Function Reference

Dependency Diagram

graph TD
  9f291a05_a746_0ee5_2567_d9454cd807ec["SchemaVisualizer()"]
  c873669a_f88c_bb16_2076_ffa1fc0fc1a7["getGraphDataFromTables()"]
  9f291a05_a746_0ee5_2567_d9454cd807ec -->|calls| c873669a_f88c_bb16_2076_ffa1fc0fc1a7
  style 9f291a05_a746_0ee5_2567_d9454cd807ec fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/SchemaVisualizer/index.tsx lines 49–141

export const SchemaVisualizer = ({ sqlStatements, className }: SchemaVisualizerProps) => {
  const [nodes, setNodes] = useState<Node<TableNodeData>[]>([])
  const [edges, setEdges] = useState<Edge[]>([])
  const db = useRef<PGlite>()
  const executedStatements = useRef<Set<string>>(new Set())

  // Initialize database once
  useEffect(() => {
    db.current = new PGlite()

    // Execute initial auth schema setup
    db.current.exec(AUTH_SCHEMA_SQL)
  }, [])

  // Execute new SQL statements and update schema
  useEffect(() => {
    const updateSchema = async () => {
      if (!db.current) return

      // Reset if statements is empty
      if (sqlStatements.length === 0) {
        setNodes([])
        setEdges([])
        if (executedStatements.current.size) {
          executedStatements.current.clear()
          // Reset database
          db.current = new PGlite()
          // Re-run initial auth schema setup
          db.current.exec(AUTH_SCHEMA_SQL)
        }
        return
      }

      // Execute only new statements
      const newStatements = sqlStatements.filter((sql) => !executedStatements.current.has(sql))

      if (newStatements.length === 0) return

      try {
        for (const sql of newStatements) {
          await db.current.exec(sql)
          executedStatements.current.add(sql)
        }

        const pgMeta = new PostgresMetaBase({
          query: async (sql: string) => {
            try {
              const res = await db.current?.query(sql)
              if (!res) throw new Error('No response from database')
              return wrapResult<any[]>(res.rows)
            } catch (error) {
              console.error('Query failed:', error)
              return wrapError(error, sql)
            }
          },
          end: async () => {},
        })

        const { data: tables, error } = await pgMeta.tables.list({
          includedSchemas: ['public'],
          includeColumns: true,
        })

        if (error) {
          console.error('Failed to get tables:', error)
          return
        }

        if (tables) {
          const { nodes, edges } = await getGraphDataFromTables(
            'onboarding',
            { id: 1, name: 'public', owner: 'admin' },
            tables
          )
          setNodes(nodes)
          setEdges(edges)
        }
      } catch (error) {
        console.error('Failed to execute SQL:', error)
      }
    }

    updateSchema()
  }, [sqlStatements])

  return (
    <div className={className}>
      <ReactFlowProvider>
        <SchemaFlow nodes={nodes} edges={edges} />
      </ReactFlowProvider>
    </div>
  )
}