From e7688ad974434c0afbb56a460ee4c1b7e5b15963 Mon Sep 17 00:00:00 2001
From: Forrest Li <forrest.li@kitware.com>
Date: Mon, 30 Apr 2018 12:04:27 -0400
Subject: [PATCH 1/4] fix(EditableList): Support column style classes

---
 src/widgets/EditableList.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/widgets/EditableList.js b/src/widgets/EditableList.js
index 94c1c81..eea61d4 100644
--- a/src/widgets/EditableList.js
+++ b/src/widgets/EditableList.js
@@ -15,7 +15,11 @@ function EditableList(props) {
 
       const cellKey = `${col.dataKey}::${datum.key}`;
 
-      return <td key={cellKey}>{content}</td>;
+      return (
+        <td className={col.classes} key={cellKey}>
+          {content}
+        </td>
+      );
     });
 
     return (

From b48b2a8a227fe118ad2a66029fc74807981bc84a Mon Sep 17 00:00:00 2001
From: Forrest Li <forrest.li@kitware.com>
Date: Mon, 30 Apr 2018 11:56:51 -0400
Subject: [PATCH 2/4] feat(RodEditor): Add initial rod editor

---
 src/simput/RodEditor.js   | 125 ++++++++++++++++++++++++++++++++++++++
 src/simput/RodEditor.mcss |   3 +
 src/simput/index.js       |  15 +++--
 3 files changed, 139 insertions(+), 4 deletions(-)
 create mode 100644 src/simput/RodEditor.js
 create mode 100644 src/simput/RodEditor.mcss

diff --git a/src/simput/RodEditor.js b/src/simput/RodEditor.js
new file mode 100644
index 0000000..f2c729a
--- /dev/null
+++ b/src/simput/RodEditor.js
@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Rod2DPreview from '../widgets/Rod2DPreview';
+import EditableList from '../widgets/EditableList';
+
+import style from './RodEditor.mcss';
+
+export default class RodEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+
+    this.onLengthChange = this.onLengthChange.bind(this);
+    this.addLayer = this.addLayer.bind(this);
+    this.delLayer = this.delLayer.bind(this);
+  }
+
+  onLengthChange(layer, value) {
+    const data = this.props.data;
+    if (data.value && data.value.length) {
+      const stack = data.value[0].stack;
+      const newValue = Number(value);
+      const totalLength = Number(this.props.viewData.rodInfo.height.value[0]);
+      const currentLength = stack.reduce((t, l) => t + l.length, 0);
+      const newLength = currentLength - stack[layer.key].length + newValue;
+
+      if (newLength <= totalLength) {
+        stack[layer.key].length = newValue;
+        this.props.onChange(data);
+      }
+    }
+  }
+
+  addLayer(idx) {
+    const data = this.props.data;
+    if (data.value && data.value.length) {
+      const stack = data.value[0].stack;
+      const afterIdx = idx + 1;
+      stack.splice(afterIdx, 0, {
+        color: 'blue',
+        type: 'gap',
+        length: 0,
+      });
+
+      this.props.onChange(data);
+    }
+  }
+
+  delLayer(idx) {
+    const data = this.props.data;
+    if (data.value && data.value.length) {
+      const stack = data.value[0].stack;
+      stack.splice(idx, 1);
+
+      this.props.onChange(data);
+    }
+  }
+
+  render() {
+    const columns = [
+      {
+        key: 'color',
+        dataKey: 'color',
+        label: 'Color',
+      },
+      {
+        key: 'type',
+        dataKey: 'label',
+        label: 'Layer Type',
+      },
+      {
+        key: 'length',
+        dataKey: 'length',
+        label: 'Length',
+        classes: style.centeredCell,
+        render: (value, layer) => (
+          <input
+            type="number"
+            min="0"
+            step="1"
+            value={layer.length}
+            onChange={(e) => this.onLengthChange(layer, e.target.value)}
+          />
+        ),
+      },
+    ];
+
+    let items = [];
+    if (this.props.data.value && this.props.data.value.length) {
+      items = this.props.data.value[0].stack.map((layer, idx) =>
+        Object.assign({ key: idx }, layer)
+      );
+    }
+
+    const totalLength = Number(this.props.viewData.rodInfo.height.value[0]);
+
+    return (
+      <div>
+        <Rod2DPreview stack={items} totalLength={totalLength} />
+        <EditableList
+          columns={columns}
+          data={items}
+          onAdd={this.addLayer}
+          onDelete={this.delLayer}
+        />
+      </div>
+    );
+  }
+}
+
+RodEditor.propTypes = {
+  data: PropTypes.object.isRequired,
+  // help: PropTypes.string,
+  // name: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  // show: PropTypes.func.isRequired,
+  // ui: PropTypes.object.isRequired,
+  viewData: PropTypes.object.isRequired,
+};
+
+RodEditor.defaultProps = {
+  // name: '',
+  // help: '',
+};
diff --git a/src/simput/RodEditor.mcss b/src/simput/RodEditor.mcss
new file mode 100644
index 0000000..9037161
--- /dev/null
+++ b/src/simput/RodEditor.mcss
@@ -0,0 +1,3 @@
+.centeredCell {
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/simput/index.js b/src/simput/index.js
index d2f6b66..5a2f484 100644
--- a/src/simput/index.js
+++ b/src/simput/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import CellEditor from './CellEditor';
-import Rod2DPreview from '../widgets/Rod2DPreview';
+import RodEditor from './RodEditor';
 
 function registerLocalEditors(Simput) {
   if (Simput && Simput.updateWidgetMapping) {
-    Simput.updateWidgetMapping('RodCellEditor', (prop, viewData, onChange) => (
+    Simput.updateWidgetMapping('CellEditor', (prop, viewData, onChange) => (
       <CellEditor
         key={prop.data.id}
         data={prop.data}
@@ -14,8 +14,15 @@ function registerLocalEditors(Simput) {
         onChange={onChange || prop.onChange}
       />
     ));
-    Simput.updateWidgetMapping('RodPreview', (prop, viewData, onChange) => (
-      <Rod2DPreview key={prop.data.id} />
+    Simput.updateWidgetMapping('RodEditor', (prop, viewData, onChange) => (
+      <RodEditor
+        key={prop.data.id}
+        data={prop.data}
+        ui={prop.ui}
+        viewData={viewData}
+        show={prop.show}
+        onChange={onChange || prop.onChange}
+      />
     ));
   }
 }

From d0af4b0b80b984e63b0c4bb3de90dc1715f4fd77 Mon Sep 17 00:00:00 2001
From: Forrest Li <forrest.li@kitware.com>
Date: Mon, 30 Apr 2018 12:05:08 -0400
Subject: [PATCH 3/4] fix(Rod2DPreview): Force a width on remaining bar

Fixes issue where a zero-length layer would take on a default non-zero width.
---
 src/widgets/Rod2DPreview.js | 5 ++++-
 src/widgets/Rod3DPreview.js | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/widgets/Rod2DPreview.js b/src/widgets/Rod2DPreview.js
index 1688e68..9aaf5a7 100644
--- a/src/widgets/Rod2DPreview.js
+++ b/src/widgets/Rod2DPreview.js
@@ -23,7 +23,10 @@ export default function Rod2DPreview(props) {
               }}
             />
           ))}
-          <td className={style.last} />
+          <td
+            className={style.last}
+            style={{ width: `${100 * remaining / props.totalLength}%` }}
+          />
         </tr>
         <tr className={style.labels}>
           {props.stack.map(({ label }, i) => (
diff --git a/src/widgets/Rod3DPreview.js b/src/widgets/Rod3DPreview.js
index b76806a..5c514b0 100644
--- a/src/widgets/Rod3DPreview.js
+++ b/src/widgets/Rod3DPreview.js
@@ -1 +1 @@
-Rod3DPreview.js
\ No newline at end of file
+Rod3DPreview.js;

From 5f9a8a9bc03d47f278fe5db8af062ab3eeec421c Mon Sep 17 00:00:00 2001
From: Forrest Li <forrest.li@kitware.com>
Date: Mon, 30 Apr 2018 13:28:29 -0400
Subject: [PATCH 4/4] fix(RodEditor): Add cell/layer selection

---
 src/simput/RodEditor.js   | 37 +++++++++++++++++++++++++++++++------
 src/simput/RodEditor.mcss |  4 ++++
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/simput/RodEditor.js b/src/simput/RodEditor.js
index f2c729a..23ec00a 100644
--- a/src/simput/RodEditor.js
+++ b/src/simput/RodEditor.js
@@ -11,11 +11,24 @@ export default class RodEditor extends React.Component {
     super(props);
     this.state = {};
 
+    this.onCellChange = this.onCellChange.bind(this);
     this.onLengthChange = this.onLengthChange.bind(this);
     this.addLayer = this.addLayer.bind(this);
     this.delLayer = this.delLayer.bind(this);
   }
 
+  onCellChange(layer, value) {
+    const data = this.props.data;
+    const cells = this.props.ui.domain;
+    if (data.value && data.value.length) {
+      const stack = data.value[0].stack;
+      if (value in cells) {
+        stack[layer.key].label = value;
+        this.props.onChange(data);
+      }
+    }
+  }
+
   onLengthChange(layer, value) {
     const data = this.props.data;
     if (data.value && data.value.length) {
@@ -34,12 +47,13 @@ export default class RodEditor extends React.Component {
 
   addLayer(idx) {
     const data = this.props.data;
-    if (data.value && data.value.length) {
+    const cells = Object.keys(this.props.ui.domain);
+    if (data.value && data.value.length && cells.length) {
       const stack = data.value[0].stack;
       const afterIdx = idx + 1;
       stack.splice(afterIdx, 0, {
         color: 'blue',
-        type: 'gap',
+        label: cells[0],
         length: 0,
       });
 
@@ -58,6 +72,8 @@ export default class RodEditor extends React.Component {
   }
 
   render() {
+    const cells = Object.keys(this.props.ui.domain);
+
     const columns = [
       {
         key: 'color',
@@ -65,9 +81,18 @@ export default class RodEditor extends React.Component {
         label: 'Color',
       },
       {
-        key: 'type',
-        dataKey: 'label',
-        label: 'Layer Type',
+        key: 'cell',
+        dataKey: 'cell',
+        label: 'Cell/Layer Type',
+        classes: style.centeredCell,
+        render: (cellName, layer) => (
+          <select
+            className={style.cellSelect}
+            onChange={(e) => this.onCellChange(layer, e.target.value)}
+          >
+            {cells.map((name) => <option key={name}>{name}</option>)}
+          </select>
+        ),
       },
       {
         key: 'length',
@@ -115,7 +140,7 @@ RodEditor.propTypes = {
   // name: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   // show: PropTypes.func.isRequired,
-  // ui: PropTypes.object.isRequired,
+  ui: PropTypes.object.isRequired,
   viewData: PropTypes.object.isRequired,
 };
 
diff --git a/src/simput/RodEditor.mcss b/src/simput/RodEditor.mcss
index 9037161..6c97c8c 100644
--- a/src/simput/RodEditor.mcss
+++ b/src/simput/RodEditor.mcss
@@ -1,3 +1,7 @@
 .centeredCell {
     text-align: center;
+}
+
+.cellSelect {
+    width: 100%;
 }
\ No newline at end of file