From 1eee1c1d11123b99c0c4c66b8c4db7fea8f7a942 Mon Sep 17 00:00:00 2001
From: Priyan Vaithilingam <priyanmuthu@gmail.com>
Date: Fri, 5 May 2023 16:10:13 -0400
Subject: [PATCH 1/8] DO NOT MERGE TO MAIN.. WIP

---
 .gitignore                 |  3 ++-
 chain-forge/src/App.css    |  5 +++++
 chain-forge/src/App.js     | 10 +++++++++-
 chain-forge/src/CsvNode.js | 35 +++++++++++++++++++++++++++++++++++
 4 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 chain-forge/src/CsvNode.js

diff --git a/.gitignore b/.gitignore
index 017cae5..903297f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,5 @@ __pycache__
 python-backend/cache
 
 # venv
-venv
\ No newline at end of file
+venv
+node_modules
diff --git a/chain-forge/src/App.css b/chain-forge/src/App.css
index 6071c72..47b2fab 100644
--- a/chain-forge/src/App.css
+++ b/chain-forge/src/App.css
@@ -45,3 +45,8 @@ path.react-flow__edge-path:hover {
     transform: rotate(360deg);
   }
 }
+
+.rich-editor {
+  min-width: 500px;
+  min-height: 500px;
+}
\ No newline at end of file
diff --git a/chain-forge/src/App.js b/chain-forge/src/App.js
index 50698a2..72c8725 100644
--- a/chain-forge/src/App.js
+++ b/chain-forge/src/App.js
@@ -15,6 +15,7 @@ import EvaluatorNode from './EvaluatorNode';
 import VisNode from './VisNode';
 import InspectNode from './InspectorNode';
 import ScriptNode from './ScriptNode';
+import CsvNode from './CsvNode';
 import './text-fields-node.css';
 
 // State management (from https://reactflow.dev/docs/guides/state-management/)
@@ -40,7 +41,8 @@ const nodeTypes = {
   evaluator: EvaluatorNode,
   vis: VisNode,
   inspect: InspectNode,
-  script: ScriptNode
+  script: ScriptNode,
+  csv: CsvNode,
 };
 
 const connectionLineStyle = { stroke: '#ddd' };
@@ -91,6 +93,11 @@ const App = () => {
     addNode({ id: 'scriptNode-'+Date.now(), type: 'script', data: {}, position: {x: x-200, y:y-100} });
   };
 
+  const addCsvNode = (event) => {
+    const { x, y } = getViewportCenter();
+    addNode({ id: 'csvNode-'+Date.now(), type: 'csv', data: {}, position: {x: x-200, y:y-100} });
+  };
+
   /** 
    * SAVING / LOADING, IMPORT / EXPORT (from JSON)
   */
@@ -201,6 +208,7 @@ const App = () => {
         <button onClick={addVisNode}>Add vis node</button>
         <button onClick={addInspectNode}>Add inspect node</button>
         <button onClick={addScriptNode}>Add script node</button>
+        <button onClick={addCsvNode}>Add csv node</button>
         <button onClick={saveFlow} style={{marginLeft: '12px'}}>Save</button>
         <button onClick={loadFlowFromCache}>Load</button>
         <button onClick={exportFlow} style={{marginLeft: '12px'}}>Export</button>
diff --git a/chain-forge/src/CsvNode.js b/chain-forge/src/CsvNode.js
new file mode 100644
index 0000000..0cf1f2f
--- /dev/null
+++ b/chain-forge/src/CsvNode.js
@@ -0,0 +1,35 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { Card, Text} from '@mantine/core';
+import useStore from './store';
+import NodeLabel from './NodeLabelComponent'
+import { IconFileText } from '@tabler/icons-react';
+import { edit } from 'ace-builds';
+
+const CsvNode = ({ data, id }) => {
+    const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
+    const content = "test content";
+
+
+    // Handle a change in a text fields' input.
+    const handleInputChange = useCallback((event) => {
+        // Update the data for this text fields' id.
+        let new_data = { 'text': event.target.value };
+        setDataPropsForNode(id, new_data);
+    }, [id, setDataPropsForNode]);
+
+    return (
+        <div className="text-fields-node cfnode">
+            <NodeLabel title={data.title || 'CSV Node'} nodeId={id} icon={<IconFileText size="16px" />} />
+            <Card shadow="sm" padding="lg" radius="md" withBorder>
+
+                <Text size="sm" color="dimmed">
+                    With Fjord Tours you can explore more of the magical fjord landscapes with tours and
+                    activities on and around the fjords of Norway
+                </Text>
+            </Card>
+
+        </div>
+    );
+};
+
+export default CsvNode;
\ No newline at end of file

From c3820b1f593d36b8cab45ea0633e3f96d1fc1bd1 Mon Sep 17 00:00:00 2001
From: Priyan Vaithilingam <priyanmuthu@gmail.com>
Date: Tue, 9 May 2023 10:43:46 -0400
Subject: [PATCH 2/8] sort of working CSV node -- without handles

---
 chain-forge/src/CsvNode.js | 74 +++++++++++++++++++++++++++++++-------
 chain-forge/src/index.css  | 19 ++++++++++
 2 files changed, 80 insertions(+), 13 deletions(-)

diff --git a/chain-forge/src/CsvNode.js b/chain-forge/src/CsvNode.js
index 0cf1f2f..678b906 100644
--- a/chain-forge/src/CsvNode.js
+++ b/chain-forge/src/CsvNode.js
@@ -1,33 +1,81 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Card, Text} from '@mantine/core';
+import { Card, Text } from '@mantine/core';
 import useStore from './store';
 import NodeLabel from './NodeLabelComponent'
-import { IconFileText } from '@tabler/icons-react';
+import { IconCsv, IconFileText } from '@tabler/icons-react';
 import { edit } from 'ace-builds';
 
 const CsvNode = ({ data, id }) => {
     const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
-    const content = "test content";
+    const [contentDiv, setContentDiv] = useState(null);
+    const [fields, setFields] = useState([]);
+    const [isEditing, setIsEditing] = useState(false);
 
+    const processCsv = (csv) => {
+        // Split the input string by rows, and merge
+        var res = csv.split('\n').join(',');
+
+        // remove all the empty or whitespace-only elements
+        return res.split(',').map(e => e.trim()).filter(e => e.length > 0);
+    }
 
     // Handle a change in a text fields' input.
     const handleInputChange = useCallback((event) => {
         // Update the data for this text fields' id.
-        let new_data = { 'text': event.target.value };
+        let new_data = {'text': event.target.value};
         setDataPropsForNode(id, new_data);
     }, [id, setDataPropsForNode]);
 
+    const handKeyDown = useCallback((event) => {
+        if (event.key === 'Enter') {
+            setIsEditing(false);
+        }
+    }, []);
+
+    const handleDivOnClick = useCallback((event) => {
+        setIsEditing(true);
+    }, []);
+
+    // Initialize fields (run once at init)
+    useEffect(() => {
+        if (!data.text) {
+            setIsEditing(true);
+        }
+    }, []);
+
+    // when data.text changes, update the content div
+    useEffect(() => {
+        if(isEditing) {
+            var text_val = data.text || '';
+            setContentDiv(
+                <div className="input-field" key={id}>
+                    <textarea id={id} name={id} className="text-field-fixed nodrag" rows="2" cols="40" onChange={handleInputChange} placeholder='Paste your CSV text here' onKeyDown={handKeyDown} value={text_val} />
+                </div>
+            );
+            return
+        }
+        if (!data.text) return;
+        // Take the data.text as csv (only 1 row), and get individual elements
+        const elements = processCsv(data.text);
+
+        // generate a HTML code that highlights the elements
+        const html = [];
+        elements.forEach((e, idx) => {
+            html.push(<span key={idx} className="csv-element">{e}</span>);
+            if (idx < elements.length - 1) {
+                html.push(<span key={idx + 'comma'} className="csv-comma">,</span>);
+            }
+        });
+
+        setContentDiv(<div className='csv-div' onClick={handleDivOnClick}>
+            {html}
+        </div>);
+    }, [id, data.text, isEditing, handleDivOnClick, handleInputChange, handKeyDown]);
+
     return (
         <div className="text-fields-node cfnode">
-            <NodeLabel title={data.title || 'CSV Node'} nodeId={id} icon={<IconFileText size="16px" />} />
-            <Card shadow="sm" padding="lg" radius="md" withBorder>
-
-                <Text size="sm" color="dimmed">
-                    With Fjord Tours you can explore more of the magical fjord landscapes with tours and
-                    activities on and around the fjords of Norway
-                </Text>
-            </Card>
-
+            <NodeLabel title={data.title || 'CSV Node'} nodeId={id} icon={<IconCsv size="16px" />} />
+            {contentDiv}
         </div>
     );
 };
diff --git a/chain-forge/src/index.css b/chain-forge/src/index.css
index 346977a..0cb84fc 100644
--- a/chain-forge/src/index.css
+++ b/chain-forge/src/index.css
@@ -21,4 +21,23 @@ code {
 
 .script-node-input {
   min-width: 300px;
+}
+
+.csv-element {
+  position: relative;
+  color: #ffffff;
+  background-color: #2cba6c;
+  font-size: inherit;
+  padding: .2em .4em;
+  border-radius: 6px;
+  margin: 0 6px;
+}
+
+/* set a muted text */
+.csv-comma {
+  color: #FFC107;
+}
+
+.csv-div  {
+  width: 350px;
 }
\ No newline at end of file

From beb2d70586c37e536bf6b3ce7591d07fa584eb65 Mon Sep 17 00:00:00 2001
From: Priyan Vaithilingam <priyanmuthu@gmail.com>
Date: Tue, 9 May 2023 12:42:53 -0400
Subject: [PATCH 3/8] CSV element highlight with count

---
 chain-forge/src/CsvNode.js | 68 ++++++++++++++++++++++++--------------
 chain-forge/src/index.css  | 14 ++++++--
 2 files changed, 54 insertions(+), 28 deletions(-)

diff --git a/chain-forge/src/CsvNode.js b/chain-forge/src/CsvNode.js
index 678b906..855ff18 100644
--- a/chain-forge/src/CsvNode.js
+++ b/chain-forge/src/CsvNode.js
@@ -8,10 +8,12 @@ import { edit } from 'ace-builds';
 const CsvNode = ({ data, id }) => {
     const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
     const [contentDiv, setContentDiv] = useState(null);
-    const [fields, setFields] = useState([]);
-    const [isEditing, setIsEditing] = useState(false);
+    const [isEditing, setIsEditing] = useState(true);
+    const [csvInput, setCsvInput] = useState(null);
+    const [countText, setCountText] = useState(null);
 
     const processCsv = (csv) => {
+        if(!csv) return [];
         // Split the input string by rows, and merge
         var res = csv.split('\n').join(',');
 
@@ -21,40 +23,25 @@ const CsvNode = ({ data, id }) => {
 
     // Handle a change in a text fields' input.
     const handleInputChange = useCallback((event) => {
-        // Update the data for this text fields' id.
-        let new_data = {'text': event.target.value};
-        setDataPropsForNode(id, new_data);
+            // Update the data for this text fields' id.
+            let new_data = { 'text': event.target.value };
+            setDataPropsForNode(id, new_data);
     }, [id, setDataPropsForNode]);
 
     const handKeyDown = useCallback((event) => {
         if (event.key === 'Enter') {
             setIsEditing(false);
+            setCsvInput(null);
         }
     }, []);
 
+    // handling Div Click
     const handleDivOnClick = useCallback((event) => {
         setIsEditing(true);
     }, []);
 
-    // Initialize fields (run once at init)
-    useEffect(() => {
-        if (!data.text) {
-            setIsEditing(true);
-        }
-    }, []);
-
-    // when data.text changes, update the content div
-    useEffect(() => {
-        if(isEditing) {
-            var text_val = data.text || '';
-            setContentDiv(
-                <div className="input-field" key={id}>
-                    <textarea id={id} name={id} className="text-field-fixed nodrag" rows="2" cols="40" onChange={handleInputChange} placeholder='Paste your CSV text here' onKeyDown={handKeyDown} value={text_val} />
-                </div>
-            );
-            return
-        }
-        if (!data.text) return;
+    // render csv div
+    const renderCsvDiv = useCallback(() => {
         // Take the data.text as csv (only 1 row), and get individual elements
         const elements = processCsv(data.text);
 
@@ -70,12 +57,43 @@ const CsvNode = ({ data, id }) => {
         setContentDiv(<div className='csv-div' onClick={handleDivOnClick}>
             {html}
         </div>);
-    }, [id, data.text, isEditing, handleDivOnClick, handleInputChange, handKeyDown]);
+        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) {
+            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" rows="2" cols="40" defaultValue={text_val} onChange={handleInputChange} placeholder='Paste your CSV text here' onKeyDown={handKeyDown} />
+                </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;
+        renderCsvDiv();
+
+    }, [id, data.text]);
 
     return (
         <div className="text-fields-node cfnode">
             <NodeLabel title={data.title || 'CSV Node'} nodeId={id} icon={<IconCsv size="16px" />} />
+            {csvInput}
             {contentDiv}
+            {countText? countText : <></>}
         </div>
     );
 };
diff --git a/chain-forge/src/index.css b/chain-forge/src/index.css
index 0cb84fc..ea5c7a3 100644
--- a/chain-forge/src/index.css
+++ b/chain-forge/src/index.css
@@ -29,8 +29,13 @@ code {
   background-color: #2cba6c;
   font-size: inherit;
   padding: .2em .4em;
-  border-radius: 6px;
-  margin: 0 6px;
+  border: none;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  margin: 4px 2px;
+  cursor: pointer;
+  border-radius: 10px;
 }
 
 /* set a muted text */
@@ -38,6 +43,9 @@ code {
   color: #FFC107;
 }
 
-.csv-div  {
+.csv-div {
   width: 350px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
\ No newline at end of file

From 47970a683ccefde9e0453e003140c7fd1ea7c92b Mon Sep 17 00:00:00 2001
From: Priyan Vaithilingam <priyanmuthu@gmail.com>
Date: Tue, 9 May 2023 13:00:21 -0400
Subject: [PATCH 4/8] added handles

---
 chain-forge/src/CsvNode.js | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/chain-forge/src/CsvNode.js b/chain-forge/src/CsvNode.js
index 855ff18..21de84e 100644
--- a/chain-forge/src/CsvNode.js
+++ b/chain-forge/src/CsvNode.js
@@ -1,9 +1,9 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Card, Text } from '@mantine/core';
+import { Text } from '@mantine/core';
 import useStore from './store';
 import NodeLabel from './NodeLabelComponent'
-import { IconCsv, IconFileText } from '@tabler/icons-react';
-import { edit } from 'ace-builds';
+import { IconCsv } from '@tabler/icons-react';
+import { Handle } from 'react-flow-renderer';
 
 const CsvNode = ({ data, id }) => {
     const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
@@ -12,8 +12,15 @@ const CsvNode = ({ data, id }) => {
     const [csvInput, setCsvInput] = useState(null);
     const [countText, setCountText] = useState(null);
 
+    // initializing
+    useEffect(() => {
+        if (!data.fields) {
+            setDataPropsForNode(id, { text: '', fields: [] });
+        }
+    }, []);
+
     const processCsv = (csv) => {
-        if(!csv) return [];
+        if (!csv) return [];
         // Split the input string by rows, and merge
         var res = csv.split('\n').join(',');
 
@@ -23,9 +30,9 @@ const CsvNode = ({ data, id }) => {
 
     // Handle a change in a text fields' input.
     const handleInputChange = useCallback((event) => {
-            // Update the data for this text fields' id.
-            let new_data = { 'text': event.target.value };
-            setDataPropsForNode(id, new_data);
+        // Update the data for this text fields' id.
+        let new_data = { 'text': event.target.value, 'fields': processCsv(event.target.value) };
+        setDataPropsForNode(id, new_data);
     }, [id, setDataPropsForNode]);
 
     const handKeyDown = useCallback((event) => {
@@ -57,7 +64,7 @@ const CsvNode = ({ data, id }) => {
         setContentDiv(<div className='csv-div' onClick={handleDivOnClick}>
             {html}
         </div>);
-        setCountText(<Text size="xs" style={{marginTop: '5px'}} color='blue' align='right'>{elements.length} elements</Text>);
+        setCountText(<Text size="xs" style={{ marginTop: '5px' }} color='blue' align='right'>{elements.length} elements</Text>);
     }, [data.text, handleDivOnClick]);
 
     // When isEditing changes, add input
@@ -93,7 +100,13 @@ const CsvNode = ({ data, id }) => {
             <NodeLabel title={data.title || 'CSV Node'} nodeId={id} icon={<IconCsv size="16px" />} />
             {csvInput}
             {contentDiv}
-            {countText? countText : <></>}
+            {countText ? countText : <></>}
+            <Handle
+                type="source"
+                position="right"
+                id="output"
+                style={{ top: "50%", background: '#555' }}
+            />
         </div>
     );
 };

From bb436b2eca23f39b85bf915a477798bdf40665c7 Mon Sep 17 00:00:00 2001
From: Priyan Vaithilingam <priyanmuthu@gmail.com>
Date: Tue, 9 May 2023 13:06:59 -0400
Subject: [PATCH 5/8] better badge

---
 chain-forge/src/CsvNode.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/chain-forge/src/CsvNode.js b/chain-forge/src/CsvNode.js
index 21de84e..b5ab32d 100644
--- a/chain-forge/src/CsvNode.js
+++ b/chain-forge/src/CsvNode.js
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Text } from '@mantine/core';
+import { Badge, Text } from '@mantine/core';
 import useStore from './store';
 import NodeLabel from './NodeLabelComponent'
 import { IconCsv } from '@tabler/icons-react';
@@ -55,7 +55,8 @@ const CsvNode = ({ data, id }) => {
         // generate a HTML code that highlights the elements
         const html = [];
         elements.forEach((e, idx) => {
-            html.push(<span key={idx} className="csv-element">{e}</span>);
+            html.push(<Badge color="orange" size="lg" radius="sm">{e}</Badge>)
+            // html.push(<span key={idx} className="csv-element">{e}</span>);
             if (idx < elements.length - 1) {
                 html.push(<span key={idx + 'comma'} className="csv-comma">,</span>);
             }

From c43a0da60a4eb8abaa927469ab1c8bcf9d852d79 Mon Sep 17 00:00:00 2001
From: Priyan Vaithilingam <priyanmuthu@gmail.com>
Date: Tue, 9 May 2023 13:51:37 -0400
Subject: [PATCH 6/8] minor change

---
 chain-forge/src/CsvNode.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/chain-forge/src/CsvNode.js b/chain-forge/src/CsvNode.js
index b5ab32d..16e2b4a 100644
--- a/chain-forge/src/CsvNode.js
+++ b/chain-forge/src/CsvNode.js
@@ -50,7 +50,7 @@ const CsvNode = ({ data, id }) => {
     // render csv div
     const renderCsvDiv = useCallback(() => {
         // Take the data.text as csv (only 1 row), and get individual elements
-        const elements = processCsv(data.text);
+        const elements = data.fields;
 
         // generate a HTML code that highlights the elements
         const html = [];

From 605da534a02ee324768f16857d4991d9407f08c1 Mon Sep 17 00:00:00 2001
From: Priyan Vaithilingam <priyanmuthu@gmail.com>
Date: Wed, 10 May 2023 12:10:00 -0400
Subject: [PATCH 7/8] better UI

---
 chain-forge/src/CsvNode.js | 13 +++++++++----
 chain-forge/src/index.css  | 15 ++++++++++-----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/chain-forge/src/CsvNode.js b/chain-forge/src/CsvNode.js
index 16e2b4a..ffffda8 100644
--- a/chain-forge/src/CsvNode.js
+++ b/chain-forge/src/CsvNode.js
@@ -47,6 +47,11 @@ const CsvNode = ({ data, id }) => {
         setIsEditing(true);
     }, []);
 
+    const handleOnBlur = useCallback((event) => {
+        setIsEditing(false);
+        setCsvInput(null);
+    }, []);
+
     // render csv div
     const renderCsvDiv = useCallback(() => {
         // Take the data.text as csv (only 1 row), and get individual elements
@@ -55,14 +60,14 @@ const CsvNode = ({ data, id }) => {
         // generate a HTML code that highlights the elements
         const html = [];
         elements.forEach((e, idx) => {
-            html.push(<Badge color="orange" size="lg" radius="sm">{e}</Badge>)
-            // html.push(<span key={idx} className="csv-element">{e}</span>);
+            // html.push(<Badge color="orange" size="lg" radius="sm">{e}</Badge>)
+            html.push(<span key={idx} className="csv-element">{e}</span>);
             if (idx < elements.length - 1) {
                 html.push(<span key={idx + 'comma'} className="csv-comma">,</span>);
             }
         });
 
-        setContentDiv(<div className='csv-div' onClick={handleDivOnClick}>
+        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>);
@@ -79,7 +84,7 @@ const CsvNode = ({ data, id }) => {
             var text_val = data.text || '';
             setCsvInput(
                 <div className="input-field" key={id}>
-                    <textarea id={id} name={id} className="text-field-fixed nodrag" rows="2" cols="40" defaultValue={text_val} onChange={handleInputChange} placeholder='Paste your CSV text here' onKeyDown={handKeyDown} />
+                    <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);
diff --git a/chain-forge/src/index.css b/chain-forge/src/index.css
index ea5c7a3..b16ecba 100644
--- a/chain-forge/src/index.css
+++ b/chain-forge/src/index.css
@@ -25,9 +25,10 @@ code {
 
 .csv-element {
   position: relative;
-  color: #ffffff;
-  background-color: #2cba6c;
+  color: #8a3e07;
+  background-color: #FFE8CC;
   font-size: inherit;
+  font-family: monospace;
   padding: .2em .4em;
   border: none;
   text-align: center;
@@ -45,7 +46,11 @@ code {
 
 .csv-div {
   width: 350px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.csv-input {
+  width: 350px;
+  height: 150px;
 }
\ No newline at end of file

From bf99a2add1e2692d330d480e76fceb8945bce182 Mon Sep 17 00:00:00 2001
From: Priyan Vaithilingam <priyanmuthu@gmail.com>
Date: Wed, 10 May 2023 13:08:23 -0400
Subject: [PATCH 8/8] better csv processing

---
 chain-forge/src/CsvNode.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/chain-forge/src/CsvNode.js b/chain-forge/src/CsvNode.js
index ffffda8..1d2c437 100644
--- a/chain-forge/src/CsvNode.js
+++ b/chain-forge/src/CsvNode.js
@@ -20,14 +20,23 @@ const CsvNode = ({ data, id }) => {
     }, []);
 
     const processCsv = (csv) => {
-        if (!csv) return [];
-        // Split the input string by rows, and merge
-        var res = csv.split('\n').join(',');
-
-        // remove all the empty or whitespace-only elements
-        return res.split(',').map(e => e.trim()).filter(e => e.length > 0);
+        var matches = csv.match(/(\s*"[^"]+"\s*|\s*[^,]+|,)(?=,|$)/g);
+        for (var n = 0; n < matches.length; ++n) {
+            matches[n] = matches[n].trim();
+            if (matches[n] == ',') matches[n] = '';
+        }
+        return matches.map(e => e.trim()).filter(e => e.length > 0);
     }
 
+    // const processCsv = (csv) => {
+    //     if (!csv) return [];
+    //     // Split the input string by rows, and merge
+    //     var res = csv.split('\n').join(',');
+
+    //     // remove all the empty or whitespace-only elements
+    //     return res.split(',').map(e => e.trim()).filter(e => e.length > 0);
+    // }
+
     // Handle a change in a text fields' input.
     const handleInputChange = useCallback((event) => {
         // Update the data for this text fields' id.