You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2022/01/25 08:38:33 UTC
[incubator-streampipes] 02/04: [STREAMPIPES-507] Protect map widget from too much data
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch STREAMPIPES-507
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 643f987eb7d7e7241b3da53578d4170c1d1423ce
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Tue Jan 25 09:25:44 2022 +0100
[STREAMPIPES-507] Protect map widget from too much data
---
.../widgets/map/map-widget.component.html | 25 ++++++++++++++++------
.../components/widgets/map/map-widget.component.ts | 17 ++++++++++-----
2 files changed, 31 insertions(+), 11 deletions(-)
diff --git a/ui/src/app/data-explorer/components/widgets/map/map-widget.component.html b/ui/src/app/data-explorer/components/widgets/map/map-widget.component.html
index 79aded7..fdacf07 100644
--- a/ui/src/app/data-explorer/components/widgets/map/map-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/map/map-widget.component.html
@@ -15,12 +15,25 @@
~ limitations under the License.
~
-->
- <div fxFlex="100" fxLayoutAlign="center center" fxLayout="column" class="main-panel">
- <div [ngStyle]="{'width': mapWidth + 'px', 'height': mapHeight + 'px'}"
- leaflet
- [leafletOptions]="options"
- (leafletMapReady)="onMapReady($event)">
- <div *ngFor="let layer of layers" [leafletLayer]="layer"></div>
+
+<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column" class="main-panel">
+
+ <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>
+
+ <sp-too-much-data
+ [amountOfEvents]="amountOfTooMuchEvents"
+ (loadDataWithTooManyEventsEmitter)="loadDataWithTooManyEvents()"
+ *ngIf="showTooMuchData"></sp-too-much-data>
+
+ <div *ngIf="showData">
+ <div [ngStyle]="{'width': mapWidth + 'px', 'height': mapHeight + 'px'}"
+ leaflet
+ [leafletOptions]="options"
+ (leafletMapReady)="onMapReady($event)">
+ <div *ngFor="let layer of layers" [leafletLayer]="layer"></div>
+ </div>
</div>
</div>
diff --git a/ui/src/app/data-explorer/components/widgets/map/map-widget.component.ts b/ui/src/app/data-explorer/components/widgets/map/map-widget.component.ts
index e87d054..f55326b 100644
--- a/ui/src/app/data-explorer/components/widgets/map/map-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/map/map-widget.component.ts
@@ -109,14 +109,19 @@ export class MapWidgetComponent extends BaseDataExplorerWidgetDirective<MapWidge
const usedCenter = this.dataExplorerWidget.visualizationConfig.useLastEventCoordinates ? lastCoordinate : currentCenter;
this.makeLayers(this.lastDataResults);
- this.map.setView(usedCenter, zoom);
- this.map.invalidateSize();
+ if (this.map) {
+ this.map.setView(usedCenter, zoom);
+ this.map.invalidateSize();
+ }
+
}
onResize(width: number, height: number) {
this.mapWidth = width;
this.mapHeight = height;
- this.map.invalidateSize();
+ if (this.map) {
+ this.map.invalidateSize();
+ }
}
handleUpdatedFields(addedFields: DataExplorerField[],
@@ -128,6 +133,8 @@ export class MapWidgetComponent extends BaseDataExplorerWidgetDirective<MapWidge
}
onDataReceived(spQueryResult: SpQueryResult[]) {
+
+ this.setShownComponents(false, true, false, false);
this.lastDataResults = spQueryResult[0];
this.makeLayers(spQueryResult[0]);
}
@@ -137,7 +144,7 @@ export class MapWidgetComponent extends BaseDataExplorerWidgetDirective<MapWidge
}
getLastCoordinate(spQueryResults: SpQueryResult) {
- if (spQueryResults.total > 0) {
+ if (spQueryResults && spQueryResults.total > 0) {
const result = spQueryResults.allDataSeries;
const latitudeIndex = this.getColumnIndex(this.dataExplorerWidget.visualizationConfig.selectedLatitudeProperty, spQueryResults);
@@ -155,7 +162,7 @@ export class MapWidgetComponent extends BaseDataExplorerWidgetDirective<MapWidge
makeLayers(spQueryResult: SpQueryResult) {
this.layers = [];
- if (spQueryResult.total > 0) {
+ if (spQueryResult && spQueryResult.total > 0) {
for (let i = 0; i <= spQueryResult.allDataSeries.length - 1; i++) {