Component relationships
Component and host responsibilities
Functional React components and hooks consume a stable, injected data-source object. The host supplies loadSchema and optionally loadTablePreview, applying its own authentication, authorization, database access and caching. onTableSelect reports the selected table directly to the host.
The package has no listener or cross-frame message protocol. Host CSS variables inherit through the DOM. Liam ERD provides the diagramming foundation; Atlas adapts it into an embeddable explorer with typed metadata and row inspection.
Validated data contracts
Valibot schemas validate incoming schema and row-preview values. Schema metadata preserves table/column names, types, comments, indexes and supported constraints. An optional baseline can accompany the current schema for the renderer’s difference mode.
The default HTTP adapter reads schema metadata and a selected table preview from two same-origin routes. Preview requests carry table name, filters, offset and limit; response columns determine display order and values must be JSON-safe. The host applies filtering before pagination and scopes access.
Selection, pagination and cancellation
Selecting a table replaces the preview component. Debounced filters reset the offset; page-size changes do the same. Every request receives an AbortSignal, and aborted results are ignored so an earlier table/filter response cannot overwrite current state.
Only selected rows are requested. Row loading, empty results and errors have explicit states. Schema focus refreshes preserve the selection when that table still exists; an invalid or removed selection falls back to an available table.
Read-only integration and attribution
Atlas visualizes metadata and records; database reads and permissions remain the host’s responsibility. The reference data-source contract defines stable substring filters, bounded pages and structured errors. The captures and interactive example use wholly fictional schemas and records.
Database Atlas is a snapshot-and-own adaptation of Liam ERD under Apache-2.0. The adaptation’s work is the component boundary, host data contract, validated row previews, request concurrency and inherited theming.