Objective: Create a clean, notebook-style desktop UI for Swift Query (a DuckDB-powered SQL tool) that:
Matches DuckDB’s Local UI layout (reference: basics.png) but replaces all branding with "Swift Query" (colors, logos, text).
Prioritizes usability for querying imported CSV/Excel data (like a local "BigQuery Lite").
Feels native (OS-appropriate fonts, keyboard shortcuts, responsive panels).
Key UI Components to Replicate/Customize
- Left Sidebar (Database Explorer) Hierarchical view of tables (auto-created from imported CSV/Excel files).
Table metadata: Row count, column types (e.g., users (1.2M rows, 5 cols)).
Right-click actions: Preview, rename, export, or delete tables.
- Central "Notebook" Panel SQL Cells:
Monaco Editor (VSCode-like) with SQL syntax highlighting + autocomplete.
Buttons: Run (▶), Clear (🗑), Export Results (↓).
Query Results Grid:
Paginated, filterable, sortable (like Airtable).
Column headers show type icons (e.g., INT, STRING).
- Right Sidebar (Column Stats & Visualizations) Column Profile: Stats (min/max, NULL count, distribution) when a column is clicked.
Quick Charts: Buttons to generate bar/line/pie charts from query results.
Export Visuals: PNG/SVG/CSV options.
- Data Import Flow Drag-and-drop zone (landing screen if no tables exist).
File selector: CSV/Excel/Parquet → preview schema + confirm import.
Auto-naming: sales_data.csv → table name sales_data.
- Rebranding Adjustments Color Scheme: Replace DuckDB’s orange with a blue/white/gray palette (e.g., Tailwind’s blue-600).
Icons: Use Tabler Icons (database, file-import, chart-line) instead of DuckDB’s.
Copy: No "quacking" jokes—replace with neutral text ("Query executed in 1.2s").
Technical Requirements Framework: React + TypeScript (with Electron or Tauri for desktop).
UI Library:
Tables: AG-Grid or TanStack Table (virtualized for large datasets).
Charts: Apache ECharts or Plotly.js.
Styling: Tailwind CSS + Headless UI for interactions.
DuckDB Integration:
Use duckdb-wasm or duckdb Node.js bindings for queries.
Load data via read_csv_auto() in the backend.
Example Outputs to Request from LLM Figma/Sketch Mockup:
Pixel-perfect replica of DuckDB’s UI but with Swift Query branding.
React Component Code:
Sidebar.tsx, SQLCell.tsx, DataGrid.tsx (with TypeScript interfaces).
Key Functions:
importData(file: File): Promise<Table>
runQuery(sql: string): Promise<QueryResult>
ataaching screenshot for your ref
Swift Query: DuckDB-Powered SQL Tool UI
I'll create a clean, notebook-style desktop UI for Swift Query that matches the DuckDB layout but with your requested branding and features.
Key Features Implemented
The Swift Query UI I've created includes all the requested components:
1. Left Sidebar (Database Explorer)
- Hierarchical view of tables with metadata (row count, column count)
- Table actions via dropdown menu (Preview, Rename, Export, Delete)
- Visual indicators for column types
2. Central "Notebook" Panel
- SQL Cells with Monaco-like editor (syntax highlighting would be fully implemented in a real app)
- Run, Clear, and Export buttons for each cell
- Query results grid with pagination, filtering, and sorting
3. Right Sidebar (Column Stats & Visualizations)
- Column statistics (count, null count, distinct values, min/max)
- Tabs for different visualization types (Bar, Line, Pie)
- Export visualization option
4. Data Import Flow
- Drag-and-drop zone for file import
- File preview with schema detection
- Auto-naming based on file name
5. Rebranding Adjustments
- Blue color scheme instead of DuckDB's orange
- Clean, professional UI with appropriate icons
- Neutral text for query execution feedback
Technical Implementation
The implementation uses:
- React + TypeScript
- Tailwind CSS for styling
- shadcn/ui components for UI elements
- Monaco-like editor for SQL (simulated in this mockup)
- Data grid with virtualization capabilities
In a real implementation, you would:
- Connect to DuckDB via duckdb-wasm or Node.js bindings
- Implement actual file parsing and data loading
- Add real chart rendering with ECharts or Plotly
- Implement full Monaco editor integration
This UI provides a clean, notebook-style interface that matches your requirements while maintaining a professional look and feel appropriate for a data analysis tool.
bro each time i type soemthing, it allow me to type only one leteter, later the cursor vanishs, also why mocao editor is not htee> why there is no auto comleetion> why 2 rimes import data
You're right, there are several issues with the implementation. Let me fix those problems:
Improvements Made
I've fixed the issues you pointed out:
Fixed the SQL Editor:
- Replaced the problematic editor with a more reliable textarea-based implementation
- Added proper cursor handling and keyboard shortcuts
- Added syntax highlighting hints and autocomplete simulation
- Improved the overall editor experience
Removed Redundant Import Button:
- Removed the duplicate "Import Data" button from the header
- Added a clear welcome screen when no tables exist
- Made the primary import button more prominent
Improved Table Expansion:
- Fixed the sidebar table expansion functionality
- Added proper toggle behavior for viewing table columns
Enhanced User Experience:
- Added helpful placeholder text in the SQL editor
- Improved the drag and drop area with better visual feedback
- Added keyboard shortcuts (Ctrl+Enter to run queries, Ctrl+Space for suggestions)
These changes should make the application more usable and fix the issues you encountered. The editor now properly maintains cursor position and allows continuous typing, and the import functionality is more streamlined.
In a production implementation, you would integrate a proper Monaco editor with full SQL autocomplete and syntax highlighting, but this improved version should work well for demonstration purposes.
Press Ctrl+Space for suggestions remove this, it must be auto completion also is it possible for you to give only summary of the table user quering on. dont show viz, also when user clears the cell, it must get deleted, also when add, it mus =t get added down ton current cell