@kronor/dtv 0.2.9

package/src/framework/data.test.ts

@@ -0,0 +1,167 @@
+import { flattenFields } from './data';
+import { ColumnDefinition, fieldAlias, field, queryConfigs } from './column-definition';
+
+describe('flattenFields', () => {
+    it('extracts simple fields from rows', () => {
+        const rows = [
+            { id: 1, name: 'Alice', age: 30 },
+            { id: 2, name: 'Bob', age: 25 }
+        ];
+        const columns: ColumnDefinition[] = [
+            { data: [{ type: 'field', path: 'id' }] } as ColumnDefinition,
+            { data: [{ type: 'field', path: 'name' }] } as ColumnDefinition
+        ];
+        const result = flattenFields(rows, columns);
+        expect(result).toEqual([
+            [{ id: 1 }, { name: 'Alice' }],
+            [{ id: 2 }, { name: 'Bob' }]
+        ]);
+    });
+
+    it('handles nested field paths', () => {
+        const rows = [
+            { id: 1, user: { profile: { email: 'alice@example.com' } } },
+            { id: 2, user: { profile: { email: 'bob@example.com' } } }
+        ];
+        const columns: ColumnDefinition[] = [
+            { data: [{ type: 'field', path: 'user.profile.email' }] } as ColumnDefinition
+        ];
+        const result = flattenFields(rows, columns);
+        expect(result).toEqual([
+            [{ 'user.profile.email': 'alice@example.com' }],
+            [{ 'user.profile.email': 'bob@example.com' }]
+        ]);
+    });
+
+    it('handles multiple nested field paths with array parent', () => {
+        const rows = [
+            {
+                id: 1,
+                users: [
+                    { profile: { email: 'alice@example.com', age: 30 } },
+                    { profile: { email: 'bob@example.com', age: 25 } }
+                ]
+            },
+            {
+                id: 2,
+                users: [
+                    { profile: { email: 'carol@example.com', age: 28 } }
+                ]
+            }
+        ];
+        const columns: ColumnDefinition[] = [
+            {
+                data: [
+                    { type: 'field', path: 'users.profile.email' },
+                    { type: 'field', path: 'users.profile.age' }
+                ]
+            } as ColumnDefinition
+        ];
+        const result = flattenFields(rows, columns);
+        expect(result).toEqual([
+            [
+                {
+                    'users.profile.email': ['alice@example.com', 'bob@example.com'],
+                    'users.profile.age': [30, 25]
+                }
+            ],
+            [
+                {
+                    'users.profile.email': ['carol@example.com'],
+                    'users.profile.age': [28]
+                }
+            ]
+        ]);
+    });
+
+    it('handles field aliases correctly', () => {
+        // Simulate the response that would come from GraphQL with aliases
+        const rows = [
+            {
+                id: 1,
+                user: { name: 'Alice' },
+                userName: 'Alice' // This is what GraphQL would return for the alias
+            },
+            {
+                id: 2,
+                user: { name: 'Bob' },
+                userName: 'Bob' // This is what GraphQL would return for the alias
+            }
+        ];
+        const columns: ColumnDefinition[] = [
+            {
+                data: [fieldAlias("userName", field("user.name"))]
+            } as ColumnDefinition
+        ];
+        const result = flattenFields(rows, columns);
+
+        // The flattened result should use the alias name "userName", not the original path "user.name"
+        expect(result).toEqual([
+            [{ userName: 'Alice' }],
+            [{ userName: 'Bob' }]
+        ]);
+    });
+
+    it('handles field aliases with queryConfigs correctly', () => {
+        // Simulate the response that would come from GraphQL with aliases for nested queryConfigs
+        const rows = [
+            {
+                id: 1,
+                posts: [
+                    { title: 'Post 1', created_at: '2023-01-01' },
+                    { title: 'Post 2', created_at: '2023-01-02' }
+                ],
+                recentPostTitles: [ // This is what GraphQL would return for the alias
+                    'Post 2',
+                    'Post 1'
+                ]
+            }
+        ];
+        const columns: ColumnDefinition[] = [
+            {
+                data: [
+                    fieldAlias("recentPostTitles", queryConfigs([
+                        { field: "posts" },
+                        { field: "title" }
+                    ]))
+                ]
+            } as ColumnDefinition
+        ];
+        const result = flattenFields(rows, columns);
+
+        // The flattened result should use the alias name "recentPostTitles", not the generated path "posts.title"
+        expect(result).toEqual([
+            [{
+                recentPostTitles: [
+                    'Post 2',
+                    'Post 1'
+                ]
+            }]
+        ]);
+    });
+
+    it('handles nested field aliases correctly', () => {
+        // Test aliasing a field alias (though this is a rare case, it should be supported)
+        const rows = [
+            {
+                id: 1,
+                user: { name: 'Alice' },
+                userName: 'Alice', // This would be the first alias from GraphQL
+                displayName: 'Alice' // This would be the second alias from GraphQL
+            }
+        ];
+        const columns: ColumnDefinition[] = [
+            {
+                data: [
+                    fieldAlias("displayName", fieldAlias("userName", field("user.name")))
+                ]
+            } as ColumnDefinition
+        ];
+        const result = flattenFields(rows, columns);
+
+        // The flattened result should use the outermost alias name "displayName"
+        expect(result).toEqual([
+            [{ displayName: 'Alice' }]
+        ]);
+    });
+});

package/src/framework/data.ts

@@ -0,0 +1,162 @@
+import { GraphQLClient } from 'graphql-request';
+import { buildHasuraConditions } from '../framework/graphql';
+import { View } from '../framework/view';
+import { ColumnDefinition, FieldQuery, QueryConfig } from '../framework/column-definition';
+import { FilterState } from './state';
+
+export interface FetchDataResult {
+    rows: Record<string, unknown>[]; // Fetched rows from the query
+    flattenedRows: Record<string, unknown>[][]; // Rows flattened according to column definitions
+}
+
+function hasKey<K extends string | number | symbol, T extends { [key in K]: unknown[] }>(obj: unknown, key: K): obj is T {
+    return typeof obj === 'object' && obj !== null && key in obj && Array.isArray((obj as T)[key]);
+}
+
+// Request counter to be able to cancel handling of previous requests
+let requestCounter = 0;
+
+export const fetchData = async ({
+    client,
+    view,
+    query,
+    filterState,
+    rows,
+    cursor
+}: {
+    client: GraphQLClient;
+    view: View;
+    query: string;
+    filterState: FilterState;
+    rows: number;
+    cursor: string | number | null;
+}): Promise<FetchDataResult> => {
+    // Assign a unique ID to this request for ordering
+    const currentRequestId = ++requestCounter;
+
+    try {
+        let conditions = buildHasuraConditions(filterState, view.filterSchema);
+
+        // Merge staticConditions (always-on) if present
+        if (view.staticConditions && view.staticConditions.length > 0) {
+            // If existing conditions object is empty (no user filters), we still wrap both sides in _and for consistency
+            conditions = { _and: [conditions, ...view.staticConditions] } as any;
+        }
+        if (cursor !== null) {
+            const pagKey = view.paginationKey;
+            const pagCond = { [pagKey]: { _lt: cursor } };
+            // Always wrap in _and for pagination
+            // If static conditions already produced an _and wrapper, append to its array to avoid nesting
+            if (conditions && '_and' in conditions && Array.isArray((conditions as any)._and)) {
+                (conditions as any)._and.push(pagCond);
+            } else {
+                conditions = { _and: [conditions, pagCond] } as any;
+            }
+        }
+        const variables = {
+            conditions,
+            limit: rows,
+            orderBy: [{ [view.paginationKey]: 'DESC' }],
+        };
+
+        const response = await client.request(query, variables);
+
+        // Check if this is still the most recent request
+        if (currentRequestId !== requestCounter) {
+            // A newer request has been started, discard this response
+            throw new DOMException('Request superseded by newer request', 'AbortError');
+        }
+
+        if (!hasKey(response, view.collectionName)) {
+            console.error('Error fetching data, unexpected response format:', response);
+            return { rows: [], flattenedRows: [] };
+        }
+
+        const rowsFetched = response[view.collectionName];
+
+        // Flatten the data before returning
+        return {
+            rows: rowsFetched as Record<string, any>[],
+            flattenedRows: flattenFields(rowsFetched as Record<string, any>[], view.columnDefinitions)
+        }
+    } catch (error) {
+        // Don't log AbortError as it's expected when cancelling requests
+        if (error instanceof DOMException && error.name === 'AbortError') {
+            throw error; // Re-throw abort errors so fetchDataWrapper can cancel response handling
+        }
+        console.error('Error fetching data:', error);
+        return { rows: [], flattenedRows: [] };
+    }
+};
+
+// Applies flattenColumnFields to all rows for all columns
+export const flattenFields = (
+    rows: Record<string, any>[],
+    columns: ColumnDefinition[]
+): Record<string, any>[][] => {
+    return rows.map(row =>
+        columns.map(column => flattenColumnFields(row, column))
+    );
+};
+
+// Helper to extract field values for a column from a row
+export const flattenColumnFields = (row: Record<string, any>, column: ColumnDefinition) => {
+    const values: Record<string, any> = {};
+
+    const extractField = (fieldQuery: FieldQuery) => {
+        if (fieldQuery.type === 'field') {
+            const path = fieldQuery.path.split('.');
+            let value: any = row;
+            for (const p of path) {
+                if (Array.isArray(value)) {
+                    // If value is an array, map extraction for each item
+                    value = value.map(item => {
+                        let v = item;
+                        for (let i = path.indexOf(p); i < path.length; i++) {
+                            v = v?.[path[i]];
+                        }
+                        return v;
+                    });
+                    break;
+                } else {
+                    value = value?.[p];
+                }
+            }
+            values[fieldQuery.path] = value;
+        } else if (fieldQuery.type === 'queryConfigs') {
+            const pathKey = fieldQuery.configs.map(c => c.field).join('.');
+
+            const extract = (currentValue: any, configs: QueryConfig[]): any => {
+                if (configs.length === 0) {
+                    return currentValue;
+                }
+
+                if (currentValue === undefined || currentValue === null) {
+                    return undefined;
+                }
+
+                const [currentConfig, ...remainingConfigs] = configs;
+
+                if (Array.isArray(currentValue)) {
+                    return currentValue.map(item => extract(item, configs));
+                }
+
+                if (typeof currentValue === 'object' && currentConfig.field in currentValue) {
+                    const nextValue = currentValue[currentConfig.field];
+                    return extract(nextValue, remainingConfigs);
+                }
+
+                return undefined;
+            };
+
+            values[pathKey] = extract(row, fieldQuery.configs);
+        } else if (fieldQuery.type === 'fieldAlias') {
+            // For field aliases, we look up the value using the alias name instead of the original field path
+            // The GraphQL response should contain the aliased field name
+            values[fieldQuery.alias] = row[fieldQuery.alias];
+        }
+    };
+
+    column.data.forEach(extractField);
+    return values;
+};

package/src/framework/filter-form-state.test.ts

@@ -0,0 +1,189 @@
+import {
+    serializeFilterFormStateMap,
+    parseFilterFormState
+} from './filter-form-state';
+import { FilterSchemasAndGroups } from './filters';
+import { FilterState } from './state';
+
+describe('filter-form-state', () => {
+    const mockFilterSchema: FilterSchemasAndGroups = {
+        groups: [
+            { name: 'Basic', label: 'Basic' }
+        ],
+        filters: [
+            {
+                id: 'email-filter',
+                label: 'Email',
+                expression: {
+                    type: 'equals',
+                    field: 'email',
+                    value: { type: 'text', label: 'Email' }
+                },
+                group: 'Basic',
+                aiGenerated: false
+            },
+            {
+                id: 'date-filter',
+                label: 'Date',
+                expression: {
+                    type: 'equals',
+                    field: 'created_at',
+                    value: { type: 'date', label: 'Created Date' }
+                },
+                group: 'Basic',
+                aiGenerated: false
+            }
+        ]
+    };
+
+    const mockFilterState: FilterState = new Map([
+        ['email-filter', {
+            type: 'leaf',
+            field: 'email',
+            value: 'test@example.com',
+            control: { type: 'text', label: 'Email' },
+            filterType: 'equals'
+        }],
+        ['date-filter', {
+            type: 'leaf',
+            field: 'created_at',
+            value: new Date('2023-01-01T00:00:00.000Z'),
+            control: { type: 'date', label: 'Created Date' },
+            filterType: 'equals'
+        }]
+    ]);
+
+    describe('serializeFilterFormStateMap', () => {
+        it('should serialize filter state Map to JSON-compatible format', () => {
+            const serialized = serializeFilterFormStateMap(mockFilterState);
+
+            expect(typeof serialized).toBe('object');
+            expect(serialized).not.toBeNull();
+            expect(Array.isArray(serialized)).toBe(false);
+
+            // Check that both filters are present as object properties
+            expect(serialized['email-filter']).toEqual({
+                type: 'leaf',
+                field: 'email',
+                value: 'test@example.com',
+                control: { type: 'text', label: 'Email' },
+                filterType: 'equals'
+            });
+
+            expect(serialized['date-filter']).toEqual({
+                type: 'leaf',
+                field: 'created_at',
+                value: '2023-01-01T00:00:00.000Z', // Date should be serialized as ISO string
+                control: { type: 'date', label: 'Created Date' },
+                filterType: 'equals'
+            });
+        });
+
+        it('should handle complex nested structures', () => {
+            const complexState: FilterState = new Map([
+                ['complex-filter', {
+                    type: 'and',
+                    filterType: 'and',
+                    children: [
+                        {
+                            type: 'leaf',
+                            field: 'email',
+                            value: 'test@example.com',
+                            control: { type: 'text', label: 'Email' },
+                            filterType: 'equals'
+                        },
+                        {
+                            type: 'not',
+                            filterType: 'not',
+                            child: {
+                                type: 'leaf',
+                                field: 'status',
+                                value: 'deleted',
+                                control: { type: 'text', label: 'Status' },
+                                filterType: 'equals'
+                            }
+                        }
+                    ]
+                }]
+            ]);
+
+            const serialized = serializeFilterFormStateMap(complexState);
+            expect(typeof serialized).toBe('object');
+            expect(Array.isArray(serialized)).toBe(false);
+
+            const complexFilter = serialized['complex-filter'];
+            expect(complexFilter).toBeDefined();
+            expect(complexFilter.type).toBe('and');
+            expect(complexFilter.children).toHaveLength(2);
+            expect(complexFilter.children[1].type).toBe('not');
+        });
+    });
+
+    describe('parseFilterFormState', () => {
+        it('should parse serialized state back to FilterState with date handling', () => {
+            const serialized = {
+                'email-filter': {
+                    type: 'leaf',
+                    field: 'email',
+                    value: 'test@example.com',
+                    control: { type: 'text', label: 'Email' },
+                    filterType: 'equals'
+                },
+                'date-filter': {
+                    type: 'leaf',
+                    field: 'created_at',
+                    value: '2023-01-01T00:00:00.000Z',
+                    control: { type: 'date', label: 'Created Date' },
+                    filterType: 'equals'
+                }
+            };
+
+            const parsed = parseFilterFormState(serialized, mockFilterSchema);
+
+            expect(parsed).toBeInstanceOf(Map);
+            expect(parsed.size).toBe(2);
+
+            const emailFilter = parsed.get('email-filter');
+            expect(emailFilter).toEqual({ type: 'leaf', value: 'test@example.com' });
+
+            const dateFilter = parsed.get('date-filter');
+            expect(dateFilter?.type).toBe('leaf');
+            expect((dateFilter as any).value).toBeInstanceOf(Date);
+            expect(((dateFilter as any).value as Date).toISOString()).toBe('2023-01-01T00:00:00.000Z');
+        });
+
+        it('should treat invalid date strings as plain strings', () => {
+            const serialized = {
+                'date-filter': {
+                    type: 'leaf',
+                    field: 'created_at',
+                    value: 'invalid-date',
+                    control: { type: 'date', label: 'Created Date' },
+                    filterType: 'equals'
+                }
+            };
+            const parsed = parseFilterFormState(serialized, mockFilterSchema);
+            const dateFilter = parsed.get('date-filter');
+            expect(dateFilter).toEqual({ type: 'leaf', value: 'invalid-date' });
+        });
+    });
+
+    describe('round-trip serialization/parsing', () => {
+        it('should preserve data through serialize/parse cycle', () => {
+            // Use the new serializeFilterFormStateMap function for a true round-trip test
+            const serialized = serializeFilterFormStateMap(mockFilterState);
+            const parsed = parseFilterFormState(serialized, mockFilterSchema);
+
+            expect(parsed).toBeInstanceOf(Map);
+            expect(parsed.size).toBe(2);
+
+            const emailFilter = parsed.get('email-filter');
+            const dateFilter = parsed.get('date-filter');
+
+            expect(emailFilter).toEqual({ type: 'leaf', value: 'test@example.com' });
+            expect(dateFilter?.type).toBe('leaf');
+            expect((dateFilter as any).value).toBeInstanceOf(Date);
+            expect(((dateFilter as any).value as Date).toISOString()).toBe('2023-01-01T00:00:00.000Z');
+        });
+    });
+});