CirroDash - Neo4j Dashboard SPA

A single-page application dashboard for visualizing Neo4j database queries with customizable cards and multiple tabs.

Features

• Connection Management: Secure login with configurable Neo4j connection details
• Multiple Visualizations:
  • Table view for tabular data
  • Count view for numeric metrics
• Multi-tab Dashboard: Organize cards across different tabs
• Card Management: Add, edit, delete, and refresh query cards
• Auto-refresh: Configure cards to automatically refresh at intervals
• Local Storage: Dashboard configuration persists locally

Prerequisites

• Node.js 24+ and npm
• A running Neo4j database instance

How to Build

When cirro-dash is built, the web assets in web/dist are embedded into the binary but the frontend needs to be built first.

Frontend (Web)

# Navigate to web directory
cd web

# Build the web application
npm run build

# The built files will be in web/dist/

Backend (Rust)

# Build the Rust backend (from project root)
cargo build --release

# The binary will be located at target/release/cirro-dash

Complete Build Process

# 1. Build the frontend
cd web
npm run build
cd ..

# 2. Build the backend
cargo build --release

# 3. Run the production binary
./target/release/cirro-dash

How to Develop

This requires three separate terminals for best workflow:

# Hot reloading for Rust
cargo watch -x run

# Vite server (runs on port 5173)
npm run dev

# npm build watch for Rust binary
npm run build -- --watch

This allows for quick frontend development on http://localhost:5173. The Rust API server will run on port 3000.

Usage

1. Connect to Neo4j

On the login screen, enter your Neo4j connection details:

• Scheme: neo4j, neo4j+s, bolt, or bolt+s
• Server: Your Neo4j server address (e.g., localhost)
• Port: Neo4j port (default: 7687)
• Username: Your Neo4j username
• Password: Your Neo4j password

2. Create Tabs

• Click the "+" button in the tab bar to add new tabs
• Click the pencil icon to rename tabs
• Click the X icon to delete tabs (requires at least one tab)

3. Add Cards

• Click the "Add Card" button (bottom right)
• Configure your card:
  • Title: Display name for the card
  • Type: Table or Count
  • Query: Your Cypher query
  • Auto-refresh: Optional interval in seconds
• Click "Test Query" to validate before saving

4. Manage Cards

• Click refresh icon to manually update card data
• Click pencil icon to edit card configuration
• Click trash icon to delete card

Card Types

Table Card

Displays query results in a sortable, paginated table. Best for:

• Row-based data
• Multiple columns
• Data analysis

Count Card

Shows a single large number. Best for:

• Aggregation queries (COUNT, SUM, etc.)
• KPIs and metrics
• Quick statistics

Example Queries

Table View

MATCH (n:Person)
RETURN n.name AS Name, n.age AS Age
LIMIT 25

Count View

MATCH (n:Person)
RETURN COUNT(n) AS total

Security Notes

• Connection credentials are stored in memory only (not localStorage)
• Disconnect to clear credentials
• Use secure connections (neo4j+s, bolt+s) for production
• Dashboard configuration is saved to localStorage (queries only, no credentials)