feat: ui.image (#670)

Closes #597

plugins/ui/src/deephaven/ui/components/__init__.py

@@ -20,6 +20,7 @@
 from .grid import grid
 from .icon import icon
 from .illustrated_message import illustrated_message
+from .image import image
 from .item import item
 from .item_table_source import item_table_source
 from .list_action_group import list_action_group
@@ -75,6 +76,7 @@
     "item",
     "item_table_source",
     "illustrated_message",
+    "image",
     "list_view",
     "list_action_group",
     "list_action_menu",

plugins/ui/src/deephaven/ui/components/image.py

@@ -0,0 +1,159 @@
+from __future__ import annotations
+
+from .basic import component_element
+from ..elements import Element
+from typing import Callable
+from .types import (
+    AlignSelf,
+    CSSProperties,
+    DimensionValue,
+    JustifySelf,
+    LayoutFlex,
+    Position,
+    ObjectFit,
+)
+
+
+def image(
+    src: str,
+    alt: str | None = None,
+    object_fit: ObjectFit = "fill",
+    on_error: Callable[[], None] | None = None,
+    on_load: Callable[[], None] | None = None,
+    flex: LayoutFlex | None = None,
+    flex_grow: float | None = None,
+    flex_shrink: float | None = None,
+    flex_basis: DimensionValue | None = None,
+    align_self: AlignSelf | None = None,
+    justify_self: JustifySelf | None = None,
+    order: int | None = None,
+    grid_area: str | None = None,
+    grid_row: str | None = None,
+    grid_column: str | None = None,
+    grid_column_start: str | None = None,
+    grid_column_end: str | None = None,
+    grid_row_start: str | None = None,
+    grid_row_end: str | None = None,
+    margin: DimensionValue | None = None,
+    margin_top: DimensionValue | None = None,
+    margin_bottom: DimensionValue | None = None,
+    margin_start: DimensionValue | None = None,
+    margin_end: DimensionValue | None = None,
+    margin_x: DimensionValue | None = None,
+    margin_y: DimensionValue | None = None,
+    width: DimensionValue | None = None,
+    height: DimensionValue | None = None,
+    min_width: DimensionValue | None = None,
+    min_height: DimensionValue | None = None,
+    max_width: DimensionValue | None = None,
+    max_height: DimensionValue | None = None,
+    position: Position | None = None,
+    top: DimensionValue | None = None,
+    bottom: DimensionValue | None = None,
+    left: DimensionValue | None = None,
+    right: DimensionValue | None = None,
+    start: DimensionValue | None = None,
+    end: DimensionValue | None = None,
+    z_index: int | None = None,
+    is_hidden: bool | None = None,
+    id: str | None = None,
+    UNSAFE_class_name: str | None = None,
+    UNSAFE_style: CSSProperties | None = None,
+) -> Element:
+    """
+    Image is used to insert and display an image within a component.
+
+    Args:
+        src: The URL of the image.
+        alt: Text description of the image.
+        object_fit: How the image should be resized to fit its container.
+        on_error: A callback function to run when the image fails to load.
+        on_load: A callback function to run when the image has loaded.
+        flex: When used in a flex layout, specifies how the element will grow or shrink to fit the space available.
+        flex_grow: When used in a flex layout, specifies how the element will grow to fit the space available.
+        flex_shrink: When used in a flex layout, specifies how the element will shrink to fit the space available.
+        flex_basis: When used in a flex layout, specifies the initial main size of the element.
+        align_self: Overrides the alignItems property of a flex or grid container.
+        justify_self: Species how the element is justified inside a flex or grid container.
+        order: The layout order for the element within a flex or grid container.
+        grid_area: When used in a grid layout, specifies the named grid area that the element should be placed in within the grid.
+        grid_row: When used in a grid layout, specifies the row the element should be placed in within the grid.
+        grid_column: When used in a grid layout, specifies the column the element should be placed in within the grid.
+        grid_row_start: When used in a grid layout, specifies the starting row to span within the grid.
+        grid_row_end: When used in a grid layout, specifies the ending row to span within the grid.
+        grid_column_start: When used in a grid layout, specifies the starting column to span within the grid.
+        grid_column_end: When used in a grid layout, specifies the ending column to span within the grid
+        margin: The margin for all four sides of the element.
+        margin_top: The margin for the top side of the element.
+        margin_bottom: The margin for the bottom side of the element.
+        margin_start: The margin for the logical start side of the element, depending on layout direction.
+        margin_end: The margin for the logical end side of the element, depending on layout direction.
+        margin_x: The margin for the left and right sides of the element.
+        margin_y: The margin for the top and bottom sides of the element.
+        width: The width of the element.
+        min_width: The minimum width of the element.
+        max_width: The maximum width of the element.
+        height: The height of the element.
+        min_height: The minimum height of the element.
+        max_height: The maximum height of the element
+        position: The position of the element.
+        top: The distance from the top of the containing element.
+        bottom: The distance from the bottom of the containing element.
+        left: The distance from the left of the containing element.
+        right: The distance from the right of the containing element.
+        start: The distance from the start of the containing element, depending on layout direction.
+        end: The distance from the end of the containing element, depending on layout direction.
+        z_index: The stack order of the element.
+        is_hidden: Whether the element is hidden.
+        id: The unique identifier of the element.
+        UNSAFE_class_name: A CSS class to apply to the element.
+        UNSAFE_style: A CSS style to apply to the element.
+    """
+    return component_element(
+        "Image",
+        src=src,
+        alt=alt,
+        object_fit=object_fit,
+        on_error=on_error,
+        on_load=on_load,
+        flex=flex,
+        flex_grow=flex_grow,
+        flex_shrink=flex_shrink,
+        flex_basis=flex_basis,
+        align_self=align_self,
+        justify_self=justify_self,
+        order=order,
+        grid_area=grid_area,
+        grid_row=grid_row,
+        grid_row_start=grid_row_start,
+        grid_row_end=grid_row_end,
+        grid_column=grid_column,
+        grid_column_start=grid_column_start,
+        grid_column_end=grid_column_end,
+        slot="image",
+        margin=margin,
+        margin_top=margin_top,
+        margin_bottom=margin_bottom,
+        margin_start=margin_start,
+        margin_end=margin_end,
+        margin_x=margin_x,
+        margin_y=margin_y,
+        width=width,
+        height=height,
+        min_width=min_width,
+        min_height=min_height,
+        max_width=max_width,
+        max_height=max_height,
+        position=position,
+        top=top,
+        bottom=bottom,
+        start=start,
+        end=end,
+        left=left,
+        right=right,
+        z_index=z_index,
+        is_hidden=is_hidden,
+        id=id,
+        UNSAFE_class_name=UNSAFE_class_name,
+        UNSAFE_style=UNSAFE_style,
+    )

plugins/ui/src/deephaven/ui/components/types/layout.py

@@ -163,3 +163,4 @@
 MenuDirection = Literal["bottom", "top"]
 IconSize = Literal["XXS", "XS", "S", "M", "L", "XL", "XXL"]
 IconColor = Literal["negative", "notice", "positive", "informative"]
+ObjectFit = Literal["fill", "contain", "cover", "none", "scale-down"]

plugins/ui/src/js/src/elements/Image.tsx

@@ -0,0 +1,19 @@
+import {
+  Image as DHCImage,
+  ImageProps as DHCImageProps,
+} from '@deephaven/components';
+
+type SerializedImageProps = Omit<DHCImageProps, 'onLoad' | 'onError'> & {
+  /** Handler that is called when the element receives focus. */
+  onLoad?: () => void;
+
+  /** Handler that is called when the element loses focus. */
+  onError?: () => void;
+};
+
+export function Image({ ...props }: SerializedImageProps): JSX.Element {
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <DHCImage {...props} />;
+}
+
+export default Image;

plugins/ui/src/js/src/elements/index.ts

@@ -7,6 +7,7 @@ export * from './hooks';
 export * from './HTMLElementView';
 export * from './IconElementView';
 export * from './IllustratedMessage';
+export * from './Image';
 export * from './ListView';
 export * from './model';
 export * from './ObjectView';

plugins/ui/src/js/src/elements/model/ElementConstants.ts

@@ -38,6 +38,7 @@ export const ELEMENT_NAME = {
   grid: uiComponentName('Grid'),
   heading: uiComponentName('Heading'),
   illustratedMessage: uiComponentName('IllustratedMessage'),
+  image: uiComponentName('Image'),
   item: uiComponentName('Item'),
   listActionGroup: uiComponentName('ListActionGroup'),
   listActionMenu: uiComponentName('ListActionMenu'),

plugins/ui/src/js/src/widget/WidgetUtils.tsx

@@ -53,6 +53,7 @@ import {
   ComboBox,
   Form,
   IllustratedMessage,
+  Image,
   ListView,
   Picker,
   Radio,
@@ -108,6 +109,7 @@ export const elementComponentMap = {
   [ELEMENT_NAME.grid]: Grid,
   [ELEMENT_NAME.heading]: Heading,
   [ELEMENT_NAME.illustratedMessage]: IllustratedMessage,
+  [ELEMENT_NAME.image]: Image,
   [ELEMENT_NAME.item]: Item,
   [ELEMENT_NAME.listActionGroup]: ListActionGroup,
   [ELEMENT_NAME.listActionMenu]: ListActionMenu,