[ZEPPELIN-777] Math formula support #1606

Leemoonsoo · 2016-11-06T19:29:45Z

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

- 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 #1594

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

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

Screenshots (if appropriate)

Questions:

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

Leemoonsoo · 2016-11-06T20:22:46Z

cc @1ambda @AhyoungRyu

AhyoungRyu · 2016-11-07T01:48:37Z

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" />

+### Mathmetical expressions
+HTML display system automatically format mathmetical expression using [MathJax](https://www.mathjax.org/). You can use


format -> formats

AhyoungRyu · 2016-11-07T01:48:44Z

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%" />

+## Mathmetical expression
+
+Markdown interpreter leverage %html display system internally. That means you can mix mathmetical expressions with markdown syntax. For more information, please see [Mathmetical Expression](../displaysystem/basicdisplaysystem.html#mathmetical-expressions) section.


leverage -> leverages

AhyoungRyu · 2016-11-07T01:54:08Z

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" />

+### Mathmetical expressions


You mean mathematical? :)

anthonycorbacho · 2016-11-07T01:28:51Z

zeppelin-web/src/index.html

@@ -100,6 +100,20 @@
    <![endif]-->
    <!-- endbuild -->

+    <script type="text/x-mathjax-config">


Do you think we can move this part in a angular way like directive or something similar?

This is how MathJax is configured. And there's no needs to use this in anywhere else again. So i think it's better leave it as is.

Leemoonsoo · 2016-11-07T04:04:30Z

@AhyoungRyu @anthonycorbacho addressed your comments.

AhyoungRyu · 2016-11-07T11:56:45Z

Tested and it works well as expected 👍

tae-jun · 2016-11-07T12:02:22Z

So cooool! 👍

minahlee · 2016-11-07T14:48:21Z

It works with dev mode (grunt serve) but doesn't work if you build source with mvn. Am I missing something here?
Attaching screenshot:

rawkintrevo · 2016-11-07T15:17:59Z

@Leemoonsoo awesome work! so happy to see this coming through!

I am running into the same problem as @minahlee Thoughts on why mvn build wouldn't make this come out right?

Leemoonsoo · 2016-11-07T17:48:11Z

@minahlee @rawkintrevo I have fixed the problem. Now packaged one works as well.

rawkintrevo · 2016-11-08T16:58:42Z

@Leemoonsoo still not working for me, but it could be on my end- I have a hell of a time with git

Did a fetch /hard reset within the last hour.

$ git fetch leemoonsoo
$ git reset --hard leemoonsoo/zeppelin-777
$ mvn clean package -DskipTests
<build success>
$  bin/zeppelin-daemon.sh start

Cleared browser cache / history / app data.

Leemoonsoo · 2016-11-08T19:01:35Z

@rawkintrevo I clean cloned this PR, build and tried with browser cache clean, but couldn't reproduce the problem. Could you find zeppelin-web/dist/jax directory after the build?

rawkintrevo · 2016-11-08T22:39:18Z

lgtm. +1 to merge

again, awesome add @Leemoonsoo

Leemoonsoo · 2016-11-09T01:31:25Z

Thanks @rawkintrevo, @AhyoungRyu and @minahlee for the review.

Merge to master if there's no further comment.

### 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 apache#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 <moon@apache.org> Closes apache#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

giaosudau · 2016-11-21T05:19:10Z

I build a distribution from source code but it's failed because of missing /jax /extesions/
Did you guys test this case?
How to fix it?
Thanks.

tae-jun · 2016-11-21T10:38:45Z

@giaosudau Hi! Thanks for sharing the issue :)

Could you please share your building command line and error log?

I don't know why, but I guess MathJax library wasn't downloaded from bower.

giaosudau · 2016-11-21T10:44:25Z

@tae-jun
No error at building the source code.
But the error happens when I deploy with ZEPPELIN_SERVER_CONTEXT_PATH is /zeppelin/
What I saw at browser logs were the directory of a js library was wrong.

tae-jun · 2016-11-21T11:06:44Z

@giaosudau Thanks for the prompt response!

So you mean it doesn't happen without ZEPPELIN_SERVER_CONTEXT_PATH?
I've never used that option so I might not be helpful ^^;

But could you please check $ZEPPELIN_HOME/zeppelin-web/bower_components/MathJax/jax directory exists? To ensure that bower downloaded dependencies well 😄

giaosudau · 2016-11-21T11:14:32Z

@tae-jun
I checked there is a folder MathJax in the source I use to build but what I mean here is the URL calling jax lib was wrong. You can check the URL of jax in the image above.
=>>> It must be append /zeppelin/jax will be right and I already tested if I change url to this it works.
That mean configuration of this library was wrong and I already have the library included.

tae-jun · 2016-11-21T11:30:29Z

@giaosudau You clarified the issue! Would you like to create a JIRA ticket for that? :-) Then other developers will see the issue. Since this PR is already merged, so it seems to be handled on another PR. Thanks.

giaosudau · 2016-11-29T02:16:13Z

@tae-jun https://issues.apache.org/jira/browse/ZEPPELIN-1723

tae-jun · 2016-11-29T02:23:54Z

@giaosudau Thanks! 👍 I appreciate it 😄

### What is this PR for? Currently `display_formula.png` (added by #1606) is broken in here: http://zeppelin.apache.org/docs/0.7.0-SNAPSHOT/displaysystem/basicdisplaysystem.html#mathematical-expressions Fixed it by using relative path for the image. But have no idea why the other image files are not broken in that page. ### What type of PR is it? Documentation | Hot Fix ### Todos * [ ] - Task ### What is the Jira issue? N/A ### How should this be tested? It can't be reproduced using docs dev mode. Needs to be tested with below steps. ``` 1) build gh-pages (website) branch JEKYLL_ENV=production bundle exec jekyll build cp -r _site/ /tmp/zeppelin_website/ mkdir -p /tmp/zeppelin_website/docs/0.7.0-SNAPSHOT 2) build this patch (docs) and copy it under docs/0.7.0-SNAPSHOT of website cd docs bundle exec jekyll build --safe cp -r _site/ /tmp/zeppelin_website/0.7.0-SNAPSHOT/ 3) start httpserver and browse http://localhost:8000/docs/0.7.0-SNAPSHOT/ cd /tmp/zeppelin_website python -m SimpleHTTPServer ``` ### Screenshots (if appropriate) **Before** - In the official website <img width="938" alt="screen shot 2016-12-13 at 7 07 27 pm" src="https://cloud.githubusercontent.com/assets/10060731/21136061/72c230b6-c167-11e6-9805-12d6f11f3270.png"> ``` GET http://zeppelin.apache.org/assets/themes/zeppelin/img/screenshots/display_formula.png 404 (Not Found) ``` **After** - test locally using same with production path <img width="877" alt="screen shot 2016-12-13 at 7 09 42 pm" src="https://cloud.githubusercontent.com/assets/10060731/21136136/bbff660e-c167-11e6-9ed3-384e609886fe.png"> ### Questions: * Does the licenses files need update? * Is there breaking changes for older versions? * Does this needs documentation? Author: AhyoungRyu <fbdkdud93@hanmail.net> Closes #1752 from AhyoungRyu/fix-img-path and squashes the following commits: 4be330b [AhyoungRyu] Fix broken display_formula.png by using relative path

AhyoungRyu reviewed Nov 7, 2016

View reviewed changes

anthonycorbacho reviewed Nov 7, 2016

View reviewed changes

Leemoonsoo added 5 commits November 8, 2016 07:28

Format formula using MathJax

bb762c3

Add license

174d7ad

Add doc for mathmetical expression

dd02bec

Fix typo

2afedde

Package MathJax resources

af8e079

Leemoonsoo force-pushed the ZEPPELIN-777 branch from da87b9b to af8e079 Compare November 8, 2016 15:29

asfgit closed this in 19c07c2 Nov 9, 2016

AhyoungRyu mentioned this pull request Dec 13, 2016

[HOT FIX] Fix broken display_formula.png by using relative path #1752

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ZEPPELIN-777] Math formula support #1606

[ZEPPELIN-777] Math formula support #1606

Leemoonsoo commented Nov 6, 2016 •

edited

Leemoonsoo commented Nov 6, 2016

AhyoungRyu Nov 7, 2016

AhyoungRyu Nov 7, 2016

AhyoungRyu Nov 7, 2016

anthonycorbacho Nov 7, 2016

Leemoonsoo Nov 7, 2016 •

edited

Leemoonsoo commented Nov 7, 2016

AhyoungRyu commented Nov 7, 2016

tae-jun commented Nov 7, 2016

minahlee commented Nov 7, 2016 •

edited

rawkintrevo commented Nov 7, 2016

Leemoonsoo commented Nov 7, 2016 •

edited

rawkintrevo commented Nov 8, 2016

Leemoonsoo commented Nov 8, 2016 •

edited

rawkintrevo commented Nov 8, 2016

Leemoonsoo commented Nov 9, 2016 •

edited

giaosudau commented Nov 21, 2016

tae-jun commented Nov 21, 2016

giaosudau commented Nov 21, 2016 •

edited

tae-jun commented Nov 21, 2016

giaosudau commented Nov 21, 2016

tae-jun commented Nov 21, 2016

giaosudau commented Nov 29, 2016

tae-jun commented Nov 29, 2016

		@@ -39,6 +39,13 @@ With `%html` directive, Zeppelin treats your output as HTML

		<img src="/assets/themes/zeppelin/img/screenshots/display_html.png" />

		### Mathmetical expressions

[ZEPPELIN-777] Math formula support #1606

[ZEPPELIN-777] Math formula support #1606

Conversation

Leemoonsoo commented Nov 6, 2016 • edited

What is this PR for?

What type of PR is it?

Todos

What is the Jira issue?

How should this be tested?

Screenshots (if appropriate)

Questions:

Leemoonsoo commented Nov 6, 2016

AhyoungRyu Nov 7, 2016

Choose a reason for hiding this comment

AhyoungRyu Nov 7, 2016

Choose a reason for hiding this comment

AhyoungRyu Nov 7, 2016

Choose a reason for hiding this comment

anthonycorbacho Nov 7, 2016

Choose a reason for hiding this comment

Leemoonsoo Nov 7, 2016 • edited

Choose a reason for hiding this comment

Leemoonsoo commented Nov 7, 2016

AhyoungRyu commented Nov 7, 2016

tae-jun commented Nov 7, 2016

minahlee commented Nov 7, 2016 • edited

rawkintrevo commented Nov 7, 2016

Leemoonsoo commented Nov 7, 2016 • edited

rawkintrevo commented Nov 8, 2016

Leemoonsoo commented Nov 8, 2016 • edited

rawkintrevo commented Nov 8, 2016

Leemoonsoo commented Nov 9, 2016 • edited

giaosudau commented Nov 21, 2016

tae-jun commented Nov 21, 2016

giaosudau commented Nov 21, 2016 • edited

tae-jun commented Nov 21, 2016

giaosudau commented Nov 21, 2016

tae-jun commented Nov 21, 2016

giaosudau commented Nov 29, 2016

tae-jun commented Nov 29, 2016

Leemoonsoo commented Nov 6, 2016 •

edited

Leemoonsoo Nov 7, 2016 •

edited

minahlee commented Nov 7, 2016 •

edited

Leemoonsoo commented Nov 7, 2016 •

edited

Leemoonsoo commented Nov 8, 2016 •

edited

Leemoonsoo commented Nov 9, 2016 •

edited

giaosudau commented Nov 21, 2016 •

edited