Widget subscriptions improvements.

ui/src/app/api/subscription.js

@@ -169,15 +169,7 @@ export default class Subscription {
                 });
                 this.registrations.push(registration);
             } else {
-                registration = this.ctx.$scope.$watch(function () {
+                this.startWatchingTimewindow();
-                    return subscription.timeWindowConfig;
-                }, function (newTimewindow, prevTimewindow) {
-                    if (!angular.equals(newTimewindow, prevTimewindow)) {
-                        subscription.unsubscribe();
-                        subscription.subscribe();
-                    }
-                });
-                this.registrations.push(registration);
             }
         }
 
@@ -188,6 +180,29 @@ export default class Subscription {
         this.registrations.push(registration);
     }
 
+    startWatchingTimewindow() {
+        var subscription = this;
+        this.timeWindowWatchRegistration = this.ctx.$scope.$watch(function () {
+            return subscription.timeWindowConfig;
+        }, function (newTimewindow, prevTimewindow) {
+            if (!angular.equals(newTimewindow, prevTimewindow)) {
+                subscription.unsubscribe();
+                subscription.subscribe();
+            }
+        }, true);
+        this.registrations.push(this.timeWindowWatchRegistration);
+    }
+
+    stopWatchingTimewindow() {
+        if (this.timeWindowWatchRegistration) {
+            this.timeWindowWatchRegistration();
+            var index = this.registrations.indexOf(this.timeWindowWatchRegistration);
+            if (index > -1) {
+                this.registrations.splice(index, 1);
+            }
+        }
+    }
+
     initRpc() {
 
         if (this.targetDeviceAliasIds && this.targetDeviceAliasIds.length > 0) {
@@ -354,9 +369,13 @@ export default class Subscription {
             this.ctx.dashboardTimewindowApi.onResetTimewindow();
         } else {
             if (this.originalTimewindow) {
+                this.stopWatchingTimewindow();
                 this.timeWindowConfig = angular.copy(this.originalTimewindow);
                 this.originalTimewindow = null;
                 this.callbacks.timeWindowUpdated(this, this.timeWindowConfig);
+                this.unsubscribe();
+                this.subscribe();
+                this.startWatchingTimewindow();
             }
         }
     }
@@ -365,11 +384,15 @@ export default class Subscription {
         if (this.useDashboardTimewindow) {
             this.ctx.dashboardTimewindowApi.onUpdateTimewindow(startTimeMs, endTimeMs);
         } else {
+            this.stopWatchingTimewindow();
             if (!this.originalTimewindow) {
                 this.originalTimewindow = angular.copy(this.timeWindowConfig);
             }
             this.timeWindowConfig = this.ctx.timeService.toHistoryTimewindow(this.timeWindowConfig, startTimeMs, endTimeMs);
             this.callbacks.timeWindowUpdated(this, this.timeWindowConfig);
+            this.unsubscribe();
+            this.subscribe();
+            this.startWatchingTimewindow();
         }
     }
 

ui/src/app/common/utils.service.js

@@ -342,6 +342,7 @@ function Utils($mdColorPalette, $rootScope, $window, $q, deviceService, types) {
             datasource = {
                 type: subscriptionInfo.type,
                 deviceName: device.name,
+                name: device.name,
                 deviceId: device.id.id,
                 dataKeys: []
             }

ui/src/app/widget/lib/flot-widget.js

@@ -374,6 +374,10 @@ export default class TbFlot {
     }
 
     update() {
+        if (this.updateTimeoutHandle) {
+            this.ctx.$scope.$timeout.cancel(this.updateTimeoutHandle);
+            this.updateTimeoutHandle = null;
+        }
         if (this.subscription) {
             if (!this.isMouseInteraction && this.ctx.plot) {
                 if (this.chartType === 'line' || this.chartType === 'bar') {
@@ -396,6 +400,11 @@ export default class TbFlot {
                         this.ctx.plot.draw();
                     }
                 }
+            } else if (this.isMouseInteraction && this.ctx.plot){
+                var tbFlot = this;
+                this.updateTimeoutHandle = this.ctx.$scope.$timeout(function() {
+                    tbFlot.update();
+                }, 30, false);
             }
         }
     }

ui/src/app/widget/lib/google-map.js

@@ -217,7 +217,9 @@ export default class TbGoogleMap {
             this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34);
         }
 
-        this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo);
+        if (settings.displayTooltip) {
+            this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo);
+        }
 
         if (onClickListener) {
             marker.addListener('click', onClickListener);

ui/src/app/widget/lib/map-widget.js

@@ -19,7 +19,7 @@ import tinycolor from 'tinycolor2';
 import TbGoogleMap from './google-map';
 import TbOpenStreetMap from './openstreet-map';
 
-function procesTooltipPattern(tbMap, pattern, datasources) {
+function procesTooltipPattern(tbMap, pattern, datasources, dsIndex) {
     var match = tbMap.varsRegex.exec(pattern);
     var replaceInfo = {};
     replaceInfo.variables = [];
@@ -48,11 +48,13 @@ function procesTooltipPattern(tbMap, pattern, datasources) {
             var offset = 0;
             for (var i=0;i<datasources.length;i++) {
                 var datasource = datasources[i];
-                for (var k = 0; k < datasource.dataKeys.length; k++) {
+                if (angular.isUndefined(dsIndex) || dsIndex == i) {
-                    var dataKey = datasource.dataKeys[k];
+                    for (var k = 0; k < datasource.dataKeys.length; k++) {
-                    if (dataKey.label === label) {
+                        var dataKey = datasource.dataKeys[k];
-                        variableInfo.dataKeyIndex = offset + k;
+                        if (dataKey.label === label) {
-                        break;
+                            variableInfo.dataKeyIndex = offset + k;
+                            break;
+                        }
                     }
                 }
                 offset += datasource.dataKeys.length;
@@ -168,6 +170,7 @@ export default class TbMapWidget {
                         latKeyName: localLatKeyName,
                         lngKeyName: localLngKeyName,
                         showLabel: subscriptionLocationSettings.showLabel !== false,
+                        displayTooltip: subscriptionLocationSettings.displayTooltip !== false,
                         label: datasource.name,
                         labelColor: this.ctx.widgetConfig.color || '#000000',
                         color: "#FE7569",
@@ -179,10 +182,10 @@ export default class TbMapWidget {
                         useMarkerImageFunction: false,
                         markerImageFunction: null,
                         markerImages: [],
-                        tooltipPattern: "<b>Latitude:</b> ${#"+latKeyIndex+":7}<br/><b>Longitude:</b> ${#"+lngKeyIndex+":7}"
+                        tooltipPattern: subscriptionLocationSettings.tooltipPattern || "<b>Latitude:</b> ${latitude:7}<br/><b>Longitude:</b> ${longitude:7}"
                     };
 
-                    locationsSettings.tooltipReplaceInfo = procesTooltipPattern(this, locationsSettings.tooltipPattern, this.subscription.datasources);
+                    locationsSettings.tooltipReplaceInfo = procesTooltipPattern(this, locationsSettings.tooltipPattern, this.subscription.datasources, i);
 
                     locationsSettings.useColorFunction = subscriptionLocationSettings.useColorFunction === true;
                     if (angular.isDefined(subscriptionLocationSettings.colorFunction) && subscriptionLocationSettings.colorFunction.length > 0) {
@@ -211,6 +214,7 @@ export default class TbMapWidget {
                 latKeyName: "lat",
                 lngKeyName: "lng",
                 showLabel: true,
+                displayTooltip: true,
                 label: "",
                 labelColor: this.ctx.widgetConfig.color || '#000000',
                 color: "#FE7569",

ui/src/app/widget/lib/openstreet-map.js

@@ -109,7 +109,9 @@ export default class TbOpenStreetMap {
             this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34);
         }
 
-        this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo);
+        if (settings.displayTooltip) {
+            this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo);
+        }
 
         if (onClickListener) {
             marker.on('click', onClickListener);