col size setting

3 files changed, 41 insertions, 27 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index b61650e43..0efe8ead0 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -161,17 +161,21 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         if (colInfo) { 
             colInfo.type = type;
         } else {
-            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: type, size: TemplateFieldSize.MEDIUM})
+            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: type, sizes: [TemplateFieldSize.MEDIUM]})
         }
         console.log(colInfo?.title, colInfo?.type)
     }
 
-    @action setColumnSize = (colTitle: string, size: TemplateFieldSize) => {
-        const colInfo = this.colsInfo.get(colTitle);
-        if (colInfo) { 
-            colInfo.size = size;
+    @action modifyColumnSizes = (colTitle: string, size: TemplateFieldSize, valid: boolean) => {
+        const column = this.colsInfo.get(colTitle);
+        if (column) { 
+            if (!valid && column.sizes.includes(size)) {
+                column.sizes.splice(column.sizes.indexOf(size), 1);
+            } else if (valid && !column.sizes.includes(size)) {
+                column.sizes.push(size);
+            }
         } else {
-            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: TemplateFieldType.UNSET, size: size})
+            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: TemplateFieldType.UNSET, sizes: [size]})
         }
     }
 
@@ -180,7 +184,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         if (colInfo) { 
             colInfo.title = newTitle;
         } else {
-            this.colsInfo.set(colTitle, {title: newTitle, desc: '', type: TemplateFieldType.UNSET, size: TemplateFieldSize.MEDIUM})
+            this.colsInfo.set(colTitle, {title: newTitle, desc: '', type: TemplateFieldType.UNSET, sizes: [TemplateFieldSize.MEDIUM]})
         }
     }
 
@@ -190,7 +194,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             if (!desc) { colInfo.desc = this.GPTSummary?.get(colTitle)?.desc ?? ''; } 
             else { colInfo.desc = desc; }
         } else {
-            this.colsInfo.set(colTitle, {title: colTitle, desc: desc, type: TemplateFieldType.UNSET, size: TemplateFieldSize.MEDIUM})
+            this.colsInfo.set(colTitle, {title: colTitle, desc: desc, type: TemplateFieldType.UNSET, sizes: [TemplateFieldSize.MEDIUM]})
         }
     }
 
@@ -199,7 +203,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         if (colInfo) {
             colInfo.defaultContent = cont;
         } else {
-            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: TemplateFieldType.UNSET, size: TemplateFieldSize.MEDIUM, defaultContent: cont})
+            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: TemplateFieldType.UNSET, sizes: [TemplateFieldSize.MEDIUM], defaultContent: cont})
         }
     }
 
@@ -412,10 +416,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             },
             { fireImmediately: true }
         );
-        // this._disposers.contentSummary = reaction(
-        //     () => this.records,
-        //     () => this.updateGPTSummary()
-        // );
+        this._disposers.contentSummary = reaction(
+            () => this.records,
+            () => this.updateGPTSummary()
+        );
     }
 
     fetchData = () => {
@@ -593,7 +597,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
         const cols = Array.from(Object.keys(this.records[0])).filter(header => header !== '' && header !== undefined);
         cols.forEach(col => {
-            if (!this.colsInfo.get(col)) this.colsInfo.set(col, {title: col, desc: '', size: TemplateFieldSize.MEDIUM, type: TemplateFieldType.UNSET});
+            if (!this.colsInfo.get(col)) this.colsInfo.set(col, {title: col, desc: '', sizes: [TemplateFieldSize.MEDIUM], type: TemplateFieldType.UNSET});
         });
 
         try {
@@ -622,7 +626,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         colSummary.size = val.size;
                         colSummary.type = val.type;
                         this.setColumnType(key, val.type);
-                        this.setColumnSize(key, val.size);
+                        this.modifyColumnSizes(key, val.size, true);
                     }
                 }
             }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index eaa32e62a..9d82ada37 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -905,6 +905,7 @@
         background-color: rgb(60, 60, 60);
 
         .top-bar {
+            position: relative;
             display: flex;
             flex-direction: row;
             align-items: center;
@@ -916,6 +917,10 @@
             height: 20px;
             background-color: rgb(50, 50, 50);
             color: rgb(168, 167, 167);
+
+            .field-title {
+                color: whitesmoke;
+            }
         }  
         
         .opts-bar {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index a01b26036..8f7bf8713 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -146,7 +146,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 title: field,
                 type: fieldInfo?.type ?? TemplateFieldType.UNSET,
                 desc: fieldInfo?.desc ?? '',
-                size: fieldInfo?.size ?? TemplateFieldSize.MEDIUM
+                sizes: fieldInfo?.sizes ?? [TemplateFieldSize.MEDIUM]
             };
 
             if (fieldInfo?.defaultContent !== undefined) {
@@ -454,7 +454,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     @action addField = () => {
-        const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.UNSET, desc: '', size: TemplateFieldSize.MEDIUM}])
+        const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.UNSET, desc: '', sizes: [TemplateFieldSize.MEDIUM]}])
         this._columns = newFields;
     };
 
@@ -497,13 +497,17 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this.forceUpdate();
     };
 
-    setColSize = (column: Col, size: TemplateFieldSize) => {
+    modifyColSizes = (column: Col, size: TemplateFieldSize, valid: boolean) => {
         if (this.selectedFields.includes(column.title)) {
-            this._dataViz?.setColumnSize(column.title, size);
+            this._dataViz?.modifyColumnSizes(column.title, size, valid);
         } else {
-            column.size = size;
-            console.log(column.size)
+            if (!valid && column.sizes.includes(size)) {
+                column.sizes.splice(column.sizes.indexOf(size), 1);
+            } else if (valid && !column.sizes.includes(size)) {
+                column.sizes.push(size);
+            }
         }
+        console.log(column.sizes)
         this.forceUpdate();
     };
 
@@ -517,7 +521,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     matchesForTemplate = (template: TemplateDocInfos, cols: Col[]): number[][] => {
-        const colMatchesField = (col: Col, field : Field) => { return field.sizes?.includes(col.size) && field.types?.includes(col.type) };
+        const colMatchesField = (col: Col, field : Field) => { return field.sizes?.some(size => col.sizes?.includes(size)) && field.types?.includes(col.type) };
 
         const matches: number[][] = Array(template.fields.length).fill([]).map(() => []);
 
@@ -630,7 +634,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const stringifyGPTInfo = (): string => {
             let string: string = '*** COLUMN INFO:';
             GPTAssignments.forEach(([fieldNum, col]) => {
-                string += `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.size)} words, assigned field: ${fieldNum} ---`
+                string += `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.sizes[0])} words, assigned field: ${fieldNum} ---`
             });
             return string += ' ***';
         };
@@ -747,7 +751,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     compileColDescriptions = (cols: Col[]): string =>  {
         let descriptions: string = ' ------------- COL DESCRIPTIONS START HERE:';
-        cols.forEach(col => descriptions += `{title: ${col.title}, size: ${col.size}, type: ${col.type}, descreiption: ${col.desc}} `);
+        cols.forEach(col => descriptions += `{title: ${col.title}, sizes: ${String(col.sizes)}, type: ${col.type}, descreiption: ${col.desc}} `);
 
         return descriptions;
     };
@@ -1185,7 +1189,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             return (
                 <div className='field-panel'> 
                     <div className='top-bar'>
-                        <button className='docCreatorMenu-menu-button section-reveal-options float-right' onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
+                        <span className='field-title'>{`${field.title} Field`}</span>
+                        <button className='docCreatorMenu-menu-button section-reveal-options no-margin' onPointerDown={e => this.setUpButtonClick(e, this.addField)} style={{position: 'absolute', right: '0px'}}>
                             <FontAwesomeIcon icon='minus'/>
                         </button>
                     </div>
@@ -1212,7 +1217,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                         <div className='content'>
                             <div className='bubbles'>
                                 {sizes.map(size => <>
-                                    <input className='bubble' type="checkbox" name="type" onChange={() => {this.setColSize(field, size as TemplateFieldSize)}}/> 
+                                    <input className='bubble' type="checkbox" name="type" checked={field.sizes.includes(size as TemplateFieldSize)} onChange={(e) => {this.modifyColSizes(field, size as TemplateFieldSize, e.target.checked)}}/> 
                                     <div className='text'>{size}</div>
                                 </>)}
                             </div>
@@ -1383,7 +1388,7 @@ export enum TemplateFieldSize {
 
 
 export type Col = {
-    size: TemplateFieldSize;
+    sizes: TemplateFieldSize[];
     desc: string;
     title: string;
     type: TemplateFieldType;