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

package/src/VuuDataSource.js

@@ -0,0 +1,573 @@
+import { BaseDataSource, Range, StaleUpdateError, combineFilters, constrainRange, debounce, isConfigChanged, 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;
+    #maxRangeEnd = Number.MAX_SAFE_INTEGER;
+    #maxRangeWidth = Number.MAX_SAFE_INTEGER;
+    #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;
+        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;
+            if (message.tableSchema.rangeLimits) {
+                this.#maxRangeEnd = message.tableSchema.rangeLimits.maxRangeEnd;
+                this.#maxRangeWidth = message.tableSchema.rangeLimits.maxRangeWidth;
+            }
+            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, this.#maxRangeEnd);
+                }
+                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);
+            }
+            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)) {
+                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 maxRangeEnd() {
+        return this.#maxRangeEnd;
+    }
+    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: constrainRange(range, this.#maxRangeEnd, this.#maxRangeWidth)
+        });
+    };
+    debounceRangeRequest = debounce((range)=>{
+        if (this.viewport && this.server) this.server.send({
+            viewport: this.viewport,
+            type: "setViewRange",
+            range: constrainRange(range, this.#maxRangeEnd, this.#maxRangeWidth)
+        });
+    }, 50);
+    throttleRangeRequest = throttle((range)=>{
+        if (this.viewport && this.server) this.server.send({
+            viewport: this.viewport,
+            type: "setViewRange",
+            range: constrainRange(range, this.#maxRangeEnd, this.#maxRangeWidth)
+        });
+    }, 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();
+    }
+    async createSessionDataSource(copyOption) {
+        const rpcResponse = await this?.rpcRequest?.({
+            type: "RPC_REQUEST",
+            rpcName: "createSessionTable",
+            params: {
+                copyOption
+            }
+        });
+        if (isRpcSuccess(rpcResponse)) {
+            const { table: sessionTable } = rpcResponse.data;
+            return new VuuDataSource({
+                ...this.config,
+                table: sessionTable,
+                viewport: sessionTable.table
+            });
+        }
+        throw Error(`[VuuDataSource] createSessionDataSource ${rpcResponse?.errorMessage}`);
+    }
+    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;
+            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");
+    }
+    async deleteRow(key, mode = "hard") {
+        const rpcHost = this.#sessionDataSource ?? this;
+        const response = await rpcHost.rpcRequest?.({
+            type: "RPC_REQUEST",
+            rpcName: "deleteRow",
+            params: {
+                key,
+                mode
+            }
+        });
+        if (isRpcSuccess(response)) return true;
+        return response?.errorMessage ?? "deleteRow failed";
+    }
+    async deleteSelectedRows(mode = "soft") {
+        const rpcHost = this.#sessionDataSource ?? this;
+        const response = await rpcHost.rpcRequest?.({
+            type: "RPC_REQUEST",
+            rpcName: "deleteSelectedRows",
+            params: {
+                mode
+            }
+        });
+        return response ?? {
+            type: "ERROR_RESULT",
+            errorMessage: "deleteSelectedRows failed"
+        };
+    }
+    async addRow(rowData = {}) {
+        const response = await this.rpcRequest?.({
+            type: "RPC_REQUEST",
+            rpcName: "addRow",
+            params: {
+                data: rowData
+            }
+        });
+        if (isRpcSuccess(response)) return true;
+        return response?.errorMessage ?? "addRow failed";
+    }
+    async undoRowChange(key) {
+        const rpcHost = this.#sessionDataSource ?? this;
+        const response = await rpcHost.rpcRequest?.({
+            type: "RPC_REQUEST",
+            rpcName: "undoRowChange",
+            params: {
+                key
+            }
+        });
+        return response ?? {
+            type: "ERROR_RESULT",
+            errorMessage: "undoRowChange failed"
+        };
+    }
+}
+export { VuuDataSource };