Ver Fonte

HUE-9013 [editor] Introduce a snippet result component for notebook 2

This component will manage all the visuals for the result of an execution
Johan Ahlen há 6 anos atrás
pai
commit
10d1019e3e

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

@@ -0,0 +1,250 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import componentUtils from 'ko/components/componentUtils';
+import DisposableComponent from 'ko/components/DisposableComponent';
+import I18n from 'utils/i18n';
+
+import 'apps/notebook2/components/resultChart/ko.resultChart';
+import 'apps/notebook2/components/resultGrid/ko.resultGrid';
+
+export const NAME = 'snippet-results';
+
+// prettier-ignore
+const TEMPLATE = `
+<div class="snippet-row">
+  <div class="result-left-bar">
+    <!-- ko if: type() === 'table' && hasSomeResults() -->
+    <div class="snippet-actions" style="opacity:1">
+      <div style="margin-top:25px;">
+        <a class="snippet-side-btn" href="javascript: void(0)" data-bind="
+            click: function() { showGrid(true); huePubSub.publish('redraw.fixed.headers'); huePubSub.publish('table.extender.redraw'); },
+            css: { 'active': showGrid }
+          " title="${ I18n('Grid') }">
+          <i class="fa fa-fw fa-th"></i>
+        </a>
+      </div>
+
+      <div class="dropdown">
+        <a class="snippet-side-btn" style="padding-right:0" href="javascript: void(0)" data-bind="css: { 'active': showChart }, click: function() { showChart(true); }" >
+          <i class="hcha fa-fw hcha-bar-chart" data-bind="visible: chartType() === window.HUE_CHARTS.TYPES.BARCHART" title="${ I18n('Bars') }"></i>
+          <i class="hcha fa-fw hcha-timeline-chart" data-bind="visible: chartType() === window.HUE_CHARTS.TYPES.TIMELINECHART" title="${ I18n('Time') }"></i>
+          <i class="hcha fa-fw hcha-pie-chart" data-bind="visible: chartType() === window.HUE_CHARTS.TYPES.PIECHART" title="${ I18n('Pie') }"></i>
+          <i class="fa fa-fw fa-dot-circle-o" data-bind="visible: chartType() === window.HUE_CHARTS.TYPES.SCATTERCHART" title="${ I18n('Scatter') }"></i>
+          <i class="fa fa-fw fa-map-marker" data-bind="visible: chartType() === window.HUE_CHARTS.TYPES.MAP" title="${ I18n('Marker Map') }"></i>
+          <i class="hcha fa-fw hcha-map-chart" data-bind="visible: chartType() === window.HUE_CHARTS.TYPES.GRADIENTMAP" title="${ I18n('Gradient Map') }"></i>
+        </a>
+        <a class="dropdown-toggle snippet-side-btn" style="padding:0" data-toggle="dropdown" href="javascript: void(0)" data-bind="css: { 'active': showChart }">
+          <i class="fa fa-caret-down"></i>
+        </a>
+
+        <ul class="dropdown-menu less-padding">
+          <li>
+            <a href="javascript:void(0)" data-bind="css: { 'active': chartType() === window.HUE_CHARTS.TYPES.BARCHART }, click: function() { showChart(true); chartType(window.HUE_CHARTS.TYPES.BARCHART); }">
+              <i class="hcha hcha-bar-chart"></i> ${ I18n('Bars') }
+            </a>
+          </li>
+          <li data-bind="visible: cleanedDateTimeMeta().length > 0">
+            <a href="javascript:void(0)" data-bind="css: { 'active': chartType() === window.HUE_CHARTS.TYPES.TIMELINECHART }, click: function() { showChart(true); chartType(window.HUE_CHARTS.TYPES.TIMELINECHART); }">
+              <i class="hcha hcha-timeline-chart"></i> ${ I18n('Time') }
+            </a>
+          </li>
+          <li>
+            <a href="javascript:void(0)" data-bind="css: { 'active': chartType() === window.HUE_CHARTS.TYPES.PIECHART }, click: function() { showChart(true); chartType(window.HUE_CHARTS.TYPES.PIECHART); }">
+              <i class="hcha hcha-pie-chart"></i> ${ I18n('Pie') }
+            </a>
+          </li>
+          <li>
+            <a href="javascript:void(0)" data-bind="css: { 'active': chartType() === window.HUE_CHARTS.TYPES.SCATTERCHART }, click: function() { showChart(true); chartType(window.HUE_CHARTS.TYPES.SCATTERCHART); }">
+              <i class="fa fa-fw fa-dot-circle-o chart-icon"></i> ${ I18n('Scatter') }
+            </a>
+          </li>
+          <li>
+            <a href="javascript:void(0)" data-bind="css: { 'active': chartType() === window.HUE_CHARTS.TYPES.MAP }, click: function() { showChart(true); chartType(window.HUE_CHARTS.TYPES.MAP); }">
+              <i class="fa fa-fw fa-map-marker chart-icon"></i> ${ I18n('Marker Map') }
+            </a>
+          </li>
+          <li>
+            <a href="javascript:void(0)" data-bind="css: {' active': chartType() === window.HUE_CHARTS.TYPES.GRADIENTMAP }, click: function() { showChart(true); chartType(window.HUE_CHARTS.TYPES.GRADIENTMAP); }">
+              <i class="hcha hcha-map-chart"></i> ${ I18n('Gradient Map') }
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <div>
+        <a class="snippet-side-btn" href="javascript:void(0)" data-bind="
+            toggle: isResultSettingsVisible,
+            publish: 'chart.hard.reset',
+            css: { 'blue' : isResultSettingsVisible }
+          " title="${ I18n('Columns') }">
+          <!-- ko if: isResultSettingsVisible() -->
+          <i class="fa fa-fw fa-chevron-left"></i>
+          <!-- /ko -->
+          <!-- ko ifnot: isResultSettingsVisible() -->
+          <i class="fa fa-fw fa-columns"></i>
+          <!-- /ko -->
+        </a>
+      </div>
+
+      <!-- ko if: false && window.ENABLE_DOWNLOAD -->
+        <div data-bind="
+            component: {
+              name: 'downloadSnippetResults',
+              params: {
+                gridSideBtn: false,
+                snippet: $data,
+                notebook: $parent 
+              } 
+            }
+          " style="display:inline-block;"></div>
+      <!-- /ko -->
+    </div>
+    <!-- /ko -->
+  </div>
+  <div class="result-body">
+    <div data-bind="visible: type() !== 'table'" style="display:none; max-height: 400px; margin: 10px 0; overflow-y: auto">
+      <!-- ko if: data().length && data()[0][1] != "" -->
+      <pre data-bind="text: data()[0][1]" class="no-margin-bottom"></pre>
+      <!-- /ko -->
+      <!-- ko ifnot: data().length && data()[0][1] != "" -->
+      <pre class="no-margin-bottom"><i class="fa fa-check muted"></i> ${ I18n('Done.') }</pre>
+      <!-- /ko -->
+      <!-- ko if: images().length -->
+      <ul class="unstyled results-images" data-bind="foreach: images">
+        <li>
+          <img data-bind="attr: {'src': 'data:image/png;base64,' + $data}" class="margin-bottom-10"  alt="${ I18n('Result image') }"/>
+        </li>
+      </ul>
+      <!-- /ko -->
+    </div>
+
+    <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;">
+        <!-- ko component: { name: 'result-chart', params: {
+          chartLimit: chartLimit,
+          chartMapHeat: chartMapHeat,
+          chartMapLabel: chartMapLabel,
+          chartMapType: chartMapType,
+          chartScatterGroup: chartScatterGroup,
+          chartScatterSize: chartScatterSize,
+          chartScope: chartScope,
+          chartSorting: chartSorting,
+          chartTimelineType: chartTimelineType,
+          chartType: chartType,
+          chartX: chartX,
+          chartXPivot: chartXPivot,
+          chartYMulti: chartYMulti,
+          chartYSingle: chartYSingle,
+          cleanedDateTimeMeta: cleanedDateTimeMeta,
+          cleanedMeta: cleanedMeta,
+          cleanedNumericMeta: cleanedNumericMeta,
+          data: data,
+          id: id,
+          isResultSettingsVisible: isResultSettingsVisible,
+          meta: meta
+        } } --><!-- /ko -->
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+class SnippetResults extends DisposableComponent {
+  constructor(params, element) {
+    super();
+    this.element = element;
+
+    // For this and possibly chart and grid
+    this.chartType = params.chartType;
+    this.type = params.type; // result
+    this.hasSomeResults = params.hasSomeResults; // result
+    this.images = params.images; // result
+    this.showGrid = params.showGrid;
+    this.showChart = params.showChart;
+    this.cleanedDateTimeMeta = params.cleanedDateTimeMeta;
+    this.isResultSettingsVisible = params.isResultSettingsVisible;
+    this.data = params.data; // result
+    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;
+    this.chartMapHeat = params.chartMapHeat;
+    this.chartMapLabel = params.chartMapLabel;
+    this.chartMapType = params.chartMapType;
+    this.chartScatterGroup = params.chartScatterGroup;
+    this.chartScatterSize = params.chartScatterSize;
+    this.chartScope = params.chartScope;
+    this.chartSorting = params.chartSorting;
+    this.chartTimelineType = params.chartTimelineType;
+    this.chartX = params.chartX;
+    this.chartXPivot = params.chartXPivot;
+    this.chartYMulti = params.chartYMulti;
+    this.chartYSingle = params.chartYSingle;
+    this.cleanedMeta = params.cleanedMeta;
+    this.cleanedNumericMeta = params.cleanedNumericMeta;
+    this.id = params.id;
+  }
+}
+
+componentUtils.registerComponent(
+  NAME,
+  {
+    createViewModel: (params, componentInfo) => new SnippetResults(params, componentInfo.element)
+  },
+  TEMPLATE
+);

+ 6 - 5
desktop/core/src/desktop/js/apps/notebook2/components/resultGrid/ko.resultGrid.js

@@ -301,12 +301,13 @@ class ResultGrid extends DisposableComponent {
       window.clearTimeout(resultFollowTimeout);
     });
 
+    const $snippet = this.getSnippetElement();
+    const $resultLeftBar = $snippet.find('.result-left-bar');
+
     const dataScroll = () => {
-      const $resultTable = this.getResultTableElement();
-      if ($resultTable.is(':visible')) {
+      if (!$resultTable.is(':visible')) {
         return;
       }
-      const $snippet = this.getSnippetElement();
       if (this.editorMode()) {
         window.clearTimeout(resultFollowTimeout);
         resultFollowTimeout = window.setTimeout(() => {
@@ -335,8 +336,8 @@ class ResultGrid extends DisposableComponent {
               marginTop: margin
             });
           }
-          $snippet.find('.snippet-actions').css({
-            marginTop: margin + 25
+          $resultLeftBar.css({
+            marginTop: margin
           });
         }, 100);
       } else {

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

@@ -22,8 +22,7 @@ import { markdown } from 'markdown';
 import 'apps/notebook2/components/ko.executableProgressBar';
 import 'apps/notebook2/components/ko.snippetEditorActions';
 import 'apps/notebook2/components/ko.snippetExecuteActions';
-import 'apps/notebook2/components/resultChart/ko.resultChart';
-import 'apps/notebook2/components/resultGrid/ko.resultGrid';
+import 'apps/notebook2/components/ko.snippetResults';
 
 import AceAutocompleteWrapper from 'apps/notebook/aceAutocompleteWrapper';
 import apiHelper from 'api/apiHelper';

+ 1 - 0
desktop/core/src/desktop/templates/global_js_constants.mako

@@ -78,6 +78,7 @@
 
   window.USER_HAS_METADATA_WRITE_PERM = '${ user.has_hue_permission(action="write", app="metadata") }' === 'True';
 
+  window.ENABLE_DOWNLOAD = '${ conf.ENABLE_DOWNLOAD.get() }' === 'True';
   window.ENABLE_NEW_CREATE_TABLE = '${ hasattr(ENABLE_NEW_CREATE_TABLE, 'get') and ENABLE_NEW_CREATE_TABLE.get()}' === 'True';
   window.ENABLE_NOTEBOOK_2 = '${ ENABLE_NOTEBOOK_2.get() }' === 'True';
 

+ 6 - 6
desktop/libs/notebook/src/notebook/static/notebook/less/notebook2.less

@@ -249,12 +249,12 @@
   }
 
   .result-left-bar {
-    position:absolute;
-    display:inline-block;
-    height:auto;
-    left:0;
-    top:0;
-    bottom:0;
+    position: absolute;
+    display: inline-block;
+    height: auto;
+    left: 0;
+    top: 0;
+    bottom: 0;
     width: 35px;
   }
 

+ 93 - 156
desktop/libs/notebook/src/notebook/templates/editor_components2.mako

@@ -569,7 +569,6 @@
             <li style="margin-right: 25px;" data-bind="click: function(){ currentQueryTab('queryBuilderTab'); }, css: {'active': currentQueryTab() == 'queryBuilderTab'}"><a class="inactive-action" href="#queryBuilderTab" data-toggle="tab">${_('Query Builder')}</a></li>
             <!-- /ko -->
           % endif
-          <!-- ko if: result.hasSomeResults -->
           <li data-bind="click: function(){ currentQueryTab('queryResults'); }, css: {'active': currentQueryTab() == 'queryResults'}">
             <a class="inactive-action" style="display:inline-block" href="#queryResults" data-toggle="tab">${_('Results')}
               <!-- ko if: result.rows() != null  -->
@@ -590,7 +589,6 @@
               </div>
             </div>
           </li>
-          <!-- /ko -->
           <!-- ko if: result.explanation().length > 0 -->
           <li data-bind="click: function(){ currentQueryTab('queryExplain'); }, css: {'active': currentQueryTab() == 'queryExplain'}"><a class="inactive-action" href="#queryExplain" data-toggle="tab">${_('Explain')}</a></li>
           <!-- /ko -->
@@ -733,7 +731,53 @@
           % endif
 
           <div class="tab-pane" id="queryResults" data-bind="css: {'active': currentQueryTab() == 'queryResults'}">
-            <!-- ko template: { if: ['text', 'jar', 'py', 'markdown'].indexOf(type()) == -1, name: 'snippet-results${ suffix }' } --><!-- /ko -->
+            <!-- ko if: ['text', 'jar', 'py', 'markdown'].indexOf(type()) === -1 -->
+              <!-- ko component: { name: 'snippet-results', params: {
+                autocompleteFromEntries: result.autocompleteFromEntries,
+                chartLimit: chartLimit,
+                chartMapHeat: chartMapHeat,
+                chartMapLabel: chartMapLabel,
+                chartMapType: chartMapType,
+                chartScatterGroup: chartScatterGroup,
+                chartScatterSize: chartScatterSize,
+                chartScope: chartScope,
+                chartSorting: chartSorting,
+                chartTimelineType: chartTimelineType,
+                chartType: chartType,
+                chartX: chartX,
+                chartXPivot: chartXPivot,
+                chartYMulti: chartYMulti,
+                chartYSingle: chartYSingle,
+                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 -->
           </div>
 
           <!-- ko if: result.explanation().length > 0 -->
@@ -871,10 +915,53 @@
             <!-- ko if: $root.editorMode() -->
             <!-- ko template: 'query-tabs${ suffix }' --><!-- /ko -->
             <!-- /ko -->
-            <!-- ko ifnot: $root.editorMode() -->
-            <!-- ko template: { if: ['text', 'jar', 'java', 'distcp', 'shell', 'mapreduce', 'py', 'markdown'].indexOf(type()) == -1, name: 'snippet-results${ suffix }' } --><!-- /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,
+                chartMapType: chartMapType,
+                chartScatterGroup: chartScatterGroup,
+                chartScatterSize: chartScatterSize,
+                chartScope: chartScope,
+                chartSorting: chartSorting,
+                chartTimelineType: chartTimelineType,
+                chartType: chartType,
+                chartX: chartX,
+                chartXPivot: chartXPivot,
+                chartYMulti: chartYMulti,
+                chartYSingle: chartYSingle,
+                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 -->
-
             <div class="clearfix"></div>
           </div>
         </div>
@@ -1309,88 +1396,10 @@
     <pre class="no-margin-bottom" data-bind="text: result.explanation"></pre>
   </script>
 
-  <script type="text/html" id="snippet-results${ suffix }">
-    <div class="snippet-row" data-bind="slideVisible: result.hasSomeResults">
-      <div class="result-left-bar">
-        <!-- ko template: { if: result.type() == 'table' && result.hasSomeResults(), name: 'snippet-result-controls${ suffix }' }--><!-- /ko -->
-      </div>
-      <div class="result-body">
-        <div class="row-fluid" data-bind="visible: result.type() != 'table'" style="display:none; max-height: 400px; margin: 10px 0; overflow-y: auto">
-          <!-- ko if: result.data().length != 0 && result.data()[0][1] != "" -->
-          <pre data-bind="text: result.data()[0][1]" class="no-margin-bottom"></pre>
-          <!-- /ko -->
-          <!-- ko ifnot: result.data().length != 0 && result.data()[0][1] != "" -->
-          <pre class="no-margin-bottom"><i class="fa fa-check muted"></i> ${ _("Done.") }</pre>
-          <!-- /ko -->
-          <!-- ko if: result.images().length != 0 -->
-          <ul class="unstyled results-images" data-bind="foreach: result.images()">
-            <li>
-              <img data-bind="attr: {'src': 'data:image/png;base64,' + $data}" class="margin-bottom-10"  alt="${ _('Result image') }"/>
-            </li>
-          </ul>
-          <!-- /ko -->
-        </div>
-
-        <div class="row-fluid table-results" data-bind="visible: result.type() === 'table'" style="display: none; max-height: 400px; min-height: 290px;">
-          <!-- ko if: showGrid -->
-            <!-- ko component: { name: 'result-grid', params: {
-              status: status,
-              isResultFullScreenMode: parentVm.isResultFullScreenMode,
-              editorMode: parentVm.editorMode,
-              isPresentationMode: parentNotebook.isPresentationMode,
-              hasMore: result.hasMore,
-              fetchResult: result.fetchMoreRows,
-              isResultSettingsVisible: isResultSettingsVisible,
-              isMetaFilterVisible: result.isMetaFilterVisible,
-              filteredMeta: result.filteredMeta,
-              filteredMetaChecked: result.filteredMetaChecked,
-              clickFilteredMetaCheck: result.clickFilteredMetaCheck,
-              filteredColumnCount: result.filteredColumnCount,
-              metaFilter: result.metaFilter,
-              autocompleteFromEntries: result.autocompleteFromEntries,
-              toggleResultColumn: toggleResultColumn,
-              scrollToResultColumn: scrollToResultColumn,
-              resultsKlass: resultsKlass,
-              meta: result.meta,
-              data: result.data
-            } } --><!-- /ko -->
-          <!-- /ko -->
-          <!-- ko if: showChart-->
-            <!-- ko component: { name: 'result-chart', params: {
-              data: result.data,
-              meta: result.meta,
-              id: id,
-              isResultSettingsVisible: isResultSettingsVisible,
-              chartLimit: chartLimit,
-              chartMapHeat: chartMapHeat,
-              chartMapLabel: chartMapLabel,
-              chartMapType: chartMapType,
-              chartScatterGroup: chartScatterGroup,
-              chartScatterSize: chartScatterSize,
-              chartScope: chartScope,
-              chartSorting: chartSorting,
-              chartTimelineType: chartTimelineType,
-              chartType: chartType,
-              chartX: chartX,
-              chartXPivot: chartXPivot,
-              chartYMulti: chartYMulti,
-              chartYSingle: chartYSingle,
-              cleanedMeta: result.cleanedMeta,
-              cleanedDateTimeMeta: result.cleanedDateTimeMeta,
-              cleanedNumericMeta: result.cleanedNumericMeta
-            } } --><!-- /ko -->
-          <!-- /ko -->
-        </div>
-      </div>
-    </div>
-  </script>
-
-
   <script type="text/html" id="text-snippet-body${ suffix }">
     <div data-bind="attr: {'id': 'editor_' + id()}, html: statement_raw, value: statement_raw, medium: {}" data-placeHolder="${ _('Type your text here, select some text to format it') }" class="text-snippet"></div>
   </script>
 
-
   <script type="text/html" id="markdown-snippet-body${ suffix }">
     <!-- ko ifnot: $root.isPresentationMode() -->
     <div class="row-fluid">
@@ -1642,78 +1651,6 @@
     </div>
   </script>
 
-  <script type="text/html" id="snippet-result-controls${ suffix }">
-    <div class="snippet-actions" style="opacity:1">
-      <div style="margin-top:25px;">
-        <a class="snippet-side-btn" href="javascript: void(0)" data-bind="click: function() { $data.showGrid(true); huePubSub.publish('redraw.fixed.headers'); huePubSub.publish('table.extender.redraw'); }, css: {'active': $data.showGrid}" title="${ _('Grid') }">
-          <i class="fa fa-fw fa-th"></i>
-        </a>
-      </div>
-
-      <div class="dropdown">
-        <a class="snippet-side-btn" style="padding-right:0" href="javascript: void(0)" data-bind="css: {'active': $data.showChart }, click: function() { $data.showChart(true); }" >
-          <i class="hcha fa-fw hcha-bar-chart" data-bind="visible: chartType() == window.HUE_CHARTS.TYPES.BARCHART" title="${ _('Bars') }"></i>
-          <i class="hcha fa-fw hcha-timeline-chart" data-bind="visible: chartType() == window.HUE_CHARTS.TYPES.TIMELINECHART" title="${ _('Time') }"></i>
-          <i class="hcha fa-fw hcha-pie-chart" data-bind="visible: chartType() == window.HUE_CHARTS.TYPES.PIECHART" title="${ _('Pie') }"></i>
-          <i class="fa fa-fw fa-dot-circle-o" data-bind="visible: chartType() == window.HUE_CHARTS.TYPES.SCATTERCHART" title="${ _('Scatter') }"></i>
-          <i class="fa fa-fw fa-map-marker" data-bind="visible: chartType() == window.HUE_CHARTS.TYPES.MAP" title="${ _('Marker Map') }"></i>
-          <i class="hcha fa-fw hcha-map-chart" data-bind="visible: chartType() == window.HUE_CHARTS.TYPES.GRADIENTMAP" title="${ _('Gradient Map') }"></i>
-        </a>
-        <a class="dropdown-toggle snippet-side-btn" style="padding:0" data-toggle="dropdown" href="javascript: void(0)" data-bind="css: {'active': $data.showChart}">
-          <i class="fa fa-caret-down"></i>
-        </a>
-
-        <ul class="dropdown-menu less-padding">
-          <li>
-            <a href="javascript:void(0)" data-bind="css: {'active': chartType() == window.HUE_CHARTS.TYPES.BARCHART}, click: function(){ $data.showChart(true); chartType(window.HUE_CHARTS.TYPES.BARCHART); }">
-              <i class="hcha hcha-bar-chart"></i> ${_('Bars')}
-            </a>
-          </li>
-          <li data-bind="visible: result.cleanedDateTimeMeta().length > 0">
-            <a href="javascript:void(0)" data-bind="css: {'active': chartType() == window.HUE_CHARTS.TYPES.TIMELINECHART}, click: function(){ $data.showChart(true); chartType(window.HUE_CHARTS.TYPES.TIMELINECHART); }">
-              <i class="hcha hcha-timeline-chart"></i> ${_('Time')}
-            </a>
-          </li>
-          <li>
-            <a href="javascript:void(0)" data-bind="css: {'active': chartType() == window.HUE_CHARTS.TYPES.PIECHART}, click: function(){ $data.showChart(true); chartType(window.HUE_CHARTS.TYPES.PIECHART); }">
-              <i class="hcha hcha-pie-chart"></i> ${_('Pie')}
-            </a>
-          </li>
-          <li>
-            <a href="javascript:void(0)" data-bind="css: {'active': chartType() == window.HUE_CHARTS.TYPES.SCATTERCHART}, click: function(){ $data.showChart(true); chartType(window.HUE_CHARTS.TYPES.SCATTERCHART); }">
-              <i class="fa fa-fw fa-dot-circle-o chart-icon"></i> ${_('Scatter')}
-            </a>
-          </li>
-          <li>
-            <a href="javascript:void(0)" data-bind="css: {'active': chartType() == window.HUE_CHARTS.TYPES.MAP}, click: function(){ $data.showChart(true); chartType(window.HUE_CHARTS.TYPES.MAP); }">
-              <i class="fa fa-fw fa-map-marker chart-icon"></i> ${_('Marker Map')}
-            </a>
-          </li>
-          <li>
-            <a href="javascript:void(0)" data-bind="css: {'active': chartType() == window.HUE_CHARTS.TYPES.GRADIENTMAP}, click: function(){ $data.showChart(true); chartType(window.HUE_CHARTS.TYPES.GRADIENTMAP); }">
-              <i class="hcha hcha-map-chart"></i> ${_('Gradient Map')}
-            </a>
-          </li>
-        </ul>
-      </div>
-
-      <div>
-        <a class="snippet-side-btn" href="javascript:void(0)" data-bind="click: function(){ huePubSub.publish('chart.hard.reset'); isResultSettingsVisible(! isResultSettingsVisible()) }, css: { 'blue' : isResultSettingsVisible }" title="${ _('Columns') }">
-          <!-- ko if: isResultSettingsVisible() -->
-          <i class="fa fa-fw fa-chevron-left"></i>
-          <!-- /ko -->
-          <!-- ko ifnot: isResultSettingsVisible() -->
-          <i class="fa fa-fw fa-columns"></i>
-          <!-- /ko -->
-        </a>
-      </div>
-
-      % if conf.ENABLE_DOWNLOAD.get():
-        <div data-bind="component: { name: 'downloadSnippetResults', params: { gridSideBtn: false, snippet: $data, notebook: $parent } }" style="display:inline-block;"></div>
-      % endif
-    </div>
-  </script>
-
   <div class="ace-filechooser" style="display:none;">
     <div class="ace-filechooser-close">
       <a class="pointer" data-bind="click: function(){ $('.ace-filechooser').hide(); }"><i class="fa fa-times"></i></a>