diff --git a/package-lock.json b/package-lock.json index 7d00aff72..05d19d59e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32033,7 +32033,7 @@ }, "plugins/plotly-express/src/js": { "name": "@deephaven/js-plugin-plotly-express", - "version": "0.12.0", + "version": "0.12.1", "license": "Apache-2.0", "dependencies": { "@deephaven/chart": "0.97.0", @@ -32318,7 +32318,7 @@ }, "plugins/ui/src/js": { "name": "@deephaven/js-plugin-ui", - "version": "0.23.1", + "version": "0.24.0", "license": "Apache-2.0", "dependencies": { "@deephaven/chart": "^0.99.0", diff --git a/plugins/plotly-express/CHANGELOG.md b/plugins/plotly-express/CHANGELOG.md index dace500b4..88b82fa39 100644 --- a/plugins/plotly-express/CHANGELOG.md +++ b/plugins/plotly-express/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines. - - - +## plotly-express-v0.12.1 - 2024-12-12 +#### Bug Fixes +- switch to webgl by default for line plot (#992) - (2c7bc01) - Joe + +- - - + ## plotly-express-v0.12.0 - 2024-11-23 #### Bug Fixes - `dx` now respects the webgl flag (#934) - (9cdf1ee) - Joe diff --git a/plugins/plotly-express/setup.cfg b/plugins/plotly-express/setup.cfg index 7c1405431..501796c6c 100644 --- a/plugins/plotly-express/setup.cfg +++ b/plugins/plotly-express/setup.cfg @@ -3,7 +3,7 @@ name = deephaven-plugin-plotly-express description = Deephaven Chart Plugin long_description = file: README.md long_description_content_type = text/markdown -version = 0.12.0.dev0 +version = 0.12.1.dev0 url = https://github.com/deephaven/deephaven-plugins project_urls = Source Code = https://github.com/deephaven/deephaven-plugins diff --git a/plugins/plotly-express/src/js/package.json b/plugins/plotly-express/src/js/package.json index 5bf082ab3..61c4739ef 100644 --- a/plugins/plotly-express/src/js/package.json +++ b/plugins/plotly-express/src/js/package.json @@ -1,6 +1,6 @@ { "name": "@deephaven/js-plugin-plotly-express", - "version": "0.12.0", + "version": "0.12.1", "description": "Deephaven plotly express plugin", "keywords": [ "Deephaven", diff --git a/plugins/ui/CHANGELOG.md b/plugins/ui/CHANGELOG.md index 28d768713..557e10ac6 100644 --- a/plugins/ui/CHANGELOG.md +++ b/plugins/ui/CHANGELOG.md @@ -2,6 +2,21 @@ All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines. - - - +## ui-v0.24.0 - 2024-12-12 +#### Bug Fixes +- UI loading duplicate panels in embed iframe (#1043) - (e1559a4) - Matthew Runyon +#### Documentation +- Working with Tables (#1059) - (6e73350) - dgodinez-dh +- Importing and Exporting Components (#1054) - (21b752c) - dgodinez-dh +- Your First Component (#1052) - (ce3843a) - dgodinez-dh +- Add Stack with tabs to dashboard docs (#1048) - (cf0c994) - mofojed +#### Features +- ui.meter (#1032) - (6730aa9) - ethanalvizo +- ui.avatar (#1027) - (2738a1d) - Akshat Jawne +- Toast Implementation (#1030) - (e53b322) - dgodinez-dh + +- - - + ## ui-v0.23.1 - 2024-11-23 - - - diff --git a/plugins/ui/docs/_assets/conditional_rendering1.png b/plugins/ui/docs/_assets/conditional_rendering1.png new file mode 100644 index 000000000..16dbe5eaf Binary files /dev/null and b/plugins/ui/docs/_assets/conditional_rendering1.png differ diff --git a/plugins/ui/docs/_assets/conditional_rendering2.png b/plugins/ui/docs/_assets/conditional_rendering2.png new file mode 100644 index 000000000..98075135d Binary files /dev/null and b/plugins/ui/docs/_assets/conditional_rendering2.png differ diff --git a/plugins/ui/docs/_assets/conditional_rendering3.png b/plugins/ui/docs/_assets/conditional_rendering3.png new file mode 100644 index 000000000..feae519d1 Binary files /dev/null and b/plugins/ui/docs/_assets/conditional_rendering3.png differ diff --git a/plugins/ui/docs/describing/conditional_rendering.md b/plugins/ui/docs/describing/conditional_rendering.md new file mode 100644 index 000000000..bd92cec11 --- /dev/null +++ b/plugins/ui/docs/describing/conditional_rendering.md @@ -0,0 +1,191 @@ +# Conditional Rendering + +Your components will often need to display different things depending on different conditions. In `deephaven.ui`, you can conditionally render components using Python syntax like if statements, the `and` operator, and the ternary operator. + +## Conditional returning + +Consider a `packing_list` component rendering several `item` components, which can be marked as packed or not: + +```python +from deephaven import ui + + +@ui.component +def item(name, is_packed): + return ui.text("- ", name) + + +@ui.component +def packing_list(): + return ui.flex( + ui.heading("Packing list"), + item("Clothes", is_packed=True), + item("Shoes", is_packed=True), + item("Wallet", is_packed=False), + direction="column", + ) + + +my_packing_list = packing_list() +``` + +![my_packing_list](../_assets/conditional_rendering1.png) + +Some of the `item` components have their `is_packed` prop set to `True` instead of `False`. + +To add a checkmark (✅) to packed items if `is_packed=True`, you can write an if/else statement like so: + + +```python +from deephaven import ui + + +@ui.component +def item(name, is_packed): + if is_packed: + return ui.text("- ", name + " ✅") + return ui.text("- ", name) + + +@ui.component +def packing_list(): + return ui.flex( + ui.heading("Packing list"), + item("Clothes", is_packed=True), + item("Shoes", is_packed=True), + item("Wallet", is_packed=False), + direction="column", + ) + + +my_packing_list = packing_list() +``` + +![my_packing_list2](../_assets/conditional_rendering2.png) + +Notice you are creating branching logic with Python's `if` and `return` statements. In `deephaven.ui`, control flow (like conditions) is handled by Python. + +### Conditionally return nothing with `None` + +In some situations, you do not want to render anything at all. For example, you do not want to show any packed items. A component must return something. In this case, you can return `None`: + +```python +from deephaven import ui + + +@ui.component +def item(name, is_packed): + if is_packed: + return None + return ui.text("- ", name) + + +@ui.component +def packing_list(): + return ui.flex( + ui.heading("Packing list"), + item("Clothes", is_packed=True), + item("Shoes", is_packed=True), + item("Wallet", is_packed=False), + direction="column", + ) + + +my_packing_list = packing_list() +``` + +![my_packing_list3](../_assets/conditional_rendering3.png) + +If `is_packed` is `True`, the component will return nothing. Otherwise, it will return a component to render. + +In practice, returning `None` from a component is not common because it might surprise a developer trying to render it. More often, you would conditionally include or exclude the component in the parent component. The next section explains how to do that. + +## Conditionally including components + +In the previous example, you controlled which component would be returned by using an [`if`/`else` statement](https://docs.python.org/3/tutorial/controlflow.html#if-statements). This led to some code duplication. You can remove this duplication by conditionally including components. + +### Conditional ternary + +Python has a [ternary conditional](https://docs.python.org/3/reference/expressions.html#conditional-expressions) in the form: `a if condition else b`. This can simplify the `item` component. + +```python +from deephaven import ui + + +@ui.component +def item(name, is_packed): + return ui.text("- ", name + " ✅" if is_packed else name) + + +@ui.component +def packing_list(): + return ui.flex( + ui.heading("Packing list"), + item("Clothes", is_packed=True), + item("Shoes", is_packed=True), + item("Wallet", is_packed=False), + direction="column", + ) + + +my_packing_list = packing_list() +``` + +### Logical `and` operator + +Another common shortcut is the Python [logical `and` operator](https://docs.python.org/3/reference/expressions.html#and). Inside `deephaven.ui` components, it often comes up when you want to render a component when the condition is `True`, or render nothing otherwise. With `and`, you could conditionally render the checkmark only if `is_packed` is `True`: + +```python +from deephaven import ui + + +@ui.component +def item(name, is_packed): + return ui.text("- ", name, is_packed and " ✅") + + +@ui.component +def packing_list(): + return ui.flex( + ui.heading("Packing list"), + item("Clothes", is_packed=True), + item("Shoes", is_packed=True), + item("Wallet", is_packed=False), + direction="column", + ) + + +my_packing_list = packing_list() +``` + +A Python `and` expression returns the value of its right side (in our case, the checkmark) if the left side (our condition) is `True`. But if the condition is `False`, the whole expression becomes `False`. `deephaven.ui` considers `False` to be like `None` and does not render anything in its place. + +### Conditionally assigning to a variable + +When the shortcuts get in the way of writing plain code, try using an `if` statement and a variable. You can reassign variables, so start by providing the default content you want to display. Use an `if` statement to reassign an expression to `item_content` if `is_packed` is `True`. + +```python +from deephaven import ui + + +@ui.component +def item(name, is_packed): + item_content = name + if is_packed: + item_content = name + " ✅" + return ui.text("- ", item_content) + + +@ui.component +def packing_list(): + return ui.flex( + ui.heading("Packing list"), + item("Clothes", is_packed=True), + item("Shoes", is_packed=True), + item("Wallet", is_packed=False), + direction="column", + ) + + +my_packing_list = packing_list() +``` diff --git a/plugins/ui/docs/sidebar.json b/plugins/ui/docs/sidebar.json index 0454f2624..ac65e67b4 100644 --- a/plugins/ui/docs/sidebar.json +++ b/plugins/ui/docs/sidebar.json @@ -40,6 +40,10 @@ { "label": "Working with Tables", "path": "describing/work_with_tables.md" + }, + { + "label": "Conditional Rendering", + "path": "describing/conditional_rendering.md" } ] }, diff --git a/plugins/ui/setup.cfg b/plugins/ui/setup.cfg index 4a4948d6c..6af963036 100644 --- a/plugins/ui/setup.cfg +++ b/plugins/ui/setup.cfg @@ -3,7 +3,7 @@ name = deephaven-plugin-ui description = deephaven.ui plugin long_description = file: README.md long_description_content_type = text/markdown -version = 0.23.1.dev0 +version = 0.24.0.dev0 url = https://github.com/deephaven/deephaven-plugins project_urls = Source Code = https://github.com/deephaven/deephaven-plugins diff --git a/plugins/ui/src/js/package.json b/plugins/ui/src/js/package.json index 57c71f8b3..a51cc6cf4 100644 --- a/plugins/ui/src/js/package.json +++ b/plugins/ui/src/js/package.json @@ -1,6 +1,6 @@ { "name": "@deephaven/js-plugin-ui", - "version": "0.23.1", + "version": "0.24.0", "description": "Deephaven UI plugin", "keywords": [ "Deephaven",