Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Picker table support #382

Merged
merged 10 commits into from
Apr 3, 2024

Conversation

bmingles
Copy link
Contributor

@bmingles bmingles commented Mar 22, 2024

  • Picker table support
  • update-dh-packages script now excludes jsapi-types package from custom target version since it has its own version cadence
  • Updated DHC packages to ^0.71.0
  • Updated jsapi-types to ^1.0.0-dev0.33.3

resolves #293

bmingles added a commit to deephaven/web-client-ui that referenced this pull request Mar 27, 2024
Initial table support for Picker
- key and value column support
- Scroll to selected item when popover opens
- Viewport data now supports re-use of existing item objects via
`reuseItemsOnTableResize` flag

## Testing
### Scroll to item fix for non-table data (this should work without any
changes to plugins repo)

```python
import deephaven.ui as ui
from deephaven.ui import use_state

items = list("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz")

@ui.component
def picker():
    value, set_value = use_state("M")

    # Picker for selecting values
    pick = ui.picker(
        label="Text",
        on_selection_change=set_value,
        selected_key=value,
        children=items
    )

    # Show current selection in a ui.text component
    text = ui.text("Selection: " + value)

    # Display picker and output in a flex column
    return ui.flex(
        pick,
        text,
        direction="column",
        margin=10,
        gap=10,
    )


p = picker()
```

### Table support
There is a draft PR in the plugins repo that enables the table support
on the plugins side of things (note that it currently will have type
errors but should run)
deephaven/deephaven-plugins#382

Here's an example that demonstrates a large number of items that also
tick

```python
import deephaven.ui as ui
from deephaven.ui import use_state
from deephaven import time_table
import datetime

mylist = ["mars", "pluto", "saturn"]

simple_ticking = time_table("PT2S", start_time=datetime.datetime.now() - datetime.timedelta(seconds=2000)).update([
    'Id=(new Integer(i * 100))',
    "Planet=mylist[ (int) (3 * Math.random()) % 3 ]",
])


@ui.component
def picker():
    value, set_value = use_state(13800)

    print("Test", value)

    # Picker for selecting values
    pick = ui.picker(
        simple_ticking,
        key_column="Id",
        label_column="Planet",
        label="Text",
        on_selection_change=set_value,
        selected_key=value,
    )

    # Show current selection in a ui.text component
    text = ui.text("Selection: " + str(value))

    # Display picker and output in a flex column
    return ui.flex(
        pick,
        text,
        direction="column",
        margin=10,
        gap=10,
    )


picker_table = picker()
```

resolves #1858
@bmingles bmingles marked this pull request as ready for review March 28, 2024 13:33
@bmingles bmingles requested a review from mofojed March 28, 2024 13:33
plugins/ui/src/js/src/DashboardPlugin.tsx Outdated Show resolved Hide resolved
plugins/ui/src/js/src/DashboardPlugin.tsx Outdated Show resolved Hide resolved
plugins/ui/src/js/src/elements/Picker.tsx Outdated Show resolved Hide resolved
maybeExportedObject,
]);

if (isElementOfType(children, ObjectView)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd extract this logic to a boolean to make it clear and use it above as well, e.g.

const isTableSource = isElementOfType(children, ObjectView) && children.props.object.type === 'Table';`

const maybeExportedObject = isTableSource ? ... : ...

Something like that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to tweak this slightly to deal with the case where it is an ObjectView but not a Table

@bmingles bmingles requested a review from mofojed April 3, 2024 15:55
@bmingles bmingles merged commit 2f84c96 into deephaven:main Apr 3, 2024
13 checks passed
@bmingles bmingles deleted the 293-picker-table-support branch April 3, 2024 17:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ui.picker Implementation with table as data source (JS)
2 participants