by snappr021 on 5/1/2025, 7:50:00 AM with 0 comments
AI Prompt: Regenerate “Datalite” Interface with All Features
Create a fully functional single-page HTML application called Datalite using only vanilla JavaScript, standard CSS, and HTML — no frameworks or libraries.
The interface should support:
Multi-file Upload & Tabs
Allow uploading multiple CSV or JSON files
Display each dataset as a tab in the left sidebar, sorted alphabetically
Switching tabs shows the corresponding editable table
Editable Table View (per dataset)
Render a full HTML table with inline contentEditable cells
Include a filter row at the top using contentEditable table headers
Always show a sticky blank row at the bottom that adds new entries dynamically
Changes persist in memory and to localStorage
Relationship Detection (Heuristics)
Detect one-to-many and many-to-one relationships heuristically by matching:
{tableName}_id → id
Shared key values across tables
Store relationships and persist them
DBML-style Diagram View
Render a schema diagram using floating draggable HTML blocks on an infinite canvas
Each block shows the table name and its fields
Allow the user to toggle the diagram view on/off
Report Builder Panel (on right)
Show a live business-style report when any table row is clicked
Include the selected record and all related child records in clean, sectioned formatting
Add a toggle to switch between the styled view and raw JSON
Include child tables (and grandchildren, etc.) using relationship chains
State Persistence
Save all uploaded files, relationships, and edits to localStorage
Auto-load on refresh
Resizable Panels
Allow the user to drag and resize:
Sidebar (tabs)
Table view (center)
Report panel (right)
Export Functions
Add an "Export CSV" button for the currently active tab
Add a "Clear Storage" button to reset the app
Requirements:
No libraries (no Tailwind, Bootstrap, React, etc.)
Single relatix.html file
Fully working out-of-the-box
Mobile and desktop friendly
Style should be minimal and clean (standard CSS only)
No libraries (no Tailwind, Bootstrap, React, etc.) Single relatix.html file Fully working out-of-the-box Mobile and desktop friendly Style should be minimal and clean (standard CSS only)