algorithm for matching templates working

2 files changed, 81 insertions, 40 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index cef7f62b1..8e9680e38 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 } from './DocCreatorMenu';
+import { DataVizTemplateInfo, DataVizTemplateLayout, DocCreatorMenu, LayoutType, TemplateFieldType } from './DocCreatorMenu';
 import { CollectionFreeFormView, MarqueeView } from '../../collections/collectionFreeForm';
 import { PrefetchProxy } from '../../../../fields/Proxy';
 import { AclAdmin, AclAugment, AclEdit } from '../../../../fields/DocSymbols';
@@ -65,7 +65,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable _specialHighlightedRow: number | undefined = undefined;
     @observable GPTSummary: ObservableMap<string, string> | undefined = undefined;
     @observable colDescriptions: ObservableMap<string, string> = new ObservableMap();
-    @observable fieldTypes: ObservableMap<string, string> = new ObservableMap();
+    @observable fieldTypes: ObservableMap<string, TemplateFieldType> = new ObservableMap();
     @observable _GPTLoading: boolean = false;
 
     constructor(props: FieldViewProps) {
@@ -147,7 +147,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._specialHighlightedRow = row;
     }
 
-    @action setFieldType = (field: string, type: string) => {
+    @action setFieldType = (field: string, type: TemplateFieldType) => {
         this.fieldTypes?.set(field, type);
     }
 
@@ -159,8 +159,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     }
 
-    getFieldType = (field: string): string => {
-        return this.fieldTypes?.get(field) ?? '';
+    getFieldType = (field: string): TemplateFieldType => {
+        return this.fieldTypes?.get(field) ?? TemplateFieldType.UNSET;
     }
 
     getFieldDescription = (field: string): string => {
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: {