Merge branch 'master' of github.com:thingsboard/thingsboard

@@ -20,12 +20,12 @@ import 'leaflet-providers';
 import 'leaflet.markercluster/dist/leaflet.markercluster';
 
 import {
-  FormattedData,
-  MapSettings,
-  MarkerSettings,
-  PolygonSettings,
-  PolylineSettings,
-  UnitedMapSettings
+    FormattedData,
+    MapSettings,
+    MarkerSettings,
+    PolygonSettings,
+    PolylineSettings,
+    UnitedMapSettings
 } from './map-models';
 import { Marker } from './markers';
 import { BehaviorSubject, Observable } from 'rxjs';
@@ -158,9 +158,9 @@ export default abstract class LeafletMap {
         this.map = map;
         if (this.options.useDefaultCenterPosition) {
             this.map.panTo(this.options.defaultCenterPosition);
-              this.bounds = map.getBounds();
+            this.bounds = map.getBounds();
         }
-          else this.bounds = new L.LatLngBounds(null, null);
+        else this.bounds = new L.LatLngBounds(null, null);
         if (this.options.draggableMarker) {
             this.addMarkerControl();
         }
@@ -244,7 +244,7 @@ export default abstract class LeafletMap {
     }
 
     // Markers
-    updateMarkers(markersData) {
+    updateMarkers(markersData, callback?) {
         markersData.filter(mdata => !!this.convertPosition(mdata)).forEach(data => {
             if (data.rotationAngle || data.rotationAngle === 0) {
                 const currentImage = this.options.useMarkerImageFunction ?
@@ -265,7 +265,7 @@ export default abstract class LeafletMap {
                 this.updateMarker(data.entityName, data, markersData, this.options)
             }
             else {
-                this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings);
+                this.createMarker(data.entityName, data, markersData, this.options as MarkerSettings, callback);
             }
         });
         this.markersData = markersData;
@@ -276,9 +276,11 @@ export default abstract class LeafletMap {
         this.saveMarkerLocation({ ...data, ...this.convertToCustomFormat(e.target._latlng) });
     }
 
-    private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings) {
+    private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, callback?) {
         this.ready$.subscribe(() => {
             const newMarker = new Marker(this.convertPosition(data), settings, data, dataSources, this.dragMarker);
+            if (callback)
+                newMarker.leafletMarker.on('click', () => { callback(data, true) });
             if (this.bounds)
                 this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()));
             this.markers.set(key, newMarker);
@@ -344,41 +346,58 @@ export default abstract class LeafletMap {
     // Polyline
 
     updatePolylines(polyData: FormattedData[][], data?: FormattedData) {
-        polyData.forEach((dataSource) => {
-            if (dataSource.length) {
-                data = data || dataSource[0];
-                if (this.polylines.get(data.$datasource.entityName)) {
+        polyData.forEach((dataSource: FormattedData[]) => {
+            data = data || dataSource[0];
+            if (dataSource.length && data.entityName === dataSource[0].entityName) {
+                if (this.polylines.get(data.entityName)) {
                     this.updatePolyline(data, dataSource, this.options);
                 }
                 else {
                     this.createPolyline(data, dataSource, this.options);
                 }
             }
+            else {
+                if (data)
+                    this.removePolyline(dataSource[0]?.entityName)
+            }
         })
     }
 
     createPolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
         this.ready$.subscribe(() => {
             const poly = new Polyline(this.map,
-              dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
+                dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
             const bounds = poly.leafletPoly.getBounds();
             this.fitBounds(bounds);
-            this.polylines.set(data.$datasource.entityName, poly);
+            this.polylines.set(data.entityName, poly);
         });
     }
 
     updatePolyline(data: FormattedData, dataSources: FormattedData[], settings: PolylineSettings) {
         this.ready$.subscribe(() => {
-            const poly = this.polylines.get(data.$datasource.entityName);
+            const poly = this.polylines.get(data.entityName);
+            const oldBounds = poly.leafletPoly.getBounds();
             poly.updatePolyline(dataSources.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings);
+            const newBounds = poly.leafletPoly.getBounds();
+            if (oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
+                this.fitBounds(newBounds);
+            }
         });
     }
 
+    removePolyline(name: string) {
+        const poly = this.polylines.get(name);
+        if (poly) {
+            this.map.removeLayer(poly.leafletPoly);
+            this.polylines.delete(name);
+        }
+    }
+
     // Polygon
 
     updatePolygons(polyData: FormattedData[]) {
         polyData.forEach((data: FormattedData) => {
-            if (data.hasOwnProperty(this.options.polygonKeyName)) {
+            if (data && data.hasOwnProperty(this.options.polygonKeyName)) {
                 if (typeof (data[this.options.polygonKeyName]) === 'string') {
                     data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]) as LatLngTuple[];
                 }
@@ -403,8 +422,13 @@ export default abstract class LeafletMap {
 
     updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) {
         this.ready$.subscribe(() => {
-            const poly = this.polygons.get(polyData.$datasource.entityName);
+            const poly = this.polygons.get(polyData.entityName);
+            const oldBounds = poly.leafletPoly.getBounds();
             poly.updatePolygon(polyData, dataSources, settings);
+            const newBounds = poly.leafletPoly.getBounds();
+            if (oldBounds.toBBoxString() !== newBounds.toBBoxString()) {
+                this.fitBounds(newBounds);
+            }
         });
     }
 }

@@ -26,6 +26,7 @@ import {
 
 export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
 export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
+export type GetTooltip= (point: FormattedData, setTooltip?: boolean) => string;
 
 export type MapSettings = {
     draggableMarker: boolean;

@@ -69,7 +69,6 @@ export class MapWidgetController implements MapWidgetInterface {
         this.settings.markerClick = this.getDescriptors('markerClick');
         this.settings.polygonClick = this.getDescriptors('polygonClick');
 
-        // this.settings.
         const MapClass = providerSets[this.provider]?.MapClass;
         if (!MapClass) {
             return;

@@ -258,7 +258,7 @@ export function parseArray(input: any[]): any[] {
           time: el[0],
           deviceType: null
         };
-        entityArray.filter(e => e.data.length).forEach(entity => {
+        entityArray.filter(e => e.data.length && e.data[i]).forEach(entity => {
           obj[entity?.dataKey?.label] = entity?.data[i][1];
           obj[entity?.dataKey?.label + '|ts'] = entity?.data[0][0];
           if (entity?.dataKey?.label === 'type') {

@@ -65,7 +65,6 @@ export class Polyline {
     this.dataSources = dataSources;
     this.leafletPoly.setLatLngs(locations);
     this.leafletPoly.setStyle(this.getPolyStyle(settings));
-    //  this.setPolylineLatLngs(data);
     if (this.polylineDecorator)
       this.polylineDecorator.setPaths(this.leafletPoly);
   }
@@ -92,8 +91,4 @@ export class Polyline {
   getPolylineLatLngs() {
     return this.leafletPoly.getLatLngs();
   }
-
-  setPolylineLatLngs(latLngs) {
-    this.leafletPoly.setLatLngs(latLngs);
-  }
 }

@@ -56,6 +56,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
   historicalData: FormattedData[][];
   normalizationStep: number;
   interpolatedTimeData = [];
+  intervals = [];
   widgetConfig: WidgetConfig;
   settings;
   mainTooltip = '';
@@ -68,6 +69,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
   maxTimeFormat: string;
   anchors: number[] = [];
   useAnchors: boolean;
+  currentTime: number;
 
   static getSettingsSchema(): JsonSettingsSchema {
     const schema = initSchema();
@@ -99,15 +101,15 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
     this.settings.fitMapBounds = true;
     this.normalizationStep = this.settings.normalizationStep;
     const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]];
-    if (subscription) {
-      subscription.callbacks.onDataUpdated = () => {
-        this.historicalData = parseArray(this.ctx.data);
+    if (subscription) subscription.callbacks.onDataUpdated = () => {
+      this.historicalData = parseArray(this.ctx.data).filter(arr => arr.length);
+      if (this.historicalData.length) {
         this.activeTrip = this.historicalData[0][0];
         this.calculateIntervals();
         this.timeUpdated(this.minTime);
-        this.mapWidget.map.map?.invalidateSize();
-        this.cd.detectChanges();
       }
+      this.mapWidget.map.map?.invalidateSize();
+      this.cd.detectChanges();
     }
   }
 
@@ -117,8 +119,16 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
   }
 
   timeUpdated(time: number) {
-    const currentPosition = this.interpolatedTimeData.map(dataSource => dataSource[time]);
-    if(isUndefined(currentPosition[0])){
+    this.currentTime = time;
+    const currentPosition = this.interpolatedTimeData
+      .map(dataSource => dataSource[time])
+      .filter(ds => ds)
+      .map(ds => {
+        ds.minTime = this.minTimeFormat;
+        ds.maxTime = this.maxTimeFormat;
+        return ds;
+      });
+    if (isUndefined(currentPosition[0])) {
       const timePoints = Object.keys(this.interpolatedTimeData[0]).map(item => parseInt(item, 10));
       for (let i = 1; i < timePoints.length; i++) {
         if (timePoints[i - 1] < time && timePoints[i] > time) {
@@ -134,7 +144,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
         }
       }
     }
-    this.activeTrip = currentPosition[0];
     this.calcLabel();
     this.calcTooltip();
     if (this.mapWidget) {
@@ -145,7 +154,10 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
       if (this.settings.showPoints) {
         this.mapWidget.map.updatePoints(_.values(_.union(this.interpolatedTimeData)[0]), this.calcTooltip);
       }
-      this.mapWidget.map.updateMarkers(currentPosition);
+      this.mapWidget.map.updateMarkers(currentPosition, (trip) => {
+        this.activeTrip = trip;
+        this.timeUpdated(this.currentTime)
+      });
     }
   }
 
@@ -185,6 +197,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
         SecurityContext.HTML, tooltipText);
       this.cd.detectChanges();
     }
+    this.activeTrip = point;
     return tooltipText;
   }
 
@@ -212,7 +225,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
       };
     }
     const timeStamp = Object.keys(result);
-    for(let i = 0; i < timeStamp.length - 1; i++){
+    for (let i = 0; i < timeStamp.length - 1; i++) {
       result[timeStamp[i]].rotationAngle += findAngle(result[timeStamp[i]], result[timeStamp[i + 1]], latKeyName, lngKeyName)
     }
     return result;

@@ -85,51 +85,53 @@
                           formControlName="entityId">
         </tb-entity-select>
       </section>
-      <div formGroupName="keys">
-        <mat-expansion-panel formGroupName="attributes" [expanded]="true">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              <div class="tb-panel-title" translate>entity-view.attributes-propagation</div>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
-          <div translate class="tb-hint">entity-view.attributes-propagation-hint</div>
-          <label translate class="tb-title no-padding">entity-view.client-attributes</label>
-          <tb-entity-keys-list
-            [entityId]="selectedEntityId | async"
-            formControlName="cs"
-            keysText="entity-view.client-attributes-placeholder"
-            [dataKeyType]="dataKeyType.attribute">
-          </tb-entity-keys-list>
-          <label translate class="tb-title no-padding">entity-view.shared-attributes</label>
-          <tb-entity-keys-list
-            [entityId]="selectedEntityId | async"
-            formControlName="sh"
-            keysText="entity-view.shared-attributes-placeholder"
-            [dataKeyType]="dataKeyType.attribute">
-          </tb-entity-keys-list>
-          <label translate class="tb-title no-padding">entity-view.server-attributes</label>
-          <tb-entity-keys-list
-            [entityId]="selectedEntityId | async"
-            formControlName="ss"
-            keysText="entity-view.server-attributes-placeholder"
-            [dataKeyType]="dataKeyType.attribute">
-          </tb-entity-keys-list>
-        </mat-expansion-panel>
-        <mat-expansion-panel [expanded]="true">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              <div class="tb-panel-title" translate>entity-view.timeseries-data</div>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
-          <div translate class="tb-hint">entity-view.timeseries-data-hint</div>
-          <label translate class="tb-title no-padding">entity-view.timeseries</label>
-          <tb-entity-keys-list
-            [entityId]="selectedEntityId | async"
-            formControlName="timeseries"
-            keysText="entity-view.timeseries-placeholder"
-            [dataKeyType]="dataKeyType.timeseries">
-          </tb-entity-keys-list>
-        </mat-expansion-panel>
+      <div class="mat-accordion-container" formGroupName="keys">
+        <mat-accordion [multi]="true">
+          <mat-expansion-panel formGroupName="attributes" [expanded]="true">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <div class="tb-panel-title" translate>entity-view.attributes-propagation</div>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <div translate class="tb-hint">entity-view.attributes-propagation-hint</div>
+            <label translate class="tb-title no-padding">entity-view.client-attributes</label>
+            <tb-entity-keys-list
+              [entityId]="selectedEntityId | async"
+              formControlName="cs"
+              keysText="entity-view.client-attributes-placeholder"
+              [dataKeyType]="dataKeyType.attribute">
+            </tb-entity-keys-list>
+            <label translate class="tb-title no-padding">entity-view.shared-attributes</label>
+            <tb-entity-keys-list
+              [entityId]="selectedEntityId | async"
+              formControlName="sh"
+              keysText="entity-view.shared-attributes-placeholder"
+              [dataKeyType]="dataKeyType.attribute">
+            </tb-entity-keys-list>
+            <label translate class="tb-title no-padding">entity-view.server-attributes</label>
+            <tb-entity-keys-list
+              [entityId]="selectedEntityId | async"
+              formControlName="ss"
+              keysText="entity-view.server-attributes-placeholder"
+              [dataKeyType]="dataKeyType.attribute">
+            </tb-entity-keys-list>
+          </mat-expansion-panel>
+          <mat-expansion-panel [expanded]="true">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <div class="tb-panel-title" translate>entity-view.timeseries-data</div>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <div translate class="tb-hint">entity-view.timeseries-data-hint</div>
+            <label translate class="tb-title no-padding">entity-view.timeseries</label>
+            <tb-entity-keys-list
+              [entityId]="selectedEntityId | async"
+              formControlName="timeseries"
+              keysText="entity-view.timeseries-placeholder"
+              [dataKeyType]="dataKeyType.timeseries">
+            </tb-entity-keys-list>
+          </mat-expansion-panel>
+        </mat-accordion>
       </div>
       <tb-datetime
         dateText="entity-view.start-date"

@@ -14,16 +14,7 @@
  * limitations under the License.
  */
 :host {
-  mat-expansion-panel {
+  .mat-accordion-container {
     margin-bottom: 16px;
   }
 }
-
-.tb-dialog {
-  :host {
-    mat-expansion-panel {
-      margin-left: 6px;
-      margin-right: 6px;
-    }
-  }
-}

@@ -14,9 +14,15 @@
  * limitations under the License.
  */
 :host ::ng-deep {
-  .mat-checkbox.hinted-checkbox {
-    .mat-checkbox-inner-container {
-      margin-top: 4px;
+  .mat-checkbox{
+    &.hinted-checkbox {
+      .mat-checkbox-inner-container {
+        margin-top: 4px;
+      }
+    }
+
+    .mat-checkbox-layout{
+      white-space: normal;
     }
   }
 }

@@ -864,7 +864,6 @@ mat-label {
         min-width: 100%;
         display: flex;
         flex-direction: column;
-        overflow: auto;
       }
       .mat-dialog-content {
         margin: 0;
@@ -914,7 +913,7 @@ mat-label {
       .mat-dialog-container {
         > *:first-child, form {
           min-width: 100% !important;
-          height: 100vh;
+          height: 100%;
         }
         .mat-dialog-content {
           max-height: 100%;