1 files changed, 37 insertions, 7 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 19881f4d2..d3117da22 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -763,6 +763,29 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         this._fields = newFields;
     }
 
+    @action removeField = (field: {title: string, type: string, id: number}) => {
+        if (this._dataViz?.axes.includes(field.title)) {
+            this._dataViz.selectAxes(this._dataViz.axes.filter(col => col !== field.title));
+        } else {
+            const toRemove = this._fields.filter(f => f.id === field.id);
+            if (!toRemove) return;
+
+            if (toRemove.length > 1) {
+                while (toRemove.length > 1) {
+                    toRemove.pop();
+                }
+            }
+
+            if (this._fields.length === 1) {
+                this._fields = []  
+            } else {
+                console.log(this._fields)
+                this._fields.splice(this._fields.indexOf(toRemove[0]), 1);
+                console.log(this._fields)
+            }
+        }   
+    }
+
     get dashboardContents(){
         return (
         <div className='docCreatorMenu-dashboard-view'>
@@ -771,16 +794,23 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
                 <FontAwesomeIcon icon='plus'/>
             </button>
             </div>
-            {this.fieldsInfos.map(field => 
-                <div className='field-panel'>
+            {this.fieldsInfos.map((field, index) => 
+                <div className='field-panel' id={`${index}`}>
                     <div className='properties-wrapper'>
-                        <input className='field-property-container' defaultValue={field.title} placeholder={'Enter title'} style={{width: field.title === '' ? '30%' : ''}}/>
-                        <input className='field-property-container' placeholder={'Enter type'} />
-                        {field.type === 'Text' ? 
-                        <input className='field-property-container' placeholder={'Enter description'} /> : null}
+                        <input className='field-property-container' id={`${Math.random() * 100}`} defaultValue={field.title} placeholder={'Enter title'} style={{width: field.title === '' ? '30%' : ''}}/>
+                        <div className='field-type-selection-container'>
+                            <span>Type:</span><span>&nbsp;</span>
+                            <span className='type-display'>{field.type ? field.type === 'text' ? 'Text' : 'File' : ''}</span>
+                            <div className='bubbles'>
+                                <input className='bubble' type="radio" name="type" onClick={() => {field.type = 'text'; this.forceUpdate()}}/> 
+                                <div className='text'>Text</div>
+                                <input className='bubble' type="radio" name="type" onClick={() => {field.type = 'visual'; this.forceUpdate()}}/> 
+                                <div className='text'>File</div>
+                            </div>
+                        </div>
                     </div>
                     <textarea className='field-description-container' placeholder={'Enter description to enhance template generation'} />
-                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {console.log(this._fields); this._fields = this._fields.splice(this._fields.indexOf(field), 1); console.log(this._fields); this.forceUpdate()}))}>
+                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
                         <FontAwesomeIcon icon='trash'/>
                     </button>
                 </div>