This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new a1d4444a77 fix: Improve backwards compatibility of data explorer
widgets (#2899)
a1d4444a77 is described below
commit a1d4444a774d80f9503153f7f826eac39919b792
Author: Dominik Riemer <[email protected]>
AuthorDate: Fri May 24 10:43:01 2024 +0200
fix: Improve backwards compatibility of data explorer widgets (#2899)
* fix: Improve backwards compatibility of data explorer widgets
* Fix linting
---
...ta-explorer-visualisation-settings.component.ts | 22 ++++++++++++++++----
.../widget-view/abstract-widget-view.directive.ts | 5 +++++
.../data-explorer-dashboard-grid.component.ts | 8 +++++++-
...data-explorer-dashboard-slide-view.component.ts | 18 ++++++++--------
.../data-explorer-dashboard-widget.component.ts | 7 ++-----
.../widgets/base/echarts-widget.component.ts | 7 ++++++-
.../time-series-chart-widget-config.component.ts | 2 +-
.../sp-timeseries-renderer.service.ts | 12 ++++++++---
.../data-zoom-config/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<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/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<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/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<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/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<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
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<any> {
return this.widgetTypes.find(
widget => widget.alias !== undefined && widget.alias === widgetId,
