pywidget demo mo

%23%20%2F%2F%2F%20script%0A%23%20dependencies%20%3D%20%5B%22pywidget%22%2C%20%22anywidget%22%5D%0A%23%20%2F%2F%2F%0A%0Aimport%20marimo%0A%0A__generated_with%20%3D%20%220.20.4%22%0Aapp%20%3D%20marimo.App(width%3D%22medium%22)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%20pywidget%20Demo%0A%0A%20%20%20%20This%20notebook%20demonstrates%20**pywidget**%20%E2%80%94%20write%20widgets%20entirely%20in%20Python%2C%0A%20%20%20%20no%20JavaScript%20required.%0A%0A%20%20%20%20Your%20rendering%20code%20runs%20in%20the%20browser%20using%0A%20%20%20%20%5BPyodide%5D(https%3A%2F%2Fpyodide.org%2F)%20(CPython%20compiled%20to%20WebAssembly).%0A%0A%20%20%20%20**First%20load%20takes%203%E2%80%935%20seconds**%20while%20Pyodide%20downloads%20(~11%20MB).%0A%20%20%20%20Subsequent%20widgets%20render%20instantly.%0A%0A%20%20%20%20In%20marimo%2C%20wrap%20every%20%60PyWidget%60%20instance%20with%20%60mo.ui.anywidget()%60%20to%0A%20%20%20%20hook%20into%20the%20reactive%20execution%20engine.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20import%20json%0A%20%20%20%20import%20random%0A%0A%20%20%20%20import%20marimo%20as%20mo%0A%20%20%20%20import%20traitlets%0A%20%20%20%20from%20pywidget%20import%20PyWidget%0A%0A%20%20%20%20return%20PyWidget%2C%20json%2C%20mo%2C%20random%2C%20traitlets%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%20Example%201%3A%20Static%20HTML%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(PyWidget%2C%20mo)%3A%0A%20%20%20%20class%20HelloWidget(PyWidget)%3A%0A%20%20%20%20%20%20%20%20def%20render(self%2C%20el%2C%20model)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20el.innerHTML%20%3D%20%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20style%3D%22padding%3A%2020px%3B%20background%3A%20linear-gradient(135deg%2C%20%23667eea%200%25%2C%20%23764ba2%20100%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%2012px%3B%20color%3A%20white%3B%20font-family%3A%20sans-serif%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20style%3D%22margin%3A%200%200%208px%200%3B%22%3EHello%20from%20Pyodide!%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%20style%3D%22margin%3A%200%3B%20opacity%3A%200.9%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20This%20HTML%20was%20rendered%20by%20Python%20running%20in%20your%20browser%20via%20WebAssembly.%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%0A%0A%20%20%20%20mo.ui.anywidget(HelloWidget())%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%20Example%202%3A%20Reading%20Kernel%20State%0A%0A%20%20%20%20The%20%60model.get()%60%20API%20reads%20traitlets%20synced%20from%20the%20kernel.%0A%20%20%20%20The%20%60update()%60%20method%20is%20called%20whenever%20state%20changes.%0A%0A%20%20%20%20Use%20the%20text%20box%20below%20to%20change%20the%20name%20%E2%80%94%20marimo's%20reactivity%0A%20%20%20%20propagates%20the%20value%20automatically.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20name_input%20%3D%20mo.ui.text(value%3D%22World%22%2C%20label%3D%22Name%22)%0A%20%20%20%20name_input%0A%20%20%20%20return%20(name_input%2C)%0A%0A%0A%40app.cell%0Adef%20_(PyWidget%2C%20mo%2C%20name_input%2C%20traitlets)%3A%0A%20%20%20%20class%20GreeterWidget(PyWidget)%3A%0A%20%20%20%20%20%20%20%20name%20%3D%20traitlets.Unicode(%22World%22).tag(sync%3DTrue)%0A%0A%20%20%20%20%20%20%20%20def%20render(self%2C%20el%2C%20model)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20name%20%3D%20model.get(%22name%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20el.innerHTML%20%3D%20f%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20style%3D%22padding%3A%2016px%3B%20border%3A%202px%20solid%20%234CAF50%3B%20border-radius%3A%208px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20sans-serif%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20style%3D%22font-size%3A%2024px%3B%22%3EHello%2C%20%3Cstrong%3E%7Bname%7D%3C%2Fstrong%3E!%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%0A%0A%20%20%20%20%20%20%20%20def%20update(self%2C%20el%2C%20model)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20name%20%3D%20model.get(%22name%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20el.innerHTML%20%3D%20f%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20style%3D%22padding%3A%2016px%3B%20border%3A%202px%20solid%20%234CAF50%3B%20border-radius%3A%208px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20sans-serif%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20style%3D%22font-size%3A%2024px%3B%22%3EHello%2C%20%3Cstrong%3E%7Bname%7D%3C%2Fstrong%3E!%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%0A%0A%20%20%20%20greeter%20%3D%20GreeterWidget(name%3Dname_input.value)%0A%20%20%20%20mo.ui.anywidget(greeter)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%20Example%203%3A%20Bidirectional%20State%20(Click%20Counter)%0A%0A%20%20%20%20Full%20bidirectional%20sync%3A%0A%20%20%20%20-%20**Browser%20to%20Kernel**%3A%20clicking%20the%20button%20calls%20%60model.set()%60%20%2B%0A%20%20%20%20%20%20%60model.save_changes()%60%0A%20%20%20%20-%20**Kernel%20to%20Browser**%3A%20the%20widget%20display%20updates%20via%20%60update()%60%0A%0A%20%20%20%20The%20current%20count%20is%20read%20reactively%20in%20the%20cell%20below%20the%20widget.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(PyWidget%2C%20create_proxy%2C%20mo%2C%20traitlets)%3A%0A%20%20%20%20class%20CounterWidget(PyWidget)%3A%0A%20%20%20%20%20%20%20%20count%20%3D%20traitlets.Int(0).tag(sync%3DTrue)%0A%0A%20%20%20%20%20%20%20%20def%20render(self%2C%20el%2C%20model)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20count%20%3D%20model.get(%22count%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20el.innerHTML%20%3D%20f%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20style%3D%22font-family%3A%20sans-serif%3B%20display%3A%20flex%3B%20align-items%3A%20center%3B%20gap%3A%2012px%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20id%3D%22dec%22%20style%3D%22padding%3A%208px%2016px%3B%20font-size%3A%2018px%3B%20cursor%3A%20pointer%3B%22%3E-%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20id%3D%22display%22%20style%3D%22font-size%3A%2024px%3B%20min-width%3A%2060px%3B%20text-align%3A%20center%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Bcount%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20id%3D%22inc%22%20style%3D%22padding%3A%208px%2016px%3B%20font-size%3A%2018px%3B%20cursor%3A%20pointer%3B%22%3E%2B%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20def%20on_inc(event)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20new_val%20%3D%20model.get(%22count%22)%20%2B%201%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20model.set(%22count%22%2C%20new_val)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20model.save_changes()%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20el.querySelector(%22%23display%22).textContent%20%3D%20str(new_val)%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20def%20on_dec(event)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20new_val%20%3D%20model.get(%22count%22)%20-%201%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20model.set(%22count%22%2C%20new_val)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20model.save_changes()%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20el.querySelector(%22%23display%22).textContent%20%3D%20str(new_val)%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20el.querySelector(%22%23inc%22).addEventListener(%22click%22%2C%20create_proxy(on_inc))%0A%20%20%20%20%20%20%20%20%20%20%20%20el.querySelector(%22%23dec%22).addEventListener(%22click%22%2C%20create_proxy(on_dec))%0A%0A%20%20%20%20%20%20%20%20def%20update(self%2C%20el%2C%20model)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20display%20%3D%20el.querySelector(%22%23display%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20display%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20display.textContent%20%3D%20str(model.get(%22count%22))%0A%0A%20%20%20%20counter%20%3D%20mo.ui.anywidget(CounterWidget())%0A%20%20%20%20counter%0A%20%20%20%20return%20(counter%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(counter%2C%20mo)%3A%0A%20%20%20%20mo.md(f%22%22%22%0A%20%20%20%20Current%20count%20(read%20reactively%20from%20kernel)%3A%20**%7Bcounter.widget.count%7D**%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%20Debugging%20Tips%0A%0A%20%20%20%20Your%20%60render%60%20and%20%60update%60%20code%20runs%20in%20the%20browser%20via%20Pyodide%2C%20so%0A%20%20%20%20%60print()%60%20output%20goes%20to%20the%20**browser%20DevTools%20console**%20(open%20with%0A%20%20%20%20Cmd%2BOption%2BJ%20in%20Chrome%2C%20or%20Cmd%2BOption%2BI%20in%20Firefox%2FSafari).%0A%0A%20%20%20%20You%20can%20also%20use%20%60console.log()%60%2C%20%60console.warn()%60%2C%20and%20%60console.error()%60%0A%20%20%20%20directly%20%E2%80%94%20the%20%60console%60%20object%20is%20available%20in%20the%20rendering%20namespace.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(PyWidget%2C%20console%2C%20create_proxy%2C%20mo%2C%20traitlets)%3A%0A%20%20%20%20class%20DebugWidget(PyWidget)%3A%0A%20%20%20%20%20%20%20%20count%20%3D%20traitlets.Int(0).tag(sync%3DTrue)%0A%0A%20%20%20%20%20%20%20%20def%20render(self%2C%20el%2C%20model)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20print(%22render()%20called%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(%22count%20is%22%2C%20model.get(%22count%22))%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20el.innerHTML%20%3D%20f%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20style%3D%22font-family%3A%20sans-serif%3B%20padding%3A%2016px%3B%20background%3A%20%231e1e2e%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23cdd6f4%3B%20border-radius%3A%208px%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%20style%3D%22margin%3A%200%200%208px%200%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Open%20%3Cstrong%3EDevTools%20%E2%86%92%20Console%3C%2Fstrong%3E%20to%20see%20debug%20output.%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20id%3D%22btn%22%20style%3D%22padding%3A%208px%2016px%3B%20cursor%3A%20pointer%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Click%20me%20(check%20console)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20def%20on_click(event)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20new_val%20%3D%20model.get(%22count%22)%20%2B%201%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20print(f%22Button%20clicked!%20count%20%3D%20%7Bnew_val%7D%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20model.set(%22count%22%2C%20new_val)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20model.save_changes()%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20el.querySelector(%22%23btn%22).addEventListener(%22click%22%2C%20create_proxy(on_click))%0A%0A%20%20%20%20mo.ui.anywidget(DebugWidget())%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%20Example%204%3A%20Browser-side%20NumPy%0A%0A%20%20%20%20Use%20%60_py_packages%60%20to%20install%20packages%20inside%20Pyodide.%0A%20%20%20%20NumPy%20is%20pre-built%20for%20WASM%2C%20so%20it%20loads%20in%20seconds.%0A%0A%20%20%20%20Drag%20the%20slider%20to%20resize%20the%20random%20dataset%20%E2%80%94%20the%20stats%20recalculate%0A%20%20%20%20in%20the%20browser.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20n_points%20%3D%20mo.ui.slider(5%2C%20100%2C%20value%3D20%2C%20label%3D%22Number%20of%20data%20points%22%2C%20step%3D5)%0A%20%20%20%20n_points%0A%20%20%20%20return%20(n_points%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(PyWidget%2C%20mo%2C%20n_points%2C%20random%2C%20traitlets)%3A%0A%20%20%20%20class%20StatsWidget(PyWidget)%3A%0A%20%20%20%20%20%20%20%20data%20%3D%20traitlets.List(traitlets.Float()%2C%20%5B%5D).tag(sync%3DTrue)%0A%20%20%20%20%20%20%20%20_py_packages%20%3D%20%5B%22numpy%22%5D%0A%0A%20%20%20%20%20%20%20%20def%20render(self%2C%20el%2C%20model)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20import%20numpy%20as%20np%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20arr%20%3D%20np.array(list(model.get(%22data%22)))%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20arr.size%20%3D%3D%200%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20el.innerHTML%20%3D%20'%3Cp%20style%3D%22color%3A%23999%3B%22%3ENo%20data.%3C%2Fp%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%0A%20%20%20%20%20%20%20%20%20%20%20%20el.innerHTML%20%3D%20f%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20style%3D%22font-family%3A%20monospace%3B%20padding%3A%2016px%3B%20background%3A%20%23f8f9fa%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%208px%3B%20border%3A%201px%20solid%20%23dee2e6%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch3%20style%3D%22margin%3A%200%200%2012px%200%3B%20color%3A%20%23495057%3B%22%3EBrowser-side%20NumPy%3C%2Fh3%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctable%20style%3D%22border-collapse%3A%20collapse%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctr%3E%3Ctd%20style%3D%22padding%3A%204px%2012px%3B%22%3En%3A%3C%2Ftd%3E%3Ctd%3E%7Barr.size%7D%3C%2Ftd%3E%3C%2Ftr%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctr%3E%3Ctd%20style%3D%22padding%3A%204px%2012px%3B%22%3EMean%3A%3C%2Ftd%3E%3Ctd%3E%7Barr.mean()%3A.4f%7D%3C%2Ftd%3E%3C%2Ftr%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctr%3E%3Ctd%20style%3D%22padding%3A%204px%2012px%3B%22%3EStd%3A%3C%2Ftd%3E%3Ctd%3E%7Barr.std()%3A.4f%7D%3C%2Ftd%3E%3C%2Ftr%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctr%3E%3Ctd%20style%3D%22padding%3A%204px%2012px%3B%22%3EMin%3A%3C%2Ftd%3E%3Ctd%3E%7Barr.min()%3A.4f%7D%3C%2Ftd%3E%3C%2Ftr%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctr%3E%3Ctd%20style%3D%22padding%3A%204px%2012px%3B%22%3EMax%3A%3C%2Ftd%3E%3Ctd%3E%7Barr.max()%3A.4f%7D%3C%2Ftd%3E%3C%2Ftr%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctr%3E%3Ctd%20style%3D%22padding%3A%204px%2012px%3B%22%3ESum%3A%3C%2Ftd%3E%3Ctd%3E%7Barr.sum()%3A.4f%7D%3C%2Ftd%3E%3C%2Ftr%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ftable%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%0A%0A%20%20%20%20%20%20%20%20def%20update(self%2C%20el%2C%20model)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20render(el%2C%20model)%0A%0A%20%20%20%20stats%20%3D%20StatsWidget(data%3D%5Brandom.gauss(50%2C%2015)%20for%20_%20in%20range(n_points.value)%5D)%0A%20%20%20%20mo.ui.anywidget(stats)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%20Example%205%3A%20Browser-side%20Pandas%0A%0A%20%20%20%20Pandas%20runs%20in%20Pyodide%20too.%20The%20kernel%20sends%20raw%20row%20data%3B%20the%0A%20%20%20%20browser%20does%20all%20the%20aggregation%20and%20HTML%20formatting.%0A%0A%20%20%20%20Click%20**Regenerate**%20to%20push%20a%20new%20random%20dataset.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20regenerate%20%3D%20mo.ui.button(label%3D%22Regenerate%20sales%20data%22)%0A%20%20%20%20regenerate%0A%20%20%20%20return%20(regenerate%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(PyWidget%2C%20json%2C%20mo%2C%20random%2C%20regenerate%2C%20traitlets)%3A%0A%20%20%20%20regenerate%0A%0A%20%20%20%20regions%20%3D%20%5B%22North%22%2C%20%22South%22%2C%20%22East%22%2C%20%22West%22%5D%0A%20%20%20%20sales%20%3D%20%5B%0A%20%20%20%20%20%20%20%20%7B%22region%22%3A%20random.choice(regions)%2C%20%22revenue%22%3A%20round(random.uniform(100%2C%205000)%2C%202)%7D%0A%20%20%20%20%20%20%20%20for%20_%20in%20range(50)%0A%20%20%20%20%5D%0A%0A%20%20%20%20class%20SalesTable(PyWidget)%3A%0A%20%20%20%20%20%20%20%20sales_json%20%3D%20traitlets.Unicode(%22%5B%5D%22).tag(sync%3DTrue)%0A%20%20%20%20%20%20%20%20_py_packages%20%3D%20%5B%22pandas%22%5D%0A%0A%20%20%20%20%20%20%20%20def%20render(self%2C%20el%2C%20model)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20import%20json%0A%20%20%20%20%20%20%20%20%20%20%20%20import%20pandas%20as%20pd%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20rows%20%3D%20json.loads(model.get(%22sales_json%22))%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20not%20rows%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20el.innerHTML%20%3D%20'%3Cp%20style%3D%22color%3A%23999%3B%20font-family%3Asans-serif%3B%22%3ENo%20data%20yet.%3C%2Fp%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20df%20%3D%20pd.DataFrame(rows)%0A%20%20%20%20%20%20%20%20%20%20%20%20summary%20%3D%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20df.groupby(%22region%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.agg(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20total_revenue%3D(%22revenue%22%2C%20%22sum%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20avg_revenue%3D(%22revenue%22%2C%20%22mean%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20order_count%3D(%22revenue%22%2C%20%22count%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.round(2)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.reset_index()%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%20%20%20%20table_html%20%3D%20summary.to_html(index%3DFalse%2C%20border%3D0)%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20el.innerHTML%20%3D%20f%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20style%3D%22font-family%3A%20sans-serif%3B%20padding%3A%2016px%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch3%20style%3D%22margin%3A%200%200%2012px%200%3B%22%3ESales%20Summary%20(computed%20in%20browser%20with%20Pandas)%3C%2Fh3%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.pywidget-table%20table%20%7B%7B%20border-collapse%3A%20collapse%3B%20width%3A%20100%25%3B%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.pywidget-table%20th%2C%20.pywidget-table%20td%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%208px%2012px%3B%20text-align%3A%20left%3B%20border-bottom%3A%201px%20solid%20%23ddd%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.pywidget-table%20th%20%7B%7B%20background%3A%20%23f0f0f0%3B%20font-weight%3A%20600%3B%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.pywidget-table%20tr%3Ahover%20%7B%7B%20background%3A%20%23f9f9f9%3B%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22pywidget-table%22%3E%7Btable_html%7D%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%20style%3D%22color%3A%20%23888%3B%20margin-top%3A%2012px%3B%20font-size%3A%2013px%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Blen(df)%7D%20rows%20%26rarr%3B%20%7Blen(summary)%7D%20regions%2C%20aggregated%20by%20Pandas%20in%20Pyodide%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%0A%0A%20%20%20%20%20%20%20%20def%20update(self%2C%20el%2C%20model)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20render(el%2C%20model)%0A%0A%20%20%20%20sales_widget%20%3D%20SalesTable(sales_json%3Djson.dumps(sales))%0A%20%20%20%20mo.ui.anywidget(sales_widget)%0A%20%20%20%20return%0A%0A%0Aif%20__name__%20%3D%3D%20%22__main__%22%3A%0A%20%20%20%20app.run()%0A