From 9b42bf8ab277979194e4ef73152b6b23c479786b Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 7 Nov 2024 03:36:50 -0500
Subject: gpt text gen working for previews

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 107 ---------------------
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.scss  |   3 +-
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   |  40 +++-----
 .../DocCreatorMenu/FieldTypes/StaticField.tsx      |   2 -
 .../nodes/DataVizBox/DocCreatorMenu/Template.tsx   |  17 +++-
 .../DataVizBox/DocCreatorMenu/TemplateBackend.tsx  |   5 +-
 .../DataVizBox/DocCreatorMenu/TemplateManager.tsx  |  12 ---
 7 files changed, 36 insertions(+), 150 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 6621c610f..dececd1dc 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -511,7 +511,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     openDocCreatorMenu = (x: number, y: number) => {
         DocCreatorMenu.Instance.toggleDisplay(x, y);
         DocCreatorMenu.Instance.setDataViz(this);
-        DocCreatorMenu.Instance.setTemplateDocs(this.getPossibleTemplates());
     };
 
     specificContextMenu = (e: React.MouseEvent) => {
@@ -623,112 +622,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     };
 
-    getPossibleTemplates = (): Doc[] => {
-        const linkedDocs: Doc[] = LinkManager.Instance.getAllRelatedLinks(this.Document).map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)));
-        const linkedCollections: Doc[] = linkedDocs.filter(doc => doc.type === 'config').map(doc => DocCast(doc.annotationOn));
-        const isColumnTitle = (title: string): boolean => {
-            const colTitles: string[] = Object.keys(this.records[0]);
-            for (let i = 0; i < colTitles.length; ++i) {
-                if (colTitles[i] === title) {
-                    return true;
-                }
-            }
-            return false;
-        };
-        const isValidTemplate = (collection: Doc) => {
-            const childDocs = DocListCast(collection[Doc.LayoutFieldKey(collection)]);
-            for (let i = 0; i < childDocs.length; ++i) {
-                if (isColumnTitle(String(childDocs[i].title))) return true;
-            }
-            return false;
-        };
-        return linkedCollections.filter(col => isValidTemplate(col));
-    };
-
-    ApplyTemplateTo = (templateDoc: Doc, target: Doc, targetKey: string, titleTarget: string | undefined) => {
-        if (!Doc.AreProtosEqual(target[targetKey] as Doc, templateDoc)) {
-            if (target.resolvedDataDoc) {
-                target[targetKey] = new PrefetchProxy(templateDoc);
-            } else {
-                titleTarget && (Doc.GetProto(target).title = titleTarget);
-                const setDoc = [AclAdmin, AclEdit, AclAugment].includes(GetEffectiveAcl(Doc.GetProto(target))) ? Doc.GetProto(target) : target;
-                setDoc[targetKey] = new PrefetchProxy(templateDoc);
-            }
-        }
-        return target;
-    };
-
-    applyLayout = (templateInfo: DataVizTemplateInfo, docs: Doc[]) => {
-        if (templateInfo.layout.type === LayoutType.STACKED) return;
-        const columns: number = templateInfo.columns;
-        const xGap: number = templateInfo.layout.xMargin;
-        const yGap: number = templateInfo.layout.yMargin;
-        // const repeat: number = templateInfo.layout.repeat;
-        const startX: number = templateInfo.referencePos.x;
-        const startY: number = templateInfo.referencePos.y;
-        const templWidth = Number(templateInfo.doc._width);
-        const templHeight = Number(templateInfo.doc._height);
-
-        let i: number = 0;
-        let docsChanged: number = 0;
-        let curX: number = startX;
-        let curY: number = startY;
-
-        while (docsChanged < docs.length) {
-            while (i < columns && docsChanged < docs.length) {
-                docs[docsChanged].x = curX;
-                docs[docsChanged].y = curY;
-                curX += templWidth + xGap;
-                ++docsChanged;
-                ++i;
-            }
-
-            i = 0;
-            curX = startX;
-            curY += templHeight + yGap;
-        }
-    };
-
-    // @action addSavedLayout = (layout: DataVizTemplateLayout) => {
-    //     const saved = Cast(this.layoutDoc.dataViz_savedTemplates, listSpec('RefField'));
-
-    // }
-
-    @action
-    createDocsFromTemplate = (templateInfo: DataVizTemplateInfo, returnList?: boolean): Doc[] => {
-        if (!templateInfo.doc) {console.log('noinfo'); return []; }
-        const fields: string[] = Array.from(Object.keys(this.records[0]));
-        const selectedRows = NumListCast(this.layoutDoc.dataViz_selectedRows);
-        const docs: Doc[] = selectedRows.map(row => {
-            const values: string[] = [];
-            fields.forEach(col => values.push(this.records[row][col]));
-
-            
-
-            const proto = new Doc();
-            proto.author = ClientUtils.CurrentUserEmail();
-            values.forEach((val, i) => {
-                proto[fields[i]] = val as FieldType;
-            });
-
-            const target = Doc.MakeDelegate(proto);
-            const targetKey = StrCast(templateInfo.doc!.layout_fieldKey, 'layout');
-            const applied = this.ApplyTemplateTo(templateInfo.doc!, target, targetKey, templateInfo.doc!.title + `${row}`);
-            target.layout_fieldKey = targetKey;
-
-            //this.applyImagesTo(target, fields);
-            return applied;
-        });
-
-        if (returnList) return docs;
-
-        const mainCollection = this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        docs.forEach(doc => mainCollection.addDocument(doc));
-
-        this.applyLayout(templateInfo, docs);
-        return [];
-    };
-
     /**
      * creates a new dataviz document filter from this one
      *      it appears to the right of this document, with the
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
index b849c044d..98d630dae 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -45,9 +45,10 @@
         font-size: 12px;
         width: 18px;
         height: 18px;
-        border-radius: 2px;
         font-size: 12px;
         margin-left: auto;
+        margin-right: 5px;
+        margin-bottom: 3px;
     }
 
     &.options {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index a08686a36..379a33a99 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -123,7 +123,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
     @action setSuggestedTemplates = (templates: Template[]) => {
         this._suggestedTemplates = templates;
-        templates.forEach(template => { this._suggestedTemplatePreviews.push({template: template, doc: template.mainField.renderedDoc()}) }); //prettier-ignore
+        this._suggestedTemplatePreviews = templates.map(template => {return {template: template, doc: template.mainField.renderedDoc()}}); //prettier-ignore
     };
 
     @computed get docsToRender() {
@@ -497,7 +497,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
      * @param assignments a list of template field numbers (from top to bottom) and their assigned columns from the linked dataviz
      * @returns a doc containing the fully rendered template
      */
-    applyGPTContentToTemplate = async (template: Template, assignments: { [field: string]: Col }): Promise<Template> => {
+    applyGPTContentToTemplate = async (template: Template, assignments: { [field: string]: Col }): Promise<Template | undefined> => {
         const wordLimit = (size: TemplateFieldSize) => {
             switch (size) {
                 case TemplateFieldSize.TINY:
@@ -526,6 +526,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const GPTTextCalls = Object.entries(assignments).filter(([str, col]) => col.type === TemplateFieldType.TEXT);
         const GPTIMGCalls = Object.entries(assignments).filter(([str, col]) => col.type === TemplateFieldType.VISUAL);
 
+        if (!GPTTextCalls && !GPTIMGCalls) return;
+
         const stringifyGPTInfo = (calls: [string, Col][]): string => {
             let string: string = '*** COLUMN INFO:';
             calls.forEach(([fieldNum, col]) => {
@@ -536,13 +538,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const GPTTextAssignment = stringifyGPTInfo(GPTTextCalls);
 
-        let fieldContent: string = this.templateManager.getContentSummary(template);
+
+        let fieldContent: string = template.compiledContent;
 
         if (GPTTextCalls.length) {
             try {
                 const prompt = fieldContent + GPTTextAssignment;
 
-                const res = await gptAPICall(prompt, GPTCallType.FILL);
+                const res = await gptAPICall(`${++this._callCount}: ${prompt}`, GPTCallType.FILL);
 
                 if (res) {
                     const assignments: { [title: string]: { number: string; content: string } } = JSON.parse(res);
@@ -586,11 +589,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     compileFieldDescriptions = (templates: Template[]): string => {
         let descriptions: string = '';
         templates.forEach(template => {
-            console.log('title: ', template.mainField.getTitle());
             descriptions += `----------  NEW TEMPLATE TO INCLUDE: The title is: ${template.mainField.getTitle()}. Its fields are: `;
-            template.contentFields.forEach(field => {
-                descriptions += `{Field #${field.getID}: ${field.getDescription}} `;
-            });
+            descriptions += template.descriptionSummary;
         });
 
         return descriptions;
@@ -624,9 +624,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         try {
             const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
 
-            if (res && this._callCount === origCount) {
+            if (res) {
                 const assignments: { [templateTitle: string]: { [fieldID: string]: string } } = JSON.parse(res);
-                console.log('assignments', assignments)
                 const brokenDownAssignments: [Template, { [fieldID: number]: Col }][] = [];
 
                 Object.entries(assignments).forEach(([tempTitle, assignment]) => {
@@ -667,9 +666,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const assignments: [Template, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols);
 
-        const renderedTemplatePromises: Promise<Template>[] = assignments.map(([template, assignments]) => this.applyGPTContentToTemplate(template, assignments));
+        const renderedTemplatePromises: Promise<Template | undefined>[] = assignments.map(([template, assignments]) => this.applyGPTContentToTemplate(template, assignments));
 
-        //const renderedTemplates: Template[] = await Promise.all(renderedTemplatePromises);
+        const renderedTemplates: (Template | undefined)[] = await Promise.all(renderedTemplatePromises);
 
         setTimeout(() => {
             this.setSuggestedTemplates(templates);
@@ -1029,13 +1028,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }
     };
 
-    addDocAsResult = (doc: Doc) => {
-        doc.x = this._pageX;
-        doc.y = this._pageY;
-        this.closeMenu();
-        //!!! will need to add to main collection when I refactor 
-    }
-
     @computed
     get previewInfo(){
         const docHeight: number = Number(this._fullyRenderedDocs[0]._height);
@@ -1078,8 +1070,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const collection: Doc = collectionFactory()(this._fullyRenderedDocs, {
             isDefaultTemplateDoc: true,
-            x: 40000,
-            y: 40000,
             _height: verticalSpan,
             _width: horizontalSpan,
             title: 'title',
@@ -1243,9 +1233,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     get dashboardContents() {
         const sizes: string[] = ['tiny', 'small', 'medium', 'large', 'huge'];
 
-        const fieldPanel = (field: Col) => {
+        const fieldPanel = (field: Col, id: number) => {
             return (
-                <div className="field-panel" key={field.title}>
+                <div className="field-panel" key={id}>
                     <div className="top-bar">
                         <span className="field-title">{`${field.title} Field`}</span>
                         <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))} style={{ position: 'absolute', right: '0px' }}>
@@ -1328,7 +1318,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                         <FontAwesomeIcon icon="arrow-left" />
                     </button>
                 </div>
-                <div className="panels-container">{this.fieldsInfos.map(field => fieldPanel(field))}</div>
+                <div className="panels-container">{this.fieldsInfos.map((field, i) => fieldPanel(field, i))}</div>
             </div>
         );
     }
@@ -1434,7 +1424,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                             <div className="docCreatorMenu-top-buttons-container">
                                 {topButton('lightbulb', 'templates', onPreviewSelected, 'left')}
                                 {topButton('magnifying-glass', 'options', onOptionsSelected, 'middle')}
-                                {topButton('floppy-disk', 'saved', onSavedSelected, 'right')}
+                                {topButton('bars', 'saved', onSavedSelected, 'right')}
                             </div>
                             <button className="docCreatorMenu-menu-button close-menu" onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
                                 <FontAwesomeIcon icon={'minus'} />
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
index 3e0c8abcf..033900fe9 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/StaticField.tsx
@@ -119,7 +119,6 @@ export class StaticField {
         switch (this.contentType) {
             case FieldContentType.STRING:
                 const text = String(this.content);
-                console.log('made text')
                 doc = Docs.Create.TextDocument(text, {
                     title: this.title,
                     text_fontColor: oldDoc ? String(oldDoc.color) : opts.color,
@@ -131,7 +130,6 @@ export class StaticField {
                 FieldUtils.applyBasicOpts(doc, this.dimensions, this.settings, oldDoc);
                 break;
             case FieldContentType.IMAGE:
-                console.log('made image')
                 const url = String(this.content);
                 doc = Docs.Create.ImageDocument(url, {
                     title: this.title,
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
index 4c6425f23..7d32d26d1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.tsx
@@ -32,6 +32,22 @@ export class Template {
         return new DynamicField(templateInfo, 1);
     }
 
+    get descriptionSummary(): string {
+        let summary: string = '';
+        this.contentFields.forEach(field => {
+            summary += `--- Field #${field.getID} (title: ${field.getTitle()}): ${field.getDescription ?? ''} ---`;
+        });
+        return summary;
+    }
+
+    get compiledContent(): string {
+        let summary: string = '';
+        this.contentFields.forEach(field => {
+            summary += `--- Field #${field.getID} (title: ${field.getTitle()}): ${field.getContent() ?? ''} ---`;
+        });
+        return summary;
+    }
+
     renderUpdates = () => {
         this.allFields.forEach(field => {
             field.updateRenderedDoc(field.renderedDoc());
@@ -45,7 +61,6 @@ export class Template {
     }
 
     getMatches = (cols: Col[]): number[][] => {
-        console.log(this.mainField.getTitle(), this.allFields)
         const numFields = this.contentFields.length;
 
         if (cols.length !== numFields) return [];
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
index d434e98b1..9b8ec64c0 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
@@ -109,6 +109,7 @@ export class TemplateLayouts {
                 opts: {
                     borderWidth: '8',
                     borderColor: '#F8E71C',
+                    backgroundColor: '#242425',
                 },
             },
             {
@@ -143,9 +144,9 @@ export class TemplateLayouts {
                 viewType: ViewType.STATIC,
                 tl: [-0.83, 0.2],
                 br: [0.83, 0.95],
-                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+                types: [TemplateFieldType.TEXT],
                 sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-                description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus, or share focus with field 1.',
+                description: 'A medium to large-sized field suitable for longer text that should contextualize field 1.',
                 opts: {
                     borderWidth: '8',
                     borderColor: '#F8E71C',
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
index d47ae802c..890bc6f73 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateManager.tsx
@@ -17,18 +17,6 @@ export class TemplateManager {
         return initializedTemplates;
     }
 
-    /**
-     * Provides a text summary of content currently filled into a template, formatted for GPT analysis.
-     * @param template the template to be summarized
-     */
-    getContentSummary = (template: Template) => {
-        let summary: string = '';
-        template.contentFields.forEach(field => {
-            summary += `--- Field #${field.getID} (title: ${field.getTitle()}): ${field.getContent() ?? ''} ---`;
-        });
-        return summary;
-    }
-
     getValidTemplates = (cols: Col[]): Template[] => {
         return this.templates.filter(template => template.isValidTemplate(cols));
     }
-- 
cgit v1.2.3-70-g09d2