feat: added jump to node on clicking the warning

ref: N25B-450

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