Skip to content

Commit

Permalink
adding tooltip and other minor details
Browse files Browse the repository at this point in the history
  • Loading branch information
@jnumainville
jnumainville committed Feb 26, 2024
1 parent 1a308d8 commit 2f7f522
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 25 deletions.
61 changes: 42 additions & 19 deletions plugins/ui/DESIGN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1037,7 +1037,7 @@ A section that can be added to a menu, such as a `ui.picker`. Children are the d
```py
import deephaven.ui as ui
ui.section(
*children: PickerOption,
*children: PickerItem,
title: str | None = None,
**props: Any
) -> SectionElement
Expand All @@ -1046,21 +1046,21 @@ ui.section(
###### Parameters
| Parameter | Type | Description |
|-----------------------|-----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
| `*children` | `PickerOption` | The options to render within the section. |
| `*children` | `PickerItem` | The options to render within the section. |
| `title` | `str \| None` | The title of the section. |
| `**props` | `Any` | Any other Section prop |

##### ui.picker
A picker that can be used to select from a list. Children should be one of four types:
If children are of type `PickerOption`, they are the dropdown options.
If children are of type `PickerItem`, they are the dropdown options.
If children are of type `SectionElement`, they are the dropdown sections.
If children are of type `Table`, the values in the table are the dropdown options. There can only be one child, the `Table`.
If children are of type `PartitionedTable`, the values in the table are the dropdown options and the partitions create multiple sections. There can only be one child, the `PartitionedTable`.

```py
import deephaven.ui as ui
ui.picker(
*children: PickerOption | SectionElement | Table | PartitionedTable,
*children: PickerItem | SectionElement | Table | PartitionedTable,
key_column: ColumnName | None = None,
label_column: ColumnName | None = None,
description_column: ColumnName | None = None,
Expand All @@ -1069,23 +1069,27 @@ ui.picker(
default_selected_key: Key | None = None,
selected_key: Key | None = None,
on_selection_change: Callable[[Key], None] | None = None,
on_change: Callable[[Key], None] | None = None,
tooltip: bool | TooltipOptions | None = None,
**props: Any
) -> ItemElement
```

###### Parameters
| Parameter | Type | Description |
|------------------------|---------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `*children` | `PickerOption \| SectionElement \| Table \| PartitionedTable` | The options to render within the picker. |
| `key_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to use as item keys. Defaults to the first column. |
| `label_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to display as primary text. Defaults to the `key_column` value. |
| `description_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to display as descriptions. |
| `icon_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to map to icons. |
| `title_column` | `ColumnName \| None` | Only valid if children is of type `PartitionedTable`. The column of values to display as section names. Should be the same for all values in the constituent `Table`. If not specified, the section titles will be created from the `key_columns` of the `PartitionedTable`. |
| `default_selected_key` | `Key \| None` | The initial selected key in the collection (uncontrolled). |
| `selected_key` | `Key \| None` | The currently selected key in the collection (controlled). |
| `on_selection_change` | `Callable[[Key], None] \| None` | Handler that is called when the selection changes. |
| `**props` | `Any` | Any other [Picker](https://react-spectrum.adobe.com/react-spectrum/Picker.html) prop, with the exception of `items` |
| Parameter | Type | Description |
|------------------------|--------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `*children` | `PickerItem \| SectionElement \| Table \| PartitionedTable` | The options to render within the picker. |
| `key_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to use as item keys. Defaults to the first column. |
| `label_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to display as primary text. Defaults to the `key_column` value. |
| `description_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to display as descriptions. |
| `icon_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to map to icons. |
| `title_column` | `ColumnName \| None` | Only valid if children is of type `PartitionedTable`. The column of values to display as section names. Should be the same for all values in the constituent `Table`. If not specified, the section titles will be created from the `key_columns` of the `PartitionedTable`. |
| `default_selected_key` | `Key \| None` | The initial selected key in the collection (uncontrolled). |
| `selected_key` | `Key \| None` | The currently selected key in the collection (controlled). |
| `on_selection_change` | `Callable[[Key], None] \| None` | Handler that is called when the selection changes. |
| `on_change` | `Callable[[Key], None] \| None` | Alias of `on_selection_change`. Handler that is called when the selection changes. |
| `tooltip` | `bool \| TooltipOptions \| None` | Whether to show a tooltip on hover. If `True`, the tooltip will show. If `TooltipOptions`, the tooltip will be created with the specified options. |
| `**props` | `Any` | Any other [Picker](https://react-spectrum.adobe.com/react-spectrum/Picker.html) prop, with the exception of `items`, `validate`, `errorMessage` (as a callback) and `onLoadMore` |

```py
import deephaven.ui as ui
Expand Down Expand Up @@ -1698,8 +1702,25 @@ TableData = dict[ColumnName, ColumnData]
TransformedData = Any
# Stringable is a type that is naturally convertible to a string
Stringable = str | int | float | bool
PickerOption = Stringable | ItemElement
PickerItem = Stringable | ItemElement
Key = Any
PlacementOptions = Literal[
'auto',
'auto-start',
'auto-end',
'top',
'top-start',
'top-end',
'bottom',
'bottom-start',
'bottom-end',
'right',
'right-start',
'right-end',
'left',
'left-start',
'left-end'
]

T = TypeVar("T")
Combination: TypeAlias = T | set[T] | Sequence[T]
Expand All @@ -1710,8 +1731,6 @@ ColumnIndexCombination = Combination[ColumnIndex]
CellIndexCombination = Combination[CellIndex]
SelectionStyleCombination = Combination[SelectionStyle]

```

# Set a filter for a dashboard. Filter will apply to all items with a matching column/type, except for items specified in the `exclude_ids` parameter
class DashboardFilter(TypedDict):
# Name of column to filter on
Expand Down Expand Up @@ -1748,6 +1767,10 @@ class LinkPoint(TypedDict):
# Column to link to
column: str

# Typed dictionaty for tooltip options
# https://popper.js.org/docs/v2/constructors/#options
class TooltipOptions(TypedDict):
placement: Optional[PlacementOptions]
```

#### Context
Expand Down
38 changes: 34 additions & 4 deletions plugins/ui/src/deephaven/ui/components/picker.py
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,40 @@
from __future__ import annotations

from typing import Callable, Any
from typing import Callable, Any, Literal, Optional, TypedDict

from deephaven.table import Table, PartitionedTable
from .section import SectionElement, PickerOption
from .section import SectionElement, PickerItem
from ..elements import BaseElement
from .._internal.utils import create_props
from ..types import ColumnName, Key

PickerElement = BaseElement

PlacementOptions = Literal[
"auto",
"auto-start",
"auto-end",
"top",
"top-start",
"top-end",
"bottom",
"bottom-start",
"bottom-end",
"right",
"right-start",
"right-end",
"left",
"left-start",
"left-end",
]


class TooltipOptions(TypedDict):
placement: Optional[PlacementOptions]


def picker(
*children: PickerOption | SectionElement | Table | PartitionedTable,
*children: PickerItem | SectionElement | Table | PartitionedTable,
key_column: ColumnName | None = None,
label_column: ColumnName | None = None,
description_column: ColumnName | None = None,
Expand All @@ -21,11 +43,13 @@ def picker(
default_selected_key: Key | None = None,
selected_key: Key | None = None,
on_selection_change: Callable[[Key], None] | None = None,
on_change: Callable[[Key], None] | None = None,
tooltip: bool | TooltipOptions | None = None,
**props: Any,
) -> PickerElement:
"""
A picker that can be used to select from a list. Children should be one of four types:
If children are of type PickerOption, they are the dropdown options.
If children are of type PickerItem, they are the dropdown options.
If children are of type SectionElement, they are the dropdown sections.
If children are of type Table, the values in the table are the dropdown options.
There can only be one child, the Table.
Expand Down Expand Up @@ -56,6 +80,12 @@ def picker(
The currently selected key in the collection (controlled).
on_selection_change:
Handler that is called when the selection changes.
on_change:
Alias of `on_selection_change`. Handler that is called when the selection changes.
tooltip:
Whether to show a tooltip on hover.
If `True`, the tooltip will show.
If `TooltipOptions`, the tooltip will be created with the specified options.
**props:
Any other Picker prop, except items.
Expand Down
4 changes: 2 additions & 2 deletions plugins/ui/src/deephaven/ui/components/section.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@
from ..types import Stringable
from .item import ItemElement

PickerOption = Union[Stringable, ItemElement]
PickerItem = Union[Stringable, ItemElement]
SectionElement = Element


def section(
*children: PickerOption, title: str | None = None, **props: Any
*children: PickerItem, title: str | None = None, **props: Any
) -> SectionElement:
"""
A section that can be added to a menu, such as a picker. Children are the dropdown options.
Expand Down

0 comments on commit 2f7f522

Please sign in to comment.