col size setting

1 files changed, 17 insertions, 12 deletions

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;