diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx')
-rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 79 |
1 files changed, 45 insertions, 34 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index fc29531d1..fd5e58ae9 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -136,7 +136,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { } @computed get fieldsInfos(): Col[] { - return this.selectedFields.map(field => {return {title: field, type: this._dataViz?.getFieldType(field) ?? TemplateFieldType.UNSET, desc: this._dataViz?.getFieldDescription(field) ?? '', size: FieldSize.MEDIUM}}).concat(this._columns); + const colInfo = this._dataViz?.colInfo; + return this.selectedFields.map(field => {return {title: field, type: colInfo?.get(field)?.type ?? TemplateFieldType.UNSET, desc: colInfo?.get(field)?.desc ?? '', size: colInfo?.get(field)?.size ?? TemplateFieldSize.MEDIUM}}).concat(this._columns); } @computed get canMakeDocs(){ @@ -419,10 +420,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { const temp = TemplateLayouts.FourField001; - const img: Col = {type: TemplateFieldType.VISUAL, title: 'Image', desc: 'description whpoo', size: FieldSize.LARGE}; - const capt1: Col = {type: TemplateFieldType.TEXT, title: 'Type', desc: 'description hey', size: FieldSize.TINY}; - const capt2: Col = {type: TemplateFieldType.TEXT, title: 'Locality', desc: '', size: FieldSize.TINY}; - const desc: Col = {type: TemplateFieldType.TEXT, title: 'Description', desc: '', size: FieldSize.LARGE}; + const img: Col = {type: TemplateFieldType.VISUAL, title: 'Image', desc: 'description whpoo', size: TemplateFieldSize.LARGE}; + const capt1: Col = {type: TemplateFieldType.TEXT, title: 'Type', desc: 'description hey', size: TemplateFieldSize.TINY}; + const capt2: Col = {type: TemplateFieldType.TEXT, title: 'Locality', desc: '', size: TemplateFieldSize.TINY}; + const desc: Col = {type: TemplateFieldType.TEXT, title: 'Description', desc: '', size: TemplateFieldSize.LARGE}; // const assignments = {'0': img, '1': capt1, '2': capt2, '3': desc} @@ -432,7 +433,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { }; @action addField = () => { - const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.UNSET, desc: '', size: FieldSize.MEDIUM}]) + const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.UNSET, desc: '', size: TemplateFieldSize.MEDIUM}]) this._columns = newFields; }; @@ -459,16 +460,25 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { setFieldType = (column: Col, type: TemplateFieldType) => { if (this.selectedFields.includes(column.title)) { - this._dataViz?.setFieldType(column.title, type); + this._dataViz?.setColumnType(column.title, type); } else { column.type = type; } this.forceUpdate(); }; + setFieldSize = (column: Col, size: TemplateFieldSize) => { + if (this.selectedFields.includes(column.title)) { + this._dataViz?.setColumnSize(column.title, size); + } else { + column.size = size; + } + this.forceUpdate(); + }; + setFieldDesc = (column: Col, desc: string) => { if (this.selectedFields.includes(column.title)) { - this._dataViz?.setFieldDesc(column.title, desc); + this._dataViz?.setColumnDesc(column.title, desc); } else { column.desc = desc; } @@ -1045,9 +1055,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> { <div className='text'>File</div> </div> </div> - <input className='field-property-container' id={`${Math.random() * 100}`} placeholder={'Choose size'} style={{width: field.title === '' ? '30%' : ''}}/> + <input className='field-property-container' id={`${Math.random() * 100}`} placeholder={this._dataViz?.GPTSummary?.get(field.title)?.size} style={{width: field.title === '' ? '30%' : ''}}/> </div> - <textarea className='field-description-container' onChange={(e) => this._dataViz?.setFieldDesc(field.title, e.target.value)} defaultValue={field.desc === this._dataViz?.GPTSummary?.get(field.title) ? '' : field.desc } placeholder={this._dataViz?.GPTSummary?.get(field.title) ?? 'Add a description to help with template generation.'} /> + <textarea className='field-description-container' onChange={(e) => this._dataViz?.setColumnDesc(field.title, e.target.value)} defaultValue={field.desc === this._dataViz?.GPTSummary?.get(field.title)?.desc ? '' : field.desc } placeholder={this._dataViz?.GPTSummary?.get(field.title)?.desc ?? 'Add a description to help with template generation.'} /> <div> <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}> <FontAwesomeIcon icon='trash'/> @@ -1189,7 +1199,7 @@ export enum TemplateFieldType { UNSET = 'unset' } -export enum FieldSize { +export enum TemplateFieldSize { TINY = 'tiny', SMALL = 'small', MEDIUM = 'medium', @@ -1198,8 +1208,8 @@ export enum FieldSize { } -type Col = { - size: FieldSize; +export type Col = { + size: TemplateFieldSize; desc: string; title: string; type: TemplateFieldType; @@ -1209,7 +1219,7 @@ type Field = { tl: [number, number], br: [number, number], types?: TemplateFieldType[], - sizes?: FieldSize[], + sizes?: TemplateFieldSize[], description?: string; opts: FieldOpts; subfields?: ['freeform' | 'stacking' | 'carousel', Field[]]; @@ -1419,21 +1429,21 @@ export class TemplateLayouts { borderWidth: '12', }, fields: [{ - tl: [-.85, -1], - br: [.85, -.85], + tl: [-.95, -1], + br: [.95, -.85], types: [TemplateFieldType.TEXT], - sizes: [FieldSize.TINY], + sizes: [TemplateFieldSize.TINY], description: 'A title field for very short text that contextualizes the content.', opts: { backgroundColor: 'transparent', - color: '#2DBEAD', + color: '#F1F0E9', contentXCentering: 'h-center', } }, { tl: [-.87, -.83], br: [.87, .2], types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL], - sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], description: 'The main focus of the template; could be an image, long text, etc.', opts: { cornerRounding: 20, @@ -1445,17 +1455,18 @@ export class TemplateLayouts { tl: [-.8, .2], br: [.8, .35], types: [TemplateFieldType.TEXT], - sizes: [FieldSize.TINY, FieldSize.SMALL], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], description: 'A caption for field #2, very short to short text that contextualizes the content of field #2', opts: { backgroundColor: 'transparent', - contentXCentering: 'h-center' + contentXCentering: 'h-center', + color: '#F1F0E9', } }, { tl: [-.87, .37], br: [.87, .96], types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL], - sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], description: 'A medium-sized field for medium/long text or a secondary image that complements the main focus.', opts: { cornerRounding: 15, @@ -1478,7 +1489,7 @@ export class TemplateLayouts { tl: [-.83, -.95], br: [.83, -.2], types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT], - sizes: [FieldSize.MEDIUM, FieldSize.LARGE], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE], description: '', opts: { borderWidth: '8', @@ -1488,7 +1499,7 @@ export class TemplateLayouts { tl: [-.45, -.18], br: [.45, 0], types: [TemplateFieldType.TEXT], - sizes: [FieldSize.TINY, FieldSize.SMALL], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], description: '', opts: { backgroundColor: 'transparent', @@ -1499,7 +1510,7 @@ export class TemplateLayouts { tl: [-.45, 0], br: [.45, .18], types: [TemplateFieldType.TEXT], - sizes: [FieldSize.TINY, FieldSize.SMALL], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], description: '', opts: { backgroundColor: 'transparent', @@ -1510,7 +1521,7 @@ export class TemplateLayouts { tl: [-.83, .2], br: [.83, .95], types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL], - sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], description: '', opts: { borderWidth: '8', @@ -1569,7 +1580,7 @@ export class TemplateLayouts { tl: [-.875, -.9], br: [.875, .7], types: [TemplateFieldType.VISUAL], - sizes: [FieldSize.LARGE, FieldSize.HUGE], + sizes: [TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], description: '', opts: { borderWidth: '15', @@ -1579,7 +1590,7 @@ export class TemplateLayouts { tl: [-.95, .8], br: [-.1, .95], types: [TemplateFieldType.TEXT], - sizes: [FieldSize.TINY, FieldSize.SMALL], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], description: '', opts: { backgroundColor: 'transparent', @@ -1590,7 +1601,7 @@ export class TemplateLayouts { tl: [.1, .8], br: [.95, .95], types: [TemplateFieldType.TEXT], - sizes: [FieldSize.TINY, FieldSize.SMALL], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], description: '', opts: { backgroundColor: 'transparent', @@ -1601,7 +1612,7 @@ export class TemplateLayouts { tl: [0, -.9], br: [.85, -.66], types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL], - sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], description: '', opts: { backgroundColor: 'transparent', @@ -1628,7 +1639,7 @@ export class TemplateLayouts { tl: [-.66, -.747], br: [.66, .247], types: [TemplateFieldType.VISUAL], - sizes: [FieldSize.LARGE, FieldSize.HUGE], + sizes: [TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], description: '', opts: { borderColor: 'yellow', @@ -1641,7 +1652,7 @@ export class TemplateLayouts { tl: [-2, -2], br: [2, 2], types: [TemplateFieldType.VISUAL], - sizes: [FieldSize.LARGE, FieldSize.HUGE], + sizes: [TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], opts: { rotation: 315, } @@ -1651,7 +1662,7 @@ export class TemplateLayouts { tl: [-.7, .2], br: [.7, .46], types: [TemplateFieldType.TEXT], - sizes: [FieldSize.TINY, FieldSize.SMALL], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], description: '', opts: { backgroundColor: 'transparent', @@ -1661,7 +1672,7 @@ export class TemplateLayouts { tl: [-.95, .5], br: [.95, .95], types: [TemplateFieldType.TEXT], - sizes: [FieldSize.MEDIUM, FieldSize.LARGE], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE], description: '', opts: { backgroundColor: 'transparent', |