juxscript 1.1.165 → 1.1.167

package/lib/components/dataframe.ts

@@ -3,6 +3,7 @@ import { DataFrame } from '../storage/DataFrame.js';
 import { TabularDriver } from '../storage/TabularDriver.js';
 import { FileUpload } from './fileupload.js';
 import { Table } from './table.js';
+import { renderIcon } from './icons.js';
 
 const TRIGGER_EVENTS = [] as const;
 const CALLBACK_EVENTS = ['load', 'error', 'transform'] as const;
@@ -16,6 +17,8 @@ export interface DataFrameOptions {
     filterable?: boolean;
     paginated?: boolean;
     rowsPerPage?: number;
+    showStatus?: boolean;
+    icon?: string;
     style?: string;
     class?: string;
 }
@@ -42,6 +45,9 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _uploadRef: FileUpload | null = null;
     private _storageKey: string | null = null;
     private _pendingSource: (() => Promise<void>) | null = null;
+    private _inlineUpload: { label: string; accept: string; icon: string } | null = null;
+    private _showStatus: boolean = true;
+    private _icon: string = '';
 
     constructor(id: string, options: DataFrameOptions = {}) {
         super(id, {
@@ -61,11 +67,14 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
             options.storeName ?? 'frames'
         );
 
+        this._showStatus = options.showStatus ?? true;
+        this._icon = options.icon ?? '';
+
         this._tableOptions = {
             striped: options.striped ?? true,
             hoverable: options.hoverable ?? true,
             sortable: options.sortable ?? true,
-            filterable: options.filterable ?? true,
+            filterable: options.filterable ?? false, // defer until data loaded
             paginated: options.paginated ?? true,
             rowsPerPage: options.rowsPerPage ?? 25
         };
@@ -78,79 +87,98 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
      * DATA SOURCES
      * ═══════════════════════════════════════════════════ */
 
-    /**
-     * Load from IndexedDB by storage key
-     */
     fromStorage(key: string): this {
         this._storageKey = key;
-        this._pendingSource = async () => {
+        const loadFn = async () => {
             this.state.loading = true;
+            this._updateStatus('⏳ Loading...', 'loading');
             try {
-                let df = await this._driver.loadByName(key);
+                const df = await this._driver.loadByName(key);
                 if (!df) {
                     this._triggerCallback('error', 'No table found with key: ' + key, null, this);
                     this.state.loading = false;
+                    this._updateStatus('No table found: ' + key, 'empty');
                     return;
                 }
                 this._setDataFrame(df, 'storage: ' + key);
             } catch (err: any) {
                 this._triggerCallback('error', err.message, null, this);
                 this.state.loading = false;
+                this._updateStatus('❌ ' + err.message, 'error');
             }
         };
+        if (this._table) { loadFn(); } else { this._pendingSource = loadFn; }
         return this;
     }
 
-    /**
-     * Load from a FileUpload component — auto-wires change event
-     */
     fromUpload(upload: FileUpload): this {
         this._uploadRef = upload;
         this._pendingSource = async () => {
-            // Wire upload's change event to parse incoming files
             upload.bind('change', async (files: File[]) => {
                 if (!files || files.length === 0) return;
                 const file = files[0];
                 this.state.loading = true;
-
+                this._updateStatus('⏳ Parsing ' + file.name + '...', 'loading');
                 try {
                     const df = await this._driver.streamFile(file);
-                    // Auto-persist to IndexedDB
                     await this._driver.store(file.name, df, { source: file.name });
-                    this._setDataFrame(df, 'upload: ' + file.name);
+                    this._setDataFrame(df, file.name);
                 } catch (err: any) {
                     this._triggerCallback('error', err.message, null, this);
                     this.state.loading = false;
+                    this._updateStatus('❌ ' + err.message, 'error');
                 }
             });
         };
         return this;
     }
 
-    /**
-     * Load from raw data — array of objects or Record<string, any[]>
-     */
     fromData(data: Record<string, any>[] | Record<string, any[]>): this {
-        this._pendingSource = async () => {
+        const loadFn = async () => {
             this.state.loading = true;
+            this._updateStatus('⏳ Loading data...', 'loading');
             try {
                 const df = new DataFrame(data);
                 this._setDataFrame(df, 'inline data');
             } catch (err: any) {
                 this._triggerCallback('error', err.message, null, this);
                 this.state.loading = false;
+                this._updateStatus('❌ ' + err.message, 'error');
             }
         };
+        if (this._table) { loadFn(); } else { this._pendingSource = loadFn; }
+        return this;
+    }
+
+    /**
+     * Add an inline file upload control.
+     * @param label - Button label (default: 'Upload File')
+     * @param accept - File types (default: '.csv,.tsv,.txt,.xlsx,.xls')
+     * @param icon - Upload icon name (default: 'upload'). Pass '' to hide icon.
+     */
+    withUpload(
+        label: string = 'Upload File',
+        accept: string = '.csv,.tsv,.txt,.xlsx,.xls',
+        icon: string = 'upload'
+    ): this {
+        this._inlineUpload = { label, accept, icon };
         return this;
     }
 
     /* ═══════════════════════════════════════════════════
-     * TRANSFORM API (returns new DataFrameComponent view)
+     * UI TOGGLES
+     * ═══════════════════════════════════════════════════ */
+
+    /** Show/hide the status bar */
+    showStatus(v: boolean): this { this._showStatus = v; return this; }
+
+    /** Set a custom icon for the status bar */
+    statusIcon(v: string): this { this._icon = v; return this; }
+
+    /* ═══════════════════════════════════════════════════
+     * TRANSFORM API
      * ═══════════════════════════════════════════════════ */
 
-    /**
-     * Apply a transform to the current DataFrame and update the table
-     */
     apply(fn: (df: DataFrame) => DataFrame): this {
         if (!this._df) return this;
         const result = fn(this._df);
@@ -159,51 +187,30 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         return this;
     }
 
-    /**
-     * Filter rows
-     */
     filter(predicate: (row: Record<string, any>, index: number) => boolean): this {
         return this.apply(df => df.filter(predicate));
     }
 
-    /**
-     * Select columns
-     */
     select(...cols: string[]): this {
         return this.apply(df => df.select(...cols));
     }
 
-    /**
-     * Sort by column
-     */
     sort(col: string, descending?: boolean): this {
         return this.apply(df => df.sort(col, descending));
     }
 
-    /**
-     * Show first N rows
-     */
     head(n: number = 5): this {
         return this.apply(df => df.head(n));
     }
 
-    /**
-     * Show last N rows
-     */
     tail(n: number = 5): this {
         return this.apply(df => df.tail(n));
     }
 
-    /**
-     * Add a computed column
-     */
     withColumn(name: string, fn: (row: Record<string, any>, index: number) => any): this {
         return this.apply(df => df.withColumn(name, fn));
     }
 
-    /**
-     * Where clause
-     */
     where(col: string, op: '==' | '!=' | '>' | '<' | '>=' | '<=' | 'contains' | 'startsWith' | 'endsWith', value: any): this {
         return this.apply(df => df.where(col, op, value));
     }
@@ -212,41 +219,15 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
      * ACCESSORS
      * ═══════════════════════════════════════════════════ */
 
-    /** Get the underlying DataFrame */
     get df(): DataFrame | null { return this._df; }
-
-    /** Get the underlying TabularDriver */
     get driver(): TabularDriver { return this._driver; }
-
-    /** Get the internal Table component */
     get table(): Table | null { return this._table; }
+    describe(): Record<string, any> | null { return this._df?.describe() ?? null; }
+    toCSV(delimiter?: string): string { return this._df?.toCSV(delimiter) ?? ''; }
+    toRows(): Record<string, any>[] { return this._df?.toRows() ?? []; }
+    get shape(): [number, number] { return this._df?.shape ?? [0, 0]; }
+    get columns(): string[] { return this._df?.columns ?? []; }
 
-    /** Get describe() stats */
-    describe(): Record<string, any> | null {
-        return this._df?.describe() ?? null;
-    }
-
-    /** Export to CSV string */
-    toCSV(delimiter?: string): string {
-        return this._df?.toCSV(delimiter) ?? '';
-    }
-
-    /** Export to row objects */
-    toRows(): Record<string, any>[] {
-        return this._df?.toRows() ?? [];
-    }
-
-    /** Get shape */
-    get shape(): [number, number] {
-        return this._df?.shape ?? [0, 0];
-    }
-
-    /** Get column names */
-    get columns(): string[] {
-        return this._df?.columns ?? [];
-    }
-
-    /** Save current DataFrame to IndexedDB */
     async save(key?: string): Promise<string | null> {
         if (!this._df) return null;
         const name = key ?? this._storageKey ?? this._id;
@@ -268,6 +249,30 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
      * INTERNAL
      * ═══════════════════════════════════════════════════ */
 
+    private _updateStatus(text: string, type: 'loading' | 'success' | 'error' | 'empty' = 'empty'): void {
+        const el = document.getElementById(`${this._id}-status`);
+        if (!el) return;
+
+        el.className = 'jux-dataframe-status';
+        if (type) el.classList.add(`jux-dataframe-status-${type}`);
+
+        // Clear and rebuild
+        el.innerHTML = '';
+
+        if (this._icon && type === 'success') {
+            const iconEl = renderIcon(this._icon);
+            iconEl.style.width = '16px';
+            iconEl.style.height = '16px';
+            iconEl.style.marginRight = '6px';
+            iconEl.style.verticalAlign = 'middle';
+            el.appendChild(iconEl);
+        }
+
+        const span = document.createElement('span');
+        span.textContent = text;
+        el.appendChild(span);
+    }
+
     private _setDataFrame(df: DataFrame, sourceName: string): void {
         this._df = df;
         this.state.loaded = true;
@@ -276,13 +281,22 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         this.state.rowCount = df.height;
         this.state.colCount = df.width;
 
-        // Clean __EMPTY columns from xlsx artifacts
         const cleanCols = df.columns.filter(c => !c.startsWith('__EMPTY'));
         if (cleanCols.length < df.columns.length) {
             this._df = df.select(...cleanCols);
         }
 
         this._updateTable();
+        this._updateStatus(
+            `${sourceName} — ${this._df!.height} rows × ${this._df!.width} cols`,
+            'success'
+        );
+
+        // Enable filter now that data exists
+        if (this._tableOptions.filterable) {
+            this._showFilterInput();
+        }
+
         this._triggerCallback('load', this._df, null, this);
     }
 
@@ -291,6 +305,55 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         this._table.columns(this._df.columns).rows(this._df.toRows());
     }
 
+    private _showFilterInput(): void {
+        const wrapper = document.getElementById(this._id);
+        if (!wrapper) return;
+        // Only add once
+        if (wrapper.querySelector('.jux-dataframe-filter')) return;
+
+        const filterContainer = document.createElement('div');
+        filterContainer.className = 'jux-dataframe-filter';
+
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.placeholder = 'Filter rows...';
+        input.className = 'jux-input-element jux-dataframe-filter-input';
+
+        const iconEl = renderIcon('search');
+        iconEl.style.width = '16px';
+        iconEl.style.height = '16px';
+
+        const iconWrap = document.createElement('span');
+        iconWrap.className = 'jux-dataframe-filter-icon';
+        iconWrap.appendChild(iconEl);
+
+        filterContainer.appendChild(iconWrap);
+        filterContainer.appendChild(input);
+
+        // Insert before the table
+        const tableWrapper = wrapper.querySelector('.jux-table-wrapper');
+        if (tableWrapper) {
+            wrapper.insertBefore(filterContainer, tableWrapper);
+        } else {
+            wrapper.appendChild(filterContainer);
+        }
+
+        input.addEventListener('input', () => {
+            if (!this._df) return;
+            const text = input.value.toLowerCase();
+            if (!text) {
+                this._table?.rows(this._df.toRows());
+                return;
+            }
+            const filtered = this._df.filter((row) => {
+                return Object.values(row).some(v =>
+                    v !== null && v !== undefined && String(v).toLowerCase().includes(text)
+                );
+            });
+            this._table?.rows(filtered.toRows());
+        });
+    }
+
     update(prop: string, value: any): void { }
 
     /* ═══════════════════════════════════════════════════
@@ -307,53 +370,76 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
         if (className) wrapper.className += ` ${className}`;
         if (style) wrapper.setAttribute('style', style);
 
-        // Status bar
-        const statusBar = document.createElement('div');
-        statusBar.className = 'jux-dataframe-status';
-        statusBar.id = `${this._id}-status`;
-        statusBar.style.cssText = 'font-size:13px;color:#888;margin-bottom:8px;';
-        statusBar.textContent = 'No data loaded.';
-        wrapper.appendChild(statusBar);
+        // Inline upload
+        if (this._inlineUpload) {
+            const uploadOpts: any = {
+                label: this._inlineUpload.label,
+                accept: this._inlineUpload.accept,
+            };
+            if (this._inlineUpload.icon) {
+                uploadOpts.icon = this._inlineUpload.icon;
+            }
 
-        container.appendChild(wrapper);
+            const upload = new FileUpload(`${this._id}-upload`, uploadOpts);
+
+            this._uploadRef = upload;
+            this._pendingSource = async () => {
+                upload.bind('change', async (files: File[]) => {
+                    if (!files || files.length === 0) return;
+                    const file = files[0];
+                    this.state.loading = true;
+                    this._updateStatus('⏳ Parsing ' + file.name + '...', 'loading');
+                    try {
+                        const df = await this._driver.streamFile(file);
+                        await this._driver.store(file.name, df, { source: file.name });
+                        this._setDataFrame(df, file.name);
+                    } catch (err: any) {
+                        this._triggerCallback('error', err.message, null, this);
+                        this.state.loading = false;
+                        this._updateStatus('❌ ' + err.message, 'error');
+                    }
+                });
+            };
+
+            const uploadContainer = document.createElement('div');
+            uploadContainer.className = 'jux-dataframe-upload';
+            uploadContainer.id = `${this._id}-upload-container`;
+            wrapper.appendChild(uploadContainer);
+            container.appendChild(wrapper);
+            upload.render(uploadContainer);
+        } else {
+            container.appendChild(wrapper);
+        }
 
-        // Create internal table
-        this._table = new Table(`${this._id}-table`, {
+        // Status bar (conditional)
+        if (this._showStatus) {
+            const statusBar = document.createElement('div');
+            statusBar.className = 'jux-dataframe-status jux-dataframe-status-empty';
+            statusBar.id = `${this._id}-status`;
+            statusBar.textContent = 'No data loaded.';
+            wrapper.appendChild(statusBar);
+        }
+
+        // Table — filterable is false initially; we enable it after data loads
+        const tbl = new Table(`${this._id}-table`, {
             striped: this._tableOptions.striped,
             hoverable: this._tableOptions.hoverable,
             sortable: this._tableOptions.sortable,
-            filterable: this._tableOptions.filterable,
+            filterable: false, // we handle filtering ourselves
             paginated: this._tableOptions.paginated,
             rowsPerPage: this._tableOptions.rowsPerPage
         });
-        this._table.render(wrapper);
-
-        // Watch state for status updates
-        const origUpdate = this.update.bind(this);
-        this.update = (prop: string, value: any) => {
-            origUpdate(prop, value);
-            if (prop === 'loaded' || prop === 'loading' || prop === 'rowCount' || prop === 'colCount' || prop === 'sourceName') {
-                const el = document.getElementById(`${this._id}-status`);
-                if (el) {
-                    if (this.state.loading) {
-                        el.textContent = '⏳ Loading...';
-                    } else if (this.state.loaded) {
-                        el.textContent = `✅ ${this.state.sourceName} — ${this.state.rowCount} rows × ${this.state.colCount} cols`;
-                    } else {
-                        el.textContent = 'No data loaded.';
-                    }
-                }
-            }
-        };
+        tbl.render(wrapper);
+        this._table = tbl;
 
         // Execute pending data source
         if (this._pendingSource) {
-            this._pendingSource();
+            const fn = this._pendingSource;
             this._pendingSource = null;
+            fn();
         }
 
         this._wireStandardEvents(wrapper);
-
         return this;
     }
 }