arrays and dicts

import%20marimo%0A%0A__generated_with%20%3D%20%220.10.19%22%0Aapp%20%3D%20marimo.App()%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20import%20marimo%20as%20mo%0A%20%20%20%20import%20random%0A%20%20%20%20return%20mo%2C%20random%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%23%20Arrays%20and%20Dictionaries%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(%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20Use%20%60mo.ui.array%60%20and%20%60mo.ui.dictionary%60%20to%20create%20UI%20elements%20that%20wrap%20%0A%20%20%20%20%20%20%20%20other%20elements.%0A%0A%20%20%20%20%20%20%20%20Because%20UI%20elements%20must%20be%20assigned%20to%20global%20variables%2C%20%0A%20%20%20%20%20%20%20%20these%20functions%20are%20required%20when%20the%20set%20of%20elements%20to%20create%20is%20not%0A%20%20%20%20%20%20%20%20known%20until%20runtime.%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20create%20%3D%20mo.ui.button(label%3D%22Create%20new%20collections%22)%0A%20%20%20%20return%20(create%2C)%0A%0A%0A%40app.cell%0Adef%20_(create)%3A%0A%20%20%20%20create.center()%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22UI%20Elements%20...%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(create%2C%20mo%2C%20random)%3A%0A%20%20%20%20create%0A%0A%20%20%20%20array%20%3D%20mo.ui.array(%0A%20%20%20%20%20%20%20%20%5Bmo.ui.text()%5D%0A%20%20%20%20%20%20%20%20%2B%20%5Bmo.ui.slider(1%2C%2010)%20for%20_%20in%20range(0%2C%20random.randint(2%2C%205))%5D%2C%0A%20%20%20%20)%0A%20%20%20%20dictionary%20%3D%20mo.ui.dictionary(%0A%20%20%20%20%20%20%20%20%7Bstr(i)%3A%20mo.ui.slider(1%2C%2010)%20for%20i%20in%20range(0%2C%20random.randint(2%2C%205))%7D%0A%20%20%20%20)%0A%0A%20%20%20%20mo.hstack(%5Barray%2C%20dictionary%5D%2C%20justify%3D%22space-around%22)%0A%20%20%20%20return%20array%2C%20dictionary%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22...%20and%20their%20values%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(array%2C%20dictionary%2C%20mo)%3A%0A%20%20%20%20mo.hstack(%5Barray.value%2C%20dictionary.value%5D%2C%20justify%3D%22space-around%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20Key%20difference%20between%20marimo%20dict%20and%20standard%20python%20dict%3A%0A%0A%20%20%20%20%20%20%20%20The%20main%20reason%20to%20use%20%60mo.ui.dictionary%60%20is%20for%20reactive%20execution%20%E2%80%94%20when%20you%20interact%20with%20an%20element%20in%20a%20%60mo.ui.dictionary%60%2C%20all%20cells%20that%20reference%20the%20%60mo.ui.dictionary%60%20run%20automatically%2C%20just%20like%20all%20other%20ui%20elements.%20When%20you%20use%20a%20regular%20dictionary%2C%20you%20don't%20get%20this%20reactivity.%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(create%2C%20mo)%3A%0A%20%20%20%20create%0A%0A%20%20%20%20slider%20%3D%20mo.ui.slider(1%2C%2010%2C%20show_value%3DTrue)%0A%20%20%20%20text%20%3D%20mo.ui.text()%0A%20%20%20%20date%20%3D%20mo.ui.date()%0A%0A%20%20%20%20mo_d%20%3D%20mo.ui.dictionary(%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22slider%22%3A%20slider%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20text%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22date%22%3A%20date%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20)%0A%0A%20%20%20%20py_d%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22slider%22%3A%20slider%2C%0A%20%20%20%20%20%20%20%20%22text%22%3A%20text%2C%0A%20%20%20%20%20%20%20%20%22date%22%3A%20date%2C%0A%20%20%20%20%7D%0A%0A%20%20%20%20mo.hstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.vstack(%5B%22marimo%20dict%22%2C%20mo_d%5D)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.vstack(%5B%22original%20elements%22%2C%20mo.vstack(%5Bslider%2C%20text%2C%20date%5D)%5D)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.vstack(%5B%22python%20dict%22%2C%20py_d%5D)%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20justify%3D%22space-around%22%2C%0A%20%20%20%20)%0A%20%20%20%20return%20date%2C%20mo_d%2C%20py_d%2C%20slider%2C%20text%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo%2C%20mo_d%2C%20py_d)%3A%0A%20%20%20%20mo_d_ref%20%3D%20%7Bk%3A%20mo_d%5Bk%5D.value%20for%20k%20in%20mo_d.value.keys()%7D%0A%20%20%20%20py_d_ref%20%3D%20%7Bk%3A%20py_d%5Bk%5D.value%20for%20k%20in%20py_d.keys()%7D%0A%20%20%20%20mo.hstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.vstack(%5B%22reference%20of%20marimo%20dict%22%2C%20mo_d_ref%5D)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.vstack(%5B%22reference%20of%20python%20dict%22%2C%20py_d_ref%5D)%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20justify%3D%22space-around%22%2C%0A%20%20%20%20)%0A%20%20%20%20return%20mo_d_ref%2C%20py_d_ref%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22Notice%20that%20when%20you%20interact%20with%20the%20UI%20elements%20in%20the%20marimo%20dict%2C%20the%20reference%20of%20marimo%20dict%20updates%20automatically.%20However%2C%20when%20you%20interact%20with%20the%20elements%20in%20the%20python%20dict%2C%20you%20need%20to%20manually%20re-run%20the%20cell%20to%20see%20the%20updated%20values.%22%22%22)%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