Ver código fonte

HUE-4938 [editor] Fix issue where the map crashes the browser for large coordinate values

This limits the longitude and latitude within the allowed bounds, when coordinates are outside the bounds the max and min values will be used for longitude and latitude instead. This also improves the automatic selection of chart X and Y when there is only 1 or 2 columns in the result. It also takes care of an issue where the map markers were not reset after multiple queries.
Johan Ahlen 9 anos atrás
pai
commit
2b0f991fd5

+ 8 - 0
desktop/core/src/desktop/static/desktop/js/ko.charts.js

@@ -531,6 +531,14 @@
             $.jHueNotify.error(err.message);
           }
         }
+
+        var previousMarkerLayer = $(element).data('_markerLayer');
+        if (previousMarkerLayer) {
+          window.setTimeout(function () {
+            previousMarkerLayer.removeLayers(previousMarkerLayer.getLayers());
+          }, 0);
+        }
+
         $(element).data('_map', _map);
         $(element).data('_markerLayer', _clusterGroup);
         if (_options.onComplete != null) {

+ 13 - 17
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -541,24 +541,20 @@
 
     function prepopulateChart() {
       var type = self.chartType();
-      if (self.result.cleanedMeta().length > 0) {
-        if (self.chartX() == null && (type == ko.HUE_CHARTS.TYPES.BARCHART || type == ko.HUE_CHARTS.TYPES.PIECHART || type == ko.HUE_CHARTS.TYPES.GRADIENTMAP)) {
-          self.chartX(self.result.cleanedMeta()[0].name);
-        }
-        if (self.chartMapLabel() == null && type == ko.HUE_CHARTS.TYPES.MAP) {
-          self.chartMapLabel(self.result.cleanedMeta()[0].name);
-        }
+      if (type === ko.HUE_CHARTS.TYPES.MAP && self.chartMapLabel() === null && self.chartX() === null && self.result.cleanedNumericMeta().length === 2) {
+        self.chartX(self.result.cleanedNumericMeta()[0].name);
+        self.chartMapLabel(self.result.cleanedNumericMeta()[1].name);
+        return;
       }
-      if (self.result.cleanedNumericMeta().length > 0) {
-        if (self.chartX() == null && type != ko.HUE_CHARTS.TYPES.BARCHART && type != ko.HUE_CHARTS.TYPES.PIECHART && type != ko.HUE_CHARTS.TYPES.GRADIENTMAP) {
-          self.chartX(self.result.cleanedNumericMeta()[0].name);
-        }
-        if (self.chartYMulti().length == 0 && (type == ko.HUE_CHARTS.TYPES.BARCHART || type == ko.HUE_CHARTS.TYPES.LINECHART)) {
-          self.chartYMulti.push(self.result.cleanedNumericMeta()[0].name);
-        }
-        if (self.chartYSingle() == null && (type == ko.HUE_CHARTS.TYPES.PIECHART || type == ko.HUE_CHARTS.TYPES.MAP || type == ko.HUE_CHARTS.TYPES.GRADIENTMAP || type == ko.HUE_CHARTS.TYPES.SCATTERCHART)) {
-          self.chartYSingle(type == ko.HUE_CHARTS.TYPES.GRADIENTMAP ? self.result.cleanedMeta()[0].name : self.result.cleanedNumericMeta()[0].name);
-        }
+
+      if (self.chartX() === null && (type == ko.HUE_CHARTS.TYPES.BARCHART || type == ko.HUE_CHARTS.TYPES.PIECHART || type == ko.HUE_CHARTS.TYPES.GRADIENTMAP) && (self.result.cleanedNumericMeta().length === 1 || self.result.cleanedNumericMeta().length === 2)) {
+        self.chartX(self.result.cleanedNumericMeta()[0].name);
+      }
+
+      if (self.chartYMulti().length === 0 && self.result.cleanedNumericMeta().length === 2 && (type === ko.HUE_CHARTS.TYPES.BARCHART || type === ko.HUE_CHARTS.TYPES.LINECHART)) {
+        self.chartYMulti.push(self.result.cleanedNumericMeta()[1].name);
+      } else if (self.chartYSingle() === null && self.result.cleanedNumericMeta().length === 2 && (type === ko.HUE_CHARTS.TYPES.PIECHART || type === ko.HUE_CHARTS.TYPES.MAP || type === ko.HUE_CHARTS.TYPES.GRADIENTMAP || type === ko.HUE_CHARTS.TYPES.SCATTERCHART)) {
+        self.chartYSingle(self.result.cleanedNumericMeta()[1].name);
       }
     }
 

+ 10 - 4
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -2604,6 +2604,12 @@ ${ hueIcons.symbols() }
     return _data;
   }
 
+  // The leaflet map can freeze the browser with numbers outside the map
+  var MIN_LAT = -85;
+  var MAX_LAT = 85;
+  var MIN_LNG = -180;
+  var MAX_LNG = 180;
+
   function leafletMapChartDataTransformer(rawDatum) {
     var _data = [];
     if (rawDatum.snippet.chartX() != null && rawDatum.snippet.chartYSingle() != null) {
@@ -2624,8 +2630,8 @@ ${ hueIcons.symbols() }
       if (rawDatum.snippet.chartMapLabel() != null) {
         $(rawDatum.counts()).each(function (cnt, item) {
           _data.push({
-            lat: item[_idxLat],
-            lng: item[_idxLng],
+            lat: Math.min(Math.max(MIN_LAT, item[_idxLat]), MAX_LAT),
+            lng: Math.min(Math.max(MIN_LNG, item[_idxLng]), MAX_LNG),
             label: hueUtils.html2text(item[_idxLabel]),
             obj: item
           });
@@ -2633,8 +2639,8 @@ ${ hueIcons.symbols() }
       } else {
         $(rawDatum.counts()).each(function (cnt, item) {
           _data.push({
-            lat: item[_idxLat],
-            lng: item[_idxLng],
+            lat: Math.min(Math.max(MIN_LAT, item[_idxLat]), MAX_LAT),
+            lng: Math.min(Math.max(MIN_LNG, item[_idxLng]), MAX_LNG),
             obj: item
           });
         });