[Demo] Add pycafe link and plotly code to ViViVo

[antonymilne]

Description

• Add py.cafe link to edit code live for vizro code examples
• Add tab for pure plotly figure code as well as vizro

Still WIP with some code tidying needed (e.g. to sort imports). So far only the Magnitude pages have been done, so take a look at those (available immediately by clicking the link on the comment below!! 🚀 ). I'm raising for review already so you can take a look and see what you think before we implement changes across the whole dashboard.

Screenshot

Notice

• I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.

[github-actions]

View the example dashboards of the current commit live on PyCafe ☕ 🚀

Updated on: 2024-10-30 11:23:19 UTC
Commit: 9caf24b

Link: vizro-core/examples/dev/

Link: vizro-core/examples/scratch_dev

Link: vizro-core/examples/visual-vocabulary/

[antonymilne]

To be discussed with @huong-li-nguyen: should we do this styling for other buttons. e.g. the one on the 404 page looks a bit weird I think.

[petar-qb]

Happy to get @huong-li-nguyen opinion on these UI changes. The new functionalities are super super cool, but I still think that there's a room for improvement for the UI changes.

[petar-qb]

Also, did we consider making the code-clipboard-container always stretched to the bottom of the page so it's always aligned with the bottom of the chart?

[antonymilne]

I think @huong-li-nguyen spent a while playing around with adjusting the size and stretching the code clipboard container and decided the current solution is best, but let's check when she gets back.

What else do you think could be improved in terms of UI?

[petar-qb]

I can’t say for sure, but here are a few ideas we might consider:

1. Moving the button between the tab selection and clipboard icon, placing it logically outside the "copy-button" area.
2. Adding a small PyCafe icon within the button text (and possibly shortening the text if it improves clarity).
3. Including a link icon 🔗 (or a similar symbol) to indicate that clicking the button will open a new browser tab.

These are minor suggestions, so feel free to disregard if they don’t quite fit! 😄

[antonymilne]

All good points I think! I will unresolve this conversation after merging so we can revisit when @huong-li-nguyen is back. My ideal UI here would actually probably not be tabs at all but instead a toggle switch where it highlights/unhighlights the Vizro code as you toggle on/off. The current solution is really just meant as a relatively quick and easy addition to the UI that works well enough for now rather than a completely polished one.

1. I tried this and found it looked worse rather than better 😅
2. I did play around with a pycafe icon on the button for a while and couldn't get anything that worked well with our colors. I also tried using the coffee emoji which looks pretty similar but didn't like it much.
3. I've put in an "opens in new tab" icon and it looks good I think!
   

[petar-qb]

This is awesome 🚀 and probably something we should add to our dashboard-vizro-ai app as well (as we already discussed if I'm correct).

Also @maxschulz-COL thanks for the pycafe links in the PR comment as it saved my time for testing the changes 🥇

[petar-qb]

Happy to get @huong-li-nguyen opinion on these UI changes. The new functionalities are super super cool, but I still think that there's a room for improvement for the UI changes.

[petar-qb]

Also, did we consider making the code-clipboard-container always stretched to the bottom of the page so it's always aligned with the bottom of the chart?

[maxschulz-COL]

Approved from my side, very cool addition! Really like Petar's suggestion of preventing duplicate code if possible, but otherwise looks great.

Does the plotly figure maybe need a fig.show() statement? Or are we assuming people would use this in a notebook?

[lingyielia]

👍

[antonymilne]

Thanks for the reviews everyone! I've rolled out the changes across the dashboard and checked through everything. I'll give it one final check over and would then like to merge, update on HF, and update our post on plotly forums. @huong-li-nguyen and I can come back to some of the minor comments and questions raised in this PR when she's back.

I got halfway through de-deduplicating things and then remembered why I didn't do this before. The current structure is repetitive but makes it very explicit how the eventual app is built as a vizro app. While we still have a lot of pages unfinished and will hopefully get some other people to add to the dashboard I'd like to keep it explicit so that contributors "feel" like they're using Vizro. e.g. being able to copy and paste vm.Page(vm.Container...) and fill out the content of components is much closer to the usual vizro user experience compared to just calling make_page(...) which makes it a bit too mysterious/abstracted away for a new user. Eventually I would definitely rewrite it this way, but I don't want to do so yet in case we get more contributors.

@maxschulz-COL

Does the plotly figure maybe need a fig.show() statement? Or are we assuming people would use this in a notebook?

Yeah, I considered this and decided to not add it because we don't really know how the figure would be consumed, whether it would be in a notebook or in a Dash/other sort of dashboard or what.