From 4ce711a5c497a7b198f4be05325cca217fb0844c Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 4 Nov 2024 04:48:32 -0500
Subject: reworking doc generation from template

---
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   | 88 ++++++++++++++--------
 1 file changed, 58 insertions(+), 30 deletions(-)

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

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index e7d6bb98e..7491642eb 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -58,7 +58,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _renderedDocCollection: Doc | undefined = undefined;
 
     @observable _templateDocs: Doc[] = [];
-    @observable _selectedTemplate: Doc | undefined = undefined;
+    @observable _selectedTemplateDoc: Doc | undefined = undefined;
     @observable _userCreatedColumns: Col[] = [];
     @observable _selectedCols: { title: string; type: string; desc: string }[] | undefined = [];
 
@@ -68,7 +68,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _savedLayouts: DataVizTemplateLayout[] = [];
     @observable _expandedPreview: { icon: ImageField; doc: Doc } | undefined = undefined;
 
-    @observable _suggestedTemplates: Doc[] = [];
+    @observable _suggestedTemplates: Template[] = [];
     @observable _GPTOpt: boolean = false;
     @observable _userPrompt: string = '';
     @observable _callCount: number = 0;
@@ -112,12 +112,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @action setTemplateDocs = (docs: Doc[]) => {
         this._templateDocs = docs.map(doc => (doc.annotationOn ? DocCast(doc.annotationOn) : doc));
     };
-    @action setGSuggestedTemplates = (docs: Doc[]) => {
-        this._suggestedTemplates = docs;
+    @action setSuggestedTemplates = (templates: Template[]) => {
+        this._suggestedTemplates = templates;
     };
 
     @computed get docsToRender() {
-        return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
+        return this._selectedTemplateDoc ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
     }
 
     @computed get rowsCount() {
@@ -179,7 +179,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     @computed get canMakeDocs() {
-        return this._selectedTemplate !== undefined && this._layout !== undefined;
+        return this._selectedTemplateDoc !== undefined && this._layout !== undefined;
     }
 
     get bounds(): { t: number; b: number; l: number; r: number } {
@@ -239,7 +239,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             docs => this.updateIcons(docs)
         );
         this._disposers.gpt = reaction(
-            () => this._suggestedTemplates.slice(),
+            () => this._suggestedTemplates.map(template => template.mainField.renderedDoc()).slice(),
             docs => this.updateIcons(docs)
         );
         //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')})
@@ -289,7 +289,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     @action
     openMenu = () => {
-        const allTemplates = this._templateDocs.concat(this._suggestedTemplates);
+        const allTemplates = this._templateDocs.concat(this._suggestedTemplates.map(temp => temp.mainField.renderedDoc()));
         this._shouldDisplay = true;
         this.updateIcons(allTemplates);
     };
@@ -374,15 +374,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return undefined;
     }
 
-    @action updateSelectedTemplate = (template: Doc) => {
-        if (this._selectedTemplate === template) {
-            this._selectedTemplate = undefined;
+    @action updateSelectedTemplate = (template: Template) => {
+        if (this._selectedTemplateDoc === template.mainField.renderedDoc()) {
+            this._selectedTemplateDoc = undefined;
             return;
         } else {
-            this._selectedTemplate = template;
-            MakeTemplate(template);
-            const templateInfo: DataVizTemplateInfo = { doc: template, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount };
-            this._fullyRenderedDocs = this._dataViz?.createDocsFromTemplate(templateInfo, true) ?? [];
+            this._selectedTemplateDoc = template.mainField.renderedDoc();
+            template.renderUpdates();
+            this._fullyRenderedDocs = this.createDocsFromTemplate(template) ?? [];
             this.updateRenderedDocCollection();
         }
     };
@@ -701,11 +700,40 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         });
 
         setTimeout(() => {
-            this.setGSuggestedTemplates(renderedTemplates);
+            this.setSuggestedTemplates(templates);
             this._GPTLoading = false;
         });
     };
 
+    createDocsFromTemplate = (template: Template) => {
+        const dv = this._dataViz;
+        if (!dv) return;
+        const fields: string[] = Array.from(Object.keys(dv.records[0]));
+        const selectedRows = NumListCast(dv.layoutDoc.dataViz_selectedRows);
+
+        const fieldContents: {[title: string]: string}[] = selectedRows.map(row => {
+            let values: {[title: string]: string} = {};
+            fields.forEach(col => {
+                values[col] = dv.records[row][col];
+            });
+
+            return values;
+        });
+
+        const renderedDocs: Doc[] = [];
+
+        fieldContents.forEach(content => {
+            fields.forEach(title => {
+                const field = template.getFieldByTitle(title);
+                field.setContent(content[title]);
+            });
+
+            renderedDocs.push(template.mainField.renderedDoc());
+        });
+
+        return renderedDocs;
+    }
+
     @action setExpandedView = (info: { icon: ImageField; doc: Doc } | undefined) => {
         if (info) {
             const doc = info.doc;
@@ -758,7 +786,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.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.mainField.renderedDoc()).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))}>
@@ -797,16 +825,16 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                     </div>
                                 ) : (
                                     this._suggestedTemplates
-                                        ?.map(doc => ({ icon: ImageCast(doc.icon), doc }))
+                                        ?.map(template => ({ icon: ImageCast(template.mainField.renderedDoc().icon), doc: template.mainField.renderedDoc(), template: template }))
                                         .filter(info => info.icon && info.doc)
                                         .map(info => (
                                             <div
                                                 className="docCreatorMenu-preview-window"
                                                 style={{
-                                                    border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                                                    boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                                                    border: this._selectedTemplateDoc === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                                                    boxShadow: this._selectedTemplateDoc === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '',
                                                 }}
-                                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+                                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.template)))}>
                                                 <button
                                                     className="option-button left"
                                                     onPointerDown={e =>
@@ -845,7 +873,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 <div className="docCreatorMenu-preview-window empty" onPointerDown={e => this.testTemplate()}>
                                     <FontAwesomeIcon icon="plus" color="rgb(160, 160, 160)" />
                                 </div>
-                                {this._templateDocs
+                                {/* {this._templateDocs
                                     .map(doc => ({ icon: ImageCast(doc.icon), doc }))
                                     .filter(info => info.icon && info.doc)
                                     .map(info => {
@@ -855,8 +883,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                             <div
                                                 className="docCreatorMenu-preview-window"
                                                 style={{
-                                                    border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                                                    boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                                                    border: this._selectedTemplateDoc === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                                                    boxShadow: this._selectedTemplateDoc === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '',
                                                 }}
                                                 onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
                                                 <button
@@ -880,7 +908,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                                 <img className="docCreatorMenu-preview-image" src={info.icon!.url.href.replace('.png', '_o.png')} />
                                             </div>
                                         );
-                                    })}
+                                    })} */}
                             </div>
                         </div>
                     </div>
@@ -1072,7 +1100,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._selectedTemplate;
+        const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplateDoc;
         if (!doc) return;
 
         return (
@@ -1192,9 +1220,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 emptyFunction,
                                 undoable(clickEv => {
                                     clickEv.stopPropagation();
-                                    if (!this._selectedTemplate) return;
+                                    if (!this._selectedTemplateDoc) return;
                                     const layout: DataVizTemplateLayout = {
-                                        template: this._selectedTemplate,
+                                        template: this._selectedTemplateDoc,
                                         layout: { type: this._layout.type, xMargin: this._layout.xMargin, yMargin: this._layout.yMargin, repeat: 0 },
                                         columns: this.columnsCount,
                                         rows: this.rowsCount,
@@ -1219,8 +1247,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 emptyFunction,
                                 undoable(clickEv => {
                                     clickEv.stopPropagation();
-                                    if (!this._selectedTemplate) return;
-                                    const templateInfo: DataVizTemplateInfo = { doc: this._selectedTemplate, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount };
+                                    if (!this._selectedTemplateDoc) return;
+                                    const templateInfo: DataVizTemplateInfo = { doc: this._selectedTemplateDoc, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount };
                                     this._dataViz?.createDocsFromTemplate(templateInfo);
                                 }, 'make docs')
                             )
-- 
cgit v1.2.3-70-g09d2