Maximise results on load

core/templates/ui/drilldown/drilldown.html

@@ -75,10 +75,12 @@
     var grid = GridStack.init({
       cellHeight: 20,
       cellWidth: 50,
+      cellHeightUnit: 'px',
       auto: true,
       float: true,
       draggable: {handle: '.panel-heading', scroll: false, appendTo: 'body'},
       removable: false,
+      animate: true,
     });
     // GridStack.init();
     setupTags();
@@ -116,6 +118,25 @@
       // re-create the HTMX JS listeners, otherwise HTMX won't work inside the grid
       htmx.process(widgetelement);
 
+      // update size when the widget is loaded
+      document.addEventListener('load-widget-results', function(evt) {
+        var added_widget = htmx.find(grid_element, '#drilldown-widget-results');
+        console.log(added_widget);
+        var itemContent = htmx.find(added_widget, ".control");
+        console.log(itemContent);
+        var scrollheight = itemContent.scrollHeight+80;
+        var verticalmargin = 0;
+        var cellheight = grid.opts.cellHeight;
+        var height = Math.ceil((scrollheight + verticalmargin) / (cellheight + verticalmargin));
+        var opts = {
+          h: height,
+        }
+        grid.update(
+          added_widget,
+          opts
+        );
+      });
+
       // run the JS scripts inside the added element again
       // for instance, this will fix the dropdown
       for (var i = 0; i < scripts.length; i++) {