From 5a9b78fdda24a7f93fb9b554dd7cabc684476d6a Mon Sep 17 00:00:00 2001
From: JGerla <jgerla61@gmail.com>
Date: Thu, 15 Jan 2026 16:24:08 +0100
Subject: [PATCH] feat: added jump to node on clicking the warning

ref: N25B-450
---
 .../components/WarningSidebar.module.css      |  5 ++++
 .../components/WarningSidebar.tsx             | 27 ++++++++++++++++++-
 .../visualProgrammingUI/nodes/PhaseNode.tsx   |  3 ++-
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css
index 97f04b1..2a8241e 100644
--- a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css
@@ -53,6 +53,11 @@
     gap: 8px;
     padding: 8px 12px;
     border-radius: 5px;
+    cursor: pointer;
+}
+
+.warning-item:hover {
+    background: ButtonFace;
 }
 
 .warning-item--error {
diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx
index b91a17a..fb740f6 100644
--- a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx
@@ -1,3 +1,4 @@
+import {useReactFlow} from "@xyflow/react";
 import clsx from "clsx";
 import {useEffect, useState} from "react";
 import useFlowStore from "../VisProgStores.tsx";
@@ -82,8 +83,13 @@ function WarningsList(props: { warnings: EditorWarning[] }) {
 }
 
 function WarningListItem(props: { warning: EditorWarning }) {
+  const jumpToNode = useJumpToNode();
+
   return (
-    <div className={clsx(styles.warningItem, styles[`warning-item--${props.warning.severity.toLowerCase()}`],)}>
+    <div
+      className={clsx(styles.warningItem, styles[`warning-item--${props.warning.severity.toLowerCase()}`],)}
+      onClick={() => jumpToNode(props.warning.scope.id)}
+    >
       <div className={styles.description}>
         {props.warning.description}
       </div>
@@ -96,4 +102,23 @@ function WarningListItem(props: { warning: EditorWarning }) {
       </div>
     </div>
   );
+}
+
+function useJumpToNode() {
+  const { getNode, setCenter } = useReactFlow();
+
+  return (nodeId: string) => {
+    const node = getNode(nodeId);
+    if (!node) return;
+
+    const { position, width = 0, height = 0} = node;
+
+    // move to node
+    setCenter(
+      position!.x + width / 2,
+      position!.y + height / 2,
+      { zoom: 2, duration: 300 }
+    );
+
+  };
 }
\ No newline at end of file
diff --git a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
index e80aec3..cfb287f 100644
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
@@ -46,6 +46,7 @@ export default function PhaseNode(props: NodeProps<PhaseNode>) {
   const {registerWarning, unregisterWarning} = useFlowStore.getState();
   const connections = useNodeConnections({
     id: props.id,
+    handleType: "target",
     handleId: 'data'
   })
 
@@ -61,7 +62,7 @@ export default function PhaseNode(props: NodeProps<PhaseNode>) {
     }
 
     if (connections.length === 0) { registerWarning(noConnectionWarning); }
-    else { unregisterWarning(props.id, `${noConnectionWarning.type}:source`); }
+    else { unregisterWarning(props.id, `${noConnectionWarning.type}:data`); }
   }, [connections.length, props.id, registerWarning, unregisterWarning]);
 
   return (