juxscript 1.1.240 → 1.1.244

package/lib/components/dataframe/ImportSettingsModal.js

@@ -1,442 +0,0 @@
-import { Modal } from '../modal.js';
-export class ImportSettingsModal {
-    constructor(id, driver, options = {}) {
-        this._reshapeModal = null;
-        this._reshapeModalRendered = false;
-        this._settingsModal = null;
-        this._modal = null;
-        this._modalRendered = false;
-        this._id = id;
-        this._driver = driver;
-        this._maxSheetSize = options.maxSheetSize ?? 100000;
-        this._sheetChunkSize = options.sheetChunkSize ?? 10000;
-    }
-    /* ═══════════════════════════════════════════════════
-     * SETTINGS MODAL (Overview)
-     * ═══════════════════════════════════════════════════ */
-    /**
-     * Show the data settings modal with file info and options
-     */
-    showSettings(data, callbacks) {
-        this.cleanup();
-        this._settingsModal = new Modal(`${this._id}-settings-modal`, {
-            title: 'Data Settings',
-            size: 'medium',
-            close: true,
-            backdropClose: true
-        });
-        const fileSizeKB = data.fileSize ? (data.fileSize / 1024).toFixed(1) : '0';
-        let contentHTML = `
-            <div class="jux-dataframe-settings-content">
-                <div class="jux-dataframe-settings-section">
-                    <div class="jux-dataframe-settings-label">Source</div>
-                    <div class="jux-dataframe-settings-value">
-                        <strong>${this._escapeHtml(data.fileName)}</strong>
-                        ${data.fileSize ? `<span class="jux-muted" style="margin-left: 8px;">${fileSizeKB} KB</span>` : ''}
-                    </div>
-                </div>
-                <div class="jux-dataframe-settings-section">
-                    <div class="jux-dataframe-settings-label">Data</div>
-                    <div class="jux-dataframe-settings-value">
-                        ${data.rowCount > 0 ? `${data.rowCount} rows × ${data.colCount} columns` : 'No data loaded'}
-                        ${data.isMalformed ? '<span style="color: hsl(var(--warning)); margin-left: 8px;">⚠️ May need reformatting</span>' : ''}
-                    </div>
-                </div>
-        `;
-        if (data.hasRawFileData) {
-            contentHTML += `
-                <div class="jux-dataframe-settings-section">
-                    <div class="jux-dataframe-settings-label">Import</div>
-                    <div class="jux-dataframe-settings-value">
-                        <button id="${this._id}-adjust-import" class="jux-button jux-button-outline jux-button-sm">
-                            ⚙️ Adjust Header Row / Delimiter
-                        </button>
-                    </div>
-                </div>
-            `;
-        }
-        contentHTML += `</div>`;
-        this._settingsModal
-            .content(contentHTML)
-            .actions([
-            {
-                label: 'Remove Data',
-                variant: 'secondary',
-                click: async () => {
-                    await callbacks.onClear();
-                    this._settingsModal.closeModal();
-                }
-            },
-            {
-                label: 'Done',
-                variant: 'primary',
-                click: () => this._settingsModal.closeModal()
-            }
-        ]);
-        this._settingsModal.render(document.body);
-        this._settingsModal.open();
-        requestAnimationFrame(() => {
-            const adjustBtn = document.getElementById(`${this._id}-adjust-import`);
-            if (adjustBtn) {
-                adjustBtn.addEventListener('click', () => {
-                    this._settingsModal.closeModal();
-                    callbacks.onAdjustImport();
-                });
-            }
-        });
-    }
-    /**
-     * Close the settings modal if open
-     */
-    closeSettings() {
-        if (this._settingsModal) {
-            this._settingsModal.closeModal();
-        }
-    }
-    /* ═══════════════════════════════════════════════════
-     * IMPORT/RESHAPE MODAL
-     * ═══════════════════════════════════════════════════ */
-    /**
-     * Show the appropriate reshape modal based on file type
-     */
-    async showImportSettings(rawFileData, callbacks) {
-        if (!rawFileData)
-            return;
-        if (rawFileData.isExcel) {
-            await this._showExcelModal(rawFileData, callbacks);
-        }
-        else {
-            this._showCSVModal(rawFileData, callbacks);
-        }
-    }
-    /**
-     * Cleanup any existing modals
-     */
-    cleanup() {
-        if (this._reshapeModal && this._reshapeModalRendered) {
-            const oldEl = document.getElementById(`${this._id}-reshape-modal`);
-            if (oldEl)
-                oldEl.remove();
-            this._reshapeModal = null;
-            this._reshapeModalRendered = false;
-        }
-        // Note: Don't close settings modal here - let it close itself
-    }
-    _escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-    _buildClickablePreviewHTML(rawRows, selectedSheetRow) {
-        let html = '<table style="width: 100%; border-collapse: collapse; font-size: 12px;">';
-        for (const { sheetRow, values } of rawRows) {
-            const isHeader = (sheetRow === selectedSheetRow);
-            const isSkipped = (sheetRow < selectedSheetRow);
-            let rowStyle = 'border-bottom: 1px solid hsl(var(--border)); cursor: pointer; transition: background 0.1s;';
-            if (isHeader) {
-                rowStyle += 'background: hsl(142 71% 45% / 0.15); font-weight: 600;';
-            }
-            else if (isSkipped) {
-                rowStyle += 'background: hsl(var(--muted) / 0.4); color: hsl(var(--muted-foreground)); font-style: italic; opacity: 0.7;';
-            }
-            html += `<tr data-sheet-row="${sheetRow}" style="${rowStyle}" onmouseover="this.style.outline='2px solid hsl(142 71% 45% / 0.5)'" onmouseout="this.style.outline=''">`;
-            html += `<td style="padding: 8px 12px; width: 60px; font-weight: 600; color: hsl(var(--muted-foreground)); border-right: 1px solid hsl(var(--border)); text-align: center; user-select: none;">`;
-            if (isHeader) {
-                html += `<span style="color: hsl(142 71% 45%);">▶ ${sheetRow}</span>`;
-            }
-            else {
-                html += `${sheetRow}`;
-            }
-            html += '</td>';
-            const displayCols = values.slice(0, 6);
-            displayCols.forEach(val => {
-                const displayVal = val != null ? String(val).substring(0, 20) : '';
-                const cellStyle = isHeader
-                    ? 'padding: 8px 12px; font-weight: 600; color: hsl(var(--foreground));'
-                    : 'padding: 8px 12px;';
-                html += `<td style="${cellStyle}">${this._escapeHtml(displayVal)}</td>`;
-            });
-            if (values.length > 6) {
-                html += `<td style="padding: 8px 12px; color: hsl(var(--muted-foreground));">…</td>`;
-            }
-            html += `<td style="padding: 8px 12px; text-align: right; white-space: nowrap; user-select: none;">`;
-            if (isHeader) {
-                html += '<span style="background: hsl(142 71% 45%); color: white; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600;">HEADER</span>';
-            }
-            else if (isSkipped) {
-                html += '<span style="color: hsl(var(--muted-foreground)); font-size: 10px;">skipped</span>';
-            }
-            else {
-                html += '<span style="color: hsl(var(--muted-foreground)); font-size: 10px;">data</span>';
-            }
-            html += '</td></tr>';
-        }
-        html += '</table>';
-        return html;
-    }
-    async _showExcelModal(rawFileData, callbacks) {
-        if (!rawFileData.file)
-            return;
-        this.cleanup();
-        const rawRows = await this._driver.readRawExcelRows(rawFileData.file, 15);
-        if (rawRows.length === 0)
-            return;
-        // Auto-detect best header row
-        let selectedSheetRow = rawRows[0].sheetRow;
-        for (const { sheetRow, values } of rawRows) {
-            const nonEmpty = values.filter(v => v !== null && v !== undefined && String(v).trim() !== '');
-            if (nonEmpty.length < values.length * 0.5)
-                continue;
-            const nonNumeric = nonEmpty.filter(v => {
-                const str = String(v).trim();
-                return isNaN(Number(str)) && str !== '';
-            }).length;
-            if (nonNumeric >= nonEmpty.length * 0.7) {
-                selectedSheetRow = sheetRow;
-                break;
-            }
-        }
-        this._modal = new Modal(`${this._id}-reshape-modal`, {
-            title: 'Excel Import Settings',
-            size: 'large',
-            close: true,
-            backdropClose: false
-        });
-        const modalContentHTML = `
-            <div style="margin-bottom: 1rem;">
-                <div id="${this._id}-reshape-hint" style="padding: 0.75rem; background: hsl(var(--muted) / 0.5); border-radius: var(--radius); font-size: 0.875rem;"></div>
-                <input type="hidden" id="${this._id}-header-row" value="${selectedSheetRow}" />
-            </div>
-            <div>
-                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Click a row to select it as the header:</div>
-                <div id="${this._id}-preview" style="font-family: ui-monospace, monospace; font-size: 12px; background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0; overflow: hidden; max-height: 400px; overflow-y: auto;"></div>
-            </div>
-        `;
-        this._modal
-            .content(modalContentHTML)
-            .actions([
-            {
-                label: 'Cancel',
-                variant: 'secondary',
-                click: () => this._modal.closeModal()
-            },
-            {
-                label: 'Apply & Re-import',
-                variant: 'primary',
-                click: async () => {
-                    const input = document.getElementById(`${this._id}-header-row`);
-                    const headerRow = parseInt(input.value) || 0;
-                    callbacks.onStatusUpdate('Re-parsing with new settings...', 'loading');
-                    try {
-                        const sheets = await this._driver.streamFileMultiSheet(rawFileData.file, {
-                            headerRow,
-                            maxSheetSize: this._maxSheetSize,
-                            sheetChunkSize: this._sheetChunkSize
-                        });
-                        const sheetNames = Object.keys(sheets);
-                        if (sheetNames.length === 0) {
-                            callbacks.onError(`No data found with header at row ${headerRow}. Try a different row.`);
-                            return;
-                        }
-                        await this._driver.store(rawFileData.file.name, sheets[sheetNames[0]], { source: rawFileData.file.name });
-                        if (sheetNames.length > 1) {
-                            callbacks.onReimport(sheets, rawFileData.file.name);
-                        }
-                        else {
-                            callbacks.onReimport(sheets[sheetNames[0]], rawFileData.file.name);
-                        }
-                        this._modal.closeModal();
-                    }
-                    catch (err) {
-                        callbacks.onError(`Error: ${err.message}`);
-                    }
-                }
-            }
-        ]);
-        this._modal.render(document.body);
-        this._modalRendered = true;
-        await new Promise(resolve => requestAnimationFrame(resolve));
-        const previewDiv = document.getElementById(`${this._id}-preview`);
-        const hintDiv = document.getElementById(`${this._id}-reshape-hint`);
-        const hiddenInput = document.getElementById(`${this._id}-header-row`);
-        const updateHint = (row) => {
-            if (!hintDiv)
-                return;
-            const vals = rawRows.find(r => r.sheetRow === row)?.values ?? [];
-            const headerNames = vals.filter((v) => v != null && String(v).trim() !== '').map((v) => String(v).trim());
-            const preview = headerNames.slice(0, 4).join(', ') + (headerNames.length > 4 ? '…' : '');
-            if (row > rawRows[0].sheetRow) {
-                hintDiv.innerHTML = `Sheet row <strong>${row}</strong> selected as header. Columns: <code>${this._escapeHtml(preview)}</code>. Rows before it will be skipped.`;
-            }
-            else {
-                hintDiv.innerHTML = `Sheet row <strong>${row}</strong> (first row) selected as header. Columns: <code>${this._escapeHtml(preview)}</code>`;
-            }
-        };
-        const renderPreview = (selected) => {
-            if (!previewDiv)
-                return;
-            previewDiv.innerHTML = this._buildClickablePreviewHTML(rawRows, selected);
-            previewDiv.querySelectorAll('tr[data-sheet-row]').forEach(tr => {
-                tr.addEventListener('click', () => {
-                    const rowIdx = parseInt(tr.dataset.sheetRow);
-                    hiddenInput.value = String(rowIdx);
-                    updateHint(rowIdx);
-                    renderPreview(rowIdx);
-                });
-            });
-        };
-        updateHint(selectedSheetRow);
-        renderPreview(selectedSheetRow);
-        this._modal.open();
-    }
-    _showCSVModal(rawFileData, callbacks) {
-        if (!rawFileData.text)
-            return;
-        this.cleanup();
-        const text = rawFileData.text;
-        const detected = this._driver._detectDelimiter(text);
-        const lines = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n');
-        const rawRows = [];
-        const maxPreviewRows = Math.min(lines.length, 15);
-        for (let i = 0; i < maxPreviewRows; i++) {
-            if (!lines[i]) {
-                rawRows.push({ sheetRow: i, values: [''] });
-                continue;
-            }
-            const values = this._driver._parseLine(lines[i], detected);
-            rawRows.push({ sheetRow: i, values });
-        }
-        // Auto-detect header row
-        let selectedRow = 0;
-        for (const { sheetRow, values } of rawRows) {
-            const nonEmpty = values.filter((v) => v.trim() !== '');
-            if (nonEmpty.length < values.length * 0.5)
-                continue;
-            const nonNumeric = nonEmpty.filter((v) => {
-                const trimmed = v.trim();
-                return isNaN(Number(trimmed)) && trimmed !== '';
-            }).length;
-            if (nonNumeric >= nonEmpty.length * 0.7) {
-                selectedRow = sheetRow;
-                break;
-            }
-        }
-        this._modal = new Modal(`${this._id}-reshape-modal`, {
-            title: 'CSV Import Settings',
-            size: 'large',
-            close: true,
-            backdropClose: false
-        });
-        const modalContentHTML = `
-            <div style="margin-bottom: 1rem;">
-                <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Delimiter</label>
-                <select id="${this._id}-delimiter" class="jux-input-element" style="width: 100%;">
-                    <option value=",">Comma (,)</option>
-                    <option value="|">Pipe (|)</option>
-                    <option value="&#9;">Tab (\\t)</option>
-                    <option value=";">Semicolon (;)</option>
-                </select>
-            </div>
-            <div style="margin-bottom: 1rem;">
-                <div id="${this._id}-reshape-hint" style="padding: 0.75rem; background: hsl(var(--muted) / 0.5); border-radius: var(--radius); font-size: 0.875rem;"></div>
-                <input type="hidden" id="${this._id}-header-row" value="${selectedRow}" />
-            </div>
-            <div>
-                <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Click a row to select it as the header:</div>
-                <div id="${this._id}-preview" style="font-family: monospace; font-size: 12px; background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0; overflow: hidden; max-height: 400px; overflow-y: auto;"></div>
-            </div>
-        `;
-        this._modal
-            .content(modalContentHTML)
-            .actions([
-            {
-                label: 'Cancel',
-                variant: 'secondary',
-                click: () => this._modal.closeModal()
-            },
-            {
-                label: 'Apply & Re-import',
-                variant: 'primary',
-                click: async () => {
-                    const delimiterSelect = document.getElementById(`${this._id}-delimiter`);
-                    const hiddenInput = document.getElementById(`${this._id}-header-row`);
-                    const delim = delimiterSelect.value;
-                    const headerRow = parseInt(hiddenInput.value) || 0;
-                    callbacks.onStatusUpdate('Re-parsing with new settings...', 'loading');
-                    try {
-                        const df = this._driver.parseCSV(rawFileData.text, {
-                            delimiter: delim,
-                            headerRow,
-                            hasHeader: true
-                        });
-                        await this._driver.store(rawFileData.file.name, df, { source: rawFileData.file.name });
-                        callbacks.onReimport(df, rawFileData.file.name);
-                        this._modal.closeModal();
-                    }
-                    catch (err) {
-                        callbacks.onError(`Error: ${err.message}`);
-                    }
-                }
-            }
-        ]);
-        this._modal.render(document.body);
-        this._modalRendered = true;
-        requestAnimationFrame(() => {
-            const delimiterSelect = document.getElementById(`${this._id}-delimiter`);
-            const previewDiv = document.getElementById(`${this._id}-preview`);
-            const hintDiv = document.getElementById(`${this._id}-reshape-hint`);
-            const hiddenInput = document.getElementById(`${this._id}-header-row`);
-            if (delimiterSelect)
-                delimiterSelect.value = detected;
-            const updateHint = (row) => {
-                if (!hintDiv)
-                    return;
-                const vals = rawRows.find(r => r.sheetRow === row)?.values ?? [];
-                const headerNames = vals.filter((v) => v != null && String(v).trim() !== '').map((v) => String(v).trim());
-                const preview = headerNames.slice(0, 4).join(', ') + (headerNames.length > 4 ? '…' : '');
-                if (row > rawRows[0].sheetRow) {
-                    hintDiv.innerHTML = `Sheet row <strong>${row}</strong> selected as header. Columns: <code>${this._escapeHtml(preview)}</code>. Rows before it will be skipped.`;
-                }
-                else {
-                    hintDiv.innerHTML = `Sheet row <strong>${row}</strong> (first row) selected as header. Columns: <code>${this._escapeHtml(preview)}</code>`;
-                }
-            };
-            const reparse = () => {
-                const delim = delimiterSelect?.value || ',';
-                rawRows.length = 0;
-                for (let i = 0; i < maxPreviewRows; i++) {
-                    if (!lines[i]) {
-                        rawRows.push({ sheetRow: i, values: [''] });
-                        continue;
-                    }
-                    const values = this._driver._parseLine(lines[i], delim);
-                    rawRows.push({ sheetRow: i, values });
-                }
-            };
-            const renderPreview = (selected) => {
-                if (!previewDiv)
-                    return;
-                previewDiv.innerHTML = this._buildClickablePreviewHTML(rawRows, selected);
-                previewDiv.querySelectorAll('tr[data-sheet-row]').forEach(tr => {
-                    tr.addEventListener('click', () => {
-                        const rowIdx = parseInt(tr.dataset.sheetRow);
-                        hiddenInput.value = String(rowIdx);
-                        updateHint(rowIdx);
-                        renderPreview(rowIdx);
-                    });
-                });
-            };
-            if (delimiterSelect) {
-                delimiterSelect.addEventListener('change', () => {
-                    reparse();
-                    const current = parseInt(hiddenInput.value) || 0;
-                    updateHint(current);
-                    renderPreview(current);
-                });
-            }
-            updateHint(selectedRow);
-            renderPreview(selectedRow);
-            this._modal.open();
-        });
-    }
-}