[Docs] colab notebook for chart

[lingyielia]

Description

Add colab integration to enable easy access to Vizro-AI.

This PR now is for chart creation notebook only

Click "View file" to use the colab link

Pending issues:

• ipython version conflicts between colab and vizro. vizro pinned ipython lower bound as suggested by snyk

TODOs before final merge:

• update the badge link to point to notebooks from main branch. (currently pointing to this feature branch for the sake of PR review)

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.

[antonymilne]

ipython version conflicts between colab and vizro. vizro pinned ipython lower bound as suggested by snyk

Definitely just remove the ipython lower bound. We should remove it anyway.

For the contextvars error, first step would be to get a working Dash app on colab. This might require a couple of hacks like they do on py.cafe, but worth checking the plotly forums in case someone has done it before also.

[lingyielia]

For the contextvars error, first step would be to get a working Dash app on colab. This might require a couple of hacks like they do on py.cafe, but worth checking the plotly forums in case someone has done it before also.

Putting all vizro related code in one cell works in terms of getting a dashboard build once without error. But if I just rerun the same cell (contains all vizro related code) the Lookup error happens again.

to replicate in a colab notebook

!pip install -U ipykernel
!pip install vizro

This cell can run successfully once. Rerun doesn't work

import vizro.plotly.express as px
from vizro import Vizro
import vizro.models as vm
from dash import Dash

df = px.data.iris()

Vizro._reset()

page = vm.Page(
    title="My first dashboard",
    components=[
        vm.Graph(id="scatter_chart", figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")),
        vm.Graph(id="hist_chart", figure=px.histogram(df, x="sepal_width", color="species")),
    ],
    controls=[
        vm.Filter(column="species", selector=vm.Dropdown(value=["ALL"])),
    ],
)

dashboard = vm.Dashboard(pages=[page])

Vizro().build(dashboard).run()

[maxschulz-COL]

When clicking the Colab link here

I get a message that I need to authorise this with github

Fetch for https://api.github.com/repos/mckinsey/vizro/contents/add_colab_link/vizro-ai/examples?per_page=100&ref=docs failed: {
  "message": "No commit found for the ref docs",
  "documentation_url": "https://docs.github.com/v3/repos/contents/",
  "status": "404"
}

CustomError: Fetch for https://api.github.com/repos/mckinsey/vizro/contents/add_colab_link/vizro-ai/examples?per_page=100&ref=docs failed: {
  "message": "No commit found for the ref docs",
  "documentation_url": "https://docs.github.com/v3/repos/contents/",
  "status": "404"
}

    at new PO (https://ssl.gstatic.com/colaboratory-static/common/dbbced415bf20bbe8ab63c44ff18b8db/external_binary_l10n__de.js:2444:68)
    at wa.program_ (https://ssl.gstatic.com/colaboratory-static/common/dbbced415bf20bbe8ab63c44ff18b8db/external_binary_l10n__de.js:2427:435)
    at ya (https://ssl.gstatic.com/colaboratory-static/common/dbbced415bf20bbe8ab63c44ff18b8db/external_binary_l10n__de.js:16:57)
    at wa.next_ (https://ssl.gstatic.com/colaboratory-static/common/dbbced415bf20bbe8ab63c44ff18b8db/external_binary_l10n__de.js:14:195)
    at kaa.next (https://ssl.gstatic.com/colaboratory-static/common/dbbced415bf20bbe8ab63c44ff18b8db/external_binary_l10n__de.js:17:48)
    at b (https://ssl.gstatic.com/colaboratory-static/common/dbbced415bf20bbe8ab63c44ff18b8db/external_binary_l10n__de.js:17:309)

I was able to get it working later by authorizing it to my github, then selecting it again from the menu, but this is maybe not the most ideal user journey. Did you encouter this? Ideally we would want people to directly land at the notebook.

[maxschulz-COL]

In the end I couldn't get it to work.. Got this but was never able to ressolve it

Any idea ( i triple checked the API keys etc)?

[maxschulz-COL]

Overall I think the experience in Colab shows why I disliked it in the past :) (which is no critique of this work!!), and we really should have a UI

Things I dislike and maybe we can fix it a little (with comments, explanations or slight adjustments):

• hard to determine what I need to do to refresh secrets, do I need to restart runtime or just re-run that cell (I tried both, but see below for what happened during latter)
• hard to determine how to "restart the whole thing", which in normal local notebooks would be to restart the Kernel (after restarting the runtime, the whole notebook did not work anymore
• when minimizing the disclaimer cell, all cells disappear, so we might want to put the cells below at the same header level
• running a cell vs clicking a button is confusing (as per above comment, I did not see the upload until i finally ran the cell)
• using widgets can also be confusing, because when I ran the whole notebook (which I assume many people will do) cell crash because previous input has not been updated yet
• initial access issues (as per above comment)

Actual notebook flow:

While I like the model dropdown, and data upload, I think the user journey is different for most cases, ie we should maybe tailor it a little more to the below:

• select model once
• upload data once
• then iterate over many prompts, ideally with just typing in prompt and clicking run, or enter or smth, then seeing the chart output immediately

[lingyielia]

When clicking the Colab link here

I get a message that I need to authorise this with github

Fetch for https://api.github.com/repos/mckinsey/vizro/contents/add_colab_link/vizro-ai/examples?per_page=100&ref=docs failed: {
  "message": "No commit found for the ref docs",
  "documentation_url": "https://docs.github.com/v3/repos/contents/",
  "status": "404"
}

CustomError: Fetch for https://api.github.com/repos/mckinsey/vizro/contents/add_colab_link/vizro-ai/examples?per_page=100&ref=docs failed: {
  "message": "No commit found for the ref docs",
  "documentation_url": "https://docs.github.com/v3/repos/contents/",
  "status": "404"
}

    at new PO (https://ssl.gstatic.com/colaboratory-static/common/dbbced415bf20bbe8ab63c44ff18b8db/external_binary_l10n__de.js:2444:68)
    at wa.program_ (https://ssl.gstatic.com/colaboratory-static/common/dbbced415bf20bbe8ab63c44ff18b8db/external_binary_l10n__de.js:2427:435)
    at ya (https://ssl.gstatic.com/colaboratory-static/common/dbbced415bf20bbe8ab63c44ff18b8db/external_binary_l10n__de.js:16:57)
    at wa.next_ (https://ssl.gstatic.com/colaboratory-static/common/dbbced415bf20bbe8ab63c44ff18b8db/external_binary_l10n__de.js:14:195)
    at kaa.next (https://ssl.gstatic.com/colaboratory-static/common/dbbced415bf20bbe8ab63c44ff18b8db/external_binary_l10n__de.js:17:48)
    at b (https://ssl.gstatic.com/colaboratory-static/common/dbbced415bf20bbe8ab63c44ff18b8db/external_binary_l10n__de.js:17:309)

I was able to get it working later by authorizing it to my github, then selecting it again from the menu, but this is maybe not the most ideal user journey. Did you encouter this? Ideally we would want people to directly land at the notebook.

Now I explored 3 approaches.

1. current approach, commit the nb to our repo, then this nb can be opened from colab (but seems need an auth step from user github)
2. I save the nb in google drive and share the link. This approach doesn't require any auth from users, but downside is very hard to maintain, also the sharable link contains a random string.
3. create nb in colab then push to github. Don't like this one, as it requires a github org level write access granted to the nb, which is not feasible.

Compared these 3, I prefer No.1 still. it's most secure and sustainable.

[lingyielia]

• then iterate over many prompts, ideally with just typing in prompt and clicking run, or enter or smth, then seeing the chart output immediately

Tried many methods but didn't find a feasible way to put run button (a ipywidgets) and figure.show() into once cell output, these 2 are conflicting, which causes "figure.show()" creates only an empty space in output.

In the end, I have to remove the run button. Please try it out one more time, see if the user experience improves a bit 🙏

[maxschulz-COL]

• then iterate over many prompts, ideally with just typing in prompt and clicking run, or enter or smth, then seeing the chart output immediately

Tried many methods but didn't find a feasible way to put run button (a ipywidgets) and figure.show() into once cell output, these 2 are conflicting, which causes "figure.show()" creates only an empty space in output.

In the end, I have to remove the run button. Please try it out one more time, see if the user experience improves a bit 🙏

I like it a lot more now! I think we are basically there - maybe we could add a note to the two cells that might be rerun (the data one and the create chart one) that hints users to click the run button.

But I think then that's all, good job!

[maxschulz-COL]

I was able to get it working later by authorizing it to my github, then selecting it again from the menu, but this is maybe not the most ideal user journey. Did you encouter this? Ideally we would want people to directly land at the notebook.

Now I explored 3 approaches.

OK understood, thanks for exploring. I think we should discard 3, but still think about the first two:

1. current approach, commit the nb to our repo, then this nb can be opened from colab (but seems need an auth step from user github)

What is a user does not have github, we should definitely assume that. Does this still work?

In addition, hosting it on github gives me the following warning when running

which says as much as

Warning: This notebook was not created by Google
This notebook is loaded from GitHub. It may request access to your data stored on Google or read data and credentials from other sessions. Check the source code before running this notebook.

Are we worried that this deters potential users?

2. I save the nb in google drive and share the link. This approach doesn't require any auth from users, but downside is very hard to maintain, also the sharable link contains a random string.

Tbh, I neither worry about the maintenance (when would be ever change it? and would those changes be significant if we do it?) And I am also not so worried about the random string, in the end, people reach this notebook via hyperlink. You mention security is better on the first one, what do you mean?

Maybe let's discuss in our meeting this afternoon?

[maxschulz-COL]

Awesome, this will facilitate more users for sure!

[maxschulz-COL]

🚀 Yay, now it's a much better user experience 🚀

[nadijagraca]

Looks good. 🚀