You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by mo...@apache.org on 2016/11/09 18:06:02 UTC

zeppelin git commit: [ZEPPELIN-777] Math formula support

Repository: zeppelin
Updated Branches:
  refs/heads/master 24187b0a7 -> 19c07c2c8


[ZEPPELIN-777] Math formula support

### What is this PR for?
This PR adds support for formatting math formula formatting in %html display system using MathJax library.

### What type of PR is it?
Feature

### Todos
* [x] - Format math formula with MathJax library

### What is the Jira issue?
https://issues.apache.org/jira/browse/ZEPPELIN-777

### How should this be tested?
try run following codes.
```
%md
When \\(a \\ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
```
Note MathJax works better with `markdown.parser.type` property set `pegdown`, in markdown interpreter. With default markdown4j parser, some formula is not well displayed. (for example, ax^2) I think this will not be a big problem because of we'll remove markdown4j https://github.com/apache/zeppelin/pull/1594

```
%sh echo -e "%html \$\$a = b\$\$"
```

```
%spark println("%html $$b = c$$")
```

### Screenshots (if appropriate)
![image](https://cloud.githubusercontent.com/assets/1540981/20040864/3b69c540-a414-11e6-8f8a-fdf7ee1370a6.png)

### Questions:
* Does the licenses files need update? yes
* Is there breaking changes for older versions? no
* Does this needs documentation? yes

Author: Lee moon soo <mo...@apache.org>

Closes #1606 from Leemoonsoo/ZEPPELIN-777 and squashes the following commits:

af8e079 [Lee moon soo] Package MathJax resources
2afedde [Lee moon soo] Fix typo
dd02bec [Lee moon soo] Add doc for mathmetical expression
174d7ad [Lee moon soo] Add license
bb762c3 [Lee moon soo] Format formula using MathJax


Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/19c07c2c
Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/19c07c2c
Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/19c07c2c

Branch: refs/heads/master
Commit: 19c07c2c84741e06f570479f6538424dd44e3814
Parents: 24187b0
Author: Lee moon soo <mo...@apache.org>
Authored: Mon Nov 7 09:43:50 2016 -0800
Committer: Lee moon soo <mo...@apache.org>
Committed: Wed Nov 9 10:05:57 2016 -0800

----------------------------------------------------------------------
 .../zeppelin/img/screenshots/display_formula.png   | Bin 0 -> 79413 bytes
 docs/displaysystem/basicdisplaysystem.md           |   7 +++++++
 docs/interpreter/markdown.md                       |   6 ++++++
 zeppelin-distribution/src/bin_license/LICENSE      |   1 +
 zeppelin-web/.eslintrc                             |   1 +
 zeppelin-web/Gruntfile.js                          |   6 ++++++
 zeppelin-web/bower.json                            |   3 ++-
 .../app/notebook/paragraph/paragraph.controller.js |   9 ++++++---
 zeppelin-web/src/index.html                        |  15 +++++++++++++++
 zeppelin-web/test/karma.conf.js                    |   1 +
 10 files changed, 45 insertions(+), 4 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19c07c2c/docs/assets/themes/zeppelin/img/screenshots/display_formula.png
----------------------------------------------------------------------
diff --git a/docs/assets/themes/zeppelin/img/screenshots/display_formula.png b/docs/assets/themes/zeppelin/img/screenshots/display_formula.png
new file mode 100644
index 0000000..ed494f0
Binary files /dev/null and b/docs/assets/themes/zeppelin/img/screenshots/display_formula.png differ

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19c07c2c/docs/displaysystem/basicdisplaysystem.md
----------------------------------------------------------------------
diff --git a/docs/displaysystem/basicdisplaysystem.md b/docs/displaysystem/basicdisplaysystem.md
index 2ccb107..78f9b30 100644
--- a/docs/displaysystem/basicdisplaysystem.md
+++ b/docs/displaysystem/basicdisplaysystem.md
@@ -39,6 +39,13 @@ With `%html` directive, Zeppelin treats your output as HTML
 
 <img src="/assets/themes/zeppelin/img/screenshots/display_html.png" />
 
+### Mathematical expressions
+HTML display system automatically formats mathematical expression using [MathJax](https://www.mathjax.org/). You can use
+`\\( INLINE EXPRESSION \\)` and `$$ EXPRESSION $$` to format. For example
+
+<img src="/assets/themes/zeppelin/img/screenshots/display_formula.png" />
+
+
 ## Table
 
 If you have data that row separated by '\n' (newline) and column separated by '\t' (tab) with first row as header row, for example

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19c07c2c/docs/interpreter/markdown.md
----------------------------------------------------------------------
diff --git a/docs/interpreter/markdown.md b/docs/interpreter/markdown.md
index e5d33d3..257e146 100644
--- a/docs/interpreter/markdown.md
+++ b/docs/interpreter/markdown.md
@@ -53,6 +53,12 @@ The following example demonstrates the basic usage of Markdown in a Zeppelin not
 
 <img src="../assets/themes/zeppelin/img/docs-img/markdown-example.png" width="70%" />
 
+## Mathematical expression
+
+Markdown interpreter leverages %html display system internally. That means you can mix mathematical expressions with markdown syntax. For more information, please see [Mathematical Expression](../displaysystem/basicdisplaysystem.html#mathematical-expressions) section.
+
+
+
 ### Markdown4j Parser
 
 `markdown4j` parser provides [YUML](http://yuml.me/) and [Websequence](https://www.websequencediagrams.com/) extensions 

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19c07c2c/zeppelin-distribution/src/bin_license/LICENSE
----------------------------------------------------------------------
diff --git a/zeppelin-distribution/src/bin_license/LICENSE b/zeppelin-distribution/src/bin_license/LICENSE
index 2100610..82e2c6c 100644
--- a/zeppelin-distribution/src/bin_license/LICENSE
+++ b/zeppelin-distribution/src/bin_license/LICENSE
@@ -164,6 +164,7 @@ The following components are provided under Apache License.
     (Apache 2.0) tez-mapreduce (org.apache.tez:tez-mapreduce:0.7.0 - http://tez.apache.org)
     (Apache 2.0) tez-yarn-timeline-history-with-acls (org.apache.tez:tez-yarn-timeline-history-with-acls:0.7.0 - http://tez.apache.org)
     (Apache 2.0) jna (net.java.dev.jna:jna:4.1.0 https://github.com/java-native-access/jna)
+    (Apache 2.0) MathJax v2.7.0 - https://github.com/mathjax/MathJax/blob/2.7.0/LICENSE
 
 ========================================================================
 MIT licenses

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19c07c2c/zeppelin-web/.eslintrc
----------------------------------------------------------------------
diff --git a/zeppelin-web/.eslintrc b/zeppelin-web/.eslintrc
index a598b24..aa7eaad 100644
--- a/zeppelin-web/.eslintrc
+++ b/zeppelin-web/.eslintrc
@@ -14,6 +14,7 @@
     "nv": false,
     "ace": false,
     "d3": false,
+    "MathJax": false,
     "BootstrapDialog": false,
     "Handsontable": false,
     "moment": false,

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19c07c2c/zeppelin-web/Gruntfile.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/Gruntfile.js b/zeppelin-web/Gruntfile.js
index 34f7304..c7ed446 100644
--- a/zeppelin-web/Gruntfile.js
+++ b/zeppelin-web/Gruntfile.js
@@ -466,6 +466,12 @@ module.exports = function(grunt) {
           cwd: 'bower_components/jquery-ui/themes/base/images',
           src: '{,*/}*.{png,jpg,jpeg,gif}',
           dest: '<%= yeoman.dist %>/styles/images'
+        }, {
+          expand: true,
+          cwd: 'bower_components/MathJax',
+          src: [
+            'extensions/**', 'jax/**', 'fonts/**'],
+          dest: '<%= yeoman.dist %>'
         }]
       },
       styles: {

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19c07c2c/zeppelin-web/bower.json
----------------------------------------------------------------------
diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json
index 6a101b8..206680b 100644
--- a/zeppelin-web/bower.json
+++ b/zeppelin-web/bower.json
@@ -33,7 +33,8 @@
     "handsontable": "~0.24.2",
     "moment-duration-format": "^1.3.0",
     "select2": "^4.0.3",
-    "github-markdown-css": "^2.4.0"
+    "github-markdown-css": "^2.4.0",
+    "MathJax": "2.7.0"
   },
   "devDependencies": {
     "angular-mocks": "1.5.0"

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19c07c2c/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 09da944..d97f317 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -221,13 +221,16 @@
 
     $scope.renderHtml = function() {
       var retryRenderer = function() {
-        if (angular.element('#p' + $scope.paragraph.id + '_html').length) {
+        var htmlEl = angular.element('#p' + $scope.paragraph.id + '_html');
+        if (htmlEl.length) {
           try {
-            angular.element('#p' + $scope.paragraph.id + '_html').html($scope.paragraph.result.msg);
+            htmlEl.html($scope.paragraph.result.msg);
 
-            angular.element('#p' + $scope.paragraph.id + '_html').find('pre code').each(function(i, e) {
+            htmlEl.find('pre code').each(function(i, e) {
               hljs.highlightBlock(e);
             });
+            /*eslint new-cap: [2, {"capIsNewExceptions": ["MathJax.Hub.Queue"]}]*/
+            MathJax.Hub.Queue(['Typeset', MathJax.Hub, htmlEl[0]]);
           } catch (err) {
             console.log('HTML rendering error %o', err);
           }

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19c07c2c/zeppelin-web/src/index.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
index 0f2fb03..3208860 100644
--- a/zeppelin-web/src/index.html
+++ b/zeppelin-web/src/index.html
@@ -100,6 +100,20 @@ limitations under the License.
     <![endif]-->
     <!-- endbuild -->
 
+    <script type="text/x-mathjax-config">
+      MathJax.Hub.Config({
+        extensions: ["tex2jax.js"],
+        jax: ["input/TeX", "output/HTML-CSS"],
+        tex2jax: {
+          inlineMath: [ ["\\(","\\)"] ],
+          displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
+          processEscapes: true
+        },
+        "HTML-CSS": { availableFonts: ["TeX"] },
+        messageStyle: "none"
+      });
+    </script>
+
     <!-- build:js(.) scripts/vendor.js -->
     <!-- bower:js -->
     <script src="bower_components/jquery/dist/jquery.js"></script>
@@ -147,6 +161,7 @@ limitations under the License.
     <script src="bower_components/handsontable/dist/handsontable.js"></script>
     <script src="bower_components/moment-duration-format/lib/moment-duration-format.js"></script>
     <script src="bower_components/select2/dist/js/select2.js"></script>
+    <script src="bower_components/MathJax/MathJax.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:js({.tmp,src}) scripts/scripts.js -->

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/19c07c2c/zeppelin-web/test/karma.conf.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/test/karma.conf.js b/zeppelin-web/test/karma.conf.js
index cc5a63a..5067e5b 100644
--- a/zeppelin-web/test/karma.conf.js
+++ b/zeppelin-web/test/karma.conf.js
@@ -65,6 +65,7 @@ module.exports = function(config) {
       'bower_components/handsontable/dist/handsontable.js',
       'bower_components/moment-duration-format/lib/moment-duration-format.js',
       'bower_components/select2/dist/js/select2.js',
+      'bower_components/MathJax/MathJax.js',
       'bower_components/angular-mocks/angular-mocks.js',
       // endbower
       'src/app/app.js',