From c663c7ab9253806dae42efa514f7fb8bb0afb99c Mon Sep 17 00:00:00 2001
From: Ian Arawjo <fatso784@gmail.com>
Date: Mon, 1 May 2023 11:12:07 -0400
Subject: [PATCH] minor fix

---
 chain-forge/package-lock.json |  1 +
 chain-forge/package.json      |  1 +
 chain-forge/src/App.js        | 28 +++++++++++++++++++++++-----
 chain-forge/src/store.js      |  1 +
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/chain-forge/package-lock.json b/chain-forge/package-lock.json
index ef8b429..aa182ea 100644
--- a/chain-forge/package-lock.json
+++ b/chain-forge/package-lock.json
@@ -13,6 +13,7 @@
         "@mantine/core": "^6.0.9",
         "@reactflow/background": "^11.2.0",
         "@reactflow/controls": "^11.1.11",
+        "@reactflow/core": "^11.7.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
diff --git a/chain-forge/package.json b/chain-forge/package.json
index 50ffd01..c6a8d39 100644
--- a/chain-forge/package.json
+++ b/chain-forge/package.json
@@ -8,6 +8,7 @@
     "@mantine/core": "^6.0.9",
     "@reactflow/background": "^11.2.0",
     "@reactflow/controls": "^11.1.11",
+    "@reactflow/core": "^11.7.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
diff --git a/chain-forge/src/App.js b/chain-forge/src/App.js
index a415045..34fa735 100644
--- a/chain-forge/src/App.js
+++ b/chain-forge/src/App.js
@@ -6,6 +6,7 @@ import ReactFlow, {
   Controls,
   Background,
   useReactFlow,
+  useViewport
 } from 'react-flow-renderer';
 // import axios from 'axios';
 import TextFieldsNode from './TextFieldsNode'; // Import a custom node
@@ -47,6 +48,7 @@ const App = () => {
 
   // Get nodes, edges, etc. state from the Zustand store:
   const { nodes, edges, onNodesChange, onEdgesChange, onConnect, addNode, setNodes, setEdges } = useStore(selector, shallow);
+
   // const [nodes, setNodes] = useState(initialNodes);
   // const [edges, setEdges] = useState(initialEdges);
 
@@ -103,20 +105,36 @@ const App = () => {
     console.log(event);
   };
 
+  const getWindowSize = () => ({width: window.innerWidth, height: window.innerHeight});
+  const getWindowCenter = () => {
+    const { width, height } = getWindowSize();
+    return ({centerX: width/2.0, centerY: height/2.0});
+  }
+  const getViewportCenter = () => {
+    const { centerX, centerY } = getWindowCenter();
+    const { x, y, zoom } = rfInstance.getViewport();
+    return ({x: -x+centerX, y:-y+centerY});
+  }
+
   const addTextFieldsNode = (event) => {
-    addNode({ id: 'textFieldsNode-'+Date.now(), type: 'textfields', data: {}, position: { x: 25, y: 50 } });
+    const { x, y } = getViewportCenter();
+    addNode({ id: 'textFieldsNode-'+Date.now(), type: 'textfields', data: {}, position: {x: x-200, y:y-100} });
   };
   const addPromptNode = (event) => {
-    addNode({ id: 'promptNode-'+Date.now(), type: 'prompt', data: { prompt: '' }, position: { x: 25, y: 50 } });
+    const { x, y } = getViewportCenter();
+    addNode({ id: 'promptNode-'+Date.now(), type: 'prompt', data: { prompt: '' }, position: {x: x-200, y:y-100} });
   };
   const addEvalNode = (event) => {
-    addNode({ id: 'evalNode-'+Date.now(), type: 'evaluator', data: { code: "def evaluate(response):\n  return len(response.text)" }, position: { x: 25, y: 50 } });
+    const { x, y } = getViewportCenter();
+    addNode({ id: 'evalNode-'+Date.now(), type: 'evaluator', data: { code: "def evaluate(response):\n  return len(response.text)" }, position: {x: x-200, y:y-100} });
   };
   const addVisNode = (event) => {
-    addNode({ id: 'visNode-'+Date.now(), type: 'vis', data: {}, position: { x: 25, y: 50 } });
+    const { x, y } = getViewportCenter();
+    addNode({ id: 'visNode-'+Date.now(), type: 'vis', data: {}, position: {x: x-200, y:y-100} });
   };
   const addInspectNode = (event) => {
-    addNode({ id: 'inspectNode-'+Date.now(), type: 'inspect', data: {}, position: { x: 25, y: 50 } });
+    const { x, y } = getViewportCenter();
+    addNode({ id: 'inspectNode-'+Date.now(), type: 'inspect', data: {}, position: {x: x-200, y:y-100} });
   };
 
   // Saving / loading
diff --git a/chain-forge/src/store.js b/chain-forge/src/store.js
index a9ef648..cd20ac5 100644
--- a/chain-forge/src/store.js
+++ b/chain-forge/src/store.js
@@ -11,6 +11,7 @@ import {
   // OnConnect,
   applyNodeChanges,
   applyEdgeChanges,
+  useViewport,
 } from 'react-flow-renderer';
 
 // We need to create a unique ID using the current date,