cleaned up

3 files changed, 126 insertions, 261 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss
index b6bb8ce2b..c0297a648 100644
--- a/src/client/views/collections/CollectionNoteTakingView.scss
+++ b/src/client/views/collections/CollectionNoteTakingView.scss
@@ -47,20 +47,10 @@
   }
 }
 
-.collectionMasonryView {
-    display: inline;
-}
-
-.collectionStackingView {
+.collectionNoteTakingView {
     display: flex;
 }
 
-.collectionStackingMasonry-cont {
-    position: relative;
-    height: 100%;
-    width: 100%;
-}
-
 // TODO:glr Turn this into a seperate class
 .documentButtonMenu {
     position: relative;
@@ -85,8 +75,7 @@
     }
 }
 
-.collectionStackingView,
-.collectionMasonryView {
+.collectionNoteTakingView {
     height: 100%;
     width: 100%;
     position: absolute;
@@ -101,11 +90,11 @@
         display: block;
     }
 
-    .collectionStackingViewFieldColumn {
+    .collectionNoteTakingViewFieldColumn {
         height: max-content;
     }
 
-    .collectionStackingViewFieldColumnDragging {
+    .collectionNoteTakingViewFieldColumnDragging {
         height: 100%;
     }
 
@@ -114,41 +103,14 @@
         position: absolute;
     }
 
-    .collectionStackingView-docView-container {
+    .collectionNoteTakingView-docView-container {
         width: 45%;
         margin: 5% 2.5%;
         padding-left: 2.5%;
         height: auto;
     }
 
-    .collectionStackingView-flexCont {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        align-items: center;
-    }
-
-    .collectionStackingView-masonrySingle,
-    .collectionStackingView-masonryGrid {
-        width: 100%;
-        display: grid;
-        top: 0;
-        left: 0;
-    }
-
-    .collectionStackingView-masonrySingle {
-        height: 100%;
-        position: absolute;
-    }
-
-    .collectionStackingView-masonryGrid {
-        margin: auto;
-        height: max-content;
-        position: relative;
-        grid-auto-rows: 0px;
-    }
-
-    .collectionStackingView-masonrySingle {
+    .collectionNoteTakingView-Nodes {
         width: 100%;
         height: 100%;
         position: absolute;
@@ -160,7 +122,7 @@
         position: absolute;
     }
 
-    .collectionStackingView-description {
+    .collectionNoteTakingView-description {
         font-size: 100%;
         margin-bottom: 1vw;
         padding: 10px;
@@ -171,15 +133,15 @@
         color: $white;
     }
 
-    .collectionStackingView-columnDragger {
+    .collectionNoteTakingView-columnDragger {
         width: 15;
         height: 15;
         position: absolute;
         margin-left: -5;
     }
 
-    // Documents in stacking view
-    .collectionStackingView-columnDoc {
+    // Documents in NoteTaking view
+    .collectionNoteTakingView-columnDoc {
         display: flex;
         // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change 
         position: relative;
@@ -211,19 +173,7 @@
         }
     }
 
-    .collectionStackingView-masonryDoc {
-        transform-origin: top left;
-        grid-column-end: span 1;
-        height: 100%;
-        margin: auto;
-        display: inline-grid;
-    }
-
-    .collectionStackingView-masonrySection {
-        margin: auto;
-    }
-
-    .collectionStackingView-collapseBar {
+    .collectionNoteTakingView-collapseBar {
         margin-left: 2px;
         margin-right: 2px;
         margin-top: 2px;
@@ -237,7 +187,7 @@
         }
     }
 
-    .collectionStackingView-miniHeader {
+    .collectionNoteTakingView-miniHeader {
         width: 100%;
 
         .editableView-container-editing-oneLine {
@@ -276,7 +226,7 @@
         }
     }
 
-    .collectionStackingView-sectionHeader {
+    .collectionNoteTakingView-sectionHeader {
         text-align: center;
         margin: auto;
         margin-bottom: 10px;
@@ -293,7 +243,7 @@
             cursor: text
         }
 
-        .collectionStackingView-sectionHeader-subCont {
+        .collectionNoteTakingView-sectionHeader-subCont {
             outline: none;
             border: 0px;
             width: 100%;
@@ -329,7 +279,7 @@
             }
         }
 
-        .collectionStackingView-sectionColor {
+        .collectionNoteTakingView-sectionColor {
             position: absolute;
             left: 0;
             top: 0;
@@ -340,12 +290,12 @@
                 max-width: 102px;
             }
 
-            .collectionStackingView-sectionColorButton {
+            .collectionNoteTakingView-sectionColorButton {
                 height: 30px;
                 display: inherit;
             }
 
-            .collectionStackingView-colorPicker {
+            .collectionNoteTakingView-colorPicker {
                 width: 78px;
                 z-index: 10;
                 position: relative;
@@ -371,7 +321,7 @@
             }
         }
 
-        .collectionStackingView-sectionOptions {
+        .collectionNoteTakingView-sectionOptions {
             position: absolute;
             right: 0;
             top: 0;
@@ -382,11 +332,11 @@
                 max-width: 102px;
             }
 
-            .collectionStackingView-sectionOptionButton {
+            .collectionNoteTakingView-sectionOptionButton {
                 height: 30px;
             }
 
-            .collectionStackingView-optionPicker {
+            .collectionNoteTakingView-optionPicker {
 
                 .optionOptions {
                     display: inline;
@@ -406,7 +356,7 @@
             }
         }
 
-        .collectionStackingView-sectionDelete {
+        .collectionNoteTakingView-sectionDelete {
             position: absolute;
             right: 25px;
             top: 0;
@@ -415,22 +365,22 @@
         }
     }
 
-    .collectionStackingView-sectionHeader:hover {
-        .collectionStackingView-sectionColor {
+    .collectionNoteTakingView-sectionHeader:hover {
+        .collectionNoteTakingView-sectionColor {
             display: unset;
         }
 
-        .collectionStackingView-sectionOptions {
+        .collectionNoteTakingView-sectionOptions {
             display: unset;
         }
 
-        .collectionStackingView-sectionDelete {
+        .collectionNoteTakingView-sectionDelete {
             display: unset;
         }
     }
 
-    .collectionStackingView-addDocumentButton,
-    .collectionStackingView-addGroupButton {
+    .collectionNoteTakingView-addDocumentButton,
+    .collectionNoteTakingView-addGroupButton {
         display: flex;
         overflow: hidden;
         margin: auto;
@@ -459,7 +409,7 @@
         }
     }
 
-    .collectionStackingView-addDocumentButton {
+    .collectionNoteTakingView-addDocumentButton {
         font-size: 75%;
         letter-spacing: 2px;
         cursor: pointer;
@@ -473,7 +423,7 @@
         }
     }
 
-    .collectionStackingView-addGroupButton {
+    .collectionNoteTakingView-addGroupButton {
         background: rgb(238, 238, 238);
         font-size: 75%;
         text-align: center;
@@ -531,8 +481,8 @@
 
 @media only screen and (max-device-width: 480px) {
 
-    .collectionStackingView .collectionStackingView-columnDragger,
-    .collectionMasonryView .collectionStackingView-columnDragger {
+    .collectionNoteTakingView .collectionNoteTakingView-columnDragger,
+    .collectionNoteTakingView-columnDragger {
         width: 0.1;
         height: 0.1;
         opacity: 0;
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 35f27a862..ff9e22ce1 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -45,14 +45,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     _autoHeightDisposer?: IReactionDisposer;
     //------------------------------------------------------------------------------------------------//
     _masonryGridRef: HTMLDivElement | null = null;
-    // used in a column dragger, likely due for the masonry grid view. We want to use this 
     _draggerRef = React.createRef<HTMLDivElement>();
     // keeping track of documents. Updated on internal and external drops. What's the difference?
-    _docXfs: { height: () => number, width: () => number, stackedDocTransform: () => Transform }[] = [];
-    // Doesn't look like this field is being used anywhere. Obsolete?
-    _columnStart: number = 0;
-    // map of node headers to their heights. Used in Masonry
-    @observable _heightMap = new Map<string, number>();
+    _docXfs: { height: () => number, width: () => number, noteTakingDocTransform: () => Transform }[] = [];
     // Assuming that this is the current css cursor style
     @observable _cursor: CursorProperty = "grab";
     // gets reset whenever we scroll. Not sure what it is
@@ -71,19 +66,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     @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); }
-    // are we stacking or masonry?
-    @computed get isStackingView() { return (this.props.viewType ?? this.layoutDoc._viewType) === CollectionViewType.Stacking || (this.props.viewType ?? this.layoutDoc._viewType) === CollectionViewType.NoteTaking; }
-    // this is the number of StackingViewFieldColumns that we have
-    @computed get numGroupColumns() { return this.isStackingView ? Math.max(1, this.Sections.size + (this.showAddAGroup ? 1 : 0)) : 1; }
-    // reveals a button to add a group in masonry view
-    @computed get showAddAGroup() { return this.pivotField && !this.chromeHidden; }
-    // columnWidth handles the margin on the left and right side of the documents
-    @computed get columnWidth() {
-        return Math.min(this.props.PanelWidth() - 2 * this.xMargin,
-            this.isStackingView ? Number.MAX_VALUE : this.layoutDoc._columnWidth === -1 ? this.props.PanelWidth() - 2 * this.xMargin : NumCast(this.layoutDoc._columnWidth, 250));
-    }
-    
-    @computed get NodeWidth() { return this.props.PanelWidth() - this.gridGap; }
+    @computed get numGroupColumns() { return this.Sections.size; }
+    @computed get columnWidth() {return this.props.PanelWidth() - 2 * this.xMargin;}
 
     //-------------------------------------------- Parker's Playground --------------------------------------------//
     draggedDocBackgroundColors: string[] = []
@@ -115,30 +99,16 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         return docs.map((d, i) => {
             const height = () => this.getDocHeight(d);
             const width = () => this.getDocWidth(d);
-            // assuming we need to get rowSpan because we might be dealing with many columns. Grid gap makes sense if multiple columns
-            const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap);
-            // added 50 to width. May need to change that elsewhere later
-            const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` };
-            // So we're choosing whether we're going to render a column or a masonry doc
-            return <div className={`collectionStackingView-${this.isStackingView ? "columnDoc" : "masonryDoc"}`} key={d[Id]} style={style} >
+            const style = { width: width(), marginTop: i ? this.gridGap : 0, height: height() };
+            return <div className={`collectionNoteTakingView-columnDoc`} key={d[Id]} style={style} >
                 {this.getDisplayDoc(d, width)}
             </div>;
         });
     }
-    // @action
-    // setDocHeight = (key: string, sectionHeight: number) => {
-    //     this._heightMap.set(key, sectionHeight);
-    // }
 
     get Sections() {
         // appears that pivot field IS actually for sorting
         if (!this.pivotField || this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>();
-
-        // Shouldn't need, since we instantiate them in the constructor
-        // if (this.columnHeaders === undefined) {
-        //     setTimeout(() => this.layoutDoc._columnHeaders = new List<SchemaHeaderField>(), 0);
-        //     return new Map<SchemaHeaderField, Doc[]>();
-        // }
         const columnHeaders = Array.from(this.columnHeaders);
         const fields = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []]));
         let changed = false;
@@ -187,9 +157,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         //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 + (this.isStackingView ?
-                    Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace("px", "")))) :
-                    this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace("px", "")), 0)))));
+                this.headerMargin + Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace("px", "")))))));
     }
 
     componentWillUnmount() {
@@ -262,8 +230,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         const height = () => this.getDocHeight(doc);
 
         let dref: Opt<DocumentView>;
-        const stackedDocTransform = () => this.getDocTransform(doc, dref);
-        this._docXfs.push({ stackedDocTransform, width, height });
+        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}
@@ -293,7 +261,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             dropAction={StrCast(this.layoutDoc.childDropAction) as dropActionType}
             onClick={this.onChildClickHandler}
             onDoubleClick={this.onChildDoubleClickHandler}
-            ScreenToLocalTransform={stackedDocTransform}
+            ScreenToLocalTransform={noteTakingDocTransform}
             focus={this.focusDocument}
             docFilters={this.childDocFilters}
             hideDecorationTitle={this.props.childHideDecorationTitle?.()}
@@ -346,7 +314,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[WidthSym]() : 0);
         const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[HeightSym]() : 0);
         if (nw && nh) {
-            const colWid = this.columnWidth / (this.isStackingView ? this.numGroupColumns : 1);
+            const colWid = this.columnWidth / this.numGroupColumns;
             const docWid = this.layoutDoc._columnsFill ? colWid : Math.min(this.getDocWidth(d), colWid);
             return Math.min(
                 maxHeight,
@@ -368,12 +336,13 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         return false;
     }
 
-    @computed get columnDragger() {
-        return <div className="collectionStackingView-columnDragger" onPointerDown={this.columnDividerDown} ref={this._draggerRef}
-            style={{ cursor: this._cursor, left: `${this.columnWidth + this.xMargin}px`, top: `${Math.max(0, this.yMargin - 9)}px` }} >
-            <FontAwesomeIcon icon={"arrows-alt-h"} />
-        </div>;
-    }
+    //TODO: currently unused. How can we make use of it?
+    // @computed get columnDragger() {
+    //     return <div className="collectionNoteTakingView-columnDragger" onPointerDown={this.columnDividerDown} ref={this._draggerRef}
+    //         style={{ cursor: this._cursor, left: `${this.columnWidth + this.xMargin}px`, top: `${Math.max(0, this.yMargin - 9)}px` }} >
+    //         <FontAwesomeIcon icon={"arrows-alt-h"} />
+    //     </div>;
+    // }
 
     resizeColumns = (n: number) => {
       const totalWidth = this.props.PanelWidth()
@@ -402,8 +371,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         //TODO get the nodes in the doc
         this._docXfs.forEach((cd, i) => {
           //TODO need to write your own function for this, or make sure you're properly updating the fields
-          const pos = cd.stackedDocTransform().inverse().transformPoint(0, -2 * this.gridGap);
-          const pos1 = cd.stackedDocTransform().inverse().transformPoint(0, cd.height());
+          const pos = cd.noteTakingDocTransform().inverse().transformPoint(0, -2 * this.gridGap);
+          const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(0, cd.height());
           // checking whethere the copied element is in between the top of the doc and the grid gap
           // (meaning that this is the index it will be taking)
           const yCoordInBetween = clientY > pos[1] && (clientY < pos1[1] || i == this._docXfs.length - 1)
@@ -470,19 +439,18 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         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.stackedDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
-                const pos1 = cd.stackedDocTransform().inverse().transformPoint(cd.width(), cd.height());
+                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.stackedDocTransform().transformPoint(0, 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.stackedDocTransform().transformPoint(0, cd.height());
+                // 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 = this.isStackingView ? 1 : 0;
                     const axis = 1;
                     dropAfter = where[axis] > (pos[axis] + pos1[axis]) / 2 ? 1 : 0;
                 }
@@ -538,8 +506,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         const where = [e.clientX, e.clientY];
         let targInd = -1;
         this._docXfs.map((cd, i) => {
-            const pos = cd.stackedDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
-            const pos1 = cd.stackedDocTransform().inverse().transformPoint(cd.width(), cd.height());
+            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;
             }
@@ -558,7 +526,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     // sections are important 
     headings = () => Array.from(this.Sections);
     refList: any[] = [];
-    sectionStacking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => {
+    sectionNoteTaking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => {
         // const key = this.pivotField;
         const type = "number";
         return <CollectionNoteTakingViewFieldColumn
@@ -646,24 +614,22 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             const entries = Array.from(this.Sections.entries());
             sections = this.layoutDoc._columnsSort ? entries.sort(this.sortFunc) : entries;
         }
-        // a section will have a header and a list of docs. Ok cool.
-        // return sections.map((section, i) => this.isStackingView ? this.sectionStacking(section[0], section[1]) : this.sectionMasonry(section[0], section[1], i === 0));
         //TODO need to add the divs in
         const eles: JSX.Element[] = []
         for (let i = 0; i < sections.length; i++) {
-            const col = this.sectionStacking(sections[i][0], sections[i][1])
+            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(
-            //     <div className={"collectionStackingViewFieldColumn"}>
+            //     <div className={"collectionNoteTakingViewFieldColumn"}>
             //       new div
             //     </div>
             //     )
             // }
         }
         return eles
-        // return sections.map((section) => this.sectionStacking(section[0], section[1]));
+        // return sections.map((section) => this.sectionNoteTaking(section[0], section[1]));
     }
 
     @computed get buttonMenu() {
@@ -716,13 +682,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     observer: any;
     render() {
         TraceMobx();
-        //TODO: need to make this inside the field view column
-        // const editableViewProps = {
-        //     GetValue: () => "",
-        //     SetValue: this.addGroup,
-        //     // I don't recall ever seeing this add a group button
-        //     contents: "+ ADD A COLUMN"
-        // };
         const buttonMenu = this.rootDoc.buttonMenu;
         const noviceExplainer = this.rootDoc.explainer;
         return (
@@ -736,39 +695,20 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
                         : null
                     }
                 </div> : null}
-                <div className="collectionStackingMasonry-cont" >
-                    <div className={this.isStackingView ? "collectionStackingView" : "collectionMasonryView"}
-                        ref={this.createRef}
-                        style={{
-                            overflowY: this.props.isContentActive() ? "auto" : "hidden",
-                            background: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor),
-                            pointerEvents: this.backgroundEvents ? "all" : undefined
-                        }}
-                        onScroll={action(e => this._scroll = e.currentTarget.scrollTop)}
-                        onPointerOver={this.onPointerOver}
-                        onPointerDown={this.onPointerDown}
-                        onDrop={this.onExternalDrop.bind(this)}
-                        onContextMenu={this.onContextMenu}
-                        // Todo: what is wheel? Are we talking about a mouse wheel?
-                        onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} >
-                        {/* so it appears that we are actually rendering the sections. Maybe this is what we're looking for? */}
-                        {this.renderedSections}
-                        {/* I think that showAddGroup must be passed in as false, which is why we can't find what Mehek showed 
-                        Or it's because we aren't passing a pivot field */}
-                        {/* {!this.showAddAGroup ? (null) :
-                            <div key={`${this.props.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton"
-                                style={{ width: !this.isStackingView ? "100%" : this.columnWidth / this.numGroupColumns - 10, marginTop: 10 }}>
-                                <EditableView {...editableViewProps} />
-                            </div>} */}
-                        {/* {this.chromeHidden || !this.props.isSelected() ? (null) :
-                            <Switch
-                                onChange={this.onToggle}
-                                onClick={this.onToggle}
-                                defaultChecked={true}
-                                checkedChildren="edit"
-                                unCheckedChildren="view"
-                            />} */}
-                    </div>
+                <div className="collectionNoteTakingView"
+                    ref={this.createRef}
+                    style={{
+                        overflowY: this.props.isContentActive() ? "auto" : "hidden",
+                        background: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor),
+                        pointerEvents: this.backgroundEvents ? "all" : undefined
+                    }}
+                    onScroll={action(e => this._scroll = e.currentTarget.scrollTop)}
+                    onPointerOver={this.onPointerOver}
+                    onPointerDown={this.onPointerDown}
+                    onDrop={this.onExternalDrop.bind(this)}
+                    onContextMenu={this.onContextMenu}
+                    onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} >
+                    {this.renderedSections}
                 </div>
             </>
 
diff --git a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
index 605ee4b41..b4e0aac60 100644
--- a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
@@ -3,13 +3,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DocListCast, Opt } from "../../../fields/Doc";
+import { Id } from "../../../fields/FieldSymbols";
 import { RichTextField } from "../../../fields/RichTextField";
-import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField";
+import { SchemaHeaderField } from "../../../fields/SchemaHeaderField";
 import { ScriptField } from "../../../fields/ScriptField";
-import { Cast, NumCast, StrCast } from "../../../fields/Types";
+import { NumCast } from "../../../fields/Types";
 import { ImageField } from "../../../fields/URLField";
 import { TraceMobx } from "../../../fields/util";
-import { emptyFunction, setupMoveUpEvents, returnFalse, returnEmptyString } from "../../../Utils";
+import { emptyFunction, returnEmptyString, setupMoveUpEvents } from "../../../Utils";
 import { Docs, DocUtils } from "../../documents/Documents";
 import { DocumentType } from "../../documents/DocumentTypes";
 import { DragManager } from "../../util/DragManager";
@@ -19,9 +20,8 @@ import { undoBatch } from "../../util/UndoManager";
 import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
 import { EditableView } from "../EditableView";
-import "./CollectionNoteTakingView.scss";
 import { FormattedTextBox } from "../nodes/formattedText/FormattedTextBox";
-import { Id } from "../../../fields/FieldSymbols";
+import "./CollectionNoteTakingView.scss";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -42,7 +42,6 @@ interface CSVFieldColumnProps {
     gridGap: number;
     type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined;
     headings: () => object[];
-    // I think that stacking view actually has a single column and then supposedly you can add more columns? Unsure
     renderChildren: (docs: Doc[]) => JSX.Element[];
     addDocument: (doc: Doc | Doc[]) => boolean;
     createDropTarget: (ele: HTMLDivElement) => void;
@@ -60,7 +59,6 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
     private dropDisposer?: DragManager.DragDropDisposer;
     private _headerRef: React.RefObject<HTMLDivElement> = React.createRef();
 
-    @observable _paletteOn = false;
     @observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading;
     @observable _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
     _ele: HTMLElement | null = null;
@@ -75,16 +73,17 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
             this.dropDisposer = DragManager.MakeDropTarget(ele, this.columnDrop.bind(this));
         }
     }
+
     componentWillUnmount() {
         this.props.unobserveHeight(this._ele);
     }
 
-    //TODO: what is scripting? I found it in SetInPlace def but don't know what that is
     @undoBatch
     columnDrop = action((e: Event, de: DragManager.DropEvent) => {
         const drop = { docs: de.complete.docDragData?.droppedDocuments, val: this.getValue(this._heading) };
         drop.docs?.forEach(d => Doc.SetInPlace(d, this.props.pivotField, drop.val, false));
     });
+
     getValue = (value: string): any => {
         const parsed = parseInt(value);
         if (!isNaN(parsed)) return parsed;
@@ -110,12 +109,6 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
         return false;
     }
 
-    @action
-    changeColumnColor = (color: string) => {
-        this.props.headingObject?.setColor(color);
-        this._color = color;
-    }
-
     @action pointerEntered = () => SnappingManager.GetIsDragging() && (this._background = "#b4b4b4");
     @action pointerLeave = () => this._background = "inherit";
     textCallback = (char: string) => this.addNewTextDoc("-typed text-", false, true);
@@ -154,12 +147,6 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
         }
     }
 
-    @action
-    collapseSection = () => {
-        this.props.headingObject?.setCollapsed(!this.props.headingObject.collapsed);
-        this.toggleVisibility();
-    }
-
     headerDown = (e: React.PointerEvent<HTMLDivElement>) => setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction);
 
     //TODO: I think this is where I'm supposed to edit stuff 
@@ -181,10 +168,6 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
         return false;
     }
 
-    @observable private collapsed: boolean = false;
-
-    private toggleVisibility = action(() => this.collapsed = !this.collapsed);
-
     menuCallback = (x: number, y: number) => {
         ContextMenu.Instance.clearItems();
         const layoutItems: ContextMenuProps[] = [];
@@ -234,9 +217,9 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
                 this.props.addDocument?.(created);
             }
         });
-        const pt = this.props.screenToLocalTransform().inverse().transformPoint(x, y);
         ContextMenu.Instance.displayMenu(x, y, undefined, true);
     }
+
     @computed get innards() {
         TraceMobx();
         const key = this.props.pivotField;
@@ -246,16 +229,13 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
         const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
         const evContents = heading ? heading : "25";
         const headingView = this.props.headingObject ?
-            <div key={heading} className="collectionStackingView-sectionHeader" ref={this._headerRef}
+            <div key={heading} className="collectionNoteTakingView-sectionHeader" ref={this._headerRef}
                 style={{
                     marginTop: this.props.yMargin,
                     width: (this.props.columnWidth) /
                         ((uniqueHeadings.length) || 1)
                 }}>
-                {/* <div className={"collectionStackingView-collapseBar" + (this.props.headingObject.collapsed === true ? " active" : "")} onClick={this.collapseSection}></div> */}
-                {/* the default bucket (no key value) has a tooltip that describes what it is.
-                    Further, it does not have a color and cannot be deleted. */}
-                <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown}
+                <div className="collectionNoteTakingView-sectionHeader-subCont" onPointerDown={this.headerDown}
                     title={evContents === `No Value` ?
                         `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
                     style={{ background: evContents !== `No Value` ? this._color : "inherit" }}>
@@ -264,57 +244,52 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
                         SetValue={this.headingChanged}
                         contents={evContents}
                         oneLine={true}
-                        toggle={this.toggleVisibility} />
-                    {/* {evContents === `0` ? (null) : <></>} */}
+                    />
                 </div>
             </div> : (null);
         const templatecols = `${this.props.columnWidth / this.props.numGroupColumns}px `;
         const type = this.props.Document.type;
         return <>
-            {this.props.Document._columnsHideIfEmpty ? (null) : headingView}
-            {
-                this.collapsed ? (null) :
-                    <div>
-                        <div key={`${heading}-stack`} className={`collectionStackingView-masonrySingle`}
-                            style={{
-                                padding: `${columnYMargin}px ${0}px ${this.props.yMargin}px ${0}px`,
-                                margin: "auto",
-                                width: "max-content", //singleColumn ? undefined : `${cols * (style.columnWidth + style.gridGap) + 2 * style.xMargin - style.gridGap}px`,
-                                height: 'max-content',
-                                position: "relative",
-                                gridGap: this.props.gridGap,
-                                gridTemplateColumns: templatecols,
-                                gridAutoRows: "0px"
-                            }}>
-                            {this.props.renderChildren(this.props.docList)}
-                        </div>
-
-                        {!this.props.chromeHidden && type !== DocumentType.PRES ?
-                            <div className="collectionNoteTakingView-DocumentButtons"
-                                style={{ width: this.props.columnWidth / this.props.numGroupColumns, 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"}
-                                        toggle={this.toggleVisibility}
-                                        menuCallback={this.menuCallback}
-                                    />
-                                </div>
-                                <div key={`${this.props.Document[Id]}-addGroup`} className="collectionNoteTakingView-addDocumentButton">
-                                    <EditableView {...this.props.editableViewProps} />
-                                </div>
-                                {(this.props.columnHeaders?.length && this.props.columnHeaders.length > 1) && 
-                                    <button className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}>
-                                    <FontAwesomeIcon icon="trash" size="lg" />
-                                </button>
-                                }
-                            </div>
-                            : null}
+            {headingView}
+            {<div>
+              <div key={`${heading}-stack`} className={`collectionNoteTakingView-Nodes`}
+                  style={{
+                      padding: `${columnYMargin}px ${0}px ${this.props.yMargin}px ${0}px`,
+                      margin: "auto",
+                      width: "max-content", //singleColumn ? undefined : `${cols * (style.columnWidth + style.gridGap) + 2 * style.xMargin - style.gridGap}px`,
+                      height: 'max-content',
+                      position: "relative",
+                      gridGap: this.props.gridGap,
+                      gridTemplateColumns: templatecols,
+                      gridAutoRows: "0px"
+                  }}>
+                  {this.props.renderChildren(this.props.docList)}
+              </div>
 
-                    </div>
+              {!this.props.chromeHidden && type !== DocumentType.PRES ?
+                  <div className="collectionNoteTakingView-DocumentButtons"
+                      style={{ width: this.props.columnWidth / this.props.numGroupColumns, 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>
+                      <div key={`${this.props.Document[Id]}-addGroup`} className="collectionNoteTakingView-addDocumentButton">
+                          <EditableView {...this.props.editableViewProps} />
+                      </div>
+                      {(this.props.columnHeaders?.length && this.props.columnHeaders.length > 1) && 
+                          <button className="collectionNoteTakingView-sectionDelete" onClick={this.deleteColumn}>
+                          <FontAwesomeIcon icon="trash" size="lg" />
+                      </button>
+                      }
+                  </div>
+                  : null}
+              </div>
             }
         </>;
     }
@@ -326,9 +301,9 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
         const heading = this._heading;
         const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
         return (
-            <div className={"collectionStackingViewFieldColumn" + (SnappingManager.GetIsDragging() ? "Dragging" : "")} key={heading}
+            <div className={"collectionNoteTakingViewFieldColumn" + (SnappingManager.GetIsDragging() ? "Dragging" : "")} key={heading}
                 style={{
-                    // width: `${100 / (uniqueHeadings.length + (this.props.chromeHidden ? 0 : 1) || 1)}%`,
+                  //TODO: change this to be slightly different
                     width: `${100 / (uniqueHeadings.length || 1)}%`,
                     height: undefined, // DraggingManager.GetIsDragging() ? "100%" : undefined,
                     background: this._background