fix: fixed centering for jumptonode from warningSidebar

ref: N25B-450

src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx

@@ -20,7 +20,7 @@ export function WarningsSidebar() {
     : warnings.filter(w => w.severity === severityFilter);
 
   return (
-    <aside className={styles.warningsSidebar}>
+    <aside id="warningSidebar" className={styles.warningsSidebar}>
       <WarningsHeader
         severityFilter={severityFilter}
         onChange={setSeverityFilter}
@@ -117,38 +117,47 @@ function WarningListItem(props: { warning: EditorWarning, key: string}) {
       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 className={styles.itemHeader}>
+        <span className={styles.type}>{props.warning.type}</span>
       </div>
 
-      <div className={styles.meta}>
-        {props.warning.type}
+      <div className={styles.description}>
+        {props.warning.description}
       </div>
     </div>
   );
 }
 
 function useJumpToNode() {
-  const { getNode, setCenter } = useReactFlow();
+  const { getNode, setCenter, getViewport } = useReactFlow();
   const { addSelectedNodes } = useStoreApi().getState();
 
+
   return (nodeId: string) => {
+    // select the node
+
+
+
     // user can't jump to global warning, so prevent further logic from running
     if (nodeId === globalWarning) return;
     const node = getNode(nodeId);
     if (!node) return;
 
-    const { position, width = 0, height = 0} = node;
+    const nodeElement = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`) as HTMLElement;
+    const { position } = node;
+    const viewport = getViewport();
+    const { width, height } = nodeElement.getBoundingClientRect();
 
-    // move to node
+    //move to node
     setCenter(
-      position!.x + width / 2,
-      position!.y + height / 2,
-      { zoom: 2, duration: 300 }
+      position!.x + ((width / viewport.zoom) / 2),
+      position!.y + ((height / viewport.zoom) / 2),
+      {duration: 300, interpolate: "smooth" }
     ).then(() => {
-      // select the node
       addSelectedNodes([nodeId]);
     });
 
+
+
   };
 }