pyobservablejs 0.0.0rc1__tar.gz
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- pyobservablejs-0.0.0rc1/.gitignore +11 -0
- pyobservablejs-0.0.0rc1/LICENSE +21 -0
- pyobservablejs-0.0.0rc1/PKG-INFO +179 -0
- pyobservablejs-0.0.0rc1/README.md +154 -0
- pyobservablejs-0.0.0rc1/js/build.mjs +22 -0
- pyobservablejs-0.0.0rc1/js/css.d.ts +1 -0
- pyobservablejs-0.0.0rc1/js/graph.test.ts +121 -0
- pyobservablejs-0.0.0rc1/js/highlight.test.ts +18 -0
- pyobservablejs-0.0.0rc1/js/model/types.ts +31 -0
- pyobservablejs-0.0.0rc1/js/model/values.ts +21 -0
- pyobservablejs-0.0.0rc1/js/observable/graph.ts +89 -0
- pyobservablejs-0.0.0rc1/js/observable/types.ts +28 -0
- pyobservablejs-0.0.0rc1/js/runtime/attachments.ts +45 -0
- pyobservablejs-0.0.0rc1/js/runtime/definition.ts +48 -0
- pyobservablejs-0.0.0rc1/js/runtime/index.ts +72 -0
- pyobservablejs-0.0.0rc1/js/runtime/markdown.test.ts +64 -0
- pyobservablejs-0.0.0rc1/js/runtime/markdown.ts +130 -0
- pyobservablejs-0.0.0rc1/js/runtime/module-imports.ts +49 -0
- pyobservablejs-0.0.0rc1/js/runtime/types.ts +31 -0
- pyobservablejs-0.0.0rc1/js/runtime/view.ts +122 -0
- pyobservablejs-0.0.0rc1/js/runtime/wire.ts +165 -0
- pyobservablejs-0.0.0rc1/js/widget/abort.ts +38 -0
- pyobservablejs-0.0.0rc1/js/widget/cell-registry.ts +168 -0
- pyobservablejs-0.0.0rc1/js/widget/cell-renderer.ts +120 -0
- pyobservablejs-0.0.0rc1/js/widget/cell-value-sync.ts +156 -0
- pyobservablejs-0.0.0rc1/js/widget/composed-cells.ts +76 -0
- pyobservablejs-0.0.0rc1/js/widget/composition-host.ts +135 -0
- pyobservablejs-0.0.0rc1/js/widget/dom-contract.ts +41 -0
- pyobservablejs-0.0.0rc1/js/widget/dom.ts +51 -0
- pyobservablejs-0.0.0rc1/js/widget/highlight.ts +166 -0
- pyobservablejs-0.0.0rc1/js/widget/index.ts +35 -0
- pyobservablejs-0.0.0rc1/js/widget/notebook-model.ts +51 -0
- pyobservablejs-0.0.0rc1/js/widget/notebook-renderer.ts +134 -0
- pyobservablejs-0.0.0rc1/js/widget/notebook-value-sync.ts +84 -0
- pyobservablejs-0.0.0rc1/js/widget/runtime-variables-sync.ts +133 -0
- pyobservablejs-0.0.0rc1/js/widget/standalone-cell.ts +89 -0
- pyobservablejs-0.0.0rc1/js/widget/standalone-dependencies.ts +174 -0
- pyobservablejs-0.0.0rc1/js/widget/standalone-invalidation.ts +82 -0
- pyobservablejs-0.0.0rc1/js/widget/standalone-resolution.ts +131 -0
- pyobservablejs-0.0.0rc1/js/widget/styles.css +124 -0
- pyobservablejs-0.0.0rc1/js/widget/types.ts +49 -0
- pyobservablejs-0.0.0rc1/js/widget/view-state.ts +106 -0
- pyobservablejs-0.0.0rc1/js/widget-composition.test.ts +229 -0
- pyobservablejs-0.0.0rc1/js/widget-dom-test-utils.ts +230 -0
- pyobservablejs-0.0.0rc1/js/widget-markdown.test.ts +318 -0
- pyobservablejs-0.0.0rc1/js/widget-standalone-sync.test.ts +264 -0
- pyobservablejs-0.0.0rc1/js/widget-standalone.test.ts +906 -0
- pyobservablejs-0.0.0rc1/js/widget-test-utils.ts +148 -0
- pyobservablejs-0.0.0rc1/js/widget-variables-sync.test.ts +567 -0
- pyobservablejs-0.0.0rc1/js/widget.test.ts +310 -0
- pyobservablejs-0.0.0rc1/js/wire.test.ts +37 -0
- pyobservablejs-0.0.0rc1/package.json +36 -0
- pyobservablejs-0.0.0rc1/pnpm-lock.yaml +2983 -0
- pyobservablejs-0.0.0rc1/pnpm-workspace.yaml +2 -0
- pyobservablejs-0.0.0rc1/pyproject.toml +61 -0
- pyobservablejs-0.0.0rc1/src/pyobservablejs/__init__.py +21 -0
- pyobservablejs-0.0.0rc1/src/pyobservablejs/_files.py +556 -0
- pyobservablejs-0.0.0rc1/src/pyobservablejs/_graph.py +173 -0
- pyobservablejs-0.0.0rc1/src/pyobservablejs/_notebook.py +910 -0
- pyobservablejs-0.0.0rc1/src/pyobservablejs/_observable.py +173 -0
- pyobservablejs-0.0.0rc1/src/pyobservablejs/_serialize.py +72 -0
- pyobservablejs-0.0.0rc1/src/pyobservablejs/_variables.py +194 -0
- pyobservablejs-0.0.0rc1/src/pyobservablejs/py.typed +1 -0
- pyobservablejs-0.0.0rc1/src/pyobservablejs/static/widget.css +1 -0
- pyobservablejs-0.0.0rc1/src/pyobservablejs/static/widget.js +665 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Peter Ferenc Gyarmati
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
Metadata-Version: 2.4
|
|
2
|
+
Name: pyobservablejs
|
|
3
|
+
Version: 0.0.0rc1
|
|
4
|
+
Summary: Observable JavaScript notebooks as reusable Python widgets
|
|
5
|
+
Project-URL: Homepage, https://github.com/peterg-y/pyobservablejs
|
|
6
|
+
Project-URL: Source, https://github.com/peterg-y/pyobservablejs
|
|
7
|
+
Project-URL: Issues, https://github.com/peterg-y/pyobservablejs/issues
|
|
8
|
+
Author-email: Peter Ferenc Gyarmati <dev.petergy@gmail.com>
|
|
9
|
+
Maintainer-email: Peter Ferenc Gyarmati <dev.petergy@gmail.com>
|
|
10
|
+
License-Expression: MIT
|
|
11
|
+
License-File: LICENSE
|
|
12
|
+
Keywords: anywidget,jupyter,marimo,notebooks,observable,visualization
|
|
13
|
+
Classifier: License :: OSI Approved :: MIT License
|
|
14
|
+
Classifier: Programming Language :: Python :: 3
|
|
15
|
+
Classifier: Programming Language :: Python :: 3 :: Only
|
|
16
|
+
Classifier: Programming Language :: Python :: 3.10
|
|
17
|
+
Classifier: Programming Language :: Python :: 3.11
|
|
18
|
+
Classifier: Programming Language :: Python :: 3.12
|
|
19
|
+
Classifier: Programming Language :: Python :: 3.13
|
|
20
|
+
Classifier: Programming Language :: Python :: 3.14
|
|
21
|
+
Requires-Python: <3.15,>=3.10
|
|
22
|
+
Requires-Dist: anywidget>=0.11.0
|
|
23
|
+
Requires-Dist: traitlets>=5
|
|
24
|
+
Description-Content-Type: text/markdown
|
|
25
|
+
|
|
26
|
+
# pyobservablejs
|
|
27
|
+
|
|
28
|
+
Observable JavaScript notebooks as Python widgets.
|
|
29
|
+
|
|
30
|
+
`pyobservablejs` renders Observable JavaScript cells from Python and runs them with
|
|
31
|
+
Observable Notebook Kit in the browser. Python owns the notebook model, synced
|
|
32
|
+
OJS variables, and cell widgets. TypeScript owns Notebook Kit evaluation,
|
|
33
|
+
rendering, and runtime metadata.
|
|
34
|
+
|
|
35
|
+
```python
|
|
36
|
+
import pyobservablejs as obs
|
|
37
|
+
|
|
38
|
+
rows = [
|
|
39
|
+
{"letter": "A", "frequency": 0.0812},
|
|
40
|
+
{"letter": "B", "frequency": 0.0149},
|
|
41
|
+
{"letter": "C", "frequency": 0.0271},
|
|
42
|
+
{"letter": "D", "frequency": 0.0432},
|
|
43
|
+
{"letter": "E", "frequency": 0.1202},
|
|
44
|
+
]
|
|
45
|
+
|
|
46
|
+
obs.Notebook(
|
|
47
|
+
obs.md("# Letter frequencies"),
|
|
48
|
+
obs.ojs("""
|
|
49
|
+
Plot.plot({
|
|
50
|
+
height: 260,
|
|
51
|
+
marginLeft: 48,
|
|
52
|
+
y: {grid: true, label: "frequency"},
|
|
53
|
+
marks: [
|
|
54
|
+
Plot.ruleY([floor]),
|
|
55
|
+
Plot.barY(rows, {x: "letter", y: "frequency", tip: true})
|
|
56
|
+
]
|
|
57
|
+
})
|
|
58
|
+
"""),
|
|
59
|
+
variables={"rows": rows, "floor": 0.04},
|
|
60
|
+
)
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Install
|
|
64
|
+
|
|
65
|
+
```sh
|
|
66
|
+
pip install pyobservablejs
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
or:
|
|
70
|
+
|
|
71
|
+
```sh
|
|
72
|
+
uv add pyobservablejs
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
`pyobservablejs` supports Python 3.10 through 3.14.
|
|
76
|
+
|
|
77
|
+
## Notebook Model
|
|
78
|
+
|
|
79
|
+
- `obs.Notebook(...)` builds a Notebook Kit notebook from Python-authored cells.
|
|
80
|
+
- `variables={...}` sets OJS variables. A matching notebook variable is overridden.
|
|
81
|
+
- `notebook.update_variables(...)` pushes Python-side changes into the live OJS
|
|
82
|
+
runtime.
|
|
83
|
+
- `name="..."` gives Python a stable name for a cell.
|
|
84
|
+
- `notebook.values` and `notebook.cell("name").value` read browser-synchronized
|
|
85
|
+
outputs after rendering.
|
|
86
|
+
- `notebook.graph` exposes Notebook Kit-derived cell definitions, references, and
|
|
87
|
+
dependency edges.
|
|
88
|
+
|
|
89
|
+
Cell helpers keep the source mode explicit:
|
|
90
|
+
|
|
91
|
+
| Helper | Source mode |
|
|
92
|
+
| --------------- | --------------------- |
|
|
93
|
+
| `obs.ojs(...)` | Observable JavaScript |
|
|
94
|
+
| `obs.js(...)` | ES module JavaScript |
|
|
95
|
+
| `obs.md(...)` | Markdown |
|
|
96
|
+
| `obs.html(...)` | HTML |
|
|
97
|
+
|
|
98
|
+
```python
|
|
99
|
+
notebook = obs.Notebook(
|
|
100
|
+
obs.md("# Inputs"),
|
|
101
|
+
obs.ojs('viewof gain = Inputs.range([0, 11], {value: 5})', name="gain"),
|
|
102
|
+
obs.ojs("double = gain * 2", name="double"),
|
|
103
|
+
)
|
|
104
|
+
|
|
105
|
+
notebook.cell("gain")
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
After the notebook or cell widget has rendered in the browser, read the synced
|
|
109
|
+
value from a later Python cell:
|
|
110
|
+
|
|
111
|
+
```python
|
|
112
|
+
notebook.value("double")
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Source Notebooks
|
|
116
|
+
|
|
117
|
+
Load Notebook Kit HTML from a string:
|
|
118
|
+
|
|
119
|
+
```python
|
|
120
|
+
from pathlib import Path
|
|
121
|
+
|
|
122
|
+
path = Path("chart.html")
|
|
123
|
+
notebook = obs.Notebook.from_html(
|
|
124
|
+
path.read_text(encoding="utf-8"),
|
|
125
|
+
base_path=path.parent,
|
|
126
|
+
)
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
Local `FileAttachment(...)` references and relative JavaScript imports are
|
|
130
|
+
embedded by default so the widget can move between notebook frontends.
|
|
131
|
+
|
|
132
|
+
Load a public ObservableHQ notebook by URL, slug, or id:
|
|
133
|
+
|
|
134
|
+
```python
|
|
135
|
+
notebook = obs.Notebook.from_observablehq("https://observablehq.com/@mbostock/saving-svg")
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
Remote `FileAttachment(...)` entries are registered as URL-backed attachments,
|
|
139
|
+
so Plot notebooks and examples with uploaded files can render in the widget.
|
|
140
|
+
Pass `variables={...}` to override variables in a loaded notebook with Python values.
|
|
141
|
+
|
|
142
|
+
## Documentation
|
|
143
|
+
|
|
144
|
+
- [Quickstart](docs/quickstart.md)
|
|
145
|
+
- [Examples](docs/examples.md)
|
|
146
|
+
- [Tutorials](docs/tutorials/index.md)
|
|
147
|
+
- [Concepts](docs/concepts.md)
|
|
148
|
+
- [Architecture](docs/architecture.md)
|
|
149
|
+
- [Widget composition](docs/composition.md)
|
|
150
|
+
- [API reference](docs/api.md)
|
|
151
|
+
- [Development](docs/development.md)
|
|
152
|
+
|
|
153
|
+
## Built On
|
|
154
|
+
|
|
155
|
+
- [anywidget](https://anywidget.dev) and traitlets for widget composition and
|
|
156
|
+
synced state
|
|
157
|
+
- [Observable Notebook Kit](https://github.com/observablehq/notebook-kit) and
|
|
158
|
+
[@observablehq/runtime](https://github.com/observablehq/runtime) for cell
|
|
159
|
+
transpilation and browser execution
|
|
160
|
+
- [Shiki](https://shiki.style/) for pinned source highlighting
|
|
161
|
+
|
|
162
|
+
## Contributing
|
|
163
|
+
|
|
164
|
+
See [CONTRIBUTING.md](CONTRIBUTING.md) for local setup, workbench notebooks,
|
|
165
|
+
and the check commands used before sending changes for review.
|
|
166
|
+
|
|
167
|
+
## Acknowledgements
|
|
168
|
+
|
|
169
|
+
`pyobservablejs` builds on [Observable Notebook Kit](https://github.com/observablehq/notebook-kit)
|
|
170
|
+
and [@observablehq/runtime](https://github.com/observablehq/runtime).
|
|
171
|
+
[`pyobsplot`](https://github.com/juba/pyobsplot) informed the Python-to-OJS
|
|
172
|
+
variable API.
|
|
173
|
+
|
|
174
|
+
Thanks to [@manzt](https://github.com/manzt) (Trevor Manz) for the composable
|
|
175
|
+
anywidgets demo that helped shape the widget design.
|
|
176
|
+
|
|
177
|
+
## License
|
|
178
|
+
|
|
179
|
+
MIT
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
# pyobservablejs
|
|
2
|
+
|
|
3
|
+
Observable JavaScript notebooks as Python widgets.
|
|
4
|
+
|
|
5
|
+
`pyobservablejs` renders Observable JavaScript cells from Python and runs them with
|
|
6
|
+
Observable Notebook Kit in the browser. Python owns the notebook model, synced
|
|
7
|
+
OJS variables, and cell widgets. TypeScript owns Notebook Kit evaluation,
|
|
8
|
+
rendering, and runtime metadata.
|
|
9
|
+
|
|
10
|
+
```python
|
|
11
|
+
import pyobservablejs as obs
|
|
12
|
+
|
|
13
|
+
rows = [
|
|
14
|
+
{"letter": "A", "frequency": 0.0812},
|
|
15
|
+
{"letter": "B", "frequency": 0.0149},
|
|
16
|
+
{"letter": "C", "frequency": 0.0271},
|
|
17
|
+
{"letter": "D", "frequency": 0.0432},
|
|
18
|
+
{"letter": "E", "frequency": 0.1202},
|
|
19
|
+
]
|
|
20
|
+
|
|
21
|
+
obs.Notebook(
|
|
22
|
+
obs.md("# Letter frequencies"),
|
|
23
|
+
obs.ojs("""
|
|
24
|
+
Plot.plot({
|
|
25
|
+
height: 260,
|
|
26
|
+
marginLeft: 48,
|
|
27
|
+
y: {grid: true, label: "frequency"},
|
|
28
|
+
marks: [
|
|
29
|
+
Plot.ruleY([floor]),
|
|
30
|
+
Plot.barY(rows, {x: "letter", y: "frequency", tip: true})
|
|
31
|
+
]
|
|
32
|
+
})
|
|
33
|
+
"""),
|
|
34
|
+
variables={"rows": rows, "floor": 0.04},
|
|
35
|
+
)
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Install
|
|
39
|
+
|
|
40
|
+
```sh
|
|
41
|
+
pip install pyobservablejs
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
or:
|
|
45
|
+
|
|
46
|
+
```sh
|
|
47
|
+
uv add pyobservablejs
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
`pyobservablejs` supports Python 3.10 through 3.14.
|
|
51
|
+
|
|
52
|
+
## Notebook Model
|
|
53
|
+
|
|
54
|
+
- `obs.Notebook(...)` builds a Notebook Kit notebook from Python-authored cells.
|
|
55
|
+
- `variables={...}` sets OJS variables. A matching notebook variable is overridden.
|
|
56
|
+
- `notebook.update_variables(...)` pushes Python-side changes into the live OJS
|
|
57
|
+
runtime.
|
|
58
|
+
- `name="..."` gives Python a stable name for a cell.
|
|
59
|
+
- `notebook.values` and `notebook.cell("name").value` read browser-synchronized
|
|
60
|
+
outputs after rendering.
|
|
61
|
+
- `notebook.graph` exposes Notebook Kit-derived cell definitions, references, and
|
|
62
|
+
dependency edges.
|
|
63
|
+
|
|
64
|
+
Cell helpers keep the source mode explicit:
|
|
65
|
+
|
|
66
|
+
| Helper | Source mode |
|
|
67
|
+
| --------------- | --------------------- |
|
|
68
|
+
| `obs.ojs(...)` | Observable JavaScript |
|
|
69
|
+
| `obs.js(...)` | ES module JavaScript |
|
|
70
|
+
| `obs.md(...)` | Markdown |
|
|
71
|
+
| `obs.html(...)` | HTML |
|
|
72
|
+
|
|
73
|
+
```python
|
|
74
|
+
notebook = obs.Notebook(
|
|
75
|
+
obs.md("# Inputs"),
|
|
76
|
+
obs.ojs('viewof gain = Inputs.range([0, 11], {value: 5})', name="gain"),
|
|
77
|
+
obs.ojs("double = gain * 2", name="double"),
|
|
78
|
+
)
|
|
79
|
+
|
|
80
|
+
notebook.cell("gain")
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
After the notebook or cell widget has rendered in the browser, read the synced
|
|
84
|
+
value from a later Python cell:
|
|
85
|
+
|
|
86
|
+
```python
|
|
87
|
+
notebook.value("double")
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Source Notebooks
|
|
91
|
+
|
|
92
|
+
Load Notebook Kit HTML from a string:
|
|
93
|
+
|
|
94
|
+
```python
|
|
95
|
+
from pathlib import Path
|
|
96
|
+
|
|
97
|
+
path = Path("chart.html")
|
|
98
|
+
notebook = obs.Notebook.from_html(
|
|
99
|
+
path.read_text(encoding="utf-8"),
|
|
100
|
+
base_path=path.parent,
|
|
101
|
+
)
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
Local `FileAttachment(...)` references and relative JavaScript imports are
|
|
105
|
+
embedded by default so the widget can move between notebook frontends.
|
|
106
|
+
|
|
107
|
+
Load a public ObservableHQ notebook by URL, slug, or id:
|
|
108
|
+
|
|
109
|
+
```python
|
|
110
|
+
notebook = obs.Notebook.from_observablehq("https://observablehq.com/@mbostock/saving-svg")
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
Remote `FileAttachment(...)` entries are registered as URL-backed attachments,
|
|
114
|
+
so Plot notebooks and examples with uploaded files can render in the widget.
|
|
115
|
+
Pass `variables={...}` to override variables in a loaded notebook with Python values.
|
|
116
|
+
|
|
117
|
+
## Documentation
|
|
118
|
+
|
|
119
|
+
- [Quickstart](docs/quickstart.md)
|
|
120
|
+
- [Examples](docs/examples.md)
|
|
121
|
+
- [Tutorials](docs/tutorials/index.md)
|
|
122
|
+
- [Concepts](docs/concepts.md)
|
|
123
|
+
- [Architecture](docs/architecture.md)
|
|
124
|
+
- [Widget composition](docs/composition.md)
|
|
125
|
+
- [API reference](docs/api.md)
|
|
126
|
+
- [Development](docs/development.md)
|
|
127
|
+
|
|
128
|
+
## Built On
|
|
129
|
+
|
|
130
|
+
- [anywidget](https://anywidget.dev) and traitlets for widget composition and
|
|
131
|
+
synced state
|
|
132
|
+
- [Observable Notebook Kit](https://github.com/observablehq/notebook-kit) and
|
|
133
|
+
[@observablehq/runtime](https://github.com/observablehq/runtime) for cell
|
|
134
|
+
transpilation and browser execution
|
|
135
|
+
- [Shiki](https://shiki.style/) for pinned source highlighting
|
|
136
|
+
|
|
137
|
+
## Contributing
|
|
138
|
+
|
|
139
|
+
See [CONTRIBUTING.md](CONTRIBUTING.md) for local setup, workbench notebooks,
|
|
140
|
+
and the check commands used before sending changes for review.
|
|
141
|
+
|
|
142
|
+
## Acknowledgements
|
|
143
|
+
|
|
144
|
+
`pyobservablejs` builds on [Observable Notebook Kit](https://github.com/observablehq/notebook-kit)
|
|
145
|
+
and [@observablehq/runtime](https://github.com/observablehq/runtime).
|
|
146
|
+
[`pyobsplot`](https://github.com/juba/pyobsplot) informed the Python-to-OJS
|
|
147
|
+
variable API.
|
|
148
|
+
|
|
149
|
+
Thanks to [@manzt](https://github.com/manzt) (Trevor Manz) for the composable
|
|
150
|
+
anywidgets demo that helped shape the widget design.
|
|
151
|
+
|
|
152
|
+
## License
|
|
153
|
+
|
|
154
|
+
MIT
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import * as esbuild from "esbuild";
|
|
2
|
+
|
|
3
|
+
const args = new Set(process.argv.slice(2));
|
|
4
|
+
|
|
5
|
+
const options = {
|
|
6
|
+
assetNames: "widget",
|
|
7
|
+
bundle: true,
|
|
8
|
+
entryNames: "widget",
|
|
9
|
+
entryPoints: ["js/widget/index.ts"],
|
|
10
|
+
format: "esm",
|
|
11
|
+
minify: true,
|
|
12
|
+
outdir: "src/pyobservablejs/static",
|
|
13
|
+
sourcemap: args.has("--sourcemap=inline") ? "inline" : false,
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
if (args.has("--watch")) {
|
|
17
|
+
const context = await esbuild.context(options);
|
|
18
|
+
await context.watch();
|
|
19
|
+
console.log("Watching widget sources...");
|
|
20
|
+
} else {
|
|
21
|
+
await esbuild.build(options);
|
|
22
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
declare module "*.css";
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
// @vitest-environment jsdom
|
|
2
|
+
|
|
3
|
+
import { toNotebook } from "@observablehq/notebook-kit";
|
|
4
|
+
import { describe, expect, test } from "vitest";
|
|
5
|
+
import { createNotebookGraph } from "./observable/graph";
|
|
6
|
+
|
|
7
|
+
describe("notebook graph metadata", () => {
|
|
8
|
+
test("uses Notebook Kit transpile metadata for references, outputs, and edges", () => {
|
|
9
|
+
const notebook = toNotebook({
|
|
10
|
+
cells: [
|
|
11
|
+
{ id: 1, mode: "ojs", value: "a = 1" },
|
|
12
|
+
{ id: 2, mode: "ojs", value: "b = a + rows.length" },
|
|
13
|
+
{ id: 3, mode: "ojs", value: "viewof gain = Inputs.range([0, 10])" },
|
|
14
|
+
{ id: 4, mode: "ojs", value: "gain * b" },
|
|
15
|
+
],
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
const graph = createNotebookGraph(notebook, ["a", "b", "gain", "readout"]);
|
|
19
|
+
|
|
20
|
+
expect(graph.cells.map((cell) => cell.defines)).toEqual([["a"], ["b"], ["gain"], []]);
|
|
21
|
+
expectMembers(graph.cells[1]?.references, ["a", "rows"]);
|
|
22
|
+
expect(graph.cells[2]?.output).toBe("viewof$gain");
|
|
23
|
+
expect(graph.cells[2]?.runtime_outputs).toEqual(["viewof$gain"]);
|
|
24
|
+
expect(graph.cells[2]?.autoview).toBe(true);
|
|
25
|
+
expect(graph.edges).toHaveLength(3);
|
|
26
|
+
expect(graph.edges).toContainEqual({ from: 1, to: 2, variable: "a" });
|
|
27
|
+
expect(graph.edges).toContainEqual({ from: 3, to: 4, variable: "gain" });
|
|
28
|
+
expect(graph.edges).toContainEqual({ from: 2, to: 4, variable: "b" });
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
test("preserves raw JS declarations separately from visible variables", () => {
|
|
32
|
+
const notebook = toNotebook({
|
|
33
|
+
cells: [{ id: 1, mode: "js", value: "const x = 1;\nconst y = 2;" }],
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
const graph = createNotebookGraph(notebook);
|
|
37
|
+
|
|
38
|
+
expectMembers(graph.cells[0]?.defines, ["x", "y"]);
|
|
39
|
+
expectMembers(graph.cells[0]?.outputs, ["x", "y"]);
|
|
40
|
+
expectMembers(graph.cells[0]?.runtime_outputs, ["x", "y"]);
|
|
41
|
+
expect(graph.cells[0]?.output).toBe(null);
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
test("records mutable aliases used by Notebook Kit references", () => {
|
|
45
|
+
const notebook = toNotebook({
|
|
46
|
+
cells: [
|
|
47
|
+
{ id: 1, mode: "ojs", value: "mutable count = 0" },
|
|
48
|
+
{ id: 2, mode: "ojs", value: "count + 1" },
|
|
49
|
+
{ id: 3, mode: "ojs", value: "mutable count" },
|
|
50
|
+
],
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
const graph = createNotebookGraph(notebook);
|
|
54
|
+
|
|
55
|
+
expect(graph.cells[0]?.defines).toEqual(["count"]);
|
|
56
|
+
expect(graph.cells[0]?.output).toBe("mutable count");
|
|
57
|
+
expectMembers(graph.cells[0]?.runtime_outputs, ["mutable count", "mutable$count"]);
|
|
58
|
+
expect(graph.cells[0]?.automutable).toBe(true);
|
|
59
|
+
expect(graph.edges).toHaveLength(2);
|
|
60
|
+
expect(graph.edges).toContainEqual({ from: 1, to: 2, variable: "count" });
|
|
61
|
+
expect(graph.edges).toContainEqual({ from: 1, to: 3, variable: "mutable$count" });
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
test("uses Notebook Kit output metadata for module, template, SQL, and hidden cells", () => {
|
|
65
|
+
const notebook = toNotebook({
|
|
66
|
+
cells: [
|
|
67
|
+
{ id: 1, mode: "js", value: "const answer = 42;", output: "answer" },
|
|
68
|
+
{ id: 2, mode: "md", value: "# Title", output: "title" },
|
|
69
|
+
{ id: 3, mode: "html", value: "<b>Hi</b>", output: "node" },
|
|
70
|
+
{ id: 4, mode: "sql", value: "select 1 as x", output: "rows" },
|
|
71
|
+
{ id: 5, mode: "ojs", value: "hidden = answer + 1", hidden: true },
|
|
72
|
+
],
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
const graph = createNotebookGraph(notebook);
|
|
76
|
+
|
|
77
|
+
expect(graph.cells[0]?.defines).toEqual(["answer"]);
|
|
78
|
+
expect(graph.cells[0]?.outputs).toEqual(["answer"]);
|
|
79
|
+
expect(graph.cells[0]?.output).toBe("answer");
|
|
80
|
+
expect(graph.cells[1]?.defines).toEqual(["title"]);
|
|
81
|
+
expect(graph.cells[1]?.references).toEqual(["md"]);
|
|
82
|
+
expect(graph.cells[2]?.defines).toEqual(["node"]);
|
|
83
|
+
expect(graph.cells[2]?.references).toEqual(["html"]);
|
|
84
|
+
expect(graph.cells[3]?.defines).toEqual(["rows"]);
|
|
85
|
+
expect(graph.cells[3]?.output).toBe("viewof$rows");
|
|
86
|
+
expect(graph.cells[3]?.runtime_outputs).toEqual(["viewof$rows"]);
|
|
87
|
+
expect(graph.cells[3]?.autoview).toBe(true);
|
|
88
|
+
expect(graph.cells[4]?.defines).toEqual(["hidden"]);
|
|
89
|
+
expect(graph.cells[4]?.autodisplay).toBe(false);
|
|
90
|
+
expect(graph.edges).toContainEqual({ from: 1, to: 5, variable: "answer" });
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
test("keeps imported Observable variables as plural outputs", () => {
|
|
94
|
+
const notebook = toNotebook({
|
|
95
|
+
cells: [{ id: 1, mode: "ojs", value: 'import {foo} from "./foo.js"' }],
|
|
96
|
+
});
|
|
97
|
+
|
|
98
|
+
const graph = createNotebookGraph(notebook);
|
|
99
|
+
|
|
100
|
+
expect(graph.cells[0]?.defines).toEqual(["foo"]);
|
|
101
|
+
expect(graph.cells[0]?.outputs).toEqual(["foo"]);
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
test("keeps graph entries for cells with transpile errors", () => {
|
|
105
|
+
const notebook = toNotebook({
|
|
106
|
+
cells: [{ id: 1, mode: "ojs", value: "answer =" }],
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
const graph = createNotebookGraph(notebook);
|
|
110
|
+
|
|
111
|
+
expect(graph.cells[0]?.id).toBe(1);
|
|
112
|
+
expect(graph.cells[0]?.defines).toEqual([]);
|
|
113
|
+
expect(graph.cells[0]?.error).toEqual(expect.any(String));
|
|
114
|
+
expect(graph.cells[0]?.error).not.toBe("");
|
|
115
|
+
});
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
function expectMembers(actual: string[] | undefined, expected: string[]): void {
|
|
119
|
+
expect(actual).toHaveLength(expected.length);
|
|
120
|
+
expect(actual).toEqual(expect.arrayContaining(expected));
|
|
121
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// @vitest-environment jsdom
|
|
2
|
+
|
|
3
|
+
import { toCell } from "@observablehq/notebook-kit";
|
|
4
|
+
import { describe, expect, test } from "vitest";
|
|
5
|
+
import { SELECTORS } from "./widget/dom-contract";
|
|
6
|
+
import { renderSource } from "./widget/highlight";
|
|
7
|
+
|
|
8
|
+
describe("source rendering", () => {
|
|
9
|
+
test("preserves source text and accessible source labeling", () => {
|
|
10
|
+
const controller = new AbortController();
|
|
11
|
+
const panel = renderSource(toCell({ id: 1, mode: "ojs", value: "answer = 42" }), controller.signal);
|
|
12
|
+
const source = panel.querySelector<HTMLPreElement>(SELECTORS.source);
|
|
13
|
+
|
|
14
|
+
expect(source?.textContent).toBe("answer = 42");
|
|
15
|
+
expect(source?.getAttribute("aria-label")).toBe("OJS source");
|
|
16
|
+
controller.abort();
|
|
17
|
+
});
|
|
18
|
+
});
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { RenderProps } from "@anywidget/types";
|
|
2
|
+
import type { NotebookGraph } from "../observable/types";
|
|
3
|
+
import type { AttachmentInfo } from "../runtime/types";
|
|
4
|
+
|
|
5
|
+
// Trait names match src/pyobservablejs/_notebook.py, including underscored wire traits.
|
|
6
|
+
|
|
7
|
+
export type WidgetModel = {
|
|
8
|
+
role?: "notebook" | "cell";
|
|
9
|
+
_cell_id?: string;
|
|
10
|
+
name?: string;
|
|
11
|
+
source?: string;
|
|
12
|
+
spec?: Record<string, unknown>;
|
|
13
|
+
attachments?: Record<string, AttachmentInfo>;
|
|
14
|
+
base_url?: string;
|
|
15
|
+
_variables?: Record<string, unknown>;
|
|
16
|
+
_variable_update?: {
|
|
17
|
+
seq?: number;
|
|
18
|
+
kind?: "set" | "replace";
|
|
19
|
+
values?: Record<string, unknown>;
|
|
20
|
+
};
|
|
21
|
+
_graph?: NotebookGraph;
|
|
22
|
+
_values?: Record<string, unknown>;
|
|
23
|
+
_value_names?: string[];
|
|
24
|
+
options?: {
|
|
25
|
+
show_source?: boolean;
|
|
26
|
+
observable_markdown_compatibility?: boolean;
|
|
27
|
+
};
|
|
28
|
+
_cell_widgets?: string[];
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export type WidgetAnyModel = RenderProps<WidgetModel>["model"];
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { RenderProps } from "@anywidget/types";
|
|
2
|
+
import type { WidgetModel } from "./types";
|
|
3
|
+
|
|
4
|
+
export type AnyWidgetModel = RenderProps<WidgetModel>["model"];
|
|
5
|
+
|
|
6
|
+
export function readModelVariableNames(model: AnyWidgetModel): string[] {
|
|
7
|
+
const value = model.get("_value_names");
|
|
8
|
+
return Array.isArray(value) ? value.filter((name): name is string => typeof name === "string") : [];
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export function readModelVariables(model: AnyWidgetModel): Record<string, unknown> {
|
|
12
|
+
const value = model.get("_values");
|
|
13
|
+
if (value === null || typeof value !== "object" || Array.isArray(value)) return {};
|
|
14
|
+
return value;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export function readNotebookVariables(model: AnyWidgetModel): Record<string, unknown> {
|
|
18
|
+
const value = model.get("_variables");
|
|
19
|
+
if (value === null || typeof value !== "object" || Array.isArray(value)) return {};
|
|
20
|
+
return value;
|
|
21
|
+
}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { transpile, type Notebook } from "@observablehq/notebook-kit";
|
|
2
|
+
import type { CellGraph, NotebookGraph } from "./types";
|
|
3
|
+
|
|
4
|
+
type Definition = ReturnType<typeof transpile>;
|
|
5
|
+
|
|
6
|
+
export function createNotebookGraph(notebook: Notebook, names: readonly string[] = []): NotebookGraph {
|
|
7
|
+
const cells = notebook.cells.map((cell, index) => createCellGraph(cell, index, names[index] ?? ""));
|
|
8
|
+
const definitions = new Map<string, CellGraph[]>();
|
|
9
|
+
for (const cell of cells) {
|
|
10
|
+
for (const name of definedNames(cell)) {
|
|
11
|
+
const existing = definitions.get(name);
|
|
12
|
+
if (existing) existing.push(cell);
|
|
13
|
+
else definitions.set(name, [cell]);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const edges = cells.flatMap((target) =>
|
|
18
|
+
target.references.flatMap((name) =>
|
|
19
|
+
(definitions.get(name) ?? [])
|
|
20
|
+
.filter((source) => source.id !== target.id)
|
|
21
|
+
.map((source) => ({
|
|
22
|
+
from: source.id,
|
|
23
|
+
to: target.id,
|
|
24
|
+
variable: name,
|
|
25
|
+
})),
|
|
26
|
+
),
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
return { cells, edges };
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export function exposedVariableNames(definition: Definition): string[] {
|
|
33
|
+
if (definition.output) {
|
|
34
|
+
if (definition.autoview) return [unprefix(definition.output, "viewof$")];
|
|
35
|
+
if (definition.automutable) return [unprefix(definition.output, "mutable ")];
|
|
36
|
+
return [definition.output];
|
|
37
|
+
}
|
|
38
|
+
return definition.outputs ?? [];
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export function unprefix(value: string, prefix: string): string {
|
|
42
|
+
return value.startsWith(prefix) ? value.slice(prefix.length) : value;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
function createCellGraph(notebookCell: Notebook["cells"][number], index: number, name: string): CellGraph {
|
|
46
|
+
try {
|
|
47
|
+
const definition = transpile(notebookCell, { resolveLocalImports: true });
|
|
48
|
+
return {
|
|
49
|
+
id: notebookCell.id,
|
|
50
|
+
index,
|
|
51
|
+
name,
|
|
52
|
+
mode: notebookCell.mode,
|
|
53
|
+
defines: exposedVariableNames(definition),
|
|
54
|
+
references: definition.inputs ?? [],
|
|
55
|
+
output: definition.output ?? null,
|
|
56
|
+
outputs: definition.outputs ?? [],
|
|
57
|
+
runtime_outputs: runtimeOutputs(definition),
|
|
58
|
+
autodisplay: definition.autodisplay === true,
|
|
59
|
+
autoview: definition.autoview === true,
|
|
60
|
+
automutable: definition.automutable === true,
|
|
61
|
+
};
|
|
62
|
+
} catch (error) {
|
|
63
|
+
return {
|
|
64
|
+
id: notebookCell.id,
|
|
65
|
+
index,
|
|
66
|
+
name,
|
|
67
|
+
mode: notebookCell.mode,
|
|
68
|
+
defines: [],
|
|
69
|
+
references: [],
|
|
70
|
+
output: null,
|
|
71
|
+
outputs: [],
|
|
72
|
+
runtime_outputs: [],
|
|
73
|
+
autodisplay: false,
|
|
74
|
+
autoview: false,
|
|
75
|
+
automutable: false,
|
|
76
|
+
error: error instanceof Error ? `${error.name}: ${error.message}` : String(error),
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
function runtimeOutputs(definition: Definition): string[] {
|
|
82
|
+
if (!definition.output) return definition.outputs ?? [];
|
|
83
|
+
if (definition.automutable) return [definition.output, `mutable$${unprefix(definition.output, "mutable ")}`];
|
|
84
|
+
return [definition.output];
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
function definedNames(cell: CellGraph): string[] {
|
|
88
|
+
return Array.from(new Set([...cell.defines, ...cell.runtime_outputs]));
|
|
89
|
+
}
|