From 302021dae06b3e9addb3289d1b90f1b932f89b8d Mon Sep 17 00:00:00 2001
From: Ian Arawjo <fatso784@gmail.com>
Date: Wed, 3 May 2023 13:49:03 -0400
Subject: [PATCH] Move hover border style events to cfnode CSS class

---
 chain-forge/src/EvaluatorNode.js     | 19 +------------------
 chain-forge/src/InspectorNode.js     |  2 +-
 chain-forge/src/PromptNode.js        | 19 +------------------
 chain-forge/src/ScriptNode.js        |  2 +-
 chain-forge/src/TextFieldsNode.js    |  2 +-
 chain-forge/src/VisNode.js           | 19 +------------------
 chain-forge/src/text-fields-node.css |  7 +++++++
 7 files changed, 13 insertions(+), 57 deletions(-)

diff --git a/chain-forge/src/EvaluatorNode.js b/chain-forge/src/EvaluatorNode.js
index 91e2689..f0c0bdf 100644
--- a/chain-forge/src/EvaluatorNode.js
+++ b/chain-forge/src/EvaluatorNode.js
@@ -25,20 +25,12 @@ const EvaluatorNode = ({ data, id }) => {
   // For displaying error messages to user
   const alertModal = useRef(null);
 
-  const [hovered, setHovered] = useState(false);
   const [codeText, setCodeText] = useState(data.code);
   const [codeTextOnLastRun, setCodeTextOnLastRun] = useState(false);
   const [reduceMethod, setReduceMethod] = useState('none');
   const [mapScope, setMapScope] = useState('response');
   const [reduceVars, setReduceVars] = useState([]);
 
-  const handleMouseEnter = () => {
-    setHovered(true);
-  };
-  const handleMouseLeave = () => {
-    setHovered(false);
-  };
-
   const handleCodeChange = (code) => {
     if (codeTextOnLastRun !== false) {
       const code_changed = code !== codeTextOnLastRun;
@@ -156,17 +148,8 @@ const EvaluatorNode = ({ data, id }) => {
     if (status !== 'none') { setStatus('none'); }
   };
 
-  const borderStyle = hovered
-    ? '1px solid #222'
-    : '1px solid #999';
-
   return (
-    <div 
-      className="evaluator-node"
-      style={{ border: borderStyle }}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
+    <div className="evaluator-node cfnode">
       <div className="node-header">
         <NodeLabel title={data.title || 'Python Evaluator Node'} 
                    nodeId={id} 
diff --git a/chain-forge/src/InspectorNode.js b/chain-forge/src/InspectorNode.js
index db069f9..a97e54a 100644
--- a/chain-forge/src/InspectorNode.js
+++ b/chain-forge/src/InspectorNode.js
@@ -116,7 +116,7 @@ const InspectorNode = ({ data, id }) => {
   }
 
   return (
-    <div className="inspector-node">
+    <div className="inspector-node cfnode">
       <div className="node-header">
             <NodeLabel title={data.title || 'Inspect Node'} 
                        nodeId={id}
diff --git a/chain-forge/src/PromptNode.js b/chain-forge/src/PromptNode.js
index 59536ff..2e53965 100644
--- a/chain-forge/src/PromptNode.js
+++ b/chain-forge/src/PromptNode.js
@@ -53,7 +53,6 @@ const PromptNode = ({ data, id }) => {
   const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
   const getNode = useStore((state) => state.getNode);
 
-  const [hovered, setHovered] = useState(false);
   const [templateVars, setTemplateVars] = useState(data.vars || []);
   const [promptText, setPromptText] = useState(data.prompt);
   const [promptTextOnLastRun, setPromptTextOnLastRun] = useState(null);
@@ -87,13 +86,6 @@ const PromptNode = ({ data, id }) => {
   const onLLMListItemsChange = useCallback((new_items) => {
     setLLMItemsCurrState(new_items);
   }, [setLLMItemsCurrState]);
-  
-  const handleMouseEnter = () => {
-    setHovered(true);
-  };
-  const handleMouseLeave = () => {
-    setHovered(false);
-  };
 
   const handleInputChange = (event) => {
     const value = event.target.value;
@@ -277,18 +269,9 @@ const PromptNode = ({ data, id }) => {
   const hideStatusIndicator = () => {
     if (status !== 'none') { setStatus('none'); }
   };
-  
-  const borderStyle = hovered
-    ? '1px solid #222'
-    : '1px solid #999';
 
   return (
-    <div 
-      className="prompt-node"
-      style={{ border: borderStyle }}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
+    <div className="prompt-node cfnode">
       <div className="node-header drag-handle">
         <NodeLabel title={data.title || 'Prompt Node'} 
                    nodeId={id} 
diff --git a/chain-forge/src/ScriptNode.js b/chain-forge/src/ScriptNode.js
index 3a66f33..a9a832e 100644
--- a/chain-forge/src/ScriptNode.js
+++ b/chain-forge/src/ScriptNode.js
@@ -59,7 +59,7 @@ const ScriptNode = ({ data, id }) => {
     }, [data, id, setDataPropsForNode]);
 
     return (
-        <div className="script-node">
+        <div className="script-node cfnode">
             <div className="node-header">
                 <NodeLabel title={data.title || 'Global Scripts'} nodeId={id} editable={false} />
             </div>
diff --git a/chain-forge/src/TextFieldsNode.js b/chain-forge/src/TextFieldsNode.js
index 5226bf8..159ca6f 100644
--- a/chain-forge/src/TextFieldsNode.js
+++ b/chain-forge/src/TextFieldsNode.js
@@ -95,7 +95,7 @@ const TextFieldsNode = ({ data, id }) => {
   }, [fields]);
 
   return (
-    <div className="text-fields-node">
+    <div className="text-fields-node cfnode">
       <div className="node-header">
         <NodeLabel title={data.title || 'TextFields Node'} nodeId={id} icon={<IconTextPlus size="16px" />} />
       </div>
diff --git a/chain-forge/src/VisNode.js b/chain-forge/src/VisNode.js
index 4a0dac8..e1dac32 100644
--- a/chain-forge/src/VisNode.js
+++ b/chain-forge/src/VisNode.js
@@ -40,16 +40,8 @@ const createHoverTexts = (responses) => {
 const VisNode = ({ data, id }) => {
 
     const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
-    const [hovered, setHovered] = useState(false);
     const [plotlyObj, setPlotlyObj] = useState([]);
     const [pastInputs, setPastInputs] = useState([]);
-    
-    const handleMouseEnter = () => {
-      setHovered(true);
-    };
-    const handleMouseLeave = () => {
-      setHovered(false);
-    };
   
     const handleOnConnect = useCallback(() => {
         // Grab the input node ids
@@ -169,18 +161,9 @@ const VisNode = ({ data, id }) => {
             handleOnConnect();
         }
     }, [data, id, handleOnConnect, setDataPropsForNode]);
-
-    const borderStyle = hovered
-      ? '1px solid #222'
-      : '1px solid #999';
   
     return (
-      <div 
-        className="vis-node"
-        style={{ border: borderStyle }}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      >
+      <div className="vis-node cfnode">
         <div className="node-header">
             <NodeLabel title={data.title || 'Vis Node'} 
                        nodeId={id}
diff --git a/chain-forge/src/text-fields-node.css b/chain-forge/src/text-fields-node.css
index 0694cca..a757533 100644
--- a/chain-forge/src/text-fields-node.css
+++ b/chain-forge/src/text-fields-node.css
@@ -183,6 +183,13 @@
     margin: 0px 0px 0px 2px;
   }
 
+  .cfnode {
+    border-color: #999;
+  }
+  .cfnode:hover {
+    border-color: #222;
+  }
+  
   .var-select-toolbar {
     text-align: right;
     margin: 0px;