added a custom file object node and added graceful handling of comple…

…ted procedures
Krande · Sep 30, 2024 · 9d82116 · 9d82116
1 parent 40236f8
commit 9d82116
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 12 deletions.
diff --git a/src/ada/comms/msg_handling/run_procedure.py b/src/ada/comms/msg_handling/run_procedure.py
@@ -18,4 +18,6 @@ def run_procedure(server: WebSocketAsyncServer, client: ConnectedClient, message
     params = procedure.params
     for param in start_procedure.parameters:
         params[param.name] = param.value
+
     procedure(**procedure.params)
+    logger.info(f"Procedure {procedure.name} ran successfully")
diff --git a/src/frontend/src/components/node_editor/NodeEditorComponent.tsx b/src/frontend/src/components/node_editor/NodeEditorComponent.tsx
@@ -4,7 +4,6 @@ import {Background, Controls, MiniMap, ReactFlow} from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import {request_list_of_nodes} from "../../utils/node_editor/request_list_of_nodes";
 import {useNodeEditorStore} from '../../state/useNodeEditorStore'; // Import the Zustand store
-import {run_sequence} from "../../utils/node_editor/run_sequence"; // Import the InfoPanel component
 
 
 const info_svg = <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
@@ -14,9 +13,11 @@ const info_svg = <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0
 </svg>
 
 import ProcedureNode from './customProcedureNode';
+import CustomFileObjectNode from './customFileObjectNode';
 
 const nodeTypes = {
     procedure: ProcedureNode,
+    file_object: CustomFileObjectNode,
 };
 
 const NodeEditorComponent: React.FC = () => {
@@ -48,17 +49,11 @@ const NodeEditorComponent: React.FC = () => {
                 <div className={"flex flex-row"}>
                     <div className={"flex"}>Node Editor</div>
                     <button
-                        className={"flex relative bg-blue-700 hover:bg-blue-700/50 text-white font-bold px-4 ml-2 rounded"}
+                        className={"flex relative bg-blue-700 hover:bg-blue-700/50 text-white px-4 ml-2 rounded"}
                         onClick={() => request_list_of_nodes()}
                     >
                         Update
                     </button>
-                    <button
-                        className={"flex relative bg-blue-700 hover:bg-blue-700/50 text-white font-bold px-4 ml-2 rounded"}
-                        onClick={() => run_sequence()}
-                    >
-                        Run
-                    </button>
                     <button
                         className={"flex relative bg-blue-700 hover:bg-blue-700/50 text-white font-bold px-4 ml-2 rounded"}
                         onClick={() => console.log("Info Panel")}

diff --git a/src/frontend/src/components/node_editor/customFileObjectNode.tsx b/src/frontend/src/components/node_editor/customFileObjectNode.tsx
@@ -0,0 +1,38 @@
+import React, {memo} from 'react';
+import {Handle, NodeProps, Position, Connection} from '@xyflow/react';
+import {run_sequence} from "../../utils/node_editor/run_sequence";
+
+function CustomFileObjectNode(props: { id: string, data: Record<string, string> }) {
+    // Custom connection validation function for `file_object` handle
+    const isValidConnection = () => {
+        console.log("isValidConnection");
+        return true;
+    };
+    // console.log("ProcedureNode data:", data);
+    return (
+        <div className="bg-gray-200 text-gray-800 rounded-md min-w-24">
+            {/* Header Row */}
+            <div className="flex justify-center items-center mb-4">
+                <div className="font-bold text-center text-xs">"{props.data.label}"</div>
+            </div>
+
+            {/* Handle Rows */}
+            <div className="flex flex-col">
+                {/* File Object Source Handle Row */}
+                <div className={"flex flex-row items-center"}>
+                    <span className={"m-auto relative"}>
+                    <Handle
+                        type="source"
+                        id="file_object_out"
+                        position={Position.Bottom}
+                        style={{position: "absolute", background: '#555'}}
+                        isConnectable={true}
+                    />
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default memo(CustomFileObjectNode);
diff --git a/src/frontend/src/components/node_editor/customProcedureNode.tsx b/src/frontend/src/components/node_editor/customProcedureNode.tsx
@@ -12,10 +12,10 @@ function ProcedureNode(props:{id: string, data:Record<string, string>}) {
     return (
         <div className="bg-gray-200 text-gray-800 rounded-md w-56 h-30">
             {/* Header Row */}
-            <div className="flex justify-center items-center mb-4">
-                <div className="font-bold text-center">Node {props.data.label}</div>
+            <div className="flex flex-col justify-center items-center mb-4">
+                <div className="font-bold text-center text-xs">{props.data.label}</div>
                 <button
-                    className={"flex relative bg-blue-700 hover:bg-blue-700/50 text-white font-bold px-4 ml-2 rounded"}
+                    className={"flex relative bg-blue-700 hover:bg-blue-700/50 text-white text-xs px-4 rounded"}
                     onClick={() => run_sequence(props.id)}
                 >Run
                 </button>

diff --git a/src/frontend/src/utils/node_editor/update_nodes.ts b/src/frontend/src/utils/node_editor/update_nodes.ts
@@ -25,7 +25,7 @@ export const update_nodes = (message: Message) => {
                     // Create a new node for each file object
                     const node = {
                         id: `file-object-${i}`, // Unique node ID
-                        type: 'input',
+                        type: 'file_object',
                         position: {x: 250, y: i * 100 - 100}, // Stagger positions vertically
                         data: {
                             label: fileObject.name(),