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

package/src/VuuDataSource.js

@@ -0,0 +1,514 @@
+import { BaseDataSource, Range, StaleUpdateError, combineFilters, debounce, isConfigChanged, isInlineEditingSession, isRpcSuccess, isSelectSuccessWithRowCount, isViewportMenusAction, isVisualLinksAction, itemsOrOrderChanged, logger, throttle, uuid } from "@vuu-ui/vuu-utils";
+import ConnectionManager from "./ConnectionManager.js";
+import { isDataSourceConfigMessage } from "./data-source.js";
+const { info: info, infoEnabled: infoEnabled } = logger("VuuDataSource");
+const combineColumnsWithAutosubscribeColumns = (columns, autosubscribeColumns = [])=>{
+    if (0 === autosubscribeColumns.length) return columns;
+    {
+        const out = columns.slice();
+        autosubscribeColumns.forEach((name)=>{
+            if (!out.includes(name)) out.push(name);
+        });
+        return out;
+    }
+};
+class VuuDataSource extends BaseDataSource {
+    bufferSize;
+    server = null;
+    rangeRequest;
+    #allColumns;
+    #autosubscribeColumns = [];
+    #pendingVisualLink;
+    #links;
+    #menu;
+    #optimize = "throttle";
+    #selectedRowsCount = 0;
+    #sessionDataSource = void 0;
+    #sessionTableMessageColumn = void 0;
+    #status = "initialising";
+    #tableSchema;
+    table;
+    constructor({ sessionTableMessageColumn, ...props }){
+        super(props);
+        const { bufferSize = 100, table, visualLink } = props;
+        if (!table) throw Error("RemoteDataSource constructor called without table");
+        this.bufferSize = bufferSize;
+        this.table = table;
+        this.#pendingVisualLink = visualLink;
+        this.#sessionTableMessageColumn = sessionTableMessageColumn;
+        this.rangeRequest = this.rawRangeRequest;
+        if (props.autosubscribeColumns) {
+            this.#autosubscribeColumns = props.autosubscribeColumns;
+            this.#allColumns = combineColumnsWithAutosubscribeColumns(super.columns, props.autosubscribeColumns);
+        }
+    }
+    async subscribe(subscribeProps, callback) {
+        super.subscribe(subscribeProps, callback);
+        const { viewport = this.viewport || (this.viewport = uuid()) } = subscribeProps;
+        console.log(`[VuuDataSource] subscribe ${this.viewport}`);
+        if ("disabled" === this.#status || "disabling" === this.#status || "enabling" === this.#status) return void this.enable(callback);
+        if ("initialising" !== this.#status && "unsubscribed" !== this.#status) throw Error(`[VuuDataSource] invalid status ${this.#status} for subscribe`);
+        this.#status = "subscribing";
+        this.server = await ConnectionManager.serverAPI;
+        const { bufferSize } = this;
+        const { columns, ...dataSourceConfig } = combineFilters(this.config);
+        this.server?.subscribe({
+            ...dataSourceConfig,
+            bufferSize,
+            columns: this.columns,
+            range: this._range.withBuffer,
+            table: this.table,
+            title: this._title,
+            viewport
+        }, this.handleMessageFromServer);
+    }
+    handleMessageFromServer = (message)=>{
+        if ("subscribed" === message.type) {
+            this.#status = "subscribed";
+            this.tableSchema = message.tableSchema;
+            this._clientCallback?.(message);
+            if (this.#pendingVisualLink) {
+                this.visualLink = this.#pendingVisualLink;
+                this.#pendingVisualLink = void 0;
+            }
+            this.emit("subscribed", message);
+        } else if ("disabled" === message.type) this.#status = "disabled";
+        else if ("enabled" === message.type) {
+            this.#status = "subscribed";
+            this.emit("enabled", this.viewport);
+        } else if (isDataSourceConfigMessage(message)) return;
+        else if ("debounce-begin" === message.type) this.optimize = "debounce";
+        else {
+            if ("viewport-update" === message.type) {
+                if (void 0 !== message.size && message.size !== this.size) {
+                    this.size = message.size;
+                    this.emit("resize", message.size);
+                }
+                if (Array.isArray(message.rows) && message.rows.length > 0 && this.#sessionDataSource) {
+                    this.emit("remote-update-during-local-edit", message.rows);
+                    console.log(`updates incoming whilst edit in progress ${this.viewport}`);
+                    console.table(message.rows);
+                    return;
+                }
+            } else if ("viewport-clear" === message.type) {
+                this.size = 0;
+                this.emit("resize", 0);
+            }
+            if (this.isAwaitingConfirmationOfConfigChange) this.confirmConfigChange();
+            if (isViewportMenusAction(message)) this.#menu = message.menu;
+            else if (isVisualLinksAction(message)) this.#links = message.links;
+            else {
+                if (infoEnabled && "viewport-update" === message.type) info(`handleMessageFromServer<viewport-update> range (${message.range?.from}:${message.range?.to}) rows ${message.rows?.at(0)?.[0]} - ${message.rows?.at(-1)?.[0]}`);
+                this._clientCallback?.(message);
+            }
+            if ("debounce" === this.optimize) this.revertDebounce();
+        }
+    };
+    handleSessionMessageFromServer = (msg)=>{
+        if ("subscribed" === msg.type) console.log("[VuuDataSource subscribed to session table]");
+        else if ("viewport-update" === msg.type) {
+            if (void 0 !== msg.size && msg.size !== this.size) {
+                this.size = msg.size;
+                this.emit("resize", msg.size);
+            }
+            console.log(`[VuuDataSource] clientCallback with ${msg.type}`);
+            this._clientCallback?.(msg);
+        }
+    };
+    unsubscribe() {
+        if ("unsubscribed" !== this.#status) {
+            info?.(`unsubscribe #${this.viewport}`);
+            if (this.viewport) {
+                this.server?.unsubscribe(this.viewport);
+                this.emit("unsubscribed", this.viewport);
+            }
+            this.server?.destroy(this.viewport);
+            this.server = null;
+            this.removeAllListeners();
+            this.#status = "unsubscribed";
+            this.viewport = "";
+            this.range = Range(0, 0);
+        }
+    }
+    suspend(escalateToDisable = this._defaultSuspenseProps.escalateToDisable, escalateDelay = this._defaultSuspenseProps.escalateDelay) {
+        if ("unsubscribed" !== this.#status) {
+            info?.(`suspend #${this.viewport}, current status ${this.#status}`);
+            if (this.viewport) {
+                this.#status = "suspended";
+                this.server?.send({
+                    escalateDelay,
+                    escalateToDisable,
+                    type: "suspend",
+                    viewport: this.viewport
+                });
+                this.emit("suspended", this.viewport);
+            }
+        }
+    }
+    sendResumeMessage() {
+        this.server?.send({
+            type: "resume",
+            viewport: this.viewport
+        });
+    }
+    resume(callback) {
+        const isDisabled = this.#status.startsWith("disabl");
+        const isSuspended = "suspended" === this.#status;
+        info?.(`resume #${this.viewport}, current status ${this.#status}`);
+        if (callback) this._clientCallback = callback;
+        if (this.viewport) {
+            if (isDisabled) this.enable();
+            else if (isSuspended) {
+                this.sendResumeMessage();
+                this.#status = "subscribed";
+                this.emit("resumed", this.viewport);
+                if (this.#selectedRowsCount > 0) this.emit("row-selection", this.#selectedRowsCount);
+            }
+        }
+    }
+    freeze() {
+        super.freeze();
+        if (this.viewport) this.server?.send({
+            viewport: this.viewport,
+            type: "FREEZE_VP"
+        });
+    }
+    unfreeze() {
+        super.unfreeze();
+        if (this.viewport) this.server?.send({
+            viewport: this.viewport,
+            type: "UNFREEZE_VP"
+        });
+    }
+    disable() {
+        info?.(`disable #${this.viewport}, current status ${this.#status}`);
+        if (this.viewport) {
+            this.#status = "disabling";
+            this.server?.send({
+                viewport: this.viewport,
+                type: "disable"
+            });
+            this.emit("disabled", this.viewport);
+        }
+    }
+    enable(callback) {
+        info?.(`enable #${this.viewport}, current status ${this.#status}`);
+        if (this.viewport && ("disabled" === this.#status || "disabling" === this.#status)) {
+            this.#status = "enabling";
+            if (callback) this._clientCallback = callback;
+            this.server?.send({
+                viewport: this.viewport,
+                type: "enable"
+            });
+            this.emit("enabled", this.viewport);
+        }
+    }
+    async select(selectRequest) {
+        if (this.viewport && this.server) {
+            const response = await this.server.select({
+                ...selectRequest,
+                vpId: this.viewport
+            });
+            if (isSelectSuccessWithRowCount(response)) {
+                console.log(`[VuuDataSource] select selectedRowCount ${response.selectedRowCount}`);
+                this.#selectedRowsCount = response.selectedRowCount;
+                this.emit("row-selection", response.selectedRowCount);
+            } else console.warn("select error");
+        }
+    }
+    openTreeNode(keyOrIndex) {
+        if (this.viewport) {
+            const [key, index] = "string" == typeof keyOrIndex ? [
+                keyOrIndex
+            ] : [
+                void 0,
+                keyOrIndex
+            ];
+            this.server?.send({
+                index,
+                key,
+                type: "openTreeNode",
+                viewport: this.viewport
+            });
+        }
+    }
+    closeTreeNode(keyOrIndex) {
+        if (this.viewport) {
+            const [key, index] = "string" == typeof keyOrIndex ? [
+                keyOrIndex
+            ] : [
+                void 0,
+                keyOrIndex
+            ];
+            this.server?.send({
+                index,
+                key,
+                type: "closeTreeNode",
+                viewport: this.viewport
+            });
+        }
+    }
+    get columns() {
+        return this.#allColumns ?? super.columns;
+    }
+    set columns(columns) {
+        super.columns = columns;
+        if (this.#autosubscribeColumns.length) this.#allColumns = combineColumnsWithAutosubscribeColumns(columns, this.#autosubscribeColumns);
+    }
+    get tableSchema() {
+        return this.#tableSchema;
+    }
+    set tableSchema(tableSchema) {
+        this.#tableSchema = tableSchema;
+    }
+    get links() {
+        return this.#links;
+    }
+    get menu() {
+        return this.#menu;
+    }
+    get status() {
+        return this.#status;
+    }
+    get optimize() {
+        return this.#optimize;
+    }
+    set optimize(optimize) {
+        if (optimize !== this.#optimize) {
+            this.#optimize = optimize;
+            switch(optimize){
+                case "none":
+                    this.rangeRequest = this.rawRangeRequest;
+                    break;
+                case "debounce":
+                    this.rangeRequest = this.debounceRangeRequest;
+                    break;
+                case "throttle":
+                    this.rangeRequest = this.throttleRangeRequest;
+                    break;
+            }
+            this.emit("optimize", optimize);
+        }
+    }
+    revertDebounce = debounce(()=>{
+        this.optimize = "throttle";
+    }, 100);
+    get selectedRowsCount() {
+        return this.#selectedRowsCount;
+    }
+    rawRangeRequest = (range)=>{
+        if (this.viewport && this.server) this.server.send({
+            viewport: this.viewport,
+            type: "setViewRange",
+            range
+        });
+    };
+    debounceRangeRequest = debounce((range)=>{
+        if (this.viewport && this.server) this.server.send({
+            viewport: this.viewport,
+            type: "setViewRange",
+            range
+        });
+    }, 50);
+    throttleRangeRequest = throttle((range)=>{
+        if (this.viewport && this.server) this.server.send({
+            viewport: this.viewport,
+            type: "setViewRange",
+            range
+        });
+    }, 80);
+    get config() {
+        return super.config;
+    }
+    set config(config) {
+        const { noChanges, columnsChanged } = isConfigChanged(this.config, config);
+        if (!noChanges) {
+            super.config = config;
+            const { columns, ...dataSourceConfig } = combineFilters(this.config);
+            const serverConfig = {
+                ...dataSourceConfig,
+                columns: combineColumnsWithAutosubscribeColumns(columns, this.#autosubscribeColumns)
+            };
+            if (columnsChanged && this.#autosubscribeColumns.length) this.#allColumns = combineColumnsWithAutosubscribeColumns(columns, this.#autosubscribeColumns);
+            this.server?.send({
+                viewport: this.viewport,
+                type: "config",
+                config: serverConfig
+            });
+        }
+    }
+    set impendingConfig(config) {
+        if (config !== this.config) {
+            super.impendingConfig = config;
+            this.server?.send({
+                viewport: this.viewport,
+                type: "config",
+                config: combineFilters(this.config)
+            });
+        }
+    }
+    get groupBy() {
+        return this._configWithVisualLink.groupBy;
+    }
+    set groupBy(groupBy) {
+        if (itemsOrOrderChanged(this.groupBy, groupBy)) {
+            const wasGrouped = this.groupBy.length > 0;
+            this.impendingConfig = {
+                ...this._configWithVisualLink,
+                groupBy
+            };
+            if (!wasGrouped && groupBy.length > 0 && this.viewport) this._clientCallback?.({
+                clientViewportId: this.viewport,
+                mode: "batch",
+                type: "viewport-update",
+                size: 0,
+                rows: []
+            });
+        }
+    }
+    get range() {
+        return super.range;
+    }
+    set range(range) {
+        super.range = range;
+        if (this.#sessionDataSource) this.#sessionDataSource.range = range;
+    }
+    get title() {
+        return super.title || `${this.table.module} ${this.table.table}`;
+    }
+    set title(title) {
+        super.title = title;
+        if (this.viewport && title) this.server?.send({
+            type: "setTitle",
+            title,
+            viewport: this.viewport
+        });
+    }
+    get visualLink() {
+        return this._configWithVisualLink.visualLink;
+    }
+    set visualLink(visualLink) {
+        this._configWithVisualLink = {
+            ...this._configWithVisualLink,
+            visualLink
+        };
+        if (visualLink) {
+            const { parentClientVpId, link: { fromColumn, toColumn } } = visualLink;
+            if (this.viewport) this.server?.rpcCall({
+                childColumnName: fromColumn,
+                childVpId: this.viewport,
+                parentColumnName: toColumn,
+                parentVpId: parentClientVpId,
+                type: "CREATE_VISUAL_LINK"
+            }).then((response)=>{
+                this.emit("visual-link-created", response);
+            });
+        } else if (this.viewport) this.server?.rpcCall({
+            type: "REMOVE_VISUAL_LINK",
+            childVpId: this.viewport
+        }).then(()=>{
+            this.emit("visual-link-removed");
+        });
+        this.emit("config", this._configWithVisualLink, this.range);
+    }
+    async remoteProcedureCall() {
+        return Promise.reject();
+    }
+    createSessionDataSource(sessionTable) {
+        const columns = this.#sessionTableMessageColumn ? this.columns.concat(this.#sessionTableMessageColumn) : this.columns;
+        return new VuuDataSource({
+            columns: columns,
+            table: sessionTable
+        });
+    }
+    async beginEditSession(editSessionMode = "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 new VuuDataSource({
+                ...this.config,
+                table: sessionTable,
+                viewport: sessionTable.table
+            });
+            {
+                const columns = this.#sessionTableMessageColumn ? this.columns.concat(this.#sessionTableMessageColumn) : this.columns;
+                this.#sessionDataSource = new VuuDataSource({
+                    ...this.config,
+                    columns,
+                    table: sessionTable,
+                    viewport: sessionTable.table
+                });
+                this.#sessionDataSource.subscribe({
+                    range: this.range
+                }, this.handleSessionMessageFromServer);
+            }
+        } else throw Error(`[VuuDataSource] beginEditSession ${rpcResponse.errorMessage}`);
+    }
+    async editCell(key, column, data) {
+        const rpcHost = this.#sessionDataSource ?? this;
+        return rpcHost.rpcRequest?.({
+            type: "RPC_REQUEST",
+            rpcName: "editCell",
+            params: {
+                column,
+                data,
+                key
+            }
+        });
+    }
+    async endEditSession(saveChanges = false, force = 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,
+                force
+            }
+        } : {
+            type,
+            rpcName,
+            params: {}
+        });
+        if (isRpcSuccess(rpcResponse)) {
+            if (sessionDataSource) sessionDataSource?.unsubscribe();
+        } else if (rpcResponse?.errorMessage === "stale update") {
+            this.#sessionDataSource = sessionDataSource;
+            throw new StaleUpdateError(rpcResponse.errorMessage);
+        } else throw Error("unknown error");
+        this.sendResumeMessage();
+    }
+    async rpcRequest(rpcRequest) {
+        if (this.viewport && this.server) return this.server?.rpcCall({
+            ...rpcRequest,
+            context: {
+                type: "VIEWPORT_CONTEXT",
+                viewPortId: this.viewport
+            }
+        });
+        throw Error("rpcCall server or viewport are undefined");
+    }
+    async menuRpcCall(rpcRequest) {
+        if (this.viewport) return this.server?.rpcCall({
+            ...rpcRequest,
+            vpId: this.viewport
+        });
+    }
+    insertRow() {
+        return Promise.resolve("not supported");
+    }
+    deleteRow() {
+        return Promise.resolve("not supported");
+    }
+}
+export { VuuDataSource };

package/src/WebSocketConnection.js

@@ -0,0 +1,149 @@
+import { DeferredPromise, EventEmitter, isLoginErrorMessage, logger } from "@vuu-ui/vuu-utils";
+const isInvalidTokenReason = (text)=>"Invalid token" === text || "Token has expired" === text;
+const isInvalidSessionReason = (text)=>"Invalid session" === text || "User session limit exceeded" === text;
+const { debug: debug, debugEnabled: debugEnabled, info: info } = logger("WebSocketConnection");
+const isWebSocketConnectionStatus = (msg)=>"string" == typeof msg && [
+        "connecting",
+        "websocket-open",
+        "connected",
+        "reconnecting",
+        "reconnected",
+        "disconnected",
+        "closed",
+        "failed"
+    ].includes(msg);
+const isConnected = (status)=>"connected" === status || "reconnected" === status;
+const isLoginRejectedMessage = (message)=>null !== message && "type" in message && "LOGIN_REJECTED" === message.type;
+const DEFAULT_CONNECTION_TIMEOUT = 10000;
+const parseWebSocketMessage = (message)=>{
+    try {
+        return JSON.parse(message);
+    } catch (e) {
+        throw Error(`Error parsing JSON response from server ${message}`);
+    }
+};
+class WebSocketConnection extends EventEmitter {
+    #callback;
+    #confirmedOpen = false;
+    #connectionPhase = "initial-connection";
+    #connectionStatus = "closed";
+    #connectionTimeout;
+    #deferredOpen;
+    #protocols;
+    #url;
+    #ws;
+    constructor({ callback, connectionTimeout = DEFAULT_CONNECTION_TIMEOUT, protocols, url }){
+        super();
+        this.#callback = callback;
+        this.#connectionTimeout = connectionTimeout;
+        this.#url = url;
+        this.#protocols = protocols;
+    }
+    get connectionTimeout() {
+        return this.#connectionTimeout;
+    }
+    get protocols() {
+        return this.#protocols;
+    }
+    get isClosed() {
+        return "closed" === this.#connectionStatus;
+    }
+    get isDisconnected() {
+        return "disconnected" === this.#connectionStatus;
+    }
+    get connectionPhase() {
+        return this.#connectionPhase;
+    }
+    get connectionStatus() {
+        return this.#connectionStatus;
+    }
+    set connectionStatus(connectionStatus) {
+        if ("connecting" !== connectionStatus && "reconnecting" !== connectionStatus) {
+            this.#connectionStatus = connectionStatus;
+            this.emit("connection-status", this.#connectionStatus);
+        }
+    }
+    get confirmedOpen() {
+        return this.#confirmedOpen;
+    }
+    set confirmedOpen(confirmedOpen) {
+        this.#confirmedOpen = confirmedOpen;
+        if (confirmedOpen && "initial-connection" === this.#connectionPhase) this.#connectionPhase = "post-disconnect-reconnection";
+    }
+    get url() {
+        return this.#url;
+    }
+    async openWebSocket() {
+        const initialConnect = "initial-connection" === this.#connectionPhase;
+        if (void 0 === this.#deferredOpen) this.#deferredOpen = new DeferredPromise();
+        const { connectionTimeout, protocols, url } = this;
+        this.#connectionStatus = initialConnect ? "connecting" : "reconnecting";
+        const timer = setTimeout(()=>{
+            throw Error(`Failed to open WebSocket connection to ${url}, timed out after ${connectionTimeout}ms`);
+        }, connectionTimeout);
+        const ws = this.#ws = new WebSocket(url, protocols);
+        ws.onopen = ()=>{
+            this.connectionStatus = "websocket-open";
+            clearTimeout(timer);
+            if (this.#deferredOpen) {
+                this.#deferredOpen.resolve(void 0);
+                this.#deferredOpen = void 0;
+            }
+        };
+        ws.onerror = ()=>{
+            clearTimeout(timer);
+        };
+        ws.onclose = ()=>{
+            if (!this.isClosed) {
+                this.confirmedOpen = false;
+                this.connectionStatus = "disconnected";
+                this.close("failure");
+            }
+        };
+        ws.onmessage = (evt)=>{
+            this.receive(evt);
+        };
+        return this.#deferredOpen?.promise;
+    }
+    receive = (evt)=>{
+        if (isLoginErrorMessage(evt.data)) {
+            console.warn("[WebSocketConnection] closed because of login issue");
+            if (this.#deferredOpen) console.warn("... and we have a deferred connection");
+            this.#callback({
+                type: "LOGIN_REJECTED",
+                reason: evt.data
+            });
+            this.close(evt.data);
+        } else {
+            const vuuMessageFromServer = parseWebSocketMessage(evt.data);
+            if (debugEnabled) {
+                if ("HB" !== vuuMessageFromServer.body.type) {
+                    debug(`<=== ${vuuMessageFromServer.body.type}`);
+                    if ("CHANGE_VP_SUCCESS" === vuuMessageFromServer.body.type) debug(JSON.stringify(vuuMessageFromServer.body));
+                }
+            }
+            this.#callback(vuuMessageFromServer);
+            if (!this.confirmedOpen) {
+                if ("LOGIN_SUCCESS" === vuuMessageFromServer.body.type) {
+                    this.connectionStatus = "initial-connection" === this.#connectionPhase ? "connected" : "reconnected";
+                    this.confirmedOpen = true;
+                }
+            }
+        }
+    };
+    send = (msg)=>{
+        if ("CHANGE_VP_RANGE" === msg.body.type) info?.(`===> CHANGE_VP_RANGE<#${msg.requestId}> ${msg.body.from}-${msg.body.to}`);
+        this.#ws?.send(JSON.stringify(msg));
+    };
+    close(reason = "shutdown") {
+        this.connectionStatus = "closed";
+        if ("failure" === reason) {
+            if (this.#deferredOpen) {
+                this.#deferredOpen.reject(Error("connection failed"));
+                this.#deferredOpen = void 0;
+            }
+        } else this.#ws?.close();
+        this.#ws = void 0;
+    }
+}
+export { WebSocketConnection, isConnected, isInvalidSessionReason, isInvalidTokenReason, isLoginRejectedMessage, isWebSocketConnectionStatus };