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

package/src/array-data-source/array-data-utils.js

@@ -0,0 +1,41 @@
+import { metadataKeys } from "@vuu-ui/vuu-utils";
+const { KEY: KEY, RENDER_IDX: RENDER_IDX, SELECTED: SELECTED } = metadataKeys;
+const replaceBigInt = (value)=>{
+    if ("bigint" == typeof value) return value.toString();
+    return value;
+};
+const toClientRow = (row, keys, selectedRows, dataIndices)=>{
+    const [rowIndex] = row;
+    const selectedAll = selectedRows.has("*");
+    let clientRow;
+    if (dataIndices) {
+        const { count } = metadataKeys;
+        clientRow = row.slice(0, count).concat(dataIndices.map((idx)=>replaceBigInt(row[idx])));
+    } else clientRow = row.map(replaceBigInt);
+    clientRow[RENDER_IDX] = keys.keyFor(rowIndex);
+    clientRow[SELECTED] = selectedAll || selectedRows.has(row[KEY]) ? 1 : 0;
+    return clientRow;
+};
+const divergentMaps = (columnMap, dataMap)=>{
+    if (dataMap) {
+        const { count: mapOffset } = metadataKeys;
+        for (const [columnName, index] of Object.entries(columnMap)){
+            const dataIdx = dataMap[columnName];
+            if (void 0 === dataIdx) throw Error(`ArrayDataSource column ${columnName} is not in underlying data set`);
+            if (dataIdx !== index - mapOffset) return true;
+        }
+    }
+    return false;
+};
+const getDataIndices = (columnMap, dataMap)=>{
+    const { count: mapOffset } = metadataKeys;
+    const result = [];
+    Object.entries(columnMap).forEach(([columnName])=>{
+        result.push(dataMap[columnName] + mapOffset);
+    });
+    return result;
+};
+const buildDataToClientMap = (columnMap, dataMap)=>{
+    if (dataMap && divergentMaps(columnMap, dataMap)) return getDataIndices(columnMap, dataMap);
+};
+export { buildDataToClientMap, toClientRow };

package/src/array-data-source/group-utils.js

@@ -0,0 +1,138 @@
+import { metadataKeys } from "@vuu-ui/vuu-utils";
+const { DEPTH: DEPTH, IS_EXPANDED: IS_EXPANDED, KEY: KEY } = metadataKeys;
+const timestamp = 0;
+const isNew = false;
+const collapseGroup = (key, groupedRows)=>{
+    const rows = [];
+    for(let i = 0, idx = 0, collapsed = false, len = groupedRows.length; i < len; i++){
+        const row = groupedRows[i];
+        const { [DEPTH]: depth, [KEY]: rowKey } = row;
+        if (rowKey === key) {
+            const collapsedRow = row.slice();
+            collapsedRow[IS_EXPANDED] = false;
+            rows.push(collapsedRow);
+            idx += 1;
+            collapsed = true;
+            while(i < len - 1 && groupedRows[i + 1][DEPTH] > depth)i += 1;
+        } else if (collapsed) {
+            const newRow = row.slice();
+            newRow[0] = idx;
+            newRow[1] = idx;
+            rows.push(newRow);
+            idx += 1;
+        } else {
+            rows.push(row);
+            idx += 1;
+        }
+    }
+    return rows;
+};
+const expandGroup = (keys, sourceRows, groupBy, columnMap, groupMap, processedData)=>{
+    const groupIndices = groupBy.map((column)=>columnMap[column]);
+    return dataRowsFromGroups2(groupMap, groupIndices, keys, sourceRows, void 0, void 0, void 0, processedData);
+};
+const dataRowsFromGroups2 = (groupMap, groupIndices, openKeys, sourceRows = [], root = "$root", depth = 1, rows = [], processedData)=>{
+    const keys = Object.keys(groupMap).sort();
+    for (const key of keys){
+        const idx = rows.length;
+        const groupKey = `${root}|${key}`;
+        const row = [
+            idx,
+            idx,
+            false,
+            false,
+            depth,
+            childCount(groupMap[key]),
+            groupKey,
+            0,
+            timestamp,
+            isNew
+        ];
+        row[groupIndices[depth - 1]] = key;
+        rows.push(row);
+        if (openKeys.includes(groupKey)) {
+            row[IS_EXPANDED] = true;
+            if (Array.isArray(groupMap[key])) pushChildren(rows, groupMap[key], sourceRows, groupKey, depth + 1);
+            else dataRowsFromGroups2(groupMap[key], groupIndices, openKeys, sourceRows, groupKey, depth + 1, rows, processedData);
+        }
+    }
+    for(const key in rows)for(const index in rows)if (false === rows[key][2] && void 0 != processedData[index]) {
+        if (rows[key][groupIndices[0]] === processedData[index][groupIndices[0]]) {
+            rows[key] = rows[key].splice(0, 8).concat(processedData[index].slice(8, processedData[index].length));
+            break;
+        }
+    }
+    return rows;
+};
+const pushChildren = (rows, tree, sourceRows, parentKey, depth)=>{
+    for (const rowIdx of tree){
+        const idx = rows.length;
+        const sourceRow = sourceRows[rowIdx].slice();
+        sourceRow[0] = idx;
+        sourceRow[1] = idx;
+        sourceRow[DEPTH] = depth;
+        sourceRow[KEY] = `${parentKey}|${sourceRow[KEY]}`;
+        rows.push(sourceRow);
+    }
+};
+const groupRows = (rows, groupBy, columnMap)=>{
+    const groupIndices = groupBy.map((column)=>columnMap[column]);
+    const groupTree = groupLeafRows(rows, groupIndices);
+    const groupedDataRows = dataRowsFromGroups(groupTree, groupIndices);
+    return [
+        groupedDataRows,
+        groupTree
+    ];
+};
+const dataRowsFromGroups = (groupTree, groupIndices)=>{
+    const depth = 0;
+    const rows = [];
+    let idx = 0;
+    const keys = Object.keys(groupTree).sort();
+    for (const key of keys){
+        const row = [
+            idx,
+            idx,
+            false,
+            false,
+            1,
+            childCount(groupTree[key]),
+            `$root|${key}`,
+            0,
+            timestamp,
+            isNew
+        ];
+        row[groupIndices[depth]] = key;
+        rows.push(row);
+        idx += 1;
+    }
+    return rows;
+};
+function childCount(list) {
+    if (Array.isArray(list)) return list.length;
+    return Object.keys(list).length;
+}
+function groupLeafRows(leafRows, groupby) {
+    const groups = {};
+    const levels = groupby.length;
+    const lastLevel = levels - 1;
+    for(let i = 0, len = leafRows.length; i < len; i++){
+        const leafRow = leafRows[i];
+        let target = groups;
+        let targetNode;
+        let key;
+        for(let level = 0; level < levels; level++){
+            const colIdx = groupby[level];
+            key = leafRow[colIdx].toString();
+            targetNode = target[key];
+            if (targetNode && level === lastLevel) targetNode.push(i);
+            else if (targetNode) target = targetNode;
+            else if (!targetNode && level < lastLevel) target = target[key] = {};
+            else if (!targetNode) target[key] = [
+                i
+            ];
+        }
+    }
+    return groups;
+}
+export { collapseGroup, expandGroup, groupRows };

package/src/array-data-source/sort-utils.js

@@ -0,0 +1,56 @@
+const defaultSortPredicate = (r1, r2, [i, direction])=>{
+    const val1 = "D" === direction ? r2[i] : r1[i];
+    const val2 = "D" === direction ? r1[i] : r2[i];
+    if (val1 === val2) return 0;
+    if (null === val2 || val1 > val2) return 1;
+    return -1;
+};
+const sortComparator = (sortDefs)=>{
+    if (1 === sortDefs.length) return singleColComparator(sortDefs);
+    if (2 === sortDefs.length) return twoColComparator(sortDefs);
+    return multiColComparator(sortDefs);
+};
+const singleColComparator = ([[i, direction]])=>(r1, r2)=>{
+        const v1 = "D" === direction ? r2[i] : r1[i];
+        const v2 = "D" === direction ? r1[i] : r2[i];
+        return v1 > v2 ? 1 : v2 > v1 ? -1 : 0;
+    };
+const twoColComparator = ([[idx1, direction1], [idx2, direction2]])=>(r1, r2)=>{
+        const v1 = "D" === direction1 ? r2[idx1] : r1[idx1];
+        const v2 = "D" === direction1 ? r1[idx1] : r2[idx1];
+        const v3 = "D" === direction2 ? r2[idx2] : r1[idx2];
+        const v4 = "D" === direction2 ? r1[idx2] : r2[idx2];
+        return v1 > v2 ? 1 : v2 > v1 ? -1 : v3 > v4 ? 1 : v4 > v3 ? -1 : 0;
+    };
+const multiColComparator = (sortDefs, test = defaultSortPredicate)=>(r1, r2)=>{
+        for (const sortDef of sortDefs){
+            const result = test(r1, r2, sortDef);
+            if (0 !== result) return result;
+        }
+        return 0;
+    };
+const sortRows = (rows, { sortDefs }, columnMap)=>{
+    const indexedSortDefs = sortDefs.map(({ column, sortType })=>[
+            columnMap[column],
+            sortType
+        ]);
+    const comparator = sortComparator(indexedSortDefs);
+    return rows.slice().sort(comparator);
+};
+function binarySearch(items, item, comparator) {
+    let l = 0;
+    let h = items.length - 1;
+    let m;
+    let comparison;
+    while(l <= h){
+        m = l + h >>> 1;
+        comparison = comparator(items[m], item);
+        if (comparison < 0) l = m + 1;
+        else {
+            if (!(comparison > 0)) return m;
+            h = m - 1;
+        }
+    }
+    return ~l;
+}
+export { binarySearch, sortComparator, sortRows };

package/src/index.js

@@ -0,0 +1,3 @@
+export * from "./array-data-source/array-data-source.js";
+export * from "./json-data-source/JsonDataSource.js";
+export * from "./tree-data-source/TreeDataSource.js";

package/src/json-data-source/JsonDataSource.js

@@ -0,0 +1,319 @@
+import { EventEmitter, KeySet, NO_CONFIG_CHANGES, NULL_RANGE, Range, jsonToDataSourceRows, metadataKeys, uuid, vanillaConfig } from "@vuu-ui/vuu-utils";
+const NULL_SCHEMA = {
+    columns: [],
+    key: "",
+    table: {
+        module: "",
+        table: ""
+    }
+};
+const { 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 JsonDataSource extends EventEmitter {
+    columnDescriptors;
+    clientCallback;
+    expandedRows = new Set();
+    visibleRows = [];
+    #aggregations = [];
+    #config = vanillaConfig;
+    #data;
+    #filter = {
+        filter: ""
+    };
+    #groupBy = [];
+    #range = Range(0, 0);
+    #selectedRowsCount = 0;
+    #size = 0;
+    #sort = {
+        sortDefs: []
+    };
+    #status = "initialising";
+    #title;
+    rowCount;
+    viewport;
+    keys = new KeySet(this.#range);
+    constructor({ aggregations, data, filterSpec, groupBy, sort, title, viewport }){
+        super();
+        if (!data) throw Error("JsonDataSource constructor called without data");
+        [this.columnDescriptors, this.#data] = jsonToDataSourceRows(data);
+        this.visibleRows = this.#data.filter((row)=>0 === row[DEPTH]).map((row, index)=>[
+                index,
+                index
+            ].concat(row.slice(2)));
+        this.viewport = viewport || uuid();
+        if (aggregations) this.#aggregations = aggregations;
+        if (this.columnDescriptors) this.#config = {
+            ...this.#config,
+            columns: this.columnDescriptors.map((c)=>c.name)
+        };
+        if (filterSpec) this.#filter = filterSpec;
+        if (groupBy) this.#groupBy = groupBy;
+        if (sort) this.#sort = sort;
+        this.#title = title;
+    }
+    async subscribe({ viewport = this.viewport ?? uuid(), columns, aggregations, range, sort, groupBy, filterSpec }, callback) {
+        this.clientCallback = callback;
+        if (aggregations) this.#aggregations = aggregations;
+        if (columns) this.#config = {
+            ...this.#config,
+            columns
+        };
+        if (filterSpec) this.#filter = filterSpec;
+        if (groupBy) this.#groupBy = groupBy;
+        if (sort) this.#sort = sort;
+        if ("initialising" !== this.#status) return;
+        this.viewport = viewport;
+        this.#status = "subscribed";
+        this.clientCallback?.({
+            aggregations: this.#aggregations,
+            type: "subscribed",
+            clientViewportId: this.viewport,
+            columns: this.#config.columns,
+            filterSpec: this.#filter,
+            groupBy: this.#groupBy,
+            range: this.#range,
+            sort: this.#sort,
+            tableSchema: NULL_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] = jsonToDataSourceRows(data);
+        this.visibleRows = this.#data.filter((row)=>0 === row[DEPTH]).map((row, index)=>[
+                index,
+                index
+            ].concat(row.slice(2)));
+        requestAnimationFrame(()=>{
+            this.sendRowsToClient();
+        });
+    }
+    select(selectRequest) {
+        const updatedRows = [];
+        switch(selectRequest.type){
+            case "SELECT_ROW":
+                {
+                    const { preserveExistingSelection, rowKey } = selectRequest;
+                    for (const row of this.#data){
+                        const { [IDX]: rowIndex, [KEY]: key, [SELECTED]: sel } = row;
+                        if (1 === sel && false === preserveExistingSelection && key !== rowKey) {
+                            const deselectedRow = row.slice();
+                            deselectedRow[SELECTED] = 0;
+                            this.#data[rowIndex] = deselectedRow;
+                            updatedRows.push(deselectedRow);
+                        } else if (key === rowKey) {
+                            const selectedRow = row.slice();
+                            selectedRow[SELECTED] = 1;
+                            this.#data[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.visibleRows[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 = 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 = getVisibleRows(this.#data, this.expandedRows);
+        this.sendRowsToClient();
+    }
+    get status() {
+        return this.#status;
+    }
+    get config() {
+        return this.#config;
+    }
+    applyConfig() {
+        return NO_CONFIG_CHANGES;
+    }
+    get selectedRowsCount() {
+        return this.#selectedRowsCount;
+    }
+    get size() {
+        return this.#size;
+    }
+    get range() {
+        return this.#range;
+    }
+    set range(range) {
+        this.#range = 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"
+        });
+    }
+    get columns() {
+        return this.#config.columns;
+    }
+    set columns(columns) {
+        this.#config = {
+            ...this.#config,
+            columns
+        };
+    }
+    get aggregations() {
+        return this.#aggregations;
+    }
+    set aggregations(aggregations) {
+        this.#aggregations = aggregations;
+    }
+    get sort() {
+        return this.#sort;
+    }
+    set sort(sort) {
+        this.#sort = sort;
+    }
+    get filter() {
+        return this.#filter;
+    }
+    set filter(filter) {
+        this.#filter = filter;
+    }
+    get groupBy() {
+        return this.#groupBy;
+    }
+    set groupBy(groupBy) {
+        this.#groupBy = groupBy;
+    }
+    get title() {
+        return this.#title ?? "";
+    }
+    set title(title) {
+        this.#title = title;
+    }
+    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);
+    }
+}
+function getVisibleRows(rows, expandedKeys) {
+    const visibleRows = [];
+    const index = {
+        value: 0
+    };
+    for(let i = 0; i < rows.length; i++){
+        const row = rows[i];
+        const { [DEPTH]: depth, [KEY]: key, [IS_LEAF]: isLeaf } = row;
+        const isExpanded = expandedKeys.has(key);
+        visibleRows.push(cloneRow(row, index, isExpanded));
+        if (!isLeaf && !isExpanded) do i += 1;
+        while (i < rows.length - 1 && rows[i + 1][DEPTH] > depth)
+    }
+    return visibleRows;
+}
+const cloneRow = (row, index, isExpanded)=>{
+    const dolly = row.slice();
+    dolly[0] = index.value;
+    dolly[1] = index.value;
+    if (isExpanded) dolly[IS_EXPANDED] = true;
+    index.value += 1;
+    return dolly;
+};
+export { JsonDataSource };

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

@@ -0,0 +1,11 @@
+class IconProvider {
+    #iconMap = {};
+    getIcon = (dataRow)=>{
+        const key = dataRow.key;
+        return this.#iconMap[key];
+    };
+    setIcon(key, icon) {
+        this.#iconMap[key] = icon;
+    }
+}
+export { IconProvider };