feat: ListView actions #448
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
bmingles
force-pushed
the
445-list-view-actions
branch
from
40018d0 to
5bc8d47
Compare
bmingles
force-pushed
the
445-list-view-actions
branch
2 times, most recently
from
9c9e317 to
9acde26
Compare
bmingles
added a commit
to deephaven/web-client-ui
that referenced
this pull request
May 15, 2024
* Wrapper components for `ActionGroup` and `ActionMenu` to support primitive items * `ListActionGroup` and `ListActionMenu` components to support providing actions prop to `ListView` * `ListView` `actions` prop support The branch in [this PR](deephaven/deephaven-plugins#448) can be used to see this in action. I also published an alpha this branch ([0.77.1-alpha-listview-actions.4](https://www.npmjs.com/package/@deephaven/components/v/0.77.1-alpha-listview-actions.4)) to make types work in plugins ### Example of standalone `ui.action_group` and `ui.action_menu` ```python from deephaven import ui @ui.component def action_group(): action, on_action = ui.use_state("") selected_keys, set_selected_keys = ui.use_state(['Aaa']) selection_text = ui.text("Selection: " + ", ".join(map(str, selected_keys)), grid_column="span 2") return 'Action Group', (" - " if action else "") + action, ui.action_group( ui.item( ui.icon('vsAccount'), 'Aaa', text_value="Aaa" ), 'Bbb', 'Ccc', selection_mode="multiple", selected_keys=selected_keys, on_action=on_action, on_change=set_selected_keys, ), selection_text, ag = action_group() @ui.component def action_menu(): action, on_action = ui.use_state("") return 'Action Menu', (" - " if action else "") + action, ui.action_menu( ui.item( ui.icon('vsAccount'), 'Aaa', text_value="Aaa" ), 'Bbb', 'Ccc', on_action=on_action, align_self="start" ) am = action_menu() ``` ### Example showing actions in `ui.list_view` with different densities ```python import deephaven.ui as ui from deephaven import time_table import datetime initial_row_count=2000 icon_names = ['vsAccount'] columns = [ "Id=new Integer(i)", "Display=new String(`Display `+i)", "Description=new String(`Description `+i)", "Icon=(String) icon_names[0]" ] # Tables with initial row count of 200 that adds a row every second column_types_ticking = time_table("PT1S", start_time=datetime.datetime.now() - datetime.timedelta(seconds=initial_row_count)).update([ columns ]) column_types = empty_table(initial_row_count).update(columns) #### Component definitions #### @ui.component def labeled_lv(label, *args, **kwargs): return ui.flex( ui.text(label), ui.list_view( *args, **kwargs ), direction="column", flex=1, min_width=0, ) @ui.component def ui_list_view_table(data, density): value, set_value = ui.use_state([2, 4, 5]) # Action Groups ag_action, set_ag_action = ui.use_state(['', '']) on_ag_action=ui.use_callback(lambda a,i : set_ag_action([a,str(i)]), []) lv_actions = labeled_lv( "Actions (text only)", data, density=density, max_height=5000, key_column="Id", label_column="Display", icon_column="Icon", aria_label="List View", on_change=set_value, selected_keys=value, actions=ui.list_action_group( 'Edit', 'Delete', on_action=on_ag_action, ), ) lv_actions_icon = labeled_lv( "Actions (icon only)", data, density=density, max_height=5000, key_column="Id", label_column="Display", icon_column="Icon", aria_label="List View", on_change=set_value, selected_keys=value, actions=ui.list_action_group( ui.item( ui.icon('vsEdit'), ui.text('Edit'), key='Edit', ), ui.item( ui.icon('vsTrash'), ui.text('Delete'), key='Delete' ), max_width=80, button_label_behavior="collapse", overflow_mode="collapse", on_action=on_ag_action, ), ) action_group_text = ui.text("Action: " + ag_action[0] + ", Item: " + ag_action[1]) # Action Menus am_action, set_am_action = ui.use_state(['', '']) on_am_action=ui.use_callback(lambda a,i : set_am_action([a,str(i)]), []) lv_action_menu = labeled_lv( "Action Menu (text only)", data, density=density, max_height=5000, key_column="Id", label_column="Display", icon_column="Icon", aria_label="List View", selected_keys=value, on_change=set_value, actions=ui.list_action_menu( 'Edit', 'Delete', on_action=on_am_action, ), ) lv_action_menu2 = labeled_lv( "Action Menu (icons)", data, density=density, max_height=5000, key_column="Id", label_column="Display", icon_column="Icon", aria_label="List View", selected_keys=value, on_change=set_value, actions=ui.list_action_menu( ui.item( ui.icon('vsEdit'), ui.text('Edit'), key='Edit', text_value="Edit" ), ui.item( ui.icon('vsTrash'), ui.text('Delete'), key='Delete', text_value="Delete" ), on_action=on_am_action, ), ) action_menu_text = ui.text("Action: " + am_action[0] + ", Item: " + am_action[1]) return ui.flex( ui.flex( lv_actions, lv_actions_icon, direction="row", ), action_group_text, ui.flex( lv_action_menu, lv_action_menu2, direction="row" ), action_menu_text, direction="column", ) @ui.component def examples(data): density, set_density = ui.use_state(["COMPACT"]) return 'Density', ui.action_group( 'COMPACT', 'REGULAR', 'SPACIOUS', selected_keys=density, selection_mode="SINGLE", on_change=set_density ), ui_list_view_table(data, density[0]) lv_table = examples(column_types) # lv_table = examples(column_types_ticking) ```
bmingles
force-pushed
the
445-list-view-actions
branch
from
9acde26 to
39e0210
Compare
bmingles
force-pushed
the
445-list-view-actions
branch
from
39e0210 to
c11bb1c
Compare
mofojed
requested changes
May 21, 2024
Comment on lines
+4
to
+12
| def action_group(*children, **props): | ||
| """ | ||
| An ActionGroup is a grouping of ActionButtons that are related to one another. | ||
|
|
||
| Args: | ||
| children: A list of Item or primitive elements. | ||
| **props: Any other ActionGroup prop. | ||
| """ | ||
| return BaseElement(f"deephaven.ui.components.ActionGroup", *children, **props) |
There was a problem hiding this comment.
We need a follow-up TODO to explicitly add/document the props for this. @AkshatJawne could take that on, get him exposed to updating some Python code in a plugin.
@AkshatJawne as a precursor to what I mean, it would be similar to this change: https://github.com/deephaven/deephaven-plugins/pull/306/files
Right now this code accepts any keyword argument, but we want to explicitly add any prop that can be used and document it. They would generally map to the same props that are available on the UI component this maps to (in this case, the Spectrum ActionGroup).
There was a problem hiding this comment.
Sounds good, will take a look and get started!
|
@mofojed I made suggested changes and created follow up tickets for the pydocs. |
Merged
mofojed
approved these changes
May 23, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Testing
list_viewactions prop as well as initem_table_sourceresolves #445