You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2024/07/19 20:59:22 UTC

(streampipes) branch 3055-data-explorer-widgets-break-in-grouping-mode updated: fix(#3055): Fix widget rendering in grouping mode

This is an automated email from the ASF dual-hosted git repository.

riemer pushed a commit to branch 3055-data-explorer-widgets-break-in-grouping-mode
in repository https://gitbox.apache.org/repos/asf/streampipes.git


The following commit(s) were added to refs/heads/3055-data-explorer-widgets-break-in-grouping-mode by this push:
     new 7d278b9b85 fix(#3055): Fix widget rendering in grouping mode
7d278b9b85 is described below

commit 7d278b9b855605f89b0e05c873584c19503ead4a
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Fri Jul 19 22:59:07 2024 +0200

    fix(#3055): Fix widget rendering in grouping mode
---
 .../param/model/WhereClauseParams.java             |  2 +-
 .../param/WhereStatementParamsTest.java            |  8 ++++
 .../widgets/table/table-widget.component.html      | 30 ++++++++++++++-
 .../widgets/table/table-widget.component.ts        | 43 +++++++++++++++-------
 .../echarts-dataset-generator.service.ts           | 34 +++++++++++++++--
 5 files changed, 98 insertions(+), 19 deletions(-)

diff --git a/streampipes-data-explorer/src/main/java/org/apache/streampipes/dataexplorer/param/model/WhereClauseParams.java b/streampipes-data-explorer/src/main/java/org/apache/streampipes/dataexplorer/param/model/WhereClauseParams.java
index 6e1f633622..3381983268 100644
--- a/streampipes-data-explorer/src/main/java/org/apache/streampipes/dataexplorer/param/model/WhereClauseParams.java
+++ b/streampipes-data-explorer/src/main/java/org/apache/streampipes/dataexplorer/param/model/WhereClauseParams.java
@@ -98,7 +98,7 @@ public class WhereClauseParams implements IQueryStatement {
   }
 
   private Object returnCondition(String inputCondition) {
-    if (NumberUtils.isCreatable(inputCondition)) {
+    if (NumberUtils.isParsable(inputCondition)) {
       return Double.parseDouble(inputCondition);
     } else if (isBoolean(inputCondition)) {
       return Boolean.parseBoolean(inputCondition);
diff --git a/streampipes-data-explorer/src/test/java/org/apache/streampipes/dataexplorer/param/WhereStatementParamsTest.java b/streampipes-data-explorer/src/test/java/org/apache/streampipes/dataexplorer/param/WhereStatementParamsTest.java
index 52b5552d07..4a9a69dc55 100644
--- a/streampipes-data-explorer/src/test/java/org/apache/streampipes/dataexplorer/param/WhereStatementParamsTest.java
+++ b/streampipes-data-explorer/src/test/java/org/apache/streampipes/dataexplorer/param/WhereStatementParamsTest.java
@@ -50,6 +50,14 @@ public class WhereStatementParamsTest {
     assertWhereCondition(result, expected);
   }
 
+  @Test
+  public void filterString2() {
+    WhereClauseParams result = WhereClauseParams.from("[fieldName;=;3312476503F]");
+    FilterCondition expected = new FilterCondition("fieldName", "=", "3312476503F");
+
+    assertWhereCondition(result, expected);
+  }
+
   private void assertWhereCondition(WhereClauseParams result, FilterCondition expected) {
     assertEquals(1, result.getWhereConditions().size());
     FilterCondition resultingFilterCondition = result.getWhereConditions().get(0);
diff --git a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html
index 0b6e90b72c..8588640560 100644
--- a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html
@@ -49,7 +49,7 @@
             (matSortChange)="sortData($event)"
             class="table-widget"
         >
-            <ng-container [cdkColumnDef]="'time'">
+            <ng-container [matColumnDef]="'time'">
                 <div>
                     <th
                         mat-header-cell
@@ -81,7 +81,7 @@
                     let element of dataExplorerWidget.visualizationConfig
                         .selectedColumns
                 "
-                [cdkColumnDef]="element.fullDbName"
+                [matColumnDef]="element.fullDbName"
             >
                 <div *ngIf="!(element.fullDbName === 'time')">
                     <th
@@ -112,6 +112,32 @@
                     </td>
                 </div>
             </ng-container>
+            <ng-container
+                *ngFor="let element of groupByColumnNames"
+                [matColumnDef]="element"
+            >
+                <th
+                    mat-header-cell
+                    mat-sort-header
+                    *matHeaderCellDef
+                    [ngStyle]="{
+                        background:
+                            dataExplorerWidget.baseAppearanceConfig
+                                .backgroundColor,
+                        color: dataExplorerWidget.baseAppearanceConfig.textColor
+                    }"
+                >
+                    <label class="column-header">{{ element }}</label>
+                </th>
+                <td
+                    mat-cell
+                    *matCellDef="let row"
+                    [attr.data-cy]="'data-explorer-table-row-' + element"
+                    style="text-align: left"
+                >
+                    {{ row[element] }}
+                </td>
+            </ng-container>
 
             <tr
                 mat-header-row
diff --git a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.ts b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.ts
index 8cc42a7154..a156b11b14 100644
--- a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.ts
@@ -41,31 +41,56 @@ export class TableWidgetComponent
 
     dataSource = new MatTableDataSource();
     columnNames: string[];
+    groupByColumnNames: string[];
 
     ngOnInit(): void {
         super.ngOnInit();
         this.dataSource.sort = this.sort;
         this.dataSource.paginator = this.paginator;
+        this.regenerateColumnNames();
+    }
+
+    regenerateColumnNames(): void {
+        this.groupByColumnNames = this.makeGroupByColumns();
         this.columnNames = ['time'].concat(
             this.dataExplorerWidget.visualizationConfig.selectedColumns.map(
                 c => c.fullDbName,
             ),
+            ...this.groupByColumnNames,
         );
     }
 
+    makeGroupByColumns(): string[] {
+        return this.dataExplorerWidget.dataConfig.sourceConfigs.flatMap(sc => {
+            return sc.queryConfig.groupBy
+                .filter(g => g.selected)
+                .map(g => g.runtimeName);
+        });
+    }
+
     transformData(spQueryResult: SpQueryResult) {
         return spQueryResult.allDataSeries.flatMap(series =>
             series.rows.map(row =>
-                this.createTableObject(spQueryResult.headers, row),
+                this.createTableObject(spQueryResult.headers, row, series.tags),
             ),
         );
     }
 
-    createTableObject(keys, values) {
-        return keys.reduce((object, key, index) => {
+    createTableObject(
+        keys: string[],
+        values: any[],
+        tags: Record<string, string>,
+    ) {
+        const row = keys.reduce((object, key, index) => {
             object[key] = values[index];
             return object;
         }, {});
+        if (tags !== null) {
+            Object.keys(tags).forEach(key => {
+                row[key] = tags[key];
+            });
+        }
+        return row;
     }
 
     ngOnDestroy(): void {
@@ -116,11 +141,7 @@ export class TableWidgetComponent
     }
 
     onDataReceived(spQueryResults: SpQueryResult[]) {
-        this.columnNames = ['time'].concat(
-            this.dataExplorerWidget.visualizationConfig.selectedColumns.map(
-                c => c.fullDbName,
-            ),
-        );
+        this.regenerateColumnNames();
         const transformedData = spQueryResults
             .map(spQueryResult => this.transformData(spQueryResult))
             .flat();
@@ -148,10 +169,6 @@ export class TableWidgetComponent
     refreshColumns(): void {
         this.dataSource.filter =
             this.dataExplorerWidget.visualizationConfig.searchValue;
-        this.columnNames = ['time'].concat(
-            this.dataExplorerWidget.visualizationConfig.selectedColumns.map(
-                c => c.fullDbName,
-            ),
-        );
+        this.regenerateColumnNames();
     }
 }
diff --git a/ui/src/app/data-explorer/echarts-renderer/echarts-dataset-generator.service.ts b/ui/src/app/data-explorer/echarts-renderer/echarts-dataset-generator.service.ts
index 22debf01ee..ba64bb6a1b 100644
--- a/ui/src/app/data-explorer/echarts-renderer/echarts-dataset-generator.service.ts
+++ b/ui/src/app/data-explorer/echarts-renderer/echarts-dataset-generator.service.ts
@@ -19,6 +19,7 @@
 import { Injectable } from '@angular/core';
 import {
     DataExplorerWidgetModel,
+    DataSeries,
     SpQueryResult,
 } from '@streampipes/platform-services';
 import {
@@ -82,9 +83,15 @@ export class EchartsDatasetGeneratorService<T extends DataExplorerWidgetModel> {
             index: number,
         ) => DataTransformOption[],
     ): PreparedDataset {
-        const data = [
+        const headers = this.makeHeaders(
             queryResult.headers,
-            ...queryResult.allDataSeries.flatMap(series => series.rows),
+            queryResult.allDataSeries,
+        );
+        const data = [
+            headers,
+            ...queryResult.allDataSeries.flatMap(series => {
+                return this.makeRows(series.rows, series.tags);
+            }),
         ];
         const initialTransforms = getInitialTransforms(widgetConfig, index).map(
             transform => ({
@@ -112,7 +119,7 @@ export class EchartsDatasetGeneratorService<T extends DataExplorerWidgetModel> {
             sourceIndex: index,
             tagValues: tags,
             groupedDatasets: groupTransforms,
-            rawDataset: { source: data, dimensions: queryResult.headers },
+            rawDataset: { source: data, dimensions: headers },
             initialTransformDatasets: initialTransforms,
             meta: {
                 preparedDataStartIndex,
@@ -121,6 +128,27 @@ export class EchartsDatasetGeneratorService<T extends DataExplorerWidgetModel> {
         };
     }
 
+    private makeRows(rows: any[][], tags: Record<string, any>): any[][] {
+        const tagValues = tags !== null ? Object.values(tags) : [];
+        return rows.map(row => {
+            return [...row, ...tagValues];
+        });
+    }
+
+    private makeHeaders(
+        headers: string[],
+        allDataSeries: DataSeries[],
+    ): string[] {
+        let tagHeaders = [];
+        if (allDataSeries.length > 0) {
+            const tags = allDataSeries[0].tags;
+            if (tags !== null) {
+                tagHeaders = Object.keys(tags);
+            }
+        }
+        return [...headers, ...tagHeaders];
+    }
+
     increaseDatasetIndex(
         preparedDataset: PreparedDataset,
         currentDatasetIndex: number,