seuggested templates auto-refeshes on col selection; lightbox editing added; GPT refresh button now makes new call

3 files changed, 45 insertions, 33 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index a6d3bfa49..be8a44f28 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -129,6 +129,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
     selectAxes = (axes: string[]) => {
         this.layoutDoc._dataViz_axes = new List<string>(axes);
+        DocCreatorMenu.Instance.generateTemplates('');
     };
     @computed.struct get titleCol() {
         return StrCast(this.layoutDoc._dataViz_titleCol);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 5a9fd3436..ca6534379 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -264,6 +264,7 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
+    overflow-y: scroll;
     //align-items: flex-start;
     margin: 5px;
     margin-top: 0px;
@@ -271,7 +272,8 @@
     height: calc(100% - 30px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
-    overflow: hidden;
+    -ms-overflow-style: none; 
+    scrollbar-width: none;
 }
 
 .docCreatorMenu-preview-container {
@@ -372,7 +374,7 @@
     padding: 0px;
 }
 
-.docCreatorMenu-GPT-templates-preview {
+.docCreatorMenu-templates-preview-window {
     display: flex;
     flex-direction: row;
     //justify-content: center;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 205923346..3e5fc156e 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -4,13 +4,13 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnAll, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
 import { Doc, NumListCast, StrListCast } from '../../../../fields/Doc';
-import { DocCast, ImageCast } from '../../../../fields/Types';
+import { DocCast, ImageCast, ScriptCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
 import { emptyFunction } from '../../../../Utils';
 import { SnappingManager } from '../../../util/SnappingManager';
 import { UndoManager, undoable } from '../../../util/UndoManager';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
-import { DocumentView } from '../DocumentView';
+import { DocumentView, DocumentViewInternal } from '../DocumentView';
 import { DataVizBox } from './DataVizBox';
 import './DocCreatorMenu.scss';
 import { Id } from '../../../../fields/FieldSymbols';
@@ -20,6 +20,9 @@ import { DragManager } from '../../../util/DragManager';
 import { GPTCallType, gptAPICall } from '../../../apis/gpt/GPT';
 import { CollectionFreeFormView } from '../../collections/collectionFreeForm/CollectionFreeFormView';
 import { Docs } from '../../../documents/Documents';
+import { OpenWhere } from '../OpenWhere';
+import { IDisposer } from 'mobx-utils';
+import { LightboxView } from '../../LightboxView';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -34,6 +37,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     static Instance: DocCreatorMenu;
 
+    private _disposers: { [name: string]: IDisposer } = {};
+
     private _ref: HTMLDivElement | null = null;
 
     @observable _templateDocs: Doc[] = [];
@@ -47,12 +52,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _GPTTemplates: Doc[] = [];
     @observable _GPTOpt: boolean = false;
     @observable _userPrompt: string = '';
+    @observable _callCount: number = 0;
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
     @observable _indicatorX: number | undefined = undefined;
     @observable _indicatorY: number | undefined = undefined;
-    @observable _display: boolean = false;
 
     @observable _hoveredLayoutPreview: number | undefined = undefined;
     @observable _mouseX: number = -1;
@@ -72,11 +77,13 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _resizeUndo: UndoManager.Batch | undefined = undefined;
     @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: 300, height: 365};
+    @observable _editing: boolean = false;
 
     constructor(props: any) {
         super(props);
         makeObservable(this);
         DocCreatorMenu.Instance = this;
+        setTimeout(() => this.generateTemplates(''));
     }
 
     @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz };
@@ -170,18 +177,17 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     };
 
-    _disposer: IReactionDisposer | undefined;
-    _GPTDisposer: IReactionDisposer | undefined;
     componentDidMount() {
         document.addEventListener('pointerdown', this.onPointerDown, true);
         document.addEventListener('pointerup', this.onPointerUp);
-        this._disposer = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon));
-        this._GPTDisposer = reaction(() => this._GPTTemplates.slice(), (docs) => docs.map(this.getIcon));
+        this._disposers.templates = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon));
+        this._disposers.gpt = reaction(() => this._GPTTemplates.slice(), (docs) => docs.map(this.getIcon));
+        this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {console.log(true); this.generateTemplates('')})
+        this._disposers.lightbox = reaction(() => LightboxView.LightboxDoc(), doc => { doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu()})
     }
 
     componentWillUnmount() {
-        this._disposer?.();
-        this._GPTDisposer?.();
+        Object.values(this._disposers).forEach(disposer => disposer?.());
         document.removeEventListener('pointerdown', this.onPointerDown, true);
         document.removeEventListener('pointerup', this.onPointerUp);
     }
@@ -198,12 +204,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     };
 
     @action
-    closeMenu = () => {
-        const wasOpen = this._display;
-        this._display = false;
-        this._shouldDisplay = false;
-        return wasOpen;
-    };
+    closeMenu = () => { this._shouldDisplay = false };
+
+    @action
+    openMenu = () => { this._shouldDisplay = true };
 
     @action
     onResizePointerDown = (e: React.PointerEvent): void => {
@@ -313,7 +317,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @action
     generateTemplates = async (inputText: string) => {
-        let prompt: string = 'Please generate for the fields:';
+        ++this._callCount;
+        const origCount = this._callCount;
+
+        let prompt: string = `(#${origCount}) Please generate for the fields:`;
         this.selectedFields?.forEach(field => prompt += ` ${field},`)
         prompt += ` Additional prompt: ${inputText}`;
         console.log(prompt)
@@ -321,14 +328,13 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         try {
             const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
 
-            if (res) {
+            if (res && this._callCount === origCount) {
                 const templates: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[] = JSON.parse(res);
                 this.createGeneratedTemplates(templates, 500, 500);
             }
         } catch (err) {
             console.error(err);
-        }
-
+        } 
     }
 
     @action
@@ -346,23 +352,23 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 return doc;
             });
 
-            const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 40000, y: 40000 });
+            const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 400, y: 400 });
+
             mainCollection.addDocument(template);
             
             GPTTemplates.push(template);
         });
 
-        setTimeout(() => this.setGPTTemplates(GPTTemplates), 500);
+        setTimeout(() => {this.setGPTTemplates(GPTTemplates); GPTTemplates.forEach(template => mainCollection.removeDocument(template))}, 100);
 
         this.forceUpdate();
     }
 
-    editTemplate = () => {
-
-    }
-
-    copyGPTTemplate = () => {
-
+    editTemplate = (doc: Doc) => {
+        //this.closeMenu();
+        DocumentViewInternal.addDocTabFunc(doc, OpenWhere.lightboxAlways);
+        DocumentView.DeselectAll();
+        Doc.UnBrushDoc(doc);
     }
 
     get templatesPreviewContents(){
@@ -380,7 +386,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                             <FontAwesomeIcon icon='gear'/>
                         </button>
                     </div>
-                    <div className='docCreatorMenu-GPT-templates-preview'>
+                    <div className='docCreatorMenu-templates-preview-window'>
                         {this._GPTTemplates?.map(doc => 
 
                         //<div className='docCreatorMenu-preview-window empty'/>
@@ -392,10 +398,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                             }}
                             onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
-                                <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate()})}>
+                                <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate(info.doc)})}>
                                     <FontAwesomeIcon icon='pencil' color='black'/>
                                 </button>
-                                <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => {this.copyGPTTemplate()})}>
+                                <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}>
                                     <FontAwesomeIcon icon='plus' color='black'/>
                                 </button>
                                 <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
@@ -420,7 +426,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                             <FontAwesomeIcon icon='gear'/>
                         </button>
                     </div>
-                    <div className='docCreatorMenu-GPT-templates-preview'>
+                    <div className='docCreatorMenu-templates-preview-window'>
                         <div className='docCreatorMenu-preview-window empty'
                         onPointerDown={e => this.setUpButtonClick(e, this.basicTemplateTest)}
                         >
@@ -436,6 +442,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                             }}
                             onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+                                <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate(info.doc)})}>
+                                    <FontAwesomeIcon icon='pencil' color='black'/>
+                                </button>
                                 <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
                             </div>
                         )})}