Hydrogen: How is the displayed figure size set in Atom/Hydrogen?

[dnowacki-usgs]

I'm not sure this is the right place to ask this question, but here goes.

I can't figure out how the displayed size of a pyplot figure in Hydrogen is determined. It seems like there is a maximum pixel area or something. Here are two example screenshots. Note that the widths of the two figures should be the same, but if I increase the height, the overall width is reduced (compare figure widths to the 80 character text width line). It's harder to tell, but the second figure is slightly taller than the first. What's going on? The overarching goal here is to get Atom/Hydrogen to display larger figures.

figsize=(12,8)

figsize=(12,10)

[lgeiger]

If I recall correctly we scale images to fit the screen (in CSS). Therefor max-width and max-height are set and the image is scaled down accordingly.

I'm open to change that behavior. What would be your desired behavior for the output bubble?

[dnowacki-usgs]

Thanks for the reply. I generally want the real estate of a large figure/image and don't mind if I have to scroll a bit. I guess I would prefer Hydrogen scale the image according to the dpi of the screen and the specified figsize. If I specify a larger figure size, I'd like for it to keep getting larger and not run into an upper limit.

[lgeiger]

@dnowacki-usgs Would you like to submit a PR for this? It should by mainly a CSS change.

[Earthson]

I've noticed the downscaling from #242, it's really strange behavior.

I think it should be configurable.

[lgeiger]

@Earthson You're very welcome to submit a PR. Feel free to ask any questions if you need help.

[Earthson]

@lgeiger I created a PR which remove all img style, is it OK?

https://github.com/nteract/hydrogen/pull/607

[Earthson]

scroll bar appear when figure size overflow, I think it is acceptable.

[dnowacki-usgs]

Thanks a bunch for the PR #607 @Earthson. This is certainly an improvement; scrolling is better than downscaling. 500px still doesn't seem tall enough (to me). Increasing the max-height on line 26 of hydrogen.less to, say, 700px does work, but more than that and you start to run into issues on smaller screens. I think something like 75vh could be the way to go here to keep it flexible on smaller screens. Thoughts?

[Earthson]

It seems user can customize style using "~/.atom/styles.less", eg.

.hydrogen.output-bubble {
  .bubble-output-container {
    max-height: 1000px !important;
  }
}

[lgeiger]

Yes, the user can customize it via a personal style sheet. Though we should definitely make this easier by cleaning up our CSS.

The relevant issue is here.

[ziyaotang]

Hello, I have the same question. It seems that I still cannot set the size of the image. Any improvement on this? Thanks!

[paul-grassl]

I'm also having trouble knowing how to customize the size of images in the inline output...R prints them very big, which is not practical.

I looked into the hydrogen.less sheet and also tried to add the code suggested by @Earthson above to my own style.less sheet but it didn't solve the problem. Any advice is appreciated, thanks!