diff --git a/plugins/plotly-express/src/js/src/PlotlyExpressChartModel.ts b/plugins/plotly-express/src/js/src/PlotlyExpressChartModel.ts index 244f7991c..e2a86a8f0 100644 --- a/plugins/plotly-express/src/js/src/PlotlyExpressChartModel.ts +++ b/plugins/plotly-express/src/js/src/PlotlyExpressChartModel.ts @@ -126,7 +126,7 @@ export class PlotlyExpressChartModel extends ChartModel { return this.layout; } - override close() { + override close(): void { super.close(); this.widget?.close(); this.widget = undefined; @@ -180,7 +180,7 @@ export class PlotlyExpressChartModel extends ChartModel { this.widget = undefined; } - updateLayout(data: PlotlyChartWidgetData) { + updateLayout(data: PlotlyChartWidgetData): void { const { figure } = data; const { plotly } = figure; const { layout: plotlyLayout = {} } = plotly; @@ -255,7 +255,7 @@ export class PlotlyExpressChartModel extends ChartModel { this.fireUpdate(this.getData()); } - addTable(id: number, table: Table) { + addTable(id: number, table: Table): void { if (this.tableReferenceMap.has(id)) { return; } @@ -267,7 +267,7 @@ export class PlotlyExpressChartModel extends ChartModel { } } - subscribeTable(id: number) { + subscribeTable(id: number): void { const table = this.tableReferenceMap.get(id); const columnReplacements = this.tableColumnReplacementMap.get(id); @@ -292,7 +292,7 @@ export class PlotlyExpressChartModel extends ChartModel { } } - removeTable(id: number) { + removeTable(id: number): void { this.subscriptionCleanupMap.get(id)?.(); this.tableSubscriptionMap.get(id)?.close(); diff --git a/plugins/plotly-express/src/js/src/PlotlyExpressChartPanel.tsx b/plugins/plotly-express/src/js/src/PlotlyExpressChartPanel.tsx index db2cd42ad..64887bd1e 100644 --- a/plugins/plotly-express/src/js/src/PlotlyExpressChartPanel.tsx +++ b/plugins/plotly-express/src/js/src/PlotlyExpressChartPanel.tsx @@ -7,7 +7,9 @@ import { useApi } from '@deephaven/jsapi-bootstrap'; import PlotlyExpressChartModel from './PlotlyExpressChartModel.js'; import { useHandleSceneTicks } from './useHandleSceneTicks.js'; -export function PlotlyExpressChartPanel(props: WidgetPanelProps) { +export function PlotlyExpressChartPanel( + props: WidgetPanelProps +): JSX.Element { const dh = useApi(); const { fetch, metadata = {}, ...rest } = props; const containerRef = useRef(null); diff --git a/plugins/plotly-express/src/js/src/PlotlyExpressChartUtils.ts b/plugins/plotly-express/src/js/src/PlotlyExpressChartUtils.ts index c91c66f82..48d78c35a 100644 --- a/plugins/plotly-express/src/js/src/PlotlyExpressChartUtils.ts +++ b/plugins/plotly-express/src/js/src/PlotlyExpressChartUtils.ts @@ -2,12 +2,12 @@ import type { Data, PlotlyDataLayoutConfig } from 'plotly.js'; import type { Table, Widget } from '@deephaven/jsapi-types'; export interface PlotlyChartWidget { - getDataAsBase64(): string; - exportedObjects: { fetch(): Promise }[]; - addEventListener( + getDataAsBase64: () => string; + exportedObjects: { fetch: () => Promise
}[]; + addEventListener: ( type: string, fn: (event: CustomEvent) => () => void - ): void; + ) => void; } export interface PlotlyChartWidgetData { diff --git a/plugins/plotly-express/src/js/src/useHandleSceneTicks.ts b/plugins/plotly-express/src/js/src/useHandleSceneTicks.ts index c40bb726c..1c1fb2a8b 100644 --- a/plugins/plotly-express/src/js/src/useHandleSceneTicks.ts +++ b/plugins/plotly-express/src/js/src/useHandleSceneTicks.ts @@ -4,7 +4,7 @@ import PlotlyExpressChartModel from './PlotlyExpressChartModel.js'; export function useHandleSceneTicks( model: PlotlyExpressChartModel | undefined, container: HTMLDivElement | null -) { +): void { useEffect(() => { // Plotly scenes and geo views reset when our data ticks // Pause rendering data updates when the user is manipulating a scene diff --git a/plugins/ui/DESIGN.md b/plugins/ui/DESIGN.md index 071872caa..f101165ac 100644 --- a/plugins/ui/DESIGN.md +++ b/plugins/ui/DESIGN.md @@ -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: PickerItem, + *children: Item, title: str | None = None, **props: Any ) -> SectionElement @@ -1045,16 +1045,16 @@ ui.section( ###### Parameters -| Parameter | Type | Description | -| ----------- | ------------- | ----------------------------------------- | -| `*children` | `PickerItem` | The options to render within the section. | +| Parameter | Type | Description | +| ----------- | ------- | ----------------------------------------- | +| `*children` | `Item` | The options to render within the section. | | `title` | `str \| None` | The title of the section. | -| `**props` | `Any` | Any other Section prop | +| `**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 `PickerItem`, they are the dropdown options. +If children are of type `Item`, 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`. @@ -1062,7 +1062,7 @@ If children are of type `PartitionedTable`, the values in the table are the drop ```py import deephaven.ui as ui ui.picker( - *children: PickerItem | SectionElement | Table | PartitionedTable, + *children: Item | SectionElement | Table | PartitionedTable, key_column: ColumnName | None = None, label_column: ColumnName | None = None, description_column: ColumnName | None = None, @@ -1078,19 +1078,19 @@ ui.picker( ###### Parameters -| 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. | -| `**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` | +| Parameter | Type | Description | +| ---------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `*children` | `Item \| 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. | +| `**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 @@ -1234,13 +1234,13 @@ def list_action_menu( ###### ui.list_view A list view that can be used to create a list of items. Children should be one of two types: -1. If children are of type `ListViewItem`, they are the list items. +1. If children are of type `Item`, they are the list items. 2. If children are of type `Table`, the values in the table are the list items. There can only be one child, the `Table`. ```py import deephaven.ui as ui ui.list_view( - *children: ListViewItem | Table, + *children: Item | Table, key_column: ColumnName | None = None, label_column: ColumnName | None = None, description_column: ColumnName | None = None, @@ -1256,20 +1256,20 @@ ui.list_view( ``` ###### Parameters -| Parameter | Type | Description | -|-------------------------|------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| `*children` | `ListViewItem \| Table` | The options to render within the picker. | -| `key_column` | `ColumnName \| None` | Only valid if children are of type `Table`. 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`. 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`. The column of values to display as descriptions. | -| `icon_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to map to icons. | -| `actions` | `ListActionGroupElement \| ListActionMenuElement \| None` | Only valid if children are of type Table. The action group or menus to render for all elements within the list view. | -| `default_selected_keys` | `Selection \| None` | The initial selected keys in the collection (uncontrolled). | -| `selected_keys` | `Selection \| None` | The currently selected keys in the collection (controlled). | -| `render_empty_state` | `Element \| None` | Sets what the `list_view` should render when there is no content to display. | -| `on_selection_change` | `Callable[[Selection], None] \| None` | Handler that is called when the selections changes. | -| `on_change` | `Callable[[Selection], None] \| None` | Alias of `on_selection_change`. Handler that is called when the selections changes. | -| `**props` | `Any` | Any other [ListView](https://react-spectrum.adobe.com/react-spectrum/ListView.html) prop, with the exception of `items`, `dragAndDropHooks`, and `onLoadMore`. | +| Parameter | Type | Description | +|-------------------------|------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `*children` | `Item \| Table` | The options to render within the list_view. | +| `key_column` | `ColumnName \| None` | Only valid if children are of type `Table`. 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`. 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`. The column of values to display as descriptions. | +| `icon_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to map to icons. | +| `actions` | `ListActionGroupElement \| ListActionMenuElement \| None` | Only valid if children are of type Table. The action group or menus to render for all elements within the list view. | +| `default_selected_keys` | `Selection \| None` | The initial selected keys in the collection (uncontrolled). | +| `selected_keys` | `Selection \| None` | The currently selected keys in the collection (controlled). | +| `render_empty_state` | `Element \| None` | Sets what the `list_view` should render when there is no content to display. | +| `on_selection_change` | `Callable[[Selection], None] \| None` | Handler that is called when the selections changes. | +| `on_change` | `Callable[[Selection], None] \| None` | Alias of `on_selection_change`. Handler that is called when the selections changes. | +| `**props` | `Any` | Any other [ListView](https://react-spectrum.adobe.com/react-spectrum/ListView.html) prop, with the exception of `items`, `dragAndDropHooks`, and `onLoadMore`. | ```py @@ -1483,6 +1483,187 @@ date_picker8 = ui.date_picker( ) ``` +##### ui.combo_box + +A combo_box that can be used to search or select from a list. +Children should be one of four types: +If children are of type `Item`, 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.combo_box( + *children: Item | SectionElement | Table | PartitionedTable, + key_column: ColumnName | None = None, + label_column: ColumnName | None = None, + description_column: ColumnName | None = None, + icon_column: ColumnName | None = None, + title_column: ColumnName | None = None, + default_selected_key: Key | None = None, + selected_key: Key | None = None, + input_value: str | None = None, + default_input_value: str | None = None, + on_input_change: Callable[[str], None] | None = None, + on_selection_change: Callable[[Key], None] | None = None, + on_change: Callable[[Key], None] | None = None, + on_open_change: Callable[[bool, MenuTriggerAction], None] | None = None, + **props: Any +) -> ComboBoxElement +``` + +###### Parameters + +| Parameter | Type | Description | +| ---------------------- | ----------------------------------------------------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `*children` | `Item \| SectionElement \| Table \| PartitionedTable` | The options to render within the combo_box. | +| `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). | +| `input_value` | `str \| None` | The value of the search input (controlled). | +| `default_input_value` | `str \| None` | The default value of the search input (uncontrolled). | +| `on_input_change` | `Callable[[str], None] \| None` | Handler that is called when the search input value changes. | +| `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. | +| `on_open_change` | `Callable[[bool, MenuTriggerAction], None] \| None` | Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu. | +| `**props` | `Any` | Any other [Combo_Box](https://react-spectrum.adobe.com/react-spectrum/ComboBox.html) prop, with the exception of `items`, `validate`, `errorMessage` (as a callback) and `onLoadMore` | + +```py +import deephaven.ui as ui + +# simple combo_box that takes ui.items and is uncontrolled +combo_box1 = ui.combo_box( + ui.item("Option 1"), + ui.item("Option 2"), + ui.item("Option 3"), + ui.item("Option 4"), + default_selected_key="Option 2", +) + +# simple combo_box that takes combo_box options directly and is controlled +option, set_option = ui.use_state("Option 2") + +combo_box2 = ui.combo_box( + "Option 1", + "Option 2", + "Option 3", + "Option 4", + selected_key=option, + on_selection_change=set_option +) + +# the input value can be uncontrolled +combo_box3 = ui.combo_box( + ui.item("Option 1"), + ui.item("Option 2"), + ui.item("Option 3"), + ui.item("Option 4"), + default_input_value="Option" +) + +# the input value can be controlled +input_value, set_input_value = ui.use_state("Option") + +combo_box4 = ui.combo_box( + ui.item("Option 1"), + ui.item("Option 2"), + ui.item("Option 3"), + ui.item("Option 4"), + input_value=input_value, + on_input_change=set_input_value +) + +# manually create a section with items +combo_box5 = ui.combo_box( + ui.section( + ui.item("Option 1"), + ui.item("Option 2"), + title="Section 1" + ), + ui.section( + ui.item("Option 3"), + ui.item("Option 4"), + title="Section 2" + ) +) + +# manually create a section with combo_box options directly +combo_box6 = ui.combo_box( + ui.section( + "Option 1", + "Option 2", + ), + ui.section( + "Option 3", + "Option 4", + ) +) + +from deephaven import empty_table + +table1 = empty_table(4).update_view("data=i") +table2 = empty_table(1).update_view("data=10") + +# data hooks can be used to create a combo_box from a table +# this should be avoided as it is not as performant as just passing in the table directly +options = ui.use_column_data(table1) + +combo_box7 = ui.combo_box(children=options) + +# instead, pass in the table directly +combo_box8 = ui.combo_box(table1) + +from deephaven import new_table +from deephaven.column import string_col, int_col + +color_table = new_table([ + string_col("Sections", ["Interesting Colors", "Interesting Colors", "Other Colors"]), + string_col("SectionNames", ["Favorites", "Favorites", "Other"]), + int_col("Keys", ["salmon", "lemonchiffon", "black"]), + string_col("Labels", ["Salmon", "Lemon Chiffon", "Black"]), + string_col("Descriptions", ["An interesting color", "Another interesting color", "A color"]), + string_col("Icons", ["Amusementpark", "Teapot", "Sentiment Negative"]) +]) +partitioned_table = color_table.partition_by("Sections") + +color, set_color = ui.use_state("salmon") + +# this will create a combo_box with two sections, one for each partition +combo_box9 = ui.combo_box( + partitioned_table, + key_column="Keys", + label_column="Labels", + description_column="Descriptions", + icon_column="Icons", + title_column="SectionNames", + selected_key=color, + on_selection_change=set_color +) + +color, set_color = ui.use_state("salmon") + +# this will create a combo_box that matches against the start of the label when searching +combo_box10 = ui.combo_box( + color_table, + key_column="Keys", + search_type="STARTS_WITH", + selected_key=color, + on_selection_change=set_color +) + +# data can be filtered using the input value +items = ["First Option", "Second Option", "Third Option", "Fourth Option"] +filter_value, set_filter_value = ui.use_state('') +filtered_items = ui.use_memo(lambda: filter(lambda item: item.startswith(filter_value), items), [filter_value, items]) + +combo_box11 = ui.combo_box(*filtered_items, on_input_change=set_filter_value) +``` + #### ui.table `ui.table` is a wrapper for a Deephaven `Table` object that allows you to add UI customizations or callbacks. The basic syntax for creating a `UITable` is: @@ -1997,7 +2178,7 @@ TableData = dict[ColumnName, ColumnData] TransformedData = Any # Stringable is a type that is naturally convertible to a string Stringable = str | int | float | bool -PickerItem = Stringable | ItemElement +Item = Stringable | ItemElement Key = Stringable ActionKey = Key Selection = Sequence[Key] @@ -2007,6 +2188,7 @@ InstantConvertible = Union[None, Instant, int, str, datetime.datetime, numpy.dat ZonedDateTimeConvertible = Union[None, ZonedDateTime, str, datetime.datetime, numpy.datetime64, pandas.Timestamp] Date = Instant | LocalDate | ZonedDateTime | LocalDateConvertible | InstantConvertible | ZonedDateTimeConvertible Granularity = Literal["DAY", "HOUR", "MINUTE", "SECOND"] +MenuTriggerAction = Literal["FOCUS", "INPUT", "MANUAL"] T = TypeVar("T") Combination: TypeAlias = T | set[T] | Sequence[T] diff --git a/plugins/ui/src/js/src/elements/ElementUtils.tsx b/plugins/ui/src/js/src/elements/ElementUtils.tsx index 3058ec267..9fb4fca60 100644 --- a/plugins/ui/src/js/src/elements/ElementUtils.tsx +++ b/plugins/ui/src/js/src/elements/ElementUtils.tsx @@ -25,7 +25,7 @@ export type ObjectNode = { */ export type ElementNode< K extends string = string, - P extends Record = Record + P extends Record = Record, > = { /** * The type of this element. Can be something like `deephaven.ui.components.Panel`, or @@ -37,7 +37,7 @@ export type ElementNode< export type ElementNodeWithChildren< K extends string = string, - P extends Record = Record + P extends Record = Record, > = ElementNode & { props: React.PropsWithChildren

; }; diff --git a/plugins/ui/src/js/src/elements/ObjectView.tsx b/plugins/ui/src/js/src/elements/ObjectView.tsx index cc6083283..8f8b32f1f 100644 --- a/plugins/ui/src/js/src/elements/ObjectView.tsx +++ b/plugins/ui/src/js/src/elements/ObjectView.tsx @@ -6,7 +6,7 @@ import type { dh } from '@deephaven/jsapi-types'; const log = Log.module('@deephaven/js-plugin-ui/ObjectView'); export type ObjectViewProps = { object: dh.WidgetExportedObject }; -function ObjectView(props: ObjectViewProps) { +function ObjectView(props: ObjectViewProps): JSX.Element { const { object } = props; log.info('Object is', object); const { type } = object; diff --git a/plugins/ui/src/js/src/elements/Picker.tsx b/plugins/ui/src/js/src/elements/Picker.tsx index 7cc7f023f..1e564a33f 100644 --- a/plugins/ui/src/js/src/elements/Picker.tsx +++ b/plugins/ui/src/js/src/elements/Picker.tsx @@ -22,7 +22,7 @@ type WrappedDHPickerJSApiProps = Omit & { export type PickerProps = (DHPickerProps | WrappedDHPickerJSApiProps) & SerializedPickerEventProps; -function Picker({ children, ...props }: PickerProps) { +function Picker({ children, ...props }: PickerProps): JSX.Element { const settings = useSelector(getSettings); const pickerProps = usePickerProps(props); diff --git a/plugins/ui/src/js/src/elements/UITable.tsx b/plugins/ui/src/js/src/elements/UITable.tsx index 9d901f4df..0c137c27e 100644 --- a/plugins/ui/src/js/src/elements/UITable.tsx +++ b/plugins/ui/src/js/src/elements/UITable.tsx @@ -30,7 +30,7 @@ function UITable({ sorts, alwaysFetchColumns, table: exportedTable, -}: UITableProps) { +}: UITableProps): JSX.Element | null { const dh = useApi(); const [model, setModel] = useState(); const [columns, setColumns] = useState(); diff --git a/plugins/ui/src/js/src/elements/spectrum/ActionButton.tsx b/plugins/ui/src/js/src/elements/spectrum/ActionButton.tsx index f04f800dd..fac0936e5 100644 --- a/plugins/ui/src/js/src/elements/spectrum/ActionButton.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/ActionButton.tsx @@ -7,7 +7,7 @@ import { SerializedButtonEventProps, useButtonProps } from './useButtonProps'; function ActionButton( props: SpectrumActionButtonProps & SerializedButtonEventProps -) { +): JSX.Element { const buttonProps = useButtonProps(props); // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/plugins/ui/src/js/src/elements/spectrum/Button.tsx b/plugins/ui/src/js/src/elements/spectrum/Button.tsx index c15ee7939..a8b4f28b8 100644 --- a/plugins/ui/src/js/src/elements/spectrum/Button.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/Button.tsx @@ -5,7 +5,10 @@ import { } from '@adobe/react-spectrum'; import { SerializedButtonEventProps, useButtonProps } from './useButtonProps'; -function Button(props: SpectrumButtonProps & SerializedButtonEventProps) { +function Button( + variant: SpectrumButtonProps['variant'], + props: SpectrumButtonProps & SerializedButtonEventProps +): JSX.Element { const buttonProps = useButtonProps(props); // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/plugins/ui/src/js/src/elements/spectrum/Form.tsx b/plugins/ui/src/js/src/elements/spectrum/Form.tsx index 9dffdadfb..928effc33 100644 --- a/plugins/ui/src/js/src/elements/spectrum/Form.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/Form.tsx @@ -5,7 +5,7 @@ function Form( props: SpectrumFormProps & { onSubmit?: (data: { [key: string]: FormDataEntryValue }) => void; } -) { +): JSX.Element { const { onSubmit: propOnSubmit, ...otherProps } = props; const onSubmit = useCallback( diff --git a/plugins/ui/src/js/src/elements/spectrum/RangeSlider.tsx b/plugins/ui/src/js/src/elements/spectrum/RangeSlider.tsx index 0f164b7a8..073fb5fa3 100644 --- a/plugins/ui/src/js/src/elements/spectrum/RangeSlider.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/RangeSlider.tsx @@ -9,7 +9,7 @@ const VALUE_CHANGE_DEBOUNCE = 250; const EMPTY_FUNCTION = () => undefined; -function RangeSlider(props: SpectrumRangeSliderProps) { +function RangeSlider(props: SpectrumRangeSliderProps): JSX.Element { const { defaultValue = { start: 0, end: 0 }, value: propValue, diff --git a/plugins/ui/src/js/src/elements/spectrum/Slider.tsx b/plugins/ui/src/js/src/elements/spectrum/Slider.tsx index 28de56e84..f2bf43880 100644 --- a/plugins/ui/src/js/src/elements/spectrum/Slider.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/Slider.tsx @@ -9,7 +9,7 @@ const VALUE_CHANGE_DEBOUNCE = 250; const EMPTY_FUNCTION = () => undefined; -function Slider(props: SpectrumSliderProps) { +function Slider(props: SpectrumSliderProps): JSX.Element { const { defaultValue = 0, value: propValue, diff --git a/plugins/ui/src/js/src/elements/spectrum/TabPanels.tsx b/plugins/ui/src/js/src/elements/spectrum/TabPanels.tsx index b13310dc5..47febf562 100644 --- a/plugins/ui/src/js/src/elements/spectrum/TabPanels.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/TabPanels.tsx @@ -4,7 +4,9 @@ import { SpectrumTabPanelsProps, } from '@adobe/react-spectrum'; -function TabPanels(props: SpectrumTabPanelsProps) { +function TabPanels( + props: SpectrumTabPanelsProps +): JSX.Element { const { UNSAFE_style: unsafeStyle, ...otherProps } = props; return ( diff --git a/plugins/ui/src/js/src/elements/spectrum/TextField.tsx b/plugins/ui/src/js/src/elements/spectrum/TextField.tsx index 40726a5ba..1cac27244 100644 --- a/plugins/ui/src/js/src/elements/spectrum/TextField.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/TextField.tsx @@ -9,7 +9,7 @@ const VALUE_CHANGE_DEBOUNCE = 250; const EMPTY_FUNCTION = () => undefined; -function TextField(props: SpectrumTextFieldProps) { +function TextField(props: SpectrumTextFieldProps): JSX.Element { const { defaultValue = '', value: propValue, diff --git a/plugins/ui/src/js/src/elements/spectrum/mapSpectrumProps.ts b/plugins/ui/src/js/src/elements/spectrum/mapSpectrumProps.ts index daba81688..c7c693473 100644 --- a/plugins/ui/src/js/src/elements/spectrum/mapSpectrumProps.ts +++ b/plugins/ui/src/js/src/elements/spectrum/mapSpectrumProps.ts @@ -6,7 +6,7 @@ import mapSpectrumChildren from './mapSpectrumChildren'; * @param props Props to map as spectrum props */ export function mapSpectrumProps< - T extends PropsWithChildren> + T extends PropsWithChildren>, >(props: T): T { return { ...props, diff --git a/plugins/ui/src/js/src/elements/spectrum/useButtonProps.ts b/plugins/ui/src/js/src/elements/spectrum/useButtonProps.ts index 4ecf16829..d0daa1297 100644 --- a/plugins/ui/src/js/src/elements/spectrum/useButtonProps.ts +++ b/plugins/ui/src/js/src/elements/spectrum/useButtonProps.ts @@ -43,7 +43,10 @@ export type SerializedButtonEventProps = { onKeyUp?: SerializedKeyboardEventCallback; }; -export function useButtonProps(props: SerializedButtonEventProps & T) { +// returns SpectrumButtonProps +export function useButtonProps( + props: SerializedButtonEventProps & T +): T & SerializedButtonEventProps { const { onPress: propOnPress, onPressStart: propsOnPressStart, @@ -75,5 +78,5 @@ export function useButtonProps(props: SerializedButtonEventProps & T) { onKeyDown, onKeyUp, ...mapSpectrumProps(otherProps), - }; + } as T & SerializedButtonEventProps; } diff --git a/plugins/ui/src/js/src/elements/spectrum/useFocusEventCallback.ts b/plugins/ui/src/js/src/elements/spectrum/useFocusEventCallback.ts index e259d0ee7..adb1565b8 100644 --- a/plugins/ui/src/js/src/elements/spectrum/useFocusEventCallback.ts +++ b/plugins/ui/src/js/src/elements/spectrum/useFocusEventCallback.ts @@ -31,7 +31,9 @@ export type SerializedFocusEventCallback = ( * @param callback FocusEvent callback to be called with the serialized event * @returns A callback to be passed into the Spectrum component that transforms the event and calls the provided callback */ -export function useFocusEventCallback(callback?: SerializedFocusEventCallback) { +export function useFocusEventCallback( + callback?: SerializedFocusEventCallback +): (e: FocusEvent) => void { return useCallback( (e: FocusEvent) => { callback?.(serializeFocusEvent(e)); diff --git a/plugins/ui/src/js/src/elements/spectrum/useKeyboardEventCallback.ts b/plugins/ui/src/js/src/elements/spectrum/useKeyboardEventCallback.ts index bd06e6fed..b04a207ca 100644 --- a/plugins/ui/src/js/src/elements/spectrum/useKeyboardEventCallback.ts +++ b/plugins/ui/src/js/src/elements/spectrum/useKeyboardEventCallback.ts @@ -33,7 +33,7 @@ export type SerializedKeyboardEventCallback = ( */ export function useKeyboardEventCallback( callback?: SerializedKeyboardEventCallback -) { +): (e: KeyboardEvent) => void { return useCallback( (e: KeyboardEvent) => { callback?.(serializeKeyboardEvent(e)); diff --git a/plugins/ui/src/js/src/elements/spectrum/usePressEventCallback.ts b/plugins/ui/src/js/src/elements/spectrum/usePressEventCallback.ts index da68bdd88..563660f0a 100644 --- a/plugins/ui/src/js/src/elements/spectrum/usePressEventCallback.ts +++ b/plugins/ui/src/js/src/elements/spectrum/usePressEventCallback.ts @@ -34,7 +34,9 @@ export type SerializedPressEventCallback = ( * @param callback PressEvent callback to be called with the serialized event * @returns A callback to be passed into the Spectrum component that transforms the event and calls the provided callback */ -export function usePressEventCallback(callback?: SerializedPressEventCallback) { +export function usePressEventCallback( + callback?: SerializedPressEventCallback +): (e: PressEvent) => void { return useCallback( (e: PressEvent) => { callback?.(serializePressEvent(e)); diff --git a/plugins/ui/src/js/src/elements/usePickerProps.ts b/plugins/ui/src/js/src/elements/usePickerProps.ts index 5261f3de6..d4d71d1df 100644 --- a/plugins/ui/src/js/src/elements/usePickerProps.ts +++ b/plugins/ui/src/js/src/elements/usePickerProps.ts @@ -26,7 +26,9 @@ export interface SerializedPickerEventProps { * @param props Props to wrap * @returns Wrapped props */ -export function usePickerProps(props: SerializedPickerEventProps & T) { +export function usePickerProps( + props: SerializedPickerEventProps & T +): T & SerializedPickerEventProps { const { onFocus, onBlur, onKeyDown, onKeyUp, ...otherProps } = props; const serializedOnFocus = useFocusEventCallback(onFocus); @@ -44,5 +46,5 @@ export function usePickerProps(props: SerializedPickerEventProps & T) { // handles nested children inside of `Item` and `Section` components, so // we are intentionally not wrapping `otherProps` in `mapSpectrumProps` ...otherProps, - }; + } as T & SerializedPickerEventProps; } diff --git a/plugins/ui/src/js/src/layout/ParentItemContext.ts b/plugins/ui/src/js/src/layout/ParentItemContext.ts index e6ae4c205..ad613ac40 100644 --- a/plugins/ui/src/js/src/layout/ParentItemContext.ts +++ b/plugins/ui/src/js/src/layout/ParentItemContext.ts @@ -4,7 +4,7 @@ import type { ContentItem } from '@deephaven/golden-layout'; export const ParentItemContext = createContext(null); -export function useParentItem() { +export function useParentItem(): ContentItem { const layoutManager = useLayoutManager(); const parentContextItem = useContext(ParentItemContext); const parentItem = useMemo( diff --git a/plugins/ui/src/js/src/layout/PortalPanelManagerContext.ts b/plugins/ui/src/js/src/layout/PortalPanelManagerContext.ts index 7ecc58902..c304098e4 100644 --- a/plugins/ui/src/js/src/layout/PortalPanelManagerContext.ts +++ b/plugins/ui/src/js/src/layout/PortalPanelManagerContext.ts @@ -7,7 +7,7 @@ export type PortalPanelMap = ReadonlyMap; export const PortalPanelManagerContext = React.createContext(null); -export function usePortalPanelManager() { +export function usePortalPanelManager(): PortalPanelMap { return useContextOrThrow(PortalPanelManagerContext, 'PortalPanelManager'); } diff --git a/plugins/ui/src/js/src/layout/ReactPanelContext.ts b/plugins/ui/src/js/src/layout/ReactPanelContext.ts index ff10a545d..590fb3e3c 100644 --- a/plugins/ui/src/js/src/layout/ReactPanelContext.ts +++ b/plugins/ui/src/js/src/layout/ReactPanelContext.ts @@ -9,6 +9,6 @@ export const ReactPanelContext = createContext(null); * Gets the panel ID from the nearest panel context. * @returns The panel ID or null if not in a panel */ -export function usePanelId() { +export function usePanelId(): string | null { return useContext(ReactPanelContext); } diff --git a/plugins/ui/src/js/src/widget/DashboardWidgetHandler.tsx b/plugins/ui/src/js/src/widget/DashboardWidgetHandler.tsx index e5e2f81cb..126db25b0 100644 --- a/plugins/ui/src/js/src/widget/DashboardWidgetHandler.tsx +++ b/plugins/ui/src/js/src/widget/DashboardWidgetHandler.tsx @@ -35,7 +35,7 @@ function DashboardWidgetHandler({ onClose, onDataChange, ...otherProps -}: DashboardWidgetHandlerProps) { +}: DashboardWidgetHandlerProps): JSX.Element { const handleClose = useCallback(() => { log.debug('handleClose', id); onClose?.(id); diff --git a/plugins/ui/src/js/src/widget/DocumentHandler.tsx b/plugins/ui/src/js/src/widget/DocumentHandler.tsx index 449e00da7..f0ae8a48e 100644 --- a/plugins/ui/src/js/src/widget/DocumentHandler.tsx +++ b/plugins/ui/src/js/src/widget/DocumentHandler.tsx @@ -44,7 +44,7 @@ function DocumentHandler({ initialData: data = EMPTY_OBJECT, onDataChange = EMPTY_FUNCTION, onClose, -}: DocumentHandlerProps) { +}: DocumentHandlerProps): JSX.Element { log.debug('Rendering document', widget); const panelOpenCountRef = useRef(0); const panelIdIndex = useRef(0); diff --git a/plugins/ui/src/js/src/widget/WidgetHandler.tsx b/plugins/ui/src/js/src/widget/WidgetHandler.tsx index 057be65b7..c27dbdb44 100644 --- a/plugins/ui/src/js/src/widget/WidgetHandler.tsx +++ b/plugins/ui/src/js/src/widget/WidgetHandler.tsx @@ -58,7 +58,7 @@ function WidgetHandler({ fetch, widget: descriptor, initialData: initialDataProp, -}: WidgetHandlerProps) { +}: WidgetHandlerProps): JSX.Element | null { const [widget, setWidget] = useState(); const [document, setDocument] = useState(); const [initialData] = useState(initialDataProp); diff --git a/plugins/ui/src/js/src/widget/WidgetTestUtils.ts b/plugins/ui/src/js/src/widget/WidgetTestUtils.ts index f7cec022e..278c0e50b 100644 --- a/plugins/ui/src/js/src/widget/WidgetTestUtils.ts +++ b/plugins/ui/src/js/src/widget/WidgetTestUtils.ts @@ -4,7 +4,7 @@ import type { dh } from '@deephaven/jsapi-types'; export function makeDocumentUpdatedJsonRpc( document: Record = {} -) { +): { jsonrpc: string; method: string; params: string[] } { return { jsonrpc: '2.0', method: 'documentUpdated', @@ -14,7 +14,7 @@ export function makeDocumentUpdatedJsonRpc( export function makeDocumentUpdatedJsonRpcString( document: Record = {} -) { +): string { return JSON.stringify(makeDocumentUpdatedJsonRpc(document)); } diff --git a/plugins/ui/src/js/src/widget/WidgetTypes.ts b/plugins/ui/src/js/src/widget/WidgetTypes.ts index 8c870cb53..20d898ac2 100644 --- a/plugins/ui/src/js/src/widget/WidgetTypes.ts +++ b/plugins/ui/src/js/src/widget/WidgetTypes.ts @@ -3,8 +3,8 @@ import type { dh } from '@deephaven/jsapi-types'; export type WidgetId = string; export interface WidgetMessageDetails { - getDataAsBase64(): string; - getDataAsString(): string; + getDataAsBase64: () => string; + getDataAsString: () => string; exportedObjects: dh.WidgetExportedObject[]; }