juxscript 1.1.165 → 1.1.167

package/lib/components/dataframe.d.ts

@@ -12,6 +12,8 @@ export interface DataFrameOptions {
     filterable?: boolean;
     paginated?: boolean;
     rowsPerPage?: number;
+    showStatus?: boolean;
+    icon?: string;
     style?: string;
     class?: string;
 }
@@ -29,70 +31,42 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     private _uploadRef;
     private _storageKey;
     private _pendingSource;
+    private _inlineUpload;
+    private _showStatus;
+    private _icon;
     constructor(id: string, options?: DataFrameOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
-    /**
-     * Load from IndexedDB by storage key
-     */
     fromStorage(key: string): this;
-    /**
-     * Load from a FileUpload component — auto-wires change event
-     */
     fromUpload(upload: FileUpload): this;
-    /**
-     * Load from raw data — array of objects or Record<string, any[]>
-     */
     fromData(data: Record<string, any>[] | Record<string, any[]>): this;
     /**
-     * Apply a transform to the current DataFrame and update the table
+     * 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, accept?: string, icon?: string): this;
+    /** Show/hide the status bar */
+    showStatus(v: boolean): this;
+    /** Set a custom icon for the status bar */
+    statusIcon(v: string): this;
     apply(fn: (df: DataFrame) => DataFrame): this;
-    /**
-     * Filter rows
-     */
     filter(predicate: (row: Record<string, any>, index: number) => boolean): this;
-    /**
-     * Select columns
-     */
     select(...cols: string[]): this;
-    /**
-     * Sort by column
-     */
     sort(col: string, descending?: boolean): this;
-    /**
-     * Show first N rows
-     */
     head(n?: number): this;
-    /**
-     * Show last N rows
-     */
     tail(n?: number): this;
-    /**
-     * Add a computed column
-     */
     withColumn(name: string, fn: (row: Record<string, any>, index: number) => any): this;
-    /**
-     * Where clause
-     */
     where(col: string, op: '==' | '!=' | '>' | '<' | '>=' | '<=' | 'contains' | 'startsWith' | 'endsWith', value: any): this;
-    /** Get the underlying DataFrame */
     get df(): DataFrame | null;
-    /** Get the underlying TabularDriver */
     get driver(): TabularDriver;
-    /** Get the internal Table component */
     get table(): Table | null;
-    /** Get describe() stats */
     describe(): Record<string, any> | null;
-    /** Export to CSV string */
     toCSV(delimiter?: string): string;
-    /** Export to row objects */
     toRows(): Record<string, any>[];
-    /** Get shape */
     get shape(): [number, number];
-    /** Get column names */
     get columns(): string[];
-    /** Save current DataFrame to IndexedDB */
     save(key?: string): Promise<string | null>;
     striped(v: boolean): this;
     hoverable(v: boolean): this;
@@ -100,8 +74,10 @@ export declare class DataFrameComponent extends BaseComponent<DataFrameState> {
     filterable(v: boolean): this;
     paginated(v: boolean): this;
     rowsPerPage(v: number): this;
+    private _updateStatus;
     private _setDataFrame;
     private _updateTable;
+    private _showFilterInput;
     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

@@ -1,7 +1,9 @@
 import { BaseComponent } from './base/BaseComponent.js';
 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 = [];
 const CALLBACK_EVENTS = ['load', 'error', 'transform'];
 export class DataFrameComponent extends BaseComponent {
@@ -22,12 +24,17 @@ export class DataFrameComponent extends BaseComponent {
         this._uploadRef = null;
         this._storageKey = null;
         this._pendingSource = null;
+        this._inlineUpload = null;
+        this._showStatus = true;
+        this._icon = '';
         this._driver = new TabularDriver(options.dbName ?? 'jux-dataframes', 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
         };
@@ -37,18 +44,17 @@ export class DataFrameComponent extends BaseComponent {
     /* ═══════════════════════════════════════════════════
      * DATA SOURCES
      * ═══════════════════════════════════════════════════ */
-    /**
-     * Load from IndexedDB by storage key
-     */
     fromStorage(key) {
         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);
@@ -56,42 +62,44 @@ export class DataFrameComponent extends BaseComponent {
             catch (err) {
                 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) {
         this._uploadRef = upload;
         this._pendingSource = async () => {
-            // Wire upload's change event to parse incoming files
             upload.bind('change', async (files) => {
                 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) {
                     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) {
-        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');
@@ -99,16 +107,37 @@ export class DataFrameComponent extends BaseComponent {
             catch (err) {
                 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;
     }
-    /* ═══════════════════════════════════════════════════
-     * TRANSFORM API (returns new DataFrameComponent view)
-     * ═══════════════════════════════════════════════════ */
     /**
-     * Apply a transform to the current DataFrame and update the table
+     * 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 = 'Upload File', accept = '.csv,.tsv,.txt,.xlsx,.xls', icon = 'upload') {
+        this._inlineUpload = { label, accept, icon };
+        return this;
+    }
+    /* ═══════════════════════════════════════════════════
+     * UI TOGGLES
+     * ═══════════════════════════════════════════════════ */
+    /** Show/hide the status bar */
+    showStatus(v) { this._showStatus = v; return this; }
+    /** Set a custom icon for the status bar */
+    statusIcon(v) { this._icon = v; return this; }
+    /* ═══════════════════════════════════════════════════
+     * TRANSFORM API
+     * ═══════════════════════════════════════════════════ */
     apply(fn) {
         if (!this._df)
             return this;
@@ -117,78 +146,38 @@ export class DataFrameComponent extends BaseComponent {
         this._triggerCallback('transform', result, null, this);
         return this;
     }
-    /**
-     * Filter rows
-     */
     filter(predicate) {
         return this.apply(df => df.filter(predicate));
     }
-    /**
-     * Select columns
-     */
     select(...cols) {
         return this.apply(df => df.select(...cols));
     }
-    /**
-     * Sort by column
-     */
     sort(col, descending) {
         return this.apply(df => df.sort(col, descending));
     }
-    /**
-     * Show first N rows
-     */
     head(n = 5) {
         return this.apply(df => df.head(n));
     }
-    /**
-     * Show last N rows
-     */
     tail(n = 5) {
         return this.apply(df => df.tail(n));
     }
-    /**
-     * Add a computed column
-     */
     withColumn(name, fn) {
         return this.apply(df => df.withColumn(name, fn));
     }
-    /**
-     * Where clause
-     */
     where(col, op, value) {
         return this.apply(df => df.where(col, op, value));
     }
     /* ═══════════════════════════════════════════════════
      * ACCESSORS
      * ═══════════════════════════════════════════════════ */
-    /** Get the underlying DataFrame */
     get df() { return this._df; }
-    /** Get the underlying TabularDriver */
     get driver() { return this._driver; }
-    /** Get the internal Table component */
     get table() { return this._table; }
-    /** Get describe() stats */
-    describe() {
-        return this._df?.describe() ?? null;
-    }
-    /** Export to CSV string */
-    toCSV(delimiter) {
-        return this._df?.toCSV(delimiter) ?? '';
-    }
-    /** Export to row objects */
-    toRows() {
-        return this._df?.toRows() ?? [];
-    }
-    /** Get shape */
-    get shape() {
-        return this._df?.shape ?? [0, 0];
-    }
-    /** Get column names */
-    get columns() {
-        return this._df?.columns ?? [];
-    }
-    /** Save current DataFrame to IndexedDB */
+    describe() { return this._df?.describe() ?? null; }
+    toCSV(delimiter) { return this._df?.toCSV(delimiter) ?? ''; }
+    toRows() { return this._df?.toRows() ?? []; }
+    get shape() { return this._df?.shape ?? [0, 0]; }
+    get columns() { return this._df?.columns ?? []; }
     async save(key) {
         if (!this._df)
             return null;
@@ -207,6 +196,27 @@ export class DataFrameComponent extends BaseComponent {
     /* ═══════════════════════════════════════════════════
      * INTERNAL
      * ═══════════════════════════════════════════════════ */
+    _updateStatus(text, type = 'empty') {
+        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);
+    }
     _setDataFrame(df, sourceName) {
         this._df = df;
         this.state.loaded = true;
@@ -214,12 +224,16 @@ export class DataFrameComponent extends BaseComponent {
         this.state.sourceName = sourceName;
         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);
     }
     _updateTable() {
@@ -227,6 +241,49 @@ export class DataFrameComponent extends BaseComponent {
             return;
         this._table.columns(this._df.columns).rows(this._df.toRows());
     }
+    _showFilterInput() {
+        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, value) { }
     /* ═══════════════════════════════════════════════════
      * RENDER
@@ -241,47 +298,70 @@ export class DataFrameComponent extends BaseComponent {
             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);
-        container.appendChild(wrapper);
-        // Create internal table
-        this._table = new Table(`${this._id}-table`, {
+        // Inline upload
+        if (this._inlineUpload) {
+            const uploadOpts = {
+                label: this._inlineUpload.label,
+                accept: this._inlineUpload.accept,
+            };
+            if (this._inlineUpload.icon) {
+                uploadOpts.icon = this._inlineUpload.icon;
+            }
+            const upload = new FileUpload(`${this._id}-upload`, uploadOpts);
+            this._uploadRef = upload;
+            this._pendingSource = async () => {
+                upload.bind('change', async (files) => {
+                    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) {
+                        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);
+        }
+        // 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, value) => {
-            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;