tiby312 / poloto-project

MIT License
159 stars 10 forks source link

Add suport for evcxr. #208

Open baiguoname opened 1 year ago

baiguoname commented 1 year ago

evcxr is a crate for jupyter, I thought the combination of evcxr and beautiful poloto figure would have great powerful.

tiby312 commented 1 year ago

I haven't heard of it, but i was intrigued and looked into it. If I just render a plot to a string and get evcxr to render that output as html, it displays the svg. You can see the commands here:

https://github.com/tiby312/poloto-project/blob/master/poloto/test-evcxr.ipynb

EDIT: not sure why the svg doesnt display with githubs viewer. EDIT: the style tag is missing for some reason

baiguoname commented 1 year ago

Plotter has support for evcxr, this is the file: https://github.com/plotters-rs/plotters/blob/master/plotters/src/evcxr.rs. Maybe it can give you some clues.

baiguoname commented 1 year ago

I changed the last cell from the notebook to this, then everything works well: println!("EVCXR_BEGIN_CONTENT text/html\n<div style=\"\">{}</div>\nEVCXR_END_CONTENT", res); image

tiby312 commented 1 year ago

Does it work with the github viewer though? It seems to have the same problem. The github viewer seems to be removing the style tag. I think it is a sanitizing thing.

baiguoname commented 1 year ago

Sorry, I am new to github, I don't know how to run jupyter in github for now.

tiby312 commented 1 year ago

These sounds like similar problem: https://github.com/jupyter/notebook/issues/6109 https://github.com/orgs/community/discussions/12355 Still investigating

If you push a ipynb file to github and then click on the file, it should display it.

tiby312 commented 1 year ago

Rendering Notebooks on GitHub https://blog.jupyter.org/rendering-notebooks-on-github-f7ac8736d686

That article says something about custom css not supported by GitHub for security reason.

EDIT: works with nbviewer just not github: https://nbviewer.org/github/tiby312/poloto-project/blob/master/poloto/test-evcxr.ipynb

tiby312 commented 1 year ago

If I manually edit the DOM to add back the style tag via inspecting the element, it works.

Screenshot 2023-06-01 2 52 36 PM

tiby312 commented 1 year ago

This link mentions it works if you use the img tag https://github.com/jupyterlab/jupyterlab/issues/10464

EDIT: nvm still doesnt work with img tag. Github just always removes the style tag.

tiby312 commented 1 year ago

Got it to work in github viewer by inlining the css.

https://github.com/tiby312/poloto-project/blob/master/poloto-evcxr/example.ipynb

baiguoname commented 1 year ago

evcxr has a default way to show the output, like this: image So, if I can implement MyEvcxrDisplay to Stage4 like this image then I don't have to type poloto_evcxr::evcxr_display_svg and show the picture.

tiby312 commented 1 year ago

Good idea I'll do that next

tiby312 commented 1 year ago

Unfortunately evcxr_display requires a borrow of self when the Stage4 render functions need to move self. However, I did add a dedicated function that makes it a little more egronomic.

https://github.com/tiby312/poloto-project/blob/master/poloto-evcxr/example.ipynb

tiby312 commented 1 year ago

I got rid of the inline css. I instead updated poloto to atleast show something even if there is no css. So in github viewer it just shows a rudimentary graph. Then you can view it with css with an external viewer.

EDIT: found https://github.com/github/markup/issues/270