aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/nodes/DataVizBox/DataVizBox.tsx59
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx79
2 files changed, 86 insertions, 52 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 82df141fa..c72aa1711 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -33,7 +33,7 @@ import { LineChart } from './components/LineChart';
import { PieChart } from './components/PieChart';
import { TableBox } from './components/TableBox';
import { LinkManager } from '../../../util/LinkManager';
-import { DataVizTemplateInfo, DataVizTemplateLayout, DocCreatorMenu, LayoutType, TemplateFieldType } from './DocCreatorMenu';
+import { Col, DataVizTemplateInfo, DataVizTemplateLayout, DocCreatorMenu, TemplateFieldSize, LayoutType, TemplateFieldType } from './DocCreatorMenu';
import { CollectionFreeFormView, MarqueeView } from '../../collections/collectionFreeForm';
import { PrefetchProxy } from '../../../../fields/Proxy';
import { AclAdmin, AclAugment, AclEdit } from '../../../../fields/DocSymbols';
@@ -43,6 +43,7 @@ import { listSpec } from '../../../../fields/Schema';
import { ObjectField } from '../../../../fields/ObjectField';
import { Id } from '../../../../fields/FieldSymbols';
import { GPTCallType, gptAPICall } from '../../../apis/gpt/GPT';
+import { TbSortDescendingShapes } from 'react-icons/tb';
export enum DataVizView {
TABLE = 'table',
@@ -64,9 +65,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@observable _marqueeing: number[] | undefined = undefined;
@observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
@observable _specialHighlightedRow: number | undefined = undefined;
- @observable GPTSummary: ObservableMap<string, string> | undefined = undefined;
- @observable colDescriptions: ObservableMap<string, string> = new ObservableMap();
- @observable fieldTypes: ObservableMap<string, TemplateFieldType> = new ObservableMap();
+ @observable GPTSummary: ObservableMap<string, {desc?: string, type?: TemplateFieldType, size?: TemplateFieldSize}> | undefined = undefined;
+ @observable colsInfo: ObservableMap<string, Col> = new ObservableMap();
@observable _GPTLoading: boolean = false;
constructor(props: FieldViewProps) {
@@ -155,24 +155,26 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
this._specialHighlightedRow = row;
}
- @action setFieldType = (field: string, type: TemplateFieldType) => {
- this.fieldTypes?.set(field, type);
+ @action setColumnType = (field: string, type: TemplateFieldType) => {
+ const colInfo = this.colsInfo.get(field);
+ if (colInfo) { colInfo.type = type };
}
- @action setFieldDesc = (field: string, desc: string) => {
- if (!desc) {
- this.colDescriptions.set(field, this.GPTSummary?.get(field) ?? '');
- } else {
- this.colDescriptions.set(field, desc);
- }
+ @action setColumnSize = (field: string, size: TemplateFieldSize) => {
+ const colInfo = this.colsInfo.get(field);
+ if (colInfo) { colInfo.size = size };
}
- getFieldType = (field: string): TemplateFieldType => {
- return this.fieldTypes?.get(field) ?? TemplateFieldType.UNSET;
+ @action setColumnDesc = (field: string, desc: string) => {
+ const colInfo = this.colsInfo.get(field);
+ if (colInfo) {
+ if (!desc) { colInfo.desc = this.GPTSummary?.get(field)?.desc ?? ''; }
+ else { colInfo.desc = desc; }
+ }
}
- getFieldDescription = (field: string): string => {
- return this.colDescriptions?.get(field) ?? '';
+ @computed get colInfo(){
+ return this.colsInfo;
}
@action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
@@ -549,8 +551,29 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
this.GPTSummary = new ObservableMap();
const descs: {[col: string]: string} = JSON.parse(res);
for (const [key, val] of Object.entries(descs)) {
- this.GPTSummary.set(key, val);
- if (!this.colDescriptions.get(key)) this.colDescriptions.set(key, val);
+ this.GPTSummary.set(key, {desc: val});
+ if (!this.colsInfo.get(key)?.desc) this.setColumnDesc(key, val);
+ }
+ }
+ } catch (err) {
+ console.error(err);
+ }
+
+ try {
+ const res = await gptAPICall('Info:' + prompt, GPTCallType.VIZSUM2);
+
+ if (res) {
+ !this.GPTSummary && (this.GPTSummary = new ObservableMap());
+ const info: {[col: string]: {type: TemplateFieldType, size: TemplateFieldSize}} = JSON.parse(res);
+ console.log(info)
+ for (const [key, val] of Object.entries(info)) {
+ const colSummary = this.GPTSummary.get(key);
+ if (colSummary) {
+ colSummary.size = val.size;
+ colSummary.type = val.type;
+ this.setColumnType(key, val.type);
+ this.setColumnSize(key, val.size);
+ }
}
}
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',
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-13 22:58:57 +0000