refactor: Improve widget rendering in data explorer

ui/cypress/tests/datalake/widgets/2d-correlation.smoke.spec.ts

@@ -24,7 +24,7 @@ describe('Test 2d Correlation View in Data Explorer', () => {
     });
 
     it('Perform Test', () => {
-        DataLakeUtils.addDataViewAndWidget('view', 'Persist', '2D Correlation');
+        DataLakeUtils.addDataViewAndWidget('view', 'Persist', 'Scatter');
 
         // Check if scatter plot is displayed
         cy.get('g').should('have.class', 'scatterlayer mlayer');

ui/cypress/tests/datalake/widgets/distribution.spec.ts

@@ -24,26 +24,22 @@ describe('Test Distribution View in Data Explorer', () => {
     });
 
     it('Perform Test', () => {
-        DataLakeUtils.addDataViewAndWidget('view', 'Persist', 'Distribution');
+        DataLakeUtils.addDataViewAndWidget('view', 'Persist', 'Histogram');
 
         // Change field for histogram
         DataLakeUtils.selectVisualizationConfig();
         cy.get('div').contains('randomtext (prepared_data #1)').click();
         cy.get('div').contains('randomnumber (prepared_data #1)').click();
 
         // Check if distribution chart is displayed
-        cy.get('sp-data-explorer-distribution-chart-widget').should(
-            'be.visible',
-        );
+        cy.dataCy('histogram-chart').should('be.visible');
 
         // Change from histogram to heatmap
         DataLakeUtils.selectVisualizationConfig();
         cy.get('div').contains('Histogram').click();
         cy.get('div').contains('Value Heatmap').click();
 
         // Check if distribution chart is displayed
-        cy.get('sp-data-explorer-distribution-chart-widget').should(
-            'be.visible',
-        );
+        cy.dataCy('value-heatmap-chart').should('be.visible');
     });
 });

ui/cypress/tests/datalake/widgets/heatmap.spec.ts

@@ -31,6 +31,6 @@ describe('Test Heatmap View in Data Explorer', () => {
         cy.get('mat-checkbox input').click({ force: true });
 
         // Check if heatmap chart is visible
-        cy.get('sp-data-explorer-heatmap-widget').should('be.visible');
+        cy.dataCy('heatmap').should('be.visible');
     });
 });

ui/projects/streampipes/shared-ui/src/lib/services/echarts-toolbox.service.ts

@@ -0,0 +1,57 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { Injectable } from '@angular/core';
+import { ToolboxFeatureOption } from 'echarts/types/src/component/toolbox/featureManager';
+
+/**
+ * This service provides default echarts toolbox features used in the data explorer.
+ * Custom toolbox features can be registered by using the register method.
+ */
+@Injectable({ providedIn: 'root' })
+export class SpEchartsToolboxService {
+    toolboxItems: Record<string, ToolboxFeatureOption> = {
+        dataView: { show: true },
+        restore: { show: true },
+        saveAsImage: { show: true },
+    };
+
+    customToolboxItems: Record<string, ToolboxFeatureOption> = {};
+
+    getDefaultToolboxItems(): Record<string, ToolboxFeatureOption> {
+        return this.toolboxItems;
+    }
+
+    getAllToolboxItems(): Record<string, ToolboxFeatureOption> {
+        return {
+            ...this.toolboxItems,
+            ...this.customToolboxItems,
+        };
+    }
+
+    getCustomToolboxItems(): Record<string, ToolboxFeatureOption> {
+        return this.customToolboxItems;
+    }
+
+    registerToolboxItem(
+        featureName: string,
+        featureOptions: ToolboxFeatureOption,
+    ) {
+        this.customToolboxItems[featureName] = featureOptions;
+    }
+}

ui/projects/streampipes/shared-ui/src/public-api.ts

@@ -40,3 +40,4 @@ export * from './lib/models/sp-navigation.model';
 export * from './lib/services/breadcrumb.service';
 export * from './lib/services/jwt-token-storage.service';
 export * from './lib/services/current-user.service';
+export * from './lib/services/echarts-toolbox.service';

ui/src/app/core-ui/echarts-transform/round-values.transform.ts

@@ -56,10 +56,10 @@ export const RoundValuesTransform: ExternalDataTransform<RoundValuesConfig> = {
             } else {
                 return row.map((value, index) => {
                     if (roundColumnIndices.indexOf(index) > -1) {
-                        return (
+                        return +(
                             Math.round((value as number) / roundingValue) *
                             roundingValue
-                        );
+                        ).toFixed(3);
                     } else {
                         return value;
                     }

ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.html

@@ -44,79 +44,15 @@
         class="data-explorer-options-panel pr-5"
     >
         <span class="data-explorer-header">Configuration</span>
-        <div
-            *ngIf="currentlyConfiguredWidget.widgetType === 'table'"
-            class="h-100 p-0"
-        >
-            <sp-data-explorer-table-widget-config
-                [currentlyConfiguredWidget]="currentlyConfiguredWidget"
-            >
-            </sp-data-explorer-table-widget-config>
-        </div>
-        <div
-            *ngIf="currentlyConfiguredWidget.widgetType === 'map'"
-            class="h-100 p-0"
-        >
-            <sp-data-explorer-map-widget-config
-                [currentlyConfiguredWidget]="currentlyConfiguredWidget"
-            >
-            </sp-data-explorer-map-widget-config>
-        </div>
-        <div
-            *ngIf="currentlyConfiguredWidget.widgetType === 'heatmap'"
-            class="h-100 p-0"
-        >
-            <sp-data-explorer-heatmap-widget-config
-                [currentlyConfiguredWidget]="currentlyConfiguredWidget"
-            >
-            </sp-data-explorer-heatmap-widget-config>
-        </div>
-        <div
-            *ngIf="currentlyConfiguredWidget.widgetType === 'time-series-chart'"
-            class="h-100 p-0"
-        >
-            <sp-data-explorer-time-series-chart-widget-config
-                [currentlyConfiguredWidget]="currentlyConfiguredWidget"
-            >
-            </sp-data-explorer-time-series-chart-widget-config>
-        </div>
-        <div
-            *ngIf="currentlyConfiguredWidget.widgetType === 'indicator-chart'"
-            class="h-100 p-0"
-        >
-            <sp-data-explorer-indicator-chart-widget-config
-                [currentlyConfiguredWidget]="currentlyConfiguredWidget"
-            >
-            </sp-data-explorer-indicator-chart-widget-config>
-        </div>
-        <div
-            *ngIf="currentlyConfiguredWidget.widgetType === 'correlation-chart'"
-            class="h-100 p-0"
-        >
-            <sp-data-explorer-correlation-chart-widget-config
-                [currentlyConfiguredWidget]="currentlyConfiguredWidget"
-            >
-            </sp-data-explorer-correlation-chart-widget-config>
-        </div>
-        <div
-            *ngIf="
-                currentlyConfiguredWidget.widgetType === 'distribution-chart'
-            "
-            class="h-100 p-0"
-        >
-            <sp-data-explorer-distribution-chart-widget-config
-                [currentlyConfiguredWidget]="currentlyConfiguredWidget"
-            >
-            </sp-data-explorer-distribution-chart-widget-config>
-        </div>
-        <div
-            *ngIf="currentlyConfiguredWidget.widgetType === 'image'"
-            class="h-100 p-0"
-        >
-            <sp-data-explorer-image-widget-config
-                [currentlyConfiguredWidget]="currentlyConfiguredWidget"
-            >
-            </sp-data-explorer-image-widget-config>
+        <div *ngIf="activeWidgetType">
+            <ng-container
+                *ngComponentOutlet="
+                    activeWidgetType.widgetConfigurationComponent;
+                    inputs: {
+                        currentlyConfiguredWidget: currentlyConfiguredWidget
+                    }
+                "
+            />
         </div>
     </div>
 </div>

ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.ts

@@ -31,19 +31,31 @@ import { DataExplorerWidgetRegistry } from '../../../registry/data-explorer-widg
 export class DataExplorerVisualisationSettingsComponent implements OnInit {
     @Input() currentlyConfiguredWidget: DataExplorerWidgetModel;
 
-    constructor(private widgetTypeService: WidgetTypeService) {}
+    constructor(
+        private widgetTypeService: WidgetTypeService,
+        private widgetRegistryService: DataExplorerWidgetRegistry,
+    ) {}
 
     availableWidgets: IWidget<any>[];
+    activeWidgetType: IWidget<any>;
 
     ngOnInit(): void {
         this.availableWidgets =
-            DataExplorerWidgetRegistry.getAvailableWidgetTemplates();
+            this.widgetRegistryService.getAvailableWidgetTemplates();
+        this.selectWidget();
+    }
+
+    selectWidget(): void {
+        this.activeWidgetType = this.availableWidgets.find(
+            w => w.id === this.currentlyConfiguredWidget.widgetType,
+        );
     }
 
     triggerWidgetTypeChange(ev: MatSelectChange) {
         this.widgetTypeService.notify({
             widgetId: this.currentlyConfiguredWidget._id,
             newWidgetTypeId: ev.value,
         });
+        this.selectWidget();
     }
 }

ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts

@@ -33,7 +33,6 @@ import {
     DataExplorerDataConfig,
     DataExplorerWidgetModel,
     DataLakeMeasure,
-    DataViewDataExplorerService,
     DateRange,
     SpLogMessage,
     TimeSettings,
@@ -43,7 +42,6 @@ import { interval, Subscription } from 'rxjs';
 import { takeWhile } from 'rxjs/operators';
 import { DataExplorerWidgetRegistry } from '../../registry/data-explorer-widget-registry';
 import { WidgetDirective } from './widget.directive';
-import { BaseWidgetData } from '../widgets/base/data-explorer-widget-data';
 import { WidgetTypeService } from '../../services/widget-type.service';
 import { AuthService } from '../../../services/auth.service';
 import { UserPrivilege } from '../../../_enums/user-privilege.enum';
@@ -52,6 +50,7 @@ import {
     DialogService,
     PanelType,
 } from '@streampipes/shared-ui';
+import { BaseWidgetData } from '../../models/dataview-dashboard.model';
 
 @Component({
     selector: 'sp-data-explorer-dashboard-widget',
@@ -118,7 +117,7 @@ export class DataExplorerDashboardWidgetComponent implements OnInit, OnDestroy {
     @ViewChild(WidgetDirective, { static: true }) widgetHost!: WidgetDirective;
 
     constructor(
-        private dataViewDataExplorerService: DataViewDataExplorerService,
+        private widgetRegistryService: DataExplorerWidgetRegistry,
         private dialogService: DialogService,
         private componentFactoryResolver: ComponentFactoryResolver,
         private widgetTypeService: WidgetTypeService,
@@ -159,11 +158,11 @@ export class DataExplorerDashboardWidgetComponent implements OnInit, OnDestroy {
 
     chooseWidget(widgetTypeId: string) {
         const widgets =
-            DataExplorerWidgetRegistry.getAvailableWidgetTemplates();
+            this.widgetRegistryService.getAvailableWidgetTemplates();
         const widgetToDisplay = widgets.find(
             widget => widget.id === widgetTypeId,
         );
-        this.loadComponent(widgetToDisplay.componentClass);
+        this.loadComponent(widgetToDisplay.widgetComponent);
     }
 
     loadComponent(widgetToDisplay) {