Adding save notifications to editor

frontend/chains/ChainGraphEditor.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useCallback, useContext } from "react";
 import { v4 as uuid4 } from "uuid";
-import { Box, IconButton } from "@chakra-ui/react";
+import { Box, IconButton, useToast } from "@chakra-ui/react";
 import ReactFlow, {
   addEdge,
   updateEdge,
@@ -36,6 +36,7 @@ import { faRightLeft } from "@fortawesome/free-solid-svg-icons";
 import { useRightSidebarContext } from "site/sidebar/context";
 import { DirectRootNode } from "chains/flow/DirectRootNode";
 import { TabState } from "chains/hooks/useTabState";
+import { NOTIFY_SAVED } from "chains/editor/constants";
 
 // Nodes are either a single node or a group of nodes
 // ConfigNode renders class_path specific content
@@ -81,6 +82,8 @@ const ChainGraphEditor = ({ graph }) => {
   const [reactFlowInstance, setReactFlowInstance] = useState(null);
   const { colorMode } = useColorMode();
 
+  const toast = useToast();
+
   // if active chain changes, then reload nodes and edges
   React.useEffect(() => {
     if (reactFlowGraph?.chain !== undefined) {
@@ -111,6 +114,7 @@ const ChainGraphEditor = ({ graph }) => {
               chain_id: response.data.chain_id,
               chain: response.data,
             }));
+            toast({ ...NOTIFY_SAVED, description: "Saved Chain" });
           },
         });
       }
@@ -220,6 +224,7 @@ const ChainGraphEditor = ({ graph }) => {
       if (edge) {
         setEdges((els) => addEdge(flowEdge, els));
       }
+      toast({ ...NOTIFY_SAVED, description: "Saved Node" });
     },
     [reactFlowInstance, chain?.id, selectedNode, colorMode, selectedConnector]
   );
@@ -290,6 +295,7 @@ const ChainGraphEditor = ({ graph }) => {
         };
         api.addEdge(data);
       }
+      toast({ ...NOTIFY_SAVED, description: "Saved Edge" });
     },
     [chain, reactFlowInstance, colorMode]
   );
@@ -324,6 +330,7 @@ const ChainGraphEditor = ({ graph }) => {
           oldEdge.source === newConnection.source &&
           oldEdge.target === newConnection.target;
         if (!isSame) {
+          toast({ ...NOTIFY_SAVED, description: "Saved Edge" });
           api.updateEdge(oldEdge.data.id, {
             source_id: newConnection.source,
             target_id: newConnection.target,

frontend/chains/editor/constants.js

@@ -3,3 +3,12 @@ import { OpenAIConfigForm } from "chains/editor/OpenAIConfigForm";
 export const LLM_FORM_MAP = {
   "langchain.chat_models.openai.ChatOpenAI": OpenAIConfigForm,
 };
+
+export const NOTIFY_SAVED = {
+  title: "Saved",
+  description: "Saved",
+  status: "success",
+  duration: 2000,
+  isClosable: true,
+  position: "bottom-right",
+};

frontend/chains/hooks/useChainUpdate.js

@@ -1,9 +1,19 @@
-import { useDebounce } from "utils/hooks/useDebounce";
+import { useToast } from "@chakra-ui/react";
 import { useCallback } from "react";
+import { useDebounce } from "utils/hooks/useDebounce";
+import { NOTIFY_SAVED } from "chains/editor/constants";
 
 export const useChainUpdate = (chain, setChain, api) => {
+  const toast = useToast();
   const { callback: debouncedChainUpdate } = useDebounce((...args) => {
-    api.updateChain(...args);
+    api.updateChain(...args).then((response) => {
+      const name = response.data.name || "chain";
+      toast({
+        ...NOTIFY_SAVED,
+        title: "Chain saved",
+        description: `saved ${name}`,
+      });
+    });
   }, 500);
 
   const { callback: debouncedChainCreate } = useDebounce((...args) => {
@@ -19,6 +29,12 @@ export const useChainUpdate = (chain, setChain, api) => {
           {
             onSuccess: (response) => {
               setChain(response.data);
+              const name = response.data.name || "new chain";
+              toast({
+                ...NOTIFY_SAVED,
+                title: "Chain created",
+                description: `created ${name}`,
+              });
             },
           }
         );

frontend/chains/hooks/useNodeEditorAPI.js

@@ -1,17 +1,34 @@
-import { useContext, useMemo } from "react";
+import React from "react";
+import { useToast } from "@chakra-ui/react";
 import { SelectedNodeContext } from "chains/editor/contexts";
 import { ChainEditorAPIContext } from "chains/editor/ChainEditorAPIContext";
 import { useDebounce } from "utils/hooks/useDebounce";
+import { NOTIFY_SAVED } from "chains/editor/constants";
 
 /**
  * Hook for a node editor's API. Returns debounced updateNode functions
  * for the full object and for individual fields.
  */
 export const useNodeEditorAPI = (node, setNode) => {
-  const { selectedNode } = useContext(SelectedNodeContext);
-  const api = useContext(ChainEditorAPIContext);
-  const { callback: debouncedUpdateNode } = useDebounce(api.updateNode, 500);
-  const handleConfigChange = useMemo(() => {
+  const { selectedNode } = React.useContext(SelectedNodeContext);
+  const api = React.useContext(ChainEditorAPIContext);
+  const updateNode = React.useCallback(
+    (...args) => {
+      api.updateNode(...args).then((response) => {
+        const node = response.data;
+        const name = node.name || node.class_path.split(".").pop();
+        toast({
+          ...NOTIFY_SAVED,
+          description: `Saved ${name}`,
+        });
+      });
+    },
+    [api.updateNode]
+  );
+
+  const { callback: debouncedUpdateNode } = useDebounce(updateNode, 500);
+  const toast = useToast();
+  const handleConfigChange = React.useMemo(() => {
     function all(newNode, delay = 0) {
       const data = {
         name: newNode.name,