From 1638527259a072dfc2ab286bd27bbb1751e8434e Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Fri, 5 Aug 2022 08:30:35 -0500
Subject: stashing to look at master

---
 src/client/views/collections/CollectionNoteTakingViewColumn.tsx | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/client/views/collections/CollectionNoteTakingViewColumn.tsx')

diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index bdcb9c399..0ee5985bb 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -144,6 +144,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
     }
 
     @action
+    @undoBatch
     deleteColumn = () => {
         if (!this.props.columnHeaders) {
           return
@@ -154,6 +155,9 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
           const newHeader = this.props.columnHeaders[newIndex];
           this.props.docList.forEach(d => d[this.props.pivotField] = newHeader.heading.toString())
           this.props.columnHeaders.splice(index, 1);
+          // const newHeaders = this.props.columnHeaders;
+          // newHeaders.splice(index, 1);
+          // this.props.columnHeaders = newHeaders;
           this.props.resizeColumns(this.props.columnHeaders.length)
         }
     }
-- 
cgit v1.2.3-70-g09d2


From 92ccfc514a15b03e5a1c0cb7ccbe9c1fe5ce82ad Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Thu, 11 Aug 2022 07:37:03 -0500
Subject: cc

---
 package-lock.json                                  | 39 ++++++++++++++++++++++
 package.json                                       |  7 ++--
 .../collections/CollectionNoteTakingViewColumn.tsx | 19 +++++++----
 3 files changed, 55 insertions(+), 10 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewColumn.tsx')

diff --git a/package-lock.json b/package-lock.json
index 3b9cda8bb..6149d9314 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5059,6 +5059,16 @@
             "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
             "dev": true
         },
+        "d": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+            "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+            "dev": true,
+            "requires": {
+                "es5-ext": "^0.10.50",
+                "type": "^1.0.1"
+            }
+        },
         "d3-array": {
             "version": "2.12.1",
             "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
@@ -6208,6 +6218,28 @@
                 "is-symbol": "^1.0.2"
             }
         },
+        "es5-ext": {
+            "version": "0.10.62",
+            "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
+            "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
+            "dev": true,
+            "requires": {
+                "es6-iterator": "^2.0.3",
+                "es6-symbol": "^3.1.3",
+                "next-tick": "^1.1.0"
+            }
+        },
+        "es6-iterator": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+            "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+            "dev": true,
+            "requires": {
+                "d": "1",
+                "es5-ext": "^0.10.35",
+                "es6-symbol": "^3.1.1"
+            }
+        },
         "es6-promise": {
             "version": "3.2.1",
             "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz",
@@ -6219,6 +6251,7 @@
             "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
             "dev": true,
             "requires": {
+                "d": "^1.0.1",
                 "ext": "^1.1.2"
             }
         },
@@ -20715,6 +20748,12 @@
             "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
             "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
         },
+        "type": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+            "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
+            "dev": true
+        },
         "type-check": {
             "version": "0.3.2",
             "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
diff --git a/package.json b/package.json
index 2e3ef0a07..177d3a5e6 100644
--- a/package.json
+++ b/package.json
@@ -66,17 +66,17 @@
         "@types/prosemirror-view": "^1.23.1",
         "@types/rc-switch": "^1.9.2",
         "@types/react": "^18.0.15",
-        "@types/react-icons": "^3.0.0",
-        "@types/react-reconciler": "^0.26.4",
-        "@types/react-transition-group": "^4.4.5",
         "@types/react-autosuggest": "^9.3.14",
         "@types/react-color": "^2.17.6",
         "@types/react-datepicker": "^3.1.8",
         "@types/react-dom": "^18.0.6",
         "@types/react-grid-layout": "^1.3.2",
+        "@types/react-icons": "^3.0.0",
         "@types/react-measure": "^2.0.8",
+        "@types/react-reconciler": "^0.26.4",
         "@types/react-select": "^3.1.2",
         "@types/react-table": "^6.8.9",
+        "@types/react-transition-group": "^4.4.5",
         "@types/request": "^2.48.8",
         "@types/request-promise": "^4.1.48",
         "@types/rimraf": "^2.0.5",
@@ -84,6 +84,7 @@
         "@types/shelljs": "^0.8.11",
         "@types/socket.io": "^2.1.13",
         "@types/socket.io-client": "^1.4.36",
+        "@types/socket.io-parser": "^3.0.0",
         "@types/typescript": "^2.0.0",
         "@types/uuid": "^3.4.10",
         "@types/valid-url": "^1.0.3",
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index 4286da2e2..f58d8e937 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -51,8 +51,8 @@ interface CSVFieldColumnProps {
     unobserveHeight: (myref: any) => void;
     //setDraggedCol:(clonedDiv:any, header:SchemaHeaderField, xycoors: )
     editableViewProps: () => any;
-    resizeColumns: (n: number) => void;
-    columnStartXCoords: number[];
+    // resizeColumns: (n: number) => void;
+    // columnStartXCoords: number[];
     PanelWidth: number;
     maxColWidth: number;
     // docsByColumnHeader: Map<string, Doc[]>
@@ -69,12 +69,16 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
             return this.props.maxColWidth;
         }
         const i = this.props.columnHeaders.indexOf(this.props.headingObject);
-        if (i < 0 || i > this.props.columnStartXCoords.length - 1) {
-            return this.props.maxColWidth;
+        if (i >= 0 && this.props.columnHeaders[i].width > 0) {
+            return this.props.columnHeaders[i].width;
         }
-        const endColValue = i == this.props.numGroupColumns - 1 ? this.props.PanelWidth : this.props.columnStartXCoords[i + 1];
-        // TODO make the math work here. 35 is half of 70, which is the current width of the divider
-        return endColValue - this.props.columnStartXCoords[i] - 30;
+        return this.props.maxColWidth;
+        // if (i < 0 || i > this.props.columnStartXCoords.length - 1) {
+        //     return this.props.maxColWidth;
+        // }
+        // const endColValue = i == this.props.numGroupColumns - 1 ? this.props.PanelWidth : this.props.columnStartXCoords[i + 1];
+        // // TODO make the math work here. 35 is half of 70, which is the current width of the divider
+        // return endColValue - this.props.columnStartXCoords[i] - 30;
     }
 
     private dropDisposer?: DragManager.DragDropDisposer;
@@ -156,6 +160,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
             this.props.docList.forEach(d => (d[this.props.pivotField] = 'unset'));
             columnHeaders.splice(index, 1);
         }
+        // probably need to add something here for sizing purposes
     };
 
     menuCallback = (x: number, y: number) => {
-- 
cgit v1.2.3-70-g09d2


From 6f7a94b0fa65729f03b49e8aecf9eb3c8a2461ff Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Fri, 12 Aug 2022 14:43:41 -0700
Subject: sizing works but undo redo no longer does

---
 .../views/collections/CollectionNoteTakingView.tsx | 40 ++++++++++++++--------
 .../collections/CollectionNoteTakingViewColumn.tsx | 23 ++++++++-----
 2 files changed, 40 insertions(+), 23 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewColumn.tsx')

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index b3e154dac..0aa1b6839 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -72,7 +72,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         //     return 3 2 1 4 56
         // }
         if (needsUnsetCategory) {
-            columnHeaders.push(new SchemaHeaderField('unset', undefined, undefined, this.maxColWdith));
+            columnHeaders.push(new SchemaHeaderField('unset', undefined, undefined, 1));
         }
         return columnHeaders;
     }
@@ -103,16 +103,20 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @computed get PanelWidth() {
         return this.props.PanelWidth();
     }
-    @computed get maxColWdith() {
+    @computed get maxColWidth() {
         return this.props.PanelWidth() - 2 * this.xMargin;
     }
+    @computed get availableWidth() {
+        const numDividers = this.columnHeaders.length - 1;
+        return this.maxColWidth - numDividers * this.dividerWidth;
+    }
 
     // If the user has not yet created any docs (in another view), this will create a single column. Otherwise,
     // it will adjust according to the
     constructor(props: any) {
         super(props);
         if (this.columnHeaders === undefined) {
-            this.dataDoc.columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField('New Column', undefined, undefined, this.maxColWdith)]);
+            this.dataDoc.columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField('New Column', undefined, undefined, 1)]);
             // add all of the docs that have not been added to a column to this new column
         }
     }
@@ -186,7 +190,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         // this._disposers.headers = reaction(
         //     () => this.columnHeaders.slice(),
         //     // TODO: is this correct?
-        //     headers => this.resizeColumns(headers.length, true),
+        //     headers => this.resizeColumns(headers.length, false),
         //     { fireImmediately: true }
         // );
     }
@@ -334,7 +338,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         const heading = !d[this.notetakingCategoryField] ? 'unset' : Field.toString(d[this.notetakingCategoryField] as Field);
         const existingHeader = this.columnHeaders.find(sh => sh.heading === heading);
         const existingWidth = existingHeader?.width ? existingHeader.width : 0;
-        const maxWidth = existingWidth > 0 ? existingWidth : this.maxColWdith - 2 * this.xMargin;
+        const maxWidth = existingWidth > 0 ? existingWidth * this.availableWidth - 2 * this.xMargin : this.maxColWidth - 2 * this.xMargin;
         // const index = existingHeader ? this.columnHeaders.indexOf(existingHeader) : 0;
         // const endColValue = index === this.columnHeaders.length - 1 || index > this.columnStartXCoords.length - 1 ? this.PanelWidth : this.columnStartXCoords[index + 1];
         // const maxWidth = index > this.columnStartXCoords.length - 1 ? this.PanelWidth : endColValue - this.columnStartXCoords[index] - 3 * this.xMargin;
@@ -367,10 +371,14 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     // called when a column is either added or deleted. This function creates n evenly spaced columns
     @action
     resizeColumns = (n: number, isAdd: boolean) => {
-        let scaleFactor = isAdd ? Math.floor((n - 1)) / n : Math.floor((n + 1) / n);
-        if (isAdd && n == 1) scaleFactor = 1;
+        if (n == 1) {
+          this.columnHeaders[0].setWidth(1);
+          return;
+        }
+        let scaleFactor = isAdd ? (n - 1) / n : (n + 1) / n;
+        // if (isAdd && n == 1) scaleFactor = 1;
         this.columnHeaders.forEach(h => {
-          h.width < 0 ? h.setWidth((this.maxColWdith - this.dividerWidth) / n) : h.setWidth(h.width * scaleFactor);
+            h.width < 0 ? h.setWidth(1 / n) : h.setWidth(h.width * scaleFactor);
         });
         // if we're adding, need to
 
@@ -424,7 +432,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         let colStartXCoord = 0;
         for (let i = 0; i < numColumns; i++) {
             coords.push(colStartXCoord);
-            colStartXCoord += this.columnHeaders[i].width + this.dividerWidth;
+            colStartXCoord += this.columnHeaders[i].width * this.availableWidth + this.dividerWidth;
         }
 
         coords.push(this.PanelWidth);
@@ -600,13 +608,15 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                 columnHeaders={this.columnHeaders}
                 Document={this.props.Document}
                 DataDoc={this.props.DataDoc}
-                // resizeColumns={this.resizeColumns}
+                resizeColumns={this.resizeColumns}
                 renderChildren={this.children}
                 numGroupColumns={this.numGroupColumns}
                 gridGap={this.gridGap}
                 pivotField={this.notetakingCategoryField}
                 // columnStartXCoords={this.columnStartXCoords}
-                maxColWidth={this.maxColWdith}
+                dividerWidth={this.dividerWidth}
+                maxColWidth={this.maxColWidth}
+                availableWidth={this.availableWidth}
                 PanelWidth={this.PanelWidth}
                 key={heading?.heading ?? ''}
                 headings={this.headings}
@@ -628,9 +638,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @undoBatch
     addGroup = (value: string) => {
         const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null);
-        const colWidth = (this.PanelWidth - this.numGroupColumns * this.dividerWidth) / (this.numGroupColumns + 1);
+        // const colWidth = (this.PanelWidth - this.numGroupColumns * this.dividerWidth) / (this.numGroupColumns + 1);
         this.resizeColumns(this.numGroupColumns + 1, true);
-        return value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, colWidth)) ? true : false;
+        return value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, 1 / (this.numGroupColumns + 1))) ? true : false;
     };
 
     sortFunc = (a: [SchemaHeaderField, Doc[]], b: [SchemaHeaderField, Doc[]]): 1 | -1 => {
@@ -656,8 +666,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     setColumnStartXCoords = (movementX: number, colIndex: number) => {
         const leftHeader = this.columnHeaders[colIndex];
         const rightHeader = this.columnHeaders[colIndex + 1];
-        leftHeader.setWidth(leftHeader.width + movementX);
-        rightHeader.setWidth(rightHeader.width - movementX);
+        leftHeader.setWidth(leftHeader.width + movementX / this.availableWidth);
+        rightHeader.setWidth(rightHeader.width - movementX / this.availableWidth);
         // const coords = [...this.columnStartXCoords];
         // coords[colIndex] += movementX;
         // this.columnStartXCoords = coords;
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index f58d8e937..8ad684cec 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -51,10 +51,12 @@ interface CSVFieldColumnProps {
     unobserveHeight: (myref: any) => void;
     //setDraggedCol:(clonedDiv:any, header:SchemaHeaderField, xycoors: )
     editableViewProps: () => any;
-    // resizeColumns: (n: number) => void;
+    resizeColumns: (n: number, isAdd: boolean) => void;
     // columnStartXCoords: number[];
     PanelWidth: number;
     maxColWidth: number;
+    dividerWidth: number;
+    availableWidth: number;
     // docsByColumnHeader: Map<string, Doc[]>
     // setDocsForColHeader: (key: string, docs: Doc[]) => void
 }
@@ -63,16 +65,22 @@ interface CSVFieldColumnProps {
 export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColumnProps> {
     @observable private _background = 'inherit';
 
+    // the "width" property of headers is relative (a percentage of available space)
     @computed get columnWidth() {
         // base cases
-        if (!this.props.columnHeaders || !this.props.headingObject || this.props.columnHeaders.length == 1) {
+        if (!this.props.columnHeaders || !this.props.headingObject) {
             return this.props.maxColWidth;
         }
-        const i = this.props.columnHeaders.indexOf(this.props.headingObject);
-        if (i >= 0 && this.props.columnHeaders[i].width > 0) {
-            return this.props.columnHeaders[i].width;
+        if (this.props.columnHeaders.length == 1) {
+            // this.props.columnHeaders[0].setWidth(1);
+            return this.props.maxColWidth;
         }
-        return this.props.maxColWidth;
+        const i = this.props.columnHeaders.indexOf(this.props.headingObject);
+        return this.props.columnHeaders[i].width * this.props.availableWidth;
+        // if (i >= 0 && this.props.columnHeaders[i].width > 0) {
+        //     return this.props.columnHeaders[i].width;
+        // }
+        // return this.props.maxColWidth;
         // if (i < 0 || i > this.props.columnStartXCoords.length - 1) {
         //     return this.props.maxColWidth;
         // }
@@ -150,7 +158,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
         return this.props.addDocument?.(newDoc) || false;
     };
 
-    @undoBatch
     @action
     @undoBatch
     deleteColumn = () => {
@@ -158,9 +165,9 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
         if (columnHeaders && this.props.headingObject) {
             const index = columnHeaders.indexOf(this.props.headingObject);
             this.props.docList.forEach(d => (d[this.props.pivotField] = 'unset'));
+            this.props.resizeColumns(columnHeaders.length - 1, false)
             columnHeaders.splice(index, 1);
         }
-        // probably need to add something here for sizing purposes
     };
 
     menuCallback = (x: number, y: number) => {
-- 
cgit v1.2.3-70-g09d2


From 5655589d46c01af74c959c2d365d3eeb15feb407 Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Fri, 19 Aug 2022 06:48:46 -0500
Subject: persistent resizing undo/redo issues

---
 .../views/collections/CollectionNoteTakingView.tsx | 30 ++++++++++++++--------
 .../collections/CollectionNoteTakingViewColumn.tsx |  6 +++--
 2 files changed, 23 insertions(+), 13 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewColumn.tsx')

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 0aa1b6839..447e1f0c8 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -368,18 +368,27 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         return Math.min(childHeight, maxHeight, panelHeight);
     }
 
-    // called when a column is either added or deleted. This function creates n evenly spaced columns
+    // called when a column is either added or deleted.
+    // TODO: this needs help still
     @action
-    resizeColumns = (n: number, isAdd: boolean) => {
+    resizeColumns = (isAdd: boolean, colWidth: number, colIndex: number) => {
+        const n = this.columnHeaders.length;
         if (n == 1) {
-          this.columnHeaders[0].setWidth(1);
-          return;
+            this.columnHeaders[0].setWidth(1);
+            return true;
         }
-        let scaleFactor = isAdd ? (n - 1) / n : (n + 1) / n;
-        // if (isAdd && n == 1) scaleFactor = 1;
-        this.columnHeaders.forEach(h => {
-            h.width < 0 ? h.setWidth(1 / n) : h.setWidth(h.width * scaleFactor);
+        const scaleFactor = isAdd ? 1 - colWidth : 1 / (1 - colWidth);
+        this.columnHeaders.forEach((h, i) => {
+            if (!(isAdd && i == colIndex)) {
+                h.width < 0 ? h.setWidth(1 / n) : h.setWidth(h.width * scaleFactor);
+            }
         });
+        return true;
+        // let scaleFactor = isAdd ? (n - 1) / n : (n + 1) / n;
+        // // if (isAdd && n == 1) scaleFactor = 1;
+        // this.columnHeaders.forEach(h => {
+        //     h.width < 0 ? h.setWidth(1 / n) : h.setWidth(h.width * scaleFactor);
+        // });
         // if we're adding, need to
 
         // const newColXCoords: number[] = [];
@@ -638,9 +647,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @undoBatch
     addGroup = (value: string) => {
         const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null);
-        // const colWidth = (this.PanelWidth - this.numGroupColumns * this.dividerWidth) / (this.numGroupColumns + 1);
-        this.resizeColumns(this.numGroupColumns + 1, true);
-        return value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, 1 / (this.numGroupColumns + 1))) ? true : false;
+        const newColWidth = 1 / (this.numGroupColumns + 1);
+        return value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, newColWidth)) && this.resizeColumns(true, newColWidth, this.columnHeaders.length - 1) ? true : false;
     };
 
     sortFunc = (a: [SchemaHeaderField, Doc[]], b: [SchemaHeaderField, Doc[]]): 1 | -1 => {
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index 8ad684cec..11a0e69ac 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -51,7 +51,7 @@ interface CSVFieldColumnProps {
     unobserveHeight: (myref: any) => void;
     //setDraggedCol:(clonedDiv:any, header:SchemaHeaderField, xycoors: )
     editableViewProps: () => any;
-    resizeColumns: (n: number, isAdd: boolean) => void;
+    resizeColumns: (isAdd: boolean, colWidth: number, colIndex: number) => boolean;
     // columnStartXCoords: number[];
     PanelWidth: number;
     maxColWidth: number;
@@ -165,8 +165,10 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
         if (columnHeaders && this.props.headingObject) {
             const index = columnHeaders.indexOf(this.props.headingObject);
             this.props.docList.forEach(d => (d[this.props.pivotField] = 'unset'));
-            this.props.resizeColumns(columnHeaders.length - 1, false)
+            // should never be 0, currently placeholder
+            const colWidth = this.props.columnHeaders ? this.props.columnHeaders[index].width : 0;
             columnHeaders.splice(index, 1);
+            this.props.resizeColumns(false, colWidth, index);
         }
     };
 
-- 
cgit v1.2.3-70-g09d2


From b7c2e1081e4efe7167a86fb1d9f641bea8b93bba Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Mon, 22 Aug 2022 05:51:13 -0500
Subject: commented all NoteTakingView files

---
 .../views/collections/CollectionNoteTakingView.tsx | 17 ++++++----
 .../collections/CollectionNoteTakingViewColumn.tsx | 38 ++++++----------------
 .../CollectionNoteTakingViewDivider.tsx            |  6 +++-
 3 files changed, 25 insertions(+), 36 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewColumn.tsx')

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index a2f05c031..9e40356d6 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -1,6 +1,6 @@
 import React = require('react');
 import { CursorProperty } from 'csstype';
-import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
+import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { DataSym, Doc, Field, HeightSym, Opt, WidthSym } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
@@ -55,7 +55,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @computed get chromeHidden() {
         return this.props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden);
     }
-    // columnHeaders() returns the list of SchemaHeaderFields currently being used by the layout doc to render the columns
+    // columnHeaders returns the list of SchemaHeaderFields currently being used by the layout doc to render the columns
     @computed get columnHeaders() {
         const columnHeaders = Cast(this.dataDoc.columnHeaders, listSpec(SchemaHeaderField), null);
         const needsUnsetCategory = this.childDocs.some(d => !d[this.notetakingCategoryField] && !columnHeaders.find(sh => sh.heading === 'unset'));
@@ -64,19 +64,17 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         }
         return columnHeaders;
     }
-    // 
+    // notetakingCategoryField returns the key to accessing a document's column value
     @computed get notetakingCategoryField() {
         return 'NotetakingCategory';
     }
-    @computed get filteredChildren() {
-        return this.childLayoutPairs.filter(pair => pair.layout instanceof Doc && !pair.layout.hidden).map(pair => pair.layout);
-    }
     @computed get headerMargin() {
         return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin);
     }
     @computed get xMargin() {
         return NumCast(this.layoutDoc._xMargin, 2 * Math.min(this.gridGap, 0.05 * this.props.PanelWidth()));
     }
+    // dividerWidth returns the width of a CollectionNoteTakingViewDivider
     @computed get dividerWidth() {
         return 32;
     }
@@ -86,15 +84,20 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @computed get gridGap() {
         return NumCast(this.layoutDoc._gridGap, 10);
     }
+    // numGroupColumns returns the number of columns
     @computed get numGroupColumns() {
         return this.columnHeaders.length;
     }
+    // PanelWidth returns the size of the total available space the view occupies
     @computed get PanelWidth() {
         return this.props.PanelWidth();
     }
+    // maxColWidth returns the maximum column width, which is slightly less than the total available space.
     @computed get maxColWidth() {
         return this.props.PanelWidth() - 2 * this.xMargin;
     }
+    // availableWidth is the total amount of non-divider width. Since widths are stored relatively, 
+    // we use availableWidth to convert from a percentage to a pixel count.
     @computed get availableWidth() {
         const numDividers = this.columnHeaders.length - 1;
         return this.maxColWidth - numDividers * this.dividerWidth;
@@ -109,7 +112,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         }
     }
 
-    // passed as a prop to the NoteTakingField, which uses this function
+    // children is passed as a prop to the NoteTakingField, which uses this function
     // to render the docs you see within an individual column.
     children = (docs: Doc[]) => {
         TraceMobx();
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index 11a0e69ac..a866373a9 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -5,11 +5,12 @@ import { observer } from 'mobx-react';
 import { Doc, DocListCast, Opt } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
 import { RichTextField } from '../../../fields/RichTextField';
+import { listSpec } from '../../../fields/Schema';
 import { SchemaHeaderField } from '../../../fields/SchemaHeaderField';
-import { ScriptField } from '../../../fields/ScriptField';
+import { Cast } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
 import { TraceMobx } from '../../../fields/util';
-import { emptyFunction, returnEmptyString, setupMoveUpEvents } from '../../../Utils';
+import { returnEmptyString } from '../../../Utils';
 import { Docs, DocUtils } from '../../documents/Documents';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { DragManager } from '../../util/DragManager';
@@ -21,13 +22,10 @@ import { ContextMenuProps } from '../ContextMenuItem';
 import { EditableView } from '../EditableView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import './CollectionNoteTakingView.scss';
-import { listSpec } from '../../../fields/Schema';
-import { Cast } from '../../../fields/Types';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
 
-// So this is how we are storing a column
 interface CSVFieldColumnProps {
     Document: Doc;
     DataDoc: Opt<Doc>;
@@ -38,7 +36,6 @@ interface CSVFieldColumnProps {
     columnHeaders: SchemaHeaderField[] | undefined;
     headingObject: SchemaHeaderField | undefined;
     yMargin: number;
-    // columnWidth: number;
     numGroupColumns: number;
     gridGap: number;
     type: 'string' | 'number' | 'bigint' | 'boolean' | 'symbol' | 'undefined' | 'object' | 'function' | undefined;
@@ -49,44 +46,32 @@ interface CSVFieldColumnProps {
     screenToLocalTransform: () => Transform;
     observeHeight: (myref: any) => void;
     unobserveHeight: (myref: any) => void;
-    //setDraggedCol:(clonedDiv:any, header:SchemaHeaderField, xycoors: )
     editableViewProps: () => any;
     resizeColumns: (isAdd: boolean, colWidth: number, colIndex: number) => boolean;
-    // columnStartXCoords: number[];
     PanelWidth: number;
     maxColWidth: number;
     dividerWidth: number;
     availableWidth: number;
-    // docsByColumnHeader: Map<string, Doc[]>
-    // setDocsForColHeader: (key: string, docs: Doc[]) => void
 }
 
+/**
+ * CollectionNoteTakingViewColumn represents an individual column rendered in CollectionNoteTakingView. The
+ * majority of functions here are for rendering styles.
+ */
 @observer
 export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColumnProps> {
     @observable private _background = 'inherit';
 
-    // the "width" property of headers is relative (a percentage of available space)
+    // columnWidth returns the width of a column in absolute pixels
     @computed get columnWidth() {
-        // base cases
         if (!this.props.columnHeaders || !this.props.headingObject) {
             return this.props.maxColWidth;
         }
         if (this.props.columnHeaders.length == 1) {
-            // this.props.columnHeaders[0].setWidth(1);
             return this.props.maxColWidth;
         }
         const i = this.props.columnHeaders.indexOf(this.props.headingObject);
         return this.props.columnHeaders[i].width * this.props.availableWidth;
-        // if (i >= 0 && this.props.columnHeaders[i].width > 0) {
-        //     return this.props.columnHeaders[i].width;
-        // }
-        // return this.props.maxColWidth;
-        // if (i < 0 || i > this.props.columnStartXCoords.length - 1) {
-        //     return this.props.maxColWidth;
-        // }
-        // const endColValue = i == this.props.numGroupColumns - 1 ? this.props.PanelWidth : this.props.columnStartXCoords[i + 1];
-        // // TODO make the math work here. 35 is half of 70, which is the current width of the divider
-        // return endColValue - this.props.columnStartXCoords[i] - 30;
     }
 
     private dropDisposer?: DragManager.DragDropDisposer;
@@ -96,8 +81,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
     @observable _color = this.props.headingObject ? this.props.headingObject.color : '#f1efeb';
     _ele: HTMLElement | null = null;
 
-    // This is likely similar to what we will be doing. Why do we need to make these refs?
-    // is that the only way to have drop targets?
     createColumnDropRef = (ele: HTMLDivElement | null) => {
         this.dropDisposer?.();
         if (ele) {
@@ -146,6 +129,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
     @action pointerLeave = () => (this._background = 'inherit');
     textCallback = (char: string) => this.addNewTextDoc('-typed text-', false, true);
 
+    // addNewTextDoc is called when a user starts typing in a column to create a new node
     @action
     addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => {
         if (!value && !forceEmptyNote) return false;
@@ -158,6 +142,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
         return this.props.addDocument?.(newDoc) || false;
     };
 
+    // deleteColumn is called when a user deletes a column using the 'trash' icon in the button area. 
     @action
     @undoBatch
     deleteColumn = () => {
@@ -270,7 +255,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
                 </div>
             </div>
         ) : null;
-        // const templatecols = `${this.props.columnWidth / this.props.numGroupColumns}px `;
         const templatecols = `${this.columnWidth}px `;
         const type = this.props.Document.type;
         return (
@@ -297,7 +281,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
                         {!this.props.chromeHidden && type !== DocumentType.PRES ? (
                             <div
                                 className="collectionNoteTakingView-DocumentButtons"
-                                // style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10 }}>
                                 style={{ width: this.columnWidth - 20, marginBottom: 10 }}>
                                 <div key={`${heading}-add-document`} className="collectionNoteTakingView-addDocumentButton">
                                     <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.textCallback} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} />
@@ -326,7 +309,6 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
                 className={'collectionNoteTakingViewFieldColumn' + (SnappingManager.GetIsDragging() ? 'Dragging' : '')}
                 key={heading}
                 style={{
-                    //TODO: change this so that it's based on the column width
                     width: this.columnWidth,
                     background: this._background,
                 }}
diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
index 2633bffeb..7defeb031 100644
--- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
@@ -1,7 +1,6 @@
 import { action, observable } from 'mobx';
 import * as React from 'react';
 import { emptyFunction, setupMoveUpEvents } from '../../../Utils';
-import { Transform } from '../../util/Transform';
 import { UndoManager } from '../../util/UndoManager';
 
 interface DividerProps {
@@ -10,6 +9,11 @@ interface DividerProps {
     setColumnStartXCoords: (movementX: number, colIndex: number) => void;
 }
 
+/**
+ * CollectionNoteTakingViewDivider is a divider between CollectionNoteTakingViewColumns,
+ * which only appear when there is more than 1 column in CollectionNoteTakingView. Dividers
+ * are two simple vertical lines that allow the user to alter the widths of CollectionNoteTakingViewColumns.
+ */
 export class CollectionNoteTakingViewDivider extends React.Component<DividerProps> {
     @observable private isHoverActive = false;
     @observable private isResizingActive = false;
-- 
cgit v1.2.3-70-g09d2


From 3cf60a6118a5994e43c8ac9d00092992d6c83700 Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Mon, 22 Aug 2022 11:03:31 -0400
Subject: can't add column if name in use

---
 src/client/views/collections/CollectionNoteTakingView.tsx  |  9 +++++++--
 .../views/collections/CollectionNoteTakingViewColumn.tsx   | 14 ++++++++------
 .../views/collections/CollectionNoteTakingViewDivider.tsx  |  2 +-
 3 files changed, 16 insertions(+), 9 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewColumn.tsx')

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 9e40356d6..16fefc55a 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -587,10 +587,15 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
 
     // addGroup is called when adding a new columnHeader, adding a SchemaHeaderField to our list of 
     // columnHeaders and resizing the existing columns to make room for our new one.
-    @undoBatch
     @action
     @undoBatch
     addGroup = (value: string) => {
+        for (const header of this.columnHeaders) {
+          if (header.heading == value) {
+            alert('You cannot use an existing column name. Please try a new column name');
+            return value;
+          }
+        }
         const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null);
         const newColWidth = 1 / (this.numGroupColumns + 1);
         return value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, newColWidth)) && this.resizeColumns(true, newColWidth, this.columnHeaders.length - 1) ? true : false;
@@ -607,7 +612,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         }
     };
 
-    // setColumnStartXCoords is used to update column sizes when using the drag handlers between columns
+    // setColumnStartXCoords is used to update column widths when using the drag handlers between columns
     @action
     setColumnStartXCoords = (movementXScreen: number, colIndex: number) => {
         const movementX = this.props.ScreenToLocalTransform().transformDirection(movementXScreen, 0)[0];
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index a866373a9..e619b084b 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -142,15 +142,19 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
         return this.props.addDocument?.(newDoc) || false;
     };
 
-    // deleteColumn is called when a user deletes a column using the 'trash' icon in the button area. 
+    // deleteColumn is called when a user deletes a column using the 'trash' icon in the button area.
+    // If the user deletes the first column, the documents get moved to the second column. Otherwise,
+    // all docs are added to the column directly to the left.
     @action
     @undoBatch
     deleteColumn = () => {
         const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null);
         if (columnHeaders && this.props.headingObject) {
             const index = columnHeaders.indexOf(this.props.headingObject);
-            this.props.docList.forEach(d => (d[this.props.pivotField] = 'unset'));
-            // should never be 0, currently placeholder
+            const newColIndex = index > 0 ? index - 1 : 1;
+            const newColHeader = this.props.columnHeaders ? this.props.columnHeaders[newColIndex] : undefined;
+            const newHeading = newColHeader ? newColHeader.heading : 'unset';
+            this.props.docList.forEach(d => (d[this.props.pivotField] = newHeading));
             const colWidth = this.props.columnHeaders ? this.props.columnHeaders[index].width : 0;
             columnHeaders.splice(index, 1);
             this.props.resizeColumns(false, colWidth, index);
@@ -279,9 +283,7 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
                         </div>
 
                         {!this.props.chromeHidden && type !== DocumentType.PRES ? (
-                            <div
-                                className="collectionNoteTakingView-DocumentButtons"
-                                style={{ width: this.columnWidth - 20, marginBottom: 10 }}>
+                            <div className="collectionNoteTakingView-DocumentButtons" style={{ width: this.columnWidth - 20, marginBottom: 10 }}>
                                 <div key={`${heading}-add-document`} className="collectionNoteTakingView-addDocumentButton">
                                     <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.textCallback} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} />
                                 </div>
diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
index 7defeb031..8d659f790 100644
--- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
@@ -10,7 +10,7 @@ interface DividerProps {
 }
 
 /**
- * CollectionNoteTakingViewDivider is a divider between CollectionNoteTakingViewColumns,
+ * CollectionNoteTakingViewDivider are dividers between CollectionNoteTakingViewColumns,
  * which only appear when there is more than 1 column in CollectionNoteTakingView. Dividers
  * are two simple vertical lines that allow the user to alter the widths of CollectionNoteTakingViewColumns.
  */
-- 
cgit v1.2.3-70-g09d2


From 7f4f2840cd64c1eb40851c2ee410fa1905288b73 Mon Sep 17 00:00:00 2001
From: ljungster <parkerljung@gmail.com>
Date: Mon, 22 Aug 2022 15:53:08 -0400
Subject: c

---
 src/client/views/collections/CollectionNoteTakingView.tsx       | 2 +-
 src/client/views/collections/CollectionNoteTakingViewColumn.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/views/collections/CollectionNoteTakingViewColumn.tsx')

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 16fefc55a..302c4eaea 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -587,8 +587,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
 
     // addGroup is called when adding a new columnHeader, adding a SchemaHeaderField to our list of 
     // columnHeaders and resizing the existing columns to make room for our new one.
-    @action
     @undoBatch
+    @action
     addGroup = (value: string) => {
         for (const header of this.columnHeaders) {
           if (header.heading == value) {
diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index e619b084b..4610da4e3 100644
--- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -145,8 +145,8 @@ export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColu
     // deleteColumn is called when a user deletes a column using the 'trash' icon in the button area.
     // If the user deletes the first column, the documents get moved to the second column. Otherwise,
     // all docs are added to the column directly to the left.
-    @action
     @undoBatch
+    @action
     deleteColumn = () => {
         const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null);
         if (columnHeaders && this.props.headingObject) {
-- 
cgit v1.2.3-70-g09d2