fix: allows keys to be set in props

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

@@ -1,5 +1,7 @@
 from __future__ import annotations
 from typing import Any
+from inspect import signature, Parameter
+from functools import wraps
 from .basic import component_element
 from .types import (
     LayoutFlex,
@@ -12,6 +14,37 @@
 )
 
 
+def wrap_prop(f: Any, wrapper: Any, desc: str) -> Any:
+    sig = signature(f)
+    params = list(sig.parameters.values())
+    wrapper_params = list(signature(wrapper).parameters.values())[1:-1]
+
+    for wrapper_param in wrapper_params:
+        params.insert(1, wrapper_param)
+
+    wrapper = wraps(f)(wrapper)
+    wrapper.__signature__ = sig.replace(parameters=params)
+    wrapper.__doc__ += f"        {desc}\n"
+
+    return wrapper
+
+
+def add_key_prop(f: Any) -> Any:
+    def wrapper(*args, key: str | None = None, **kwargs):
+        return f(*args, key=key, **kwargs)
+
+    return wrap_prop(f, wrapper, "key: A unique key for the component.")
+
+
+def add_qwerty_prop(f: Any) -> Any:
+    def wrapper(*args, qwerty: int | None = None, **kwargs):
+        return f(*args, qwerty=qwerty, **kwargs)
+
+    return wrap_prop(f, wrapper, "qwerty: qwerty.")
+
+
+@add_qwerty_prop
+@add_key_prop
 def flex(
     *children: Any,
     flex: LayoutFlex | None = "auto",

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

@@ -1,6 +1,6 @@
 import functools
 import logging
-from typing import Any, Callable
+from typing import Any, Callable, Optional
 from .._internal import get_component_qualname
 from ..elements import FunctionElement
 
@@ -17,9 +17,8 @@ def make_component(func: Callable[..., Any]):
     """
 
     @functools.wraps(func)
-    def make_component_node(*args: Any, **kwargs: Any):
+    def make_component_node(*args: Any, key: Optional[str] = None, **kwargs: Any):
         component_type = get_component_qualname(func)
-
-        return FunctionElement(component_type, lambda: func(*args, **kwargs))
+        return FunctionElement(component_type, lambda: func(*args, **kwargs), key=key)
 
     return make_component_node

plugins/ui/src/deephaven/ui/elements/BaseElement.py

@@ -11,22 +11,35 @@ class BaseElement(Element):
     Must provide a name for the element.
     """
 
-    def __init__(self, name: str, /, *children: Any, **props: Any):
+    def __init__(
+        self, name: str, /, *children: Any, key: str | None = None, **props: Any
+    ):
         self._name = name
+        self._keyProp = key
+
         if len(children) > 0 and props.get("children") is not None:
             raise ValueError("Cannot provide both children and props.children")
-
         if len(children) > 1:
             props["children"] = list(children)
         if len(children) == 1:
             # If there's only one child, we pass it as a single child, not a list
             # There are many React elements that expect only a single child, and will fail if they get a list (even if it only has one element)
             props["children"] = children[0]
+
         self._props = dict_to_camel_case(props)
 
     @property
     def name(self) -> str:
         return self._name
 
+    @property
+    def key_prop(self) -> str | None:
+        return self._keyProp
+
+    def generate_key(self, index_key: str) -> str:
+        if self._keyProp is not None:
+            return self._keyProp
+        return f"{index_key}-{self._name}"
+
     def render(self, context: RenderContext) -> dict[str, Any]:
         return self._props

plugins/ui/src/deephaven/ui/elements/Element.py

@@ -22,6 +22,26 @@ def name(self) -> str:
         """
         return "deephaven.ui.Element"
 
+    @property
+    def key_prop(self) -> str | None:
+        """
+        Get the key prop of this element. Useful to check if a key prop was provided.
+
+        Returns:
+            The unique key prop of this element.
+        """
+        return None
+
+    @abstractmethod
+    def generate_key(self, index_key: str) -> str:
+        """
+        Get the key of this element. Subclasses should access the key prop if it exists or generate their own unique key.
+
+        Returns:
+            The unique key of this element.
+        """
+        pass
+
     @abstractmethod
     def render(self, context: RenderContext) -> PropsType:
         """

plugins/ui/src/deephaven/ui/elements/FunctionElement.py

@@ -8,7 +8,9 @@
 
 
 class FunctionElement(Element):
-    def __init__(self, name: str, render: Callable[[], list[Element]]):
+    def __init__(
+        self, name: str, render: Callable[[], list[Element]], key: str | None = None
+    ):
         """
         Create an element that takes a function to render.
 
@@ -18,11 +20,21 @@ def __init__(self, name: str, render: Callable[[], list[Element]]):
         """
         self._name = name
         self._render = render
+        self._keyProp = key
 
     @property
     def name(self):
         return self._name
 
+    @property
+    def key_prop(self) -> str | None:
+        return self._keyProp
+
+    def generate_key(self, index_key: str) -> str:
+        if self._keyProp is not None:
+            return self._keyProp
+        return f"{index_key}-{self._name}"
+
     def render(self, context: RenderContext) -> PropsType:
         """
         Render the component. Should only be called when actually rendering the component, e.g. exporting it to the client.

plugins/ui/src/deephaven/ui/elements/UITable.py

@@ -185,6 +185,9 @@ def _with_dict_prop(self, key: str, value: dict[str, Any]) -> "UITable":
         )  # Turn missing or explicit None into empty dict
         return UITable(**{**self._props, key: {**existing, **value}})  # type: ignore
 
+    def generate_key(self, index_key: str) -> str:
+        return f"{index_key}-{self.name}"
+
     def render(self, context: RenderContext) -> dict[str, Any]:
         logger.debug("Returning props %s", self._props)
         return dict_to_camel_case({**self._props})

plugins/ui/src/deephaven/ui/renderer/Renderer.py

@@ -25,8 +25,8 @@ def _get_context_key(item: Any, index_key: str) -> Union[str, None]:
         - TODO #731: use a `key` prop if it exists on the `Element`.
     """
     if isinstance(item, Element):
-        return f"{index_key}-{item.name}"
-    if isinstance(item, (Dict, List, Tuple)):
+        return item.generate_key(index_key)
+    if isinstance(item, (Dict, List, Tuple, map)):
         return index_key
     return None
 
@@ -61,6 +61,8 @@ def _render_item(item: Any, context: RenderContext) -> Any:
         The rendered item.
     """
     logger.debug("_render_item context is %s", context)
+    if isinstance(item, map):
+        return _render_map(item, context)
     if isinstance(item, (list, tuple)):
         # I couldn't figure out how to map a `list[Unknown]` to a `list[Any]`, or to accept a `list[Unknown]` as a parameter
         return _render_list(item, context)  # type: ignore
@@ -78,6 +80,32 @@ def _render_item(item: Any, context: RenderContext) -> Any:
         return item
 
 
+def _render_map(item: map, context: RenderContext) -> list[Any]:
+    """
+    Renders a map object. Checks if each child has a unique key and then the map as a list
+
+    Args:
+        item: The map to render.
+        context: The context to render the map in.
+
+    Returns:
+        The rendered map.
+    """
+    has_sent_error = False  # Only throw the error once
+    logger.debug("_render_map %s", item)
+    with context.open():
+        result = []
+        used_keys = set()
+        for key, value in enumerate(item):
+            if isinstance(value, Element):
+                if value.key_prop in used_keys and not has_sent_error:
+                    logger.error('Each child in a map should have a unique "key" prop.')
+                    has_sent_error = True
+                used_keys.add(value.key_prop)
+            result.append(_render_child_item(value, str(key), context))
+        return result
+
+
 def _render_list(
     item: list[Any] | tuple[Any, ...], context: RenderContext
 ) -> list[Any]: