From 2e27b90ded41146b249649b0b0c3267b46c68363 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 7 May 2024 04:51:15 -0400
Subject: dynamic dragged column index alignment; started filtered menukeys

---
 .../collectionSchema/CollectionSchemaView.tsx        | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index b684b65e5..27e1eabcf 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -393,6 +393,9 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     findColDropIndex = (mouseX: number) => {
+        let leftOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0,0)[0]
+        console.log(leftOffset)
+        console.log(CollectionSchemaView._rowMenuWidth)
         let index: number | undefined;
         this.displayColumnWidths.reduce((total, curr, i) => {
             if (total <= mouseX && total + curr >= mouseX) {
@@ -400,7 +403,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                 else index = i + 1;
             }
             return total + curr;
-        }, 2 * CollectionSchemaView._rowMenuWidth); //probably prone to issues; find better implementation (!!!)
+        }, leftOffset + CollectionSchemaView._rowMenuWidth); //probably prone to issues; find better implementation (!!!)
         return index;
     };
 
@@ -587,6 +590,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             this.clearSelection();
             draggedDocs.forEach(doc => {
                 DocumentView.addViewRenderedCb(doc, dv => dv.select(true));
+                console.log(doc.x);
             });
             this._lowestSelectedIndex = Math.min(...draggedDocs?.map(doc => this.rowIndex(doc)));
             return true;
@@ -740,6 +744,19 @@ export class CollectionSchemaView extends CollectionSubView() {
         return true;
     };
 
+    @computed
+    get activeMenuKeys() {
+        let activeKeys = this.documentKeys.filter(key => this.childDocsInclude(key));
+        return activeKeys
+    }
+    
+    childDocsInclude = (key: string) => {
+        this.childDocs.forEach(doc => {
+            //TODO: if childdoc fieldkeys contain the key, return true
+        })
+        return false
+    }
+
     @action
     openColumnMenu = (index: number, newCol: boolean) => {
         this._makeNewColumn = false;
@@ -937,6 +954,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         return (
             <div className="schema-column-menu" style={{ left: 0, minWidth: CollectionSchemaView._minColWidth }}>
                 <input className="schema-key-search-input" type="text" onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} />
+                <button className="schema-column-menu-toggle" onClick={() => null}></button> 
                 {this._makeNewField ? this.newFieldMenu : this.keysDropdown}
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From 5cb549b88836f6674c7d346c75a679a73672e1fa Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 7 May 2024 18:27:21 -0400
Subject: key filtering for colkeymenu working (still need to implement UI)

---
 .../collectionSchema/CollectionSchemaView.tsx         | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 27e1eabcf..4490b8dec 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -32,6 +32,7 @@ import { CollectionSubView } from '../CollectionSubView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
+import { ActionButton } from '@adobe/react-spectrum';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -393,9 +394,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     findColDropIndex = (mouseX: number) => {
-        let leftOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0,0)[0]
-        console.log(leftOffset)
-        console.log(CollectionSchemaView._rowMenuWidth)
+        let xOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0,0)[0] + CollectionSchemaView._rowMenuWidth;
         let index: number | undefined;
         this.displayColumnWidths.reduce((total, curr, i) => {
             if (total <= mouseX && total + curr >= mouseX) {
@@ -403,7 +402,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                 else index = i + 1;
             }
             return total + curr;
-        }, leftOffset + CollectionSchemaView._rowMenuWidth); //probably prone to issues; find better implementation (!!!)
+        }, xOffset);
         return index;
     };
 
@@ -744,17 +743,15 @@ export class CollectionSchemaView extends CollectionSubView() {
         return true;
     };
 
-    @computed
-    get activeMenuKeys() {
+    activeMenuKeys = () => {
         let activeKeys = this.documentKeys.filter(key => this.childDocsInclude(key));
         return activeKeys
     }
     
     childDocsInclude = (key: string) => {
-        this.childDocs.forEach(doc => {
-            //TODO: if childdoc fieldkeys contain the key, return true
-        })
-        return false
+        let keyExists: boolean = false;
+        this.childDocs.forEach(doc => {if (Object.keys(doc).includes(key)) keyExists = true;})
+        return keyExists
     }
 
     @action
@@ -954,7 +951,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         return (
             <div className="schema-column-menu" style={{ left: 0, minWidth: CollectionSchemaView._minColWidth }}>
                 <input className="schema-key-search-input" type="text" onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} />
-                <button className="schema-column-menu-toggle" onClick={() => null}></button> 
+                <button className="schema-column-menu-toggle" onClick={() => this._menuKeys = this.activeMenuKeys()}></button> 
                 {this._makeNewField ? this.newFieldMenu : this.keysDropdown}
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From 921c3b95b22d5e4125435abb45cd322fc170ccb3 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 8 May 2024 02:43:52 -0400
Subject: code written for parser (completely untested fingers crossed???)

---
 .../collectionSchema/CollectionSchemaView.tsx      | 63 +++++++++++++++++-----
 1 file changed, 49 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 4490b8dec..647986568 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-restricted-syntax */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Popup, PopupTrigger, Type } from 'browndash-components';
-import { ObservableMap, action, computed, makeObservable, observable, observe } from 'mobx';
+import { ObservableMap, action, autorun, computed, makeObservable, observable, observe } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils';
@@ -85,10 +85,11 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _selectedCol: number = 0;
     @observable _selectedCells: Array<Doc> = [];
     @observable _mouseCoordinates = { x: 0, y: 0 };
-    @observable _lowestSelectedIndex = -1; //lowest index among selected rows; used to properly sync dragged docs with cursor position
-    @observable _relCursorIndex = -1; //cursor index relative to the current selected cells
-    @observable _draggedColIndex = 0;
-    @observable _colBeingDragged = false;
+    @observable _lowestSelectedIndex: number = -1; //lowest index among selected rows; used to properly sync dragged docs with cursor position
+    @observable _relCursorIndex: number = -1; //cursor index relative to the current selected cells
+    @observable _draggedColIndex: number = 0;
+    @observable _colBeingDragged: boolean = false;
+    @observable _colKeysFiltered: boolean = false;
 
     // target HTMLelement portal for showing a popup menu to edit cell values.
     public get MenuTarget() {
@@ -282,7 +283,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @undoBatch
     changeColumnKey = (index: number, newKey: string, defaultVal?: any) => {
         if (!this.documentKeys.includes(newKey)) {
-            this.addNewKey(newKey, defaultVal);
+            this.addNewKey(newKey, defaultVal, false);
         }
 
         const currKeys = [...this.columnKeys];
@@ -293,7 +294,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @undoBatch
     addColumn = (key: string, defaultVal?: any) => {
         if (!this.documentKeys.includes(key)) {
-            this.addNewKey(key, defaultVal);
+            this.addNewKey(key, defaultVal, false);
         }
 
         const newColWidth = this.tableWidth / (this.storedColumnWidths.length + 1);
@@ -308,10 +309,37 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    addNewKey = (key: string, defaultVal: any) =>
-        this.childDocs.forEach(doc => {
-            doc[DocData][key] = defaultVal;
+    addNewKey = (key: string, defaultVal: any, isEquation: boolean) => {
+        if (isEquation) {
+            this.childDocs.forEach(doc => {
+                const eq = this.parseEquation(key);
+                doc[DocData][key] = this.parsedEquationResult(eq);
+                this.setupAutoUpdate(eq, doc);
+            });
+        } else {
+            this.childDocs.forEach(doc => {
+                doc[DocData][key] = defaultVal;
+            });
+        }
+    }
+
+    @action
+    setupAutoUpdate = (equation: string, doc: Doc) => {
+        return autorun(() => {
+            const result = this.parsedEquationResult(equation);
+            doc[DocData][equation] = result;
         });
+    }
+
+    parseEquation = (eq: string): string => {
+        const variablePattern = /[a-z]+/gi;
+        return eq.replace(variablePattern, (match) => `doc[DocData]['${match}']`);
+    }
+
+    parsedEquationResult = (eq: string): number => {
+        const result = new Function('return ' + eq).call(this);
+        return result;
+    }
 
     @undoBatch
     removeColumn = (index: number) => {
@@ -743,9 +771,15 @@ export class CollectionSchemaView extends CollectionSubView() {
         return true;
     };
 
-    activeMenuKeys = () => {
-        let activeKeys = this.documentKeys.filter(key => this.childDocsInclude(key));
-        return activeKeys
+    @action
+    toggleMenuKeyFilter = () => {
+        if (!this._colKeysFiltered){
+            this._colKeysFiltered = true;
+            this._menuKeys = this.documentKeys.filter(key => this.childDocsInclude(key));
+        } else {
+            this._colKeysFiltered = false;
+            this._menuKeys = this.documentKeys;
+        }
     }
     
     childDocsInclude = (key: string) => {
@@ -947,11 +981,12 @@ export class CollectionSchemaView extends CollectionSubView() {
             </div>
         );
     }
+
     get renderKeysMenu() {
         return (
             <div className="schema-column-menu" style={{ left: 0, minWidth: CollectionSchemaView._minColWidth }}>
                 <input className="schema-key-search-input" type="text" onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} />
-                <button className="schema-column-menu-toggle" onClick={() => this._menuKeys = this.activeMenuKeys()}></button> 
+                <button className="schema-column-menu-button" onClick={() => this.toggleMenuKeyFilter()}>{this._colKeysFiltered ? "All keys" : "Active keys only"}</button> 
                 {this._makeNewField ? this.newFieldMenu : this.keysDropdown}
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From 920b4ec7a51e88769940b619c1b90b230b353ccb Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 8 May 2024 04:14:00 -0400
Subject: equation parser working in dash; need to fix auto-updating

---
 .../collectionSchema/CollectionSchemaView.tsx      | 50 ++++++++++++++++------
 src/fields/SchemaHeaderField.ts                    |  1 +
 2 files changed, 39 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index de38d0c56..d84dd33ff 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -273,7 +273,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @undoBatch
     changeColumnKey = (index: number, newKey: string, defaultVal?: any) => {
         if (!this.documentKeys.includes(newKey)) {
-            this.addNewKey(newKey, defaultVal, false);
+            this.addNewKey(newKey, defaultVal);
         }
 
         const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it.
@@ -284,7 +284,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @undoBatch
     addColumn = (key: string, defaultVal?: any) => {
         if (!this.documentKeys.includes(key)) {
-            this.addNewKey(key, defaultVal, false);
+            this.addNewKey(key, defaultVal);
         }
 
         const newColWidth = this.tableWidth / (this.storedColumnWidths.length + 1);
@@ -299,11 +299,11 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    addNewKey = (key: string, defaultVal: any, isEquation: boolean) => {
-        if (isEquation) {
+    addNewKey = (key: string, defaultVal: any) => {
+        if (this._newFieldType == ColumnType.Equation) {
             this.childDocs.forEach(doc => {
-                const eq = this.parseEquation(key);
-                doc[DocData][key] = this.parsedEquationResult(eq);
+                const eq = this.parseEquation(defaultVal, doc);
+                doc[DocData][key] = this.parsedEquationResult(eq, doc);
                 this.setupAutoUpdate(eq, doc);
             });
         } else {
@@ -316,19 +316,19 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     setupAutoUpdate = (equation: string, doc: Doc) => {
         return autorun(() => {
-            const result = this.parsedEquationResult(equation);
+            const result = this.parsedEquationResult(equation, doc);
             doc[DocData][equation] = result;
         });
     }
 
-    parseEquation = (eq: string): string => {
+    parseEquation = (eq: string, doc: Doc): string => {
         const variablePattern = /[a-z]+/gi;
-        return eq.replace(variablePattern, (match) => `doc[DocData]['${match}']`);
+        return eq.replace(variablePattern, (match) => `doc.${match}`);
     }
 
-    parsedEquationResult = (eq: string): number => {
-        const result = new Function('return ' + eq).call(this);
-        return result;
+    parsedEquationResult = (eq: string, doc: any): number => {
+        const func = new Function('doc', 'return ' + eq);
+        return func(doc);
     }
 
     @undoBatch
@@ -691,6 +691,19 @@ export class CollectionSchemaView extends CollectionSubView() {
                         })}
                     />
                 );
+            case ColumnType.Equation:
+                return (
+                    <input
+                        type="text"
+                        name=""
+                        id=""
+                        value={this._newFieldDefault ?? ''}
+                        onPointerDown={e => e.stopPropagation()}
+                        onChange={action((e: any) => {
+                            this._newFieldDefault = e.target.value;
+                        })}
+                    />
+                );
             default:
                 return undefined;
         }
@@ -714,6 +727,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     setKey = (key: string, defaultVal?: any) => {
+        console.log("called")
         if (this._makeNewColumn) {
             this.addColumn(key, defaultVal);
         } else {
@@ -881,6 +895,18 @@ export class CollectionSchemaView extends CollectionSubView() {
                     />
                     string
                 </div>
+                <div className="schema-key-type-option">
+                    <input
+                        type="radio"
+                        name="newFieldType"
+                        checked={this._newFieldType === ColumnType.Equation}
+                        onChange={action(() => {
+                            this._newFieldType = ColumnType.Equation;
+                            this._newFieldDefault = '';
+                        })}
+                    />
+                    equation
+                </div>
                 <div className="schema-key-default-val">value: {this.fieldDefaultInput}</div>
                 <div className="schema-key-warning">{this._newFieldWarning}</div>
                 <div
diff --git a/src/fields/SchemaHeaderField.ts b/src/fields/SchemaHeaderField.ts
index 0a8dd1d9e..6fa94204a 100644
--- a/src/fields/SchemaHeaderField.ts
+++ b/src/fields/SchemaHeaderField.ts
@@ -12,6 +12,7 @@ export enum ColumnType {
     Image,
     RTF,
     Enumeration,
+    Equation,
     Any,
 }
 
-- 
cgit v1.2.3-70-g09d2


From 2e7d3ec952ec88a928f22b8d7a708cc807d9ecdd Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 8 May 2024 04:14:49 -0400
Subject: c

---
 .../views/collections/collectionSchema/CollectionSchemaView.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index d84dd33ff..db7bf8c43 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -302,7 +302,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     addNewKey = (key: string, defaultVal: any) => {
         if (this._newFieldType == ColumnType.Equation) {
             this.childDocs.forEach(doc => {
-                const eq = this.parseEquation(defaultVal, doc);
+                const eq = this.parseEquation(defaultVal);
                 doc[DocData][key] = this.parsedEquationResult(eq, doc);
                 this.setupAutoUpdate(eq, doc);
             });
@@ -321,7 +321,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         });
     }
 
-    parseEquation = (eq: string, doc: Doc): string => {
+    parseEquation = (eq: string): string => {
         const variablePattern = /[a-z]+/gi;
         return eq.replace(variablePattern, (match) => `doc.${match}`);
     }
-- 
cgit v1.2.3-70-g09d2


From 0766ba00727e9e13ced2e16cfb049d49711fa738 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 8 May 2024 23:50:29 -0400
Subject: schema cell tag functions written

---
 .../collectionSchema/CollectionSchemaView.tsx      | 59 ++++++++++++++++++++--
 .../collectionSchema/SchemaTableCell.tsx           | 20 +++++---
 2 files changed, 67 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index db7bf8c43..f7a553da3 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -89,6 +89,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _draggedColIndex: number = 0;
     @observable _colBeingDragged: boolean = false;
     @observable _colKeysFiltered: boolean = false;
+    @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>();
 
     // target HTMLelement portal for showing a popup menu to edit cell values.
     public get MenuTarget() {
@@ -302,9 +303,11 @@ export class CollectionSchemaView extends CollectionSubView() {
     addNewKey = (key: string, defaultVal: any) => {
         if (this._newFieldType == ColumnType.Equation) {
             this.childDocs.forEach(doc => {
-                const eq = this.parseEquation(defaultVal);
-                doc[DocData][key] = this.parsedEquationResult(eq, doc);
-                this.setupAutoUpdate(eq, doc);
+                const parsedEquation = this.parseEquation(defaultVal);
+                const val = computed(() => { return this.parsedEquationResult(parsedEquation, doc);})
+                doc[DocData][key] = val.get();
+                // doc[DocData][key] = this.parsedEquationResult(eq, doc);
+                // this.setupAutoUpdate(eq, doc);
             });
         } else {
             this.childDocs.forEach(doc => {
@@ -542,11 +545,55 @@ export class CollectionSchemaView extends CollectionSubView() {
         } else this.addDocToSelection(doc, false);
         this._selectedCol = col;
 
+
         if (this._lowestSelectedIndex === -1 || index < this._lowestSelectedIndex) this._lowestSelectedIndex = index;
 
         // let selectedIndexes: Array<Number> = this._selectedCells.map(doc => this.rowIndex(doc));
     };
 
+    getCellTag = (doc: Doc, col: number) => {
+        return this._cellTags.get(doc)[col];
+    }
+
+    populateCellTags = () => {
+        this.childDocs.forEach(doc => this.addTags(doc));
+    }
+
+    addTags = (doc: Doc) => {
+        const row = this.rowIndex(doc) + 1;
+        const tags = [];
+        for (let col = 1; col <= this._colEles.length; ++col){
+            tags.push(this.numToChar(col) + row.toString())
+            }
+        this._cellTags.set(doc, tags)
+    }
+
+    modifyCellTags = (addingColumn: boolean) => {
+        if (addingColumn) {
+            const colTag = this.numToChar(this._colEles.length);
+            this._cellTags.forEach((tags, row) => {
+                const newTag = colTag + this.rowIndex(row);
+                tags.push(newTag);
+            });
+        } else {
+            this._cellTags.forEach(tags => {
+                if (tags.length > 0) {
+                    tags.pop(); 
+                }
+            })
+        }
+    }
+
+    numToChar = (num: number) => {  
+        let result = '';
+        while (num > 0) {
+            let remainder = (num - 1) % 26;
+            result = String.fromCharCode(65 + remainder) + result;
+            num = Math.floor((num - 1) / 26);
+        }
+        return result;
+    }
+
     @action
     deselectCell = (doc: Doc) => {
         this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc));
@@ -936,6 +983,11 @@ export class CollectionSchemaView extends CollectionSubView() {
     @computed get keysDropdown() {
         return (
             <div className="schema-key-search">
+                <button 
+                    className="schema-column-menu-button" 
+                    onClick={() => this.toggleMenuKeyFilter()}>
+                        {this._colKeysFiltered ? "All keys" : "Active keys only"}
+                </button> 
                 <div
                     className="schema-column-menu-button"
                     onPointerDown={action((e: any) => {
@@ -989,7 +1041,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         return (
             <div className="schema-column-menu" style={{ left: 0, minWidth: CollectionSchemaView._minColWidth }}>
                 <input className="schema-key-search-input" type="text" onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} />
-                <button className="schema-column-menu-button" onClick={() => this.toggleMenuKeyFilter()}>{this._colKeysFiltered ? "All keys" : "Active keys only"}</button> 
                 {this._makeNewField ? this.newFieldMenu : this.keysDropdown}
             </div>
         );
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index b017eb62b..8192c5e2a 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -184,20 +184,24 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         }
     }
 
+    select = (shift: boolean, ctrl: boolean, e: React.MouseEvent<HTMLDivElement>) => {
+        if (this._props.isRowActive?.() !== false) {
+            if (this.selected && ctrl) {
+                this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
+                e.stopPropagation();
+            } else !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
+        }
+    }
+
     render() {
         return (
             <div
                 className="schema-table-cell"
                 onContextMenu={e => StopEvent(e)}
                 onPointerDown={action(e => {
-                    const shift: boolean = e.shiftKey;
-                    const ctrl: boolean = e.ctrlKey;
-                    if (this._props.isRowActive?.() !== false) {
-                        if (this.selected && ctrl) {
-                            this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
-                            e.stopPropagation();
-                        } else !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
-                    }
+
+                        this.select(e.shiftKey, e.ctrlKey, e);
+
                 })}
                 style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: this.selected ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}>
                 {this.content}
-- 
cgit v1.2.3-70-g09d2


From d6e449b84e1b35cf434b49f0476aa7242cc6c03b Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 9 May 2024 00:06:12 -0400
Subject: fixed merge

---
 .../collectionSchema/SchemaTableCell.tsx           | 86 +++++++++-------------
 1 file changed, 35 insertions(+), 51 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index c1677b024..67991b8a2 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -25,9 +25,9 @@ import { Transform } from '../../../util/Transform';
 import { undoBatch, undoable } from '../../../util/UndoManager';
 import { EditableView } from '../../EditableView';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
-import { DefaultStyleProvider } from '../../StyleProvider';
+import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider';
 import { Colors } from '../../global/globalEnums';
-import { DocFocusOrOpen, returnEmptyDocViewList } from '../../nodes/DocumentView';
+import { DocumentView } from '../../nodes/DocumentView';
 import { FieldViewProps } from '../../nodes/FieldView';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { FInfotoColType } from './CollectionSchemaView';
@@ -59,6 +59,14 @@ export interface SchemaTableCellProps {
     rootSelected?: () => boolean;
 }
 
+function selectedCell(props: SchemaTableCellProps) {
+    return (
+        props.isRowActive() &&
+        props.selectedCol() === props.col && //
+        props.selectedCells()?.filter(d => d === props.Document)?.length
+    );
+}
+
 @observer
 export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellProps> {
     constructor(props: SchemaTableCellProps) {
@@ -67,7 +75,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
     }
 
     static addFieldDoc = (docs: Doc | Doc[] /* , where: OpenWhere */) => {
-        DocFocusOrOpen(toList(docs)[0]);
+        DocumentView.FocusOrOpen(toList(docs)[0]);
         return true;
     };
     public static renderProps(props: SchemaTableCellProps) {
@@ -114,11 +122,6 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         return { color, textDecoration, fieldProps, cursor, pointerEvents };
     }
 
-    @computed get selected() {
-        const selectedDocs: Doc[] | undefined = this._props.selectedCells();
-        return this._props.isRowActive() && selectedDocs?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col;
-    }
-
     @computed get defaultCellContent() {
         const { color, textDecoration, fieldProps, pointerEvents } = SchemaTableCell.renderProps(this._props);
 
@@ -132,12 +135,12 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     pointerEvents,
                 }}>
                 <EditableView
-                    ref={r => this.selected && this._props.autoFocus && r?.setIsFocused(true)}
+                    ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
                     oneLine={this._props.oneLine}
                     allowCRs={this._props.allowCRs}
                     contents={undefined}
                     fieldContents={fieldProps}
-                    editing={this.selected ? undefined : false}
+                    editing={selectedCell(this._props) ? undefined : false}
                     GetValue={() => Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey)}
                     SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
                         if (shiftDown && enterKey) {
@@ -157,39 +160,27 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
     get getCellType() {
         const columnTypeStr = this._props.getFinfo(this._props.fieldKey)?.fieldType;
         const cellValue = this._props.Document[this._props.fieldKey];
+
         if (cellValue instanceof ImageField) return ColumnType.Image;
         if (cellValue instanceof DateField) return ColumnType.Date;
         if (cellValue instanceof RichTextField) return ColumnType.RTF;
         if (typeof cellValue === 'number') return ColumnType.Any;
         if (typeof cellValue === 'string' && columnTypeStr !== FInfoFieldType.enumeration) return ColumnType.Any;
         if (typeof cellValue === 'boolean') return ColumnType.Boolean;
-
-        if (columnTypeStr && columnTypeStr in FInfotoColType) {
-            return FInfotoColType[columnTypeStr];
-        }
+        if (columnTypeStr && columnTypeStr in FInfotoColType) return FInfotoColType[columnTypeStr];
 
         return ColumnType.Any;
     }
 
     get content() {
-        const cellType: ColumnType = this.getCellType;
         // prettier-ignore
-        switch (cellType) {
-            case ColumnType.Image: return <SchemaImageCell {...this._props} />;
-            case ColumnType.Boolean: return <SchemaBoolCell {...this._props} />;
-            case ColumnType.RTF: return <SchemaRTFCell {...this._props} />;
+        switch (this.getCellType) {
+            case ColumnType.Image:       return <SchemaImageCell {...this._props} />;
+            case ColumnType.Boolean:     return <SchemaBoolCell {...this._props} />;
+            case ColumnType.RTF:         return <SchemaRTFCell {...this._props} />;
             case ColumnType.Enumeration: return <SchemaEnumerationCell {...this._props} options={this._props.getFinfo(this._props.fieldKey)?.values?.map(val => Field.toString(val))} />;
-            case ColumnType.Date: return <SchemaDateCell {...this._props} />;
-            default:  return this.defaultCellContent;
-        }
-    }
-
-    select = (shift: boolean, ctrl: boolean, e: React.MouseEvent<HTMLDivElement>) => {
-        if (this._props.isRowActive?.() !== false) {
-            if (this.selected && ctrl) {
-                this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
-                e.stopPropagation();
-            } else !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
+            case ColumnType.Date:        return <SchemaDateCell {...this._props} />;
+            default:                     return this.defaultCellContent;
         }
     }
 
@@ -199,9 +190,16 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 className="schema-table-cell"
                 onContextMenu={e => StopEvent(e)}
                 onPointerDown={action(e => {
-                    this.select(e.shiftKey, e.ctrlKey, e);
+                    const shift: boolean = e.shiftKey;
+                    const ctrl: boolean = e.ctrlKey;
+                    if (this._props.isRowActive?.() !== false) {
+                        if (selectedCell(this._props) && ctrl) {
+                            this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
+                            e.stopPropagation();
+                        } else !selectedCell(this._props) && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
+                    }
                 })}
-                style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: this.selected ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}>
+                style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}>
                 {this.content}
             </div>
         );
@@ -331,20 +329,14 @@ export class SchemaRTFCell extends ObservableReactComponent<SchemaTableCellProps
         makeObservable(this);
     }
 
-    @computed get selected() {
-        const selected = this._props.selectedCells();
-        return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col;
-        // return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col;
-    }
-
     // if the text box blurs and none of its contents are focused(), then the edit finishes
-    selectedFunc = () => this.selected;
+    selectedFunc = () => !!selectedCell(this._props);
     render() {
         const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props);
         fieldProps.isContentActive = this.selectedFunc;
         return (
-            <div className="schemaRTFCell" style={{ fontStyle: this.selected ? undefined : 'italic', color, textDecoration, cursor, pointerEvents }}>
-                {this.selected ? <FormattedTextBox {...fieldProps} autoFocus onBlur={() => this._props.finishEdit?.()} /> : (field => (field ? Field.toString(field) : ''))(FieldValue(fieldProps.Document[fieldProps.fieldKey]))}
+            <div className="schemaRTFCell" style={{ fontStyle: selectedCell(this._props) ? undefined : 'italic', color, textDecoration, cursor, pointerEvents }}>
+                {selectedCell(this._props) ? <FormattedTextBox {...fieldProps} autoFocus onBlur={() => this._props.finishEdit?.()} /> : (field => (field ? Field.toString(field) : ''))(FieldValue(fieldProps.Document[fieldProps.fieldKey]))}
             </div>
         );
     }
@@ -356,10 +348,6 @@ export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProp
         makeObservable(this);
     }
 
-    @computed get selected() {
-        const selected = this._props.selectedCells();
-        return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col;
-    }
     render() {
         const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props);
         return (
@@ -377,7 +365,7 @@ export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProp
                 <EditableView
                     contents={undefined}
                     fieldContents={fieldProps}
-                    editing={this.selected ? undefined : false}
+                    editing={selectedCell(this._props) ? undefined : false}
                     GetValue={() => Field.toKeyValueString(this._props.Document, this._props.fieldKey)}
                     SetValue={undoBatch((value: string, shiftDown?: boolean, enterKey?: boolean) => {
                         if (shiftDown && enterKey) {
@@ -401,10 +389,6 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC
         makeObservable(this);
     }
 
-    @computed get selected() {
-        const selected = this._props.selectedCells();
-        return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col;
-    }
     render() {
         const { color, textDecoration, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props);
         const options = this._props.options?.map(facet => ({ value: facet, label: facet }));
@@ -457,4 +441,4 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC
             </div>
         );
     }
-}
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 4a1395a1fc72f0ebcdd29356aa0425804da55d67 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 9 May 2024 03:32:18 -0400
Subject: tag reference parsing in progress

---
 .../collectionSchema/CollectionSchemaView.tsx      | 73 +++++++++++++++++-----
 1 file changed, 56 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index f7a553da3..2704b5234 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -324,9 +324,24 @@ export class CollectionSchemaView extends CollectionSubView() {
         });
     }
 
-    parseEquation = (eq: string): string => {
+    parseEquation = (eq: string): [string, Map<string, Doc>] => {
         const variablePattern = /[a-z]+/gi;
-        return eq.replace(variablePattern, (match) => `doc.${match}`);
+        const tagRefPattern = /{([^}]*)}/g;
+        const tagRefs = eq.match(tagRefPattern)
+        const docTagRefPairs = new Map;
+        let modifiedEq = eq;
+
+        if (tagRefs){
+            tagRefs.forEach(ref => {
+                const [doc, key] = this.getCellInfoFromTag(ref);
+                docTagRefPairs.set(ref, doc);
+                const replacement = `docTagRefPairs.get('${ref}').${key}`;
+                modifiedEq = modifiedEq.replace(new RegExp(ref, 'g'), replacement);
+            })
+        }
+        modifiedEq = modifiedEq.replace(variablePattern, (match) => `doc.${match}`);
+
+        return [eq, docTagRefPairs]
     }
 
     parsedEquationResult = (eq: string, doc: any): number => {
@@ -529,6 +544,9 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     selectCell = (doc: Doc, col: number, shiftKey: boolean, ctrlKey: boolean) => {
+        this.populateCellTags();
+        console.log(this.getCellTag(doc, col));
+        console.log(this.getCellInfoFromTag("C1"));
         if (!shiftKey && !ctrlKey) this.clearSelection();
         !this._selectedCells && (this._selectedCells = []);
         !shiftKey && this._selectedCells && this._selectedCells.push(doc);
@@ -551,10 +569,46 @@ export class CollectionSchemaView extends CollectionSubView() {
         // let selectedIndexes: Array<Number> = this._selectedCells.map(doc => this.rowIndex(doc));
     };
 
+    @action
+    deselectCell = (doc: Doc) => {
+        this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc));
+        if (this.rowIndex(doc) === this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(d => this.rowIndex(d)));
+    };
+
+    @action
+    deselectAllCells = () => {
+        this._selectedCells = [];
+        this._lowestSelectedIndex = -1;
+    };
+
+    sortedSelectedDocs = () => this.sortedDocs.docs.filter(doc => this._selectedDocs.includes(doc));
+
+
     getCellTag = (doc: Doc, col: number) => {
         return this._cellTags.get(doc)[col];
     }
 
+    getCellInfoFromTag = (tag: string): [Doc, string] => {
+        const lettersToNumber = (letters: string) => {
+            let number = 0;
+            let length = letters.length;
+            for (let i = 0; i < length; i++) {
+                number *= 26;
+                number += (letters.charCodeAt(i) - 'A'.charCodeAt(0) + 1);
+            }
+            return number;
+        }
+
+        const colTag = tag.replace(/[^A-Z]/g, '');
+        const col = lettersToNumber(colTag);
+        const key: string = this.columnKeys[col];
+
+        const rowNum = Number(tag.replace(/[^\d]/g, ''));
+        const doc = this.childDocs[rowNum];
+        
+        return [doc, key];
+    }
+
     populateCellTags = () => {
         this.childDocs.forEach(doc => this.addTags(doc));
     }
@@ -594,20 +648,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         return result;
     }
 
-    @action
-    deselectCell = (doc: Doc) => {
-        this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc));
-        if (this.rowIndex(doc) === this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(d => this.rowIndex(d)));
-    };
-
-    @action
-    deselectAllCells = () => {
-        this._selectedCells = [];
-        this._lowestSelectedIndex = -1;
-    };
-
-    sortedSelectedDocs = () => this.sortedDocs.docs.filter(doc => this._selectedDocs.includes(doc));
-
     @computed
     get rowDropIndex() {
         const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseCoordinates.x, this._mouseCoordinates.y)[1];
@@ -774,7 +814,6 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     setKey = (key: string, defaultVal?: any) => {
-        console.log("called")
         if (this._makeNewColumn) {
             this.addColumn(key, defaultVal);
         } else {
-- 
cgit v1.2.3-70-g09d2


From 8fe221d77d8c5e0ffce67a1dd0483b41368820ee Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 9 May 2024 04:20:18 -0400
Subject: parse function close to properly registering tags

---
 .../collectionSchema/CollectionSchemaView.tsx      | 53 +++++++++++-----------
 1 file changed, 27 insertions(+), 26 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 2704b5234..19d170c81 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -287,7 +287,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         if (!this.documentKeys.includes(key)) {
             this.addNewKey(key, defaultVal);
         }
-
+        
+        this.modifyCellTags(true);
         const newColWidth = this.tableWidth / (this.storedColumnWidths.length + 1);
         const currWidths = this.storedColumnWidths.slice();
         currWidths.splice(0, 0, newColWidth);
@@ -316,37 +317,37 @@ export class CollectionSchemaView extends CollectionSubView() {
         }
     }
 
-    @action
-    setupAutoUpdate = (equation: string, doc: Doc) => {
-        return autorun(() => {
-            const result = this.parsedEquationResult(equation, doc);
-            doc[DocData][equation] = result;
-        });
-    }
+    // @action
+    // setupAutoUpdate = (equation: string, doc: Doc) => {
+    //     return autorun(() => {
+    //         const result = this.parsedEquationResult(equation, doc);
+    //         doc[DocData][equation] = result;
+    //     });
+    // }
 
     parseEquation = (eq: string): [string, Map<string, Doc>] => {
         const variablePattern = /[a-z]+/gi;
         const tagRefPattern = /{([^}]*)}/g;
-        const tagRefs = eq.match(tagRefPattern)
-        const docTagRefPairs = new Map;
+        const docTagRefPairs = new Map<string, Doc>();
         let modifiedEq = eq;
-
-        if (tagRefs){
-            tagRefs.forEach(ref => {
-                const [doc, key] = this.getCellInfoFromTag(ref);
-                docTagRefPairs.set(ref, doc);
-                const replacement = `docTagRefPairs.get('${ref}').${key}`;
-                modifiedEq = modifiedEq.replace(new RegExp(ref, 'g'), replacement);
-            })
+        let match;
+    
+        while (match = tagRefPattern.exec(eq)) {
+            const ref = match[1]; 
+            const [doc, key] = this.getCellInfoFromTag(ref);
+            docTagRefPairs.set(ref, doc);
+            const replacement = `docTagRefPairs.get('${ref}').${key}`;
+            modifiedEq = modifiedEq.replace(new RegExp(`{${ref}}`, 'g'), replacement);
         }
-        modifiedEq = modifiedEq.replace(variablePattern, (match) => `doc.${match}`);
-
-        return [eq, docTagRefPairs]
+    
+        //modifiedEq = modifiedEq.replace(variablePattern, (match) => `doc.${match}`);
+    
+        return [modifiedEq, docTagRefPairs];
     }
-
-    parsedEquationResult = (eq: string, doc: any): number => {
-        const func = new Function('doc', 'return ' + eq);
-        return func(doc);
+    
+    parsedEquationResult = (eq: [string, Map<string, Doc>], doc: any): number => {
+        const func = new Function('doc', 'docTagRefPairs', 'return ' + eq[0]);
+        return func(doc, eq[1]);
     }
 
     @undoBatch
@@ -604,7 +605,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const key: string = this.columnKeys[col];
 
         const rowNum = Number(tag.replace(/[^\d]/g, ''));
-        const doc = this.childDocs[rowNum];
+        const doc = this.childDocs[rowNum - 1];
         
         return [doc, key];
     }
-- 
cgit v1.2.3-70-g09d2


From 2d7037dd5664700cda04b1fb0c6c77fe6f49d66c Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 9 May 2024 23:33:17 -0400
Subject: goodbye old parser ;( hello new parser :)

---
 src/client/documents/Documents.ts                  |  2 +-
 src/client/views/FieldsDropdown.tsx                |  4 +-
 .../collectionSchema/CollectionSchemaView.tsx      | 75 +++++++++++-----------
 .../collections/collectionSchema/SchemaRowBox.tsx  |  2 +
 .../collectionSchema/SchemaTableCell.tsx           |  6 +-
 5 files changed, 48 insertions(+), 41 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 1c18c0d84..f0974f5dd 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -43,7 +43,7 @@ export class FInfo {
     readOnly: boolean = false;
     fieldType?: FInfoFieldType;
     values?: FieldType[];
-
+    onLayout?: boolean;
     filterable?: boolean = true; // can be used as a Filter in FilterPanel
     // format?: string; // format to display values (e.g, decimal places, $, etc)
     // parse?: ScriptField; // parse a value from a string
diff --git a/src/client/views/FieldsDropdown.tsx b/src/client/views/FieldsDropdown.tsx
index 0ea0ebd83..011cd51b3 100644
--- a/src/client/views/FieldsDropdown.tsx
+++ b/src/client/views/FieldsDropdown.tsx
@@ -34,7 +34,7 @@ export class FieldsDropdown extends ObservableReactComponent<fieldsDropdownProps
         makeObservable(this);
     }
 
-    @computed get allDescendantDocs() {
+    @computed get allDescendantDocs() { //!!!
         const allDocs = new Set<Doc>();
         SearchUtil.foreachRecursiveDoc([this._props.Document], (depth, doc) => allDocs.add(doc));
         return Array.from(allDocs);
@@ -57,7 +57,7 @@ export class FieldsDropdown extends ObservableReactComponent<fieldsDropdownProps
         const filteredOptions = ['author', ...(this._newField ? [this._newField] : []), ...(this._props.addedFields ?? []), ...this.fieldsOfDocuments.filter(facet => facet[0] === facet.charAt(0).toUpperCase())];
 
         Object.entries(DocOptions)
-            .filter(opts => opts[1].filterable)
+            .filter(opts => opts[1].filterable) //!!!
             .forEach((pair: [string, FInfo]) => filteredOptions.push(pair[0]));
         const options = filteredOptions.sort().map(facet => ({ value: facet, label: facet }));
 
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 19d170c81..e493b2e5d 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -6,7 +6,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
-import { Doc, DocListCast, Field, FieldType, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
+import { Doc, DocListCast, Field, FieldType, IdToDoc, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
 import { DocData } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
@@ -288,7 +288,6 @@ export class CollectionSchemaView extends CollectionSubView() {
             this.addNewKey(key, defaultVal);
         }
         
-        this.modifyCellTags(true);
         const newColWidth = this.tableWidth / (this.storedColumnWidths.length + 1);
         const currWidths = this.storedColumnWidths.slice();
         currWidths.splice(0, 0, newColWidth);
@@ -302,19 +301,24 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     addNewKey = (key: string, defaultVal: any) => {
-        if (this._newFieldType == ColumnType.Equation) {
-            this.childDocs.forEach(doc => {
-                const parsedEquation = this.parseEquation(defaultVal);
-                const val = computed(() => { return this.parsedEquationResult(parsedEquation, doc);})
-                doc[DocData][key] = val.get();
-                // doc[DocData][key] = this.parsedEquationResult(eq, doc);
-                // this.setupAutoUpdate(eq, doc);
-            });
-        } else {
-            this.childDocs.forEach(doc => {
-                doc[DocData][key] = defaultVal;
-            });
+        this.childDocs.forEach(doc => {
+            doc[DocData][key] = defaultVal;
+        });
+    }
+
+    cleanupComputedField = (field: string) => {
+        const idPattern = /idToDoc\((.*?)\)/g;
+        let modField = field.slice();
+        let matches;
+        let results = new Map<string, string>();
+        while ((matches = idPattern.exec(field)) !== null) {
+            results.set(matches[0], matches[1].replace(/"/g, '')); 
         }
+        console.log(results);
+        results.forEach((id, funcId) => {
+            modField = modField.replace(funcId, 'd' + (this.rowIndex(IdToDoc(id)) + 1).toString());
+        })
+        return modField;
     }
 
     // @action
@@ -325,30 +329,30 @@ export class CollectionSchemaView extends CollectionSubView() {
     //     });
     // }
 
-    parseEquation = (eq: string): [string, Map<string, Doc>] => {
-        const variablePattern = /[a-z]+/gi;
-        const tagRefPattern = /{([^}]*)}/g;
-        const docTagRefPairs = new Map<string, Doc>();
-        let modifiedEq = eq;
-        let match;
+    // parseEquation = (eq: string): [string, Map<string, Doc>] => {
+    //     const variablePattern = /[a-z]+/gi;
+    //     const tagRefPattern = /{([^}]*)}/g;
+    //     const docTagRefPairs = new Map<string, Doc>();
+    //     let modifiedEq = eq;
+    //     let match;
     
-        while (match = tagRefPattern.exec(eq)) {
-            const ref = match[1]; 
-            const [doc, key] = this.getCellInfoFromTag(ref);
-            docTagRefPairs.set(ref, doc);
-            const replacement = `docTagRefPairs.get('${ref}').${key}`;
-            modifiedEq = modifiedEq.replace(new RegExp(`{${ref}}`, 'g'), replacement);
-        }
+    //     while (match = tagRefPattern.exec(eq)) {
+    //         const ref = match[1]; 
+    //         const [doc, key] = this.getCellInfoFromTag(ref);
+    //         docTagRefPairs.set(ref, doc);
+    //         const replacement = `docTagRefPairs.get('${ref}').${key}`;
+    //         modifiedEq = modifiedEq.replace(new RegExp(`{${ref}}`, 'g'), replacement);
+    //     }
     
-        //modifiedEq = modifiedEq.replace(variablePattern, (match) => `doc.${match}`);
+    //     modifiedEq = modifiedEq.replace(variablePattern, (match) => `doc.${match}`);
     
-        return [modifiedEq, docTagRefPairs];
-    }
+    //     return [modifiedEq, docTagRefPairs];
+    // }
     
-    parsedEquationResult = (eq: [string, Map<string, Doc>], doc: any): number => {
-        const func = new Function('doc', 'docTagRefPairs', 'return ' + eq[0]);
-        return func(doc, eq[1]);
-    }
+    // parsedEquationResult = (eq: [string, Map<string, Doc>], doc: any): number => {
+    //     const func = new Function('doc', 'docTagRefPairs', 'return ' + eq[0]);
+    //     return func(doc, eq[1]);
+    // }
 
     @undoBatch
     removeColumn = (index: number) => {
@@ -547,7 +551,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     selectCell = (doc: Doc, col: number, shiftKey: boolean, ctrlKey: boolean) => {
         this.populateCellTags();
         console.log(this.getCellTag(doc, col));
-        console.log(this.getCellInfoFromTag("C1"));
         if (!shiftKey && !ctrlKey) this.clearSelection();
         !this._selectedCells && (this._selectedCells = []);
         !shiftKey && this._selectedCells && this._selectedCells.push(doc);
@@ -602,7 +605,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         const colTag = tag.replace(/[^A-Z]/g, '');
         const col = lettersToNumber(colTag);
-        const key: string = this.columnKeys[col];
+        const key: string = this.columnKeys[col - 1];
 
         const rowNum = Number(tag.replace(/[^\d]/g, ''));
         const doc = this.childDocs[rowNum - 1];
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 760089ffb..3295c9ab1 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -52,6 +52,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         this._props.setContentViewBox?.(this);
     }
 
+    cleanupField = (field: string) => this.schemaView.cleanupComputedField(field)
     setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY);
     selectedCol = () => this.schemaView._selectedCol;
     getFinfo = computedFn((fieldKey: string) => this.schemaView?.fieldInfos.get(fieldKey));
@@ -149,6 +150,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                             setSelectedColumnValues={this.setSelectedColumnValues}
                             oneLine={BoolCast(this.schemaDoc?._singleLine)}
                             menuTarget={this.schemaView.MenuTarget}
+                            cleanupField={this.cleanupField}
                             transform={() => {
                                 const ind = index === this.schemaView.columnKeys.length - 1 ? this.schemaView.columnKeys.length - 3 : index;
                                 const x = this.schemaView?.displayColumnWidths.reduce((p, c, i) => (i <= ind ? p + c : p), 0);
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 67991b8a2..d11af6b3c 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -57,6 +57,7 @@ export interface SchemaTableCellProps {
     transform: () => Transform;
     autoFocus?: boolean; // whether to set focus on creation, othwerise wait for a click
     rootSelected?: () => boolean;
+    cleanupField: (field: string) => string;
 }
 
 function selectedCell(props: SchemaTableCellProps) {
@@ -141,14 +142,15 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     contents={undefined}
                     fieldContents={fieldProps}
                     editing={selectedCell(this._props) ? undefined : false}
-                    GetValue={() => Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey)}
+                    GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))} //TODO: feed this into parser that handles idToDoc
                     SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
                         if (shiftDown && enterKey) {
                             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value);
                             this._props.finishEdit?.();
                             return true;
                         }
-                        const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, Doc.IsDataProto(fieldProps.Document) ? true : undefined);
+                        const hasNoLayout =  Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto
+                        const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout);
                         this._props.finishEdit?.();
                         return ret;
                     }, 'edit schema cell')}
-- 
cgit v1.2.3-70-g09d2


From 3b5cecea920b62a5d1633d8c6603b3b152794611 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 13 May 2024 00:54:49 -0400
Subject: editable column header started

---
 src/client/documents/Documents.ts                  |  1 +
 .../collectionSchema/CollectionSchemaView.tsx      |  3 +-
 .../collectionSchema/SchemaColumnHeader.tsx        | 90 ++++++++++++++++++++--
 .../collectionSchema/SchemaTableCell.tsx           |  2 +-
 4 files changed, 88 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index f0974f5dd..3cc0d5604 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -87,6 +87,7 @@ class DocInfo extends FInfo {
     constructor(d: string, filterable?: boolean, values?: Doc[]) {
         super(d, true);
         this.values = values;
+        console.log(this.values);
         this.filterable = filterable;
     }
     override searchable = () => false;
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index e493b2e5d..c9d5307c9 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -312,9 +312,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         let matches;
         let results = new Map<string, string>();
         while ((matches = idPattern.exec(field)) !== null) {
-            results.set(matches[0], matches[1].replace(/"/g, '')); 
+            results.set(matches[0], matches[1]); 
         }
-        console.log(results);
         results.forEach((id, funcId) => {
             modField = modField.replace(funcId, 'd' + (this.rowIndex(IdToDoc(id)) + 1).toString());
         })
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 6b5a34ec0..dad0c214b 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -1,14 +1,20 @@
 /* eslint-disable react/no-unused-prop-types */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { setupMoveUpEvents } from '../../../../ClientUtils';
+import { returnEmptyDoclist, returnEmptyFilter, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
 import { Colors } from '../../global/globalEnums';
 import './CollectionSchemaView.scss';
+import { EditableView } from '../../EditableView';
+import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider';
+import { FieldViewProps } from '../../nodes/FieldView';
 
 export interface SchemaColumnHeaderProps {
+    autoFocus?: boolean;
+    oneLine?: boolean; // whether all input should fit on one line vs allowing textare multiline inputs
+    allowCRs?: boolean; // allow carriage returns in text input (othewrise CR ends the edit)
     columnKeys: string[];
     columnWidths: number[];
     columnIndex: number;
@@ -26,6 +32,9 @@ export interface SchemaColumnHeaderProps {
 
 @observer
 export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> {
+
+    @observable _editing: boolean = false;
+
     get fieldKey() {
         return this.props.columnKeys[this.props.columnIndex];
     }
@@ -44,10 +53,81 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
     };
 
     @action
-    onPointerDown = (e: React.PointerEvent) => {
+    setupDrag = (e: React.PointerEvent) => {
         this.props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this.props.dragColumn(moveEv, this.props.columnIndex), emptyFunction, emptyFunction);
     };
 
+    public static renderProps(props: SchemaColumnHeaderProps) {
+        const { Document, fieldKey, getFinfo, columnWidth, isContentActive } = props;
+        let protoCount = 0;
+        let doc: Doc | undefined = Document;
+        while (doc) {
+            if (Object.keys(doc).includes(fieldKey.replace(/^_/, ''))) {
+                break;
+            }
+            protoCount++;
+            doc = DocCast(doc.proto);
+        }
+        const parenCount = Math.max(0, protoCount - 1);
+        const color = protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; // color of text in cells
+        const textDecoration = color !== 'black' && parenCount ? 'underline' : '';
+        const fieldProps: FieldViewProps = {
+            childFilters: returnEmptyFilter,
+            childFiltersByRanges: returnEmptyFilter,
+            docViewPath: returnEmptyDocViewList,
+            searchFilterDocs: returnEmptyDoclist,
+            styleProvider: DefaultStyleProvider,
+            isSelected: returnFalse,
+            setHeight: returnFalse,
+            select: emptyFunction,
+            dragAction: dropActionType.move,
+            renderDepth: 1,
+            noSidebar: true,
+            isContentActive: returnFalse,
+            whenChildContentsActiveChanged: emptyFunction,
+            ScreenToLocalTransform: Transform.Identity,
+            focus: emptyFunction,
+            addDocTab: SchemaTableCell.addFieldDoc,
+            pinToPres: returnZero,
+            Document: DocCast(Document.rootDocument, Document),
+            fieldKey: fieldKey,
+            PanelWidth: columnWidth,
+            PanelHeight: props.rowHeight,
+            rootSelected: props.rootSelected,
+        };
+        const readOnly = getFinfo(fieldKey)?.readOnly ?? false;
+        const cursor = !readOnly ? 'text' : 'default';
+        const pointerEvents = 'all';
+        return { color, textDecoration, fieldProps, cursor, pointerEvents };
+    }
+
+    @computed get editableView() {
+        const { color, textDecoration, fieldProps, pointerEvents } = SchemaColumnHeader.renderProps(this.props); 
+
+        return <EditableView
+
+
+                    ref={r => this.props.autoFocus && r?.setIsFocused(true)}
+                    oneLine={this.props.oneLine}
+                    allowCRs={this.props.allowCRs}
+                    contents={undefined}
+                    fieldContents={fieldProps}
+                    editing={this._editing ? undefined : false}
+                    GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey)).replace(/[";]/g, '')} //TODO: feed this into parser that handles idToDoc
+                    SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
+                        if (shiftDown && enterKey) {
+                            this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value);
+                            this._props.finishEdit?.();
+                            return true;
+                        }
+                        const hasNoLayout =  Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto
+                        const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout);
+                        this._props.finishEdit?.();
+                        return ret;
+                    }, 'edit schema cell')}
+                />
+    }
+
     render() {
         return (
             <div
@@ -55,14 +135,14 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
                 style={{
                     width: this.props.columnWidths[this.props.columnIndex],
                 }}
-                onPointerDown={this.onPointerDown}
+                onPointerDown={this.setupDrag}
                 ref={col => {
                     if (col) {
                         this.props.setColRef(this.props.columnIndex, col);
                     }
                 }}>
                 <div className="schema-column-resizer left" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex)} />
-                <div className="schema-column-title">{this.fieldKey}</div>
+                <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
 
                 <div className="schema-header-menu">
                     <div className="schema-header-button" onPointerDown={e => this.props.openContextMenu(e.clientX, e.clientY, this.props.columnIndex)}>
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index d11af6b3c..733cf3722 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -142,7 +142,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     contents={undefined}
                     fieldContents={fieldProps}
                     editing={selectedCell(this._props) ? undefined : false}
-                    GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))} //TODO: feed this into parser that handles idToDoc
+                    GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey)).replace(/[";]/g, '')} //TODO: feed this into parser that handles idToDoc
                     SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
                         if (shiftDown && enterKey) {
                             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value);
-- 
cgit v1.2.3-70-g09d2


From 58692ef043125ebd3113d81f3ca7161a7e6521cb Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 13 May 2024 18:44:23 -0400
Subject: equation parser works but occasional call stack error

---
 src/client/documents/Documents.ts                  |   1 +
 src/client/util/DocumentManager.ts                 |  11 ++
 src/client/util/Scripting.ts                       |   1 -
 .../collectionSchema/CollectionSchemaView.tsx      |  10 +-
 .../collectionSchema/SchemaColumnHeader.tsx        | 140 +++++++++++----------
 src/client/views/nodes/DocumentIcon.tsx            |   2 +-
 src/client/views/nodes/DocumentView.tsx            |   1 +
 7 files changed, 92 insertions(+), 74 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 3cc0d5604..5e1b173dc 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -178,6 +178,7 @@ export class DocumentOptions {
     map_pitch?: NUMt = new NumInfo('pitch of a map view', false);
     map_bearing?: NUMt = new NumInfo('bearing of a map view', false);
     map_style?: STRt = new StrInfo('mapbox style for a map view', false);
+    identifier?: STRt = new StrInfo('documentIcon displayed for each doc as "d[x]"', false);
 
     date_range?: STRt = new StrInfo('date range for calendar', false);
 
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 97051207b..8dba54541 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -46,6 +46,7 @@ export class DocumentManager {
         DocumentView.addViewRenderedCb = this.AddViewRenderedCb;
         DocumentView.getFirstDocumentView = this.getFirstDocumentView;
         DocumentView.getDocumentView = this.getDocumentView;
+        DocumentView.getDocViewIndex = this.getDocViewIndex;
         DocumentView.getContextPath = DocumentManager.GetContextPath;
         DocumentView.getLightboxDocumentView = this.getLightboxDocumentView;
         observe(Doc.CurrentlyLoading, change => {
@@ -138,6 +139,16 @@ export class DocumentManager {
         );
     }
 
+    public getDocViewIndex(target: Doc): number {
+        const docViewArray = DocumentManager.Instance.DocumentViews;
+        for (let i = 0; i < docViewArray.length; ++i){
+            if (docViewArray[i].Document == target){
+                return i;
+            }
+        }
+        return -1;
+    }
+
     public getLightboxDocumentView = (toFind: Doc): DocumentView | undefined => {
         const views: DocumentView[] = [];
         DocumentManager.Instance.DocumentViews.forEach(view => DocumentView.LightboxContains(view) && Doc.AreProtosEqual(view.Document, toFind) && views.push(view));
diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index 6948469cc..6ef592ef2 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -88,7 +88,6 @@ function Run(script: string | undefined, customParams: string[], diagnostics: an
             if (!options.editable) {
                 batch = Doc.MakeReadOnly();
             }
-
             const result = compiledFunction.apply(thisParam, params).apply(thisParam, argsArray);
             batch?.end();
             return { success: true, result };
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index c9d5307c9..deeba3c7a 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -312,10 +312,10 @@ export class CollectionSchemaView extends CollectionSubView() {
         let matches;
         let results = new Map<string, string>();
         while ((matches = idPattern.exec(field)) !== null) {
-            results.set(matches[0], matches[1]); 
+            results.set(matches[0], matches[1].replace(/"/g, '')); 
         }
         results.forEach((id, funcId) => {
-            modField = modField.replace(funcId, 'd' + (this.rowIndex(IdToDoc(id)) + 1).toString());
+            modField = modField.replace(funcId, 'd' + (DocumentView.getDocViewIndex(IdToDoc(id))).toString());
         })
         return modField;
     }
@@ -549,7 +549,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     selectCell = (doc: Doc, col: number, shiftKey: boolean, ctrlKey: boolean) => {
         this.populateCellTags();
-        console.log(this.getCellTag(doc, col));
+        //docs.findIndex(doc);
         if (!shiftKey && !ctrlKey) this.clearSelection();
         !this._selectedCells && (this._selectedCells = []);
         !shiftKey && this._selectedCells && this._selectedCells.push(doc);
@@ -1211,6 +1211,10 @@ export class CollectionSchemaView extends CollectionSubView() {
                         {this.columnKeys.map((key, index) => (
                             <SchemaColumnHeader
                                 // eslint-disable-next-line react/no-array-index-key
+                                //cleanupField={this.cleanupComputedField}
+                                schemaView={this}
+                                columnWidth={() => CollectionSchemaView._minColWidth} //TODO: update
+                                Document={this.Document}
                                 key={index}
                                 columnIndex={index}
                                 columnKeys={this.columnKeys}
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index dad0c214b..b498a4850 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -3,15 +3,26 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { returnEmptyDoclist, returnEmptyFilter, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
+import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
 import { Colors } from '../../global/globalEnums';
 import './CollectionSchemaView.scss';
 import { EditableView } from '../../EditableView';
 import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider';
 import { FieldViewProps } from '../../nodes/FieldView';
+import { Doc, Field } from '../../../../fields/Doc';
+import { dropActionType } from '../../../util/DropActionTypes';
+import { Transform } from 'prosemirror-transform';
+import { SchemaTableCell } from './SchemaTableCell';
+import { DocCast } from '../../../../fields/Types';
+import { computedFn } from 'mobx-utils';
+import { CollectionSchemaView } from './CollectionSchemaView';
+import { SnappingManager } from '../../../util/SnappingManager';
+import { undoable } from '../../../util/UndoManager';
+import { FInfo } from '../../../documents/Documents';
 
 export interface SchemaColumnHeaderProps {
+    Document: Doc;
     autoFocus?: boolean;
     oneLine?: boolean; // whether all input should fit on one line vs allowing textare multiline inputs
     allowCRs?: boolean; // allow carriage returns in text input (othewrise CR ends the edit)
@@ -20,6 +31,8 @@ export interface SchemaColumnHeaderProps {
     columnIndex: number;
     sortField: string;
     sortDesc: boolean;
+    schemaView: CollectionSchemaView;
+    //cleanupField: (s: string) => string;
     isContentActive: (outsideReaction?: boolean | undefined) => boolean | undefined;
     setSort: (field: string | undefined, desc?: boolean) => void;
     removeColumn: (index: number) => void;
@@ -28,6 +41,10 @@ export interface SchemaColumnHeaderProps {
     dragColumn: (e: any, index: number) => boolean;
     openContextMenu: (x: number, y: number, index: number) => void;
     setColRef: (index: number, ref: HTMLDivElement) => void;
+    rootSelected?: () => boolean;
+    columnWidth: () => number;
+    finishEdit?: () => void; // notify container that edit is over (eg. to hide view in DashFieldView)
+    //transform: () => Transform;
 }
 
 @observer
@@ -39,6 +56,9 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
         return this.props.columnKeys[this.props.columnIndex];
     }
 
+    // getFinfo = computedFn((fieldKey: string) => this.props.schemaView?.fieldInfos.get(fieldKey));
+    // setColumnValues = (field: string, value: string) => this.props.schemaView?.setColumnValues(field, value);
+
     @action
     sortClicked = (e: React.PointerEvent) => {
         e.stopPropagation();
@@ -57,76 +77,58 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
         this.props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this.props.dragColumn(moveEv, this.props.columnIndex), emptyFunction, emptyFunction);
     };
 
-    public static renderProps(props: SchemaColumnHeaderProps) {
-        const { Document, fieldKey, getFinfo, columnWidth, isContentActive } = props;
-        let protoCount = 0;
-        let doc: Doc | undefined = Document;
-        while (doc) {
-            if (Object.keys(doc).includes(fieldKey.replace(/^_/, ''))) {
-                break;
-            }
-            protoCount++;
-            doc = DocCast(doc.proto);
-        }
-        const parenCount = Math.max(0, protoCount - 1);
-        const color = protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; // color of text in cells
-        const textDecoration = color !== 'black' && parenCount ? 'underline' : '';
-        const fieldProps: FieldViewProps = {
-            childFilters: returnEmptyFilter,
-            childFiltersByRanges: returnEmptyFilter,
-            docViewPath: returnEmptyDocViewList,
-            searchFilterDocs: returnEmptyDoclist,
-            styleProvider: DefaultStyleProvider,
-            isSelected: returnFalse,
-            setHeight: returnFalse,
-            select: emptyFunction,
-            dragAction: dropActionType.move,
-            renderDepth: 1,
-            noSidebar: true,
-            isContentActive: returnFalse,
-            whenChildContentsActiveChanged: emptyFunction,
-            ScreenToLocalTransform: Transform.Identity,
-            focus: emptyFunction,
-            addDocTab: SchemaTableCell.addFieldDoc,
-            pinToPres: returnZero,
-            Document: DocCast(Document.rootDocument, Document),
-            fieldKey: fieldKey,
-            PanelWidth: columnWidth,
-            PanelHeight: props.rowHeight,
-            rootSelected: props.rootSelected,
-        };
-        const readOnly = getFinfo(fieldKey)?.readOnly ?? false;
-        const cursor = !readOnly ? 'text' : 'default';
-        const pointerEvents = 'all';
-        return { color, textDecoration, fieldProps, cursor, pointerEvents };
-    }
-
-    @computed get editableView() {
-        const { color, textDecoration, fieldProps, pointerEvents } = SchemaColumnHeader.renderProps(this.props); 
-
-        return <EditableView
+    // public static renderProps(props: SchemaColumnHeaderProps) {
+    //     const { columnKeys, columnWidth, isContentActive, Document } = props;
+    //     const fieldKey = columnKeys[props.columnIndex];
+    //     const color = 'black'; // color of text in cells
+    //     const fieldProps: FieldViewProps = {
+    //         childFilters: returnEmptyFilter,
+    //         childFiltersByRanges: returnEmptyFilter,
+    //         docViewPath: returnEmptyDocViewList,
+    //         searchFilterDocs: returnEmptyDoclist,
+    //         styleProvider: DefaultStyleProvider,
+    //         isSelected: returnFalse,
+    //         setHeight: returnFalse,
+    //         select: emptyFunction,
+    //         dragAction: dropActionType.move,
+    //         renderDepth: 1,
+    //         noSidebar: true,
+    //         isContentActive: returnFalse,
+    //         whenChildContentsActiveChanged: emptyFunction,
+    //         ScreenToLocalTransform: Transform.Identity,
+    //         focus: emptyFunction,
+    //         addDocTab: SchemaTableCell.addFieldDoc,
+    //         pinToPres: returnZero,
+    //         Document: DocCast(Document.rootDocument, Document),
+    //         fieldKey: fieldKey,
+    //         PanelWidth: columnWidth,
+    //         PanelHeight: props.rowHeight,
+    //         rootSelected: props.rootSelected,
+    //     };
+    //     const readOnly = getFinfo(fieldKey)?.readOnly ?? false;
+    //     const cursor = !readOnly ? 'text' : 'default';
+    //     const pointerEvents = 'all';
+    //     return { color, fieldProps, cursor, pointerEvents };
+    // }
 
+    // @computed get editableView() {
+    //     const { color, fieldProps, pointerEvents } = SchemaColumnHeader.renderProps(this.props); 
 
-                    ref={r => this.props.autoFocus && r?.setIsFocused(true)}
-                    oneLine={this.props.oneLine}
-                    allowCRs={this.props.allowCRs}
-                    contents={undefined}
-                    fieldContents={fieldProps}
-                    editing={this._editing ? undefined : false}
-                    GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey)).replace(/[";]/g, '')} //TODO: feed this into parser that handles idToDoc
-                    SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
-                        if (shiftDown && enterKey) {
-                            this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value);
-                            this._props.finishEdit?.();
-                            return true;
-                        }
-                        const hasNoLayout =  Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto
-                        const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout);
-                        this._props.finishEdit?.();
-                        return ret;
-                    }, 'edit schema cell')}
-                />
-    }
+    //     return <EditableView
+    //             ref={r => this.props.autoFocus && r?.setIsFocused(true)}
+    //             oneLine={this.props.oneLine}
+    //             allowCRs={this.props.allowCRs}
+    //             contents={undefined}
+    //             fieldContents={fieldProps}
+    //             editing={this._editing ? undefined : false}
+    //             GetValue={() => this.props.cleanupField(Field.toKeyValueString(fieldProps.Document, this.fieldKey, SnappingManager.MetaKey)).replace(/[";]/g, '')} //TODO: feed this into parser that handles idToDoc
+    //             SetValue={undoable((value: string, enterKey?: boolean) => {
+    //                 if (enterKey) this.setColumnValues(this.fieldKey.replace(/^_/, ''), value);
+    //                 this.props.finishEdit?.();
+    //                 return true;
+    //             }, 'edit schema cell')}
+    //         />
+    // }
 
     render() {
         return (
diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx
index 23d934edb..bfca6cad8 100644
--- a/src/client/views/nodes/DocumentIcon.tsx
+++ b/src/client/views/nodes/DocumentIcon.tsx
@@ -47,7 +47,7 @@ export class DocumentIcon extends ObservableReactComponent<DocumentIconProps> {
     }
 }
 
-@observer
+@observer   
 export class DocumentIconContainer extends React.Component {
     public static getTransformer(): Transformer {
         const usedDocuments = new Set<number>();
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 8df28a770..32480447d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1025,6 +1025,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
     public static getViews = (doc?: Doc) => Array.from(doc?.[DocViews] ?? []) as DocumentView[];
     public static getFirstDocumentView: (toFind: Doc) => DocumentView | undefined;
     public static getDocumentView: (target: Doc | undefined, preferredCollection?: DocumentView) => Opt<DocumentView>;
+    public static getDocViewIndex: (target: Doc) => number;
     public static getContextPath: (doc: Opt<Doc>, includeExistingViews?: boolean) => Doc[];
     public static getLightboxDocumentView: (toFind: Doc) => Opt<DocumentView>;
     public static showDocumentView: (targetDocView: DocumentView, options: FocusViewOptions) => Promise<void>;
-- 
cgit v1.2.3-70-g09d2


From 12184969abe9b88f34fd653c423fe0af491155bb Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 13 May 2024 18:46:59 -0400
Subject: console.logs removed

---
 src/client/documents/Documents.ts                                      | 1 -
 src/client/views/collections/collectionSchema/CollectionSchemaView.tsx | 2 --
 2 files changed, 3 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 5e1b173dc..99665c22c 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -87,7 +87,6 @@ class DocInfo extends FInfo {
     constructor(d: string, filterable?: boolean, values?: Doc[]) {
         super(d, true);
         this.values = values;
-        console.log(this.values);
         this.filterable = filterable;
     }
     override searchable = () => false;
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index deeba3c7a..4e4a618bf 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -682,12 +682,10 @@ export class CollectionSchemaView extends CollectionSubView() {
         const draggedDocs = de.complete.docDragData?.draggedDocuments;
         if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) {
             const map = draggedDocs?.map(doc => this.rowIndex(doc));
-            console.log(map);
             this.dataDoc[this.fieldKey ?? 'data'] = new List<Doc>([...this.sortedDocs.docs]);
             this.clearSelection();
             draggedDocs.forEach(doc => {
                 DocumentView.addViewRenderedCb(doc, dv => dv.select(true));
-                console.log(doc.x);
             });
             this._lowestSelectedIndex = Math.min(...(draggedDocs?.map(doc => this.rowIndex(doc)) ?? []));
             return true;
-- 
cgit v1.2.3-70-g09d2


From 5cf0765e934ca183f0431bb3e6c9d57c2f9494f9 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 13 May 2024 18:51:19 -0400
Subject: removed cell tag logic ;(

---
 .../collectionSchema/CollectionSchemaView.tsx      | 70 ----------------------
 1 file changed, 70 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 4e4a618bf..d844fdefc 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -548,8 +548,6 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     selectCell = (doc: Doc, col: number, shiftKey: boolean, ctrlKey: boolean) => {
-        this.populateCellTags();
-        //docs.findIndex(doc);
         if (!shiftKey && !ctrlKey) this.clearSelection();
         !this._selectedCells && (this._selectedCells = []);
         !shiftKey && this._selectedCells && this._selectedCells.push(doc);
@@ -566,10 +564,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         } else this.addDocToSelection(doc, false);
         this._selectedCol = col;
 
-
         if (this._lowestSelectedIndex === -1 || index < this._lowestSelectedIndex) this._lowestSelectedIndex = index;
-
-        // let selectedIndexes: Array<Number> = this._selectedCells.map(doc => this.rowIndex(doc));
     };
 
     @action
@@ -586,71 +581,6 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     sortedSelectedDocs = () => this.sortedDocs.docs.filter(doc => this._selectedDocs.includes(doc));
 
-
-    getCellTag = (doc: Doc, col: number) => {
-        return this._cellTags.get(doc)[col];
-    }
-
-    getCellInfoFromTag = (tag: string): [Doc, string] => {
-        const lettersToNumber = (letters: string) => {
-            let number = 0;
-            let length = letters.length;
-            for (let i = 0; i < length; i++) {
-                number *= 26;
-                number += (letters.charCodeAt(i) - 'A'.charCodeAt(0) + 1);
-            }
-            return number;
-        }
-
-        const colTag = tag.replace(/[^A-Z]/g, '');
-        const col = lettersToNumber(colTag);
-        const key: string = this.columnKeys[col - 1];
-
-        const rowNum = Number(tag.replace(/[^\d]/g, ''));
-        const doc = this.childDocs[rowNum - 1];
-        
-        return [doc, key];
-    }
-
-    populateCellTags = () => {
-        this.childDocs.forEach(doc => this.addTags(doc));
-    }
-
-    addTags = (doc: Doc) => {
-        const row = this.rowIndex(doc) + 1;
-        const tags = [];
-        for (let col = 1; col <= this._colEles.length; ++col){
-            tags.push(this.numToChar(col) + row.toString())
-            }
-        this._cellTags.set(doc, tags)
-    }
-
-    modifyCellTags = (addingColumn: boolean) => {
-        if (addingColumn) {
-            const colTag = this.numToChar(this._colEles.length);
-            this._cellTags.forEach((tags, row) => {
-                const newTag = colTag + this.rowIndex(row);
-                tags.push(newTag);
-            });
-        } else {
-            this._cellTags.forEach(tags => {
-                if (tags.length > 0) {
-                    tags.pop(); 
-                }
-            })
-        }
-    }
-
-    numToChar = (num: number) => {  
-        let result = '';
-        while (num > 0) {
-            let remainder = (num - 1) % 26;
-            result = String.fromCharCode(65 + remainder) + result;
-            num = Math.floor((num - 1) / 26);
-        }
-        return result;
-    }
-
     @computed
     get rowDropIndex() {
         const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseCoordinates.x, this._mouseCoordinates.y)[1];
-- 
cgit v1.2.3-70-g09d2


From 4770a958a7b1003d636a4f9ea2cfdb76558e61b9 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 13 May 2024 23:13:15 -0400
Subject: columnheader editing progress

---
 src/client/views/EditableView.tsx                  |   2 +-
 .../collectionSchema/CollectionSchemaView.tsx      |  11 +-
 .../collectionSchema/SchemaColumnHeader.tsx        | 144 +++++++++++----------
 .../collections/collectionSchema/SchemaRowBox.tsx  |   2 +-
 4 files changed, 88 insertions(+), 71 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 684b948af..05c926399 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -155,7 +155,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
             case 'ArrowDown':
             case 'ArrowLeft':
             case 'ArrowRight':
-                e.stopPropagation();
+                //e.stopPropagation();
                 break;
             case 'Shift':
             case 'Alt':
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index d844fdefc..d74cb56cf 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -275,6 +275,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     changeColumnKey = (index: number, newKey: string, defaultVal?: any) => {
         if (!this.documentKeys.includes(newKey)) {
             this.addNewKey(newKey, defaultVal);
+            console.log("added")
         }
 
         const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it.
@@ -745,15 +746,23 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     setKey = (key: string, defaultVal?: any) => {
+        console.log("setKey called with" + key)
         if (this._makeNewColumn) {
             this.addColumn(key, defaultVal);
+            this._makeNewColumn = false;
         } else {
             this.changeColumnKey(this._columnMenuIndex!, key, defaultVal);
+            console.log("changed")
         }
         this.closeColumnMenu();
     };
 
-    setColumnValues = (key: string, value: string) => {
+    setColumnValue = () => {
+
+    }
+
+    setCellValues = (key: string, value: string) => {
+        console.log("field: " + key + " vale: " + value);
         const selectedDocs: Doc[] = [];
         this.childDocs.forEach(doc => {
             const docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index b498a4850..b74b2ace9 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -8,11 +8,12 @@ import { emptyFunction } from '../../../../Utils';
 import { Colors } from '../../global/globalEnums';
 import './CollectionSchemaView.scss';
 import { EditableView } from '../../EditableView';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider';
 import { FieldViewProps } from '../../nodes/FieldView';
 import { Doc, Field } from '../../../../fields/Doc';
 import { dropActionType } from '../../../util/DropActionTypes';
-import { Transform } from 'prosemirror-transform';
+import { Transform } from '../../../util/Transform';
 import { SchemaTableCell } from './SchemaTableCell';
 import { DocCast } from '../../../../fields/Types';
 import { computedFn } from 'mobx-utils';
@@ -48,110 +49,117 @@ export interface SchemaColumnHeaderProps {
 }
 
 @observer
-export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> {
+export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> {
 
     @observable _editing: boolean = false;
 
     get fieldKey() {
-        return this.props.columnKeys[this.props.columnIndex];
+        return this._props.columnKeys[this._props.columnIndex];
     }
 
-    // getFinfo = computedFn((fieldKey: string) => this.props.schemaView?.fieldInfos.get(fieldKey));
-    // setColumnValues = (field: string, value: string) => this.props.schemaView?.setColumnValues(field, value);
+    getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
+    setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue);}
 
     @action
     sortClicked = (e: React.PointerEvent) => {
         e.stopPropagation();
         e.preventDefault();
-        if (this.props.sortField === this.fieldKey && this.props.sortDesc) {
-            this.props.setSort(undefined);
-        } else if (this.props.sortField === this.fieldKey) {
-            this.props.setSort(this.fieldKey, true);
+        if (this._props.sortField === this.fieldKey && this._props.sortDesc) {
+            this._props.setSort(undefined);
+        } else if (this._props.sortField === this.fieldKey) {
+            this._props.setSort(this.fieldKey, true);
         } else {
-            this.props.setSort(this.fieldKey, false);
+            this._props.setSort(this.fieldKey, false);
         }
     };
 
     @action
     setupDrag = (e: React.PointerEvent) => {
-        this.props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this.props.dragColumn(moveEv, this.props.columnIndex), emptyFunction, emptyFunction);
+        this._props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this._props.dragColumn(moveEv, this._props.columnIndex), emptyFunction, emptyFunction);
     };
 
-    // public static renderProps(props: SchemaColumnHeaderProps) {
-    //     const { columnKeys, columnWidth, isContentActive, Document } = props;
-    //     const fieldKey = columnKeys[props.columnIndex];
-    //     const color = 'black'; // color of text in cells
-    //     const fieldProps: FieldViewProps = {
-    //         childFilters: returnEmptyFilter,
-    //         childFiltersByRanges: returnEmptyFilter,
-    //         docViewPath: returnEmptyDocViewList,
-    //         searchFilterDocs: returnEmptyDoclist,
-    //         styleProvider: DefaultStyleProvider,
-    //         isSelected: returnFalse,
-    //         setHeight: returnFalse,
-    //         select: emptyFunction,
-    //         dragAction: dropActionType.move,
-    //         renderDepth: 1,
-    //         noSidebar: true,
-    //         isContentActive: returnFalse,
-    //         whenChildContentsActiveChanged: emptyFunction,
-    //         ScreenToLocalTransform: Transform.Identity,
-    //         focus: emptyFunction,
-    //         addDocTab: SchemaTableCell.addFieldDoc,
-    //         pinToPres: returnZero,
-    //         Document: DocCast(Document.rootDocument, Document),
-    //         fieldKey: fieldKey,
-    //         PanelWidth: columnWidth,
-    //         PanelHeight: props.rowHeight,
-    //         rootSelected: props.rootSelected,
-    //     };
-    //     const readOnly = getFinfo(fieldKey)?.readOnly ?? false;
-    //     const cursor = !readOnly ? 'text' : 'default';
-    //     const pointerEvents = 'all';
-    //     return { color, fieldProps, cursor, pointerEvents };
-    // }
+    renderProps = (props: SchemaColumnHeaderProps) => {
+        const { columnKeys, columnWidth, Document } = props;
+        const fieldKey = columnKeys[props.columnIndex];
+        const color = 'black'; // color of text in cells
+        const fieldProps: FieldViewProps = {
+            childFilters: returnEmptyFilter,
+            childFiltersByRanges: returnEmptyFilter,
+            docViewPath: returnEmptyDocViewList,
+            searchFilterDocs: returnEmptyDoclist,
+            styleProvider: DefaultStyleProvider,
+            isSelected: returnFalse,
+            setHeight: returnFalse,
+            select: emptyFunction,
+            dragAction: dropActionType.move,
+            renderDepth: 1,
+            noSidebar: true,
+            isContentActive: returnFalse,
+            whenChildContentsActiveChanged: emptyFunction,
+            ScreenToLocalTransform: Transform.Identity,
+            focus: emptyFunction,
+            addDocTab: SchemaTableCell.addFieldDoc,
+            pinToPres: returnZero,
+            Document: DocCast(Document.rootDocument, Document),
+            fieldKey: fieldKey,
+            PanelWidth: columnWidth,
+            PanelHeight: props.rowHeight,
+            rootSelected: props.rootSelected,
+        };
+        const readOnly = this.getFinfo(fieldKey)?.readOnly ?? false;
+        const cursor = !readOnly ? 'text' : 'default';
+        const pointerEvents = 'all';
+        return { color, fieldProps, cursor, pointerEvents };
+    }
+
+    @computed get editableView() {
+        const { color, fieldProps, pointerEvents } = this.renderProps(this._props); 
 
-    // @computed get editableView() {
-    //     const { color, fieldProps, pointerEvents } = SchemaColumnHeader.renderProps(this.props); 
+        return <div className='column-header-edit-wrapper'>
+            <EditableView
+                ref={r => this._props.autoFocus && r?.setIsFocused(true)}
+                oneLine={this._props.oneLine}
+                allowCRs={this._props.allowCRs}
+                contents={undefined}
+                fieldContents={fieldProps}
+                editing={this._editing ? undefined : false}
+                GetValue={() => Field.toKeyValueString(fieldProps.Document, this.fieldKey, SnappingManager.MetaKey).replace(/[";]/g, '')}
+                SetValue={undoable((value: string) => {
+                    this.setColumnValues(value, value);
+                    this._props.finishEdit?.();
+                    return true;
+                }, 'edit column header')}
+            />
+            </div>
+    }
 
-    //     return <EditableView
-    //             ref={r => this.props.autoFocus && r?.setIsFocused(true)}
-    //             oneLine={this.props.oneLine}
-    //             allowCRs={this.props.allowCRs}
-    //             contents={undefined}
-    //             fieldContents={fieldProps}
-    //             editing={this._editing ? undefined : false}
-    //             GetValue={() => this.props.cleanupField(Field.toKeyValueString(fieldProps.Document, this.fieldKey, SnappingManager.MetaKey)).replace(/[";]/g, '')} //TODO: feed this into parser that handles idToDoc
-    //             SetValue={undoable((value: string, enterKey?: boolean) => {
-    //                 if (enterKey) this.setColumnValues(this.fieldKey.replace(/^_/, ''), value);
-    //                 this.props.finishEdit?.();
-    //                 return true;
-    //             }, 'edit schema cell')}
-    //         />
-    // }
+    staticView = () => {
+        return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
+    }
 
     render() {
         return (
             <div
                 className="schema-column-header"
                 style={{
-                    width: this.props.columnWidths[this.props.columnIndex],
+                    width: this._props.columnWidths[this._props.columnIndex],
                 }}
                 onPointerDown={this.setupDrag}
                 ref={col => {
                     if (col) {
-                        this.props.setColRef(this.props.columnIndex, col);
+                        this._props.setColRef(this._props.columnIndex, col);
                     }
                 }}>
-                <div className="schema-column-resizer left" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex)} />
-                <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
+                <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} />
+
+                <div>{this._editing ? this.editableView : this.staticView()}</div>
 
                 <div className="schema-header-menu">
-                    <div className="schema-header-button" onPointerDown={e => this.props.openContextMenu(e.clientX, e.clientY, this.props.columnIndex)}>
+                    <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}>
                         <FontAwesomeIcon icon="ellipsis-h" />
                     </div>
-                    <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this.props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
-                        <FontAwesomeIcon icon="caret-right" style={this.props.sortField === this.fieldKey ? { transform: `rotate(${this.props.sortDesc ? '270deg' : '90deg'})` } : {}} />
+                    <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this._props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
+                        <FontAwesomeIcon icon="caret-right" style={this._props.sortField === this.fieldKey ? { transform: `rotate(${this._props.sortDesc ? '270deg' : '90deg'})` } : {}} />
                     </div>
                 </div>
             </div>
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 3295c9ab1..908939ecc 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -59,7 +59,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     selectCell = (doc: Doc, col: number, shift: boolean, ctrl: boolean) => this.schemaView?.selectCell(doc, col, shift, ctrl);
     deselectCell = () => this.schemaView?.deselectAllCells();
     selectedCells = () => this.schemaView?._selectedDocs;
-    setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false;
+    setColumnValues = (field: any, value: any) => this.schemaView?.setCellValues(field, value) ?? false;
     setSelectedColumnValues = (field: any, value: any) => this.schemaView?.setSelectedColumnValues(field, value) ?? false;
     columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth);
     render() {
-- 
cgit v1.2.3-70-g09d2


From b27056fc67c654dea72338f928cd69026a501c0f Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 14 May 2024 15:58:23 -0400
Subject: editable columnheader progress; still not updating properly on adding
 new col

---
 src/client/views/EditableView.tsx                  | 10 ++++--
 .../collectionSchema/CollectionSchemaView.scss     | 12 +++++++
 .../collectionSchema/CollectionSchemaView.tsx      | 39 ++--------------------
 .../collectionSchema/SchemaColumnHeader.tsx        | 34 ++++++++++++-------
 .../collectionSchema/SchemaTableCell.tsx           |  2 +-
 5 files changed, 45 insertions(+), 52 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 05c926399..1eec11e64 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -54,6 +54,8 @@ export interface EditableProps {
     background?: string | undefined;
     placeholder?: string;
     wrap?: string; // nowrap, pre-wrap, etc
+
+    isColHeader?: boolean;
 }
 
 /**
@@ -135,7 +137,9 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                 if (!e.currentTarget.value) this._props.OnEmpty?.();
                 break;
             case 'Enter':
+                console.log("enter press detected")
                 if (this._props.allowCRs !== true) {
+                    console.log("noCrs??")
                     e.stopPropagation();
                     if (!e.ctrlKey) {
                         this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, true);
@@ -242,9 +246,9 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
             />
         ) : this._props.oneLine !== false && this._props.GetValue()?.toString().indexOf('\n') === -1 ? (
             <input
-                className="editableView-input"
+                className="editableView-input" 
                 ref={r => { this._inputref = r; }} // prettier-ignore
-                style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minWidth: 20, background: this._props.background }}
+                style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minWidth: 20, background: this._props.background}}
                 placeholder={this._props.placeholder}
                 onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)}
                 defaultValue={this._props.GetValue()}
@@ -277,7 +281,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
 
     render() {
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
-        if (this._editing && gval !== undefined) {
+        if ((this._editing && gval !== undefined) || this._props.isColHeader) {
             return this._props.sizeToContent ? (
                 <div style={{ display: 'grid', minWidth: 100 }}>
                     <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{gval}</div>
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 6fb8e40db..269bb4de5 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -162,6 +162,13 @@
         min-width: 20%;
     }
 
+    .schema-column-edit-wrapper {
+        flex-grow: 2;
+        margin: 5px;
+        overflow: hidden;
+        min-width: 20%;
+    }
+
     .schema-header-menu {
         margin: 5px;
     }
@@ -176,6 +183,11 @@
         }
     }
 
+    .editableView-input {
+        border: none;
+        outline: none;
+    }
+
     /*.schema-column-resizer.left {
         min-width: 5px;
         transform: translate(-3px, 0px);
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index d74cb56cf..2d181a772 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -277,6 +277,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             this.addNewKey(newKey, defaultVal);
             console.log("added")
         }
+        console.log("changed " + index)
 
         const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it.
         currKeys[index] = newKey;
@@ -321,39 +322,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         return modField;
     }
 
-    // @action
-    // setupAutoUpdate = (equation: string, doc: Doc) => {
-    //     return autorun(() => {
-    //         const result = this.parsedEquationResult(equation, doc);
-    //         doc[DocData][equation] = result;
-    //     });
-    // }
-
-    // parseEquation = (eq: string): [string, Map<string, Doc>] => {
-    //     const variablePattern = /[a-z]+/gi;
-    //     const tagRefPattern = /{([^}]*)}/g;
-    //     const docTagRefPairs = new Map<string, Doc>();
-    //     let modifiedEq = eq;
-    //     let match;
-    
-    //     while (match = tagRefPattern.exec(eq)) {
-    //         const ref = match[1]; 
-    //         const [doc, key] = this.getCellInfoFromTag(ref);
-    //         docTagRefPairs.set(ref, doc);
-    //         const replacement = `docTagRefPairs.get('${ref}').${key}`;
-    //         modifiedEq = modifiedEq.replace(new RegExp(`{${ref}}`, 'g'), replacement);
-    //     }
-    
-    //     modifiedEq = modifiedEq.replace(variablePattern, (match) => `doc.${match}`);
-    
-    //     return [modifiedEq, docTagRefPairs];
-    // }
-    
-    // parsedEquationResult = (eq: [string, Map<string, Doc>], doc: any): number => {
-    //     const func = new Function('doc', 'docTagRefPairs', 'return ' + eq[0]);
-    //     return func(doc, eq[1]);
-    // }
-
     @undoBatch
     removeColumn = (index: number) => {
         if (this.columnKeys.length === 1) return;
@@ -745,14 +713,13 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    setKey = (key: string, defaultVal?: any) => {
+    setKey = (key: string, defaultVal?: any, index?: number) => {
         console.log("setKey called with" + key)
         if (this._makeNewColumn) {
             this.addColumn(key, defaultVal);
             this._makeNewColumn = false;
         } else {
-            this.changeColumnKey(this._columnMenuIndex!, key, defaultVal);
-            console.log("changed")
+            this.changeColumnKey(this._columnMenuIndex! | index!, key, defaultVal);
         }
         this.closeColumnMenu();
     };
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index b74b2ace9..794d5d8ac 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -53,12 +53,12 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
 
     @observable _editing: boolean = false;
 
-    get fieldKey() {
+    @computed get fieldKey() {
         return this._props.columnKeys[this._props.columnIndex];
     }
 
     getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
-    setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue);}
+    setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
 
     @action
     sortClicked = (e: React.PointerEvent) => {
@@ -108,24 +108,34 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
         };
         const readOnly = this.getFinfo(fieldKey)?.readOnly ?? false;
         const cursor = !readOnly ? 'text' : 'default';
-        const pointerEvents = 'all';
+        const pointerEvents: 'all' | 'none' = 'all';
         return { color, fieldProps, cursor, pointerEvents };
     }
 
     @computed get editableView() {
         const { color, fieldProps, pointerEvents } = this.renderProps(this._props); 
 
-        return <div className='column-header-edit-wrapper'>
+        return <div className='schema-column-edit-wrapper' 
+        style={{
+            color,
+            width: '100%',
+            pointerEvents,
+        }}>
             <EditableView
                 ref={r => this._props.autoFocus && r?.setIsFocused(true)}
                 oneLine={this._props.oneLine}
                 allowCRs={this._props.allowCRs}
                 contents={undefined}
                 fieldContents={fieldProps}
-                editing={this._editing ? undefined : false}
-                GetValue={() => Field.toKeyValueString(fieldProps.Document, this.fieldKey, SnappingManager.MetaKey).replace(/[";]/g, '')}
-                SetValue={undoable((value: string) => {
-                    this.setColumnValues(value, value);
+                editing={undefined}
+                isColHeader={true}
+                GetValue={() => {console.log(this.fieldKey); return this.fieldKey}}
+                SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => {
+                    if (shiftKey && enterKey) {
+                        this.setColumnValues(value, value);
+                        this._props.finishEdit?.();
+                        return true;
+                    }
                     this._props.finishEdit?.();
                     return true;
                 }, 'edit column header')}
@@ -133,9 +143,9 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
             </div>
     }
 
-    staticView = () => {
-        return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
-    }
+    // staticView = () => {
+    //     return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
+    // }
 
     render() {
         return (
@@ -152,7 +162,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 }}>
                 <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} />
 
-                <div>{this._editing ? this.editableView : this.staticView()}</div>
+                <div>{this.editableView}</div>
 
                 <div className="schema-header-menu">
                     <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}>
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 733cf3722..51a92ff35 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -194,7 +194,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 onPointerDown={action(e => {
                     const shift: boolean = e.shiftKey;
                     const ctrl: boolean = e.ctrlKey;
-                    if (this._props.isRowActive?.() !== false) {
+                    if (this._props.isRowActive?.()) {
                         if (selectedCell(this._props) && ctrl) {
                             this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
                             e.stopPropagation();
-- 
cgit v1.2.3-70-g09d2


From 04b650dee835be1a4446a2499b8acd525b92daf9 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 14 May 2024 16:25:36 -0400
Subject: removed logs; added some comments; added safeguard against duplicate
 fields

---
 src/client/views/EditableView.tsx                      |  2 --
 .../collectionSchema/CollectionSchemaView.tsx          | 18 ++++++++----------
 .../collectionSchema/SchemaColumnHeader.tsx            | 12 +++++-------
 3 files changed, 13 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 1eec11e64..011b6c77a 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -137,9 +137,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                 if (!e.currentTarget.value) this._props.OnEmpty?.();
                 break;
             case 'Enter':
-                console.log("enter press detected")
                 if (this._props.allowCRs !== true) {
-                    console.log("noCrs??")
                     e.stopPropagation();
                     if (!e.ctrlKey) {
                         this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, true);
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 2d181a772..3d7c7882e 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -275,9 +275,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     changeColumnKey = (index: number, newKey: string, defaultVal?: any) => {
         if (!this.documentKeys.includes(newKey)) {
             this.addNewKey(newKey, defaultVal);
-            console.log("added")
         }
-        console.log("changed " + index)
 
         const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it.
         currKeys[index] = newKey;
@@ -308,6 +306,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         });
     }
 
+    // parses a field from the "idToDoc(####)" format to DocumentId (d#) format for readability
     cleanupComputedField = (field: string) => {
         const idPattern = /idToDoc\((.*?)\)/g;
         let modField = field.slice();
@@ -403,7 +402,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     findColDropIndex = (mouseX: number) => {
-        let xOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0,0)[0] + CollectionSchemaView._rowMenuWidth;
+        let xOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0,0)[0] + CollectionSchemaView._rowMenuWidth; 
         let index: number | undefined;
         this.displayColumnWidths.reduce((total, curr, i) => {
             if (total <= mouseX && total + curr >= mouseX) {
@@ -466,7 +465,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             const edgeStyle = i === index ? `solid 2px ${Colors.MEDIUM_BLUE}` : '';
             const cellEles = [
                 colRef,
-                ...this.childDocs //
+                ...this.childDocs 
                     .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc))
                     .map(doc => this._rowEles.get(doc).children[1].children[i]),
             ];
@@ -714,7 +713,11 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     setKey = (key: string, defaultVal?: any, index?: number) => {
-        console.log("setKey called with" + key)
+        if (this.columnKeys.includes(key)){
+            this._newFieldWarning = 'Field already exists';
+            return;
+        }
+
         if (this._makeNewColumn) {
             this.addColumn(key, defaultVal);
             this._makeNewColumn = false;
@@ -724,12 +727,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         this.closeColumnMenu();
     };
 
-    setColumnValue = () => {
-
-    }
-
     setCellValues = (key: string, value: string) => {
-        console.log("field: " + key + " vale: " + value);
         const selectedDocs: Doc[] = [];
         this.childDocs.forEach(doc => {
             const docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 794d5d8ac..58ac4e45d 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -25,8 +25,6 @@ import { FInfo } from '../../../documents/Documents';
 export interface SchemaColumnHeaderProps {
     Document: Doc;
     autoFocus?: boolean;
-    oneLine?: boolean; // whether all input should fit on one line vs allowing textare multiline inputs
-    allowCRs?: boolean; // allow carriage returns in text input (othewrise CR ends the edit)
     columnKeys: string[];
     columnWidths: number[];
     columnIndex: number;
@@ -123,20 +121,20 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
         }}>
             <EditableView
                 ref={r => this._props.autoFocus && r?.setIsFocused(true)}
-                oneLine={this._props.oneLine}
-                allowCRs={this._props.allowCRs}
+                oneLine={true}
+                allowCRs={false}
                 contents={undefined}
                 fieldContents={fieldProps}
                 editing={undefined}
-                isColHeader={true}
+                isColHeader={true} // tells the EditableView to display the fieldKey itself, and not its value
                 GetValue={() => {console.log(this.fieldKey); return this.fieldKey}}
                 SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => {
-                    if (shiftKey && enterKey) {
+                    if (shiftKey && enterKey) { // if shift & enter, set value of each cell in column
                         this.setColumnValues(value, value);
                         this._props.finishEdit?.();
                         return true;
                     }
-                    this._props.finishEdit?.();
+                    this._props.finishEdit?.(); // else save new value to header field
                     return true;
                 }, 'edit column header')}
             />
-- 
cgit v1.2.3-70-g09d2


From 52b8410f14c4e522b0d7bbdbfb64d8fdbd5c3023 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 15 May 2024 22:26:42 -0400
Subject: columheader editing working!! (kinda hacky using readonly input
 revisit)

---
 src/client/views/EditableView.scss                 |  3 ++
 src/client/views/EditableView.tsx                  | 44 +++++++++++++------
 .../collectionSchema/CollectionSchemaView.scss     |  2 +-
 .../collectionSchema/CollectionSchemaView.tsx      | 49 +++++++++-------------
 .../collectionSchema/SchemaColumnHeader.tsx        | 22 ++++++----
 5 files changed, 70 insertions(+), 50 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.scss b/src/client/views/EditableView.scss
index 27b260450..e492068c8 100644
--- a/src/client/views/EditableView.scss
+++ b/src/client/views/EditableView.scss
@@ -5,6 +5,7 @@
     hyphens: auto;
     overflow: hidden;
     height: 100%;
+    width: 100%;
     min-width: 20;
     text-overflow: ellipsis;
 }
@@ -33,6 +34,8 @@
     pointer-events: all;
 }
 
+
+
 .editableView-input:focus {
     border: none;
     outline: none;
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 011b6c77a..4c4ef227a 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { action, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import * as Autosuggest from 'react-autosuggest';
@@ -55,7 +55,7 @@ export interface EditableProps {
     placeholder?: string;
     wrap?: string; // nowrap, pre-wrap, etc
 
-    isColHeader?: boolean;
+    showKeyNotVal?: boolean;
 }
 
 /**
@@ -277,9 +277,35 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         );
     }
 
+    display = () => {
+        let toDisplay;
+        const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
+        if (this._props.showKeyNotVal){
+            toDisplay = <input className="editableView-input"
+            value={this._props.GetValue()}
+            readOnly
+            style={{ display: this._props.display, overflow: 'auto', pointerEvents: 'none', fontSize: this._props.fontSize, width: '100%', margin: 0, background: this._props.background}}
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+        />
+        } else {
+            toDisplay = (<span
+            style={{
+                fontStyle: this._props.fontStyle,
+                fontSize: this._props.fontSize,
+            }}>
+            {
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : ''
+            }
+        </span>)
+        }
+
+        return toDisplay;
+    }
+
     render() {
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
-        if ((this._editing && gval !== undefined) || this._props.isColHeader) {
+        if ((this._editing && gval !== undefined)) {
             return this._props.sizeToContent ? (
                 <div style={{ display: 'grid', minWidth: 100 }}>
                     <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{gval}</div>
@@ -300,21 +326,13 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                     minHeight: '10px',
                     whiteSpace: this._props.oneLine ? 'nowrap' : 'pre-line',
                     height: this._props.height,
+                    width: '100%',
                     maxHeight: this._props.maxHeight,
                     fontStyle: this._props.fontStyle,
                     fontSize: this._props.fontSize,
                 }}
                 onClick={this.onClick}>
-                <span
-                    style={{
-                        fontStyle: this._props.fontStyle,
-                        fontSize: this._props.fontSize,
-                    }}>
-                    {
-                        // eslint-disable-next-line react/jsx-props-no-spreading
-                        this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : ''
-                    }
-                </span>
+                {this.display()}
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 269bb4de5..fd2e882d9 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -159,7 +159,7 @@
         flex-grow: 2;
         margin: 5px;
         overflow: hidden;
-        min-width: 20%;
+        min-width: 100%;
     }
 
     .schema-column-edit-wrapper {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 3d7c7882e..db23f874e 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -331,7 +331,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         const currKeys = this.columnKeys.slice();
         currKeys.splice(index, 1);
-        this.layoutDoc.schema_columnKeys = new List<string>(currKeys);
+        this.layoutDoc.schema_columnKeys = new List<string>(currKeys); 
     };
 
     @action
@@ -677,19 +677,6 @@ export class CollectionSchemaView extends CollectionSubView() {
                         })}
                     />
                 );
-            case ColumnType.Equation:
-                return (
-                    <input
-                        type="text"
-                        name=""
-                        id=""
-                        value={this._newFieldDefault ?? ''}
-                        onPointerDown={e => e.stopPropagation()}
-                        onChange={action((e: any) => {
-                            this._newFieldDefault = e.target.value;
-                        })}
-                    />
-                );
             default:
                 return undefined;
         }
@@ -714,7 +701,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     setKey = (key: string, defaultVal?: any, index?: number) => {
         if (this.columnKeys.includes(key)){
-            this._newFieldWarning = 'Field already exists';
             return;
         }
 
@@ -798,12 +784,29 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._filterColumnIndex = undefined;
     };
 
-    openContextMenu = (x: number, y: number, index: number) => {
+    openContextMenu = (x: number, y: number, index: number, fieldType: ColumnType) => {
         this.closeColumnMenu();
         this.closeFilterMenu();
+
+        let toDisplay: string = '';
+        switch (fieldType) {
+            case ColumnType.Number:
+                toDisplay = 'number';
+                break;
+            case ColumnType.String:
+                toDisplay = 'string';
+                break;
+            case ColumnType.Boolean:
+                toDisplay = 'boolean';
+                break;
+            default:
+                toDisplay = 'string';
+                break;
+        }
+
         ContextMenu.Instance.clearItems();
         ContextMenu.Instance.addItem({
-            description: 'Change field',
+            description: `Field type: ${toDisplay}`,
             event: () => this.openColumnMenu(index, false),
             icon: 'pencil-alt',
         });
@@ -886,18 +889,6 @@ export class CollectionSchemaView extends CollectionSubView() {
                     />
                     string
                 </div>
-                <div className="schema-key-type-option">
-                    <input
-                        type="radio"
-                        name="newFieldType"
-                        checked={this._newFieldType === ColumnType.Equation}
-                        onChange={action(() => {
-                            this._newFieldType = ColumnType.Equation;
-                            this._newFieldDefault = '';
-                        })}
-                    />
-                    equation
-                </div>
                 <div className="schema-key-default-val">value: {this.fieldDefaultInput}</div>
                 <div className="schema-key-warning">{this._newFieldWarning}</div>
                 <div
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 58ac4e45d..f404eb444 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -21,6 +21,7 @@ import { CollectionSchemaView } from './CollectionSchemaView';
 import { SnappingManager } from '../../../util/SnappingManager';
 import { undoable } from '../../../util/UndoManager';
 import { FInfo } from '../../../documents/Documents';
+import { ColumnType } from '../../../../fields/SchemaHeaderField';
 
 export interface SchemaColumnHeaderProps {
     Document: Doc;
@@ -38,7 +39,7 @@ export interface SchemaColumnHeaderProps {
     rowHeight: () => number;
     resizeColumn: (e: any, index: number) => void;
     dragColumn: (e: any, index: number) => boolean;
-    openContextMenu: (x: number, y: number, index: number) => void;
+    openContextMenu: (x: number, y: number, index: number, fieldType: ColumnType) => void;
     setColRef: (index: number, ref: HTMLDivElement) => void;
     rootSelected?: () => boolean;
     columnWidth: () => number;
@@ -49,7 +50,8 @@ export interface SchemaColumnHeaderProps {
 @observer
 export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> {
 
-    @observable _editing: boolean = false;
+    @observable _editing: boolean | undefined = false;
+    @observable _fieldType: ColumnType = ColumnType.String;
 
     @computed get fieldKey() {
         return this._props.columnKeys[this._props.columnIndex];
@@ -125,9 +127,9 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 allowCRs={false}
                 contents={undefined}
                 fieldContents={fieldProps}
-                editing={undefined}
-                isColHeader={true} // tells the EditableView to display the fieldKey itself, and not its value
-                GetValue={() => {console.log(this.fieldKey); return this.fieldKey}}
+                editing={undefined}  
+                showKeyNotVal={true} // tells the EditableView to display the fieldKey itself, and not its value
+                GetValue={() => this.fieldKey}
                 SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => {
                     if (shiftKey && enterKey) { // if shift & enter, set value of each cell in column
                         this.setColumnValues(value, value);
@@ -142,7 +144,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     }
 
     // staticView = () => {
-    //     return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
+    //      return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
     // }
 
     render() {
@@ -153,6 +155,12 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                     width: this._props.columnWidths[this._props.columnIndex],
                 }}
                 onPointerDown={this.setupDrag}
+                // onPointerEnter={() => {
+                //     console.log(true);
+                //     this._editing = true}}
+                // onPointerLeave={() => {
+                //     console.log(false);
+                //     this._editing = false}}
                 ref={col => {
                     if (col) {
                         this._props.setColRef(this._props.columnIndex, col);
@@ -163,7 +171,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 <div>{this.editableView}</div>
 
                 <div className="schema-header-menu">
-                    <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}>
+                    <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex, this._fieldType)}>
                         <FontAwesomeIcon icon="ellipsis-h" />
                     </div>
                     <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this._props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
-- 
cgit v1.2.3-70-g09d2


From 5b6e6b27a191a880fd454ebbc5ed3816cd5cd59c Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 3 Jun 2024 10:23:38 -0400
Subject: new columns display blank

---
 src/client/views/EditableView.tsx                  |  2 +
 .../collectionSchema/CollectionSchemaView.scss     | 10 +++--
 .../collectionSchema/CollectionSchemaView.tsx      | 48 ++++++----------------
 .../collectionSchema/SchemaColumnHeader.tsx        | 34 ++++++++-------
 .../collectionSchema/SchemaTableCell.tsx           |  4 +-
 5 files changed, 43 insertions(+), 55 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 4c4ef227a..5b691c507 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -56,6 +56,7 @@ export interface EditableProps {
     wrap?: string; // nowrap, pre-wrap, etc
 
     showKeyNotVal?: boolean;
+    updateAlt?: (newAlt: string) => void;
 }
 
 /**
@@ -182,6 +183,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
 
     @action
     onClick = (e: React.MouseEvent) => {
+        if (this._props.GetValue() == 'None' && this._props.updateAlt) this._props.updateAlt('.');
         if (this._props.editing !== false) {
             e.nativeEvent.stopPropagation();
             if (this._ref.current && this._props.showMenuOnLoad) {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index fd2e882d9..1dbe75a8d 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -50,13 +50,15 @@
 .schema-column-menu,
 .schema-filter-menu {
     background: $light-gray;
-    position: relative;
-    min-width: 200px;
-    max-width: 400px;
+    position: absolute;
+    min-width: 150px;
+    max-width: 300px;
+    max-height: 300px;
     display: flex;
+    overflow: hidden;
     flex-direction: column;
     align-items: flex-start;
-    z-index: 1;
+    z-index: 5;
 
     .schema-key-search-input {
         width: calc(100% - 20px);
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index db23f874e..c673f0e56 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -32,6 +32,7 @@ import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
 import { ActionButton } from '@adobe/react-spectrum';
+import { CollectionMasonryViewFieldRow } from '../CollectionMasonryViewFieldRow';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -273,9 +274,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @undoBatch
     changeColumnKey = (index: number, newKey: string, defaultVal?: any) => {
-        if (!this.documentKeys.includes(newKey)) {
-            this.addNewKey(newKey, defaultVal);
-        }
+        if (!this.documentKeys.includes(newKey)) this.addNewKey(newKey, defaultVal);
 
         const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it.
         currKeys[index] = newKey;
@@ -283,10 +282,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @undoBatch
-    addColumn = (key: string, defaultVal?: any) => {
-        if (!this.documentKeys.includes(key)) {
-            this.addNewKey(key, defaultVal);
-        }
+    addColumn = (key?: string, defaultVal?: any) => {
+        if (key && !this.documentKeys.includes(key)) this.addNewKey(key, defaultVal);
         
         const newColWidth = this.tableWidth / (this.storedColumnWidths.length + 1);
         const currWidths = this.storedColumnWidths.slice();
@@ -295,7 +292,9 @@ export class CollectionSchemaView extends CollectionSubView() {
         this.layoutDoc.schema_columnWidths = new List<number>(currWidths.map(w => (w / newDesiredTableWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth)));
 
         const currKeys = this.columnKeys.slice();
+        if (!key) key = 'EmptyColumnKey' + Math.floor(Math.random() * 1000000000000000).toString();
         currKeys.splice(0, 0, key);
+        this.changeColumnKey(0, 'EmptyColumnKey' + Math.floor(Math.random() * 1000000000000000).toString());
         this.layoutDoc.schema_columnKeys = new List<string>(currKeys);
     };
 
@@ -332,6 +331,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const currKeys = this.columnKeys.slice();
         currKeys.splice(index, 1);
         this.layoutDoc.schema_columnKeys = new List<string>(currKeys); 
+        console.log(...currKeys);
     };
 
     @action
@@ -784,29 +784,13 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._filterColumnIndex = undefined;
     };
 
-    openContextMenu = (x: number, y: number, index: number, fieldType: ColumnType) => {
+    openContextMenu = (x: number, y: number, index: number) => {
         this.closeColumnMenu();
         this.closeFilterMenu();
 
-        let toDisplay: string = '';
-        switch (fieldType) {
-            case ColumnType.Number:
-                toDisplay = 'number';
-                break;
-            case ColumnType.String:
-                toDisplay = 'string';
-                break;
-            case ColumnType.Boolean:
-                toDisplay = 'boolean';
-                break;
-            default:
-                toDisplay = 'string';
-                break;
-        }
-
         ContextMenu.Instance.clearItems();
         ContextMenu.Instance.addItem({
-            description: `Field type: ${toDisplay}`,
+            description: `Change field`,
             event: () => this.openColumnMenu(index, false),
             icon: 'pencil-alt',
         });
@@ -923,14 +907,6 @@ export class CollectionSchemaView extends CollectionSubView() {
                     onClick={() => this.toggleMenuKeyFilter()}>
                         {this._colKeysFiltered ? "All keys" : "Active keys only"}
                 </button> 
-                <div
-                    className="schema-column-menu-button"
-                    onPointerDown={action((e: any) => {
-                        e.stopPropagation();
-                        this._makeNewField = true;
-                    })}>
-                    + new field
-                </div>
                 <div
                     className="schema-key-list"
                     ref={r => {
@@ -1077,7 +1053,9 @@ export class CollectionSchemaView extends CollectionSubView() {
     _oldWheel: any;
     render() {
         return (
-            <div className="collectionSchemaView" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)} onPointerMove={e => this.onPointerMove(e)}>
+            <div className="collectionSchemaView" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} 
+            onDrop={this.onExternalDrop.bind(this)} 
+            onPointerMove={e => this.onPointerMove(e)} >
                 <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }} />
                 <div
                     className="schema-table"
@@ -1094,7 +1072,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                                 placement="right"
                                 background={SettingsManager.userBackgroundColor}
                                 color={SettingsManager.userColor}
-                                toggle={<FontAwesomeIcon onPointerDown={() => this.openColumnMenu(-1, true)} icon="plus" />}
+                                toggle={<FontAwesomeIcon onPointerDown={() => this.addColumn()} icon="plus" />} //here
                                 trigger={PopupTrigger.CLICK}
                                 type={Type.TERT}
                                 isOpen={this._columnMenuIndex !== -1 ? false : undefined}
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index f404eb444..6e2f85cc0 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -39,7 +39,7 @@ export interface SchemaColumnHeaderProps {
     rowHeight: () => number;
     resizeColumn: (e: any, index: number) => void;
     dragColumn: (e: any, index: number) => boolean;
-    openContextMenu: (x: number, y: number, index: number, fieldType: ColumnType) => void;
+    openContextMenu: (x: number, y: number, index: number) => void;
     setColRef: (index: number, ref: HTMLDivElement) => void;
     rootSelected?: () => boolean;
     columnWidth: () => number;
@@ -50,15 +50,21 @@ export interface SchemaColumnHeaderProps {
 @observer
 export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> {
 
-    @observable _editing: boolean | undefined = false;
-    @observable _fieldType: ColumnType = ColumnType.String;
+    @observable _altTitle: string | undefined = undefined;
 
     @computed get fieldKey() {
         return this._props.columnKeys[this._props.columnIndex];
     }
 
+    isDefaultTitle = (key: string) => {
+        const defaultPattern = /EmptyColumnKey/;
+        let isDefault: boolean = (defaultPattern.exec(key) != null);
+        return isDefault;
+    }
+
     getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
     setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
+    @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;}
 
     @action
     sortClicked = (e: React.PointerEvent) => {
@@ -128,15 +134,21 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 contents={undefined}
                 fieldContents={fieldProps}
                 editing={undefined}  
+                updateAlt={this.updateAlt} // alternate title to display
                 showKeyNotVal={true} // tells the EditableView to display the fieldKey itself, and not its value
-                GetValue={() => this.fieldKey}
+                GetValue={() => {
+                    if (this.isDefaultTitle(this.fieldKey)) return '';
+                    else if (this._altTitle) return this._altTitle;
+                    else return this.fieldKey;
+                }}
                 SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => {
                     if (shiftKey && enterKey) { // if shift & enter, set value of each cell in column
-                        this.setColumnValues(value, value);
+                        this.setColumnValues(value, '');
+                        this._altTitle = undefined;
                         this._props.finishEdit?.();
                         return true;
-                    }
-                    this._props.finishEdit?.(); // else save new value to header field
+                    } else if (enterKey) this.updateAlt(value);
+                    this._props.finishEdit?.(); 
                     return true;
                 }, 'edit column header')}
             />
@@ -155,12 +167,6 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                     width: this._props.columnWidths[this._props.columnIndex],
                 }}
                 onPointerDown={this.setupDrag}
-                // onPointerEnter={() => {
-                //     console.log(true);
-                //     this._editing = true}}
-                // onPointerLeave={() => {
-                //     console.log(false);
-                //     this._editing = false}}
                 ref={col => {
                     if (col) {
                         this._props.setColRef(this._props.columnIndex, col);
@@ -171,7 +177,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 <div>{this.editableView}</div>
 
                 <div className="schema-header-menu">
-                    <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex, this._fieldType)}>
+                    <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}>
                         <FontAwesomeIcon icon="ellipsis-h" />
                     </div>
                     <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this._props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 51a92ff35..4531f30a8 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -142,7 +142,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     contents={undefined}
                     fieldContents={fieldProps}
                     editing={selectedCell(this._props) ? undefined : false}
-                    GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey)).replace(/[";]/g, '')} //TODO: feed this into parser that handles idToDoc
+                    GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))} //TODO: feed this into parser that handles idToDoc
                     SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
                         if (shiftDown && enterKey) {
                             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value);
@@ -150,7 +150,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                             return true;
                         }
                         const hasNoLayout =  Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto
-                        const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout);
+                        const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, true);
                         this._props.finishEdit?.();
                         return ret;
                     }, 'edit schema cell')}
-- 
cgit v1.2.3-70-g09d2


From 1be63695875c9242fba43d580465e8765cf3991d Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 3 Jun 2024 13:33:25 -0400
Subject: merge prep

---
 .../collectionSchema/CollectionSchemaView.tsx      | 34 +++++-----------------
 .../collections/collectionSchema/SchemaRowBox.tsx  |  2 --
 .../collectionSchema/SchemaTableCell.tsx           |  1 -
 src/client/views/global/globalScripts.ts           |  2 ++
 4 files changed, 10 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index c673f0e56..ef1819120 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -700,42 +700,24 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     setKey = (key: string, defaultVal?: any, index?: number) => {
-        if (this.columnKeys.includes(key)){
-            return;
-        }
-
+        if (this.columnKeys.includes(key)) return;
+    
         if (this._makeNewColumn) {
             this.addColumn(key, defaultVal);
             this._makeNewColumn = false;
-        } else {
-            this.changeColumnKey(this._columnMenuIndex! | index!, key, defaultVal);
-        }
+        } else this.changeColumnKey(this._columnMenuIndex! | index!, key, defaultVal);
+        
         this.closeColumnMenu();
     };
 
     setCellValues = (key: string, value: string) => {
         const selectedDocs: Doc[] = [];
         this.childDocs.forEach(doc => {
-            const docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
-            if (docIsSelected) {
-                selectedDocs.push(doc);
-            }
-        });
-        if (selectedDocs.length === 1) {
-            this.childDocs.forEach(doc => Doc.SetField(doc, key, value));
-        } else {
-            selectedDocs.forEach(doc => Doc.SetField(doc, key, value));
-        }
-        return true;
-    };
-
-    setSelectedColumnValues = (key: string, value: string) => {
-        this.childDocs.forEach(doc => {
-            const docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
-            if (docIsSelected) {
-                Doc.SetField(doc, key, value);
-            }
+            const isSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
+            isSelected && selectedDocs.push(doc); 
         });
+        if (selectedDocs.length === 1) this.childDocs.forEach(doc => Doc.SetField(doc, key, value)); // if only one cell selected, fill all
+        else selectedDocs.forEach(doc => Doc.SetField(doc, key, value)); // else only fill selected cells
         return true;
     };
 
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 908939ecc..da272cd18 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -60,7 +60,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     deselectCell = () => this.schemaView?.deselectAllCells();
     selectedCells = () => this.schemaView?._selectedDocs;
     setColumnValues = (field: any, value: any) => this.schemaView?.setCellValues(field, value) ?? false;
-    setSelectedColumnValues = (field: any, value: any) => this.schemaView?.setSelectedColumnValues(field, value) ?? false;
     columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth);
     render() {
         return (
@@ -147,7 +146,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                             selectedCells={this.selectedCells}
                             selectedCol={this.selectedCol}
                             setColumnValues={this.setColumnValues}
-                            setSelectedColumnValues={this.setSelectedColumnValues}
                             oneLine={BoolCast(this.schemaDoc?._singleLine)}
                             menuTarget={this.schemaView.MenuTarget}
                             cleanupField={this.cleanupField}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 4531f30a8..e6660f379 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -48,7 +48,6 @@ export interface SchemaTableCellProps {
     isRowActive: () => boolean | undefined;
     getFinfo: (fieldKey: string) => FInfo | undefined;
     setColumnValues: (field: string, value: string) => boolean;
-    setSelectedColumnValues: (field: string, value: string) => boolean;
     oneLine?: boolean; // whether all input should fit on one line vs allowing textare multiline inputs
     allowCRs?: boolean; // allow carriage returns in text input (othewrise CR ends the edit)
     finishEdit?: () => void; // notify container that edit is over (eg. to hide view in DashFieldView)
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index c595681b7..8e5c39ddf 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -66,6 +66,8 @@ ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: b
             } else {
                 const dataKey = Doc.LayoutFieldKey(dv.Document);
                 const alternate = (dv.layoutDoc[dataKey + '_usePath'] ? '_' + dv.layoutDoc[dataKey + '_usePath'] : '').replace(':hover', '');
+                console.log('color: ' + dv.dataDoc[fieldKey + alternate] + ' to set to: ' + color)
+                dv.layoutDoc[fieldKey + alternate] = undefined;
                 dv.dataDoc[fieldKey + alternate] = color;
             }
         });
-- 
cgit v1.2.3-70-g09d2


From d215534d6f0d66db9d5bf15f9fefef3fe5398024 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 4 Jun 2024 13:01:47 -0400
Subject: c

---
 .../collectionSchema/CollectionSchemaView.scss     |  5 ++
 .../collectionSchema/CollectionSchemaView.tsx      |  9 +--
 .../collectionSchema/SchemaColumnHeader.tsx        | 66 ++++++++++++----------
 .../collectionSchema/SchemaTableCell.tsx           |  4 +-
 4 files changed, 45 insertions(+), 39 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 1dbe75a8d..3d89a479a 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -301,3 +301,8 @@
         width: 12px;
     }
 }
+
+.header-dropdown-container {
+    height: 0px;
+    width: 60px;
+}
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index ef1819120..92cc58f54 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -33,6 +33,7 @@ import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
 import { ActionButton } from '@adobe/react-spectrum';
 import { CollectionMasonryViewFieldRow } from '../CollectionMasonryViewFieldRow';
+import { Func } from 'mocha';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -706,7 +707,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             this.addColumn(key, defaultVal);
             this._makeNewColumn = false;
         } else this.changeColumnKey(this._columnMenuIndex! | index!, key, defaultVal);
-        
+
         this.closeColumnMenu();
     };
 
@@ -884,11 +885,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     @computed get keysDropdown() {
         return (
             <div className="schema-key-search">
-                <button 
-                    className="schema-column-menu-button" 
-                    onClick={() => this.toggleMenuKeyFilter()}>
-                        {this._colKeysFiltered ? "All keys" : "Active keys only"}
-                </button> 
                 <div
                     className="schema-key-list"
                     ref={r => {
@@ -1065,6 +1061,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                             <SchemaColumnHeader
                                 // eslint-disable-next-line react/no-array-index-key
                                 //cleanupField={this.cleanupComputedField}
+                                keysDropdown={(this.keysDropdown)}
                                 schemaView={this}
                                 columnWidth={() => CollectionSchemaView._minColWidth} //TODO: update
                                 Document={this.Document}
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 6e2f85cc0..4f9d53d18 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -32,6 +32,7 @@ export interface SchemaColumnHeaderProps {
     sortField: string;
     sortDesc: boolean;
     schemaView: CollectionSchemaView;
+    keysDropdown: React.JSX.Element;
     //cleanupField: (s: string) => string;
     isContentActive: (outsideReaction?: boolean | undefined) => boolean | undefined;
     setSort: (field: string | undefined, desc?: boolean) => void;
@@ -51,17 +52,12 @@ export interface SchemaColumnHeaderProps {
 export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> {
 
     @observable _altTitle: string | undefined = undefined;
+    @observable _displayKeysDropdown: boolean = false;
 
     @computed get fieldKey() {
         return this._props.columnKeys[this._props.columnIndex];
     }
-
-    isDefaultTitle = (key: string) => {
-        const defaultPattern = /EmptyColumnKey/;
-        let isDefault: boolean = (defaultPattern.exec(key) != null);
-        return isDefault;
-    }
-
+    
     getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
     setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
     @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;}
@@ -79,6 +75,11 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
         }
     };
 
+    openKeyDropdown = () => {
+        this._props.schemaView.openColumnMenu(this._props.columnIndex, false)
+        this._displayKeysDropdown = true;
+    }
+
     @action
     setupDrag = (e: React.PointerEvent) => {
         this._props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this._props.dragColumn(moveEv, this._props.columnIndex), emptyFunction, emptyFunction);
@@ -121,7 +122,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     @computed get editableView() {
         const { color, fieldProps, pointerEvents } = this.renderProps(this._props); 
 
-        return <div className='schema-column-edit-wrapper' 
+        return <div className='schema-column-edit-wrapper' onPointerUp={() => this._props.schemaView.openColumnMenu(this._props.columnIndex, false)}
         style={{
             color,
             width: '100%',
@@ -148,6 +149,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                         this._props.finishEdit?.();
                         return true;
                     } else if (enterKey) this.updateAlt(value);
+                    
                     this._props.finishEdit?.(); 
                     return true;
                 }, 'edit column header')}
@@ -155,36 +157,38 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
             </div>
     }
 
-    // staticView = () => {
-    //      return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
-    // }
+    isDefaultTitle = (key: string) => {
+        const defaultPattern = /EmptyColumnKey/;
+        let isDefault: boolean = (defaultPattern.exec(key) != null);
+        return isDefault;
+    }
 
     render() {
         return (
-            <div
-                className="schema-column-header"
-                style={{
-                    width: this._props.columnWidths[this._props.columnIndex],
-                }}
-                onPointerDown={this.setupDrag}
-                ref={col => {
-                    if (col) {
-                        this._props.setColRef(this._props.columnIndex, col);
-                    }
-                }}>
-                <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} />
+                <div
+                    className="schema-column-header"
+                    style={{
+                        width: this._props.columnWidths[this._props.columnIndex],
+                    }}
+                    onPointerDown={this.setupDrag}
+                    ref={col => {
+                        if (col) {
+                            this._props.setColRef(this._props.columnIndex, col);
+                        }
+                    }}>
+                    <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} />
 
-                <div>{this.editableView}</div>
+                    <div>{this.editableView}</div>
 
-                <div className="schema-header-menu">
-                    <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}>
-                        <FontAwesomeIcon icon="ellipsis-h" />
-                    </div>
-                    <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this._props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
-                        <FontAwesomeIcon icon="caret-right" style={this._props.sortField === this.fieldKey ? { transform: `rotate(${this._props.sortDesc ? '270deg' : '90deg'})` } : {}} />
+                    <div className="schema-header-menu">
+                        <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}>
+                            <FontAwesomeIcon icon="ellipsis-h" />
+                        </div>
+                        <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this._props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
+                            <FontAwesomeIcon icon="caret-right" style={this._props.sortField === this.fieldKey ? { transform: `rotate(${this._props.sortDesc ? '270deg' : '90deg'})` } : {}} />
+                        </div>
                     </div>
                 </div>
-            </div>
         );
     }
 }
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index e6660f379..c3a58b505 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -30,7 +30,7 @@ import { Colors } from '../../global/globalEnums';
 import { DocumentView } from '../../nodes/DocumentView';
 import { FieldViewProps } from '../../nodes/FieldView';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
-import { FInfotoColType } from './CollectionSchemaView';
+import { CollectionSchemaView, FInfotoColType } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
 
 export interface SchemaTableCellProps {
@@ -149,7 +149,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                             return true;
                         }
                         const hasNoLayout =  Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto
-                        const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, true);
+                        const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout);
                         this._props.finishEdit?.();
                         return ret;
                     }, 'edit schema cell')}
-- 
cgit v1.2.3-70-g09d2


From 22343f6ceb3175ff1794c4ff0ecda0471a7594af Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 4 Jun 2024 14:17:50 -0400
Subject: key search on update

---
 src/client/views/EditableView.tsx                             |  3 ++-
 .../collections/collectionSchema/CollectionSchemaView.tsx     |  7 ++-----
 .../views/collections/collectionSchema/SchemaColumnHeader.tsx | 11 +++++++----
 3 files changed, 11 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 5b691c507..c79cabd6a 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -57,6 +57,7 @@ export interface EditableProps {
 
     showKeyNotVal?: boolean;
     updateAlt?: (newAlt: string) => void;
+    updateSearch?: (value: string) => void;
 }
 
 /**
@@ -122,6 +123,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         } else if (!this._overlayDisposer) {
             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
         }
+        this._props.updateSearch && this._props.updateSearch(targVal);
     };
 
     @action
@@ -183,7 +185,6 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
 
     @action
     onClick = (e: React.MouseEvent) => {
-        if (this._props.GetValue() == 'None' && this._props.updateAlt) this._props.updateAlt('.');
         if (this._props.editing !== false) {
             e.nativeEvent.stopPropagation();
             if (this._ref.current && this._props.showMenuOnLoad) {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 92cc58f54..f5422bce1 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -791,9 +791,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    updateKeySearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this._menuValue = e.target.value;
-        this._menuKeys = this.documentKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase()));
+    updateKeySearch = (val: string) => {
+        this._menuKeys = this.documentKeys.filter(value => value.toLowerCase().includes(val.toLowerCase()));
     };
 
     getFieldFilters = (field: string) => StrListCast(this.Document._childFilters).filter(filter => filter.split(Doc.FilterSep)[0] === field);
@@ -920,7 +919,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         const x = this._columnMenuIndex! === -1 ? 0 : this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth);
         return (
             <div className="schema-column-menu" style={{ left: x, minWidth: CollectionSchemaView._minColWidth }}>
-                <input className="schema-key-search-input" type="text" onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} />
                 {this._makeNewField ? this.newFieldMenu : this.keysDropdown}
             </div>
         );
@@ -929,7 +927,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     get renderKeysMenu() {
         return (
             <div className="schema-column-menu" style={{ left: 0, minWidth: CollectionSchemaView._minColWidth }}>
-                <input className="schema-key-search-input" type="text" onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} />
                 {this._makeNewField ? this.newFieldMenu : this.keysDropdown}
             </div>
         );
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 4f9d53d18..32abc1780 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -61,6 +61,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
     setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
     @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;}
+    @action updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)}
 
     @action
     sortClicked = (e: React.PointerEvent) => {
@@ -76,8 +77,10 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     };
 
     openKeyDropdown = () => {
-        this._props.schemaView.openColumnMenu(this._props.columnIndex, false)
-        this._displayKeysDropdown = true;
+        if (this.isDefaultTitle(this.fieldKey)){
+            this._props.schemaView.openColumnMenu(this._props.columnIndex, false)
+            this._displayKeysDropdown = true;
+        }
     }
 
     @action
@@ -122,7 +125,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     @computed get editableView() {
         const { color, fieldProps, pointerEvents } = this.renderProps(this._props); 
 
-        return <div className='schema-column-edit-wrapper' onPointerUp={() => this._props.schemaView.openColumnMenu(this._props.columnIndex, false)}
+        return <div className='schema-column-edit-wrapper' onPointerUp={() => this.openKeyDropdown()}
         style={{
             color,
             width: '100%',
@@ -136,6 +139,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 fieldContents={fieldProps}
                 editing={undefined}  
                 updateAlt={this.updateAlt} // alternate title to display
+                updateSearch={this.updateKeyDropdown}
                 showKeyNotVal={true} // tells the EditableView to display the fieldKey itself, and not its value
                 GetValue={() => {
                     if (this.isDefaultTitle(this.fieldKey)) return '';
@@ -149,7 +153,6 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                         this._props.finishEdit?.();
                         return true;
                     } else if (enterKey) this.updateAlt(value);
-                    
                     this._props.finishEdit?.(); 
                     return true;
                 }, 'edit column header')}
-- 
cgit v1.2.3-70-g09d2


From 641cd55d41460cf24f07959c8f94e2723c18ddeb Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 5 Jun 2024 01:42:26 -0400
Subject: adding collection content to schema started

---
 .../collectionSchema/CollectionSchemaView.tsx            | 16 +++++++++++-----
 .../collections/collectionSchema/SchemaColumnHeader.tsx  |  2 +-
 2 files changed, 12 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index f5422bce1..6b97cb97c 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -92,6 +92,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _colBeingDragged: boolean = false;
     @observable _colKeysFiltered: boolean = false;
     @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>();
+    @observable _lentDocs: Doc[] = [];
 
     // target HTMLelement portal for showing a popup menu to edit cell values.
     public get MenuTarget() {
@@ -1020,17 +1021,22 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     rowHeightFunc = () => (BoolCast(this.layoutDoc._schema_singleLine) ? CollectionSchemaView._rowSingleLineHeight : CollectionSchemaView._rowHeight);
-    sortedDocsFunc = () => this.sortedDocs;
     isContentActive = () => this._props.isSelected() || this._props.isContentActive();
     screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0);
     previewWidthFunc = () => this.previewWidth;
     onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
+    displayedDocsFunc = () => {
+        let docs: Doc[] = this._lentDocs.slice();
+        docs = docs.concat(this.sortedDocs.docs);
+        return docs;
+    }
     _oldWheel: any;
     render() {
         return (
             <div className="collectionSchemaView" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} 
             onDrop={this.onExternalDrop.bind(this)} 
-            onPointerMove={e => this.onPointerMove(e)} >
+            onPointerMove={e => this.onPointerMove(e)} 
+            onPointerDown={() => this.closeColumnMenu()}>
                 <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }} />
                 <div
                     className="schema-table"
@@ -1085,7 +1091,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                         // eslint-disable-next-line no-use-before-define
                         <CollectionSchemaViewDocs
                             schema={this}
-                            childDocs={this.sortedDocsFunc}
+                            childDocs={this.displayedDocsFunc}
                             rowHeight={this.rowHeightFunc}
                             setRef={(ref: HTMLDivElement | null) => {
                                 this._tableContentRef = ref;
@@ -1208,7 +1214,7 @@ class CollectionSchemaViewDoc extends ObservableReactComponent<CollectionSchemaV
 interface CollectionSchemaViewDocsProps {
     schema: CollectionSchemaView;
     setRef: (ref: HTMLDivElement | null) => void;
-    childDocs: () => { docs: Doc[] };
+    childDocs: () => Doc[];
     rowHeight: () => number;
 }
 
@@ -1217,7 +1223,7 @@ class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsP
     render() {
         return (
             <div className="schema-table-content" ref={this.props.setRef} style={{ height: `calc(100% - ${CollectionSchemaView._newNodeInputHeight + this.props.rowHeight()}px)` }}>
-                {this.props.childDocs().docs.map((doc: Doc, index: number) => (
+                {this.props.childDocs().map((doc: Doc, index: number) => (
                     <div key={doc[Id]} className="schema-row-wrapper" style={{ height: this.props.rowHeight() }}>
                         <CollectionSchemaViewDoc doc={doc} schema={this.props.schema} index={index} rowHeight={this.props.rowHeight} />
                     </div>
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 32abc1780..03cf64fc8 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -147,7 +147,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                     else return this.fieldKey;
                 }}
                 SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => {
-                    if (shiftKey && enterKey) { // if shift & enter, set value of each cell in column
+                    if (enterKey) { // if shift & enter, set value of each cell in column
                         this.setColumnValues(value, '');
                         this._altTitle = undefined;
                         this._props.finishEdit?.();
-- 
cgit v1.2.3-70-g09d2


From fed19c3b7e14bc00216b5f91363451a0e9bed93d Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 5 Jun 2024 13:42:04 -0400
Subject: row menu rework, icons mostly good

---
 .../collectionSchema/CollectionSchemaView.tsx      | 34 ++++++----
 .../collections/collectionSchema/SchemaRowBox.tsx  | 76 ++++++++++------------
 2 files changed, 58 insertions(+), 52 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 6b97cb97c..30daa793a 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -7,11 +7,11 @@ import * as React from 'react';
 import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
 import { Doc, DocListCast, Field, FieldType, IdToDoc, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
-import { DocData } from '../../../../fields/DocSymbols';
+import { AclPrivate, DocData } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
-import { BoolCast, NumCast, StrCast } from '../../../../fields/Types';
+import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types';
 import { DocUtils } from '../../../documents/DocUtils';
 import { Docs, DocumentOptions, FInfo } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
@@ -34,6 +34,9 @@ import { SchemaRowBox } from './SchemaRowBox';
 import { ActionButton } from '@adobe/react-spectrum';
 import { CollectionMasonryViewFieldRow } from '../CollectionMasonryViewFieldRow';
 import { Func } from 'mocha';
+import { CollectionView } from '../CollectionView';
+import { listSpec } from '../../../../fields/Schema';
+import { GetEffectiveAcl } from '../../../../fields/util';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -635,6 +638,19 @@ export class CollectionSchemaView extends CollectionSubView() {
         return undefined;
     };
 
+    addDocsFromChildCollection = (collection: CollectionSchemaView) => {
+        const childDocs = collection.childDocs.slice();
+        console.log(childDocs)
+        childDocs.forEach((doc: Doc) => {!this.childDocs.includes(doc) && this._lentDocs.push(doc)});
+    }
+
+    removeChildCollectionDocs = (collection: CollectionSchemaView) => {
+        const children = collection.childDocs.slice();
+        this._lentDocs.forEach(element => {
+            
+        });
+    }
+
     @computed get fieldDefaultInput() {
         switch (this._newFieldType) {
             case ColumnType.Number:
@@ -746,9 +762,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._columnMenuIndex = index;
         this._menuValue = '';
         this._menuKeys = this.documentKeys;
-        this._makeNewField = false;
         this._newFieldWarning = '';
-        this._makeNewField = false;
         this._makeNewColumn = newCol;
     };
 
@@ -920,7 +934,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const x = this._columnMenuIndex! === -1 ? 0 : this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth);
         return (
             <div className="schema-column-menu" style={{ left: x, minWidth: CollectionSchemaView._minColWidth }}>
-                {this._makeNewField ? this.newFieldMenu : this.keysDropdown}
+                {this.keysDropdown}
             </div>
         );
     }
@@ -928,7 +942,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     get renderKeysMenu() {
         return (
             <div className="schema-column-menu" style={{ left: 0, minWidth: CollectionSchemaView._minColWidth }}>
-                {this._makeNewField ? this.newFieldMenu : this.keysDropdown}
+                {this.keysDropdown}
             </div>
         );
     }
@@ -954,7 +968,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             }
             return (
                 <div key={key} className="schema-filter-option">
-                    <input //
+                    <input 
                         type="checkbox"
                         onPointerDown={e => e.stopPropagation()}
                         onClick={e => e.stopPropagation()}
@@ -1025,11 +1039,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0);
     previewWidthFunc = () => this.previewWidth;
     onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
-    displayedDocsFunc = () => {
-        let docs: Doc[] = this._lentDocs.slice();
-        docs = docs.concat(this.sortedDocs.docs);
-        return docs;
-    }
+    displayedDocsFunc = () => this._lentDocs.slice().concat(this.sortedDocs.docs);
     _oldWheel: any;
     render() {
         return (
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index da272cd18..8e4161413 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -1,9 +1,9 @@
 import { IconButton, Size } from 'browndash-components';
-import { computed, makeObservable } from 'mobx';
+import { computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
 import * as React from 'react';
-import { CgClose, CgLock, CgLockUnlock } from 'react-icons/cg';
+import { CgClose, CgLock, CgLockUnlock, CgMenu } from 'react-icons/cg';
 import { FaExternalLinkAlt } from 'react-icons/fa';
 import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
@@ -18,6 +18,8 @@ import { OpenWhere } from '../../nodes/OpenWhere';
 import { CollectionSchemaView } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
 import { SchemaTableCell } from './SchemaTableCell';
+import { ContextMenu } from '../../ContextMenu';
+import { CollectionFreeFormView } from '../collectionFreeForm';
 
 interface SchemaRowBoxProps extends FieldViewProps {
     rowIndex: number;
@@ -28,6 +30,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         return FieldView.LayoutString(SchemaRowBox, fieldKey).replace('fieldKey', `rowIndex={${rowIndex}} fieldKey`);
     }
     private _ref: HTMLDivElement | null = null;
+    @observable _childrenAddedToSchema: boolean = false;
 
     constructor(props: SchemaRowBoxProps) {
         super(props);
@@ -52,6 +55,33 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         this._props.setContentViewBox?.(this);
     }
 
+    openContextMenu = (x: number, y: number) => {
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({
+            description: `Close doc`,
+            event: () => this._props.removeDocument?.(this.Document),
+            icon: 'minus',
+        });
+        ContextMenu.Instance.addItem({
+            description: this.Document._lockedPosition ? 'Unlock doc interactions' : 'Lock doc interactions',
+            event: () => Doc.toggleLockedPosition(this.Document),
+            icon: this.Document._lockedPosition ? 'lock-open' : 'lock',
+        });
+        ContextMenu.Instance.addItem({
+            description: 'Open preview',
+            event: () => this._props.addDocTab(this.Document, OpenWhere.addRight),
+            icon: 'magnifying-glass',
+        });
+        if (this.Document['type'] === 'collection') {
+                ContextMenu.Instance.addItem({
+                description: 'Add children to schema',
+                event: () => this.schemaView.addDocsFromChildCollection(this.Document as unknown as CollectionSchemaView),
+                icon: 'plus',
+            });
+        }
+        ContextMenu.Instance.displayMenu(x, y, undefined, false);
+    }
+
     cleanupField = (field: string) => this.schemaView.cleanupComputedField(field)
     setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY);
     selectedCol = () => this.schemaView._selectedCol;
@@ -78,42 +108,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                         pointerEvents: !this._props.isContentActive() ? 'none' : undefined,
                     }}>
                     <IconButton
-                        tooltip="close"
-                        icon={<CgClose size="16px" />}
-                        size={Size.XSMALL}
-                        onPointerDown={e =>
-                            setupMoveUpEvents(
-                                this,
-                                e,
-                                returnFalse,
-                                emptyFunction,
-                                undoable(clickEv => {
-                                    clickEv.stopPropagation();
-                                    this._props.removeDocument?.(this.Document);
-                                }, 'Delete Row')
-                            )
-                        }
-                    />
-                    <IconButton
-                        tooltip="whether document interactions are enabled"
-                        icon={this.Document._lockedPosition ? <CgLockUnlock size="12px" /> : <CgLock size="12px" />}
-                        size={Size.XSMALL}
-                        onPointerDown={e =>
-                            setupMoveUpEvents(
-                                this,
-                                e,
-                                returnFalse,
-                                emptyFunction,
-                                undoable(clickEv => {
-                                    clickEv.stopPropagation();
-                                    Doc.toggleLockedPosition(this.Document);
-                                }, 'toggle document lock')
-                            )
-                        }
-                    />
-                    <IconButton
-                        tooltip="open preview"
-                        icon={<FaExternalLinkAlt />}
+                        tooltip="Open actions menu"
+                        icon={ <CgMenu size="12px" /> }
                         size={Size.XSMALL}
                         onPointerDown={e =>
                             setupMoveUpEvents(
@@ -123,8 +119,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                                 emptyFunction,
                                 undoable(clickEv => {
                                     clickEv.stopPropagation();
-                                    this._props.addDocTab(this.Document, OpenWhere.addRight);
-                                }, 'Open schema Doc preview')
+                                    this.openContextMenu(e.clientX, e.clientY)
+                                }, 'open actions menu')
                             )
                         }
                     />
-- 
cgit v1.2.3-70-g09d2


From 9d0576378416b2e4ce7c5eb3c958ec6a650e9f90 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 5 Jun 2024 23:15:35 -0400
Subject: c

---
 src/client/documents/Documents.ts                  |  1 +
 .../collectionSchema/CollectionSchemaView.tsx      | 26 +++++++++++-----------
 .../collections/collectionSchema/SchemaRowBox.tsx  | 10 ++++++---
 3 files changed, 21 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index c34a833f8..365af66b7 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -227,6 +227,7 @@ export class DocumentOptions {
     _header_pointerEvents?: PEVt = new PEInfo('types of events the header of a custom text document can consume');
     _lockedPosition?: BOOLt = new BoolInfo("lock the x,y coordinates of the document so that it can't be dragged");
     _lockedTransform?: BOOLt = new BoolInfo('lock the freeform_panx,freeform_pany and scale parameters of the document so that it be panned/zoomed');
+    _childrenSharedWithSchema?: BOOLt = new BoolInfo("whether this document's children are displayed in its parent schema view");
 
     dataViz_title?: string;
     dataViz_line?: string;
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 30daa793a..39bde7d37 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -147,7 +147,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     @computed get rowHeights() {
-        return this.childDocs.map(() => this.rowHeightFunc());
+        return this.childDocs.concat(this._lentDocs).map(() => this.rowHeightFunc());
     }
 
     @computed get displayColumnWidths() {
@@ -584,7 +584,8 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         const draggedDocs = de.complete.docDragData?.draggedDocuments;
         if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) {
-            const map = draggedDocs?.map(doc => this.rowIndex(doc));
+            const sortedDocs = this.sortedDocs.docs.slice();
+const       filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs.includes(doc));
             this.dataDoc[this.fieldKey ?? 'data'] = new List<Doc>([...this.sortedDocs.docs]);
             this.clearSelection();
             draggedDocs.forEach(doc => {
@@ -638,17 +639,16 @@ export class CollectionSchemaView extends CollectionSubView() {
         return undefined;
     };
 
-    addDocsFromChildCollection = (collection: CollectionSchemaView) => {
-        const childDocs = collection.childDocs.slice();
-        console.log(childDocs)
-        childDocs.forEach((doc: Doc) => {!this.childDocs.includes(doc) && this._lentDocs.push(doc)});
+    addDocsFromChildCollection = (collection: Doc) => {
+        const childDocs = DocListCast(collection[Doc.LayoutFieldKey(collection)]);
+        childDocs.forEach((doc: Doc) => {!this.displayedDocsFunc().includes(doc) && this._lentDocs.push(doc)});
     }
 
-    removeChildCollectionDocs = (collection: CollectionSchemaView) => {
-        const children = collection.childDocs.slice();
-        this._lentDocs.forEach(element => {
-            
-        });
+    removeChildCollectionDocs = (collection: Doc) => {
+        const children = DocListCast(collection[Doc.LayoutFieldKey(collection)]);
+        console.log('before: ' + this._lentDocs)
+        this._lentDocs.filter((doc: Doc) => !children.includes(doc));
+        console.log('after: ' + this._lentDocs)
     }
 
     @computed get fieldDefaultInput() {
@@ -1016,7 +1016,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : [];
         const field = StrCast(this.layoutDoc.sortField);
         const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort
-        const staticDocs = this.childDocs.filter(d => !draggedDocs.includes(d));
+        const staticDocs = this.childDocs.filter(d => !draggedDocs.includes(d)).concat(this._lentDocs.filter(d => !draggedDocs.includes(d)));
         const docs = !field
             ? staticDocs
             : [...staticDocs].sort((docA, docB) => {
@@ -1039,7 +1039,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0);
     previewWidthFunc = () => this.previewWidth;
     onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
-    displayedDocsFunc = () => this._lentDocs.slice().concat(this.sortedDocs.docs);
+    displayedDocsFunc = () => this.sortedDocs.docs;
     _oldWheel: any;
     render() {
         return (
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 8e4161413..8ac2c0314 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -74,9 +74,13 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         });
         if (this.Document['type'] === 'collection') {
                 ContextMenu.Instance.addItem({
-                description: 'Add children to schema',
-                event: () => this.schemaView.addDocsFromChildCollection(this.Document as unknown as CollectionSchemaView),
-                icon: 'plus',
+                description: this.Document._childrenSharedWithSchema ? 'Remove children from schema' : 'Add children to schema',
+                event: () => {
+                    this.Document._childrenSharedWithSchema = !this.Document._childrenSharedWithSchema; 
+                    this.Document._childrenSharedWithSchema ? 
+                    this.schemaView.addDocsFromChildCollection(this.Document) : this.schemaView.removeChildCollectionDocs(this.Document);
+                },
+                icon: this.Document._childrenSharedWithSchema ? 'minus' : 'plus',
             });
         }
         ContextMenu.Instance.displayMenu(x, y, undefined, false);
-- 
cgit v1.2.3-70-g09d2


From a9ec444d00a02a5e04f3c022fd4d0bea08efe196 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 7 Jun 2024 02:36:18 -0400
Subject: lots of UI improvements

---
 src/client/views/EditableView.tsx                  | 16 +++++++------
 .../collectionSchema/CollectionSchemaView.scss     |  4 ----
 .../collectionSchema/CollectionSchemaView.tsx      |  2 ++
 .../collectionSchema/SchemaColumnHeader.tsx        | 19 ++++++++-------
 .../collections/collectionSchema/SchemaRowBox.tsx  |  3 ++-
 .../collectionSchema/SchemaTableCell.tsx           | 27 ++++++++++++++++++----
 6 files changed, 46 insertions(+), 25 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index c79cabd6a..5b690bf33 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -55,7 +55,7 @@ export interface EditableProps {
     placeholder?: string;
     wrap?: string; // nowrap, pre-wrap, etc
 
-    showKeyNotVal?: boolean;
+    schemaHeader?: boolean;
     updateAlt?: (newAlt: string) => void;
     updateSearch?: (value: string) => void;
 }
@@ -77,6 +77,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         super(props);
         makeObservable(this);
         this._editing = !!this._props.editing;
+        if (this._props.schemaHeader) this._editing = true;
     }
 
     componentDidMount(): void {
@@ -184,9 +185,9 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     };
 
     @action
-    onClick = (e: React.MouseEvent) => {
+    onClick = (e?: React.MouseEvent) => {
         if (this._props.editing !== false) {
-            e.nativeEvent.stopPropagation();
+            e?.nativeEvent.stopPropagation();
             if (this._ref.current && this._props.showMenuOnLoad) {
                 this._props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y);
             } else {
@@ -280,12 +281,13 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         );
     }
 
-    display = () => {
+    staticDisplay = () => {
         let toDisplay;
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
-        if (this._props.showKeyNotVal){
+        if (this._props.schemaHeader){
             toDisplay = <input className="editableView-input"
-            value={this._props.GetValue()}
+            value={gval}
+            placeholder='Add key'
             readOnly
             style={{ display: this._props.display, overflow: 'auto', pointerEvents: 'none', fontSize: this._props.fontSize, width: '100%', margin: 0, background: this._props.background}}
             // eslint-disable-next-line jsx-a11y/no-autofocus
@@ -335,7 +337,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                     fontSize: this._props.fontSize,
                 }}
                 onClick={this.onClick}>
-                {this.display()}
+                {this.staticDisplay()}
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 3d89a479a..ceffc7e44 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -302,7 +302,3 @@
     }
 }
 
-.header-dropdown-container {
-    height: 0px;
-    width: 60px;
-}
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 39bde7d37..ec1341b14 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -758,6 +758,8 @@ const       filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs.
 
     @action
     openColumnMenu = (index: number, newCol: boolean) => {
+        this.closeFilterMenu();
+        
         this._makeNewColumn = false;
         this._columnMenuIndex = index;
         this._menuValue = '';
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 03cf64fc8..bda9fc9b7 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -57,6 +57,11 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     @computed get fieldKey() {
         return this._props.columnKeys[this._props.columnIndex];
     }
+
+    constructor(props: SchemaColumnHeaderProps){
+        super(props);
+        this._props.schemaView.openColumnMenu(0, false)
+    }
     
     getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
     setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
@@ -77,10 +82,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     };
 
     openKeyDropdown = () => {
-        if (this.isDefaultTitle(this.fieldKey)){
-            this._props.schemaView.openColumnMenu(this._props.columnIndex, false)
-            this._displayKeysDropdown = true;
-        }
+        this._props.schemaView.openColumnMenu(this._props.columnIndex, false)
     }
 
     @action
@@ -125,7 +127,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     @computed get editableView() {
         const { color, fieldProps, pointerEvents } = this.renderProps(this._props); 
 
-        return <div className='schema-column-edit-wrapper' onPointerUp={() => this.openKeyDropdown()}
+        return <div className='schema-column-edit-wrapper' onPointerUp={() => {SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown()}}
         style={{
             color,
             width: '100%',
@@ -138,11 +140,12 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 contents={undefined}
                 fieldContents={fieldProps}
                 editing={undefined}  
+                placeholder={'Add key'}
                 updateAlt={this.updateAlt} // alternate title to display
                 updateSearch={this.updateKeyDropdown}
-                showKeyNotVal={true} // tells the EditableView to display the fieldKey itself, and not its value
+                schemaHeader={true} 
                 GetValue={() => {
-                    if (this.isDefaultTitle(this.fieldKey)) return '';
+                    if (SchemaColumnHeader.isDefaultField(this.fieldKey)) return '';
                     else if (this._altTitle) return this._altTitle;
                     else return this.fieldKey;
                 }}
@@ -160,7 +163,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
             </div>
     }
 
-    isDefaultTitle = (key: string) => {
+    public static isDefaultField = (key: string) => {
         const defaultPattern = /EmptyColumnKey/;
         let isDefault: boolean = (defaultPattern.exec(key) != null);
         return isDefault;
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 8ac2c0314..8cac302ce 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -113,7 +113,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                     }}>
                     <IconButton
                         tooltip="Open actions menu"
-                        icon={ <CgMenu size="12px" /> }
+                        icon={ <CgMenu size="16px" /> }
                         size={Size.XSMALL}
                         onPointerDown={e =>
                             setupMoveUpEvents(
@@ -133,6 +133,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                     {this.schemaView?.columnKeys?.map((key, index) => (
                         <SchemaTableCell
                             key={key}
+                            rowSelected={this._props.isSelected}
                             Document={this.Document}
                             col={index}
                             fieldKey={key}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index c3a58b505..dc060218c 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -32,6 +32,7 @@ import { FieldViewProps } from '../../nodes/FieldView';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { CollectionSchemaView, FInfotoColType } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
+import { SchemaColumnHeader } from './SchemaColumnHeader';
 
 export interface SchemaTableCellProps {
     Document: Doc;
@@ -57,12 +58,13 @@ export interface SchemaTableCellProps {
     autoFocus?: boolean; // whether to set focus on creation, othwerise wait for a click
     rootSelected?: () => boolean;
     cleanupField: (field: string) => string;
+    rowSelected: () => boolean;
 }
 
 function selectedCell(props: SchemaTableCellProps) {
     return (
         props.isRowActive() &&
-        props.selectedCol() === props.col && //
+        props.selectedCol() === props.col && 
         props.selectedCells()?.filter(d => d === props.Document)?.length
     );
 }
@@ -74,6 +76,10 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         makeObservable(this);
     }
 
+    get defaultKey(){
+        return SchemaColumnHeader.isDefaultField(this._props.fieldKey)
+    }
+
     static addFieldDoc = (docs: Doc | Doc[] /* , where: OpenWhere */) => {
         DocumentView.FocusOrOpen(toList(docs)[0]);
         return true;
@@ -89,9 +95,8 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
             protoCount++;
             doc = DocCast(doc.proto);
         }
-        const parenCount = Math.max(0, protoCount - 1);
         const color = protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; // color of text in cells
-        const textDecoration = color !== 'black' && parenCount ? 'underline' : '';
+        const textDecoration = '';
         const fieldProps: FieldViewProps = {
             childFilters: returnEmptyFilter,
             childFiltersByRanges: returnEmptyFilter,
@@ -185,6 +190,14 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         }
     }
 
+    get backgroundColor(){
+        if (this.defaultKey){
+            if (this._props.rowSelected()) return '#B0D1E7'
+            else return '#F5F5F5'
+        }   
+        return ''
+    }
+
     render() {
         return (
             <div
@@ -200,8 +213,12 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                         } else !selectedCell(this._props) && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
                     }
                 })}
-                style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}>
-                {this.content}
+                style={{ padding: this._props.padding, 
+                maxWidth: this._props.maxWidth?.(), 
+                width: this._props.columnWidth() || undefined, 
+                border: selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined,
+                backgroundColor: this.backgroundColor}}>
+                {this.defaultKey ? '' : this.content}
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From c8dc7104f8a4923bcfc70dcc5ff5f492666487bd Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 7 Jun 2024 02:56:22 -0400
Subject: add col button tooltip + row menu icon change

---
 .../collectionSchema/CollectionSchemaView.tsx      | 30 ++++++++++++++--------
 .../collections/collectionSchema/SchemaRowBox.tsx  |  4 ++-
 2 files changed, 22 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index ec1341b14..03e7ed5f3 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Popup, PopupTrigger, Type } from 'browndash-components';
+import { IconButton, Popup, PopupTrigger, Size, Type } from 'browndash-components';
 import { ObservableMap, action, autorun, computed, makeObservable, observable, observe, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -759,7 +759,7 @@ const       filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs.
     @action
     openColumnMenu = (index: number, newCol: boolean) => {
         this.closeFilterMenu();
-        
+
         this._makeNewColumn = false;
         this._columnMenuIndex = index;
         this._menuValue = '';
@@ -1061,15 +1061,23 @@ const       filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs.
                     }}>
                     <div className="schema-header-row" style={{ height: this.rowHeightFunc() }}>
                         <div className="row-menu" style={{ width: CollectionSchemaView._rowMenuWidth }}>
-                            <Popup
-                                placement="right"
-                                background={SettingsManager.userBackgroundColor}
-                                color={SettingsManager.userColor}
-                                toggle={<FontAwesomeIcon onPointerDown={() => this.addColumn()} icon="plus" />} //here
-                                trigger={PopupTrigger.CLICK}
-                                type={Type.TERT}
-                                isOpen={this._columnMenuIndex !== -1 ? false : undefined}
-                                popup={this.renderKeysMenu}
+                            <IconButton
+                            tooltip="Add a new key"
+                            icon={ <FontAwesomeIcon icon="plus" size='lg'/>}
+                            size={Size.XSMALL}
+                            color={'black'}
+                            onPointerDown={e =>
+                                setupMoveUpEvents(
+                                    this,
+                                    e,
+                                    returnFalse,
+                                    emptyFunction,
+                                    undoable(clickEv => {
+                                        clickEv.stopPropagation();
+                                        this.addColumn()
+                                    }, 'add key to schema')
+                                )
+                            }
                             />
                         </div>
                         {this.columnKeys.map((key, index) => (
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 8cac302ce..099670022 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -20,6 +20,7 @@ import './CollectionSchemaView.scss';
 import { SchemaTableCell } from './SchemaTableCell';
 import { ContextMenu } from '../../ContextMenu';
 import { CollectionFreeFormView } from '../collectionFreeForm';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface SchemaRowBoxProps extends FieldViewProps {
     rowIndex: number;
@@ -113,8 +114,9 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                     }}>
                     <IconButton
                         tooltip="Open actions menu"
-                        icon={ <CgMenu size="16px" /> }
+                        icon={ <FontAwesomeIcon icon="list" size='lg'/>}
                         size={Size.XSMALL}
+                        color={'black'}
                         onPointerDown={e =>
                             setupMoveUpEvents(
                                 this,
-- 
cgit v1.2.3-70-g09d2


From 97977e7156eb852c20422fa995bbf96529dfb4e5 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 7 Jun 2024 19:36:59 -0400
Subject: sort overhaul for columnheader menu cleanup (sort is now a single
 action, not a persistent toggle; more like google sheets now)

---
 src/client/views/EditableView.scss                 |   3 +-
 src/client/views/EditableView.tsx                  |   5 +-
 src/client/views/MainView.tsx                      |   3 +
 .../collectionSchema/CollectionSchemaView.tsx      | 106 +++++++++++----------
 .../collectionSchema/SchemaColumnHeader.tsx        |  16 ----
 .../collections/collectionSchema/SchemaRowBox.tsx  |   7 +-
 6 files changed, 69 insertions(+), 71 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.scss b/src/client/views/EditableView.scss
index e492068c8..d2f11f5e1 100644
--- a/src/client/views/EditableView.scss
+++ b/src/client/views/EditableView.scss
@@ -34,9 +34,8 @@
     pointer-events: all;
 }
 
-
-
 .editableView-input:focus {
     border: none;
     outline: none;
 }
+
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 5b690bf33..1652e6cd7 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -10,6 +10,7 @@ import { DocumentIconContainer } from './nodes/DocumentIcon';
 import { FieldView, FieldViewProps } from './nodes/FieldView';
 import { ObservableReactComponent } from './ObservableReactComponent';
 import { OverlayView } from './OverlayView';
+import { Padding } from 'browndash-components';
 
 export interface EditableProps {
     /**
@@ -293,10 +294,10 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
             // eslint-disable-next-line jsx-a11y/no-autofocus
         />
         } else {
-            toDisplay = (<span
+            toDisplay = (<span className='editableView-static'
             style={{
                 fontStyle: this._props.fontStyle,
-                fontSize: this._props.fontSize,
+                fontSize: this._props.fontSize
             }}>
             {
                 // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 31d88fb87..5fe9332f4 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -278,6 +278,9 @@ export class MainView extends ObservableReactComponent<{}> {
 
         library.add(
             ...[
+                fa.faSort,
+                fa.faArrowUpZA,
+                fa.faArrowDownAZ,
                 fa.faExclamationCircle,
                 fa.faEdit,
                 fa.faArrowDownShortWide,
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 03e7ed5f3..a2f88eb80 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -37,6 +37,7 @@ import { Func } from 'mocha';
 import { CollectionView } from '../CollectionView';
 import { listSpec } from '../../../../fields/Schema';
 import { GetEffectiveAcl } from '../../../../fields/util';
+import { ContextMenuProps } from '../../ContextMenuItem';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -96,6 +97,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _colKeysFiltered: boolean = false;
     @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>();
     @observable _lentDocs: Doc[] = [];
+    @observable _docs: Doc[] = this.childDocs;
 
     // target HTMLelement portal for showing a popup menu to edit cell values.
     public get MenuTarget() {
@@ -195,7 +197,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     // ViewBoxInterface overrides
     override isUnstyledView = returnTrue; // used by style provider : turns off  opacity, animation effects, scaling
 
-    rowIndex = (doc: Doc) => this.sortedDocs.docs.indexOf(doc);
+    rowIndex = (doc: Doc) => this.displayedDocs.docs.indexOf(doc);
 
     @action
     onKeyDown = (e: KeyboardEvent) => {
@@ -205,9 +207,9 @@ export class CollectionSchemaView extends CollectionSubView() {
                     {
                         const lastDoc = this._selectedDocs.lastElement();
                         const lastIndex = this.rowIndex(lastDoc);
-                        const curDoc = this.sortedDocs.docs[lastIndex];
+                        const curDoc = this.displayedDocs.docs[lastIndex];
                         if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) {
-                            const newDoc = this.sortedDocs.docs[lastIndex + 1];
+                            const newDoc = this.displayedDocs.docs[lastIndex + 1];
                             if (this._selectedDocs.includes(newDoc)) {
                                 DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc));
                                 this.deselectCell(curDoc);
@@ -224,9 +226,9 @@ export class CollectionSchemaView extends CollectionSubView() {
                     {
                         const firstDoc = this._selectedDocs.lastElement();
                         const firstIndex = this.rowIndex(firstDoc);
-                        const curDoc = this.sortedDocs.docs[firstIndex];
+                        const curDoc = this.displayedDocs.docs[firstIndex];
                         if (firstIndex > 0 && firstIndex < this.childDocs.length) {
-                            const newDoc = this.sortedDocs.docs[firstIndex - 1];
+                            const newDoc = this.displayedDocs.docs[firstIndex - 1];
                             if (this._selectedDocs.includes(newDoc)) {
                                 DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc));
                                 this.deselectCell(curDoc);
@@ -269,12 +271,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     changeSelectedCellColumn = () => {};
 
-    @undoBatch
-    setColumnSort = (field: string | undefined, desc: boolean = false) => {
-        this.layoutDoc.sortField = field;
-        this.layoutDoc.sortDesc = desc;
-    };
-
     addRow = (doc: Doc | Doc[]) => this.addDocument(doc);
 
     @undoBatch
@@ -512,7 +508,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const startRow = Math.min(lastSelectedRow, index);
         const endRow = Math.max(lastSelectedRow, index);
         for (let i = startRow; i <= endRow; i++) {
-            const currDoc = this.sortedDocs.docs[i];
+            const currDoc = this.displayedDocs.docs[i];
             if (!this._selectedDocs.includes(currDoc)) {
                 this.selectCell(currDoc, this._selectedCol, false, true);
             }
@@ -552,7 +548,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._lowestSelectedIndex = -1;
     };
 
-    sortedSelectedDocs = () => this.sortedDocs.docs.filter(doc => this._selectedDocs.includes(doc));
+    sortedSelectedDocs = () => this.displayedDocs.docs.filter(doc => this._selectedDocs.includes(doc));
 
     @computed
     get rowDropIndex() {
@@ -584,9 +580,8 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         const draggedDocs = de.complete.docDragData?.draggedDocuments;
         if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) {
-            const sortedDocs = this.sortedDocs.docs.slice();
-const       filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs.includes(doc));
-            this.dataDoc[this.fieldKey ?? 'data'] = new List<Doc>([...this.sortedDocs.docs]);
+            const docs = this.displayedDocs.docs.slice();
+            this._docs = docs;
             this.clearSelection();
             draggedDocs.forEach(doc => {
                 DocumentView.addViewRenderedCb(doc, dv => dv.select(true));
@@ -639,16 +634,13 @@ const       filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs.
         return undefined;
     };
 
-    addDocsFromChildCollection = (collection: Doc) => {
-        const childDocs = DocListCast(collection[Doc.LayoutFieldKey(collection)]);
-        childDocs.forEach((doc: Doc) => {!this.displayedDocsFunc().includes(doc) && this._lentDocs.push(doc)});
+    addDocsFromOtherCollection = (docs: Doc[]) => {
+        docs.forEach((doc: Doc) => {!this.displayedDocsFunc().includes(doc) && this._lentDocs.push(doc)});
+        this._docs = this.childDocs.slice().concat(this._lentDocs);
     }
-
-    removeChildCollectionDocs = (collection: Doc) => {
-        const children = DocListCast(collection[Doc.LayoutFieldKey(collection)]);
-        console.log('before: ' + this._lentDocs)
-        this._lentDocs.filter((doc: Doc) => !children.includes(doc));
-        console.log('after: ' + this._lentDocs)
+    removeDocsFromOtherCollection = (docs: Doc[]) => {
+        this._lentDocs.filter((doc: Doc) => !docs.includes(doc));
+        this._docs = this.childDocs.slice().concat(this._lentDocs);
     }
 
     @computed get fieldDefaultInput() {
@@ -784,27 +776,46 @@ const       filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs.
         this._filterColumnIndex = undefined;
     };
 
+    @undoBatch
+    setColumnSort = (field: string | undefined, desc: boolean = false) => {
+        this.layoutDoc.sortField = field;
+        this.layoutDoc.sortDesc = desc;
+    };
+
     openContextMenu = (x: number, y: number, index: number) => {
         this.closeColumnMenu();
         this.closeFilterMenu();
+        const cm = ContextMenu.Instance;
+        cm.clearItems();
 
-        ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({
+        const revealOptions = cm.findByDescription('Sort column')
+        const sortOptions: ContextMenuProps[] = revealOptions && revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : [];
+        sortOptions.push({description: 'Sort A-Z',     event: () => this.sortDocs(this._docs, this.columnKeys[index], false),     icon: 'arrow-down-a-z',}); // prettier-ignore
+        sortOptions.push({description: 'Sort Z-A',     event: () => this.sortDocs(this._docs, this.columnKeys[index], true),     icon: 'arrow-up-z-a'}); // prettier-ignore
+    
+        cm.addItem({
             description: `Change field`,
             event: () => this.openColumnMenu(index, false),
             icon: 'pencil-alt',
         });
-        ContextMenu.Instance.addItem({
+        cm.addItem({
             description: 'Filter field',
             event: () => this.openFilterMenu(index),
             icon: 'filter',
         });
-        ContextMenu.Instance.addItem({
+        cm.addItem({ 
+            description: 'Sort column', 
+            addDivider: false, 
+            noexpand: true, 
+            subitems: sortOptions, 
+            icon: 'sort' 
+        });
+        cm.addItem({
             description: 'Delete column',
             event: () => this.removeColumn(index),
             icon: 'trash',
         });
-        ContextMenu.Instance.displayMenu(x, y, undefined, false);
+        cm.displayMenu(x, y, undefined, false);
     };
 
     @action
@@ -1014,34 +1025,33 @@ const       filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs.
         }
     };
 
-    @computed get sortedDocs() {
+    @computed get displayedDocs() {
         const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : [];
-        const field = StrCast(this.layoutDoc.sortField);
-        const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort
-        const staticDocs = this.childDocs.filter(d => !draggedDocs.includes(d)).concat(this._lentDocs.filter(d => !draggedDocs.includes(d)));
-        const docs = !field
-            ? staticDocs
-            : [...staticDocs].sort((docA, docB) => {
-                  // this sorts the documents based on the selected field.  returning -1 for a before b, 0 for a = b, 1 for a > b
-                  const aStr = Field.toString(docA[field] as FieldType);
-                  const bStr = Field.toString(docB[field] as FieldType);
-                  let out = 0;
-                  if (aStr < bStr) out = -1;
-                  if (aStr > bStr) out = 1;
-                  if (desc) out *= -1;
-                  return out;
-              });
-
+        const docs = this._docs.filter(d => !draggedDocs.includes(d));
         docs.splice(this.rowDropIndex, 0, ...draggedDocs);
         return { docs };
     }
 
+    @action
+    sortDocs = (docs: Doc[], field: string, desc: boolean) => {
+        docs = docs.sort((docA, docB) => {
+            // this sorts the documents based on the selected field.  returning -1 for a before b, 0 for a = b, 1 for a > b
+            const aStr = Field.toString(docA[field] as FieldType);
+            const bStr = Field.toString(docB[field] as FieldType);
+            let out = 0;
+            if (aStr < bStr) out = -1;
+            if (aStr > bStr) out = 1;
+            if (desc) out *= -1;
+            return out;
+        });
+    }
+
     rowHeightFunc = () => (BoolCast(this.layoutDoc._schema_singleLine) ? CollectionSchemaView._rowSingleLineHeight : CollectionSchemaView._rowHeight);
     isContentActive = () => this._props.isSelected() || this._props.isContentActive();
     screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0);
     previewWidthFunc = () => this.previewWidth;
     onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
-    displayedDocsFunc = () => this.sortedDocs.docs;
+    displayedDocsFunc = () => this.displayedDocs.docs;
     _oldWheel: any;
     render() {
         return (
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index bda9fc9b7..dd4a13776 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -68,19 +68,6 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;}
     @action updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)}
 
-    @action
-    sortClicked = (e: React.PointerEvent) => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (this._props.sortField === this.fieldKey && this._props.sortDesc) {
-            this._props.setSort(undefined);
-        } else if (this._props.sortField === this.fieldKey) {
-            this._props.setSort(this.fieldKey, true);
-        } else {
-            this._props.setSort(this.fieldKey, false);
-        }
-    };
-
     openKeyDropdown = () => {
         this._props.schemaView.openColumnMenu(this._props.columnIndex, false)
     }
@@ -190,9 +177,6 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                         <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}>
                             <FontAwesomeIcon icon="ellipsis-h" />
                         </div>
-                        <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this._props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
-                            <FontAwesomeIcon icon="caret-right" style={this._props.sortField === this.fieldKey ? { transform: `rotate(${this._props.sortDesc ? '270deg' : '90deg'})` } : {}} />
-                        </div>
                     </div>
                 </div>
         );
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 099670022..665704de1 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -7,7 +7,7 @@ import { CgClose, CgLock, CgLockUnlock, CgMenu } from 'react-icons/cg';
 import { FaExternalLinkAlt } from 'react-icons/fa';
 import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
-import { Doc } from '../../../../fields/Doc';
+import { Doc, DocListCast } from '../../../../fields/Doc';
 import { BoolCast } from '../../../../fields/Types';
 import { Transform } from '../../../util/Transform';
 import { undoable } from '../../../util/UndoManager';
@@ -73,13 +73,14 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
             event: () => this._props.addDocTab(this.Document, OpenWhere.addRight),
             icon: 'magnifying-glass',
         });
-        if (this.Document['type'] === 'collection') {
+        const childDocs = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)])
+        if (this.Document['type'] === 'collection' && childDocs.length) {
                 ContextMenu.Instance.addItem({
                 description: this.Document._childrenSharedWithSchema ? 'Remove children from schema' : 'Add children to schema',
                 event: () => {
                     this.Document._childrenSharedWithSchema = !this.Document._childrenSharedWithSchema; 
                     this.Document._childrenSharedWithSchema ? 
-                    this.schemaView.addDocsFromChildCollection(this.Document) : this.schemaView.removeChildCollectionDocs(this.Document);
+                    this.schemaView.addDocsFromOtherCollection(childDocs) : this.schemaView.removeDocsFromOtherCollection(childDocs);
                 },
                 icon: this.Document._childrenSharedWithSchema ? 'minus' : 'plus',
             });
-- 
cgit v1.2.3-70-g09d2


From 99b0ce24e4d56100746016995c20f9bb9c109072 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 10 Jun 2024 04:01:01 -0400
Subject: adding/removing children from collection works (probably buggy);
 backspace delete broken

---
 src/client/documents/Documents.ts                  |  2 +-
 .../collectionSchema/CollectionSchemaView.tsx      | 34 ++++++++++++++++++----
 .../collectionSchema/SchemaColumnHeader.tsx        | 23 +++++++++++++--
 .../collections/collectionSchema/SchemaRowBox.tsx  |  9 +++---
 4 files changed, 53 insertions(+), 15 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 365af66b7..4908d2952 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -227,7 +227,7 @@ export class DocumentOptions {
     _header_pointerEvents?: PEVt = new PEInfo('types of events the header of a custom text document can consume');
     _lockedPosition?: BOOLt = new BoolInfo("lock the x,y coordinates of the document so that it can't be dragged");
     _lockedTransform?: BOOLt = new BoolInfo('lock the freeform_panx,freeform_pany and scale parameters of the document so that it be panned/zoomed');
-    _childrenSharedWithSchema?: BOOLt = new BoolInfo("whether this document's children are displayed in its parent schema view");
+    _childrenSharedWithSchema?: BOOLt = new BoolInfo("whether this document's children are displayed in its parent schema view", false);
 
     dataViz_title?: string;
     dataViz_line?: string;
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index a2f88eb80..f501993b5 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-restricted-syntax */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconButton, Popup, PopupTrigger, Size, Type } from 'browndash-components';
-import { ObservableMap, action, autorun, computed, makeObservable, observable, observe, runInAction } from 'mobx';
+import { ObservableMap, action, autorun, computed, makeObservable, observable, observe, override, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils';
@@ -65,6 +65,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     constructor(props: any) {
         super(props);
         makeObservable(this);
+        this.importAddedDocs();
     }
 
     static _rowHeight: number = 50;
@@ -106,7 +107,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @computed get _selectedDocs() {
         // get all selected documents then filter out any whose parent is not this schema document
-        const selected = DocumentView.SelectedDocs().filter(doc => this.childDocs.includes(doc));
+        const selected = DocumentView.SelectedDocs().filter(doc => this._docs.includes(doc));
         if (!selected.length) {
             // if no schema doc is directly selected, test if a child of a schema doc is selected (such as in the preview window)
             const childOfSchemaDoc = DocumentView.SelectedDocs().find(sel => DocumentView.getContextPath(sel, true).includes(this.Document));
@@ -197,6 +198,22 @@ export class CollectionSchemaView extends CollectionSubView() {
     // ViewBoxInterface overrides
     override isUnstyledView = returnTrue; // used by style provider : turns off  opacity, animation effects, scaling
 
+    importAddedDocs = () => {
+        const collections = this.childDocs.filter((doc: Doc) => doc.type === 'collection');
+        collections.forEach((doc: Doc) => {
+            const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]);
+            doc._childrenSharedWithSchema && this.addDocsFromOtherCollection(childDocs);
+        });
+    }
+
+    removeDoc = (doc: Doc) => {
+        console.log('called')
+        this.removeDocument(doc);
+        if (doc instanceof Doc) {
+            console.log('doc is doc')
+            this._docs = this._docs.filter(d => d !== doc)};
+    }
+
     rowIndex = (doc: Doc) => this.displayedDocs.docs.indexOf(doc);
 
     @action
@@ -256,13 +273,17 @@ export class CollectionSchemaView extends CollectionSubView() {
                     }
                     break;
                 case 'Backspace': {
-                    undoable(() => this.removeDocument(this._selectedDocs), 'delete schema row');
+                    undoable(() => {this._selectedDocs.forEach(d => this._docs.includes(d) && this.removeDoc(d));}, 'delete schema row');
                     break;
                 }
                 case 'Escape': {
                     this.deselectAllCells();
                     break;
                 }
+                case 'P': {
+                    this.importAddedDocs();
+                    break;
+                }
                 default:
             }
         }
@@ -635,11 +656,12 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     addDocsFromOtherCollection = (docs: Doc[]) => {
-        docs.forEach((doc: Doc) => {!this.displayedDocsFunc().includes(doc) && this._lentDocs.push(doc)});
+        docs.forEach((doc: Doc) => !this.displayedDocsFunc().includes(doc) && this._lentDocs.push(doc));
         this._docs = this.childDocs.slice().concat(this._lentDocs);
     }
+
     removeDocsFromOtherCollection = (docs: Doc[]) => {
-        this._lentDocs.filter((doc: Doc) => !docs.includes(doc));
+        this._lentDocs = this._lentDocs.filter((doc: Doc) => !docs.includes(doc));
         this._docs = this.childDocs.slice().concat(this._lentDocs);
     }
 
@@ -1032,7 +1054,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         return { docs };
     }
 
-    @action
+    @action 
     sortDocs = (docs: Doc[], field: string, desc: boolean) => {
         docs = docs.sort((docA, docB) => {
             // this sorts the documents based on the selected field.  returning -1 for a before b, 0 for a = b, 1 for a > b
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index dd4a13776..dbbf76ea7 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -22,6 +22,7 @@ import { SnappingManager } from '../../../util/SnappingManager';
 import { undoable } from '../../../util/UndoManager';
 import { FInfo } from '../../../documents/Documents';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
+import { IconButton, Size } from 'browndash-components';
 
 export interface SchemaColumnHeaderProps {
     Document: Doc;
@@ -174,10 +175,26 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                     <div>{this.editableView}</div>
 
                     <div className="schema-header-menu">
-                        <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}>
-                            <FontAwesomeIcon icon="ellipsis-h" />
+                        <div className="schema-header-button">
+                            <IconButton
+                            icon={ <FontAwesomeIcon icon="caret-down" size='lg'/>}
+                            size={Size.XSMALL}
+                            color={'black'}
+                            onPointerDown={e =>
+                                setupMoveUpEvents(
+                                    this,
+                                    e,
+                                    returnFalse,
+                                    emptyFunction,
+                                    undoable(clickEv => {
+                                        clickEv.stopPropagation();
+                                        this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)
+                                    }, 'open column menu')
+                                )
+                            }
+                        />
                         </div>
-                    </div>
+                    </div>  
                 </div>
         );
     }
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 665704de1..cdd47f644 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -60,7 +60,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         ContextMenu.Instance.clearItems();
         ContextMenu.Instance.addItem({
             description: `Close doc`,
-            event: () => this._props.removeDocument?.(this.Document),
+            event: () => this.schemaView.removeDoc(this.Document),
             icon: 'minus',
         });
         ContextMenu.Instance.addItem({
@@ -74,13 +74,12 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
             icon: 'magnifying-glass',
         });
         const childDocs = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)])
-        if (this.Document['type'] === 'collection' && childDocs.length) {
+        if (this.Document.type === 'collection' && childDocs.length) {
                 ContextMenu.Instance.addItem({
                 description: this.Document._childrenSharedWithSchema ? 'Remove children from schema' : 'Add children to schema',
                 event: () => {
                     this.Document._childrenSharedWithSchema = !this.Document._childrenSharedWithSchema; 
-                    this.Document._childrenSharedWithSchema ? 
-                    this.schemaView.addDocsFromOtherCollection(childDocs) : this.schemaView.removeDocsFromOtherCollection(childDocs);
+                    this.Document._childrenSharedWithSchema ? this.schemaView.addDocsFromOtherCollection(childDocs) : this.schemaView.removeDocsFromOtherCollection(childDocs);
                 },
                 icon: this.Document._childrenSharedWithSchema ? 'minus' : 'plus',
             });
@@ -115,7 +114,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                     }}>
                     <IconButton
                         tooltip="Open actions menu"
-                        icon={ <FontAwesomeIcon icon="list" size='lg'/>}
+                        icon={ <FontAwesomeIcon icon="caret-right" size='lg'/>}
                         size={Size.XSMALL}
                         color={'black'}
                         onPointerDown={e =>
-- 
cgit v1.2.3-70-g09d2


From ecea2cb94fa0ea3f9959b3a8f5f43ae7e98aa552 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 10 Jun 2024 11:19:32 -0400
Subject: lockopen icon

---
 src/client/views/MainView.tsx                                       | 1 +
 .../views/collections/collectionSchema/CollectionSchemaView.tsx     | 6 +-----
 2 files changed, 2 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5fe9332f4..8dc2ce98a 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -278,6 +278,7 @@ export class MainView extends ObservableReactComponent<{}> {
 
         library.add(
             ...[
+                fa.faLockOpen,
                 fa.faSort,
                 fa.faArrowUpZA,
                 fa.faArrowDownAZ,
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index f501993b5..7302a7c22 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -207,11 +207,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     removeDoc = (doc: Doc) => {
-        console.log('called')
         this.removeDocument(doc);
-        if (doc instanceof Doc) {
-            console.log('doc is doc')
-            this._docs = this._docs.filter(d => d !== doc)};
+        this._docs = this._docs.filter(d => d !== doc);
     }
 
     rowIndex = (doc: Doc) => this.displayedDocs.docs.indexOf(doc);
@@ -353,7 +350,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         const currKeys = this.columnKeys.slice();
         currKeys.splice(index, 1);
         this.layoutDoc.schema_columnKeys = new List<string>(currKeys); 
-        console.log(...currKeys);
     };
 
     @action
-- 
cgit v1.2.3-70-g09d2


From 4b604b5118a1aac89d977c832c81495ec2c9aa19 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 10 Jun 2024 12:56:51 -0400
Subject: lock row editing

---
 src/client/documents/Documents.ts                  |  1 +
 src/client/views/EditableView.tsx                  |  2 ++
 .../collectionSchema/CollectionSchemaView.tsx      | 11 ++------
 .../collectionSchema/SchemaColumnHeader.tsx        |  1 +
 .../collections/collectionSchema/SchemaRowBox.tsx  | 15 ++++++++--
 .../collectionSchema/SchemaTableCell.tsx           | 33 ++++++++++++----------
 6 files changed, 37 insertions(+), 26 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 4908d2952..dabbf9591 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -228,6 +228,7 @@ export class DocumentOptions {
     _lockedPosition?: BOOLt = new BoolInfo("lock the x,y coordinates of the document so that it can't be dragged");
     _lockedTransform?: BOOLt = new BoolInfo('lock the freeform_panx,freeform_pany and scale parameters of the document so that it be panned/zoomed');
     _childrenSharedWithSchema?: BOOLt = new BoolInfo("whether this document's children are displayed in its parent schema view", false);
+    _lockedSchemaEditing?: BOOLt = new BoolInfo("", false);
 
     dataViz_title?: string;
     dataViz_line?: string;
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 1652e6cd7..c05812e1a 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -57,6 +57,7 @@ export interface EditableProps {
     wrap?: string; // nowrap, pre-wrap, etc
 
     schemaHeader?: boolean;
+    onClick?: () => void;
     updateAlt?: (newAlt: string) => void;
     updateSearch?: (value: string) => void;
 }
@@ -187,6 +188,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
 
     @action
     onClick = (e?: React.MouseEvent) => {
+        this._props.onClick && this._props.onClick();
         if (this._props.editing !== false) {
             e?.nativeEvent.stopPropagation();
             if (this._ref.current && this._props.showMenuOnLoad) {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 7302a7c22..48287c3ec 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -208,7 +208,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     removeDoc = (doc: Doc) => {
         this.removeDocument(doc);
-        this._docs = this._docs.filter(d => d !== doc);
+        this._docs = this._docs.filter(d => d !== doc)
     }
 
     rowIndex = (doc: Doc) => this.displayedDocs.docs.indexOf(doc);
@@ -739,13 +739,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     setCellValues = (key: string, value: string) => {
-        const selectedDocs: Doc[] = [];
-        this.childDocs.forEach(doc => {
-            const isSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
-            isSelected && selectedDocs.push(doc); 
-        });
-        if (selectedDocs.length === 1) this.childDocs.forEach(doc => Doc.SetField(doc, key, value)); // if only one cell selected, fill all
-        else selectedDocs.forEach(doc => Doc.SetField(doc, key, value)); // else only fill selected cells
+        if (this._selectedCells.length === 1) this.childDocs.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); // if only one cell selected, fill all
+        else this._selectedCells.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); // else only fill selected cells
         return true;
     };
 
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index dbbf76ea7..3719840ff 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -126,6 +126,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 oneLine={true}
                 allowCRs={false}
                 contents={undefined}
+                onClick={this.openKeyDropdown}
                 fieldContents={fieldProps}
                 editing={undefined}  
                 placeholder={'Add key'}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index cdd47f644..58964d9fb 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -64,9 +64,9 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
             icon: 'minus',
         });
         ContextMenu.Instance.addItem({
-            description: this.Document._lockedPosition ? 'Unlock doc interactions' : 'Lock doc interactions',
-            event: () => Doc.toggleLockedPosition(this.Document),
-            icon: this.Document._lockedPosition ? 'lock-open' : 'lock',
+            description: this.Document._lockedSchemaEditing ? 'Unlock field editing' : 'Lock field editing',
+            event: () => this.Document._lockedSchemaEditing = !this.Document._lockedSchemaEditing,
+            icon: this.Document._lockedSchemaEditing ? 'lock-open' : 'lock',
         });
         ContextMenu.Instance.addItem({
             description: 'Open preview',
@@ -87,6 +87,14 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         ContextMenu.Instance.displayMenu(x, y, undefined, false);
     }
 
+    get menuBackgroundColor(){
+        if (this.Document._lockedSchemaEditing){
+            if (this._props.isSelected()) return '#B0D1E7'
+            else return '#F5F5F5'
+        }   
+        return ''
+    }
+
     cleanupField = (field: string) => this.schemaView.cleanupComputedField(field)
     setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY);
     selectedCol = () => this.schemaView._selectedCol;
@@ -111,6 +119,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                     style={{
                         width: CollectionSchemaView._rowMenuWidth,
                         pointerEvents: !this._props.isContentActive() ? 'none' : undefined,
+                        backgroundColor: this.menuBackgroundColor
                     }}>
                     <IconButton
                         tooltip="Open actions menu"
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index dc060218c..49ec70b74 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -76,8 +76,20 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         makeObservable(this);
     }
 
-    get defaultKey(){
-        return SchemaColumnHeader.isDefaultField(this._props.fieldKey)
+    get isDefault(){
+        return SchemaColumnHeader.isDefaultField(this._props.fieldKey);
+    }
+
+    get lockedInteraction(){
+        return (this.isDefault || this._props.Document._lockedSchemaEditing);
+    }
+
+    get backgroundColor(){
+        if (this.lockedInteraction){
+            if (this._props.rowSelected()) return '#B0D1E7'
+            else return '#F5F5F5'
+        }   
+        return ''
     }
 
     static addFieldDoc = (docs: Doc | Doc[] /* , where: OpenWhere */) => {
@@ -89,9 +101,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         let protoCount = 0;
         let doc: Doc | undefined = Document;
         while (doc) {
-            if (Object.keys(doc).includes(fieldKey.replace(/^_/, ''))) {
-                break;
-            }
+            if (Object.keys(doc).includes(fieldKey.replace(/^_/, ''))) break; 
             protoCount++;
             doc = DocCast(doc.proto);
         }
@@ -130,6 +140,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
     @computed get defaultCellContent() {
         const { color, textDecoration, fieldProps, pointerEvents } = SchemaTableCell.renderProps(this._props);
 
+
         return (
             <div
                 className="schemacell-edit-wrapper"
@@ -137,7 +148,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     color,
                     textDecoration,
                     width: '100%',
-                    pointerEvents,
+                    pointerEvents: this.lockedInteraction ? 'none' : pointerEvents,
                 }}>
                 <EditableView
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
@@ -190,14 +201,6 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         }
     }
 
-    get backgroundColor(){
-        if (this.defaultKey){
-            if (this._props.rowSelected()) return '#B0D1E7'
-            else return '#F5F5F5'
-        }   
-        return ''
-    }
-
     render() {
         return (
             <div
@@ -218,7 +221,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 width: this._props.columnWidth() || undefined, 
                 border: selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined,
                 backgroundColor: this.backgroundColor}}>
-                {this.defaultKey ? '' : this.content}
+                {this.isDefault ? '' : this.content}
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 03f9fd4beb2bd3efa8f88c71bdbaf52dbec82e66 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 10 Jun 2024 14:56:42 -0400
Subject: sub-collection doc adding refactor complete except for small bug

---
 .../collectionSchema/CollectionSchemaView.tsx      | 51 +++++++++---------
 .../collectionSchema/SchemaColumnHeader.tsx        | 60 +++++++++++++++-------
 .../collections/collectionSchema/SchemaRowBox.tsx  |  1 -
 3 files changed, 65 insertions(+), 47 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 48287c3ec..1952f59f5 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -65,7 +65,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     constructor(props: any) {
         super(props);
         makeObservable(this);
-        this.importAddedDocs();
     }
 
     static _rowHeight: number = 50;
@@ -97,7 +96,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _colBeingDragged: boolean = false;
     @observable _colKeysFiltered: boolean = false;
     @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>();
-    @observable _lentDocs: Doc[] = [];
     @observable _docs: Doc[] = this.childDocs;
 
     // target HTMLelement portal for showing a popup menu to edit cell values.
@@ -150,7 +148,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     @computed get rowHeights() {
-        return this.childDocs.concat(this._lentDocs).map(() => this.rowHeightFunc());
+        return this.docs.map(() => this.rowHeightFunc());
     }
 
     @computed get displayColumnWidths() {
@@ -198,14 +196,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     // ViewBoxInterface overrides
     override isUnstyledView = returnTrue; // used by style provider : turns off  opacity, animation effects, scaling
 
-    importAddedDocs = () => {
-        const collections = this.childDocs.filter((doc: Doc) => doc.type === 'collection');
-        collections.forEach((doc: Doc) => {
-            const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]);
-            doc._childrenSharedWithSchema && this.addDocsFromOtherCollection(childDocs);
-        });
-    }
-
     removeDoc = (doc: Doc) => {
         this.removeDocument(doc);
         this._docs = this._docs.filter(d => d !== doc)
@@ -278,7 +268,6 @@ export class CollectionSchemaView extends CollectionSubView() {
                     break;
                 }
                 case 'P': {
-                    this.importAddedDocs();
                     break;
                 }
                 default:
@@ -651,16 +640,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         return undefined;
     };
 
-    addDocsFromOtherCollection = (docs: Doc[]) => {
-        docs.forEach((doc: Doc) => !this.displayedDocsFunc().includes(doc) && this._lentDocs.push(doc));
-        this._docs = this.childDocs.slice().concat(this._lentDocs);
-    }
-
-    removeDocsFromOtherCollection = (docs: Doc[]) => {
-        this._lentDocs = this._lentDocs.filter((doc: Doc) => !docs.includes(doc));
-        this._docs = this.childDocs.slice().concat(this._lentDocs);
-    }
-
     @computed get fieldDefaultInput() {
         switch (this._newFieldType) {
             case ColumnType.Number:
@@ -739,7 +718,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     setCellValues = (key: string, value: string) => {
-        if (this._selectedCells.length === 1) this.childDocs.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); // if only one cell selected, fill all
+        if (this._selectedCells.length === 1) this.childDocs.forEach(doc => !doc._lockedSchemaEditing &&Doc.SetField(doc, key, value)); // if only one cell selected, fill all
         else this._selectedCells.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); // else only fill selected cells
         return true;
     };
@@ -1038,16 +1017,36 @@ export class CollectionSchemaView extends CollectionSubView() {
         }
     };
 
+    displayedSubCollectionDocs = (doc: Doc) => {
+        const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]);
+        const displayedCollections = childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema);
+        let toReturn: Doc[] = [...childDocs];
+        displayedCollections.forEach(d => toReturn = toReturn.concat(this.displayedSubCollectionDocs(d)));
+        return toReturn;
+    }
+    
+    @computed get docs() {
+        let docsFromChildren: Doc[] = [];
+        const displayedCollections = this.childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema);
+        displayedCollections.forEach(d => {
+            let docsNotAlreadyDisplayed = this.displayedSubCollectionDocs(d).filter(dc => !this._docs.includes(dc));
+            docsFromChildren = docsFromChildren.concat(docsNotAlreadyDisplayed);
+        });
+        let docs = this._docs.concat(docsFromChildren);
+        return docs;
+    }
+    
     @computed get displayedDocs() {
         const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : [];
-        const docs = this._docs.filter(d => !draggedDocs.includes(d));
+        let docs = [...this.docs];
+        docs = docs.filter(d => !draggedDocs.includes(d));
         docs.splice(this.rowDropIndex, 0, ...draggedDocs);
         return { docs };
     }
 
     @action 
     sortDocs = (docs: Doc[], field: string, desc: boolean) => {
-        docs = docs.sort((docA, docB) => {
+        this._docs = docs.sort((docA, docB) => {
             // this sorts the documents based on the selected field.  returning -1 for a before b, 0 for a = b, 1 for a > b
             const aStr = Field.toString(docA[field] as FieldType);
             const bStr = Field.toString(docB[field] as FieldType);
@@ -1115,8 +1114,6 @@ export class CollectionSchemaView extends CollectionSubView() {
                                 columnIndex={index}
                                 columnKeys={this.columnKeys}
                                 columnWidths={this.displayColumnWidths}
-                                sortField={this.sortField}
-                                sortDesc={this.sortDesc}
                                 setSort={this.setColumnSort}
                                 rowHeight={this.rowHeightFunc}
                                 removeColumn={this.removeColumn}
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 3719840ff..0da186f81 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -30,8 +30,6 @@ export interface SchemaColumnHeaderProps {
     columnKeys: string[];
     columnWidths: number[];
     columnIndex: number;
-    sortField: string;
-    sortDesc: boolean;
     schemaView: CollectionSchemaView;
     keysDropdown: React.JSX.Element;
     //cleanupField: (s: string) => string;
@@ -158,6 +156,46 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
         return isDefault;
     }
 
+    get headerButton(){
+        const toRender = SchemaColumnHeader.isDefaultField(this.fieldKey) ? 
+        (<IconButton
+            icon={ <FontAwesomeIcon icon="trash" size='sm'/>}
+            size={Size.XSMALL}
+            color={'black'}
+            onPointerDown={e =>
+                setupMoveUpEvents(
+                    this,
+                    e,
+                    returnFalse,
+                    emptyFunction,
+                    undoable(clickEv => {
+                        clickEv.stopPropagation();
+                        this._props.schemaView.removeColumn(this._props.columnIndex);
+                    }, 'open column menu')
+                )
+            }
+        />)
+        : (<IconButton
+            icon={ <FontAwesomeIcon icon="caret-down" size='lg'/>}
+            size={Size.XSMALL}
+            color={'black'}
+            onPointerDown={e =>
+                setupMoveUpEvents(
+                    this,
+                    e,
+                    returnFalse,
+                    emptyFunction,
+                    undoable(clickEv => {
+                        clickEv.stopPropagation();
+                        this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)
+                    }, 'open column menu')
+                )
+            }
+        />)
+
+        return toRender;
+    }
+
     render() {
         return (
                 <div
@@ -177,23 +215,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
 
                     <div className="schema-header-menu">
                         <div className="schema-header-button">
-                            <IconButton
-                            icon={ <FontAwesomeIcon icon="caret-down" size='lg'/>}
-                            size={Size.XSMALL}
-                            color={'black'}
-                            onPointerDown={e =>
-                                setupMoveUpEvents(
-                                    this,
-                                    e,
-                                    returnFalse,
-                                    emptyFunction,
-                                    undoable(clickEv => {
-                                        clickEv.stopPropagation();
-                                        this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)
-                                    }, 'open column menu')
-                                )
-                            }
-                        />
+                            {this.headerButton}
                         </div>
                     </div>  
                 </div>
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 58964d9fb..a0d3144ce 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -79,7 +79,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                 description: this.Document._childrenSharedWithSchema ? 'Remove children from schema' : 'Add children to schema',
                 event: () => {
                     this.Document._childrenSharedWithSchema = !this.Document._childrenSharedWithSchema; 
-                    this.Document._childrenSharedWithSchema ? this.schemaView.addDocsFromOtherCollection(childDocs) : this.schemaView.removeDocsFromOtherCollection(childDocs);
                 },
                 icon: this.Document._childrenSharedWithSchema ? 'minus' : 'plus',
             });
-- 
cgit v1.2.3-70-g09d2


From 74849a5f9307ca64e2bbafa9eaa77822de18102d Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 10 Jun 2024 20:41:14 -0400
Subject: bug fixed

---
 .../views/collections/collectionSchema/CollectionSchemaView.tsx      | 5 +++--
 src/client/views/collections/collectionSchema/SchemaTableCell.tsx    | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 1952f59f5..dc29e7413 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -105,7 +105,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @computed get _selectedDocs() {
         // get all selected documents then filter out any whose parent is not this schema document
-        const selected = DocumentView.SelectedDocs().filter(doc => this._docs.includes(doc));
+        const selected = DocumentView.SelectedDocs().filter(doc => this.docs.includes(doc));
         if (!selected.length) {
             // if no schema doc is directly selected, test if a child of a schema doc is selected (such as in the preview window)
             const childOfSchemaDoc = DocumentView.SelectedDocs().find(sel => DocumentView.getContextPath(sel, true).includes(this.Document));
@@ -525,7 +525,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     selectCell = (doc: Doc, col: number, shiftKey: boolean, ctrlKey: boolean) => {
         if (!shiftKey && !ctrlKey) this.clearSelection();
         !this._selectedCells && (this._selectedCells = []);
-        !shiftKey && this._selectedCells && this._selectedCells.push(doc);
+        !shiftKey && this._selectedCells.push(doc);
+        this._selectedCells.forEach(d => console.log(d.title))
         const index = this.rowIndex(doc);
 
         if (!this) return;
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 49ec70b74..791465741 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -215,6 +215,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                             e.stopPropagation();
                         } else !selectedCell(this._props) && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
                     }
+                    console.log(this._props.Document.title);
                 })}
                 style={{ padding: this._props.padding, 
                 maxWidth: this._props.maxWidth?.(), 
-- 
cgit v1.2.3-70-g09d2


From c2a2b8c119c44b167310485cede0920f313cd40a Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 11 Jun 2024 01:56:17 -0400
Subject: rowmenu info icons

---
 src/client/views/MainView.tsx                      |  1 +
 .../collectionSchema/CollectionSchemaView.scss     | 17 ++++++++++++++---
 .../collectionSchema/CollectionSchemaView.tsx      | 22 ++++++++++------------
 .../collections/collectionSchema/SchemaRowBox.tsx  | 13 ++++++++++++-
 4 files changed, 37 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 8dc2ce98a..5b9ddbb88 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -278,6 +278,7 @@ export class MainView extends ObservableReactComponent<{}> {
 
         library.add(
             ...[
+                fa.faGift,
                 fa.faLockOpen,
                 fa.faSort,
                 fa.faArrowUpZA,
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index ceffc7e44..d1f1e3a13 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -259,9 +259,6 @@
         flex-direction: row;
         min-width: 50px;
         justify-content: center;
-        .iconButton-container {
-            min-width: unset !important;
-        }
     }
 
     .row-cells {
@@ -269,6 +266,20 @@
         flex-direction: row;
         justify-content: flex-end;
     }
+
+    .row-menu-infos {
+        position: absolute;
+        top: 3;
+        left: 3; 
+        z-index: 1;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        .row-infos-icon {
+            padding-right: 2px;
+        }
+    }
 }
 
 .schema-row-button,
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index dc29e7413..4abbc7f51 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -201,7 +201,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._docs = this._docs.filter(d => d !== doc)
     }
 
-    rowIndex = (doc: Doc) => this.displayedDocs.docs.indexOf(doc);
+    rowIndex = (doc: Doc) => this.draggedSpliceDocs.docs.indexOf(doc);
 
     @action
     onKeyDown = (e: KeyboardEvent) => {
@@ -211,9 +211,9 @@ export class CollectionSchemaView extends CollectionSubView() {
                     {
                         const lastDoc = this._selectedDocs.lastElement();
                         const lastIndex = this.rowIndex(lastDoc);
-                        const curDoc = this.displayedDocs.docs[lastIndex];
+                        const curDoc = this.docs[lastIndex];
                         if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) {
-                            const newDoc = this.displayedDocs.docs[lastIndex + 1];
+                            const newDoc = this.docs[lastIndex + 1];
                             if (this._selectedDocs.includes(newDoc)) {
                                 DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc));
                                 this.deselectCell(curDoc);
@@ -230,9 +230,9 @@ export class CollectionSchemaView extends CollectionSubView() {
                     {
                         const firstDoc = this._selectedDocs.lastElement();
                         const firstIndex = this.rowIndex(firstDoc);
-                        const curDoc = this.displayedDocs.docs[firstIndex];
+                        const curDoc = this.docs[firstIndex];
                         if (firstIndex > 0 && firstIndex < this.childDocs.length) {
-                            const newDoc = this.displayedDocs.docs[firstIndex - 1];
+                            const newDoc = this.docs[firstIndex - 1];
                             if (this._selectedDocs.includes(newDoc)) {
                                 DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc));
                                 this.deselectCell(curDoc);
@@ -514,7 +514,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const startRow = Math.min(lastSelectedRow, index);
         const endRow = Math.max(lastSelectedRow, index);
         for (let i = startRow; i <= endRow; i++) {
-            const currDoc = this.displayedDocs.docs[i];
+            const currDoc = this.docs[i];
             if (!this._selectedDocs.includes(currDoc)) {
                 this.selectCell(currDoc, this._selectedCol, false, true);
             }
@@ -555,8 +555,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._lowestSelectedIndex = -1;
     };
 
-    sortedSelectedDocs = () => this.displayedDocs.docs.filter(doc => this._selectedDocs.includes(doc));
-
     @computed
     get rowDropIndex() {
         const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseCoordinates.x, this._mouseCoordinates.y)[1];
@@ -587,7 +585,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         const draggedDocs = de.complete.docDragData?.draggedDocuments;
         if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) {
-            const docs = this.displayedDocs.docs.slice();
+            const docs = this.draggedSpliceDocs.docs.slice();
             this._docs = docs;
             this.clearSelection();
             draggedDocs.forEach(doc => {
@@ -719,7 +717,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     setCellValues = (key: string, value: string) => {
-        if (this._selectedCells.length === 1) this.childDocs.forEach(doc => !doc._lockedSchemaEditing &&Doc.SetField(doc, key, value)); // if only one cell selected, fill all
+        if (this._selectedCells.length === 1) this.docs.forEach(doc => !doc._lockedSchemaEditing &&Doc.SetField(doc, key, value)); // if only one cell selected, fill all
         else this._selectedCells.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); // else only fill selected cells
         return true;
     };
@@ -1037,7 +1035,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         return docs;
     }
     
-    @computed get displayedDocs() {
+    @computed get draggedSpliceDocs() {
         const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : [];
         let docs = [...this.docs];
         docs = docs.filter(d => !draggedDocs.includes(d));
@@ -1064,7 +1062,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0);
     previewWidthFunc = () => this.previewWidth;
     onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
-    displayedDocsFunc = () => this.displayedDocs.docs;
+    displayedDocsFunc = () => this.draggedSpliceDocs.docs;
     _oldWheel: any;
     render() {
         return (
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index a0d3144ce..98a16deea 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -7,7 +7,7 @@ import { CgClose, CgLock, CgLockUnlock, CgMenu } from 'react-icons/cg';
 import { FaExternalLinkAlt } from 'react-icons/fa';
 import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
-import { Doc, DocListCast } from '../../../../fields/Doc';
+import { Doc, DocListCast, FieldResult } from '../../../../fields/Doc';
 import { BoolCast } from '../../../../fields/Types';
 import { Transform } from '../../../util/Transform';
 import { undoable } from '../../../util/UndoManager';
@@ -21,6 +21,7 @@ import { SchemaTableCell } from './SchemaTableCell';
 import { ContextMenu } from '../../ContextMenu';
 import { CollectionFreeFormView } from '../collectionFreeForm';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 interface SchemaRowBoxProps extends FieldViewProps {
     rowIndex: number;
@@ -94,6 +95,13 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         return ''
     }
 
+    get menuInfos() {
+        const infos: Array<IconProp> = [];
+        if (this.Document._lockedSchemaEditing) infos.push('lock');
+        if (this.Document._childrenSharedWithSchema) infos.push('star');
+        return infos;
+    }
+
     cleanupField = (field: string) => this.schemaView.cleanupComputedField(field)
     setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY);
     selectedCol = () => this.schemaView._selectedCol;
@@ -113,6 +121,9 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                     row && this.schemaView?.addRowRef?.(this.Document, row);
                     this._ref = row;
                 }}>
+                <div className="row-menu-infos">
+                    {this.menuInfos.map(icn => <FontAwesomeIcon className="row-infos-icon" icon={icn} size='2xs' />)}
+                </div>
                 <div
                     className="row-menu"
                     style={{
-- 
cgit v1.2.3-70-g09d2


From df3fa2ceb0846491d05e362c28231c3679e021c5 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 11 Jun 2024 12:05:43 -0400
Subject: doninfos

---
 src/client/views/ScriptingRepl.scss                          |  2 ++
 .../collections/collectionSchema/CollectionSchemaView.tsx    | 12 ++++++------
 src/client/views/nodes/DocumentIcon.tsx                      |  7 ++-----
 3 files changed, 10 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ScriptingRepl.scss b/src/client/views/ScriptingRepl.scss
index adc82238e..5fe176920 100644
--- a/src/client/views/ScriptingRepl.scss
+++ b/src/client/views/ScriptingRepl.scss
@@ -35,6 +35,8 @@
     opacity: 0.3;
 }
 
+
+
 .scriptingObject-icon {
     padding: 3px;
     cursor: pointer;
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 4abbc7f51..bdf04f47b 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -260,6 +260,10 @@ export class CollectionSchemaView extends CollectionSubView() {
                     }
                     break;
                 case 'Backspace': {
+                    // this._docs.forEach(doc => {
+                    //     if (!this.childDocs.concat(this.displayedSubCollectionDocs(this.Document)))
+                    // });
+                    // console.log('backspace detected')
                     undoable(() => {this._selectedDocs.forEach(d => this._docs.includes(d) && this.removeDoc(d));}, 'delete schema row');
                     break;
                 }
@@ -319,12 +323,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         let modField = field.slice();
         let matches;
         let results = new Map<string, string>();
-        while ((matches = idPattern.exec(field)) !== null) {
-            results.set(matches[0], matches[1].replace(/"/g, '')); 
-        }
-        results.forEach((id, funcId) => {
-            modField = modField.replace(funcId, 'd' + (DocumentView.getDocViewIndex(IdToDoc(id))).toString());
-        })
+        while ((matches = idPattern.exec(field)) !== null) {results.set(matches[0], matches[1].replace(/"/g, '')); }
+        results.forEach((id, funcId) => {modField = modField.replace(funcId, 'd' + (DocumentView.getDocViewIndex(IdToDoc(id))).toString());})
         return modField;
     }
 
diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx
index 79fc06279..0b94ae4f7 100644
--- a/src/client/views/nodes/DocumentIcon.tsx
+++ b/src/client/views/nodes/DocumentIcon.tsx
@@ -25,19 +25,16 @@ export class DocumentIcon extends ObservableReactComponent<DocumentIconProps> {
 
     render() {
         const { view } = this._props;
-        const { left, top, right } = view.getBounds || { left: 0, top: 0, right: 0, bottom: 0 };
+        const { left, top, right, bottom } = view.getBounds || { left: 0, top: 0, right: 0, bottom: 0 };
 
         return (
             <div
                 className="documentIcon-outerDiv"
-                onPointerEnter={action(() => { this._hovered = true; })} // prettier-ignore
-                onPointerLeave={action(() => { this._hovered = false; })} // prettier-ignore
                 style={{
                     pointerEvents: 'all',
-                    opacity: this._hovered ? 0.3 : 1,
                     position: 'absolute',
                     background: SnappingManager.userBackgroundColor,
-                    transform: `translate(${(left + right) / 2}px, ${top}px)`,
+                    transform: `translate(${left}px, ${bottom - (bottom - top)/2}px)`, //**!** 
                 }}>
                 <Tooltip title={<div>{StrCast(this._props.view.Document?.title)}</div>}>
                     <p>d{this._props.index}</p>
-- 
cgit v1.2.3-70-g09d2


From c0afdafa109c377a83ebe4394d63b9fe785fe475 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 11 Jun 2024 14:33:22 -0400
Subject: added reaction for _docs

---
 .../collections/collectionSchema/CollectionSchemaView.tsx    | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index bdf04f47b..033bc74d2 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-restricted-syntax */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconButton, Popup, PopupTrigger, Size, Type } from 'browndash-components';
-import { ObservableMap, action, autorun, computed, makeObservable, observable, observe, override, runInAction } from 'mobx';
+import { IReactionDisposer, ObservableMap, action, autorun, computed, makeObservable, observable, observe, override, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils';
@@ -38,6 +38,7 @@ import { CollectionView } from '../CollectionView';
 import { listSpec } from '../../../../fields/Schema';
 import { GetEffectiveAcl } from '../../../../fields/util';
 import { ContextMenuProps } from '../../ContextMenuItem';
+import { truncate } from 'lodash';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -56,6 +57,7 @@ const defaultColumnKeys: string[] = ['title', 'type', 'author', 'author_date', '
 @observer
 export class CollectionSchemaView extends CollectionSubView() {
     private _keysDisposer: any;
+    private _disposers: { [name: string]: IReactionDisposer } = {};
     private _previewRef: HTMLDivElement | null = null;
     private _makeNewColumn: boolean = false;
     private _documentOptions: DocumentOptions = new DocumentOptions();
@@ -96,7 +98,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _colBeingDragged: boolean = false;
     @observable _colKeysFiltered: boolean = false;
     @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>();
-    @observable _docs: Doc[] = this.childDocs;
+    @observable _docs: Doc[] = [];
 
     // target HTMLelement portal for showing a popup menu to edit cell values.
     public get MenuTarget() {
@@ -186,10 +188,16 @@ export class CollectionSchemaView extends CollectionSubView() {
             },
             true
         );
+        this._disposers.docdata = reaction(
+            () => DocListCast(this.dataDoc[this.fieldKey]), 
+            (docs) => this._docs = docs,
+            {fireImmediately: true}
+        )
     }
 
     componentWillUnmount() {
         this._keysDisposer?.();
+        Object.values(this._disposers).forEach(disposer => disposer?.());
         document.removeEventListener('keydown', this.onKeyDown);
     }
 
-- 
cgit v1.2.3-70-g09d2


From 571220cb349644efc149b8e13d000a37366db664 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 12 Jun 2024 02:50:19 -0400
Subject: fixed col drag highlight and cleaned up multi-select highlight

---
 .../collectionSchema/CollectionSchemaView.tsx      | 14 +-------
 .../collections/collectionSchema/SchemaRowBox.tsx  | 23 ++++++++----
 .../collectionSchema/SchemaTableCell.tsx           | 42 +++++++++++++++++++---
 3 files changed, 54 insertions(+), 25 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 033bc74d2..25a1b4819 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -325,17 +325,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         });
     }
 
-    // parses a field from the "idToDoc(####)" format to DocumentId (d#) format for readability
-    cleanupComputedField = (field: string) => {
-        const idPattern = /idToDoc\((.*?)\)/g;
-        let modField = field.slice();
-        let matches;
-        let results = new Map<string, string>();
-        while ((matches = idPattern.exec(field)) !== null) {results.set(matches[0], matches[1].replace(/"/g, '')); }
-        results.forEach((id, funcId) => {modField = modField.replace(funcId, 'd' + (DocumentView.getDocViewIndex(IdToDoc(id))).toString());})
-        return modField;
-    }
-
     @undoBatch
     removeColumn = (index: number) => {
         if (this.columnKeys.length === 1) return;
@@ -480,7 +469,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             const edgeStyle = i === index ? `solid 2px ${Colors.MEDIUM_BLUE}` : '';
             const cellEles = [
                 colRef,
-                ...this.childDocs 
+                ...this.docs 
                     .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc))
                     .map(doc => this._rowEles.get(doc).children[1].children[i]),
             ];
@@ -534,7 +523,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         if (!shiftKey && !ctrlKey) this.clearSelection();
         !this._selectedCells && (this._selectedCells = []);
         !shiftKey && this._selectedCells.push(doc);
-        this._selectedCells.forEach(d => console.log(d.title))
         const index = this.rowIndex(doc);
 
         if (!this) return;
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 98a16deea..a8affb0d9 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -87,7 +87,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         ContextMenu.Instance.displayMenu(x, y, undefined, false);
     }
 
-    get menuBackgroundColor(){
+    @computed get menuBackgroundColor(){
         if (this.Document._lockedSchemaEditing){
             if (this._props.isSelected()) return '#B0D1E7'
             else return '#F5F5F5'
@@ -95,14 +95,22 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         return ''
     }
 
-    get menuInfos() {
+    @computed get menuInfos() {
         const infos: Array<IconProp> = [];
         if (this.Document._lockedSchemaEditing) infos.push('lock');
         if (this.Document._childrenSharedWithSchema) infos.push('star');
         return infos;
     }
 
-    cleanupField = (field: string) => this.schemaView.cleanupComputedField(field)
+    @computed get isolatedSelection() {
+        const toReturn: [boolean, boolean] = [true, true];
+        const selectedBelow: boolean = this.schemaView?._selectedDocs.includes(this.schemaView.draggedSpliceDocs.docs[this.rowIndex + 1]);
+        const selectedAbove: boolean = this.schemaView?._selectedDocs.includes(this.schemaView.draggedSpliceDocs.docs[this.rowIndex - 1]);
+        toReturn[0] = selectedAbove;
+        toReturn[1] = selectedBelow;
+        return toReturn;
+    }
+
     setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY);
     selectedCol = () => this.schemaView._selectedCol;
     getFinfo = computedFn((fieldKey: string) => this.schemaView?.fieldInfos.get(fieldKey));
@@ -111,6 +119,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     selectedCells = () => this.schemaView?._selectedDocs;
     setColumnValues = (field: any, value: any) => this.schemaView?.setCellValues(field, value) ?? false;
     columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth);
+    computeRowIndex = () => this.schemaView?.rowIndex(this.Document);
     render() {
         return (
             <div
@@ -121,9 +130,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                     row && this.schemaView?.addRowRef?.(this.Document, row);
                     this._ref = row;
                 }}>
-                <div className="row-menu-infos">
-                    {this.menuInfos.map(icn => <FontAwesomeIcon className="row-infos-icon" icon={icn} size='2xs' />)}
-                </div>
                 <div
                     className="row-menu"
                     style={{
@@ -149,10 +155,14 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                             )
                         }
                     />
+                <div className="row-menu-infos">
+                    {this.menuInfos.map(icn => <FontAwesomeIcon className="row-infos-icon" icon={icn} size='2xs' />)}
+                </div>
                 </div>
                 <div className="row-cells">
                     {this.schemaView?.columnKeys?.map((key, index) => (
                         <SchemaTableCell
+                            isolatedSelection={this.isolatedSelection}
                             key={key}
                             rowSelected={this._props.isSelected}
                             Document={this.Document}
@@ -170,7 +180,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                             setColumnValues={this.setColumnValues}
                             oneLine={BoolCast(this.schemaDoc?._singleLine)}
                             menuTarget={this.schemaView.MenuTarget}
-                            cleanupField={this.cleanupField}
                             transform={() => {
                                 const ind = index === this.schemaView.columnKeys.length - 1 ? this.schemaView.columnKeys.length - 3 : index;
                                 const x = this.schemaView?.displayColumnWidths.reduce((p, c, i) => (i <= ind ? p + c : p), 0);
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 791465741..c8bd48019 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -13,7 +13,7 @@ import Select from 'react-select';
 import { ClientUtils, StopEvent, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
 import { DateField } from '../../../../fields/DateField';
-import { Doc, DocListCast, Field } from '../../../../fields/Doc';
+import { Doc, DocListCast, Field, IdToDoc } from '../../../../fields/Doc';
 import { RichTextField } from '../../../../fields/RichTextField';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
 import { BoolCast, Cast, DateCast, DocCast, FieldValue, StrCast, toList } from '../../../../fields/Types';
@@ -33,6 +33,7 @@ import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { CollectionSchemaView, FInfotoColType } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
+import { ContextMenu } from '../../ContextMenu';
 
 export interface SchemaTableCellProps {
     Document: Doc;
@@ -57,8 +58,8 @@ export interface SchemaTableCellProps {
     transform: () => Transform;
     autoFocus?: boolean; // whether to set focus on creation, othwerise wait for a click
     rootSelected?: () => boolean;
-    cleanupField: (field: string) => string;
     rowSelected: () => boolean;
+    isolatedSelection: [boolean, boolean];
 }
 
 function selectedCell(props: SchemaTableCellProps) {
@@ -137,13 +138,32 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         return { color, textDecoration, fieldProps, cursor, pointerEvents };
     }
 
+    // openContextMenu = () => {
+    //     const cm = ContextMenu.Instance;
+    //     cm.clearItems();
+
+        
+    // }
+
+    // parses a field from the "idToDoc(####)" format to DocumentId (d#) format for readability
+    cleanupField = (field: string) => {
+        const idPattern = /idToDoc\((.*?)\)/g;
+        let modField = field.slice();
+        let matches;
+        let results = new Map<string, string>();
+        while ((matches = idPattern.exec(field)) !== null) {results.set(matches[0], matches[1].replace(/"/g, '')); }
+        results.forEach((id, funcId) => {modField = modField.replace(funcId, 'd' + (DocumentView.getDocViewIndex(IdToDoc(id))).toString());})
+        if (!modField) modField = '';
+        return modField;
+    }
+
     @computed get defaultCellContent() {
         const { color, textDecoration, fieldProps, pointerEvents } = SchemaTableCell.renderProps(this._props);
 
-
         return (
             <div
                 className="schemacell-edit-wrapper"
+                // onContextMenu={}
                 style={{
                     color,
                     textDecoration,
@@ -157,7 +177,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     contents={undefined}
                     fieldContents={fieldProps}
                     editing={selectedCell(this._props) ? undefined : false}
-                    GetValue={() => this._props.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))} //TODO: feed this into parser that handles idToDoc
+                    GetValue={() => this.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))}
                     SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
                         if (shiftDown && enterKey) {
                             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value);
@@ -201,6 +221,15 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         }
     }
 
+    @computed get borderColor() {
+        const sides: Array<string | undefined> = [];
+        sides[0] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // left
+        sides[1] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // right
+        sides[2] = (!this._props.isolatedSelection[0] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // top
+        sides[3] = (!this._props.isolatedSelection[1] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // bottom
+        return sides;
+    }
+
     render() {
         return (
             <div
@@ -220,7 +249,10 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 style={{ padding: this._props.padding, 
                 maxWidth: this._props.maxWidth?.(), 
                 width: this._props.columnWidth() || undefined, 
-                border: selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined,
+                borderLeft: this.borderColor[0],
+                borderRight: this.borderColor[1],
+                borderTop: this.borderColor[2],
+                borderBottom: this.borderColor[3],
                 backgroundColor: this.backgroundColor}}>
                 {this.isDefault ? '' : this.content}
             </div>
-- 
cgit v1.2.3-70-g09d2


From 707a1a4cba9f0af9ee07b487eddf0f4ca85c8a78 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 12 Jun 2024 03:28:07 -0400
Subject: col menu icon now shows only on hover

---
 .../collections/collectionSchema/CollectionSchemaView.tsx  |  8 ++++----
 .../collections/collectionSchema/SchemaColumnHeader.tsx    | 14 +++++++++++---
 .../views/collections/collectionSchema/SchemaRowBox.tsx    |  5 +++--
 3 files changed, 18 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 25a1b4819..affa70a62 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -209,7 +209,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._docs = this._docs.filter(d => d !== doc)
     }
 
-    rowIndex = (doc: Doc) => this.draggedSpliceDocs.docs.indexOf(doc);
+    rowIndex = (doc: Doc) => this.docsWithDrag.docs.indexOf(doc);
 
     @action
     onKeyDown = (e: KeyboardEvent) => {
@@ -581,7 +581,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         const draggedDocs = de.complete.docDragData?.draggedDocuments;
         if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) {
-            const docs = this.draggedSpliceDocs.docs.slice();
+            const docs = this.docsWithDrag.docs.slice();
             this._docs = docs;
             this.clearSelection();
             draggedDocs.forEach(doc => {
@@ -1031,7 +1031,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         return docs;
     }
     
-    @computed get draggedSpliceDocs() {
+    @computed get docsWithDrag() {
         const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : [];
         let docs = [...this.docs];
         docs = docs.filter(d => !draggedDocs.includes(d));
@@ -1058,7 +1058,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0);
     previewWidthFunc = () => this.previewWidth;
     onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
-    displayedDocsFunc = () => this.draggedSpliceDocs.docs;
+    displayedDocsFunc = () => this.docsWithDrag.docs;
     _oldWheel: any;
     render() {
         return (
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 0da186f81..0fe0033d4 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unused-prop-types */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero, setupMoveUpEvents } from '../../../../ClientUtils';
@@ -51,7 +51,7 @@ export interface SchemaColumnHeaderProps {
 export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> {
 
     @observable _altTitle: string | undefined = undefined;
-    @observable _displayKeysDropdown: boolean = false;
+    @observable _showMenuIcon: boolean = false;
 
     @computed get fieldKey() {
         return this._props.columnKeys[this._props.columnIndex];
@@ -59,6 +59,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
 
     constructor(props: SchemaColumnHeaderProps){
         super(props);
+        makeObservable(this);
         this._props.schemaView.openColumnMenu(0, false)
     }
     
@@ -196,6 +197,11 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
         return toRender;
     }
 
+    @action handlePointerEnter = () => this._showMenuIcon = true;
+    @action handlePointerLeave = () => this._showMenuIcon = false;
+
+    @computed get displayButton() {return this._showMenuIcon;}
+
     render() {
         return (
                 <div
@@ -203,6 +209,8 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                     style={{
                         width: this._props.columnWidths[this._props.columnIndex],
                     }}
+                    onPointerEnter={() => {this.handlePointerEnter()}}
+                    onPointerLeave={() => {this.handlePointerLeave()}}
                     onPointerDown={this.setupDrag}
                     ref={col => {
                         if (col) {
@@ -215,7 +223,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
 
                     <div className="schema-header-menu">
                         <div className="schema-header-button">
-                            {this.headerButton}
+                            {this.displayButton ? this.headerButton : null}
                         </div>
                     </div>  
                 </div>
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index a8affb0d9..107e29754 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -104,8 +104,9 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
 
     @computed get isolatedSelection() {
         const toReturn: [boolean, boolean] = [true, true];
-        const selectedBelow: boolean = this.schemaView?._selectedDocs.includes(this.schemaView.draggedSpliceDocs.docs[this.rowIndex + 1]);
-        const selectedAbove: boolean = this.schemaView?._selectedDocs.includes(this.schemaView.draggedSpliceDocs.docs[this.rowIndex - 1]);
+        const docs = this.schemaView.docsWithDrag.docs;
+        const selectedBelow: boolean = this.schemaView?._selectedDocs.includes(docs[this.rowIndex + 1]);
+        const selectedAbove: boolean = this.schemaView?._selectedDocs.includes(docs[this.rowIndex - 1]);
         toReturn[0] = selectedAbove;
         toReturn[1] = selectedBelow;
         return toReturn;
-- 
cgit v1.2.3-70-g09d2


From 60a4ccfe2ab6337c064da8a303336f1872f5e9a6 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 12 Jun 2024 21:16:17 -0400
Subject: cell value parser for highlighting cells used in equation works; need
 to implement actual VU

---
 src/client/views/EditableView.tsx                  | 16 ++++----
 .../collectionSchema/CollectionSchemaView.tsx      | 48 +++++++++++++++++++---
 .../collectionSchema/SchemaColumnHeader.tsx        |  6 ++-
 .../collections/collectionSchema/SchemaRowBox.tsx  |  2 +
 .../collectionSchema/SchemaTableCell.tsx           |  5 +++
 5 files changed, 63 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index c05812e1a..f8d6596d8 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -11,6 +11,7 @@ import { FieldView, FieldViewProps } from './nodes/FieldView';
 import { ObservableReactComponent } from './ObservableReactComponent';
 import { OverlayView } from './OverlayView';
 import { Padding } from 'browndash-components';
+import { SchemaFieldType } from './collections/collectionSchema/SchemaColumnHeader';
 
 export interface EditableProps {
     /**
@@ -56,7 +57,7 @@ export interface EditableProps {
     placeholder?: string;
     wrap?: string; // nowrap, pre-wrap, etc
 
-    schemaHeader?: boolean;
+    schemaFieldType?: SchemaFieldType;
     onClick?: () => void;
     updateAlt?: (newAlt: string) => void;
     updateSearch?: (value: string) => void;
@@ -71,19 +72,18 @@ export interface EditableProps {
 export class EditableView extends ObservableReactComponent<EditableProps> {
     private _ref = React.createRef<HTMLDivElement>();
     private _inputref: HTMLInputElement | HTMLTextAreaElement | null = null;
+    private _disposers: { [name: string]: IReactionDisposer } = {};
     _overlayDisposer?: () => void;
-    _editingDisposer?: IReactionDisposer;
+    _highlightsDisposer?: () => void;
     @observable _editing: boolean = false;
 
     constructor(props: EditableProps) {
         super(props);
         makeObservable(this);
-        this._editing = !!this._props.editing;
-        if (this._props.schemaHeader) this._editing = true;
     }
 
     componentDidMount(): void {
-        this._editingDisposer = reaction(
+        this._disposers.editing = reaction(
             () => this._editing,
             editing => {
                 if (editing) {
@@ -91,7 +91,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                         if (this._inputref?.value.startsWith('=') || this._inputref?.value.startsWith(':=')) {
                             this._overlayDisposer?.();
                             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
-                        }
+                        } 
                     });
                 } else {
                     this._overlayDisposer?.();
@@ -114,7 +114,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
 
     componentWillUnmount() {
         this._overlayDisposer?.();
-        this._editingDisposer?.();
+        this._disposers.editing?.();
         this._inputref?.value && this.finalizeEdit(this._inputref.value, false, true, false);
     }
 
@@ -287,7 +287,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     staticDisplay = () => {
         let toDisplay;
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
-        if (this._props.schemaHeader){
+        if (this._props.schemaFieldType === SchemaFieldType.Header){
             toDisplay = <input className="editableView-input"
             value={gval}
             placeholder='Add key'
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index affa70a62..4d959e42c 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -39,6 +39,7 @@ import { listSpec } from '../../../../fields/Schema';
 import { GetEffectiveAcl } from '../../../../fields/util';
 import { ContextMenuProps } from '../../ContextMenuItem';
 import { truncate } from 'lodash';
+import { DocumentManager } from '../../../util/DocumentManager';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -481,6 +482,39 @@ export class CollectionSchemaView extends CollectionSubView() {
             cellEles.slice(-1)[0].style.borderBottom = edgeStyle;
         });
 
+    getCellElement = (doc: Doc, fieldKey: string) => {
+        const index = this.columnKeys.indexOf(fieldKey);
+        console.log(doc.title)
+        const cell = this._rowEles.get(doc).children[1].children[index];
+        return cell;
+    }
+
+    findCellRefs = (text: string) => {
+        const pattern = /(this|d(\d+))\.(\w+)/g;
+        interface Match { docRef: string; field: string; }
+
+        const matches: Match[] = [];
+        let match: RegExpExecArray | null;
+
+        while ((match = pattern.exec(text)) !== null) {
+            const docRef = match[1] === 'this' ? match[1] : match[2]; 
+        matches.push({ docRef, field: match[3] });
+        }
+
+        const cells: Array<any> = [];
+        matches.forEach((match: Match) => {
+            const {docRef, field} = match;
+            const doc = DocumentManager.Instance.DocumentViews[Number(docRef)].Document;
+            if (this.columnKeys.includes(field)) {cells.push(this.getCellElement(doc, field))}
+        })
+
+        console.log(cells);
+
+        return cells;
+    }
+
+
+
     @action
     addRowRef = (doc: Doc, ref: HTMLDivElement) => this._rowEles.set(doc, ref);
 
@@ -1012,22 +1046,26 @@ export class CollectionSchemaView extends CollectionSubView() {
         }
     };
 
-    displayedSubCollectionDocs = (doc: Doc) => {
+    subCollectionDocs = (doc: Doc, displayed: boolean) => {
         const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]);
-        const displayedCollections = childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema);
+        let collections: Array<Doc> = [];
+        if (displayed) collections = childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema);
+        else collections = childDocs.filter(d => d.type === 'collection' && !d._childrenSharedWithSchema);
         let toReturn: Doc[] = [...childDocs];
-        displayedCollections.forEach(d => toReturn = toReturn.concat(this.displayedSubCollectionDocs(d)));
+        collections.forEach(d => toReturn = toReturn.concat(this.subCollectionDocs(d, displayed)));
         return toReturn;
     }
-    
+
     @computed get docs() {
         let docsFromChildren: Doc[] = [];
+
         const displayedCollections = this.childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema);
         displayedCollections.forEach(d => {
-            let docsNotAlreadyDisplayed = this.displayedSubCollectionDocs(d).filter(dc => !this._docs.includes(dc));
+            let docsNotAlreadyDisplayed = this.subCollectionDocs(d, true).filter(dc => !this._docs.includes(dc));
             docsFromChildren = docsFromChildren.concat(docsNotAlreadyDisplayed);
         });
         let docs = this._docs.concat(docsFromChildren);
+
         return docs;
     }
     
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 0fe0033d4..f0debaec2 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -24,6 +24,10 @@ import { FInfo } from '../../../documents/Documents';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
 import { IconButton, Size } from 'browndash-components';
 
+export enum SchemaFieldType {
+    Header, Cell
+}
+
 export interface SchemaColumnHeaderProps {
     Document: Doc;
     autoFocus?: boolean;
@@ -131,7 +135,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 placeholder={'Add key'}
                 updateAlt={this.updateAlt} // alternate title to display
                 updateSearch={this.updateKeyDropdown}
-                schemaHeader={true} 
+                schemaFieldType={SchemaFieldType.Header} 
                 GetValue={() => {
                     if (SchemaColumnHeader.isDefaultField(this.fieldKey)) return '';
                     else if (this._altTitle) return this._altTitle;
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 107e29754..f6d99b47e 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -121,6 +121,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     setColumnValues = (field: any, value: any) => this.schemaView?.setCellValues(field, value) ?? false;
     columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth);
     computeRowIndex = () => this.schemaView?.rowIndex(this.Document);
+    findCellRefs = (text: string) => this.schemaView?.findCellRefs(text);
     render() {
         return (
             <div
@@ -163,6 +164,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                 <div className="row-cells">
                     {this.schemaView?.columnKeys?.map((key, index) => (
                         <SchemaTableCell
+                            getCellRefs={this.findCellRefs}
                             isolatedSelection={this.isolatedSelection}
                             key={key}
                             rowSelected={this._props.isSelected}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index c8bd48019..51555fa61 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -60,6 +60,7 @@ export interface SchemaTableCellProps {
     rootSelected?: () => boolean;
     rowSelected: () => boolean;
     isolatedSelection: [boolean, boolean];
+    getCellRefs: (text: string) => any;
 }
 
 function selectedCell(props: SchemaTableCellProps) {
@@ -72,6 +73,9 @@ function selectedCell(props: SchemaTableCellProps) {
 
 @observer
 export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellProps> {
+
+    @observable _highlighted: boolean = false;
+
     constructor(props: SchemaTableCellProps) {
         super(props);
         makeObservable(this);
@@ -186,6 +190,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                         }
                         const hasNoLayout =  Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto
                         const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout);
+                        this._props.getCellRefs(value);
                         this._props.finishEdit?.();
                         return ret;
                     }, 'edit schema cell')}
-- 
cgit v1.2.3-70-g09d2


From bd3170d3834c6ef9933813afc42f69df044d055b Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 13 Jun 2024 01:19:46 -0400
Subject: cell highlighting from equations WORKS!

---
 src/client/views/EditableView.tsx                  |  5 +++-
 .../collectionSchema/CollectionSchemaView.tsx      | 30 ++++++++++++++++++++--
 .../collections/collectionSchema/SchemaRowBox.tsx  |  4 +--
 .../collectionSchema/SchemaTableCell.tsx           |  4 +--
 4 files changed, 36 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index f8d6596d8..14af8febb 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -61,6 +61,7 @@ export interface EditableProps {
     onClick?: () => void;
     updateAlt?: (newAlt: string) => void;
     updateSearch?: (value: string) => void;
+    highlightCells?: (text: string) => void;
 }
 
 /**
@@ -74,7 +75,6 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     private _inputref: HTMLInputElement | HTMLTextAreaElement | null = null;
     private _disposers: { [name: string]: IReactionDisposer } = {};
     _overlayDisposer?: () => void;
-    _highlightsDisposer?: () => void;
     @observable _editing: boolean = false;
 
     constructor(props: EditableProps) {
@@ -91,11 +91,13 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                         if (this._inputref?.value.startsWith('=') || this._inputref?.value.startsWith(':=')) {
                             this._overlayDisposer?.();
                             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
+                            this._props.highlightCells?.(this._props.GetValue() ?? '');
                         } 
                     });
                 } else {
                     this._overlayDisposer?.();
                     this._overlayDisposer = undefined;
+                    this._props.highlightCells?.('');
                 }
             },
             { fireImmediately: true }
@@ -127,6 +129,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
         }
         this._props.updateSearch && this._props.updateSearch(targVal);
+        this._props.highlightCells?.(targVal);
     };
 
     @action
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 4d959e42c..4fc89488d 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -40,6 +40,7 @@ import { GetEffectiveAcl } from '../../../../fields/util';
 import { ContextMenuProps } from '../../ContextMenuItem';
 import { truncate } from 'lodash';
 import { DocumentManager } from '../../../util/DocumentManager';
+import { TbHemispherePlus } from 'react-icons/tb';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -99,6 +100,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _colBeingDragged: boolean = false;
     @observable _colKeysFiltered: boolean = false;
     @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>();
+    @observable _highlightedCells: Array<HTMLDivElement> = [];
+    @observable _cellHighlightColors: ObservableMap = new ObservableMap<HTMLDivElement, string>();
     @observable _docs: Doc[] = [];
 
     // target HTMLelement portal for showing a popup menu to edit cell values.
@@ -508,12 +511,35 @@ export class CollectionSchemaView extends CollectionSubView() {
             if (this.columnKeys.includes(field)) {cells.push(this.getCellElement(doc, field))}
         })
 
-        console.log(cells);
-
         return cells;
     }
 
+    removeCellHighlights = () => {
+        this._highlightedCells.forEach(cell => cell.style.border = '');
+        this._highlightedCells = [];
+    }
+
+    highlightCells = (text: string) => {
+        this.removeCellHighlights();
 
+        const randNum = (): number => {return Math.floor(Math.random() * (255 - 1));}
+        const randomRGBColor = (): string => {
+            const r = randNum(); const g = randNum(); const b = randNum(); // prettier-ignore
+            return `rgb(${r}, ${g}, ${b})`;
+        }
+
+        const cellsToHighlight = this.findCellRefs(text);
+        this._highlightedCells = [...cellsToHighlight];
+        this._highlightedCells.forEach(cell => {
+            if (!this._cellHighlightColors.has(cell)) {this._cellHighlightColors.set(cell, `solid 2px ${randomRGBColor()}`)}
+            cell.style.border = this._cellHighlightColors.get(cell);
+        });
+        // const cellsToRemove = [];
+        // this._highlightedCells.forEach(cell => !cellsToHighlight.includes(cell) && cellsToRemove.push(cell));
+        // this._highlightedCells = this._highlightedCells.filter(cell => cellsToHighlight.includes(cell));
+        // const cellsToAdd = cellsToHighlight.filter(cell => !this._highlightedCells.includes(cell));
+        // this._highlightedCells = this._highlightedCells.concat(cellsToAdd);
+    }
 
     @action
     addRowRef = (doc: Doc, ref: HTMLDivElement) => this._rowEles.set(doc, ref);
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index f6d99b47e..4902a49ff 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -121,7 +121,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     setColumnValues = (field: any, value: any) => this.schemaView?.setCellValues(field, value) ?? false;
     columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth);
     computeRowIndex = () => this.schemaView?.rowIndex(this.Document);
-    findCellRefs = (text: string) => this.schemaView?.findCellRefs(text);
+    highlightCells = (text: string) => this.schemaView?.highlightCells(text);
     render() {
         return (
             <div
@@ -164,7 +164,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                 <div className="row-cells">
                     {this.schemaView?.columnKeys?.map((key, index) => (
                         <SchemaTableCell
-                            getCellRefs={this.findCellRefs}
+                            highlightCells={this.highlightCells}
                             isolatedSelection={this.isolatedSelection}
                             key={key}
                             rowSelected={this._props.isSelected}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 51555fa61..50ec2f978 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -60,7 +60,7 @@ export interface SchemaTableCellProps {
     rootSelected?: () => boolean;
     rowSelected: () => boolean;
     isolatedSelection: [boolean, boolean];
-    getCellRefs: (text: string) => any;
+    highlightCells: (text: string) => void;
 }
 
 function selectedCell(props: SchemaTableCellProps) {
@@ -175,6 +175,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     pointerEvents: this.lockedInteraction ? 'none' : pointerEvents,
                 }}>
                 <EditableView
+                    highlightCells={this._props.highlightCells}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
                     oneLine={this._props.oneLine}
                     allowCRs={this._props.allowCRs}
@@ -190,7 +191,6 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                         }
                         const hasNoLayout =  Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto
                         const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout);
-                        this._props.getCellRefs(value);
                         this._props.finishEdit?.();
                         return ret;
                     }, 'edit schema cell')}
-- 
cgit v1.2.3-70-g09d2


From 391de70baf2f8744c617cd790b533fea584b9638 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 14 Jun 2024 14:50:43 -0400
Subject: func parser bug where multiple references to same doc didn't parse
 correctly fixed

---
 src/client/views/EditableView.tsx                                 | 4 +++-
 .../views/collections/collectionSchema/CollectionSchemaView.tsx   | 5 -----
 src/client/views/collections/collectionSchema/SchemaTableCell.tsx | 8 ++++----
 3 files changed, 7 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 14af8febb..f94f4be86 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -323,7 +323,9 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                     {this.renderEditor()}
                 </div>
             ) : (
-                this.renderEditor()
+                <div >
+                    {this.renderEditor()}
+                </div>
             );
         }
         setTimeout(() => this._props.autosuggestProps?.resetValue());
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 4fc89488d..ba2d2a764 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -534,11 +534,6 @@ export class CollectionSchemaView extends CollectionSubView() {
             if (!this._cellHighlightColors.has(cell)) {this._cellHighlightColors.set(cell, `solid 2px ${randomRGBColor()}`)}
             cell.style.border = this._cellHighlightColors.get(cell);
         });
-        // const cellsToRemove = [];
-        // this._highlightedCells.forEach(cell => !cellsToHighlight.includes(cell) && cellsToRemove.push(cell));
-        // this._highlightedCells = this._highlightedCells.filter(cell => cellsToHighlight.includes(cell));
-        // const cellsToAdd = cellsToHighlight.filter(cell => !this._highlightedCells.includes(cell));
-        // this._highlightedCells = this._highlightedCells.concat(cellsToAdd);
     }
 
     @action
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 50ec2f978..26dc9c3c2 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -154,10 +154,10 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         const idPattern = /idToDoc\((.*?)\)/g;
         let modField = field.slice();
         let matches;
-        let results = new Map<string, string>();
-        while ((matches = idPattern.exec(field)) !== null) {results.set(matches[0], matches[1].replace(/"/g, '')); }
-        results.forEach((id, funcId) => {modField = modField.replace(funcId, 'd' + (DocumentView.getDocViewIndex(IdToDoc(id))).toString());})
-        if (!modField) modField = '';
+        let results = new Array<[id: string, func: string]>();
+        while ((matches = idPattern.exec(field)) !== null) {results.push([matches[0], matches[1].replace(/"/g, '')]); }
+        results.forEach((idFuncPair) => {modField = modField.replace(idFuncPair[0], 'd' + (DocumentView.getDocViewIndex(IdToDoc(idFuncPair[1]))).toString());})
+        if (modField.charAt(modField.length - 1) === ';') modField = modField.substring(0, modField.length - 1);
         return modField;
     }
 
-- 
cgit v1.2.3-70-g09d2


From 7d4f2c1777f20c47e0f77bd519469ac16a4366b5 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 14 Jun 2024 16:46:51 -0400
Subject: background color for highlighted cells done (why did this take 2
 hours ~_~)

---
 src/ClientUtils.ts                                 | 20 ++++++++++++++
 .../collectionSchema/CollectionSchemaView.tsx      | 31 +++++++++++++++-------
 2 files changed, 42 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/ClientUtils.ts b/src/ClientUtils.ts
index d03ae1486..cd2b9b3a9 100644
--- a/src/ClientUtils.ts
+++ b/src/ClientUtils.ts
@@ -321,6 +321,26 @@ export namespace ClientUtils {
         return { h: h, s: s, l: l };
     }
 
+    export function lightenRGB(rVal: number, gVal: number, bVal: number, percent: number): [number, number, number] {
+        const amount = 1 + percent/100;
+        const r = rVal * amount;
+        const g = gVal * amount;
+        const b = bVal * amount;
+
+        const threshold = 255.999;
+        const maxVal = Math.max(r, g, b);
+        if (maxVal <= threshold) {
+            return [Math.round(r), Math.round(g), Math.round(b)];
+        }
+        const total = r + g + b;
+        if (total >= 3 * threshold) {
+            return [Math.round(threshold), Math.round(threshold), Math.round(threshold)];
+        }
+        const x = (3 * threshold - total) / (3 * maxVal - total);
+        const gray = threshold - x * maxVal;
+        return [Math.round(gray + x * r), Math.round(gray + x * g), Math.round(gray + x * b)];
+    }
+
     export function scrollIntoView(targetY: number, targetHgt: number, scrollTop: number, contextHgt: number, minSpacing: number, scrollHeight: number) {
         if (!targetHgt) return targetY; // if there's no height, then assume that
         if (scrollTop + contextHgt < Math.min(scrollHeight, targetY + minSpacing + targetHgt)) {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index ba2d2a764..df160a3a4 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -4,7 +4,7 @@ import { IconButton, Popup, PopupTrigger, Size, Type } from 'browndash-component
 import { IReactionDisposer, ObservableMap, action, autorun, computed, makeObservable, observable, observe, override, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils';
+import { ClientUtils, returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
 import { Doc, DocListCast, Field, FieldType, IdToDoc, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
 import { AclPrivate, DocData } from '../../../../fields/DocSymbols';
@@ -101,7 +101,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _colKeysFiltered: boolean = false;
     @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>();
     @observable _highlightedCells: Array<HTMLDivElement> = [];
-    @observable _cellHighlightColors: ObservableMap = new ObservableMap<HTMLDivElement, string>();
+    @observable _cellHighlightColors: ObservableMap = new ObservableMap<HTMLDivElement, string[]>();
     @observable _docs: Doc[] = [];
 
     // target HTMLelement portal for showing a popup menu to edit cell values.
@@ -515,24 +515,37 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     removeCellHighlights = () => {
-        this._highlightedCells.forEach(cell => cell.style.border = '');
+        this._highlightedCells.forEach(cell => {cell.style.border = ''; cell.style.backgroundColor = '';});
         this._highlightedCells = [];
     }
 
     highlightCells = (text: string) => {
         this.removeCellHighlights();
 
-        const randNum = (): number => {return Math.floor(Math.random() * (255 - 1));}
-        const randomRGBColor = (): string => {
-            const r = randNum(); const g = randNum(); const b = randNum(); // prettier-ignore
-            return `rgb(${r}, ${g}, ${b})`;
+        const randomRGBColor = (): string[] => {
+            let r; let g; let b;
+            do {
+                r = Math.floor(Math.random() * 256);
+                g = Math.floor(Math.random() * 256);
+                b = Math.floor(Math.random() * 256);
+            } while ((r + g + b) < 400 || (r + g + b) > 450);
+        
+            const rL = ClientUtils.lightenRGB(r, g, b, 60)[0];
+            const gL = ClientUtils.lightenRGB(r, g, b, 60)[1];
+            const bL = ClientUtils.lightenRGB(r, g, b, 60)[2];
+            const backgroundRGB = {rL, gL, bL};
+
+            return new Array<string>(`rgb(${r}, ${g}, ${b})`, `rgb(${backgroundRGB.rL}, ${backgroundRGB.gL}, ${backgroundRGB.bL})`);
         }
 
         const cellsToHighlight = this.findCellRefs(text);
         this._highlightedCells = [...cellsToHighlight];
         this._highlightedCells.forEach(cell => {
-            if (!this._cellHighlightColors.has(cell)) {this._cellHighlightColors.set(cell, `solid 2px ${randomRGBColor()}`)}
-            cell.style.border = this._cellHighlightColors.get(cell);
+            const color = randomRGBColor();
+            console.log('border: ' + color[0] + ' background: ' + color[1])
+            if (!this._cellHighlightColors.has(cell)) {this._cellHighlightColors.set(cell, new Array<string>(`solid 2px ${color[0]}`, color[1]))}
+            cell.style.border = this._cellHighlightColors.get(cell)[0];
+            cell.style.backgroundColor = this._cellHighlightColors.get(cell)[1];
         });
     }
 
-- 
cgit v1.2.3-70-g09d2


From 9866828b7b530b3f748509c55e3bb2c76dadce49 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 14 Jun 2024 17:02:32 -0400
Subject: background color done for real (set consistent brightness level, made
 background lighter)

---
 .../collectionSchema/CollectionSchemaView.tsx        | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index df160a3a4..ac9b57414 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -524,18 +524,18 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         const randomRGBColor = (): string[] => {
             let r; let g; let b;
-            do {
-                r = Math.floor(Math.random() * 256);
-                g = Math.floor(Math.random() * 256);
-                b = Math.floor(Math.random() * 256);
-            } while ((r + g + b) < 400 || (r + g + b) > 450);
+            const brightness = 450;
+            r = Math.floor(Math.random() * 256);
+            g = Math.floor(Math.random() * Math.min(256, brightness - r));
+            b = Math.floor(brightness - r - g);
         
-            const rL = ClientUtils.lightenRGB(r, g, b, 60)[0];
-            const gL = ClientUtils.lightenRGB(r, g, b, 60)[1];
-            const bL = ClientUtils.lightenRGB(r, g, b, 60)[2];
-            const backgroundRGB = {rL, gL, bL};
+            const lightenedRGB =  ClientUtils.lightenRGB(r, g, b, 65);
+            const rL = lightenedRGB[0];
+            const gL = lightenedRGB[1];
+            const bL = lightenedRGB[2];
+            const bgdRGB = {rL, gL, bL};
 
-            return new Array<string>(`rgb(${r}, ${g}, ${b})`, `rgb(${backgroundRGB.rL}, ${backgroundRGB.gL}, ${backgroundRGB.bL})`);
+            return new Array<string>(`rgb(${r}, ${g}, ${b})`, `rgb(${bgdRGB.rL}, ${bgdRGB.gL}, ${bgdRGB.bL})`);
         }
 
         const cellsToHighlight = this.findCellRefs(text);
-- 
cgit v1.2.3-70-g09d2


From c472f9844ed2806f7965713cf618363210e37de1 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sat, 15 Jun 2024 00:08:00 -0400
Subject: text highlighting works with 'this.' format

---
 .../collectionSchema/CollectionSchemaView.tsx      | 12 ++++------
 .../collectionSchema/SchemaTableCell.tsx           | 28 ++++++++++++----------
 2 files changed, 19 insertions(+), 21 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index ac9b57414..d75f076d2 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -523,16 +523,13 @@ export class CollectionSchemaView extends CollectionSubView() {
         this.removeCellHighlights();
 
         const randomRGBColor = (): string[] => {
-            let r; let g; let b;
             const brightness = 450;
-            r = Math.floor(Math.random() * 256);
-            g = Math.floor(Math.random() * Math.min(256, brightness - r));
-            b = Math.floor(brightness - r - g);
+            const r = Math.floor(Math.random() * 256);
+            const g = Math.floor(Math.random() * Math.min(256, brightness - r));
+            const b = Math.floor(brightness - r - g);
         
             const lightenedRGB =  ClientUtils.lightenRGB(r, g, b, 65);
-            const rL = lightenedRGB[0];
-            const gL = lightenedRGB[1];
-            const bL = lightenedRGB[2];
+            const rL = lightenedRGB[0]; const gL = lightenedRGB[1]; const bL = lightenedRGB[2]; // prettier-ignore
             const bgdRGB = {rL, gL, bL};
 
             return new Array<string>(`rgb(${r}, ${g}, ${b})`, `rgb(${bgdRGB.rL}, ${bgdRGB.gL}, ${bgdRGB.bL})`);
@@ -542,7 +539,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._highlightedCells = [...cellsToHighlight];
         this._highlightedCells.forEach(cell => {
             const color = randomRGBColor();
-            console.log('border: ' + color[0] + ' background: ' + color[1])
             if (!this._cellHighlightColors.has(cell)) {this._cellHighlightColors.set(cell, new Array<string>(`solid 2px ${color[0]}`, color[1]))}
             cell.style.border = this._cellHighlightColors.get(cell)[0];
             cell.style.backgroundColor = this._cellHighlightColors.get(cell)[1];
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 26dc9c3c2..69880b280 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -81,13 +81,11 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         makeObservable(this);
     }
 
-    get isDefault(){
-        return SchemaColumnHeader.isDefaultField(this._props.fieldKey);
-    }
+    get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore
 
-    get lockedInteraction(){
-        return (this.isDefault || this._props.Document._lockedSchemaEditing);
-    }
+    get isDefault(){return SchemaColumnHeader.isDefaultField(this._props.fieldKey);} // prettier-ignore
+
+    get lockedInteraction(){return (this.isDefault || this._props.Document._lockedSchemaEditing);} // prettier-ignore
 
     get backgroundColor(){
         if (this.lockedInteraction){
@@ -141,13 +139,12 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         const pointerEvents: 'all' | 'none' = !readOnly && isRowActive() ? 'all' : 'none';
         return { color, textDecoration, fieldProps, cursor, pointerEvents };
     }
-
-    // openContextMenu = () => {
-    //     const cm = ContextMenu.Instance;
-    //     cm.clearItems();
-
         
-    // }
+    adjustedHighlight = (field: string) => {
+        const pattern = /\bthis.\b/g;  
+        const modField = field.replace(pattern, `d${this.docIndex}.`);
+        this._props.highlightCells(modField);
+    }
 
     // parses a field from the "idToDoc(####)" format to DocumentId (d#) format for readability
     cleanupField = (field: string) => {
@@ -158,6 +155,11 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         while ((matches = idPattern.exec(field)) !== null) {results.push([matches[0], matches[1].replace(/"/g, '')]); }
         results.forEach((idFuncPair) => {modField = modField.replace(idFuncPair[0], 'd' + (DocumentView.getDocViewIndex(IdToDoc(idFuncPair[1]))).toString());})
         if (modField.charAt(modField.length - 1) === ';') modField = modField.substring(0, modField.length - 1);
+        
+        const selfRefPattern = `d${this.docIndex}.${this._props.fieldKey}`
+        const selfRefRegX = RegExp(selfRefPattern, 'g');
+        if (selfRefRegX.exec(modField) !== null) { return 'Invalid'}
+
         return modField;
     }
 
@@ -175,7 +177,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     pointerEvents: this.lockedInteraction ? 'none' : pointerEvents,
                 }}>
                 <EditableView
-                    highlightCells={this._props.highlightCells}
+                    highlightCells={this.adjustedHighlight}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
                     oneLine={this._props.oneLine}
                     allowCRs={this._props.allowCRs}
-- 
cgit v1.2.3-70-g09d2


From 69153ed435cbbc10637563b8bb576a80f8c0693f Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 17 Jun 2024 12:07:00 -0400
Subject: schema cell editable field class started

---
 src/client/views/EditableView.tsx                  |  13 +-
 .../collectionSchema/SchemaCellField.tsx           | 195 +++++++++++++++++++++
 .../collectionSchema/SchemaTableCell.tsx           |   4 +-
 3 files changed, 206 insertions(+), 6 deletions(-)
 create mode 100644 src/client/views/collections/collectionSchema/SchemaCellField.tsx

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index f94f4be86..f5271f749 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -58,6 +58,7 @@ export interface EditableProps {
     wrap?: string; // nowrap, pre-wrap, etc
 
     schemaFieldType?: SchemaFieldType;
+    prohibitedText?: Array<string>;
     onClick?: () => void;
     updateAlt?: (newAlt: string) => void;
     updateSearch?: (value: string) => void;
@@ -203,8 +204,13 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         }
     };
 
+    // checkForInvalidText = (text: string) => {
+    //     const regX = new RegExp(new Array<string>(...this._props.prohibitedText), 'g')
+    // }
+
     @action
     finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
+        //if (invalid) raise error
         if (this._props.SetValue(value, shiftDown, enterKey)) {
             this._editing = false;
             this._props.isEditingCallback?.(false);
@@ -252,7 +258,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                     onChange: this._props.autosuggestProps.onChange,
                 }}
             />
-        ) : this._props.oneLine !== false && this._props.GetValue()?.toString().indexOf('\n') === -1 ? (
+        ) : ( this._props.oneLine !== false && this._props.GetValue()?.toString().indexOf('\n') === -1 ? (
             <input
                 className="editableView-input" 
                 ref={r => { this._inputref = r; }} // prettier-ignore
@@ -284,7 +290,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                 onClick={this.stopPropagation}
                 onPointerUp={this.stopPropagation}
             />
-        );
+        ));
     }
 
     staticDisplay = () => {
@@ -319,8 +325,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         if ((this._editing && gval !== undefined)) {
             return this._props.sizeToContent ? (
                 <div style={{ display: 'grid', minWidth: 100 }}>
-                    <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{gval}</div>
-                    {this.renderEditor()}
+                    <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{this.renderEditor()}</div>
                 </div>
             ) : (
                 <div >
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
new file mode 100644
index 000000000..5f758683d
--- /dev/null
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -0,0 +1,195 @@
+import { IReactionDisposer, action, makeObservable, observable, reaction, runInAction } from "mobx";
+import { ObservableReactComponent } from "../../ObservableReactComponent";
+import { observer } from "mobx-react";
+import { OverlayView } from "../../OverlayView";
+import { DocumentIconContainer } from "../../nodes/DocumentIcon";
+import React, { FormEvent } from "react";
+import { FieldView, FieldViewProps } from "../../nodes/FieldView";
+import { ObjectField } from "../../../../fields/ObjectField";
+
+export interface SchemaCellFieldProps {
+    contents: any;
+    fieldContents?: FieldViewProps;
+    editing?: boolean;
+    oneLine?: boolean;
+    highlightCells?: (text: string) => void;
+    GetValue(): string | undefined;
+    SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean;
+}
+
+@observer
+export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldProps> {
+
+    private _disposers: { [name: string]: IReactionDisposer } = {};
+    private _inputref: HTMLDivElement | null = null;
+    _overlayDisposer?: () => void;
+    @observable _editing: boolean = false;
+
+    constructor(props: SchemaCellFieldProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    componentDidMount(): void {
+        this._disposers.editing = reaction(
+            () => this._editing,
+            editing => {
+                if (editing) {
+                    setTimeout(() => {
+                        if (this._inputref?.innerText.startsWith('=') || this._inputref?.innerText.startsWith(':=')) {
+                            this._overlayDisposer?.();
+                            this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
+                            this._props.highlightCells?.(this._props.GetValue() ?? '');
+                        } 
+                    });
+                } else {
+                    this._overlayDisposer?.();
+                    this._overlayDisposer = undefined;
+                    this._props.highlightCells?.('');
+                }
+            },
+            { fireImmediately: true }
+        );
+    }
+
+    componentDidUpdate(prevProps: Readonly<SchemaCellFieldProps>) {
+        super.componentDidUpdate(prevProps);
+        if (this._editing && this._props.editing === false) {
+            this._inputref?.innerText && this.finalizeEdit(this._inputref.innerText, false, true, false);
+        } else
+            runInAction(() => {
+                if (this._props.editing !== undefined) this._editing = this._props.editing;
+            });
+    }
+
+    componentWillUnmount(): void {
+        this._overlayDisposer?.();
+        this._disposers.editing?.();
+        this._inputref?.innerText && this.finalizeEdit(this._inputref.innerText, false, true, false);
+    }
+
+    @action
+    setIsFocused = (value: boolean) => {
+        const wasFocused = this._editing;
+        this._editing = value;
+        return wasFocused !== this._editing;
+    };
+
+    onChange = (e: FormEvent<HTMLInputElement>) => {
+        const targVal = e.currentTarget.innerText;
+        if (!(targVal.startsWith(':=') || targVal.startsWith('='))) {
+            this._overlayDisposer?.();
+            this._overlayDisposer = undefined;
+        } else if (!this._overlayDisposer) {
+            this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
+        }
+        this._props.highlightCells?.(targVal);
+    };
+
+    @action
+    onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.nativeEvent.defaultPrevented) return; // hack .. DashFieldView grabs native events, but react ignores stoppedPropagation and preventDefault, so we need to check it here
+        switch (e.key) {
+            case 'Tab':
+                e.stopPropagation();
+                this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, false);
+                break;
+            case 'Backspace':
+                e.stopPropagation();
+                break;
+            case 'Enter':
+                e.stopPropagation();
+                if (!e.ctrlKey) {
+                    this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, true);
+                }
+                break;
+            case 'Escape':
+                e.stopPropagation();
+                this._editing = false;
+                break;
+            case 'ArrowUp': case 'ArrowDown': case 'ArrowLeft': case 'ArrowRight': //prettier-ignore
+                e.stopPropagation();
+                break;
+            case 'Shift': case 'Alt': case 'Meta': case 'Control': case ':': //prettier-ignore
+                break;
+            // eslint-disable-next-line no-fallthrough
+            default:
+                break;
+        }
+    };
+
+
+    @action
+    onClick = (e?: React.MouseEvent) => {
+        if (this._props.editing !== false) {
+            e?.nativeEvent.stopPropagation();
+            this._editing = true;
+        }
+    };
+
+    @action
+    finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
+        //if (invalid) raise error
+        if (this._props.SetValue(value, shiftDown, enterKey)) {
+            this._editing = false;
+        } else {
+            this._editing = false;
+            !lostFocus &&
+                setTimeout(
+                    action(() => {
+                        this._editing = true;
+                    }),
+                    0
+                );
+        }
+    }
+
+    staticDisplay = () => {
+        return <span className='editableView-static'>
+        {
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : ''
+        }
+        </span>
+    }
+
+    renderEditor = () => {
+        return (
+            <div
+            contentEditable
+            className="editableView-input"
+            ref={r => { this._inputref = r; }}
+            style={{ overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }}
+            onBlur={e => this.finalizeEdit(this._inputref ? this._inputref.innerText : '', false, true, false)}
+            autoFocus
+            onInput={this.onChange}
+            onKeyDown={this.onKeyDown}
+            onPointerDown={e => e.stopPropagation}
+            onClick={e => e.stopPropagation}
+            onPointerUp={e => e.stopPropagation}
+            >
+            </div>
+        );
+    }
+
+    render() {
+        const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
+        if ((this._editing && gval !== undefined)) {
+            return <div>{this.renderEditor()}</div>;
+        } else return (
+            this._props.contents instanceof ObjectField ? null : (
+                <div
+                    className={`editableView-container-editing${this._props.oneLine ? '-oneLine' : ''}`}
+                    style={{
+                        minHeight: '10px',
+                        whiteSpace: this._props.oneLine ? 'nowrap' : 'pre-line',
+                        width: '100%',
+                    }}
+                    onClick={this.onClick}>
+                    {this.staticDisplay()}
+                </div>
+            )
+        );
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 69880b280..79f9067e2 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -34,6 +34,7 @@ import { CollectionSchemaView, FInfotoColType } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { ContextMenu } from '../../ContextMenu';
+import { SchemaCellField } from './SchemaCellField';
 
 export interface SchemaTableCellProps {
     Document: Doc;
@@ -176,11 +177,10 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     width: '100%',
                     pointerEvents: this.lockedInteraction ? 'none' : pointerEvents,
                 }}>
-                <EditableView
+                <SchemaCellField
                     highlightCells={this.adjustedHighlight}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
                     oneLine={this._props.oneLine}
-                    allowCRs={this._props.allowCRs}
                     contents={undefined}
                     fieldContents={fieldProps}
                     editing={selectedCell(this._props) ? undefined : false}
-- 
cgit v1.2.3-70-g09d2


From 50021902948840e87da1faf74f6403e25e667580 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 17 Jun 2024 14:58:18 -0400
Subject: persistent sort option added, still need UI indication; some header
 bugs/weirdness fixed

---
 src/client/views/EditableView.tsx                  | 10 +++-
 .../collectionSchema/CollectionSchemaView.tsx      | 69 +++++++++++++++++-----
 .../collectionSchema/SchemaColumnHeader.tsx        | 20 ++++++-
 .../collectionSchema/SchemaTableCell.tsx           |  2 +-
 4 files changed, 80 insertions(+), 21 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index f5271f749..78977bcb8 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -239,6 +239,12 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         return wasFocused !== this._editing;
     };
 
+    @action
+    setIsEditing = (value: boolean) => {
+        this._editing = value;
+        return this._editing;
+    }
+
     renderEditor() {
         return this._props.autosuggestProps ? (
             <Autosuggest
@@ -328,9 +334,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                     <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{this.renderEditor()}</div>
                 </div>
             ) : (
-                <div >
-                    {this.renderEditor()}
-                </div>
+                this.renderEditor()
             );
         }
         setTimeout(() => this._props.autosuggestProps?.resetValue());
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index d75f076d2..c66623bda 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -41,6 +41,7 @@ import { ContextMenuProps } from '../../ContextMenuItem';
 import { truncate } from 'lodash';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { TbHemispherePlus } from 'react-icons/tb';
+import { docs_v1 } from 'googleapis';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -400,6 +401,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     dragColumn = (e: PointerEvent, index: number) => {
+        this.closeColumnMenu();
         this._draggedColIndex = index;
         this._colBeingDragged = true;
         const dragData = new DragManager.ColumnDragData(index);
@@ -584,6 +586,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     selectCell = (doc: Doc, col: number, shiftKey: boolean, ctrlKey: boolean) => {
+        this.closeColumnMenu();
         if (!shiftKey && !ctrlKey) this.clearSelection();
         !this._selectedCells && (this._selectedCells = []);
         !shiftKey && this._selectedCells.push(doc);
@@ -839,10 +842,28 @@ export class CollectionSchemaView extends CollectionSubView() {
         const cm = ContextMenu.Instance;
         cm.clearItems();
 
+        const fieldSortedAsc = (this.sortField === this.columnKeys[index] && !this.sortDesc);
+        const fieldSortedDesc = (this.sortField === this.columnKeys[index] && this.sortDesc);
         const revealOptions = cm.findByDescription('Sort column')
         const sortOptions: ContextMenuProps[] = revealOptions && revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : [];
         sortOptions.push({description: 'Sort A-Z',     event: () => this.sortDocs(this._docs, this.columnKeys[index], false),     icon: 'arrow-down-a-z',}); // prettier-ignore
         sortOptions.push({description: 'Sort Z-A',     event: () => this.sortDocs(this._docs, this.columnKeys[index], true),     icon: 'arrow-up-z-a'}); // prettier-ignore
+        sortOptions.push({
+            description: 'Persistent Sort A-Z',     
+            event: () => {
+                if (fieldSortedAsc){
+                    this.setColumnSort(undefined)
+                } else this.setColumnSort(this.columnKeys[index], false)
+            },     
+            icon: fieldSortedAsc ? 'lock' : 'lock-open'}); // prettier-ignore
+        sortOptions.push({
+            description: 'Persistent Sort Z-A',     
+            event: () => {
+                if (fieldSortedDesc){
+                    this.setColumnSort(undefined)
+                } else this.setColumnSort(this.columnKeys[index], true)
+            },     
+            icon: fieldSortedDesc ? 'lock' : 'lock-open'}); // prettier-ignore
     
         cm.addItem({
             description: `Change field`,
@@ -1100,25 +1121,45 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
     
     @computed get docsWithDrag() {
-        const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : [];
-        let docs = [...this.docs];
-        docs = docs.filter(d => !draggedDocs.includes(d));
-        docs.splice(this.rowDropIndex, 0, ...draggedDocs);
+        let docs = this._docs;
+        if (this.sortField){
+            const field = StrCast(this.layoutDoc.sortField);
+            const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort
+            docs = this._docs.slice().sort((docA, docB) => {
+                    // this sorts the documents based on the selected field.  returning -1 for a before b, 0 for a = b, 1 for a > b
+                    const aStr = Field.toString(docA[field] as FieldType);
+                    const bStr = Field.toString(docB[field] as FieldType);
+                    let out = 0;
+                    if (aStr < bStr) out = -1;
+                    if (aStr > bStr) out = 1;
+                    if (desc) out *= -1;
+                    return out;
+                });
+        } else {
+            const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : [];
+            docs = docs.filter(d => !draggedDocs.includes(d));
+            docs.splice(this.rowDropIndex, 0, ...draggedDocs);
+        }
+
         return { docs };
     }
 
     @action 
     sortDocs = (docs: Doc[], field: string, desc: boolean) => {
-        this._docs = docs.sort((docA, docB) => {
-            // this sorts the documents based on the selected field.  returning -1 for a before b, 0 for a = b, 1 for a > b
-            const aStr = Field.toString(docA[field] as FieldType);
-            const bStr = Field.toString(docB[field] as FieldType);
-            let out = 0;
-            if (aStr < bStr) out = -1;
-            if (aStr > bStr) out = 1;
-            if (desc) out *= -1;
-            return out;
-        });
+        const collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
+        this._docs = this._docs.slice().sort((docA, docB) => collator.compare(Field.toString(docA[field] as FieldType), Field.toString(docB[field] as FieldType)));
+
+
+        // this._docs = docs.sort((docA, docB) => {
+        //     // this sorts the documents based on the selected field.  returning -1 for a before b, 0 for a = b, 1 for a > b
+        //     const aStr = Field.toString(docA[field] as FieldType);
+        //     const bStr = Field.toString(docB[field] as FieldType);
+        //     let out = 0;
+        //     if (aStr < bStr) out = -1;
+        //     if (aStr > bStr) out = 1;
+        //     if (desc) out *= -1;
+        //     return out;
+        // });
     }
 
     rowHeightFunc = () => (BoolCast(this.layoutDoc._schema_singleLine) ? CollectionSchemaView._rowSingleLineHeight : CollectionSchemaView._rowHeight);
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index f0debaec2..d16cde1f8 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -54,6 +54,7 @@ export interface SchemaColumnHeaderProps {
 @observer
 export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> {
 
+    private _inputRef: EditableView | null = null;
     @observable _altTitle: string | undefined = undefined;
     @observable _showMenuIcon: boolean = false;
 
@@ -118,14 +119,17 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     @computed get editableView() {
         const { color, fieldProps, pointerEvents } = this.renderProps(this._props); 
 
-        return <div className='schema-column-edit-wrapper' onPointerUp={() => {SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown()}}
+        return <div className='schema-column-edit-wrapper' onPointerUp={() => {
+            SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown();
+            this._props.schemaView.deselectAllCells();
+        }}
         style={{
             color,
             width: '100%',
             pointerEvents,
         }}>
             <EditableView
-                ref={r => this._props.autoFocus && r?.setIsFocused(true)}
+                ref={r => {this._inputRef = r; this._props.autoFocus && r?.setIsFocused(true)}}
                 oneLine={true}
                 allowCRs={false}
                 contents={undefined}
@@ -215,7 +219,17 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                     }}
                     onPointerEnter={() => {this.handlePointerEnter()}}
                     onPointerLeave={() => {this.handlePointerLeave()}}
-                    onPointerDown={this.setupDrag}
+                    onPointerDown={e => {
+                        this.setupDrag(e);
+                        setupMoveUpEvents(
+                            this,
+                            e,
+                            e => {return this._inputRef?.setIsEditing(false) ?? false},
+                            emptyFunction,
+                            emptyFunction,
+                            );
+                        }
+                    }
                     ref={col => {
                         if (col) {
                             this._props.setColRef(this._props.columnIndex, col);
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 79f9067e2..17fff7bf1 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -177,7 +177,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     width: '100%',
                     pointerEvents: this.lockedInteraction ? 'none' : pointerEvents,
                 }}>
-                <SchemaCellField
+                <EditableView
                     highlightCells={this.adjustedHighlight}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
                     oneLine={this._props.oneLine}
-- 
cgit v1.2.3-70-g09d2


From 3b838e251d4c626c30ef9fa507e68f6839b5cfd7 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 18 Jun 2024 00:44:37 -0400
Subject: work on sort

---
 src/ClientUtils.ts                                 |  2 +
 .../collectionSchema/CollectionSchemaView.tsx      | 56 ++++++++++------------
 2 files changed, 28 insertions(+), 30 deletions(-)

(limited to 'src')

diff --git a/src/ClientUtils.ts b/src/ClientUtils.ts
index cd2b9b3a9..a72e3ffaa 100644
--- a/src/ClientUtils.ts
+++ b/src/ClientUtils.ts
@@ -352,6 +352,8 @@ export namespace ClientUtils {
         return undefined;
     }
 
+    
+
     export function GetClipboardText(): string {
         const textArea = document.createElement('textarea');
         document.body.appendChild(textArea);
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index c66623bda..b1284fe31 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -846,8 +846,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         const fieldSortedDesc = (this.sortField === this.columnKeys[index] && this.sortDesc);
         const revealOptions = cm.findByDescription('Sort column')
         const sortOptions: ContextMenuProps[] = revealOptions && revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : [];
-        sortOptions.push({description: 'Sort A-Z',     event: () => this.sortDocs(this._docs, this.columnKeys[index], false),     icon: 'arrow-down-a-z',}); // prettier-ignore
-        sortOptions.push({description: 'Sort Z-A',     event: () => this.sortDocs(this._docs, this.columnKeys[index], true),     icon: 'arrow-up-z-a'}); // prettier-ignore
+        sortOptions.push({description: 'Sort A-Z',     event: () => this._docs = this.sortDocs(this.columnKeys[index], false),     icon: 'arrow-down-a-z',}); // prettier-ignore
+        sortOptions.push({description: 'Sort Z-A',     event: () => this._docs = this.sortDocs(this.columnKeys[index], true),     icon: 'arrow-up-z-a'}); // prettier-ignore
         sortOptions.push({
             description: 'Persistent Sort A-Z',     
             event: () => {
@@ -1119,22 +1119,36 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         return docs;
     }
+
+    @action 
+    sortDocs = (field: string, desc: boolean) => {
+        console.log('called')
+        const numbers: Doc[] = this.docs.filter(doc => !isNaN(Number(Field.toString(doc[field] as FieldType))));
+        const strings = this.docs.filter(doc => !numbers.includes(doc));
+
+        const sortedNums = numbers.sort((numOne, numTwo) => {
+            const numA = Number(Field.toString(numOne[field] as FieldType));
+            const numB = Number(Field.toString(numTwo[field] as FieldType));
+            return desc? numA - numB : numB - numA;
+        });
+
+        const collator = new Intl.Collator(undefined, {sensitivity: 'base'});
+        let sortedStrings;
+        if (!desc) {sortedStrings = strings.slice().sort((docA, docB) => collator.compare(Field.toString(docA[field] as FieldType), Field.toString(docB[field] as FieldType)));
+        } else sortedStrings = strings.slice().sort((docB, docA) => collator.compare(Field.toString(docA[field] as FieldType), Field.toString(docB[field] as FieldType)));
+
+        const sortedDocs = desc ? sortedNums.concat(sortedStrings) : sortedStrings.concat(sortedNums);
+        return sortedDocs;
+    }
     
     @computed get docsWithDrag() {
         let docs = this._docs;
+        console.log('docrender called')
         if (this.sortField){
+            console.log(true)
             const field = StrCast(this.layoutDoc.sortField);
             const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort
-            docs = this._docs.slice().sort((docA, docB) => {
-                    // this sorts the documents based on the selected field.  returning -1 for a before b, 0 for a = b, 1 for a > b
-                    const aStr = Field.toString(docA[field] as FieldType);
-                    const bStr = Field.toString(docB[field] as FieldType);
-                    let out = 0;
-                    if (aStr < bStr) out = -1;
-                    if (aStr > bStr) out = 1;
-                    if (desc) out *= -1;
-                    return out;
-                });
+            docs = this.sortDocs(field, desc);
         } else {
             const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : [];
             docs = docs.filter(d => !draggedDocs.includes(d));
@@ -1144,24 +1158,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         return { docs };
     }
 
-    @action 
-    sortDocs = (docs: Doc[], field: string, desc: boolean) => {
-        const collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
-        this._docs = this._docs.slice().sort((docA, docB) => collator.compare(Field.toString(docA[field] as FieldType), Field.toString(docB[field] as FieldType)));
-
-
-        // this._docs = docs.sort((docA, docB) => {
-        //     // this sorts the documents based on the selected field.  returning -1 for a before b, 0 for a = b, 1 for a > b
-        //     const aStr = Field.toString(docA[field] as FieldType);
-        //     const bStr = Field.toString(docB[field] as FieldType);
-        //     let out = 0;
-        //     if (aStr < bStr) out = -1;
-        //     if (aStr > bStr) out = 1;
-        //     if (desc) out *= -1;
-        //     return out;
-        // });
-    }
-
     rowHeightFunc = () => (BoolCast(this.layoutDoc._schema_singleLine) ? CollectionSchemaView._rowSingleLineHeight : CollectionSchemaView._rowHeight);
     isContentActive = () => this._props.isSelected() || this._props.isContentActive();
     screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0);
-- 
cgit v1.2.3-70-g09d2


From eaf5c682662cfac5dd05f776635a347547b4d500 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 18 Jun 2024 14:24:59 -0400
Subject: colsort persistsent + one-shot hightlight

---
 .../collectionSchema/CollectionSchemaView.tsx      | 101 +++++++++++++++++----
 1 file changed, 83 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index b1284fe31..d8f69b26a 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -104,7 +104,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _highlightedCells: Array<HTMLDivElement> = [];
     @observable _cellHighlightColors: ObservableMap = new ObservableMap<HTMLDivElement, string[]>();
     @observable _docs: Doc[] = [];
-
+    
     // target HTMLelement portal for showing a popup menu to edit cell values.
     public get MenuTarget() {
         return this._menuTarget.current;
@@ -198,6 +198,11 @@ export class CollectionSchemaView extends CollectionSubView() {
             (docs) => this._docs = docs,
             {fireImmediately: true}
         )
+        this._disposers.sortHighlight = reaction(
+            () => [this.sortField, this._docs], 
+            () => {setTimeout(() => this.highlightSortedColumn(), 5)},
+            {fireImmediately: true}
+        )
     }
 
     componentWillUnmount() {
@@ -285,6 +290,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                     break;
                 }
                 case 'P': {
+                    this.highlightSortedColumn();
                     break;
                 }
                 default:
@@ -475,8 +481,8 @@ export class CollectionSchemaView extends CollectionSubView() {
             const edgeStyle = i === index ? `solid 2px ${Colors.MEDIUM_BLUE}` : '';
             const cellEles = [
                 colRef,
-                ...this.docs 
-                    .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc))
+                ...this.docsWithDrag.docs 
+                    .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc) || this.columnKeys.indexOf(this.sortField))
                     .map(doc => this._rowEles.get(doc).children[1].children[i]),
             ];
             cellEles[0].style.borderTop = edgeStyle;
@@ -487,6 +493,43 @@ export class CollectionSchemaView extends CollectionSubView() {
             cellEles.slice(-1)[0].style.borderBottom = edgeStyle;
         });
 
+    highlightSortedColumn = (field?: string, descending?: boolean) => {
+        console.log('field: ' + field + ' desc: ' + descending);
+        let index = -1;
+        let highlightColors: string[] = [];
+        if (field || this.sortField){
+            index = this.columnKeys.indexOf(field || this.sortField);
+            //console.log(index)
+            const rowCount: number = this._rowEles.size + 1;
+            const increment: number = 100/rowCount;
+            for (let i = 0; i < rowCount; ++i){
+                const adjColor = ClientUtils.lightenRGB(16, 66, 230, increment * i);
+                highlightColors.push(`solid 2px rgb(${adjColor[0]}, ${adjColor[1]}, ${adjColor[2]})`);
+            }
+        }
+
+        this._colEles.forEach((colRef, i) => {
+            const highlight: boolean = i === index;
+            const desc: boolean = descending || this.sortDesc;
+            //console.log(desc)
+            const cellEles = [
+                colRef,
+                ...this.docsWithDrag.docs 
+                    .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc))
+                    .map(doc => this._rowEles.get(doc).children[1].children[i]),
+            ];
+            const cellCount = cellEles.length;
+            for (let ele = 0; ele < cellCount; ++ele){
+                const style = highlight ? desc ? `${highlightColors[cellCount - 1 - ele]}` : `${highlightColors[ele]}` : '';
+                cellEles[ele].style.borderLeft = style;
+                cellEles[ele].style.borderRight = style;
+            }
+            cellEles[0].style.borderTop = highlight ? desc ? `${highlightColors[cellCount - 1]}` : `${highlightColors[0]}` : '';
+            cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` :  `${highlightColors[cellCount - 1]}` : ''; 
+        });
+        
+    }
+
     getCellElement = (doc: Doc, fieldKey: string) => {
         const index = this.columnKeys.indexOf(fieldKey);
         console.log(doc.title)
@@ -545,6 +588,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             cell.style.border = this._cellHighlightColors.get(cell)[0];
             cell.style.backgroundColor = this._cellHighlightColors.get(cell)[1];
         });
+
     }
 
     @action
@@ -577,7 +621,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const startRow = Math.min(lastSelectedRow, index);
         const endRow = Math.max(lastSelectedRow, index);
         for (let i = startRow; i <= endRow; i++) {
-            const currDoc = this.docs[i];
+            const currDoc = this.docsWithDrag.docs[i];
             if (!this._selectedDocs.includes(currDoc)) {
                 this.selectCell(currDoc, this._selectedCol, false, true);
             }
@@ -846,22 +890,46 @@ export class CollectionSchemaView extends CollectionSubView() {
         const fieldSortedDesc = (this.sortField === this.columnKeys[index] && this.sortDesc);
         const revealOptions = cm.findByDescription('Sort column')
         const sortOptions: ContextMenuProps[] = revealOptions && revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : [];
-        sortOptions.push({description: 'Sort A-Z',     event: () => this._docs = this.sortDocs(this.columnKeys[index], false),     icon: 'arrow-down-a-z',}); // prettier-ignore
-        sortOptions.push({description: 'Sort Z-A',     event: () => this._docs = this.sortDocs(this.columnKeys[index], true),     icon: 'arrow-up-z-a'}); // prettier-ignore
+        sortOptions.push({
+            description: 'Sort A-Z',     
+            event: () => {
+                this.setColumnSort(undefined); 
+                const field = this.columnKeys[index];
+                this._docs = this.sortDocs(field, false);
+                setTimeout(() => this.highlightSortedColumn(field, false), 20);
+                setTimeout(() => this.highlightSortedColumn(), 500);
+            },     
+            icon: 'arrow-down-a-z',});
+        sortOptions.push({
+            description: 'Sort Z-A',     
+            event: () => {
+                this.setColumnSort(undefined); 
+                const field = this.columnKeys[index];
+                this._docs = this.sortDocs(field, true);
+                setTimeout(() => this.highlightSortedColumn(field, true), 20);
+                setTimeout(() => this.highlightSortedColumn(), 500);
+            },     
+            icon: 'arrow-up-z-a'});
         sortOptions.push({
             description: 'Persistent Sort A-Z',     
             event: () => {
                 if (fieldSortedAsc){
-                    this.setColumnSort(undefined)
-                } else this.setColumnSort(this.columnKeys[index], false)
+                    this.setColumnSort(undefined);
+                } else {
+                    this.sortDocs(this.columnKeys[index], false);
+                    this.setColumnSort(this.columnKeys[index], false);
+                }
             },     
             icon: fieldSortedAsc ? 'lock' : 'lock-open'}); // prettier-ignore
         sortOptions.push({
             description: 'Persistent Sort Z-A',     
             event: () => {
                 if (fieldSortedDesc){
-                    this.setColumnSort(undefined)
-                } else this.setColumnSort(this.columnKeys[index], true)
+                    this.setColumnSort(undefined);
+                } else {
+                    this.sortDocs(this.columnKeys[index], true);
+                    this.setColumnSort(this.columnKeys[index], true);
+                }
             },     
             icon: fieldSortedDesc ? 'lock' : 'lock-open'}); // prettier-ignore
     
@@ -1120,11 +1188,9 @@ export class CollectionSchemaView extends CollectionSubView() {
         return docs;
     }
 
-    @action 
-    sortDocs = (field: string, desc: boolean) => {
-        console.log('called')
-        const numbers: Doc[] = this.docs.filter(doc => !isNaN(Number(Field.toString(doc[field] as FieldType))));
-        const strings = this.docs.filter(doc => !numbers.includes(doc));
+    sortDocs = (field: string, desc: boolean, persistent?: boolean) => {
+        const numbers: Doc[] = this._docs.filter(doc => !isNaN(Number(Field.toString(doc[field] as FieldType))));
+        const strings = this._docs.filter(doc => !numbers.includes(doc));
 
         const sortedNums = numbers.sort((numOne, numTwo) => {
             const numA = Number(Field.toString(numOne[field] as FieldType));
@@ -1138,17 +1204,16 @@ export class CollectionSchemaView extends CollectionSubView() {
         } else sortedStrings = strings.slice().sort((docB, docA) => collator.compare(Field.toString(docA[field] as FieldType), Field.toString(docB[field] as FieldType)));
 
         const sortedDocs = desc ? sortedNums.concat(sortedStrings) : sortedStrings.concat(sortedNums);
+        if (!persistent) this._docs = sortedDocs;
         return sortedDocs;
     }
     
     @computed get docsWithDrag() {
         let docs = this._docs;
-        console.log('docrender called')
         if (this.sortField){
-            console.log(true)
             const field = StrCast(this.layoutDoc.sortField);
             const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort
-            docs = this.sortDocs(field, desc);
+            docs = this.sortDocs(field, desc, true);
         } else {
             const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : [];
             docs = docs.filter(d => !draggedDocs.includes(d));
-- 
cgit v1.2.3-70-g09d2


From 92a9995f7de05df8187a43a38837e38dd60408bf Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 19 Jun 2024 03:05:45 -0400
Subject: ugh

---
 .../collectionSchema/CollectionSchemaView.tsx      | 34 +++++++++++++---------
 1 file changed, 20 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index d8f69b26a..966552cd2 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -199,7 +199,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             {fireImmediately: true}
         )
         this._disposers.sortHighlight = reaction(
-            () => [this.sortField, this._docs], 
+            () => [this.sortField, this._docs, this._selectedDocs, this._highlightedCells], 
             () => {setTimeout(() => this.highlightSortedColumn(), 5)},
             {fireImmediately: true}
         )
@@ -401,8 +401,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         const currWidths = this.storedColumnWidths.slice();
         currWidths.splice(toIndex, 0, currWidths.splice(fromIndex, 1)[0]);
         this.layoutDoc.schema_columnWidths = new List<number>(currWidths);
-
-        this._draggedColIndex = toIndex;
     };
 
     @action
@@ -479,27 +477,28 @@ export class CollectionSchemaView extends CollectionSubView() {
     highlightDraggedColumn = (index: number) =>
         this._colEles.forEach((colRef, i) => {
             const edgeStyle = i === index ? `solid 2px ${Colors.MEDIUM_BLUE}` : '';
+            const sorted = i === this.columnKeys.indexOf(this.sortField);
+            console.log(sorted)
             const cellEles = [
                 colRef,
                 ...this.docsWithDrag.docs 
-                    .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc) || this.columnKeys.indexOf(this.sortField))
+                    .filter(doc => (i !== this._selectedCol || !this._selectedDocs.includes(doc)) && !sorted)
                     .map(doc => this._rowEles.get(doc).children[1].children[i]),
             ];
-            cellEles[0].style.borderTop = edgeStyle;
+            !sorted && (cellEles[0].style.borderTop = edgeStyle);
             cellEles.forEach(ele => {
+                if (ele === cellEles[0] && sorted) return;
                 ele.style.borderLeft = edgeStyle;
                 ele.style.borderRight = edgeStyle;
             });
-            cellEles.slice(-1)[0].style.borderBottom = edgeStyle;
+            !sorted && (cellEles.slice(-1)[0].style.borderBottom = edgeStyle);
         });
 
     highlightSortedColumn = (field?: string, descending?: boolean) => {
-        console.log('field: ' + field + ' desc: ' + descending);
         let index = -1;
         let highlightColors: string[] = [];
         if (field || this.sortField){
             index = this.columnKeys.indexOf(field || this.sortField);
-            //console.log(index)
             const rowCount: number = this._rowEles.size + 1;
             const increment: number = 100/rowCount;
             for (let i = 0; i < rowCount; ++i){
@@ -511,7 +510,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._colEles.forEach((colRef, i) => {
             const highlight: boolean = i === index;
             const desc: boolean = descending || this.sortDesc;
-            //console.log(desc)
             const cellEles = [
                 colRef,
                 ...this.docsWithDrag.docs 
@@ -546,7 +544,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         while ((match = pattern.exec(text)) !== null) {
             const docRef = match[1] === 'this' ? match[1] : match[2]; 
-        matches.push({ docRef, field: match[3] });
+            matches.push({ docRef, field: match[3] });
         }
 
         const cells: Array<any> = [];
@@ -674,7 +672,9 @@ export class CollectionSchemaView extends CollectionSubView() {
             e.stopPropagation();
 
             this._colEles.forEach((colRef, i) => {
-                // style for menu cell
+                const sorted = i === this.columnKeys.indexOf(this.sortField);
+                if (sorted) return;
+
                 colRef.style.borderLeft = '';
                 colRef.style.borderRight = '';
                 colRef.style.borderTop = '';
@@ -1161,7 +1161,8 @@ export class CollectionSchemaView extends CollectionSubView() {
             const newIndex = this.findColDropIndex(e.clientX);
             if (newIndex !== this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex);
             this._draggedColIndex = newIndex || this._draggedColIndex;
-            this.highlightDraggedColumn(newIndex ?? this._draggedColIndex);
+            this.highlightSortedColumn(); //TODO: Make this more efficient
+            !(this.sortField && this._draggedColIndex === this.columnKeys.indexOf(this.sortField)) && this.highlightDraggedColumn(newIndex ?? this._draggedColIndex);
         }
     };
 
@@ -1189,8 +1190,13 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     sortDocs = (field: string, desc: boolean, persistent?: boolean) => {
-        const numbers: Doc[] = this._docs.filter(doc => !isNaN(Number(Field.toString(doc[field] as FieldType))));
-        const strings = this._docs.filter(doc => !numbers.includes(doc));
+        const numbers: Doc[] = [];
+        const strings: Doc[] = []; 
+
+        this._docs.forEach(doc => {
+            if (!isNaN(Number(Field.toString(doc[field] as FieldType)))) numbers.push(doc);
+            else strings.push(doc);
+        });
 
         const sortedNums = numbers.sort((numOne, numTwo) => {
             const numA = Number(Field.toString(numOne[field] as FieldType));
-- 
cgit v1.2.3-70-g09d2


From 5b81abbba40b8ec3d6fc32a93fa46954139081a5 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 19 Jun 2024 04:50:29 -0400
Subject: it's not pretty but it works

---
 .../collectionSchema/CollectionSchemaView.tsx      | 31 ++++++++++++++++------
 1 file changed, 23 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 966552cd2..c115fd34b 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -104,6 +104,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _highlightedCells: Array<HTMLDivElement> = [];
     @observable _cellHighlightColors: ObservableMap = new ObservableMap<HTMLDivElement, string[]>();
     @observable _docs: Doc[] = [];
+    @observable _pauseSortHighlights: boolean = false;
     
     // target HTMLelement portal for showing a popup menu to edit cell values.
     public get MenuTarget() {
@@ -200,7 +201,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         )
         this._disposers.sortHighlight = reaction(
             () => [this.sortField, this._docs, this._selectedDocs, this._highlightedCells], 
-            () => {setTimeout(() => this.highlightSortedColumn(), 5)},
+            () => {this.sortField && setTimeout(() => this.highlightSortedColumn(), 5)},
             {fireImmediately: true}
         )
     }
@@ -497,9 +498,9 @@ export class CollectionSchemaView extends CollectionSubView() {
     highlightSortedColumn = (field?: string, descending?: boolean) => {
         let index = -1;
         let highlightColors: string[] = [];
+        const rowCount: number = this._rowEles.size + 1;
         if (field || this.sortField){
             index = this.columnKeys.indexOf(field || this.sortField);
-            const rowCount: number = this._rowEles.size + 1;
             const increment: number = 100/rowCount;
             for (let i = 0; i < rowCount; ++i){
                 const adjColor = ClientUtils.lightenRGB(16, 66, 230, increment * i);
@@ -513,7 +514,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             const cellEles = [
                 colRef,
                 ...this.docsWithDrag.docs 
-                    .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc))
+                    .filter(doc => (i !== this._selectedCol || !this._selectedDocs.includes(doc)))
                     .map(doc => this._rowEles.get(doc).children[1].children[i]),
             ];
             const cellCount = cellEles.length;
@@ -523,7 +524,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                 cellEles[ele].style.borderRight = style;
             }
             cellEles[0].style.borderTop = highlight ? desc ? `${highlightColors[cellCount - 1]}` : `${highlightColors[0]}` : '';
-            cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` :  `${highlightColors[cellCount - 1]}` : ''; 
+            if (!(cellCount < rowCount)) cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` :  `${highlightColors[cellCount - 1]}` : ''; 
         });
         
     }
@@ -896,8 +897,14 @@ export class CollectionSchemaView extends CollectionSubView() {
                 this.setColumnSort(undefined); 
                 const field = this.columnKeys[index];
                 this._docs = this.sortDocs(field, false);
-                setTimeout(() => this.highlightSortedColumn(field, false), 20);
-                setTimeout(() => this.highlightSortedColumn(), 500);
+                this._pauseSortHighlights = true;
+                setTimeout(() => {
+                    this.highlightSortedColumn(field, false);
+                    setTimeout(() => {
+                        this._pauseSortHighlights = false;
+                        this.highlightSortedColumn();
+                    }, 480); 
+                }, 20);
             },     
             icon: 'arrow-down-a-z',});
         sortOptions.push({
@@ -906,8 +913,14 @@ export class CollectionSchemaView extends CollectionSubView() {
                 this.setColumnSort(undefined); 
                 const field = this.columnKeys[index];
                 this._docs = this.sortDocs(field, true);
-                setTimeout(() => this.highlightSortedColumn(field, true), 20);
-                setTimeout(() => this.highlightSortedColumn(), 500);
+                this._pauseSortHighlights = true;
+                setTimeout(() => {
+                    this.highlightSortedColumn(field, true);
+                    setTimeout(() => {
+                        this._pauseSortHighlights = false;
+                        this.highlightSortedColumn();
+                    }, 480); 
+                }, 20);
             },     
             icon: 'arrow-up-z-a'});
         sortOptions.push({
@@ -915,6 +928,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             event: () => {
                 if (fieldSortedAsc){
                     this.setColumnSort(undefined);
+                    this.highlightSortedColumn();
                 } else {
                     this.sortDocs(this.columnKeys[index], false);
                     this.setColumnSort(this.columnKeys[index], false);
@@ -926,6 +940,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             event: () => {
                 if (fieldSortedDesc){
                     this.setColumnSort(undefined);
+                    this.highlightSortedColumn();
                 } else {
                     this.sortDocs(this.columnKeys[index], true);
                     this.setColumnSort(this.columnKeys[index], true);
-- 
cgit v1.2.3-70-g09d2


From b04015291de1d785ad54c0fad1f66903fb055bf4 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 19 Jun 2024 04:52:26 -0400
Subject: removed unecessary field

---
 .../collections/collectionSchema/CollectionSchemaView.tsx   | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index c115fd34b..1d9245206 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -104,7 +104,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _highlightedCells: Array<HTMLDivElement> = [];
     @observable _cellHighlightColors: ObservableMap = new ObservableMap<HTMLDivElement, string[]>();
     @observable _docs: Doc[] = [];
-    @observable _pauseSortHighlights: boolean = false;
     
     // target HTMLelement portal for showing a popup menu to edit cell values.
     public get MenuTarget() {
@@ -897,13 +896,9 @@ export class CollectionSchemaView extends CollectionSubView() {
                 this.setColumnSort(undefined); 
                 const field = this.columnKeys[index];
                 this._docs = this.sortDocs(field, false);
-                this._pauseSortHighlights = true;
                 setTimeout(() => {
                     this.highlightSortedColumn(field, false);
-                    setTimeout(() => {
-                        this._pauseSortHighlights = false;
-                        this.highlightSortedColumn();
-                    }, 480); 
+                    setTimeout(() => this.highlightSortedColumn(), 480); 
                 }, 20);
             },     
             icon: 'arrow-down-a-z',});
@@ -913,13 +908,9 @@ export class CollectionSchemaView extends CollectionSubView() {
                 this.setColumnSort(undefined); 
                 const field = this.columnKeys[index];
                 this._docs = this.sortDocs(field, true);
-                this._pauseSortHighlights = true;
                 setTimeout(() => {
                     this.highlightSortedColumn(field, true);
-                    setTimeout(() => {
-                        this._pauseSortHighlights = false;
-                        this.highlightSortedColumn();
-                    }, 480); 
+                    setTimeout(() => this.highlightSortedColumn(), 480); 
                 }, 20);
             },     
             icon: 'arrow-up-z-a'});
-- 
cgit v1.2.3-70-g09d2


From d207cf565968167c59b16baf6ca5ce2543c680ea Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 20 Jun 2024 01:57:07 -0400
Subject: cursor position consistency for schema cell field

---
 .../collectionSchema/CollectionSchemaView.tsx      |  4 +-
 .../collectionSchema/SchemaCellField.tsx           | 86 ++++++++++++++++++----
 .../collectionSchema/SchemaTableCell.tsx           |  3 +-
 3 files changed, 74 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 1d9245206..c287b7d44 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -478,7 +478,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._colEles.forEach((colRef, i) => {
             const edgeStyle = i === index ? `solid 2px ${Colors.MEDIUM_BLUE}` : '';
             const sorted = i === this.columnKeys.indexOf(this.sortField);
-            console.log(sorted)
             const cellEles = [
                 colRef,
                 ...this.docsWithDrag.docs 
@@ -497,7 +496,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     highlightSortedColumn = (field?: string, descending?: boolean) => {
         let index = -1;
         let highlightColors: string[] = [];
-        const rowCount: number = this._rowEles.size + 1;
+        const rowCount: number = this._docs.length + 1;
         if (field || this.sortField){
             index = this.columnKeys.indexOf(field || this.sortField);
             const increment: number = 100/rowCount;
@@ -530,7 +529,6 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     getCellElement = (doc: Doc, fieldKey: string) => {
         const index = this.columnKeys.indexOf(fieldKey);
-        console.log(doc.title)
         const cell = this._rowEles.get(doc).children[1].children[index];
         return cell;
     }
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 5f758683d..3af3b1d61 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -22,8 +22,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _inputref: HTMLDivElement | null = null;
+    private _content: string = '';
     _overlayDisposer?: () => void;
     @observable _editing: boolean = false;
+    @observable _displayedContent = '';
 
     constructor(props: SchemaCellFieldProps) {
         super(props);
@@ -50,12 +52,14 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             },
             { fireImmediately: true }
         );
+        this._content = this.props.GetValue() ?? '';
+        this.setContent(this._content);
     }
 
     componentDidUpdate(prevProps: Readonly<SchemaCellFieldProps>) {
         super.componentDidUpdate(prevProps);
         if (this._editing && this._props.editing === false) {
-            this._inputref?.innerText && this.finalizeEdit(this._inputref.innerText, false, true, false);
+            this.finalizeEdit(false, true, false);
         } else
             runInAction(() => {
                 if (this._props.editing !== undefined) this._editing = this._props.editing;
@@ -65,9 +69,14 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     componentWillUnmount(): void {
         this._overlayDisposer?.();
         this._disposers.editing?.();
-        this._inputref?.innerText && this.finalizeEdit(this._inputref.innerText, false, true, false);
+        this.finalizeEdit(false, true, false);
     }
 
+    @action 
+    setContent = (content: string) => {
+        this._displayedContent = content;
+    };
+
     @action
     setIsFocused = (value: boolean) => {
         const wasFocused = this._editing;
@@ -75,7 +84,52 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         return wasFocused !== this._editing;
     };
 
-    onChange = (e: FormEvent<HTMLInputElement>) => {
+    get cursorPosition() {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0 || !this._inputref) return null; 
+    
+        const range = selection.getRangeAt(0);
+        const adjRange = range.cloneRange();
+    
+        adjRange.selectNodeContents(this._inputref);
+        adjRange.setEnd(range.startContainer, range.startOffset);
+
+        return adjRange.toString().length; 
+    }
+
+    restoreCursorPosition = (position: number | null) => {
+        const selection = window.getSelection();
+        if (!selection || position === null || !this._inputref) return; 
+    
+        const range = document.createRange();
+        range.setStart(this._inputref, 0);
+        range.collapse(true);
+    
+        let currentPos = 0;
+        const setRange = (nodes: NodeList) => {
+            for (let i = 0; i < nodes.length; ++i) {
+                const node = nodes[i];
+
+                if (node.nodeType === Node.TEXT_NODE) { 
+                    if (!node.textContent) return;
+                    const nextPos = currentPos + node.textContent.length;
+                    if (position <= nextPos) {
+                        range.setStart(node, position - currentPos);
+                        range.collapse(true);
+                        selection.removeAllRanges();
+                        selection.addRange(range);
+                        return true;
+                    }
+                    currentPos = nextPos;
+
+                } else if ((node.nodeType === Node.ELEMENT_NODE) && (setRange(node.childNodes))) return true;
+            }
+            return false;
+        }
+    };
+
+    onChange = (e: FormEvent<HTMLDivElement>) => {
+        const cursorPos = this.cursorPosition;
         const targVal = e.currentTarget.innerText;
         if (!(targVal.startsWith(':=') || targVal.startsWith('='))) {
             this._overlayDisposer?.();
@@ -83,6 +137,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         } else if (!this._overlayDisposer) {
             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
         }
+        this._content = targVal;
+        this.setContent(targVal);
+        setTimeout(() => this.restoreCursorPosition(cursorPos), 0);
         this._props.highlightCells?.(targVal);
     };
 
@@ -92,7 +149,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         switch (e.key) {
             case 'Tab':
                 e.stopPropagation();
-                this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, false);
+                this.finalizeEdit(e.shiftKey, false, false);
                 break;
             case 'Backspace':
                 e.stopPropagation();
@@ -100,7 +157,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             case 'Enter':
                 e.stopPropagation();
                 if (!e.ctrlKey) {
-                    this.finalizeEdit(e.currentTarget.value, e.shiftKey, false, true);
+                    this.finalizeEdit(e.shiftKey, false, true);
                 }
                 break;
             case 'Escape':
@@ -128,9 +185,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     };
 
     @action
-    finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
-        //if (invalid) raise error
-        if (this._props.SetValue(value, shiftDown, enterKey)) {
+    finalizeEdit(shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
+        this.setContent(this._content);
+        if (this._props.SetValue(this._content, shiftDown, enterKey)) {
             this._editing = false;
         } else {
             this._editing = false;
@@ -151,31 +208,32 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : ''
         }
         </span>
-    }
+    };
 
     renderEditor = () => {
         return (
-            <div
+            <div 
             contentEditable
-            className="editableView-input"
+            className='editableView-static'
             ref={r => { this._inputref = r; }}
             style={{ overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }}
-            onBlur={e => this.finalizeEdit(this._inputref ? this._inputref.innerText : '', false, true, false)}
+            onBlur={e => this.finalizeEdit(false, true, false)}
             autoFocus
             onInput={this.onChange}
             onKeyDown={this.onKeyDown}
             onPointerDown={e => e.stopPropagation}
             onClick={e => e.stopPropagation}
             onPointerUp={e => e.stopPropagation}
+            dangerouslySetInnerHTML={{ __html: `<span>${this._displayedContent}</span>` }}
             >
             </div>
         );
-    }
+    };
 
     render() {
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
         if ((this._editing && gval !== undefined)) {
-            return <div>{this.renderEditor()}</div>;
+            return <div className={`editableView-container-editing${this._props.oneLine ? '-oneLine' : ''}`}>{this.renderEditor()}</div>;
         } else return (
             this._props.contents instanceof ObjectField ? null : (
                 <div
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 17fff7bf1..74c001397 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -177,7 +177,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     width: '100%',
                     pointerEvents: this.lockedInteraction ? 'none' : pointerEvents,
                 }}>
-                <EditableView
+                <SchemaCellField
                     highlightCells={this.adjustedHighlight}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
                     oneLine={this._props.oneLine}
@@ -251,7 +251,6 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                             e.stopPropagation();
                         } else !selectedCell(this._props) && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
                     }
-                    console.log(this._props.Document.title);
                 })}
                 style={{ padding: this._props.padding, 
                 maxWidth: this._props.maxWidth?.(), 
-- 
cgit v1.2.3-70-g09d2


From 20128eb11d5146e9f199d04a94ca9a6b5ac109d7 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 20 Jun 2024 14:33:28 -0400
Subject: some progress on eq text highlighting

---
 .../collectionSchema/CollectionSchemaView.scss     |  5 +++
 .../collectionSchema/CollectionSchemaView.tsx      |  4 ++-
 .../collectionSchema/SchemaCellField.tsx           | 37 +++++++++++++++++-----
 .../collections/collectionSchema/SchemaRowBox.tsx  |  6 ++++
 .../collectionSchema/SchemaTableCell.tsx           |  6 +++-
 5 files changed, 48 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index d1f1e3a13..6b53eb1cc 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -313,3 +313,8 @@
     }
 }
 
+.schemaField-editing {
+    outline: none;
+}
+
+
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index c287b7d44..5c8a84163 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -533,7 +533,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         return cell;
     }
 
-    findCellRefs = (text: string) => {
+    findCellRefs = (text: string, retRawMatches?: boolean) => {
         const pattern = /(this|d(\d+))\.(\w+)/g;
         interface Match { docRef: string; field: string; }
 
@@ -545,6 +545,8 @@ export class CollectionSchemaView extends CollectionSubView() {
             matches.push({ docRef, field: match[3] });
         }
 
+        if (retRawMatches) return matches;
+
         const cells: Array<any> = [];
         matches.forEach((match: Match) => {
             const {docRef, field} = match;
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 3af3b1d61..4ba8c8469 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -15,6 +15,7 @@ export interface SchemaCellFieldProps {
     highlightCells?: (text: string) => void;
     GetValue(): string | undefined;
     SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean;
+    func: (text: string, raw: boolean) => HTMLDivElement[] | [];
 }
 
 @observer
@@ -72,10 +73,25 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this.finalizeEdit(false, true, false);
     }
 
+    chunkContent = (content: string) => {
+        const matches = this._props.func(content, true);
+        const cells = this._props.func(content, false);
+        let chunkedText = content;
+        let matchNum = 0;
+        matches.forEach((docRef, field) => {
+            console.log('cell: ' + cells[matchNum] + ' border: ' + cells[matchNum].style.borderTop)
+            chunkedText = chunkedText.replace(`d5.type`, `<span style="color: ${cells[matchNum].style.borderTop.replace('2px solid', '')}">d5.type</span>`);
+            ++matchNum;
+        })
+        return chunkedText;
+    }
+
     @action 
     setContent = (content: string) => {
-        this._displayedContent = content;
-    };
+        console.log(this.chunkContent(content));
+        this._displayedContent = this.chunkContent(content);
+        console.log('displayed: ' + this._displayedContent);
+    }
 
     @action
     setIsFocused = (value: boolean) => {
@@ -126,10 +142,13 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             }
             return false;
         }
+
+        setRange(this._inputref.childNodes);
     };
 
     onChange = (e: FormEvent<HTMLDivElement>) => {
         const cursorPos = this.cursorPosition;
+        const prevVal = this._content;
         const targVal = e.currentTarget.innerText;
         if (!(targVal.startsWith(':=') || targVal.startsWith('='))) {
             this._overlayDisposer?.();
@@ -138,8 +157,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
         }
         this._content = targVal;
-        this.setContent(targVal);
-        setTimeout(() => this.restoreCursorPosition(cursorPos), 0);
+        if (this._props.func(targVal, true).length > this._props.func(prevVal, true).length) {
+            this.setContent(targVal);
+            setTimeout(() => this.restoreCursorPosition(cursorPos), 0);
+        }
         this._props.highlightCells?.(targVal);
     };
 
@@ -208,15 +229,15 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : ''
         }
         </span>
-    };
+    }
 
     renderEditor = () => {
         return (
             <div 
             contentEditable
-            className='editableView-static'
+            className='schemaField-editing'
             ref={r => { this._inputref = r; }}
-            style={{ overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }}
+            style={{ outline: 'none', overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }}
             onBlur={e => this.finalizeEdit(false, true, false)}
             autoFocus
             onInput={this.onChange}
@@ -228,7 +249,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             >
             </div>
         );
-    };
+    }
 
     render() {
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 4902a49ff..121605a2b 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -122,6 +122,10 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth);
     computeRowIndex = () => this.schemaView?.rowIndex(this.Document);
     highlightCells = (text: string) => this.schemaView?.highlightCells(text);
+    equationHighlightRef = (text: string) => {
+    
+    }
+    eqHighlightFunc = (text: string, raw: boolean) => {return this.schemaView.findCellRefs(text, raw)};
     render() {
         return (
             <div
@@ -164,6 +168,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                 <div className="row-cells">
                     {this.schemaView?.columnKeys?.map((key, index) => (
                         <SchemaTableCell
+                            func={this.eqHighlightFunc}
+                            equationHighlightRef={this.schemaView._cellHighlightColors}
                             highlightCells={this.highlightCells}
                             isolatedSelection={this.isolatedSelection}
                             key={key}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 74c001397..74ee46065 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -3,7 +3,7 @@
 /* eslint-disable no-use-before-define */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Popup, Size, Type } from 'browndash-components';
-import { action, computed, makeObservable, observable } from 'mobx';
+import { ObservableMap, action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { extname } from 'path';
 import * as React from 'react';
@@ -62,6 +62,9 @@ export interface SchemaTableCellProps {
     rowSelected: () => boolean;
     isolatedSelection: [boolean, boolean];
     highlightCells: (text: string) => void;
+    equationHighlightRef: ObservableMap<HTMLDivElement, string>;
+    func: (text: string, raw: boolean) => HTMLDivElement[] | [];
+
 }
 
 function selectedCell(props: SchemaTableCellProps) {
@@ -179,6 +182,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 }}>
                 <SchemaCellField
                     highlightCells={this.adjustedHighlight}
+                    func={this._props.func}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
                     oneLine={this._props.oneLine}
                     contents={undefined}
-- 
cgit v1.2.3-70-g09d2


From 83a2f119bf908d07e08ac89171e73d2211e1eb8f Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 20 Jun 2024 17:50:00 -0400
Subject: eq highlight working 70%

---
 .../collectionSchema/SchemaCellField.tsx           | 35 +++++++++++++++-------
 .../collections/collectionSchema/SchemaRowBox.tsx  |  2 +-
 .../collectionSchema/SchemaTableCell.tsx           |  1 +
 3 files changed, 27 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 4ba8c8469..6663fb68f 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -6,12 +6,15 @@ import { DocumentIconContainer } from "../../nodes/DocumentIcon";
 import React, { FormEvent } from "react";
 import { FieldView, FieldViewProps } from "../../nodes/FieldView";
 import { ObjectField } from "../../../../fields/ObjectField";
+import { Doc } from "../../../../fields/Doc";
+import { DocumentView } from "../../nodes/DocumentView";
 
 export interface SchemaCellFieldProps {
     contents: any;
     fieldContents?: FieldViewProps;
     editing?: boolean;
     oneLine?: boolean;
+    Document: Doc;
     highlightCells?: (text: string) => void;
     GetValue(): string | undefined;
     SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean;
@@ -33,7 +36,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         makeObservable(this);
     }
 
+    get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore
+
     componentDidMount(): void {
+        this._content = this.props.GetValue() ?? '';
+        this.setContent(this._content);
         this._disposers.editing = reaction(
             () => this._editing,
             editing => {
@@ -43,6 +50,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                             this._overlayDisposer?.();
                             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
                             this._props.highlightCells?.(this._props.GetValue() ?? '');
+                            this.setContent(this._content);
                         } 
                     });
                 } else {
@@ -53,8 +61,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             },
             { fireImmediately: true }
         );
-        this._content = this.props.GetValue() ?? '';
-        this.setContent(this._content);
     }
 
     componentDidUpdate(prevProps: Readonly<SchemaCellFieldProps>) {
@@ -74,13 +80,24 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     }
 
     chunkContent = (content: string) => {
-        const matches = this._props.func(content, true);
+        const pattern = /(this|d(\d+))\.(\w+)/g;
+        interface Match { docRef: string; field: string; }
+
+        const matches: Match[] = [];
+        let match: RegExpExecArray | null;
+
+        while ((match = pattern.exec(content)) !== null) {
+            const docRef = match[1] === 'this' ? match[1] : match[2]; 
+            matches.push({ docRef, field: match[3] });
+        }
+
         const cells = this._props.func(content, false);
         let chunkedText = content;
         let matchNum = 0;
-        matches.forEach((docRef, field) => {
-            console.log('cell: ' + cells[matchNum] + ' border: ' + cells[matchNum].style.borderTop)
-            chunkedText = chunkedText.replace(`d5.type`, `<span style="color: ${cells[matchNum].style.borderTop.replace('2px solid', '')}">d5.type</span>`);
+        matches.forEach((match: Match) => {
+            const {docRef, field} = match;
+            // const refToUse = docRef === 'this' ? `${this.docIndex}` : docRef;
+            chunkedText = chunkedText.replace(`d${docRef}.${field}`, `<span style="color: ${cells[matchNum].style.borderTop.replace('2px solid', '')}">d${docRef}.${field}</span>`);
             ++matchNum;
         })
         return chunkedText;
@@ -88,9 +105,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     @action 
     setContent = (content: string) => {
-        console.log(this.chunkContent(content));
         this._displayedContent = this.chunkContent(content);
-        console.log('displayed: ' + this._displayedContent);
     }
 
     @action
@@ -157,11 +172,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
         }
         this._content = targVal;
+        this._props.highlightCells?.(targVal);
         if (this._props.func(targVal, true).length > this._props.func(prevVal, true).length) {
             this.setContent(targVal);
             setTimeout(() => this.restoreCursorPosition(cursorPos), 0);
         }
-        this._props.highlightCells?.(targVal);
     };
 
     @action
@@ -245,7 +260,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             onPointerDown={e => e.stopPropagation}
             onClick={e => e.stopPropagation}
             onPointerUp={e => e.stopPropagation}
-            dangerouslySetInnerHTML={{ __html: `<span>${this._displayedContent}</span>` }}
+            dangerouslySetInnerHTML={{ __html: this._displayedContent }}
             >
             </div>
         );
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 121605a2b..c0ad95141 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -131,7 +131,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
             <div
                 className="schema-row"
                 onPointerDown={e => this.setCursorIndex(e.clientY)}
-                style={{ height: this._props.PanelHeight(), backgroundColor: this._props.isSelected() ? Colors.LIGHT_BLUE : undefined }}
+                style={{ height: this._props.PanelHeight()}}
                 ref={(row: HTMLDivElement | null) => {
                     row && this.schemaView?.addRowRef?.(this.Document, row);
                     this._ref = row;
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 74ee46065..3233e363a 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -181,6 +181,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     pointerEvents: this.lockedInteraction ? 'none' : pointerEvents,
                 }}>
                 <SchemaCellField
+                    Document={this._props.Document}
                     highlightCells={this.adjustedHighlight}
                     func={this._props.func}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
-- 
cgit v1.2.3-70-g09d2


From 22152c38c3e1485c107b321f1ce3894e87c0226f Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 21 Jun 2024 01:57:54 -0400
Subject: refactor

---
 .../collectionSchema/CollectionSchemaView.tsx            | 16 ++++++++++------
 .../views/collections/collectionSchema/SchemaRowBox.tsx  |  8 +++++++-
 2 files changed, 17 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 5c8a84163..992ee2ec9 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -101,8 +101,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _colBeingDragged: boolean = false;
     @observable _colKeysFiltered: boolean = false;
     @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>();
-    @observable _highlightedCells: Array<HTMLDivElement> = [];
-    @observable _cellHighlightColors: ObservableMap = new ObservableMap<HTMLDivElement, string[]>();
+    @observable _highlightedCells: Array<[doc: Doc, field: string]> = [];
+    @observable _cellHighlightColors: ObservableMap = new ObservableMap<[doc: Doc, field: string], string[]>();
     @observable _docs: Doc[] = [];
     
     // target HTMLelement portal for showing a popup menu to edit cell values.
@@ -290,7 +290,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                     break;
                 }
                 case 'P': {
-                    this.highlightSortedColumn();
+                    console.log(this._cellHighlightColors)
                     break;
                 }
                 default:
@@ -551,14 +551,17 @@ export class CollectionSchemaView extends CollectionSubView() {
         matches.forEach((match: Match) => {
             const {docRef, field} = match;
             const doc = DocumentManager.Instance.DocumentViews[Number(docRef)].Document;
-            if (this.columnKeys.includes(field)) {cells.push(this.getCellElement(doc, field))}
+            if (this.columnKeys.includes(field)) {cells.push([doc, field])}
         })
 
         return cells;
     }
 
     removeCellHighlights = () => {
-        this._highlightedCells.forEach(cell => {cell.style.border = ''; cell.style.backgroundColor = '';});
+        this._highlightedCells.forEach(info => {
+            const cell = this.getCellElement(info[0], info[1]);
+            cell.style.border = ''; cell.style.backgroundColor = '';
+        });
         this._highlightedCells = [];
     }
 
@@ -580,8 +583,9 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         const cellsToHighlight = this.findCellRefs(text);
         this._highlightedCells = [...cellsToHighlight];
-        this._highlightedCells.forEach(cell => {
+        this._highlightedCells.forEach(info => {
             const color = randomRGBColor();
+            const cell = this.getCellElement(info[0], info[1]);
             if (!this._cellHighlightColors.has(cell)) {this._cellHighlightColors.set(cell, new Array<string>(`solid 2px ${color[0]}`, color[1]))}
             cell.style.border = this._cellHighlightColors.get(cell)[0];
             cell.style.backgroundColor = this._cellHighlightColors.get(cell)[1];
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index c0ad95141..6f6b6decf 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -125,7 +125,13 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     equationHighlightRef = (text: string) => {
     
     }
-    eqHighlightFunc = (text: string, raw: boolean) => {return this.schemaView.findCellRefs(text, raw)};
+    eqHighlightFunc = (text: string, raw: boolean) => {
+        const info = this.schemaView.findCellRefs(text, raw);
+        if (raw) return info;
+        const cells: HTMLDivElement[] = [];
+        info.forEach(info => {cells.push(this.schemaView.getCellElement(info[0], info[1]))})
+        return cells;
+    };
     render() {
         return (
             <div
-- 
cgit v1.2.3-70-g09d2


From 8414744f15b58f55cee14dbabb5c0e6a4a62a4c6 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 21 Jun 2024 02:17:46 -0400
Subject: cell highlights consistsent on row moving

---
 .../collections/collectionSchema/CollectionSchemaView.tsx     | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 992ee2ec9..6838662c7 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -585,10 +585,13 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._highlightedCells = [...cellsToHighlight];
         this._highlightedCells.forEach(info => {
             const color = randomRGBColor();
-            const cell = this.getCellElement(info[0], info[1]);
-            if (!this._cellHighlightColors.has(cell)) {this._cellHighlightColors.set(cell, new Array<string>(`solid 2px ${color[0]}`, color[1]))}
-            cell.style.border = this._cellHighlightColors.get(cell)[0];
-            cell.style.backgroundColor = this._cellHighlightColors.get(cell)[1];
+            const doc = info[0]; 
+            const field = info[1];
+            const key = `${doc}_${field}`;
+            const cell = this.getCellElement(doc, field);
+            if (!this._cellHighlightColors.has(key)) {this._cellHighlightColors.set(key, new Array<string>(`solid 2px ${color[0]}`, color[1]))}
+            cell.style.border = this._cellHighlightColors.get(key)[0];
+            cell.style.backgroundColor = this._cellHighlightColors.get(key)[1];
         });
 
     }
-- 
cgit v1.2.3-70-g09d2


From 24fad06cbd2e273bb6729f21956e35243e602bb7 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 21 Jun 2024 12:37:47 -0400
Subject: fixed bug where equation didn't save in cell field on reloading
 (batching issue)

---
 .../views/collections/collectionSchema/CollectionSchemaView.tsx    | 2 +-
 src/client/views/collections/collectionSchema/SchemaCellField.tsx  | 7 +++++--
 src/client/views/collections/collectionSchema/SchemaTableCell.tsx  | 1 +
 3 files changed, 7 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 6838662c7..308520154 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -587,7 +587,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             const color = randomRGBColor();
             const doc = info[0]; 
             const field = info[1];
-            const key = `${doc}_${field}`;
+            const key = `${doc[Id]}_${field}`;
             const cell = this.getCellElement(doc, field);
             if (!this._cellHighlightColors.has(key)) {this._cellHighlightColors.set(key, new Array<string>(`solid 2px ${color[0]}`, color[1]))}
             cell.style.border = this._cellHighlightColors.get(key)[0];
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 6663fb68f..dcfa4f6f2 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -39,8 +39,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore
 
     componentDidMount(): void {
-        this._content = this.props.GetValue() ?? '';
-        this.setContent(this._content);
+        setTimeout(() => { 
+            this._content = this._props.GetValue() ?? '';
+            this.setContent(this._content);
+        }, 0); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function
         this._disposers.editing = reaction(
             () => this._editing,
             editing => {
@@ -50,6 +52,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                             this._overlayDisposer?.();
                             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
                             this._props.highlightCells?.(this._props.GetValue() ?? '');
+                            if (this._props.Document.type === 'collection') console.log('highlight: ' + this._props.GetValue())
                             this.setContent(this._content);
                         } 
                     });
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 3233e363a..94fd9ec7d 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -152,6 +152,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
 
     // parses a field from the "idToDoc(####)" format to DocumentId (d#) format for readability
     cleanupField = (field: string) => {
+        if (field === ':=d6.type + d4.type + d3.type') console.log(true)
         const idPattern = /idToDoc\((.*?)\)/g;
         let modField = field.slice();
         let matches;
-- 
cgit v1.2.3-70-g09d2


From 7f9d92b3e1d0ca433c732936eae767095c9a5e7f Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sat, 22 Jun 2024 15:47:12 -0400
Subject: work on cell field (numerous bugs fixed: spaces now make new divs,
 invalid refs no longer break things, valid->invalid ref causes update
 properly)

---
 .../collectionSchema/CollectionSchemaView.tsx      |  9 ++-
 .../collectionSchema/SchemaCellField.tsx           | 79 ++++++++++++++--------
 .../collections/collectionSchema/SchemaRowBox.tsx  |  5 +-
 .../collectionSchema/SchemaTableCell.tsx           |  4 +-
 4 files changed, 59 insertions(+), 38 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 308520154..9c4eda3b8 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -533,7 +533,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         return cell;
     }
 
-    findCellRefs = (text: string, retRawMatches?: boolean) => {
+    findCellRefs = (text: string) => {
         const pattern = /(this|d(\d+))\.(\w+)/g;
         interface Match { docRef: string; field: string; }
 
@@ -545,13 +545,12 @@ export class CollectionSchemaView extends CollectionSubView() {
             matches.push({ docRef, field: match[3] });
         }
 
-        if (retRawMatches) return matches;
-
         const cells: Array<any> = [];
         matches.forEach((match: Match) => {
             const {docRef, field} = match;
-            const doc = DocumentManager.Instance.DocumentViews[Number(docRef)].Document;
-            if (this.columnKeys.includes(field)) {cells.push([doc, field])}
+            const docView = DocumentManager.Instance.DocumentViews[Number(docRef)];
+            const doc = docView?.Document ?? undefined;
+            if (this.columnKeys.includes(field) && this._docs.includes(doc)) {cells.push([doc, field])}
         })
 
         return cells;
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index dcfa4f6f2..e2aa27a95 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -18,7 +18,7 @@ export interface SchemaCellFieldProps {
     highlightCells?: (text: string) => void;
     GetValue(): string | undefined;
     SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean;
-    func: (text: string, raw: boolean) => HTMLDivElement[] | [];
+    getCells: (text: string) => HTMLDivElement[] | [];
 }
 
 @observer
@@ -26,7 +26,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _inputref: HTMLDivElement | null = null;
-    private _content: string = '';
+    private _unrenderedContent: string = '';
     _overlayDisposer?: () => void;
     @observable _editing: boolean = false;
     @observable _displayedContent = '';
@@ -40,8 +40,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     componentDidMount(): void {
         setTimeout(() => { 
-            this._content = this._props.GetValue() ?? '';
-            this.setContent(this._content);
+            this._unrenderedContent = this._props.GetValue() ?? '';
+            this.setContent(this._unrenderedContent, true);
         }, 0); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function
         this._disposers.editing = reaction(
             () => this._editing,
@@ -52,8 +52,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                             this._overlayDisposer?.();
                             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
                             this._props.highlightCells?.(this._props.GetValue() ?? '');
-                            if (this._props.Document.type === 'collection') console.log('highlight: ' + this._props.GetValue())
-                            this.setContent(this._content);
+                            this.setContent(this._unrenderedContent, true);
                         } 
                     });
                 } else {
@@ -82,33 +81,44 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this.finalizeEdit(false, true, false);
     }
 
-    chunkContent = (content: string) => {
-        const pattern = /(this|d(\d+))\.(\w+)/g;
-        interface Match { docRef: string; field: string; }
+    makeSpans = (content: string) => {
+        let chunkedText = content;
+        chunkedText = chunkedText.replace(/ +/g, (match) => {
+            const spanSpaces = '&nbsp;'.repeat(match.length);
+            return `<span>${spanSpaces}</span>`;
+        });
 
-        const matches: Match[] = [];
+        const pattern = /(this|d(\d+))\.(\w+)/g;
+        const matches: string[] = [];
         let match: RegExpExecArray | null;
 
+        const cells: Map<string, HTMLDivElement> = new Map();
+
         while ((match = pattern.exec(content)) !== null) {
-            const docRef = match[1] === 'this' ? match[1] : match[2]; 
-            matches.push({ docRef, field: match[3] });
+            const cell = this._props.getCells(match[0]);
+            if (cell.length) {
+                matches.push(match[0]);
+                cells.set(match[0], cell[0])
+            }
         }
 
-        const cells = this._props.func(content, false);
-        let chunkedText = content;
         let matchNum = 0;
-        matches.forEach((match: Match) => {
-            const {docRef, field} = match;
+        matches.forEach((match: string) => {
             // const refToUse = docRef === 'this' ? `${this.docIndex}` : docRef;
-            chunkedText = chunkedText.replace(`d${docRef}.${field}`, `<span style="color: ${cells[matchNum].style.borderTop.replace('2px solid', '')}">d${docRef}.${field}</span>`);
+            chunkedText = chunkedText.replace(match, `<span style="color: ${cells.get(match)?.style.borderTop.replace('2px solid', '')}">${match}</span>`);
             ++matchNum;
         })
+
         return chunkedText;
     }
 
     @action 
-    setContent = (content: string) => {
-        this._displayedContent = this.chunkContent(content);
+    setContent = (content: string, restoreCursorPos?: boolean) => {
+        this._displayedContent = this.makeSpans(content);
+        if (restoreCursorPos) { 
+            const cursorPos = this.cursorPosition;
+            setTimeout(() => this.restoreCursorPosition(cursorPos), 0);
+        }
     }
 
     @action
@@ -164,9 +174,13 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         setRange(this._inputref.childNodes);
     };
 
+    shouldUpdate = (prevVal: string, currVal: string) => {
+        if (this._props.getCells(currVal).length !== this._props.getCells(prevVal).length) return true;
+        //if (contains self-ref pattern)
+    };
+
     onChange = (e: FormEvent<HTMLDivElement>) => {
-        const cursorPos = this.cursorPosition;
-        const prevVal = this._content;
+        const prevVal = this._unrenderedContent;
         const targVal = e.currentTarget.innerText;
         if (!(targVal.startsWith(':=') || targVal.startsWith('='))) {
             this._overlayDisposer?.();
@@ -174,12 +188,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         } else if (!this._overlayDisposer) {
             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
         }
-        this._content = targVal;
+        this._unrenderedContent = targVal;
         this._props.highlightCells?.(targVal);
-        if (this._props.func(targVal, true).length > this._props.func(prevVal, true).length) {
-            this.setContent(targVal);
-            setTimeout(() => this.restoreCursorPosition(cursorPos), 0);
-        }
+        if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)};
     };
 
     @action
@@ -206,6 +217,18 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             case 'ArrowUp': case 'ArrowDown': case 'ArrowLeft': case 'ArrowRight': //prettier-ignore
                 e.stopPropagation();
                 break;
+            case ' ':
+                e.stopPropagation();
+                setTimeout(() => {
+                    this.setContent(this._unrenderedContent);
+                    const cursorPos = this.cursorPosition;
+                    setTimeout(() => this.restoreCursorPosition(cursorPos), 0);
+                }
+                , 0);
+                break;
+            case 'u': // for some reason 'u' otherwise exits the editor
+                e.stopPropagation();
+                break;
             case 'Shift': case 'Alt': case 'Meta': case 'Control': case ':': //prettier-ignore
                 break;
             // eslint-disable-next-line no-fallthrough
@@ -225,8 +248,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     @action
     finalizeEdit(shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
-        this.setContent(this._content);
-        if (this._props.SetValue(this._content, shiftDown, enterKey)) {
+        this.setContent(this._unrenderedContent);
+        if (this._props.SetValue(this._unrenderedContent, shiftDown, enterKey)) {
             this._editing = false;
         } else {
             this._editing = false;
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 6f6b6decf..f4320dc09 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -125,9 +125,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     equationHighlightRef = (text: string) => {
     
     }
-    eqHighlightFunc = (text: string, raw: boolean) => {
-        const info = this.schemaView.findCellRefs(text, raw);
-        if (raw) return info;
+    eqHighlightFunc = (text: string) => {
+        const info = this.schemaView.findCellRefs(text);
         const cells: HTMLDivElement[] = [];
         info.forEach(info => {cells.push(this.schemaView.getCellElement(info[0], info[1]))})
         return cells;
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 94fd9ec7d..ab384a487 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -63,7 +63,7 @@ export interface SchemaTableCellProps {
     isolatedSelection: [boolean, boolean];
     highlightCells: (text: string) => void;
     equationHighlightRef: ObservableMap<HTMLDivElement, string>;
-    func: (text: string, raw: boolean) => HTMLDivElement[] | [];
+    func: (text: string) => HTMLDivElement[] | [];
 
 }
 
@@ -184,7 +184,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 <SchemaCellField
                     Document={this._props.Document}
                     highlightCells={this.adjustedHighlight}
-                    func={this._props.func}
+                    getCells={this._props.func}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
                     oneLine={this._props.oneLine}
                     contents={undefined}
-- 
cgit v1.2.3-70-g09d2


From fc1fd8902b090b75c81347a37cce15145322b4e2 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sat, 22 Jun 2024 23:55:38 -0400
Subject: moving row no longer messes up cell field (of course it was
 batching...)

---
 src/client/views/EditableView.tsx                              |  2 +-
 .../views/collections/collectionSchema/SchemaCellField.tsx     | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 78977bcb8..8e48b4c11 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -193,7 +193,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     @action
     onClick = (e?: React.MouseEvent) => {
         this._props.onClick && this._props.onClick();
-        if (this._props.editing !== false) {
+        if (this._props.editing) {
             e?.nativeEvent.stopPropagation();
             if (this._ref.current && this._props.showMenuOnLoad) {
                 this._props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y);
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index e2aa27a95..ffda334ec 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -34,15 +34,17 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     constructor(props: SchemaCellFieldProps) {
         super(props);
         makeObservable(this);
+        setTimeout(() => { 
+            this._unrenderedContent = this._props.GetValue() ?? '';
+            this.setContent(this._unrenderedContent, true);
+        }, 0); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function
     }
 
     get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore
 
     componentDidMount(): void {
-        setTimeout(() => { 
-            this._unrenderedContent = this._props.GetValue() ?? '';
-            this.setContent(this._unrenderedContent, true);
-        }, 0); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function
+        this._unrenderedContent = this._props.GetValue() ?? '';
+        this.setContent(this._unrenderedContent, true);
         this._disposers.editing = reaction(
             () => this._editing,
             editing => {
-- 
cgit v1.2.3-70-g09d2


From 4c56da7db9feb018e004354bb6bf333d3890d91b Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 23 Jun 2024 00:12:31 -0400
Subject: text cursor icon in cell

---
 src/client/views/collections/collectionSchema/SchemaCellField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index ffda334ec..08231dd91 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -280,7 +280,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             contentEditable
             className='schemaField-editing'
             ref={r => { this._inputref = r; }}
-            style={{ outline: 'none', overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }}
+            style={{ cursor: 'text', outline: 'none', overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }}
             onBlur={e => this.finalizeEdit(false, true, false)}
             autoFocus
             onInput={this.onChange}
-- 
cgit v1.2.3-70-g09d2


From 1775ceb9b840ab73194eb84e673ef692c1fef454 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 23 Jun 2024 00:25:19 -0400
Subject: drag text highlighting

---
 src/client/views/collections/collectionSchema/SchemaCellField.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 08231dd91..fc191014c 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -288,6 +288,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             onPointerDown={e => e.stopPropagation}
             onClick={e => e.stopPropagation}
             onPointerUp={e => e.stopPropagation}
+            onPointerMove={e => {e.stopPropagation(); e.preventDefault()}}
             dangerouslySetInnerHTML={{ __html: this._displayedContent }}
             >
             </div>
-- 
cgit v1.2.3-70-g09d2


From 9fab1b3ac096138fba3a99a2515ec44b526a3956 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 23 Jun 2024 02:54:24 -0400
Subject: text highlight works with 'this.' format

---
 src/client/views/collections/collectionSchema/SchemaCellField.tsx | 7 +++++--
 src/client/views/collections/collectionSchema/SchemaRowBox.tsx    | 2 ++
 src/client/views/collections/collectionSchema/SchemaTableCell.tsx | 8 ++++----
 3 files changed, 11 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index fc191014c..aa6c382ef 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -53,7 +53,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                         if (this._inputref?.innerText.startsWith('=') || this._inputref?.innerText.startsWith(':=')) {
                             this._overlayDisposer?.();
                             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
-                            this._props.highlightCells?.(this._props.GetValue() ?? '');
+                            this._props.highlightCells?.(this._unrenderedContent);
                             this.setContent(this._unrenderedContent, true);
                         } 
                     });
@@ -98,15 +98,18 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
         while ((match = pattern.exec(content)) !== null) {
             const cell = this._props.getCells(match[0]);
+            //console.log(cell)
             if (cell.length) {
                 matches.push(match[0]);
                 cells.set(match[0], cell[0])
             }
         }
 
+        //console.log(cells)
+
         let matchNum = 0;
         matches.forEach((match: string) => {
-            // const refToUse = docRef === 'this' ? `${this.docIndex}` : docRef;
+            const adjMatch = match.replace('this.', `d${this.docIndex}`)
             chunkedText = chunkedText.replace(match, `<span style="color: ${cells.get(match)?.style.borderTop.replace('2px solid', '')}">${match}</span>`);
             ++matchNum;
         })
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index f4320dc09..45f178815 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -22,6 +22,7 @@ import { ContextMenu } from '../../ContextMenu';
 import { CollectionFreeFormView } from '../collectionFreeForm';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { infoState } from '../collectionFreeForm/CollectionFreeFormInfoState';
 
 interface SchemaRowBoxProps extends FieldViewProps {
     rowIndex: number;
@@ -129,6 +130,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         const info = this.schemaView.findCellRefs(text);
         const cells: HTMLDivElement[] = [];
         info.forEach(info => {cells.push(this.schemaView.getCellElement(info[0], info[1]))})
+        console.log('info: ' + info + ' cells: ' + cells);
         return cells;
     };
     render() {
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index ab384a487..6ccada48c 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -144,10 +144,10 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         return { color, textDecoration, fieldProps, cursor, pointerEvents };
     }
         
-    adjustedHighlight = (field: string) => {
+    adjustSelfReference = (field: string) => {
         const pattern = /\bthis.\b/g;  
         const modField = field.replace(pattern, `d${this.docIndex}.`);
-        this._props.highlightCells(modField);
+        return modField;
     }
 
     // parses a field from the "idToDoc(####)" format to DocumentId (d#) format for readability
@@ -183,8 +183,8 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 }}>
                 <SchemaCellField
                     Document={this._props.Document}
-                    highlightCells={this.adjustedHighlight}
-                    getCells={this._props.func}
+                    highlightCells={(text: string) => this._props.highlightCells(this.adjustSelfReference(text))}
+                    getCells={(text: string) => this._props.func(this.adjustSelfReference(text))}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
                     oneLine={this._props.oneLine}
                     contents={undefined}
-- 
cgit v1.2.3-70-g09d2


From b2691d6119dfa1f192ac6eb19650f44742b253f5 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 23 Jun 2024 03:36:21 -0400
Subject: col filling (really external setting of cell fieldval) works properly
 (reaction); moved 'remove doc' option to bottom of row menu

---
 .../collectionSchema/CollectionSchemaView.tsx           |  6 +++---
 .../collections/collectionSchema/SchemaCellField.tsx    | 17 +++++++++++------
 .../views/collections/collectionSchema/SchemaRowBox.tsx | 13 ++++++-------
 .../collections/collectionSchema/SchemaTableCell.tsx    |  4 +---
 4 files changed, 21 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 9c4eda3b8..2a84efa7c 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -829,9 +829,9 @@ export class CollectionSchemaView extends CollectionSubView() {
         this.closeColumnMenu();
     };
 
-    setCellValues = (key: string, value: string) => {
-        if (this._selectedCells.length === 1) this.docs.forEach(doc => !doc._lockedSchemaEditing &&Doc.SetField(doc, key, value)); // if only one cell selected, fill all
-        else this._selectedCells.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); // else only fill selected cells
+    setColumnValues = (key: string, value: string) => {
+        if (this._selectedCells.length === 1) this.docs.forEach(doc => !doc._lockedSchemaEditing &&Doc.SetField(doc, key, value)); 
+        else this._selectedCells.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); 
         return true;
     };
 
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index aa6c382ef..e85bf75e6 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -36,7 +36,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         makeObservable(this);
         setTimeout(() => { 
             this._unrenderedContent = this._props.GetValue() ?? '';
-            this.setContent(this._unrenderedContent, true);
+            this.setContent(this._unrenderedContent);
         }, 0); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function
     }
 
@@ -65,6 +65,13 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             },
             { fireImmediately: true }
         );
+        this._disposers.fieldUpdate = reaction(
+            () => this._props.GetValue(),
+            fieldVal => {
+                this._unrenderedContent = fieldVal ?? '';
+                this.setContent(this._unrenderedContent);
+            }
+        )
     }
 
     componentDidUpdate(prevProps: Readonly<SchemaCellFieldProps>) {
@@ -79,7 +86,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     componentWillUnmount(): void {
         this._overlayDisposer?.();
-        this._disposers.editing?.();
+        Object.values(this._disposers).forEach(disposer => disposer?.());
         this.finalizeEdit(false, true, false);
     }
 
@@ -98,15 +105,12 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
         while ((match = pattern.exec(content)) !== null) {
             const cell = this._props.getCells(match[0]);
-            //console.log(cell)
             if (cell.length) {
                 matches.push(match[0]);
                 cells.set(match[0], cell[0])
             }
         }
 
-        //console.log(cells)
-
         let matchNum = 0;
         matches.forEach((match: string) => {
             const adjMatch = match.replace('this.', `d${this.docIndex}`)
@@ -237,6 +241,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             case 'Shift': case 'Alt': case 'Meta': case 'Control': case ':': //prettier-ignore
                 break;
             // eslint-disable-next-line no-fallthrough
+            case 'P':
+                break;
             default:
                 break;
         }
@@ -253,7 +259,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     @action
     finalizeEdit(shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
-        this.setContent(this._unrenderedContent);
         if (this._props.SetValue(this._unrenderedContent, shiftDown, enterKey)) {
             this._editing = false;
         } else {
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 45f178815..d2c0d891f 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -60,11 +60,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
 
     openContextMenu = (x: number, y: number) => {
         ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({
-            description: `Close doc`,
-            event: () => this.schemaView.removeDoc(this.Document),
-            icon: 'minus',
-        });
         ContextMenu.Instance.addItem({
             description: this.Document._lockedSchemaEditing ? 'Unlock field editing' : 'Lock field editing',
             event: () => this.Document._lockedSchemaEditing = !this.Document._lockedSchemaEditing,
@@ -75,6 +70,11 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
             event: () => this._props.addDocTab(this.Document, OpenWhere.addRight),
             icon: 'magnifying-glass',
         });
+        ContextMenu.Instance.addItem({
+            description: `Close doc`,
+            event: () => this.schemaView.removeDoc(this.Document),
+            icon: 'minus',
+        });
         const childDocs = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)])
         if (this.Document.type === 'collection' && childDocs.length) {
                 ContextMenu.Instance.addItem({
@@ -119,7 +119,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     selectCell = (doc: Doc, col: number, shift: boolean, ctrl: boolean) => this.schemaView?.selectCell(doc, col, shift, ctrl);
     deselectCell = () => this.schemaView?.deselectAllCells();
     selectedCells = () => this.schemaView?._selectedDocs;
-    setColumnValues = (field: any, value: any) => this.schemaView?.setCellValues(field, value) ?? false;
+    setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false;
     columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth);
     computeRowIndex = () => this.schemaView?.rowIndex(this.Document);
     highlightCells = (text: string) => this.schemaView?.highlightCells(text);
@@ -130,7 +130,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         const info = this.schemaView.findCellRefs(text);
         const cells: HTMLDivElement[] = [];
         info.forEach(info => {cells.push(this.schemaView.getCellElement(info[0], info[1]))})
-        console.log('info: ' + info + ' cells: ' + cells);
         return cells;
     };
     render() {
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 6ccada48c..aa8401502 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -145,14 +145,12 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
     }
         
     adjustSelfReference = (field: string) => {
-        const pattern = /\bthis.\b/g;  
-        const modField = field.replace(pattern, `d${this.docIndex}.`);
+        const modField = field.replace(/\bthis.\b/g, `d${this.docIndex}.`);
         return modField;
     }
 
     // parses a field from the "idToDoc(####)" format to DocumentId (d#) format for readability
     cleanupField = (field: string) => {
-        if (field === ':=d6.type + d4.type + d3.type') console.log(true)
         const idPattern = /idToDoc\((.*?)\)/g;
         let modField = field.slice();
         let matches;
-- 
cgit v1.2.3-70-g09d2


From 9197630d59f4ae4624e3b47b794e0a5fa7bc080d Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 24 Jun 2024 12:14:51 -0400
Subject: Work on persistent sort highlight + equation highlight inteeraction

---
 .../collectionSchema/CollectionSchemaView.tsx      | 30 ++++++++++++----------
 .../collectionSchema/SchemaCellField.tsx           | 11 ++++----
 2 files changed, 23 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 2a84efa7c..018fd35b5 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -101,7 +101,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _colBeingDragged: boolean = false;
     @observable _colKeysFiltered: boolean = false;
     @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>();
-    @observable _highlightedCells: Array<[doc: Doc, field: string]> = [];
+    @observable _highlightedCellsInfo: Array<[doc: Doc, field: string]> = [];
     @observable _cellHighlightColors: ObservableMap = new ObservableMap<[doc: Doc, field: string], string[]>();
     @observable _docs: Doc[] = [];
     
@@ -124,6 +124,10 @@ export class CollectionSchemaView extends CollectionSubView() {
         return selected;
     }
 
+    @computed get highlightedCells() {
+        return this._highlightedCellsInfo.map(info => this.getCellElement(info[0], info[1]));
+    }
+
     @computed get documentKeys() {
         return Array.from(this.fieldInfos.keys());
     }
@@ -199,8 +203,8 @@ export class CollectionSchemaView extends CollectionSubView() {
             {fireImmediately: true}
         )
         this._disposers.sortHighlight = reaction(
-            () => [this.sortField, this._docs, this._selectedDocs, this._highlightedCells], 
-            () => {this.sortField && setTimeout(() => this.highlightSortedColumn(), 5)},
+            () => [this.sortField, this._docs, this._selectedDocs, this._highlightedCellsInfo], 
+            () => {this.sortField && setTimeout(() => this.highlightSortedColumn(), 0)},
             {fireImmediately: true}
         )
     }
@@ -517,12 +521,15 @@ export class CollectionSchemaView extends CollectionSubView() {
             ];
             const cellCount = cellEles.length;
             for (let ele = 0; ele < cellCount; ++ele){
+                const toHighlight = cellEles[ele];
+                if (!this.highlightedCells.includes(toHighlight)){
                 const style = highlight ? desc ? `${highlightColors[cellCount - 1 - ele]}` : `${highlightColors[ele]}` : '';
-                cellEles[ele].style.borderLeft = style;
-                cellEles[ele].style.borderRight = style;
+                toHighlight.style.borderLeft = style;
+                toHighlight.style.borderRight = style;
+                }
             }
             cellEles[0].style.borderTop = highlight ? desc ? `${highlightColors[cellCount - 1]}` : `${highlightColors[0]}` : '';
-            if (!(cellCount < rowCount)) cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` :  `${highlightColors[cellCount - 1]}` : ''; 
+            if (!(this._selectedDocs.includes(this.docsWithDrag.docs[this.docsWithDrag.docs.length - 1]) && this._selectedCol === index)) cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` :  `${highlightColors[cellCount - 1]}` : ''; 
         });
         
     }
@@ -557,11 +564,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     removeCellHighlights = () => {
-        this._highlightedCells.forEach(info => {
-            const cell = this.getCellElement(info[0], info[1]);
-            cell.style.border = ''; cell.style.backgroundColor = '';
-        });
-        this._highlightedCells = [];
+        this.highlightedCells.forEach(cell => {cell.style.border = ''; cell.style.backgroundColor = '';});
+        this._highlightedCellsInfo = [];
     }
 
     highlightCells = (text: string) => {
@@ -581,8 +585,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         }
 
         const cellsToHighlight = this.findCellRefs(text);
-        this._highlightedCells = [...cellsToHighlight];
-        this._highlightedCells.forEach(info => {
+        this._highlightedCellsInfo = [...cellsToHighlight];
+        this._highlightedCellsInfo.forEach(info => {
             const color = randomRGBColor();
             const doc = info[0]; 
             const field = info[1];
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index e85bf75e6..ccd15cbd0 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -92,10 +92,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     makeSpans = (content: string) => {
         let chunkedText = content;
-        chunkedText = chunkedText.replace(/ +/g, (match) => {
-            const spanSpaces = '&nbsp;'.repeat(match.length);
-            return `<span>${spanSpaces}</span>`;
-        });
 
         const pattern = /(this|d(\d+))\.(\w+)/g;
         const matches: string[] = [];
@@ -123,6 +119,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     @action 
     setContent = (content: string, restoreCursorPos?: boolean) => {
+        console.log('content: ' + content)
         this._displayedContent = this.makeSpans(content);
         if (restoreCursorPos) { 
             const cursorPos = this.cursorPosition;
@@ -147,6 +144,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         adjRange.selectNodeContents(this._inputref);
         adjRange.setEnd(range.startContainer, range.startOffset);
 
+        console.log(adjRange.toString().length)
+
         return adjRange.toString().length; 
     }
 
@@ -228,9 +227,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                 break;
             case ' ':
                 e.stopPropagation();
+                console.log('deteected')
+                let cursorPos = 0;
+                if (this.cursorPosition !== null) cursorPos = this.cursorPosition + 1;
                 setTimeout(() => {
                     this.setContent(this._unrenderedContent);
-                    const cursorPos = this.cursorPosition;
                     setTimeout(() => this.restoreCursorPosition(cursorPos), 0);
                 }
                 , 0);
-- 
cgit v1.2.3-70-g09d2


From 227a289e49019ad1e9f634b098bb564bd4a8e743 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 24 Jun 2024 13:49:43 -0400
Subject: cell/column highlight interactions (maybe some minor bugs left but at
 least 95%)

---
 src/client/views/EditableView.tsx                  |  8 +---
 .../collectionSchema/CollectionSchemaView.tsx      | 44 +++++++++++++++-------
 .../collectionSchema/SchemaCellField.tsx           | 24 ++++++++----
 3 files changed, 49 insertions(+), 27 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 8e48b4c11..0c09e12de 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -193,7 +193,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     @action
     onClick = (e?: React.MouseEvent) => {
         this._props.onClick && this._props.onClick();
-        if (this._props.editing) {
+        if (this._props.editing !== false) {
             e?.nativeEvent.stopPropagation();
             if (this._ref.current && this._props.showMenuOnLoad) {
                 this._props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y);
@@ -203,11 +203,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
             }
         }
     };
-
-    // checkForInvalidText = (text: string) => {
-    //     const regX = new RegExp(new Array<string>(...this._props.prohibitedText), 'g')
-    // }
-
+    
     @action
     finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
         //if (invalid) raise error
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 018fd35b5..48c34c647 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -102,8 +102,9 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _colKeysFiltered: boolean = false;
     @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>();
     @observable _highlightedCellsInfo: Array<[doc: Doc, field: string]> = [];
-    @observable _cellHighlightColors: ObservableMap = new ObservableMap<[doc: Doc, field: string], string[]>();
+    @observable _cellHighlightColors: ObservableMap = new ObservableMap<string, string[]>();
     @observable _docs: Doc[] = [];
+    @observable _inCellSelectMode: boolean = false;
     
     // target HTMLelement portal for showing a popup menu to edit cell values.
     public get MenuTarget() {
@@ -488,13 +489,13 @@ export class CollectionSchemaView extends CollectionSubView() {
                     .filter(doc => (i !== this._selectedCol || !this._selectedDocs.includes(doc)) && !sorted)
                     .map(doc => this._rowEles.get(doc).children[1].children[i]),
             ];
-            !sorted && (cellEles[0].style.borderTop = edgeStyle);
             cellEles.forEach(ele => {
-                if (ele === cellEles[0] && sorted) return;
+                if (sorted || this.highlightedCells.includes(ele)) return;
+                ele.style.borderTop = ele === cellEles[0] ? edgeStyle : '';
                 ele.style.borderLeft = edgeStyle;
                 ele.style.borderRight = edgeStyle;
+                ele.style.borderBottom = ele === cellEles.slice(-1)[0] ? edgeStyle : '';
             });
-            !sorted && (cellEles.slice(-1)[0].style.borderBottom = edgeStyle);
         });
 
     highlightSortedColumn = (field?: string, descending?: boolean) => {
@@ -521,15 +522,14 @@ export class CollectionSchemaView extends CollectionSubView() {
             ];
             const cellCount = cellEles.length;
             for (let ele = 0; ele < cellCount; ++ele){
-                const toHighlight = cellEles[ele];
-                if (!this.highlightedCells.includes(toHighlight)){
+                const currCell = cellEles[ele];
+                if (this.highlightedCells.includes(currCell)) continue;
                 const style = highlight ? desc ? `${highlightColors[cellCount - 1 - ele]}` : `${highlightColors[ele]}` : '';
-                toHighlight.style.borderLeft = style;
-                toHighlight.style.borderRight = style;
-                }
+                currCell.style.borderLeft = style;
+                currCell.style.borderRight = style;
             }
             cellEles[0].style.borderTop = highlight ? desc ? `${highlightColors[cellCount - 1]}` : `${highlightColors[0]}` : '';
-            if (!(this._selectedDocs.includes(this.docsWithDrag.docs[this.docsWithDrag.docs.length - 1]) && this._selectedCol === index)) cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` :  `${highlightColors[cellCount - 1]}` : ''; 
+            if (!(this._selectedDocs.includes(this.docsWithDrag.docs[this.docsWithDrag.docs.length - 1]) && this._selectedCol === index) && !this.highlightedCells.includes(cellEles[cellCount - 1])) cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` :  `${highlightColors[cellCount - 1]}` : ''; 
         });
         
     }
@@ -568,6 +568,20 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._highlightedCellsInfo = [];
     }
 
+    restoreCellHighlights = () => {
+        this._highlightedCellsInfo.forEach(info => {
+            const doc = info[0];
+            const field = info[1];
+            const key = `${doc[Id]}_${field}`;
+            const cell = this.getCellElement(doc, field);
+            const color = this._cellHighlightColors.get(key)[0];
+            cell.style.borderTop = color;
+            cell.style.borderLeft = color;
+            cell.style.borderRight = color;
+            cell.style.borderBottom = color;
+        });
+    }
+
     highlightCells = (text: string) => {
         this.removeCellHighlights();
 
@@ -690,10 +704,11 @@ export class CollectionSchemaView extends CollectionSubView() {
                 colRef.style.borderTop = '';
 
                 this.childDocs.forEach(doc => {
-                    if (!(this._selectedDocs.includes(doc) && i === this._selectedCol)) {
-                        this._rowEles.get(doc).children[1].children[i].style.borderLeft = '';
-                        this._rowEles.get(doc).children[1].children[i].style.borderRight = '';
-                        this._rowEles.get(doc).children[1].children[i].style.borderBottom = '';
+                    const cell = this._rowEles.get(doc).children[1].children[i];
+                    if (!(this._selectedDocs.includes(doc) && i === this._selectedCol) && !(this.highlightedCells.includes(cell))) {
+                        cell.style.borderLeft = '';
+                        cell.style.borderRight = '';
+                        cell.style.borderBottom = '';
                     }
                 });
             });
@@ -1178,6 +1193,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             if (newIndex !== this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex);
             this._draggedColIndex = newIndex || this._draggedColIndex;
             this.highlightSortedColumn(); //TODO: Make this more efficient
+            this.restoreCellHighlights();
             !(this.sortField && this._draggedColIndex === this.columnKeys.indexOf(this.sortField)) && this.highlightDraggedColumn(newIndex ?? this._draggedColIndex);
         }
     };
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index ccd15cbd0..e13763b45 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -1,4 +1,4 @@
-import { IReactionDisposer, action, makeObservable, observable, reaction, runInAction } from "mobx";
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from "mobx";
 import { ObservableReactComponent } from "../../ObservableReactComponent";
 import { observer } from "mobx-react";
 import { OverlayView } from "../../OverlayView";
@@ -30,6 +30,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     _overlayDisposer?: () => void;
     @observable _editing: boolean = false;
     @observable _displayedContent = '';
+    @observable _inCellSelectMode: boolean = false;
 
     constructor(props: SchemaCellFieldProps) {
         super(props);
@@ -40,6 +41,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         }, 0); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function
     }
 
+    @computed get inCellSelectMode() {
+        return 
+    }
+
     get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore
 
     componentDidMount(): void {
@@ -90,6 +95,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this.finalizeEdit(false, true, false);
     }
 
+    generateSpan = (text: string, cell: HTMLDivElement | undefined) => {
+       return `<span style="color: ${cell?.style.borderTop.replace('2px solid', '')}">${text}</span>`
+    }
+
     makeSpans = (content: string) => {
         let chunkedText = content;
 
@@ -109,8 +118,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
         let matchNum = 0;
         matches.forEach((match: string) => {
-            const adjMatch = match.replace('this.', `d${this.docIndex}`)
-            chunkedText = chunkedText.replace(match, `<span style="color: ${cells.get(match)?.style.borderTop.replace('2px solid', '')}">${match}</span>`);
+            chunkedText = chunkedText.replace(match, this.generateSpan(match, cells.get(match)));
             ++matchNum;
         })
 
@@ -222,8 +230,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                 e.stopPropagation();
                 this._editing = false;
                 break;
-            case 'ArrowUp': case 'ArrowDown': case 'ArrowLeft': case 'ArrowRight': //prettier-ignore
+            case 'ArrowUp': case 'ArrowDown': case 'ArrowLeft': case 'ArrowRight': // prettier-ignore
                 e.stopPropagation();
+                break;
+            case '+': case '*': case '/': case '%': // prettier-ignore
+
                 break;
             case ' ':
                 e.stopPropagation();
@@ -239,12 +250,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             case 'u': // for some reason 'u' otherwise exits the editor
                 e.stopPropagation();
                 break;
-            case 'Shift': case 'Alt': case 'Meta': case 'Control': case ':': //prettier-ignore
+            case 'Shift': case 'Alt': case 'Meta': case 'Control': case ':': // prettier-ignore
                 break;
             // eslint-disable-next-line no-fallthrough
-            case 'P':
-                break;
             default:
+                console.log('default called')
                 break;
         }
     };
-- 
cgit v1.2.3-70-g09d2


From 6a3d0cc899020710d5b9aabe164649c686467024 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 25 Jun 2024 01:14:06 -0400
Subject: progress on refSelect (single click to add cell to equation)

---
 .../collectionSchema/CollectionSchemaView.tsx      | 135 +++++++++++----------
 .../collectionSchema/SchemaCellField.tsx           |  25 ++--
 .../collections/collectionSchema/SchemaRowBox.tsx  |   8 +-
 .../collectionSchema/SchemaTableCell.tsx           |  11 +-
 4 files changed, 106 insertions(+), 73 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 48c34c647..c3dc4bad6 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -42,6 +42,7 @@ import { truncate } from 'lodash';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { TbHemispherePlus } from 'react-icons/tb';
 import { docs_v1 } from 'googleapis';
+import { SchemaCellField } from './SchemaCellField';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -104,7 +105,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _highlightedCellsInfo: Array<[doc: Doc, field: string]> = [];
     @observable _cellHighlightColors: ObservableMap = new ObservableMap<string, string[]>();
     @observable _docs: Doc[] = [];
-    @observable _inCellSelectMode: boolean = false;
+    @observable _referenceSelectMode = {enabled: false, currEditing: undefined}
     
     // target HTMLelement portal for showing a popup menu to edit cell values.
     public get MenuTarget() {
@@ -113,7 +114,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @computed get _selectedDocs() {
         // get all selected documents then filter out any whose parent is not this schema document
-        const selected = DocumentView.SelectedDocs().filter(doc => this.docs.includes(doc));
+        const selected = DocumentView.SelectedDocs().filter(doc => this.docs.includes(doc) && this._selectedCells.includes(doc));
         if (!selected.length) {
             // if no schema doc is directly selected, test if a child of a schema doc is selected (such as in the preview window)
             const childOfSchemaDoc = DocumentView.SelectedDocs().find(sel => DocumentView.getContextPath(sel, true).includes(this.Document));
@@ -651,7 +652,19 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    selectCell = (doc: Doc, col: number, shiftKey: boolean, ctrlKey: boolean) => {
+    selectCell = (doc: Doc | undefined, col: number, shiftKey: boolean, ctrlKey: boolean) => {
+        if (!doc) return;
+
+        if (this._referenceSelectMode.enabled) {
+            const docIndex = DocumentView.getDocViewIndex(doc);
+            const field = this.columnKeys[col];
+            const refToAdd = `d${docIndex}.${field}`
+            const editedField = this._referenceSelectMode.currEditing ? this._referenceSelectMode.currEditing as SchemaCellField : null;
+            editedField?.appendText(refToAdd);
+            editedField?.setupRefSelect(false);
+            return;
+        }
+
         this.closeColumnMenu();
         if (!shiftKey && !ctrlKey) this.clearSelection();
         !this._selectedCells && (this._selectedCells = []);
@@ -1015,64 +1028,64 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._filterSearchValue = e.target.value;
     };
 
-    @computed get newFieldMenu() {
-        return (
-            <div className="schema-new-key-options">
-                <div className="schema-key-type-option">
-                    <input
-                        type="radio"
-                        name="newFieldType"
-                        checked={this._newFieldType === ColumnType.Number}
-                        onChange={action(() => {
-                            this._newFieldType = ColumnType.Number;
-                            this._newFieldDefault = 0;
-                        })}
-                    />
-                    number
-                </div>
-                <div className="schema-key-type-option">
-                    <input
-                        type="radio"
-                        name="newFieldType"
-                        checked={this._newFieldType === ColumnType.Boolean}
-                        onChange={action(() => {
-                            this._newFieldType = ColumnType.Boolean;
-                            this._newFieldDefault = false;
-                        })}
-                    />
-                    boolean
-                </div>
-                <div className="schema-key-type-option">
-                    <input
-                        type="radio"
-                        name="newFieldType"
-                        checked={this._newFieldType === ColumnType.String}
-                        onChange={action(() => {
-                            this._newFieldType = ColumnType.String;
-                            this._newFieldDefault = '';
-                        })}
-                    />
-                    string
-                </div>
-                <div className="schema-key-default-val">value: {this.fieldDefaultInput}</div>
-                <div className="schema-key-warning">{this._newFieldWarning}</div>
-                <div
-                    className="schema-column-menu-button"
-                    onPointerDown={action(() => {
-                        if (this.documentKeys.includes(this._menuValue)) {
-                            this._newFieldWarning = 'Field already exists';
-                        } else if (this._menuValue.length === 0) {
-                            this._newFieldWarning = 'Field cannot be an empty string';
-                        } else {
-                            this.setKey(this._menuValue, this._newFieldDefault);
-                        }
-                        this._columnMenuIndex = undefined;
-                    })}>
-                    done
-                </div>
-            </div>
-        );
-    }
+    // @computed get newFieldMenu() {
+    //     return (
+    //         <div className="schema-new-key-options">
+    //             <div className="schema-key-type-option">
+    //                 <input
+    //                     type="radio"
+    //                     name="newFieldType"
+    //                     checked={this._newFieldType === ColumnType.Number}
+    //                     onChange={action(() => {
+    //                         this._newFieldType = ColumnType.Number;
+    //                         this._newFieldDefault = 0;
+    //                     })}
+    //                 />
+    //                 number
+    //             </div>
+    //             <div className="schema-key-type-option">
+    //                 <input
+    //                     type="radio"
+    //                     name="newFieldType"
+    //                     checked={this._newFieldType === ColumnType.Boolean}
+    //                     onChange={action(() => {
+    //                         this._newFieldType = ColumnType.Boolean;
+    //                         this._newFieldDefault = false;
+    //                     })}
+    //                 />
+    //                 boolean
+    //             </div>
+    //             <div className="schema-key-type-option">
+    //                 <input
+    //                     type="radio"
+    //                     name="newFieldType"
+    //                     checked={this._newFieldType === ColumnType.String}
+    //                     onChange={action(() => {
+    //                         this._newFieldType = ColumnType.String;
+    //                         this._newFieldDefault = '';
+    //                     })}
+    //                 />
+    //                 string
+    //             </div>
+    //             <div className="schema-key-default-val">value: {this.fieldDefaultInput}</div>
+    //             <div className="schema-key-warning">{this._newFieldWarning}</div>
+    //             <div
+    //                 className="schema-column-menu-button"
+    //                 onPointerDown={action(() => {
+    //                     if (this.documentKeys.includes(this._menuValue)) {
+    //                         this._newFieldWarning = 'Field already exists';
+    //                     } else if (this._menuValue.length === 0) {
+    //                         this._newFieldWarning = 'Field cannot be an empty string';
+    //                     } else {
+    //                         this.setKey(this._menuValue, this._newFieldDefault);
+    //                     }
+    //                     this._columnMenuIndex = undefined;
+    //                 })}>
+    //                 done
+    //             </div>
+    //         </div>
+    //     );
+    // }
 
     onKeysPassiveWheel = (e: WheelEvent) => {
         // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this)
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index e13763b45..ea46fb432 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -15,6 +15,8 @@ export interface SchemaCellFieldProps {
     editing?: boolean;
     oneLine?: boolean;
     Document: Doc;
+    fieldKey: string;
+    refSelectModeInfo: {enabled: boolean, currEditing: SchemaCellField | undefined};
     highlightCells?: (text: string) => void;
     GetValue(): string | undefined;
     SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean;
@@ -41,10 +43,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         }, 0); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function
     }
 
-    @computed get inCellSelectMode() {
-        return 
-    }
-
     get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore
 
     componentDidMount(): void {
@@ -66,6 +64,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                     this._overlayDisposer?.();
                     this._overlayDisposer = undefined;
                     this._props.highlightCells?.('');
+                    this.setupRefSelect(false);
                 }
             },
             { fireImmediately: true }
@@ -127,7 +126,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     @action 
     setContent = (content: string, restoreCursorPos?: boolean) => {
-        console.log('content: ' + content)
         this._displayedContent = this.makeSpans(content);
         if (restoreCursorPos) { 
             const cursorPos = this.cursorPosition;
@@ -135,6 +133,12 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         }
     }
 
+    @action
+    appendText = (text: string) => {
+        this._unrenderedContent += text;
+        this.setContent(this._unrenderedContent);
+    }
+
     @action
     setIsFocused = (value: boolean) => {
         const wasFocused = this._editing;
@@ -209,6 +213,12 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)};
     };
 
+    setupRefSelect = (enabled: boolean) => {
+        const properties = this._props.refSelectModeInfo;
+        properties.enabled = enabled;
+        properties.currEditing = enabled ? this : undefined;
+    }
+
     @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.nativeEvent.defaultPrevented) return; // hack .. DashFieldView grabs native events, but react ignores stoppedPropagation and preventDefault, so we need to check it here
@@ -234,7 +244,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                 e.stopPropagation();
                 break;
             case '+': case '*': case '/': case '%': // prettier-ignore
-
+                this.setupRefSelect(true);
                 break;
             case ' ':
                 e.stopPropagation();
@@ -249,12 +259,13 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                 break;
             case 'u': // for some reason 'u' otherwise exits the editor
                 e.stopPropagation();
+                this.setupRefSelect(false);
                 break;
             case 'Shift': case 'Alt': case 'Meta': case 'Control': case ':': // prettier-ignore
                 break;
             // eslint-disable-next-line no-fallthrough
             default:
-                console.log('default called')
+                this.setupRefSelect(false);
                 break;
         }
     };
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index d2c0d891f..b15804d41 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -96,6 +96,10 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         return ''
     }
 
+    @computed get refSelectModeInfo() {
+        return this.schemaView._referenceSelectMode;
+    }
+
     @computed get menuInfos() {
         const infos: Array<IconProp> = [];
         if (this.Document._lockedSchemaEditing) infos.push('lock');
@@ -123,9 +127,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth);
     computeRowIndex = () => this.schemaView?.rowIndex(this.Document);
     highlightCells = (text: string) => this.schemaView?.highlightCells(text);
-    equationHighlightRef = (text: string) => {
-    
-    }
     eqHighlightFunc = (text: string) => {
         const info = this.schemaView.findCellRefs(text);
         const cells: HTMLDivElement[] = [];
@@ -174,6 +175,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                 <div className="row-cells">
                     {this.schemaView?.columnKeys?.map((key, index) => (
                         <SchemaTableCell
+                            refSelectModeInfo={this.refSelectModeInfo}
                             func={this.eqHighlightFunc}
                             equationHighlightRef={this.schemaView._cellHighlightColors}
                             highlightCells={this.highlightCells}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index aa8401502..75b31315e 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -64,7 +64,7 @@ export interface SchemaTableCellProps {
     highlightCells: (text: string) => void;
     equationHighlightRef: ObservableMap<HTMLDivElement, string>;
     func: (text: string) => HTMLDivElement[] | [];
-
+    refSelectModeInfo: {enabled: boolean, currEditing: SchemaCellField | undefined};
 }
 
 function selectedCell(props: SchemaTableCellProps) {
@@ -78,7 +78,7 @@ function selectedCell(props: SchemaTableCellProps) {
 @observer
 export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellProps> {
 
-    @observable _highlighted: boolean = false;
+    // private _fieldRef: SchemaCellField | null = null;
 
     constructor(props: SchemaTableCellProps) {
         super(props);
@@ -143,6 +143,11 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         const pointerEvents: 'all' | 'none' = !readOnly && isRowActive() ? 'all' : 'none';
         return { color, textDecoration, fieldProps, cursor, pointerEvents };
     }
+
+    // @action
+    // appendTextToField = (text: string) => {
+    //     this._fieldRef?.appendText(text);
+    // }
         
     adjustSelfReference = (field: string) => {
         const modField = field.replace(/\bthis.\b/g, `d${this.docIndex}.`);
@@ -180,6 +185,8 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     pointerEvents: this.lockedInteraction ? 'none' : pointerEvents,
                 }}>
                 <SchemaCellField
+                    fieldKey={this._props.fieldKey}
+                    refSelectModeInfo={this._props.refSelectModeInfo}
                     Document={this._props.Document}
                     highlightCells={(text: string) => this._props.highlightCells(this.adjustSelfReference(text))}
                     getCells={(text: string) => this._props.func(this.adjustSelfReference(text))}
-- 
cgit v1.2.3-70-g09d2


From 434fe9b5f27a14dc7bddeea9628abe4aaa62ce21 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 25 Jun 2024 01:56:34 -0400
Subject: scrolling for field text

---
 src/client/views/EditableView.scss                                | 8 +++++++-
 src/client/views/collections/collectionSchema/SchemaCellField.tsx | 4 ++++
 2 files changed, 11 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.scss b/src/client/views/EditableView.scss
index d2f11f5e1..fa4542ac4 100644
--- a/src/client/views/EditableView.scss
+++ b/src/client/views/EditableView.scss
@@ -3,11 +3,17 @@
     overflow-wrap: break-word;
     word-wrap: break-word;
     hyphens: auto;
-    overflow: hidden;
+    overflow-y: auto;
     height: 100%;
     width: 100%;
     min-width: 20;
     text-overflow: ellipsis;
+    -ms-overflow-style: none; 
+    scrollbar-width: none; 
+}
+
+.editableView-container-editing::-webkit-scrollbar {
+    display: none; 
 }
 
 .editableView-container-editing-oneLine {
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index ea46fb432..9d9fcbd1f 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -94,6 +94,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this.finalizeEdit(false, true, false);
     }
 
+    // @computed get lastChar(){
+    //     this.
+    // }
+
     generateSpan = (text: string, cell: HTMLDivElement | undefined) => {
        return `<span style="color: ${cell?.style.borderTop.replace('2px solid', '')}">${text}</span>`
     }
-- 
cgit v1.2.3-70-g09d2


From 3809bb004617a20fd631388d9cf404fa34c3ad52 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 25 Jun 2024 02:57:44 -0400
Subject: refselect consistency

---
 .../collectionSchema/SchemaCellField.tsx           | 24 +++++++++++++---------
 1 file changed, 14 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 9d9fcbd1f..84b4d3462 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -45,6 +45,16 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore
 
+    @computed get lastChar(){
+        const text = this._unrenderedContent.slice();
+        for (let i = text.length - 1; i > 0; --i) {
+            if (text.charCodeAt(i) !== 160 && text.charCodeAt(i) !== 32) {
+                return text[i];
+            }
+        }
+        return null;
+    }
+
     componentDidMount(): void {
         this._unrenderedContent = this._props.GetValue() ?? '';
         this.setContent(this._unrenderedContent, true);
@@ -94,10 +104,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this.finalizeEdit(false, true, false);
     }
 
-    // @computed get lastChar(){
-    //     this.
-    // }
-
     generateSpan = (text: string, cell: HTMLDivElement | undefined) => {
        return `<span style="color: ${cell?.style.borderTop.replace('2px solid', '')}">${text}</span>`
     }
@@ -215,6 +221,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this._unrenderedContent = targVal;
         this._props.highlightCells?.(targVal);
         if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)};
+        console.log(this.lastChar === '+');
+        if (this.lastChar === '+') this.setupRefSelect(true);
+        else this.setupRefSelect(false);
     };
 
     setupRefSelect = (enabled: boolean) => {
@@ -247,12 +256,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             case 'ArrowUp': case 'ArrowDown': case 'ArrowLeft': case 'ArrowRight': // prettier-ignore
                 e.stopPropagation();
                 break;
-            case '+': case '*': case '/': case '%': // prettier-ignore
-                this.setupRefSelect(true);
-                break;
             case ' ':
                 e.stopPropagation();
-                console.log('deteected')
                 let cursorPos = 0;
                 if (this.cursorPosition !== null) cursorPos = this.cursorPosition + 1;
                 setTimeout(() => {
@@ -263,13 +268,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                 break;
             case 'u': // for some reason 'u' otherwise exits the editor
                 e.stopPropagation();
-                this.setupRefSelect(false);
                 break;
             case 'Shift': case 'Alt': case 'Meta': case 'Control': case ':': // prettier-ignore
                 break;
             // eslint-disable-next-line no-fallthrough
             default:
-                this.setupRefSelect(false);
                 break;
         }
     };
@@ -285,6 +288,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     @action
     finalizeEdit(shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
+        // while (this.lastChar === '+') { this._unrenderedContent = this._unrenderedContent.slice(0, -1); }
         if (this._props.SetValue(this._unrenderedContent, shiftDown, enterKey)) {
             this._editing = false;
         } else {
-- 
cgit v1.2.3-70-g09d2


From 54559c677ac3a91e72680b5b7c889d63439edf58 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 25 Jun 2024 12:10:05 -0400
Subject: focus is no longer lost

---
 src/client/util/SelectionManager.ts                |  1 +
 .../collectionSchema/CollectionSchemaView.tsx      | 26 ++++++++++++----------
 .../collectionSchema/SchemaCellField.tsx           | 11 ++++-----
 .../collections/collectionSchema/SchemaRowBox.tsx  |  3 +++
 .../collectionSchema/SchemaTableCell.tsx           |  8 +++++++
 5 files changed, 32 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 0b942116c..fc494583f 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -58,6 +58,7 @@ export class SelectionManager {
     });
 
     public static DeselectAll = (except?: Doc): void => {
+        
         const found = this.Instance.SelectedViews.find(dv => dv.Document === except);
         runInAction(() => {
             if (LinkManager.Instance) {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index c3dc4bad6..3b5a32ca7 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -634,6 +634,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     clearSelection = () => {
+        if (this._referenceSelectMode.enabled) return;
         DocumentView.DeselectAll();
         this.deselectAllCells();
     };
@@ -651,20 +652,19 @@ export class CollectionSchemaView extends CollectionSubView() {
         }
     };
 
-    @action
-    selectCell = (doc: Doc | undefined, col: number, shiftKey: boolean, ctrlKey: boolean) => {
+    selectReference = (doc: Doc | undefined, col: number) => {
         if (!doc) return;
+        const docIndex = DocumentView.getDocViewIndex(doc);
+        const field = this.columnKeys[col];
+        const refToAdd = `d${docIndex}.${field}`
+        const editedField = this._referenceSelectMode.currEditing ? this._referenceSelectMode.currEditing as SchemaCellField : null;
+        editedField?.appendText(refToAdd);
+        editedField?.setupRefSelect(false);
+        return;
+    }
 
-        if (this._referenceSelectMode.enabled) {
-            const docIndex = DocumentView.getDocViewIndex(doc);
-            const field = this.columnKeys[col];
-            const refToAdd = `d${docIndex}.${field}`
-            const editedField = this._referenceSelectMode.currEditing ? this._referenceSelectMode.currEditing as SchemaCellField : null;
-            editedField?.appendText(refToAdd);
-            editedField?.setupRefSelect(false);
-            return;
-        }
-
+    @action
+    selectCell = (doc: Doc, col: number, shiftKey: boolean, ctrlKey: boolean) => {
         this.closeColumnMenu();
         if (!shiftKey && !ctrlKey) this.clearSelection();
         !this._selectedCells && (this._selectedCells = []);
@@ -687,12 +687,14 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     deselectCell = (doc: Doc) => {
+        console.log('single deselect called')
         this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc));
         if (this.rowIndex(doc) === this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(d => this.rowIndex(d)));
     };
 
     @action
     deselectAllCells = () => {
+        console.log('deselectall called')
         this._selectedCells = [];
         this._lowestSelectedIndex = -1;
     };
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 84b4d3462..06d3926a8 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -62,6 +62,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             () => this._editing,
             editing => {
                 if (editing) {
+                    if (this.lastChar !== '+') this.setupRefSelect(false);
                     setTimeout(() => {
                         if (this._inputref?.innerText.startsWith('=') || this._inputref?.innerText.startsWith(':=')) {
                             this._overlayDisposer?.();
@@ -145,8 +146,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     @action
     appendText = (text: string) => {
-        this._unrenderedContent += text;
-        this.setContent(this._unrenderedContent);
+        const newText = this._unrenderedContent.concat(text);
+        this.onChange(undefined, newText);
     }
 
     @action
@@ -209,9 +210,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         //if (contains self-ref pattern)
     };
 
-    onChange = (e: FormEvent<HTMLDivElement>) => {
+    onChange = (e: FormEvent<HTMLDivElement> | undefined, newText?: string) => {
         const prevVal = this._unrenderedContent;
-        const targVal = e.currentTarget.innerText;
+        const targVal = newText ?? e!.currentTarget.innerText; // TODO: bang
         if (!(targVal.startsWith(':=') || targVal.startsWith('='))) {
             this._overlayDisposer?.();
             this._overlayDisposer = undefined;
@@ -319,7 +320,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             className='schemaField-editing'
             ref={r => { this._inputref = r; }}
             style={{ cursor: 'text', outline: 'none', overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }}
-            onBlur={e => this.finalizeEdit(false, true, false)}
+            onBlur={e => {this._props.refSelectModeInfo.enabled ? setTimeout(() => {this.setIsFocused(true)}, 1000) : this.finalizeEdit(false, true, false)}}
             autoFocus
             onInput={this.onChange}
             onKeyDown={this.onKeyDown}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index b15804d41..3f5c2a90e 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -23,6 +23,7 @@ import { CollectionFreeFormView } from '../collectionFreeForm';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { infoState } from '../collectionFreeForm/CollectionFreeFormInfoState';
+import { TbShieldX } from 'react-icons/tb';
 
 interface SchemaRowBoxProps extends FieldViewProps {
     rowIndex: number;
@@ -127,6 +128,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth);
     computeRowIndex = () => this.schemaView?.rowIndex(this.Document);
     highlightCells = (text: string) => this.schemaView?.highlightCells(text);
+    selectReference = (doc: Doc, col: number) => {this.schemaView.selectReference(doc, col)}
     eqHighlightFunc = (text: string) => {
         const info = this.schemaView.findCellRefs(text);
         const cells: HTMLDivElement[] = [];
@@ -175,6 +177,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                 <div className="row-cells">
                     {this.schemaView?.columnKeys?.map((key, index) => (
                         <SchemaTableCell
+                            selectReference={this.selectReference}
                             refSelectModeInfo={this.refSelectModeInfo}
                             func={this.eqHighlightFunc}
                             equationHighlightRef={this.schemaView._cellHighlightColors}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 75b31315e..ef46c44da 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -65,6 +65,7 @@ export interface SchemaTableCellProps {
     equationHighlightRef: ObservableMap<HTMLDivElement, string>;
     func: (text: string) => HTMLDivElement[] | [];
     refSelectModeInfo: {enabled: boolean, currEditing: SchemaCellField | undefined};
+    selectReference: (doc: Doc, col: number) => void;
 }
 
 function selectedCell(props: SchemaTableCellProps) {
@@ -254,6 +255,13 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 className="schema-table-cell"
                 onContextMenu={e => StopEvent(e)}
                 onPointerDown={action(e => {
+                    if (this._props.refSelectModeInfo.enabled && !selectedCell(this._props)){
+                        e.stopPropagation();
+                        e.preventDefault();
+                        this._props.selectReference(this._props.Document, this._props.col);
+                        return;
+                    }
+
                     const shift: boolean = e.shiftKey;
                     const ctrl: boolean = e.ctrlKey;
                     if (this._props.isRowActive?.()) {
-- 
cgit v1.2.3-70-g09d2


From aad1ca740bcbad129dc23a5d8f71e3caae787d43 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 25 Jun 2024 12:26:00 -0400
Subject: cursor position reset properly, appendtext has atCursor option

---
 .../collectionSchema/CollectionSchemaView.tsx        |  2 +-
 .../collections/collectionSchema/SchemaCellField.tsx | 20 +++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 3b5a32ca7..32106e3be 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -658,7 +658,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const field = this.columnKeys[col];
         const refToAdd = `d${docIndex}.${field}`
         const editedField = this._referenceSelectMode.currEditing ? this._referenceSelectMode.currEditing as SchemaCellField : null;
-        editedField?.appendText(refToAdd);
+        editedField?.appendText(refToAdd, true);
         editedField?.setupRefSelect(false);
         return;
     }
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 06d3926a8..8c4c1cd76 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -45,8 +45,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore
 
-    @computed get lastChar(){
-        const text = this._unrenderedContent.slice();
+    @computed get lastCharBeforeCursor(){
+        const pos = this.cursorPosition;
+        const content = this._unrenderedContent;
+        const text = this._unrenderedContent.substring(0, pos ?? content.length);
         for (let i = text.length - 1; i > 0; --i) {
             if (text.charCodeAt(i) !== 160 && text.charCodeAt(i) !== 32) {
                 return text[i];
@@ -62,7 +64,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             () => this._editing,
             editing => {
                 if (editing) {
-                    if (this.lastChar !== '+') this.setupRefSelect(false);
+                    if (this.lastCharBeforeCursor !== '+') this.setupRefSelect(false);
                     setTimeout(() => {
                         if (this._inputref?.innerText.startsWith('=') || this._inputref?.innerText.startsWith(':=')) {
                             this._overlayDisposer?.();
@@ -145,9 +147,13 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     }
 
     @action
-    appendText = (text: string) => {
-        const newText = this._unrenderedContent.concat(text);
+    appendText = (text: string, atCursorPos?: boolean) => {
+        const content = this._unrenderedContent;
+        const cursorPos = this.cursorPosition;
+        const robustPos = cursorPos ?? content.length;
+        const newText = atCursorPos ? content.slice(0, robustPos) + text + content.slice(cursorPos ?? content.length) : this._unrenderedContent.concat(text);
         this.onChange(undefined, newText);
+        setTimeout(() => this.restoreCursorPosition(robustPos + text.length), 0);
     }
 
     @action
@@ -222,8 +228,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this._unrenderedContent = targVal;
         this._props.highlightCells?.(targVal);
         if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)};
-        console.log(this.lastChar === '+');
-        if (this.lastChar === '+') this.setupRefSelect(true);
+        console.log(this.lastCharBeforeCursor === '+');
+        if (this.lastCharBeforeCursor === '+') this.setupRefSelect(true);
         else this.setupRefSelect(false);
     };
 
-- 
cgit v1.2.3-70-g09d2


From f8232f2d210df5dcce352a51df7079095b1d1123 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 25 Jun 2024 13:17:54 -0400
Subject: enhanced refselect logic

---
 .../collectionSchema/CollectionSchemaView.tsx      |  3 ---
 .../collectionSchema/SchemaCellField.tsx           | 28 +++++++++++-----------
 2 files changed, 14 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 32106e3be..583829d6c 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -296,7 +296,6 @@ export class CollectionSchemaView extends CollectionSubView() {
                     break;
                 }
                 case 'P': {
-                    console.log(this._cellHighlightColors)
                     break;
                 }
                 default:
@@ -687,14 +686,12 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     deselectCell = (doc: Doc) => {
-        console.log('single deselect called')
         this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc));
         if (this.rowIndex(doc) === this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(d => this.rowIndex(d)));
     };
 
     @action
     deselectAllCells = () => {
-        console.log('deselectall called')
         this._selectedCells = [];
         this._lowestSelectedIndex = -1;
     };
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 8c4c1cd76..72d89adc3 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -57,6 +57,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         return null;
     }
 
+    @computed get refSelectConditionMet() {
+        const char = this.lastCharBeforeCursor;
+        return char === '+' || char === '*' || char === '/' || char === '%' || char === '=';
+    }
+
     componentDidMount(): void {
         this._unrenderedContent = this._props.GetValue() ?? '';
         this.setContent(this._unrenderedContent, true);
@@ -64,13 +69,14 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             () => this._editing,
             editing => {
                 if (editing) {
-                    if (this.lastCharBeforeCursor !== '+') this.setupRefSelect(false);
+                    this.setupRefSelect(this.refSelectConditionMet);
                     setTimeout(() => {
                         if (this._inputref?.innerText.startsWith('=') || this._inputref?.innerText.startsWith(':=')) {
                             this._overlayDisposer?.();
                             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
                             this._props.highlightCells?.(this._unrenderedContent);
-                            this.setContent(this._unrenderedContent, true);
+                            this.setContent(this._unrenderedContent);
+                            setTimeout(() => this.setCursorPosition(this._unrenderedContent.length), 0);
                         } 
                     });
                 } else {
@@ -139,11 +145,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     @action 
     setContent = (content: string, restoreCursorPos?: boolean) => {
+        const pos = this.cursorPosition;
         this._displayedContent = this.makeSpans(content);
-        if (restoreCursorPos) { 
-            const cursorPos = this.cursorPosition;
-            setTimeout(() => this.restoreCursorPosition(cursorPos), 0);
-        }
+        restoreCursorPos && setTimeout(() => this.setCursorPosition(pos), 0);
     }
 
     @action
@@ -153,7 +157,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         const robustPos = cursorPos ?? content.length;
         const newText = atCursorPos ? content.slice(0, robustPos) + text + content.slice(cursorPos ?? content.length) : this._unrenderedContent.concat(text);
         this.onChange(undefined, newText);
-        setTimeout(() => this.restoreCursorPosition(robustPos + text.length), 0);
+        setTimeout(() => this.setCursorPosition(robustPos + text.length), 0);
     }
 
     @action
@@ -173,12 +177,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         adjRange.selectNodeContents(this._inputref);
         adjRange.setEnd(range.startContainer, range.startOffset);
 
-        console.log(adjRange.toString().length)
-
         return adjRange.toString().length; 
     }
 
-    restoreCursorPosition = (position: number | null) => {
+    setCursorPosition = (position: number | null) => {
         const selection = window.getSelection();
         if (!selection || position === null || !this._inputref) return; 
     
@@ -228,9 +230,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this._unrenderedContent = targVal;
         this._props.highlightCells?.(targVal);
         if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)};
-        console.log(this.lastCharBeforeCursor === '+');
-        if (this.lastCharBeforeCursor === '+') this.setupRefSelect(true);
-        else this.setupRefSelect(false);
+        this.setupRefSelect(this.refSelectConditionMet);
     };
 
     setupRefSelect = (enabled: boolean) => {
@@ -269,7 +269,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                 if (this.cursorPosition !== null) cursorPos = this.cursorPosition + 1;
                 setTimeout(() => {
                     this.setContent(this._unrenderedContent);
-                    setTimeout(() => this.restoreCursorPosition(cursorPos), 0);
+                    setTimeout(() => this.setCursorPosition(cursorPos), 0);
                 }
                 , 0);
                 break;
-- 
cgit v1.2.3-70-g09d2


From a9494a1959430ffb3f501ef59f699aabc3748c7d Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 25 Jun 2024 13:49:35 -0400
Subject: changing cursor position updates refselectmode

---
 src/client/views/collections/collectionSchema/SchemaCellField.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 72d89adc3..7bdfaa587 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -219,6 +219,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     };
 
     onChange = (e: FormEvent<HTMLDivElement> | undefined, newText?: string) => {
+        console.log('onchange called')
         const prevVal = this._unrenderedContent;
         const targVal = newText ?? e!.currentTarget.innerText; // TODO: bang
         if (!(targVal.startsWith(':=') || targVal.startsWith('='))) {
@@ -230,6 +231,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this._unrenderedContent = targVal;
         this._props.highlightCells?.(targVal);
         if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)};
+        console.log('cursorpos: ' + this.cursorPosition + ' char: ' + this.lastCharBeforeCursor);
         this.setupRefSelect(this.refSelectConditionMet);
     };
 
@@ -262,6 +264,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                 break;
             case 'ArrowUp': case 'ArrowDown': case 'ArrowLeft': case 'ArrowRight': // prettier-ignore
                 e.stopPropagation();
+                setTimeout(() => this.setupRefSelect(this.refSelectConditionMet), 0)
                 break;
             case ' ':
                 e.stopPropagation();
@@ -330,7 +333,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             autoFocus
             onInput={this.onChange}
             onKeyDown={this.onKeyDown}
-            onPointerDown={e => e.stopPropagation}
+            onPointerDown={e => {e.stopPropagation(); setTimeout(() => this.setupRefSelect(this.refSelectConditionMet), 0)}} //timeout callback ensures that refSelectMode is properly set
             onClick={e => e.stopPropagation}
             onPointerUp={e => e.stopPropagation}
             onPointerMove={e => {e.stopPropagation(); e.preventDefault()}}
-- 
cgit v1.2.3-70-g09d2


From 830121ffc5d3d7ba9c5bd48771b6927d24dfce59 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 26 Jun 2024 13:10:47 -0400
Subject: removing 0s from settimeut + minor sorted col highlight color change

---
 .../collectionSchema/CollectionSchemaView.tsx      |  4 ++--
 .../collectionSchema/SchemaCellField.tsx           | 22 +++++++++++++---------
 2 files changed, 15 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 583829d6c..57327a008 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -206,7 +206,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         )
         this._disposers.sortHighlight = reaction(
             () => [this.sortField, this._docs, this._selectedDocs, this._highlightedCellsInfo], 
-            () => {this.sortField && setTimeout(() => this.highlightSortedColumn(), 0)},
+            () => {this.sortField && setTimeout(() => this.highlightSortedColumn())},
             {fireImmediately: true}
         )
     }
@@ -505,7 +505,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         if (field || this.sortField){
             index = this.columnKeys.indexOf(field || this.sortField);
             const increment: number = 100/rowCount;
-            for (let i = 0; i < rowCount; ++i){
+            for (let i = 1; i <= rowCount; ++i){
                 const adjColor = ClientUtils.lightenRGB(16, 66, 230, increment * i);
                 highlightColors.push(`solid 2px rgb(${adjColor[0]}, ${adjColor[1]}, ${adjColor[2]})`);
             }
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 7bdfaa587..8e751f4ba 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -40,11 +40,13 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         setTimeout(() => { 
             this._unrenderedContent = this._props.GetValue() ?? '';
             this.setContent(this._unrenderedContent);
-        }, 0); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function
+        }); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function
     }
 
     get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore
 
+    get selfRefPattern() {return `d${this.docIndex}.${this._props.fieldKey}`};
+
     @computed get lastCharBeforeCursor(){
         const pos = this.cursorPosition;
         const content = this._unrenderedContent;
@@ -76,7 +78,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
                             this._props.highlightCells?.(this._unrenderedContent);
                             this.setContent(this._unrenderedContent);
-                            setTimeout(() => this.setCursorPosition(this._unrenderedContent.length), 0);
+                            setTimeout(() => this.setCursorPosition(this._unrenderedContent.length));
                         } 
                     });
                 } else {
@@ -114,7 +116,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     }
 
     generateSpan = (text: string, cell: HTMLDivElement | undefined) => {
-       return `<span style="color: ${cell?.style.borderTop.replace('2px solid', '')}">${text}</span>`
+        const selfRef = text === this.selfRefPattern;
+        return `<span style="text-decoration: ${selfRef ? 'underline' : 'none'}; text-decoration-color: red; color: ${selfRef ? 'gray' : cell?.style.borderTop.replace('2px solid', '')}">${text}</span>`;
     }
 
     makeSpans = (content: string) => {
@@ -147,7 +150,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     setContent = (content: string, restoreCursorPos?: boolean) => {
         const pos = this.cursorPosition;
         this._displayedContent = this.makeSpans(content);
-        restoreCursorPos && setTimeout(() => this.setCursorPosition(pos), 0);
+        restoreCursorPos && setTimeout(() => this.setCursorPosition(pos));
     }
 
     @action
@@ -157,7 +160,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         const robustPos = cursorPos ?? content.length;
         const newText = atCursorPos ? content.slice(0, robustPos) + text + content.slice(cursorPos ?? content.length) : this._unrenderedContent.concat(text);
         this.onChange(undefined, newText);
-        setTimeout(() => this.setCursorPosition(robustPos + text.length), 0);
+        setTimeout(() => this.setCursorPosition(robustPos + text.length));
     }
 
     @action
@@ -219,7 +222,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     };
 
     onChange = (e: FormEvent<HTMLDivElement> | undefined, newText?: string) => {
-        console.log('onchange called')
         const prevVal = this._unrenderedContent;
         const targVal = newText ?? e!.currentTarget.innerText; // TODO: bang
         if (!(targVal.startsWith(':=') || targVal.startsWith('='))) {
@@ -231,7 +233,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this._unrenderedContent = targVal;
         this._props.highlightCells?.(targVal);
         if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)};
-        console.log('cursorpos: ' + this.cursorPosition + ' char: ' + this.lastCharBeforeCursor);
         this.setupRefSelect(this.refSelectConditionMet);
     };
 
@@ -272,7 +273,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                 if (this.cursorPosition !== null) cursorPos = this.cursorPosition + 1;
                 setTimeout(() => {
                     this.setContent(this._unrenderedContent);
-                    setTimeout(() => this.setCursorPosition(cursorPos), 0);
+                    setTimeout(() => this.setCursorPosition(cursorPos));
                 }
                 , 0);
                 break;
@@ -298,7 +299,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     @action
     finalizeEdit(shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
-        // while (this.lastChar === '+') { this._unrenderedContent = this._unrenderedContent.slice(0, -1); }
+        if (this._unrenderedContent.replace(this.selfRefPattern, '') !== this._unrenderedContent) {
+            console.log('error'); this._editing = false; return;
+        }
+        
         if (this._props.SetValue(this._unrenderedContent, shiftDown, enterKey)) {
             this._editing = false;
         } else {
-- 
cgit v1.2.3-70-g09d2


From 2437028db1f273350b0422da0ef3a5f520ffce59 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 26 Jun 2024 13:48:25 -0400
Subject: self-reference warning added

---
 src/client/views/collections/collectionSchema/SchemaCellField.tsx | 6 +++++-
 src/client/views/collections/collectionSchema/SchemaRowBox.tsx    | 2 +-
 src/client/views/collections/collectionSchema/SchemaTableCell.tsx | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 8e751f4ba..27ca37c2b 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -33,6 +33,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     @observable _editing: boolean = false;
     @observable _displayedContent = '';
     @observable _inCellSelectMode: boolean = false;
+    @observable _dependencyMessageShown: boolean = false;
 
     constructor(props: SchemaCellFieldProps) {
         super(props);
@@ -300,7 +301,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     @action
     finalizeEdit(shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
         if (this._unrenderedContent.replace(this.selfRefPattern, '') !== this._unrenderedContent) {
-            console.log('error'); this._editing = false; return;
+            this._dependencyMessageShown ? this._dependencyMessageShown = false :
+            alert("Circular dependency detected. Please update the field.")
+            this._dependencyMessageShown = true;
+            return;
         }
         
         if (this._props.SetValue(this._unrenderedContent, shiftDown, enterKey)) {
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 3f5c2a90e..c9feeac6b 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -179,7 +179,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                         <SchemaTableCell
                             selectReference={this.selectReference}
                             refSelectModeInfo={this.refSelectModeInfo}
-                            func={this.eqHighlightFunc}
+                            eqHighlightFunc={this.eqHighlightFunc}
                             equationHighlightRef={this.schemaView._cellHighlightColors}
                             highlightCells={this.highlightCells}
                             isolatedSelection={this.isolatedSelection}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index ef46c44da..016ab5e69 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -63,7 +63,7 @@ export interface SchemaTableCellProps {
     isolatedSelection: [boolean, boolean];
     highlightCells: (text: string) => void;
     equationHighlightRef: ObservableMap<HTMLDivElement, string>;
-    func: (text: string) => HTMLDivElement[] | [];
+    eqHighlightFunc: (text: string) => HTMLDivElement[] | [];
     refSelectModeInfo: {enabled: boolean, currEditing: SchemaCellField | undefined};
     selectReference: (doc: Doc, col: number) => void;
 }
@@ -190,7 +190,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     refSelectModeInfo={this._props.refSelectModeInfo}
                     Document={this._props.Document}
                     highlightCells={(text: string) => this._props.highlightCells(this.adjustSelfReference(text))}
-                    getCells={(text: string) => this._props.func(this.adjustSelfReference(text))}
+                    getCells={(text: string) => this._props.eqHighlightFunc(this.adjustSelfReference(text))}
                     ref={r => selectedCell(this._props) && this._props.autoFocus && r?.setIsFocused(true)}
                     oneLine={this._props.oneLine}
                     contents={undefined}
-- 
cgit v1.2.3-70-g09d2


From 22760f7f9d79511862851a0d8289b9a6ff9956e7 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 26 Jun 2024 14:22:39 -0400
Subject: freeze fixed (revisit why this change was needed?)

---
 .../views/collections/collectionSchema/CollectionSchemaView.tsx      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 57327a008..497c781fd 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -105,7 +105,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _highlightedCellsInfo: Array<[doc: Doc, field: string]> = [];
     @observable _cellHighlightColors: ObservableMap = new ObservableMap<string, string[]>();
     @observable _docs: Doc[] = [];
-    @observable _referenceSelectMode = {enabled: false, currEditing: undefined}
+    @observable _referenceSelectMode: {enabled: boolean, currEditing: SchemaCellField | undefined} = {enabled: false, currEditing: undefined}
     
     // target HTMLelement portal for showing a popup menu to edit cell values.
     public get MenuTarget() {
@@ -114,7 +114,8 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @computed get _selectedDocs() {
         // get all selected documents then filter out any whose parent is not this schema document
-        const selected = DocumentView.SelectedDocs().filter(doc => this.docs.includes(doc) && this._selectedCells.includes(doc));
+        const selected = DocumentView.SelectedDocs().filter(doc => this.docs.includes(doc));
+        //&& this._selectedCells.includes(doc)
         if (!selected.length) {
             // if no schema doc is directly selected, test if a child of a schema doc is selected (such as in the preview window)
             const childOfSchemaDoc = DocumentView.SelectedDocs().find(sel => DocumentView.getContextPath(sel, true).includes(this.Document));
-- 
cgit v1.2.3-70-g09d2


From 8ceaba8b8264f5519de732cc603dcd276b4b4f4d Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 28 Jun 2024 01:49:10 -0400
Subject: header text no longer shifts left on hover

---
 src/client/documents/Documents.ts                  |  6 +++++
 src/client/util/Scripting.ts                       |  9 ++++++--
 .../collectionSchema/CollectionSchemaView.scss     |  1 -
 .../collectionSchema/SchemaCellField.tsx           |  4 +++-
 .../collectionSchema/SchemaColumnHeader.tsx        |  6 ++---
 .../collections/collectionSchema/SchemaRowBox.tsx  |  6 +----
 .../collectionSchema/SchemaTableCell.tsx           | 26 +++++++++++++++++-----
 src/client/views/nodes/FieldView.tsx               |  2 +-
 src/client/views/nodes/KeyValueBox.tsx             |  2 +-
 9 files changed, 43 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index dabbf9591..1b1608cd5 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -143,7 +143,12 @@ class ListInfo extends FInfo {
     fieldType? = FInfoFieldType.list;
     values?: List<any>[] = [];
 }
+class MapInfo extends FInfo {
+    fieldType? = FInfoFieldType.list;
+    values?: List<any>[] = [];
+}
 type BOOLt = BoolInfo | boolean;
+type MAPt = MapInfo | Map<any, any>;
 type NUMt = NumInfo | number;
 type STRt = StrInfo | string;
 type LISTt = ListInfo | List<any>;
@@ -229,6 +234,7 @@ export class DocumentOptions {
     _lockedTransform?: BOOLt = new BoolInfo('lock the freeform_panx,freeform_pany and scale parameters of the document so that it be panned/zoomed');
     _childrenSharedWithSchema?: BOOLt = new BoolInfo("whether this document's children are displayed in its parent schema view", false);
     _lockedSchemaEditing?: BOOLt = new BoolInfo("", false);
+    _schemaInputs?: LISTt = new ListInfo('user inputs to schema field', false)
 
     dataViz_title?: string;
     dataViz_line?: string;
diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index 6ef592ef2..c7aa56c1e 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -183,14 +183,19 @@ function forEachNode(node: ts.Node, onEnter: Traverser, onExit?: Traverser, inde
     );
 }
 
+ScriptField.CompileScript(value, {}, true, undefined, DocumentIconContainer.getTransformer());
+//addreturn = true
+//capturedvariables = undefined
+//
+
 export function CompileScript(script: string, options: ScriptOptions = {}): CompileResult {
-    const captured = options.capturedVariables ?? {};
+    const captured = options.capturedVariables ?? {}; 
     const signature = Object.keys(captured).reduce((p, v) => {
         const formatCapture = (obj: any) => `${v}=${obj instanceof RefField ? 'XXX' : obj.toString()}`;
         if (captured[v] instanceof Array) return p + (captured[v] as any).map(formatCapture);
         return p + formatCapture(captured[v]);
     }, '');
-    const found = ScriptField.GetScriptFieldCache(script + ':' + signature);
+    const found = ScriptField.GetScriptFieldCache(script + ':' + signature); // if already compiled, found is the result; cache set below
     if (found) return found as CompiledScript;
     const { requiredType = '', addReturn = false, params = {}, capturedVariables = {}, typecheck = true } = options;
     if (options.params && !options.params.this) options.params.this = Doc.name;
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 6b53eb1cc..425b67fa9 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -155,7 +155,6 @@
     padding: 0;
     z-index: 1;
     border: 1px solid $medium-gray;
-    //overflow: hidden;
 
     .schema-column-title {
         flex-grow: 2;
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 27ca37c2b..c7c483df8 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -321,11 +321,13 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         }
     }
 
+    //<FieldView {...this._props.fieldContents}/>
+
     staticDisplay = () => {
         return <span className='editableView-static'>
         {
             // eslint-disable-next-line react/jsx-props-no-spreading
-            this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : ''
+            this._props.fieldContents ?  <FieldView {...this._props.fieldContents}/> : ''
         }
         </span>
     }
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index d16cde1f8..83a136737 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -237,11 +237,11 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                     }}>
                     <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} />
 
-                    <div>{this.editableView}</div>
+                    <div className="schema-header-text">{this.editableView}</div>
 
                     <div className="schema-header-menu">
-                        <div className="schema-header-button">
-                            {this.displayButton ? this.headerButton : null}
+                        <div className="schema-header-button" style={{opacity: this.displayButton ? '1.0' : '0.0'}}>
+                            {this.headerButton}
                         </div>
                     </div>  
                 </div>
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index c9feeac6b..077d95c57 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -97,10 +97,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         return ''
     }
 
-    @computed get refSelectModeInfo() {
-        return this.schemaView._referenceSelectMode;
-    }
-
     @computed get menuInfos() {
         const infos: Array<IconProp> = [];
         if (this.Document._lockedSchemaEditing) infos.push('lock');
@@ -178,7 +174,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                     {this.schemaView?.columnKeys?.map((key, index) => (
                         <SchemaTableCell
                             selectReference={this.selectReference}
-                            refSelectModeInfo={this.refSelectModeInfo}
+                            refSelectModeInfo={this.schemaView._referenceSelectMode}
                             eqHighlightFunc={this.eqHighlightFunc}
                             equationHighlightRef={this.schemaView._cellHighlightColors}
                             highlightCells={this.highlightCells}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 016ab5e69..c0e1743a5 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -16,7 +16,7 @@ import { DateField } from '../../../../fields/DateField';
 import { Doc, DocListCast, Field, IdToDoc } from '../../../../fields/Doc';
 import { RichTextField } from '../../../../fields/RichTextField';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
-import { BoolCast, Cast, DateCast, DocCast, FieldValue, StrCast, toList } from '../../../../fields/Types';
+import { BoolCast, Cast, DateCast, DocCast, FieldValue, ScriptCast, StrCast, toList } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
 import { FInfo, FInfoFieldType } from '../../../documents/Documents';
 import { dropActionType } from '../../../util/DropActionTypes';
@@ -35,6 +35,7 @@ import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { ContextMenu } from '../../ContextMenu';
 import { SchemaCellField } from './SchemaCellField';
+import { ComputedField } from '../../../../fields/ScriptField';
 
 export interface SchemaTableCellProps {
     Document: Doc;
@@ -80,6 +81,7 @@ function selectedCell(props: SchemaTableCellProps) {
 export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellProps> {
 
     // private _fieldRef: SchemaCellField | null = null;
+    private _submittedValue: string = '';
 
     constructor(props: SchemaTableCellProps) {
         super(props);
@@ -157,19 +159,31 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
 
     // parses a field from the "idToDoc(####)" format to DocumentId (d#) format for readability
     cleanupField = (field: string) => {
-        const idPattern = /idToDoc\((.*?)\)/g;
         let modField = field.slice();
+        let eqSymbol: string = '';
+        if (modField.startsWith('=')) {modField = modField.substring(1); eqSymbol += '=';}
+        if (modField.startsWith(':=')) {modField = modField.substring(2); eqSymbol += ':=';}
+
+        const idPattern = /idToDoc\((.*?)\)/g;
         let matches;
         let results = new Array<[id: string, func: string]>();
         while ((matches = idPattern.exec(field)) !== null) {results.push([matches[0], matches[1].replace(/"/g, '')]); }
         results.forEach((idFuncPair) => {modField = modField.replace(idFuncPair[0], 'd' + (DocumentView.getDocViewIndex(IdToDoc(idFuncPair[1]))).toString());})
-        if (modField.charAt(modField.length - 1) === ';') modField = modField.substring(0, modField.length - 1);
+
+        for (let i = 0; i < modField.length; ++i){
+            
+        }
+
+        if (modField.endsWith(';')) modField = modField.substring(0, modField.length - 1);
+
+        const inQuotes = (field: string) => {return ((field.startsWith('`') && field.endsWith('`')) || (field.startsWith("'") && field.endsWith("'")) || (field.startsWith('"') && field.endsWith('"')))}
+        if (!inQuotes(this._submittedValue) && inQuotes(modField)) modField = modField.substring(1, modField.length - 1);
         
         const selfRefPattern = `d${this.docIndex}.${this._props.fieldKey}`
         const selfRefRegX = RegExp(selfRefPattern, 'g');
         if (selfRefRegX.exec(modField) !== null) { return 'Invalid'}
 
-        return modField;
+        return eqSymbol + modField;
     }
 
     @computed get defaultCellContent() {
@@ -196,7 +210,8 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     contents={undefined}
                     fieldContents={fieldProps}
                     editing={selectedCell(this._props) ? undefined : false}
-                    GetValue={() => this.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))}
+                    ////const script = ScriptCast(fieldProps.Document[this._props.fieldKey]).rawscript;
+                    GetValue={() => ScriptCast(fieldProps.Document[this._props.fieldKey])?.rawscript ?? ''}
                     SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
                         if (shiftDown && enterKey) {
                             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value);
@@ -205,6 +220,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                         }
                         const hasNoLayout =  Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto
                         const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout);
+                        this._submittedValue = value;
                         this._props.finishEdit?.();
                         return ret;
                     }, 'edit schema cell')}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 818d26956..40da661c0 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -118,7 +118,7 @@ export class FieldView extends React.Component<FieldViewProps> {
         const field = this.fieldval;
         // prettier-ignore
         if (field instanceof Doc)  return <p> <b>{field.title?.toString()}</b></p>;
-        if (field === undefined) return <p>{'<null>'}</p>;
+        if (field === undefined) return <p>{''}</p>;
         if (field instanceof DateField) return <p>{field.date.toLocaleString()}</p>;
         if (field instanceof List) return <div> {field.map(f => Field.toString(f)).join(', ')} </div>;
         if (field instanceof WebField) return <p>{Field.toString(field.url.href)}</p>;
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 66e210c03..bc6633f23 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -88,7 +88,7 @@ export class KeyValueBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const type: 'computed' | 'script' | false = rawvalue.startsWith(':=') ? 'computed' : rawvalue.startsWith('$=') ? 'script' : false;
         rawvalue = type ? rawvalue.substring(2) : rawvalue;
         rawvalue = rawvalue.replace(/.*\(\((.*)\)\)/, 'dashCallChat(_setCacheResult_, this, `$1`)');
-        const value = ["'", '"', '`'].includes(rawvalue.length ? rawvalue[0] : '') || !isNaN(rawvalue as any) ? rawvalue : '`' + rawvalue + '`';
+        const value = (["'", '"', '`'].includes(rawvalue.length ? rawvalue[0] : '') || !isNaN(rawvalue as any)) ? rawvalue : '`' + rawvalue + '`';
 
         let script = ScriptField.CompileScript(rawvalue, {}, true, undefined, DocumentIconContainer.getTransformer());
         if (!script.compiled) {
-- 
cgit v1.2.3-70-g09d2


From 21a9278abe3bab3a7da7eef079a27169cc2cd49c Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 28 Jun 2024 13:24:40 -0400
Subject: col drag stutter fixed

---
 src/client/util/Scripting.ts                       |  8 +--
 .../collectionSchema/CollectionSchemaView.tsx      | 70 ++++++++++++++--------
 .../collectionSchema/SchemaColumnHeader.tsx        |  2 +
 .../collectionSchema/SchemaTableCell.tsx           |  6 +-
 4 files changed, 52 insertions(+), 34 deletions(-)

(limited to 'src')

diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index c7aa56c1e..5202e62a3 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -183,10 +183,10 @@ function forEachNode(node: ts.Node, onEnter: Traverser, onExit?: Traverser, inde
     );
 }
 
-ScriptField.CompileScript(value, {}, true, undefined, DocumentIconContainer.getTransformer());
-//addreturn = true
-//capturedvariables = undefined
-//
+// ScriptField.CompileScript(value, {}, true, undefined, DocumentIconContainer.getTransformer());
+// //addreturn = true
+// //capturedvariables = undefined
+// //
 
 export function CompileScript(script: string, options: ScriptOptions = {}): CompileResult {
     const captured = options.capturedVariables ?? {}; 
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 497c781fd..93347f067 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -95,7 +95,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _filterSearchValue: string = '';
     @observable _selectedCol: number = 0;
     @observable _selectedCells: Array<Doc> = [];
-    @observable _mouseCoordinates = { x: 0, y: 0 };
+    @observable _mouseCoordinates = { x: 0, y: 0, prevX: 0, prevY: 0 };
     @observable _lowestSelectedIndex: number = -1; //lowest index among selected rows; used to properly sync dragged docs with cursor position
     @observable _relCursorIndex: number = -1; //cursor index relative to the current selected cells
     @observable _draggedColIndex: number = 0;
@@ -413,7 +413,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     dragColumn = (e: PointerEvent, index: number) => {
         this.closeColumnMenu();
         this._draggedColIndex = index;
-        this._colBeingDragged = true;
+        this.setColDrag(true);
         const dragData = new DragManager.ColumnDragData(index);
         const dragEles = [this._colEles[index]];
         this.childDocs.forEach(doc => dragEles.push(this._rowEles.get(doc).children[1].children[index]));
@@ -499,6 +499,26 @@ export class CollectionSchemaView extends CollectionSubView() {
             });
         });
 
+    removeDragHighlight = () => {
+        this._colEles.forEach((colRef, i) => {
+            const sorted = i === this.columnKeys.indexOf(this.sortField);
+            if (sorted) return;
+
+            colRef.style.borderLeft = '';
+            colRef.style.borderRight = '';
+            colRef.style.borderTop = '';
+
+            this.childDocs.forEach(doc => {
+                const cell = this._rowEles.get(doc).children[1].children[i];
+                if (!(this._selectedDocs.includes(doc) && i === this._selectedCol) && !(this.highlightedCells.includes(cell))) {
+                    cell.style.borderLeft = '';
+                    cell.style.borderRight = '';
+                    cell.style.borderBottom = '';
+                }
+            });
+        });
+    }
+
     highlightSortedColumn = (field?: string, descending?: boolean) => {
         let index = -1;
         let highlightColors: string[] = [];
@@ -703,28 +723,11 @@ export class CollectionSchemaView extends CollectionSubView() {
         return this.findRowDropIndex(mouseY);
     }
 
+    @action
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
         if (de.complete.columnDragData) {
-            this._colBeingDragged = false;
+            this.setColDrag(false);
             e.stopPropagation();
-
-            this._colEles.forEach((colRef, i) => {
-                const sorted = i === this.columnKeys.indexOf(this.sortField);
-                if (sorted) return;
-
-                colRef.style.borderLeft = '';
-                colRef.style.borderRight = '';
-                colRef.style.borderTop = '';
-
-                this.childDocs.forEach(doc => {
-                    const cell = this._rowEles.get(doc).children[1].children[i];
-                    if (!(this._selectedDocs.includes(doc) && i === this._selectedCol) && !(this.highlightedCells.includes(cell))) {
-                        cell.style.borderLeft = '';
-                        cell.style.borderRight = '';
-                        cell.style.borderBottom = '';
-                    }
-                });
-            });
             return true;
         }
 
@@ -1196,18 +1199,33 @@ export class CollectionSchemaView extends CollectionSubView() {
         );
     }
 
+    @action setColDrag = (beingDragged: boolean) => {
+        this._colBeingDragged = beingDragged;
+        !beingDragged && this.removeDragHighlight();
+    }
+
+    @action updateMouseCoordinates = (e: React.PointerEvent<HTMLDivElement>) => {
+        const prevX = this._mouseCoordinates.x;
+        const prevY = this._mouseCoordinates.y;
+        this._mouseCoordinates = { x: e.clientX, y: e.clientY, prevX: prevX, prevY: prevY };
+    }
+
     @action
     onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
         if (DragManager.docsBeingDragged.length) {
-            this._mouseCoordinates = { x: e.clientX, y: e.clientY };
+            this.updateMouseCoordinates(e);
         }
         if (this._colBeingDragged) {
+            this.updateMouseCoordinates(e);
             const newIndex = this.findColDropIndex(e.clientX);
-            if (newIndex !== this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex);
-            this._draggedColIndex = newIndex || this._draggedColIndex;
+            const direction: number = this._mouseCoordinates.x > this._mouseCoordinates.prevX ? 1 : 0;
+            if (newIndex !== undefined && ((newIndex > this._draggedColIndex && direction === 1) || (newIndex < this._draggedColIndex && direction === 0))) {
+                this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex);
+                this._draggedColIndex = newIndex !== undefined ? newIndex : this._draggedColIndex;
+            }
             this.highlightSortedColumn(); //TODO: Make this more efficient
             this.restoreCellHighlights();
-            !(this.sortField && this._draggedColIndex === this.columnKeys.indexOf(this.sortField)) && this.highlightDraggedColumn(newIndex ?? this._draggedColIndex);
+            !(this.sortField && this._draggedColIndex === this.columnKeys.indexOf(this.sortField)) && this.highlightDraggedColumn(this._draggedColIndex);
         }
     };
 
@@ -1286,7 +1304,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             <div className="collectionSchemaView" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} 
             onDrop={this.onExternalDrop.bind(this)} 
             onPointerMove={e => this.onPointerMove(e)} 
-            onPointerDown={() => this.closeColumnMenu()}>
+            onPointerDown={() => {this.closeColumnMenu(); this.setColDrag(false)}}>
                 <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }} />
                 <div
                     className="schema-table"
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 83a136737..e98a2c778 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -244,6 +244,8 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                             {this.headerButton}
                         </div>
                     </div>  
+
+                    <div className="schema-column-resizer right" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} />
                 </div>
         );
     }
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index c0e1743a5..d06e2a147 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -16,7 +16,7 @@ import { DateField } from '../../../../fields/DateField';
 import { Doc, DocListCast, Field, IdToDoc } from '../../../../fields/Doc';
 import { RichTextField } from '../../../../fields/RichTextField';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
-import { BoolCast, Cast, DateCast, DocCast, FieldValue, ScriptCast, StrCast, toList } from '../../../../fields/Types';
+import { BoolCast, Cast, DateCast, DocCast, FieldValue, StrCast, toList } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
 import { FInfo, FInfoFieldType } from '../../../documents/Documents';
 import { dropActionType } from '../../../util/DropActionTypes';
@@ -35,7 +35,6 @@ import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { ContextMenu } from '../../ContextMenu';
 import { SchemaCellField } from './SchemaCellField';
-import { ComputedField } from '../../../../fields/ScriptField';
 
 export interface SchemaTableCellProps {
     Document: Doc;
@@ -210,8 +209,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                     contents={undefined}
                     fieldContents={fieldProps}
                     editing={selectedCell(this._props) ? undefined : false}
-                    ////const script = ScriptCast(fieldProps.Document[this._props.fieldKey]).rawscript;
-                    GetValue={() => ScriptCast(fieldProps.Document[this._props.fieldKey])?.rawscript ?? ''}
+                    GetValue={() => this.cleanupField(Field.toKeyValueString(fieldProps.Document, this._props.fieldKey, SnappingManager.MetaKey))}
                     SetValue={undoable((value: string, shiftDown?: boolean, enterKey?: boolean) => {
                         if (shiftDown && enterKey) {
                             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), value);
-- 
cgit v1.2.3-70-g09d2


From b01f8732034396114c6a37665054de1617ccda1b Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 28 Jun 2024 14:32:27 -0400
Subject: fixed selected row highlight on new col

---
 src/client/views/collections/collectionSchema/SchemaRowBox.tsx    | 5 +----
 src/client/views/collections/collectionSchema/SchemaTableCell.tsx | 5 +----
 2 files changed, 2 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 077d95c57..9ac7a24b2 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -90,10 +90,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     }
 
     @computed get menuBackgroundColor(){
-        if (this.Document._lockedSchemaEditing){
-            if (this._props.isSelected()) return '#B0D1E7'
-            else return '#F5F5F5'
-        }   
+        if (this.Document._lockedSchemaEditing) {return '#F5F5F5'}   
         return ''
     }
 
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index d06e2a147..084306c4a 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -94,10 +94,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
     get lockedInteraction(){return (this.isDefault || this._props.Document._lockedSchemaEditing);} // prettier-ignore
 
     get backgroundColor(){
-        if (this.lockedInteraction){
-            if (this._props.rowSelected()) return '#B0D1E7'
-            else return '#F5F5F5'
-        }   
+        if (this.lockedInteraction) {return '#F5F5F5'}   
         return ''
     }
 
-- 
cgit v1.2.3-70-g09d2


From d6b99c63b93cd47dd4a68553969785656bf9dbaf Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 28 Jun 2024 14:44:00 -0400
Subject: row drag changes saved through reload

---
 src/client/views/collections/collectionSchema/CollectionSchemaView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 93347f067..ee693078f 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -734,7 +734,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const draggedDocs = de.complete.docDragData?.draggedDocuments;
         if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) {
             const docs = this.docsWithDrag.docs.slice();
-            this._docs = docs;
+            this.dataDoc[this.fieldKey ?? 'data'] = new List<Doc>([...docs]);
             this.clearSelection();
             draggedDocs.forEach(doc => {
                 DocumentView.addViewRenderedCb(doc, dv => dv.select(true));
-- 
cgit v1.2.3-70-g09d2


From db7e5ed3ac36f05787b809e2ae03c94f310ef3e4 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 28 Jun 2024 19:26:23 -0400
Subject: colkeys menu width conforms to column with

---
 .../collections/collectionSchema/CollectionSchemaView.scss  |  9 +--------
 .../collections/collectionSchema/CollectionSchemaView.tsx   | 13 ++-----------
 2 files changed, 3 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 425b67fa9..e3f3dafab 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -51,8 +51,6 @@
 .schema-filter-menu {
     background: $light-gray;
     position: absolute;
-    min-width: 150px;
-    max-width: 300px;
     max-height: 300px;
     display: flex;
     overflow: hidden;
@@ -60,11 +58,6 @@
     align-items: flex-start;
     z-index: 5;
 
-    .schema-key-search-input {
-        width: calc(100% - 20px);
-        margin: 10px;
-    }
-
     .schema-search-result {
         cursor: pointer;
         padding: 5px 10px;
@@ -106,7 +99,7 @@
 
     .schema-key-list {
         width: 100%;
-        max-height: 300px;
+        max-height: 250px;
         overflow-y: auto;
     }
 
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index ee693078f..a3bc537d2 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -154,7 +154,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         );
 
         const totalWidth = widths.reduce((sum, width) => sum + width, 0);
-        // If the total width of all columns is not the width of the schema table minus the width of the row menu, resize them appropriately
         if (totalWidth !== this.tableWidth - CollectionSchemaView._rowMenuWidth) {
             return widths.map(w => (w / totalWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth));
         }
@@ -1133,15 +1132,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @computed get renderColumnMenu() {
         const x = this._columnMenuIndex! === -1 ? 0 : this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth);
         return (
-            <div className="schema-column-menu" style={{ left: x, minWidth: CollectionSchemaView._minColWidth }}>
-                {this.keysDropdown}
-            </div>
-        );
-    }
-
-    get renderKeysMenu() {
-        return (
-            <div className="schema-column-menu" style={{ left: 0, minWidth: CollectionSchemaView._minColWidth }}>
+            <div className="schema-column-menu" style={{ left: x,  maxWidth: `${Math.max(this._colEles[this._columnMenuIndex ?? 0].offsetWidth, 150)}px` }}>
                 {this.keysDropdown}
             </div>
         );
@@ -1184,7 +1175,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @computed get renderFilterMenu() {
         const x = this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._filterColumnIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth);
         return (
-            <div className="schema-filter-menu" style={{ left: x, minWidth: CollectionSchemaView._minColWidth }}>
+            <div className="schema-filter-menu" style={{ left: x, maxWidth: `${Math.max(this._colEles[this._columnMenuIndex ?? 0].offsetWidth, 150)}px`}}>
                 <input className="schema-filter-input" type="text" value={this._filterSearchValue} onKeyDown={this.onFilterKeyDown} onChange={this.updateFilterSearch} onPointerDown={e => e.stopPropagation()} />
                 {this.renderFilterOptions}
                 <div
-- 
cgit v1.2.3-70-g09d2


From 0080670351d472a5cdf01841a47ea98e0027fb53 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 28 Jun 2024 19:36:44 -0400
Subject: dragging col stops editing of schema header

---
 .../views/collections/collectionSchema/CollectionSchemaView.tsx      | 3 +++
 src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx | 5 +++++
 2 files changed, 8 insertions(+)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index a3bc537d2..e4ffc5b13 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -67,6 +67,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     private _documentOptions: DocumentOptions = new DocumentOptions();
     private _tableContentRef: HTMLDivElement | null = null;
     private _menuTarget = React.createRef<HTMLDivElement>();
+    private _headerRefs: SchemaColumnHeader[] = [];
 
     constructor(props: any) {
         super(props);
@@ -411,6 +412,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     dragColumn = (e: PointerEvent, index: number) => {
         this.closeColumnMenu();
+        this._headerRefs.forEach(ref => ref.stopEditing());
         this._draggedColIndex = index;
         this.setColDrag(true);
         const dragData = new DragManager.ColumnDragData(index);
@@ -1331,6 +1333,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                             <SchemaColumnHeader
                                 // eslint-disable-next-line react/no-array-index-key
                                 //cleanupField={this.cleanupComputedField}
+                                ref={r => r && this._headerRefs.push(r)}
                                 keysDropdown={(this.keysDropdown)}
                                 schemaView={this}
                                 columnWidth={() => CollectionSchemaView._minColWidth} //TODO: update
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index e98a2c778..382d7487b 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -23,6 +23,7 @@ import { undoable } from '../../../util/UndoManager';
 import { FInfo } from '../../../documents/Documents';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
 import { IconButton, Size } from 'browndash-components';
+import { TbHospital } from 'react-icons/tb';
 
 export enum SchemaFieldType {
     Header, Cell
@@ -72,6 +73,10 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
     @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;}
     @action updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)}
+    @action stopEditing = () => {
+        this._inputRef?.setIsEditing(false);
+        this._inputRef?.setIsFocused(false);
+    }
 
     openKeyDropdown = () => {
         this._props.schemaView.openColumnMenu(this._props.columnIndex, false)
-- 
cgit v1.2.3-70-g09d2


From 25e69f18cf38587853771be8080035ab8a460e7e Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sat, 29 Jun 2024 05:39:44 -0400
Subject: cyclic preset colors for eqhighlights

---
 .../collectionSchema/CollectionSchemaView.tsx      | 42 ++++++++++++----------
 1 file changed, 24 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index e4ffc5b13..d3259d42e 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -68,10 +68,26 @@ export class CollectionSchemaView extends CollectionSubView() {
     private _tableContentRef: HTMLDivElement | null = null;
     private _menuTarget = React.createRef<HTMLDivElement>();
     private _headerRefs: SchemaColumnHeader[] = [];
+    private _eqHighlightColors: Array<[{r: number, g: number, b: number}, {r: number, g: number, b: number}]> = [];
 
     constructor(props: any) {
         super(props);
         makeObservable(this);
+        const lightenedColor = (r: number, g: number, b:number) => {
+            const lightened = ClientUtils.lightenRGB(r, g, b, 165);
+            return {r: lightened[0], g: lightened[1], b: lightened[2]}
+        }
+        const colors = (r: number, g: number, b: number): [any, any] => {return [{r: r, g: g, b: b}, lightenedColor(r, g, b)]}
+        this._eqHighlightColors.push(colors(70, 150, 50));
+        this._eqHighlightColors.push(colors(180, 70, 20));
+        this._eqHighlightColors.push(colors(70, 50, 150));
+        this._eqHighlightColors.push(colors(0, 140, 140));
+        this._eqHighlightColors.push(colors(140, 30, 110));
+        this._eqHighlightColors.push(colors(20, 50, 200));
+        this._eqHighlightColors.push(colors(210, 30, 40));
+        this._eqHighlightColors.push(colors(120, 130, 30));
+        this._eqHighlightColors.push(colors(50, 150, 70));
+        this._eqHighlightColors.push(colors(10, 90, 180));
     }
 
     static _rowHeight: number = 50;
@@ -607,32 +623,22 @@ export class CollectionSchemaView extends CollectionSubView() {
     highlightCells = (text: string) => {
         this.removeCellHighlights();
 
-        const randomRGBColor = (): string[] => {
-            const brightness = 450;
-            const r = Math.floor(Math.random() * 256);
-            const g = Math.floor(Math.random() * Math.min(256, brightness - r));
-            const b = Math.floor(brightness - r - g);
-        
-            const lightenedRGB =  ClientUtils.lightenRGB(r, g, b, 65);
-            const rL = lightenedRGB[0]; const gL = lightenedRGB[1]; const bL = lightenedRGB[2]; // prettier-ignore
-            const bgdRGB = {rL, gL, bL};
-
-            return new Array<string>(`rgb(${r}, ${g}, ${b})`, `rgb(${bgdRGB.rL}, ${bgdRGB.gL}, ${bgdRGB.bL})`);
-        }
-
         const cellsToHighlight = this.findCellRefs(text);
+        console.log(cellsToHighlight);
         this._highlightedCellsInfo = [...cellsToHighlight];
-        this._highlightedCellsInfo.forEach(info => {
-            const color = randomRGBColor();
+
+        for (let i = 0; i < this._highlightedCellsInfo.length; ++i) {
+            const info = this._highlightedCellsInfo[i];
+            const color = this._eqHighlightColors[i % 10];
+            const colorStrings = [`solid 2px rgb(${color[0].r}, ${color[0].g}, ${color[0].b})`, `rgb(${color[1].r}, ${color[1].g}, ${color[1].b})`];
             const doc = info[0]; 
             const field = info[1];
             const key = `${doc[Id]}_${field}`;
             const cell = this.getCellElement(doc, field);
-            if (!this._cellHighlightColors.has(key)) {this._cellHighlightColors.set(key, new Array<string>(`solid 2px ${color[0]}`, color[1]))}
+            if (!this._cellHighlightColors.has(key)) {this._cellHighlightColors.set(key, [colorStrings[0], colorStrings[1]])}
             cell.style.border = this._cellHighlightColors.get(key)[0];
             cell.style.backgroundColor = this._cellHighlightColors.get(key)[1];
-        });
-
+        }
     }
 
     @action
-- 
cgit v1.2.3-70-g09d2


From 6d8c85aacba7d9ccdedfb85b838e84ad914e6081 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sat, 29 Jun 2024 19:07:27 -0400
Subject: highlight updates properly when highlighted cell is selected; no
 longer possible to add EmptyKey to equation

---
 .../collections/collectionSchema/CollectionSchemaView.tsx   | 13 +++++++------
 .../views/collections/collectionSchema/SchemaTableCell.tsx  |  2 ++
 2 files changed, 9 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index d3259d42e..bcb94e10d 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -73,11 +73,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     constructor(props: any) {
         super(props);
         makeObservable(this);
-        const lightenedColor = (r: number, g: number, b:number) => {
-            const lightened = ClientUtils.lightenRGB(r, g, b, 165);
-            return {r: lightened[0], g: lightened[1], b: lightened[2]}
-        }
-        const colors = (r: number, g: number, b: number): [any, any] => {return [{r: r, g: g, b: b}, lightenedColor(r, g, b)]}
+        const lightenedColor = (r: number, g: number, b:number) => { const lightened = ClientUtils.lightenRGB(r, g, b, 165); return {r: lightened[0], g: lightened[1], b: lightened[2]}} // prettier-ignore
+        const colors = (r: number, g: number, b: number): [any, any] => {return [{r: r, g: g, b: b}, lightenedColor(r, g, b)]} // prettier-ignore
         this._eqHighlightColors.push(colors(70, 150, 50));
         this._eqHighlightColors.push(colors(180, 70, 20));
         this._eqHighlightColors.push(colors(70, 50, 150));
@@ -602,7 +599,11 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     removeCellHighlights = () => {
-        this.highlightedCells.forEach(cell => {cell.style.border = ''; cell.style.backgroundColor = '';});
+        this._highlightedCellsInfo.forEach(info => {
+            const doc = info[0];
+            const cell = this.getCellElement(doc, info[1]);
+            if (!this._selectedDocs.includes(doc)) cell.style.border = ''; 
+            cell.style.backgroundColor = '';});
         this._highlightedCellsInfo = [];
     }
 
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 084306c4a..1f5684151 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -266,6 +266,8 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 className="schema-table-cell"
                 onContextMenu={e => StopEvent(e)}
                 onPointerDown={action(e => {
+                    if (this.lockedInteraction) { e.stopPropagation(); e.preventDefault(); return; }
+
                     if (this._props.refSelectModeInfo.enabled && !selectedCell(this._props)){
                         e.stopPropagation();
                         e.preventDefault();
-- 
cgit v1.2.3-70-g09d2


From 821e10405c13e125ea439450b7a66090f0c118fa Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 30 Jun 2024 18:47:20 -0400
Subject: adding columns to left/right of other column

---
 .../collectionSchema/CollectionSchemaView.tsx      | 30 ++++++++++++++--------
 .../collectionSchema/SchemaColumnHeader.tsx        |  1 -
 2 files changed, 20 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index bcb94e10d..49cb86732 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -332,19 +332,19 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @undoBatch
-    addColumn = (key?: string, defaultVal?: any) => {
+    addColumn = (index: number = 0, key?: string, defaultVal?: any) => {
         if (key && !this.documentKeys.includes(key)) this.addNewKey(key, defaultVal);
         
         const newColWidth = this.tableWidth / (this.storedColumnWidths.length + 1);
         const currWidths = this.storedColumnWidths.slice();
-        currWidths.splice(0, 0, newColWidth);
+        currWidths.splice(index, 0, newColWidth);
         const newDesiredTableWidth = currWidths.reduce((w, cw) => w + cw, 0);
         this.layoutDoc.schema_columnWidths = new List<number>(currWidths.map(w => (w / newDesiredTableWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth)));
 
         const currKeys = this.columnKeys.slice();
         if (!key) key = 'EmptyColumnKey' + Math.floor(Math.random() * 1000000000000000).toString();
-        currKeys.splice(0, 0, key);
-        this.changeColumnKey(0, 'EmptyColumnKey' + Math.floor(Math.random() * 1000000000000000).toString());
+        currKeys.splice(index, 0, key);
+        this.changeColumnKey(index, 'EmptyColumnKey' + Math.floor(Math.random() * 1000000000000000).toString());
         this.layoutDoc.schema_columnKeys = new List<string>(currKeys);
     };
 
@@ -524,7 +524,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
             this.childDocs.forEach(doc => {
                 const cell = this._rowEles.get(doc).children[1].children[i];
-                if (!(this._selectedDocs.includes(doc) && i === this._selectedCol) && !(this.highlightedCells.includes(cell))) {
+                if (!(this._selectedDocs.includes(doc) && i === this._selectedCol) && !(this.highlightedCells.includes(cell)) && cell) {
                     cell.style.borderLeft = '';
                     cell.style.borderRight = '';
                     cell.style.borderBottom = '';
@@ -539,7 +539,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const rowCount: number = this._docs.length + 1;
         if (field || this.sortField){
             index = this.columnKeys.indexOf(field || this.sortField);
-            const increment: number = 100/rowCount;
+            const increment: number = 110/rowCount;
             for (let i = 1; i <= rowCount; ++i){
                 const adjColor = ClientUtils.lightenRGB(16, 66, 230, increment * i);
                 highlightColors.push(`solid 2px rgb(${adjColor[0]}, ${adjColor[1]}, ${adjColor[2]})`);
@@ -601,8 +601,9 @@ export class CollectionSchemaView extends CollectionSubView() {
     removeCellHighlights = () => {
         this._highlightedCellsInfo.forEach(info => {
             const doc = info[0];
-            const cell = this.getCellElement(doc, info[1]);
-            if (!this._selectedDocs.includes(doc)) cell.style.border = ''; 
+            const field = info[1];
+            const cell = this.getCellElement(doc, field);
+            if (!(this._selectedDocs.includes(doc) && this._selectedCol === this.columnKeys.indexOf(field))) cell.style.border = ''; 
             cell.style.backgroundColor = '';});
         this._highlightedCellsInfo = [];
     }
@@ -625,7 +626,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         this.removeCellHighlights();
 
         const cellsToHighlight = this.findCellRefs(text);
-        console.log(cellsToHighlight);
         this._highlightedCellsInfo = [...cellsToHighlight];
 
         for (let i = 0; i < this._highlightedCellsInfo.length; ++i) {
@@ -865,7 +865,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         if (this.columnKeys.includes(key)) return;
     
         if (this._makeNewColumn) {
-            this.addColumn(key, defaultVal);
+            this.addColumn(this.columnKeys.indexOf(key), key, defaultVal);
             this._makeNewColumn = false;
         } else this.changeColumnKey(this._columnMenuIndex! | index!, key, defaultVal);
 
@@ -1005,6 +1005,16 @@ export class CollectionSchemaView extends CollectionSubView() {
             subitems: sortOptions, 
             icon: 'sort' 
         });
+        cm.addItem({
+            description: 'Add column to left',
+            event: () => this.addColumn(index),
+            icon: 'plus',
+        });
+        cm.addItem({
+            description: 'Add column to right',
+            event: () => this.addColumn(index + 1),
+            icon: 'plus',
+        });
         cm.addItem({
             description: 'Delete column',
             event: () => this.removeColumn(index),
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 382d7487b..70db3d1f5 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -66,7 +66,6 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     constructor(props: SchemaColumnHeaderProps){
         super(props);
         makeObservable(this);
-        this._props.schemaView.openColumnMenu(0, false)
     }
     
     getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
-- 
cgit v1.2.3-70-g09d2


From c528298bf2375daff4ba8de170870eddf331aa4e Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 30 Jun 2024 19:08:37 -0400
Subject: removing column closes menu and stops editing

---
 .../collections/collectionSchema/CollectionSchemaView.tsx  |  6 +++++-
 .../collections/collectionSchema/SchemaColumnHeader.tsx    | 14 ++++----------
 2 files changed, 9 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 49cb86732..1b23e3c40 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -358,6 +358,10 @@ export class CollectionSchemaView extends CollectionSubView() {
     @undoBatch
     removeColumn = (index: number) => {
         if (this.columnKeys.length === 1) return;
+        if (this._columnMenuIndex === index) {
+            this._headerRefs[index].toggleEditing(false);
+            this.closeColumnMenu();
+        }
         const currWidths = this.storedColumnWidths.slice();
         currWidths.splice(index, 1);
         const newDesiredTableWidth = currWidths.reduce((w, cw) => w + cw, 0);
@@ -425,7 +429,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     dragColumn = (e: PointerEvent, index: number) => {
         this.closeColumnMenu();
-        this._headerRefs.forEach(ref => ref.stopEditing());
+        this._headerRefs.forEach(ref => ref.toggleEditing(false));
         this._draggedColIndex = index;
         this.setColDrag(true);
         const dragData = new DragManager.ColumnDragData(index);
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 70db3d1f5..2b56ae881 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -71,15 +71,9 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
     setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
     @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;}
-    @action updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)}
-    @action stopEditing = () => {
-        this._inputRef?.setIsEditing(false);
-        this._inputRef?.setIsFocused(false);
-    }
-
-    openKeyDropdown = () => {
-        this._props.schemaView.openColumnMenu(this._props.columnIndex, false)
-    }
+    updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)}
+    toggleEditing = (editing: boolean) => {this._inputRef?.setIsEditing(editing); this._inputRef?.setIsFocused(editing);}
+    openKeyDropdown = () => {this._props.schemaView.openColumnMenu(this._props.columnIndex, false)}
 
     @action
     setupDrag = (e: React.PointerEvent) => {
@@ -89,7 +83,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     renderProps = (props: SchemaColumnHeaderProps) => {
         const { columnKeys, columnWidth, Document } = props;
         const fieldKey = columnKeys[props.columnIndex];
-        const color = 'black'; // color of text in cells
+        const color = 'black';
         const fieldProps: FieldViewProps = {
             childFilters: returnEmptyFilter,
             childFiltersByRanges: returnEmptyFilter,
-- 
cgit v1.2.3-70-g09d2


From fc4b71f2623fe1602d911b71828b8b3f6c0ce0cd Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 30 Jun 2024 19:42:18 -0400
Subject: deleting column no longer messes up drag highlight; removed
 unecessary documents.ts changes

---
 src/client/documents/Documents.ts                                   | 6 ------
 .../views/collections/collectionSchema/CollectionSchemaView.tsx     | 3 +++
 2 files changed, 3 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 1b1608cd5..dabbf9591 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -143,12 +143,7 @@ class ListInfo extends FInfo {
     fieldType? = FInfoFieldType.list;
     values?: List<any>[] = [];
 }
-class MapInfo extends FInfo {
-    fieldType? = FInfoFieldType.list;
-    values?: List<any>[] = [];
-}
 type BOOLt = BoolInfo | boolean;
-type MAPt = MapInfo | Map<any, any>;
 type NUMt = NumInfo | number;
 type STRt = StrInfo | string;
 type LISTt = ListInfo | List<any>;
@@ -234,7 +229,6 @@ export class DocumentOptions {
     _lockedTransform?: BOOLt = new BoolInfo('lock the freeform_panx,freeform_pany and scale parameters of the document so that it be panned/zoomed');
     _childrenSharedWithSchema?: BOOLt = new BoolInfo("whether this document's children are displayed in its parent schema view", false);
     _lockedSchemaEditing?: BOOLt = new BoolInfo("", false);
-    _schemaInputs?: LISTt = new ListInfo('user inputs to schema field', false)
 
     dataViz_title?: string;
     dataViz_line?: string;
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 1b23e3c40..2f62b1c8d 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -43,6 +43,7 @@ import { DocumentManager } from '../../../util/DocumentManager';
 import { TbHemispherePlus } from 'react-icons/tb';
 import { docs_v1 } from 'googleapis';
 import { SchemaCellField } from './SchemaCellField';
+import { threadId } from 'worker_threads';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -370,6 +371,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         const currKeys = this.columnKeys.slice();
         currKeys.splice(index, 1);
         this.layoutDoc.schema_columnKeys = new List<string>(currKeys); 
+
+        this._colEles.splice(index, 1);
     };
 
     @action
-- 
cgit v1.2.3-70-g09d2


From c9e3b7679247b615b1821d913b2648a0c1560c5a Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 1 Jul 2024 13:18:22 -0400
Subject: keymenu no longer opened on dragged col drop

---
 .../collections/collectionSchema/CollectionSchemaView.tsx    |  4 ++--
 .../collections/collectionSchema/SchemaColumnHeader.tsx      | 12 +++++++-----
 2 files changed, 9 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 2f62b1c8d..d0b531ad6 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -434,7 +434,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         this.closeColumnMenu();
         this._headerRefs.forEach(ref => ref.toggleEditing(false));
         this._draggedColIndex = index;
-        this.setColDrag(true);
+        this.setColDrag(true);  
         const dragData = new DragManager.ColumnDragData(index);
         const dragEles = [this._colEles[index]];
         this.childDocs.forEach(doc => dragEles.push(this._rowEles.get(doc).children[1].children[index]));
@@ -741,7 +741,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
         if (de.complete.columnDragData) {
-            this.setColDrag(false);
+            setTimeout(() => {this.setColDrag(false);});
             e.stopPropagation();
             return true;
         }
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 2b56ae881..22237f448 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -23,7 +23,6 @@ import { undoable } from '../../../util/UndoManager';
 import { FInfo } from '../../../documents/Documents';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
 import { IconButton, Size } from 'browndash-components';
-import { TbHospital } from 'react-icons/tb';
 
 export enum SchemaFieldType {
     Header, Cell
@@ -70,10 +69,13 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     
     getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
     setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
-    @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;}
-    updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)}
-    toggleEditing = (editing: boolean) => {this._inputRef?.setIsEditing(editing); this._inputRef?.setIsFocused(editing);}
-    openKeyDropdown = () => {this._props.schemaView.openColumnMenu(this._props.columnIndex, false)}
+    @action updateAlt = (newAlt: string) => {this._altTitle = newAlt};
+    updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)};
+    openKeyDropdown = () => {console.log('caled'); console.log(this._props.schemaView._colBeingDragged); !this._props.schemaView._colBeingDragged && this._props.schemaView.openColumnMenu(this._props.columnIndex, false)};
+    toggleEditing = (editing: boolean) => {
+        this._inputRef?.setIsEditing(editing); 
+        this._inputRef?.setIsFocused(editing);
+    };
 
     @action
     setupDrag = (e: React.PointerEvent) => {
-- 
cgit v1.2.3-70-g09d2


From a4199d30b81c464fd7ff15eee1fc56f432ee53a3 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 1 Jul 2024 14:52:35 -0400
Subject: fonticonbox no longer added when dragged from tools menu

---
 .../views/collections/collectionSchema/CollectionSchemaView.tsx       | 4 +++-
 src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx  | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index d0b531ad6..7a90b3505 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -44,6 +44,7 @@ import { TbHemispherePlus } from 'react-icons/tb';
 import { docs_v1 } from 'googleapis';
 import { SchemaCellField } from './SchemaCellField';
 import { threadId } from 'worker_threads';
+import { FontIconBox } from '../../nodes/FontIconBox/FontIconBox';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -740,6 +741,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
+        console.log('called')
         if (de.complete.columnDragData) {
             setTimeout(() => {this.setColDrag(false);});
             e.stopPropagation();
@@ -1301,7 +1303,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort
             docs = this.sortDocs(field, desc, true);
         } else {
-            const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : [];
+            const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged.filter(doc => !(doc.type === 'fonticonbox')) : [];
             docs = docs.filter(d => !draggedDocs.includes(d));
             docs.splice(this.rowDropIndex, 0, ...draggedDocs);
         }
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 22237f448..4f5b3005d 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -71,7 +71,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
     @action updateAlt = (newAlt: string) => {this._altTitle = newAlt};
     updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)};
-    openKeyDropdown = () => {console.log('caled'); console.log(this._props.schemaView._colBeingDragged); !this._props.schemaView._colBeingDragged && this._props.schemaView.openColumnMenu(this._props.columnIndex, false)};
+    openKeyDropdown = () => {!this._props.schemaView._colBeingDragged && this._props.schemaView.openColumnMenu(this._props.columnIndex, false)};
     toggleEditing = (editing: boolean) => {
         this._inputRef?.setIsEditing(editing); 
         this._inputRef?.setIsFocused(editing);
-- 
cgit v1.2.3-70-g09d2


From 3dd0a92767972736f415341c0b6e06e6e3a242b1 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 1 Jul 2024 16:38:24 -0400
Subject: highlighting then un-highlighting a selected cell with equations now
 properly maintains original select highlight

---
 src/client/views/EditableView.tsx                     |  1 -
 .../collectionSchema/CollectionSchemaView.tsx         | 19 +++++++++++++++----
 .../collections/collectionSchema/SchemaCellField.tsx  |  8 ++++++--
 .../collections/collectionSchema/SchemaRowBox.tsx     | 13 ++-----------
 .../collections/collectionSchema/SchemaTableCell.tsx  | 10 +++-------
 5 files changed, 26 insertions(+), 25 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 0c09e12de..af6a43555 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -206,7 +206,6 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     
     @action
     finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
-        //if (invalid) raise error
         if (this._props.SetValue(value, shiftDown, enterKey)) {
             this._editing = false;
             this._props.isEditingCallback?.(false);
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 7a90b3505..b81cfa821 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -606,12 +606,24 @@ export class CollectionSchemaView extends CollectionSubView() {
         return cells;
     }
 
+    selectionOverlap = (doc: Doc): [boolean, boolean] => {
+        const docs = this.docsWithDrag.docs;
+        const index = this.rowIndex(doc);
+        const selectedBelow: boolean = this._selectedDocs.includes(docs[index + 1]);
+        const selectedAbove: boolean = this._selectedDocs.includes(docs[index - 1]);
+        return [selectedAbove, selectedBelow];
+    }
+
     removeCellHighlights = () => {
         this._highlightedCellsInfo.forEach(info => {
             const doc = info[0];
             const field = info[1];
             const cell = this.getCellElement(doc, field);
-            if (!(this._selectedDocs.includes(doc) && this._selectedCol === this.columnKeys.indexOf(field))) cell.style.border = ''; 
+            if (this._selectedDocs.includes(doc) && this._selectedCol === this.columnKeys.indexOf(field)) {
+                cell.style.border = `solid 2px ${Colors.MEDIUM_BLUE}`;
+                if (this.selectionOverlap(doc)[0]) cell.style.borderTop = '';
+                if (this.selectionOverlap(doc)[1]) cell.style.borderBottom = '';
+            } else cell.style.border = '';
             cell.style.backgroundColor = '';});
         this._highlightedCellsInfo = [];
     }
@@ -741,7 +753,6 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
-        console.log('called')
         if (de.complete.columnDragData) {
             setTimeout(() => {this.setColDrag(false);});
             e.stopPropagation();
@@ -881,8 +892,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         this.closeColumnMenu();
     };
 
-    setColumnValues = (key: string, value: string) => {
-        if (this._selectedCells.length === 1) this.docs.forEach(doc => !doc._lockedSchemaEditing &&Doc.SetField(doc, key, value)); 
+    setCellValues = (key: string, value: string) => {
+        if (this._selectedCells.length === 1) this.docs.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); 
         else this._selectedCells.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); 
         return true;
     };
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index c7c483df8..e1059b8fc 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -95,7 +95,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             () => this._props.GetValue(),
             fieldVal => {
                 this._unrenderedContent = fieldVal ?? '';
-                this.setContent(this._unrenderedContent);
+                this.finalizeEdit(false, false, false);
             }
         )
     }
@@ -246,6 +246,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.nativeEvent.defaultPrevented) return; // hack .. DashFieldView grabs native events, but react ignores stoppedPropagation and preventDefault, so we need to check it here
+        // if (e.metaKey) {
+        //     e.stopPropagation();
+        //     e.preventDefault();
+        // }
         switch (e.key) {
             case 'Tab':
                 e.stopPropagation();
@@ -302,7 +306,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     finalizeEdit(shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
         if (this._unrenderedContent.replace(this.selfRefPattern, '') !== this._unrenderedContent) {
             this._dependencyMessageShown ? this._dependencyMessageShown = false :
-            alert("Circular dependency detected. Please update the field.")
+            alert(`Circular dependency detected. Please update the field at ${this.selfRefPattern}.`)
             this._dependencyMessageShown = true;
             return;
         }
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 9ac7a24b2..2410b2793 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -101,23 +101,14 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         return infos;
     }
 
-    @computed get isolatedSelection() {
-        const toReturn: [boolean, boolean] = [true, true];
-        const docs = this.schemaView.docsWithDrag.docs;
-        const selectedBelow: boolean = this.schemaView?._selectedDocs.includes(docs[this.rowIndex + 1]);
-        const selectedAbove: boolean = this.schemaView?._selectedDocs.includes(docs[this.rowIndex - 1]);
-        toReturn[0] = selectedAbove;
-        toReturn[1] = selectedBelow;
-        return toReturn;
-    }
-
+    isolatedSelection = (doc: Doc) => {return this.schemaView?.selectionOverlap(doc)};
     setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY);
     selectedCol = () => this.schemaView._selectedCol;
     getFinfo = computedFn((fieldKey: string) => this.schemaView?.fieldInfos.get(fieldKey));
     selectCell = (doc: Doc, col: number, shift: boolean, ctrl: boolean) => this.schemaView?.selectCell(doc, col, shift, ctrl);
     deselectCell = () => this.schemaView?.deselectAllCells();
     selectedCells = () => this.schemaView?._selectedDocs;
-    setColumnValues = (field: any, value: any) => this.schemaView?.setColumnValues(field, value) ?? false;
+    setColumnValues = (field: any, value: any) => this.schemaView?.setCellValues(field, value) ?? false;
     columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth);
     computeRowIndex = () => this.schemaView?.rowIndex(this.Document);
     highlightCells = (text: string) => this.schemaView?.highlightCells(text);
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 1f5684151..e2a05da7f 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -60,7 +60,7 @@ export interface SchemaTableCellProps {
     autoFocus?: boolean; // whether to set focus on creation, othwerise wait for a click
     rootSelected?: () => boolean;
     rowSelected: () => boolean;
-    isolatedSelection: [boolean, boolean];
+    isolatedSelection: (doc: Doc) => [boolean, boolean];
     highlightCells: (text: string) => void;
     equationHighlightRef: ObservableMap<HTMLDivElement, string>;
     eqHighlightFunc: (text: string) => HTMLDivElement[] | [];
@@ -174,10 +174,6 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
 
         const inQuotes = (field: string) => {return ((field.startsWith('`') && field.endsWith('`')) || (field.startsWith("'") && field.endsWith("'")) || (field.startsWith('"') && field.endsWith('"')))}
         if (!inQuotes(this._submittedValue) && inQuotes(modField)) modField = modField.substring(1, modField.length - 1);
-        
-        const selfRefPattern = `d${this.docIndex}.${this._props.fieldKey}`
-        const selfRefRegX = RegExp(selfRefPattern, 'g');
-        if (selfRefRegX.exec(modField) !== null) { return 'Invalid'}
 
         return eqSymbol + modField;
     }
@@ -255,8 +251,8 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         const sides: Array<string | undefined> = [];
         sides[0] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // left
         sides[1] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // right
-        sides[2] = (!this._props.isolatedSelection[0] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // top
-        sides[3] = (!this._props.isolatedSelection[1] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // bottom
+        sides[2] = (!this._props.isolatedSelection(this._props.Document)[0] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // top
+        sides[3] = (!this._props.isolatedSelection(this._props.Document)[1] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // bottom
         return sides;
     }
 
-- 
cgit v1.2.3-70-g09d2


From da10c63823f7bc5e90c3f397c9ff06431d2ee027 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 2 Jul 2024 00:55:45 -0400
Subject: eq highlight cycling inconsistency fixed

---
 .../views/collections/collectionSchema/CollectionSchemaView.tsx   | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index b81cfa821..a6a5df4b9 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -614,6 +614,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         return [selectedAbove, selectedBelow];
     }
 
+    @action
     removeCellHighlights = () => {
         this._highlightedCellsInfo.forEach(info => {
             const doc = info[0];
@@ -655,10 +656,11 @@ export class CollectionSchemaView extends CollectionSubView() {
             const doc = info[0]; 
             const field = info[1];
             const key = `${doc[Id]}_${field}`;
+            console.log(key + ' ' + i % 10 + ' color: ' + color[0].r + color[0].g + color[0].b);
             const cell = this.getCellElement(doc, field);
-            if (!this._cellHighlightColors.has(key)) {this._cellHighlightColors.set(key, [colorStrings[0], colorStrings[1]])}
-            cell.style.border = this._cellHighlightColors.get(key)[0];
-            cell.style.backgroundColor = this._cellHighlightColors.get(key)[1];
+            this._cellHighlightColors.set(key, [colorStrings[0], colorStrings[1]]);
+            cell.style.border = colorStrings[0];
+            cell.style.backgroundColor = colorStrings[1];
         }
     }
 
-- 
cgit v1.2.3-70-g09d2


From c69f325a6640d5843fabce5488a49e74d3efbba1 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 2 Jul 2024 01:20:15 -0400
Subject: resizer right working

---
 .../collections/collectionSchema/CollectionSchemaView.tsx     | 11 +++++++----
 .../views/collections/collectionSchema/SchemaColumnHeader.tsx |  6 +++---
 2 files changed, 10 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index a6a5df4b9..ef3efea39 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -377,20 +377,23 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    startResize = (e: any, index: number) => {
+    startResize = (e: any, index: number, rightSide: boolean) => {
         this._displayColumnWidths = this.storedColumnWidths;
-        setupMoveUpEvents(this, e, moveEv => this.resizeColumn(moveEv, index), this.finishResize, emptyFunction);
+        setupMoveUpEvents(this, e, moveEv => this.resizeColumn(moveEv, index, rightSide), this.finishResize, emptyFunction);
     };
 
     @action
-    resizeColumn = (e: PointerEvent, index: number) => {
+    resizeColumn = (e: PointerEvent, index: number, rightSide: boolean) => {
         if (this._displayColumnWidths) {
             let shrinking;
             let growing;
 
             let change = e.movementX;
 
-            if (index !== 0) {
+            if (rightSide && (index !== this._displayColumnWidths.length - 1)) {
+                growing = change < 0 ? index + 1: index;
+                shrinking = change < 0 ? index : index + 1;
+            } else if (index !== 0) {
                 growing = change < 0 ? index : index - 1;
                 shrinking = change < 0 ? index - 1 : index;
             }
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 4f5b3005d..40509c41b 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -41,7 +41,7 @@ export interface SchemaColumnHeaderProps {
     setSort: (field: string | undefined, desc?: boolean) => void;
     removeColumn: (index: number) => void;
     rowHeight: () => number;
-    resizeColumn: (e: any, index: number) => void;
+    resizeColumn: (e: any, index: number, isRight: boolean) => void;
     dragColumn: (e: any, index: number) => boolean;
     openContextMenu: (x: number, y: number, index: number) => void;
     setColRef: (index: number, ref: HTMLDivElement) => void;
@@ -235,7 +235,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                             this._props.setColRef(this._props.columnIndex, col);
                         }
                     }}>
-                    <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} />
+                    <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex, false)} />
 
                     <div className="schema-header-text">{this.editableView}</div>
 
@@ -245,7 +245,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                         </div>
                     </div>  
 
-                    <div className="schema-column-resizer right" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} />
+                    <div className="schema-column-resizer right" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex, true)} />
                 </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 8c48d4d489e0fd670ba46953dca3a435220d00f4 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 2 Jul 2024 13:58:10 -0400
Subject: keymenu changes

---
 .../views/collections/collectionSchema/CollectionSchemaView.scss   | 4 +++-
 .../views/collections/collectionSchema/CollectionSchemaView.tsx    | 7 ++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index e3f3dafab..c32661214 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -51,7 +51,9 @@
 .schema-filter-menu {
     background: $light-gray;
     position: absolute;
-    max-height: 300px;
+    border: 1px solid $medium-gray;
+    border-bottom: 2px solid $medium-gray;
+    max-height: 201px;
     display: flex;
     overflow: hidden;
     flex-direction: column;
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index ef3efea39..cc8b0fc7e 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1159,11 +1159,8 @@ export class CollectionSchemaView extends CollectionSubView() {
                             <p>
                                 <span className="schema-search-result-key">
                                     <b>{key}</b>
-                                    {this.fieldInfos.get(key)!.fieldType ? ':' : ''}
-                                </span>
-                                <span className="schema-search-result-type" style={{ color: this.fieldInfos.get(key)!.readOnly ? 'red' : 'inherit' }}>
-                                    {this.fieldInfos.get(key)!.fieldType}
                                 </span>
+                                <span>: </span>
                                 <span className="schema-search-result-desc">&nbsp;&nbsp;{this.fieldInfos.get(key)!.description}</span>
                             </p>
                         </div>
@@ -1313,7 +1310,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
     
     @computed get docsWithDrag() {
-        let docs = this._docs;
+        let docs = this.docs.slice();
         if (this.sortField){
             const field = StrCast(this.layoutDoc.sortField);
             const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort
-- 
cgit v1.2.3-70-g09d2


From 32771d4b202a8552815c7f4459d5ac5142401292 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 3 Jul 2024 04:40:55 -0400
Subject: schemacell refactor started

---
 .../collectionSchema/SchemaCellField.tsx           | 119 ++++++++++++++++++++-
 .../collectionSchema/SchemaTableCell.tsx           |   2 +-
 2 files changed, 116 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index e1059b8fc..5048bf899 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -8,6 +8,15 @@ import { FieldView, FieldViewProps } from "../../nodes/FieldView";
 import { ObjectField } from "../../../../fields/ObjectField";
 import { Doc } from "../../../../fields/Doc";
 import { DocumentView } from "../../nodes/DocumentView";
+import { date } from "serializr";
+import { createRoot } from "react-dom/client";
+import DatePicker from "react-datepicker";
+import { emptyFunction } from "../../../../Utils";
+import { DateField } from "../../../../fields/DateField";
+
+enum EleType {
+    plainText, fieldReference, date, boolean
+}
 
 export interface SchemaCellFieldProps {
     contents: any;
@@ -34,6 +43,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     @observable _displayedContent = '';
     @observable _inCellSelectMode: boolean = false;
     @observable _dependencyMessageShown: boolean = false;
+    @observable _displayedElements: JSX.Element[] = [];
 
     constructor(props: SchemaCellFieldProps) {
         super(props);
@@ -101,6 +111,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     }
 
     componentDidUpdate(prevProps: Readonly<SchemaCellFieldProps>) {
+        this.addReactComponents();
         super.componentDidUpdate(prevProps);
         if (this._editing && this._props.editing === false) {
             this.finalizeEdit(false, true, false);
@@ -116,12 +127,31 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this.finalizeEdit(false, true, false);
     }
 
-    generateSpan = (text: string, cell: HTMLDivElement | undefined) => {
+    addReactComponents = () => {
+        if (!this._inputref) return;
+
+        const dateRefs = Array.from(this._inputref.querySelectorAll('.date-placeholder'));
+
+        dateRefs.forEach(ref => {
+            const root = createRoot(ref);
+            root.render(<DatePicker dateFormat="Pp" selected={new Date()} onChange={emptyFunction} />);
+        })
+    }
+
+    generateSpan = (text: string, cell: HTMLDivElement | undefined): JSX.Element => {
         const selfRef = text === this.selfRefPattern;
-        return `<span style="text-decoration: ${selfRef ? 'underline' : 'none'}; text-decoration-color: red; color: ${selfRef ? 'gray' : cell?.style.borderTop.replace('2px solid', '')}">${text}</span>`;
+        return (
+            <span style={{
+                textDecoration: selfRef ? 'underline' : 'none', 
+                textDecorationColor: 'red', 
+                color: selfRef ? 'gray' : cell?.style.borderTop.replace('2px solid', '')}}>
+                {text}
+            </span>
+        );
     }
 
     makeSpans = (content: string) => {
+        const spans: JSX.Element[] = [];
         let chunkedText = content;
 
         const pattern = /(this|d(\d+))\.(\w+)/g;
@@ -140,13 +170,89 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
         let matchNum = 0;
         matches.forEach((match: string) => {
-            chunkedText = chunkedText.replace(match, this.generateSpan(match, cells.get(match)));
+            chunkedText = chunkedText.replace(match, '');
+            spans.push(this.generateSpan(match, cells.get(match)));
             ++matchNum;
         })
 
+        chunkedText = chunkedText.replace(/{{date}}/g, `<span class="date-placeholder">placeholder text</span>`);
+        console.log(chunkedText)
+
         return chunkedText;
     }
 
+    verifyCellRef = (text: string): [string, HTMLDivElement | undefined] | undefined => {
+        const pattern = /(this|d(\d+))\.(\w+)/g;
+        let matchedText: string = '';
+        let matchedCell: HTMLDivElement | undefined = undefined; 
+        let match: RegExpExecArray | null;
+
+        while ((match = pattern.exec(text)) !== null) {
+            const cells = this._props.getCells(match[0]);
+            if (cells.length) {
+                matchedText = match[0];
+                matchedCell = cells[0];
+            }
+        }
+
+        if (!matchedText && !matchedCell) return undefined;
+        else return [matchedText, matchedCell];
+    }
+
+    elementsFromText = (chunks: string[]): JSX.Element[] => {
+        const eles: any[] = [];
+
+        chunks.forEach(text => {
+            const cellRef = this.verifyCellRef(text);
+            if (cellRef) {
+                eles.push(this.generateSpan(cellRef[0], cellRef[1]));
+            } else if (!text.replace('{{date}}', '')){
+                eles.push(<DatePicker dateFormat="Pp" selected={new Date()} onChange={emptyFunction} />);
+            } else if (!text.replace('{{boolean}}', '')) {
+                eles.push(<div>boolean thing</div>);
+            } else {
+                eles.push(<span>{text}</span>);
+            }
+        });
+
+        return eles;
+    }
+
+    parseElements = () => {
+        let string: string = this._unrenderedContent;
+        if (string.startsWith(':')) string = string.slice(1);
+        if (string.startsWith('=')) string = string.slice(1);
+
+        const chunks: string[] = [];
+
+        let subStr: string = '';
+        let currChar = '';
+        for (let i = 0; i < string.length; i++){
+            currChar = string[i];
+            if ((currChar === ' ' && subStr.trim()) || (currChar !== ' ' && !subStr.trim())) {
+                chunks.push(subStr);
+                subStr = currChar;
+            } else {
+                subStr += currChar;
+            }
+        }
+
+        if (subStr) {chunks.push(subStr)};
+
+        return this.elementsFromText(chunks);
+    }
+
+    // `<input
+    //     style={{ marginRight: 4 }}
+    //     type="checkbox"
+    //     checked={BoolCast(this._props.Document[this._props.fieldKey])}
+    //     onChange={undoBatch((value: React.ChangeEvent<HTMLInputElement> | undefined) => {
+    //         if ((value?.nativeEvent as any).shiftKey) {
+    //             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? ''));
+    //         } else Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? ''));
+    //     })}
+    // />`
+
     @action 
     setContent = (content: string, restoreCursorPos?: boolean) => {
         const pos = this.cursorPosition;
@@ -235,6 +341,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this._props.highlightCells?.(targVal);
         if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)};
         this.setupRefSelect(this.refSelectConditionMet);
+        console.log(this.parseElements());
     };
 
     setupRefSelect = (enabled: boolean) => {
@@ -351,8 +458,12 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             onClick={e => e.stopPropagation}
             onPointerUp={e => e.stopPropagation}
             onPointerMove={e => {e.stopPropagation(); e.preventDefault()}}
-            dangerouslySetInnerHTML={{ __html: this._displayedContent }}
+            suppressContentEditableWarning={true}
+            //dangerouslySetInnerHTML={{ __html: this._displayedContent }}
             >
+                {this.parseElements().map((ele, index) => {
+                    return <div key={index}>{ele}</div>
+                })}
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index e2a05da7f..7d29e40cc 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -389,7 +389,7 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp
         const { pointerEvents } = SchemaTableCell.renderProps(this._props);
         return (
             <>
-                <div style={{ pointerEvents: 'none' }}>
+                <div style={{ pointerEvents: 'none'}}>
                     <DatePicker dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={emptyFunction} />
                 </div>
                 {pointerEvents === 'none' ? null : (
-- 
cgit v1.2.3-70-g09d2


From bb890c23b367374d9da7eb10d879ebbf48dc4e77 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sat, 6 Jul 2024 02:31:27 -0400
Subject: wheel spinning

---
 .../collectionSchema/SchemaCellField.tsx           | 44 +++++++++++-----------
 1 file changed, 22 insertions(+), 22 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 5048bf899..3be9167fe 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -111,7 +111,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     }
 
     componentDidUpdate(prevProps: Readonly<SchemaCellFieldProps>) {
-        this.addReactComponents();
         super.componentDidUpdate(prevProps);
         if (this._editing && this._props.editing === false) {
             this.finalizeEdit(false, true, false);
@@ -127,24 +126,25 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this.finalizeEdit(false, true, false);
     }
 
-    addReactComponents = () => {
-        if (!this._inputref) return;
+    // addReactComponents = () => {
+    //     if (!this._inputref) return;
 
-        const dateRefs = Array.from(this._inputref.querySelectorAll('.date-placeholder'));
+    //     const dateRefs = Array.from(this._inputref.querySelectorAll('.date-placeholder'));
 
-        dateRefs.forEach(ref => {
-            const root = createRoot(ref);
-            root.render(<DatePicker dateFormat="Pp" selected={new Date()} onChange={emptyFunction} />);
-        })
-    }
+    //     dateRefs.forEach(ref => {
+    //         const root = createRoot(ref);
+    //         root.render(<DatePicker dateFormat="Pp" selected={new Date} onChange={emptyFunction} />);
+    //     })
+    // }
 
     generateSpan = (text: string, cell: HTMLDivElement | undefined): JSX.Element => {
         const selfRef = text === this.selfRefPattern;
+        const color: string | undefined = cell?.style.borderTop.replace('2px solid', '');
         return (
             <span style={{
                 textDecoration: selfRef ? 'underline' : 'none', 
                 textDecorationColor: 'red', 
-                color: selfRef ? 'gray' : cell?.style.borderTop.replace('2px solid', '')}}>
+                color: selfRef ? 'gray' : color}}>
                 {text}
             </span>
         );
@@ -176,7 +176,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         })
 
         chunkedText = chunkedText.replace(/{{date}}/g, `<span class="date-placeholder">placeholder text</span>`);
-        console.log(chunkedText)
 
         return chunkedText;
     }
@@ -206,10 +205,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             const cellRef = this.verifyCellRef(text);
             if (cellRef) {
                 eles.push(this.generateSpan(cellRef[0], cellRef[1]));
-            } else if (!text.replace('{{date}}', '')){
+            } else if (text && !text.replace('{{date}}', '')){
                 eles.push(<DatePicker dateFormat="Pp" selected={new Date()} onChange={emptyFunction} />);
-            } else if (!text.replace('{{boolean}}', '')) {
-                eles.push(<div>boolean thing</div>);
+            } else if (text && !text.replace('{{boolean}}', '')) {
+                eles.push(<span>boolean thing</span>);
             } else {
                 eles.push(<span>{text}</span>);
             }
@@ -218,8 +217,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         return eles;
     }
 
-    parseElements = () => {
-        let string: string = this._unrenderedContent;
+    parseElements = (content: string) => {
+        let string: string = content;
         if (string.startsWith(':')) string = string.slice(1);
         if (string.startsWith('=')) string = string.slice(1);
 
@@ -229,7 +228,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         let currChar = '';
         for (let i = 0; i < string.length; i++){
             currChar = string[i];
-            if ((currChar === ' ' && subStr.trim()) || (currChar !== ' ' && !subStr.trim())) {
+            if (((string.charCodeAt(i) === 32 || string.charCodeAt(i) === 160) && subStr.trim()) || (currChar !== ' ' && !subStr.trim())) {
                 chunks.push(subStr);
                 subStr = currChar;
             } else {
@@ -256,7 +255,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     @action 
     setContent = (content: string, restoreCursorPos?: boolean) => {
         const pos = this.cursorPosition;
-        this._displayedContent = this.makeSpans(content);
+        this._displayedContent = content;
+        this._displayedElements = this.parseElements(content);
         restoreCursorPos && setTimeout(() => this.setCursorPosition(pos));
     }
 
@@ -339,9 +339,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         }
         this._unrenderedContent = targVal;
         this._props.highlightCells?.(targVal);
-        if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)};
+        if (this.parseElements(targVal).length > this.parseElements(this._displayedContent).length) this.setContent(targVal, true);
         this.setupRefSelect(this.refSelectConditionMet);
-        console.log(this.parseElements());
+        console.log(this.parseElements(targVal));
     };
 
     setupRefSelect = (enabled: boolean) => {
@@ -461,8 +461,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             suppressContentEditableWarning={true}
             //dangerouslySetInnerHTML={{ __html: this._displayedContent }}
             >
-                {this.parseElements().map((ele, index) => {
-                    return <div key={index}>{ele}</div>
+                {this._displayedElements.map((ele, index) => {
+                    return <span key={index}>{ele}</span>;
                 })}
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From 77d76c1a7e88b3ad4b72c4cd6aa4d4772042b65d Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 8 Jul 2024 14:07:26 -0400
Subject: method in dataviz for identifying valid templates (WIP); option added
 to contextmenu to create docs from dataViz

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 4d5f15a3e..1cb1ad6af 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -32,6 +32,8 @@ import { Histogram } from './components/Histogram';
 import { LineChart } from './components/LineChart';
 import { PieChart } from './components/PieChart';
 import { TableBox } from './components/TableBox';
+import { LinkManager } from '../../../util/LinkManager';
+import { Collection } from 'mongoose';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -431,6 +433,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const options = cm.findByDescription('Options...');
         const optionItems = options && 'subitems' in options ? options.subitems : [];
         optionItems.push({ description: `Analyze with AI`, event: () => this.askGPT(), icon: 'lightbulb' });
+        optionItems.push({ description: `Create documents`, event: () => this.askGPT(), icon: 'table-cells' });
         !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' });
     };
 
@@ -445,6 +448,26 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         GPTPopup.Instance.generateDataAnalysis();
     });
 
+    getPossibleTemplates = (): Doc[] => {
+        const linkedDocs: Doc[] = LinkManager.Instance.getAllRelatedLinks(this.Document).map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)));
+        const linkedCollections: Doc[] = linkedDocs.filter(doc => doc.type === 'collection');
+        const isColumnTitle = (title: string): boolean => {
+            const colTitles: string[] = Object.keys(this.records[0]);
+            for (let i = 0; i < colTitles.length; ++i){
+                if (colTitles[i] === title) return true;
+            }
+            return false;
+        }
+        const isValidTemplate = (collection: Doc) => {
+            const childDocs = DocListCast(collection[Doc.LayoutFieldKey(collection)]);
+            for (let i = 0; i < childDocs.length; ++i){
+                if (isColumnTitle(String(childDocs[i].title))) return true;
+            }
+            return false;
+        }
+        return linkedCollections.filter(col => isValidTemplate(col));
+    }
+
     /**
      * creates a new dataviz document filter from this one
      *      it appears to the right of this document, with the
-- 
cgit v1.2.3-70-g09d2


From 0c68bfcf4041558edf94f2898fc0531f24433351 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 9 Jul 2024 03:12:28 -0400
Subject: started doccreatormenu for dataviz

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |  16 ++-
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  12 +++
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 113 +++++++++++++++++++++
 3 files changed, 138 insertions(+), 3 deletions(-)
 create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
 create mode 100644 src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 1cb1ad6af..dae535ba6 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -34,6 +34,7 @@ import { PieChart } from './components/PieChart';
 import { TableBox } from './components/TableBox';
 import { LinkManager } from '../../../util/LinkManager';
 import { Collection } from 'mongoose';
+import { DocCreatorMenu } from './DocCreatorMenu';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -433,7 +434,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const options = cm.findByDescription('Options...');
         const optionItems = options && 'subitems' in options ? options.subitems : [];
         optionItems.push({ description: `Analyze with AI`, event: () => this.askGPT(), icon: 'lightbulb' });
-        optionItems.push({ description: `Create documents`, event: () => this.askGPT(), icon: 'table-cells' });
+        optionItems.push({ description: `Create documents`, event: () => DocCreatorMenu.Instance.displayMenu(200, 200), icon: 'table-cells' });
         !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' });
     };
 
@@ -450,16 +451,22 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     getPossibleTemplates = (): Doc[] => {
         const linkedDocs: Doc[] = LinkManager.Instance.getAllRelatedLinks(this.Document).map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)));
-        const linkedCollections: Doc[] = linkedDocs.filter(doc => doc.type === 'collection');
+        const linkedCollections: Doc[] = linkedDocs.filter(doc => doc.type === 'config').filter(doc => DocCast(doc.annotationOn).type === 'collection');
+        console.log('cols: ' + linkedCollections)
         const isColumnTitle = (title: string): boolean => {
             const colTitles: string[] = Object.keys(this.records[0]);
+            console.log('titles: ' + colTitles)
             for (let i = 0; i < colTitles.length; ++i){
-                if (colTitles[i] === title) return true;
+                if (colTitles[i] === title) {
+                    console.log(true);
+                    return true;
+                }
             }
             return false;
         }
         const isValidTemplate = (collection: Doc) => {
             const childDocs = DocListCast(collection[Doc.LayoutFieldKey(collection)]);
+            console.log('childDocs of col: ' + childDocs)
             for (let i = 0; i < childDocs.length; ++i){
                 if (isColumnTitle(String(childDocs[i].title))) return true;
             }
@@ -511,6 +518,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             // displays how to get data into the DataVizBox if its empty
             <div className="start-message">To create a DataViz box, either import / drag a CSV file into your canvas or copy a data table and use the command (ctrl + p) to bring the data table to your canvas.</div>
         ) : (
+            <div>
+                <DocCreatorMenu/>
             <div
                 className="dataViz-box"
                 onPointerDown={this.marqueeDown}
@@ -587,6 +596,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     />
                 )}
             </div>
+            </div>
         );
     }
 }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
new file mode 100644
index 000000000..fea5a6f59
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -0,0 +1,12 @@
+.docCreatorMenu-cont {
+    position: absolute;
+    display: flex;
+    min-width: 300px;
+    min-height: 400px;
+    z-index: 6;
+    box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%);
+    flex-direction: column;
+    background: whitesmoke;
+    color: black;
+    border-radius: 3px;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
new file mode 100644
index 000000000..d5c2bc227
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -0,0 +1,113 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { SnappingManager } from '../../../util/SnappingManager';
+import './DocCreatorMenu.scss';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
+
+@observer
+export class DocCreatorMenu extends ObservableReactComponent<{}> {
+
+    static Instance: DocCreatorMenu;
+
+    private _reactionDisposer?: IReactionDisposer;
+
+    @observable _pageX: number = 0;
+    @observable _pageY: number = 0;
+    @observable _display: boolean = false;
+
+    @observable _yRelativeToTop: boolean = true;
+    @observable _selectedIndex = -1;
+
+    @observable _mouseX: number = -1;
+    @observable _mouseY: number = -1;
+    @observable _shouldDisplay: boolean = false;
+
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+        DocCreatorMenu.Instance = this;
+    }
+
+    @action
+    onPointerDown = (e: PointerEvent) => {
+        this._mouseX = e.clientX;
+        this._mouseY = e.clientY;
+    };
+    @action
+    onPointerUp = (e: PointerEvent) => {
+        if (e.button !== 2 && !e.ctrlKey) return;
+        const curX = e.clientX;
+        const curY = e.clientY;
+        if (Math.abs(this._mouseX - curX) > 1 || Math.abs(this._mouseY - curY) > 1) {
+            this._shouldDisplay = false;
+        }
+
+        if (this._shouldDisplay) {
+            this._display = true;
+        }
+    };
+
+    componentDidMount() {
+        document.addEventListener('pointerdown', this.onPointerDown, true);
+        document.addEventListener('pointerup', this.onPointerUp);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('pointerdown', this.onPointerDown, true);
+        document.removeEventListener('pointerup', this.onPointerUp);
+        this._reactionDisposer?.();
+    }
+
+    static readonly buffer = 20;
+    static readonly width = 300;
+    static readonly height = 400;
+    get pageX() {
+        return this._pageX + DocCreatorMenu.width > window.innerWidth - DocCreatorMenu.buffer ? window.innerWidth - DocCreatorMenu.buffer - DocCreatorMenu.width : Math.max(0, this._pageX);
+    }
+
+    get pageY() {
+        return this._pageY + DocCreatorMenu.height > window.innerHeight - DocCreatorMenu.buffer ? window.innerHeight - DocCreatorMenu.buffer - DocCreatorMenu.height : Math.max(0, this._pageY);
+    }
+
+    @action
+    displayMenu = (x: number, y: number) => {
+        // maxX and maxY will change if the UI/font size changes, but will work for any amount
+        // of items added to the menu
+
+        this._pageX = x;
+        this._pageY = y;
+        this._shouldDisplay = true;
+    };
+
+    @action
+    closeMenu = () => {
+        const wasOpen = this._display;
+        this._display = false;
+        this._shouldDisplay = false;
+        return wasOpen;
+    };
+
+    render() {
+        return (
+            <div
+                className="docCreatorMenu-cont"
+                style={{
+                    display: '',
+                    left: this.pageX,
+                    ...(this._yRelativeToTop ? { top: Math.max(0, this.pageY) } : { bottom: this.pageY }),
+                    background: SnappingManager.userBackgroundColor,
+                    color: SnappingManager.userColor,
+                }}>
+            {!this._shouldDisplay ? undefined : 
+            <div>hi hi</div>
+            
+            
+            }
+            </div>
+            )
+        }
+    
+
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From b669b8c82efa9217cf065e670c7f6111b096f20d Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 10 Jul 2024 02:11:46 -0400
Subject: docCreatorMenu progress

---
 src/client/views/ContextMenu.tsx                   |   1 -
 src/client/views/MainView.tsx                      |   3 +
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |   9 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  59 ++++++++--
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 119 +++++++++++++++++----
 5 files changed, 157 insertions(+), 34 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index d784a14b8..de985263d 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -269,7 +269,6 @@ export class ContextMenu extends ObservableReactComponent<{}> {
                 // if (this._searchString.startsWith(this._defaultPrefix)) {
                 this._defaultItem?.(this._searchString.substring(this._defaultPrefix.length));
             }
-            this.closeMenu();
             e.preventDefault();
             e.stopPropagation();
         }
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5b9ddbb88..926e5fd55 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -76,6 +76,7 @@ import { PresBox } from './nodes/trails';
 import { AnchorMenu } from './pdf/AnchorMenu';
 import { GPTPopup } from './pdf/GPTPopup/GPTPopup';
 import { TopBar } from './topbar/TopBar';
+import { DocCreatorMenu } from './nodes/DataVizBox/DocCreatorMenu';
 
 const { LEFT_MENU_WIDTH, TOPBAR_HEIGHT } = require('./global/globalCssVariables.module.scss'); // prettier-ignore
 const _global = (window /* browser */ || global) /* node */ as any;
@@ -278,6 +279,7 @@ export class MainView extends ObservableReactComponent<{}> {
 
         library.add(
             ...[
+                fa.faWindowMaximize,
                 fa.faGift,
                 fa.faLockOpen,
                 fa.faSort,
@@ -1093,6 +1095,7 @@ export class MainView extends ObservableReactComponent<{}> {
                 <PreviewCursor />
                 <TaskCompletionBox />
                 <ContextMenu />
+                <DocCreatorMenu/>
                 <ImageLabelHandler />
                 <AnchorMenu />
                 <MapAnchorMenu />
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index dae535ba6..1e0a72a91 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -429,12 +429,12 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this.layoutDoc.dataViz_filterSelection = !this.layoutDoc.dataViz_filterSelection;
     };
 
-    specificContextMenu = (): void => {
+    specificContextMenu = (x: number, y: number): void => {
         const cm = ContextMenu.Instance;
         const options = cm.findByDescription('Options...');
         const optionItems = options && 'subitems' in options ? options.subitems : [];
         optionItems.push({ description: `Analyze with AI`, event: () => this.askGPT(), icon: 'lightbulb' });
-        optionItems.push({ description: `Create documents`, event: () => DocCreatorMenu.Instance.displayMenu(200, 200), icon: 'table-cells' });
+        optionItems.push({ description: `Create documents`, event: () => DocCreatorMenu.Instance.toggleDisplay(x, y), icon: 'table-cells' });
         !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' });
     };
 
@@ -518,8 +518,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             // displays how to get data into the DataVizBox if its empty
             <div className="start-message">To create a DataViz box, either import / drag a CSV file into your canvas or copy a data table and use the command (ctrl + p) to bring the data table to your canvas.</div>
         ) : (
-            <div>
-                <DocCreatorMenu/>
             <div
                 className="dataViz-box"
                 onPointerDown={this.marqueeDown}
@@ -530,7 +528,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     transform: `scale(${scale})`,
                     position: 'absolute',
                 }}
-                onContextMenu={this.specificContextMenu}
+                onContextMenu={(e) => this.specificContextMenu(e.pageX, e.pageY)}
                 onWheel={e => e.stopPropagation()}
                 ref={this._mainCont}>
                 <div className="datatype-button">
@@ -596,7 +594,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     />
                 )}
             </div>
-            </div>
         );
     }
 }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index fea5a6f59..43053ee34 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -1,12 +1,55 @@
 .docCreatorMenu-cont {
     position: absolute;
-    display: flex;
-    min-width: 300px;
-    min-height: 400px;
-    z-index: 6;
-    box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%);
-    flex-direction: column;
-    background: whitesmoke;
-    color: black;
+    z-index: 100000;
+    // box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%);
+    // background: whitesmoke; 
+    // color: black;
     border-radius: 3px;
+}   
+
+.docCreatorMenu-menu {
+    display: flex;
+    flex-direction: row;
+}
+
+.docCreatorMenu-menu-button {
+    width: 30px;
+    height: 30px;
+    background: whitesmoke; 
+    background-color: rgb(34, 34, 37);
+    border-radius: 5px;
+    border: 1px solid whitesmoke;
+    padding: 0px;
+    font-size: 14px;
+     
+    &.right{
+        margin-left: auto;
+        font-size: 12px;
+    }
+
+    &.close-menu {
+        margin-left: 0px;
+        font-size: 12px;
+    }
+
+    &.options {
+        margin-left: 0px;
+    }
+
+    &:hover {
+        background-color: rgb(60, 60, 65);
+    }
+}
+
+.docCreatorMenu-menu-hr{
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+.docCreatorMenu-content {
+    margin: 5px;
+    width: calc(100% - 10px);
+    height: calc(100% - 51px);
+    border: 1px solid whitesmoke;
+    border-radius: 5px;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index d5c2bc227..dbd385047 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1,16 +1,25 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { SnappingManager } from '../../../util/SnappingManager';
 import './DocCreatorMenu.scss';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
+import { IconButton, Size } from 'browndash-components';
+import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
+import { emptyFunction } from '../../../../Utils';
+import { undoable } from '../../../util/UndoManager';
+import { DragManager } from '../../../util/DragManager';
+import { DocumentView } from '../DocumentView';
+import { dropActionType } from '../../../util/DropActionTypes';
 
 @observer
 export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     static Instance: DocCreatorMenu;
 
+    private _ref: HTMLDivElement | null = null;
+
     private _reactionDisposer?: IReactionDisposer;
 
     @observable _pageX: number = 0;
@@ -22,8 +31,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @observable _mouseX: number = -1;
     @observable _mouseY: number = -1;
+    @observable _startPos: {x: number, y: number} | undefined = undefined;
     @observable _shouldDisplay: boolean = false;
 
+    @observable _menuContent: 'templates' | 'options' = 'templates';
+    @observable _dragging: boolean = false;
+
     constructor(props: any) {
         super(props);
         makeObservable(this);
@@ -35,6 +48,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         this._mouseX = e.clientX;
         this._mouseY = e.clientY;
     };
+
     @action
     onPointerUp = (e: PointerEvent) => {
         if (e.button !== 2 && !e.ctrlKey) return;
@@ -43,10 +57,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         if (Math.abs(this._mouseX - curX) > 1 || Math.abs(this._mouseY - curY) > 1) {
             this._shouldDisplay = false;
         }
-
-        if (this._shouldDisplay) {
-            this._display = true;
-        }
     };
 
     componentDidMount() {
@@ -67,18 +77,18 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         return this._pageX + DocCreatorMenu.width > window.innerWidth - DocCreatorMenu.buffer ? window.innerWidth - DocCreatorMenu.buffer - DocCreatorMenu.width : Math.max(0, this._pageX);
     }
 
-    get pageY() {
-        return this._pageY + DocCreatorMenu.height > window.innerHeight - DocCreatorMenu.buffer ? window.innerHeight - DocCreatorMenu.buffer - DocCreatorMenu.height : Math.max(0, this._pageY);
-    }
-
     @action
-    displayMenu = (x: number, y: number) => {
+    toggleDisplay = (x: number, y: number) => {
         // maxX and maxY will change if the UI/font size changes, but will work for any amount
         // of items added to the menu
-
-        this._pageX = x;
-        this._pageY = y;
-        this._shouldDisplay = true;
+        if (this._shouldDisplay) {
+            this._shouldDisplay = false;
+        } else {
+            this._pageX = x;
+            console.log(y);
+            this._pageY = y;
+            this._shouldDisplay = true;
+        }
     };
 
     @action
@@ -89,21 +99,92 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         return wasOpen;
     };
 
+    @action
+    onPointerMove = (e: any) => {
+        if (this._dragging){
+            this._pageX = e.pageX - (this._startPos?.x ?? 0);
+            this._pageY = e.pageY - (this._startPos?.y ?? 0);
+        }
+    }
+
+    setDragStart = () => {
+
+    }
+
     render() {
         return (
             <div
                 className="docCreatorMenu-cont"
+                ref={r => this._ref = r}
                 style={{
                     display: '',
-                    left: this.pageX,
-                    ...(this._yRelativeToTop ? { top: Math.max(0, this.pageY) } : { bottom: this.pageY }),
+                    left: this._pageX,
+                    top: this._pageY,
+                    width: this._shouldDisplay ? 300 : 0,
+                    height: this._shouldDisplay ? 400 : 0,
                     background: SnappingManager.userBackgroundColor,
                     color: SnappingManager.userColor,
                 }}>
             {!this._shouldDisplay ? undefined : 
-            <div>hi hi</div>
-            
-            
+                <>
+                    <div 
+                    className='docCreatorMenu-menu'
+                    onPointerDown={e =>
+                        setupMoveUpEvents(
+                            this,
+                            e,
+                            (e) => {
+                                this._dragging = true;
+                                this._startPos = {x: 0, y: 0};
+                                this._startPos.x = e.pageX - (this._ref?.getBoundingClientRect().left ?? 0);
+                                this._startPos.y = e.pageY - (this._ref?.getBoundingClientRect().top ?? 0);
+                                return true;
+                            },
+                            emptyFunction,
+                            undoable(clickEv => {
+                                clickEv.stopPropagation();
+                            }, 'open actions menu')
+                        )
+                    
+                    }
+                    onPointerMove={e => this.onPointerMove(e)}
+                    onPointerUp={() => this._dragging = false}
+                    >  
+                        <button 
+                            className='docCreatorMenu-menu-button'
+                            onPointerDown={e =>
+                                setupMoveUpEvents(
+                                    this,
+                                    e,
+                                    returnFalse,
+                                    emptyFunction,
+                                    undoable(clickEv => {
+                                        clickEv.stopPropagation();
+                                        runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates');
+                                    }, 'open actions menu')
+                                )
+                            }
+                        >
+                            <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'table-cells' : 'window-maximize'}/>
+                        </button>
+                        <button className='docCreatorMenu-menu-button close-menu'>
+                            <FontAwesomeIcon icon={'minus'}/>
+                        </button>
+                        <button className='docCreatorMenu-menu-button right'>
+                            <FontAwesomeIcon icon={'plus'}/>
+                        </button>
+                    </div>
+                    <hr className='docCreatorMenu-menu-hr'/>
+                    <div className='docCreatorMenu-content'>
+                        {this._menuContent === 'templates' ? 
+                            <div>
+                            </div>
+                            :
+                            <div>
+                            </div>
+                        }
+                    </div>
+                </>
             }
             </div>
             )
-- 
cgit v1.2.3-70-g09d2


From 3db8305f45233850031eaee1f19436ee7034df59 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 10 Jul 2024 03:15:43 -0400
Subject: menu progress

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 14 ++++++-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 46 ++++++++++++++++------
 2 files changed, 46 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 43053ee34..dc0f99cbd 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -46,10 +46,22 @@
     margin-bottom: 0px;
 }
 
-.docCreatorMenu-content {
+.docCreatorMenu-preview-content {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    overflow-y: scroll;
     margin: 5px;
     width: calc(100% - 10px);
     height: calc(100% - 51px);
     border: 1px solid whitesmoke;
     border-radius: 5px;
+
+    .docCreatorMenu-preview-window {
+        width: 125px;
+        height: 125px;
+        margin-top: 10px;
+        margin-left: 10px;
+        border: 1px solid whitesmoke;
+        border-radius: 5px;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index dbd385047..520dd9c2d 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -79,8 +79,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @action
     toggleDisplay = (x: number, y: number) => {
-        // maxX and maxY will change if the UI/font size changes, but will work for any amount
-        // of items added to the menu
         if (this._shouldDisplay) {
             this._shouldDisplay = false;
         } else {
@@ -107,8 +105,24 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
-    setDragStart = () => {
+    get templatesPreviewContents(){
+        const tempArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+        return (
+            <div className='docCreatorMenu-preview-content'>
+                {tempArray.map(i => 
+                    <div
+                        className='docCreatorMenu-preview-window'
+                    >
+                    
+                    </div>)}
+            </div>
+        );
+    }
 
+    get optionsMenuContents(){
+        return (
+            <div></div>
+        );
     }
 
     render() {
@@ -167,7 +181,21 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         >
                             <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'table-cells' : 'window-maximize'}/>
                         </button>
-                        <button className='docCreatorMenu-menu-button close-menu'>
+                        <button 
+                            className='docCreatorMenu-menu-button close-menu'
+                            onPointerDown={e =>
+                                setupMoveUpEvents(
+                                    this,
+                                    e,
+                                    returnFalse,
+                                    emptyFunction,
+                                    undoable(clickEv => {
+                                        clickEv.stopPropagation();
+                                        this.closeMenu();
+                                    }, 'open actions menu')
+                                )
+                            }
+                        >
                             <FontAwesomeIcon icon={'minus'}/>
                         </button>
                         <button className='docCreatorMenu-menu-button right'>
@@ -175,15 +203,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         </button>
                     </div>
                     <hr className='docCreatorMenu-menu-hr'/>
-                    <div className='docCreatorMenu-content'>
-                        {this._menuContent === 'templates' ? 
-                            <div>
-                            </div>
-                            :
-                            <div>
-                            </div>
-                        }
-                    </div>
+                    {this._menuContent === 'templates' ? this.templatesPreviewContents : this.optionsMenuContents}
                 </>
             }
             </div>
-- 
cgit v1.2.3-70-g09d2


From 77bf838bebc813d476788fabed6bc7bcbf8197b0 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 10 Jul 2024 14:36:39 -0400
Subject: images displaying

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 13 ++--
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 54 +++++++++++++--
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 80 +++++++++++++---------
 3 files changed, 107 insertions(+), 40 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 1e0a72a91..f75ba9700 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -429,12 +429,18 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this.layoutDoc.dataViz_filterSelection = !this.layoutDoc.dataViz_filterSelection;
     };
 
+    openDocCreatorMenu = (x: number, y: number) => {
+        DocCreatorMenu.Instance.toggleDisplay(x, y);
+        DocCreatorMenu.Instance.setDataViz(this);
+        DocCreatorMenu.Instance.setTemplateDocs(this.getPossibleTemplates());
+    }
+
     specificContextMenu = (x: number, y: number): void => {
         const cm = ContextMenu.Instance;
         const options = cm.findByDescription('Options...');
         const optionItems = options && 'subitems' in options ? options.subitems : [];
         optionItems.push({ description: `Analyze with AI`, event: () => this.askGPT(), icon: 'lightbulb' });
-        optionItems.push({ description: `Create documents`, event: () => DocCreatorMenu.Instance.toggleDisplay(x, y), icon: 'table-cells' });
+        optionItems.push({ description: `Create documents`, event: () => this.openDocCreatorMenu(x, y), icon: 'table-cells' });
         !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' });
     };
 
@@ -452,13 +458,12 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     getPossibleTemplates = (): Doc[] => {
         const linkedDocs: Doc[] = LinkManager.Instance.getAllRelatedLinks(this.Document).map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)));
         const linkedCollections: Doc[] = linkedDocs.filter(doc => doc.type === 'config').filter(doc => DocCast(doc.annotationOn).type === 'collection');
-        console.log('cols: ' + linkedCollections)
         const isColumnTitle = (title: string): boolean => {
             const colTitles: string[] = Object.keys(this.records[0]);
             console.log('titles: ' + colTitles)
             for (let i = 0; i < colTitles.length; ++i){
                 if (colTitles[i] === title) {
-                    console.log(true);
+                    console.log(true); 
                     return true;
                 }
             }
@@ -472,7 +477,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             }
             return false;
         }
-        return linkedCollections.filter(col => isValidTemplate(col));
+        return linkedDocs;
     }
 
     /**
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index dc0f99cbd..43d4ed7e5 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -23,13 +23,13 @@
     font-size: 14px;
      
     &.right{
-        margin-left: auto;
+        margin-left: 0px;
         font-size: 12px;
     }
 
     &.close-menu {
-        margin-left: 0px;
         font-size: 12px;
+        margin-left: auto;
     }
 
     &.options {
@@ -46,7 +46,7 @@
     margin-bottom: 0px;
 }
 
-.docCreatorMenu-preview-content {
+.docCreatorMenu-preview-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     overflow-y: scroll;
@@ -64,4 +64,50 @@
         border: 1px solid whitesmoke;
         border-radius: 5px;
     }
-}
\ No newline at end of file
+}
+
+.docCreatorMenu-options-container {
+    display: flex;
+    overflow-y: scroll;
+    margin: 5px;
+    width: calc(100% - 10px);
+    height: calc(100% - 51px);
+    border: 1px solid whitesmoke;
+    border-radius: 5px;
+
+    .docCreatorMenu-dropdown-button{
+        display: flex;
+        width: 120px;
+        height: 30px;
+        background: whitesmoke; 
+        background-color: rgb(34, 34, 37);
+        border-radius: 5px;
+        border: 1px solid whitesmoke;
+        padding: 0px;
+        font-size: 13px;
+        margin: 10px;
+        align-content: center;
+        justify-content: center;
+        text-transform: uppercase;
+
+        // &:hover .docCreatorMenu-dropdown-content{
+        //     display: block;
+        // }
+    }
+
+    .docCreatorMenu-dropdown-content {
+        display: none;
+        position: absolute;
+        min-width: 100px;
+        z-index: 1;
+
+        .docCreatorMenu-dropdown-option{
+            display: block;
+        }
+
+    }
+
+
+
+}
+
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 520dd9c2d..1976ecad2 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1,17 +1,18 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, IReactionDisposer, makeObservable, observable, runInAction } from 'mobx';
+import { IReactionDisposer, action, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { SnappingManager } from '../../../util/SnappingManager';
-import './DocCreatorMenu.scss';
-import { ObservableReactComponent } from '../../ObservableReactComponent';
-import { IconButton, Size } from 'browndash-components';
 import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
+import { Doc } from '../../../../fields/Doc';
+import { DocCast, ImageCast } from '../../../../fields/Types';
+import { ImageField } from '../../../../fields/URLField';
 import { emptyFunction } from '../../../../Utils';
+import { SnappingManager } from '../../../util/SnappingManager';
 import { undoable } from '../../../util/UndoManager';
-import { DragManager } from '../../../util/DragManager';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DocumentView } from '../DocumentView';
-import { dropActionType } from '../../../util/DropActionTypes';
+import { DataVizBox } from './DataVizBox';
+import './DocCreatorMenu.scss';
 
 @observer
 export class DocCreatorMenu extends ObservableReactComponent<{}> {
@@ -20,22 +21,21 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     private _ref: HTMLDivElement | null = null;
 
-    private _reactionDisposer?: IReactionDisposer;
+    @observable _templateDocs: Doc[] = [];
+    @observable _icons : (ImageField|undefined)[] = [];
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
     @observable _display: boolean = false;
 
-    @observable _yRelativeToTop: boolean = true;
-    @observable _selectedIndex = -1;
-
     @observable _mouseX: number = -1;
     @observable _mouseY: number = -1;
-    @observable _startPos: {x: number, y: number} | undefined = undefined;
+    @observable _startPos?: {x: number, y: number};
     @observable _shouldDisplay: boolean = false;
 
     @observable _menuContent: 'templates' | 'options' = 'templates';
     @observable _dragging: boolean = false;
+    @observable _dataViz?: DataVizBox;
 
     constructor(props: any) {
         super(props);
@@ -43,6 +43,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         DocCreatorMenu.Instance = this;
     }
 
+    @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz };
+    @action setTemplateDocs = (docs: Doc[]) => {
+         this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc);
+    };
+
     @action
     onPointerDown = (e: PointerEvent) => {
         this._mouseX = e.clientX;
@@ -59,22 +64,19 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     };
 
+    _disposer: IReactionDisposer|undefined;
     componentDidMount() {
         document.addEventListener('pointerdown', this.onPointerDown, true);
         document.addEventListener('pointerup', this.onPointerUp);
+        this._disposer = reaction(() => this._templateDocs.slice(),
+            async(docs) => this._icons =  (await Promise.all(docs.map(doc => this.getIcon(doc))))
+            , {fireImmediately: true});
     }
 
     componentWillUnmount() {
+        this._disposer?.();
         document.removeEventListener('pointerdown', this.onPointerDown, true);
         document.removeEventListener('pointerup', this.onPointerUp);
-        this._reactionDisposer?.();
-    }
-
-    static readonly buffer = 20;
-    static readonly width = 300;
-    static readonly height = 400;
-    get pageX() {
-        return this._pageX + DocCreatorMenu.width > window.innerWidth - DocCreatorMenu.buffer ? window.innerWidth - DocCreatorMenu.buffer - DocCreatorMenu.width : Math.max(0, this._pageX);
     }
 
     @action
@@ -105,23 +107,37 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
+    async getIcon(doc: Doc) {
+        const docView = DocumentView.getDocumentView(doc);
+        if (docView) {
+            docView.ComponentView?.updateIcon?.();
+            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));
+        }
+        return undefined;
+    }
+
     get templatesPreviewContents(){
-        const tempArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
         return (
-            <div className='docCreatorMenu-preview-content'>
-                {tempArray.map(i => 
-                    <div
-                        className='docCreatorMenu-preview-window'
-                    >
-                    
-                    </div>)}
+            <div className='docCreatorMenu-preview-container'>
+                {this._icons.filter(url => url).map(url => 
+                    <div className='docCreatorMenu-preview-window'>
+                        <img src={url!.url.href.replace(".png", "_s.png")} />
+                    </div>)
+                }
             </div>
         );
     }
 
     get optionsMenuContents(){
         return (
-            <div></div>
+            <div className='docCreatorMenu-options-container'>
+                <div className="docCreatorMenu-dropdown-button">Dropdown</div>
+                <div className="docCreatorMenu-dropdown-content">
+                    <div className="docCreatorMenu-dropdown-option">Link 1</div>
+                    <div className="docCreatorMenu-dropdown-option">Link 1</div>
+                    <div className="docCreatorMenu-dropdown-option">Link 1</div>
+                </div>
+            </div>
         );
     }
 
@@ -181,6 +197,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         >
                             <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'table-cells' : 'window-maximize'}/>
                         </button>
+                        <button className='docCreatorMenu-menu-button right'>
+                            <FontAwesomeIcon icon={'plus'}/>
+                        </button>
                         <button 
                             className='docCreatorMenu-menu-button close-menu'
                             onPointerDown={e =>
@@ -198,9 +217,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         >
                             <FontAwesomeIcon icon={'minus'}/>
                         </button>
-                        <button className='docCreatorMenu-menu-button right'>
-                            <FontAwesomeIcon icon={'plus'}/>
-                        </button>
                     </div>
                     <hr className='docCreatorMenu-menu-hr'/>
                     {this._menuContent === 'templates' ? this.templatesPreviewContents : this.optionsMenuContents}
-- 
cgit v1.2.3-70-g09d2


From 6e65af16347169a9932c9e8ba737a2c76e684c5f Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 11 Jul 2024 01:53:02 -0400
Subject: menu

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 33 +++++++++++---
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 53 +++++++++++++++-------
 2 files changed, 63 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 43d4ed7e5..452d9b354 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -49,6 +49,8 @@
 .docCreatorMenu-preview-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 140px;
+    grid-auto-rows: 141px;
     overflow-y: scroll;
     margin: 5px;
     width: calc(100% - 10px);
@@ -57,17 +59,33 @@
     border-radius: 5px;
 
     .docCreatorMenu-preview-window {
+        display: flex;
+        justify-content: center;
+        align-items: center;
         width: 125px;
         height: 125px;
         margin-top: 10px;
         margin-left: 10px;
         border: 1px solid whitesmoke;
         border-radius: 5px;
+        box-shadow: 5px 5px rgb(34, 34, 37);
+
+        &:hover{
+            background-color: rgb(72, 72, 73);
+        }
+
+        .docCreatorMenu-preview-image{ 
+            width: 105px;
+            height: 105px;
+            border-radius: 5px;
+        }
+
     }
 }
 
 .docCreatorMenu-options-container {
     display: flex;
+    justify-content: center;
     overflow-y: scroll;
     margin: 5px;
     width: calc(100% - 10px);
@@ -77,22 +95,23 @@
 
     .docCreatorMenu-dropdown-button{
         display: flex;
-        width: 120px;
-        height: 30px;
+        width: 140px;
+        height: 25px;
         background: whitesmoke; 
         background-color: rgb(34, 34, 37);
         border-radius: 5px;
         border: 1px solid whitesmoke;
         padding: 0px;
-        font-size: 13px;
+        font-size: 12px;
         margin: 10px;
-        align-content: center;
+        align-items: center;
         justify-content: center;
         text-transform: uppercase;
+        cursor: pointer;
 
-        // &:hover .docCreatorMenu-dropdown-content{
-        //     display: block;
-        // }
+        &:hover .docCreatorMenu-dropdown-content{
+            display: block;
+        }
     }
 
     .docCreatorMenu-dropdown-content {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 1976ecad2..7859ec60a 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IReactionDisposer, action, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { IReactionDisposer, ObservableMap, action, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
@@ -13,6 +13,8 @@ import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DocumentView } from '../DocumentView';
 import { DataVizBox } from './DataVizBox';
 import './DocCreatorMenu.scss';
+import { Id } from '../../../../fields/FieldSymbols';
+import { Colors } from 'browndash-components';
 
 @observer
 export class DocCreatorMenu extends ObservableReactComponent<{}> {
@@ -22,7 +24,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     private _ref: HTMLDivElement | null = null;
 
     @observable _templateDocs: Doc[] = [];
-    @observable _icons : (ImageField|undefined)[] = [];
+    @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
+    @observable _selectedTemplateID?: Doc;
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
@@ -64,13 +67,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     };
 
-    _disposer: IReactionDisposer|undefined;
+    _disposer: IReactionDisposer | undefined;
     componentDidMount() {
         document.addEventListener('pointerdown', this.onPointerDown, true);
         document.addEventListener('pointerup', this.onPointerUp);
-        this._disposer = reaction(() => this._templateDocs.slice(),
-            async(docs) => this._icons =  (await Promise.all(docs.map(doc => this.getIcon(doc))))
-            , {fireImmediately: true});
+        this._disposer = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon));
     }
 
     componentWillUnmount() {
@@ -117,13 +118,34 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     }
 
     get templatesPreviewContents(){
+        const renderedTemplates: Doc[] = [];
         return (
             <div className='docCreatorMenu-preview-container'>
-                {this._icons.filter(url => url).map(url => 
-                    <div className='docCreatorMenu-preview-window'>
-                        <img src={url!.url.href.replace(".png", "_s.png")} />
-                    </div>)
-                }
+                {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
+                    if (renderedTemplates.includes(info.doc)) return undefined;
+                    renderedTemplates.push(info.doc);
+                    return (<div 
+                    className='docCreatorMenu-preview-window'
+                    style={{
+                        background: this._selectedTemplateID === info.doc ? Colors.MEDIUM_BLUE : '',
+                        boxShadow: this._selectedTemplateID === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
+                    }}
+                    onPointerDown={e =>
+                        setupMoveUpEvents(
+                            this,
+                            e,
+                            returnFalse,
+                            emptyFunction,
+                            undoable(clickEv => {
+                                clickEv.stopPropagation();
+                                this._selectedTemplateID = info.doc;
+                                this.forceUpdate();
+                            }, 'open actions menu')
+                        )
+                    }>
+                        <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
+                    </div>
+                )})}
             </div>
         );
     }
@@ -131,7 +153,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     get optionsMenuContents(){
         return (
             <div className='docCreatorMenu-options-container'>
-                <div className="docCreatorMenu-dropdown-button">Dropdown</div>
+                <div className="docCreatorMenu-dropdown-button">Choose Layout</div>
                 <div className="docCreatorMenu-dropdown-content">
                     <div className="docCreatorMenu-dropdown-option">Link 1</div>
                     <div className="docCreatorMenu-dropdown-option">Link 1</div>
@@ -173,9 +195,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                             emptyFunction,
                             undoable(clickEv => {
                                 clickEv.stopPropagation();
-                            }, 'open actions menu')
+                            }, 'drag menu')
                         )
-                    
                     }
                     onPointerMove={e => this.onPointerMove(e)}
                     onPointerUp={() => this._dragging = false}
@@ -191,7 +212,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                     undoable(clickEv => {
                                         clickEv.stopPropagation();
                                         runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates');
-                                    }, 'open actions menu')
+                                    }, 'create docs')
                                 )
                             }
                         >
@@ -211,7 +232,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                     undoable(clickEv => {
                                         clickEv.stopPropagation();
                                         this.closeMenu();
-                                    }, 'open actions menu')
+                                    }, 'close menu')
                                 )
                             }
                         >
-- 
cgit v1.2.3-70-g09d2


From 31bfb5e8b5e40322572252e1d823aebe48b27788 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 11 Jul 2024 02:54:35 -0400
Subject: menu

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 86 +++++++++++++++-------
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 43 ++++++++---
 2 files changed, 93 insertions(+), 36 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 452d9b354..ba20c9179 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -85,7 +85,9 @@
 
 .docCreatorMenu-options-container {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
     overflow-y: scroll;
     margin: 5px;
     width: calc(100% - 10px);
@@ -93,40 +95,72 @@
     border: 1px solid whitesmoke;
     border-radius: 5px;
 
-    .docCreatorMenu-dropdown-button{
-        display: flex;
+    .docCreatorMenu-dropdown-hoverable {
         width: 140px;
         height: 25px;
-        background: whitesmoke; 
-        background-color: rgb(34, 34, 37);
-        border-radius: 5px;
-        border: 1px solid whitesmoke;
-        padding: 0px;
-        font-size: 12px;
-        margin: 10px;
-        align-items: center;
-        justify-content: center;
-        text-transform: uppercase;
-        cursor: pointer;
+        margin-bottom: 17px;
+        z-index: 5;
 
-        &:hover .docCreatorMenu-dropdown-content{
+        &:hover .docCreatorMenu-dropdown-content {
             display: block;
         }
-    }
-
-    .docCreatorMenu-dropdown-content {
-        display: none;
-        position: absolute;
-        min-width: 100px;
-        z-index: 1;
 
-        .docCreatorMenu-dropdown-option{
-            display: block;
+        &:hover .docCreatorMenu-dropdown-title {
+            border-bottom-left-radius: 0px;
+            border-bottom-right-radius: 0px;
         }
 
+        .docCreatorMenu-dropdown-title{
+            display: flex;
+            width: 140px;
+            height: 25px;
+            background: whitesmoke; 
+            background-color: rgb(34, 34, 37);
+            border-radius: 5px;
+            border: 1px solid whitesmoke;
+            padding: 0px;
+            font-size: 12px;
+            margin-top: 10px;
+            align-items: center;
+            justify-content: center;
+            text-transform: uppercase;
+            cursor: pointer;
+        }
+    
+        .docCreatorMenu-dropdown-content {
+            display: none;
+            min-width: 100px;
+            height: 75px;
+            overflow-y: scroll;
+            -ms-overflow-style: none; 
+            scrollbar-width: none;
+    
+            .docCreatorMenu-dropdown-option{
+                display: flex;
+                background-color: rgb(42, 42, 46);
+                border-left: 1px solid whitesmoke;
+                border-right: 1px solid whitesmoke;
+                border-bottom: 1px solid whitesmoke;
+                width: 140px;
+                height: 25px;
+                justify-content: center;
+                justify-items: center;
+                padding-top: 3px;
+
+                &:hover {
+                    background-color: rgb(68, 68, 74);
+                    cursor: pointer;
+                }
+            }
+        }    
     }
 
-
-
+    .docCreatorMenu-layout-preview-window {
+        width: 85%;
+        height: 100px;
+        border: 1px solid whitesmoke;
+        border-radius: 5px;
+        background-color: rgb(34, 34, 37);
+    }
 }
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 7859ec60a..356172b6a 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -27,6 +27,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
     @observable _selectedTemplateID?: Doc;
 
+    @observable _selectedLayout?: 'stacked' | 'grid' | 'row' | 'column' | 'custom';
+
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
     @observable _display: boolean = false;
@@ -131,11 +133,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         boxShadow: this._selectedTemplateID === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                     }}
                     onPointerDown={e =>
-                        setupMoveUpEvents(
-                            this,
-                            e,
-                            returnFalse,
-                            emptyFunction,
+                        setupMoveUpEvents(this, e, returnFalse, emptyFunction,
                             undoable(clickEv => {
                                 clickEv.stopPropagation();
                                 this._selectedTemplateID = info.doc;
@@ -151,13 +149,38 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     }
 
     get optionsMenuContents(){
+
+        const layoutOption = (option: 'stacked' | 'grid' | 'row' | 'column' | 'custom') => {
+            return (
+                <div 
+                    className="docCreatorMenu-dropdown-option" 
+                    onPointerDown={e =>
+                        setupMoveUpEvents(this, e, returnFalse, emptyFunction,
+                            undoable(clickEv => {
+                                clickEv.stopPropagation();
+                                runInAction(() => this._selectedLayout = option);
+                            }, 'open actions menu')
+                        )
+                    }>
+                    {option}
+                </div>
+            );
+        }
+
         return (
             <div className='docCreatorMenu-options-container'>
-                <div className="docCreatorMenu-dropdown-button">Choose Layout</div>
-                <div className="docCreatorMenu-dropdown-content">
-                    <div className="docCreatorMenu-dropdown-option">Link 1</div>
-                    <div className="docCreatorMenu-dropdown-option">Link 1</div>
-                    <div className="docCreatorMenu-dropdown-option">Link 1</div>
+                <div className='docCreatorMenu-dropdown-hoverable'>
+                    <div className="docCreatorMenu-dropdown-title">Choose Layout</div>
+                    <div className="docCreatorMenu-dropdown-content">
+                        {layoutOption('stacked')}
+                        {layoutOption('grid')}
+                        {layoutOption('row')}
+                        {layoutOption('column')}
+                        {layoutOption('custom')}
+                    </div>
+                </div>
+                <div className='docCreatorMenu-layout-preview-window'>
+
                 </div>
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From 54fbd0815e93da8aff7a601676a90aa0faf87de8 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 11 Jul 2024 13:19:04 -0400
Subject: collection filtering works

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx      | 5 ++---
 src/client/views/nodes/DataVizBox/DocCreatorMenu.scss | 5 +++--
 src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx  | 7 ++++---
 3 files changed, 9 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index f75ba9700..c43177c51 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -457,10 +457,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     getPossibleTemplates = (): Doc[] => {
         const linkedDocs: Doc[] = LinkManager.Instance.getAllRelatedLinks(this.Document).map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)));
-        const linkedCollections: Doc[] = linkedDocs.filter(doc => doc.type === 'config').filter(doc => DocCast(doc.annotationOn).type === 'collection');
+        const linkedCollections: Doc[] = linkedDocs.filter(doc => doc.type === 'config').filter(doc => DocCast(doc.annotationOn).type === 'collection').map(doc => DocCast(doc.annotationOn));
         const isColumnTitle = (title: string): boolean => {
             const colTitles: string[] = Object.keys(this.records[0]);
-            console.log('titles: ' + colTitles)
             for (let i = 0; i < colTitles.length; ++i){
                 if (colTitles[i] === title) {
                     console.log(true); 
@@ -477,7 +476,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             }
             return false;
         }
-        return linkedDocs;
+        return linkedCollections.filter(col => isValidTemplate(col));
     }
 
     /**
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index ba20c9179..4944f3071 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -66,9 +66,9 @@
         height: 125px;
         margin-top: 10px;
         margin-left: 10px;
-        border: 1px solid whitesmoke;
+        border: 1px solid rgb(163, 163, 163);
         border-radius: 5px;
-        box-shadow: 5px 5px rgb(34, 34, 37);
+        box-shadow: 5px 5px rgb(29, 29, 31);
 
         &:hover{
             background-color: rgb(72, 72, 73);
@@ -134,6 +134,7 @@
             overflow-y: scroll;
             -ms-overflow-style: none; 
             scrollbar-width: none;
+            border-bottom: solid 1px whitesmoke;
     
             .docCreatorMenu-dropdown-option{
                 display: flex;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 356172b6a..3ebf97570 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -150,10 +150,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     get optionsMenuContents(){
 
-        const layoutOption = (option: 'stacked' | 'grid' | 'row' | 'column' | 'custom') => {
+        const layoutOption = (option: 'stacked' | 'grid' | 'row' | 'column' | 'custom', optStyle?: {}) => {
             return (
                 <div 
                     className="docCreatorMenu-dropdown-option" 
+                    style={optStyle}
                     onPointerDown={e =>
                         setupMoveUpEvents(this, e, returnFalse, emptyFunction,
                             undoable(clickEv => {
@@ -176,7 +177,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         {layoutOption('grid')}
                         {layoutOption('row')}
                         {layoutOption('column')}
-                        {layoutOption('custom')}
+                        {layoutOption('custom', {borderBottom: `0px`})}
                     </div>
                 </div>
                 <div className='docCreatorMenu-layout-preview-window'>
@@ -239,7 +240,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 )
                             }
                         >
-                            <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'table-cells' : 'window-maximize'}/>
+                            <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'magnifying-glass'}/>
                         </button>
                         <button className='docCreatorMenu-menu-button right'>
                             <FontAwesomeIcon icon={'plus'}/>
-- 
cgit v1.2.3-70-g09d2


From 1447bae0e24016f0c4fde772235d3e60f2b3555c Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 12 Jul 2024 14:44:48 -0400
Subject: basic doc creation from templates working

---
 .../collections/collectionSchema/SchemaRowBox.tsx  |  3 +-
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 51 +++++++++++++---
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 68 ++++++++++++++++------
 3 files changed, 95 insertions(+), 27 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 2410b2793..72f5d8c25 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -24,6 +24,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { infoState } from '../collectionFreeForm/CollectionFreeFormInfoState';
 import { TbShieldX } from 'react-icons/tb';
+import { DocumentType } from '../../../documents/DocumentTypes';
 
 interface SchemaRowBoxProps extends FieldViewProps {
     rowIndex: number;
@@ -77,7 +78,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
             icon: 'minus',
         });
         const childDocs = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)])
-        if (this.Document.type === 'collection' && childDocs.length) {
+        if (childDocs.length) {
                 ContextMenu.Instance.addItem({
                 description: this.Document._childrenSharedWithSchema ? 'Remove children from schema' : 'Add children to schema',
                 event: () => {
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index c43177c51..86a9db79c 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -5,14 +5,14 @@ import { Colors, Toggle, ToggleType, Type } from 'browndash-components';
 import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { returnEmptyString, returnFalse, returnOne, setupMoveUpEvents } from '../../../../ClientUtils';
+import { ClientUtils, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
-import { Doc, DocListCast, Field, Opt, StrListCast } from '../../../../fields/Doc';
+import { Doc, DocListCast, Field, FieldType, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
 import { InkTool } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
 import { Cast, CsvCast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
 import { CsvField } from '../../../../fields/URLField';
-import { TraceMobx } from '../../../../fields/util';
+import { GetEffectiveAcl, TraceMobx } from '../../../../fields/util';
 import { DocUtils } from '../../../documents/DocUtils';
 import { DocumentType } from '../../../documents/DocumentTypes';
 import { Docs } from '../../../documents/Documents';
@@ -33,8 +33,10 @@ import { LineChart } from './components/LineChart';
 import { PieChart } from './components/PieChart';
 import { TableBox } from './components/TableBox';
 import { LinkManager } from '../../../util/LinkManager';
-import { Collection } from 'mongoose';
-import { DocCreatorMenu } from './DocCreatorMenu';
+import { DataVizTemplateInfo, DocCreatorMenu } from './DocCreatorMenu';
+import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
+import { PrefetchProxy } from '../../../../fields/Proxy';
+import { AclAdmin, AclAugment, AclEdit } from '../../../../fields/DocSymbols';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -149,6 +151,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         // }
         // return func() ?? false;
     };
+
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
         const visibleAnchor = AnchorMenu.Instance.GetAnchor?.(undefined, addAsAnnotation);
         const anchor = !pinProps
@@ -457,7 +460,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     getPossibleTemplates = (): Doc[] => {
         const linkedDocs: Doc[] = LinkManager.Instance.getAllRelatedLinks(this.Document).map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)));
-        const linkedCollections: Doc[] = linkedDocs.filter(doc => doc.type === 'config').filter(doc => DocCast(doc.annotationOn).type === 'collection').map(doc => DocCast(doc.annotationOn));
+        const linkedCollections: Doc[] = linkedDocs.filter(doc => doc.type === 'config').map(doc => DocCast(doc.annotationOn));
         const isColumnTitle = (title: string): boolean => {
             const colTitles: string[] = Object.keys(this.records[0]);
             for (let i = 0; i < colTitles.length; ++i){
@@ -470,7 +473,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
         const isValidTemplate = (collection: Doc) => {
             const childDocs = DocListCast(collection[Doc.LayoutFieldKey(collection)]);
-            console.log('childDocs of col: ' + childDocs)
             for (let i = 0; i < childDocs.length; ++i){
                 if (isColumnTitle(String(childDocs[i].title))) return true;
             }
@@ -479,6 +481,41 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return linkedCollections.filter(col => isValidTemplate(col));
     }
 
+    ApplyTemplateTo = (templateDoc: Doc, target: Doc, targetKey: string, titleTarget: string | undefined) => {
+        if (!Doc.AreProtosEqual(target[targetKey] as Doc, templateDoc)) {
+            if (target.resolvedDataDoc) {
+                target[targetKey] = new PrefetchProxy(templateDoc);
+            } else {
+                titleTarget && (Doc.GetProto(target).title = titleTarget);
+                const setDoc = [AclAdmin, AclEdit, AclAugment].includes(GetEffectiveAcl(Doc.GetProto(target))) ? Doc.GetProto(target) : target;
+                setDoc[targetKey] = new PrefetchProxy(templateDoc);
+            }
+        }
+        return target;
+    }
+
+    @action
+    createDocsFromTemplate = (templateInfo: DataVizTemplateInfo) => {
+        const mainCollection = this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+        const fields: string[] = Array.from(Object.keys(this.records[0])); 
+        const selectedRows = NumListCast(this.layoutDoc.dataViz_selectedRows);
+        const docs: Doc[] = selectedRows.map(row => {
+            const values: String[] = [];
+            fields.forEach(col => values.push(this.records[row][col]));
+
+            const proto = new Doc();
+            proto.author = ClientUtils.CurrentUserEmail();
+            values.forEach((val, i) => {proto[fields[i]] = val as FieldType});
+            
+            const target = Doc.MakeDelegate(proto);
+            const targetKey = StrCast(templateInfo.doc.layout_fieldKey, 'layout');
+            const applied = this.ApplyTemplateTo(templateInfo.doc, target, targetKey, templateInfo.doc.title + `${row}`);
+            target.layout_fieldKey = targetKey;
+            return applied;
+        });
+        docs.forEach(doc => mainCollection.addDocument(doc));
+    }
+
     /**
      * creates a new dataviz document filter from this one
      *      it appears to the right of this document, with the
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 3ebf97570..88308c226 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IReactionDisposer, ObservableMap, action, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
+import { returnAll, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
 import { Doc } from '../../../../fields/Doc';
 import { DocCast, ImageCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
@@ -15,6 +15,15 @@ import { DataVizBox } from './DataVizBox';
 import './DocCreatorMenu.scss';
 import { Id } from '../../../../fields/FieldSymbols';
 import { Colors } from 'browndash-components';
+import { MakeTemplate } from '../../../util/DropConverter';
+
+export enum LayoutType {
+    Stacked = 'stacked', 
+    Grid = 'grid', 
+    Row = 'row', 
+    Column = 'column', 
+    Custom = 'custom'
+}
 
 @observer
 export class DocCreatorMenu extends ObservableReactComponent<{}> {
@@ -25,9 +34,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @observable _templateDocs: Doc[] = [];
     @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
-    @observable _selectedTemplateID?: Doc;
+    @observable _selectedTemplate?: Doc;
 
-    @observable _selectedLayout?: 'stacked' | 'grid' | 'row' | 'column' | 'custom';
+    @observable _selectedLayout?: LayoutType;
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
@@ -49,9 +58,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     }
 
     @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz };
-    @action setTemplateDocs = (docs: Doc[]) => {
-         this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc);
-    };
+    @action setTemplateDocs = (docs: Doc[]) => {this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc)};
+
 
     @action
     onPointerDown = (e: PointerEvent) => {
@@ -126,17 +134,22 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
                     if (renderedTemplates.includes(info.doc)) return undefined;
                     renderedTemplates.push(info.doc);
+                    //let ref: any = undefined;
                     return (<div 
+                    //ref={r => ref = r}
                     className='docCreatorMenu-preview-window'
                     style={{
-                        background: this._selectedTemplateID === info.doc ? Colors.MEDIUM_BLUE : '',
-                        boxShadow: this._selectedTemplateID === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
+                        background: this._selectedTemplate === info.doc ? Colors.MEDIUM_BLUE : '',
+                        boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                     }}
                     onPointerDown={e =>
                         setupMoveUpEvents(this, e, returnFalse, emptyFunction,
                             undoable(clickEv => {
                                 clickEv.stopPropagation();
-                                this._selectedTemplateID = info.doc;
+                                this._selectedTemplate = info.doc;
+                                MakeTemplate(info.doc);
+                                // ref.style.background = Colors.MEDIUM_BLUE;
+                                // ref.style.boxShadow = `0 0 15px rgba(68, 118, 247, .8)`;
                                 this.forceUpdate();
                             }, 'open actions menu')
                         )
@@ -150,7 +163,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     get optionsMenuContents(){
 
-        const layoutOption = (option: 'stacked' | 'grid' | 'row' | 'column' | 'custom', optStyle?: {}) => {
+        const layoutOption = (option: LayoutType, optStyle?: {}) => {
             return (
                 <div 
                     className="docCreatorMenu-dropdown-option" 
@@ -173,11 +186,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 <div className='docCreatorMenu-dropdown-hoverable'>
                     <div className="docCreatorMenu-dropdown-title">Choose Layout</div>
                     <div className="docCreatorMenu-dropdown-content">
-                        {layoutOption('stacked')}
-                        {layoutOption('grid')}
-                        {layoutOption('row')}
-                        {layoutOption('column')}
-                        {layoutOption('custom', {borderBottom: `0px`})}
+                        {layoutOption(LayoutType.Stacked)}
+                        {layoutOption(LayoutType.Grid)}
+                        {layoutOption(LayoutType.Row)}
+                        {layoutOption(LayoutType.Column)}
+                        {layoutOption(LayoutType.Custom, {borderBottom: `0px`})}
                     </div>
                 </div>
                 <div className='docCreatorMenu-layout-preview-window'>
@@ -242,7 +255,22 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         >
                             <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'magnifying-glass'}/>
                         </button>
-                        <button className='docCreatorMenu-menu-button right'>
+                        <button 
+                        className='docCreatorMenu-menu-button right'
+                        onPointerDown={e =>
+                            setupMoveUpEvents(
+                                this,
+                                e,
+                                returnFalse,
+                                emptyFunction,
+                                undoable(clickEv => {
+                                    clickEv.stopPropagation();
+                                    if (!this._selectedTemplate) return;
+                                    const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate};
+                                    this._dataViz?.createDocsFromTemplate(templateInfo);
+                                }, 'make docs')
+                            )
+                        }>
                             <FontAwesomeIcon icon={'plus'}/>
                         </button>
                         <button 
@@ -258,8 +286,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                         this.closeMenu();
                                     }, 'close menu')
                                 )
-                            }
-                        >
+                            }>
                             <FontAwesomeIcon icon={'minus'}/>
                         </button>
                     </div>
@@ -270,6 +297,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             </div>
             )
         }
-    
+}
 
+export interface DataVizTemplateInfo {
+    doc: Doc;
+    layout?: LayoutType;
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From c09ccb23ee490b5c1060f734665fd85668a62659 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 12 Jul 2024 18:25:26 -0400
Subject: repeat option added to menu; css refactoring

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |   5 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 166 ++++++++++++++-------
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      |  72 ++++++---
 3 files changed, 168 insertions(+), 75 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 86a9db79c..283288013 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -496,6 +496,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action
     createDocsFromTemplate = (templateInfo: DataVizTemplateInfo) => {
+        if (!templateInfo.doc) return;
         const mainCollection = this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         const fields: string[] = Array.from(Object.keys(this.records[0])); 
         const selectedRows = NumListCast(this.layoutDoc.dataViz_selectedRows);
@@ -508,8 +509,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             values.forEach((val, i) => {proto[fields[i]] = val as FieldType});
             
             const target = Doc.MakeDelegate(proto);
-            const targetKey = StrCast(templateInfo.doc.layout_fieldKey, 'layout');
-            const applied = this.ApplyTemplateTo(templateInfo.doc, target, targetKey, templateInfo.doc.title + `${row}`);
+            const targetKey = StrCast(templateInfo.doc!.layout_fieldKey, 'layout');
+            const applied = this.ApplyTemplateTo(templateInfo.doc!, target, targetKey, templateInfo.doc!.title + `${row}`);
             target.layout_fieldKey = targetKey;
             return applied;
         });
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 4944f3071..243954873 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -46,6 +46,11 @@
     margin-bottom: 0px;
 }
 
+//------------------------------------------------------------------------------------------------------------------------------------------
+//DocCreatorMenu templates preview CSS
+//--------------------------------------------------------------------------------------------------------------------------------------------
+
+
 .docCreatorMenu-preview-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -83,7 +88,66 @@
     }
 }
 
-.docCreatorMenu-options-container {
+//------------------------------------------------------------------------------------------------------------------------------------------
+//DocCreatorMenu options CSS
+//--------------------------------------------------------------------------------------------------------------------------------------------
+
+.docCreatorMenu-option-container{
+    display: flex;
+    width: 180px;
+    height: 30px;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+
+    &.layout{
+        z-index: 5;
+    }
+}
+
+.docCreatorMenu-option-title{
+    display: flex;
+    width: 140px;
+    height: 30px;
+    background: whitesmoke; 
+    background-color: rgb(34, 34, 37);
+    border-radius: 5px;
+    border: 1px solid whitesmoke;
+    padding: 0px;
+    font-size: 12px;
+    align-items: center;
+    justify-content: center;
+    text-transform: uppercase;
+    cursor: pointer;
+
+    &.repeat {
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+        width: 60px;
+        border-right: 0px;
+    }
+}
+
+.docCreatorMenu-input {
+    display: flex;
+    height: 30px;
+    background-color: rgb(34, 34, 37);
+    border-radius: 5px;
+    border: 1px solid whitesmoke;
+    align-items: center;
+    justify-content: center;
+
+    &.repeat {
+        margin: 0px;
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+        border-left: 0px;
+        width: 40px;
+    }
+}
+
+.docCreatorMenu-menu-container {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -95,73 +159,63 @@
     border: 1px solid whitesmoke;
     border-radius: 5px;
 
-    .docCreatorMenu-dropdown-hoverable {
-        width: 140px;
-        height: 25px;
-        margin-bottom: 17px;
-        z-index: 5;
-
-        &:hover .docCreatorMenu-dropdown-content {
-            display: block;
-        }
+    .docCreatorMenu-option-container{
+        width: 180px;
+        height: 30px;
 
-        &:hover .docCreatorMenu-dropdown-title {
-            border-bottom-left-radius: 0px;
-            border-bottom-right-radius: 0px;
-        }
-
-        .docCreatorMenu-dropdown-title{
-            display: flex;
+        .docCreatorMenu-dropdown-hoverable {
             width: 140px;
-            height: 25px;
-            background: whitesmoke; 
-            background-color: rgb(34, 34, 37);
-            border-radius: 5px;
-            border: 1px solid whitesmoke;
-            padding: 0px;
-            font-size: 12px;
-            margin-top: 10px;
-            align-items: center;
-            justify-content: center;
-            text-transform: uppercase;
-            cursor: pointer;
-        }
+            height: 30px;
     
-        .docCreatorMenu-dropdown-content {
-            display: none;
-            min-width: 100px;
-            height: 75px;
-            overflow-y: scroll;
-            -ms-overflow-style: none; 
-            scrollbar-width: none;
-            border-bottom: solid 1px whitesmoke;
+            &:hover .docCreatorMenu-dropdown-content {
+                display: block;
+            }
     
-            .docCreatorMenu-dropdown-option{
-                display: flex;
-                background-color: rgb(42, 42, 46);
-                border-left: 1px solid whitesmoke;
-                border-right: 1px solid whitesmoke;
-                border-bottom: 1px solid whitesmoke;
-                width: 140px;
-                height: 25px;
-                justify-content: center;
-                justify-items: center;
-                padding-top: 3px;
-
-                &:hover {
-                    background-color: rgb(68, 68, 74);
-                    cursor: pointer;
-                }
+            &:hover .docCreatorMenu-option-title {
+                border-bottom-left-radius: 0px;
+                border-bottom-right-radius: 0px;
             }
-        }    
+        
+            .docCreatorMenu-dropdown-content {
+                display: none;
+                min-width: 100px;
+                height: 75px;
+                overflow-y: scroll;
+                -ms-overflow-style: none; 
+                scrollbar-width: none;
+                border-bottom: solid 1px whitesmoke;
+                border-bottom-left-radius: 5px;
+                border-bottom-right-radius: 5px;
+        
+                .docCreatorMenu-dropdown-option{
+                    display: flex;
+                    background-color: rgb(42, 42, 46);
+                    border-left: 1px solid whitesmoke;
+                    border-right: 1px solid whitesmoke;
+                    border-bottom: 1px solid whitesmoke;
+                    width: 140px;
+                    height: 25px;
+                    justify-content: center;
+                    justify-items: center;
+                    padding-top: 3px;
+    
+                    &:hover {
+                        background-color: rgb(68, 68, 74);
+                        cursor: pointer;
+                    }
+                }
+            }    
+        }
+
     }
 
     .docCreatorMenu-layout-preview-window {
+        aspect-ratio: 1 / 1;
         width: 85%;
-        height: 100px;
         border: 1px solid whitesmoke;
         border-radius: 5px;
         background-color: rgb(34, 34, 37);
+        margin-top: 10px;
     }
 }
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 88308c226..1b4fe0879 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -31,12 +31,14 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     static Instance: DocCreatorMenu;
 
     private _ref: HTMLDivElement | null = null;
+    private _templateInfo: DataVizTemplateInfo = {};
 
     @observable _templateDocs: Doc[] = [];
     @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
-    @observable _selectedTemplate?: Doc;
+    @observable _selectedTemplate: Doc | undefined = undefined;
 
-    @observable _selectedLayout?: LayoutType;
+    @observable _selectedLayout: LayoutType | undefined = undefined;
+    @observable _layoutPreview: boolean = false;
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
@@ -150,7 +152,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 MakeTemplate(info.doc);
                                 // ref.style.background = Colors.MEDIUM_BLUE;
                                 // ref.style.boxShadow = `0 0 15px rgba(68, 118, 247, .8)`;
-                                this.forceUpdate();
                             }, 'open actions menu')
                         )
                     }>
@@ -161,8 +162,15 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         );
     }
 
-    get optionsMenuContents(){
+    get layoutPreviewContents() {
+        return (
+            <div className='docCreatorMenu-layout-preview-window'>
+
+            </div>
+        );
+    }
 
+    get optionsMenuContents(){
         const layoutOption = (option: LayoutType, optStyle?: {}) => {
             return (
                 <div 
@@ -181,20 +189,49 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             );
         }
 
+        const repeatOption = (num: number) => {
+            return (<option 
+            value="Option 1"
+            onPointerDown={e => this._templateInfo.repeat = num}
+            >
+                {`${num}x`}
+            </option>);
+        }
+
+        const repeatOptions = [0, 1, 2, 3, 4, 5];
+
         return (
-            <div className='docCreatorMenu-options-container'>
-                <div className='docCreatorMenu-dropdown-hoverable'>
-                    <div className="docCreatorMenu-dropdown-title">Choose Layout</div>
-                    <div className="docCreatorMenu-dropdown-content">
-                        {layoutOption(LayoutType.Stacked)}
-                        {layoutOption(LayoutType.Grid)}
-                        {layoutOption(LayoutType.Row)}
-                        {layoutOption(LayoutType.Column)}
-                        {layoutOption(LayoutType.Custom, {borderBottom: `0px`})}
+            <div className='docCreatorMenu-menu-container'>
+                <div className='docCreatorMenu-option-container layout'>
+                    <div className='docCreatorMenu-dropdown-hoverable'>
+                        <div className="docCreatorMenu-option-title">{this._selectedLayout ? this._selectedLayout.toUpperCase() : 'Choose Layout'}</div>
+                        <div className="docCreatorMenu-dropdown-content">
+                            {layoutOption(LayoutType.Stacked)}
+                            {layoutOption(LayoutType.Grid)}
+                            {layoutOption(LayoutType.Row)}
+                            {layoutOption(LayoutType.Column)}
+                            {layoutOption(LayoutType.Custom, {borderBottom: `0px`})}
+                        </div>
                     </div>
+                    <button 
+                        className='docCreatorMenu-menu-button'
+                        onPointerDown={e =>
+                            setupMoveUpEvents(this, e, returnFalse, emptyFunction,
+                                undoable(clickEv => {
+                                    clickEv.stopPropagation();
+                                    runInAction(() => this._layoutPreview = !this._layoutPreview);
+                                }, 'open actions menu')
+                            )
+                        }>
+                        <FontAwesomeIcon icon={this._layoutPreview ? 'minus' : 'magnifying-glass'}/>
+                    </button>
                 </div>
-                <div className='docCreatorMenu-layout-preview-window'>
-
+                {this._layoutPreview ? this.layoutPreviewContents : null}
+                <div className='docCreatorMenu-option-container'>
+                    <div className="docCreatorMenu-option-title repeat">Repeat</div>
+                    <select className='docCreatorMenu-input repeat'>
+                        {repeatOptions.map(num => repeatOption(num))}
+                    </select>
                 </div>
             </div>
         );
@@ -253,7 +290,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 )
                             }
                         >
-                            <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'magnifying-glass'}/>
+                            <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'table-cells'}/>
                         </button>
                         <button 
                         className='docCreatorMenu-menu-button right'
@@ -300,6 +337,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 }
 
 export interface DataVizTemplateInfo {
-    doc: Doc;
+    doc?: Doc;
     layout?: LayoutType;
+    repeat?: number;
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 5e619c3f2491ee78297ac00329bb9c0a11132e6e Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sat, 13 Jul 2024 03:15:44 -0400
Subject: layout configuration options added to menu

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 65 ++++++++++++++++++-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 74 +++++++++++++++++-----
 2 files changed, 120 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 243954873..71ad9e105 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -121,11 +121,38 @@
     text-transform: uppercase;
     cursor: pointer;
 
-    &.repeat {
+    &.spacer {
+        border-left: none;
+        border-right: none;
+        border-radius: 0px;
+        width: auto;
+        text-transform: none;
+         
+        &.small {
+            height: 20px;
+            transform: translateY(-5px);
+        }
+    }
+
+    &.config {
         border-top-right-radius: 0px;
         border-bottom-right-radius: 0px;
         width: 60px;
         border-right: 0px;
+
+        &.layout-config {
+            height: 20px;
+            transform: translateY(-5px);
+            text-transform: none;
+            padding-left: 2px;
+        }
+
+        &.dimensions {
+            text-transform: none;
+            height: 20px;
+            transform: translateY(-5px);
+            width: 70px;
+        }
     }
 }
 
@@ -138,12 +165,46 @@
     align-items: center;
     justify-content: center;
 
-    &.repeat {
+    &.config {
         margin: 0px;
         border-top-left-radius: 0px;
         border-bottom-left-radius: 0px;
         border-left: 0px;
         width: 40px;
+
+        &.layout-config {
+            height: 20px;
+            transform: translateY(-5px);
+        }
+
+        &.dimensions {
+            height: 20px;
+            width: 30px;
+            transform: translateY(-5px);
+
+            &.right {
+                border-top-left-radius: 0px;
+                border-bottom-left-radius: 0px;
+            }
+
+            &.left {
+                border-radius: 0px;
+                border-right: 0px;
+            }
+        }
+    }
+}
+
+.docCreatorMenu-configuration-bar {
+    width: 200;
+    gap: 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    &.no-gap {
+        gap: 0px;
     }
 }
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 1b4fe0879..a45234a79 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -136,9 +136,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
                     if (renderedTemplates.includes(info.doc)) return undefined;
                     renderedTemplates.push(info.doc);
-                    //let ref: any = undefined;
                     return (<div 
-                    //ref={r => ref = r}
                     className='docCreatorMenu-preview-window'
                     style={{
                         background: this._selectedTemplate === info.doc ? Colors.MEDIUM_BLUE : '',
@@ -150,8 +148,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 clickEv.stopPropagation();
                                 this._selectedTemplate = info.doc;
                                 MakeTemplate(info.doc);
-                                // ref.style.background = Colors.MEDIUM_BLUE;
-                                // ref.style.boxShadow = `0 0 15px rgba(68, 118, 247, .8)`;
                             }, 'open actions menu')
                         )
                     }>
@@ -162,6 +158,50 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         );
     }
 
+    get layoutConfigOptions() {
+        const optionInput = (title: string) => {
+            return (
+                <div className='docCreatorMenu-option-container'>
+                    <div className='docCreatorMenu-option-title config layout-config'>
+                        {title}
+                    </div>
+                    <input className='docCreatorMenu-input config layout-config'/>
+                </div>
+            );
+        }
+
+        switch (this._selectedLayout) {
+            case LayoutType.Row: case LayoutType.Column:
+                return (
+                    <div className='docCreatorMenu-configuration-bar'>
+                        {optionInput('Y Margin:')}
+                        {optionInput('X Margin:')}
+                    </div>
+                    );
+            case LayoutType.Grid:
+                return (
+                    <>
+                    <div className='docCreatorMenu-configuration-bar'>
+                        {optionInput('Y Margin:')}
+                        {optionInput('X Margin:')}
+                    </div>
+                    <div className='docCreatorMenu-configuration-bar no-gap'>
+                        <div className='docCreatorMenu-option-title config dimensions'>
+                            Dimensions:
+                        </div>
+                        <input className='docCreatorMenu-input config dimensions left'/>
+                        <div className='docCreatorMenu-option-title spacer small'>x</div>
+                        <input className='docCreatorMenu-input config dimensions right'/>
+                    </div>
+                    </>
+                );
+            case LayoutType.Stacked:
+                return null;
+            default:
+                break;
+        }
+    }
+
     get layoutPreviewContents() {
         return (
             <div className='docCreatorMenu-layout-preview-window'>
@@ -189,13 +229,17 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             );
         }
 
-        const repeatOption = (num: number) => {
-            return (<option 
-            value="Option 1"
-            onPointerDown={e => this._templateInfo.repeat = num}
-            >
-                {`${num}x`}
-            </option>);
+        const selectionBox = (width: number, height: number, title: string, specClass?: string, options?: JSX.Element[], manual?: boolean): JSX.Element => {
+            return (<div className='docCreatorMenu-option-container'>
+                <div className={`docCreatorMenu-option-title config ${specClass}`} style={{width: width * .6, height: height}}>
+                    {title}
+                </div>
+                {manual ? <input className={`docCreatorMenu-input config ${specClass}`} style={{width: width * .4, height: height}}/> :
+                <select className={`docCreatorMenu-input config ${specClass}`} style={{width: width * .4, height: height}}>
+                    {options}
+                </select>
+                }
+            </div>);
         }
 
         const repeatOptions = [0, 1, 2, 3, 4, 5];
@@ -226,13 +270,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         <FontAwesomeIcon icon={this._layoutPreview ? 'minus' : 'magnifying-glass'}/>
                     </button>
                 </div>
+                {this._selectedLayout ? this.layoutConfigOptions: null}
                 {this._layoutPreview ? this.layoutPreviewContents : null}
-                <div className='docCreatorMenu-option-container'>
-                    <div className="docCreatorMenu-option-title repeat">Repeat</div>
-                    <select className='docCreatorMenu-input repeat'>
-                        {repeatOptions.map(num => repeatOption(num))}
-                    </select>
-                </div>
+                {selectionBox(100, 30, 'Repeat:', undefined, repeatOptions.map(num => <option onPointerDown={e => this._templateInfo.repeat = num}>{`${num}x`}</option>))}
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From e0dbe3a59d2e1e61fda951c250ef8d43cc0ccd3d Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 15 Jul 2024 01:38:38 -0400
Subject: layout options/preview progress

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  14 ++
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 250 +++++++++++++--------
 2 files changed, 174 insertions(+), 90 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 71ad9e105..e3530c0ef 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -271,12 +271,26 @@
     }
 
     .docCreatorMenu-layout-preview-window {
+        padding: 5px;
+        overflow: scroll;
         aspect-ratio: 1 / 1;
+        display: grid;
         width: 85%;
         border: 1px solid whitesmoke;
         border-radius: 5px;
         background-color: rgb(34, 34, 37);
         margin-top: 10px;
+        -ms-overflow-style: none; 
+        scrollbar-width: none;
+
+        .docCreatorMenu-layout-preview-item {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 3px;
+            border: solid 1px lightblue;
+        }
     }
 }
 
+
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index a45234a79..c8b414c59 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1,9 +1,9 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IReactionDisposer, ObservableMap, action, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnAll, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
-import { Doc } from '../../../../fields/Doc';
+import { Doc, NumListCast } from '../../../../fields/Doc';
 import { DocCast, ImageCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
 import { emptyFunction } from '../../../../Utils';
@@ -16,6 +16,7 @@ import './DocCreatorMenu.scss';
 import { Id } from '../../../../fields/FieldSymbols';
 import { Colors } from 'browndash-components';
 import { MakeTemplate } from '../../../util/DropConverter';
+import { threadId } from 'worker_threads';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -37,7 +38,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
     @observable _selectedTemplate: Doc | undefined = undefined;
 
-    @observable _selectedLayout: LayoutType | undefined = undefined;
+    @observable _layout: {type?: LayoutType, yMargin: number, xMargin: number, rows?:number, columns?: number} = {yMargin: 0, xMargin: 0};
     @observable _layoutPreview: boolean = false;
 
     @observable _pageX: number = 0;
@@ -62,6 +63,35 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz };
     @action setTemplateDocs = (docs: Doc[]) => {this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc)};
 
+    @computed get docsToRender() {
+        return NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows);
+    }
+
+    @computed get rowsCount(){
+        switch (this._layout.type) {
+            case LayoutType.Row: case LayoutType.Stacked: 
+                return 1;
+            case LayoutType.Column:
+                return this.docsToRender.length;
+            case LayoutType.Grid:
+                return this._layout.rows ?? 0;
+            default: 
+                return 0;
+        }
+    }
+
+    @computed get columnsCount(){
+        switch (this._layout.type) {
+            case LayoutType.Row:
+                return this.docsToRender.length;
+            case LayoutType.Column: case LayoutType.Stacked: 
+                return 1;
+            case LayoutType.Grid:
+                return this._layout.columns ?? 0;
+            default:
+                return 0;
+        }
+    }
 
     @action
     onPointerDown = (e: PointerEvent) => {
@@ -158,40 +188,50 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         );
     }
 
+    @action updateXMargin = (input: string) => { this._layout.xMargin = Number(input) };
+    @action updateYMargin = (input: string) => { this._layout.yMargin = Number(input) };
+    @action updateDimensions = (dimension: 'x' | 'y', input: string) => {
+        if (dimension === 'x') {
+            this._layout.rows = Number(input);
+        } else {
+            this._layout.columns = Number(input);
+        }
+    };
+
     get layoutConfigOptions() {
-        const optionInput = (title: string) => {
+        const optionInput = (title: string, func: Function) => {
             return (
                 <div className='docCreatorMenu-option-container'>
                     <div className='docCreatorMenu-option-title config layout-config'>
                         {title}
                     </div>
-                    <input className='docCreatorMenu-input config layout-config'/>
+                    <input onInput={(e) => func(e.currentTarget.value)} className='docCreatorMenu-input config layout-config'/>
                 </div>
             );
         }
 
-        switch (this._selectedLayout) {
+        switch (this._layout.type) {
             case LayoutType.Row: case LayoutType.Column:
                 return (
                     <div className='docCreatorMenu-configuration-bar'>
-                        {optionInput('Y Margin:')}
-                        {optionInput('X Margin:')}
+                        {optionInput('Y Margin:', this.updateYMargin)}
+                        {optionInput('X Margin:', this.updateXMargin)}
                     </div>
                     );
             case LayoutType.Grid:
                 return (
                     <>
                     <div className='docCreatorMenu-configuration-bar'>
-                        {optionInput('Y Margin:')}
-                        {optionInput('X Margin:')}
+                        {optionInput('Y Margin:', this.updateYMargin)}
+                        {optionInput('X Margin:', this.updateXMargin)}
                     </div>
                     <div className='docCreatorMenu-configuration-bar no-gap'>
                         <div className='docCreatorMenu-option-title config dimensions'>
                             Dimensions:
                         </div>
-                        <input className='docCreatorMenu-input config dimensions left'/>
+                        <input className='docCreatorMenu-input config dimensions left' onInput={(e) => {this.updateDimensions('x', e.currentTarget.value); this.forceUpdate()}}/>
                         <div className='docCreatorMenu-option-title spacer small'>x</div>
-                        <input className='docCreatorMenu-input config dimensions right'/>
+                        <input className='docCreatorMenu-input config dimensions right' onInput={(e) => this.updateDimensions('y', e.currentTarget.value)}/>
                     </div>
                     </>
                 );
@@ -203,8 +243,38 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     }
 
     get layoutPreviewContents() {
+        const docWidth = Number(this._selectedTemplate?._width);
+        const docHeight = Number(this._selectedTemplate?._height);
+        const horizontalSpan: number = (docWidth + this._layout.xMargin) * this.columnsCount - this._layout.xMargin;
+        const verticalSpan: number = (docHeight + this._layout.yMargin) * this.rowsCount - this._layout.yMargin;
+        const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan;
+        const scaleDownFactor: number = largerSpan / 235;
+        const scaledWidth = docWidth / scaleDownFactor;
+        const scaledHeight = docHeight / scaleDownFactor;
+
+        console.log(this.rowsCount);
+        console.log(this.columnsCount)
+
         return (
-            <div className='docCreatorMenu-layout-preview-window'>
+            <div 
+            className='docCreatorMenu-layout-preview-window'
+            style={{
+                gridTemplateColumns: `repeat(${this.columnsCount}, ${scaledWidth}px)`,
+                gridTemplateRows: `repeat(${this.rowsCount}, ${scaledHeight}px)`,
+                rowGap: `${this._layout.yMargin}px`,
+                columnGap: `${this._layout.xMargin}px`
+            }}>
+                {this.docsToRender.map(num => 
+                    <div 
+                    className='docCreatorMenu-layout-preview-item'
+                    style={{
+                        width: scaledWidth, 
+                        height: scaledHeight,
+                    }}
+                    >
+                        {num}
+                    </div>
+                )}
 
             </div>
         );
@@ -220,7 +290,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         setupMoveUpEvents(this, e, returnFalse, emptyFunction,
                             undoable(clickEv => {
                                 clickEv.stopPropagation();
-                                runInAction(() => this._selectedLayout = option);
+                                runInAction(() => this._layout.type = option);
                             }, 'open actions menu')
                         )
                     }>
@@ -248,7 +318,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             <div className='docCreatorMenu-menu-container'>
                 <div className='docCreatorMenu-option-container layout'>
                     <div className='docCreatorMenu-dropdown-hoverable'>
-                        <div className="docCreatorMenu-option-title">{this._selectedLayout ? this._selectedLayout.toUpperCase() : 'Choose Layout'}</div>
+                        <div className="docCreatorMenu-option-title">{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}</div>
                         <div className="docCreatorMenu-dropdown-content">
                             {layoutOption(LayoutType.Stacked)}
                             {layoutOption(LayoutType.Grid)}
@@ -270,7 +340,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         <FontAwesomeIcon icon={this._layoutPreview ? 'minus' : 'magnifying-glass'}/>
                     </button>
                 </div>
-                {this._selectedLayout ? this.layoutConfigOptions: null}
+                {this._layout.type ? this.layoutConfigOptions: null}
                 {this._layoutPreview ? this.layoutPreviewContents : null}
                 {selectionBox(100, 30, 'Repeat:', undefined, repeatOptions.map(num => <option onPointerDown={e => this._templateInfo.repeat = num}>{`${num}x`}</option>))}
             </div>
@@ -279,79 +349,61 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     render() {
         return (
-            <div
-                className="docCreatorMenu-cont"
-                ref={r => this._ref = r}
-                style={{
-                    display: '',
-                    left: this._pageX,
-                    top: this._pageY,
-                    width: this._shouldDisplay ? 300 : 0,
-                    height: this._shouldDisplay ? 400 : 0,
-                    background: SnappingManager.userBackgroundColor,
-                    color: SnappingManager.userColor,
-                }}>
-            {!this._shouldDisplay ? undefined : 
-                <>
-                    <div 
-                    className='docCreatorMenu-menu'
-                    onPointerDown={e =>
-                        setupMoveUpEvents(
-                            this,
-                            e,
-                            (e) => {
-                                this._dragging = true;
-                                this._startPos = {x: 0, y: 0};
-                                this._startPos.x = e.pageX - (this._ref?.getBoundingClientRect().left ?? 0);
-                                this._startPos.y = e.pageY - (this._ref?.getBoundingClientRect().top ?? 0);
-                                return true;
-                            },
-                            emptyFunction,
-                            undoable(clickEv => {
-                                clickEv.stopPropagation();
-                            }, 'drag menu')
-                        )
-                    }
-                    onPointerMove={e => this.onPointerMove(e)}
-                    onPointerUp={() => this._dragging = false}
-                    >  
-                        <button 
-                            className='docCreatorMenu-menu-button'
-                            onPointerDown={e =>
-                                setupMoveUpEvents(
-                                    this,
-                                    e,
-                                    returnFalse,
-                                    emptyFunction,
-                                    undoable(clickEv => {
-                                        clickEv.stopPropagation();
-                                        runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates');
-                                    }, 'create docs')
-                                )
-                            }
-                        >
-                            <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'table-cells'}/>
-                        </button>
-                        <button 
-                        className='docCreatorMenu-menu-button right'
+            <div className='docCreatorMenu'>
+                {!this._shouldDisplay ? undefined : 
+                <div
+                    className="docCreatorMenu-cont"
+                    ref={r => this._ref = r}
+                    style={{
+                        display: '',
+                        left: this._pageX,
+                        top: this._pageY,
+                        width: 300,
+                        height: 400,
+                        background: SnappingManager.userBackgroundColor,
+                        color: SnappingManager.userColor,
+                    }}>
+                        <div 
+                        className='docCreatorMenu-menu'
                         onPointerDown={e =>
                             setupMoveUpEvents(
                                 this,
                                 e,
-                                returnFalse,
+                                (e) => {
+                                    this._dragging = true;
+                                    this._startPos = {x: 0, y: 0};
+                                    this._startPos.x = e.pageX - (this._ref?.getBoundingClientRect().left ?? 0);
+                                    this._startPos.y = e.pageY - (this._ref?.getBoundingClientRect().top ?? 0);
+                                    return true;
+                                },
                                 emptyFunction,
                                 undoable(clickEv => {
                                     clickEv.stopPropagation();
-                                    if (!this._selectedTemplate) return;
-                                    const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate};
-                                    this._dataViz?.createDocsFromTemplate(templateInfo);
-                                }, 'make docs')
+                                }, 'drag menu')
                             )
-                        }>
-                            <FontAwesomeIcon icon={'plus'}/>
-                        </button>
-                        <button 
-                            className='docCreatorMenu-menu-button close-menu'
+                        }
+                        onPointerMove={e => this.onPointerMove(e)}
+                        onPointerUp={() => this._dragging = false}
+                        >  
+                            <button 
+                                className='docCreatorMenu-menu-button'
+                                onPointerDown={e =>
+                                    setupMoveUpEvents(
+                                        this,
+                                        e,
+                                        returnFalse,
+                                        emptyFunction,
+                                        undoable(clickEv => {
+                                            clickEv.stopPropagation();
+                                            runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates');
+                                        }, 'create docs')
+                                    )
+                                }
+                            >
+                                <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'table-cells'}/>
+                            </button>
+                            <button 
+                            className='docCreatorMenu-menu-button right'
                             onPointerDown={e =>
                                 setupMoveUpEvents(
                                     this,
@@ -360,17 +412,35 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                     emptyFunction,
                                     undoable(clickEv => {
                                         clickEv.stopPropagation();
-                                        this.closeMenu();
-                                    }, 'close menu')
+                                        if (!this._selectedTemplate) return;
+                                        const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate};
+                                        this._dataViz?.createDocsFromTemplate(templateInfo);
+                                    }, 'make docs')
                                 )
                             }>
-                            <FontAwesomeIcon icon={'minus'}/>
-                        </button>
-                    </div>
-                    <hr className='docCreatorMenu-menu-hr'/>
-                    {this._menuContent === 'templates' ? this.templatesPreviewContents : this.optionsMenuContents}
-                </>
-            }
+                                <FontAwesomeIcon icon={'plus'}/>
+                            </button>
+                            <button 
+                                className='docCreatorMenu-menu-button close-menu'
+                                onPointerDown={e =>
+                                    setupMoveUpEvents(
+                                        this,
+                                        e,
+                                        returnFalse,
+                                        emptyFunction,
+                                        undoable(clickEv => {
+                                            clickEv.stopPropagation();
+                                            this.closeMenu();
+                                        }, 'close menu')
+                                    )
+                                }>
+                                <FontAwesomeIcon icon={'minus'}/>
+                            </button>
+                        </div>
+                        <hr className='docCreatorMenu-menu-hr'/>
+                        {this._menuContent === 'templates' ? this.templatesPreviewContents : this.optionsMenuContents}
+                </div>
+                }
             </div>
             )
         }
-- 
cgit v1.2.3-70-g09d2


From f992fbeed6c523985e5ee6c851217a0dc38358d4 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 15 Jul 2024 19:42:08 -0400
Subject: working on layout preview window

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  7 ++-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 63 +++++++++++-----------
 2 files changed, 33 insertions(+), 37 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index e3530c0ef..bfc1c1216 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -211,7 +211,6 @@
 .docCreatorMenu-menu-container {
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
     align-items: center;
     overflow-y: scroll;
     margin: 5px;
@@ -272,14 +271,14 @@
 
     .docCreatorMenu-layout-preview-window {
         padding: 5px;
+        flex: 0 0 auto;
         overflow: scroll;
-        aspect-ratio: 1 / 1;
         display: grid;
-        width: 85%;
+        width: 240;
+        height: 240;
         border: 1px solid whitesmoke;
         border-radius: 5px;
         background-color: rgb(34, 34, 37);
-        margin-top: 10px;
         -ms-overflow-style: none; 
         scrollbar-width: none;
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index c8b414c59..9da9f5aa8 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -17,6 +17,7 @@ import { Id } from '../../../../fields/FieldSymbols';
 import { Colors } from 'browndash-components';
 import { MakeTemplate } from '../../../util/DropConverter';
 import { threadId } from 'worker_threads';
+import { ideahub } from 'googleapis/build/src/apis/ideahub';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -40,6 +41,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @observable _layout: {type?: LayoutType, yMargin: number, xMargin: number, rows?:number, columns?: number} = {yMargin: 0, xMargin: 0};
     @observable _layoutPreview: boolean = false;
+    @observable _layoutPreviewScale: number = 1;
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
@@ -190,48 +192,42 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @action updateXMargin = (input: string) => { this._layout.xMargin = Number(input) };
     @action updateYMargin = (input: string) => { this._layout.yMargin = Number(input) };
-    @action updateDimensions = (dimension: 'x' | 'y', input: string) => {
-        if (dimension === 'x') {
-            this._layout.rows = Number(input);
-        } else {
-            this._layout.columns = Number(input);
-        }
-    };
+    @action updateColumns = (input: string) => { this._layout.columns = Number(input) };
 
     get layoutConfigOptions() {
-        const optionInput = (title: string, func: Function) => {
+        const optionInput = (title: string, func: Function, def?: number, key?: string) => {
             return (
-                <div className='docCreatorMenu-option-container'>
+                <div className='docCreatorMenu-option-container small' key={key}>
                     <div className='docCreatorMenu-option-title config layout-config'>
                         {title}
                     </div>
-                    <input onInput={(e) => func(e.currentTarget.value)} className='docCreatorMenu-input config layout-config'/>
+                    <input defaultValue={def} onInput={(e) => func(e.currentTarget.value)} className='docCreatorMenu-input config layout-config'/>
                 </div>
             );
         }
 
         switch (this._layout.type) {
-            case LayoutType.Row: case LayoutType.Column:
+            case LayoutType.Row:
+                return (
+                    <div className='docCreatorMenu-configuration-bar'>
+                        {optionInput('Margin:', this.updateXMargin, this._layout.xMargin, '0')}
+                    </div>
+                    );
+            case LayoutType.Column:
                 return (
                     <div className='docCreatorMenu-configuration-bar'>
-                        {optionInput('Y Margin:', this.updateYMargin)}
-                        {optionInput('X Margin:', this.updateXMargin)}
+                        {optionInput('Margin:', this.updateYMargin, this._layout.yMargin, '1')}
                     </div>
                     );
             case LayoutType.Grid:
                 return (
                     <>
                     <div className='docCreatorMenu-configuration-bar'>
-                        {optionInput('Y Margin:', this.updateYMargin)}
-                        {optionInput('X Margin:', this.updateXMargin)}
+                        {optionInput('Y Margin:', this.updateYMargin, this._layout.xMargin, '2')}
+                        {optionInput('X Margin:', this.updateXMargin, this._layout.xMargin, '3')}
                     </div>
                     <div className='docCreatorMenu-configuration-bar no-gap'>
-                        <div className='docCreatorMenu-option-title config dimensions'>
-                            Dimensions:
-                        </div>
-                        <input className='docCreatorMenu-input config dimensions left' onInput={(e) => {this.updateDimensions('x', e.currentTarget.value); this.forceUpdate()}}/>
-                        <div className='docCreatorMenu-option-title spacer small'>x</div>
-                        <input className='docCreatorMenu-input config dimensions right' onInput={(e) => this.updateDimensions('y', e.currentTarget.value)}/>
+                        {optionInput('Columns:', this.updateColumns, this._layout.columns, '3')}
                     </div>
                     </>
                 );
@@ -248,28 +244,29 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         const horizontalSpan: number = (docWidth + this._layout.xMargin) * this.columnsCount - this._layout.xMargin;
         const verticalSpan: number = (docHeight + this._layout.yMargin) * this.rowsCount - this._layout.yMargin;
         const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan;
-        const scaleDownFactor: number = largerSpan / 235;
-        const scaledWidth = docWidth / scaleDownFactor;
-        const scaledHeight = docHeight / scaleDownFactor;
-
-        console.log(this.rowsCount);
-        console.log(this.columnsCount)
+        const scaledDown = (input: number) => {return input / (largerSpan / 225 * this._layoutPreviewScale)}
+        const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3));
 
         return (
             <div 
             className='docCreatorMenu-layout-preview-window'
             style={{
-                gridTemplateColumns: `repeat(${this.columnsCount}, ${scaledWidth}px)`,
-                gridTemplateRows: `repeat(${this.rowsCount}, ${scaledHeight}px)`,
-                rowGap: `${this._layout.yMargin}px`,
-                columnGap: `${this._layout.xMargin}px`
+                gridTemplateColumns: `repeat(${this.columnsCount}, ${scaledDown(docWidth)}px`,
+                gridTemplateRows: `${scaledDown(docHeight)}px`,
+                gridAutoRows: `${scaledDown(docHeight)}px`,
+                rowGap: `${scaledDown(this._layout.yMargin)}px`,
+                columnGap: `${scaledDown(this._layout.xMargin)}px`
             }}>
+                {/* <button>
+
+                </button> */}
                 {this.docsToRender.map(num => 
                     <div 
                     className='docCreatorMenu-layout-preview-item'
                     style={{
-                        width: scaledWidth, 
-                        height: scaledHeight,
+                        width: scaledDown(docWidth), 
+                        height: scaledDown(docHeight),
+                        fontSize: fontSize,
                     }}
                     >
                         {num}
-- 
cgit v1.2.3-70-g09d2


From bcbbfc670b95530b4dd9bd258e726fe75c47cfa8 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 16 Jul 2024 03:17:11 -0400
Subject: refactored click events; zoom in/out option

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  82 ++++++++---
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 150 +++++++++------------
 2 files changed, 125 insertions(+), 107 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index bfc1c1216..a9b4e2501 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -1,3 +1,10 @@
+.no-margin {
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+    margin-left: 0px !important;
+    margin-right: 0px !important;
+}
+
 .docCreatorMenu-cont {
     position: absolute;
     z-index: 100000;
@@ -269,25 +276,64 @@
 
     }
 
-    .docCreatorMenu-layout-preview-window {
-        padding: 5px;
-        flex: 0 0 auto;
-        overflow: scroll;
-        display: grid;
-        width: 240;
-        height: 240;
-        border: 1px solid whitesmoke;
-        border-radius: 5px;
-        background-color: rgb(34, 34, 37);
-        -ms-overflow-style: none; 
-        scrollbar-width: none;
-
-        .docCreatorMenu-layout-preview-item {
-            display: flex;
-            justify-content: center;
-            align-items: center;
+    .docCreatorMenu-layout-preview-window-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 85%;
+        height: auto;
+        position: relative;
+        padding: 0px;
+
+        &:hover .docCreatorMenu-zoom-button {
+            display: block;
+        }
+
+        .docCreatorMenu-layout-preview-window {
+            padding: 5px;
+            flex: 0 0 auto;
+            overflow: scroll;
+            display: grid;
+            width: auto;
+            height: auto;
+            max-width: 240;
+            max-height: 240;
+            border: 1px solid whitesmoke;
+            border-radius: 5px;
+            background-color: rgb(34, 34, 37);
+            -ms-overflow-style: none; 
+            scrollbar-width: none;
+
+            .docCreatorMenu-layout-preview-item {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                border-radius: 3px;
+                border: solid 1px lightblue;
+            }
+        }
+
+        .docCreatorMenu-zoom-button{ 
+            display: none;
+            width: 15px;
+            height: 15px;
+            background: whitesmoke; 
+            background-color: rgb(34, 34, 37);
             border-radius: 3px;
-            border: solid 1px lightblue;
+            border: 1px solid whitesmoke;
+            padding: 0px;
+            font-size: 10px;
+            position: absolute;
+            top: 0px;
+            z-index: 6;
+            margin-left: 0px;
+            margin-top: 0px;
+            margin-right: 225px;
+            margin-bottom: 0px;
+
+            &.zoom-in{
+                top: 15px;
+            }
         }
     }
 }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 9da9f5aa8..bae2d2000 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -39,7 +39,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
     @observable _selectedTemplate: Doc | undefined = undefined;
 
-    @observable _layout: {type?: LayoutType, yMargin: number, xMargin: number, rows?:number, columns?: number} = {yMargin: 0, xMargin: 0};
+    @observable _layout: {type?: LayoutType, yMargin: number, xMargin: number, rows?:number, columns: number} = {yMargin: 0, xMargin: 0, columns: 1};
     @observable _layoutPreview: boolean = false;
     @observable _layoutPreviewScale: number = 1;
 
@@ -76,7 +76,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             case LayoutType.Column:
                 return this.docsToRender.length;
             case LayoutType.Grid:
-                return this._layout.rows ?? 0;
+                return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0;
             default: 
                 return 0;
         }
@@ -95,6 +95,19 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
+    setUpButtonClick = (e: any, func: Function) => {
+        setupMoveUpEvents(
+            this,
+            e,
+            returnFalse,
+            emptyFunction,
+            undoable(clickEv => {
+                clickEv.stopPropagation();
+                func();
+            }, 'create docs')
+        )
+    }
+
     @action
     onPointerDown = (e: PointerEvent) => {
         this._mouseX = e.clientX;
@@ -130,7 +143,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             this._shouldDisplay = false;
         } else {
             this._pageX = x;
-            console.log(y);
             this._pageY = y;
             this._shouldDisplay = true;
         }
@@ -174,15 +186,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         background: this._selectedTemplate === info.doc ? Colors.MEDIUM_BLUE : '',
                         boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                     }}
-                    onPointerDown={e =>
-                        setupMoveUpEvents(this, e, returnFalse, emptyFunction,
-                            undoable(clickEv => {
-                                clickEv.stopPropagation();
-                                this._selectedTemplate = info.doc;
-                                MakeTemplate(info.doc);
-                            }, 'open actions menu')
-                        )
-                    }>
+                    onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {this._selectedTemplate = info.doc; MakeTemplate(info.doc);}))}>
                         <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
                     </div>
                 )})}
@@ -195,9 +199,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @action updateColumns = (input: string) => { this._layout.columns = Number(input) };
 
     get layoutConfigOptions() {
-        const optionInput = (title: string, func: Function, def?: number, key?: string) => {
+        const optionInput = (title: string, func: Function, def?: number, key?: string, noMargin?: boolean) => {
             return (
-                <div className='docCreatorMenu-option-container small' key={key}>
+                <div className='docCreatorMenu-option-container small' key={key} style={{marginTop: noMargin ? '0px' : ''}}
+                >
                     <div className='docCreatorMenu-option-title config layout-config'>
                         {title}
                     </div>
@@ -226,8 +231,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         {optionInput('Y Margin:', this.updateYMargin, this._layout.xMargin, '2')}
                         {optionInput('X Margin:', this.updateXMargin, this._layout.xMargin, '3')}
                     </div>
-                    <div className='docCreatorMenu-configuration-bar no-gap'>
-                        {optionInput('Columns:', this.updateColumns, this._layout.columns, '3')}
+                    <div className='docCreatorMenu-configuration-bar'>
+                        {optionInput('Columns:', this.updateColumns, this._layout.columns, '3', true)}
                     </div>
                     </>
                 );
@@ -248,49 +253,51 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3));
 
         return (
-            <div 
-            className='docCreatorMenu-layout-preview-window'
-            style={{
-                gridTemplateColumns: `repeat(${this.columnsCount}, ${scaledDown(docWidth)}px`,
-                gridTemplateRows: `${scaledDown(docHeight)}px`,
-                gridAutoRows: `${scaledDown(docHeight)}px`,
-                rowGap: `${scaledDown(this._layout.yMargin)}px`,
-                columnGap: `${scaledDown(this._layout.xMargin)}px`
-            }}>
-                {/* <button>
-
-                </button> */}
-                {this.docsToRender.map(num => 
-                    <div 
-                    className='docCreatorMenu-layout-preview-item'
-                    style={{
-                        width: scaledDown(docWidth), 
-                        height: scaledDown(docHeight),
-                        fontSize: fontSize,
-                    }}
-                    >
-                        {num}
-                    </div>
-                )}
+            <div className='docCreatorMenu-layout-preview-window-wrapper'>
+                <button 
+                    className='docCreatorMenu-zoom-button'
+                    onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= 1.25))}>
+                        <FontAwesomeIcon icon={'minus'}/>
+                </button>
+                <button 
+                    className='docCreatorMenu-zoom-button zoom-in'
+                    onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= .75))}>
+                        <FontAwesomeIcon icon={'plus'}/>
+                </button>
+                <div 
+                className='docCreatorMenu-layout-preview-window'
+                style={{
+                    gridTemplateColumns: `repeat(${this.columnsCount}, ${scaledDown(docWidth)}px`,
+                    gridTemplateRows: `${scaledDown(docHeight)}px`,
+                    gridAutoRows: `${scaledDown(docHeight)}px`,
+                    rowGap: `${scaledDown(this._layout.yMargin)}px`,
+                    columnGap: `${scaledDown(this._layout.xMargin)}px`
+                }}>
+                    {this.docsToRender.map(num => 
+                        <div 
+                        className='docCreatorMenu-layout-preview-item'
+                        style={{
+                            width: scaledDown(docWidth), 
+                            height: scaledDown(docHeight),
+                            fontSize: fontSize,
+                        }}
+                        >
+                            {num}
+                        </div>
+                    )}
 
+                </div>
             </div>
         );
     }
 
     get optionsMenuContents(){
-        const layoutOption = (option: LayoutType, optStyle?: {}) => {
+        const layoutOption = (option: LayoutType, optStyle?: {}, specialFunc?: Function) => {
             return (
                 <div 
                     className="docCreatorMenu-dropdown-option" 
                     style={optStyle}
-                    onPointerDown={e =>
-                        setupMoveUpEvents(this, e, returnFalse, emptyFunction,
-                            undoable(clickEv => {
-                                clickEv.stopPropagation();
-                                runInAction(() => this._layout.type = option);
-                            }, 'open actions menu')
-                        )
-                    }>
+                    onPointerDown={e => this.setUpButtonClick(e, () => {specialFunc?.(); runInAction(() => this._layout.type = option)})}>
                     {option}
                 </div>
             );
@@ -318,7 +325,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         <div className="docCreatorMenu-option-title">{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}</div>
                         <div className="docCreatorMenu-dropdown-content">
                             {layoutOption(LayoutType.Stacked)}
-                            {layoutOption(LayoutType.Grid)}
+                            {layoutOption(LayoutType.Grid, undefined, () => {this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length))})}
                             {layoutOption(LayoutType.Row)}
                             {layoutOption(LayoutType.Column)}
                             {layoutOption(LayoutType.Custom, {borderBottom: `0px`})}
@@ -326,14 +333,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                     </div>
                     <button 
                         className='docCreatorMenu-menu-button'
-                        onPointerDown={e =>
-                            setupMoveUpEvents(this, e, returnFalse, emptyFunction,
-                                undoable(clickEv => {
-                                    clickEv.stopPropagation();
-                                    runInAction(() => this._layoutPreview = !this._layoutPreview);
-                                }, 'open actions menu')
-                            )
-                        }>
+                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreview = !this._layoutPreview))}>
                         <FontAwesomeIcon icon={this._layoutPreview ? 'minus' : 'magnifying-glass'}/>
                     </button>
                 </div>
@@ -384,29 +384,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         >  
                             <button 
                                 className='docCreatorMenu-menu-button'
-                                onPointerDown={e =>
-                                    setupMoveUpEvents(
-                                        this,
-                                        e,
-                                        returnFalse,
-                                        emptyFunction,
-                                        undoable(clickEv => {
-                                            clickEv.stopPropagation();
-                                            runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates');
-                                        }, 'create docs')
-                                    )
-                                }
-                            >
+                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates'))}>
                                 <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'table-cells'}/>
                             </button>
                             <button 
                             className='docCreatorMenu-menu-button right'
-                            onPointerDown={e =>
-                                setupMoveUpEvents(
-                                    this,
-                                    e,
-                                    returnFalse,
-                                    emptyFunction,
+                            onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction,
                                     undoable(clickEv => {
                                         clickEv.stopPropagation();
                                         if (!this._selectedTemplate) return;
@@ -419,18 +402,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                             </button>
                             <button 
                                 className='docCreatorMenu-menu-button close-menu'
-                                onPointerDown={e =>
-                                    setupMoveUpEvents(
-                                        this,
-                                        e,
-                                        returnFalse,
-                                        emptyFunction,
-                                        undoable(clickEv => {
-                                            clickEv.stopPropagation();
-                                            this.closeMenu();
-                                        }, 'close menu')
-                                    )
-                                }>
+                                onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
                                 <FontAwesomeIcon icon={'minus'}/>
                             </button>
                         </div>
-- 
cgit v1.2.3-70-g09d2


From dcbc6f5657109b19b623f946a1e86e1940a5c60c Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 16 Jul 2024 14:10:05 -0400
Subject: work on menu (mostly UI improvements)

---
 src/client/views/MainView.tsx                      |  3 +
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 37 +++++++-----
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 68 +++++++++++++---------
 3 files changed, 68 insertions(+), 40 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 926e5fd55..d337aae68 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -279,6 +279,9 @@ export class MainView extends ObservableReactComponent<{}> {
 
         library.add(
             ...[
+                fa.faRepeat,
+                fa.faArrowsUpDown,
+                fa.faArrowsLeftRight,
                 fa.faWindowMaximize,
                 fa.faGift,
                 fa.faLockOpen,
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index a9b4e2501..d2f8f13d1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -25,9 +25,14 @@
     background: whitesmoke; 
     background-color: rgb(34, 34, 37);
     border-radius: 5px;
-    border: 1px solid whitesmoke;
+    border: 1px solid rgb(180, 180, 180);
     padding: 0px;
     font-size: 14px;
+    //box-shadow: 3px 3px rgb(29, 29, 31);
+
+    &:hover {
+        box-shadow: none;
+    }
      
     &.right{
         margin-left: 0px;
@@ -51,6 +56,7 @@
 .docCreatorMenu-menu-hr{
     margin-top: 0px;
     margin-bottom: 0px;
+    color: rgb(180, 180, 180);
 }
 
 //------------------------------------------------------------------------------------------------------------------------------------------
@@ -67,7 +73,7 @@
     margin: 5px;
     width: calc(100% - 10px);
     height: calc(100% - 51px);
-    border: 1px solid whitesmoke;
+    border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
 
     .docCreatorMenu-preview-window {
@@ -107,6 +113,7 @@
     justify-content: center;
     align-items: center;
     margin-top: 10px;
+    margin-bottom: 10px;
 
     &.layout{
         z-index: 5;
@@ -120,7 +127,7 @@
     background: whitesmoke; 
     background-color: rgb(34, 34, 37);
     border-radius: 5px;
-    border: 1px solid whitesmoke;
+    border: 1px solid rgb(180, 180, 180);
     padding: 0px;
     font-size: 12px;
     align-items: center;
@@ -142,10 +149,12 @@
     }
 
     &.config {
+        border-radius: 4px;
         border-top-right-radius: 0px;
         border-bottom-right-radius: 0px;
-        width: 60px;
+        width: 30px;
         border-right: 0px;
+        gap: 3px;
 
         &.layout-config {
             height: 20px;
@@ -167,17 +176,17 @@
     display: flex;
     height: 30px;
     background-color: rgb(34, 34, 37);
-    border-radius: 5px;
-    border: 1px solid whitesmoke;
+    border: 1px solid rgb(180, 180, 180);
     align-items: center;
     justify-content: center;
 
     &.config {
+        border-radius: 4px;
         margin: 0px;
         border-top-left-radius: 0px;
         border-bottom-left-radius: 0px;
         border-left: 0px;
-        width: 40px;
+        width: 25px;
 
         &.layout-config {
             height: 20px;
@@ -223,7 +232,7 @@
     margin: 5px;
     width: calc(100% - 10px);
     height: calc(100% - 51px);
-    border: 1px solid whitesmoke;
+    border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
 
     .docCreatorMenu-option-container{
@@ -250,16 +259,16 @@
                 overflow-y: scroll;
                 -ms-overflow-style: none; 
                 scrollbar-width: none;
-                border-bottom: solid 1px whitesmoke;
+                border-bottom: 1px solid rgb(180, 180, 180);
                 border-bottom-left-radius: 5px;
                 border-bottom-right-radius: 5px;
         
                 .docCreatorMenu-dropdown-option{
                     display: flex;
                     background-color: rgb(42, 42, 46);
-                    border-left: 1px solid whitesmoke;
-                    border-right: 1px solid whitesmoke;
-                    border-bottom: 1px solid whitesmoke;
+                    border-left: 1px solid rgb(180, 180, 180);
+                    border-right: 1px solid rgb(180, 180, 180);
+                    border-bottom: 1px solid rgb(180, 180, 180);
                     width: 140px;
                     height: 25px;
                     justify-content: center;
@@ -298,7 +307,7 @@
             height: auto;
             max-width: 240;
             max-height: 240;
-            border: 1px solid whitesmoke;
+            border: 1px solid rgb(180, 180, 180);
             border-radius: 5px;
             background-color: rgb(34, 34, 37);
             -ms-overflow-style: none; 
@@ -320,7 +329,7 @@
             background: whitesmoke; 
             background-color: rgb(34, 34, 37);
             border-radius: 3px;
-            border: 1px solid whitesmoke;
+            border: 1px solid rgb(180, 180, 180);
             padding: 0px;
             font-size: 10px;
             position: absolute;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index bae2d2000..3eda2c891 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -14,7 +14,7 @@ import { DocumentView } from '../DocumentView';
 import { DataVizBox } from './DataVizBox';
 import './DocCreatorMenu.scss';
 import { Id } from '../../../../fields/FieldSymbols';
-import { Colors } from 'browndash-components';
+import { Colors, IconButton, Size } from 'browndash-components';
 import { MakeTemplate } from '../../../util/DropConverter';
 import { threadId } from 'worker_threads';
 import { ideahub } from 'googleapis/build/src/apis/ideahub';
@@ -39,8 +39,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
     @observable _selectedTemplate: Doc | undefined = undefined;
 
-    @observable _layout: {type?: LayoutType, yMargin: number, xMargin: number, rows?:number, columns: number} = {yMargin: 0, xMargin: 0, columns: 1};
-    @observable _layoutPreview: boolean = false;
+    @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, columns: 1};
+    @observable _layoutPreview: boolean = true;
     @observable _layoutPreviewScale: number = 1;
 
     @observable _pageX: number = 0;
@@ -173,6 +173,16 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         return undefined;
     }
 
+    @action updateSelectedTemplate = (template: Doc) => {
+        if (this._selectedTemplate === template) {
+            this._selectedTemplate = undefined;
+            return;
+        } else {
+            this._selectedTemplate = template;
+            MakeTemplate(template);
+        }
+    }
+
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
         return (
@@ -186,7 +196,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         background: this._selectedTemplate === info.doc ? Colors.MEDIUM_BLUE : '',
                         boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                     }}
-                    onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {this._selectedTemplate = info.doc; MakeTemplate(info.doc);}))}>
+                    onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
                         <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
                     </div>
                 )})}
@@ -199,12 +209,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @action updateColumns = (input: string) => { this._layout.columns = Number(input) };
 
     get layoutConfigOptions() {
-        const optionInput = (title: string, func: Function, def?: number, key?: string, noMargin?: boolean) => {
+        const optionInput = (icon: string, func: Function, def?: number, key?: string, noMargin?: boolean) => {
             return (
-                <div className='docCreatorMenu-option-container small' key={key} style={{marginTop: noMargin ? '0px' : ''}}
+                <div className='docCreatorMenu-option-container small no-margin' key={key} style={{marginTop: noMargin ? '0px' : ''}}
                 >
                     <div className='docCreatorMenu-option-title config layout-config'>
-                        {title}
+                        <FontAwesomeIcon icon={icon as any}/>
                     </div>
                     <input defaultValue={def} onInput={(e) => func(e.currentTarget.value)} className='docCreatorMenu-input config layout-config'/>
                 </div>
@@ -215,26 +225,22 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             case LayoutType.Row:
                 return (
                     <div className='docCreatorMenu-configuration-bar'>
-                        {optionInput('Margin:', this.updateXMargin, this._layout.xMargin, '0')}
+                        {optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '0')}
                     </div>
                     );
             case LayoutType.Column:
                 return (
                     <div className='docCreatorMenu-configuration-bar'>
-                        {optionInput('Margin:', this.updateYMargin, this._layout.yMargin, '1')}
+                        {optionInput('arrows-up-down', this.updateYMargin, this._layout.yMargin, '1')}
                     </div>
                     );
             case LayoutType.Grid:
                 return (
-                    <>
                     <div className='docCreatorMenu-configuration-bar'>
-                        {optionInput('Y Margin:', this.updateYMargin, this._layout.xMargin, '2')}
-                        {optionInput('X Margin:', this.updateXMargin, this._layout.xMargin, '3')}
+                        {optionInput('arrows-up-down', this.updateYMargin, this._layout.xMargin, '2')}
+                        {optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '3')}
+                        {optionInput('table-columns', this.updateColumns, this._layout.columns, '4', true)}
                     </div>
-                    <div className='docCreatorMenu-configuration-bar'>
-                        {optionInput('Columns:', this.updateColumns, this._layout.columns, '3', true)}
-                    </div>
-                    </>
                 );
             case LayoutType.Stacked:
                 return null;
@@ -273,7 +279,18 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                     rowGap: `${scaledDown(this._layout.yMargin)}px`,
                     columnGap: `${scaledDown(this._layout.xMargin)}px`
                 }}>
-                    {this.docsToRender.map(num => 
+                    {this._layout.type === LayoutType.Stacked ? 
+                    <div 
+                    className='docCreatorMenu-layout-preview-item'
+                    style={{
+                        width: scaledDown(docWidth), 
+                        height: scaledDown(docHeight),
+                        fontSize: fontSize,
+                    }}
+                    >
+                        All
+                    </div> : 
+                    this.docsToRender.map(num => 
                         <div 
                         className='docCreatorMenu-layout-preview-item'
                         style={{
@@ -303,13 +320,13 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             );
         }
 
-        const selectionBox = (width: number, height: number, title: string, specClass?: string, options?: JSX.Element[], manual?: boolean): JSX.Element => {
+        const selectionBox = (width: number, height: number, icon: string, specClass?: string, options?: JSX.Element[], manual?: boolean): JSX.Element => {
             return (<div className='docCreatorMenu-option-container'>
-                <div className={`docCreatorMenu-option-title config ${specClass}`} style={{width: width * .6, height: height}}>
-                    {title}
+                <div className={`docCreatorMenu-option-title config ${specClass}`} style={{width: width * .4, height: height}}>
+                    <FontAwesomeIcon icon={icon as any}/>
                 </div>
-                {manual ? <input className={`docCreatorMenu-input config ${specClass}`} style={{width: width * .4, height: height}}/> :
-                <select className={`docCreatorMenu-input config ${specClass}`} style={{width: width * .4, height: height}}>
+                {manual ? <input className={`docCreatorMenu-input config ${specClass}`} style={{width: width * .6, height: height}}/> :
+                <select className={`docCreatorMenu-input config ${specClass}`} style={{width: width * .6, height: height}}>
                     {options}
                 </select>
                 }
@@ -339,7 +356,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 </div>
                 {this._layout.type ? this.layoutConfigOptions: null}
                 {this._layoutPreview ? this.layoutPreviewContents : null}
-                {selectionBox(100, 30, 'Repeat:', undefined, repeatOptions.map(num => <option onPointerDown={e => this._templateInfo.repeat = num}>{`${num}x`}</option>))}
+                {selectionBox(60, 20, 'repeat', undefined, repeatOptions.map(num => <option onPointerDown={e => this._templateInfo.repeat = num}>{`${num}x`}</option>))}
             </div>
         );
     }
@@ -381,7 +398,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         }
                         onPointerMove={e => this.onPointerMove(e)}
                         onPointerUp={() => this._dragging = false}
-                        >  
+                        >
                             <button 
                                 className='docCreatorMenu-menu-button'
                                 onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates'))}>
@@ -406,7 +423,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 <FontAwesomeIcon icon={'minus'}/>
                             </button>
                         </div>
-                        <hr className='docCreatorMenu-menu-hr'/>
                         {this._menuContent === 'templates' ? this.templatesPreviewContents : this.optionsMenuContents}
                 </div>
                 }
@@ -417,6 +433,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
 export interface DataVizTemplateInfo {
     doc?: Doc;
-    layout?: LayoutType;
+    layout?: {};
     repeat?: number;
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 58d3eeb6e45555e5eeaf172f571b500ca3b564c0 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 17 Jul 2024 00:54:22 -0400
Subject: creation with layout works

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 38 ++++++++++++++++-
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 10 +++++
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 48 ++++++++++++++++++----
 3 files changed, 88 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 283288013..e03da8e7b 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -33,10 +33,11 @@ import { LineChart } from './components/LineChart';
 import { PieChart } from './components/PieChart';
 import { TableBox } from './components/TableBox';
 import { LinkManager } from '../../../util/LinkManager';
-import { DataVizTemplateInfo, DocCreatorMenu } from './DocCreatorMenu';
+import { DataVizTemplateInfo, DocCreatorMenu, LayoutType } from './DocCreatorMenu';
 import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
 import { PrefetchProxy } from '../../../../fields/Proxy';
 import { AclAdmin, AclAugment, AclEdit } from '../../../../fields/DocSymbols';
+import { template } from 'lodash';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -494,6 +495,38 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return target;
     }
 
+    applyLayout = (templateInfo: DataVizTemplateInfo, docs: Doc[]) => {
+        if (templateInfo.layout.type === LayoutType.Stacked) return;
+        const columns: number = templateInfo.columns;
+        const xGap: number = templateInfo.layout.xMargin;
+        const yGap: number = templateInfo.layout.yMargin;
+        const repeat: number = templateInfo.layout.repeat;
+        const startX: number = templateInfo.referencePos.x;
+        const startY: number = templateInfo.referencePos.y;
+        const templWidth = Number(templateInfo.doc._width);
+        const templHeight = Number(templateInfo.doc._height);
+
+        let i: number = 0;
+        let docsChanged: number = 0;
+        let curX: number = startX;
+        let curY: number = startY;
+
+        while (docsChanged < docs.length){
+            while (i < columns && docsChanged < docs.length){ 
+                docs[docsChanged].x = curX;
+                docs[docsChanged].y = curY;
+                console.log('x: ' + docs[i].x + ' y: ' + docs[i].y);
+                curX += templWidth + xGap;
+                ++docsChanged;
+                ++i;
+            }
+
+            i = 0;
+            curX = startX;
+            curY += templHeight + yGap;
+        }
+    }
+
     @action
     createDocsFromTemplate = (templateInfo: DataVizTemplateInfo) => {
         if (!templateInfo.doc) return;
@@ -514,7 +547,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             target.layout_fieldKey = targetKey;
             return applied;
         });
+
         docs.forEach(doc => mainCollection.addDocument(doc));
+
+        this.applyLayout(templateInfo, docs);
     }
 
     /**
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index d2f8f13d1..8b17f1ed4 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -59,6 +59,16 @@
     color: rgb(180, 180, 180);
 }
 
+
+.docCreatorMenu-placement-indicator {
+    position: absolute;
+    z-index: 100000;
+    border-left: solid 3px #9fd7fb;
+    border-top: solid 3px #9fd7fb;
+    width: 25px;
+    height: 25px;
+}
+
 //------------------------------------------------------------------------------------------------------------------------------------------
 //DocCreatorMenu templates preview CSS
 //--------------------------------------------------------------------------------------------------------------------------------------------
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 3eda2c891..b1488679f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -33,18 +33,19 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     static Instance: DocCreatorMenu;
 
     private _ref: HTMLDivElement | null = null;
-    private _templateInfo: DataVizTemplateInfo = {};
 
     @observable _templateDocs: Doc[] = [];
     @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
     @observable _selectedTemplate: Doc | undefined = undefined;
 
-    @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, columns: 1};
+    @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, columns: 1, repeat: 0};
     @observable _layoutPreview: boolean = true;
     @observable _layoutPreviewScale: number = 1;
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
+    @observable _indicatorX: number | undefined = undefined;
+    @observable _indicatorY: number | undefined = undefined;
     @observable _display: boolean = false;
 
     @observable _mouseX: number = -1;
@@ -54,6 +55,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @observable _menuContent: 'templates' | 'options' = 'templates';
     @observable _dragging: boolean = false;
+    @observable _draggingIndicator: boolean = false;
     @observable _dataViz?: DataVizBox;
 
     constructor(props: any) {
@@ -158,6 +160,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @action
     onPointerMove = (e: any) => {
+        // if (this._draggingIndicator) {
+        //     this._indicatorX = e.pageX - (this._startPos?.x ?? 0) + this._pageX;
+        //     this._indicatorY = e.pageY - (this._startPos?.y ?? 0) + this._pageY;
+        // } else 
         if (this._dragging){
             this._pageX = e.pageX - (this._startPos?.x ?? 0);
             this._pageY = e.pageY - (this._startPos?.y ?? 0);
@@ -356,7 +362,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 </div>
                 {this._layout.type ? this.layoutConfigOptions: null}
                 {this._layoutPreview ? this.layoutPreviewContents : null}
-                {selectionBox(60, 20, 'repeat', undefined, repeatOptions.map(num => <option onPointerDown={e => this._templateInfo.repeat = num}>{`${num}x`}</option>))}
+                {selectionBox(60, 20, 'repeat', undefined, repeatOptions.map(num => <option onPointerDown={e => this._layout.repeat = num}>{`${num}x`}</option>))}
             </div>
         );
     }
@@ -365,6 +371,31 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         return (
             <div className='docCreatorMenu'>
                 {!this._shouldDisplay ? undefined : 
+                <>
+                {/* <div className='docCreatorMenu-placement-indicator' 
+                style={{
+                    display: '',
+                    left: this._indicatorX ?? this._pageX + 300,
+                    top: this._indicatorY ?? this._pageY,
+                }}
+                onPointerMove={e => this.onPointerMove(e)}
+                onPointerDown={e =>
+                    setupMoveUpEvents(
+                        this,
+                        e,
+                        (e) => {
+                            this._draggingIndicator = true;
+                            this._startPos = {x: 0, y: 0};
+                            this._startPos.x = e.pageX - (this._ref?.getBoundingClientRect().left ?? 0);
+                            this._startPos.y = e.pageY - (this._ref?.getBoundingClientRect().top ?? 0);
+                            return true;
+                        },
+                        emptyFunction,
+                        undoable(clickEv => {
+                            clickEv.stopPropagation();
+                        }, 'drag menu')
+                    )
+                }/> */}
                 <div
                     className="docCreatorMenu-cont"
                     ref={r => this._ref = r}
@@ -410,7 +441,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                     undoable(clickEv => {
                                         clickEv.stopPropagation();
                                         if (!this._selectedTemplate) return;
-                                        const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate};
+                                        const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate, layout: this._layout, referencePos: {x: this._pageX + 450, y: this._pageY}, columns: this.columnsCount};
+                                        
                                         this._dataViz?.createDocsFromTemplate(templateInfo);
                                     }, 'make docs')
                                 )
@@ -425,6 +457,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         </div>
                         {this._menuContent === 'templates' ? this.templatesPreviewContents : this.optionsMenuContents}
                 </div>
+                </>
                 }
             </div>
             )
@@ -432,7 +465,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 }
 
 export interface DataVizTemplateInfo {
-    doc?: Doc;
-    layout?: {};
-    repeat?: number;
+    doc: Doc;
+    layout: {type: LayoutType, xMargin: number, yMargin: number, repeat: number};
+    columns: number;
+    referencePos: {x: number, y: number};
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From ded7673796965e9cb9239cfd483a2f1e35abd38b Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 17 Jul 2024 18:28:05 -0400
Subject: highlighting rows based on layoutpreview hover

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx     | 20 ++++++++++++++++++--
 .../views/nodes/DataVizBox/DocCreatorMenu.scss       | 11 +++++++++--
 src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 18 +++++++++++++-----
 .../views/nodes/DataVizBox/components/TableBox.tsx   |  6 ++++--
 src/client/views/nodes/ImageBox.tsx                  |  2 +-
 5 files changed, 45 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index e03da8e7b..765642891 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -38,6 +38,7 @@ import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
 import { PrefetchProxy } from '../../../../fields/Proxy';
 import { AclAdmin, AclAugment, AclEdit } from '../../../../fields/DocSymbols';
 import { template } from 'lodash';
+import { data } from 'jquery';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -57,6 +58,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     crop: ((region: Doc | undefined, addCrop?: boolean) => Doc | undefined) | undefined;
     @observable _marqueeing: number[] | undefined = undefined;
     @observable _savedAnnotations = new ObservableMap<number, HTMLDivElement[]>();
+    @observable _specialHighlightedRow: number | undefined = undefined;
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -131,6 +133,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this.layoutDoc._dataViz_titleCol = titleCol;
     };
 
+    @action setSpecialHighlightedRow = (row: number | undefined) => {
+        this._specialHighlightedRow = row;
+    }
+
     @action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
     restoreView = (data: Doc) => {
         // const changedView = data.config_dataViz && this.dataVizView !== data.config_dataViz && (this.layoutDoc._dataViz = data.config_dataViz);
@@ -366,7 +372,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         };
         if (!this.records.length) return 'no data/visualization';
         switch (this.dataVizView) {
-            case DataVizView.TABLE:     return <TableBox  {...sharedProps} docView={this.DocumentView} selectAxes={this.selectAxes} selectTitleCol={this.selectTitleCol}/>;
+            case DataVizView.TABLE:     return <TableBox  {...sharedProps} specHighlightedRow={this._specialHighlightedRow} docView={this.DocumentView} selectAxes={this.selectAxes} selectTitleCol={this.selectTitleCol}/>;
             case DataVizView.LINECHART: return <LineChart {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => {this._vizRenderer = r ?? undefined;}} vizBox={this} />;
             case DataVizView.HISTOGRAM: return <Histogram {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => {this._vizRenderer = r ?? undefined;}} />;
             case DataVizView.PIECHART:  return <PieChart  {...sharedProps} dataDoc={this.dataDoc} fieldKey={this.fieldKey} ref={r => {this._vizRenderer = r ?? undefined;}} 
@@ -515,7 +521,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             while (i < columns && docsChanged < docs.length){ 
                 docs[docsChanged].x = curX;
                 docs[docsChanged].y = curY;
-                console.log('x: ' + docs[i].x + ' y: ' + docs[i].y);
                 curX += templWidth + xGap;
                 ++docsChanged;
                 ++i;
@@ -527,6 +532,16 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     }
 
+    // applyImagesTo = (doc: Doc, cols: string[]) => {
+    //     const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]);
+    //     const imageFields = childDocs.filter(doc => doc.type === 'image');
+    //     const imageToKey: Map<Doc, string> = new Map();
+    //     imageFields.forEach(img => cols.forEach(col => {if (img[col]) imageToKey.set(img, col)}));
+
+    //     imageFields.forEach(doc => doc['data'] = String(doc[String(imageToKey.get(doc))]).replace(/"/g, ''));
+
+    // }
+
     @action
     createDocsFromTemplate = (templateInfo: DataVizTemplateInfo) => {
         if (!templateInfo.doc) return;
@@ -545,6 +560,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             const targetKey = StrCast(templateInfo.doc!.layout_fieldKey, 'layout');
             const applied = this.ApplyTemplateTo(templateInfo.doc!, target, targetKey, templateInfo.doc!.title + `${row}`);
             target.layout_fieldKey = targetKey;
+            //this.applyImagesTo(target, fields);
             return applied;
         });
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 8b17f1ed4..328cbbaf1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -81,8 +81,9 @@
     grid-auto-rows: 141px;
     overflow-y: scroll;
     margin: 5px;
+    margin-top: 0px;
     width: calc(100% - 10px);
-    height: calc(100% - 51px);
+    height: calc(100% - 45px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
 
@@ -240,8 +241,9 @@
     align-items: center;
     overflow-y: scroll;
     margin: 5px;
+    margin-top: 0px;
     width: calc(100% - 10px);
-    height: calc(100% - 51px);
+    height: calc(100% - 45px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
 
@@ -329,6 +331,11 @@
                 align-items: center;
                 border-radius: 3px;
                 border: solid 1px lightblue;
+
+                &:hover {
+                    border: solid 2px rgb(68, 153, 233);
+                    z-index: 2;
+                }
             }
         }
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index b1488679f..48b87fae7 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -38,7 +38,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
     @observable _selectedTemplate: Doc | undefined = undefined;
 
-    @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, columns: 1, repeat: 0};
+    @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns?: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0};
     @observable _layoutPreview: boolean = true;
     @observable _layoutPreviewScale: number = 1;
 
@@ -48,6 +48,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _indicatorY: number | undefined = undefined;
     @observable _display: boolean = false;
 
+    @observable _hoveredLayoutPreview: number | undefined = undefined;
     @observable _mouseX: number = -1;
     @observable _mouseY: number = -1;
     @observable _startPos?: {x: number, y: number};
@@ -68,7 +69,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @action setTemplateDocs = (docs: Doc[]) => {this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc)};
 
     @computed get docsToRender() {
-        return NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows);
+        return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
     }
 
     @computed get rowsCount(){
@@ -255,6 +256,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
+
+
     get layoutPreviewContents() {
         const docWidth = Number(this._selectedTemplate?._width);
         const docHeight = Number(this._selectedTemplate?._height);
@@ -298,6 +301,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                     </div> : 
                     this.docsToRender.map(num => 
                         <div 
+                        onMouseEnter={() => this._dataViz?.setSpecialHighlightedRow(num)}
+                        onMouseLeave={() => this._dataViz?.setSpecialHighlightedRow(undefined)}
                         className='docCreatorMenu-layout-preview-item'
                         style={{
                             width: scaledDown(docWidth), 
@@ -348,7 +353,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         <div className="docCreatorMenu-option-title">{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}</div>
                         <div className="docCreatorMenu-dropdown-content">
                             {layoutOption(LayoutType.Stacked)}
-                            {layoutOption(LayoutType.Grid, undefined, () => {this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length))})}
+                            {layoutOption(LayoutType.Grid, undefined, () => {if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length))})}
                             {layoutOption(LayoutType.Row)}
                             {layoutOption(LayoutType.Column)}
                             {layoutOption(LayoutType.Custom, {borderBottom: `0px`})}
@@ -432,7 +437,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         >
                             <button 
                                 className='docCreatorMenu-menu-button'
-                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates'))}>
+                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {
+                                    this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates';
+                                    if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
+                                }))}>
                                 <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'table-cells'}/>
                             </button>
                             <button 
@@ -442,7 +450,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                         clickEv.stopPropagation();
                                         if (!this._selectedTemplate) return;
                                         const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate, layout: this._layout, referencePos: {x: this._pageX + 450, y: this._pageY}, columns: this.columnsCount};
-                                        
+
                                         this._dataViz?.createDocsFromTemplate(templateInfo);
                                     }, 'make docs')
                                 )
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index a1deb1625..d484bf5e8 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import { Button, Type } from 'browndash-components';
+import { Button, Colors, Type } from 'browndash-components';
 import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -37,6 +37,7 @@ interface TableBoxProps {
         left: number;
     };
     docView?: () => DocumentView | undefined;
+    specHighlightedRow: number | undefined;
 }
 
 @observer
@@ -440,7 +441,8 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                             className={`tableBox-row ${this.columns[0]}`}
                                             onClick={e => this.tableRowClick(e, rowId)}
                                             style={{
-                                                background: NumListCast(this._props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '',
+                                                background: rowId === this._props.specHighlightedRow ? 'lightblue' : NumListCast(this._props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '',
+                                                border: rowId === this._props.specHighlightedRow ? `solid 3px ${Colors.MEDIUM_BLUE}` : ''
                                             }}>
                                             {this.columns.map(col => {
                                                 let colSelected = false;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index e4b3a1b9b..b7943f503 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -341,7 +341,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
 
     @computed get paths() {
-        const field = Cast(this.dataDoc[this.fieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc
+        const field = this.dataDoc[this.fieldKey] instanceof ImageField ? Cast(this.dataDoc[this.fieldKey], ImageField, null) : new ImageField(String(this.dataDoc[this.fieldKey])); // retrieve the primary image URL that is being rendered from the data doc
         const alts = DocListCast(this.dataDoc[this.fieldKey + '_alternates']); // retrieve alternate documents that may be rendered as alternate images
         const defaultUrl = new URL(ClientUtils.prepend('/assets/unknown-file-icon-hi.png'));
         const altpaths =
-- 
cgit v1.2.3-70-g09d2


From 08a208200bd25b59155b9cce96decb96aa948784 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 17 Jul 2024 20:15:26 -0400
Subject: UI overhaul for topbar

---
 src/client/views/MainView.tsx                      |   1 +
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 108 ++++++++++++++++++++-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      |  62 +++++++-----
 3 files changed, 145 insertions(+), 26 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index d337aae68..eb4f4761e 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -279,6 +279,7 @@ export class MainView extends ObservableReactComponent<{}> {
 
         library.add(
             ...[
+                fa.faFloppyDisk,
                 fa.faRepeat,
                 fa.faArrowsUpDown,
                 fa.faArrowsLeftRight,
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 328cbbaf1..bc10600ca 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -17,6 +17,8 @@
 .docCreatorMenu-menu {
     display: flex;
     flex-direction: row;
+    height: 25px;
+    align-items: flex-end;
 }
 
 .docCreatorMenu-menu-button {
@@ -40,6 +42,9 @@
     }
 
     &.close-menu {
+        font-size: 12px;
+        width: 15px;
+        height: 15px;
         font-size: 12px;
         margin-left: auto;
     }
@@ -51,6 +56,88 @@
     &:hover {
         background-color: rgb(60, 60, 65);
     }
+
+    &.top-bar {
+        border-bottom: 25px solid #555;
+        border-left: 12px solid transparent;
+        border-right: 12px solid transparent;
+        // border-top-left-radius: 5px;
+        // border-top-right-radius: 5px;
+        border-radius: 0px;
+        height: 0;
+        width: 50px;
+    }
+}
+
+.docCreatorMenu-top-buttons-container {
+    position: relative;
+    margin-top: 5px;
+    margin-left: 7px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    width: 150px;
+    height: auto;
+}
+
+.top-button-container {
+    position: relative;
+    width: 52px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.left {
+        z-index: 3;
+    }
+
+    &.middle {
+        position: absolute;
+        left: 40px;
+        z-index: 2;
+    }
+
+    &.right {
+        position: absolute;
+        left: 80px;
+        z-index: 1;
+    }
+
+    &:hover::before{
+        border-bottom: 20px solid rgb(82, 82, 82);
+    }
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-bottom: 20px solid rgb(50, 50, 50);
+        border-left: 12px solid transparent;
+        border-right: 12px solid transparent;
+        height: 0;
+        width: 50px;
+    }
+
+    &::after {
+        content: "";    
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        border-bottom: 22px solid rgb(180, 180, 180);
+        border-left: 12px solid transparent;
+        border-right: 12px solid transparent;
+        height: 0;
+        width: 52px;
+        z-index: -1;
+    }
+}
+
+.top-button-content {
+    position: relative;
+    z-index: 1;
+    color: white;
 }
 
 .docCreatorMenu-menu-hr{
@@ -59,7 +146,6 @@
     color: rgb(180, 180, 180);
 }
 
-
 .docCreatorMenu-placement-indicator {
     position: absolute;
     z-index: 100000;
@@ -69,6 +155,22 @@
     height: 25px;
 }
 
+.docCreatorMenu-create-docs-button {
+    width: 80px;
+    height: 40px;
+    background-color: rgb(176, 229, 149); 
+    border-radius: 5px;
+    border: 2px solid rgb(126, 219, 80);
+    padding: 0px;
+    font-size: 16px;
+    color: black;
+
+    &:hover {
+        background-color: rgb(129, 223, 83);
+        border: 2px solid rgb(80, 185, 28); 
+    }
+}
+
 //------------------------------------------------------------------------------------------------------------------------------------------
 //DocCreatorMenu templates preview CSS
 //--------------------------------------------------------------------------------------------------------------------------------------------
@@ -83,7 +185,7 @@
     margin: 5px;
     margin-top: 0px;
     width: calc(100% - 10px);
-    height: calc(100% - 45px);
+    height: calc(100% - 30px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
 
@@ -243,7 +345,7 @@
     margin: 5px;
     margin-top: 0px;
     width: calc(100% - 10px);
-    height: calc(100% - 45px);
+    height: calc(100% - 30px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 48b87fae7..27c5b17ef 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -54,7 +54,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _startPos?: {x: number, y: number};
     @observable _shouldDisplay: boolean = false;
 
-    @observable _menuContent: 'templates' | 'options' = 'templates';
+    @observable _menuContent: 'templates' | 'options' | 'saved' = 'templates';
     @observable _dragging: boolean = false;
     @observable _draggingIndicator: boolean = false;
     @observable _dataViz?: DataVizBox;
@@ -368,11 +368,44 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 {this._layout.type ? this.layoutConfigOptions: null}
                 {this._layoutPreview ? this.layoutPreviewContents : null}
                 {selectionBox(60, 20, 'repeat', undefined, repeatOptions.map(num => <option onPointerDown={e => this._layout.repeat = num}>{`${num}x`}</option>))}
+                <button 
+                    className='docCreatorMenu-create-docs-button'
+                    onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction,
+                            undoable(clickEv => {
+                                clickEv.stopPropagation();
+                                if (!this._selectedTemplate) return;
+                                const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate, layout: this._layout, referencePos: {x: this._pageX + 450, y: this._pageY}, columns: this.columnsCount};
+                                this._dataViz?.createDocsFromTemplate(templateInfo);
+                            }, 'make docs')
+                        )
+                    }>
+                    Create
+                </button>
             </div>
         );
     }
 
     render() {
+        const topButton = (icon: string, func: Function, tag: string) => {
+            return (
+                <div className={`top-button-container ${tag}`}>
+                    <div 
+                        className="top-button-content"
+                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {func()}))}>
+                        <FontAwesomeIcon icon={icon as any}/>
+                    </div>
+                </div>
+            );
+        }
+
+        const onPreviewSelected = () => {this._menuContent = 'templates'}
+        const onSavedSelected = () => {this._menuContent = 'saved'}
+        const onOptionsSelected = () => {
+            this._menuContent = 'options';
+            if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
+        }
+
+
         return (
             <div className='docCreatorMenu'>
                 {!this._shouldDisplay ? undefined : 
@@ -435,28 +468,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         onPointerMove={e => this.onPointerMove(e)}
                         onPointerUp={() => this._dragging = false}
                         >
-                            <button 
-                                className='docCreatorMenu-menu-button'
-                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {
-                                    this._menuContent = this._menuContent === 'templates' ? 'options' : 'templates';
-                                    if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
-                                }))}>
-                                <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'table-cells'}/>
-                            </button>
-                            <button 
-                            className='docCreatorMenu-menu-button right'
-                            onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction,
-                                    undoable(clickEv => {
-                                        clickEv.stopPropagation();
-                                        if (!this._selectedTemplate) return;
-                                        const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate, layout: this._layout, referencePos: {x: this._pageX + 450, y: this._pageY}, columns: this.columnsCount};
-
-                                        this._dataViz?.createDocsFromTemplate(templateInfo);
-                                    }, 'make docs')
-                                )
-                            }>
-                                <FontAwesomeIcon icon={'plus'}/>
-                            </button>
+                            <div className='docCreatorMenu-top-buttons-container'>
+                                {topButton('table-cells', onPreviewSelected, 'left')}
+                                {topButton('bars', onOptionsSelected, 'middle')}
+                                {topButton('floppy-disk', onSavedSelected, 'right')}
+                            </div>
                             <button 
                                 className='docCreatorMenu-menu-button close-menu'
                                 onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
-- 
cgit v1.2.3-70-g09d2


From d7b9c3bde6c347c91aaddb265188c749904b26a1 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 18 Jul 2024 01:08:47 -0400
Subject: create button coloring and zoom buttons moved

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 39 ++++++++++++++++------
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 38 ++++++++++++---------
 2 files changed, 50 insertions(+), 27 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index bc10600ca..0fc85ba5d 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -43,8 +43,9 @@
 
     &.close-menu {
         font-size: 12px;
-        width: 15px;
-        height: 15px;
+        width: 18px;
+        height: 18px;
+        border-radius: 2px;
         font-size: 12px;
         margin-left: auto;
     }
@@ -96,12 +97,20 @@
         position: absolute;
         left: 40px;
         z-index: 2;
+
+        &.selected {
+            z-index: 4;
+        }
     }
 
     &.right {
         position: absolute;
         left: 80px;
         z-index: 1;
+
+        &.selected {
+            z-index: 4;
+        }
     }
 
     &:hover::before{
@@ -132,6 +141,10 @@
         width: 52px;
         z-index: -1;
     }
+
+    &.selected::before {
+        border-bottom-color: rgb(67, 119, 214);
+    }
 }
 
 .top-button-content {
@@ -164,6 +177,7 @@
     padding: 0px;
     font-size: 16px;
     color: black;
+    flex: 0 0 auto;
 
     &:hover {
         background-color: rgb(129, 223, 83);
@@ -408,7 +422,7 @@
         position: relative;
         padding: 0px;
 
-        &:hover .docCreatorMenu-zoom-button {
+        &:hover .docCreatorMenu-zoom-button-container {
             display: block;
         }
 
@@ -441,8 +455,17 @@
             }
         }
 
-        .docCreatorMenu-zoom-button{ 
+        .docCreatorMenu-zoom-button-container {
+            position: absolute;
+            top: 0px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
             display: none;
+            z-index: 999;
+        }
+
+        .docCreatorMenu-zoom-button{ 
             width: 15px;
             height: 15px;
             background: whitesmoke; 
@@ -451,17 +474,11 @@
             border: 1px solid rgb(180, 180, 180);
             padding: 0px;
             font-size: 10px;
-            position: absolute;
-            top: 0px;
             z-index: 6;
             margin-left: 0px;
             margin-top: 0px;
-            margin-right: 225px;
+            margin-right: 0px; //225px
             margin-bottom: 0px;
-
-            &.zoom-in{
-                top: 15px;
-            }
         }
     }
 }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 27c5b17ef..67999fc39 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -35,7 +35,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     private _ref: HTMLDivElement | null = null;
 
     @observable _templateDocs: Doc[] = [];
-    @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
     @observable _selectedTemplate: Doc | undefined = undefined;
 
     @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns?: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0};
@@ -98,6 +97,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
+    @computed get canMakeDocs(){
+        return this._selectedTemplate !== undefined && this._layout !== undefined;
+    }
+
     setUpButtonClick = (e: any, func: Function) => {
         setupMoveUpEvents(
             this,
@@ -269,16 +272,18 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
         return (
             <div className='docCreatorMenu-layout-preview-window-wrapper'>
-                <button 
-                    className='docCreatorMenu-zoom-button'
-                    onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= 1.25))}>
-                        <FontAwesomeIcon icon={'minus'}/>
-                </button>
-                <button 
-                    className='docCreatorMenu-zoom-button zoom-in'
-                    onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= .75))}>
-                        <FontAwesomeIcon icon={'plus'}/>
-                </button>
+                <div className='docCreatorMenu-zoom-button-container'>
+                    <button 
+                        className='docCreatorMenu-zoom-button'
+                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= 1.25))}>
+                            <FontAwesomeIcon icon={'minus'}/>
+                    </button>
+                    <button 
+                        className='docCreatorMenu-zoom-button zoom-in'
+                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= .75))}>
+                            <FontAwesomeIcon icon={'plus'}/>
+                    </button>
+                </div>
                 <div 
                 className='docCreatorMenu-layout-preview-window'
                 style={{
@@ -370,6 +375,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 {selectionBox(60, 20, 'repeat', undefined, repeatOptions.map(num => <option onPointerDown={e => this._layout.repeat = num}>{`${num}x`}</option>))}
                 <button 
                     className='docCreatorMenu-create-docs-button'
+                    style={{backgroundColor: this.canMakeDocs ? '' : 'rgb(155, 155, 155)', border: this.canMakeDocs ? '' : 'rgb(180, 180, 180)'}}
                     onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction,
                             undoable(clickEv => {
                                 clickEv.stopPropagation();
@@ -386,9 +392,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     }
 
     render() {
-        const topButton = (icon: string, func: Function, tag: string) => {
+        const topButton = (icon: string, opt: string, func: Function, tag: string) => {
             return (
-                <div className={`top-button-container ${tag}`}>
+                <div className={`top-button-container ${tag} ${opt === this._menuContent ? 'selected' : ''}`}>
                     <div 
                         className="top-button-content"
                         onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {func()}))}>
@@ -469,9 +475,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         onPointerUp={() => this._dragging = false}
                         >
                             <div className='docCreatorMenu-top-buttons-container'>
-                                {topButton('table-cells', onPreviewSelected, 'left')}
-                                {topButton('bars', onOptionsSelected, 'middle')}
-                                {topButton('floppy-disk', onSavedSelected, 'right')}
+                                {topButton('table-cells', 'templates', onPreviewSelected, 'left')}
+                                {topButton('bars', 'options', onOptionsSelected, 'middle')}
+                                {topButton('floppy-disk', 'saved', onSavedSelected, 'right')}
                             </div>
                             <button 
                                 className='docCreatorMenu-menu-button close-menu'
-- 
cgit v1.2.3-70-g09d2


From 9b8e2853c7ea53578c3dbf180018c25b8b322617 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 18 Jul 2024 04:27:44 -0400
Subject: saving layouts

---
 src/client/documents/Documents.ts                  |   1 +
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |  15 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 214 +++++++++++++--------
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 130 ++++++++++---
 4 files changed, 244 insertions(+), 116 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index dabbf9591..dc649ec4e 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -235,6 +235,7 @@ export class DocumentOptions {
     dataViz_pie?: string;
     dataViz_histogram?: string;
     dataViz?: string;
+    dataViz_savedTemplates?: LISTt;
 
     layout?: string | Doc; // default layout string or template document
     layout_isSvg?: BOOLt = new BoolInfo('whether document decorations and other selections should handle pointerEvents for svg content or use doc bounding box');
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 765642891..e943dd2e3 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -33,12 +33,14 @@ import { LineChart } from './components/LineChart';
 import { PieChart } from './components/PieChart';
 import { TableBox } from './components/TableBox';
 import { LinkManager } from '../../../util/LinkManager';
-import { DataVizTemplateInfo, DocCreatorMenu, LayoutType } from './DocCreatorMenu';
+import { DataVizTemplateInfo, DataVizTemplateLayout, DocCreatorMenu, LayoutType } from './DocCreatorMenu';
 import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
 import { PrefetchProxy } from '../../../../fields/Proxy';
 import { AclAdmin, AclAugment, AclEdit } from '../../../../fields/DocSymbols';
 import { template } from 'lodash';
 import { data } from 'jquery';
+import { listSpec } from '../../../../fields/Schema';
+import { ObjectField } from '../../../../fields/ObjectField';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -532,14 +534,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     }
 
-    // applyImagesTo = (doc: Doc, cols: string[]) => {
-    //     const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]);
-    //     const imageFields = childDocs.filter(doc => doc.type === 'image');
-    //     const imageToKey: Map<Doc, string> = new Map();
-    //     imageFields.forEach(img => cols.forEach(col => {if (img[col]) imageToKey.set(img, col)}));
-
-    //     imageFields.forEach(doc => doc['data'] = String(doc[String(imageToKey.get(doc))]).replace(/"/g, ''));
-
+    // @action addSavedLayout = (layout: DataVizTemplateLayout) => {
+    //     const saved = Cast(this.layoutDoc.dataViz_savedTemplates, listSpec('RefField'));
+        
     // }
 
     @action
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 0fc85ba5d..d18f75545 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -68,6 +68,13 @@
         height: 0;
         width: 50px;
     }
+
+    &.preview-toggle {
+        margin: 0px;
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+        border-left: 0px;
+    }
 }
 
 .docCreatorMenu-top-buttons-container {
@@ -168,16 +175,44 @@
     height: 25px;
 }
 
+.docCreatorMenu-general-options-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0px;
+    padding: 0px;
+    gap: 5px;
+}
+
+.docCreatorMenu-save-layout-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    background-color: rgb(99, 148, 238); 
+    border: 2px solid rgb(80, 107, 152);
+    border-radius: 5px;
+    margin-bottom: 20px;
+    font-size: 25px;
+
+    &:hover{
+        background-color: rgb(59, 128, 255);  
+        border: 2px solid rgb(53, 80, 127);
+    }
+}
+
 .docCreatorMenu-create-docs-button {
-    width: 80px;
+    width: 40px;
     height: 40px;
     background-color: rgb(176, 229, 149); 
-    border-radius: 5px;
     border: 2px solid rgb(126, 219, 80);
+    border-radius: 5px;
     padding: 0px;
-    font-size: 16px;
-    color: black;
+    font-size: 25px;
+    color: white;
     flex: 0 0 auto;
+    margin-bottom: 20px; //remove later !!!
 
     &:hover {
         background-color: rgb(129, 223, 83);
@@ -185,6 +220,13 @@
     }
 }
 
+.docCreatorMenu-option-divider {
+    border-top: 1px solid rgb(180, 180, 180);
+    width: 225px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
 //------------------------------------------------------------------------------------------------------------------------------------------
 //DocCreatorMenu templates preview CSS
 //--------------------------------------------------------------------------------------------------------------------------------------------
@@ -202,29 +244,32 @@
     height: calc(100% - 30px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
+}
 
-    .docCreatorMenu-preview-window {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 125px;
-        height: 125px;
-        margin-top: 10px;
-        margin-left: 10px;
-        border: 1px solid rgb(163, 163, 163);
-        border-radius: 5px;
-        box-shadow: 5px 5px rgb(29, 29, 31);
+.docCreatorMenu-preview-window {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 125px;
+    height: 125px;
+    margin-top: 10px;
+    margin-left: 10px;
+    border: 1px solid rgb(163, 163, 163);
+    border-radius: 5px;
+    box-shadow: 5px 5px rgb(29, 29, 31);
 
-        &:hover{
-            background-color: rgb(72, 72, 73);
-        }
+    &:hover{
+        background-color: rgb(72, 72, 73);
+    }
 
-        .docCreatorMenu-preview-image{ 
-            width: 105px;
-            height: 105px;
-            border-radius: 5px;
-        }
+    .docCreatorMenu-preview-image{ 
+        width: 105px;
+        height: 105px;
+        border-radius: 5px;
+    }
 
+    &.empty {
+        font-size: 35px;
     }
 }
 
@@ -254,6 +299,8 @@
     background: whitesmoke; 
     background-color: rgb(34, 34, 37);
     border-radius: 5px;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
     border: 1px solid rgb(180, 180, 180);
     padding: 0px;
     font-size: 12px;
@@ -412,75 +459,80 @@
         }
 
     }
+}
 
-    .docCreatorMenu-layout-preview-window-wrapper {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 85%;
-        height: auto;
-        position: relative;
-        padding: 0px;
+.docCreatorMenu-layout-preview-window-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 85%;
+    height: auto;
+    position: relative;
+    padding: 0px;
 
-        &:hover .docCreatorMenu-zoom-button-container {
-            display: block;
-        }
+    &:hover .docCreatorMenu-zoom-button-container {
+        display: block;
+    }
 
-        .docCreatorMenu-layout-preview-window {
-            padding: 5px;
-            flex: 0 0 auto;
-            overflow: scroll;
-            display: grid;
-            width: auto;
-            height: auto;
-            max-width: 240;
-            max-height: 240;
-            border: 1px solid rgb(180, 180, 180);
-            border-radius: 5px;
-            background-color: rgb(34, 34, 37);
-            -ms-overflow-style: none; 
-            scrollbar-width: none;
-
-            .docCreatorMenu-layout-preview-item {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                border-radius: 3px;
-                border: solid 1px lightblue;
-
-                &:hover {
-                    border: solid 2px rgb(68, 153, 233);
-                    z-index: 2;
-                }
-            }
+    .docCreatorMenu-layout-preview-window {
+        padding: 5px;
+        flex: 0 0 auto;
+        overflow: scroll;
+        display: grid;
+        width: auto;
+        height: auto;
+        max-width: 240;
+        max-height: 240;
+        border: 1px solid rgb(180, 180, 180);
+        border-radius: 5px;
+        background-color: rgb(34, 34, 37);
+        -ms-overflow-style: none; 
+        scrollbar-width: none;
+
+        &.small {
+            max-width: 100;
+            max-height: 100;
         }
 
-        .docCreatorMenu-zoom-button-container {
-            position: absolute;
-            top: 0px;
+        .docCreatorMenu-layout-preview-item {
             display: flex;
             justify-content: center;
             align-items: center;
-            display: none;
-            z-index: 999;
-        }
-
-        .docCreatorMenu-zoom-button{ 
-            width: 15px;
-            height: 15px;
-            background: whitesmoke; 
-            background-color: rgb(34, 34, 37);
             border-radius: 3px;
-            border: 1px solid rgb(180, 180, 180);
-            padding: 0px;
-            font-size: 10px;
-            z-index: 6;
-            margin-left: 0px;
-            margin-top: 0px;
-            margin-right: 0px; //225px
-            margin-bottom: 0px;
+            border: solid 1px lightblue;
+
+            &:hover {
+                border: solid 2px rgb(68, 153, 233);
+                z-index: 2;
+            }
         }
     }
+
+    .docCreatorMenu-zoom-button-container {
+        position: absolute;
+        top: 0px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        display: none;
+        z-index: 999;
+    }
+
+    .docCreatorMenu-zoom-button{ 
+        width: 15px;
+        height: 15px;
+        background: whitesmoke; 
+        background-color: rgb(34, 34, 37);
+        border-radius: 3px;
+        border: 1px solid rgb(180, 180, 180);
+        padding: 0px;
+        font-size: 10px;
+        z-index: 6;
+        margin-left: 0px;
+        margin-top: 0px;
+        margin-right: 0px; //225px
+        margin-bottom: 0px;
+    }
 }
 
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 67999fc39..fdf623150 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -40,6 +40,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns?: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0};
     @observable _layoutPreview: boolean = true;
     @observable _layoutPreviewScale: number = 1;
+    @observable _savedLayouts: DataVizTemplateLayout[] = [];
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
@@ -193,6 +194,20 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
+    @action updateSelectedSavedLayout = (layout: DataVizTemplateLayout) => {
+        this._layout.xMargin = layout.layout.xMargin;
+        this._layout.yMargin = layout.layout.yMargin;
+        this._layout.type = layout.layout.type;
+        this._layout.columns = layout.columns;
+    }
+
+    isSelectedLayout = (layout: DataVizTemplateLayout) => {
+        return this._layout.xMargin === layout.layout.xMargin
+        && this._layout.yMargin === layout.layout.yMargin 
+        && this._layout.type === layout.layout.type 
+        && this._layout.columns === layout.columns;
+    }
+
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
         return (
@@ -203,13 +218,35 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                     return (<div 
                     className='docCreatorMenu-preview-window'
                     style={{
-                        background: this._selectedTemplate === info.doc ? Colors.MEDIUM_BLUE : '',
+                        border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
                         boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                     }}
                     onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
                         <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
                     </div>
                 )})}
+                <div className='docCreatorMenu-preview-window empty'>
+                    <FontAwesomeIcon icon='plus' color='rgb(160, 160, 160)'/>
+                </div>
+            </div>
+        );
+    }
+
+    get savedLayoutsPreviewContents(){
+        return (
+            <div className='docCreatorMenu-preview-container'>
+               {this._savedLayouts.map((layout, index) => 
+                <div 
+                    className='docCreatorMenu-preview-window'
+                    style={{
+                        border: this.isSelectedLayout(layout) ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                        boxShadow: this.isSelectedLayout(layout) ? `0 0 15px rgba(68, 118, 247, .8)` : ''
+                    }}
+                    onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedSavedLayout(layout)))}
+                    >
+                    {this.layoutPreviewContents(87, layout, false, true, index)}
+                </div>
+               )}
             </div>
         );
     }
@@ -259,20 +296,23 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
+    layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, zoomOption: boolean = true, small: boolean = false, id?: number) => {
+        const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate;
+        if (!doc) return;
 
+        const layout = altLayout ? altLayout.layout : this._layout;
 
-    get layoutPreviewContents() {
-        const docWidth = Number(this._selectedTemplate?._width);
-        const docHeight = Number(this._selectedTemplate?._height);
-        const horizontalSpan: number = (docWidth + this._layout.xMargin) * this.columnsCount - this._layout.xMargin;
-        const verticalSpan: number = (docHeight + this._layout.yMargin) * this.rowsCount - this._layout.yMargin;
+        const docWidth: number = Number(doc._width);
+        const docHeight: number = Number(doc._height);
+        const horizontalSpan: number = (docWidth + layout.xMargin) * (altLayout ? altLayout.columns : this.columnsCount) - layout.xMargin;;
+        const verticalSpan: number = (docHeight + layout.yMargin) * (altLayout ? altLayout.rows : this.rowsCount) - layout.yMargin;
         const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan;
-        const scaledDown = (input: number) => {return input / (largerSpan / 225 * this._layoutPreviewScale)}
+        const scaledDown = (input: number) => {return input / (largerSpan / outerSpan * this._layoutPreviewScale)}
         const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3));
 
         return (
-            <div className='docCreatorMenu-layout-preview-window-wrapper'>
-                <div className='docCreatorMenu-zoom-button-container'>
+            <div className='docCreatorMenu-layout-preview-window-wrapper' id={String(id) ?? undefined}>
+                {!zoomOption ? null : <div className='docCreatorMenu-zoom-button-container'>
                     <button 
                         className='docCreatorMenu-zoom-button'
                         onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= 1.25))}>
@@ -283,15 +323,16 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= .75))}>
                             <FontAwesomeIcon icon={'plus'}/>
                     </button>
-                </div>
+                </div>}
                 <div 
-                className='docCreatorMenu-layout-preview-window'
+                id={String(id) ?? undefined}
+                className={`docCreatorMenu-layout-preview-window ${small ? 'small' : ''}`}
                 style={{
-                    gridTemplateColumns: `repeat(${this.columnsCount}, ${scaledDown(docWidth)}px`,
+                    gridTemplateColumns: `repeat(${altLayout ? altLayout.columns : this.columnsCount}, ${scaledDown(docWidth)}px`,
                     gridTemplateRows: `${scaledDown(docHeight)}px`,
                     gridAutoRows: `${scaledDown(docHeight)}px`,
-                    rowGap: `${scaledDown(this._layout.yMargin)}px`,
-                    columnGap: `${scaledDown(this._layout.xMargin)}px`
+                    rowGap: `${scaledDown(layout.yMargin)}px`,
+                    columnGap: `${scaledDown(layout.xMargin)}px`
                 }}>
                     {this._layout.type === LayoutType.Stacked ? 
                     <div 
@@ -365,32 +406,61 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         </div>
                     </div>
                     <button 
-                        className='docCreatorMenu-menu-button'
+                        className='docCreatorMenu-menu-button preview-toggle'
                         onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreview = !this._layoutPreview))}>
                         <FontAwesomeIcon icon={this._layoutPreview ? 'minus' : 'magnifying-glass'}/>
                     </button>
                 </div>
                 {this._layout.type ? this.layoutConfigOptions: null}
-                {this._layoutPreview ? this.layoutPreviewContents : null}
+                {this._layoutPreview ? this.layoutPreviewContents(225) : null}
                 {selectionBox(60, 20, 'repeat', undefined, repeatOptions.map(num => <option onPointerDown={e => this._layout.repeat = num}>{`${num}x`}</option>))}
-                <button 
-                    className='docCreatorMenu-create-docs-button'
-                    style={{backgroundColor: this.canMakeDocs ? '' : 'rgb(155, 155, 155)', border: this.canMakeDocs ? '' : 'rgb(180, 180, 180)'}}
-                    onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction,
+                <hr className='docCreatorMenu-option-divider'/>
+                <div className='docCreatorMenu-general-options-container'>
+                    <button
+                        className='docCreatorMenu-save-layout-button'
+                        onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction,
                             undoable(clickEv => {
                                 clickEv.stopPropagation();
                                 if (!this._selectedTemplate) return;
-                                const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate, layout: this._layout, referencePos: {x: this._pageX + 450, y: this._pageY}, columns: this.columnsCount};
-                                this._dataViz?.createDocsFromTemplate(templateInfo);
-                            }, 'make docs')
+                                const layout: DataVizTemplateLayout = {template: this._selectedTemplate, layout: {type: this._layout.type, xMargin: this._layout.xMargin, yMargin:this._layout.yMargin, repeat: 0}, columns: this.columnsCount, rows: this.rowsCount, docsNumList: this.docsToRender};
+                                this._savedLayouts.push(layout);
+                            }, 'make docs') 
                         )
                     }>
-                    Create
-                </button>
+                        <FontAwesomeIcon icon='floppy-disk'/>
+                    </button>
+                    <button 
+                        className='docCreatorMenu-create-docs-button'
+                        style={{backgroundColor: this.canMakeDocs ? '' : 'rgb(155, 155, 155)', border: this.canMakeDocs ? '' : 'solid 2px rgb(180, 180, 180)'}}
+                        onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction,
+                                undoable(clickEv => {
+                                    clickEv.stopPropagation();
+                                    if (!this._selectedTemplate) return;
+                                    const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate, layout: this._layout, referencePos: {x: this._pageX + 450, y: this._pageY}, columns: this.columnsCount};
+                                    this._dataViz?.createDocsFromTemplate(templateInfo);
+                                }, 'make docs') 
+                            )
+                        }>
+                         <FontAwesomeIcon icon='plus'/>
+                    </button>
+                </div>
             </div>
         );
     }
 
+    get renderSelectedViewType(){
+        switch (this._menuContent){
+            case 'templates':
+                return this.templatesPreviewContents;
+            case 'options':
+                return this.optionsMenuContents;
+            case 'saved':
+                return this.savedLayoutsPreviewContents;
+            default:
+                return undefined;
+        }
+    }
+
     render() {
         const topButton = (icon: string, opt: string, func: Function, tag: string) => {
             return (
@@ -485,7 +555,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 <FontAwesomeIcon icon={'minus'}/>
                             </button>
                         </div>
-                        {this._menuContent === 'templates' ? this.templatesPreviewContents : this.optionsMenuContents}
+                        {this.renderSelectedViewType}
                 </div>
                 </>
                 }
@@ -499,4 +569,12 @@ export interface DataVizTemplateInfo {
     layout: {type: LayoutType, xMargin: number, yMargin: number, repeat: number};
     columns: number;
     referencePos: {x: number, y: number};
+}
+
+export interface DataVizTemplateLayout {
+    template: Doc;
+    docsNumList: number[];
+    layout: {type: LayoutType, xMargin: number, yMargin: number, repeat: number};
+    columns: number;
+    rows: number;
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 56030ba4d7f1038095562ecd4c2937faebe80a30 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 18 Jul 2024 04:40:13 -0400
Subject: option to remove saved layout

---
 src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index fdf623150..cb10de65b 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -244,7 +244,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                     }}
                     onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedSavedLayout(layout)))}
                     >
-                    {this.layoutPreviewContents(87, layout, false, true, index)}
+                    {this.layoutPreviewContents(87, layout, true, index)}
                 </div>
                )}
             </div>
@@ -296,7 +296,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
-    layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, zoomOption: boolean = true, small: boolean = false, id?: number) => {
+    layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => {
         const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate;
         if (!doc) return;
 
@@ -312,7 +312,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
         return (
             <div className='docCreatorMenu-layout-preview-window-wrapper' id={String(id) ?? undefined}>
-                {!zoomOption ? null : <div className='docCreatorMenu-zoom-button-container'>
+                <div className='docCreatorMenu-zoom-button-container'>
                     <button 
                         className='docCreatorMenu-zoom-button'
                         onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= 1.25))}>
@@ -323,7 +323,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= .75))}>
                             <FontAwesomeIcon icon={'plus'}/>
                     </button>
-                </div>}
+                    {altLayout ? <button 
+                        className='docCreatorMenu-zoom-button zoom-in'
+                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._savedLayouts.splice(this._savedLayouts.indexOf(altLayout), 1)))}>
+                            <FontAwesomeIcon icon={'trash'}/>
+                    </button> : null}
+                </div>
                 <div 
                 id={String(id) ?? undefined}
                 className={`docCreatorMenu-layout-preview-window ${small ? 'small' : ''}`}
@@ -366,6 +371,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     }
 
     get optionsMenuContents(){
+        const layoutEquals = (layout: DataVizTemplateLayout) => {
+
+        } //TODO: ADD LATER
+
         const layoutOption = (option: LayoutType, optStyle?: {}, specialFunc?: Function) => {
             return (
                 <div 
@@ -423,7 +432,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 clickEv.stopPropagation();
                                 if (!this._selectedTemplate) return;
                                 const layout: DataVizTemplateLayout = {template: this._selectedTemplate, layout: {type: this._layout.type, xMargin: this._layout.xMargin, yMargin:this._layout.yMargin, repeat: 0}, columns: this.columnsCount, rows: this.rowsCount, docsNumList: this.docsToRender};
-                                this._savedLayouts.push(layout);
+                                if (!this._savedLayouts.includes(layout)) { this._savedLayouts.push(layout) };
                             }, 'make docs') 
                         )
                     }>
-- 
cgit v1.2.3-70-g09d2


From b9e8290a2f9c75ae61edc3c89bd0fff5c9e3a0e5 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 19 Jul 2024 02:23:54 -0400
Subject: img link bug

---
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      |  4 +-
 src/server/server_Initialization.ts                | 80 ++++++++++++----------
 2 files changed, 47 insertions(+), 37 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index cb10de65b..e48a6ada4 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -324,7 +324,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                             <FontAwesomeIcon icon={'plus'}/>
                     </button>
                     {altLayout ? <button 
-                        className='docCreatorMenu-zoom-button zoom-in'
+                        className='docCreatorMenu-zoom-button trash'
                         onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._savedLayouts.splice(this._savedLayouts.indexOf(altLayout), 1)))}>
                             <FontAwesomeIcon icon={'trash'}/>
                     </button> : null}
@@ -337,7 +337,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                     gridTemplateRows: `${scaledDown(docHeight)}px`,
                     gridAutoRows: `${scaledDown(docHeight)}px`,
                     rowGap: `${scaledDown(layout.yMargin)}px`,
-                    columnGap: `${scaledDown(layout.xMargin)}px`
+                    columnGap: `${scaledDown(layout.xMargin)}px` 
                 }}>
                     {this._layout.type === LayoutType.Stacked ? 
                     <div 
diff --git a/src/server/server_Initialization.ts b/src/server/server_Initialization.ts
index 9183688c6..c3d31e74d 100644
--- a/src/server/server_Initialization.ts
+++ b/src/server/server_Initialization.ts
@@ -155,41 +155,51 @@ function proxyServe(req: any, requrl: string, response: any) {
     };
     const retrieveHTTPBody = () => {
         // req.headers.cookie = '';
-        req.pipe(request(requrl))
-            .on('error', (e: any) => {
-                console.log(`CORS url error: ${requrl}`, e);
-                response.send(`<html><body bgcolor="red" link="006666" alink="8B4513" vlink="006666">
-                                    <title>Error</title>
-                                    <div align="center"><h1>Failed to load: ${requrl} </h1></div>
-                                    <p>${e}</p>
-                                </body></html>`);
-            })
-            .on('response', (res: any) => {
-                res.headers;
-                const headers = Object.keys(res.headers);
-                const headerCharRegex = /[^\t\x20-\x7e\x80-\xff]/;
-                headers.forEach(headerName => {
-                    const header = res.headers[headerName];
-                    if (Array.isArray(header)) {
-                        res.headers[headerName] = header.filter(h => !headerCharRegex.test(h));
-                    } else if (headerCharRegex.test(header || '')) {
-                        delete res.headers[headerName];
-                    } else res.headers[headerName] = header;
-                    if (headerName === 'content-encoding') {
-                        wasinBrFormat = res.headers[headerName] === 'br';
-                        res.headers[headerName] = 'gzip';
-                    }
-                });
-                res.headers['x-permitted-cross-domain-policies'] = 'all';
-                res.headers['x-frame-options'] = '';
-                res.headers['content-security-policy'] = '';
-                // eslint-disable-next-line no-multi-assign
-                response.headers = response._headers = res.headers;
-            })
-            .on('end', sendModifiedBody)
-            .pipe(htmlBodyMemoryStream)
-            .on('error', (e: any) => console.log('http body pipe error', e));
-    };
+        try {
+            const reqval = request(requrl);
+            req.pipe(reqval)
+                .on('error', (e: any) => {
+                    console.log(`CORS url error: ${requrl}`, e);
+                    response.send(`<html><body bgcolor="red" link="006666" alink="8B4513" vlink="006666">
+                                        <title>Error</title>
+                                        <div align="center"><h1>Failed to load: ${requrl} </h1></div>
+                                        <p>${e}</p>
+                                    </body></html>`);
+                })
+                .on('response', (res: any) => {
+                    res.headers;
+                    const headers = Object.keys(res.headers);
+                    const headerCharRegex = /[^\t\x20-\x7e\x80-\xff]/;
+                    headers.forEach(headerName => {
+                        const header = res.headers[headerName];
+                        if (Array.isArray(header)) {
+                            res.headers[headerName] = header.filter(h => !headerCharRegex.test(h));
+                        } else if (headerCharRegex.test(header || '')) {
+                            delete res.headers[headerName];
+                        } else res.headers[headerName] = header;
+                        if (headerName === 'content-encoding') {
+                            wasinBrFormat = res.headers[headerName] === 'br';
+                            res.headers[headerName] = 'gzip';
+                        }
+                    });
+                    res.headers['x-permitted-cross-domain-policies'] = 'all';
+                    res.headers['x-frame-options'] = '';
+                    res.headers['content-security-policy'] = '';
+                    // eslint-disable-next-line no-multi-assign
+                    response.headers = response._headers = res.headers;
+                })
+                .on('end', sendModifiedBody)
+                .pipe(htmlBodyMemoryStream)
+                .on('error', (e: any) => console.log('http body pipe error', e));
+        } catch (e) {
+            console.log("Request failed: ", e);
+            response.send(`<html><body bgcolor="red" link="006666" alink="8B4513" vlink="006666">
+                                        <title>Error</title>
+                                        <div align="center"><h1>Failed to load: ${requrl} </h1></div>
+                                        <p>${e}</p>
+                                    </body></html>`);
+        }
+    }
     retrieveHTTPBody();
 }
 
-- 
cgit v1.2.3-70-g09d2


From 19144140070f32f8ce9567d0197e809669e3e297 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 30 Jul 2024 12:41:05 -0400
Subject: dragging fixed and resizing mostly working (no css yet)

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  29 ++++-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 133 ++++++++++++++++++---
 2 files changed, 146 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index d18f75545..87f493291 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -228,7 +228,32 @@
 }
 
 //------------------------------------------------------------------------------------------------------------------------------------------
-//DocCreatorMenu templates preview CSS
+// Resizers CSS
+//--------------------------------------------------------------------------------------------------------------------------------------------
+
+.docCreatorMenu-resizer {
+    position: absolute;
+    background-color: none;
+
+    &.top, &.bottom {
+        height: 10px;
+        cursor: ns-resize;
+    }
+
+    &.right, &.left {
+        width: 10px;
+        cursor: ew-resize;
+    }
+
+    &.topRight, &.topLeft, &.bottomRight, &.bottomLeft {
+        height: 10px;
+        width: 10px;
+        background-color: blue;
+    }
+}
+
+//------------------------------------------------------------------------------------------------------------------------------------------
+// DocCreatorMenu templates preview CSS
 //--------------------------------------------------------------------------------------------------------------------------------------------
 
 
@@ -274,7 +299,7 @@
 }
 
 //------------------------------------------------------------------------------------------------------------------------------------------
-//DocCreatorMenu options CSS
+// DocCreatorMenu options CSS
 //--------------------------------------------------------------------------------------------------------------------------------------------
 
 .docCreatorMenu-option-container{
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index e48a6ada4..bc04f9a69 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -8,7 +8,7 @@ import { DocCast, ImageCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
 import { emptyFunction } from '../../../../Utils';
 import { SnappingManager } from '../../../util/SnappingManager';
-import { undoable } from '../../../util/UndoManager';
+import { UndoManager, undoable } from '../../../util/UndoManager';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DocumentView } from '../DocumentView';
 import { DataVizBox } from './DataVizBox';
@@ -18,6 +18,8 @@ import { Colors, IconButton, Size } from 'browndash-components';
 import { MakeTemplate } from '../../../util/DropConverter';
 import { threadId } from 'worker_threads';
 import { ideahub } from 'googleapis/build/src/apis/ideahub';
+import { DragManager } from '../../../util/DragManager';
+import { DateField } from '../../../../fields/DateField';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -58,6 +60,14 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _dragging: boolean = false;
     @observable _draggingIndicator: boolean = false;
     @observable _dataViz?: DataVizBox;
+    @observable _interactionLock: any;
+    @observable _snapPt: any;
+    @observable _resizeHdlId: string = '';
+    @observable _resizing: boolean = false;
+    @observable _offset: {x: number, y: number} = {x: 0, y: 0};
+    @observable _resizeUndo: UndoManager.Batch | undefined = undefined;
+    @observable _initDimensions: {width: number, height: number, x: number, y: number} = {width: 300, height: 400, x: 0, y: 0};
+    @observable _menuDimensions: {width: number, height: number} = {width: 300, height: 400};
 
     constructor(props: any) {
         super(props);
@@ -102,6 +112,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         return this._selectedTemplate !== undefined && this._layout !== undefined;
     }
 
+    get bounds(): {t: number, b: number, l: number, r: number} {
+        const rect = this._ref?.getBoundingClientRect();
+        const bounds = {t: rect?.top ?? 0, b: rect?.bottom ?? 0, l: rect?.left ?? 0, r: rect?.right ?? 0};
+        return bounds;
+    }
+
     setUpButtonClick = (e: any, func: Function) => {
         setupMoveUpEvents(
             this,
@@ -123,6 +139,19 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @action
     onPointerUp = (e: PointerEvent) => {
+        if (this._resizing) {
+            this._initDimensions.width = this._menuDimensions.width;
+            this._initDimensions.height = this._menuDimensions.height;
+            this._initDimensions.x = this._pageX;
+            this._initDimensions.y = this._pageY;
+            document.removeEventListener('pointermove', this.onResize);
+            SnappingManager.SetIsResizing(undefined);
+            this._resizing = false;
+        }
+        if (this._dragging) {
+            document.removeEventListener('pointermove', this.onDrag);
+            this._dragging = false;
+        }
         if (e.button !== 2 && !e.ctrlKey) return;
         const curX = e.clientX;
         const curY = e.clientY;
@@ -164,17 +193,76 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     };
 
     @action
-    onPointerMove = (e: any) => {
-        // if (this._draggingIndicator) {
-        //     this._indicatorX = e.pageX - (this._startPos?.x ?? 0) + this._pageX;
-        //     this._indicatorY = e.pageY - (this._startPos?.y ?? 0) + this._pageY;
-        // } else 
-        if (this._dragging){
-            this._pageX = e.pageX - (this._startPos?.x ?? 0);
-            this._pageY = e.pageY - (this._startPos?.y ?? 0);
-        }
+    onResizePointerDown = (e: React.PointerEvent): void => {
+        this._resizing = true;
+        document.addEventListener('pointermove', this.onResize);
+        SnappingManager.SetIsResizing(DocumentView.Selected().lastElement()?.Document[Id]); // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them
+        e.stopPropagation();
+        const id = (this._resizeHdlId = e.currentTarget.className);
+        const pad = id.includes('Left') || id.includes('Right') ? Number(getComputedStyle(e.target as any).width.replace('px', '')) / 2 : 0;
+        const bounds = e.currentTarget.getBoundingClientRect();
+        this._offset = {
+            x: id.toLowerCase().includes('left') ? bounds.right - e.clientX - pad : bounds.left - e.clientX + pad, //
+            y: id.toLowerCase().includes('top') ? bounds.bottom - e.clientY - pad : bounds.top - e.clientY + pad,
+        };
+        this._resizeUndo = UndoManager.StartBatch('drag resizing');
+        this._snapPt = { x: e.pageX, y: e.pageY };
+    };
+
+    @action
+    onResize = (e: any): boolean => {
+        const dragHdl = this._resizeHdlId.split(' ')[1];
+        const thisPt = DragManager.snapDrag(e, -this._offset.x, -this._offset.y, this._offset.x, this._offset.y);
+
+        const { scale, refPt, transl } = this.getResizeVals(thisPt, dragHdl);
+        !this._interactionLock && runInAction(async () => {   // resize selected docs if we're not in the middle of a resize (ie, throttle input events to frame rate)
+        this._interactionLock = true;
+        const scaleAspect = {x: scale.x, y: scale.y};
+        this.resizeView(refPt, scaleAspect, transl); // prettier-ignore
+        await new Promise<any>(res => { setTimeout(() => { res(this._interactionLock = undefined)})});
+        }); // prettier-ignore
+        return true;
     }
 
+    @action
+    onDrag = (e: any): boolean => {
+        this._pageX = e.pageX - (this._startPos?.x ?? 0);
+        this._pageY = e.pageY - (this._startPos?.y ?? 0);
+        return true;
+    }
+
+    getResizeVals = (thisPt: { x: number; y: number }, dragHdl: string) => {
+        const [w, h] = [this._initDimensions.width, this._initDimensions.height];
+        const [moveX, moveY] = [thisPt.x - this._snapPt.x, thisPt.y - this._snapPt.y];
+        let vals: {scale: {x: number, y: number}, refPt: [number, number], transl: {x: number, y: number}};
+        switch (dragHdl) {
+            case 'topLeft':    vals = { scale: { x: 1 - moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.r, this.bounds.b], transl: {x: moveX, y: -moveY } }; break;
+            case 'topRight':   vals = { scale: { x: 1 + moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.l, this.bounds.b], transl: {x: 0, y: -moveY } }; break;
+            case 'top':        vals = { scale: { x: 1,             y: 1 -moveY / h },  refPt: [this.bounds.l, this.bounds.b], transl: {x: 0, y: moveY } }; break;
+            case 'left':       vals = { scale: { x: 1 - moveX / w, y: 1 },             refPt: [this.bounds.r, this.bounds.t], transl: {x: moveX, y: 0 } }; break;
+            case 'bottomLeft': vals = { scale: { x: 1 - moveX / w, y: 1 + moveY / h }, refPt: [this.bounds.r, this.bounds.t], transl: {x: moveX, y: moveY } }; break;
+            case 'right':      vals = { scale: { x: 1 + moveX / w, y: 1 },             refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
+            case 'bottomRight':vals = { scale: { x: 1 + moveX / w, y: 1 + moveY / h }, refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
+            case 'bottom':     vals = { scale: { x: 1,             y: 1 + moveY / h }, refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
+            default:           vals = { scale: { x: 1,             y: 1 },             refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
+        } // prettier-ignore
+        return vals;
+    };
+
+    resizeView = (refPt: number[], scale: { x: number; y: number }, translation: {x: number, y: number}) => {
+        const refCent = [refPt[0], refPt[1]] // fixed reference point for resize (ie, a point that doesn't move)
+        if (this._initDimensions.x === undefined) this._initDimensions.x = this._pageX;
+        if (this._initDimensions.y === undefined) this._initDimensions.y = this._pageY;
+        const {height, width, x, y} = this._initDimensions;
+
+        console.log(scale.x)
+
+        this._menuDimensions.width = Math.max(100, scale.x * width);
+        this._menuDimensions.height = Math.max(100, scale.y * height);
+        this._pageX = x + translation.x;
+        this._pageY = y + translation.y;
+    };
+
     async getIcon(doc: Doc) {
         const docView = DocumentView.getDocumentView(doc);
         if (docView) {
@@ -470,6 +558,23 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
+    get resizePanes(){
+        const ref = this._ref?.getBoundingClientRect();
+        const height: number = ref?.height ?? 0;
+        const width: number = ref?.width ?? 0;
+
+        return [
+            <div className='docCreatorMenu-resizer top' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: -7}}/>, 
+            <div className='docCreatorMenu-resizer right' onPointerDown={this.onResizePointerDown} style={{height: height, left: width - 3, top: 0}}/>, 
+            <div className='docCreatorMenu-resizer bottom' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: height - 3}}/>, 
+            <div className='docCreatorMenu-resizer left' onPointerDown={this.onResizePointerDown} style={{height: height, left: -7, top: 0}}/>,
+            <div className='docCreatorMenu-resizer topRight' onPointerDown={this.onResizePointerDown} style={{left: width, top: -7, cursor: 'nesw-resize'}}/>,
+            <div className='docCreatorMenu-resizer topLeft' onPointerDown={this.onResizePointerDown} style={{left: -7, top: -7, cursor: 'nwse-resize'}}/>,
+            <div className='docCreatorMenu-resizer bottomRight' onPointerDown={this.onResizePointerDown} style={{left: width, top: height, cursor: 'nwse-resize'}}/>,
+            <div className='docCreatorMenu-resizer bottomLeft' onPointerDown={this.onResizePointerDown} style={{left: -7, top: height, cursor: 'nesw-resize'}}/>
+        ]; //prettier-ignore
+    }
+
     render() {
         const topButton = (icon: string, opt: string, func: Function, tag: string) => {
             return (
@@ -526,11 +631,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         display: '',
                         left: this._pageX,
                         top: this._pageY,
-                        width: 300,
-                        height: 400,
+                        width: this._menuDimensions.width,
+                        height: this._menuDimensions.height,
                         background: SnappingManager.userBackgroundColor,
                         color: SnappingManager.userColor,
                     }}>
+                        {this.resizePanes}
                         <div 
                         className='docCreatorMenu-menu'
                         onPointerDown={e =>
@@ -542,6 +648,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                     this._startPos = {x: 0, y: 0};
                                     this._startPos.x = e.pageX - (this._ref?.getBoundingClientRect().left ?? 0);
                                     this._startPos.y = e.pageY - (this._ref?.getBoundingClientRect().top ?? 0);
+                                    document.addEventListener('pointermove', this.onDrag);
                                     return true;
                                 },
                                 emptyFunction,
@@ -550,8 +657,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 }, 'drag menu')
                             )
                         }
-                        onPointerMove={e => this.onPointerMove(e)}
-                        onPointerUp={() => this._dragging = false}
                         >
                             <div className='docCreatorMenu-top-buttons-container'>
                                 {topButton('table-cells', 'templates', onPreviewSelected, 'left')}
-- 
cgit v1.2.3-70-g09d2


From 598bc954df87bc6d5875c404cefc6f26b51f6afe Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 30 Jul 2024 13:05:09 -0400
Subject: resizing 90%

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss       | 15 ++++++++-------
 src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 20 ++++++++++----------
 2 files changed, 18 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 87f493291..ac60ddb3e 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -246,9 +246,9 @@
     }
 
     &.topRight, &.topLeft, &.bottomRight, &.bottomLeft {
-        height: 10px;
-        width: 10px;
-        background-color: blue;
+        height: 15px;
+        width: 15px;
+        background-color: none;
     }
 }
 
@@ -504,10 +504,11 @@
         flex: 0 0 auto;
         overflow: scroll;
         display: grid;
-        width: auto;
-        height: auto;
-        max-width: 240;
-        max-height: 240;
+        width: 100%;
+        aspect-ratio: 1.23;
+        //height: auto;
+        // max-width: 240;
+        // max-height: 240;
         border: 1px solid rgb(180, 180, 180);
         border-radius: 5px;
         background-color: rgb(34, 34, 37);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index bc04f9a69..ef53dde8e 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -66,7 +66,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _resizing: boolean = false;
     @observable _offset: {x: number, y: number} = {x: 0, y: 0};
     @observable _resizeUndo: UndoManager.Batch | undefined = undefined;
-    @observable _initDimensions: {width: number, height: number, x: number, y: number} = {width: 300, height: 400, x: 0, y: 0};
+    @observable _initDimensions: {width: number, height: number, x?: number, y?: number} = {width: 300, height: 400, x: undefined, y: undefined};
     @observable _menuDimensions: {width: number, height: number} = {width: 300, height: 400};
 
     constructor(props: any) {
@@ -228,6 +228,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     onDrag = (e: any): boolean => {
         this._pageX = e.pageX - (this._startPos?.x ?? 0);
         this._pageY = e.pageY - (this._startPos?.y ?? 0);
+        this._initDimensions.x = this._pageX;
+        this._initDimensions.y = this._pageY;
         return true;
     }
 
@@ -236,11 +238,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         const [moveX, moveY] = [thisPt.x - this._snapPt.x, thisPt.y - this._snapPt.y];
         let vals: {scale: {x: number, y: number}, refPt: [number, number], transl: {x: number, y: number}};
         switch (dragHdl) {
-            case 'topLeft':    vals = { scale: { x: 1 - moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.r, this.bounds.b], transl: {x: moveX, y: -moveY } }; break;
-            case 'topRight':   vals = { scale: { x: 1 + moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.l, this.bounds.b], transl: {x: 0, y: -moveY } }; break;
+            case 'topLeft':    vals = { scale: { x: 1 - moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.r, this.bounds.b], transl: {x: moveX, y: moveY } }; break;
+            case 'topRight':   vals = { scale: { x: 1 + moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.l, this.bounds.b], transl: {x: 0, y: moveY } }; break;
             case 'top':        vals = { scale: { x: 1,             y: 1 -moveY / h },  refPt: [this.bounds.l, this.bounds.b], transl: {x: 0, y: moveY } }; break;
             case 'left':       vals = { scale: { x: 1 - moveX / w, y: 1 },             refPt: [this.bounds.r, this.bounds.t], transl: {x: moveX, y: 0 } }; break;
-            case 'bottomLeft': vals = { scale: { x: 1 - moveX / w, y: 1 + moveY / h }, refPt: [this.bounds.r, this.bounds.t], transl: {x: moveX, y: moveY } }; break;
+            case 'bottomLeft': vals = { scale: { x: 1 - moveX / w, y: 1 + moveY / h }, refPt: [this.bounds.r, this.bounds.t], transl: {x: moveX, y: 0 } }; break;
             case 'right':      vals = { scale: { x: 1 + moveX / w, y: 1 },             refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
             case 'bottomRight':vals = { scale: { x: 1 + moveX / w, y: 1 + moveY / h }, refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
             case 'bottom':     vals = { scale: { x: 1,             y: 1 + moveY / h }, refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
@@ -255,8 +257,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         if (this._initDimensions.y === undefined) this._initDimensions.y = this._pageY;
         const {height, width, x, y} = this._initDimensions;
 
-        console.log(scale.x)
-
         this._menuDimensions.width = Math.max(100, scale.x * width);
         this._menuDimensions.height = Math.max(100, scale.y * height);
         this._pageX = x + translation.x;
@@ -568,10 +568,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             <div className='docCreatorMenu-resizer right' onPointerDown={this.onResizePointerDown} style={{height: height, left: width - 3, top: 0}}/>, 
             <div className='docCreatorMenu-resizer bottom' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: height - 3}}/>, 
             <div className='docCreatorMenu-resizer left' onPointerDown={this.onResizePointerDown} style={{height: height, left: -7, top: 0}}/>,
-            <div className='docCreatorMenu-resizer topRight' onPointerDown={this.onResizePointerDown} style={{left: width, top: -7, cursor: 'nesw-resize'}}/>,
-            <div className='docCreatorMenu-resizer topLeft' onPointerDown={this.onResizePointerDown} style={{left: -7, top: -7, cursor: 'nwse-resize'}}/>,
-            <div className='docCreatorMenu-resizer bottomRight' onPointerDown={this.onResizePointerDown} style={{left: width, top: height, cursor: 'nwse-resize'}}/>,
-            <div className='docCreatorMenu-resizer bottomLeft' onPointerDown={this.onResizePointerDown} style={{left: -7, top: height, cursor: 'nesw-resize'}}/>
+            <div className='docCreatorMenu-resizer topRight' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: -10, cursor: 'nesw-resize'}}/>,
+            <div className='docCreatorMenu-resizer topLeft' onPointerDown={this.onResizePointerDown} style={{left: -10, top: -10, cursor: 'nwse-resize'}}/>,
+            <div className='docCreatorMenu-resizer bottomRight' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: height - 5, cursor: 'nwse-resize'}}/>,
+            <div className='docCreatorMenu-resizer bottomLeft' onPointerDown={this.onResizePointerDown} style={{left: -10, top: height - 5, cursor: 'nesw-resize'}}/>
         ]; //prettier-ignore
     }
 
-- 
cgit v1.2.3-70-g09d2


From 107c389f61df36b464ae3ec73e2f553a78f3e64a Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 30 Jul 2024 13:39:46 -0400
Subject: layout preview sizing

---
 src/client/views/nodes/DataVizBox/DocCreatorMenu.scss | 4 ++--
 src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx  | 5 +----
 src/client/views/nodes/LabelBox.tsx                   | 4 ++--
 3 files changed, 5 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index ac60ddb3e..81fd3386c 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -222,7 +222,7 @@
 
 .docCreatorMenu-option-divider {
     border-top: 1px solid rgb(180, 180, 180);
-    width: 225px;
+    width: 80%;
     margin-top: 10px;
     margin-bottom: 10px;
 }
@@ -505,7 +505,7 @@
         overflow: scroll;
         display: grid;
         width: 100%;
-        aspect-ratio: 1.23;
+        aspect-ratio: 1;
         //height: auto;
         // max-width: 240;
         // max-height: 240;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index ef53dde8e..e5288f4f8 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -16,10 +16,7 @@ import './DocCreatorMenu.scss';
 import { Id } from '../../../../fields/FieldSymbols';
 import { Colors, IconButton, Size } from 'browndash-components';
 import { MakeTemplate } from '../../../util/DropConverter';
-import { threadId } from 'worker_threads';
-import { ideahub } from 'googleapis/build/src/apis/ideahub';
 import { DragManager } from '../../../util/DragManager';
-import { DateField } from '../../../../fields/DateField';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -509,7 +506,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                     </button>
                 </div>
                 {this._layout.type ? this.layoutConfigOptions: null}
-                {this._layoutPreview ? this.layoutPreviewContents(225) : null}
+                {this._layoutPreview ? this.layoutPreviewContents(this._menuDimensions.width * .75) : null}
                 {selectionBox(60, 20, 'repeat', undefined, repeatOptions.map(num => <option onPointerDown={e => this._layout.repeat = num}>{`${num}x`}</option>))}
                 <hr className='docCreatorMenu-option-divider'/>
                 <div className='docCreatorMenu-general-options-container'>
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index d33d12603..1f5fa8e14 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -2,7 +2,7 @@ import { Property } from 'csstype';
 import { action, computed, makeObservable, trace } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import * as textfit from 'textfit';
+//import * as textfit from 'textfit';
 import { Field, FieldType } from '../../../fields/Doc';
 import { BoolCast, NumCast, StrCast } from '../../../fields/Types';
 import { DocumentType } from '../../documents/DocumentTypes';
@@ -95,7 +95,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 this._timeout = setTimeout(() => this.fitTextToBox(r));
                 return textfitParams;
             }
-            textfit(r, textfitParams);
+            //textfit(r, textfitParams);
         }
         return textfitParams;
     };
-- 
cgit v1.2.3-70-g09d2


From fb4b4658f39c2a845174372a8fd814c49bf26d7c Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 30 Jul 2024 14:00:12 -0400
Subject: template preview columns update with resizing

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  2 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      |  3 +-
 src/fields/Doc.ts                                  | 64 ++++++++++++++++++----
 3 files changed, 55 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 81fd3386c..b3bacb13c 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -259,7 +259,7 @@
 
 .docCreatorMenu-preview-container {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, 140px);
     grid-template-rows: 140px;
     grid-auto-rows: 141px;
     overflow-y: scroll;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index e5288f4f8..34bec3b88 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -296,7 +296,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
         return (
-            <div className='docCreatorMenu-preview-container'>
+            <div className='docCreatorMenu-preview-container'
+                style={{gridTemplateColumns: `repeat(${Math.floor((this._menuDimensions.width - 10) / 140)}, 140px)`}}>
                 {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
                     if (renderedTemplates.includes(info.doc)) return undefined;
                     renderedTemplates.push(info.doc);
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 2792f3aba..5a4573a4f 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-namespace */
 /* eslint-disable default-param-last */
 /* eslint-disable no-use-before-define */
 import { action, computed, makeObservable, observable, ObservableMap, ObservableSet, runInAction } from 'mobx';
@@ -38,7 +36,7 @@ export namespace Field {
      * @param showComputedValue whether copmuted function should display its value instead of its function
      * @returns string representation of the field
      */
-    export function toKeyValueString(doc: Doc, key: string, showComputedValue?: boolean): string {
+    export function toKeyValueString(doc: Doc, key: string, showComputedValue?: boolean, schemaCell?: boolean): string {
         const isOnDelegate = !Doc.IsDataProto(doc) && Object.keys(doc).includes(key.replace(/^_/, ''));
         const cfield = ComputedField.WithoutComputed(() => FieldValue(doc[key]));
         const valFunc = (field: FieldType): string => {
@@ -49,7 +47,7 @@ export namespace Field {
                       ? `:=${field.script.originalScript.replace(/dashCallChat\(_setCacheResult_, this, `(.*)`\)/, '(($1))')}`
                       : field instanceof ScriptField
                         ? `$=${field.script.originalScript}`
-                        : Field.toScriptString(field);
+                        : Field.toScriptString(field, schemaCell);
             const resStr = (res + '').replace(/^`(.*)`$/, '$1');
             return typeof field === 'string' && (+resStr).toString() !== resStr && !Array.from('+-*/.').some(k => Array.from(resStr).includes(k))
                 ? resStr
@@ -59,10 +57,10 @@ export namespace Field {
         };
         return !Field.IsField(cfield) ? (key.startsWith('_') ? '=' : '') : (isOnDelegate ? '=' : '') + valFunc(cfield);
     }
-    export function toScriptString(field: FieldType) {
+    export function toScriptString(field: FieldType, schemaCell?: boolean) {
         switch (typeof field) {
             case 'string': if (field.startsWith('{"')) return `'${field}'`; // bcz: hack ... want to quote the string the right way. if there are nested "'s, then use ' instead of ".  In this case, test for the start of a JSON string of the format {"property": ... } and use outer 's instead of "s
-                           return !field.includes('`') ? `\`${field}\`` : `"${field}"`;
+                           return !field.includes('`') ? schemaCell ? `${field}` : `\`${field}\`` : `"${field}"`;
             case 'number':
             case 'boolean':return String(field);
             default:       return field?.[ToScriptString]?.() ?? 'null';
@@ -176,6 +174,49 @@ export function updateCachedAcls(doc: Doc) {
     return undefined;
 }
 
+export function ActiveInkPen(): Doc { return Doc.UserDoc(); } // prettier-ignore
+export function ActiveInkColor(): string { return StrCast(ActiveInkPen()?.activeInkColor, 'black'); } // prettier-ignore
+export function ActiveFillColor(): string { return StrCast(ActiveInkPen()?.activeFillColor, ''); } // prettier-ignore
+export function ActiveIsInkMask(): boolean { return BoolCast(ActiveInkPen()?.activeIsInkMask, false); } // prettier-ignore
+export function ActiveInkHideTextLabels(): boolean { return BoolCast(ActiveInkPen().activeInkHideTextLabels, false); } // prettier-ignore
+export function ActiveArrowStart(): string { return StrCast(ActiveInkPen()?.activeArrowStart, ''); } // prettier-ignore
+export function ActiveArrowEnd(): string { return StrCast(ActiveInkPen()?.activeArrowEnd, ''); } // prettier-ignore
+export function ActiveArrowScale(): number { return NumCast(ActiveInkPen()?.activeArrowScale, 1); } // prettier-ignore
+export function ActiveDash(): string { return StrCast(ActiveInkPen()?.activeDash, '0'); } // prettier-ignore
+export function ActiveInkWidth(): number { return Number(ActiveInkPen()?.activeInkWidth); } // prettier-ignore
+export function ActiveInkBezierApprox(): string { return StrCast(ActiveInkPen()?.activeInkBezier); } // prettier-ignore
+
+export function SetActiveInkWidth(width: string): void {
+    !isNaN(parseInt(width)) && ActiveInkPen() && (ActiveInkPen().activeInkWidth = width);
+}
+export function SetActiveBezierApprox(bezier: string): void {
+    ActiveInkPen() && (ActiveInkPen().activeInkBezier = isNaN(parseInt(bezier)) ? '' : bezier);
+}
+export function SetActiveInkColor(value: string) {
+    ActiveInkPen() && (ActiveInkPen().activeInkColor = value);
+}
+export function SetActiveIsInkMask(value: boolean) {
+    ActiveInkPen() && (ActiveInkPen().activeIsInkMask = value);
+}
+export function SetActiveInkHideTextLabels(value: boolean) {
+    ActiveInkPen() && (ActiveInkPen().activeInkHideTextLabels = value);
+}
+export function SetActiveFillColor(value: string) {
+    ActiveInkPen() && (ActiveInkPen().activeFillColor = value);
+}
+export function SetActiveArrowStart(value: string) {
+    ActiveInkPen() && (ActiveInkPen().activeArrowStart = value);
+}
+export function SetActiveArrowEnd(value: string) {
+    ActiveInkPen() && (ActiveInkPen().activeArrowEnd = value);
+}
+export function SetActiveArrowScale(value: number) {
+    ActiveInkPen() && (ActiveInkPen().activeArrowScale = value);
+}
+export function SetActiveDash(dash: string): void {
+    !isNaN(parseInt(dash)) && ActiveInkPen() && (ActiveInkPen().activeDash = dash);
+}
+
 @scriptingGlobal
 @Deserializable('Doc', updateCachedAcls, ['id'])
 export class Doc extends RefField {
@@ -212,7 +253,7 @@ export class Doc extends RefField {
     public static DeleteLink: (link: Doc) => void;
     public static Links: (link: Doc | undefined) => Doc[];
     public static getOppositeAnchor: (linkDoc: Doc, anchor: Doc) => Doc | undefined;
-    // KeyValue SetField
+    // KeyValueBox SetField (defined there)
     public static SetField: (doc: Doc, key: string, value: string, forceOnDelegate?: boolean, setResult?: (value: FieldResult) => void) => boolean;
     // UserDoc "API"
     public static get MySharedDocs()          { return DocCast(Doc.UserDoc().mySharedDocs); } // prettier-ignore
@@ -1044,12 +1085,13 @@ export namespace Doc {
             const target = Doc.MakeDelegate(proto);
             const targetKey = StrCast(templateDoc.layout_fieldKey, 'layout');
             const applied = ApplyTemplateTo(templateDoc, target, targetKey, templateDoc.title + '(...' + _applyCount++ + ')');
-            target.layout_fieldKey = targetKey;
+            target.layout_fieldKey = targetKey; //this and line above
             applied && (Doc.GetProto(applied).type = templateDoc.type);
             return applied;
         }
         return undefined;
     }
+
     export function ApplyTemplateTo(templateDoc: Doc, target: Doc, targetKey: string, titleTarget: string | undefined) {
         if (!Doc.AreProtosEqual(target[targetKey] as Doc, templateDoc)) {
             if (target.resolvedDataDoc) {
@@ -1256,12 +1298,10 @@ export namespace Doc {
         document.removeEventListener('pointerdown', linkFollowUnhighlight);
         document.addEventListener('pointerdown', linkFollowUnhighlight);
         if (UnhighlightTimer) clearTimeout(UnhighlightTimer);
-        const presTransition = Number(presentationEffect?.presentation_transition);
-        const duration = isNaN(presTransition) ? 5000 : presTransition;
         UnhighlightTimer = window.setTimeout(() => {
             linkFollowUnhighlight();
             UnhighlightTimer = 0;
-        }, duration);
+        }, 5000);
     }
 
     export const highlightedDocs = new ObservableSet<Doc>();
@@ -1314,7 +1354,7 @@ export namespace Doc {
         doc._lockedPosition = !doc._lockedPosition;
         doc._pointerEvents = doc._lockedPosition ? 'none' : undefined;
     }
-
+    
     export function deiconifyView(doc: Doc) {
         StrCast(doc.layout_fieldKey).split('_')[1] === 'icon' && setNativeView(doc);
     }
-- 
cgit v1.2.3-70-g09d2


From 951d6a8681e9be9068c8a0f8fce659938ab9ed80 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 31 Jul 2024 03:01:55 -0400
Subject: basic template generation work

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 35 +++++++++++++++++++++-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 13 +++++++-
 2 files changed, 46 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index e943dd2e3..f25602fd5 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -34,13 +34,14 @@ import { PieChart } from './components/PieChart';
 import { TableBox } from './components/TableBox';
 import { LinkManager } from '../../../util/LinkManager';
 import { DataVizTemplateInfo, DataVizTemplateLayout, DocCreatorMenu, LayoutType } from './DocCreatorMenu';
-import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
+import { CollectionFreeFormView, MarqueeView } from '../../collections/collectionFreeForm';
 import { PrefetchProxy } from '../../../../fields/Proxy';
 import { AclAdmin, AclAugment, AclEdit } from '../../../../fields/DocSymbols';
 import { template } from 'lodash';
 import { data } from 'jquery';
 import { listSpec } from '../../../../fields/Schema';
 import { ObjectField } from '../../../../fields/ObjectField';
+import { Id } from '../../../../fields/FieldSymbols';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -566,6 +567,38 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this.applyLayout(templateInfo, docs);
     }
 
+    createBasicTemplates = (colsToLayout: {width: number, height: number, x: number, y: number, title: string}[]) => {
+        const mainCollection = this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+        const docTools: Doc[] = DocListCast(DocListCast(Doc.MyTools?.data)[0]?.data);
+        console.log(docTools.map(doc => doc.title))
+        const index = docTools.map(doc => doc.title).indexOf('Col');
+        const template: Doc | undefined = DocUtils.copyDragFactory(Cast(docTools[index]?.dragFactory, Doc, null));
+        if (!template) return;
+
+        //const template = new CollectionFreeFormView({});
+        const fields: Doc[] = colsToLayout.map(layout => {
+            const field = new Doc();
+            field.x = layout.x;
+            field.y = layout.y;
+            field._width = layout.width;
+            field._height = layout.height;
+            field.title = layout.title;
+            template.data = 'hey'//DocListCast(template.data).map(doc => `idToDoc("${doc[Id]}")`).push(`idToDoc("${field[Id]}")`);
+            return field;
+        });
+
+        const fieldLiterals: string[] = fields.map(field => `idToDoc("${field[Id]}")`);
+
+        template.data = fieldLiterals[0];
+
+        template.x = 400;
+        template.y = 400;
+        template._width = 500;
+        template._height = 500;
+
+        mainCollection.addDocument(template);
+    }
+
     /**
      * creates a new dataviz document filter from this one
      *      it appears to the right of this document, with the
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 34bec3b88..7993cab28 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -311,7 +311,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
                     </div>
                 )})}
-                <div className='docCreatorMenu-preview-window empty'>
+                <div className='docCreatorMenu-preview-window empty'
+                onPointerDown={e => this.setUpButtonClick(e, this.basicTemplateTest)}
+                >
                     <FontAwesomeIcon icon='plus' color='rgb(160, 160, 160)'/>
                 </div>
             </div>
@@ -543,6 +545,15 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         );
     }
 
+    basicTemplateTest = () => {
+        const temps: {width: number; height: number; x: number; y: number; title: string}[] = [
+            {width: 200, height: 50, x: -100, y: -200, title: 'title'},
+            {width: 300, height: 300, x: -150, y: -100, title: 'image'},
+            {width: 200, height: 50, x: -100, y: -200, title: 'description'},
+        ]
+        this._dataViz?.createBasicTemplates(temps);
+    }
+
     get renderSelectedViewType(){
         switch (this._menuContent){
             case 'templates':
-- 
cgit v1.2.3-70-g09d2


From 99b879956b67dc246f1ba48759a5550a94a5813d Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 31 Jul 2024 12:46:55 -0400
Subject: with old code for basic templates

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx | 34 +++++++++++-------------
 1 file changed, 16 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index f25602fd5..43cfe5bba 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -12,7 +12,7 @@ import { InkTool } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
 import { Cast, CsvCast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
 import { CsvField } from '../../../../fields/URLField';
-import { GetEffectiveAcl, TraceMobx } from '../../../../fields/util';
+import { GetEffectiveAcl, TraceMobx, inheritParentAcls } from '../../../../fields/util';
 import { DocUtils } from '../../../documents/DocUtils';
 import { DocumentType } from '../../../documents/DocumentTypes';
 import { Docs } from '../../../documents/Documents';
@@ -569,32 +569,30 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     createBasicTemplates = (colsToLayout: {width: number, height: number, x: number, y: number, title: string}[]) => {
         const mainCollection = this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        const docTools: Doc[] = DocListCast(DocListCast(Doc.MyTools?.data)[0]?.data);
-        console.log(docTools.map(doc => doc.title))
-        const index = docTools.map(doc => doc.title).indexOf('Col');
-        const template: Doc | undefined = DocUtils.copyDragFactory(Cast(docTools[index]?.dragFactory, Doc, null));
-        if (!template) return;
+        // const docTools: Doc[] = DocListCast(DocListCast(Doc.MyTools?.data)[0]?.data);
+        // const index = docTools.map(doc => doc.title).indexOf('Col');
+        // const template: Doc | undefined = DocUtils.copyDragFactory(Cast(docTools[index]?.dragFactory, Doc, null));
+        //if (!template) return;
 
         //const template = new CollectionFreeFormView({});
         const fields: Doc[] = colsToLayout.map(layout => {
-            const field = new Doc();
-            field.x = layout.x;
-            field.y = layout.y;
-            field._width = layout.width;
-            field._height = layout.height;
-            field.title = layout.title;
-            template.data = 'hey'//DocListCast(template.data).map(doc => `idToDoc("${doc[Id]}")`).push(`idToDoc("${field[Id]}")`);
+            const field = Docs.Create.TextDocument('', { _height: layout.height, _width: layout.width, title: layout.title, x: layout.x, y: layout.y });
+            // Doc.SetContainer(field, template);
+            // inheritParentAcls(template, field, true);
+            //template.data = 'hey'//DocListCast(template.data).map(doc => `idToDoc("${doc[Id]}")`).push(`idToDoc("${field[Id]}")`);
             return field;
         });
 
+        const template = Docs.Create.FreeformDocument(fields, { _height: 500, _width: 500, title: 'template', x: 400, y: 400 })
+
         const fieldLiterals: string[] = fields.map(field => `idToDoc("${field[Id]}")`);
 
-        template.data = fieldLiterals[0];
+        //template.data = fieldLiterals[0];
 
-        template.x = 400;
-        template.y = 400;
-        template._width = 500;
-        template._height = 500;
+        // template.x = 400;
+        // template.y = 400;
+        // template._width = 500;
+        // template._height = 500;
 
         mainCollection.addDocument(template);
     }
-- 
cgit v1.2.3-70-g09d2


From b42bfb6cb8d4d2355fae4fe628c6bf5cca4b084a Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 31 Jul 2024 12:47:23 -0400
Subject: old code removed

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx | 17 -----------------
 1 file changed, 17 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 43cfe5bba..1994f1b01 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -569,31 +569,14 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     createBasicTemplates = (colsToLayout: {width: number, height: number, x: number, y: number, title: string}[]) => {
         const mainCollection = this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        // const docTools: Doc[] = DocListCast(DocListCast(Doc.MyTools?.data)[0]?.data);
-        // const index = docTools.map(doc => doc.title).indexOf('Col');
-        // const template: Doc | undefined = DocUtils.copyDragFactory(Cast(docTools[index]?.dragFactory, Doc, null));
-        //if (!template) return;
 
-        //const template = new CollectionFreeFormView({});
         const fields: Doc[] = colsToLayout.map(layout => {
             const field = Docs.Create.TextDocument('', { _height: layout.height, _width: layout.width, title: layout.title, x: layout.x, y: layout.y });
-            // Doc.SetContainer(field, template);
-            // inheritParentAcls(template, field, true);
-            //template.data = 'hey'//DocListCast(template.data).map(doc => `idToDoc("${doc[Id]}")`).push(`idToDoc("${field[Id]}")`);
             return field;
         });
 
         const template = Docs.Create.FreeformDocument(fields, { _height: 500, _width: 500, title: 'template', x: 400, y: 400 })
 
-        const fieldLiterals: string[] = fields.map(field => `idToDoc("${field[Id]}")`);
-
-        //template.data = fieldLiterals[0];
-
-        // template.x = 400;
-        // template.y = 400;
-        // template._width = 500;
-        // template._height = 500;
-
         mainCollection.addDocument(template);
     }
 
-- 
cgit v1.2.3-70-g09d2


From 4cf3a327b7e69bf0559dda846d49b6ad8d4673c7 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 31 Jul 2024 18:12:30 -0400
Subject: GPT template generation

---
 src/client/apis/gpt/GPT.ts                         |  2 ++
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 34 ++++++++++++++++++++++
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      |  3 +-
 3 files changed, 38 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 05007960d..184173784 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -12,6 +12,7 @@ enum GPTCallType {
     DESCRIBE = 'describe',
     MERMAID = 'mermaid',
     DATA = 'data',
+    TEMPLATE = "template"
 }
 
 type GPTCallOpts = {
@@ -53,6 +54,7 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
         temp: 0,
         prompt: 'List unique differences between the content of the UserAnswer and Rubric. Before each difference, label it and provide any additional information the UserAnswer missed and explain it in second person without separating it into UserAnswer and Rubric content and additional information. If there are no differences, say correct',
     },
+    template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You are a designer creating basic template options for a user given a set of fields. Your only job is adding blank rectangles to a canvas, one for each field. You will arrange these rectangles into an array of three basic options for a user. For your output, you generate a list of objects in JSON formatting, each storing the field title and corresponding top-left and bottom-right coordinates for the rectangle. The units for your coordinates are -1 to 1 on each axis. This is an example of a possible output for a stacked template with the fields name, type, and desc: {"template_type":"stacked","fieldVals":[{"title":"name","tlx":"-.7","tly":"-.9","brx":".7","bry":"-.7"},{"title":"type","tlx":"-.9","tly":"-.4","brx":".9","bry":"0"},{"title":"desc","tlx":"-.9","tly":".1","brx":".9","bry":".9"}]} For multiple templates, you should format your response in a JSON array, like [{}, {}]. Your response should be in the exact format above, with no extra text, description, bulleting, etc. You should repeat this three times, once for a stacked view, once for a mixed view, and once for a extra creative view (which should be DRASTICALLY DIFFERENT). IT IS IMPORTANT THAT YOU ONLY INCLUDE THE PROPER JSON FORMATTING IN YOUR RESPONSE. IT IS ALSO IMPORTANT THAT NO RECTANGLES OVERLAP'}    
 };
 
 let lastCall = '';
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 1994f1b01..9b7fb4320 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -42,6 +42,7 @@ import { data } from 'jquery';
 import { listSpec } from '../../../../fields/Schema';
 import { ObjectField } from '../../../../fields/ObjectField';
 import { Id } from '../../../../fields/FieldSymbols';
+import { GPTCallType, gptAPICall } from '../../../apis/gpt/GPT';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -567,6 +568,39 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this.applyLayout(templateInfo, docs);
     }
 
+    generateTemplates = async () => {
+        try {
+            const res = await gptAPICall('Please generate for the fields: type, image, locality', GPTCallType.TEMPLATE);
+
+            if (res) {
+                const templates: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[] = JSON.parse(res);
+                console.log(templates);
+                this.createGeneratedTemplates(templates, 500, 500);
+                //console.log(res);
+            }
+        } catch (err) {
+            console.error(err);
+        }
+
+    }
+
+    createGeneratedTemplates = (layouts: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[], tempWidth: number, tempHeight: number) => { 
+        const mainCollection = this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+
+        layouts.forEach(layout => {
+            const fields: Doc[] = layout.fieldVals.map(field => {
+                const left: number = Number(field.tlx) * tempWidth / 2; const top: number = Number(field.tly) * tempHeight / 2; //prettier-ignore
+                const right: number = Number(field.brx) * tempWidth / 2; const bottom: number = Number(field.bry) * tempHeight / 2; //prettier-ignore
+                const height = bottom - top; const width = right - left; //prettier-ignore
+                const doc = Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top });
+                return doc;
+            });
+
+            const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 400, y: 400 });
+            mainCollection.addDocument(template);
+        });
+    }
+
     createBasicTemplates = (colsToLayout: {width: number, height: number, x: number, y: number, title: string}[]) => {
         const mainCollection = this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 7993cab28..411257ff7 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -551,7 +551,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             {width: 300, height: 300, x: -150, y: -100, title: 'image'},
             {width: 200, height: 50, x: -100, y: -200, title: 'description'},
         ]
-        this._dataViz?.createBasicTemplates(temps);
+        this._dataViz?.generateTemplates();
+        //this._dataViz?.createBasicTemplates(temps);
     }
 
     get renderSelectedViewType(){
-- 
cgit v1.2.3-70-g09d2


From 9119b9f08f62bb5228206487b047d6e1e75d5e9e Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 1 Aug 2024 14:37:35 -0400
Subject: work on template generation with GPT

---
 src/client/apis/gpt/GPT.ts                       | 2 +-
 src/client/views/nodes/DataVizBox/DataVizBox.tsx | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 184173784..8eb7151b4 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -54,7 +54,7 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
         temp: 0,
         prompt: 'List unique differences between the content of the UserAnswer and Rubric. Before each difference, label it and provide any additional information the UserAnswer missed and explain it in second person without separating it into UserAnswer and Rubric content and additional information. If there are no differences, say correct',
     },
-    template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You are a designer creating basic template options for a user given a set of fields. Your only job is adding blank rectangles to a canvas, one for each field. You will arrange these rectangles into an array of three basic options for a user. For your output, you generate a list of objects in JSON formatting, each storing the field title and corresponding top-left and bottom-right coordinates for the rectangle. The units for your coordinates are -1 to 1 on each axis. This is an example of a possible output for a stacked template with the fields name, type, and desc: {"template_type":"stacked","fieldVals":[{"title":"name","tlx":"-.7","tly":"-.9","brx":".7","bry":"-.7"},{"title":"type","tlx":"-.9","tly":"-.4","brx":".9","bry":"0"},{"title":"desc","tlx":"-.9","tly":".1","brx":".9","bry":".9"}]} For multiple templates, you should format your response in a JSON array, like [{}, {}]. Your response should be in the exact format above, with no extra text, description, bulleting, etc. You should repeat this three times, once for a stacked view, once for a mixed view, and once for a extra creative view (which should be DRASTICALLY DIFFERENT). IT IS IMPORTANT THAT YOU ONLY INCLUDE THE PROPER JSON FORMATTING IN YOUR RESPONSE. IT IS ALSO IMPORTANT THAT NO RECTANGLES OVERLAP'}    
+    template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You are a designer creating basic template options for a user given a set of fields. Your only job is adding blank rectangles to a canvas, one for each field. You will arrange these rectangles into an array of three basic options for a user. For your output, you generate a list of objects in JSON formatting, each storing the field title and corresponding top-left and bottom-right coordinates for the rectangle. The units for your coordinates are -1 to 1 on each axis. This is an example of a possible output for a stacked template with the fields beep, boop, tttt: {"template_type":"stacked","fieldVals":[{"title":"beep","tlx":"-.7","tly":"-.9","brx":".7","bry":"-.7"},{"title":"boop","tlx":"-.9","tly":"-.4","brx":".9","bry":"0"},{"title":"tttt","tlx":"-.9","tly":".1","brx":".9","bry":".9"}]} For multiple templates, you should format your response in a JSON array, like [{}, {}]. Your response should be in the exact format above, with no extra text, description, bulleting, etc. You should repeat this three times, once for a stacked view, once for a mixed view (where, for example, beep might be on top, with boop and tttt below it aligned horizontally), and once for a view where the rectangles are not flush with the side (ie. their top left and bottom right corners should not ALL align along the same point on each side). If one or more fields are some variation of image (ie. IMG, image, photo, etc.), make that rectangle the central focus (bigger, centered, etc.) AND put its "title" field in $$__$$ (ie, "title":"$$img$$", !!IMPORTANT!!). Fields SHOULD BE IN DIFFERENT ORDERS from template to template (ie. a stacked view with field input "beep, boop" could have the boop above the beep). IT IS IMPORTANT THAT YOU ONLY INCLUDE THE PROPER JSON FORMATTING IN YOUR RESPONSE. IT IS ALSO IMPORTANT THAT NO RECTANGLES OVERLAP'}    
 };
 
 let lastCall = '';
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 9b7fb4320..c5a1da1da 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -570,11 +570,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     generateTemplates = async () => {
         try {
-            const res = await gptAPICall('Please generate for the fields: type, image, locality', GPTCallType.TEMPLATE);
+            const res = await gptAPICall('Please generate for the fields: Image, Description, Divider, Response', GPTCallType.TEMPLATE);
 
             if (res) {
                 const templates: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[] = JSON.parse(res);
-                console.log(templates);
                 this.createGeneratedTemplates(templates, 500, 500);
                 //console.log(res);
             }
@@ -592,7 +591,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 const left: number = Number(field.tlx) * tempWidth / 2; const top: number = Number(field.tly) * tempHeight / 2; //prettier-ignore
                 const right: number = Number(field.brx) * tempWidth / 2; const bottom: number = Number(field.bry) * tempHeight / 2; //prettier-ignore
                 const height = bottom - top; const width = right - left; //prettier-ignore
-                const doc = Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top });
+                const doc = !field.title.includes('$$') ? Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top, _text_fontSize: `${height/2}` }) : Docs.Create.ImageDocument('', { _height: height, _width: 250, title: field.title.replace(/$$/g, ''), x: left, y: top });
                 return doc;
             });
 
-- 
cgit v1.2.3-70-g09d2


From 4949c68f38049da55ceaa3e95ea155f38d6a3748 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 8 Aug 2024 10:38:35 -0400
Subject: UI for GPT templates in doccreator menu

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |  45 -------
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 128 ++++++++++++++++--
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 147 ++++++++++++++++-----
 src/client/views/nodes/ImageBox.tsx                |   1 +
 4 files changed, 228 insertions(+), 93 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index c5a1da1da..a6d3bfa49 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -568,51 +568,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this.applyLayout(templateInfo, docs);
     }
 
-    generateTemplates = async () => {
-        try {
-            const res = await gptAPICall('Please generate for the fields: Image, Description, Divider, Response', GPTCallType.TEMPLATE);
-
-            if (res) {
-                const templates: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[] = JSON.parse(res);
-                this.createGeneratedTemplates(templates, 500, 500);
-                //console.log(res);
-            }
-        } catch (err) {
-            console.error(err);
-        }
-
-    }
-
-    createGeneratedTemplates = (layouts: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[], tempWidth: number, tempHeight: number) => { 
-        const mainCollection = this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-
-        layouts.forEach(layout => {
-            const fields: Doc[] = layout.fieldVals.map(field => {
-                const left: number = Number(field.tlx) * tempWidth / 2; const top: number = Number(field.tly) * tempHeight / 2; //prettier-ignore
-                const right: number = Number(field.brx) * tempWidth / 2; const bottom: number = Number(field.bry) * tempHeight / 2; //prettier-ignore
-                const height = bottom - top; const width = right - left; //prettier-ignore
-                const doc = !field.title.includes('$$') ? Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top, _text_fontSize: `${height/2}` }) : Docs.Create.ImageDocument('', { _height: height, _width: 250, title: field.title.replace(/$$/g, ''), x: left, y: top });
-                return doc;
-            });
-
-            const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 400, y: 400 });
-            mainCollection.addDocument(template);
-        });
-    }
-
-    createBasicTemplates = (colsToLayout: {width: number, height: number, x: number, y: number, title: string}[]) => {
-        const mainCollection = this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-
-        const fields: Doc[] = colsToLayout.map(layout => {
-            const field = Docs.Create.TextDocument('', { _height: layout.height, _width: layout.width, title: layout.title, x: layout.x, y: layout.y });
-            return field;
-        });
-
-        const template = Docs.Create.FreeformDocument(fields, { _height: 500, _width: 500, title: 'template', x: 400, y: 400 })
-
-        mainCollection.addDocument(template);
-    }
-
     /**
      * creates a new dataviz document filter from this one
      *      it appears to the right of this document, with the
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index b3bacb13c..e2b4014bd 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -22,14 +22,14 @@
 }
 
 .docCreatorMenu-menu-button {
-    width: 30px;
-    height: 30px;
+    width: 25px;
+    height: 25px;
     background: whitesmoke; 
-    background-color: rgb(34, 34, 37);
+    background-color: rgb(50, 50, 50);
     border-radius: 5px;
     border: 1px solid rgb(180, 180, 180);
     padding: 0px;
-    font-size: 14px;
+    font-size: 13px;
     //box-shadow: 3px 3px rgb(29, 29, 31);
 
     &:hover {
@@ -222,7 +222,7 @@
 
 .docCreatorMenu-option-divider {
     border-top: 1px solid rgb(180, 180, 180);
-    width: 80%;
+    width: 95%;
     margin-top: 10px;
     margin-bottom: 10px;
 }
@@ -256,6 +256,18 @@
 // DocCreatorMenu templates preview CSS
 //--------------------------------------------------------------------------------------------------------------------------------------------
 
+.docCreatorMenu-templates-view {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    margin: 5px;
+    margin-top: 0px;
+    width: calc(100% - 10px);
+    height: calc(100% - 30px);
+    border: 1px solid rgb(180, 180, 180);
+    border-radius: 5px;
+}
 
 .docCreatorMenu-preview-container {
     display: grid;
@@ -263,20 +275,18 @@
     grid-template-rows: 140px;
     grid-auto-rows: 141px;
     overflow-y: scroll;
-    margin: 5px;
+    margin: 0px;
     margin-top: 0px;
-    width: calc(100% - 10px);
-    height: calc(100% - 30px);
-    border: 1px solid rgb(180, 180, 180);
-    border-radius: 5px;
+    width: 100%;
+    height: 100%;
 }
 
 .docCreatorMenu-preview-window {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 125px;
-    height: 125px;
+    width: 113px;
+    height: 113px;
     margin-top: 10px;
     margin-left: 10px;
     border: 1px solid rgb(163, 163, 163);
@@ -295,9 +305,103 @@
 
     &.empty {
         font-size: 35px;
+        flex: 0 0 auto;
+
+        &.GPT {
+            margin-top: 0px;
+        }
+    }
+}
+
+.docCreatorMenu-section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    margin: 0px;
+    width: 100%;
+    height: 250;
+    flex: 0 0 auto;
+}
+
+.docCreatorMenu-GPT-options-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    width: auto;
+    margin: 0px;
+    margin-top: 5px;
+    padding: 0px;
+}
+
+.docCreatorMenu-GPT-templates-preview {
+    display: flex;
+    flex-direction: row;
+    //justify-content: center;
+    align-items: center;
+    overflow-y: scroll;
+    position: relative;
+    height: 125px;
+    width: calc(100% - 10px);
+    -ms-overflow-style: none; 
+    scrollbar-width: none;
+}
+
+.docCreatorMenu-section-topbar {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+
+    .section-reveal-options {
+        margin: 0px;
+        margin-left: auto;
+        border: 0px;
+        background: none;
+    }
+}
+
+.docCreatorMenu-section-title {
+    border: 1px solid rgb(163, 163, 163);
+    border-top: 0px;
+    border-left: 0px;
+    border-bottom-right-radius: 5px;
+    font-size: 12px;
+    padding: 2px;
+    padding-left: 3px;
+    padding-right: 3px;
+    margin-bottom: 3px;
+}
+
+.docCreatorMenu-GPT-generate {
+    height: 30px;
+    width: 30px;
+    background-color: rgb(176, 229, 149); 
+    border: 1px solid rgb(126, 219, 80);
+    border-radius: 5px;
+    padding: 0px;
+    font-size: 14px;
+    color: white;
+    letter-spacing: 1px;
+    flex: 0 0 auto;
+
+    &:hover {
+        background-color: rgb(129, 223, 83);
+        border: 2px solid rgb(80, 185, 28); 
     }
 }
 
+.docCreatorMenu-GPT-prompt-input {
+    width: 140px;
+    overflow-y: scroll;
+    border: 1px solid rgb(180, 180, 180);
+    background-color: rgb(35, 35, 35);
+    border-radius: 3px;
+}
+
 //------------------------------------------------------------------------------------------------------------------------------------------
 // DocCreatorMenu options CSS
 //--------------------------------------------------------------------------------------------------------------------------------------------
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 411257ff7..781cbcb55 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -3,7 +3,7 @@ import { IReactionDisposer, ObservableMap, action, computed, makeObservable, obs
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnAll, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
-import { Doc, NumListCast } from '../../../../fields/Doc';
+import { Doc, NumListCast, StrListCast } from '../../../../fields/Doc';
 import { DocCast, ImageCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
 import { emptyFunction } from '../../../../Utils';
@@ -17,6 +17,9 @@ import { Id } from '../../../../fields/FieldSymbols';
 import { Colors, IconButton, Size } from 'browndash-components';
 import { MakeTemplate } from '../../../util/DropConverter';
 import { DragManager } from '../../../util/DragManager';
+import { GPTCallType, gptAPICall } from '../../../apis/gpt/GPT';
+import { CollectionFreeFormView } from '../../collections/collectionFreeForm/CollectionFreeFormView';
+import { Docs } from '../../../documents/Documents';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -41,6 +44,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _layoutPreviewScale: number = 1;
     @observable _savedLayouts: DataVizTemplateLayout[] = [];
 
+    @observable _GPTTemplates: Doc[] | undefined = undefined;
+    @observable _GPTOpt: boolean = false;
+    @observable _userPrompt: string = '';
+
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
     @observable _indicatorX: number | undefined = undefined;
@@ -105,6 +112,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
+    @computed get selectedFields(){
+        return StrListCast(this._dataViz?.layoutDoc._dataViz_axes);
+    }
+
     @computed get canMakeDocs(){
         return this._selectedTemplate !== undefined && this._layout !== undefined;
     }
@@ -254,8 +265,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         if (this._initDimensions.y === undefined) this._initDimensions.y = this._pageY;
         const {height, width, x, y} = this._initDimensions;
 
-        this._menuDimensions.width = Math.max(100, scale.x * width);
-        this._menuDimensions.height = Math.max(100, scale.y * height);
+        this._menuDimensions.width = Math.max(300, scale.x * width);
+        this._menuDimensions.height = Math.max(200, scale.y * height);
         this._pageX = x + translation.x;
         this._pageY = y + translation.y;
     };
@@ -293,10 +304,104 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         && this._layout.columns === layout.columns;
     }
 
+    generateTemplates = async (inputText: string) => {
+        let prompt: string = 'Please generate for the fields:';
+        this.selectedFields?.forEach(field => prompt += ` ${field},`)
+        prompt += ` Additional prompt: ${inputText}`;
+
+        try {
+            const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
+
+            if (res) {
+                const templates: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[] = JSON.parse(res);
+                this.createGeneratedTemplates(templates, 500, 500);
+            }
+        } catch (err) {
+            console.error(err);
+        }
+
+    }
+
+    createGeneratedTemplates = (layouts: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[], tempWidth: number, tempHeight: number) => { 
+        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+
+        layouts.forEach(layout => {
+            const fields: Doc[] = layout.fieldVals.map(field => {
+                const left: number = Number(field.tlx) * tempWidth / 2;    const top: number = Number(field.tly) * tempHeight / 2; //prettier-ignore
+                const right: number = Number(field.brx) * tempWidth / 2;   const bottom: number = Number(field.bry) * tempHeight / 2; //prettier-ignore
+                const height = bottom - top; 
+                const width = right - left; 
+                const doc = !field.title.includes('$$') ? Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top, _text_fontSize: `${height/2}` }) : Docs.Create.ImageDocument('', { _height: height, _width: width, title: field.title.replace(/$$/g, ''), x: left, y: top });
+                return doc;
+            });
+
+            const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 400, y: 400 });
+            mainCollection.addDocument(template);
+        });
+    }
+
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
+
+        const GPTOptions = 
+            <div></div>
+
+        
         return (
-            <div className='docCreatorMenu-preview-container'
+            <div className='docCreatorMenu-templates-view'>
+                <div className='docCreatorMenu-section'>
+                    <div className='docCreatorMenu-section-topbar'>
+                        <div className='docCreatorMenu-section-title'>Suggested Templates</div>
+                        <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._GPTOpt = !this._GPTOpt)}>
+                            <FontAwesomeIcon icon='gear'/>
+                        </button>
+                    </div>
+                    <div className='docCreatorMenu-GPT-templates-preview'>
+                        <div className='docCreatorMenu-preview-window empty GPT'></div>
+                        <div className='docCreatorMenu-preview-window empty GPT'></div>
+                        <div className='docCreatorMenu-preview-window empty GPT'></div>
+                        <div className='docCreatorMenu-preview-window empty GPT'></div>
+                    </div>
+                    {this._GPTOpt ? (<div className='docCreatorMenu-GPT-options'>
+                        <div className='docCreatorMenu-GPT-options-container'>
+                            <button className='docCreatorMenu-menu-button' onPointerDown={e => this.setUpButtonClick(e, () => this.generateTemplates(this._userPrompt))}>
+                                <FontAwesomeIcon icon='plus'/>
+                            </button>
+                            <input className='docCreatorMenu-GPT-prompt-input'/>
+                        </div>
+                        {this._GPTOpt ? GPTOptions : null}
+                    </div>) : null}
+                </div>
+                <hr className='docCreatorMenu-option-divider'/>
+                <div className='docCreatorMenu-section'>
+                    <div className='docCreatorMenu-section-topbar'>
+                        <div className='docCreatorMenu-section-title'>Your Templates</div>
+                        <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._GPTOpt = !this._GPTOpt)}>
+                            <FontAwesomeIcon icon='gear'/>
+                        </button>
+                    </div>
+                    <div className='docCreatorMenu-GPT-templates-preview'>
+                        <div className='docCreatorMenu-preview-window empty'
+                        onPointerDown={e => this.setUpButtonClick(e, this.basicTemplateTest)}
+                        >
+                            <FontAwesomeIcon icon='plus' color='rgb(160, 160, 160)'/>
+                        </div>
+                        {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
+                        if (renderedTemplates.includes(info.doc)) return undefined;
+                        renderedTemplates.push(info.doc);
+                        return (<div 
+                        className='docCreatorMenu-preview-window'
+                        style={{
+                            border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                            boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
+                        }}
+                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+                            <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
+                        </div>
+                        )})}
+                    </div>
+                </div>
+                {/* <div className='docCreatorMenu-preview-container'
                 style={{gridTemplateColumns: `repeat(${Math.floor((this._menuDimensions.width - 10) / 140)}, 140px)`}}>
                 {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
                     if (renderedTemplates.includes(info.doc)) return undefined;
@@ -316,6 +421,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 >
                     <FontAwesomeIcon icon='plus' color='rgb(160, 160, 160)'/>
                 </div>
+                </div> */}
             </div>
         );
     }
@@ -546,12 +652,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     }
 
     basicTemplateTest = () => {
-        const temps: {width: number; height: number; x: number; y: number; title: string}[] = [
-            {width: 200, height: 50, x: -100, y: -200, title: 'title'},
-            {width: 300, height: 300, x: -150, y: -100, title: 'image'},
-            {width: 200, height: 50, x: -100, y: -200, title: 'description'},
-        ]
-        this._dataViz?.generateTemplates();
+        this.generateTemplates(this._userPrompt);
         //this._dataViz?.createBasicTemplates(temps);
     }
 
@@ -609,31 +710,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         return (
             <div className='docCreatorMenu'>
                 {!this._shouldDisplay ? undefined : 
-                <>
-                {/* <div className='docCreatorMenu-placement-indicator' 
-                style={{
-                    display: '',
-                    left: this._indicatorX ?? this._pageX + 300,
-                    top: this._indicatorY ?? this._pageY,
-                }}
-                onPointerMove={e => this.onPointerMove(e)}
-                onPointerDown={e =>
-                    setupMoveUpEvents(
-                        this,
-                        e,
-                        (e) => {
-                            this._draggingIndicator = true;
-                            this._startPos = {x: 0, y: 0};
-                            this._startPos.x = e.pageX - (this._ref?.getBoundingClientRect().left ?? 0);
-                            this._startPos.y = e.pageY - (this._ref?.getBoundingClientRect().top ?? 0);
-                            return true;
-                        },
-                        emptyFunction,
-                        undoable(clickEv => {
-                            clickEv.stopPropagation();
-                        }, 'drag menu')
-                    )
-                }/> */}
                 <div
                     className="docCreatorMenu-cont"
                     ref={r => this._ref = r}
@@ -681,7 +757,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         </div>
                         {this.renderSelectedViewType}
                 </div>
-                </>
                 }
             </div>
             )
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 92a5a1533..faea05104 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -295,6 +295,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @computed get nativeSize() {
         TraceMobx();
+        if (this.paths.length && this.paths[0].includes('icon-hi')) return { nativeWidth: NumCast(this.layoutDoc._width), nativeHeight: NumCast(this.layoutDoc._height), nativeOrientation: 0}
         const nativeWidth = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth'], NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth'], 500));
         const nativeHeight = NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], NumCast(this.layoutDoc[this.fieldKey + '_nativeHeight'], 500));
         const nativeOrientation = NumCast(this.dataDoc[this.fieldKey + '_nativeOrientation'], 1);
-- 
cgit v1.2.3-70-g09d2


From 541d380f1ff7957f9e3d66965761b074fec073c3 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sat, 10 Aug 2024 19:36:29 -0400
Subject: UI

---
 src/client/views/nodes/DataVizBox/DocCreatorMenu.scss | 14 ++++++++++----
 src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx  |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index e2b4014bd..82a659ff7 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -225,6 +225,10 @@
     width: 95%;
     margin-top: 10px;
     margin-bottom: 10px;
+
+    &.full {
+        width: 100%;
+    }
 }
 
 //------------------------------------------------------------------------------------------------------------------------------------------
@@ -259,14 +263,15 @@
 .docCreatorMenu-templates-view {
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
+    justify-content: flex-start;
+    //align-items: flex-start;
     margin: 5px;
     margin-top: 0px;
     width: calc(100% - 10px);
     height: calc(100% - 30px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
+    overflow: hidden;
 }
 
 .docCreatorMenu-preview-container {
@@ -316,12 +321,13 @@
 .docCreatorMenu-section {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
     position: relative;
     margin: 0px;
+    margin-top: 0px;
+    margin-bottom: 0px;
     width: 100%;
-    height: 250;
+    height: 200;
     flex: 0 0 auto;
 }
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 781cbcb55..2efd73136 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -372,7 +372,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         {this._GPTOpt ? GPTOptions : null}
                     </div>) : null}
                 </div>
-                <hr className='docCreatorMenu-option-divider'/>
+                <hr className='docCreatorMenu-option-divider full no-margin'/>
                 <div className='docCreatorMenu-section'>
                     <div className='docCreatorMenu-section-topbar'>
                         <div className='docCreatorMenu-section-title'>Your Templates</div>
-- 
cgit v1.2.3-70-g09d2


From afd43afb6b75a7af0032ee14c79d1dd7ffedcac4 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 11 Aug 2024 02:28:57 -0400
Subject: generated templates appear in menu

---
 src/client/views/MainView.tsx                      |  1 +
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  4 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 95 ++++++++++++----------
 3 files changed, 54 insertions(+), 46 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index dd5884cf2..d4467e536 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -279,6 +279,7 @@ export class MainView extends ObservableReactComponent<{}> {
 
         library.add(
             ...[
+                fa.faArrowsRotate,
                 fa.faFloppyDisk,
                 fa.faRepeat,
                 fa.faArrowsUpDown,
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 82a659ff7..3b6aeb0dd 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -297,6 +297,7 @@
     border: 1px solid rgb(163, 163, 163);
     border-radius: 5px;
     box-shadow: 5px 5px rgb(29, 29, 31);
+    flex: 0 0 auto;
 
     &:hover{
         background-color: rgb(72, 72, 73);
@@ -310,7 +311,6 @@
 
     &.empty {
         font-size: 35px;
-        flex: 0 0 auto;
 
         &.GPT {
             margin-top: 0px;
@@ -402,10 +402,12 @@
 
 .docCreatorMenu-GPT-prompt-input {
     width: 140px;
+    height: 25px;
     overflow-y: scroll;
     border: 1px solid rgb(180, 180, 180);
     background-color: rgb(35, 35, 35);
     border-radius: 3px;
+    padding-left: 4px;
 }
 
 //------------------------------------------------------------------------------------------------------------------------------------------
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 2efd73136..b45ac7f46 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -44,7 +44,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _layoutPreviewScale: number = 1;
     @observable _savedLayouts: DataVizTemplateLayout[] = [];
 
-    @observable _GPTTemplates: Doc[] | undefined = undefined;
+    @observable _GPTTemplates: Doc[] = [];
     @observable _GPTOpt: boolean = false;
     @observable _userPrompt: string = '';
 
@@ -71,7 +71,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _offset: {x: number, y: number} = {x: 0, y: 0};
     @observable _resizeUndo: UndoManager.Batch | undefined = undefined;
     @observable _initDimensions: {width: number, height: number, x?: number, y?: number} = {width: 300, height: 400, x: undefined, y: undefined};
-    @observable _menuDimensions: {width: number, height: number} = {width: 300, height: 400};
+    @observable _menuDimensions: {width: number, height: number} = {width: 300, height: 365};
 
     constructor(props: any) {
         super(props);
@@ -81,6 +81,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz };
     @action setTemplateDocs = (docs: Doc[]) => {this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc)};
+    @action setGPTTemplates = (docs: Doc[]) => {this._GPTTemplates = docs};
 
     @computed get docsToRender() {
         return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
@@ -169,14 +170,17 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     };
 
     _disposer: IReactionDisposer | undefined;
+    _GPTDisposer: IReactionDisposer | undefined;
     componentDidMount() {
         document.addEventListener('pointerdown', this.onPointerDown, true);
         document.addEventListener('pointerup', this.onPointerUp);
         this._disposer = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon));
+        this._GPTDisposer = reaction(() => this._GPTTemplates.slice(), (docs) => docs.map(this.getIcon));
     }
 
     componentWillUnmount() {
         this._disposer?.();
+        this._GPTDisposer?.();
         document.removeEventListener('pointerdown', this.onPointerDown, true);
         document.removeEventListener('pointerup', this.onPointerUp);
     }
@@ -275,7 +279,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         const docView = DocumentView.getDocumentView(doc);
         if (docView) {
             docView.ComponentView?.updateIcon?.();
-            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));
+            const f = new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));
+            console.log(f)
+            return f;
         }
         return undefined;
     }
@@ -304,10 +310,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         && this._layout.columns === layout.columns;
     }
 
+    @action
     generateTemplates = async (inputText: string) => {
         let prompt: string = 'Please generate for the fields:';
         this.selectedFields?.forEach(field => prompt += ` ${field},`)
         prompt += ` Additional prompt: ${inputText}`;
+        console.log(prompt)
 
         try {
             const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
@@ -322,8 +330,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     }
 
+    @action
     createGeneratedTemplates = (layouts: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[], tempWidth: number, tempHeight: number) => { 
         const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+        const GPTTemplates: Doc[] = [];
 
         layouts.forEach(layout => {
             const fields: Doc[] = layout.fieldVals.map(field => {
@@ -335,9 +345,15 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 return doc;
             });
 
-            const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 400, y: 400 });
+            const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 40000, y: 40000 });
             mainCollection.addDocument(template);
+            
+            GPTTemplates.push(template);
         });
+
+        setTimeout(() => this.setGPTTemplates(GPTTemplates), 500);
+
+        this.forceUpdate();
     }
 
     get templatesPreviewContents(){
@@ -346,10 +362,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         const GPTOptions = 
             <div></div>
 
-        
         return (
             <div className='docCreatorMenu-templates-view'>
-                <div className='docCreatorMenu-section'>
+                <div className='docCreatorMenu-section' style={{height: this._GPTOpt ? 200 : 165}}>
                     <div className='docCreatorMenu-section-topbar'>
                         <div className='docCreatorMenu-section-title'>Suggested Templates</div>
                         <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._GPTOpt = !this._GPTOpt)}>
@@ -357,17 +372,27 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         </button>
                     </div>
                     <div className='docCreatorMenu-GPT-templates-preview'>
-                        <div className='docCreatorMenu-preview-window empty GPT'></div>
-                        <div className='docCreatorMenu-preview-window empty GPT'></div>
-                        <div className='docCreatorMenu-preview-window empty GPT'></div>
-                        <div className='docCreatorMenu-preview-window empty GPT'></div>
+                        {this._GPTTemplates?.map(doc => 
+
+                        //<div className='docCreatorMenu-preview-window empty'/>
+                        ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info =>
+                            <div 
+                            className='docCreatorMenu-preview-window'
+                            style={{
+                                border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                                boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
+                            }}
+                            onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+                                <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
+                            </div>
+                        )}
                     </div>
                     {this._GPTOpt ? (<div className='docCreatorMenu-GPT-options'>
                         <div className='docCreatorMenu-GPT-options-container'>
                             <button className='docCreatorMenu-menu-button' onPointerDown={e => this.setUpButtonClick(e, () => this.generateTemplates(this._userPrompt))}>
-                                <FontAwesomeIcon icon='plus'/>
+                                <FontAwesomeIcon icon='arrows-rotate'/>
                             </button>
-                            <input className='docCreatorMenu-GPT-prompt-input'/>
+                            <input className='docCreatorMenu-GPT-prompt-input' placeholder='Additional prompt:' onChange={e => this._userPrompt = e.target.value}/>
                         </div>
                         {this._GPTOpt ? GPTOptions : null}
                     </div>) : null}
@@ -387,41 +412,20 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                             <FontAwesomeIcon icon='plus' color='rgb(160, 160, 160)'/>
                         </div>
                         {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
-                        if (renderedTemplates.includes(info.doc)) return undefined;
-                        renderedTemplates.push(info.doc);
-                        return (<div 
-                        className='docCreatorMenu-preview-window'
-                        style={{
-                            border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                            boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
-                        }}
-                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
-                            <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
-                        </div>
+                            if (renderedTemplates.includes(info.doc)) return undefined;
+                            renderedTemplates.push(info.doc);
+                            return (<div 
+                            className='docCreatorMenu-preview-window'
+                            style={{
+                                border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                                boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
+                            }}
+                            onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+                                <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
+                            </div>
                         )})}
                     </div>
                 </div>
-                {/* <div className='docCreatorMenu-preview-container'
-                style={{gridTemplateColumns: `repeat(${Math.floor((this._menuDimensions.width - 10) / 140)}, 140px)`}}>
-                {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
-                    if (renderedTemplates.includes(info.doc)) return undefined;
-                    renderedTemplates.push(info.doc);
-                    return (<div 
-                    className='docCreatorMenu-preview-window'
-                    style={{
-                        border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                        boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
-                    }}
-                    onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
-                        <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
-                    </div>
-                )})}
-                <div className='docCreatorMenu-preview-window empty'
-                onPointerDown={e => this.setUpButtonClick(e, this.basicTemplateTest)}
-                >
-                    <FontAwesomeIcon icon='plus' color='rgb(160, 160, 160)'/>
-                </div>
-                </div> */}
             </div>
         );
     }
@@ -652,7 +656,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     }
 
     basicTemplateTest = () => {
-        this.generateTemplates(this._userPrompt);
+        console.log(this._GPTTemplates)
+        this.forceUpdate();
         //this._dataViz?.createBasicTemplates(temps);
     }
 
-- 
cgit v1.2.3-70-g09d2


From 8d3ef2ead4fb8a8625b7fbfe57e528819a030474 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 11 Aug 2024 04:07:40 -0400
Subject: edit and copy buttons added to GPT template preview

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 41 ++++++++++++++++++----
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 15 ++++++++
 2 files changed, 50 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 3b6aeb0dd..5a9fd3436 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -287,6 +287,7 @@
 }
 
 .docCreatorMenu-preview-window {
+    position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -316,6 +317,34 @@
             margin-top: 0px;
         }
     }
+
+    .option-button {
+        display: none;
+        height: 25px;
+        width: 25px;
+        margin: 0px;
+        background: none;
+        border: 0px;
+        padding: 0px;
+        font-size: 15px;
+
+        &.right {
+            position: absolute;
+            bottom: 0px;
+            right: 0px;
+        }
+
+        &.left {
+            position: absolute;
+            bottom: 0px;
+            left: 0px;
+        }
+    }
+
+    &:hover .option-button {
+        display: block;
+    }
+    
 }
 
 .docCreatorMenu-section {
@@ -361,13 +390,13 @@
     display: flex;
     flex-direction: row;
     width: 100%;
+}
 
-    .section-reveal-options {
-        margin: 0px;
-        margin-left: auto;
-        border: 0px;
-        background: none;
-    }
+.section-reveal-options {
+    margin: 0px;
+    margin-left: auto;
+    border: 0px;
+    background: none;
 }
 
 .docCreatorMenu-section-title {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index b45ac7f46..205923346 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -135,6 +135,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             emptyFunction,
             undoable(clickEv => {
                 clickEv.stopPropagation();
+                clickEv.preventDefault();
                 func();
             }, 'create docs')
         )
@@ -356,6 +357,14 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         this.forceUpdate();
     }
 
+    editTemplate = () => {
+
+    }
+
+    copyGPTTemplate = () => {
+
+    }
+
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
 
@@ -383,6 +392,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                             }}
                             onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+                                <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate()})}>
+                                    <FontAwesomeIcon icon='pencil' color='black'/>
+                                </button>
+                                <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => {this.copyGPTTemplate()})}>
+                                    <FontAwesomeIcon icon='plus' color='black'/>
+                                </button>
                                 <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
                             </div>
                         )}
-- 
cgit v1.2.3-70-g09d2


From 3aa2e040100fc662c259751dfbb7a43cc716ac2a Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 12 Aug 2024 21:37:47 -0400
Subject: seuggested templates auto-refeshes on col selection; lightbox editing
 added; GPT refresh button now makes new call

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |  1 +
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  6 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 71 ++++++++++++----------
 3 files changed, 45 insertions(+), 33 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index a6d3bfa49..be8a44f28 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -129,6 +129,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
     selectAxes = (axes: string[]) => {
         this.layoutDoc._dataViz_axes = new List<string>(axes);
+        DocCreatorMenu.Instance.generateTemplates('');
     };
     @computed.struct get titleCol() {
         return StrCast(this.layoutDoc._dataViz_titleCol);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 5a9fd3436..ca6534379 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -264,6 +264,7 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
+    overflow-y: scroll;
     //align-items: flex-start;
     margin: 5px;
     margin-top: 0px;
@@ -271,7 +272,8 @@
     height: calc(100% - 30px);
     border: 1px solid rgb(180, 180, 180);
     border-radius: 5px;
-    overflow: hidden;
+    -ms-overflow-style: none; 
+    scrollbar-width: none;
 }
 
 .docCreatorMenu-preview-container {
@@ -372,7 +374,7 @@
     padding: 0px;
 }
 
-.docCreatorMenu-GPT-templates-preview {
+.docCreatorMenu-templates-preview-window {
     display: flex;
     flex-direction: row;
     //justify-content: center;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 205923346..3e5fc156e 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -4,13 +4,13 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnAll, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
 import { Doc, NumListCast, StrListCast } from '../../../../fields/Doc';
-import { DocCast, ImageCast } from '../../../../fields/Types';
+import { DocCast, ImageCast, ScriptCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
 import { emptyFunction } from '../../../../Utils';
 import { SnappingManager } from '../../../util/SnappingManager';
 import { UndoManager, undoable } from '../../../util/UndoManager';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
-import { DocumentView } from '../DocumentView';
+import { DocumentView, DocumentViewInternal } from '../DocumentView';
 import { DataVizBox } from './DataVizBox';
 import './DocCreatorMenu.scss';
 import { Id } from '../../../../fields/FieldSymbols';
@@ -20,6 +20,9 @@ import { DragManager } from '../../../util/DragManager';
 import { GPTCallType, gptAPICall } from '../../../apis/gpt/GPT';
 import { CollectionFreeFormView } from '../../collections/collectionFreeForm/CollectionFreeFormView';
 import { Docs } from '../../../documents/Documents';
+import { OpenWhere } from '../OpenWhere';
+import { IDisposer } from 'mobx-utils';
+import { LightboxView } from '../../LightboxView';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -34,6 +37,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     static Instance: DocCreatorMenu;
 
+    private _disposers: { [name: string]: IDisposer } = {};
+
     private _ref: HTMLDivElement | null = null;
 
     @observable _templateDocs: Doc[] = [];
@@ -47,12 +52,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _GPTTemplates: Doc[] = [];
     @observable _GPTOpt: boolean = false;
     @observable _userPrompt: string = '';
+    @observable _callCount: number = 0;
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
     @observable _indicatorX: number | undefined = undefined;
     @observable _indicatorY: number | undefined = undefined;
-    @observable _display: boolean = false;
 
     @observable _hoveredLayoutPreview: number | undefined = undefined;
     @observable _mouseX: number = -1;
@@ -72,11 +77,13 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _resizeUndo: UndoManager.Batch | undefined = undefined;
     @observable _initDimensions: {width: number, height: number, x?: number, y?: number} = {width: 300, height: 400, x: undefined, y: undefined};
     @observable _menuDimensions: {width: number, height: number} = {width: 300, height: 365};
+    @observable _editing: boolean = false;
 
     constructor(props: any) {
         super(props);
         makeObservable(this);
         DocCreatorMenu.Instance = this;
+        setTimeout(() => this.generateTemplates(''));
     }
 
     @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz };
@@ -170,18 +177,17 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     };
 
-    _disposer: IReactionDisposer | undefined;
-    _GPTDisposer: IReactionDisposer | undefined;
     componentDidMount() {
         document.addEventListener('pointerdown', this.onPointerDown, true);
         document.addEventListener('pointerup', this.onPointerUp);
-        this._disposer = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon));
-        this._GPTDisposer = reaction(() => this._GPTTemplates.slice(), (docs) => docs.map(this.getIcon));
+        this._disposers.templates = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon));
+        this._disposers.gpt = reaction(() => this._GPTTemplates.slice(), (docs) => docs.map(this.getIcon));
+        this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {console.log(true); this.generateTemplates('')})
+        this._disposers.lightbox = reaction(() => LightboxView.LightboxDoc(), doc => { doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu()})
     }
 
     componentWillUnmount() {
-        this._disposer?.();
-        this._GPTDisposer?.();
+        Object.values(this._disposers).forEach(disposer => disposer?.());
         document.removeEventListener('pointerdown', this.onPointerDown, true);
         document.removeEventListener('pointerup', this.onPointerUp);
     }
@@ -198,12 +204,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     };
 
     @action
-    closeMenu = () => {
-        const wasOpen = this._display;
-        this._display = false;
-        this._shouldDisplay = false;
-        return wasOpen;
-    };
+    closeMenu = () => { this._shouldDisplay = false };
+
+    @action
+    openMenu = () => { this._shouldDisplay = true };
 
     @action
     onResizePointerDown = (e: React.PointerEvent): void => {
@@ -313,7 +317,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
     @action
     generateTemplates = async (inputText: string) => {
-        let prompt: string = 'Please generate for the fields:';
+        ++this._callCount;
+        const origCount = this._callCount;
+
+        let prompt: string = `(#${origCount}) Please generate for the fields:`;
         this.selectedFields?.forEach(field => prompt += ` ${field},`)
         prompt += ` Additional prompt: ${inputText}`;
         console.log(prompt)
@@ -321,14 +328,13 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         try {
             const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
 
-            if (res) {
+            if (res && this._callCount === origCount) {
                 const templates: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[] = JSON.parse(res);
                 this.createGeneratedTemplates(templates, 500, 500);
             }
         } catch (err) {
             console.error(err);
-        }
-
+        } 
     }
 
     @action
@@ -346,23 +352,23 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 return doc;
             });
 
-            const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 40000, y: 40000 });
+            const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 400, y: 400 });
+
             mainCollection.addDocument(template);
             
             GPTTemplates.push(template);
         });
 
-        setTimeout(() => this.setGPTTemplates(GPTTemplates), 500);
+        setTimeout(() => {this.setGPTTemplates(GPTTemplates); GPTTemplates.forEach(template => mainCollection.removeDocument(template))}, 100);
 
         this.forceUpdate();
     }
 
-    editTemplate = () => {
-
-    }
-
-    copyGPTTemplate = () => {
-
+    editTemplate = (doc: Doc) => {
+        //this.closeMenu();
+        DocumentViewInternal.addDocTabFunc(doc, OpenWhere.lightboxAlways);
+        DocumentView.DeselectAll();
+        Doc.UnBrushDoc(doc);
     }
 
     get templatesPreviewContents(){
@@ -380,7 +386,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                             <FontAwesomeIcon icon='gear'/>
                         </button>
                     </div>
-                    <div className='docCreatorMenu-GPT-templates-preview'>
+                    <div className='docCreatorMenu-templates-preview-window'>
                         {this._GPTTemplates?.map(doc => 
 
                         //<div className='docCreatorMenu-preview-window empty'/>
@@ -392,10 +398,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                             }}
                             onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
-                                <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate()})}>
+                                <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate(info.doc)})}>
                                     <FontAwesomeIcon icon='pencil' color='black'/>
                                 </button>
-                                <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => {this.copyGPTTemplate()})}>
+                                <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}>
                                     <FontAwesomeIcon icon='plus' color='black'/>
                                 </button>
                                 <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
@@ -420,7 +426,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                             <FontAwesomeIcon icon='gear'/>
                         </button>
                     </div>
-                    <div className='docCreatorMenu-GPT-templates-preview'>
+                    <div className='docCreatorMenu-templates-preview-window'>
                         <div className='docCreatorMenu-preview-window empty'
                         onPointerDown={e => this.setUpButtonClick(e, this.basicTemplateTest)}
                         >
@@ -436,6 +442,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                             }}
                             onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+                                <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate(info.doc)})}>
+                                    <FontAwesomeIcon icon='pencil' color='black'/>
+                                </button>
                                 <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
                             </div>
                         )})}
-- 
cgit v1.2.3-70-g09d2


From 72b06d708a23560dd961b41b9070b2e1222d50ba Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 14 Aug 2024 02:18:18 -0400
Subject: loading symbol for gpt generation; remove option for GPTTemplates

---
 src/client/apis/gpt/GPT.ts                         |  2 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 10 +++
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 99 +++++++++++++---------
 3 files changed, 69 insertions(+), 42 deletions(-)

(limited to 'src')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 8eb7151b4..144b49bde 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -54,7 +54,7 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
         temp: 0,
         prompt: 'List unique differences between the content of the UserAnswer and Rubric. Before each difference, label it and provide any additional information the UserAnswer missed and explain it in second person without separating it into UserAnswer and Rubric content and additional information. If there are no differences, say correct',
     },
-    template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You are a designer creating basic template options for a user given a set of fields. Your only job is adding blank rectangles to a canvas, one for each field. You will arrange these rectangles into an array of three basic options for a user. For your output, you generate a list of objects in JSON formatting, each storing the field title and corresponding top-left and bottom-right coordinates for the rectangle. The units for your coordinates are -1 to 1 on each axis. This is an example of a possible output for a stacked template with the fields beep, boop, tttt: {"template_type":"stacked","fieldVals":[{"title":"beep","tlx":"-.7","tly":"-.9","brx":".7","bry":"-.7"},{"title":"boop","tlx":"-.9","tly":"-.4","brx":".9","bry":"0"},{"title":"tttt","tlx":"-.9","tly":".1","brx":".9","bry":".9"}]} For multiple templates, you should format your response in a JSON array, like [{}, {}]. Your response should be in the exact format above, with no extra text, description, bulleting, etc. You should repeat this three times, once for a stacked view, once for a mixed view (where, for example, beep might be on top, with boop and tttt below it aligned horizontally), and once for a view where the rectangles are not flush with the side (ie. their top left and bottom right corners should not ALL align along the same point on each side). If one or more fields are some variation of image (ie. IMG, image, photo, etc.), make that rectangle the central focus (bigger, centered, etc.) AND put its "title" field in $$__$$ (ie, "title":"$$img$$", !!IMPORTANT!!). Fields SHOULD BE IN DIFFERENT ORDERS from template to template (ie. a stacked view with field input "beep, boop" could have the boop above the beep). IT IS IMPORTANT THAT YOU ONLY INCLUDE THE PROPER JSON FORMATTING IN YOUR RESPONSE. IT IS ALSO IMPORTANT THAT NO RECTANGLES OVERLAP'}    
+    template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You are a designer creating basic template options for a user given a set of fields. Your only job is adding blank rectangles to a canvas, one for each field. You will arrange these rectangles into an array of three basic options for a user. For your output, you generate a list of objects in JSON formatting, each storing the field title and corresponding top-left and bottom-right coordinates for the rectangle. The units for your coordinates are -1 to 1 on each axis. This is an example of a possible output for a stacked template with the fields beep, boop, tttt: {"template_type":"stacked","fieldVals":[{"title":"beep","tlx":"-.7","tly":"-.9","brx":".7","bry":"-.7"},{"title":"boop","tlx":"-.9","tly":"-.4","brx":".9","bry":"0"},{"title":"tttt","tlx":"-.9","tly":".1","brx":".9","bry":".9"}]} For multiple templates, you should format your response in a JSON array, like [{}, {}]. Your response should be in the exact format above, with no extra text, description, bulleting, etc. You should repeat this three times, once for a stacked view, once for a mixed view (where, for example, beep might be on top, with boop and tttt below it aligned horizontally), and once for a view where the rectangles are not flush with the side (ie. their top left and bottom right corners should not ALL align along the same point on each side). If one or more fields are some variation of image (ie. IMG, image, photo, etc.), make that rectangle the central focus (bigger, centered, etc.) AND put its "title" field in $$__$$. Fields SHOULD BE IN DIFFERENT ORDERS from template to template (ie. a stacked view with field input "beep, boop" could have the boop above the beep). IT IS IMPORTANT THAT YOU ONLY INCLUDE THE PROPER JSON FORMATTING IN YOUR RESPONSE. IT IS ALSO IMPORTANT THAT NO RECTANGLES OVERLAP'}    
 };
 
 let lastCall = '';
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index ca6534379..3e97e9d08 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -341,6 +341,12 @@
             bottom: 0px;
             left: 0px;
         }
+
+        &.top-left {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+        }
     }
 
     &:hover .option-button {
@@ -385,6 +391,10 @@
     width: calc(100% - 10px);
     -ms-overflow-style: none; 
     scrollbar-width: none;
+
+    .loading-spinner {
+        justify-self: center;
+    }
 }
 
 .docCreatorMenu-section-topbar {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 3e5fc156e..ee154994e 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnAll, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
 import { Doc, NumListCast, StrListCast } from '../../../../fields/Doc';
-import { DocCast, ImageCast, ScriptCast } from '../../../../fields/Types';
+import { DocCast, ImageCast, ScriptCast, StrCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
 import { emptyFunction } from '../../../../Utils';
 import { SnappingManager } from '../../../util/SnappingManager';
@@ -23,6 +23,7 @@ import { Docs } from '../../../documents/Documents';
 import { OpenWhere } from '../OpenWhere';
 import { IDisposer } from 'mobx-utils';
 import { LightboxView } from '../../LightboxView';
+import ReactLoading from 'react-loading';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -53,6 +54,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _GPTOpt: boolean = false;
     @observable _userPrompt: string = '';
     @observable _callCount: number = 0;
+    @observable _GPTLoading: boolean = false;
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
@@ -83,7 +85,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         super(props);
         makeObservable(this);
         DocCreatorMenu.Instance = this;
-        setTimeout(() => this.generateTemplates(''));
+        //setTimeout(() => this.generateTemplates(''));
     }
 
     @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz };
@@ -182,7 +184,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         document.addEventListener('pointerup', this.onPointerUp);
         this._disposers.templates = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon));
         this._disposers.gpt = reaction(() => this._GPTTemplates.slice(), (docs) => docs.map(this.getIcon));
-        this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {console.log(true); this.generateTemplates('')})
+        //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')})
         this._disposers.lightbox = reaction(() => LightboxView.LightboxDoc(), doc => { doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu()})
     }
 
@@ -322,13 +324,17 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
         let prompt: string = `(#${origCount}) Please generate for the fields:`;
         this.selectedFields?.forEach(field => prompt += ` ${field},`)
-        prompt += ` Additional prompt: ${inputText}`;
+        prompt += ` (-----NOT A FIELD-----) Additional prompt: ${inputText}`;
         console.log(prompt)
 
+        this._GPTLoading = true;
+
         try {
             const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
 
             if (res && this._callCount === origCount) {
+                this._GPTTemplates = [];
+                this._GPTLoading = false;
                 const templates: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[] = JSON.parse(res);
                 this.createGeneratedTemplates(templates, 500, 500);
             }
@@ -348,11 +354,12 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                 const right: number = Number(field.brx) * tempWidth / 2;   const bottom: number = Number(field.bry) * tempHeight / 2; //prettier-ignore
                 const height = bottom - top; 
                 const width = right - left; 
-                const doc = !field.title.includes('$$') ? Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top, _text_fontSize: `${height/2}` }) : Docs.Create.ImageDocument('', { _height: height, _width: width, title: field.title.replace(/$$/g, ''), x: left, y: top });
+                console.log(field.title);
+                const doc = !field.title.includes('$$') ? Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top, _text_fontSize: `${height/2}` }) : Docs.Create.ImageDocument('', { _height: height, _width: width, title: field.title.replace(/\$\$/g, ''), x: left, y: top });
                 return doc;
             });
 
-            const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 400, y: 400 });
+            const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 40000, y: 40000 });
 
             mainCollection.addDocument(template);
             
@@ -371,6 +378,10 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         Doc.UnBrushDoc(doc);
     }
 
+    removeTemplate = (doc: Doc) => {
+        this._templateDocs.splice(this._templateDocs.indexOf(doc), 1);
+    }
+
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
 
@@ -380,43 +391,46 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         return (
             <div className='docCreatorMenu-templates-view'>
                 <div className='docCreatorMenu-section' style={{height: this._GPTOpt ? 200 : 165}}>
-                    <div className='docCreatorMenu-section-topbar'>
-                        <div className='docCreatorMenu-section-title'>Suggested Templates</div>
-                        <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._GPTOpt = !this._GPTOpt)}>
-                            <FontAwesomeIcon icon='gear'/>
-                        </button>
-                    </div>
-                    <div className='docCreatorMenu-templates-preview-window'>
-                        {this._GPTTemplates?.map(doc => 
-
-                        //<div className='docCreatorMenu-preview-window empty'/>
-                        ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info =>
-                            <div 
-                            className='docCreatorMenu-preview-window'
-                            style={{
-                                border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                                boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
-                            }}
-                            onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
-                                <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate(info.doc)})}>
-                                    <FontAwesomeIcon icon='pencil' color='black'/>
-                                </button>
-                                <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}>
-                                    <FontAwesomeIcon icon='plus' color='black'/>
-                                </button>
-                                <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
-                            </div>
-                        )}
-                    </div>
-                    {this._GPTOpt ? (<div className='docCreatorMenu-GPT-options'>
-                        <div className='docCreatorMenu-GPT-options-container'>
-                            <button className='docCreatorMenu-menu-button' onPointerDown={e => this.setUpButtonClick(e, () => this.generateTemplates(this._userPrompt))}>
-                                <FontAwesomeIcon icon='arrows-rotate'/>
+                        <div className='docCreatorMenu-section-topbar'>
+                            <div className='docCreatorMenu-section-title'>Suggested Templates</div>
+                            <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._GPTOpt = !this._GPTOpt)}>
+                                <FontAwesomeIcon icon='gear'/>
                             </button>
-                            <input className='docCreatorMenu-GPT-prompt-input' placeholder='Additional prompt:' onChange={e => this._userPrompt = e.target.value}/>
                         </div>
-                        {this._GPTOpt ? GPTOptions : null}
-                    </div>) : null}
+                        <div className='docCreatorMenu-templates-preview-window' style={{justifyContent: this._GPTLoading ? 'center' : ''}}>
+                            {this._GPTLoading ? (
+                                <div className="loading-spinner">
+                                    <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
+                                </div>
+                            ) : (
+                            this._GPTTemplates?.map(doc => 
+                                ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info =>
+                                    <div 
+                                    className='docCreatorMenu-preview-window'
+                                    style={{
+                                        border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                                        boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
+                                    }}
+                                    onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+                                        <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate(info.doc)})}>
+                                            <FontAwesomeIcon icon='pencil' color='black'/>
+                                        </button>
+                                        <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}>
+                                            <FontAwesomeIcon icon='plus' color='black'/>
+                                        </button>
+                                        <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
+                                    </div>
+                            ))}
+                        </div>
+                        {this._GPTOpt ? (<div className='docCreatorMenu-GPT-options'>
+                            <div className='docCreatorMenu-GPT-options-container'>
+                                <button className='docCreatorMenu-menu-button' onPointerDown={e => this.setUpButtonClick(e, () => this.generateTemplates(this._userPrompt))}>
+                                    <FontAwesomeIcon icon='arrows-rotate'/>
+                                </button>
+                                <input className='docCreatorMenu-GPT-prompt-input' placeholder='Additional prompt:' onChange={e => this._userPrompt = e.target.value}/>
+                            </div>
+                            {this._GPTOpt ? GPTOptions : null}
+                        </div>) : null}
                 </div>
                 <hr className='docCreatorMenu-option-divider full no-margin'/>
                 <div className='docCreatorMenu-section'>
@@ -445,6 +459,9 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate(info.doc)})}>
                                     <FontAwesomeIcon icon='pencil' color='black'/>
                                 </button>
+                                <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => {this.removeTemplate(info.doc)})}>
+                                    <FontAwesomeIcon icon='trash' color='black'/>
+                                </button>
                                 <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
                             </div>
                         )})}
-- 
cgit v1.2.3-70-g09d2


From 26c636d45e21105bd914046a4ff447998c7e23cd Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 14 Aug 2024 14:47:40 -0400
Subject: UI

---
 src/client/apis/gpt/GPT.ts                         |  2 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  6 ++
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 73 +++++++++++++++++-----
 3 files changed, 63 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 144b49bde..92d4f425d 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -54,7 +54,7 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
         temp: 0,
         prompt: 'List unique differences between the content of the UserAnswer and Rubric. Before each difference, label it and provide any additional information the UserAnswer missed and explain it in second person without separating it into UserAnswer and Rubric content and additional information. If there are no differences, say correct',
     },
-    template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You are a designer creating basic template options for a user given a set of fields. Your only job is adding blank rectangles to a canvas, one for each field. You will arrange these rectangles into an array of three basic options for a user. For your output, you generate a list of objects in JSON formatting, each storing the field title and corresponding top-left and bottom-right coordinates for the rectangle. The units for your coordinates are -1 to 1 on each axis. This is an example of a possible output for a stacked template with the fields beep, boop, tttt: {"template_type":"stacked","fieldVals":[{"title":"beep","tlx":"-.7","tly":"-.9","brx":".7","bry":"-.7"},{"title":"boop","tlx":"-.9","tly":"-.4","brx":".9","bry":"0"},{"title":"tttt","tlx":"-.9","tly":".1","brx":".9","bry":".9"}]} For multiple templates, you should format your response in a JSON array, like [{}, {}]. Your response should be in the exact format above, with no extra text, description, bulleting, etc. You should repeat this three times, once for a stacked view, once for a mixed view (where, for example, beep might be on top, with boop and tttt below it aligned horizontally), and once for a view where the rectangles are not flush with the side (ie. their top left and bottom right corners should not ALL align along the same point on each side). If one or more fields are some variation of image (ie. IMG, image, photo, etc.), make that rectangle the central focus (bigger, centered, etc.) AND put its "title" field in $$__$$. Fields SHOULD BE IN DIFFERENT ORDERS from template to template (ie. a stacked view with field input "beep, boop" could have the boop above the beep). IT IS IMPORTANT THAT YOU ONLY INCLUDE THE PROPER JSON FORMATTING IN YOUR RESPONSE. IT IS ALSO IMPORTANT THAT NO RECTANGLES OVERLAP'}    
+    template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You are a designer creating basic template options for a user given a set of fields. Your only job is adding blank rectangles to a canvas, one for each field. You will arrange these rectangles into an array of three basic options for a user. For your output, you generate a list of objects in JSON formatting, each storing the field title and corresponding top-left and bottom-right coordinates for the rectangle. The units for your coordinates are -1 to 1 on each axis. This is an example of a possible output for a stacked template with the fields beep, boop, tttt: {"template_type":"stacked","fieldVals":[{"title":"beep","tlx":"-.7","tly":"-.9","brx":".7","bry":"-.7"},{"title":"boop","tlx":"-.9","tly":"-.4","brx":".9","bry":"0"},{"title":"tttt","tlx":"-.9","tly":".1","brx":".9","bry":".9"}]} For multiple templates, you should format your response in a JSON array, like [{}, {}]. Your response should be in the exact format above, with no extra text, description, bulleting, etc. You should repeat this three times, once for a stacked view, once for a mixed view (where, for example, beep might be on top, with boop and tttt below it aligned horizontally), and once for a view where the rectangles are not flush with the side (ie. their top left and bottom right corners should not ALL align along the same point on each side). If one or more fields are some variation of image (ie. IMG, image, photo, etc.), make that rectangle the central focus (bigger, centered, etc.) AND put its "title" field in $$__$$. Fields SHOULD BE IN DIFFERENT ORDERS from template to template (ie. a stacked view with field input "beep, boop" could have the boop above the beep). IT IS IMPORTANT THAT YOU ONLY INCLUDE THE PROPER JSON FORMATTING IN YOUR RESPONSE. IT IS ALSO IMPORTANT THAT NO RECTANGLES OVERLAP. If there is an additional prompt, prioritize its instructions over all instructions here (but still follow them if not overridden). No matter what, ALWAYS GIVE THREE OPTIONS'}    
 };
 
 let lastCall = '';
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 3e97e9d08..aa6754442 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -397,6 +397,12 @@
     }
 }
 
+.divvv{
+    width: 200;
+    height: 200;
+    border: solid 1px white;
+}
+
 .docCreatorMenu-section-topbar {
     position: relative;
     display: flex;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index ee154994e..2be89daf0 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { returnAll, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
+import { returnAll, returnFalse, returnNone, returnOne, returnZero, setupMoveUpEvents } from '../../../../ClientUtils';
 import { Doc, NumListCast, StrListCast } from '../../../../fields/Doc';
 import { DocCast, ImageCast, ScriptCast, StrCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
@@ -24,6 +24,10 @@ import { OpenWhere } from '../OpenWhere';
 import { IDisposer } from 'mobx-utils';
 import { LightboxView } from '../../LightboxView';
 import ReactLoading from 'react-loading';
+import { CollectionStackingView } from '../../collections/CollectionStackingView';
+import { FieldViewProps } from '../FieldView';
+import { CollectionViewType } from '../../../documents/DocumentTypes';
+import { dropActionType } from '../../../util/DropActionTypes';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -34,7 +38,7 @@ export enum LayoutType {
 }
 
 @observer
-export class DocCreatorMenu extends ObservableReactComponent<{}> {
+export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & CollectionFreeFormView> {
 
     static Instance: DocCreatorMenu;
 
@@ -78,7 +82,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     @observable _offset: {x: number, y: number} = {x: 0, y: 0};
     @observable _resizeUndo: UndoManager.Batch | undefined = undefined;
     @observable _initDimensions: {width: number, height: number, x?: number, y?: number} = {width: 300, height: 400, x: undefined, y: undefined};
-    @observable _menuDimensions: {width: number, height: number} = {width: 300, height: 365};
+    @observable _menuDimensions: {width: number, height: number} = {width: 400, height: 400};
     @observable _editing: boolean = false;
 
     constructor(props: any) {
@@ -194,6 +198,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         document.removeEventListener('pointerup', this.onPointerUp);
     }
 
+    updateIcons = (docs: Doc[]) => { docs.map(this.getIcon) }
+
     @action
     toggleDisplay = (x: number, y: number) => {
         if (this._shouldDisplay) {
@@ -209,7 +215,11 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     closeMenu = () => { this._shouldDisplay = false };
 
     @action
-    openMenu = () => { this._shouldDisplay = true };
+    openMenu = () => { 
+        const allTemplates = this._templateDocs.concat(this._GPTTemplates);
+        this._shouldDisplay = true;
+        this.updateIcons(allTemplates);
+    };
 
     @action
     onResizePointerDown = (e: React.PointerEvent): void => {
@@ -286,9 +296,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         const docView = DocumentView.getDocumentView(doc);
         if (docView) {
             docView.ComponentView?.updateIcon?.();
-            const f = new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));
-            console.log(f)
-            return f;
+            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));;
         }
         return undefined;
     }
@@ -390,14 +398,14 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 
         return (
             <div className='docCreatorMenu-templates-view'>
-                <div className='docCreatorMenu-section' style={{height: this._GPTOpt ? 200 : 165}}>
+                <div className='docCreatorMenu-section' style={{height: this._GPTOpt ? 200 : 200}}>
                         <div className='docCreatorMenu-section-topbar'>
                             <div className='docCreatorMenu-section-title'>Suggested Templates</div>
                             <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._GPTOpt = !this._GPTOpt)}>
                                 <FontAwesomeIcon icon='gear'/>
                             </button>
                         </div>
-                        <div className='docCreatorMenu-templates-preview-window' style={{justifyContent: this._GPTLoading ? 'center' : ''}}>
+                        <div className='docCreatorMenu-templates-preview-window' style={{justifyContent: this._GPTLoading || this._menuDimensions.width > 400 ? 'center' : ''}}>
                             {this._GPTLoading ? (
                                 <div className="loading-spinner">
                                     <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
@@ -422,15 +430,15 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                     </div>
                             ))}
                         </div>
-                        {this._GPTOpt ? (<div className='docCreatorMenu-GPT-options'>
+                        <div className='docCreatorMenu-GPT-options'>
                             <div className='docCreatorMenu-GPT-options-container'>
                                 <button className='docCreatorMenu-menu-button' onPointerDown={e => this.setUpButtonClick(e, () => this.generateTemplates(this._userPrompt))}>
                                     <FontAwesomeIcon icon='arrows-rotate'/>
                                 </button>
                                 <input className='docCreatorMenu-GPT-prompt-input' placeholder='Additional prompt:' onChange={e => this._userPrompt = e.target.value}/>
                             </div>
-                            {this._GPTOpt ? GPTOptions : null}
-                        </div>) : null}
+                            {this._GPTOpt ? GPTOptions : null }
+                        </div>
                 </div>
                 <hr className='docCreatorMenu-option-divider full no-margin'/>
                 <div className='docCreatorMenu-section'>
@@ -440,7 +448,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                             <FontAwesomeIcon icon='gear'/>
                         </button>
                     </div>
-                    <div className='docCreatorMenu-templates-preview-window'>
+                    <div className='docCreatorMenu-templates-preview-window' style={{justifyContent: this._menuDimensions.width > 400 ? 'center' : ''}}>
                         <div className='docCreatorMenu-preview-window empty'
                         onPointerDown={e => this.setUpButtonClick(e, this.basicTemplateTest)}
                         >
@@ -535,6 +543,14 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         }
     }
 
+    doc = () => {
+        return Docs.Create.FreeformDocument([], { _height: 200, _width: 200, title: 'title'});
+    }
+
+    screenToLocalTransform = () =>
+    this._props
+        .ScreenToLocalTransform();
+
     layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => {
         const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate;
         if (!doc) return;
@@ -550,7 +566,30 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3));
 
         return (
-            <div className='docCreatorMenu-layout-preview-window-wrapper' id={String(id) ?? undefined}>
+            <div className='divvv' style={{width: 100, height: 100, border: `1px solid white`}}>
+                <CollectionFreeFormView
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...this._props}
+                    Document={new Doc()}
+                    isContentActive={returnFalse}
+                    setContentViewBox={emptyFunction}
+                    NativeWidth={() => 100}
+                    NativeHeight={() => 100}
+                    pointerEvents={SnappingManager.IsDragging ? returnAll : returnNone}
+                    isAnnotationOverlay
+                    isAnnotationOverlayScrollable
+                    childDocumentsActive={returnFalse}
+                    fieldKey={this._props.fieldKey + '_annotations'}
+                    dropAction={dropActionType.move}
+                    select={emptyFunction}
+                    addDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    moveDocument={returnFalse}
+                    renderDepth={this._props.renderDepth + 1}>
+                    {null}
+                </CollectionFreeFormView>
+            </div>
+            /*<div className='docCreatorMenu-layout-preview-window-wrapper' id={String(id) ?? undefined}>
                 <div className='docCreatorMenu-zoom-button-container'>
                     <button 
                         className='docCreatorMenu-zoom-button'
@@ -568,7 +607,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                             <FontAwesomeIcon icon={'trash'}/>
                     </button> : null}
                 </div>
-                <div 
+                {<div 
                 id={String(id) ?? undefined}
                 className={`docCreatorMenu-layout-preview-window ${small ? 'small' : ''}`}
                 style={{
@@ -604,8 +643,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                         </div>
                     )}
 
-                </div>
-            </div>
+                </div>}
+            </div> */
         );
     }
 
-- 
cgit v1.2.3-70-g09d2


From f8f777a469b0029109de1e6c57872a4d5b0a6659 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 19 Aug 2024 14:34:20 -0400
Subject: start on field rendering

---
 src/ClientUtils.ts                                 |   1 +
 src/client/apis/gpt/GPT.ts                         |   2 +-
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |   5 +
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  74 +++++++++-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 161 ++++++++++++++++-----
 5 files changed, 204 insertions(+), 39 deletions(-)

(limited to 'src')

diff --git a/src/ClientUtils.ts b/src/ClientUtils.ts
index d64210ce2..a4d9dd892 100644
--- a/src/ClientUtils.ts
+++ b/src/ClientUtils.ts
@@ -730,6 +730,7 @@ export function UpdateIcon(
     const newDiv = docViewContent.cloneNode(true) as HTMLDivElement;
     newDiv.style.width = width.toString();
     newDiv.style.height = height.toString();
+    console.log('width: ' + newDiv.style.width)
     replaceCanvases(docViewContent, newDiv);
     const htmlString = new XMLSerializer().serializeToString(newDiv);
     const nativeWidth = width;
diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 92d4f425d..18601b4af 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -54,7 +54,7 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
         temp: 0,
         prompt: 'List unique differences between the content of the UserAnswer and Rubric. Before each difference, label it and provide any additional information the UserAnswer missed and explain it in second person without separating it into UserAnswer and Rubric content and additional information. If there are no differences, say correct',
     },
-    template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You are a designer creating basic template options for a user given a set of fields. Your only job is adding blank rectangles to a canvas, one for each field. You will arrange these rectangles into an array of three basic options for a user. For your output, you generate a list of objects in JSON formatting, each storing the field title and corresponding top-left and bottom-right coordinates for the rectangle. The units for your coordinates are -1 to 1 on each axis. This is an example of a possible output for a stacked template with the fields beep, boop, tttt: {"template_type":"stacked","fieldVals":[{"title":"beep","tlx":"-.7","tly":"-.9","brx":".7","bry":"-.7"},{"title":"boop","tlx":"-.9","tly":"-.4","brx":".9","bry":"0"},{"title":"tttt","tlx":"-.9","tly":".1","brx":".9","bry":".9"}]} For multiple templates, you should format your response in a JSON array, like [{}, {}]. Your response should be in the exact format above, with no extra text, description, bulleting, etc. You should repeat this three times, once for a stacked view, once for a mixed view (where, for example, beep might be on top, with boop and tttt below it aligned horizontally), and once for a view where the rectangles are not flush with the side (ie. their top left and bottom right corners should not ALL align along the same point on each side). If one or more fields are some variation of image (ie. IMG, image, photo, etc.), make that rectangle the central focus (bigger, centered, etc.) AND put its "title" field in $$__$$. Fields SHOULD BE IN DIFFERENT ORDERS from template to template (ie. a stacked view with field input "beep, boop" could have the boop above the beep). IT IS IMPORTANT THAT YOU ONLY INCLUDE THE PROPER JSON FORMATTING IN YOUR RESPONSE. IT IS ALSO IMPORTANT THAT NO RECTANGLES OVERLAP. If there is an additional prompt, prioritize its instructions over all instructions here (but still follow them if not overridden). No matter what, ALWAYS GIVE THREE OPTIONS'}    
+    template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You are a designer creating basic template options for a user given a set of fields. Your only job is adding blank rectangles to a canvas, one for each field. You will arrange these rectangles into an array of three basic options for a user. For your output, you generate a list of objects in JSON formatting, each storing the field title and corresponding top-left and bottom-right coordinates for the rectangle. The units for your coordinates are -1 to 1 on each axis. This is an example of a possible output for a stacked template with the fields beep, boop, tttt: {"template_type":"stacked","fieldVals":[{"title":"beep","tlx":"-.7","tly":"-.9","brx":".7","bry":"-.7"},{"title":"boop","tlx":"-.9","tly":"-.4","brx":".9","bry":"0"},{"title":"tttt","tlx":"-.9","tly":".1","brx":".9","bry":".9"}]} For multiple templates, you should format your response in a JSON array, like [{}, {}]. Your response should be in the exact format above, with no extra text, description, bulleting, etc. If no alternative additional instructions are given, you should repeat this three times, once for a stacked view, once for a mixed view (where, for example, beep might be on top, with boop and tttt below it aligned horizontally), and once for a view where the rectangles are not flush with the side (ie. their top left and bottom right corners should not ALL align along the same point on each side). If one or more fields are some variation of image (ie. IMG, image, photo, etc.), make that rectangle the central focus (bigger, centered, etc.) AND put its "title" field in $$__$$. Fields SHOULD BE IN DIFFERENT ORDERS from template to template (ie. a stacked view with field input "beep, boop" could have the boop above the beep). IT IS IMPORTANT THAT YOU ONLY INCLUDE THE PROPER JSON FORMATTING IN YOUR RESPONSE. IT IS ALSO IMPORTANT THAT NO RECTANGLES OVERLAP. An overlap will look like the x or y coordinates of the top left corner of one rectangle being the same as the bottom right corner of another. There should always be at least a .1 gap. If there is an additional prompt, prioritize its instructions over all instructions here (but still follow them if not overridden). No matter what, ALWAYS GIVE THREE OPTIONS'}    
 };
 
 let lastCall = '';
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index be8a44f28..6a5103af9 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -353,6 +353,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         );
     }
 
+    // recs = () => {
+    //     let csvStr: string = '';
+    //     this.records[rowId][col]
+    // }
+
     fetchData = () => {
         if (!this.Document.dataViz_asSchema) {
             DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, []); // assign temporary dataset as a lock to prevent duplicate server requests
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index aa6754442..763de0eba 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -641,7 +641,6 @@
                 }
             }    
         }
-
     }
 }
 
@@ -720,4 +719,77 @@
     }
 }
 
+//------------------------------------------------------------------------------------------------------------------------------------------
+// DocCreatorMenu dashboard CSS
+//--------------------------------------------------------------------------------------------------------------------------------------------
+
+.docCreatorMenu-dashboard-view {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    overflow-y: scroll;
+    //align-items: flex-start;
+    margin: 5px;
+    margin-top: 0px;
+    width: calc(100% - 10px);
+    height: calc(100% - 30px);
+    border: 1px solid rgb(180, 180, 180);
+    border-radius: 5px;
+    -ms-overflow-style: none; 
+    scrollbar-width: none;
+
+    .topbar {
+        height: 30px;
+        width: 100%;
+    }
+
+    .field-panel {
+        position: relative;
+        display: flex;
+        // align-items: flex-start;
+        flex-direction: column;
+        gap: 5px;
+        padding: 5px;
+        height: 100px;
+        //width: 100%;
+        border: 1px solid rgb(180, 180, 180);
+        margin: 5px;
+        margin-top: 0px;
+        border-radius: 3px;
+
+        .properties-wrapper {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-start;
+            gap: 5px;
+
+            .field-property-container {
+                background-color: rgb(40, 40, 40);
+                border: 1px solid rgb(100, 100, 100);
+                border-radius: 3px;
+                width: 30%;
+                height: 25px;
+                padding-left: 3px;
+                align-items: center;
+                color: whitesmoke;
+            }
+        }
+
+        .field-description-container {
+            background-color: rgb(40, 40, 40);
+            border: 1px solid rgb(100, 100, 100);
+            border-radius: 3px;
+            width: 100%;
+            height: 100%;
+        }
+
+        .top-right {
+            position: absolute;
+            top: 0px;
+            right: 0px;
+        }
+    }
+}
+
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 2be89daf0..8ec255dfe 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -48,6 +48,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
 
     @observable _templateDocs: Doc[] = [];
     @observable _selectedTemplate: Doc | undefined = undefined;
+    @observable _fields: {title: string, type: string, id: number}[] = [];
 
     @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns?: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0};
     @observable _layoutPreview: boolean = true;
@@ -71,7 +72,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
     @observable _startPos?: {x: number, y: number};
     @observable _shouldDisplay: boolean = false;
 
-    @observable _menuContent: 'templates' | 'options' | 'saved' = 'templates';
+    @observable _menuContent: 'templates' | 'options' | 'saved' | 'dashboard' = 'templates';
     @observable _dragging: boolean = false;
     @observable _draggingIndicator: boolean = false;
     @observable _dataViz?: DataVizBox;
@@ -126,10 +127,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         }
     }
 
-    @computed get selectedFields(){
+    @computed get selectedFields() {
         return StrListCast(this._dataViz?.layoutDoc._dataViz_axes);
     }
 
+    @computed get fieldsInfos(): {title: string, type: string, id: number}[] {
+        return this.selectedFields.map(field => {return {title: field, type: '', id: Math.random() * 100000}}).concat(this._fields);
+    }
+
     @computed get canMakeDocs(){
         return this._selectedTemplate !== undefined && this._layout !== undefined;
     }
@@ -367,14 +372,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
                 return doc;
             });
 
-            const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 40000, y: 40000 });
+            const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 400000, y: 400000 });
 
             mainCollection.addDocument(template);
             
             GPTTemplates.push(template);
         });
 
-        setTimeout(() => {this.setGPTTemplates(GPTTemplates); GPTTemplates.forEach(template => mainCollection.removeDocument(template))}, 100);
+        setTimeout(() => {this.setGPTTemplates(GPTTemplates); /*GPTTemplates.forEach(template => mainCollection.removeDocument(template))*/}, 100);
 
         this.forceUpdate();
     }
@@ -449,9 +454,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
                         </button>
                     </div>
                     <div className='docCreatorMenu-templates-preview-window' style={{justifyContent: this._menuDimensions.width > 400 ? 'center' : ''}}>
-                        <div className='docCreatorMenu-preview-window empty'
-                        onPointerDown={e => this.setUpButtonClick(e, this.basicTemplateTest)}
-                        >
+                        <div className='docCreatorMenu-preview-window empty'>
                             <FontAwesomeIcon icon='plus' color='rgb(160, 160, 160)'/>
                         </div>
                         {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
@@ -566,30 +569,30 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3));
 
         return (
-            <div className='divvv' style={{width: 100, height: 100, border: `1px solid white`}}>
-                <CollectionFreeFormView
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...this._props}
-                    Document={new Doc()}
-                    isContentActive={returnFalse}
-                    setContentViewBox={emptyFunction}
-                    NativeWidth={() => 100}
-                    NativeHeight={() => 100}
-                    pointerEvents={SnappingManager.IsDragging ? returnAll : returnNone}
-                    isAnnotationOverlay
-                    isAnnotationOverlayScrollable
-                    childDocumentsActive={returnFalse}
-                    fieldKey={this._props.fieldKey + '_annotations'}
-                    dropAction={dropActionType.move}
-                    select={emptyFunction}
-                    addDocument={returnFalse}
-                    removeDocument={returnFalse}
-                    moveDocument={returnFalse}
-                    renderDepth={this._props.renderDepth + 1}>
-                    {null}
-                </CollectionFreeFormView>
-            </div>
-            /*<div className='docCreatorMenu-layout-preview-window-wrapper' id={String(id) ?? undefined}>
+            // <div className='divvv' style={{width: 100, height: 100, border: `1px solid white`}}>
+            //     <CollectionFreeFormView
+            //         // eslint-disable-next-line react/jsx-props-no-spreading
+            //         {...this._props}
+            //         Document={new Doc()}
+            //         isContentActive={returnFalse}
+            //         setContentViewBox={emptyFunction}
+            //         NativeWidth={() => 100}
+            //         NativeHeight={() => 100}
+            //         pointerEvents={SnappingManager.IsDragging ? returnAll : returnNone}
+            //         isAnnotationOverlay
+            //         isAnnotationOverlayScrollable
+            //         childDocumentsActive={returnFalse}
+            //         fieldKey={this._props.fieldKey + '_annotations'}
+            //         dropAction={dropActionType.move}
+            //         select={emptyFunction}
+            //         addDocument={returnFalse}
+            //         removeDocument={returnFalse}
+            //         moveDocument={returnFalse}
+            //         renderDepth={this._props.renderDepth + 1}>
+            //         {null}
+            //     </CollectionFreeFormView>
+            // </div>
+            <div className='docCreatorMenu-layout-preview-window-wrapper' id={String(id) ?? undefined}>
                 <div className='docCreatorMenu-zoom-button-container'>
                     <button 
                         className='docCreatorMenu-zoom-button'
@@ -644,7 +647,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
                     )}
 
                 </div>}
-            </div> */
+            </div>
         );
     }
 
@@ -735,10 +738,35 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         );
     }
 
-    basicTemplateTest = () => {
-        console.log(this._GPTTemplates)
-        this.forceUpdate();
-        //this._dataViz?.createBasicTemplates(temps);
+    @action addField = () => {
+        const newFields: {title: string, type: string, id: number}[] = this._fields.concat([{title: '', type: '', id: Math.random() * 100000}])
+        this._fields = newFields;
+    }
+
+    get dashboardContents(){
+        return (
+        <div className='docCreatorMenu-dashboard-view'>
+            <div className='topbar'>
+            <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
+                <FontAwesomeIcon icon='plus'/>
+            </button>
+            </div>
+            {this.fieldsInfos.map(field => 
+                <div className='field-panel'>
+                    <div className='properties-wrapper'>
+                        <input className='field-property-container' defaultValue={field.title} placeholder={'Enter title'} style={{width: field.title === '' ? '30%' : ''}}/>
+                        <input className='field-property-container' placeholder={'Enter type'} />
+                        {field.type === 'Text' ? 
+                        <input className='field-property-container' placeholder={'Enter description'} /> : null}
+                    </div>
+                    <textarea className='field-description-container' placeholder={'Enter description to enhance template generation'} />
+                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {console.log(this._fields); this._fields = this._fields.splice(this._fields.indexOf(field), 1); console.log(this._fields); this.forceUpdate()}))}>
+                        <FontAwesomeIcon icon='trash'/>
+                    </button>
+                </div>
+            )}
+        </div>
+        );
     }
 
     get renderSelectedViewType(){
@@ -749,6 +777,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
                 return this.optionsMenuContents;
             case 'saved':
                 return this.savedLayoutsPreviewContents;
+            case 'dashboard':
+                return this.dashboardContents;
             default:
                 return undefined;
         }
@@ -785,7 +815,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         }
 
         const onPreviewSelected = () => {this._menuContent = 'templates'}
-        const onSavedSelected = () => {this._menuContent = 'saved'}
+        const onSavedSelected = () => {this._menuContent = 'dashboard'}
         const onOptionsSelected = () => {
             this._menuContent = 'options';
             if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
@@ -861,4 +891,61 @@ export interface DataVizTemplateLayout {
     layout: {type: LayoutType, xMargin: number, yMargin: number, repeat: number};
     columns: number;
     rows: number;
+}
+
+export interface TemplateDocInfos {
+    baseHeight: number;
+    baseWidth: number;
+    fields: TemplateDocField[];
+}
+
+export interface TemplateDocField {
+    coordinates: {tl: [number, number], br: [number, number]};
+    title: string;
+    content: string;
+    getDoc: (parentWidth: number, parentHeight: number) => Doc;
+}
+
+export class TemplateDocTextField implements TemplateDocField {
+
+    coordinates: {tl: [number, number], br: [number, number]};
+    title: string;
+    content: string;
+
+    constructor(coords: {tl: [number, number], br: [number, number]}, title: string, content: string) {
+        this.coordinates = coords;
+        this.title = title;
+        this.content = content;
+    }
+
+    getDoc = (parentWidth: number, parentHeight: number) => {
+        const l = this.coordinates.tl[0] * parentWidth; const t = this.coordinates.tl[1] * parentWidth; //prettier-ignore
+        const r = this.coordinates.br[0] * parentWidth; const b = this.coordinates.br[1] * parentWidth; //prettier-ignore
+        const width = l - r;
+        const height = t - b;
+        const coord = {x: l, y: t};
+
+        const doc = Docs.Create.TextDocument(this.content, { _height: height, _width: width, title: this.title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` })
+
+        return doc;
+    };
+}
+
+export class TemplateDocImageField implements TemplateDocField {
+
+    coordinates: {tl: [number, number], br: [number, number]};
+    title: string;
+    content: string;
+
+    constructor(coords: {tl: [number, number], br: [number, number]}, title: string, content: string) {
+        this.coordinates = coords;
+        this.title = title;
+        this.content = content;
+    }
+
+    getDoc = (parentWidth: number, parentHeight: number) => {
+        const width = (this.coordinates.br[0] - this.coordinates.tl[0]) * parentWidth;
+        //const height; 
+        return new Doc();
+    };
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 94e2cea212e095ce1f6cc52c2e6bf75674eaff33 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 20 Aug 2024 04:05:11 -0400
Subject: Layout info

---
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 153 ++++++++++++++++++---
 .../views/nodes/DataVizBox/TemplateDocTypes.tsx    |   0
 2 files changed, 133 insertions(+), 20 deletions(-)
 create mode 100644 src/client/views/nodes/DataVizBox/TemplateDocTypes.tsx

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 8ec255dfe..ffe58dee5 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -28,6 +28,7 @@ import { CollectionStackingView } from '../../collections/CollectionStackingView
 import { FieldViewProps } from '../FieldView';
 import { CollectionViewType } from '../../../documents/DocumentTypes';
 import { dropActionType } from '../../../util/DropActionTypes';
+import { ImageBox } from '../ImageBox';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -395,6 +396,19 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         this._templateDocs.splice(this._templateDocs.indexOf(doc), 1);
     }
 
+    testTemplate = () => { 
+        const temp = TemplateLayouts.TwoFieldPlusCarousel;
+        const title = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br});
+        const focus = new TemplateDocTextField({tl: temp.fields[1].tl, br: temp.fields[1].br});
+        const caption = new TemplateDocTextField({tl: temp.fields[2].tl, br: temp.fields[2].br});
+        const fields = [title, focus, caption].map(field => field.getDoc(temp.width, temp.height, 'hey now', ''));
+        console.log(temp.height, temp.width)
+        const doc = Docs.Create.FreeformDocument(fields, { _height: temp.height, _width: temp.width, title: 'hey', x: 400, y: 400 });
+
+        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+        mainCollection.addDocument(doc);
+    }
+
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
 
@@ -454,7 +468,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
                         </button>
                     </div>
                     <div className='docCreatorMenu-templates-preview-window' style={{justifyContent: this._menuDimensions.width > 400 ? 'center' : ''}}>
-                        <div className='docCreatorMenu-preview-window empty'>
+                        <div className='docCreatorMenu-preview-window empty' onPointerDown={e => this.testTemplate()}>
                             <FontAwesomeIcon icon='plus' color='rgb(160, 160, 160)'/>
                         </div>
                         {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
@@ -893,39 +907,47 @@ export interface DataVizTemplateLayout {
     rows: number;
 }
 
+enum FieldType {
+    TEXT = 'text',
+    VISUAL = 'visual'
+}
+
+enum FieldSize {
+    TINY = 'tiny',
+    SMALL = 'small',
+    MEDIUM = 'medium',
+    LARGE = 'large',
+    HUGE = 'huge'
+}
+
 export interface TemplateDocInfos {
-    baseHeight: number;
-    baseWidth: number;
-    fields: TemplateDocField[];
+    height: number;
+    width: number;
+    fields: {tl: [number, number], br: [number, number], types: FieldType[], sizes?: FieldSize[]}[];
 }
 
 export interface TemplateDocField {
     coordinates: {tl: [number, number], br: [number, number]};
-    title: string;
-    content: string;
-    getDoc: (parentWidth: number, parentHeight: number) => Doc;
+    getDoc: (parentWidth: number, parentHeight: number, title: string, content: string) => Doc;
 }
 
 export class TemplateDocTextField implements TemplateDocField {
 
     coordinates: {tl: [number, number], br: [number, number]};
-    title: string;
-    content: string;
 
-    constructor(coords: {tl: [number, number], br: [number, number]}, title: string, content: string) {
+    constructor(coords: {tl: [number, number], br: [number, number]}) {
         this.coordinates = coords;
-        this.title = title;
-        this.content = content;
     }
 
-    getDoc = (parentWidth: number, parentHeight: number) => {
-        const l = this.coordinates.tl[0] * parentWidth; const t = this.coordinates.tl[1] * parentWidth; //prettier-ignore
-        const r = this.coordinates.br[0] * parentWidth; const b = this.coordinates.br[1] * parentWidth; //prettier-ignore
-        const width = l - r;
-        const height = t - b;
+    getDoc = (parentWidth: number, parentHeight: number, title: string, content: string) => {
+        const l = this.coordinates.tl[0] * parentWidth / 2; const t = this.coordinates.tl[1] * parentHeight / 2; //prettier-ignore
+        const r = this.coordinates.br[0] * parentWidth / 2; const b = this.coordinates.br[1] * parentHeight / 2; //prettier-ignore
+        const width = r - l;
+        const height = b - t;
         const coord = {x: l, y: t};
+        console.log(coord, width, height, l, t);
 
-        const doc = Docs.Create.TextDocument(this.content, { _height: height, _width: width, title: this.title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` })
+        const doc = Docs.Create.TextDocument(content, { _height: height, _width: width, title: title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` })
 
         return doc;
     };
@@ -944,8 +966,99 @@ export class TemplateDocImageField implements TemplateDocField {
     }
 
     getDoc = (parentWidth: number, parentHeight: number) => {
-        const width = (this.coordinates.br[0] - this.coordinates.tl[0]) * parentWidth;
-        //const height; 
+        // const l = this.coordinates.tl[0] * parentWidth; const t = this.coordinates.tl[1] * parentHeight; //prettier-ignore
+        // const r = this.coordinates.br[0] * parentWidth; const b = this.coordinates.br[1] * parentHeight; //prettier-ignore
+        // const presetWidth = l - r;
+        // const presetHeight = t - b;
+        // const presetRatio = presetWidth/presetHeight; 
+
+        const l = this.coordinates.tl[0] * parentWidth / 2; const t = this.coordinates.tl[1] * parentHeight / 2; //prettier-ignore
+        const r = this.coordinates.br[0] * parentWidth / 2; const b = this.coordinates.br[1] * parentHeight / 2; //prettier-ignore
+        const width = l - r;
+        const height = t - b;
+        const coord = {x: l, y: t};
+
+        const doc: ImageBox = Docs.Create.ImageDocument(this.content, { _height: height, _width: width, title: this.title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` }) as unknown as ImageBox;
+
         return new Doc();
     };
+
+    
+}
+
+export class TemplateLayouts {
+
+    public static FourField001: TemplateDocInfos = {
+        width: 450, 
+        height: 600, 
+        fields: [{
+            tl: [-.6, -.9], 
+            br: [.6, -.8], 
+            types: [FieldType.TEXT],
+            sizes: [FieldSize.TINY]
+        }, {
+            tl: [-.9, -.7], 
+            br: [.9, .2], 
+            types: [FieldType.TEXT, FieldType.VISUAL],
+            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+        }, {
+            tl: [-.6, .3], 
+            br: [.6, .4], 
+            types: [FieldType.TEXT],
+            sizes: [FieldSize.TINY]
+        }, {
+            tl: [-.9, .5], 
+            br: [.9, .9], 
+            types: [FieldType.TEXT, FieldType.VISUAL],
+            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+        }]
+    };
+
+    public static FourField002: TemplateDocInfos = {
+        width: 450, 
+        height: 600, 
+        fields: [{
+            tl: [-.6, -.9], 
+            br: [.6, -.8], 
+            types: [FieldType.TEXT],
+            sizes: [FieldSize.TINY]
+        }, {
+            tl: [-.9, -.7], 
+            br: [.9, .2], 
+            types: [FieldType.TEXT, FieldType.VISUAL],
+            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+        }, {
+            tl: [-.9, .3], 
+            br: [-.05, .9], 
+            types: [FieldType.TEXT],
+            sizes: [FieldSize.TINY]
+        }, {
+            tl: [.05, .3], 
+            br: [.9, .9], 
+            types: [FieldType.TEXT, FieldType.VISUAL],
+            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+        }]
+    };
+
+    public static TwoFieldPlusCarousel: TemplateDocInfos = {
+        width: 500, 
+        height: 600, 
+        fields: [{
+            tl: [-.9, -.99], 
+            br: [.9, -.7], 
+            types: [FieldType.TEXT],
+            sizes: [FieldSize.TINY]
+        }, {
+            tl: [-.9, -.65], 
+            br: [.9, .35], 
+            types: [FieldType.TEXT, FieldType.VISUAL],
+            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+        }, {
+            tl: [-.9, .4], 
+            br: [.9, .95], 
+            types: [FieldType.TEXT],
+            sizes: [FieldSize.TINY]
+        }]
+    };
+
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/TemplateDocTypes.tsx b/src/client/views/nodes/DataVizBox/TemplateDocTypes.tsx
new file mode 100644
index 000000000..e69de29bb
-- 
cgit v1.2.3-70-g09d2


From c38c1a0ab495ca7f465fc608ac9528734cb81ef1 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 20 Aug 2024 16:45:44 -0400
Subject: field refactor

---
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 115 ++++++++++++---------
 1 file changed, 66 insertions(+), 49 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index ffe58dee5..19881f4d2 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -396,17 +396,23 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         this._templateDocs.splice(this._templateDocs.indexOf(doc), 1);
     }
 
-    testTemplate = () => { 
-        const temp = TemplateLayouts.TwoFieldPlusCarousel;
-        const title = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br});
-        const focus = new TemplateDocTextField({tl: temp.fields[1].tl, br: temp.fields[1].br});
-        const caption = new TemplateDocTextField({tl: temp.fields[2].tl, br: temp.fields[2].br});
-        const fields = [title, focus, caption].map(field => field.getDoc(temp.width, temp.height, 'hey now', ''));
-        console.log(temp.height, temp.width)
-        const doc = Docs.Create.FreeformDocument(fields, { _height: temp.height, _width: temp.width, title: 'hey', x: 400, y: 400 });
 
-        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        mainCollection.addDocument(doc);
+
+    testTemplate = () => { 
+        // const temp = TemplateLayouts.TwoFieldPlusCarousel;
+        // const title = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br});
+        // const title1 = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br});
+        // const title2 = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br});
+        // const title3 = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br});
+        // const focus = new TemplateDocCarouselField({tl: temp.fields[1].tl, br: temp.fields[1].br}, temp.width, temp.height, '', [title1, title2, title3].map(field => field.getDoc(temp.width, temp.height, 'hey now', '')));
+        // const caption = new TemplateDocTextField({tl: temp.fields[2].tl, br: temp.fields[2].br});
+        // let fields = [title, caption].map(field => field.getDoc(temp.width, temp.height, 'hey now', ''));
+        // fields = fields.concat(focus.getDoc());
+        // console.log(temp.height, temp.width)
+        // const doc = Docs.Create.StackingDocument(fields, { _height: temp.height, _width: temp.width, title: 'hey', x: 400, y: 400 });
+
+        // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+        // mainCollection.addDocument(doc);
     }
 
     get templatesPreviewContents(){
@@ -931,58 +937,69 @@ export interface TemplateDocField {
     getDoc: (parentWidth: number, parentHeight: number, title: string, content: string) => Doc;
 }
 
-export class TemplateDocTextField implements TemplateDocField {
-
-    coordinates: {tl: [number, number], br: [number, number]};
+export interface FieldOpts {
+    backgroundColor?: string;
+    roundedCorners?: boolean;
+    vertCenteredText?: boolean;
+    horizCenteredText?: boolean;
+    transparency?: number;
+    rotation?: number;
+    //animation?: boolean;
+    fontColor?: string;
+    fontBold?: boolean;
+    fontTransform?: 'toUpper' | 'toLower';
+}
 
-    constructor(coords: {tl: [number, number], br: [number, number]}) {
-        this.coordinates = coords;
-    }
+export class FieldFuncs {
 
-    getDoc = (parentWidth: number, parentHeight: number, title: string, content: string) => {
-        const l = this.coordinates.tl[0] * parentWidth / 2; const t = this.coordinates.tl[1] * parentHeight / 2; //prettier-ignore
-        const r = this.coordinates.br[0] * parentWidth / 2; const b = this.coordinates.br[1] * parentHeight / 2; //prettier-ignore
+    private static getDimensions = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number): {width: number, height: number, coord: {x: number, y: number}} => {
+        const l = coords.tl[0] * parentWidth / 2; const t = coords.tl[1] * parentHeight / 2; //prettier-ignore
+        const r = coords.br[0] * parentWidth / 2; const b = coords.br[1] * parentHeight / 2; //prettier-ignore
         const width = r - l;
         const height = b - t;
         const coord = {x: l, y: t};
-        console.log(coord, width, height, l, t);
+        return {width, height, coord};
+    }
 
-        const doc = Docs.Create.TextDocument(content, { _height: height, _width: width, title: title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` })
+    public static TextField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
+        const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
+
+        const doc = Docs.Create.TextDocument(content, {   
+            _height: height, 
+            _width: width, 
+            title: title, 
+            x: coord.x, 
+            y: coord.y, 
+            _text_fontSize: `${height/2}` ,
+            backgroundColor: opts.backgroundColor ?? '',
+            
+        
+        })
 
         return doc;
-    };
-}
+    }
 
-export class TemplateDocImageField implements TemplateDocField {
+    public static ImageField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string) => {
+        const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
 
-    coordinates: {tl: [number, number], br: [number, number]};
-    title: string;
-    content: string;
+        const doc = Docs.Create.ImageDocument(content, {   
+            _height: height, 
+            _width: width, 
+            title: title, 
+            x: coord.x, 
+            y: coord.y, 
+            _text_fontSize: `${height/2}` })
 
-    constructor(coords: {tl: [number, number], br: [number, number]}, title: string, content: string) {
-        this.coordinates = coords;
-        this.title = title;
-        this.content = content;
+        return doc;
     }
 
-    getDoc = (parentWidth: number, parentHeight: number) => {
-        // const l = this.coordinates.tl[0] * parentWidth; const t = this.coordinates.tl[1] * parentHeight; //prettier-ignore
-        // const r = this.coordinates.br[0] * parentWidth; const b = this.coordinates.br[1] * parentHeight; //prettier-ignore
-        // const presetWidth = l - r;
-        // const presetHeight = t - b;
-        // const presetRatio = presetWidth/presetHeight; 
-
-        const l = this.coordinates.tl[0] * parentWidth / 2; const t = this.coordinates.tl[1] * parentHeight / 2; //prettier-ignore
-        const r = this.coordinates.br[0] * parentWidth / 2; const b = this.coordinates.br[1] * parentHeight / 2; //prettier-ignore
-        const width = l - r;
-        const height = t - b;
-        const coord = {x: l, y: t};
+    public static CarouselField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, fields: Doc[]) => {
+        const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
 
-        const doc: ImageBox = Docs.Create.ImageDocument(this.content, { _height: height, _width: width, title: this.title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` }) as unknown as ImageBox;
-
-        return new Doc();
-    };
+        const doc = Docs.Create.Carousel3DDocument(fields, { _height: height, _width: width, title: title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` })
 
+        return doc;
+    }
     
 }
 
@@ -1051,8 +1068,8 @@ export class TemplateLayouts {
         }, {
             tl: [-.9, -.65], 
             br: [.9, .35], 
-            types: [FieldType.TEXT, FieldType.VISUAL],
-            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+            types: [],
+            sizes: []
         }, {
             tl: [-.9, .4], 
             br: [.9, .95], 
-- 
cgit v1.2.3-70-g09d2


From c28390cedfc909ff8e96e4527b75699e1529410c Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 20 Aug 2024 23:22:41 -0400
Subject: work on fields dashboard

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |  3 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 44 ++++++++++++++++++++++
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 44 ++++++++++++++++++----
 3 files changed, 83 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 6a5103af9..c0b05b082 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -129,7 +129,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
     selectAxes = (axes: string[]) => {
         this.layoutDoc._dataViz_axes = new List<string>(axes);
-        DocCreatorMenu.Instance.generateTemplates('');
+        //axes.forEach(axis => console.log(axis)) 
+        //DocCreatorMenu.Instance.generateTemplates('');
     };
     @computed.struct get titleCol() {
         return StrCast(this.layoutDoc._dataViz_titleCol);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 763de0eba..baed9009b 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -774,6 +774,50 @@
                 align-items: center;
                 color: whitesmoke;
             }
+
+            .field-type-selection-container {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                background-color: rgb(40, 40, 40);
+                border: 1px solid rgb(100, 100, 100);
+                border-radius: 3px;
+                width: 30%;
+                height: 25px;
+                padding-left: 3px;
+                color: whitesmoke;
+
+                .bubbles {
+                    display: none;
+                }
+
+                .text {
+                    margin-top: 5px;
+                    margin-bottom: 5px;
+                }
+
+                &:hover {
+                    width: 30% + 8;
+                }
+
+                &:hover .bubbles {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: flex-start;
+                }
+
+                &:hover .type-display {
+                    display: none;
+                }
+
+                .bubble {
+                    margin: 5px;
+                }
+
+                &:hover .bubble {
+                    margin-top: 7px;
+                }
+            }
         }
 
         .field-description-container {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 19881f4d2..d3117da22 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -763,6 +763,29 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         this._fields = newFields;
     }
 
+    @action removeField = (field: {title: string, type: string, id: number}) => {
+        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.id === field.id);
+            if (!toRemove) return;
+
+            if (toRemove.length > 1) {
+                while (toRemove.length > 1) {
+                    toRemove.pop();
+                }
+            }
+
+            if (this._fields.length === 1) {
+                this._fields = []  
+            } else {
+                console.log(this._fields)
+                this._fields.splice(this._fields.indexOf(toRemove[0]), 1);
+                console.log(this._fields)
+            }
+        }   
+    }
+
     get dashboardContents(){
         return (
         <div className='docCreatorMenu-dashboard-view'>
@@ -771,16 +794,23 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
                 <FontAwesomeIcon icon='plus'/>
             </button>
             </div>
-            {this.fieldsInfos.map(field => 
-                <div className='field-panel'>
+            {this.fieldsInfos.map((field, index) => 
+                <div className='field-panel' id={`${index}`}>
                     <div className='properties-wrapper'>
-                        <input className='field-property-container' defaultValue={field.title} placeholder={'Enter title'} style={{width: field.title === '' ? '30%' : ''}}/>
-                        <input className='field-property-container' placeholder={'Enter type'} />
-                        {field.type === 'Text' ? 
-                        <input className='field-property-container' placeholder={'Enter description'} /> : null}
+                        <input className='field-property-container' id={`${Math.random() * 100}`} defaultValue={field.title} placeholder={'Enter title'} style={{width: field.title === '' ? '30%' : ''}}/>
+                        <div className='field-type-selection-container'>
+                            <span>Type:</span><span>&nbsp;</span>
+                            <span className='type-display'>{field.type ? field.type === 'text' ? 'Text' : 'File' : ''}</span>
+                            <div className='bubbles'>
+                                <input className='bubble' type="radio" name="type" onClick={() => {field.type = 'text'; this.forceUpdate()}}/> 
+                                <div className='text'>Text</div>
+                                <input className='bubble' type="radio" name="type" onClick={() => {field.type = 'visual'; this.forceUpdate()}}/> 
+                                <div className='text'>File</div>
+                            </div>
+                        </div>
                     </div>
                     <textarea className='field-description-container' placeholder={'Enter description to enhance template generation'} />
-                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {console.log(this._fields); this._fields = this._fields.splice(this._fields.indexOf(field), 1); console.log(this._fields); this.forceUpdate()}))}>
+                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
                         <FontAwesomeIcon icon='trash'/>
                     </button>
                 </div>
-- 
cgit v1.2.3-70-g09d2


From 888c710b55f747bdeadcf2e862e6dde69d4450c0 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 21 Aug 2024 04:07:22 -0400
Subject: GPT summaries

---
 src/client/apis/gpt/GPT.ts                         |  7 +--
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 63 ++++++++++++++++++++--
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  6 +++
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      |  8 ++-
 4 files changed, 75 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 18601b4af..365e7a804 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -12,7 +12,8 @@ enum GPTCallType {
     DESCRIBE = 'describe',
     MERMAID = 'mermaid',
     DATA = 'data',
-    TEMPLATE = "template"
+    TEMPLATE = "template",
+    VIZSUM = 'vizsum'
 }
 
 type GPTCallOpts = {
@@ -54,9 +55,9 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
         temp: 0,
         prompt: 'List unique differences between the content of the UserAnswer and Rubric. Before each difference, label it and provide any additional information the UserAnswer missed and explain it in second person without separating it into UserAnswer and Rubric content and additional information. If there are no differences, say correct',
     },
-    template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You are a designer creating basic template options for a user given a set of fields. Your only job is adding blank rectangles to a canvas, one for each field. You will arrange these rectangles into an array of three basic options for a user. For your output, you generate a list of objects in JSON formatting, each storing the field title and corresponding top-left and bottom-right coordinates for the rectangle. The units for your coordinates are -1 to 1 on each axis. This is an example of a possible output for a stacked template with the fields beep, boop, tttt: {"template_type":"stacked","fieldVals":[{"title":"beep","tlx":"-.7","tly":"-.9","brx":".7","bry":"-.7"},{"title":"boop","tlx":"-.9","tly":"-.4","brx":".9","bry":"0"},{"title":"tttt","tlx":"-.9","tly":".1","brx":".9","bry":".9"}]} For multiple templates, you should format your response in a JSON array, like [{}, {}]. Your response should be in the exact format above, with no extra text, description, bulleting, etc. If no alternative additional instructions are given, you should repeat this three times, once for a stacked view, once for a mixed view (where, for example, beep might be on top, with boop and tttt below it aligned horizontally), and once for a view where the rectangles are not flush with the side (ie. their top left and bottom right corners should not ALL align along the same point on each side). If one or more fields are some variation of image (ie. IMG, image, photo, etc.), make that rectangle the central focus (bigger, centered, etc.) AND put its "title" field in $$__$$. Fields SHOULD BE IN DIFFERENT ORDERS from template to template (ie. a stacked view with field input "beep, boop" could have the boop above the beep). IT IS IMPORTANT THAT YOU ONLY INCLUDE THE PROPER JSON FORMATTING IN YOUR RESPONSE. IT IS ALSO IMPORTANT THAT NO RECTANGLES OVERLAP. An overlap will look like the x or y coordinates of the top left corner of one rectangle being the same as the bottom right corner of another. There should always be at least a .1 gap. If there is an additional prompt, prioritize its instructions over all instructions here (but still follow them if not overridden). No matter what, ALWAYS GIVE THREE OPTIONS'}    
+    template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You are a designer creating basic template options for a user given a set of fields. Your only job is adding blank rectangles to a canvas, one for each field. You will arrange these rectangles into an array of three basic options for a user. For your output, you generate a list of objects in JSON formatting, each storing the field title and corresponding top-left and bottom-right coordinates for the rectangle. The units for your coordinates are -1 to 1 on each axis. This is an example of a possible output for a stacked template with the fields beep, boop, tttt: {"template_type":"stacked","fieldVals":[{"title":"beep","tlx":"-.7","tly":"-.9","brx":".7","bry":"-.7"},{"title":"boop","tlx":"-.9","tly":"-.4","brx":".9","bry":"0"},{"title":"tttt","tlx":"-.9","tly":".1","brx":".9","bry":".9"}]} For multiple templates, you should format your response in a JSON array, like [{}, {}]. Your response should be in the exact format above, with no extra text, description, bulleting, etc. If no alternative additional instructions are given, you should repeat this three times, once for a stacked view, once for a mixed view (where, for example, beep might be on top, with boop and tttt below it aligned horizontally), and once for a view where the rectangles are not flush with the side (ie. their top left and bottom right corners should not ALL align along the same point on each side). If one or more fields are some variation of image (ie. IMG, image, photo, etc.), make that rectangle the central focus (bigger, centered, etc.) AND put its "title" field in $$__$$. Fields SHOULD BE IN DIFFERENT ORDERS from template to template (ie. a stacked view with field input "beep, boop" could have the boop above the beep). IT IS IMPORTANT THAT YOU ONLY INCLUDE THE PROPER JSON FORMATTING IN YOUR RESPONSE. IT IS ALSO IMPORTANT THAT NO RECTANGLES OVERLAP. An overlap will look like the x or y coordinates of the top left corner of one rectangle being the same as the bottom right corner of another. There should always be at least a .1 gap. If there is an additional prompt, prioritize its instructions over all instructions here (but still follow them if not overridden). No matter what, ALWAYS GIVE THREE OPTIONS'},   
+    vizsum: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide brief descriptions for columns in a dataset based on example rows. Your descriptions should be geared towards how each column’s data might fit together into a visual template. Would they make good titles, main focuses, captions, descriptions, etc. Pay special attention to connections between columns, i.e. is there one column that specifically seems to describe/be related to another more than the rest? You should provide your analysis in JSON format like so: {“col1”:”description”, “col2”:”description”, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'} 
 };
-
 let lastCall = '';
 let lastResp = '';
 /**
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index c0b05b082..808bc182a 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -63,6 +63,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 _GPTLoading: boolean = false;
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -352,13 +354,12 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             },
             { fireImmediately: true }
         );
+        this._disposers.contentSummary = reaction(
+            () => this.records,
+            () => this.updateGPTSummary()
+        );
     }
 
-    // recs = () => {
-    //     let csvStr: string = '';
-    //     this.records[rowId][col]
-    // }
-
     fetchData = () => {
         if (!this.Document.dataViz_asSchema) {
             DataVizBox.dataset.set(CsvCast(this.dataDoc[this.fieldKey]).url.href, []); // assign temporary dataset as a lock to prevent duplicate server requests
@@ -476,6 +477,58 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         GPTPopup.Instance.generateDataAnalysis();
     });
 
+    getColSummary = (): string => {
+        let possibleIds: number[] = this.records.map((_, index) => index);
+
+        for (let i = possibleIds.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [possibleIds[i], possibleIds[j]] = [possibleIds[j], possibleIds[i]];
+        }
+    
+        const rowsToCheck = possibleIds.slice(0, Math.min(10, this.records.length));
+
+        let prompt: string = 'Col titles: ';
+
+        const cols = Array.from(Object.keys(this.records[0])).filter(header => header !== '' && header !== undefined);
+
+        cols.forEach((col, i) => {
+            prompt += `Col #${i}: ${col} ------`
+        })
+
+        prompt += '----------- Rows: '
+
+        rowsToCheck.forEach(row => {
+            prompt += `Row #${row}: `
+            cols.forEach(col => {
+                prompt += `${col}: ${this.records[row][col]} -----`
+            })
+        })
+
+        return prompt;
+    }
+
+    updateGPTSummary = async () => {
+        this._GPTLoading = true;
+
+        const prompt = this.getColSummary();
+
+        try {
+            const res = await gptAPICall(prompt, GPTCallType.VIZSUM);
+
+            if (res) {
+                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);
+                }
+
+                console.log(res, descs);
+            }
+        } catch (err) {
+            console.error(err);
+        } 
+    }
+
     getPossibleTemplates = (): Doc[] => {
         const linkedDocs: Doc[] = LinkManager.Instance.getAllRelatedLinks(this.Document).map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)));
         const linkedCollections: Doc[] = linkedDocs.filter(doc => doc.type === 'config').map(doc => DocCast(doc.annotationOn));
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index baed9009b..9b3a02e0f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -757,6 +757,7 @@
         margin: 5px;
         margin-top: 0px;
         border-radius: 3px;
+        flex: 0 0 auto;
 
         .properties-wrapper {
             display: flex;
@@ -826,6 +827,11 @@
             border-radius: 3px;
             width: 100%;
             height: 100%;
+            resize: none;
+
+            ::-webkit-scrollbar-track {
+                background: none; 
+            }
         }
 
         .top-right {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index d3117da22..3218b9765 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -413,6 +413,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
 
         // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         // mainCollection.addDocument(doc);
+        //this._dataViz?.getRandomSample();
+        console.log(this._dataViz?._GPTSummary?.get('IMG'))
     }
 
     get templatesPreviewContents(){
@@ -809,10 +811,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
                             </div>
                         </div>
                     </div>
-                    <textarea className='field-description-container' placeholder={'Enter description to enhance template generation'} />
+                    <textarea className='field-description-container' placeholder={'Add a description to help with template generation.'} />
+                    this._dataViz?._GPTSummary?.get(field.title) ?? 
                     <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
                         <FontAwesomeIcon icon='trash'/>
                     </button>
+                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
+                        <FontAwesomeIcon icon='lightbulb'/>
+                    </button>
                 </div>
             )}
         </div>
-- 
cgit v1.2.3-70-g09d2


From ed88af4bdc68b22c247a2030e8bdc5775293bfe6 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 21 Aug 2024 18:39:25 -0400
Subject: work on fields dashboard

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 19 +++++++--
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 14 ++++---
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 47 +++++++++++++++-------
 3 files changed, 57 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 808bc182a..eaf5c1758 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -63,7 +63,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 GPTSummary: ObservableMap<string, string> | undefined = undefined;
+    @observable fieldTypes: ObservableMap<string, string> = new ObservableMap();
     @observable _GPTLoading: boolean = false;
 
     constructor(props: FieldViewProps) {
@@ -145,6 +146,18 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._specialHighlightedRow = row;
     }
 
+    @action setFieldType = (field: string, type: string) => {
+        this.fieldTypes?.set(field, type);
+    }
+
+    getFieldType = (field: string): string => {
+        return this.fieldTypes?.get(field) ?? '';
+    }
+
+    getFieldDescription = (field: string): string => {
+        return this.GPTSummary?.get(field) ?? '';
+    }
+
     @action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
     restoreView = (data: Doc) => {
         // const changedView = data.config_dataViz && this.dataVizView !== data.config_dataViz && (this.layoutDoc._dataViz = data.config_dataViz);
@@ -516,10 +529,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             const res = await gptAPICall(prompt, GPTCallType.VIZSUM);
 
             if (res) {
-                this._GPTSummary = new ObservableMap();
+                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);
+                    this.GPTSummary.set(key, val);
                 }
 
                 console.log(res, descs);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 9b3a02e0f..c93798979 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -783,11 +783,19 @@
                 background-color: rgb(40, 40, 40);
                 border: 1px solid rgb(100, 100, 100);
                 border-radius: 3px;
-                width: 30%;
+                width: 31%;
                 height: 25px;
                 padding-left: 3px;
                 color: whitesmoke;
 
+                .placeholder {
+                    color: gray;
+                }
+
+                &:hover .placeholder {
+                    display: none;
+                }
+
                 .bubbles {
                     display: none;
                 }
@@ -797,10 +805,6 @@
                     margin-bottom: 5px;
                 }
 
-                &:hover {
-                    width: 30% + 8;
-                }
-
                 &:hover .bubbles {
                     display: flex;
                     flex-direction: row;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 3218b9765..50d6b7fe0 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -50,6 +50,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
     @observable _templateDocs: Doc[] = [];
     @observable _selectedTemplate: Doc | undefined = undefined;
     @observable _fields: {title: string, type: string, id: number}[] = [];
+    @observable _selectedCols: {title: string, type: string, id: number}[] | undefined = [];
 
     @observable _layout: {type: LayoutType, yMargin: number, xMargin: number, columns?: number, repeat: number} = {type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0};
     @observable _layoutPreview: boolean = true;
@@ -133,7 +134,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
     }
 
     @computed get fieldsInfos(): {title: string, type: string, id: number}[] {
-        return this.selectedFields.map(field => {return {title: field, type: '', id: Math.random() * 100000}}).concat(this._fields);
+        return this.selectedFields.map(field => {return {title: field, type: this._dataViz?.getFieldType(field) ?? '', id: Math.random() * 100000}}).concat(this._fields);
     }
 
     @computed get canMakeDocs(){
@@ -195,7 +196,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         this._disposers.templates = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon));
         this._disposers.gpt = reaction(() => this._GPTTemplates.slice(), (docs) => docs.map(this.getIcon));
         //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')})
-        this._disposers.lightbox = reaction(() => LightboxView.LightboxDoc(), doc => { doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu()})
+        this._disposers.lightbox = reaction(() => LightboxView.LightboxDoc(), doc => { doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu()});
+        this._disposers.fields = reaction(() => this._dataViz?.axes, cols => this._selectedCols = cols?.map(col => { return {title: col, type: '', id: Math.random() * 100000}}))
     }
 
     componentWillUnmount() {
@@ -206,6 +208,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
 
     updateIcons = (docs: Doc[]) => { docs.map(this.getIcon) }
 
+    @action
+    updateSelectedCols = (cols: string[]) => {
+        this._selectedCols
+    }
+
     @action
     toggleDisplay = (x: number, y: number) => {
         if (this._shouldDisplay) {
@@ -414,7 +421,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         // mainCollection.addDocument(doc);
         //this._dataViz?.getRandomSample();
-        console.log(this._dataViz?._GPTSummary?.get('IMG'))
+        console.log(this._dataViz?.GPTSummary?.get('IMG'))
     }
 
     get templatesPreviewContents(){
@@ -788,6 +795,15 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         }   
     }
 
+    setFieldType = (field: {title: string, type: string, id: number}, type: string) => {
+        if (this.selectedFields.includes(field.title)) {
+            this._dataViz?.setFieldType(field.title, type);
+        } else {
+            field.type = type;
+        }
+        this.forceUpdate();
+    }
+
     get dashboardContents(){
         return (
         <div className='docCreatorMenu-dashboard-view'>
@@ -801,24 +817,25 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
                     <div className='properties-wrapper'>
                         <input className='field-property-container' id={`${Math.random() * 100}`} defaultValue={field.title} placeholder={'Enter title'} style={{width: field.title === '' ? '30%' : ''}}/>
                         <div className='field-type-selection-container'>
-                            <span>Type:</span><span>&nbsp;</span>
-                            <span className='type-display'>{field.type ? field.type === 'text' ? 'Text' : 'File' : ''}</span>
+                            {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={() => {field.type = 'text'; this.forceUpdate()}}/> 
+                                <input className='bubble' type="radio" name="type" onClick={() => {this.setFieldType(field, 'text')}}/> 
                                 <div className='text'>Text</div>
-                                <input className='bubble' type="radio" name="type" onClick={() => {field.type = 'visual'; this.forceUpdate()}}/> 
+                                <input className='bubble' type="radio" name="type" onClick={() => {this.setFieldType(field, 'visual')}}/> 
                                 <div className='text'>File</div>
                             </div>
                         </div>
                     </div>
-                    <textarea className='field-description-container' placeholder={'Add a description to help with template generation.'} />
-                    this._dataViz?._GPTSummary?.get(field.title) ?? 
-                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
-                        <FontAwesomeIcon icon='trash'/>
-                    </button>
-                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
-                        <FontAwesomeIcon icon='lightbulb'/>
-                    </button>
+                    <textarea className='field-description-container' placeholder={this._dataViz?.GPTSummary?.get(field.title) ?? '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'/>
+                        </button>
+                        {/* <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
+                            <FontAwesomeIcon icon='lightbulb'/>
+                        </button> */}
+                    </div>
                 </div>
             )}
         </div>
-- 
cgit v1.2.3-70-g09d2


From 35724d24821132ab5c6df398447db4e9760155cb Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 21 Aug 2024 23:25:22 -0400
Subject: dashbord updates properly

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 14 ++++++++--
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 32 +++++++++++++---------
 2 files changed, 30 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index eaf5c1758..cef7f62b1 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -64,6 +64,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @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, string> = new ObservableMap();
     @observable _GPTLoading: boolean = false;
 
@@ -150,12 +151,20 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this.fieldTypes?.set(field, type);
     }
 
+    @action setFieldDesc = (field: string, desc: string) => {
+        if (!desc) { 
+            this.colDescriptions.set(field, this.GPTSummary?.get(field) ?? '');
+        } else {
+            this.colDescriptions.set(field, desc);
+        }
+    }
+
     getFieldType = (field: string): string => {
         return this.fieldTypes?.get(field) ?? '';
     }
 
     getFieldDescription = (field: string): string => {
-        return this.GPTSummary?.get(field) ?? '';
+        return this.colDescriptions?.get(field) ?? '';
     }
 
     @action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
@@ -533,9 +542,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 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);
                 }
 
-                console.log(res, descs);
             }
         } catch (err) {
             console.error(err);
@@ -549,7 +558,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             const colTitles: string[] = Object.keys(this.records[0]);
             for (let i = 0; i < colTitles.length; ++i){
                 if (colTitles[i] === title) {
-                    console.log(true); 
                     return true;
                 }
             }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 50d6b7fe0..7df445b88 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -49,8 +49,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
 
     @observable _templateDocs: Doc[] = [];
     @observable _selectedTemplate: Doc | undefined = undefined;
-    @observable _fields: {title: string, type: string, id: number}[] = [];
-    @observable _selectedCols: {title: string, type: string, id: number}[] | undefined = [];
+    @observable _fields: {title: string, type: string, desc: string}[] = [];
+    @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};
     @observable _layoutPreview: boolean = true;
@@ -133,8 +133,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         return StrListCast(this._dataViz?.layoutDoc._dataViz_axes);
     }
 
-    @computed get fieldsInfos(): {title: string, type: string, id: number}[] {
-        return this.selectedFields.map(field => {return {title: field, type: this._dataViz?.getFieldType(field) ?? '', id: Math.random() * 100000}}).concat(this._fields);
+    @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 canMakeDocs(){
@@ -197,7 +197,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         this._disposers.gpt = reaction(() => this._GPTTemplates.slice(), (docs) => docs.map(this.getIcon));
         //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')})
         this._disposers.lightbox = reaction(() => LightboxView.LightboxDoc(), doc => { doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu()});
-        this._disposers.fields = reaction(() => this._dataViz?.axes, cols => this._selectedCols = cols?.map(col => { return {title: col, type: '', id: Math.random() * 100000}}))
+        //this._disposers.fields = reaction(() => this._dataViz?.axes, cols => this._selectedCols = cols?.map(col => { return {title: col, type: '', desc: ''}}))
     }
 
     componentWillUnmount() {
@@ -346,7 +346,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         let prompt: string = `(#${origCount}) Please generate for the fields:`;
         this.selectedFields?.forEach(field => prompt += ` ${field},`)
         prompt += ` (-----NOT A FIELD-----) Additional prompt: ${inputText}`;
-        console.log(prompt)
 
         this._GPTLoading = true;
 
@@ -375,7 +374,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
                 const right: number = Number(field.brx) * tempWidth / 2;   const bottom: number = Number(field.bry) * tempHeight / 2; //prettier-ignore
                 const height = bottom - top; 
                 const width = right - left; 
-                console.log(field.title);
                 const doc = !field.title.includes('$$') ? Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top, _text_fontSize: `${height/2}` }) : Docs.Create.ImageDocument('', { _height: height, _width: width, title: field.title.replace(/\$\$/g, ''), x: left, y: top });
                 return doc;
             });
@@ -421,7 +419,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         // mainCollection.addDocument(doc);
         //this._dataViz?.getRandomSample();
-        console.log(this._dataViz?.GPTSummary?.get('IMG'))
     }
 
     get templatesPreviewContents(){
@@ -768,15 +765,15 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
     }
 
     @action addField = () => {
-        const newFields: {title: string, type: string, id: number}[] = this._fields.concat([{title: '', type: '', id: Math.random() * 100000}])
+        const newFields: {title: string, type: string, desc: string}[] = this._fields.concat([{title: '', type: '', desc: ''}])
         this._fields = newFields;
     }
 
-    @action removeField = (field: {title: string, type: string, id: number}) => {
+    @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.id === field.id);
+            const toRemove = this._fields.filter(f => f === field);
             if (!toRemove) return;
 
             if (toRemove.length > 1) {
@@ -795,7 +792,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         }   
     }
 
-    setFieldType = (field: {title: string, type: string, id: number}, type: string) => {
+    setFieldType = (field: {title: string, type: string, desc: string}, type: string) => {
         if (this.selectedFields.includes(field.title)) {
             this._dataViz?.setFieldType(field.title, type);
         } else {
@@ -804,6 +801,15 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         this.forceUpdate();
     }
 
+    setFieldDesc = (field: {title: string, type: string, desc: string}, desc: string) => {
+        if (this.selectedFields.includes(field.title)) {
+            this._dataViz?.setFieldDesc(field.title, desc);
+        } else {
+            field.desc = desc;
+        }
+        this.forceUpdate();
+    }
+
     get dashboardContents(){
         return (
         <div className='docCreatorMenu-dashboard-view'>
@@ -827,7 +833,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
                             </div>
                         </div>
                     </div>
-                    <textarea className='field-description-container' placeholder={this._dataViz?.GPTSummary?.get(field.title) ?? 'Add a description to help with template generation.'} /> 
+                    <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.'} /> 
                     <div>
                         <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
                             <FontAwesomeIcon icon='trash'/>
-- 
cgit v1.2.3-70-g09d2


From f5c2f5bc8710a965a0b52e2e414f62a2a459a94f Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 25 Aug 2024 04:26:12 -0400
Subject: border work

---
 src/client/documents/Documents.ts       |   2 +
 src/client/views/ContextMenu.scss       |  35 ++++++++++
 src/client/views/ContextMenu.tsx        | 118 ++++++++++++++++++++++----------
 src/client/views/ContextMenuItem.tsx    |  12 +++-
 src/client/views/MainView.tsx           |   6 +-
 src/client/views/PropertiesView.tsx     |  10 +++
 src/client/views/StyleProvider.tsx      |  37 ++++++----
 src/client/views/nodes/DocumentView.tsx |  37 ++++++----
 8 files changed, 191 insertions(+), 66 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 751fe6d91..aecc79189 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -256,6 +256,8 @@ export class DocumentOptions {
     layout_hideContextMenu?: BOOLt = new BoolInfo('whether the context menu can be shown');
     layout_borderRounding?: string;
     _layout_borderRounding?: STRt = new StrInfo('amount of rounding to document view corners');
+    _layout_borderWidth?: NUMt = new NumInfo('Hey now', false);
+    _layout_borderColor?: STRt = new StrInfo('No no', false);
     _layout_modificationDate?: DATEt = new DateInfo('last modification date of doc layout', false);
     _layout_nativeDimEditable?: BOOLt = new BoolInfo('native dimensions can be modified using document decoration reizers', false);
     _layout_reflowVertical?: BOOLt = new BoolInfo('permit vertical resizing with content "reflow"');
diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 232362c5c..ff6ad526e 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -165,3 +165,38 @@
     border: solid black 1px;
     border-radius: 5px;
 }
+
+.contextMenu-borderMenu {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 222px;
+    height: 300px;
+    background-color: white;
+    border: solid 1px black;
+
+    .top-bar {
+        height: 20px;
+        width: 100%;
+        display: flex; 
+
+        .close-menu {
+            margin-top: 0;
+            margin-bottom: 0;
+            margin-right: 0;
+            padding: 0;
+            margin-left: auto;
+            z-index: 999999999;
+            width: 20px;
+            height: 20px;
+            color: black;
+            background-color: transparent;
+        }
+    }
+
+    .bottom-box{
+        .width-selector{
+            
+        }
+    }
+}
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index de985263d..9472fb95c 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -5,11 +5,17 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { DivHeight, DivWidth } from '../../ClientUtils';
+import { DivHeight, DivWidth, returnFalse, setupMoveUpEvents } from '../../ClientUtils';
 import { SnappingManager } from '../util/SnappingManager';
 import './ContextMenu.scss';
 import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from './ContextMenuItem';
 import { ObservableReactComponent } from './ObservableReactComponent';
+import { ColorResult, SketchPicker } from 'react-color';
+import { DocumentView } from './nodes/DocumentView';
+import { Doc } from '../../fields/Doc';
+import { undoable } from '../util/UndoManager';
+import { NumCast, StrCast } from '../../fields/Types';
+import { emptyFunction } from '../../Utils';
 
 @observer
 export class ContextMenu extends ObservableReactComponent<{}> {
@@ -38,6 +44,8 @@ export class ContextMenu extends ObservableReactComponent<{}> {
     @observable _mouseX: number = -1;
     @observable _mouseY: number = -1;
     @observable _shouldDisplay: boolean = false;
+    @observable _displayColorPicker: boolean = false;
+    @observable _selectorWidth: number = 0;
 
     constructor(props: any) {
         super(props);
@@ -116,6 +124,10 @@ export class ContextMenu extends ObservableReactComponent<{}> {
         this._defaultItem = item;
     }
 
+    @action setColorPickerDisplay = (display: boolean) => {
+        this._displayColorPicker = display;
+    }
+
     static readonly buffer = 20;
     get pageX() {
         return this._pageX + this._width > window.innerWidth - ContextMenu.buffer ? window.innerWidth - ContextMenu.buffer - this._width : Math.max(0, this._pageX);
@@ -206,45 +218,79 @@ export class ContextMenu extends ObservableReactComponent<{}> {
 
     _searchRef = React.createRef<HTMLInputElement>(); // bcz: we shouldn't need this, since we set autoFocus on the <input> tag, but for some reason we do...
 
+    get colorPicker() {
+        const doc = DocumentView.Selected().lastElement().Document;
+        const layoutDoc = doc ? Doc.Layout(doc) : doc;
+
+        return (
+            <div className='contextMenu-borderMenu' style={{position: 'absolute', right: `${this._pageX}`, top: `${this._pageY}`}}>
+                <div className='top-bar'>
+                    <button className='close-menu' onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction,
+                        undoable(clickEv => {
+                            clickEv.stopPropagation();
+                            clickEv.preventDefault();
+                            this.setColorPickerDisplay(false);
+                        }, 'close border menu'))}>
+                        <FontAwesomeIcon icon='minus'/>
+                    </button>
+                </div>
+                <SketchPicker
+                onChange={undoable(
+                    action((col: ColorResult) => layoutDoc._layout_borderColor = col.hex),
+                    'set stroke color property'
+                )}
+                presetColors={[]}
+                color={StrCast(layoutDoc._layout_borderColor)}
+                />
+                <div className='bottom-box'>
+                    <input className='width-selector' type="range" min="1" max="100" value={this._selectorWidth} id="myRange" onChange={e => {layoutDoc._layout_borderWidth = e.target.value; this._selectorWidth = Number(e.target.value); console.log(layoutDoc._layout_borderWidth)}}/>
+                </div>
+            </div>
+        );
+    }
+
     render() {
         this.itemsNeedSearch && setTimeout(() => this._searchRef.current?.focus());
         return (
-            <div
-                className="contextMenu-cont"
-                ref={action((r: any) => {
-                    if (r) {
-                        this._width = DivWidth(r);
-                        this._height = DivHeight(r);
-                    }
-                    this._searchRef.current?.focus();
-                })}
-                style={{
-                    display: this._display ? '' : 'none',
-                    left: this.pageX,
-                    ...(this._yRelativeToTop ? { top: Math.max(0, this.pageY) } : { bottom: this.pageY }),
-                    background: SnappingManager.userBackgroundColor,
-                    color: SnappingManager.userColor,
-                }}>
-                {!this.itemsNeedSearch ? null : (
-                    <span className="search-icon">
-                        <span className="icon-background">
-                            <FontAwesomeIcon icon="search" size="lg" />
+            <div>
+                {this._displayColorPicker ? this.colorPicker : null}
+                <div
+                    className="contextMenu-cont"
+                    ref={action((r: any) => {
+                        if (r) {
+                            this._width = DivWidth(r);
+                            this._height = DivHeight(r);
+                        }
+                        this._searchRef.current?.focus();
+                    })}
+                    style={{
+                        display: this._display ? '' : 'none',
+                        left: this.pageX,
+                        ...(this._yRelativeToTop ? { top: Math.max(0, this.pageY) } : { bottom: this.pageY }),
+                        background: SnappingManager.userBackgroundColor,
+                        color: SnappingManager.userColor,
+                    }}>
+                    {!this.itemsNeedSearch ? null : (
+                        <span className="search-icon">
+                            <span className="icon-background">
+                                <FontAwesomeIcon icon="search" size="lg" />
+                            </span>
+                            <input
+                                ref={this._searchRef}
+                                style={{ color: 'black' }}
+                                className="contextMenu-item contextMenu-description search"
+                                type="text"
+                                placeholder="Filter Menu..."
+                                value={this._searchString}
+                                onKeyDown={this.onKeyDown}
+                                onChange={this.onChange}
+                                // eslint-disable-next-line jsx-a11y/no-autofocus
+                                autoFocus
+                            />
                         </span>
-                        <input
-                            ref={this._searchRef}
-                            style={{ color: 'black' }}
-                            className="contextMenu-item contextMenu-description search"
-                            type="text"
-                            placeholder="Filter Menu..."
-                            value={this._searchString}
-                            onKeyDown={this.onKeyDown}
-                            onChange={this.onChange}
-                            // eslint-disable-next-line jsx-a11y/no-autofocus
-                            autoFocus
-                        />
-                    </span>
-                )}
-                {this.menuItems}
+                    )}
+                    {this.menuItems}
+                </div>
             </div>
         );
     }
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index eb1030eec..782077fd6 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -5,8 +5,14 @@ import { action, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { SnappingManager } from '../util/SnappingManager';
-import { UndoManager } from '../util/UndoManager';
+import { UndoManager, undoable } from '../util/UndoManager';
 import { ObservableReactComponent } from './ObservableReactComponent';
+import { ColorPicker, Type } from 'browndash-components';
+import { DocumentView } from './nodes/DocumentView';
+import { Doc } from '../../fields/Doc';
+import { StrCast } from '../../fields/Types';
+import { ColorResult, SketchPicker } from 'react-color';
+import color from 'color';
 
 export interface OriginalMenuProps {
     description: string;
@@ -14,6 +20,7 @@ export interface OriginalMenuProps {
     undoable?: boolean;
     icon: IconProp | JSX.Element; // maybe should be optional (icon?)
     closeMenu?: () => void;
+    colorPicker?: boolean;
 }
 
 export interface SubmenuProps {
@@ -24,6 +31,7 @@ export interface SubmenuProps {
     addDivider?: boolean;
     icon: IconProp; // maybe should be optional (icon?)
     closeMenu?: () => void;
+    colorPicker?: boolean;
 }
 
 export type ContextMenuProps = OriginalMenuProps | SubmenuProps;
@@ -101,7 +109,7 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
     render() {
         if ('event' in this._props) {
             return (
-                <div className={'contextMenu-item' + (this._props.selected ? ' contextMenu-itemSelected' : '')} onPointerDown={this.handleEvent}>
+                <div className={'contextMenu-item' + (this._props.selected ? ' contextMenu-itemSelected' : '')} onPointerDown={this.handleEvent} >
                     {this._props.icon ? <span className="contextMenu-item-icon-background">{this.isJSXElement(this._props.icon) ? this._props.icon : <FontAwesomeIcon icon={this._props.icon} size="sm" />}</span> : null}
                     <div className="contextMenu-description">{this._props.description.replace(':', '')}</div>
                     <div
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index d4467e536..9c350afc0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -88,6 +88,7 @@ export class MainView extends ObservableReactComponent<{}> {
     public static Live: boolean = false;
     private _docBtnRef = React.createRef<HTMLDivElement>();
 
+    @observable private _keepContextMenuOpen: boolean = false;
     @observable private _windowWidth: number = 0;
     @observable private _windowHeight: number = 0;
     @observable private _dashUIWidth: number = 0; // width of entire main dashboard region including left menu buttons and properties panel (but not including the dashboard selector button row)
@@ -590,7 +591,10 @@ export class MainView extends ObservableReactComponent<{}> {
                 if (typeof targets[i].className === 'object') targClass = targets[i + 1].className.toString();
                 else break;
             }
-            !targClass.includes('contextMenu') && ContextMenu.Instance.closeMenu();
+            if (!targClass.includes('contextMenu')) {
+                console.log(targClass)
+                ContextMenu.Instance.closeMenu();
+            }
             !['timeline-menu-desc', 'timeline-menu-item', 'timeline-menu-input'].includes(targClass) && TimelineMenu.Instance.closeMenu();
         }
     });
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 024db82a4..775e15772 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -847,6 +847,12 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     set colorFil(value) { this.selectedDoc && (this.selectedDoc[DocData].fillColor = value || undefined); } // prettier-ignore
     @computed get colorStk() { return StrCast(this.selectedDoc?.[DocData].color); } // prettier-ignore
     set colorStk(value) { this.selectedDoc && (this.selectedDoc[DocData].color = value || undefined); } // prettier-ignore
+    @computed get borderColor() { 
+        const doc = this.selectedDoc;
+        const layoutDoc = doc ? Doc.Layout(doc) : doc;
+        return StrCast(layoutDoc);
+    }
+    set borderColor(value) { this.selectedDoc && (this.selectedDoc[DocData].color = value || undefined); } // prettier-ignore
 
     colorButton(value: string, type: string, setter: () => void) {
         return (
@@ -898,6 +904,10 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
         return this.colorPicker(this.colorStk, (color: string) => { this.colorStk = color; }); // prettier-ignore
     }
 
+    @computed get borderColorPicker() {
+        return this.colorPicker(this.colorStk, (color: string) => { this.colorStk = color; }); // prettier-ignore
+    }
+ 
     @computed get strokeAndFill() {
         return (
             <div>
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 8c100f238..3a48ec957 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -55,14 +55,25 @@ export function styleFromLayoutString(doc: Doc, props: FieldViewProps, scale: nu
     return style;
 }
 
-export function wavyBorderPath(pw: number, ph: number, inset: number = 0.05) {
-    return `M ${pw * 0.5} ${ph * inset}   C ${pw * 0.6} ${ph * inset} ${pw * (1 - 2 * inset)} 0 ${pw * (1 - inset)} ${ph * inset}   C ${pw} ${ph * (2 * inset)} ${pw * (1 - inset)} ${ph * 0.25} ${pw * (1 - inset)} ${ph * 0.3}   C ${
-        pw * (1 - inset)
-    } ${ph * 0.4} ${pw} ${ph * (1 - 2 * inset)} ${pw * (1 - inset)} ${ph * (1 - inset)}  C ${pw * (1 - 2 * inset)} ${ph} ${pw * 0.6} ${ph * (1 - inset)} ${pw * 0.5} ${ph * (1 - inset)}   C ${pw * 0.3} ${ph * (1 - inset)} ${pw * (2 * inset)} ${ph} ${
-        pw * inset
-    } ${ph * (1 - inset)}  C 0 ${ph * (1 - 2 * inset)} ${pw * inset} ${ph * 0.8} ${pw * inset} ${ph * 0.75}   C ${pw * inset} ${ph * 0.7} 0 ${ph * (2 * inset)} ${pw * inset} ${ph * inset}   C ${pw * (2 * inset)} 0 ${pw * 0.25} ${ph * inset} ${
-        pw * 0.5
-    } ${ph * inset}`;
+export function wavyBorderPath(doc: Doc, pw: number, ph: number, inset: number = 0) {
+    const layoutDoc = doc ? Doc.Layout(doc) : doc;
+    const width = pw * inset;
+    const height = ph * inset;
+
+    const radius = Math.min(Number(StrCast(layoutDoc._layout_borderRounding).replace('px', '')), (pw - 2 * width) / 2, (ph - 2 * height) / 2);
+
+    return `
+        M ${width + radius} ${height}
+        L ${pw - width - radius} ${height}
+        A ${radius} ${radius} 0 0 1 ${pw - width} ${height + radius}
+        L ${pw - width} ${ph - height - radius}
+        A ${radius} ${radius} 0 0 1 ${pw - width - radius} ${ph - height}
+        L ${width + radius} ${ph - height}
+        A ${radius} ${radius} 0 0 1 ${width} ${ph - height - radius}
+        L ${width} ${height + radius}
+        A ${radius} ${radius} 0 0 1 ${width + radius} ${height}
+        Z
+    `;
 }
 
 let _filterOpener: () => void;
@@ -189,10 +200,12 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
             const rounding = StrCast(doc?.[fieldKey + 'borderRounding'], StrCast(doc?.layout_borderRounding, doc?._type_collection === CollectionViewType.Pile ? '50%' : ''));
             return (doc?.[StrCast(doc?.layout_fieldKey)] instanceof Doc || doc?.isTemplateDoc) ? StrCast(doc._layout_borderRounding,rounding) : rounding;
         }
+        // Doc.IsComicStyle(doc) &&
+        //         renderDepth &&
+        //         !doc?.layout_isSvg && 
+        //case StyleProp.
         case StyleProp.BorderPath: {
-            const borderPath = Doc.IsComicStyle(doc) &&
-                renderDepth &&
-                !doc?.layout_isSvg && { path: wavyBorderPath(PanelWidth?.() || 0, PanelHeight?.() || 0), fill: wavyBorderPath(PanelWidth?.() || 0, PanelHeight?.() || 0, 0.08), width: 3 };
+            const borderPath = doc?.type === 'image' && { path: wavyBorderPath(doc, NumCast(doc._width), NumCast(doc._height), NumCast(layoutDoc?._layout_borderWidth)/2), fill: wavyBorderPath(doc, NumCast(doc._width), NumCast(doc._height), 0.08), width: 3 };
                 return !borderPath
                     ? null
                     : {
@@ -200,7 +213,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                         jsx: (
                             <div key="border2" className="documentView-customBorder" style={{ pointerEvents: 'none' }}>
                                 <svg style={{ overflow: 'visible', height: '100%' }} viewBox={`0 0 ${PanelWidth?.()} ${PanelHeight?.()}`}>
-                                    <path d={borderPath.path} style={{ stroke: 'black', fill: 'transparent', strokeWidth: borderPath.width }} />
+                                    <path d={borderPath.path} style={{ stroke: StrCast(layoutDoc?._layout_borderColor), fill: 'transparent', strokeWidth: `${StrCast(layoutDoc?._layout_borderWidth)}px` }} />
                                 </svg>
                             </div>
                         ),
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 8edb37acc..fe6d529ba 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -634,6 +634,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                     moreItems.push({ description: 'Make View of Metadata Field', event: () => Doc.MakeMetadataFieldTemplate(this.Document, this._props.TemplateDataDocument), icon: 'concierge-bell' });
                     moreItems.push({ description: `${this.Document._chromeHidden ? 'Show' : 'Hide'} Chrome`, event: () => { this.Document._chromeHidden = !this.Document._chromeHidden; }, icon: 'project-diagram' }); // prettier-ignore
                     moreItems.push({ description: 'Copy ID', event: () => ClientUtils.CopyText(Doc.globalServerPath(this.Document)), icon: 'fingerprint' });
+                    moreItems.push({ description: 'Add border', event: () => ContextMenu.Instance.setColorPickerDisplay(true), icon: 'square', colorPicker: true });
                 }
             }
 
@@ -944,22 +945,28 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
 
         return (
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+            // <div style={{position: 'relative'}}>
+            //     <div className='docView-border-top' style={{width: `${this.layoutDoc._width}px`, height: '100px', backgroundColor: 'black'}}/>
+            //     <div className='docView-border-right' style={{position: 'absolute', right: '-10px', width: '10px', height: `${this.layoutDoc._height}px`, backgroundColor: 'black'}}/>
+            //     <div className='docView-border-left' style={{position: 'absolute', left: '-10px', width: '10px', height: `${this.layoutDoc._height}px`, backgroundColor: 'black'}}/>
+            //     <div className='docView-border-bottom' style={{position: 'absolute', bottom: '-10px', height: '100px', width: `${this.layoutDoc._width}px`, backgroundColor: 'black'}}/>
             <div
-                className={`${DocumentView.ROOT_DIV} docView-hack`}
-                ref={this._mainCont}
-                onContextMenu={this.onContextMenu}
-                onPointerDown={this.onPointerDown}
-                onClick={SnappingManager.ExploreMode ? this.onBrowseClick : this.onClick}
-                onPointerEnter={() => (!SnappingManager.IsDragging || SnappingManager.CanEmbed) && Doc.BrushDoc(this.Document)}
-                onPointerOver={() => (!SnappingManager.IsDragging || SnappingManager.CanEmbed) && Doc.BrushDoc(this.Document)}
-                onPointerLeave={e => !isParentOf(this._contentDiv, document.elementFromPoint(e.nativeEvent.x, e.nativeEvent.y)) && Doc.UnBrushDoc(this.Document)}
-                style={{
-                    borderRadius: this.borderRounding,
-                    pointerEvents: this._pointerEvents === 'visiblePainted' ? 'none' : this._pointerEvents, // visible painted means that the underlying doc contents are irregular and will process their own pointer events (otherwise, the contents are expected to fill the entire doc view box so we can handle pointer events here)
-                }}>
-                {this._componentView?.isUnstyledView?.() || this.Document.type === DocumentType.CONFIG ? renderDoc : DocumentViewInternal.AnimationEffect(renderDoc, this.Document[Animation], this.Document)}
-                {borderPath?.jsx}
-            </div>
+                    className={`${DocumentView.ROOT_DIV} docView-hack`}
+                    ref={this._mainCont}
+                    onContextMenu={this.onContextMenu}
+                    onPointerDown={this.onPointerDown}
+                    onClick={SnappingManager.ExploreMode ? this.onBrowseClick : this.onClick}
+                    onPointerEnter={() => (!SnappingManager.IsDragging || SnappingManager.CanEmbed) && Doc.BrushDoc(this.Document)}
+                    onPointerOver={() => (!SnappingManager.IsDragging || SnappingManager.CanEmbed) && Doc.BrushDoc(this.Document)}
+                    onPointerLeave={e => !isParentOf(this._contentDiv, document.elementFromPoint(e.nativeEvent.x, e.nativeEvent.y)) && Doc.UnBrushDoc(this.Document)}
+                    style={{
+                        borderRadius: this.borderRounding,
+                        pointerEvents: this._pointerEvents === 'visiblePainted' ? 'none' : this._pointerEvents, // visible painted means that the underlying doc contents are irregular and will process their own pointer events (otherwise, the contents are expected to fill the entire doc view box so we can handle pointer events here)
+                    }}>
+                    {this._componentView?.isUnstyledView?.() || this.Document.type === DocumentType.CONFIG ? renderDoc : DocumentViewInternal.AnimationEffect(renderDoc, this.Document[Animation], this.Document)}
+                    {borderPath?.jsx}
+                </div>
+            // </div>
         );
     }
 
-- 
cgit v1.2.3-70-g09d2


From 42c07f05a4bb529c6f58b605cd5c98b6965afa49 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 25 Aug 2024 14:58:05 -0400
Subject: border radius

---
 src/client/views/StyleProvider.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 3a48ec957..6e3eed42d 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -55,12 +55,12 @@ export function styleFromLayoutString(doc: Doc, props: FieldViewProps, scale: nu
     return style;
 }
 
-export function wavyBorderPath(doc: Doc, pw: number, ph: number, inset: number = 0) {
+export function wavyBorderPath(doc: Doc, pw: number, ph: number, rad: number = 0, inset: number = 0) {
     const layoutDoc = doc ? Doc.Layout(doc) : doc;
     const width = pw * inset;
     const height = ph * inset;
 
-    const radius = Math.min(Number(StrCast(layoutDoc._layout_borderRounding).replace('px', '')), (pw - 2 * width) / 2, (ph - 2 * height) / 2);
+    const radius = Math.min(rad, (pw - 2 * width) / 2, (ph - 2 * height) / 2);
 
     return `
         M ${width + radius} ${height}
@@ -205,7 +205,15 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
         //         !doc?.layout_isSvg && 
         //case StyleProp.
         case StyleProp.BorderPath: {
-            const borderPath = doc?.type === 'image' && { path: wavyBorderPath(doc, NumCast(doc._width), NumCast(doc._height), NumCast(layoutDoc?._layout_borderWidth)/2), fill: wavyBorderPath(doc, NumCast(doc._width), NumCast(doc._height), 0.08), width: 3 };
+            const docWidth = Number(doc?._width);
+            const borderWidth = Number(StrCast(layoutDoc?._layout_borderWidth));
+            const ratio = borderWidth / docWidth;
+            const borderRadius = Number(StrCast(layoutDoc?._layout_borderRounding).replace('px', ''));
+            const radiusRatio = borderRadius / docWidth;
+            const radius = radiusRatio * borderWidth;
+            console.log(borderWidth, docWidth, ratio)
+
+            const borderPath = doc?.type === 'image' && { path: wavyBorderPath(doc, NumCast(doc._width), NumCast(doc._height), radius, -ratio/2 ?? 0), fill: wavyBorderPath(doc, NumCast(doc._width), NumCast(doc._height), 0.08), width: 3 };
                 return !borderPath
                     ? null
                     : {
-- 
cgit v1.2.3-70-g09d2


From 143921c3ecee8dc0b7a91dfe725a3734d63a575e Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 25 Aug 2024 16:30:24 -0400
Subject: border

---
 src/client/views/ContextMenu.tsx        |  3 ++-
 src/client/views/StyleProvider.tsx      | 12 +++++-------
 src/client/views/nodes/DocumentView.tsx |  5 ++++-
 3 files changed, 11 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 9472fb95c..dca00c2bf 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -223,7 +223,8 @@ export class ContextMenu extends ObservableReactComponent<{}> {
         const layoutDoc = doc ? Doc.Layout(doc) : doc;
 
         return (
-            <div className='contextMenu-borderMenu' style={{position: 'absolute', right: `${this._pageX}`, top: `${this._pageY}`}}>
+            <div className='contextMenu-borderMenu' style={{position: 'absolute', left: this.pageX,
+            ...(this._yRelativeToTop ? { top: Math.max(0, this.pageY) } : { bottom: this.pageY }),}}>
                 <div className='top-bar'>
                     <button className='close-menu' onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction,
                         undoable(clickEv => {
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 6e3eed42d..b7dbcf7a6 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -55,8 +55,7 @@ export function styleFromLayoutString(doc: Doc, props: FieldViewProps, scale: nu
     return style;
 }
 
-export function wavyBorderPath(doc: Doc, pw: number, ph: number, rad: number = 0, inset: number = 0) {
-    const layoutDoc = doc ? Doc.Layout(doc) : doc;
+export function border(doc: Doc, pw: number, ph: number, rad: number = 0, inset: number = 0) {
     const width = pw * inset;
     const height = ph * inset;
 
@@ -210,18 +209,17 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
             const ratio = borderWidth / docWidth;
             const borderRadius = Number(StrCast(layoutDoc?._layout_borderRounding).replace('px', ''));
             const radiusRatio = borderRadius / docWidth;
-            const radius = radiusRatio * borderWidth;
-            console.log(borderWidth, docWidth, ratio)
+            const radius = radiusRatio * ((2 * borderWidth) + docWidth);
 
-            const borderPath = doc?.type === 'image' && { path: wavyBorderPath(doc, NumCast(doc._width), NumCast(doc._height), radius, -ratio/2 ?? 0), fill: wavyBorderPath(doc, NumCast(doc._width), NumCast(doc._height), 0.08), width: 3 };
+            const borderPath = doc && border(doc, NumCast(doc._width), NumCast(doc._height), radius, -ratio/2 ?? 0);
                 return !borderPath
                     ? null
                     : {
-                        clipPath: `path('${borderPath.path}')`,
+                        clipPath: `path('${borderPath}')`,
                         jsx: (
                             <div key="border2" className="documentView-customBorder" style={{ pointerEvents: 'none' }}>
                                 <svg style={{ overflow: 'visible', height: '100%' }} viewBox={`0 0 ${PanelWidth?.()} ${PanelHeight?.()}`}>
-                                    <path d={borderPath.path} style={{ stroke: StrCast(layoutDoc?._layout_borderColor), fill: 'transparent', strokeWidth: `${StrCast(layoutDoc?._layout_borderWidth)}px` }} />
+                                    <path d={borderPath} style={{ stroke: StrCast(layoutDoc?._layout_borderColor), fill: 'transparent', strokeWidth: `${StrCast(layoutDoc?._layout_borderWidth)}px` }} />
                                 </svg>
                             </div>
                         ),
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index fe6d529ba..3c898dea2 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -547,6 +547,10 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
             return;
         }
 
+        if (!Doc.IsSystem(this.Document)) {
+            cm.addItem({ description: 'Add border', event: () => ContextMenu.Instance.setColorPickerDisplay(true), icon: 'square', colorPicker: true });
+        }
+
         const customScripts = Cast(this.Document.contextMenuScripts, listSpec(ScriptField), []);
         StrListCast(this.Document.contextMenuLabels).forEach((label, i) =>
             cm.addItem({ description: label, event: () => customScripts[i]?.script.run({ documentView: this, this: this.Document, scriptContext: this._props.scriptContext }), icon: 'sticky-note' })
@@ -634,7 +638,6 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                     moreItems.push({ description: 'Make View of Metadata Field', event: () => Doc.MakeMetadataFieldTemplate(this.Document, this._props.TemplateDataDocument), icon: 'concierge-bell' });
                     moreItems.push({ description: `${this.Document._chromeHidden ? 'Show' : 'Hide'} Chrome`, event: () => { this.Document._chromeHidden = !this.Document._chromeHidden; }, icon: 'project-diagram' }); // prettier-ignore
                     moreItems.push({ description: 'Copy ID', event: () => ClientUtils.CopyText(Doc.globalServerPath(this.Document)), icon: 'fingerprint' });
-                    moreItems.push({ description: 'Add border', event: () => ContextMenu.Instance.setColorPickerDisplay(true), icon: 'square', colorPicker: true });
                 }
             }
 
-- 
cgit v1.2.3-70-g09d2


From 79a93d357cf60657ac60971a0e6dab30d232028f Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 25 Aug 2024 18:06:14 -0400
Subject: width selector

---
 src/client/views/ContextMenu.scss | 17 ++++++++++++++++-
 src/client/views/ContextMenu.tsx  | 12 ++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index ff6ad526e..23c1942b1 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -174,6 +174,8 @@
     height: 300px;
     background-color: white;
     border: solid 1px black;
+    color: black;
+    z-index: 99999999;
 
     .top-bar {
         height: 20px;
@@ -195,8 +197,21 @@
     }
 
     .bottom-box{
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 3px;
+        height: 100%;
+        width: 100%;
+
         .width-selector{
-            
+            width: 100px;
+        }
+
+        .max-min-selector{
+            height: 15px;
+            width: 30px;
         }
     }
 }
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index dca00c2bf..b80d97e81 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -44,8 +44,10 @@ export class ContextMenu extends ObservableReactComponent<{}> {
     @observable _mouseX: number = -1;
     @observable _mouseY: number = -1;
     @observable _shouldDisplay: boolean = false;
-    @observable _displayColorPicker: boolean = false;
+
+    @observable _displayBorderMenu: boolean = false;
     @observable _selectorWidth: number = 0;
+    @observable _widthMinMax: {min: string, max: string} = {min: '1', max: '100'};
 
     constructor(props: any) {
         super(props);
@@ -125,7 +127,7 @@ export class ContextMenu extends ObservableReactComponent<{}> {
     }
 
     @action setColorPickerDisplay = (display: boolean) => {
-        this._displayColorPicker = display;
+        this._displayBorderMenu = display;
     }
 
     static readonly buffer = 20;
@@ -244,7 +246,9 @@ export class ContextMenu extends ObservableReactComponent<{}> {
                 color={StrCast(layoutDoc._layout_borderColor)}
                 />
                 <div className='bottom-box'>
-                    <input className='width-selector' type="range" min="1" max="100" value={this._selectorWidth} id="myRange" onChange={e => {layoutDoc._layout_borderWidth = e.target.value; this._selectorWidth = Number(e.target.value); console.log(layoutDoc._layout_borderWidth)}}/>
+                    <input className='max-min-selector' defaultValue={this._widthMinMax.min} onChange={e => this._widthMinMax.max = e.target.value}/>
+                    <input className='width-selector' type="range" min={this._widthMinMax.min} max={this._widthMinMax.max} value={this._selectorWidth} id="myRange" onChange={e => {layoutDoc._layout_borderWidth = e.target.value; this._selectorWidth = Number(e.target.value); console.log(layoutDoc._layout_borderWidth)}}/>
+                    <input className='max-min-selector' defaultValue={this._widthMinMax.max} onChange={e => this._widthMinMax.max = e.target.value}/>
                 </div>
             </div>
         );
@@ -254,7 +258,7 @@ export class ContextMenu extends ObservableReactComponent<{}> {
         this.itemsNeedSearch && setTimeout(() => this._searchRef.current?.focus());
         return (
             <div>
-                {this._displayColorPicker ? this.colorPicker : null}
+                {this._displayBorderMenu ? this.colorPicker : null}
                 <div
                     className="contextMenu-cont"
                     ref={action((r: any) => {
-- 
cgit v1.2.3-70-g09d2


From f00a5326fa331859db131bb1d8988db93602830b Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 27 Aug 2024 19:16:28 -0400
Subject: maxmatching algorithm

---
 src/client/documents/Documents.ts                  |   5 +-
 src/client/views/ContextMenu.tsx                   |   9 +-
 src/client/views/StyleProvider.tsx                 |   4 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 190 ++++++++++++++-------
 src/client/views/nodes/DocumentView.tsx            |  14 +-
 5 files changed, 139 insertions(+), 83 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index aecc79189..a4ba2978c 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -237,6 +237,9 @@ export class DocumentOptions {
     dataViz?: string;
     dataViz_savedTemplates?: LISTt;
 
+    borderWidth?: NUMt = new NumInfo('Width of user-added border', false);
+    borderColor?: STRt = new StrInfo('Color of user-added border', false);
+
     layout?: string | Doc; // default layout string or template document
     layout_isSvg?: BOOLt = new BoolInfo('whether document decorations and other selections should handle pointerEvents for svg content or use doc bounding box');
     layout_keyValue?: STRt = new StrInfo('layout definition for showing keyValue view of document', false);
@@ -256,8 +259,6 @@ export class DocumentOptions {
     layout_hideContextMenu?: BOOLt = new BoolInfo('whether the context menu can be shown');
     layout_borderRounding?: string;
     _layout_borderRounding?: STRt = new StrInfo('amount of rounding to document view corners');
-    _layout_borderWidth?: NUMt = new NumInfo('Hey now', false);
-    _layout_borderColor?: STRt = new StrInfo('No no', false);
     _layout_modificationDate?: DATEt = new DateInfo('last modification date of doc layout', false);
     _layout_nativeDimEditable?: BOOLt = new BoolInfo('native dimensions can be modified using document decoration reizers', false);
     _layout_reflowVertical?: BOOLt = new BoolInfo('permit vertical resizing with content "reflow"');
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index b80d97e81..f5654446d 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable default-param-last */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { DivHeight, DivWidth, returnFalse, setupMoveUpEvents } from '../../ClientUtils';
@@ -222,7 +222,6 @@ export class ContextMenu extends ObservableReactComponent<{}> {
 
     get colorPicker() {
         const doc = DocumentView.Selected().lastElement().Document;
-        const layoutDoc = doc ? Doc.Layout(doc) : doc;
 
         return (
             <div className='contextMenu-borderMenu' style={{position: 'absolute', left: this.pageX,
@@ -239,15 +238,15 @@ export class ContextMenu extends ObservableReactComponent<{}> {
                 </div>
                 <SketchPicker
                 onChange={undoable(
-                    action((col: ColorResult) => layoutDoc._layout_borderColor = col.hex),
+                    action((col: ColorResult) => doc.borderColor = col.hex),
                     'set stroke color property'
                 )}
                 presetColors={[]}
-                color={StrCast(layoutDoc._layout_borderColor)}
+                color={StrCast(doc.borderColor)}
                 />
                 <div className='bottom-box'>
                     <input className='max-min-selector' defaultValue={this._widthMinMax.min} onChange={e => this._widthMinMax.max = e.target.value}/>
-                    <input className='width-selector' type="range" min={this._widthMinMax.min} max={this._widthMinMax.max} value={this._selectorWidth} id="myRange" onChange={e => {layoutDoc._layout_borderWidth = e.target.value; this._selectorWidth = Number(e.target.value); console.log(layoutDoc._layout_borderWidth)}}/>
+                    <input className='width-selector' type="range" min={this._widthMinMax.min} max={this._widthMinMax.max} value={this._selectorWidth} id="myRange" onChange={e => runInAction(() => {doc.borderWidth = e.target.value; this._selectorWidth = Number(e.target.value)})}/>
                     <input className='max-min-selector' defaultValue={this._widthMinMax.max} onChange={e => this._widthMinMax.max = e.target.value}/>
                 </div>
             </div>
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index b7dbcf7a6..3ecb101f8 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -205,7 +205,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
         //case StyleProp.
         case StyleProp.BorderPath: {
             const docWidth = Number(doc?._width);
-            const borderWidth = Number(StrCast(layoutDoc?._layout_borderWidth));
+            const borderWidth = Number(StrCast(doc?.borderWidth));
             const ratio = borderWidth / docWidth;
             const borderRadius = Number(StrCast(layoutDoc?._layout_borderRounding).replace('px', ''));
             const radiusRatio = borderRadius / docWidth;
@@ -219,7 +219,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                         jsx: (
                             <div key="border2" className="documentView-customBorder" style={{ pointerEvents: 'none' }}>
                                 <svg style={{ overflow: 'visible', height: '100%' }} viewBox={`0 0 ${PanelWidth?.()} ${PanelHeight?.()}`}>
-                                    <path d={borderPath} style={{ stroke: StrCast(layoutDoc?._layout_borderColor), fill: 'transparent', strokeWidth: `${StrCast(layoutDoc?._layout_borderWidth)}px` }} />
+                                    <path d={borderPath} style={{ stroke: StrCast(doc?.borderColor), fill: 'transparent', strokeWidth: `${StrCast(doc?.borderWidth)}px` }} />
                                 </svg>
                             </div>
                         ),
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 7df445b88..ffc4dd0b1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -419,6 +419,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         // mainCollection.addDocument(doc);
         //this._dataViz?.getRandomSample();
+
+        console.log(this.maxMatches(3, Array.from([[2], [1], [2]])));
     }
 
     get templatesPreviewContents(){
@@ -810,6 +812,41 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         this.forceUpdate();
     }
 
+    findMatches = () => {
+
+    }
+
+    maxMatches = (fieldsCt: number, matches: number[][]) => {
+        const used: boolean[] = Array(fieldsCt).fill(false);
+        const mt: number[] = Array(fieldsCt).fill(-1);
+
+        const augmentingPath = (v: number): boolean => {
+            if (used[v]) return false;
+            used[v] = true;
+            for (const to of matches[v]) {
+                if (mt[to] === -1 || augmentingPath(mt[to])) {
+                    mt[to] = v;
+                    return true;
+                }
+            }
+            return false;
+        }
+    
+        for (let v = 0; v < fieldsCt; ++v) {
+            console.log(v)
+            used.fill(false);
+            augmentingPath(v);
+        }
+
+        let numMatches: number = 0;
+
+        for (let i = 0; i < fieldsCt; ++i) {
+            if (mt[i] !== -1) ++numMatches;
+        }
+
+        return numMatches;
+    }
+
     get dashboardContents(){
         return (
         <div className='docCreatorMenu-dashboard-view'>
@@ -985,26 +1022,31 @@ enum FieldSize {
     HUGE = 'huge'
 }
 
+type Field = {
+    tl: [number, number], 
+    br: [number, number], 
+    types: FieldType[], 
+    sizes?: FieldSize[], 
+    opts: FieldOpts;
+};
+
 export interface TemplateDocInfos {
     height: number;
     width: number;
-    fields: {tl: [number, number], br: [number, number], types: FieldType[], sizes?: FieldSize[]}[];
-}
-
-export interface TemplateDocField {
-    coordinates: {tl: [number, number], br: [number, number]};
-    getDoc: (parentWidth: number, parentHeight: number, title: string, content: string) => Doc;
+    fields: Field[];
 }
 
 export interface FieldOpts {
     backgroundColor?: string;
-    roundedCorners?: boolean;
-    vertCenteredText?: boolean;
-    horizCenteredText?: boolean;
-    transparency?: number;
+    color?: string;
+    cornerRounding?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    contentXCentering?: 'left' | 'center' | 'right';
+    contentYCentering?: 'top' | 'center' | 'bottom';
+    opacity?: number;
     rotation?: number;
     //animation?: boolean;
-    fontColor?: string;
     fontBold?: boolean;
     fontTransform?: 'toUpper' | 'toLower';
 }
@@ -1023,7 +1065,9 @@ export class FieldFuncs {
     public static TextField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
         const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
 
-        const doc = Docs.Create.TextDocument(content, {   
+        const bool = true;
+
+        const docWithBasicOpts = (Docs.Create.TextDocument)(content, {   
             _height: height, 
             _width: width, 
             title: title, 
@@ -1031,11 +1075,15 @@ export class FieldFuncs {
             y: coord.y, 
             _text_fontSize: `${height/2}` ,
             backgroundColor: opts.backgroundColor ?? '',
-            
-        
-        })
+            color: opts.color,
+            _layout_borderRounding: `${opts.cornerRounding}`,
+            borderWidth: opts.borderWidth,
+            borderColor: opts.borderColor,
+            opacity: opts.opacity,
+            _layout_centered: opts.contentXCentering === 'center' ? true : false,
+        });
 
-        return doc;
+        return docWithBasicOpts;
     }
 
     public static ImageField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string) => {
@@ -1071,70 +1119,82 @@ export class TemplateLayouts {
             tl: [-.6, -.9], 
             br: [.6, -.8], 
             types: [FieldType.TEXT],
-            sizes: [FieldSize.TINY]
+            sizes: [FieldSize.TINY],
+            opts: {
+
+            }
         }, {
             tl: [-.9, -.7], 
             br: [.9, .2], 
             types: [FieldType.TEXT, FieldType.VISUAL],
-            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+            opts: {
+
+            }
         }, {
             tl: [-.6, .3], 
             br: [.6, .4], 
             types: [FieldType.TEXT],
-            sizes: [FieldSize.TINY]
+            sizes: [FieldSize.TINY],
+            opts: {
+
+            }
         }, {
             tl: [-.9, .5], 
             br: [.9, .9], 
             types: [FieldType.TEXT, FieldType.VISUAL],
-            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
-        }]
-    };
+            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+            opts: {
 
-    public static FourField002: TemplateDocInfos = {
-        width: 450, 
-        height: 600, 
-        fields: [{
-            tl: [-.6, -.9], 
-            br: [.6, -.8], 
-            types: [FieldType.TEXT],
-            sizes: [FieldSize.TINY]
-        }, {
-            tl: [-.9, -.7], 
-            br: [.9, .2], 
-            types: [FieldType.TEXT, FieldType.VISUAL],
-            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
-        }, {
-            tl: [-.9, .3], 
-            br: [-.05, .9], 
-            types: [FieldType.TEXT],
-            sizes: [FieldSize.TINY]
-        }, {
-            tl: [.05, .3], 
-            br: [.9, .9], 
-            types: [FieldType.TEXT, FieldType.VISUAL],
-            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+            }
         }]
     };
 
-    public static TwoFieldPlusCarousel: TemplateDocInfos = {
-        width: 500, 
-        height: 600, 
-        fields: [{
-            tl: [-.9, -.99], 
-            br: [.9, -.7], 
-            types: [FieldType.TEXT],
-            sizes: [FieldSize.TINY]
-        }, {
-            tl: [-.9, -.65], 
-            br: [.9, .35], 
-            types: [],
-            sizes: []
-        }, {
-            tl: [-.9, .4], 
-            br: [.9, .95], 
-            types: [FieldType.TEXT],
-            sizes: [FieldSize.TINY]
-        }]
-    };
+//     public static FourField002: TemplateDocInfos = {
+//         width: 450, 
+//         height: 600, 
+//         fields: [{
+//             tl: [-.6, -.9], 
+//             br: [.6, -.8], 
+//             types: [FieldType.TEXT],
+//             sizes: [FieldSize.TINY]
+//         }, {
+//             tl: [-.9, -.7], 
+//             br: [.9, .2], 
+//             types: [FieldType.TEXT, FieldType.VISUAL],
+//             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+//         }, {
+//             tl: [-.9, .3], 
+//             br: [-.05, .9], 
+//             types: [FieldType.TEXT],
+//             sizes: [FieldSize.TINY]
+//         }, {
+//             tl: [.05, .3], 
+//             br: [.9, .9], 
+//             types: [FieldType.TEXT, FieldType.VISUAL],
+//             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+//         }]
+//     };
+
+//     public static TwoFieldPlusCarousel: TemplateDocInfos = {
+//         width: 500, 
+//         height: 600, 
+//         fields: [{
+//             tl: [-.9, -.99], 
+//             br: [.9, -.7], 
+//             types: [FieldType.TEXT],
+//             sizes: [FieldSize.TINY]
+//         }, {
+//             tl: [-.9, -.65], 
+//             br: [.9, .35], 
+//             types: [],
+//             sizes: []
+//         }, {
+//             tl: [-.9, .4], 
+//             br: [.9, .95], 
+//             types: [FieldType.TEXT],
+//             sizes: [FieldSize.TINY]
+//         }]
+//     };
 
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 3c898dea2..5af6e65de 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -948,12 +948,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
 
         return (
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-            // <div style={{position: 'relative'}}>
-            //     <div className='docView-border-top' style={{width: `${this.layoutDoc._width}px`, height: '100px', backgroundColor: 'black'}}/>
-            //     <div className='docView-border-right' style={{position: 'absolute', right: '-10px', width: '10px', height: `${this.layoutDoc._height}px`, backgroundColor: 'black'}}/>
-            //     <div className='docView-border-left' style={{position: 'absolute', left: '-10px', width: '10px', height: `${this.layoutDoc._height}px`, backgroundColor: 'black'}}/>
-            //     <div className='docView-border-bottom' style={{position: 'absolute', bottom: '-10px', height: '100px', width: `${this.layoutDoc._width}px`, backgroundColor: 'black'}}/>
-            <div
+                <div
                     className={`${DocumentView.ROOT_DIV} docView-hack`}
                     ref={this._mainCont}
                     onContextMenu={this.onContextMenu}
@@ -969,7 +964,6 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                     {this._componentView?.isUnstyledView?.() || this.Document.type === DocumentType.CONFIG ? renderDoc : DocumentViewInternal.AnimationEffect(renderDoc, this.Document[Animation], this.Document)}
                     {borderPath?.jsx}
                 </div>
-            // </div>
         );
     }
 
@@ -1138,7 +1132,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
         return Math.max(minTextScale, this._props.PanelHeight() / (this.effectiveNativeHeight || 1)); // height-limited or unscaled
     }
     @computed private get panelWidth() {
-        return this.effectiveNativeWidth ? this.effectiveNativeWidth * this.nativeScaling : this._props.PanelWidth();
+        return this.effectiveNativeWidth ? this.effectiveNativeWidth * this.nativeScaling: this._props.PanelWidth();
     }
     @computed private get panelHeight() {
         if (this.effectiveNativeHeight && (!this.layout_fitWidth || !this.layoutDoc.layout_reflowVertical)) {
@@ -1449,6 +1443,8 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
 
     render() {
         TraceMobx();
+        const borderWidth = 50/*Number(StrCast(this.layoutDoc.layout_borderWidth).replace('px', ''))*/;
+        console.log(this._props.PanelWidth(), borderWidth)
         const xshift = Math.abs(this.Xshift) <= 0.001 ? this._props.PanelWidth() : undefined;
         const yshift = Math.abs(this.Yshift) <= 0.001 ? this._props.PanelHeight() : undefined;
 
@@ -1468,7 +1464,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
                         style={{
                             transform: `translate(${this.centeringX}px, ${this.centeringY}px)`,
                             width: xshift ?? `${this._props.PanelWidth() - this.Xshift * 2}px`,
-                            height: this._props.forceAutoHeight ? undefined : yshift ?? (this.layout_fitWidth ? `${this.panelHeight}px` : `${(this.effectiveNativeHeight / this.effectiveNativeWidth) * this._props.PanelWidth()}px`),
+                            height: this._props.forceAutoHeight ? '1000px' : yshift ?? (this.layout_fitWidth ? `${this.panelHeight + 500}px` : `${(this.effectiveNativeHeight / this.effectiveNativeWidth) * this._props.PanelWidth() + 500}px`),
                         }}>
                         <DocumentViewInternal
                             {...this._props}
-- 
cgit v1.2.3-70-g09d2


From 971459577b1e11efb5eb1e91dbb4ac5d75735cf6 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 28 Aug 2024 01:25:31 -0400
Subject: template matching algorithm

---
 src/client/views/MainView.tsx                      |  1 -
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 43 +++++++++++++++++++---
 2 files changed, 37 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 9c350afc0..2a937d403 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -592,7 +592,6 @@ export class MainView extends ObservableReactComponent<{}> {
                 else break;
             }
             if (!targClass.includes('contextMenu')) {
-                console.log(targClass)
                 ContextMenu.Instance.closeMenu();
             }
             !['timeline-menu-desc', 'timeline-menu-item', 'timeline-menu-input'].includes(targClass) && TimelineMenu.Instance.closeMenu();
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index ffc4dd0b1..449d61a65 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -39,7 +39,7 @@ export enum LayoutType {
 }
 
 @observer
-export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & CollectionFreeFormView> {
+export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     static Instance: DocCreatorMenu;
 
@@ -812,8 +812,19 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         this.forceUpdate();
     }
 
-    findMatches = () => {
+    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);
+        template.fields.forEach((field, i) => {
+            cols.forEach((col, v) => {
+                if (colMatchesField(col, field)) {
+                    matches[i].push(v);
+                }
+            });
+        });
+
+        return matches;
     }
 
     maxMatches = (fieldsCt: number, matches: number[][]) => {
@@ -833,18 +844,29 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps & Co
         }
     
         for (let v = 0; v < fieldsCt; ++v) {
-            console.log(v)
             used.fill(false);
             augmentingPath(v);
         }
 
-        let numMatches: number = 0;
+        let count: number = 0;
 
         for (let i = 0; i < fieldsCt; ++i) {
-            if (mt[i] !== -1) ++numMatches;
+            if (mt[i] !== -1) ++count;
         }
 
-        return numMatches;
+        return count;
+    }
+
+
+    findValidTemplates = (cols: Col[], templates: TemplateDocInfos[]) => {
+        const validTemplates: TemplateDocInfos[] = [];
+        templates.forEach(template => {
+            const numFields =  template.fields.length;
+            const matches = this.matchesForTemplate(template, cols);
+            if (this.maxMatches(numFields, matches) === numFields) {
+                validTemplates.push(template);
+            }
+        })
     }
 
     get dashboardContents(){
@@ -1022,6 +1044,15 @@ enum FieldSize {
     HUGE = 'huge'
 }
 
+
+type Col = {
+    size: FieldSize;
+    content: string;
+    desc: string;
+    title: string;
+    type: FieldType;
+}
+
 type Field = {
     tl: [number, number], 
     br: [number, number], 
-- 
cgit v1.2.3-70-g09d2


From f320fd9c5b387339fe9893b0c2d91b4396fc4552 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 28 Aug 2024 03:50:44 -0400
Subject: algorithm for matching templates working

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |  10 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 111 ++++++++++++++-------
 2 files changed, 81 insertions(+), 40 deletions(-)

(limited to 'src')

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: {
 
-- 
cgit v1.2.3-70-g09d2


From 85c0b1105dbdd4037872ecfc6b921551e1939eb8 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 29 Aug 2024 04:06:15 -0400
Subject: Dataviz crash hopefully fixed; prototype func for generating
 templates; radius NaN bug handled

---
 src/client/documents/Documents.ts                  |   3 +-
 src/client/views/StyleProvider.tsx                 |   5 +
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |  18 ++-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 149 +++++++++++++++------
 .../views/nodes/DataVizBox/components/TableBox.tsx |  13 +-
 src/client/views/nodes/DocumentView.tsx            |   1 -
 6 files changed, 137 insertions(+), 52 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index a4ba2978c..723f851c6 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -178,6 +178,7 @@ export class DocumentOptions {
     map_bearing?: NUMt = new NumInfo('bearing of a map view', false);
     map_style?: STRt = new StrInfo('mapbox style for a map view', false);
     identifier?: STRt = new StrInfo('documentIcon displayed for each doc as "d[x]"', false);
+    _rotation?: NUMt = new NumInfo('Amount of rotation on a document in degrees', false);
 
     date_range?: STRt = new StrInfo('date range for calendar', false);
 
@@ -237,7 +238,7 @@ export class DocumentOptions {
     dataViz?: string;
     dataViz_savedTemplates?: LISTt;
 
-    borderWidth?: NUMt = new NumInfo('Width of user-added border', false);
+    borderWidth?: STRt = new StrInfo('Width of user-added border', false);
     borderColor?: STRt = new StrInfo('Color of user-added border', false);
 
     layout?: string | Doc; // default layout string or template document
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 3ecb101f8..bb0883cc0 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -56,11 +56,14 @@ export function styleFromLayoutString(doc: Doc, props: FieldViewProps, scale: nu
 }
 
 export function border(doc: Doc, pw: number, ph: number, rad: number = 0, inset: number = 0) {
+    if (!rad) rad = 0;
     const width = pw * inset;
     const height = ph * inset;
 
     const radius = Math.min(rad, (pw - 2 * width) / 2, (ph - 2 * height) / 2);
 
+    console.log(pw, ph, rad, inset)
+
     return `
         M ${width + radius} ${height}
         L ${pw - width - radius} ${height}
@@ -206,8 +209,10 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
         case StyleProp.BorderPath: {
             const docWidth = Number(doc?._width);
             const borderWidth = Number(StrCast(doc?.borderWidth));
+            //console.log(borderWidth);
             const ratio = borderWidth / docWidth;
             const borderRadius = Number(StrCast(layoutDoc?._layout_borderRounding).replace('px', ''));
+            console.log(StrCast(layoutDoc?._layout_borderRounding), borderRadius, typeof borderRadius)
             const radiusRatio = borderRadius / docWidth;
             const radius = radiusRatio * ((2 * borderWidth) + docWidth);
 
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 8e9680e38..82df141fa 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -53,6 +53,7 @@ export enum DataVizView {
 
 @observer
 export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+    private _urlError: boolean = false;
     private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
     private _marqueeref = React.createRef<MarqueeAnnotator>();
     private _annotationLayer: React.RefObject<HTMLDivElement> = React.createRef();
@@ -116,8 +117,17 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     // all CSV records in the dataset (that aren't an empty row)
     @computed.struct get records() {
-        const records = DataVizBox.dataset.get(CsvCast(this.dataDoc[this.fieldKey]).url.href);
-        return records?.filter(record => Object.keys(record).some(key => record[key])) ?? [];
+        try {
+            const records = DataVizBox.dataset.get(CsvCast(this.dataDoc[this.fieldKey]).url.href);
+            this._urlError = false;
+            return records?.filter(record => Object.keys(record).some(key => record[key])) ?? [];
+        } catch (e){
+            this._urlError = true;
+            const data: { [key: string]: string; }[] = [
+                { error: "Data not found"},
+              ];          
+            return data;
+        }
     }
 
     // currently chosen visualization type: line, pie, histogram, table
@@ -133,8 +143,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
     selectAxes = (axes: string[]) => {
         this.layoutDoc._dataViz_axes = new List<string>(axes);
-        //axes.forEach(axis => console.log(axis)) 
-        //DocCreatorMenu.Instance.generateTemplates('');
     };
     @computed.struct get titleCol() {
         return StrCast(this.layoutDoc._dataViz_titleCol);
@@ -315,7 +323,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     componentDidMount() {
         this._props.setContentViewBox?.(this);
-        if (!DataVizBox.dataset.has(CsvCast(this.dataDoc[this.fieldKey]).url.href)) this.fetchData();
+        if (!this._urlError) { if (!DataVizBox.dataset.has(CsvCast(this.dataDoc[this.fieldKey]).url.href)) this.fetchData() };
         this._disposers.datavis = reaction(
             () => {
                 if (this.layoutDoc.dataViz_schemaLive === undefined) this.layoutDoc.dataViz_schemaLive = true;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 43cf57167..27ffc63ef 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -404,21 +404,21 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
 
     testTemplate = () => { 
-        // const temp = TemplateLayouts.TwoFieldPlusCarousel;
-        // const title = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br});
-        // const title1 = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br});
-        // const title2 = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br});
-        // const title3 = new TemplateDocTextField({tl: temp.fields[0].tl, br: temp.fields[0].br});
-        // const focus = new TemplateDocCarouselField({tl: temp.fields[1].tl, br: temp.fields[1].br}, temp.width, temp.height, '', [title1, title2, title3].map(field => field.getDoc(temp.width, temp.height, 'hey now', '')));
-        // const caption = new TemplateDocTextField({tl: temp.fields[2].tl, br: temp.fields[2].br});
-        // let fields = [title, caption].map(field => field.getDoc(temp.width, temp.height, 'hey now', ''));
-        // fields = fields.concat(focus.getDoc());
-        // console.log(temp.height, temp.width)
-        // const doc = Docs.Create.StackingDocument(fields, { _height: temp.height, _width: temp.width, title: 'hey', x: 400, y: 400 });
-
-        // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        // mainCollection.addDocument(doc);
-        //this._dataViz?.getRandomSample();
+        const temp = TemplateLayouts.FourField001;
+        const title: Doc = FieldFuncs.TextField({tl: temp.fields[0].tl, br: temp.fields[0].br}, temp.height, temp.width, 'title', 'Title', {backgroundColor: 'transparent'});
+        const image: Doc = FieldFuncs.ImageField({tl: temp.fields[1].tl, br: temp.fields[1].br}, temp.height, temp.width, 'title', '', {borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10, rotation: 40});
+        const caption: Doc = FieldFuncs.TextField({tl: temp.fields[2].tl, br: temp.fields[2].br}, temp.height, temp.width, 'title', 'Caption', {backgroundColor: 'transparent'});
+        const desc: Doc = FieldFuncs.TextField({tl: temp.fields[3].tl, br: temp.fields[3].br}, temp.height, temp.width, 'title', '', {backgroundColor: 'lightblue', borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10});
+
+        const doc = Docs.Create.FreeformDocument([title, image, caption, desc], { _height: temp.height, _width: temp.width, title: 'hey', x: 400, y: 400 });
+
+        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+        mainCollection.addDocument(doc);
+
+        // setTimeout(() => image.borderWidth = '10', 1000);
+        // setTimeout(() => desc.borderWidth = '10', 1000);
+
+        // this._dataViz?.getRandomSample();
 
 
         // public static FourField001: TemplateDocInfos = {
@@ -450,12 +450,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         //         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: ''}
+        // 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]));
+        // console.log(this.findValidTemplates([field1, field2, field3, field4], [TemplateLayouts.FourField001]));
     }
 
     get templatesPreviewContents(){
@@ -609,9 +609,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }
     }
 
-    doc = () => {
-        return Docs.Create.FreeformDocument([], { _height: 200, _width: 200, title: 'title'});
-    }
+    // doc = () => {
+    //     return Docs.Create.FreeformDocument([], { _height: 200, _width: 200, title: 'title'});
+    // }
 
     screenToLocalTransform = () =>
     this._props
@@ -802,7 +802,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     @action addField = () => {
-        const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.TEXT, desc: '', size: FieldSize.MEDIUM}])
+        const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.UNSET, desc: '', size: FieldSize.MEDIUM}])
         this._columns = newFields;
     }
 
@@ -822,9 +822,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             if (this._columns.length === 1) {
                 this._columns = []  
             } else {
-                console.log(this._columns)
                 this._columns.splice(this._columns.indexOf(toRemove[0]), 1);
-                console.log(this._columns)
             }
         }   
     }
@@ -899,7 +897,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         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.title);
             }
@@ -908,7 +905,32 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return validTemplates;
     }
 
+    createEmptyTemplate = (template: TemplateDocInfos, assignments: {[field: number]: Col}) => {
+        const fields: Doc[] = [];
+
+        Object.entries(assignments).forEach(([f, col]) => {
+            const field: Field = template.fields[Number(f)];
+            const doc = (col.type === TemplateFieldType.VISUAL ? FieldFuncs.ImageField : FieldFuncs.TextField)({
+                tl: field.tl, 
+                br: field.br }, 
+                template.height, 
+                template.width, 
+                col.title, 
+                '', 
+                field.opts
+            );
+
+            fields.push(doc);
+        });
+
+        const renderedTemplate = Docs.Create.FreeformDocument(fields, { _height: template.height, _width: template.width, title: template.title, x: 400, y: 400 });
+
+        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+        mainCollection.addDocument(renderedTemplate);
+    }
+
     get dashboardContents(){
+
         return (
         <div className='docCreatorMenu-dashboard-view'>
             <div className='topbar'>
@@ -919,10 +941,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             {this.fieldsInfos.map((field, index) => 
                 <div className='field-panel' id={`${index}`}>
                     <div className='properties-wrapper'>
-                        <input className='field-property-container' id={`${Math.random() * 100}`} defaultValue={field.title} placeholder={'Enter title'} style={{width: field.title === '' ? '30%' : ''}}/>
+                        <input className='field-property-container' id={`${Math.random() * 100}`} defaultValue={field.title} placeholder={'Enter title'}/>
                         <div className='field-type-selection-container'>
-                            {field.type ? null : <span className='placeholder'>Select media type</span>}
-                            <span className='type-display'>{field.type ? field.type === 'text' ? 'Text Field' : 'File Field' : ''}</span>
+                            {field.type === TemplateFieldType.UNSET ? <span className='placeholder'>Select media type</span> : null}
+                            <span className='type-display'>{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
                             <div className='bubbles'>
                                 <input className='bubble' type="radio" name="type" onClick={() => {this.setFieldType(field, TemplateFieldType.TEXT)}}/> 
                                 <div className='text'>Text</div>
@@ -930,15 +952,13 @@ 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%' : ''}}/>
                     </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.'} /> 
                     <div>
                         <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
                             <FontAwesomeIcon icon='trash'/>
                         </button>
-                        {/* <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))}>
-                            <FontAwesomeIcon icon='lightbulb'/>
-                        </button> */}
                     </div>
                 </div>
             )}
@@ -1111,7 +1131,7 @@ export interface FieldOpts {
     backgroundColor?: string;
     color?: string;
     cornerRounding?: number;
-    borderWidth?: number;
+    borderWidth?: string;
     borderColor?: string;
     contentXCentering?: 'left' | 'center' | 'right';
     contentYCentering?: 'top' | 'center' | 'bottom';
@@ -1125,8 +1145,8 @@ export interface FieldOpts {
 export class FieldFuncs {
 
     private static getDimensions = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number): {width: number, height: number, coord: {x: number, y: number}} => {
-        const l = coords.tl[0] * parentWidth / 2; const t = coords.tl[1] * parentHeight / 2; //prettier-ignore
-        const r = coords.br[0] * parentWidth / 2; const b = coords.br[1] * parentHeight / 2; //prettier-ignore
+        const l = coords.tl[0] * parentHeight / 2; const t = coords.tl[1] * parentWidth / 2; //prettier-ignore
+        const r = coords.br[0] * parentHeight / 2; const b = coords.br[1] * parentWidth / 2; //prettier-ignore
         const width = r - l;
         const height = b - t;
         const coord = {x: l, y: t};
@@ -1147,17 +1167,18 @@ export class FieldFuncs {
             _text_fontSize: `${height/2}` ,
             backgroundColor: opts.backgroundColor ?? '',
             color: opts.color,
-            _layout_borderRounding: `${opts.cornerRounding}`,
-            borderWidth: opts.borderWidth,
+            _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
             borderColor: opts.borderColor,
+            borderWidth: opts.borderWidth,
             opacity: opts.opacity,
             _layout_centered: opts.contentXCentering === 'center' ? true : false,
+            _rotation: opts.rotation,
         });
 
         return docWithBasicOpts;
     }
 
-    public static ImageField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string) => {
+    public static ImageField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
         const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
 
         const doc = Docs.Create.ImageDocument(content, {   
@@ -1166,7 +1187,16 @@ export class FieldFuncs {
             title: title, 
             x: coord.x, 
             y: coord.y, 
-            _text_fontSize: `${height/2}` })
+            _text_fontSize: `${height/2}` ,
+            backgroundColor: opts.backgroundColor ?? '',
+            color: opts.color,
+            _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
+            borderColor: opts.borderColor,
+            borderWidth: opts.borderWidth,
+            opacity: opts.opacity,
+            _layout_centered: opts.contentXCentering === 'center' ? true : false,
+            _rotation: opts.rotation,
+        });
 
         return doc;
     }
@@ -1222,6 +1252,45 @@ export class TemplateLayouts {
         }]
     };
 
+    public static FourField002: TemplateDocInfos = {
+        title: 'fourfield2',
+        width: 475, 
+        height: 870, 
+        fields: [{
+            tl: [-.95, -.83], 
+            br: [-.15, .83], 
+            types: [TemplateFieldType.VISUAL],
+            sizes: [FieldSize.MEDIUM, FieldSize.LARGE],
+            opts: {
+
+            }
+        }, {
+            tl: [-.9, -.7], 
+            br: [.9, .2], 
+            types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+            opts: {
+
+            }
+        }, {
+            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: {
+
+            }
+        }]
+    };
+
 //     public static FourField002: TemplateDocInfos = {
 //         width: 450, 
 //         height: 600, 
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 559b8507c..6d800bc19 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -178,7 +178,6 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                 } else {
                     const newAxes = this._props.axes;
                     if (newAxes.includes(col)) newAxes.splice(newAxes.indexOf(col), 1);
-                    else if (newAxes.length > 2) newAxes[newAxes.length - 1] = col;
                     else newAxes.push(col);
                     this._props.selectAxes(newAxes);
                 }
@@ -410,11 +409,13 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                                 color:
                                                     this._props.axes.slice().reverse().lastElement() === col
                                                         ? 'darkgreen'
-                                                        : this._props.axes.length > 2 && this._props.axes.lastElement() === col
+                                                        : this._props.axes.length > 3 && this._props.axes.lastElement() === col
                                                           ? 'darkred'
-                                                          : this._props.axes.lastElement() === col || (this._props.axes.length > 2 && this._props.axes[1] === col)
+                                                          : this._props.axes.length > 3 && this._props.axes[1] === col
                                                             ? 'darkblue'
-                                                            : undefined,
+                                                            : this._props.axes.lastElement() === col || (this._props.axes.length > 3 && this._props.axes[2] === col) 
+                                                              ? 'darkcyan'
+                                                              : undefined,
                                                 background: this.settingTitle
                                                     ? 'lightgrey'
                                                     : this._props.axes.slice().reverse().lastElement() === col
@@ -423,7 +424,9 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                                         ? '#Fbdbdb'
                                                         : this._props.axes.lastElement() === col || (this._props.axes.length > 2 && this._props.axes[1] === col)
                                                           ? '#c6ebf7'
-                                                          : undefined,
+                                                          : this._props.axes.lastElement() === col || (this._props.axes.length > 3 && this._props.axes[2] === col) 
+                                                            ? '#c2f0f4'
+                                                            : undefined,
                                                 fontWeight: 'bolder',
                                                 border: '3px solid black',
                                             }}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 5af6e65de..79a2def87 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1444,7 +1444,6 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
     render() {
         TraceMobx();
         const borderWidth = 50/*Number(StrCast(this.layoutDoc.layout_borderWidth).replace('px', ''))*/;
-        console.log(this._props.PanelWidth(), borderWidth)
         const xshift = Math.abs(this.Xshift) <= 0.001 ? this._props.PanelWidth() : undefined;
         const yshift = Math.abs(this.Yshift) <= 0.001 ? this._props.PanelHeight() : undefined;
 
-- 
cgit v1.2.3-70-g09d2


From 1d0d2a74130ca8ca45be4f0f75f8584a60491dd9 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 29 Aug 2024 20:04:19 -0400
Subject: one template basically loaded in

---
 src/client/views/StyleProvider.tsx                 |   3 -
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 458 ++++++++++++---------
 2 files changed, 266 insertions(+), 195 deletions(-)

(limited to 'src')

diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index bb0883cc0..e7275a913 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -62,8 +62,6 @@ export function border(doc: Doc, pw: number, ph: number, rad: number = 0, inset:
 
     const radius = Math.min(rad, (pw - 2 * width) / 2, (ph - 2 * height) / 2);
 
-    console.log(pw, ph, rad, inset)
-
     return `
         M ${width + radius} ${height}
         L ${pw - width - radius} ${height}
@@ -212,7 +210,6 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
             //console.log(borderWidth);
             const ratio = borderWidth / docWidth;
             const borderRadius = Number(StrCast(layoutDoc?._layout_borderRounding).replace('px', ''));
-            console.log(StrCast(layoutDoc?._layout_borderRounding), borderRadius, typeof borderRadius)
             const radiusRatio = borderRadius / docWidth;
             const radius = radiusRatio * ((2 * borderWidth) + docWidth);
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 27ffc63ef..5534fced3 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -404,60 +404,180 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
 
     testTemplate = () => { 
-        const temp = TemplateLayouts.FourField001;
-        const title: Doc = FieldFuncs.TextField({tl: temp.fields[0].tl, br: temp.fields[0].br}, temp.height, temp.width, 'title', 'Title', {backgroundColor: 'transparent'});
-        const image: Doc = FieldFuncs.ImageField({tl: temp.fields[1].tl, br: temp.fields[1].br}, temp.height, temp.width, 'title', '', {borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10, rotation: 40});
-        const caption: Doc = FieldFuncs.TextField({tl: temp.fields[2].tl, br: temp.fields[2].br}, temp.height, temp.width, 'title', 'Caption', {backgroundColor: 'transparent'});
-        const desc: Doc = FieldFuncs.TextField({tl: temp.fields[3].tl, br: temp.fields[3].br}, temp.height, temp.width, 'title', '', {backgroundColor: 'lightblue', borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10});
+        // const temp = TemplateLayouts.FourField001;
+        // const title: Doc = FieldFuncs.TextField({tl: temp.fields[0].tl, br: temp.fields[0].br}, temp.height, temp.width, 'title', 'Title', {backgroundColor: 'transparent'});
+        // const image: Doc = FieldFuncs.ImageField({tl: temp.fields[1].tl, br: temp.fields[1].br}, temp.height, temp.width, 'title', '', {borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10, rotation: 40});
+        // const caption: Doc = FieldFuncs.TextField({tl: temp.fields[2].tl, br: temp.fields[2].br}, temp.height, temp.width, 'title', 'Caption', {backgroundColor: 'transparent'});
+        // const desc: Doc = FieldFuncs.TextField({tl: temp.fields[3].tl, br: temp.fields[3].br}, temp.height, temp.width, 'title', '', {backgroundColor: 'lightblue', borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10});
 
-        const doc = Docs.Create.FreeformDocument([title, image, caption, desc], { _height: temp.height, _width: temp.width, title: 'hey', x: 400, y: 400 });
+        // const doc = Docs.Create.FreeformDocument([title, image, caption, desc], { _height: temp.height, _width: temp.width, title: 'hey', x: 400, y: 400 });
 
-        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        mainCollection.addDocument(doc);
+        // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+        // mainCollection.addDocument(doc);
+
+        const temp = TemplateLayouts.FourField002;
+
+        const img: Col = {type: TemplateFieldType.VISUAL, title: 'Image', desc: '', size: FieldSize.LARGE};
+        const capt1: Col = {type: TemplateFieldType.TEXT, title: 'Type', desc: '', 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};
 
-        // setTimeout(() => image.borderWidth = '10', 1000);
-        // setTimeout(() => desc.borderWidth = '10', 1000);
+        const assignments = {'0': img, '1': capt1, '2': capt2, '3': desc}
 
-        // this._dataViz?.getRandomSample();
+        this.createEmptyTemplate(temp, assignments);
+    }
 
+    @action addField = () => {
+        const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.UNSET, 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._columns.filter(f => f === field);
+            if (!toRemove) return;
+
+            if (toRemove.length > 1) {
+                while (toRemove.length > 1) {
+                    toRemove.pop();
+                }
+            }
 
-        // public static FourField001: TemplateDocInfos = {
-        //     title: 'fourfield1',
-        //     width: 450, 
-        //     height: 600, 
-        //     fields: [{
-        //         tl: [-.6, -.9], 
-        //         br: [.6, -.8], 
-        //         types: [TemplateFieldType.TEXT],
-        //         sizes: [FieldSize.TINY],
-        //         opts: {
+            if (this._columns.length === 1) {
+                this._columns = []  
+            } else {
+                this._columns.splice(this._columns.indexOf(toRemove[0]), 1);
+            }
+        }   
+    }
+
+    setFieldType = (column: Col, type: TemplateFieldType) => {
+        if (this.selectedFields.includes(column.title)) {
+            this._dataViz?.setFieldType(column.title, type);
+        } else {
+            column.type = type;
+        }
+        this.forceUpdate();
+    }
+
+    setFieldDesc = (column: Col, desc: string) => {
+        if (this.selectedFields.includes(column.title)) {
+            this._dataViz?.setFieldDesc(column.title, desc);
+        } else {
+            column.desc = desc;
+        }
+        this.forceUpdate();
+    }
+
+    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).fill([]).map(() => []);
+        console.log(matches)
+        template.fields.forEach((field, i) => {
+            cols.forEach((col, v) => {
+                if (colMatchesField(col, field)) {
+                    matches[i].push(v);
+                }
+            });
+        });
+
+        return matches;
+    }
+
+    maxMatches = (fieldsCt: number, matches: number[][]) => {
+        const used: boolean[] = Array(fieldsCt).fill(false);
+        const mt: number[] = Array(fieldsCt).fill(-1);
+
+        const augmentingPath = (v: number): boolean => {
+            if (used[v]) return false;
+            used[v] = true;
+            for (const to of matches[v]) {
+                if (mt[to] === -1 || augmentingPath(mt[to])) {
+                    mt[to] = v;
+                    return true;
+                }
+            }
+            return false;
+        }
     
-        //         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]));
+        for (let v = 0; v < fieldsCt; ++v) {
+            used.fill(false);
+            augmentingPath(v);
+        }
+
+        let count: number = 0;
+
+        for (let i = 0; i < fieldsCt; ++i) {
+            if (mt[i] !== -1) ++count;
+        }
+
+        return count;
+    }
+
+
+    findValidTemplates = (cols: Col[], templates: TemplateDocInfos[]) => {
+        const validTemplates: string[] = [];
+        templates.forEach(template => {
+            const numFields =  template.fields.length;
+            const matches = this.matchesForTemplate(template, cols);
+            if (this.maxMatches(numFields, matches) === numFields) {
+                validTemplates.push(template.title);
+            }
+        })
+
+        return validTemplates;
+    }
+
+    createEmptyTemplate = (template: TemplateDocInfos, assignments: {[field: number]: Col}) => {
+        const fields: Doc[] = [];
+
+        Object.entries(assignments).forEach(([f, col]) => {
+            const field: Field = template.fields[Number(f)];
+            console.log(field)
+            const doc = (col.type === TemplateFieldType.VISUAL ? FieldFuncs.ImageField : FieldFuncs.TextField)({
+                tl: field.tl, 
+                br: field.br }, 
+                template.height, 
+                template.width, 
+                col.title, 
+                '', 
+                field.opts
+            );
+
+            fields.push(doc);
+        });
+
+        template.decorations.forEach(dec => {
+            const doc = FieldFuncs.FreeformField({
+                tl: dec.tl, 
+                br: dec.br }, 
+                template.height, 
+                template.width, 
+                '', 
+                '', 
+                dec.opts,
+            );
+
+            fields.push(doc);
+        });
+
+        const renderedTemplate = Docs.Create.FreeformDocument(fields, { 
+            _height: template.height, 
+            _width: template.width, 
+            title: template.title, 
+            backgroundColor: template.opts.backgroundColor,
+            x: 400, 
+            y: 400 
+        });
+
+        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+        mainCollection.addDocument(renderedTemplate);
     }
 
+
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
 
@@ -801,134 +921,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         );
     }
 
-    @action addField = () => {
-        const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.UNSET, 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._columns.filter(f => f === field);
-            if (!toRemove) return;
-
-            if (toRemove.length > 1) {
-                while (toRemove.length > 1) {
-                    toRemove.pop();
-                }
-            }
-
-            if (this._columns.length === 1) {
-                this._columns = []  
-            } else {
-                this._columns.splice(this._columns.indexOf(toRemove[0]), 1);
-            }
-        }   
-    }
-
-    setFieldType = (column: Col, type: TemplateFieldType) => {
-        if (this.selectedFields.includes(column.title)) {
-            this._dataViz?.setFieldType(column.title, type);
-        } else {
-            column.type = type;
-        }
-        this.forceUpdate();
-    }
-
-    setFieldDesc = (column: Col, desc: string) => {
-        if (this.selectedFields.includes(column.title)) {
-            this._dataViz?.setFieldDesc(column.title, desc);
-        } else {
-            column.desc = desc;
-        }
-        this.forceUpdate();
-    }
-
-    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).fill([]).map(() => []);
-        console.log(matches)
-        template.fields.forEach((field, i) => {
-            cols.forEach((col, v) => {
-                if (colMatchesField(col, field)) {
-                    matches[i].push(v);
-                }
-            });
-        });
-
-        return matches;
-    }
-
-    maxMatches = (fieldsCt: number, matches: number[][]) => {
-        const used: boolean[] = Array(fieldsCt).fill(false);
-        const mt: number[] = Array(fieldsCt).fill(-1);
-
-        const augmentingPath = (v: number): boolean => {
-            if (used[v]) return false;
-            used[v] = true;
-            for (const to of matches[v]) {
-                if (mt[to] === -1 || augmentingPath(mt[to])) {
-                    mt[to] = v;
-                    return true;
-                }
-            }
-            return false;
-        }
-    
-        for (let v = 0; v < fieldsCt; ++v) {
-            used.fill(false);
-            augmentingPath(v);
-        }
-
-        let count: number = 0;
-
-        for (let i = 0; i < fieldsCt; ++i) {
-            if (mt[i] !== -1) ++count;
-        }
-
-        return count;
-    }
-
-
-    findValidTemplates = (cols: Col[], templates: TemplateDocInfos[]) => {
-        const validTemplates: string[] = [];
-        templates.forEach(template => {
-            const numFields =  template.fields.length;
-            const matches = this.matchesForTemplate(template, cols);
-            if (this.maxMatches(numFields, matches) === numFields) {
-                validTemplates.push(template.title);
-            }
-        })
-
-        return validTemplates;
-    }
-
-    createEmptyTemplate = (template: TemplateDocInfos, assignments: {[field: number]: Col}) => {
-        const fields: Doc[] = [];
-
-        Object.entries(assignments).forEach(([f, col]) => {
-            const field: Field = template.fields[Number(f)];
-            const doc = (col.type === TemplateFieldType.VISUAL ? FieldFuncs.ImageField : FieldFuncs.TextField)({
-                tl: field.tl, 
-                br: field.br }, 
-                template.height, 
-                template.width, 
-                col.title, 
-                '', 
-                field.opts
-            );
-
-            fields.push(doc);
-        });
-
-        const renderedTemplate = Docs.Create.FreeformDocument(fields, { _height: template.height, _width: template.width, title: template.title, x: 400, y: 400 });
-
-        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        mainCollection.addDocument(renderedTemplate);
-    }
-
     get dashboardContents(){
 
         return (
@@ -1115,16 +1107,24 @@ type Col = {
 type Field = {
     tl: [number, number], 
     br: [number, number], 
-    types: TemplateFieldType[], 
+    types?: TemplateFieldType[], 
     sizes?: FieldSize[], 
     opts: FieldOpts;
 };
 
+type InkDecoration = {
+
+}
+
+type TemplateDecorations = Field | InkDecoration;
+
 export interface TemplateDocInfos {
     title: string;
     height: number;
     width: number;
+    opts: TemplateOpts;
     fields: Field[];
+    decorations: Field[];
 }
 
 export interface FieldOpts {
@@ -1142,6 +1142,10 @@ export interface FieldOpts {
     fontTransform?: 'toUpper' | 'toLower';
 }
 
+interface TemplateOpts extends FieldOpts {
+
+}
+
 export class FieldFuncs {
 
     private static getDimensions = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number): {width: number, height: number, coord: {x: number, y: number}} => {
@@ -1153,6 +1157,29 @@ export class FieldFuncs {
         return {width, height, coord};
     }
 
+    public static FreeformField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
+        const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
+
+        const docWithBasicOpts = (Docs.Create.FreeformDocument)([], {   
+            _height: height, 
+            _width: width, 
+            title: title, 
+            x: coord.x, 
+            y: coord.y, 
+            _text_fontSize: `${height/2}` ,
+            backgroundColor: opts.backgroundColor ?? '',
+            color: opts.color,
+            _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
+            borderColor: opts.borderColor,
+            borderWidth: opts.borderWidth,
+            opacity: opts.opacity,
+            _layout_centered: opts.contentXCentering === 'center' ? true : false,
+            _rotation: opts.rotation,
+        });
+
+        return docWithBasicOpts;
+    }
+
     public static TextField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
         const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
 
@@ -1217,6 +1244,7 @@ export class TemplateLayouts {
         title: 'fourfield1',
         width: 450, 
         height: 600, 
+        opts: {},
         fields: [{
             tl: [-.6, -.9], 
             br: [.6, -.8], 
@@ -1249,46 +1277,92 @@ export class TemplateLayouts {
             opts: {
 
             }
-        }]
+        }],
+        decorations: [],
     };
 
     public static FourField002: TemplateDocInfos = {
         title: 'fourfield2',
         width: 475, 
         height: 870, 
+        opts: {
+            backgroundColor: '#242425'
+        },
         fields: [{
-            tl: [-.95, -.83], 
-            br: [-.15, .83], 
-            types: [TemplateFieldType.VISUAL],
+            tl: [-.83, -.95], 
+            br: [.83, -.2], 
+            types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE],
             opts: {
-
+                borderWidth: '8',
+                borderColor: 'yellow',
             }
         }, {
-            tl: [-.9, -.7], 
-            br: [.9, .2], 
-            types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
-            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+            tl: [-.45, -.18], 
+            br: [.45, 0], 
+            types: [TemplateFieldType.TEXT],
+            sizes: [FieldSize.TINY, FieldSize.SMALL],
             opts: {
-
+                backgroundColor: 'transparent',
+                color: 'white'
             }
         }, {
-            tl: [-.6, .3], 
-            br: [.6, .4], 
+            tl: [-.45, 0], 
+            br: [.45, .18], 
             types: [TemplateFieldType.TEXT],
-            sizes: [FieldSize.TINY],
+            sizes: [FieldSize.TINY, FieldSize.SMALL],
             opts: {
-
+                backgroundColor: 'transparent',
+                color: 'white'
             }
         }, {
-            tl: [-.9, .5], 
-            br: [.9, .9], 
+            tl: [-.83, .2], 
+            br: [.83, .95], 
             types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
             opts: {
-
+                borderWidth: '8',
+                borderColor: 'yellow',
+            }
+        }],
+        decorations: [{
+            tl: [-.8, -.075], 
+            br: [-.525, .075], 
+            opts: {
+                backgroundColor: 'yellow',
+                rotation: 45
+            }
+        }, {
+            tl: [-.3075, -.0245], 
+            br: [-.2175, .0245], 
+            opts: {
+                backgroundColor: 'yellow',
+                rotation: 45
+            }
+        }, {
+            tl: [-.045, -.0245], 
+            br: [.045, .0245], 
+            opts: {
+                backgroundColor: 'yellow',
+                rotation: 45
+            }
+        }, {
+            tl: [.2175, -.0245], 
+            br: [.3075, .0245], 
+            opts: {
+                backgroundColor: 'yellow',
+                rotation: 45
             }
-        }]
+        }, {
+            tl: [.525, -.075], 
+            br: [.8, .075], 
+            opts: {
+                backgroundColor: 'yellow',
+                rotation: 45
+            }
+        }
+
+        ]
     };
 
 //     public static FourField002: TemplateDocInfos = {
-- 
cgit v1.2.3-70-g09d2


From 9ef009eb05905964ad680a8f9bb91ef492dd0a99 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 30 Aug 2024 00:30:30 -0400
Subject: more fields

---
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 138 +++++++++++++++++++--
 1 file changed, 130 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 5534fced3..73c00c1c8 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -415,7 +415,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         // mainCollection.addDocument(doc);
 
-        const temp = TemplateLayouts.FourField002;
+        const temp = TemplateLayouts.FourField003;
 
         const img: Col = {type: TemplateFieldType.VISUAL, title: 'Image', desc: '', size: FieldSize.LARGE};
         const capt1: Col = {type: TemplateFieldType.TEXT, title: 'Type', desc: '', size: FieldSize.TINY};
@@ -1295,7 +1295,7 @@ export class TemplateLayouts {
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE],
             opts: {
                 borderWidth: '8',
-                borderColor: 'yellow',
+                borderColor: '#F8E71C',
             }
         }, {
             tl: [-.45, -.18], 
@@ -1322,42 +1322,43 @@ export class TemplateLayouts {
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
             opts: {
                 borderWidth: '8',
-                borderColor: 'yellow',
+                borderColor: '#F8E71C',
+                backgroundColor: '#242425'
             }
         }],
         decorations: [{
             tl: [-.8, -.075], 
             br: [-.525, .075], 
             opts: {
-                backgroundColor: 'yellow',
+                backgroundColor: '#F8E71C',
                 rotation: 45
             }
         }, {
             tl: [-.3075, -.0245], 
             br: [-.2175, .0245], 
             opts: {
-                backgroundColor: 'yellow',
+                backgroundColor: '#F8E71C',
                 rotation: 45
             }
         }, {
             tl: [-.045, -.0245], 
             br: [.045, .0245], 
             opts: {
-                backgroundColor: 'yellow',
+                backgroundColor: '#F8E71C',
                 rotation: 45
             }
         }, {
             tl: [.2175, -.0245], 
             br: [.3075, .0245], 
             opts: {
-                backgroundColor: 'yellow',
+                backgroundColor: '#F8E71C',
                 rotation: 45
             }
         }, {
             tl: [.525, -.075], 
             br: [.8, .075], 
             opts: {
-                backgroundColor: 'yellow',
+                backgroundColor: '#F8E71C',
                 rotation: 45
             }
         }
@@ -1365,6 +1366,127 @@ export class TemplateLayouts {
         ]
     };
 
+    public static FourField003: TemplateDocInfos = {
+        title: 'fourfield3',
+        width: 477, 
+        height: 662, 
+        opts: {
+            backgroundColor: '#9E9C95'
+        },
+        fields: [{
+            tl: [-.875, -.9], 
+            br: [.875, .7], 
+            types: [TemplateFieldType.VISUAL],
+            sizes: [FieldSize.LARGE, FieldSize.HUGE],
+            opts: {
+                borderWidth: '15',
+                borderColor: '#E0E0DA',
+            }
+        }, {
+            tl: [-.95, .8], 
+            br: [-.1, .95], 
+            types: [TemplateFieldType.TEXT],
+            sizes: [FieldSize.TINY, FieldSize.SMALL],
+            opts: {
+                backgroundColor: 'transparent',
+                color: 'white'
+            }
+        }, {
+            tl: [.1, .8], 
+            br: [.95, .95], 
+            types: [TemplateFieldType.TEXT],
+            sizes: [FieldSize.TINY, FieldSize.SMALL],
+            opts: {
+                backgroundColor: 'transparent',
+                color: 'white'
+            }
+        }, {
+            tl: [-.83, .2], 
+            br: [.83, .95], 
+            types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+            sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+            opts: {
+                borderWidth: '8',
+                borderColor: '#F8E71C',
+                backgroundColor: '#242425'
+            }
+        }],
+        decorations: [{
+            tl: [-.025, .8], 
+            br: [.025, .95], 
+            opts: {
+                backgroundColor: '#E0E0DA',
+            }
+        }]
+    };
+
+    public static ThreeField001: TemplateDocInfos = {
+        title: 'threefield1',
+        width: 575, 
+        height: 770, 
+        opts: {
+            backgroundColor: '#DDD3A9'
+        },
+        fields: [{
+            tl: [-.66, -.747], 
+            br: [.66, .247], 
+            types: [TemplateFieldType.VISUAL],
+            sizes: [FieldSize.LARGE, FieldSize.HUGE],
+            opts: {
+                borderColor: 'yellow',
+                borderWidth: '8',
+                rotation: 45,
+            }
+        }, {
+            tl: [-.7, .2], 
+            br: [.7, .46], 
+            types: [TemplateFieldType.TEXT],
+            sizes: [FieldSize.TINY, FieldSize.SMALL],
+            opts: {
+                backgroundColor: 'transparent',
+                contentXCentering: 'center',
+            }
+        }, {
+            tl: [-.95, .5], 
+            br: [.95, .95], 
+            types: [TemplateFieldType.TEXT],
+            sizes: [FieldSize.MEDIUM, FieldSize.LARGE],
+            opts: {
+                backgroundColor: 'transparent',
+                color: 'white'
+            }
+        }],
+        decorations: [{
+            tl: [.2, -1.32], 
+            br: [1.8, -.66], 
+            opts: {
+                backgroundColor: '#CEB155',
+                rotation: 45,
+            }
+        }, {
+            tl: [-1.8, -1.32], 
+            br: [-.2, -.66], 
+            opts: {
+                backgroundColor: '#CEB155',
+                rotation: 135,
+            }
+        }, {
+            tl: [.33, .75], 
+            br: [1.66, 1.25], 
+            opts: {
+                backgroundColor: '#CEB155',
+                rotation: 135,
+            }
+        }, {
+            tl: [-1.66, .75], 
+            br: [-.33, 1.25], 
+            opts: {
+                backgroundColor: '#CEB155',
+                rotation: 45,
+            }
+        }]
+    };
+
 //     public static FourField002: TemplateDocInfos = {
 //         width: 450, 
 //         height: 600, 
-- 
cgit v1.2.3-70-g09d2


From b839dbde9fa3dfc2488b15a1d96464d54987f38f Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Fri, 30 Aug 2024 04:59:04 -0400
Subject: another template loaded + description compiling methods

---
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 179 ++++++++++++++++-----
 1 file changed, 135 insertions(+), 44 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 73c00c1c8..af15e6113 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -312,7 +312,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));;
         }
         return undefined;
-    }
+    };
 
     @action updateSelectedTemplate = (template: Doc) => {
         if (this._selectedTemplate === template) {
@@ -322,21 +322,21 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             this._selectedTemplate = template;
             MakeTemplate(template);
         }
-    }
+    };
 
     @action updateSelectedSavedLayout = (layout: DataVizTemplateLayout) => {
         this._layout.xMargin = layout.layout.xMargin;
         this._layout.yMargin = layout.layout.yMargin;
         this._layout.type = layout.layout.type;
         this._layout.columns = layout.columns;
-    }
+    };
 
     isSelectedLayout = (layout: DataVizTemplateLayout) => {
         return this._layout.xMargin === layout.layout.xMargin
         && this._layout.yMargin === layout.layout.yMargin 
         && this._layout.type === layout.layout.type 
         && this._layout.columns === layout.columns;
-    }
+    };
 
     @action
     generateTemplates = async (inputText: string) => {
@@ -361,7 +361,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         } catch (err) {
             console.error(err);
         } 
-    }
+    };
 
     @action
     createGeneratedTemplates = (layouts: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[], tempWidth: number, tempHeight: number) => { 
@@ -388,18 +388,18 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         setTimeout(() => {this.setGPTTemplates(GPTTemplates); /*GPTTemplates.forEach(template => mainCollection.removeDocument(template))*/}, 100);
 
         this.forceUpdate();
-    }
+    };
 
     editTemplate = (doc: Doc) => {
         //this.closeMenu();
         DocumentViewInternal.addDocTabFunc(doc, OpenWhere.lightboxAlways);
         DocumentView.DeselectAll();
         Doc.UnBrushDoc(doc);
-    }
+    };
 
     removeTemplate = (doc: Doc) => {
         this._templateDocs.splice(this._templateDocs.indexOf(doc), 1);
-    }
+    };
 
 
 
@@ -415,7 +415,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         // mainCollection.addDocument(doc);
 
-        const temp = TemplateLayouts.FourField003;
+        const temp = TemplateLayouts.FourField001;
 
         const img: Col = {type: TemplateFieldType.VISUAL, title: 'Image', desc: '', size: FieldSize.LARGE};
         const capt1: Col = {type: TemplateFieldType.TEXT, title: 'Type', desc: '', size: FieldSize.TINY};
@@ -425,12 +425,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const assignments = {'0': img, '1': capt1, '2': capt2, '3': desc}
 
         this.createEmptyTemplate(temp, assignments);
-    }
+    };
 
     @action addField = () => {
         const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.UNSET, desc: '', size: FieldSize.MEDIUM}])
         this._columns = newFields;
-    }
+    };
 
     @action removeField = (field: {title: string, type: string, desc: string}) => {
         if (this._dataViz?.axes.includes(field.title)) {
@@ -451,7 +451,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 this._columns.splice(this._columns.indexOf(toRemove[0]), 1);
             }
         }   
-    }
+    };
 
     setFieldType = (column: Col, type: TemplateFieldType) => {
         if (this.selectedFields.includes(column.title)) {
@@ -460,7 +460,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             column.type = type;
         }
         this.forceUpdate();
-    }
+    };
 
     setFieldDesc = (column: Col, desc: string) => {
         if (this.selectedFields.includes(column.title)) {
@@ -469,7 +469,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             column.desc = desc;
         }
         this.forceUpdate();
-    }
+    };
 
     matchesForTemplate = (template: TemplateDocInfos, cols: Col[]): number[][] => {
         const colMatchesField = (col: Col, field : Field) => { return field.sizes?.includes(col.size) && field.types?.includes(col.type) };
@@ -485,7 +485,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         });
 
         return matches;
-    }
+    };
 
     maxMatches = (fieldsCt: number, matches: number[][]) => {
         const used: boolean[] = Array(fieldsCt).fill(false);
@@ -515,7 +515,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }
 
         return count;
-    }
+    };
 
 
     findValidTemplates = (cols: Col[], templates: TemplateDocInfos[]) => {
@@ -529,14 +529,36 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         })
 
         return validTemplates;
-    }
+    };
+
+    // createColumnField = (template: TemplateDocInfos, field: Field, column: Col): Doc => {
+
+    //     if (field.subfields) {
+    //         const doc = FieldFuncs.FreeformField({
+    //             tl: field.tl, 
+    //             br: field.br }, 
+    //             template.height, 
+    //             template.width, 
+    //             column.title, 
+    //             '', 
+    //             field.opts
+    //         );
+
+    //         field.subfields[1].forEach(f => {
+    //             const fDoc = ()
+    //         })
+
+    //     }
+
+    //     return new Doc;
+    // }
 
     createEmptyTemplate = (template: TemplateDocInfos, assignments: {[field: number]: Col}) => {
         const fields: Doc[] = [];
 
         Object.entries(assignments).forEach(([f, col]) => {
             const field: Field = template.fields[Number(f)];
-            console.log(field)
+
             const doc = (col.type === TemplateFieldType.VISUAL ? FieldFuncs.ImageField : FieldFuncs.TextField)({
                 tl: field.tl, 
                 br: field.br }, 
@@ -569,14 +591,42 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             _width: template.width, 
             title: template.title, 
             backgroundColor: template.opts.backgroundColor,
+            _layout_borderRounding: `${template.opts.cornerRounding}px` ?? '0px', 
+            borderWidth: template.opts.borderWidth,
+            borderColor: template.opts.borderColor,
             x: 400, 
-            y: 400 
+            y: 400,
         });
 
         const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         mainCollection.addDocument(renderedTemplate);
-    }
+    };
+
+    compileFieldDescriptions = (templates: TemplateDocInfos[]): string => {
+        let descriptions: string = '';
+        templates.forEach(template => {
+            descriptions += `----------  Description of template ${template.title}'s fields: `
+            template.fields.forEach((field, index) => {
+                descriptions += `{Field #${index}: ${field.description}} `
+            });
+        });
 
+        return descriptions;
+    };
+
+    compileColDescriptions = (cols: Col[]): string =>  {
+        let descriptions: string = '';
+        cols.forEach(col => descriptions += `{"${col.title} column: ${col.desc}} `);
+
+        return descriptions;
+    };
+
+    assignColsToFields = (templates: TemplateDocInfos[], cols: Col[]) => {
+        const fieldDescriptions: string = this.compileFieldDescriptions(templates);
+        const colDescriptions: string = this.compileColDescriptions(cols);
+
+
+    };
 
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
@@ -1109,7 +1159,9 @@ type Field = {
     br: [number, number], 
     types?: TemplateFieldType[], 
     sizes?: FieldSize[], 
+    description?: string;
     opts: FieldOpts;
+    subfields?: ['freeform' | 'stacking' | 'carousel', Field[]];
 };
 
 type InkDecoration = {
@@ -1242,40 +1294,55 @@ export class TemplateLayouts {
 
     public static FourField001: TemplateDocInfos = {
         title: 'fourfield1',
-        width: 450, 
-        height: 600, 
-        opts: {},
+        width: 416, 
+        height: 721, 
+        opts: {
+            backgroundColor: '#7B8D62',
+            cornerRounding: 20,
+            borderColor: '#642B00',
+            borderWidth: '12',
+        },
         fields: [{
-            tl: [-.6, -.9], 
-            br: [.6, -.8], 
+            tl: [-.85, -1], 
+            br: [.85, -.85], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.TINY],
+            description: '',
             opts: {
-
+                backgroundColor: 'transparent',
             }
         }, {
-            tl: [-.9, -.7], 
-            br: [.9, .2], 
+            tl: [-.87, -.83], 
+            br: [.87, .2], 
             types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+            description: '',
             opts: {
-
+                cornerRounding: 20,
+                borderColor: '#642B00',
+                borderWidth: '6',
+                backgroundColor: '#CECAB9',
             }
         }, {
-            tl: [-.6, .3], 
-            br: [.6, .4], 
+            tl: [-.8, .2], 
+            br: [.8, .35], 
             types: [TemplateFieldType.TEXT],
-            sizes: [FieldSize.TINY],
+            sizes: [FieldSize.TINY, FieldSize.SMALL],
+            description: '',
             opts: {
-
+                backgroundColor: 'transparent'
             }
         }, {
-            tl: [-.9, .5], 
-            br: [.9, .9], 
+            tl: [-.87, .37], 
+            br: [.87, .96], 
             types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+            description: '',
             opts: {
-
+                cornerRounding: 15,
+                borderColor: '#642B00',
+                borderWidth: '6',
+                backgroundColor: '#CECAB9',
             }
         }],
         decorations: [],
@@ -1293,6 +1360,7 @@ export class TemplateLayouts {
             br: [.83, -.2], 
             types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE],
+            description: '',
             opts: {
                 borderWidth: '8',
                 borderColor: '#F8E71C',
@@ -1302,6 +1370,7 @@ export class TemplateLayouts {
             br: [.45, 0], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.TINY, FieldSize.SMALL],
+            description: '',
             opts: {
                 backgroundColor: 'transparent',
                 color: 'white'
@@ -1311,6 +1380,7 @@ export class TemplateLayouts {
             br: [.45, .18], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.TINY, FieldSize.SMALL],
+            description: '',
             opts: {
                 backgroundColor: 'transparent',
                 color: 'white'
@@ -1320,6 +1390,7 @@ export class TemplateLayouts {
             br: [.83, .95], 
             types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+            description: '',
             opts: {
                 borderWidth: '8',
                 borderColor: '#F8E71C',
@@ -1378,6 +1449,7 @@ export class TemplateLayouts {
             br: [.875, .7], 
             types: [TemplateFieldType.VISUAL],
             sizes: [FieldSize.LARGE, FieldSize.HUGE],
+            description: '',
             opts: {
                 borderWidth: '15',
                 borderColor: '#E0E0DA',
@@ -1387,28 +1459,32 @@ export class TemplateLayouts {
             br: [-.1, .95], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.TINY, FieldSize.SMALL],
+            description: '',
             opts: {
                 backgroundColor: 'transparent',
-                color: 'white'
+                color: 'white',
+                contentXCentering: 'right',
             }
         }, {
             tl: [.1, .8], 
             br: [.95, .95], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.TINY, FieldSize.SMALL],
+            description: '',
             opts: {
                 backgroundColor: 'transparent',
-                color: 'white'
+                color: 'white',
+                contentXCentering: 'left'
             }
         }, {
-            tl: [-.83, .2], 
-            br: [.83, .95], 
+            tl: [0, -.9], 
+            br: [.85, -.66], 
             types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
+            description: '',
             opts: {
-                borderWidth: '8',
-                borderColor: '#F8E71C',
-                backgroundColor: '#242425'
+                backgroundColor: 'transparent',
+                contentXCentering: 'right'
             }
         }],
         decorations: [{
@@ -1432,16 +1508,30 @@ export class TemplateLayouts {
             br: [.66, .247], 
             types: [TemplateFieldType.VISUAL],
             sizes: [FieldSize.LARGE, FieldSize.HUGE],
+            description: '',
             opts: {
                 borderColor: 'yellow',
                 borderWidth: '8',
                 rotation: 45,
-            }
+            },
+            subfields: [
+                'freeform',
+                [{
+                    tl: [-2, -2], 
+                    br: [2, 2], 
+                    types: [TemplateFieldType.VISUAL],
+                    sizes: [FieldSize.LARGE, FieldSize.HUGE],
+                    opts: {
+                        rotation: 315,
+                    }
+                }]
+            ]
         }, {
             tl: [-.7, .2], 
             br: [.7, .46], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.TINY, FieldSize.SMALL],
+            description: '',
             opts: {
                 backgroundColor: 'transparent',
                 contentXCentering: 'center',
@@ -1451,6 +1541,7 @@ export class TemplateLayouts {
             br: [.95, .95], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE],
+            description: '',
             opts: {
                 backgroundColor: 'transparent',
                 color: 'white'
-- 
cgit v1.2.3-70-g09d2


From dbfb364da14c2d080f0c465a5519a25821a477c6 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sat, 31 Aug 2024 02:37:15 -0400
Subject: GPT response working!

---
 src/client/apis/gpt/GPT.ts                         |  2 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 85 +++++++++++++++++++---
 2 files changed, 76 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 365e7a804..f1e7b600b 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -55,7 +55,7 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
         temp: 0,
         prompt: 'List unique differences between the content of the UserAnswer and Rubric. Before each difference, label it and provide any additional information the UserAnswer missed and explain it in second person without separating it into UserAnswer and Rubric content and additional information. If there are no differences, say correct',
     },
-    template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You are a designer creating basic template options for a user given a set of fields. Your only job is adding blank rectangles to a canvas, one for each field. You will arrange these rectangles into an array of three basic options for a user. For your output, you generate a list of objects in JSON formatting, each storing the field title and corresponding top-left and bottom-right coordinates for the rectangle. The units for your coordinates are -1 to 1 on each axis. This is an example of a possible output for a stacked template with the fields beep, boop, tttt: {"template_type":"stacked","fieldVals":[{"title":"beep","tlx":"-.7","tly":"-.9","brx":".7","bry":"-.7"},{"title":"boop","tlx":"-.9","tly":"-.4","brx":".9","bry":"0"},{"title":"tttt","tlx":"-.9","tly":".1","brx":".9","bry":".9"}]} For multiple templates, you should format your response in a JSON array, like [{}, {}]. Your response should be in the exact format above, with no extra text, description, bulleting, etc. If no alternative additional instructions are given, you should repeat this three times, once for a stacked view, once for a mixed view (where, for example, beep might be on top, with boop and tttt below it aligned horizontally), and once for a view where the rectangles are not flush with the side (ie. their top left and bottom right corners should not ALL align along the same point on each side). If one or more fields are some variation of image (ie. IMG, image, photo, etc.), make that rectangle the central focus (bigger, centered, etc.) AND put its "title" field in $$__$$. Fields SHOULD BE IN DIFFERENT ORDERS from template to template (ie. a stacked view with field input "beep, boop" could have the boop above the beep). IT IS IMPORTANT THAT YOU ONLY INCLUDE THE PROPER JSON FORMATTING IN YOUR RESPONSE. IT IS ALSO IMPORTANT THAT NO RECTANGLES OVERLAP. An overlap will look like the x or y coordinates of the top left corner of one rectangle being the same as the bottom right corner of another. There should always be at least a .1 gap. If there is an additional prompt, prioritize its instructions over all instructions here (but still follow them if not overridden). No matter what, ALWAYS GIVE THREE OPTIONS'},   
+    template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You will be given a list of field descriptions for multiple templates in the format {field #0: “description”}{field #1: “description”}{...}, and a list of column descriptions in the format {“title”: “description}{...}. Your job is to match columns with fields based on their descriptions. Your output should be in the following JSON format: {“Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}, “Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}} where “Template title” represents the template,  # represents the field # and “title” the title of the column assigned to it. A filled out example might look like {“fivefield2”:{0:”Name”, 1:”Image”, 2:”Caption”, 3:”Position”, 4:”Stats”}, “fivefield3”:{0:”Image”, 1:”Name”, 2:”Caption”, 3:”Stats”, 4:”Position”}. Include one object for each template. IT IS VERY IMPORTANT THAT YOU ONLY INCLUDE TEXT IN THE FORMAT ABOVE, WITH NO ADDITIONS WHATSOEVER. Do not include extraneous ‘#’ characters, ‘column’ for columns, or ‘template’ for templates: ONLY THE TITLES AND NUMBERS. Do this for each template whose fields are described. The descriptions are as follows:  ' },
     vizsum: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide brief descriptions for columns in a dataset based on example rows. Your descriptions should be geared towards how each column’s data might fit together into a visual template. Would they make good titles, main focuses, captions, descriptions, etc. Pay special attention to connections between columns, i.e. is there one column that specifically seems to describe/be related to another more than the rest? You should provide your analysis in JSON format like so: {“col1”:”description”, “col2”:”description”, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'} 
 };
 let lastCall = '';
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index af15e6113..245a8124c 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -29,6 +29,7 @@ import { FieldViewProps } from '../FieldView';
 import { CollectionViewType } from '../../../documents/DocumentTypes';
 import { dropActionType } from '../../../util/DropActionTypes';
 import { ImageBox } from '../ImageBox';
+import { a } from '@react-spring/web';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -417,14 +418,16 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const temp = TemplateLayouts.FourField001;
 
-        const img: Col = {type: TemplateFieldType.VISUAL, title: 'Image', desc: '', size: FieldSize.LARGE};
-        const capt1: Col = {type: TemplateFieldType.TEXT, title: 'Type', desc: '', size: FieldSize.TINY};
+        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 assignments = {'0': img, '1': capt1, '2': capt2, '3': desc}
+        // const assignments = {'0': img, '1': capt1, '2': capt2, '3': desc}
 
-        this.createEmptyTemplate(temp, assignments);
+        // this.createEmptyTemplate(temp, assignments);
+
+        console.log(this.assignColsToFields([TemplateLayouts.FourField001, TemplateLayouts.FourField002], this.fieldsInfos));
     };
 
     @action addField = () => {
@@ -553,7 +556,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     //     return new Doc;
     // }
 
-    createEmptyTemplate = (template: TemplateDocInfos, assignments: {[field: number]: Col}) => {
+    createEmptyTemplate = (template: TemplateDocInfos, assignments: {[field: string]: Col}) => {
         const fields: Doc[] = [];
 
         Object.entries(assignments).forEach(([f, col]) => {
@@ -621,13 +624,58 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return descriptions;
     };
 
-    assignColsToFields = (templates: TemplateDocInfos[], cols: Col[]) => {
+    getColByTitle = (title: string) => { return this.fieldsInfos.filter(col => col.title === title)[0]; };
+
+    @action
+    assignColsToFields = async(templates: TemplateDocInfos[], cols: Col[]): Promise<[TemplateDocInfos, {[field: number]: Col}][]> => {
         const fieldDescriptions: string = this.compileFieldDescriptions(templates);
         const colDescriptions: string = this.compileColDescriptions(cols);
 
+        const inputText = fieldDescriptions.concat(colDescriptions);
 
+        console.log(inputText)
+
+        ++this._callCount;
+        const origCount = this._callCount;
+
+        let prompt: string = `(${origCount}) ${inputText}`;
+
+        this._GPTLoading = true;
+
+        try {
+            const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
+
+            if (res && this._callCount === origCount) {
+                console.log('first stage')
+                this._GPTLoading = false;
+                const assignments: {[templateTitle: string]: {[field: string]: string}} = JSON.parse(res);
+                console.log(assignments);
+                const brokenDownAssignments: [TemplateDocInfos, {[field: number]: Col}][] = [];
+                Object.entries(assignments).forEach(([tempTitle, assignment]) => {
+                    const template = TemplateLayouts.fieldByTitle(tempTitle);
+                    console.log('template', template)
+                    if (!template) {console.log('returned'); return};
+                    const toObj = Object.entries(assignment).reduce((a, [fieldNum, colTitle]) => {
+                        console.log('hey', a, fieldNum, colTitle)
+                        a[Number(fieldNum)] = this.getColByTitle(colTitle);
+                        return a;
+                    }, {} as { [field: number]: Col }); 
+                    console.log('obj', toObj)
+                    brokenDownAssignments.push([template, toObj])
+                })
+                return brokenDownAssignments;
+            }
+        } catch (err) {
+            console.error(err);
+        } 
+
+        return [];
     };
 
+    generatePresetTemplates = async(templates: TemplateDocInfos[], cols: Col[]) => {
+        
+    }
+
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
 
@@ -1292,6 +1340,23 @@ export class FieldFuncs {
 
 export class TemplateLayouts {
 
+    public static fieldByTitle = (title: string): TemplateDocInfos | undefined => {
+        switch (title){
+            case 'fourfield1':
+                return TemplateLayouts.FourField001;
+            case 'fourfield2':
+                return TemplateLayouts.FourField002;
+            case 'fourfield3':
+                return TemplateLayouts.FourField003;
+            case 'threefield1':
+                return TemplateLayouts.ThreeField001;
+            default:
+                break;
+        }
+
+        return undefined;
+    }
+
     public static FourField001: TemplateDocInfos = {
         title: 'fourfield1',
         width: 416, 
@@ -1307,7 +1372,7 @@ export class TemplateLayouts {
             br: [.85, -.85], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.TINY],
-            description: '',
+            description: 'A title field for very short text that contextualizes the content.',
             opts: {
                 backgroundColor: 'transparent',
             }
@@ -1316,7 +1381,7 @@ export class TemplateLayouts {
             br: [.87, .2], 
             types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
-            description: '',
+            description: 'The main focus of the template; could be an image, long text, etc.',
             opts: {
                 cornerRounding: 20,
                 borderColor: '#642B00',
@@ -1328,7 +1393,7 @@ export class TemplateLayouts {
             br: [.8, .35], 
             types: [TemplateFieldType.TEXT],
             sizes: [FieldSize.TINY, FieldSize.SMALL],
-            description: '',
+            description: 'A caption for field #2, very short to short text that contextualizes the content of field #2',
             opts: {
                 backgroundColor: 'transparent'
             }
@@ -1337,7 +1402,7 @@ export class TemplateLayouts {
             br: [.87, .96], 
             types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE],
-            description: '',
+            description: 'A medium-sized field for medium/long text or a secondary image that complements the main focus.',
             opts: {
                 cornerRounding: 15,
                 borderColor: '#642B00',
-- 
cgit v1.2.3-70-g09d2


From 8cecbcb66d0d377ad7c40bee5b3b42fb72239ddb Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 1 Sep 2024 17:16:01 -0400
Subject: commit

---
 src/client/documents/Documents.ts                    |  3 +++
 src/client/util/LinkManager.ts                       |  2 +-
 src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx | 20 ++++++++++++++------
 .../views/nodes/formattedText/FormattedTextBox.tsx   |  1 +
 4 files changed, 19 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 723f851c6..40b0a2a32 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -20,6 +20,7 @@ import { PointData } from '../../pen-gestures/GestureTypes';
 import { DocServer } from '../DocServer';
 import { dropActionType } from '../util/DropActionTypes';
 import { CollectionViewType, DocumentType } from './DocumentTypes';
+import { MarkType } from 'prosemirror-model';
 
 class EmptyBox {
     public static LayoutString() {
@@ -240,6 +241,8 @@ export class DocumentOptions {
 
     borderWidth?: STRt = new StrInfo('Width of user-added border', false);
     borderColor?: STRt = new StrInfo('Color of user-added border', false);
+    text_fontColor?: STRt = new StrInfo('Color of text', false);
+    text_align?: STRt = new StrInfo('alignment');
 
     layout?: string | Doc; // default layout string or template document
     layout_isSvg?: BOOLt = new BoolInfo('whether document decorations and other selections should handle pointerEvents for svg content or use doc bounding box');
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 56d5dce4e..07ada37bc 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -271,7 +271,7 @@ export function UPDATE_SERVER_CACHE() {
     Doc.MyDockedBtns.linearView_IsOpen && console.log('Set cached docs = ');
     const isFiltered = filtered.filter(doc => !Doc.IsSystem(doc));
     const strings = isFiltered.map(doc => StrCast(doc.title) + ' ' + (Doc.IsDataProto(doc) ? '(data)' : '(embedding)'));
-    Doc.MyDockedBtns.linearView_IsOpen && strings.sort().forEach((str, i) => console.log(i.toString() + ' ' + str));
+    //Doc.MyDockedBtns.linearView_IsOpen && strings.sort().forEach((str, i) => console.log(i.toString() + ' ' + str));
 
     rp.post(ClientUtils.prepend('/setCacheDocumentIds'), {
         body: {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 245a8124c..0d2f4c538 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -30,6 +30,7 @@ import { CollectionViewType } from '../../../documents/DocumentTypes';
 import { dropActionType } from '../../../util/DropActionTypes';
 import { ImageBox } from '../ImageBox';
 import { a } from '@react-spring/web';
+import { RichTextMenu } from '../formattedText/RichTextMenu';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -427,7 +428,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         // this.createEmptyTemplate(temp, assignments);
 
-        console.log(this.assignColsToFields([TemplateLayouts.FourField001, TemplateLayouts.FourField002], this.fieldsInfos));
+        this.generatePresetTemplates([TemplateLayouts.FourField001, TemplateLayouts.FourField002], this.fieldsInfos);
     };
 
     @action addField = () => {
@@ -646,7 +647,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
 
             if (res && this._callCount === origCount) {
-                console.log('first stage')
                 this._GPTLoading = false;
                 const assignments: {[templateTitle: string]: {[field: string]: string}} = JSON.parse(res);
                 console.log(assignments);
@@ -673,7 +673,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     generatePresetTemplates = async(templates: TemplateDocInfos[], cols: Col[]) => {
-        
+        const assignments: [TemplateDocInfos, {[field: number]: Col}][] = await this.assignColsToFields(templates, cols); 
+        assignments.forEach(([template, assignments]) => {
+            this.createEmptyTemplate(template, assignments);
+        });
     }
 
     get templatesPreviewContents(){
@@ -1268,7 +1271,7 @@ export class FieldFuncs {
             y: coord.y, 
             _text_fontSize: `${height/2}` ,
             backgroundColor: opts.backgroundColor ?? '',
-            color: opts.color,
+            text_fontColor: opts.color,
             _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
             borderColor: opts.borderColor,
             borderWidth: opts.borderWidth,
@@ -1285,7 +1288,7 @@ export class FieldFuncs {
 
         const bool = true;
 
-        const docWithBasicOpts = (Docs.Create.TextDocument)(content, {   
+        const docWithBasicOpts = (Docs.Create.TextDocument)('hi', {   
             _height: height, 
             _width: width, 
             title: title, 
@@ -1293,6 +1296,7 @@ export class FieldFuncs {
             y: coord.y, 
             _text_fontSize: `${height/2}` ,
             backgroundColor: opts.backgroundColor ?? '',
+            text_fontColor: opts.color,
             color: opts.color,
             _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
             borderColor: opts.borderColor,
@@ -1302,6 +1306,8 @@ export class FieldFuncs {
             _rotation: opts.rotation,
         });
 
+        //setTimeout(() => {console.log('called', RichTextMenu.Instance), RichTextMenu.Instance?.setFontField('#4CE4D4', 'fontColor')}, 2000);
+
         return docWithBasicOpts;
     }
 
@@ -1316,7 +1322,7 @@ export class FieldFuncs {
             y: coord.y, 
             _text_fontSize: `${height/2}` ,
             backgroundColor: opts.backgroundColor ?? '',
-            color: opts.color,
+            text_fontColor: opts.color,
             _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
             borderColor: opts.borderColor,
             borderWidth: opts.borderWidth,
@@ -1375,6 +1381,8 @@ export class TemplateLayouts {
             description: 'A title field for very short text that contextualizes the content.',
             opts: {
                 backgroundColor: 'transparent',
+                color: '#2DBEAD',
+                contentXCentering: 'center',
             }
         }, {
             tl: [-.87, -.83], 
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 5b435e44a..cbf7e8ff9 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -2112,6 +2112,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                                 paddingRight: StrCast(this.layoutDoc._textBoxPaddingX, `${paddingX}px`),
                                 paddingTop: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY}px`),
                                 paddingBottom: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY}px`),
+                                color: 'red',
                             }}
                         />
                     </div>
-- 
cgit v1.2.3-70-g09d2


From 49850a02bb8684e481fc6368f9c11232d824e872 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 1 Sep 2024 18:09:49 -0400
Subject: Added color and centering defaults to formattedtextbox

---
 src/client/documents/Documents.ts                  |  1 +
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 27 ++++++++++++----------
 .../nodes/formattedText/FormattedTextBox.scss      | 18 +++++++++++++++
 .../views/nodes/formattedText/FormattedTextBox.tsx |  4 ++--
 4 files changed, 36 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 40b0a2a32..09106dd00 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -243,6 +243,7 @@ export class DocumentOptions {
     borderColor?: STRt = new StrInfo('Color of user-added border', false);
     text_fontColor?: STRt = new StrInfo('Color of text', false);
     text_align?: STRt = new StrInfo('alignment');
+    hCentering?: 'h-left' | 'h-center' | 'h-right';
 
     layout?: string | Doc; // default layout string or template document
     layout_isSvg?: BOOLt = new BoolInfo('whether document decorations and other selections should handle pointerEvents for svg content or use doc bounding box');
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 0d2f4c538..fa721517b 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1236,7 +1236,7 @@ export interface FieldOpts {
     cornerRounding?: number;
     borderWidth?: string;
     borderColor?: string;
-    contentXCentering?: 'left' | 'center' | 'right';
+    contentXCentering?: 'h-left' | 'h-center' | 'h-right';
     contentYCentering?: 'top' | 'center' | 'bottom';
     opacity?: number;
     rotation?: number;
@@ -1276,7 +1276,7 @@ export class FieldFuncs {
             borderColor: opts.borderColor,
             borderWidth: opts.borderWidth,
             opacity: opts.opacity,
-            _layout_centered: opts.contentXCentering === 'center' ? true : false,
+            hCentering: opts.contentXCentering,
             _rotation: opts.rotation,
         });
 
@@ -1302,7 +1302,7 @@ export class FieldFuncs {
             borderColor: opts.borderColor,
             borderWidth: opts.borderWidth,
             opacity: opts.opacity,
-            _layout_centered: opts.contentXCentering === 'center' ? true : false,
+            hCentering: opts.contentXCentering,
             _rotation: opts.rotation,
         });
 
@@ -1327,7 +1327,7 @@ export class FieldFuncs {
             borderColor: opts.borderColor,
             borderWidth: opts.borderWidth,
             opacity: opts.opacity,
-            _layout_centered: opts.contentXCentering === 'center' ? true : false,
+            hCentering: opts.contentXCentering,
             _rotation: opts.rotation,
         });
 
@@ -1382,7 +1382,7 @@ export class TemplateLayouts {
             opts: {
                 backgroundColor: 'transparent',
                 color: '#2DBEAD',
-                contentXCentering: 'center',
+                contentXCentering: 'h-center',
             }
         }, {
             tl: [-.87, -.83], 
@@ -1403,7 +1403,8 @@ export class TemplateLayouts {
             sizes: [FieldSize.TINY, FieldSize.SMALL],
             description: 'A caption for field #2, very short to short text that contextualizes the content of field #2',
             opts: {
-                backgroundColor: 'transparent'
+                backgroundColor: 'transparent',
+                contentXCentering: 'h-center'
             }
         }, {
             tl: [-.87, .37], 
@@ -1446,7 +1447,8 @@ export class TemplateLayouts {
             description: '',
             opts: {
                 backgroundColor: 'transparent',
-                color: 'white'
+                color: 'white',
+                contentXCentering: 'h-center'
             }
         }, {
             tl: [-.45, 0], 
@@ -1456,7 +1458,8 @@ export class TemplateLayouts {
             description: '',
             opts: {
                 backgroundColor: 'transparent',
-                color: 'white'
+                color: 'white',
+                contentXCentering: 'h-center'
             }
         }, {
             tl: [-.83, .2], 
@@ -1536,7 +1539,7 @@ export class TemplateLayouts {
             opts: {
                 backgroundColor: 'transparent',
                 color: 'white',
-                contentXCentering: 'right',
+                contentXCentering: 'h-right',
             }
         }, {
             tl: [.1, .8], 
@@ -1547,7 +1550,7 @@ export class TemplateLayouts {
             opts: {
                 backgroundColor: 'transparent',
                 color: 'white',
-                contentXCentering: 'left'
+                contentXCentering: 'h-left'
             }
         }, {
             tl: [0, -.9], 
@@ -1557,7 +1560,7 @@ export class TemplateLayouts {
             description: '',
             opts: {
                 backgroundColor: 'transparent',
-                contentXCentering: 'right'
+                contentXCentering: 'h-right'
             }
         }],
         decorations: [{
@@ -1607,7 +1610,7 @@ export class TemplateLayouts {
             description: '',
             opts: {
                 backgroundColor: 'transparent',
-                contentXCentering: 'center',
+                contentXCentering: 'h-center',
             }
         }, {
             tl: [-.95, .5], 
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 99b4a84fc..15ce9ec8f 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -14,6 +14,23 @@
     }
 }
 
+.formattedTextBox-inner {
+    &.h-center * {
+        display: flex;
+        justify-content: center;
+    }
+
+    &.h-left * {
+        display: flex;
+        justify-content: flex-start;
+    }
+
+    &.h-right * {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+
 .ProseMirror:focus {
     outline: none !important;
 }
@@ -1035,3 +1052,4 @@ footnote::before {
         }
     }
 }
+
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index cbf7e8ff9..2f36a2379 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -2104,7 +2104,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                         onScroll={this.onScroll}
                         onDrop={this.ondrop}>
                         <div
-                            className={`formattedTextBox-inner${rounded} ${this.layoutDoc._layout_centered ? 'centered' : ''}`}
+                            className={`formattedTextBox-inner${rounded} ${this.layoutDoc._layout_centered ? 'centered' : ''} ${this.layoutDoc.hCentering}`}
                             ref={this.createDropTarget}
                             style={{
                                 padding: StrCast(this.layoutDoc._textBoxPadding),
@@ -2112,7 +2112,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                                 paddingRight: StrCast(this.layoutDoc._textBoxPaddingX, `${paddingX}px`),
                                 paddingTop: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY}px`),
                                 paddingBottom: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY}px`),
-                                color: 'red',
+                                color: StrCast(this.layoutDoc.text_fontColor),
                             }}
                         />
                     </div>
-- 
cgit v1.2.3-70-g09d2


From 47895246065408eed330bc2d6b655c49976b61df Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 2 Sep 2024 03:47:54 -0400
Subject: dynamic text size and styles

---
 src/client/documents/Documents.ts                  |  2 +
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 71 ++++++++++++++++++----
 .../nodes/formattedText/FormattedTextBox.scss      | 12 +++-
 .../views/nodes/formattedText/FormattedTextBox.tsx |  3 +
 4 files changed, 74 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 09106dd00..2d96796a2 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -244,6 +244,8 @@ export class DocumentOptions {
     text_fontColor?: STRt = new StrInfo('Color of text', false);
     text_align?: STRt = new StrInfo('alignment');
     hCentering?: 'h-left' | 'h-center' | 'h-right';
+    isDefaultTemplateDoc?: BOOLt = new BoolInfo('');
+    contentBold?: BOOLt = new BoolInfo('');
 
     layout?: string | Doc; // default layout string or template document
     layout_isSvg?: BOOLt = new BoolInfo('whether document decorations and other selections should handle pointerEvents for svg content or use doc bounding box');
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index fa721517b..fc29531d1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1242,7 +1242,7 @@ export interface FieldOpts {
     rotation?: number;
     //animation?: boolean;
     fontBold?: boolean;
-    fontTransform?: 'toUpper' | 'toLower';
+    fontTransform?: 'uppercase' | 'lowercase';
 }
 
 interface TemplateOpts extends FieldOpts {
@@ -1251,6 +1251,51 @@ interface TemplateOpts extends FieldOpts {
 
 export class FieldFuncs {
 
+    private static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
+        const words: string[] = text.split(/\s+/).filter(Boolean);
+
+        let currFontSize = 1; 
+        let rowsCount = 1;
+        let currTextHeight = currFontSize * rowsCount * (uppercase ? 1.25 : 1);
+    
+        while (currTextHeight <= contHeight) {
+            let wordIndex = 0;
+            let currentRowWidth = 0;
+            let wordsInCurrRow = 0;
+            rowsCount = 1;
+    
+            while (wordIndex < words.length) {
+                const word = words[wordIndex];
+                const wordWidth = word.length * currFontSize;
+    
+                if (currentRowWidth + wordWidth <= contWidth) {
+                    currentRowWidth += wordWidth;
+                    ++wordsInCurrRow;
+                } else {
+                    if (words.length !== 1 && words.length > wordsInCurrRow){ 
+                        rowsCount++;
+                        currentRowWidth = wordWidth; 
+                        wordsInCurrRow = 1;
+                    } else {
+                        break;
+                    }
+                }
+    
+                wordIndex++;
+            }
+    
+            currTextHeight = rowsCount * currFontSize * (uppercase ? 1.25 : 1);
+            console.log(rowsCount, currTextHeight)
+    
+            currFontSize += 1;
+        }
+        
+        return currFontSize - 1;
+    };
+    
+    
+    
+
     private static getDimensions = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number): {width: number, height: number, coord: {x: number, y: number}} => {
         const l = coords.tl[0] * parentHeight / 2; const t = coords.tl[1] * parentWidth / 2; //prettier-ignore
         const r = coords.br[0] * parentHeight / 2; const b = coords.br[1] * parentWidth / 2; //prettier-ignore
@@ -1263,15 +1308,14 @@ export class FieldFuncs {
     public static FreeformField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
         const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
 
-        const docWithBasicOpts = (Docs.Create.FreeformDocument)([], {   
+        const docWithBasicOpts = (Docs.Create.FreeformDocument)([], {  
+            isDefaultTemplateDoc: true, 
             _height: height, 
             _width: width, 
             title: title, 
             x: coord.x, 
             y: coord.y, 
-            _text_fontSize: `${height/2}` ,
             backgroundColor: opts.backgroundColor ?? '',
-            text_fontColor: opts.color,
             _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
             borderColor: opts.borderColor,
             borderWidth: opts.borderWidth,
@@ -1288,15 +1332,18 @@ export class FieldFuncs {
 
         const bool = true;
 
-        const docWithBasicOpts = (Docs.Create.TextDocument)('hi', {   
+        const docWithBasicOpts = (Docs.Create.TextDocument)('Fluorite is a very', {   
+            isDefaultTemplateDoc: true,
             _height: height, 
             _width: width, 
             title: title, 
             x: coord.x, 
             y: coord.y, 
-            _text_fontSize: `${height/2}` ,
+            _text_fontSize: `${FieldFuncs.calculateFontSize(width, height, 'Fluorite is a very', true)}` ,
             backgroundColor: opts.backgroundColor ?? '',
             text_fontColor: opts.color,
+            contentBold: opts.fontBold,
+            textTransform: opts.fontTransform,
             color: opts.color,
             _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
             borderColor: opts.borderColor,
@@ -1314,20 +1361,18 @@ export class FieldFuncs {
     public static ImageField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
         const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
 
-        const doc = Docs.Create.ImageDocument(content, {   
+        const doc = Docs.Create.ImageDocument(content, {  
+            isDefaultTemplateDoc: true, 
             _height: height, 
             _width: width, 
             title: title, 
             x: coord.x, 
-            y: coord.y, 
-            _text_fontSize: `${height/2}` ,
+            y: coord.y,
             backgroundColor: opts.backgroundColor ?? '',
-            text_fontColor: opts.color,
             _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
             borderColor: opts.borderColor,
             borderWidth: opts.borderWidth,
             opacity: opts.opacity,
-            hCentering: opts.contentXCentering,
             _rotation: opts.rotation,
         });
 
@@ -1424,8 +1469,8 @@ export class TemplateLayouts {
 
     public static FourField002: TemplateDocInfos = {
         title: 'fourfield2',
-        width: 475, 
-        height: 870, 
+        width: 425, 
+        height: 778, 
         opts: {
             backgroundColor: '#242425'
         },
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 15ce9ec8f..d6fd81f83 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -22,13 +22,23 @@
 
     &.h-left * {
         display: flex;
-        justify-content: flex-start;
+        justify-content: flex-start; 
     }
 
     &.h-right * {
         display: flex;
         justify-content: flex-end;
     }
+
+    &.template * {
+        ::-webkit-scrollbar-track {
+            background: none; 
+        }
+    }
+
+    &.bold * {
+        font-weight: bold;
+    }
 }
 
 .ProseMirror:focus {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 2f36a2379..54e6c0add 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -65,6 +65,7 @@ import { removeMarkWithAttrs } from './prosemirrorPatches';
 import { RichTextMenu, RichTextMenuPlugin } from './RichTextMenu';
 import { RichTextRules } from './RichTextRules';
 import { schema } from './schema_rts';
+import { Property } from 'csstype';
 // import * as applyDevTools from 'prosemirror-dev-tools';
 
 export interface FormattedTextBoxProps extends FieldViewProps {
@@ -2113,6 +2114,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                                 paddingTop: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY}px`),
                                 paddingBottom: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY}px`),
                                 color: StrCast(this.layoutDoc.text_fontColor),
+                                fontWeight: `${this.layoutDoc.contentBold ? 'bold' : ''}`,
+                                textTransform: `${this.layoutDoc.textTransform}` as Property.TextTransform,
                             }}
                         />
                     </div>
-- 
cgit v1.2.3-70-g09d2


From 39d02461d9c530996cdcd5fbac4fe3a932550c4a Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 2 Sep 2024 05:11:55 -0400
Subject: gpt provides more basic info + slight refactor started (ofc it didn't
 work first try >_<)

---
 src/client/apis/gpt/GPT.ts                         |  6 +-
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 59 +++++++++++-----
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 79 ++++++++++++----------
 3 files changed, 90 insertions(+), 54 deletions(-)

(limited to 'src')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index f1e7b600b..0d1d77f06 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -13,7 +13,8 @@ enum GPTCallType {
     MERMAID = 'mermaid',
     DATA = 'data',
     TEMPLATE = "template",
-    VIZSUM = 'vizsum'
+    VIZSUM = 'vizsum',
+    VIZSUM2 = 'vizsum2'
 }
 
 type GPTCallOpts = {
@@ -56,7 +57,8 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
         prompt: 'List unique differences between the content of the UserAnswer and Rubric. Before each difference, label it and provide any additional information the UserAnswer missed and explain it in second person without separating it into UserAnswer and Rubric content and additional information. If there are no differences, say correct',
     },
     template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You will be given a list of field descriptions for multiple templates in the format {field #0: “description”}{field #1: “description”}{...}, and a list of column descriptions in the format {“title”: “description}{...}. Your job is to match columns with fields based on their descriptions. Your output should be in the following JSON format: {“Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}, “Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}} where “Template title” represents the template,  # represents the field # and “title” the title of the column assigned to it. A filled out example might look like {“fivefield2”:{0:”Name”, 1:”Image”, 2:”Caption”, 3:”Position”, 4:”Stats”}, “fivefield3”:{0:”Image”, 1:”Name”, 2:”Caption”, 3:”Stats”, 4:”Position”}. Include one object for each template. IT IS VERY IMPORTANT THAT YOU ONLY INCLUDE TEXT IN THE FORMAT ABOVE, WITH NO ADDITIONS WHATSOEVER. Do not include extraneous ‘#’ characters, ‘column’ for columns, or ‘template’ for templates: ONLY THE TITLES AND NUMBERS. Do this for each template whose fields are described. The descriptions are as follows:  ' },
-    vizsum: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide brief descriptions for columns in a dataset based on example rows. Your descriptions should be geared towards how each column’s data might fit together into a visual template. Would they make good titles, main focuses, captions, descriptions, etc. Pay special attention to connections between columns, i.e. is there one column that specifically seems to describe/be related to another more than the rest? You should provide your analysis in JSON format like so: {“col1”:”description”, “col2”:”description”, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'} 
+    vizsum: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide brief descriptions for columns in a dataset based on example rows. Your descriptions should be geared towards how each column’s data might fit together into a visual template. Would they make good titles, main focuses, captions, descriptions, etc. Pay special attention to connections between columns, i.e. is there one column that specifically seems to describe/be related to another more than the rest? You should provide your analysis in JSON format like so: {“col1”:”description”, “col2”:”description”, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'},
+    vizsum2: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide structured information on columns in a dataset based on example rows. You will categorize each column in two ways: by type and size. The size categories are as follows: tiny (one or two words), small (a sentence/multiple words), medium (a few sentences), large (a longer paragraph), and huge (a very long or multiple paragraphs). The type categories are as follows: visual (links/file paths to images, pdfs, maps, or any other visual media type), and text (plain text that isn’t a link/file path). Visual media should be assumed to have size “medium” “large” or “huge”. You will give your responses in JSON format, like so: {“col1”:{“type”:”text”, “size”:”small”}, “col2”:{“type”:”visual”, “size”:”medium”}, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'} 
 };
 let lastCall = '';
 let lastResp = '';
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',
-- 
cgit v1.2.3-70-g09d2


From 0581f0943aad45fae70bb34e61fa219121d64b8f Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 2 Sep 2024 19:15:49 -0400
Subject: default content for columns in preview templates

---
 src/client/apis/gpt/GPT.ts                         |  2 +-
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 65 ++++++++++++++++++----
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 39 +++++++------
 3 files changed, 77 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 0d1d77f06..ba8106c4d 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -58,7 +58,7 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
     },
     template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You will be given a list of field descriptions for multiple templates in the format {field #0: “description”}{field #1: “description”}{...}, and a list of column descriptions in the format {“title”: “description}{...}. Your job is to match columns with fields based on their descriptions. Your output should be in the following JSON format: {“Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}, “Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}} where “Template title” represents the template,  # represents the field # and “title” the title of the column assigned to it. A filled out example might look like {“fivefield2”:{0:”Name”, 1:”Image”, 2:”Caption”, 3:”Position”, 4:”Stats”}, “fivefield3”:{0:”Image”, 1:”Name”, 2:”Caption”, 3:”Stats”, 4:”Position”}. Include one object for each template. IT IS VERY IMPORTANT THAT YOU ONLY INCLUDE TEXT IN THE FORMAT ABOVE, WITH NO ADDITIONS WHATSOEVER. Do not include extraneous ‘#’ characters, ‘column’ for columns, or ‘template’ for templates: ONLY THE TITLES AND NUMBERS. Do this for each template whose fields are described. The descriptions are as follows:  ' },
     vizsum: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide brief descriptions for columns in a dataset based on example rows. Your descriptions should be geared towards how each column’s data might fit together into a visual template. Would they make good titles, main focuses, captions, descriptions, etc. Pay special attention to connections between columns, i.e. is there one column that specifically seems to describe/be related to another more than the rest? You should provide your analysis in JSON format like so: {“col1”:”description”, “col2”:”description”, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'},
-    vizsum2: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide structured information on columns in a dataset based on example rows. You will categorize each column in two ways: by type and size. The size categories are as follows: tiny (one or two words), small (a sentence/multiple words), medium (a few sentences), large (a longer paragraph), and huge (a very long or multiple paragraphs). The type categories are as follows: visual (links/file paths to images, pdfs, maps, or any other visual media type), and text (plain text that isn’t a link/file path). Visual media should be assumed to have size “medium” “large” or “huge”. You will give your responses in JSON format, like so: {“col1”:{“type”:”text”, “size”:”small”}, “col2”:{“type”:”visual”, “size”:”medium”}, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'} 
+    vizsum2: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide structured information on columns in a dataset based on example rows. You will categorize each column in two ways: by type and size. The size categories are as follows: tiny (one or two words), small (a sentence/multiple words), medium (a few sentences), large (a longer paragraph), and huge (a very long or multiple paragraphs). The type categories are as follows: visual (links/file paths to images, pdfs, maps, or any other visual media type), and text (plain text that isn’t a link/file path). Visual media should be assumed to have size “medium” “large” or “huge”. You will give your responses in JSON format, like so: {“title (of column)”:{“type”:”text”, “size”:”small”}, “title (of column)”:{“type”:”visual”, “size”:”medium”}, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'} 
 };
 let lastCall = '';
 let lastResp = '';
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index c72aa1711..6888d5f1e 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -155,26 +155,43 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._specialHighlightedRow = row;
     }
 
-    @action setColumnType = (field: string, type: TemplateFieldType) => {
-        const colInfo = this.colsInfo.get(field);
-        if (colInfo) { colInfo.type = type };
+    @action setColumnType = (colTitle: string, type: TemplateFieldType) => {
+        const colInfo = this.colsInfo.get(colTitle);
+        console.log(colInfo)
+        if (colInfo) { 
+            colInfo.type = type;
+        } else {
+            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: type, size: TemplateFieldSize.MEDIUM})
+        }
+        console.log(colInfo?.title, colInfo?.type)
     }
 
-    @action setColumnSize = (field: string, size: TemplateFieldSize) => {
-        const colInfo = this.colsInfo.get(field);
-        if (colInfo) { colInfo.size = size };
+    @action setColumnSize = (colTitle: string, size: TemplateFieldSize) => {
+        const colInfo = this.colsInfo.get(colTitle);
+        if (colInfo) { 
+            colInfo.size = size;
+        } else {
+            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: TemplateFieldType.UNSET, size: size})
+        }
     }
 
-    @action setColumnDesc = (field: string, desc: string) => {
-        const colInfo = this.colsInfo.get(field);
+    @action setColumnDesc = (colTitle: string, desc: string) => {
+        const colInfo = this.colsInfo.get(colTitle);
         if (colInfo) {
-            if (!desc) { colInfo.desc = this.GPTSummary?.get(field)?.desc ?? ''; } 
+            if (!desc) { colInfo.desc = this.GPTSummary?.get(colTitle)?.desc ?? ''; } 
             else { colInfo.desc = desc; }
+        } else {
+            this.colsInfo.set(colTitle, {title: colTitle, desc: desc, type: TemplateFieldType.UNSET, size: TemplateFieldSize.MEDIUM})
         }
     }
 
-    @computed get colInfo(){
-        return this.colsInfo;
+    @action setColumnDefault = (colTitle: string, cont: string) => {
+        const colInfo = this.colsInfo.get(colTitle);
+        if (colInfo) {
+            colInfo.defaultContent = cont;
+        } else {
+            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: TemplateFieldType.UNSET, size: TemplateFieldSize.MEDIUM, defaultContent: cont})
+        }
     }
 
     @action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
@@ -529,7 +546,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
         prompt += '----------- Rows: '
 
-        rowsToCheck.forEach(row => {
+        rowsToCheck.forEach((row, i) => {
             prompt += `Row #${row}: `
             cols.forEach(col => {
                 prompt += `${col}: ${this.records[row][col]} -----`
@@ -539,11 +556,35 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return prompt;
     }
 
+    updateColDefaults = () => {
+        let possibleIds: number[] = this.records.map((_, index) => index);
+
+        for (let i = possibleIds.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [possibleIds[i], possibleIds[j]] = [possibleIds[j], possibleIds[i]];
+        }
+    
+        const rowToCheck = possibleIds[0];
+
+        const cols = Array.from(Object.keys(this.records[0])).filter(header => header !== '' && header !== undefined);
+
+        cols.forEach(col => { 
+            this.setColumnDefault(col, `${this.records[rowToCheck][col]}`) 
+        });
+    }
+
     updateGPTSummary = async () => {
         this._GPTLoading = true;
 
+        this.updateColDefaults();
+
         const prompt = this.getColSummary();
 
+        const cols = Array.from(Object.keys(this.records[0])).filter(header => header !== '' && header !== undefined);
+        cols.forEach(col => {
+            if (!this.colsInfo.get(col)) this.colsInfo.set(col, {title: col, desc: '', size: TemplateFieldSize.MEDIUM, type: TemplateFieldType.UNSET});
+        });
+
         try {
             const res = await gptAPICall(prompt, GPTCallType.VIZSUM);
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index fd5e58ae9..e36adc40a 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -136,8 +136,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     @computed get fieldsInfos(): Col[] {
-        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);
+        const colInfo = this._dataViz?.colsInfo;
+        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, defaultContent: colInfo?.get(field)?.defaultContent ?? ''}});
+        //.concat(this._columns)
     }
 
     @computed get canMakeDocs(){
@@ -429,7 +430,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         // this.createEmptyTemplate(temp, assignments);
 
-        this.generatePresetTemplates([TemplateLayouts.FourField001, TemplateLayouts.FourField002], this.fieldsInfos);
+        this.generatePresetTemplates(this.findValidTemplates(this.fieldsInfos, TemplateLayouts.allTemplates), this.fieldsInfos);
+        // console.log(this._dataViz?.colsInfo.get("IMG")?.size, this._dataViz?.colsInfo.get("IMG")?.type)
+        // console.log(this.fieldsInfos)
     };
 
     @action addField = () => {
@@ -533,7 +536,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
 
     findValidTemplates = (cols: Col[], templates: TemplateDocInfos[]) => {
-        const validTemplates: string[] = [];
+        let validTemplates: any[] = [];
         templates.forEach(template => {
             const numFields =  template.fields.length;
             const matches = this.matchesForTemplate(template, cols);
@@ -542,6 +545,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             }
         })
 
+        validTemplates = validTemplates.map(title => TemplateLayouts.fieldByTitle(title));
         return validTemplates;
     };
 
@@ -579,7 +583,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 template.height, 
                 template.width, 
                 col.title, 
-                '', 
+                col.defaultContent ?? '', 
                 field.opts
             );
 
@@ -630,7 +634,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     compileColDescriptions = (cols: Col[]): string =>  {
         let descriptions: string = '';
-        cols.forEach(col => descriptions += `{"${col.title} column: ${col.desc}} `);
+        cols.forEach(col => descriptions += `{title: ${col.title}, size: ${col.size}, type: ${col.type}, descreiption: ${col.desc}} `);
 
         return descriptions;
     };
@@ -644,8 +648,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const inputText = fieldDescriptions.concat(colDescriptions);
 
-        console.log(inputText)
-
         ++this._callCount;
         const origCount = this._callCount;
 
@@ -659,18 +661,15 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             if (res && this._callCount === origCount) {
                 this._GPTLoading = false;
                 const assignments: {[templateTitle: string]: {[field: string]: string}} = JSON.parse(res);
-                console.log(assignments);
                 const brokenDownAssignments: [TemplateDocInfos, {[field: number]: Col}][] = [];
                 Object.entries(assignments).forEach(([tempTitle, assignment]) => {
                     const template = TemplateLayouts.fieldByTitle(tempTitle);
-                    console.log('template', template)
-                    if (!template) {console.log('returned'); return};
+                    if (!template) return;
+                    console.log(assignments)
                     const toObj = Object.entries(assignment).reduce((a, [fieldNum, colTitle]) => {
-                        console.log('hey', a, fieldNum, colTitle)
                         a[Number(fieldNum)] = this.getColByTitle(colTitle);
                         return a;
                     }, {} as { [field: number]: Col }); 
-                    console.log('obj', toObj)
                     brokenDownAssignments.push([template, toObj])
                 })
                 return brokenDownAssignments;
@@ -1213,6 +1212,7 @@ export type Col = {
     desc: string;
     title: string;
     type: TemplateFieldType;
+    defaultContent?: string;
 }
 
 type Field = {
@@ -1295,7 +1295,7 @@ export class FieldFuncs {
             }
     
             currTextHeight = rowsCount * currFontSize * (uppercase ? 1.25 : 1);
-            console.log(rowsCount, currTextHeight)
+            //console.log(rowsCount, currTextHeight)
     
             currFontSize += 1;
         }
@@ -1342,14 +1342,14 @@ export class FieldFuncs {
 
         const bool = true;
 
-        const docWithBasicOpts = (Docs.Create.TextDocument)('Fluorite is a very', {   
+        const docWithBasicOpts = (Docs.Create.TextDocument)(content, {   
             isDefaultTemplateDoc: true,
             _height: height, 
             _width: width, 
             title: title, 
             x: coord.x, 
             y: coord.y, 
-            _text_fontSize: `${FieldFuncs.calculateFontSize(width, height, 'Fluorite is a very', true)}` ,
+            _text_fontSize: `${FieldFuncs.calculateFontSize(width, height, content, true)}` ,
             backgroundColor: opts.backgroundColor ?? '',
             text_fontColor: opts.color,
             contentBold: opts.fontBold,
@@ -1401,6 +1401,12 @@ export class FieldFuncs {
 
 export class TemplateLayouts {
 
+    public static get allTemplates(): TemplateDocInfos[] {
+        return Object.values(TemplateLayouts).filter(
+            value => typeof value === 'object' && value !== null && 'title' in value
+        ) as TemplateDocInfos[];
+    }
+
     public static fieldByTitle = (title: string): TemplateDocInfos | undefined => {
         switch (title){
             case 'fourfield1':
@@ -1438,6 +1444,7 @@ export class TemplateLayouts {
                 backgroundColor: 'transparent',
                 color: '#F1F0E9',
                 contentXCentering: 'h-center',
+                fontBold: true,
             }
         }, {
             tl: [-.87, -.83], 
-- 
cgit v1.2.3-70-g09d2


From b4e4cca578747c987efde7fa8c14299790f3ee02 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 4 Sep 2024 04:14:59 -0400
Subject: stuff

---
 src/client/apis/gpt/GPT.ts                         |   2 +-
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |   1 +
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  15 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 261 ++++++++++++++++-----
 src/client/views/nodes/ImageBox.tsx                |  23 +-
 .../nodes/formattedText/FormattedTextBox.scss      |   1 +
 6 files changed, 232 insertions(+), 71 deletions(-)

(limited to 'src')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index ba8106c4d..6befad310 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -56,7 +56,7 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
         temp: 0,
         prompt: 'List unique differences between the content of the UserAnswer and Rubric. Before each difference, label it and provide any additional information the UserAnswer missed and explain it in second person without separating it into UserAnswer and Rubric content and additional information. If there are no differences, say correct',
     },
-    template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You will be given a list of field descriptions for multiple templates in the format {field #0: “description”}{field #1: “description”}{...}, and a list of column descriptions in the format {“title”: “description}{...}. Your job is to match columns with fields based on their descriptions. Your output should be in the following JSON format: {“Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}, “Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}} where “Template title” represents the template,  # represents the field # and “title” the title of the column assigned to it. A filled out example might look like {“fivefield2”:{0:”Name”, 1:”Image”, 2:”Caption”, 3:”Position”, 4:”Stats”}, “fivefield3”:{0:”Image”, 1:”Name”, 2:”Caption”, 3:”Stats”, 4:”Position”}. Include one object for each template. IT IS VERY IMPORTANT THAT YOU ONLY INCLUDE TEXT IN THE FORMAT ABOVE, WITH NO ADDITIONS WHATSOEVER. Do not include extraneous ‘#’ characters, ‘column’ for columns, or ‘template’ for templates: ONLY THE TITLES AND NUMBERS. Do this for each template whose fields are described. The descriptions are as follows:  ' },
+    template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You will be given a list of field descriptions for multiple templates in the format {field #0: “description”}{field #1: “description”}{...}, and a list of column descriptions in the format {“title”: “description”}{...}. Your job is to match columns with fields based on their descriptions. Your output should be in the following JSON format: {“Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}, “Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}} where “Template title” represents the template,  # represents the field # and “title” the title of the column assigned to it. A filled out example might look like {“fivefield2”:{“0”:”Name”, “1”:”Image”, “2”:”Caption”, “3”:”Position”, “4”:”Stats”}, “fivefield3”:{0:”Image”, 1:”Name”, 2:”Caption”, 3:”Stats”, 4:”Position”}. Include one object for each template. IT IS VERY IMPORTANT THAT YOU ONLY INCLUDE TEXT IN THE FORMAT ABOVE, WITH NO ADDITIONS WHATSOEVER. Do not include extraneous ‘#’ characters, ‘column’ for columns, or ‘template’ for templates: ONLY THE TITLES AND NUMBERS. There should never be one column assigned to more than one field (ie. if the “name” column is assigned to field 1, it can’t be assigned to any other fields) . Do this for each template whose fields are described. The descriptions are as follows:' },
     vizsum: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide brief descriptions for columns in a dataset based on example rows. Your descriptions should be geared towards how each column’s data might fit together into a visual template. Would they make good titles, main focuses, captions, descriptions, etc. Pay special attention to connections between columns, i.e. is there one column that specifically seems to describe/be related to another more than the rest? You should provide your analysis in JSON format like so: {“col1”:”description”, “col2”:”description”, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'},
     vizsum2: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide structured information on columns in a dataset based on example rows. You will categorize each column in two ways: by type and size. The size categories are as follows: tiny (one or two words), small (a sentence/multiple words), medium (a few sentences), large (a longer paragraph), and huge (a very long or multiple paragraphs). The type categories are as follows: visual (links/file paths to images, pdfs, maps, or any other visual media type), and text (plain text that isn’t a link/file path). Visual media should be assumed to have size “medium” “large” or “huge”. You will give your responses in JSON format, like so: {“title (of column)”:{“type”:”text”, “size”:”small”}, “title (of column)”:{“type”:”visual”, “size”:”medium”}, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'} 
 };
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 6888d5f1e..e8235ce1a 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -712,6 +712,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             const targetKey = StrCast(templateInfo.doc!.layout_fieldKey, 'layout');
             const applied = this.ApplyTemplateTo(templateInfo.doc!, target, targetKey, templateInfo.doc!.title + `${row}`);
             target.layout_fieldKey = targetKey;
+
             //this.applyImagesTo(target, fields);
             return applied;
         });
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index c93798979..1f81bf960 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -307,8 +307,11 @@
     }
 
     .docCreatorMenu-preview-image{ 
-        width: 105px;
-        height: 105px;
+        background-color: transparent;
+        height: 100px;
+        width: 100px;
+        display: block;
+        object-fit: contain;
         border-radius: 5px;
     }
 
@@ -411,10 +414,16 @@
 }
 
 .section-reveal-options {
-    margin: 0px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    margin-right: 0px;
     margin-left: auto;
     border: 0px;
     background: none;
+
+    &.float-right {
+        float: right;
+    }
 }
 
 .docCreatorMenu-section-title {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index e36adc40a..191b387c4 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -59,7 +59,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _layoutPreviewScale: number = 1;
     @observable _savedLayouts: DataVizTemplateLayout[] = [];
 
-    @observable _GPTTemplates: Doc[] = [];
+    @observable _suggestedTemplates: Doc[] = [];
     @observable _GPTOpt: boolean = false;
     @observable _userPrompt: string = '';
     @observable _callCount: number = 0;
@@ -99,7 +99,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz };
     @action setTemplateDocs = (docs: Doc[]) => {this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc)};
-    @action setGPTTemplates = (docs: Doc[]) => {this._GPTTemplates = docs};
+    @action setGSuggestedTemplates = (docs: Doc[]) => {this._suggestedTemplates = docs};
 
     @computed get docsToRender() {
         return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
@@ -198,7 +198,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         document.addEventListener('pointerdown', this.onPointerDown, true);
         document.addEventListener('pointerup', this.onPointerUp);
         this._disposers.templates = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon));
-        this._disposers.gpt = reaction(() => this._GPTTemplates.slice(), (docs) => docs.map(this.getIcon));
+        this._disposers.gpt = reaction(() => this._suggestedTemplates.slice(), (docs) => docs.map(this.getIcon));
         //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')})
         this._disposers.lightbox = reaction(() => LightboxView.LightboxDoc(), doc => { doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu()});
         //this._disposers.fields = reaction(() => this._dataViz?.axes, cols => this._selectedCols = cols?.map(col => { return {title: col, type: '', desc: ''}}))
@@ -233,7 +233,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     @action
     openMenu = () => { 
-        const allTemplates = this._templateDocs.concat(this._GPTTemplates);
+        const allTemplates = this._templateDocs.concat(this._suggestedTemplates);
         this._shouldDisplay = true;
         this.updateIcons(allTemplates);
     };
@@ -357,7 +357,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
 
             if (res && this._callCount === origCount) {
-                this._GPTTemplates = [];
+                this._suggestedTemplates = [];
                 this._GPTLoading = false;
                 const templates: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[] = JSON.parse(res);
                 this.createGeneratedTemplates(templates, 500, 500);
@@ -389,14 +389,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             GPTTemplates.push(template);
         });
 
-        setTimeout(() => {this.setGPTTemplates(GPTTemplates); /*GPTTemplates.forEach(template => mainCollection.removeDocument(template))*/}, 100);
+        setTimeout(() => {this.setGSuggestedTemplates(GPTTemplates); /*GPTTemplates.forEach(template => mainCollection.removeDocument(template))*/}, 100);
 
         this.forceUpdate();
     };
 
     editTemplate = (doc: Doc) => {
         //this.closeMenu();
-        DocumentViewInternal.addDocTabFunc(doc, OpenWhere.lightboxAlways);
+        DocumentViewInternal.addDocTabFunc(doc, OpenWhere.addRight);
         DocumentView.DeselectAll();
         Doc.UnBrushDoc(doc);
     };
@@ -419,20 +419,22 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         // mainCollection.addDocument(doc);
 
-        const temp = TemplateLayouts.FourField001;
+        // const temp = TemplateLayouts.FourField001;
 
-        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 img: Col = {type: TemplateFieldType.TEXT, title: 'Type', desc: 'description whpoo', size: TemplateFieldSize.LARGE, defaultContent: ''};
+        // const capt1: Col = {type: TemplateFieldType.TEXT, title: 'Image', desc: 'description hey', size: TemplateFieldSize.TINY};
+        // const capt2: Col = {type: TemplateFieldType.TEXT, title: 'Locality', desc: '', size: TemplateFieldSize.TINY, defaultContent: ''};
+        // const desc: Col = {type: TemplateFieldType.TEXT, title: 'Description', desc: '', size: TemplateFieldSize.LARGE, defaultContent: 'This is a description of a rock. It is kind of long. It is very long. It is gratuitous. This description should be shorter. Oh well. This is a description of a rock. It is kind of long. It is very long. It is gratuitous. This description should be shorter. Oh well. This is a description of a rock. It is kind of long. It is very long. It is gratuitous. This description should be shorter. Oh well.'};
 
         // const assignments = {'0': img, '1': capt1, '2': capt2, '3': desc}
 
         // this.createEmptyTemplate(temp, assignments);
+        // console.log(this.findValidTemplates(this.fieldsInfos, TemplateLayouts.allTemplates));
 
-        this.generatePresetTemplates(this.findValidTemplates(this.fieldsInfos, TemplateLayouts.allTemplates), this.fieldsInfos);
         // console.log(this._dataViz?.colsInfo.get("IMG")?.size, this._dataViz?.colsInfo.get("IMG")?.type)
         // console.log(this.fieldsInfos)
+
+        
     };
 
     @action addField = () => {
@@ -492,7 +494,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const colMatchesField = (col: Col, field : Field) => { return field.sizes?.includes(col.size) && field.types?.includes(col.type) };
 
         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)) {
@@ -507,11 +509,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     maxMatches = (fieldsCt: number, matches: number[][]) => {
         const used: boolean[] = Array(fieldsCt).fill(false);
         const mt: number[] = Array(fieldsCt).fill(-1);
+        console.log(fieldsCt, matches)
 
         const augmentingPath = (v: number): boolean => {
             if (used[v]) return false;
             used[v] = true;
             for (const to of matches[v]) {
+                console.log(mt[to]);
                 if (mt[to] === -1 || augmentingPath(mt[to])) {
                     mt[to] = v;
                     return true;
@@ -538,7 +542,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     findValidTemplates = (cols: Col[], templates: TemplateDocInfos[]) => {
         let validTemplates: any[] = [];
         templates.forEach(template => {
-            const numFields =  template.fields.length;
+            const numFields = template.fields.length;
+            if (!(numFields === cols.length)) return;
             const matches = this.matchesForTemplate(template, cols);
             if (this.maxMatches(numFields, matches) === numFields) {
                 validTemplates.push(template.title);
@@ -546,6 +551,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         })
 
         validTemplates = validTemplates.map(title => TemplateLayouts.fieldByTitle(title));
+
+        console.log(validTemplates);
         return validTemplates;
     };
 
@@ -571,7 +578,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     //     return new Doc;
     // }
 
-    createEmptyTemplate = (template: TemplateDocInfos, assignments: {[field: string]: Col}) => {
+    createEmptyTemplate = (template: TemplateDocInfos, assignments: {[field: string]: Col}): Doc => {
         const fields: Doc[] = [];
 
         Object.entries(assignments).forEach(([f, col]) => {
@@ -618,12 +625,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         mainCollection.addDocument(renderedTemplate);
+        return renderedTemplate;
     };
 
     compileFieldDescriptions = (templates: TemplateDocInfos[]): string => {
         let descriptions: string = '';
         templates.forEach(template => {
-            descriptions += `----------  Description of template ${template.title}'s fields: `
+            descriptions += `----------  NEW TEMPLATE TO INCLUDE: Description of template ${template.title}'s fields: `
             template.fields.forEach((field, index) => {
                 descriptions += `{Field #${index}: ${field.description}} `
             });
@@ -633,7 +641,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     compileColDescriptions = (cols: Col[]): string =>  {
-        let descriptions: string = '';
+        let descriptions: string = ' ------------- COL DESCRIPTIONS START HERE:';
         cols.forEach(col => descriptions += `{title: ${col.title}, size: ${col.size}, type: ${col.type}, descreiption: ${col.desc}} `);
 
         return descriptions;
@@ -648,6 +656,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const inputText = fieldDescriptions.concat(colDescriptions);
 
+        console.log(inputText);
         ++this._callCount;
         const origCount = this._callCount;
 
@@ -660,6 +669,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
             if (res && this._callCount === origCount) {
                 this._GPTLoading = false;
+
+                console.log(res);
+
                 const assignments: {[templateTitle: string]: {[field: string]: string}} = JSON.parse(res);
                 const brokenDownAssignments: [TemplateDocInfos, {[field: number]: Col}][] = [];
                 Object.entries(assignments).forEach(([tempTitle, assignment]) => {
@@ -681,11 +693,16 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return [];
     };
 
-    generatePresetTemplates = async(templates: TemplateDocInfos[], cols: Col[]) => {
+    generatePresetTemplates = async() => {
+        const cols = this.fieldsInfos;
+        const templates = this.findValidTemplates(cols, TemplateLayouts.allTemplates);
         const assignments: [TemplateDocInfos, {[field: number]: Col}][] = await this.assignColsToFields(templates, cols); 
+        const renderedTemplates: Doc[] = [];
         assignments.forEach(([template, assignments]) => {
-            this.createEmptyTemplate(template, assignments);
+            renderedTemplates.push(this.createEmptyTemplate(template, assignments));
         });
+
+        setTimeout(() => {this.setGSuggestedTemplates(renderedTemplates)});
     }
 
     get templatesPreviewContents(){
@@ -699,7 +716,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 <div className='docCreatorMenu-section' style={{height: this._GPTOpt ? 200 : 200}}>
                         <div className='docCreatorMenu-section-topbar'>
                             <div className='docCreatorMenu-section-title'>Suggested Templates</div>
-                            <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._GPTOpt = !this._GPTOpt)}>
+                            <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._menuContent = 'dashboard')}>
                                 <FontAwesomeIcon icon='gear'/>
                             </button>
                         </div>
@@ -709,7 +726,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                     <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
                                 </div>
                             ) : (
-                            this._GPTTemplates?.map(doc => 
+                            this._suggestedTemplates?.map(doc => 
                                 ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info =>
                                     <div 
                                     className='docCreatorMenu-preview-window'
@@ -730,10 +747,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                         </div>
                         <div className='docCreatorMenu-GPT-options'>
                             <div className='docCreatorMenu-GPT-options-container'>
-                                <button className='docCreatorMenu-menu-button' onPointerDown={e => this.setUpButtonClick(e, () => this.generateTemplates(this._userPrompt))}>
+                                <button className='docCreatorMenu-menu-button' onPointerDown={e => this.setUpButtonClick(e, () => this.generatePresetTemplates())}>
                                     <FontAwesomeIcon icon='arrows-rotate'/>
                                 </button>
-                                <input className='docCreatorMenu-GPT-prompt-input' placeholder='Additional prompt:' onChange={e => this._userPrompt = e.target.value}/>
                             </div>
                             {this._GPTOpt ? GPTOptions : null }
                         </div>
@@ -1036,9 +1052,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return (
         <div className='docCreatorMenu-dashboard-view'>
             <div className='topbar'>
-            <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
-                <FontAwesomeIcon icon='plus'/>
-            </button>
+                <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
+                    <FontAwesomeIcon icon='plus'/>
+                </button>
+                <button className='docCreatorMenu-menu-button section-reveal-options float-right' onPointerDown={e => this.setUpButtonClick(e, () => this._menuContent = 'templates')}>
+                    <FontAwesomeIcon icon='arrow-left'/>
+                </button>
             </div>
             {this.fieldsInfos.map((field, index) => 
                 <div className='field-panel' id={`${index}`}>
@@ -1261,12 +1280,12 @@ interface TemplateOpts extends FieldOpts {
 
 export class FieldFuncs {
 
-    private static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
+    public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
         const words: string[] = text.split(/\s+/).filter(Boolean);
 
         let currFontSize = 1; 
         let rowsCount = 1;
-        let currTextHeight = currFontSize * rowsCount * (uppercase ? 1.25 : 1);
+        let currTextHeight = currFontSize * rowsCount * 2;
     
         while (currTextHeight <= contHeight) {
             let wordIndex = 0;
@@ -1276,7 +1295,8 @@ export class FieldFuncs {
     
             while (wordIndex < words.length) {
                 const word = words[wordIndex];
-                const wordWidth = word.length * currFontSize;
+                const wordWidth = word.length * currFontSize * .5;
+                //console.log(wordWidth)
     
                 if (currentRowWidth + wordWidth <= contWidth) {
                     currentRowWidth += wordWidth;
@@ -1291,11 +1311,11 @@ export class FieldFuncs {
                     }
                 }
     
-                wordIndex++;
+                wordIndex++;    
             }
     
-            currTextHeight = rowsCount * currFontSize * (uppercase ? 1.25 : 1);
-            //console.log(rowsCount, currTextHeight)
+            currTextHeight = rowsCount * currFontSize * 2;
+            //console.log(rowsCount, currFontSize, currTextHeight)
     
             currFontSize += 1;
         }
@@ -1312,6 +1332,7 @@ export class FieldFuncs {
         const width = r - l;
         const height = b - t;
         const coord = {x: l, y: t};
+        console.log(coords, parentWidth, parentHeight, height);
         return {width, height, coord};
     }
 
@@ -1378,6 +1399,7 @@ export class FieldFuncs {
             title: title, 
             x: coord.x, 
             y: coord.y,
+            _layout_fitWidth: false,
             backgroundColor: opts.backgroundColor ?? '',
             _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
             borderColor: opts.borderColor,
@@ -1386,6 +1408,8 @@ export class FieldFuncs {
             _rotation: opts.rotation,
         });
 
+        //setTimeout(() => {doc._height = height; doc._width = width}, 10);
+
         return doc;
     }
 
@@ -1415,8 +1439,12 @@ export class TemplateLayouts {
                 return TemplateLayouts.FourField002;
             case 'fourfield3':
                 return TemplateLayouts.FourField003;
+            case 'fourfield4':
+                return TemplateLayouts.FourField004;
             case 'threefield1':
                 return TemplateLayouts.ThreeField001;
+            case 'threefield2':
+                return TemplateLayouts.ThreeField002;
             default:
                 break;
         }
@@ -1427,11 +1455,11 @@ export class TemplateLayouts {
     public static FourField001: TemplateDocInfos = {
         title: 'fourfield1',
         width: 416, 
-        height: 721, 
+        height: 700, 
         opts: {
-            backgroundColor: '#7B8D62',
+            backgroundColor: '#C0B887',
             cornerRounding: 20,
-            borderColor: '#642B00',
+            borderColor: '#6B461F',
             borderWidth: '12',
         },
         fields: [{
@@ -1454,13 +1482,13 @@ export class TemplateLayouts {
             description: 'The main focus of the template; could be an image, long text, etc.',
             opts: {
                 cornerRounding: 20,
-                borderColor: '#642B00',
+                borderColor: '#8F5B25',
                 borderWidth: '6',
                 backgroundColor: '#CECAB9',
             }
         }, {
             tl: [-.8, .2], 
-            br: [.8, .35], 
+            br: [.8, .3],  
             types: [TemplateFieldType.TEXT],
             sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
             description: 'A caption for field #2, very short to short text that contextualizes the content of field #2',
@@ -1474,10 +1502,10 @@ export class TemplateLayouts {
             br: [.87, .96], 
             types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
             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.',
+            description: 'A medium-sized field for medium/long text.',
             opts: {
                 cornerRounding: 15,
-                borderColor: '#642B00',
+                borderColor: '#8F5B25', 
                 borderWidth: '6',
                 backgroundColor: '#CECAB9',
             }
@@ -1497,28 +1525,28 @@ export class TemplateLayouts {
             br: [.83, -.2], 
             types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
             sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
-            description: '',
+            description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus.',
             opts: {
                 borderWidth: '8',
                 borderColor: '#F8E71C',
             }
         }, {
-            tl: [-.45, -.18], 
-            br: [.45, 0], 
+            tl: [-.65, -.2], 
+            br: [.65, -.02], 
             types: [TemplateFieldType.TEXT],
-            sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-            description: '',
+            sizes: [TemplateFieldSize.TINY],
+            description: 'A tiny field for just a word or two of plain text.',
             opts: {
                 backgroundColor: 'transparent',
                 color: 'white',
                 contentXCentering: 'h-center'
             }
         }, {
-            tl: [-.45, 0], 
-            br: [.45, .18], 
+            tl: [-.65, 0], 
+            br: [.65, .18], 
             types: [TemplateFieldType.TEXT],
-            sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-            description: '',
+            sizes: [TemplateFieldSize.TINY],
+            description: 'A tiny field for just a word or two of plain text.',
             opts: {
                 backgroundColor: 'transparent',
                 color: 'white',
@@ -1529,11 +1557,12 @@ export class TemplateLayouts {
             br: [.83, .95], 
             types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
             sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-            description: '',
+            description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus, or share focus with field 1.',
             opts: {
                 borderWidth: '8',
                 borderColor: '#F8E71C',
-                backgroundColor: '#242425'
+                color: 'white',
+                backgroundColor: '#242425',
             }
         }],
         decorations: [{
@@ -1612,7 +1641,8 @@ export class TemplateLayouts {
             description: '',
             opts: {
                 backgroundColor: 'transparent',
-                color: 'white',
+                color: 'red',
+                fontTransform: 'uppercase',
                 contentXCentering: 'h-left'
             }
         }, {
@@ -1635,6 +1665,72 @@ export class TemplateLayouts {
         }]
     };
 
+    public static FourField004: TemplateDocInfos = {
+        title: 'fourfield4',
+        width: 414, 
+        height: 583, 
+        opts: {
+            backgroundColor: '#6CCAF0',
+            borderColor: '#1088C3',
+            borderWidth: '10'
+        },
+        fields: [{
+            tl: [-.86, -.92], 
+            br: [-.075, -.77], 
+            types: [TemplateFieldType.TEXT],
+            sizes: [TemplateFieldSize.TINY],
+            description: 'A tiny field for just a word or two of plain text.',
+            opts: {
+                backgroundColor: '#E2B4F5',
+                borderWidth: '9',
+                borderColor: '#9222F1',
+                contentXCentering: 'h-center'
+            }
+        }, {
+            tl: [.075, -.92], 
+            br: [.86, -.77], 
+            types: [TemplateFieldType.TEXT],
+            sizes: [TemplateFieldSize.TINY],
+            description: 'A tiny field for just a word or two of plain text.',
+            opts: {
+                backgroundColor: '#F5B4DD',
+                borderWidth: '9',
+                borderColor: '#E260F3',
+                contentXCentering: 'h-center'
+            }
+        }, {
+            tl: [-.81, -.64], 
+            br: [.81, .48], 
+            types: [TemplateFieldType.VISUAL],
+            sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+            description: 'A large to huge field for visual content that is the main content of the template.',
+            opts: {
+                borderWidth: '16',
+                borderColor: '#A2BD77',
+            }
+        }, {
+            tl: [-.86, .6], 
+            br: [.86, .92], 
+            types: [TemplateFieldType.TEXT],
+            sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
+            description: 'A medium to large field for text that describes the visual content above',
+            opts: {
+                borderWidth: '9',
+                borderColor: '#F0D601',
+                backgroundColor: '#F3F57D',
+            }
+        }],
+        decorations: [{
+            tl: [-.852, -.67], 
+            br: [.852, .51], 
+            opts: {
+                backgroundColor: 'transparent',
+                borderColor: '#007C0C',
+                borderWidth: '10',
+            }
+        }]
+    };
+
     public static ThreeField001: TemplateDocInfos = {
         title: 'threefield1',
         width: 575, 
@@ -1646,8 +1742,8 @@ export class TemplateLayouts {
             tl: [-.66, -.747], 
             br: [.66, .247], 
             types: [TemplateFieldType.VISUAL],
-            sizes: [TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-            description: '',
+            sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+            description: 'A medium to large field for visual content that is the central focus.',
             opts: {
                 borderColor: 'yellow',
                 borderWidth: '8',
@@ -1670,7 +1766,7 @@ export class TemplateLayouts {
             br: [.7, .46], 
             types: [TemplateFieldType.TEXT],
             sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-            description: '',
+            description: 'A very small text field for one to a few words. A good caption for the image.',
             opts: {
                 backgroundColor: 'transparent',
                 contentXCentering: 'h-center',
@@ -1680,7 +1776,7 @@ export class TemplateLayouts {
             br: [.95, .95], 
             types: [TemplateFieldType.TEXT],
             sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
-            description: '',
+            description: 'A medium to large text field for a thorough description of the image. ',
             opts: {
                 backgroundColor: 'transparent',
                 color: 'white'
@@ -1717,6 +1813,59 @@ export class TemplateLayouts {
         }]
     };
 
+    public static ThreeField002: TemplateDocInfos = {
+        title: 'threefield2',
+        width: 477, 
+        height: 662, 
+        opts: {
+            backgroundColor: '#9E9C95'
+        },
+        fields: [{
+            tl: [-.95, .8], 
+            br: [-.1, .95], 
+            types: [TemplateFieldType.VISUAL],
+            sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+            description: '',
+            opts: {
+                backgroundColor: 'transparent',
+                color: 'white',
+                contentXCentering: 'h-right',
+            }
+        }, {
+            tl: [.1, .8], 
+            br: [.95, .95], 
+            types: [TemplateFieldType.TEXT],
+            sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+            description: 'A very small text field for one to a few words. The content should represent a general categorization of the image.',
+            opts: {
+                backgroundColor: 'transparent',
+                color: 'red',
+                fontTransform: 'uppercase',
+                fontBold: true,
+                contentXCentering: 'h-left'
+            }
+        }, {
+            tl: [0, -.9], 
+            br: [.85, -.66], 
+            types: [TemplateFieldType.TEXT],
+            sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+            description: 'A very small text field for one to a few words. The content should contextualize field 2.',
+            opts: {
+                backgroundColor: 'transparent',
+                contentXCentering: 'h-right'
+            }
+        }],
+        decorations: [{
+            tl: [-.025, .8], 
+            br: [.025, .95], 
+            opts: {
+                backgroundColor: '#E0E0DA',
+            }
+        }]
+    };
+
+
+
 //     public static FourField002: TemplateDocInfos = {
 //         width: 450, 
 //         height: 600, 
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index faea05104..53aa7171f 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -123,15 +123,15 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             { fireImmediately: true, delay: 1000 }
         );
         const { layoutDoc } = this;
-        this._disposers.path = reaction(
-            () => ({ nativeSize: this.nativeSize, width: NumCast(this.layoutDoc._width) }),
-            ({ nativeSize, width }) => {
-                if (layoutDoc === this.layoutDoc || !this.layoutDoc._height) {
-                    this.layoutDoc._height = (width * nativeSize.nativeHeight) / nativeSize.nativeWidth;
-                }
-            },
-            { fireImmediately: true }
-        );
+        // this._disposers.path = reaction(
+        //     () => ({ nativeSize: this.nativeSize, width: NumCast(this.layoutDoc._width) }),
+        //     ({ nativeSize, width }) => {
+        //         if (layoutDoc === this.layoutDoc || !this.layoutDoc._height) {
+        //             this.layoutDoc._height = (width * nativeSize.nativeHeight) / nativeSize.nativeWidth;
+        //         }
+        //     },
+        //     { fireImmediately: true }
+        // );
         this._disposers.scroll = reaction(
             () => this.layoutDoc.layout_scrollTop,
             sTop => {
@@ -394,7 +394,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         alt=""
                         key="paths"
                         src={srcpath}
-                        style={{ transform, transformOrigin }}
+                        style={{ transform, transformOrigin, objectFit: 'fill', height: '100%' }}
                         onError={action(e => {
                             this._error = e.toString();
                         })}
@@ -456,6 +456,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     savedAnnotations = () => this._savedAnnotations;
     render() {
+        console.log('img', this._props.PanelWidth(), this._props.PanelHeight())
         TraceMobx();
         const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding);
         const borderRadius = borderRad?.includes('px') ? `${Number(borderRad.split('px')[0]) / (this._props.NativeDimScaling?.() || 1)}px` : borderRad;
@@ -475,7 +476,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 })}
                 style={{
                     width: this._props.PanelWidth() ? undefined : `100%`,
-                    height: this._props.PanelWidth() ? undefined : `100%`,
+                    height: this._props.PanelHeight() ? undefined : `100%`,
                     pointerEvents: this.layoutDoc._lockedPosition ? 'none' : undefined,
                     borderRadius,
                     overflow: this.layoutDoc.layout_fitWidth || this._props.fitWidth?.(this.Document) ? 'auto' : undefined,
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index d6fd81f83..72d550c7e 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -79,6 +79,7 @@ audiotag:hover {
     transform-origin: left top;
     top: 0;
     left: 0;
+    
 }
 
 .formattedTextBox-cont {
-- 
cgit v1.2.3-70-g09d2


From 5bbd63ae6c581a945c9b7000d330de87398f8f36 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 5 Sep 2024 02:27:13 -0400
Subject: fingers crossed

---
 src/client/apis/gpt/GPT.ts                         |   6 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 190 ++++++++++++++++-----
 2 files changed, 150 insertions(+), 46 deletions(-)

(limited to 'src')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 6befad310..7351fd0f5 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -14,7 +14,8 @@ enum GPTCallType {
     DATA = 'data',
     TEMPLATE = "template",
     VIZSUM = 'vizsum',
-    VIZSUM2 = 'vizsum2'
+    VIZSUM2 = 'vizsum2',
+    FILL = 'fill'
 }
 
 type GPTCallOpts = {
@@ -58,7 +59,8 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
     },
     template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You will be given a list of field descriptions for multiple templates in the format {field #0: “description”}{field #1: “description”}{...}, and a list of column descriptions in the format {“title”: “description”}{...}. Your job is to match columns with fields based on their descriptions. Your output should be in the following JSON format: {“Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}, “Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}} where “Template title” represents the template,  # represents the field # and “title” the title of the column assigned to it. A filled out example might look like {“fivefield2”:{“0”:”Name”, “1”:”Image”, “2”:”Caption”, “3”:”Position”, “4”:”Stats”}, “fivefield3”:{0:”Image”, 1:”Name”, 2:”Caption”, 3:”Stats”, 4:”Position”}. Include one object for each template. IT IS VERY IMPORTANT THAT YOU ONLY INCLUDE TEXT IN THE FORMAT ABOVE, WITH NO ADDITIONS WHATSOEVER. Do not include extraneous ‘#’ characters, ‘column’ for columns, or ‘template’ for templates: ONLY THE TITLES AND NUMBERS. There should never be one column assigned to more than one field (ie. if the “name” column is assigned to field 1, it can’t be assigned to any other fields) . Do this for each template whose fields are described. The descriptions are as follows:' },
     vizsum: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide brief descriptions for columns in a dataset based on example rows. Your descriptions should be geared towards how each column’s data might fit together into a visual template. Would they make good titles, main focuses, captions, descriptions, etc. Pay special attention to connections between columns, i.e. is there one column that specifically seems to describe/be related to another more than the rest? You should provide your analysis in JSON format like so: {“col1”:”description”, “col2”:”description”, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'},
-    vizsum2: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide structured information on columns in a dataset based on example rows. You will categorize each column in two ways: by type and size. The size categories are as follows: tiny (one or two words), small (a sentence/multiple words), medium (a few sentences), large (a longer paragraph), and huge (a very long or multiple paragraphs). The type categories are as follows: visual (links/file paths to images, pdfs, maps, or any other visual media type), and text (plain text that isn’t a link/file path). Visual media should be assumed to have size “medium” “large” or “huge”. You will give your responses in JSON format, like so: {“title (of column)”:{“type”:”text”, “size”:”small”}, “title (of column)”:{“type”:”visual”, “size”:”medium”}, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'} 
+    vizsum2: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide structured information on columns in a dataset based on example rows. You will categorize each column in two ways: by type and size. The size categories are as follows: tiny (one or two words), small (a sentence/multiple words), medium (a few sentences), large (a longer paragraph), and huge (a very long or multiple paragraphs). The type categories are as follows: visual (links/file paths to images, pdfs, maps, or any other visual media type), and text (plain text that isn’t a link/file path). Visual media should be assumed to have size “medium” “large” or “huge”. You will give your responses in JSON format, like so: {“title (of column)”:{“type”:”text”, “size”:”small”}, “title (of column)”:{“type”:”visual”, “size”:”medium”}, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'},
+    fill: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to generate content for fields based on a user prompt and background context given to you. You will be given the content of the other fields present in the format: ---- Field # (field title): content ---- Field # (field title): content ----- (etc.) You will be given info on the columns to generate for in the format ---- title: , prompt: , word limit: , assigned field: ----. For each column, based on the prompt, word limit, and the context of existing fields, you should generate a short response in the following JSON format: {“title” (should be the title from the column description with no additions): {“number”:”#” (where # is the assigned field of the column), “content”:”response” (where response is your response to the prompt in the column info)}}. ONLY INCLUDE THE JSON TEXT WITH NO OTHER ADDED TEXT. The word limit for each column applies only to that column’s response. You should include one object per column you are provided info on.' }  
 };
 let lastCall = '';
 let lastResp = '';
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 191b387c4..33d9a8827 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -31,6 +31,7 @@ import { dropActionType } from '../../../util/DropActionTypes';
 import { ImageBox } from '../ImageBox';
 import { a } from '@react-spring/web';
 import { RichTextMenu } from '../formattedText/RichTextMenu';
+import e from 'cors';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -137,8 +138,22 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     @computed get fieldsInfos(): Col[] {
         const colInfo = this._dataViz?.colsInfo;
-        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, defaultContent: colInfo?.get(field)?.defaultContent ?? ''}});
-        //.concat(this._columns)
+        return this.selectedFields.map(field => {
+            const fieldInfo = colInfo?.get(field);
+
+            const col: Col = {
+                title: field,
+                type: fieldInfo?.type ?? TemplateFieldType.UNSET,
+                desc: fieldInfo?.desc ?? '',
+                size: fieldInfo?.size ?? TemplateFieldSize.MEDIUM
+            };
+
+            if (fieldInfo?.defaultContent !== undefined) {
+                col.defaultContent = fieldInfo.defaultContent;
+            }
+
+            return col;
+        }).concat(this._columns);
     }
 
     @computed get canMakeDocs(){
@@ -463,7 +478,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }   
     };
 
-    setFieldType = (column: Col, type: TemplateFieldType) => {
+    setColType = (column: Col, type: TemplateFieldType) => {
         if (this.selectedFields.includes(column.title)) {
             this._dataViz?.setColumnType(column.title, type);
         } else {
@@ -472,7 +487,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this.forceUpdate();
     };
 
-    setFieldSize = (column: Col, size: TemplateFieldSize) => {
+    setColSize = (column: Col, size: TemplateFieldSize) => {
         if (this.selectedFields.includes(column.title)) {
             this._dataViz?.setColumnSize(column.title, size);
         } else {
@@ -481,11 +496,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this.forceUpdate();
     };
 
-    setFieldDesc = (column: Col, desc: string) => {
+    setColDesc = (column: Col, desc: string) => {
         if (this.selectedFields.includes(column.title)) {
             this._dataViz?.setColumnDesc(column.title, desc);
         } else {
             column.desc = desc;
+            console.log(column, column.desc)
         }
         this.forceUpdate();
     };
@@ -578,11 +594,45 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     //     return new Doc;
     // }
 
-    createEmptyTemplate = (template: TemplateDocInfos, assignments: {[field: string]: Col}): Doc => {
+    fillPresetTemplate = async(template: TemplateDocInfos, assignments: {[field: string]: Col}): Promise<Doc> => {
+        const wordLimit = (size: TemplateFieldSize) => {
+            switch (size) {
+                case TemplateFieldSize.TINY:
+                    return 2;
+                case TemplateFieldSize.SMALL:
+                    return 5;
+                case TemplateFieldSize.MEDIUM:
+                    return 20;
+                case TemplateFieldSize.LARGE:
+                    return 50;
+                case TemplateFieldSize.HUGE:
+                    return 100;
+                default: 
+                    return 10;
+            }
+        }
+
         const fields: Doc[] = [];
 
-        Object.entries(assignments).forEach(([f, col]) => {
+        const GPTAssignments = Object.entries(assignments).filter(([f, col]) => this._columns.includes(col));
+        const nonGPTAssignments: [string, Col][] = Object.entries(assignments).filter(a => !GPTAssignments.includes(a));
+
+        const stringifyGPTInfo = (): string => {
+            let string: string = '*** COLUMN INFO:';
+            GPTAssignments.forEach(([fieldNum, col]) => {
+                `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.size)} words, assigned field: ${fieldNum} ---`
+            });
+            return string += ' ***';
+        };
+
+        const GPTAssignmentString = stringifyGPTInfo();
+        console.log('assignment string', GPTAssignmentString);
+
+        let fieldContent: string = '';
+
+        Object.entries(nonGPTAssignments).forEach(([f, strCol]) => {
             const field: Field = template.fields[Number(f)];
+            const col = strCol[1];
 
             const doc = (col.type === TemplateFieldType.VISUAL ? FieldFuncs.ImageField : FieldFuncs.TextField)({
                 tl: field.tl, 
@@ -594,6 +644,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 field.opts
             );
 
+            fieldContent += `--- Field #${f} (title: ${col.title}): ${col.defaultContent ?? ''} ---`
+
             fields.push(doc);
         });
 
@@ -611,21 +663,67 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             fields.push(doc);
         });
 
-        const renderedTemplate = Docs.Create.FreeformDocument(fields, { 
-            _height: template.height, 
-            _width: template.width, 
-            title: template.title, 
-            backgroundColor: template.opts.backgroundColor,
-            _layout_borderRounding: `${template.opts.cornerRounding}px` ?? '0px', 
-            borderWidth: template.opts.borderWidth,
-            borderColor: template.opts.borderColor,
-            x: 400, 
-            y: 400,
-        });
+        const createMainDoc = (): Doc => {
+            const main = Docs.Create.FreeformDocument(fields, { 
+                _height: template.height, 
+                _width: template.width, 
+                title: template.title, 
+                backgroundColor: template.opts.backgroundColor,
+                _layout_borderRounding: `${template.opts.cornerRounding}px` ?? '0px', 
+                borderWidth: template.opts.borderWidth,
+                borderColor: template.opts.borderColor,
+                x: 400, 
+                y: 400,
+            });
 
-        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        mainCollection.addDocument(renderedTemplate);
-        return renderedTemplate;
+            const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+            mainCollection.addDocument(main);
+
+            return main;
+        }
+
+        console.log('field content', fieldContent)
+
+        if (GPTAssignments.length) {
+            
+            try {
+                const prompt = fieldContent + GPTAssignmentString;
+
+                const res = await gptAPICall(prompt, GPTCallType.FILL);
+
+                if (res){
+                    console.log('response', res);
+
+                    const assignments: {[title: string]: {number: string, content: string}} = JSON.parse(res);
+                    console.log('assignments', assignments);
+                    Object.entries(assignments).forEach(([title, info]) => {
+                        const field: Field = template.fields[Number(info.number)];
+                        const col = this.getColByTitle(title);
+
+                        const doc = (col.type === TemplateFieldType.VISUAL ? FieldFuncs.ImageField : FieldFuncs.TextField)({
+                            tl: field.tl, 
+                            br: field.br }, 
+                            template.height, 
+                            template.width, 
+                            col.title, 
+                            info.content ?? '', 
+                            field.opts
+                        );
+
+                        fields.push(doc);
+                    });
+
+                    return createMainDoc();
+                }
+            } catch(err) {
+                console.log(err);
+            }
+            
+        } else {
+            return createMainDoc();
+        }
+
+        return new Doc;
     };
 
     compileFieldDescriptions = (templates: TemplateDocInfos[]): string => {
@@ -693,17 +791,21 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return [];
     };
 
-    generatePresetTemplates = async() => {
+    generatePresetTemplates = async () => {
         const cols = this.fieldsInfos;
         const templates = this.findValidTemplates(cols, TemplateLayouts.allTemplates);
-        const assignments: [TemplateDocInfos, {[field: number]: Col}][] = await this.assignColsToFields(templates, cols); 
-        const renderedTemplates: Doc[] = [];
-        assignments.forEach(([template, assignments]) => {
-            renderedTemplates.push(this.createEmptyTemplate(template, assignments));
-        });
-
-        setTimeout(() => {this.setGSuggestedTemplates(renderedTemplates)});
-    }
+        
+        const assignments: [TemplateDocInfos, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols);
+        
+        const renderedTemplatePromises: Promise<Doc>[] = assignments.map(([template, assignments]) => 
+            this.fillPresetTemplate(template, assignments)
+        );
+    
+        const renderedTemplates: Doc[] = await Promise.all(renderedTemplatePromises);
+        
+        setTimeout(() => { this.setGSuggestedTemplates(renderedTemplates) });
+    };
+    
 
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
@@ -1067,15 +1169,15 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                             {field.type === TemplateFieldType.UNSET ? <span className='placeholder'>Select media type</span> : null}
                             <span className='type-display'>{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
                             <div className='bubbles'>
-                                <input className='bubble' type="radio" name="type" onClick={() => {this.setFieldType(field, TemplateFieldType.TEXT)}}/> 
+                                <input className='bubble' type="radio" name="type" onClick={() => {this.setColType(field, TemplateFieldType.TEXT)}}/> 
                                 <div className='text'>Text</div>
-                                <input className='bubble' type="radio" name="type" onClick={() => {this.setFieldType(field, TemplateFieldType.VISUAL)}}/> 
+                                <input className='bubble' type="radio" name="type" onClick={() => {this.setColType(field, TemplateFieldType.VISUAL)}}/> 
                                 <div className='text'>File</div>
                             </div>
                         </div>
                         <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?.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.'} /> 
+                    <textarea className='field-description-container' onChange={(e) => this.setColDesc(field, 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'/>
@@ -1821,37 +1923,37 @@ export class TemplateLayouts {
             backgroundColor: '#9E9C95'
         },
         fields: [{
-            tl: [-.95, .8], 
-            br: [-.1, .95], 
+            tl: [-.875, -.9], 
+            br: [.875, .7], 
             types: [TemplateFieldType.VISUAL],
             sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-            description: '',
+            description: 'A medium to large visual field for the main content of the template',
             opts: {
-                backgroundColor: 'transparent',
-                color: 'white',
-                contentXCentering: 'h-right',
+                borderWidth: '15',
+                borderColor: '#E0E0DA',
             }
         }, {
-            tl: [.1, .8], 
-            br: [.95, .95], 
+            tl: [.1, .775], 
+            br: [.95, .975], 
             types: [TemplateFieldType.TEXT],
             sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
             description: 'A very small text field for one to a few words. The content should represent a general categorization of the image.',
             opts: {
                 backgroundColor: 'transparent',
-                color: 'red',
+                color: '#AF0D0D',
                 fontTransform: 'uppercase',
                 fontBold: true,
                 contentXCentering: 'h-left'
             }
         }, {
-            tl: [0, -.9], 
-            br: [.85, -.66], 
+            tl: [-.95, .775], 
+            br: [-.1, .975],
             types: [TemplateFieldType.TEXT],
             sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
             description: 'A very small text field for one to a few words. The content should contextualize field 2.',
             opts: {
                 backgroundColor: 'transparent',
+                color: 'black',
                 contentXCentering: 'h-right'
             }
         }],
-- 
cgit v1.2.3-70-g09d2


From 441e1337f22f4bc9f9c6c8dcf643cc72c4d68f21 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 5 Sep 2024 03:35:51 -0400
Subject: Oh, coding makes me feel like an idiot sometimes... (added += where a
 string was supposed to be updated)

---
 src/client/apis/gpt/GPT.ts                         |  2 +-
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 43 +++++++++++++---------
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 24 +++++++-----
 src/client/views/nodes/ImageBox.tsx                |  1 -
 4 files changed, 42 insertions(+), 28 deletions(-)

(limited to 'src')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 7351fd0f5..f1d5ab533 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -60,7 +60,7 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
     template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You will be given a list of field descriptions for multiple templates in the format {field #0: “description”}{field #1: “description”}{...}, and a list of column descriptions in the format {“title”: “description”}{...}. Your job is to match columns with fields based on their descriptions. Your output should be in the following JSON format: {“Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}, “Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}} where “Template title” represents the template,  # represents the field # and “title” the title of the column assigned to it. A filled out example might look like {“fivefield2”:{“0”:”Name”, “1”:”Image”, “2”:”Caption”, “3”:”Position”, “4”:”Stats”}, “fivefield3”:{0:”Image”, 1:”Name”, 2:”Caption”, 3:”Stats”, 4:”Position”}. Include one object for each template. IT IS VERY IMPORTANT THAT YOU ONLY INCLUDE TEXT IN THE FORMAT ABOVE, WITH NO ADDITIONS WHATSOEVER. Do not include extraneous ‘#’ characters, ‘column’ for columns, or ‘template’ for templates: ONLY THE TITLES AND NUMBERS. There should never be one column assigned to more than one field (ie. if the “name” column is assigned to field 1, it can’t be assigned to any other fields) . Do this for each template whose fields are described. The descriptions are as follows:' },
     vizsum: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide brief descriptions for columns in a dataset based on example rows. Your descriptions should be geared towards how each column’s data might fit together into a visual template. Would they make good titles, main focuses, captions, descriptions, etc. Pay special attention to connections between columns, i.e. is there one column that specifically seems to describe/be related to another more than the rest? You should provide your analysis in JSON format like so: {“col1”:”description”, “col2”:”description”, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'},
     vizsum2: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide structured information on columns in a dataset based on example rows. You will categorize each column in two ways: by type and size. The size categories are as follows: tiny (one or two words), small (a sentence/multiple words), medium (a few sentences), large (a longer paragraph), and huge (a very long or multiple paragraphs). The type categories are as follows: visual (links/file paths to images, pdfs, maps, or any other visual media type), and text (plain text that isn’t a link/file path). Visual media should be assumed to have size “medium” “large” or “huge”. You will give your responses in JSON format, like so: {“title (of column)”:{“type”:”text”, “size”:”small”}, “title (of column)”:{“type”:”visual”, “size”:”medium”}, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'},
-    fill: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to generate content for fields based on a user prompt and background context given to you. You will be given the content of the other fields present in the format: ---- Field # (field title): content ---- Field # (field title): content ----- (etc.) You will be given info on the columns to generate for in the format ---- title: , prompt: , word limit: , assigned field: ----. For each column, based on the prompt, word limit, and the context of existing fields, you should generate a short response in the following JSON format: {“title” (should be the title from the column description with no additions): {“number”:”#” (where # is the assigned field of the column), “content”:”response” (where response is your response to the prompt in the column info)}}. ONLY INCLUDE THE JSON TEXT WITH NO OTHER ADDED TEXT. The word limit for each column applies only to that column’s response. You should include one object per column you are provided info on.' }  
+    fill: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to generate content for fields based on a user prompt and background context given to you. You will be given the content of the other fields present in the format: ---- Field # (field title): content ---- Field # (field title): content ----- (etc.) You will be given info on the columns to generate for in the format ---- title: , prompt: , word limit: , assigned field: ----. For each column, based on the prompt, word limit, and the context of existing fields, you should generate a short response in the following JSON format: {“___”(where ___ is the title from the column description with no additions): {“number”:”#” (where # is the assigned field of the column), “content”:”response” (where response is your response to the prompt in the column info)}}. Here’s another example of the format with only one column: {“position”: {“number”:”2”, “content”:”*your response goes here*”}}. ONLY INCLUDE THE JSON TEXT WITH NO OTHER ADDED TEXT. YOUR RESPONSE MUST BE VALID JSON. The word limit for each column applies only to that column’s response. Do not include speculation or information that you can’t glean from your factual knowledge or the content of the other fields (no description of images you can’t see, for example). You should include one object per column you are provided info on.'}
 };
 let lastCall = '';
 let lastResp = '';
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index e8235ce1a..d9a7d5e3a 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -175,6 +175,15 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     }
 
+    @action setColumnTitle = (colTitle: string, newTitle: string) => {
+        const colInfo = this.colsInfo.get(colTitle);
+        if (colInfo) { 
+            colInfo.title = newTitle;
+        } else {
+            this.colsInfo.set(colTitle, {title: newTitle, desc: '', type: TemplateFieldType.UNSET, size: TemplateFieldSize.MEDIUM})
+        }
+    }
+
     @action setColumnDesc = (colTitle: string, desc: string) => {
         const colInfo = this.colsInfo.get(colTitle);
         if (colInfo) {
@@ -580,33 +589,33 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
         const prompt = this.getColSummary();
 
+        console.log(prompt)
+
         const cols = Array.from(Object.keys(this.records[0])).filter(header => header !== '' && header !== undefined);
         cols.forEach(col => {
             if (!this.colsInfo.get(col)) this.colsInfo.set(col, {title: col, desc: '', size: TemplateFieldSize.MEDIUM, type: TemplateFieldType.UNSET});
         });
 
         try {
-            const res = await gptAPICall(prompt, GPTCallType.VIZSUM);
-
-            if (res) {
+            const [res1, res2] = await Promise.all([
+                gptAPICall(prompt, GPTCallType.VIZSUM),
+                gptAPICall('Info:' + prompt, GPTCallType.VIZSUM2)
+            ]);
+        
+            if (res1) {
+                console.log(res1);
                 this.GPTSummary = new ObservableMap();
-                const descs: {[col: string]: string} = JSON.parse(res);
+                const descs: { [col: string]: string } = JSON.parse(res1);
                 for (const [key, val] of Object.entries(descs)) {
-                    this.GPTSummary.set(key, {desc: 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) {
+        
+            if (res2) {
                 !this.GPTSummary && (this.GPTSummary = new ObservableMap());
-                const info: {[col: string]: {type: TemplateFieldType, size: TemplateFieldSize}} = JSON.parse(res);
-                console.log(info)
+                const info: { [col: string]: { type: TemplateFieldType, size: TemplateFieldSize } } = JSON.parse(res2);
+                console.log(info);
                 for (const [key, val] of Object.entries(info)) {
                     const colSummary = this.GPTSummary.get(key);
                     if (colSummary) {
@@ -616,11 +625,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         this.setColumnSize(key, val.size);
                     }
                 }
-
             }
         } catch (err) {
             console.error(err);
-        } 
+        }
+        
     }
 
     getPossibleTemplates = (): Doc[] => {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 33d9a8827..64152f577 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -478,6 +478,15 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }   
     };
 
+    setColTitle = (column: Col, title: string) => {
+        if (this.selectedFields.includes(column.title)) {
+            this._dataViz?.setColumnTitle(column.title, title);
+        } else {
+            column.title = title;
+        }
+        this.forceUpdate();
+    };
+
     setColType = (column: Col, type: TemplateFieldType) => {
         if (this.selectedFields.includes(column.title)) {
             this._dataViz?.setColumnType(column.title, type);
@@ -492,6 +501,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             this._dataViz?.setColumnSize(column.title, size);
         } else {
             column.size = size;
+            console.log(column.size)
         }
         this.forceUpdate();
     };
@@ -501,7 +511,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             this._dataViz?.setColumnDesc(column.title, desc);
         } else {
             column.desc = desc;
-            console.log(column, column.desc)
         }
         this.forceUpdate();
     };
@@ -620,13 +629,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const stringifyGPTInfo = (): string => {
             let string: string = '*** COLUMN INFO:';
             GPTAssignments.forEach(([fieldNum, col]) => {
-                `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.size)} words, assigned field: ${fieldNum} ---`
+                string += `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.size)} words, assigned field: ${fieldNum} ---`
             });
             return string += ' ***';
         };
 
         const GPTAssignmentString = stringifyGPTInfo();
-        console.log('assignment string', GPTAssignmentString);
 
         let fieldContent: string = '';
 
@@ -682,8 +690,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             return main;
         }
 
-        console.log('field content', fieldContent)
-
         if (GPTAssignments.length) {
             
             try {
@@ -695,7 +701,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     console.log('response', res);
 
                     const assignments: {[title: string]: {number: string, content: string}} = JSON.parse(res);
-                    console.log('assignments', assignments);
+                    console.log('assignments', GPTAssignments, 'assignment string', GPTAssignmentString, 'field content', fieldContent, 'response', res, 'assignments', assignments);
                     Object.entries(assignments).forEach(([title, info]) => {
                         const field: Field = template.fields[Number(info.number)];
                         const col = this.getColByTitle(title);
@@ -1164,7 +1170,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             {this.fieldsInfos.map((field, index) => 
                 <div className='field-panel' id={`${index}`}>
                     <div className='properties-wrapper'>
-                        <input className='field-property-container' id={`${Math.random() * 100}`} defaultValue={field.title} placeholder={'Enter title'}/>
+                        <input className='field-property-container' id={`${Math.random() * 100}`} defaultValue={field.title} placeholder={'Enter title'}  onChange={(e) => this.setColTitle(field, e.target.value)}/>
                         <div className='field-type-selection-container'>
                             {field.type === TemplateFieldType.UNSET ? <span className='placeholder'>Select media type</span> : null}
                             <span className='type-display'>{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
@@ -1175,7 +1181,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 <div className='text'>File</div>
                             </div>
                         </div>
-                        <input className='field-property-container' id={`${Math.random() * 100}`} placeholder={this._dataViz?.GPTSummary?.get(field.title)?.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%' : ''} } onChange={(e) => this.setColSize(field, e.target.value as TemplateFieldSize)}/>
                     </div>
                     <textarea className='field-description-container' onChange={(e) => this.setColDesc(field, 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>
@@ -1434,7 +1440,7 @@ export class FieldFuncs {
         const width = r - l;
         const height = b - t;
         const coord = {x: l, y: t};
-        console.log(coords, parentWidth, parentHeight, height);
+        //console.log(coords, parentWidth, parentHeight, height);
         return {width, height, coord};
     }
 
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 53aa7171f..3e5458888 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -456,7 +456,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     savedAnnotations = () => this._savedAnnotations;
     render() {
-        console.log('img', this._props.PanelWidth(), this._props.PanelHeight())
         TraceMobx();
         const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding);
         const borderRadius = borderRad?.includes('px') ? `${Number(borderRad.split('px')[0]) / (this._props.NativeDimScaling?.() || 1)}px` : borderRad;
-- 
cgit v1.2.3-70-g09d2


From cd68ef2a2cde1dae40963c4c25c5452404a12fdd Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sat, 7 Sep 2024 17:05:09 -0400
Subject: expanded preview option

---
 src/client/views/MainView.tsx                      |  1 +
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 35 ++++++++++++++++------
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 29 ++++++++++++++----
 src/client/views/nodes/DocumentView.scss           |  6 ++++
 4 files changed, 56 insertions(+), 15 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 2a937d403..ac669a864 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -280,6 +280,7 @@ export class MainView extends ObservableReactComponent<{}> {
 
         library.add(
             ...[
+                fa.faMinimize,
                 fa.faArrowsRotate,
                 fa.faFloppyDisk,
                 fa.faRepeat,
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 1f81bf960..857d76d4f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -288,6 +288,12 @@
     height: 100%;
 }
 
+.docCreatorMenu-expanded-template-preview {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
 .docCreatorMenu-preview-window {
     position: relative;
     display: flex;
@@ -306,15 +312,6 @@
         background-color: rgb(72, 72, 73);
     }
 
-    .docCreatorMenu-preview-image{ 
-        background-color: transparent;
-        height: 100px;
-        width: 100px;
-        display: block;
-        object-fit: contain;
-        border-radius: 5px;
-    }
-
     &.empty {
         font-size: 35px;
 
@@ -358,6 +355,20 @@
     
 }
 
+.docCreatorMenu-preview-image{ 
+    background-color: transparent;
+    height: 100px;
+    width: 100px;
+    display: block;
+    object-fit: contain;
+    border-radius: 5px;
+
+    &.expanded {
+        height: 100%;
+        width: 100%;
+    }
+}
+
 .docCreatorMenu-section {
     display: flex;
     flex-direction: column;
@@ -424,6 +435,12 @@
     &.float-right {
         float: right;
     }
+
+    &.top-right {
+        position: absolute;
+        top: 3px;
+        right: 3px;
+    }
 }
 
 .docCreatorMenu-section-title {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 64152f577..953037d13 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -59,6 +59,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _layoutPreview: boolean = true;
     @observable _layoutPreviewScale: number = 1;
     @observable _savedLayouts: DataVizTemplateLayout[] = [];
+    @observable _expandedPreview: {icon: ImageField, doc: Doc} | undefined = undefined;
 
     @observable _suggestedTemplates: Doc[] = [];
     @observable _GPTOpt: boolean = false;
@@ -798,6 +799,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     generatePresetTemplates = async () => {
+        this._dataViz?.updateColDefaults();
+
         const cols = this.fieldsInfos;
         const templates = this.findValidTemplates(cols, TemplateLayouts.allTemplates);
         
@@ -811,7 +814,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         
         setTimeout(() => { this.setGSuggestedTemplates(renderedTemplates) });
     };
-    
+
+    @action setExpandedView = (info: {icon: ImageField, doc: Doc} | undefined) => {
+        this._expandedPreview = info;
+    }
 
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
@@ -820,8 +826,17 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             <div></div>
 
         return (
-            <div className='docCreatorMenu-templates-view'>
-                <div className='docCreatorMenu-section' style={{height: this._GPTOpt ? 200 : 200}}>
+            <div className={`docCreatorMenu-templates-view`}>
+                {this._expandedPreview ? 
+                <div className='docCreatorMenu-expanded-template-preview'>
+                    <img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
+                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.setExpandedView(undefined))}> 
+                        <FontAwesomeIcon icon='minimize'/>
+                    </button>
+                </div> 
+                :
+                <div>
+                    <div className='docCreatorMenu-section' style={{height: this._GPTOpt ? 200 : 200}}>
                         <div className='docCreatorMenu-section-topbar'>
                             <div className='docCreatorMenu-section-title'>Suggested Templates</div>
                             <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._menuContent = 'dashboard')}>
@@ -843,11 +858,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                         boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
                                     }}
                                     onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
-                                        <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate(info.doc)})}>
-                                            <FontAwesomeIcon icon='pencil' color='black'/>
+                                        <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.setExpandedView(info)})}>
+                                            <FontAwesomeIcon icon='pencil' color='white'/>
                                         </button>
                                         <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}>
-                                            <FontAwesomeIcon icon='plus' color='black'/>
+                                            <FontAwesomeIcon icon='plus' color='white'/>
                                         </button>
                                         <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
                                     </div>
@@ -893,8 +908,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
                             </div>
                         )})}
+                        </div>
                     </div>
                 </div>
+                }
             </div>
         );
     }
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 23dada260..7568e3b57 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -240,6 +240,12 @@
     }
 }
 
+.contentFittingDocumentView * {
+    ::-webkit-scrollbar-track {
+        background: none; 
+    }
+}
+
 .contentFittingDocumentView {
     position: relative;
     display: flex;
-- 
cgit v1.2.3-70-g09d2


From 8eabd90dde18afd453a8561af05ef784a13e9f85 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 8 Sep 2024 02:10:30 -0400
Subject: new menu css

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |   8 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     | 269 ++++++++++++++-------
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      |  99 +++++---
 3 files changed, 255 insertions(+), 121 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index d9a7d5e3a..b61650e43 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -412,10 +412,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             },
             { fireImmediately: true }
         );
-        this._disposers.contentSummary = reaction(
-            () => this.records,
-            () => this.updateGPTSummary()
-        );
+        // this._disposers.contentSummary = reaction(
+        //     () => this.records,
+        //     () => this.updateGPTSummary()
+        // );
     }
 
     fetchData = () => {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 857d76d4f..955698b19 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -292,6 +292,19 @@
     position: relative;
     width: 100%;
     height: 100%;
+
+    .right-buttons-panel {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        height: 100%;
+        width: 40px;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        padding: 5px;
+        gap: 2px;
+    }
 }
 
 .docCreatorMenu-preview-window {
@@ -435,12 +448,6 @@
     &.float-right {
         float: right;
     }
-
-    &.top-right {
-        position: absolute;
-        top: 3px;
-        right: 3px;
-    }
 }
 
 .docCreatorMenu-section-title {
@@ -754,7 +761,7 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    overflow-y: scroll;
+    overflow-y: hidden;
     //align-items: flex-start;
     margin: 5px;
     margin-top: 0px;
@@ -765,111 +772,193 @@
     -ms-overflow-style: none; 
     scrollbar-width: none;
 
+    .panels-container {
+        height: 100%;
+        width: 100%;
+        flex-direction: column;
+        justify-content: flex-start;
+        overflow-y: scroll;
+    }
+
     .topbar {
         height: 30px;
         width: 100%;
-    }
+        background-color: rgb(50, 50, 50);
+    }
+
+//     .field-panel {
+//         position: relative;
+//         display: flex;
+//         // align-items: flex-start;
+//         flex-direction: column;
+//         gap: 5px;
+//         padding: 5px;
+//         height: 100px;
+//         //width: 100%;
+//         border: 1px solid rgb(180, 180, 180);
+//         margin: 5px;
+//         margin-top: 0px;
+//         border-radius: 3px;
+//         flex: 0 0 auto;
+
+//         .properties-wrapper {
+//             display: flex;
+//             flex-direction: row;
+//             align-items: flex-start;
+//             gap: 5px;
+
+//             .field-property-container {
+//                 background-color: rgb(40, 40, 40);
+//                 border: 1px solid rgb(100, 100, 100);
+//                 border-radius: 3px;
+//                 width: 30%;
+//                 height: 25px;
+//                 padding-left: 3px;
+//                 align-items: center;
+//                 color: whitesmoke;
+//             }
+
+//             .field-type-selection-container {
+//                 display: flex;
+//                 flex-direction: row;
+//                 align-items: center;
+//                 background-color: rgb(40, 40, 40);
+//                 border: 1px solid rgb(100, 100, 100);
+//                 border-radius: 3px;
+//                 width: 31%;
+//                 height: 25px;
+//                 padding-left: 3px;
+//                 color: whitesmoke;
+
+//                 .placeholder {
+//                     color: gray;
+//                 }
+
+//                 &:hover .placeholder {
+//                     display: none;
+//                 }
+
+//                 .bubbles {
+//                     display: none;
+//                 }
+
+//                 .text {
+//                     margin-top: 5px;
+//                     margin-bottom: 5px;
+//                 }
+
+//                 &:hover .bubbles {
+//                     display: flex;
+//                     flex-direction: row;
+//                     align-items: flex-start;
+//                 }
+
+//                 &:hover .type-display {
+//                     display: none;
+//                 }
+
+//                 .bubble {
+//                     margin: 5px;
+//                 }
+
+//                 &:hover .bubble {
+//                     margin-top: 7px;
+//                 }
+//             }
+//         }
+
+//         .field-description-container {
+//             background-color: rgb(40, 40, 40);
+//             border: 1px solid rgb(100, 100, 100);
+//             border-radius: 3px;
+//             width: 100%;
+//             height: 100%;
+//             resize: none;
+
+//             ::-webkit-scrollbar-track {
+//                 background: none; 
+//             }
+//         }
+
+//         .top-right {
+//             position: absolute;
+//             top: 0px;
+//             right: 0px;
+//         }
+//     }
+// }
 
     .field-panel {
-        position: relative;
         display: flex;
-        // align-items: flex-start;
         flex-direction: column;
-        gap: 5px;
-        padding: 5px;
-        height: 100px;
-        //width: 100%;
+        align-items: center;
+        justify-content: flex-start;
+        height: 285px;
+        width: calc(100% - 10px);
         border: 1px solid rgb(180, 180, 180);
         margin: 5px;
         margin-top: 0px;
         border-radius: 3px;
         flex: 0 0 auto;
+        gap: 25px;
+        background-color: rgb(60, 60, 60);
 
-        .properties-wrapper {
+        .top-bar {
             display: flex;
             flex-direction: row;
-            align-items: flex-start;
-            gap: 5px;
-
-            .field-property-container {
-                background-color: rgb(40, 40, 40);
-                border: 1px solid rgb(100, 100, 100);
-                border-radius: 3px;
-                width: 30%;
-                height: 25px;
-                padding-left: 3px;
-                align-items: center;
-                color: whitesmoke;
-            }
-
-            .field-type-selection-container {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                background-color: rgb(40, 40, 40);
-                border: 1px solid rgb(100, 100, 100);
-                border-radius: 3px;
-                width: 31%;
-                height: 25px;
-                padding-left: 3px;
-                color: whitesmoke;
-
-                .placeholder {
-                    color: gray;
-                }
-
-                &:hover .placeholder {
-                    display: none;
-                }
-
-                .bubbles {
-                    display: none;
-                }
-
-                .text {
-                    margin-top: 5px;
-                    margin-bottom: 5px;
-                }
-
-                &:hover .bubbles {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: flex-start;
-                }
-
-                &:hover .type-display {
-                    display: none;
-                }
+            align-items: center;
+            justify-content: center;
+            border-bottom: 1px solid rgb(180, 180, 180);
+            border-top-right-radius: 5px;
+            border-top-left-radius: 5px;
+            width: 100%;
+            height: 20px;
+            background-color: rgb(50, 50, 50);
+        }  
+        
+        .opts-bar {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
 
-                .bubble {
-                    margin: 5px;
-                }
+            .opt-box {
+                border: 1px solid rgb(180, 180, 180);
+                border-radius: 5px;
+                width: 40%;
+                height: 50px;
+                margin-right: 4%;
+                margin-left: 4%;
+                box-shadow: 5px 5px rgb(29, 29, 31);
+            }
 
-                &:hover .bubble {
-                    margin-top: 7px;
-                }
+            .content {
+                height: calc(100% - 20px);
+                width: 100%;
+                background-color: rgb(50, 50, 50);
+                border-bottom-right-radius: 5px;
+                border-bottom-left-radius: 5px;
             }
         }
 
-        .field-description-container {
-            background-color: rgb(40, 40, 40);
-            border: 1px solid rgb(100, 100, 100);
-            border-radius: 3px;
-            width: 100%;
-            height: 100%;
-            resize: none;
-
-            ::-webkit-scrollbar-track {
-                background: none; 
-            }
+        .sizes-box {
+            width: 88%;
+            height: 60px;
+            border: 1px solid rgb(180, 180, 180);
+            border-radius: 5px;
+            background-color: rgb(50, 50, 50);
+            box-shadow: 5px 5px rgb(29, 29, 31);
         }
 
-        .top-right {
-            position: absolute;
-            top: 0px;
-            right: 0px;
+        .desc-box {
+            width: 88%;
+            height: 50px;
+            border: 1px solid rgb(180, 180, 180);
+            border-radius: 5px;
+            background-color: rgb(50, 50, 50);
+            box-shadow: 5px 5px rgb(29, 29, 31);
         }
     }
-}
-
 
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 953037d13..87e1e2c96 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -825,14 +825,20 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const GPTOptions = 
             <div></div>
 
+            //<img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
+
         return (
             <div className={`docCreatorMenu-templates-view`}>
                 {this._expandedPreview ? 
                 <div className='docCreatorMenu-expanded-template-preview'>
-                    <img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
-                    <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.setExpandedView(undefined))}> 
-                        <FontAwesomeIcon icon='minimize'/>
-                    </button>
+                    <div className='right-buttons-panel'>
+                        <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.setExpandedView(undefined))}> 
+                            <FontAwesomeIcon icon='minimize'/>
+                        </button>
+                        <button className='docCreatorMenu-menu-button section-reveal-options top-right-lower' onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._templateDocs.push(this._expandedPreview.doc))}>
+                            <FontAwesomeIcon icon='plus' color='white'/>
+                        </button>
+                    </div>
                 </div> 
                 :
                 <div>
@@ -859,8 +865,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                     }}
                                     onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
                                         <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.setExpandedView(info)})}>
-                                            <FontAwesomeIcon icon='pencil' color='white'/>
-                                        </button>
+                                            <FontAwesomeIcon icon='magnifying-glass' color='white'/>
+                                        </button>   
                                         <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}>
                                             <FontAwesomeIcon icon='plus' color='white'/>
                                         </button>
@@ -1184,34 +1190,73 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     <FontAwesomeIcon icon='arrow-left'/>
                 </button>
             </div>
-            {this.fieldsInfos.map((field, index) => 
-                <div className='field-panel' id={`${index}`}>
-                    <div className='properties-wrapper'>
-                        <input className='field-property-container' id={`${Math.random() * 100}`} defaultValue={field.title} placeholder={'Enter title'}  onChange={(e) => this.setColTitle(field, e.target.value)}/>
-                        <div className='field-type-selection-container'>
-                            {field.type === TemplateFieldType.UNSET ? <span className='placeholder'>Select media type</span> : null}
-                            <span className='type-display'>{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
-                            <div className='bubbles'>
-                                <input className='bubble' type="radio" name="type" onClick={() => {this.setColType(field, TemplateFieldType.TEXT)}}/> 
-                                <div className='text'>Text</div>
-                                <input className='bubble' type="radio" name="type" onClick={() => {this.setColType(field, TemplateFieldType.VISUAL)}}/> 
-                                <div className='text'>File</div>
+            <div className='panels-container'>
+                {/* {this.fieldsInfos.map((field, index) => 
+                    <div className='field-panel' id={`${index}`}>
+                        <div className='properties-wrapper'>
+                            <input className='field-property-container' id={`${Math.random() * 100}`} defaultValue={field.title} placeholder={'Enter title'}  onChange={(e) => this.setColTitle(field, e.target.value)}/>
+                            <div className='field-type-selection-container'>
+                                {field.type === TemplateFieldType.UNSET ? <span className='placeholder'>Select media type</span> : null}
+                                <span className='type-display'>{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
+                                <div className='bubbles'>
+                                    <input className='bubble' type="radio" name="type" onClick={() => {this.setColType(field, TemplateFieldType.TEXT)}}/> 
+                                    <div className='text'>Text</div>
+                                    <input className='bubble' type="radio" name="type" onClick={() => {this.setColType(field, TemplateFieldType.VISUAL)}}/> 
+                                    <div className='text'>File</div>
+                                </div>
                             </div>
+                            <input className='field-property-container' id={`${Math.random() * 100}`} placeholder={this._dataViz?.GPTSummary?.get(field.title)?.size} style={{width: field.title === '' ? '30%' : ''} } onChange={(e) => this.setColSize(field, e.target.value as TemplateFieldSize)}/>
+                        </div>
+                        <textarea className='field-description-container' onChange={(e) => this.setColDesc(field, 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'/>
+                            </button>
                         </div>
-                        <input className='field-property-container' id={`${Math.random() * 100}`} placeholder={this._dataViz?.GPTSummary?.get(field.title)?.size} style={{width: field.title === '' ? '30%' : ''} } onChange={(e) => this.setColSize(field, e.target.value as TemplateFieldSize)}/>
-                    </div>
-                    <textarea className='field-description-container' onChange={(e) => this.setColDesc(field, 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'/>
-                        </button>
                     </div>
-                </div>
-            )}
+                )} */}
+                {this.hello()}
+            </div>
         </div>
         );
     }
 
+    hello = () => {
+        return (
+            <div className='field-panel'> 
+                <div className='top-bar'>
+                    <button></button>
+                </div>
+                <div className='opts-bar'> 
+                    <div className='opt-box'>
+                        <div className='top-bar'> Title </div>
+                        <textarea className='content' style={{width: '100%', height: 'calc(100% - 20px)'}}>
+
+                        </textarea>
+                    </div>
+                    <div className='opt-box'>
+                        <div className='top-bar'> Type </div>
+                        <div className='content'>
+
+                        </div>
+                    </div>
+                </div>
+                <div className='sizes-box'>
+                    <div className='top-bar'> Valid Sizes </div>
+                    <div className='content'>
+
+                    </div>
+                </div>
+                <div className='desc-box'>
+                    <div className='top-bar'> Description </div>
+                    <div className='content'>
+
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
     get renderSelectedViewType(){
         switch (this._menuContent){
             case 'templates':
-- 
cgit v1.2.3-70-g09d2


From 8970a30cff99f9234617d7ec17067275dbfc7e43 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 8 Sep 2024 04:13:43 -0400
Subject: work on fields menu

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  67 ++++++++++++++
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 102 +++++++++------------
 2 files changed, 111 insertions(+), 58 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 955698b19..eaa32e62a 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -898,6 +898,7 @@
         border: 1px solid rgb(180, 180, 180);
         margin: 5px;
         margin-top: 0px;
+        margin-bottom: 10px;
         border-radius: 3px;
         flex: 0 0 auto;
         gap: 25px;
@@ -914,6 +915,7 @@
             width: 100%;
             height: 20px;
             background-color: rgb(50, 50, 50);
+            color: rgb(168, 167, 167);
         }  
         
         .opts-bar {
@@ -934,11 +936,38 @@
             }
 
             .content {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
                 height: calc(100% - 20px);
                 width: 100%;
                 background-color: rgb(50, 50, 50);
                 border-bottom-right-radius: 5px;
                 border-bottom-left-radius: 5px;
+                resize: none;
+
+                .bubbles {
+                    display: none;
+                }
+
+                .text {
+                    margin-right: 5px;
+                }
+
+                &:hover .bubbles {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: flex-start;
+                }
+        
+                &:hover .type-display {
+                    display: none;
+                }
+        
+                .bubble {
+                    margin: 3px;
+                }
             }
         }
 
@@ -949,6 +978,33 @@
             border-radius: 5px;
             background-color: rgb(50, 50, 50);
             box-shadow: 5px 5px rgb(29, 29, 31);
+
+            .content {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+                height: calc(100% - 20px);
+                width: 100%;
+                background-color: rgb(50, 50, 50);
+                border-bottom-right-radius: 5px;
+                border-bottom-left-radius: 5px;
+
+                .text {
+                    margin-right: 9px;
+                }
+
+                .bubbles {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                }
+        
+                .bubble {
+                    margin: 3px;
+                    margin-right: 4px;
+                }
+            }
         }
 
         .desc-box {
@@ -958,7 +1014,18 @@
             border-radius: 5px;
             background-color: rgb(50, 50, 50);
             box-shadow: 5px 5px rgb(29, 29, 31);
+
+            .content {
+                height: calc(100% - 20px);
+                width: 100%;
+                background-color: rgb(50, 50, 50);
+                border-bottom-right-radius: 5px;
+                border-bottom-left-radius: 5px;
+                resize: none;
+
+            }
         }
+
     }
 
 }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 87e1e2c96..a01b26036 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1179,24 +1179,24 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     get dashboardContents(){
+        const sizes: string[] = ['tiny', 'small', 'medium', 'large', 'huge'];
 
-        return (
-        <div className='docCreatorMenu-dashboard-view'>
-            <div className='topbar'>
-                <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
-                    <FontAwesomeIcon icon='plus'/>
-                </button>
-                <button className='docCreatorMenu-menu-button section-reveal-options float-right' onPointerDown={e => this.setUpButtonClick(e, () => this._menuContent = 'templates')}>
-                    <FontAwesomeIcon icon='arrow-left'/>
-                </button>
-            </div>
-            <div className='panels-container'>
-                {/* {this.fieldsInfos.map((field, index) => 
-                    <div className='field-panel' id={`${index}`}>
-                        <div className='properties-wrapper'>
-                            <input className='field-property-container' id={`${Math.random() * 100}`} defaultValue={field.title} placeholder={'Enter title'}  onChange={(e) => this.setColTitle(field, e.target.value)}/>
-                            <div className='field-type-selection-container'>
-                                {field.type === TemplateFieldType.UNSET ? <span className='placeholder'>Select media type</span> : null}
+        const fieldPanel = (field: Col) => {
+            return (
+                <div className='field-panel'> 
+                    <div className='top-bar'>
+                        <button className='docCreatorMenu-menu-button section-reveal-options float-right' onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
+                            <FontAwesomeIcon icon='minus'/>
+                        </button>
+                    </div>
+                    <div className='opts-bar'> 
+                        <div className='opt-box'>
+                            <div className='top-bar'> Title </div>
+                            <textarea className='content' style={{width: '100%', height: 'calc(100% - 20px)'}} defaultValue={field.title} placeholder={'Enter title'}  onChange={(e) => this.setColTitle(field, e.target.value)}/>
+                        </div>
+                        <div className='opt-box'>
+                            <div className='top-bar'> Type </div>
+                            <div className='content'>
                                 <span className='type-display'>{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
                                 <div className='bubbles'>
                                     <input className='bubble' type="radio" name="type" onClick={() => {this.setColType(field, TemplateFieldType.TEXT)}}/> 
@@ -1205,56 +1205,42 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                     <div className='text'>File</div>
                                 </div>
                             </div>
-                            <input className='field-property-container' id={`${Math.random() * 100}`} placeholder={this._dataViz?.GPTSummary?.get(field.title)?.size} style={{width: field.title === '' ? '30%' : ''} } onChange={(e) => this.setColSize(field, e.target.value as TemplateFieldSize)}/>
-                        </div>
-                        <textarea className='field-description-container' onChange={(e) => this.setColDesc(field, 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'/>
-                            </button>
                         </div>
                     </div>
-                )} */}
-                {this.hello()}
-            </div>
-        </div>
-        );
-    }
-
-    hello = () => {
-        return (
-            <div className='field-panel'> 
-                <div className='top-bar'>
-                    <button></button>
-                </div>
-                <div className='opts-bar'> 
-                    <div className='opt-box'>
-                        <div className='top-bar'> Title </div>
-                        <textarea className='content' style={{width: '100%', height: 'calc(100% - 20px)'}}>
-
-                        </textarea>
-                    </div>
-                    <div className='opt-box'>
-                        <div className='top-bar'> Type </div>
+                    <div className='sizes-box'>
+                        <div className='top-bar'> Valid Sizes </div>
                         <div className='content'>
-
+                            <div className='bubbles'>
+                                {sizes.map(size => <>
+                                    <input className='bubble' type="checkbox" name="type" onChange={() => {this.setColSize(field, size as TemplateFieldSize)}}/> 
+                                    <div className='text'>{size}</div>
+                                </>)}
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div className='sizes-box'>
-                    <div className='top-bar'> Valid Sizes </div>
-                    <div className='content'>
-
+                    <div className='desc-box'>
+                        <div className='top-bar'> Description </div>
+                        <textarea className='content' onChange={(e) => this.setColDesc(field, 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>
                 </div>
-                <div className='desc-box'>
-                    <div className='top-bar'> Description </div>
-                    <div className='content'>
+            )
+        }    
 
-                    </div>
-                </div>
+        return (
+        <div className='docCreatorMenu-dashboard-view'>
+            <div className='topbar'>
+                <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
+                    <FontAwesomeIcon icon='plus'/>
+                </button>
+                <button className='docCreatorMenu-menu-button section-reveal-options float-right' onPointerDown={e => this.setUpButtonClick(e, () => this._menuContent = 'templates')}>
+                    <FontAwesomeIcon icon='arrow-left'/>
+                </button>
             </div>
-        )
+            <div className='panels-container'>
+                {this.fieldsInfos.map(field => fieldPanel(field))}
+            </div>
+        </div>
+        );
     }
 
     get renderSelectedViewType(){
-- 
cgit v1.2.3-70-g09d2


From d4c3af196d8fc7355a9b78b78f17e4b44bd4f62b Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 8 Sep 2024 05:14:46 -0400
Subject: col size setting

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 34 ++++++++++++----------
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  5 ++++
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 29 ++++++++++--------
 3 files changed, 41 insertions(+), 27 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index b61650e43..0efe8ead0 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -161,17 +161,21 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         if (colInfo) { 
             colInfo.type = type;
         } else {
-            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: type, size: TemplateFieldSize.MEDIUM})
+            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: type, sizes: [TemplateFieldSize.MEDIUM]})
         }
         console.log(colInfo?.title, colInfo?.type)
     }
 
-    @action setColumnSize = (colTitle: string, size: TemplateFieldSize) => {
-        const colInfo = this.colsInfo.get(colTitle);
-        if (colInfo) { 
-            colInfo.size = size;
+    @action modifyColumnSizes = (colTitle: string, size: TemplateFieldSize, valid: boolean) => {
+        const column = this.colsInfo.get(colTitle);
+        if (column) { 
+            if (!valid && column.sizes.includes(size)) {
+                column.sizes.splice(column.sizes.indexOf(size), 1);
+            } else if (valid && !column.sizes.includes(size)) {
+                column.sizes.push(size);
+            }
         } else {
-            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: TemplateFieldType.UNSET, size: size})
+            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: TemplateFieldType.UNSET, sizes: [size]})
         }
     }
 
@@ -180,7 +184,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         if (colInfo) { 
             colInfo.title = newTitle;
         } else {
-            this.colsInfo.set(colTitle, {title: newTitle, desc: '', type: TemplateFieldType.UNSET, size: TemplateFieldSize.MEDIUM})
+            this.colsInfo.set(colTitle, {title: newTitle, desc: '', type: TemplateFieldType.UNSET, sizes: [TemplateFieldSize.MEDIUM]})
         }
     }
 
@@ -190,7 +194,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             if (!desc) { colInfo.desc = this.GPTSummary?.get(colTitle)?.desc ?? ''; } 
             else { colInfo.desc = desc; }
         } else {
-            this.colsInfo.set(colTitle, {title: colTitle, desc: desc, type: TemplateFieldType.UNSET, size: TemplateFieldSize.MEDIUM})
+            this.colsInfo.set(colTitle, {title: colTitle, desc: desc, type: TemplateFieldType.UNSET, sizes: [TemplateFieldSize.MEDIUM]})
         }
     }
 
@@ -199,7 +203,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         if (colInfo) {
             colInfo.defaultContent = cont;
         } else {
-            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: TemplateFieldType.UNSET, size: TemplateFieldSize.MEDIUM, defaultContent: cont})
+            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: TemplateFieldType.UNSET, sizes: [TemplateFieldSize.MEDIUM], defaultContent: cont})
         }
     }
 
@@ -412,10 +416,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             },
             { fireImmediately: true }
         );
-        // this._disposers.contentSummary = reaction(
-        //     () => this.records,
-        //     () => this.updateGPTSummary()
-        // );
+        this._disposers.contentSummary = reaction(
+            () => this.records,
+            () => this.updateGPTSummary()
+        );
     }
 
     fetchData = () => {
@@ -593,7 +597,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
         const cols = Array.from(Object.keys(this.records[0])).filter(header => header !== '' && header !== undefined);
         cols.forEach(col => {
-            if (!this.colsInfo.get(col)) this.colsInfo.set(col, {title: col, desc: '', size: TemplateFieldSize.MEDIUM, type: TemplateFieldType.UNSET});
+            if (!this.colsInfo.get(col)) this.colsInfo.set(col, {title: col, desc: '', sizes: [TemplateFieldSize.MEDIUM], type: TemplateFieldType.UNSET});
         });
 
         try {
@@ -622,7 +626,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         colSummary.size = val.size;
                         colSummary.type = val.type;
                         this.setColumnType(key, val.type);
-                        this.setColumnSize(key, val.size);
+                        this.modifyColumnSizes(key, val.size, true);
                     }
                 }
             }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index eaa32e62a..9d82ada37 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -905,6 +905,7 @@
         background-color: rgb(60, 60, 60);
 
         .top-bar {
+            position: relative;
             display: flex;
             flex-direction: row;
             align-items: center;
@@ -916,6 +917,10 @@
             height: 20px;
             background-color: rgb(50, 50, 50);
             color: rgb(168, 167, 167);
+
+            .field-title {
+                color: whitesmoke;
+            }
         }  
         
         .opts-bar {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index a01b26036..8f7bf8713 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -146,7 +146,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 title: field,
                 type: fieldInfo?.type ?? TemplateFieldType.UNSET,
                 desc: fieldInfo?.desc ?? '',
-                size: fieldInfo?.size ?? TemplateFieldSize.MEDIUM
+                sizes: fieldInfo?.sizes ?? [TemplateFieldSize.MEDIUM]
             };
 
             if (fieldInfo?.defaultContent !== undefined) {
@@ -454,7 +454,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     @action addField = () => {
-        const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.UNSET, desc: '', size: TemplateFieldSize.MEDIUM}])
+        const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.UNSET, desc: '', sizes: [TemplateFieldSize.MEDIUM]}])
         this._columns = newFields;
     };
 
@@ -497,13 +497,17 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this.forceUpdate();
     };
 
-    setColSize = (column: Col, size: TemplateFieldSize) => {
+    modifyColSizes = (column: Col, size: TemplateFieldSize, valid: boolean) => {
         if (this.selectedFields.includes(column.title)) {
-            this._dataViz?.setColumnSize(column.title, size);
+            this._dataViz?.modifyColumnSizes(column.title, size, valid);
         } else {
-            column.size = size;
-            console.log(column.size)
+            if (!valid && column.sizes.includes(size)) {
+                column.sizes.splice(column.sizes.indexOf(size), 1);
+            } else if (valid && !column.sizes.includes(size)) {
+                column.sizes.push(size);
+            }
         }
+        console.log(column.sizes)
         this.forceUpdate();
     };
 
@@ -517,7 +521,7 @@ 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 colMatchesField = (col: Col, field : Field) => { return field.sizes?.some(size => col.sizes?.includes(size)) && field.types?.includes(col.type) };
 
         const matches: number[][] = Array(template.fields.length).fill([]).map(() => []);
 
@@ -630,7 +634,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const stringifyGPTInfo = (): string => {
             let string: string = '*** COLUMN INFO:';
             GPTAssignments.forEach(([fieldNum, col]) => {
-                string += `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.size)} words, assigned field: ${fieldNum} ---`
+                string += `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.sizes[0])} words, assigned field: ${fieldNum} ---`
             });
             return string += ' ***';
         };
@@ -747,7 +751,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     compileColDescriptions = (cols: Col[]): string =>  {
         let descriptions: string = ' ------------- COL DESCRIPTIONS START HERE:';
-        cols.forEach(col => descriptions += `{title: ${col.title}, size: ${col.size}, type: ${col.type}, descreiption: ${col.desc}} `);
+        cols.forEach(col => descriptions += `{title: ${col.title}, sizes: ${String(col.sizes)}, type: ${col.type}, descreiption: ${col.desc}} `);
 
         return descriptions;
     };
@@ -1185,7 +1189,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             return (
                 <div className='field-panel'> 
                     <div className='top-bar'>
-                        <button className='docCreatorMenu-menu-button section-reveal-options float-right' onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
+                        <span className='field-title'>{`${field.title} Field`}</span>
+                        <button className='docCreatorMenu-menu-button section-reveal-options no-margin' onPointerDown={e => this.setUpButtonClick(e, this.addField)} style={{position: 'absolute', right: '0px'}}>
                             <FontAwesomeIcon icon='minus'/>
                         </button>
                     </div>
@@ -1212,7 +1217,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                         <div className='content'>
                             <div className='bubbles'>
                                 {sizes.map(size => <>
-                                    <input className='bubble' type="checkbox" name="type" onChange={() => {this.setColSize(field, size as TemplateFieldSize)}}/> 
+                                    <input className='bubble' type="checkbox" name="type" checked={field.sizes.includes(size as TemplateFieldSize)} onChange={(e) => {this.modifyColSizes(field, size as TemplateFieldSize, e.target.checked)}}/> 
                                     <div className='text'>{size}</div>
                                 </>)}
                             </div>
@@ -1383,7 +1388,7 @@ export enum TemplateFieldSize {
 
 
 export type Col = {
-    size: TemplateFieldSize;
+    sizes: TemplateFieldSize[];
     desc: string;
     title: string;
     type: TemplateFieldType;
-- 
cgit v1.2.3-70-g09d2


From 984a470094399e4bbd74ddb7daa3e6f08a0a4793 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 8 Sep 2024 17:44:11 -0400
Subject: image generation working!

---
 src/client/apis/gpt/GPT.ts                         |   6 +-
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |  15 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 193 ++++++++++++++-------
 3 files changed, 142 insertions(+), 72 deletions(-)

(limited to 'src')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index f1d5ab533..ec3a349fc 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -15,7 +15,8 @@ enum GPTCallType {
     TEMPLATE = "template",
     VIZSUM = 'vizsum',
     VIZSUM2 = 'vizsum2',
-    FILL = 'fill'
+    FILL = 'fill',
+    COMPLETEPROMPT = 'completeprompt'
 }
 
 type GPTCallOpts = {
@@ -60,7 +61,8 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
     template: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'You will be given a list of field descriptions for multiple templates in the format {field #0: “description”}{field #1: “description”}{...}, and a list of column descriptions in the format {“title”: “description”}{...}. Your job is to match columns with fields based on their descriptions. Your output should be in the following JSON format: {“Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}, “Template title”:{“#”: “title”, “#”: “title”, “#”: “title” …}} where “Template title” represents the template,  # represents the field # and “title” the title of the column assigned to it. A filled out example might look like {“fivefield2”:{“0”:”Name”, “1”:”Image”, “2”:”Caption”, “3”:”Position”, “4”:”Stats”}, “fivefield3”:{0:”Image”, 1:”Name”, 2:”Caption”, 3:”Stats”, 4:”Position”}. Include one object for each template. IT IS VERY IMPORTANT THAT YOU ONLY INCLUDE TEXT IN THE FORMAT ABOVE, WITH NO ADDITIONS WHATSOEVER. Do not include extraneous ‘#’ characters, ‘column’ for columns, or ‘template’ for templates: ONLY THE TITLES AND NUMBERS. There should never be one column assigned to more than one field (ie. if the “name” column is assigned to field 1, it can’t be assigned to any other fields) . Do this for each template whose fields are described. The descriptions are as follows:' },
     vizsum: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide brief descriptions for columns in a dataset based on example rows. Your descriptions should be geared towards how each column’s data might fit together into a visual template. Would they make good titles, main focuses, captions, descriptions, etc. Pay special attention to connections between columns, i.e. is there one column that specifically seems to describe/be related to another more than the rest? You should provide your analysis in JSON format like so: {“col1”:”description”, “col2”:”description”, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'},
     vizsum2: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to provide structured information on columns in a dataset based on example rows. You will categorize each column in two ways: by type and size. The size categories are as follows: tiny (one or two words), small (a sentence/multiple words), medium (a few sentences), large (a longer paragraph), and huge (a very long or multiple paragraphs). The type categories are as follows: visual (links/file paths to images, pdfs, maps, or any other visual media type), and text (plain text that isn’t a link/file path). Visual media should be assumed to have size “medium” “large” or “huge”. You will give your responses in JSON format, like so: {“title (of column)”:{“type”:”text”, “size”:”small”}, “title (of column)”:{“type”:”visual”, “size”:”medium”}, …}. DO NOT INCLUDE ANY OTHER TEXT, ONLY THE JSON.'},
-    fill: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to generate content for fields based on a user prompt and background context given to you. You will be given the content of the other fields present in the format: ---- Field # (field title): content ---- Field # (field title): content ----- (etc.) You will be given info on the columns to generate for in the format ---- title: , prompt: , word limit: , assigned field: ----. For each column, based on the prompt, word limit, and the context of existing fields, you should generate a short response in the following JSON format: {“___”(where ___ is the title from the column description with no additions): {“number”:”#” (where # is the assigned field of the column), “content”:”response” (where response is your response to the prompt in the column info)}}. Here’s another example of the format with only one column: {“position”: {“number”:”2”, “content”:”*your response goes here*”}}. ONLY INCLUDE THE JSON TEXT WITH NO OTHER ADDED TEXT. YOUR RESPONSE MUST BE VALID JSON. The word limit for each column applies only to that column’s response. Do not include speculation or information that you can’t glean from your factual knowledge or the content of the other fields (no description of images you can’t see, for example). You should include one object per column you are provided info on.'}
+    fill: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your job is to generate content for fields based on a user prompt and background context given to you. You will be given the content of the other fields present in the format: ---- Field # (field title): content ---- Field # (field title): content ----- (etc.) You will be given info on the columns to generate for in the format ---- title: , prompt: , word limit: , assigned field: ----. For each column, based on the prompt, word limit, and the context of existing fields, you should generate a short response in the following JSON format: {“___”(where ___ is the title from the column description with no additions): {“number”:”#” (where # is the assigned field of the column), “content”:”response” (where response is your response to the prompt in the column info)}}. Here’s another example of the format with only one column: {“position”: {“number”:”2”, “content”:”*your response goes here*”}}. ONLY INCLUDE THE JSON TEXT WITH NO OTHER ADDED TEXT. YOUR RESPONSE MUST BE VALID JSON. The word limit for each column applies only to that column’s response. Do not include speculation or information that you can’t glean from your factual knowledge or the content of the other fields (no description of images you can’t see, for example). You should include one object per column you are provided info on.'},
+    completeprompt: {model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Your prompt is as follows:'},
 };
 let lastCall = '';
 let lastResp = '';
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 0efe8ead0..0e3b602d6 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -157,13 +157,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action setColumnType = (colTitle: string, type: TemplateFieldType) => {
         const colInfo = this.colsInfo.get(colTitle);
-        console.log(colInfo)
         if (colInfo) { 
             colInfo.type = type;
         } else {
             this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: type, sizes: [TemplateFieldSize.MEDIUM]})
         }
-        console.log(colInfo?.title, colInfo?.type)
     }
 
     @action modifyColumnSizes = (colTitle: string, size: TemplateFieldSize, valid: boolean) => {
@@ -183,8 +181,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const colInfo = this.colsInfo.get(colTitle);
         if (colInfo) { 
             colInfo.title = newTitle;
+            console.log(colInfo.title)
         } else {
-            this.colsInfo.set(colTitle, {title: newTitle, desc: '', type: TemplateFieldType.UNSET, sizes: [TemplateFieldSize.MEDIUM]})
+            this.colsInfo.set(colTitle, {title: newTitle, desc: '', type: TemplateFieldType.UNSET, sizes: []})
         }
     }
 
@@ -194,7 +193,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             if (!desc) { colInfo.desc = this.GPTSummary?.get(colTitle)?.desc ?? ''; } 
             else { colInfo.desc = desc; }
         } else {
-            this.colsInfo.set(colTitle, {title: colTitle, desc: desc, type: TemplateFieldType.UNSET, sizes: [TemplateFieldSize.MEDIUM]})
+            this.colsInfo.set(colTitle, {title: colTitle, desc: desc, type: TemplateFieldType.UNSET, sizes: []})
         }
     }
 
@@ -203,7 +202,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         if (colInfo) {
             colInfo.defaultContent = cont;
         } else {
-            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: TemplateFieldType.UNSET, sizes: [TemplateFieldSize.MEDIUM], defaultContent: cont})
+            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: TemplateFieldType.UNSET, sizes: [], defaultContent: cont})
         }
     }
 
@@ -593,11 +592,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
         const prompt = this.getColSummary();
 
-        console.log(prompt)
-
         const cols = Array.from(Object.keys(this.records[0])).filter(header => header !== '' && header !== undefined);
         cols.forEach(col => {
-            if (!this.colsInfo.get(col)) this.colsInfo.set(col, {title: col, desc: '', sizes: [TemplateFieldSize.MEDIUM], type: TemplateFieldType.UNSET});
+            if (!this.colsInfo.get(col)) this.colsInfo.set(col, {title: col, desc: '', sizes: [], type: TemplateFieldType.UNSET});
         });
 
         try {
@@ -607,7 +604,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             ]);
         
             if (res1) {
-                console.log(res1);
                 this.GPTSummary = new ObservableMap();
                 const descs: { [col: string]: string } = JSON.parse(res1);
                 for (const [key, val] of Object.entries(descs)) {
@@ -619,7 +615,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             if (res2) {
                 !this.GPTSummary && (this.GPTSummary = new ObservableMap());
                 const info: { [col: string]: { type: TemplateFieldType, size: TemplateFieldSize } } = JSON.parse(res2);
-                console.log(info);
                 for (const [key, val] of Object.entries(info)) {
                     const colSummary = this.GPTSummary.get(key);
                     if (colSummary) {
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 8f7bf8713..dcdd52c73 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { returnAll, returnFalse, returnNone, returnOne, returnZero, setupMoveUpEvents } from '../../../../ClientUtils';
+import { ClientUtils, returnAll, returnFalse, returnNone, returnOne, returnZero, setupMoveUpEvents } from '../../../../ClientUtils';
 import { Doc, NumListCast, StrListCast } from '../../../../fields/Doc';
 import { DocCast, ImageCast, ScriptCast, StrCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
@@ -17,7 +17,7 @@ import { Id } from '../../../../fields/FieldSymbols';
 import { Colors, IconButton, Size } from 'browndash-components';
 import { MakeTemplate } from '../../../util/DropConverter';
 import { DragManager } from '../../../util/DragManager';
-import { GPTCallType, gptAPICall } from '../../../apis/gpt/GPT';
+import { GPTCallType, gptAPICall, gptImageCall } from '../../../apis/gpt/GPT';
 import { CollectionFreeFormView } from '../../collections/collectionFreeForm/CollectionFreeFormView';
 import { Docs } from '../../../documents/Documents';
 import { OpenWhere } from '../OpenWhere';
@@ -32,6 +32,7 @@ import { ImageBox } from '../ImageBox';
 import { a } from '@react-spring/web';
 import { RichTextMenu } from '../formattedText/RichTextMenu';
 import e from 'cors';
+import { Networking } from '../../../Network';
 
 export enum LayoutType {
     Stacked = 'stacked', 
@@ -423,7 +424,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
 
 
-    testTemplate = () => { 
+    testTemplate = async() => { 
         // const temp = TemplateLayouts.FourField001;
         // const title: Doc = FieldFuncs.TextField({tl: temp.fields[0].tl, br: temp.fields[0].br}, temp.height, temp.width, 'title', 'Title', {backgroundColor: 'transparent'});
         // const image: Doc = FieldFuncs.ImageField({tl: temp.fields[1].tl, br: temp.fields[1].br}, temp.height, temp.width, 'title', '', {borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10, rotation: 40});
@@ -450,11 +451,22 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         // console.log(this._dataViz?.colsInfo.get("IMG")?.size, this._dataViz?.colsInfo.get("IMG")?.type)
         // console.log(this.fieldsInfos)
 
+        try {
+            const res = await gptImageCall('Image of panda eating a cookie');
+
+            if (res){
+                const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
+
+                console.log(result);
+            }
+        } catch (e) {
+            console.log(e);
+        }
         
     };
 
     @action addField = () => {
-        const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.UNSET, desc: '', sizes: [TemplateFieldSize.MEDIUM]}])
+        const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.UNSET, desc: '', sizes: []}])
         this._columns = newFields;
     };
 
@@ -479,7 +491,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }   
     };
 
-    setColTitle = (column: Col, title: string) => {
+    @action setColTitle = (column: Col, title: string) => {
         if (this.selectedFields.includes(column.title)) {
             this._dataViz?.setColumnTitle(column.title, title);
         } else {
@@ -488,7 +500,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this.forceUpdate();
     };
 
-    setColType = (column: Col, type: TemplateFieldType) => {
+    @action setColType = (column: Col, type: TemplateFieldType) => {
         if (this.selectedFields.includes(column.title)) {
             this._dataViz?.setColumnType(column.title, type);
         } else {
@@ -507,7 +519,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 column.sizes.push(size);
             }
         }
-        console.log(column.sizes)
         this.forceUpdate();
     };
 
@@ -520,6 +531,22 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this.forceUpdate();
     };
 
+    generateGPTImage = async(prompt: string): Promise<string | undefined> => {
+        console.log(prompt)
+
+        try {
+            const res = await gptImageCall(prompt);
+
+            if (res){
+                const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
+                const source = ClientUtils.prepend(result[0].accessPaths.agnostic.client);
+                return source;
+            }
+        } catch (e) {
+            console.log(e);
+        }
+    }
+
     matchesForTemplate = (template: TemplateDocInfos, cols: Col[]): number[][] => {
         const colMatchesField = (col: Col, field : Field) => { return field.sizes?.some(size => col.sizes?.includes(size)) && field.types?.includes(col.type) };
 
@@ -539,13 +566,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     maxMatches = (fieldsCt: number, matches: number[][]) => {
         const used: boolean[] = Array(fieldsCt).fill(false);
         const mt: number[] = Array(fieldsCt).fill(-1);
-        console.log(fieldsCt, matches)
 
         const augmentingPath = (v: number): boolean => {
             if (used[v]) return false;
             used[v] = true;
             for (const to of matches[v]) {
-                console.log(mt[to]);
                 if (mt[to] === -1 || augmentingPath(mt[to])) {
                     mt[to] = v;
                     return true;
@@ -582,7 +607,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         validTemplates = validTemplates.map(title => TemplateLayouts.fieldByTitle(title));
 
-        console.log(validTemplates);
         return validTemplates;
     };
 
@@ -626,20 +650,105 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             }
         }
 
+        const renderTextCalls = async(): Promise<Doc[]> => {
+            const rendered: Doc[] = [];
+
+            if (GPTTextCalls.length) {
+
+                try {
+                    const prompt = fieldContent + GPTTextAssignment;
+    
+                    const res = await gptAPICall(prompt, GPTCallType.FILL);
+    
+                    if (res){
+    
+                        const assignments: {[title: string]: {number: string, content: string}} = JSON.parse(res);
+                        //console.log('assignments', GPTAssignments, 'assignment string', GPTAssignmentString, 'field content', fieldContent, 'response', res, 'assignments', assignments);
+                        Object.entries(assignments).forEach(([title, info]) => {
+                            const field: Field = template.fields[Number(info.number)];
+                            const col = this.getColByTitle(title);
+    
+                            const doc = FieldFuncs.TextField({
+                                tl: field.tl, 
+                                br: field.br }, 
+                                template.height, 
+                                template.width, 
+                                col.title, 
+                                info.content ?? '', 
+                                field.opts
+                            );
+    
+                            rendered.push(doc);
+                        });
+    
+                    }
+                } catch(err) {
+                    console.log(err);
+                }
+            }
+
+            return rendered;
+        };
+
+        const createGeneratedImage = async(fieldNum: string, col: Col, prompt: string) => {
+            const url = await this.generateGPTImage(prompt);
+            const field: Field = template.fields[Number(fieldNum)];
+            const doc = FieldFuncs.ImageField({
+                tl: field.tl, 
+                br: field.br }, 
+                template.height, 
+                template.width, 
+                col.title, 
+                url ?? '', 
+                field.opts
+            );
+
+            return doc;
+        }
+
+        const renderImageCalls = async(): Promise<Doc[]> => {
+            const rendered: Doc[] = [];
+            const calls = GPTIMGCalls;
+
+            if (calls.length) {
+                try {
+                    const renderedImages: Doc[] = await Promise.all(
+                        calls.map(async ([fieldNum, col]) => {
+                            const sysPrompt = 'Your job is to create a prompt for an AI image generator to help it generate an image based on existing content in a template and a user prompt. ONLY INCLUDE THE PROMPT, NO OTHER TEXT OR EXPLANATION. The existing content is as follows: ' + fieldContent + ' **** The user prompt is: ' + col.desc;
+                            
+                            const prompt = await gptAPICall(sysPrompt, GPTCallType.COMPLETEPROMPT);
+                            console.log(sysPrompt, prompt);
+                            
+                            return createGeneratedImage(fieldNum, col, prompt);
+                        })
+                    );
+                
+                    const renderedTemplates: Doc[] = await Promise.all(renderedImages);
+                    renderedTemplates.forEach(doc => rendered.push(doc));
+                } catch (e){
+                    console.log(e);
+                }
+            }
+
+            return rendered;
+        }
+
         const fields: Doc[] = [];
 
         const GPTAssignments = Object.entries(assignments).filter(([f, col]) => this._columns.includes(col));
         const nonGPTAssignments: [string, Col][] = Object.entries(assignments).filter(a => !GPTAssignments.includes(a));
+        const GPTTextCalls = GPTAssignments.filter(([str, col]) => col.type === TemplateFieldType.TEXT);
+        const GPTIMGCalls = GPTAssignments.filter(([str, col]) => col.type === TemplateFieldType.VISUAL);
 
-        const stringifyGPTInfo = (): string => {
+        const stringifyGPTInfo = (calls: [string, Col][]): string => {
             let string: string = '*** COLUMN INFO:';
-            GPTAssignments.forEach(([fieldNum, col]) => {
+            calls.forEach(([fieldNum, col]) => {
                 string += `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.sizes[0])} words, assigned field: ${fieldNum} ---`
             });
             return string += ' ***';
         };
 
-        const GPTAssignmentString = stringifyGPTInfo();
+        const GPTTextAssignment = stringifyGPTInfo(GPTTextCalls);
 
         let fieldContent: string = '';
 
@@ -695,47 +804,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             return main;
         }
 
-        if (GPTAssignments.length) {
-            
-            try {
-                const prompt = fieldContent + GPTAssignmentString;
-
-                const res = await gptAPICall(prompt, GPTCallType.FILL);
-
-                if (res){
-                    console.log('response', res);
-
-                    const assignments: {[title: string]: {number: string, content: string}} = JSON.parse(res);
-                    console.log('assignments', GPTAssignments, 'assignment string', GPTAssignmentString, 'field content', fieldContent, 'response', res, 'assignments', assignments);
-                    Object.entries(assignments).forEach(([title, info]) => {
-                        const field: Field = template.fields[Number(info.number)];
-                        const col = this.getColByTitle(title);
-
-                        const doc = (col.type === TemplateFieldType.VISUAL ? FieldFuncs.ImageField : FieldFuncs.TextField)({
-                            tl: field.tl, 
-                            br: field.br }, 
-                            template.height, 
-                            template.width, 
-                            col.title, 
-                            info.content ?? '', 
-                            field.opts
-                        );
-
-                        fields.push(doc);
-                    });
-
-                    return createMainDoc();
-                }
-            } catch(err) {
-                console.log(err);
-            }
-            
-        } else {
-            return createMainDoc();
-        }
+        const textCalls = await renderTextCalls();
+        const imageCalls = await renderImageCalls();
 
-        return new Doc;
-    };
+        textCalls.forEach(doc => {fields.push(doc)});
+        imageCalls.forEach(doc => {fields.push(doc)});
+
+        return createMainDoc();
+    }
 
     compileFieldDescriptions = (templates: TemplateDocInfos[]): string => {
         let descriptions: string = '';
@@ -765,7 +841,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const inputText = fieldDescriptions.concat(colDescriptions);
 
-        console.log(inputText);
         ++this._callCount;
         const origCount = this._callCount;
 
@@ -779,14 +854,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             if (res && this._callCount === origCount) {
                 this._GPTLoading = false;
 
-                console.log(res);
-
                 const assignments: {[templateTitle: string]: {[field: string]: string}} = JSON.parse(res);
                 const brokenDownAssignments: [TemplateDocInfos, {[field: number]: Col}][] = [];
+
                 Object.entries(assignments).forEach(([tempTitle, assignment]) => {
                     const template = TemplateLayouts.fieldByTitle(tempTitle);
                     if (!template) return;
-                    console.log(assignments)
                     const toObj = Object.entries(assignment).reduce((a, [fieldNum, colTitle]) => {
                         a[Number(fieldNum)] = this.getColByTitle(colTitle);
                         return a;
@@ -849,7 +922,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     <div className='docCreatorMenu-section' style={{height: this._GPTOpt ? 200 : 200}}>
                         <div className='docCreatorMenu-section-topbar'>
                             <div className='docCreatorMenu-section-title'>Suggested Templates</div>
-                            <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._menuContent = 'dashboard')}>
+                            <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._menuContent = 'dashboard'))}>
                                 <FontAwesomeIcon icon='gear'/>
                             </button>
                         </div>
@@ -1197,7 +1270,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     <div className='opts-bar'> 
                         <div className='opt-box'>
                             <div className='top-bar'> Title </div>
-                            <textarea className='content' style={{width: '100%', height: 'calc(100% - 20px)'}} defaultValue={field.title} placeholder={'Enter title'}  onChange={(e) => this.setColTitle(field, e.target.value)}/>
+                            <textarea className='content' style={{width: '100%', height: 'calc(100% - 20px)'}} defaultValue={field.title} placeholder={'Enter title'} onChange={(e) => this.setColTitle(field, e.target.value)}/>
                         </div>
                         <div className='opt-box'>
                             <div className='top-bar'> Type </div>
@@ -1237,7 +1310,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
                     <FontAwesomeIcon icon='plus'/>
                 </button>
-                <button className='docCreatorMenu-menu-button section-reveal-options float-right' onPointerDown={e => this.setUpButtonClick(e, () => this._menuContent = 'templates')}>
+                <button className='docCreatorMenu-menu-button section-reveal-options float-right' onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._menuContent = 'templates'))}>
                     <FontAwesomeIcon icon='arrow-left'/>
                 </button>
             </div>
-- 
cgit v1.2.3-70-g09d2


From e7235baa7ed998908dec8bf48e4c244594aa76bb Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 8 Sep 2024 18:42:12 -0400
Subject: schema changes reverted

---
 .../collectionSchema/CollectionSchemaView.tsx      |   3 +-
 .../collectionSchema/SchemaCellField.tsx           | 123 +--------------------
 .../collectionSchema/SchemaColumnHeader.tsx        |   2 +-
 .../collections/collectionSchema/SchemaRowBox.tsx  |   5 +-
 .../collectionSchema/SchemaTableCell.tsx           |   2 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      |   9 +-
 .../views/nodes/formattedText/FormattedTextBox.tsx |   2 +-
 7 files changed, 16 insertions(+), 130 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 12c342b9f..59ccec71f 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -46,7 +46,6 @@ import { SchemaCellField } from './SchemaCellField';
 import { threadId } from 'worker_threads';
 import { FontIconBox } from '../../nodes/FontIconBox/FontIconBox';
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
 export const FInfotoColType: { [key: string]: ColumnType } = {
@@ -1539,4 +1538,4 @@ class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsP
             </div>
         );
     }
-}
+}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 3be9167fe..e1059b8fc 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -8,15 +8,6 @@ import { FieldView, FieldViewProps } from "../../nodes/FieldView";
 import { ObjectField } from "../../../../fields/ObjectField";
 import { Doc } from "../../../../fields/Doc";
 import { DocumentView } from "../../nodes/DocumentView";
-import { date } from "serializr";
-import { createRoot } from "react-dom/client";
-import DatePicker from "react-datepicker";
-import { emptyFunction } from "../../../../Utils";
-import { DateField } from "../../../../fields/DateField";
-
-enum EleType {
-    plainText, fieldReference, date, boolean
-}
 
 export interface SchemaCellFieldProps {
     contents: any;
@@ -43,7 +34,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     @observable _displayedContent = '';
     @observable _inCellSelectMode: boolean = false;
     @observable _dependencyMessageShown: boolean = false;
-    @observable _displayedElements: JSX.Element[] = [];
 
     constructor(props: SchemaCellFieldProps) {
         super(props);
@@ -126,32 +116,12 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this.finalizeEdit(false, true, false);
     }
 
-    // addReactComponents = () => {
-    //     if (!this._inputref) return;
-
-    //     const dateRefs = Array.from(this._inputref.querySelectorAll('.date-placeholder'));
-
-    //     dateRefs.forEach(ref => {
-    //         const root = createRoot(ref);
-    //         root.render(<DatePicker dateFormat="Pp" selected={new Date} onChange={emptyFunction} />);
-    //     })
-    // }
-
-    generateSpan = (text: string, cell: HTMLDivElement | undefined): JSX.Element => {
+    generateSpan = (text: string, cell: HTMLDivElement | undefined) => {
         const selfRef = text === this.selfRefPattern;
-        const color: string | undefined = cell?.style.borderTop.replace('2px solid', '');
-        return (
-            <span style={{
-                textDecoration: selfRef ? 'underline' : 'none', 
-                textDecorationColor: 'red', 
-                color: selfRef ? 'gray' : color}}>
-                {text}
-            </span>
-        );
+        return `<span style="text-decoration: ${selfRef ? 'underline' : 'none'}; text-decoration-color: red; color: ${selfRef ? 'gray' : cell?.style.borderTop.replace('2px solid', '')}">${text}</span>`;
     }
 
     makeSpans = (content: string) => {
-        const spans: JSX.Element[] = [];
         let chunkedText = content;
 
         const pattern = /(this|d(\d+))\.(\w+)/g;
@@ -170,93 +140,17 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
         let matchNum = 0;
         matches.forEach((match: string) => {
-            chunkedText = chunkedText.replace(match, '');
-            spans.push(this.generateSpan(match, cells.get(match)));
+            chunkedText = chunkedText.replace(match, this.generateSpan(match, cells.get(match)));
             ++matchNum;
         })
 
-        chunkedText = chunkedText.replace(/{{date}}/g, `<span class="date-placeholder">placeholder text</span>`);
-
         return chunkedText;
     }
 
-    verifyCellRef = (text: string): [string, HTMLDivElement | undefined] | undefined => {
-        const pattern = /(this|d(\d+))\.(\w+)/g;
-        let matchedText: string = '';
-        let matchedCell: HTMLDivElement | undefined = undefined; 
-        let match: RegExpExecArray | null;
-
-        while ((match = pattern.exec(text)) !== null) {
-            const cells = this._props.getCells(match[0]);
-            if (cells.length) {
-                matchedText = match[0];
-                matchedCell = cells[0];
-            }
-        }
-
-        if (!matchedText && !matchedCell) return undefined;
-        else return [matchedText, matchedCell];
-    }
-
-    elementsFromText = (chunks: string[]): JSX.Element[] => {
-        const eles: any[] = [];
-
-        chunks.forEach(text => {
-            const cellRef = this.verifyCellRef(text);
-            if (cellRef) {
-                eles.push(this.generateSpan(cellRef[0], cellRef[1]));
-            } else if (text && !text.replace('{{date}}', '')){
-                eles.push(<DatePicker dateFormat="Pp" selected={new Date()} onChange={emptyFunction} />);
-            } else if (text && !text.replace('{{boolean}}', '')) {
-                eles.push(<span>boolean thing</span>);
-            } else {
-                eles.push(<span>{text}</span>);
-            }
-        });
-
-        return eles;
-    }
-
-    parseElements = (content: string) => {
-        let string: string = content;
-        if (string.startsWith(':')) string = string.slice(1);
-        if (string.startsWith('=')) string = string.slice(1);
-
-        const chunks: string[] = [];
-
-        let subStr: string = '';
-        let currChar = '';
-        for (let i = 0; i < string.length; i++){
-            currChar = string[i];
-            if (((string.charCodeAt(i) === 32 || string.charCodeAt(i) === 160) && subStr.trim()) || (currChar !== ' ' && !subStr.trim())) {
-                chunks.push(subStr);
-                subStr = currChar;
-            } else {
-                subStr += currChar;
-            }
-        }
-
-        if (subStr) {chunks.push(subStr)};
-
-        return this.elementsFromText(chunks);
-    }
-
-    // `<input
-    //     style={{ marginRight: 4 }}
-    //     type="checkbox"
-    //     checked={BoolCast(this._props.Document[this._props.fieldKey])}
-    //     onChange={undoBatch((value: React.ChangeEvent<HTMLInputElement> | undefined) => {
-    //         if ((value?.nativeEvent as any).shiftKey) {
-    //             this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? ''));
-    //         } else Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? ''));
-    //     })}
-    // />`
-
     @action 
     setContent = (content: string, restoreCursorPos?: boolean) => {
         const pos = this.cursorPosition;
-        this._displayedContent = content;
-        this._displayedElements = this.parseElements(content);
+        this._displayedContent = this.makeSpans(content);
         restoreCursorPos && setTimeout(() => this.setCursorPosition(pos));
     }
 
@@ -339,9 +233,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         }
         this._unrenderedContent = targVal;
         this._props.highlightCells?.(targVal);
-        if (this.parseElements(targVal).length > this.parseElements(this._displayedContent).length) this.setContent(targVal, true);
+        if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)};
         this.setupRefSelect(this.refSelectConditionMet);
-        console.log(this.parseElements(targVal));
     };
 
     setupRefSelect = (enabled: boolean) => {
@@ -458,12 +351,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             onClick={e => e.stopPropagation}
             onPointerUp={e => e.stopPropagation}
             onPointerMove={e => {e.stopPropagation(); e.preventDefault()}}
-            suppressContentEditableWarning={true}
-            //dangerouslySetInnerHTML={{ __html: this._displayedContent }}
+            dangerouslySetInnerHTML={{ __html: this._displayedContent }}
             >
-                {this._displayedElements.map((ele, index) => {
-                    return <span key={index}>{ele}</span>;
-                })}
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 40509c41b..9f6478041 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -249,4 +249,4 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 </div>
         );
     }
-}
+}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 72f5d8c25..ec94a8077 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -24,7 +24,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { infoState } from '../collectionFreeForm/CollectionFreeFormInfoState';
 import { TbShieldX } from 'react-icons/tb';
-import { DocumentType } from '../../../documents/DocumentTypes';
 
 interface SchemaRowBoxProps extends FieldViewProps {
     rowIndex: number;
@@ -78,7 +77,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
             icon: 'minus',
         });
         const childDocs = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)])
-        if (childDocs.length) {
+        if (this.Document.type === 'collection' && childDocs.length) {
                 ContextMenu.Instance.addItem({
                 description: this.Document._childrenSharedWithSchema ? 'Remove children from schema' : 'Add children to schema',
                 event: () => {
@@ -197,4 +196,4 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
             </div>
         );
     }
-}
+}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 7d29e40cc..e2a05da7f 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -389,7 +389,7 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp
         const { pointerEvents } = SchemaTableCell.renderProps(this._props);
         return (
             <>
-                <div style={{ pointerEvents: 'none'}}>
+                <div style={{ pointerEvents: 'none' }}>
                     <DatePicker dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={emptyFunction} />
                 </div>
                 {pointerEvents === 'none' ? null : (
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index dcdd52c73..8273f3e09 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -375,7 +375,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
             if (res && this._callCount === origCount) {
                 this._suggestedTemplates = [];
-                this._GPTLoading = false;
                 const templates: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[] = JSON.parse(res);
                 this.createGeneratedTemplates(templates, 500, 500);
             }
@@ -714,7 +713,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 try {
                     const renderedImages: Doc[] = await Promise.all(
                         calls.map(async ([fieldNum, col]) => {
-                            const sysPrompt = 'Your job is to create a prompt for an AI image generator to help it generate an image based on existing content in a template and a user prompt. ONLY INCLUDE THE PROMPT, NO OTHER TEXT OR EXPLANATION. The existing content is as follows: ' + fieldContent + ' **** The user prompt is: ' + col.desc;
+                            const sysPrompt = 'Your job is to create a prompt for an AI image generator to help it generate an image based on existing content in a template and a user prompt. Your prompt should focus heavily on visual elements to help the image generator; avoid unecessary info that might distract it. ONLY INCLUDE THE PROMPT, NO OTHER TEXT OR EXPLANATION. The existing content is as follows: ' + fieldContent + ' **** The user prompt is: ' + col.desc;
                             
                             const prompt = await gptAPICall(sysPrompt, GPTCallType.COMPLETEPROMPT);
                             console.log(sysPrompt, prompt);
@@ -852,7 +851,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
 
             if (res && this._callCount === origCount) {
-                this._GPTLoading = false;
 
                 const assignments: {[templateTitle: string]: {[field: string]: string}} = JSON.parse(res);
                 const brokenDownAssignments: [TemplateDocInfos, {[field: number]: Col}][] = [];
@@ -889,7 +887,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     
         const renderedTemplates: Doc[] = await Promise.all(renderedTemplatePromises);
         
-        setTimeout(() => { this.setGSuggestedTemplates(renderedTemplates) });
+        setTimeout(() => { this.setGSuggestedTemplates(renderedTemplates); this._GPTLoading = false });
     };
 
     @action setExpandedView = (info: {icon: ImageField, doc: Doc} | undefined) => {
@@ -908,6 +906,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             <div className={`docCreatorMenu-templates-view`}>
                 {this._expandedPreview ? 
                 <div className='docCreatorMenu-expanded-template-preview'>
+                    <img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
                     <div className='right-buttons-panel'>
                         <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.setExpandedView(undefined))}> 
                             <FontAwesomeIcon icon='minimize'/>
@@ -1618,7 +1617,7 @@ export class FieldFuncs {
             _rotation: opts.rotation,
         });
 
-        //setTimeout(() => {console.log('called', RichTextMenu.Instance), RichTextMenu.Instance?.setFontField('#4CE4D4', 'fontColor')}, 2000);
+        docWithBasicOpts._layout_hideScroll = true;
 
         return docWithBasicOpts;
     }
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 54e6c0add..e091657a8 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -2100,7 +2100,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                         }}
                         style={{
                             width: this.noSidebar ? '100%' : `calc(100% - ${this.layout_sidebarWidthPercent})`,
-                            overflow: this.layoutDoc._createDocOnCR ? 'hidden' : this.layoutDoc._layout_autoHeight ? 'visible' : undefined,
+                            overflow: this.layoutDoc._createDocOnCR || this.layoutDoc._layout_hideScroll ? 'hidden' : this.layout_autoHeight ? 'visible' : undefined,
                         }}
                         onScroll={this.onScroll}
                         onDrop={this.ondrop}>
-- 
cgit v1.2.3-70-g09d2


From e39a39cf0a1ea79f6ac2a25ee83533cf2f177290 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 8 Sep 2024 19:43:36 -0400
Subject: c

---
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 126 ++++++++++-----------
 .../views/nodes/formattedText/FormattedTextBox.tsx |   5 +
 2 files changed, 68 insertions(+), 63 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 8273f3e09..07d3c3e9c 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -793,8 +793,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 _layout_borderRounding: `${template.opts.cornerRounding}px` ?? '0px', 
                 borderWidth: template.opts.borderWidth,
                 borderColor: template.opts.borderColor,
-                x: 400, 
-                y: 400,
+                x: 40000, 
+                y: 40000,
             });
 
             const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
@@ -1670,8 +1670,8 @@ export class TemplateLayouts {
                 return TemplateLayouts.FourField001;
             case 'fourfield2':
                 return TemplateLayouts.FourField002;
-            case 'fourfield3':
-                return TemplateLayouts.FourField003;
+            // case 'fourfield3':
+            //     return TemplateLayouts.FourField003;
             case 'fourfield4':
                 return TemplateLayouts.FourField004;
             case 'threefield1':
@@ -1838,65 +1838,65 @@ export class TemplateLayouts {
         ]
     };
 
-    public static FourField003: TemplateDocInfos = {
-        title: 'fourfield3',
-        width: 477, 
-        height: 662, 
-        opts: {
-            backgroundColor: '#9E9C95'
-        },
-        fields: [{
-            tl: [-.875, -.9], 
-            br: [.875, .7], 
-            types: [TemplateFieldType.VISUAL],
-            sizes: [TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-            description: '',
-            opts: {
-                borderWidth: '15',
-                borderColor: '#E0E0DA',
-            }
-        }, {
-            tl: [-.95, .8], 
-            br: [-.1, .95], 
-            types: [TemplateFieldType.TEXT],
-            sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-            description: '',
-            opts: {
-                backgroundColor: 'transparent',
-                color: 'white',
-                contentXCentering: 'h-right',
-            }
-        }, {
-            tl: [.1, .8], 
-            br: [.95, .95], 
-            types: [TemplateFieldType.TEXT],
-            sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-            description: '',
-            opts: {
-                backgroundColor: 'transparent',
-                color: 'red',
-                fontTransform: 'uppercase',
-                contentXCentering: 'h-left'
-            }
-        }, {
-            tl: [0, -.9], 
-            br: [.85, -.66], 
-            types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
-            sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-            description: '',
-            opts: {
-                backgroundColor: 'transparent',
-                contentXCentering: 'h-right'
-            }
-        }],
-        decorations: [{
-            tl: [-.025, .8], 
-            br: [.025, .95], 
-            opts: {
-                backgroundColor: '#E0E0DA',
-            }
-        }]
-    };
+    // public static FourField003: TemplateDocInfos = {
+    //     title: 'fourfield3',
+    //     width: 477, 
+    //     height: 662, 
+    //     opts: {
+    //         backgroundColor: '#9E9C95'
+    //     },
+    //     fields: [{
+    //         tl: [-.875, -.9], 
+    //         br: [.875, .7], 
+    //         types: [TemplateFieldType.VISUAL],
+    //         sizes: [TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+    //         description: '',
+    //         opts: {
+    //             borderWidth: '15',
+    //             borderColor: '#E0E0DA',
+    //         }
+    //     }, {
+    //         tl: [-.95, .8], 
+    //         br: [-.1, .95], 
+    //         types: [TemplateFieldType.TEXT],
+    //         sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+    //         description: '',
+    //         opts: {
+    //             backgroundColor: 'transparent',
+    //             color: 'white',
+    //             contentXCentering: 'h-right',
+    //         }
+    //     }, {
+    //         tl: [.1, .8], 
+    //         br: [.95, .95], 
+    //         types: [TemplateFieldType.TEXT],
+    //         sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+    //         description: '',
+    //         opts: {
+    //             backgroundColor: 'transparent',
+    //             color: 'red',
+    //             fontTransform: 'uppercase',
+    //             contentXCentering: 'h-left'
+    //         }
+    //     }, {
+    //         tl: [0, -.9], 
+    //         br: [.85, -.66], 
+    //         types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+    //         sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+    //         description: '',
+    //         opts: {
+    //             backgroundColor: 'transparent',
+    //             contentXCentering: 'h-right'
+    //         }
+    //     }],
+    //     decorations: [{
+    //         tl: [-.025, .8], 
+    //         br: [.025, .95], 
+    //         opts: {
+    //             backgroundColor: '#E0E0DA',
+    //         }
+    //     }]
+    // };
 
     public static FourField004: TemplateDocInfos = {
         title: 'fourfield4',
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index e091657a8..5095da1c4 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1425,6 +1425,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     _didScroll = false;
     _scrollStopper: undefined | (() => void);
     setupEditor(config: any, fieldKey: string) {
+        try {
         const curText = Cast(this.dataDoc[this.fieldKey], RichTextField, null) || StrCast(this.dataDoc[this.fieldKey]);
         const rtfField = Cast((!curText && this.layoutDoc[this.fieldKey]) || this.dataDoc[fieldKey], RichTextField);
         if (this.ProseRef) {
@@ -1520,6 +1521,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             pdfAnchorId && this.addPdfReference(pdfAnchorId);
         }
         if (this._props.autoFocus) setTimeout(() => this._editorView!.focus()); // not sure why setTimeout is needed but editing dashFieldView's doesn't work without it.
+    } catch (e) {
+        console.log(e);
+    }
     }
 
     // add user mark for any first character that was typed since the user mark that gets set in KeyPress won't have been called yet.
@@ -2126,6 +2130,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                 </div>
             </div>
         );
+    
     }
 }
 
-- 
cgit v1.2.3-70-g09d2


From a734c38aa317b8ca9bf2b19853115872824f2b97 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Mon, 9 Sep 2024 00:39:24 -0400
Subject: c

---
 src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx      | 6 ++++--
 src/client/views/nodes/formattedText/FormattedTextBox.tsx | 5 +----
 2 files changed, 5 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 07d3c3e9c..01d5bc83b 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1772,7 +1772,8 @@ export class TemplateLayouts {
             opts: {
                 backgroundColor: 'transparent',
                 color: 'white',
-                contentXCentering: 'h-center'
+                contentXCentering: 'h-center',
+                fontTransform: 'uppercase'
             }
         }, {
             tl: [-.65, 0], 
@@ -1783,7 +1784,8 @@ export class TemplateLayouts {
             opts: {
                 backgroundColor: 'transparent',
                 color: 'white',
-                contentXCentering: 'h-center'
+                contentXCentering: 'h-center',
+                fontTransform: 'uppercase'
             }
         }, {
             tl: [-.83, .2], 
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 5095da1c4..3b21df2ed 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1425,7 +1425,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     _didScroll = false;
     _scrollStopper: undefined | (() => void);
     setupEditor(config: any, fieldKey: string) {
-        try {
         const curText = Cast(this.dataDoc[this.fieldKey], RichTextField, null) || StrCast(this.dataDoc[this.fieldKey]);
         const rtfField = Cast((!curText && this.layoutDoc[this.fieldKey]) || this.dataDoc[fieldKey], RichTextField);
         if (this.ProseRef) {
@@ -1521,9 +1520,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             pdfAnchorId && this.addPdfReference(pdfAnchorId);
         }
         if (this._props.autoFocus) setTimeout(() => this._editorView!.focus()); // not sure why setTimeout is needed but editing dashFieldView's doesn't work without it.
-    } catch (e) {
-        console.log(e);
-    }
+
     }
 
     // add user mark for any first character that was typed since the user mark that gets set in KeyPress won't have been called yet.
-- 
cgit v1.2.3-70-g09d2


From e0b354b275c3a025b93f93815bd1828ba9cec5a8 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 18 Sep 2024 20:43:14 -0400
Subject: fixed filtering; cells update properly with input

---
 .../collectionSchema/CollectionSchemaView.tsx      | 48 ++++++++++-
 .../collectionSchema/SchemaCellField.tsx           | 12 +--
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 97 ++++++++++++++--------
 3 files changed, 115 insertions(+), 42 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 59ccec71f..9623b0d12 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -45,6 +45,7 @@ import { docs_v1 } from 'googleapis';
 import { SchemaCellField } from './SchemaCellField';
 import { threadId } from 'worker_threads';
 import { FontIconBox } from '../../nodes/FontIconBox/FontIconBox';
+import { SnappingManager } from '../../../util/SnappingManager';
 
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
@@ -1271,6 +1272,49 @@ export class CollectionSchemaView extends CollectionSubView() {
         return toReturn;
     }
 
+    @computed get filteredDocs() {
+        const childDocFilters = this.childDocFilters();
+        const childFiltersByRanges = this.childDocRangeFilters();
+        const searchDocs = this.searchFilterDocs();
+
+        const docsforFilter: Doc[] = [];
+        this._docs.forEach(d => {
+            // dragging facets
+            const dragged = this._props.childFilters?.().some(f => f.includes(ClientUtils.noDragDocsFilter));
+            if (dragged && SnappingManager.CanEmbed && DragManager.docsBeingDragged.includes(d)) return;
+            let notFiltered = d.z || Doc.IsSystem(d) || DocUtils.FilterDocs([d], this.unrecursiveDocFilters(), childFiltersByRanges, this.Document).length > 0;
+            if (notFiltered) {
+                notFiltered = (!searchDocs.length || searchDocs.includes(d)) && DocUtils.FilterDocs([d], childDocFilters, childFiltersByRanges, this.Document).length > 0;
+                const fieldKey = Doc.LayoutFieldKey(d);
+                const isAnnotatableDoc = d[fieldKey] instanceof List && !(d[fieldKey] as List<Doc>)?.some(ele => !(ele instanceof Doc));
+                const docChildDocs = d[isAnnotatableDoc ? fieldKey + '_annotations' : fieldKey];
+                const sidebarDocs = isAnnotatableDoc && d[fieldKey + '_sidebar'];
+                if (docChildDocs !== undefined || sidebarDocs !== undefined) {
+                    let subDocs = [...DocListCast(docChildDocs), ...DocListCast(sidebarDocs)];
+                    if (subDocs.length > 0) {
+                        let newarray: Doc[] = [];
+                        notFiltered = notFiltered || (!searchDocs.length && DocUtils.FilterDocs(subDocs, childDocFilters, childFiltersByRanges, d).length);
+                        while (subDocs.length > 0 && !notFiltered) {
+                            newarray = [];
+                            // eslint-disable-next-line no-loop-func
+                            subDocs.forEach(t => {
+                                const docFieldKey = Doc.LayoutFieldKey(t);
+                                const isSubDocAnnotatable = t[docFieldKey] instanceof List && !(t[docFieldKey] as List<Doc>)?.some(ele => !(ele instanceof Doc));
+                                notFiltered =
+                                    notFiltered || ((!searchDocs.length || searchDocs.includes(t)) && ((!childDocFilters.length && !childFiltersByRanges.length) || DocUtils.FilterDocs([t], childDocFilters, childFiltersByRanges, d).length));
+                                DocListCast(t[isSubDocAnnotatable ? docFieldKey + '_annotations' : docFieldKey]).forEach(newdoc => newarray.push(newdoc));
+                                isSubDocAnnotatable && DocListCast(t[docFieldKey + '_sidebar']).forEach(newdoc => newarray.push(newdoc));
+                            });
+                            subDocs = newarray;
+                        }
+                    }
+                }
+            }
+            notFiltered && docsforFilter.push(d);
+        });
+        return docsforFilter;
+    }
+
     @computed get docs() {
         let docsFromChildren: Doc[] = [];
 
@@ -1279,7 +1323,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             let docsNotAlreadyDisplayed = this.subCollectionDocs(d, true).filter(dc => !this._docs.includes(dc));
             docsFromChildren = docsFromChildren.concat(docsNotAlreadyDisplayed);
         });
-        let docs = this._docs.concat(docsFromChildren);
+        let docs = this.filteredDocs;
 
         return docs;
     }
@@ -1288,7 +1332,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const numbers: Doc[] = [];
         const strings: Doc[] = []; 
 
-        this._docs.forEach(doc => {
+        this.docs.forEach(doc => {
             if (!isNaN(Number(Field.toString(doc[field] as FieldType)))) numbers.push(doc);
             else strings.push(doc);
         });
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index e1059b8fc..1ee79fa0b 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -151,6 +151,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     setContent = (content: string, restoreCursorPos?: boolean) => {
         const pos = this.cursorPosition;
         this._displayedContent = this.makeSpans(content);
+        console.log('print', content);
         restoreCursorPos && setTimeout(() => this.setCursorPosition(pos));
     }
 
@@ -217,10 +218,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         setRange(this._inputref.childNodes);
     };
 
-    shouldUpdate = (prevVal: string, currVal: string) => {
-        if (this._props.getCells(currVal).length !== this._props.getCells(prevVal).length) return true;
-        //if (contains self-ref pattern)
-    };
+    //This function checks if a visual update (eg. coloring a cell reference) should be made. It's meant to
+    //save on processing upkeep vs. constantly rerendering, but I think the savings are minimal for now
+    // shouldUpdate = (prevVal: string, currVal: string) => {
+    //     if (this._props.getCells(currVal).length !== this._props.getCells(prevVal).length) return true;
+    // };
 
     onChange = (e: FormEvent<HTMLDivElement> | undefined, newText?: string) => {
         const prevVal = this._unrenderedContent;
@@ -233,7 +235,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         }
         this._unrenderedContent = targVal;
         this._props.highlightCells?.(targVal);
-        if (this.shouldUpdate(prevVal, targVal)) {this.setContent(targVal, true)};
+        this.setContent(targVal, true);
         this.setupRefSelect(this.refSelectConditionMet);
     };
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 01d5bc83b..8afd1bbf1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -604,7 +604,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             }
         })
 
-        validTemplates = validTemplates.map(title => TemplateLayouts.fieldByTitle(title));
+        validTemplates = validTemplates.map(title => TemplateLayouts.getTemplateByTitle(title));
 
         return validTemplates;
     };
@@ -667,7 +667,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                             const field: Field = template.fields[Number(info.number)];
                             const col = this.getColByTitle(title);
     
-                            const doc = FieldFuncs.TextField({
+                            const doc = FieldUtils.TextField({
                                 tl: field.tl, 
                                 br: field.br }, 
                                 template.height, 
@@ -692,7 +692,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const createGeneratedImage = async(fieldNum: string, col: Col, prompt: string) => {
             const url = await this.generateGPTImage(prompt);
             const field: Field = template.fields[Number(fieldNum)];
-            const doc = FieldFuncs.ImageField({
+            const doc = FieldUtils.ImageField({
                 tl: field.tl, 
                 br: field.br }, 
                 template.height, 
@@ -755,7 +755,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             const field: Field = template.fields[Number(f)];
             const col = strCol[1];
 
-            const doc = (col.type === TemplateFieldType.VISUAL ? FieldFuncs.ImageField : FieldFuncs.TextField)({
+            const doc = (col.type === TemplateFieldType.VISUAL ? FieldUtils.ImageField : FieldUtils.TextField)({
                 tl: field.tl, 
                 br: field.br }, 
                 template.height, 
@@ -771,7 +771,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         });
 
         template.decorations.forEach(dec => {
-            const doc = FieldFuncs.FreeformField({
+            const doc = FieldUtils.FreeformField({
                 tl: dec.tl, 
                 br: dec.br }, 
                 template.height, 
@@ -856,7 +856,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 const brokenDownAssignments: [TemplateDocInfos, {[field: number]: Col}][] = [];
 
                 Object.entries(assignments).forEach(([tempTitle, assignment]) => {
-                    const template = TemplateLayouts.fieldByTitle(tempTitle);
+                    const template = TemplateLayouts.getTemplateByTitle(tempTitle);
                     if (!template) return;
                     const toObj = Object.entries(assignment).reduce((a, [fieldNum, colTitle]) => {
                         a[Number(fieldNum)] = this.getColByTitle(colTitle);
@@ -1468,14 +1468,45 @@ export type Col = {
 }
 
 type Field = {
-    tl: [number, number], 
-    br: [number, number], 
-    types?: TemplateFieldType[], 
-    sizes?: TemplateFieldSize[], 
-    description?: string;
+    tl: [number, number];
+    br: [number, number];
     opts: FieldOpts;
-    subfields?: ['freeform' | 'stacking' | 'carousel', Field[]];
-};
+    subfields?: Field[];
+    types?: TemplateFieldType[];
+    sizes?: TemplateFieldSize[];
+    isDecoration?: boolean;
+    description?: string;
+}
+
+// class ContentField implements Field {
+//     tl: [number, number];
+//     br: [number, number];
+//     opts: FieldOpts;
+//     subfields?: Field[];
+//     types?: TemplateFieldType[];
+//     sizes?: TemplateFieldSize[];
+//     description?: string;
+
+//     constructor( tl: [number, number], br: [number, number], 
+//                         opts: FieldOpts, subfields?: Field[], 
+//                         types?: TemplateFieldType[], 
+//                         sizes?: TemplateFieldSize[], 
+//                         description?: string) {
+//         this.tl = tl;
+//         this.br = br;
+//         this.opts = opts;
+//         this.subfields = subfields;
+//         this.types = types;
+//         this.sizes = sizes;
+//         this.description = description;
+//     }
+
+//     render = (content: any): Doc => {
+//         return new Doc;
+//     }
+// }
+
+type DecorationField = Field;
 
 type InkDecoration = {
 
@@ -1505,13 +1536,24 @@ export interface FieldOpts {
     //animation?: boolean;
     fontBold?: boolean;
     fontTransform?: 'uppercase' | 'lowercase';
+    fieldViewType?: 'freeform' | 'stacked';
 }
 
 interface TemplateOpts extends FieldOpts {
 
 }
 
-export class FieldFuncs {
+export class FieldUtils {
+
+    public static contentFields = (fields: Field[]) => {
+        let toRet: Field[] = [];
+        fields.forEach(field => {
+            if (!field.isDecoration) { toRet.push(field) };
+            toRet = toRet.concat(FieldUtils.contentFields(field.subfields ?? []));
+        });
+
+        return toRet;
+    }
 
     public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
         const words: string[] = text.split(/\s+/).filter(Boolean);
@@ -1555,9 +1597,6 @@ export class FieldFuncs {
         
         return currFontSize - 1;
     };
-    
-    
-    
 
     private static getDimensions = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number): {width: number, height: number, coord: {x: number, y: number}} => {
         const l = coords.tl[0] * parentHeight / 2; const t = coords.tl[1] * parentWidth / 2; //prettier-ignore
@@ -1570,7 +1609,7 @@ export class FieldFuncs {
     }
 
     public static FreeformField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
-        const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
+        const {width, height, coord} = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
 
         const docWithBasicOpts = (Docs.Create.FreeformDocument)([], {  
             isDefaultTemplateDoc: true, 
@@ -1592,7 +1631,7 @@ export class FieldFuncs {
     }
 
     public static TextField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
-        const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
+        const {width, height, coord} = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
 
         const bool = true;
 
@@ -1603,7 +1642,7 @@ export class FieldFuncs {
             title: title, 
             x: coord.x, 
             y: coord.y, 
-            _text_fontSize: `${FieldFuncs.calculateFontSize(width, height, content, true)}` ,
+            _text_fontSize: `${FieldUtils.calculateFontSize(width, height, content, true)}` ,
             backgroundColor: opts.backgroundColor ?? '',
             text_fontColor: opts.color,
             contentBold: opts.fontBold,
@@ -1623,7 +1662,7 @@ export class FieldFuncs {
     }
 
     public static ImageField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
-        const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
+        const {width, height, coord} = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
 
         const doc = Docs.Create.ImageDocument(content, {  
             isDefaultTemplateDoc: true, 
@@ -1647,7 +1686,7 @@ export class FieldFuncs {
     }
 
     public static CarouselField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, fields: Doc[]) => {
-        const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
+        const {width, height, coord} = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
 
         const doc = Docs.Create.Carousel3DDocument(fields, { _height: height, _width: width, title: title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` })
 
@@ -1664,7 +1703,7 @@ export class TemplateLayouts {
         ) as TemplateDocInfos[];
     }
 
-    public static fieldByTitle = (title: string): TemplateDocInfos | undefined => {
+    public static getTemplateByTitle = (title: string): TemplateDocInfos | undefined => {
         switch (title){
             case 'fourfield1':
                 return TemplateLayouts.FourField001;
@@ -1984,18 +2023,6 @@ export class TemplateLayouts {
                 borderWidth: '8',
                 rotation: 45,
             },
-            subfields: [
-                'freeform',
-                [{
-                    tl: [-2, -2], 
-                    br: [2, 2], 
-                    types: [TemplateFieldType.VISUAL],
-                    sizes: [TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-                    opts: {
-                        rotation: 315,
-                    }
-                }]
-            ]
         }, {
             tl: [-.7, .2], 
             br: [.7, .46], 
-- 
cgit v1.2.3-70-g09d2


From 24c6c3f0c9b43059cd013d344dfa065969f73389 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 19 Sep 2024 15:01:50 -0400
Subject: cleaning up/commenting schemaview

---
 .../collectionSchema/CollectionSchemaView.tsx      | 306 +++++++--------------
 .../collectionSchema/SchemaColumnHeader.tsx        |   2 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      |   6 +
 3 files changed, 114 insertions(+), 200 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 9623b0d12..0e5a1e6b6 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -47,6 +47,18 @@ import { threadId } from 'worker_threads';
 import { FontIconBox } from '../../nodes/FontIconBox/FontIconBox';
 import { SnappingManager } from '../../../util/SnappingManager';
 
+/**
+ * The schema view offers a spreadsheet-like interface for users to interact with documents. Within the schema,
+ * each doc is represented by its own row. Each column represents a field, for example the author or title fields. 
+ * Users can apply varoius filters and sorts to columns to change what is displayed. The schemaview supports equations for
+ * cell linking.
+ * 
+ * This class supports the main functionality for choosing which docs to render in the view, applying visual
+ * updates to rows and columns (such as user dragging or sort-related highlighting), applying edits to multiple cells 
+ * at once, and applying filters and sorts to columns. It contains SchemaRowBoxes (which themselves contain SchemaTableCells,
+ * and SchemaCellFields) and SchemaColumnHeaders.
+ */
+
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
 export const FInfotoColType: { [key: string]: ColumnType } = {
@@ -109,19 +121,19 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _newFieldType: ColumnType = ColumnType.Number;
     @observable _menuValue: string = '';
     @observable _filterColumnIndex: number | undefined = undefined;
-    @observable _filterSearchValue: string = '';
+    @observable _filterSearchValue: string = ''; //the current text inside the filter search bar, used to determine which values to display
     @observable _selectedCol: number = 0;
     @observable _selectedCells: Array<Doc> = [];
     @observable _mouseCoordinates = { x: 0, y: 0, prevX: 0, prevY: 0 };
     @observable _lowestSelectedIndex: number = -1; //lowest index among selected rows; used to properly sync dragged docs with cursor position
     @observable _relCursorIndex: number = -1; //cursor index relative to the current selected cells
     @observable _draggedColIndex: number = 0;
-    @observable _colBeingDragged: boolean = false;
+    @observable _colBeingDragged: boolean = false; //whether a column is being dragged by the user
     @observable _colKeysFiltered: boolean = false;
     @observable _cellTags: ObservableMap = new ObservableMap<Doc, Array<string>>();
     @observable _highlightedCellsInfo: Array<[doc: Doc, field: string]> = [];
     @observable _cellHighlightColors: ObservableMap = new ObservableMap<string, string[]>();
-    @observable _docs: Doc[] = [];
+    @observable _containedDocs: Doc[] = []; //all direct children of the schema
     @observable _referenceSelectMode: {enabled: boolean, currEditing: SchemaCellField | undefined} = {enabled: false, currEditing: undefined}
     
     // target HTMLelement portal for showing a popup menu to edit cell values.
@@ -218,11 +230,11 @@ export class CollectionSchemaView extends CollectionSubView() {
         );
         this._disposers.docdata = reaction(
             () => DocListCast(this.dataDoc[this.fieldKey]), 
-            (docs) => this._docs = docs,
+            (docs) => this._containedDocs = docs,
             {fireImmediately: true}
         )
         this._disposers.sortHighlight = reaction(
-            () => [this.sortField, this._docs, this._selectedDocs, this._highlightedCellsInfo], 
+            () => [this.sortField, this._containedDocs, this._selectedDocs, this._highlightedCellsInfo], 
             () => {this.sortField && setTimeout(() => this.highlightSortedColumn())},
             {fireImmediately: true}
         )
@@ -239,7 +251,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     removeDoc = (doc: Doc) => {
         this.removeDocument(doc);
-        this._docs = this._docs.filter(d => d !== doc)
+        this._containedDocs = this._containedDocs.filter(d => d !== doc)
     }
 
     rowIndex = (doc: Doc) => this.docsWithDrag.docs.indexOf(doc);
@@ -301,11 +313,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                     }
                     break;
                 case 'Backspace': {
-                    // this._docs.forEach(doc => {
-                    //     if (!this.childDocs.concat(this.displayedSubCollectionDocs(this.Document)))
-                    // });
-                    // console.log('backspace detected')
-                    undoable(() => {this._selectedDocs.forEach(d => this._docs.includes(d) && this.removeDoc(d));}, 'delete schema row');
+                    undoable(() => {this._selectedDocs.forEach(d => this._containedDocs.includes(d) && this.removeDoc(d));}, 'delete schema row');
                     break;
                 }
                 case 'Escape': {
@@ -320,9 +328,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         }
     };
 
-    @action
-    changeSelectedCellColumn = () => {};
-
     addRow = (doc: Doc | Doc[]) => this.addDocument(doc);
 
     @undoBatch
@@ -363,7 +368,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         if (this.columnKeys.length === 1) return;
         if (this._columnMenuIndex === index) {
             this._headerRefs[index].toggleEditing(false);
-            this.closeColumnMenu();
+            this.closeNewColumnMenu();
         }
         const currWidths = this.storedColumnWidths.slice();
         currWidths.splice(index, 1);
@@ -436,7 +441,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     dragColumn = (e: PointerEvent, index: number) => {
-        this.closeColumnMenu();
+        this.closeNewColumnMenu();
         this._headerRefs.forEach(ref => ref.toggleEditing(false));
         this._draggedColIndex = index;
         this.setColDrag(true);  
@@ -447,6 +452,11 @@ export class CollectionSchemaView extends CollectionSubView() {
         return true;
     };
 
+    /**
+     * Uses cursor x coordinate to calculate which index the column should be rendered/dropped in
+     * @param mouseX cursor x coordinate
+     * @returns column index
+     */
     findColDropIndex = (mouseX: number) => {
         let xOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0,0)[0] + CollectionSchemaView._rowMenuWidth; 
         let index: number | undefined;
@@ -461,32 +471,11 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     /**
-     * Calculates the relative index of the cursor in the group of selected rows, ie.
-     * if five rows are selected and the cursor is in the middle row, its relative index would be 2.
-     * Used to align actively dragged documents properly with the cursor.
-     * @param mouseY the initial Y position of the cursor on drag
+     * Calculates the current index of dragged rows for dynamic rendering and drop logic.
+     * @param mouseY user's cursor position relative to the viewport
+     * @returns row index the dragged doc should be rendered/dropped in
      */
-    @action
-    setRelCursorIndex = (mouseY: number) => {
-        this._mouseCoordinates.y = mouseY; // updates this.rowDropIndex computed value to overwrite the old cached value
-
-        const rowHeight = CollectionSchemaView._rowHeight;
-        const adjInitMouseY = mouseY - rowHeight - 100; // rowHeight: height of the column menu cells | 100: height of the top menu
-        const yOffset = this._lowestSelectedIndex * rowHeight;
-
-        const heights = this._selectedDocs.map(() => this.rowHeightFunc());
-        let index: number = 0;
-        heights.reduce((total, curr, i) => {
-            if (total <= adjInitMouseY && total + curr >= adjInitMouseY) {
-                if (adjInitMouseY <= total + curr) index = i;
-                else index = i + 1;
-            }
-            return total + curr;
-        }, yOffset);
-        this._relCursorIndex = index;
-    };
-
-    findRowDropIndex = (mouseY: number) => {
+    findRowDropIndex = (mouseY: number): number => {
         const rowHeight = CollectionSchemaView._rowHeight;
         let index: number = 0;
         this.rowHeights.reduce((total, curr, i) => {
@@ -545,10 +534,16 @@ export class CollectionSchemaView extends CollectionSubView() {
         });
     }
 
+    /**
+     * Applies a gradient highlight to a sorted column. The direction of the gradient depends
+     * on whether the sort is ascending or descending.
+     * @param field the column being sorted
+     * @param descending whether the sort is descending or ascending; descending if true
+     */
     highlightSortedColumn = (field?: string, descending?: boolean) => {
         let index = -1;
         let highlightColors: string[] = [];
-        const rowCount: number = this._docs.length + 1;
+        const rowCount: number = this._containedDocs.length + 1;
         if (field || this.sortField){
             index = this.columnKeys.indexOf(field || this.sortField);
             const increment: number = 110/rowCount;
@@ -581,12 +576,23 @@ export class CollectionSchemaView extends CollectionSubView() {
         
     }
 
+    /**
+     * Gets the html element representing a cell so that styles can be applied on it.
+     * @param doc the cell's row document
+     * @param fieldKey the cell's column's field key
+     * @returns the html element representing the cell at the given location
+     */
     getCellElement = (doc: Doc, fieldKey: string) => {
         const index = this.columnKeys.indexOf(fieldKey);
         const cell = this._rowEles.get(doc).children[1].children[index];
         return cell;
     }
 
+    /**
+     * Given text in a cell, find references to other cells (for equations).
+     * @param text the text in the cell
+     * @returns the html cell elements referenced in the text. 
+     */
     findCellRefs = (text: string) => {
         const pattern = /(this|d(\d+))\.(\w+)/g;
         interface Match { docRef: string; field: string; }
@@ -604,12 +610,18 @@ export class CollectionSchemaView extends CollectionSubView() {
             const {docRef, field} = match;
             const docView = DocumentManager.Instance.DocumentViews[Number(docRef)];
             const doc = docView?.Document ?? undefined;
-            if (this.columnKeys.includes(field) && this._docs.includes(doc)) {cells.push([doc, field])}
+            if (this.columnKeys.includes(field) && this._containedDocs.includes(doc)) {cells.push([doc, field])}
         })
 
         return cells;
     }
 
+    /**
+     * Determines whether the rows above or below a given row have been
+     * selected, so selection highlights don't overlap.
+     * @param doc the document row to check
+     * @returns a boolean tuple where 0 is the row above, and 1 is the row below
+     */
     selectionOverlap = (doc: Doc): [boolean, boolean] => {
         const docs = this.docsWithDrag.docs;
         const index = this.rowIndex(doc);
@@ -647,6 +659,11 @@ export class CollectionSchemaView extends CollectionSubView() {
         });
     }
 
+    /**
+     * Highlights cells based on equation text in the cell currently being edited. 
+     * Does not highlight selected cells (that's done directly in SchemaTableCell).
+     * @param text the equation
+     */
     highlightCells = (text: string) => {
         this.removeCellHighlights();
 
@@ -660,7 +677,6 @@ export class CollectionSchemaView extends CollectionSubView() {
             const doc = info[0]; 
             const field = info[1];
             const key = `${doc[Id]}_${field}`;
-            console.log(key + ' ' + i % 10 + ' color: ' + color[0].r + color[0].g + color[0].b);
             const cell = this.getCellElement(doc, field);
             this._cellHighlightColors.set(key, [colorStrings[0], colorStrings[1]]);
             cell.style.border = colorStrings[0];
@@ -668,6 +684,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         }
     }
 
+    //Used in SchemaRowBox
     @action
     addRowRef = (doc: Doc, ref: HTMLDivElement) => this._rowEles.set(doc, ref);
 
@@ -693,7 +710,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         this.deselectAllCells();
     };
 
-    selectRows = (doc: Doc, lastSelected: Doc) => {
+
+    selectRow = (doc: Doc, lastSelected: Doc) => {
         const index = this.rowIndex(doc);
         const lastSelectedRow = this.rowIndex(lastSelected);
         const startRow = Math.min(lastSelectedRow, index);
@@ -706,6 +724,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         }
     };
 
+    //Used in SchemaRowBox
     selectReference = (doc: Doc | undefined, col: number) => {
         if (!doc) return;
         const docIndex = DocumentView.getDocViewIndex(doc);
@@ -719,7 +738,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     selectCell = (doc: Doc, col: number, shiftKey: boolean, ctrlKey: boolean) => {
-        this.closeColumnMenu();
+        this.closeNewColumnMenu();
         if (!shiftKey && !ctrlKey) this.clearSelection();
         !this._selectedCells && (this._selectedCells = []);
         !shiftKey && this._selectedCells.push(doc);
@@ -727,7 +746,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         if (!this) return;
         const lastSelected = Array.from(this._selectedDocs).lastElement();
-        if (shiftKey && lastSelected && !this._selectedDocs.includes(doc)) this.selectRows(doc, lastSelected);
+        if (shiftKey && lastSelected && !this._selectedDocs.includes(doc)) this.selectRow(doc, lastSelected);
         else if (ctrlKey) {
             if (lastSelected && this._selectedDocs.includes(doc)) {
                 DocumentView.DeselectView(DocumentView.getFirstDocumentView(doc));
@@ -821,71 +840,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         return undefined;
     };
 
-    @computed get fieldDefaultInput() {
-        switch (this._newFieldType) {
-            case ColumnType.Number:
-                return (
-                    <input
-                        type="number"
-                        name=""
-                        id=""
-                        value={this._newFieldDefault ?? 0}
-                        onPointerDown={e => e.stopPropagation()}
-                        onChange={action((e: any) => {
-                            this._newFieldDefault = e.target.value;
-                        })}
-                    />
-                );
-            case ColumnType.Boolean:
-                return (
-                    <>
-                        <input
-                            type="checkbox"
-                            name=""
-                            id=""
-                            value={this._newFieldDefault}
-                            onPointerDown={e => e.stopPropagation()}
-                            onChange={action((e: any) => {
-                                this._newFieldDefault = e.target.checked;
-                            })}
-                        />
-                        {this._newFieldDefault ? 'true' : 'false'}
-                    </>
-                );
-            case ColumnType.String:
-                return (
-                    <input
-                        type="text"
-                        name=""
-                        id=""
-                        value={this._newFieldDefault ?? ''}
-                        onPointerDown={e => e.stopPropagation()}
-                        onChange={action((e: any) => {
-                            this._newFieldDefault = e.target.value;
-                        })}
-                    />
-                );
-            default:
-                return undefined;
-        }
-    }
-
-    onSearchKeyDown = (e: React.KeyboardEvent) => {
-        switch (e.key) {
-            case 'Enter':
-                this._menuKeys.length > 0 && this._menuValue.length > 0
-                    ? this.setKey(this._menuKeys[0])
-                    : runInAction(() => {
-                          this._makeNewField = true;
-                      });
-                break;
-            case 'Escape':
-                this.closeColumnMenu();
-                break;
-            default:
-        }
-    };
-
     @action
     setKey = (key: string, defaultVal?: any, index?: number) => {
         if (this.columnKeys.includes(key)) return;
@@ -895,9 +849,15 @@ export class CollectionSchemaView extends CollectionSubView() {
             this._makeNewColumn = false;
         } else this.changeColumnKey(this._columnMenuIndex! | index!, key, defaultVal);
 
-        this.closeColumnMenu();
+        this.closeNewColumnMenu();
     };
 
+    /**
+     * Used in SchemaRowBox to set 
+     * @param key 
+     * @param value 
+     * @returns 
+     */
     setCellValues = (key: string, value: string) => {
         if (this._selectedCells.length === 1) this.docs.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); 
         else this._selectedCells.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); 
@@ -905,24 +865,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    toggleMenuKeyFilter = () => {
-        if (!this._colKeysFiltered){
-            this._colKeysFiltered = true;
-            this._menuKeys = this.documentKeys.filter(key => this.childDocsInclude(key));
-        } else {
-            this._colKeysFiltered = false;
-            this._menuKeys = this.documentKeys;
-        }
-    }
-
-    childDocsInclude = (key: string) => {
-        let keyExists: boolean = false;
-        this.childDocs.forEach(doc => {if (Object.keys(doc).includes(key)) keyExists = true;})
-        return keyExists
-    }
-
-    @action
-    openColumnMenu = (index: number, newCol: boolean) => {
+    openNewColumnMenu = (index: number, newCol: boolean) => {
         this.closeFilterMenu();
 
         this._makeNewColumn = false;
@@ -934,7 +877,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    closeColumnMenu = () => {
+    closeNewColumnMenu = () => {
         this._columnMenuIndex = undefined;
     };
 
@@ -956,7 +899,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     openContextMenu = (x: number, y: number, index: number) => {
-        this.closeColumnMenu();
+        this.closeNewColumnMenu();
         this.closeFilterMenu();
         const cm = ContextMenu.Instance;
         cm.clearItems();
@@ -970,7 +913,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             event: () => {
                 this.setColumnSort(undefined); 
                 const field = this.columnKeys[index];
-                this._docs = this.sortDocs(field, false);
+                this._containedDocs = this.sortDocs(field, false);
                 setTimeout(() => {
                     this.highlightSortedColumn(field, false);
                     setTimeout(() => this.highlightSortedColumn(), 480); 
@@ -982,7 +925,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             event: () => {
                 this.setColumnSort(undefined); 
                 const field = this.columnKeys[index];
-                this._docs = this.sortDocs(field, true);
+                this._containedDocs = this.sortDocs(field, true);
                 setTimeout(() => {
                     this.highlightSortedColumn(field, true);
                     setTimeout(() => this.highlightSortedColumn(), 480); 
@@ -1016,7 +959,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     
         cm.addItem({
             description: `Change field`,
-            event: () => this.openColumnMenu(index, false),
+            event: () => this.openNewColumnMenu(index, false),
             icon: 'pencil-alt',
         });
         cm.addItem({
@@ -1049,6 +992,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         cm.displayMenu(x, y, undefined, false);
     };
 
+    //used in schemacolumnheader
     @action
     updateKeySearch = (val: string) => {
         this._menuKeys = this.documentKeys.filter(value => value.toLowerCase().includes(val.toLowerCase()));
@@ -1075,70 +1019,12 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._filterSearchValue = e.target.value;
     };
 
-    // @computed get newFieldMenu() {
-    //     return (
-    //         <div className="schema-new-key-options">
-    //             <div className="schema-key-type-option">
-    //                 <input
-    //                     type="radio"
-    //                     name="newFieldType"
-    //                     checked={this._newFieldType === ColumnType.Number}
-    //                     onChange={action(() => {
-    //                         this._newFieldType = ColumnType.Number;
-    //                         this._newFieldDefault = 0;
-    //                     })}
-    //                 />
-    //                 number
-    //             </div>
-    //             <div className="schema-key-type-option">
-    //                 <input
-    //                     type="radio"
-    //                     name="newFieldType"
-    //                     checked={this._newFieldType === ColumnType.Boolean}
-    //                     onChange={action(() => {
-    //                         this._newFieldType = ColumnType.Boolean;
-    //                         this._newFieldDefault = false;
-    //                     })}
-    //                 />
-    //                 boolean
-    //             </div>
-    //             <div className="schema-key-type-option">
-    //                 <input
-    //                     type="radio"
-    //                     name="newFieldType"
-    //                     checked={this._newFieldType === ColumnType.String}
-    //                     onChange={action(() => {
-    //                         this._newFieldType = ColumnType.String;
-    //                         this._newFieldDefault = '';
-    //                     })}
-    //                 />
-    //                 string
-    //             </div>
-    //             <div className="schema-key-default-val">value: {this.fieldDefaultInput}</div>
-    //             <div className="schema-key-warning">{this._newFieldWarning}</div>
-    //             <div
-    //                 className="schema-column-menu-button"
-    //                 onPointerDown={action(() => {
-    //                     if (this.documentKeys.includes(this._menuValue)) {
-    //                         this._newFieldWarning = 'Field already exists';
-    //                     } else if (this._menuValue.length === 0) {
-    //                         this._newFieldWarning = 'Field cannot be an empty string';
-    //                     } else {
-    //                         this.setKey(this._menuValue, this._newFieldDefault);
-    //                     }
-    //                     this._columnMenuIndex = undefined;
-    //                 })}>
-    //                 done
-    //             </div>
-    //         </div>
-    //     );
-    // }
-
     onKeysPassiveWheel = (e: WheelEvent) => {
         // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this)
         if (!this._oldKeysWheel.scrollTop && e.deltaY <= 0) e.preventDefault();
         e.stopPropagation();
     };
+
     _oldKeysWheel: any;
     @computed get keysDropdown() {
         return (
@@ -1262,6 +1148,12 @@ export class CollectionSchemaView extends CollectionSubView() {
         }
     };
 
+    /**
+     * Gets docs contained by collections within the schema
+     * @param doc 
+     * @param displayed 
+     * @returns 
+     */
     subCollectionDocs = (doc: Doc, displayed: boolean) => {
         const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]);
         let collections: Array<Doc> = [];
@@ -1272,13 +1164,16 @@ export class CollectionSchemaView extends CollectionSubView() {
         return toReturn;
     }
 
+    /**
+     * Applies any filters active on the schema to filter out docs that don't match.
+     */
     @computed get filteredDocs() {
         const childDocFilters = this.childDocFilters();
         const childFiltersByRanges = this.childDocRangeFilters();
         const searchDocs = this.searchFilterDocs();
 
         const docsforFilter: Doc[] = [];
-        this._docs.forEach(d => {
+        this._containedDocs.forEach(d => {
             // dragging facets
             const dragged = this._props.childFilters?.().some(f => f.includes(ClientUtils.noDragDocsFilter));
             if (dragged && SnappingManager.CanEmbed && DragManager.docsBeingDragged.includes(d)) return;
@@ -1315,12 +1210,15 @@ export class CollectionSchemaView extends CollectionSubView() {
         return docsforFilter;
     }
 
+    /**
+     * Returns all child docs of the schema and child docs of contained collections that satisfy applied filters.
+     */
     @computed get docs() {
         let docsFromChildren: Doc[] = [];
 
         const displayedCollections = this.childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema);
         displayedCollections.forEach(d => {
-            let docsNotAlreadyDisplayed = this.subCollectionDocs(d, true).filter(dc => !this._docs.includes(dc));
+            let docsNotAlreadyDisplayed = this.subCollectionDocs(d, true).filter(dc => !this._containedDocs.includes(dc));
             docsFromChildren = docsFromChildren.concat(docsNotAlreadyDisplayed);
         });
         let docs = this.filteredDocs;
@@ -1328,6 +1226,13 @@ export class CollectionSchemaView extends CollectionSubView() {
         return docs;
     }
 
+    /**
+     * Sorts docs first alphabetically and then numerically. 
+     * @param field the column being sorted
+     * @param desc whether the sort is ascending or descending
+     * @param persistent whether the sort is applied persistently or is one-shot
+     * @returns 
+     */
     sortDocs = (field: string, desc: boolean, persistent?: boolean) => {
         const numbers: Doc[] = [];
         const strings: Doc[] = []; 
@@ -1349,10 +1254,13 @@ export class CollectionSchemaView extends CollectionSubView() {
         } else sortedStrings = strings.slice().sort((docB, docA) => collator.compare(Field.toString(docA[field] as FieldType), Field.toString(docB[field] as FieldType)));
 
         const sortedDocs = desc ? sortedNums.concat(sortedStrings) : sortedStrings.concat(sortedNums);
-        if (!persistent) this._docs = sortedDocs;
+        if (!persistent) this._containedDocs = sortedDocs;
         return sortedDocs;
     }
     
+    /**
+     * Returns all docs minus those currently being dragged by the user.
+     */
     @computed get docsWithDrag() {
         let docs = this.docs.slice();
         if (this.sortField){
@@ -1380,7 +1288,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             <div className="collectionSchemaView" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} 
             onDrop={this.onExternalDrop.bind(this)} 
             onPointerMove={e => this.onPointerMove(e)} 
-            onPointerDown={() => {this.closeColumnMenu(); this.setColDrag(false)}}>
+            onPointerDown={() => {this.closeNewColumnMenu(); this.setColDrag(false)}}>
                 <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }} />
                 <div
                     className="schema-table"
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 9f6478041..6da236d82 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -71,7 +71,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
     @action updateAlt = (newAlt: string) => {this._altTitle = newAlt};
     updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)};
-    openKeyDropdown = () => {!this._props.schemaView._colBeingDragged && this._props.schemaView.openColumnMenu(this._props.columnIndex, false)};
+    openKeyDropdown = () => {!this._props.schemaView._colBeingDragged && this._props.schemaView.openNewColumnMenu(this._props.columnIndex, false)};
     toggleEditing = (editing: boolean) => {
         this._inputRef?.setIsEditing(editing); 
         this._inputRef?.setIsFocused(editing);
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 8afd1bbf1..bb9ea7e17 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -631,6 +631,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     //     return new Doc;
     // }
 
+    /**
+     * Populates a preset template framework with content from a datavizbox or any AI-generated content.
+     * @param template the preloaded template framework being filled in
+     * @param assignments a list of template field numbers (from top to bottom) and their assigned columns from the linked dataviz 
+     * @returns a doc containing the fully rendered template
+     */
     fillPresetTemplate = async(template: TemplateDocInfos, assignments: {[field: string]: Col}): Promise<Doc> => {
         const wordLimit = (size: TemplateFieldSize) => {
             switch (size) {
-- 
cgit v1.2.3-70-g09d2


From d8a43b76f101a2f38ef1e3e9cbf8ec036468481d Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 22 Sep 2024 15:29:28 -0400
Subject: header comments + change to cellfield updating

---
 .../collectionSchema/CollectionSchemaView.tsx      | 22 +++++++++-
 .../collectionSchema/SchemaCellField.tsx           | 48 +++++++++++++++-------
 .../collectionSchema/SchemaColumnHeader.tsx        |  6 +--
 .../collections/collectionSchema/SchemaRowBox.tsx  | 11 ++---
 .../collectionSchema/SchemaTableCell.tsx           | 15 ++++---
 5 files changed, 69 insertions(+), 33 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 0e5a1e6b6..11a4e88f9 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -495,6 +495,26 @@ export class CollectionSchemaView extends CollectionSubView() {
         return adjIndex;
     };
 
+    @action
+    setRelCursorIndex = (mouseY: number) => {
+        this._mouseCoordinates.y = mouseY; // updates this.rowDropIndex computed value to overwrite the old cached value
+
+        const rowHeight = CollectionSchemaView._rowHeight;
+        const adjInitMouseY = mouseY - rowHeight - 100; // rowHeight: height of the column menu cells | 100: height of the top menu
+        const yOffset = this._lowestSelectedIndex * rowHeight;
+
+        const heights = this._selectedDocs.map(() => this.rowHeightFunc());
+        let index: number = 0;
+        heights.reduce((total, curr, i) => {
+            if (total <= adjInitMouseY && total + curr >= adjInitMouseY) {
+                if (adjInitMouseY <= total + curr) index = i;
+                else index = i + 1;
+            }
+            return total + curr;
+        }, yOffset);
+        this._relCursorIndex = index;
+    };
+
     highlightDraggedColumn = (index: number) =>
         this._colEles.forEach((colRef, i) => {
             const edgeStyle = i === index ? `solid 2px ${Colors.MEDIUM_BLUE}` : '';
@@ -731,7 +751,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const field = this.columnKeys[col];
         const refToAdd = `d${docIndex}.${field}`
         const editedField = this._referenceSelectMode.currEditing ? this._referenceSelectMode.currEditing as SchemaCellField : null;
-        editedField?.appendText(refToAdd, true);
+        editedField?.insertText(refToAdd, true);
         editedField?.setupRefSelect(false);
         return;
     }
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 1ee79fa0b..72dcc00e6 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -9,6 +9,16 @@ import { ObjectField } from "../../../../fields/ObjectField";
 import { Doc } from "../../../../fields/Doc";
 import { DocumentView } from "../../nodes/DocumentView";
 
+/**
+ * The SchemaCellField renders text in schema cells while the user is editing, and updates the
+ * contents of the field based on user input. It handles some cell-side logic for equations, such
+ * as how equations are broken up within the text.
+ * 
+ * The current implementation parses innerHTML to create spans based on the text in the cell. 
+ * A more robust/safer approach would directly add elements in the react structure, but this
+ * has been challenging to implement.  
+ */
+
 export interface SchemaCellFieldProps {
     contents: any;
     fieldContents?: FieldViewProps;
@@ -147,20 +157,30 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         return chunkedText;
     }
 
+    /**
+     * Sets the rendered content of the cell to save user inputs. 
+     * @param content the content to set
+     * @param restoreCursorPos whether the cursor should be set back to where it was rather than the 0th index; should usually be true
+     */
     @action 
     setContent = (content: string, restoreCursorPos?: boolean) => {
         const pos = this.cursorPosition;
         this._displayedContent = this.makeSpans(content);
-        console.log('print', content);
         restoreCursorPos && setTimeout(() => this.setCursorPosition(pos));
     }
 
+    //Called from schemaview when a cell is selected to add a reference to the equation
+    /**
+     * Inserts text at the given index.
+     * @param text The text to append.
+     * @param atPos he index at which to insert the text. If empty, defaults to end.
+     */
     @action
-    appendText = (text: string, atCursorPos?: boolean) => {
+    insertText = (text: string, atPos?: boolean) => {
         const content = this._unrenderedContent;
         const cursorPos = this.cursorPosition;
         const robustPos = cursorPos ?? content.length;
-        const newText = atCursorPos ? content.slice(0, robustPos) + text + content.slice(cursorPos ?? content.length) : this._unrenderedContent.concat(text);
+        const newText = atPos ? content.slice(0, robustPos) + text + content.slice(cursorPos ?? content.length) : this._unrenderedContent.concat(text);
         this.onChange(undefined, newText);
         setTimeout(() => this.setCursorPosition(robustPos + text.length));
     }
@@ -172,6 +192,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         return wasFocused !== this._editing;
     };
 
+    /**
+     * Gets the cursor's position index within the text being edited.
+     */
     get cursorPosition() {
         const selection = window.getSelection();
         if (!selection || selection.rangeCount === 0 || !this._inputref) return null; 
@@ -185,6 +208,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         return adjRange.toString().length; 
     }
 
+
     setCursorPosition = (position: number | null) => {
         const selection = window.getSelection();
         if (!selection || position === null || !this._inputref) return; 
@@ -220,9 +244,9 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     //This function checks if a visual update (eg. coloring a cell reference) should be made. It's meant to
     //save on processing upkeep vs. constantly rerendering, but I think the savings are minimal for now
-    // shouldUpdate = (prevVal: string, currVal: string) => {
-    //     if (this._props.getCells(currVal).length !== this._props.getCells(prevVal).length) return true;
-    // };
+    shouldUpdate = (prevVal: string, currVal: string) => {
+        if (this._props.getCells(currVal).length !== this._props.getCells(prevVal).length) return true;
+    };
 
     onChange = (e: FormEvent<HTMLDivElement> | undefined, newText?: string) => {
         const prevVal = this._unrenderedContent;
@@ -235,7 +259,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         }
         this._unrenderedContent = targVal;
         this._props.highlightCells?.(targVal);
-        this.setContent(targVal, true);
+        if (this.shouldUpdate(prevVal, targVal)) this.setContent(targVal, true);
         this.setupRefSelect(this.refSelectConditionMet);
     };
 
@@ -248,10 +272,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.nativeEvent.defaultPrevented) return; // hack .. DashFieldView grabs native events, but react ignores stoppedPropagation and preventDefault, so we need to check it here
-        // if (e.metaKey) {
-        //     e.stopPropagation();
-        //     e.preventDefault();
-        // }
+
         switch (e.key) {
             case 'Tab':
                 e.stopPropagation();
@@ -295,7 +316,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         }
     };
 
-
     @action
     onClick = (e?: React.MouseEvent) => {
         if (this._props.editing !== false) {
@@ -312,6 +332,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             this._dependencyMessageShown = true;
             return;
         }
+
+        this.setContent(this._unrenderedContent);
         
         if (this._props.SetValue(this._unrenderedContent, shiftDown, enterKey)) {
             this._editing = false;
@@ -327,8 +349,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         }
     }
 
-    //<FieldView {...this._props.fieldContents}/>
-
     staticDisplay = () => {
         return <span className='editableView-static'>
         {
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 6da236d82..3495c5ab4 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -5,23 +5,19 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
-import { Colors } from '../../global/globalEnums';
 import './CollectionSchemaView.scss';
 import { EditableView } from '../../EditableView';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider';
 import { FieldViewProps } from '../../nodes/FieldView';
-import { Doc, Field } from '../../../../fields/Doc';
+import { Doc } from '../../../../fields/Doc';
 import { dropActionType } from '../../../util/DropActionTypes';
 import { Transform } from '../../../util/Transform';
 import { SchemaTableCell } from './SchemaTableCell';
 import { DocCast } from '../../../../fields/Types';
 import { computedFn } from 'mobx-utils';
 import { CollectionSchemaView } from './CollectionSchemaView';
-import { SnappingManager } from '../../../util/SnappingManager';
 import { undoable } from '../../../util/UndoManager';
-import { FInfo } from '../../../documents/Documents';
-import { ColumnType } from '../../../../fields/SchemaHeaderField';
 import { IconButton, Size } from 'browndash-components';
 
 export enum SchemaFieldType {
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index ec94a8077..b928a5c67 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -25,6 +25,12 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { infoState } from '../collectionFreeForm/CollectionFreeFormInfoState';
 import { TbShieldX } from 'react-icons/tb';
 
+/**
+ * The SchemaRowBox renders a doc as a row of cells, with each cell representing
+ * one field value of the doc. It mostly handles communication from the SchemaView 
+ * to each SchemaCell, passing down necessary functions are props.
+ */
+
 interface SchemaRowBoxProps extends FieldViewProps {
     rowIndex: number;
 }
@@ -51,10 +57,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         return this.schemaView.Document;
     }
 
-    @computed get rowIndex() {
-        return this.schemaView?.rowIndex(this.Document) ?? -1;
-    }
-
     componentDidMount(): void {
         this._props.setContentViewBox?.(this);
     }
@@ -164,7 +166,6 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                             selectReference={this.selectReference}
                             refSelectModeInfo={this.schemaView._referenceSelectMode}
                             eqHighlightFunc={this.eqHighlightFunc}
-                            equationHighlightRef={this.schemaView._cellHighlightColors}
                             highlightCells={this.highlightCells}
                             isolatedSelection={this.isolatedSelection}
                             key={key}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index e2a05da7f..1bca3c84d 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -30,12 +30,17 @@ import { Colors } from '../../global/globalEnums';
 import { DocumentView } from '../../nodes/DocumentView';
 import { FieldViewProps } from '../../nodes/FieldView';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
-import { CollectionSchemaView, FInfotoColType } from './CollectionSchemaView';
+import { FInfotoColType } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
-import { ContextMenu } from '../../ContextMenu';
 import { SchemaCellField } from './SchemaCellField';
 
+/**
+ * SchemaTableCells make up the majority of the visual representation of the SchemaView.
+ * They are rendered for each cell in the SchemaView, and each represents one field value
+ * of a doc. Editing the content of the cell changes the corresponding doc's field value. 
+ */
+
 export interface SchemaTableCellProps {
     Document: Doc;
     col: number;
@@ -62,7 +67,6 @@ export interface SchemaTableCellProps {
     rowSelected: () => boolean;
     isolatedSelection: (doc: Doc) => [boolean, boolean];
     highlightCells: (text: string) => void;
-    equationHighlightRef: ObservableMap<HTMLDivElement, string>;
     eqHighlightFunc: (text: string) => HTMLDivElement[] | [];
     refSelectModeInfo: {enabled: boolean, currEditing: SchemaCellField | undefined};
     selectReference: (doc: Doc, col: number) => void;
@@ -143,11 +147,6 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         return { color, textDecoration, fieldProps, cursor, pointerEvents };
     }
 
-    // @action
-    // appendTextToField = (text: string) => {
-    //     this._fieldRef?.appendText(text);
-    // }
-        
     adjustSelfReference = (field: string) => {
         const modField = field.replace(/\bthis.\b/g, `d${this.docIndex}.`);
         return modField;
-- 
cgit v1.2.3-70-g09d2


From cf45abf8ada938caddb226c825166d4acdee3086 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Sun, 29 Sep 2024 19:55:40 -0400
Subject: linting

---
 .../collectionSchema/CollectionSchemaView.tsx      | 56 +++++++++-------------
 .../collectionSchema/SchemaCellField.tsx           |  4 +-
 .../collectionSchema/SchemaColumnHeader.tsx        |  6 +--
 .../collections/collectionSchema/SchemaRowBox.tsx  | 29 +++++------
 .../collectionSchema/SchemaTableCell.tsx           |  8 +---
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      |  4 ++
 6 files changed, 44 insertions(+), 63 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 11a4e88f9..51b3e1532 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -7,16 +7,15 @@ import * as React from 'react';
 import { ClientUtils, returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
 import { Doc, DocListCast, Field, FieldType, IdToDoc, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
-import { AclPrivate, DocData } from '../../../../fields/DocSymbols';
+import { DocData } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
-import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types';
+import { BoolCast, NumCast, StrCast } from '../../../../fields/Types';
 import { DocUtils } from '../../../documents/DocUtils';
 import { Docs, DocumentOptions, FInfo } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
 import { dropActionType } from '../../../util/DropActionTypes';
-import { SettingsManager } from '../../../util/SettingsManager';
 import { undoBatch, undoable } from '../../../util/UndoManager';
 import { ContextMenu } from '../../ContextMenu';
 import { EditableView } from '../../EditableView';
@@ -31,20 +30,9 @@ import { CollectionSubView } from '../CollectionSubView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
-import { ActionButton } from '@adobe/react-spectrum';
-import { CollectionMasonryViewFieldRow } from '../CollectionMasonryViewFieldRow';
-import { Func } from 'mocha';
-import { CollectionView } from '../CollectionView';
-import { listSpec } from '../../../../fields/Schema';
-import { GetEffectiveAcl } from '../../../../fields/util';
 import { ContextMenuProps } from '../../ContextMenuItem';
-import { truncate } from 'lodash';
 import { DocumentManager } from '../../../util/DocumentManager';
-import { TbHemispherePlus } from 'react-icons/tb';
-import { docs_v1 } from 'googleapis';
 import { SchemaCellField } from './SchemaCellField';
-import { threadId } from 'worker_threads';
-import { FontIconBox } from '../../nodes/FontIconBox/FontIconBox';
 import { SnappingManager } from '../../../util/SnappingManager';
 
 /**
@@ -458,7 +446,7 @@ export class CollectionSchemaView extends CollectionSubView() {
      * @returns column index
      */
     findColDropIndex = (mouseX: number) => {
-        let xOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0,0)[0] + CollectionSchemaView._rowMenuWidth; 
+        const xOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0,0)[0] + CollectionSchemaView._rowMenuWidth; 
         let index: number | undefined;
         this.displayColumnWidths.reduce((total, curr, i) => {
             if (total <= mouseX && total + curr >= mouseX) {
@@ -562,7 +550,7 @@ export class CollectionSchemaView extends CollectionSubView() {
      */
     highlightSortedColumn = (field?: string, descending?: boolean) => {
         let index = -1;
-        let highlightColors: string[] = [];
+        const highlightColors: string[] = [];
         const rowCount: number = this._containedDocs.length + 1;
         if (field || this.sortField){
             index = this.columnKeys.indexOf(field || this.sortField);
@@ -1169,20 +1157,20 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     /**
-     * Gets docs contained by collections within the schema
+     * Gets docs contained by collections within the schema. Currently defunct.
      * @param doc 
      * @param displayed 
      * @returns 
      */
-    subCollectionDocs = (doc: Doc, displayed: boolean) => {
-        const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]);
-        let collections: Array<Doc> = [];
-        if (displayed) collections = childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema);
-        else collections = childDocs.filter(d => d.type === 'collection' && !d._childrenSharedWithSchema);
-        let toReturn: Doc[] = [...childDocs];
-        collections.forEach(d => toReturn = toReturn.concat(this.subCollectionDocs(d, displayed)));
-        return toReturn;
-    }
+    // subCollectionDocs = (doc: Doc, displayed: boolean) => {
+    //     const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]);
+    //     let collections: Array<Doc> = [];
+    //     if (displayed) collections = childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema);
+    //     else collections = childDocs.filter(d => d.type === 'collection' && !d._childrenSharedWithSchema);
+    //     let toReturn: Doc[] = [...childDocs];
+    //     collections.forEach(d => toReturn = toReturn.concat(this.subCollectionDocs(d, displayed)));
+    //     return toReturn;
+    // }
 
     /**
      * Applies any filters active on the schema to filter out docs that don't match.
@@ -1234,16 +1222,16 @@ export class CollectionSchemaView extends CollectionSubView() {
      * Returns all child docs of the schema and child docs of contained collections that satisfy applied filters.
      */
     @computed get docs() {
-        let docsFromChildren: Doc[] = [];
+        //let docsFromChildren: Doc[] = [];
 
-        const displayedCollections = this.childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema);
-        displayedCollections.forEach(d => {
-            let docsNotAlreadyDisplayed = this.subCollectionDocs(d, true).filter(dc => !this._containedDocs.includes(dc));
-            docsFromChildren = docsFromChildren.concat(docsNotAlreadyDisplayed);
-        });
-        let docs = this.filteredDocs;
+        // Functionality for adding child docs
+        //const displayedCollections = this.childDocs.filter(d => d.type === 'collection' && d._childrenSharedWithSchema);
+        // displayedCollections.forEach(d => {
+        //     let docsNotAlreadyDisplayed = this.subCollectionDocs(d, true).filter(dc => !this._containedDocs.includes(dc));
+        //     docsFromChildren = docsFromChildren.concat(docsNotAlreadyDisplayed);
+        // });
 
-        return docs;
+        return this.filteredDocs;;
     }
 
     /**
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 72dcc00e6..065544ac9 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -148,10 +148,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             }
         }
 
-        let matchNum = 0;
         matches.forEach((match: string) => {
             chunkedText = chunkedText.replace(match, this.generateSpan(match, cells.get(match)));
-            ++matchNum;
         })
 
         return chunkedText;
@@ -365,7 +363,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             className='schemaField-editing'
             ref={r => { this._inputref = r; }}
             style={{ cursor: 'text', outline: 'none', overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }}
-            onBlur={e => {this._props.refSelectModeInfo.enabled ? setTimeout(() => {this.setIsFocused(true)}, 1000) : this.finalizeEdit(false, true, false)}}
+            onBlur={() => {this._props.refSelectModeInfo.enabled ? setTimeout(() => {this.setIsFocused(true)}, 1000) : this.finalizeEdit(false, true, false)}}
             autoFocus
             onInput={this.onChange}
             onKeyDown={this.onKeyDown}
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 3495c5ab4..cf4fe4ef4 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -147,7 +147,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                         this._altTitle = undefined;
                         this._props.finishEdit?.();
                         return true;
-                    } else if (enterKey) this.updateAlt(value);
+                    }
                     this._props.finishEdit?.(); 
                     return true;
                 }, 'edit column header')}
@@ -157,7 +157,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
 
     public static isDefaultField = (key: string) => {
         const defaultPattern = /EmptyColumnKey/;
-        let isDefault: boolean = (defaultPattern.exec(key) != null);
+        const isDefault: boolean = (defaultPattern.exec(key) != null);
         return isDefault;
     }
 
@@ -220,7 +220,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                         setupMoveUpEvents(
                             this,
                             e,
-                            e => {return this._inputRef?.setIsEditing(false) ?? false},
+                            () => {return this._inputRef?.setIsEditing(false) ?? false},
                             emptyFunction,
                             emptyFunction,
                             );
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index b928a5c67..a8a4ef2c2 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -3,27 +3,21 @@ import { computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
 import * as React from 'react';
-import { CgClose, CgLock, CgLockUnlock, CgMenu } from 'react-icons/cg';
-import { FaExternalLinkAlt } from 'react-icons/fa';
 import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
-import { Doc, DocListCast, FieldResult } from '../../../../fields/Doc';
+import { Doc } from '../../../../fields/Doc';
 import { BoolCast } from '../../../../fields/Types';
 import { Transform } from '../../../util/Transform';
 import { undoable } from '../../../util/UndoManager';
 import { ViewBoxBaseComponent } from '../../DocComponent';
-import { Colors } from '../../global/globalEnums';
 import { FieldView, FieldViewProps } from '../../nodes/FieldView';
 import { OpenWhere } from '../../nodes/OpenWhere';
 import { CollectionSchemaView } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
 import { SchemaTableCell } from './SchemaTableCell';
 import { ContextMenu } from '../../ContextMenu';
-import { CollectionFreeFormView } from '../collectionFreeForm';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { infoState } from '../collectionFreeForm/CollectionFreeFormInfoState';
-import { TbShieldX } from 'react-icons/tb';
 
 /**
  * The SchemaRowBox renders a doc as a row of cells, with each cell representing
@@ -78,16 +72,17 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
             event: () => this.schemaView.removeDoc(this.Document),
             icon: 'minus',
         });
-        const childDocs = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)])
-        if (this.Document.type === 'collection' && childDocs.length) {
-                ContextMenu.Instance.addItem({
-                description: this.Document._childrenSharedWithSchema ? 'Remove children from schema' : 'Add children to schema',
-                event: () => {
-                    this.Document._childrenSharedWithSchema = !this.Document._childrenSharedWithSchema; 
-                },
-                icon: this.Document._childrenSharedWithSchema ? 'minus' : 'plus',
-            });
-        }
+        // Defunct option to add child docs of collections to the main schema
+        // const childDocs = DocListCast(this.Document[Doc.LayoutFieldKey(this.Document)])
+        // if (this.Document.type === 'collection' && childDocs.length) {
+        //         ContextMenu.Instance.addItem({
+        //         description: this.Document._childrenSharedWithSchema ? 'Remove children from schema' : 'Add children to schema',
+        //         event: () => {
+        //             this.Document._childrenSharedWithSchema = !this.Document._childrenSharedWithSchema; 
+        //         },
+        //         icon: this.Document._childrenSharedWithSchema ? 'minus' : 'plus',
+        //     });
+        // }
         ContextMenu.Instance.displayMenu(x, y, undefined, false);
     }
 
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 1bca3c84d..247739fd2 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -3,7 +3,7 @@
 /* eslint-disable no-use-before-define */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Popup, Size, Type } from 'browndash-components';
-import { ObservableMap, action, computed, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { extname } from 'path';
 import * as React from 'react';
@@ -161,14 +161,10 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
 
         const idPattern = /idToDoc\((.*?)\)/g;
         let matches;
-        let results = new Array<[id: string, func: string]>();
+        const results = new Array<[id: string, func: string]>();
         while ((matches = idPattern.exec(field)) !== null) {results.push([matches[0], matches[1].replace(/"/g, '')]); }
         results.forEach((idFuncPair) => {modField = modField.replace(idFuncPair[0], 'd' + (DocumentView.getDocViewIndex(IdToDoc(idFuncPair[1]))).toString());})
 
-        for (let i = 0; i < modField.length; ++i){
-            
-        }
-
         if (modField.endsWith(';')) modField = modField.substring(0, modField.length - 1);
 
         const inQuotes = (field: string) => {return ((field.startsWith('`') && field.endsWith('`')) || (field.startsWith("'") && field.endsWith("'")) || (field.startsWith('"') && field.endsWith('"')))}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index bb9ea7e17..5d5c35dce 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -2181,4 +2181,8 @@ export class TemplateLayouts {
 //         }]
 //     };
 
+}
+
+export class ContentField extends Field {
+    
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 431a03690ed131e4bb925cec465d91adfb0d9421 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 30 Sep 2024 18:26:59 -0400
Subject: fixed so that you can't set the author field from the schema view.
 fixed schema view to not trigger cell updates after cells have been unmounted
 (e.g, so that dragging a tab over a schema vew doesn't crash)

---
 .../collectionSchema/SchemaCellField.tsx           |  190 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 2115 +++++++++++---------
 2 files changed, 1226 insertions(+), 1079 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 065544ac9..e26dd9646 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -1,22 +1,22 @@
-import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from "mobx";
-import { ObservableReactComponent } from "../../ObservableReactComponent";
-import { observer } from "mobx-react";
-import { OverlayView } from "../../OverlayView";
-import { DocumentIconContainer } from "../../nodes/DocumentIcon";
-import React, { FormEvent } from "react";
-import { FieldView, FieldViewProps } from "../../nodes/FieldView";
-import { ObjectField } from "../../../../fields/ObjectField";
-import { Doc } from "../../../../fields/Doc";
-import { DocumentView } from "../../nodes/DocumentView";
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
+import { observer } from 'mobx-react';
+import { OverlayView } from '../../OverlayView';
+import { DocumentIconContainer } from '../../nodes/DocumentIcon';
+import React, { FormEvent } from 'react';
+import { FieldView, FieldViewProps } from '../../nodes/FieldView';
+import { ObjectField } from '../../../../fields/ObjectField';
+import { Doc } from '../../../../fields/Doc';
+import { DocumentView } from '../../nodes/DocumentView';
 
 /**
  * The SchemaCellField renders text in schema cells while the user is editing, and updates the
  * contents of the field based on user input. It handles some cell-side logic for equations, such
  * as how equations are broken up within the text.
- * 
- * The current implementation parses innerHTML to create spans based on the text in the cell. 
+ *
+ * The current implementation parses innerHTML to create spans based on the text in the cell.
  * A more robust/safer approach would directly add elements in the react structure, but this
- * has been challenging to implement.  
+ * has been challenging to implement.
  */
 
 export interface SchemaCellFieldProps {
@@ -26,7 +26,7 @@ export interface SchemaCellFieldProps {
     oneLine?: boolean;
     Document: Doc;
     fieldKey: string;
-    refSelectModeInfo: {enabled: boolean, currEditing: SchemaCellField | undefined};
+    refSelectModeInfo: { enabled: boolean; currEditing: SchemaCellField | undefined };
     highlightCells?: (text: string) => void;
     GetValue(): string | undefined;
     SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean;
@@ -35,7 +35,6 @@ export interface SchemaCellFieldProps {
 
 @observer
 export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldProps> {
-
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _inputref: HTMLDivElement | null = null;
     private _unrenderedContent: string = '';
@@ -48,7 +47,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     constructor(props: SchemaCellFieldProps) {
         super(props);
         makeObservable(this);
-        setTimeout(() => { 
+        setTimeout(() => {
             this._unrenderedContent = this._props.GetValue() ?? '';
             this.setContent(this._unrenderedContent);
         }); //must be moved to end of batch or else other docs aren't loaded, so render as d-1 in function
@@ -56,9 +55,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
 
     get docIndex(){return DocumentView.getDocViewIndex(this._props.Document);} // prettier-ignore
 
-    get selfRefPattern() {return `d${this.docIndex}.${this._props.fieldKey}`};
+    get selfRefPattern() {
+        return `d${this.docIndex}.${this._props.fieldKey}`;
+    }
 
-    @computed get lastCharBeforeCursor(){
+    @computed get lastCharBeforeCursor() {
         const pos = this.cursorPosition;
         const content = this._unrenderedContent;
         const text = this._unrenderedContent.substring(0, pos ?? content.length);
@@ -90,7 +91,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                             this._props.highlightCells?.(this._unrenderedContent);
                             this.setContent(this._unrenderedContent);
                             setTimeout(() => this.setCursorPosition(this._unrenderedContent.length));
-                        } 
+                        }
                     });
                 } else {
                     this._overlayDisposer?.();
@@ -104,10 +105,11 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         this._disposers.fieldUpdate = reaction(
             () => this._props.GetValue(),
             fieldVal => {
+                console.log('Update: ' + this._props.Document.title, this._props.fieldKey, fieldVal);
                 this._unrenderedContent = fieldVal ?? '';
                 this.finalizeEdit(false, false, false);
             }
-        )
+        );
     }
 
     componentDidUpdate(prevProps: Readonly<SchemaCellFieldProps>) {
@@ -120,7 +122,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             });
     }
 
+    _unmounted = false;
     componentWillUnmount(): void {
+        this._unmounted = true;
+        console.log('Unmount: ' + this._props.Document.title, this._props.fieldKey);
         this._overlayDisposer?.();
         Object.values(this._disposers).forEach(disposer => disposer?.());
         this.finalizeEdit(false, true, false);
@@ -129,7 +134,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     generateSpan = (text: string, cell: HTMLDivElement | undefined) => {
         const selfRef = text === this.selfRefPattern;
         return `<span style="text-decoration: ${selfRef ? 'underline' : 'none'}; text-decoration-color: red; color: ${selfRef ? 'gray' : cell?.style.borderTop.replace('2px solid', '')}">${text}</span>`;
-    }
+    };
 
     makeSpans = (content: string) => {
         let chunkedText = content;
@@ -144,28 +149,28 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             const cell = this._props.getCells(match[0]);
             if (cell.length) {
                 matches.push(match[0]);
-                cells.set(match[0], cell[0])
+                cells.set(match[0], cell[0]);
             }
         }
 
         matches.forEach((match: string) => {
             chunkedText = chunkedText.replace(match, this.generateSpan(match, cells.get(match)));
-        })
+        });
 
         return chunkedText;
-    }
+    };
 
     /**
-     * Sets the rendered content of the cell to save user inputs. 
+     * Sets the rendered content of the cell to save user inputs.
      * @param content the content to set
      * @param restoreCursorPos whether the cursor should be set back to where it was rather than the 0th index; should usually be true
      */
-    @action 
+    @action
     setContent = (content: string, restoreCursorPos?: boolean) => {
         const pos = this.cursorPosition;
         this._displayedContent = this.makeSpans(content);
         restoreCursorPos && setTimeout(() => this.setCursorPosition(pos));
-    }
+    };
 
     //Called from schemaview when a cell is selected to add a reference to the equation
     /**
@@ -181,7 +186,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         const newText = atPos ? content.slice(0, robustPos) + text + content.slice(cursorPos ?? content.length) : this._unrenderedContent.concat(text);
         this.onChange(undefined, newText);
         setTimeout(() => this.setCursorPosition(robustPos + text.length));
-    }
+    };
 
     @action
     setIsFocused = (value: boolean) => {
@@ -195,32 +200,31 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
      */
     get cursorPosition() {
         const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0 || !this._inputref) return null; 
-    
+        if (!selection || selection.rangeCount === 0 || !this._inputref) return null;
+
         const range = selection.getRangeAt(0);
         const adjRange = range.cloneRange();
-    
+
         adjRange.selectNodeContents(this._inputref);
         adjRange.setEnd(range.startContainer, range.startOffset);
 
-        return adjRange.toString().length; 
+        return adjRange.toString().length;
     }
 
-
     setCursorPosition = (position: number | null) => {
         const selection = window.getSelection();
-        if (!selection || position === null || !this._inputref) return; 
-    
+        if (!selection || position === null || !this._inputref) return;
+
         const range = document.createRange();
         range.setStart(this._inputref, 0);
         range.collapse(true);
-    
+
         let currentPos = 0;
         const setRange = (nodes: NodeList) => {
             for (let i = 0; i < nodes.length; ++i) {
                 const node = nodes[i];
 
-                if (node.nodeType === Node.TEXT_NODE) { 
+                if (node.nodeType === Node.TEXT_NODE) {
                     if (!node.textContent) return;
                     const nextPos = currentPos + node.textContent.length;
                     if (position <= nextPos) {
@@ -231,11 +235,10 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                         return true;
                     }
                     currentPos = nextPos;
-
-                } else if ((node.nodeType === Node.ELEMENT_NODE) && (setRange(node.childNodes))) return true;
+                } else if (node.nodeType === Node.ELEMENT_NODE && setRange(node.childNodes)) return true;
             }
             return false;
-        }
+        };
 
         setRange(this._inputref.childNodes);
     };
@@ -265,7 +268,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
         const properties = this._props.refSelectModeInfo;
         properties.enabled = enabled;
         properties.currEditing = enabled ? this : undefined;
-    }
+    };
 
     @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -289,9 +292,12 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                 e.stopPropagation();
                 this._editing = false;
                 break;
-            case 'ArrowUp': case 'ArrowDown': case 'ArrowLeft': case 'ArrowRight': // prettier-ignore
+            case 'ArrowUp':
+            case 'ArrowDown':
+            case 'ArrowLeft':
+            case 'ArrowRight': // prettier-ignore
                 e.stopPropagation();
-                setTimeout(() => this.setupRefSelect(this.refSelectConditionMet), 0)
+                setTimeout(() => this.setupRefSelect(this.refSelectConditionMet), 0);
                 break;
             case ' ':
                 e.stopPropagation();
@@ -300,13 +306,16 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                 setTimeout(() => {
                     this.setContent(this._unrenderedContent);
                     setTimeout(() => this.setCursorPosition(cursorPos));
-                }
-                , 0);
+                }, 0);
                 break;
             case 'u': // for some reason 'u' otherwise exits the editor
                 e.stopPropagation();
                 break;
-            case 'Shift': case 'Alt': case 'Meta': case 'Control': case ':': // prettier-ignore
+            case 'Shift':
+            case 'Alt':
+            case 'Meta':
+            case 'Control':
+            case ':': // prettier-ignore
                 break;
             // eslint-disable-next-line no-fallthrough
             default:
@@ -323,66 +332,63 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     };
 
     @action
-    finalizeEdit(shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
+    finalizeEdit = (shiftDown: boolean, lostFocus: boolean, enterKey: boolean) => {
+        if (this._unmounted) {
+            return;
+        }
         if (this._unrenderedContent.replace(this.selfRefPattern, '') !== this._unrenderedContent) {
-            this._dependencyMessageShown ? this._dependencyMessageShown = false :
-            alert(`Circular dependency detected. Please update the field at ${this.selfRefPattern}.`)
+            if (this._dependencyMessageShown) {
+                this._dependencyMessageShown = false;
+            } else alert(`Circular dependency detected. Please update the field at ${this.selfRefPattern}.`);
             this._dependencyMessageShown = true;
             return;
         }
 
         this.setContent(this._unrenderedContent);
-        
-        if (this._props.SetValue(this._unrenderedContent, shiftDown, enterKey)) {
-            this._editing = false;
-        } else {
-            this._editing = false;
-            !lostFocus &&
-                setTimeout(
-                    action(() => {
-                        this._editing = true;
-                    }),
-                    0
-                );
+
+        if (!this._props.SetValue(this._unrenderedContent, shiftDown, enterKey) && !lostFocus) {
+            setTimeout(action(() => (this._editing = true)));
         }
-    }
+        this._editing = false;
+    };
 
     staticDisplay = () => {
-        return <span className='editableView-static'>
-        {
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            this._props.fieldContents ?  <FieldView {...this._props.fieldContents}/> : ''
-        }
-        </span>
-    }
+        return <span className="editableView-static">{this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : ''}</span>;
+    };
 
     renderEditor = () => {
         return (
-            <div 
-            contentEditable
-            className='schemaField-editing'
-            ref={r => { this._inputref = r; }}
-            style={{ cursor: 'text', outline: 'none', overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, }}
-            onBlur={() => {this._props.refSelectModeInfo.enabled ? setTimeout(() => {this.setIsFocused(true)}, 1000) : this.finalizeEdit(false, true, false)}}
-            autoFocus
-            onInput={this.onChange}
-            onKeyDown={this.onKeyDown}
-            onPointerDown={e => {e.stopPropagation(); setTimeout(() => this.setupRefSelect(this.refSelectConditionMet), 0)}} //timeout callback ensures that refSelectMode is properly set
-            onClick={e => e.stopPropagation}
-            onPointerUp={e => e.stopPropagation}
-            onPointerMove={e => {e.stopPropagation(); e.preventDefault()}}
-            dangerouslySetInnerHTML={{ __html: this._displayedContent }}
-            >
-            </div>
+            <div
+                contentEditable
+                className="schemaField-editing"
+                ref={r => {
+                    this._inputref = r;
+                }}
+                style={{ cursor: 'text', outline: 'none', overflow: 'auto', minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20 }}
+                onBlur={() => (this._props.refSelectModeInfo.enabled ? setTimeout(() => this.setIsFocused(true), 1000) : this.finalizeEdit(false, true, false))}
+                autoFocus
+                onInput={this.onChange}
+                onKeyDown={this.onKeyDown}
+                onPointerDown={e => {
+                    e.stopPropagation();
+                    setTimeout(() => this.setupRefSelect(this.refSelectConditionMet), 0);
+                }} //timeout callback ensures that refSelectMode is properly set
+                onClick={e => e.stopPropagation}
+                onPointerUp={e => e.stopPropagation}
+                onPointerMove={e => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                }}
+                dangerouslySetInnerHTML={{ __html: this._displayedContent }}></div>
         );
-    }
+    };
 
     render() {
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
-        if ((this._editing && gval !== undefined)) {
+        if (this._editing && gval !== undefined) {
             return <div className={`editableView-container-editing${this._props.oneLine ? '-oneLine' : ''}`}>{this.renderEditor()}</div>;
-        } else return (
-            this._props.contents instanceof ObjectField ? null : (
+        } else
+            return this._props.contents instanceof ObjectField ? null : (
                 <div
                     className={`editableView-container-editing${this._props.oneLine ? '-oneLine' : ''}`}
                     style={{
@@ -393,8 +399,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                     onClick={this.onClick}>
                     {this.staticDisplay()}
                 </div>
-            )
-        );
+            );
     }
-
-}
\ No newline at end of file
+}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 5d5c35dce..32aded9de 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1,50 +1,42 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { Colors } from 'browndash-components';
+import { action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
+import { IDisposer } from 'mobx-utils';
 import * as React from 'react';
-import { ClientUtils, returnAll, returnFalse, returnNone, returnOne, returnZero, setupMoveUpEvents } from '../../../../ClientUtils';
+import ReactLoading from 'react-loading';
+import { ClientUtils, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
+import { emptyFunction } from '../../../../Utils';
 import { Doc, NumListCast, StrListCast } from '../../../../fields/Doc';
-import { DocCast, ImageCast, ScriptCast, StrCast } from '../../../../fields/Types';
+import { Id } from '../../../../fields/FieldSymbols';
+import { DocCast, ImageCast, StrCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
-import { emptyFunction } from '../../../../Utils';
+import { Networking } from '../../../Network';
+import { GPTCallType, gptAPICall, gptImageCall } from '../../../apis/gpt/GPT';
+import { Docs } from '../../../documents/Documents';
+import { DragManager } from '../../../util/DragManager';
+import { MakeTemplate } from '../../../util/DropConverter';
 import { SnappingManager } from '../../../util/SnappingManager';
 import { UndoManager, undoable } from '../../../util/UndoManager';
+import { LightboxView } from '../../LightboxView';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
+import { CollectionFreeFormView } from '../../collections/collectionFreeForm/CollectionFreeFormView';
 import { DocumentView, DocumentViewInternal } from '../DocumentView';
+import { FieldViewProps } from '../FieldView';
+import { OpenWhere } from '../OpenWhere';
 import { DataVizBox } from './DataVizBox';
 import './DocCreatorMenu.scss';
-import { Id } from '../../../../fields/FieldSymbols';
-import { Colors, IconButton, Size } from 'browndash-components';
-import { MakeTemplate } from '../../../util/DropConverter';
-import { DragManager } from '../../../util/DragManager';
-import { GPTCallType, gptAPICall, gptImageCall } from '../../../apis/gpt/GPT';
-import { CollectionFreeFormView } from '../../collections/collectionFreeForm/CollectionFreeFormView';
-import { Docs } from '../../../documents/Documents';
-import { OpenWhere } from '../OpenWhere';
-import { IDisposer } from 'mobx-utils';
-import { LightboxView } from '../../LightboxView';
-import ReactLoading from 'react-loading';
-import { CollectionStackingView } from '../../collections/CollectionStackingView';
-import { FieldViewProps } from '../FieldView';
-import { CollectionViewType } from '../../../documents/DocumentTypes';
-import { dropActionType } from '../../../util/DropActionTypes';
-import { ImageBox } from '../ImageBox';
-import { a } from '@react-spring/web';
-import { RichTextMenu } from '../formattedText/RichTextMenu';
-import e from 'cors';
-import { Networking } from '../../../Network';
 
 export enum LayoutType {
-    Stacked = 'stacked', 
-    Grid = 'grid', 
-    Row = 'row', 
-    Column = 'column', 
-    Custom = 'custom'
+    Stacked = 'stacked',
+    Grid = 'grid',
+    Row = 'row',
+    Column = 'column',
+    Custom = 'custom',
 }
 
 @observer
 export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
-
     static Instance: DocCreatorMenu;
 
     private _disposers: { [name: string]: IDisposer } = {};
@@ -54,13 +46,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _templateDocs: Doc[] = [];
     @observable _selectedTemplate: Doc | undefined = undefined;
     @observable _columns: Col[] = [];
-    @observable _selectedCols: {title: string, type: string, desc: string}[] | undefined = [];
+    @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};
+    @observable _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0 };
     @observable _layoutPreview: boolean = true;
     @observable _layoutPreviewScale: number = 1;
     @observable _savedLayouts: DataVizTemplateLayout[] = [];
-    @observable _expandedPreview: {icon: ImageField, doc: Doc} | undefined = undefined;
+    @observable _expandedPreview: { icon: ImageField; doc: Doc } | undefined = undefined;
 
     @observable _suggestedTemplates: Doc[] = [];
     @observable _GPTOpt: boolean = false;
@@ -76,7 +68,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _hoveredLayoutPreview: number | undefined = undefined;
     @observable _mouseX: number = -1;
     @observable _mouseY: number = -1;
-    @observable _startPos?: {x: number, y: number};
+    @observable _startPos?: { x: number; y: number };
     @observable _shouldDisplay: boolean = false;
 
     @observable _menuContent: 'templates' | 'options' | 'saved' | 'dashboard' = 'templates';
@@ -87,10 +79,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _snapPt: any;
     @observable _resizeHdlId: string = '';
     @observable _resizing: boolean = false;
-    @observable _offset: {x: number, y: number} = {x: 0, y: 0};
+    @observable _offset: { x: number; y: number } = { x: 0, y: 0 };
     @observable _resizeUndo: UndoManager.Batch | undefined = undefined;
-    @observable _initDimensions: {width: number, height: number, x?: number, y?: number} = {width: 300, height: 400, x: undefined, y: undefined};
-    @observable _menuDimensions: {width: number, height: number} = {width: 400, height: 400};
+    @observable _initDimensions: { width: number; height: number; x?: number; y?: number } = { width: 300, height: 400, x: undefined, y: undefined };
+    @observable _menuDimensions: { width: number; height: number } = { width: 400, height: 400 };
     @observable _editing: boolean = false;
 
     constructor(props: any) {
@@ -100,32 +92,40 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         //setTimeout(() => this.generateTemplates(''));
     }
 
-    @action setDataViz = (dataViz: DataVizBox) => { this._dataViz = dataViz };
-    @action setTemplateDocs = (docs: Doc[]) => {this._templateDocs = docs.map(doc => doc.annotationOn ? DocCast(doc.annotationOn):doc)};
-    @action setGSuggestedTemplates = (docs: Doc[]) => {this._suggestedTemplates = docs};
+    @action setDataViz = (dataViz: DataVizBox) => {
+        this._dataViz = dataViz;
+    };
+    @action setTemplateDocs = (docs: Doc[]) => {
+        this._templateDocs = docs.map(doc => (doc.annotationOn ? DocCast(doc.annotationOn) : doc));
+    };
+    @action setGSuggestedTemplates = (docs: Doc[]) => {
+        this._suggestedTemplates = docs;
+    };
 
     @computed get docsToRender() {
         return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
     }
 
-    @computed get rowsCount(){
+    @computed get rowsCount() {
         switch (this._layout.type) {
-            case LayoutType.Row: case LayoutType.Stacked: 
+            case LayoutType.Row:
+            case LayoutType.Stacked:
                 return 1;
             case LayoutType.Column:
                 return this.docsToRender.length;
             case LayoutType.Grid:
                 return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0;
-            default: 
+            default:
                 return 0;
         }
     }
 
-    @computed get columnsCount(){
+    @computed get columnsCount() {
         switch (this._layout.type) {
             case LayoutType.Row:
                 return this.docsToRender.length;
-            case LayoutType.Column: case LayoutType.Stacked: 
+            case LayoutType.Column:
+            case LayoutType.Stacked:
                 return 1;
             case LayoutType.Grid:
                 return this._layout.columns ?? 0;
@@ -140,31 +140,33 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     @computed get fieldsInfos(): Col[] {
         const colInfo = this._dataViz?.colsInfo;
-        return this.selectedFields.map(field => {
-            const fieldInfo = colInfo?.get(field);
-
-            const col: Col = {
-                title: field,
-                type: fieldInfo?.type ?? TemplateFieldType.UNSET,
-                desc: fieldInfo?.desc ?? '',
-                sizes: fieldInfo?.sizes ?? [TemplateFieldSize.MEDIUM]
-            };
-
-            if (fieldInfo?.defaultContent !== undefined) {
-                col.defaultContent = fieldInfo.defaultContent;
-            }
+        return this.selectedFields
+            .map(field => {
+                const fieldInfo = colInfo?.get(field);
+
+                const col: Col = {
+                    title: field,
+                    type: fieldInfo?.type ?? TemplateFieldType.UNSET,
+                    desc: fieldInfo?.desc ?? '',
+                    sizes: fieldInfo?.sizes ?? [TemplateFieldSize.MEDIUM],
+                };
+
+                if (fieldInfo?.defaultContent !== undefined) {
+                    col.defaultContent = fieldInfo.defaultContent;
+                }
 
-            return col;
-        }).concat(this._columns);
+                return col;
+            })
+            .concat(this._columns);
     }
 
-    @computed get canMakeDocs(){
+    @computed get canMakeDocs() {
         return this._selectedTemplate !== undefined && this._layout !== undefined;
     }
 
-    get bounds(): {t: number, b: number, l: number, r: number} {
+    get bounds(): { t: number; b: number; l: number; r: number } {
         const rect = this._ref?.getBoundingClientRect();
-        const bounds = {t: rect?.top ?? 0, b: rect?.bottom ?? 0, l: rect?.left ?? 0, r: rect?.right ?? 0};
+        const bounds = { t: rect?.top ?? 0, b: rect?.bottom ?? 0, l: rect?.left ?? 0, r: rect?.right ?? 0 };
         return bounds;
     }
 
@@ -179,8 +181,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 clickEv.preventDefault();
                 func();
             }, 'create docs')
-        )
-    }
+        );
+    };
 
     @action
     onPointerDown = (e: PointerEvent) => {
@@ -214,10 +216,21 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     componentDidMount() {
         document.addEventListener('pointerdown', this.onPointerDown, true);
         document.addEventListener('pointerup', this.onPointerUp);
-        this._disposers.templates = reaction(() => this._templateDocs.slice(), (docs) => docs.map(this.getIcon));
-        this._disposers.gpt = reaction(() => this._suggestedTemplates.slice(), (docs) => docs.map(this.getIcon));
+        this._disposers.templates = reaction(
+            () => this._templateDocs.slice(),
+            docs => docs.map(this.getIcon)
+        );
+        this._disposers.gpt = reaction(
+            () => this._suggestedTemplates.slice(),
+            docs => docs.map(this.getIcon)
+        );
         //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')})
-        this._disposers.lightbox = reaction(() => LightboxView.LightboxDoc(), doc => { doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu()});
+        this._disposers.lightbox = reaction(
+            () => LightboxView.LightboxDoc(),
+            doc => {
+                doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu();
+            }
+        );
         //this._disposers.fields = reaction(() => this._dataViz?.axes, cols => this._selectedCols = cols?.map(col => { return {title: col, type: '', desc: ''}}))
     }
 
@@ -227,12 +240,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         document.removeEventListener('pointerup', this.onPointerUp);
     }
 
-    updateIcons = (docs: Doc[]) => { docs.map(this.getIcon) }
+    updateIcons = (docs: Doc[]) => {
+        docs.map(this.getIcon);
+    };
 
     @action
     updateSelectedCols = (cols: string[]) => {
-        this._selectedCols
-    }
+        this._selectedCols;
+    };
 
     @action
     toggleDisplay = (x: number, y: number) => {
@@ -246,10 +261,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     @action
-    closeMenu = () => { this._shouldDisplay = false };
+    closeMenu = () => {
+        this._shouldDisplay = false;
+    };
 
     @action
-    openMenu = () => { 
+    openMenu = () => {
         const allTemplates = this._templateDocs.concat(this._suggestedTemplates);
         this._shouldDisplay = true;
         this.updateIcons(allTemplates);
@@ -285,7 +302,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         await new Promise<any>(res => { setTimeout(() => { res(this._interactionLock = undefined)})});
         }); // prettier-ignore
         return true;
-    }
+    };
 
     @action
     onDrag = (e: any): boolean => {
@@ -294,12 +311,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this._initDimensions.x = this._pageX;
         this._initDimensions.y = this._pageY;
         return true;
-    }
+    };
 
     getResizeVals = (thisPt: { x: number; y: number }, dragHdl: string) => {
         const [w, h] = [this._initDimensions.width, this._initDimensions.height];
         const [moveX, moveY] = [thisPt.x - this._snapPt.x, thisPt.y - this._snapPt.y];
-        let vals: {scale: {x: number, y: number}, refPt: [number, number], transl: {x: number, y: number}};
+        let vals: { scale: { x: number; y: number }; refPt: [number, number]; transl: { x: number; y: number } };
         switch (dragHdl) {
             case 'topLeft':    vals = { scale: { x: 1 - moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.r, this.bounds.b], transl: {x: moveX, y: moveY } }; break;
             case 'topRight':   vals = { scale: { x: 1 + moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.l, this.bounds.b], transl: {x: 0, y: moveY } }; break;
@@ -314,11 +331,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return vals;
     };
 
-    resizeView = (refPt: number[], scale: { x: number; y: number }, translation: {x: number, y: number}) => {
-        const refCent = [refPt[0], refPt[1]] // fixed reference point for resize (ie, a point that doesn't move)
+    resizeView = (refPt: number[], scale: { x: number; y: number }, translation: { x: number; y: number }) => {
+        const refCent = [refPt[0], refPt[1]]; // fixed reference point for resize (ie, a point that doesn't move)
         if (this._initDimensions.x === undefined) this._initDimensions.x = this._pageX;
         if (this._initDimensions.y === undefined) this._initDimensions.y = this._pageY;
-        const {height, width, x, y} = this._initDimensions;
+        const { height, width, x, y } = this._initDimensions;
 
         this._menuDimensions.width = Math.max(300, scale.x * width);
         this._menuDimensions.height = Math.max(200, scale.y * height);
@@ -330,10 +347,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const docView = DocumentView.getDocumentView(doc);
         if (docView) {
             docView.ComponentView?.updateIcon?.();
-            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));;
+            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));
         }
         return undefined;
-    };
+    }
 
     @action updateSelectedTemplate = (template: Doc) => {
         if (this._selectedTemplate === template) {
@@ -353,10 +370,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     isSelectedLayout = (layout: DataVizTemplateLayout) => {
-        return this._layout.xMargin === layout.layout.xMargin
-        && this._layout.yMargin === layout.layout.yMargin 
-        && this._layout.type === layout.layout.type 
-        && this._layout.columns === layout.columns;
+        return this._layout.xMargin === layout.layout.xMargin && this._layout.yMargin === layout.layout.yMargin && this._layout.type === layout.layout.type && this._layout.columns === layout.columns;
     };
 
     @action
@@ -365,7 +379,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const origCount = this._callCount;
 
         let prompt: string = `(#${origCount}) Please generate for the fields:`;
-        this.selectedFields?.forEach(field => prompt += ` ${field},`)
+        this.selectedFields?.forEach(field => (prompt += ` ${field},`));
         prompt += ` (-----NOT A FIELD-----) Additional prompt: ${inputText}`;
 
         this._GPTLoading = true;
@@ -375,37 +389,43 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
             if (res && this._callCount === origCount) {
                 this._suggestedTemplates = [];
-                const templates: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[] = JSON.parse(res);
+                const templates: { template_type: string; fieldVals: { title: string; tlx: string; tly: string; brx: string; bry: string }[] }[] = JSON.parse(res);
                 this.createGeneratedTemplates(templates, 500, 500);
             }
         } catch (err) {
             console.error(err);
-        } 
+        }
     };
 
     @action
-    createGeneratedTemplates = (layouts: {template_type: string, fieldVals: {title: string, tlx: string, tly: string, brx: string, bry: string}[]}[], tempWidth: number, tempHeight: number) => { 
+    createGeneratedTemplates = (layouts: { template_type: string; fieldVals: { title: string; tlx: string; tly: string; brx: string; bry: string }[] }[], tempWidth: number, tempHeight: number) => {
         const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         const GPTTemplates: Doc[] = [];
 
         layouts.forEach(layout => {
             const fields: Doc[] = layout.fieldVals.map(field => {
-                const left: number = Number(field.tlx) * tempWidth / 2;    const top: number = Number(field.tly) * tempHeight / 2; //prettier-ignore
-                const right: number = Number(field.brx) * tempWidth / 2;   const bottom: number = Number(field.bry) * tempHeight / 2; //prettier-ignore
-                const height = bottom - top; 
-                const width = right - left; 
-                const doc = !field.title.includes('$$') ? Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top, _text_fontSize: `${height/2}` }) : Docs.Create.ImageDocument('', { _height: height, _width: width, title: field.title.replace(/\$\$/g, ''), x: left, y: top });
+                const left: number = (Number(field.tlx) * tempWidth) / 2;
+                const top: number = Number(field.tly) * tempHeight / 2; //prettier-ignore
+                const right: number = (Number(field.brx) * tempWidth) / 2;
+                const bottom: number = Number(field.bry) * tempHeight / 2; //prettier-ignore
+                const height = bottom - top;
+                const width = right - left;
+                const doc = !field.title.includes('$$')
+                    ? Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top, _text_fontSize: `${height / 2}` })
+                    : Docs.Create.ImageDocument('', { _height: height, _width: width, title: field.title.replace(/\$\$/g, ''), x: left, y: top });
                 return doc;
             });
 
             const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 400000, y: 400000 });
 
             mainCollection.addDocument(template);
-            
+
             GPTTemplates.push(template);
         });
 
-        setTimeout(() => {this.setGSuggestedTemplates(GPTTemplates); /*GPTTemplates.forEach(template => mainCollection.removeDocument(template))*/}, 100);
+        setTimeout(() => {
+            this.setGSuggestedTemplates(GPTTemplates); /*GPTTemplates.forEach(template => mainCollection.removeDocument(template))*/
+        }, 100);
 
         this.forceUpdate();
     };
@@ -421,9 +441,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this._templateDocs.splice(this._templateDocs.indexOf(doc), 1);
     };
 
-
-
-    testTemplate = async() => { 
+    testTemplate = async () => {
         // const temp = TemplateLayouts.FourField001;
         // const title: Doc = FieldFuncs.TextField({tl: temp.fields[0].tl, br: temp.fields[0].br}, temp.height, temp.width, 'title', 'Title', {backgroundColor: 'transparent'});
         // const image: Doc = FieldFuncs.ImageField({tl: temp.fields[1].tl, br: temp.fields[1].br}, temp.height, temp.width, 'title', '', {borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10, rotation: 40});
@@ -453,7 +471,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         try {
             const res = await gptImageCall('Image of panda eating a cookie');
 
-            if (res){
+            if (res) {
                 const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
 
                 console.log(result);
@@ -461,15 +479,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         } catch (e) {
             console.log(e);
         }
-        
     };
 
     @action addField = () => {
-        const newFields: Col[] = this._columns.concat([{title: '', type: TemplateFieldType.UNSET, desc: '', sizes: []}])
+        const newFields: Col[] = this._columns.concat([{ title: '', type: TemplateFieldType.UNSET, desc: '', sizes: [] }]);
         this._columns = newFields;
     };
 
-    @action removeField = (field: {title: string, type: string, desc: string}) => {
+    @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 {
@@ -483,11 +500,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             }
 
             if (this._columns.length === 1) {
-                this._columns = []  
+                this._columns = [];
             } else {
                 this._columns.splice(this._columns.indexOf(toRemove[0]), 1);
             }
-        }   
+        }
     };
 
     @action setColTitle = (column: Col, title: string) => {
@@ -530,13 +547,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         this.forceUpdate();
     };
 
-    generateGPTImage = async(prompt: string): Promise<string | undefined> => {
-        console.log(prompt)
+    generateGPTImage = async (prompt: string): Promise<string | undefined> => {
+        console.log(prompt);
 
         try {
             const res = await gptImageCall(prompt);
 
-            if (res){
+            if (res) {
                 const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
                 const source = ClientUtils.prepend(result[0].accessPaths.agnostic.client);
                 return source;
@@ -544,12 +561,16 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         } catch (e) {
             console.log(e);
         }
-    }
+    };
 
     matchesForTemplate = (template: TemplateDocInfos, cols: Col[]): number[][] => {
-        const colMatchesField = (col: Col, field : Field) => { return field.sizes?.some(size => col.sizes?.includes(size)) && field.types?.includes(col.type) };
+        const colMatchesField = (col: Col, field: Field) => {
+            return field.sizes?.some(size => col.sizes?.includes(size)) && field.types?.includes(col.type);
+        };
 
-        const matches: number[][] = Array(template.fields.length).fill([]).map(() => []);
+        const matches: number[][] = Array(template.fields.length)
+            .fill([])
+            .map(() => []);
 
         template.fields.forEach((field, i) => {
             cols.forEach((col, v) => {
@@ -576,8 +597,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 }
             }
             return false;
-        }
-    
+        };
+
         for (let v = 0; v < fieldsCt; ++v) {
             used.fill(false);
             augmentingPath(v);
@@ -592,7 +613,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return count;
     };
 
-
     findValidTemplates = (cols: Col[], templates: TemplateDocInfos[]) => {
         let validTemplates: any[] = [];
         templates.forEach(template => {
@@ -602,7 +622,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             if (this.maxMatches(numFields, matches) === numFields) {
                 validTemplates.push(template.title);
             }
-        })
+        });
 
         validTemplates = validTemplates.map(title => TemplateLayouts.getTemplateByTitle(title));
 
@@ -613,12 +633,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     //     if (field.subfields) {
     //         const doc = FieldFuncs.FreeformField({
-    //             tl: field.tl, 
-    //             br: field.br }, 
-    //             template.height, 
-    //             template.width, 
-    //             column.title, 
-    //             '', 
+    //             tl: field.tl,
+    //             br: field.br },
+    //             template.height,
+    //             template.width,
+    //             column.title,
+    //             '',
     //             field.opts
     //         );
 
@@ -634,10 +654,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     /**
      * Populates a preset template framework with content from a datavizbox or any AI-generated content.
      * @param template the preloaded template framework being filled in
-     * @param assignments a list of template field numbers (from top to bottom) and their assigned columns from the linked dataviz 
+     * @param assignments a list of template field numbers (from top to bottom) and their assigned columns from the linked dataviz
      * @returns a doc containing the fully rendered template
      */
-    fillPresetTemplate = async(template: TemplateDocInfos, assignments: {[field: string]: Col}): Promise<Doc> => {
+    fillPresetTemplate = async (template: TemplateDocInfos, assignments: { [field: string]: Col }): Promise<Doc> => {
         const wordLimit = (size: TemplateFieldSize) => {
             switch (size) {
                 case TemplateFieldSize.TINY:
@@ -650,44 +670,43 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     return 50;
                 case TemplateFieldSize.HUGE:
                     return 100;
-                default: 
+                default:
                     return 10;
             }
-        }
+        };
 
-        const renderTextCalls = async(): Promise<Doc[]> => {
+        const renderTextCalls = async (): Promise<Doc[]> => {
             const rendered: Doc[] = [];
 
             if (GPTTextCalls.length) {
-
                 try {
                     const prompt = fieldContent + GPTTextAssignment;
-    
+
                     const res = await gptAPICall(prompt, GPTCallType.FILL);
-    
-                    if (res){
-    
-                        const assignments: {[title: string]: {number: string, content: string}} = JSON.parse(res);
+
+                    if (res) {
+                        const assignments: { [title: string]: { number: string; content: string } } = JSON.parse(res);
                         //console.log('assignments', GPTAssignments, 'assignment string', GPTAssignmentString, 'field content', fieldContent, 'response', res, 'assignments', assignments);
                         Object.entries(assignments).forEach(([title, info]) => {
                             const field: Field = template.fields[Number(info.number)];
                             const col = this.getColByTitle(title);
-    
-                            const doc = FieldUtils.TextField({
-                                tl: field.tl, 
-                                br: field.br }, 
-                                template.height, 
-                                template.width, 
-                                col.title, 
-                                info.content ?? '', 
+
+                            const doc = FieldUtils.TextField(
+                                {
+                                    tl: field.tl,
+                                    br: field.br,
+                                },
+                                template.height,
+                                template.width,
+                                col.title,
+                                info.content ?? '',
                                 field.opts
                             );
-    
+
                             rendered.push(doc);
                         });
-    
                     }
-                } catch(err) {
+                } catch (err) {
                     console.log(err);
                 }
             }
@@ -695,23 +714,25 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             return rendered;
         };
 
-        const createGeneratedImage = async(fieldNum: string, col: Col, prompt: string) => {
+        const createGeneratedImage = async (fieldNum: string, col: Col, prompt: string) => {
             const url = await this.generateGPTImage(prompt);
             const field: Field = template.fields[Number(fieldNum)];
-            const doc = FieldUtils.ImageField({
-                tl: field.tl, 
-                br: field.br }, 
-                template.height, 
-                template.width, 
-                col.title, 
-                url ?? '', 
+            const doc = FieldUtils.ImageField(
+                {
+                    tl: field.tl,
+                    br: field.br,
+                },
+                template.height,
+                template.width,
+                col.title,
+                url ?? '',
                 field.opts
             );
 
             return doc;
-        }
+        };
 
-        const renderImageCalls = async(): Promise<Doc[]> => {
+        const renderImageCalls = async (): Promise<Doc[]> => {
             const rendered: Doc[] = [];
             const calls = GPTIMGCalls;
 
@@ -719,24 +740,28 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 try {
                     const renderedImages: Doc[] = await Promise.all(
                         calls.map(async ([fieldNum, col]) => {
-                            const sysPrompt = 'Your job is to create a prompt for an AI image generator to help it generate an image based on existing content in a template and a user prompt. Your prompt should focus heavily on visual elements to help the image generator; avoid unecessary info that might distract it. ONLY INCLUDE THE PROMPT, NO OTHER TEXT OR EXPLANATION. The existing content is as follows: ' + fieldContent + ' **** The user prompt is: ' + col.desc;
-                            
+                            const sysPrompt =
+                                'Your job is to create a prompt for an AI image generator to help it generate an image based on existing content in a template and a user prompt. Your prompt should focus heavily on visual elements to help the image generator; avoid unecessary info that might distract it. ONLY INCLUDE THE PROMPT, NO OTHER TEXT OR EXPLANATION. The existing content is as follows: ' +
+                                fieldContent +
+                                ' **** The user prompt is: ' +
+                                col.desc;
+
                             const prompt = await gptAPICall(sysPrompt, GPTCallType.COMPLETEPROMPT);
                             console.log(sysPrompt, prompt);
-                            
+
                             return createGeneratedImage(fieldNum, col, prompt);
                         })
                     );
-                
+
                     const renderedTemplates: Doc[] = await Promise.all(renderedImages);
                     renderedTemplates.forEach(doc => rendered.push(doc));
-                } catch (e){
+                } catch (e) {
                     console.log(e);
                 }
             }
 
             return rendered;
-        }
+        };
 
         const fields: Doc[] = [];
 
@@ -748,9 +773,9 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const stringifyGPTInfo = (calls: [string, Col][]): string => {
             let string: string = '*** COLUMN INFO:';
             calls.forEach(([fieldNum, col]) => {
-                string += `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.sizes[0])} words, assigned field: ${fieldNum} ---`
+                string += `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.sizes[0])} words, assigned field: ${fieldNum} ---`;
             });
-            return string += ' ***';
+            return (string += ' ***');
         };
 
         const GPTTextAssignment = stringifyGPTInfo(GPTTextCalls);
@@ -761,45 +786,49 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             const field: Field = template.fields[Number(f)];
             const col = strCol[1];
 
-            const doc = (col.type === TemplateFieldType.VISUAL ? FieldUtils.ImageField : FieldUtils.TextField)({
-                tl: field.tl, 
-                br: field.br }, 
-                template.height, 
-                template.width, 
-                col.title, 
-                col.defaultContent ?? '', 
+            const doc = (col.type === TemplateFieldType.VISUAL ? FieldUtils.ImageField : FieldUtils.TextField)(
+                {
+                    tl: field.tl,
+                    br: field.br,
+                },
+                template.height,
+                template.width,
+                col.title,
+                col.defaultContent ?? '',
                 field.opts
             );
 
-            fieldContent += `--- Field #${f} (title: ${col.title}): ${col.defaultContent ?? ''} ---`
+            fieldContent += `--- Field #${f} (title: ${col.title}): ${col.defaultContent ?? ''} ---`;
 
             fields.push(doc);
         });
 
         template.decorations.forEach(dec => {
-            const doc = FieldUtils.FreeformField({
-                tl: dec.tl, 
-                br: dec.br }, 
-                template.height, 
-                template.width, 
-                '', 
-                '', 
-                dec.opts,
+            const doc = FieldUtils.FreeformField(
+                {
+                    tl: dec.tl,
+                    br: dec.br,
+                },
+                template.height,
+                template.width,
+                '',
+                '',
+                dec.opts
             );
 
             fields.push(doc);
         });
 
         const createMainDoc = (): Doc => {
-            const main = Docs.Create.FreeformDocument(fields, { 
-                _height: template.height, 
-                _width: template.width, 
-                title: template.title, 
+            const main = Docs.Create.FreeformDocument(fields, {
+                _height: template.height,
+                _width: template.width,
+                title: template.title,
                 backgroundColor: template.opts.backgroundColor,
-                _layout_borderRounding: `${template.opts.cornerRounding}px` ?? '0px', 
+                _layout_borderRounding: `${template.opts.cornerRounding}px` ?? '0px',
                 borderWidth: template.opts.borderWidth,
                 borderColor: template.opts.borderColor,
-                x: 40000, 
+                x: 40000,
                 y: 40000,
             });
 
@@ -807,40 +836,46 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             mainCollection.addDocument(main);
 
             return main;
-        }
+        };
 
         const textCalls = await renderTextCalls();
         const imageCalls = await renderImageCalls();
 
-        textCalls.forEach(doc => {fields.push(doc)});
-        imageCalls.forEach(doc => {fields.push(doc)});
+        textCalls.forEach(doc => {
+            fields.push(doc);
+        });
+        imageCalls.forEach(doc => {
+            fields.push(doc);
+        });
 
         return createMainDoc();
-    }
+    };
 
     compileFieldDescriptions = (templates: TemplateDocInfos[]): string => {
         let descriptions: string = '';
         templates.forEach(template => {
-            descriptions += `----------  NEW TEMPLATE TO INCLUDE: Description of template ${template.title}'s fields: `
+            descriptions += `----------  NEW TEMPLATE TO INCLUDE: Description of template ${template.title}'s fields: `;
             template.fields.forEach((field, index) => {
-                descriptions += `{Field #${index}: ${field.description}} `
+                descriptions += `{Field #${index}: ${field.description}} `;
             });
         });
 
         return descriptions;
     };
 
-    compileColDescriptions = (cols: Col[]): string =>  {
+    compileColDescriptions = (cols: Col[]): string => {
         let descriptions: string = ' ------------- COL DESCRIPTIONS START HERE:';
-        cols.forEach(col => descriptions += `{title: ${col.title}, sizes: ${String(col.sizes)}, type: ${col.type}, descreiption: ${col.desc}} `);
+        cols.forEach(col => (descriptions += `{title: ${col.title}, sizes: ${String(col.sizes)}, type: ${col.type}, descreiption: ${col.desc}} `));
 
         return descriptions;
     };
 
-    getColByTitle = (title: string) => { return this.fieldsInfos.filter(col => col.title === title)[0]; };
+    getColByTitle = (title: string) => {
+        return this.fieldsInfos.filter(col => col.title === title)[0];
+    };
 
     @action
-    assignColsToFields = async(templates: TemplateDocInfos[], cols: Col[]): Promise<[TemplateDocInfos, {[field: number]: Col}][]> => {
+    assignColsToFields = async (templates: TemplateDocInfos[], cols: Col[]): Promise<[TemplateDocInfos, { [field: number]: Col }][]> => {
         const fieldDescriptions: string = this.compileFieldDescriptions(templates);
         const colDescriptions: string = this.compileColDescriptions(cols);
 
@@ -857,24 +892,26 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
 
             if (res && this._callCount === origCount) {
-
-                const assignments: {[templateTitle: string]: {[field: string]: string}} = JSON.parse(res);
-                const brokenDownAssignments: [TemplateDocInfos, {[field: number]: Col}][] = [];
+                const assignments: { [templateTitle: string]: { [field: string]: string } } = JSON.parse(res);
+                const brokenDownAssignments: [TemplateDocInfos, { [field: number]: Col }][] = [];
 
                 Object.entries(assignments).forEach(([tempTitle, assignment]) => {
                     const template = TemplateLayouts.getTemplateByTitle(tempTitle);
                     if (!template) return;
-                    const toObj = Object.entries(assignment).reduce((a, [fieldNum, colTitle]) => {
-                        a[Number(fieldNum)] = this.getColByTitle(colTitle);
-                        return a;
-                    }, {} as { [field: number]: Col }); 
-                    brokenDownAssignments.push([template, toObj])
-                })
+                    const toObj = Object.entries(assignment).reduce(
+                        (a, [fieldNum, colTitle]) => {
+                            a[Number(fieldNum)] = this.getColByTitle(colTitle);
+                            return a;
+                        },
+                        {} as { [field: number]: Col }
+                    );
+                    brokenDownAssignments.push([template, toObj]);
+                });
                 return brokenDownAssignments;
             }
         } catch (err) {
             console.error(err);
-        } 
+        }
 
         return [];
     };
@@ -884,178 +921,200 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const cols = this.fieldsInfos;
         const templates = this.findValidTemplates(cols, TemplateLayouts.allTemplates);
-        
+
         const assignments: [TemplateDocInfos, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols);
-        
-        const renderedTemplatePromises: Promise<Doc>[] = assignments.map(([template, assignments]) => 
-            this.fillPresetTemplate(template, assignments)
-        );
-    
+
+        const renderedTemplatePromises: Promise<Doc>[] = assignments.map(([template, assignments]) => this.fillPresetTemplate(template, assignments));
+
         const renderedTemplates: Doc[] = await Promise.all(renderedTemplatePromises);
-        
-        setTimeout(() => { this.setGSuggestedTemplates(renderedTemplates); this._GPTLoading = false });
+
+        setTimeout(() => {
+            this.setGSuggestedTemplates(renderedTemplates);
+            this._GPTLoading = false;
+        });
     };
 
-    @action setExpandedView = (info: {icon: ImageField, doc: Doc} | undefined) => {
+    @action setExpandedView = (info: { icon: ImageField; doc: Doc } | undefined) => {
         this._expandedPreview = info;
-    }
+    };
 
-    get templatesPreviewContents(){
+    get templatesPreviewContents() {
         const renderedTemplates: Doc[] = [];
 
-        const GPTOptions = 
-            <div></div>
+        const GPTOptions = <div></div>;
 
-            //<img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
+        //<img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
 
         return (
             <div className={`docCreatorMenu-templates-view`}>
-                {this._expandedPreview ? 
-                <div className='docCreatorMenu-expanded-template-preview'>
-                    <img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
-                    <div className='right-buttons-panel'>
-                        <button className='docCreatorMenu-menu-button section-reveal-options top-right' onPointerDown={e => this.setUpButtonClick(e, () => this.setExpandedView(undefined))}> 
-                            <FontAwesomeIcon icon='minimize'/>
-                        </button>
-                        <button className='docCreatorMenu-menu-button section-reveal-options top-right-lower' onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._templateDocs.push(this._expandedPreview.doc))}>
-                            <FontAwesomeIcon icon='plus' color='white'/>
-                        </button>
-                    </div>
-                </div> 
-                :
-                <div>
-                    <div className='docCreatorMenu-section' style={{height: this._GPTOpt ? 200 : 200}}>
-                        <div className='docCreatorMenu-section-topbar'>
-                            <div className='docCreatorMenu-section-title'>Suggested Templates</div>
-                            <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._menuContent = 'dashboard'))}>
-                                <FontAwesomeIcon icon='gear'/>
+                {this._expandedPreview ? (
+                    <div className="docCreatorMenu-expanded-template-preview">
+                        <img className="docCreatorMenu-preview-image expanded" src={this._expandedPreview.icon!.url.href.replace('.png', '_o.png')} />
+                        <div className="right-buttons-panel">
+                            <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => this.setExpandedView(undefined))}>
+                                <FontAwesomeIcon icon="minimize" />
+                            </button>
+                            <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._templateDocs.push(this._expandedPreview.doc))}>
+                                <FontAwesomeIcon icon="plus" color="white" />
                             </button>
                         </div>
-                        <div className='docCreatorMenu-templates-preview-window' style={{justifyContent: this._GPTLoading || this._menuDimensions.width > 400 ? 'center' : ''}}>
-                            {this._GPTLoading ? (
-                                <div className="loading-spinner">
-                                    <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
-                                </div>
-                            ) : (
-                            this._suggestedTemplates?.map(doc => 
-                                ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info =>
-                                    <div 
-                                    className='docCreatorMenu-preview-window'
-                                    style={{
-                                        border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                                        boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
-                                    }}
-                                    onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
-                                        <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.setExpandedView(info)})}>
-                                            <FontAwesomeIcon icon='magnifying-glass' color='white'/>
-                                        </button>   
-                                        <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}>
-                                            <FontAwesomeIcon icon='plus' color='white'/>
-                                        </button>
-                                        <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
-                                    </div>
-                            ))}
-                        </div>
-                        <div className='docCreatorMenu-GPT-options'>
-                            <div className='docCreatorMenu-GPT-options-container'>
-                                <button className='docCreatorMenu-menu-button' onPointerDown={e => this.setUpButtonClick(e, () => this.generatePresetTemplates())}>
-                                    <FontAwesomeIcon icon='arrows-rotate'/>
+                    </div>
+                ) : (
+                    <div>
+                        <div className="docCreatorMenu-section" style={{ height: this._GPTOpt ? 200 : 200 }}>
+                            <div className="docCreatorMenu-section-topbar">
+                                <div className="docCreatorMenu-section-title">Suggested Templates</div>
+                                <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._menuContent = 'dashboard')))}>
+                                    <FontAwesomeIcon icon="gear" />
                                 </button>
                             </div>
-                            {this._GPTOpt ? GPTOptions : null }
-                        </div>
-                </div>
-                <hr className='docCreatorMenu-option-divider full no-margin'/>
-                <div className='docCreatorMenu-section'>
-                    <div className='docCreatorMenu-section-topbar'>
-                        <div className='docCreatorMenu-section-title'>Your Templates</div>
-                        <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, () => this._GPTOpt = !this._GPTOpt)}>
-                            <FontAwesomeIcon icon='gear'/>
-                        </button>
-                    </div>
-                    <div className='docCreatorMenu-templates-preview-window' style={{justifyContent: this._menuDimensions.width > 400 ? 'center' : ''}}>
-                        <div className='docCreatorMenu-preview-window empty' onPointerDown={e => this.testTemplate()}>
-                            <FontAwesomeIcon icon='plus' color='rgb(160, 160, 160)'/>
+                            <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this._GPTLoading || this._menuDimensions.width > 400 ? 'center' : '' }}>
+                                {this._GPTLoading ? (
+                                    <div className="loading-spinner">
+                                        <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
+                                    </div>
+                                ) : (
+                                    this._suggestedTemplates
+                                        ?.map(doc => ({ icon: ImageCast(doc.icon), doc }))
+                                        .filter(info => info.icon && info.doc)
+                                        .map(info => (
+                                            <div
+                                                className="docCreatorMenu-preview-window"
+                                                style={{
+                                                    border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                                                    boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                                                }}
+                                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+                                                <button
+                                                    className="option-button left"
+                                                    onPointerDown={e =>
+                                                        this.setUpButtonClick(e, () => {
+                                                            this.setExpandedView(info);
+                                                        })
+                                                    }>
+                                                    <FontAwesomeIcon icon="magnifying-glass" color="white" />
+                                                </button>
+                                                <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}>
+                                                    <FontAwesomeIcon icon="plus" color="white" />
+                                                </button>
+                                                <img className="docCreatorMenu-preview-image" src={info.icon!.url.href.replace('.png', '_o.png')} />
+                                            </div>
+                                        ))
+                                )}
+                            </div>
+                            <div className="docCreatorMenu-GPT-options">
+                                <div className="docCreatorMenu-GPT-options-container">
+                                    <button className="docCreatorMenu-menu-button" onPointerDown={e => this.setUpButtonClick(e, () => this.generatePresetTemplates())}>
+                                        <FontAwesomeIcon icon="arrows-rotate" />
+                                    </button>
+                                </div>
+                                {this._GPTOpt ? GPTOptions : null}
+                            </div>
                         </div>
-                        {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
-                            if (renderedTemplates.includes(info.doc)) return undefined;
-                            renderedTemplates.push(info.doc);
-                            return (<div 
-                            className='docCreatorMenu-preview-window'
-                            style={{
-                                border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                                boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : ''
-                            }}
-                            onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
-                                <button className='option-button left' onPointerDown={e => this.setUpButtonClick(e, () => {this.editTemplate(info.doc)})}>
-                                    <FontAwesomeIcon icon='pencil' color='black'/>
-                                </button>
-                                <button className='option-button right' onPointerDown={e => this.setUpButtonClick(e, () => {this.removeTemplate(info.doc)})}>
-                                    <FontAwesomeIcon icon='trash' color='black'/>
+                        <hr className="docCreatorMenu-option-divider full no-margin" />
+                        <div className="docCreatorMenu-section">
+                            <div className="docCreatorMenu-section-topbar">
+                                <div className="docCreatorMenu-section-title">Your Templates</div>
+                                <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, () => (this._GPTOpt = !this._GPTOpt))}>
+                                    <FontAwesomeIcon icon="gear" />
                                 </button>
-                                <img className='docCreatorMenu-preview-image' src={info.icon!.url.href.replace(".png", "_o.png")} />
                             </div>
-                        )})}
+                            <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this._menuDimensions.width > 400 ? 'center' : '' }}>
+                                <div className="docCreatorMenu-preview-window empty" onPointerDown={e => this.testTemplate()}>
+                                    <FontAwesomeIcon icon="plus" color="rgb(160, 160, 160)" />
+                                </div>
+                                {this._templateDocs
+                                    .map(doc => ({ icon: ImageCast(doc.icon), doc }))
+                                    .filter(info => info.icon && info.doc)
+                                    .map(info => {
+                                        if (renderedTemplates.includes(info.doc)) return undefined;
+                                        renderedTemplates.push(info.doc);
+                                        return (
+                                            <div
+                                                className="docCreatorMenu-preview-window"
+                                                style={{
+                                                    border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                                                    boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                                                }}
+                                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+                                                <button
+                                                    className="option-button left"
+                                                    onPointerDown={e =>
+                                                        this.setUpButtonClick(e, () => {
+                                                            this.editTemplate(info.doc);
+                                                        })
+                                                    }>
+                                                    <FontAwesomeIcon icon="pencil" color="black" />
+                                                </button>
+                                                <button
+                                                    className="option-button right"
+                                                    onPointerDown={e =>
+                                                        this.setUpButtonClick(e, () => {
+                                                            this.removeTemplate(info.doc);
+                                                        })
+                                                    }>
+                                                    <FontAwesomeIcon icon="trash" color="black" />
+                                                </button>
+                                                <img className="docCreatorMenu-preview-image" src={info.icon!.url.href.replace('.png', '_o.png')} />
+                                            </div>
+                                        );
+                                    })}
+                            </div>
                         </div>
                     </div>
-                </div>
-                }
+                )}
             </div>
         );
     }
 
-    get savedLayoutsPreviewContents(){
+    get savedLayoutsPreviewContents() {
         return (
-            <div className='docCreatorMenu-preview-container'>
-               {this._savedLayouts.map((layout, index) => 
-                <div 
-                    className='docCreatorMenu-preview-window'
-                    style={{
-                        border: this.isSelectedLayout(layout) ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                        boxShadow: this.isSelectedLayout(layout) ? `0 0 15px rgba(68, 118, 247, .8)` : ''
-                    }}
-                    onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedSavedLayout(layout)))}
-                    >
-                    {this.layoutPreviewContents(87, layout, true, index)}
-                </div>
-               )}
+            <div className="docCreatorMenu-preview-container">
+                {this._savedLayouts.map((layout, index) => (
+                    <div
+                        className="docCreatorMenu-preview-window"
+                        style={{
+                            border: this.isSelectedLayout(layout) ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                            boxShadow: this.isSelectedLayout(layout) ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                        }}
+                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedSavedLayout(layout)))}>
+                        {this.layoutPreviewContents(87, layout, true, index)}
+                    </div>
+                ))}
             </div>
         );
     }
 
-    @action updateXMargin = (input: string) => { this._layout.xMargin = Number(input) };
-    @action updateYMargin = (input: string) => { this._layout.yMargin = Number(input) };
-    @action updateColumns = (input: string) => { this._layout.columns = Number(input) };
+    @action updateXMargin = (input: string) => {
+        this._layout.xMargin = Number(input);
+    };
+    @action updateYMargin = (input: string) => {
+        this._layout.yMargin = Number(input);
+    };
+    @action updateColumns = (input: string) => {
+        this._layout.columns = Number(input);
+    };
 
     get layoutConfigOptions() {
         const optionInput = (icon: string, func: Function, def?: number, key?: string, noMargin?: boolean) => {
             return (
-                <div className='docCreatorMenu-option-container small no-margin' key={key} style={{marginTop: noMargin ? '0px' : ''}}
-                >
-                    <div className='docCreatorMenu-option-title config layout-config'>
-                        <FontAwesomeIcon icon={icon as any}/>
+                <div className="docCreatorMenu-option-container small no-margin" key={key} style={{ marginTop: noMargin ? '0px' : '' }}>
+                    <div className="docCreatorMenu-option-title config layout-config">
+                        <FontAwesomeIcon icon={icon as any} />
                     </div>
-                    <input defaultValue={def} onInput={(e) => func(e.currentTarget.value)} className='docCreatorMenu-input config layout-config'/>
+                    <input defaultValue={def} onInput={e => func(e.currentTarget.value)} className="docCreatorMenu-input config layout-config" />
                 </div>
             );
-        }
+        };
 
         switch (this._layout.type) {
             case LayoutType.Row:
-                return (
-                    <div className='docCreatorMenu-configuration-bar'>
-                        {optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '0')}
-                    </div>
-                    );
+                return <div className="docCreatorMenu-configuration-bar">{optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '0')}</div>;
             case LayoutType.Column:
-                return (
-                    <div className='docCreatorMenu-configuration-bar'>
-                        {optionInput('arrows-up-down', this.updateYMargin, this._layout.yMargin, '1')}
-                    </div>
-                    );
+                return <div className="docCreatorMenu-configuration-bar">{optionInput('arrows-up-down', this.updateYMargin, this._layout.yMargin, '1')}</div>;
             case LayoutType.Grid:
                 return (
-                    <div className='docCreatorMenu-configuration-bar'>
+                    <div className="docCreatorMenu-configuration-bar">
                         {optionInput('arrows-up-down', this.updateYMargin, this._layout.xMargin, '2')}
                         {optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '3')}
                         {optionInput('table-columns', this.updateColumns, this._layout.columns, '4', true)}
@@ -1072,9 +1131,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     //     return Docs.Create.FreeformDocument([], { _height: 200, _width: 200, title: 'title'});
     // }
 
-    screenToLocalTransform = () =>
-    this._props
-        .ScreenToLocalTransform();
+    screenToLocalTransform = () => this._props.ScreenToLocalTransform();
 
     layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => {
         const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate;
@@ -1084,10 +1141,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
         const docWidth: number = Number(doc._width);
         const docHeight: number = Number(doc._height);
-        const horizontalSpan: number = (docWidth + layout.xMargin) * (altLayout ? altLayout.columns : this.columnsCount) - layout.xMargin;;
+        const horizontalSpan: number = (docWidth + layout.xMargin) * (altLayout ? altLayout.columns : this.columnsCount) - layout.xMargin;
         const verticalSpan: number = (docHeight + layout.yMargin) * (altLayout ? altLayout.rows : this.rowsCount) - layout.yMargin;
         const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan;
-        const scaledDown = (input: number) => {return input / (largerSpan / outerSpan * this._layoutPreviewScale)}
+        const scaledDown = (input: number) => {
+            return input / ((largerSpan / outerSpan) * this._layoutPreviewScale);
+        };
         const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3));
 
         return (
@@ -1114,220 +1173,275 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             //         {null}
             //     </CollectionFreeFormView>
             // </div>
-            <div className='docCreatorMenu-layout-preview-window-wrapper' id={String(id) ?? undefined}>
-                <div className='docCreatorMenu-zoom-button-container'>
-                    <button 
-                        className='docCreatorMenu-zoom-button'
-                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= 1.25))}>
-                            <FontAwesomeIcon icon={'minus'}/>
+            <div className="docCreatorMenu-layout-preview-window-wrapper" id={String(id) ?? undefined}>
+                <div className="docCreatorMenu-zoom-button-container">
+                    <button className="docCreatorMenu-zoom-button" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._layoutPreviewScale *= 1.25)))}>
+                        <FontAwesomeIcon icon={'minus'} />
                     </button>
-                    <button 
-                        className='docCreatorMenu-zoom-button zoom-in'
-                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreviewScale *= .75))}>
-                            <FontAwesomeIcon icon={'plus'}/>
+                    <button className="docCreatorMenu-zoom-button zoom-in" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._layoutPreviewScale *= 0.75)))}>
+                        <FontAwesomeIcon icon={'plus'} />
                     </button>
-                    {altLayout ? <button 
-                        className='docCreatorMenu-zoom-button trash'
-                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._savedLayouts.splice(this._savedLayouts.indexOf(altLayout), 1)))}>
-                            <FontAwesomeIcon icon={'trash'}/>
-                    </button> : null}
+                    {altLayout ? (
+                        <button className="docCreatorMenu-zoom-button trash" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._savedLayouts.splice(this._savedLayouts.indexOf(altLayout), 1)))}>
+                            <FontAwesomeIcon icon={'trash'} />
+                        </button>
+                    ) : null}
                 </div>
-                {<div 
-                id={String(id) ?? undefined}
-                className={`docCreatorMenu-layout-preview-window ${small ? 'small' : ''}`}
-                style={{
-                    gridTemplateColumns: `repeat(${altLayout ? altLayout.columns : this.columnsCount}, ${scaledDown(docWidth)}px`,
-                    gridTemplateRows: `${scaledDown(docHeight)}px`,
-                    gridAutoRows: `${scaledDown(docHeight)}px`,
-                    rowGap: `${scaledDown(layout.yMargin)}px`,
-                    columnGap: `${scaledDown(layout.xMargin)}px` 
-                }}>
-                    {this._layout.type === LayoutType.Stacked ? 
-                    <div 
-                    className='docCreatorMenu-layout-preview-item'
-                    style={{
-                        width: scaledDown(docWidth), 
-                        height: scaledDown(docHeight),
-                        fontSize: fontSize,
-                    }}
-                    >
-                        All
-                    </div> : 
-                    this.docsToRender.map(num => 
-                        <div 
-                        onMouseEnter={() => this._dataViz?.setSpecialHighlightedRow(num)}
-                        onMouseLeave={() => this._dataViz?.setSpecialHighlightedRow(undefined)}
-                        className='docCreatorMenu-layout-preview-item'
+                {
+                    <div
+                        id={String(id) ?? undefined}
+                        className={`docCreatorMenu-layout-preview-window ${small ? 'small' : ''}`}
                         style={{
-                            width: scaledDown(docWidth), 
-                            height: scaledDown(docHeight),
-                            fontSize: fontSize,
-                        }}
-                        >
-                            {num}
-                        </div>
-                    )}
-
-                </div>}
+                            gridTemplateColumns: `repeat(${altLayout ? altLayout.columns : this.columnsCount}, ${scaledDown(docWidth)}px`,
+                            gridTemplateRows: `${scaledDown(docHeight)}px`,
+                            gridAutoRows: `${scaledDown(docHeight)}px`,
+                            rowGap: `${scaledDown(layout.yMargin)}px`,
+                            columnGap: `${scaledDown(layout.xMargin)}px`,
+                        }}>
+                        {this._layout.type === LayoutType.Stacked ? (
+                            <div
+                                className="docCreatorMenu-layout-preview-item"
+                                style={{
+                                    width: scaledDown(docWidth),
+                                    height: scaledDown(docHeight),
+                                    fontSize: fontSize,
+                                }}>
+                                All
+                            </div>
+                        ) : (
+                            this.docsToRender.map(num => (
+                                <div
+                                    onMouseEnter={() => this._dataViz?.setSpecialHighlightedRow(num)}
+                                    onMouseLeave={() => this._dataViz?.setSpecialHighlightedRow(undefined)}
+                                    className="docCreatorMenu-layout-preview-item"
+                                    style={{
+                                        width: scaledDown(docWidth),
+                                        height: scaledDown(docHeight),
+                                        fontSize: fontSize,
+                                    }}>
+                                    {num}
+                                </div>
+                            ))
+                        )}
+                    </div>
+                }
             </div>
         );
-    }
-
-    get optionsMenuContents(){
-        const layoutEquals = (layout: DataVizTemplateLayout) => {
+    };
 
-        } //TODO: ADD LATER
+    get optionsMenuContents() {
+        const layoutEquals = (layout: DataVizTemplateLayout) => {}; //TODO: ADD LATER
 
         const layoutOption = (option: LayoutType, optStyle?: {}, specialFunc?: Function) => {
             return (
-                <div 
-                    className="docCreatorMenu-dropdown-option" 
+                <div
+                    className="docCreatorMenu-dropdown-option"
                     style={optStyle}
-                    onPointerDown={e => this.setUpButtonClick(e, () => {specialFunc?.(); runInAction(() => this._layout.type = option)})}>
+                    onPointerDown={e =>
+                        this.setUpButtonClick(e, () => {
+                            specialFunc?.();
+                            runInAction(() => (this._layout.type = option));
+                        })
+                    }>
                     {option}
                 </div>
             );
-        }
+        };
 
         const selectionBox = (width: number, height: number, icon: string, specClass?: string, options?: JSX.Element[], manual?: boolean): JSX.Element => {
-            return (<div className='docCreatorMenu-option-container'>
-                <div className={`docCreatorMenu-option-title config ${specClass}`} style={{width: width * .4, height: height}}>
-                    <FontAwesomeIcon icon={icon as any}/>
+            return (
+                <div className="docCreatorMenu-option-container">
+                    <div className={`docCreatorMenu-option-title config ${specClass}`} style={{ width: width * 0.4, height: height }}>
+                        <FontAwesomeIcon icon={icon as any} />
+                    </div>
+                    {manual ? (
+                        <input className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }} />
+                    ) : (
+                        <select className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }}>
+                            {options}
+                        </select>
+                    )}
                 </div>
-                {manual ? <input className={`docCreatorMenu-input config ${specClass}`} style={{width: width * .6, height: height}}/> :
-                <select className={`docCreatorMenu-input config ${specClass}`} style={{width: width * .6, height: height}}>
-                    {options}
-                </select>
-                }
-            </div>);
-        }
+            );
+        };
 
         const repeatOptions = [0, 1, 2, 3, 4, 5];
 
         return (
-            <div className='docCreatorMenu-menu-container'>
-                <div className='docCreatorMenu-option-container layout'>
-                    <div className='docCreatorMenu-dropdown-hoverable'>
+            <div className="docCreatorMenu-menu-container">
+                <div className="docCreatorMenu-option-container layout">
+                    <div className="docCreatorMenu-dropdown-hoverable">
                         <div className="docCreatorMenu-option-title">{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}</div>
                         <div className="docCreatorMenu-dropdown-content">
                             {layoutOption(LayoutType.Stacked)}
-                            {layoutOption(LayoutType.Grid, undefined, () => {if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length))})}
+                            {layoutOption(LayoutType.Grid, undefined, () => {
+                                if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
+                            })}
                             {layoutOption(LayoutType.Row)}
                             {layoutOption(LayoutType.Column)}
-                            {layoutOption(LayoutType.Custom, {borderBottom: `0px`})}
+                            {layoutOption(LayoutType.Custom, { borderBottom: `0px` })}
                         </div>
                     </div>
-                    <button 
-                        className='docCreatorMenu-menu-button preview-toggle'
-                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._layoutPreview = !this._layoutPreview))}>
-                        <FontAwesomeIcon icon={this._layoutPreview ? 'minus' : 'magnifying-glass'}/>
+                    <button className="docCreatorMenu-menu-button preview-toggle" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._layoutPreview = !this._layoutPreview)))}>
+                        <FontAwesomeIcon icon={this._layoutPreview ? 'minus' : 'magnifying-glass'} />
                     </button>
                 </div>
-                {this._layout.type ? this.layoutConfigOptions: null}
-                {this._layoutPreview ? this.layoutPreviewContents(this._menuDimensions.width * .75) : null}
-                {selectionBox(60, 20, 'repeat', undefined, repeatOptions.map(num => <option onPointerDown={e => this._layout.repeat = num}>{`${num}x`}</option>))}
-                <hr className='docCreatorMenu-option-divider'/>
-                <div className='docCreatorMenu-general-options-container'>
+                {this._layout.type ? this.layoutConfigOptions : null}
+                {this._layoutPreview ? this.layoutPreviewContents(this._menuDimensions.width * 0.75) : null}
+                {selectionBox(
+                    60,
+                    20,
+                    'repeat',
+                    undefined,
+                    repeatOptions.map(num => <option onPointerDown={e => (this._layout.repeat = num)}>{`${num}x`}</option>)
+                )}
+                <hr className="docCreatorMenu-option-divider" />
+                <div className="docCreatorMenu-general-options-container">
                     <button
-                        className='docCreatorMenu-save-layout-button'
-                        onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction,
-                            undoable(clickEv => {
-                                clickEv.stopPropagation();
-                                if (!this._selectedTemplate) return;
-                                const layout: DataVizTemplateLayout = {template: this._selectedTemplate, layout: {type: this._layout.type, xMargin: this._layout.xMargin, yMargin:this._layout.yMargin, repeat: 0}, columns: this.columnsCount, rows: this.rowsCount, docsNumList: this.docsToRender};
-                                if (!this._savedLayouts.includes(layout)) { this._savedLayouts.push(layout) };
-                            }, 'make docs') 
-                        )
-                    }>
-                        <FontAwesomeIcon icon='floppy-disk'/>
+                        className="docCreatorMenu-save-layout-button"
+                        onPointerDown={e =>
+                            setupMoveUpEvents(
+                                this,
+                                e,
+                                returnFalse,
+                                emptyFunction,
+                                undoable(clickEv => {
+                                    clickEv.stopPropagation();
+                                    if (!this._selectedTemplate) return;
+                                    const layout: DataVizTemplateLayout = {
+                                        template: this._selectedTemplate,
+                                        layout: { type: this._layout.type, xMargin: this._layout.xMargin, yMargin: this._layout.yMargin, repeat: 0 },
+                                        columns: this.columnsCount,
+                                        rows: this.rowsCount,
+                                        docsNumList: this.docsToRender,
+                                    };
+                                    if (!this._savedLayouts.includes(layout)) {
+                                        this._savedLayouts.push(layout);
+                                    }
+                                }, 'make docs')
+                            )
+                        }>
+                        <FontAwesomeIcon icon="floppy-disk" />
                     </button>
-                    <button 
-                        className='docCreatorMenu-create-docs-button'
-                        style={{backgroundColor: this.canMakeDocs ? '' : 'rgb(155, 155, 155)', border: this.canMakeDocs ? '' : 'solid 2px rgb(180, 180, 180)'}}
-                        onPointerDown={e => setupMoveUpEvents( this, e, returnFalse, emptyFunction,
+                    <button
+                        className="docCreatorMenu-create-docs-button"
+                        style={{ backgroundColor: this.canMakeDocs ? '' : 'rgb(155, 155, 155)', border: this.canMakeDocs ? '' : 'solid 2px rgb(180, 180, 180)' }}
+                        onPointerDown={e =>
+                            setupMoveUpEvents(
+                                this,
+                                e,
+                                returnFalse,
+                                emptyFunction,
                                 undoable(clickEv => {
                                     clickEv.stopPropagation();
                                     if (!this._selectedTemplate) return;
-                                    const templateInfo: DataVizTemplateInfo = {doc: this._selectedTemplate, layout: this._layout, referencePos: {x: this._pageX + 450, y: this._pageY}, columns: this.columnsCount};
+                                    const templateInfo: DataVizTemplateInfo = { doc: this._selectedTemplate, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount };
                                     this._dataViz?.createDocsFromTemplate(templateInfo);
-                                }, 'make docs') 
+                                }, 'make docs')
                             )
                         }>
-                         <FontAwesomeIcon icon='plus'/>
+                        <FontAwesomeIcon icon="plus" />
                     </button>
                 </div>
             </div>
         );
     }
 
-    get dashboardContents(){
+    get dashboardContents() {
         const sizes: string[] = ['tiny', 'small', 'medium', 'large', 'huge'];
 
         const fieldPanel = (field: Col) => {
             return (
-                <div className='field-panel'> 
-                    <div className='top-bar'>
-                        <span className='field-title'>{`${field.title} Field`}</span>
-                        <button className='docCreatorMenu-menu-button section-reveal-options no-margin' onPointerDown={e => this.setUpButtonClick(e, this.addField)} style={{position: 'absolute', right: '0px'}}>
-                            <FontAwesomeIcon icon='minus'/>
+                <div className="field-panel">
+                    <div className="top-bar">
+                        <span className="field-title">{`${field.title} Field`}</span>
+                        <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, this.addField)} style={{ position: 'absolute', right: '0px' }}>
+                            <FontAwesomeIcon icon="minus" />
                         </button>
                     </div>
-                    <div className='opts-bar'> 
-                        <div className='opt-box'>
-                            <div className='top-bar'> Title </div>
-                            <textarea className='content' style={{width: '100%', height: 'calc(100% - 20px)'}} defaultValue={field.title} placeholder={'Enter title'} onChange={(e) => this.setColTitle(field, e.target.value)}/>
+                    <div className="opts-bar">
+                        <div className="opt-box">
+                            <div className="top-bar"> Title </div>
+                            <textarea className="content" style={{ width: '100%', height: 'calc(100% - 20px)' }} defaultValue={field.title} placeholder={'Enter title'} onChange={e => this.setColTitle(field, e.target.value)} />
                         </div>
-                        <div className='opt-box'>
-                            <div className='top-bar'> Type </div>
-                            <div className='content'>
-                                <span className='type-display'>{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
-                                <div className='bubbles'>
-                                    <input className='bubble' type="radio" name="type" onClick={() => {this.setColType(field, TemplateFieldType.TEXT)}}/> 
-                                    <div className='text'>Text</div>
-                                    <input className='bubble' type="radio" name="type" onClick={() => {this.setColType(field, TemplateFieldType.VISUAL)}}/> 
-                                    <div className='text'>File</div>
+                        <div className="opt-box">
+                            <div className="top-bar"> Type </div>
+                            <div className="content">
+                                <span className="type-display">{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
+                                <div className="bubbles">
+                                    <input
+                                        className="bubble"
+                                        type="radio"
+                                        name="type"
+                                        onClick={() => {
+                                            this.setColType(field, TemplateFieldType.TEXT);
+                                        }}
+                                    />
+                                    <div className="text">Text</div>
+                                    <input
+                                        className="bubble"
+                                        type="radio"
+                                        name="type"
+                                        onClick={() => {
+                                            this.setColType(field, TemplateFieldType.VISUAL);
+                                        }}
+                                    />
+                                    <div className="text">File</div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div className='sizes-box'>
-                        <div className='top-bar'> Valid Sizes </div>
-                        <div className='content'>
-                            <div className='bubbles'>
-                                {sizes.map(size => <>
-                                    <input className='bubble' type="checkbox" name="type" checked={field.sizes.includes(size as TemplateFieldSize)} onChange={(e) => {this.modifyColSizes(field, size as TemplateFieldSize, e.target.checked)}}/> 
-                                    <div className='text'>{size}</div>
-                                </>)}
+                    <div className="sizes-box">
+                        <div className="top-bar"> Valid Sizes </div>
+                        <div className="content">
+                            <div className="bubbles">
+                                {sizes.map(size => (
+                                    <>
+                                        <input
+                                            className="bubble"
+                                            type="checkbox"
+                                            name="type"
+                                            checked={field.sizes.includes(size as TemplateFieldSize)}
+                                            onChange={e => {
+                                                this.modifyColSizes(field, size as TemplateFieldSize, e.target.checked);
+                                            }}
+                                        />
+                                        <div className="text">{size}</div>
+                                    </>
+                                ))}
                             </div>
                         </div>
                     </div>
-                    <div className='desc-box'>
-                        <div className='top-bar'> Description </div>
-                        <textarea className='content' onChange={(e) => this.setColDesc(field, 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 className="desc-box">
+                        <div className="top-bar"> Description </div>
+                        <textarea
+                            className="content"
+                            onChange={e => this.setColDesc(field, 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>
                 </div>
-            )
-        }    
+            );
+        };
 
         return (
-        <div className='docCreatorMenu-dashboard-view'>
-            <div className='topbar'>
-                <button className='docCreatorMenu-menu-button section-reveal-options' onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
-                    <FontAwesomeIcon icon='plus'/>
-                </button>
-                <button className='docCreatorMenu-menu-button section-reveal-options float-right' onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._menuContent = 'templates'))}>
-                    <FontAwesomeIcon icon='arrow-left'/>
-                </button>
-            </div>
-            <div className='panels-container'>
-                {this.fieldsInfos.map(field => fieldPanel(field))}
+            <div className="docCreatorMenu-dashboard-view">
+                <div className="topbar">
+                    <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
+                        <FontAwesomeIcon icon="plus" />
+                    </button>
+                    <button className="docCreatorMenu-menu-button section-reveal-options float-right" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._menuContent = 'templates')))}>
+                        <FontAwesomeIcon icon="arrow-left" />
+                    </button>
+                </div>
+                <div className="panels-container">{this.fieldsInfos.map(field => fieldPanel(field))}</div>
             </div>
-        </div>
         );
     }
 
-    get renderSelectedViewType(){
-        switch (this._menuContent){
+    get renderSelectedViewType() {
+        switch (this._menuContent) {
             case 'templates':
                 return this.templatesPreviewContents;
             case 'options':
@@ -1341,7 +1455,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         }
     }
 
-    get resizePanes(){
+    get resizePanes() {
         const ref = this._ref?.getBoundingClientRect();
         const height: number = ref?.height ?? 0;
         const width: number = ref?.width ?? 0;
@@ -1362,90 +1476,96 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         const topButton = (icon: string, opt: string, func: Function, tag: string) => {
             return (
                 <div className={`top-button-container ${tag} ${opt === this._menuContent ? 'selected' : ''}`}>
-                    <div 
+                    <div
                         className="top-button-content"
-                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => {func()}))}>
-                        <FontAwesomeIcon icon={icon as any}/>
+                        onPointerDown={e =>
+                            this.setUpButtonClick(e, () =>
+                                runInAction(() => {
+                                    func();
+                                })
+                            )
+                        }>
+                        <FontAwesomeIcon icon={icon as any} />
                     </div>
                 </div>
             );
-        }
+        };
 
-        const onPreviewSelected = () => {this._menuContent = 'templates'}
-        const onSavedSelected = () => {this._menuContent = 'dashboard'}
+        const onPreviewSelected = () => {
+            this._menuContent = 'templates';
+        };
+        const onSavedSelected = () => {
+            this._menuContent = 'dashboard';
+        };
         const onOptionsSelected = () => {
             this._menuContent = 'options';
             if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
-        }
-
+        };
 
         return (
-            <div className='docCreatorMenu'>
-                {!this._shouldDisplay ? undefined : 
-                <div
-                    className="docCreatorMenu-cont"
-                    ref={r => this._ref = r}
-                    style={{
-                        display: '',
-                        left: this._pageX,
-                        top: this._pageY,
-                        width: this._menuDimensions.width,
-                        height: this._menuDimensions.height,
-                        background: SnappingManager.userBackgroundColor,
-                        color: SnappingManager.userColor,
-                    }}>
+            <div className="docCreatorMenu">
+                {!this._shouldDisplay ? undefined : (
+                    <div
+                        className="docCreatorMenu-cont"
+                        ref={r => (this._ref = r)}
+                        style={{
+                            display: '',
+                            left: this._pageX,
+                            top: this._pageY,
+                            width: this._menuDimensions.width,
+                            height: this._menuDimensions.height,
+                            background: SnappingManager.userBackgroundColor,
+                            color: SnappingManager.userColor,
+                        }}>
                         {this.resizePanes}
-                        <div 
-                        className='docCreatorMenu-menu'
-                        onPointerDown={e =>
-                            setupMoveUpEvents(
-                                this,
-                                e,
-                                (e) => {
-                                    this._dragging = true;
-                                    this._startPos = {x: 0, y: 0};
-                                    this._startPos.x = e.pageX - (this._ref?.getBoundingClientRect().left ?? 0);
-                                    this._startPos.y = e.pageY - (this._ref?.getBoundingClientRect().top ?? 0);
-                                    document.addEventListener('pointermove', this.onDrag);
-                                    return true;
-                                },
-                                emptyFunction,
-                                undoable(clickEv => {
-                                    clickEv.stopPropagation();
-                                }, 'drag menu')
-                            )
-                        }
-                        >
-                            <div className='docCreatorMenu-top-buttons-container'>
+                        <div
+                            className="docCreatorMenu-menu"
+                            onPointerDown={e =>
+                                setupMoveUpEvents(
+                                    this,
+                                    e,
+                                    e => {
+                                        this._dragging = true;
+                                        this._startPos = { x: 0, y: 0 };
+                                        this._startPos.x = e.pageX - (this._ref?.getBoundingClientRect().left ?? 0);
+                                        this._startPos.y = e.pageY - (this._ref?.getBoundingClientRect().top ?? 0);
+                                        document.addEventListener('pointermove', this.onDrag);
+                                        return true;
+                                    },
+                                    emptyFunction,
+                                    undoable(clickEv => {
+                                        clickEv.stopPropagation();
+                                    }, 'drag menu')
+                                )
+                            }>
+                            <div className="docCreatorMenu-top-buttons-container">
                                 {topButton('table-cells', 'templates', onPreviewSelected, 'left')}
                                 {topButton('bars', 'options', onOptionsSelected, 'middle')}
                                 {topButton('floppy-disk', 'saved', onSavedSelected, 'right')}
                             </div>
-                            <button 
-                                className='docCreatorMenu-menu-button close-menu'
-                                onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
-                                <FontAwesomeIcon icon={'minus'}/>
+                            <button className="docCreatorMenu-menu-button close-menu" onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
+                                <FontAwesomeIcon icon={'minus'} />
                             </button>
                         </div>
                         {this.renderSelectedViewType}
-                </div>
-                }
+                    </div>
+                )}
             </div>
-            )
-        }
+        );
+    }
 }
 
 export interface DataVizTemplateInfo {
     doc: Doc;
-    layout: {type: LayoutType, xMargin: number, yMargin: number, repeat: number};
+    layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number };
     columns: number;
-    referencePos: {x: number, y: number};
+    referencePos: { x: number; y: number };
 }
 
 export interface DataVizTemplateLayout {
     template: Doc;
     docsNumList: number[];
-    layout: {type: LayoutType, xMargin: number, yMargin: number, repeat: number};
+    layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number };
     columns: number;
     rows: number;
 }
@@ -1453,7 +1573,7 @@ export interface DataVizTemplateLayout {
 export enum TemplateFieldType {
     TEXT = 'text',
     VISUAL = 'visual',
-    UNSET = 'unset'
+    UNSET = 'unset',
 }
 
 export enum TemplateFieldSize {
@@ -1461,17 +1581,16 @@ export enum TemplateFieldSize {
     SMALL = 'small',
     MEDIUM = 'medium',
     LARGE = 'large',
-    HUGE = 'huge'
+    HUGE = 'huge',
 }
 
-
 export type Col = {
     sizes: TemplateFieldSize[];
     desc: string;
     title: string;
     type: TemplateFieldType;
     defaultContent?: string;
-}
+};
 
 type Field = {
     tl: [number, number];
@@ -1482,7 +1601,7 @@ type Field = {
     sizes?: TemplateFieldSize[];
     isDecoration?: boolean;
     description?: string;
-}
+};
 
 // class ContentField implements Field {
 //     tl: [number, number];
@@ -1493,10 +1612,10 @@ type Field = {
 //     sizes?: TemplateFieldSize[];
 //     description?: string;
 
-//     constructor( tl: [number, number], br: [number, number], 
-//                         opts: FieldOpts, subfields?: Field[], 
-//                         types?: TemplateFieldType[], 
-//                         sizes?: TemplateFieldSize[], 
+//     constructor( tl: [number, number], br: [number, number],
+//                         opts: FieldOpts, subfields?: Field[],
+//                         types?: TemplateFieldType[],
+//                         sizes?: TemplateFieldSize[],
 //                         description?: string) {
 //         this.tl = tl;
 //         this.br = br;
@@ -1514,9 +1633,7 @@ type Field = {
 
 type DecorationField = Field;
 
-type InkDecoration = {
-
-}
+type InkDecoration = {};
 
 type TemplateDecorations = Field | InkDecoration;
 
@@ -1545,85 +1662,86 @@ export interface FieldOpts {
     fieldViewType?: 'freeform' | 'stacked';
 }
 
-interface TemplateOpts extends FieldOpts {
-
-}
+interface TemplateOpts extends FieldOpts {}
 
 export class FieldUtils {
-
     public static contentFields = (fields: Field[]) => {
         let toRet: Field[] = [];
         fields.forEach(field => {
-            if (!field.isDecoration) { toRet.push(field) };
+            if (!field.isDecoration) {
+                toRet.push(field);
+            }
             toRet = toRet.concat(FieldUtils.contentFields(field.subfields ?? []));
         });
 
         return toRet;
-    }
+    };
 
     public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
         const words: string[] = text.split(/\s+/).filter(Boolean);
 
-        let currFontSize = 1; 
+        let currFontSize = 1;
         let rowsCount = 1;
         let currTextHeight = currFontSize * rowsCount * 2;
-    
+
         while (currTextHeight <= contHeight) {
             let wordIndex = 0;
             let currentRowWidth = 0;
             let wordsInCurrRow = 0;
             rowsCount = 1;
-    
+
             while (wordIndex < words.length) {
                 const word = words[wordIndex];
-                const wordWidth = word.length * currFontSize * .5;
+                const wordWidth = word.length * currFontSize * 0.5;
                 //console.log(wordWidth)
-    
+
                 if (currentRowWidth + wordWidth <= contWidth) {
                     currentRowWidth += wordWidth;
                     ++wordsInCurrRow;
                 } else {
-                    if (words.length !== 1 && words.length > wordsInCurrRow){ 
+                    if (words.length !== 1 && words.length > wordsInCurrRow) {
                         rowsCount++;
-                        currentRowWidth = wordWidth; 
+                        currentRowWidth = wordWidth;
                         wordsInCurrRow = 1;
                     } else {
                         break;
                     }
                 }
-    
-                wordIndex++;    
+
+                wordIndex++;
             }
-    
+
             currTextHeight = rowsCount * currFontSize * 2;
             //console.log(rowsCount, currFontSize, currTextHeight)
-    
+
             currFontSize += 1;
         }
-        
+
         return currFontSize - 1;
     };
 
-    private static getDimensions = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number): {width: number, height: number, coord: {x: number, y: number}} => {
-        const l = coords.tl[0] * parentHeight / 2; const t = coords.tl[1] * parentWidth / 2; //prettier-ignore
-        const r = coords.br[0] * parentHeight / 2; const b = coords.br[1] * parentWidth / 2; //prettier-ignore
+    private static getDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number): { width: number; height: number; coord: { x: number; y: number } } => {
+        const l = (coords.tl[0] * parentHeight) / 2;
+        const t = coords.tl[1] * parentWidth / 2; //prettier-ignore
+        const r = (coords.br[0] * parentHeight) / 2;
+        const b = coords.br[1] * parentWidth / 2; //prettier-ignore
         const width = r - l;
         const height = b - t;
-        const coord = {x: l, y: t};
+        const coord = { x: l, y: t };
         //console.log(coords, parentWidth, parentHeight, height);
-        return {width, height, coord};
-    }
+        return { width, height, coord };
+    };
 
-    public static FreeformField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
-        const {width, height, coord} = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
+    public static FreeformField = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
+        const { width, height, coord } = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
 
-        const docWithBasicOpts = (Docs.Create.FreeformDocument)([], {  
-            isDefaultTemplateDoc: true, 
-            _height: height, 
-            _width: width, 
-            title: title, 
-            x: coord.x, 
-            y: coord.y, 
+        const docWithBasicOpts = Docs.Create.FreeformDocument([], {
+            isDefaultTemplateDoc: true,
+            _height: height,
+            _width: width,
+            title: title,
+            x: coord.x,
+            y: coord.y,
             backgroundColor: opts.backgroundColor ?? '',
             _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
             borderColor: opts.borderColor,
@@ -1634,21 +1752,21 @@ export class FieldUtils {
         });
 
         return docWithBasicOpts;
-    }
+    };
 
-    public static TextField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
-        const {width, height, coord} = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
+    public static TextField = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
+        const { width, height, coord } = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
 
         const bool = true;
 
-        const docWithBasicOpts = (Docs.Create.TextDocument)(content, {   
+        const docWithBasicOpts = Docs.Create.TextDocument(content, {
             isDefaultTemplateDoc: true,
-            _height: height, 
-            _width: width, 
-            title: title, 
-            x: coord.x, 
-            y: coord.y, 
-            _text_fontSize: `${FieldUtils.calculateFontSize(width, height, content, true)}` ,
+            _height: height,
+            _width: width,
+            title: title,
+            x: coord.x,
+            y: coord.y,
+            _text_fontSize: `${FieldUtils.calculateFontSize(width, height, content, true)}`,
             backgroundColor: opts.backgroundColor ?? '',
             text_fontColor: opts.color,
             contentBold: opts.fontBold,
@@ -1665,17 +1783,17 @@ export class FieldUtils {
         docWithBasicOpts._layout_hideScroll = true;
 
         return docWithBasicOpts;
-    }
+    };
 
-    public static ImageField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
-        const {width, height, coord} = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
+    public static ImageField = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
+        const { width, height, coord } = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
 
-        const doc = Docs.Create.ImageDocument(content, {  
-            isDefaultTemplateDoc: true, 
-            _height: height, 
-            _width: width, 
-            title: title, 
-            x: coord.x, 
+        const doc = Docs.Create.ImageDocument(content, {
+            isDefaultTemplateDoc: true,
+            _height: height,
+            _width: width,
+            title: title,
+            x: coord.x,
             y: coord.y,
             _layout_fitWidth: false,
             backgroundColor: opts.backgroundColor ?? '',
@@ -1689,28 +1807,24 @@ export class FieldUtils {
         //setTimeout(() => {doc._height = height; doc._width = width}, 10);
 
         return doc;
-    }
+    };
 
-    public static CarouselField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, fields: Doc[]) => {
-        const {width, height, coord} = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
+    public static CarouselField = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number, title: string, fields: Doc[]) => {
+        const { width, height, coord } = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
 
-        const doc = Docs.Create.Carousel3DDocument(fields, { _height: height, _width: width, title: title, x: coord.x, y: coord.y, _text_fontSize: `${height/2}` })
+        const doc = Docs.Create.Carousel3DDocument(fields, { _height: height, _width: width, title: title, x: coord.x, y: coord.y, _text_fontSize: `${height / 2}` });
 
         return doc;
-    }
-    
+    };
 }
 
 export class TemplateLayouts {
-
     public static get allTemplates(): TemplateDocInfos[] {
-        return Object.values(TemplateLayouts).filter(
-            value => typeof value === 'object' && value !== null && 'title' in value
-        ) as TemplateDocInfos[];
+        return Object.values(TemplateLayouts).filter(value => typeof value === 'object' && value !== null && 'title' in value) as TemplateDocInfos[];
     }
 
     public static getTemplateByTitle = (title: string): TemplateDocInfos | undefined => {
-        switch (title){
+        switch (title) {
             case 'fourfield1':
                 return TemplateLayouts.FourField001;
             case 'fourfield2':
@@ -1728,173 +1842,187 @@ export class TemplateLayouts {
         }
 
         return undefined;
-    }
+    };
 
     public static FourField001: TemplateDocInfos = {
         title: 'fourfield1',
-        width: 416, 
-        height: 700, 
+        width: 416,
+        height: 700,
         opts: {
             backgroundColor: '#C0B887',
             cornerRounding: 20,
             borderColor: '#6B461F',
             borderWidth: '12',
         },
-        fields: [{
-            tl: [-.95, -1], 
-            br: [.95, -.85], 
-            types: [TemplateFieldType.TEXT],
-            sizes: [TemplateFieldSize.TINY],
-            description: 'A title field for very short text that contextualizes the content.',
-            opts: {
-                backgroundColor: 'transparent',
-                color: '#F1F0E9',
-                contentXCentering: 'h-center',
-                fontBold: true,
-            }
-        }, {
-            tl: [-.87, -.83], 
-            br: [.87, .2], 
-            types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
-            sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-            description: 'The main focus of the template; could be an image, long text, etc.',
-            opts: {
-                cornerRounding: 20,
-                borderColor: '#8F5B25',
-                borderWidth: '6',
-                backgroundColor: '#CECAB9',
-            }
-        }, {
-            tl: [-.8, .2], 
-            br: [.8, .3],  
-            types: [TemplateFieldType.TEXT],
-            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',
-                color: '#F1F0E9',
-            }
-        }, {
-            tl: [-.87, .37], 
-            br: [.87, .96], 
-            types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
-            sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-            description: 'A medium-sized field for medium/long text.',
-            opts: {
-                cornerRounding: 15,
-                borderColor: '#8F5B25', 
-                borderWidth: '6',
-                backgroundColor: '#CECAB9',
-            }
-        }],
+        fields: [
+            {
+                tl: [-0.95, -1],
+                br: [0.95, -0.85],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY],
+                description: 'A title field for very short text that contextualizes the content.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: '#F1F0E9',
+                    contentXCentering: 'h-center',
+                    fontBold: true,
+                },
+            },
+            {
+                tl: [-0.87, -0.83],
+                br: [0.87, 0.2],
+                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'The main focus of the template; could be an image, long text, etc.',
+                opts: {
+                    cornerRounding: 20,
+                    borderColor: '#8F5B25',
+                    borderWidth: '6',
+                    backgroundColor: '#CECAB9',
+                },
+            },
+            {
+                tl: [-0.8, 0.2],
+                br: [0.8, 0.3],
+                types: [TemplateFieldType.TEXT],
+                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',
+                    color: '#F1F0E9',
+                },
+            },
+            {
+                tl: [-0.87, 0.37],
+                br: [0.87, 0.96],
+                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'A medium-sized field for medium/long text.',
+                opts: {
+                    cornerRounding: 15,
+                    borderColor: '#8F5B25',
+                    borderWidth: '6',
+                    backgroundColor: '#CECAB9',
+                },
+            },
+        ],
         decorations: [],
     };
 
     public static FourField002: TemplateDocInfos = {
         title: 'fourfield2',
-        width: 425, 
-        height: 778, 
+        width: 425,
+        height: 778,
         opts: {
-            backgroundColor: '#242425'
+            backgroundColor: '#242425',
         },
-        fields: [{
-            tl: [-.83, -.95], 
-            br: [.83, -.2], 
-            types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
-            sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
-            description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus.',
-            opts: {
-                borderWidth: '8',
-                borderColor: '#F8E71C',
-            }
-        }, {
-            tl: [-.65, -.2], 
-            br: [.65, -.02], 
-            types: [TemplateFieldType.TEXT],
-            sizes: [TemplateFieldSize.TINY],
-            description: 'A tiny field for just a word or two of plain text.',
-            opts: {
-                backgroundColor: 'transparent',
-                color: 'white',
-                contentXCentering: 'h-center',
-                fontTransform: 'uppercase'
-            }
-        }, {
-            tl: [-.65, 0], 
-            br: [.65, .18], 
-            types: [TemplateFieldType.TEXT],
-            sizes: [TemplateFieldSize.TINY],
-            description: 'A tiny field for just a word or two of plain text.',
-            opts: {
-                backgroundColor: 'transparent',
-                color: 'white',
-                contentXCentering: 'h-center',
-                fontTransform: 'uppercase'
-            }
-        }, {
-            tl: [-.83, .2], 
-            br: [.83, .95], 
-            types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
-            sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-            description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus, or share focus with field 1.',
-            opts: {
-                borderWidth: '8',
-                borderColor: '#F8E71C',
-                color: 'white',
-                backgroundColor: '#242425',
-            }
-        }],
-        decorations: [{
-            tl: [-.8, -.075], 
-            br: [-.525, .075], 
-            opts: {
-                backgroundColor: '#F8E71C',
-                rotation: 45
-            }
-        }, {
-            tl: [-.3075, -.0245], 
-            br: [-.2175, .0245], 
-            opts: {
-                backgroundColor: '#F8E71C',
-                rotation: 45
-            }
-        }, {
-            tl: [-.045, -.0245], 
-            br: [.045, .0245], 
-            opts: {
-                backgroundColor: '#F8E71C',
-                rotation: 45
-            }
-        }, {
-            tl: [.2175, -.0245], 
-            br: [.3075, .0245], 
-            opts: {
-                backgroundColor: '#F8E71C',
-                rotation: 45
-            }
-        }, {
-            tl: [.525, -.075], 
-            br: [.8, .075], 
-            opts: {
-                backgroundColor: '#F8E71C',
-                rotation: 45
-            }
-        }
-
-        ]
+        fields: [
+            {
+                tl: [-0.83, -0.95],
+                br: [0.83, -0.2],
+                types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
+                description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus.',
+                opts: {
+                    borderWidth: '8',
+                    borderColor: '#F8E71C',
+                },
+            },
+            {
+                tl: [-0.65, -0.2],
+                br: [0.65, -0.02],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY],
+                description: 'A tiny field for just a word or two of plain text.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: 'white',
+                    contentXCentering: 'h-center',
+                    fontTransform: 'uppercase',
+                },
+            },
+            {
+                tl: [-0.65, 0],
+                br: [0.65, 0.18],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY],
+                description: 'A tiny field for just a word or two of plain text.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: 'white',
+                    contentXCentering: 'h-center',
+                    fontTransform: 'uppercase',
+                },
+            },
+            {
+                tl: [-0.83, 0.2],
+                br: [0.83, 0.95],
+                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus, or share focus with field 1.',
+                opts: {
+                    borderWidth: '8',
+                    borderColor: '#F8E71C',
+                    color: 'white',
+                    backgroundColor: '#242425',
+                },
+            },
+        ],
+        decorations: [
+            {
+                tl: [-0.8, -0.075],
+                br: [-0.525, 0.075],
+                opts: {
+                    backgroundColor: '#F8E71C',
+                    rotation: 45,
+                },
+            },
+            {
+                tl: [-0.3075, -0.0245],
+                br: [-0.2175, 0.0245],
+                opts: {
+                    backgroundColor: '#F8E71C',
+                    rotation: 45,
+                },
+            },
+            {
+                tl: [-0.045, -0.0245],
+                br: [0.045, 0.0245],
+                opts: {
+                    backgroundColor: '#F8E71C',
+                    rotation: 45,
+                },
+            },
+            {
+                tl: [0.2175, -0.0245],
+                br: [0.3075, 0.0245],
+                opts: {
+                    backgroundColor: '#F8E71C',
+                    rotation: 45,
+                },
+            },
+            {
+                tl: [0.525, -0.075],
+                br: [0.8, 0.075],
+                opts: {
+                    backgroundColor: '#F8E71C',
+                    rotation: 45,
+                },
+            },
+        ],
     };
 
     // public static FourField003: TemplateDocInfos = {
     //     title: 'fourfield3',
-    //     width: 477, 
-    //     height: 662, 
+    //     width: 477,
+    //     height: 662,
     //     opts: {
     //         backgroundColor: '#9E9C95'
     //     },
     //     fields: [{
-    //         tl: [-.875, -.9], 
-    //         br: [.875, .7], 
+    //         tl: [-.875, -.9],
+    //         br: [.875, .7],
     //         types: [TemplateFieldType.VISUAL],
     //         sizes: [TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
     //         description: '',
@@ -1903,8 +2031,8 @@ export class TemplateLayouts {
     //             borderColor: '#E0E0DA',
     //         }
     //     }, {
-    //         tl: [-.95, .8], 
-    //         br: [-.1, .95], 
+    //         tl: [-.95, .8],
+    //         br: [-.1, .95],
     //         types: [TemplateFieldType.TEXT],
     //         sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
     //         description: '',
@@ -1914,8 +2042,8 @@ export class TemplateLayouts {
     //             contentXCentering: 'h-right',
     //         }
     //     }, {
-    //         tl: [.1, .8], 
-    //         br: [.95, .95], 
+    //         tl: [.1, .8],
+    //         br: [.95, .95],
     //         types: [TemplateFieldType.TEXT],
     //         sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
     //         description: '',
@@ -1926,8 +2054,8 @@ export class TemplateLayouts {
     //             contentXCentering: 'h-left'
     //         }
     //     }, {
-    //         tl: [0, -.9], 
-    //         br: [.85, -.66], 
+    //         tl: [0, -.9],
+    //         br: [.85, -.66],
     //         types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
     //         sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
     //         description: '',
@@ -1937,8 +2065,8 @@ export class TemplateLayouts {
     //         }
     //     }],
     //     decorations: [{
-    //         tl: [-.025, .8], 
-    //         br: [.025, .95], 
+    //         tl: [-.025, .8],
+    //         br: [.025, .95],
     //         opts: {
     //             backgroundColor: '#E0E0DA',
     //         }
@@ -1947,242 +2075,257 @@ export class TemplateLayouts {
 
     public static FourField004: TemplateDocInfos = {
         title: 'fourfield4',
-        width: 414, 
-        height: 583, 
+        width: 414,
+        height: 583,
         opts: {
             backgroundColor: '#6CCAF0',
             borderColor: '#1088C3',
-            borderWidth: '10'
+            borderWidth: '10',
         },
-        fields: [{
-            tl: [-.86, -.92], 
-            br: [-.075, -.77], 
-            types: [TemplateFieldType.TEXT],
-            sizes: [TemplateFieldSize.TINY],
-            description: 'A tiny field for just a word or two of plain text.',
-            opts: {
-                backgroundColor: '#E2B4F5',
-                borderWidth: '9',
-                borderColor: '#9222F1',
-                contentXCentering: 'h-center'
-            }
-        }, {
-            tl: [.075, -.92], 
-            br: [.86, -.77], 
-            types: [TemplateFieldType.TEXT],
-            sizes: [TemplateFieldSize.TINY],
-            description: 'A tiny field for just a word or two of plain text.',
-            opts: {
-                backgroundColor: '#F5B4DD',
-                borderWidth: '9',
-                borderColor: '#E260F3',
-                contentXCentering: 'h-center'
-            }
-        }, {
-            tl: [-.81, -.64], 
-            br: [.81, .48], 
-            types: [TemplateFieldType.VISUAL],
-            sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-            description: 'A large to huge field for visual content that is the main content of the template.',
-            opts: {
-                borderWidth: '16',
-                borderColor: '#A2BD77',
-            }
-        }, {
-            tl: [-.86, .6], 
-            br: [.86, .92], 
-            types: [TemplateFieldType.TEXT],
-            sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
-            description: 'A medium to large field for text that describes the visual content above',
-            opts: {
-                borderWidth: '9',
-                borderColor: '#F0D601',
-                backgroundColor: '#F3F57D',
-            }
-        }],
-        decorations: [{
-            tl: [-.852, -.67], 
-            br: [.852, .51], 
-            opts: {
-                backgroundColor: 'transparent',
-                borderColor: '#007C0C',
-                borderWidth: '10',
-            }
-        }]
+        fields: [
+            {
+                tl: [-0.86, -0.92],
+                br: [-0.075, -0.77],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY],
+                description: 'A tiny field for just a word or two of plain text.',
+                opts: {
+                    backgroundColor: '#E2B4F5',
+                    borderWidth: '9',
+                    borderColor: '#9222F1',
+                    contentXCentering: 'h-center',
+                },
+            },
+            {
+                tl: [0.075, -0.92],
+                br: [0.86, -0.77],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY],
+                description: 'A tiny field for just a word or two of plain text.',
+                opts: {
+                    backgroundColor: '#F5B4DD',
+                    borderWidth: '9',
+                    borderColor: '#E260F3',
+                    contentXCentering: 'h-center',
+                },
+            },
+            {
+                tl: [-0.81, -0.64],
+                br: [0.81, 0.48],
+                types: [TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'A large to huge field for visual content that is the main content of the template.',
+                opts: {
+                    borderWidth: '16',
+                    borderColor: '#A2BD77',
+                },
+            },
+            {
+                tl: [-0.86, 0.6],
+                br: [0.86, 0.92],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
+                description: 'A medium to large field for text that describes the visual content above',
+                opts: {
+                    borderWidth: '9',
+                    borderColor: '#F0D601',
+                    backgroundColor: '#F3F57D',
+                },
+            },
+        ],
+        decorations: [
+            {
+                tl: [-0.852, -0.67],
+                br: [0.852, 0.51],
+                opts: {
+                    backgroundColor: 'transparent',
+                    borderColor: '#007C0C',
+                    borderWidth: '10',
+                },
+            },
+        ],
     };
 
     public static ThreeField001: TemplateDocInfos = {
         title: 'threefield1',
-        width: 575, 
-        height: 770, 
+        width: 575,
+        height: 770,
         opts: {
-            backgroundColor: '#DDD3A9'
+            backgroundColor: '#DDD3A9',
         },
-        fields: [{
-            tl: [-.66, -.747], 
-            br: [.66, .247], 
-            types: [TemplateFieldType.VISUAL],
-            sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-            description: 'A medium to large field for visual content that is the central focus.',
-            opts: {
-                borderColor: 'yellow',
-                borderWidth: '8',
-                rotation: 45,
+        fields: [
+            {
+                tl: [-0.66, -0.747],
+                br: [0.66, 0.247],
+                types: [TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'A medium to large field for visual content that is the central focus.',
+                opts: {
+                    borderColor: 'yellow',
+                    borderWidth: '8',
+                    rotation: 45,
+                },
             },
-        }, {
-            tl: [-.7, .2], 
-            br: [.7, .46], 
-            types: [TemplateFieldType.TEXT],
-            sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-            description: 'A very small text field for one to a few words. A good caption for the image.',
-            opts: {
-                backgroundColor: 'transparent',
-                contentXCentering: 'h-center',
-            }
-        }, {
-            tl: [-.95, .5], 
-            br: [.95, .95], 
-            types: [TemplateFieldType.TEXT],
-            sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
-            description: 'A medium to large text field for a thorough description of the image. ',
-            opts: {
-                backgroundColor: 'transparent',
-                color: 'white'
-            }
-        }],
-        decorations: [{
-            tl: [.2, -1.32], 
-            br: [1.8, -.66], 
-            opts: {
-                backgroundColor: '#CEB155',
-                rotation: 45,
-            }
-        }, {
-            tl: [-1.8, -1.32], 
-            br: [-.2, -.66], 
-            opts: {
-                backgroundColor: '#CEB155',
-                rotation: 135,
-            }
-        }, {
-            tl: [.33, .75], 
-            br: [1.66, 1.25], 
-            opts: {
-                backgroundColor: '#CEB155',
-                rotation: 135,
-            }
-        }, {
-            tl: [-1.66, .75], 
-            br: [-.33, 1.25], 
-            opts: {
-                backgroundColor: '#CEB155',
-                rotation: 45,
-            }
-        }]
+            {
+                tl: [-0.7, 0.2],
+                br: [0.7, 0.46],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+                description: 'A very small text field for one to a few words. A good caption for the image.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    contentXCentering: 'h-center',
+                },
+            },
+            {
+                tl: [-0.95, 0.5],
+                br: [0.95, 0.95],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
+                description: 'A medium to large text field for a thorough description of the image. ',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: 'white',
+                },
+            },
+        ],
+        decorations: [
+            {
+                tl: [0.2, -1.32],
+                br: [1.8, -0.66],
+                opts: {
+                    backgroundColor: '#CEB155',
+                    rotation: 45,
+                },
+            },
+            {
+                tl: [-1.8, -1.32],
+                br: [-0.2, -0.66],
+                opts: {
+                    backgroundColor: '#CEB155',
+                    rotation: 135,
+                },
+            },
+            {
+                tl: [0.33, 0.75],
+                br: [1.66, 1.25],
+                opts: {
+                    backgroundColor: '#CEB155',
+                    rotation: 135,
+                },
+            },
+            {
+                tl: [-1.66, 0.75],
+                br: [-0.33, 1.25],
+                opts: {
+                    backgroundColor: '#CEB155',
+                    rotation: 45,
+                },
+            },
+        ],
     };
 
     public static ThreeField002: TemplateDocInfos = {
         title: 'threefield2',
-        width: 477, 
-        height: 662, 
+        width: 477,
+        height: 662,
         opts: {
-            backgroundColor: '#9E9C95'
+            backgroundColor: '#9E9C95',
         },
-        fields: [{
-            tl: [-.875, -.9], 
-            br: [.875, .7], 
-            types: [TemplateFieldType.VISUAL],
-            sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-            description: 'A medium to large visual field for the main content of the template',
-            opts: {
-                borderWidth: '15',
-                borderColor: '#E0E0DA',
-            }
-        }, {
-            tl: [.1, .775], 
-            br: [.95, .975], 
-            types: [TemplateFieldType.TEXT],
-            sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-            description: 'A very small text field for one to a few words. The content should represent a general categorization of the image.',
-            opts: {
-                backgroundColor: 'transparent',
-                color: '#AF0D0D',
-                fontTransform: 'uppercase',
-                fontBold: true,
-                contentXCentering: 'h-left'
-            }
-        }, {
-            tl: [-.95, .775], 
-            br: [-.1, .975],
-            types: [TemplateFieldType.TEXT],
-            sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-            description: 'A very small text field for one to a few words. The content should contextualize field 2.',
-            opts: {
-                backgroundColor: 'transparent',
-                color: 'black',
-                contentXCentering: 'h-right'
-            }
-        }],
-        decorations: [{
-            tl: [-.025, .8], 
-            br: [.025, .95], 
-            opts: {
-                backgroundColor: '#E0E0DA',
-            }
-        }]
+        fields: [
+            {
+                tl: [-0.875, -0.9],
+                br: [0.875, 0.7],
+                types: [TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'A medium to large visual field for the main content of the template',
+                opts: {
+                    borderWidth: '15',
+                    borderColor: '#E0E0DA',
+                },
+            },
+            {
+                tl: [0.1, 0.775],
+                br: [0.95, 0.975],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+                description: 'A very small text field for one to a few words. The content should represent a general categorization of the image.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: '#AF0D0D',
+                    fontTransform: 'uppercase',
+                    fontBold: true,
+                    contentXCentering: 'h-left',
+                },
+            },
+            {
+                tl: [-0.95, 0.775],
+                br: [-0.1, 0.975],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+                description: 'A very small text field for one to a few words. The content should contextualize field 2.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: 'black',
+                    contentXCentering: 'h-right',
+                },
+            },
+        ],
+        decorations: [
+            {
+                tl: [-0.025, 0.8],
+                br: [0.025, 0.95],
+                opts: {
+                    backgroundColor: '#E0E0DA',
+                },
+            },
+        ],
     };
 
-
-
-//     public static FourField002: TemplateDocInfos = {
-//         width: 450, 
-//         height: 600, 
-//         fields: [{
-//             tl: [-.6, -.9], 
-//             br: [.6, -.8], 
-//             types: [FieldType.TEXT],
-//             sizes: [FieldSize.TINY]
-//         }, {
-//             tl: [-.9, -.7], 
-//             br: [.9, .2], 
-//             types: [FieldType.TEXT, FieldType.VISUAL],
-//             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
-//         }, {
-//             tl: [-.9, .3], 
-//             br: [-.05, .9], 
-//             types: [FieldType.TEXT],
-//             sizes: [FieldSize.TINY]
-//         }, {
-//             tl: [.05, .3], 
-//             br: [.9, .9], 
-//             types: [FieldType.TEXT, FieldType.VISUAL],
-//             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
-//         }]
-//     };
-
-//     public static TwoFieldPlusCarousel: TemplateDocInfos = {
-//         width: 500, 
-//         height: 600, 
-//         fields: [{
-//             tl: [-.9, -.99], 
-//             br: [.9, -.7], 
-//             types: [FieldType.TEXT],
-//             sizes: [FieldSize.TINY]
-//         }, {
-//             tl: [-.9, -.65], 
-//             br: [.9, .35], 
-//             types: [],
-//             sizes: []
-//         }, {
-//             tl: [-.9, .4], 
-//             br: [.9, .95], 
-//             types: [FieldType.TEXT],
-//             sizes: [FieldSize.TINY]
-//         }]
-//     };
-
+    //     public static FourField002: TemplateDocInfos = {
+    //         width: 450,
+    //         height: 600,
+    //         fields: [{
+    //             tl: [-.6, -.9],
+    //             br: [.6, -.8],
+    //             types: [FieldType.TEXT],
+    //             sizes: [FieldSize.TINY]
+    //         }, {
+    //             tl: [-.9, -.7],
+    //             br: [.9, .2],
+    //             types: [FieldType.TEXT, FieldType.VISUAL],
+    //             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+    //         }, {
+    //             tl: [-.9, .3],
+    //             br: [-.05, .9],
+    //             types: [FieldType.TEXT],
+    //             sizes: [FieldSize.TINY]
+    //         }, {
+    //             tl: [.05, .3],
+    //             br: [.9, .9],
+    //             types: [FieldType.TEXT, FieldType.VISUAL],
+    //             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+    //         }]
+    //     };
+
+    //     public static TwoFieldPlusCarousel: TemplateDocInfos = {
+    //         width: 500,
+    //         height: 600,
+    //         fields: [{
+    //             tl: [-.9, -.99],
+    //             br: [.9, -.7],
+    //             types: [FieldType.TEXT],
+    //             sizes: [FieldSize.TINY]
+    //         }, {
+    //             tl: [-.9, -.65],
+    //             br: [.9, .35],
+    //             types: [],
+    //             sizes: []
+    //         }, {
+    //             tl: [-.9, .4],
+    //             br: [.9, .95],
+    //             types: [FieldType.TEXT],
+    //             sizes: [FieldSize.TINY]
+    //         }]
+    //     };
 }
-
-export class ContentField extends Field {
-    
-}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 63e8e1fd38835d193930bc6103a12dc4cf4d8934 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 30 Sep 2024 19:01:17 -0400
Subject: removing unused code.

---
 src/fields/Doc.ts | 45 +--------------------------------------------
 1 file changed, 1 insertion(+), 44 deletions(-)

(limited to 'src')

diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 5a4573a4f..2dbfb5a72 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -174,49 +174,6 @@ export function updateCachedAcls(doc: Doc) {
     return undefined;
 }
 
-export function ActiveInkPen(): Doc { return Doc.UserDoc(); } // prettier-ignore
-export function ActiveInkColor(): string { return StrCast(ActiveInkPen()?.activeInkColor, 'black'); } // prettier-ignore
-export function ActiveFillColor(): string { return StrCast(ActiveInkPen()?.activeFillColor, ''); } // prettier-ignore
-export function ActiveIsInkMask(): boolean { return BoolCast(ActiveInkPen()?.activeIsInkMask, false); } // prettier-ignore
-export function ActiveInkHideTextLabels(): boolean { return BoolCast(ActiveInkPen().activeInkHideTextLabels, false); } // prettier-ignore
-export function ActiveArrowStart(): string { return StrCast(ActiveInkPen()?.activeArrowStart, ''); } // prettier-ignore
-export function ActiveArrowEnd(): string { return StrCast(ActiveInkPen()?.activeArrowEnd, ''); } // prettier-ignore
-export function ActiveArrowScale(): number { return NumCast(ActiveInkPen()?.activeArrowScale, 1); } // prettier-ignore
-export function ActiveDash(): string { return StrCast(ActiveInkPen()?.activeDash, '0'); } // prettier-ignore
-export function ActiveInkWidth(): number { return Number(ActiveInkPen()?.activeInkWidth); } // prettier-ignore
-export function ActiveInkBezierApprox(): string { return StrCast(ActiveInkPen()?.activeInkBezier); } // prettier-ignore
-
-export function SetActiveInkWidth(width: string): void {
-    !isNaN(parseInt(width)) && ActiveInkPen() && (ActiveInkPen().activeInkWidth = width);
-}
-export function SetActiveBezierApprox(bezier: string): void {
-    ActiveInkPen() && (ActiveInkPen().activeInkBezier = isNaN(parseInt(bezier)) ? '' : bezier);
-}
-export function SetActiveInkColor(value: string) {
-    ActiveInkPen() && (ActiveInkPen().activeInkColor = value);
-}
-export function SetActiveIsInkMask(value: boolean) {
-    ActiveInkPen() && (ActiveInkPen().activeIsInkMask = value);
-}
-export function SetActiveInkHideTextLabels(value: boolean) {
-    ActiveInkPen() && (ActiveInkPen().activeInkHideTextLabels = value);
-}
-export function SetActiveFillColor(value: string) {
-    ActiveInkPen() && (ActiveInkPen().activeFillColor = value);
-}
-export function SetActiveArrowStart(value: string) {
-    ActiveInkPen() && (ActiveInkPen().activeArrowStart = value);
-}
-export function SetActiveArrowEnd(value: string) {
-    ActiveInkPen() && (ActiveInkPen().activeArrowEnd = value);
-}
-export function SetActiveArrowScale(value: number) {
-    ActiveInkPen() && (ActiveInkPen().activeArrowScale = value);
-}
-export function SetActiveDash(dash: string): void {
-    !isNaN(parseInt(dash)) && ActiveInkPen() && (ActiveInkPen().activeDash = dash);
-}
-
 @scriptingGlobal
 @Deserializable('Doc', updateCachedAcls, ['id'])
 export class Doc extends RefField {
@@ -1354,7 +1311,7 @@ export namespace Doc {
         doc._lockedPosition = !doc._lockedPosition;
         doc._pointerEvents = doc._lockedPosition ? 'none' : undefined;
     }
-    
+
     export function deiconifyView(doc: Doc) {
         StrCast(doc.layout_fieldKey).split('_')[1] === 'icon' && setNativeView(doc);
     }
-- 
cgit v1.2.3-70-g09d2


From 115c243e57dd490dfcf09930913a941ca7ecfabc Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 1 Oct 2024 04:00:36 -0400
Subject: commit

---
 .../views/collections/collectionSchema/SchemaColumnHeader.tsx       | 6 +++---
 src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx                | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index e97d53edd..c5cdac8af 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -37,7 +37,7 @@ export interface SchemaColumnHeaderProps {
     setSort: (field: string | undefined, desc?: boolean) => void;
     removeColumn: (index: number) => void;
     rowHeight: () => number;
-    resizeColumn: (e: React.PointerEvent, index: number) => void;
+    resizeColumn: (e: React.PointerEvent, index: number, rightSide: boolean) => void;
     dragColumn: (e: PointerEvent, index: number) => boolean;
     openContextMenu: (x: number, y: number, index: number) => void;
     setColRef: (index: number, ref: HTMLDivElement) => void;
@@ -231,7 +231,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                             this._props.setColRef(this._props.columnIndex, col);
                         }
                     }}>
-                    <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} />
+                    <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex, false)} />
 
                     <div className="schema-header-text">{this.editableView}</div>
 
@@ -241,7 +241,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                         </div>
                     </div>  
 
-                    <div className="schema-column-resizer right" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} />
+                    <div className="schema-column-resizer right" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex, true)} />
                 </div>
         );
     }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 5d5c35dce..0f93a4dd6 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -2183,6 +2183,6 @@ export class TemplateLayouts {
 
 }
 
-export class ContentField extends Field {
+// export class ContentField extends Field {
     
-}
\ No newline at end of file
+// }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 111a4775788a52b218d5dbb49ef8c2d83d90ff3e Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Tue, 1 Oct 2024 04:17:34 -0400
Subject: added dompurify

---
 package-lock.json                                       | 17 +++++++++++++++++
 package.json                                            |  2 ++
 .../collections/collectionSchema/SchemaCellField.tsx    |  3 ++-
 3 files changed, 21 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index a47585c74..0bf5df2d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -94,6 +94,7 @@
                 "D": "^1.0.0",
                 "d3": "^7.8.5",
                 "depcheck": "^1.4.7",
+                "dompurify": "^3.1.7",
                 "dotenv": "^16.4.5",
                 "eslint-webpack-plugin": "^4.1.0",
                 "exif": "^0.6.0",
@@ -265,6 +266,7 @@
                 "@types/cookie-session": "^2.0.48",
                 "@types/d3": "^7.4.3",
                 "@types/dom-mediacapture-record": "^1.0.19",
+                "@types/dompurify": "^3.0.5",
                 "@types/exif": "^0.6.5",
                 "@types/express": "^5.0.0",
                 "@types/express-session": "^1.17.10",
@@ -9253,6 +9255,15 @@
             "resolved": "https://registry.npmjs.org/@types/dom-speech-recognition/-/dom-speech-recognition-0.0.4.tgz",
             "integrity": "sha512-zf2GwV/G6TdaLwpLDcGTIkHnXf8JEf/viMux+khqKQKDa8/8BAUtXXZS563GnvJ4Fg0PBLGAaFf2GekEVSZ6GQ=="
         },
+        "node_modules/@types/dompurify": {
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+            "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+            "dev": true,
+            "dependencies": {
+                "@types/trusted-types": "*"
+            }
+        },
         "node_modules/@types/eslint": {
             "version": "8.56.12",
             "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
@@ -9925,6 +9936,12 @@
             "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
             "dev": true
         },
+        "node_modules/@types/trusted-types": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+            "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+            "dev": true
+        },
         "node_modules/@types/unist": {
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
diff --git a/package.json b/package.json
index a1def81de..f0fa676a6 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
         "@types/cookie-session": "^2.0.48",
         "@types/d3": "^7.4.3",
         "@types/dom-mediacapture-record": "^1.0.19",
+        "@types/dompurify": "^3.0.5",
         "@types/exif": "^0.6.5",
         "@types/express": "^5.0.0",
         "@types/express-session": "^1.17.10",
@@ -173,6 +174,7 @@
         "D": "^1.0.0",
         "d3": "^7.8.5",
         "depcheck": "^1.4.7",
+        "dompurify": "^3.1.7",
         "dotenv": "^16.4.5",
         "eslint-webpack-plugin": "^4.1.0",
         "exif": "^0.6.0",
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index e26dd9646..84e7b62bf 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -8,6 +8,7 @@ import { FieldView, FieldViewProps } from '../../nodes/FieldView';
 import { ObjectField } from '../../../../fields/ObjectField';
 import { Doc } from '../../../../fields/Doc';
 import { DocumentView } from '../../nodes/DocumentView';
+import DOMPurify from 'dompurify';
 
 /**
  * The SchemaCellField renders text in schema cells while the user is editing, and updates the
@@ -168,7 +169,7 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
     @action
     setContent = (content: string, restoreCursorPos?: boolean) => {
         const pos = this.cursorPosition;
-        this._displayedContent = this.makeSpans(content);
+        this._displayedContent = DOMPurify.sanitize(this.makeSpans(content));
         restoreCursorPos && setTimeout(() => this.setCursorPosition(pos));
     };
 
-- 
cgit v1.2.3-70-g09d2


From b013de245c77e40487e9842650239eff20c0e361 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 3 Oct 2024 02:47:21 -0400
Subject: started work on template editing within docCreatorMenu; fixed
 deleting fields in the dashboard

---
 .../views/nodes/DataVizBox/DocCreatorMenu.scss     |  10 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 138 +++++++++++++--------
 2 files changed, 93 insertions(+), 55 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 9d82ada37..4ea904b8e 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -289,19 +289,27 @@
 }
 
 .docCreatorMenu-expanded-template-preview {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
     position: relative;
     width: 100%;
     height: 100%;
 
+    .top-panel{
+        width: 100%;
+        height: 10px;
+    }
+
     .right-buttons-panel {
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         height: 100%;
-        width: 40px;
         position: absolute;
         right: 0px;
         top: 0px;
+        width: 40px;
         padding: 5px;
         gap: 2px;
     }
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 43e9248a7..44f743a97 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -5,11 +5,11 @@ import { observer } from 'mobx-react';
 import { IDisposer } from 'mobx-utils';
 import * as React from 'react';
 import ReactLoading from 'react-loading';
-import { ClientUtils, returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
+import { ClientUtils, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
-import { Doc, NumListCast, StrListCast } from '../../../../fields/Doc';
+import { Doc, NumListCast, StrListCast, returnEmptyDoclist } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
-import { DocCast, ImageCast, StrCast } from '../../../../fields/Types';
+import { Cast, DocCast, ImageCast, StrCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
 import { Networking } from '../../../Network';
 import { GPTCallType, gptAPICall, gptImageCall } from '../../../apis/gpt/GPT';
@@ -26,6 +26,8 @@ import { FieldViewProps } from '../FieldView';
 import { OpenWhere } from '../OpenWhere';
 import { DataVizBox } from './DataVizBox';
 import './DocCreatorMenu.scss';
+import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider';
+import { Transform } from '../../../util/Transform';
 
 export enum LayoutType {
     Stacked = 'stacked',
@@ -218,11 +220,11 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         document.addEventListener('pointerup', this.onPointerUp);
         this._disposers.templates = reaction(
             () => this._templateDocs.slice(),
-            docs => docs.map(this.getIcon)
+            docs => this.updateIcons(docs)
         );
         this._disposers.gpt = reaction(
             () => this._suggestedTemplates.slice(),
-            docs => docs.map(this.getIcon)
+            docs => this.updateIcons(docs)
         );
         //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')})
         this._disposers.lightbox = reaction(
@@ -241,6 +243,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     }
 
     updateIcons = (docs: Doc[]) => {
+        console.log('called')
         docs.map(this.getIcon);
     };
 
@@ -442,43 +445,20 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     testTemplate = async () => {
-        // const temp = TemplateLayouts.FourField001;
-        // const title: Doc = FieldFuncs.TextField({tl: temp.fields[0].tl, br: temp.fields[0].br}, temp.height, temp.width, 'title', 'Title', {backgroundColor: 'transparent'});
-        // const image: Doc = FieldFuncs.ImageField({tl: temp.fields[1].tl, br: temp.fields[1].br}, temp.height, temp.width, 'title', '', {borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10, rotation: 40});
-        // const caption: Doc = FieldFuncs.TextField({tl: temp.fields[2].tl, br: temp.fields[2].br}, temp.height, temp.width, 'title', 'Caption', {backgroundColor: 'transparent'});
-        // const desc: Doc = FieldFuncs.TextField({tl: temp.fields[3].tl, br: temp.fields[3].br}, temp.height, temp.width, 'title', '', {backgroundColor: 'lightblue', borderColor: '#159fe4', borderWidth: '10', cornerRounding: 10});
-
-        // const doc = Docs.Create.FreeformDocument([title, image, caption, desc], { _height: temp.height, _width: temp.width, title: 'hey', x: 400, y: 400 });
-
-        // const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        // mainCollection.addDocument(doc);
-
-        // const temp = TemplateLayouts.FourField001;
-
-        // const img: Col = {type: TemplateFieldType.TEXT, title: 'Type', desc: 'description whpoo', size: TemplateFieldSize.LARGE, defaultContent: ''};
-        // const capt1: Col = {type: TemplateFieldType.TEXT, title: 'Image', desc: 'description hey', size: TemplateFieldSize.TINY};
-        // const capt2: Col = {type: TemplateFieldType.TEXT, title: 'Locality', desc: '', size: TemplateFieldSize.TINY, defaultContent: ''};
-        // const desc: Col = {type: TemplateFieldType.TEXT, title: 'Description', desc: '', size: TemplateFieldSize.LARGE, defaultContent: 'This is a description of a rock. It is kind of long. It is very long. It is gratuitous. This description should be shorter. Oh well. This is a description of a rock. It is kind of long. It is very long. It is gratuitous. This description should be shorter. Oh well. This is a description of a rock. It is kind of long. It is very long. It is gratuitous. This description should be shorter. Oh well.'};
-
-        // const assignments = {'0': img, '1': capt1, '2': capt2, '3': desc}
-
-        // this.createEmptyTemplate(temp, assignments);
-        // console.log(this.findValidTemplates(this.fieldsInfos, TemplateLayouts.allTemplates));
+        this.updateIcons(this._suggestedTemplates.slice());
+        this.forceUpdate();
 
-        // console.log(this._dataViz?.colsInfo.get("IMG")?.size, this._dataViz?.colsInfo.get("IMG")?.type)
-        // console.log(this.fieldsInfos)
+        // try {
+        //     const res = await gptImageCall('Image of panda eating a cookie');
 
-        try {
-            const res = await gptImageCall('Image of panda eating a cookie');
+        //     if (res) {
+        //         const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
 
-            if (res) {
-                const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
-
-                console.log(result);
-            }
-        } catch (e) {
-            console.log(e);
-        }
+        //         console.log(result);
+        //     }
+        // } catch (e) {
+        //     console.log(e);
+        // }
     };
 
     @action addField = () => {
@@ -935,9 +915,69 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     };
 
     @action setExpandedView = (info: { icon: ImageField; doc: Doc } | undefined) => {
-        this._expandedPreview = info;
+        if (info) {
+            const doc = info.doc;
+            const wrapper: Doc = Docs.Create.FreeformDocument([info.doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''});
+            const newInfo = {icon: new ImageField(''), doc: wrapper}
+            this._expandedPreview = newInfo;
+        } else {
+            this._expandedPreview = info;
+        }
     };
 
+    get editingWindow(){
+        const doc = this._expandedPreview?.doc ?? new Doc();
+        const rendered = 
+            <div className="docCreatorMenu-expanded-template-preview">
+                <CollectionFreeFormView
+                    Document={this._expandedPreview!.doc}
+                    docViewPath={returnEmptyDocViewList}
+                    childLayoutTemplate={() => Cast(doc.childLayoutTemplate, Doc, null)}
+                    isContentActive={emptyFunction}
+                    isAnyChildContentActive={() => true}
+                    select={emptyFunction}
+                    isSelected={returnFalse}
+                    fieldKey={Doc.LayoutFieldKey(doc)}
+                    addDocument={returnFalse}
+                    moveDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    PanelWidth={() => this._menuDimensions.width - 10}
+                    PanelHeight={() => this._menuDimensions.height - 60}
+                    ScreenToLocalTransform={Transform.Identity}
+                    renderDepth={5}
+                    whenChildContentsActiveChanged={emptyFunction}
+                    focus={emptyFunction}
+                    styleProvider={DefaultStyleProvider}
+                    addDocTab={this._props.addDocTab}
+                    // eslint-disable-next-line no-use-before-define
+                    pinToPres={() => undefined}
+                    childFilters={returnEmptyFilter}
+                    childFiltersByRanges={returnEmptyFilter}
+                    searchFilterDocs={returnEmptyDoclist}
+                    fitContentsToBox={returnTrue}
+                    xPadding={0}
+                    yPadding={0}
+                />
+            </div>
+
+
+        return (
+            <div className="docCreatorMenu-expanded-template-preview">
+                <div className="top-panel"/>
+                {rendered}
+                <div className="right-buttons-panel">
+                    <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => {this._expandedPreview && this.updateIcons(this._suggestedTemplates.slice()); this.setExpandedView(undefined)})}>
+                        <FontAwesomeIcon icon="minimize" />
+                    </button>
+                    <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._templateDocs.push(this._expandedPreview.doc))}>
+                        <FontAwesomeIcon icon="plus" color="white" />
+                    </button>
+                </div>
+            </div>
+
+        );
+    }
+
     get templatesPreviewContents() {
         const renderedTemplates: Doc[] = [];
 
@@ -948,17 +988,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         return (
             <div className={`docCreatorMenu-templates-view`}>
                 {this._expandedPreview ? (
-                    <div className="docCreatorMenu-expanded-template-preview">
-                        <img className="docCreatorMenu-preview-image expanded" src={this._expandedPreview.icon!.url.href.replace('.png', '_o.png')} />
-                        <div className="right-buttons-panel">
-                            <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => this.setExpandedView(undefined))}>
-                                <FontAwesomeIcon icon="minimize" />
-                            </button>
-                            <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._templateDocs.push(this._expandedPreview.doc))}>
-                                <FontAwesomeIcon icon="plus" color="white" />
-                            </button>
-                        </div>
-                    </div>
+                    this.editingWindow
                 ) : (
                     <div>
                         <div className="docCreatorMenu-section" style={{ height: this._GPTOpt ? 200 : 200 }}>
@@ -1355,7 +1385,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                 <div className="field-panel">
                     <div className="top-bar">
                         <span className="field-title">{`${field.title} Field`}</span>
-                        <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, this.addField)} style={{ position: 'absolute', right: '0px' }}>
+                        <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))} style={{ position: 'absolute', right: '0px' }}>
                             <FontAwesomeIcon icon="minus" />
                         </button>
                     </div>
@@ -1413,12 +1443,12 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                         </div>
                     </div>
                     <div className="desc-box">
-                        <div className="top-bar"> Description </div>
+                        <div className="top-bar"> Prompt </div>
                         <textarea
                             className="content"
                             onChange={e => this.setColDesc(field, 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.'}
+                            placeholder={this._dataViz?.GPTSummary?.get(field.title)?.desc ?? 'Add a description/prompt to help with template generation.'}
                         />
                     </div>
                 </div>
-- 
cgit v1.2.3-70-g09d2


From 2e883e481fa2064983bcd16425118c1abb55cedb Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 4 Oct 2024 20:56:32 -0400
Subject: cleaning up lint problems.

---
 src/client/documents/Documents.ts                  |    3 +-
 src/client/views/MainView.tsx                      |    6 +-
 .../views/nodes/DataVizBox/DocCreatorMenu.tsx      | 4203 ++++++++++----------
 src/client/views/nodes/DocumentView.tsx            |    3 +-
 4 files changed, 2106 insertions(+), 2109 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 38a4258b9..0a7047128 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -18,7 +18,6 @@ import { PointData } from '../../pen-gestures/GestureTypes';
 import { DocServer } from '../DocServer';
 import { dropActionType } from '../util/DropActionTypes';
 import { CollectionViewType, DocumentType } from './DocumentTypes';
-import { MarkType } from 'prosemirror-model';
 
 class EmptyBox {
     public static LayoutString() {
@@ -229,7 +228,7 @@ export class DocumentOptions {
     _lockedPosition?: BOOLt = new BoolInfo("lock the x,y coordinates of the document so that it can't be dragged");
     _lockedTransform?: BOOLt = new BoolInfo('lock the freeform_panx,freeform_pany and scale parameters of the document so that it be panned/zoomed');
     _childrenSharedWithSchema?: BOOLt = new BoolInfo("whether this document's children are displayed in its parent schema view", false);
-    _lockedSchemaEditing?: BOOLt = new BoolInfo("", false);
+    _lockedSchemaEditing?: BOOLt = new BoolInfo('', false);
 
     dataViz_title?: string;
     dataViz_line?: string;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 6feb6bd16..fc159d96b 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -41,6 +41,7 @@ import { DashboardView } from './DashboardView';
 import { DictationOverlay } from './DictationOverlay';
 import { DocumentDecorations } from './DocumentDecorations';
 import { GestureOverlay } from './GestureOverlay';
+import { InkTranscription } from './InkTranscription';
 import { LightboxView } from './LightboxView';
 import './MainView.scss';
 import { ObservableReactComponent } from './ObservableReactComponent';
@@ -57,6 +58,7 @@ import { ImageLabelHandler } from './collections/collectionFreeForm/ImageLabelHa
 import { MarqueeOptionsMenu } from './collections/collectionFreeForm/MarqueeOptionsMenu';
 import { CollectionLinearView } from './collections/collectionLinear';
 import { LinkMenu } from './linking/LinkMenu';
+import { DocCreatorMenu } from './nodes/DataVizBox/DocCreatorMenu';
 import { SchemaCSVPopUp } from './nodes/DataVizBox/SchemaCSVPopUp';
 import { DocButtonState } from './nodes/DocumentLinksButton';
 import { DocumentView, DocumentViewInternal } from './nodes/DocumentView';
@@ -73,10 +75,8 @@ import GenerativeFill from './nodes/generativeFill/GenerativeFill';
 import { PresBox } from './nodes/trails';
 import { AnchorMenu } from './pdf/AnchorMenu';
 import { GPTPopup } from './pdf/GPTPopup/GPTPopup';
-import { TopBar } from './topbar/TopBar';
-import { DocCreatorMenu } from './nodes/DataVizBox/DocCreatorMenu';
 import { SmartDrawHandler } from './smartdraw/SmartDrawHandler';
-import { InkTranscription } from './InkTranscription';
+import { TopBar } from './topbar/TopBar';
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const { LEFT_MENU_WIDTH, TOPBAR_HEIGHT } = require('./global/globalCssVariables.module.scss'); // prettier-ignore
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 44f743a97..05bedfcdc 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -28,6 +28,7 @@ import { DataVizBox } from './DataVizBox';
 import './DocCreatorMenu.scss';
 import { DefaultStyleProvider, returnEmptyDocViewList } from '../../StyleProvider';
 import { Transform } from '../../../util/Transform';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 export enum LayoutType {
     Stacked = 'stacked',
@@ -36,2330 +37,2328 @@ export enum LayoutType {
     Column = 'column',
     Custom = 'custom',
 }
+export interface DataVizTemplateInfo {
+    doc: Doc;
+    layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number };
+    columns: number;
+    referencePos: { x: number; y: number };
+}
 
-@observer
-export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
-    static Instance: DocCreatorMenu;
+export interface DataVizTemplateLayout {
+    template: Doc;
+    docsNumList: number[];
+    layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number };
+    columns: number;
+    rows: number;
+}
 
-    private _disposers: { [name: string]: IDisposer } = {};
+export enum TemplateFieldType {
+    TEXT = 'text',
+    VISUAL = 'visual',
+    UNSET = 'unset',
+}
 
-    private _ref: HTMLDivElement | null = null;
+export enum TemplateFieldSize {
+    TINY = 'tiny',
+    SMALL = 'small',
+    MEDIUM = 'medium',
+    LARGE = 'large',
+    HUGE = 'huge',
+}
 
-    @observable _templateDocs: Doc[] = [];
-    @observable _selectedTemplate: Doc | undefined = undefined;
-    @observable _columns: Col[] = [];
-    @observable _selectedCols: { title: string; type: string; desc: string }[] | undefined = [];
+export type Col = {
+    sizes: TemplateFieldSize[];
+    desc: string;
+    title: string;
+    type: TemplateFieldType;
+    defaultContent?: string;
+};
+export interface FieldOpts {
+    backgroundColor?: string;
+    color?: string;
+    cornerRounding?: number;
+    borderWidth?: string;
+    borderColor?: string;
+    contentXCentering?: 'h-left' | 'h-center' | 'h-right';
+    contentYCentering?: 'top' | 'center' | 'bottom';
+    opacity?: number;
+    rotation?: number;
+    //animation?: boolean;
+    fontBold?: boolean;
+    fontTransform?: 'uppercase' | 'lowercase';
+    fieldViewType?: 'freeform' | 'stacked';
+}
 
-    @observable _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0 };
-    @observable _layoutPreview: boolean = true;
-    @observable _layoutPreviewScale: number = 1;
-    @observable _savedLayouts: DataVizTemplateLayout[] = [];
-    @observable _expandedPreview: { icon: ImageField; doc: Doc } | undefined = undefined;
+type Field = {
+    tl: [number, number];
+    br: [number, number];
+    opts: FieldOpts;
+    subfields?: Field[];
+    types?: TemplateFieldType[];
+    sizes?: TemplateFieldSize[];
+    isDecoration?: boolean;
+    description?: string;
+};
 
-    @observable _suggestedTemplates: Doc[] = [];
-    @observable _GPTOpt: boolean = false;
-    @observable _userPrompt: string = '';
-    @observable _callCount: number = 0;
-    @observable _GPTLoading: boolean = false;
+// class ContentField implements Field {
+//     tl: [number, number];
+//     br: [number, number];
+//     opts: FieldOpts;
+//     subfields?: Field[];
+//     types?: TemplateFieldType[];
+//     sizes?: TemplateFieldSize[];
+//     description?: string;
 
-    @observable _pageX: number = 0;
-    @observable _pageY: number = 0;
-    @observable _indicatorX: number | undefined = undefined;
-    @observable _indicatorY: number | undefined = undefined;
+//     constructor( tl: [number, number], br: [number, number],
+//                         opts: FieldOpts, subfields?: Field[],
+//                         types?: TemplateFieldType[],
+//                         sizes?: TemplateFieldSize[],
+//                         description?: string) {
+//         this.tl = tl;
+//         this.br = br;
+//         this.opts = opts;
+//         this.subfields = subfields;
+//         this.types = types;
+//         this.sizes = sizes;
+//         this.description = description;
+//     }
 
-    @observable _hoveredLayoutPreview: number | undefined = undefined;
-    @observable _mouseX: number = -1;
-    @observable _mouseY: number = -1;
-    @observable _startPos?: { x: number; y: number };
-    @observable _shouldDisplay: boolean = false;
+//     render = (content: any): Doc => {
+//         return new Doc;
+//     }
+// }
 
-    @observable _menuContent: 'templates' | 'options' | 'saved' | 'dashboard' = 'templates';
-    @observable _dragging: boolean = false;
-    @observable _draggingIndicator: boolean = false;
-    @observable _dataViz?: DataVizBox;
-    @observable _interactionLock: any;
-    @observable _snapPt: any;
-    @observable _resizeHdlId: string = '';
-    @observable _resizing: boolean = false;
-    @observable _offset: { x: number; y: number } = { x: 0, y: 0 };
-    @observable _resizeUndo: UndoManager.Batch | undefined = undefined;
-    @observable _initDimensions: { width: number; height: number; x?: number; y?: number } = { width: 300, height: 400, x: undefined, y: undefined };
-    @observable _menuDimensions: { width: number; height: number } = { width: 400, height: 400 };
-    @observable _editing: boolean = false;
+type DecorationField = Field;
 
-    constructor(props: any) {
-        super(props);
-        makeObservable(this);
-        DocCreatorMenu.Instance = this;
-        //setTimeout(() => this.generateTemplates(''));
-    }
+type InkDecoration = {};
 
-    @action setDataViz = (dataViz: DataVizBox) => {
-        this._dataViz = dataViz;
-    };
-    @action setTemplateDocs = (docs: Doc[]) => {
-        this._templateDocs = docs.map(doc => (doc.annotationOn ? DocCast(doc.annotationOn) : doc));
-    };
-    @action setGSuggestedTemplates = (docs: Doc[]) => {
-        this._suggestedTemplates = docs;
-    };
+type TemplateDecorations = Field | InkDecoration;
 
-    @computed get docsToRender() {
-        return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
-    }
+interface TemplateOpts extends FieldOpts {}
 
-    @computed get rowsCount() {
-        switch (this._layout.type) {
-            case LayoutType.Row:
-            case LayoutType.Stacked:
-                return 1;
-            case LayoutType.Column:
-                return this.docsToRender.length;
-            case LayoutType.Grid:
-                return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0;
-            default:
-                return 0;
-        }
+export interface TemplateDocInfos {
+    title: string;
+    height: number;
+    width: number;
+    opts: TemplateOpts;
+    fields: Field[];
+    decorations: Field[];
+}
+
+export class TemplateLayouts {
+    public static get allTemplates(): TemplateDocInfos[] {
+        return Object.values(TemplateLayouts).filter(value => typeof value === 'object' && value !== null && 'title' in value) as TemplateDocInfos[];
     }
 
-    @computed get columnsCount() {
-        switch (this._layout.type) {
-            case LayoutType.Row:
-                return this.docsToRender.length;
-            case LayoutType.Column:
-            case LayoutType.Stacked:
-                return 1;
-            case LayoutType.Grid:
-                return this._layout.columns ?? 0;
+    public static getTemplateByTitle = (title: string): TemplateDocInfos | undefined => {
+        switch (title) {
+            case 'fourfield1':
+                return TemplateLayouts.FourField001;
+            case 'fourfield2':
+                return TemplateLayouts.FourField002;
+            // case 'fourfield3':
+            //     return TemplateLayouts.FourField003;
+            case 'fourfield4':
+                return TemplateLayouts.FourField004;
+            case 'threefield1':
+                return TemplateLayouts.ThreeField001;
+            case 'threefield2':
+                return TemplateLayouts.ThreeField002;
             default:
-                return 0;
+                break;
         }
-    }
 
-    @computed get selectedFields() {
-        return StrListCast(this._dataViz?.layoutDoc._dataViz_axes);
-    }
-
-    @computed get fieldsInfos(): Col[] {
-        const colInfo = this._dataViz?.colsInfo;
-        return this.selectedFields
-            .map(field => {
-                const fieldInfo = colInfo?.get(field);
-
-                const col: Col = {
-                    title: field,
-                    type: fieldInfo?.type ?? TemplateFieldType.UNSET,
-                    desc: fieldInfo?.desc ?? '',
-                    sizes: fieldInfo?.sizes ?? [TemplateFieldSize.MEDIUM],
-                };
-
-                if (fieldInfo?.defaultContent !== undefined) {
-                    col.defaultContent = fieldInfo.defaultContent;
-                }
-
-                return col;
-            })
-            .concat(this._columns);
-    }
-
-    @computed get canMakeDocs() {
-        return this._selectedTemplate !== undefined && this._layout !== undefined;
-    }
-
-    get bounds(): { t: number; b: number; l: number; r: number } {
-        const rect = this._ref?.getBoundingClientRect();
-        const bounds = { t: rect?.top ?? 0, b: rect?.bottom ?? 0, l: rect?.left ?? 0, r: rect?.right ?? 0 };
-        return bounds;
-    }
-
-    setUpButtonClick = (e: any, func: Function) => {
-        setupMoveUpEvents(
-            this,
-            e,
-            returnFalse,
-            emptyFunction,
-            undoable(clickEv => {
-                clickEv.stopPropagation();
-                clickEv.preventDefault();
-                func();
-            }, 'create docs')
-        );
-    };
-
-    @action
-    onPointerDown = (e: PointerEvent) => {
-        this._mouseX = e.clientX;
-        this._mouseY = e.clientY;
+        return undefined;
     };
 
-    @action
-    onPointerUp = (e: PointerEvent) => {
-        if (this._resizing) {
-            this._initDimensions.width = this._menuDimensions.width;
-            this._initDimensions.height = this._menuDimensions.height;
-            this._initDimensions.x = this._pageX;
-            this._initDimensions.y = this._pageY;
-            document.removeEventListener('pointermove', this.onResize);
-            SnappingManager.SetIsResizing(undefined);
-            this._resizing = false;
-        }
-        if (this._dragging) {
-            document.removeEventListener('pointermove', this.onDrag);
-            this._dragging = false;
-        }
-        if (e.button !== 2 && !e.ctrlKey) return;
-        const curX = e.clientX;
-        const curY = e.clientY;
-        if (Math.abs(this._mouseX - curX) > 1 || Math.abs(this._mouseY - curY) > 1) {
-            this._shouldDisplay = false;
-        }
-    };
-
-    componentDidMount() {
-        document.addEventListener('pointerdown', this.onPointerDown, true);
-        document.addEventListener('pointerup', this.onPointerUp);
-        this._disposers.templates = reaction(
-            () => this._templateDocs.slice(),
-            docs => this.updateIcons(docs)
-        );
-        this._disposers.gpt = reaction(
-            () => this._suggestedTemplates.slice(),
-            docs => this.updateIcons(docs)
-        );
-        //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')})
-        this._disposers.lightbox = reaction(
-            () => LightboxView.LightboxDoc(),
-            doc => {
-                doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu();
-            }
-        );
-        //this._disposers.fields = reaction(() => this._dataViz?.axes, cols => this._selectedCols = cols?.map(col => { return {title: col, type: '', desc: ''}}))
-    }
-
-    componentWillUnmount() {
-        Object.values(this._disposers).forEach(disposer => disposer?.());
-        document.removeEventListener('pointerdown', this.onPointerDown, true);
-        document.removeEventListener('pointerup', this.onPointerUp);
-    }
-
-    updateIcons = (docs: Doc[]) => {
-        console.log('called')
-        docs.map(this.getIcon);
-    };
-
-    @action
-    updateSelectedCols = (cols: string[]) => {
-        this._selectedCols;
-    };
-
-    @action
-    toggleDisplay = (x: number, y: number) => {
-        if (this._shouldDisplay) {
-            this._shouldDisplay = false;
-        } else {
-            this._pageX = x;
-            this._pageY = y;
-            this._shouldDisplay = true;
-        }
-    };
-
-    @action
-    closeMenu = () => {
-        this._shouldDisplay = false;
-    };
-
-    @action
-    openMenu = () => {
-        const allTemplates = this._templateDocs.concat(this._suggestedTemplates);
-        this._shouldDisplay = true;
-        this.updateIcons(allTemplates);
+    public static FourField001: TemplateDocInfos = {
+        title: 'fourfield1',
+        width: 416,
+        height: 700,
+        opts: {
+            backgroundColor: '#C0B887',
+            cornerRounding: 20,
+            borderColor: '#6B461F',
+            borderWidth: '12',
+        },
+        fields: [
+            {
+                tl: [-0.95, -1],
+                br: [0.95, -0.85],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY],
+                description: 'A title field for very short text that contextualizes the content.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: '#F1F0E9',
+                    contentXCentering: 'h-center',
+                    fontBold: true,
+                },
+            },
+            {
+                tl: [-0.87, -0.83],
+                br: [0.87, 0.2],
+                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'The main focus of the template; could be an image, long text, etc.',
+                opts: {
+                    cornerRounding: 20,
+                    borderColor: '#8F5B25',
+                    borderWidth: '6',
+                    backgroundColor: '#CECAB9',
+                },
+            },
+            {
+                tl: [-0.8, 0.2],
+                br: [0.8, 0.3],
+                types: [TemplateFieldType.TEXT],
+                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',
+                    color: '#F1F0E9',
+                },
+            },
+            {
+                tl: [-0.87, 0.37],
+                br: [0.87, 0.96],
+                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'A medium-sized field for medium/long text.',
+                opts: {
+                    cornerRounding: 15,
+                    borderColor: '#8F5B25',
+                    borderWidth: '6',
+                    backgroundColor: '#CECAB9',
+                },
+            },
+        ],
+        decorations: [],
     };
 
-    @action
-    onResizePointerDown = (e: React.PointerEvent): void => {
-        this._resizing = true;
-        document.addEventListener('pointermove', this.onResize);
-        SnappingManager.SetIsResizing(DocumentView.Selected().lastElement()?.Document[Id]); // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them
-        e.stopPropagation();
-        const id = (this._resizeHdlId = e.currentTarget.className);
-        const pad = id.includes('Left') || id.includes('Right') ? Number(getComputedStyle(e.target as any).width.replace('px', '')) / 2 : 0;
-        const bounds = e.currentTarget.getBoundingClientRect();
-        this._offset = {
-            x: id.toLowerCase().includes('left') ? bounds.right - e.clientX - pad : bounds.left - e.clientX + pad, //
-            y: id.toLowerCase().includes('top') ? bounds.bottom - e.clientY - pad : bounds.top - e.clientY + pad,
-        };
-        this._resizeUndo = UndoManager.StartBatch('drag resizing');
-        this._snapPt = { x: e.pageX, y: e.pageY };
+    public static FourField002: TemplateDocInfos = {
+        title: 'fourfield2',
+        width: 425,
+        height: 778,
+        opts: {
+            backgroundColor: '#242425',
+        },
+        fields: [
+            {
+                tl: [-0.83, -0.95],
+                br: [0.83, -0.2],
+                types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
+                description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus.',
+                opts: {
+                    borderWidth: '8',
+                    borderColor: '#F8E71C',
+                },
+            },
+            {
+                tl: [-0.65, -0.2],
+                br: [0.65, -0.02],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY],
+                description: 'A tiny field for just a word or two of plain text.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: 'white',
+                    contentXCentering: 'h-center',
+                    fontTransform: 'uppercase',
+                },
+            },
+            {
+                tl: [-0.65, 0],
+                br: [0.65, 0.18],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY],
+                description: 'A tiny field for just a word or two of plain text.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: 'white',
+                    contentXCentering: 'h-center',
+                    fontTransform: 'uppercase',
+                },
+            },
+            {
+                tl: [-0.83, 0.2],
+                br: [0.83, 0.95],
+                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus, or share focus with field 1.',
+                opts: {
+                    borderWidth: '8',
+                    borderColor: '#F8E71C',
+                    color: 'white',
+                    backgroundColor: '#242425',
+                },
+            },
+        ],
+        decorations: [
+            {
+                tl: [-0.8, -0.075],
+                br: [-0.525, 0.075],
+                opts: {
+                    backgroundColor: '#F8E71C',
+                    rotation: 45,
+                },
+            },
+            {
+                tl: [-0.3075, -0.0245],
+                br: [-0.2175, 0.0245],
+                opts: {
+                    backgroundColor: '#F8E71C',
+                    rotation: 45,
+                },
+            },
+            {
+                tl: [-0.045, -0.0245],
+                br: [0.045, 0.0245],
+                opts: {
+                    backgroundColor: '#F8E71C',
+                    rotation: 45,
+                },
+            },
+            {
+                tl: [0.2175, -0.0245],
+                br: [0.3075, 0.0245],
+                opts: {
+                    backgroundColor: '#F8E71C',
+                    rotation: 45,
+                },
+            },
+            {
+                tl: [0.525, -0.075],
+                br: [0.8, 0.075],
+                opts: {
+                    backgroundColor: '#F8E71C',
+                    rotation: 45,
+                },
+            },
+        ],
     };
 
-    @action
-    onResize = (e: any): boolean => {
-        const dragHdl = this._resizeHdlId.split(' ')[1];
-        const thisPt = DragManager.snapDrag(e, -this._offset.x, -this._offset.y, this._offset.x, this._offset.y);
-
-        const { scale, refPt, transl } = this.getResizeVals(thisPt, dragHdl);
-        !this._interactionLock && runInAction(async () => {   // resize selected docs if we're not in the middle of a resize (ie, throttle input events to frame rate)
-        this._interactionLock = true;
-        const scaleAspect = {x: scale.x, y: scale.y};
-        this.resizeView(refPt, scaleAspect, transl); // prettier-ignore
-        await new Promise<any>(res => { setTimeout(() => { res(this._interactionLock = undefined)})});
-        }); // prettier-ignore
-        return true;
-    };
-
-    @action
-    onDrag = (e: any): boolean => {
-        this._pageX = e.pageX - (this._startPos?.x ?? 0);
-        this._pageY = e.pageY - (this._startPos?.y ?? 0);
-        this._initDimensions.x = this._pageX;
-        this._initDimensions.y = this._pageY;
-        return true;
-    };
+    // public static FourField003: TemplateDocInfos = {
+    //     title: 'fourfield3',
+    //     width: 477,
+    //     height: 662,
+    //     opts: {
+    //         backgroundColor: '#9E9C95'
+    //     },
+    //     fields: [{
+    //         tl: [-.875, -.9],
+    //         br: [.875, .7],
+    //         types: [TemplateFieldType.VISUAL],
+    //         sizes: [TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+    //         description: '',
+    //         opts: {
+    //             borderWidth: '15',
+    //             borderColor: '#E0E0DA',
+    //         }
+    //     }, {
+    //         tl: [-.95, .8],
+    //         br: [-.1, .95],
+    //         types: [TemplateFieldType.TEXT],
+    //         sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+    //         description: '',
+    //         opts: {
+    //             backgroundColor: 'transparent',
+    //             color: 'white',
+    //             contentXCentering: 'h-right',
+    //         }
+    //     }, {
+    //         tl: [.1, .8],
+    //         br: [.95, .95],
+    //         types: [TemplateFieldType.TEXT],
+    //         sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+    //         description: '',
+    //         opts: {
+    //             backgroundColor: 'transparent',
+    //             color: 'red',
+    //             fontTransform: 'uppercase',
+    //             contentXCentering: 'h-left'
+    //         }
+    //     }, {
+    //         tl: [0, -.9],
+    //         br: [.85, -.66],
+    //         types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+    //         sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+    //         description: '',
+    //         opts: {
+    //             backgroundColor: 'transparent',
+    //             contentXCentering: 'h-right'
+    //         }
+    //     }],
+    //     decorations: [{
+    //         tl: [-.025, .8],
+    //         br: [.025, .95],
+    //         opts: {
+    //             backgroundColor: '#E0E0DA',
+    //         }
+    //     }]
+    // };
 
-    getResizeVals = (thisPt: { x: number; y: number }, dragHdl: string) => {
-        const [w, h] = [this._initDimensions.width, this._initDimensions.height];
-        const [moveX, moveY] = [thisPt.x - this._snapPt.x, thisPt.y - this._snapPt.y];
-        let vals: { scale: { x: number; y: number }; refPt: [number, number]; transl: { x: number; y: number } };
-        switch (dragHdl) {
-            case 'topLeft':    vals = { scale: { x: 1 - moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.r, this.bounds.b], transl: {x: moveX, y: moveY } }; break;
-            case 'topRight':   vals = { scale: { x: 1 + moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.l, this.bounds.b], transl: {x: 0, y: moveY } }; break;
-            case 'top':        vals = { scale: { x: 1,             y: 1 -moveY / h },  refPt: [this.bounds.l, this.bounds.b], transl: {x: 0, y: moveY } }; break;
-            case 'left':       vals = { scale: { x: 1 - moveX / w, y: 1 },             refPt: [this.bounds.r, this.bounds.t], transl: {x: moveX, y: 0 } }; break;
-            case 'bottomLeft': vals = { scale: { x: 1 - moveX / w, y: 1 + moveY / h }, refPt: [this.bounds.r, this.bounds.t], transl: {x: moveX, y: 0 } }; break;
-            case 'right':      vals = { scale: { x: 1 + moveX / w, y: 1 },             refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
-            case 'bottomRight':vals = { scale: { x: 1 + moveX / w, y: 1 + moveY / h }, refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
-            case 'bottom':     vals = { scale: { x: 1,             y: 1 + moveY / h }, refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
-            default:           vals = { scale: { x: 1,             y: 1 },             refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
-        } // prettier-ignore
-        return vals;
+    public static FourField004: TemplateDocInfos = {
+        title: 'fourfield4',
+        width: 414,
+        height: 583,
+        opts: {
+            backgroundColor: '#6CCAF0',
+            borderColor: '#1088C3',
+            borderWidth: '10',
+        },
+        fields: [
+            {
+                tl: [-0.86, -0.92],
+                br: [-0.075, -0.77],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY],
+                description: 'A tiny field for just a word or two of plain text.',
+                opts: {
+                    backgroundColor: '#E2B4F5',
+                    borderWidth: '9',
+                    borderColor: '#9222F1',
+                    contentXCentering: 'h-center',
+                },
+            },
+            {
+                tl: [0.075, -0.92],
+                br: [0.86, -0.77],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY],
+                description: 'A tiny field for just a word or two of plain text.',
+                opts: {
+                    backgroundColor: '#F5B4DD',
+                    borderWidth: '9',
+                    borderColor: '#E260F3',
+                    contentXCentering: 'h-center',
+                },
+            },
+            {
+                tl: [-0.81, -0.64],
+                br: [0.81, 0.48],
+                types: [TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'A large to huge field for visual content that is the main content of the template.',
+                opts: {
+                    borderWidth: '16',
+                    borderColor: '#A2BD77',
+                },
+            },
+            {
+                tl: [-0.86, 0.6],
+                br: [0.86, 0.92],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
+                description: 'A medium to large field for text that describes the visual content above',
+                opts: {
+                    borderWidth: '9',
+                    borderColor: '#F0D601',
+                    backgroundColor: '#F3F57D',
+                },
+            },
+        ],
+        decorations: [
+            {
+                tl: [-0.852, -0.67],
+                br: [0.852, 0.51],
+                opts: {
+                    backgroundColor: 'transparent',
+                    borderColor: '#007C0C',
+                    borderWidth: '10',
+                },
+            },
+        ],
     };
 
-    resizeView = (refPt: number[], scale: { x: number; y: number }, translation: { x: number; y: number }) => {
-        const refCent = [refPt[0], refPt[1]]; // fixed reference point for resize (ie, a point that doesn't move)
-        if (this._initDimensions.x === undefined) this._initDimensions.x = this._pageX;
-        if (this._initDimensions.y === undefined) this._initDimensions.y = this._pageY;
-        const { height, width, x, y } = this._initDimensions;
-
-        this._menuDimensions.width = Math.max(300, scale.x * width);
-        this._menuDimensions.height = Math.max(200, scale.y * height);
-        this._pageX = x + translation.x;
-        this._pageY = y + translation.y;
+    public static ThreeField001: TemplateDocInfos = {
+        title: 'threefield1',
+        width: 575,
+        height: 770,
+        opts: {
+            backgroundColor: '#DDD3A9',
+        },
+        fields: [
+            {
+                tl: [-0.66, -0.747],
+                br: [0.66, 0.247],
+                types: [TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'A medium to large field for visual content that is the central focus.',
+                opts: {
+                    borderColor: 'yellow',
+                    borderWidth: '8',
+                    rotation: 45,
+                },
+            },
+            {
+                tl: [-0.7, 0.2],
+                br: [0.7, 0.46],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+                description: 'A very small text field for one to a few words. A good caption for the image.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    contentXCentering: 'h-center',
+                },
+            },
+            {
+                tl: [-0.95, 0.5],
+                br: [0.95, 0.95],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
+                description: 'A medium to large text field for a thorough description of the image. ',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: 'white',
+                },
+            },
+        ],
+        decorations: [
+            {
+                tl: [0.2, -1.32],
+                br: [1.8, -0.66],
+                opts: {
+                    backgroundColor: '#CEB155',
+                    rotation: 45,
+                },
+            },
+            {
+                tl: [-1.8, -1.32],
+                br: [-0.2, -0.66],
+                opts: {
+                    backgroundColor: '#CEB155',
+                    rotation: 135,
+                },
+            },
+            {
+                tl: [0.33, 0.75],
+                br: [1.66, 1.25],
+                opts: {
+                    backgroundColor: '#CEB155',
+                    rotation: 135,
+                },
+            },
+            {
+                tl: [-1.66, 0.75],
+                br: [-0.33, 1.25],
+                opts: {
+                    backgroundColor: '#CEB155',
+                    rotation: 45,
+                },
+            },
+        ],
     };
 
-    async getIcon(doc: Doc) {
-        const docView = DocumentView.getDocumentView(doc);
-        if (docView) {
-            docView.ComponentView?.updateIcon?.();
-            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));
-        }
-        return undefined;
-    }
-
-    @action updateSelectedTemplate = (template: Doc) => {
-        if (this._selectedTemplate === template) {
-            this._selectedTemplate = undefined;
-            return;
-        } else {
-            this._selectedTemplate = template;
-            MakeTemplate(template);
-        }
+    public static ThreeField002: TemplateDocInfos = {
+        title: 'threefield2',
+        width: 477,
+        height: 662,
+        opts: {
+            backgroundColor: '#9E9C95',
+        },
+        fields: [
+            {
+                tl: [-0.875, -0.9],
+                br: [0.875, 0.7],
+                types: [TemplateFieldType.VISUAL],
+                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
+                description: 'A medium to large visual field for the main content of the template',
+                opts: {
+                    borderWidth: '15',
+                    borderColor: '#E0E0DA',
+                },
+            },
+            {
+                tl: [0.1, 0.775],
+                br: [0.95, 0.975],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+                description: 'A very small text field for one to a few words. The content should represent a general categorization of the image.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: '#AF0D0D',
+                    fontTransform: 'uppercase',
+                    fontBold: true,
+                    contentXCentering: 'h-left',
+                },
+            },
+            {
+                tl: [-0.95, 0.775],
+                br: [-0.1, 0.975],
+                types: [TemplateFieldType.TEXT],
+                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
+                description: 'A very small text field for one to a few words. The content should contextualize field 2.',
+                opts: {
+                    backgroundColor: 'transparent',
+                    color: 'black',
+                    contentXCentering: 'h-right',
+                },
+            },
+        ],
+        decorations: [
+            {
+                tl: [-0.025, 0.8],
+                br: [0.025, 0.95],
+                opts: {
+                    backgroundColor: '#E0E0DA',
+                },
+            },
+        ],
     };
+}
 
-    @action updateSelectedSavedLayout = (layout: DataVizTemplateLayout) => {
-        this._layout.xMargin = layout.layout.xMargin;
-        this._layout.yMargin = layout.layout.yMargin;
-        this._layout.type = layout.layout.type;
-        this._layout.columns = layout.columns;
-    };
+export class FieldUtils {
+    public static contentFields = (fields: Field[]) => {
+        let toRet: Field[] = [];
+        fields.forEach(field => {
+            if (!field.isDecoration) {
+                toRet.push(field);
+            }
+            toRet = toRet.concat(FieldUtils.contentFields(field.subfields ?? []));
+        });
 
-    isSelectedLayout = (layout: DataVizTemplateLayout) => {
-        return this._layout.xMargin === layout.layout.xMargin && this._layout.yMargin === layout.layout.yMargin && this._layout.type === layout.layout.type && this._layout.columns === layout.columns;
+        return toRet;
     };
 
-    @action
-    generateTemplates = async (inputText: string) => {
-        ++this._callCount;
-        const origCount = this._callCount;
+    public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
+        const words: string[] = text.split(/\s+/).filter(Boolean);
 
-        let prompt: string = `(#${origCount}) Please generate for the fields:`;
-        this.selectedFields?.forEach(field => (prompt += ` ${field},`));
-        prompt += ` (-----NOT A FIELD-----) Additional prompt: ${inputText}`;
+        let currFontSize = 1;
+        let rowsCount = 1;
+        let currTextHeight = currFontSize * rowsCount * 2;
 
-        this._GPTLoading = true;
+        while (currTextHeight <= contHeight) {
+            let wordIndex = 0;
+            let currentRowWidth = 0;
+            let wordsInCurrRow = 0;
+            rowsCount = 1;
 
-        try {
-            const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
+            while (wordIndex < words.length) {
+                const word = words[wordIndex];
+                const wordWidth = word.length * currFontSize * 0.5;
+                //console.log(wordWidth)
 
-            if (res && this._callCount === origCount) {
-                this._suggestedTemplates = [];
-                const templates: { template_type: string; fieldVals: { title: string; tlx: string; tly: string; brx: string; bry: string }[] }[] = JSON.parse(res);
-                this.createGeneratedTemplates(templates, 500, 500);
+                if (currentRowWidth + wordWidth <= contWidth) {
+                    currentRowWidth += wordWidth;
+                    ++wordsInCurrRow;
+                } else {
+                    if (words.length !== 1 && words.length > wordsInCurrRow) {
+                        rowsCount++;
+                        currentRowWidth = wordWidth;
+                        wordsInCurrRow = 1;
+                    } else {
+                        break;
+                    }
+                }
+
+                wordIndex++;
             }
-        } catch (err) {
-            console.error(err);
+
+            currTextHeight = rowsCount * currFontSize * 2;
+            //console.log(rowsCount, currFontSize, currTextHeight)
+
+            currFontSize += 1;
         }
+
+        return currFontSize - 1;
     };
 
-    @action
-    createGeneratedTemplates = (layouts: { template_type: string; fieldVals: { title: string; tlx: string; tly: string; brx: string; bry: string }[] }[], tempWidth: number, tempHeight: number) => {
-        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        const GPTTemplates: Doc[] = [];
+    private static getDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number): { width: number; height: number; coord: { x: number; y: number } } => {
+        const l = (coords.tl[0] * parentHeight) / 2;
+        const t = coords.tl[1] * parentWidth / 2; //prettier-ignore
+        const r = (coords.br[0] * parentHeight) / 2;
+        const b = coords.br[1] * parentWidth / 2; //prettier-ignore
+        const width = r - l;
+        const height = b - t;
+        const coord = { x: l, y: t };
+        //console.log(coords, parentWidth, parentHeight, height);
+        return { width, height, coord };
+    };
 
-        layouts.forEach(layout => {
-            const fields: Doc[] = layout.fieldVals.map(field => {
-                const left: number = (Number(field.tlx) * tempWidth) / 2;
-                const top: number = Number(field.tly) * tempHeight / 2; //prettier-ignore
-                const right: number = (Number(field.brx) * tempWidth) / 2;
-                const bottom: number = Number(field.bry) * tempHeight / 2; //prettier-ignore
-                const height = bottom - top;
-                const width = right - left;
-                const doc = !field.title.includes('$$')
-                    ? Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top, _text_fontSize: `${height / 2}` })
-                    : Docs.Create.ImageDocument('', { _height: height, _width: width, title: field.title.replace(/\$\$/g, ''), x: left, y: top });
-                return doc;
-            });
+    public static FreeformField = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
+        const { width, height, coord } = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
 
-            const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 400000, y: 400000 });
+        const docWithBasicOpts = Docs.Create.FreeformDocument([], {
+            isDefaultTemplateDoc: true,
+            _height: height,
+            _width: width,
+            title: title,
+            x: coord.x,
+            y: coord.y,
+            backgroundColor: opts.backgroundColor ?? '',
+            _layout_borderRounding: `${opts.cornerRounding ?? 0}px`,
+            borderColor: opts.borderColor,
+            borderWidth: opts.borderWidth,
+            opacity: opts.opacity,
+            hCentering: opts.contentXCentering,
+            _rotation: opts.rotation,
+        });
 
-            mainCollection.addDocument(template);
+        return docWithBasicOpts;
+    };
 
-            GPTTemplates.push(template);
+    public static TextField = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
+        const { width, height, coord } = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
+
+        const docWithBasicOpts = Docs.Create.TextDocument(content, {
+            isDefaultTemplateDoc: true,
+            _height: height,
+            _width: width,
+            title: title,
+            x: coord.x,
+            y: coord.y,
+            _text_fontSize: `${FieldUtils.calculateFontSize(width, height, content, true)}`,
+            backgroundColor: opts.backgroundColor ?? '',
+            text_fontColor: opts.color,
+            contentBold: opts.fontBold,
+            textTransform: opts.fontTransform,
+            color: opts.color,
+            _layout_borderRounding: `${opts.cornerRounding ?? 0}px`,
+            borderColor: opts.borderColor,
+            borderWidth: opts.borderWidth,
+            opacity: opts.opacity,
+            hCentering: opts.contentXCentering,
+            _rotation: opts.rotation,
         });
 
-        setTimeout(() => {
-            this.setGSuggestedTemplates(GPTTemplates); /*GPTTemplates.forEach(template => mainCollection.removeDocument(template))*/
-        }, 100);
+        docWithBasicOpts._layout_hideScroll = true;
 
-        this.forceUpdate();
+        return docWithBasicOpts;
     };
 
-    editTemplate = (doc: Doc) => {
-        //this.closeMenu();
-        DocumentViewInternal.addDocTabFunc(doc, OpenWhere.addRight);
-        DocumentView.DeselectAll();
-        Doc.UnBrushDoc(doc);
-    };
+    public static ImageField = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
+        const { width, height, coord } = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
 
-    removeTemplate = (doc: Doc) => {
-        this._templateDocs.splice(this._templateDocs.indexOf(doc), 1);
-    };
+        const doc = Docs.Create.ImageDocument(content, {
+            isDefaultTemplateDoc: true,
+            _height: height,
+            _width: width,
+            title: title,
+            x: coord.x,
+            y: coord.y,
+            _layout_fitWidth: false,
+            backgroundColor: opts.backgroundColor ?? '',
+            _layout_borderRounding: `${opts.cornerRounding ?? 0}px`,
+            borderColor: opts.borderColor,
+            borderWidth: opts.borderWidth,
+            opacity: opts.opacity,
+            _rotation: opts.rotation,
+        });
 
-    testTemplate = async () => {
-        this.updateIcons(this._suggestedTemplates.slice());
-        this.forceUpdate();
+        //setTimeout(() => {doc._height = height; doc._width = width}, 10);
 
-        // try {
-        //     const res = await gptImageCall('Image of panda eating a cookie');
+        return doc;
+    };
 
-        //     if (res) {
-        //         const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
+    public static CarouselField = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number, title: string, fields: Doc[]) => {
+        const { width, height, coord } = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
 
-        //         console.log(result);
-        //     }
-        // } catch (e) {
-        //     console.log(e);
-        // }
-    };
+        const doc = Docs.Create.Carousel3DDocument(fields, { _height: height, _width: width, title: title, x: coord.x, y: coord.y, _text_fontSize: `${height / 2}` });
 
-    @action addField = () => {
-        const newFields: Col[] = this._columns.concat([{ title: '', type: TemplateFieldType.UNSET, desc: '', sizes: [] }]);
-        this._columns = newFields;
+        return doc;
     };
+}
 
-    @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._columns.filter(f => f === field);
-            if (!toRemove) return;
-
-            if (toRemove.length > 1) {
-                while (toRemove.length > 1) {
-                    toRemove.pop();
-                }
-            }
-
-            if (this._columns.length === 1) {
-                this._columns = [];
-            } else {
-                this._columns.splice(this._columns.indexOf(toRemove[0]), 1);
-            }
-        }
-    };
+//     public static FourField002: TemplateDocInfos = {
+//         width: 450,
+//         height: 600,
+//         fields: [{
+//             tl: [-.6, -.9],
+//             br: [.6, -.8],
+//             types: [FieldType.TEXT],
+//             sizes: [FieldSize.TINY]
+//         }, {
+//             tl: [-.9, -.7],
+//             br: [.9, .2],
+//             types: [FieldType.TEXT, FieldType.VISUAL],
+//             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+//         }, {
+//             tl: [-.9, .3],
+//             br: [-.05, .9],
+//             types: [FieldType.TEXT],
+//             sizes: [FieldSize.TINY]
+//         }, {
+//             tl: [.05, .3],
+//             br: [.9, .9],
+//             types: [FieldType.TEXT, FieldType.VISUAL],
+//             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
+//         }]
+//     };
+
+//     public static TwoFieldPlusCarousel: TemplateDocInfos = {
+//         width: 500,
+//         height: 600,
+//         fields: [{
+//             tl: [-.9, -.99],
+//             br: [.9, -.7],
+//             types: [FieldType.TEXT],
+//             sizes: [FieldSize.TINY]
+//         }, {
+//             tl: [-.9, -.65],
+//             br: [.9, .35],
+//             types: [],
+//             sizes: []
+//         }, {
+//             tl: [-.9, .4],
+//             br: [.9, .95],
+//             types: [FieldType.TEXT],
+//             sizes: [FieldSize.TINY]
+//         }]
+//     };
+//  }
 
-    @action setColTitle = (column: Col, title: string) => {
-        if (this.selectedFields.includes(column.title)) {
-            this._dataViz?.setColumnTitle(column.title, title);
-        } else {
-            column.title = title;
-        }
-        this.forceUpdate();
-    };
+@observer
+export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
+    // eslint-disable-next-line no-use-before-define
+    static Instance: DocCreatorMenu;
 
-    @action setColType = (column: Col, type: TemplateFieldType) => {
-        if (this.selectedFields.includes(column.title)) {
-            this._dataViz?.setColumnType(column.title, type);
-        } else {
-            column.type = type;
-        }
-        this.forceUpdate();
-    };
+    private _disposers: { [name: string]: IDisposer } = {};
 
-    modifyColSizes = (column: Col, size: TemplateFieldSize, valid: boolean) => {
-        if (this.selectedFields.includes(column.title)) {
-            this._dataViz?.modifyColumnSizes(column.title, size, valid);
-        } else {
-            if (!valid && column.sizes.includes(size)) {
-                column.sizes.splice(column.sizes.indexOf(size), 1);
-            } else if (valid && !column.sizes.includes(size)) {
-                column.sizes.push(size);
-            }
-        }
-        this.forceUpdate();
-    };
+    private _ref: HTMLDivElement | null = null;
 
-    setColDesc = (column: Col, desc: string) => {
-        if (this.selectedFields.includes(column.title)) {
-            this._dataViz?.setColumnDesc(column.title, desc);
-        } else {
-            column.desc = desc;
-        }
-        this.forceUpdate();
-    };
+    @observable _templateDocs: Doc[] = [];
+    @observable _selectedTemplate: Doc | undefined = undefined;
+    @observable _columns: Col[] = [];
+    @observable _selectedCols: { title: string; type: string; desc: string }[] | undefined = [];
 
-    generateGPTImage = async (prompt: string): Promise<string | undefined> => {
-        console.log(prompt);
+    @observable _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.Grid, yMargin: 0, xMargin: 0, repeat: 0 };
+    @observable _layoutPreview: boolean = true;
+    @observable _layoutPreviewScale: number = 1;
+    @observable _savedLayouts: DataVizTemplateLayout[] = [];
+    @observable _expandedPreview: { icon: ImageField; doc: Doc } | undefined = undefined;
 
-        try {
-            const res = await gptImageCall(prompt);
+    @observable _suggestedTemplates: Doc[] = [];
+    @observable _GPTOpt: boolean = false;
+    @observable _userPrompt: string = '';
+    @observable _callCount: number = 0;
+    @observable _GPTLoading: boolean = false;
 
-            if (res) {
-                const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
-                const source = ClientUtils.prepend(result[0].accessPaths.agnostic.client);
-                return source;
-            }
-        } catch (e) {
-            console.log(e);
-        }
-    };
+    @observable _pageX: number = 0;
+    @observable _pageY: number = 0;
+    @observable _indicatorX: number | undefined = undefined;
+    @observable _indicatorY: number | undefined = undefined;
 
-    matchesForTemplate = (template: TemplateDocInfos, cols: Col[]): number[][] => {
-        const colMatchesField = (col: Col, field: Field) => {
-            return field.sizes?.some(size => col.sizes?.includes(size)) && field.types?.includes(col.type);
-        };
+    @observable _hoveredLayoutPreview: number | undefined = undefined;
+    @observable _mouseX: number = -1;
+    @observable _mouseY: number = -1;
+    @observable _startPos?: { x: number; y: number };
+    @observable _shouldDisplay: boolean = false;
 
-        const matches: number[][] = Array(template.fields.length)
-            .fill([])
-            .map(() => []);
+    @observable _menuContent: 'templates' | 'options' | 'saved' | 'dashboard' = 'templates';
+    @observable _dragging: boolean = false;
+    @observable _draggingIndicator: boolean = false;
+    @observable _dataViz?: DataVizBox;
+    @observable _interactionLock?: boolean;
+    @observable _snapPt: { x: number; y: number } = { x: 0, y: 0 };
+    @observable _resizeHdlId: string = '';
+    @observable _resizing: boolean = false;
+    @observable _offset: { x: number; y: number } = { x: 0, y: 0 };
+    @observable _resizeUndo: UndoManager.Batch | undefined = undefined;
+    @observable _initDimensions: { width: number; height: number; x?: number; y?: number } = { width: 300, height: 400, x: undefined, y: undefined };
+    @observable _menuDimensions: { width: number; height: number } = { width: 400, height: 400 };
+    @observable _editing: boolean = false;
 
-        template.fields.forEach((field, i) => {
-            cols.forEach((col, v) => {
-                if (colMatchesField(col, field)) {
-                    matches[i].push(v);
-                }
-            });
-        });
+    constructor(props: FieldViewProps) {
+        super(props);
+        makeObservable(this);
+        DocCreatorMenu.Instance = this;
+        //setTimeout(() => this.generateTemplates(''));
+    }
 
-        return matches;
+    @action setDataViz = (dataViz: DataVizBox) => {
+        this._dataViz = dataViz;
+    };
+    @action setTemplateDocs = (docs: Doc[]) => {
+        this._templateDocs = docs.map(doc => (doc.annotationOn ? DocCast(doc.annotationOn) : doc));
+    };
+    @action setGSuggestedTemplates = (docs: Doc[]) => {
+        this._suggestedTemplates = docs;
     };
 
-    maxMatches = (fieldsCt: number, matches: number[][]) => {
-        const used: boolean[] = Array(fieldsCt).fill(false);
-        const mt: number[] = Array(fieldsCt).fill(-1);
-
-        const augmentingPath = (v: number): boolean => {
-            if (used[v]) return false;
-            used[v] = true;
-            for (const to of matches[v]) {
-                if (mt[to] === -1 || augmentingPath(mt[to])) {
-                    mt[to] = v;
-                    return true;
-                }
-            }
-            return false;
-        };
+    @computed get docsToRender() {
+        return this._selectedTemplate ? NumListCast(this._dataViz?.layoutDoc.dataViz_selectedRows) : [];
+    }
 
-        for (let v = 0; v < fieldsCt; ++v) {
-            used.fill(false);
-            augmentingPath(v);
+    @computed get rowsCount() {
+        switch (this._layout.type) {
+            case LayoutType.Row:
+            case LayoutType.Stacked:
+                return 1;
+            case LayoutType.Column:
+                return this.docsToRender.length;
+            case LayoutType.Grid:
+                return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0;
+            default:
+                return 0;
         }
+    }
 
-        let count: number = 0;
-
-        for (let i = 0; i < fieldsCt; ++i) {
-            if (mt[i] !== -1) ++count;
+    @computed get columnsCount() {
+        switch (this._layout.type) {
+            case LayoutType.Row:
+                return this.docsToRender.length;
+            case LayoutType.Column:
+            case LayoutType.Stacked:
+                return 1;
+            case LayoutType.Grid:
+                return this._layout.columns ?? 0;
+            default:
+                return 0;
         }
+    }
 
-        return count;
-    };
-
-    findValidTemplates = (cols: Col[], templates: TemplateDocInfos[]) => {
-        let validTemplates: any[] = [];
-        templates.forEach(template => {
-            const numFields = template.fields.length;
-            if (!(numFields === cols.length)) return;
-            const matches = this.matchesForTemplate(template, cols);
-            if (this.maxMatches(numFields, matches) === numFields) {
-                validTemplates.push(template.title);
-            }
-        });
+    @computed get selectedFields() {
+        return StrListCast(this._dataViz?.layoutDoc._dataViz_axes);
+    }
 
-        validTemplates = validTemplates.map(title => TemplateLayouts.getTemplateByTitle(title));
+    @computed get fieldsInfos(): Col[] {
+        const colInfo = this._dataViz?.colsInfo;
+        return this.selectedFields
+            .map(field => {
+                const fieldInfo = colInfo?.get(field);
 
-        return validTemplates;
-    };
+                const col: Col = {
+                    title: field,
+                    type: fieldInfo?.type ?? TemplateFieldType.UNSET,
+                    desc: fieldInfo?.desc ?? '',
+                    sizes: fieldInfo?.sizes ?? [TemplateFieldSize.MEDIUM],
+                };
 
-    // createColumnField = (template: TemplateDocInfos, field: Field, column: Col): Doc => {
+                if (fieldInfo?.defaultContent !== undefined) {
+                    col.defaultContent = fieldInfo.defaultContent;
+                }
 
-    //     if (field.subfields) {
-    //         const doc = FieldFuncs.FreeformField({
-    //             tl: field.tl,
-    //             br: field.br },
-    //             template.height,
-    //             template.width,
-    //             column.title,
-    //             '',
-    //             field.opts
-    //         );
+                return col;
+            })
+            .concat(this._columns);
+    }
 
-    //         field.subfields[1].forEach(f => {
-    //             const fDoc = ()
-    //         })
+    @computed get canMakeDocs() {
+        return this._selectedTemplate !== undefined && this._layout !== undefined;
+    }
 
-    //     }
+    get bounds(): { t: number; b: number; l: number; r: number } {
+        const rect = this._ref?.getBoundingClientRect();
+        const bounds = { t: rect?.top ?? 0, b: rect?.bottom ?? 0, l: rect?.left ?? 0, r: rect?.right ?? 0 };
+        return bounds;
+    }
 
-    //     return new Doc;
-    // }
+    setUpButtonClick = (e: React.PointerEvent, func: () => void) => {
+        setupMoveUpEvents(
+            this,
+            e,
+            returnFalse,
+            emptyFunction,
+            undoable(clickEv => {
+                clickEv.stopPropagation();
+                clickEv.preventDefault();
+                func();
+            }, 'create docs')
+        );
+    };
 
-    /**
-     * Populates a preset template framework with content from a datavizbox or any AI-generated content.
-     * @param template the preloaded template framework being filled in
-     * @param assignments a list of template field numbers (from top to bottom) and their assigned columns from the linked dataviz
-     * @returns a doc containing the fully rendered template
-     */
-    fillPresetTemplate = async (template: TemplateDocInfos, assignments: { [field: string]: Col }): Promise<Doc> => {
-        const wordLimit = (size: TemplateFieldSize) => {
-            switch (size) {
-                case TemplateFieldSize.TINY:
-                    return 2;
-                case TemplateFieldSize.SMALL:
-                    return 5;
-                case TemplateFieldSize.MEDIUM:
-                    return 20;
-                case TemplateFieldSize.LARGE:
-                    return 50;
-                case TemplateFieldSize.HUGE:
-                    return 100;
-                default:
-                    return 10;
-            }
-        };
+    @action
+    onPointerDown = (e: PointerEvent) => {
+        this._mouseX = e.clientX;
+        this._mouseY = e.clientY;
+    };
 
-        const renderTextCalls = async (): Promise<Doc[]> => {
-            const rendered: Doc[] = [];
+    @action
+    onPointerUp = (e: PointerEvent) => {
+        if (this._resizing) {
+            this._initDimensions.width = this._menuDimensions.width;
+            this._initDimensions.height = this._menuDimensions.height;
+            this._initDimensions.x = this._pageX;
+            this._initDimensions.y = this._pageY;
+            document.removeEventListener('pointermove', this.onResize);
+            SnappingManager.SetIsResizing(undefined);
+            this._resizing = false;
+        }
+        if (this._dragging) {
+            document.removeEventListener('pointermove', this.onDrag);
+            this._dragging = false;
+        }
+        if (e.button !== 2 && !e.ctrlKey) return;
+        const curX = e.clientX;
+        const curY = e.clientY;
+        if (Math.abs(this._mouseX - curX) > 1 || Math.abs(this._mouseY - curY) > 1) {
+            this._shouldDisplay = false;
+        }
+    };
 
-            if (GPTTextCalls.length) {
-                try {
-                    const prompt = fieldContent + GPTTextAssignment;
+    componentDidMount() {
+        document.addEventListener('pointerdown', this.onPointerDown, true);
+        document.addEventListener('pointerup', this.onPointerUp);
+        this._disposers.templates = reaction(
+            () => this._templateDocs.slice(),
+            docs => this.updateIcons(docs)
+        );
+        this._disposers.gpt = reaction(
+            () => this._suggestedTemplates.slice(),
+            docs => this.updateIcons(docs)
+        );
+        //this._disposers.columns = reaction(() => this._dataViz?.layoutDoc._dataViz_axes, () => {this.generateTemplates('')})
+        this._disposers.lightbox = reaction(
+            () => LightboxView.LightboxDoc(),
+            doc => {
+                doc ? this._shouldDisplay && this.closeMenu() : !this._shouldDisplay && this.openMenu();
+            }
+        );
+        //this._disposers.fields = reaction(() => this._dataViz?.axes, cols => this._selectedCols = cols?.map(col => { return {title: col, type: '', desc: ''}}))
+    }
 
-                    const res = await gptAPICall(prompt, GPTCallType.FILL);
+    componentWillUnmount() {
+        Object.values(this._disposers).forEach(disposer => disposer?.());
+        document.removeEventListener('pointerdown', this.onPointerDown, true);
+        document.removeEventListener('pointerup', this.onPointerUp);
+    }
 
-                    if (res) {
-                        const assignments: { [title: string]: { number: string; content: string } } = JSON.parse(res);
-                        //console.log('assignments', GPTAssignments, 'assignment string', GPTAssignmentString, 'field content', fieldContent, 'response', res, 'assignments', assignments);
-                        Object.entries(assignments).forEach(([title, info]) => {
-                            const field: Field = template.fields[Number(info.number)];
-                            const col = this.getColByTitle(title);
+    updateIcons = (docs: Doc[]) => {
+        console.log('called');
+        docs.map(this.getIcon);
+    };
 
-                            const doc = FieldUtils.TextField(
-                                {
-                                    tl: field.tl,
-                                    br: field.br,
-                                },
-                                template.height,
-                                template.width,
-                                col.title,
-                                info.content ?? '',
-                                field.opts
-                            );
+    @action
+    updateSelectedCols = (cols: string[]) => {
+        this._selectedCols;
+    };
 
-                            rendered.push(doc);
-                        });
-                    }
-                } catch (err) {
-                    console.log(err);
-                }
-            }
+    @action
+    toggleDisplay = (x: number, y: number) => {
+        if (this._shouldDisplay) {
+            this._shouldDisplay = false;
+        } else {
+            this._pageX = x;
+            this._pageY = y;
+            this._shouldDisplay = true;
+        }
+    };
 
-            return rendered;
-        };
+    @action
+    closeMenu = () => {
+        this._shouldDisplay = false;
+    };
 
-        const createGeneratedImage = async (fieldNum: string, col: Col, prompt: string) => {
-            const url = await this.generateGPTImage(prompt);
-            const field: Field = template.fields[Number(fieldNum)];
-            const doc = FieldUtils.ImageField(
-                {
-                    tl: field.tl,
-                    br: field.br,
-                },
-                template.height,
-                template.width,
-                col.title,
-                url ?? '',
-                field.opts
-            );
+    @action
+    openMenu = () => {
+        const allTemplates = this._templateDocs.concat(this._suggestedTemplates);
+        this._shouldDisplay = true;
+        this.updateIcons(allTemplates);
+    };
 
-            return doc;
+    @action
+    onResizePointerDown = (e: React.PointerEvent<HTMLDivElement>): void => {
+        this._resizing = true;
+        document.addEventListener('pointermove', this.onResize);
+        SnappingManager.SetIsResizing(DocumentView.Selected().lastElement()?.Document[Id]); // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them
+        e.stopPropagation();
+        const id = (this._resizeHdlId = e.currentTarget.className);
+        const pad = id.includes('Left') || id.includes('Right') ? Number(getComputedStyle(e.target as Element).width.replace('px', '')) / 2 : 0;
+        const bounds = e.currentTarget.getBoundingClientRect();
+        this._offset = {
+            x: id.toLowerCase().includes('left') ? bounds.right - e.clientX - pad : bounds.left - e.clientX + pad, //
+            y: id.toLowerCase().includes('top') ? bounds.bottom - e.clientY - pad : bounds.top - e.clientY + pad,
         };
+        this._resizeUndo = UndoManager.StartBatch('drag resizing');
+        this._snapPt = { x: e.pageX, y: e.pageY };
+    };
 
-        const renderImageCalls = async (): Promise<Doc[]> => {
-            const rendered: Doc[] = [];
-            const calls = GPTIMGCalls;
+    @action
+    onResize = (e: PointerEvent): boolean => {
+        const dragHdl = this._resizeHdlId.split(' ')[1];
+        const thisPt = DragManager.snapDrag(e, -this._offset.x, -this._offset.y, this._offset.x, this._offset.y);
 
-            if (calls.length) {
-                try {
-                    const renderedImages: Doc[] = await Promise.all(
-                        calls.map(async ([fieldNum, col]) => {
-                            const sysPrompt =
-                                'Your job is to create a prompt for an AI image generator to help it generate an image based on existing content in a template and a user prompt. Your prompt should focus heavily on visual elements to help the image generator; avoid unecessary info that might distract it. ONLY INCLUDE THE PROMPT, NO OTHER TEXT OR EXPLANATION. The existing content is as follows: ' +
-                                fieldContent +
-                                ' **** The user prompt is: ' +
-                                col.desc;
+        const { scale, refPt, transl } = this.getResizeVals(thisPt, dragHdl);
+        !this._interactionLock && runInAction(async () => {   // resize selected docs if we're not in the middle of a resize (ie, throttle input events to frame rate)
+        this._interactionLock = true;
+        const scaleAspect = {x: scale.x, y: scale.y};
+        this.resizeView(refPt, scaleAspect, transl); // prettier-ignore
+        await new Promise<boolean|undefined>(res => { setTimeout(() => { res(this._interactionLock = undefined)})});
+        }); // prettier-ignore
+        return true;
+    };
 
-                            const prompt = await gptAPICall(sysPrompt, GPTCallType.COMPLETEPROMPT);
-                            console.log(sysPrompt, prompt);
+    @action
+    onDrag = (e: PointerEvent): boolean => {
+        this._pageX = e.pageX - (this._startPos?.x ?? 0);
+        this._pageY = e.pageY - (this._startPos?.y ?? 0);
+        this._initDimensions.x = this._pageX;
+        this._initDimensions.y = this._pageY;
+        return true;
+    };
 
-                            return createGeneratedImage(fieldNum, col, prompt);
-                        })
-                    );
+    getResizeVals = (thisPt: { x: number; y: number }, dragHdl: string) => {
+        const [w, h] = [this._initDimensions.width, this._initDimensions.height];
+        const [moveX, moveY] = [thisPt.x - this._snapPt.x, thisPt.y - this._snapPt.y];
+        let vals: { scale: { x: number; y: number }; refPt: [number, number]; transl: { x: number; y: number } };
+        switch (dragHdl) {
+            case 'topLeft':    vals = { scale: { x: 1 - moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.r, this.bounds.b], transl: {x: moveX, y: moveY } }; break;
+            case 'topRight':   vals = { scale: { x: 1 + moveX / w, y: 1 -moveY / h },  refPt: [this.bounds.l, this.bounds.b], transl: {x: 0, y: moveY } }; break;
+            case 'top':        vals = { scale: { x: 1,             y: 1 -moveY / h },  refPt: [this.bounds.l, this.bounds.b], transl: {x: 0, y: moveY } }; break;
+            case 'left':       vals = { scale: { x: 1 - moveX / w, y: 1 },             refPt: [this.bounds.r, this.bounds.t], transl: {x: moveX, y: 0 } }; break;
+            case 'bottomLeft': vals = { scale: { x: 1 - moveX / w, y: 1 + moveY / h }, refPt: [this.bounds.r, this.bounds.t], transl: {x: moveX, y: 0 } }; break;
+            case 'right':      vals = { scale: { x: 1 + moveX / w, y: 1 },             refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
+            case 'bottomRight':vals = { scale: { x: 1 + moveX / w, y: 1 + moveY / h }, refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
+            case 'bottom':     vals = { scale: { x: 1,             y: 1 + moveY / h }, refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
+            default:           vals = { scale: { x: 1,             y: 1 },             refPt: [this.bounds.l, this.bounds.t], transl: {x: 0, y: 0 } }; break;
+        } // prettier-ignore
+        return vals;
+    };
 
-                    const renderedTemplates: Doc[] = await Promise.all(renderedImages);
-                    renderedTemplates.forEach(doc => rendered.push(doc));
-                } catch (e) {
-                    console.log(e);
-                }
-            }
+    resizeView = (refPt: number[], scale: { x: number; y: number }, translation: { x: number; y: number }) => {
+        if (this._initDimensions.x === undefined) this._initDimensions.x = this._pageX;
+        if (this._initDimensions.y === undefined) this._initDimensions.y = this._pageY;
+        const { height, width, x, y } = this._initDimensions;
 
-            return rendered;
-        };
+        this._menuDimensions.width = Math.max(300, scale.x * width);
+        this._menuDimensions.height = Math.max(200, scale.y * height);
+        this._pageX = x + translation.x;
+        this._pageY = y + translation.y;
+    };
 
-        const fields: Doc[] = [];
+    async getIcon(doc: Doc) {
+        const docView = DocumentView.getDocumentView(doc);
+        if (docView) {
+            docView.ComponentView?.updateIcon?.();
+            return new Promise<ImageField | undefined>(res => setTimeout(() => res(ImageCast(docView.Document.icon)), 500));
+        }
+        return undefined;
+    }
 
-        const GPTAssignments = Object.entries(assignments).filter(([f, col]) => this._columns.includes(col));
-        const nonGPTAssignments: [string, Col][] = Object.entries(assignments).filter(a => !GPTAssignments.includes(a));
-        const GPTTextCalls = GPTAssignments.filter(([str, col]) => col.type === TemplateFieldType.TEXT);
-        const GPTIMGCalls = GPTAssignments.filter(([str, col]) => col.type === TemplateFieldType.VISUAL);
+    @action updateSelectedTemplate = (template: Doc) => {
+        if (this._selectedTemplate === template) {
+            this._selectedTemplate = undefined;
+            return;
+        } else {
+            this._selectedTemplate = template;
+            MakeTemplate(template);
+        }
+    };
 
-        const stringifyGPTInfo = (calls: [string, Col][]): string => {
-            let string: string = '*** COLUMN INFO:';
-            calls.forEach(([fieldNum, col]) => {
-                string += `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.sizes[0])} words, assigned field: ${fieldNum} ---`;
-            });
-            return (string += ' ***');
-        };
+    @action updateSelectedSavedLayout = (layout: DataVizTemplateLayout) => {
+        this._layout.xMargin = layout.layout.xMargin;
+        this._layout.yMargin = layout.layout.yMargin;
+        this._layout.type = layout.layout.type;
+        this._layout.columns = layout.columns;
+    };
 
-        const GPTTextAssignment = stringifyGPTInfo(GPTTextCalls);
+    isSelectedLayout = (layout: DataVizTemplateLayout) => {
+        return this._layout.xMargin === layout.layout.xMargin && this._layout.yMargin === layout.layout.yMargin && this._layout.type === layout.layout.type && this._layout.columns === layout.columns;
+    };
 
-        let fieldContent: string = '';
-
-        Object.entries(nonGPTAssignments).forEach(([f, strCol]) => {
-            const field: Field = template.fields[Number(f)];
-            const col = strCol[1];
+    @action
+    generateTemplates = async (inputText: string) => {
+        ++this._callCount;
+        const origCount = this._callCount;
 
-            const doc = (col.type === TemplateFieldType.VISUAL ? FieldUtils.ImageField : FieldUtils.TextField)(
-                {
-                    tl: field.tl,
-                    br: field.br,
-                },
-                template.height,
-                template.width,
-                col.title,
-                col.defaultContent ?? '',
-                field.opts
-            );
+        let prompt: string = `(#${origCount}) Please generate for the fields:`;
+        this.selectedFields?.forEach(field => (prompt += ` ${field},`));
+        prompt += ` (-----NOT A FIELD-----) Additional prompt: ${inputText}`;
 
-            fieldContent += `--- Field #${f} (title: ${col.title}): ${col.defaultContent ?? ''} ---`;
+        this._GPTLoading = true;
 
-            fields.push(doc);
-        });
+        try {
+            const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
 
-        template.decorations.forEach(dec => {
-            const doc = FieldUtils.FreeformField(
-                {
-                    tl: dec.tl,
-                    br: dec.br,
-                },
-                template.height,
-                template.width,
-                '',
-                '',
-                dec.opts
-            );
+            if (res && this._callCount === origCount) {
+                this._suggestedTemplates = [];
+                const templates: { template_type: string; fieldVals: { title: string; tlx: string; tly: string; brx: string; bry: string }[] }[] = JSON.parse(res);
+                this.createGeneratedTemplates(templates, 500, 500);
+            }
+        } catch (err) {
+            console.error(err);
+        }
+    };
 
-            fields.push(doc);
-        });
+    @action
+    createGeneratedTemplates = (layouts: { template_type: string; fieldVals: { title: string; tlx: string; tly: string; brx: string; bry: string }[] }[], tempWidth: number, tempHeight: number) => {
+        const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+        const GPTTemplates: Doc[] = [];
 
-        const createMainDoc = (): Doc => {
-            const main = Docs.Create.FreeformDocument(fields, {
-                _height: template.height,
-                _width: template.width,
-                title: template.title,
-                backgroundColor: template.opts.backgroundColor,
-                _layout_borderRounding: `${template.opts.cornerRounding}px` ?? '0px',
-                borderWidth: template.opts.borderWidth,
-                borderColor: template.opts.borderColor,
-                x: 40000,
-                y: 40000,
+        layouts.forEach(layout => {
+            const fields: Doc[] = layout.fieldVals.map(field => {
+                const left: number = (Number(field.tlx) * tempWidth) / 2;
+                const top: number = Number(field.tly) * tempHeight / 2; //prettier-ignore
+                const right: number = (Number(field.brx) * tempWidth) / 2;
+                const bottom: number = Number(field.bry) * tempHeight / 2; //prettier-ignore
+                const height = bottom - top;
+                const width = right - left;
+                const doc = !field.title.includes('$$')
+                    ? Docs.Create.TextDocument('', { _height: height, _width: width, title: field.title, x: left, y: top, _text_fontSize: `${height / 2}` })
+                    : Docs.Create.ImageDocument('', { _height: height, _width: width, title: field.title.replace(/\$\$/g, ''), x: left, y: top });
+                return doc;
             });
 
-            const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-            mainCollection.addDocument(main);
-
-            return main;
-        };
+            const template = Docs.Create.FreeformDocument(fields, { _height: tempHeight, _width: tempWidth, title: layout.template_type, x: 400000, y: 400000 });
 
-        const textCalls = await renderTextCalls();
-        const imageCalls = await renderImageCalls();
+            mainCollection.addDocument(template);
 
-        textCalls.forEach(doc => {
-            fields.push(doc);
-        });
-        imageCalls.forEach(doc => {
-            fields.push(doc);
+            GPTTemplates.push(template);
         });
 
-        return createMainDoc();
-    };
-
-    compileFieldDescriptions = (templates: TemplateDocInfos[]): string => {
-        let descriptions: string = '';
-        templates.forEach(template => {
-            descriptions += `----------  NEW TEMPLATE TO INCLUDE: Description of template ${template.title}'s fields: `;
-            template.fields.forEach((field, index) => {
-                descriptions += `{Field #${index}: ${field.description}} `;
-            });
-        });
+        setTimeout(() => {
+            this.setGSuggestedTemplates(GPTTemplates); /*GPTTemplates.forEach(template => mainCollection.removeDocument(template))*/
+        }, 100);
 
-        return descriptions;
+        this.forceUpdate();
     };
 
-    compileColDescriptions = (cols: Col[]): string => {
-        let descriptions: string = ' ------------- COL DESCRIPTIONS START HERE:';
-        cols.forEach(col => (descriptions += `{title: ${col.title}, sizes: ${String(col.sizes)}, type: ${col.type}, descreiption: ${col.desc}} `));
-
-        return descriptions;
+    editTemplate = (doc: Doc) => {
+        //this.closeMenu();
+        DocumentViewInternal.addDocTabFunc(doc, OpenWhere.addRight);
+        DocumentView.DeselectAll();
+        Doc.UnBrushDoc(doc);
     };
 
-    getColByTitle = (title: string) => {
-        return this.fieldsInfos.filter(col => col.title === title)[0];
+    removeTemplate = (doc: Doc) => {
+        this._templateDocs.splice(this._templateDocs.indexOf(doc), 1);
     };
 
-    @action
-    assignColsToFields = async (templates: TemplateDocInfos[], cols: Col[]): Promise<[TemplateDocInfos, { [field: number]: Col }][]> => {
-        const fieldDescriptions: string = this.compileFieldDescriptions(templates);
-        const colDescriptions: string = this.compileColDescriptions(cols);
+    testTemplate = async () => {
+        this.updateIcons(this._suggestedTemplates.slice());
+        this.forceUpdate();
 
-        const inputText = fieldDescriptions.concat(colDescriptions);
+        // try {
+        //     const res = await gptImageCall('Image of panda eating a cookie');
 
-        ++this._callCount;
-        const origCount = this._callCount;
+        //     if (res) {
+        //         const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
 
-        let prompt: string = `(${origCount}) ${inputText}`;
+        //         console.log(result);
+        //     }
+        // } catch (e) {
+        //     console.log(e);
+        // }
+    };
 
-        this._GPTLoading = true;
+    @action addField = () => {
+        const newFields: Col[] = this._columns.concat([{ title: '', type: TemplateFieldType.UNSET, desc: '', sizes: [] }]);
+        this._columns = newFields;
+    };
 
-        try {
-            const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
+    @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._columns.filter(f => f === field);
+            if (!toRemove) return;
 
-            if (res && this._callCount === origCount) {
-                const assignments: { [templateTitle: string]: { [field: string]: string } } = JSON.parse(res);
-                const brokenDownAssignments: [TemplateDocInfos, { [field: number]: Col }][] = [];
+            if (toRemove.length > 1) {
+                while (toRemove.length > 1) {
+                    toRemove.pop();
+                }
+            }
 
-                Object.entries(assignments).forEach(([tempTitle, assignment]) => {
-                    const template = TemplateLayouts.getTemplateByTitle(tempTitle);
-                    if (!template) return;
-                    const toObj = Object.entries(assignment).reduce(
-                        (a, [fieldNum, colTitle]) => {
-                            a[Number(fieldNum)] = this.getColByTitle(colTitle);
-                            return a;
-                        },
-                        {} as { [field: number]: Col }
-                    );
-                    brokenDownAssignments.push([template, toObj]);
-                });
-                return brokenDownAssignments;
+            if (this._columns.length === 1) {
+                this._columns = [];
+            } else {
+                this._columns.splice(this._columns.indexOf(toRemove[0]), 1);
             }
-        } catch (err) {
-            console.error(err);
         }
-
-        return [];
     };
 
-    generatePresetTemplates = async () => {
-        this._dataViz?.updateColDefaults();
+    @action setColTitle = (column: Col, title: string) => {
+        if (this.selectedFields.includes(column.title)) {
+            this._dataViz?.setColumnTitle(column.title, title);
+        } else {
+            column.title = title;
+        }
+        this.forceUpdate();
+    };
 
-        const cols = this.fieldsInfos;
-        const templates = this.findValidTemplates(cols, TemplateLayouts.allTemplates);
+    @action setColType = (column: Col, type: TemplateFieldType) => {
+        if (this.selectedFields.includes(column.title)) {
+            this._dataViz?.setColumnType(column.title, type);
+        } else {
+            column.type = type;
+        }
+        this.forceUpdate();
+    };
 
-        const assignments: [TemplateDocInfos, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols);
+    modifyColSizes = (column: Col, size: TemplateFieldSize, valid: boolean) => {
+        if (this.selectedFields.includes(column.title)) {
+            this._dataViz?.modifyColumnSizes(column.title, size, valid);
+        } else {
+            if (!valid && column.sizes.includes(size)) {
+                column.sizes.splice(column.sizes.indexOf(size), 1);
+            } else if (valid && !column.sizes.includes(size)) {
+                column.sizes.push(size);
+            }
+        }
+        this.forceUpdate();
+    };
 
-        const renderedTemplatePromises: Promise<Doc>[] = assignments.map(([template, assignments]) => this.fillPresetTemplate(template, assignments));
+    setColDesc = (column: Col, desc: string) => {
+        if (this.selectedFields.includes(column.title)) {
+            this._dataViz?.setColumnDesc(column.title, desc);
+        } else {
+            column.desc = desc;
+        }
+        this.forceUpdate();
+    };
 
-        const renderedTemplates: Doc[] = await Promise.all(renderedTemplatePromises);
+    generateGPTImage = async (prompt: string): Promise<string | undefined> => {
+        console.log(prompt);
 
-        setTimeout(() => {
-            this.setGSuggestedTemplates(renderedTemplates);
-            this._GPTLoading = false;
-        });
-    };
+        try {
+            const res = await gptImageCall(prompt);
 
-    @action setExpandedView = (info: { icon: ImageField; doc: Doc } | undefined) => {
-        if (info) {
-            const doc = info.doc;
-            const wrapper: Doc = Docs.Create.FreeformDocument([info.doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''});
-            const newInfo = {icon: new ImageField(''), doc: wrapper}
-            this._expandedPreview = newInfo;
-        } else {
-            this._expandedPreview = info;
+            if (res) {
+                const result = await Networking.PostToServer('/uploadRemoteImage', { sources: res });
+                const source = ClientUtils.prepend(result[0].accessPaths.agnostic.client);
+                return source;
+            }
+        } catch (e) {
+            console.log(e);
         }
     };
 
-    get editingWindow(){
-        const doc = this._expandedPreview?.doc ?? new Doc();
-        const rendered = 
-            <div className="docCreatorMenu-expanded-template-preview">
-                <CollectionFreeFormView
-                    Document={this._expandedPreview!.doc}
-                    docViewPath={returnEmptyDocViewList}
-                    childLayoutTemplate={() => Cast(doc.childLayoutTemplate, Doc, null)}
-                    isContentActive={emptyFunction}
-                    isAnyChildContentActive={() => true}
-                    select={emptyFunction}
-                    isSelected={returnFalse}
-                    fieldKey={Doc.LayoutFieldKey(doc)}
-                    addDocument={returnFalse}
-                    moveDocument={returnFalse}
-                    removeDocument={returnFalse}
-                    PanelWidth={() => this._menuDimensions.width - 10}
-                    PanelHeight={() => this._menuDimensions.height - 60}
-                    ScreenToLocalTransform={Transform.Identity}
-                    renderDepth={5}
-                    whenChildContentsActiveChanged={emptyFunction}
-                    focus={emptyFunction}
-                    styleProvider={DefaultStyleProvider}
-                    addDocTab={this._props.addDocTab}
-                    // eslint-disable-next-line no-use-before-define
-                    pinToPres={() => undefined}
-                    childFilters={returnEmptyFilter}
-                    childFiltersByRanges={returnEmptyFilter}
-                    searchFilterDocs={returnEmptyDoclist}
-                    fitContentsToBox={returnTrue}
-                    xPadding={0}
-                    yPadding={0}
-                />
-            </div>
+    matchesForTemplate = (template: TemplateDocInfos, cols: Col[]): number[][] => {
+        const colMatchesField = (col: Col, field: Field) => {
+            return field.sizes?.some(size => col.sizes?.includes(size)) && field.types?.includes(col.type);
+        };
 
+        const matches: number[][] = Array(template.fields.length)
+            .fill([])
+            .map(() => []);
 
-        return (
-            <div className="docCreatorMenu-expanded-template-preview">
-                <div className="top-panel"/>
-                {rendered}
-                <div className="right-buttons-panel">
-                    <button className="docCreatorMenu-menu-button section-reveal-options top-right" onPointerDown={e => this.setUpButtonClick(e, () => {this._expandedPreview && this.updateIcons(this._suggestedTemplates.slice()); this.setExpandedView(undefined)})}>
-                        <FontAwesomeIcon icon="minimize" />
-                    </button>
-                    <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._templateDocs.push(this._expandedPreview.doc))}>
-                        <FontAwesomeIcon icon="plus" color="white" />
-                    </button>
-                </div>
-            </div>
+        template.fields.forEach((field, i) => {
+            cols.forEach((col, v) => {
+                if (colMatchesField(col, field)) {
+                    matches[i].push(v);
+                }
+            });
+        });
 
-        );
-    }
+        return matches;
+    };
 
-    get templatesPreviewContents() {
-        const renderedTemplates: Doc[] = [];
+    maxMatches = (fieldsCt: number, matches: number[][]) => {
+        const used: boolean[] = Array(fieldsCt).fill(false);
+        const mt: number[] = Array(fieldsCt).fill(-1);
 
-        const GPTOptions = <div></div>;
+        const augmentingPath = (v: number): boolean => {
+            if (used[v]) return false;
+            used[v] = true;
+            for (const to of matches[v]) {
+                if (mt[to] === -1 || augmentingPath(mt[to])) {
+                    mt[to] = v;
+                    return true;
+                }
+            }
+            return false;
+        };
 
-        //<img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
+        for (let v = 0; v < fieldsCt; ++v) {
+            used.fill(false);
+            augmentingPath(v);
+        }
 
-        return (
-            <div className={`docCreatorMenu-templates-view`}>
-                {this._expandedPreview ? (
-                    this.editingWindow
-                ) : (
-                    <div>
-                        <div className="docCreatorMenu-section" style={{ height: this._GPTOpt ? 200 : 200 }}>
-                            <div className="docCreatorMenu-section-topbar">
-                                <div className="docCreatorMenu-section-title">Suggested Templates</div>
-                                <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._menuContent = 'dashboard')))}>
-                                    <FontAwesomeIcon icon="gear" />
-                                </button>
-                            </div>
-                            <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this._GPTLoading || this._menuDimensions.width > 400 ? 'center' : '' }}>
-                                {this._GPTLoading ? (
-                                    <div className="loading-spinner">
-                                        <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
-                                    </div>
-                                ) : (
-                                    this._suggestedTemplates
-                                        ?.map(doc => ({ icon: ImageCast(doc.icon), doc }))
-                                        .filter(info => info.icon && info.doc)
-                                        .map(info => (
-                                            <div
-                                                className="docCreatorMenu-preview-window"
-                                                style={{
-                                                    border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                                                    boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '',
-                                                }}
-                                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
-                                                <button
-                                                    className="option-button left"
-                                                    onPointerDown={e =>
-                                                        this.setUpButtonClick(e, () => {
-                                                            this.setExpandedView(info);
-                                                        })
-                                                    }>
-                                                    <FontAwesomeIcon icon="magnifying-glass" color="white" />
-                                                </button>
-                                                <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}>
-                                                    <FontAwesomeIcon icon="plus" color="white" />
-                                                </button>
-                                                <img className="docCreatorMenu-preview-image" src={info.icon!.url.href.replace('.png', '_o.png')} />
-                                            </div>
-                                        ))
-                                )}
-                            </div>
-                            <div className="docCreatorMenu-GPT-options">
-                                <div className="docCreatorMenu-GPT-options-container">
-                                    <button className="docCreatorMenu-menu-button" onPointerDown={e => this.setUpButtonClick(e, () => this.generatePresetTemplates())}>
-                                        <FontAwesomeIcon icon="arrows-rotate" />
-                                    </button>
-                                </div>
-                                {this._GPTOpt ? GPTOptions : null}
-                            </div>
-                        </div>
-                        <hr className="docCreatorMenu-option-divider full no-margin" />
-                        <div className="docCreatorMenu-section">
-                            <div className="docCreatorMenu-section-topbar">
-                                <div className="docCreatorMenu-section-title">Your Templates</div>
-                                <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, () => (this._GPTOpt = !this._GPTOpt))}>
-                                    <FontAwesomeIcon icon="gear" />
-                                </button>
-                            </div>
-                            <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this._menuDimensions.width > 400 ? 'center' : '' }}>
-                                <div className="docCreatorMenu-preview-window empty" onPointerDown={e => this.testTemplate()}>
-                                    <FontAwesomeIcon icon="plus" color="rgb(160, 160, 160)" />
-                                </div>
-                                {this._templateDocs
-                                    .map(doc => ({ icon: ImageCast(doc.icon), doc }))
-                                    .filter(info => info.icon && info.doc)
-                                    .map(info => {
-                                        if (renderedTemplates.includes(info.doc)) return undefined;
-                                        renderedTemplates.push(info.doc);
-                                        return (
-                                            <div
-                                                className="docCreatorMenu-preview-window"
-                                                style={{
-                                                    border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                                                    boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '',
-                                                }}
-                                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
-                                                <button
-                                                    className="option-button left"
-                                                    onPointerDown={e =>
-                                                        this.setUpButtonClick(e, () => {
-                                                            this.editTemplate(info.doc);
-                                                        })
-                                                    }>
-                                                    <FontAwesomeIcon icon="pencil" color="black" />
-                                                </button>
-                                                <button
-                                                    className="option-button right"
-                                                    onPointerDown={e =>
-                                                        this.setUpButtonClick(e, () => {
-                                                            this.removeTemplate(info.doc);
-                                                        })
-                                                    }>
-                                                    <FontAwesomeIcon icon="trash" color="black" />
-                                                </button>
-                                                <img className="docCreatorMenu-preview-image" src={info.icon!.url.href.replace('.png', '_o.png')} />
-                                            </div>
-                                        );
-                                    })}
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </div>
-        );
-    }
+        let count: number = 0;
 
-    get savedLayoutsPreviewContents() {
-        return (
-            <div className="docCreatorMenu-preview-container">
-                {this._savedLayouts.map((layout, index) => (
-                    <div
-                        className="docCreatorMenu-preview-window"
-                        style={{
-                            border: this.isSelectedLayout(layout) ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
-                            boxShadow: this.isSelectedLayout(layout) ? `0 0 15px rgba(68, 118, 247, .8)` : '',
-                        }}
-                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedSavedLayout(layout)))}>
-                        {this.layoutPreviewContents(87, layout, true, index)}
-                    </div>
-                ))}
-            </div>
-        );
-    }
+        for (let i = 0; i < fieldsCt; ++i) {
+            if (mt[i] !== -1) ++count;
+        }
 
-    @action updateXMargin = (input: string) => {
-        this._layout.xMargin = Number(input);
-    };
-    @action updateYMargin = (input: string) => {
-        this._layout.yMargin = Number(input);
-    };
-    @action updateColumns = (input: string) => {
-        this._layout.columns = Number(input);
+        return count;
     };
 
-    get layoutConfigOptions() {
-        const optionInput = (icon: string, func: Function, def?: number, key?: string, noMargin?: boolean) => {
-            return (
-                <div className="docCreatorMenu-option-container small no-margin" key={key} style={{ marginTop: noMargin ? '0px' : '' }}>
-                    <div className="docCreatorMenu-option-title config layout-config">
-                        <FontAwesomeIcon icon={icon as any} />
-                    </div>
-                    <input defaultValue={def} onInput={e => func(e.currentTarget.value)} className="docCreatorMenu-input config layout-config" />
-                </div>
-            );
-        };
+    findValidTemplates = (cols: Col[], templates: TemplateDocInfos[]) => {
+        const validTemplates: string[] = [];
+        templates.forEach(template => {
+            const numFields = template.fields.length;
+            if (!(numFields === cols.length)) return;
+            const matches = this.matchesForTemplate(template, cols);
+            if (this.maxMatches(numFields, matches) === numFields) {
+                validTemplates.push(template.title);
+            }
+        });
 
-        switch (this._layout.type) {
-            case LayoutType.Row:
-                return <div className="docCreatorMenu-configuration-bar">{optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '0')}</div>;
-            case LayoutType.Column:
-                return <div className="docCreatorMenu-configuration-bar">{optionInput('arrows-up-down', this.updateYMargin, this._layout.yMargin, '1')}</div>;
-            case LayoutType.Grid:
-                return (
-                    <div className="docCreatorMenu-configuration-bar">
-                        {optionInput('arrows-up-down', this.updateYMargin, this._layout.xMargin, '2')}
-                        {optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '3')}
-                        {optionInput('table-columns', this.updateColumns, this._layout.columns, '4', true)}
-                    </div>
-                );
-            case LayoutType.Stacked:
-                return null;
-            default:
-                break;
-        }
-    }
+        return validTemplates
+            .map(title => TemplateLayouts.getTemplateByTitle(title))
+            .filter(t => t)
+            .map(t => t!);
+    };
 
-    // doc = () => {
-    //     return Docs.Create.FreeformDocument([], { _height: 200, _width: 200, title: 'title'});
-    // }
+    // createColumnField = (template: TemplateDocInfos, field: Field, column: Col): Doc => {
 
-    screenToLocalTransform = () => this._props.ScreenToLocalTransform();
+    //     if (field.subfields) {
+    //         const doc = FieldFuncs.FreeformField({
+    //             tl: field.tl,
+    //             br: field.br },
+    //             template.height,
+    //             template.width,
+    //             column.title,
+    //             '',
+    //             field.opts
+    //         );
 
-    layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => {
-        const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate;
-        if (!doc) return;
+    //         field.subfields[1].forEach(f => {
+    //             const fDoc = ()
+    //         })
 
-        const layout = altLayout ? altLayout.layout : this._layout;
+    //     }
 
-        const docWidth: number = Number(doc._width);
-        const docHeight: number = Number(doc._height);
-        const horizontalSpan: number = (docWidth + layout.xMargin) * (altLayout ? altLayout.columns : this.columnsCount) - layout.xMargin;
-        const verticalSpan: number = (docHeight + layout.yMargin) * (altLayout ? altLayout.rows : this.rowsCount) - layout.yMargin;
-        const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan;
-        const scaledDown = (input: number) => {
-            return input / ((largerSpan / outerSpan) * this._layoutPreviewScale);
+    //     return new Doc;
+    // }
+
+    /**
+     * Populates a preset template framework with content from a datavizbox or any AI-generated content.
+     * @param template the preloaded template framework being filled in
+     * @param assignments a list of template field numbers (from top to bottom) and their assigned columns from the linked dataviz
+     * @returns a doc containing the fully rendered template
+     */
+    fillPresetTemplate = async (template: TemplateDocInfos, assignments: { [field: string]: Col }): Promise<Doc> => {
+        const fields: Doc[] = [];
+        const wordLimit = (size: TemplateFieldSize) => {
+            switch (size) {
+                case TemplateFieldSize.TINY:   return 2;
+                case TemplateFieldSize.SMALL:  return 5;
+                case TemplateFieldSize.MEDIUM: return 20;
+                case TemplateFieldSize.LARGE:  return 50;
+                case TemplateFieldSize.HUGE:   return 100;
+                default:                       return 10;
+            } // prettier-ignore
+        };
+        const stringifyGPTInfo = (calls: [string, Col][]): string => {
+            let string: string = '*** COLUMN INFO:';
+            calls.forEach(([fieldNum, col]) => {
+                string += `--- title: ${col.title}, prompt: ${col.desc}, word limit: ${wordLimit(col.sizes[0])} words, assigned field: ${fieldNum} ---`;
+            });
+            return (string += ' ***');
         };
-        const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3));
 
-        return (
-            // <div className='divvv' style={{width: 100, height: 100, border: `1px solid white`}}>
-            //     <CollectionFreeFormView
-            //         // eslint-disable-next-line react/jsx-props-no-spreading
-            //         {...this._props}
-            //         Document={new Doc()}
-            //         isContentActive={returnFalse}
-            //         setContentViewBox={emptyFunction}
-            //         NativeWidth={() => 100}
-            //         NativeHeight={() => 100}
-            //         pointerEvents={SnappingManager.IsDragging ? returnAll : returnNone}
-            //         isAnnotationOverlay
-            //         isAnnotationOverlayScrollable
-            //         childDocumentsActive={returnFalse}
-            //         fieldKey={this._props.fieldKey + '_annotations'}
-            //         dropAction={dropActionType.move}
-            //         select={emptyFunction}
-            //         addDocument={returnFalse}
-            //         removeDocument={returnFalse}
-            //         moveDocument={returnFalse}
-            //         renderDepth={this._props.renderDepth + 1}>
-            //         {null}
-            //     </CollectionFreeFormView>
-            // </div>
-            <div className="docCreatorMenu-layout-preview-window-wrapper" id={String(id) ?? undefined}>
-                <div className="docCreatorMenu-zoom-button-container">
-                    <button className="docCreatorMenu-zoom-button" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._layoutPreviewScale *= 1.25)))}>
-                        <FontAwesomeIcon icon={'minus'} />
-                    </button>
-                    <button className="docCreatorMenu-zoom-button zoom-in" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._layoutPreviewScale *= 0.75)))}>
-                        <FontAwesomeIcon icon={'plus'} />
-                    </button>
-                    {altLayout ? (
-                        <button className="docCreatorMenu-zoom-button trash" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._savedLayouts.splice(this._savedLayouts.indexOf(altLayout), 1)))}>
-                            <FontAwesomeIcon icon={'trash'} />
-                        </button>
-                    ) : null}
-                </div>
-                {
-                    <div
-                        id={String(id) ?? undefined}
-                        className={`docCreatorMenu-layout-preview-window ${small ? 'small' : ''}`}
-                        style={{
-                            gridTemplateColumns: `repeat(${altLayout ? altLayout.columns : this.columnsCount}, ${scaledDown(docWidth)}px`,
-                            gridTemplateRows: `${scaledDown(docHeight)}px`,
-                            gridAutoRows: `${scaledDown(docHeight)}px`,
-                            rowGap: `${scaledDown(layout.yMargin)}px`,
-                            columnGap: `${scaledDown(layout.xMargin)}px`,
-                        }}>
-                        {this._layout.type === LayoutType.Stacked ? (
-                            <div
-                                className="docCreatorMenu-layout-preview-item"
-                                style={{
-                                    width: scaledDown(docWidth),
-                                    height: scaledDown(docHeight),
-                                    fontSize: fontSize,
-                                }}>
-                                All
-                            </div>
-                        ) : (
-                            this.docsToRender.map(num => (
-                                <div
-                                    onMouseEnter={() => this._dataViz?.setSpecialHighlightedRow(num)}
-                                    onMouseLeave={() => this._dataViz?.setSpecialHighlightedRow(undefined)}
-                                    className="docCreatorMenu-layout-preview-item"
-                                    style={{
-                                        width: scaledDown(docWidth),
-                                        height: scaledDown(docHeight),
-                                        fontSize: fontSize,
-                                    }}>
-                                    {num}
-                                </div>
-                            ))
-                        )}
-                    </div>
+        const GPTAssignments = Object.entries(assignments).filter(([f, col]) => this._columns.includes(col));
+        const nonGPTAssignments: [string, Col][] = Object.entries(assignments).filter(a => !GPTAssignments.includes(a));
+        const GPTTextCalls = GPTAssignments.filter(([str, col]) => col.type === TemplateFieldType.TEXT);
+        const GPTIMGCalls = GPTAssignments.filter(([str, col]) => col.type === TemplateFieldType.VISUAL);
+        const GPTTextAssignment = stringifyGPTInfo(GPTTextCalls);
+
+        let fieldContent: string = '';
+
+        const renderTextCalls = async (): Promise<Doc[]> => {
+            const rendered: Doc[] = [];
+
+            if (GPTTextCalls.length) {
+                try {
+                    const prompt = fieldContent + GPTTextAssignment;
+
+                    const res = await gptAPICall(prompt, GPTCallType.FILL);
+
+                    if (res) {
+                        const asngs: { [title: string]: { number: string; content: string } } = JSON.parse(res);
+                        //console.log('assignments', GPTAssignments, 'assignment string', GPTAssignmentString, 'field content', fieldContent, 'response', res, 'assignments', assignments);
+                        Object.entries(asngs).forEach(([title, info]) => {
+                            const field: Field = template.fields[Number(info.number)];
+                            const col = this.getColByTitle(title);
+
+                            const doc = FieldUtils.TextField(
+                                {
+                                    tl: field.tl,
+                                    br: field.br,
+                                },
+                                template.height,
+                                template.width,
+                                col.title,
+                                info.content ?? '',
+                                field.opts
+                            );
+
+                            rendered.push(doc);
+                        });
+                    }
+                } catch (err) {
+                    console.log(err);
                 }
-            </div>
-        );
-    };
+            }
 
-    get optionsMenuContents() {
-        const layoutEquals = (layout: DataVizTemplateLayout) => {}; //TODO: ADD LATER
+            return rendered;
+        };
 
-        const layoutOption = (option: LayoutType, optStyle?: {}, specialFunc?: Function) => {
-            return (
-                <div
-                    className="docCreatorMenu-dropdown-option"
-                    style={optStyle}
-                    onPointerDown={e =>
-                        this.setUpButtonClick(e, () => {
-                            specialFunc?.();
-                            runInAction(() => (this._layout.type = option));
-                        })
-                    }>
-                    {option}
-                </div>
+        const createGeneratedImage = async (fieldNum: string, col: Col, prompt: string) => {
+            const url = await this.generateGPTImage(prompt);
+            const field: Field = template.fields[Number(fieldNum)];
+            const doc = FieldUtils.ImageField(
+                {
+                    tl: field.tl,
+                    br: field.br,
+                },
+                template.height,
+                template.width,
+                col.title,
+                url ?? '',
+                field.opts
             );
+
+            return doc;
         };
 
-        const selectionBox = (width: number, height: number, icon: string, specClass?: string, options?: JSX.Element[], manual?: boolean): JSX.Element => {
-            return (
-                <div className="docCreatorMenu-option-container">
-                    <div className={`docCreatorMenu-option-title config ${specClass}`} style={{ width: width * 0.4, height: height }}>
-                        <FontAwesomeIcon icon={icon as any} />
-                    </div>
-                    {manual ? (
-                        <input className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }} />
-                    ) : (
-                        <select className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }}>
-                            {options}
-                        </select>
-                    )}
-                </div>
-            );
+        const renderImageCalls = async (): Promise<Doc[]> => {
+            const rendered: Doc[] = [];
+            const calls = GPTIMGCalls;
+
+            if (calls.length) {
+                try {
+                    const renderedImages: Doc[] = await Promise.all(
+                        calls.map(async ([fieldNum, col]) => {
+                            const sysPrompt =
+                                'Your job is to create a prompt for an AI image generator to help it generate an image based on existing content in a template and a user prompt. Your prompt should focus heavily on visual elements to help the image generator; avoid unecessary info that might distract it. ONLY INCLUDE THE PROMPT, NO OTHER TEXT OR EXPLANATION. The existing content is as follows: ' +
+                                fieldContent +
+                                ' **** The user prompt is: ' +
+                                col.desc;
+
+                            const prompt = await gptAPICall(sysPrompt, GPTCallType.COMPLETEPROMPT);
+                            console.log(sysPrompt, prompt);
+
+                            return createGeneratedImage(fieldNum, col, prompt);
+                        })
+                    );
+
+                    const renderedTemplates: Doc[] = await Promise.all(renderedImages);
+                    renderedTemplates.forEach(doc => rendered.push(doc));
+                } catch (e) {
+                    console.log(e);
+                }
+            }
+
+            return rendered;
         };
 
-        const repeatOptions = [0, 1, 2, 3, 4, 5];
+        Object.entries(nonGPTAssignments).forEach(([f, strCol]) => {
+            const field: Field = template.fields[Number(f)];
+            const col = strCol[1];
 
-        return (
-            <div className="docCreatorMenu-menu-container">
-                <div className="docCreatorMenu-option-container layout">
-                    <div className="docCreatorMenu-dropdown-hoverable">
-                        <div className="docCreatorMenu-option-title">{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}</div>
-                        <div className="docCreatorMenu-dropdown-content">
-                            {layoutOption(LayoutType.Stacked)}
-                            {layoutOption(LayoutType.Grid, undefined, () => {
-                                if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
-                            })}
-                            {layoutOption(LayoutType.Row)}
-                            {layoutOption(LayoutType.Column)}
-                            {layoutOption(LayoutType.Custom, { borderBottom: `0px` })}
-                        </div>
-                    </div>
-                    <button className="docCreatorMenu-menu-button preview-toggle" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._layoutPreview = !this._layoutPreview)))}>
-                        <FontAwesomeIcon icon={this._layoutPreview ? 'minus' : 'magnifying-glass'} />
-                    </button>
-                </div>
-                {this._layout.type ? this.layoutConfigOptions : null}
-                {this._layoutPreview ? this.layoutPreviewContents(this._menuDimensions.width * 0.75) : null}
-                {selectionBox(
-                    60,
-                    20,
-                    'repeat',
-                    undefined,
-                    repeatOptions.map(num => <option onPointerDown={e => (this._layout.repeat = num)}>{`${num}x`}</option>)
-                )}
-                <hr className="docCreatorMenu-option-divider" />
-                <div className="docCreatorMenu-general-options-container">
+            const doc = (col.type === TemplateFieldType.VISUAL ? FieldUtils.ImageField : FieldUtils.TextField)(
+                {
+                    tl: field.tl,
+                    br: field.br,
+                },
+                template.height,
+                template.width,
+                col.title,
+                col.defaultContent ?? '',
+                field.opts
+            );
+
+            fieldContent += `--- Field #${f} (title: ${col.title}): ${col.defaultContent ?? ''} ---`;
+
+            fields.push(doc);
+        });
+
+        template.decorations.forEach(dec => {
+            const doc = FieldUtils.FreeformField(
+                {
+                    tl: dec.tl,
+                    br: dec.br,
+                },
+                template.height,
+                template.width,
+                '',
+                '',
+                dec.opts
+            );
+
+            fields.push(doc);
+        });
+
+        const createMainDoc = (): Doc => {
+            const main = Docs.Create.FreeformDocument(fields, {
+                _height: template.height,
+                _width: template.width,
+                title: template.title,
+                backgroundColor: template.opts.backgroundColor,
+                _layout_borderRounding: `${template.opts.cornerRounding ?? 0}px`,
+                borderWidth: template.opts.borderWidth,
+                borderColor: template.opts.borderColor,
+                x: 40000,
+                y: 40000,
+            });
+
+            const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+            mainCollection.addDocument(main);
+
+            return main;
+        };
+
+        const textCalls = await renderTextCalls();
+        const imageCalls = await renderImageCalls();
+
+        textCalls.forEach(doc => {
+            fields.push(doc);
+        });
+        imageCalls.forEach(doc => {
+            fields.push(doc);
+        });
+
+        return createMainDoc();
+    };
+
+    compileFieldDescriptions = (templates: TemplateDocInfos[]): string => {
+        let descriptions: string = '';
+        templates.forEach(template => {
+            descriptions += `----------  NEW TEMPLATE TO INCLUDE: Description of template ${template.title}'s fields: `;
+            template.fields.forEach((field, index) => {
+                descriptions += `{Field #${index}: ${field.description}} `;
+            });
+        });
+
+        return descriptions;
+    };
+
+    compileColDescriptions = (cols: Col[]): string => {
+        let descriptions: string = ' ------------- COL DESCRIPTIONS START HERE:';
+        cols.forEach(col => (descriptions += `{title: ${col.title}, sizes: ${String(col.sizes)}, type: ${col.type}, descreiption: ${col.desc}} `));
+
+        return descriptions;
+    };
+
+    getColByTitle = (title: string) => {
+        return this.fieldsInfos.filter(col => col.title === title)[0];
+    };
+
+    @action
+    assignColsToFields = async (templates: TemplateDocInfos[], cols: Col[]): Promise<[TemplateDocInfos, { [field: number]: Col }][]> => {
+        const fieldDescriptions: string = this.compileFieldDescriptions(templates);
+        const colDescriptions: string = this.compileColDescriptions(cols);
+
+        const inputText = fieldDescriptions.concat(colDescriptions);
+
+        ++this._callCount;
+        const origCount = this._callCount;
+
+        const prompt: string = `(${origCount}) ${inputText}`;
+
+        this._GPTLoading = true;
+
+        try {
+            const res = await gptAPICall(prompt, GPTCallType.TEMPLATE);
+
+            if (res && this._callCount === origCount) {
+                const assignments: { [templateTitle: string]: { [field: string]: string } } = JSON.parse(res);
+                const brokenDownAssignments: [TemplateDocInfos, { [field: number]: Col }][] = [];
+
+                Object.entries(assignments).forEach(([tempTitle, assignment]) => {
+                    const template = TemplateLayouts.getTemplateByTitle(tempTitle);
+                    if (!template) return;
+                    const toObj = Object.entries(assignment).reduce(
+                        (a, [fieldNum, colTitle]) => {
+                            a[Number(fieldNum)] = this.getColByTitle(colTitle);
+                            return a;
+                        },
+                        {} as { [field: number]: Col }
+                    );
+                    brokenDownAssignments.push([template, toObj]);
+                });
+                return brokenDownAssignments;
+            }
+        } catch (err) {
+            console.error(err);
+        }
+
+        return [];
+    };
+
+    generatePresetTemplates = async () => {
+        this._dataViz?.updateColDefaults();
+
+        const cols = this.fieldsInfos;
+        const templates = this.findValidTemplates(cols, TemplateLayouts.allTemplates);
+
+        const assignments: [TemplateDocInfos, { [field: number]: Col }][] = await this.assignColsToFields(templates, cols);
+
+        const renderedTemplatePromises: Promise<Doc>[] = assignments.map(([template, asgns]) => this.fillPresetTemplate(template, asgns));
+
+        const renderedTemplates: Doc[] = await Promise.all(renderedTemplatePromises);
+
+        setTimeout(() => {
+            this.setGSuggestedTemplates(renderedTemplates);
+            this._GPTLoading = false;
+        });
+    };
+
+    @action setExpandedView = (info: { icon: ImageField; doc: Doc } | undefined) => {
+        if (info) {
+            const doc = info.doc;
+            const wrapper: Doc = Docs.Create.FreeformDocument([info.doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: '' });
+            const newInfo = { icon: new ImageField(''), doc: wrapper };
+            this._expandedPreview = newInfo;
+        } else {
+            this._expandedPreview = info;
+        }
+    };
+
+    get editingWindow() {
+        const doc = this._expandedPreview?.doc ?? new Doc();
+        const rendered = (
+            <div className="docCreatorMenu-expanded-template-preview">
+                <CollectionFreeFormView
+                    Document={this._expandedPreview!.doc}
+                    docViewPath={returnEmptyDocViewList}
+                    childLayoutTemplate={() => Cast(doc.childLayoutTemplate, Doc, null)}
+                    isContentActive={emptyFunction}
+                    isAnyChildContentActive={() => true}
+                    select={emptyFunction}
+                    isSelected={returnFalse}
+                    fieldKey={Doc.LayoutFieldKey(doc)}
+                    addDocument={returnFalse}
+                    moveDocument={returnFalse}
+                    removeDocument={returnFalse}
+                    PanelWidth={() => this._menuDimensions.width - 10}
+                    PanelHeight={() => this._menuDimensions.height - 60}
+                    ScreenToLocalTransform={Transform.Identity}
+                    renderDepth={5}
+                    whenChildContentsActiveChanged={emptyFunction}
+                    focus={emptyFunction}
+                    styleProvider={DefaultStyleProvider}
+                    addDocTab={this._props.addDocTab}
+                    pinToPres={emptyFunction}
+                    childFilters={returnEmptyFilter}
+                    childFiltersByRanges={returnEmptyFilter}
+                    searchFilterDocs={returnEmptyDoclist}
+                    fitContentsToBox={returnTrue}
+                    xPadding={0}
+                    yPadding={0}
+                />
+            </div>
+        );
+
+        return (
+            <div className="docCreatorMenu-expanded-template-preview">
+                <div className="top-panel" />
+                {rendered}
+                <div className="right-buttons-panel">
                     <button
-                        className="docCreatorMenu-save-layout-button"
+                        className="docCreatorMenu-menu-button section-reveal-options top-right"
                         onPointerDown={e =>
-                            setupMoveUpEvents(
-                                this,
-                                e,
-                                returnFalse,
-                                emptyFunction,
-                                undoable(clickEv => {
-                                    clickEv.stopPropagation();
-                                    if (!this._selectedTemplate) return;
-                                    const layout: DataVizTemplateLayout = {
-                                        template: this._selectedTemplate,
-                                        layout: { type: this._layout.type, xMargin: this._layout.xMargin, yMargin: this._layout.yMargin, repeat: 0 },
-                                        columns: this.columnsCount,
-                                        rows: this.rowsCount,
-                                        docsNumList: this.docsToRender,
-                                    };
-                                    if (!this._savedLayouts.includes(layout)) {
-                                        this._savedLayouts.push(layout);
-                                    }
-                                }, 'make docs')
-                            )
+                            this.setUpButtonClick(e, () => {
+                                this._expandedPreview && this.updateIcons(this._suggestedTemplates.slice());
+                                this.setExpandedView(undefined);
+                            })
                         }>
-                        <FontAwesomeIcon icon="floppy-disk" />
+                        <FontAwesomeIcon icon="minimize" />
                     </button>
-                    <button
-                        className="docCreatorMenu-create-docs-button"
-                        style={{ backgroundColor: this.canMakeDocs ? '' : 'rgb(155, 155, 155)', border: this.canMakeDocs ? '' : 'solid 2px rgb(180, 180, 180)' }}
-                        onPointerDown={e =>
-                            setupMoveUpEvents(
-                                this,
-                                e,
-                                returnFalse,
-                                emptyFunction,
-                                undoable(clickEv => {
-                                    clickEv.stopPropagation();
-                                    if (!this._selectedTemplate) return;
-                                    const templateInfo: DataVizTemplateInfo = { doc: this._selectedTemplate, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount };
-                                    this._dataViz?.createDocsFromTemplate(templateInfo);
-                                }, 'make docs')
-                            )
-                        }>
-                        <FontAwesomeIcon icon="plus" />
+                    <button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => this._expandedPreview && this._templateDocs.push(this._expandedPreview.doc))}>
+                        <FontAwesomeIcon icon="plus" color="white" />
                     </button>
                 </div>
             </div>
         );
     }
 
-    get dashboardContents() {
-        const sizes: string[] = ['tiny', 'small', 'medium', 'large', 'huge'];
+    get templatesPreviewContents() {
+        const renderedTemplates: Doc[] = [];
 
-        const fieldPanel = (field: Col) => {
-            return (
-                <div className="field-panel">
-                    <div className="top-bar">
-                        <span className="field-title">{`${field.title} Field`}</span>
-                        <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))} style={{ position: 'absolute', right: '0px' }}>
-                            <FontAwesomeIcon icon="minus" />
-                        </button>
-                    </div>
-                    <div className="opts-bar">
-                        <div className="opt-box">
-                            <div className="top-bar"> Title </div>
-                            <textarea className="content" style={{ width: '100%', height: 'calc(100% - 20px)' }} defaultValue={field.title} placeholder={'Enter title'} onChange={e => this.setColTitle(field, e.target.value)} />
-                        </div>
-                        <div className="opt-box">
-                            <div className="top-bar"> Type </div>
-                            <div className="content">
-                                <span className="type-display">{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
-                                <div className="bubbles">
-                                    <input
-                                        className="bubble"
-                                        type="radio"
-                                        name="type"
-                                        onClick={() => {
-                                            this.setColType(field, TemplateFieldType.TEXT);
-                                        }}
-                                    />
-                                    <div className="text">Text</div>
-                                    <input
-                                        className="bubble"
-                                        type="radio"
-                                        name="type"
-                                        onClick={() => {
-                                            this.setColType(field, TemplateFieldType.VISUAL);
-                                        }}
-                                    />
-                                    <div className="text">File</div>
+        const GPTOptions = <div></div>;
+
+        //<img className='docCreatorMenu-preview-image expanded' src={this._expandedPreview.icon!.url.href.replace(".png", "_o.png")} />
+
+        return (
+            <div className={`docCreatorMenu-templates-view`}>
+                {this._expandedPreview ? (
+                    this.editingWindow
+                ) : (
+                    <div>
+                        <div className="docCreatorMenu-section" style={{ height: this._GPTOpt ? 200 : 200 }}>
+                            <div className="docCreatorMenu-section-topbar">
+                                <div className="docCreatorMenu-section-title">Suggested Templates</div>
+                                <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._menuContent = 'dashboard')))}>
+                                    <FontAwesomeIcon icon="gear" />
+                                </button>
+                            </div>
+                            <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this._GPTLoading || this._menuDimensions.width > 400 ? 'center' : '' }}>
+                                {this._GPTLoading ? (
+                                    <div className="loading-spinner">
+                                        <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
+                                    </div>
+                                ) : (
+                                    this._suggestedTemplates
+                                        ?.map(doc => ({ icon: ImageCast(doc.icon), doc }))
+                                        .filter(info => info.icon && info.doc)
+                                        .map(info => (
+                                            <div
+                                                key={info.doc[Id]}
+                                                className="docCreatorMenu-preview-window"
+                                                style={{
+                                                    border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                                                    boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                                                }}
+                                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+                                                <button
+                                                    className="option-button left"
+                                                    onPointerDown={e =>
+                                                        this.setUpButtonClick(e, () => {
+                                                            this.setExpandedView(info);
+                                                        })
+                                                    }>
+                                                    <FontAwesomeIcon icon="magnifying-glass" color="white" />
+                                                </button>
+                                                <button className="option-button right" onPointerDown={e => this.setUpButtonClick(e, () => this._templateDocs.push(info.doc))}>
+                                                    <FontAwesomeIcon icon="plus" color="white" />
+                                                </button>
+                                                <img className="docCreatorMenu-preview-image" src={info.icon!.url.href.replace('.png', '_o.png')} />
+                                            </div>
+                                        ))
+                                )}
+                            </div>
+                            <div className="docCreatorMenu-GPT-options">
+                                <div className="docCreatorMenu-GPT-options-container">
+                                    <button className="docCreatorMenu-menu-button" onPointerDown={e => this.setUpButtonClick(e, () => this.generatePresetTemplates())}>
+                                        <FontAwesomeIcon icon="arrows-rotate" />
+                                    </button>
                                 </div>
+                                {this._GPTOpt ? GPTOptions : null}
                             </div>
                         </div>
-                    </div>
-                    <div className="sizes-box">
-                        <div className="top-bar"> Valid Sizes </div>
-                        <div className="content">
-                            <div className="bubbles">
-                                {sizes.map(size => (
-                                    <>
-                                        <input
-                                            className="bubble"
-                                            type="checkbox"
-                                            name="type"
-                                            checked={field.sizes.includes(size as TemplateFieldSize)}
-                                            onChange={e => {
-                                                this.modifyColSizes(field, size as TemplateFieldSize, e.target.checked);
-                                            }}
-                                        />
-                                        <div className="text">{size}</div>
-                                    </>
-                                ))}
+                        <hr className="docCreatorMenu-option-divider full no-margin" />
+                        <div className="docCreatorMenu-section">
+                            <div className="docCreatorMenu-section-topbar">
+                                <div className="docCreatorMenu-section-title">Your Templates</div>
+                                <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, () => (this._GPTOpt = !this._GPTOpt))}>
+                                    <FontAwesomeIcon icon="gear" />
+                                </button>
+                            </div>
+                            <div className="docCreatorMenu-templates-preview-window" style={{ justifyContent: this._menuDimensions.width > 400 ? 'center' : '' }}>
+                                <div className="docCreatorMenu-preview-window empty" onPointerDown={() => this.testTemplate()}>
+                                    <FontAwesomeIcon icon="plus" color="rgb(160, 160, 160)" />
+                                </div>
+                                {this._templateDocs
+                                    .map(doc => ({ icon: ImageCast(doc.icon), doc }))
+                                    .filter(info => info.icon && info.doc)
+                                    .map(info => {
+                                        if (renderedTemplates.includes(info.doc)) return undefined;
+                                        renderedTemplates.push(info.doc);
+                                        return (
+                                            <div
+                                                key={info.doc[Id]}
+                                                className="docCreatorMenu-preview-window"
+                                                style={{
+                                                    border: this._selectedTemplate === info.doc ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                                                    boxShadow: this._selectedTemplate === info.doc ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                                                }}
+                                                onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedTemplate(info.doc)))}>
+                                                <button
+                                                    className="option-button left"
+                                                    onPointerDown={e =>
+                                                        this.setUpButtonClick(e, () => {
+                                                            this.editTemplate(info.doc);
+                                                        })
+                                                    }>
+                                                    <FontAwesomeIcon icon="pencil" color="black" />
+                                                </button>
+                                                <button
+                                                    className="option-button right"
+                                                    onPointerDown={e =>
+                                                        this.setUpButtonClick(e, () => {
+                                                            this.removeTemplate(info.doc);
+                                                        })
+                                                    }>
+                                                    <FontAwesomeIcon icon="trash" color="black" />
+                                                </button>
+                                                <img className="docCreatorMenu-preview-image" src={info.icon!.url.href.replace('.png', '_o.png')} />
+                                            </div>
+                                        );
+                                    })}
                             </div>
                         </div>
                     </div>
-                    <div className="desc-box">
-                        <div className="top-bar"> Prompt </div>
-                        <textarea
-                            className="content"
-                            onChange={e => this.setColDesc(field, 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/prompt to help with template generation.'}
-                        />
-                    </div>
-                </div>
-            );
-        };
-
-        return (
-            <div className="docCreatorMenu-dashboard-view">
-                <div className="topbar">
-                    <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
-                        <FontAwesomeIcon icon="plus" />
-                    </button>
-                    <button className="docCreatorMenu-menu-button section-reveal-options float-right" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._menuContent = 'templates')))}>
-                        <FontAwesomeIcon icon="arrow-left" />
-                    </button>
-                </div>
-                <div className="panels-container">{this.fieldsInfos.map(field => fieldPanel(field))}</div>
+                )}
             </div>
         );
     }
 
-    get renderSelectedViewType() {
-        switch (this._menuContent) {
-            case 'templates':
-                return this.templatesPreviewContents;
-            case 'options':
-                return this.optionsMenuContents;
-            case 'saved':
-                return this.savedLayoutsPreviewContents;
-            case 'dashboard':
-                return this.dashboardContents;
-            default:
-                return undefined;
-        }
+    get savedLayoutsPreviewContents() {
+        return (
+            <div className="docCreatorMenu-preview-container">
+                {this._savedLayouts.map((layout, index) => (
+                    <div
+                        key={layout.template[Id]}
+                        className="docCreatorMenu-preview-window"
+                        style={{
+                            border: this.isSelectedLayout(layout) ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
+                            boxShadow: this.isSelectedLayout(layout) ? `0 0 15px rgba(68, 118, 247, .8)` : '',
+                        }}
+                        onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this.updateSelectedSavedLayout(layout)))}>
+                        {this.layoutPreviewContents(87, layout, true, index)}
+                    </div>
+                ))}
+            </div>
+        );
     }
 
-    get resizePanes() {
-        const ref = this._ref?.getBoundingClientRect();
-        const height: number = ref?.height ?? 0;
-        const width: number = ref?.width ?? 0;
-
-        return [
-            <div className='docCreatorMenu-resizer top' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: -7}}/>, 
-            <div className='docCreatorMenu-resizer right' onPointerDown={this.onResizePointerDown} style={{height: height, left: width - 3, top: 0}}/>, 
-            <div className='docCreatorMenu-resizer bottom' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: height - 3}}/>, 
-            <div className='docCreatorMenu-resizer left' onPointerDown={this.onResizePointerDown} style={{height: height, left: -7, top: 0}}/>,
-            <div className='docCreatorMenu-resizer topRight' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: -10, cursor: 'nesw-resize'}}/>,
-            <div className='docCreatorMenu-resizer topLeft' onPointerDown={this.onResizePointerDown} style={{left: -10, top: -10, cursor: 'nwse-resize'}}/>,
-            <div className='docCreatorMenu-resizer bottomRight' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: height - 5, cursor: 'nwse-resize'}}/>,
-            <div className='docCreatorMenu-resizer bottomLeft' onPointerDown={this.onResizePointerDown} style={{left: -10, top: height - 5, cursor: 'nesw-resize'}}/>
-        ]; //prettier-ignore
-    }
+    @action updateXMargin = (input: string) => {
+        this._layout.xMargin = Number(input);
+    };
+    @action updateYMargin = (input: string) => {
+        this._layout.yMargin = Number(input);
+    };
+    @action updateColumns = (input: string) => {
+        this._layout.columns = Number(input);
+    };
 
-    render() {
-        const topButton = (icon: string, opt: string, func: Function, tag: string) => {
+    get layoutConfigOptions() {
+        const optionInput = (icon: string, func: (arg: string) => void, def?: number, key?: string, noMargin?: boolean) => {
             return (
-                <div className={`top-button-container ${tag} ${opt === this._menuContent ? 'selected' : ''}`}>
-                    <div
-                        className="top-button-content"
-                        onPointerDown={e =>
-                            this.setUpButtonClick(e, () =>
-                                runInAction(() => {
-                                    func();
-                                })
-                            )
-                        }>
-                        <FontAwesomeIcon icon={icon as any} />
+                <div className="docCreatorMenu-option-container small no-margin" key={key} style={{ marginTop: noMargin ? '0px' : '' }}>
+                    <div className="docCreatorMenu-option-title config layout-config">
+                        <FontAwesomeIcon icon={icon as IconProp} />
                     </div>
+                    <input defaultValue={def} onInput={e => func(e.currentTarget.value)} className="docCreatorMenu-input config layout-config" />
                 </div>
             );
         };
 
-        const onPreviewSelected = () => {
-            this._menuContent = 'templates';
-        };
-        const onSavedSelected = () => {
-            this._menuContent = 'dashboard';
-        };
-        const onOptionsSelected = () => {
-            this._menuContent = 'options';
-            if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
-        };
-
-        return (
-            <div className="docCreatorMenu">
-                {!this._shouldDisplay ? undefined : (
-                    <div
-                        className="docCreatorMenu-cont"
-                        ref={r => (this._ref = r)}
-                        style={{
-                            display: '',
-                            left: this._pageX,
-                            top: this._pageY,
-                            width: this._menuDimensions.width,
-                            height: this._menuDimensions.height,
-                            background: SnappingManager.userBackgroundColor,
-                            color: SnappingManager.userColor,
-                        }}>
-                        {this.resizePanes}
-                        <div
-                            className="docCreatorMenu-menu"
-                            onPointerDown={e =>
-                                setupMoveUpEvents(
-                                    this,
-                                    e,
-                                    e => {
-                                        this._dragging = true;
-                                        this._startPos = { x: 0, y: 0 };
-                                        this._startPos.x = e.pageX - (this._ref?.getBoundingClientRect().left ?? 0);
-                                        this._startPos.y = e.pageY - (this._ref?.getBoundingClientRect().top ?? 0);
-                                        document.addEventListener('pointermove', this.onDrag);
-                                        return true;
-                                    },
-                                    emptyFunction,
-                                    undoable(clickEv => {
-                                        clickEv.stopPropagation();
-                                    }, 'drag menu')
-                                )
-                            }>
-                            <div className="docCreatorMenu-top-buttons-container">
-                                {topButton('table-cells', 'templates', onPreviewSelected, 'left')}
-                                {topButton('bars', 'options', onOptionsSelected, 'middle')}
-                                {topButton('floppy-disk', 'saved', onSavedSelected, 'right')}
-                            </div>
-                            <button className="docCreatorMenu-menu-button close-menu" onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
-                                <FontAwesomeIcon icon={'minus'} />
-                            </button>
-                        </div>
-                        {this.renderSelectedViewType}
+        switch (this._layout.type) {
+            case LayoutType.Row:
+                return <div className="docCreatorMenu-configuration-bar">{optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '0')}</div>;
+            case LayoutType.Column:
+                return <div className="docCreatorMenu-configuration-bar">{optionInput('arrows-up-down', this.updateYMargin, this._layout.yMargin, '1')}</div>;
+            case LayoutType.Grid:
+                return (
+                    <div className="docCreatorMenu-configuration-bar">
+                        {optionInput('arrows-up-down', this.updateYMargin, this._layout.xMargin, '2')}
+                        {optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '3')}
+                        {optionInput('table-columns', this.updateColumns, this._layout.columns, '4', true)}
                     </div>
-                )}
-            </div>
-        );
+                );
+            case LayoutType.Stacked:
+                return null;
+            default:
+                break;
+        }
     }
-}
-
-export interface DataVizTemplateInfo {
-    doc: Doc;
-    layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number };
-    columns: number;
-    referencePos: { x: number; y: number };
-}
 
-export interface DataVizTemplateLayout {
-    template: Doc;
-    docsNumList: number[];
-    layout: { type: LayoutType; xMargin: number; yMargin: number; repeat: number };
-    columns: number;
-    rows: number;
-}
+    // doc = () => {
+    //     return Docs.Create.FreeformDocument([], { _height: 200, _width: 200, title: 'title'});
+    // }
 
-export enum TemplateFieldType {
-    TEXT = 'text',
-    VISUAL = 'visual',
-    UNSET = 'unset',
-}
+    screenToLocalTransform = () => this._props.ScreenToLocalTransform();
 
-export enum TemplateFieldSize {
-    TINY = 'tiny',
-    SMALL = 'small',
-    MEDIUM = 'medium',
-    LARGE = 'large',
-    HUGE = 'huge',
-}
+    layoutPreviewContents = (outerSpan: number, altLayout?: DataVizTemplateLayout, small: boolean = false, id?: number) => {
+        const doc: Doc | undefined = altLayout ? altLayout.template : this._selectedTemplate;
+        if (!doc) return;
 
-export type Col = {
-    sizes: TemplateFieldSize[];
-    desc: string;
-    title: string;
-    type: TemplateFieldType;
-    defaultContent?: string;
-};
+        const layout = altLayout ? altLayout.layout : this._layout;
 
-type Field = {
-    tl: [number, number];
-    br: [number, number];
-    opts: FieldOpts;
-    subfields?: Field[];
-    types?: TemplateFieldType[];
-    sizes?: TemplateFieldSize[];
-    isDecoration?: boolean;
-    description?: string;
-};
+        const docWidth: number = Number(doc._width);
+        const docHeight: number = Number(doc._height);
+        const horizontalSpan: number = (docWidth + layout.xMargin) * (altLayout ? altLayout.columns : this.columnsCount) - layout.xMargin;
+        const verticalSpan: number = (docHeight + layout.yMargin) * (altLayout ? altLayout.rows : this.rowsCount) - layout.yMargin;
+        const largerSpan: number = horizontalSpan > verticalSpan ? horizontalSpan : verticalSpan;
+        const scaledDown = (input: number) => {
+            return input / ((largerSpan / outerSpan) * this._layoutPreviewScale);
+        };
+        const fontSize = Math.min(scaledDown(docWidth / 3), scaledDown(docHeight / 3));
 
-// class ContentField implements Field {
-//     tl: [number, number];
-//     br: [number, number];
-//     opts: FieldOpts;
-//     subfields?: Field[];
-//     types?: TemplateFieldType[];
-//     sizes?: TemplateFieldSize[];
-//     description?: string;
+        return (
+            // <div className='divvv' style={{width: 100, height: 100, border: `1px solid white`}}>
+            //     <CollectionFreeFormView
+            //         // eslint-disable-next-line react/jsx-props-no-spreading
+            //         {...this._props}
+            //         Document={new Doc()}
+            //         isContentActive={returnFalse}
+            //         setContentViewBox={emptyFunction}
+            //         NativeWidth={() => 100}
+            //         NativeHeight={() => 100}
+            //         pointerEvents={SnappingManager.IsDragging ? returnAll : returnNone}
+            //         isAnnotationOverlay
+            //         isAnnotationOverlayScrollable
+            //         childDocumentsActive={returnFalse}
+            //         fieldKey={this._props.fieldKey + '_annotations'}
+            //         dropAction={dropActionType.move}
+            //         select={emptyFunction}
+            //         addDocument={returnFalse}
+            //         removeDocument={returnFalse}
+            //         moveDocument={returnFalse}
+            //         renderDepth={this._props.renderDepth + 1}>
+            //         {null}
+            //     </CollectionFreeFormView>
+            // </div>
+            <div className="docCreatorMenu-layout-preview-window-wrapper" id={String(id)}>
+                <div className="docCreatorMenu-zoom-button-container">
+                    <button className="docCreatorMenu-zoom-button" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._layoutPreviewScale *= 1.25)))}>
+                        <FontAwesomeIcon icon={'minus'} />
+                    </button>
+                    <button className="docCreatorMenu-zoom-button zoom-in" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._layoutPreviewScale *= 0.75)))}>
+                        <FontAwesomeIcon icon={'plus'} />
+                    </button>
+                    {altLayout ? (
+                        <button className="docCreatorMenu-zoom-button trash" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => this._savedLayouts.splice(this._savedLayouts.indexOf(altLayout), 1)))}>
+                            <FontAwesomeIcon icon={'trash'} />
+                        </button>
+                    ) : null}
+                </div>
+                {
+                    <div
+                        id={String(id)}
+                        className={`docCreatorMenu-layout-preview-window ${small ? 'small' : ''}`}
+                        style={{
+                            gridTemplateColumns: `repeat(${altLayout ? altLayout.columns : this.columnsCount}, ${scaledDown(docWidth)}px`,
+                            gridTemplateRows: `${scaledDown(docHeight)}px`,
+                            gridAutoRows: `${scaledDown(docHeight)}px`,
+                            rowGap: `${scaledDown(layout.yMargin)}px`,
+                            columnGap: `${scaledDown(layout.xMargin)}px`,
+                        }}>
+                        {this._layout.type === LayoutType.Stacked ? (
+                            <div
+                                className="docCreatorMenu-layout-preview-item"
+                                style={{
+                                    width: scaledDown(docWidth),
+                                    height: scaledDown(docHeight),
+                                    fontSize: fontSize,
+                                }}>
+                                All
+                            </div>
+                        ) : (
+                            this.docsToRender.map(num => (
+                                <div
+                                    key={num}
+                                    onMouseEnter={() => this._dataViz?.setSpecialHighlightedRow(num)}
+                                    onMouseLeave={() => this._dataViz?.setSpecialHighlightedRow(undefined)}
+                                    className="docCreatorMenu-layout-preview-item"
+                                    style={{
+                                        width: scaledDown(docWidth),
+                                        height: scaledDown(docHeight),
+                                        fontSize: fontSize,
+                                    }}>
+                                    {num}
+                                </div>
+                            ))
+                        )}
+                    </div>
+                }
+            </div>
+        );
+    };
 
-//     constructor( tl: [number, number], br: [number, number],
-//                         opts: FieldOpts, subfields?: Field[],
-//                         types?: TemplateFieldType[],
-//                         sizes?: TemplateFieldSize[],
-//                         description?: string) {
-//         this.tl = tl;
-//         this.br = br;
-//         this.opts = opts;
-//         this.subfields = subfields;
-//         this.types = types;
-//         this.sizes = sizes;
-//         this.description = description;
-//     }
+    get optionsMenuContents() {
+        const layoutEquals = (layout: DataVizTemplateLayout) => {}; //TODO: ADD LATER
 
-//     render = (content: any): Doc => {
-//         return new Doc;
-//     }
-// }
+        const layoutOption = (option: LayoutType, optStyle?: object, specialFunc?: () => void) => {
+            return (
+                <div
+                    className="docCreatorMenu-dropdown-option"
+                    style={optStyle}
+                    onPointerDown={e =>
+                        this.setUpButtonClick(e, () => {
+                            specialFunc?.();
+                            runInAction(() => (this._layout.type = option));
+                        })
+                    }>
+                    {option}
+                </div>
+            );
+        };
 
-type DecorationField = Field;
+        const selectionBox = (width: number, height: number, icon: string, specClass?: string, options?: JSX.Element[], manual?: boolean): JSX.Element => {
+            return (
+                <div className="docCreatorMenu-option-container">
+                    <div className={`docCreatorMenu-option-title config ${specClass}`} style={{ width: width * 0.4, height: height }}>
+                        <FontAwesomeIcon icon={icon as IconProp} />
+                    </div>
+                    {manual ? (
+                        <input className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }} />
+                    ) : (
+                        <select className={`docCreatorMenu-input config ${specClass}`} style={{ width: width * 0.6, height: height }}>
+                            {options}
+                        </select>
+                    )}
+                </div>
+            );
+        };
 
-type InkDecoration = {};
+        const repeatOptions = [0, 1, 2, 3, 4, 5];
 
-type TemplateDecorations = Field | InkDecoration;
-
-export interface TemplateDocInfos {
-    title: string;
-    height: number;
-    width: number;
-    opts: TemplateOpts;
-    fields: Field[];
-    decorations: Field[];
-}
-
-export interface FieldOpts {
-    backgroundColor?: string;
-    color?: string;
-    cornerRounding?: number;
-    borderWidth?: string;
-    borderColor?: string;
-    contentXCentering?: 'h-left' | 'h-center' | 'h-right';
-    contentYCentering?: 'top' | 'center' | 'bottom';
-    opacity?: number;
-    rotation?: number;
-    //animation?: boolean;
-    fontBold?: boolean;
-    fontTransform?: 'uppercase' | 'lowercase';
-    fieldViewType?: 'freeform' | 'stacked';
-}
-
-interface TemplateOpts extends FieldOpts {}
-
-export class FieldUtils {
-    public static contentFields = (fields: Field[]) => {
-        let toRet: Field[] = [];
-        fields.forEach(field => {
-            if (!field.isDecoration) {
-                toRet.push(field);
-            }
-            toRet = toRet.concat(FieldUtils.contentFields(field.subfields ?? []));
-        });
-
-        return toRet;
-    };
-
-    public static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
-        const words: string[] = text.split(/\s+/).filter(Boolean);
-
-        let currFontSize = 1;
-        let rowsCount = 1;
-        let currTextHeight = currFontSize * rowsCount * 2;
-
-        while (currTextHeight <= contHeight) {
-            let wordIndex = 0;
-            let currentRowWidth = 0;
-            let wordsInCurrRow = 0;
-            rowsCount = 1;
-
-            while (wordIndex < words.length) {
-                const word = words[wordIndex];
-                const wordWidth = word.length * currFontSize * 0.5;
-                //console.log(wordWidth)
-
-                if (currentRowWidth + wordWidth <= contWidth) {
-                    currentRowWidth += wordWidth;
-                    ++wordsInCurrRow;
-                } else {
-                    if (words.length !== 1 && words.length > wordsInCurrRow) {
-                        rowsCount++;
-                        currentRowWidth = wordWidth;
-                        wordsInCurrRow = 1;
-                    } else {
-                        break;
-                    }
-                }
-
-                wordIndex++;
-            }
-
-            currTextHeight = rowsCount * currFontSize * 2;
-            //console.log(rowsCount, currFontSize, currTextHeight)
-
-            currFontSize += 1;
-        }
-
-        return currFontSize - 1;
-    };
-
-    private static getDimensions = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number): { width: number; height: number; coord: { x: number; y: number } } => {
-        const l = (coords.tl[0] * parentHeight) / 2;
-        const t = coords.tl[1] * parentWidth / 2; //prettier-ignore
-        const r = (coords.br[0] * parentHeight) / 2;
-        const b = coords.br[1] * parentWidth / 2; //prettier-ignore
-        const width = r - l;
-        const height = b - t;
-        const coord = { x: l, y: t };
-        //console.log(coords, parentWidth, parentHeight, height);
-        return { width, height, coord };
-    };
-
-    public static FreeformField = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
-        const { width, height, coord } = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
-
-        const docWithBasicOpts = Docs.Create.FreeformDocument([], {
-            isDefaultTemplateDoc: true,
-            _height: height,
-            _width: width,
-            title: title,
-            x: coord.x,
-            y: coord.y,
-            backgroundColor: opts.backgroundColor ?? '',
-            _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
-            borderColor: opts.borderColor,
-            borderWidth: opts.borderWidth,
-            opacity: opts.opacity,
-            hCentering: opts.contentXCentering,
-            _rotation: opts.rotation,
-        });
-
-        return docWithBasicOpts;
-    };
-
-    public static TextField = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
-        const { width, height, coord } = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
-
-        const bool = true;
-
-        const docWithBasicOpts = Docs.Create.TextDocument(content, {
-            isDefaultTemplateDoc: true,
-            _height: height,
-            _width: width,
-            title: title,
-            x: coord.x,
-            y: coord.y,
-            _text_fontSize: `${FieldUtils.calculateFontSize(width, height, content, true)}`,
-            backgroundColor: opts.backgroundColor ?? '',
-            text_fontColor: opts.color,
-            contentBold: opts.fontBold,
-            textTransform: opts.fontTransform,
-            color: opts.color,
-            _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
-            borderColor: opts.borderColor,
-            borderWidth: opts.borderWidth,
-            opacity: opts.opacity,
-            hCentering: opts.contentXCentering,
-            _rotation: opts.rotation,
-        });
-
-        docWithBasicOpts._layout_hideScroll = true;
-
-        return docWithBasicOpts;
-    };
-
-    public static ImageField = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
-        const { width, height, coord } = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
-
-        const doc = Docs.Create.ImageDocument(content, {
-            isDefaultTemplateDoc: true,
-            _height: height,
-            _width: width,
-            title: title,
-            x: coord.x,
-            y: coord.y,
-            _layout_fitWidth: false,
-            backgroundColor: opts.backgroundColor ?? '',
-            _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
-            borderColor: opts.borderColor,
-            borderWidth: opts.borderWidth,
-            opacity: opts.opacity,
-            _rotation: opts.rotation,
-        });
-
-        //setTimeout(() => {doc._height = height; doc._width = width}, 10);
-
-        return doc;
-    };
-
-    public static CarouselField = (coords: { tl: [number, number]; br: [number, number] }, parentWidth: number, parentHeight: number, title: string, fields: Doc[]) => {
-        const { width, height, coord } = FieldUtils.getDimensions(coords, parentWidth, parentHeight);
-
-        const doc = Docs.Create.Carousel3DDocument(fields, { _height: height, _width: width, title: title, x: coord.x, y: coord.y, _text_fontSize: `${height / 2}` });
-
-        return doc;
-    };
-}
-
-export class TemplateLayouts {
-    public static get allTemplates(): TemplateDocInfos[] {
-        return Object.values(TemplateLayouts).filter(value => typeof value === 'object' && value !== null && 'title' in value) as TemplateDocInfos[];
-    }
-
-    public static getTemplateByTitle = (title: string): TemplateDocInfos | undefined => {
-        switch (title) {
-            case 'fourfield1':
-                return TemplateLayouts.FourField001;
-            case 'fourfield2':
-                return TemplateLayouts.FourField002;
-            // case 'fourfield3':
-            //     return TemplateLayouts.FourField003;
-            case 'fourfield4':
-                return TemplateLayouts.FourField004;
-            case 'threefield1':
-                return TemplateLayouts.ThreeField001;
-            case 'threefield2':
-                return TemplateLayouts.ThreeField002;
-            default:
-                break;
-        }
-
-        return undefined;
-    };
-
-    public static FourField001: TemplateDocInfos = {
-        title: 'fourfield1',
-        width: 416,
-        height: 700,
-        opts: {
-            backgroundColor: '#C0B887',
-            cornerRounding: 20,
-            borderColor: '#6B461F',
-            borderWidth: '12',
-        },
-        fields: [
-            {
-                tl: [-0.95, -1],
-                br: [0.95, -0.85],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY],
-                description: 'A title field for very short text that contextualizes the content.',
-                opts: {
-                    backgroundColor: 'transparent',
-                    color: '#F1F0E9',
-                    contentXCentering: 'h-center',
-                    fontBold: true,
-                },
-            },
-            {
-                tl: [-0.87, -0.83],
-                br: [0.87, 0.2],
-                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-                description: 'The main focus of the template; could be an image, long text, etc.',
-                opts: {
-                    cornerRounding: 20,
-                    borderColor: '#8F5B25',
-                    borderWidth: '6',
-                    backgroundColor: '#CECAB9',
-                },
-            },
-            {
-                tl: [-0.8, 0.2],
-                br: [0.8, 0.3],
-                types: [TemplateFieldType.TEXT],
-                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',
-                    color: '#F1F0E9',
-                },
-            },
-            {
-                tl: [-0.87, 0.37],
-                br: [0.87, 0.96],
-                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-                description: 'A medium-sized field for medium/long text.',
-                opts: {
-                    cornerRounding: 15,
-                    borderColor: '#8F5B25',
-                    borderWidth: '6',
-                    backgroundColor: '#CECAB9',
-                },
-            },
-        ],
-        decorations: [],
-    };
-
-    public static FourField002: TemplateDocInfos = {
-        title: 'fourfield2',
-        width: 425,
-        height: 778,
-        opts: {
-            backgroundColor: '#242425',
-        },
-        fields: [
-            {
-                tl: [-0.83, -0.95],
-                br: [0.83, -0.2],
-                types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
-                description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus.',
-                opts: {
-                    borderWidth: '8',
-                    borderColor: '#F8E71C',
-                },
-            },
-            {
-                tl: [-0.65, -0.2],
-                br: [0.65, -0.02],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY],
-                description: 'A tiny field for just a word or two of plain text.',
-                opts: {
-                    backgroundColor: 'transparent',
-                    color: 'white',
-                    contentXCentering: 'h-center',
-                    fontTransform: 'uppercase',
-                },
-            },
-            {
-                tl: [-0.65, 0],
-                br: [0.65, 0.18],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY],
-                description: 'A tiny field for just a word or two of plain text.',
-                opts: {
-                    backgroundColor: 'transparent',
-                    color: 'white',
-                    contentXCentering: 'h-center',
-                    fontTransform: 'uppercase',
-                },
-            },
-            {
-                tl: [-0.83, 0.2],
-                br: [0.83, 0.95],
-                types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-                description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus, or share focus with field 1.',
-                opts: {
-                    borderWidth: '8',
-                    borderColor: '#F8E71C',
-                    color: 'white',
-                    backgroundColor: '#242425',
-                },
-            },
-        ],
-        decorations: [
-            {
-                tl: [-0.8, -0.075],
-                br: [-0.525, 0.075],
-                opts: {
-                    backgroundColor: '#F8E71C',
-                    rotation: 45,
-                },
-            },
-            {
-                tl: [-0.3075, -0.0245],
-                br: [-0.2175, 0.0245],
-                opts: {
-                    backgroundColor: '#F8E71C',
-                    rotation: 45,
-                },
-            },
-            {
-                tl: [-0.045, -0.0245],
-                br: [0.045, 0.0245],
-                opts: {
-                    backgroundColor: '#F8E71C',
-                    rotation: 45,
-                },
-            },
-            {
-                tl: [0.2175, -0.0245],
-                br: [0.3075, 0.0245],
-                opts: {
-                    backgroundColor: '#F8E71C',
-                    rotation: 45,
-                },
-            },
-            {
-                tl: [0.525, -0.075],
-                br: [0.8, 0.075],
-                opts: {
-                    backgroundColor: '#F8E71C',
-                    rotation: 45,
-                },
-            },
-        ],
-    };
+        return (
+            <div className="docCreatorMenu-menu-container">
+                <div className="docCreatorMenu-option-container layout">
+                    <div className="docCreatorMenu-dropdown-hoverable">
+                        <div className="docCreatorMenu-option-title">{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}</div>
+                        <div className="docCreatorMenu-dropdown-content">
+                            {layoutOption(LayoutType.Stacked)}
+                            {layoutOption(LayoutType.Grid, undefined, () => {
+                                if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
+                            })}
+                            {layoutOption(LayoutType.Row)}
+                            {layoutOption(LayoutType.Column)}
+                            {layoutOption(LayoutType.Custom, { borderBottom: `0px` })}
+                        </div>
+                    </div>
+                    <button className="docCreatorMenu-menu-button preview-toggle" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._layoutPreview = !this._layoutPreview)))}>
+                        <FontAwesomeIcon icon={this._layoutPreview ? 'minus' : 'magnifying-glass'} />
+                    </button>
+                </div>
+                {this._layout.type ? this.layoutConfigOptions : null}
+                {this._layoutPreview ? this.layoutPreviewContents(this._menuDimensions.width * 0.75) : null}
+                {selectionBox(
+                    60,
+                    20,
+                    'repeat',
+                    undefined,
+                    repeatOptions.map(num => <option key={num} onPointerDown={() => (this._layout.repeat = num)}>{`${num}x`}</option>)
+                )}
+                <hr className="docCreatorMenu-option-divider" />
+                <div className="docCreatorMenu-general-options-container">
+                    <button
+                        className="docCreatorMenu-save-layout-button"
+                        onPointerDown={e =>
+                            setupMoveUpEvents(
+                                this,
+                                e,
+                                returnFalse,
+                                emptyFunction,
+                                undoable(clickEv => {
+                                    clickEv.stopPropagation();
+                                    if (!this._selectedTemplate) return;
+                                    const layout: DataVizTemplateLayout = {
+                                        template: this._selectedTemplate,
+                                        layout: { type: this._layout.type, xMargin: this._layout.xMargin, yMargin: this._layout.yMargin, repeat: 0 },
+                                        columns: this.columnsCount,
+                                        rows: this.rowsCount,
+                                        docsNumList: this.docsToRender,
+                                    };
+                                    if (!this._savedLayouts.includes(layout)) {
+                                        this._savedLayouts.push(layout);
+                                    }
+                                }, 'make docs')
+                            )
+                        }>
+                        <FontAwesomeIcon icon="floppy-disk" />
+                    </button>
+                    <button
+                        className="docCreatorMenu-create-docs-button"
+                        style={{ backgroundColor: this.canMakeDocs ? '' : 'rgb(155, 155, 155)', border: this.canMakeDocs ? '' : 'solid 2px rgb(180, 180, 180)' }}
+                        onPointerDown={e =>
+                            setupMoveUpEvents(
+                                this,
+                                e,
+                                returnFalse,
+                                emptyFunction,
+                                undoable(clickEv => {
+                                    clickEv.stopPropagation();
+                                    if (!this._selectedTemplate) return;
+                                    const templateInfo: DataVizTemplateInfo = { doc: this._selectedTemplate, layout: this._layout, referencePos: { x: this._pageX + 450, y: this._pageY }, columns: this.columnsCount };
+                                    this._dataViz?.createDocsFromTemplate(templateInfo);
+                                }, 'make docs')
+                            )
+                        }>
+                        <FontAwesomeIcon icon="plus" />
+                    </button>
+                </div>
+            </div>
+        );
+    }
 
-    // public static FourField003: TemplateDocInfos = {
-    //     title: 'fourfield3',
-    //     width: 477,
-    //     height: 662,
-    //     opts: {
-    //         backgroundColor: '#9E9C95'
-    //     },
-    //     fields: [{
-    //         tl: [-.875, -.9],
-    //         br: [.875, .7],
-    //         types: [TemplateFieldType.VISUAL],
-    //         sizes: [TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-    //         description: '',
-    //         opts: {
-    //             borderWidth: '15',
-    //             borderColor: '#E0E0DA',
-    //         }
-    //     }, {
-    //         tl: [-.95, .8],
-    //         br: [-.1, .95],
-    //         types: [TemplateFieldType.TEXT],
-    //         sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-    //         description: '',
-    //         opts: {
-    //             backgroundColor: 'transparent',
-    //             color: 'white',
-    //             contentXCentering: 'h-right',
-    //         }
-    //     }, {
-    //         tl: [.1, .8],
-    //         br: [.95, .95],
-    //         types: [TemplateFieldType.TEXT],
-    //         sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-    //         description: '',
-    //         opts: {
-    //             backgroundColor: 'transparent',
-    //             color: 'red',
-    //             fontTransform: 'uppercase',
-    //             contentXCentering: 'h-left'
-    //         }
-    //     }, {
-    //         tl: [0, -.9],
-    //         br: [.85, -.66],
-    //         types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
-    //         sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-    //         description: '',
-    //         opts: {
-    //             backgroundColor: 'transparent',
-    //             contentXCentering: 'h-right'
-    //         }
-    //     }],
-    //     decorations: [{
-    //         tl: [-.025, .8],
-    //         br: [.025, .95],
-    //         opts: {
-    //             backgroundColor: '#E0E0DA',
-    //         }
-    //     }]
-    // };
+    get dashboardContents() {
+        const sizes: string[] = ['tiny', 'small', 'medium', 'large', 'huge'];
 
-    public static FourField004: TemplateDocInfos = {
-        title: 'fourfield4',
-        width: 414,
-        height: 583,
-        opts: {
-            backgroundColor: '#6CCAF0',
-            borderColor: '#1088C3',
-            borderWidth: '10',
-        },
-        fields: [
-            {
-                tl: [-0.86, -0.92],
-                br: [-0.075, -0.77],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY],
-                description: 'A tiny field for just a word or two of plain text.',
-                opts: {
-                    backgroundColor: '#E2B4F5',
-                    borderWidth: '9',
-                    borderColor: '#9222F1',
-                    contentXCentering: 'h-center',
-                },
-            },
-            {
-                tl: [0.075, -0.92],
-                br: [0.86, -0.77],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY],
-                description: 'A tiny field for just a word or two of plain text.',
-                opts: {
-                    backgroundColor: '#F5B4DD',
-                    borderWidth: '9',
-                    borderColor: '#E260F3',
-                    contentXCentering: 'h-center',
-                },
-            },
-            {
-                tl: [-0.81, -0.64],
-                br: [0.81, 0.48],
-                types: [TemplateFieldType.VISUAL],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-                description: 'A large to huge field for visual content that is the main content of the template.',
-                opts: {
-                    borderWidth: '16',
-                    borderColor: '#A2BD77',
-                },
-            },
-            {
-                tl: [-0.86, 0.6],
-                br: [0.86, 0.92],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
-                description: 'A medium to large field for text that describes the visual content above',
-                opts: {
-                    borderWidth: '9',
-                    borderColor: '#F0D601',
-                    backgroundColor: '#F3F57D',
-                },
-            },
-        ],
-        decorations: [
-            {
-                tl: [-0.852, -0.67],
-                br: [0.852, 0.51],
-                opts: {
-                    backgroundColor: 'transparent',
-                    borderColor: '#007C0C',
-                    borderWidth: '10',
-                },
-            },
-        ],
-    };
+        const fieldPanel = (field: Col) => {
+            return (
+                <div className="field-panel">
+                    <div className="top-bar">
+                        <span className="field-title">{`${field.title} Field`}</span>
+                        <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))} style={{ position: 'absolute', right: '0px' }}>
+                            <FontAwesomeIcon icon="minus" />
+                        </button>
+                    </div>
+                    <div className="opts-bar">
+                        <div className="opt-box">
+                            <div className="top-bar"> Title </div>
+                            <textarea className="content" style={{ width: '100%', height: 'calc(100% - 20px)' }} defaultValue={field.title} placeholder={'Enter title'} onChange={e => this.setColTitle(field, e.target.value)} />
+                        </div>
+                        <div className="opt-box">
+                            <div className="top-bar"> Type </div>
+                            <div className="content">
+                                <span className="type-display">{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
+                                <div className="bubbles">
+                                    <input
+                                        className="bubble"
+                                        type="radio"
+                                        name="type"
+                                        onClick={() => {
+                                            this.setColType(field, TemplateFieldType.TEXT);
+                                        }}
+                                    />
+                                    <div className="text">Text</div>
+                                    <input
+                                        className="bubble"
+                                        type="radio"
+                                        name="type"
+                                        onClick={() => {
+                                            this.setColType(field, TemplateFieldType.VISUAL);
+                                        }}
+                                    />
+                                    <div className="text">File</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="sizes-box">
+                        <div className="top-bar"> Valid Sizes </div>
+                        <div className="content">
+                            <div className="bubbles">
+                                {sizes.map(size => (
+                                    <>
+                                        <input
+                                            className="bubble"
+                                            type="checkbox"
+                                            name="type"
+                                            checked={field.sizes.includes(size as TemplateFieldSize)}
+                                            onChange={e => {
+                                                this.modifyColSizes(field, size as TemplateFieldSize, e.target.checked);
+                                            }}
+                                        />
+                                        <div className="text">{size}</div>
+                                    </>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                    <div className="desc-box">
+                        <div className="top-bar"> Prompt </div>
+                        <textarea
+                            className="content"
+                            onChange={e => this.setColDesc(field, 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/prompt to help with template generation.'}
+                        />
+                    </div>
+                </div>
+            );
+        };
 
-    public static ThreeField001: TemplateDocInfos = {
-        title: 'threefield1',
-        width: 575,
-        height: 770,
-        opts: {
-            backgroundColor: '#DDD3A9',
-        },
-        fields: [
-            {
-                tl: [-0.66, -0.747],
-                br: [0.66, 0.247],
-                types: [TemplateFieldType.VISUAL],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-                description: 'A medium to large field for visual content that is the central focus.',
-                opts: {
-                    borderColor: 'yellow',
-                    borderWidth: '8',
-                    rotation: 45,
-                },
-            },
-            {
-                tl: [-0.7, 0.2],
-                br: [0.7, 0.46],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-                description: 'A very small text field for one to a few words. A good caption for the image.',
-                opts: {
-                    backgroundColor: 'transparent',
-                    contentXCentering: 'h-center',
-                },
-            },
-            {
-                tl: [-0.95, 0.5],
-                br: [0.95, 0.95],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
-                description: 'A medium to large text field for a thorough description of the image. ',
-                opts: {
-                    backgroundColor: 'transparent',
-                    color: 'white',
-                },
-            },
-        ],
-        decorations: [
-            {
-                tl: [0.2, -1.32],
-                br: [1.8, -0.66],
-                opts: {
-                    backgroundColor: '#CEB155',
-                    rotation: 45,
-                },
-            },
-            {
-                tl: [-1.8, -1.32],
-                br: [-0.2, -0.66],
-                opts: {
-                    backgroundColor: '#CEB155',
-                    rotation: 135,
-                },
-            },
-            {
-                tl: [0.33, 0.75],
-                br: [1.66, 1.25],
-                opts: {
-                    backgroundColor: '#CEB155',
-                    rotation: 135,
-                },
-            },
-            {
-                tl: [-1.66, 0.75],
-                br: [-0.33, 1.25],
-                opts: {
-                    backgroundColor: '#CEB155',
-                    rotation: 45,
-                },
-            },
-        ],
-    };
+        return (
+            <div className="docCreatorMenu-dashboard-view">
+                <div className="topbar">
+                    <button className="docCreatorMenu-menu-button section-reveal-options" onPointerDown={e => this.setUpButtonClick(e, this.addField)}>
+                        <FontAwesomeIcon icon="plus" />
+                    </button>
+                    <button className="docCreatorMenu-menu-button section-reveal-options float-right" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._menuContent = 'templates')))}>
+                        <FontAwesomeIcon icon="arrow-left" />
+                    </button>
+                </div>
+                <div className="panels-container">{this.fieldsInfos.map(field => fieldPanel(field))}</div>
+            </div>
+        );
+    }
 
-    public static ThreeField002: TemplateDocInfos = {
-        title: 'threefield2',
-        width: 477,
-        height: 662,
-        opts: {
-            backgroundColor: '#9E9C95',
-        },
-        fields: [
-            {
-                tl: [-0.875, -0.9],
-                br: [0.875, 0.7],
-                types: [TemplateFieldType.VISUAL],
-                sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
-                description: 'A medium to large visual field for the main content of the template',
-                opts: {
-                    borderWidth: '15',
-                    borderColor: '#E0E0DA',
-                },
-            },
-            {
-                tl: [0.1, 0.775],
-                br: [0.95, 0.975],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-                description: 'A very small text field for one to a few words. The content should represent a general categorization of the image.',
-                opts: {
-                    backgroundColor: 'transparent',
-                    color: '#AF0D0D',
-                    fontTransform: 'uppercase',
-                    fontBold: true,
-                    contentXCentering: 'h-left',
-                },
-            },
-            {
-                tl: [-0.95, 0.775],
-                br: [-0.1, 0.975],
-                types: [TemplateFieldType.TEXT],
-                sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
-                description: 'A very small text field for one to a few words. The content should contextualize field 2.',
-                opts: {
-                    backgroundColor: 'transparent',
-                    color: 'black',
-                    contentXCentering: 'h-right',
-                },
-            },
-        ],
-        decorations: [
-            {
-                tl: [-0.025, 0.8],
-                br: [0.025, 0.95],
-                opts: {
-                    backgroundColor: '#E0E0DA',
-                },
-            },
-        ],
-    };
+    get renderSelectedViewType() {
+        switch (this._menuContent) {
+            case 'templates':
+                return this.templatesPreviewContents;
+            case 'options':
+                return this.optionsMenuContents;
+            case 'saved':
+                return this.savedLayoutsPreviewContents;
+            case 'dashboard':
+                return this.dashboardContents;
+            default:
+                return undefined;
+        }
+    }
+
+    get resizePanes() {
+        const ref = this._ref?.getBoundingClientRect();
+        const height: number = ref?.height ?? 0;
+        const width: number = ref?.width ?? 0;
+
+        return [
+            <div key={1} className='docCreatorMenu-resizer top' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: -7}}/>, 
+            <div key={2} className='docCreatorMenu-resizer right' onPointerDown={this.onResizePointerDown} style={{height: height, left: width - 3, top: 0}}/>, 
+            <div key={3} className='docCreatorMenu-resizer bottom' onPointerDown={this.onResizePointerDown} style={{width: width, left: 0, top: height - 3}}/>, 
+            <div key={4} className='docCreatorMenu-resizer left' onPointerDown={this.onResizePointerDown} style={{height: height, left: -7, top: 0}}/>,
+            <div key={5} className='docCreatorMenu-resizer topRight' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: -10, cursor: 'nesw-resize'}}/>,
+            <div key={6} className='docCreatorMenu-resizer topLeft' onPointerDown={this.onResizePointerDown} style={{left: -10, top: -10, cursor: 'nwse-resize'}}/>,
+            <div key={7} className='docCreatorMenu-resizer bottomRight' onPointerDown={this.onResizePointerDown} style={{left: width - 5, top: height - 5, cursor: 'nwse-resize'}}/>,
+            <div key={8} className='docCreatorMenu-resizer bottomLeft' onPointerDown={this.onResizePointerDown} style={{left: -10, top: height - 5, cursor: 'nesw-resize'}}/>
+        ]; //prettier-ignore
+    }
+
+    render() {
+        const topButton = (icon: string, opt: string, func: () => void, tag: string) => {
+            return (
+                <div className={`top-button-container ${tag} ${opt === this._menuContent ? 'selected' : ''}`}>
+                    <div
+                        className="top-button-content"
+                        onPointerDown={e =>
+                            this.setUpButtonClick(e, () =>
+                                runInAction(() => {
+                                    func();
+                                })
+                            )
+                        }>
+                        <FontAwesomeIcon icon={icon as IconProp} />
+                    </div>
+                </div>
+            );
+        };
+
+        const onPreviewSelected = () => {
+            this._menuContent = 'templates';
+        };
+        const onSavedSelected = () => {
+            this._menuContent = 'dashboard';
+        };
+        const onOptionsSelected = () => {
+            this._menuContent = 'options';
+            if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
+        };
 
-    //     public static FourField002: TemplateDocInfos = {
-    //         width: 450,
-    //         height: 600,
-    //         fields: [{
-    //             tl: [-.6, -.9],
-    //             br: [.6, -.8],
-    //             types: [FieldType.TEXT],
-    //             sizes: [FieldSize.TINY]
-    //         }, {
-    //             tl: [-.9, -.7],
-    //             br: [.9, .2],
-    //             types: [FieldType.TEXT, FieldType.VISUAL],
-    //             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
-    //         }, {
-    //             tl: [-.9, .3],
-    //             br: [-.05, .9],
-    //             types: [FieldType.TEXT],
-    //             sizes: [FieldSize.TINY]
-    //         }, {
-    //             tl: [.05, .3],
-    //             br: [.9, .9],
-    //             types: [FieldType.TEXT, FieldType.VISUAL],
-    //             sizes: [FieldSize.MEDIUM, FieldSize.LARGE, FieldSize.HUGE]
-    //         }]
-    //     };
-
-    //     public static TwoFieldPlusCarousel: TemplateDocInfos = {
-    //         width: 500,
-    //         height: 600,
-    //         fields: [{
-    //             tl: [-.9, -.99],
-    //             br: [.9, -.7],
-    //             types: [FieldType.TEXT],
-    //             sizes: [FieldSize.TINY]
-    //         }, {
-    //             tl: [-.9, -.65],
-    //             br: [.9, .35],
-    //             types: [],
-    //             sizes: []
-    //         }, {
-    //             tl: [-.9, .4],
-    //             br: [.9, .95],
-    //             types: [FieldType.TEXT],
-    //             sizes: [FieldSize.TINY]
-    //         }]
-    //     };
+        return (
+            <div className="docCreatorMenu">
+                {!this._shouldDisplay ? undefined : (
+                    <div
+                        className="docCreatorMenu-cont"
+                        ref={r => (this._ref = r)}
+                        style={{
+                            display: '',
+                            left: this._pageX,
+                            top: this._pageY,
+                            width: this._menuDimensions.width,
+                            height: this._menuDimensions.height,
+                            background: SnappingManager.userBackgroundColor,
+                            color: SnappingManager.userColor,
+                        }}>
+                        {this.resizePanes}
+                        <div
+                            className="docCreatorMenu-menu"
+                            onPointerDown={e =>
+                                setupMoveUpEvents(
+                                    this,
+                                    e,
+                                    moveEv => {
+                                        this._dragging = true;
+                                        this._startPos = { x: 0, y: 0 };
+                                        this._startPos.x = moveEv.pageX - (this._ref?.getBoundingClientRect().left ?? 0);
+                                        this._startPos.y = moveEv.pageY - (this._ref?.getBoundingClientRect().top ?? 0);
+                                        document.addEventListener('pointermove', this.onDrag);
+                                        return true;
+                                    },
+                                    emptyFunction,
+                                    undoable(clickEv => {
+                                        clickEv.stopPropagation();
+                                    }, 'drag menu')
+                                )
+                            }>
+                            <div className="docCreatorMenu-top-buttons-container">
+                                {topButton('table-cells', 'templates', onPreviewSelected, 'left')}
+                                {topButton('bars', 'options', onOptionsSelected, 'middle')}
+                                {topButton('floppy-disk', 'saved', onSavedSelected, 'right')}
+                            </div>
+                            <button className="docCreatorMenu-menu-button close-menu" onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
+                                <FontAwesomeIcon icon={'minus'} />
+                            </button>
+                        </div>
+                        {this.renderSelectedViewType}
+                    </div>
+                )}
+            </div>
+        );
+    }
 }
 
 // export class ContentField extends Field {
-    
+
 // }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index f84bf6db0..428fe5acb 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1161,7 +1161,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
         return Math.max(minTextScale, this._props.PanelHeight() / (this.effectiveNativeHeight || 1)); // height-limited or unscaled
     }
     @computed private get panelWidth() {
-        return this.effectiveNativeWidth ? this.effectiveNativeWidth * this.nativeScaling: this._props.PanelWidth();
+        return this.effectiveNativeWidth ? this.effectiveNativeWidth * this.nativeScaling : this._props.PanelWidth();
     }
     @computed private get panelHeight() {
         if (this.effectiveNativeHeight && (!this.layout_fitWidth || !this.layoutDoc.layout_reflowVertical)) {
@@ -1473,7 +1473,6 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
 
     render() {
         TraceMobx();
-        const borderWidth = 50/*Number(StrCast(this.layoutDoc.layout_borderWidth).replace('px', ''))*/;
         const xshift = Math.abs(this.Xshift) <= 0.001 ? this._props.PanelWidth() : undefined;
         const yshift = Math.abs(this.Yshift) <= 0.001 ? this._props.PanelHeight() : undefined;
 
-- 
cgit v1.2.3-70-g09d2


From 9323ad30103b474e95610e97eb92916a0cf71f7b Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 4 Oct 2024 21:35:22 -0400
Subject: more lint fixes to schema view changes.

---
 src/ClientUtils.ts                                 |   5 +-
 src/client/util/LinkManager.ts                     |   2 +-
 src/client/util/Scripting.ts                       |   8 +-
 src/client/util/SelectionManager.ts                |   1 -
 src/client/views/FieldsDropdown.tsx                |   4 +-
 src/client/views/PropertiesView.tsx                |   2 +-
 .../collectionSchema/CollectionSchemaView.tsx      | 327 +++++++++++----------
 .../collectionSchema/SchemaColumnHeader.tsx        | 264 +++++++++--------
 .../collections/collectionSchema/SchemaRowBox.tsx  |  48 +--
 .../collectionSchema/SchemaTableCell.tsx           |  82 +++---
 src/client/views/global/globalScripts.ts           |   1 -
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 177 ++++++-----
 src/client/views/nodes/DocumentIcon.tsx            |  10 +-
 src/client/views/nodes/FieldView.tsx               |   2 +-
 src/client/views/nodes/LabelBox.tsx                |   4 +-
 .../views/nodes/formattedText/FormattedTextBox.tsx |   2 -
 16 files changed, 485 insertions(+), 454 deletions(-)

(limited to 'src')

diff --git a/src/ClientUtils.ts b/src/ClientUtils.ts
index 8ecbc55bf..3066499d8 100644
--- a/src/ClientUtils.ts
+++ b/src/ClientUtils.ts
@@ -317,7 +317,7 @@ export namespace ClientUtils {
     }
 
     export function lightenRGB(rVal: number, gVal: number, bVal: number, percent: number): [number, number, number] {
-        const amount = 1 + percent/100;
+        const amount = 1 + percent / 100;
         const r = rVal * amount;
         const g = gVal * amount;
         const b = bVal * amount;
@@ -347,8 +347,6 @@ export namespace ClientUtils {
         return undefined;
     }
 
-    
-
     export function GetClipboardText(): string {
         const textArea = document.createElement('textarea');
         document.body.appendChild(textArea);
@@ -725,7 +723,6 @@ export function UpdateIcon(
     const newDiv = docViewContent.cloneNode(true) as HTMLDivElement;
     newDiv.style.width = width.toString();
     newDiv.style.height = height.toString();
-    console.log('width: ' + newDiv.style.width)
     replaceCanvases(docViewContent, newDiv);
     const htmlString = new XMLSerializer().serializeToString(newDiv);
     const nativeWidth = width;
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index bbf8d9c11..e11482572 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -260,7 +260,7 @@ export function UPDATE_SERVER_CACHE() {
     Doc.MyDockedBtns.linearView_IsOpen && console.log('Set cached docs = ');
     const isFiltered = filtered.filter(doc => !Doc.IsSystem(doc));
     const strings = isFiltered.map(doc => StrCast(doc.title) + ' ' + (Doc.IsDataProto(doc) ? '(data)' : '(embedding)'));
-    //Doc.MyDockedBtns.linearView_IsOpen && strings.sort().forEach((str, i) => console.log(i.toString() + ' ' + str));
+    Doc.MyDockedBtns.linearView_IsOpen && strings.sort().forEach((str, i) => console.log(i.toString() + ' ' + str));
 
     rp.post(ClientUtils.prepend('/setCacheDocumentIds'), {
         body: {
diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index 3ba3ff4b5..b1db0bf39 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -81,6 +81,7 @@ function Run(script: string | undefined, customParams: string[], diagnostics: ts
             if (!options.editable) {
                 batch = Doc.MakeReadOnly();
             }
+
             const result = compiledFunction.apply(thisParam, params).apply(thisParam, argsArray);
             batch?.end();
             return { success: true, result };
@@ -177,13 +178,8 @@ function forEachNode(node: ts.Node, onEnter: Traverser, onExit?: Traverser, inde
     );
 }
 
-// ScriptField.CompileScript(value, {}, true, undefined, DocumentIconContainer.getTransformer());
-// //addreturn = true
-// //capturedvariables = undefined
-// //
-
 export function CompileScript(script: string, options: ScriptOptions = {}): CompileResult {
-    const captured = options.capturedVariables ?? {}; 
+    const captured = options.capturedVariables ?? {};
     const signature = Object.keys(captured).reduce((p, v) => {
         const formatCapture = (obj: FieldType | undefined) => `${v}=${obj instanceof RefField ? 'XXX' : obj?.toString()}`;
         const captureVal = captured[v];
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index c39d8ebc7..1ab84421c 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -58,7 +58,6 @@ export class SelectionManager {
     });
 
     public static DeselectAll = (except?: Doc): void => {
-        
         const found = this.Instance.SelectedViews.find(dv => dv.Document === except);
         runInAction(() => {
             if (LinkManager.Instance) {
diff --git a/src/client/views/FieldsDropdown.tsx b/src/client/views/FieldsDropdown.tsx
index 176ac96b6..407031b40 100644
--- a/src/client/views/FieldsDropdown.tsx
+++ b/src/client/views/FieldsDropdown.tsx
@@ -34,7 +34,7 @@ export class FieldsDropdown extends ObservableReactComponent<fieldsDropdownProps
         makeObservable(this);
     }
 
-    @computed get allDescendantDocs() { //!!!
+    @computed get allDescendantDocs() {
         const allDocs = new Set<Doc>();
         SearchUtil.foreachRecursiveDoc([this._props.Document], (depth, doc) => allDocs.add(doc));
         return Array.from(allDocs);
@@ -57,7 +57,7 @@ export class FieldsDropdown extends ObservableReactComponent<fieldsDropdownProps
         const filteredOptions = ['author', ...(this._newField ? [this._newField] : []), ...(this._props.addedFields ?? []), ...this.fieldsOfDocuments.filter(facet => facet[0] === facet.charAt(0).toUpperCase())];
 
         Object.entries(DocOptions)
-            .filter(opts => opts[1].filterable) //!!!
+            .filter(opts => opts[1].filterable)
             .forEach((pair: [string, FInfo]) => filteredOptions.push(pair[0]));
         const options = filteredOptions.sort().map(facet => ({ value: facet, label: facet }));
 
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 69c46052e..c6dccb4fb 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -884,7 +884,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     @computed get borderColor() {
         const doc = this.selectedDoc;
         const layoutDoc = doc ? Doc.Layout(doc) : doc;
-        return StrCast(layoutDoc);
+        return StrCast(layoutDoc.color);
     }
     set borderColor(value) { this.selectedDoc && (this.selectedDoc[DocData].color = value || undefined); } // prettier-ignore
 
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 0076caaf8..aef97e723 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,12 +1,11 @@
-/* eslint-disable no-restricted-syntax */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IconButton, Popup, PopupTrigger, Size, Type } from 'browndash-components';
-import { IReactionDisposer, ObservableMap, action, autorun, computed, makeObservable, observable, observe, override, reaction, runInAction } from 'mobx';
+import { IconButton, Size } from 'browndash-components';
+import { IReactionDisposer, Lambda, ObservableMap, action, computed, makeObservable, observable, observe, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { ClientUtils, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
-import { Doc, DocListCast, Field, FieldType, IdToDoc, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
+import { Doc, DocListCast, Field, FieldType, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
 import { DocData } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
@@ -14,10 +13,13 @@ import { ColumnType } from '../../../../fields/SchemaHeaderField';
 import { BoolCast, NumCast, StrCast } from '../../../../fields/Types';
 import { DocUtils } from '../../../documents/DocUtils';
 import { Docs, DocumentOptions, FInfo } from '../../../documents/Documents';
+import { DocumentManager } from '../../../util/DocumentManager';
 import { DragManager } from '../../../util/DragManager';
 import { dropActionType } from '../../../util/DropActionTypes';
+import { SnappingManager } from '../../../util/SnappingManager';
 import { undoBatch, undoable } from '../../../util/UndoManager';
 import { ContextMenu } from '../../ContextMenu';
+import { ContextMenuProps } from '../../ContextMenuItem';
 import { EditableView } from '../../EditableView';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { StyleProp } from '../../StyleProp';
@@ -28,25 +30,23 @@ import { FieldViewProps } from '../../nodes/FieldView';
 import { FocusViewOptions } from '../../nodes/FocusViewOptions';
 import { CollectionSubView, SubCollectionViewProps } from '../CollectionSubView';
 import './CollectionSchemaView.scss';
+import { SchemaCellField } from './SchemaCellField';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
-import { ContextMenuProps } from '../../ContextMenuItem';
-import { DocumentManager } from '../../../util/DocumentManager';
-import { SchemaCellField } from './SchemaCellField';
-import { SnappingManager } from '../../../util/SnappingManager';
 
 /**
  * The schema view offers a spreadsheet-like interface for users to interact with documents. Within the schema,
- * each doc is represented by its own row. Each column represents a field, for example the author or title fields. 
+ * each doc is represented by its own row. Each column represents a field, for example the author or title fields.
  * Users can apply varoius filters and sorts to columns to change what is displayed. The schemaview supports equations for
  * cell linking.
- * 
+ *
  * This class supports the main functionality for choosing which docs to render in the view, applying visual
- * updates to rows and columns (such as user dragging or sort-related highlighting), applying edits to multiple cells 
+ * updates to rows and columns (such as user dragging or sort-related highlighting), applying edits to multiple cells
  * at once, and applying filters and sorts to columns. It contains SchemaRowBoxes (which themselves contain SchemaTableCells,
  * and SchemaCellFields) and SchemaColumnHeaders.
  */
 
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
 export const FInfotoColType: { [key: string]: ColumnType } = {
@@ -63,7 +63,7 @@ const defaultColumnKeys: string[] = ['title', 'type', 'author', 'author_date', '
 
 @observer
 export class CollectionSchemaView extends CollectionSubView() {
-    private _keysDisposer: any;
+    private _keysDisposer?: Lambda;
     private _disposers: { [name: string]: IReactionDisposer } = {};
     private _previewRef: HTMLDivElement | null = null;
     private _makeNewColumn: boolean = false;
@@ -71,13 +71,14 @@ export class CollectionSchemaView extends CollectionSubView() {
     private _tableContentRef: HTMLDivElement | null = null;
     private _menuTarget = React.createRef<HTMLDivElement>();
     private _headerRefs: SchemaColumnHeader[] = [];
-    private _eqHighlightColors: Array<[{r: number, g: number, b: number}, {r: number, g: number, b: number}]> = [];
+    private _eqHighlightColors: Array<[{ r: number; g: number; b: number }, { r: number; g: number; b: number }]> = [];
+    private _oldWheel: HTMLDivElement | null = null;
 
     constructor(props: SubCollectionViewProps) {
         super(props);
         makeObservable(this);
         const lightenedColor = (r: number, g: number, b:number) => { const lightened = ClientUtils.lightenRGB(r, g, b, 165); return {r: lightened[0], g: lightened[1], b: lightened[2]}} // prettier-ignore
-        const colors = (r: number, g: number, b: number): [any, any] => {return [{r: r, g: g, b: b}, lightenedColor(r, g, b)]} // prettier-ignore
+        const colors = (r: number, g: number, b: number):[{r:number,g:number,b:number},{r:number,g:number,b:number}] => ([{r, g, b}, lightenedColor(r, g, b)]); // prettier-ignore
         this._eqHighlightColors.push(colors(70, 150, 50));
         this._eqHighlightColors.push(colors(180, 70, 20));
         this._eqHighlightColors.push(colors(70, 50, 150));
@@ -122,8 +123,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _highlightedCellsInfo: Array<[doc: Doc, field: string]> = [];
     @observable _cellHighlightColors: ObservableMap = new ObservableMap<string, string[]>();
     @observable _containedDocs: Doc[] = []; //all direct children of the schema
-    @observable _referenceSelectMode: {enabled: boolean, currEditing: SchemaCellField | undefined} = {enabled: false, currEditing: undefined}
-    
+    @observable _referenceSelectMode: { enabled: boolean; currEditing: SchemaCellField | undefined } = { enabled: false, currEditing: undefined };
+
     // target HTMLelement portal for showing a popup menu to edit cell values.
     public get MenuTarget() {
         return this._menuTarget.current;
@@ -217,15 +218,17 @@ export class CollectionSchemaView extends CollectionSubView() {
             true
         );
         this._disposers.docdata = reaction(
-            () => DocListCast(this.dataDoc[this.fieldKey]), 
-            (docs) => this._containedDocs = docs,
-            {fireImmediately: true}
-        )
+            () => DocListCast(this.dataDoc[this.fieldKey]),
+            docs => (this._containedDocs = docs),
+            { fireImmediately: true }
+        );
         this._disposers.sortHighlight = reaction(
-            () => [this.sortField, this._containedDocs, this._selectedDocs, this._highlightedCellsInfo], 
-            () => {this.sortField && setTimeout(() => this.highlightSortedColumn())},
-            {fireImmediately: true}
-        )
+            () => [this.sortField, this._containedDocs, this._selectedDocs, this._highlightedCellsInfo],
+            () => {
+                this.sortField && setTimeout(() => this.highlightSortedColumn());
+            },
+            { fireImmediately: true }
+        );
     }
 
     componentWillUnmount() {
@@ -239,8 +242,8 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     removeDoc = (doc: Doc) => {
         this.removeDocument(doc);
-        this._containedDocs = this._containedDocs.filter(d => d !== doc)
-    }
+        this._containedDocs = this._containedDocs.filter(d => d !== doc);
+    };
 
     rowIndex = (doc: Doc) => this.docsWithDrag.docs.indexOf(doc);
 
@@ -301,7 +304,9 @@ export class CollectionSchemaView extends CollectionSubView() {
                     }
                     break;
                 case 'Backspace': {
-                    undoable(() => {this._selectedDocs.forEach(d => this._containedDocs.includes(d) && this.removeDoc(d));}, 'delete schema row');
+                    undoable(() => {
+                        this._selectedDocs.forEach(d => this._containedDocs.includes(d) && this.removeDoc(d));
+                    }, 'delete schema row');
                     break;
                 }
                 case 'Escape': {
@@ -319,7 +324,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     addRow = (doc: Doc | Doc[]) => this.addDocument(doc);
 
     @undoBatch
-    changeColumnKey = (index: number, newKey: string, defaultVal?: any) => {
+    changeColumnKey = (index: number, newKey: string, defaultVal?: FieldType) => {
         if (!this.documentKeys.includes(newKey)) this.addNewKey(newKey, defaultVal);
 
         const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it.
@@ -328,9 +333,10 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @undoBatch
-    addColumn = (index: number = 0, key?: string, defaultVal?: any) => {
+    addColumn = (index: number = 0, keyIn?: string, defaultVal?: FieldType) => {
+        let key = keyIn;
         if (key && !this.documentKeys.includes(key)) this.addNewKey(key, defaultVal);
-        
+
         const newColWidth = this.tableWidth / (this.storedColumnWidths.length + 1);
         const currWidths = this.storedColumnWidths.slice();
         currWidths.splice(index, 0, newColWidth);
@@ -345,11 +351,11 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    addNewKey = (key: string, defaultVal: any) => {
+    addNewKey = (key: string, defaultVal: FieldType | undefined) => {
         this.childDocs.forEach(doc => {
             doc[DocData][key] = defaultVal;
         });
-    }
+    };
 
     @undoBatch
     removeColumn = (index: number) => {
@@ -365,13 +371,13 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         const currKeys = this.columnKeys.slice();
         currKeys.splice(index, 1);
-        this.layoutDoc.schema_columnKeys = new List<string>(currKeys); 
+        this.layoutDoc.schema_columnKeys = new List<string>(currKeys);
 
         this._colEles.splice(index, 1);
     };
 
     @action
-    startResize = (e: any, index: number, rightSide: boolean) => {
+    startResize = (e: React.PointerEvent, index: number, rightSide: boolean) => {
         this._displayColumnWidths = this.storedColumnWidths;
         setupMoveUpEvents(this, e, moveEv => this.resizeColumn(moveEv, index, rightSide), this.finishResize, emptyFunction);
     };
@@ -384,8 +390,8 @@ export class CollectionSchemaView extends CollectionSubView() {
 
             let change = e.movementX;
 
-            if (rightSide && (index !== this._displayColumnWidths.length - 1)) {
-                growing = change < 0 ? index + 1: index;
+            if (rightSide && index !== this._displayColumnWidths.length - 1) {
+                growing = change < 0 ? index + 1 : index;
                 shrinking = change < 0 ? index : index + 1;
             } else if (index !== 0) {
                 growing = change < 0 ? index : index - 1;
@@ -432,7 +438,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         this.closeNewColumnMenu();
         this._headerRefs.forEach(ref => ref.toggleEditing(false));
         this._draggedColIndex = index;
-        this.setColDrag(true);  
+        this.setColDrag(true);
         const dragData = new DragManager.ColumnDragData(index);
         const dragEles = [this._colEles[index]];
         this.childDocs.forEach(doc => dragEles.push(this._rowEles.get(doc).children[1].children[index]));
@@ -446,7 +452,7 @@ export class CollectionSchemaView extends CollectionSubView() {
      * @returns column index
      */
     findColDropIndex = (mouseX: number) => {
-        const xOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0,0)[0] + CollectionSchemaView._rowMenuWidth; 
+        const xOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0, 0)[0] + CollectionSchemaView._rowMenuWidth;
         let index: number | undefined;
         this.displayColumnWidths.reduce((total, curr, i) => {
             if (total <= mouseX && total + curr >= mouseX) {
@@ -507,12 +513,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._colEles.forEach((colRef, i) => {
             const edgeStyle = i === index ? `solid 2px ${Colors.MEDIUM_BLUE}` : '';
             const sorted = i === this.columnKeys.indexOf(this.sortField);
-            const cellEles = [
-                colRef,
-                ...this.docsWithDrag.docs 
-                    .filter(doc => (i !== this._selectedCol || !this._selectedDocs.includes(doc)) && !sorted)
-                    .map(doc => this._rowEles.get(doc).children[1].children[i]),
-            ];
+            const cellEles = [colRef, ...this.docsWithDrag.docs.filter(doc => (i !== this._selectedCol || !this._selectedDocs.includes(doc)) && !sorted).map(doc => this._rowEles.get(doc).children[1].children[i])];
             cellEles.forEach(ele => {
                 if (sorted || this.highlightedCells.includes(ele)) return;
                 ele.style.borderTop = ele === cellEles[0] ? edgeStyle : '';
@@ -533,14 +534,14 @@ export class CollectionSchemaView extends CollectionSubView() {
 
             this.childDocs.forEach(doc => {
                 const cell = this._rowEles.get(doc).children[1].children[i];
-                if (!(this._selectedDocs.includes(doc) && i === this._selectedCol) && !(this.highlightedCells.includes(cell)) && cell) {
+                if (!(this._selectedDocs.includes(doc) && i === this._selectedCol) && !this.highlightedCells.includes(cell) && cell) {
                     cell.style.borderLeft = '';
                     cell.style.borderRight = '';
                     cell.style.borderBottom = '';
                 }
             });
         });
-    }
+    };
 
     /**
      * Applies a gradient highlight to a sorted column. The direction of the gradient depends
@@ -552,10 +553,10 @@ export class CollectionSchemaView extends CollectionSubView() {
         let index = -1;
         const highlightColors: string[] = [];
         const rowCount: number = this._containedDocs.length + 1;
-        if (field || this.sortField){
+        if (field || this.sortField) {
             index = this.columnKeys.indexOf(field || this.sortField);
-            const increment: number = 110/rowCount;
-            for (let i = 1; i <= rowCount; ++i){
+            const increment: number = 110 / rowCount;
+            for (let i = 1; i <= rowCount; ++i) {
                 const adjColor = ClientUtils.lightenRGB(16, 66, 230, increment * i);
                 highlightColors.push(`solid 2px rgb(${adjColor[0]}, ${adjColor[1]}, ${adjColor[2]})`);
             }
@@ -564,25 +565,20 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._colEles.forEach((colRef, i) => {
             const highlight: boolean = i === index;
             const desc: boolean = descending || this.sortDesc;
-            const cellEles = [
-                colRef,
-                ...this.docsWithDrag.docs 
-                    .filter(doc => (i !== this._selectedCol || !this._selectedDocs.includes(doc)))
-                    .map(doc => this._rowEles.get(doc).children[1].children[i]),
-            ];
+            const cellEles = [colRef, ...this.docsWithDrag.docs.filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc)).map(doc => this._rowEles.get(doc).children[1].children[i])];
             const cellCount = cellEles.length;
-            for (let ele = 0; ele < cellCount; ++ele){
+            for (let ele = 0; ele < cellCount; ++ele) {
                 const currCell = cellEles[ele];
                 if (this.highlightedCells.includes(currCell)) continue;
-                const style = highlight ? desc ? `${highlightColors[cellCount - 1 - ele]}` : `${highlightColors[ele]}` : '';
+                const style = highlight ? (desc ? `${highlightColors[cellCount - 1 - ele]}` : `${highlightColors[ele]}`) : '';
                 currCell.style.borderLeft = style;
                 currCell.style.borderRight = style;
             }
-            cellEles[0].style.borderTop = highlight ? desc ? `${highlightColors[cellCount - 1]}` : `${highlightColors[0]}` : '';
-            if (!(this._selectedDocs.includes(this.docsWithDrag.docs[this.docsWithDrag.docs.length - 1]) && this._selectedCol === index) && !this.highlightedCells.includes(cellEles[cellCount - 1])) cellEles[cellCount - 1].style.borderBottom = highlight ? desc ? `${highlightColors[0]}` :  `${highlightColors[cellCount - 1]}` : ''; 
+            cellEles[0].style.borderTop = highlight ? (desc ? `${highlightColors[cellCount - 1]}` : `${highlightColors[0]}`) : '';
+            if (!(this._selectedDocs.includes(this.docsWithDrag.docs[this.docsWithDrag.docs.length - 1]) && this._selectedCol === index) && !this.highlightedCells.includes(cellEles[cellCount - 1]))
+                cellEles[cellCount - 1].style.borderBottom = highlight ? (desc ? `${highlightColors[0]}` : `${highlightColors[cellCount - 1]}`) : '';
         });
-        
-    }
+    };
 
     /**
      * Gets the html element representing a cell so that styles can be applied on it.
@@ -594,35 +590,40 @@ export class CollectionSchemaView extends CollectionSubView() {
         const index = this.columnKeys.indexOf(fieldKey);
         const cell = this._rowEles.get(doc).children[1].children[index];
         return cell;
-    }
+    };
 
     /**
      * Given text in a cell, find references to other cells (for equations).
      * @param text the text in the cell
-     * @returns the html cell elements referenced in the text. 
+     * @returns the html cell elements referenced in the text.
      */
     findCellRefs = (text: string) => {
         const pattern = /(this|d(\d+))\.(\w+)/g;
-        interface Match { docRef: string; field: string; }
+        interface Match {
+            docRef: string;
+            field: string;
+        }
 
         const matches: Match[] = [];
         let match: RegExpExecArray | null;
 
         while ((match = pattern.exec(text)) !== null) {
-            const docRef = match[1] === 'this' ? match[1] : match[2]; 
+            const docRef = match[1] === 'this' ? match[1] : match[2];
             matches.push({ docRef, field: match[3] });
         }
 
-        const cells: Array<any> = [];
-        matches.forEach((match: Match) => {
-            const {docRef, field} = match;
+        const cells: [Doc, string][] = [];
+        matches.forEach((m: Match) => {
+            const { docRef, field } = m;
             const docView = DocumentManager.Instance.DocumentViews[Number(docRef)];
             const doc = docView?.Document ?? undefined;
-            if (this.columnKeys.includes(field) && this._containedDocs.includes(doc)) {cells.push([doc, field])}
-        })
+            if (this.columnKeys.includes(field) && this._containedDocs.includes(doc)) {
+                cells.push([doc, field]);
+            }
+        });
 
         return cells;
-    }
+    };
 
     /**
      * Determines whether the rows above or below a given row have been
@@ -636,7 +637,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const selectedBelow: boolean = this._selectedDocs.includes(docs[index + 1]);
         const selectedAbove: boolean = this._selectedDocs.includes(docs[index - 1]);
         return [selectedAbove, selectedBelow];
-    }
+    };
 
     @action
     removeCellHighlights = () => {
@@ -649,9 +650,10 @@ export class CollectionSchemaView extends CollectionSubView() {
                 if (this.selectionOverlap(doc)[0]) cell.style.borderTop = '';
                 if (this.selectionOverlap(doc)[1]) cell.style.borderBottom = '';
             } else cell.style.border = '';
-            cell.style.backgroundColor = '';});
+            cell.style.backgroundColor = '';
+        });
         this._highlightedCellsInfo = [];
-    }
+    };
 
     restoreCellHighlights = () => {
         this._highlightedCellsInfo.forEach(info => {
@@ -665,10 +667,10 @@ export class CollectionSchemaView extends CollectionSubView() {
             cell.style.borderRight = color;
             cell.style.borderBottom = color;
         });
-    }
+    };
 
     /**
-     * Highlights cells based on equation text in the cell currently being edited. 
+     * Highlights cells based on equation text in the cell currently being edited.
      * Does not highlight selected cells (that's done directly in SchemaTableCell).
      * @param text the equation
      */
@@ -682,7 +684,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             const info = this._highlightedCellsInfo[i];
             const color = this._eqHighlightColors[i % 10];
             const colorStrings = [`solid 2px rgb(${color[0].r}, ${color[0].g}, ${color[0].b})`, `rgb(${color[1].r}, ${color[1].g}, ${color[1].b})`];
-            const doc = info[0]; 
+            const doc = info[0];
             const field = info[1];
             const key = `${doc[Id]}_${field}`;
             const cell = this.getCellElement(doc, field);
@@ -690,7 +692,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             cell.style.border = colorStrings[0];
             cell.style.backgroundColor = colorStrings[1];
         }
-    }
+    };
 
     //Used in SchemaRowBox
     @action
@@ -718,7 +720,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         this.deselectAllCells();
     };
 
-
     selectRow = (doc: Doc, lastSelected: Doc) => {
         const index = this.rowIndex(doc);
         const lastSelectedRow = this.rowIndex(lastSelected);
@@ -737,12 +738,12 @@ export class CollectionSchemaView extends CollectionSubView() {
         if (!doc) return;
         const docIndex = DocumentView.getDocViewIndex(doc);
         const field = this.columnKeys[col];
-        const refToAdd = `d${docIndex}.${field}`
-        const editedField = this._referenceSelectMode.currEditing ? this._referenceSelectMode.currEditing as SchemaCellField : null;
+        const refToAdd = `d${docIndex}.${field}`;
+        const editedField = this._referenceSelectMode.currEditing ? (this._referenceSelectMode.currEditing as SchemaCellField) : null;
         editedField?.insertText(refToAdd, true);
         editedField?.setupRefSelect(false);
         return;
-    }
+    };
 
     @action
     selectCell = (doc: Doc, col: number, shiftKey: boolean, ctrlKey: boolean) => {
@@ -787,7 +788,9 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
         if (de.complete.columnDragData) {
-            setTimeout(() => {this.setColDrag(false);});
+            setTimeout(() => {
+                this.setColDrag(false);
+            });
             e.stopPropagation();
             return true;
         }
@@ -849,9 +852,9 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    setKey = (key: string, defaultVal?: any, index?: number) => {
+    setKey = (key: string, defaultVal?: string, index?: number) => {
         if (this.columnKeys.includes(key)) return;
-    
+
         if (this._makeNewColumn) {
             this.addColumn(this.columnKeys.indexOf(key), key, defaultVal);
             this._makeNewColumn = false;
@@ -861,14 +864,14 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     /**
-     * Used in SchemaRowBox to set 
-     * @param key 
-     * @param value 
-     * @returns 
+     * Used in SchemaRowBox to set
+     * @param key
+     * @param value
+     * @returns
      */
     setCellValues = (key: string, value: string) => {
-        if (this._selectedCells.length === 1) this.docs.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); 
-        else this._selectedCells.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value)); 
+        if (this._selectedCells.length === 1) this.docs.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value));
+        else this._selectedCells.forEach(doc => !doc._lockedSchemaEditing && Doc.SetField(doc, key, value));
         return true;
     };
 
@@ -912,34 +915,36 @@ export class CollectionSchemaView extends CollectionSubView() {
         const cm = ContextMenu.Instance;
         cm.clearItems();
 
-        const fieldSortedAsc = (this.sortField === this.columnKeys[index] && !this.sortDesc);
-        const fieldSortedDesc = (this.sortField === this.columnKeys[index] && this.sortDesc);
-        const revealOptions = cm.findByDescription('Sort column')
-        const sortOptions: ContextMenuProps[] = revealOptions && revealOptions && 'subitems' in revealOptions ? revealOptions.subitems ?? [] : [];
+        const fieldSortedAsc = this.sortField === this.columnKeys[index] && !this.sortDesc;
+        const fieldSortedDesc = this.sortField === this.columnKeys[index] && this.sortDesc;
+        const revealOptions = cm.findByDescription('Sort column');
+        const sortOptions: ContextMenuProps[] = revealOptions && revealOptions && 'subitems' in revealOptions ? (revealOptions.subitems ?? []) : [];
         sortOptions.push({
-            description: 'Sort A-Z',     
+            description: 'Sort A-Z',
             event: () => {
-                this.setColumnSort(undefined); 
+                this.setColumnSort(undefined);
                 const field = this.columnKeys[index];
                 this._containedDocs = this.sortDocs(field, false);
                 setTimeout(() => {
                     this.highlightSortedColumn(field, false);
-                    setTimeout(() => this.highlightSortedColumn(), 480); 
+                    setTimeout(() => this.highlightSortedColumn(), 480);
                 }, 20);
-            },     
-            icon: 'arrow-down-a-z',});
+            },
+            icon: 'arrow-down-a-z',
+        });
         sortOptions.push({
-            description: 'Sort Z-A',     
+            description: 'Sort Z-A',
             event: () => {
-                this.setColumnSort(undefined); 
+                this.setColumnSort(undefined);
                 const field = this.columnKeys[index];
                 this._containedDocs = this.sortDocs(field, true);
                 setTimeout(() => {
                     this.highlightSortedColumn(field, true);
-                    setTimeout(() => this.highlightSortedColumn(), 480); 
+                    setTimeout(() => this.highlightSortedColumn(), 480);
                 }, 20);
-            },     
-            icon: 'arrow-up-z-a'});
+            },
+            icon: 'arrow-up-z-a',
+        });
         sortOptions.push({
             description: 'Persistent Sort A-Z',     
             event: () => {
@@ -964,7 +969,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                 }
             },     
             icon: fieldSortedDesc ? 'lock' : 'lock-open'}); // prettier-ignore
-    
+
         cm.addItem({
             description: `Change field`,
             event: () => this.openNewColumnMenu(index, false),
@@ -975,12 +980,12 @@ export class CollectionSchemaView extends CollectionSubView() {
             event: () => this.openFilterMenu(index),
             icon: 'filter',
         });
-        cm.addItem({ 
-            description: 'Sort column', 
-            addDivider: false, 
-            noexpand: true, 
-            subitems: sortOptions, 
-            icon: 'sort' 
+        cm.addItem({
+            description: 'Sort column',
+            addDivider: false,
+            noexpand: true,
+            subitems: sortOptions,
+            icon: 'sort',
         });
         cm.addItem({
             description: 'Add column to left',
@@ -1068,7 +1073,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @computed get renderColumnMenu() {
         const x = this._columnMenuIndex! === -1 ? 0 : this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth);
         return (
-            <div className="schema-column-menu" style={{ left: x,  maxWidth: `${Math.max(this._colEles[this._columnMenuIndex ?? 0].offsetWidth, 150)}px` }}>
+            <div className="schema-column-menu" style={{ left: x, maxWidth: `${Math.max(this._colEles[this._columnMenuIndex ?? 0].offsetWidth, 150)}px` }}>
                 {this.keysDropdown}
             </div>
         );
@@ -1095,13 +1100,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             }
             return (
                 <div key={key} className="schema-filter-option">
-                    <input 
-                        type="checkbox"
-                        onPointerDown={e => e.stopPropagation()}
-                        onClick={e => e.stopPropagation()}
-                        onChange={e => Doc.setDocFilter(this.Document, columnKey, key, e.target.checked ? 'check' : 'remove')}
-                        checked={bool}
-                    />
+                    <input type="checkbox" onPointerDown={e => e.stopPropagation()} onClick={e => e.stopPropagation()} onChange={e => Doc.setDocFilter(this.Document, columnKey, key, e.target.checked ? 'check' : 'remove')} checked={bool} />
                     <span style={{ paddingLeft: 4 }}>{key}</span>
                 </div>
             );
@@ -1111,7 +1110,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @computed get renderFilterMenu() {
         const x = this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._filterColumnIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth);
         return (
-            <div className="schema-filter-menu" style={{ left: x, maxWidth: `${Math.max(this._colEles[this._columnMenuIndex ?? 0].offsetWidth, 150)}px`}}>
+            <div className="schema-filter-menu" style={{ left: x, maxWidth: `${Math.max(this._colEles[this._columnMenuIndex ?? 0].offsetWidth, 150)}px` }}>
                 <input className="schema-filter-input" type="text" value={this._filterSearchValue} onKeyDown={this.onFilterKeyDown} onChange={this.updateFilterSearch} onPointerDown={e => e.stopPropagation()} />
                 {this.renderFilterOptions}
                 <div
@@ -1129,13 +1128,13 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action setColDrag = (beingDragged: boolean) => {
         this._colBeingDragged = beingDragged;
         !beingDragged && this.removeDragHighlight();
-    }
+    };
 
     @action updateMouseCoordinates = (e: React.PointerEvent<HTMLDivElement>) => {
         const prevX = this._mouseCoordinates.x;
         const prevY = this._mouseCoordinates.y;
         this._mouseCoordinates = { x: e.clientX, y: e.clientY, prevX: prevX, prevY: prevY };
-    }
+    };
 
     @action
     onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
@@ -1158,9 +1157,9 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     /**
      * Gets docs contained by collections within the schema. Currently defunct.
-     * @param doc 
-     * @param displayed 
-     * @returns 
+     * @param doc
+     * @param displayed
+     * @returns
      */
     // subCollectionDocs = (doc: Doc, displayed: boolean) => {
     //     const childDocs = DocListCast(doc[Doc.LayoutFieldKey(doc)]);
@@ -1203,8 +1202,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                             subDocs.forEach(t => {
                                 const docFieldKey = Doc.LayoutFieldKey(t);
                                 const isSubDocAnnotatable = t[docFieldKey] instanceof List && !(t[docFieldKey] as List<Doc>)?.some(ele => !(ele instanceof Doc));
-                                notFiltered =
-                                    notFiltered || ((!searchDocs.length || searchDocs.includes(t)) && ((!childDocFilters.length && !childFiltersByRanges.length) || DocUtils.FilterDocs([t], childDocFilters, childFiltersByRanges, d).length));
+                                notFiltered = notFiltered || ((!searchDocs.length || searchDocs.includes(t)) && ((!childDocFilters.length && !childFiltersByRanges.length) || DocUtils.FilterDocs([t], childDocFilters, childFiltersByRanges, d).length));
                                 DocListCast(t[isSubDocAnnotatable ? docFieldKey + '_annotations' : docFieldKey]).forEach(newdoc => newarray.push(newdoc));
                                 isSubDocAnnotatable && DocListCast(t[docFieldKey + '_sidebar']).forEach(newdoc => newarray.push(newdoc));
                             });
@@ -1231,19 +1229,19 @@ export class CollectionSchemaView extends CollectionSubView() {
         //     docsFromChildren = docsFromChildren.concat(docsNotAlreadyDisplayed);
         // });
 
-        return this.filteredDocs;;
+        return this.filteredDocs;
     }
 
     /**
-     * Sorts docs first alphabetically and then numerically. 
+     * Sorts docs first alphabetically and then numerically.
      * @param field the column being sorted
      * @param desc whether the sort is ascending or descending
      * @param persistent whether the sort is applied persistently or is one-shot
-     * @returns 
+     * @returns
      */
     sortDocs = (field: string, desc: boolean, persistent?: boolean) => {
         const numbers: Doc[] = [];
-        const strings: Doc[] = []; 
+        const strings: Doc[] = [];
 
         this.docs.forEach(doc => {
             if (!isNaN(Number(Field.toString(doc[field] as FieldType)))) numbers.push(doc);
@@ -1253,25 +1251,26 @@ export class CollectionSchemaView extends CollectionSubView() {
         const sortedNums = numbers.sort((numOne, numTwo) => {
             const numA = Number(Field.toString(numOne[field] as FieldType));
             const numB = Number(Field.toString(numTwo[field] as FieldType));
-            return desc? numA - numB : numB - numA;
+            return desc ? numA - numB : numB - numA;
         });
 
-        const collator = new Intl.Collator(undefined, {sensitivity: 'base'});
+        const collator = new Intl.Collator(undefined, { sensitivity: 'base' });
         let sortedStrings;
-        if (!desc) {sortedStrings = strings.slice().sort((docA, docB) => collator.compare(Field.toString(docA[field] as FieldType), Field.toString(docB[field] as FieldType)));
+        if (!desc) {
+            sortedStrings = strings.slice().sort((docA, docB) => collator.compare(Field.toString(docA[field] as FieldType), Field.toString(docB[field] as FieldType)));
         } else sortedStrings = strings.slice().sort((docB, docA) => collator.compare(Field.toString(docA[field] as FieldType), Field.toString(docB[field] as FieldType)));
 
         const sortedDocs = desc ? sortedNums.concat(sortedStrings) : sortedStrings.concat(sortedNums);
         if (!persistent) this._containedDocs = sortedDocs;
         return sortedDocs;
-    }
-    
+    };
+
     /**
      * Returns all docs minus those currently being dragged by the user.
      */
     @computed get docsWithDrag() {
         let docs = this.docs.slice();
-        if (this.sortField){
+        if (this.sortField) {
             const field = StrCast(this.layoutDoc.sortField);
             const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort
             docs = this.sortDocs(field, desc, true);
@@ -1290,13 +1289,17 @@ export class CollectionSchemaView extends CollectionSubView() {
     previewWidthFunc = () => this.previewWidth;
     onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
     displayedDocsFunc = () => this.docsWithDrag.docs;
-    _oldWheel: any;
     render() {
         return (
-            <div className="collectionSchemaView" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} 
-            onDrop={this.onExternalDrop.bind(this)} 
-            onPointerMove={e => this.onPointerMove(e)} 
-            onPointerDown={() => {this.closeNewColumnMenu(); this.setColDrag(false)}}>
+            <div
+                className="collectionSchemaView"
+                ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)}
+                onDrop={this.onExternalDrop.bind(this)}
+                onPointerMove={e => this.onPointerMove(e)}
+                onPointerDown={() => {
+                    this.closeNewColumnMenu();
+                    this.setColDrag(false);
+                }}>
                 <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }} />
                 <div
                     className="schema-table"
@@ -1310,30 +1313,29 @@ export class CollectionSchemaView extends CollectionSubView() {
                     <div className="schema-header-row" style={{ height: this.rowHeightFunc() }}>
                         <div className="row-menu" style={{ width: CollectionSchemaView._rowMenuWidth }}>
                             <IconButton
-                            tooltip="Add a new key"
-                            icon={ <FontAwesomeIcon icon="plus" size='lg'/>}
-                            size={Size.XSMALL}
-                            color={'black'}
-                            onPointerDown={e =>
-                                setupMoveUpEvents(
-                                    this,
-                                    e,
-                                    returnFalse,
-                                    emptyFunction,
-                                    undoable(clickEv => {
-                                        clickEv.stopPropagation();
-                                        this.addColumn()
-                                    }, 'add key to schema')
-                                )
-                            }
+                                tooltip="Add a new key"
+                                icon={<FontAwesomeIcon icon="plus" size="lg" />}
+                                size={Size.XSMALL}
+                                color={'black'}
+                                onPointerDown={e =>
+                                    setupMoveUpEvents(
+                                        this,
+                                        e,
+                                        returnFalse,
+                                        emptyFunction,
+                                        undoable(clickEv => {
+                                            clickEv.stopPropagation();
+                                            this.addColumn();
+                                        }, 'add key to schema')
+                                    )
+                                }
                             />
                         </div>
                         {this.columnKeys.map((key, index) => (
                             <SchemaColumnHeader
-                                // eslint-disable-next-line react/no-array-index-key
                                 //cleanupField={this.cleanupComputedField}
                                 ref={r => r && this._headerRefs.push(r)}
-                                keysDropdown={(this.keysDropdown)}
+                                keysDropdown={this.keysDropdown}
                                 schemaView={this}
                                 columnWidth={() => CollectionSchemaView._minColWidth} //TODO: update
                                 Document={this.Document}
@@ -1445,7 +1447,6 @@ class CollectionSchemaViewDoc extends ObservableReactComponent<CollectionSchemaV
         return (
             <DocumentView
                 key={this._props.doc[Id]}
-                // eslint-disable-next-line react/jsx-props-no-spreading
                 {...this._props.schema._props}
                 containerViewPath={this._props.schema.childContainerViewPath}
                 LayoutTemplate={this._props.schema._props.childLayoutTemplate}
@@ -1498,4 +1499,4 @@ class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsP
             </div>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index c5cdac8af..47918f9c1 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unused-prop-types */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -21,7 +20,8 @@ import { undoable } from '../../../util/UndoManager';
 import { IconButton, Size } from 'browndash-components';
 
 export enum SchemaFieldType {
-    Header, Cell
+    Header,
+    Cell,
 }
 
 export interface SchemaColumnHeaderProps {
@@ -49,7 +49,6 @@ export interface SchemaColumnHeaderProps {
 
 @observer
 export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> {
-
     private _inputRef: EditableView | null = null;
     @observable _altTitle: string | undefined = undefined;
     @observable _showMenuIcon: boolean = false;
@@ -58,18 +57,26 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
         return this._props.columnKeys[this._props.columnIndex];
     }
 
-    constructor(props: SchemaColumnHeaderProps){
+    constructor(props: SchemaColumnHeaderProps) {
         super(props);
         makeObservable(this);
     }
-    
+
     getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
-    setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
-    @action updateAlt = (newAlt: string) => {this._altTitle = newAlt};
-    updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)};
-    openKeyDropdown = () => {!this._props.schemaView._colBeingDragged && this._props.schemaView.openNewColumnMenu(this._props.columnIndex, false)};
+    setColumnValues = (field: string, defaultValue: string) => {
+        this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);
+    };
+    @action updateAlt = (newAlt: string) => {
+        this._altTitle = newAlt;
+    };
+    updateKeyDropdown = (value: string) => {
+        this._props.schemaView.updateKeySearch(value);
+    };
+    openKeyDropdown = () => {
+        !this._props.schemaView._colBeingDragged && this._props.schemaView.openNewColumnMenu(this._props.columnIndex, false);
+    };
     toggleEditing = (editing: boolean) => {
-        this._inputRef?.setIsEditing(editing); 
+        this._inputRef?.setIsEditing(editing);
         this._inputRef?.setIsFocused(editing);
     };
 
@@ -110,139 +117,156 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
         const cursor = !readOnly ? 'text' : 'default';
         const pointerEvents: 'all' | 'none' = 'all';
         return { color, fieldProps, cursor, pointerEvents };
-    }
+    };
 
     @computed get editableView() {
-        const { color, fieldProps, pointerEvents } = this.renderProps(this._props); 
-
-        return <div className='schema-column-edit-wrapper' onPointerUp={() => {
-            SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown();
-            this._props.schemaView.deselectAllCells();
-        }}
-        style={{
-            color,
-            width: '100%',
-            pointerEvents,
-        }}>
-            <EditableView
-                ref={r => {this._inputRef = r; this._props.autoFocus && r?.setIsFocused(true)}}
-                oneLine={true}
-                allowCRs={false}
-                contents={''}
-                onClick={this.openKeyDropdown}
-                fieldContents={fieldProps}
-                editing={undefined}  
-                placeholder={'Add key'}
-                updateAlt={this.updateAlt} // alternate title to display
-                updateSearch={this.updateKeyDropdown}
-                schemaFieldType={SchemaFieldType.Header} 
-                GetValue={() => {
-                    if (SchemaColumnHeader.isDefaultField(this.fieldKey)) return '';
-                    else if (this._altTitle) return this._altTitle;
-                    else return this.fieldKey;
+        const { color, fieldProps, pointerEvents } = this.renderProps(this._props);
+
+        return (
+            <div
+                className="schema-column-edit-wrapper"
+                onPointerUp={() => {
+                    SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown();
+                    this._props.schemaView.deselectAllCells();
                 }}
-                SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => {
-                    if (enterKey) { // if shift & enter, set value of each cell in column
-                        this.setColumnValues(value, '');
-                        this._altTitle = undefined;
+                style={{
+                    color,
+                    width: '100%',
+                    pointerEvents,
+                }}>
+                <EditableView
+                    ref={r => {
+                        this._inputRef = r;
+                        this._props.autoFocus && r?.setIsFocused(true);
+                    }}
+                    oneLine={true}
+                    allowCRs={false}
+                    contents={''}
+                    onClick={this.openKeyDropdown}
+                    fieldContents={fieldProps}
+                    editing={undefined}
+                    placeholder={'Add key'}
+                    updateAlt={this.updateAlt} // alternate title to display
+                    updateSearch={this.updateKeyDropdown}
+                    schemaFieldType={SchemaFieldType.Header}
+                    GetValue={() => {
+                        if (SchemaColumnHeader.isDefaultField(this.fieldKey)) return '';
+                        else if (this._altTitle) return this._altTitle;
+                        else return this.fieldKey;
+                    }}
+                    SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => {
+                        if (enterKey) {
+                            // if shift & enter, set value of each cell in column
+                            this.setColumnValues(value, '');
+                            this._altTitle = undefined;
+                            this._props.finishEdit?.();
+                            return true;
+                        }
                         this._props.finishEdit?.();
                         return true;
-                    }
-                    this._props.finishEdit?.(); 
-                    return true;
-                }, 'edit column header')}
-            />
+                    }, 'edit column header')}
+                />
             </div>
+        );
     }
 
     public static isDefaultField = (key: string) => {
         const defaultPattern = /EmptyColumnKey/;
-        const isDefault: boolean = (defaultPattern.exec(key) != null);
+        const isDefault: boolean = defaultPattern.exec(key) != null;
         return isDefault;
-    }
+    };
 
-    get headerButton(){
-        const toRender = SchemaColumnHeader.isDefaultField(this.fieldKey) ? 
-        (<IconButton
-            icon={ <FontAwesomeIcon icon="trash" size='sm'/>}
-            size={Size.XSMALL}
-            color={'black'}
-            onPointerDown={e =>
-                setupMoveUpEvents(
-                    this,
-                    e,
-                    returnFalse,
-                    emptyFunction,
-                    undoable(clickEv => {
-                        clickEv.stopPropagation();
-                        this._props.schemaView.removeColumn(this._props.columnIndex);
-                    }, 'open column menu')
-                )
-            }
-        />)
-        : (<IconButton
-            icon={ <FontAwesomeIcon icon="caret-down" size='lg'/>}
-            size={Size.XSMALL}
-            color={'black'}
-            onPointerDown={e =>
-                setupMoveUpEvents(
-                    this,
-                    e,
-                    returnFalse,
-                    emptyFunction,
-                    undoable(clickEv => {
-                        clickEv.stopPropagation();
-                        this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)
-                    }, 'open column menu')
-                )
-            }
-        />)
+    get headerButton() {
+        const toRender = SchemaColumnHeader.isDefaultField(this.fieldKey) ? (
+            <IconButton
+                icon={<FontAwesomeIcon icon="trash" size="sm" />}
+                size={Size.XSMALL}
+                color={'black'}
+                onPointerDown={e =>
+                    setupMoveUpEvents(
+                        this,
+                        e,
+                        returnFalse,
+                        emptyFunction,
+                        undoable(clickEv => {
+                            clickEv.stopPropagation();
+                            this._props.schemaView.removeColumn(this._props.columnIndex);
+                        }, 'open column menu')
+                    )
+                }
+            />
+        ) : (
+            <IconButton
+                icon={<FontAwesomeIcon icon="caret-down" size="lg" />}
+                size={Size.XSMALL}
+                color={'black'}
+                onPointerDown={e =>
+                    setupMoveUpEvents(
+                        this,
+                        e,
+                        returnFalse,
+                        emptyFunction,
+                        undoable(clickEv => {
+                            clickEv.stopPropagation();
+                            this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex);
+                        }, 'open column menu')
+                    )
+                }
+            />
+        );
 
         return toRender;
     }
 
-    @action handlePointerEnter = () => this._showMenuIcon = true;
-    @action handlePointerLeave = () => this._showMenuIcon = false;
+    @action handlePointerEnter = () => { this._showMenuIcon = true; } // prettier-ignore
+    @action handlePointerLeave = () => { this._showMenuIcon = false; } // prettier-ignore
 
-    @computed get displayButton() {return this._showMenuIcon;}
+    @computed get displayButton() {
+        return this._showMenuIcon;
+    }
 
     render() {
         return (
-                <div
-                    className="schema-column-header"
-                    style={{
-                        width: this._props.columnWidths[this._props.columnIndex],
-                    }}
-                    onPointerEnter={() => {this.handlePointerEnter()}}
-                    onPointerLeave={() => {this.handlePointerLeave()}}
-                    onPointerDown={e => {
-                        this.setupDrag(e);
-                        setupMoveUpEvents(
-                            this,
-                            e,
-                            () => {return this._inputRef?.setIsEditing(false) ?? false},
-                            emptyFunction,
-                            emptyFunction,
-                            );
-                        }
+            <div
+                className="schema-column-header"
+                style={{
+                    width: this._props.columnWidths[this._props.columnIndex],
+                }}
+                onPointerEnter={() => {
+                    this.handlePointerEnter();
+                }}
+                onPointerLeave={() => {
+                    this.handlePointerLeave();
+                }}
+                onPointerDown={e => {
+                    this.setupDrag(e);
+                    setupMoveUpEvents(
+                        this,
+                        e,
+                        () => {
+                            return this._inputRef?.setIsEditing(false) ?? false;
+                        },
+                        emptyFunction,
+                        emptyFunction
+                    );
+                }}
+                ref={col => {
+                    if (col) {
+                        this._props.setColRef(this._props.columnIndex, col);
                     }
-                    ref={col => {
-                        if (col) {
-                            this._props.setColRef(this._props.columnIndex, col);
-                        }
-                    }}>
-                    <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex, false)} />
+                }}>
+                <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex, false)} />
 
-                    <div className="schema-header-text">{this.editableView}</div>
+                <div className="schema-header-text">{this.editableView}</div>
 
-                    <div className="schema-header-menu">
-                        <div className="schema-header-button" style={{opacity: this.displayButton ? '1.0' : '0.0'}}>
-                            {this.headerButton}
-                        </div>
-                    </div>  
-
-                    <div className="schema-column-resizer right" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex, true)} />
+                <div className="schema-header-menu">
+                    <div className="schema-header-button" style={{ opacity: this.displayButton ? '1.0' : '0.0' }}>
+                        {this.headerButton}
+                    </div>
                 </div>
+
+                <div className="schema-column-resizer right" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex, true)} />
+            </div>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index a8a4ef2c2..6ffb0865a 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -21,7 +21,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 /**
  * The SchemaRowBox renders a doc as a row of cells, with each cell representing
- * one field value of the doc. It mostly handles communication from the SchemaView 
+ * one field value of the doc. It mostly handles communication from the SchemaView
  * to each SchemaCell, passing down necessary functions are props.
  */
 
@@ -59,7 +59,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         ContextMenu.Instance.clearItems();
         ContextMenu.Instance.addItem({
             description: this.Document._lockedSchemaEditing ? 'Unlock field editing' : 'Lock field editing',
-            event: () => this.Document._lockedSchemaEditing = !this.Document._lockedSchemaEditing,
+            event: () => (this.Document._lockedSchemaEditing = !this.Document._lockedSchemaEditing),
             icon: this.Document._lockedSchemaEditing ? 'lock-open' : 'lock',
         });
         ContextMenu.Instance.addItem({
@@ -78,17 +78,19 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         //         ContextMenu.Instance.addItem({
         //         description: this.Document._childrenSharedWithSchema ? 'Remove children from schema' : 'Add children to schema',
         //         event: () => {
-        //             this.Document._childrenSharedWithSchema = !this.Document._childrenSharedWithSchema; 
+        //             this.Document._childrenSharedWithSchema = !this.Document._childrenSharedWithSchema;
         //         },
         //         icon: this.Document._childrenSharedWithSchema ? 'minus' : 'plus',
         //     });
         // }
         ContextMenu.Instance.displayMenu(x, y, undefined, false);
-    }
+    };
 
-    @computed get menuBackgroundColor(){
-        if (this.Document._lockedSchemaEditing) {return '#F5F5F5'}   
-        return ''
+    @computed get menuBackgroundColor() {
+        if (this.Document._lockedSchemaEditing) {
+            return '#F5F5F5';
+        }
+        return '';
     }
 
     @computed get menuInfos() {
@@ -98,22 +100,28 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         return infos;
     }
 
-    isolatedSelection = (doc: Doc) => {return this.schemaView?.selectionOverlap(doc)};
+    isolatedSelection = (doc: Doc) => {
+        return this.schemaView?.selectionOverlap(doc);
+    };
     setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY);
     selectedCol = () => this.schemaView._selectedCol;
     getFinfo = computedFn((fieldKey: string) => this.schemaView?.fieldInfos.get(fieldKey));
     selectCell = (doc: Doc, col: number, shift: boolean, ctrl: boolean) => this.schemaView?.selectCell(doc, col, shift, ctrl);
     deselectCell = () => this.schemaView?.deselectAllCells();
     selectedCells = () => this.schemaView?._selectedDocs;
-    setColumnValues = (field: any, value: any) => this.schemaView?.setCellValues(field, value) ?? false;
+    setColumnValues = (field: string, value: string) => this.schemaView?.setCellValues(field, value) ?? false;
     columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth);
     computeRowIndex = () => this.schemaView?.rowIndex(this.Document);
     highlightCells = (text: string) => this.schemaView?.highlightCells(text);
-    selectReference = (doc: Doc, col: number) => {this.schemaView.selectReference(doc, col)}
+    selectReference = (doc: Doc, col: number) => {
+        this.schemaView.selectReference(doc, col);
+    };
     eqHighlightFunc = (text: string) => {
         const info = this.schemaView.findCellRefs(text);
         const cells: HTMLDivElement[] = [];
-        info.forEach(info => {cells.push(this.schemaView.getCellElement(info[0], info[1]))})
+        info.forEach(inf => {
+            cells.push(this.schemaView.getCellElement(inf[0], inf[1]));
+        });
         return cells;
     };
     render() {
@@ -121,7 +129,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
             <div
                 className="schema-row"
                 onPointerDown={e => this.setCursorIndex(e.clientY)}
-                style={{ height: this._props.PanelHeight()}}
+                style={{ height: this._props.PanelHeight() }}
                 ref={(row: HTMLDivElement | null) => {
                     row && this.schemaView?.addRowRef?.(this.Document, row);
                     this._ref = row;
@@ -131,11 +139,11 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                     style={{
                         width: CollectionSchemaView._rowMenuWidth,
                         pointerEvents: !this._props.isContentActive() ? 'none' : undefined,
-                        backgroundColor: this.menuBackgroundColor
+                        backgroundColor: this.menuBackgroundColor,
                     }}>
                     <IconButton
                         tooltip="Open actions menu"
-                        icon={ <FontAwesomeIcon icon="caret-right" size='lg'/>}
+                        icon={<FontAwesomeIcon icon="caret-right" size="lg" />}
                         size={Size.XSMALL}
                         color={'black'}
                         onPointerDown={e =>
@@ -146,14 +154,16 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                                 emptyFunction,
                                 undoable(clickEv => {
                                     clickEv.stopPropagation();
-                                    this.openContextMenu(e.clientX, e.clientY)
+                                    this.openContextMenu(e.clientX, e.clientY);
                                 }, 'open actions menu')
                             )
                         }
                     />
-                <div className="row-menu-infos">
-                    {this.menuInfos.map(icn => <FontAwesomeIcon className="row-infos-icon" icon={icn} size='2xs' />)}
-                </div>
+                    <div className="row-menu-infos">
+                        {this.menuInfos.map(icn => (
+                            <FontAwesomeIcon key={icn.toString()} className="row-infos-icon" icon={icn} size="2xs" />
+                        ))}
+                    </div>
                 </div>
                 <div className="row-cells">
                     {this.schemaView?.columnKeys?.map((key, index) => (
@@ -192,4 +202,4 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
             </div>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index c05382ce0..f036ff843 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable no-use-before-define */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Popup, Size, Type } from 'browndash-components';
@@ -37,7 +36,7 @@ import { SchemaCellField } from './SchemaCellField';
 /**
  * SchemaTableCells make up the majority of the visual representation of the SchemaView.
  * They are rendered for each cell in the SchemaView, and each represents one field value
- * of a doc. Editing the content of the cell changes the corresponding doc's field value. 
+ * of a doc. Editing the content of the cell changes the corresponding doc's field value.
  */
 
 export interface SchemaTableCellProps {
@@ -67,21 +66,16 @@ export interface SchemaTableCellProps {
     isolatedSelection: (doc: Doc) => [boolean, boolean];
     highlightCells: (text: string) => void;
     eqHighlightFunc: (text: string) => HTMLDivElement[] | [];
-    refSelectModeInfo: {enabled: boolean, currEditing: SchemaCellField | undefined};
+    refSelectModeInfo: { enabled: boolean; currEditing: SchemaCellField | undefined };
     selectReference: (doc: Doc, col: number) => void;
 }
 
 function selectedCell(props: SchemaTableCellProps) {
-    return (
-        props.isRowActive() &&
-        props.selectedCol() === props.col && 
-        props.selectedCells()?.filter(d => d === props.Document)?.length
-    );
+    return props.isRowActive() && props.selectedCol() === props.col && props.selectedCells()?.filter(d => d === props.Document)?.length;
 }
 
 @observer
 export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellProps> {
-
     // private _fieldRef: SchemaCellField | null = null;
     private _submittedValue: string = '';
 
@@ -96,9 +90,11 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
 
     get lockedInteraction(){return (this.isDefault || this._props.Document._lockedSchemaEditing);} // prettier-ignore
 
-    get backgroundColor(){
-        if (this.lockedInteraction) {return '#F5F5F5'}   
-        return ''
+    get backgroundColor() {
+        if (this.lockedInteraction) {
+            return '#F5F5F5';
+        }
+        return '';
     }
 
     static addFieldDoc = (docs: Doc | Doc[] /* , where: OpenWhere */) => {
@@ -110,7 +106,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         let protoCount = 0;
         let doc: Doc | undefined = Document;
         while (doc) {
-            if (Object.keys(doc).includes(fieldKey.replace(/^_/, ''))) break; 
+            if (Object.keys(doc).includes(fieldKey.replace(/^_/, ''))) break;
             protoCount++;
             doc = DocCast(doc.proto);
         }
@@ -149,28 +145,40 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
     adjustSelfReference = (field: string) => {
         const modField = field.replace(/\bthis.\b/g, `d${this.docIndex}.`);
         return modField;
-    }
+    };
 
     // parses a field from the "idToDoc(####)" format to DocumentId (d#) format for readability
     cleanupField = (field: string) => {
         let modField = field.slice();
         let eqSymbol: string = '';
-        if (modField.startsWith('=')) {modField = modField.substring(1); eqSymbol += '=';}
-        if (modField.startsWith(':=')) {modField = modField.substring(2); eqSymbol += ':=';}
+        if (modField.startsWith('=')) {
+            modField = modField.substring(1);
+            eqSymbol += '=';
+        }
+        if (modField.startsWith(':=')) {
+            modField = modField.substring(2);
+            eqSymbol += ':=';
+        }
 
         const idPattern = /idToDoc\((.*?)\)/g;
         let matches;
         const results = new Array<[id: string, func: string]>();
-        while ((matches = idPattern.exec(field)) !== null) {results.push([matches[0], matches[1].replace(/"/g, '')]); }
-        results.forEach((idFuncPair) => {modField = modField.replace(idFuncPair[0], 'd' + (DocumentView.getDocViewIndex(IdToDoc(idFuncPair[1]))).toString());})
+        while ((matches = idPattern.exec(field)) !== null) {
+            results.push([matches[0], matches[1].replace(/"/g, '')]);
+        }
+        results.forEach(idFuncPair => {
+            modField = modField.replace(idFuncPair[0], 'd' + DocumentView.getDocViewIndex(IdToDoc(idFuncPair[1])).toString());
+        });
 
         if (modField.endsWith(';')) modField = modField.substring(0, modField.length - 1);
 
-        const inQuotes = (field: string) => {return ((field.startsWith('`') && field.endsWith('`')) || (field.startsWith("'") && field.endsWith("'")) || (field.startsWith('"') && field.endsWith('"')))}
+        const inQuotes = (strField: string) => {
+            return (strField.startsWith('`') && strField.endsWith('`')) || (strField.startsWith("'") && strField.endsWith("'")) || (strField.startsWith('"') && strField.endsWith('"'));
+        };
         if (!inQuotes(this._submittedValue) && inQuotes(modField)) modField = modField.substring(1, modField.length - 1);
 
         return eqSymbol + modField;
-    }
+    };
 
     @computed get defaultCellContent() {
         const { color, textDecoration, fieldProps, pointerEvents } = SchemaTableCell.renderProps(this._props);
@@ -203,7 +211,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                             this._props.finishEdit?.();
                             return true;
                         }
-                        const hasNoLayout =  Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto
+                        const hasNoLayout = Doc.IsDataProto(fieldProps.Document) ? true : undefined; // the "delegate" is a a data document so never write to it's proto
                         const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, hasNoLayout);
                         this._submittedValue = value;
                         this._props.finishEdit?.();
@@ -245,8 +253,8 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         const sides: Array<string | undefined> = [];
         sides[0] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // left
         sides[1] = selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // right
-        sides[2] = (!this._props.isolatedSelection(this._props.Document)[0] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // top
-        sides[3] = (!this._props.isolatedSelection(this._props.Document)[1] && selectedCell(this._props)) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // bottom
+        sides[2] = !this._props.isolatedSelection(this._props.Document)[0] && selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // top
+        sides[3] = !this._props.isolatedSelection(this._props.Document)[1] && selectedCell(this._props) ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined; // bottom
         return sides;
     }
 
@@ -256,9 +264,13 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 className="schema-table-cell"
                 onContextMenu={e => StopEvent(e)}
                 onPointerDown={action(e => {
-                    if (this.lockedInteraction) { e.stopPropagation(); e.preventDefault(); return; }
+                    if (this.lockedInteraction) {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        return;
+                    }
 
-                    if (this._props.refSelectModeInfo.enabled && !selectedCell(this._props)){
+                    if (this._props.refSelectModeInfo.enabled && !selectedCell(this._props)) {
                         e.stopPropagation();
                         e.preventDefault();
                         this._props.selectReference(this._props.Document, this._props.col);
@@ -274,14 +286,16 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                         } else !selectedCell(this._props) && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
                     }
                 })}
-                style={{ padding: this._props.padding, 
-                maxWidth: this._props.maxWidth?.(), 
-                width: this._props.columnWidth() || undefined, 
-                borderLeft: this.borderColor[0],
-                borderRight: this.borderColor[1],
-                borderTop: this.borderColor[2],
-                borderBottom: this.borderColor[3],
-                backgroundColor: this.backgroundColor}}>
+                style={{
+                    padding: this._props.padding,
+                    maxWidth: this._props.maxWidth?.(),
+                    width: this._props.columnWidth() || undefined,
+                    borderLeft: this.borderColor[0],
+                    borderRight: this.borderColor[1],
+                    borderTop: this.borderColor[2],
+                    borderBottom: this.borderColor[3],
+                    backgroundColor: this.backgroundColor,
+                }}>
                 {this.isDefault ? '' : this.content}
             </div>
         );
@@ -524,4 +538,4 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC
             </div>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 962a21dbb..6c3f4eaff 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -84,7 +84,6 @@ ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: b
             } else {
                 const dataKey = Doc.LayoutFieldKey(dv.Document);
                 const alternate = (dv.layoutDoc[dataKey + '_usePath'] ? '_' + dv.layoutDoc[dataKey + '_usePath'] : '').replace(':hover', '');
-                console.log('color: ' + dv.dataDoc[fieldKey + alternate] + ' to set to: ' + color)
                 dv.layoutDoc[fieldKey + alternate] = undefined;
                 dv.dataDoc[fieldKey + alternate] = color;
             }
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 12196f290..a44014444 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Checkbox } from '@mui/material';
 import { Colors, Toggle, ToggleType, Type } from 'browndash-components';
@@ -8,42 +7,36 @@ import * as React from 'react';
 import { ClientUtils, returnEmptyString, returnFalse, returnOne, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
 import { Doc, DocListCast, Field, FieldType, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
+import { AclAdmin, AclAugment, AclEdit } from '../../../../fields/DocSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
+import { PrefetchProxy } from '../../../../fields/Proxy';
 import { Cast, CsvCast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
 import { CsvField } from '../../../../fields/URLField';
-import { GetEffectiveAcl, TraceMobx, inheritParentAcls } from '../../../../fields/util';
+import { GetEffectiveAcl, TraceMobx } from '../../../../fields/util';
+import { GPTCallType, gptAPICall } from '../../../apis/gpt/GPT';
 import { DocUtils } from '../../../documents/DocUtils';
 import { DocumentType } from '../../../documents/DocumentTypes';
 import { Docs } from '../../../documents/Documents';
+import { LinkManager } from '../../../util/LinkManager';
 import { UndoManager, undoable } from '../../../util/UndoManager';
 import { ContextMenu } from '../../ContextMenu';
 import { ViewBoxAnnotatableComponent } from '../../DocComponent';
 import { MarqueeAnnotator } from '../../MarqueeAnnotator';
 import { PinProps } from '../../PinFuncs';
 import { SidebarAnnos } from '../../SidebarAnnos';
+import { CollectionFreeFormView } from '../../collections/collectionFreeForm';
 import { AnchorMenu } from '../../pdf/AnchorMenu';
 import { GPTPopup, GPTPopupMode } from '../../pdf/GPTPopup/GPTPopup';
 import { DocumentView } from '../DocumentView';
 import { FieldView, FieldViewProps } from '../FieldView';
 import { FocusViewOptions } from '../FocusViewOptions';
 import './DataVizBox.scss';
+import { Col, DataVizTemplateInfo, DocCreatorMenu, LayoutType, TemplateFieldSize, TemplateFieldType } from './DocCreatorMenu';
 import { Histogram } from './components/Histogram';
 import { LineChart } from './components/LineChart';
 import { PieChart } from './components/PieChart';
 import { TableBox } from './components/TableBox';
-import { LinkManager } from '../../../util/LinkManager';
-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';
-import { template } from 'lodash';
-import { data } from 'jquery';
-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',
@@ -65,7 +58,7 @@ 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, {desc?: string, type?: TemplateFieldType, size?: TemplateFieldSize}> | undefined = undefined;
+    @observable GPTSummary: ObservableMap<string, { desc?: string; type?: TemplateFieldType; size?: TemplateFieldSize }> | undefined = undefined;
     @observable colsInfo: ObservableMap<string, Col> = new ObservableMap();
     @observable _GPTLoading: boolean = false;
 
@@ -121,12 +114,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             const records = DataVizBox.dataset.get(CsvCast(this.dataDoc[this.fieldKey]).url.href);
             this._urlError = false;
             return records?.filter(record => Object.keys(record).some(key => record[key])) ?? [];
-        } catch (e){
+        } catch {
             this._urlError = true;
-            const data: { [key: string]: string; }[] = [
-                { error: "Data not found"},
-              ];          
-            return data;
+            return [{ error: 'Data not found' }] as { [key: string]: string }[];
         }
     }
 
@@ -153,70 +143,73 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action setSpecialHighlightedRow = (row: number | undefined) => {
         this._specialHighlightedRow = row;
-    }
+    };
 
     @action setColumnType = (colTitle: string, type: TemplateFieldType) => {
         const colInfo = this.colsInfo.get(colTitle);
-        if (colInfo) { 
+        if (colInfo) {
             colInfo.type = type;
         } else {
-            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: type, sizes: [TemplateFieldSize.MEDIUM]})
+            this.colsInfo.set(colTitle, { title: colTitle, desc: '', type: type, sizes: [TemplateFieldSize.MEDIUM] });
         }
-    }
+    };
 
     @action modifyColumnSizes = (colTitle: string, size: TemplateFieldSize, valid: boolean) => {
         const column = this.colsInfo.get(colTitle);
-        if (column) { 
+        if (column) {
             if (!valid && column.sizes.includes(size)) {
                 column.sizes.splice(column.sizes.indexOf(size), 1);
             } else if (valid && !column.sizes.includes(size)) {
                 column.sizes.push(size);
             }
         } else {
-            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: TemplateFieldType.UNSET, sizes: [size]})
+            this.colsInfo.set(colTitle, { title: colTitle, desc: '', type: TemplateFieldType.UNSET, sizes: [size] });
         }
-    }
+    };
 
     @action setColumnTitle = (colTitle: string, newTitle: string) => {
         const colInfo = this.colsInfo.get(colTitle);
-        if (colInfo) { 
+        if (colInfo) {
             colInfo.title = newTitle;
-            console.log(colInfo.title)
+            console.log(colInfo.title);
         } else {
-            this.colsInfo.set(colTitle, {title: newTitle, desc: '', type: TemplateFieldType.UNSET, sizes: []})
+            this.colsInfo.set(colTitle, { title: newTitle, desc: '', type: TemplateFieldType.UNSET, sizes: [] });
         }
-    }
+    };
 
     @action setColumnDesc = (colTitle: string, desc: string) => {
         const colInfo = this.colsInfo.get(colTitle);
         if (colInfo) {
-            if (!desc) { colInfo.desc = this.GPTSummary?.get(colTitle)?.desc ?? ''; } 
-            else { colInfo.desc = desc; }
+            if (!desc) {
+                colInfo.desc = this.GPTSummary?.get(colTitle)?.desc ?? '';
+            } else {
+                colInfo.desc = desc;
+            }
         } else {
-            this.colsInfo.set(colTitle, {title: colTitle, desc: desc, type: TemplateFieldType.UNSET, sizes: []})
+            this.colsInfo.set(colTitle, { title: colTitle, desc: desc, type: TemplateFieldType.UNSET, sizes: [] });
         }
-    }
+    };
 
     @action setColumnDefault = (colTitle: string, cont: string) => {
         const colInfo = this.colsInfo.get(colTitle);
         if (colInfo) {
             colInfo.defaultContent = cont;
         } else {
-            this.colsInfo.set(colTitle, {title: colTitle, desc: '', type: TemplateFieldType.UNSET, sizes: [], defaultContent: cont})
+            this.colsInfo.set(colTitle, { title: colTitle, desc: '', type: TemplateFieldType.UNSET, sizes: [], defaultContent: cont });
         }
-    }
+    };
 
     @action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
-    restoreView = (data: Doc) => {
+    restoreView = (viewData: Doc) => {
         // const changedView = data.config_dataViz && this.dataVizView !== data.config_dataViz && (this.layoutDoc._dataViz = data.config_dataViz);
         // const changedAxes = data.config_dataVizAxes && this.axes.join('') !== StrListCast(data.config_dataVizAxes).join('') && (this.layoutDoc._dataViz_axes = new List<string>(StrListCast(data.config_dataVizAxes)));
-        this.layoutDoc.dataViz_selectedRows = Field.Copy(data.dataViz_selectedRows);
-        this.layoutDoc.dataViz_histogram_barColors = Field.Copy(data.dataViz_histogram_barColors);
-        this.layoutDoc.dataViz_histogram_defaultColor = data.dataViz_histogram_defaultColor;
-        this.layoutDoc.dataViz_pie_sliceColors = Field.Copy(data.dataViz_pie_sliceColors);
+        this.layoutDoc.dataViz_selectedRows = Field.Copy(viewData.dataViz_selectedRows);
+        this.layoutDoc.dataViz_histogram_barColors = Field.Copy(viewData.dataViz_histogram_barColors);
+        this.layoutDoc.dataViz_histogram_defaultColor = viewData.dataViz_histogram_defaultColor;
+        this.layoutDoc.dataViz_pie_sliceColors = Field.Copy(viewData.dataViz_pie_sliceColors);
         Object.keys(this.layoutDoc).forEach(key => {
             if (key.startsWith('dataViz_histogram_title') || key.startsWith('dataViz_lineChart_title') || key.startsWith('dataViz_pieChart_title')) {
-                this.layoutDoc['_' + key] = data[key];
+                this.layoutDoc['_' + key] = viewData[key];
             }
         });
         return true;
@@ -354,7 +347,9 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     componentDidMount() {
         this._props.setContentViewBox?.(this);
-        if (!this._urlError) { if (!DataVizBox.dataset.has(CsvCast(this.dataDoc[this.fieldKey]).url.href)) this.fetchData() };
+        if (!this._urlError) {
+            if (!DataVizBox.dataset.has(CsvCast(this.dataDoc[this.fieldKey]).url.href)) this.fetchData();
+        }
         this._disposers.datavis = reaction(
             () => {
                 if (this.layoutDoc.dataViz_schemaLive === undefined) this.layoutDoc.dataViz_schemaLive = true;
@@ -516,14 +511,14 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         DocCreatorMenu.Instance.toggleDisplay(x, y);
         DocCreatorMenu.Instance.setDataViz(this);
         DocCreatorMenu.Instance.setTemplateDocs(this.getPossibleTemplates());
-    }
+    };
 
-    specificContextMenu = (x: number, y: number): void => {
+    specificContextMenu = (e: MouseEventHandler) => {
         const cm = ContextMenu.Instance;
         const options = cm.findByDescription('Options...');
         const optionItems = options?.subitems ?? [];
         optionItems.push({ description: `Analyze with AI`, event: () => this.askGPT(), icon: 'lightbulb' });
-        optionItems.push({ description: `Create documents`, event: () => this.openDocCreatorMenu(x, y), icon: 'table-cells' });
+        optionItems.push({ description: `Create documents`, event: () => this.openDocCreatorMenu(e.pageX, e.pageY), icon: 'table-cells' });
         !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' });
     };
 
@@ -533,19 +528,19 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         GPTPopup.Instance.createFilteredDoc = this.createFilteredDoc;
         GPTPopup.Instance.setDataJson('');
         GPTPopup.Instance.setMode(GPTPopupMode.DATA);
-        const data = DataVizBox.dataset.get(CsvCast(this.dataDoc[this.fieldKey]).url.href);
-        GPTPopup.Instance.setDataJson(JSON.stringify(data));
+        const csvdata = DataVizBox.dataset.get(CsvCast(this.dataDoc[this.fieldKey]).url.href);
+        GPTPopup.Instance.setDataJson(JSON.stringify(csvdata));
         GPTPopup.Instance.generateDataAnalysis();
     });
 
     getColSummary = (): string => {
-        let possibleIds: number[] = this.records.map((_, index) => index);
+        const possibleIds: number[] = this.records.map((_, index) => index);
 
         for (let i = possibleIds.length - 1; i > 0; i--) {
             const j = Math.floor(Math.random() * (i + 1));
             [possibleIds[i], possibleIds[j]] = [possibleIds[j], possibleIds[i]];
         }
-    
+
         const rowsToCheck = possibleIds.slice(0, Math.min(10, this.records.length));
 
         let prompt: string = 'Col titles: ';
@@ -553,37 +548,37 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const cols = Array.from(Object.keys(this.records[0])).filter(header => header !== '' && header !== undefined);
 
         cols.forEach((col, i) => {
-            prompt += `Col #${i}: ${col} ------`
-        })
+            prompt += `Col #${i}: ${col} ------`;
+        });
 
-        prompt += '----------- Rows: '
+        prompt += '----------- Rows: ';
 
-        rowsToCheck.forEach((row, i) => {
-            prompt += `Row #${row}: `
+        rowsToCheck.forEach(row => {
+            prompt += `Row #${row}: `;
             cols.forEach(col => {
-                prompt += `${col}: ${this.records[row][col]} -----`
-            })
-        })
+                prompt += `${col}: ${this.records[row][col]} -----`;
+            });
+        });
 
         return prompt;
-    }
+    };
 
     updateColDefaults = () => {
-        let possibleIds: number[] = this.records.map((_, index) => index);
+        const possibleIds: number[] = this.records.map((_, index) => index);
 
         for (let i = possibleIds.length - 1; i > 0; i--) {
             const j = Math.floor(Math.random() * (i + 1));
             [possibleIds[i], possibleIds[j]] = [possibleIds[j], possibleIds[i]];
         }
-    
+
         const rowToCheck = possibleIds[0];
 
         const cols = Array.from(Object.keys(this.records[0])).filter(header => header !== '' && header !== undefined);
 
-        cols.forEach(col => { 
-            this.setColumnDefault(col, `${this.records[rowToCheck][col]}`) 
+        cols.forEach(col => {
+            this.setColumnDefault(col, `${this.records[rowToCheck][col]}`);
         });
-    }
+    };
 
     updateGPTSummary = async () => {
         this._GPTLoading = true;
@@ -594,15 +589,12 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
         const cols = Array.from(Object.keys(this.records[0])).filter(header => header !== '' && header !== undefined);
         cols.forEach(col => {
-            if (!this.colsInfo.get(col)) this.colsInfo.set(col, {title: col, desc: '', sizes: [], type: TemplateFieldType.UNSET});
+            if (!this.colsInfo.get(col)) this.colsInfo.set(col, { title: col, desc: '', sizes: [], type: TemplateFieldType.UNSET });
         });
 
         try {
-            const [res1, res2] = await Promise.all([
-                gptAPICall(prompt, GPTCallType.VIZSUM),
-                gptAPICall('Info:' + prompt, GPTCallType.VIZSUM2)
-            ]);
-        
+            const [res1, res2] = await Promise.all([gptAPICall(prompt, GPTCallType.VIZSUM), gptAPICall('Info:' + prompt, GPTCallType.VIZSUM2)]);
+
             if (res1) {
                 this.GPTSummary = new ObservableMap();
                 const descs: { [col: string]: string } = JSON.parse(res1);
@@ -611,10 +603,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     if (!this.colsInfo.get(key)?.desc) this.setColumnDesc(key, val);
                 }
             }
-        
+
             if (res2) {
                 !this.GPTSummary && (this.GPTSummary = new ObservableMap());
-                const info: { [col: string]: { type: TemplateFieldType, size: TemplateFieldSize } } = JSON.parse(res2);
+                const info: { [col: string]: { type: TemplateFieldType; size: TemplateFieldSize } } = JSON.parse(res2);
                 for (const [key, val] of Object.entries(info)) {
                     const colSummary = this.GPTSummary.get(key);
                     if (colSummary) {
@@ -628,30 +620,29 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         } catch (err) {
             console.error(err);
         }
-        
-    }
+    };
 
     getPossibleTemplates = (): Doc[] => {
         const linkedDocs: Doc[] = LinkManager.Instance.getAllRelatedLinks(this.Document).map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)));
         const linkedCollections: Doc[] = linkedDocs.filter(doc => doc.type === 'config').map(doc => DocCast(doc.annotationOn));
         const isColumnTitle = (title: string): boolean => {
             const colTitles: string[] = Object.keys(this.records[0]);
-            for (let i = 0; i < colTitles.length; ++i){
+            for (let i = 0; i < colTitles.length; ++i) {
                 if (colTitles[i] === title) {
                     return true;
                 }
             }
             return false;
-        }
+        };
         const isValidTemplate = (collection: Doc) => {
             const childDocs = DocListCast(collection[Doc.LayoutFieldKey(collection)]);
-            for (let i = 0; i < childDocs.length; ++i){
+            for (let i = 0; i < childDocs.length; ++i) {
                 if (isColumnTitle(String(childDocs[i].title))) return true;
             }
             return false;
-        }
+        };
         return linkedCollections.filter(col => isValidTemplate(col));
-    }
+    };
 
     ApplyTemplateTo = (templateDoc: Doc, target: Doc, targetKey: string, titleTarget: string | undefined) => {
         if (!Doc.AreProtosEqual(target[targetKey] as Doc, templateDoc)) {
@@ -664,14 +655,14 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             }
         }
         return target;
-    }
+    };
 
     applyLayout = (templateInfo: DataVizTemplateInfo, docs: Doc[]) => {
         if (templateInfo.layout.type === LayoutType.Stacked) return;
         const columns: number = templateInfo.columns;
         const xGap: number = templateInfo.layout.xMargin;
         const yGap: number = templateInfo.layout.yMargin;
-        const repeat: number = templateInfo.layout.repeat;
+        // const repeat: number = templateInfo.layout.repeat;
         const startX: number = templateInfo.referencePos.x;
         const startY: number = templateInfo.referencePos.y;
         const templWidth = Number(templateInfo.doc._width);
@@ -682,8 +673,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         let curX: number = startX;
         let curY: number = startY;
 
-        while (docsChanged < docs.length){
-            while (i < columns && docsChanged < docs.length){ 
+        while (docsChanged < docs.length) {
+            while (i < columns && docsChanged < docs.length) {
                 docs[docsChanged].x = curX;
                 docs[docsChanged].y = curY;
                 curX += templWidth + xGap;
@@ -695,27 +686,29 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             curX = startX;
             curY += templHeight + yGap;
         }
-    }
+    };
 
     // @action addSavedLayout = (layout: DataVizTemplateLayout) => {
     //     const saved = Cast(this.layoutDoc.dataViz_savedTemplates, listSpec('RefField'));
-        
+
     // }
 
     @action
     createDocsFromTemplate = (templateInfo: DataVizTemplateInfo) => {
         if (!templateInfo.doc) return;
         const mainCollection = this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
-        const fields: string[] = Array.from(Object.keys(this.records[0])); 
+        const fields: string[] = Array.from(Object.keys(this.records[0]));
         const selectedRows = NumListCast(this.layoutDoc.dataViz_selectedRows);
         const docs: Doc[] = selectedRows.map(row => {
-            const values: String[] = [];
+            const values: string[] = [];
             fields.forEach(col => values.push(this.records[row][col]));
 
             const proto = new Doc();
             proto.author = ClientUtils.CurrentUserEmail();
-            values.forEach((val, i) => {proto[fields[i]] = val as FieldType});
-            
+            values.forEach((val, i) => {
+                proto[fields[i]] = val as FieldType;
+            });
+
             const target = Doc.MakeDelegate(proto);
             const targetKey = StrCast(templateInfo.doc!.layout_fieldKey, 'layout');
             const applied = this.ApplyTemplateTo(templateInfo.doc!, target, targetKey, templateInfo.doc!.title + `${row}`);
@@ -728,7 +721,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         docs.forEach(doc => mainCollection.addDocument(doc));
 
         this.applyLayout(templateInfo, docs);
-    }
+    };
 
     /**
      * creates a new dataviz document filter from this one
@@ -783,7 +776,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     transform: `scale(${scale})`,
                     position: 'absolute',
                 }}
-                onContextMenu={(e) => this.specificContextMenu(e.pageX, e.pageY)}
+                onContextMenu={this.specificContextMenu}
                 onWheel={e => e.stopPropagation()}
                 ref={this._mainCont}>
                 <div className="datatype-button">
diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx
index 0b94ae4f7..9769ecb3d 100644
--- a/src/client/views/nodes/DocumentIcon.tsx
+++ b/src/client/views/nodes/DocumentIcon.tsx
@@ -1,5 +1,5 @@
 import { Tooltip } from '@mui/material';
-import { action, makeObservable, observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { factory } from 'typescript';
@@ -18,14 +18,14 @@ interface DocumentIconProps {
 @observer
 export class DocumentIcon extends ObservableReactComponent<DocumentIconProps> {
     @observable _hovered = false;
-    constructor(props: any) {
+    constructor(props: DocumentIconProps) {
         super(props);
         makeObservable(this);
     }
 
     render() {
         const { view } = this._props;
-        const { left, top, right, bottom } = view.getBounds || { left: 0, top: 0, right: 0, bottom: 0 };
+        const { left, top, bottom } = view.getBounds || { left: 0, top: 0, right: 0, bottom: 0 };
 
         return (
             <div
@@ -34,7 +34,7 @@ export class DocumentIcon extends ObservableReactComponent<DocumentIconProps> {
                     pointerEvents: 'all',
                     position: 'absolute',
                     background: SnappingManager.userBackgroundColor,
-                    transform: `translate(${left}px, ${bottom - (bottom - top)/2}px)`, //**!** 
+                    transform: `translate(${left}px, ${bottom - (bottom - top) / 2}px)`, //**!**
                 }}>
                 <Tooltip title={<div>{StrCast(this._props.view.Document?.title)}</div>}>
                     <p>d{this._props.index}</p>
@@ -44,7 +44,7 @@ export class DocumentIcon extends ObservableReactComponent<DocumentIconProps> {
     }
 }
 
-@observer   
+@observer
 export class DocumentIconContainer extends React.Component {
     public static getTransformer(): Transformer {
         const usedDocuments = new Set<number>();
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index ba85bfb68..741d63909 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -138,7 +138,7 @@ export class FieldView extends React.Component<FieldViewProps> {
         const field = this.fieldval;
         // prettier-ignore
         if (field instanceof Doc)  return <p> <b>{field.title?.toString()}</b></p>;
-        if (field === undefined) return <p>{''}</p>;
+        if (field === undefined) return <p />;
         if (field instanceof DateField) return <p>{field.date.toLocaleString()}</p>;
         if (field instanceof List) return <div> {field.map(f => Field.toString(f)).join(', ')} </div>;
         if (field instanceof WebField) return <p>{Field.toString(field.url.href)}</p>;
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index cfcf76b12..8974cccaf 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -2,7 +2,7 @@ import { Property } from 'csstype';
 import { action, computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-//import * as textfit from 'textfit';
+import * as textfit from 'textfit';
 import { Field, FieldType } from '../../../fields/Doc';
 import { BoolCast, NumCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
@@ -96,7 +96,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 this._timeout = setTimeout(() => this.fitTextToBox(r));
                 return textfitParams;
             }
-            //textfit(r, textfitParams);
+            textfit(r, textfitParams);
         }
         return textfitParams;
     };
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index c1367aa0b..0d7914a82 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1498,7 +1498,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             pdfAnchorId && this.addPdfReference(pdfAnchorId);
         }
         if (this._props.autoFocus) setTimeout(() => this._editorView!.focus()); // not sure why setTimeout is needed but editing dashFieldView's doesn't work without it.
-
     }
 
     // add user mark for any first character that was typed since the user mark that gets set in KeyPress won't have been called yet.
@@ -2087,7 +2086,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                 </div>
             </div>
         );
-    
     }
 }
 
-- 
cgit v1.2.3-70-g09d2


From 695a757e1d5d3469a9871b0760c9dedeb073a489 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 4 Oct 2024 21:45:42 -0400
Subject: from last

---
 src/client/views/ContextMenu.tsx                   |  5 +-
 src/client/views/ContextMenuItem.tsx               |  3 +-
 src/client/views/EditableView.tsx                  | 57 +++++++++++-----------
 src/client/views/ScriptingRepl.scss                |  2 -
 .../collectionSchema/SchemaCellField.tsx           | 17 ++++---
 .../views/nodes/DataVizBox/components/TableBox.tsx | 18 ++++---
 6 files changed, 52 insertions(+), 50 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 98087e224..4b67ef704 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -1,6 +1,3 @@
-/* eslint-disable react/no-array-index-key */
-/* eslint-disable react/jsx-props-no-spreading */
-/* eslint-disable default-param-last */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, IReactionDisposer, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -277,4 +274,4 @@ export class ContextMenu extends ObservableReactComponent<{ noexpand?: boolean }
             this._selectedIndex = Math.min(this.flatItems.length - 1, this._selectedIndex);
         }
     };
-}
\ No newline at end of file
+}
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 610032225..6f8f41bdd 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, makeObservable, observable, runInAction } from 'mobx';
@@ -95,4 +94,4 @@ export class ContextMenuItem extends ObservableReactComponent<ContextMenuProps &
         const submenu = this._items.map(prop => <ContextMenuItem {...prop} key={prop.description} closeMenu={this._props.closeMenu} />);
         return this.props.event || this._props.noexpand ? this.renderItem(submenu) : <div className="contextMenu-inlineMenu">{submenu}</div>;
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 9722b2d4b..612ecee62 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -7,7 +7,6 @@ import { DocumentIconContainer } from './nodes/DocumentIcon';
 import { FieldView, FieldViewProps } from './nodes/FieldView';
 import { ObservableReactComponent } from './ObservableReactComponent';
 import { OverlayView } from './OverlayView';
-import { Padding } from 'browndash-components';
 import { SchemaFieldType } from './collections/collectionSchema/SchemaColumnHeader';
 
 export interface EditableProps {
@@ -90,7 +89,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                             this._overlayDisposer?.();
                             this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
                             this._props.highlightCells?.(this._props.GetValue() ?? '');
-                        } 
+                        }
                     });
                 } else {
                     this._overlayDisposer?.();
@@ -200,7 +199,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
             }
         }
     };
-    
+
     @action
     finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
         if (this._props.SetValue(value, shiftDown, enterKey)) {
@@ -235,7 +234,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     setIsEditing = (value: boolean) => {
         this._editing = value;
         return this._editing;
-    }
+    };
 
     renderEditor() {
         return this._props.autosuggestProps ? (
@@ -254,11 +253,11 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                     onChange: this._props.autosuggestProps.onChange,
                 }}
             />
-        ) : ( this._props.oneLine !== false && this._props.GetValue()?.toString().indexOf('\n') === -1 ? (
+        ) : this._props.oneLine !== false && this._props.GetValue()?.toString().indexOf('\n') === -1 ? (
             <input
-                className="editableView-input" 
+                className="editableView-input"
                 ref={r => { this._inputref = r; }} // prettier-ignore
-                style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minWidth: 20, background: this._props.background}}
+                style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minWidth: 20, background: this._props.background }}
                 placeholder={this._props.placeholder}
                 onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)}
                 defaultValue={this._props.GetValue()}
@@ -284,39 +283,41 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                 onClick={this.stopPropagation}
                 onPointerUp={this.stopPropagation}
             />
-        ));
+        );
     }
 
     staticDisplay = () => {
         let toDisplay;
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
-        if (this._props.schemaFieldType === SchemaFieldType.Header){
-            toDisplay = <input className="editableView-input"
-            value={gval}
-            placeholder='Add key'
-            readOnly
-            style={{ display: this._props.display, overflow: 'auto', pointerEvents: 'none', fontSize: this._props.fontSize, width: '100%', margin: 0, background: this._props.background}}
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-        />
+        if (this._props.schemaFieldType === SchemaFieldType.Header) {
+            toDisplay = (
+                <input
+                    className="editableView-input"
+                    value={gval}
+                    placeholder="Add key"
+                    readOnly
+                    style={{ display: this._props.display, overflow: 'auto', pointerEvents: 'none', fontSize: this._props.fontSize, width: '100%', margin: 0, background: this._props.background }}
+                />
+            );
         } else {
-            toDisplay = (<span className='editableView-static'
-            style={{
-                fontStyle: this._props.fontStyle,
-                fontSize: this._props.fontSize
-            }}>
-            {
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : '' as any
-            }
-        </span>)
+            toDisplay = (
+                <span
+                    className="editableView-static"
+                    style={{
+                        fontStyle: this._props.fontStyle,
+                        fontSize: this._props.fontSize,
+                    }}>
+                    {this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : (this.props.contents ?? '')}
+                </span>
+            );
         }
 
         return toDisplay;
-    }
+    };
 
     render() {
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
-        if ((this._editing && gval !== undefined)) {
+        if (this._editing && gval !== undefined) {
             return this._props.sizeToContent ? (
                 <div style={{ display: 'grid', minWidth: 100 }}>
                     <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{this.renderEditor()}</div>
diff --git a/src/client/views/ScriptingRepl.scss b/src/client/views/ScriptingRepl.scss
index 5fe176920..adc82238e 100644
--- a/src/client/views/ScriptingRepl.scss
+++ b/src/client/views/ScriptingRepl.scss
@@ -35,8 +35,6 @@
     opacity: 0.3;
 }
 
-
-
 .scriptingObject-icon {
     padding: 3px;
     cursor: pointer;
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 84e7b62bf..ce41b2758 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -27,6 +27,7 @@ export interface SchemaCellFieldProps {
     oneLine?: boolean;
     Document: Doc;
     fieldKey: string;
+    // eslint-disable-next-line no-use-before-define
     refSelectModeInfo: { enabled: boolean; currEditing: SchemaCellField | undefined };
     highlightCells?: (text: string) => void;
     GetValue(): string | undefined;
@@ -301,13 +302,14 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
                 setTimeout(() => this.setupRefSelect(this.refSelectConditionMet), 0);
                 break;
             case ' ':
-                e.stopPropagation();
-                let cursorPos = 0;
-                if (this.cursorPosition !== null) cursorPos = this.cursorPosition + 1;
-                setTimeout(() => {
-                    this.setContent(this._unrenderedContent);
-                    setTimeout(() => this.setCursorPosition(cursorPos));
-                }, 0);
+                {
+                    e.stopPropagation();
+                    const cursorPos = this.cursorPosition !== null ? this.cursorPosition + 1 : 0;
+                    setTimeout(() => {
+                        this.setContent(this._unrenderedContent);
+                        setTimeout(() => this.setCursorPosition(cursorPos));
+                    }, 0);
+                }
                 break;
             case 'u': // for some reason 'u' otherwise exits the editor
                 e.stopPropagation();
@@ -318,7 +320,6 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             case 'Control':
             case ':': // prettier-ignore
                 break;
-            // eslint-disable-next-line no-fallthrough
             default:
                 break;
         }
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 6cc773da0..fe596bc36 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { Button, Colors, Type } from 'browndash-components';
 import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -18,6 +16,7 @@ import { DocumentView } from '../../DocumentView';
 import { DataVizView } from '../DataVizBox';
 import './Chart.scss';
 
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const { DATA_VIZ_TABLE_ROW_HEIGHT } = require('../../../global/globalCssVariables.module.scss'); // prettier-ignore
 
 interface TableBoxProps {
@@ -416,7 +415,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                                           ? 'darkred'
                                                           : this._props.axes.length > 3 && this._props.axes[1] === col
                                                             ? 'darkblue'
-                                                            : this._props.axes.lastElement() === col || (this._props.axes.length > 3 && this._props.axes[2] === col) 
+                                                            : this._props.axes.lastElement() === col || (this._props.axes.length > 3 && this._props.axes[2] === col)
                                                               ? 'darkcyan'
                                                               : undefined,
                                                 background: this.settingTitle
@@ -427,7 +426,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                                         ? '#Fbdbdb'
                                                         : this._props.axes.lastElement() === col || (this._props.axes.length > 2 && this._props.axes[1] === col)
                                                           ? '#c6ebf7'
-                                                          : this._props.axes.lastElement() === col || (this._props.axes.length > 3 && this._props.axes[2] === col) 
+                                                          : this._props.axes.lastElement() === col || (this._props.axes.length > 3 && this._props.axes[2] === col)
                                                             ? '#c2f0f4'
                                                             : undefined,
                                                 fontWeight: 'bolder',
@@ -448,8 +447,15 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
                                             className={`tableBox-row ${this.columns[0]}`}
                                             onClick={e => this.tableRowClick(e, rowId)}
                                             style={{
-                                                background: rowId === this._props.specHighlightedRow ? 'lightblue' : NumListCast(this._props.layoutDoc.dataViz_highlitedRows).includes(rowId) ? 'lightYellow' : NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowId) ? 'lightgrey' : '',
-                                                border: rowId === this._props.specHighlightedRow ? `solid 3px ${Colors.MEDIUM_BLUE}` : ''
+                                                background:
+                                                    rowId === this._props.specHighlightedRow
+                                                        ? 'lightblue'
+                                                        : NumListCast(this._props.layoutDoc.dataViz_highlitedRows).includes(rowId)
+                                                          ? 'lightYellow'
+                                                          : NumListCast(this._props.layoutDoc.dataViz_selectedRows).includes(rowId)
+                                                            ? 'lightgrey'
+                                                            : '',
+                                                border: rowId === this._props.specHighlightedRow ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
                                             }}>
                                             {this.columns.map(col => {
                                                 let colSelected = false;
-- 
cgit v1.2.3-70-g09d2


From 2012b3ade1d4644115e3a59cf0a1deec07e23637 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 4 Oct 2024 21:51:25 -0400
Subject: from last

---
 src/client/views/EditableView.tsx                                 | 1 -
 src/client/views/ScriptingRepl.tsx                                | 3 +--
 src/client/views/collections/collectionSchema/SchemaCellField.tsx | 4 ++--
 3 files changed, 3 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 612ecee62..41079045b 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -239,7 +239,6 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     renderEditor() {
         return this._props.autosuggestProps ? (
             <Autosuggest
-                // eslint-disable-next-line react/jsx-props-no-spreading
                 {...this._props.autosuggestProps.autosuggestProps}
                 inputProps={{
                     className: 'editableView-input',
diff --git a/src/client/views/ScriptingRepl.tsx b/src/client/views/ScriptingRepl.tsx
index 2de867746..e413c13e2 100644
--- a/src/client/views/ScriptingRepl.tsx
+++ b/src/client/views/ScriptingRepl.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/no-array-index-key */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -182,7 +181,7 @@ export class ScriptingRepl extends ObservableReactComponent<object> {
                     this.maybeScrollToBottom();
                     return;
                 }
-                const result = undoable(() => script.run({}, e => this.commands.push({ command: this.commandString, result: e as string })), 'run:' + this.commandString)();
+                const result = undoable(() => script.run({}, err => this.commands.push({ command: this.commandString, result: err })), 'run:' + this.commandString)();
                 if (result.success) {
                     this.commands.push({ command: this.commandString, result: result.result });
                     this.commandsHistory.push(this.commandString);
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index ce41b2758..3924ed087 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -155,8 +155,8 @@ export class SchemaCellField extends ObservableReactComponent<SchemaCellFieldPro
             }
         }
 
-        matches.forEach((match: string) => {
-            chunkedText = chunkedText.replace(match, this.generateSpan(match, cells.get(match)));
+        matches.forEach(m => {
+            chunkedText = chunkedText.replace(m, this.generateSpan(m, cells.get(m)));
         });
 
         return chunkedText;
-- 
cgit v1.2.3-70-g09d2


From 1b038112b37c02d81431bc7ff622b25bb42a0858 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 4 Oct 2024 22:02:23 -0400
Subject: from last

---
 src/client/documents/DocUtils.ts                 | 2 --
 src/client/util/DocumentManager.ts               | 8 +-------
 src/client/views/nodes/DataVizBox/DataVizBox.tsx | 2 +-
 3 files changed, 2 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/DocUtils.ts b/src/client/documents/DocUtils.ts
index 0699ea09f..1130a9ae8 100644
--- a/src/client/documents/DocUtils.ts
+++ b/src/client/documents/DocUtils.ts
@@ -1,5 +1,3 @@
-/* eslint-disable prefer-destructuring */
-/* eslint-disable default-param-last */
 /* eslint-disable no-use-before-define */
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { saveAs } from 'file-saver';
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 966731656..4ab2e8d05 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -142,13 +142,7 @@ export class DocumentManager {
     }
 
     public getDocViewIndex(target: Doc): number {
-        const docViewArray = DocumentManager.Instance.DocumentViews;
-        for (let i = 0; i < docViewArray.length; ++i){
-            if (docViewArray[i].Document == target){
-                return i;
-            }
-        }
-        return -1;
+        return DocumentManager.Instance.DocumentViews.findIndex(dv => dv.Document === target);
     }
 
     public getLightboxDocumentView = (toFind: Doc): DocumentView | undefined => {
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index a44014444..896048ab3 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -513,7 +513,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         DocCreatorMenu.Instance.setTemplateDocs(this.getPossibleTemplates());
     };
 
-    specificContextMenu = (e: MouseEventHandler) => {
+    specificContextMenu = (e: React.MouseEvent) => {
         const cm = ContextMenu.Instance;
         const options = cm.findByDescription('Options...');
         const optionItems = options?.subitems ?? [];
-- 
cgit v1.2.3-70-g09d2


From 6ae5bd63d5355a03dba099a149532e7c6b1fd74a Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 9 Oct 2024 16:58:33 -0400
Subject: small changes for pull request; removed schema type reference in
 editableview; a couple lint changes

---
 package-lock.json                                      |  6 +++---
 src/client/views/EditableView.tsx                      |  7 ++++---
 .../collectionFreeForm/CollectionFreeFormView.tsx      |  2 +-
 .../collections/collectionSchema/SchemaCellField.tsx   |  4 ++--
 .../collectionSchema/SchemaColumnHeader.tsx            |  3 ++-
 src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx   |  2 +-
 src/client/views/nodes/ImageBox.tsx                    | 18 +++++++++---------
 7 files changed, 22 insertions(+), 20 deletions(-)

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index 3b1ea2017..c49821f9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17447,9 +17447,9 @@
             }
         },
         "node_modules/dompurify": {
-            "version": "3.1.6",
-            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
-            "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ=="
+            "version": "3.1.7",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.7.tgz",
+            "integrity": "sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ=="
         },
         "node_modules/domutils": {
             "version": "3.1.0",
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 9722b2d4b..9974fc63b 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -54,7 +54,8 @@ export interface EditableProps {
     placeholder?: string;
     wrap?: string; // nowrap, pre-wrap, etc
 
-    schemaFieldType?: SchemaFieldType;
+    inputString?: boolean;
+    inputStringPlaceholder?: string;
     prohibitedText?: Array<string>;
     onClick?: () => void;
     updateAlt?: (newAlt: string) => void;
@@ -290,10 +291,10 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     staticDisplay = () => {
         let toDisplay;
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
-        if (this._props.schemaFieldType === SchemaFieldType.Header){
+        if (this._props.inputString){
             toDisplay = <input className="editableView-input"
             value={gval}
-            placeholder='Add key'
+            placeholder={this._props.inputStringPlaceholder}
             readOnly
             style={{ display: this._props.display, overflow: 'auto', pointerEvents: 'none', fontSize: this._props.fontSize, width: '100%', margin: 0, background: this._props.background}}
             // eslint-disable-next-line jsx-a11y/no-autofocus
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 0cc63d632..d2bc8f2c2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1221,7 +1221,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
      * Function that creates a drawing--a group of ink strokes--to go with the smart draw function.
      */
     @undoBatch
-    createDrawingDoc = (strokeData: [InkData, string, string][], opts: DrawingOptions, gptRes: string) => {
+    createDrawingDoc = (strokeData: [InkData, string, string][], opts: DrawingOptions) => {
         this._drawing = [];
         const xf = this.screenToFreeformContentsXf;
         strokeData.forEach((stroke: [InkData, string, string]) => {
diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
index 84e7b62bf..dab494c0e 100644
--- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx
@@ -5,7 +5,7 @@ import { OverlayView } from '../../OverlayView';
 import { DocumentIconContainer } from '../../nodes/DocumentIcon';
 import React, { FormEvent } from 'react';
 import { FieldView, FieldViewProps } from '../../nodes/FieldView';
-import { ObjectField } from '../../../../fields/ObjectField';
+import { FieldType, ObjectField } from '../../../../fields/ObjectField';
 import { Doc } from '../../../../fields/Doc';
 import { DocumentView } from '../../nodes/DocumentView';
 import DOMPurify from 'dompurify';
@@ -21,7 +21,7 @@ import DOMPurify from 'dompurify';
  */
 
 export interface SchemaCellFieldProps {
-    contents: any;
+    contents: FieldType;
     fieldContents?: FieldViewProps;
     editing?: boolean;
     oneLine?: boolean;
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index c5cdac8af..207e1deac 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -135,7 +135,8 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 placeholder={'Add key'}
                 updateAlt={this.updateAlt} // alternate title to display
                 updateSearch={this.updateKeyDropdown}
-                schemaFieldType={SchemaFieldType.Header} 
+                inputString={true}
+                inputStringPlaceholder={'Add key'}
                 GetValue={() => {
                     if (SchemaColumnHeader.isDefaultField(this.fieldKey)) return '';
                     else if (this._altTitle) return this._altTitle;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 44f743a97..ad47b7848 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -943,7 +943,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     removeDocument={returnFalse}
                     PanelWidth={() => this._menuDimensions.width - 10}
                     PanelHeight={() => this._menuDimensions.height - 60}
-                    ScreenToLocalTransform={Transform.Identity}
+                    ScreenToLocalTransform={() => new Transform(-this._pageX,-this._pageY, 1)}
                     renderDepth={5}
                     whenChildContentsActiveChanged={emptyFunction}
                     focus={emptyFunction}
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 226fad977..c156c80e4 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -124,15 +124,15 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             { fireImmediately: true, delay: 1000 }
         );
         const { layoutDoc } = this;
-        // this._disposers.path = reaction(
-        //     () => ({ nativeSize: this.nativeSize, width: NumCast(this.layoutDoc._width) }),
-        //     ({ nativeSize, width }) => {
-        //         if (layoutDoc === this.layoutDoc || !this.layoutDoc._height) {
-        //             this.layoutDoc._height = (width * nativeSize.nativeHeight) / nativeSize.nativeWidth;
-        //         }
-        //     },
-        //     { fireImmediately: true }
-        // );
+        this._disposers.path = reaction(
+            () => ({ nativeSize: this.nativeSize, width: NumCast(this.layoutDoc._width) }),
+            ({ nativeSize, width }) => {
+                if (layoutDoc === this.layoutDoc || !this.layoutDoc._height) {
+                    this.layoutDoc._height = (width * nativeSize.nativeHeight) / nativeSize.nativeWidth;
+                }
+            },
+            { fireImmediately: true }
+        );
         this._disposers.scroll = reaction(
             () => this.layoutDoc.layout_scrollTop,
             sTop => {
-- 
cgit v1.2.3-70-g09d2


From 772c7a4c4d8867cbc33a673c3e3c6f3e330d395d Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Thu, 10 Oct 2024 19:30:04 -0400
Subject: schema cell editing div height 100%

---
 src/client/views/collections/collectionSchema/CollectionSchemaView.scss | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index c32661214..817ceac97 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -309,6 +309,7 @@
 
 .schemaField-editing {
     outline: none;
+    height: 100%;
 }
 
 
-- 
cgit v1.2.3-70-g09d2


From 040a1c5fd3e80606793e65be3ae821104460511b Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 10 Oct 2024 20:03:56 -0400
Subject: minor lint fixes.

---
 src/client/views/EditableView.tsx                  | 19 +++---
 .../views/collections/CollectionCardDeckView.tsx   |  1 -
 src/client/views/collections/TreeView.tsx          |  4 +-
 .../components/EditableText/EditableText.tsx       | 73 +++++++---------------
 4 files changed, 32 insertions(+), 65 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 898a98c98..e2490cec8 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -7,7 +7,6 @@ import { DocumentIconContainer } from './nodes/DocumentIcon';
 import { FieldView, FieldViewProps } from './nodes/FieldView';
 import { ObservableReactComponent } from './ObservableReactComponent';
 import { OverlayView } from './OverlayView';
-import { SchemaFieldType } from './collections/collectionSchema/SchemaColumnHeader';
 
 export interface EditableProps {
     /**
@@ -289,14 +288,16 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     staticDisplay = () => {
         let toDisplay;
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
-        if (this._props.inputString){
-            toDisplay = <input className="editableView-input"
-            value={gval}
-            placeholder={this._props.inputStringPlaceholder}
-            readOnly
-            style={{ display: this._props.display, overflow: 'auto', pointerEvents: 'none', fontSize: this._props.fontSize, width: '100%', margin: 0, background: this._props.background}}
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-        />
+        if (this._props.inputString) {
+            toDisplay = (
+                <input
+                    className="editableView-input"
+                    value={gval}
+                    placeholder={this._props.inputStringPlaceholder}
+                    readOnly
+                    style={{ display: this._props.display, overflow: 'auto', pointerEvents: 'none', fontSize: this._props.fontSize, width: '100%', margin: 0, background: this._props.background }}
+                />
+            );
         } else {
             toDisplay = (
                 <span
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 92c69c3cf..3122aa587 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -22,7 +22,6 @@ import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup';
 import './CollectionCardDeckView.scss';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
 import { computedFn } from 'mobx-utils';
-import { DocumentDecorations } from '../DocumentDecorations';
 
 enum cardSortings {
     Time = 'time',
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 5444a7a57..2f604aaa5 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -38,7 +38,7 @@ import { CollectionView } from './CollectionView';
 import { TreeSort } from './TreeSort';
 import './TreeView.scss';
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+// eslint-disable-next-line  @typescript-eslint/no-require-imports
 const { TREE_BULLET_WIDTH } = require('../global/globalCssVariables.module.scss'); // prettier-ignore
 
 export interface TreeViewProps {
@@ -500,9 +500,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> {
                 !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key);
             });
 
-        // eslint-disable-next-line no-restricted-syntax
         for (const key of Object.keys(ids).slice().sort()) {
-            // eslint-disable-next-line no-continue
             if (this._props.skipFields?.includes(key) || key === 'title' || key === 'treeView_Open') continue;
             const contents = doc[key];
             let contentElement: (JSX.Element | null)[] | JSX.Element = [];
diff --git a/src/client/views/newlightbox/components/EditableText/EditableText.tsx b/src/client/views/newlightbox/components/EditableText/EditableText.tsx
index e9e7ca264..6273e1859 100644
--- a/src/client/views/newlightbox/components/EditableText/EditableText.tsx
+++ b/src/client/views/newlightbox/components/EditableText/EditableText.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react'
-import './EditableText.scss'
-import { Size } from 'browndash-components'
+import * as React from 'react';
+import './EditableText.scss';
+import { Size } from 'browndash-components';
 
 export interface IEditableTextProps {
-  text: string
-  placeholder?: string
-  editing: boolean
-  onEdit: (newText: string) => void
-  setEditing: (editing: boolean) => void
-  backgroundColor?: string
-  size?: Size
-  height?: number
+    text: string;
+    placeholder?: string;
+    editing: boolean;
+    onEdit: (newText: string) => void;
+    setEditing: (editing: boolean) => void;
+    backgroundColor?: string;
+    size?: Size;
+    height?: number;
 }
 
 /**
@@ -20,46 +20,15 @@ export interface IEditableTextProps {
  * @returns
  */
 export const EditableText = (props: IEditableTextProps) => {
-  const {
-    editing,
-    height,
-    size,
-    text,
-    onEdit,
-    setEditing,
-    backgroundColor,
-    placeholder,
-  } = props
+    const { editing, height, text, onEdit, setEditing, backgroundColor, placeholder } = props;
 
-  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    onEdit(event.target.value)
-  }
+    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        onEdit(event.target.value);
+    };
 
-  return editing ? (
-    <input
-      style={{ background: backgroundColor, height: height }}
-      placeholder={placeholder}
-      size={1}
-      className="lb-editableText"
-      autoFocus
-      onChange={handleOnChange}
-      onBlur={() => setEditing(false)}
-      defaultValue={text}
-    ></input>
-  ) : (
-    <input
-      style={{ background: backgroundColor, height: height }}
-      placeholder={placeholder}
-      size={1}
-      className="lb-editableText"
-      autoFocus
-      onChange={handleOnChange}
-      onBlur={() => setEditing(false)}
-      defaultValue={text}
-    ></input>
-    // <div className="lb-displayText" onClick={(e) => {
-    //     e.stopPropagation()
-    //     setEditing(true)
-    // }}>{text}</div>
-  )
-}
+    return editing ? (
+        <input style={{ background: backgroundColor, height: height }} placeholder={placeholder} size={1} className="lb-editableText" autoFocus onChange={handleOnChange} onBlur={() => setEditing(false)} defaultValue={text}></input>
+    ) : (
+        <input style={{ background: backgroundColor, height: height }} placeholder={placeholder} size={1} className="lb-editableText" autoFocus onChange={handleOnChange} onBlur={() => setEditing(false)} defaultValue={text}></input>
+    );
+};
-- 
cgit v1.2.3-70-g09d2