Merge pull request #529 from materialsproject/messageaio-v2

optimize messageAIO usage

Author: minhsueh

crystal_toolkit/components/messageAIO.py

@@ -1,35 +1,46 @@
 """
-Author: Sheng Pang
-Modifier: Min-Hsueh Chiu
-
-Message Snake - A reusable Dash notification snackbar component.
+Authors: Sheng Pang & Min-Hsueh Chiu
 
+messageAIO - A reusable Dash notification snackbar component.
 Provides fixed-position toast notifications callable from any page.
-Supports fade-in/fade-out animations, auto-dismiss, and manual close.
+Supports fade-in/fade-out animations (not implemented), auto-dismiss (not implemented), and manual close.
+
+
+V1: The instantiated messageAIO is limited to one single `msg_type`.
+
+So it becomes difficult to use when an app has multiple msg_types.
+Developers would need to instantiate multiple MessageAIO components and
+define multiple Outputs in the callback.
+
+V2 improvement:
+- use a single instantiation and only one Output per callback.
+- If `ids.data` is change, then it should be visible, this logic should be handled here.
+
+
 
 Usage:
     from crystal_toolkit.components.error_msg import MessageAIO
 
     # 1. Include in layout
-    MessageAIO(
-        "Invalid composition input!",
-        aio_id=self.id("invalid-comp-alarm"),
-        msg_type="error",
-    ),
+    MessageAIO(aio_id=self.id(<COMPONENT_ID>)),
 
     # 2. Add to callback:
-    Output(MessageAIO.ids.visible(self.id("invalid-comp-alarm")), "data"),
-    # Return True to display the message, and False to hide it.
+    Output(MessageAIO.ids.data(self.id(<COMPONENT_ID>)), "data"),
+    Return {"message": <DISPLAY MSG>, "msg_type": <MSG_TYPE>}
 
     Note: Do not need to register callbacks as using All-in-one pattern
 """
 
 from __future__ import annotations
 
-from dash import MATCH, Input, Output, callback, ctx, dcc, html
+import logging
+
+from dash import MATCH, Input, Output, State, callback, ctx, dcc, html, no_update
 
 from crystal_toolkit.core.mpcomponent import MPComponent
 
+logger = logging.getLogger(__name__)
+
 # Bulma-inspired color scheme for notification types
 _TYPE_COLORS = {
     "info": {
@@ -106,11 +117,6 @@ class ids:
             "subcomponents": "close_button",
             "aio_id": aio_id,
         }
-        message = lambda aio_id: {
-            "component": "MessageAIO",
-            "subcomponents": "message",
-            "aio_id": aio_id,
-        }
         div = lambda aio_id: {
             "component": "MessageAIO",
             "subcomponents": "div",
@@ -121,9 +127,14 @@ class ids:
             "subcomponents": "timer",
             "aio_id": aio_id,
         }
-        visible = lambda aio_id: {
+        data = lambda aio_id: {
+            "component": "MessageAIO",
+            "subcomponents": "data",
+            "aio_id": aio_id,
+        }
+        message = lambda aio_id: {
             "component": "MessageAIO",
-            "subcomponents": "visible",
+            "subcomponents": "message",
             "aio_id": aio_id,
         }
 
@@ -133,9 +144,7 @@ class ids:
 
     def __init__(
         self,
-        message,
         aio_id,
-        msg_type,
         position="bottom-right",
         style=None,
         show_icon=False,
@@ -151,30 +160,23 @@ def __init__(
         to enable auto-dismiss and close functionality.
 
         Args:
-            message (str): The notification message to display.
             id (str): Unique HTML id for the notification container.
-            msg_type (str): Notification type - 'info', 'warning', 'error', 'success'.
-            position (str): Fixed position on screen. One of:
+            position (str, optional): Fixed position on screen. One of:
                 'top', 'bottom', 'center', 'top-right', 'top-left',
                 'bottom-right', 'bottom-left'.
             style (dict, optional): Additional CSS style overrides.
-            show_icon (bool): Whether to show a type-specific icon.
-            min_width (str): Minimum width of the notification.
-            max_width (str): Maximum width of the notification.
-            z_index (int): CSS z-index for layering.
-            auto_dismiss_ms (int): Auto-dismiss delay in milliseconds. Defaults to 50000 (50s).
+            show_icon (bool, optional): Whether to show a type-specific icon.
+            min_width (str, optional): Minimum width of the notification.
+            max_width (str, optional): Maximum width of the notification.
+            z_index (int, optional): CSS z-index for layering.
+            auto_dismiss_ms (int, optional): Auto-dismiss delay in milliseconds. Defaults to 50000 (50s).
 
         """
 
         self.snake_id = aio_id
         self.show_icon = show_icon
-        self.msg_type = msg_type
-        self.message = message
         self.auto_dismiss_ms = auto_dismiss_ms
 
-        # Resolve type colors
-        type_style = _TYPE_COLORS.get(msg_type, _TYPE_COLORS["info"])
-
         # Resolve position
         pos_style = _POSITION_STYLES.get(position, _POSITION_STYLES["bottom-right"])
 
@@ -197,7 +199,6 @@ def __init__(
             # Visible on mount; fade-out handled by callback via transition
             "opacity": "1",
             "transition": "opacity 0.4s ease",
-            **type_style,
             **pos_style,
         }
 
@@ -210,7 +211,10 @@ def __init__(
         sub_layouts = self._sub_layouts
         super().__init__(
             [  # Equivalent to `html.Div([...])`
-                dcc.Store(id=self.ids.visible(self.snake_id), data=False),
+                dcc.Store(
+                    id=self.ids.data(self.snake_id),
+                    data={"message": None, "msg_type": "info"},
+                ),
                 sub_layouts["notification_div"],
                 sub_layouts["interval"],
             ],
@@ -235,9 +239,7 @@ def _sub_layouts(self):
 
         # Message text
         children.append(
-            html.Span(
-                self.message, id=self.ids.message(self.snake_id), style={"flex": "1"}
-            )
+            html.Span(id=self.ids.message(self.snake_id), style={"flex": "1"})
         )
 
         # Close button
@@ -293,21 +295,42 @@ def layout(self) -> html.Div:
     """
 
     @callback(
-        Output(ids.wrapper(MATCH), "style"),
-        Input(ids.visible(MATCH), "data"),
+        Output(ids.message(MATCH), "children"),
+        Output(ids.wrapper(MATCH), "style", allow_duplicate=True),
+        Output(ids.div(MATCH), "style"),
+        Input(ids.data(MATCH), "data"),
         Input(ids.close_button(MATCH), "n_clicks"),
+        State(ids.div(MATCH), "style"),
         prevent_initial_call=True,
     )
-    def sync_message(command_visible, close_clicks):
-        triggered = ctx.triggered_id
+    def update_messages(input_data, close_clicks, cur_style):
+        if not isinstance(input_data, dict):
+            raise ValueError("`input_data` must be a dictionary for MessageAIO")
 
         if (
-            isinstance(triggered, dict)
-            and triggered.get("subcomponents") == "close_button"
+            isinstance(ctx.triggered_id, dict)
+            and ctx.triggered_id.get("subcomponents") == "close_button"
         ):
-            return {"display": "none"}
+            return no_update, {"display": "none"}, cur_style
+
+        if not input_data:
+            return no_update, {"display": "none"}, cur_style
+
+        message = input_data.get("message", None)
+        msg_type = input_data.get("msg_type", None)
+
+        if not message:
+            raise ValueError("`message` field is required for MessageAIO")
+
+        if not msg_type:
+            logger.warning("No `msg_type`. Falling back to 'info'")
+            msg_type = "info"
+
+        # Resolve type colors
+        type_style = _TYPE_COLORS.get(msg_type, {})
+        cur_style.update(type_style)
 
-        return {"display": "block"} if command_visible else {"display": "none"}
+        return message, {"display": "block"}, cur_style
 
     """
     @callback(

crystal_toolkit/components/pourbaix.py

@@ -460,14 +460,7 @@ def _sub_layouts(self) -> dict[str, Component]:
                 html.Div(
                     [
                         MessageAIO(
-                            "Invalid composition input!",
-                            aio_id=self.id("invalid-comp-alarm"),
-                            msg_type="error",
-                        ),
-                        MessageAIO(
-                            "Invalid concentration input!",
-                            aio_id=self.id("invalid-conc-alarm"),
-                            msg_type="error",
+                            aio_id=self.id("outputConsole"),
                         ),
                         html.Div(
                             [
@@ -796,8 +789,7 @@ def get_pourbaix_diagram(pourbaix_entries, **kwargs):
 
         @app.callback(
             Output(self.id("graph-panel"), "children"),
-            Output(MessageAIO.ids.visible(self.id("invalid-comp-alarm")), "data"),
-            Output(MessageAIO.ids.visible(self.id("invalid-conc-alarm")), "data"),
+            Output(MessageAIO.ids.data(self.id("outputConsole")), "data"),
             Output(self.id("display-composition"), "children"),
             Input(self.id(), "data"),
             Input(self.id("display-composition"), "children"),
@@ -836,8 +828,7 @@ def make_figure(
                 logger.error("Invalid composition input!")
                 return (
                     self.get_figure_div(),
-                    True,
-                    False,
+                    {"message": "Invalid composition input!", "msg_type": "error"},
                     "",
                 )
             try:
@@ -853,8 +844,7 @@ def make_figure(
                 logger.error("Invalid composition input!")
                 return (
                     self.get_figure_div(),
-                    True,
-                    False,
+                    {"message": "Invalid composition input!", "msg_type": "error"},
                     "",
                 )
 
@@ -889,8 +879,10 @@ def make_figure(
                         # if the input is out of pre-defined range, Input will get None
                         return (
                             self.get_figure_div(),
-                            False,
-                            True,
+                            {
+                                "message": "Invalid concentration input!",
+                                "msg_type": "error",
+                            },
                             "",
                         )
 
@@ -919,7 +911,6 @@ def make_figure(
 
             return (
                 self.get_figure_div(figure=figure),
-                False,
-                False,
+                {},
                 html.Small(f"Pourbaix composition set to {unicodeify(formula)}."),
             )