text and images are no longer messed up

8 files changed, 46 insertions, 36 deletions

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 29b6ab989..57a229569 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -101,7 +101,7 @@ const callTypeMap: { [type in GPTCallType]: GPTCallOpts } = {
         prompt: "BRIEFLY (<50 words) describe any differences between the rubric and the user's answer answer in second person. If there are no differences, say correct",
     },
     template: {
-        model: 'gpt-4-turbo',
+        model: 'gpt-4.1',
         maxTokens: 512,
         temp: 0.5,
         prompt: 'You will be given a list of field descriptions for one or more templates in the format {field #0: “description”}{field #1: “description”}{...}, and a list of column descriptions in the format {“title”: “description”}{...}. Your job is to match columns with fields based on their descriptions. Your output should be in the following JSON format: {“template_title”:{“#”: “title”, “#”: “title”, “#”: “title” …}, “template_title”:{“#”: “title”, “#”: “title”, “#”: “title” …}} where “template_title” is the templates title as specified in the description provided,  # represents the field # and “title” the title of the column assigned to it. A filled out example might look like {“fivefield2”:{“0”:”Name”, “1”:”Image”, “2”:”Caption”, “3”:”Position”, “4”:”Stats”}, “fivefield3”:{0:”Image”, 1:”Name”, 2:”Caption”, 3:”Stats”, 4:”Position”}. Include one object for each template. IT IS VERY IMPORTANT THAT YOU ONLY INCLUDE TEXT IN THE FORMAT ABOVE, WITH NO ADDITIONS WHATSOEVER. Do not include extraneous ‘#’ characters, ‘column’ for columns, or ‘template’ for templates: ONLY THE TITLES AND NUMBERS. There should never be one column assigned to more than one field (ie. if the “name” column is assigned to field 1, it can’t be assigned to any other fields) . Do this for each template whose fields are described. The descriptions are as follows:',
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
index 082ebb7dc..9fb973265 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -705,6 +705,19 @@
     }
 }
 
+.loading-spinner {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    z-index: 200;
+    font-size: 20px;
+    font-weight: bold;
+    color: #17175e;
+}
+
 .docCreatorMenu-layout-preview-window-wrapper {
     flex: 0 0 auto;
     display: flex;
@@ -791,6 +804,8 @@
     }
 }
 
+
+
 //------------------------------------------------------------------------------------------------------------------------------------------
 // DocCreatorMenu dashboard CSS
 //--------------------------------------------------------------------------------------------------------------------------------------------
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 2ddaa214c..7beb93636 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -88,7 +88,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     // eslint-disable-next-line no-use-before-define
     static Instance: DocCreatorMenu;
 
-    private DEBUG_MODE: boolean = true;
+    private DEBUG_MODE: boolean = false;
     private _ref: HTMLDivElement | null = null;
     private templateManager: TemplateManager;
 
@@ -594,7 +594,6 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     };
 
     generateVariations = async (onDoc: Doc, prompt: string): Promise<string[]> => {
-        this._loadingVariants = true;
         this.variations = [];
         const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
 
@@ -605,8 +604,6 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
 
         await DrawingFillHandler.drawingToImage(clone, 100, prompt, undefined, this)
 
-        this._loadingVariants = false;
-
         return this.variations;
     }
 
@@ -1075,6 +1072,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                             <TemplatePreviewGrid 
                                 title={'Suggested Templates'} 
                                 menu={this} 
+                                loading={this._GPTLoading}
                                 optionsButtonOpts={['gear', () => (this._menuContent = 'dashboard')]}
                                 setupButtonClick={this.setUpButtonClick} 
                                 templates={this._suggestedTemplates}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
index fa84616cc..8b58ac1cf 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
@@ -15,7 +15,6 @@ import { TemplateMenuAIUtils } from "../Backend/TemplateMenuAIUtils";
 import { ObservableReactComponent } from "../../../../ObservableReactComponent";
 import { IDisposer } from "mobx-utils";
 import { ImageField } from "../../../../../../fields/URLField";
-import { TemplatePreviewBoxProps } from "./TemplatePreviewBox";
 
 interface TemplateEditingWindowProps {
     menu: DocCreatorMenu;
@@ -61,12 +60,6 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
         }
     }
 
-    func = () => {
-        this._props.menu._variations.forEach(variation => {
-            variation.setImageAsBackground('https://www.onthegotours.com/repository/Great-Wall-New-Pic-228551391689622.jpg', true)
-        });
-    }
-
     get fireflyVariationsTab() {
 
         return (
@@ -77,7 +70,7 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                     title={'Generate Variations'}
                     loading={this._loading}
                     templates={this._props.menu._variations}
-                    optionsButtonOpts={['gear', this.func]}
+                    optionsButtonOpts={['gear', () => {}]}
                     setupButtonClick={this._props.setupButtonClick}
                     previewBoxRightButtonOpts={['gear', (template: Template) => {this.forceUpdate();}]}
                 />
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
index e94ddfc15..c9f817d2f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
@@ -1,5 +1,5 @@
 import { Colors } from "@dash/components/src";
-import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import { Template } from "../Template";
 import { reaction, runInAction } from "mobx";
 import React from "react";
@@ -15,15 +15,17 @@ import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc";
 import { IDisposer } from "mobx-utils";
 import { ImageField } from "../../../../../../fields/URLField";
 import { ImageCast } from "../../../../../../fields/Types";
+import { observer } from "mobx-react";
 
-export interface TemplatePreviewBoxProps {
+export interface TemplatePreviewBox_props {
     template: Template;
     menu: DocCreatorMenu;
     leftButtonOpts?: [icon: IconProp, func: (...args: any) => void]
     rightButtonOpts?: [icon: IconProp, func: (...args: any) => void]
 }
 
-export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> {
+@observer
+export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBox_props> {
 
     private previewWindow: HTMLDivElement | null = null;
     // private icon: ImageField | undefined = undefined;
@@ -51,11 +53,11 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview
     // }
 
     get doc() {
-        return this.props.template.getRenderedDoc() as Doc;
+        return this._props.template.getRenderedDoc() as Doc;
     }
 
     render() {
-        const template = this.props.template;
+        const template = this._props.template;
 
         return (
             <div
@@ -63,23 +65,23 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview
                 className="docCreatorMenu-preview-window"
                 ref={this.setContainerRef}
                 style={{
-                    border: this.props.menu._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                    boxShadow: this.props.menu._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                    border: this._props.menu._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                    boxShadow: this._props.menu._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
                 }}
-                onPointerDown={e => this.props.menu.setUpButtonClick(e, () => runInAction(() => {console.log('setting'); this.props.menu._selectedTemplate = template}))}
+                onPointerDown={e => this._props.menu.setUpButtonClick(e, () => this._props.menu.updateSelectedTemplate(template))}
                 >
-                    { this.props.leftButtonOpts ? 
+                    { this._props.leftButtonOpts ? 
                     <button
                         className="option-button left"
                         onPointerDown={e =>
-                            this.props.menu.setUpButtonClick(e, () => this.props.leftButtonOpts![1](template))
+                            this._props.menu.setUpButtonClick(e, () => this._props.leftButtonOpts![1](template))
                         }>
-                        <FontAwesomeIcon icon={this.props.leftButtonOpts![0]} color="white" />
+                        <FontAwesomeIcon icon={this._props.leftButtonOpts![0]} color="white" />
                     </button> : null
                     }
-                    { this.props.rightButtonOpts ? 
-                    <button className="option-button right" onPointerDown={e => this.props.menu.setUpButtonClick(e, () => this.props.rightButtonOpts![1](template))}>
-                        <FontAwesomeIcon icon={this.props.rightButtonOpts![0]} color="white" />
+                    { this._props.rightButtonOpts ? 
+                    <button className="option-button right" onPointerDown={e => this._props.menu.setUpButtonClick(e, () => this._props.rightButtonOpts![1](template))}>
+                        <FontAwesomeIcon icon={this._props.rightButtonOpts![0]} color="white" />
                     </button> : null }
                     {/* { this.icon ? 
                         <img className="docCreatorMenu-preview-image" src={this.icon.url.href.replace('.png', '_o.png')} /> */}
@@ -89,14 +91,14 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview
                         addDocument={returnFalse}
                         moveDocument={returnFalse}
                         removeDocument={returnFalse}
-                        PanelWidth={() => this.previewWindow?.clientWidth ?? this.props.menu._menuDimensions.height * .3}
-                        PanelHeight={() => this.previewWindow?.clientHeight ?? this.props.menu._menuDimensions.height * .3}
-                        ScreenToLocalTransform={() => new Transform(-this.props.menu._pageX - 5, -this.props.menu._pageY - 35, 1)}
+                        PanelWidth={() => this.previewWindow?.clientWidth ?? this._props.menu._menuDimensions.height * .3}
+                        PanelHeight={() => this.previewWindow?.clientHeight ?? this._props.menu._menuDimensions.height * .3}
+                        ScreenToLocalTransform={() => new Transform(-this._props.menu._pageX - 5, -this._props.menu._pageY - 35, 1)}
                         renderDepth={1}
                         whenChildContentsActiveChanged={emptyFunction}
                         focus={emptyFunction}
                         styleProvider={DefaultStyleProvider}
-                        addDocTab={this.props.menu._props.addDocTab}
+                        addDocTab={this._props.menu._props.addDocTab}
                         pinToPres={() => undefined}
                         childFilters={returnEmptyFilter}
                         childFiltersByRanges={returnEmptyFilter}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts
index ee8bcef51..5fba68c14 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts
@@ -58,7 +58,7 @@ export class DynamicField extends TemplateField {
     // implement Field's abstract method for replacing a subfield with a new one
     exchangeFields(newField: TemplateField, oldField: TemplateField) {
         this._subfields.splice(this._subfields.indexOf(oldField), 1, newField);
-        this.initRenderDoc(this._settings);
+        this.refreshRenderedDoc();
     }
 
     get isContentField(): boolean {
@@ -84,7 +84,6 @@ export class DynamicField extends TemplateField {
     }
 
     initRenderDoc = (settings: FieldSettings) => {
-        console.log('initializing')
         this._disposers.fieldList = reaction(() => DocListCast(this._renderDoc?.[Doc.LayoutFieldKey(this._renderDoc)]), this.handleFieldUpdate);
         this._subfields = settings.subfields?.map((fieldSettings, index) => {return TemplateField.CreateField(fieldSettings, index, this)}) || [];
         const renderedSubfields = this._subfields.filter(field => field.renderedDoc).map(field => field.renderedDoc!);
@@ -98,7 +97,6 @@ export class DynamicField extends TemplateField {
     };
 
     refreshRenderedDoc = () => {
-        console.log('refreshing');
         const renderedSubfields = this._subfields.filter(field => field.renderedDoc).map(field => field.renderedDoc!);
         this._renderDoc = (() => { switch (this.settings.viewType) {
             case ViewType.CAROUSEL3D: return Docs.Create.Carousel3DDocument(renderedSubfields, this.settings.opts);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts
index 625a7bc4a..420d03076 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts
@@ -1,3 +1,4 @@
+import { FontSize } from '@dash/components';
 import { FieldResult } from '../../../../../../fields/Doc';
 import { DocData } from '../../../../../../fields/DocSymbols';
 import { RichTextField } from '../../../../../../fields/RichTextField';
@@ -40,7 +41,8 @@ export class ImageTemplateField extends StaticContentField {
 
 export class TextTemplateField extends StaticContentField {
     setContent(text: string, type?: ViewType) {
-        this.setDataContent(ViewType.TEXT, 'text', RichTextField.textToRtf(text), text, type);
+        const fontSize: number = TemplateFieldUtils.calculateFontSize(this._dimensions?.width ?? 10, this._dimensions?.height ?? 10, text, true);
+        this.setDataContent(ViewType.TEXT, 'text', RichTextField.textToRtf(text, undefined, {fontSize: fontSize}), text, type);
     }
 
     initRenderDoc(settings: FieldSettings) {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
index e178756f9..e2779968d 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
@@ -62,7 +62,7 @@ export abstract class TemplateField {
     abstract getContent(): string;
 
     setContent(content: string, type?: ViewType) {
-        this._settings && (this._settings.viewType = type ?? this._settings.viewType);
+        if (type) this._settings.viewType = type;
     }
 
     setTitle = (title: string) => {
@@ -73,6 +73,8 @@ export abstract class TemplateField {
 
     updateDocSetting = (setting: string, newVal: string) => {
         if (this._renderDoc) this._renderDoc[setting] = newVal;
+        const settings: {[s: string]: string } = {[setting]: newVal}
+        Object.assign(this.settings.opts, settings);
     }
 
     makeClone(parent?: TemplateField) {