EPIC: deephaven.ui

[mofojed]

Epic ticket for the deephaven.ui framework for programmatic layouts and callbacks.

General:

• Discuss requirements with team in Requirements Doc.
• feat: deephaven.ui plugin prototype initial checkin #47

Python:

All features require pydocs and examples for each item.

• Create deephaven.ui module, testing #51
• Create render context/lifecycle #52
• Render into virtual object model (e.g. Virtual DOM) #53
• Create @ui.component #54
• Create hooks #55
• deephaven.ui Layout components #61
• Create Spectrum elements (Python) #63
• Define messaging protocol to send delta updates to client #67
• Create ui.pq_table component (some way to reference other table from another PQ that resolves on the client)
• Create HTML elements #56
• Create use_table_listener hook #96
• Enforce typing on all things (no unknown typing) #97
• Queue state updates to trigger re-render after current update cycle #116

JavaScript:

• Create @deephaven/js-plugin-ui JS plugin, wired up with testing #57
• Create DashboardPlugin to open up components created by @ui.component. Render into one panel for now; multi-panel/dashboard layout comes in the next phase #58
• ElementPlugin for plugins to wire up displaying an object as an element #59
• Components for Spectrum elements (JavaScript) #75
• Update Linker to allow setting links between components (instead of just panels)
• Handle dehydrating/rehydrating of components (saving state) #92
• Components for HTML elements #60
• Register component type plugin for deephaven.ui (not just DashboardPlugin) #166

Communication:

• JSON Schema for messages #81
• Render error handling #85
• Handle document delta updates sent from the server #123
• Tables that have not changed between re-renders flicker #128

Other Components:

• ui.table #77
• ui.panel - Define a panel that contains other components and options #62
• ui.fluid container (for a report layout) #120
• Serialize events correctly when triggering callbacks (e.g. serialize the PressEvent in an onPress call correctly so it gets sent to the server) #76
• ui.dialog, ui.dialog_trigger implementation #933
• Popover?
• Toast #410
• Form
• ui.inline_alert #937
• Text input (Text Field - need to decide between input or field nomenclature)
• ui.text_area  #649
• Button
• Action button
• Toggle Button
• Menu
• Switch
• Slider
• Range slider
• Checkbox
• checkbox_group component #620
• Radio group
• Number Field
• ui.time_field #763
• Data input
• DatePicker - ui.date_picker component #367
• ui.date_field input #648
• ui.date_range_picker #764
• Color picker (someone could build something to adhoc format on a table)
• feat: ui.image #670
• Video
• ListView - Lists, single select, multiple select, checkboxes #335
• ui.progress_circle and ui.progress_bar #826
• Breadcrumbs
• ui.badge #935
• Links
• Tabs - ui.tabs to create a stack within a panel #127
• Accordions
• Details/Summary Expander
• Combobox #201
• Picker/Select/Dropdown #200
• TagGroup, TagGroup with picker?
• Text
• Pretty print/collapsible JSON viewer
• ui.markdown widget #890
• Mermaid diagrams
• Raw HTML (mostly just for formatting text, but unsafe/dangerously set html?)
• Heading
• Divider
• Download Button (creates a file)
• Fragment (ui.fragment) #134
• Console/IDE Component
• Shortcuts? On components? On the dashboard?
• scroll_area (view with overflow=auto, height=100%)
• Router #362
• ui.calendar #905
• ui.range_calendar #904
• ui.search_field #936
• ui.labeled_value #938
• ui.meter #939
• ui.avatar #940
• ui.logic_button #941

[kzk2000]

@mofojed as you suggested, posting my wish list of how to prioritize here, most important on top:

1. ui.picker
2. ui.table left 1-click / left double-click / right-click context menu overwrites -> enables more complex workflows
3. iframe urls for dashboards
4. working app mode that starts up DH with a dashboard
5. Datetime input and/or Range Calendar -> very useful for time ranged plotting
6. Markdown / Heading / Divider -> make the page look great
7. Menu

[dsmmcken]

Recent top enterprise requests:

• list_view
• combo_box
• date_picker/time_picker/date_range
• ui.table_view -> context menu, freeze column, formatting
• ui.flex examples/docs (customer had normal flexbox challenges and would like to see more examples)
• ability to turn off headers on ui.panel/ui.stacks
• dx.density_heatmap
• ui.modals
• toasts
• format bars