refactor: move chart builder button event handling to Alpine, rename chart builder initialization, and improve new snippet creation.

index.html

@@ -295,6 +295,7 @@
                                     <button class="btn btn-modal primary" id="edit-dataset-btn"
                                         title="Edit this dataset contents">Edit Contents</button>
                                     <button class="btn btn-modal primary" id="build-chart-btn"
+                                        @click="openChartBuilder($store.datasets.currentDatasetId)"
                                         title="Build a chart using this dataset">Build Chart</button>
                                     <button class="btn btn-modal primary" id="new-snippet-btn"
                                         title="Create a new snippet using this dataset">New Snippet</button>

src/js/app.js

@@ -247,15 +247,7 @@ document.addEventListener('DOMContentLoaded', function () {
         refreshMetadataBtn.addEventListener('click', refreshDatasetMetadata);
     }
 
-    // Build chart from dataset button
+    // Build chart from dataset button - now handled by Alpine @click in HTML
-    const buildChartBtn = document.getElementById('build-chart-btn');
-    if (buildChartBtn) {
-        buildChartBtn.addEventListener('click', async () => {
-            if (Alpine.store('datasets').currentDatasetId) {
-                openChartBuilder(Alpine.store('datasets').currentDatasetId);
-            }
-        });
-    }
 
     // New snippet from dataset button
     const newSnippetBtn = document.getElementById('new-snippet-btn');

src/js/chart-builder.js

@@ -62,12 +62,12 @@ function chartBuilder() {
             return Object.values(this.encodings).some(enc => enc.field !== '');
         },
 
-        // Initialize component with dataset
+        // Load dataset and initialize chart builder
-        async init(datasetId) {
+        async loadDataset(datasetId) {
             try {
                 // Validate datasetId is provided
                 if (!datasetId || isNaN(datasetId)) {
-                    console.warn('Chart builder init called without valid datasetId');
+                    console.warn('Chart builder loadDataset called without valid datasetId');
                     return false;
                 }
 
@@ -214,7 +214,9 @@ function chartBuilder() {
             if (!this.isValid) return;
 
             try {
-                // Create snippet with auto-generated name
+                // Capture current state before closing (important: do this BEFORE close())
+                const specToSave = JSON.parse(JSON.stringify(this.spec));
+                const datasetNameToSave = this.datasetName;
                 const snippetName = generateSnippetName();
                 const now = new Date().toISOString();
 
@@ -223,11 +225,11 @@ function chartBuilder() {
                     name: snippetName,
                     created: now,
                     modified: now,
-                    spec: this.spec,
+                    spec: specToSave,
-                    draftSpec: null,
+                    draftSpec: specToSave, // Initialize draft with same spec
-                    comment: `Chart built from dataset: ${this.datasetName}`,
+                    comment: `Chart built from dataset: ${datasetNameToSave}`,
                     tags: [],
-                    datasetRefs: [this.datasetName],
+                    datasetRefs: [datasetNameToSave],
                     meta: {}
                 };
 
@@ -239,7 +241,8 @@ function chartBuilder() {
                 const datasetModal = document.getElementById('dataset-modal');
                 if (datasetModal) datasetModal.style.display = 'none';
 
-                // Select and open the new snippet
+                // Refresh snippet list and select the new snippet
+                renderSnippetList();
                 selectSnippet(snippet.id);
 
                 // Show success message
@@ -320,11 +323,11 @@ async function openChartBuilder(datasetId) {
         const modal = document.getElementById('chart-builder-modal');
         modal.style.display = 'flex';
 
-        // Get Alpine component instance and initialize it
+        // Get Alpine component instance and load dataset
         const chartBuilderView = document.getElementById('chart-builder-view');
         if (chartBuilderView && chartBuilderView._x_dataStack) {
             const component = chartBuilderView._x_dataStack[0];
-            const success = await component.init(datasetId);
+            const success = await component.loadDataset(datasetId);
 
             if (!success) {
                 modal.style.display = 'none';
@@ -345,8 +348,6 @@ async function openChartBuilder(datasetId) {
     }
 }
 
-
-
 // Populate field dropdowns with dataset columns (utility function)
 function populateFieldDropdowns(dataset) {
     const encodings = ['x', 'y', 'color', 'size'];
@@ -377,3 +378,7 @@ function closeChartBuilder() {
         component.close();
     }
 }
+
+// Expose functions to global scope for Alpine access
+window.openChartBuilder = openChartBuilder;
+window.closeChartBuilder = closeChartBuilder;