work on fields dashboard

3 files changed, 57 insertions, 23 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 808bc182a..eaf5c1758 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -63,7 +63,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable _marqueeing: number[] | undefined = undefined;
     @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
     @observable _specialHighlightedRow: number | undefined = undefined;
-    @observable _GPTSummary: ObservableMap<string, string> | undefined = undefined;
+    @observable GPTSummary: ObservableMap<string, string> | undefined = undefined;
+    @observable fieldTypes: ObservableMap<string, string> = new ObservableMap();
     @observable _GPTLoading: boolean = false;
 
     constructor(props: FieldViewProps) {
@@ -145,6 +146,18 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._specialHighlightedRow = row;
     }
 
+    @action setFieldType = (field: string, type: string) => {
+        this.fieldTypes?.set(field, type);
+    }
+
+    getFieldType = (field: string): string => {
+        return this.fieldTypes?.get(field) ?? '';
+    }
+
+    getFieldDescription = (field: string): string => {
+        return this.GPTSummary?.get(field) ?? '';
+    }
+
     @action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
     restoreView = (data: Doc) => {
         // const changedView = data.config_dataViz && this.dataVizView !== data.config_dataViz && (this.layoutDoc._dataViz = data.config_dataViz);
@@ -516,10 +529,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             const res = await gptAPICall(prompt, GPTCallType.VIZSUM);
 
             if (res) {
-                this._GPTSummary = new ObservableMap();
+                this.GPTSummary = new ObservableMap();
                 const descs: {[col: string]: string} = JSON.parse(res);
                 for (const [key, val] of Object.entries(descs)) {
-                    this._GPTSummary.set(key, val);
+                    this.GPTSummary.set(key, val);
                 }
 
                 console.log(res, descs);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 9b3a02e0f..c93798979 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -783,11 +783,19 @@
                 background-color: rgb(40, 40, 40);
                 border: 1px solid rgb(100, 100, 100);
                 border-radius: 3px;
-                width: 30%;
+                width: 31%;
                 height: 25px;
                 padding-left: 3px;
                 color: whitesmoke;
 
+                .placeholder {
+                    color: gray;
+                }
+
+                &:hover .placeholder {
+                    display: none;
+                }
+
                 .bubbles {
                     display: none;
                 }
@@ -797,10 +805,6 @@
                     margin-bottom: 5px;
                 }
 
-                &:hover {
-                    width: 30% + 8;
-                }
-
                 &:hover .bubbles {
                     display: flex;
                     flex-direction: row;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 3218b9765..50d6b7fe0 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -50,6 +50,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
     @observable _templateDocs: Doc[] = [];
     @observable _selectedTemplate: Doc | undefined = undefined;
     @observable _fields: {title: string, type: string, id: number}[] = [];
+    @observable _selectedCols: {title: string, type: string, id: number}[] | undefined = [];
 
     @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns?: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0};
     @observable _layoutPreview: boolean = true;
@@ -133,7 +134,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
     }
 
     @computed get fieldsInfos(): {title: string, type: string, id: number}[] {
-        return this.selectedFields.map(field => {return {title: field, type: '', id: Math.random() * 100000}}).concat(this._fields);
+        return this.selectedFields.map(field => {return {title: field, type: this._dataViz?.getFieldType(field) ?? '', id: Math.random() * 100000}}).concat(this._fields);
     }
 
     @computed get canMakeDocs(){
@@ -195,7 +196,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         this._disposers.templates = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon));
         this._disposers.gpt = reaction(() => this._GPTTemplates.slice(), (docs) => docs.map(this.getIcon));
         //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')})
-        this._disposers.lightbox = reaction(() => LightboxView.LightboxDoc(), doc => { doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu()})
+        this._disposers.lightbox = reaction(() => LightboxView.LightboxDoc(), doc => { doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu()});
+        this._disposers.fields = reaction(() => this._dataViz?.axes, cols => this._selectedCols = cols?.map(col => { return {title: col, type: '', id: Math.random() * 100000}}))
     }
 
     componentWillUnmount() {
@@ -207,6 +209,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
     updateIcons = (docs: Doc[]) => { docs.map(this.getIcon) }
 
     @action
+    updateSelectedCols = (cols: string[]) => {
+        this._selectedCols
+    }
+
+    @action
     toggleDisplay = (x: number, y: number) => {
         if (this._shouldDisplay) {
             this._shouldDisplay = false;
@@ -414,7 +421,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         // mainCollection.addDocument(doc);
         //this._dataViz?.getRandomSample();
-        console.log(this._dataViz?._GPTSummary?.get('IMG'))
+        console.log(this._dataViz?.GPTSummary?.get('IMG'))
     }
 
     get templatesPreviewContents(){
@@ -788,6 +795,15 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         }   
     }
 
+    setFieldType = (field: {title: string, type: string, id: number}, type: string) => {
+        if (this.selectedFields.includes(field.title)) {
+            this._dataViz?.setFieldType(field.title, type);
+        } else {
+            field.type = type;
+        }
+        this.forceUpdate();
+    }
+
     get dashboardContents(){
         return (
         <div className='docCreatorMenu-dashboard-view'>
@@ -801,24 +817,25 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
                     <div className='properties-wrapper'>
                         <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>
+                            {field.type ? null : <span className='placeholder'>Select media type</span>}
+                            <span className='type-display'>{field.type ? field.type === 'text' ? 'Text Field' : 'File Field' : ''}</span>
                             <div className='bubbles'>
-                                <input className='bubble' type="radio" name="type" onClick={() => {field.type = 'text'; this.forceUpdate()}}/> 
+                                <input className='bubble' type="radio" name="type" onClick={() => {this.setFieldType(field, 'text')}}/> 
                                 <div className='text'>Text</div>
-                                <input className='bubble' type="radio" name="type" onClick={() => {field.type = 'visual'; this.forceUpdate()}}/> 
+                                <input className='bubble' type="radio" name="type" onClick={() => {this.setFieldType(field, 'visual')}}/> 
                                 <div className='text'>File</div>
                             </div>
                         </div>
                     </div>
-                    <textarea className='field-description-container' placeholder={'Add a description to help with template generation.'} />
-                    this._dataViz?._GPTSummary?.get(field.title) ?? 
-                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
-                        <FontAwesomeIcon icon='trash'/>
-                    </button>
-                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
-                        <FontAwesomeIcon icon='lightbulb'/>
-                    </button>
+                    <textarea className='field-description-container' placeholder={this._dataViz?.GPTSummary?.get(field.title) ?? 'Add a description to help with template generation.'} /> 
+                    <div>
+                        <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
+                            <FontAwesomeIcon icon='trash'/>
+                        </button>
+                        {/* <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
+                            <FontAwesomeIcon icon='lightbulb'/>
+                        </button> */}
+                    </div>
                 </div>
             )}
         </div>