feat(devtool): add the RxDB database viewer plugin - #8940
Open
pubkey wants to merge 5 commits into
Open
Conversation
Implements the database viewer devtool from the design handoff as a framework free plugin that renders against a running RxDatabase. Chrome and navigation: - 44px top bar with database identity, command palette, refresh and help - 200px left rail with collections, replication status glyphs and tools - content toolbar and Mango query bar scoped to the current collection - connecting, failed and connected screens for a remote peer, plus the read-only banner for a static dump Panels: - table grid with selection, inline cell editing, sorting and paging - JSON view with syntax highlighting and the observe highlight - document drawer that stages edits and previews the exact upsert in a WILL RUN block before Apply - blast-radius confirmation that requires typing the collection name - Live activity map with 60s counters, sparklines, particle lanes, burst bands, instances and live-queries sub panels - Schema panel sampling stored documents against the declared schema - Query lab explaining the used index, examined and discarded counts - Replication panel with per direction state, checkpoint and live feed - Changes panel with a unified diff of every write - Storage panel with tombstone counts and cleanup - stacked read-only layout below 640px The stylesheet and all glyphs ship inside the plugin, there are no external assets and no font files. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018adcs7t6gXavJ9D7hB14KX
Contributor
✅ Verify Test Reproduction: Tests FAILED without the fix (expected)This confirms the changed tests correctly reproduce the bug that the source changes fix. This workflow runs the changed tests without the source fix to verify they reproduce the bug. Show output |
The comment on findBareWord() and the broken-selector testcase both spelled out a misspelled boolean literally, which codespell reports. The testcase now uses another bare word that is equally invalid JSON. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018adcs7t6gXavJ9D7hB14KX
Three fixes found by driving the devtool in a browser against a seeded database. A filled RxJsonSchema sorts its properties alphabetically, so the grid was picking its columns in alphabetical order. On a todos collection that dropped `title` from the grid entirely and gave the wide column to `dueDate`. Column selection moved into pickGridColumns() and now gives the wide column to a string without a maxLength, which is free text, and prefers the required fields for the narrow columns. Added testcases. Schema and Query lab read the collection from the navigation, which is a tool while they are open, so they always analysed the alphabetically first collection instead of the one that was on screen. The store now remembers the last opened collection and both panels use it. The app node of the Live map drew the full location pathname, which pushed the node out of its column on a long url. Only the tail is drawn. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018adcs7t6gXavJ9D7hB14KX
`check-types` compiles the test folder with strict null checks, where Array.find() is possibly undefined. The tauri example fails the same way because its tsc reaches the root test folder too. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018adcs7t6gXavJ9D7hB14KX
Adds a db-viewer component that mounts the devtool over the running example app and tears it down again on close. Building the example surfaced that `rxdb/plugins/devtool` imported its own option and handle types without re-exporting them, so consumers could not type against the plugin entry point. They are re-exported now. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018adcs7t6gXavJ9D7hB14KX
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR contains:
devtoolplugin)Describe the problem you have without this PR
There is no way to look at the data of a running RxDatabase. Debugging means
console.loging query results, and there is nothing that shows which index a query used, what replication actually sent, or what a write changed.This adds
rxdb/plugins/devtool, a database viewer and editor implemented from the design handoff for the RxDB devtool. It is framework free, built with plain DOM, and the stylesheet plus every glyph ship inside the plugin, so there are no external assets and no font files.Chrome and navigation
⌘Kcommand palette, Refresh and help. The RxDB wordmark is dropped on the TanStack surface, and the embedded surface gains drag, dock and fullscreen controls.●running,○idle,▲error,■stopped) and the tools.Panels
upsert()in a WILL RUN block, with the changed lines highlighted, before Apply runs anything.$regexscans and in-memory re-sorts.How the data is real
Writes come from
database.$. Pull and push come fromreceived$andsent$on the states inREPLICATION_STATE_BY_COLLECTION. Reads and live query re-emits are derived from the query cache (_execOverDatabaseCountand result identity), because RxDB emits no read events; those two counters therefore update once per second, which the docs state. Tombstones are counted below the RxCollection viastorageInstance.count(), since RxQuery filters deleted documents out.Notes for review
mountRxDBDevtool()throws the new error codeDVT1when there is no DOM.RxDatabase.mountDevtool()is added as apluginMissingstub, matchingregisterWebMCP().isLeader()is read behind a try/catch, because it throws when the leader-election plugin is not added. The Instances panel reports leadership as unknown in that case rather than claiming a roster RxDB does not publish.↑ ↓for replication while the Replication and Changes panels colour each direction separately, and RxDB pink stays in the chrome and selection only, never on an edge, glyph or rate.Todos
Verification
npm run lintclean.npx tsc --noEmitclean forsrc/.test/unit/devtool.test.ts: 16 passing, covering the rolling metrics window, selector parsing with caret position, path get/set, cell input parsing, the document diff, the design tokens, and the no-DOM error.Generated by Claude Code