@vuu-ui/vuu-data-test 2.1.18 → 2.1.19-beta.2

package/package.json

@@ -1,33 +1,30 @@
 {
-  "version": "2.1.18",
+  "version": "2.1.19-beta.2",
+  "type": "module",
   "author": "heswell",
   "license": "Apache-2.0",
   "dependencies": {
-    "@vuu-ui/vuu-data-local": "2.1.18",
-    "@vuu-ui/vuu-utils": "2.1.18"
+    "@vuu-ui/vuu-data-local": "2.1.19-beta.2",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.2"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-protocol-types": "2.1.18",
-    "@vuu-ui/vuu-data-types": "2.1.18",
-    "@vuu-ui/vuu-table-types": "2.1.18"
+    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-data-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table-types": "2.1.19-beta.2"
   },
   "sideEffects": false,
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "require": "./cjs/index.js",
-      "import": "./esm/index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
+  "module": "index.js",
   "name": "@vuu-ui/vuu-data-test",
-  "type": "module",
   "types": "types/index.d.ts"
 }

package/src/ArrayProxy.js

@@ -0,0 +1,38 @@
+class ArrayProxy {
+    #getItem;
+    length = 0;
+    constructor(size, getRow){
+        this.#getItem = getRow;
+        this.length = size;
+        const handler = {
+            get: (target, prop)=>{
+                if ("length" === prop) return target.length;
+                if ("slice" === prop) return target.slice;
+                if ("map" === prop) return target.map;
+                if ("toString" === prop) return "[ArrayProxy]";
+                if ("string" == typeof prop) {
+                    const index = parseInt(prop, 10);
+                    if (!isNaN(index)) if (index < this.length) return target.#getItem(index);
+                    else return;
+                }
+                throw Error(`unsupported property ${String(prop)} on ArrayProxy`);
+            },
+            set: (target, prop, newVal)=>{
+                if ("length" === prop) {
+                    target.length = newVal;
+                    return true;
+                }
+                throw Error("ArrayProxy is immutable except for length");
+            }
+        };
+        return new Proxy(this, handler);
+    }
+    map = (func)=>new ArrayProxy(this.length, (i)=>func(this.#getItem(i), i));
+    slice = (from, to)=>{
+        const out = [];
+        const end = Math.min(this.length, to);
+        for(let i = from; i < end; i++)out.push(this.#getItem(i));
+        return out;
+    };
+}
+export { ArrayProxy };

package/src/RuntimeVisualLink.js

@@ -0,0 +1,45 @@
+import { buildColumnMap } from "@vuu-ui/vuu-utils";
+class RuntimeVisualLink {
+    #childColumnName;
+    #childDataSource;
+    #parentColumnName;
+    #parentDataSource;
+    constructor(childDataSource, parentDataSource, childColumnName, parentColumnName){
+        this.#childColumnName = childColumnName;
+        this.#childDataSource = childDataSource;
+        this.#parentColumnName = parentColumnName;
+        this.#parentDataSource = parentDataSource;
+        parentDataSource.on("row-selection", this.handleParentSelectEvent);
+    }
+    destroy() {}
+    remove() {
+        this.#parentDataSource?.removeListener("row-selection", this.handleParentSelectEvent);
+        this.#childDataSource.baseFilter = {
+            filter: ""
+        };
+    }
+    handleParentSelectEvent = ()=>{
+        if (this.#childDataSource) {
+            const selectedValues = this.pickUniqueSelectedValues();
+            if (0 === selectedValues.length) this.#childDataSource.baseFilter = void 0;
+            else if (1 === selectedValues.length) this.#childDataSource.baseFilter = {
+                filter: `${this.#childColumnName} = "${selectedValues[0]}"`
+            };
+            else this.#childDataSource.baseFilter = {
+                filter: `${this.#childColumnName} in ["${selectedValues.join('","')}"]`
+            };
+        }
+    };
+    pickUniqueSelectedValues() {
+        const dataSource = this.#parentDataSource;
+        const map = buildColumnMap(dataSource.columns);
+        const colIndex = map[this.#parentColumnName];
+        const set = new Set();
+        for (const key of dataSource.getSelectedRowIds()){
+            const row = dataSource.getRowByKey(key);
+            if (row) set.add(row[colIndex]);
+        }
+        return Array.from(set);
+    }
+}
+export { RuntimeVisualLink };

package/src/SessionTable.js

@@ -0,0 +1,49 @@
+import { EventEmitter } from "@vuu-ui/vuu-utils";
+const isProxy = Symbol("proxy-session-table");
+const isProxySessionTable = (table)=>table[isProxy];
+const SessionTable = (table, sessionId)=>{
+    const updates = new Map();
+    const eventEmitter = new EventEmitter();
+    const getSessionUpdates = ()=>updates;
+    const addEventListener = (event, handler)=>{
+        eventEmitter.on(event, handler);
+    };
+    const update = (key, columnName, value)=>{
+        const row = table.findByKey(key);
+        if (row) {
+            const tsIndex = table.map.vuuUpdatedTimestamp;
+            let updatesForRow = updates.get(key);
+            if (void 0 === updatesForRow) {
+                updatesForRow = {
+                    lastUpdateTimestamp: row[tsIndex],
+                    cellUpdates: {}
+                };
+                updates.set(key, updatesForRow);
+            }
+            updatesForRow.cellUpdates[columnName] = value;
+            const newRow = row.slice();
+            for (const [columnName, value] of Object.entries(updatesForRow.cellUpdates)){
+                const colIndex = table.map[columnName];
+                newRow[colIndex] = value;
+            }
+            eventEmitter.emit("update", newRow, columnName, sessionId);
+        } else console.warn(`SessionTable update row ${key} not found`);
+    };
+    return new Proxy(table, {
+        get (_obj, prop) {
+            if ("symbol" == typeof prop) {
+                if (prop === isProxy) return true;
+                return;
+            }
+            if ("getSessionUpdates" === prop) return getSessionUpdates;
+            if ("on" === prop || "addEventListener" === prop) return addEventListener;
+            if ("update" === prop) return update;
+            if ("isProxy" === prop) return true;
+            return table[prop];
+        },
+        set () {
+            throw new TypeError("SessionTable is readonly");
+        }
+    });
+};
+export { SessionTable, isProxySessionTable };

package/src/Table.js

@@ -0,0 +1,96 @@
+import { EventEmitter } from "@vuu-ui/vuu-utils";
+class Table extends EventEmitter {
+    #data;
+    #dataMap;
+    #indexOfKey;
+    #index = new Map();
+    #schema;
+    constructor(schema, data, dataMap, updateGenerator){
+        super();
+        this.#data = data;
+        this.#dataMap = dataMap;
+        this.#schema = schema;
+        this.#indexOfKey = dataMap[schema.key];
+        this.buildIndex();
+        updateGenerator?.setTable(this);
+        updateGenerator?.setRange({
+            from: 0,
+            to: 100
+        });
+    }
+    buildIndex() {
+        for(let i = 0; i < this.#data.length; i++){
+            const key = this.#data[i][this.#indexOfKey];
+            this.#index.set(key, i);
+        }
+    }
+    get data() {
+        return this.#data;
+    }
+    get map() {
+        return this.#dataMap;
+    }
+    get schema() {
+        return this.#schema;
+    }
+    get name() {
+        return this.#schema.table.table;
+    }
+    delete(key, emitEvent = true) {
+        const index = this.#index.get(key) ?? -1;
+        if (-1 !== index) {
+            this.#index.delete(key);
+            this.#data.splice(index, 1);
+            for(let i = index; i < this.#data.length; i++)this.#index.set(this.#data[i][this.#indexOfKey], i);
+            if (emitEvent) this.emit("delete", key);
+        } else throw Error(`[Table] delete key ${key} not found`);
+    }
+    insert(row, emitEvent = true) {
+        const index = this.#data.length;
+        this.#data.push(row);
+        const key = row[this.#indexOfKey];
+        this.#index.set(key, index);
+        if (emitEvent) this.emit("insert", row);
+    }
+    findByKey(key) {
+        const index = this.#index.get(key) ?? -1;
+        return this.#data[index];
+    }
+    update(key, columnName, value) {
+        const rowIndex = this.#data.findIndex((row)=>row[this.#indexOfKey] === key);
+        const colIndex = this.#dataMap[columnName];
+        if (-1 !== rowIndex) {
+            const row = this.#data[rowIndex];
+            const newRow = row.slice();
+            newRow[colIndex] = value;
+            const tsIndex = this.#dataMap.vuuUpdatedTimestamp;
+            if ("number" == typeof tsIndex) {
+                const lastUpdated = Date.now();
+                newRow[tsIndex] = lastUpdated;
+            }
+            this.#data[rowIndex] = newRow;
+            this.emit("update", newRow, columnName);
+        }
+    }
+    updateRow(row) {
+        const key = row[this.#indexOfKey];
+        const rowIndex = this.#data.findIndex((row)=>row[this.#indexOfKey] === key);
+        if (-1 !== rowIndex) {
+            const tsIndex = this.#dataMap.vuuUpdatedTimestamp;
+            const lastUpdated = Date.now();
+            row[tsIndex] = lastUpdated;
+            this.#data[rowIndex] = row;
+            this.emit("update", row);
+        }
+    }
+}
+function buildDataColumnMapFromSchema(schema) {
+    return Object.values(schema.columns).reduce((map, col, index)=>({
+            ...map,
+            [col.name]: index
+        }), {});
+}
+function buildDataColumnMap(schemas, tableName) {
+    return buildDataColumnMapFromSchema(schemas[tableName]);
+}
+export { Table, buildDataColumnMap, buildDataColumnMapFromSchema };

package/src/TickingArrayDataSource.js

@@ -0,0 +1,208 @@
+import { ArrayDataSource } from "@vuu-ui/vuu-data-local";
+import { isInlineEditingSession, isRpcSuccess, isTypeaheadRequest } from "@vuu-ui/vuu-utils";
+import { makeSuggestions } from "./makeSuggestions.js";
+class TickingArrayDataSource extends ArrayDataSource {
+    #menuRpcServices;
+    #pendingVisualLink;
+    #rpcMenuServices;
+    #rpcServices;
+    #sessionTables;
+    #sessionDataSource = void 0;
+    #table;
+    #selectionLinkSubscribers;
+    #visualLinkService;
+    #getVisualLinks;
+    #vuuModule;
+    constructor({ data, getVisualLinks, rpcServices, rpcMenuServices, sessionTables, table, menu, visualLink, visualLinkService, vuuModule, ...arrayDataSourceProps }){
+        if (void 0 === data && void 0 === table) throw Error("TickingArrayDataSource must be constructed with data");
+        super({
+            ...arrayDataSourceProps,
+            data: data ?? table?.data ?? [],
+            dataMap: table?.map
+        });
+        this._menu = menu;
+        this.#rpcMenuServices = rpcMenuServices;
+        this.#pendingVisualLink = visualLink;
+        this.#rpcServices = rpcServices;
+        this.#sessionTables = sessionTables;
+        this.#table = table;
+        this.#visualLinkService = visualLinkService;
+        this.#getVisualLinks = getVisualLinks;
+        this.#vuuModule = vuuModule;
+        if (table) {
+            this.tableSchema = table.schema;
+            table.on("insert", this.insert);
+            table.on("update", this.updateRowWithSessionCheck);
+            table.on("delete", this.deleteRow);
+        }
+    }
+    updateRowWithSessionCheck = (row, columnName, sessionId)=>{
+        if (sessionId && sessionId === this.viewport) this.updateRow(row, columnName);
+        else if (sessionId) console.warn("THIS IS NEVER EXPECTED TO HAPPEN");
+        else this.#sessionDataSource || this.updateRow(row, columnName);
+    };
+    async subscribe(subscribeProps, callback) {
+        const subscription = super.subscribe(subscribeProps, callback);
+        if (this.#pendingVisualLink) {
+            this.visualLink = this.#pendingVisualLink;
+            this.#pendingVisualLink = void 0;
+        }
+        return subscription;
+    }
+    unsubscribe() {
+        super.unsubscribe();
+        this.#table = void 0;
+    }
+    set range(range) {
+        super.range = range;
+    }
+    get range() {
+        return super.range;
+    }
+    set links(links) {
+        super.links = links;
+    }
+    get links() {
+        return this.#getVisualLinks?.(this.table.table);
+    }
+    getSelectedRowIds() {
+        return Array.from(this.selectedRows);
+    }
+    handleSessionMessage = (msg)=>{
+        if ("subscribed" === msg.type) ;
+        else if ("viewport-update" === msg.type) {
+            if (void 0 !== msg.size && msg.size !== this.size) this.emit("resize", msg.size);
+            this.clientCallback?.(msg);
+        }
+    };
+    createSessionDataSource(sessionTable) {
+        if (this.#vuuModule) return this.#vuuModule?.createDataSource(sessionTable.table, sessionTable.table);
+        throw Error("[TickingArrayDataSource] unable to createSessionDataSource, not constructed with VuuModule");
+    }
+    async beginEditSession(editSessionMode = "inline-all-rows") {
+        const rpcResponse = await this?.rpcRequest?.({
+            type: "RPC_REQUEST",
+            rpcName: "beginEditSession",
+            params: {
+                editSessionMode
+            }
+        });
+        if (isRpcSuccess(rpcResponse)) {
+            const { table: sessionTable } = rpcResponse.data;
+            if (!isInlineEditingSession(editSessionMode)) return this.#vuuModule?.createDataSource(sessionTable.table, sessionTable.table, this.config);
+            this.#sessionDataSource = this.#vuuModule?.createDataSource(sessionTable.table, sessionTable.table, this.config);
+            this.#sessionDataSource?.subscribe({
+                range: this.range
+            }, this.handleSessionMessage);
+        } else throw Error(`[VuuDataSource] beginEditSession ${rpcResponse.errorMessage}`);
+    }
+    async editCell(key, column, data) {
+        console.log(`[VuuDataSource] editCell ${this.#sessionDataSource?.viewport} rowKey ${key}, column ${column}, value ${data}`);
+        const rpcHost = this.#sessionDataSource ?? this;
+        return rpcHost.rpcRequest?.({
+            type: "RPC_REQUEST",
+            rpcName: "editCell",
+            params: {
+                column,
+                data,
+                key
+            }
+        });
+    }
+    async endEditSession(saveChanges = false) {
+        const type = "RPC_REQUEST";
+        const rpcName = "endEditSession";
+        const sessionDataSource = this.#sessionDataSource;
+        const rpcHost = sessionDataSource ?? this;
+        if (sessionDataSource) this.#sessionDataSource = void 0;
+        const rpcResponse = await rpcHost.rpcRequest?.(saveChanges ? {
+            type,
+            rpcName,
+            params: {
+                save: true
+            }
+        } : {
+            type,
+            rpcName,
+            params: {}
+        });
+        if (isRpcSuccess(rpcResponse)) {
+            sessionDataSource?.unsubscribe();
+            this.sendRowsToClient(true);
+        } else if (rpcResponse?.errorMessage === "stale update") {
+            sessionDataSource?.unsubscribe();
+            this.sendRowsToClient(true);
+        } else throw Error("unknown error");
+    }
+    async rpcRequest(rpcRequest) {
+        if (isTypeaheadRequest(rpcRequest)) {
+            const { params: { column, starts } } = rpcRequest;
+            const data = await this.getTypeaheadSuggestions(column, starts);
+            return {
+                type: "SUCCESS_RESULT",
+                data
+            };
+        }
+        {
+            const rpcService = this.#rpcServices?.find((service)=>service.rpcName === rpcRequest.rpcName);
+            if (rpcService) return rpcService.service({
+                ...rpcRequest,
+                context: {
+                    type: "VIEWPORT_CONTEXT",
+                    viewPortId: this.viewport
+                }
+            });
+            throw Error(`[TickingArrayDataSource] no service to handle RPC request ${rpcRequest.rpcName}`);
+        }
+    }
+    async menuRpcCall(rpcRequest) {
+        const rpcService = this.#rpcMenuServices?.find((service)=>service.rpcName === rpcRequest.rpcName);
+        if (rpcService) return rpcService.service({
+            ...rpcRequest,
+            vpId: this.viewport
+        });
+        throw Error(`[TickingArrayDataSource] menuRpcCall no service for ${rpcRequest.rpcName}`);
+    }
+    getTypeaheadSuggestions(column, pattern) {
+        if (this.#table) {
+            const columnIndex = this.columnMap[column];
+            if (void 0 !== columnIndex) return makeSuggestions(this.currentData, columnIndex, pattern);
+            console.warn(`[TickingArrayDataSource] getTypeaheadSuggestions. No column ${column}`);
+            return Promise.resolve([]);
+        }
+        throw Error("cannot call getTypeaheadSuggestions on TickingDataSource if table has not been provided");
+    }
+    get visualLink() {
+        return this._config.visualLink;
+    }
+    set visualLink(visualLink) {
+        this._config = {
+            ...this._config,
+            visualLink
+        };
+        if (visualLink) {
+            const { parentClientVpId, link: { fromColumn, toColumn } } = visualLink;
+            if (this.viewport) this.#visualLinkService?.({
+                childVpId: this.viewport,
+                childColumnName: fromColumn,
+                type: "CREATE_VISUAL_LINK",
+                parentVpId: parentClientVpId,
+                parentColumnName: toColumn
+            }).then((response)=>{
+                this.emit("visual-link-created", response);
+            });
+        } else this.#visualLinkService?.({
+            childVpId: this.viewport,
+            type: "REMOVE_VISUAL_LINK"
+        }).then(()=>{
+            this.emit("visual-link-removed");
+        });
+    }
+    freeze() {
+        super.freeze();
+    }
+    unfreeze() {
+        super.unfreeze();
+    }
+}
+export { TickingArrayDataSource };

package/src/UpdateGenerator.js

@@ -0,0 +1,72 @@
+import { generateNextBidAsk, nextRandomDouble, random } from "./data-utils.js";
+const getNewValue = (value)=>{
+    const multiplier = random(0, 100) / 1000;
+    const direction = random(0, 10) >= 5 ? 1 : -1;
+    return value + value * multiplier * direction;
+};
+class BaseUpdateGenerator {
+    table;
+    range;
+    updating = false;
+    timer;
+    tickingColumns;
+    constructor(tickingColumns){
+        this.tickingColumns = tickingColumns;
+    }
+    setRange(range) {
+        this.range = range;
+        if (!this.updating && this.table) this.startUpdating();
+    }
+    setTable(table) {
+        this.table = table;
+    }
+    startUpdating() {
+        this.updating = true;
+        this.update();
+    }
+    stopUpdating() {
+        this.updating = false;
+        if (this.timer) {
+            window.clearTimeout(this.timer);
+            this.timer = void 0;
+        }
+    }
+    update = ()=>{
+        if (this.range && this.table) {
+            const data = this.table?.data;
+            const { bid, ask, last, ...rest } = this.tickingColumns;
+            if (data && data?.length > 0) {
+                const maxRange = Math.min(this.range.to, data.length);
+                for(let rowIndex = this.range.from; rowIndex < maxRange; rowIndex++){
+                    let updateCount = 0;
+                    const shallUpdateRow = random(0, 10) < 2;
+                    if (shallUpdateRow) {
+                        const rowUpdates = this.table.data[rowIndex];
+                        const row = data[rowIndex];
+                        if (void 0 !== bid && void 0 !== ask) {
+                            const { [bid]: currentBid, [ask]: currentAsk } = row;
+                            const [newBid, newAsk] = generateNextBidAsk(currentBid, currentAsk, 10, 5, nextRandomDouble);
+                            rowUpdates[ask] = newAsk;
+                            rowUpdates[bid] = newBid;
+                            if (void 0 !== last) {
+                                const newLast = Math.round((currentAsk + (newAsk - currentAsk) / 2) * 100) / 100.0;
+                                rowUpdates[last] = newLast;
+                            }
+                        }
+                        for (const colIdx of Object.values(rest)){
+                            const shallUpdateColumn = random(0, 10) < 5;
+                            if (shallUpdateColumn) {
+                                updateCount += 1;
+                                const newValue = getNewValue(row[colIdx]);
+                                if (this.table) rowUpdates[colIdx] = newValue;
+                            }
+                        }
+                        if (this.table && updateCount > 0) this.table.updateRow(rowUpdates);
+                    }
+                }
+            }
+        }
+        if (this.updating) this.timer = window.setTimeout(this.update, 500);
+    };
+}
+export { BaseUpdateGenerator };