@vuu-ui/vuu-data-local 2.1.19-beta.1 → 2.1.19-beta.2

package/src/tree-data-source/TreeDataSource.js

@@ -0,0 +1,353 @@
+import { BaseDataSource, KeySet, NULL_RANGE, getParentRow, isSingleValueFilter, lastPathSegment, metadataKeys, missingAncestor, treeToDataSourceRows, uuid } from "@vuu-ui/vuu-utils";
+import { IconProvider } from "./IconProvider.js";
+import { parseFilter } from "@vuu-ui/vuu-filter-parser";
+const TREE_SCHEMA = {
+    columns: [
+        {
+            name: "nodeData",
+            serverDataType: "string"
+        },
+        {
+            name: "Level 1",
+            serverDataType: "string"
+        },
+        {
+            name: "Level 2",
+            serverDataType: "string"
+        },
+        {
+            name: "Level 3",
+            serverDataType: "string"
+        },
+        {
+            name: "Level 4",
+            serverDataType: "string"
+        },
+        {
+            name: "Level 5",
+            serverDataType: "string"
+        }
+    ],
+    key: "",
+    table: {
+        module: "",
+        table: ""
+    }
+};
+const { COUNT: COUNT, DEPTH: DEPTH, IDX: IDX, IS_EXPANDED: IS_EXPANDED, IS_LEAF: IS_LEAF, KEY: KEY, SELECTED: SELECTED } = metadataKeys;
+const toClientRow = (row, keys)=>{
+    const [rowIndex] = row;
+    const clientRow = row.slice();
+    clientRow[1] = keys.keyFor(rowIndex);
+    return clientRow;
+};
+class TreeDataSource extends BaseDataSource {
+    columnDescriptors;
+    clientCallback;
+    expandedRows = new Set();
+    visibleRows = [];
+    visibleRowIndex = {};
+    #aggregations = [];
+    #data;
+    #iconProvider;
+    #selectedRowsCount = 0;
+    #size = 0;
+    #status = "initialising";
+    #filterSet;
+    rowCount;
+    keys = new KeySet(this._range);
+    constructor({ data, ...props }){
+        super(props);
+        if (!data) throw Error("TreeDataSource constructor called without data");
+        this.#iconProvider = new IconProvider();
+        [this.columnDescriptors, this.#data] = treeToDataSourceRows(data, this.#iconProvider);
+        console.table(this.#data);
+        if (this.columnDescriptors) {
+            const columns = this.columnDescriptors.map((c)=>c.name);
+            this._configWithVisualLink = {
+                ...this._configWithVisualLink,
+                columns,
+                groupBy: columns.slice(1)
+            };
+        }
+    }
+    async subscribe({ aggregations, columns, range, revealSelected, selectedKeyValues, viewport = this.viewport ?? uuid() }, callback) {
+        this.clientCallback = callback;
+        if (aggregations) this.#aggregations = aggregations;
+        if (columns) this._configWithVisualLink = {
+            ...this._configWithVisualLink,
+            columns
+        };
+        if ("initialising" !== this.#status) return;
+        this.viewport = viewport;
+        this.#status = "subscribed";
+        this.#selectedRowsCount = selectedKeyValues?.length ?? 0;
+        if (selectedKeyValues) this.applySelectedKeyValues(selectedKeyValues, revealSelected);
+        [this.visibleRows, this.visibleRowIndex] = getVisibleRows(this.#data, this.expandedRows);
+        this.clientCallback?.({
+            aggregations: this.#aggregations,
+            type: "subscribed",
+            clientViewportId: this.viewport,
+            columns: this.columns,
+            filterSpec: this.filter,
+            groupBy: this._configWithVisualLink.groupBy,
+            range: this.range,
+            sort: this.sort,
+            tableSchema: TREE_SCHEMA
+        });
+        this.clientCallback({
+            clientViewportId: this.viewport,
+            mode: "size-only",
+            type: "viewport-update",
+            size: this.visibleRows.length
+        });
+        if (range && !this._range.equals(range)) this.range = range;
+        else if (this._range !== NULL_RANGE) this.sendRowsToClient();
+    }
+    unsubscribe() {
+        console.log("noop");
+    }
+    suspend() {
+        console.log("noop");
+        return this;
+    }
+    resume() {
+        console.log("noop");
+        return this;
+    }
+    disable() {
+        console.log("noop");
+        return this;
+    }
+    enable() {
+        console.log("noop");
+        return this;
+    }
+    set data(data) {
+        [this.columnDescriptors, this.#data] = treeToDataSourceRows(data);
+        requestAnimationFrame(()=>{
+            this.sendRowsToClient();
+        });
+    }
+    get filter() {
+        return this._configWithVisualLink.filterSpec;
+    }
+    set filter(filter) {
+        this._configWithVisualLink = {
+            ...this._configWithVisualLink,
+            filterSpec: filter
+        };
+        if (filter.filter) this.applyFilter(filter);
+        else this.#filterSet = void 0;
+        [this.visibleRows, this.visibleRowIndex] = getVisibleRows(this.#data, this.expandedRows, this.#filterSet);
+        const { from, to } = this.range;
+        this.clientCallback?.({
+            clientViewportId: this.viewport,
+            mode: "batch",
+            rows: this.visibleRows.slice(from, to).map((row)=>toClientRow(row, this.keys)),
+            size: this.visibleRows.length,
+            type: "viewport-update"
+        });
+    }
+    applyFilter({ filter: filterQuery, filterStruct }) {
+        const filter = filterStruct ?? parseFilter(filterQuery);
+        if (isSingleValueFilter(filter)) {
+            const filterSet = [];
+            const regex = new RegExp(`${filter.value}`, "i");
+            for (const row of this.#data){
+                const { [KEY]: key, [IDX]: idx } = row;
+                if (regex.test(lastPathSegment(key, "|"))) filterSet.push(idx);
+            }
+            this.#filterSet = filterSet;
+        }
+    }
+    applySelectedKeyValues(keys, revealSelected = false) {
+        keys.forEach((key)=>{
+            const rowIdx = this.indexOfRowWithKey(key);
+            const row = this.#data[rowIdx];
+            row[SELECTED] = 1;
+            if (revealSelected && 1 !== row[DEPTH]) {
+                const keys = key.slice(6).split("|").slice(0, -1);
+                let path = "$root";
+                do {
+                    path = `${path}|${keys.shift()}`;
+                    this.expandedRows.add(path);
+                }while (keys.length)
+            }
+        });
+    }
+    indexOfRowWithKey = (key)=>this.#data.findIndex((row)=>row[KEY] === key);
+    select(selectRequest) {
+        const updatedRows = [];
+        switch(selectRequest.type){
+            case "SELECT_ROW":
+                {
+                    const { preserveExistingSelection, rowKey } = selectRequest;
+                    for (const row of this.visibleRows){
+                        const { [IDX]: rowIndex, [KEY]: key, [SELECTED]: sel } = row;
+                        if (1 === sel && false === preserveExistingSelection && key !== rowKey) {
+                            const deselectedRow = row.slice();
+                            deselectedRow[SELECTED] = 0;
+                            this.visibleRows[rowIndex] = deselectedRow;
+                            updatedRows.push(deselectedRow);
+                        } else if (key === rowKey) {
+                            const selectedRow = row.slice();
+                            selectedRow[SELECTED] = 1;
+                            this.visibleRows[rowIndex] = selectedRow;
+                            updatedRows.push(selectedRow);
+                        }
+                    }
+                    break;
+                }
+            case "DESELECT_ROW":
+                break;
+            default:
+        }
+        if (updatedRows.length > 0) this.clientCallback?.({
+            clientViewportId: this.viewport,
+            mode: "update",
+            type: "viewport-update",
+            rows: updatedRows
+        });
+    }
+    getRowKey(keyOrIndex) {
+        if ("string" == typeof keyOrIndex) return keyOrIndex;
+        const row = this.getRowAtIndex(keyOrIndex);
+        if (void 0 === row) throw Error(`row not found at index ${keyOrIndex}`);
+        return row[KEY];
+    }
+    openTreeNode(keyOrIndex) {
+        const key = this.getRowKey(keyOrIndex);
+        this.expandedRows.add(key);
+        [this.visibleRows, this.visibleRowIndex] = getVisibleRows(this.#data, this.expandedRows);
+        const { from, to } = this._range;
+        this.clientCallback?.({
+            clientViewportId: this.viewport,
+            mode: "batch",
+            rows: this.visibleRows.slice(from, to).map((row)=>toClientRow(row, this.keys)),
+            size: this.visibleRows.length,
+            type: "viewport-update"
+        });
+    }
+    closeTreeNode(keyOrIndex, cascade = false) {
+        const key = this.getRowKey(keyOrIndex);
+        this.expandedRows.delete(key);
+        if (cascade) {
+            for (const rowKey of this.expandedRows.keys())if (rowKey.startsWith(key)) this.expandedRows.delete(rowKey);
+        }
+        [this.visibleRows, this.visibleRowIndex] = getVisibleRows(this.#data, this.expandedRows);
+        this.sendRowsToClient();
+    }
+    get status() {
+        return this.#status;
+    }
+    get selectedRowsCount() {
+        return this.#selectedRowsCount;
+    }
+    get size() {
+        return this.#size;
+    }
+    rangeRequest(range) {
+        this.keys.reset(range);
+        requestAnimationFrame(()=>{
+            this.sendRowsToClient();
+        });
+    }
+    sendRowsToClient() {
+        const { from, to } = this._range;
+        this.clientCallback?.({
+            clientViewportId: this.viewport,
+            mode: "batch",
+            rows: this.visibleRows.slice(from, to).map((row)=>toClientRow(row, this.keys)),
+            size: this.visibleRows.length,
+            type: "viewport-update"
+        });
+    }
+    createLink({ parentVpId, link: { fromColumn, toColumn } }) {
+        console.log("create link", {
+            parentVpId,
+            fromColumn,
+            toColumn
+        });
+    }
+    removeLink() {
+        console.log("remove link");
+    }
+    async remoteProcedureCall() {
+        return Promise.reject();
+    }
+    async menuRpcCall(rpcRequest) {
+        console.log("rmenuRpcCall", {
+            rpcRequest
+        });
+    }
+    getChildRows(rowKey) {
+        const parentRow = this.#data.find((row)=>row[KEY] === rowKey);
+        if (parentRow) {
+            const { [IDX]: parentIdx, [DEPTH]: parentDepth } = parentRow;
+            let rowIdx = parentIdx + 1;
+            const childRows = [];
+            do {
+                const { [DEPTH]: depth } = this.#data[rowIdx];
+                if (depth === parentDepth + 1) childRows.push(this.#data[rowIdx]);
+                else if (depth <= parentDepth) break;
+                rowIdx += 1;
+            }while (rowIdx < this.#data.length)
+            return childRows;
+        }
+        console.warn(`JsonDataSource getChildRows row not found for key ${rowKey}`);
+        return [];
+    }
+    getRowsAtDepth(depth, visibleOnly = true) {
+        const rows = visibleOnly ? this.visibleRows : this.#data;
+        return rows.filter((row)=>row[DEPTH] === depth);
+    }
+    getRowAtIndex(rowIdx) {
+        return this.visibleRows[rowIdx];
+    }
+}
+function getVisibleRows(rows, expandedKeys, filterset) {
+    const visibleRows = [];
+    const visibleRowIndex = {};
+    const data = filterset ?? rows;
+    for(let i = 0, index = 0; i < data.length; i++){
+        const idx = filterset ? filterset[i] : i;
+        const row = rows[idx];
+        const { [COUNT]: count, [DEPTH]: depth, [KEY]: key, [IS_LEAF]: isLeaf } = row;
+        if (filterset) {
+            const previousRow = visibleRows.at(-1);
+            if (missingAncestor(row, previousRow)) {
+                let currentRow = row;
+                const missingRows = [];
+                while(currentRow){
+                    currentRow = getParentRow(rows, currentRow);
+                    if (currentRow) missingRows.unshift(currentRow);
+                }
+                missingRows.forEach((row)=>{
+                    visibleRows.push(cloneRow(row, index++, true));
+                });
+            }
+            visibleRows.push(cloneRow(row, index++, true));
+            visibleRowIndex[index] = i;
+        } else {
+            const isExpanded = expandedKeys.has(key);
+            visibleRows.push(cloneRow(row, index, isExpanded));
+            visibleRowIndex[index++] = i;
+            const skipNonVisibleRows = !isLeaf && !isExpanded && count > 0;
+            if (skipNonVisibleRows) do i += 1;
+            while (i < rows.length - 1 && rows[i + 1][DEPTH] > depth)
+        }
+    }
+    return [
+        visibleRows,
+        visibleRowIndex
+    ];
+}
+const cloneRow = (row, index, isExpanded)=>{
+    const dolly = row.slice();
+    dolly[0] = index;
+    dolly[1] = index;
+    if (isExpanded) dolly[IS_EXPANDED] = true;
+    return dolly;
+};
+export { TreeDataSource };