From 8611541f374ba86bcbcb9e31b54bc27ae5826501 Mon Sep 17 00:00:00 2001 From: David Godinez Date: Wed, 11 Dec 2024 11:05:59 -0700 Subject: [PATCH 1/8] docs: Render Lists --- plugins/ui/docs/describing/render_lists.md | 7 +++++++ plugins/ui/docs/sidebar.json | 4 ++++ 2 files changed, 11 insertions(+) create mode 100644 plugins/ui/docs/describing/render_lists.md diff --git a/plugins/ui/docs/describing/render_lists.md b/plugins/ui/docs/describing/render_lists.md new file mode 100644 index 000000000..ace2e27a5 --- /dev/null +++ b/plugins/ui/docs/describing/render_lists.md @@ -0,0 +1,7 @@ +# Render Lists + +You will often want to display multiple similar components from a collection of data. You can use Python the methods `filter` and `map` with `deephaven.ui` to filter and transform your list of data into an list of components. + +## Render data from arrays + +Here is an example list of components: diff --git a/plugins/ui/docs/sidebar.json b/plugins/ui/docs/sidebar.json index cce11e0b9..e156b1931 100644 --- a/plugins/ui/docs/sidebar.json +++ b/plugins/ui/docs/sidebar.json @@ -36,6 +36,10 @@ { "label": "Working with Tables", "path": "describing/work_with_tables.md" + }, + { + "label": "Render Lists", + "path": "describing/render_lists.md" } ] }, From e06403b453f3fdb3bc417695e6aae9f94a5c160e Mon Sep 17 00:00:00 2001 From: David Godinez Date: Wed, 11 Dec 2024 14:35:50 -0700 Subject: [PATCH 2/8] list comprehension --- plugins/ui/docs/_assets/render_lists1.png | Bin 0 -> 10568 bytes plugins/ui/docs/describing/render_lists.md | 58 +++++++++++++++++++-- 2 files changed, 55 insertions(+), 3 deletions(-) create mode 100644 plugins/ui/docs/_assets/render_lists1.png diff --git a/plugins/ui/docs/_assets/render_lists1.png b/plugins/ui/docs/_assets/render_lists1.png new file mode 100644 index 0000000000000000000000000000000000000000..eca88bb265446b7a704bbaee1d86ead5bf077df3 GIT binary patch literal 10568 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 Date: Thu, 12 Dec 2024 07:04:04 -0700 Subject: [PATCH 3/8] filter --- plugins/ui/docs/_assets/render_lists2.png | Bin 0 -> 6687 bytes plugins/ui/docs/describing/render_lists.md | 29 ++++++++++++++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 plugins/ui/docs/_assets/render_lists2.png diff --git a/plugins/ui/docs/_assets/render_lists2.png b/plugins/ui/docs/_assets/render_lists2.png new file mode 100644 index 0000000000000000000000000000000000000000..3b876c3b5f53f6421cbb69a833a988eabfdc792d GIT binary patch literal 6687 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 Date: Fri, 13 Dec 2024 09:03:54 -0700 Subject: [PATCH 4/8] Apply suggestions from code review Co-authored-by: Mike Bender --- plugins/ui/docs/describing/render_lists.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/ui/docs/describing/render_lists.md b/plugins/ui/docs/describing/render_lists.md index fd6e46523..79ff58734 100644 --- a/plugins/ui/docs/describing/render_lists.md +++ b/plugins/ui/docs/describing/render_lists.md @@ -1,6 +1,6 @@ # Render Lists -You will often want to display multiple similar components from a collection of data. You can use Python `filter` and `list comprehension` with `deephaven.ui` to filter and transform your list of data into an list of components. +You will often want to display multiple similar components from a collection of data. You can use Python [`filter`](https://docs.python.org/3/library/functions.html#filter) and [`list comprehensions`](https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions) with `deephaven.ui` to filter and transform your list of data into an list of components. ## Render data from lists From 33a88debd6983266df864f7c0c82f7c466e0b2d9 Mon Sep 17 00:00:00 2001 From: David Godinez Date: Fri, 13 Dec 2024 09:38:25 -0700 Subject: [PATCH 5/8] keys --- plugins/ui/docs/describing/render_lists.md | 67 ++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/plugins/ui/docs/describing/render_lists.md b/plugins/ui/docs/describing/render_lists.md index 79ff58734..5c3fd9c8d 100644 --- a/plugins/ui/docs/describing/render_lists.md +++ b/plugins/ui/docs/describing/render_lists.md @@ -84,3 +84,70 @@ my_content_list = content_list(food, "vegetable") ``` ![my_content_list2](../_assets/render_lists2.png) + +## Keep list items in order with keys + +Keys tell `deephaven.ui` which list item each component corresponds to, so that it can match them up later. This becomes important if your list items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps `deephaven.ui` infer what exactly has happened, and make the correct updates. + +Rather than generating keys on the fly, you should include them in your data. + +### Where to get your key + +Different sources of data provide different sources of keys: + +- Data from a database: If your data is coming from a database, you can use the database keys/IDs, which are unique by nature. +- Locally generated data: If your data is generated and persisted locally, use an incrementing counter or a package like `uuid` when creating items. + +### Rules of keys + +- Keys must be unique among siblings. However, it is okay to use the same keys for items in different lists. +- Keys must not change. Do not generate them while rendering. + +In this example, the `ui_cells` component can add cell which can be deleted. The line `key=str(i)` is commented out, so the cell components do not have keys. If the user tries to delete a cell in the middle of the component, the last cell will be deleted instead. Comment in the line that sets the key. Now the correct cell will be deleted. + +```python +from deephaven import ui +import itertools + + +@ui.component +def ui_cell(label="Cell"): + text, set_text = ui.use_state("") + return ui.text_field(label=label, value=text, on_change=set_text) + + +@ui.component +def ui_deletable_cell(i, delete_cell): + return ui.flex( + ui_cell(label=f"Cell {i}"), + ui.action_button( + ui.icon("vsTrash"), + aria_label="Delete cell", + on_press=lambda: delete_cell(i), + ), + align_items="end", + # comment in this line to fix + # key=str(i), + ) + + +@ui.component +def ui_cells(): + id_iter, set_id_iter = ui.use_state(lambda: itertools.count()) + cells, set_cells = ui.use_state(lambda: [next(id_iter)]) + + def add_cell(): + set_cells(lambda old_cells: old_cells + [next(id_iter)]) + + def delete_cell(delete_id: int): + set_cells(lambda old_cells: [c for c in old_cells if c != delete_id]) + + return ui.view( + [ui_deletable_cell(i, delete_cell) for i in cells], + ui.action_button(ui.icon("vsAdd"), "Add cell", on_press=add_cell), + overflow="auto", + ) + + +cells = ui_cells() +``` From eb6f667d4cffa64bd0fb7f6fdbd442f5312fb124 Mon Sep 17 00:00:00 2001 From: dgodinez-dh <77981300+dgodinez-dh@users.noreply.github.com> Date: Tue, 17 Dec 2024 06:31:09 -0700 Subject: [PATCH 6/8] Apply suggestions from code review Co-authored-by: margaretkennedy <82049573+margaretkennedy@users.noreply.github.com> --- plugins/ui/docs/describing/render_lists.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/ui/docs/describing/render_lists.md b/plugins/ui/docs/describing/render_lists.md index 5c3fd9c8d..87009eef7 100644 --- a/plugins/ui/docs/describing/render_lists.md +++ b/plugins/ui/docs/describing/render_lists.md @@ -1,6 +1,6 @@ # Render Lists -You will often want to display multiple similar components from a collection of data. You can use Python [`filter`](https://docs.python.org/3/library/functions.html#filter) and [`list comprehensions`](https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions) with `deephaven.ui` to filter and transform your list of data into an list of components. +You will often want to display multiple similar components from a collection of data. You can use the Python [`filter`](https://docs.python.org/3/library/functions.html#filter) function and [`list comprehensions`](https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions) with `deephaven.ui` to filter and transform your list of data into a list of components. ## Render data from lists @@ -27,7 +27,7 @@ my_content_list = content_list() ![my_content_list](../_assets/render_lists1.png) -The only difference among those list items is their contents, their data. You will often need to show several instances of the same component using different data when building interfaces. Here is a short example of how to generate a list of items from an list of data: +The only difference among those list items is their contents (their data). You will often need to show several instances of the same component using different data when building interfaces. Here is a short example of how to generate a list of items from a list of data: 1. Move the data into a list 2. Use list comprehension to map the list of data to a list of components @@ -87,7 +87,7 @@ my_content_list = content_list(food, "vegetable") ## Keep list items in order with keys -Keys tell `deephaven.ui` which list item each component corresponds to, so that it can match them up later. This becomes important if your list items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps `deephaven.ui` infer what exactly has happened, and make the correct updates. +Keys tell `deephaven.ui` which list item each component corresponds to so that it can match them up later. This becomes important if your list items can move (e.g., due to sorting), get inserted, or get deleted. A well-chosen key helps `deephaven.ui` infer exactly what happened and make the correct updates. Rather than generating keys on the fly, you should include them in your data. From 2d59d0faebe7a469b25dcb850ee567625e7e4520 Mon Sep 17 00:00:00 2001 From: dgodinez-dh <77981300+dgodinez-dh@users.noreply.github.com> Date: Fri, 20 Dec 2024 06:48:06 -0700 Subject: [PATCH 7/8] Update plugins/ui/docs/describing/render_lists.md Co-authored-by: Mike Bender --- plugins/ui/docs/describing/render_lists.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/plugins/ui/docs/describing/render_lists.md b/plugins/ui/docs/describing/render_lists.md index 87009eef7..b1742dc57 100644 --- a/plugins/ui/docs/describing/render_lists.md +++ b/plugins/ui/docs/describing/render_lists.md @@ -126,8 +126,6 @@ def ui_deletable_cell(i, delete_cell): on_press=lambda: delete_cell(i), ), align_items="end", - # comment in this line to fix - # key=str(i), ) @@ -143,7 +141,7 @@ def ui_cells(): set_cells(lambda old_cells: [c for c in old_cells if c != delete_id]) return ui.view( - [ui_deletable_cell(i, delete_cell) for i in cells], + [ui_deletable_cell(i, delete_cell, key=str(i)) for i in cells], ui.action_button(ui.icon("vsAdd"), "Add cell", on_press=add_cell), overflow="auto", ) From e83c358dc506dce291900c7b06c001f4cacec0a9 Mon Sep 17 00:00:00 2001 From: David Godinez Date: Fri, 20 Dec 2024 06:56:28 -0700 Subject: [PATCH 8/8] code review update --- plugins/ui/docs/describing/render_lists.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/plugins/ui/docs/describing/render_lists.md b/plugins/ui/docs/describing/render_lists.md index b1742dc57..61f309c34 100644 --- a/plugins/ui/docs/describing/render_lists.md +++ b/plugins/ui/docs/describing/render_lists.md @@ -141,7 +141,15 @@ def ui_cells(): set_cells(lambda old_cells: [c for c in old_cells if c != delete_id]) return ui.view( - [ui_deletable_cell(i, delete_cell, key=str(i)) for i in cells], + [ + ui_deletable_cell( + i, + delete_cell, + # uncomment this line to fix + # key=str(i) + ) + for i in cells + ], ui.action_button(ui.icon("vsAdd"), "Add cell", on_press=add_cell), overflow="auto", )