Skip to content

Commit

Permalink
fix merge
Browse files Browse the repository at this point in the history
  • Loading branch information
dgodinez-dh committed Dec 20, 2024
2 parents eb6f667 + 30f3730 commit 7bc926d
Show file tree
Hide file tree
Showing 18 changed files with 535 additions and 3 deletions.
27 changes: 27 additions & 0 deletions .github/workflows/typescript-check.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
name: Check TypeScript types

on:
push:
branches:
- main
- 'release/**'
- 'feature/**'
pull_request:
branches:
- main
- 'release/**'
- 'feature/**'

jobs:
typescript-check:
runs-on: ubuntu-latest
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
steps:
- uses: actions/checkout@v4
- name: Install dependencies
run: npm ci
- name: Check TypeScript types
run: python tools/check_typescript_ci.py

Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function DashboardPlugin({
widget: VariableDefinition;
}) => {
const { id: widgetId, name, type } = widget;
if (type === dh.VariableType.TABLE || type === dh.VariableType.FIGURE) {
if (type === 'Table' || type === 'Figure') {
// Just ignore table and figure types - only want interesting other types
return;
}
Expand Down
Binary file added plugins/ui/docs/_assets/pure_components1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added plugins/ui/docs/_assets/pure_components2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added plugins/ui/docs/_assets/pure_components3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
59 changes: 59 additions & 0 deletions plugins/ui/docs/components/logic_button.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# Logic Button

A Logic Button shows an operator in a boolean logic sequence.

## Example

```python
from deephaven import ui

my_logic_button_basic = ui.logic_button("Or", variant="or")
```

## Events

Logic buttons handles user interaction through the `on_press` prop.

```python
from deephaven import ui


@ui.component
def ui_toggle_logic_button():
variant, set_variant = ui.use_state("or")

return ui.logic_button(
variant,
variant=variant,
on_press=lambda: set_variant("and" if variant == "or" else "or"),
)


my_toggle_logic_button = ui_toggle_logic_button()
```

## Variants

```python
from deephaven import ui


@ui.component
def ui_logic_button_variants():

return [
ui.logic_button("Or", variant="or"),
ui.logic_button("And", variant="and"),
]


my_logic_button_variants = ui_logic_button_variants()
```

## Disabled state

```python
from deephaven import ui

my_logic_button_disabled = ui.logic_button("Or", variant="or", is_disabled=True)
```
116 changes: 116 additions & 0 deletions plugins/ui/docs/describing/pure_components.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
# Pure Components

A [pure function](https://en.wikipedia.org/wiki/Pure_function) returns the same value given the same arguments and has no side effects. By writing `deephaven.ui` components as pure functions, you can avoid bugs and unpredictable behavior.

## Unintentional side effects

The rendering process must always be pure. Component functions should always return the same value for the same arguments. They should not _change_ any objects or variables that existed before rendering. That would not be pure.

Here is a component that breaks this rule by reading and writing a `guest` variable declared outside of it:

```python
from deephaven import ui

guest = [0]


@ui.component
def cup():
# changing a preexisting variable
guest[0] += 1
return ui.text(f"Tea cup for guest {guest[0]}")


@ui.component
def tea_set():
return ui.flex(cup(), cup(), cup(), direction="column")


my_tea_set1 = tea_set()
my_tea_set2 = tea_set()
```

![side effects](../_assets/pure_components1.png)

Calling this component multiple times will produce different results. If other components read `guest`, they will produce different results, too, depending on when they are rendered. That is not predictable.

You can fix this component by passing `guest` as a prop instead:

```python
from deephaven import ui


@ui.component
def cup(guest):
return ui.text(f"Tea cup for guest {guest}")


@ui.component
def tea_set():
return ui.flex(cup(guest=1), cup(guest=2), cup(guest=3), direction="column")


my_tea_set1 = tea_set()
my_tea_set2 = tea_set()
```

![side effects 2](../_assets/pure_components2.png)

Now the component is pure. Its returns only depend on the `guest` prop.

In general, you should not expect components to be rendered in any particular order. Each component should only “think for itself”, and not attempt to coordinate with or depend upon others during rendering.

## Local mutations

Pure functions do not mutate variables outside of the function's scope or objects that were created before the function call. However, it is fine to change variables and objects created inside the function. In this example, the component creates a list and adds a dozen cups to it:

```python
from deephaven import ui


@ui.component
def cup(guest):
return ui.text(f"Tea cup for guest {guest}")


@ui.component
def tea_set():
cups = []
for i in range(1, 13):
cups.append(cup(guest=i))
return ui.flex(cups, direction="column")


my_tea_set1 = tea_set()
my_tea_set2 = tea_set()
```

![local mutations](../_assets/pure_components3.png)

If the `cups` variable was outside the `tea_set` function, this would be a problem. You would be changing a preexisting object by appending items to that list.

However, because you created them during the same render, no code outside of `tea_set` will be impacted by this. This is a local mutation.

## Intentional side effects

While the rendering process must remain pure, at some point, something needs to change. You may need to print a message, update the screen, start an animation, or change data. These changes are called side effects. They must happen on the side rather than during rendering.

In `deephaven.ui`, side effects usually belong in event handlers. Event handlers are functions that run when you perform some action like clicking a button. Even though the event handlers are defined inside your component, they do not run during rendering, so even handlers do not need to be pure.

```python
from deephaven import ui


@ui.component
def event_handler_example():
# An event handler for a button
def button_handler():
print("button pressed")

return ui.button("button", on_press=button_handler)


my_event_handler_example = event_handler_example()
```

If an event handler is not the correct place for a certain side effect, you can place it in a [`use_effect`](../hooks/use_effect.md) hook. This tells `deephaven.ui` to execute it later, after rendering, when side effects are allowed.
8 changes: 8 additions & 0 deletions plugins/ui/docs/sidebar.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@
{
"label": "Render Lists",
"path": "describing/render_lists.md"
},
{
"label": "Pure Components",
"path": "describing/pure_components.md"
}
]
},
Expand Down Expand Up @@ -170,6 +174,10 @@
"label": "list_view",
"path": "components/list_view.md"
},
{
"label": "logic_button",
"path": "components/logic_button.md"
},
{
"label": "markdown",
"path": "components/markdown.md"
Expand Down
2 changes: 2 additions & 0 deletions plugins/ui/src/deephaven/ui/components/__init__.py
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
from .list_action_group import list_action_group
from .list_action_menu import list_action_menu
from .list_view import list_view
from .logic_button import logic_button
from .make_component import make_component as component
from .markdown import markdown
from .meter import meter
Expand Down Expand Up @@ -108,6 +109,7 @@
"list_view",
"list_action_group",
"list_action_menu",
"logic_button",
"html",
"markdown",
"meter",
Expand Down
Loading

0 comments on commit 7bc926d

Please sign in to comment.