فهرست منبع

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 سال پیش
والد
کامیت
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
           });
         });