diff options
7 files changed, 36 insertions, 150 deletions
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)); } |