Data Browser App - Features & Capabilities Report

Template Version: 1.0.0 Generated: 2026-01-22 Package: @epicdm/flowstate-app-data-browser App ID: data-browser

Table of Contents

1. Overview
2. App Identity
3. Feature Categories
4. Capabilities
5. Data Models
6. User Workflows
7. Integration Points
8. Commands & Keybindings
9. Architecture Summary

Overview

Purpose

The Data Browser App is a developer tool for browsing, querying, and managing RxDB database collections. It provides a Parse Dashboard-inspired interface for viewing collection contents, performing advanced queries with filters, inline editing of documents, and full CRUD operations through schema-aware forms.

Target Users

Value Proposition

• Parse Dashboard Experience: Familiar filter UI for querying collections
• Dual Connection Modes: Local database or REST API access
• Schema-Aware Editing: Forms auto-generated from collection schemas
• Inline Cell Editing: Quick edits without opening modals
• Batch Operations: Select and operate on multiple documents
• Type-Aware Controls: Automatic enum dropdowns and boolean switches

App Identity

Entry Points

Feature Categories

Category 1: Collection Browsing

Core collection viewing and navigation

Feature: Collection Selector Sidebar

Description: Sidebar listing all available RxDB collections with active state highlighting. Collections are loaded from the connected database or schema definitions.

User Story: As a developer, I want to browse available collections so that I can inspect the data I need.

Acceptance Criteria:

• [x] Display list of all collections
• [x] Highlight currently selected collection
• [x] Show loading state while fetching
• [x] Handle empty collection list gracefully
• [x] Reset filters when switching collections

Implementation:

Routes:

• /collections - Collection browser

Feature: Data Table Display

Description: TanStack Table-powered data grid displaying collection documents with sortable columns, pagination, and row selection for batch operations.

User Story: As a developer, I want to view collection data in a table so that I can quickly scan and analyze records.

Acceptance Criteria:

• [x] Auto-generate columns from data and schema
• [x] Sortable column headers
• [x] Sticky header with horizontal scrolling
• [x] Row selection checkboxes
• [x] Pagination controls
• [x] Configurable page size (10, 25, 50, 100, 250, 500)
• [x] Empty state handling

Implementation:

Category 2: Filtering & Querying

Advanced data filtering capabilities

Feature: Filter Bar

Description: Parse Dashboard-style filter interface allowing multiple filter conditions with field selection, operators, and values. Supports enum dropdowns for fields with defined values.

User Story: As a developer, I want to filter data with complex conditions so that I can find specific records quickly.

Acceptance Criteria:

• [x] Add multiple filter conditions
• [x] Field selector with nested field support
• [x] Multiple operators (equals, contains, greater than, etc.)
• [x] Enum dropdown for fields with defined values
• [x] Clear individual filters or all at once
• [x] Reset pagination on filter change

Implementation:

Supported Operators:

Category 3: Inline Editing

Direct document modification in the table

Feature: Editable Cells

Description: Click-to-edit functionality for table cells with automatic type detection, enum dropdowns, boolean toggles, and keyboard shortcuts for saving/canceling.

User Story: As a developer, I want to edit values directly in the table so that I can make quick fixes without opening forms.

Acceptance Criteria:

• [x] Click to enter edit mode
• [x] Type-appropriate input controls
• [x] Enum fields show dropdown selector
• [x] Boolean fields show toggle switch
• [x] Enter to save, Escape to cancel
• [x] Visual feedback during save
• [x] System fields (id, createdAt, etc.) are read-only

Implementation:

Feature: Content Modal

Description: Modal dialog for viewing full content of large text fields or complex object/array values that cannot be displayed inline.

User Story: As a developer, I want to view full content of large fields so that I can inspect complex data.

Acceptance Criteria:

• [x] Expand icon on truncated content
• [x] Modal shows formatted JSON for objects
• [x] Modal shows full text for strings
• [x] Scrollable content area

Implementation:

Category 4: Document Management

Create, update, and delete operations

Feature: Document Form Modal

Description: Schema-driven form for creating and editing documents using react-jsonschema-form. Automatically generates form fields from collection schemas with appropriate widgets.

User Story: As a developer, I want to create documents through a form so that I can add valid data to collections.

Acceptance Criteria:

• [x] Auto-generate form from collection schema
• [x] Custom widgets for text, textarea, select, checkbox
• [x] Collection reference fields show related documents
• [x] Tag array fields with add/remove functionality
• [x] System fields auto-populated (id, timestamps)
• [x] Validation based on schema
• [x] Create and edit modes

Implementation:

Feature: Document Deletion

Description: Single and batch document deletion with confirmation dialogs. Selected documents show in a floating toolbar with delete action.

User Story: As a developer, I want to delete documents so that I can clean up test data.

Acceptance Criteria:

• [x] Delete button on each row
• [x] Confirmation dialog before delete
• [x] Row selection for batch operations
• [x] Floating toolbar shows selection count
• [x] Batch delete with single confirmation
• [x] Clear selection after delete

Implementation:

Category 5: Connection Management

Database connection configuration

Feature: Connection Mode Toggle

Description: Toggle between local database mode (direct RxDB access with replication) and REST API mode (remote server connection) from the navbar.

User Story: As a developer, I want to switch between local and remote databases so that I can work with different data sources.

Acceptance Criteria:

• [x] Mode toggle in navbar
• [x] Local mode uses app framework database
• [x] REST mode uses configured server
• [x] Visual indicator of current mode
• [x] Error handling for unavailable modes

Implementation:

Feature: Server Management

Description: Server configuration page for managing RxDB server connections. Supports multiple servers with one active at a time.

User Story: As a developer, I want to manage server configurations so that I can connect to different RxDB instances.

Acceptance Criteria:

• [x] Add new server configuration
• [x] Edit existing server settings
• [x] Delete server configurations
• [x] Set active server (star icon)
• [x] Display server details in table
• [x] Validation of server configuration

Implementation:

Routes:

• /servers - Server management

Capabilities

Core Capabilities

Technical Capabilities

Integration Capabilities

Data Models

Service Types

Server Configuration

ServerConfig
├── id: string
├── name: string
├── url: string
├── token: string
├── domainId: string
├── userId: string
├── orgId: string
└── isActive: boolean

Query Options

QueryOptions
├── selector?: Record<string, any>    # RxDB query selector
├── limit?: number                    # Max results
├── skip?: number                     # Offset for pagination
└── sort?: Array<{field: direction}>  # Sort criteria

Key Data Flows

User Action --> Component --> Hook --> Service --> Database/API
                                  |
                                  +--> Local (RxDB)
                                  |
                                  +--> REST (HTTP)

User Workflows

Workflow 1: Browse and Filter Data

Find specific records in a collection

Trigger: Navigate to Collections page

Steps:

Success Outcome: Matching records displayed in table Failure Handling: Error message if query fails

Workflow 2: Edit Document Inline

Quick edit a field value

Trigger: Click on editable cell

Steps:

Success Outcome: Document updated, change visible Failure Handling: Error shown, original value restored

Workflow 3: Create New Document

Add a record to a collection

Trigger: Click "Add New" button

Steps:

Success Outcome: New document in collection Failure Handling: Validation errors displayed

Workflow 4: Configure REST Server

Set up remote database connection

Trigger: Navigate to Servers page

Steps:

Success Outcome: Connected to remote server Failure Handling: Connection error displayed

Integration Points

Internal Integrations

External Integrations

Commands & Keybindings

Registered Commands

Keybindings

Architecture Summary

Directory Structure

src/
├── components/           # UI components
│   ├── ui/              # Base UI components (button, input, dialog)
│   ├── DataTable.tsx    # Main data table with editing
│   ├── FilterBar.tsx    # Filter builder UI
│   ├── DocumentFormModal.tsx  # Schema-driven form
│   └── Navbar.tsx       # App navigation
├── contexts/            # React contexts
│   └── DataBrowserModeContext.tsx  # Connection mode state
├── hooks/               # Custom React hooks
│   └── useRxDB.ts       # Database hooks
├── lib/                 # Utility libraries
│   ├── utils.ts         # General utilities
│   └── cellEditors.ts   # Cell editor utilities
├── pages/               # Page components
│   ├── CollectionsPage.tsx  # Main collection browser
│   └── ServersPage.tsx      # Server management
├── services/            # Business logic services
│   └── rxdb.ts          # RxDB service classes
├── types.ts             # TypeScript definitions
├── plugin.ts            # FlowState plugin registration
├── App.tsx              # Main app with routing
├── DataBrowserApp.tsx   # App wrapper
├── index.ts             # Package exports
└── standalone.tsx       # Standalone entry

Key Architectural Patterns

Services Overview

Hooks Overview

Appendix

Related Documentation

Version History