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

Add offline ChartWidget based on AnyWidget #3108

Closed
wants to merge 16 commits into from
Closed

Add offline ChartWidget based on AnyWidget #3108

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
6ab0ccc
Add initial anywidget
jonmmease Jul 15, 2023
246e102
Fix mypy error
jonmmease Jul 16, 2023
99a5da2
Add watch task
jonmmease Jul 20, 2023
b5657b7
Input Altair Chart, traitlets for selections and params
jonmmease Jul 20, 2023
8359e18
black / ruff
jonmmease Jul 20, 2023
15937cf
Clean up representation of point selections
jonmmease Jul 20, 2023
134248b
mypy
jonmmease Jul 20, 2023
b44d4a7
Remove widget build
jonmmease Jul 21, 2023
24c2427
Build widget with hatch_jupyter_builder
jonmmease Jul 21, 2023
ef0e833
simplify watch, add inline source maps
jonmmease Jul 21, 2023
7f25f3d
Update README instructions
jonmmease Jul 21, 2023
37bdb6a
artifact -> artifacts
jonmmease Jul 22, 2023
11a8e17
make on_change functions private
jonmmease Jul 22, 2023
eb417c9
Specialize selection dataclasses
jonmmease Jul 22, 2023
8984ccc
artifacts is a list
jonmmease Jul 22, 2023
7a633d7
Support set_param, use vegafusion-wasm's scoped utility functions
jonmmease Jul 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,4 +74,5 @@ Untitled*.ipynb
.vscode

# hatch, doc generation
data.json
data.json
/widget/node_modules/
11 changes: 11 additions & 0 deletions altair/widget/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import anywidget # type: ignore
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh interesting, are anywidget's types not working with mypy? maybe I forget a py.typed?

import traitlets
import pathlib

_here = pathlib.Path(__file__).parent


class ChartWidget(anywidget.AnyWidget):
_esm = _here / "static" / "index.js"
spec = traitlets.Unicode().tag(sync=True)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why isn't spec also a dict?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I think it could be. This was just copied from the blog post.

At this point I'm only really looking for feedback on the the project layout. The Python ChartWidget and JavaScript render functions are going to be rewritten.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense. I still feel this could live in ipyvega since there is nothing that is strictly Altair specific in the renderer but I don’t feel strong either way.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My hope is, but please correct me if I'm wrong here, that by incorporating anywidget it is possible to add a new template or upgrade the current existing html/js-templates in https://github.com/altair-viz/altair/blob/master/altair/utils/html.py.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make sense to deprecate ipyvega when this is ready then? I'd think so.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@manzt, what does it take to write an anywidget to a self-contained html file? I may be mis-remembering, but I thought that was something that you said was possible.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make sense to deprecate ipyvega when this is ready then? I'd think so.

Yeah, I think this could cover the same use-cases as the VegaWidget in ipyvega. I'm not sure if the mimerenderer portion of ipyvega is covered by Altair right now.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should be able to use use the ipywidgets.embed.embed_minimal_html:

chart_widget = ChartWidget(...)

from ipywidgets.embed import embed_minimal_html

embed_minimal_html("chart.html", views=[chart_widget], title="my chart")

But this doesn't seem to be working for any third-party widgets i've tested at the moment... I'll try to have a look and figure out what's going on.

selection = traitlets.Dict().tag(sync=True)
209 changes: 209 additions & 0 deletions altair/widget/static/index.js
View file
Open in desktop

Large diffs are not rendered by default.

11 changes: 11 additions & 0 deletions widget/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# ChartWidget build instructions
First, [install node.js 18](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

Then build the JavaScript portion of `ChartWidget` widget with:
```
cd widget/
npm install
npm run build
```

This will write a file to `altair/widget/static/index.js`, which is specified as the `_esm` property of the `ChartWidget` [AnyWidget](https://anywidget.dev/).
Loading