Merge branch 'nathan-starter' of https://github.com/brown-dash/Dash-Web into nathan-starter

4 files changed, 253 insertions, 202 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 3a3d4d206..b684b65e5 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,45 +1,39 @@
+/* eslint-disable no-restricted-syntax */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Popup, PopupTrigger, Type } from 'browndash-components';
 import { ObservableMap, action, computed, makeObservable, observable, observe } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { emptyFunction, returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../Utils';
-import { Doc, DocListCast, Field, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
+import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils';
+import { emptyFunction } from '../../../../Utils';
+import { Doc, DocListCast, Field, FieldType, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
 import { DocData } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
 import { listSpec } from '../../../../fields/Schema';
-import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
-import { DocUtils, Docs, DocumentOptions, FInfo } from '../../../documents/Documents';
-import { DocumentManager } from '../../../util/DocumentManager';
-import { DragManager, dropActionType } from '../../../util/DragManager';
-import { SelectionManager } from '../../../util/SelectionManager';
+import { ColumnType } from '../../../../fields/SchemaHeaderField';
+import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types';
+import { DocUtils } from '../../../documents/DocUtils';
+import { Docs, DocumentOptions, FInfo } from '../../../documents/Documents';
+import { DragManager } from '../../../util/DragManager';
+import { dropActionType } from '../../../util/DropActionTypes';
 import { SettingsManager } from '../../../util/SettingsManager';
 import { undoBatch, undoable } from '../../../util/UndoManager';
 import { ContextMenu } from '../../ContextMenu';
 import { EditableView } from '../../EditableView';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
-import { DefaultStyleProvider, StyleProp } from '../../StyleProvider';
+import { StyleProp } from '../../StyleProp';
+import { DefaultStyleProvider } from '../../StyleProvider';
 import { Colors } from '../../global/globalEnums';
 import { DocumentView } from '../../nodes/DocumentView';
-import { FieldViewProps, FocusViewOptions } from '../../nodes/FieldView';
-import { KeyValueBox } from '../../nodes/KeyValueBox';
+import { FieldViewProps } from '../../nodes/FieldView';
+import { FocusViewOptions } from '../../nodes/FocusViewOptions';
 import { CollectionSubView } from '../CollectionSubView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
-const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
-export enum ColumnType {
-    Number,
-    String,
-    Boolean,
-    Date,
-    Image,
-    RTF,
-    Enumeration,
-    Any,
-}
+const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore
 
 export const FInfotoColType: { [key: string]: ColumnType } = {
     string: ColumnType.String,
@@ -88,7 +82,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _filterColumnIndex: number | undefined = undefined;
     @observable _filterSearchValue: string = '';
     @observable _selectedCol: number = 0;
-    @observable _selectedCells: Array<Doc> = []; 
+    @observable _selectedCells: Array<Doc> = [];
     @observable _mouseCoordinates = { x: 0, y: 0 };
     @observable _lowestSelectedIndex = -1; //lowest index among selected rows; used to properly sync dragged docs with cursor position
     @observable _relCursorIndex = -1; //cursor index relative to the current selected cells
@@ -102,17 +96,13 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @computed get _selectedDocs() {
         // get all selected documents then filter out any whose parent is not this schema document
-        const selected = SelectionManager.Docs.filter(doc => this.childDocs.includes(doc));
-        //  SelectionManager... filter(doc => this.childDocs.includes(doc))
-        //DocCast(doc.embedContainer)[DocData] === this.dataDoc 
-        //SelectionManager.Docs.forEach(doc => console.log("index: " + this.rowIndex(doc) + " equal: " + Doc.AreProtosEqual(DocCast(doc.embedContainer), this.Document)));
+        const selected = DocumentView.SelectedDocs().filter(doc => this.childDocs.includes(doc));
         if (!selected.length) {
-            for (const sel of SelectionManager.Docs) {
-                const contextPath = DocumentManager.GetContextPath(sel, true);
-                if (contextPath.includes(this.Document)) {
-                    const parentInd = contextPath.indexOf(this.Document);
-                    return parentInd < contextPath.length - 1 ? [contextPath[parentInd + 1]] : [];
-                }
+            // if no schema doc is directly selected, test if a child of a schema doc is selected (such as in the preview window)
+            const childOfSchemaDoc = DocumentView.SelectedDocs().find(sel => DocumentView.getContextPath(sel, true).includes(this.Document));
+            if (childOfSchemaDoc) {
+                const contextPath = DocumentView.getContextPath(childOfSchemaDoc, true);
+                return [contextPath[contextPath.indexOf(childOfSchemaDoc) - 1]]; // the schema doc that is "selected" by virtue of one of its children being selected
             }
         }
         return selected;
@@ -153,7 +143,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     @computed get rowHeights() {
-        const heights = this.childDocs.map(() => (this.rowHeightFunc()))
+        const heights = this.childDocs.map(() => this.rowHeightFunc());
         return heights;
     }
 
@@ -176,8 +166,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         Object.entries(this._documentOptions).forEach((pair: [string, FInfo]) => this.fieldInfos.set(pair[0], pair[1]));
         this._keysDisposer = observe(
             this.dataDoc[this.fieldKey ?? 'data'] as List<Doc>,
-            change => {
-                switch (change.type as any) {
+            (change: any) => {
+                switch (change.type) {
                     case 'splice':
                         // prettier-ignore
                         (change as any).added.forEach((doc: Doc) => // for each document added 
@@ -185,7 +175,9 @@ export class CollectionSchemaView extends CollectionSubView() {
                                 Object.keys(proto).forEach(action(key => // check if any of its keys are new, and add them
                                     !this.fieldInfos.get(key) && this.fieldInfos.set(key, new FInfo("-no description-", key === 'author'))))));
                         break;
-                    case 'update': //let oldValue = change.oldValue; // fill this in if the entire child list will ever be reassigned with a new list
+                    case 'update': // let oldValue = change.oldValue; // fill this in if the entire child list will ever be reassigned with a new list
+                        break;
+                    default:
                 }
             },
             true
@@ -197,6 +189,9 @@ export class CollectionSchemaView extends CollectionSubView() {
         document.removeEventListener('keydown', this.onKeyDown);
     }
 
+    // ViewBoxInterface overrides
+    override isUnstyledView = returnTrue; // used by style provider : turns off  opacity, animation effects, scaling
+
     rowIndex = (doc: Doc) => this.sortedDocs.docs.indexOf(doc);
 
     @action
@@ -211,7 +206,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                         if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) {
                             const newDoc = this.sortedDocs.docs[lastIndex + 1];
                             if (this._selectedDocs.includes(newDoc)) {
-                                SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc));
+                                DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc));
                                 this.deselectCell(curDoc);
                             } else {
                                 const shift: boolean = e.shiftKey;
@@ -231,8 +226,8 @@ export class CollectionSchemaView extends CollectionSubView() {
                         const curDoc = this.sortedDocs.docs[firstIndex];
                         if (firstIndex > 0 && firstIndex < this.childDocs.length) {
                             const newDoc = this.sortedDocs.docs[firstIndex - 1];
-                            if (this._selectedDocs.includes(newDoc)){
-                                SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(curDoc))
+                            if (this._selectedDocs.includes(newDoc)) {
+                                DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc));
                                 this.deselectCell(curDoc);
                             } else {
                                 const shift: boolean = e.shiftKey;
@@ -265,15 +260,15 @@ export class CollectionSchemaView extends CollectionSubView() {
                 }
                 case 'Escape': {
                     this.deselectAllCells();
+                    break;
                 }
+                default:
             }
         }
     };
 
     @action
-    changeSelectedCellColumn = () => {
-    
-    }
+    changeSelectedCellColumn = () => {};
 
     @undoBatch
     setColumnSort = (field: string | undefined, desc: boolean = false) => {
@@ -289,7 +284,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             this.addNewKey(newKey, defaultVal);
         }
 
-        let currKeys = [...this.columnKeys];
+        const currKeys = [...this.columnKeys];
         currKeys[index] = newKey;
         this.layoutDoc.schema_columnKeys = new List<string>(currKeys);
     };
@@ -306,13 +301,16 @@ export class CollectionSchemaView extends CollectionSubView() {
         const newDesiredTableWidth = currWidths.reduce((w, cw) => w + cw, 0);
         this.layoutDoc.schema_columnWidths = new List<number>(currWidths.map(w => (w / newDesiredTableWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth)));
 
-        let currKeys = this.columnKeys.slice();
+        const currKeys = this.columnKeys.slice();
         currKeys.splice(0, 0, key);
         this.layoutDoc.schema_columnKeys = new List<string>(currKeys);
     };
 
     @action
-    addNewKey = (key: string, defaultVal: any) => this.childDocs.forEach(doc => (doc[DocData][key] = defaultVal));
+    addNewKey = (key: string, defaultVal: any) =>
+        this.childDocs.forEach(doc => {
+            doc[DocData][key] = defaultVal;
+        });
 
     @undoBatch
     removeColumn = (index: number) => {
@@ -322,7 +320,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         const newDesiredTableWidth = currWidths.reduce((w, cw) => w + cw, 0);
         this.layoutDoc.schema_columnWidths = new List<number>(currWidths.map(w => (w / newDesiredTableWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth)));
 
-        let currKeys = this.columnKeys.slice();
+        const currKeys = this.columnKeys.slice();
         currKeys.splice(index, 1);
         this.layoutDoc.schema_columnKeys = new List<string>(currKeys);
     };
@@ -330,7 +328,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     startResize = (e: any, index: number) => {
         this._displayColumnWidths = this.storedColumnWidths;
-        setupMoveUpEvents(this, e, (e, delta) => this.resizeColumn(e, index), this.finishResize, emptyFunction);
+        setupMoveUpEvents(this, e, moveEv => this.resizeColumn(moveEv, index), this.finishResize, emptyFunction);
     };
 
     @action
@@ -372,11 +370,11 @@ export class CollectionSchemaView extends CollectionSubView() {
         if (this._selectedCol === fromIndex) this._selectedCol = toIndex;
         else if (toIndex === this._selectedCol) this._selectedCol = fromIndex; //keeps selected cell consistent
 
-        let currKeys = this.columnKeys.slice();
+        const currKeys = this.columnKeys.slice();
         currKeys.splice(toIndex, 0, currKeys.splice(fromIndex, 1)[0]);
         this.layoutDoc.schema_columnKeys = new List<string>(currKeys);
 
-        let currWidths = this.storedColumnWidths.slice();
+        const currWidths = this.storedColumnWidths.slice();
         currWidths.splice(toIndex, 0, currWidths.splice(fromIndex, 1)[0]);
         this.layoutDoc.schema_columnWidths = new List<number>(currWidths);
 
@@ -391,15 +389,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         const dragEles = [this._colEles[index]];
         this.childDocs.forEach(doc => dragEles.push(this._rowEles.get(doc).children[1].children[index]));
         DragManager.StartColumnDrag(dragEles, dragData, e.x, e.y);
-
-        // document.removeEventListener('pointermove', this.highlightDropColumn);
-        // document.addEventListener('pointermove', this.highlightDropColumn);
-        // let stopHighlight = (e: PointerEvent) => {
-        //     document.removeEventListener('pointermove', this.highlightDropColumn);
-        //     document.removeEventListener('pointerup', stopHighlight);
-        // };
-        // document.addEventListener('pointerup', stopHighlight);   
-
         return true;
     };
 
@@ -429,7 +418,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         let adjInitMouseY = mouseY - rowHeight - 100; //rowHeight: height of the column menu cells | 100: height of the top menu
         let yOffset = this._lowestSelectedIndex * rowHeight;
 
-        const heights = this._selectedDocs.map(() => (this.rowHeightFunc()))
+        const heights = this._selectedDocs.map(() => this.rowHeightFunc());
         let index: number = 0;
         heights.reduce((total, curr, i) => {
             if (total <= adjInitMouseY && total + curr >= adjInitMouseY) {
@@ -439,7 +428,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             return total + curr;
         }, yOffset);
         this._relCursorIndex = index;
-    }
+    };
 
     //Uses current mouse position to calculate the indexes of actively dragged docs
     findRowDropIndex = (mouseY: number) => {
@@ -473,13 +462,13 @@ export class CollectionSchemaView extends CollectionSubView() {
             colRef.style.borderRight = edgeStyle;
             colRef.style.borderTop = edgeStyle;
 
-            for (let doc = 0; doc < this.childDocs.length; ++doc){
-                if (i === this._selectedCol && this._selectedDocs.includes(this.childDocs[doc])){
+            for (let doc = 0; doc < this.childDocs.length; ++doc) {
+                if (i === this._selectedCol && this._selectedDocs.includes(this.childDocs[doc])) {
                     continue;
                 } else {
                     this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderLeft = edgeStyle;
                     this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderRight = edgeStyle;
-                    if (doc === this.childDocs.length - 1){
+                    if (doc === this.childDocs.length - 1) {
                         this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderBottom = edgeStyle;
                     }
                 }
@@ -500,14 +489,14 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    addDocToSelection = (doc: Doc, extendSelection: boolean, index: number) => {
-        const rowDocView = DocumentManager.Instance.getDocumentView(doc);
-        if (rowDocView) SelectionManager.SelectView(rowDocView, extendSelection);
+    addDocToSelection = (doc: Doc, extendSelection: boolean) => {
+        const rowDocView = DocumentView.getDocumentView(doc);
+        if (rowDocView) DocumentView.SelectView(rowDocView, extendSelection);
     };
 
     @action
     clearSelection = () => {
-        SelectionManager.DeselectAll();
+        DocumentView.DeselectAll();
         this.deselectAllCells();
     };
 
@@ -518,9 +507,9 @@ export class CollectionSchemaView extends CollectionSubView() {
         const endRow = Math.max(lastSelectedRow, index);
         for (let i = startRow; i <= endRow; i++) {
             const currDoc = this.sortedDocs.docs[i];
-            if (!this._selectedDocs.includes(currDoc)){
-                this.selectCell(currDoc, this._selectedCol, false, true)
-            } 
+            if (!this._selectedDocs.includes(currDoc)) {
+                this.selectCell(currDoc, this._selectedCol, false, true);
+            }
         }
     };
 
@@ -535,12 +524,11 @@ export class CollectionSchemaView extends CollectionSubView() {
         const lastSelected = Array.from(this._selectedDocs).lastElement();
         if (shiftKey && lastSelected && !this._selectedDocs.includes(doc)) this.selectRows(doc, lastSelected);
         else if (ctrlKey) {
-            if (lastSelected && this._selectedDocs.includes(doc)){
-                SelectionManager.DeselectView(DocumentManager.Instance.getFirstDocumentView(doc))
+            if (lastSelected && this._selectedDocs.includes(doc)) {
+                DocumentView.DeselectView(DocumentView.getFirstDocumentView(doc));
                 this.deselectCell(doc);
-            } else this.addDocToSelection(doc, true, index);
-        }
-        else this.addDocToSelection(doc, false, index);
+            } else this.addDocToSelection(doc, true);
+        } else this.addDocToSelection(doc, false);
         this._selectedCol = col;
 
         if (this._lowestSelectedIndex === -1 || index < this._lowestSelectedIndex) this._lowestSelectedIndex = index;
@@ -551,22 +539,22 @@ export class CollectionSchemaView extends CollectionSubView() {
     @action
     deselectCell = (doc: Doc) => {
         this._selectedCells && (this._selectedCells = this._selectedCells.filter(d => d !== doc));
-        if (this.rowIndex(doc) == this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(doc => this.rowIndex(doc)))
+        if (this.rowIndex(doc) == this._lowestSelectedIndex) this._lowestSelectedIndex = Math.min(...this._selectedDocs.map(doc => this.rowIndex(doc)));
     };
 
     @action
     deselectAllCells = () => {
         this._selectedCells = [];
         this._lowestSelectedIndex = -1;
-    }
+    };
 
     sortedSelectedDocs = () => this.sortedDocs.docs.filter(doc => this._selectedDocs.includes(doc));
 
     @computed
-    get rowDropIndex(){
+    get rowDropIndex() {
         const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseCoordinates.x, this._mouseCoordinates.y)[1];
         const index = this.findRowDropIndex(mouseY);
-        return index
+        return index;
     }
 
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
@@ -581,7 +569,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                 colRef.style.borderTop = '';
 
                 this.childDocs.forEach(doc => {
-                    if (!(this._selectedDocs.includes(doc) && i === this._selectedCol)){
+                    if (!(this._selectedDocs.includes(doc) && i === this._selectedCol)) {
                         this._rowEles.get(doc).children[1].children[i].style.borderLeft = '';
                         this._rowEles.get(doc).children[1].children[i].style.borderRight = '';
                         this._rowEles.get(doc).children[1].children[i].style.borderBottom = '';
@@ -593,12 +581,12 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         const draggedDocs = de.complete.docDragData?.draggedDocuments;
         if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) {
-            let map = draggedDocs?.map(doc => this.rowIndex(doc))
-            console.log(map)
+            let map = draggedDocs?.map(doc => this.rowIndex(doc));
+            console.log(map);
             this.dataDoc[this.fieldKey ?? 'data'] = new List<Doc>([...this.sortedDocs.docs]);
             this.clearSelection();
             draggedDocs.forEach(doc => {
-                DocumentManager.Instance.AddViewRenderedCb(doc, dv => dv.select(true));
+                DocumentView.addViewRenderedCb(doc, dv => dv.select(true));
             });
             this._lowestSelectedIndex = Math.min(...draggedDocs?.map(doc => this.rowIndex(doc)));
             return true;
@@ -607,13 +595,13 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     onExternalDrop = async (e: React.DragEvent): Promise<void> => {
-        super.onExternalDrop(e, {}, undoBatch(action(docus => docus.map((doc: Doc) => this.addDocument(doc)))));
+        super.onExternalDrop(e, {}, undoBatch(action(docs => docs.map((doc: Doc) => this.addDocument(doc)))));
     };
 
     onDividerDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, emptyFunction);
 
     @action
-    onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => {
+    onDividerMove = (e: PointerEvent) => {
         const nativeWidth = this._previewRef!.getBoundingClientRect();
         const minWidth = 40;
         const maxWidth = 1000;
@@ -643,37 +631,76 @@ export class CollectionSchemaView extends CollectionSubView() {
             const rect = found.getBoundingClientRect();
             const localRect = this.ScreenToLocalBoxXf().transformBounds(rect.left, rect.top, rect.width, rect.height);
             if (localRect.y < this.rowHeightFunc() || localRect.y + localRect.height > this._props.PanelHeight()) {
-                let focusSpeed = options.zoomTime ?? 50;
+                const focusSpeed = options.zoomTime ?? 50;
                 smoothScroll(focusSpeed, this._tableContentRef!, localRect.y + this._tableContentRef!.scrollTop - this.rowHeightFunc(), options.easeFunc);
                 return focusSpeed;
             }
         }
+        return undefined;
     };
 
     @computed get fieldDefaultInput() {
         switch (this._newFieldType) {
             case ColumnType.Number:
-                return <input type="number" name="" id="" value={this._newFieldDefault ?? 0} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />;
+                return (
+                    <input
+                        type="number"
+                        name=""
+                        id=""
+                        value={this._newFieldDefault ?? 0}
+                        onPointerDown={e => e.stopPropagation()}
+                        onChange={action((e: any) => {
+                            this._newFieldDefault = e.target.value;
+                        })}
+                    />
+                );
             case ColumnType.Boolean:
                 return (
                     <>
-                        <input type="checkbox" name="" id="" value={this._newFieldDefault} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.checked))} />
+                        <input
+                            type="checkbox"
+                            name=""
+                            id=""
+                            value={this._newFieldDefault}
+                            onPointerDown={e => e.stopPropagation()}
+                            onChange={action((e: any) => {
+                                this._newFieldDefault = e.target.checked;
+                            })}
+                        />
                         {this._newFieldDefault ? 'true' : 'false'}
                     </>
                 );
             case ColumnType.String:
-                return <input type="text" name="" id="" value={this._newFieldDefault ?? ''} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />;
+                return (
+                    <input
+                        type="text"
+                        name=""
+                        id=""
+                        value={this._newFieldDefault ?? ''}
+                        onPointerDown={e => e.stopPropagation()}
+                        onChange={action((e: any) => {
+                            this._newFieldDefault = e.target.value;
+                        })}
+                    />
+                );
+            default:
+                return undefined;
         }
     }
 
     onSearchKeyDown = (e: React.KeyboardEvent) => {
         switch (e.key) {
             case 'Enter':
-                this._menuKeys.length > 0 && this._menuValue.length > 0 ? this.setKey(this._menuKeys[0]) : action(() => (this._makeNewField = true))();
+                this._menuKeys.length > 0 && this._menuValue.length > 0
+                    ? this.setKey(this._menuKeys[0])
+                    : action(() => {
+                          this._makeNewField = true;
+                      })();
                 break;
             case 'Escape':
                 this.closeColumnMenu();
                 break;
+            default:
         }
     };
 
@@ -688,18 +715,17 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     setColumnValues = (key: string, value: string) => {
-        const selectedDocs: Doc[] = new Array;
+        const selectedDocs: Doc[] = new Array();
         this.childDocs.forEach(doc => {
             let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
-            if (docIsSelected){
+            if (docIsSelected) {
                 selectedDocs.push(doc);
-                }
             }
-        );
-        if (selectedDocs.length === 1){
-            this.childDocs.forEach(doc => KeyValueBox.SetField(doc, key, value));
+        });
+        if (selectedDocs.length === 1) {
+            this.childDocs.forEach(doc => Doc.SetField(doc, key, value));
         } else {
-            selectedDocs.forEach(doc => KeyValueBox.SetField(doc, key, value));
+            selectedDocs.forEach(doc => Doc.SetField(doc, key, value));
         }
         return true;
     };
@@ -707,11 +733,10 @@ export class CollectionSchemaView extends CollectionSubView() {
     setSelectedColumnValues = (key: string, value: string) => {
         this.childDocs.forEach(doc => {
             let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
-            if (docIsSelected){
-                KeyValueBox.SetField(doc, key, value)
-                }
+            if (docIsSelected) {
+                Doc.SetField(doc, key, value);
             }
-        );
+        });
         return true;
     };
 
@@ -728,7 +753,9 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    closeColumnMenu = () => (this._columnMenuIndex = undefined);
+    closeColumnMenu = () => {
+        this._columnMenuIndex = undefined;
+    };
 
     @action
     openFilterMenu = (index: number) => {
@@ -737,7 +764,9 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     @action
-    closeFilterMenu = () => (this._filterColumnIndex = undefined);
+    closeFilterMenu = () => {
+        this._filterColumnIndex = undefined;
+    };
 
     openContextMenu = (x: number, y: number, index: number) => {
         this.closeColumnMenu();
@@ -767,7 +796,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._menuKeys = this.documentKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase()));
     };
 
-    getFieldFilters = (field: string) => StrListCast(this.Document._childFilters).filter(filter => filter.split(Doc.FilterSep)[0] == field);
+    getFieldFilters = (field: string) => StrListCast(this.Document._childFilters).filter(filter => filter.split(Doc.FilterSep)[0] === field);
 
     removeFieldFilters = (field: string) => {
         this.getFieldFilters(field).forEach(filter => Doc.setDocFilter(this.Document, field, filter.split(Doc.FilterSep)[1], 'remove'));
@@ -779,11 +808,14 @@ export class CollectionSchemaView extends CollectionSubView() {
             case 'Escape':
                 this.closeFilterMenu();
                 break;
+            default:
         }
     };
 
     @action
-    updateFilterSearch = (e: React.ChangeEvent<HTMLInputElement>) => (this._filterSearchValue = e.target.value);
+    updateFilterSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._filterSearchValue = e.target.value;
+    };
 
     @computed get newFieldMenu() {
         return (
@@ -792,7 +824,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                     <input
                         type="radio"
                         name="newFieldType"
-                        checked={this._newFieldType == ColumnType.Number}
+                        checked={this._newFieldType === ColumnType.Number}
                         onChange={action(() => {
                             this._newFieldType = ColumnType.Number;
                             this._newFieldDefault = 0;
@@ -804,7 +836,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                     <input
                         type="radio"
                         name="newFieldType"
-                        checked={this._newFieldType == ColumnType.Boolean}
+                        checked={this._newFieldType === ColumnType.Boolean}
                         onChange={action(() => {
                             this._newFieldType = ColumnType.Boolean;
                             this._newFieldDefault = false;
@@ -816,7 +848,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                     <input
                         type="radio"
                         name="newFieldType"
-                        checked={this._newFieldType == ColumnType.String}
+                        checked={this._newFieldType === ColumnType.String}
                         onChange={action(() => {
                             this._newFieldType = ColumnType.String;
                             this._newFieldDefault = '';
@@ -828,7 +860,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                 <div className="schema-key-warning">{this._newFieldWarning}</div>
                 <div
                     className="schema-column-menu-button"
-                    onPointerDown={action(e => {
+                    onPointerDown={action(() => {
                         if (this.documentKeys.includes(this._menuValue)) {
                             this._newFieldWarning = 'Field already exists';
                         } else if (this._menuValue.length === 0) {
@@ -855,7 +887,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             <div className="schema-key-search">
                 <div
                     className="schema-column-menu-button"
-                    onPointerDown={action(e => {
+                    onPointerDown={action((e: any) => {
                         e.stopPropagation();
                         this._makeNewField = true;
                     })}>
@@ -893,7 +925,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     @computed get renderColumnMenu() {
-        const x = this._columnMenuIndex! == -1 ? 0 : this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth);
+        const x = this._columnMenuIndex! === -1 ? 0 : this.displayColumnWidths.reduce((total, curr, index) => total + (index < this._columnMenuIndex! ? curr : 0), CollectionSchemaView._rowMenuWidth);
         return (
             <div className="schema-column-menu" style={{ left: x, minWidth: CollectionSchemaView._minColWidth }}>
                 <input className="schema-key-search-input" type="text" onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} />
@@ -902,7 +934,6 @@ export class CollectionSchemaView extends CollectionSubView() {
         );
     }
     get renderKeysMenu() {
-        //console.log('RNDERMENUT:' + this._columnMenuIndex);
         return (
             <div className="schema-column-menu" style={{ left: 0, minWidth: CollectionSchemaView._minColWidth }}>
                 <input className="schema-key-search-input" type="text" onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} />
@@ -936,7 +967,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                         type="checkbox"
                         onPointerDown={e => e.stopPropagation()}
                         onClick={e => e.stopPropagation()}
-                        onChange={action(e => {
+                        onChange={action((e: any) => {
                             if (e.target.checked) {
                                 Doc.setDocFilter(this.Document, columnKey, key, 'check');
                             } else {
@@ -959,7 +990,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                 {this.renderFilterOptions}
                 <div
                     className="schema-column-menu-button"
-                    onPointerDown={action(e => {
+                    onPointerDown={action((e: any) => {
                         e.stopPropagation();
                         this.closeFilterMenu();
                     })}>
@@ -971,34 +1002,36 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @action
     onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
-        if (DragManager.docsBeingDragged.length){
+        if (DragManager.docsBeingDragged.length) {
             this._mouseCoordinates = { x: e.clientX, y: e.clientY };
         }
-        if (this._colBeingDragged){
+        if (this._colBeingDragged) {
             let newIndex = this.findColDropIndex(e.clientX);
             if (newIndex != this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex);
             this._draggedColIndex = newIndex ? newIndex : this._draggedColIndex;
-            this.highlightDraggedColumn(newIndex ?? this._draggedColIndex)
+            this.highlightDraggedColumn(newIndex ?? this._draggedColIndex);
         }
-    }
+    };
 
     @computed get sortedDocs() {
+        const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : [];
         const field = StrCast(this.layoutDoc.sortField);
-        const desc = BoolCast(this.layoutDoc.sortDesc);  // is this an ascending or descending sort
-        const staticDocs = this.childDocs.filter(d => !DragManager.docsBeingDragged.includes(d));
+        const desc = BoolCast(this.layoutDoc.sortDesc); // is this an ascending or descending sort
+        const staticDocs = this.childDocs.filter(d => !draggedDocs.includes(d));
         const docs = !field
             ? staticDocs
-            : [...staticDocs].sort((docA, docB) => { // this sorts the documents based on the selected field.  returning -1 for a before b, 0 for a = b, 1 for a > b
-                  const aStr = Field.toString(docA[field] as Field);
-                  const bStr = Field.toString(docB[field] as Field);
-                  var out = 0;
+            : [...staticDocs].sort((docA, docB) => {
+                  // this sorts the documents based on the selected field.  returning -1 for a before b, 0 for a = b, 1 for a > b
+                  const aStr = Field.toString(docA[field] as FieldType);
+                  const bStr = Field.toString(docB[field] as FieldType);
+                  let out = 0;
                   if (aStr < bStr) out = -1;
                   if (aStr > bStr) out = 1;
                   if (desc) out *= -1;
                   return out;
               });
 
-        docs.splice(this.rowDropIndex, 0, ...DragManager.docsBeingDragged)
+        docs.splice(this.rowDropIndex, 0, ...draggedDocs);
         return { docs };
     }
 
@@ -1011,10 +1044,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     _oldWheel: any;
     render() {
         return (
-            <div className="collectionSchemaView" 
-            ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} 
-            onDrop={this.onExternalDrop.bind(this)} 
-            onPointerMove={(e) => this.onPointerMove(e)}>
+            <div className="collectionSchemaView" ref={(ele: HTMLDivElement | null) => this.createDashEventsTarget(ele)} onDrop={this.onExternalDrop.bind(this)} onPointerMove={e => this.onPointerMove(e)}>
                 <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }}></div>
                 <div
                     className="schema-table"
@@ -1031,7 +1061,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                                 placement="right"
                                 background={SettingsManager.userBackgroundColor}
                                 color={SettingsManager.userColor}
-                                toggle={<FontAwesomeIcon onPointerDown={e => this.openColumnMenu(-1, true)} icon="plus" />}
+                                toggle={<FontAwesomeIcon onPointerDown={() => this.openColumnMenu(-1, true)} icon="plus" />}
                                 trigger={PopupTrigger.CLICK}
                                 type={Type.TERT}
                                 isOpen={this._columnMenuIndex !== -1 ? false : undefined}
@@ -1040,6 +1070,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                         </div>
                         {this.columnKeys.map((key, index) => (
                             <SchemaColumnHeader
+                                // eslint-disable-next-line react/no-array-index-key
                                 key={index}
                                 columnIndex={index}
                                 columnKeys={this.columnKeys}
@@ -1059,28 +1090,42 @@ export class CollectionSchemaView extends CollectionSubView() {
                     </div>
                     {this._columnMenuIndex !== undefined && this._columnMenuIndex !== -1 && this.renderColumnMenu}
                     {this._filterColumnIndex !== undefined && this.renderFilterMenu}
-                    <CollectionSchemaViewDocs schema={this} childDocs={this.sortedDocsFunc} rowHeight={this.rowHeightFunc} setRef={(ref: HTMLDivElement | null) => (this._tableContentRef = ref)} />
+                    {
+                        // eslint-disable-next-line no-use-before-define
+                        <CollectionSchemaViewDocs
+                            schema={this}
+                            childDocs={this.sortedDocsFunc}
+                            rowHeight={this.rowHeightFunc}
+                            setRef={(ref: HTMLDivElement | null) => {
+                                this._tableContentRef = ref;
+                            }}
+                        />
+                    }
                     {this.layoutDoc.chromeHidden ? null : (
                         <div className="schema-add">
                             <EditableView
                                 GetValue={returnEmptyString}
                                 SetValue={undoable(value => (value ? this.addRow(Docs.Create.TextDocument(value, { title: value, _layout_autoHeight: true })) : false), 'add text doc')}
                                 placeholder={"Type text to create note or ':' to create specific type"}
-                                contents={'+ New Node'}
+                                contents="+ New Node"
                                 menuCallback={this.menuCallback}
                                 height={CollectionSchemaView._newNodeInputHeight}
                             />
                         </div>
                     )}
                 </div>
-                {this.previewWidth > 0 && <div className="schema-preview-divider" style={{ width: CollectionSchemaView._previewDividerWidth }} onPointerDown={this.onDividerDown}></div>}
+                {this.previewWidth > 0 && <div className="schema-preview-divider" style={{ width: CollectionSchemaView._previewDividerWidth }} onPointerDown={this.onDividerDown} />}
                 {this.previewWidth > 0 && (
-                    <div style={{ width: `${this.previewWidth}px` }} ref={ref => (this._previewRef = ref)}>
+                    <div
+                        style={{ width: `${this.previewWidth}px` }}
+                        ref={ref => {
+                            this._previewRef = ref;
+                        }}>
                         {Array.from(this._selectedDocs).lastElement() && (
                             <DocumentView
                                 Document={Array.from(this._selectedDocs).lastElement()}
                                 fitContentsToBox={returnTrue}
-                                dontCenter={'y'}
+                                dontCenter="y"
                                 onClickScriptDisable="always"
                                 focus={emptyFunction}
                                 defaultDoubleClick={returnIgnore}
@@ -1125,7 +1170,10 @@ class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsP
             <div className="schema-table-content" ref={this.props.setRef} style={{ height: `calc(100% - ${CollectionSchemaView._newNodeInputHeight + this.props.rowHeight()}px)` }}>
                 {this.props.childDocs().docs.map((doc: Doc, index: number) => (
                     <div key={doc[Id]} className="schema-row-wrapper" style={{ height: this.props.rowHeight() }}>
-                        <CollectionSchemaViewDoc doc={doc} schema={this.props.schema} index={index} rowHeight={this.props.rowHeight} />
+                        {
+                            // eslint-disable-next-line no-use-before-define
+                            <CollectionSchemaViewDoc doc={doc} schema={this.props.schema} index={index} rowHeight={this.props.rowHeight} />
+                        }
                     </div>
                 ))}
             </div>
@@ -1153,10 +1201,12 @@ class CollectionSchemaViewDoc extends ObservableReactComponent<CollectionSchemaV
         if (property === StyleProp.Opacity) return 1;
         return DefaultStyleProvider(doc, props, property);
     };
+    isRowContentActive = () => this._props.schema.isContentActive() || this._props.schema._props.isSelected() || this._props.schema._props.isAnyChildContentActive();
     render() {
         return (
             <DocumentView
                 key={this._props.doc[Id]}
+                // eslint-disable-next-line react/jsx-props-no-spreading
                 {...this._props.schema._props}
                 containerViewPath={this._props.schema.childContainerViewPath}
                 LayoutTemplate={this._props.schema._props.childLayoutTemplate}
@@ -1176,14 +1226,14 @@ class CollectionSchemaViewDoc extends ObservableReactComponent<CollectionSchemaV
                 searchFilterDocs={this._props.schema.searchFilterDocs}
                 rootSelected={this._props.schema.rootSelected}
                 ScreenToLocalTransform={this.screenToLocalXf}
-                dragWhenActive={true}
+                dragWhenActive
                 isDocumentActive={this._props.schema._props.childDocumentsActive?.() ? this._props.schema._props.isDocumentActive : this._props.schema.isContentActive}
-                isContentActive={emptyFunction}
+                isContentActive={this.isRowContentActive}
                 whenChildContentsActiveChanged={this._props.schema._props.whenChildContentsActiveChanged}
-                hideDecorations={true}
-                hideTitle={true}
-                hideDocumentButtonBar={true}
-                hideLinkAnchors={true}
+                hideDecorations
+                hideTitle
+                hideDocumentButtonBar
+                hideLinkAnchors
                 layout_fitWidth={returnTrue}
             />
         );
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 5f8b412be..6b5a34ec0 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -1,8 +1,10 @@
+/* eslint-disable react/no-unused-prop-types */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, observable } from 'mobx';
+import { action } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { emptyFunction, setupMoveUpEvents } from '../../../../Utils';
+import { setupMoveUpEvents } from '../../../../ClientUtils';
+import { emptyFunction } from '../../../../Utils';
 import { Colors } from '../../global/globalEnums';
 import './CollectionSchemaView.scss';
 
@@ -24,8 +26,6 @@ export interface SchemaColumnHeaderProps {
 
 @observer
 export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> {
-    @observable _ref: HTMLDivElement | null = null;
-
     get fieldKey() {
         return this.props.columnKeys[this.props.columnIndex];
     }
@@ -34,9 +34,9 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
     sortClicked = (e: React.PointerEvent) => {
         e.stopPropagation();
         e.preventDefault();
-        if (this.props.sortField == this.fieldKey && this.props.sortDesc) {
+        if (this.props.sortField === this.fieldKey && this.props.sortDesc) {
             this.props.setSort(undefined);
-        } else if (this.props.sortField == this.fieldKey) {
+        } else if (this.props.sortField === this.fieldKey) {
             this.props.setSort(this.fieldKey, true);
         } else {
             this.props.setSort(this.fieldKey, false);
@@ -45,7 +45,7 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
 
     @action
     onPointerDown = (e: React.PointerEvent) => {
-        this.props.isContentActive(true) && setupMoveUpEvents(this, e, e => this.props.dragColumn(e, this.props.columnIndex), emptyFunction, emptyFunction, false);
+        this.props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this.props.dragColumn(moveEv, this.props.columnIndex), emptyFunction, emptyFunction);
     };
 
     render() {
@@ -58,19 +58,18 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
                 onPointerDown={this.onPointerDown}
                 ref={col => {
                     if (col) {
-                        this._ref = col;
                         this.props.setColRef(this.props.columnIndex, col);
                     }
                 }}>
-                <div className="schema-column-resizer left" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex)}></div>
+                <div className="schema-column-resizer left" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex)} />
                 <div className="schema-column-title">{this.fieldKey}</div>
 
                 <div className="schema-header-menu">
                     <div className="schema-header-button" onPointerDown={e => this.props.openContextMenu(e.clientX, e.clientY, this.props.columnIndex)}>
                         <FontAwesomeIcon icon="ellipsis-h" />
                     </div>
-                    <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this.props.sortField == this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
-                        <FontAwesomeIcon icon="caret-right" style={this.props.sortField == this.fieldKey ? { transform: `rotate(${this.props.sortDesc ? '270deg' : '90deg'})` } : {}} />
+                    <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this.props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
+                        <FontAwesomeIcon icon="caret-right" style={this.props.sortField === this.fieldKey ? { transform: `rotate(${this.props.sortDesc ? '270deg' : '90deg'})` } : {}} />
                     </div>
                 </div>
             </div>
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 7e40ef766..059aa912e 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -5,17 +5,16 @@ import { computedFn } from 'mobx-utils';
 import * as React from 'react';
 import { CgClose, CgLock, CgLockUnlock } from 'react-icons/cg';
 import { FaExternalLinkAlt } from 'react-icons/fa';
-import { StopEvent, emptyFunction, returnFalse, setupMoveUpEvents } from '../../../../Utils';
+import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
+import { emptyFunction } from '../../../../Utils';
 import { Doc } from '../../../../fields/Doc';
 import { BoolCast } from '../../../../fields/Types';
-import { DragManager } from '../../../util/DragManager';
-import { SnappingManager } from '../../../util/SnappingManager';
 import { Transform } from '../../../util/Transform';
 import { undoable } from '../../../util/UndoManager';
 import { ViewBoxBaseComponent } from '../../DocComponent';
 import { Colors } from '../../global/globalEnums';
-import { OpenWhere } from '../../nodes/DocumentView';
 import { FieldView, FieldViewProps } from '../../nodes/FieldView';
+import { OpenWhere } from '../../nodes/OpenWhere';
 import { CollectionSchemaView } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
 import { SchemaTableCell } from './SchemaTableCell';
@@ -66,7 +65,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         return (
             <div
                 className="schema-row"
-                onPointerDown={(e) => this.setCursorIndex(e.clientY)}
+                onPointerDown={e => this.setCursorIndex(e.clientY)}
                 style={{ height: this._props.PanelHeight(), backgroundColor: this._props.isSelected() ? Colors.LIGHT_BLUE : undefined }}
                 ref={(row: HTMLDivElement | null) => {
                     row && this.schemaView?.addRowRef?.(this.Document, row);
@@ -80,7 +79,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                     }}>
                     <IconButton
                         tooltip="close"
-                        icon={<CgClose size={'16px'} />}
+                        icon={<CgClose size="16px" />}
                         size={Size.XSMALL}
                         onPointerDown={e =>
                             setupMoveUpEvents(
@@ -88,8 +87,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                                 e,
                                 returnFalse,
                                 emptyFunction,
-                                undoable(e => {
-                                    e.stopPropagation();
+                                undoable(clickEv => {
+                                    clickEv.stopPropagation();
                                     this._props.removeDocument?.(this.Document);
                                 }, 'Delete Row')
                             )
@@ -121,8 +120,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                                 e,
                                 returnFalse,
                                 emptyFunction,
-                                undoable(e => {
-                                    e.stopPropagation();
+                                undoable(clickEv => {
+                                    clickEv.stopPropagation();
                                     this._props.addDocTab(this.Document, OpenWhere.addRight);
                                 }, 'Open schema Doc preview')
                             )
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 59cd7994b..48c86ac27 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -1,3 +1,6 @@
+/* eslint-disable jsx-a11y/alt-text */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable no-use-before-define */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Popup, Size, Type } from 'browndash-components';
 import { action, computed, makeObservable, observable } from 'mobx';
@@ -7,16 +10,16 @@ import * as React from 'react';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import Select from 'react-select';
-import { StopEvent, Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero } from '../../../../Utils';
+import { ClientUtils, StopEvent, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../ClientUtils';
+import { emptyFunction } from '../../../../Utils';
 import { DateField } from '../../../../fields/DateField';
 import { Doc, DocListCast, Field } from '../../../../fields/Doc';
 import { RichTextField } from '../../../../fields/RichTextField';
-import { BoolCast, Cast, DateCast, DocCast, FieldValue, StrCast } from '../../../../fields/Types';
+import { ColumnType } from '../../../../fields/SchemaHeaderField';
+import { BoolCast, Cast, DateCast, DocCast, FieldValue, StrCast, toList } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
 import { FInfo, FInfoFieldType } from '../../../documents/Documents';
-import { DocFocusOrOpen } from '../../../util/DocumentManager';
-import { dropActionType } from '../../../util/DragManager';
-import { SettingsManager } from '../../../util/SettingsManager';
+import { dropActionType } from '../../../util/DropActionTypes';
 import { SnappingManager } from '../../../util/SnappingManager';
 import { Transform } from '../../../util/Transform';
 import { undoBatch, undoable } from '../../../util/UndoManager';
@@ -24,11 +27,10 @@ import { EditableView } from '../../EditableView';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DefaultStyleProvider } from '../../StyleProvider';
 import { Colors } from '../../global/globalEnums';
-import { OpenWhere, returnEmptyDocViewList } from '../../nodes/DocumentView';
+import { DocFocusOrOpen, returnEmptyDocViewList } from '../../nodes/DocumentView';
 import { FieldViewProps } from '../../nodes/FieldView';
-import { KeyValueBox } from '../../nodes/KeyValueBox';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
-import { ColumnType, FInfotoColType } from './CollectionSchemaView';
+import { FInfotoColType } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
 
 export interface SchemaTableCellProps {
@@ -64,8 +66,8 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
         makeObservable(this);
     }
 
-    static addFieldDoc = (doc: Doc, where: OpenWhere) => {
-        DocFocusOrOpen(doc);
+    static addFieldDoc = (docs: Doc | Doc[] /* , where: OpenWhere */) => {
+        DocFocusOrOpen(toList(docs)[0]);
         return true;
     };
     public static renderProps(props: SchemaTableCellProps) {
@@ -114,7 +116,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
 
     @computed get selected() {
         const selectedDocs: Doc[] | undefined = this._props.selectedCells();
-        let isSelected = this._props.isRowActive() && (selectedDocs?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col;
+        let isSelected = this._props.isRowActive() && selectedDocs?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col;
         return isSelected;
     }
 
@@ -144,7 +146,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                             this._props.finishEdit?.();
                             return true;
                         }
-                        const ret = KeyValueBox.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, Doc.IsDataProto(fieldProps.Document) ? true : undefined);
+                        const ret = Doc.SetField(fieldProps.Document, this._props.fieldKey.replace(/^_/, ''), value, Doc.IsDataProto(fieldProps.Document) ? true : undefined);
                         this._props.finishEdit?.();
                         return ret;
                     }, 'edit schema cell')}
@@ -177,13 +179,12 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
             case ColumnType.Image: return <SchemaImageCell {...this._props} />;
             case ColumnType.Boolean: return <SchemaBoolCell {...this._props} />;
             case ColumnType.RTF: return <SchemaRTFCell {...this._props} />;
-            case ColumnType.Enumeration: return <SchemaEnumerationCell {...this._props} options={this._props.getFinfo(this._props.fieldKey)?.values?.map(val => val.toString())} />;
+            case ColumnType.Enumeration: return <SchemaEnumerationCell {...this._props} options={this._props.getFinfo(this._props.fieldKey)?.values?.map(val => Field.toString(val))} />;
             case ColumnType.Date: return <SchemaDateCell {...this._props} />;
             default:  return this.defaultCellContent;
         }
     }
 
-    
     render() {
         return (
             <div
@@ -192,11 +193,13 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
                 onPointerDown={action(e => {
                     const shift: boolean = e.shiftKey;
                     const ctrl: boolean = e.ctrlKey;
-                    if (this.selected && ctrl) {
-                        this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
-                        e.stopPropagation();
-                    } else !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl)}
-                    )}
+                    if (this._props.isRowActive?.() !== false) {
+                        if (this.selected && ctrl) {
+                            this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
+                            e.stopPropagation();
+                        } else !this.selected && this._props.selectCell(this._props.Document, this._props.col, shift, ctrl);
+                    }
+                })}
                 style={{ padding: this._props.padding, maxWidth: this._props.maxWidth?.(), width: this._props.columnWidth() || undefined, border: this.selected ? `solid 2px ${Colors.MEDIUM_BLUE}` : undefined }}>
                 {this.content}
             </div>
@@ -216,8 +219,8 @@ export class SchemaImageCell extends ObservableReactComponent<SchemaTableCellPro
 
     choosePath(url: URL) {
         if (url.protocol === 'data') return url.href; // if the url ises the data protocol, just return the href
-        if (url.href.indexOf(window.location.origin) === -1) return Utils.CorsProxy(url.href); // otherwise, put it through the cors proxy erver
-        if (!/\.(png|jpg|jpeg|gif|webp)$/.test(url.href.toLowerCase())) return url.href; //Why is this here — good question
+        if (url.href.indexOf(window.location.origin) === -1) return ClientUtils.CorsProxy(url.href); // otherwise, put it through the cors proxy erver
+        if (!/\.(png|jpg|jpeg|gif|webp)$/.test(url.href.toLowerCase())) return url.href; // Why is this here — good question
 
         const ext = extname(url.href);
         return url.href.replace(ext, '_s' + ext);
@@ -232,7 +235,7 @@ export class SchemaImageCell extends ObservableReactComponent<SchemaTableCellPro
             .map(url => this.choosePath(url)); // access the primary layout data of the alternate documents
         const paths = field ? [this.choosePath(field.url), ...altpaths] : altpaths;
         // If there is a path, follow it; otherwise, follow a link to a default image icon
-        const url = paths.length ? paths : [Utils.CorsProxy('http://www.cs.brown.edu/~bcz/noImage.png')];
+        const url = paths.length ? paths : [ClientUtils.CorsProxy('http://www.cs.brown.edu/~bcz/noImage.png')];
         return url[0];
     }
 
@@ -256,7 +259,7 @@ export class SchemaImageCell extends ObservableReactComponent<SchemaTableCellPro
     };
 
     @action
-    removeHoverPreview = (e: React.PointerEvent) => {
+    removeHoverPreview = () => {
         if (!this._previewRef) return;
         document.body.removeChild(this._previewRef);
     };
@@ -268,7 +271,7 @@ export class SchemaImageCell extends ObservableReactComponent<SchemaTableCellPro
         const height = this._props.rowHeight() ? this._props.rowHeight() - (this._props.padding || 6) * 2 : undefined;
         const width = height ? height * aspect : undefined; // increase the width of the image if necessary to maintain proportionality
 
-        return <img src={this.url} width={width ? width : undefined} height={height} style={{}} draggable="false" onPointerEnter={this.showHoverPreview} onPointerMove={this.moveHoverPreview} onPointerLeave={this.removeHoverPreview} />;
+        return <img src={this.url} width={width || undefined} height={height} style={{}} draggable="false" onPointerEnter={this.showHoverPreview} onPointerMove={this.moveHoverPreview} onPointerLeave={this.removeHoverPreview} />;
     }
 }
 
@@ -292,26 +295,26 @@ export class SchemaDateCell extends ObservableReactComponent<SchemaTableCellProp
         // } else {
         // ^ DateCast is always undefined for some reason, but that is what the field should be set to
         date && (this._props.Document[this._props.fieldKey] = new DateField(date));
-        //}
+        // }
     }, 'date change');
 
     render() {
-        const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props);
+        const { pointerEvents } = SchemaTableCell.renderProps(this._props);
         return (
             <>
                 <div style={{ pointerEvents: 'none' }}>
-                    <DatePicker dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={e => {}} />
+                    <DatePicker dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={emptyFunction} />
                 </div>
                 {pointerEvents === 'none' ? null : (
                     <Popup
                         icon={<FontAwesomeIcon size="sm" icon="caret-down" />}
                         size={Size.XSMALL}
                         type={Type.TERT}
-                        color={SettingsManager.userColor}
-                        background={SettingsManager.userBackgroundColor}
+                        color={SnappingManager.userColor}
+                        background={SnappingManager.userBackgroundColor}
                         popup={
                             <div style={{ width: 'fit-content', height: '200px' }}>
-                                <DatePicker open={true} dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={this.handleChange} />
+                                <DatePicker open dateFormat="Pp" selected={this.date?.date ?? Date.now()} onChange={this.handleChange} />
                             </div>
                         }
                     />
@@ -329,7 +332,7 @@ export class SchemaRTFCell extends ObservableReactComponent<SchemaTableCellProps
 
     @computed get selected() {
         const selected = this._props.selectedCells();
-        return this._props.isRowActive() && (selected && selected?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col;
+        return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col;
         //return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col;
     }
 
@@ -340,7 +343,7 @@ export class SchemaRTFCell extends ObservableReactComponent<SchemaTableCellProps
         fieldProps.isContentActive = this.selectedFunc;
         return (
             <div className="schemaRTFCell" style={{ fontStyle: this.selected ? undefined : 'italic', color, textDecoration, cursor, pointerEvents }}>
-                {this.selected ? <FormattedTextBox {...fieldProps} autoFocus={true} onBlur={() => this._props.finishEdit?.()} /> : (field => (field ? Field.toString(field) : ''))(FieldValue(fieldProps.Document[fieldProps.fieldKey]))}
+                {this.selected ? <FormattedTextBox {...fieldProps} autoFocus onBlur={() => this._props.finishEdit?.()} /> : (field => (field ? Field.toString(field) : ''))(FieldValue(fieldProps.Document[fieldProps.fieldKey]))}
             </div>
         );
     }
@@ -354,7 +357,7 @@ export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProp
 
     @computed get selected() {
         const selected = this._props.selectedCells();
-        return this._props.isRowActive() && (selected && selected?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col;
+        return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col;
     }
     render() {
         const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props);
@@ -366,8 +369,8 @@ export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProp
                     checked={BoolCast(this._props.Document[this._props.fieldKey])}
                     onChange={undoBatch((value: React.ChangeEvent<HTMLInputElement> | undefined) => {
                         if ((value?.nativeEvent as any).shiftKey) {
-                            this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + value?.target?.checked.toString());
-                        } else KeyValueBox.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + value?.target?.checked.toString());
+                            this._props.setColumnValues(this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? ''));
+                        } else Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), (color === 'black' ? '=' : '') + (value?.target?.checked.toString() ?? ''));
                     })}
                 />
                 <EditableView
@@ -381,7 +384,7 @@ export class SchemaBoolCell extends ObservableReactComponent<SchemaTableCellProp
                             this._props.finishEdit?.();
                             return true;
                         }
-                        const set = KeyValueBox.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), value, Doc.IsDataProto(this._props.Document) ? true : undefined);
+                        const set = Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), value, Doc.IsDataProto(this._props.Document) ? true : undefined);
                         this._props.finishEdit?.();
                         return set;
                     })}
@@ -399,10 +402,10 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC
 
     @computed get selected() {
         const selected = this._props.selectedCells();
-        return this._props.isRowActive() && (selected && selected?.filter(doc => doc === this._props.Document).length !== 0) && this._props.selectedCol() === this._props.col;
+        return this._props.isRowActive() && selected && selected?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col;
     }
     render() {
-        const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props);
+        const { color, textDecoration, cursor, pointerEvents } = SchemaTableCell.renderProps(this._props);
         const options = this._props.options?.map(facet => ({ value: facet, label: facet }));
         return (
             <div className="schemaSelectionCell" style={{ color, textDecoration, cursor, pointerEvents }}>
@@ -447,7 +450,7 @@ export class SchemaEnumerationCell extends ObservableReactComponent<SchemaTableC
                         placeholder={StrCast(this._props.Document[this._props.fieldKey], 'select...')}
                         options={options}
                         isMulti={false}
-                        onChange={val => KeyValueBox.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), `"${val?.value ?? ''}"`)}
+                        onChange={val => Doc.SetField(this._props.Document, this._props.fieldKey.replace(/^_/, ''), `"${val?.value ?? ''}"`)}
                     />
                 </div>
             </div>