juxscript 1.1.228 → 1.1.230

package/lib/components/dataframe/ImportSettingsModal.d.ts

@@ -0,0 +1,60 @@
+import { TabularDriver } from '../../storage/TabularDriver.js';
+import { DataFrame } from '../../storage/DataFrame.js';
+export interface ImportSettingsCallbacks {
+    onReimport: (df: DataFrame | Record<string, DataFrame>, sourceName: string) => void;
+    onError: (message: string) => void;
+    onStatusUpdate: (text: string, type: 'loading' | 'success' | 'error') => void;
+}
+export interface SettingsModalCallbacks {
+    onClear: () => Promise<void>;
+    onAdjustImport: () => void;
+}
+export interface SettingsModalData {
+    fileName: string;
+    fileSize?: number;
+    rowCount: number;
+    colCount: number;
+    isMalformed: boolean;
+    hasRawFileData: boolean;
+}
+export interface RawFileData {
+    file: File;
+    text?: string;
+    isExcel?: boolean;
+}
+export declare class ImportSettingsModal {
+    private _id;
+    private _driver;
+    private _reshapeModal;
+    private _reshapeModalRendered;
+    private _settingsModal;
+    private _modal;
+    private _modalRendered;
+    private _maxSheetSize;
+    private _sheetChunkSize;
+    constructor(id: string, driver: TabularDriver, options?: {
+        maxSheetSize?: number;
+        sheetChunkSize?: number;
+    });
+    /**
+     * Show the data settings modal with file info and options
+     */
+    showSettings(data: SettingsModalData, callbacks: SettingsModalCallbacks): void;
+    /**
+     * Close the settings modal if open
+     */
+    closeSettings(): void;
+    /**
+     * Show the appropriate reshape modal based on file type
+     */
+    showImportSettings(rawFileData: RawFileData, callbacks: ImportSettingsCallbacks): Promise<void>;
+    /**
+     * Cleanup any existing modals
+     */
+    cleanup(): void;
+    private _escapeHtml;
+    private _buildClickablePreviewHTML;
+    private _showExcelModal;
+    private _showCSVModal;
+}
+//# sourceMappingURL=ImportSettingsModal.d.ts.map

package/lib/components/dataframe/ImportSettingsModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImportSettingsModal.d.ts","sourceRoot":"","sources":["ImportSettingsModal.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD,MAAM,WAAW,uBAAuB;IACpC,UAAU,EAAE,CAAC,EAAE,EAAE,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACpF,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,KAAK,IAAI,CAAC;CACjF;AAED,MAAM,WAAW,sBAAsB;IACnC,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,cAAc,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,iBAAiB;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,qBAAa,mBAAmB;IAC5B,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,aAAa,CAAsB;IAC3C,OAAO,CAAC,qBAAqB,CAAkB;IAC/C,OAAO,CAAC,cAAc,CAAsB;IAC5C,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,cAAc,CAAkB;IACxC,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,eAAe,CAAS;gBAG5B,EAAE,EAAE,MAAM,EACV,MAAM,EAAE,aAAa,EACrB,OAAO,GAAE;QAAE,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,cAAc,CAAC,EAAE,MAAM,CAAA;KAAO;IAYpE;;OAEG;IACH,YAAY,CAAC,IAAI,EAAE,iBAAiB,EAAE,SAAS,EAAE,sBAAsB,GAAG,IAAI;IA6E9E;;OAEG;IACH,aAAa,IAAI,IAAI;IAUrB;;OAEG;IACG,kBAAkB,CAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,uBAAuB,GAAG,OAAO,CAAC,IAAI,CAAC;IAUrG;;OAEG;IACH,OAAO,IAAI,IAAI;IAUf,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,0BAA0B;YAwDpB,eAAe;IAiI7B,OAAO,CAAC,aAAa;CAoKxB"}

package/lib/components/dataframe/ImportSettingsModal.js

@@ -0,0 +1,442 @@
+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();
+        });
+    }
+}