fix: Improve backwards compatibility of data explorer widgets (#2899)

* fix: Improve backwards compatibility of data explorer widgets * Fix linting
apache · May 24, 2024 · a1d4444 · a1d4444
1 parent ed4d765
commit a1d4444
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 36 deletions.
diff --git a/...s/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.ts b/...s/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.ts
@@ -16,7 +16,13 @@
  *
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import {
+    Component,
+    Input,
+    OnChanges,
+    OnInit,
+    SimpleChanges,
+} from '@angular/core';
 import { DataExplorerWidgetModel } from '@streampipes/platform-services';
 import { WidgetTypeService } from '../../../services/widget-type.service';
 import { MatSelectChange } from '@angular/material/select';
@@ -28,7 +34,9 @@ import { DataExplorerWidgetRegistry } from '../../../registry/data-explorer-widg
     templateUrl: './data-explorer-visualisation-settings.component.html',
     styleUrls: ['./data-explorer-visualisation-settings.component.scss'],
 })
-export class DataExplorerVisualisationSettingsComponent implements OnInit {
+export class DataExplorerVisualisationSettingsComponent
+    implements OnInit, OnChanges
+{
     @Input() currentlyConfiguredWidget: DataExplorerWidgetModel;
 
     constructor(
@@ -45,9 +53,15 @@ export class DataExplorerVisualisationSettingsComponent implements OnInit {
         this.selectWidget();
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.currentlyConfiguredWidget) {
+            this.selectWidget();
+        }
+    }
+
     selectWidget(): void {
-        this.activeWidgetType = this.availableWidgets.find(
-            w => w.id === this.currentlyConfiguredWidget.widgetType,
+        this.activeWidgetType = this.widgetRegistryService.getWidgetTemplate(
+            this.currentlyConfiguredWidget.widgetType,
         );
     }
 

diff --git a/ui/src/app/data-explorer/components/widget-view/abstract-widget-view.directive.ts b/ui/src/app/data-explorer/components/widget-view/abstract-widget-view.directive.ts
@@ -26,6 +26,7 @@ import {
 } from '@streampipes/platform-services';
 import { ResizeService } from '../../services/resize.service';
 import { zip } from 'rxjs';
+import { DataExplorerWidgetRegistry } from '../../registry/data-explorer-widget-registry';
 
 @Directive()
 export abstract class AbstractWidgetViewDirective {
@@ -67,6 +68,7 @@ export abstract class AbstractWidgetViewDirective {
     constructor(
         protected resizeService: ResizeService,
         protected dataViewDataExplorerService: DataViewDataExplorerService,
+        protected widgetRegistryService: DataExplorerWidgetRegistry,
     ) {}
 
     updateAllWidgets() {
@@ -138,6 +140,9 @@ export abstract class AbstractWidgetViewDirective {
     }
 
     processWidget(widget: DataExplorerWidgetModel) {
+        widget.widgetType = this.widgetRegistryService.getWidgetType(
+            widget.widgetType,
+        );
         this.configuredWidgets.set(widget._id, widget);
         this.dataLakeMeasures.set(
             widget._id,

diff --git a/.../data-explorer/components/widget-view/grid-view/data-explorer-dashboard-grid.component.ts b/.../data-explorer/components/widget-view/grid-view/data-explorer-dashboard-grid.component.ts
@@ -30,6 +30,7 @@ import { IDataViewDashboardConfig } from '../../../models/dataview-dashboard.mod
 import { ResizeService } from '../../../services/resize.service';
 import { DataViewDataExplorerService } from '@streampipes/platform-services';
 import { AbstractWidgetViewDirective } from '../abstract-widget-view.directive';
+import { DataExplorerWidgetRegistry } from '../../../registry/data-explorer-widget-registry';
 
 @Component({
     selector: 'sp-data-explorer-dashboard-grid',
@@ -49,8 +50,13 @@ export class DataExplorerDashboardGridComponent
     constructor(
         protected resizeService: ResizeService,
         protected dataViewDataExplorerService: DataViewDataExplorerService,
+        protected widgetRegistryService: DataExplorerWidgetRegistry,
     ) {
-        super(resizeService, dataViewDataExplorerService);
+        super(
+            resizeService,
+            dataViewDataExplorerService,
+            widgetRegistryService,
+        );
     }
 
     ngOnInit(): void {

diff --git a/...xplorer/components/widget-view/slide-view/data-explorer-dashboard-slide-view.component.ts b/...xplorer/components/widget-view/slide-view/data-explorer-dashboard-slide-view.component.ts
@@ -16,13 +16,7 @@
  *
  */
 
-import {
-    AfterViewInit,
-    Component,
-    ElementRef,
-    SimpleChanges,
-    ViewChild,
-} from '@angular/core';
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
 import { AbstractWidgetViewDirective } from '../abstract-widget-view.directive';
 import { ResizeService } from '../../../services/resize.service';
 import {
@@ -31,6 +25,7 @@ import {
     DataLakeMeasure,
     DataViewDataExplorerService,
 } from '@streampipes/platform-services';
+import { DataExplorerWidgetRegistry } from '../../../registry/data-explorer-widget-registry';
 
 @Component({
     selector: 'sp-data-explorer-dashboard-slide-view',
@@ -56,8 +51,13 @@ export class DataExplorerDashboardSlideViewComponent
     constructor(
         protected resizeService: ResizeService,
         protected dataViewDataExplorerService: DataViewDataExplorerService,
+        protected widgetRegistryService: DataExplorerWidgetRegistry,
     ) {
-        super(resizeService, dataViewDataExplorerService);
+        super(
+            resizeService,
+            dataViewDataExplorerService,
+            widgetRegistryService,
+        );
     }
 
     selectWidget(index: number, widgetId: string): void {
@@ -106,7 +106,7 @@ export class DataExplorerDashboardSlideViewComponent
         return false;
     }
 
-    selectNewWidget(widgetId): void {
+    selectNewWidget(widgetId: string): void {
         this.selectWidget(this.dashboard.widgets.length - 1, widgetId);
     }
 }
diff --git a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.ts
@@ -157,11 +157,8 @@ export class DataExplorerDashboardWidgetComponent implements OnInit, OnDestroy {
     }
 
     chooseWidget(widgetTypeId: string) {
-        const widgets =
-            this.widgetRegistryService.getAvailableWidgetTemplates();
-        const widgetToDisplay = widgets.find(
-            widget => widget.id === widgetTypeId,
-        );
+        const widgetToDisplay =
+            this.widgetRegistryService.getWidgetTemplate(widgetTypeId);
         this.loadComponent(widgetToDisplay.widgetComponent);
     }
 

diff --git a/ui/src/app/data-explorer/components/widgets/base/echarts-widget.component.ts b/ui/src/app/data-explorer/components/widgets/base/echarts-widget.component.ts
@@ -96,7 +96,12 @@ export class SpEchartsWidgetComponent<T extends DataExplorerWidgetModel>
     }
 
     renderChartOptions(spQueryResult: SpQueryResult[]): void {
-        if (this.dataExplorerWidget.visualizationConfig.configurationValid) {
+        if (
+            this.dataExplorerWidget.visualizationConfig.configurationValid ===
+                undefined ||
+            this.dataExplorerWidget.visualizationConfig.configurationValid ===
+                true
+        ) {
             this.showInvalidConfiguration = false;
             this.option = {
                 ...this.renderer.render(

diff --git a/.../components/widgets/time-series-chart/config/time-series-chart-widget-config.component.ts b/.../components/widgets/time-series-chart/config/time-series-chart-widget-config.component.ts
@@ -166,7 +166,7 @@ export class TimeSeriesChartWidgetConfigComponent extends BaseWidgetConfig<
         const fieldKeys = availableFields.map(
             f => f.fullDbName + f.sourceIndex,
         );
-        if (!config) {
+        if (!config || !(typeof config === 'object')) {
             config = {};
         } else {
             Object.keys(config).forEach(key => {

diff --git a/.../app/data-explorer/components/widgets/time-series-chart/sp-timeseries-renderer.service.ts b/.../app/data-explorer/components/widgets/time-series-chart/sp-timeseries-renderer.service.ts
@@ -28,7 +28,10 @@ import { TimeSeriesChartWidgetModel } from './model/time-series-chart-widget.mod
 import { DataExplorerField } from '@streampipes/platform-services';
 import { SpBaseEchartsRenderer } from '../../../echarts-renderer/base-echarts-renderer';
 import { GeneratedDataset, WidgetSize } from '../../../models/dataset.model';
-import { WidgetBaseAppearanceConfig } from '../../../models/dataview-dashboard.model';
+import {
+    AxisConfig,
+    WidgetBaseAppearanceConfig,
+} from '../../../models/dataview-dashboard.model';
 import { ToolboxFeatureOption } from 'echarts/types/src/component/toolbox/featureManager';
 import { ToolboxDataZoomFeatureOption } from 'echarts/types/src/component/toolbox/feature/DataZoom';
 import { YAXisOption } from 'echarts/types/dist/shared';
@@ -276,8 +279,11 @@ export class SpTimeseriesRendererService extends SpBaseEchartsRenderer<TimeSerie
         uniqueAxes.forEach(axis => {
             const settings =
                 axisIndex === 0
-                    ? config.visualizationConfig.leftAxis
-                    : config.visualizationConfig.rightAxis;
+                    ? config.visualizationConfig.leftAxis ||
+                      ({ autoScaleActive: true } as AxisConfig)
+                    : config.visualizationConfig.rightAxis ||
+                      ({ autoScaleActive: true } as AxisConfig);
+
             yAxisOptions.push({
                 type: 'value',
                 position: axis as CartesianAxisPosition,

diff --git a/...app/data-explorer/components/widgets/utils/data-zoom-config/data-zoom-config.component.ts b/...app/data-explorer/components/widgets/utils/data-zoom-config/data-zoom-config.component.ts
@@ -16,24 +16,33 @@
  *
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnChanges,
+    Output,
+    SimpleChanges,
+} from '@angular/core';
 import { TimeSeriesAppearanceConfig } from '../../../../models/dataview-dashboard.model';
 
 @Component({
     selector: 'sp-data-zoom-config',
     templateUrl: './data-zoom-config.component.html',
 })
-export class SpDataZoomConfigComponent implements OnInit {
+export class SpDataZoomConfigComponent implements OnChanges {
     @Input()
     appearanceConfig: TimeSeriesAppearanceConfig;
 
     @Output()
     configChangedEmitter: EventEmitter<void> = new EventEmitter<void>();
 
-    ngOnInit(): void {
-        this.appearanceConfig.dataZoom ??= {
-            show: true,
-            type: 'inside',
-        };
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.appearanceConfig) {
+            this.appearanceConfig.dataZoom ??= {
+                show: true,
+                type: 'inside',
+            };
+        }
     }
 }
diff --git a/...ta-explorer/components/widgets/utils/select-axis-options/select-axis-options.component.ts b/...ta-explorer/components/widgets/utils/select-axis-options/select-axis-options.component.ts
@@ -16,22 +16,36 @@
  *
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { DataExplorerField } from '@streampipes/platform-services';
-import { TimeSeriesChartWidgetModel } from '../../time-series-chart/model/time-series-chart-widget.model';
-import { WidgetConfigurationService } from '../../../../services/widget-configuration.service';
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnChanges,
+    Output,
+    SimpleChanges,
+} from '@angular/core';
 import { AxisConfig } from '../../../../models/dataview-dashboard.model';
 
 @Component({
     selector: 'sp-select-axis-options',
     templateUrl: './select-axis-options.component.html',
     styleUrls: ['./select-axis-options.component.scss'],
 })
-export class SpSelectAxisOptionsComponent {
+export class SpSelectAxisOptionsComponent implements OnChanges {
     @Input() title: string;
     @Input() axisConfig: AxisConfig;
 
     @Output() viewRefreshEmitter: EventEmitter<void> = new EventEmitter<void>();
 
     constructor() {}
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.axisConfig) {
+            this.axisConfig ??= {
+                autoScaleActive: true,
+                axisMax: undefined,
+                axisMin: undefined,
+            };
+        }
+    }
 }
diff --git a/ui/src/app/data-explorer/registry/data-explorer-widget-registry.ts b/ui/src/app/data-explorer/registry/data-explorer-widget-registry.ts
@@ -184,6 +184,11 @@ export class DataExplorerWidgetRegistry {
         return this.widgetTypes.find(widget => widget.id === 'table');
     }
 
+    getWidgetType(widgetType: string) {
+        // for backwards compatibility in v0.95.0, we return either the ID or the new ID based on the alias
+        return this.getWidgetTemplate(widgetType).id;
+    }
+
     private findBackwardsCompatibleWidget(widgetId: string): IWidget<any> {
         return this.widgetTypes.find(
             widget => widget.alias !== undefined && widget.alias === widgetId,