ui.stat_list_item clickable action

[CH3V4L13R]

I'm trying to figure out how to add a specific action done when a row of the ui.stat_list_item is clicked.
my table is like this:

ui.stat_list_item(
                label=nb_unshipped_list['SALES_ID'][i],
                name=f'order_clicked_{str(i)}',
                caption=get_order_list_items(nb_unshipped_list['SALES_ITEMS'][i]),
                value=nb_unshipped_list['SALES_DATE'][i],
                aux_value=nb_unshipped_list['EC'][i],
                value_color=get_order_waiting_color(nb_unshipped_list['SALES_DATE'][i])) for i in range(len(nb_unshipped_list))
        ],

I want the user to be able to have information displayed when a specific row is clicked but the q.args only contain the name of the list row.
Is it possible to get others info like the label, caption info of the specific clicked row inside the q.args as well so those data can be processed later?

My main issue being how to check for which row is clicked since the q.args.order_clicked_0, q.args.order_clicked_1, etc... name for the number of row is dynamic. And doing something like this doesn't work:

list_clicked_order = "list_clicked_" + str(1)
if q.args.list_clicked_order:

....

The name of the row being fixed doesn't make sense as all rows would have the same action behavior.
Thanks, any feedback or help are welcome...

[mturoci]

Hi @CH3V4L13R, good question. The quick and ugly workaround could be something like this:

from h2o_wave import main, app, Q, ui


# Your custom data structure.
class DataObj:
    def __init__(self, prop1, prop2, prop3):
        self.prop1 = prop1
        self.prop2 = prop2
        self.prop3 = prop3


# Fill the dictionary - key has to be same as name of the stat_list_item.
obj_dict = {}
for i in range(10):
    obj_dict[i] = DataObj(i, i, i)


@app('/demo')
async def serve(q: Q):
    q.page['list'] = ui.stat_list_card(box='1 1 5 5', title='Title', items=[
        ui.stat_list_item(name=f'{idx}', label=str(obj.prop1)) for idx, obj in obj_dict.items()
    ])

    # Ugly workaround for getting q.args.check
    for key in obj_dict.keys():
        if str(key) in q.args:
            print(f'Row {key} was clicked!')
            print(f'Here is the associated data: {obj_dict[key]}')

    # Dummy update - ignore.
    q.page['dummy'].items = []
    await q.page.save()

@lo5 maybe we could add same pattern matching for args as we have for routing, wdyt?

[CH3V4L13R]

@mturoci Thank you for taking the time to send me a workaround. It's definitively less ugly than my personal code ;)
I will take some time this weekend to upgrade my code with your solution and see how it goes. Thanks again!

[lo5]

@CH3V4L13R @mturoci The correct solution (1-liner) is to provide a name to the card, e.g. ui.stat_list_card(..., name='foo', ...), so that q.args.foo is set to the name of the selected item.

[mtanco]

I wanted to mention that because q.args is an expando it can behave like both an object and a dictionary, so this:

list_clicked_order = "list_clicked_" + str(1)
if q.args.list_clicked_order:

can be handled with:

list_clicked_order = "list_clicked_" + str(1)
if q.args[list_clicked_order] is not None:

In this case @mturoci 's solution is the way to go, checking if each key is in q.args but you can also do for the same effect:

if q.args[ str(key)] is not None:
            print(f'Row {key} was clicked!')
            print(f'Here is the associated data: {obj_dict[key]}')

[lo5]

The correct solution (1-liner) is to provide a name to the card, e.g. ui.stat_list_card(..., name='foo', ...), so that q.args.foo is set to the name of the selected item.

[CH3V4L13R]

@mturoci @lo5 @mtanco Thank you for all your feedback. The code provided by @mturoci works perfectly. The issue is that the list contain a certain number of orders and the list is dynamically generated from that number:

for i in range(len(nb_unshipped_list)): obj_dict[i] = DataObj(i)

From that clicked row, I just need to retrieve one specific value (the order id) and can get all the other info from it later.

@mtanco I wish I won't have to check all the key in q.args via the for loop, but I don't understand well your explanation. Since I do not know how many keys will be generated or which key (list row) will be clicked, I guess doing the for loop to check is the only way to go. Please let me know if preventing the for loop seems possible.

To summarize, the only things that I needed was the class object with one variable to check which row is being clicked.

class DataObj:
def init(self, prop1):
self.prop1 = prop1

and

obj_dict = {}
for i in range(len(nb_unshipped_list)):
obj_dict[i] = DataObj(i)

Thanks!

[lo5]

@CH3V4L13R - the solution from @mturoci is not the right approach.

@mturoci - no workarounds/hacks are necessary.

You do not have to loop through q.args.
Just provide a name, e.g. ui.stat_list_card(, ... name='foo', ...) and you can simply check the value of q.args.foo to know which item was selected.

[CH3V4L13R]

Here is a screenshot of my stat_list_card, sorry I should have show this from the beginning.
The stat_list_card display a list of orders. When the user click on one of the line (the order), all the order info appears into a different card.

[lo5]

Sure. Assuming your order IDs are foo_1, foo_2, etc., set up your card like this:

my_card = ui.stat_list_card(
  box='...',
  title='...',
  name='order_id',
  items=[
    ui.stat_list_item(name='foo_1', ...),
    ui.stat_list_item(name='foo_2', ...),
    ui.stat_list_item(name='foo_3', ...),
  ]
)

When an item in the card is clicked, read the order ID like this:

selected_order_id = q.args.order_id

You can then use this ID to look up order details and display it in your other card.

Hope this helps, unless I'm missing something.

[lo5]

Note that this pattern is universally followed across Wave. For example, https://github.com/h2oai/wave/blob/master/py/examples/table_select.py

[lo5]

More complete/useful example: https://wave.h2o.ai/docs/examples/issue-tracker - same pattern

[CH3V4L13R]

@lo5 thank you for the links and example, it helps me understand the pattern better. I was able to apply the right code to my use case and it's working perfectly fine now without the for loop.
Again, @lo5 @mturoci @mtanco thank you for all the support!