瀏覽代碼

HUE-3307 [notebook] Add NiceScroll to the right panel and improve performance of the rendering

Enrico Berti 9 年之前
父節點
當前提交
46eea72

+ 7 - 5
apps/beeswax/src/beeswax/templates/execute.mako

@@ -1169,14 +1169,16 @@ function placeResizePanelHandle() {
 function reinitializeTableExtenders() {
   if (viewModel.design.results.columns().length > 0 && viewModel.design.results.columns().length < 500) {
     $("#resultTable").jHueTableExtender({
-       fixedHeader: true,
-       fixedFirstColumn: true,
-       includeNavigator: false
+      fixedHeader: true,
+      fixedFirstColumn: true,
+      includeNavigator: false,
+      clonedContainerPosition: "absolute"
     });
   }
   $("#recentQueries").jHueTableExtender({
-     fixedHeader: true,
-     includeNavigator: false
+    fixedHeader: true,
+    includeNavigator: false,
+    clonedContainerPosition: "absolute"
   });
 }
 var CURRENT_CODEMIRROR_SIZE = 100;

+ 23 - 8
desktop/core/src/desktop/static/desktop/js/jquery.tableextender.js

@@ -257,6 +257,7 @@
 
     clonedTableContainer.css("marginTop", (-$(plugin.element).parent().scrollTop()) + "px");
 
+
     function positionClones() {
       if (plugin.options.stickToTopPosition > -1) {
         if ($(plugin.element).offset().top < plugin.options.stickToTopPosition) {
@@ -268,15 +269,22 @@
         clonedTableVisibleContainer.css("top", $(plugin.element).offset().top + "px");
       }
       else {
-        clonedTableVisibleContainer.css("top", ($(plugin.element).parent().offset().top - $(mainScrollable).scrollTop()) + "px");
-        clonedCellVisibleContainer.css("top", ($(plugin.element).parent().offset().top - $(mainScrollable).scrollTop()) + "px");
+        if (plugin.options.clonedContainerPosition == 'absolute') {
+          clonedTableVisibleContainer.css("top", ($(plugin.element).parent().position().top) + "px");
+          clonedCellVisibleContainer.css("top", ($(plugin.element).parent().position().top) + "px");
+        }
+        else {
+          clonedTableVisibleContainer.css("top", ($(plugin.element).parent().offset().top) + "px");
+          clonedCellVisibleContainer.css("top", ($(plugin.element).parent().offset().top) + "px");
+        }
       }
     }
 
     positionClones();
 
-    $(mainScrollable).scroll(function () {
-      positionClones();
+    $(mainScrollable).on('scroll', function () {
+      window.clearTimeout($(plugin.element).data('throttleColumn'));
+      $(plugin.element).data('throttleColumn', window.setTimeout(positionClones, 10));
     });
   }
 
@@ -305,7 +313,8 @@
     var topPosition;
     if (plugin.options.clonedContainerPosition == 'absolute') {
       topPosition = $(plugin.element).parent().position().top - $(mainScrollable).scrollTop();
-    } else {
+    }
+    else {
       topPosition = $(plugin.element).parent().offset().top - $(mainScrollable).scrollTop();
     }
     var clonedTableVisibleContainer = $("<div>").attr("id", $(plugin.element).attr("id") + "jHueTableExtenderClonedContainer").addClass("jHueTableExtenderClonedContainer").width($(plugin.element).parent().width()).css("overflow-x", "hidden").css("top", topPosition + "px");
@@ -348,14 +357,20 @@
         }
       }
       else {
-        clonedTableVisibleContainer.css("top", ($(plugin.element).parent().offset().top - $(mainScrollable).scrollTop()) + "px");
+        if (plugin.options.clonedContainerPosition == 'absolute') {
+          clonedTableVisibleContainer.css("top", ($(plugin.element).parent().position().top) + "px");
+        }
+        else {
+          clonedTableVisibleContainer.css("top", ($(plugin.element).parent().offset().top) + "px");
+        }
       }
     }
 
     positionClones();
 
-    $(mainScrollable).scroll(function () {
-      positionClones();
+    $(mainScrollable).on('scroll', function () {
+      window.clearTimeout($(plugin.element).data('throttleHeader'));
+      $(plugin.element).data('throttleHeader', window.setTimeout(positionClones, 10));
     });
   }
 

+ 9 - 5
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -346,7 +346,7 @@ ${ hueIcons.symbols() }
       }"></div>
   </div>
   <div class="resizer" data-bind="visible: $root.isLeftPanelVisible() && $root.assistAvailable(), splitDraggable : { appName: 'notebook', leftPanelVisible: $root.isLeftPanelVisible, onPosition: function(){ huePubSub.publish('split.draggable.position') } }"><div class="resize-bar">&nbsp;</div></div>
-  <div class="right-panel" data-bind="event: { scroll: function(){ $(document).trigger('hideAutocomplete'); } }, niceScroll: { enable: $root.editorMode }">
+  <div class="right-panel" data-bind="event: { scroll: function(){ $(document).trigger('hideAutocomplete'); } }, niceScroll">
     <div>
       <div class="row-fluid row-container sortable-snippets" data-bind="css: {'is-editing': $root.isEditing},
         sortable: {
@@ -422,7 +422,7 @@ ${ hueIcons.symbols() }
       <i class="fa fa-ellipsis-h"></i>
     </div>
   </div>
-  <div class="snippet-log-container">
+  <div class="snippet-log-container margin-bottom-10">
     <div data-bind="visible: ! result.hasResultset() && status() == 'available' && result.fetchedOnce(), css: resultsKlass, click: function(){  }" style="display:none;">
       <pre class="margin-top-10 no-margin-bottom"><i class="fa fa-check muted"></i> ${ _('Success.') }</pre>
     </div>
@@ -721,7 +721,7 @@ ${ hueIcons.symbols() }
             showLineNumbers: $root.editorMode,
             showGutter: $root.editorMode,
             maxLines: $root.editorMode ? null : 25,
-            minLines: $root.editorMode ? null : 1
+            minLines: $root.editorMode ? null : 3
           }
         }"></div>
       </div>
@@ -1485,6 +1485,7 @@ ${ hueIcons.symbols() }
             fixedHeader: true,
             fixedFirstColumn: true,
             includeNavigator: false,
+            mainScrollable: '.right-panel',
             parentId: 'snippet_' + snippet.id(),
             clonedContainerPosition: "absolute"
           });
@@ -1522,12 +1523,14 @@ ${ hueIcons.symbols() }
     else {
       $(el).parents(".dataTables_wrapper").jHueTableScroller({
         maxHeight: DATATABLES_MAX_HEIGHT,
-        heightAfterCorrection: 0
+        heightAfterCorrection: 0,
+        enableNiceScroll: true
       });
       $(el).jHueTableExtender({
         fixedHeader: true,
         fixedFirstColumn: true,
         includeNavigator: false,
+        mainScrollable: '.right-panel',
         parentId: 'snippet_' + snippet.id(),
         clonedContainerPosition: "absolute"
       });
@@ -1561,7 +1564,7 @@ ${ hueIcons.symbols() }
       scrollElement = $('.right-panel');
     }
 
-    scrollElement.on("scroll", function () {
+    scrollElement.on('scroll', function () {
       var _lastScrollPosition = scrollElement.data("scrollPosition") != null ? scrollElement.data("scrollPosition") : 0;
       window.clearTimeout(_scrollTimeout);
       scrollElement.data("scrollPosition", scrollElement.scrollTop());
@@ -1998,6 +2001,7 @@ ${ hueIcons.symbols() }
                 fixedHeader: true,
                 fixedFirstColumn: true,
                 includeNavigator: false,
+                mainScrollable: '.right-panel',
                 parentId: 'snippet_' + snippet.id(),
                 clonedContainerPosition: "absolute"
               });