diff --git a/docs/features-list.md b/docs/features-list.md new file mode 100644 index 0000000..258adc9 --- /dev/null +++ b/docs/features-list.md @@ -0,0 +1,226 @@ +# Astrolabe - Current Features List + +> **Purpose**: Comprehensive inventory of all implemented features for code review and optimization +> **Created**: 2025-10-15 +> **Status**: Phases 0-10 Complete + +--- + +## 🔭 **ASTROLABE - Current Features Inventory** + +### **1. Layout & UI Structure** +- Three-panel resizable layout (Snippet Library | Editor | Preview) +- Manual drag-to-resize with 200px minimum widths +- Panel show/hide toggle buttons (📄 ✏️ 👁️ 📁) +- Panel memory system (remembers sizes when toggled) +- Proportional width redistribution when panels are hidden/shown +- Layout persistence to localStorage across sessions +- Retro Windows 2000 aesthetic styling + +**Files**: `panel-manager.js`, `styles.css`, `index.html` + +--- + +### **2. Monaco Code Editor** +- Monaco Editor v0.47.0 integration via CDN +- JSON syntax highlighting and validation +- Vega-Lite v5 schema autocomplete and intellisense +- Format-on-paste and format-on-type +- Read-only mode (when viewing published with draft) +- Automatic layout resizing + +**Files**: `app.js` (lines 31-82), `index.html` (line 11) + +--- + +### **3. Vega-Lite Rendering** +- Live preview panel with Vega-Embed v6 +- SVG rendering for high quality +- 1.5-second debounced rendering on editor changes +- Immediate rendering on snippet selection +- Error display with helpful messages +- Dataset reference resolution (inline & URL) +- Recursive resolution for layered/concat/faceted specs + +**Files**: `editor.js`, `app.js` (rendering calls) + +--- + +### **4. Snippet Management (CRUD)** +- Create new snippet (ghost card interface) +- Duplicate snippet (with "_copy" suffix) +- Delete snippet (with confirmation dialog) +- Inline name editing with auto-save +- Comment field with auto-save +- Auto-generated ISO datetime names (YYYY-MM-DD_HH-MM-SS) +- Unique ID generation (timestamp + random) +- Created/Modified timestamps with formatted display + +**Files**: `snippet-manager.js` (lines 7-36, 621-701), `app.js` (event handlers) + +--- + +### **5. Snippet Organization** +- Multi-field sorting (Modified/Created/Name) +- Ascending/descending toggle with arrow indicators (⬇⬆) +- Real-time search across name, comment, and spec content +- 300ms debounced search +- Search clear button with enabled/disabled state +- Visual sort indicators on active button +- Sort preferences persisted to localStorage +- Snippet size display (shows KB for ≥1KB snippets, right-aligned) + +**Files**: `snippet-manager.js` (lines 96-405), `app.js` (initialization) + +--- + +### **6. Draft/Published Workflow** +- Dual-spec storage (spec = published, draftSpec = working) +- View mode toggle (Draft/Published buttons) +- Status indicator lights (🟢 green = clean, 🟡 yellow = has draft) +- Publish button (copies draftSpec → spec) +- Revert button (copies spec → draftSpec with confirmation) +- Context-aware button visibility (only in draft mode) +- Auto-draft creation when editing published view +- Read-only published view when draft exists +- 1-second debounced auto-save for draft changes + +**Files**: `snippet-manager.js` (lines 494-810), `config.js` (currentViewMode) + +--- + +### **7. Storage Management** +- localStorage for snippets (5MB limit awareness) +- Storage usage monitor with progress bar +- Visual warning states (green/orange/red at 90%/95%) +- Accurate byte counting using Blob API +- Storage monitor positioned below metadata panel +- Real-time updates after save operations +- Quota exceeded alerts + +**Files**: `snippet-manager.js` (lines 3-5, 812-853), `index.html` (storage monitor UI) + +--- + +### **8. Import/Export** +- Export all snippets to JSON with auto-generated filename +- Import from JSON with format auto-detection +- Support for Astrolabe native format +- Support for external formats with field mapping +- Automatic "imported" tag for external snippets +- ID conflict resolution with regeneration +- Additive import (no overwrites) +- Success/error feedback with count + +**Files**: `snippet-manager.js` (lines 855-976), `app.js` (lines 92-112) + +--- + +### **9. Dataset Management** +- IndexedDB storage (unlimited size, separate from snippets) +- Multi-format support: JSON, CSV, TSV, TopoJSON +- Multi-source support: Inline data & URL references +- Full CRUD operations for datasets +- Modal-based Dataset Manager UI +- Dataset list with metadata display +- Dataset details panel with editable name/comment +- Statistics display (rows, columns, size) +- Data preview (first 5 rows or URL info) +- Copy reference button (generates `"data": {"name": "..."}`) +- Delete dataset with confirmation +- Refresh metadata button for URL datasets (🔄) +- Automatic metadata calculation on creation +- URL fetching with CORS error handling +- Button-group UI for source/format selection +- Unique dataset name constraint (IndexedDB index) +- Empty state message for no datasets + +**Files**: `dataset-manager.js`, `editor.js` (resolution), `app.js` (event handlers), `index.html` (modal UI) + +--- + +### **10. Settings & Persistence** +- Settings storage in localStorage (separate from snippets) +- Default settings (sortBy: modified, sortOrder: desc) +- Settings API (load, save, get, set) +- Panel layout persistence +- Panel memory persistence +- Sort preferences persistence +- Auto-restore on page load + +**Files**: `config.js` (lines 19-65), `panel-manager.js` (lines 76-131) + +--- + +### **11. Auto-Save System** +- 1-second debounced auto-save for editor changes +- 1-second debounced auto-save for name/comment changes +- Synchronous flag (`isUpdatingEditor`) to prevent unwanted saves +- Auto-save only in draft mode +- Instant status light updates after save +- Storage monitor updates after save + +**Files**: `snippet-manager.js` (lines 494-619), `app.js` (lines 73-75) + +--- + +### **12. User Experience Enhancements** +- Auto-select first snippet on page load +- Relative date formatting (Today/Yesterday/X days ago) +- Full datetime display in metadata panel +- Empty state placeholders +- "No snippets match your search" for search results +- Confirmation dialogs for destructive actions +- Flexbox layout with scrollable snippet list +- Fixed metadata and storage monitor at bottom + +**Files**: `snippet-manager.js` (formatting functions), `app.js` (auto-select), `styles.css` (layout) + +--- + +## 📊 **Feature Statistics** + +- **Core Feature Groups**: 12 +- **Total Individual Capabilities**: ~60+ +- **Storage Systems**: 2 (localStorage for snippets, IndexedDB for datasets) +- **UI Panels**: 3 main + 1 modal +- **Auto-save Points**: 3 (draft spec, name, comment) +- **Data Formats**: 4 (JSON, CSV, TSV, TopoJSON) +- **Data Sources**: 2 (inline, URL) + +--- + +## 🗂️ **Code Organization** + +``` +src/ +├── js/ +│ ├── config.js # Global variables, settings, sample data +│ ├── snippet-manager.js # Snippet CRUD, storage, search, sort (977 lines) +│ ├── dataset-manager.js # Dataset CRUD, IndexedDB, formats (637 lines) +│ ├── panel-manager.js # Layout resizing, toggling, persistence (200 lines) +│ ├── editor.js # Monaco setup, Vega rendering, dataset resolution (150 lines) +│ └── app.js # Event handlers, initialization (197 lines) +└── styles.css # Retro Windows 2000 aesthetic +``` + +**Total JS Lines**: ~2,161 lines (excluding comments and blank lines) + +--- + +## 🎯 **Use This Document For** + +1. **Feature Review**: Select a feature to audit code relevance +2. **Code Cleanup**: Identify potential leftovers or redundancies +3. **Optimization**: Find opportunities to reduce codebase size +4. **Documentation**: Reference for what's actually implemented +5. **Planning**: Determine what to polish vs what to add + +--- + +## 📝 **Next Steps** + +- Choose a feature number (1-12) to review in detail +- Analyze code for that feature to ensure all parts are necessary +- Remove dead code or consolidate redundancies +- Document any optimizations made