Final version updates

Author: baebranch

server/__init__.py

@@ -1,10 +1,13 @@
 import os
+import logging
+import traceback
 
 from server.db.models import session
 
 
 # Constants
 VERSION = "0.0.1"
+logger = logging.getLogger("control")
 
 # Middleware
 def response_handler(func):
@@ -18,7 +21,8 @@ def wrapper(*args, **kwargs):
       return data
     except Exception as error:
       # Print error in red
-      print("\033[91m" + str(error) + "\033[0m")
+      logger.error("\033[91m" + str(error) + "\033[0m")
+      logger.error(traceback.format_exc())
 
       # Rollback database session
       try:

server/db/models.py

@@ -56,6 +56,8 @@ class Flow(Base):
   nodes = relationship('Node', back_populates='flow', cascade='all, delete, delete-orphan')
   edges = relationship('Edge', back_populates='flow', cascade='all, delete, delete-orphan')
 
+  sql.ForeignKeyConstraint(['workspace_id'], ['workspaces.id'])
+
   @validates('name')
   def validate_name(self, key, name):
     assert len(name) > 0
@@ -125,6 +127,8 @@ class Node(Base):
   node_type_id = sql.Column(sql.Integer, sql.ForeignKey('node_types.id'))
   node_type = relationship('NodeType', back_populates='nodes')
 
+  sql.ForeignKeyConstraint(['workspace_id', 'flow_id', 'node_type_id',], ['workspaces.id', 'flows.id', 'node_types.id'])
+
   @validates('name')
   def validate_name(self, key, name):
     assert len(name) > 0
@@ -156,6 +160,8 @@ class Edge(Base):
   edge_type_id = sql.Column(sql.Integer, sql.ForeignKey('edge_types.id'))
   edge_type = relationship('EdgeType', back_populates='edges')
 
+  sql.ForeignKeyConstraint(['workspace_id', 'flow_id', 'edge_type_id',], ['workspaces.id', 'flows.id', 'edge_types.id'])
+
   @validates('name')
   def validate_name(self, key, name):
     assert len(name) > 0

server/resolvers.py

@@ -152,7 +152,7 @@ def updateNode(_, info, **kwargs):
 
   if node_data:= kwargs.pop('node', None):
     node_data = loads(unquote(node_data))
-    none_data.pop('selected', None)
+    node_data.pop('selected', None)
     kwargs['node'] = dumps({**loads(node.node), **node_data})
 
   for key, value in kwargs.items():

src/custom/input.tsx

@@ -14,10 +14,10 @@ function Input({ data, selected }: { data: any, selected: any }) {
       />
       <div className="source-node">
           {data.label}
-        <Handle type="source" position={Position.Bottom} id="a" />
         <Handle type="target" position={Position.Bottom} id="b" />
-        <Handle type="source" position={Position.Top} id="c" />
         <Handle type="target" position={Position.Top} id="d" />
+        <Handle type="source" position={Position.Bottom} id="a" />
+        <Handle type="source" position={Position.Top} id="c" />
       </div>
     </>
   );

src/custom/output.tsx

@@ -15,8 +15,8 @@ function Output({ data, selected }: { data: any, selected: any }) {
       <div className="source-node">
           {data.label}
         <Handle type="target" position={Position.Top} id="a" />
-        <Handle type="source" position={Position.Top} id="b" />
         <Handle type="target" position={Position.Bottom} id="c" />
+        <Handle type="source" position={Position.Top} id="b" />
         <Handle type="source" position={Position.Bottom} id="d" />
       </div>
     </>

src/designer/designer.css

@@ -147,3 +147,7 @@ hr {
 #root > div > div > div.react-flow__panel.top.right > div > div > div > div > div > button {
   font-size: 12px;
 }
+#root > div > div > div.react-flow__renderer > div > div > svg:first-child {
+  z-index: 1002 !important;
+  position: relative;
+}

src/designer/designer.tsx

@@ -36,7 +36,9 @@ import CardNode from "../custom/card";
 import Source from "../custom/source";
 import Output from "../custom/output";
 import Default from "../custom/default";
+import SubNodeModal from "./sub_node_modal";
 import SubFlowNode from "../custom/subflow";
+import GroupCardNode from "../custom/group_card";
 import { ViewportChangeLogger } from "../home/viewport_func";
 
 import type { EdgeTypes } from "reactflow";
@@ -48,7 +50,7 @@ let initialEdges: any[] = [];
 
 const nodeTypes: {} = {
   // Custom node types here!
-  source: Source, card: CardNode, output: Output, input: Input, default: Default, subflow: SubFlowNode
+  source: Source, card: CardNode, output: Output, input: Input, default: Default, subflow: SubFlowNode, group_card: GroupCardNode
 };
 const edgeTypes: {} = {
   // default: DefaultEdge
@@ -77,6 +79,7 @@ export default function Designer({ activeWorkspace, setActiveWorkspace, flow }:
   const [showEditModal, setShowEditModal] = useState(false);
   const [selectedNode, setSelectedNode] = useState<any>(null);
   const [selectedEdge, setSelectedEdge] = useState<any>(null);
+  const [showSubNodeModal, setShowSubNodeModal] = useState(false);
 
   function pushNodeChanges(change: any, node_data: any) {
     let mutation = gql`mutation {
@@ -324,6 +327,7 @@ export default function Designer({ activeWorkspace, setActiveWorkspace, flow }:
   const onEdgesChange = useCallback(
     (changes: any) => {
       for (let change of changes) {
+        console.log(change);
         if (change.type === 'select' && change.selected === true) {
           setSelectedEdge(change.id);
         }
@@ -345,11 +349,14 @@ export default function Designer({ activeWorkspace, setActiveWorkspace, flow }:
 
   const onConnect = useCallback(
     (changes: any) => {
+      console.log(changes);
       setEdges((eds: any) => {
         changes.id = uuidv4();
-        return addEdge(changes, eds);
+        let res = addEdge(changes, eds);
+        if (res.length > eds.length)
+          pushEdgeConnection(changes);
+        return res;
       })
-      pushEdgeConnection(changes);
     },
     [flow],
   );
@@ -421,18 +428,27 @@ export default function Designer({ activeWorkspace, setActiveWorkspace, flow }:
 
           <EditNode show={showEditModal} setShow={setShowEditModal} setNodes={setNodes} activeFlow={flow.activeFlow} node={foundNode} />
           <NewModal show={showNewModal} setShow={setShowNewModal} setNodes={setNodes} activeFlow={flow.activeFlow} />
+          <SubNodeModal show={showSubNodeModal} setShow={setShowSubNodeModal} setNodes={setNodes} activeFlow={flow.activeFlow} node={foundNode} />
 
           <NodeToolbar nodeId={selectedNode} position={Position.Top} offset={10} align="start">
             <ButtonGroup className="modify" aria-label="modify">
               <Button className="btn" variant="Light" size="sm" onClick={() => {
                   setFoundNode(findNodeById(selectedNode, nodes));                  
                   setShowEditModal(true);
-                }}>Edit</Button>
-              <Button variant="Light" size="sm" onClick={() => {
-                  deleteElements({ nodes: [{ id: selectedNode }] });
                 }}>
+                  Edit
+              </Button>
+              <Button variant="Light" size="sm" onClick={() => {
+                deleteElements({ nodes: [{ id: selectedNode }] });
+              }}>
                 Delete
               </Button>
+              <Button variant="Light" size="sm" onClick={() => {
+                  setFoundNode(findNodeById(selectedNode, nodes));                  
+                  setShowSubNodeModal(true);
+                }}>
+                Sub Node
+              </Button>
             </ButtonGroup>
           </NodeToolbar>
 
@@ -443,7 +459,7 @@ export default function Designer({ activeWorkspace, setActiveWorkspace, flow }:
                 <Accordion.Body>
                   { selectedEdge ? <div><p>Edge: {selectedEdge} </p><Button variant="light" size="sm" onClick={() => {
                   deleteElements({ edges: [{ id: selectedEdge }] });
-                }}>Delete Edge</Button></div> :selectedNode ? <div><p>Node: {selectedNode} </p><p>Type: {findNodeById(selectedNode, nodes).type} </p><Button variant="light" size="sm" onClick={() => {
+                }}>Delete Edge</Button></div> :selectedNode ? <div><p>Node: {selectedNode} </p><p>Type: {findNodeById(selectedNode, nodes)?.type} </p><Button variant="light" size="sm" onClick={() => {
                   deleteElements({ nodes: [{ id: selectedNode }] });
                 }} >Delete Node</Button></div> : <p>-</p> }
                 </Accordion.Body>

src/designer/sub_node_modal.css

@@ -0,0 +1,172 @@
+import { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import Form from 'react-bootstrap/Form';
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
+
+import { Client, gql } from '../api';
+
+
+function generateRandomString(length: number) {
+  const array = new Uint8Array(length);
+  window.crypto.getRandomValues(array);
+  return Array.from(array, byte => ('0' + byte.toString(16)).slice(-2)).join('');
+}
+
+// Get the current node and edge types to render new node forms
+let nodeTypes: any = 0;
+function getNodeTypes() {
+  let query = gql`{
+    getNodeTypes {
+      success
+      message
+      errors
+      nodeTypes {
+        id
+        name
+        description
+        fields
+        created_at
+        updated_at
+      }
+    }
+  }`;
+  Client(query).then((data: any) => {
+    nodeTypes = data.getNodeTypes.nodeTypes;
+  })
+}
+getNodeTypes();
+
+function createNode(node: any, activeFlow: any, node_type_id: any) {
+  let mutation = gql`mutation {
+    createNode(node: "${encodeURIComponent(JSON.stringify(node))}", nid: "${node.id}", flow_id: ${ parseInt(activeFlow.id)}, workspace_id: ${parseInt(activeFlow.workspace_id)}, node_type_id: ${node_type_id + 1}) {
+      success
+      message
+      errors
+      node {
+        nid
+        node
+        flow_id
+        workspace_id
+        node_type_id
+        created_at
+        updated_at
+      }
+    }
+  }`;
+  
+  Client(mutation)
+}
+
+
+export function RenderNodeTypeForm(field: any, value: any) {
+  return (
+    <Form.Group
+      className="mb-3"
+      controlId="NewModal.{field}"
+      key={field}
+      >
+      <Form.Label>{field}</Form.Label>
+      {value === 'textarea' ? (
+        <Form.Control name={field} as={value} rows={3} />
+      ) : value === 'text' ? (
+        <Form.Control name={field} type={value} />
+      ) : value === 'number' ? (
+        <Form.Control name={field} type={value} />
+      ) : (
+        <Form.Control name={field} type='text' />
+      )}
+    </Form.Group>
+  )
+};
+
+
+function NewSubNode({ show, setShow, setNodes, activeFlow, node }: { show: boolean, setShow: any, setNodes: any, activeFlow: any, node: any }) {
+  let fieldIdx = 0;
+  const handleClose = () => setShow(false);
+  const [selectValue, setSelectValue] = useState(0);
+  const nodes: any = ['input', 'output', 'source', 'card', 'default', 'subflow'];
+  const [nodeType, setNodeType] = useState<any>({ 'id': 1, 'fields': { 'label': 'textarea' } });
+  
+  function handleSubmit(e: any) {
+    e.preventDefault();
+    
+    // Loop over the form fields and add them to the node data field
+    const formData: { [key: string]: string } = {};
+    for (let i = 2; i < e.target.length-2; i++) {
+      const fieldName = e.target[i].name;
+      const fieldValue = e.target[i].value;
+      formData[fieldName] = fieldValue;
+    }
+
+    // If the node type is a subflow, add the flow slug to the node data
+    if (selectValue === 5) {
+      formData['slug'] = generateRandomString(3);
+    }
+
+    const newNode = {
+      id: uuidv4(),
+      position: {
+        x: node.width/2,
+        y: node.height/2
+      },
+      data: formData,
+      origin: [0.5, 0.5],
+      type: nodes[e.target[2].value],
+      extent: "parent",
+      parentId: node.id
+    };
+
+    // Update the node list
+    setNodes((nodes: any) => nodes.concat(newNode))
+
+    console.log('node type', nodes);
+    // Send node data to the server
+    createNode(newNode, activeFlow, parseInt(e.target[2].value));
+    
+    // Close the modal
+    handleClose();
+  };
+
+  return (
+    <>
+      <Modal show={show} onHide={handleClose}>
+        <Form name='NewModal' onSubmit={e => {handleSubmit(e)}}>
+          <Modal.Header closeButton>
+            <Modal.Title>Create Node</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <Form.Group className="mb-3" controlId="NewModal.NodeType">
+              <Form.Label>Parent Node Id</Form.Label>
+              <Form.Control name="parentId" type="text" value={node?.id} disabled/>
+              <Form.Label>Select Node Type:</Form.Label>
+              <Form.Select aria-label="Default select example" title="SelectNodeType" onChange={(e) => { 
+                  setNodeType(nodeTypes[e.target.value]);
+                  setSelectValue(parseInt(e.target.value));
+                }} value={selectValue}>
+                {nodeTypes && nodeTypes.map((nType: any) => {
+                  fieldIdx++;
+                  return (<option key={fieldIdx} value={nType.id-1}>{nType.name}</option>);
+                })
+                }
+              </Form.Select>
+            </Form.Group>
+            {nodeTypes && Object.keys(nodeType.fields).map((key) => {
+              return (RenderNodeTypeForm(key, nodeType.fields[key]));
+            })}
+          </Modal.Body>
+          <Modal.Footer>
+            <Button variant="secondary" onClick={handleClose}>
+              Close
+            </Button>
+            <Button variant="primary" type='submit'>
+              Create
+            </Button>
+          </Modal.Footer>
+        </Form>
+      </Modal>
+    </>
+  );
+}
+
+export default NewSubNode;