瀏覽代碼

HUE-9013 [editor] Fix rendering of subsequent results in the notebook2 result grid

Johan Ahlen 6 年之前
父節點
當前提交
2b0fab775e

+ 0 - 19
desktop/core/src/desktop/js/apps/notebook2/app.js

@@ -878,31 +878,12 @@ export const initNotebook2 = () => {
 
 
       $(document).on('executeStarted', (e, options) => {
       $(document).on('executeStarted', (e, options) => {
         const $snip = $('#snippet_' + options.snippet.id());
         const $snip = $('#snippet_' + options.snippet.id());
-        const $el = $snip.find('.resultTable');
-        if (options.vm.editorMode()) {
-          $('#queryResults').css({
-            height: $el.height() + 'px'
-          });
-        }
-        $el.data('scrollToCol', null);
-        $el.data('scrollToRow', null);
         $snip.find('.progress-snippet').animate(
         $snip.find('.progress-snippet').animate(
           {
           {
             height: '3px'
             height: '3px'
           },
           },
           100
           100
         );
         );
-        if ($el.hasClass('dt')) {
-          $el.removeClass('dt');
-          $('#eT' + options.snippet.id() + 'jHueTableExtenderClonedContainer').remove();
-          $('#eT' + options.snippet.id() + 'jHueTableExtenderClonedContainerColumn').remove();
-          $('#eT' + options.snippet.id() + 'jHueTableExtenderClonedContainerCell').remove();
-          if ($el.hueDataTable()) {
-            $el.hueDataTable().fnDestroy();
-          }
-          $el.find('thead tr').empty();
-          $el.data('lockedRows', {});
-        }
       });
       });
 
 
       $(document).on('renderDataError', (e, options) => {
       $(document).on('renderDataError', (e, options) => {

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

@@ -23,8 +23,8 @@ import I18n from 'utils/i18n';
 
 
 import 'apps/notebook2/components/resultChart/ko.resultChart';
 import 'apps/notebook2/components/resultChart/ko.resultChart';
 import 'apps/notebook2/components/resultGrid/ko.resultGrid';
 import 'apps/notebook2/components/resultGrid/ko.resultGrid';
-import { REDRAW_FIXED_HEADERS_EVENT } from 'apps/notebook2/components/resultGrid/ko.resultGrid';
-import { REDRAW_CHART_EVENT } from 'apps/notebook2/components/resultChart/ko.resultChart';
+import { REDRAW_FIXED_HEADERS_EVENT } from 'apps/notebook2/events';
+import { REDRAW_CHART_EVENT } from 'apps/notebook2/events';
 import { EXECUTABLE_UPDATED_EVENT } from 'apps/notebook2/execution/executable';
 import { EXECUTABLE_UPDATED_EVENT } from 'apps/notebook2/execution/executable';
 import { RESULT_TYPE, RESULT_UPDATED_EVENT } from 'apps/notebook2/execution/executionResult';
 import { RESULT_TYPE, RESULT_UPDATED_EVENT } from 'apps/notebook2/execution/executionResult';
 
 
@@ -141,21 +141,6 @@ class SnippetResults extends DisposableComponent {
     this.resultsKlass = params.resultsKlass;
     this.resultsKlass = params.resultsKlass;
     this.id = params.id; // TODO: Get rid of
     this.id = params.id; // TODO: Get rid of
 
 
-    huePubSub.subscribe(EXECUTABLE_UPDATED_EVENT, executable => {
-      if (this.activeExecutable() === executable) {
-        this.updateFromExecutable(executable);
-      }
-    });
-
-    const lastRenderedResult = undefined;
-    huePubSub.subscribe(RESULT_UPDATED_EVENT, executionResult => {
-      if (this.activeExecutable() === executionResult.executable) {
-        const refresh = lastRenderedResult === executionResult;
-        this.updateFromExecutionResult(executionResult, refresh);
-        this.lastRenderedResult = executionResult;
-      }
-    });
-
     this.status = ko.observable();
     this.status = ko.observable();
     this.type = ko.observable(RESULT_TYPE.TABLE);
     this.type = ko.observable(RESULT_TYPE.TABLE);
     this.meta = ko.observableArray();
     this.meta = ko.observableArray();
@@ -169,6 +154,20 @@ class SnippetResults extends DisposableComponent {
     this.showGrid = ko.observable(true); // TODO: Should be persisted
     this.showGrid = ko.observable(true); // TODO: Should be persisted
     this.showChart = ko.observable(false); // TODO: Should be persisted
     this.showChart = ko.observable(false); // TODO: Should be persisted
 
 
+    this.cleanedMeta = ko.pureComputed(() => this.meta().filter(item => item.name !== ''));
+
+    this.cleanedDateTimeMeta = ko.pureComputed(() =>
+      this.meta().filter(item => item.name !== '' && isDateTimeColumn(item.type))
+    );
+
+    self.cleanedStringMeta = ko.pureComputed(() =>
+      this.meta().filter(item => item.name !== '' && isStringColumn(item.type))
+    );
+
+    this.cleanedNumericMeta = ko.pureComputed(() =>
+      this.meta().filter(item => item.name !== '' && isNumericColumn(item.type))
+    );
+
     this.trackKoSub(
     this.trackKoSub(
       this.showChart.subscribe(val => {
       this.showChart.subscribe(val => {
         if (val) {
         if (val) {
@@ -190,19 +189,20 @@ class SnippetResults extends DisposableComponent {
       })
       })
     );
     );
 
 
-    this.cleanedMeta = ko.pureComputed(() => this.meta().filter(item => item.name !== ''));
-
-    this.cleanedDateTimeMeta = ko.pureComputed(() =>
-      this.meta().filter(item => item.name !== '' && isDateTimeColumn(item.type))
-    );
-
-    self.cleanedStringMeta = ko.pureComputed(() =>
-      this.meta().filter(item => item.name !== '' && isStringColumn(item.type))
-    );
+    huePubSub.subscribe(EXECUTABLE_UPDATED_EVENT, executable => {
+      if (this.activeExecutable() === executable) {
+        this.updateFromExecutable(executable);
+      }
+    });
 
 
-    this.cleanedNumericMeta = ko.pureComputed(() =>
-      this.meta().filter(item => item.name !== '' && isNumericColumn(item.type))
-    );
+    let lastRenderedResult = undefined;
+    huePubSub.subscribe(RESULT_UPDATED_EVENT, executionResult => {
+      if (this.activeExecutable() === executionResult.executable) {
+        const refresh = lastRenderedResult !== executionResult;
+        this.updateFromExecutionResult(executionResult, refresh);
+        lastRenderedResult = executionResult;
+      }
+    });
   }
   }
 
 
   reset() {
   reset() {

+ 26 - 9
desktop/core/src/desktop/js/apps/notebook2/components/resultGrid/ko.resultGrid.js

@@ -161,7 +161,6 @@ const TEMPLATE = `
       ">
       ">
       <pre class="margin-top-10"><i class="fa fa-check muted"></i> ${ I18n("Results have expired, rerun the query if needed.") }</pre>
       <pre class="margin-top-10"><i class="fa fa-check muted"></i> ${ I18n("Results have expired, rerun the query if needed.") }</pre>
     </div>
     </div>
-    <span data-bind="template: { afterRender: resultTableRendered.bind($data) }"></span>
   </div>
   </div>
 </div>
 </div>
 `;
 `;
@@ -229,11 +228,36 @@ class ResultGrid extends DisposableComponent {
     });
     });
 
 
     this.trackKoSub(
     this.trackKoSub(
-      this.data.subscribe(() => {
+      this.data.subscribe(data => {
         this.render();
         this.render();
       })
       })
     );
     );
 
 
+    this.trackKoSub(
+      this.meta.subscribe(meta => {
+        if (meta) {
+          if (this.hueDatatable) {
+            this.hueDatatable.fnDestroy();
+            this.hueDatatable = undefined;
+          }
+
+          //   $('#eT' + options.snippet.id() + 'jHueTableExtenderClonedContainer').remove();
+          //   $('#eT' + options.snippet.id() + 'jHueTableExtenderClonedContainerColumn').remove();
+          //   $('#eT' + options.snippet.id() + 'jHueTableExtenderClonedContainerCell').remove();
+
+          const $resultTable = this.getResultTableElement();
+          $resultTable.data('scrollToCol', null);
+          $resultTable.data('scrollToRow', null);
+          $resultTable.data('rendered', false);
+          if ($resultTable.hasClass('dt')) {
+            $resultTable.removeClass('dt');
+            $resultTable.find('thead tr').empty();
+            $resultTable.data('lockedRows', {});
+          }
+        }
+      })
+    );
+
     this.disposals.push(() => {
     this.disposals.push(() => {
       if (this.hueDatatable) {
       if (this.hueDatatable) {
         this.hueDatatable.fnDestroy();
         this.hueDatatable.fnDestroy();
@@ -595,7 +619,6 @@ class ResultGrid extends DisposableComponent {
       const $dataTablesWrapper = $snippet.find('.dataTables_wrapper');
       const $dataTablesWrapper = $snippet.find('.dataTables_wrapper');
       this.showNormalResult();
       this.showNormalResult();
       $dataTablesWrapper.scrollTop($dataTablesWrapper.data('scrollPosition'));
       $dataTablesWrapper.scrollTop($dataTablesWrapper.data('scrollPosition'));
-      this.redrawFixedHeaders();
       this.resizeToggleResultSettings(initial);
       this.resizeToggleResultSettings(initial);
     } else {
     } else {
       this.showNormalResult();
       this.showNormalResult();
@@ -665,12 +688,6 @@ class ResultGrid extends DisposableComponent {
   toggleResultColumn(linkElement, index) {
   toggleResultColumn(linkElement, index) {
     this.hueDatatable.fnSetColumnVis(index, linkElement.checked);
     this.hueDatatable.fnSetColumnVis(index, linkElement.checked);
   }
   }
-
-  async resultTableRendered() {
-    await defer(() => {
-      this.render(true);
-    });
-  }
 }
 }
 
 
 componentUtils.registerComponent(
 componentUtils.registerComponent(

+ 1 - 3
desktop/core/src/desktop/js/apps/notebook2/snippet.js

@@ -35,7 +35,7 @@ import Result from 'apps/notebook2/result';
 import sessionManager from 'apps/notebook2/execution/sessionManager';
 import sessionManager from 'apps/notebook2/execution/sessionManager';
 import SqlExecutable from 'apps/notebook2/execution/sqlExecutable';
 import SqlExecutable from 'apps/notebook2/execution/sqlExecutable';
 import { notebookToContextJSON, snippetToContextJSON } from 'apps/notebook2/notebookSerde';
 import { notebookToContextJSON, snippetToContextJSON } from 'apps/notebook2/notebookSerde';
-import { REDRAW_FIXED_HEADERS_EVENT } from 'apps/notebook2/components/resultGrid/ko.resultGrid';
+import { REDRAW_FIXED_HEADERS_EVENT } from 'apps/notebook2/events';
 
 
 // TODO: Remove. Temporary here for debug
 // TODO: Remove. Temporary here for debug
 window.SqlExecutable = SqlExecutable;
 window.SqlExecutable = SqlExecutable;
@@ -1258,8 +1258,6 @@ export default class Snippet {
 
 
     this.startLongOperationTimeout();
     this.startLongOperationTimeout();
 
 
-    this.currentQueryTab('queryHistory');
-
     if (this.executor() && this.executor().isRunning()) {
     if (this.executor() && this.executor().isRunning()) {
       this.executor().cancel();
       this.executor().cancel();
     }
     }

+ 4 - 3
desktop/core/src/desktop/js/jquery/plugins/jquery.tableextender2.js

@@ -109,7 +109,7 @@ function Plugin(element, options) {
   });
   });
 
 
   const redrawSubscription = huePubSub.subscribe('table.extender.redraw', parentId => {
   const redrawSubscription = huePubSub.subscribe('table.extender.redraw', parentId => {
-    if (parentId == self.options.parentId) {
+    if (parentId === self.options.parentId) {
       self.redraw();
       self.redraw();
     }
     }
   });
   });
@@ -214,6 +214,7 @@ Plugin.prototype.destroy = function() {
   self.disposeFunctions.forEach(disposeFunction => {
   self.disposeFunctions.forEach(disposeFunction => {
     disposeFunction();
     disposeFunction();
   });
   });
+  self.$element.data('plugin_' + PLUGIN_NAME, null);
 };
 };
 
 
 Plugin.prototype.setOptions = function(options) {
 Plugin.prototype.setOptions = function(options) {
@@ -334,7 +335,7 @@ Plugin.prototype.drawHeader = function() {
   clonedTable.appendTo(headerRowDiv);
   clonedTable.appendTo(headerRowDiv);
 
 
   let topPosition;
   let topPosition;
-  if (self.options.clonedContainerPosition == 'absolute') {
+  if (self.options.clonedContainerPosition === 'absolute') {
     topPosition = self.$parent.position().top - self.$mainScrollable.scrollTop();
     topPosition = self.$parent.position().top - self.$mainScrollable.scrollTop();
   } else {
   } else {
     topPosition = self.$parent.offset().top - self.$mainScrollable.scrollTop();
     topPosition = self.$parent.offset().top - self.$mainScrollable.scrollTop();
@@ -374,7 +375,7 @@ Plugin.prototype.drawFirstColumn = function(repositionHeader) {
 
 
   const originalTh = self.$element.find('thead>tr th:eq(0)');
   const originalTh = self.$element.find('thead>tr th:eq(0)');
   let topPosition;
   let topPosition;
-  if (self.options.clonedContainerPosition == 'absolute') {
+  if (self.options.clonedContainerPosition === 'absolute') {
     topPosition = self.$parent.position().top - self.$mainScrollable.scrollTop();
     topPosition = self.$parent.position().top - self.$mainScrollable.scrollTop();
   } else {
   } else {
     topPosition = self.$parent.offset().top - self.$mainScrollable.scrollTop();
     topPosition = self.$parent.offset().top - self.$mainScrollable.scrollTop();

+ 5 - 1
desktop/core/src/desktop/js/ko/components/DisposableComponent.js

@@ -37,7 +37,11 @@ export default class DisposableComponent {
 
 
   dispose() {
   dispose() {
     while (this.disposals.length) {
     while (this.disposals.length) {
-      this.disposals.pop()();
+      try {
+        this.disposals.pop()();
+      } catch (err) {
+        console.warn(err);
+      }
     }
     }
   }
   }
 }
 }