Skip to content

feat: Picker table support#382

Merged
bmingles merged 10 commits intodeephaven:mainfrom
bmingles:293-picker-table-support
Apr 3, 2024
Merged

feat: Picker table support#382
bmingles merged 10 commits intodeephaven:mainfrom
bmingles:293-picker-table-support

Conversation

@bmingles
Copy link
Copy Markdown
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 bmingles force-pushed the 293-picker-table-support branch from 1f098e7 to 6051fff Compare March 27, 2024 15:32
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
Comment thread plugins/ui/src/js/src/DashboardPlugin.tsx Outdated
Comment thread plugins/ui/src/js/src/DashboardPlugin.tsx Outdated
Comment thread plugins/ui/src/js/src/elements/Picker.tsx
maybeExportedObject,
]);

if (isElementOfType(children, ObjectView)) {
Copy link
Copy Markdown
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
Copy Markdown
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
@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