Merge branch 'DocCreatorMenu-work' of https://github.com/brown-dash/Dash-Web into DocCreatorMenu-work

1 files changed, 279 insertions, 281 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index ffdc6626d..a702218b0 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -1,39 +1,36 @@
+import { Colors } from '@dash/components';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Colors } from 'browndash-components';
-import { action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { action, computed, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { IDisposer } from 'mobx-utils';
 import * as React from 'react';
 import ReactLoading from 'react-loading';
-import { ClientUtils, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../../ClientUtils';
+import { ClientUtils, returnEmptyFilter, returnFalse, setupMoveUpEvents } from '../../../../../ClientUtils';
 import { emptyFunction } from '../../../../../Utils';
-import { Doc, FieldType, NumListCast, StrListCast, returnEmptyDoclist } from '../../../../../fields/Doc';
+import { Doc, NumListCast, StrListCast, returnEmptyDoclist } from '../../../../../fields/Doc';
 import { Id } from '../../../../../fields/FieldSymbols';
-import { Cast, DocCast, ImageCast, StrCast } from '../../../../../fields/Types';
+import { ImageCast, StrCast } from '../../../../../fields/Types';
 import { ImageField } from '../../../../../fields/URLField';
+import { Upload } from '../../../../../server/SharedMediaTypes';
 import { Networking } from '../../../../Network';
 import { GPTCallType, gptAPICall, gptImageCall } from '../../../../apis/gpt/GPT';
 import { Docs, DocumentOptions } from '../../../../documents/Documents';
 import { DragManager } from '../../../../util/DragManager';
-import { MakeTemplate } from '../../../../util/DropConverter';
 import { SnappingManager } from '../../../../util/SnappingManager';
+import { Transform } from '../../../../util/Transform';
 import { UndoManager, undoable } from '../../../../util/UndoManager';
-import { LightboxView } from '../../../LightboxView';
 import { ObservableReactComponent } from '../../../ObservableReactComponent';
+import { DefaultStyleProvider } from '../../../StyleProvider';
 import { CollectionFreeFormView } from '../../../collections/collectionFreeForm/CollectionFreeFormView';
 import { DocumentView, DocumentViewInternal } from '../../DocumentView';
-import { FieldViewProps } from '../../FieldView';
 import { OpenWhere } from '../../OpenWhere';
 import { DataVizBox } from '../DataVizBox';
 import './DocCreatorMenu.scss';
-import { DefaultStyleProvider, returnEmptyDocViewList } from '../../../StyleProvider';
-import { Transform } from '../../../../util/Transform';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { Field, ViewType } from './FieldTypes/Field';
+import { Template } from './Template';
 import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from './TemplateBackend';
 import { TemplateManager } from './TemplateManager';
-import { Template } from './Template';
-import { Field, ViewType } from './FieldTypes/Field';
-import { TabDocView } from '../../../collections/TabDocView';
 
 export enum LayoutType {
     FREEFORM = 'Freeform',
@@ -43,8 +40,36 @@ export enum LayoutType {
     CARD = 'Card View',
 }
 
+export interface DataVizTemplateInfo {
+    doc: Doc;
+    layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number };
+    columns: number;
+    referencePos: { x: number; y: number };
+}
+
+export interface DataVizTemplateLayout {
+    template: Doc;
+    docsNumList: number[];
+    layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number };
+    columns: number;
+    rows: number;
+}
+
+export type Col = {
+    sizes: TemplateFieldSize[];
+    desc: string;
+    title: string;
+    type: TemplateFieldType;
+    defaultContent?: string;
+};
+
+interface DocCreateMenuProps {
+    addDocTab: (doc: Doc | Doc[], where: OpenWhere) => boolean;
+}
+
 @observer
-export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
+export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> {
+    // eslint-disable-next-line no-use-before-define
     static Instance: DocCreatorMenu;
 
     private DEBUG_MODE: boolean = false;
@@ -53,13 +78,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     private _ref: HTMLDivElement | null = null;
 
-    private templateManager: TemplateManager; 
+    private templateManager: TemplateManager;
 
     @observable _fullyRenderedDocs: Doc[] = []; // collection of templates filled in with content
     @observable _renderedDocCollection: Doc | undefined = undefined; // fullyRenderedDocs in a parent collection
     @observable _docsRendering: boolean = false; // dictates loading symbol
 
-    @observable _userTemplates: Template[] = []; 
+    @observable _userTemplates: Template[] = [];
     @observable _selectedTemplate: Template | undefined = undefined;
     @observable _currEditingTemplate: Template | undefined = undefined;
 
@@ -71,9 +96,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _expandedPreview: Doc | undefined = undefined;
 
     @observable _suggestedTemplates: Template[] = [];
+    @observable _suggestedTemplatePreviews: { doc: Doc; template: Template }[] = [];
     @observable _GPTOpt: boolean = false;
     @observable _callCount: number = 0;
     @observable _GPTLoading: boolean = false;
+    @observable _DOCCC: Doc | undefined;
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
@@ -88,8 +115,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _dragging: boolean = false;
     @observable _draggingIndicator: boolean = false;
     @observable _dataViz?: DataVizBox;
-    @observable _interactionLock: any;
-    @observable _snapPt: any;
+    @observable _interactionLock: boolean | undefined;
+    @observable _snapPt: { x: number; y: number } = { x: 0, y: 0 };
     @observable _resizeHdlId: string = '';
     @observable _resizing: boolean = false;
     @observable _offset: { x: number; y: number } = { x: 0, y: 0 };
@@ -98,7 +125,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _menuDimensions: { width: number; height: number } = { width: 400, height: 400 };
     @observable _editing: boolean = false;
 
-    constructor(props: any) {
+    constructor(props: DocCreateMenuProps) {
         super(props);
         makeObservable(this);
         DocCreatorMenu.Instance = this;
@@ -118,16 +145,16 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
     @action removeUserTemplate = (template: Template) => {
         this._userTemplates.splice(this._userTemplates.indexOf(template), 1);
-    }
+    };
     @action setSuggestedTemplates = (templates: Template[]) => {
         this._suggestedTemplates = templates; //prettier-ignore
     };
 
     @computed get docsToRender() {
-        if (this.DEBUG_MODE){
+        if (this.DEBUG_MODE) {
             return [1, 2, 3, 4];
         } else {
-            return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : []; 
+            return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
         }
     }
 
@@ -189,7 +216,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return bounds;
     }
 
-    setUpButtonClick = (e: any, func: Function) => {
+    setUpButtonClick = (e: React.PointerEvent, func: () => void) => {
         setupMoveUpEvents(
             this,
             e,
@@ -235,18 +262,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     componentDidMount() {
         document.addEventListener('pointerdown', this.onPointerDown, true);
         document.addEventListener('pointerup', this.onPointerUp);
-        //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')})
-        this._disposers.lightbox = reaction(
-            () => LightboxView.LightboxDoc(),
-            doc => {
-                doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu();
-            }
-        );
-        // this._disposers.layout = reaction(
-        //     () => this._layout,
-        //     layout => { this.updateRenderedDocCollection(); }
-        // );
-        //this._disposers.fields = reaction(() => this._dataViz?.axes, cols => this._selectedCols = cols?.map(col => { return {title: col, type: '', desc: ''}}))
     }
 
     componentWillUnmount() {
@@ -256,11 +271,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     @action
-    updateSelectedCols = (cols: string[]) => {
-        this._selectedCols;
-    };
-
-    @action
     toggleDisplay = (x: number, y: number) => {
         if (this._shouldDisplay) {
             this._shouldDisplay = false;
@@ -288,7 +298,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         SnappingManager.SetIsResizing(DocumentView.Selected().lastElement()?.Document[Id]); // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them
         e.stopPropagation();
         const id = (this._resizeHdlId = e.currentTarget.className);
-        const pad = id.includes('Left') || id.includes('Right') ? Number(getComputedStyle(e.target as any).width.replace('px', '')) / 2 : 0;
+        const pad = id.includes('Left') || id.includes('Right') ? Number(getComputedStyle(e.target as HTMLElement).width.replace('px', '')) / 2 : 0;
         const bounds = e.currentTarget.getBoundingClientRect();
         this._offset = {
             x: id.toLowerCase().includes('left') ? bounds.right - e.clientX - pad : bounds.left - e.clientX + pad, //
@@ -299,7 +309,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     @action
-    onResize = (e: any): boolean => {
+    onResize = (e: PointerEvent): boolean => {
         const dragHdl = this._resizeHdlId.split(' ')[1];
         const thisPt = DragManager.snapDrag(e, -this._offset.x, -this._offset.y, this._offset.x, this._offset.y);
 
@@ -308,13 +318,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this._interactionLock = true;
         const scaleAspect = {x: scale.x, y: scale.y};
         this.resizeView(refPt, scaleAspect, transl); // prettier-ignore
-        await new Promise<any>(res => { setTimeout(() => { res(this._interactionLock = undefined)})});
+        await new Promise<boolean | undefined>(res => { setTimeout(() => { res(this._interactionLock = undefined)})});
         }); // prettier-ignore
         return true;
     };
 
     @action
-    onDrag = (e: any): boolean => {
+    onDrag = (e: PointerEvent): boolean => {
         this._pageX = e.pageX - (this._startPos?.x ?? 0);
         this._pageY = e.pageY - (this._startPos?.y ?? 0);
         this._initDimensions.x = this._pageX;
@@ -324,7 +334,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     getResizeVals = (thisPt: { x: number; y: number }, dragHdl: string) => {
         const [w, h] = [this._initDimensions.width, this._initDimensions.height];
-        const [moveX, moveY] = [thisPt.x - this._snapPt.x, thisPt.y - this._snapPt.y];
+        const [moveX, moveY] = [thisPt.x - this._snapPt!.x, thisPt.y - this._snapPt!.y];
         let vals: { scale: { x: number; y: number }; refPt: [number, number]; transl: { x: number; y: number } };
         switch (dragHdl) {
             case 'topLeft':    vals = { scale: { x: 1 - moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.r, this.bounds.b], transl: {x: moveX, y: moveY } }; break;
@@ -341,7 +351,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     resizeView = (refPt: number[], scale: { x: number; y: number }, translation: { x: number; y: number }) => {
-        const refCent = [refPt[0], refPt[1]]; // fixed reference point for resize (ie, a point that doesn't move)
         if (this._initDimensions.x === undefined) this._initDimensions.x = this._pageX;
         if (this._initDimensions.y === undefined) this._initDimensions.y = this._pageY;
         const { height, width, x, y } = this._initDimensions;
@@ -362,10 +371,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     @action updateRenderedPreviewCollection = async (template: Template) => {
-        this._fullyRenderedDocs = await this.createDocsFromTemplate(template) ?? [];
+        this._fullyRenderedDocs = (await this.createDocsFromTemplate(template)) ?? [];
         console.log(this._fullyRenderedDocs);
         this.updateRenderedDocCollection();
-    }
+    };
 
     @action updateSelectedTemplate = async (template: Template) => {
         if (this._selectedTemplate === template) {
@@ -390,20 +399,18 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     editTemplate = (doc: Doc) => {
-        //this.closeMenu();
         DocumentViewInternal.addDocTabFunc(doc, OpenWhere.addRight);
         DocumentView.DeselectAll();
         Doc.UnBrushDoc(doc);
     };
 
     testTemplate = async () => {
-
         this._suggestedTemplates = this.templateManager.templates; //prettier-ignore
 
         //console.log(this.templateManager.templates)
 
         // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        
+
         // this.templateManager.templates.forEach(template => {
         //     const doc = template.mainField.renderedDoc();
         //     mainCollection.addDocument(doc);
@@ -491,13 +498,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     generateGPTImage = async (prompt: string): Promise<string | undefined> => {
-        console.log(prompt);
-
         try {
             const res = await gptImageCall(prompt);
 
             if (res) {
-                const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
+                const result = (await Networking.PostToServer('/uploadRemoteImage', { sources: res })) as Upload.FileInformation[];
                 const source = ClientUtils.prepend(result[0].accessPaths.agnostic.client);
                 return source;
             }
@@ -513,11 +518,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
      * @returns a doc containing the fully rendered template
      */
     applyGPTContentToTemplate = async (template: Template, assignments: { [field: string]: Col }): Promise<Template | undefined> => {
-
-        const GPTTextCalls = Object.entries(assignments).filter(([str, col]) => col.type === TemplateFieldType.TEXT && this._userCreatedFields.includes(col));
-        const GPTIMGCalls = Object.entries(assignments).filter(([str, col]) => col.type === TemplateFieldType.VISUAL && this._userCreatedFields.includes(col));
-
-        let fieldContent: string = template.compiledContent;
+        const GPTTextCalls = Object.entries(assignments).filter(([, col]) => col.type === TemplateFieldType.TEXT && this._userCreatedFields.includes(col));
+        const GPTIMGCalls = Object.entries(assignments).filter(([, col]) => col.type === TemplateFieldType.VISUAL && this._userCreatedFields.includes(col));
 
         if (GPTTextCalls.length) {
             const promises = GPTTextCalls.map(([str, col]) => {
@@ -527,15 +529,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             await Promise.all(promises);
         }
 
-        console.log(GPTIMGCalls)
-
         if (GPTIMGCalls.length) {
             const promises = GPTIMGCalls.map(async ([fieldNum, col]) => {
                 return this.renderGPTImageCall(template, col, Number(fieldNum));
             });
 
             await Promise.all(promises);
-        };
+        }
 
         return template;
     };
@@ -571,7 +571,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         ++this._callCount;
         const origCount = this._callCount;
 
-        let prompt: string = `(${origCount}) ${inputText}`;
+        const prompt: string = `(${origCount}) ${inputText}`;
 
         this._GPTLoading = true;
 
@@ -583,12 +583,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 const brokenDownAssignments: [Template, { [fieldID: number]: Col }][] = [];
 
                 Object.entries(assignments).forEach(([tempTitle, assignment]) => {
-                    const template = templates.filter(template => template.title === tempTitle)[0];
+                    const template = templates.filter(temp => temp.title === tempTitle)[0];
                     if (!template) return;
                     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 field
+                            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);
@@ -612,18 +613,24 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     generatePresetTemplates = async () => {
-        this._dataViz?.updateColDefaults();
+        const templates: Template[] = [];
 
-        const cols = this.fieldsInfos;
-        const templates = this.templateManager.getValidTemplates(cols);
+        if (this.DEBUG_MODE) {
+            templates.push(...this.templateManager.templates);
+        } else {
+            this._dataViz?.updateColDefaults();
 
-        console.log(templates)
+            const cols = this.fieldsInfos;
+            templates.push(...this.templateManager.getValidTemplates(cols));
 
-        const assignments: [Template, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols);
+            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 renderedTemplatePromises: Promise<Template | undefined>[] = assignments.map(([template, assgns]) => this.applyGPTContentToTemplate(template, assgns));
+
+            await Promise.all(renderedTemplatePromises);
+        }
 
-        const renderedTemplates: (Template | undefined)[] = await Promise.all(renderedTemplatePromises);
+        templates.forEach(template => template.mainField.initializeDocument({ subfields: [], title: template.title, opts: {}, viewType: ViewType.FREEFORM, tl: [0, 0], br: [900, 900] }));
 
         setTimeout(() => {
             this.setSuggestedTemplates(templates);
@@ -631,17 +638,16 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         });
     };
 
-    renderGPTImageCall = async (template: Template, col: Col, fieldNum: number): Promise<boolean> => {
-        const generateAndLoadImage = async (fieldNum: string, col: Col, prompt: string) => {
+    renderGPTImageCall = async (template: Template, col: Col, fieldNumber: number): Promise<boolean> => {
+        const generateAndLoadImage = async (fieldNum: string, column: Col, prompt: string) => {
             const url = await this.generateGPTImage(prompt);
-            console.log('url: ', url)
             const field: Field = template.getFieldByID(Number(fieldNum));
 
             field.setContent(url ?? '', ViewType.IMG);
             field.setTitle(col.title);
         };
 
-        let fieldContent: string = template.compiledContent;
+        const fieldContent: string = template.compiledContent;
 
         try {
             const sysPrompt =
@@ -652,12 +658,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
             const prompt = await gptAPICall(sysPrompt, GPTCallType.COMPLETEPROMPT);
 
-            await generateAndLoadImage(String(fieldNum), col, prompt);
+            await generateAndLoadImage(String(fieldNumber), col, prompt);
         } catch (e) {
             console.log(e);
         }
         return true;
-    }
+    };
 
     renderGPTTextCall = async (template: Template, col: Col, fieldNum: number): Promise<boolean> => {
         const wordLimit = (size: TemplateFieldSize) => {
@@ -679,20 +685,20 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const textAssignment = `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.sizes[0])} words, assigned field: ${fieldNum} ---`;
 
-        let fieldContent: string = template.compiledContent;
+        const fieldContent: string = template.compiledContent;
 
         try {
             const prompt = fieldContent + textAssignment;
 
             const res = await gptAPICall(`${++this._callCount}: ${prompt}`, GPTCallType.FILL);
 
-            console.log('prompt: ', prompt, ' response: ', res);
+            // console.log('prompt: ', prompt, ' response: ', res);
 
             if (res) {
                 const assignments: { [title: string]: { number: string; content: string } } = JSON.parse(res);
-                Object.entries(assignments).forEach(([title, info]) => {
+                Object.entries(assignments).forEach(([, /* title */ info]) => {
                     const field: Field = template.getFieldByID(Number(info.number));
-                    const col = this.getColByTitle(title);
+                    // const column = this.getColByTitle(title);
 
                     field.setContent(info.content ?? '', ViewType.TEXT);
                     field.setTitle(col.title);
@@ -703,7 +709,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }
 
         return true;
-    }
+    };
 
     createDocsFromTemplate = async (template: Template) => {
         const dv = this._dataViz;
@@ -712,59 +718,72 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         this._docsRendering = true;
 
-        const fields: string[] = Array.from(Object.keys(dv.records[0]));  
+        const fields: string[] = Array.from(Object.keys(dv.records[0]));
         const selectedRows = NumListCast(dv.layoutDoc.dataViz_selectedRows);
-    
-        const processContent = async (content: {[title: string]: string}) => {
-
-            const templateCopy = template.cloneBase(); 
 
-            fields.filter(title => title).forEach(title => {
-                const field = templateCopy.getFieldByTitle(title);
-                if (field === undefined) return;
-                field.setContent(content[title], field.viewType);
-            });
-    
-            const gptPromises = this._userCreatedFields.filter(field => field.type === TemplateFieldType.TEXT).map(field => {
-                const title = field.title;
-                const templateField = templateCopy.getFieldByTitle(title);
-                if (templateField === undefined) return;
-                const templatefieldID = templateField.getID;
-    
-                return this.renderGPTTextCall(templateCopy, field, templatefieldID);
+        const rowContents: { [title: string]: string }[] = selectedRows.map(row => {
+            const values: { [title: string]: string } = {};
+            fields.forEach(col => {
+                values[col] = dv.records[row][col];
             });
 
-            const imagePromises = this._userCreatedFields.filter(field => field.type === TemplateFieldType.VISUAL).map(field => {
-                const title = field.title;
-                const templateField = templateCopy.getFieldByTitle(title);
-                if (templateField === undefined) return;
-                const templatefieldID = templateField.getID;
-    
-                return this.renderGPTImageCall(templateCopy, field, templatefieldID);
-            });
-    
+            return values;
+        });
+
+        const processContent = async (content: { [title: string]: string }) => {
+            const templateCopy = await template.cloneBase();
+
+            fields
+                .filter(title => title)
+                .forEach(title => {
+                    const field = templateCopy.getFieldByTitle(title);
+                    if (field === undefined) return;
+                    field.setContent(content[title], field.viewType);
+                });
+
+            const gptPromises = this._userCreatedFields
+                .filter(field => field.type === TemplateFieldType.TEXT)
+                .map(field => {
+                    const title = field.title;
+                    const templateField = templateCopy.getFieldByTitle(title);
+                    if (templateField === undefined) return;
+                    const templatefieldID = templateField.getID;
+
+                    return this.renderGPTTextCall(templateCopy, field, templatefieldID);
+                });
+
+            const imagePromises = this._userCreatedFields
+                .filter(field => field.type === TemplateFieldType.VISUAL)
+                .map(field => {
+                    const title = field.title;
+                    const templateField = templateCopy.getFieldByTitle(title);
+                    if (templateField === undefined) return;
+                    const templatefieldID = templateField.getID;
+
+                    return this.renderGPTImageCall(templateCopy, field, templatefieldID);
+                });
+
             await Promise.all(gptPromises);
 
             await Promise.all(imagePromises);
-    
-            return templateCopy.getRenderedDoc();
+
+            this._DOCCC = templateCopy.mainField.renderedDoc;
+            return templateCopy.mainField.renderedDoc;
         };
 
-        const rows = [1, 2, 3, 4];
-    
-        //const promises = rowContents.map(content => processContent(content));
-    
-        const promises = rows.map(row => processContent({}));
+        let docs: Promise<Doc>[];
+        if (this.DEBUG_MODE) {
+            docs = [1, 2, 3, 4].map(() => processContent({}));
+        } else {
+            docs = rowContents.map(content => processContent(content));
+        }
 
-        const renderedDocs = await Promise.all(promises);
+        const renderedDocs = await Promise.all(docs);
 
         this._docsRendering = false; // removes loading indicator
 
-        console.log('docs: ', renderedDocs);
-        console.log('first doc height: ', renderedDocs[0]._height);
-
         return renderedDocs;
-    }
+    };
 
     addRenderedCollectionToMainview = () => {
         const collection = this._renderedDocCollection;
@@ -774,7 +793,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         collection.y = this._pageY - this._menuDimensions.height;
         mainCollection.addDocument(collection);
         this.closeMenu();
-    }
+    };
 
     @action setExpandedView = (template: Template | undefined) => {
         if (template) {
@@ -786,8 +805,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }
     };
 
-    get editingWindow(){
-        const rendered = !this._expandedPreview ? null :
+    get editingWindow() {
+        const rendered = !this._expandedPreview ? null : (
             <div className="docCreatorMenu-expanded-template-preview">
                 <DocumentView
                     Document={this._expandedPreview}
@@ -797,13 +816,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     removeDocument={returnFalse}
                     PanelWidth={() => this._menuDimensions.width - 10}
                     PanelHeight={() => this._menuDimensions.height - 60}
-                    ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)}
+                    ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)}
                     renderDepth={5}
                     whenChildContentsActiveChanged={emptyFunction}
                     focus={emptyFunction}
                     styleProvider={DefaultStyleProvider}
                     addDocTab={DocumentViewInternal.addDocTabFunc}
-                    // eslint-disable-next-line no-use-before-define
                     pinToPres={() => undefined}
                     childFilters={returnEmptyFilter}
                     childFiltersByRanges={returnEmptyFilter}
@@ -812,22 +830,34 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     fitWidth={returnFalse}
                 />
             </div>
+        );
 
         return (
             <div className="docCreatorMenu-expanded-template-preview">
-                <div className="top-panel"/>
+                <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, () => {
-                        if (!this._currEditingTemplate) return; 
-                        if (this._currEditingTemplate === this._selectedTemplate) {
-                            this.updateRenderedPreviewCollection(this._currEditingTemplate);
-                        }
-                        this.setExpandedView(undefined);
-                        })}>
+                    <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.updateRenderedPreviewCollection(this._currEditingTemplate);
+                                }
+                                this.setExpandedView(undefined);
+                            })
+                        }>
                         <FontAwesomeIcon icon="minimize" />
                     </button>
-                    <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => {this._currEditingTemplate?.printFieldInfo();/*this._currEditingTemplate?.resetToBase();*/ this.setExpandedView(this._currEditingTemplate);})}>
+                    <button
+                        className="docCreatorMenu-menu-button section-reveal-options top-right-lower"
+                        onPointerDown={e =>
+                            this.setUpButtonClick(e, () => {
+                                this._currEditingTemplate?.printFieldInfo();
+                                /*this._currEditingTemplate?.resetToBase();*/ this.setExpandedView(this._currEditingTemplate);
+                            })
+                        }>
                         <FontAwesomeIcon icon="arrows-rotate" color="white" />
                     </button>
                 </div>
@@ -836,33 +866,32 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     get templatesPreviewContents() {
-
         const GPTOptions = <div></div>;
 
-        const previewDoc = (doc: Doc, template: Template) => 
-        <DocumentView
-        Document={doc}
-        isContentActive={emptyFunction} // !!! should be return false
-        addDocument={returnFalse}
-        moveDocument={returnFalse}
-        removeDocument={returnFalse}
-        PanelWidth={() => this._selectedTemplate === template ? 104 : 111}
-        PanelHeight={() => this._selectedTemplate === template ? 104 : 111}
-        ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)}
-        renderDepth={1}
-        whenChildContentsActiveChanged={emptyFunction}
-        focus={emptyFunction}
-        styleProvider={DefaultStyleProvider}
-        addDocTab={this._props.addDocTab}
-        // eslint-disable-next-line no-use-before-define
-        pinToPres={() => undefined}
-        childFilters={returnEmptyFilter}
-        childFiltersByRanges={returnEmptyFilter}
-        searchFilterDocs={returnEmptyDoclist}
-        fitContentsToBox={returnFalse}
-        fitWidth={returnFalse}
-        hideDecorations={true}
-        />
+        const previewDoc = (doc: Doc, template: Template) => (
+            <DocumentView
+                Document={doc}
+                isContentActive={emptyFunction} // !!! should be return false
+                addDocument={returnFalse}
+                moveDocument={returnFalse}
+                removeDocument={returnFalse}
+                PanelWidth={() => (this._selectedTemplate === template ? 104 : 111)}
+                PanelHeight={() => (this._selectedTemplate === template ? 104 : 111)}
+                ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)}
+                renderDepth={1}
+                whenChildContentsActiveChanged={emptyFunction}
+                focus={emptyFunction}
+                styleProvider={DefaultStyleProvider}
+                addDocTab={this._props.addDocTab}
+                pinToPres={() => undefined}
+                childFilters={returnEmptyFilter}
+                childFiltersByRanges={returnEmptyFilter}
+                searchFilterDocs={returnEmptyDoclist}
+                fitContentsToBox={returnFalse}
+                fitWidth={returnFalse}
+                hideDecorations={true}
+            />
+        );
 
         //<img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
 
@@ -885,30 +914,30 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                         <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
                                     </div>
                                 ) : (
-                                    this._suggestedTemplates
-                                        .map(template => (
-                                            <div
-                                                className="docCreatorMenu-preview-window"
-                                                style={{
-                                                    border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                                                    boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
-                                                }}
-                                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(template)))}>
-                                                <button
-                                                    className="option-button left"
-                                                    onPointerDown={e =>
-                                                        this.setUpButtonClick(e, () => {
-                                                            this.setExpandedView(template);
-                                                        })
-                                                    }>
-                                                    <FontAwesomeIcon icon="magnifying-glass" color="white" />
-                                                </button>
-                                                <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.addUserTemplate(template))}>
-                                                    <FontAwesomeIcon icon="plus" color="white" />
-                                                </button>
-                                                {previewDoc(template.getRenderedDoc(), template)}
-                                            </div>
-                                        ))
+                                    this._suggestedTemplates.map(template => (
+                                        <div
+                                            key={template.toString()}
+                                            className="docCreatorMenu-preview-window"
+                                            style={{
+                                                border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                                                boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                                            }}
+                                            onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(template)))}>
+                                            <button
+                                                className="option-button left"
+                                                onPointerDown={e =>
+                                                    this.setUpButtonClick(e, () => {
+                                                        this.setExpandedView(template);
+                                                    })
+                                                }>
+                                                <FontAwesomeIcon icon="magnifying-glass" color="white" />
+                                            </button>
+                                            <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.addUserTemplate(template))}>
+                                                <FontAwesomeIcon icon="plus" color="white" />
+                                            </button>
+                                            {previewDoc(template.getRenderedDoc(), template)}
+                                        </div>
+                                    ))
                                 )}
                             </div>
                             <div className="docCreatorMenu-GPT-options">
@@ -929,33 +958,33 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 </button>
                             </div>
                             <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this._menuDimensions.width > 400 ? 'center' : '' }}>
-                                <div className="docCreatorMenu-preview-window empty" onPointerDown={e => this.testTemplate()}>
+                                <div className="docCreatorMenu-preview-window empty">
                                     <FontAwesomeIcon icon="plus" color="rgb(160, 160, 160)" />
                                 </div>
-                                {this._userTemplates
-                                    .map(template => (
-                                        <div
-                                            className="docCreatorMenu-preview-window"
-                                            style={{
-                                                border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                                                boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
-                                            }}
-                                            onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(template)))}>
-                                            <button
-                                                className="option-button left"
-                                                onPointerDown={e =>
-                                                    this.setUpButtonClick(e, () => {
-                                                        this.setExpandedView(template);
-                                                    })
-                                                }>
-                                                <FontAwesomeIcon icon="magnifying-glass" color="white" />
-                                            </button>
-                                            <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.removeUserTemplate(template))}>
-                                                <FontAwesomeIcon icon="minus" color="white" />
-                                            </button>
-                                            {previewDoc(template.getRenderedDoc(), template)}
-                                        </div>
-                                    ))}
+                                {this._userTemplates.map(template => (
+                                    <div
+                                        key={template.toString()}
+                                        className="docCreatorMenu-preview-window"
+                                        style={{
+                                            border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                                            boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                                        }}
+                                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(template)))}>
+                                        <button
+                                            className="option-button left"
+                                            onPointerDown={e =>
+                                                this.setUpButtonClick(e, () => {
+                                                    this.setExpandedView(template);
+                                                })
+                                            }>
+                                            <FontAwesomeIcon icon="magnifying-glass" color="white" />
+                                        </button>
+                                        <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this.removeUserTemplate(template))}>
+                                            <FontAwesomeIcon icon="minus" color="white" />
+                                        </button>
+                                        {previewDoc(template.getRenderedDoc(), template)}
+                                    </div>
+                                ))}
                             </div>
                         </div>
                     </div>
@@ -964,7 +993,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         );
     }
 
-
     @action updateXMargin = (input: string) => {
         this._layout.xMargin = Number(input);
         setTimeout(() => {
@@ -985,11 +1013,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     get layoutConfigOptions() {
-        const optionInput = (icon: string, func: Function, def?: number, key?: string, noMargin?: boolean) => {
+        const optionInput = (icon: string, func: (input: string) => void, def?: number, key?: string, noMargin?: boolean) => {
             return (
                 <div className="docCreatorMenu-option-container small no-margin" key={key} style={{ marginTop: noMargin ? '0px' : '' }}>
                     <div className="docCreatorMenu-option-title config layout-config">
-                        <FontAwesomeIcon icon={icon as any} />
+                        <FontAwesomeIcon icon={icon as IconProp} />
                     </div>
                     <input defaultValue={def} onInput={e => func(e.currentTarget.value)} className="docCreatorMenu-input config layout-config" />
                 </div>
@@ -1010,8 +1038,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }
     }
 
-    screenToLocalTransform = () => this._props.ScreenToLocalTransform();
-
     applyLayout = (collection: Doc, docs: Doc[]) => {
         const { horizontalSpan, verticalSpan } = this.previewInfo;
         collection._height = verticalSpan;
@@ -1020,12 +1046,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const columns: number = this._layout.columns ?? this.columnsCount;
         const xGap: number = this._layout.xMargin;
         const yGap: number = this._layout.yMargin;
-        const startX: number = -Number(collection._width)/2;
-        const startY: number = -Number(collection._height)/2;
+        const startX: number = -Number(collection._width) / 2;
+        const startY: number = -Number(collection._height) / 2;
         const docHeight: number = Number(docs[0]._height);
         const docWidth: number = Number(docs[0]._width);
 
-        if (columns === 0 || docs.length === 0){
+        if (columns === 0 || docs.length === 0) {
             return;
         }
 
@@ -1049,16 +1075,16 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     @computed
-    get previewInfo(){
+    get previewInfo() {
         const docHeight: number = Number(this._fullyRenderedDocs[0]._height);
         const docWidth: number = Number(this._fullyRenderedDocs[0]._width);
         const layout = this._layout;
         return {
             docHeight: docHeight,
             docWidth: docWidth,
-            horizontalSpan: (docWidth + layout.xMargin) * (this.columnsCount) - layout.xMargin,
-            verticalSpan: (docHeight + layout.yMargin) * (this.rowsCount) - layout.yMargin,
-        }
+            horizontalSpan: (docWidth + layout.xMargin) * this.columnsCount - layout.xMargin,
+            verticalSpan: (docHeight + layout.yMargin) * this.rowsCount - layout.yMargin,
+        };
     }
 
     /**
@@ -1066,12 +1092,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @type the type of collection the docs should render to (ie. freeform, carousel, card)
      */
     updateRenderedDocCollection = () => {
-        console.log('called');
         if (!this._fullyRenderedDocs) return;
 
-        //const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan;
-
-        const collectionFactory = (): (docs: Doc[], options: DocumentOptions) => Doc => {
+        const collectionFactory = (): ((docs: Doc[], options: DocumentOptions) => Doc) => {
             switch (this._layout.type) {
                 case LayoutType.CAROUSEL3D:
                     return Docs.Create.Carousel3DDocument;
@@ -1086,14 +1109,16 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 default:
                     return Docs.Create.FreeformDocument;
             }
-        }
+        };
 
         const collection = collectionFactory()(this._fullyRenderedDocs, {
             isDefaultTemplateDoc: true,
             title: 'title',
             backgroundColor: 'gray',
             x: 200,
-            y: 200
+            y: 200,
+            _width: 4000,
+            _height: 4000,
         });
 
         this.applyLayout(collection, this._fullyRenderedDocs);
@@ -1104,18 +1129,17 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         mainCollection.addDocument(collection);
 
         console.log('changed to: ', collection);
-    }
-
-    layoutPreviewContents = (id?: number) => {
+    };
 
+    layoutPreviewContents = () => {
         return this._docsRendering ? (
-            <div className="docCreatorMenu-layout-preview-window-wrapper loading" id={String(id) ?? undefined}>
+            <div className="docCreatorMenu-layout-preview-window-wrapper loading">
                 <div className="loading-spinner">
                     <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
-                </div> 
+                </div>
             </div>
-            ) : !this._renderedDocCollection ? null : (
-            <div className="docCreatorMenu-layout-preview-window-wrapper" id={String(id) ?? undefined}>
+        ) : !this._renderedDocCollection ? null : (
+            <div className="docCreatorMenu-layout-preview-window-wrapper">
                 <DocumentView
                     Document={this._renderedDocCollection}
                     isContentActive={emptyFunction}
@@ -1124,13 +1148,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     removeDocument={returnFalse}
                     PanelWidth={() => this._menuDimensions.width - 80}
                     PanelHeight={() => this._menuDimensions.height - 105}
-                    ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)}
+                    ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)}
                     renderDepth={5}
                     whenChildContentsActiveChanged={emptyFunction}
                     focus={emptyFunction}
                     styleProvider={DefaultStyleProvider}
                     addDocTab={this._props.addDocTab}
-                    // eslint-disable-next-line no-use-before-define
                     pinToPres={() => undefined}
                     childFilters={returnEmptyFilter}
                     childFiltersByRanges={returnEmptyFilter}
@@ -1140,13 +1163,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     hideDecorations={true}
                 />
             </div>
-        )
+        );
     };
 
     get optionsMenuContents() {
-        const layoutEquals = (layout: DataVizTemplateLayout) => {}; //TODO: ADD LATER
-
-        const layoutOption = (option: LayoutType, optStyle?: {}, specialFunc?: Function) => {
+        const layoutOption = (option: LayoutType, optStyle?: object, specialFunc?: () => void) => {
             return (
                 <div
                     className="docCreatorMenu-dropdown-option"
@@ -1169,7 +1190,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             return (
                 <div className="docCreatorMenu-option-container">
                     <div className={`docCreatorMenu-option-title config ${specClass}`} style={{ width: width * 0.4, height: height }}>
-                        <FontAwesomeIcon icon={icon as any} />
+                        <FontAwesomeIcon icon={icon as IconProp} />
                     </div>
                     {manual ? (
                         <input className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }} />
@@ -1200,13 +1221,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     </div>
                 </div>
                 {this._layout.type ? this.layoutConfigOptions : null}
-                {this.layoutPreviewContents(this._menuDimensions.width * 0.75)}
+                {this.layoutPreviewContents()}
                 {selectionBox(
                     60,
                     20,
                     'repeat',
                     undefined,
-                    repeatOptions.map(num => <option onPointerDown={e => (this._layout.repeat = num)}>{`${num}x`}</option>)
+                    repeatOptions.map(num => <option key={num} onPointerDown={() => (this._layout.repeat = num)}>{`${num}x`}</option>)
                 )}
                 <hr className="docCreatorMenu-option-divider" />
                 <div className="docCreatorMenu-general-options-container">
@@ -1371,19 +1392,19 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const width: number = ref?.width ?? 0;
 
         return [
-            <div className='docCreatorMenu-resizer top' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: -7}}/>, 
-            <div className='docCreatorMenu-resizer left' onPointerDown={this.onResizePointerDown} style={{height: height, left: -7, top: 0}}/>,
-            <div className='docCreatorMenu-resizer right' onPointerDown={this.onResizePointerDown} style={{height: height, left: width - 3, top: 0}}/>, 
-            <div className='docCreatorMenu-resizer bottom' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: height - 3}}/>,
-            <div className='docCreatorMenu-resizer topLeft' onPointerDown={this.onResizePointerDown} style={{left: -10, top: -10, cursor: 'nwse-resize'}}/>,
-            <div className='docCreatorMenu-resizer topRight' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: -10, cursor: 'nesw-resize'}}/>,
-            <div className='docCreatorMenu-resizer bottomLeft' onPointerDown={this.onResizePointerDown} style={{left: -10, top: height - 5, cursor: 'nesw-resize'}}/>,
-            <div className='docCreatorMenu-resizer bottomRight' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: height - 5, cursor: 'nwse-resize'}}/>,
+            <div className='docCreatorMenu-resizer top' key='0' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: -7}}/>, 
+            <div className='docCreatorMenu-resizer left' key='1' onPointerDown={this.onResizePointerDown} style={{height: height, left: -7, top: 0}}/>,
+            <div className='docCreatorMenu-resizer right' key='2' onPointerDown={this.onResizePointerDown} style={{height: height, left: width - 3, top: 0}}/>, 
+            <div className='docCreatorMenu-resizer bottom' key='3' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: height - 3}}/>,
+            <div className='docCreatorMenu-resizer topLeft' key='4' onPointerDown={this.onResizePointerDown} style={{left: -10, top: -10, cursor: 'nwse-resize'}}/>,
+            <div className='docCreatorMenu-resizer topRight' key='5' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: -10, cursor: 'nesw-resize'}}/>,
+            <div className='docCreatorMenu-resizer bottomLeft' key='6' onPointerDown={this.onResizePointerDown} style={{left: -10, top: height - 5, cursor: 'nesw-resize'}}/>,
+            <div className='docCreatorMenu-resizer bottomRight' key='7' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: height - 5, cursor: 'nwse-resize'}}/>,
         ]; //prettier-ignore
     }
 
     render() {
-        const topButton = (icon: string, opt: string, func: Function, tag: string) => {
+        const topButton = (icon: string, opt: string, func: () => void, tag: string) => {
             return (
                 <div className={`top-button-container ${tag} ${opt === this._menuContent ? 'selected' : ''}`}>
                     <div
@@ -1395,7 +1416,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 })
                             )
                         }>
-                        <FontAwesomeIcon icon={icon as any} />
+                        <FontAwesomeIcon icon={icon as IconProp} />
                     </div>
                 </div>
             );
@@ -1434,11 +1455,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 setupMoveUpEvents(
                                     this,
                                     e,
-                                    e => {
+                                    event => {
                                         this._dragging = true;
                                         this._startPos = { x: 0, y: 0 };
-                                        this._startPos.x = e.pageX - (this._ref?.getBoundingClientRect().left ?? 0);
-                                        this._startPos.y = e.pageY - (this._ref?.getBoundingClientRect().top ?? 0);
+                                        this._startPos.x = event.pageX - (this._ref?.getBoundingClientRect().left ?? 0);
+                                        this._startPos.y = event.pageY - (this._ref?.getBoundingClientRect().top ?? 0);
                                         document.addEventListener('pointermove', this.onDrag);
                                         return true;
                                     },
@@ -1464,26 +1485,3 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         );
     }
 }
-
-export interface DataVizTemplateInfo {
-    doc: Doc;
-    layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number };
-    columns: number;
-    referencePos: { x: number; y: number };
-}
-
-export interface DataVizTemplateLayout {
-    template: Doc;
-    docsNumList: number[];
-    layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number };
-    columns: number;
-    rows: number;
-}
-
-export type Col = {
-    sizes: TemplateFieldSize[];
-    desc: string;
-    title: string;
-    type: TemplateFieldType;
-    defaultContent?: string;
-};