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] 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