reworking preview rendering to make it just docs rather than images of docs

4 files changed, 73 insertions, 40 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 7491642eb..fcf237e02 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -57,8 +57,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _renderedDocCollectionPreview: Doc | undefined = undefined;
     @observable _renderedDocCollection: Doc | undefined = undefined;
 
-    @observable _templateDocs: Doc[] = [];
-    @observable _selectedTemplateDoc: Doc | undefined = undefined;
+    @observable _templateDocs: Doc[] = []; //!!! used to keep track of all templates, should be refactored to work with actual templates and not docs
+    @observable _selectedTemplate: Template | undefined = undefined;
     @observable _userCreatedColumns: Col[] = [];
     @observable _selectedCols: { title: string; type: string; desc: string }[] | undefined = [];
 
@@ -69,6 +69,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _expandedPreview: { icon: ImageField; doc: Doc } | undefined = undefined;
 
     @observable _suggestedTemplates: Template[] = [];
+    @observable _suggestedTemplateDocs
     @observable _GPTOpt: boolean = false;
     @observable _userPrompt: string = '';
     @observable _callCount: number = 0;
@@ -117,7 +118,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     @computed get docsToRender() {
-        return this._selectedTemplateDoc ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
+        return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
     }
 
     @computed get rowsCount() {
@@ -156,6 +157,45 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return StrListCast(this._dataViz?.layoutDoc._dataViz_axes);
     }
 
+    @computed get selectedTemplateDocs(): {doc: React.JSX.Element, template: Template}[] {
+        const docs: {doc: Doc, template: Template}[] = this._suggestedTemplates?.map(template => { return {doc: template.mainField.renderedDoc(), template: template}});
+        const docPreviews: {doc: Doc, template: Template}[] = docs.map(info => 
+            {return {doc: Docs.Create.FreeformDocument([info.doc], { _height: NumListCast(info.doc._height)[0], _width: NumListCast(info.doc._width)[0], title: ''}), template: info.template}
+        });
+        const renderedComponents = docPreviews.map(info => 
+            {return {doc: <CollectionFreeFormView
+            Document={info.doc}
+            docViewPath={returnEmptyDocViewList}
+            childLayoutTemplate={() => Cast(info.doc.childLayoutTemplate, Doc, null)}
+            isContentActive={emptyFunction}
+            isAnyChildContentActive={() => true}
+            select={emptyFunction}
+            isSelected={returnFalse}
+            fieldKey={Doc.LayoutFieldKey(info.doc)}
+            addDocument={returnFalse}
+            moveDocument={returnFalse}
+            removeDocument={returnFalse}
+            PanelWidth={() => 100}
+            PanelHeight={() => 100}
+            ScreenToLocalTransform={() => new Transform(-this._pageX - 5,-this._pageY - 35, 1)}
+            renderDepth={5}
+            whenChildContentsActiveChanged={emptyFunction}
+            focus={emptyFunction}
+            styleProvider={DefaultStyleProvider}
+            addDocTab={this._props.addDocTab}
+            // eslint-disable-next-line no-use-before-define
+            pinToPres={() => undefined}
+            childFilters={returnEmptyFilter}
+            childFiltersByRanges={returnEmptyFilter}
+            searchFilterDocs={returnEmptyDoclist}
+            fitContentsToBox={returnTrue}
+            xPadding={0}
+            yPadding={0}
+            />, template: info.template}
+        });
+        return renderedComponents;
+    }
+
     @computed get fieldsInfos(): Col[] {
         const colInfo = this._dataViz?.colsInfo;
         return this.selectedFields
@@ -179,7 +219,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     @computed get canMakeDocs() {
-        return this._selectedTemplateDoc !== undefined && this._layout !== undefined;
+        return this._selectedTemplate !== undefined && this._layout !== undefined;
     }
 
     get bounds(): { t: number; b: number; l: number; r: number } {
@@ -239,8 +279,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             docs => this.updateIcons(docs)
         );
         this._disposers.gpt = reaction(
-            () => this._suggestedTemplates.map(template => template.mainField.renderedDoc()).slice(),
-            docs => this.updateIcons(docs)
+            () => this._suggestedTemplates.slice(),
+            templates => this.updateIcons(templates.map(t => t.doc))
         );
         //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')})
         this._disposers.lightbox = reaction(
@@ -263,6 +303,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     updateIcons = (docs: Doc[]) => {
+        console.log('called')
         docs.map(this.getIcon);
     };
 
@@ -289,9 +330,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     @action
     openMenu = () => {
-        const allTemplates = this._templateDocs.concat(this._suggestedTemplates.map(temp => temp.mainField.renderedDoc()));
+        const allTemplates = this._templateDocs.concat(this._suggestedTemplates.map(temp => temp.doc));
         this._shouldDisplay = true;
-        this.updateIcons(allTemplates);
     };
 
     @action
@@ -375,11 +415,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     @action updateSelectedTemplate = (template: Template) => {
-        if (this._selectedTemplateDoc === template.mainField.renderedDoc()) {
-            this._selectedTemplateDoc = undefined;
+        if (this._selectedTemplate === template) {
+            this._selectedTemplate = undefined;
             return;
         } else {
-            this._selectedTemplateDoc = template.mainField.renderedDoc();
+            this._selectedTemplate = template;
             template.renderUpdates();
             this._fullyRenderedDocs = this.createDocsFromTemplate(template) ?? [];
             this.updateRenderedDocCollection();
@@ -691,14 +731,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         //const renderedTemplates: Template[] = await Promise.all(renderedTemplatePromises);
 
-        const renderedTemplates: Doc[] = templates.map(template => template.mainField.renderedDoc());
-
-        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        
-        renderedTemplates.forEach(doc => {
-            mainCollection.addDocument(doc);
-        });
-
         setTimeout(() => {
             this.setSuggestedTemplates(templates);
             this._GPTLoading = false;
@@ -734,14 +766,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return renderedDocs;
     }
 
-    @action setExpandedView = (info: { icon: ImageField; doc: Doc } | undefined) => {
-        if (info) {
-            const doc = info.doc;
-            const wrapper: Doc = Docs.Create.FreeformDocument([info.doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''});
+    @action setExpandedView = (doc: Doc | undefined) => {
+        if (doc) {
+            const wrapper: Doc = Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''});
             const newInfo = {icon: new ImageField(''), doc: wrapper}
             this._expandedPreview = newInfo;
         } else {
-            this._expandedPreview = info;
+            this._expandedPreview = {icon: new ImageField(''), doc: doc ?? new Doc()}; //!!! get rid of image stuff
         }
     };
 
@@ -786,7 +817,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 <div className="top-panel"/>
                 {rendered}
                 <div className="right-buttons-panel">
-                    <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => {this._expandedPreview && this.updateIcons(this._suggestedTemplates.map(template => template.mainField.renderedDoc()).slice()); this.setExpandedView(undefined)})}>
+                    <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => {this._expandedPreview && this.updateIcons(this._suggestedTemplates.map(template => template.doc).slice()); this.setExpandedView(undefined)})}>
                         <FontAwesomeIcon icon="minimize" />
                     </button>
                     <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._templateDocs.push(this._expandedPreview.doc))}>
@@ -805,6 +836,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         //<img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
 
+        console.log('rendered')
         return (
             <div className={`docCreatorMenu-templates-view`}>
                 {this._expandedPreview ? (
@@ -824,30 +856,28 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                         <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
                                     </div>
                                 ) : (
-                                    this._suggestedTemplates
-                                        ?.map(template => ({ icon: ImageCast(template.mainField.renderedDoc().icon), doc: template.mainField.renderedDoc(), template: template }))
-                                        .filter(info => info.icon && info.doc)
-                                        .map(info => (
+                                    this.selectedTemplateDocs
+                                        .map(({doc, template}) => (
                                             <div
                                                 className="docCreatorMenu-preview-window"
                                                 style={{
-                                                    border: this._selectedTemplateDoc === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                                                    boxShadow: this._selectedTemplateDoc === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                                                    border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                                                    boxShadow: this._selectedTemplate === template ? `0 0 15px rgba(68, 118, 247, .8)` : '',
                                                 }}
-                                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.template)))}>
+                                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(template)))}>
                                                 <button
                                                     className="option-button left"
                                                     onPointerDown={e =>
                                                         this.setUpButtonClick(e, () => {
-                                                            this.setExpandedView(info);
+                                                            this.setExpandedView(template.mainField.renderedDoc());
                                                         })
                                                     }>
                                                     <FontAwesomeIcon icon="magnifying-glass" color="white" />
                                                 </button>
-                                                <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}>
+                                                <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(template.mainField.renderedDoc()))}>
                                                     <FontAwesomeIcon icon="plus" color="white" />
                                                 </button>
-                                                <img className="docCreatorMenu-preview-image" src={info.icon!.url.href.replace('.png', '_o.png')} />
+                                                {doc}
                                             </div>
                                         ))
                                 )}
@@ -1100,7 +1130,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => {
-        const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplateDoc;
+        const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate?.mainField.renderedDoc(); //!!! might cause a slow down
         if (!doc) return;
 
         return (
@@ -1220,9 +1250,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 emptyFunction,
                                 undoable(clickEv => {
                                     clickEv.stopPropagation();
-                                    if (!this._selectedTemplateDoc) return;
+                                    if (!this._selectedTemplate) return;
                                     const layout: DataVizTemplateLayout = {
-                                        template: this._selectedTemplateDoc,
+                                        template: this._selectedTemplate.mainField.renderedDoc(),
                                         layout: { type: this._layout.type, xMargin: this._layout.xMargin, yMargin: this._layout.yMargin, repeat: 0 },
                                         columns: this.columnsCount,
                                         rows: this.rowsCount,
@@ -1247,8 +1277,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 emptyFunction,
                                 undoable(clickEv => {
                                     clickEv.stopPropagation();
-                                    if (!this._selectedTemplateDoc) return;
-                                    const templateInfo: DataVizTemplateInfo = { doc: this._selectedTemplateDoc, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount };
+                                    if (!this._selectedTemplate) return;
+                                    const templateInfo: DataVizTemplateInfo = { doc: this._selectedTemplate.mainField.renderedDoc(), layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount };
                                     this._dataViz?.createDocsFromTemplate(templateInfo);
                                 }, 'make docs')
                             )
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
index c0f2f183a..953dbabf6 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/DynamicField.tsx
@@ -92,6 +92,7 @@ export class DynamicField implements Field {
     };
 
     renderedDoc = (): Doc => {
+        console.log('called')
         switch (this.settings.viewType) {
             case ViewType.CAROUSEL3D:
                 const carouselDoc = Docs.Create.Carousel3DDocument(this.subfields.map(field => field.renderedDoc()), {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
index 3e0c8abcf..1320e270d 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
@@ -53,6 +53,7 @@ export class StaticField {
     }
 
     renderedDoc = () => {
+        console.log('called')
         return this.renderedDocument;
     }
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index 6b981d77f..c96135b4d 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -18,6 +18,7 @@ export class Template {
     get childFields(): Field[] { return this.mainField.getSubfields };
     get allFields(): Field[] { return this.mainField.getAllSubfields };
     get contentFields(): Field[] { return this.allFields.filter(field => field.getViewType === ViewType.STATIC) };
+    get doc(){ return this.mainField.renderedDoc(); };
 
     getFieldByID = (id: number): Field => {
         return this.allFields.filter(field => field.getID === id)[0];