simplified suggestedTemplates field by removing unecessary caching of rendered doc

5 files changed, 17 insertions, 23 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 08583f594..505b7bd46 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -68,7 +68,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _savedLayouts: DataVizTemplateLayout[] = [];
     @observable _expandedPreview: Doc | undefined = undefined;
 
-    @observable _suggestedTemplatePreviews: {doc: Doc, template: Template}[] = [];
+    @observable _suggestedTemplates: Template[] = [];
     @observable _GPTOpt: boolean = false;
     @observable _callCount: number = 0;
     @observable _GPTLoading: boolean = false;
@@ -108,7 +108,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this._selectedTemplate = undefined;
         this._renderedDocCollection = undefined;
         this._fullyRenderedDocs = [];
-        this._suggestedTemplatePreviews = [];
+        this._suggestedTemplates = [];
         this._userCreatedFields = [];
     };
     @action addUserTemplate = (template: Template) => {
@@ -117,14 +117,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @action removeUserTemplate = (template: Template) => {
         this._userTemplates = this._userTemplates.filter(info => info.template !== template);
     }
-    @action updateTemplatePreview = (template: Template) => {
-        //template.renderUpdates();
-        const preview = {template: template, doc: template.getRenderedDoc()};
-        this._suggestedTemplatePreviews = this._suggestedTemplatePreviews.map(t => { return t.template === preview.template ? preview : t }); //prettier-ignore
-        this._userTemplates = this._userTemplates.map(t => { return t.template === preview.template ? preview : t }); //prettier-ignore
-    };
     @action setSuggestedTemplates = (templates: Template[]) => {
-        this._suggestedTemplatePreviews = templates.map(template => {return {template: template, doc: template.getRenderedDoc()}}); //prettier-ignore
+        this._suggestedTemplates = templates; //prettier-ignore
     };
 
     @computed get docsToRender() {
@@ -397,7 +391,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     testTemplate = async () => {
 
-        this._suggestedTemplatePreviews = this.templateManager.templates.map(template => {return {template: template, doc: template.getRenderedDoc()}}); //prettier-ignore
+        this._suggestedTemplates = this.templateManager.templates; //prettier-ignore
 
         //console.log(this.templateManager.templates)
 
@@ -822,10 +816,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => {
                         if (!this._currEditingTemplate) return; 
                         if (this._currEditingTemplate === this._selectedTemplate) {
-                            this.updateTemplatePreview(this._currEditingTemplate);
                             this.updateRenderedPreviewCollection(this._currEditingTemplate);
                         }
-                        this.updateRenderedPreviewCollection(this._currEditingTemplate);
                         this.setExpandedView(undefined);
                         })}>
                         <FontAwesomeIcon icon="minimize" />
@@ -839,7 +831,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     get templatesPreviewContents() {
-        const renderedTemplates: Doc[] = [];
 
         const GPTOptions = <div></div>;
 
@@ -889,8 +880,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                         <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
                                     </div>
                                 ) : (
-                                    this._suggestedTemplatePreviews
-                                        .map(({doc, template}) => (
+                                    this._suggestedTemplates
+                                        .map(template => (
                                             <div
                                                 className="docCreatorMenu-preview-window"
                                                 style={{
@@ -910,7 +901,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                                 <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.addUserTemplate(template))}>
                                                     <FontAwesomeIcon icon="plus" color="white" />
                                                 </button>
-                                                {previewDoc(doc, template)}
+                                                {previewDoc(template.getRenderedDoc(), template)}
                                             </div>
                                         ))
                                 )}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
index 0596e6d44..c751c91bd 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
@@ -24,7 +24,7 @@ export class DynamicField extends Field {
             this.parent = parent;
             this.dimensions = FieldUtils.getLocalDimensions({tl: settings.tl, br: settings.br}, this.parent.getDimensions);
         }
-        console.log('new field dimensions: ', this.dimensions);
+        //console.log('new field dimensions: ', this.dimensions);
         this.subfields = this.setupSubfields(this);
         this.renderedDocument = this.updateRenderedDoc(); //!!!
 
@@ -55,7 +55,8 @@ export class DynamicField extends Field {
     };
 
     updateRenderedDoc = (): Doc => {
-        console.log('dynamic field updated');
+        
+        //console.log('dynamic field updated');
         let doc: Doc;
         const renderedSubfields: Doc[] = this.subfields.map(field => field.renderedDoc);
         switch (this.settings.viewType) {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
index 9fd0fae19..1dd442c97 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/Field.tsx
@@ -66,6 +66,7 @@ export abstract class Field {
     }
 
     addFieldFromDoc = (doc: Doc) => {
+        console.log('add field called');
         const par = this.renderedDocument;
         const settings: FieldSettings = {
             tl: [Number(doc._x) / Number(par._width), Number(doc._y) / Number(par._height)],
@@ -135,8 +136,8 @@ export abstract class Field {
         //this.updateRenderedDoc(this.renderedDoc);
         field.updateRenderedDoc(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));
+        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;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
index 11e35746f..27ea8e1f5 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
@@ -8,7 +8,7 @@ import { StaticField } from "./StaticField";
 
 export class FieldUtils {
     public static getLocalDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentDimensions: FieldDimensions): FieldDimensions => {
-        console.log('parent dimensions', parentDimensions, 'coords: ', coords);
+        //console.log('parent dimensions', parentDimensions, 'coords: ', coords);
         const l = (coords.tl[0] * parentDimensions.width) / 2;
         const t = coords.tl[1] * parentDimensions.height / 2; //prettier-ignore
         const r = (coords.br[0] * parentDimensions.width) / 2;
@@ -16,12 +16,12 @@ export class FieldUtils {
         const width = r - l;
         const height = b - t;
         const coord = { x: l, y: t };
-        console.log('width: ', width, 'height: ', height);
+        //console.log('width: ', width, 'height: ', height);
         return { width, height, coord };
     };
 
     public static setupField = (settings: FieldSettings, index: number, parent: Field): Field => { 
-        console.log('settings', settings);
+        //console.log('settings', settings);
         const id = Number(`${parent.getID}${index}`);
         return settings.viewType === ViewType.FREEFORM || settings.viewType === ViewType.CAROUSEL3D
         ? new DynamicField(settings, id, parent)
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index 9ebec9144..7515a39be 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -45,6 +45,7 @@ export class Template {
     }
 
     getRenderedDoc = () => {
+        console.log('called');
         const doc: Doc = this.doc;
         this.contentFields.forEach(field => {
             const title: string = field.getTitle();