Add ToastView to Python Panels

app/packages/components/src/components/Toast/Toast.tsx

@@ -2,20 +2,57 @@ import React from "react";
 import { atom, useRecoilState } from "recoil";
 import { Box, Snackbar, SnackbarContent } from "@mui/material";
 
-// Define types for the props
 interface ToastProps {
   message: React.ReactNode;
-  primary: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.ReactNode;
-  secondary: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.ReactNode;
-  duration?: number;         // Optional duration, with a default value
+  primary?: any;
+  secondary?: any;
+  duration?: number;
+  layout?: {
+    vertical?: "top" | "bottom";
+    horizontal?: "left" | "center" | "right";
+    height?: number | string;
+    top?: number | string;
+    bottom?: number | string;
+    backgroundColor?: string;
+    color?: string;
+    fontSize?: string;
+    textAlign?: string;
+  };
 }
 
 const toastStateAtom = atom({
   key: "toastOpenState",
   default: true,
 });
 
-const Toast: React.FC<ToastProps> = ({message, primary, secondary, duration = 5000 }) => {
+const Toast: React.FC<ToastProps> = ({
+  message,
+  primary,
+  secondary,
+  duration = 5000,
+  layout = {},
+}) => {
+  const snackbarStyle = {
+    height: layout?.height || 5,
+    ...(layout?.top && {
+      top: {
+        xs: layout.top,
+        sm: layout.top,
+        md: layout.top,
+        lg: layout.top,
+        xl: layout.top,
+      },
+    }),
+    ...(layout?.bottom && {
+      bottom: {
+        xs: layout.bottom,
+        sm: layout.bottom,
+        md: layout.bottom,
+        lg: layout.bottom,
+        xl: layout.bottom,
+      },
+    }),
+  };
 
   const [open, setOpen] = useRecoilState(toastStateAtom); // State management for toast visibility
 
@@ -29,27 +66,38 @@ const Toast: React.FC<ToastProps> = ({message, primary, secondary, duration = 50
   const action = (
     <div>
       <Box display="flex" justifyContent="flex-end">
-        {primary(setOpen)} {/* Pass setOpen to primary button */}
-        {secondary(setOpen)} {/* Pass setOpen to secondary button */}
+        {/* note: Not implemented within Python Panels context */}
+        {primary && primary(setOpen)} {/* Pass setOpen to primary button */}
+        {secondary && secondary(setOpen)}{" "}
+        {/* Pass setOpen to secondary button */}
       </Box>
     </div>
   );
 
   return (
     <Snackbar
-      anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+      anchorOrigin={{
+        vertical: layout?.vertical || "bottom",
+        horizontal: layout?.horizontal || "center",
+      }}
       open={open}
       onClose={handleClose}
       autoHideDuration={duration}
-      sx={{ height: 5 }}
+      sx={snackbarStyle}
     >
       <SnackbarContent
         message={message}
         action={action}
-        style={{ backgroundColor: "#333", color: "#fff" }}
+        sx={{
+          backgroundColor: layout?.backgroundColor || "#333",
+          color: layout?.color || "#fff",
+          fontSize: layout?.fontSize || "14px",
+          display: "block",
+          textAlign: layout?.textAlign || "left",
+        }}
       />
     </Snackbar>
   );
-}
+};
 
 export default Toast;

app/packages/core/src/plugins/SchemaIO/components/ToastView.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Toast } from "@fiftyone/components";
+
+export default function ToastView(props) {
+  const { schema } = props;
+  const { view = {} } = schema;
+  const { message, duration, layout } = view;
+
+  return <Toast message={message} duration={duration} layout={layout} />;
+}

app/packages/core/src/plugins/SchemaIO/components/index.ts

@@ -50,5 +50,6 @@ export { default as TabsView } from "./TabsView";
 export { default as TagsView } from "./TagsView";
 export { default as TextView } from "./TextView";
 export { default as TextFieldView } from "./TextFieldView";
+export { default as ToastView } from "./ToastView";
 export { default as TupleView } from "./TupleView";
 export { default as UnsupportedView } from "./UnsupportedView";

app/packages/operators/src/types.ts

@@ -1196,6 +1196,20 @@ export class ModalView extends Button {
   }
 }
 
+/**
+ * Operator class for describing a ToastView {@link View} for an
+ * operator type.
+ */
+export class ToastView extends View {
+  constructor(options: ViewProps) {
+    super(options);
+    this.name = "ToastView";
+  }
+  static fromJSON(json) {
+    return new ToastView(json);
+  }
+}
+
 /**
  * Places where you can have your operator placement rendered.
  */
@@ -1267,6 +1281,7 @@ const VIEWS = {
   LazyFieldView,
   PillBadgeView,
   ModalView,
+  ToastView,
 };
 
 export function typeFromJSON({ name, ...rest }): ANY_TYPE {

fiftyone/operators/types.py

@@ -1813,6 +1813,33 @@ def to_json(self):
         return {**super().to_json(), "severity": self.severity}
 
 
+class ToastView(View):
+    """Displays a snackbar style toast element.
+
+    Examples::
+
+    schema = {
+            "message": "Test",
+            "duration": 30000,
+            "layout": {
+                "vertical": "top",
+                "horizontal": "center",
+                "top": "200px"
+            },
+        }
+        snackbar = types.ToastView(**schema)
+        panel.obj("toast", view=snackbar)
+
+    Args:
+        message: the message to display
+        duration (None): the duration to stay on screen in milliseconds
+        layout (None): the layout of the toast
+    """
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+
+
 class CheckboxView(View):
     """Displays a checkbox.