aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx')
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx79
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',