From a1d4444a774d80f9503153f7f826eac39919b792 Mon Sep 17 00:00:00 2001 From: Dominik Riemer Date: Fri, 24 May 2024 10:43:01 +0200 Subject: [PATCH] fix: Improve backwards compatibility of data explorer widgets (#2899) * fix: Improve backwards compatibility of data explorer widgets * Fix linting --- ...plorer-visualisation-settings.component.ts | 22 +++++++++++++---- .../abstract-widget-view.directive.ts | 5 ++++ .../data-explorer-dashboard-grid.component.ts | 8 ++++++- ...explorer-dashboard-slide-view.component.ts | 18 +++++++------- ...ata-explorer-dashboard-widget.component.ts | 7 ++---- .../widgets/base/echarts-widget.component.ts | 7 +++++- ...me-series-chart-widget-config.component.ts | 2 +- .../sp-timeseries-renderer.service.ts | 12 +++++++--- .../data-zoom-config.component.ts | 23 ++++++++++++------ .../select-axis-options.component.ts | 24 +++++++++++++++---- .../registry/data-explorer-widget-registry.ts | 5 ++++ 11 files changed, 97 insertions(+), 36 deletions(-) diff --git a/ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.ts b/ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.ts index 76d4345eda..3252e380d2 100644 --- a/ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.ts +++ b/ui/src/app/data-explorer/components/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 index 9893c66c52..18ab22d48b 100644 --- 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/ui/src/app/data-explorer/components/widget-view/grid-view/data-explorer-dashboard-grid.component.ts b/ui/src/app/data-explorer/components/widget-view/grid-view/data-explorer-dashboard-grid.component.ts index 9865748f9d..d81c990d54 100644 --- a/ui/src/app/data-explorer/components/widget-view/grid-view/data-explorer-dashboard-grid.component.ts +++ b/ui/src/app/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/ui/src/app/data-explorer/components/widget-view/slide-view/data-explorer-dashboard-slide-view.component.ts b/ui/src/app/data-explorer/components/widget-view/slide-view/data-explorer-dashboard-slide-view.component.ts index c5f9a6259d..4c762a510f 100644 --- a/ui/src/app/data-explorer/components/widget-view/slide-view/data-explorer-dashboard-slide-view.component.ts +++ b/ui/src/app/data-explorer/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 index 725f080b01..f617a06ec7 100644 --- 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 index 627472a441..924b40533f 100644 --- 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 } 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/ui/src/app/data-explorer/components/widgets/time-series-chart/config/time-series-chart-widget-config.component.ts b/ui/src/app/data-explorer/components/widgets/time-series-chart/config/time-series-chart-widget-config.component.ts index f7524c9d0d..b12747cf96 100644 --- a/ui/src/app/data-explorer/components/widgets/time-series-chart/config/time-series-chart-widget-config.component.ts +++ b/ui/src/app/data-explorer/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/ui/src/app/data-explorer/components/widgets/time-series-chart/sp-timeseries-renderer.service.ts b/ui/src/app/data-explorer/components/widgets/time-series-chart/sp-timeseries-renderer.service.ts index 565f12a741..e77ed3a456 100644 --- a/ui/src/app/data-explorer/components/widgets/time-series-chart/sp-timeseries-renderer.service.ts +++ b/ui/src/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 { 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/ui/src/app/data-explorer/components/widgets/utils/data-zoom-config/data-zoom-config.component.ts b/ui/src/app/data-explorer/components/widgets/utils/data-zoom-config/data-zoom-config.component.ts index fadab18ace..25c1bdbd46 100644 --- a/ui/src/app/data-explorer/components/widgets/utils/data-zoom-config/data-zoom-config.component.ts +++ b/ui/src/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 = new EventEmitter(); - 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/ui/src/app/data-explorer/components/widgets/utils/select-axis-options/select-axis-options.component.ts b/ui/src/app/data-explorer/components/widgets/utils/select-axis-options/select-axis-options.component.ts index cbf08a50f8..26ad210d39 100644 --- a/ui/src/app/data-explorer/components/widgets/utils/select-axis-options/select-axis-options.component.ts +++ b/ui/src/app/data-explorer/components/widgets/utils/select-axis-options/select-axis-options.component.ts @@ -16,10 +16,14 @@ * */ -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({ @@ -27,11 +31,21 @@ import { AxisConfig } from '../../../../models/dataview-dashboard.model'; 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 = new EventEmitter(); 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 index d08204cc34..c37eeb475d 100644 --- 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 { return this.widgetTypes.find( widget => widget.alias !== undefined && widget.alias === widgetId,