From 4972d0f43eab43afaa3704a32a86b0e0e7834d2b Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 8 Mar 2023 17:14:44 +0200
Subject: [PATCH] UI: Map widgets -> reset map state when subscription changed
 (alias or key filters).

---
 ui-ngx/src/app/core/api/widget-api.models.ts       |  3 +++
 ui-ngx/src/app/core/api/widget-subscription.ts     | 14 ++++++++++++++
 .../home/components/widget/lib/maps/leaflet-map.ts |  7 +++++++
 .../home/components/widget/lib/maps/map-widget2.ts |  3 +++
 4 files changed, 27 insertions(+)

diff --git a/ui-ngx/src/app/core/api/widget-api.models.ts b/ui-ngx/src/app/core/api/widget-api.models.ts
index 45ac09120e..c6e00ab882 100644
--- a/ui-ngx/src/app/core/api/widget-api.models.ts
+++ b/ui-ngx/src/app/core/api/widget-api.models.ts
@@ -56,6 +56,7 @@ import { AlarmDataService } from '@core/api/alarm-data.service';
 import { IDashboardController } from '@home/components/dashboard-page/dashboard-page.models';
 import { PopoverPlacement } from '@shared/components/popover.models';
 import { PersistentRpc } from '@shared/models/rpc.models';
+import { EventEmitter } from '@angular/core';
 
 export interface TimewindowFunctions {
   onUpdateTimewindow: (startTimeMs: number, endTimeMs: number, interval?: number) => void;
@@ -338,6 +339,8 @@ export interface IWidgetSubscription {
                             pageLink: EntityDataPageLink,
                             keyFilters: KeyFilter[]): Observable<any>;
 
+  paginatedDataSubscriptionUpdated: EventEmitter<void>;
+
   subscribeForAlarms(pageLink: AlarmDataPageLink,
                      keyFilters: KeyFilter[]): void;
 
diff --git a/ui-ngx/src/app/core/api/widget-subscription.ts b/ui-ngx/src/app/core/api/widget-subscription.ts
index 5d3eae16e3..9d07c751a5 100644
--- a/ui-ngx/src/app/core/api/widget-subscription.ts
+++ b/ui-ngx/src/app/core/api/widget-subscription.ts
@@ -80,6 +80,7 @@ import {
 import { distinct, filter, map, switchMap, takeUntil } from 'rxjs/operators';
 import { AlarmDataListener } from '@core/api/alarm-data.service';
 import { RpcStatus } from '@shared/models/rpc.models';
+import { EventEmitter } from '@angular/core';
 
 const moment = moment_;
 
@@ -214,6 +215,8 @@ export class WidgetSubscription implements IWidgetSubscription {
     distinct()
   );
 
+  paginatedDataSubscriptionUpdated = new EventEmitter<void>();
+
   constructor(subscriptionContext: WidgetSubscriptionContext, public options: WidgetSubscriptionOptions) {
     const subscriptionSubject = new ReplaySubject<IWidgetSubscription>();
     this.init$ = subscriptionSubject.asObservable();
@@ -939,6 +942,13 @@ export class WidgetSubscription implements IWidgetSubscription {
     }
   }
 
+  stopSubscription(datasourceIndex: number) {
+    const entityDataListener = this.entityDataListeners[datasourceIndex];
+    if (entityDataListener) {
+      this.ctx.entityDataService.stopSubscription(entityDataListener);
+    }
+  }
+
   subscribeForPaginatedData(datasourceIndex: number,
                             pageLink: EntityDataPageLink,
                             keyFilters: KeyFilter[]): Observable<any> {
@@ -1193,6 +1203,10 @@ export class WidgetSubscription implements IWidgetSubscription {
   }
 
   private updatePaginatedDataSubscriptions() {
+    for (let datasourceIndex = 0; datasourceIndex < this.entityDataListeners.length; datasourceIndex++) {
+      this.stopSubscription(datasourceIndex);
+    }
+    this.paginatedDataSubscriptionUpdated.emit();
     for (let datasourceIndex = 0; datasourceIndex < this.entityDataListeners.length; datasourceIndex++) {
       const entityDataListener = this.entityDataListeners[datasourceIndex];
       if (entityDataListener) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
index 4f8fa9d6c7..a78dd27431 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
@@ -520,6 +520,13 @@ export default abstract class LeafletMap {
         this.createdControlButtonTooltip();
     }
 
+    resetState() {
+      if (this.options.initDragMode) {
+        this.initDragModeIgnoreUpdateBoundsSet = false;
+        this.ignoreUpdateBounds = false;
+      }
+    }
+
     private createdControlButtonTooltip() {
       import('tooltipster').then(() => {
         if ($.tooltipster) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
index 143c106baa..f69c4dcc76 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
@@ -83,6 +83,9 @@ export class MapWidgetController implements MapWidgetInterface {
           dynamic: true
         };
         this.map.setLoading(true);
+        this.ctx.defaultSubscription.paginatedDataSubscriptionUpdated.subscribe(() => {
+          this.map.resetState();
+        });
         this.ctx.defaultSubscription.subscribeAllForPaginatedData(this.pageLink, null);
     }