From 5408f8328bd3a34f17cfd9fe5a880beb28f36d03 Mon Sep 17 00:00:00 2001
From: Keeyan Ghoreshi <kghoreshi@mitre.org>
Date: Fri, 3 Aug 2018 14:24:39 -0400
Subject: [PATCH 1/8] Changed "Enter Value" to "Add Remarks"

---
 src/components/editor/State.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/editor/State.css b/src/components/editor/State.css
index face804..452df23 100644
--- a/src/components/editor/State.css
+++ b/src/components/editor/State.css
@@ -60,11 +60,11 @@ span.editable-text:empty {
 }
 
 span.editable-text:empty:after {
-  content: 'Enter value';
+  content: 'Add Remarks';
 }
 
-span.editable-text > :empty:after {
-  content: 'Enter value';
+span.editable-text > :first-child:empty:after {
+  content: 'Add Remarks';
 }
 
 .section {

From d6466d487552637a364d72b38f6743024195ba99 Mon Sep 17 00:00:00 2001
From: Keeyan Ghoreshi <kghoreshi@mitre.org>
Date: Mon, 6 Aug 2018 13:11:23 -0400
Subject: [PATCH 2/8] changed text area behavior to avoid empty spans being
 added with breaks

---
 src/components/editor/State.css   | 22 ++++++++++++--
 src/components/editor/State.js    |  9 +++---
 src/components/editor/TextArea.js | 49 +++++++++++++++++++++++++++++++
 3 files changed, 74 insertions(+), 6 deletions(-)
 create mode 100644 src/components/editor/TextArea.js

diff --git a/src/components/editor/State.css b/src/components/editor/State.css
index 452df23..e87a24a 100644
--- a/src/components/editor/State.css
+++ b/src/components/editor/State.css
@@ -51,6 +51,15 @@ textarea {
   padding-right: .2em;
 }
 
+.remarks-text {
+  font-style: italic;
+  text-decoration: underline !important;
+  cursor: text;
+  color: #336699 !important;
+  padding-left: .2em;
+  padding-right: .2em;
+}
+
 .editable-error {
   color: #ff3300 !important;
 }
@@ -59,14 +68,22 @@ span.editable-text:empty {
   color: #ff3300 !important;
 }
 
-span.editable-text:empty:after {
+span.remarks-text:empty:after {
   content: 'Add Remarks';
 }
 
-span.editable-text > :first-child:empty:after {
+span.remarks-text > :empty:after {
   content: 'Add Remarks';
 }
 
+span.editable-text:empty:after {
+  content: 'Enter Value';
+}
+
+span.editable-text > :empty:after {
+  content: 'Enter Value';
+}
+
 .section {
   position: relative;
   padding-left: 10px;
@@ -91,3 +108,4 @@ span.editable-text > :first-child:empty:after {
 .warning {
   color: #ff3300;
 }
+
diff --git a/src/components/editor/State.js b/src/components/editor/State.js
index 3a2f644..150d91e 100644
--- a/src/components/editor/State.js
+++ b/src/components/editor/State.js
@@ -12,7 +12,7 @@ import ConditionalEditor from './Conditional';
 import Transition from './Transition';
 import { getTemplate } from '../../templates/Templates';
 import { BasicTutorial, EditTutorial } from '../../templates/Tutorial';
-
+import TextArea from './TextArea'
 
 import './State.css';
 
@@ -123,7 +123,6 @@ class StateEditor extends Component<Props> {
 
     let remarks = this.props.state.remarks ||"";
     remarks = Array.isArray(remarks)? remarks.join("\n"): remarks;
-
     const transitionType = (this.props.state.transition||{}).type;
     return (
         <div className="State">
@@ -133,8 +132,8 @@ class StateEditor extends Component<Props> {
           <h3><RIEInput className='editable-text' className='editable-text' propName={'name'} value={this.props.state.name} change={this.props.renameNode} /></h3>
           State Type: <RIESelect className='editable-text' className='editable-text' value={{id: this.props.state.type, text: this.props.state.type}} propName='type'change={this.props.changeType} options={typeOptions}/>
           <hr/>
-          <RIETextArea className='editable-text' value={remarks} propName="remarks" change={this.updateRemarks} />
-          <br/>
+          <TextArea className='remarks-text' value={remarks} propName="remarks" change={this.updateRemarks} />
+          <br />
           <hr/>
           <div className="State-Editor">
             {this.renderStateType()}
@@ -436,6 +435,8 @@ class ConditionOnset extends Component<Props> {
         <br />
         {this.renderAssignToAttribute()}
         <div className='section'>
+          Value Set: <RIEInput className='value-set-text editable-text' value={state.value_set || ''} propName={'value_set'} change={this.props.onChange('value_set')} />
+          <br />
           Codes
           <br />
           <Codes codes={state.codes} system={"SNOMED-CT"} onChange={this.props.onChange('codes')} />
diff --git a/src/components/editor/TextArea.js b/src/components/editor/TextArea.js
new file mode 100644
index 0000000..b7e44dc
--- /dev/null
+++ b/src/components/editor/TextArea.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import RIEStatefulBase from 'riek/lib/RIEStatefulBase';
+export default class TextArea extends RIEStatefulBase {
+    keyDown = (event) => {
+        if (event.keyCode === 27) { this.cancelEditing() }     // Escape
+    };
+
+    renderEditingComponent = () => {
+        return <textarea
+            rows={this.props.rows}
+            cols={this.props.cols}
+            disabled={this.state.loading}
+            className={this.makeClassString()}
+            defaultValue={this.props.value}
+            onInput={this.textChanged}
+            onBlur={this.finishEditing}
+            ref="input"
+            onKeyDown={this.keyDown}
+            {...this.props.editProps} />;
+    };
+
+    renderNormalComponent = () => {
+        const value = this.state.newValue || this.props.value
+        const spans_and_brs = []
+        var anySpan = false
+        let i = 0
+        value.split("\n").map(line => {
+            if(line.length > 0){
+                anySpan = true
+                spans_and_brs.push(<span key={i}>{line}</span>)
+            }
+          spans_and_brs.push(<br key={i+1} />)
+          i += 2
+        });
+
+        spans_and_brs.pop() // remove last br tag
+        if(!anySpan){
+            spans_and_brs.length=0
+            spans_and_brs.unshift(<span key="placeholder">{''}</span>)
+        }
+        return <span
+            tabIndex="0"
+            className={this.makeClassString()}
+            onFocus={this.startEditing}
+            onClick={this.startEditing}
+            {...this.props.defaultProps}>{spans_and_brs}</span>;
+    };
+}
\ No newline at end of file

From 851316fc20c7f76aec87485dea761057b2420b70 Mon Sep 17 00:00:00 2001
From: Keeyan Ghoreshi <kghoreshi@mitre.org>
Date: Mon, 6 Aug 2018 13:25:50 -0400
Subject: [PATCH 3/8] removed value set from state

---
 src/components/editor/State.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/editor/State.js b/src/components/editor/State.js
index 150d91e..9dabaf5 100644
--- a/src/components/editor/State.js
+++ b/src/components/editor/State.js
@@ -435,8 +435,6 @@ class ConditionOnset extends Component<Props> {
         <br />
         {this.renderAssignToAttribute()}
         <div className='section'>
-          Value Set: <RIEInput className='value-set-text editable-text' value={state.value_set || ''} propName={'value_set'} change={this.props.onChange('value_set')} />
-          <br />
           Codes
           <br />
           <Codes codes={state.codes} system={"SNOMED-CT"} onChange={this.props.onChange('codes')} />

From 5a29adeb8c7073bbbe2802b7be1f92af24d79021 Mon Sep 17 00:00:00 2001
From: Keeyan Ghoreshi <kghoreshi@mitre.org>
Date: Mon, 6 Aug 2018 13:40:45 -0400
Subject: [PATCH 4/8] fixed small padding issue

---
 src/components/editor/State.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/editor/State.css b/src/components/editor/State.css
index e87a24a..8b45f8a 100644
--- a/src/components/editor/State.css
+++ b/src/components/editor/State.css
@@ -51,11 +51,12 @@ textarea {
   padding-right: .2em;
 }
 
-.remarks-text {
+.remarks-text span {
   font-style: italic;
   text-decoration: underline !important;
   cursor: text;
   color: #336699 !important;
+  position:relative;
   padding-left: .2em;
   padding-right: .2em;
 }

From 0959def562487b6e21d026cfdcbd107c29299c3a Mon Sep 17 00:00:00 2001
From: Keeyan Ghoreshi <kghoreshi@mitre.org>
Date: Fri, 10 Aug 2018 13:51:26 -0400
Subject: [PATCH 5/8] Made stylistic changes and changed spans to divs

---
 src/components/editor/State.css   | 10 +++-------
 src/components/editor/State.js    |  3 +--
 src/components/editor/TextArea.js | 28 ++++++++++++----------------
 3 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/src/components/editor/State.css b/src/components/editor/State.css
index 8b45f8a..5a589f3 100644
--- a/src/components/editor/State.css
+++ b/src/components/editor/State.css
@@ -51,7 +51,7 @@ textarea {
   padding-right: .2em;
 }
 
-.remarks-text span {
+.remarks-text div {
   font-style: italic;
   text-decoration: underline !important;
   cursor: text;
@@ -69,12 +69,8 @@ span.editable-text:empty {
   color: #ff3300 !important;
 }
 
-span.remarks-text:empty:after {
-  content: 'Add Remarks';
-}
-
-span.remarks-text > :empty:after {
-  content: 'Add Remarks';
+span.remarks-text div:empty{
+  height:1.5em;
 }
 
 span.editable-text:empty:after {
diff --git a/src/components/editor/State.js b/src/components/editor/State.js
index 9dabaf5..66b7bf7 100644
--- a/src/components/editor/State.js
+++ b/src/components/editor/State.js
@@ -132,8 +132,7 @@ class StateEditor extends Component<Props> {
           <h3><RIEInput className='editable-text' className='editable-text' propName={'name'} value={this.props.state.name} change={this.props.renameNode} /></h3>
           State Type: <RIESelect className='editable-text' className='editable-text' value={{id: this.props.state.type, text: this.props.state.type}} propName='type'change={this.props.changeType} options={typeOptions}/>
           <hr/>
-          <TextArea className='remarks-text' value={remarks} propName="remarks" change={this.updateRemarks} />
-          <br />
+          <TextArea className='remarks-text' value={remarks} propName="remarks" change={this.updateRemarks} defaultText={"Add Remarks"}/>
           <hr/>
           <div className="State-Editor">
             {this.renderStateType()}
diff --git a/src/components/editor/TextArea.js b/src/components/editor/TextArea.js
index b7e44dc..56a3301 100644
--- a/src/components/editor/TextArea.js
+++ b/src/components/editor/TextArea.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import RIEStatefulBase from 'riek/lib/RIEStatefulBase';
+import { totalmem } from 'os';
 export default class TextArea extends RIEStatefulBase {
     keyDown = (event) => {
         if (event.keyCode === 27) { this.cancelEditing() }     // Escape
@@ -22,28 +23,23 @@ export default class TextArea extends RIEStatefulBase {
 
     renderNormalComponent = () => {
         const value = this.state.newValue || this.props.value
-        const spans_and_brs = []
-        var anySpan = false
-        let i = 0
-        value.split("\n").map(line => {
-            if(line.length > 0){
-                anySpan = true
-                spans_and_brs.push(<span key={i}>{line}</span>)
-            }
-          spans_and_brs.push(<br key={i+1} />)
-          i += 2
-        });
+        const spansAndBrs = []
 
-        spans_and_brs.pop() // remove last br tag
-        if(!anySpan){
-            spans_and_brs.length=0
-            spans_and_brs.unshift(<span key="placeholder">{''}</span>)
+        // The regex just replaces whitespace (tabs, newline, space) 
+        // to check if the remarks section only has whitespace in it.
+        if(!value.replace(/\s/g,"").length){
+            spansAndBrs.push(<div key="placeholder">{this.props.defaultText}</div>)
+        }else{
+            value.split("\n").forEach(line => {
+                spansAndBrs.push(<div key={spansAndBrs.length}>{line}</div>)       
+            });
         }
+
         return <span
             tabIndex="0"
             className={this.makeClassString()}
             onFocus={this.startEditing}
             onClick={this.startEditing}
-            {...this.props.defaultProps}>{spans_and_brs}</span>;
+            {...this.props.defaultProps}>{spansAndBrs}</span>;
     };
 }
\ No newline at end of file

From 9f6eec3da7a8de8d656eec6d57c7e7a6b7f74c68 Mon Sep 17 00:00:00 2001
From: Keeyan Ghoreshi <kghoreshi@mitre.org>
Date: Fri, 10 Aug 2018 14:01:41 -0400
Subject: [PATCH 6/8] removed unnecessary import

---
 src/components/editor/TextArea.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/editor/TextArea.js b/src/components/editor/TextArea.js
index 56a3301..2c8e0fd 100644
--- a/src/components/editor/TextArea.js
+++ b/src/components/editor/TextArea.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import RIEStatefulBase from 'riek/lib/RIEStatefulBase';
-import { totalmem } from 'os';
 export default class TextArea extends RIEStatefulBase {
     keyDown = (event) => {
         if (event.keyCode === 27) { this.cancelEditing() }     // Escape

From ea8f48b790bb5938a995b12bdbc912543382d4fd Mon Sep 17 00:00:00 2001
From: Keeyan Ghoreshi <kghoreshi@mitre.org>
Date: Thu, 16 Aug 2018 15:24:11 -0400
Subject: [PATCH 7/8] changed remarks to use a blank entry in array as new
 lines

---
 src/components/editor/State.js    | 17 ++++++++++++++--
 src/components/editor/TextArea.js | 34 ++++++++++++++++++++++++++++---
 2 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/components/editor/State.js b/src/components/editor/State.js
index 66b7bf7..612be2e 100644
--- a/src/components/editor/State.js
+++ b/src/components/editor/State.js
@@ -103,7 +103,20 @@ class StateEditor extends Component<Props> {
   }
 
   updateRemarks = (el:any) => {
-    const remarks = el.remarks? el.remarks.split("\n") : null;
+
+    // Need to make sure new lines get represented correctly
+    // when input from the remarks editor.
+    const editedRemarks = el.remarks.split("\n").reduce(((p,d,i)=>{
+      if(d.length>0){
+        return [...p,d,""];
+
+      }else{
+        return [...p,d];
+      }
+
+    }),[]);
+    console.log(editedRemarks);
+    let remarks = el.remarks? editedRemarks : null;
     this.props.onChange(`states.${this.props.state.name}.remarks`)({remarks:{id:remarks}});
   }
 
@@ -129,7 +142,7 @@ class StateEditor extends Component<Props> {
           <div className='Editor-panel-title'> 
             State Editor
           </div>
-          <h3><RIEInput className='editable-text' className='editable-text' propName={'name'} value={this.props.state.name} change={this.props.renameNode} /></h3>
+          <h3><RIEInput className='editable-text' className='editable-text' propName={'name'} value={this.props.state.name} change={this.renameNode} /> </h3>
           State Type: <RIESelect className='editable-text' className='editable-text' value={{id: this.props.state.type, text: this.props.state.type}} propName='type'change={this.props.changeType} options={typeOptions}/>
           <hr/>
           <TextArea className='remarks-text' value={remarks} propName="remarks" change={this.updateRemarks} defaultText={"Add Remarks"}/>
diff --git a/src/components/editor/TextArea.js b/src/components/editor/TextArea.js
index 2c8e0fd..bba4f73 100644
--- a/src/components/editor/TextArea.js
+++ b/src/components/editor/TextArea.js
@@ -7,12 +7,27 @@ export default class TextArea extends RIEStatefulBase {
     };
 
     renderEditingComponent = () => {
+        var toggle = false;
+
+        const uneditedRemarks = this.props.value.split("\n").reduce(((p,d,i)=>{
+            if(d.length>0){
+                toggle = true;
+              return [...p,d];
+            }else if(toggle){
+                toggle=false;
+                return [...p];
+            }else{
+                return [...p,d]
+
+            }
+          }),[]).join("\n");
+
         return <textarea
             rows={this.props.rows}
             cols={this.props.cols}
             disabled={this.state.loading}
             className={this.makeClassString()}
-            defaultValue={this.props.value}
+            defaultValue={uneditedRemarks}
             onInput={this.textChanged}
             onBlur={this.finishEditing}
             ref="input"
@@ -29,9 +44,22 @@ export default class TextArea extends RIEStatefulBase {
         if(!value.replace(/\s/g,"").length){
             spansAndBrs.push(<div key="placeholder">{this.props.defaultText}</div>)
         }else{
-            value.split("\n").forEach(line => {
-                spansAndBrs.push(<div key={spansAndBrs.length}>{line}</div>)       
+            let aggregateLine = "";
+            const lines = this.props.value.split("\n");
+            lines.forEach(line => {
+                if(line.length===0){
+                    // Empty lines get turned into new lines
+                    spansAndBrs.push(<div key={spansAndBrs.length}>{aggregateLine}</div>)
+                    aggregateLine = "";       
+                }
+                aggregateLine += line;      
             });
+
+            if(aggregateLine.length > 0){
+                // Push the final aggregate line
+                spansAndBrs.push(<div key={spansAndBrs.length}>{aggregateLine}</div>)
+            }
+
         }
 
         return <span

From 1fda6991f667f602941816c04c5f6f2526ce5baa Mon Sep 17 00:00:00 2001
From: Keeyan <keeyan.ghoreshi@uconn.edu>
Date: Thu, 16 Aug 2018 15:26:57 -0400
Subject: [PATCH 8/8] revert errant unrelated change

---
 src/components/editor/State.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/editor/State.js b/src/components/editor/State.js
index 612be2e..fe7b6c1 100644
--- a/src/components/editor/State.js
+++ b/src/components/editor/State.js
@@ -142,7 +142,7 @@ class StateEditor extends Component<Props> {
           <div className='Editor-panel-title'> 
             State Editor
           </div>
-          <h3><RIEInput className='editable-text' className='editable-text' propName={'name'} value={this.props.state.name} change={this.renameNode} /> </h3>
+          <h3><RIEInput className='editable-text' className='editable-text' propName={'name'} value={this.props.state.name} change={this.props.renameNode} /> </h3>
           State Type: <RIESelect className='editable-text' className='editable-text' value={{id: this.props.state.type, text: this.props.state.type}} propName='type'change={this.props.changeType} options={typeOptions}/>
           <hr/>
           <TextArea className='remarks-text' value={remarks} propName="remarks" change={this.updateRemarks} defaultText={"Add Remarks"}/>