Add PersistentDialog component (#199)

* Add PersistentDialog component

* Remove dev tag

Author: evilkermit

CHANGELOG.md

@@ -1,3 +1,7 @@
+### nova-trame, 1.6.0
+
+* Adds a PersistentDialog component that allows creating persistent dialogs with more customization than default Vuetify VDialogs (thanks to John Duggan).
+
 ### nova-trame, 1.5.0
 
 * Add ability to specify actions on DataSelector files (thanks to John Duggan).

docs/api.rst

@@ -50,6 +50,10 @@ General Purpose Components
     :members:
     :special-members: __new__
 
+.. autoclass:: nova.trame.view.components.PersistentDialog
+    :members:
+    :special-members: __new__
+
 .. _api_remotefileinput:
 
 .. autoclass:: nova.trame.view.components.RemoteFileInput

pixi.lock

@@ -1,6 +1,6 @@
 [project]
 name = "nova-trame"
-version = "1.5.0"
+version = "1.6.0"
 description = "A Python Package for injecting curated themes and custom components into Trame applications"
 authors = [
     { name = "John Duggan", email = "dugganjw@ornl.gov" },

pyproject.toml

@@ -2,6 +2,7 @@
 from .execution_buttons import ExecutionButtons
 from .file_upload import FileUpload
 from .input_field import InputField
+from .persistent_dialog import PersistentDialog
 from .progress_bar import ProgressBar
 from .remote_file_input import RemoteFileInput
 from .tool_outputs import ToolOutputWindows
@@ -12,6 +13,7 @@
     "FileUpload",
     "InputField",
     "ProgressBar",
+    "PersistentDialog",
     "RemoteFileInput",
     "ToolOutputWindows",
 ]

src/nova/trame/view/components/__init__.py

@@ -0,0 +1,68 @@
+"""View implementation for PersistentDialog."""
+
+from typing import Any, Tuple, Union
+from warnings import warn
+
+from trame.app import get_server
+from trame.widgets import vuetify3 as vuetify
+from trame_server.core import State
+
+from nova.trame._internal.utils import get_state_name, get_state_param
+
+
+class PersistentDialog(vuetify.VDialog):
+    """Component for creating a Vuetify dialog that closes on the escape key but not outside clicks."""
+
+    def __init__(
+        self,
+        v_model: Union[str, Tuple],
+        close_on_escape: bool = True,
+        **kwargs: Any,
+    ) -> None:
+        """Constructor for PersistentDialog.
+
+        For all parameters, tuples have a special syntax. See :ref:`TrameTuple <api_trame_tuple>` for a description of
+        it.
+
+        Parameters
+        ----------
+        v_model : Union[str, Tuple]
+            The state variable determining if the dialog is opened or closed.
+        close_on_escape : bool
+            If true, then the dialog will still close when the user presses the escape key. Defaults to true. This
+            parameter does not support binding as dynamic behavior here would present a confusing user experience.
+        **kwargs
+            All other arguments will be passed to the underlying
+            `Dialog component <https://trame.readthedocs.io/en/latest/trame.widgets.vuetify3.html#trame.widgets.vuetify3.VDialog>`_.
+
+        Returns
+        -------
+        None
+        """
+        self._server = get_server(None, client_type="vue3")
+        self._v_model = v_model
+        self._field_name = get_state_param(self.state, v_model)
+        self._model_name = get_state_name(self._field_name)
+
+        if "persistent" in kwargs:
+            warn(
+                "PersistentDialog will ignore the provided 'persistent' parameter as it forces persistent=True.",
+                stacklevel=1,
+            )
+            kwargs.pop("persistent", None)
+
+        if close_on_escape:
+            super().__init__(
+                v_model=self._v_model,
+                v_on_keydown_esc=(
+                    f"window.trame.state.state.{self._field_name} = false; flushState('{self._model_name}');"
+                ),
+                persistent=True,
+                **kwargs,
+            )
+        else:
+            super().__init__(v_model=self._v_model, persistent=True, **kwargs)
+
+    @property
+    def state(self) -> State:
+        return self._server.state

src/nova/trame/view/components/persistent_dialog.py

@@ -16,6 +16,7 @@ class Config(BaseModel):
     selected_folder: str = Field(default="", title="Selected Folder")
     snackbar: bool = Field(default=True)
     active_tab: int = Field(default=0)
+    dialog_open: bool = Field(default=False)
     debounce_rate: int = Field(default=1000, title="Debounce Rate")
     debounce: str = Field(
         default="",
@@ -59,6 +60,9 @@ def on_throttle(cls, text: str) -> str:
 
         return text
 
+    def open_dialog(self) -> None:
+        self.dialog_open = True
+
 
 class LocalStorageState(BaseModel):
     """Separate Pydantic model to hold local storage state which can leak in unit tests."""

tests/gallery/models/config.py

@@ -24,6 +24,10 @@ def append_to_autoscroll(self, value: str) -> None:
     def get_local_storage(self) -> str:
         return self.local_storage_state.value
 
+    def open_persistent_dialog(self) -> None:
+        self.config.open_dialog()
+        self.config_bind.update_in_view(self.config)
+
     def set_local_storage(self, value: Optional[str]) -> None:
         if value is not None:
             self.local_storage_state.value = value

tests/gallery/view_models/config.py

@@ -23,7 +23,7 @@
 from nova.common.signals import Signal, ToolCommand, get_signal_id
 from nova.mvvm.trame_binding import TrameBinding
 from nova.trame import ThemedApp
-from nova.trame.view.components import DataSelector, FileUpload, InputField, RemoteFileInput
+from nova.trame.view.components import DataSelector, FileUpload, InputField, PersistentDialog, RemoteFileInput
 from nova.trame.view.components.execution_buttons import ExecutionButtons
 from nova.trame.view.components.ornl import NeutronDataSelector
 from nova.trame.view.components.progress_bar import ProgressBar
@@ -217,6 +217,9 @@ def create_ui(self, **kwargs: Any) -> None:
                         vuetify.VBtn("Open Dialog", v_bind="props")
                     with vuetify.Template(v_slot_default=True):
                         vuetify.VCard(title="Dialog")
+                with PersistentDialog(v_model="config.dialog_open", max_width=500):
+                    vuetify.VCard(title="Dialog")
+                vuetify.VBtn("Persistent Dialog", click=self.view_model.open_persistent_dialog)
                 with html.Div():
                     html.Span("Divider")
                     vuetify.VDivider()

tests/gallery/views/app.py

@@ -0,0 +1,29 @@
+"""Unit tests for PersistentDialog."""
+
+from trame.app import get_server
+from trame_server.core import Server
+
+from nova.trame.view.components import PersistentDialog
+from nova.trame.view.theme import ThemedApp
+
+
+def test_persistent_dialog() -> None:
+    class MyTrameApp(ThemedApp):
+        def __init__(self, server: Server = None) -> None:
+            server = get_server(None, client_type="vue3")
+            super().__init__(server=server)
+            self.create_ui()
+
+        def create_ui(self) -> None:
+            with super().create_ui():
+                dialog = PersistentDialog("config.test", max_width=500)
+                assert dialog.v_model == "config.test"
+                assert dialog.v_on_keydown_esc == "window.trame.state.state.config.test = false; flushState('config');"
+                assert dialog.max_width == 500
+
+                dialog = PersistentDialog("config.test2", close_on_escape=False, max_width=505)
+                assert dialog.v_model == "config.test2"
+                assert dialog.v_on_keydown_esc is None
+                assert dialog.max_width == 505
+
+    MyTrameApp()