From 6e66ab2ab9b5b6f988230aac83ac712b43ccfe3a Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 11 May 2025 01:30:31 -0400
Subject: working on firefly integration

---
 .../DocCreatorMenu/Menu/TemplatePreviewGrid.tsx    | 55 ++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
new file mode 100644
index 000000000..fb246a0a0
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
@@ -0,0 +1,55 @@
+import { Colors } from "@dash/components/src";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { action, observable, runInAction } from "mobx";
+import React from "react";
+import ReactLoading from "react-loading";
+import { Doc } from "../../../../../../fields/Doc";
+import { StrCast } from "../../../../../../fields/Types";
+import { ObservableReactComponent } from "../../../../ObservableReactComponent";
+import { Template } from "../Template";
+import { observer } from "mobx-react";
+import { DocCreatorMenu } from "../DocCreatorMenu";
+import { TemplatePreviewBox } from "./TemplatePreviewBox";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+
+export interface SuggestedTemplatesProps {
+    menu: DocCreatorMenu;
+    loading?: boolean;
+    templates: Template[];
+    title: string;
+    optionsButtonOpts?: [string, (...args: any) => any];
+    previewBoxLeftButtonOpts?: [string, (...args: any) => any];
+    previewBoxRightButtonOpts?: [string, (...args: any) => any];
+    setupButtonClick: (e: React.PointerEvent, func: () => void) => void;
+}
+
+@observer
+export class TemplatePreviewGrid extends ObservableReactComponent<SuggestedTemplatesProps> {
+
+    render() {
+        return (
+            <div className="docCreatorMenu-section">
+                <div className="docCreatorMenu-section-topbar">
+                    <div className="docCreatorMenu-section-title">{this.props.title}</div>
+                    {this._props.optionsButtonOpts ? (<button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.props.setupButtonClick(e, () => runInAction(this._props.optionsButtonOpts![1]))}>
+                        <FontAwesomeIcon icon={this._props.optionsButtonOpts[0] as IconProp} />
+                    </button>) : null}
+                </div>
+                <div className="docCreatorMenu-templates-preview-window">
+                    {this._props.loading ? 
+                    (<div className="loading-spinner">
+                        <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
+                    </div>)
+                    : this.props.templates.map(template => (
+                        <TemplatePreviewBox 
+                        template={template} 
+                        menu={this.props.menu} 
+                        leftButtonOpts={["magnifying-glass", (template: Template) => { this.props.menu.setExpandedView(template); this.forceUpdate(); }]}
+                        rightButtonOpts={["plus", (template: Template) => {}]}
+                        />
+                    ))}
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 59678e34dad0b6587f28ec642c84f6c6ee06543b Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 11 May 2025 02:08:38 -0400
Subject: firefly templates correctly loading

---
 .../DocCreatorMenu/Menu/TemplateEditingWindow.tsx          | 14 +++++++-------
 .../DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx  |  4 ++--
 .../DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx |  8 ++++----
 3 files changed, 13 insertions(+), 13 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
index f34b7efcf..fa84616cc 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
@@ -75,10 +75,11 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                 <TemplatePreviewGrid
                     menu={this._props.menu}
                     title={'Generate Variations'}
+                    loading={this._loading}
                     templates={this._props.menu._variations}
                     optionsButtonOpts={['gear', this.func]}
                     setupButtonClick={this._props.setupButtonClick}
-                    previewBoxRightButtonOpts={['gear', (component: ObservableReactComponent<TemplatePreviewBoxProps>) => {component.forceUpdate();}]}
+                    previewBoxRightButtonOpts={['gear', (template: Template) => {this.forceUpdate();}]}
                 />
                 <div className="docCreatorMenu-section">
                     <div className="docCreatorMenu-variation-prompt-input">
@@ -93,18 +94,17 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                                 this._props.menu._variations = [];
                                 this._loading = true;
                                 this._variationURLs = await this._props.menu.generateVariations(this._props.template.getRenderedDoc()!, this.fireflyPrompt);
-                                const templates: Template[] = [];
                                 this._variationURLs.forEach(url => {
                                     const newTemplate: Template = this._props.template.cloneBase();
-                                    newTemplate.setImageAsBackground(url, true);
-                                    templates.push(newTemplate);
+                                    this._props.menu._variations.push(newTemplate);
                                 });
                                 this._loading = false;
                                 setTimeout(() => {
-                                    console.log('setting')
-                                    this._props.menu._variations = templates;
+                                    this._variationURLs.forEach((url, i) => {
+                                        this._props.menu._variations[i].setImageAsBackground(url, true);
+                                    });
                                     this.forceUpdate();
-                                }, 1000);
+                                });
                             })
                         }>
                             <FontAwesomeIcon icon="arrows-rotate" />
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
index a7270e540..e94ddfc15 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
@@ -19,8 +19,8 @@ import { ImageCast } from "../../../../../../fields/Types";
 export interface TemplatePreviewBoxProps {
     template: Template;
     menu: DocCreatorMenu;
-    leftButtonOpts?: [icon: IconProp, func: (template: Template) => void]
-    rightButtonOpts?: [icon: IconProp, func: (template: Template) => void]
+    leftButtonOpts?: [icon: IconProp, func: (...args: any) => void]
+    rightButtonOpts?: [icon: IconProp, func: (...args: any) => void]
 }
 
 export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
index fb246a0a0..e78109b62 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
@@ -17,9 +17,9 @@ export interface SuggestedTemplatesProps {
     loading?: boolean;
     templates: Template[];
     title: string;
-    optionsButtonOpts?: [string, (...args: any) => any];
-    previewBoxLeftButtonOpts?: [string, (...args: any) => any];
-    previewBoxRightButtonOpts?: [string, (...args: any) => any];
+    optionsButtonOpts?: [IconProp, (...args: any) => any];
+    previewBoxLeftButtonOpts?: [IconProp, (...args: any) => any];
+    previewBoxRightButtonOpts?: [IconProp, (...args: any) => any];
     setupButtonClick: (e: React.PointerEvent, func: () => void) => void;
 }
 
@@ -45,7 +45,7 @@ export class TemplatePreviewGrid extends ObservableReactComponent<SuggestedTempl
                         template={template} 
                         menu={this.props.menu} 
                         leftButtonOpts={["magnifying-glass", (template: Template) => { this.props.menu.setExpandedView(template); this.forceUpdate(); }]}
-                        rightButtonOpts={["plus", (template: Template) => {}]}
+                        rightButtonOpts={this._props.previewBoxRightButtonOpts}
                         />
                     ))}
                 </div>
-- 
cgit v1.2.3-70-g09d2


From e62f51bacace3d91f388202135426445721097cc Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 11 May 2025 16:52:17 -0400
Subject: menubutton component

---
 src/client/apis/gpt/GPT.ts                         |  4 +-
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.scss  | 34 ++++----
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   | 32 ++------
 .../DocCreatorMenu/Menu/DocCreatorMenuButton.tsx   | 41 ++++++++++
 .../DocCreatorMenu/Menu/TemplateEditingWindow.tsx  | 90 +++++++++++-----------
 .../DocCreatorMenu/Menu/TemplatePreviewGrid.tsx    |  8 +-
 .../nodes/DataVizBox/DocCreatorMenu/Template.ts    |  2 +-
 7 files changed, 122 insertions(+), 89 deletions(-)
 create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index d7b378958..455551f40 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -107,13 +107,13 @@ const callTypeMap: { [type in GPTCallType]: GPTCallOpts } = {
         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:',
     },
     vizsum: {
-        model: 'gpt-4-turbo',
+        model: 'gpt-4.1',
         maxTokens: 512,
         temp: 0.5,
         prompt: 'Your job is to provide brief descriptions for columns in a dataset based on example rows. Your descriptions should be geared towards how each column’s data might fit together into a visual template. Would they make good titles, main focuses, captions, descriptions, etc. Pay special attention to connections between columns, i.e. is there one column that specifically seems to describe/be related to another more than the rest? You should provide your analysis in JSON format like so: {“col1”:”description”, “col2”:”description”, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.',
     },
     vizsum2: {
-        model: 'gpt-4-turbo',
+        model: 'gpt-4.1',
         maxTokens: 512,
         temp: 0.5,
         prompt: 'Your job is to provide structured information on columns in a dataset based on example rows. You will categorize each column in two ways: by type and size. The size categories are as follows: tiny (one or two words), small (a sentence/multiple words), medium (a few sentences), large (a longer paragraph), and huge (a very long or multiple paragraphs). The type categories are as follows: visual (links/file paths to images, pdfs, maps, or any other visual media type), and text (plain text that isn’t a link/file path). Visual media should be assumed to have size “medium” “large” or “huge”. You will give your responses in JSON format, like so: {“title (of column)”:{“type”:”text”, “size”:”small”}, “title (of column)”:{“type”:”visual”, “size”:”medium”}, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.',
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
index 9fb973265..2a1a79029 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -27,7 +27,6 @@
     background: whitesmoke; 
     background-color: rgb(50, 50, 50);
     border-radius: 5px;
-    border: 1px solid rgb(180, 180, 180);
     padding: 0px;
     font-size: 13px;
     //box-shadow: 3px 3px rgb(29, 29, 31);
@@ -35,6 +34,24 @@
     &:hover {
         box-shadow: none;
     }
+
+    &.no-margin {
+        margin: 0px;
+    }
+
+    &.border {
+        border: 1px solid rgb(180, 180, 180);
+    }
+
+    &.float-right {
+        float: right;
+        margin-left: auto;
+    }
+
+    &.absolute-right {
+        position: absolute;
+        right: 0px;
+    }
      
     &.right{
         margin-left: 0px;
@@ -403,6 +420,8 @@
     margin-left: 5%;
     background-color: rgb(50, 50, 50);
     border-radius: 5px;
+    overflow: hidden;
+    resize: none;
 }
 
 .docCreatorMenu-variations-tab {
@@ -459,19 +478,6 @@
     width: 100%;
 }
 
-.section-reveal-options {
-    margin-top: 0px;
-    margin-bottom: 0px;
-    margin-right: 0px;
-    margin-left: auto;
-    border: 0px;
-    background: none;
-
-    &.float-right {
-        float: right;
-    }
-}
-
 .docCreatorMenu-templates-displays {
     display: flex;
     flex-direction: column;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 8a98399b6..2e4b81253 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -37,6 +37,7 @@ import { StaticContentField } from './TemplateFieldTypes/StaticContentField';
 import { TemplateMenuAIUtils } from './Backend/TemplateMenuAIUtils'
 import { TemplatePreviewGrid } from './Menu/TemplatePreviewGrid';
 import { TemplateEditingWindow } from './Menu/TemplateEditingWindow';
+import { DocCreatorMenuButton } from './Menu/DocCreatorMenuButton';
 
 export enum LayoutType {
     FREEFORM = 'Freeform',
@@ -983,9 +984,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                     }
                 }))}>
                     <span className="field-title">{`${field.title} Field`}</span>
-                    <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))} style={{ position: 'absolute', right: '0px' }}>
-                        <FontAwesomeIcon icon="minus" />
-                    </button>
+                    <DocCreatorMenuButton icon={'minus'} styles={'no-margin absolute-right'} function={() => this.removeField(field)}/>
                 </div>
                 { this._collapsedCols.includes(field.title) ? null :
                     <>
@@ -1042,26 +1041,16 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         return (
             <div className="docCreatorMenu-dashboard-view">
                 <div className="topbar">
-                    <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
-                        <FontAwesomeIcon icon="plus" />
-                    </button>
-                    <button className="docCreatorMenu-menu-button section-reveal-options float-right" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._menuContent = 'templates')))}>
-                        <FontAwesomeIcon icon="arrow-left" />
-                    </button>
+                    <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
-                    setupButtonClick={this.setUpButtonClick} 
-                    template={this._currEditingTemplate as Template}
-                    menu={this}
-                />
-    }
-
+    @computed get editingView() { return <TemplateEditingWindow template={this._currEditingTemplate as Template} menu={this} /> }
+    
     get renderSelectedViewType() {
         switch (this._menuContent) {
             case 'templates': 
@@ -1073,14 +1062,11 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                                 menu={this} 
                                 loading={this._GPTLoading}
                                 optionsButtonOpts={['gear', () => (this._menuContent = 'dashboard')]}
-                                setupButtonClick={this.setUpButtonClick} 
                                 templates={this._suggestedTemplates}
                             />
                             <div className="docCreatorMenu-GPT-options">
                                 <div className="docCreatorMenu-GPT-options-container">
-                                    <button className="docCreatorMenu-menu-button" onPointerDown={e => this.setUpButtonClick(e, () => this.generatePresetTemplates())}>
-                                        <FontAwesomeIcon icon="arrows-rotate" />
-                                    </button>
+                                    <DocCreatorMenuButton icon={'arrows-rotate'} styles={'border'} function={this.generatePresetTemplates}/>
                                 </div>
                             </div>
                         </div>
@@ -1166,9 +1152,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                                 {topButton('magnifying-glass', 'options', onOptionsSelected, 'middle')}
                                 {topButton('bars', 'saved', onSavedSelected, 'right')}
                             </div>
-                            <button className="docCreatorMenu-menu-button close-menu" onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
-                                <FontAwesomeIcon icon="minus" />
-                            </button>
+                            <DocCreatorMenuButton icon={'minus'} styles={'float-right'} function={this.closeMenu}/>
                         </div>
                         {this.renderSelectedViewType}
                     </div>
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx
new file mode 100644
index 000000000..1d8139d40
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx
@@ -0,0 +1,41 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { ObservableReactComponent } from "../../../../ObservableReactComponent";
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { setupMoveUpEvents, returnFalse } from "../../../../../../ClientUtils";
+import { emptyFunction } from "../../../../../../Utils";
+import { undoable } from "../../../../../util/UndoManager";
+import { observer } from "mobx-react";
+
+interface DocCreatorMenuButtonProps {
+    icon: IconProp;
+    function: () => any;
+    styles?: string;
+}
+
+@observer
+export class DocCreatorMenuButton extends ObservableReactComponent<DocCreatorMenuButtonProps> {
+
+    setupButtonClick = (e: React.PointerEvent, func: (...args: any) => void) => {
+        setupMoveUpEvents(
+            this,
+            e,
+            returnFalse,
+            emptyFunction,
+            undoable(clickEv => {
+                clickEv.stopPropagation();
+                clickEv.preventDefault();
+                func();
+            }, 'create docs')
+        );
+    };
+
+    render() {
+
+        return (
+            <button className={`docCreatorMenu-menu-button ${this._props.styles}`} onPointerDown={e => this.setupButtonClick(e, async () => this._props.function())}>
+                <FontAwesomeIcon icon={this._props.icon} />
+            </button>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
index df6b791c7..0434d0ccb 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
@@ -15,11 +15,11 @@ import { TemplateMenuAIUtils } from "../Backend/TemplateMenuAIUtils";
 import { ObservableReactComponent } from "../../../../ObservableReactComponent";
 import { IDisposer } from "mobx-utils";
 import { ImageField } from "../../../../../../fields/URLField";
+import { DocCreatorMenuButton } from "./DocCreatorMenuButton";
 
 interface TemplateEditingWindowProps {
     menu: DocCreatorMenu;
     template: Template;
-    setupButtonClick: (e: React.PointerEvent, func: () => void) => void;
 }
 
 @observer
@@ -27,7 +27,8 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
 
     private fireflyPrompt: string = 'Use this template to generate an empty baseball card template.';
     private previewWindow: HTMLDivElement | null = null;
-    private _disposers: { [name: string]: IDisposer } = {};
+    private disposers: { [name: string]: IDisposer } = {};
+    private promptInput: HTMLTextAreaElement | null = null;
 
     @observable _loading: boolean = false;
     @observable _variationsTabOpen: boolean = false;
@@ -35,7 +36,7 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
     @observable _variations: Template[] = [];
 
     componentDidMount(): void {
-        this._disposers.windowDimensions = reaction(() => 
+        this.disposers.windowDimensions = reaction(() => 
             this._props.menu._resizing, 
             () => { this.forceUpdate() }, 
             { fireImmediately: true }
@@ -43,7 +44,12 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
     }
 
     componentWillUnmount() {
-        Object.values(this._disposers).forEach(disposer => disposer?.());
+        Object.values(this.disposers).forEach(disposer => disposer?.());
+    }
+
+    setPromptInputRef: React.LegacyRef<HTMLTextAreaElement> = (node) => {
+        this.promptInput = node;
+        this.forceUpdate();
     }
 
     setContainerRef: React.LegacyRef<HTMLDivElement> = (node) => {
@@ -58,6 +64,24 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
         } else if (this.previewWindow && !open) {
             this.previewWindow.style.height = String(Number(this.previewWindow.clientHeight) * 5/3);
         }
+        this.forceUpdate();
+    }
+
+    generateVariations = async () => {
+        this._props.menu._variations = [];
+        this._loading = true;
+        this._variationURLs = await this._props.menu.generateVariations(this._props.template.clone(false).getRenderedDoc()!, this.fireflyPrompt);
+        this._variationURLs.forEach(url => {
+            const newTemplate: Template = this._props.template.clone(true);
+            this._props.menu._variations.push(newTemplate);
+        });
+        this._loading = false;
+        setTimeout(() => {
+            this._variationURLs.forEach((url, i) => {
+                this._props.menu._variations[i].setImageAsBackground(url, true);
+            });
+            this.forceUpdate();
+        });
     }
 
     get fireflyVariationsTab() {
@@ -71,37 +95,27 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                     loading={this._loading}
                     templates={this._props.menu._variations}
                     optionsButtonOpts={['gear', () => {}]}
-                    setupButtonClick={this._props.setupButtonClick}
                     previewBoxRightButtonOpts={['gear', (template: Template) => {this.forceUpdate();}]}
                 />
                 <div className="docCreatorMenu-section">
                     <div className="docCreatorMenu-variation-prompt-input">
                         <textarea
                             className="docCreatorMenu-variation-prompt-input-textbox"
+                            ref={this.setPromptInputRef}
                             onChange={e => this.fireflyPrompt = e.target.value}
+                            onInput={() => {
+                                if (this.promptInput !== null) {
+                                    this.promptInput.style.height = 'auto';
+                                    this.promptInput.style.height = this.promptInput.scrollHeight + 'px';
+                                }
+                            }}
                             defaultValue={''}
                             placeholder={'Enter a custom prompt here (optional)'}
                         />
-                        <button className="docCreatorMenu-menu-button" 
-                            onPointerDown={e => this._props.setupButtonClick(e, async () => {
-                                this._props.menu._variations = [];
-                                this._loading = true;
-                                this._variationURLs = await this._props.menu.generateVariations(this._props.template.clone(false).getRenderedDoc()!, this.fireflyPrompt);
-                                this._variationURLs.forEach(url => {
-                                    const newTemplate: Template = this._props.template.clone(true);
-                                    this._props.menu._variations.push(newTemplate);
-                                });
-                                this._loading = false;
-                                setTimeout(() => {
-                                    this._variationURLs.forEach((url, i) => {
-                                        this._props.menu._variations[i].setImageAsBackground(url, true);
-                                    });
-                                    this.forceUpdate();
-                                });
-                            })
-                        }>
-                            <FontAwesomeIcon icon="arrows-rotate" />
-                        </button>
+                        <DocCreatorMenuButton icon={'arrows-rotate'} styles={'border'} function={this.generateVariations}/>
+                    </div>
+                    <div className='docCreatorMenu-variation-options-container'>
+
                     </div>
                 </div>
             </>
@@ -146,25 +160,13 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                     {this.renderedDocPreview}
                     {this._variationsTabOpen ? this.fireflyVariationsTab : null}
                     <div className="right-buttons-panel">
-                        <button
-                            className="docCreatorMenu-menu-button section-reveal-options top-right"
-                            onPointerDown={e =>
-                                this._props.setupButtonClick(e, () => {
-                                    if (this._props.template === this._props.menu._selectedTemplate) {
-                                        this._props.menu.updateRenderedPreviewCollection(this._props.template);
-                                    }
-                                    this._props.menu.setExpandedView(undefined);
-                                })
-                            }>
-                            <FontAwesomeIcon icon="minimize" />
-                        </button>
-                        <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this._props.setupButtonClick(e, async () => {
-                                this.setVariationTab(!this._variationsTabOpen);
-                                // this._props.template.setImageAsBackground('https://www.onthegotours.com/repository/Great-Wall-New-Pic-228551391689622.jpg', true);
-                                this.forceUpdate();
-                            })}>
-                            <FontAwesomeIcon icon="lightbulb" />
-                        </button>
+                        <DocCreatorMenuButton icon={'minimize'} function={() => {
+                                if (this._props.template === this._props.menu._selectedTemplate) {
+                                    this._props.menu.updateRenderedPreviewCollection(this._props.template);
+                                }
+                                this._props.menu.setExpandedView(undefined);
+                            }}/>
+                        <DocCreatorMenuButton icon={'lightbulb'} function={() => this.setVariationTab(!this._variationsTabOpen)}/>
                     </div>
                 </div>
             </div>
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
index e78109b62..84ca6546d 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
@@ -11,6 +11,7 @@ import { observer } from "mobx-react";
 import { DocCreatorMenu } from "../DocCreatorMenu";
 import { TemplatePreviewBox } from "./TemplatePreviewBox";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { DocCreatorMenuButton } from "./DocCreatorMenuButton";
 
 export interface SuggestedTemplatesProps {
     menu: DocCreatorMenu;
@@ -20,7 +21,6 @@ export interface SuggestedTemplatesProps {
     optionsButtonOpts?: [IconProp, (...args: any) => any];
     previewBoxLeftButtonOpts?: [IconProp, (...args: any) => any];
     previewBoxRightButtonOpts?: [IconProp, (...args: any) => any];
-    setupButtonClick: (e: React.PointerEvent, func: () => void) => void;
 }
 
 @observer
@@ -31,9 +31,9 @@ export class TemplatePreviewGrid extends ObservableReactComponent<SuggestedTempl
             <div className="docCreatorMenu-section">
                 <div className="docCreatorMenu-section-topbar">
                     <div className="docCreatorMenu-section-title">{this.props.title}</div>
-                    {this._props.optionsButtonOpts ? (<button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.props.setupButtonClick(e, () => runInAction(this._props.optionsButtonOpts![1]))}>
-                        <FontAwesomeIcon icon={this._props.optionsButtonOpts[0] as IconProp} />
-                    </button>) : null}
+                    {this._props.optionsButtonOpts ? 
+                        <DocCreatorMenuButton icon={this._props.optionsButtonOpts[0] as IconProp} styles={'float-right'} function={() => runInAction(this._props.optionsButtonOpts![1])}/> 
+                        : null}
                 </div>
                 <div className="docCreatorMenu-templates-preview-window">
                     {this._props.loading ? 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
index 10724c9f7..7ff521f18 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
@@ -81,7 +81,7 @@ export class Template {
 
     isValidTemplate = (cols: Col[]) => {
         const maxMatches = this.maxMatches(this.getMatches(cols));
-        return maxMatches === this.contentFields.length;
+        return maxMatches === this.contentFields.length && this.title !== 'template_framework';
     };
 
     applyConditionalLogicToField = (field: TemplateField) => {
-- 
cgit v1.2.3-70-g09d2


From 4219c751c0f984fac6e5995c1ab955a8d63a28cd Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 11 May 2025 21:18:55 -0400
Subject: many changes to firefly UI (options added) and starting work on
 finalizing conditionals

---
 .../DocCreatorMenu/Backend/TemplateManager.ts      |  14 +-
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.scss  | 300 ++++++++++-----------
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   |  36 ++-
 .../DocCreatorMenu/Menu/TemplateEditingWindow.tsx  | 160 +++++++----
 .../DocCreatorMenu/Menu/TemplatePreviewBox.tsx     |  32 +--
 .../DocCreatorMenu/Menu/TemplatePreviewGrid.tsx    |  10 +-
 .../nodes/DataVizBox/DocCreatorMenu/Template.ts    |  23 +-
 src/client/views/smartdraw/DrawingFillHandler.tsx  |   5 +-
 src/server/ApiManagers/FireflyManager.ts           |   6 +-
 9 files changed, 296 insertions(+), 290 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts
index d11f05766..030c6db95 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts
@@ -20,7 +20,7 @@ export class TemplateManager {
 
     templates: Template[] = [];
 
-    fieldConditions: Record<string, Conditional[]> = {};
+    conditionalFieldLogic: Record<string, Conditional[]> = {};
 
     constructor(templateSettings: FieldSettings[]) {
         makeAutoObservable(this);
@@ -40,16 +40,16 @@ export class TemplateManager {
     };
 
     addFieldCondition = (fieldTitle: string, condition: Conditional) => {
-        if (this.fieldConditions[fieldTitle] === undefined) {
-            this.fieldConditions[fieldTitle] = [condition];
+        if (this.conditionalFieldLogic[fieldTitle] === undefined) {
+            this.conditionalFieldLogic[fieldTitle] = [condition];
         } else {
-            this.fieldConditions[fieldTitle].push(condition);
+            this.conditionalFieldLogic[fieldTitle].push(condition);
         }
     }
 
     removeFieldCondition = (fieldTitle: string, condition: Conditional) => {
-        if (this.fieldConditions[fieldTitle]) {
-            this.fieldConditions[fieldTitle] = this.fieldConditions[fieldTitle].filter(cond => cond !== condition);
+        if (this.conditionalFieldLogic[fieldTitle]) {
+            this.conditionalFieldLogic[fieldTitle] = this.conditionalFieldLogic[fieldTitle].filter(cond => cond !== condition);
         }
     }
 
@@ -84,6 +84,8 @@ export class TemplateManager {
 
             await applyGPTContent();
 
+            templateCopy.applyConditionalLogic(this.conditionalFieldLogic);
+
             return templateCopy.getRenderedDoc();
         };
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
index 2a1a79029..8ac718fb7 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -33,6 +33,7 @@
 
     &:hover {
         box-shadow: none;
+        background-color: rgb(60, 60, 65);
     }
 
     &.no-margin {
@@ -57,42 +58,6 @@
         margin-left: 0px;
         font-size: 12px;
     }
-
-    &.close-menu {
-        font-size: 12px;
-        width: 18px;
-        height: 18px;
-        font-size: 12px;
-        margin-left: auto;
-        margin-right: 5px;
-        margin-bottom: 3px;
-    }
-
-    &.options {
-        margin-left: 0px;
-    }
-
-    &:hover {
-        background-color: rgb(60, 60, 65);
-    }
-
-    &.top-bar {
-        border-bottom: 25px solid #555;
-        border-left: 12px solid transparent;
-        border-right: 12px solid transparent;
-        // border-top-left-radius: 5px;
-        // border-top-right-radius: 5px;
-        border-radius: 0px;
-        height: 0;
-        width: 50px;
-    }
-
-    &.preview-toggle {
-        margin: 0px;
-        border-top-left-radius: 0px;
-        border-bottom-left-radius: 0px;
-        border-left: 0px;
-    }
 }
 
 .docCreatorMenu-top-buttons-container {
@@ -400,30 +365,6 @@
 
 }
 
-.docCreatorMenu-variation-prompt-input {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 5px;
-    gap: 15px;
-    height: 30px;
-    width: 100%;
-}
-
-.docCreatorMenu-variation-prompt-input-textbox {
-    height: 100%;
-    width: 80%;
-    color: white;
-    margin-top: 1%;
-    margin-bottom: 1%;
-    margin-left: 5%;
-    background-color: rgb(50, 50, 50);
-    border-radius: 5px;
-    overflow: hidden;
-    resize: none;
-}
-
 .docCreatorMenu-variations-tab {
     flex-grow: .5;
 }
@@ -435,6 +376,7 @@
     position: relative;
     flex-grow: 1;
     height: 100%;
+    width: 100%;
     margin: 0px;
     margin-top: 0px;
     margin-bottom: 0px;
@@ -446,7 +388,7 @@
     justify-content: center;
     align-items: center;
     position: absolute;
-    width: 100%;
+    width: calc(100% - 10px);
     bottom: 0px;
     margin: 0px;
     margin-bottom: 10px;
@@ -457,11 +399,18 @@
 .docCreatorMenu-templates-preview-window {
     display: grid;
     justify-content: space-evenly;
+    row-gap: 2rem;
     grid-template-columns: repeat(auto-fill, minmax(225px, 30%));
-    gap: 1rem;
     margin: 5px;
     width: calc(100% - 10px);
+    height: 100%;
     padding-bottom: 40px;
+
+    &.scrolling {
+        overflow-y: scroll;
+        max-height: 300px;
+        padding-bottom: 0px;
+    }
 }
 
 .divvv{
@@ -847,108 +796,6 @@
         background-color: rgb(50, 50, 50);
     }
 
-//     .field-panel {
-//         position: relative;
-//         display: flex;
-//         // align-items: flex-start;
-//         flex-direction: column;
-//         gap: 5px;
-//         padding: 5px;
-//         height: 100px;
-//         //width: 100%;
-//         border: 1px solid rgb(180, 180, 180);
-//         margin: 5px;
-//         margin-top: 0px;
-//         border-radius: 3px;
-//         flex: 0 0 auto;
-
-//         .properties-wrapper {
-//             display: flex;
-//             flex-direction: row;
-//             align-items: flex-start;
-//             gap: 5px;
-
-//             .field-property-container {
-//                 background-color: rgb(40, 40, 40);
-//                 border: 1px solid rgb(100, 100, 100);
-//                 border-radius: 3px;
-//                 width: 30%;
-//                 height: 25px;
-//                 padding-left: 3px;
-//                 align-items: center;
-//                 color: whitesmoke;
-//             }
-
-//             .field-type-selection-container {
-//                 display: flex;
-//                 flex-direction: row;
-//                 align-items: center;
-//                 background-color: rgb(40, 40, 40);
-//                 border: 1px solid rgb(100, 100, 100);
-//                 border-radius: 3px;
-//                 width: 31%;
-//                 height: 25px;
-//                 padding-left: 3px;
-//                 color: whitesmoke;
-
-//                 .placeholder {
-//                     color: gray;
-//                 }
-
-//                 &:hover .placeholder {
-//                     display: none;
-//                 }
-
-//                 .bubbles {
-//                     display: none;
-//                 }
-
-//                 .text {
-//                     margin-top: 5px;
-//                     margin-bottom: 5px;
-//                 }
-
-//                 &:hover .bubbles {
-//                     display: flex;
-//                     flex-direction: row;
-//                     align-items: flex-start;
-//                 }
-
-//                 &:hover .type-display {
-//                     display: none;
-//                 }
-
-//                 .bubble {
-//                     margin: 5px;
-//                 }
-
-//                 &:hover .bubble {
-//                     margin-top: 7px;
-//                 }
-//             }
-//         }
-
-//         .field-description-container {
-//             background-color: rgb(40, 40, 40);
-//             border: 1px solid rgb(100, 100, 100);
-//             border-radius: 3px;
-//             width: 100%;
-//             height: 100%;
-//             resize: none;
-
-//             ::-webkit-scrollbar-track {
-//                 background: none; 
-//             }
-//         }
-
-//         .top-right {
-//             position: absolute;
-//             top: 0px;
-//             right: 0px;
-//         }
-//     }
-// }
-
     .field-panel {
         display: flex;
         flex-direction: column;
@@ -1214,4 +1061,127 @@
         }
     }
 
-}
\ No newline at end of file
+}
+
+//------------------------------------------------------------------------------------------------------------------------------------------
+// EditingWindow CSS
+//--------------------------------------------------------------------------------------------------------------------------------------------
+
+.docCreatorMenu-editing-firefly-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    padding: 5px;
+}
+
+.docCreatorMenu-firefly-options {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    height: fit-content;
+    width: 100%;
+}
+
+.docCreatorMenu-variation-prompt-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 15px;
+    height: fit-content;
+    width: 100%;
+}
+
+.docCreatorMenu-variation-prompt-input-textbox {
+    height: 40px;
+    width: 80%;
+    color: white;
+    margin-top: 1%;
+    margin-bottom: 1%;
+    margin-left: 5%;
+    background-color: rgb(50, 50, 50);
+    border-radius: 5px;
+    overflow: hidden;
+    resize: none;
+}
+
+.options‑menu {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;                 
+    padding: 0.5rem 1rem;
+    background: rgb(50, 50, 50);
+    color: whitesmoke;
+    font-family: system-ui, sans-serif;
+    font-size: 0.9rem;
+    flex-wrap: wrap;         
+  }
+  
+  .menu‑item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    white-space: nowrap;
+  }
+  
+  .menu‑item input[type="range"] {
+    width: 7rem;
+    accent-color: whitesmoke;      
+  }
+  
+  .value {
+    min-width: 2ch;
+    text-align: right;
+  }
+  
+  .switch {
+    gap: 0.75rem;
+  }
+  
+  .switch .slider {
+    position: relative;
+    width: 2.2rem;
+    height: 1.1rem;
+    background: whitesmoke;
+    border-radius: 1rem;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+  
+  .switch .slider::before {
+    content: '';
+    position: absolute;
+    top: 0.1rem;
+    left: 0.1rem;
+    width: 0.9rem;
+    height: 0.9rem;
+    background: rgb(50, 50, 50);
+    border-radius: 50%;
+    transition: transform 0.2s;
+  }
+  
+  .switch input {
+    display: none;
+  }
+  
+  .switch input:checked + .slider {
+    background: #9fe29d;
+  }
+  
+  .switch input:checked + .slider::before {
+    transform: translateX(1.1rem);
+  }
+
+.firefly-option-label {
+    padding: .2em .6em .3em;
+    font-size: 100%;
+    color: whitesmoke;
+    text-align: center;
+}
+  
+
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 2e4b81253..2565a9332 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -36,7 +36,7 @@ import { CgPathIntersect } from 'react-icons/cg';
 import { StaticContentField } from './TemplateFieldTypes/StaticContentField';
 import { TemplateMenuAIUtils } from './Backend/TemplateMenuAIUtils'
 import { TemplatePreviewGrid } from './Menu/TemplatePreviewGrid';
-import { TemplateEditingWindow } from './Menu/TemplateEditingWindow';
+import { FireflyStructureOptions, TemplateEditingWindow } from './Menu/TemplateEditingWindow';
 import { DocCreatorMenuButton } from './Menu/DocCreatorMenuButton';
 
 export enum LayoutType {
@@ -103,7 +103,6 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
 
     @observable _userCreatedFields: Col[] = [];
     @observable _collapsedCols: String[] = []; //any columns whose options panels are hidden
-    @observable _conditions: Conditional[] = [];
     @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 };
@@ -594,7 +593,8 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         );
     };
 
-    generateVariations = async (onDoc: Doc, prompt: string): Promise<string[]> => {
+    generateVariations = async (onDoc: Doc, prompt: string, options: FireflyStructureOptions): Promise<string[]> => {
+        const { numVariations, temperature, useStyleRef } = options;
         this.variations = [];
         const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
 
@@ -603,12 +603,12 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         clone.x = 10000;
         clone.y = 10000;
 
-        await DrawingFillHandler.drawingToImage(clone, 100, prompt, clone, this)
+        await DrawingFillHandler.drawingToImage(clone, 100 - temperature, prompt, useStyleRef ? clone : undefined, this, numVariations)
 
         return this.variations;
     }
 
-    @observable variations: string[] = []
+    variations: string[] = []
 
     @action addVariation = (url: string) => {
         this.variations.push(url);
@@ -918,7 +918,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     }
 
     get dashboardContents() {
-        const conditionForm = (title: string, parameters?: Conditional) => {
+        const conditionForm = (title: string, parameters?: Conditional, empty: boolean = false) => {
 
             const params: Conditional = parameters ?? this._currEditingConditional;
 
@@ -942,8 +942,8 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                     <div className='form-row-plain-text'>then</div>
                     <div className="operator-options-dropdown">
                         <span className="operator-dropdown-current">{params.target ?? 'self'}</span>
-                        <div className='operator-dropdown-option' onPointerDown={() => {params.target = 'self'}}>{'self'}</div>
-                        <div className='operator-dropdown-option' onPointerDown={() => {params.target = 'template'}}>{'template'}</div>
+                        <div className='operator-dropdown-option' onPointerDown={() => {params.target = 'self'}}>{'own'}</div>
+                        <div className='operator-dropdown-option' onPointerDown={() => {params.target = 'template'}}>{`template's`}</div>
                     </div>
                     <textarea
                         className="form-row-textarea"
@@ -959,17 +959,11 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                         defaultValue={params.value}
                     />
                 </div>
-                <div className='form-action-button' onPointerDown={e => this.setUpButtonClick(e, runInAction(() => () => {
-                        if (this._currEditingConditional === params) { 
-                            params.field = title;
-                            this._conditions.push(params);
-                            this._currEditingConditional = {} as Conditional;
-                        } else {
-                            this._conditions = this._conditions.filter(cond => cond !== params);
-                        }
-                    }))}>
-                        <FontAwesomeIcon icon={this._currEditingConditional === params ? 'plus' : 'minus'} color='white'/>
-                </div>
+                {empty ? 
+                <DocCreatorMenuButton icon={'plus'} styles={'float-right'} function={() => this.templateManager.addFieldCondition(title, params)}/>
+                :
+                <DocCreatorMenuButton icon={'minus'} styles={'float-right'} function={() => this.templateManager.removeFieldCondition(title, params)}/>
+                }
             </div>
             )
         }
@@ -1030,8 +1024,8 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                     </div>
                     <div className="conditionals-section">
                         <span className="conditionals-title">Conditional Logic</span>
-                        {conditionForm(field.title, this._currEditingConditional)}
-                        {this._conditions.map(condition => conditionForm(condition.field, condition))}
+                        {conditionForm(field.title, this._currEditingConditional, true)}
+                        {this.templateManager.conditionalFieldLogic[field.title]?.map(condition => conditionForm(condition.field, condition))}
                     </div>
                     </>
                 }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
index 0434d0ccb..4ff509d73 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, observable, reaction, runInAction } from "mobx";
+import { action, makeAutoObservable, makeObservable, observable, reaction, runInAction } from "mobx";
 import React from "react";
 import { returnFalse, returnEmptyFilter, returnTrue } from "../../../../../../ClientUtils";
 import { emptyFunction } from "../../../../../../Utils";
@@ -16,93 +16,77 @@ import { ObservableReactComponent } from "../../../../ObservableReactComponent";
 import { IDisposer } from "mobx-utils";
 import { ImageField } from "../../../../../../fields/URLField";
 import { DocCreatorMenuButton } from "./DocCreatorMenuButton";
+import { TbHistory } from "react-icons/tb";
 
-interface TemplateEditingWindowProps {
+export type FireflyStructureOptions = {
+    numVariations: number;
+    temperature: number;
+    useStyleRef: boolean;
+}
+
+interface FireflyVariationsTabProps {
     menu: DocCreatorMenu;
     template: Template;
 }
 
 @observer
-export class TemplateEditingWindow extends ObservableReactComponent<TemplateEditingWindowProps> {
+export class FireflyVariationsTab extends ObservableReactComponent<FireflyVariationsTabProps> {
 
-    private fireflyPrompt: string = 'Use this template to generate an empty baseball card template.';
-    private previewWindow: HTMLDivElement | null = null;
-    private disposers: { [name: string]: IDisposer } = {};
-    private promptInput: HTMLTextAreaElement | null = null;
+    private prompt: string = 'Use this template to generate an empty baseball card template.';
+
+    @observable private promptInput: HTMLTextAreaElement | null = null;
 
     @observable _loading: boolean = false;
     @observable _variationsTabOpen: boolean = false;
     @observable _variationURLs: string[] = [];
-    @observable _variations: Template[] = [];
-
-    componentDidMount(): void {
-        this.disposers.windowDimensions = reaction(() => 
-            this._props.menu._resizing, 
-            () => { this.forceUpdate() }, 
-            { fireImmediately: true }
-            );
-    }
-
-    componentWillUnmount() {
-        Object.values(this.disposers).forEach(disposer => disposer?.());
-    }
-
-    setPromptInputRef: React.LegacyRef<HTMLTextAreaElement> = (node) => {
-        this.promptInput = node;
-        this.forceUpdate();
-    }
 
-    setContainerRef: React.LegacyRef<HTMLDivElement> = (node) => {
-        this.previewWindow = node;
-        this.forceUpdate();
-    }
+    @observable private fireflyOptions: FireflyStructureOptions = {numVariations: 3, temperature: 0, useStyleRef: false};
 
-    @action setVariationTab = (open: boolean) => {
-        this._variationsTabOpen = open;
-        if (this.previewWindow && open) {
-            this.previewWindow.style.height = String(Number(this.previewWindow.clientHeight) * .6);
-        } else if (this.previewWindow && !open) {
-            this.previewWindow.style.height = String(Number(this.previewWindow.clientHeight) * 5/3);
-        }
-        this.forceUpdate();
+    constructor(props: FireflyVariationsTabProps) {
+        super(props);
+        makeObservable(this);
     }
 
     generateVariations = async () => {
         this._props.menu._variations = [];
         this._loading = true;
-        this._variationURLs = await this._props.menu.generateVariations(this._props.template.clone(false).getRenderedDoc()!, this.fireflyPrompt);
+        const doc: Doc = this._props.template.clone(false).getRenderedDoc()!;
+        this._variationURLs = await this._props.menu.generateVariations(doc, this.prompt, this.fireflyOptions);
         this._variationURLs.forEach(url => {
             const newTemplate: Template = this._props.template.clone(true);
             this._props.menu._variations.push(newTemplate);
         });
-        this._loading = false;
         setTimeout(() => {
             this._variationURLs.forEach((url, i) => {
                 this._props.menu._variations[i].setImageAsBackground(url, true);
             });
-            this.forceUpdate();
+            this._loading = false;
         });
     }
 
-    get fireflyVariationsTab() {
+    setPromptInputRef: React.LegacyRef<HTMLTextAreaElement> = (node) => {
+        this.promptInput = node;
+    }
 
+    render() {
         return (
-            <>
+            <div className='docCreatorMenu-editing-firefly-section'>
                 <div className="docCreatorMenu-option-divider full no-margin-bottom"/>
                 <TemplatePreviewGrid
                     menu={this._props.menu}
                     title={'Generate Variations'}
                     loading={this._loading}
+                    styles={'scrolling'}
                     templates={this._props.menu._variations}
                     optionsButtonOpts={['gear', () => {}]}
                     previewBoxRightButtonOpts={['gear', (template: Template) => {this.forceUpdate();}]}
                 />
-                <div className="docCreatorMenu-section">
-                    <div className="docCreatorMenu-variation-prompt-input">
+                <div className="docCreatorMenu-firefly-options">
+                    <div className="docCreatorMenu-variation-prompt-row">
                         <textarea
                             className="docCreatorMenu-variation-prompt-input-textbox"
                             ref={this.setPromptInputRef}
-                            onChange={e => this.fireflyPrompt = e.target.value}
+                            onChange={e => this.prompt = e.target.value}
                             onInput={() => {
                                 if (this.promptInput !== null) {
                                     this.promptInput.style.height = 'auto';
@@ -114,13 +98,84 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                         />
                         <DocCreatorMenuButton icon={'arrows-rotate'} styles={'border'} function={this.generateVariations}/>
                     </div>
-                    <div className='docCreatorMenu-variation-options-container'>
-
-                    </div>
+                        <nav className="options‑menu">
+                            <div className="menu‑item switch">
+                                <input type="checkbox" checked={this.fireflyOptions.useStyleRef} 
+                                    onChange={(e) => runInAction(() => this.fireflyOptions.useStyleRef = e.target.checked)}
+                                />
+                                <span className="slider round"></span>
+                                <span className="firefly-option-label">Use template as style guide</span>
+                            </div>
+                            <div className="menu‑item">
+                                <span className="firefly-option-label">Variations</span>
+                                <input type="range" id="variations" 
+                                    min="1" 
+                                    max="5" 
+                                    value={this.fireflyOptions.numVariations} 
+                                    onChange={(e) => runInAction(() => this.fireflyOptions.numVariations = Number(e.target.value))}
+                                />
+                                <span className="value" id="varVal">{this.fireflyOptions.numVariations}</span>
+                            </div>
+                            <div className="menu‑item">
+                                <span className="firefly-option-label">Temperature</span>
+                                <input type="range" id="temperature" 
+                                    min="1" 
+                                    max="100" 
+                                    value={this.fireflyOptions.temperature} 
+                                    onChange={(e) => runInAction(() => this.fireflyOptions.temperature = Number(e.target.value))}
+                                />
+                                <span className="value" id="tempVal">{this.fireflyOptions.temperature}</span>
+                            </div>
+                        </nav>
                 </div>
-            </>
+            </div>
         )
     }
+}
+
+interface TemplateEditingWindowProps {
+    menu: DocCreatorMenu;
+    template: Template;
+}
+
+@observer
+export class TemplateEditingWindow extends ObservableReactComponent<TemplateEditingWindowProps> {
+
+    private disposers: { [name: string]: IDisposer } = {};
+
+    @observable private previewWindow: HTMLDivElement | null = null;
+
+    @observable _variationsTabOpen: boolean = false;
+
+    constructor(props: TemplateEditingWindowProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    componentDidMount(): void {
+        this.disposers.windowDimensions = reaction(() => 
+            this._props.menu._resizing, 
+            () => { this.forceUpdate() }, 
+            { fireImmediately: true }
+            );
+    }
+
+    componentWillUnmount() {
+        Object.values(this.disposers).forEach(disposer => disposer?.());
+    }
+
+    setContainerRef: React.LegacyRef<HTMLDivElement> = (node) => {
+        this.previewWindow = node;
+    }
+
+    @action setVariationTab = (open: boolean) => {
+        this._variationsTabOpen = open;
+        if (this.previewWindow && open) {
+            this.previewWindow.style.height = String(Number(this.previewWindow.clientHeight) * .6);
+        } else if (this.previewWindow && !open) {
+            this.previewWindow.style.height = String(Number(this.previewWindow.clientHeight) * 5/3);
+        }
+    }
    
     get renderedDocPreview(){
         const doc: Doc = this._props.template.getRenderedDoc() as unknown as Doc;
@@ -158,7 +213,11 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                 <div className="docCreatorMenu-expanded-template-preview">
                     <div className="top-panel"/>
                     {this.renderedDocPreview}
-                    {this._variationsTabOpen ? this.fireflyVariationsTab : null}
+                    {this._variationsTabOpen ? <FireflyVariationsTab
+                        menu={this._props.menu}
+                        template={this._props.template}
+                    />
+                     : null}
                     <div className="right-buttons-panel">
                         <DocCreatorMenuButton icon={'minimize'} function={() => {
                                 if (this._props.template === this._props.menu._selectedTemplate) {
@@ -167,6 +226,7 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                                 this._props.menu.setExpandedView(undefined);
                             }}/>
                         <DocCreatorMenuButton icon={'lightbulb'} function={() => this.setVariationTab(!this._variationsTabOpen)}/>
+                        <DocCreatorMenuButton icon={'arrow-rotate-backward'} function={() => { this._props.menu.setExpandedView(this._props.template); this.forceUpdate(); }}/>
                     </div>
                 </div>
             </div>
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
index c9f817d2f..de2f9e455 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
@@ -1,7 +1,7 @@
 import { Colors } from "@dash/components/src";
 import { FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import { Template } from "../Template";
-import { reaction, runInAction } from "mobx";
+import { makeObservable, observable, reaction, runInAction } from "mobx";
 import React from "react";
 import { ObservableReactComponent } from "../../../../ObservableReactComponent";
 import { DocCreatorMenu } from "../DocCreatorMenu";
@@ -17,7 +17,7 @@ import { ImageField } from "../../../../../../fields/URLField";
 import { ImageCast } from "../../../../../../fields/Types";
 import { observer } from "mobx-react";
 
-export interface TemplatePreviewBox_props {
+export interface TemplatePreviewBoxProps {
     template: Template;
     menu: DocCreatorMenu;
     leftButtonOpts?: [icon: IconProp, func: (...args: any) => void]
@@ -25,32 +25,18 @@ export interface TemplatePreviewBox_props {
 }
 
 @observer
-export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBox_props> {
+export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> {
 
-    private previewWindow: HTMLDivElement | null = null;
-    // private icon: ImageField | undefined = undefined;
+    @observable private previewWindow: HTMLDivElement | null = null;
 
     setContainerRef: React.LegacyRef<HTMLDivElement> = (node) => {
         this.previewWindow = node;
-        this.forceUpdate();
     }
 
-    // componentDidMount(): void {
-    //     console.log('mounted')
-    //     setTimeout(() => {
-    //         const docView = DocumentView.getDocumentView(this.doc);
-    //         if (docView) {
-    //             console.log('docview found')
-    //             docView.ComponentView?.updateIcon?.();
-    //             setTimeout(() => {
-    //                 console.log('componentview found: ', docView.ComponentView)
-    //                 this.icon = ImageCast(docView.Document.icon);
-    //                 console.log('icon is:', this.icon, ' from: ', docView.Document.icon);
-    //                 this.forceUpdate();
-    //             }, 5000);
-    //         }
-    //     }, 1000);
-    // }
+    constructor(props: TemplatePreviewBoxProps) {
+        super(props);
+        makeObservable(this);
+    }
 
     get doc() {
         return this._props.template.getRenderedDoc() as Doc;
@@ -83,8 +69,6 @@ export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreview
                     <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')} /> */}
                     <DocumentView
                         Document={this.doc}
                         isContentActive={emptyFunction} // !!! should be return false
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
index 84ca6546d..d53853c52 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
@@ -1,6 +1,6 @@
 import { Colors } from "@dash/components/src";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, observable, runInAction } from "mobx";
+import { action, makeObservable, observable, runInAction } from "mobx";
 import React from "react";
 import ReactLoading from "react-loading";
 import { Doc } from "../../../../../../fields/Doc";
@@ -18,6 +18,7 @@ export interface SuggestedTemplatesProps {
     loading?: boolean;
     templates: Template[];
     title: string;
+    styles?: string;
     optionsButtonOpts?: [IconProp, (...args: any) => any];
     previewBoxLeftButtonOpts?: [IconProp, (...args: any) => any];
     previewBoxRightButtonOpts?: [IconProp, (...args: any) => any];
@@ -26,6 +27,11 @@ export interface SuggestedTemplatesProps {
 @observer
 export class TemplatePreviewGrid extends ObservableReactComponent<SuggestedTemplatesProps> {
 
+    constructor(props: SuggestedTemplatesProps) {
+        super(props);
+        makeObservable(this);
+    }
+
     render() {
         return (
             <div className="docCreatorMenu-section">
@@ -35,7 +41,7 @@ export class TemplatePreviewGrid extends ObservableReactComponent<SuggestedTempl
                         <DocCreatorMenuButton icon={this._props.optionsButtonOpts[0] as IconProp} styles={'float-right'} function={() => runInAction(this._props.optionsButtonOpts![1])}/> 
                         : null}
                 </div>
-                <div className="docCreatorMenu-templates-preview-window">
+                <div className={"docCreatorMenu-templates-preview-window " + this._props.styles}>
                     {this._props.loading ? 
                     (<div className="loading-spinner">
                         <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
index 7ff521f18..fae0d06e4 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
@@ -10,8 +10,6 @@ import { Doc } from '../../../../../fields/Doc';
 export class Template {
     _mainField: DynamicField;
 
-    private conditionalLogic: Record<string, Conditional[]> = {};
-
     /**
      * A Template can be created from a description of its fields (FieldSettings) or from a DynamicField
      * @param definition definition of template as settings or DynamicField
@@ -84,11 +82,11 @@ export class Template {
         return maxMatches === this.contentFields.length && this.title !== 'template_framework';
     };
 
-    applyConditionalLogicToField = (field: TemplateField) => {
+    applyConditionalLogicToField = (field: TemplateField, logic: Record<string, Conditional[]>) => {
         if (field instanceof DynamicField) return;
-        const logic: Conditional[] = this.conditionalLogic[field.getTitle()];
+        const fieldStatements: Conditional[] = logic[field.getTitle()];
         const content = field.getContent()
-        logic && logic.forEach(statement => {
+        fieldStatements && fieldStatements.forEach(statement => {
             if (content === statement.condition) {
                 if (statement.target === 'template') {
                     this._mainField.renderedDoc![statement.attribute] = statement.value;
@@ -99,17 +97,10 @@ export class Template {
         })
     }
 
-    applyConditionalLogic = () => {
-        const fields: TemplateField[] = [this._mainField, ...this.allFields];
-        fields.forEach(this.applyConditionalLogicToField);
-    }
-
-    addConditionalStatement = (field: string, statement: Conditional) => {
-        !this.conditionalLogic[field] ? this.conditionalLogic[field] = [statement] : this.conditionalLogic[field].push(statement);
-    }
-
-    removeConditionalStatement = (field: string, statement: Conditional) => {
-        this.conditionalLogic[field] = this.conditionalLogic[field]?.filter(cond => cond !== statement);
+    applyConditionalLogic = (logic: Record<string, Conditional[]>) => {
+        console.log('applying logic: ', logic)
+        const fields: TemplateField[] = [...this.allFields];
+        fields.forEach(field => this.applyConditionalLogicToField(field, logic));
     }
 
     setImageAsBackground(url: string, makeTransparent: boolean = false) {
diff --git a/src/client/views/smartdraw/DrawingFillHandler.tsx b/src/client/views/smartdraw/DrawingFillHandler.tsx
index ad5ef7118..48107ff0d 100644
--- a/src/client/views/smartdraw/DrawingFillHandler.tsx
+++ b/src/client/views/smartdraw/DrawingFillHandler.tsx
@@ -15,7 +15,7 @@ import { AspectRatioLimits, FireflyDimensionsMap, FireflyImageDimensions, Firefl
 
 const DashDropboxId = '2m86iveqdr9vzsa';
 export class DrawingFillHandler {
-    static drawingToImage = async (drawing: Doc, strength: number, user_prompt: string, styleDoc?: Doc, fromDocCreator?: DocCreatorMenu) => {
+    static drawingToImage = async (drawing: Doc, strength: number, user_prompt: string, styleDoc?: Doc, fromDocCreator?: DocCreatorMenu, numVariations: number = 4) => {
         const docData = drawing[DocData];
         const tags = StrListCast(docData.tags).map(tag => tag.slice(1));
         const styles = tags.filter(tag => FireflyStylePresets.has(tag));
@@ -45,9 +45,8 @@ export class DrawingFillHandler {
                 return imageUrlToBase64(structureUrl)
                     .then(gptDescribeImage)
                     .then((prompt, newPrompt = user_prompt || prompt) =>
-                        Networking.PostToServer('/queryFireflyImageFromStructure', { prompt: `${newPrompt}`, width: dims.width, height: dims.height, structureUrl, strength, presets: styles, styleUrl })
+                        Networking.PostToServer('/queryFireflyImageFromStructure', { prompt: `${newPrompt}`, width: dims.width, height: dims.height, structureUrl, strength, presets: styles, styleUrl, variations: numVariations})
                             .then(res => {
-                                console.log('res is: ', res)
                                 const genratedDocs = DocCast(drawing.ai_firefly_generatedDocs) ?? Docs.Create.MasonryDocument([], { _width: 400, _height: 400 });
                                 drawing[DocData].ai_firefly_generatedDocs = genratedDocs;
                                 (res as Upload.ImageInformation[]).map(info => {
diff --git a/src/server/ApiManagers/FireflyManager.ts b/src/server/ApiManagers/FireflyManager.ts
index e5e030b0f..a272494b8 100644
--- a/src/server/ApiManagers/FireflyManager.ts
+++ b/src/server/ApiManagers/FireflyManager.ts
@@ -22,7 +22,7 @@ export default class FireflyManager extends ApiManager {
             return undefined;
         });
 
-    generateImageFromStructure = (prompt: string = 'a realistic illustration of a cat coding', width: number = 2048, height: number = 2048, structureUrl: string, strength: number = 50, styles: string[], styleUrl: string | undefined) =>
+    generateImageFromStructure = (prompt: string = 'a realistic illustration of a cat coding', width: number = 2048, height: number = 2048, structureUrl: string, strength: number = 50, styles: string[], styleUrl: string | undefined, variations: number = 4) =>
         this.getBearerToken().then(response =>
             response?.json().then((data: { access_token: string }) =>
                 //prettier-ignore
@@ -36,7 +36,7 @@ export default class FireflyManager extends ApiManager {
                     ],
                     body: JSON.stringify({
                         prompt,
-                        numVariations: 4,
+                        numVariations: variations,
                         detailLevel: 'preview', 
                         modelVersion: 'image3_fast',
                         size: { width, height },
@@ -308,7 +308,7 @@ export default class FireflyManager extends ApiManager {
                                     return { styleUrl, structureUrl: dropboxStructureUrl };
                                 })
                                 .then(uploads =>
-                                    this.generateImageFromStructure(req.body.prompt, req.body.width, req.body.height, uploads.structureUrl, req.body.strength, req.body.presets, uploads.styleUrl)
+                                    this.generateImageFromStructure(req.body.prompt, req.body.width, req.body.height, uploads.structureUrl, req.body.strength, req.body.presets, uploads.styleUrl, req.body.variations)
                                         .then(images => {
                                             Promise.all((images ?? [new Error('no images were generated')]).map(fire => (fire instanceof Error ? fire : DashUploadUtils.UploadImage(fire.url))))
                                                 .then(dashImages => {
-- 
cgit v1.2.3-70-g09d2


From 312a07364ac8880e74e1b0a911d3e5b380886858 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 30 May 2025 04:07:22 -0400
Subject: linting

---
 .../DocCreatorMenu/Backend/TemplateManager.ts      |  2 +-
 .../DocCreatorMenu/Backend/TemplateMenuAIUtils.ts  |  6 +----
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   | 31 +++++++---------------
 .../DocCreatorMenu/Menu/ConditionalsTextarea.tsx   |  2 +-
 .../DocCreatorMenu/Menu/DocCreatorMenuButton.tsx   |  3 ++-
 .../DocCreatorMenu/Menu/TemplateEditingWindow.tsx  | 21 +++++++--------
 .../Menu/TemplateMenuFieldOptions.tsx              | 14 +++++-----
 .../DocCreatorMenu/Menu/TemplatePreviewBox.tsx     |  9 +++----
 .../DocCreatorMenu/Menu/TemplatePreviewGrid.tsx    | 15 +++++------
 .../Menu/TemplateRenderPreviewWindow.tsx           |  3 +--
 .../nodes/DataVizBox/DocCreatorMenu/Template.ts    |  9 -------
 .../DocCreatorMenu/TemplateFieldTypes/DataField.ts |  3 +--
 .../TemplateFieldTypes/DynamicField.ts             |  9 ++-----
 .../TemplateFieldTypes/StaticContentField.ts       |  1 -
 .../TemplateFieldTypes/TemplateField.ts            |  3 +--
 15 files changed, 45 insertions(+), 86 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts
index 6fcca7e30..78235d000 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts
@@ -2,7 +2,7 @@ import { action, makeAutoObservable } from 'mobx';
 import { Col } from '../DocCreatorMenu';
 import { FieldSettings, TemplateField } from '../TemplateFieldTypes/TemplateField';
 import { Template } from '../Template';
-import { Doc, NumListCast } from '../../../../../../fields/Doc';
+import { NumListCast } from '../../../../../../fields/Doc';
 import { DataVizBox } from '../../DataVizBox';
 import { TemplateFieldType } from '../TemplateBackend';
 import { TemplateMenuAIUtils } from './TemplateMenuAIUtils';
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts
index 9bc2bfce2..162b7a1b1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts
@@ -1,5 +1,3 @@
-import { action } from "mobx";
-import { Upload } from "openai/resources";
 import { ClientUtils } from "../../../../../../ClientUtils";
 import { Networking } from "../../../../../Network";
 import { gptImageCall, gptAPICall, GPTCallType } from "../../../../../apis/gpt/GPT";
@@ -7,9 +5,6 @@ import { Col } from "../DocCreatorMenu";
 import { TemplateFieldSize, TemplateFieldType } from "../TemplateBackend";
 import { TemplateField, ViewType } from "../TemplateFieldTypes/TemplateField";
 import { Template } from "../Template";
-import { Doc } from "../../../../../../fields/Doc";
-import { DrawingFillHandler } from "../../../../smartdraw/DrawingFillHandler";
-import { CollectionFreeFormView } from "../../../../collections/collectionFreeForm";
 
 export class TemplateMenuAIUtils {
 
@@ -30,6 +25,7 @@ export class TemplateMenuAIUtils {
     public static renderGPTImageCall = async (template: Template, col: Col, fieldNumber: number): Promise<boolean> => {
         const generateAndLoadImage = async (id: number, prompt: string) => {
             const url = await this.generateGPTImage(prompt);
+            // eslint-disable-next-line
             var field: TemplateField = template.getFieldByID(id);
 
             field.setContent(url ?? '', ViewType.IMG);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 9a84e69a9..ebfa3fc65 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -1,44 +1,31 @@
-import { Colors } from '@dash/components';
+
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 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, setupMoveUpEvents } from '../../../../../ClientUtils';
+import { returnFalse, setupMoveUpEvents } from '../../../../../ClientUtils';
 import { emptyFunction } from '../../../../../Utils';
-import { Doc, NumListCast, StrListCast, returnEmptyDoclist } from '../../../../../fields/Doc';
+import { Doc, StrListCast } from '../../../../../fields/Doc';
 import { Id } from '../../../../../fields/FieldSymbols';
-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 { GPTCallType, gptAPICall } from '../../../../apis/gpt/GPT';
 import { DragManager } from '../../../../util/DragManager';
 import { SnappingManager } from '../../../../util/SnappingManager';
-import { Transform } from '../../../../util/Transform';
 import { UndoManager, undoable } from '../../../../util/UndoManager';
 import { ObservableReactComponent } from '../../../ObservableReactComponent';
-import { DefaultStyleProvider } from '../../../StyleProvider';
 import { CollectionFreeFormView } from '../../../collections/collectionFreeForm/CollectionFreeFormView';
-import { DocumentView, DocumentViewInternal } from '../../DocumentView';
+import { DocumentView } from '../../DocumentView';
 import { OpenWhere } from '../../OpenWhere';
 import { DataVizBox } from '../DataVizBox';
 import './DocCreatorMenu.scss';
-import { TemplateField, ViewType } from './TemplateFieldTypes/TemplateField';
+import { ViewType } from './TemplateFieldTypes/TemplateField';
 import { Template } from './Template';
 import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from './TemplateBackend';
-import { Conditional, TemplateManager } from './Backend/TemplateManager';
-import { DrawingFillHandler } from '../../../smartdraw/DrawingFillHandler';
-import { CgPathIntersect } from 'react-icons/cg';
-import { StaticContentField } from './TemplateFieldTypes/StaticContentField';
+import { TemplateManager } from './Backend/TemplateManager';
 import { TemplateMenuAIUtils } from './Backend/TemplateMenuAIUtils'
 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';
 
@@ -500,7 +487,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     };
 
     generateVariations = async (onDoc: Doc, prompt: string, options: FireflyStructureOptions): Promise<string[]> => {
-        const { numVariations, temperature, useStyleRef } = options;
+        // const { numVariations, temperature, useStyleRef } = options;
         this.variations = [];
         const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
 
@@ -509,7 +496,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         clone.x = 10000;
         clone.y = 10000;
 
-        await DrawingFillHandler.drawingToImage(clone, 100 - temperature, prompt, useStyleRef ? clone : undefined, this, numVariations)
+        // await DrawingFillHandler.drawingToImage(clone, 100 - temperature, prompt, useStyleRef ? clone : undefined, this, numVariations)
 
         return this.variations;
     }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ConditionalsTextarea.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ConditionalsTextarea.tsx
index 2ca0bde3f..89c2e44ff 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ConditionalsTextarea.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/ConditionalsTextarea.tsx
@@ -51,7 +51,7 @@ export class ConditionalsTextArea extends ObservableReactComponent<ConditionalsT
                     value={this.props.conditional[this.props.property] ?? ''}
                     onChange={e => {
                         runInAction(() => {
-                        this.props.conditional[this.props.property] = e.target.value as any;
+                        this.props.conditional[this.props.property] = e.target.value as "=" | ">" | "<" | "contains";
                         });
                         this.updateInputWidth();
                     }}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx
index 1d8139d40..48d2de4de 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/DocCreatorMenuButton.tsx
@@ -9,13 +9,14 @@ import { observer } from "mobx-react";
 
 interface DocCreatorMenuButtonProps {
     icon: IconProp;
+    // eslint-disable-next-line
     function: () => any;
     styles?: string;
 }
 
 @observer
 export class DocCreatorMenuButton extends ObservableReactComponent<DocCreatorMenuButtonProps> {
-
+    // eslint-disable-next-line
     setupButtonClick = (e: React.PointerEvent, func: (...args: any) => void) => {
         setupMoveUpEvents(
             this,
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
index 3eaed79b6..b50fff9e0 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
@@ -1,7 +1,6 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, makeAutoObservable, makeObservable, observable, reaction, runInAction } from "mobx";
+import { action, makeObservable, observable, reaction, runInAction } from "mobx";
 import React from "react";
-import { returnFalse, returnEmptyFilter, returnTrue } from "../../../../../../ClientUtils";
+import { returnFalse, returnEmptyFilter } from "../../../../../../ClientUtils";
 import { emptyFunction } from "../../../../../../Utils";
 import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc";
 import { DefaultStyleProvider } from "../../../../StyleProvider";
@@ -11,14 +10,10 @@ import { TemplatePreviewGrid } from "./TemplatePreviewGrid";
 import { observer } from "mobx-react";
 import { Transform } from "../../../../../util/Transform";
 import { Template } from "../Template";
-import { TemplateMenuAIUtils } from "../Backend/TemplateMenuAIUtils";
 import { ObservableReactComponent } from "../../../../ObservableReactComponent";
 import { IDisposer } from "mobx-utils";
-import { ImageField } from "../../../../../../fields/URLField";
 import { DocCreatorMenuButton } from "./DocCreatorMenuButton";
-import { TbHistory } from "react-icons/tb";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { docStyle } from "pdfjs-dist/types/web/ui_utils";
 
 export type FireflyStructureOptions = {
     numVariations: number;
@@ -56,7 +51,7 @@ export class FireflyVariationsTab extends ObservableReactComponent<FireflyVariat
         cloneTemplate.setMatteBackground();
         const doc: Doc = cloneTemplate.getRenderedDoc()!;
         this._variationURLs = await this._props.menu.generateVariations(doc, this.prompt, this.fireflyOptions);
-        this._variationURLs.forEach(url => {
+        this._variationURLs.forEach(() => {
             const newTemplate: Template = this._props.template.clone(true);
             this._props.menu._variations.push(newTemplate);
         });
@@ -72,7 +67,9 @@ export class FireflyVariationsTab extends ObservableReactComponent<FireflyVariat
         this.promptInput = node;
     }
 
+    // eslint-disable-next-line
     private optionsButtonOpts: [IconProp, () => any] = ['gear', () => {}];
+    // eslint-disable-next-line
     private previewBoxRightButtonOpts: [IconProp, () => any] = ['gear', () => this.forceUpdate()];
 
     render() {
@@ -93,7 +90,7 @@ export class FireflyVariationsTab extends ObservableReactComponent<FireflyVariat
                         <textarea
                             className="docCreatorMenu-variation-prompt-input-textbox"
                             ref={this.setPromptInputRef}
-                            onChange={e => this.prompt = e.target.value}
+                            onChange={e => { this.prompt = e.target.value }}
                             onInput={() => {
                                 if (this.promptInput !== null) {
                                     this.promptInput.style.height = 'auto';
@@ -108,7 +105,7 @@ export class FireflyVariationsTab extends ObservableReactComponent<FireflyVariat
                         <nav className="options‑menu">
                             <label className="menu‑item switch">
                                 <input type="checkbox" checked={this.fireflyOptions.useStyleRef} 
-                                    onChange={(e) => runInAction(() => this.fireflyOptions.useStyleRef = e.target.checked)}
+                                    onChange={(e) => runInAction(() => { this.fireflyOptions.useStyleRef = e.target.checked })}
                                 />
                                 <span className="slider round"></span>
                                 <span className="firefly-option-label">Use template as style guide</span>
@@ -119,7 +116,7 @@ export class FireflyVariationsTab extends ObservableReactComponent<FireflyVariat
                                     min="1" 
                                     max="5" 
                                     value={this.fireflyOptions.numVariations} 
-                                    onChange={(e) => runInAction(() => this.fireflyOptions.numVariations = Number(e.target.value))}
+                                    onChange={(e) => runInAction(() => { this.fireflyOptions.numVariations = Number(e.target.value) })}
                                 />
                                 <span className="value" id="varVal">{this.fireflyOptions.numVariations}</span>
                             </div>
@@ -129,7 +126,7 @@ export class FireflyVariationsTab extends ObservableReactComponent<FireflyVariat
                                     min="1" 
                                     max="100" 
                                     value={this.fireflyOptions.temperature} 
-                                    onChange={(e) => runInAction(() => this.fireflyOptions.temperature = Number(e.target.value))}
+                                    onChange={(e) => runInAction(() => { this.fireflyOptions.temperature = Number(e.target.value) })}
                                 />
                                 <span className="value" id="tempVal">{this.fireflyOptions.temperature}</span>
                             </div>
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateMenuFieldOptions.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateMenuFieldOptions.tsx
index beda45ac3..a4da54392 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateMenuFieldOptions.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateMenuFieldOptions.tsx
@@ -15,7 +15,7 @@ interface TemplateMenuFieldOptionsProps {
 @observer
 export class TemplateMenuFieldOptions extends ObservableReactComponent<TemplateMenuFieldOptionsProps> {
 
-    @observable _collapsedCols: String[] = []; //any columns whose options panels are hidden
+    @observable _collapsedCols: string[] = []; //any columns whose options panels are hidden
 
     constructor(props: TemplateMenuFieldOptionsProps) {
         super(props);
@@ -43,7 +43,7 @@ export class TemplateMenuFieldOptions extends ObservableReactComponent<TemplateM
     conditionForm = (title: string, parameters?: Conditional, empty: boolean = false) => {
 
         const contentFieldTitles = this._props.menu.fieldsInfos.filter(field => field.type !== TemplateFieldType.DATA).map(field => field.title).concat('Template');
-        var params: Conditional = this.getParams(title, parameters);
+        const params: Conditional = this.getParams(title, parameters);
 
         return (
         <div className='form'>
@@ -56,27 +56,27 @@ export class TemplateMenuFieldOptions extends ObservableReactComponent<TemplateM
                 </div>
                 <input
                     className="form-row-textarea"
-                    onChange={e => runInAction(() => params.condition = e.target.value)}
+                    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 ?? 'Own'}</span>
-                    {contentFieldTitles.map(fieldTitle => 
-                        <div className='operator-dropdown-option' onPointerDown={() => {params.target = fieldTitle}}>{fieldTitle === title ? 'Own' : fieldTitle}</div>
+                    {contentFieldTitles.map((fieldTitle, i) => 
+                        <div className='operator-dropdown-option' key={i} onPointerDown={() => {params.target = fieldTitle}}>{fieldTitle === title ? 'Own' : fieldTitle}</div>
                     )}
                 </div>
                 <input
                     className="form-row-textarea"
-                    onChange={e => runInAction(() => params.attribute = e.target.value)}
+                    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)}
+                    onChange={e => runInAction(() => { params.value = e.target.value })}
                     placeholder='value'
                     value={params.value}
                 />
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
index de2f9e455..dc4c35789 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
@@ -1,7 +1,7 @@
 import { Colors } from "@dash/components/src";
 import { FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import { Template } from "../Template";
-import { makeObservable, observable, reaction, runInAction } from "mobx";
+import { makeObservable, observable } from "mobx";
 import React from "react";
 import { ObservableReactComponent } from "../../../../ObservableReactComponent";
 import { DocCreatorMenu } from "../DocCreatorMenu";
@@ -12,15 +12,12 @@ import { returnEmptyFilter, returnFalse } from "../../../../../../ClientUtils";
 import { Transform } from "../../../../../util/Transform";
 import { DefaultStyleProvider } from "../../../../StyleProvider";
 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 {
     template: Template;
-    menu: DocCreatorMenu;
-    leftButtonOpts?: [icon: IconProp, func: (...args: any) => void]
+    menu: DocCreatorMenu; // eslint-disable-next-line
+    leftButtonOpts?: [icon: IconProp, func: (...args: any) => void] // eslint-disable-next-line
     rightButtonOpts?: [icon: IconProp, func: (...args: any) => void]
 }
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
index d53853c52..da4851f84 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
@@ -1,6 +1,4 @@
-import { Colors } from "@dash/components/src";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, makeObservable, observable, runInAction } from "mobx";
+import { makeObservable, runInAction } from "mobx";
 import React from "react";
 import ReactLoading from "react-loading";
 import { Doc } from "../../../../../../fields/Doc";
@@ -18,10 +16,10 @@ export interface SuggestedTemplatesProps {
     loading?: boolean;
     templates: Template[];
     title: string;
-    styles?: string;
-    optionsButtonOpts?: [IconProp, (...args: any) => any];
-    previewBoxLeftButtonOpts?: [IconProp, (...args: any) => any];
-    previewBoxRightButtonOpts?: [IconProp, (...args: any) => any];
+    styles?: string; // eslint-disable-next-line
+    optionsButtonOpts?: [IconProp, (...args: any) => any]; // eslint-disable-next-line
+    previewBoxLeftButtonOpts?: [IconProp, (...args: any) => any]; // eslint-disable-next-line
+    previewBoxRightButtonOpts?: [IconProp, (...args: any) => any]; 
 }
 
 @observer
@@ -46,8 +44,9 @@ export class TemplatePreviewGrid extends ObservableReactComponent<SuggestedTempl
                     (<div className="loading-spinner">
                         <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
                     </div>)
-                    : this.props.templates.map(template => (
+                    : this.props.templates.map((template, i) => (
                         <TemplatePreviewBox 
+                        key={i}
                         template={template} 
                         menu={this.props.menu} 
                         leftButtonOpts={["magnifying-glass", (template: Template) => { this.props.menu.setExpandedView(template); this.forceUpdate(); }]}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateRenderPreviewWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateRenderPreviewWindow.tsx
index 219152549..f281f770e 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateRenderPreviewWindow.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateRenderPreviewWindow.tsx
@@ -1,7 +1,7 @@
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { ObservableReactComponent } from "../../../../ObservableReactComponent";
-import { DataVizTemplateLayout, DocCreatorMenu, LayoutType } from "../DocCreatorMenu";
+import { DocCreatorMenu, LayoutType } from "../DocCreatorMenu";
 import React from "react";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -15,7 +15,6 @@ import { DefaultStyleProvider } from "../../../../StyleProvider";
 import { DocumentView } from "../../../DocumentView";
 import { Transform } from "../../../../../util/Transform";
 import { Docs, DocumentOptions } from "../../../../../documents/Documents";
-import { Template } from "../Template";
 
 interface TemplatesRenderPreviewWindowProps {
     menu: DocCreatorMenu;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
index fd87ae973..7591740e0 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
@@ -4,8 +4,6 @@ import { TemplateFieldType, TemplateLayouts } from './TemplateBackend';
 import { DynamicField } from './TemplateFieldTypes/DynamicField';
 import { FieldSettings, TemplateField, ViewType } from './TemplateFieldTypes/TemplateField';
 import { Conditional } from './Backend/TemplateManager';
-import { ImageField } from '../../../../../fields/URLField';
-import { Doc } from '../../../../../fields/Doc';
 import { TemplateDataField } from './TemplateFieldTypes/DataField';
 
 export class Template {
@@ -72,12 +70,6 @@ export class Template {
 
     setupMainField = (templateInfo: FieldSettings) => TemplateField.CreateField(templateInfo, 1, undefined) as DynamicField;
 
-    printFieldInfo = () => {
-        this.allFields.forEach(field => {
-            const doc = field.renderedDoc;
-        });
-    };
-
     assignColToField = (fieldID: number, col: Col) => {
         const field = this.getFieldByID(fieldID);
         field.setContent(col.defaultContent ?? '', col.type === TemplateFieldType.VISUAL ? ViewType.IMG : ViewType.TEXT);
@@ -102,7 +94,6 @@ export class Template {
         const fieldStatements: Conditional[] = logic[field.getTitle()];
         const content = field.getContent()
         fieldStatements && fieldStatements.forEach(statement => {
-            console.log(statement);
             if (content === statement.condition) {
                 if (statement.target === 'Template') {
                     this._mainField.renderedDoc![statement.attribute] = statement.value;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DataField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DataField.ts
index aaa475bed..6b4086483 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DataField.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DataField.ts
@@ -1,6 +1,5 @@
 
-import { Template } from "../Template";
-import { TemplateField, ViewType } from "./TemplateField";
+import { ViewType } from "./TemplateField";
 
 export class TemplateDataField {
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts
index 1576dd240..b9042258b 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts
@@ -1,6 +1,5 @@
-import { reaction } from 'mobx';
 import { IDisposer } from 'mobx-utils';
-import { Doc, DocListCast } from '../../../../../../fields/Doc';
+import { Doc } from '../../../../../../fields/Doc';
 import { DocData } from '../../../../../../fields/DocSymbols';
 import { List } from '../../../../../../fields/List';
 import { NumCast } from '../../../../../../fields/Types';
@@ -48,10 +47,7 @@ export class DynamicField extends TemplateField {
 
     addField = (field: TemplateField, layer: number = 0) => {
         if (!this._subfields.includes(field)) {
-            console.log('success')
-            console.log('subs: ', this._subfields)
             this._subfields.splice(layer, 0, field);
-            console.log('subffelds: ', this._subfields)
         }
     };
 
@@ -98,7 +94,6 @@ export class DynamicField extends TemplateField {
         const dynClone = super.makeClone(parent) as DynamicField;
         dynClone._subfields = this.getSubfields.map(field => {
             if (field === this.backgroundField) {
-                console.log('background found')
                 const backgroundField: TemplateField = field.makeClone(dynClone, true);
                 dynClone.makeBackgroundField(backgroundField);
                 return backgroundField;
@@ -113,7 +108,7 @@ export class DynamicField extends TemplateField {
     }
 
     initRenderDoc = (settings: FieldSettings) => {
-        this._disposers.fieldList = reaction(() => DocListCast(this._renderDoc?.[Doc.LayoutFieldKey(this._renderDoc)]), this.handleFieldUpdate);
+        //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!);
         settings.opts.title = settings.title;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts
index 2a8e4f09b..569c43af4 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/StaticContentField.ts
@@ -1,4 +1,3 @@
-import { FontSize } from '@dash/components';
 import { FieldResult } from '../../../../../../fields/Doc';
 import { DocData } from '../../../../../../fields/DocSymbols';
 import { RichTextField } from '../../../../../../fields/RichTextField';
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
index a1107caf3..c100d1cce 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts
@@ -1,7 +1,6 @@
 /* eslint-disable no-use-before-define */
 import { Doc } from '../../../../../../fields/Doc';
 import { DocumentOptions } from '../../../../../documents/Documents';
-import { Conditional } from '../Backend/TemplateManager';
 import { Col } from '../DocCreatorMenu';
 import { Template } from '../Template';
 import { TemplateFieldSize, TemplateFieldType } from '../TemplateBackend';
@@ -95,7 +94,7 @@ export abstract class TemplateField {
     exchangeFields(newField: TemplateField, oldField: TemplateField) {
         throw new Error('Only DynamicField can exchange fields.' + newField._title + ' ' + oldField._title);
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     changeFieldType = (newType: ViewType): TemplateField => {
         this._settings.viewType = newType;
         const newField = TemplateField.CreateField(this._settings, this._id, this._parent, true);
-- 
cgit v1.2.3-70-g09d2

