couple more component refactors

1 files changed, 30 insertions, 571 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 1e54c0628..9a84e69a9 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -39,6 +39,8 @@ import { TemplatePreviewGrid } from './Menu/TemplatePreviewGrid';
 import { FireflyStructureOptions, TemplateEditingWindow } from './Menu/TemplateEditingWindow';
 import { DocCreatorMenuButton } from './Menu/DocCreatorMenuButton';
 import { ConditionalsTextArea } from './Menu/ConditionalsTextarea';
+import { TemplatesRenderPreviewWindow } from './Menu/TemplateRenderPreviewWindow';
+import { TemplateMenuFieldOptions } from './Menu/TemplateMenuFieldOptions';
 
 export enum LayoutType {
     FREEFORM = 'Freeform',
@@ -81,12 +83,10 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     // eslint-disable-next-line no-use-before-define
     static Instance: DocCreatorMenu;
 
-    private DEBUG_MODE: boolean = false;
+    DEBUG_MODE: boolean = false;
     private _ref: HTMLDivElement | null = null;
     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[] = [];
@@ -95,12 +95,6 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     @observable _editedTemplateTrail: Template[] = [];
 
     @observable _userCreatedFields: Col[] = [];
-    @observable _collapsedCols: String[] = []; //any columns whose options panels are hidden
-    @observable _currEditingConditional: Conditional = {} as Conditional;
-
-    @observable _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.FREEFORM, yMargin: 10, xMargin: 10, columns: 3, repeat: 0 };
-    @observable _savedLayouts: DataVizTemplateLayout[] = [];
-    @observable _loadingVariants: boolean = false;
 
     @observable _suggestedTemplates: Template[] = [];
     @observable _GPTLoading: boolean = false;
@@ -114,7 +108,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     @observable _startPos?: { x: number; y: number };
     @observable _shouldDisplay: boolean = false;
 
-    @observable _menuContent: 'templates' | 'options' | 'saved' | 'dashboard' | 'templateEditing' = 'templates';
+    @observable _menuContent: 'templates' | 'renderPreview' | 'saved' | 'dashboard' | 'templateEditing' = 'templates';
     @observable _dragging: boolean = false;
     @observable _dataViz?: DataVizBox;
     @observable _interactionLock: boolean | undefined;
@@ -138,8 +132,6 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     @action setDataViz = (dataViz: DataVizBox) => {
         this._dataViz = dataViz;
         this._selectedTemplate = undefined;
-        this._renderedDocCollection = undefined;
-        this._fullyRenderedDocs = [];
         this._suggestedTemplates = [];
         this._userCreatedFields = [];
     };
@@ -147,36 +139,6 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         this._suggestedTemplates = templates; //prettier-ignore
     };
 
-    @computed get docsToRender() {
-        if (this.DEBUG_MODE) {
-            return [1, 2, 3, 4];
-        } else {
-            return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
-        }
-    }
-
-    @computed get rowsCount() {
-        switch (this._layout.type) {
-            case LayoutType.FREEFORM:
-                return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0;
-            case LayoutType.CAROUSEL3D:
-                return 1.8;
-            default:
-                return 1;
-        }
-    }
-
-    @computed get columnsCount() {
-        switch (this._layout.type) {
-            case LayoutType.FREEFORM:
-                return this._layout.columns ?? 0;
-            case LayoutType.CAROUSEL3D:
-                return 3;
-            default:
-                return 1;
-        }
-    }
-
     @computed get selectedFields() {
         return StrListCast(this._dataViz?.layoutDoc._dataViz_axes);
     }
@@ -203,10 +165,6 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
             .concat(this._userCreatedFields);
     }
 
-    @computed get canMakeDocs() {
-        return this._selectedTemplate !== undefined && this._layout !== undefined;
-    }
-
     get bounds(): { t: number; b: number; l: number; r: number } {
         const rect = this._ref?.getBoundingClientRect();
         const bounds = { t: rect?.top ?? 0, b: rect?.bottom ?? 0, l: rect?.left ?? 0, r: rect?.right ?? 0 };
@@ -356,12 +314,8 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         this._pageX = x + translation.x;
         this._pageY = y + translation.y;
     };
-
-    @action updateRenderedPreviewCollection = async (template: Template) => {
-        this._docsRendering = true;
-        this._fullyRenderedDocs = this._dataViz ? ((await this.templateManager.createDocsFromTemplate(this._dataViz, template, this.fieldsInfos, this.DEBUG_MODE)).filter(doc => doc).map(doc => doc!) ?? []) as unknown as Doc[] : [];
-        this.updateRenderedDocCollection();
-    };
+    
+    async createDocsForPreview(): Promise<Doc[]> { return this._dataViz && this._selectedTemplate ? ((await this.templateManager.createDocsFromTemplate(this._dataViz, this._selectedTemplate, this.fieldsInfos, this.DEBUG_MODE)).filter(doc => doc).map(doc => doc!) ?? []) as unknown as Doc[] : []; }
 
     @action updateSelectedTemplate = async (template: Template) => {
         if (this._selectedTemplate === template) {
@@ -369,53 +323,12 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
             return;
         } else {
             this._selectedTemplate = template;
-            this.updateRenderedPreviewCollection(template);
         }
     };
 
-    @action updateSelectedSavedLayout = (layout: DataVizTemplateLayout) => {
-        this._layout.xMargin = layout.layout.xMargin;
-        this._layout.yMargin = layout.layout.yMargin;
-        this._layout.type = layout.layout.type;
-        this._layout.columns = layout.columns;
-    };
-
-    isSelectedLayout = (layout: DataVizTemplateLayout) => {
-        return this._layout.xMargin === layout.layout.xMargin && this._layout.yMargin === layout.layout.yMargin && this._layout.type === layout.layout.type && this._layout.columns === layout.columns;
-    };
-
-    editTemplate = (doc: Doc) => {
-        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);
-        // })
-
-        // this.forceUpdate();
-
-        // try {
-        //     const res = await gptImageCall('Image of panda eating a cookie');
-
-        //     if (res) {
-        //         const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
-
-        //         console.log(result);
-        //     }
-        // } catch (e) {
-        //     console.log(e);
-        // }
-    };
+    // testTemplate = async () => {
+    //     this._suggestedTemplates = this.templateManager.templates; //prettier-ignore
+    // };
 
     @action addField = () => {
         const newFields: Col[] = this._userCreatedFields.concat([{ title: '', type: TemplateFieldType.UNSET, desc: '', sizes: [], AIGenerated: true }]);
@@ -607,8 +520,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         this.variations.push(url);
     }
 
-    addRenderedCollectionToMainview = () => {
-        const collection = this._renderedDocCollection;
+    addRenderedCollectionToMainview = (collection: Doc) => {
         if (collection) {
             const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
             collection.x = this._pageX - this._menuDimensions.width;
@@ -634,484 +546,34 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         //Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''});
     };
 
-    @action updateXMargin = (input: string) => {
-        this._layout.xMargin = Number(input);
-        setTimeout(() => {
-            if (!this._renderedDocCollection || !this._fullyRenderedDocs) return;
-            this.applyLayout(this._renderedDocCollection, this._fullyRenderedDocs);
-        });
-    };
-    @action updateYMargin = (input: string) => {
-        this._layout.yMargin = Number(input);
-        setTimeout(() => {
-            if (!this._renderedDocCollection || !this._fullyRenderedDocs) return;
-            this.applyLayout(this._renderedDocCollection, this._fullyRenderedDocs);
-        });
-    };
-    @action updateColumns = (input: string) => {
-        this._layout.columns = Number(input);
-        this.updateRenderedDocCollection();
-    };
-
-    get layoutConfigOptions() {
-        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 IconProp} />
-                    </div>
-                    <input defaultValue={def} onInput={e => func(e.currentTarget.value)} className="docCreatorMenu-input config layout-config" />
-                </div>
-            );
-        };
-
-        switch (this._layout.type) {
-            case LayoutType.FREEFORM:
-                return (
-                    <div className="docCreatorMenu-configuration-bar">
-                        {optionInput('arrows-up-down', this.updateYMargin, this._layout.xMargin, '2')}
-                        {optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '3')}
-                        {optionInput('table-columns', this.updateColumns, this._layout.columns, '4', true)}
-                    </div>
-                );
-            default:
-                break;
-        }
-    }
-
-    applyLayout = (collection: Doc, docs: Doc[]) => {
-        const { horizontalSpan, verticalSpan } = this.previewInfo;
-        collection._height = verticalSpan;
-        collection._width = horizontalSpan;
-
-        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 docHeight: number = Number(docs[0]._height);
-        const docWidth: number = Number(docs[0]._width);
-
-        if (columns === 0 || docs.length === 0) {
-            return;
-        }
-
-        let i: number = 0;
-        let docsChanged: number = 0;
-        let curX: number = startX;
-        let curY: number = startY;
-
-        while (docsChanged < docs.length) {
-            while (i < columns && docsChanged < docs.length) {
-                docs[docsChanged].x = curX;
-                docs[docsChanged].y = curY;
-                curX += docWidth + xGap;
-                ++docsChanged;
-                ++i;
-            }
-            i = 0;
-            curX = startX;
-            curY += docHeight + yGap;
-        }
-    };
-
-    @computed
-    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,
-        };
-    }
-
-    /**
-     * Updates the preview that shows how all docs will be rendered in the chosen collection type.
-    @type the type of collection the docs should render to (ie. freeform, carousel, card)
-     */
-    updateRenderedDocCollection = () => {
-        if (!this._fullyRenderedDocs) return;
-
-        const collectionFactory = (): ((docs: Doc[], options: DocumentOptions) => Doc) => {
-            switch (this._layout.type) {
-                case LayoutType.CAROUSEL3D: return Docs.Create.Carousel3DDocument;
-                case LayoutType.FREEFORM:   return Docs.Create.FreeformDocument;
-                case LayoutType.CARD:       return Docs.Create.CardDeckDocument;
-                case LayoutType.MASONRY:    return Docs.Create.MasonryDocument;
-                case LayoutType.CAROUSEL:   return Docs.Create.CarouselDocument;
-                default:                    return Docs.Create.FreeformDocument;
-            } // prettier-ignore
-        };
-
-        const collection = collectionFactory()(this._fullyRenderedDocs, {
-            isDefaultTemplateDoc: true,
-            title: 'title',
-            backgroundColor: 'gray',
-            x: 200,
-            y: 200,
-            _width: 4000,
-            _height: 4000,
-        });
-
-        this.applyLayout(collection, this._fullyRenderedDocs);
-
-        this._renderedDocCollection = collection;
-
-        this._docsRendering = false;
-
-        this.forceUpdate();
-    };
-
-    layoutPreviewContents = action(() => {
-        return this._docsRendering ? (
-            <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>
-        ) : !this._renderedDocCollection ? null : (
-            <div className="docCreatorMenu-layout-preview-window-wrapper">
-                <DocumentView
-                    Document={this._renderedDocCollection}
-                    isContentActive={emptyFunction}
-                    addDocument={returnFalse}
-                    moveDocument={returnFalse}
-                    removeDocument={returnFalse}
-                    PanelWidth={() => this._menuDimensions.width - 80}
-                    PanelHeight={() => this._menuDimensions.height - 105}
-                    ScreenToLocalTransform={() => new Transform(-this._pageX - 5, -this._pageY - 35, 1)}
-                    renderDepth={5}
-                    whenChildContentsActiveChanged={emptyFunction}
-                    focus={emptyFunction}
-                    styleProvider={DefaultStyleProvider}
-                    addDocTab={this._props.addDocTab}
-                    pinToPres={() => undefined}
-                    childFilters={returnEmptyFilter}
-                    childFiltersByRanges={returnEmptyFilter}
-                    searchFilterDocs={returnEmptyDoclist}
-                    fitContentsToBox={returnFalse}
-                    fitWidth={returnFalse}
-                    hideDecorations={true}
+    @computed 
+    get templatesView() { return (
+        <div className='docCreatorMenu-templates-view'>
+            <div className="docCreatorMenu-templates-displays">
+                <TemplatePreviewGrid 
+                    title={'Suggested Templates'} 
+                    menu={this} 
+                    loading={this._GPTLoading}
+                    optionsButtonOpts={this.optionsButtonOpts}
+                    templates={this._suggestedTemplates}
                 />
-            </div>
-        );
-    });
-
-    get optionsMenuContents() {
-        const layoutOption = (option: LayoutType, optStyle?: object, specialFunc?: () => void) => {
-            return (
-                <div
-                    className="docCreatorMenu-dropdown-option"
-                    style={optStyle}
-                    onPointerDown={e =>
-                        this.setUpButtonClick(e, () => {
-                            specialFunc?.();
-                            runInAction(() => {
-                                this._layout.type = option;
-                                this.updateRenderedDocCollection();
-                            });
-                        })
-                    }>
-                    {option}
-                </div>
-            );
-        };
-
-        const selectionBox = (width: number, height: number, icon: string, specClass?: string, options?: JSX.Element[], manual?: boolean): JSX.Element => {
-            return (
-                <div className="docCreatorMenu-option-container">
-                    <div className={`docCreatorMenu-option-title config ${specClass}`} style={{ width: width * 0.4, height: height }}>
-                        <FontAwesomeIcon icon={icon as IconProp} />
+                <div className="docCreatorMenu-GPT-options">
+                    <div className="docCreatorMenu-GPT-options-container">
+                        <DocCreatorMenuButton icon={'arrows-rotate'} styles={'border'} function={this.generatePresetTemplates}/>
                     </div>
-                    {manual ? (
-                        <input className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }} />
-                    ) : (
-                        <select className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }}>
-                            {options}
-                        </select>
-                    )}
-                </div>
-            );
-        };
-
-        const repeatOptions = [0, 1, 2, 3, 4, 5];
-
-        return (
-            <div className="docCreatorMenu-menu-container">
-                <div className="docCreatorMenu-option-container layout">
-                    <div className="docCreatorMenu-dropdown-hoverable">
-                        <div className="docCreatorMenu-option-title">{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}</div>
-                        <div className="docCreatorMenu-dropdown-content">
-                            {layoutOption(LayoutType.FREEFORM, undefined, () => {
-                                if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
-                            })}
-                            {layoutOption(LayoutType.CAROUSEL)}
-                            {layoutOption(LayoutType.CAROUSEL3D)}
-                            {layoutOption(LayoutType.MASONRY)}
-                        </div>
-                    </div>
-                </div>
-                {this._layout.type ? this.layoutConfigOptions : null}
-                {this.layoutPreviewContents()}
-                {selectionBox(
-                    60,
-                    20,
-                    'repeat',
-                    undefined,
-                    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">
-                    <button
-                        className="docCreatorMenu-save-layout-button"
-                        onPointerDown={e =>
-                            setupMoveUpEvents(
-                                this,
-                                e,
-                                returnFalse,
-                                emptyFunction,
-                                undoable(clickEv => {
-                                    clickEv.stopPropagation();
-                                    if (!this._selectedTemplate || !this._selectedTemplate.getRenderedDoc()) return;
-                                    const layout: DataVizTemplateLayout = {
-                                        template: this._selectedTemplate.getRenderedDoc()!,
-                                        layout: { type: this._layout.type, xMargin: this._layout.xMargin, yMargin: this._layout.yMargin, repeat: 0 },
-                                        columns: this.columnsCount,
-                                        rows: this.rowsCount,
-                                        docsNumList: this.docsToRender,
-                                    };
-                                    if (!this._savedLayouts.includes(layout)) {
-                                        this._savedLayouts.push(layout);
-                                    }
-                                }, 'make docs')
-                            )
-                        }>
-                        <FontAwesomeIcon icon="floppy-disk" />
-                    </button>
-                    <button
-                        className="docCreatorMenu-create-docs-button"
-                        style={{ backgroundColor: this.canMakeDocs ? '' : 'rgb(155, 155, 155)', border: this.canMakeDocs ? '' : 'solid 2px rgb(180, 180, 180)' }}
-                        onPointerDown={e =>
-                            setupMoveUpEvents(
-                                this,
-                                e,
-                                returnFalse,
-                                emptyFunction,
-                                undoable(clickEv => {
-                                    clickEv.stopPropagation();
-                                    if (!this._selectedTemplate) return;
-                                    this.addRenderedCollectionToMainview();
-                                }, 'make docs')
-                            )
-                        }>
-                        <FontAwesomeIcon icon="plus" />
-                    </button>
                 </div>
             </div>
-        );
-    }
-
-    @observable private _newCondCache: Record<string, Conditional> = {};
-
-    getParams = (title: string, parameters?: Conditional): Conditional => {
-        if (parameters) return parameters;
-
-        if (!this._newCondCache[title]) {
-            this._newCondCache[title] = observable<Conditional>({
-                field: title,
-                operator: '=',
-                condition: '',
-                target: '',
-                attribute: '',
-                value: ''
-            });
-        }
-        return this._newCondCache[title];
-    };
-
-    get dashboardContents() {
-        const contentFieldTitles = this.fieldsInfos.filter(field => field.type !== TemplateFieldType.DATA).map(field => field.title).concat('Template');
-
-        const conditionForm = (title: string, parameters?: Conditional, empty: boolean = false) => {
-
-            var params: Conditional = this.getParams(title, parameters);
-
-            return (
-            <div className='form'>
-                <div className='form-row'>
-                    <div className='form-row-plain-text'>If</div>
-                    <div className='form-row-plain-text'>{title}</div>
-                    <div className="operator-options-dropdown">
-                        <span className="operator-dropdown-current">{params.operator ?? '='}</span>
-                        <div className='operator-dropdown-option' onPointerDown={() => {params.operator = '='}}>{'='}</div>
-                        <div className='operator-dropdown-option' onPointerDown={() => {params.operator = '>'}}>{'>'}</div>
-                        <div className='operator-dropdown-option' onPointerDown={() => {params.operator = '<'}}>{'<'}</div>
-                        <div className='operator-dropdown-option' onPointerDown={() => {params.operator = 'contains'}}>{'has'}</div>
-                    </div>
-                    <input
-                        className="form-row-textarea"
-                        onChange={e => runInAction(() => params.condition = e.target.value)}
-                        placeholder='value'
-                        value={params.condition}
-                    />
-                    <div className='form-row-plain-text'>then</div>
-                    <div className="operator-options-dropdown">
-                        <span className="operator-dropdown-current">{params.target}</span>
-                        {contentFieldTitles.map(fieldTitle => 
-                            <div className='operator-dropdown-option' onPointerDown={() => {params.target = fieldTitle}}>{fieldTitle === title ? 'Own' : fieldTitle}</div>
-                        )}
-                    </div>
-                    <input
-                        className="form-row-textarea"
-                        onChange={e => runInAction(() => params.attribute = e.target.value)}
-                        placeholder='attribute'
-                        value={params.attribute}
-                    />
-                    <div className='form-row-plain-text'>{'becomes'}</div>
-                    <input
-                        className="form-row-textarea"
-                        onChange={e => runInAction(() => params.value = e.target.value)}
-                        placeholder='value'
-                        value={params.value}
-                    />
-                </div>
-                {empty ? 
-                <DocCreatorMenuButton icon={'plus'} styles={'float-right border'} function={() => {
-                    this._newCondCache[title] = observable<Conditional>({
-                        field: title,
-                        operator: '=',
-                        condition: '',
-                        target: '',
-                        attribute: '',
-                        value: ''
-                    });
-                    this.templateManager.addFieldCondition(title, params);
-                }}/>
-                :
-                <DocCreatorMenuButton icon={'minus'} styles={'float-right border'} function={() => this.templateManager.removeFieldCondition(title, params)}/>
-                }
-            </div>
-            )
-        }
-
-        const fieldPanel = (field: Col, id: number) => (
-            <div className="field-panel" key={id}>
-                <div className="top-bar" onPointerDown={e => this.setUpButtonClick(e, runInAction(() => () => {
-                    if (this._collapsedCols.includes(field.title)) {
-                        this._collapsedCols = this._collapsedCols.filter(col => col !== field.title);
-                    } else {
-                        this._collapsedCols.push(field.title);
-                    }
-                }))}>
-                    <span className="field-title">{`${field.title} Field`}</span>
-                    <DocCreatorMenuButton icon={'minus'} styles={'no-margin absolute-right'} function={() => this.removeField(field)}/>
-                </div>
-                { this._collapsedCols.includes(field.title) ? null :
-                    <>
-                    <div className="opts-bar">
-                        <div className="opt-box">
-                            <div className="top-bar"> Title </div>
-                            <textarea className="content" style={{ width: '100%', height: 'calc(100% - 20px)' }} value={field.title} placeholder={'Enter title'} onChange={e => this.setColTitle(field, e.target.value)} />
-                        </div>
-                        <div className="opt-box">
-                            <div className="top-bar"> Type </div>
-                            <div className="content">
-                                <span className="type-display">{
-                                    field.type === TemplateFieldType.TEXT ? 'Text Field' 
-                                    : field.type === TemplateFieldType.VISUAL ? 'File Field' 
-                                    : field.type === TemplateFieldType.DATA ? 'Data Field' 
-                                    : ''
-                                }</span>
-                                <div className="bubbles">
-                                    <input className="bubble" type="radio" name="type" onClick={() => this.setColType(field, TemplateFieldType.TEXT)} />
-                                    <div className="text">Text</div>
-                                    <input className="bubble" type="radio" name="type" onClick={() => this.setColType(field, TemplateFieldType.VISUAL)} />
-                                    <div className="text">File</div>
-                                    <input className="bubble" type="radio" name="type" onClick={() => this.setColType(field, TemplateFieldType.DATA)} />
-                                    <div className="text">Data</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    { field.type === TemplateFieldType.DATA ? null :
-                        (<> 
-                            <div className="sizes-box">
-                                <div className="top-bar"> Valid Sizes </div>
-                                <div className="content">
-                                    <div className="bubbles">
-                                        {Object.values(TemplateFieldSize).map(size => (
-                                            <div key={field + size}>
-                                                <input className="bubble" type="checkbox" name="type" checked={field.sizes.includes(size)} onChange={e => this.modifyColSizes(field, size, e.target.checked)} />
-                                                <div className="text">{size}</div>
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="desc-box">
-                                <div className="top-bar"> Prompt </div>
-                                <textarea
-                                    className="content"
-                                    onChange={e => this.setColDesc(field, e.target.value)}
-                                    defaultValue={field.desc === this._dataViz?.GPTSummary?.get(field.title)?.desc ? '' : field.desc}
-                                    placeholder={this._dataViz?.GPTSummary?.get(field.title)?.desc ?? 'Add a description/prompt to help with template generation.'}
-                                />
-                            </div> 
-                        </>)
-                    }
-                    <div className="conditionals-section">
-                        <span className="conditionals-title">Conditional Logic</span>
-                        {conditionForm(field.title, undefined, true)}
-                        {this.templateManager.conditionalFieldLogic[field.title]?.map(condition => conditionForm(condition.field, condition))}
-                    </div>
-                    </>
-                }
-            </div>
-        );
-
-        return (
-            <div className="docCreatorMenu-dashboard-view">
-                <div className="topbar">
-                    <DocCreatorMenuButton icon={'plus'} function={this.addField}/>
-                    <DocCreatorMenuButton icon={'arrow-left'} styles={'float-right'} function={() => runInAction(() => (this._menuContent = 'templates'))}/>
-                </div>
-                <div className="panels-container">{this.fieldsInfos.map((field, i) => fieldPanel(field, i))}</div>
-            </div>
-        );
-    }
-
-    @computed get editingView() { return <TemplateEditingWindow template={this._currEditingTemplate as Template} menu={this} /> }
+        </div>
+    )};
     
     private optionsButtonOpts: [IconProp, () => any] = ['gear', () => (this._menuContent = 'dashboard')];
 
     get renderSelectedViewType() {
         switch (this._menuContent) {
-            case 'templates': 
-                return (
-                    <div className='docCreatorMenu-templates-view'>
-                        <div className="docCreatorMenu-templates-displays">
-                            <TemplatePreviewGrid 
-                                title={'Suggested Templates'} 
-                                menu={this} 
-                                loading={this._GPTLoading}
-                                optionsButtonOpts={this.optionsButtonOpts}
-                                templates={this._suggestedTemplates}
-                            />
-                            <div className="docCreatorMenu-GPT-options">
-                                <div className="docCreatorMenu-GPT-options-container">
-                                    <DocCreatorMenuButton icon={'arrows-rotate'} styles={'border'} function={this.generatePresetTemplates}/>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                )
-            case 'templateEditing':
-                return this.editingView
-            case 'options':   return this.optionsMenuContents;
-            case 'dashboard': return this.dashboardContents;
+            case 'templates':       return this.templatesView;
+            case 'templateEditing': return <TemplateEditingWindow template={this._currEditingTemplate as Template} menu={this} />;
+            case 'renderPreview':   return <TemplatesRenderPreviewWindow menu={this}/>;
+            case 'dashboard':       return <TemplateMenuFieldOptions menu={this} templateManager={this.templateManager}/>;
         } // prettier-ignore
         return undefined;
     }
@@ -1144,10 +606,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
 
         const onPreviewSelected = () => (this._menuContent = 'templates');
         const onSavedSelected = () => (this._menuContent = 'dashboard');
-        const onOptionsSelected = () => {
-            this._menuContent = 'options';
-            if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
-        };
+        const onOptionsSelected = () => (this._menuContent = 'renderPreview');
 
         return (
             <div className="docCreatorMenu">