Add color field

examples/24_notification.py

@@ -81,11 +81,13 @@ def _(event: viser.GuiEvent) -> None:
         )
 
         time.sleep(3.0)
+
         loading_notif.title = "Updated notification"
         loading_notif.body = "This notification has been updated!"
         loading_notif.loading = False
         loading_notif.with_close_button = True
         loading_notif.auto_close = 5000
+        loading_notif.color = "green"
 
     while True:
         time.sleep(1.0)

src/viser/_messages.py

@@ -99,12 +99,14 @@ def redundancy_key(self) -> str:
 class NotificationMessage(Message):
     """Notification message."""
 
+    mode: Literal["show", "update"]
     id: str
     title: str
     body: str
     loading: bool
     with_close_button: bool
     auto_close: Union[int, Literal[False]]
+    color: Optional[Color]
 
 
 @dataclasses.dataclass
@@ -114,18 +116,6 @@ class RemoveNotificationMessage(Message):
     id: str
 
 
-@dataclasses.dataclass
-class UpdateNotificationMessage(Message):
-    """Update a specific notification."""
-
-    id: str
-    title: str
-    body: str
-    loading: bool
-    with_close_button: bool
-    auto_close: Union[int, Literal[False]]
-
-
 @dataclasses.dataclass
 class ViewerCameraMessage(Message):
     """Message for a posed viewer camera.

src/viser/_notification_handle.py

@@ -3,8 +3,9 @@
 import dataclasses
 from typing import Literal
 
-from viser._messages import RemoveNotificationMessage, UpdateNotificationMessage
-from viser.infra._infra import WebsockClientConnection
+from ._gui_api import Color
+from ._messages import NotificationMessage, RemoveNotificationMessage
+from .infra._infra import WebsockClientConnection
 
 
 @dataclasses.dataclass
@@ -16,6 +17,7 @@ class _NotificationHandleState:
     loading: bool
     with_close_button: bool
     auto_close: int | Literal[False]
+    color: Color | None
 
 
 @dataclasses.dataclass
@@ -24,14 +26,16 @@ class NotificationHandle:
 
     _impl: _NotificationHandleState
 
-    def _update_notification(self) -> None:
-        m = UpdateNotificationMessage(
+    def _sync_with_client(self, first: bool = False) -> None:
+        m = NotificationMessage(
+            "show" if first else "update",
             self._impl.id,
             self._impl.title,
             self._impl.body,
             self._impl.loading,
             self._impl.with_close_button,
             self._impl.auto_close,
+            self._impl.color,
         )
         self._impl.websock_interface.queue_message(m)
 
@@ -46,7 +50,7 @@ def title(self, title: str) -> None:
             return
 
         self._impl.title = title
-        self._update_notification()
+        self._sync_with_client()
 
     @property
     def body(self) -> str:
@@ -59,7 +63,7 @@ def body(self, body: str) -> None:
             return
 
         self._impl.body = body
-        self._update_notification()
+        self._sync_with_client()
 
     @property
     def loading(self) -> bool:
@@ -72,7 +76,7 @@ def loading(self, loading: bool) -> None:
             return
 
         self._impl.loading = loading
-        self._update_notification()
+        self._sync_with_client()
 
     @property
     def with_close_button(self) -> bool:
@@ -85,7 +89,7 @@ def with_close_button(self, with_close_button: bool) -> None:
             return
 
         self._impl.with_close_button = with_close_button
-        self._update_notification()
+        self._sync_with_client()
 
     @property
     def auto_close(self) -> int | Literal[False]:
@@ -99,7 +103,20 @@ def auto_close(self, auto_close: int | Literal[False]) -> None:
             return
 
         self._impl.auto_close = auto_close
-        self._update_notification()
+        self._sync_with_client()
+
+    @property
+    def color(self) -> Color:
+        """Color of the notification."""
+        return self._impl.color
+
+    @color.setter
+    def color(self, color: Color) -> None:
+        if color == self._impl.color:
+            return
+
+        self._impl.color = color
+        self._sync_with_client()
 
     def remove(self) -> None:
         self._impl.websock_interface.queue_message(

src/viser/_viser.py

@@ -20,7 +20,7 @@
 
 from . import _client_autobuild, _messages, infra
 from . import transforms as tf
-from ._gui_api import GuiApi, _make_unique_id
+from ._gui_api import Color, GuiApi, _make_unique_id
 from ._notification_handle import NotificationHandle, _NotificationHandleState
 from ._scene_api import SceneApi, cast_vector
 from ._tunnel import ViserTunnel
@@ -395,6 +395,7 @@ def add_notification(
         loading: bool = False,
         with_close_button: bool = True,
         auto_close: int | Literal[False] = False,
+        color: Color | None = None,
     ) -> NotificationHandle:
         """Add a notification to the client's interface.
 
@@ -422,18 +423,10 @@ def add_notification(
                 loading=loading,
                 with_close_button=with_close_button,
                 auto_close=auto_close,
+                color=color,
             )
         )
-        self.gui._websock_interface.queue_message(
-            _messages.NotificationMessage(
-                id=handle._impl.id,
-                title=title,
-                body=body,
-                loading=loading,
-                with_close_button=with_close_button,
-                auto_close=auto_close,
-            )
-        )
+        handle._sync_with_client(first=True)
         return handle
 
 

src/viser/client/src/MessageHandler.tsx

@@ -134,14 +134,27 @@ function useMessageHandler() {
 
       // Add a notification.
       case "NotificationMessage": {
-        notifications.show({
-          id: message.id,
-          title: message.title,
-          message: message.body,
-          withCloseButton: message.with_close_button,
-          loading: message.loading,
-          autoClose: message.auto_close,
-        });
+        if (message.mode === "show") {
+          notifications.show({
+            id: message.id,
+            title: message.title,
+            message: message.body,
+            withCloseButton: message.with_close_button,
+            loading: message.loading,
+            autoClose: message.auto_close,
+            color: message.color ?? undefined,
+          });
+        } else if (message.mode === "update") {
+          notifications.update({
+            id: message.id,
+            title: message.title,
+            message: message.body,
+            withCloseButton: message.with_close_button,
+            loading: message.loading,
+            autoClose: message.auto_close,
+            color: message.color ?? undefined,
+          });
+        }
         return;
       }
 
@@ -150,20 +163,6 @@ function useMessageHandler() {
         notifications.hide(message.id);
         return;
       }
-
-      // Update a specific notification.
-      case "UpdateNotificationMessage": {
-        notifications.update({
-          id: message.id,
-          title: message.title,
-          message: message.body,
-          loading: message.loading,
-          withCloseButton: message.with_close_button,
-          autoClose: message.auto_close,
-        });
-        return;
-      }
-
       // Enable/disable whether scene pointer events are sent.
       case "ScenePointerEnableMessage": {
         // Update scene click enable state.

src/viser/client/src/WebsocketMessages.tsx

@@ -16,12 +16,29 @@ export interface RunJavascriptMessage {
  */
 export interface NotificationMessage {
   type: "NotificationMessage";
+  mode: "show" | "update";
   id: string;
   title: string;
   body: string;
   loading: boolean;
   with_close_button: boolean;
   auto_close: number | false;
+  color:
+    | "dark"
+    | "gray"
+    | "red"
+    | "pink"
+    | "grape"
+    | "violet"
+    | "indigo"
+    | "blue"
+    | "cyan"
+    | "green"
+    | "lime"
+    | "yellow"
+    | "orange"
+    | "teal"
+    | null;
 }
 /** Remove a specific notification.
  *
@@ -31,19 +48,6 @@ export interface RemoveNotificationMessage {
   type: "RemoveNotificationMessage";
   id: string;
 }
-/** Update a specific notification.
- *
- * (automatically generated)
- */
-export interface UpdateNotificationMessage {
-  type: "UpdateNotificationMessage";
-  id: string;
-  title: string;
-  body: string;
-  loading: boolean;
-  with_close_button: boolean;
-  auto_close: number | false;
-}
 /** Message for a posed viewer camera.
  * Pose is in the form T_world_camera, OpenCV convention, +Z forward.
  *
@@ -977,7 +981,6 @@ export type Message =
   | RunJavascriptMessage
   | NotificationMessage
   | RemoveNotificationMessage
-  | UpdateNotificationMessage
   | ViewerCameraMessage
   | ScenePointerMessage
   | ScenePointerEnableMessage