@meshmakers/octo-meshboard 3.3.1150 → 3.3.1170

package/fesm2022/meshmakers-octo-meshboard.mjs

@@ -2545,6 +2545,7 @@ const ExecuteRuntimeQueryDocumentDto = gql `
         columns {
           attributePath
           attributeValueType
+          aggregationType
         }
         rows(after: $after, first: $first, fieldFilter: $fieldFilter) {
           totalCount
@@ -3941,6 +3942,314 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Utility functions for widget data transformation.
+ * These are pure functions extracted for testability.
+ */
+/**
+ * Supported row types for query processing.
+ */
+const SUPPORTED_ROW_TYPES = [
+    'RtSimpleQueryRow',
+    'RtAggregationQueryRow',
+    'RtGroupingAggregationQueryRow'
+];
+/**
+ * Sanitizes field names for use as object keys.
+ * Replaces dots with underscores so the value can be stored under a single key
+ * without Kendo's dot-path navigation interpreting the dots as nested access.
+ * Used when generating record keys, NOT for path comparison — use
+ * {@link matchesAttributePath} for matching cell paths against widget configs.
+ * @param fieldName The field name to sanitize
+ * @returns Sanitized field name
+ */
+function sanitizeFieldName(fieldName) {
+    return fieldName.replace(/\./g, '_');
+}
+/**
+ * Strips a trailing aggregation function suffix from a path so the base path can
+ * be compared independently of which aggregation produced it. The engine emits
+ * cell paths like `meterreading_count` / `amountvalue_sum` for RT aggregation,
+ * grouped aggregation, and stream-data variants.
+ */
+function stripAggregationFunctionSuffix(path) {
+    return path.replace(/_(?:count|sum|avg|min|max)$/i, '');
+}
+/**
+ * Canonical key form: drop dot and underscore separators and lowercase the rest.
+ * Lets us compare a widget config's stored field name (which may be
+ * `meterReading`, `meter_reading`, or `amount_value`) against a cell path
+ * (which may be wire-form `meterreading_count` or `amountvalue_sum`) on a
+ * single common form.
+ */
+function toCanonicalAttributeKey(s) {
+    return s.replace(/[._]/g, '').toLowerCase();
+}
+/**
+ * Detects whether a path ends with the engine's aggregation function suffix
+ * (`_count`, `_sum`, `_avg`, `_min`, `_max`). Used to decide whether the loose
+ * back-compat fallback in {@link matchesAttributePath} should fire.
+ */
+function hasAggregationFunctionSuffix(path) {
+    return /_(?:count|sum|avg|min|max)$/i.test(path);
+}
+/**
+ * Returns true when a cell's `attributePath` refers to the same source attribute
+ * as a widget config's stored field name. Handles three input shapes:
+ *
+ *  - Simple-query cells use the original CK attribute path (e.g. `meterReading`
+ *    or `amount.value`).
+ *  - RT aggregation cells use the engine's wire-form key with a function suffix
+ *    (e.g. `meterreading_count`, `amountvalue_sum`).
+ *  - RT grouping cells and stream-data cells use the same wire-form without a
+ *    function suffix (e.g. `operatingstatus`).
+ *
+ * Widget configs typically store `sanitizeFieldName(originalPath)`, e.g.
+ * `meterReading` or `amount_value`. This helper returns true when both refer
+ * to the same source attribute, regardless of which form they're in.
+ *
+ * Exact `sanitizeFieldName` match wins (preserves behavior for simple queries
+ * and stream-data widget configs that were saved with wire-form keys); the
+ * canonical-form fallback unbreaks RT-aggregation / grouping widgets whose
+ * configs were saved before the engine emitted wire-form keys.
+ */
+function matchesAttributePath(cellPath, configField) {
+    if (!cellPath || !configField)
+        return false;
+    if (sanitizeFieldName(cellPath) === configField)
+        return true;
+    // Loose fallback for legacy configs saved with the original CK path before the engine
+    // switched to wire-form column emission. Only fires when configField itself does NOT
+    // carry an aggregation suffix — otherwise we would cross-match MIN against MAX cells
+    // (both would canonicalise to the same base path).
+    if (hasAggregationFunctionSuffix(configField))
+        return false;
+    const cellBase = stripAggregationFunctionSuffix(cellPath);
+    return toCanonicalAttributeKey(cellBase) === toCanonicalAttributeKey(configField);
+}
+/**
+ * Parses a value to a number.
+ * Returns 0 for NaN or non-numeric values.
+ * @param value The value to parse
+ * @returns Parsed numeric value or 0
+ */
+function parseNumericValue(value) {
+    if (typeof value === 'number') {
+        return isNaN(value) ? 0 : value;
+    }
+    const parsed = parseFloat(String(value));
+    return isNaN(parsed) ? 0 : parsed;
+}
+/**
+ * Extracts a single value from an aggregation query result.
+ * Used for KPI widgets with 'aggregation' queryMode.
+ * @param queryResult The query result containing rows
+ * @param valueField Optional specific field to extract (uses first cell if not specified)
+ * @returns The extracted numeric value
+ */
+function extractAggregationValue(queryResult, valueField) {
+    const rows = queryResult.rows?.items ?? [];
+    // Get the first supported row
+    const firstRow = rows.find(row => row && SUPPORTED_ROW_TYPES.includes(row.__typename ?? ''));
+    if (!firstRow)
+        return 0;
+    const cells = firstRow.cells?.items ?? [];
+    // Find the value field if specified
+    if (valueField) {
+        for (const cell of cells) {
+            if (!cell?.attributePath)
+                continue;
+            if (matchesAttributePath(cell.attributePath, valueField)) {
+                return parseNumericValue(cell.value);
+            }
+        }
+    }
+    // Fallback: return first cell value
+    const firstCell = cells.find(c => c !== null);
+    return firstCell ? parseNumericValue(firstCell.value) : 0;
+}
+/**
+ * Extracts a value from a grouped aggregation query result.
+ * Used for KPI widgets with 'groupedAggregation' queryMode.
+ * Finds the row where categoryField matches categoryValue and extracts valueField.
+ * @param queryResult The query result containing rows
+ * @param categoryField The field name to match against
+ * @param categoryValue The value to match
+ * @param valueField The field to extract the value from
+ * @returns The extracted numeric value
+ */
+function extractGroupedAggregationValue(queryResult, categoryField, categoryValue, valueField) {
+    if (!categoryField || !categoryValue || !valueField) {
+        return 0;
+    }
+    const rows = queryResult.rows?.items ?? [];
+    // Find the row where category matches
+    for (const row of rows) {
+        if (!row || !SUPPORTED_ROW_TYPES.includes(row.__typename ?? ''))
+            continue;
+        const cells = row.cells?.items ?? [];
+        let categoryMatch = false;
+        let value = 0;
+        for (const cell of cells) {
+            if (!cell?.attributePath)
+                continue;
+            if (matchesAttributePath(cell.attributePath, categoryField) && String(cell.value) === categoryValue) {
+                categoryMatch = true;
+            }
+            if (matchesAttributePath(cell.attributePath, valueField)) {
+                value = parseNumericValue(cell.value);
+            }
+        }
+        if (categoryMatch) {
+            return value;
+        }
+    }
+    return 0;
+}
+/**
+ * Processes bar chart data in Static Series Mode.
+ * Each series in config corresponds to a separate numeric field.
+ * @param rows The query rows to process
+ * @param categoryField The field to use for categories
+ * @param seriesConfigs The series configurations
+ * @returns Processed bar chart data
+ */
+function processStaticSeriesData(rows, categoryField, seriesConfigs) {
+    const categories = [];
+    const seriesMap = new Map();
+    // Initialize series map from config
+    for (const seriesConfig of seriesConfigs) {
+        seriesMap.set(seriesConfig.field, []);
+    }
+    for (const row of rows) {
+        if (!SUPPORTED_ROW_TYPES.includes(row.__typename ?? ''))
+            continue;
+        const cells = row.cells?.items ?? [];
+        let categoryValue = '';
+        const rowValues = new Map();
+        for (const cell of cells) {
+            if (!cell?.attributePath)
+                continue;
+            if (matchesAttributePath(cell.attributePath, categoryField)) {
+                categoryValue = String(cell.value ?? '');
+            }
+            // Check if this cell is one of our series fields
+            for (const seriesConfig of seriesConfigs) {
+                if (matchesAttributePath(cell.attributePath, seriesConfig.field)) {
+                    rowValues.set(seriesConfig.field, parseNumericValue(cell.value));
+                }
+            }
+        }
+        if (categoryValue !== '') {
+            categories.push(categoryValue);
+            // Add values for each series
+            for (const seriesConfig of seriesConfigs) {
+                const value = rowValues.get(seriesConfig.field) ?? 0;
+                seriesMap.get(seriesConfig.field)?.push(value);
+            }
+        }
+    }
+    // Convert to series data array
+    const seriesData = seriesConfigs.map(seriesConfig => ({
+        name: seriesConfig.name ?? seriesConfig.field,
+        data: seriesMap.get(seriesConfig.field) ?? [],
+        color: seriesConfig.color
+    }));
+    return { categories, seriesData };
+}
+/**
+ * Processes bar chart data in Dynamic Series Mode.
+ * Series are created dynamically from unique values of seriesGroupField.
+ * @param rows The query rows to process
+ * @param categoryField The field to use for categories
+ * @param seriesGroupField The field to use for series grouping
+ * @param valueField The field to use for values
+ * @returns Processed bar chart data
+ */
+function processDynamicSeriesData(rows, categoryField, seriesGroupField, valueField) {
+    // Build a map: category -> seriesGroup -> value
+    const dataMap = new Map();
+    const allCategories = new Set();
+    const allSeriesGroups = new Set();
+    for (const row of rows) {
+        if (!SUPPORTED_ROW_TYPES.includes(row.__typename ?? ''))
+            continue;
+        const cells = row.cells?.items ?? [];
+        let categoryValue = '';
+        let seriesGroupValue = '';
+        let numericValue = 0;
+        for (const cell of cells) {
+            if (!cell?.attributePath)
+                continue;
+            if (matchesAttributePath(cell.attributePath, categoryField)) {
+                categoryValue = String(cell.value ?? '');
+            }
+            else if (matchesAttributePath(cell.attributePath, seriesGroupField)) {
+                seriesGroupValue = String(cell.value ?? '');
+            }
+            else if (matchesAttributePath(cell.attributePath, valueField)) {
+                numericValue = parseNumericValue(cell.value);
+            }
+        }
+        if (categoryValue && seriesGroupValue) {
+            allCategories.add(categoryValue);
+            allSeriesGroups.add(seriesGroupValue);
+            if (!dataMap.has(categoryValue)) {
+                dataMap.set(categoryValue, new Map());
+            }
+            dataMap.get(categoryValue).set(seriesGroupValue, numericValue);
+        }
+    }
+    // Convert to arrays (maintain insertion order)
+    const categories = Array.from(allCategories);
+    const seriesGroups = Array.from(allSeriesGroups);
+    // Build series data
+    const seriesData = seriesGroups.map(seriesGroup => {
+        const data = categories.map(category => {
+            return dataMap.get(category)?.get(seriesGroup) ?? 0;
+        });
+        return {
+            name: seriesGroup,
+            data
+        };
+    });
+    return { categories, seriesData };
+}
+/**
+ * Processes pie chart data from query rows.
+ * @param rows The query rows to process
+ * @param categoryField The field to use for categories
+ * @param valueField The field to use for values
+ * @returns Array of pie chart data items
+ */
+function processPieChartData(rows, categoryField, valueField) {
+    const result = [];
+    for (const row of rows) {
+        if (!SUPPORTED_ROW_TYPES.includes(row.__typename ?? ''))
+            continue;
+        const cells = row.cells?.items ?? [];
+        let categoryValue = '';
+        let numericValue = 0;
+        for (const cell of cells) {
+            if (!cell?.attributePath)
+                continue;
+            if (matchesAttributePath(cell.attributePath, categoryField)) {
+                categoryValue = String(cell.value ?? '');
+            }
+            else if (matchesAttributePath(cell.attributePath, valueField)) {
+                numericValue = parseNumericValue(cell.value);
+            }
+        }
+        if (categoryValue) {
+            result.push({
+                category: categoryValue,
+                value: numericValue
+            });
+        }
+    }
+    return result;
+}
+
 class KpiWidgetComponent {
     dataService = inject(DashboardDataService);
     executeRuntimeQueryGQL = inject(ExecuteRuntimeQueryDtoGQL);
@@ -4266,8 +4575,7 @@ class KpiWidgetComponent {
         for (const cell of cells) {
             if (!cell?.attributePath)
                 continue;
-            const sanitizedPath = this.sanitizeFieldName(cell.attributePath);
-            if (valueField && sanitizedPath === valueField) {
+            if (valueField && matchesAttributePath(cell.attributePath, valueField)) {
                 return this.extractCellValue(cell.value);
             }
         }
@@ -4295,11 +4603,10 @@ class KpiWidgetComponent {
             for (const cell of cells) {
                 if (!cell?.attributePath)
                     continue;
-                const sanitizedPath = this.sanitizeFieldName(cell.attributePath);
-                if (sanitizedPath === categoryField && String(cell.value) === categoryValue) {
+                if (matchesAttributePath(cell.attributePath, categoryField) && String(cell.value) === categoryValue) {
                     categoryMatch = true;
                 }
-                if (sanitizedPath === valueField) {
+                if (matchesAttributePath(cell.attributePath, valueField)) {
                     value = this.extractCellValue(cell.value);
                 }
             }
@@ -4309,12 +4616,6 @@ class KpiWidgetComponent {
         }
         return 0;
     }
-    parseNumericValue(value) {
-        if (typeof value === 'number')
-            return value;
-        const parsed = parseFloat(String(value));
-        return isNaN(parsed) ? 0 : parsed;
-    }
     /**
      * Extracts a cell value, preserving strings and converting numbers.
      * Returns the value as-is if it's a string, or parses it as a number.
@@ -4333,9 +4634,6 @@ class KpiWidgetComponent {
         // For other types (boolean, object), convert to string
         return String(value);
     }
-    sanitizeFieldName(fieldName) {
-        return fieldName.replace(/\./g, '_');
-    }
     /**
      * Converts widget filter configuration to GraphQL FieldFilterDto format.
      * Resolves MeshBoard variables in filter values before conversion.
@@ -4354,6 +4652,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Input
             }] } });
 
+const GetRuntimeQueryColumnsDocumentDto = gql `
+    query getRuntimeQueryColumns($rtId: OctoObjectId!) {
+  runtime {
+    runtimeQuery(rtId: $rtId) {
+      items {
+        queryRtId
+        associatedCkTypeId
+        columns {
+          attributePath
+          attributeValueType
+          aggregationType
+        }
+      }
+    }
+  }
+}
+    `;
+class GetRuntimeQueryColumnsDtoGQL extends i1.Query {
+    document = GetRuntimeQueryColumnsDocumentDto;
+    constructor(apollo) {
+        super(apollo);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GetRuntimeQueryColumnsDtoGQL, deps: [{ token: i1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GetRuntimeQueryColumnsDtoGQL, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GetRuntimeQueryColumnsDtoGQL, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.Apollo }] });
+
 /**
  * Configuration dialog for KPI widgets.
  * Allows selecting data source, value attribute, and display options.
@@ -4363,6 +4693,7 @@ class KpiConfigDialogComponent {
     ckTypeSelectorService = inject(CkTypeSelectorService);
     attributeSelectorService = inject(AttributeSelectorService);
     executeRuntimeQueryGQL = inject(ExecuteRuntimeQueryDtoGQL);
+    getRuntimeQueryColumnsGQL = inject(GetRuntimeQueryColumnsDtoGQL);
     meshBoardStateService = inject(MeshBoardStateService);
     windowRef = inject(WindowRef);
     ckTypeSelectorInput;
@@ -4729,27 +5060,32 @@ class KpiConfigDialogComponent {
             return;
         this.isLoadingQueryColumns = true;
         try {
-            const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
+            // Metadata-only fetch — column resolver runs off the cached query definition
+            // without executing the underlying aggregation, so the dialog opens fast even
+            // for queries that aggregate over large data sets.
+            const result = await firstValueFrom(this.getRuntimeQueryColumnsGQL.fetch({
                 variables: {
-                    rtId: rtId,
-                    first: 100 // Fetch rows for category values
+                    rtId: rtId
                 }
             }));
             const queryItems = result.data?.runtime?.runtimeQuery?.items ?? [];
             if (queryItems.length > 0 && queryItems[0]) {
-                const queryResult = queryItems[0];
-                // Extract columns
-                const columns = queryResult.columns ?? [];
+                const columns = queryItems[0].columns ?? [];
                 const filteredColumns = columns
                     .filter((c) => c !== null);
-                // queryColumns use sanitized paths for UI display and matching with query results
+                // Column AttributePath is already in the engine's wire form for aggregation /
+                // grouping columns (e.g. `quantity_sum`, `operatingstatus`) so picker entries
+                // double as both the visible label and the stored config value, and MIN + MAX
+                // of the same source path show up as two distinct entries.
                 this.queryColumns = filteredColumns.map(c => ({
-                    attributePath: this.sanitizeFieldName(c.attributePath ?? ''),
-                    attributeValueType: c.attributeValueType ?? ''
+                    attributePath: c.attributePath ?? '',
+                    attributeValueType: c.attributeValueType ?? '',
+                    aggregationType: c.aggregationType ?? null
                 }));
-                // Extract category values for grouped aggregation
-                if (this.queryMode === 'groupedAggregation') {
-                    await this.extractCategoryValues(queryResult);
+                // Category values for grouped aggregation are loaded on-demand by
+                // loadCategoryValuesForField — only when a categoryField is actually selected.
+                if (this.queryMode === 'groupedAggregation' && this.form.queryCategoryField) {
+                    await this.loadCategoryValuesForField(rtId, this.form.queryCategoryField);
                 }
             }
         }
@@ -4792,8 +5128,7 @@ class KpiConfigDialogComponent {
                     for (const cell of cells) {
                         if (!cell?.attributePath)
                             continue;
-                        const sanitizedPath = this.sanitizeFieldName(cell.attributePath);
-                        if (sanitizedPath === categoryField && cell.value !== null && cell.value !== undefined) {
+                        if (matchesAttributePath(cell.attributePath, categoryField) && cell.value !== null && cell.value !== undefined) {
                             values.add(String(cell.value));
                         }
                     }
@@ -4812,15 +5147,6 @@ class KpiConfigDialogComponent {
             this.isLoadingCategoryValues = false;
         }
     }
-    async extractCategoryValues(_queryResult) {
-        // Load category values if a category field is already selected
-        if (this.queryColumns.length > 0 && this.form.queryCategoryField && this.selectedPersistentQuery) {
-            await this.loadCategoryValuesForField(this.selectedPersistentQuery.rtId, this.form.queryCategoryField);
-        }
-    }
-    sanitizeFieldName(fieldName) {
-        return fieldName.replace(/\./g, '_');
-    }
     // ============================================================================
     // Filter Methods
     // ============================================================================
@@ -7224,15 +7550,19 @@ class TableWidgetDataSourceDirective extends OctoGraphQlDataSource {
                 if (hasCkTypeIdColumn) {
                     record['ckTypeId'] = queryRow.ckTypeId ?? '';
                 }
-                // Flatten cells into the record (sanitize field names for grid compatibility)
-                // Only add fields that are in the query columns
+                // Flatten cells into the record. Each cell is stored under the COLUMN's
+                // attributePath (which is what the Kendo grid uses as `field`) rather than
+                // the cell's own attributePath — the two may differ now that the engine
+                // emits cell paths in wire-form with a function suffix
+                // (e.g. cell path `meterreading_count` for column path `meterReading`).
+                // `matchesAttributePath` reconciles both forms.
                 const cells = queryRow.cells?.items ?? [];
                 for (const cell of cells) {
-                    if (cell?.attributePath) {
-                        const sanitizedPath = this.sanitizeFieldName(cell.attributePath);
-                        if (columnPaths.has(sanitizedPath)) {
-                            record[sanitizedPath] = cell.value;
-                        }
+                    if (!cell?.attributePath)
+                        continue;
+                    const matchingColumn = columns.find(col => matchesAttributePath(cell.attributePath, col.attributePath));
+                    if (matchingColumn) {
+                        record[matchingColumn.attributePath] = cell.value;
                     }
                 }
                 return record;
@@ -8412,8 +8742,7 @@ class GaugeWidgetComponent {
         for (const cell of cells) {
             if (!cell?.attributePath)
                 continue;
-            const sanitizedPath = this.sanitizeFieldName(cell.attributePath);
-            if (valueField && sanitizedPath === valueField) {
+            if (valueField && matchesAttributePath(cell.attributePath, valueField)) {
                 return this.parseNumericValue(cell.value);
             }
         }
@@ -8441,11 +8770,10 @@ class GaugeWidgetComponent {
             for (const cell of cells) {
                 if (!cell?.attributePath)
                     continue;
-                const sanitizedPath = this.sanitizeFieldName(cell.attributePath);
-                if (sanitizedPath === categoryField && String(cell.value) === categoryValue) {
+                if (matchesAttributePath(cell.attributePath, categoryField) && String(cell.value) === categoryValue) {
                     categoryMatch = true;
                 }
-                if (sanitizedPath === valueField) {
+                if (matchesAttributePath(cell.attributePath, valueField)) {
                     value = this.parseNumericValue(cell.value);
                 }
             }
@@ -8461,9 +8789,6 @@ class GaugeWidgetComponent {
         const parsed = parseFloat(String(value));
         return isNaN(parsed) ? 0 : parsed;
     }
-    sanitizeFieldName(fieldName) {
-        return fieldName.replace(/\./g, '_');
-    }
     /**
      * Converts widget filter configuration to GraphQL FieldFilterDto format.
      * Resolves MeshBoard variables in filter values before conversion.
@@ -8833,6 +9158,7 @@ class GaugeConfigDialogComponent {
     ckTypeSelectorService = inject(CkTypeSelectorService);
     attributeSelectorService = inject(AttributeSelectorService);
     executeRuntimeQueryGQL = inject(ExecuteRuntimeQueryDtoGQL);
+    getRuntimeQueryColumnsGQL = inject(GetRuntimeQueryColumnsDtoGQL);
     meshBoardStateService = inject(MeshBoardStateService);
     windowRef = inject(WindowRef);
     ckTypeSelectorInput;
@@ -9182,27 +9508,29 @@ class GaugeConfigDialogComponent {
     async loadQueryColumnsAndValues(queryRtId) {
         this.isLoadingQueryColumns = true;
         try {
-            const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
+            // Metadata-only fetch — skips backend aggregation execution so the dialog opens
+            // fast even for large data sets.
+            const result = await firstValueFrom(this.getRuntimeQueryColumnsGQL.fetch({
                 variables: {
-                    rtId: queryRtId,
-                    first: 100 // Fetch rows for category values
+                    rtId: queryRtId
                 }
             }));
             const queryItems = result.data?.runtime?.runtimeQuery?.items ?? [];
             if (queryItems.length > 0 && queryItems[0]) {
-                const queryResult = queryItems[0];
-                // Extract columns
-                const columns = queryResult.columns ?? [];
+                const columns = queryItems[0].columns ?? [];
                 const filteredColumns = columns
                     .filter((c) => c !== null);
-                // queryColumns use sanitized paths for UI display and matching with query results
+                // Engine emits column attributePath in wire form for aggregation / grouping
+                // columns, so the picker can use it as both label and stored value verbatim.
                 this.queryColumns = filteredColumns.map(c => ({
-                    attributePath: this.sanitizeFieldName(c.attributePath ?? ''),
-                    attributeValueType: c.attributeValueType ?? ''
+                    attributePath: c.attributePath ?? '',
+                    attributeValueType: c.attributeValueType ?? '',
+                    aggregationType: c.aggregationType ?? null
                 }));
-                // Extract category values for grouped aggregation
-                if (this.queryMode === 'groupedAggregation') {
-                    await this.extractCategoryValues(queryResult);
+                // Category values for grouped aggregation are loaded on-demand by
+                // loadCategoryValuesForField — only when a categoryField is actually selected.
+                if (this.queryMode === 'groupedAggregation' && this.form.queryCategoryField) {
+                    await this.loadCategoryValuesForField(queryRtId, this.form.queryCategoryField);
                 }
             }
         }
@@ -9245,8 +9573,7 @@ class GaugeConfigDialogComponent {
                     for (const cell of cells) {
                         if (!cell?.attributePath)
                             continue;
-                        const sanitizedPath = this.sanitizeFieldName(cell.attributePath);
-                        if (sanitizedPath === categoryField && cell.value !== null && cell.value !== undefined) {
+                        if (matchesAttributePath(cell.attributePath, categoryField) && cell.value !== null && cell.value !== undefined) {
                             values.add(String(cell.value));
                         }
                     }
@@ -9265,15 +9592,6 @@ class GaugeConfigDialogComponent {
             this.isLoadingCategoryValues = false;
         }
     }
-    async extractCategoryValues(_queryResult) {
-        // Load category values if a category field is already selected
-        if (this.queryColumns.length > 0 && this.form.queryCategoryField && this.selectedPersistentQuery) {
-            await this.loadCategoryValuesForField(this.selectedPersistentQuery.rtId, this.form.queryCategoryField);
-        }
-    }
-    sanitizeFieldName(fieldName) {
-        return fieldName.replace(/\./g, '_');
-    }
     // ============================================================================
     // Filter Methods
     // ============================================================================
@@ -10293,13 +10611,15 @@ class PieChartWidgetComponent {
             this._isLoading.set(false);
             return;
         }
-        // Extract columns to find field indices
-        const columns = (queryResult.columns ?? [])
+        // Extract columns to verify configured fields are present. Both forms (original CK
+        // path and engine wire-form) are accepted so saved configs survive the engine's
+        // switch to wire-form keys without a migration.
+        const columnPaths = (queryResult.columns ?? [])
             .filter((c) => c !== null)
-            .map(c => this.sanitizeFieldName(c.attributePath ?? ''));
-        const categoryFieldIndex = columns.indexOf(this.sanitizeFieldName(this.config.categoryField));
-        const valueFieldIndex = columns.indexOf(this.sanitizeFieldName(this.config.valueField));
-        if (categoryFieldIndex === -1 || valueFieldIndex === -1) {
+            .map(c => c.attributePath ?? '');
+        const categoryFieldPresent = columnPaths.some(p => matchesAttributePath(p, this.config.categoryField));
+        const valueFieldPresent = columnPaths.some(p => matchesAttributePath(p, this.config.valueField));
+        if (!categoryFieldPresent || !valueFieldPresent) {
             this._error.set('Configured fields not found in query result');
             this._isLoading.set(false);
             return;
@@ -10318,11 +10638,10 @@ class PieChartWidgetComponent {
             for (const cell of cells) {
                 if (!cell?.attributePath)
                     continue;
-                const sanitizedPath = this.sanitizeFieldName(cell.attributePath);
-                if (sanitizedPath === this.sanitizeFieldName(this.config.categoryField)) {
+                if (matchesAttributePath(cell.attributePath, this.config.categoryField)) {
                     category = String(cell.value ?? '');
                 }
-                if (sanitizedPath === this.sanitizeFieldName(this.config.valueField)) {
+                if (matchesAttributePath(cell.attributePath, this.config.valueField)) {
                     const numValue = typeof cell.value === 'number' ? cell.value : parseFloat(String(cell.value));
                     value = isNaN(numValue) ? 0 : numValue;
                 }
@@ -10333,13 +10652,6 @@ class PieChartWidgetComponent {
         this._chartData.set(chartData);
         this._isLoading.set(false);
     }
-    /**
-     * Sanitizes field names for comparison.
-     * Replaces dots with underscores (same as table widget).
-     */
-    sanitizeFieldName(fieldName) {
-        return fieldName.replace(/\./g, '_');
-    }
     /**
      * Converts widget filter configuration to GraphQL FieldFilterDto format.
      * Resolves MeshBoard variables in filter values before conversion.
@@ -10442,7 +10754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Configuration dialog for Pie Chart widgets.
  */
 class PieChartConfigDialogComponent {
-    executeRuntimeQueryGQL = inject(ExecuteRuntimeQueryDtoGQL);
+    getRuntimeQueryColumnsGQL = inject(GetRuntimeQueryColumnsDtoGQL);
     stateService = inject(MeshBoardStateService);
     windowRef = inject(WindowRef);
     querySelector;
@@ -10611,10 +10923,12 @@ class PieChartConfigDialogComponent {
     async loadQueryColumns(queryRtId) {
         this.isLoadingColumns = true;
         try {
-            const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
+            // Metadata-only query: column resolver runs off the cached query definition without
+            // touching the row execution path, so the dialog opens fast even when the underlying
+            // persistent query aggregates over a large data set.
+            const result = await firstValueFrom(this.getRuntimeQueryColumnsGQL.fetch({
                 variables: {
-                    rtId: queryRtId,
-                    first: 1 // We only need columns, not data
+                    rtId: queryRtId
                 }
             }));
             const queryItems = result.data?.runtime?.runtimeQuery?.items ?? [];
@@ -10622,10 +10936,12 @@ class PieChartConfigDialogComponent {
                 const columns = queryItems[0].columns ?? [];
                 const filteredColumns = columns
                     .filter((c) => c !== null);
-                // queryColumns use sanitized paths for UI display and matching with query results
+                // Engine emits column attributePath in wire form for aggregation / grouping
+                // columns (e.g. `quantity_sum`, `operatingstatus`); picker uses it verbatim.
                 this.queryColumns = filteredColumns.map(c => ({
-                    attributePath: this.sanitizeFieldName(c.attributePath ?? ''),
-                    attributeValueType: c.attributeValueType ?? ''
+                    attributePath: c.attributePath ?? '',
+                    attributeValueType: c.attributeValueType ?? '',
+                    aggregationType: c.aggregationType ?? null
                 }));
                 // Auto-select fields if only 2 columns (typical for grouped aggregations)
                 if (this.queryColumns.length === 2 && !this.form.categoryField && !this.form.valueField) {
@@ -10648,9 +10964,6 @@ class PieChartConfigDialogComponent {
             this.isLoadingColumns = false;
         }
     }
-    sanitizeFieldName(fieldName) {
-        return fieldName.replace(/\./g, '_');
-    }
     onFiltersChange(updatedFilters) {
         this.filters = updatedFilters;
     }
@@ -11314,13 +11627,12 @@ class BarChartWidgetComponent {
             for (const cell of cells) {
                 if (!cell?.attributePath)
                     continue;
-                const sanitizedPath = this.sanitizeFieldName(cell.attributePath);
-                if (sanitizedPath === this.sanitizeFieldName(this.config.categoryField)) {
+                if (matchesAttributePath(cell.attributePath, this.config.categoryField)) {
                     categoryValue = this.formatCategoryValue(cell.value);
                 }
                 // Check if this cell is one of our series fields
                 for (const seriesConfig of (this.config.series ?? [])) {
-                    if (sanitizedPath === this.sanitizeFieldName(seriesConfig.field)) {
+                    if (matchesAttributePath(cell.attributePath, seriesConfig.field)) {
                         const numValue = typeof cell.value === 'number' ? cell.value : parseFloat(String(cell.value));
                         rowValues.set(seriesConfig.field, isNaN(numValue) ? 0 : numValue);
                     }
@@ -11379,14 +11691,13 @@ class BarChartWidgetComponent {
             for (const cell of cells) {
                 if (!cell?.attributePath)
                     continue;
-                const sanitizedPath = this.sanitizeFieldName(cell.attributePath);
-                if (sanitizedPath === this.sanitizeFieldName(categoryField)) {
+                if (matchesAttributePath(cell.attributePath, categoryField)) {
                     categoryValue = this.formatCategoryValue(cell.value);
                 }
-                else if (sanitizedPath === this.sanitizeFieldName(seriesGroupField)) {
+                else if (matchesAttributePath(cell.attributePath, seriesGroupField)) {
                     seriesGroupValue = String(cell.value ?? '');
                 }
-                else if (sanitizedPath === this.sanitizeFieldName(valueField)) {
+                else if (matchesAttributePath(cell.attributePath, valueField)) {
                     const val = cell.value;
                     numericValue = typeof val === 'number' ? val : parseFloat(String(val));
                     if (isNaN(numericValue))
@@ -11458,9 +11769,6 @@ class BarChartWidgetComponent {
         }
         return str;
     }
-    sanitizeFieldName(fieldName) {
-        return fieldName.replace(/\./g, '_');
-    }
     /**
      * Converts widget filter configuration to GraphQL FieldFilterDto format.
      * Resolves MeshBoard variables in filter values before conversion.
@@ -11632,7 +11940,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Supports column, bar, stacked, and 100% stacked chart types.
  */
 class BarChartConfigDialogComponent {
-    executeRuntimeQueryGQL = inject(ExecuteRuntimeQueryDtoGQL);
+    getRuntimeQueryColumnsGQL = inject(GetRuntimeQueryColumnsDtoGQL);
     stateService = inject(MeshBoardStateService);
     windowRef = inject(WindowRef);
     querySelector;
@@ -11771,10 +12079,11 @@ class BarChartConfigDialogComponent {
     async loadQueryColumns(queryRtId) {
         this.isLoadingColumns = true;
         try {
-            const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
+            // Metadata-only — column resolver runs off the cached query definition and skips
+            // the row execution path, so the dialog opens fast even on large aggregations.
+            const result = await firstValueFrom(this.getRuntimeQueryColumnsGQL.fetch({
                 variables: {
-                    rtId: queryRtId,
-                    first: 1 // We only need columns, not data
+                    rtId: queryRtId
                 }
             }));
             const queryItems = result.data?.runtime?.runtimeQuery?.items ?? [];
@@ -11782,10 +12091,12 @@ class BarChartConfigDialogComponent {
                 const columns = queryItems[0].columns ?? [];
                 const filteredColumns = columns
                     .filter((c) => c !== null);
-                // queryColumns use sanitized paths for UI display and matching with query results
+                // Engine emits column attributePath in wire form for aggregation / grouping
+                // columns (e.g. `quantity_sum`, `operatingstatus`); picker uses it verbatim.
                 this.queryColumns = filteredColumns.map(c => ({
-                    attributePath: this.sanitizeFieldName(c.attributePath ?? ''),
-                    attributeValueType: c.attributeValueType ?? ''
+                    attributePath: c.attributePath ?? '',
+                    attributeValueType: c.attributeValueType ?? '',
+                    aggregationType: c.aggregationType ?? null
                 }));
                 // Filter numeric and non-numeric columns
                 const numericTypes = ['INTEGER', 'FLOAT', 'DOUBLE', 'DECIMAL', 'LONG'];
@@ -11815,9 +12126,6 @@ class BarChartConfigDialogComponent {
             this.isLoadingColumns = false;
         }
     }
-    sanitizeFieldName(fieldName) {
-        return fieldName.replace(/\./g, '_');
-    }
     onSeriesFieldsChange(fields) {
         this.selectedSeriesFields = fields;
     }
@@ -12623,20 +12931,19 @@ class LineChartWidgetComponent {
             for (const cell of cells) {
                 if (!cell?.attributePath)
                     continue;
-                const sanitizedPath = this.sanitizeFieldName(cell.attributePath);
-                if (sanitizedPath === this.sanitizeFieldName(categoryField)) {
+                if (matchesAttributePath(cell.attributePath, categoryField)) {
                     categoryValue = String(cell.value ?? '');
                 }
-                else if (sanitizedPath === this.sanitizeFieldName(seriesGroupField)) {
+                else if (matchesAttributePath(cell.attributePath, seriesGroupField)) {
                     seriesGroupValue = String(cell.value ?? '');
                 }
-                else if (sanitizedPath === this.sanitizeFieldName(valueField)) {
+                else if (matchesAttributePath(cell.attributePath, valueField)) {
                     const val = cell.value;
                     numericValue = typeof val === 'number' ? val : parseFloat(String(val));
                     if (isNaN(numericValue))
                         numericValue = 0;
                 }
-                else if (unitField && sanitizedPath === this.sanitizeFieldName(unitField)) {
+                else if (unitField && matchesAttributePath(cell.attributePath, unitField)) {
                     unitValue = String(cell.value ?? '');
                 }
             }
@@ -12722,9 +13029,6 @@ class LineChartWidgetComponent {
             minute: '2-digit'
         });
     }
-    sanitizeFieldName(fieldName) {
-        return fieldName.replace(/\./g, '_');
-    }
     sanitizeAxisName(name) {
         return name.replace(/[^a-zA-Z0-9]/g, '_');
     }
@@ -12921,7 +13225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Supports line and area chart types with multi-series and multi-axis configuration.
  */
 class LineChartConfigDialogComponent {
-    executeRuntimeQueryGQL = inject(ExecuteRuntimeQueryDtoGQL);
+    getRuntimeQueryColumnsGQL = inject(GetRuntimeQueryColumnsDtoGQL);
     stateService = inject(MeshBoardStateService);
     windowRef = inject(WindowRef);
     querySelector;
@@ -13032,10 +13336,10 @@ class LineChartConfigDialogComponent {
     async loadQueryColumns(queryRtId) {
         this.isLoadingColumns = true;
         try {
-            const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
+            // Metadata-only — skips the row execution path on the backend.
+            const result = await firstValueFrom(this.getRuntimeQueryColumnsGQL.fetch({
                 variables: {
-                    rtId: queryRtId,
-                    first: 1
+                    rtId: queryRtId
                 }
             }));
             const queryItems = result.data?.runtime?.runtimeQuery?.items ?? [];
@@ -13044,8 +13348,9 @@ class LineChartConfigDialogComponent {
                 const filteredColumns = columns
                     .filter((c) => c !== null);
                 this.queryColumns = filteredColumns.map(c => ({
-                    attributePath: this.sanitizeFieldName(c.attributePath ?? ''),
-                    attributeValueType: c.attributeValueType ?? ''
+                    attributePath: c.attributePath ?? '',
+                    attributeValueType: c.attributeValueType ?? '',
+                    aggregationType: c.aggregationType ?? null
                 }));
                 const numericTypes = ['INTEGER', 'FLOAT', 'DOUBLE', 'DECIMAL', 'LONG'];
                 this.numericColumns = this.queryColumns.filter(c => numericTypes.includes(c.attributeValueType));
@@ -13062,9 +13367,6 @@ class LineChartConfigDialogComponent {
             this.isLoadingColumns = false;
         }
     }
-    sanitizeFieldName(fieldName) {
-        return fieldName.replace(/\./g, '_');
-    }
     onFiltersChange(updatedFilters) {
         this.filters = updatedFilters;
     }
@@ -13739,9 +14041,9 @@ class HeatmapWidgetComponent {
      * Otherwise aggregates into hourly buckets.
      */
     processHeatmapData(filteredRows) {
-        const dateField = this.sanitizeFieldName(this.config.dateField);
-        const dateEndField = this.config.dateEndField ? this.sanitizeFieldName(this.config.dateEndField) : null;
-        const valueField = this.config.valueField ? this.sanitizeFieldName(this.config.valueField) : null;
+        const dateField = this.config.dateField;
+        const dateEndField = this.config.dateEndField ?? null;
+        const valueField = this.config.valueField ?? null;
         const aggregation = this.config.aggregation ?? 'count';
         const parsedRows = [];
         for (const row of filteredRows) {
@@ -13753,14 +14055,13 @@ class HeatmapWidgetComponent {
             for (const cell of cells) {
                 if (!cell?.attributePath)
                     continue;
-                const sanitizedPath = this.sanitizeFieldName(cell.attributePath);
-                if (sanitizedPath === dateField) {
+                if (matchesAttributePath(cell.attributePath, dateField)) {
                     dateFrom = this.parseDate(cell.value);
                 }
-                else if (dateEndField && sanitizedPath === dateEndField) {
+                else if (dateEndField && matchesAttributePath(cell.attributePath, dateEndField)) {
                     dateTo = this.parseDate(cell.value);
                 }
-                else if (valueField && sanitizedPath === valueField) {
+                else if (valueField && matchesAttributePath(cell.attributePath, valueField)) {
                     const val = cell.value;
                     numericValue = typeof val === 'number' ? val : parseFloat(String(val));
                     if (isNaN(numericValue))
@@ -13946,9 +14247,6 @@ class HeatmapWidgetComponent {
         const day = date.getUTCDate().toString().padStart(2, '0');
         return `${year}-${month}-${day}`;
     }
-    sanitizeFieldName(fieldName) {
-        return fieldName.replace(/\./g, '_');
-    }
     convertFiltersToDto(filters) {
         const variables = this.stateService.getVariables();
         return this.variableService.convertToFieldFilterDto(filters, variables);
@@ -14082,7 +14380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 class HeatmapConfigDialogComponent {
-    executeRuntimeQueryGQL = inject(ExecuteRuntimeQueryDtoGQL);
+    getRuntimeQueryColumnsGQL = inject(GetRuntimeQueryColumnsDtoGQL);
     stateService = inject(MeshBoardStateService);
     windowRef = inject(WindowRef);
     querySelector;
@@ -14211,10 +14509,10 @@ class HeatmapConfigDialogComponent {
     async loadQueryColumns(queryRtId) {
         this.isLoadingColumns = true;
         try {
-            const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
+            // Metadata-only — skips the row execution path on the backend.
+            const result = await firstValueFrom(this.getRuntimeQueryColumnsGQL.fetch({
                 variables: {
-                    rtId: queryRtId,
-                    first: 1
+                    rtId: queryRtId
                 }
             }));
             const queryItems = result.data?.runtime?.runtimeQuery?.items ?? [];
@@ -14223,8 +14521,9 @@ class HeatmapConfigDialogComponent {
                 const filteredColumns = columns
                     .filter((c) => c !== null);
                 this.queryColumns = filteredColumns.map(c => ({
-                    attributePath: this.sanitizeFieldName(c.attributePath ?? ''),
-                    attributeValueType: c.attributeValueType ?? ''
+                    attributePath: c.attributePath ?? '',
+                    attributeValueType: c.attributeValueType ?? '',
+                    aggregationType: c.aggregationType ?? null
                 }));
                 const numericTypes = ['INTEGER', 'FLOAT', 'DOUBLE', 'DECIMAL', 'LONG'];
                 const dateTimeTypes = ['DATE_TIME', 'DATETIME', 'DATE'];
@@ -14251,9 +14550,6 @@ class HeatmapConfigDialogComponent {
             this.isLoadingColumns = false;
         }
     }
-    sanitizeFieldName(fieldName) {
-        return fieldName.replace(/\./g, '_');
-    }
     onFiltersChange(updatedFilters) {
         this.filters = updatedFilters;
     }
@@ -16306,7 +16602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class WidgetGroupConfigDialogComponent {
     ckTypeSelectorService = inject(CkTypeSelectorService);
     attributeSelectorService = inject(AttributeSelectorService);
-    executeRuntimeQueryGQL = inject(ExecuteRuntimeQueryDtoGQL);
+    getRuntimeQueryColumnsGQL = inject(GetRuntimeQueryColumnsDtoGQL);
     getCkTypeAvailableQueryColumnsGQL = inject(GetCkTypeAvailableQueryColumnsDtoGQL);
     meshBoardStateService = inject(MeshBoardStateService);
     windowRef = inject(WindowRef);
@@ -16472,10 +16768,10 @@ class WidgetGroupConfigDialogComponent {
     async loadQueryColumns(queryRtId) {
         this.isLoadingColumns = true;
         try {
-            const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
+            // Metadata-only — skips the row execution path on the backend.
+            const result = await firstValueFrom(this.getRuntimeQueryColumnsGQL.fetch({
                 variables: {
-                    rtId: queryRtId,
-                    first: 1
+                    rtId: queryRtId
                 }
             }));
             const queryItems = result.data?.runtime?.runtimeQuery?.items ?? [];
@@ -16485,8 +16781,9 @@ class WidgetGroupConfigDialogComponent {
                 this.availableColumns = columns
                     .filter((c) => c !== null)
                     .map(c => ({
-                    attributePath: c.attributePath?.replace(/\./g, '_') ?? '',
-                    attributeValueType: c.attributeValueType ?? ''
+                    attributePath: c.attributePath ?? '',
+                    attributeValueType: c.attributeValueType ?? '',
+                    aggregationType: c.aggregationType ?? null
                 }));
                 this.filteredColumns.set(this.availableColumns);
             }
@@ -16541,7 +16838,8 @@ class WidgetGroupConfigDialogComponent {
                 .filter((c) => c !== null)
                 .map(c => ({
                 attributePath: c.attributePath || '',
-                attributeValueType: c.attributeValueType
+                attributeValueType: c.attributeValueType,
+                aggregationType: null
             }));
             this.availableColumns = mappedColumns;
             this.filteredColumns.set(mappedColumns);