From 30a1f9fb8aa442c1c1b7fb44fe090339c71e8236 Mon Sep 17 00:00:00 2001
From: dgodinez-dh <77981300+dgodinez-dh@users.noreply.github.com>
Date: Fri, 20 Dec 2024 10:30:17 -0700
Subject: [PATCH] docs: Render Lists (#1061)

https://deephaven.atlassian.net/browse/DOC-232

---------

Co-authored-by: Mike Bender <mikebender@deephaven.io>
Co-authored-by: margaretkennedy <82049573+margaretkennedy@users.noreply.github.com>
---
 plugins/ui/docs/_assets/render_lists1.png  | Bin 0 -> 10568 bytes
 plugins/ui/docs/_assets/render_lists2.png  | Bin 0 -> 6687 bytes
 plugins/ui/docs/describing/render_lists.md | 159 +++++++++++++++++++++
 plugins/ui/docs/sidebar.json               |   4 +
 4 files changed, 163 insertions(+)
 create mode 100644 plugins/ui/docs/_assets/render_lists1.png
 create mode 100644 plugins/ui/docs/_assets/render_lists2.png
 create mode 100644 plugins/ui/docs/describing/render_lists.md

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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

literal 0
HcmV?d00001

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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
ANdN!<

literal 0
HcmV?d00001

diff --git a/plugins/ui/docs/describing/render_lists.md b/plugins/ui/docs/describing/render_lists.md
new file mode 100644
index 000000000..61f309c34
--- /dev/null
+++ b/plugins/ui/docs/describing/render_lists.md
@@ -0,0 +1,159 @@
+# Render Lists
+
+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
+
+Here is an example list of content:
+
+```python
+from deephaven import ui
+
+
+@ui.component
+def content_list():
+    return ui.flex(
+        ui.text("apple: fruit"),
+        ui.text("broccoli: vegetable"),
+        ui.text("banana: fruit"),
+        ui.text("yogurt: dairy"),
+        ui.text("carrot: vegetable"),
+        direction="column",
+    )
+
+
+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 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
+3. Use the list of components in your component
+
+```python
+from deephaven import ui
+
+food = [
+    "apple: fruit",
+    "broccoli: vegetable",
+    "banana: fruit",
+    "yogurt: dairy",
+    "carrot: vegetable",
+]
+
+
+@ui.component
+def content_list(data):
+    # map the text items to components
+    components = [ui.text(item) for item in data]
+    return ui.flex(components, direction="column")
+
+
+my_content_list = content_list(food)
+```
+
+## Filter lists of items
+
+If you want a way to only show items of type vegetable, you can use the Python `filter` function to return just those items.
+
+```python
+from deephaven import ui
+
+food = [
+    "apple: fruit",
+    "broccoli: vegetable",
+    "banana: fruit",
+    "yogurt: dairy",
+    "carrot: vegetable",
+]
+
+
+@ui.component
+def content_list(data, data_type):
+    # filter for items that end with the desired data type
+    filtered = list(filter(lambda item: item.endswith(data_type), data))
+    # map the text items to components
+    components = [ui.text(item) for item in filtered]
+    return ui.flex(components, direction="column")
+
+
+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 exactly what 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",
+    )
+
+
+@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,
+                # 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",
+    )
+
+
+cells = ui_cells()
+```
diff --git a/plugins/ui/docs/sidebar.json b/plugins/ui/docs/sidebar.json
index 25fe4e356..d0f924735 100644
--- a/plugins/ui/docs/sidebar.json
+++ b/plugins/ui/docs/sidebar.json
@@ -49,6 +49,10 @@
             "label": "Conditional Rendering",
             "path": "describing/conditional_rendering.md"
           },
+          {
+            "label": "Render Lists",
+            "path": "describing/render_lists.md"
+          },
           {
             "label": "Pure Components",
             "path": "describing/pure_components.md"