working on firefly integration

3 files changed, 77 insertions, 20 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
index 08a48ccb9..f34b7efcf 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx
@@ -7,13 +7,15 @@ import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc";
 import { DefaultStyleProvider } from "../../../../StyleProvider";
 import { DocumentView, DocumentViewInternal } from "../../../DocumentView";
 import { DocCreatorMenu } from "../DocCreatorMenu";
-import { TemplateSidescrollView } from "./TemplatesSidescrollDisplay";
+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 { TemplatePreviewBoxProps } from "./TemplatePreviewBox";
 
 interface TemplateEditingWindowProps {
     menu: DocCreatorMenu;
@@ -28,8 +30,10 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
     private previewWindow: HTMLDivElement | null = null;
     private _disposers: { [name: string]: IDisposer } = {};
 
+    @observable _loading: boolean = false;
     @observable _variationsTabOpen: boolean = false;
-    @observable _variations: Doc[] = [];
+    @observable _variationURLs: string[] = [];
+    @observable _variations: Template[] = [];
 
     componentDidMount(): void {
         this._disposers.windowDimensions = reaction(() => 
@@ -57,15 +61,24 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
         }
     }
 
+    func = () => {
+        this._props.menu._variations.forEach(variation => {
+            variation.setImageAsBackground('https://www.onthegotours.com/repository/Great-Wall-New-Pic-228551391689622.jpg', true)
+        });
+    }
+
     get fireflyVariationsTab() {
 
         return (
             <>
-                <TemplateSidescrollView
+                <div className="docCreatorMenu-option-divider full no-margin-bottom"/>
+                <TemplatePreviewGrid
                     menu={this._props.menu}
                     title={'Generate Variations'}
-                    templates={[]}
+                    templates={this._props.menu._variations}
+                    optionsButtonOpts={['gear', this.func]}
                     setupButtonClick={this._props.setupButtonClick}
+                    previewBoxRightButtonOpts={['gear', (component: ObservableReactComponent<TemplatePreviewBoxProps>) => {component.forceUpdate();}]}
                 />
                 <div className="docCreatorMenu-section">
                     <div className="docCreatorMenu-variation-prompt-input">
@@ -77,7 +90,21 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                         />
                         <button className="docCreatorMenu-menu-button" 
                             onPointerDown={e => this._props.setupButtonClick(e, async () => {
-                                this._variations = await this._props.menu.generateVariations(this._props.template.getRenderedDoc()!, this.fireflyPrompt);
+                                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._loading = false;
+                                setTimeout(() => {
+                                    console.log('setting')
+                                    this._props.menu._variations = templates;
+                                    this.forceUpdate();
+                                }, 1000);
                             })
                         }>
                             <FontAwesomeIcon icon="arrows-rotate" />
@@ -101,7 +128,7 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                     removeDocument={returnFalse}
                     PanelWidth={() => this.previewWindow?.clientWidth ?? 500}
                     PanelHeight={() => this.previewWindow?.clientHeight ?? 500}
-                    ScreenToLocalTransform={() => new Transform(/*-this._props.menu._pageX - 5, -this._props.menu._pageY - 35*/0, 0, 1)}
+                    ScreenToLocalTransform={() => new Transform(-this._props.menu._pageX - 5, -this._props.menu._pageY - 35, 1)}
                     renderDepth={5}
                     whenChildContentsActiveChanged={emptyFunction}
                     focus={emptyFunction}
@@ -124,7 +151,6 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                 <div className="docCreatorMenu-expanded-template-preview">
                     <div className="top-panel"/>
                     {this.renderedDocPreview}
-                    <div className="docCreatorMenu-option-divider full"/>
                     {this._variationsTabOpen ? this.fireflyVariationsTab : null}
                     <div className="right-buttons-panel">
                         <button
@@ -141,8 +167,8 @@ export class TemplateEditingWindow extends ObservableReactComponent<TemplateEdit
                         </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();
-                                console.log('window: ', this.previewWindow)
                             })}>
                             <FontAwesomeIcon icon="lightbulb" />
                         </button>
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
index e63be8f9c..a7270e540 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewBox.tsx
@@ -11,8 +11,10 @@ import { emptyFunction } from "../../../../../../Utils";
 import { returnEmptyFilter, returnFalse } from "../../../../../../ClientUtils";
 import { Transform } from "../../../../../util/Transform";
 import { DefaultStyleProvider } from "../../../../StyleProvider";
-import { returnEmptyDoclist } from "../../../../../../fields/Doc";
+import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc";
 import { IDisposer } from "mobx-utils";
+import { ImageField } from "../../../../../../fields/URLField";
+import { ImageCast } from "../../../../../../fields/Types";
 
 export interface TemplatePreviewBoxProps {
     template: Template;
@@ -24,12 +26,34 @@ export interface TemplatePreviewBoxProps {
 export class TemplatePreviewBox extends ObservableReactComponent<TemplatePreviewBoxProps> {
 
     private previewWindow: HTMLDivElement | null = null;
+    // private icon: ImageField | undefined = undefined;
 
     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);
+    // }
+
+    get doc() {
+        return this.props.template.getRenderedDoc() as Doc;
+    }
+
     render() {
         const template = this.props.template;
 
@@ -57,8 +81,10 @@ 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.props.template.getRenderedDoc()!} //!!! bad
+                        Document={this.doc}
                         isContentActive={emptyFunction} // !!! should be return false
                         addDocument={returnFalse}
                         moveDocument={returnFalse}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
index 1f6eed9e5..fb246a0a0 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatesSidescrollDisplay.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplatePreviewGrid.tsx
@@ -10,32 +10,37 @@ 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;
-    previewBoxLeftButtonOpts?: [string, () => any];
-    previewBoxRightButtonOpts?: [string, () => any];
+    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 TemplateSidescrollView extends ObservableReactComponent<SuggestedTemplatesProps> {
-
-    @observable _GPTLoading: boolean = false;
+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>
-                    <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.props.setupButtonClick(e, () => runInAction(() => (this.props.menu._menuContent = 'dashboard')))}>
-                        <FontAwesomeIcon icon="gear" />
-                    </button>
+                    {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" style={{ justifyContent: this.props.menu._menuDimensions.width > 400 ? 'center' : '' }}>
-                    {this.props.templates.map(template => (
+                <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}