Persisting node and edge updates, deleting nodes

Author: baebranch

server/db/models.py

@@ -1,7 +1,7 @@
 import sqlalchemy as sql
 from sqlalchemy.sql import text
 from datetime import datetime, timezone
-from sqlalchemy import create_engine, MetaData, select, String, JSON, DateTime, ForeignKey, Integer, Text, inspect
+from sqlalchemy import create_engine, MetaData, select, String, JSON, DateTime, ForeignKey, Integer, Text, inspect, update
 from sqlalchemy.orm import Session, DeclarativeBase, mapped_column, validates, relationship, Mapped, sessionmaker, reconstructor
 
 from server.db import *
@@ -15,7 +15,7 @@ class Workspace(Base):
   description = sql.Column(sql.Text, nullable=True)
   icon = sql.Column(sql.String, nullable=True)
   created_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc))
-  updated_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc), onupdate=datetime.now(timezone.utc))
+  updated_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc), onupdate=lambda: datetime.now(timezone.utc))
 
   flows = relationship('Flow', back_populates='workspace', cascade='all, delete, delete-orphan')
   nodes = relationship('Node', back_populates='workspace', cascade='all, delete, delete-orphan')
@@ -37,7 +37,7 @@ class Flow(Base):
   description = sql.Column(sql.Text, nullable=True)
   default = sql.Column(sql.Boolean, default=False)
   created_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc))
-  updated_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc), onupdate=datetime.now(timezone.utc))
+  updated_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc), onupdate=lambda: datetime.now(timezone.utc))
 
   workspace_id = sql.Column(sql.Integer, sql.ForeignKey('workspaces.id'))
   workspace = relationship('Workspace', back_populates='flows')
@@ -83,7 +83,7 @@ class EdgeType(Base):
   description = sql.Column(sql.Text, nullable=True)
   fields = sql.Column(sql.JSON, nullable=True)
   created_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc))
-  updated_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc), onupdate=datetime.now(timezone.utc))
+  updated_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc), onupdate=lambda: datetime.now(timezone.utc))
 
   edges = relationship('Edge', back_populates='edge_type')
 
@@ -102,11 +102,12 @@ class Node(Base):
   nid = sql.Column(sql.VARCHAR, nullable=False)
   node = sql.Column(sql.JSON, nullable=False)
   created_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc))
-  updated_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc), onupdate=datetime.now(timezone.utc))
+  updated_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc), onupdate=lambda: datetime.now(timezone.utc))
 
   flow_id = sql.Column(sql.Integer, sql.ForeignKey('flows.id'))
   flow = relationship('Flow', back_populates='nodes')
 
+
   workspace_id = sql.Column(sql.Integer, sql.ForeignKey('workspaces.id'))
   workspace = relationship('Workspace', back_populates='nodes')
 
@@ -133,7 +134,7 @@ class Edge(Base):
   eid = sql.Column(sql.VARCHAR, nullable=False)
   edge = sql.Column(sql.JSON, nullable=False)
   created_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc))
-  updated_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc), onupdate=datetime.now(timezone.utc))
+  updated_at = sql.Column(sql.DateTime, default=datetime.now(timezone.utc), onupdate=lambda: datetime.now(timezone.utc))
 
   flow_id = sql.Column(sql.Integer, sql.ForeignKey('flows.id'))
   flow = relationship('Flow', back_populates='edges')

server/gql/functions.gql

@@ -63,10 +63,10 @@ type Mutation {
   # Node
   createNode(node: JSON!, nid: String!, flow_id: ID!, workspace_id: ID!, node_type_id: ID!): NodeResult!
   updateNode(id: ID, nid: String!, node: JSON, flow_id: ID, workspace_id: ID, node_type_id: ID): NodeResult!
-  deleteNode(nid: ID!): NodeResult!
+  deleteNode(nid: String!): NodeResult!
 
   # Edge
   createEdge(edge: JSON!, flow_id: ID!, workspace_id: ID!, edge_type_id: ID!): EdgeResult!
-  updateEdge(id: ID!, edge: JSON, flow_id: ID, workspace_id: ID, edge_type_id: ID): EdgeResult!
-  deleteEdge(id: ID!): EdgeResult!
+  updateEdge(id: ID, eid: String!, edge: JSON, flow_id: ID, workspace_id: ID, edge_type_id: ID): EdgeResult!
+  deleteEdge(eid: ID!): EdgeResult!
 }

server/resolvers.py

@@ -17,6 +17,11 @@ def getStatus(_, info, **kwargs):
   }
 
 
+# Updated functions
+def updateFlowandWorksapceTS(item):
+  item.flow.updated_at = datetime.now(timezone.utc)
+  item.workspace.updated_at = datetime.now(timezone.utc)
+
 # Workspace resolvers
 @response_handler
 def getWorkspace(_, info, **kwargs):
@@ -118,6 +123,8 @@ def createNode(_, info, **kwargs):
   node.node = unquote(kwargs.get('node', '{}'))
   session.add(node)
   session.commit()
+  updateFlowandWorksapceTS(node)
+  session.commit()
   return {'node': node}
 
 @response_handler
@@ -130,7 +137,9 @@ def updateNode(_, info, **kwargs):
 
   for key, value in kwargs.items():
     setattr(node, key, value)
-
+  
+  updateFlowandWorksapceTS(node)
+  
   session.commit()
   return {'node': node}
 
@@ -156,20 +165,31 @@ def getEdges(_, info, **kwargs):
 @response_handler
 def createEdge(_, info, **kwargs):
   edge = Edge(**kwargs)
+  edge.edge = loads(unquote(kwargs.get('edge', '{}')))
+  edge.eid = edge.edge['id']
   session.add(edge)
   session.commit()
+  updateFlowandWorksapceTS(edge)
+  session.commit()
   return {'edge': edge}
 
 @response_handler
 def updateEdge(_, info, **kwargs):
-  edge = session.query(Edge).filter_by(id=kwargs.get('id')).first()
+  edge = session.query(Edge).filter_by(eid=kwargs.get('eid')).first()
+
+  if edge_data:= kwargs.pop('edge', None):
+    edge_data = loads(unquote(edge_data))
+    kwargs['edge'] = dumps({**loads(edge.edge), **edge_data})
+
   edge.update(**kwargs)
+  updateFlowandWorksapceTS(edge)
+
   session.commit()
   return {'edge': edge}
 
 @response_handler
 def deleteEdge(_, info, **kwargs):
-  edge = session.query(Edge).filter_by(id=kwargs.get('id')).first()
+  edge = session.query(Edge).filter_by(eid=kwargs.get('eid')).first()
   session.delete(edge)
   session.commit()
   return {'edge': edge}

src/app.tsx

@@ -1,7 +1,9 @@
-import 'bootstrap/dist/css/bootstrap.css';
 import './app.css';
+import 'bootstrap/dist/css/bootstrap.css';
+import { ReactFlowProvider } from 'reactflow';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
+
 import Home from './home/home';
 import Designer from './designer/designer';
 import useWorkspace from './services/use-workspace';
@@ -30,7 +32,11 @@ export default function App() {
           />
           <Route 
             path="/designer"
-            element={<Designer activeWorkspace={activeWorkspace} flows={flows} />} 
+            element={
+              <ReactFlowProvider>
+                <Designer activeWorkspace={activeWorkspace} flows={flows} />
+              </ReactFlowProvider>
+            } 
           />
         </Routes>
       </Router>

src/designer/designer.css

@@ -11,8 +11,19 @@ body,
 }
 .react-flow__controls-button {
   flex: 1;
-  /* width: 20px;
-  max-width: 20px; */
+  width: 20px;
+  height: 20px;
+  padding: 10px;
+  background-color: #f8f9fa;
+  border-color: #f8f9fa;
+}
+.react-flow__controls-button:hover {
+  background-color: #e9ecef;
+  border-color: #dee2e6;
+}
+.react-flow__controls-button:active {
+  background-color: #e2e6ea;
+  border-color: #d3d9df !important;
 }
 .n-node {
   order: 6;
@@ -32,3 +43,39 @@ body,
 .react-flow__controls-interactive {
   order: 2;
 }
+.btn-group {
+  margin-right: 10px;
+}
+.disabled-btn {
+  padding: 0px;
+  padding-left: 1px;
+}
+.crumb {
+  /* border-left: 1px solid lightgray; */
+  /* border-left: 1px solid #a1a5aa; */
+}
+/* Bootstrap like secondary button styling for buttons with the .modify class */
+.modify > .btn {
+  background-color: #f8f9fa;
+  border-color: #f8f9fa;
+  color: #495057;
+}
+.modify > .btn:hover {
+  background-color: #e9ecef;
+  border-color: #dee2e6;
+  color: #495057;
+}
+.modify > .btn:active {
+  background-color: #e2e6ea;
+  border-color: #d3d9df !important;
+  color: #495057;
+}
+.react-flow__minimap > svg {
+  border-radius: 0.375rem;
+}
+
+#root > div > div > div.react-flow__panel.react-flow__controls.bottom.left {
+  border-radius: 0.375rem;
+  overflow: hidden;
+  box-shadow: 0 0 0 0px rgba(0, 0, 0, 0), 0 0px 0px rgba(0, 0, 0, 0);
+}