From 8c3b2c58aaabec891a67526364d2376366fc2194 Mon Sep 17 00:00:00 2001
From: Ian Arawjo <fatso784@gmail.com>
Date: Thu, 11 May 2023 22:38:55 -0400
Subject: [PATCH] Fixed bug in CSV node

---
 chain-forge/src/CsvNode.js       | 48 +++++++++++++++++---------------
 chain-forge/src/InspectorNode.js |  2 +-
 chain-forge/src/PromptNode.js    |  3 +-
 chain-forge/src/index.css        |  4 +--
 4 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/chain-forge/src/CsvNode.js b/chain-forge/src/CsvNode.js
index 1d2c437..58cc5d6 100644
--- a/chain-forge/src/CsvNode.js
+++ b/chain-forge/src/CsvNode.js
@@ -21,6 +21,7 @@ const CsvNode = ({ data, id }) => {
 
     const processCsv = (csv) => {
         var matches = csv.match(/(\s*"[^"]+"\s*|\s*[^,]+|,)(?=,|$)/g);
+        if (!matches) return;
         for (var n = 0; n < matches.length; ++n) {
             matches[n] = matches[n].trim();
             if (matches[n] == ',') matches[n] = '';
@@ -45,7 +46,7 @@ const CsvNode = ({ data, id }) => {
     }, [id, setDataPropsForNode]);
 
     const handKeyDown = useCallback((event) => {
-        if (event.key === 'Enter') {
+        if (event.key === 'Enter' && data.text && data.text.trim().length > 0) {
             setIsEditing(false);
             setCsvInput(null);
         }
@@ -57,14 +58,14 @@ const CsvNode = ({ data, id }) => {
     }, []);
 
     const handleOnBlur = useCallback((event) => {
-        setIsEditing(false);
-        setCsvInput(null);
-    }, []);
+        if (data.text && data.text.trim().length > 0)
+            setIsEditing(false);
+    }, [data.text]);
 
     // render csv div
     const renderCsvDiv = useCallback(() => {
         // Take the data.text as csv (only 1 row), and get individual elements
-        const elements = data.fields;
+        const elements = data.fields || [];
 
         // generate a HTML code that highlights the elements
         const html = [];
@@ -76,36 +77,39 @@ const CsvNode = ({ data, id }) => {
             }
         });
 
-        setContentDiv(<div className='csv-div nowheel' onClick={handleDivOnClick}>
-            {html}
-        </div>);
-        setCountText(<Text size="xs" style={{ marginTop: '5px' }} color='blue' align='right'>{elements.length} elements</Text>);
+        setContentDiv(
+            <div className='csv-div nowheel' onClick={handleDivOnClick}>
+                {html}
+            </div>
+        );
+        setCountText(
+            <Text size="xs" style={{ marginTop: '5px' }} color='blue' align='right'>{elements.length} elements</Text>
+        );
     }, [data.text, handleDivOnClick]);
 
     // When isEditing changes, add input
     useEffect(() => {
-        if (!isEditing) {
+        if (!isEditing && data.text && data.text.trim().length > 0) {
             setCsvInput(null);
             renderCsvDiv();
             return;
         }
-        if (!csvInput) {
-            var text_val = data.text || '';
-            setCsvInput(
-                <div className="input-field" key={id}>
-                    <textarea id={id} name={id} className="text-field-fixed nodrag csv-input" rows="2" cols="40" defaultValue={text_val} onChange={handleInputChange} placeholder='Paste your CSV text here' onKeyDown={handKeyDown} onBlur={handleOnBlur} autoFocus={true}/>
-                </div>
-            );
-            setContentDiv(null);
-            setCountText(null);
-        }
+
+        var text_val = data.text || '';
+        setCsvInput(
+            <div className="input-field" key={id}>
+                <textarea id={id} name={id} className="text-field-fixed nodrag csv-input" rows="2" cols="40" defaultValue={text_val} onChange={handleInputChange} placeholder='Paste your CSV text here' onKeyDown={handKeyDown} onBlur={handleOnBlur} autoFocus={true}/>
+            </div>
+        );
+        setContentDiv(null);
+        setCountText(null);
     }, [isEditing]);
 
     // when data.text changes, update the content div
     useEffect(() => {
         // When in editing mode, don't update the content div
-        if (isEditing) return;
-        if (!data.text) return;
+        if (isEditing || !data.text) return;
+
         renderCsvDiv();
 
     }, [id, data.text]);
diff --git a/chain-forge/src/InspectorNode.js b/chain-forge/src/InspectorNode.js
index 8dd1f92..f107dc0 100644
--- a/chain-forge/src/InspectorNode.js
+++ b/chain-forge/src/InspectorNode.js
@@ -146,7 +146,7 @@ const InspectorNode = ({ data, id }) => {
         type="target"
         position="left"
         id="input"
-        style={{ top: "30%", background: '#555' }}
+        style={{ top: "50%", background: '#555' }}
         onConnect={handleOnConnect}
       />
     </div>
diff --git a/chain-forge/src/PromptNode.js b/chain-forge/src/PromptNode.js
index 0b16a5c..35fe7ca 100644
--- a/chain-forge/src/PromptNode.js
+++ b/chain-forge/src/PromptNode.js
@@ -15,7 +15,6 @@ const allLLMs = [
     { name: "GPT4", emoji: "🥵", model: "gpt-4", temp: 1.0 },
     { name: "Alpaca 7B", emoji: "🦙", model: "alpaca.7B", temp: 0.5 },
     { name: "Claude v1", emoji: "📚", model: "claude-v1", temp: 0.5 },
-    { name: "Ian Chatbot", emoji: "💩", model: "test", temp: 0.5 }
 ];
 const initLLMs = [allLLMs[0]];
 
@@ -462,7 +461,7 @@ const PromptNode = ({ data, id }) => {
                     const resp_boxes = responses_by_llm[llm].map((res_obj, idx) => {
                         const num_resp = res_obj['responses'].length;
                         const resp_prevs = res_obj['responses'].map((r, i) => 
-                            (<pre className="small-response" key={i}><i>{truncStr(r, 40)}</i><b>({i+1} of {num_resp})</b></pre>)
+                            (<pre className="small-response" key={i}><i>{truncStr(r, 33)}</i><b>({i+1} of {num_resp})</b></pre>)
                         );
                         const vars = vars_to_str(res_obj.vars);
                         const var_tags = vars.map((v, i) => (
diff --git a/chain-forge/src/index.css b/chain-forge/src/index.css
index b16ecba..9d49bc8 100644
--- a/chain-forge/src/index.css
+++ b/chain-forge/src/index.css
@@ -45,12 +45,12 @@ code {
 }
 
 .csv-div {
-  width: 350px;
+  width: 290px;
   max-height: 250px;
   overflow-y: auto;
 }
 
 .csv-input {
-  width: 350px;
+  width: 290px;
   height: 150px;
 }
\ No newline at end of file