@genesislcap/grid-tabulator 14.101.2

package/dist/esm/datasource/client-side.datasource.js

@@ -0,0 +1,526 @@
+import { __awaiter, __decorate } from "tslib";
+import { Auth, Connect, dataServerResultFilter, Datasource, DatasourceDefaults, MessageType, normaliseCriteria, ResourceType, } from '@genesislcap/foundation-comms';
+import { LifecycleMixin } from '@genesislcap/foundation-utils';
+import { attr, customElement, DOM, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { BehaviorSubject } from 'rxjs';
+import { debounceTime, skip, tap } from 'rxjs/operators';
+import { logger } from '../utils/logger';
+const criteriaDelimiter = ';';
+const criteriaJoin = ' && ';
+const withoutFullInit = null;
+const withoutColumnDefs = null;
+/**
+ * The Genesis Datasource element, for client-side data fetching and used exclusively by the GridTabulator element.
+ * @alpha
+ */
+let GridTabulatorClientSideDatasource = class GridTabulatorClientSideDatasource extends LifecycleMixin(FoundationElement) {
+    constructor() {
+        super(...arguments);
+        this.isSnapshot = false;
+        this.maxRows = DatasourceDefaults.MAX_ROWS_250;
+        this.maxView = DatasourceDefaults.MAX_VIEW_1000;
+        this.pollingInterval = DatasourceDefaults.REQ_REP_POLLING_INTERVAL_MS;
+        this.movingView = false;
+        this.reverse = false;
+        this.restartOnReconnection = false;
+        this.isRequestServer = false;
+        this.requiresFullRowDataAndColDefs = true;
+        this.dataSubWasLoggedOff = false;
+        this.rows = new Map();
+        this.criteriaFromFilters = new Map();
+        this.update = new BehaviorSubject(new Map());
+    }
+    criteriaChanged(oldCriteria, newCriteria) {
+        const criteriaIsNotDuplicate = oldCriteria !== normaliseCriteria(newCriteria, criteriaDelimiter);
+        if (this.datasource.initialized && criteriaIsNotDuplicate) {
+            this.reloadResourceData();
+        }
+    }
+    resourceNameChanged(oldValue, newValue) {
+        if (!oldValue || oldValue === newValue)
+            return;
+        this.restart();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const shouldRunConnect = this.shouldRunConnect;
+        DOM.queueUpdate(() => {
+            if (!shouldRunConnect)
+                return;
+            this.init();
+        });
+        this.connectionSub = this.connect.isConnected$.subscribe((isConnected) => {
+            var _a;
+            if (isConnected && ((_a = this.gridTabulator) === null || _a === void 0 ? void 0 : _a.attributes['ds-disconnected'])) {
+                this.gridTabulator.removeAttribute('ds-disconnected');
+                if (this.restartOnReconnection) {
+                    this.reloadResourceData();
+                }
+            }
+            if (!isConnected) {
+                this.gridTabulator.setAttribute('ds-disconnected', 'ds-disconnected');
+            }
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        const shouldRunDisconnect = this.shouldRunDisconnect;
+        DOM.queueUpdate(() => {
+            if (!shouldRunDisconnect)
+                return;
+            this.deinit();
+        });
+    }
+    deepClone() {
+        const copy = super.deepClone();
+        copy.request = structuredClone(this.request);
+        return copy;
+    }
+    get gridTabulator() {
+        return this.parentElement;
+    }
+    // Genesis Specific
+    /**
+     * Returns the row id attribute, depending on the resource type.
+     * @remarks Will favour the `row-id` attribute if set.
+     * @internal
+     */
+    get rowId() {
+        if (this.rowIdAttr)
+            return this.rowIdAttr;
+        if (this.isRequestServer)
+            return DatasourceDefaults.REQUEST_SERVER_ROW_ID;
+        return DatasourceDefaults.DATASERVER_ROW_ID;
+    }
+    /**
+     * Initializes the datasource.
+     * @public
+     * @remarks This method is called automatically when the element is connected to the DOM.
+     */
+    init() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.gridTabulator &&
+                this.datasource.validResourceName(this.resourceName) &&
+                this.connect.isConnected) {
+                const meta = yield this.connect.getMetadata(this.resourceName);
+                this.isRequestServer = meta.TYPE === ResourceType.REQUEST_SERVER;
+                const gridOptions = Object.assign({ index: this.rowId, 
+                    // getRowId: (params) => params.data[this.rowId],
+                    layout: 'fitDataFill', 
+                    // responsiveLayout: 'hide', // hide columns that dont fit on the table
+                    addRowPos: 'top', 
+                    // history: true, // allow undo and redo actions on the table
+                    movableColumns: true, height: '100%', renderHorizontal: 'virtual', 
+                    // columnDefaults: {
+                    //   tooltip: true, // show tool tips on cells
+                    // },
+                    autoColumns: true, rowContextMenu: [
+                        {
+                            label: 'Download CSV',
+                            action: (e, column) => {
+                                this.gridTabulator.grid.download('csv', `${this.resourceName}.csv`);
+                            },
+                        },
+                    ], popupContainer: false }, this.deferredGridOptions);
+                this.gridTabulator.gridOptions = gridOptions;
+                const filterDebounceTime = 600;
+                this.updateSub = this.update
+                    .pipe(skip(1), debounceTime(filterDebounceTime), tap((f) => logger.debug('filters (debounced): ', f)))
+                    .subscribe((_) => {
+                    this.reloadResourceData();
+                });
+                return;
+            }
+            logger.warn(`Application not connected, falling back to local columnDefs/rowData`);
+        });
+    }
+    /**
+     * Deinitialises the datasource, resetting it to its initial state.
+     * @public
+     */
+    deinit() {
+        this.reset();
+    }
+    /**
+     * Resets the datasource to its initial state.
+     * @public
+     * @deprecated Use `deinit` instead
+     */
+    reset() {
+        if (this.dataSub) {
+            this.dataSub.unsubscribe();
+            this.dataSub = undefined;
+        }
+        if (this.updateSub) {
+            this.updateSub.unsubscribe();
+            this.updateSub = undefined;
+        }
+        if (this.connectionSub) {
+            this.connectionSub.unsubscribe();
+            this.connectionSub = undefined;
+        }
+        this.dataLogoff();
+        this.clearRowData();
+        this.isRequestServer = false;
+        this.requiresFullRowDataAndColDefs = true;
+        this.dataSubWasLoggedOff = false;
+        this.criteriaFromFilters = new Map();
+        this.update = new BehaviorSubject(new Map());
+        this.datasource.deinit();
+    }
+    /**
+     * Restarts the datasource, uses `deinit` and `init` in sequence.
+     * @public
+     */
+    restart() {
+        this.deinit();
+        this.init();
+    }
+    /**
+     * Force the grid to redispatch the current rows
+     */
+    refreshRows() {
+        this.setRowData(Array.from(this.rows.values()));
+    }
+    /**
+     * Sends a DATA_LOGOFF when the resource is an active stream
+     * @remarks Will only happen for streaming DATASERER resources.
+     * @internal
+     */
+    dataLogoff() {
+        const shouldPerformDataLogoff = this.sourceRef && !this.isRequestServer && !this.isSnapshot;
+        if (shouldPerformDataLogoff && this.auth.isLoggedIn) {
+            this.connect.dataLogoff(this.sourceRef);
+        }
+        this.sourceRef = undefined;
+    }
+    /**
+     * Clears the rowData and columnDefs for the grid.
+     * @remarks This is called when `reloadResourceData` happens, on criteria and filters change or full `reset`.
+     * @param withColumnDefs - Whether to clear the columnDefs as well. Defaults to true.
+     * @internal
+     */
+    clearRowData(withColumnDefs = true) {
+        var _a, _b, _c, _d;
+        this.rows = new Map();
+        if (withColumnDefs) {
+            (_b = (_a = this.gridTabulator) === null || _a === void 0 ? void 0 : _a.grid) === null || _b === void 0 ? void 0 : _b.setColumns([]);
+        }
+        (_d = (_c = this.gridTabulator) === null || _c === void 0 ? void 0 : _c.grid) === null || _d === void 0 ? void 0 : _d.clearData();
+    }
+    /**
+     * Sets the columnDefs and rowData for the grid.
+     * @remarks This should only happen once, when the grid is first initialized. Follow up updates will use the agTransaction.
+     * @internal
+     */
+    setRowData(rowData) {
+        const agColumnDefs = null; // this.getAgColumnDefs(this.datasource.fieldMetadata);
+        if (agColumnDefs) {
+            this.gridTabulator.grid.setColumns(agColumnDefs);
+        }
+        const data = this.rowDataMapper ? this.rowDataMapper(rowData) : rowData;
+        this.gridTabulator.grid.setData(data);
+        this.requiresFullRowDataAndColDefs = false;
+    }
+    /**
+     * Resets the grid data while keeping columnDefs and sends a DATA_LOGOFF message if it's a stream.
+     * Proxies to {@link @genesislcap/grid-pro#GridProGenesisDatasource.loadResourceData} but without the full init (no metadata fetch).
+     * @remarks This is used when the grid is already initialized and we want to reload the data due to a criteria/filter change.
+     * @internal
+     */
+    reloadResourceData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.dataSub) {
+                this.dataSub.unsubscribe();
+                this.dataSub = undefined;
+            }
+            this.dataLogoff();
+            this.clearRowData(withoutColumnDefs);
+            this.loadResourceData(withoutFullInit);
+        });
+    }
+    /**
+     * Initializes the datasource and loads the data for the grid.
+     * Handles both snapshot and stream data (for both REQUEST_SERVER and DATASERVER resource types).
+     *
+     * @param withFullInit - if true, will call datasource.init() with requiresMetadataFetch = true, fetching fresh metadata
+     * @internal
+     */
+    loadResourceData(withFullInit = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const requiresMetadataFetch = withFullInit || !this.datasource.initialized;
+            const initOK = yield this.datasource.init(this.datasourceOptions(), requiresMetadataFetch);
+            if (!initOK) {
+                logger.debug(`Genesis Datasource init failed for ${this.resourceName}`);
+                this.clearRowData();
+                return;
+            }
+            if (this.isSnapshot) {
+                const result = yield this.datasource.snapshot();
+                if (result) {
+                    const rowData = this.handleSnapshot(result);
+                    this.setRowData(rowData);
+                }
+                return;
+            }
+            logger.debug(`requesting stream for ${this.resourceName}`);
+            this.dataSub = this.datasource.stream.subscribe((result) => {
+                this.sourceRef = result.SOURCE_REF;
+                const messageType = result.MESSAGE_TYPE;
+                if (messageType && messageType === MessageType.LOGOFF_ACK) {
+                    this.dataSubWasLoggedOff = true;
+                    return;
+                }
+                this.dataSubWasLoggedOff = false;
+                if (result.ROW) {
+                    const nextMessage = dataServerResultFilter(result);
+                    this.handleStreamResult(nextMessage);
+                }
+                else {
+                    this.handleStreamResult(result);
+                }
+            });
+        });
+    }
+    handleSnapshot(result) {
+        if (Array.isArray(result))
+            return result;
+        if (result.REPLY) {
+            return result.REPLY;
+        }
+        if (result.ROW) {
+            return dataServerResultFilter(result).inserts;
+        }
+        return result.inserts;
+    }
+    datasourceOptions() {
+        return {
+            criteria: this.buildCriteria(),
+            fields: this.fields,
+            isSnapshot: this.isSnapshot,
+            orderBy: this.orderBy,
+            resourceName: this.resourceName,
+            request: this.request,
+            reverse: this.reverse,
+            maxRows: this.maxRows,
+            maxView: this.maxView,
+            pollingInterval: this.pollingInterval,
+            movingView: this.movingView,
+        };
+    }
+    handleStreamResult(result) {
+        if (!result)
+            return;
+        if (this.isRequestServer) {
+            this.applyRequestServerData(result);
+        }
+        else {
+            this.applyDataserverData(result);
+        }
+    }
+    applyRequestServerData(requestServerResult) {
+        var _a;
+        const requestServerData = requestServerResult.REPLY;
+        if (!Array.isArray(requestServerData) ||
+            !((_a = requestServerResult.MESSAGE_TYPE) === null || _a === void 0 ? void 0 : _a.startsWith('REP_'))) {
+            logger.error('received invalid RequestServerResult', requestServerResult);
+            return;
+        }
+        if (this.requiresFullRowDataAndColDefs) {
+            requestServerData === null || requestServerData === void 0 ? void 0 : requestServerData.forEach((insertData) => {
+                this.rows.set(insertData[this.rowId], insertData);
+            });
+            const rowData = this.rows.size > 0 ? Array.from(this.rows.values()) : requestServerData;
+            this.setRowData(rowData);
+            return;
+        }
+        const rowsToUpdate = [];
+        const rowsToDelete = Array.from(this.rows.values()).filter((row) => {
+            const match = requestServerData.find((data) => data[this.rowId] === row[this.rowId]);
+            if (match) {
+                rowsToUpdate.push(match);
+                return false; // don't delete rows that need to be updated
+            }
+            return true; // delete rows that don't exist in requestServerData
+        });
+        const rowsToInsert = requestServerData.filter((data) => !this.rows.has(data[this.rowId]));
+        this.gridTransaction = { add: [], remove: [], update: [] };
+        this.handleStreamInserts(rowsToInsert);
+        this.handleStreamDeletes(rowsToDelete);
+        this.handleStreamUpdates(rowsToUpdate);
+        this.applyTransaction();
+    }
+    applyDataserverData(dataServerResult) {
+        var _a;
+        if (this.requiresFullRowDataAndColDefs) {
+            (_a = dataServerResult.inserts) === null || _a === void 0 ? void 0 : _a.forEach((insertData) => {
+                this.rows.set(insertData[this.rowId], insertData);
+            });
+            const rowData = Array.from(this.rows.values());
+            this.setRowData(rowData);
+            return;
+        }
+        this.gridTransaction = { add: [], remove: [], update: [] };
+        this.handleStreamInserts(dataServerResult.inserts);
+        this.handleStreamDeletes(dataServerResult.deletes);
+        this.handleStreamUpdates(dataServerResult.updates);
+        this.applyTransaction();
+    }
+    applyTransaction() {
+        var _a, _b;
+        const transaction = this.mapTransaction(this.gridTransaction);
+        if (((_a = transaction.add) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.gridTabulator.grid.addData(transaction.add);
+        }
+        if (((_b = transaction.update) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            this.gridTabulator.grid.updateData(transaction.update);
+        }
+        transaction.remove.forEach((toRemove) => {
+            this.gridTabulator.grid.deleteRow(toRemove[this.rowId]);
+        });
+    }
+    mapTransaction(transaction) {
+        if (!this.rowDataMapper) {
+            return transaction;
+        }
+        return Object.assign(Object.assign({}, transaction), { add: this.rowDataMapper(transaction.add, this.rows), update: this.rowDataMapper(transaction.update, this.rows), remove: this.rowDataMapper(transaction.remove, this.rows) });
+    }
+    handleStreamInserts(insertedRows) {
+        insertedRows === null || insertedRows === void 0 ? void 0 : insertedRows.forEach((insertData) => {
+            if (this.rows.has(insertData[this.rowId]) || this.dataSubWasLoggedOff) {
+                const rowToBeUpdated = this.rows.get(insertData[this.rowId]);
+                const updatedRow = Object.assign(Object.assign({}, rowToBeUpdated), insertData);
+                this.gridTransaction.update.push(updatedRow);
+            }
+            else {
+                this.gridTransaction.add.push(insertData);
+                this.gridTransaction.addIndex = 0;
+            }
+            this.rows.set(insertData[this.rowId], insertData);
+        });
+    }
+    handleStreamDeletes(deletedRows) {
+        deletedRows === null || deletedRows === void 0 ? void 0 : deletedRows.forEach((deleteData) => {
+            this.gridTransaction.remove.push({ [this.rowId]: deleteData[this.rowId] });
+            this.rows.delete(deleteData[this.rowId]);
+        });
+    }
+    handleStreamUpdates(updatedRows) {
+        updatedRows === null || updatedRows === void 0 ? void 0 : updatedRows.forEach((updateData) => {
+            const rowToBeUpdated = this.rows.get(updateData[this.rowId]);
+            const updatedRow = Object.assign(Object.assign({}, rowToBeUpdated), updateData);
+            this.gridTransaction.update.push(updatedRow);
+            this.rows.set(updateData[this.rowId], updatedRow);
+        });
+    }
+    // FUTURE: Work with the field types vs ag grid column def types!
+    // private getAgColumnDefs(fieldsMetadata: FieldMetadata[]) {
+    //   const colDefsFromGenesisData: ColDef[] = fieldsMetadata?.flatMap((field: FieldMetadata) => {
+    //     const cellConfigs: ColDef = {};
+    //     cellConfigs.filterParams = getFilterParamsByFieldType(field.type);
+    //     switch (field.type) {
+    //       case FieldTypeEnum.BOOLEAN:
+    //         if (this.gridTabulator.autoCellRendererByType) {
+    //           cellConfigs.cellRenderer = GridTabulatorCellRendererTypes.boolean;
+    //         }
+    //         break;
+    //       case FieldTypeEnum.DATE:
+    //         cellConfigs.valueFormatter = dateValueFormatter;
+    //         break;
+    //       case FieldTypeEnum.DATETIME:
+    //         cellConfigs.valueFormatter = dateTimeValueFormatter;
+    //         break;
+    //       default:
+    //         break;
+    //     }
+    //     const templateColDef = this.gridTabulator.gridApi?.getColumnDef(field.name);
+    //     if (this.gridTabulator.onlyTemplateColDefs && !templateColDef) {
+    //       return [];
+    //     }
+    //     if (this.fields && !this.fields.includes(field.name)) {
+    //       return [];
+    //     }
+    //     return { field: field.name, ...cellConfigs, ...templateColDef };
+    //   });
+    //   const colDefsMergedWithTemplateDefs = this.gridTabulator.mergeAllColumnDefsAndStates(
+    //     colDefsFromGenesisData,
+    //     true,
+    //   );
+    //   return colDefsMergedWithTemplateDefs;
+    // }
+    buildCriteria() {
+        var _a;
+        const initialCriteria = ((_a = this.criteria) === null || _a === void 0 ? void 0 : _a.split(criteriaDelimiter)) || [];
+        const criteria = initialCriteria.concat(Array.from(this.criteriaFromFilters.values()));
+        return normaliseCriteria(criteria.join(criteriaJoin), criteriaDelimiter);
+    }
+    setFilter(fieldName, newFilter) {
+        this.criteriaFromFilters.set(fieldName, newFilter);
+        this.update.next(this.criteriaFromFilters);
+    }
+    removeFilter(fieldName) {
+        this.criteriaFromFilters.delete(fieldName);
+        this.update.next(this.criteriaFromFilters);
+    }
+};
+__decorate([
+    Auth
+], GridTabulatorClientSideDatasource.prototype, "auth", void 0);
+__decorate([
+    Connect
+], GridTabulatorClientSideDatasource.prototype, "connect", void 0);
+__decorate([
+    Datasource
+], GridTabulatorClientSideDatasource.prototype, "datasource", void 0);
+__decorate([
+    observable
+], GridTabulatorClientSideDatasource.prototype, "deferredGridOptions", void 0);
+__decorate([
+    attr
+], GridTabulatorClientSideDatasource.prototype, "criteria", void 0);
+__decorate([
+    attr
+], GridTabulatorClientSideDatasource.prototype, "fields", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'is-snapshot' })
+], GridTabulatorClientSideDatasource.prototype, "isSnapshot", void 0);
+__decorate([
+    attr({ attribute: 'max-rows' })
+], GridTabulatorClientSideDatasource.prototype, "maxRows", void 0);
+__decorate([
+    attr({ attribute: 'max-view' })
+], GridTabulatorClientSideDatasource.prototype, "maxView", void 0);
+__decorate([
+    attr({ attribute: 'polling-interval' })
+], GridTabulatorClientSideDatasource.prototype, "pollingInterval", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'moving-view' })
+], GridTabulatorClientSideDatasource.prototype, "movingView", void 0);
+__decorate([
+    attr({ attribute: 'order-by' })
+], GridTabulatorClientSideDatasource.prototype, "orderBy", void 0);
+__decorate([
+    observable
+], GridTabulatorClientSideDatasource.prototype, "request", void 0);
+__decorate([
+    attr({ attribute: 'resource-name' })
+], GridTabulatorClientSideDatasource.prototype, "resourceName", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], GridTabulatorClientSideDatasource.prototype, "reverse", void 0);
+__decorate([
+    attr({ attribute: 'row-id' })
+], GridTabulatorClientSideDatasource.prototype, "rowIdAttr", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'restart-on-reconnection' })
+], GridTabulatorClientSideDatasource.prototype, "restartOnReconnection", void 0);
+__decorate([
+    observable
+], GridTabulatorClientSideDatasource.prototype, "rowDataMapper", void 0);
+GridTabulatorClientSideDatasource = __decorate([
+    customElement({
+        name: 'grid-tabulator-client-side-datasource',
+    })
+], GridTabulatorClientSideDatasource);
+export { GridTabulatorClientSideDatasource };

package/dist/esm/datasource/index.js

@@ -0,0 +1 @@
+export * from './client-side.datasource';

package/dist/esm/external/fonts.js

@@ -0,0 +1,16 @@
+import { GridTabulatorTheme } from '../grid-tabulator.types';
+export const tabulatorDefaultFontFace = `
+  @font-face {
+    font-family: "defaultFontFace";
+  }
+`;
+export const tabulatorRapidFontFace = `
+  @font-face {
+    font-family: "rapidFontFace";
+  }
+`;
+export const gridThemeFontFaceMap = {
+    [GridTabulatorTheme.default]: tabulatorDefaultFontFace,
+    [GridTabulatorTheme.rapid]: tabulatorRapidFontFace,
+};
+export const defaultGridTabulatorFontFace = tabulatorDefaultFontFace;

package/dist/esm/external/index.js

@@ -0,0 +1,6 @@
+import { css } from '@microsoft/fast-element';
+import { tabulatorThemeSimpleCSS } from './tabulator-theme-simple-css';
+export const tabulatorExternalStockStyles = css `
+  ${tabulatorThemeSimpleCSS}
+`;
+export { tabulatorThemeSimpleCSS };