separated field content classes technically working

8 files changed, 98 insertions, 41 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index b576aee82..6f3647133 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -568,13 +568,17 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         let prompt: string = `(${origCount}) ${inputText}`;
 
+        console.log('prompt is: ', prompt)
+
         this._GPTLoading = true;
 
         try {
             const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
 
             if (res) {
+                console.log('res is: ', res)
                 const assignments: { [templateTitle: string]: { [fieldID: string]: string } } = JSON.parse(res);
+                console.log('assignments: ', assignments)
                 const brokenDownAssignments: [Template, { [fieldID: number]: Col }][] = [];
 
                 Object.entries(assignments).forEach(([tempTitle, assignment]) => {
@@ -583,7 +587,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     const toObj = Object.entries(assignment).reduce(
                         (a, [fieldID, colTitle]) => {
                             const col = this.getColByTitle(colTitle);
-                            if (!this._userCreatedFields.includes(col)){ // do the following for any fields not added by the user; will change in the future, for now only GPT content works with user-added fields
+                            if (!this._userCreatedFields.includes(col)){ // do the following for any fields not added by the user; will change in the future, for now only GPT content works with user-added field
                                 const field = template.getFieldByID(Number(fieldID));
                                 field.setContent(col.defaultContent ?? '', col.type === TemplateFieldType.VISUAL ? ViewType.IMG : ViewType.TEXT);
                                 field.setTitle(col.title);
@@ -594,7 +598,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                         },
                         {} as { [field: number]: Col }
                     );
+                    console.log('all assignments: ', toObj)
                     brokenDownAssignments.push([template, toObj]);
+                    console.log('brokendownassignments: ', brokenDownAssignments)
                 });
 
                 return brokenDownAssignments;
@@ -612,13 +618,15 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const cols = this.fieldsInfos;
         const templates = this.templateManager.getValidTemplates(cols);
 
+        console.log(templates)
+
         const assignments: [Template, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols);
 
         const renderedTemplatePromises: Promise<Template | undefined>[] = assignments.map(([template, assignments]) => this.applyGPTContentToTemplate(template, assignments));
 
         const renderedTemplates: (Template | undefined)[] = await Promise.all(renderedTemplatePromises);
 
-        templates.forEach(template => template.mainField.updateRenderedDoc())
+        templates.forEach(template => template.mainField.initRenderedDoc())
 
         setTimeout(() => {
             this.setSuggestedTemplates(templates);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DecorationField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DecorationField.tsx
new file mode 100644
index 000000000..efe398aaa
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DecorationField.tsx
@@ -0,0 +1,38 @@
+import { Doc, DocListCast } from "../../../../../../fields/Doc";
+import { Docs, DocumentOptions } from "../../../../../documents/Documents";
+import { FieldUtils } from "./FieldUtils";
+import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field";
+import { RichTextField } from "../../../../../../fields/RichTextField";
+import { DocData } from "../../../../../../fields/DocSymbols";
+import { ImageField } from "../../../../../../fields/URLField";
+
+export class DecorationField extends Field {
+
+    protected content: string = ''; 
+    protected subfields: Field[];
+
+    protected renderedDocument: Doc;
+
+    protected dimensions: FieldDimensions;
+
+    constructor(settings: FieldSettings, parent: Field, id: number) {
+        super(settings, id, FieldUtils.initField, parent);
+        this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
+        this.subfields = this.setupSubfields(this);
+        this.renderedDocument = this.initRenderedDoc();
+    };
+
+    setContent = (content: string, type?: ViewType) => { return }
+    getContent = () => { return 'none'};
+    get isContentField(): boolean { return false };
+
+    initRenderedDoc = (): Doc => {
+        const renderedSubfields: Doc[] = this.subfields.map(field => field.renderedDoc);
+        let doc: Doc = Docs.Create.FreeformDocument(renderedSubfields, { title: this.title, });
+        FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings);
+
+        this.renderedDocument = doc;
+
+        return doc;
+    };
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
index 2d8328ed6..e5f080645 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
@@ -1,7 +1,7 @@
 import { Doc, DocListCast } from "../../../../../../fields/Doc";
 import { Docs } from "../../../../../documents/Documents";
 import { Col } from "../DocCreatorMenu";
-import { Field, FieldContentType, FieldDimensions, FieldSettings, ViewType } from "./Field";
+import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field";
 import { FieldUtils } from "./FieldUtils";
 
 export class DynamicField extends Field {
@@ -12,7 +12,7 @@ export class DynamicField extends Field {
     protected renderedDocument: Doc;
 
     constructor(settings: FieldSettings, id: number, parent?: Field) {
-        super(settings, id, FieldUtils.setupField, parent);
+        super(settings, id, FieldUtils.initField, parent);
         if (!parent) {
             this.parent = this;
             this.dimensions = {width: this.settings.br[0] - this.settings.tl[0], height: this.settings.br[1] - this.settings.tl[1], coord: {x: this.settings.tl[0], y: this.settings.tl[1]}};
@@ -22,7 +22,7 @@ export class DynamicField extends Field {
         }
         //console.log('new field dimensions: ', this.dimensions);
         this.subfields = this.setupSubfields(this);
-        this.renderedDocument = this.updateRenderedDoc(); //!!!
+        this.renderedDocument = this.initRenderedDoc(); //!!!
 
         // this.disposers.fieldList = reaction(
         //     () => DocListCast(this.doc[Doc.LayoutFieldKey(this.doc)]),
@@ -32,8 +32,9 @@ export class DynamicField extends Field {
         // );
     }
 
-    setContent = (content: string, type?: FieldContentType) => { return };
+    setContent = (content: string, type?: ViewType) => { return };
     getContent = () => { return '' };
+    get isContentField(): boolean { return false };
 
     matches = (cols: Col[]): Array<number> => {
         return [];
@@ -50,7 +51,7 @@ export class DynamicField extends Field {
         return { width, height, coord };
     };
 
-    updateRenderedDoc = (): Doc => {
+    initRenderedDoc = (): Doc => {
         console.log('dynamic field updated');
         let doc: Doc;
         const renderedSubfields: Doc[] = this.subfields.map(field => field.renderedDoc);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
index d164053c3..9427d6c5c 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
@@ -8,13 +8,13 @@ import { DocumentType } from "../../../../../documents/DocumentTypes";
 export abstract class Field {
 
     protected disposers: { [name: string]: IDisposer } = {};
-    private setupField: (settings: FieldSettings, index: number, parent: Field) => Field;
+    private initField: (settings: FieldSettings, index: number, parent: Field) => Field;
 
     protected abstract subfields: Field[];
 
     protected abstract renderedDocument: Doc;
 
-    protected parent?: Field;
+    protected parent: Field;
     protected id: number;
     protected settings: FieldSettings;
     protected title: string = '';
@@ -22,7 +22,7 @@ export abstract class Field {
     protected abstract dimensions: FieldDimensions;
 
     constructor(settings: FieldSettings, id: number, fieldFactory: (settings: FieldSettings, index: number, parent: Field) => Field, parent?: Field) {
-        this.setupField = fieldFactory;
+        this.initField = fieldFactory;
         this.parent = parent ? parent : this;
         this.id = id;
         this.settings = settings;
@@ -57,6 +57,7 @@ export abstract class Field {
     };
     getTitle = () => { return this.title };
 
+    abstract get isContentField(): boolean;
     abstract setContent(content: string, type?: ViewType): void;
     abstract getContent(): string;
 
@@ -111,7 +112,7 @@ export abstract class Field {
             }
         });
         
-        const newField: Field = this.setupField(settings, this.subfields.length, this);
+        const newField: Field = this.initField(settings, this.subfields.length, this);
         this.subfields.push(newField);
     };
 
@@ -126,27 +127,23 @@ export abstract class Field {
 
     setupSubfields = (parent: Field): Field[] => {
         return this.settings.subfields?.map((fieldSettings, index) => {
-            return this.setupField(fieldSettings, index, parent);
+            return this.initField(fieldSettings, index, parent);
         }) || [];
     }
 
     applyAttributes(field: Field) {
         field.setTitle(this.title);
-        //this.updateRenderedDoc(this.renderedDoc);
-        field.updateRenderedDoc(this.renderedDoc);
+        field.initRenderedDoc(this.renderedDoc);
         field.subfields = this.subfields;
-        //console.log('id:', this.id, 'set width to:', Number(this.renderedDoc.width));
-        //console.log('set height to:', Number(this.renderedDoc.height));
     }
 
-    abstract updateRenderedDoc(oldDoc?: Doc): void;
+    abstract initRenderedDoc(oldDoc?: Doc): void;
 
     dispose = () => {
         Object.values(this.disposers).forEach(disposer => disposer?.());
     }
 
     handleFieldUpdate = (newDocsList: Doc[]) => {
-        console.log('handlefielduodate called');
         const currRenderedDocs: Set<Doc> = new Set();
         this.subfields.forEach(field => currRenderedDocs.add(field.renderedDoc));
         newDocsList.forEach(doc => {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
index 6a800b8d1..d7cf24794 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
@@ -5,6 +5,7 @@ import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from "../Templa
 import { DynamicField } from "./DynamicField";
 import { Field, FieldDimensions, FieldSettings, ViewType } from "./Field";
 import { TextTemplateField, ImageTemplateField } from "./StaticContentField";
+import { DecorationField } from "./DecorationField";
 
 export class FieldUtils {
     public static getLocalDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentDimensions: FieldDimensions): FieldDimensions => {
@@ -20,18 +21,19 @@ export class FieldUtils {
         return { width, height, coord };
     };
 
-    public static setupField = (settings: FieldSettings, index: number, parent: Field): Field => { 
-        //console.log('settings', settings);
+    public static initField = (settings: FieldSettings, index: number, parent: Field): Field => { 
         const id = Number(`${parent.getID}${index}`);
         switch (settings.viewType) {
             case ViewType.FREEFORM: case ViewType.CAROUSEL3D:
                 return new DynamicField(settings, id, parent);
             case ViewType.IMG:
-                return new ImageTemplateField(settings, id, parent);
+                return new ImageTemplateField(settings, parent, id);
             case ViewType.TEXT:
-                return new TextTemplateField(settings, id, parent);
+                return new TextTemplateField(settings, parent, id);
+            case ViewType.DEC:
+                return new DecorationField(settings, parent, id);
         }
-        return new TextTemplateField(settings, id, parent);
+        return new TextTemplateField(settings, parent, id);
     }
 
     public static textProperties: string[] = [
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx
index da2671f9c..baa5e71ec 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticContentField.tsx
@@ -8,37 +8,40 @@ import { ImageField } from "../../../../../../fields/URLField";
 
 export abstract class StaticContentField extends Field {
 
-    protected content: string; 
-    protected renderedDocument: Doc;
+    protected content: string = ''; 
     protected subfields: Field[];
 
-    protected parent: Field;
     protected dimensions: FieldDimensions;
 
     constructor(settings: FieldSettings, parent: Field, id: number) {
-        super(settings, id, FieldUtils.setupField, parent);
-        this.parent = parent;
+        super(settings, id, FieldUtils.initField, parent);
         this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
-        this.content = '';
         this.subfields = this.setupSubfields(this);
-        this.renderedDocument = this.updateRenderedDoc();
     };
 
-    abstract setContent(content: string): void;
-    getContent() { return this.content ?? 'unset'};
+    abstract setContent(content: string, type?: ViewType): void;
+    getContent = () => { return this.content ?? 'unset'};
+    get isContentField(): boolean { return true };
 
-    abstract updateRenderedDoc(): Doc;
+    abstract initRenderedDoc(): Doc;
 }
 
 export class ImageTemplateField extends StaticContentField {
 
-    setContent = (url: string) => { 
+    protected renderedDocument: Doc;
+
+    constructor(settings: FieldSettings, parent: Field, id: number){
+        super(settings, parent, id)
+        this.renderedDocument = this.initRenderedDoc();
+    }
+
+    setContent = (url: string, type?: ViewType) => { 
         const imgField = new ImageField(url);
         this.renderedDocument[DocData]['data'] = imgField;
         this.content = url;
     };
 
-    updateRenderedDoc = (): Doc => {
+    initRenderedDoc = (): Doc => {
         const url = String(this.content);
         let doc: Doc = Docs.Create.ImageDocument(url, {
             title: this.title,
@@ -54,7 +57,15 @@ export class ImageTemplateField extends StaticContentField {
 
 export class TextTemplateField extends StaticContentField {
 
+    protected renderedDocument: Doc;
+
+    constructor(settings: FieldSettings, parent: Field, id: number){
+        super(settings, parent, id)
+        this.renderedDocument = this.initRenderedDoc();
+    }
+
     setContent = (text: string) => { 
+        console.log('content set to: ', text);
         const rtf = {
             doc: {
                 type: 'doc',
@@ -78,7 +89,7 @@ export class TextTemplateField extends StaticContentField {
         this.renderedDocument[DocData]['text'] = field;
     };
 
-    updateRenderedDoc = (): Doc => {
+    initRenderedDoc = (): Doc => {
         const opts = this.settings.opts;
         const text = String(this.content);
         let doc: Doc = Docs.Create.TextDocument(text, {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index 9d132d637..178af3df6 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -24,7 +24,7 @@ export class Template {
 
     get childFields(): Field[] { return this.mainField.getSubfields };
     get allFields(): Field[] { return this.mainField.getAllSubfields };
-    get contentFields(): Field[] { return this.allFields.filter(field => field !instanceof DynamicField) };
+    get contentFields(): Field[] { return this.allFields.filter(field => field.isContentField) };
     get doc(){ return this.mainField.renderedDoc; };
     get title() { return this.mainField.getTitle() };
 
@@ -36,11 +36,10 @@ export class Template {
         const clone: Template = new Template(this.settings);
         this.mainField.applyAttributes(clone.mainField);
         clone.allFields.filter(field => field !== clone.mainField).forEach(field => {
-            console.log('id:', field.getID);
             const matchingField: Field = this.allFields.filter(f => f.getID === field.getID)[0];
             matchingField.applyAttributes(field);
         })
-        clone.mainField.updateRenderedDoc();
+        clone.mainField.initRenderedDoc();
         return clone;
     }
 
@@ -85,13 +84,14 @@ export class Template {
 
     resetToBase = () => {
         this.allFields.forEach(field => {
-            field.updateRenderedDoc();
+            field.initRenderedDoc();
         })
     }
 
     isValidTemplate = (cols: Col[]) => {
         const matches: number[][] = this.getMatches(cols);
         const maxMatches: number = this.maxMatches(matches);
+        console.log('title: ', this.mainField.getTitle(), ' matches: ', matches, ' max: ', maxMatches, ' num content fields: ', this.contentFields.length)
         return maxMatches === this.contentFields.length;
     }
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
index 6ab0a1774..09b4ce029 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
@@ -6,7 +6,6 @@ import { Template } from "./Template";
 export class TemplateManager {
 
     templates: Template[] = [];
-    //updateTrack
 
     constructor(templateSettings: FieldSettings[]) {
         makeAutoObservable(this);
@@ -20,6 +19,7 @@ export class TemplateManager {
     }
 
     getValidTemplates = (cols: Col[]): Template[] => {
+        console.log('called in manager with templates: ', this.templates)
         return this.templates.filter(template => template.isValidTemplate(cols));
     }