vizro icon indicating copy to clipboard operation
vizro copied to clipboard

[Docs] Initial implementation of py.cafe into the docs

Open maxschulz-COL opened this issue 7 months ago • 3 comments

Description

  • Updates to install page to explain that you can work with Vizro without installing it
  • Updates to first tutorial page where it is shown in an iframe
  • Explore Vizro tutorial page where it's added to each code block to pass readers through. The final completely worked-up dashboard is also included.

Actions

  • [ ] There's a PR against the plugin to make the link to py.cafe more visible (bold text, maybe add an icon)

  • [ ] Where images are used in dashboard examples, we need to link to their locations with absolute URLs. We currently have them hard-coded to an assets folder but that doesn't work for py.cafe since everything is uploaded to projects in a single root folder. Some of the commentary around the example needs changing to accommodate the new link location too:

    • [ ] For explore-components.md I need to replace relative links to collections.svg and features.svg: where are these files?
    • [ ] For card-button.md I need to replace relative links to africa.svg and hypotheses.svg: where are they?
  • [ ] I don't think it works to put the iframe inside the tabbed code block. We could include the embed below perhaps, but I suggest we remove it except for the simplest case in the quickstart dashboard, which is OK.

  • [ ] The code links in figure.md "How to use figures" are hard to spot because there are some footnotes that come below them. There's possibly a better way to structure these notes, though I appreciate they only apply to the pydantic code so can't be placed below the entire block.

  • [ ] In navigation.md there are snippets of code in the examples except the first (see here) and I'm wondering if we should add an extra tab to these to share them as complete examples...or leave as an exercise for the reader?

  • [ ] I didn't make changes to assets.md code snippets because this relies on having access to the assets folder which doesn't work on py.cafe. Same for data.md which loads iris.csv but this could possibly be resolved by loading from an absolute URL if we store the file first.

  • [ ] Chain actions example on actions.md doesn't work here -- error in py.cafe: ModuleNotFoundError: You must install either openpyxl or xlsxwriter to export to xlsx format.

  • [ ] The above error also occurs in the first example in custom_actions.md

  • [ ] In custom_components.md there are line number highlights and expanders in the code example, see here which don't work with the mkdocs plugin

  • [ ] In custom_components.md there is an image needed for the carousel here

  • [ ] Final example on custom_figures doesn't look like the screenshot

Updates needed for screenshots:

  • [ ] Sunburst on pages.md is now blue throughout -- no red colour

Original POC description

This is a first POC of how we could integrate py.cafe into the docs. Atm the PR just contains two implementation version, but there will be more added later on:

  1. First tutorial page - simple iframe not even tabbed, just let the app with appropriate links speak for itself
  2. Explore Vizro tutorial (first code example) - as part of a tabbed view, using the hosted screenshot, and the app in different tabs

Other future options will be:

  • having also the code editor embedded
  • having the code displayed from a single source

Screenshot

Notice

  • [x] 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.

maxschulz-COL avatar Jul 05 '24 15:07 maxschulz-COL