# 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 (🔄)
- **Auto-detection system**:
  - Single input field for data or URL
  - Automatic URL detection and content fetching
  - Format detection (JSON, CSV, TSV, TopoJSON)
  - Confidence scoring (high/medium/low)
  - Visual confirmation with badges and preview
- URL fetching with CORS error handling
- 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, auto-detection (714 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,238 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