diff options
Diffstat (limited to 'src')
4 files changed, 91 insertions, 201 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index 97faf01c2..444f0a29d 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -73,11 +73,8 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> static Instance: DocCreatorMenu; private DEBUG_MODE: boolean = false; - private _disposers: { [name: string]: IDisposer } = {}; - private _ref: HTMLDivElement | null = null; - private templateManager: TemplateManager; @observable _fullyRenderedDocs: Doc[] = []; // collection of templates filled in with content @@ -371,8 +368,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> } @action updateRenderedPreviewCollection = async (template: Template) => { - this._fullyRenderedDocs = ((await this.createDocsFromTemplate(template)) ?? []).filter(doc => doc).map(doc => doc!); - console.log(this._fullyRenderedDocs); + this._fullyRenderedDocs = this._dataViz ? ((await this.createDocsFromTemplate(this._dataViz, template)).filter(doc => doc).map(doc => doc!) ?? []) : []; this.updateRenderedDocCollection(); }; @@ -711,98 +707,66 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> return true; }; - createDocsFromTemplate = async (template: Template) => { - const dv = this._dataViz; - - if (!dv) return; - + createDocsFromTemplate = action((dv: DataVizBox, template: Template) => { this._docsRendering = true; + const fields = Array.from(Object.keys(dv.records[0])); - const fields: string[] = Array.from(Object.keys(dv.records[0])); - const selectedRows = NumListCast(dv.layoutDoc.dataViz_selectedRows); - - const rowContents: { [title: string]: string }[] = selectedRows.map(row => { - const values: { [title: string]: string } = {}; - fields.forEach(col => { - values[col] = dv.records[row][col]; - }); - - return values; - }); - - const processContent = async (content: { [title: string]: string }) => { - const templateCopy = await template.cloneBase(); + const processContent = (content: { [title: string]: string }) => { + const templateCopy = template.cloneBase(); fields .filter(title => title) .forEach(title => { const field = templateCopy.getFieldByTitle(title); - if (field === undefined) return; - field.setContent(content[title], field.viewType); + if (field !== undefined) field.setContent(content[title], field.viewType); }); + const gptFunc = (type: TemplateFieldType) => (type === TemplateFieldType.VISUAL ? this.renderGPTImageCall : this.renderGPTTextCall); const gptPromises = this._userCreatedFields - .filter(field => field.type === TemplateFieldType.TEXT) - .map(field => { - const title = field.title; - const templateField = templateCopy.getFieldByTitle(title); - if (templateField === undefined) return; - const templatefieldID = templateField.getID; - - return this.renderGPTTextCall(templateCopy, field, templatefieldID); - }); - - const imagePromises = this._userCreatedFields - .filter(field => field.type === TemplateFieldType.VISUAL) + .filter(field => field.type !== TemplateFieldType.UNSET) .map(field => { - const title = field.title; - const templateField = templateCopy.getFieldByTitle(title); - if (templateField === undefined) return; - const templatefieldID = templateField.getID; - - return this.renderGPTImageCall(templateCopy, field, templatefieldID); + const templateField = templateCopy.getFieldByTitle(field.title); + if (templateField !== undefined) { + return gptFunc(field.type)(templateCopy, field, templateField.getID); + } }); - await Promise.all(gptPromises); - - await Promise.all(imagePromises); - - this._DOCCC = templateCopy.mainField.renderedDoc; - return templateCopy.mainField.renderedDoc; + return Promise.all(gptPromises).then(() => (this._DOCCC = templateCopy.mainField.renderedDoc)); }; - let docs: Promise<Doc | undefined>[]; - if (this.DEBUG_MODE) { - docs = [1, 2, 3, 4].map(() => processContent({})); - } else { - docs = rowContents.map(content => processContent(content)); - } - - const renderedDocs = await Promise.all(docs); - - this._docsRendering = false; // removes loading indicator - - return renderedDocs; - }; + const rowContents = this.DEBUG_MODE + ? [{}, {}, {}, {}] + : NumListCast(dv.layoutDoc.dataViz_selectedRows).map(row => + fields.reduce( + (values, col) => { + values[col] = dv.records[row][col]; + return values; + }, + {} as { [title: string]: string } + ) + ); + return Promise.all(rowContents.map(processContent)).then( + action(renderedDocs => { + this._docsRendering = false; // removes loading indicator + return renderedDocs; + }) + ); + }); addRenderedCollectionToMainview = () => { const collection = this._renderedDocCollection; - if (!collection) return; - const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; - collection.x = this._pageX - this._menuDimensions.width; - collection.y = this._pageY - this._menuDimensions.height; - mainCollection.addDocument(collection); - this.closeMenu(); + if (collection) { + const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; + collection.x = this._pageX - this._menuDimensions.width; + collection.y = this._pageY - this._menuDimensions.height; + mainCollection?.addDocument(collection); + this.closeMenu(); + } }; @action setExpandedView = (template: Template | undefined) => { - if (template) { - this._currEditingTemplate = template; - this._expandedPreview = template.doc; //Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''}); - } else { - this._currEditingTemplate = undefined; - this._expandedPreview = undefined; - } + this._currEditingTemplate = template; + this._expandedPreview = template?.doc; //Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''}); }; get editingWindow() { @@ -1126,7 +1090,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> console.log('changed to: ', collection); }; - layoutPreviewContents = () => { + layoutPreviewContents = action(() => { return this._docsRendering ? ( <div className="docCreatorMenu-layout-preview-window-wrapper loading"> <div className="loading-spinner"> @@ -1159,7 +1123,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps> /> </div> ); - }; + }); get optionsMenuContents() { const layoutOption = (option: LayoutType, optStyle?: object, specialFunc?: () => void) => { diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts index ef6867e32..b13ec46f0 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts @@ -1,17 +1,17 @@ import { makeAutoObservable } from 'mobx'; import { Col } from './DocCreatorMenu'; -import { DynamicField } from './TemplateFieldTypes/DynamicField'; -import { TemplateField, FieldSettings } from './TemplateFieldTypes/TemplateField'; import { TemplateLayouts } from './TemplateBackend'; +import { DynamicField } from './TemplateFieldTypes/DynamicField'; +import { FieldSettings, TemplateField } from './TemplateFieldTypes/TemplateField'; export class Template { mainField: DynamicField; private settings: FieldSettings; - constructor(templateInfo: FieldSettings) { + constructor(templateInfo: FieldSettings, mainField?: DynamicField) { makeAutoObservable(this); this.settings = templateInfo; - this.mainField = this.setupMainField(templateInfo); + this.mainField = mainField ?? this.setupMainField(templateInfo); } get childFields(): TemplateField[] { @@ -34,13 +34,7 @@ export class Template { //dispose each subfields disposers, etc. }; - cloneBase = async (): Promise<Template> => { - const clone: Template = new Template(TemplateLayouts.BasicSettings); - clone.mainField = (await this.mainField.makeClone(undefined)) as unknown as DynamicField; - // clone.mainField.renderedDoc._width = this.mainField.renderedDoc._width; - // clone.mainField.renderedDoc._height = this.mainField.renderedDoc._height; - return clone; - }; + cloneBase = () => new Template(TemplateLayouts.BasicSettings, this.mainField.makeClone(undefined)); printFieldInfo = () => { this.allFields.forEach(field => { @@ -49,21 +43,13 @@ export class Template { }); }; - getRenderedDoc = () => { - return this.doc; - }; + getRenderedDoc = () => this.doc; - getFieldByID = (id: number): TemplateField => { - return this.allFields.filter(field => field.getID === id)[0]; - }; + getFieldByID = (id: number): TemplateField => this.allFields.filter(field => field.getID === id)[0]; - getFieldByTitle = (title: string) => { - return this.allFields.filter(field => field.getTitle() === title)[0]; - }; + getFieldByTitle = (title: string) => this.allFields.filter(field => field.getTitle() === title)[0]; - setupMainField = (templateInfo: FieldSettings) => { - return DynamicField.Create(templateInfo, 1); - }; + setupMainField = (templateInfo: FieldSettings) => DynamicField.Create(templateInfo, 1); get descriptionSummary(): string { let summary: string = ''; @@ -95,9 +81,7 @@ export class Template { .fill([]) .map(() => []); - this.contentFields.forEach((field, i) => { - matches[i] = field.matches(cols); - }); + this.contentFields.forEach((field, i) => (matches[i] = field.matches(cols))); return matches; }; @@ -110,13 +94,14 @@ export class Template { const mt: number[] = Array(fieldsCt).fill(-1); const augmentingPath = (v: number): boolean => { - if (used[v]) return false; - used[v] = true; - - for (const to of matches[v]) { - if (mt[to] === -1 || augmentingPath(mt[to])) { - mt[to] = v; - return true; + if (!used[v]) { + used[v] = true; + + for (const to of matches[v]) { + if (mt[to] === -1 || augmentingPath(mt[to])) { + mt[to] = v; + return true; + } } } return false; @@ -128,11 +113,9 @@ export class Template { } let count: number = 0; - for (let i = 0; i < fieldsCt; ++i) { if (mt[i] !== -1) ++count; } - return count; }; } diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts index 864d50c3a..0baf321a2 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/DynamicField.ts @@ -23,22 +23,17 @@ export class DynamicField extends TemplateField { return field; } - get getSubfields(): TemplateField[] { + get getSubfields() { return this._subfields ?? []; } - get getAllSubfields() { - return ( - this._subfields?.reduce((fields, field) => { - fields.push(field, ...((field as DynamicField).getAllSubfields ?? [])); - return fields; - }, [] as TemplateField[]) ?? [] - ); + get getAllSubfields(): TemplateField[] { + return this.getSubfields.flatMap(field => [field, ...((field as DynamicField).getAllSubfields ?? [])]); } setSubFields = (fields: TemplateField[]) => (this._subfields = fields); handleFieldUpdate = (newDocsList: Doc[]) => { - const currRenderedDocs = new Set(this._subfields?.filter(field => field.renderedDoc).map(field => field.renderedDoc!)); + const currRenderedDocs = new Set(this.getSubfields.filter(field => field.renderedDoc).map(field => field.renderedDoc!)); newDocsList.forEach(doc => !currRenderedDocs.has(doc) && this.addFieldFromDoc(doc)); currRenderedDocs.forEach(doc => { if (!newDocsList.includes(doc)) { @@ -56,12 +51,13 @@ export class DynamicField extends TemplateField { opts: {}, }; - this._subfields?.push(TemplateField.initField(settings, this._subfields?.length ?? 0, this)); + this._subfields?.push(TemplateField.initField(settings, this._subfields.length, this)); }; addField = (field: TemplateField) => { if (!this._subfields?.includes(field)) { - this._subfields?.push(field); + if (this._subfields) this._subfields?.push(field); + else this._subfields = [field]; // Doc.SetContainer(field.Document, this.Document); } }; @@ -69,15 +65,14 @@ export class DynamicField extends TemplateField { dispose = () => Object.values(this._disposers).forEach(disposer => disposer?.()); removeField = (field: TemplateField) => { - // var childDocs: Doc[] = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)]); - // this.Document[Doc.LayoutFieldKey(this.Document)] = new List<Doc>([...childDocs.splice(childDocs.indexOf(field.Document), 1)]); - this._subfields?.splice(this._subfields?.indexOf(field), 1); + // field.renderedDoc && this._renderDoc && Doc.RemoveDocFromList(this._renderDoc, undefined, field.renderedDoc); + this._subfields?.splice(this._subfields.indexOf(field), 1); (field as DynamicField).dispose?.(); }; // implement Field's abstract method for replacing a subfield with a new one exchangeFields(newField: TemplateField, oldField: TemplateField) { - this._subfields?.splice(this._subfields?.indexOf(oldField), 1, newField); + this._subfields?.splice(this._subfields.indexOf(oldField), 1, newField); } get isContentField(): boolean { @@ -93,17 +88,17 @@ export class DynamicField extends TemplateField { matches = (): Array<number> => []; - async makeClone(parent?: DynamicField): Promise<TemplateField> { - const clone = (await super.makeClone(parent)) as unknown as DynamicField; - if (this._subfields) { - clone._subfields = await Promise.all(this._subfields.map(cloneField => cloneField.makeClone(clone))); + makeClone(parent?: DynamicField) { + const dynClone = super.makeClone(parent) as DynamicField; + dynClone._subfields = this.getSubfields.map(cloneField => cloneField.makeClone(dynClone)); + if (dynClone._renderDoc) { + dynClone._renderDoc[DocData].data = new List<Doc>(dynClone.getSubfields.filter(sub => sub.renderedDoc).map(sub => sub.renderedDoc!)); } - clone._renderDoc && (clone._renderDoc[DocData].data = new List<Doc>(clone._subfields?.filter(sub => sub.renderedDoc).map(sub => sub.renderedDoc!) ?? [])); - return clone; + return dynClone; } initializeDocument = (settings: FieldSettings, subFields: TemplateField[]) => { - const renderedSubfields = subFields?.filter(field => field.renderedDoc).map(field => field.renderedDoc!) ?? []; + const renderedSubfields = subFields.filter(field => field.renderedDoc).map(field => field.renderedDoc!); settings.opts.title = settings.title; switch (settings.viewType) { case ViewType.CAROUSEL3D: return Docs.Create.Carousel3DDocument(renderedSubfields, settings.opts); @@ -112,53 +107,3 @@ export class DynamicField extends TemplateField { } // prettier-ignore }; } - -// export class DynamicField extends Field { -// protected subfields: Field[]; - -// protected Document!: Doc; - -// constructor(settings: FieldSettings, id: number, parent?: Field) { -// super(settings, id, parent); -// this.subfields = this.setupSubfields(this); -// this.initializeDocument(); -// } - -// setContent = (content: string, type: ViewType) => { return }; -// getContent = () => { return '' }; -// get isContentField(): boolean { return false }; - -// addChildToDocument = (doc: Doc) => { -// Doc.SetContainer(doc, this.Document); -// } - -// matches = (cols: Col[]): Array<number> => { -// return []; -// } - -// initializeDocument = (): Doc => { -// let doc: Doc; -// const renderedSubfields: Doc[] = this.subfields.map(field => field.renderedDoc); -// switch (this.settings.viewType) { -// case ViewType.CAROUSEL3D: -// doc = Docs.Create.Carousel3DDocument(renderedSubfields, { -// title: this.title, -// }); -// break; -// case ViewType.FREEFORM: -// doc = Docs.Create.FreeformDocument(renderedSubfields, { -// title: this.title, -// }); -// break; -// default: -// doc = Docs.Create.FreeformDocument(renderedSubfields, { -// title: this.title, -// }); -// break; -// } - -// this.Document = doc; -// return doc; -// } - -// } diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts index 318bffde5..d86254586 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateFieldTypes/TemplateField.ts @@ -55,25 +55,25 @@ export abstract class TemplateField { return this._settings?.viewType; } - setTitle = (title: string) => { - this._title = title; - this._renderDoc && (this._renderDoc.title = title); - }; - getTitle = () => this._title; - abstract get isContentField(): boolean; + + abstract getContent(): string; setContent(content: string, type?: ViewType) { this._settings && (this._settings.viewType = type ?? this._settings.viewType); } - abstract getContent(): string; + setTitle = (title: string) => { + this._title = title; + this._renderDoc && (this._renderDoc.title = title); + }; + getTitle = () => this._title; - async makeClone(parent?: TemplateField): Promise<TemplateField> { - const clone = TemplateField.initField(this._settings, this._id, parent, true); // create a value for this.Document/subfields that we want to ignore - clone._renderDoc = this._renderDoc ? (await Doc.MakeClone(this._renderDoc)).clone : undefined; - clone._title = this._title; - clone._dimensions = this._dimensions; - return clone; + makeClone(parent?: TemplateField) { + const cloned = TemplateField.initField(this._settings, this._id, parent, true); // create a value for this.Document/subfields that we want to ignore + if (this._renderDoc) Doc.MakeClone(this._renderDoc).then(({ clone }) => (cloned._renderDoc = clone)); + cloned._title = this._title; + cloned._dimensions = this._dimensions; + return cloned; } @computed get documentOptions(): DocumentOptions { @@ -97,9 +97,7 @@ export abstract class TemplateField { matches = (cols: Col[]): number[] => { const colMatchesField = (col: Col) => (this._settings?.sizes?.some(size => col.sizes?.includes(size)) && this._settings.types?.includes(col.type)) ?? false; - const matches: Array<number> = []; - cols.forEach((col, v) => colMatchesField(col) && matches.push(v)); - return matches; + return cols.filter(colMatchesField).map((col, v) => v); }; private getLocalDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentDimensions?: FieldDimensions): FieldDimensions => { |