reworking doc generation from template

7 files changed, 124 insertions, 62 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 311a0ad65..6621c610f 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -703,6 +703,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             const values: string[] = [];
             fields.forEach(col => values.push(this.records[row][col]));
 
+            
+
             const proto = new Doc();
             proto.author = ClientUtils.CurrentUserEmail();
             values.forEach((val, i) => {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index e7d6bb98e..7491642eb 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -58,7 +58,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _renderedDocCollection: Doc | undefined = undefined;
 
     @observable _templateDocs: Doc[] = [];
-    @observable _selectedTemplate: Doc | undefined = undefined;
+    @observable _selectedTemplateDoc: Doc | undefined = undefined;
     @observable _userCreatedColumns: Col[] = [];
     @observable _selectedCols: { title: string; type: string; desc: string }[] | undefined = [];
 
@@ -68,7 +68,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _savedLayouts: DataVizTemplateLayout[] = [];
     @observable _expandedPreview: { icon: ImageField; doc: Doc } | undefined = undefined;
 
-    @observable _suggestedTemplates: Doc[] = [];
+    @observable _suggestedTemplates: Template[] = [];
     @observable _GPTOpt: boolean = false;
     @observable _userPrompt: string = '';
     @observable _callCount: number = 0;
@@ -112,12 +112,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @action setTemplateDocs = (docs: Doc[]) => {
         this._templateDocs = docs.map(doc => (doc.annotationOn ? DocCast(doc.annotationOn) : doc));
     };
-    @action setGSuggestedTemplates = (docs: Doc[]) => {
-        this._suggestedTemplates = docs;
+    @action setSuggestedTemplates = (templates: Template[]) => {
+        this._suggestedTemplates = templates;
     };
 
     @computed get docsToRender() {
-        return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
+        return this._selectedTemplateDoc ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
     }
 
     @computed get rowsCount() {
@@ -179,7 +179,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     @computed get canMakeDocs() {
-        return this._selectedTemplate !== undefined && this._layout !== undefined;
+        return this._selectedTemplateDoc !== undefined && this._layout !== undefined;
     }
 
     get bounds(): { t: number; b: number; l: number; r: number } {
@@ -239,7 +239,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             docs => this.updateIcons(docs)
         );
         this._disposers.gpt = reaction(
-            () => this._suggestedTemplates.slice(),
+            () => this._suggestedTemplates.map(template => template.mainField.renderedDoc()).slice(),
             docs => this.updateIcons(docs)
         );
         //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')})
@@ -289,7 +289,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     @action
     openMenu = () => {
-        const allTemplates = this._templateDocs.concat(this._suggestedTemplates);
+        const allTemplates = this._templateDocs.concat(this._suggestedTemplates.map(temp => temp.mainField.renderedDoc()));
         this._shouldDisplay = true;
         this.updateIcons(allTemplates);
     };
@@ -374,15 +374,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return undefined;
     }
 
-    @action updateSelectedTemplate = (template: Doc) => {
-        if (this._selectedTemplate === template) {
-            this._selectedTemplate = undefined;
+    @action updateSelectedTemplate = (template: Template) => {
+        if (this._selectedTemplateDoc === template.mainField.renderedDoc()) {
+            this._selectedTemplateDoc = undefined;
             return;
         } else {
-            this._selectedTemplate = template;
-            MakeTemplate(template);
-            const templateInfo: DataVizTemplateInfo = { doc: template, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount };
-            this._fullyRenderedDocs = this._dataViz?.createDocsFromTemplate(templateInfo, true) ?? [];
+            this._selectedTemplateDoc = template.mainField.renderedDoc();
+            template.renderUpdates();
+            this._fullyRenderedDocs = this.createDocsFromTemplate(template) ?? [];
             this.updateRenderedDocCollection();
         }
     };
@@ -701,11 +700,40 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         });
 
         setTimeout(() => {
-            this.setGSuggestedTemplates(renderedTemplates);
+            this.setSuggestedTemplates(templates);
             this._GPTLoading = false;
         });
     };
 
+    createDocsFromTemplate = (template: Template) => {
+        const dv = this._dataViz;
+        if (!dv) return;
+        const fields: string[] = Array.from(Object.keys(dv.records[0]));
+        const selectedRows = NumListCast(dv.layoutDoc.dataViz_selectedRows);
+
+        const fieldContents: {[title: string]: string}[] = selectedRows.map(row => {
+            let values: {[title: string]: string} = {};
+            fields.forEach(col => {
+                values[col] = dv.records[row][col];
+            });
+
+            return values;
+        });
+
+        const renderedDocs: Doc[] = [];
+
+        fieldContents.forEach(content => {
+            fields.forEach(title => {
+                const field = template.getFieldByTitle(title);
+                field.setContent(content[title]);
+            });
+
+            renderedDocs.push(template.mainField.renderedDoc());
+        });
+
+        return renderedDocs;
+    }
+
     @action setExpandedView = (info: { icon: ImageField; doc: Doc } | undefined) => {
         if (info) {
             const doc = info.doc;
@@ -758,7 +786,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 <div className="top-panel"/>
                 {rendered}
                 <div className="right-buttons-panel">
-                    <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => {this._expandedPreview && this.updateIcons(this._suggestedTemplates.slice()); this.setExpandedView(undefined)})}>
+                    <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => {this._expandedPreview && this.updateIcons(this._suggestedTemplates.map(template => template.mainField.renderedDoc()).slice()); this.setExpandedView(undefined)})}>
                         <FontAwesomeIcon icon="minimize" />
                     </button>
                     <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._templateDocs.push(this._expandedPreview.doc))}>
@@ -797,16 +825,16 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                     </div>
                                 ) : (
                                     this._suggestedTemplates
-                                        ?.map(doc => ({ icon: ImageCast(doc.icon), doc }))
+                                        ?.map(template => ({ icon: ImageCast(template.mainField.renderedDoc().icon), doc: template.mainField.renderedDoc(), template: template }))
                                         .filter(info => info.icon && info.doc)
                                         .map(info => (
                                             <div
                                                 className="docCreatorMenu-preview-window"
                                                 style={{
-                                                    border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                                                    boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                                                    border: this._selectedTemplateDoc === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                                                    boxShadow: this._selectedTemplateDoc === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '',
                                                 }}
-                                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+                                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.template)))}>
                                                 <button
                                                     className="option-button left"
                                                     onPointerDown={e =>
@@ -845,7 +873,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 <div className="docCreatorMenu-preview-window empty" onPointerDown={e => this.testTemplate()}>
                                     <FontAwesomeIcon icon="plus" color="rgb(160, 160, 160)" />
                                 </div>
-                                {this._templateDocs
+                                {/* {this._templateDocs
                                     .map(doc => ({ icon: ImageCast(doc.icon), doc }))
                                     .filter(info => info.icon && info.doc)
                                     .map(info => {
@@ -855,8 +883,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                             <div
                                                 className="docCreatorMenu-preview-window"
                                                 style={{
-                                                    border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                                                    boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                                                    border: this._selectedTemplateDoc === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                                                    boxShadow: this._selectedTemplateDoc === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '',
                                                 }}
                                                 onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
                                                 <button
@@ -880,7 +908,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                                 <img className="docCreatorMenu-preview-image" src={info.icon!.url.href.replace('.png', '_o.png')} />
                                             </div>
                                         );
-                                    })}
+                                    })} */}
                             </div>
                         </div>
                     </div>
@@ -1072,7 +1100,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => {
-        const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate;
+        const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplateDoc;
         if (!doc) return;
 
         return (
@@ -1192,9 +1220,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 emptyFunction,
                                 undoable(clickEv => {
                                     clickEv.stopPropagation();
-                                    if (!this._selectedTemplate) return;
+                                    if (!this._selectedTemplateDoc) return;
                                     const layout: DataVizTemplateLayout = {
-                                        template: this._selectedTemplate,
+                                        template: this._selectedTemplateDoc,
                                         layout: { type: this._layout.type, xMargin: this._layout.xMargin, yMargin: this._layout.yMargin, repeat: 0 },
                                         columns: this.columnsCount,
                                         rows: this.rowsCount,
@@ -1219,8 +1247,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 emptyFunction,
                                 undoable(clickEv => {
                                     clickEv.stopPropagation();
-                                    if (!this._selectedTemplate) return;
-                                    const templateInfo: DataVizTemplateInfo = { doc: this._selectedTemplate, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount };
+                                    if (!this._selectedTemplateDoc) return;
+                                    const templateInfo: DataVizTemplateInfo = { doc: this._selectedTemplateDoc, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount };
                                     this._dataViz?.createDocsFromTemplate(templateInfo);
                                 }, 'make docs')
                             )
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
index cd83472d8..c0f2f183a 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
@@ -30,7 +30,7 @@ export class DynamicField implements Field {
         this.subfields = this.setupSubfields();
     }
 
-    setContent = (content: string, type: FieldContentType) => { return };
+    setContent = (content: string, type?: FieldContentType) => { return };
     getContent = () => { return '' };
 
     setTitle = (title: string) => { this.title = title };
@@ -58,6 +58,10 @@ export class DynamicField implements Field {
         return [];
     }
 
+    updateRenderedDoc = () => {
+        return new Doc();
+    }
+
     setupSubfields = (): Field[] => {
         const fields: Field[] = [];
         this.settings.subfields?.forEach((fieldSettings, index) => {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
index aeeaa58dd..8a571dae3 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
@@ -4,7 +4,7 @@ import { TemplateFieldSize, TemplateFieldType } from "../TemplateBackend";
 
 export interface Field {
     getContent: () => string;
-    setContent: (content: string, type: FieldContentType) => void;
+    setContent: (content: string, type?: FieldContentType) => void;
     getDimensions: FieldDimensions;
     getSubfields: Field[];
     getAllSubfields: Field[];
@@ -16,6 +16,7 @@ export interface Field {
     setupSubfields: () => Field[];
     renderedDoc: () => Doc;
     matches: (cols: Col[]) => number[];
+    updateRenderedDoc: () => Doc;
 }
 
 export type FieldSettings = {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
index 91adebe81..70596632a 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
@@ -15,21 +15,21 @@ export class FieldUtils {
         return { width, height, coord };
     };
 
-    public static applyBasicOpts = (doc: Doc, parentDimensions: FieldDimensions, settings: FieldSettings) => {
+    public static applyBasicOpts = (doc: Doc, parentDimensions: FieldDimensions, settings: FieldSettings, oldDoc?: Doc) => {
         const opts = settings.opts;
-        doc.isDefaultTemplateDoc = true;
-        doc._layout_hideScroll = true;
-        doc.x = parentDimensions.coord.x;
-        doc.y = parentDimensions.coord.y;
-        doc._height = parentDimensions.height;
-        doc._width = parentDimensions.width;
-        doc.backgroundColor = opts.backgroundColor ?? '';
-        doc._layout_borderRounding = `${opts.cornerRounding ?? 0}px`;
-        doc.borderColor = opts.borderColor;
-        doc.borderWidth = opts.borderWidth;
-        doc.opacity = opts.opacity;
-        doc._rotation = opts.rotation;
-        doc.hCentering = opts.contentXCentering;
+        doc.isDefaultTemplateDoc = oldDoc ? oldDoc.isDefaultTemplateDoc : true;
+        doc._layout_hideScroll = oldDoc ? oldDoc._layout_hideScroll : true;
+        doc.x = oldDoc ? oldDoc.x : parentDimensions.coord.x;
+        doc.y = oldDoc ? oldDoc.y : parentDimensions.coord.y;
+        doc._height = oldDoc ? oldDoc.height : parentDimensions.height;
+        doc._width = oldDoc ? oldDoc.width : parentDimensions.width;
+        doc.backgroundColor = oldDoc ? oldDoc.backgroundColor : opts.backgroundColor ?? '';
+        doc._layout_borderRounding = oldDoc ? oldDoc.layout_borderRounding : `${opts.cornerRounding ?? 0}px`;
+        doc.borderColor = oldDoc ? oldDoc.borderColor : opts.borderColor;
+        doc.borderWidth = oldDoc ? oldDoc.borderWidth : opts.borderWidth;
+        doc.opacity = oldDoc ? oldDoc.opacity : opts.opacity;
+        doc._rotation = oldDoc ? oldDoc._rotation : opts.rotation;
+        doc.hCentering = oldDoc ? oldDoc.hCentering : opts.contentXCentering;
     };
 
     public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
index 795581008..3e0c8abcf 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
@@ -12,6 +12,7 @@ export class StaticField {
     private content: string;
     private contentType: FieldContentType | undefined;
     private subfields: Field[] = [];
+    private renderedDocument: Doc;
 
     private id: number;
     private title: string = '';
@@ -29,6 +30,7 @@ export class StaticField {
         this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
         this.content = '';
         this.subfields = this.setupSubfields();
+        this.renderedDocument = this.updateRenderedDoc();
     };
 
     get getSubfields(): Field[] { return this.subfields ?? []; };
@@ -50,14 +52,22 @@ export class StaticField {
         return this.settings.description ?? '';
     }
 
-    setContent = (newContent: string, type: FieldContentType) => { 
+    renderedDoc = () => {
+        return this.renderedDocument;
+    }
+
+    setContent = (newContent: string, type?: FieldContentType) => { 
         this.content = newContent;
-        this.contentType = type;
-        console.log('id: ', this.content)
+        if (type) this.contentType = type;
+        this.updateRenderedDoc(this.renderedDocument);
     };
     getContent() { return this.content };
 
-    setTitle = (title: string) => { this.title = title };
+    setTitle = (title: string) => { 
+        this.title = title;
+        this.renderedDocument.title = title;
+        this.updateRenderedDoc(this.renderedDocument);
+    };
     getTitle = () => { return this.title };
 
     setupSubfields = (): Field[] => {
@@ -99,33 +109,40 @@ export class StaticField {
         return matches;
     };
 
-    renderedDoc = (): Doc => {
+    updateRenderedDoc = (oldDoc?: Doc): Doc => {
         const opts = this.settings.opts;
 
         if (!this.contentType) { this.contentType = FieldContentType.STRING };
 
+        let doc: Doc;
+
         switch (this.contentType) {
             case FieldContentType.STRING:
                 const text = String(this.content);
-                const textDoc = Docs.Create.TextDocument(text, {
+                console.log('made text')
+                doc = Docs.Create.TextDocument(text, {
                     title: this.title,
-                    text_fontColor: opts.color,
-                    contentBold: opts.fontBold,
-                    textTransform: opts.fontTransform,
-                    color: opts.color,
+                    text_fontColor: oldDoc ? String(oldDoc.color) : opts.color,
+                    contentBold: oldDoc ? Boolean(oldDoc.fontBold) : opts.fontBold,
+                    textTransform: oldDoc ? String(oldDoc.fontTransform) : opts.fontTransform,
+                    color: oldDoc ? String(oldDoc.color) : opts.color,
                     _text_fontSize: `${FieldUtils.calculateFontSize(this.dimensions.width, this.dimensions.height, text, true)}`
                 });
-                FieldUtils.applyBasicOpts(textDoc, this.dimensions, this.settings);
-                return textDoc;
+                FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc);
+                break;
             case FieldContentType.IMAGE:
+                console.log('made image')
                 const url = String(this.content);
-                const imgDoc = Docs.Create.ImageDocument(url, {
+                doc = Docs.Create.ImageDocument(url, {
                     title: this.title,
                     _layout_fitWidth: false,
                 });
-                FieldUtils.applyBasicOpts(imgDoc, this.dimensions, this.settings);
-                return imgDoc;
+                FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc);
+                break;
         }   
-    };
 
+        this.renderedDocument = doc;
+
+        return doc;
+    };
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index 09eb86d20..6b981d77f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -23,10 +23,20 @@ export class Template {
         return this.allFields.filter(field => field.getID === id)[0];
     }
 
+    getFieldByTitle = (title: string) => {
+        return this.allFields.filter(field => field.getTitle() === title)[0];
+    }
+
     setupMainField = (templateInfo: FieldSettings) => {
         return new DynamicField(templateInfo, 1);
     }
 
+    renderUpdates = () => {
+        this.allFields.forEach(field => {
+            field.updateRenderedDoc();
+        });
+    };
+
     isValidTemplate = (cols: Col[]) => {
         const matches: number[][] = this.getMatches(cols);
         const maxMatches: number = this.maxMatches(matches);