juxscript 1.1.183 → 1.1.184

package/lib/components/dataframe.d.ts

@@ -97,6 +97,9 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _setDataFrame;
     private _updateTable;
     private _showFilterInput;
+    /**
+     * ✅ NEW: Show settings modal to reshape CSV data
+     */
     private _showReshapeModal;
     update(prop: string, value: any): void;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;

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

@@ -1 +1 @@
-{"version":3,"file":"dataframe.d.ts","sourceRoot":"","sources":["dataframe.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dataframe.d.ts","sourceRoot":"","sources":["dataframe.ts"],"names":[],"mappings":"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"}

package/lib/components/dataframe.js

@@ -481,9 +481,121 @@ export class DataFrameComponent extends BaseComponent {
             this._table?.rows(filtered.toRows());
         });
     }
+    /**
+     * ✅ NEW: Show settings modal to reshape CSV data
+     */
     _showReshapeModal() {
-        // TODO: Implement reshape modal for re-parsing CSV with different options
-        console.warn('Reshape modal not yet implemented');
+        if (!this._rawFileData)
+            return;
+        const modal = document.createElement('div');
+        modal.className = 'jux-modal-overlay';
+        modal.innerHTML = `
+            <div class="jux-modal" style="max-width: 800px;">
+                <div class="jux-modal-header">
+                    <div class="jux-modal-header-title">Data Import Settings</div>
+                    <button class="jux-modal-close" id="${this._id}-modal-close">×</button>
+                </div>
+                <div class="jux-modal-content" style="padding: 1.5rem;">
+                    <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="\t">Tab (\\t)</option>
+                            <option value=";">Semicolon (;)</option>
+                        </select>
+                    </div>
+                    
+                    <div style="margin-bottom: 1rem;">
+                        <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Header Row (0-based)</label>
+                        <input type="number" id="${this._id}-header-row" class="jux-input-element" value="0" min="0" max="50" style="width: 100%;" />
+                    </div>
+                    
+                    <div style="margin-bottom: 1rem;">
+                        <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Skip Rows Before Header</label>
+                        <input type="number" id="${this._id}-skip-rows" class="jux-input-element" value="0" min="0" max="50" style="width: 100%;" />
+                    </div>
+                    
+                    <div style="border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1rem; background: hsl(var(--muted) / 0.3); max-height: 300px; overflow-y: auto;">
+                        <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Preview</div>
+                        <div id="${this._id}-preview" style="font-family: monospace; font-size: 0.75rem; white-space: pre; color: hsl(var(--muted-foreground));"></div>
+                    </div>
+                </div>
+                <div class="jux-modal-footer">
+                    <button id="${this._id}-cancel-reshape" class="jux-button jux-button-ghost">Cancel</button>
+                    <button id="${this._id}-apply-reshape" class="jux-button">Apply & Re-import</button>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(modal);
+        const delimiterSelect = document.getElementById(`${this._id}-delimiter`);
+        const headerRowInput = document.getElementById(`${this._id}-header-row`);
+        const skipRowsInput = document.getElementById(`${this._id}-skip-rows`);
+        const previewDiv = document.getElementById(`${this._id}-preview`);
+        // ✅ Auto-detect initial values
+        if (this._rawFileData.text) {
+            const detected = this._driver._detectDelimiter(this._rawFileData.text);
+            delimiterSelect.value = detected === '\t' ? '\\t' : detected;
+            const headerRow = this._driver._detectHeaderRow(this._rawFileData.text, detected);
+            headerRowInput.value = String(headerRow);
+        }
+        // ✅ Update preview on changes
+        const updatePreview = async () => {
+            if (!this._rawFileData?.text)
+                return;
+            const delim = delimiterSelect.value === '\\t' ? '\t' : delimiterSelect.value;
+            const headerRow = parseInt(headerRowInput.value) || 0;
+            const skipRows = parseInt(skipRowsInput.value) || 0;
+            try {
+                const df = this._driver.parseCSV(this._rawFileData.text, {
+                    delimiter: delim,
+                    headerRow,
+                    skipRows,
+                    hasHeader: true,
+                    maxRows: 10 // Preview first 10 rows
+                });
+                const preview = df.toRows().map((row, i) => {
+                    const cols = Object.values(row).map(v => String(v).padEnd(20)).join(' | ');
+                    return `${i === 0 ? '📌 ' : '   '}${cols}`;
+                }).join('\n');
+                previewDiv.textContent = `Columns: ${df.columns.join(' | ')}\n\n${preview}`;
+            }
+            catch (err) {
+                previewDiv.textContent = `⚠️ Error: ${err.message}`;
+            }
+        };
+        delimiterSelect.addEventListener('change', updatePreview);
+        headerRowInput.addEventListener('input', updatePreview);
+        skipRowsInput.addEventListener('input', updatePreview);
+        updatePreview();
+        // ✅ Apply button
+        document.getElementById(`${this._id}-apply-reshape`).addEventListener('click', async () => {
+            if (!this._rawFileData?.text)
+                return;
+            const delim = delimiterSelect.value === '\\t' ? '\t' : delimiterSelect.value;
+            const headerRow = parseInt(headerRowInput.value) || 0;
+            const skipRows = parseInt(skipRowsInput.value) || 0;
+            this.state.loading = true;
+            this._updateStatus('⏳ Re-parsing with new settings...', 'loading');
+            try {
+                const df = this._driver.parseCSV(this._rawFileData.text, {
+                    delimiter: delim,
+                    headerRow,
+                    skipRows,
+                    hasHeader: true
+                });
+                await this._driver.store(this._rawFileData.file.name, df, { source: this._rawFileData.file.name });
+                this._setDataFrame(df, this._rawFileData.file.name);
+                modal.remove();
+            }
+            catch (err) {
+                this._updateStatus(`❌ ${err.message}`, 'error');
+            }
+        });
+        // ✅ Cancel/Close buttons
+        const closeModal = () => modal.remove();
+        document.getElementById(`${this._id}-cancel-reshape`).addEventListener('click', closeModal);
+        document.getElementById(`${this._id}-modal-close`).addEventListener('click', closeModal);
     }
     update(prop, value) { }
     /* ═══════════════════════════════════════════════════

package/lib/components/dataframe.ts

@@ -596,9 +596,135 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         });
     }
 
+    /**
+     * ✅ NEW: Show settings modal to reshape CSV data
+     */
     private _showReshapeModal(): void {
-        // TODO: Implement reshape modal for re-parsing CSV with different options
-        console.warn('Reshape modal not yet implemented');
+        if (!this._rawFileData) return;
+
+        const modal = document.createElement('div');
+        modal.className = 'jux-modal-overlay';
+        modal.innerHTML = `
+            <div class="jux-modal" style="max-width: 800px;">
+                <div class="jux-modal-header">
+                    <div class="jux-modal-header-title">Data Import Settings</div>
+                    <button class="jux-modal-close" id="${this._id}-modal-close">×</button>
+                </div>
+                <div class="jux-modal-content" style="padding: 1.5rem;">
+                    <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="\t">Tab (\\t)</option>
+                            <option value=";">Semicolon (;)</option>
+                        </select>
+                    </div>
+                    
+                    <div style="margin-bottom: 1rem;">
+                        <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Header Row (0-based)</label>
+                        <input type="number" id="${this._id}-header-row" class="jux-input-element" value="0" min="0" max="50" style="width: 100%;" />
+                    </div>
+                    
+                    <div style="margin-bottom: 1rem;">
+                        <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Skip Rows Before Header</label>
+                        <input type="number" id="${this._id}-skip-rows" class="jux-input-element" value="0" min="0" max="50" style="width: 100%;" />
+                    </div>
+                    
+                    <div style="border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1rem; background: hsl(var(--muted) / 0.3); max-height: 300px; overflow-y: auto;">
+                        <div style="font-weight: 600; margin-bottom: 0.5rem; color: hsl(var(--foreground));">Preview</div>
+                        <div id="${this._id}-preview" style="font-family: monospace; font-size: 0.75rem; white-space: pre; color: hsl(var(--muted-foreground));"></div>
+                    </div>
+                </div>
+                <div class="jux-modal-footer">
+                    <button id="${this._id}-cancel-reshape" class="jux-button jux-button-ghost">Cancel</button>
+                    <button id="${this._id}-apply-reshape" class="jux-button">Apply & Re-import</button>
+                </div>
+            </div>
+        `;
+
+        document.body.appendChild(modal);
+
+        const delimiterSelect = document.getElementById(`${this._id}-delimiter`) as HTMLSelectElement;
+        const headerRowInput = document.getElementById(`${this._id}-header-row`) as HTMLInputElement;
+        const skipRowsInput = document.getElementById(`${this._id}-skip-rows`) as HTMLInputElement;
+        const previewDiv = document.getElementById(`${this._id}-preview`)!;
+
+        // ✅ Auto-detect initial values
+        if (this._rawFileData.text) {
+            const detected = (this._driver as any)._detectDelimiter(this._rawFileData.text);
+            delimiterSelect.value = detected === '\t' ? '\\t' : detected;
+
+            const headerRow = (this._driver as any)._detectHeaderRow(this._rawFileData.text, detected);
+            headerRowInput.value = String(headerRow);
+        }
+
+        // ✅ Update preview on changes
+        const updatePreview = async () => {
+            if (!this._rawFileData?.text) return;
+
+            const delim = delimiterSelect.value === '\\t' ? '\t' : delimiterSelect.value;
+            const headerRow = parseInt(headerRowInput.value) || 0;
+            const skipRows = parseInt(skipRowsInput.value) || 0;
+
+            try {
+                const df = this._driver.parseCSV(this._rawFileData.text, {
+                    delimiter: delim,
+                    headerRow,
+                    skipRows,
+                    hasHeader: true,
+                    maxRows: 10 // Preview first 10 rows
+                });
+
+                const preview = df.toRows().map((row, i) => {
+                    const cols = Object.values(row).map(v => String(v).padEnd(20)).join(' | ');
+                    return `${i === 0 ? '📌 ' : '   '}${cols}`;
+                }).join('\n');
+
+                previewDiv.textContent = `Columns: ${df.columns.join(' | ')}\n\n${preview}`;
+            } catch (err: any) {
+                previewDiv.textContent = `⚠️ Error: ${err.message}`;
+            }
+        };
+
+        delimiterSelect.addEventListener('change', updatePreview);
+        headerRowInput.addEventListener('input', updatePreview);
+        skipRowsInput.addEventListener('input', updatePreview);
+
+        updatePreview();
+
+        // ✅ Apply button
+        document.getElementById(`${this._id}-apply-reshape`)!.addEventListener('click', async () => {
+            if (!this._rawFileData?.text) return;
+
+            const delim = delimiterSelect.value === '\\t' ? '\t' : delimiterSelect.value;
+            const headerRow = parseInt(headerRowInput.value) || 0;
+            const skipRows = parseInt(skipRowsInput.value) || 0;
+
+            this.state.loading = true;
+            this._updateStatus('⏳ Re-parsing with new settings...', 'loading');
+
+            try {
+                const df = this._driver.parseCSV(this._rawFileData.text, {
+                    delimiter: delim,
+                    headerRow,
+                    skipRows,
+                    hasHeader: true
+                });
+
+                await this._driver.store(this._rawFileData.file.name, df, { source: this._rawFileData.file.name });
+                this._setDataFrame(df, this._rawFileData.file.name);
+
+                modal.remove();
+            } catch (err: any) {
+                this._updateStatus(`❌ ${err.message}`, 'error');
+            }
+        });
+
+        // ✅ Cancel/Close buttons
+        const closeModal = () => modal.remove();
+        document.getElementById(`${this._id}-cancel-reshape`)!.addEventListener('click', closeModal);
+        document.getElementById(`${this._id}-modal-close`)!.addEventListener('click', closeModal);
     }
 
     update(prop: string, value: any): void { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.183",
+  "version": "1.1.184",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",