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.tsx111
1 files changed, 76 insertions, 35 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 449d61a65..43cf57167 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -49,7 +49,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
@observable _templateDocs: Doc[] = [];
@observable _selectedTemplate: Doc | undefined = undefined;
- @observable _fields: {title: string, type: string, desc: string}[] = [];
+ @observable _columns: Col[] = [];
@observable _selectedCols: {title: string, type: string, desc: string}[] | undefined = [];
@observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns?: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0};
@@ -133,8 +133,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
return StrListCast(this._dataViz?.layoutDoc._dataViz_axes);
}
- @computed get fieldsInfos(): {title: string, type: string, desc: string}[] {
- return this.selectedFields.map(field => {return {title: field, type: this._dataViz?.getFieldType(field) ?? '', desc: this._dataViz?.getFieldDescription(field) ?? ''}}).concat(this._fields);
+ @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);
}
@computed get canMakeDocs(){
@@ -420,7 +420,42 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
// mainCollection.addDocument(doc);
//this._dataViz?.getRandomSample();
- console.log(this.maxMatches(3, Array.from([[2], [1], [2]])));
+
+ // public static FourField001: TemplateDocInfos = {
+ // title: 'fourfield1',
+ // width: 450,
+ // height: 600,
+ // fields: [{
+ // tl: [-.6, -.9],
+ // br: [.6, -.8],
+ // types: [TemplateFieldType.TEXT],
+ // sizes: [FieldSize.TINY],
+ // opts: {
+
+ // tl: [-.9, -.7],
+ // br: [.9, .2],
+ // types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+ // sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+
+ // tl: [-.6, .3],
+ // br: [.6, .4],
+ // types: [TemplateFieldType.TEXT],
+ // sizes: [FieldSize.TINY],
+ // opts: {
+
+ // tl: [-.9, .5],
+ // br: [.9, .9],
+ // types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+ // sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+ // opts: {
+
+
+ const field1: Col = {title: 'hey', type: TemplateFieldType.TEXT, size: FieldSize.HUGE, desc: ''}
+ const field2: Col = {title: 'heyo', type: TemplateFieldType.TEXT, size: FieldSize.TINY, desc: ''}
+ const field3: Col = {title: 'heya', type: TemplateFieldType.VISUAL, size: FieldSize.LARGE, desc: ''}
+ const field4: Col = {title: 'heyy', type: TemplateFieldType.TEXT, size: FieldSize.MEDIUM, desc: ''}
+
+ console.log(this.findValidTemplates([field1, field2, field3, field4], [TemplateLayouts.FourField001]));
}
get templatesPreviewContents(){
@@ -767,15 +802,15 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
}
@action addField = () => {
- const newFields: {title: string, type: string, desc: string}[] = this._fields.concat([{title: '', type: '', desc: ''}])
- this._fields = newFields;
+ const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.TEXT, desc: '', size: FieldSize.MEDIUM}])
+ this._columns = newFields;
}
@action removeField = (field: {title: string, type: string, desc: string}) => {
if (this._dataViz?.axes.includes(field.title)) {
this._dataViz.selectAxes(this._dataViz.axes.filter(col => col !== field.title));
} else {
- const toRemove = this._fields.filter(f => f === field);
+ const toRemove = this._columns.filter(f => f === field);
if (!toRemove) return;
if (toRemove.length > 1) {
@@ -784,30 +819,30 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
}
}
- if (this._fields.length === 1) {
- this._fields = []
+ if (this._columns.length === 1) {
+ this._columns = []
} else {
- console.log(this._fields)
- this._fields.splice(this._fields.indexOf(toRemove[0]), 1);
- console.log(this._fields)
+ console.log(this._columns)
+ this._columns.splice(this._columns.indexOf(toRemove[0]), 1);
+ console.log(this._columns)
}
}
}
- setFieldType = (field: {title: string, type: string, desc: string}, type: string) => {
- if (this.selectedFields.includes(field.title)) {
- this._dataViz?.setFieldType(field.title, type);
+ setFieldType = (column: Col, type: TemplateFieldType) => {
+ if (this.selectedFields.includes(column.title)) {
+ this._dataViz?.setFieldType(column.title, type);
} else {
- field.type = type;
+ column.type = type;
}
this.forceUpdate();
}
- setFieldDesc = (field: {title: string, type: string, desc: string}, desc: string) => {
- if (this.selectedFields.includes(field.title)) {
- this._dataViz?.setFieldDesc(field.title, desc);
+ setFieldDesc = (column: Col, desc: string) => {
+ if (this.selectedFields.includes(column.title)) {
+ this._dataViz?.setFieldDesc(column.title, desc);
} else {
- field.desc = desc;
+ column.desc = desc;
}
this.forceUpdate();
}
@@ -815,7 +850,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
matchesForTemplate = (template: TemplateDocInfos, cols: Col[]): number[][] => {
const colMatchesField = (col: Col, field : Field) => { return field.sizes?.includes(col.size) && field.types.includes(col.type) };
- const matches: number[][] = Array(template.fields.length);
+ const matches: number[][] = Array(template.fields.length).fill([]).map(() => []);
+ console.log(matches)
template.fields.forEach((field, i) => {
cols.forEach((col, v) => {
if (colMatchesField(col, field)) {
@@ -859,14 +895,17 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
findValidTemplates = (cols: Col[], templates: TemplateDocInfos[]) => {
- const validTemplates: TemplateDocInfos[] = [];
+ const validTemplates: string[] = [];
templates.forEach(template => {
const numFields = template.fields.length;
const matches = this.matchesForTemplate(template, cols);
+ console.log(matches)
if (this.maxMatches(numFields, matches) === numFields) {
- validTemplates.push(template);
+ validTemplates.push(template.title);
}
})
+
+ return validTemplates;
}
get dashboardContents(){
@@ -885,9 +924,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
{field.type ? null : <span className='placeholder'>Select media type</span>}
<span className='type-display'>{field.type ? field.type === 'text' ? 'Text Field' : 'File Field' : ''}</span>
<div className='bubbles'>
- <input className='bubble' type="radio" name="type" onClick={() => {this.setFieldType(field, 'text')}}/>
+ <input className='bubble' type="radio" name="type" onClick={() => {this.setFieldType(field, TemplateFieldType.TEXT)}}/>
<div className='text'>Text</div>
- <input className='bubble' type="radio" name="type" onClick={() => {this.setFieldType(field, 'visual')}}/>
+ <input className='bubble' type="radio" name="type" onClick={() => {this.setFieldType(field, TemplateFieldType.VISUAL)}}/>
<div className='text'>File</div>
</div>
</div>
@@ -1031,12 +1070,13 @@ export interface DataVizTemplateLayout {
rows: number;
}
-enum FieldType {
+export enum TemplateFieldType {
TEXT = 'text',
- VISUAL = 'visual'
+ VISUAL = 'visual',
+ UNSET = 'unset'
}
-enum FieldSize {
+export enum FieldSize {
TINY = 'tiny',
SMALL = 'small',
MEDIUM = 'medium',
@@ -1047,21 +1087,21 @@ enum FieldSize {
type Col = {
size: FieldSize;
- content: string;
desc: string;
title: string;
- type: FieldType;
+ type: TemplateFieldType;
}
type Field = {
tl: [number, number],
br: [number, number],
- types: FieldType[],
+ types: TemplateFieldType[],
sizes?: FieldSize[],
opts: FieldOpts;
};
export interface TemplateDocInfos {
+ title: string;
height: number;
width: number;
fields: Field[];
@@ -1144,12 +1184,13 @@ export class FieldFuncs {
export class TemplateLayouts {
public static FourField001: TemplateDocInfos = {
+ title: 'fourfield1',
width: 450,
height: 600,
fields: [{
tl: [-.6, -.9],
br: [.6, -.8],
- types: [FieldType.TEXT],
+ types: [TemplateFieldType.TEXT],
sizes: [FieldSize.TINY],
opts: {
@@ -1157,7 +1198,7 @@ export class TemplateLayouts {
}, {
tl: [-.9, -.7],
br: [.9, .2],
- types: [FieldType.TEXT, FieldType.VISUAL],
+ types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
opts: {
@@ -1165,7 +1206,7 @@ export class TemplateLayouts {
}, {
tl: [-.6, .3],
br: [.6, .4],
- types: [FieldType.TEXT],
+ types: [TemplateFieldType.TEXT],
sizes: [FieldSize.TINY],
opts: {
@@ -1173,7 +1214,7 @@ export class TemplateLayouts {
}, {
tl: [-.9, .5],
br: [.9, .9],
- types: [FieldType.TEXT, FieldType.VISUAL],
+ types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
opts: {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 11:35:27 +0000