feat: drilldown arrow navigation

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

@@ -376,7 +376,10 @@ function updateOutputPort(node: WorkflowNode<any> | null, workflowOutput: Workfl
 }
 
 // Route is mutated then watcher is triggered to open or close the drilldown
-function addOperatorToRoute(nodeId: string | null, animation: 'left' | 'right' | 'scale' = 'scale') {
+function addOperatorToRoute(
+	nodeId: string | null,
+	animation: 'left' | 'right' | 'scale' = 'scale' // drilldownSpawnAnimation is set here, left/right animations are for drilldown navigation
+) {
 	drilldownSpawnAnimation.value = animation;
 	if (nodeId !== null) {
 		router.push({ query: { operator: nodeId } });
@@ -896,6 +899,7 @@ const handleDrilldown = () => {
 watch(
 	() => [props.assetId],
 	async () => {
+		workflowService.neighborNodeCache.clear(); // Clear cache that assists drilldown navigation
 		isRenamingWorkflow.value = false; // Closes rename input if opened in previous workflow
 		if (wf.value && workflowDirty) {
 			workflowService.updateWorkflow(wf.value);

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

@@ -290,14 +290,23 @@ export const updateNodeStatus = (wf: Workflow, nodeId: string, status: OperatorS
 	node.status = status;
 };
 
+export const neighborNodeCache = new Map<string, WorkflowNode<any>>();
 export const getNeighborNodes = (wf: Workflow, id: string) => {
+	const findNeighborNode = (neighborId?: string) => {
+		if (!neighborId) return null;
+		if (!neighborNodeCache.has(neighborId)) {
+			const node = wf.nodes.find((n) => n.id === neighborId);
+			if (!node) return null;
+			neighborNodeCache.set(neighborId, node);
+		}
+		return neighborNodeCache.get(neighborId) ?? null;
+	};
+	console.log(neighborNodeCache);
 	const inputEdges = wf.edges.filter((edge) => edge.target === id);
 	const outputEdges = wf.edges.filter((edge) => edge.source === id);
-	const upstreamNodes = inputEdges
-		.map((edge) => wf.nodes.find((n) => n.id === edge.source))
-		.filter(Boolean) as WorkflowNode<any>[];
+	const upstreamNodes = inputEdges.map((edge) => findNeighborNode(edge.source)).filter(Boolean) as WorkflowNode<any>[];
 	const downstreamNodes = outputEdges
-		.map((edge) => wf.nodes.find((n) => n.id === edge.target))
+		.map((edge) => findNeighborNode(edge.target))
 		.filter(Boolean) as WorkflowNode<any>[];
 	return { upstreamNodes, downstreamNodes };
 };