1 files changed, 22 insertions, 19 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index b626fc70c..2ddaa214c 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -35,7 +35,7 @@ import { DrawingFillHandler } from '../../../smartdraw/DrawingFillHandler';
 import { CgPathIntersect } from 'react-icons/cg';
 import { StaticContentField } from './TemplateFieldTypes/StaticContentField';
 import { TemplateMenuAIUtils } from './Backend/TemplateMenuAIUtils'
-import { TemplateSidescrollView } from './Menu/TemplatesSidescrollDisplay';
+import { TemplatePreviewGrid } from './Menu/TemplatePreviewGrid';
 import { TemplateEditingWindow } from './Menu/TemplateEditingWindow';
 
 export enum LayoutType {
@@ -133,6 +133,8 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     @observable _initDimensions: { width: number; height: number; x?: number; y?: number } = { width: 300, height: 400, x: undefined, y: undefined };
     @observable _menuDimensions: { width: number; height: number } = { width: 400, height: 400 };
 
+    @observable _variations: Template[] = [];
+
     constructor(props: DocCreateMenuProps) {
         super(props);
         makeObservable(this);
@@ -591,9 +593,9 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         );
     };
 
-    generateVariations = async (onDoc: Doc, prompt: string): Promise<Doc[]> => {
+    generateVariations = async (onDoc: Doc, prompt: string): Promise<string[]> => {
         this._loadingVariants = true;
-        this.variationDocss = [];
+        this.variations = [];
         const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
 
         const clone: Doc = (await Doc.MakeClone(onDoc)).clone;
@@ -605,17 +607,13 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
 
         this._loadingVariants = false;
 
-        return this.variationDocss;
+        return this.variations;
     }
 
-    @observable variationDocss: Doc[] = []
+    @observable variations: string[] = []
 
-    @action addVariationDoc = (doc: Doc) => {
-        this.variationDocss.push(doc);
-        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        mainCollection.addDocument(doc);
-        doc.x = 10000;
-        doc.y = 10000;
+    @action addVariation = (url: string) => {
+        this.variations.push(url);
     }
 
     addRenderedCollectionToMainview = () => {
@@ -767,8 +765,8 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
 
         this._renderedDocCollection = collection;
 
-        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        mainCollection.addDocument(collection);
+        // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+        // mainCollection.addDocument(collection);
 
         console.log('changed to: ', collection);
     };
@@ -1060,15 +1058,24 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
         );
     }
 
+    @computed get editingView() {
+        return <TemplateEditingWindow
+                    setupButtonClick={this.setUpButtonClick} 
+                    template={this._currEditingTemplate as Template}
+                    menu={this}
+                />
+    }
+
     get renderSelectedViewType() {
         switch (this._menuContent) {
             case 'templates': 
                 return (
                     <div className='docCreatorMenu-templates-view'>
                         <div className="docCreatorMenu-templates-displays">
-                            <TemplateSidescrollView 
+                            <TemplatePreviewGrid 
                                 title={'Suggested Templates'} 
                                 menu={this} 
+                                optionsButtonOpts={['gear', () => (this._menuContent = 'dashboard')]}
                                 setupButtonClick={this.setUpButtonClick} 
                                 templates={this._suggestedTemplates}
                             />
@@ -1083,11 +1090,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                     </div>
                 )
             case 'templateEditing':
-                return <TemplateEditingWindow
-                    setupButtonClick={this.setUpButtonClick} 
-                    template={this._currEditingTemplate as Template}
-                    menu={this}
-                />
+                return this.editingView
             case 'options':   return this.optionsMenuContents;
             case 'dashboard': return this.dashboardContents;
         } // prettier-ignore