@open-dcp/grid 0.0.0-stage → 0.2.17

package/src/services/FilteringService.ts

@@ -0,0 +1,347 @@
+import { BehaviorSubject } from "rxjs";
+import type { GridService } from "../GridService";
+import type { CellValue, Column, GlobalSearchMode, GlobalSearchOptions, GlobalSearchState, Row } from "../types/grid";
+import { FilterCondition, FilterNode, evaluateFilterTree } from "@open-dcp/filter";
+import { logger } from '@open-dcp/utilities';
+
+export class FilteringService {
+    private readonly gridService: GridService;
+    private readonly filteredIndexes$: BehaviorSubject<number[] | null> = new BehaviorSubject<number[] | null>(null);
+    private filterTree: FilterNode | null = null;
+    private globalSearch: GlobalSearchState | null = null;
+    private searchableTextCache: string[] | null = null;
+    private cacheSignature: string | null = null;
+
+    constructor(gridService: GridService, filterTree: FilterNode | null = null) {
+        this.gridService = gridService;
+        this.filterTree = filterTree;
+    }
+
+    private getColumnKeys(node: FilterNode): (string | number)[] {
+        if (node.type === 'condition') return [node.columnKey];
+        if (node.type === 'group') {
+            return node.filters.reduce<(string | number)[]>((acc, filter) => {
+                return acc.concat(this.getColumnKeys(filter));
+            }, []);
+        }
+        return [];
+    }
+
+    setFilterTree(tree: FilterNode | null) {
+        this.filterTree = tree;
+        this.updateFilterIndexes();
+    }
+
+    getFilterTree(): FilterNode | null {
+        return this.filterTree;
+    }
+
+    setGlobalSearch(query: string, options?: GlobalSearchOptions): void {
+        const normalizedQuery = query.trim();
+
+        if (normalizedQuery.length === 0) {
+            this.globalSearch = null;
+            this.updateFilterIndexes();
+            return;
+        }
+
+        this.globalSearch = {
+            query: normalizedQuery,
+            options: options ? { ...options } : undefined,
+        };
+
+        this.updateFilterIndexes();
+    }
+
+    clearGlobalSearch(): void {
+        this.globalSearch = null;
+        this.updateFilterIndexes();
+    }
+
+    getGlobalSearch(): GlobalSearchState | null {
+        return this.globalSearch;
+    }
+
+    updateFilterIndexesForUpdatedData() {
+        this.invalidateSearchCache();
+        this.updateFilterIndexes();
+    }
+
+    private invalidateSearchCache(): void {
+        this.searchableTextCache = null;
+        this.cacheSignature = null;
+    }
+
+    private getSearchColumns(options?: GlobalSearchOptions): Column[] {
+        const allColumns = this.gridService.getColumns();
+
+        if (options?.columns && options.columns.length > 0) {
+            const keySet = new Set(options.columns);
+            const filteredColumns = allColumns.filter((column) => keySet.has(column.key));
+
+            if (filteredColumns.length === 0) {
+                logger.warn('DcpGrid: Global search columns do not match any configured columns');
+            }
+
+            return filteredColumns;
+        }
+
+        return allColumns;
+    }
+
+    private toSearchValue(value: unknown): string {
+        if (value === null || value === undefined) {
+            return '';
+        }
+
+        if (value instanceof Date) {
+            return value.toISOString();
+        }
+
+        return String(value);
+    }
+
+    private getCellSearchValue(row: Row, column: Column, searchMode: GlobalSearchMode): string {
+        const columnKey = column.key;
+        const cell = row[columnKey];
+        const mappedCell = (cell && typeof cell === 'object') ? (cell as unknown as Record<string, unknown>) : null;
+
+        if (typeof column.globalSearchText === 'function') {
+            const customValue = column.globalSearchText(mappedCell as CellValue | null, row, searchMode);
+            const customText = this.toSearchValue(customValue);
+            if (customText.length > 0) {
+                return customText;
+            }
+        }
+
+        if (mappedCell) {
+
+            if (searchMode === 'raw' && 'raw' in mappedCell) {
+                return this.toSearchValue(mappedCell.raw);
+            }
+
+            if (searchMode === 'display') {
+                if ('display' in mappedCell) {
+                    const displayText = this.toSearchValue(mappedCell.display);
+                    if (displayText.length > 0) {
+                        return displayText;
+                    }
+                }
+
+                const formattedDisplay = this.gridService.getCellDisplayValue(row, columnKey);
+                if (formattedDisplay.length > 0) {
+                    return formattedDisplay;
+                }
+
+                if ('value' in mappedCell) {
+                    return this.toSearchValue(mappedCell.value);
+                }
+                if ('raw' in mappedCell) {
+                    return this.toSearchValue(mappedCell.raw);
+                }
+            }
+
+            if ('value' in mappedCell) {
+                return this.toSearchValue(mappedCell.value);
+            }
+            if ('raw' in mappedCell) {
+                return this.toSearchValue(mappedCell.raw);
+            }
+        }
+
+        return this.toSearchValue(cell);
+    }
+
+    private getCacheSignature(columns: Column[], caseInsensitive: boolean, searchMode: GlobalSearchMode): string {
+        const columnKeys = columns.map((column) => String(column.key));
+        return `${columnKeys.join('|')}::${caseInsensitive ? 'i' : 's'}::${searchMode}`;
+    }
+
+    private ensureSearchCache(rows: Row[], columns: Column[], caseInsensitive: boolean, searchMode: GlobalSearchMode): void {
+        const signature = this.getCacheSignature(columns, caseInsensitive, searchMode);
+
+        if (
+            this.searchableTextCache !== null &&
+            this.cacheSignature === signature &&
+            this.searchableTextCache.length === rows.length
+        ) {
+            return;
+        }
+
+        this.searchableTextCache = rows.map(row => {
+            const baseText = columns
+                .map(column => this.getCellSearchValue(row, column, searchMode))
+                .join(' ');
+
+            return caseInsensitive ? baseText.toLowerCase() : baseText;
+        });
+        this.cacheSignature = signature;
+    }
+
+    private matchesFilterTree(row: Row): boolean {
+        if (!this.filterTree) {
+            return true;
+        }
+
+        return evaluateFilterTree(this.filterTree, row, {
+            caseInsensitive: this.gridService.gridOptions.caseInsensitiveFiltering ?? false,
+        });
+    }
+
+    hasFilter(columnKey: string | number): boolean {
+        const checkNode = (node: FilterNode): boolean => {
+            if (node.type === 'condition') {
+                return node.columnKey === columnKey;
+            }
+            if (node.type === 'group') {
+                return node.filters.some(checkNode);
+            }
+            return false;
+        };
+
+        if (!this.filterTree) return false;
+        return checkNode(this.filterTree);
+    }
+
+    addFilter(filterNode: FilterNode): void {
+        const columnKeys = this.getColumnKeys(filterNode);
+
+        // Start with existing filters (if any)
+        let newFilters: FilterNode[] = [];
+        if (this.filterTree && this.filterTree.type === 'group') {
+            // Remove all filters for the affected column(s)
+            newFilters = this.filterTree.filters.filter(f => {
+                let keys: (string | number)[];
+                if (f.type === 'condition') {
+                    keys = [f.columnKey];
+                } else if (f.type === 'group') {
+                    keys = f.filters.reduce<(string | number)[]>((acc, ff) => {
+                        if (ff.type === 'condition') {
+                            acc.push(ff.columnKey);
+                        }
+                        return acc;
+                    }, []);
+                } else {
+                    keys = [];
+                }
+                return !keys.some(k => columnKeys.includes(k));
+            });
+        }
+
+        // Add the new filter node
+        newFilters.push(filterNode);
+
+        // Set the new filter tree
+        this.setFilterTree({
+            type: 'group',
+            operator: 'and',
+            filters: newFilters
+        });
+    }
+
+    resetFilters(): void {
+        this.setFilterTree(null);
+    }
+
+    resetFilter(columnKey: string | number): void {
+        if (!this.filterTree || this.filterTree.type !== 'group') return;
+
+        // Remove any filter node (condition or group) that applies to this column
+        const newFilters = this.filterTree.filters.filter(
+            f => !this.getColumnKeys(f).includes(columnKey)
+        );
+
+        // If no filters left, set to null
+        if (newFilters.length === 0) {
+            this.setFilterTree(null);
+        } else {
+            this.setFilterTree({
+                ...this.filterTree,
+                filters: newFilters
+            });
+        }
+    }
+
+    getFilterIndexes(): number[] | null {
+        return this.filteredIndexes$.getValue();
+    }
+
+    getFilters(): FilterCondition[] {
+        if (!this.filterTree || this.filterTree.type !== 'group') return [];
+        return this.filterTree.filters.filter(
+            f => f.type === 'condition'
+        ) as FilterCondition[];
+    }
+
+    private updateFilterIndexes(): void {
+        const rows = this.gridService.getRows();
+
+        if (!this.gridService.shouldApplyClientSideFiltering()) {
+            this.filteredIndexes$.next(null);
+            this.gridService.setIndexMapping(
+                new Map([...Array(rows.length).keys()].map(i => [i, i]))
+            );
+            this.gridService.updateRenderedRows();
+            return;
+        }
+
+        if (!this.filterTree && !this.globalSearch) {
+            // No filters: show all rows, identity mapping
+            this.filteredIndexes$.next(null);
+            this.gridService.setIndexMapping(
+                new Map([...Array(this.gridService.rowCount()).keys()].map(i => [i, i]))
+            );
+            return;
+        }
+
+        let globalSearchQuery: string | null = null;
+        if (this.globalSearch) {
+            const columns = this.getSearchColumns(this.globalSearch.options);
+            const caseInsensitive = this.globalSearch.options?.caseInsensitive ?? this.gridService.gridOptions.caseInsensitiveFiltering ?? false;
+            const searchMode = this.globalSearch.options?.searchMode ?? 'value';
+            globalSearchQuery = caseInsensitive ? this.globalSearch.query.toLowerCase() : this.globalSearch.query;
+
+            this.ensureSearchCache(rows, columns, caseInsensitive, searchMode);
+        }
+
+        // Find all matching row indexes using both filter tree and global search.
+        const matchingIndexes = rows
+            .map((row, idx) => {
+                const matchesTree = this.matchesFilterTree(row);
+                if (!matchesTree) {
+                    return -1;
+                }
+
+                if (!globalSearchQuery) {
+                    return idx;
+                }
+
+                const searchableText = this.searchableTextCache?.[idx] ?? '';
+                return searchableText.includes(globalSearchQuery) ? idx : -1;
+            })
+            .filter(idx => idx !== -1);
+
+        // Update index mapping for performance and downstream features
+        this.gridService.clearIndexMap();
+        matchingIndexes.forEach((originalIdx, filteredIdx) => {
+            this.gridService.setIndexMappingValue(filteredIdx, originalIdx);
+        });
+
+        this.filteredIndexes$.next(matchingIndexes);
+    }
+
+    applyFilter(rows: Row[]): Row[] {
+        const filteredIndexes = this.filteredIndexes$.getValue();
+
+        if (filteredIndexes === null) {
+            return rows;
+        }
+
+        this.gridService.clearIndexMap();
+        filteredIndexes.forEach((filteredIndex, i) => {
+            this.gridService.setIndexMappingValue(i, filteredIndex);
+        });
+
+        return filteredIndexes.map(index => rows[index]);
+    }
+}

package/src/services/FormattingService.ts

@@ -0,0 +1,205 @@
+import type { GridService } from "../GridService";
+import { Column, DisplayValue, Row } from "../types/grid";
+import { format } from 'date-fns';
+import { toZonedTime } from 'date-fns-tz';
+import { logger } from "@open-dcp/utilities";
+
+function formatInTimeZone(
+    timestamp: number | Date,
+    timeZone: string,
+    formatString: string
+): string {
+    const date = typeof timestamp === "number" ? new Date(timestamp) : timestamp;
+    const zonedDate = toZonedTime(date, timeZone);
+    return format(zonedDate, formatString);
+}
+
+export class FormattingService {
+    private readonly gridService: GridService;
+
+    constructor(gridService: GridService) {
+        this.gridService = gridService;
+    }
+
+    applyFormattingToRow(row: Row): Row {
+        const columns = this.gridService.getColumns();
+        const formattedRow: Row = { ...row };  // Clone the row to keep it immutable
+
+        if (columns && columns.length > 0) {
+            // Columns are ready, proceed with formatting
+            columns.forEach((column: Column) => {
+                const cellData = row[column.key] ?? null;
+
+                const rawValue = cellData && typeof cellData === 'object' && 'raw' in cellData
+                    ? cellData.raw
+                    : cellData;
+
+                const value = this.formatCellValue(row, column);
+
+                // Store raw and value
+                formattedRow[column.key] = {
+                    raw: rawValue,           // Ensure raw value stays the same
+                    value: value,       // Store transformed value for sorting/filtering
+                };
+            });
+        } else {
+            Object.keys(row).forEach(key => {
+                formattedRow[key] = {
+                    raw: row[key],   // Use original value as raw
+                    value: null,  // No transformation yet
+                };
+            });
+
+            //logger.warn('Columns are not available yet. Row formatting is deferred.');
+        }
+
+        return formattedRow;
+    }
+
+    private formatCustomCell(cellValue: any, row: Row, column: Column): DisplayValue {
+        let displayValue: string | undefined = undefined;
+        let renderedElement: HTMLElement | undefined = undefined;
+        if (typeof column.renderCell === 'function') {
+            try {
+                const functionReturn: string | HTMLElement = column.renderCell(cellValue, row);
+                if (functionReturn instanceof HTMLAnchorElement) {
+                    renderedElement = functionReturn;
+                } else if (typeof functionReturn == "string") {
+                    displayValue = functionReturn;
+                }
+            } catch (error) {
+                logger.error(`Error in custom renderCell function for column ${column.key}:`, error);
+                displayValue = 'Error';
+            }
+        } else {
+            logger.warn(`Custom column type requires a renderCell function.`);
+            displayValue = 'N/A';
+        }
+        return { display: displayValue, renderedElement };
+    }
+
+    private formatDateCell(cellValue: any, column: Column): string {
+        const date = new Date(cellValue);
+        let dateFormatString = this.gridService.displayFormatSubject.getValue().dateFormat;
+        if (column.type === 'datetime') {
+            dateFormatString += ` ${this.gridService.displayFormatSubject.getValue().timeFormat}`;
+        }
+        return formatInTimeZone(
+            date,
+            this.gridService.displayFormatSubject.getValue().timeZone,
+            dateFormatString
+        );
+    }
+
+    formatCellDisplay(row: Row, column: Column): DisplayValue {
+        const cellValue: any = row[column.key]?.value ?? null;
+        if (cellValue === null) {
+            return { display: null, renderedElement: undefined };
+        }
+
+        let displayValue: string | undefined = undefined;
+        let renderedElement: HTMLElement | undefined = undefined;
+
+        if (typeof column.transformer === 'function') {
+            try {
+                const transformed = column.transformer(cellValue);
+                displayValue = transformed != null ? transformed.toString() : '';
+                return { display: displayValue, renderedElement };
+            } catch (error) {
+                logger.error(`Error in transformer for column ${column.key}:`, error);
+                return { display: 'Error', renderedElement };
+            }
+        }
+
+        try {
+            switch (column.type) {
+                case 'component':
+                    break;
+                case 'custom':
+                    return this.formatCustomCell(cellValue, row, column);
+                case 'integer':
+                case 'number':
+                    displayValue = cellValue.toString();
+                    break;
+                case 'date':
+                case 'datetime':
+                    displayValue = this.formatDateCell(cellValue, column);
+                    break;
+                case 'duration':
+                    displayValue = `${Math.floor(cellValue / 3600).toString().padStart(2, '0')}:${Math.floor((cellValue % 3600) / 60).toString().padStart(2, '0')}:${(cellValue % 60).toString().padStart(2, '0')}`;
+                    break;
+                case 'string':
+                default:
+                    displayValue = cellValue.toString();
+                    break;
+            }
+        } catch (error) {
+            logger.error(`Error formatting cell for column ${column.key}:`, error);
+            displayValue = 'Error';
+        }
+
+        return { display: displayValue, renderedElement };
+    }
+
+    private transformCustomOrComponent(rawValue: any, column: Column): any {
+        if (typeof column.transformer === 'function') {
+            try {
+                return column.transformer(rawValue);
+            } catch (error) {
+                logger.error(`Error in custom transformer function for column ${column.key}:`, error);
+                return 'Error';
+            }
+        }
+        return rawValue;
+    }
+
+    private transformInteger(rawValue: any): number | null {
+        return rawValue !== null ? parseInt(rawValue, 10) : null;
+    }
+
+    private transformNumber(rawValue: any): number | null {
+        return rawValue !== null ? parseFloat(rawValue) : null;
+    }
+
+    private transformDate(rawValue: any): number | null {
+        if (rawValue !== null) {
+            const date = new Date(rawValue);
+            return isNaN(date.getTime()) ? null : date.getTime();
+        }
+        return null;
+    }
+
+    private transformDuration(rawValue: any): number | null {
+        return rawValue !== null ? parseInt(rawValue, 10) : null;
+    }
+
+    private transformString(rawValue: any): string | null {
+        return rawValue !== null ? rawValue.toString() : null;
+    }
+
+    formatCellValue(row: Row, column: Column): any {
+        // Safely retrieve the raw value
+        const cellData = row[column.key] ?? null;
+        const rawValue: any = cellData && typeof cellData === 'object' && 'raw' in cellData
+            ? cellData.raw
+            : cellData;
+
+        switch (column.type) {
+            case 'component':
+            case 'custom':
+                return this.transformCustomOrComponent(rawValue, column);
+            case 'integer':
+                return this.transformInteger(rawValue);
+            case 'number':
+                return this.transformNumber(rawValue);
+            case 'date':
+            case 'datetime':
+                return this.transformDate(rawValue);
+            case 'duration':
+                return this.transformDuration(rawValue);
+            case 'string':
+            default:
+                return this.transformString(rawValue);
+        }
+    }
+}

package/src/services/RowHeightService.ts

@@ -0,0 +1,81 @@
+import type { GridService } from "../GridService";
+
+export class RowHeightService {
+    private rowHeights: Map<number, number> = new Map();
+    private heightCache: number[] = [];
+    private readonly gridService: GridService;
+
+    constructor(gridService: GridService) {
+        this.gridService = gridService;
+    }
+
+    initRowHeights(numberOfRows: number) {
+        this.rowHeights = new Map(
+            Array.from({ length: numberOfRows }, (_, index) => [index, this.gridService.elementHeight])
+        );
+    }
+
+    getRowHeight(index: number): number {
+        return this.rowHeights.get(index) ?? this.gridService.elementHeight
+    }
+
+    getHeightCache(): number[] {
+        return this.heightCache;
+    }
+
+    updateRowHeight(index: number, height: number) {
+        this.rowHeights.set(index, height);
+        this.recalculateHeights();
+    }
+
+    recalculateHeights() {
+        let filteredRows = this.gridService.getFilterIndexes();
+
+        this.heightCache = [];
+        let sum = 0;
+        for (let i = 0; i < this.gridService.rowCount(); i++) {
+            let rowIndex = filteredRows ? filteredRows[i] : i;
+            sum += this.getRowHeight(rowIndex);
+            this.heightCache.push(sum);
+        }
+    }
+
+    updateRowHeights() {
+        let container = this.gridService.getContainer();
+        if (!container) return;
+
+        const rows = container.querySelectorAll('tbody > tr:not(.firstRow):not(.lastRow)'); // Adjust the selector as needed
+
+        let hasUpdated = false;
+
+        rows.forEach((row, index) => {
+            const rowHeight = row.getBoundingClientRect().height; // Get the actual row height
+            const rowIndex = index + this.gridService.startIndex;
+
+            if (this.getRowHeight(rowIndex) !== rowHeight) {
+                this.updateRowHeight(rowIndex, rowHeight);
+                hasUpdated = true;
+            }
+        });
+
+        if (hasUpdated) {
+            this.gridService.updateRenderedRows();
+        }
+    } 
+
+    findStartIndex(scrollTop: number): number {
+        let index = 0;
+        while (index < this.heightCache.length && this.heightCache[index] < scrollTop) {
+            index++;
+        }
+        return Math.max(0, index);
+    }
+
+    findEndIndex(scrollBottom: number): number {
+        let index = 0;
+        while (index < this.heightCache.length && this.heightCache[index] < scrollBottom) {
+            index++;
+        }
+        return Math.min(index, this.heightCache.length - 1)
+    }
+}

package/src/services/SelectionService.ts

@@ -0,0 +1,71 @@
+import { BehaviorSubject } from 'rxjs';
+
+export class SelectionService {
+    private readonly selectedIndexes$: BehaviorSubject<Set<number>>;
+    private readonly multiSelect: boolean;
+
+    constructor(selections: Set<number> = new Set(), multiSelect: boolean = true) {
+        this.multiSelect = multiSelect;
+        this.selectedIndexes$ = new BehaviorSubject<Set<number>>(selections);
+    }
+
+    get selected$() {
+        return this.selectedIndexes$.asObservable();
+    }
+
+    selectRow(index: number) {
+        const selected = new Set(this.selectedIndexes$.value);
+        selected.add(index);
+        this.selectedIndexes$.next(selected);
+    }
+
+    deselectRow(index: number) {
+        const selected = new Set(this.selectedIndexes$.value);
+        selected.delete(index);
+        this.selectedIndexes$.next(selected);
+    }
+
+    toggleRowSelection(index: number) {
+        const selected = new Set(this.selectedIndexes$.value);
+        if (selected.has(index)) {
+            selected.delete(index);
+        } else {
+            if (!this.multiSelect) {
+                selected.clear();
+
+            }
+            selected.add(index);
+        }
+
+        this.selectedIndexes$.next(selected);
+    }
+
+    clearSelection() {
+        this.selectedIndexes$.next(new Set());
+    }
+
+    selectAll(indices: number[]) {
+        this.selectedIndexes$.next(new Set(indices));
+    }
+
+    deselectAll() {
+        this.clearSelection();
+    }
+
+    shiftSelect(startIndex: number, endIndex: number) {
+        if (!this.multiSelect) return;
+
+        const selected = new Set(this.selectedIndexes$.value);
+        const [start, end] = [Math.min(startIndex, endIndex), Math.max(startIndex, endIndex)];
+
+        for (let i = start; i <= end; i++) {
+            selected.add(i);
+        }
+
+        this.selectedIndexes$.next(selected);
+    }
+
+    isSelected(index: number): boolean {
+        return this.selectedIndexes$.value.has(index);
+    }
+}