From 1c11b30eacb43589eb258a3941a6f588d6b40765 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 28 Mar 2025 15:11:45 +0200
Subject: [PATCH] UI: Fix incorrect datasource type switching behavior in map
 settings when 'keys' field is not set

---
 .../map/map-data-layer-dialog.component.ts    | 28 +++++--------------
 .../map/map-data-layer-row.component.ts       | 26 ++++-------------
 .../map/map-data-source-row.component.ts      | 19 ++-----------
 .../shared/models/widget/maps/map.models.ts   | 15 ++++++++++
 4 files changed, 30 insertions(+), 58 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts
index dc0123406a..ae752ebca7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.ts
@@ -31,7 +31,8 @@ import {
   pathDecoratorSymbolTranslationMap,
   PolygonsDataLayerSettings,
   ShapeDataLayerSettings,
-  TripsDataLayerSettings
+  TripsDataLayerSettings,
+  updateDataKeyToNewDsType
 } from '@shared/models/widget/maps/map.models';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -293,23 +294,23 @@ export class MapDataLayerDialogComponent extends DialogComponent<MapDataLayerDia
       case 'trips':
       case 'markers':
         const xKey: DataKey = this.dataLayerFormGroup.get('xKey').value;
-        if (this.updateDataKeyToNewDsType(xKey, newDsType, this.dataLayerType === 'trips')) {
+        if (updateDataKeyToNewDsType(xKey, newDsType, this.dataLayerType === 'trips')) {
           this.dataLayerFormGroup.get('xKey').patchValue(xKey, {emitEvent: false});
         }
         const yKey: DataKey = this.dataLayerFormGroup.get('yKey').value;
-        if (this.updateDataKeyToNewDsType(yKey, newDsType, this.dataLayerType === 'trips')) {
+        if (updateDataKeyToNewDsType(yKey, newDsType, this.dataLayerType === 'trips')) {
           this.dataLayerFormGroup.get('yKey').patchValue(yKey, {emitEvent: false});
         }
         break;
       case 'polygons':
         const polygonKey: DataKey = this.dataLayerFormGroup.get('polygonKey').value;
-        if (this.updateDataKeyToNewDsType(polygonKey, newDsType)) {
+        if (updateDataKeyToNewDsType(polygonKey, newDsType)) {
           this.dataLayerFormGroup.get('polygonKey').patchValue(polygonKey, {emitEvent: false});
         }
         break;
       case 'circles':
         const circleKey: DataKey = this.dataLayerFormGroup.get('circleKey').value;
-        if (this.updateDataKeyToNewDsType(circleKey, newDsType)) {
+        if (updateDataKeyToNewDsType(circleKey, newDsType)) {
           this.dataLayerFormGroup.get('circleKey').patchValue(circleKey, {emitEvent: false});
         }
         break;
@@ -318,7 +319,7 @@ export class MapDataLayerDialogComponent extends DialogComponent<MapDataLayerDia
     if (additionalDataKeys?.length) {
       let updated = false;
       for (const key of additionalDataKeys) {
-        updated = this.updateDataKeyToNewDsType(key, newDsType) || updated;
+        updated = updateDataKeyToNewDsType(key, newDsType) || updated;
       }
       if (updated) {
         this.dataLayerFormGroup.get('additionalDataKeys').patchValue(additionalDataKeys, {emitEvent: false});
@@ -327,21 +328,6 @@ export class MapDataLayerDialogComponent extends DialogComponent<MapDataLayerDia
     this.updateValidators();
   }
 
-  private updateDataKeyToNewDsType(dataKey: DataKey, newDsType: DatasourceType, timeSeries = false): boolean {
-    if (newDsType === DatasourceType.function) {
-      if (dataKey.type !== DataKeyType.function) {
-        dataKey.type = DataKeyType.function;
-        return true;
-      }
-    } else {
-      if (dataKey.type === DataKeyType.function) {
-        dataKey.type = timeSeries ? DataKeyType.timeseries : DataKeyType.attribute;
-        return true;
-      }
-    }
-    return false;
-  }
-
   private updateValidators() {
     const dsType: DatasourceType = this.dataLayerFormGroup.get('dsType').value;
     if (dsType === DatasourceType.function) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-row.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-row.component.ts
index ae47852f33..9d781f6a74 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-row.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-row.component.ts
@@ -41,7 +41,8 @@ import {
   MapType,
   MarkersDataLayerSettings,
   PolygonsDataLayerSettings,
-  TripsDataLayerSettings
+  TripsDataLayerSettings,
+  updateDataKeyToNewDsType
 } from '@shared/models/widget/maps/map.models';
 import { DataKey, DatasourceType, datasourceTypeTranslationMap, widgetType } from '@shared/models/widget.models';
 import { EntityType } from '@shared/models/entity-type.models';
@@ -271,26 +272,26 @@ export class MapDataLayerRowComponent implements ControlValueAccessor, OnInit {
       case 'trips':
       case 'markers':
         const xKey: DataKey = this.dataLayerFormGroup.get('xKey').value;
-        if (this.updateDataKeyToNewDsType(xKey, newDsType, this.dataLayerType === 'trips')) {
+        if (updateDataKeyToNewDsType(xKey, newDsType, this.dataLayerType === 'trips')) {
           this.dataLayerFormGroup.get('xKey').patchValue(xKey, {emitEvent: false});
           updateModel = true;
         }
         const yKey: DataKey = this.dataLayerFormGroup.get('yKey').value;
-        if (this.updateDataKeyToNewDsType(yKey, newDsType, this.dataLayerType === 'trips')) {
+        if (updateDataKeyToNewDsType(yKey, newDsType, this.dataLayerType === 'trips')) {
           this.dataLayerFormGroup.get('yKey').patchValue(yKey, {emitEvent: false});
           updateModel = true;
         }
         break;
       case 'polygons':
         const polygonKey: DataKey = this.dataLayerFormGroup.get('polygonKey').value;
-        if (this.updateDataKeyToNewDsType(polygonKey, newDsType)) {
+        if (updateDataKeyToNewDsType(polygonKey, newDsType)) {
           this.dataLayerFormGroup.get('polygonKey').patchValue(polygonKey, {emitEvent: false});
           updateModel = true;
         }
         break;
       case 'circles':
         const circleKey: DataKey = this.dataLayerFormGroup.get('circleKey').value;
-        if (this.updateDataKeyToNewDsType(circleKey, newDsType)) {
+        if (updateDataKeyToNewDsType(circleKey, newDsType)) {
           this.dataLayerFormGroup.get('circleKey').patchValue(circleKey, {emitEvent: false});
           updateModel = true;
         }
@@ -302,21 +303,6 @@ export class MapDataLayerRowComponent implements ControlValueAccessor, OnInit {
     }
   }
 
-  private updateDataKeyToNewDsType(dataKey: DataKey, newDsType: DatasourceType, timeSeries = false): boolean {
-    if (newDsType === DatasourceType.function) {
-      if (dataKey.type !== DataKeyType.function) {
-        dataKey.type = DataKeyType.function;
-        return true;
-      }
-    } else {
-      if (dataKey.type === DataKeyType.function) {
-        dataKey.type = timeSeries ? DataKeyType.timeseries : DataKeyType.attribute;
-        return true;
-      }
-    }
-    return false;
-  }
-
   private updateValidators() {
     const dsType: DatasourceType = this.dataLayerFormGroup.get('dsType').value;
     if (dsType === DatasourceType.function) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-source-row.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-source-row.component.ts
index a163e8322f..a6a57f4035 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-source-row.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-source-row.component.ts
@@ -33,7 +33,7 @@ import {
   Validators
 } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { AdditionalMapDataSourceSettings } from '@shared/models/widget/maps/map.models';
+import { AdditionalMapDataSourceSettings, updateDataKeyToNewDsType } from '@shared/models/widget/maps/map.models';
 import { DataKey, DatasourceType, datasourceTypeTranslationMap, widgetType } from '@shared/models/widget.models';
 import { EntityType } from '@shared/models/entity-type.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -156,7 +156,7 @@ export class MapDataSourceRowComponent implements ControlValueAccessor, OnInit {
     const dataKeys: DataKey[] = this.dataSourceFormGroup.get('dataKeys').value;
     if (dataKeys?.length) {
       for (const key of dataKeys) {
-        updateModel = this.updateDataKeyToNewDsType(key, newDsType) || updateModel;
+        updateModel = updateDataKeyToNewDsType(key, newDsType) || updateModel;
       }
       if (updateModel) {
         this.dataSourceFormGroup.get('dataKeys').patchValue(dataKeys, {emitEvent: false});
@@ -168,21 +168,6 @@ export class MapDataSourceRowComponent implements ControlValueAccessor, OnInit {
     }
   }
 
-  private updateDataKeyToNewDsType(dataKey: DataKey, newDsType: DatasourceType): boolean {
-    if (newDsType === DatasourceType.function) {
-      if (dataKey.type !== DataKeyType.function) {
-        dataKey.type = DataKeyType.function;
-        return true;
-      }
-    } else {
-      if (dataKey.type === DataKeyType.function) {
-        dataKey.type = DataKeyType.attribute;
-        return true;
-      }
-    }
-    return false;
-  }
-
   private updateValidators() {
     const dsType: DatasourceType = this.dataSourceFormGroup.get('dsType').value;
     if (dsType === DatasourceType.function) {
diff --git a/ui-ngx/src/app/shared/models/widget/maps/map.models.ts b/ui-ngx/src/app/shared/models/widget/maps/map.models.ts
index 1884e86215..44a802ec78 100644
--- a/ui-ngx/src/app/shared/models/widget/maps/map.models.ts
+++ b/ui-ngx/src/app/shared/models/widget/maps/map.models.ts
@@ -1151,6 +1151,21 @@ export const parseCenterPosition = (position: string | [number, number]): [numbe
   return [0, 0];
 }
 
+export const updateDataKeyToNewDsType = (dataKey: DataKey | null, newDsType: DatasourceType, timeSeries = false): boolean => {
+  if (newDsType === DatasourceType.function) {
+    if (dataKey && dataKey.type !== DataKeyType.function) {
+      dataKey.type = DataKeyType.function;
+      return true;
+    }
+  } else {
+    if (dataKey?.type === DataKeyType.function) {
+      dataKey.type = timeSeries ? DataKeyType.timeseries : DataKeyType.attribute;
+      return true;
+    }
+  }
+  return false;
+}
+
 export const mergeMapDatasources = (target: TbMapDatasource[], source: TbMapDatasource[]): TbMapDatasource[] => {
   const appendDatasources: TbMapDatasource[] = [];
   for (const sourceDs of source) {