From 2e1a725f6c6a344a1d1a1aa4b3029733c1a5b31b Mon Sep 17 00:00:00 2001 From: dgodinez-dh <77981300+dgodinez-dh@users.noreply.github.com> Date: Mon, 30 Dec 2024 07:57:45 -0700 Subject: [PATCH] docs: ui as a tree (#1067) https://deephaven.atlassian.net/browse/DOC-240 --------- Co-authored-by: Mike Bender Co-authored-by: margaretkennedy <82049573+margaretkennedy@users.noreply.github.com> --- .../ui/docs/_assets/your-ui-as-a-tree1.png | Bin 0 -> 12205 bytes .../ui/docs/_assets/your-ui-as-a-tree2.png | Bin 0 -> 15252 bytes .../ui/docs/describing/your-ui-as-a-tree.md | 136 ++++++++++++++++++ plugins/ui/docs/sidebar.json | 4 + 4 files changed, 140 insertions(+) create mode 100644 plugins/ui/docs/_assets/your-ui-as-a-tree1.png create mode 100644 plugins/ui/docs/_assets/your-ui-as-a-tree2.png create mode 100644 plugins/ui/docs/describing/your-ui-as-a-tree.md diff --git a/plugins/ui/docs/_assets/your-ui-as-a-tree1.png b/plugins/ui/docs/_assets/your-ui-as-a-tree1.png new file mode 100644 index 0000000000000000000000000000000000000000..5d572df7f6e4cc3b156f8bd56d91d87c7757dbbb GIT binary patch literal 12205 zcmdsdS6owF({B_J6ahsA6apwB3R0v)C;}?INQY2GKsrJobd(}0U8I)?(o5(GBoqOq zMS3qGR3VgrKnN{x;`6-Uxi}Z+=KG!R;#?$?ojrT@%&fI${=pS9Z$Kq;Gn3b2mn;Y(Vf^(Q?4(0sG52K z08Eg-pL4VJoW1~nkdoR{MFU^UO>CSy`$`t>&#{mbyY2(nxc-Tki-I=9ddt^MdaPɤ+cj5bLb)FYR!dyC+FR9!s6AtIAMzG49 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 literal 0 HcmV?d00001 diff --git a/plugins/ui/docs/_assets/your-ui-as-a-tree2.png b/plugins/ui/docs/_assets/your-ui-as-a-tree2.png new file mode 100644 index 0000000000000000000000000000000000000000..a892f06511ea5ec375742eb7873c757bd572ecca GIT binary patch literal 15252 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

KoYpD7fm2{=fZRypT>dJ=QBIl0`)gAr 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 EFOLTy761SM literal 0 HcmV?d00001 diff --git a/plugins/ui/docs/describing/your-ui-as-a-tree.md b/plugins/ui/docs/describing/your-ui-as-a-tree.md new file mode 100644 index 000000000..1d277c9bb --- /dev/null +++ b/plugins/ui/docs/describing/your-ui-as-a-tree.md @@ -0,0 +1,136 @@ +# Your UI as a Tree + +Your `deephaven.ui` query is taking shape with many components being nested within each other. How does `deephaven.ui` keep track of your query's component structure? + +`deephaven.ui`, and many other UI libraries, model UI as a tree. This approach helps clarify the relationships between components and aids in debugging issues related to performance and state management. + +## UI as a tree + +Trees are a relationship model between items and UI is often represented using tree structures. For example, browsers use tree structures to model HTML (DOM) and CSS (CSSOM). Mobile platforms also use trees to represent their view hierarchy. + +```mermaid +flowchart LR + subgraph UI-Tree + A --> B + A --> C + end + X[ + Component A + Component B + Component C + ] + X --> UI-Tree --> DOM@{ shape: doc, label: "DOM" } +``` + +Like browsers and mobile platforms, `deephaven.ui` also uses tree structures to manage and model the relationship between components in a `deephaven.ui` query. These trees are useful tools to understand how data flows through a `deephaven.ui` query and how to optimize rendering. + +## The render tree + +A major feature of components is the ability to compose components of other components. As we nest components, we have the concept of parent and child components, where each parent component may itself be a child of another component. + +When we render a `deephaven.ui` app, we can model this relationship in a tree, known as the render tree. + +Here is a `deephaven.ui` app that renders random numbers. + +```python +from deephaven import ui +import random + + +@ui.component +def random_generator(): + num, set_num = ui.use_state() + + def generate(): + set_num(random.random()) + + return ui.flex( + ui.text(f"Random Number: {num}"), + ui.button("Generate random number", on_press=generate), + direction="column", + ) + + +@ui.component +def app(): + return ui.flex( + ui.heading("Random Number Generator"), + random_generator(), + direction="column", + ) + + +my_app = app() +``` + +![my_app](../_assets/your-ui-as-a-tree1.png) + +```mermaid +flowchart TD + A[app] -->|renders| B[ui.flex] + B -->|renders| C[ui.heading] + B -->|renders| D[random_generator] + D -->|renders| E[ui.flex] + E -->|renders| F[ui.text] + E -->|renders| G[ui.button] +``` + +From the example app, we can construct the above render tree. Each arrow in the tree points from a parent component to a child component. + +A render tree represents a single render pass of a `deephaven.ui` component. With conditional rendering, a parent component may render different children depending on the data passed. + +We can update the app to conditionally render either a `ui.text` or a `ui.heading`. + +```python +from deephaven import ui +import random + + +@ui.component +def random_generator(): + num, set_num = ui.use_state() + flag, set_flag = ui.use_boolean() + + def generate(): + set_flag.toggle() + set_num(random.random()) + + return ui.flex( + ui.text(f"Random text: {num}") + if flag + else ui.heading(f"Random heading: {num}"), + ui.button("Generate random number", on_press=generate), + direction="column", + ) + + +@ui.component +def app(): + return ui.flex( + ui.heading("Random Number Generator"), + random_generator(), + direction="column", + ) + + +my_app = app() +``` + +![my_app](../_assets/your-ui-as-a-tree2.png) + +```mermaid +flowchart TD + A[app] -->|renders| B[ui.flex] + B -->|renders| C[ui.heading] + B -->|renders| D[random_generator] + D -->|renders| E[ui.flex] + E -->|renders?| F[ui.text] + E -->|renders?| G[ui.heading] + E -->|renders| H[ui.button] +``` + +In this example, depending on the `flag` , we may render `ui.text` or `ui.heading`. The render tree may be different for each render pass. + +Although render trees may differ across render passes, these trees are generally helpful for identifying what the top-level and leaf components are in a `deephaven.ui` component. Top-level components are those nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components. They are often frequently re-rendered. + +Identifying these categories of components is useful for understanding the data flow and performance of your component. diff --git a/plugins/ui/docs/sidebar.json b/plugins/ui/docs/sidebar.json index d0f924735..85cd16769 100644 --- a/plugins/ui/docs/sidebar.json +++ b/plugins/ui/docs/sidebar.json @@ -56,6 +56,10 @@ { "label": "Pure Components", "path": "describing/pure_components.md" + }, + { + "label": "Your UI as a Tree", + "path": "describing/your-ui-as-a-tree.md" } ] },