comitting before deleting comments

2 files changed, 144 insertions, 121 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 3ae2fac7d..2c8225eac 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -3,7 +3,7 @@ import { CursorProperty } from "csstype";
 import { action, computed, IReactionDisposer, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { DataSym, Doc, HeightSym, Opt, WidthSym } from "../../../fields/Doc";
-import { Id } from "../../../fields/FieldSymbols";
+import { Copy, Id, ToScriptString, ToString } from "../../../fields/FieldSymbols";
 import { List } from "../../../fields/List";
 import { listSpec } from "../../../fields/Schema";
 import { SchemaHeaderField } from "../../../fields/SchemaHeaderField";
@@ -24,12 +24,13 @@ import { DocFocusOptions, DocumentView, DocumentViewProps, ViewAdjustment } from
 import { StyleProp } from "../StyleProvider";
 import "./CollectionNoteTakingView.scss";
 import CollectionNoteTakingViewDivider from "./CollectionNoteTakingViewDivider";
-import { CollectionNoteTakingViewFieldColumn } from "./CollectionNoteTakingViewFieldColumn";
+import { CollectionNoteTakingViewColumn } from "./CollectionNoteTakingViewColumn";
 import { CollectionSubView } from "./CollectionSubView";
 import { CollectionViewType } from "./CollectionView";
+import { ObjectField } from "../../../fields/ObjectField";
+import { faThumbsDown } from "@fortawesome/free-solid-svg-icons";
 const _global = (window /* browser */ || global /* node */) as any;
 
-
 export type collectionNoteTakingViewProps = {
     chromeHidden?: boolean;
     viewType?: CollectionViewType;
@@ -37,67 +38,54 @@ export type collectionNoteTakingViewProps = {
     NativeHeight?: () => number;
 };
 
+//TODO: somehow need to update the mapping and then have everything else rerender. Maybe with a refresh boolean like 
+// in Hypermedia?
+
 @observer
 export class CollectionNoteTakingView extends CollectionSubView<Partial<collectionNoteTakingViewProps>>() {
-    //-------------------------------------------- Delete? --------------------------------------------//
-    // Not sure what a pivot field is. Seems like we cause reaction in MobX get rid of it once we exit this view
     _pivotFieldDisposer?: IReactionDisposer;
-    // Seems like we cause reaction in MobX get rid of our height once we exit this view
     _autoHeightDisposer?: IReactionDisposer;
-    //------------------------------------------------------------------------------------------------//
     _masonryGridRef: HTMLDivElement | null = null;
     _draggerRef = React.createRef<HTMLDivElement>();
-    // keeping track of documents. Updated on internal and external drops. What's the difference?
-    _docXfs: { height: () => number, width: () => number, noteTakingDocTransform: () => Transform }[] = [];
-    // Assuming that this is the current css cursor style
+    // _docXfs: { height: () => number, width: () => number, noteTakingDocTransform: () => Transform }[] = [];
+    // @observable _docsByColumnHeader = new Map<string, Doc[]>();
+    //TODO: need to make sure that we save the mapping
     @observable _cursor: CursorProperty = "grab";
-    // gets reset whenever we scroll. Not sure what it is
     @observable _scroll = 0; // used to force the document decoration to update when scrolling
-    // does this mean whether the browser is hidden? Or is chrome something else entirely?
     @computed get chromeHidden() { return this.props.chromeHidden || BoolCast(this.layoutDoc.chromeHidden); }
-    // it looks like this gets the column headers that Mehek was showing just now
     @computed get columnHeaders() { return Cast(this.layoutDoc._columnHeaders, listSpec(SchemaHeaderField), null); }
-    // Still not sure what a pivot is, but it appears that we can actually filter docs somehow?
-    // @computed get pivotField() { return StrCast(this.layoutDoc._pivotField); }
     @computed get pivotField() { return "Col" }
-    // filteredChildren is what you want to work with. It's the list of things that you're currently displaying
     @computed get filteredChildren() { return this.childLayoutPairs.filter(pair => (pair.layout instanceof Doc) && !pair.layout.hidden).map(pair => pair.layout); }
-    // how much margin we give the header
     @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, .05 * this.props.PanelWidth())); }
     @computed get yMargin() { return this.props.yPadding || NumCast(this.layoutDoc._yMargin, 5); } // 2 * this.gridGap)); }
     @computed get gridGap() { return NumCast(this.layoutDoc._gridGap, 10); }
     @computed get numGroupColumns() { return this.columnHeaders.length; }
-    // @computed get columnWidth() {return this.props.PanelWidth() - 2 * this.xMargin;}
-
-    //-------------------------------------------- Parker's Playground --------------------------------------------//
-    // draggedDocBackgroundColors: string[] = []
     @observable columnStartXCoords: number[] = []
     @computed get PanelWidth() {return this.props.PanelWidth()}
     @computed get maxColWdith() {return this.props.PanelWidth() - 2 * this.xMargin;}
-    // dividerXCoords: number[] = []
-    //-------------------------------------------------------------------------------------------------------------//
 
+    // 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.layoutDoc._columnHeaders = new List<SchemaHeaderField>([new SchemaHeaderField('New Column')]);
           this.columnStartXCoords = [0]
+          // add all of the docs that have not been added to a column to this new column
         } else {
           const numHeaders = this.columnHeaders.length
           this.resizeColumns(numHeaders)
         }
     }
 
-    // TODO [pal]: is there a better way to do this?
+    // 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();
-        this._docXfs.length = 0;
         return docs.map((d, i) => {
             const height = () => this.getDocHeight(d);
             const width = () => this.getDocWidth(d);
-            //TODO change style here so that 
             const style = { width: width(), marginTop: this.gridGap, height: height() };
             return <div className={`collectionNoteTakingView-columnDoc`} key={d[Id]} style={style} >
                 {this.getDisplayDoc(d, width)}
@@ -105,12 +93,17 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         });
     }
 
+    // @observable
     get Sections() {
-        if (!this.pivotField || this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>();
-        const columnHeaders = Array.from(this.columnHeaders);
+        if (this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>();
+        const columnHeaders = this.columnHeaders;
         const fields = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []]));
-        let changed = false;
-        this.filteredChildren.map(d => {
+        // let changed = false;
+        // const values = Array.from(this._docsByColumnHeader.values());
+        const docs = this.childDocList
+        if (docs) {
+          docs.map(d => {
+            if (d instanceof Promise) return;
             if (!d[this.pivotField]) {
               d[this.pivotField] = columnHeaders.length > 0 ? columnHeaders[0].heading : `New Column`
             };
@@ -123,35 +116,37 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             if (existingHeader) {
                 fields.get(existingHeader)!.push(d);
             }
-            else {
-                const newSchemaHeader = new SchemaHeaderField(castedSectionValue ? castedSectionValue.toString() : `0`);
-                fields.set(newSchemaHeader, [d]);
-                columnHeaders.push(newSchemaHeader);
-                changed = true;
-            }
+            
+            // else {
+            //     const newSchemaHeader = new SchemaHeaderField(castedSectionValue ? castedSectionValue.toString() : `0`);
+            //     fields.set(newSchemaHeader, [d]);
+            //     columnHeaders.push(newSchemaHeader);
+            //     changed = true;
+            // }
         });
+        }
         // remove all empty columns if hideHeadings is set
         // we will want to have something like this, so that we can hide columns and add them back in
-        if (this.layoutDoc._columnsHideIfEmpty) {
-            Array.from(fields.keys()).filter(key => !fields.get(key)!.length).map(header => {
-                fields.delete(header);
-                columnHeaders.splice(columnHeaders.indexOf(header), 1);
-                changed = true;
-            });
-        }
-        changed && setTimeout(action(() => this.columnHeaders?.splice(0, this.columnHeaders.length, ...columnHeaders)), 0);
+        // We don't ever want hidden columns
+        // if (this.layoutDoc._columnsHideIfEmpty) {
+        //     Array.from(fields.keys()).filter(key => !fields.get(key)!.length).map(header => {
+        //         fields.delete(header);
+        //         columnHeaders.splice(columnHeaders.indexOf(header), 1);
+        //         changed = true;
+        //     });
+        // }
+        // changed && setTimeout(action(() => this.columnHeaders?.splice(0, this.columnHeaders.length, ...columnHeaders)), 0);
         return fields;
     }
 
     componentDidMount() {
         super.componentDidMount?.();
-
         // reset section headers when a new filter is inputted
         this._pivotFieldDisposer = reaction(
             () => this.pivotField,
             () => this.layoutDoc._columnHeaders = new List()
         );
-        //TODO: where the heck are we getting filters from?
+
         this._autoHeightDisposer = reaction(() => this.layoutDoc._autoHeight,
             autoHeight => autoHeight && this.props.setHeight(Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER),
                 this.headerMargin + Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace("px", "")))))));
@@ -167,6 +162,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     moveDocument = (doc: Doc, targetCollection: Doc | undefined, addDocument: (document: Doc) => boolean): boolean => {
         return this.props.removeDocument?.(doc) && addDocument?.(doc) ? true : false;
     }
+
     createRef = (ele: HTMLDivElement | null) => {
         this._masonryGridRef = ele;
         this.createDashEventsTarget(ele!); //so the whole grid is the drop target?
@@ -220,16 +216,12 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     }
     isContentActive = () => this.props.isSelected() || this.props.isContentActive();
 
-    // this is what renders the document that you see on the screen
-    // called in Children: this actually adds a document to our children list
+    // rules for displaying the documents
     getDisplayDoc(doc: Doc, width: () => number) {
         const dataDoc = (!doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS) ? undefined : this.props.DataDoc;
         const height = () => this.getDocHeight(doc);
-
         let dref: Opt<DocumentView>;
         const noteTakingDocTransform = () => this.getDocTransform(doc, dref);
-        this._docXfs.push({ noteTakingDocTransform, width, height });
-        //DocumentView is how the node will be rendered
         return <DocumentView ref={r => dref = r || undefined}
             Document={doc}
             DataDoc={dataDoc || (!Doc.AreProtosEqual(doc[DataSym], doc) && doc[DataSym])}
@@ -241,10 +233,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             docViewPath={this.props.docViewPath}
             fitWidth={this.props.childFitWidth}
             isContentActive={emptyFunction}
-            //TODO: Parker added both of these fields. We may be able to observe elsewhere
             originalBackgroundColor={StrCast(doc.backgroundColor)}
+            //TODO: change this from a prop to a parameter passed into a function
             isNoteTakingView={true}
-
             isDocumentActive={this.isContentActive}
             LayoutTemplate={this.props.childLayoutTemplate}
             LayoutTemplateString={this.props.childLayoutString}
@@ -280,7 +271,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         />;
     }
 
-    //TODO update this to 
+    // This is used to get the coordinates of a document when we go from a view like freeform to columns
     getDocTransform(doc: Doc, dref?: DocumentView) {
         const y = this._scroll; // required for document decorations to update when the text box container is scrolled
         const { scale, translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv || undefined);
@@ -288,7 +279,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         return new Transform(- translateX + (dref?.centeringX || 0), - translateY + (dref?.centeringY || 0), 1).scale(this.props.ScreenToLocalTransform().Scale);
     }
 
-    //TODO need to adjust so that we're basing off number of columns and dividers.
+    // how to get the width of a document. Currently returns the width of the column (minus margins)
+    // if a note doc. Otherwise, returns the normal width (for graphs, images, etc...)
     getDocWidth(d: Doc) {
       const heading = d[this.pivotField] as object
       const castedSectionValue = heading.toString()
@@ -307,6 +299,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
       return width < maxWidth ? width : maxWidth
     }
 
+    // how to get the height of a document. Nothing special here.
     getDocHeight(d?: Doc) {
         if (!d || d.hidden) return 0;
         const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.());
@@ -327,8 +320,8 @@ 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
     resizeColumns = (n: number) => {
-      //TODO: that isn't the proper width of columns
       const totalWidth = this.PanelWidth
       const dividerWidth = 32
       const totaldividerWidth = (n - 1) * dividerWidth
@@ -342,28 +335,14 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
       this.columnStartXCoords = newColXCoords
     }
 
+    // This function is used to preview where a document will drop in a column once a drag is complete.
     @action
     onPointerOver = (e: React.PointerEvent) => {
       if (DragManager.docsBeingDragged.length && this.childDocList) {
         // get the current column based on the mouse's x coordinate
-        // const clientX = e.clientX - 2 * this.gridGap // unsure how large left tab is, may need to change the subtraction op
-        // let col = 0
-        // for (let i = 0; i < this.columnStartXCoords.length; i++) {
-        //   if (clientX > this.columnStartXCoords[i]) {
-        //     col = i
-        //   }
-        // }
-        const col = this.getClientColumn(e)
-        // get all of the docs in that column
-        let sections = [[undefined, this.filteredChildren] as [SchemaHeaderField | undefined, Doc[]]];
-        if (this.pivotField) {
-            const entries = Array.from(this.Sections.entries());
-            sections = this.layoutDoc._columnsSort ? entries.sort(this.sortFunc) : entries;
-        }
-        const docs = sections[col][1]
+        const docs = this.getDocsFromXCoord(e.clientX - 2 * this.gridGap)
         // get the index for where you need to insert the doc you are currently dragging
         const clientY = e.clientY
-        console.log(clientY)
         let dropInd = -1;
         let dropAfter = 0;
         docs.forEach((doc, i) => {
@@ -377,7 +356,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
           const yCoordInBetween = clientY > pos0[1] && (clientY < pos1[1] || i == docs.length - 1)
           if (yCoordInBetween) {
             dropInd = i;
-            console.log(dropInd)
             if (clientY > (pos0[1] + pos1[1]) / 2) {
               dropAfter = 1;
             }
@@ -396,14 +374,14 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
       }
     }
 
-    getClientColumn = (e: React.PointerEvent): number => {
-        const clientX = e.clientX
+    // returns the column index for a given x-coordinate
+    getColumnFromXCoord = (xCoord: number): number => {
         const numColumns = this.columnHeaders.length
         const coords = this.columnStartXCoords
         coords.push(this.props.PanelWidth())
         let colIndex = 0
         for (let i = 0; i < numColumns; i++) {
-            if (clientX > coords[i] && clientX < coords[i + 1]) {
+            if (xCoord > coords[i] && xCoord < coords[i + 1]) {
               colIndex = i
               break
             }
@@ -411,38 +389,53 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         return colIndex
     }
 
-    // TODO: Going to be helpful to look at code to see what exactly this is doing to have the aliases. 
-    // I also think that this code is now incorrect
+    // returns the docs of a column based on the x-coordinate provided. 
+    getDocsFromXCoord = (xCoord: number): Doc[] => {
+      const colIndex = this.getColumnFromXCoord(xCoord)
+      const colHeader = StrCast(this.columnHeaders[colIndex].heading)
+      const docs = this.childDocList
+      const docsMatchingHeader: Doc[] = []
+      if (docs) {
+        docs.map(d => {
+          if (d instanceof Promise) return;
+          const sectionValue = d[this.pivotField] as object;
+          if (sectionValue.toString() == colHeader) {
+            docsMatchingHeader.push(d)
+          }
+        })
+      }
+      return docsMatchingHeader;
+    }
+
+
     @undoBatch
     @action
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
-      // Fairly confident that this is where the swapping of nodes in the various arrays happens
         const where = [de.x, de.y];
-        // start at -1 until we're sure we want to add it to the column
-        //Parker added this to reset doc colors
-
-        //
         let dropInd = -1;
         let dropAfter = 0;
         if (de.complete.docDragData) {
-            // going to re-add the docs to the _docXFs based on position of where we just dropped
-            this._docXfs.map((cd, i) => {
-                const pos = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
-                const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height());
-                // const top = cd.height();
-                // const pos = cd.noteTakingDocTransform().transformPoint(0, cd.height());
-                // TODO: plan
-                // Get the top of the box
-                // Check if there could possibly be a box below
-                
-                // const pos1 = cd.noteTakingDocTransform().transformPoint(0, cd.height());
-                // if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && (i === this._docXfs.length - 1 || where[1] < pos1[1])) {
-                if (where[1] > pos[1] && (i === this._docXfs.length - 1 || where[1] < pos1[1])) {
-                    dropInd = i;
-                    const axis = 1;
-                    dropAfter = where[axis] > (pos[axis] + pos1[axis]) / 2 ? 1 : 0;
-                }
-            });
+            const docs = this.getDocsFromXCoord(de.x)
+            docs.map((d, i) => {
+              const pos0 = this.getDocTransform(d).inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
+              const pos1 = this.getDocTransform(d).inverse().transformPoint(this.getDocWidth(d), this.getDocHeight(d));
+              // const pos = d.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
+              // const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height());
+              // const top = cd.height();
+              // const pos = cd.noteTakingDocTransform().transformPoint(0, cd.height());
+              // TODO: plan
+              // Get the top of the box
+              // Check if there could possibly be a box below
+              
+              // const pos1 = cd.noteTakingDocTransform().transformPoint(0, cd.height());
+              // if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && (i === this._docXfs.length - 1 || where[1] < pos1[1])) {
+              if (where[1] > pos0[1] && (i === docs.length - 1 || where[1] < pos1[1])) {
+                  dropInd = i;
+                  const axis = 1;
+                  dropAfter = where[axis] > (pos0[axis] + pos1[axis]) / 2 ? 1 : 0;
+              }
+          });
+            //TODO: all of this is wrong
             const oldDocs = this.childDocs.length;
             if (super.onInternalDrop(e, de)) {
               // check to see if we actually need anything to the new column of nodes (if droppedDocs != empty)
@@ -452,7 +445,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                 const docs = this.childDocList;
                 // reset drag manager docs, because we just dropped
                 DragManager.docsBeingDragged = [];
-                // still figuring out where to add the document
+                // TODO: I don't think we will actually need any of this, but doesn't hurt to be sure.
                 if (docs && newDocs.length) {
                     const insertInd = dropInd === -1 ? docs.length : dropInd + dropAfter;
                     const offset = newDocs.reduce((off, ndoc) => this.filteredChildren.find((fdoc, i) => ndoc === fdoc && i < insertInd) ? off + 1 : off, 0);
@@ -486,18 +479,29 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         return true;
     }
 
+    // when dropping outside of the current noteTaking context (like a new tab, freeform view, etc...)
     @undoBatch
     @action
     onExternalDrop = async (e: React.DragEvent): Promise<void> => {
         const where = [e.clientX, e.clientY];
         let targInd = -1;
-        this._docXfs.map((cd, i) => {
-            const pos = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
-            const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height());
-            if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && where[1] < pos1[1]) {
-                targInd = i;
-            }
-        });
+        const docs = this.getDocsFromXCoord(where[0])
+        docs.map((d, i) => {
+          const pos0 = this.getDocTransform(d).inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
+          const pos1 = this.getDocTransform(d).inverse().transformPoint(this.getDocWidth(d), this.getDocHeight(d));
+          // const pos0 = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
+          // const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height());
+          if (where[0] > pos0[0] && where[0] < pos1[0] && where[1] > pos0[1] && where[1] < pos1[1]) {
+              targInd = i;
+          }
+        })
+        // this._docXfs.map((cd, i) => {
+        //     const pos = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
+        //     const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height());
+        //     if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && where[1] < pos1[1]) {
+        //         targInd = i;
+        //     }
+        // });
         super.onExternalDrop(e, {}, () => {
             if (targInd !== -1) {
                 const newDoc = this.childDocs[this.childDocs.length - 1];
@@ -510,12 +514,17 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         });
     }
 
-    // sections are important 
+    // setDocsForColHeader = (key: string, docs: Doc[]) => {
+    //   this._docsByColumnHeader = new Map(this._docsByColumnHeader.set(key, docs))
+    // }
+
     headings = () => Array.from(this.Sections);
+
     refList: any[] = [];
+
     sectionNoteTaking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => {
         const type = "number";
-        return <CollectionNoteTakingViewFieldColumn
+        return <CollectionNoteTakingViewColumn
             unobserveHeight={ref => this.refList.splice(this.refList.indexOf(ref), 1)}
             observeHeight={ref => {
                 if (ref) {
@@ -534,6 +543,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                 }
             }}
             addDocument={this.addDocument}
+            // docsByColumnHeader={this._docsByColumnHeader}
+            // setDocsForColHeader={this.setDocsForColHeader}
             chromeHidden={this.chromeHidden}
             columnHeaders={this.columnHeaders}
             Document={this.props.Document}
@@ -563,6 +574,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         />;
     }
 
+    // called when adding a new columnHeader
     @action
     addGroup = (value: string) => {
         if (value && this.columnHeaders) {
@@ -593,6 +605,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         }
     }
 
+    // used to reset column sizes when using the drag handlers
     @action
     setColumnStartXCoords = (movementX: number, colIndex: number) => {
       const coords = [...this.columnStartXCoords]
@@ -600,19 +613,19 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
       this.columnStartXCoords = coords
     }
 
-    // TODO [pal]: factor out the lines that sort the sections as own helper function
     @computed get renderedSections() {
         TraceMobx();
-        let sections = [[undefined, this.filteredChildren] as [SchemaHeaderField | undefined, Doc[]]];
-        if (this.pivotField) {
-            const entries = Array.from(this.Sections.entries());
-            sections = this.layoutDoc._columnsSort ? entries.sort(this.sortFunc) : entries;
-        }
+        // let sections = [[undefined, this.filteredChildren] as [SchemaHeaderField | undefined, Doc[]]];
+        // if (this.pivotField) {
+        //     const entries = Array.from(this.Sections.entries());
+        //     sections = this.layoutDoc._columnsSort ? entries.sort(this.sortFunc) : entries;
+        // }
+        const entries = Array.from(this.Sections.entries());
+        const sections = entries.sort(this.sortFunc)
         const eles: JSX.Element[] = []
         for (let i = 0; i < sections.length; i++) {
             const col = this.sectionNoteTaking(sections[i][0], sections[i][1])
             eles.push(col)
-            //TODO make this look pretty
             if (i < sections.length - 1) {
               eles.push(
                 <CollectionNoteTakingViewDivider
diff --git a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
index 90196ff1c..b299eb739 100644
--- a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx
@@ -52,10 +52,12 @@ interface CSVFieldColumnProps {
     columnStartXCoords: number[]
     PanelWidth: number
     maxColWidth: number
+    // docsByColumnHeader: Map<string, Doc[]>
+    // setDocsForColHeader: (key: string, docs: Doc[]) => void
 }
 
 @observer
-export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFieldColumnProps> {
+export class CollectionNoteTakingViewColumn extends React.Component<CSVFieldColumnProps> {
     @observable private _background = "inherit";
 
     @computed get columnWidth() {
@@ -134,9 +136,17 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
         if (!value && !forceEmptyNote) return false;
         const key = this.props.pivotField;
         const newDoc = Docs.Create.TextDocument(value, { _height: 18, _width: 200, _fitWidth: true, title: value, _autoHeight: true });
-        newDoc[key] = this.getValue(this.props.heading);
+        const colValue = this.getValue(this.props.heading);
+        newDoc[key] = colValue;
         FormattedTextBox.SelectOnLoad = newDoc[Id];
         FormattedTextBox.SelectOnLoadChar = forceEmptyNote ? "" : " ";
+        // let currentDocs: Doc[] = []
+        // const docsFromMap = this.props.docsByColumnHeader.get(colValue)
+        // if (docsFromMap) {
+        //   currentDocs = [...docsFromMap]
+        // }
+        // currentDocs.push(newDoc)
+        // this.props.setDocsForColHeader(colValue, currentDocs)
         return this.props.addDocument?.(newDoc) || false;
     }