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 2021/08/23 09:31:16 UTC

[incubator-streampipes] 02/02: [STREAMPIPES-413] Add density chart to data explorer widgets

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/incubator-streampipes.git

commit 302b225cebff3e7236fa446d0e722819f8b374e3
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Mon Aug 23 11:31:02 2021 +0200

    [STREAMPIPES-413] Add density chart to data explorer widgets
---
 .../data-explorer-designer-panel.component.html    |   6 +
 ...ta-explorer-widget-data-settings.component.html |   3 +
 .../data-explorer-dashboard-widget.component.html  |  16 ++-
 .../density-chart-widget-config.component.html}    |  15 ++-
 .../density-chart-widget-config.component.scss}    |  13 --
 .../density-chart-widget-config.component.ts       |  47 +++++++
 .../density-chart-widget.component.html}           |  24 ++--
 .../density-chart-widget.component.scss}           |  13 --
 .../density/density-chart-widget.component.ts      | 144 +++++++++++++++++++++
 .../model/density-chart-widget.model.ts}           |  11 +-
 .../histogram-chart-widget-config.component.html   |   2 +-
 .../model/histogram-chart-widget.model.ts          |   2 -
 ui/src/app/data-explorer/data-explorer.module.ts   |  18 ++-
 13 files changed, 257 insertions(+), 57 deletions(-)

diff --git a/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html b/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html
index 7100555..490e684 100644
--- a/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html
+++ b/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html
@@ -71,6 +71,12 @@
                                 [dataLakeMeasure]="dataLakeMeasure">
                         </sp-data-explorer-indicator-chart-widget-config>
                     </div>
+                    <div *ngIf="currentlyConfiguredWidget.widgetType === 'density-chart'" class="h-100 p-0">
+                        <sp-data-explorer-density-chart-widget-config
+                                [currentlyConfiguredWidget]="currentlyConfiguredWidget"
+                                [dataLakeMeasure]="dataLakeMeasure">
+                        </sp-data-explorer-density-chart-widget-config>
+                    </div>
                 </div>
                 <div *ngIf="selectedIndex == 2">
                     <sp-data-explorer-widget-appearance-settings
diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.html b/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.html
index a4a5c4d..8c7543b 100644
--- a/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.html
+++ b/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.html
@@ -45,6 +45,9 @@
     <mat-form-field color="accent" fxFlex="100">
         <mat-label>Select visualization</mat-label>
         <mat-select [(value)]="currentlyConfiguredWidget.widgetType">
+            <mat-option [value]="'density-chart'">
+                <span class="pipeline-name">Density</span>
+            </mat-option>
             <mat-option [value]="'histogram-chart'">
                 <span class="pipeline-name">Histogram</span>
             </mat-option>
diff --git a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html
index 40fc44b..174f729 100644
--- a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html
+++ b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html
@@ -17,7 +17,8 @@
   -->
 
 <div class="h-100 shadow">
-    <div class="box" [ngStyle]="{background: configuredWidget.baseAppearanceConfig.backgroundColor, color: configuredWidget.baseAppearanceConfig.textColor}">
+    <div class="box"
+         [ngStyle]="{background: configuredWidget.baseAppearanceConfig.backgroundColor, color: configuredWidget.baseAppearanceConfig.textColor}">
         <div class="widget-header h-40">
             <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" class="widget-header-text">
                 {{ configuredWidget.baseAppearanceConfig.widgetTitle }}
@@ -107,6 +108,19 @@
                             class="h-100">
                     </sp-data-explorer-histogram-chart-widget>
                 </div>
+                <div *ngIf="configuredWidget.widgetType === 'density-chart'" class="h-100 p-0">
+                    <sp-data-explorer-density-chart-widget
+                            (removeWidgetCallback)="removeWidget()"
+                            [timeSettings]="timeSettings"
+                            [gridsterItem]="dashboardItem"
+                            [gridsterItemComponent]="gridsterItemComponent"
+                            [editMode]="editMode"
+                            [dataViewDashboardItem]="dashboardItem"
+                            [dataExplorerWidget]="configuredWidget"
+                            [dataLakeMeasure]="dataLakeMeasure"
+                            class="h-100">
+                    </sp-data-explorer-density-chart-widget>
+                </div>
             </div>
         </div>
     </div>
diff --git a/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html b/ui/src/app/data-explorer/components/widgets/density/config/density-chart-widget-config.component.html
similarity index 64%
copy from ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html
copy to ui/src/app/data-explorer/components/widgets/density/config/density-chart-widget-config.component.html
index 3701a74..98e285b 100644
--- a/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html
+++ b/ui/src/app/data-explorer/components/widgets/density/config/density-chart-widget-config.component.html
@@ -17,10 +17,19 @@
   -->
 
 <div fxFlex="100" fxLayout="column">
-    <h5>Indicator Field</h5>
+    <h5>First Field</h5>
     <mat-form-field color="accent" fxFlex="100">
-        <mat-label>Select Field</mat-label>
-        <mat-select [(value)]="currentlyConfiguredWidget.dataConfig.selectedProperty" (selectionChange)="setSelectedProperties($event)">
+        <mat-label>Select first field</mat-label>
+        <mat-select [(value)]="currentlyConfiguredWidget.dataConfig.firstField" (selectionChange)="setSelectedProperties($event)">
+            <mat-option [value]="property.runtimeName" *ngFor="let property of currentlyConfiguredWidget.dataConfig.availableProperties">
+                <span class="pipeline-name">{{ property.runtimeName }}</span>
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+    <h5>First Field</h5>
+    <mat-form-field color="accent" fxFlex="100">
+        <mat-label>Select second field</mat-label>
+        <mat-select [(value)]="currentlyConfiguredWidget.dataConfig.secondField" (selectionChange)="setSelectedProperties($event)">
             <mat-option [value]="property.runtimeName" *ngFor="let property of currentlyConfiguredWidget.dataConfig.availableProperties">
                 <span class="pipeline-name">{{ property.runtimeName }}</span>
             </mat-option>
diff --git a/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts b/ui/src/app/data-explorer/components/widgets/density/config/density-chart-widget-config.component.scss
similarity index 66%
copy from ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts
copy to ui/src/app/data-explorer/components/widgets/density/config/density-chart-widget-config.component.scss
index 86c107c..13cbc4a 100644
--- a/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts
+++ b/ui/src/app/data-explorer/components/widgets/density/config/density-chart-widget-config.component.scss
@@ -15,16 +15,3 @@
  * limitations under the License.
  *
  */
-
-import { DataExplorerWidgetModel, EventPropertyUnion } from '../../../../../core-model/gen/streampipes-model';
-
-export interface HistogramChartDataConfig {
-  selectedProperty: string;
-  availableProperties: EventPropertyUnion[];
-  numberAggregation: string;
-  deltaAggregation: string;
-}
-
-export interface HistogramChartWidgetModel extends DataExplorerWidgetModel {
-  dataConfig: HistogramChartDataConfig;
-}
diff --git a/ui/src/app/data-explorer/components/widgets/density/config/density-chart-widget-config.component.ts b/ui/src/app/data-explorer/components/widgets/density/config/density-chart-widget-config.component.ts
new file mode 100644
index 0000000..338fb39
--- /dev/null
+++ b/ui/src/app/data-explorer/components/widgets/density/config/density-chart-widget-config.component.ts
@@ -0,0 +1,47 @@
+/*
+ * 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 { Component, OnInit } from '@angular/core';
+import { BaseWidgetConfig } from '../../base/base-widget-config';
+import { EventPropertyUnion } from '../../../../../core-model/gen/streampipes-model';
+import { DensityChartWidgetModel } from '../model/density-chart-widget.model';
+
+@Component({
+  selector: 'sp-data-explorer-density-chart-widget-config',
+  templateUrl: './density-chart-widget-config.component.html',
+  styleUrls: ['./density-chart-widget-config.component.scss']
+})
+export class DensityWidgetConfigComponent extends BaseWidgetConfig<DensityChartWidgetModel> implements OnInit {
+
+  ngOnInit(): void {
+    this.updateWidgetConfigOptions();
+  }
+
+  setSelectedProperties(selectedColumn: EventPropertyUnion) {
+    if (this.currentlyConfiguredWidget.dataConfig.firstField && this.currentlyConfiguredWidget.dataConfig.secondField) {
+      this.triggerDataRefresh();
+    }
+  }
+
+  protected updateWidgetConfigOptions() {
+    if (this.dataLakeMeasure.measureName && !this.currentlyConfiguredWidget.dataConfig.availableProperties) {
+      this.currentlyConfiguredWidget.dataConfig.availableProperties = this.getNumericProperty(this.dataLakeMeasure.eventSchema);
+    }
+  }
+
+}
diff --git a/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html b/ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.html
similarity index 53%
copy from ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html
copy to ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.html
index 3701a74..202fb78 100644
--- a/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html
+++ b/ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.html
@@ -16,15 +16,17 @@
   ~
   -->
 
-<div fxFlex="100" fxLayout="column">
-    <h5>Indicator Field</h5>
-    <mat-form-field color="accent" fxFlex="100">
-        <mat-label>Select Field</mat-label>
-        <mat-select [(value)]="currentlyConfiguredWidget.dataConfig.selectedProperty" (selectionChange)="setSelectedProperties($event)">
-            <mat-option [value]="property.runtimeName" *ngFor="let property of currentlyConfiguredWidget.dataConfig.availableProperties">
-                <span class="pipeline-name">{{ property.runtimeName }}</span>
-            </mat-option>
-        </mat-select>
-    </mat-form-field>
-</div>
+<div fxLayout="column" fxFlex="100"
+     [ngStyle]="{background: dataExplorerWidget.baseAppearanceConfig.backgroundColor, color: dataExplorerWidget.baseAppearanceConfig.textColor}">
+
+    <sp-load-data-spinner *ngIf="showIsLoadingData" class="h-100"></sp-load-data-spinner>
+    <sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="timeSettings"></sp-no-data-in-date-range>
 
+    <plotly-plot *ngIf="data !== undefined && !showNoDataInDateRange && !showIsLoadingData"
+                 [divId]="dataExplorerWidget._id"
+                 class="plotly-container"
+                 [data]="data"
+                 [layout]="graph.layout"
+                 [config]="graph.config">
+    </plotly-plot>
+</div>
diff --git a/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts b/ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.scss
similarity index 66%
copy from ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts
copy to ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.scss
index 86c107c..13cbc4a 100644
--- a/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts
+++ b/ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.scss
@@ -15,16 +15,3 @@
  * limitations under the License.
  *
  */
-
-import { DataExplorerWidgetModel, EventPropertyUnion } from '../../../../../core-model/gen/streampipes-model';
-
-export interface HistogramChartDataConfig {
-  selectedProperty: string;
-  availableProperties: EventPropertyUnion[];
-  numberAggregation: string;
-  deltaAggregation: string;
-}
-
-export interface HistogramChartWidgetModel extends DataExplorerWidgetModel {
-  dataConfig: HistogramChartDataConfig;
-}
diff --git a/ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.ts b/ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.ts
new file mode 100644
index 0000000..35aafeb
--- /dev/null
+++ b/ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.ts
@@ -0,0 +1,144 @@
+/*
+ * 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 { Component, OnInit } from '@angular/core';
+import { BaseDataExplorerWidget } from '../base/base-data-explorer-widget';
+import { DatalakeRestService } from '../../../../platform-services/apis/datalake-rest.service';
+import { WidgetConfigurationService } from '../../../services/widget-configuration.service';
+import { ResizeService } from '../../../services/resize.service';
+import { DataResult } from '../../../../core-model/datalake/DataResult';
+import { DatalakeQueryParameters } from '../../../../core-services/datalake/DatalakeQueryParameters';
+import { DatalakeQueryParameterBuilder } from '../../../../core-services/datalake/DatalakeQueryParameterBuilder';
+import { Observable } from 'rxjs';
+import { DensityChartWidgetModel } from './model/density-chart-widget.model';
+
+@Component({
+  selector: 'sp-data-explorer-density-chart-widget',
+  templateUrl: './density-chart-widget.component.html',
+  styleUrls: ['./density-chart-widget.component.scss']
+})
+export class DensityChartWidgetComponent extends BaseDataExplorerWidget<DensityChartWidgetModel> implements OnInit {
+
+  data = [
+    {
+      x: [],
+      y: [],
+      mode: 'markers',
+      name: 'points',
+      marker: {
+        color: 'rgb(102,0,0)',
+        size: 2,
+        opacity: 0.4
+      },
+      type: 'scatter'
+    },
+    {
+      x: [],
+      y: [],
+      name: 'density',
+      ncontours: 20,
+      colorscale: 'Hot',
+      reversescale: true,
+      showscale: false,
+      type: 'histogram2dcontour'
+    }
+  ];
+
+  graph = {
+    layout: {
+      xaxis: {
+        title: {
+          text: ''
+        }
+      },
+      yaxis: {
+        title: {
+          text: ''
+        }
+      },
+      font: {
+        color: '#FFF'
+      },
+      autosize: true,
+      plot_bgcolor: '#fff',
+      paper_bgcolor: '#fff',
+    },
+    config: {
+      modeBarButtonsToRemove: ['lasso2d', 'select2d', 'toggleSpikelines', 'toImage'],
+      displaylogo: false,
+      displayModeBar: false,
+      responsive: true
+    }
+  };
+
+  constructor(dataLakeRestService: DatalakeRestService,
+              widgetConfigurationService:  WidgetConfigurationService,
+              resizeService: ResizeService) {
+    super(dataLakeRestService, widgetConfigurationService, resizeService);
+  }
+
+  refreshData() {
+    this.getQuery().subscribe(result => {
+      this.prepareData(result);
+      this.updateAppearance();
+    });
+  }
+
+  getQuery(): Observable<DataResult> {
+    return this.dataLakeRestService.getData(this.dataLakeMeasure.measureName, this.buildQuery());
+  }
+
+  refreshView() {
+    this.updateAppearance();
+  }
+
+  prepareData(result: DataResult) {
+    this.data[0].x = this.transform(result.rows, 1);
+    this.data[1].x = this.transform(result.rows, 1);
+    this.data[0].y = this.transform(result.rows, 2);
+    this.data[1].y = this.transform(result.rows, 2);
+  }
+
+  transform(rows, index: number): any[] {
+    return rows.map(row => row[index]);
+  }
+
+  updateAppearance() {
+    this.graph.layout.paper_bgcolor = this.dataExplorerWidget.baseAppearanceConfig.backgroundColor;
+    this.graph.layout.plot_bgcolor = this.dataExplorerWidget.baseAppearanceConfig.backgroundColor;
+    this.graph.layout.font.color = this.dataExplorerWidget.baseAppearanceConfig.textColor;
+    this.graph.layout.xaxis.title.text = this.dataExplorerWidget.dataConfig.firstField;
+    this.graph.layout.yaxis.title.text = this.dataExplorerWidget.dataConfig.secondField;
+  }
+
+  buildQuery(): DatalakeQueryParameters {
+    return DatalakeQueryParameterBuilder
+        .create(this.timeSettings.startTime, this.timeSettings.endTime)
+        .withAutoAggregation('MEAN')
+        .withColumnFilter([this.dataExplorerWidget.dataConfig.firstField, this.dataExplorerWidget.dataConfig.secondField])
+        .build();
+  }
+
+  onResize(width: number, height: number) {
+    this.graph.layout.autosize = false;
+    (this.graph.layout as any).width = width;
+    (this.graph.layout as any).height = height;
+  }
+
+
+}
diff --git a/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts b/ui/src/app/data-explorer/components/widgets/density/model/density-chart-widget.model.ts
similarity index 79%
copy from ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts
copy to ui/src/app/data-explorer/components/widgets/density/model/density-chart-widget.model.ts
index 86c107c..87a567b 100644
--- a/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts
+++ b/ui/src/app/data-explorer/components/widgets/density/model/density-chart-widget.model.ts
@@ -18,13 +18,12 @@
 
 import { DataExplorerWidgetModel, EventPropertyUnion } from '../../../../../core-model/gen/streampipes-model';
 
-export interface HistogramChartDataConfig {
-  selectedProperty: string;
+export interface DensityChartDataConfig {
+  firstField: string;
+  secondField: string;
   availableProperties: EventPropertyUnion[];
-  numberAggregation: string;
-  deltaAggregation: string;
 }
 
-export interface HistogramChartWidgetModel extends DataExplorerWidgetModel {
-  dataConfig: HistogramChartDataConfig;
+export interface DensityChartWidgetModel extends DataExplorerWidgetModel {
+  dataConfig: DensityChartDataConfig;
 }
diff --git a/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html b/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html
index 3701a74..6cb6338 100644
--- a/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html
+++ b/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html
@@ -17,7 +17,7 @@
   -->
 
 <div fxFlex="100" fxLayout="column">
-    <h5>Indicator Field</h5>
+    <h5>Histogram Field</h5>
     <mat-form-field color="accent" fxFlex="100">
         <mat-label>Select Field</mat-label>
         <mat-select [(value)]="currentlyConfiguredWidget.dataConfig.selectedProperty" (selectionChange)="setSelectedProperties($event)">
diff --git a/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts b/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts
index 86c107c..78ce0dc 100644
--- a/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts
+++ b/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts
@@ -21,8 +21,6 @@ import { DataExplorerWidgetModel, EventPropertyUnion } from '../../../../../core
 export interface HistogramChartDataConfig {
   selectedProperty: string;
   availableProperties: EventPropertyUnion[];
-  numberAggregation: string;
-  deltaAggregation: string;
 }
 
 export interface HistogramChartWidgetModel extends DataExplorerWidgetModel {
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index 9c7e585..01e9abb 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -75,6 +75,8 @@ import { IndicatorChartWidgetComponent } from './components/widgets/indicator/in
 import { IndicatorWidgetConfigComponent } from './components/widgets/indicator/config/indicator-chart-widget-config.component';
 import { HistogramChartWidgetComponent } from './components/widgets/histogram/histogram-chart-widget.component';
 import { HistogramWidgetConfigComponent } from './components/widgets/histogram/config/histogram-chart-widget-config.component';
+import { DensityChartWidgetComponent } from './components/widgets/density/density-chart-widget.component';
+import { DensityWidgetConfigComponent } from './components/widgets/density/config/density-chart-widget-config.component';
 
 export const MY_NATIVE_FORMATS = {
   fullPickerInput: {
@@ -120,6 +122,8 @@ export const MY_NATIVE_FORMATS = {
     MatChipsModule
   ],
   declarations: [
+    AggregateConfigurationComponent,
+    DataDownloadDialog,
     DataExplorerComponent,
     DataExplorerDashboardGridComponent,
     DataExplorerDashboardOverviewComponent,
@@ -129,7 +133,9 @@ export const MY_NATIVE_FORMATS = {
     DataExplorerEditDataViewDialogComponent,
     DataExplorerWidgetAppearanceSettingsComponent,
     DataExplorerWidgetDataSettingsComponent,
-    TableWidgetComponent,
+    DensityChartWidgetComponent,
+    DensityWidgetConfigComponent,
+    GroupConfigurationComponent,
     HistogramChartWidgetComponent,
     HistogramWidgetConfigComponent,
     ImageWidgetComponent,
@@ -138,14 +144,12 @@ export const MY_NATIVE_FORMATS = {
     IndicatorWidgetConfigComponent,
     LineChartWidgetComponent,
     LineChartWidgetConfigComponent,
-    TimeRangeSelectorComponent,
-    NoDataInDateRangeComponent,
     LoadDataSpinnerComponent,
-    DataDownloadDialog,
+    NoDataInDateRangeComponent,
     SelectPropertiesComponent,
-    AggregateConfigurationComponent,
-    GroupConfigurationComponent,
-    TableWidgetConfigComponent
+    TableWidgetComponent,
+    TableWidgetConfigComponent,
+    TimeRangeSelectorComponent,
   ],
   providers: [
     DatalakeRestService,