Explorar o código

HUE-9013 [editor] Move grid result column list logic into the ko.resultGrid component

Johan Ahlen %!s(int64=6) %!d(string=hai) anos
pai
achega
db769cc9e6

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

@@ -135,25 +135,16 @@ const TEMPLATE = `
     <div class="table-results" data-bind="visible: type() === 'table'" style="display: none; max-height: 400px; min-height: 290px;">
       <div data-bind="visible: showGrid" style="display: none;">
         <!-- ko component: { name: 'result-grid', params: {
-          autocompleteFromEntries: autocompleteFromEntries,
-          clickFilteredMetaCheck: clickFilteredMetaCheck,
           data: data,
           editorMode: editorMode,
           fetchResult: fetchResult,
-          filteredColumnCount: filteredColumnCount,
-          filteredMeta: filteredMeta,
-          filteredMetaChecked: filteredMetaChecked,
           hasMore: hasMore,
-          isMetaFilterVisible: isMetaFilterVisible,
           isPresentationMode: isPresentationMode,
           isResultFullScreenMode: isResultFullScreenMode,
           isResultSettingsVisible: isResultSettingsVisible,
           meta: meta,
-          metaFilter: metaFilter,
           resultsKlass: resultsKlass,
-          scrollToResultColumn: scrollToResultColumn,
           status: status,
-          toggleResultColumn: toggleResultColumn,
         } } --><!-- /ko -->
       </div>
       <div data-bind="visible: showChart" style="display: none;">
@@ -204,22 +195,13 @@ class SnippetResults extends DisposableComponent {
     this.meta = params.meta; // result
 
     // Grid specific
-    this.autocompleteFromEntries = params.autocompleteFromEntries; // result
-    this.clickFilteredMetaCheck = params.clickFilteredMetaCheck; // result
     this.editorMode = params.editorMode;
     this.fetchResult = params.fetchResult;
-    this.filteredColumnCount = params.filteredColumnCount; // result
-    this.filteredMeta = params.filteredMeta; // result
-    this.filteredMetaChecked = params.filteredMetaChecked; // result
     this.hasMore = params.hasMore;
-    this.isMetaFilterVisible = params.isMetaFilterVisible; // result
     this.isPresentationMode = params.isPresentationMode;
     this.isResultFullScreenMode = params.isResultFullScreenMode;
-    this.metaFilter = params.metaFilter; // result
     this.resultsKlass = params.resultsKlass;
-    this.scrollToResultColumn = params.scrollToResultColumn;
     this.status = params.status;
-    this.toggleResultColumn = params.toggleResultColumn;
 
     // Chart specific
     this.chartLimit = params.chartLimit;

+ 124 - 16
desktop/core/src/desktop/js/apps/notebook2/components/resultGrid/ko.resultGrid.js

@@ -15,6 +15,7 @@
 // limitations under the License.
 
 import $ from 'jquery';
+import ko from 'knockout';
 
 import componentUtils from 'ko/components/componentUtils';
 import DisposableComponent from 'ko/components/DisposableComponent';
@@ -38,7 +39,7 @@ const TEMPLATE = `
             <input class="all-meta-checked no-margin-top" type="checkbox" data-bind="
                 enable: !isMetaFilterVisible() && filteredMeta().length,
                 event: {
-                  change: function() { toggleAllResultColumns($element); clickFilteredMetaCheck() }
+                  change: function() { toggleAllResultColumns($element); }
                 },
                 checked: filteredMetaChecked
               "/>
@@ -59,7 +60,7 @@ const TEMPLATE = `
                   querySpec: metaFilter,
                   facets: Object.keys(SQL_COLUMNS_KNOWN_FACET_VALUES),
                   knownFacetValues: SQL_COLUMNS_KNOWN_FACET_VALUES,
-                  autocompleteFromEntries: autocompleteFromEntries
+                  autocompleteFromEntries: autocompleteColumns.bind($data)
                 }
               } --><!-- /ko -->
             </div>
@@ -70,7 +71,7 @@ const TEMPLATE = `
         <tr data-bind="visible: name !== ''">
           <td><input class="no-margin-top" type="checkbox" data-bind="
               event: {
-                change: function() { $parent.toggleResultColumn($element, originalIndex);}
+                change: function() { $parent.toggleResultColumn($element, originalIndex); }
               },
               checked: checked
             "/></td>
@@ -139,20 +140,67 @@ class ResultGrid extends DisposableComponent {
 
     this.status = params.status;
     this.isResultSettingsVisible = params.isResultSettingsVisible;
-    this.isMetaFilterVisible = params.isMetaFilterVisible; // result
-    this.filteredMeta = params.filteredMeta; // result
-    this.filteredMetaChecked = params.filteredMetaChecked; // result
-    this.clickFilteredMetaCheck = params.clickFilteredMetaCheck; // result
-    this.filteredColumnCount = params.filteredColumnCount; // result
-    this.metaFilter = params.metaFilter; // result
-    this.autocompleteFromEntries = params.autocompleteFromEntries; // result
-    this.toggleResultColumn = params.toggleResultColumn;
-    this.scrollToResultColumn = params.scrollToResultColumn;
+    this.isMetaFilterVisible = ko.observable(false);
+    this.metaFilter = ko.observable();
     this.resultsKlass = params.resultsKlass;
     this.meta = params.meta; // result
     this.data = params.data; // result
 
-    this.hueDatatable;
+    this.hueDatatable = undefined;
+
+    const adaptMeta = () => {
+      this.meta().forEach((item, index) => {
+        if (typeof item.checked === 'undefined') {
+          item.checked = ko.observable(true);
+          item.type = item.type.replace(/_type/i, '').toLowerCase();
+          item.originalIndex = index;
+        }
+      });
+    };
+
+    adaptMeta();
+    const metaSub = this.meta.subscribe(() => {
+      adaptMeta();
+    });
+
+    this.disposals.push(() => {
+      metaSub.dispose();
+    });
+
+    this.filteredMeta = ko.pureComputed(() => {
+      if (!this.metaFilter() || this.metaFilter().query === '') {
+        return this.meta();
+      }
+
+      return this.meta().filter(item => {
+        const facets = this.metaFilter().facets;
+        const isFacetMatch = !facets || Object.keys(facets).length === 0 || !facets['type']; // So far only type facet is used for SQL
+        const isTextMatch = !this.metaFilter().text || this.metaFilter().text.length === 0;
+        let match = true;
+
+        if (!isFacetMatch) {
+          match = !!facets['type'][item.type];
+        }
+
+        if (match && !isTextMatch) {
+          match = this.metaFilter().text.every(
+            text => item.name.toLowerCase().indexOf(text.toLowerCase()) !== -1
+          );
+        }
+        return match;
+      });
+    });
+
+    this.filteredMetaChecked = ko.pureComputed(() =>
+      this.filteredMeta().some(item => typeof item.checked === 'undefined' || item.checked())
+    );
+
+    this.filteredColumnCount = ko.pureComputed(() => {
+      if (!this.metaFilter() || this.metaFilter().query === '') {
+        return this.meta().length - 1;
+      }
+      return this.filteredMeta().length;
+    });
 
     const dataSub = this.data.subscribe(() => {
       this.render();
@@ -166,6 +214,26 @@ class ResultGrid extends DisposableComponent {
     });
   }
 
+  autocompleteColumns(nonPartial, partial) {
+    const result = [];
+    const partialLower = partial.toLowerCase();
+    this.meta().forEach(column => {
+      if (column.name.toLowerCase().indexOf(partialLower) === 0) {
+        result.push(nonPartial + partial + column.name.substring(partial.length));
+      } else if (column.name.toLowerCase().indexOf('.' + partialLower) !== -1) {
+        result.push(
+          nonPartial +
+            partial +
+            column.name.substring(
+              partial.length + column.name.toLowerCase().indexOf('.' + partialLower) + 1
+            )
+        );
+      }
+    });
+
+    return result;
+  }
+
   createHueDatatable() {
     const $resultTable = this.getResultTableElement();
     let datatablesMaxHeight = 330;
@@ -257,7 +325,7 @@ class ResultGrid extends DisposableComponent {
     }
     $resultTable.addClass('dt');
 
-    const hueDatatable = this.createHueDatatable($resultTable);
+    this.hueDatatable = this.createHueDatatable($resultTable);
 
     const $dataTablesWrapper = $resultTable.parents('.dataTables_wrapper');
 
@@ -353,7 +421,7 @@ class ResultGrid extends DisposableComponent {
             lastScrollPosition !== $scrollElement.scrollTop() &&
             $scrollElement.scrollTop() + $scrollElement.outerHeight() + 20 >=
               $scrollElement[0].scrollHeight &&
-            hueDatatable &&
+            this.hueDatatable &&
             this.hasMore()
           ) {
             this.showGrayedOutResult();
@@ -381,7 +449,7 @@ class ResultGrid extends DisposableComponent {
     //   }, 0);
     // });
 
-    return hueDatatable;
+    return this.hueDatatable;
   }
 
   getSnippetElement() {
@@ -549,6 +617,34 @@ class ResultGrid extends DisposableComponent {
     $snippet.find('.snippet-grid-settings').scrollLeft(0);
   }
 
+  // TODO: Fix for multiple clicks
+  scrollToResultColumn(linkElement) {
+    const $resultTable = this.getResultTableElement();
+    const searchText = $.trim($(linkElement).text());
+    const foundColumn = $resultTable.find('th').filter(function() {
+      return $.trim($(this).text()) === searchText;
+    });
+    $resultTable.find('.columnSelected').removeClass('columnSelected');
+    const selectedColumn = $resultTable.find('tr th:nth-child(' + (foundColumn.index() + 1) + ')');
+    if (selectedColumn.length > 0) {
+      $resultTable
+        .find('tr td:nth-child(' + (foundColumn.index() + 1) + ')')
+        .addClass('columnSelected');
+      $resultTable
+        .parent()
+        .scrollLeft(
+          selectedColumn.position().left +
+            $resultTable.parent().scrollLeft() -
+            $resultTable.parent().offset().left -
+            30
+        );
+      $resultTable.data('scrollToCol', foundColumn.index());
+      $resultTable.data('scrollToRow', null);
+      $resultTable.data('scrollAnimate', true);
+      $resultTable.parent().trigger('scroll');
+    }
+  }
+
   showGrayedOutResult() {
     const $wrapper = this.getSnippetElement().find('.dataTables_wrapper');
     $wrapper.find('.fixed-first-column').css({ opacity: '0' });
@@ -565,6 +661,18 @@ class ResultGrid extends DisposableComponent {
     $wrapper.find('.resultTable').css({ opacity: '1' });
   }
 
+  toggleAllResultColumns(linkElement) {
+    this.hueDatatable.fnToggleAllCols(linkElement.checked);
+    this.hueDatatable.fnDraw();
+    this.filteredMeta().forEach(item => {
+      item.checked(linkElement.checked);
+    });
+  }
+
+  toggleResultColumn(linkElement, index) {
+    this.hueDatatable.fnSetColumnVis(index, linkElement.checked);
+  }
+
   async resultTableRendered() {
     await defer(() => {
       this.render(true);

+ 0 - 80
desktop/core/src/desktop/js/apps/notebook2/result.js

@@ -38,26 +38,6 @@ class Result {
     this.meta = ko.observableArray(result.meta || []);
     this.snippet = snippet;
 
-    const adaptMeta = () => {
-      this.meta().forEach((item, index) => {
-        if (typeof item.checked === 'undefined') {
-          item.checked = ko.observable(true);
-          item.checked.subscribe(() => {
-            this.filteredMetaChecked(this.filteredMeta().some(item => item.checked()));
-          });
-        }
-        item.type = item.type.replace(/_type/i, '').toLowerCase();
-        if (typeof item.originalIndex === 'undefined') {
-          item.originalIndex = index;
-        }
-      });
-    };
-
-    adaptMeta();
-    this.meta.subscribe(() => {
-      adaptMeta();
-    });
-
     this.rows = ko.observable(result.rows);
     this.hasMore = ko.observable(!!result.hasMore);
     this.statement_id = ko.observable(result.statement_id || 0);
@@ -78,41 +58,6 @@ class Result {
     this.statements_count = ko.observable(1);
     this.previous_statement_hash = ko.observable(result.previous_statement_hash);
     this.cleanedMeta = ko.pureComputed(() => this.meta().filter(item => item.name !== ''));
-    this.metaFilter = ko.observable();
-
-    this.isMetaFilterVisible = ko.observable(false);
-    this.filteredMetaChecked = ko.observable(true);
-
-    this.filteredColumnCount = ko.pureComputed(() => {
-      if (!this.metaFilter() || this.metaFilter().query === '') {
-        return this.meta().length - 1;
-      }
-      return this.filteredMeta().length;
-    });
-
-    this.filteredMeta = ko.pureComputed(() => {
-      if (!this.metaFilter() || this.metaFilter().query === '') {
-        return this.meta();
-      }
-
-      return this.meta().filter(item => {
-        const facets = this.metaFilter().facets;
-        const isFacetMatch = !facets || Object.keys(facets).length === 0 || !facets['type']; // So far only type facet is used for SQL
-        const isTextMatch = !this.metaFilter().text || this.metaFilter().text.length === 0;
-        let match = true;
-
-        if (!isFacetMatch) {
-          match = !!facets['type'][item.type];
-        }
-
-        if (match && !isTextMatch) {
-          match = this.metaFilter().text.every(text => {
-            return item.name.toLowerCase().indexOf(text.toLowerCase()) !== -1;
-          });
-        }
-        return match;
-      });
-    });
 
     this.fetchedOnce = ko.observable(!!result.fetchedOnce);
     this.startTime = ko.observable(result.startTime ? new Date(result.startTime) : new Date());
@@ -139,25 +84,6 @@ class Result {
     this.hasSomeResults = ko.pureComputed(() => this.hasResultset() && this.data().length > 0);
   }
 
-  autocompleteFromEntries(nonPartial, partial) {
-    const result = [];
-    const partialLower = partial.toLowerCase();
-    this.meta().forEach(column => {
-      if (column.name.toLowerCase().indexOf(partialLower) === 0) {
-        result.push(nonPartial + partial + column.name.substring(partial.length));
-      } else if (column.name.toLowerCase().indexOf('.' + partialLower) !== -1) {
-        result.push(
-          nonPartial +
-            partial +
-            column.name.substring(
-              partial.length + column.name.toLowerCase().indexOf('.' + partialLower) + 1
-            )
-        );
-      }
-    });
-
-    return result;
-  }
 
   cancelBatchExecution() {
     this.statements_count(1);
@@ -216,12 +142,6 @@ class Result {
     this.rows(null);
   }
 
-  clickFilteredMetaCheck() {
-    this.filteredMeta().forEach(item => {
-      item.checked(this.filteredMetaChecked());
-    });
-  }
-
   getContext() {
     return {
       id: this.id,

+ 0 - 44
desktop/core/src/desktop/js/apps/notebook2/snippet.js

@@ -2077,33 +2077,6 @@ export default class Snippet {
     });
   }
 
-  scrollToResultColumn(linkElement) {
-    const $resultTable = $(linkElement)
-      .parents('.snippet')
-      .find('table.resultTable:eq(0)');
-    const _text = $.trim($(linkElement).text());
-    const _col = $resultTable.find('th').filter(function() {
-      return $.trim($(this).text()) === _text;
-    });
-    $resultTable.find('.columnSelected').removeClass('columnSelected');
-    const _colSel = $resultTable.find('tr th:nth-child(' + (_col.index() + 1) + ')');
-    if (_colSel.length > 0) {
-      $resultTable.find('tr td:nth-child(' + (_col.index() + 1) + ')').addClass('columnSelected');
-      $resultTable
-        .parent()
-        .scrollLeft(
-          _colSel.position().left +
-            $resultTable.parent().scrollLeft() -
-            $resultTable.parent().offset().left -
-            30
-        );
-      $resultTable.data('scrollToCol', _col.index());
-      $resultTable.data('scrollToRow', null);
-      $resultTable.data('scrollAnimate', true);
-      $resultTable.parent().trigger('scroll');
-    }
-  }
-
   startLongOperationTimeout() {
     this.longOperationTimeout = window.setTimeout(() => {
       this.showLongOperationWarning(true);
@@ -2115,23 +2088,6 @@ export default class Snippet {
     this.showLongOperationWarning(false);
   }
 
-  toggleAllResultColumns(linkElement) {
-    const $t = $(linkElement)
-      .parents('.snippet')
-      .find('table.resultTable:eq(0)');
-    const dt = $t.hueDataTable();
-    dt.fnToggleAllCols(linkElement.checked);
-    dt.fnDraw();
-  }
-
-  toggleResultColumn(linkElement, index) {
-    const $t = $(linkElement)
-      .parents('.snippet')
-      .find('table.resultTable:eq(0)');
-    const dt = $t.hueDataTable();
-    dt.fnSetColumnVis(index, linkElement.checked);
-  }
-
   toggleResultSettings() {
     this.isResultSettingsVisible(!this.isResultSettingsVisible());
   }

+ 0 - 18
desktop/libs/notebook/src/notebook/templates/editor_components2.mako

@@ -733,7 +733,6 @@
           <div class="tab-pane" id="queryResults" data-bind="css: {'active': currentQueryTab() == 'queryResults'}">
             <!-- ko if: ['text', 'jar', 'py', 'markdown'].indexOf(type()) === -1 -->
               <!-- ko component: { name: 'snippet-results', params: {
-                autocompleteFromEntries: result.autocompleteFromEntries,
                 chartLimit: chartLimit,
                 chartMapHeat: chartMapHeat,
                 chartMapLabel: chartMapLabel,
@@ -751,30 +750,22 @@
                 cleanedDateTimeMeta: result.cleanedDateTimeMeta,
                 cleanedMeta: result.cleanedMeta,
                 cleanedNumericMeta: result.cleanedNumericMeta,
-                clickFilteredMetaCheck: result.clickFilteredMetaCheck,
                 data: result.data,
                 editorMode: parentVm.editorMode,
                 fetchResult: result.fetchMoreRows,
-                filteredColumnCount: result.filteredColumnCount,
-                filteredMeta: result.filteredMeta,
-                filteredMetaChecked: result.filteredMetaChecked,
                 hasMore: result.hasMore,
                 hasSomeResults: result.hasSomeResults,
                 id: id,
                 images: result.images,
-                isMetaFilterVisible: result.isMetaFilterVisible,
                 isPresentationMode: parentNotebook.isPresentationMode,
                 isResultFullScreenMode: parentVm.isResultFullScreenMode,
                 isResultSettingsVisible: isResultSettingsVisible,
                 isResultSettingsVisible: isResultSettingsVisible,
                 meta: result.meta,
-                metaFilter: result.metaFilter,
                 resultsKlass: resultsKlass,
-                scrollToResultColumn: scrollToResultColumn,
                 showChart: showChart,
                 showGrid: showGrid,
                 status: status,
-                toggleResultColumn: toggleResultColumn,
                 type: result.type,
               }} --><!-- /ko -->
             <!-- /ko -->
@@ -917,7 +908,6 @@
             <!-- /ko -->
             <!-- ko if: !$root.editorMode() && ['text', 'jar', 'java', 'distcp', 'shell', 'mapreduce', 'py', 'markdown'].indexOf(type()) === -1 -->
               <!-- ko component: { name: 'snippet-results', params: {
-                autocompleteFromEntries: result.autocompleteFromEntries,
                 chartLimit: chartLimit,
                 chartMapHeat: chartMapHeat,
                 chartMapLabel: chartMapLabel,
@@ -935,30 +925,22 @@
                 cleanedDateTimeMeta: result.cleanedDateTimeMeta,
                 cleanedMeta: result.cleanedMeta,
                 cleanedNumericMeta: result.cleanedNumericMeta,
-                clickFilteredMetaCheck: result.clickFilteredMetaCheck,
                 data: result.data,
                 editorMode: parentVm.editorMode,
                 fetchResult: result.fetchMoreRows,
-                filteredColumnCount: result.filteredColumnCount,
-                filteredMeta: result.filteredMeta,
-                filteredMetaChecked: result.filteredMetaChecked,
                 hasMore: result.hasMore,
                 hasSomeResults: result.hasSomeResults,
                 id: id,
                 images: result.images,
-                isMetaFilterVisible: result.isMetaFilterVisible,
                 isPresentationMode: parentNotebook.isPresentationMode,
                 isResultFullScreenMode: parentVm.isResultFullScreenMode,
                 isResultSettingsVisible: isResultSettingsVisible,
                 isResultSettingsVisible: isResultSettingsVisible,
                 meta: result.meta,
-                metaFilter: result.metaFilter,
                 resultsKlass: resultsKlass,
-                scrollToResultColumn: scrollToResultColumn,
                 showChart: showChart,
                 showGrid: showGrid,
                 status: status,
-                toggleResultColumn: toggleResultColumn,
                 type: result.type,
               }} --><!-- /ko -->
             <!-- /ko -->