Add running indication & improve app theme updates

Author: Shellishack

npm-packages/shared-utils/src/imc/inter-module-communication.ts

@@ -72,10 +72,7 @@ export class InterModuleCommunication {
       }
 
       const message = event.data;
-      if (
-        process.env.NODE_ENV === "development" &&
-        message.from !== undefined
-      ) {
+      if (message.from !== undefined) {
         console.log(
           `Module ${this.thisWindowId} received message from module ${
             message.from

web/components/app-loaders/sandbox-app-loader.tsx

@@ -141,7 +141,7 @@ export default function SandboxAppLoader({
     }
   }, [isConnected]);
 
-  // Send theme update to the extension
+  // Send theme update to the extension when theme changes
   useEffect(() => {
     if (currentViewId && imcContext?.polyIMC?.hasChannel(currentViewId)) {
       imcContext?.polyIMC?.sendMessage(
@@ -166,7 +166,7 @@ export default function SandboxAppLoader({
         getHandlerMap(viewModel),
       );
     }
-  }, [viewModel, isConnected]);
+  }, [viewModel]);
 
   function getHandlerMap(model: ViewModel) {
     const newMap = new Map<IMCMessageTypeEnum, ReceiverHandler>();
@@ -188,6 +188,16 @@ export default function SandboxAppLoader({
         if (onInitialLoaded) {
           onInitialLoaded();
         }
+
+        // Update with current theme
+        // TODO: pass theme directly to app along with config when creating a new view
+        if (currentViewId && imcContext?.polyIMC?.hasChannel(currentViewId)) {
+          imcContext?.polyIMC?.sendMessage(
+            currentViewId,
+            IMCMessageTypeEnum.EditorThemeUpdate,
+            resolvedTheme,
+          );
+        }
       },
     );
 

web/components/interface/editor-toolbar.tsx

@@ -111,14 +111,30 @@ export default function EditorToolbar() {
                       return;
                     }
 
+                    editorContext.setEditorStates((prev) => ({
+                      ...prev,
+                      runningNode: node,
+                    }));
                     runAction(
                       {
                         action: selectedAction,
                         viewId: node.id,
                         type: "app",
                       },
                       {},
-                    );
+                    ).then((result) => {
+                      addToast({
+                        title: "Workflow Completed",
+                        description: `The workflow has completed with result: ${JSON.stringify(
+                          result,
+                        )}`,
+                        color: "success",
+                      });
+                      editorContext?.setEditorStates((prev) => ({
+                        ...prev,
+                        runningNode: undefined,
+                      }));
+                    });
                   }}
                 >
                   <Icon name="play_arrow" variant="round" />

web/components/providers/imc-provider.tsx

@@ -96,7 +96,6 @@ export default function InterModuleCommunicationProvider({
   }
 
   function markActionRegistered(action: Action) {
-    console.log(`Action registered: ${action.name}`);
     actionRegisteredMapRef.current.set(action.name, true);
     if (actionRegisteredResolvePromisesRef.current[action.name]) {
       actionRegisteredResolvePromisesRef.current[action.name]();

web/components/views/canvas/canvas-view.tsx

@@ -203,6 +203,7 @@ export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
                     }),
                   );
                 },
+                isRunning: false,
               },
               type: "appNode",
               height: appConfig.recommendedHeight ?? 360,

web/components/views/canvas/nodes/app-node/layout.tsx

@@ -18,6 +18,7 @@ import {
   useInternalNode,
   useUpdateNodeInternals,
 } from "@xyflow/react";
+import clsx from "clsx";
 import { useContext, useEffect, useState } from "react";
 import NodeHandle from "./node-handle";
 
@@ -61,6 +62,15 @@ export default function CanvasNodeViewLayout({
     }));
   }, [node]);
 
+  useEffect(() => {
+    const runningNode = editorContext?.editorStates.runningNode;
+    if (runningNode?.id === node?.id) {
+      setIsRunning(true);
+    } else {
+      setIsRunning(false);
+    }
+  }, [editorContext?.editorStates.runningNode]);
+
   return (
     <div className="relative w-full h-full">
       {/* Control */}
@@ -171,16 +181,19 @@ export default function CanvasNodeViewLayout({
       />
 
       <div className="bg-content1 relative h-full w-full rounded-lg shadow-md z-10">
-        {node?.selected || node?.dragging ? (
-          <div className="absolute top-0 left-0 rounded-lg h-full w-full overflow-hidden selected wrapper gradient z-0" />
+        {isRunning ? (
+          <div className="absolute top-0 left-0 rounded-lg h-full w-full overflow-hidden running wrapper gradient z-0" />
         ) : (
-          isRunning && (
-            <div className="absolute top-0 left-0 rounded-lg h-full w-full overflow-hidden running wrapper gradient z-0" />
+          (node?.selected || node?.dragging) && (
+            <div className="absolute top-0 left-0 rounded-lg h-full w-full overflow-hidden selected wrapper gradient z-0" />
           )
         )}
 
         <div
-          className="relative h-full w-full rounded-md overflow-hidden z-10 data-[is-dragging=true]:pointer-events-none data-[is-resizing=true]:pointer-events-none aura"
+          className={clsx(
+            "relative h-full w-full rounded-md overflow-hidden z-10 data-[is-dragging=true]:pointer-events-none data-[is-resizing=true]:pointer-events-none",
+            (node?.selected || node?.dragging) && !isRunning && "aura",
+          )}
           data-is-dragging={node?.dragging ? "true" : "false"}
           data-is-resizing={node?.resizing ? "true" : "false"}
         >

web/components/views/canvas/theme.css

@@ -1,7 +1,7 @@
 .react-flow__node-appNode.selected .aura {
   box-shadow:
-    4px 0 15px rgba(42, 138, 246, 0.3),
-    -4px 0 15px rgba(233, 42, 103, 0.3);
+    4px 0 18px rgba(42, 138, 246, 0.5),
+    -4px 0 18px rgba(233, 42, 103, 0.5);
 }
 
 .react-flow__node-appNode .aura {
@@ -22,14 +22,14 @@
 .gradient:before {
   content: "";
   position: absolute;
-  inset: -50%; /* makes it bigger than the box */
-  border-radius: 50%; /* keep it circular */
+  inset: -50%;
+  border-radius: 50%;
   background: conic-gradient(
     from -160deg at 50% 50%,
-    #e92a67 0deg,
-    #a853ba 120deg,
-    #2a8af6 240deg,
-    #e92a67 360deg
+    #ff2a6d 0deg,      
+    #b86bff 120deg,    
+    #3a9bff 240deg, 
+    #ff2a6d 360deg
   );
   z-index: -1;
 }
@@ -38,11 +38,11 @@
   content: "";
   background: conic-gradient(
     from -160deg at 50% 50%,
-    #e92a6700 0deg,
-    #ff0035cc 20deg,
-    #a853ba 126deg,
-    #2a8af6cc 232deg,
-    #2a8af600 340deg
+    #ff2a6d00 0deg,
+    #ff0044dd 20deg,
+    #b86bff 126deg,
+    #3a9bffdd 232deg,
+    #3a9bff00 340deg
   );
   animation: spinner 4s linear infinite;
   transform: rotate(0deg);
@@ -59,8 +59,3 @@
   outline: none;
 }
 
-.react-flow__edge .react-flow__edge-path {
-  stroke: url(#edge-gradient);
-  stroke-width: 2;
-  stroke-opacity: 0.75;
-}

web/lib/types.ts

@@ -87,7 +87,9 @@ export type EditorStates = {
   isSideMenuOpen?: boolean;
   isMarketplaceOpen?: boolean;
 
+  // Canvas app nodes
   selectedNode?: Node;
+  runningNode?: Node;
 };
 
 /**