diff --git a/plugins/ui/docs/_assets/your_ui_as_a_tree1.png b/plugins/ui/docs/_assets/your-ui-as-a-tree1.png similarity index 100% rename from plugins/ui/docs/_assets/your_ui_as_a_tree1.png rename to plugins/ui/docs/_assets/your-ui-as-a-tree1.png diff --git a/plugins/ui/docs/describing/your_ui_as_a_tree.md b/plugins/ui/docs/describing/your-ui-as-a-tree.md similarity index 84% rename from plugins/ui/docs/describing/your_ui_as_a_tree.md rename to plugins/ui/docs/describing/your-ui-as-a-tree.md index 478cceb61..44be7d5e6 100644 --- a/plugins/ui/docs/describing/your_ui_as_a_tree.md +++ b/plugins/ui/docs/describing/your-ui-as-a-tree.md @@ -63,7 +63,7 @@ def app(): my_app = app() ``` -![my_app](../_assets/your_ui_as_a_tree1.png) +![my_app](../_assets/your-ui-as-a-tree1.png) ```mermaid flowchart TD @@ -132,21 +132,3 @@ In this example, depending on the `flag` , we may render `ui.text` or `ui.headin 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 the components 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 and are often frequently re-rendered. Identifying these categories of components are useful for understanding data flow and performance of your component. - -## The dependency tree - -Another relationship in a `deephaven.ui` query that can be modeled with a tree are a query's dependencies. Each node in a dependency tree is a module and each branch represents an import statement in that module. - -If we take the previous app, we can build a dependency tree. - -```mermaid -flowchart TD - A[app] -->|imports| B[ui] - A -->|imports| C[random] -``` - -Comparing to the render tree of the same app, there are similar structures but some notable differences: - -- The nodes that make-up the tree represent modules, not components. -- Non-component modules, like `random`, are also represented in this tree. The render tree only encapsulates components. -- Dependency trees are useful to determine what modules are necessary to run your `deephaven.ui` query. diff --git a/plugins/ui/docs/sidebar.json b/plugins/ui/docs/sidebar.json index 1e2f6ac64..369a10aaf 100644 --- a/plugins/ui/docs/sidebar.json +++ b/plugins/ui/docs/sidebar.json @@ -51,7 +51,7 @@ }, { "label": "Your UI as a Tree", - "path": "describing/your_ui_as_a_tree.md" + "path": "describing/your-ui-as-a-tree.md" } ] },