feat: Implement Chart Builder feature with UI and functionality

- Added a new modal for the Chart Builder to allow users to create visualizations from datasets.
- Integrated chart builder state management and validation for encoding configurations.
- Implemented auto-selection of default fields based on dataset column types.
- Added live preview functionality for real-time chart rendering.
- Created a new JavaScript file (chart-builder.js) to handle chart building logic.
- Updated app.js to initialize the chart builder and handle URL state changes.
- Enhanced styles in styles.css for the chart builder UI components.
- Documented the implementation details in project-docs/chart-builder-implementation.md.

src/js/app.js

@@ -111,6 +111,9 @@ document.addEventListener('DOMContentLoaded', function () {
         // Initialize auto-save functionality
         initializeAutoSave();
 
+        // Initialize chart builder
+        initializeChartBuilder();
+
         // Initialize URL state management AFTER editor is ready
         initializeURLStateManagement();
     });
@@ -283,6 +286,16 @@ document.addEventListener('DOMContentLoaded', function () {
         refreshMetadataBtn.addEventListener('click', refreshDatasetMetadata);
     }
 
+    // Build chart from dataset button
+    const buildChartBtn = document.getElementById('build-chart-btn');
+    if (buildChartBtn) {
+        buildChartBtn.addEventListener('click', async () => {
+            if (window.currentDatasetId) {
+                openChartBuilder(window.currentDatasetId);
+            }
+        });
+    }
+
     // New snippet from dataset button
     const newSnippetBtn = document.getElementById('new-snippet-btn');
     if (newSnippetBtn) {
@@ -396,6 +409,11 @@ function handleURLStateChange() {
             const numericId = parseFloat(state.datasetId.replace('dataset-', ''));
             if (!isNaN(numericId)) {
                 selectDataset(numericId, false);
+
+                // Handle chart builder action
+                if (state.action === 'build') {
+                    openChartBuilder(numericId);
+                }
             }
         }
     } else if (state.snippetId) {