8000 examples inspector plugin (#1040) · DindyalM/pyscriptErrors@c0f36aa · GitHub
[go: up one dir, main page]
Skip to content

Commit c0f36aa

Browse files
fpligerFabioRosado
fpliger
and
FabioRosado
authored
examples inspector plugin (pyscript#1040)
* replace unnecessary elements from hello_world example and replace with py-tutor tag * add py_tutor plugin * port altair example * add code for more granular tutor mode * add support for including modules source in pytutor * remove js dependencies in hello_world * put antigravity on a diet ;) * use py-tutor on antigravity example * use py-tutor on d3 example * use py-tutor on bokeh example * use py-tutor on bokeh_interactive example * fix issue when module_paths is undefined * remove prism js dependency leftovers * ooops, really remove prism js dependency leftovers * port follium example to pytutor * port pymarkdown and matplotlib example to pytutor * port message_passing and numpy_convas_fractals examples to pytutor * port the panel complex examples to pytutor * port the panel complex examples to pytutor * port last examples to py-tutor * remove prism * remore most debugging logs and replace log with info * add new d3.py file * add comments to connect method * clean pyscript class from logs * revert class pySrc attribute * add check_tutor_generated_code to test code inspector plugin in examples * add doctsting to PyTutor connect * add check for tutor code inspection on all examples * Update pyscriptjs/src/plugins/python/py_tutor.py fix template indentation Co-authored-by: Fábio Rosado <fabioglrosado@gmail.com> * Update examples/todo-pylist.html fix typo (stray = ) Co-authored-by: Fábio Rosado <fabioglrosado@gmail.com> * fix pymarkdown example Co-authored-by: Fabio Pliger <fpliger@anaconda.com> Co-authored-by: Fábio Rosado <fabioglrosado@gmail.com>
1 parent d4120d2 commit c0f36aa

24 files changed

+1143
-2603
lines changed

‎examples/altair.html

Lines changed: 49 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55
<link rel="icon" type="image/x-icon" href="./favicon.png">
66
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
77
<link rel="stylesheet" href="./assets/css/examples.css" />
8-
<link rel="stylesheet" href="./assets/prism/prism.css" />
98
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
10-
<script defer src="./assets/prism/prism.js"></script>
119
</head>
1210
<body>
1311
<nav class="navbar" style="background-color: #000000;">
@@ -20,135 +18,61 @@
2018
</nav>
2119
<section class="pyscript">
2220
<div id="altair"></div>
23-
<py-config>
24-
packages = [
25-
"altair",
26-
"pandas",
27-
"vega_datasets"
28-
]
29-
</py-config>
30-
<py-script>
31-
import altair as alt
32-
from vega_datasets import data
21+
<py-tutor>
22+
<py-config>
23+
packages = [
24+
"altair",
25+
"pandas",
26+
"vega_datasets"
27+
]
28+
plugins = [
29+
"../build/plugins/python/py_tutor.py"
30+
]
31+
</py-config>
32+
<py-script>
33+
import altair as alt
34+
from vega_datasets import data
3335

34-
source = data.movies.url
36+
source = data.movies.url
3537

36-
pts = alt.selection(type="single", encodings=['x'])
38+
pts = alt.selection(type="single", encodings=['x'])
3739

38-
rect = alt.Chart(data.movies.url).mark_rect().encode(
39-
alt.X('IMDB_Rating:Q', bin=True),
40-
alt.Y('Rotten_Tomatoes_Rating:Q', bin=True),
41-
alt.Color('count()',
42-
scale=alt.Scale(scheme='greenblue'),
43-
legend=alt.Legend(title='Total Records')
44-
)
45-
)
40+
rect = alt.Chart(data.movies.url).mark_rect().encode(
41+
alt.X('IMDB_Rating:Q', bin=True),
42+
alt.Y('Rotten_Tomatoes_Rating:Q', bin=True),
43+
alt.Color('count()',
44+
scale=alt.Scale(scheme='greenblue'),
45+
legend=alt.Legend(title='Total Records')
46+
)
47+
)
4648

47-
circ = rect.mark_point().encode(
48-
alt.ColorValue('grey'),
49-
alt.Size('count()',
50-
legend=alt.Legend(title='Records in Selection')
51-
)
52-
).transform_filter(
53-
pts
54-
)
49+
circ = rect.mark_point().encode(
50+
alt.ColorValue('grey'),
51+
alt.Size('count()',
52+
legend=alt.Legend(title='Records in Selection')
53+
)
54+
).transform_filter(
55+
pts
56+
)
5557

56 F41A -
bar = alt.Chart(source).mark_bar().encode(
57-
x='Major_Genre:N',
58-
y='count()',
59-
color=alt.condition(pts, alt.ColorValue("steelblue"), alt.ColorValue("grey"))
60-
).properties(
61-
width=550,
62-
height=200
63-
).add_selection(pts)
58+
bar = alt.Chart(source).mark_bar().encode(
59+
x='Major_Genre:N',
60+
y='count()',
61+
color=alt.condition(pts, alt.ColorValue("steelblue"), alt.ColorValue("grey"))
62+
).properties(
63+
width=550,
64+
height=200
65+
).add_selection(pts)
6466

65-
display(alt.vconcat(
66-
rect + circ,
67-
bar
68-
).resolve_legend(
69-
color="independent",
70-
size="independent"
71-
), target="altair")
72-
</py-script>
67+
display(alt.vconcat(
68+
rect + circ,
69+
bar
70+
).resolve_legend(
71+
color="independent",
72+
size="independent"
73+
), target="altair")
74+
</py-script>
75+
</py-tutor>
7376
</section>
74-
<section class="code">
75-
<div id="view-code-button" role="button" aria-pressed="false" tabindex="0">View Code</div>
76-
<div id="code-section" class="code-section-hidden">
77-
<p>index.html</p>
78-
<pre class="prism-code language-html">
79-
<code class="language-html">
80-
&lt;py-config&gt;
81-
packages = [
82-
"altair",
83-
"pandas",
84-
"vega_datasets"
85-
]
86-
&lt;/py-config&gt;
87-
&lt;py-script&gt;
88-
import altair as alt
89-
from vega_datasets import data
90-
91-
source = data.movies.url
92-
93-
pts = alt.selection(type="single", encodings=['x'])
94-
95-
rect = alt.Chart(data.movies.url).mark_rect().encode(
96-
alt.X('IMDB_Rating:Q', bin=True),
97-
alt.Y('Rotten_Tomatoes_Rating:Q', bin=True),
98-
alt.Color('count()',
99-
scale=alt.Scale(scheme='greenblue'),
100-
legend=alt.Legend(title='Total Records')
101-
)
102-
)
103-
104-
circ = rect.mark_point().encode(
105-
alt.ColorValue('grey'),
106-
alt.Size('count()',
107-
legend=alt.Legend(title='Records in Selection')
108-
)
109-
).transform_filter(
110-
pts
111-
)
112-
113-
bar = alt.Chart(source).mark_bar().encode(
114-
x='Major_Genre:N',
115-
y='count()',
116-
color=alt.condition(pts, alt.ColorValue("steelblue"), alt.ColorValue("grey"))
117-
).properties(
118-
width=550,
119-
height=200
120-
).add_selection(pts)
121-
122-
display(alt.vconcat(
123-
rect + circ,
124-
bar
125-
).resolve_legend(
126-
color="independent",
127-
size="independent"
128-
), target="altair")
129-
&lt;/py-script&gt;
130-
</code>
131-
</pre>
132-
</div>
133-
</section>
13477
</body>
135-
<script>
136-
const viewCodeButton = document.getElementById("view-code-button");
137-
const codeSection = document.getElementById("code-section");
138-
const handleClick = () => {
139-
if (codeSection.classList.contains("code-section-hidden")) {
140-
codeSection.classList.remove("code-section-hidden");
141-
codeSection.classList.add("code-section-visible");
142-
} else {
143-
codeSection.classList.remove("code-section-visible");
144-
codeSection.classList.add("code-section-hidden");
145-
}
146-
}
147-
viewCodeButton.addEventListener("click", handleClick)
148-
viewCodeButton.addEventListener("keydown", (e) => {
149-
if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
150-
handleClick();
151-
}
152-
})
153-
</script>
15478
</html>

‎examples/antigravity.html

Lines changed: 16 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55
<link rel="icon" type="image/x-icon" href="./favicon.png">
66
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
77
<link rel="stylesheet" href="./assets/css/examples.css" />
8-
<link rel="stylesheet" href="./assets/prism/prism.css" />
98
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
10-
<script defer src="./assets/prism/prism.js"></script>
119
</head>
1210
<body>
1311
<nav class="navbar" style="background-color: #000000;">
@@ -18,101 +16,21 @@
1816
<a class="title" href="" style="color: #f0ab3c;">Antigravity</a>
1917
</div>
2018
</nav>
21-
<section class="pyscript">
22-
<py-config>
23-
[[fetch]]
24-
files = ["./antigravity.py"]
25-
</py-config>
26-
<b>Based on xkcd: antigravity https://xkcd.com/353/.</b>
27-
<py-script>
28-
import antigravity
29-
antigravity.fly()
30-
</py-script>
31-
</section>
32-
<section class="code">
33-
<div id="view-code-button" role="button" aria-pressed="false" tabindex="0">View Code</div>
34-
<div id="code-section" class="code-section-hidden">
35-
<p>index.html</p>
36-
<pre class="prism-code language-html">
37-
<code class="language-html">
38-
&lt;py-config&gt;
39-
[[fetch]]
40-
files = ["./antigravity.py"]
41-
&lt;/py-config&gt;
42-
&lt;py-script&gt;
43-
import antigravity
44-
antigravity.fly()
45-
&lt;/py-script&gt;
46-
</code>
47-
</pre>
48-
<p>antigravity.py</p>
49-
<pre class="prism-code language-python">
50-
<code class="language-python">
51-
import random
52-
import sys
53-
54-
from js import DOMParser, document, setInterval
55-
from pyodide.ffi import create_proxy
56-
from pyodide.http import open_url
57-
58-
59-
class Antigravity:
60-
61-
url = "./antigravity.svg"
62-
63-
def __init__(self, target=None, interval=10, append=True, fly=False):
64-
target = target or sys.stdout._out
65-
self.target = (
66-
document.getElementById(target) if isinstance(target, str) else target
67-
)
68-
doc = DOMParser.new().parseFromString(
69-
open_url(self.url).read(), "image/svg+xml"
70-
)
71-
self.node = doc.documentElement
72-
if append:
73-
self.target.append(self.node)
74-
else:
75-
self.target.replaceChildren(self.node)
76-
self.xoffset, self.yoffset = 0, 0
77-
self.interval = interval
78-
if fly:
79-
self.fly()
80-
81-
def fly(self):
82-
setInterval(create_proxy(self.move), self.interval)
83-
84-
def move(self):
85-
char = self.node.getElementsByTagName("g")[1]
86-
char.setAttribute("transform", f"translate({self.xoffset}, {-self.yoffset})")
87-
self.xoffset += random.normalvariate(0, 1) / 20
88-
if self.yoffset < 50:
89-
self.yoffset += 0.1
90-
else:
91-
self.yoffset += random.normalvariate(0, 1) / 20
92-
93-
_auto = Antigravity(append=True)
94-
fly = _auto.fly
95-
</code>
96-
</div>
97-
</section>
19+
<py-tutor modules="antigravity.py">
20+
<section class="pyscript">
21+
<py-config>
22+
plugins = [
23+
"../build/plugins/python/py_tutor.py"
24+
]
25+
[[fetch]]
26+
files = ["./antigravity.py"]
27+
</py-config>
28+
<b>Based on xkcd: antigravity https://xkcd.com/353/.</b>
29+
<py-script>
30+
import antigravity
31+
antigravity.fly()
32+
</py-script>
33+
</section>
34+
</py-tutor>
9835
</body>
99-
<script>
100-
const viewCodeButton = document.getElementById("view-code-button");
101-
const codeSection = document.getElementById("code-section");
102-
const handleClick = () => {
103-
if (codeSection.classList.contains("code-section-hidden")) {
104-
codeSection.classList.remove("code-section-hidden");
105-
codeSection.classList.add("code-section-visible");
106-
} else {
107-
codeSection.classList.remove("code-section-visible");
108-
codeSection.classList.add("code-section-hidden");
109-
}
110-
}
111-
viewCodeButton.addEventListener("click", handleClick)
112-
viewCodeButton.addEventListener("keydown", (e) => {
113-
if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
114-
handleClick();
115-
}
116-
})
117-
</script>
11836
</html>

0 commit comments

Comments
 (0)
0