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

1 files changed, 192 insertions, 142 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}
             />
         );