Browse Source

HUE-2891 [notebook] Integrate images from R

Enrico Berti 10 years ago
parent
commit
4e5fb200a8

+ 6 - 0
apps/spark/src/spark/models.py

@@ -377,10 +377,15 @@ class SparkApi(Api):
 
 
     if content['status'] == 'ok':
     if content['status'] == 'ok':
       data = content['data']
       data = content['data']
+      images = []
 
 
       try:
       try:
         table = data['application/vnd.livy.table.v1+json']
         table = data['application/vnd.livy.table.v1+json']
       except KeyError:
       except KeyError:
+        try:
+          images = [data['image/png']]
+        except KeyError:
+          images = []
         data = [[data['text/plain']]]
         data = [[data['text/plain']]]
         meta = [{'name': 'Header', 'type': 'STRING_TYPE', 'comment': ''}]
         meta = [{'name': 'Header', 'type': 'STRING_TYPE', 'comment': ''}]
         type = 'text'
         type = 'text'
@@ -396,6 +401,7 @@ class SparkApi(Api):
 
 
       return {
       return {
           'data': data,
           'data': data,
+          'images': images,
           'meta': meta,
           'meta': meta,
           'type': type
           'type': type
       }
       }

+ 6 - 0
apps/spark/src/spark/static/spark/css/spark.css

@@ -512,3 +512,9 @@ table.airy tr td {
   background: linear-gradient(to right, rgba(242, 222, 222, 1) 0%, rgba(255, 255, 255, 0) 100%);
   background: linear-gradient(to right, rgba(242, 222, 222, 1) 0%, rgba(255, 255, 255, 0) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2dede', endColorstr='#00ffffff', GradientType=1)
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2dede', endColorstr='#00ffffff', GradientType=1)
 }
 }
+
+.results-images {
+  border-left: 5px solid #DDD;
+  background-color: #f5f5f5;
+  padding: 5px;
+}

+ 5 - 1
apps/spark/src/spark/static/spark/js/spark.ko.js

@@ -16,7 +16,7 @@
 
 
 
 
 var SPARK_MAPPING = {
 var SPARK_MAPPING = {
-  ignore: ["ace"]
+  ignore: ["ace", "images"]
 }
 }
 
 
 var Result = function (snippet, result) {
 var Result = function (snippet, result) {
@@ -71,6 +71,8 @@ var Result = function (snippet, result) {
 
 
   self.data = ko.observableArray(typeof result.data != "undefined" && result.data != null ? result.data : []);
   self.data = ko.observableArray(typeof result.data != "undefined" && result.data != null ? result.data : []);
   self.data.extend({ rateLimit: 50 });
   self.data.extend({ rateLimit: 50 });
+  self.images = ko.observableArray(typeof result.images != "undefined" && result.images != null ? result.images : []);
+  self.images.extend({ rateLimit: 50 });
   self.logs = ko.observable('');
   self.logs = ko.observable('');
   self.logLines = 0;
   self.logLines = 0;
   self.errors = ko.observable('');
   self.errors = ko.observable('');
@@ -416,6 +418,8 @@ var Snippet = function (vm, notebook, snippet) {
           _tempData.push(row);
           _tempData.push(row);
         });
         });
 
 
+        self.result.images(data.result.images);
+
         $(document).trigger("renderData", {data: _tempData, snippet: self, initial: _initialIndex == 0});
         $(document).trigger("renderData", {data: _tempData, snippet: self, initial: _initialIndex == 0});
 
 
         if (!self.result.fetchedOnce()) {
         if (!self.result.fetchedOnce()) {

+ 10 - 2
apps/spark/src/spark/templates/editor_components.mako

@@ -474,12 +474,20 @@ from django.utils.translation import ugettext as _
 </script>
 </script>
 
 
 <script type="text/html" id="snippet-results">
 <script type="text/html" id="snippet-results">
-  <div class="row-fluid" data-bind="slideVisible: result.hasSomeResults() && result.type() != 'table'" style="display:none; max-height: 400px; margin: 10px 0;">
+  <div class="row-fluid" data-bind="slideVisible: result.hasSomeResults() && result.type() != 'table'" style="display:none; max-height: 400px; margin: 10px 0; overflow-y: auto">
     <!-- ko if: result.data().length != 0 -->
     <!-- ko if: result.data().length != 0 -->
-    <pre data-bind="text: result.data()[0][1]"></pre>
+    <pre data-bind="text: result.data()[0][1]" style="margin-bottom: 0"></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" />
+      </li>
+    </ul>
     <!-- /ko -->
     <!-- /ko -->
   </div>
   </div>
 
 
+
   <div class="row-fluid" data-bind="slideVisible: result.hasSomeResults() && result.type() == 'table' && showGrid()" style="display:none; max-height: 400px; margin-top: 4px">
   <div class="row-fluid" data-bind="slideVisible: result.hasSomeResults() && result.type() == 'table' && showGrid()" style="display:none; max-height: 400px; margin-top: 4px">
     <div data-bind="visible: isResultSettingsVisible, css:{'span2 result-settings': isResultSettingsVisible, 'hidden': ! isResultSettingsVisible()}">
     <div data-bind="visible: isResultSettingsVisible, css:{'span2 result-settings': isResultSettingsVisible, 'hidden': ! isResultSettingsVisible()}">
       <ul class="nav nav-list" style="border: none; background-color: #FFF">
       <ul class="nav nav-list" style="border: none; background-color: #FFF">