update client side workflow to avoid version mismatch (#4472)

packages/client/hmi-client/src/components/workflow/tera-workflow.vue

@@ -214,7 +214,7 @@ import * as ModelComparisonOp from '@/components/workflow/ops/model-comparison/m
 import * as RegriddingOp from '@/components/workflow/ops/regridding/mod';
 import * as InterventionPolicyOp from '@/components/workflow/ops/intervention-policy/mod';
 
-const WORKFLOW_SAVE_INTERVAL = 8000;
+const WORKFLOW_SAVE_INTERVAL = 4000;
 
 const registry = new workflowService.WorkflowRegistry();
 registry.registerOp(SimulateCiemssOp);
@@ -255,6 +255,7 @@ let canvasTransform = { x: 0, y: 0, k: 1 };
 let currentPortPosition: Position = { x: 0, y: 0 };
 let isMouseOverPort: boolean = false;
 let saveTimer: any = null;
+
 let workflowDirty: boolean = false;
 let startTime: number = 0;
 
@@ -764,6 +765,7 @@ function relinkEdges(node: WorkflowNode<any> | null) {
 
 			edges.forEach((edge) => {
 				const portElem = getPortElement(edge.sourcePortId as string);
+				if (!portElem) return;
 				const totalOffsetY = portElem.offsetTop + portElem.offsetHeight / 2;
 				const portPos = {
 					x: nodePosition.x + n.width + portElem.offsetWidth * 0.5,
@@ -915,9 +917,10 @@ watch(
 onMounted(() => {
 	document.addEventListener('mousemove', mouseUpdate);
 	window.addEventListener('beforeunload', unloadCheck);
-	saveTimer = setInterval(() => {
+	saveTimer = setInterval(async () => {
 		if (workflowDirty && useProjects().hasEditPermission()) {
-			workflowService.updateWorkflow(wf.value.dump());
+			const updated = await workflowService.updateWorkflow(wf.value.dump());
+			wf.value.update(updated);
 			workflowDirty = false;
 		}
 		setLocalStorageTransform(wf.value.getId(), canvasTransform);
@@ -931,6 +934,7 @@ onUnmounted(() => {
 	if (saveTimer) {
 		clearInterval(saveTimer);
 	}
+
 	if (canvasTransform) {
 		setLocalStorageTransform(wf.value.getId(), canvasTransform);
 	}

packages/client/hmi-client/src/services/workflow.ts

@@ -32,6 +32,8 @@ export class WorkflowWrapper {
 		}
 	}
 
+	// This will replace the entire workflow, should only use for initial load
+	// as there it will not propapate reactivity
 	load(wf: Workflow) {
 		this.wf = _.cloneDeep(wf);
 	}
@@ -40,6 +42,42 @@ export class WorkflowWrapper {
 		return this.wf;
 	}
 
+	update(updatedWF: Workflow) {
+		this.wf.name = updatedWF.name;
+		this.wf.description = updatedWF.description;
+
+		const nodes = this.getNodes();
+		const edges = this.getEdges();
+		const updatedNodeMap = new Map<string, WorkflowNode<any>>(updatedWF.nodes.map((n) => [n.id, n]));
+		const updatedEdgeMap = new Map<string, WorkflowEdge>(updatedWF.edges.map((e) => [e.id, e]));
+
+		// Update and deletes
+		for (let i = 0; i < nodes.length; i++) {
+			const nodeId = nodes[i].id;
+			const updated = updatedNodeMap.get(nodeId);
+			if (updated) {
+				if ((updated.version as number) > (nodes[i].version as number)) {
+					nodes[i] = Object.assign(nodes[i], updated);
+				}
+				updatedNodeMap.delete(nodeId);
+			}
+		}
+		for (let i = 0; i < edges.length; i++) {
+			const edgeId = edges[i].id;
+			const updated = updatedEdgeMap.get(edgeId);
+			if (updated) {
+				if ((updated.version as number) > (edges[i].version as number)) {
+					edges[i] = Object.assign(edges[i], updated);
+				}
+				updatedEdgeMap.delete(edgeId);
+			}
+		}
+
+		// New eleemnts
+		[...updatedNodeMap.values()].forEach((node) => this.wf.nodes.push(node));
+		[...updatedEdgeMap.values()].forEach((edge) => this.wf.edges.push(edge));
+	}
+
 	getId() {
 		return this.wf.id;
 	}