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 {

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 }
+    );
+
+  };
 }

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 (