Forráskód Böngészése

HUE-7632 [dashboard] Set base size for each widget type to avoid expensive calculations

Enrico Berti 8 éve
szülő
commit
5c422c5

+ 1 - 0
desktop/core/src/desktop/static/desktop/js/ko.common-dashboard.js

@@ -229,6 +229,7 @@ var Widget = function (params) {
   }
 
   self.size = ko.observable(params.size).extend({ numeric: 0 });
+  self.gridsterHeight = ko.observable(params.gridsterHeight).extend({ numeric: 0 });
 
   self.name = ko.observable(params.name);
   self.id = ko.observable(params.id);

+ 33 - 27
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -67,14 +67,15 @@ function layoutToGridster(vm) {
     var startingRow = 1;
     $.each(column.rows(), function (indexX, row) {
       $.each(row.widgets(), function (indexW, widget) {
+        var targetHeight = vm.draggableWidgets[widget.widgetType()].gridsterHeight() || 6;
         layout.push(ko.mapping.fromJS({
           col: startingCol,
           row: startingRow,
           size_x: column.size(),
-          size_y: defaultWidgetHeight,
+          size_y: targetHeight,
           widget: vm.getWidgetById(widget.id())
         }));
-        startingRow += defaultWidgetHeight;
+        startingRow += targetHeight;
       });
       if (row.widgets().length === 0) {
         layout.push(ko.mapping.fromJS({
@@ -1814,36 +1815,41 @@ var SearchViewModel = function (collection_json, query_json, initial_json) {
 
     self.isPlayerMode = ko.observable(false);
 
-    function bareWidgetBuilder(name, type) {
-      return new Widget({
+    self.draggableWidgets = {};
+
+    function bareWidgetBuilder(name, type, gridsterHeight) {
+      var w = new Widget({
         size: 12,
+        gridsterHeight: gridsterHeight,
         id: UUID(),
         name: name,
         widgetType: type
       });
-    }
-
-    self.draggableHit = ko.observable(bareWidgetBuilder("Hit Count", "hit-widget")); // Not used
-    self.draggableFacet = ko.observable(bareWidgetBuilder("Facet", "facet-widget")); // Deprecated
-    self.draggableResultset = ko.observable(bareWidgetBuilder("Grid Results", "resultset-widget"));
-    self.draggableHtmlResultset = ko.observable(bareWidgetBuilder("HTML Results", "html-resultset-widget"));
-    self.draggableHistogram = ko.observable(bareWidgetBuilder("Histogram", "histogram-widget")); // Deprecated
-    self.draggableBar = ko.observable(bareWidgetBuilder("Bar Chart", "bar-widget")); // Deprecated
-    self.draggableMap = ko.observable(bareWidgetBuilder("Map", "map-widget")); // Deprecated
-    self.draggableLeafletMap = ko.observable(bareWidgetBuilder("Marker Map", "leafletmap-widget"));
-    self.draggableLine = ko.observable(bareWidgetBuilder("Line Chart", "line-widget")); // Deprecated
-    self.draggablePie = ko.observable(bareWidgetBuilder("Pie Chart", "pie-widget")); // Deprecated
-    self.draggablePie2 = ko.observable(bareWidgetBuilder("Pie Chart", "pie2-widget"));
-    self.draggableFilter = ko.observable(bareWidgetBuilder("Filter Bar", "filter-widget"));
-    self.draggableTree = ko.observable(bareWidgetBuilder("Tree", "tree-widget")); // Deprecated
-    self.draggableHeatmap = ko.observable(bareWidgetBuilder("Heatmap", "heatmap-widget"));
-    self.draggableCounter = ko.observable(bareWidgetBuilder("Counter", "hit-widget"));
-    self.draggableBucket = ko.observable(bareWidgetBuilder("Chart", "bucket-widget"));
-    self.draggableTimeline = ko.observable(bareWidgetBuilder("Timeline", "timeline-widget"));
-    self.draggableGradienMap = ko.observable(bareWidgetBuilder("Gradient Map", "gradient-map-widget"));
-    self.draggableTree2 = ko.observable(bareWidgetBuilder("Tree", "tree2-widget"));
-    self.draggableTextFacet = ko.observable(bareWidgetBuilder("Text Facet", "text-facet-widget"));
-    self.draggableDocument = ko.observable(bareWidgetBuilder("Document", "document-widget"));
+      self.draggableWidgets[type] = w;
+      return w;
+    }
+
+    self.draggableHit = ko.observable(bareWidgetBuilder("Hit Count", "hit-widget", 6)); // Not used
+    self.draggableFacet = ko.observable(bareWidgetBuilder("Facet", "facet-widget", 6)); // Deprecated
+    self.draggableResultset = ko.observable(bareWidgetBuilder("Grid Results", "resultset-widget", 21));
+    self.draggableHtmlResultset = ko.observable(bareWidgetBuilder("HTML Results", "html-resultset-widget", 21));
+    self.draggableHistogram = ko.observable(bareWidgetBuilder("Histogram", "histogram-widget", 6)); // Deprecated
+    self.draggableBar = ko.observable(bareWidgetBuilder("Bar Chart", "bar-widget", 6)); // Deprecated
+    self.draggableMap = ko.observable(bareWidgetBuilder("Map", "map-widget", 6)); // Deprecated
+    self.draggableLeafletMap = ko.observable(bareWidgetBuilder("Marker Map", "leafletmap-widget", 9));
+    self.draggableLine = ko.observable(bareWidgetBuilder("Line Chart", "line-widget", 6)); // Deprecated
+    self.draggablePie = ko.observable(bareWidgetBuilder("Pie Chart", "pie-widget", 6)); // Deprecated
+    self.draggablePie2 = ko.observable(bareWidgetBuilder("Pie Chart", "pie2-widget", 6));
+    self.draggableFilter = ko.observable(bareWidgetBuilder("Filter Bar", "filter-widget", 3));
+    self.draggableTree = ko.observable(bareWidgetBuilder("Tree", "tree-widget", 6)); // Deprecated
+    self.draggableHeatmap = ko.observable(bareWidgetBuilder("Heatmap", "heatmap-widget", 6));
+    self.draggableCounter = ko.observable(bareWidgetBuilder("Counter", "hit-widget", 6));
+    self.draggableBucket = ko.observable(bareWidgetBuilder("Chart", "bucket-widget", 6));
+    self.draggableTimeline = ko.observable(bareWidgetBuilder("Timeline", "timeline-widget", 6));
+    self.draggableGradienMap = ko.observable(bareWidgetBuilder("Gradient Map", "gradient-map-widget", 6));
+    self.draggableTree2 = ko.observable(bareWidgetBuilder("Tree", "tree2-widget", 6));
+    self.draggableTextFacet = ko.observable(bareWidgetBuilder("Text Facet", "text-facet-widget", 6));
+    self.draggableDocument = ko.observable(bareWidgetBuilder("Document", "document-widget", 6));
 
     self.gridItems = ko.observableArray([]);
 

+ 25 - 47
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -3635,33 +3635,6 @@ $(document).ready(function () {
     }
   }
 
-  huePubSub.subscribeOnce('calculate.gridster.heights', function () {
-    $('.gridster ul li.gs-w').each(function () {
-      resizeGridsterWidget($(this));
-    });
-  }, 'dashboard');
-
-
-  // there's no elegant way to do this because it doesn't work with knockout afterrender events
-  var previousWidgetsHeights = 0;
-  var toleranceCycles = 0;
-  var renderingCheckInterval = window.setInterval(function () {
-    if (toleranceCycles === 5) {
-      window.clearInterval(renderingCheckInterval);
-      huePubSub.publish('calculate.gridster.heights');
-    }
-    var latestWidgetsHeights = 0;
-    $('.gridster ul li.gs-w .card-widget').each(function () {
-      latestWidgetsHeights += $(this).height();
-    });
-    if (latestWidgetsHeights !== previousWidgetsHeights) {
-      previousWidgetsHeights = latestWidgetsHeights;
-      toleranceCycles = 0;
-    }
-    else {
-      toleranceCycles++;
-    }
-  }, 200);
 
   huePubSub.subscribe('plotly.afterplot', function (element) {
     resizeGridsterWidget($(element).parents('li.gs-w'));
@@ -3680,26 +3653,31 @@ $(document).ready(function () {
   }, 'dashboard');
 
   huePubSub.subscribe('gridster.add.widget', function (options) {
-    var widgetId = options.id;
-    if (options.target) {
-      searchViewModel.gridItems().forEach(function (item) {
-        if (item.col() === options.target.col() && item.row() === options.target.row()) {
-          item.widget(searchViewModel.getWidgetById(widgetId));
-        }
-      });
-    }
-    else {
-      var newPosition = $('.gridster ul').data('gridster').next_position(12, 12);
-      searchViewModel.gridItems.push(ko.mapping.fromJS({
-        col: newPosition.col,
-        row: newPosition.row,
-        size_x: 12,
-        size_y: 12,
-        widget: searchViewModel.getWidgetById(widgetId),
-        callback: function (el) {
-          $('.gridster ul').data('gridster').move_widget(el, 1, 1);
-        }
-      }));
+    var widget = searchViewModel.getWidgetById(options.id);
+    if (widget) {
+      var targetHeight = widget.gridsterHeight() || 6;
+      if (options.target) {
+        searchViewModel.gridItems().forEach(function (item) {
+          if (item.col() === options.target.col() && item.row() === options.target.row()) {
+            item.widget(widget);
+            item.size_y(targetHeight);
+            $('.gridster ul').data('gridster').resize_widget($(item.gridsterElement), item.size_x(), item.size_y());
+          }
+        });
+      }
+      else {
+        var newPosition = $('.gridster ul').data('gridster').next_position(12, targetHeight);
+        searchViewModel.gridItems.push(ko.mapping.fromJS({
+          col: newPosition.col,
+          row: newPosition.row,
+          size_x: 12,
+          size_y: targetHeight,
+          widget: widget,
+          callback: function (el) {
+            $('.gridster ul').data('gridster').move_widget(el, 1, 1);
+          }
+        }));
+      }
     }
   }, 'dashboard');