Explorar o código

HUE-9285 [editor] Limit result grid rows in notebook mode for editor v2

Johan Ahlen %!s(int64=5) %!d(string=hai) anos
pai
achega
8817ef4c9e

+ 6 - 7
desktop/core/src/desktop/js/apps/notebook2/components/ko.snippetResults.js

@@ -21,8 +21,8 @@ import DisposableComponent from 'ko/components/DisposableComponent';
 import huePubSub from 'utils/huePubSub';
 import I18n from 'utils/i18n';
 
-import 'apps/notebook2/components/resultChart/ko.resultChart';
-import 'apps/notebook2/components/resultGrid/ko.resultGrid';
+import { RESULT_CHART_COMPONENT } from 'apps/notebook2/components/resultChart/ko.resultChart';
+import { RESULT_GRID_COMPONENT } from 'apps/notebook2/components/resultGrid/ko.resultGrid';
 import { REDRAW_FIXED_HEADERS_EVENT } from 'apps/notebook2/events';
 import { REDRAW_CHART_EVENT } from 'apps/notebook2/events';
 import { EXECUTABLE_UPDATED_EVENT, EXECUTION_STATUS } from 'apps/notebook2/execution/executable';
@@ -69,18 +69,17 @@ const TEMPLATE = `
       </ul>
       <!-- /ko -->
     </div>
-    <div class="table-results" data-bind="visible: type() === 'table'" style="display: none;">
+    <div class="table-results" data-bind="visible: type() === 'table', css: { 'table-results-notebook': notebookMode }" style="display: none;">
       <div data-bind="visible: !executing() && hasData() && showGrid()" style="display: none; position: relative;">
         <!-- ko component: {
-          name: 'result-grid',
+          name: '${ RESULT_GRID_COMPONENT }',
           params: {
             activeExecutable: activeExecutable,
             data: data,
             lastFetchedRows: lastFetchedRows,
-            editorMode: editorMode,
             fetchResult: fetchResult.bind($data),
             hasMore: hasMore,
-            isPresentationMode: isPresentationMode,
+            notebookMode: notebookMode,
             isResultFullScreenMode: isResultFullScreenMode,
             meta: meta,
             resultsKlass: resultsKlass,
@@ -90,7 +89,7 @@ const TEMPLATE = `
       </div>
       <div data-bind="visible: !executing() && hasData() && showChart()" style="display: none; position: relative;">
         <!-- ko component: {
-          name: 'result-chart',
+          name: '${ RESULT_CHART_COMPONENT }',
           params: {
             activeExecutable: activeExecutable,
             cleanedMeta: cleanedMeta,

+ 3 - 3
desktop/core/src/desktop/js/apps/notebook2/components/resultChart/ko.resultChart.js

@@ -33,7 +33,7 @@ import { UUID } from 'utils/hueUtils';
 import { REDRAW_CHART_EVENT } from 'apps/notebook2/events';
 import { attachTracker } from 'apps/notebook2/components/executableStateHandler';
 
-export const NAME = 'result-chart';
+export const RESULT_CHART_COMPONENT = 'result-chart';
 
 const TYPES = window.HUE_CHARTS.TYPES;
 
@@ -532,7 +532,7 @@ class ResultChart extends DisposableComponent {
     this.chartYSingle = ko.observable(trackedObservables.chartYSingle);
     this.chartType = ko.observable(trackedObservables.chartType);
 
-    attachTracker(this.activeExecutable, NAME, this, trackedObservables);
+    attachTracker(this.activeExecutable, RESULT_CHART_COMPONENT, this, trackedObservables);
 
     this.chartId = ko.pureComputed(() => this.chartType() + '_' + this.id());
     this.isBarChart = ko.pureComputed(() => TYPES.BARCHART === this.chartType());
@@ -780,4 +780,4 @@ class ResultChart extends DisposableComponent {
   }
 }
 
-componentUtils.registerComponent(NAME, ResultChart, TEMPLATE);
+componentUtils.registerComponent(RESULT_CHART_COMPONENT, ResultChart, TEMPLATE);

+ 25 - 23
desktop/core/src/desktop/js/apps/notebook2/components/resultGrid/ko.resultGrid.js

@@ -33,7 +33,7 @@ import {
 
 import { attachTracker } from 'apps/notebook2/components/executableStateHandler';
 
-export const NAME = 'result-grid';
+export const RESULT_GRID_COMPONENT = 'result-grid';
 
 // prettier-ignore
 const TEMPLATE = `
@@ -187,8 +187,7 @@ class ResultGrid extends DisposableComponent {
     this.activeExecutable = params.activeExecutable;
 
     this.isResultFullScreenMode = params.isResultFullScreenMode;
-    this.editorMode = params.editorMode;
-    this.isPresentationMode = params.isPresentationMode;
+    this.notebookMode = params.notebookMode;
     this.hasMore = params.hasMore;
     this.fetchResult = params.fetchResult;
 
@@ -206,7 +205,12 @@ class ResultGrid extends DisposableComponent {
     this.data = params.data;
     this.lastFetchedRows = params.lastFetchedRows;
 
-    const tracker = attachTracker(this.activeExecutable, NAME, this, trackedObservables);
+    const tracker = attachTracker(
+      this.activeExecutable,
+      RESULT_GRID_COMPONENT,
+      this,
+      trackedObservables
+    );
     super.addDisposalCallback(tracker.dispose.bind(tracker));
 
     this.hueDatatable = undefined;
@@ -309,7 +313,6 @@ class ResultGrid extends DisposableComponent {
       const colCount = this.data()[0].length;
       invisibleRows = colCount > 200 ? 10 : colCount > 30 ? 50 : 100;
     }
-    const $datatablesWrapper = $resultTable.parents('.dataTables_wrapper');
 
     const hueDatatable = $resultTable.hueDataTable({
       i18n: {
@@ -318,7 +321,8 @@ class ResultGrid extends DisposableComponent {
       },
       fnDrawCallback: () => {
         const $resultTable = this.getResultTableElement();
-        if (this.editorMode()) {
+        const $datatablesWrapper = $resultTable.parents('.dataTables_wrapper');
+        if (!this.notebookMode()) {
           $('#queryResults').removeAttr('style');
           datatablesMaxHeight = $(window).height() - $resultTable.parent().offset().top - 40;
           $datatablesWrapper.css('overflow-x', 'hidden');
@@ -336,11 +340,8 @@ class ResultGrid extends DisposableComponent {
           });
         }
       },
-      scrollable:
-        this.editorMode() && !this.isPresentationMode()
-          ? window.MAIN_SCROLLABLE
-          : '.dataTables_wrapper',
-      contained: !this.editorMode() || this.isPresentationMode(),
+      scrollable: this.notebookMode() ? '.dataTables_wrapper' : window.MAIN_SCROLLABLE,
+      contained: this.notebookMode(),
       forceInvisible: invisibleRows
     });
 
@@ -352,19 +353,16 @@ class ResultGrid extends DisposableComponent {
       const $resultTable = this.getResultTableElement();
 
       const tableExtenderOptions = {
-        mainScrollable: window.MAIN_SCROLLABLE,
-        fixedFirstColumn: this.editorMode(),
+        mainScrollable: this.notebookMode() ? '.dataTables_wrapper' : window.MAIN_SCROLLABLE,
+        fixedFirstColumn: !this.notebookMode(),
         parentId: $resultTable.parents('.snippet').attr('id'),
-        clonedContainerPosition: 'fixed',
+        clonedContainerPosition: this.notebookMode() ? 'absolute' : 'fixed',
         app: 'editor'
       };
-      if (this.editorMode()) {
+      if (!this.notebookMode()) {
         $resultTable.parents('.dataTables_wrapper').css('overflow-x', 'hidden');
         const bannerTopHeight = window.BANNER_TOP_HTML ? 30 : 2;
         tableExtenderOptions.stickToTopPosition = 48 + bannerTopHeight;
-      } else {
-        tableExtenderOptions.mainScrollable = $datatablesWrapper[0];
-        tableExtenderOptions.clonedContainerPosition = 'absolute';
       }
 
       $resultTable.jHueTableExtender2(tableExtenderOptions);
@@ -375,7 +373,7 @@ class ResultGrid extends DisposableComponent {
         }
       });
 
-      if (this.editorMode()) {
+      if (!this.notebookMode()) {
         $resultTable.jHueHorizontalScrollbar();
       }
     });
@@ -400,7 +398,7 @@ class ResultGrid extends DisposableComponent {
 
     const $dataTablesWrapper = $resultTable.parents('.dataTables_wrapper');
 
-    if (!this.editorMode()) {
+    if (this.notebookMode()) {
       $dataTablesWrapper.on(
         'mousewheel.resultGrid DOMMouseScroll.resultGrid wheel.resultGrid',
         function(event) {
@@ -427,10 +425,14 @@ class ResultGrid extends DisposableComponent {
     }
 
     let $scrollElement = $dataTablesWrapper;
-    if (this.editorMode()) {
+    if (!this.notebookMode()) {
       $scrollElement = $(window.MAIN_SCROLLABLE);
     }
 
+    if ($scrollElement.data('scrollFnDtCreation')) {
+      $scrollElement.off('scroll', $scrollElement.data('scrollFnDtCreation'));
+    }
+
     let scrollThrottle = -1;
 
     this.disposals.push(() => {
@@ -447,7 +449,7 @@ class ResultGrid extends DisposableComponent {
       window.clearTimeout(scrollThrottle);
       $scrollElement.data('scrollPosition', $scrollElement.scrollTop());
       scrollThrottle = window.setTimeout(() => {
-        if (this.editorMode()) {
+        if (!this.notebookMode()) {
           lastScrollPosition--; //hack for forcing fetching
         }
         if (
@@ -649,7 +651,7 @@ class ResultGrid extends DisposableComponent {
 }
 
 componentUtils.registerComponent(
-  NAME,
+  RESULT_GRID_COMPONENT,
   {
     createViewModel: (params, componentInfo) => new ResultGrid(params, componentInfo.element)
   },

A diferenza do arquivo foi suprimida porque é demasiado grande
+ 0 - 0
desktop/libs/notebook/src/notebook/static/notebook/css/notebook2.css


+ 17 - 0
desktop/libs/notebook/src/notebook/static/notebook/less/notebook2.less

@@ -66,6 +66,23 @@
     margin-right: 18px;
   }
 
+  .snippet-v2 {
+    .table-results {
+      position: relative;
+      width: 100%;
+      min-height: 290px;
+
+      table > thead > tr > td:first-child,
+      table > tbody > tr > td:first-child {
+        background-color: @cui-gray-050;
+      }
+
+      &.table-results-notebook {
+        max-height: 400px;
+      }
+    }
+  }
+
   .notebook-snippet {
     border-bottom: 1px solid @cui-default-border-color;
     border-radius: 0;

+ 1 - 1
desktop/libs/notebook/src/notebook/templates/editor_components2.mako

@@ -684,7 +684,7 @@
   <script type="text/html" id="snippet${ suffix }">
     <div data-bind="visibleOnHover: { override: inFocus() || settingsVisible() || dbSelectionVisible() || $root.editorMode() || saveResultsModalVisible(), selector: '.hover-actions' }">
       <div class="snippet-container row-fluid" data-bind="visibleOnHover: { override: $root.editorMode() || inFocus() || saveResultsModalVisible(), selector: '.snippet-actions' }">
-        <div class="snippet card card-widget" data-bind="css: {'notebook-snippet' : ! $root.editorMode(), 'editor-mode': $root.editorMode(), 'active-editor': inFocus, 'snippet-text' : dialect() === 'text'}, attr: {'id': 'snippet_' + id()}, clickForAceFocus: ace.bind($data)">
+        <div class="snippet card card-widget snippet-v2" data-bind="css: {'notebook-snippet' : ! $root.editorMode(), 'editor-mode': $root.editorMode(), 'active-editor': inFocus, 'snippet-text' : dialect() === 'text'}, attr: {'id': 'snippet_' + id()}, clickForAceFocus: ace.bind($data)">
           <div style="position: relative;">
             <div class="snippet-row" style="position: relative;">
               <div class="snippet-body" data-bind="clickForAceFocus: ace.bind($data), visible: ! $root.isResultFullScreenMode()">

Algúns arquivos non se mostraron porque demasiados arquivos cambiaron neste cambio