[Feature]: Enhance structured query results UI to match Neo4j Aura Query panel

[arthurfantaci]

Description

Enhance the frontend UI for displaying structured query results (Text2Cypher/Cypher) to provide a richer, more interactive experience similar to the Neo4j Aura "Query" tools panel.

Current State

The current implementation provides:

• Terminal-style query display with copy button
• Basic results table with URL detection
• Row count indicator

Proposed Enhancements

Phase 1: Table View Enhancements (Estimated: 2-3 days)

Feature	Description
Node label badges	Colored pill badges for Neo4j node labels (similar to EntityBadges component)
JSON property formatting	Syntax-colored JSON display for object properties
Row numbers	Left-side row index column
Download export	CSV and JSON export buttons
Status bar	Row count, query timing, fetch limit info
Search/filter	Filter results within the table

Phase 2: View Toggle (Estimated: 2-3 days)

Feature	Description
Table view	Enhanced table (Phase 1)
RAW view	Pretty-printed JSON of full results
View toggle buttons	"Table" / "RAW" toggle in header
Column sorting	Click headers to sort

Phase 3: Graph Visualization (Estimated: 5-10 days)

Feature	Description
Graph view	Force-directed graph visualization
View toggle	Add "Graph" option to toggle
Results overview panel	Node label counts with colored badges
Interactive controls	Zoom, pan, fullscreen, node selection
Layout options	Different graph layout algorithms

Potential libraries:

• react-force-graph - Good React integration
• vis-network - Feature-rich, widely used
• cytoscape.js - Powerful, used by Neo4j Browser
• d3-force - Low-level, maximum control

Technical Considerations

Graph Data Structure

• Current Text2Cypher returns flat tabular results
• Graph visualization may require backend changes to return graph-structured data (nodes + relationships) for certain query types
• Need to detect when graph view is meaningful vs. tabular aggregates

Performance

• Large result sets (1000+ nodes) need virtualization or display limits
• Consider lazy loading for graph rendering

Reference Screenshots

The Neo4j Aura Query panel provides the target UX:

• Table View: Colored node badges, formatted JSON properties, row numbers, search, download
• Graph View: Force-directed visualization, results overview with label counts, interactive controls

Files to Modify

File	Purpose
frontend/src/components/metadata/ResultsTable.jsx	Primary table component
frontend/src/components/metadata/CypherDisplay.jsx	Query display
frontend/src/components/chat/AssistantMessage.jsx	Message orchestration
frontend/src/index.css	Theme/color tokens
New: GraphVisualization.jsx	Graph view component (Phase 3)

Acceptance Criteria

Phase 1

• Node labels displayed as colored badges
• Object properties formatted with syntax highlighting
• Row numbers visible
• Download as CSV/JSON functional
• Status bar shows row count

Phase 2

• Table/RAW view toggle works
• RAW view shows pretty-printed JSON
• Column sorting functional
• Search/filter works within results

Phase 3

• Graph/Table/RAW toggle works
• Graph visualization renders nodes and relationships
• Results overview panel shows label counts
• Zoom/pan/fullscreen controls functional