feat: Add ui.resolve to support URIs in dh.ui

plugins/ui/docs/components/combo_box.md

@@ -47,7 +47,7 @@ Recommendations for creating clear and effective combo boxes:
 
 ## Data sources
 
-For combo boxes, we can use a Deephaven table as a data source to populate the options. When using a table, it automatically uses the first column as both the key and label. If there are any duplicate keys, an error will be thrown; to avoid this, a `select_distinct` can be used on the table prior to using it as a combo box data source.
+For combo boxes, we can use a Deephaven table or [URI](uri.md) as a data source to populate the options. When using a table, it automatically uses the first column as both the key and label. If there are any duplicate keys, an error will be thrown; to avoid this, a `select_distinct` can be used on the table prior to using it as a combo box data source.
 
 ```python order=my_combo_box_table_source_example,countries
 from deephaven import ui, empty_table

plugins/ui/docs/components/list_view.md

@@ -26,7 +26,7 @@ my_list_view = ui_list_view()
 
 ## Table Source Example
 
-List view items can also be generated from a table directly or using `item_table_source`.
+List view items can also be generated from a table or [URI](uri.md) directly or using `item_table_source`.
 
 ### Passing Table Directly
 

plugins/ui/docs/components/picker.md

@@ -41,7 +41,7 @@ Recommendations for creating pickers:
 
 ## Data sources
 
-We can use a Deephaven table as a data source to populate the options for pickers. A table automatically uses the first column as both the key and label. If there are duplicate keys, an error will be thrown; to avoid this, a `select_distinct` can be used on the table before using it as a picker data source.
+We can use a Deephaven table or [URI](uri.md) as a data source to populate the options for pickers. A table automatically uses the first column as both the key and label. If there are duplicate keys, an error will be thrown; to avoid this, a `select_distinct` can be used on the table before using it as a picker data source.
 
 ```python order=my_picker_table_source_example,stocks
 from deephaven import ui

plugins/ui/docs/components/table.md

@@ -19,6 +19,10 @@ t = ui.table(_t)
 2. Use a UI table to show properties like filters as if the user had created them in the UI. Users can change the default values provided by the UI table, such as filters.
 3. UI tables handle ticking tables automatically, so you can pass any Deephaven table to a UI table.
 
+## Table data source
+
+The first argument to `ui.table` is the table data source. This can be any Deephaven table, a URI to a table, or a string which will be resolved as a URI. See the [URI Element](uri.md) documentation for more information on how to use URIs with UI elements.
+
 ## Formatting
 
 You can format the table using the `format_` prop. This prop takes a `ui.TableFormmat` object or list of `ui.TableFormat` objects. `ui.TableFormat` is a dataclass that encapsulates the formatting options for a table. The full list of formatting options can be found in the [API Reference](#tableformat).

plugins/ui/docs/components/uri.md

@@ -0,0 +1,74 @@
+# URI
+
+URIs are a way to reference Deephaven resources, such as tables or figures, from another instance. Deephaven UI has its own `ui.resolve` method that does not require any server to server communication. Instead, the web client will communicate directly with the appropriate server to get the resource.
+
+## Usage
+
+Deephaven UI provides a `resolve` method (not to be confused with `resolve` method from the Deephaven URI package) that allows you to reference Deephaven resources from other instances. Unlike the Deephaven URI package, `ui.resolve` does not resolve the URI to its resource on the server, so you cannot apply operations to the resource.
+
+> [!NOTE]
+> The only valid URIs for deephaven UI at the moment are for Deephaven Enterprise persistent queries.
+> See the [Deephaven Enterprise documentation](/enterprise/docs/deephaven-database/remote-tables-python/#uris) for more information on persistent query URIs. The optional parameters are ignored by `ui.resolve`.
+
+### Plain references
+
+One way to use `ui.resolve` is to assign the reference to a variable which will be opened by the web UI just like you created the resource in the first place. This can be useful if you want to display tables from multiple sources in a single dashboard.
+
+```py order=null
+from deephaven import ui
+
+t = ui.resolve("pq://MyPersistentQuery/scope/table") # Can't do t.update() or any other operations
+p = ui.resolve("pq://MyPersistentQuery/scope/plot")
+
+
+@ui.component
+def basic_dashboard():
+  return ui.panel(ui.flex(t, p), title="Table and Plot")
+
+
+my_dashboard = ui.dashboard(basic_dashboard())
+```
+
+### Usage in UI components
+
+Some Deephaven UI components that accept tables as sources can also accept URIs. This includes [`ui.table`](table.md) and any components that accept an `item_table_source`. When using a URI with UI components, you can often just use the string without needing to call `ui.resolve`. However, if a component may take a string as a valid child (e.g., `ui.picker`), then you must use `ui.resolve` to distinguish between a string and a URI. You can always use `ui.resolve` in the places you can use just the string if you prefer to be explicit.
+
+> [!WARNING]
+> Deephaven UI URIs cannot be used as table sources in the Deephaven Express plotting library.
+
+```py order=null
+from deephaven import ui
+
+# You can use any ui.table props with a URI source
+t = ui.table(
+  "pq://MyPersistentQuery/scope/table",
+  format_=ui.TableFormat(cols="A", background_color="salmon")
+)
+
+# Must use ui.resolve because string is a valid child
+picker = ui.picker(
+  ui.resolve("pq://MyPersistentQuery/scope/picker_table"),
+  label="Picker Table"
+)
+
+list_view = ui.list_view(
+  ui.item_table_source(
+    "pq://MyPersistentQuery/scope/list_view_table",
+    key_column="Keys",
+    label_column="Labels"
+  )
+)
+```
+
+## URI Encoding
+
+If your URI contains any special characters, such as spaces or slashes, you must encode the URI components using standard URL encoding. This is because URIs are often used in web contexts where special characters can cause issues. You can use Python's built-in `urllib.parse.quote` function to encode your URIs.
+
+```py order=null
+from urllib.parse import quote
+from deephaven import ui
+
+# Encode the URI
+pq_name = quote("My PQ/with spaces!", safe="") # safe="" will encode the forward slash
+t = ui.resolve(f"pq://{pq_name}/scope/table")
+```

plugins/ui/docs/sidebar.json

@@ -406,6 +406,10 @@
                 "label": "toggle_button",
                 "path": "components/toggle_button.md"
               },
+              {
+                "label": "URI/resolve",
+                "path": "components/uri.md"
+              },
               {
                 "label": "view",
                 "path": "components/view.md"

plugins/ui/docs/snapshots/33b30d272f1930e734245b40bfed92f7.json

@@ -0,0 +1 @@
+{"file":"components/uri.md","objects":{"t":{"type":"deephaven.ui.Element","data":{"document":{"__dhElemName":"deephaven.ui.elements.UITable","props":{"table":{"__dhElemName":"deephaven.ui.elements.UriElement","props":{"uri":"pq://MyPersistentQuery/scope/table"}},"format_":{"cols":"A","background_color":"salmon"},"showQuickFilters":false,"showGroupingColumn":true,"showSearch":false,"reverse":false}},"state":"{}"}},"picker":{"type":"deephaven.ui.Element","data":{"document":{"__dhElemName":"deephaven.ui.components.Picker","props":{"align":"start","direction":"bottom","shouldFlip":true,"label":"Picker Table","labelPosition":"top","children":{"__dhElemName":"deephaven.ui.elements.UriElement","props":{"uri":"pq://MyPersistentQuery/scope/picker_table"}}}},"state":"{}"}},"list_view":{"type":"deephaven.ui.Element","data":{"document":{"__dhElemName":"deephaven.ui.components.ListView","props":{"density":"COMPACT","overflowMode":"truncate","selectionMode":"MULTIPLE","labelColumn":"Labels","keyColumn":"Keys","children":{"__dhElemName":"deephaven.ui.elements.UriElement","props":{"uri":"pq://MyPersistentQuery/scope/list_view_table"}}}},"state":"{}"}}}}

plugins/ui/docs/snapshots/894c61fa11e650e9541d5dc448179668.json

@@ -0,0 +1 @@
+{"file":"components/uri.md","objects":{"t":{"type":"deephaven.ui.Element","data":{"document":{"__dhElemName":"deephaven.ui.elements.UriElement","props":{"uri":"pq://MyPersistentQuery/scope/table"}},"state":"{}"}},"p":{"type":"deephaven.ui.Element","data":{"document":{"__dhElemName":"deephaven.ui.elements.UriElement","props":{"uri":"pq://MyPersistentQuery/scope/plot"}},"state":"{}"}},"my_dashboard":{"type":"deephaven.ui.Dashboard","data":{"document":{"__dhElemName":"deephaven.ui.components.Dashboard","props":{"children":{"__dhElemName":"__main__.basic_dashboard","props":{"children":{"__dhElemName":"deephaven.ui.components.Panel","props":{"title":"Table and Plot","direction":"column","alignItems":"start","gap":"size-100","overflow":"auto","padding":"size-100","children":{"__dhElemName":"deephaven.ui.components.Flex","props":{"gap":"size-100","flex":"auto","children":[{"__dhElemName":"deephaven.ui.elements.UriElement","props":{"uri":"pq://MyPersistentQuery/scope/table"}},{"__dhElemName":"deephaven.ui.elements.UriElement","props":{"uri":"pq://MyPersistentQuery/scope/plot"}}]}}}}}}}},"state":"{}"}}}}

plugins/ui/docs/snapshots/a289b826abe4f81d6a28be044d7501a9.json

@@ -0,0 +1 @@
+{"file":"components/uri.md","objects":{"t":{"type":"deephaven.ui.Element","data":{"document":{"__dhElemName":"deephaven.ui.elements.UriElement","props":{"uri":"pq://My%20PQ%2Fwith%20spaces%21/scope/table"}},"state":"{}"}}}}

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

@@ -7,15 +7,16 @@
 from .item import ItemElement
 from .list_action_group import ListActionGroupElement
 from .list_action_menu import ListActionMenuElement
-from ..elements import Element
+from ..elements import Element, resolve
+from ..elements.UriElement import UriElement
 from ..types import ColumnName, Stringable
 
 ListViewItem = Union[Stringable, ItemElement]
 ListViewElement = Element
 
 
 class ItemTableSource(TypedDict):
-    table: Table | PartitionedTable
+    table: Table | PartitionedTable | UriElement
     key_column: ColumnName | None
     label_column: ColumnName | None
     description_column: ColumnName | None
@@ -25,7 +26,7 @@ class ItemTableSource(TypedDict):
 
 
 def item_table_source(
-    table: Table | PartitionedTable,
+    table: Table | PartitionedTable | UriElement | str,
     key_column: ColumnName | None = None,
     label_column: ColumnName | None = None,
     description_column: ColumnName | None = None,
@@ -43,7 +44,7 @@ def item_table_source(
 
     Args:
         table:
-            The table to use as the source of items.
+            The table to use as the source of items. May be a UriElement or a URI string.
         key_column:
             The column of values to use as item keys. Defaults to the first column.
         label_column:
@@ -66,4 +67,6 @@ def item_table_source(
         The item table source to pass as a child to a component that supports it.
     """
 
+    table = resolve(table) if isinstance(table, str) else table
+
     return cast(ItemTableSource, locals())

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

@@ -3,7 +3,8 @@
 from typing import Literal, Any, Optional
 import logging
 from deephaven.table import Table
-from ..elements import Element
+from ..elements import Element, resolve
+from ..elements.UriElement import UriElement
 from .types import AlignSelf, DimensionValue, JustifySelf, LayoutFlex, Position
 from ..types import (
     CellPressCallback,
@@ -129,7 +130,7 @@ class table(Element):
     Customization to how a table is displayed, how it behaves, and listen to UI events.
 
     Args:
-        table: The table to wrap
+        table: The table to wrap. May be a UriElement or URI string.
         format_: A formatting rule or list of formatting rules for the table.
         on_row_press: The callback function to run when a row is clicked.
             The callback is invoked with the visible row data provided in a dictionary where the
@@ -224,7 +225,7 @@ class table(Element):
 
     def __init__(
         self,
-        table: Table,
+        table: Table | UriElement | str,
         *,
         format_: TableFormat | list[TableFormat] | None = None,
         on_row_press: RowPressCallback | None = None,
@@ -299,6 +300,7 @@ def __init__(
             )
 
         props = locals()
+        props["table"] = resolve(table) if isinstance(table, str) else table
         del props["self"]
         self._props = props
         self._key = props.get("key")

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

@@ -0,0 +1,51 @@
+from __future__ import annotations
+
+from .Element import Element, PropsType
+from .._internal import RenderContext
+
+
+class UriElement(Element):
+    """
+    Represents a remote object to be fetched by the client.
+
+    Args:
+        uri: The URI to fetch.
+        key: An optional key for the element.
+    """
+
+    _uri: str
+
+    _key: str | None = None
+
+    def __init__(self, uri: str, key: str | None = None):
+        self._uri = uri
+        self._key = key
+
+    @property
+    def name(self) -> str:
+        return "deephaven.ui.elements.UriElement"
+
+    @property
+    def key(self) -> str | None:
+        return self._key
+
+    def render(self, context: RenderContext) -> PropsType:
+        return {"uri": self._uri}
+
+    def __eq__(self, other: object) -> bool:
+        if not isinstance(other, UriElement):
+            return False
+        return self._uri == other._uri and self._key == other._key
+
+
+def resolve(uri: str) -> UriElement:
+    """
+    Resolve a URI to a UriNode which can be used to fetch an object on the client from another query.
+
+    Args:
+        uri: The URI to resolve.
+
+    Returns:
+        A UriNode with the given URI.
+    """
+    return UriElement(uri)

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

@@ -2,11 +2,13 @@
 from .BaseElement import BaseElement
 from .DashboardElement import DashboardElement
 from .FunctionElement import FunctionElement
+from .UriElement import resolve
 
 __all__ = [
     "BaseElement",
     "DashboardElement",
     "Element",
     "FunctionElement",
     "PropsType",
+    "resolve",
 ]

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

@@ -8,14 +8,18 @@ import {
   ComboBoxProps as DHComboBoxJSApiProps,
 } from '@deephaven/jsapi-components';
 import { isElementOfType } from '@deephaven/react-hooks';
+import type { dh } from '@deephaven/jsapi-types';
+import { ApiContext } from '@deephaven/jsapi-bootstrap';
 import { getSettings, RootState } from '@deephaven/redux';
 import {
   SerializedPickerProps,
   usePickerProps,
   WrappedDHPickerJSApiProps,
 } from './hooks/usePickerProps';
 import ObjectView from './ObjectView';
-import { useReExportedTable } from './hooks/useReExportedTable';
+import { useObjectViewObject } from './hooks/useObjectViewObject';
+import UriObjectView from './UriObjectView';
+import WidgetErrorView from '../widget/WidgetErrorView';
 
 export function ComboBox(
   props: SerializedPickerProps<
@@ -25,15 +29,33 @@ export function ComboBox(
   const settings = useSelector(getSettings<RootState>);
   const { children, ...pickerProps } = usePickerProps(props);
 
-  const isObjectView = isElementOfType(children, ObjectView);
-  const table = useReExportedTable(children);
+  const isObjectView =
+    isElementOfType(children, ObjectView) ||
+    isElementOfType(children, UriObjectView);
+  const {
+    widget: table,
+    api,
+    isLoading,
+    error,
+  } = useObjectViewObject<dh.Table>(children);
 
   if (isObjectView) {
-    return (
-      table && (
+    if (error != null) {
+      return <WidgetErrorView error={error} />;
+    }
+    if (isLoading || table == null || api == null) {
+      return (
         // eslint-disable-next-line react/jsx-props-no-spreading
+        <DHComboBox loadingState="loading" {...pickerProps}>
+          {[]}
+        </DHComboBox>
+      );
+    }
+    return (
+      <ApiContext.Provider value={api}>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <DHComboBoxJSApi {...pickerProps} table={table} settings={settings} />
-      )
+      </ApiContext.Provider>
     );
   }