InputDateRange question
UI/solara newbie question
Greetings. I am trying to use the solara InputDateRange component but I am having a problem. I set the default values w/ use_reactive(), I have InputDateRange component to alter/update the date range, and a separate part that actually uses the values. My problem is that when I make a change of dates, my app fails before I can set the end date - i.e. only the first date gets set. Below is a toy version of my code:
import solara
import solara.lab
import pendulum as pdl
end_date = pdl.Date(2023, 8, 8)
@solara.component
def Page():
# Default date range
date_range = solara.use_reactive(tuple([end_date.subtract(days=7), end_date]))
with solara.AppBar(): with solara.AppBarTitle(): with solara.Row(style={"background-color": "transparent", "align-items": "center"}): solara.HTML(tag="img", attributes={"src": "https://picsum.photos/400/200", "style": "height: 40px"}) solara.Text("Cool Viewer") solara.v.Spacer() solara.Button(label="Quit", on_click = lambda: None)
with solara.Sidebar(): Control(date_range)
with solara.Column(align = 'center'): View(date_range) @solara.component def Control(date_range): # Component to change to desired data range solara.lab.InputDateRange(date_range, sort=True)
@solara.component def View(date_range): # where the date range actually gets used start_date = date_range.value[0] end_date = date_range.value[1] print(start_date, end_date)~~~~~~~~
This fails with the following error:
end_date = date_range.value[1]
~~~~^^^
IndexError: tuple index out of range
What am I doing wrong?
Thanks
with solara.AppBar(): with solara.AppBarTitle(): with solara.Row(style={"background-color": "transparent", "align-items": "center"}): solara.HTML(tag="img", attributes={"src": "https://picsum.photos/400/200", "style": "height: 40px"}) solara.Text("Cool Viewer") solara.v.Spacer() solara.Button(label="Quit", on_click = lambda: None)
with solara.Sidebar(): Control(date_range)
with solara.Column(align = 'center'): View(date_range) @solara.component def Control(date_range): # Component to change to desired data range solara.lab.InputDateRange(date_range, sort=True)
@solara.component def View(date_range): # where the date range actually gets used start_date = date_range.value[0] end_date = date_range.value[1] print(start_date, end_date)
8 Replies
I haven't run the code, but I think your tuple assignment to date_range is to blame. You're creating a tuple with a single item which is a list of two items, which is why date_range.value[1] is out of range.
I think changing it to this should work(again, untested):
date_range = solara.use_reactive((end_date.subtract(days=7), end_date))
Alternatively I think just removing the [] in that same line might also work, all of this presuming you need this to be a tuple.
Nope, I'm wrong. Had a chance to test, and the view is refreshing before you can select the end date(at least on my pycafe test), so there's only one entry in the tuple.
So, the reason the documented example works and yours doesn't is that in the example they aren't splitting the tuple. In yours, because you're splitting it, when you select the first date, the reactive tuple updates from (<date-7>, <date>), to (<date>), that update causes the component it's associated with to refresh, and your calling of index 1 is out of range.
Here's my version in pycafe.
https://app.py.cafe/soulscode/solara-date-range-viewer
I put a couple of ways I thought of to get around that in there.
PyCafe - Solara - Date Range Selector Viewer
Run, Edit and Share Python Apps in Your Browser with 1 click!
Tweaked slightly from yours because pycafe didn't like pendulum.
Thanks. I forget about pycafe, I should make more use of it.
I knew the tuple was going from a 2-tuple to 1 -tuple but I was not sure why. Seems to me that since this is a range, this implies 2 elements should be in the tuple. But that was my own bias. Thank you.
Thanks for the help @Soulscode !
Thanks. I forget about pycafe, I should make more use of it.awesome use of pycafe again 🙂
That makes me wonder if there's a feature request or something in there to have the InputDateRange component write the tuple as a two item on the first selection, with the second as a None or something until the second date is populated.
Or even populating the second value with the same date as the first to make a single date range, but maintains the two item tuple.
@iisakkirotko what do you think?
Maybe just a flag that forces the widget to wait for both dates to be input before dong anything else. I don't think users would think to choose the first date, go do something else, then return to fill in the second. But I don't have much experience in GUI design so I am not sure I can properly assess all the pitfalls of this suggestion.
So, wait_flag == False is current behavior. wait_flag == True, is the behavior suggested above.