@vuu-ui/vuu-data-remote 3.0.0 → 3.1.0-beta.1

package/src/server-proxy/viewport.mjs

@@ -0,0 +1,608 @@
+import { KeySet, RangeMonitor, getFullRange, logger } from "@vuu-ui/vuu-utils";
+import { getFirstAndLastRows } from "../message-utils.mjs";
+import { ArrayBackedMovingWindow } from "./array-backed-moving-window.mjs";
+import * as __rspack_external__messages_mjs_d963f732 from "./messages.mjs";
+const { debug: debug, debugEnabled: debugEnabled, error: error, info: info, infoEnabled: infoEnabled, warn: warn } = logger("Viewport");
+const isLeafUpdate = ({ rowKey, updateType })=>"U" === updateType && !rowKey.startsWith("$root");
+const NO_DATA_UPDATE = [
+    void 0,
+    void 0
+];
+const NO_UPDATE_STATUS = {
+    count: 0,
+    mode: void 0,
+    size: 0,
+    ts: 0
+};
+class Viewport {
+    #status = "";
+    aggregations;
+    batchMode = false;
+    bufferSize;
+    #clientRange;
+    columns;
+    dataWindow;
+    filter;
+    groupBy;
+    sort;
+    hasUpdates = false;
+    pendingUpdates = [];
+    keys;
+    #maxRangeEnd = Number.MAX_SAFE_INTEGER;
+    pendingLinkedParent;
+    pendingOperations = new Map();
+    pendingRangeRequests = [];
+    postMessageToClient;
+    rowCountChanged = false;
+    lastUpdateStatus = NO_UPDATE_STATUS;
+    updateThrottleTimer = void 0;
+    rangeMonitor = new RangeMonitor("ViewPort");
+    clientViewportId;
+    disabled = false;
+    disabledActive = false;
+    frozen = false;
+    isTree = false;
+    links;
+    linkedParent;
+    serverViewportId;
+    suspended = false;
+    suspendTimer = null;
+    table;
+    title;
+    constructor({ aggregations, bufferSize = 50, columns, filterSpec: filter, groupBy = [], table, range, sort, title, viewport, visualLink }, postMessageToClient){
+        this.aggregations = aggregations;
+        this.bufferSize = bufferSize;
+        this.#clientRange = range;
+        this.clientViewportId = viewport;
+        this.columns = columns;
+        this.filter = filter;
+        this.groupBy = groupBy;
+        this.keys = new KeySet(range);
+        this.pendingLinkedParent = visualLink;
+        this.table = table;
+        this.sort = sort;
+        this.title = title;
+        infoEnabled && info?.(`${table.table} #${viewport},  bufferSize=${bufferSize}`);
+        this.dataWindow = new ArrayBackedMovingWindow(this.#clientRange, range, this.bufferSize);
+        this.postMessageToClient = postMessageToClient;
+    }
+    setLastSizeOnlyUpdateSize = (size)=>{
+        this.lastUpdateStatus.size = size;
+    };
+    setLastUpdate = (mode)=>{
+        const { ts: lastTS, mode: lastMode } = this.lastUpdateStatus;
+        let elapsedTime = 0;
+        if (lastMode === mode) {
+            const ts = Date.now();
+            this.lastUpdateStatus.count += 1;
+            this.lastUpdateStatus.ts = ts;
+            elapsedTime = 0 === lastTS ? 0 : ts - lastTS;
+        } else {
+            this.lastUpdateStatus.count = 1;
+            this.lastUpdateStatus.ts = 0;
+            elapsedTime = 0;
+        }
+        this.lastUpdateStatus.mode = mode;
+        return elapsedTime;
+    };
+    get hasUpdatesToProcess() {
+        if (this.suspended) return false;
+        return this.rowCountChanged || this.hasUpdates;
+    }
+    get size() {
+        return this.dataWindow.rowCount ?? 0;
+    }
+    get clientRange() {
+        return this.#clientRange;
+    }
+    get status() {
+        return this.#status;
+    }
+    set status(status) {
+        this.#status = status;
+    }
+    subscribe() {
+        const { filter } = this.filter;
+        this.status = "subscribed" === this.#status ? "resubscribing" : "subscribing";
+        return {
+            type: __rspack_external__messages_mjs_d963f732.CREATE_VP,
+            table: this.table,
+            range: getFullRange(this.#clientRange, this.bufferSize),
+            aggregations: this.aggregations,
+            columns: this.columns,
+            sort: this.sort,
+            groupBy: this.groupBy,
+            filterSpec: {
+                filter
+            }
+        };
+    }
+    handleSubscribed({ viewPortId, aggregations, columns, filterSpec: filter, range, sort, groupBy, table }, baseTableSchema) {
+        this.serverViewportId = viewPortId;
+        this.status = "subscribed";
+        this.aggregations = aggregations;
+        this.columns = columns;
+        this.groupBy = groupBy;
+        this.isTree = groupBy && groupBy.length > 0;
+        this.dataWindow.setRange(range.from, range.to);
+        const tableSchema = table === baseTableSchema.table.table ? baseTableSchema : {
+            ...baseTableSchema,
+            table: {
+                ...baseTableSchema.table,
+                session: table
+            }
+        };
+        if (tableSchema.rangeLimits) this.#maxRangeEnd = tableSchema.rangeLimits?.maxRangeEnd;
+        return {
+            aggregations,
+            type: "subscribed",
+            clientViewportId: this.clientViewportId,
+            columns,
+            filterSpec: filter,
+            groupBy,
+            range,
+            sort,
+            tableSchema
+        };
+    }
+    awaitOperation(requestId, msg) {
+        this.pendingOperations.set(requestId, msg);
+    }
+    rejectOperation(requestId, _msg) {
+        const { pendingOperations } = this;
+        const pendingOperation = pendingOperations.get(requestId);
+        if (!pendingOperation) return void error(`no matching operation found to reject for requestId ${requestId}`);
+        const { type } = pendingOperation;
+        pendingOperations.delete(requestId);
+        if ("CHANGE_VP_RANGE" === type) for(let i = this.pendingRangeRequests.length - 1; i >= 0; i--){
+            const pendingRangeRequest = this.pendingRangeRequests[i];
+            if (pendingRangeRequest.requestId === requestId) {
+                pendingRangeRequest.nacked = true;
+                break;
+            }
+            warn?.("range requests sent faster than they are being ACKed");
+        }
+    }
+    completeOperation(requestId, ...params) {
+        const { clientViewportId, pendingOperations } = this;
+        const pendingOperation = pendingOperations.get(requestId);
+        if (!pendingOperation) return void error(`no matching operation found to complete for requestId ${requestId}`);
+        const { type } = pendingOperation;
+        info?.(`completeOperation ${type}`);
+        pendingOperations.delete(requestId);
+        if ("CHANGE_VP_RANGE" === type) {
+            const [from, to] = params;
+            infoEnabled && info(`completeOperation CHANGE_VP_RANGE
+        window setRange (${from}:${to}) ${this.pendingRangeRequests.length} range requests pending`);
+            this.dataWindow?.setRange(from, to);
+            for(let i = this.pendingRangeRequests.length - 1; i >= 0; i--){
+                const pendingRangeRequest = this.pendingRangeRequests[i];
+                if (pendingRangeRequest.requestId === requestId) {
+                    pendingRangeRequest.acked = true;
+                    break;
+                }
+                warn?.("range requests sent faster than they are being ACKed");
+            }
+        } else if ("config" === type) {
+            const { aggregations, columns, filterSpec: filter, groupBy, sort } = pendingOperation.data;
+            this.aggregations = aggregations;
+            this.columns = columns;
+            this.filter = filter;
+            this.groupBy = groupBy;
+            this.sort = sort;
+            if (groupBy.length > 0) this.isTree = true;
+            else if (this.isTree) this.isTree = false;
+            debug?.(`config change confirmed, isTree : ${this.isTree}`);
+            return {
+                clientViewportId,
+                type,
+                config: pendingOperation.data
+            };
+        } else if ("selection" === type) ;
+        else if ("disable" === type) {
+            this.suspended = false;
+            this.disabled = true;
+            this.disabledActive = pendingOperation.disableActive;
+            return {
+                type: "disabled",
+                clientViewportId
+            };
+        } else if ("enable" === type) {
+            this.disabled = false;
+            this.disabledActive = false;
+            return {
+                type: "enabled",
+                clientViewportId
+            };
+        } else if ("freeze" === type) {
+            this.frozen = true;
+            return {
+                type: "frozen",
+                clientViewportId
+            };
+        } else if ("unfreeze" === type) {
+            this.frozen = false;
+            return {
+                type: "unfrozen",
+                clientViewportId
+            };
+        } else if ("CREATE_VISUAL_LINK" === type) {
+            const [colName, parentViewportId, parentColName] = params;
+            this.linkedParent = {
+                colName,
+                parentViewportId,
+                parentColName
+            };
+            this.pendingLinkedParent = void 0;
+            return {
+                requestId,
+                type: "vuu-link-created",
+                clientViewportId,
+                colName,
+                parentViewportId,
+                parentColName
+            };
+        } else if ("REMOVE_VISUAL_LINK" === type) {
+            this.linkedParent = void 0;
+            return {
+                requestId,
+                type: "vuu-link-removed",
+                clientViewportId
+            };
+        }
+    }
+    rangeRequest(requestId, range) {
+        if (debugEnabled) this.rangeMonitor.set(range);
+        infoEnabled && info(`(bufferSize ${this.bufferSize}) rangeRequest (${range.from}:${range.to}) current: window client (${this.dataWindow.clientRange.from}:${this.dataWindow.clientRange.to}), full (${this.dataWindow.range.from}:${this.dataWindow.range.to}) `);
+        const type = "CHANGE_VP_RANGE";
+        if (!this.dataWindow) return [
+            null
+        ];
+        {
+            const [serverDataRequired, clientRows] = this.dataWindow.setClientRange(range.from, range.to);
+            infoEnabled && info(`updated: dataWindow clientRange (${this.dataWindow.clientRange.from}:${this.dataWindow.clientRange.to}), fullRange (${this.dataWindow.range.from}:${this.dataWindow.range.to}) serverDataRequired ${serverDataRequired ? "Y" : "N"} ${clientRows.length} rows returned from local buffer`);
+            let debounceRequest;
+            const maxRange = this.#maxRangeEnd;
+            const serverRequest = serverDataRequired && !this.rangeRequestAlreadyPending(range) ? {
+                type,
+                viewPortId: this.serverViewportId,
+                ...getFullRange(range, this.bufferSize, maxRange)
+            } : null;
+            if (serverRequest) {
+                infoEnabled && info(`create CHANGE_VP_RANGE: (${serverRequest.from} - ${serverRequest.to})`);
+                debugEnabled && debug?.(`create CHANGE_VP_RANGE: [${serverRequest.from} - ${serverRequest.to}]`);
+                this.awaitOperation(requestId, {
+                    type
+                });
+                const pendingRequest = this.pendingRangeRequests.at(-1);
+                if (pendingRequest) if (pendingRequest.acked) console.warn("Range Request before previous request is filled");
+                else {
+                    const { from, to } = pendingRequest;
+                    if (this.dataWindow.outOfRange(from, to)) debounceRequest = {
+                        clientViewportId: this.clientViewportId,
+                        type: "debounce-begin"
+                    };
+                    else warn?.("Range Request before previous request is acked");
+                }
+                this.pendingRangeRequests.push({
+                    ...serverRequest,
+                    requestId
+                });
+            } else if (clientRows.length > 0) this.batchMode = false;
+            this.keys.reset(this.dataWindow.clientRange);
+            const toClient = this.isTree ? toClientRowTree : toClientRow;
+            if (clientRows.length) return [
+                serverRequest,
+                clientRows.map((row)=>toClient(row, this.keys))
+            ];
+            if (debounceRequest) return [
+                serverRequest,
+                void 0,
+                debounceRequest
+            ];
+            return [
+                serverRequest
+            ];
+        }
+    }
+    setLinks(links) {
+        this.links = links.filter((link)=>link.parentVpId !== this.serverViewportId);
+        return [
+            {
+                type: "vuu-links",
+                links: this.links,
+                clientViewportId: this.clientViewportId
+            },
+            this.pendingLinkedParent
+        ];
+    }
+    setMenu(menu) {
+        return {
+            type: "vuu-menu",
+            menu,
+            clientViewportId: this.clientViewportId
+        };
+    }
+    openTreeNode(requestId, message) {
+        const treeKey = void 0 === message.index ? message.key : this.getKeyForRowAtIndex(message.index);
+        infoEnabled && info(`treeKey ${treeKey}`);
+        return {
+            type: __rspack_external__messages_mjs_d963f732.OPEN_TREE_NODE,
+            vpId: this.serverViewportId,
+            treeKey
+        };
+    }
+    closeTreeNode(requestId, message) {
+        const treeKey = void 0 === message.index ? message.key : this.getKeyForRowAtIndex(message.index);
+        return {
+            type: __rspack_external__messages_mjs_d963f732.CLOSE_TREE_NODE,
+            vpId: this.serverViewportId,
+            treeKey
+        };
+    }
+    createLink(requestId, vuuCreateVisualLink) {
+        const message = {
+            ...vuuCreateVisualLink,
+            childVpId: this.serverViewportId
+        };
+        this.awaitOperation(requestId, message);
+        return message;
+    }
+    removeLink(requestId) {
+        const message = {
+            type: "REMOVE_VISUAL_LINK",
+            childVpId: this.serverViewportId
+        };
+        this.awaitOperation(requestId, message);
+        return message;
+    }
+    suspend() {
+        this.suspended = true;
+        this.pendingUpdates.length = 0;
+        info?.("suspend");
+    }
+    resume() {
+        this.suspended = false;
+        if (debugEnabled) debug?.(`resume: ${this.currentData()}`);
+        return [
+            this.size,
+            this.currentData()
+        ];
+    }
+    currentData() {
+        const out = [];
+        if (this.dataWindow) {
+            const records = this.dataWindow.getData();
+            const { keys } = this;
+            const toClient = this.isTree ? toClientRowTree : toClientRow;
+            for (const row of records)if (row) out.push(toClient(row, keys));
+        }
+        return out;
+    }
+    enable(requestId) {
+        this.awaitOperation(requestId, {
+            type: "enable"
+        });
+        info?.(`enable: ${this.serverViewportId}`);
+        return {
+            type: __rspack_external__messages_mjs_d963f732.ENABLE_VP,
+            viewPortId: this.serverViewportId
+        };
+    }
+    disable(requestId, disableActive = false) {
+        this.awaitOperation(requestId, {
+            type: "disable",
+            disableActive
+        });
+        info?.(`disable: ${this.serverViewportId}`);
+        return {
+            type: __rspack_external__messages_mjs_d963f732.DISABLE_VP,
+            viewPortId: this.serverViewportId
+        };
+    }
+    freeze(requestId) {
+        this.awaitOperation(requestId, {
+            type: "freeze"
+        });
+        info?.(`freeze: ${this.serverViewportId}`);
+        return {
+            type: "FREEZE_VP",
+            viewPortId: this.serverViewportId
+        };
+    }
+    unfreeze(requestId) {
+        this.awaitOperation(requestId, {
+            type: "unfreeze"
+        });
+        info?.(`unfreeze: ${this.serverViewportId}`);
+        this.frozen = false;
+        return {
+            type: "UNFREEZE_VP",
+            viewPortId: this.serverViewportId
+        };
+    }
+    setConfig(requestId, config) {
+        this.awaitOperation(requestId, {
+            type: "config",
+            data: config
+        });
+        const { filterSpec: filter, ...remainingConfig } = config;
+        debugEnabled ? debug?.(`setConfig ${JSON.stringify(config)}`) : info?.("setConfig");
+        if (!this.isTree && config.groupBy.length > 0) this.dataWindow?.clear();
+        return this.createRequest({
+            ...remainingConfig,
+            filterSpec: "string" == typeof filter?.filter ? {
+                filter: filter.filter
+            } : {
+                filter: ""
+            }
+        }, true);
+    }
+    selectRequest(request) {
+        info?.(`selectRequest: ${request.type}`);
+        if (this.serverViewportId) return {
+            ...request,
+            vpId: this.serverViewportId
+        };
+        throw Error(`[Viewport] cannot process ${request.type} before serverViewportId has been set`);
+    }
+    removePendingRangeRequest(firstIndex, lastIndex) {
+        for(let i = this.pendingRangeRequests.length - 1; i >= 0; i--){
+            const { from, to } = this.pendingRangeRequests[i];
+            let isLast = true;
+            if (firstIndex >= from && firstIndex < to || lastIndex > from && lastIndex < to) {
+                if (!isLast) console.warn("removePendingRangeRequest TABLE_ROWS are not for latest request");
+                this.pendingRangeRequests.splice(i, 1);
+                break;
+            }
+            isLast = false;
+        }
+    }
+    rangeRequestAlreadyPending = (range)=>{
+        const { bufferSize } = this;
+        const bufferThreshold = 0.25 * bufferSize;
+        let { from: stillPendingFrom } = range;
+        for (const { from, to } of this.pendingRangeRequests)if (stillPendingFrom >= from && stillPendingFrom < to) if (range.to + bufferThreshold <= to) return true;
+        else stillPendingFrom = to;
+        return false;
+    };
+    clearCache() {
+        this.dataWindow.setRowCount(0);
+        this.postMessageToClient({
+            clientViewportId: this.clientViewportId,
+            type: "viewport-clear"
+        });
+    }
+    updateRows(rows) {
+        const [firstRow, lastRow] = getFirstAndLastRows(rows);
+        if (firstRow && lastRow) this.removePendingRangeRequest(firstRow.rowIndex, lastRow.rowIndex);
+        if (1 === rows.length) {
+            if (0 === firstRow.vpSize && this.disabled) return void debug?.(`ignore a SIZE=0 message on disabled viewport (${rows.length} rows)`);
+        }
+        for (const row of rows)if (this.isTree && isLeafUpdate(row)) continue;
+        else {
+            if ("SIZE" === row.updateType || this.dataWindow?.rowCount !== row.vpSize) {
+                this.dataWindow?.setRowCount(row.vpSize);
+                this.rowCountChanged = true;
+            }
+            if ("U" === row.updateType) {
+                if (this.dataWindow?.setAtIndex(row)) {
+                    if (true !== this.suspended) {
+                        this.hasUpdates = true;
+                        if (!this.batchMode) this.pendingUpdates.push(row);
+                    }
+                }
+            }
+        }
+    }
+    getKeyForRowAtIndex(rowIndex) {
+        const row = this.dataWindow.getAtIndex(rowIndex);
+        return row?.rowKey;
+    }
+    getClientRows() {
+        let out;
+        let mode = "size-only";
+        if (!this.hasUpdates && !this.rowCountChanged) return NO_DATA_UPDATE;
+        if (this.hasUpdates) {
+            const { keys } = this;
+            const toClient = this.isTree ? toClientRowTree : toClientRow;
+            if (this.updateThrottleTimer) {
+                self.clearTimeout(this.updateThrottleTimer);
+                this.updateThrottleTimer = void 0;
+            }
+            if (this.pendingUpdates.length > 0) {
+                out = [];
+                mode = "update";
+                for (const row of this.pendingUpdates)out.push(toClient(row, keys));
+            }
+            this.pendingUpdates.length = 0;
+            this.hasUpdates = false;
+        }
+        if (this.throttleMessage(mode)) return NO_DATA_UPDATE;
+        return [
+            out,
+            mode
+        ];
+    }
+    sendThrottledSizeMessage = ()=>{
+        this.updateThrottleTimer = void 0;
+        this.lastUpdateStatus.count = 3;
+        this.postMessageToClient({
+            clientViewportId: this.clientViewportId,
+            mode: "size-only",
+            size: this.lastUpdateStatus.size,
+            type: "viewport-update"
+        });
+    };
+    shouldThrottleMessage = (mode)=>{
+        const elapsedTime = this.setLastUpdate(mode);
+        return "size-only" === mode && elapsedTime > 0 && elapsedTime < 500 && this.lastUpdateStatus.count > 3;
+    };
+    throttleMessage = (mode)=>{
+        if (this.shouldThrottleMessage(mode)) {
+            info?.("[Viewport] throttling updates setTimeout to 300");
+            this.setLastSizeOnlyUpdateSize(this.dataWindow.rowCount);
+            if (void 0 === this.updateThrottleTimer) this.updateThrottleTimer = setTimeout(this.sendThrottledSizeMessage, 100);
+            return true;
+        }
+        if (void 0 !== this.updateThrottleTimer) {
+            clearTimeout(this.updateThrottleTimer);
+            this.updateThrottleTimer = void 0;
+        }
+        return false;
+    };
+    getNewRowCount = ()=>{
+        if (this.rowCountChanged && this.dataWindow) {
+            this.rowCountChanged = false;
+            return this.dataWindow.rowCount;
+        }
+    };
+    createRequest(params, overWrite = false) {
+        if (overWrite) return {
+            type: "CHANGE_VP",
+            viewPortId: this.serverViewportId,
+            ...params
+        };
+        return {
+            type: "CHANGE_VP",
+            viewPortId: this.serverViewportId,
+            aggregations: this.aggregations,
+            columns: this.columns,
+            sort: this.sort,
+            groupBy: this.groupBy,
+            filterSpec: {
+                filter: this.filter.filter
+            },
+            ...params
+        };
+    }
+}
+const isNew = false;
+const toClientRow = ({ rowIndex, rowKey, sel: isSelected, data, ts }, keys)=>[
+        rowIndex,
+        keys.keyFor(rowIndex),
+        true,
+        false,
+        0,
+        0,
+        rowKey,
+        isSelected,
+        ts,
+        isNew
+    ].concat(data);
+const toClientRowTree = ({ rowIndex, rowKey, sel: isSelected, data, ts }, keys)=>{
+    const [depth, isExpanded, , isLeaf, , count, ...rest] = data;
+    return [
+        rowIndex,
+        keys.keyFor(rowIndex),
+        isLeaf,
+        isExpanded,
+        depth,
+        count,
+        rowKey,
+        isSelected,
+        ts,
+        isNew
+    ].concat(rest);
+};
+export { NO_DATA_UPDATE, Viewport };

package/src/worker.mjs

@@ -0,0 +1,65 @@
+import { isConnectionQualityMetrics, logger } from "@vuu-ui/vuu-utils";
+import { ServerProxy } from "./server-proxy/server-proxy.mjs";
+import { WebSocketConnection } from "./WebSocketConnection.mjs";
+let serverProxy;
+let webSocketConnection;
+const { info: info, infoEnabled: infoEnabled } = logger("worker");
+const sendMessageToClient = (message)=>{
+    postMessage(message);
+};
+async function connectToServer(url, protocols, token) {
+    if (void 0 === webSocketConnection && void 0 === serverProxy) {
+        webSocketConnection = new WebSocketConnection({
+            callback: (msg)=>{
+                if (isConnectionQualityMetrics(msg)) postMessage({
+                    type: "connection-metrics",
+                    messages: msg
+                });
+                else serverProxy.handleMessageFromServer(msg);
+            },
+            protocols,
+            url
+        });
+        webSocketConnection.on("connection-status", postMessage);
+        serverProxy = new ServerProxy(webSocketConnection, sendMessageToClient);
+    }
+    await webSocketConnection.openWebSocket();
+    return serverProxy.login(token);
+}
+const handleMessageFromClient = async ({ data: message })=>{
+    switch(message.type){
+        case "connect":
+            try {
+                const sessionId = await connectToServer(message.url, message.protocol, message.token);
+                postMessage({
+                    type: "connected",
+                    sessionId
+                });
+            } catch (err) {
+                postMessage({
+                    type: "connection-failed",
+                    reason: String(err)
+                });
+            }
+            break;
+        case "disconnect":
+            serverProxy.disconnect();
+            webSocketConnection?.close();
+            break;
+        case "subscribe":
+            infoEnabled && info(`===> ${JSON.stringify(message)}`);
+            serverProxy.subscribe(message);
+            break;
+        case "unsubscribe":
+            infoEnabled && info(`===> ${JSON.stringify(message)}`);
+            serverProxy.unsubscribe(message.viewport);
+            break;
+        default:
+            infoEnabled && info(`===> ${JSON.stringify(message)}`);
+            serverProxy.handleMessageFromClient(message);
+    }
+};
+self.addEventListener("message", handleMessageFromClient);
+postMessage({
+    type: "ready"
+});