Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(docs): In the skore cross validation example, the plotly graph is not full size in the rendering #594

Closed
Tracked by #588
MarieS-WiMLDS opened this issue Oct 23, 2024 · 7 comments · Fixed by #634
Closed
Tracked by #588

fix(docs): In the skore cross validation example, the plotly graph is not full size in the rendering #594

MarieS-WiMLDS opened this issue Oct 23, 2024 · 7 comments · Fixed by #634
Assignees
@augustebaum
Labels
bug Something isn't working documentation Improvements or additions to documentation

Comments

@MarieS-WiMLDS
Copy link
Contributor

No description provided.

@MarieS-WiMLDS MarieS-WiMLDS mentioned this issue Oct 23, 2024
Closed
7 tasks
@MarieS-WiMLDS MarieS-WiMLDS changed the title In the skore cross validation example, the plotly graph is not full size in the rendering docs: In the skore cross validation example, the plotly graph is not full size in the rendering Oct 23, 2024
@augustebaum augustebaum self-assigned this Oct 24, 2024
@augustebaum
Copy link
Contributor

I get the same behaviour in sphinx-gallery's documentation itself. It appears that this is a bug with either sphinx-gallery or plotly.

@augustebaum
Copy link
Contributor

augustebaum commented Oct 24, 2024 •
edited
Loading

Issues opened: sphinx-gallery/sphinx-gallery#1394; plotly/plotly.py#4828

@augustebaum augustebaum added bug Something isn't working documentation Improvements or additions to documentation labels Oct 24, 2024
@augustebaum
Copy link
Contributor

augustebaum commented Oct 24, 2024 •
edited
Loading

Related: when the Plotly figure is shown in the example, the resulting image can't be used as the thumbnail.

Using plotly images as thumbnails doesn't work yet, and the docs look like this as a result (note the big "BROKEN" image):
Image

Detailed explanation

TLDR: plotly is buggy and i opened an issue

Sphinx-gallery tells me to install orca in order to do this: see first few lines of https://sphinx-gallery.github.io/stable/auto_plotly_examples/plot_0_plotly.html.
But smarie/mkdocs-gallery#49 in mkdocs-gallery is also relevant and is more up to date.
In fact, I tried the legacy orca method, but orca is not in PyPI so it's a no-go.

The new methd is to use plotly's kaleido, but when I tried to build the docs I got this:
plotly/Kaleido#210

@augustebaum
Copy link
Contributor

I didn't expect to hit so many roadblocks. Our options (feel free to contribute more):

  • De-prioritize and wait for the issues to be solved, then try again
  • Instead take a screenshot of the resulting plot and use this, hoping it will be used automatically as the thumbnail
  • Try out alternatives to sphinx-gallery

To be completely honest, I don't think the thumbnails bring much to the docs.

@MarieS-WiMLDS @sylvaincom

@ayjayt
Copy link

ayjayt commented Oct 24, 2024

Related: plotly/Kaleido#209

@MarieS-WiMLDS
Copy link
Contributor Author

I vote for a mix of 1 & 2: use a screenshot while this issue is fixed. And I agree that the thumbnails do not provide huge value, changing sphinx-gallery is way too much work compared to just have a thumbnail.

@sylvaincom sylvaincom mentioned this issue Oct 28, 2024
Closed
5 tasks
@sylvaincom sylvaincom changed the title docs: In the skore cross validation example, the plotly graph is not full size in the rendering fix(docs): In the skore cross validation example, the plotly graph is not full size in the rendering Oct 28, 2024
@sylvaincom
Copy link
Contributor

If you just unzoom on the page it autosizes automatically

augustebaum added a commit that referenced this issue Oct 29, 2024
@augustebaum
fix(docs): Add screenshot of cross-validation plot
329bb52 
This is a quick fix to address #594.

In the end, I took a screenshot manually (by using the "Download plot as png" button of the Plotly widget) and displayed it with matplotlib.

Here are all the alternatives I considered, and what didn't work with them:
- Use SVG instead of PNG
	- For that, I'd need to use Plotly's `fig.write_image`, and the library that Plotly uses for this, Kaleido, is currently broken: plotly/Kaleido#210
- Export plotly figure to a file during the example and read it 
	- For that I also need Plotly's `fig.write_image`
- Use Pillow for displaying, instead of matplotlib (which is not really made for that)
	- Only matplotlib is supported by sphinx-gallery, the library that renders the examples
@augustebaum augustebaum linked a pull request Oct 29, 2024 that will close this issue
fix(docs): Add screenshot of cross-validation plot #634
Merged
@augustebaum augustebaum mentioned this issue Oct 29, 2024
Merged
augustebaum added a commit that referenced this issue Oct 29, 2024
@augustebaum
fix(docs): Add screenshot of cross-validation plot
b48f907 
This is a quick fix to address #594.

In the end, I took a screenshot manually (by using the "Download plot as png" button of the Plotly widget) and displayed it with matplotlib.

Here are all the alternatives I considered, and what didn't work with them:
- Use SVG instead of PNG
	- For that, I'd need to use Plotly's `fig.write_image`, and the library that Plotly uses for this, Kaleido, is currently broken: plotly/Kaleido#210
- Export plotly figure to a file during the example and read it 
	- For that I also need Plotly's `fig.write_image`
- Use Pillow for displaying, instead of matplotlib (which is not really made for that)
	- Only matplotlib is supported by sphinx-gallery, the library that renders the examples
augustebaum added a commit that referenced this issue Oct 29, 2024
@augustebaum
fix(docs): Add screenshot of cross-validation plot
2d2e02a 
This is a quick fix to address #594.

In the end, I took a screenshot manually (by using the "Download plot as png" button of the Plotly widget) and displayed it with matplotlib.

Here are all the alternatives I considered, and what didn't work with them:
- Use SVG instead of PNG
	- For that, I'd need to use Plotly's `fig.write_image`, and the library that Plotly uses for this, Kaleido, is currently broken: plotly/Kaleido#210
- Export plotly figure to a file during the example and read it
	- For that I also need Plotly's `fig.write_image`
- Use Pillow for displaying, instead of matplotlib (which is not really made for that)
	- Only matplotlib is supported by sphinx-gallery, the library that renders the examples
augustebaum added a commit that referenced this issue Oct 29, 2024
@augustebaum
fix(docs): Add screenshot of cross-validation plot
e170737 
This is a quick fix to address #594.

In the end, I took a screenshot manually (by using the "Download plot as png" button of the Plotly widget) and displayed it with matplotlib.

Here are all the alternatives I considered, and what didn't work with them:
- Use SVG instead of PNG
	- For that, I'd need to use Plotly's `fig.write_image`, and the library that Plotly uses for this, Kaleido, is currently broken: plotly/Kaleido#210
- Export plotly figure to a file during the example and read it
	- For that I also need Plotly's `fig.write_image`
- Use Pillow for displaying, instead of matplotlib (which is not really made for that)
	- Only matplotlib is supported by sphinx-gallery, the library that renders the examples
augustebaum added a commit that referenced this issue Oct 29, 2024
@augustebaum
fix(docs): Add screenshot of cross-validation plot (#634)
a29d842 
This is a quick fix to address #594.

In the end, I took a screenshot manually (by using the "Download plot as
png" button of the Plotly widget) and displayed it with matplotlib.

Here are all the alternatives I considered, and what didn't work with
them:
- Use SVG instead of PNG
- For that, I'd need to use Plotly's `fig.write_image`, and the library
that Plotly uses for this, Kaleido, is currently broken:
plotly/Kaleido#210
- Export plotly figure to a file during the example and read it 
	- For that I also need Plotly's `fig.write_image`
- Use Pillow for displaying, instead of matplotlib (which is not really
made for that)
- Only matplotlib is supported by sphinx-gallery, the library that
renders the examples
@sylvaincom sylvaincom mentioned this issue Oct 31, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@augustebaum augustebaum

Labels
bug Something isn't working documentation Improvements or additions to documentation
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(docs): Add screenshot of cross-validation plot probabl-ai/skore
4 participants
@ayjayt @sylvaincom @augustebaum @MarieS-WiMLDS