From 4c6fe5b9bd34eb305a39b5823aa903af11b39934 Mon Sep 17 00:00:00 2001 From: Oleh Omelchenko Date: Mon, 24 Nov 2025 23:57:06 +0200 Subject: [PATCH] refactor: migrate chart builder UI to Alpine.js for reactive state management --- index.html | 64 ++-- src/js/app.js | 23 +- src/js/chart-builder.js | 710 ++++++++++++++++++---------------------- 3 files changed, 358 insertions(+), 439 deletions(-) diff --git a/index.html b/index.html index c29739e..b611435 100644 --- a/index.html +++ b/index.html @@ -474,27 +474,27 @@
Build Chart - +
-
+
- +
- - - - - + + + + +
@@ -506,17 +506,17 @@
-
- - - - + + + +
@@ -525,17 +525,17 @@
-
- - - - + + + +
@@ -544,17 +544,17 @@
-
- - - - + + + +
@@ -563,17 +563,17 @@
-
- - - - + + + +
@@ -584,11 +584,11 @@
- +
- +
@@ -596,8 +596,8 @@
- - + +
diff --git a/src/js/app.js b/src/js/app.js index 4f0a537..8130c52 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -130,9 +130,6 @@ document.addEventListener('DOMContentLoaded', function () { // Initialize auto-save functionality initializeAutoSave(); - // Initialize chart builder - initializeChartBuilder(); - // Initialize URL state management AFTER editor is ready initializeURLStateManagement(); }); @@ -204,7 +201,7 @@ document.addEventListener('DOMContentLoaded', function () { // Edit dataset button if (editDatasetBtn) { - editDatasetBtn.addEventListener('click', async function() { + editDatasetBtn.addEventListener('click', async function () { if (Alpine.store('datasets').currentDatasetId) { await showEditDatasetForm(Alpine.store('datasets').currentDatasetId); } @@ -276,14 +273,14 @@ document.addEventListener('DOMContentLoaded', function () { const previewRawBtn = document.getElementById('preview-raw-btn'); const previewTableBtn = document.getElementById('preview-table-btn'); if (previewRawBtn) { - previewRawBtn.addEventListener('click', function() { + previewRawBtn.addEventListener('click', function () { if (Alpine.store('datasets').currentDatasetData) { showRawPreview(Alpine.store('datasets').currentDatasetData); } }); } if (previewTableBtn) { - previewTableBtn.addEventListener('click', function() { + previewTableBtn.addEventListener('click', function () { if (Alpine.store('datasets').currentDatasetData) { showTablePreview(Alpine.store('datasets').currentDatasetData); } @@ -291,7 +288,7 @@ document.addEventListener('DOMContentLoaded', function () { } // Global modal event delegation - handles close buttons and overlay clicks - document.addEventListener('click', function(e) { + document.addEventListener('click', function (e) { // Handle modal close buttons (×) if (e.target.id && e.target.id.endsWith('-modal-close')) { const modalId = e.target.id.replace('-close', ''); @@ -399,11 +396,11 @@ function initializeURLStateManagement() { // Keyboard shortcut action handlers (shared between Monaco and document) const KeyboardActions = { - createNewSnippet: function() { + createNewSnippet: function () { createNewSnippet(); }, - toggleDatasetManager: function() { + toggleDatasetManager: function () { const modal = document.getElementById('dataset-modal'); if (modal && modal.style.display === 'flex') { closeDatasetManager(); @@ -412,13 +409,13 @@ const KeyboardActions = { } }, - publishDraft: function() { + publishDraft: function () { if (Alpine.store('snippets').viewMode === 'draft' && Alpine.store('snippets').currentSnippetId) { publishDraft(); } }, - toggleSettings: function() { + toggleSettings: function () { if (ModalManager.isOpen('settings-modal')) { closeSettingsModal(); } else { @@ -426,7 +423,7 @@ const KeyboardActions = { } }, - closeAnyModal: function() { + closeAnyModal: function () { // Try ModalManager first for standard modals if (ModalManager.closeAny()) { return true; @@ -448,7 +445,7 @@ const KeyboardActions = { // Keyboard shortcuts handler (document-level) function initializeKeyboardShortcuts() { - document.addEventListener('keydown', function(e) { + document.addEventListener('keydown', function (e) { // Escape: Close any open modal if (e.key === 'Escape') { if (KeyboardActions.closeAnyModal()) { diff --git a/src/js/chart-builder.js b/src/js/chart-builder.js index 4899a22..429aadd 100644 --- a/src/js/chart-builder.js +++ b/src/js/chart-builder.js @@ -1,10 +1,299 @@ // Chart Builder - Visual chart construction from datasets -// Global state for chart builder -window.chartBuilderState = null; +/** + * Alpine.js component for Chart Builder + * Manages reactive state for chart configuration and preview + */ +function chartBuilder() { + return { + // Dataset info + datasetId: null, + datasetName: null, + dataset: null, -// Timeout for debounced preview updates -let previewUpdateTimeout = null; + // Chart configuration + markType: 'bar', + encodings: { + x: { field: '', type: 'nominal' }, + y: { field: '', type: 'quantitative' }, + color: { field: '', type: 'nominal' }, + size: { field: '', type: 'quantitative' } + }, + width: null, + height: null, + + // UI state + previewTimeout: null, + + // Computed: Generate Vega-Lite spec from current state + get spec() { + const spec = { + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "data": { "name": this.datasetName }, + "mark": { "type": this.markType, "tooltip": true }, + "encoding": {} + }; + + // Add encodings + ['x', 'y', 'color', 'size'].forEach(channel => { + const enc = this.encodings[channel]; + if (enc.field) { + spec.encoding[channel] = { + field: enc.field, + type: enc.type + }; + } + }); + + // Add dimensions if specified + if (this.width) spec.width = parseInt(this.width); + if (this.height) spec.height = parseInt(this.height); + + // Remove empty encoding object + if (Object.keys(spec.encoding).length === 0) { + delete spec.encoding; + } + + return spec; + }, + + // Computed: Check if configuration is valid + get isValid() { + return Object.values(this.encodings).some(enc => enc.field !== ''); + }, + + // Initialize component with dataset + async init(datasetId) { + try { + // Validate datasetId is provided + if (!datasetId || isNaN(datasetId)) { + console.warn('Chart builder init called without valid datasetId'); + return false; + } + + // Fetch dataset from IndexedDB + this.dataset = await DatasetStorage.getDataset(datasetId); + if (!this.dataset) { + Toast.error('Dataset not found'); + return false; + } + + this.datasetId = datasetId; + this.datasetName = this.dataset.name; + + // Populate field dropdowns + populateFieldDropdowns(this.dataset); + + // Auto-select smart defaults + this.autoSelectDefaults(); + + // Trigger initial preview + this.$nextTick(() => { + this.updatePreview(); + }); + + return true; + } catch (error) { + console.error('Error initializing chart builder:', error); + Toast.error('Error opening chart builder'); + return false; + } + }, + + // Auto-select smart defaults based on column types + autoSelectDefaults() { + const columns = this.dataset.columns || []; + const columnTypes = this.dataset.columnTypes || []; + + if (columns.length === 0) return; + + // Select first column for X axis + if (columns.length >= 1) { + const firstCol = columns[0]; + const firstColType = columnTypes.find(ct => ct.name === firstCol); + this.encodings.x.field = firstCol; + this.encodings.x.type = firstColType ? mapColumnTypeToVegaType(firstColType.type) : 'nominal'; + } + + // Select second column for Y axis (if exists) + if (columns.length >= 2) { + const secondCol = columns[1]; + const secondColType = columnTypes.find(ct => ct.name === secondCol); + this.encodings.y.field = secondCol; + this.encodings.y.type = secondColType ? mapColumnTypeToVegaType(secondColType.type) : 'quantitative'; + } + }, + + // Set mark type and update preview + setMarkType(type) { + this.markType = type; + this.updatePreview(); + }, + + // Set encoding field and auto-detect type if needed + async setEncodingField(channel, field) { + this.encodings[channel].field = field; + + if (field && this.dataset) { + // Auto-detect type from column type + const columnTypes = this.dataset.columnTypes || []; + const colType = columnTypes.find(ct => ct.name === field); + if (colType) { + this.encodings[channel].type = mapColumnTypeToVegaType(colType.type); + } + } + + this.updatePreview(); + }, + + // Set encoding type and update preview + setEncodingType(channel, type) { + if (this.encodings[channel].field) { + this.encodings[channel].type = type; + this.updatePreview(); + } + }, + + // Update preview with debouncing + updatePreview() { + clearTimeout(this.previewTimeout); + + // Get debounce time from settings (default 1500ms) + const debounceTime = getSetting('performance.renderDebounce') || 1500; + + this.previewTimeout = setTimeout(async () => { + await this.renderPreview(); + }, debounceTime); + }, + + // Render preview in chart builder + async renderPreview() { + const previewContainer = document.getElementById('chart-builder-preview'); + const errorDiv = document.getElementById('chart-builder-error'); + + if (!previewContainer) return; + + try { + // Validate configuration + if (!this.isValid) { + previewContainer.innerHTML = '
Configure at least one encoding to see preview
'; + if (errorDiv) errorDiv.textContent = ''; + return; + } + + // Resolve dataset references + const resolvedSpec = await resolveDatasetReferences(JSON.parse(JSON.stringify(this.spec))); + + // Clear container + previewContainer.innerHTML = ''; + + // Render with Vega-Embed + await window.vegaEmbed('#chart-builder-preview', resolvedSpec, { + actions: false, + renderer: 'svg' + }); + + // Clear error + if (errorDiv) errorDiv.textContent = ''; + + } catch (error) { + console.error('Error rendering chart preview:', error); + + // Show error message + if (errorDiv) { + errorDiv.textContent = error.message || 'Error rendering chart'; + } + + // Show error in preview + previewContainer.innerHTML = `
Error: ${error.message || 'Failed to render chart'}
`; + } + }, + + // Create snippet from current chart configuration + async createSnippet() { + if (!this.isValid) return; + + try { + // Create snippet with auto-generated name + const snippetName = generateSnippetName(); + const now = new Date().toISOString(); + + const snippet = { + id: generateSnippetId(), + name: snippetName, + created: now, + modified: now, + spec: this.spec, + draftSpec: null, + comment: `Chart built from dataset: ${this.datasetName}`, + tags: [], + datasetRefs: [this.datasetName], + meta: {} + }; + + // Save snippet + SnippetStorage.saveSnippet(snippet); + + // Close modals + this.close(); + const datasetModal = document.getElementById('dataset-modal'); + if (datasetModal) datasetModal.style.display = 'none'; + + // Select and open the new snippet + selectSnippet(snippet.id); + + // Show success message + Toast.success(`Created snippet: ${snippetName}`); + + } catch (error) { + console.error('Error creating snippet from builder:', error); + Toast.error('Error creating snippet'); + } + }, + + // Close chart builder and cleanup + close() { + const modal = document.getElementById('chart-builder-modal'); + modal.style.display = 'none'; + + // Update URL - go back to dataset view + if (this.datasetId) { + URLState.update({ + view: 'datasets', + datasetId: this.datasetId, + action: null + }); + } + + // Clear timeout + clearTimeout(this.previewTimeout); + + // Reset state + this.datasetId = null; + this.datasetName = null; + this.dataset = null; + this.markType = 'bar'; + this.encodings = { + x: { field: '', type: 'nominal' }, + y: { field: '', type: 'quantitative' }, + color: { field: '', type: 'nominal' }, + size: { field: '', type: 'quantitative' } + }; + this.width = null; + this.height = null; + + // Clear preview + const previewContainer = document.getElementById('chart-builder-preview'); + if (previewContainer) { + previewContainer.innerHTML = '
Configure chart to see preview
'; + } + + // Clear error + const errorDiv = document.getElementById('chart-builder-error'); + if (errorDiv) errorDiv.textContent = ''; + } + }; +} // Map column types to Vega-Lite types function mapColumnTypeToVegaType(columnType) { @@ -23,38 +312,26 @@ function setActiveToggle(buttons, activeButton) { activeButton.classList.add('active'); } + // Open chart builder modal with dataset async function openChartBuilder(datasetId) { try { - // Fetch dataset from IndexedDB - const dataset = await DatasetStorage.getDataset(datasetId); - if (!dataset) { - showToast('Dataset not found', 'error'); - return; - } - - // Initialize state with defaults - window.chartBuilderState = { - datasetId: datasetId, - datasetName: dataset.name, - spec: { - "$schema": "https://vega.github.io/schema/vega-lite/v5.json", - "data": {"name": dataset.name}, - "mark": {"type": "bar", "tooltip": true}, - "encoding": {} - } - }; - - // Populate field dropdowns with dataset columns BEFORE showing modal - populateFieldDropdowns(dataset); - - // Auto-select smart defaults - autoSelectDefaults(dataset); - - // Show modal + // Show modal first const modal = document.getElementById('chart-builder-modal'); modal.style.display = 'flex'; + // Get Alpine component instance and initialize it + const chartBuilderView = document.getElementById('chart-builder-view'); + if (chartBuilderView && chartBuilderView._x_dataStack) { + const component = chartBuilderView._x_dataStack[0]; + const success = await component.init(datasetId); + + if (!success) { + modal.style.display = 'none'; + return; + } + } + // Update URL to reflect chart builder state URLState.update({ view: 'datasets', @@ -62,18 +339,15 @@ async function openChartBuilder(datasetId) { action: 'build' }); - // Initial preview update (with a small delay to ensure DOM is ready) - setTimeout(() => { - updateChartBuilderPreview(); - }, 50); - } catch (error) { console.error('Error opening chart builder:', error); - showToast('Error opening chart builder', 'error'); + Toast.error('Error opening chart builder'); } } -// Populate field dropdowns with dataset columns + + +// Populate field dropdowns with dataset columns (utility function) function populateFieldDropdowns(dataset) { const encodings = ['x', 'y', 'color', 'size']; const columns = dataset.columns || []; @@ -95,363 +369,11 @@ function populateFieldDropdowns(dataset) { }); } -// Auto-select smart defaults based on column types -function autoSelectDefaults(dataset) { - const columns = dataset.columns || []; - const columnTypes = dataset.columnTypes || []; - - if (columns.length === 0) return; - - // Select first column for X axis - if (columns.length >= 1) { - const firstCol = columns[0]; - const firstColType = columnTypes.find(ct => ct.name === firstCol); - setEncoding('x', firstCol, firstColType ? mapColumnTypeToVegaType(firstColType.type) : 'nominal'); - } - - // Select second column for Y axis (if exists) - if (columns.length >= 2) { - const secondCol = columns[1]; - const secondColType = columnTypes.find(ct => ct.name === secondCol); - setEncoding('y', secondCol, secondColType ? mapColumnTypeToVegaType(secondColType.type) : 'quantitative'); - } -} - -// Set encoding field and type in UI and state -function setEncoding(channel, field, type) { - // Update dropdown - const select = document.getElementById(`encoding-${channel}-field`); - if (select) { - select.value = field; - } - - // Update type toggle buttons - const typeButtons = document.querySelectorAll(`[data-encoding="${channel}"][data-type]`); - const activeButton = Array.from(typeButtons).find(btn => btn.dataset.type === type); - if (activeButton) { - setActiveToggle(typeButtons, activeButton); - } - - // Update state - if (!window.chartBuilderState) return; - - if (field) { - window.chartBuilderState.spec.encoding[channel] = { - field: field, - type: type - }; - } else { - delete window.chartBuilderState.spec.encoding[channel]; - } -} - -// Generate Vega-Lite spec from current state -function generateVegaLiteSpec() { - if (!window.chartBuilderState) return null; - - const state = window.chartBuilderState; - const spec = JSON.parse(JSON.stringify(state.spec)); // Deep clone - - // Add width/height if specified - const width = document.getElementById('chart-width'); - const height = document.getElementById('chart-height'); - - if (width && width.value) { - spec.width = parseInt(width.value); - } - - if (height && height.value) { - spec.height = parseInt(height.value); - } - - // Remove empty encodings - if (Object.keys(spec.encoding).length === 0) { - delete spec.encoding; - } - - return spec; -} - -// Validate chart configuration -function validateChartConfig() { - if (!window.chartBuilderState) return false; - - const spec = window.chartBuilderState.spec; - const encoding = spec.encoding || {}; - - // At least one encoding must be set - const hasEncoding = Object.keys(encoding).length > 0; - - return hasEncoding; -} - -// Update preview with debouncing -function updateChartBuilderPreview() { - clearTimeout(previewUpdateTimeout); - - // Get debounce time from settings (default 1500ms) - const debounceTime = getSetting('performance.renderDebounce') || 1500; - - previewUpdateTimeout = setTimeout(async () => { - await renderChartBuilderPreview(); - }, debounceTime); -} - -// Render preview in chart builder -async function renderChartBuilderPreview() { - const previewContainer = document.getElementById('chart-builder-preview'); - const errorDiv = document.getElementById('chart-builder-error'); - const createBtn = document.getElementById('chart-builder-create-btn'); - - if (!previewContainer) return; - - try { - // Validate configuration - const isValid = validateChartConfig(); - - if (!isValid) { - // Show placeholder - previewContainer.innerHTML = '
Configure at least one encoding to see preview
'; - if (errorDiv) errorDiv.textContent = ''; - if (createBtn) createBtn.disabled = true; - return; - } - - // Generate spec - const spec = generateVegaLiteSpec(); - if (!spec) return; - - // Resolve dataset references (reuse existing function from editor.js) - const resolvedSpec = await resolveDatasetReferences(JSON.parse(JSON.stringify(spec))); - - // Clear container - previewContainer.innerHTML = ''; - - // Render with Vega-Embed - await window.vegaEmbed('#chart-builder-preview', resolvedSpec, { - actions: false, - renderer: 'svg' - }); - - // Clear error and enable create button - if (errorDiv) errorDiv.textContent = ''; - if (createBtn) createBtn.disabled = false; - - } catch (error) { - console.error('Error rendering chart preview:', error); - - // Show error message - if (errorDiv) { - errorDiv.textContent = error.message || 'Error rendering chart'; - } - - // Show error in preview - previewContainer.innerHTML = `
Error: ${error.message || 'Failed to render chart'}
`; - - // Disable create button - if (createBtn) createBtn.disabled = true; - } -} - -// Create snippet from chart builder -async function createSnippetFromBuilder() { - if (!window.chartBuilderState) return; - - try { - // Generate final spec - const spec = generateVegaLiteSpec(); - if (!spec) return; - - // Create snippet with auto-generated name - const snippetName = generateSnippetName(); - const now = new Date().toISOString(); - - const snippet = { - id: generateSnippetId(), - name: snippetName, - created: now, - modified: now, - spec: spec, - draftSpec: null, - comment: `Chart built from dataset: ${window.chartBuilderState.datasetName}`, - tags: [], - datasetRefs: [window.chartBuilderState.datasetName], - meta: {} - }; - - // Save snippet - SnippetStorage.saveSnippet(snippet); - - // Close chart builder - closeChartBuilder(); - - // Close dataset modal if open - const datasetModal = document.getElementById('dataset-modal'); - if (datasetModal) { - datasetModal.style.display = 'none'; - } - - // Select and open the new snippet - selectSnippet(snippet.id); - - // Show success message - showToast(`Created snippet: ${snippetName}`, 'success'); - - } catch (error) { - console.error('Error creating snippet from builder:', error); - showToast('Error creating snippet', 'error'); - } -} - -// Close chart builder modal +// closeChartBuilder - now calls Alpine component's close() method function closeChartBuilder() { - const modal = document.getElementById('chart-builder-modal'); - modal.style.display = 'none'; - - // Update URL - go back to dataset view - if (window.chartBuilderState && window.chartBuilderState.datasetId) { - URLState.update({ - view: 'datasets', - datasetId: window.chartBuilderState.datasetId, - action: null - }); - } - - // Clear timeout - clearTimeout(previewUpdateTimeout); - - // Clear state - window.chartBuilderState = null; - - // Clear preview - const previewContainer = document.getElementById('chart-builder-preview'); - if (previewContainer) { - previewContainer.innerHTML = '
Configure chart to see preview
'; - } - - // Clear error - const errorDiv = document.getElementById('chart-builder-error'); - if (errorDiv) { - errorDiv.textContent = ''; - } - - // Reset create button - const createBtn = document.getElementById('chart-builder-create-btn'); - if (createBtn) { - createBtn.disabled = true; - } -} - -// Initialize chart builder event listeners -function initializeChartBuilder() { - // Close button - const closeBtn = document.getElementById('chart-builder-modal-close'); - if (closeBtn) { - closeBtn.addEventListener('click', closeChartBuilder); - } - - // Cancel button - const cancelBtn = document.getElementById('chart-builder-cancel-btn'); - if (cancelBtn) { - cancelBtn.addEventListener('click', closeChartBuilder); - } - - // Back button - const backBtn = document.getElementById('chart-builder-back-btn'); - if (backBtn) { - backBtn.addEventListener('click', () => { - closeChartBuilder(); - // Dataset modal should still be open - }); - } - - // Create snippet button - const createBtn = document.getElementById('chart-builder-create-btn'); - if (createBtn) { - createBtn.addEventListener('click', createSnippetFromBuilder); - } - - // Mark type toggle buttons - const markButtons = document.querySelectorAll('.mark-toggle-group .btn-toggle'); - markButtons.forEach(btn => { - btn.addEventListener('click', () => { - setActiveToggle(markButtons, btn); - - if (window.chartBuilderState) { - window.chartBuilderState.spec.mark.type = btn.dataset.mark; - updateChartBuilderPreview(); - } - }); - }); - - // Encoding field dropdowns - const encodings = ['x', 'y', 'color', 'size']; - encodings.forEach(encoding => { - const select = document.getElementById(`encoding-${encoding}-field`); - if (select) { - select.addEventListener('change', async (e) => { - const field = e.target.value; - - if (!window.chartBuilderState) return; - - if (field) { - // Try to get active type button, or auto-detect from dataset - const activeTypeBtn = document.querySelector(`[data-encoding="${encoding}"][data-type].active`); - let type = activeTypeBtn ? activeTypeBtn.dataset.type : 'nominal'; - - // If no active type button, auto-detect from column type - if (!activeTypeBtn && window.chartBuilderState.datasetId) { - const dataset = await DatasetStorage.getDataset(window.chartBuilderState.datasetId); - const columnTypes = dataset.columnTypes || []; - const colType = columnTypes.find(ct => ct.name === field); - if (colType) { - type = mapColumnTypeToVegaType(colType.type); - } - } - - setEncoding(encoding, field, type); - } else { - // Remove encoding when "None" is selected - setEncoding(encoding, '', ''); - } - - updateChartBuilderPreview(); - }); - } - }); - - // Encoding type toggle buttons - const typeButtons = document.querySelectorAll('.type-toggle-group .btn-toggle'); - typeButtons.forEach(btn => { - btn.addEventListener('click', () => { - const encoding = btn.dataset.encoding; - const type = btn.dataset.type; - - // Update active state for this encoding's buttons - const encodingButtons = document.querySelectorAll(`[data-encoding="${encoding}"][data-type]`); - setActiveToggle(encodingButtons, btn); - - // Update state - if (window.chartBuilderState && window.chartBuilderState.spec.encoding[encoding]) { - window.chartBuilderState.spec.encoding[encoding].type = type; - updateChartBuilderPreview(); - } - }); - }); - - // Dimension inputs - const widthInput = document.getElementById('chart-width'); - const heightInput = document.getElementById('chart-height'); - - if (widthInput) { - widthInput.addEventListener('input', () => { - updateChartBuilderPreview(); - }); - } - - if (heightInput) { - heightInput.addEventListener('input', () => { - updateChartBuilderPreview(); - }); + const chartBuilderView = document.getElementById('chart-builder-view'); + if (chartBuilderView && chartBuilderView._x_dataStack) { + const component = chartBuilderView._x_dataStack[0]; + component.close(); } }