Merge branch 'restoringEslint' into nathan-starter

17 files changed, 142 insertions, 175 deletions

diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 3ecfc8ba3..e6e95e86c 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -83,6 +83,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
     const isOpen = property.includes(':open');
     const boxBackground = property.includes(':box');
     const {
+        DocumentView: docView,
         fieldKey: fieldKeyProp,
         styleProvider,
         pointerEvents,
@@ -91,18 +92,18 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
         containerViewPath,
         childFilters,
         hideCaptions,
-        // eslint-disable-next-line camelcase
-        layout_showTitle,
+        showTitle,
         childFiltersByRanges,
         renderDepth,
         docViewPath,
-        DocumentView: docView,
         LayoutTemplateString,
         disableBrushing,
         NativeDimScaling,
         PanelWidth,
         PanelHeight,
+        isSelected,
     } = props || {}; // extract props that are not shared between fieldView and documentView props.
+    const componentView = docView?.()?.ComponentView;
     const fieldKey = fieldKeyProp ? fieldKeyProp + '_' : isCaption ? 'caption_' : '';
     const isInk = () => layoutDoc?._layout_isSvg && !LayoutTemplateString;
     const lockedPosition = () => doc && BoolCast(doc._lockedPosition);
@@ -149,7 +150,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
             return  undefined;
         case StyleProp.DocContents:  return undefined;
         case StyleProp.WidgetColor:  return isAnnotated ? Colors.LIGHT_BLUE : 'dimgrey';
-        case StyleProp.Opacity:      return docView?.().ComponentView?.isUnstyledView?.() ? 1 : Cast(doc?._opacity, "number", Cast(doc?.opacity, 'number', null));
+        case StyleProp.Opacity:      return componentView?.isUnstyledView?.() ? 1 : Cast(doc?._opacity, "number", Cast(doc?.opacity, 'number', null));
         case StyleProp.FontColor:    return StrCast(doc?.[fieldKey + 'fontColor'],  StrCast(Doc.UserDoc().fontColor, color()));
         case StyleProp.FontSize:     return StrCast(doc?.[fieldKey + 'fontSize'],   StrCast(Doc.UserDoc().fontSize));
         case StyleProp.FontFamily:   return StrCast(doc?.[fieldKey + 'fontFamily'], StrCast(Doc.UserDoc().fontFamily));
@@ -160,13 +161,13 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
         case StyleProp.ShowTitle:
             return (
                 (doc &&
-                    !docView?.().ComponentView?.isUnstyledView?.() &&
+                    !componentView?.isUnstyledView?.() &&
                     !LayoutTemplateString &&
                     !doc.presentation_targetDoc &&
-                    layout_showTitle?.() !== '' &&
+                    showTitle?.() !== '' &&
                     StrCast(
                         doc._layout_showTitle,
-                        layout_showTitle?.() ||
+                        showTitle?.() ||
                             (!Doc.IsSystem(doc) && [DocumentType.COL, DocumentType.FUNCPLOT, DocumentType.LABEL, DocumentType.RTF, DocumentType.IMG, DocumentType.VID].includes(doc.type as any)
                                 ? doc.author === ClientUtils.CurrentUserEmail()
                                     ? StrCast(Doc.UserDoc().layout_showTitle)
@@ -291,7 +292,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
             }
         }
         case StyleProp.PointerEvents:
-            if (docView?.().ComponentView?.dontRegisterView?.()) return 'all';
+            if (componentView?.dontRegisterView?.()) return 'all';
             if (StrCast(doc?.pointerEvents)) return StrCast(doc!.pointerEvents); // honor pointerEvents field (set by lock button usually) if it's not a keyValue view of the Doc
             if (SnappingManager.ExploreMode || doc?.layout_unrendered) return isInk() ? 'visiblePainted' : 'all';
             if (pointerEvents?.() === 'none') return 'none';
@@ -307,7 +308,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                         </div>
                     );
             const paint = () => !doc?.onPaint ? null : (
-                        <div className={`styleProvider-paint${docView?.().IsSelected ? "-selected":""}`} onClick={e => togglePaintView(e, doc, props)}>
+                        <div className={`styleProvider-paint${isSelected?.() ? "-selected":""}`} onClick={e => togglePaintView(e, doc, props)}>
                             <FontAwesomeIcon icon='pen' size="lg" />
                         </div>
                     );
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index 7617f2a52..27c85533f 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -78,7 +78,7 @@ export class CollectionCarousel3DView extends CollectionSubView() {
                 // suppressSetHeight={true}
                 NativeWidth={returnZero}
                 NativeHeight={returnZero}
-                layout_fitWidth={undefined}
+                fitWidth={undefined}
                 onDoubleClickScript={this.onChildDoubleClick}
                 renderDepth={this._props.renderDepth + 1}
                 LayoutTemplate={this._props.childLayoutTemplate}
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 9d3657995..45b64d3e6 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -74,7 +74,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                         {...this._props}
                         NativeWidth={returnZero}
                         NativeHeight={returnZero}
-                        layout_fitWidth={undefined}
+                        fitWidth={undefined}
                         setContentViewBox={undefined}
                         onDoubleClickScript={this.onContentDoubleClick}
                         onClickScript={this.onContentClick}
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 3f9eed1d6..53211be77 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -269,7 +269,7 @@ export class CollectionNoteTakingView extends CollectionSubView() {
                 PanelHeight={height}
                 styleProvider={this.styleProvider}
                 containerViewPath={this.childContainerViewPath}
-                layout_fitWidth={this._props.childLayoutFitWidth}
+                fitWidth={this._props.childLayoutFitWidth}
                 isContentActive={emptyFunction}
                 onKey={this.onKeyDown}
                 // TODO: change this from a prop to a parameter passed into a function
@@ -282,7 +282,7 @@ export class CollectionNoteTakingView extends CollectionSubView() {
                 dontCenter={this._props.childIgnoreNativeSize ? 'xy' : undefined}
                 dontRegisterView={dataDoc ? true : BoolCast(this.layoutDoc.childDontRegisterViews, this._props.dontRegisterView)}
                 rootSelected={this.rootSelected}
-                layout_showTitle={this._props.childlayout_showTitle}
+                showTitle={this._props.childlayout_showTitle}
                 dragAction={StrCast(this.layoutDoc.childDragAction) as dropActionType}
                 onClickScript={this.onChildClickHandler}
                 onDoubleClickScript={this.onChildDoubleClickHandler}
@@ -528,7 +528,7 @@ export class CollectionNoteTakingView extends CollectionSubView() {
     });
 
     refList = () => this._refList;
-    backgroundColor = () => this._props.DocumentView?.().backgroundColor();
+    backgroundColor = () => this.DocumentView?.()?.backgroundColor();
 
     // sectionNoteTaking returns a CollectionNoteTakingViewColumn (which is an individual column)
     sectionNoteTaking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => (
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index f9b123bb6..1604920f6 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -855,7 +855,7 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch
                     isDocumentActive={this._props.isDocumentActive}
                     PanelWidth={width}
                     PanelHeight={height}
-                    layout_fitWidth={returnTrue}
+                    fitWidth={returnTrue}
                     ScreenToLocalTransform={screenXf}
                     pinToPres={emptyFunction}
                     focus={focusFunc}
@@ -882,7 +882,7 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch
         return (
             <div style={{ pointerEvents: this.noEvents ? 'none' : undefined }}>
                 {inner.view}
-                {!inner.anchor.view || !inner.anchor.view.IsSelected ? null : (
+                {!inner.anchor.view?.IsSelected ? null : (
                     <>
                         <div key="left" className="collectionStackedTimeline-left-resizer" style={{ pointerEvents: this.noEvents ? 'none' : undefined }} onPointerDown={e => this.onAnchorDown(e, this._props.mark, true)} />
                         <div key="right" className="collectionStackedTimeline-resizer" style={{ pointerEvents: this.noEvents ? 'none' : undefined }} onPointerDown={e => this.onAnchorDown(e, this._props.mark, false)} />
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 3f12a281e..07aa0f4f0 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -336,7 +336,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 pointerEvents={this.DocumentView?.()._props.onClickScript?.() ? returnNone : undefined} // if the stack has an onClick, then we don't want the contents to be interactive (see CollectionPileView)
                 styleProvider={this.styleProvider}
                 containerViewPath={this.childContainerViewPath}
-                layout_fitWidth={this.childFitWidth}
+                fitWidth={this.childFitWidth}
                 isContentActive={doc.onClick ? this.isChildButtonContentActive : this.isChildContentActive}
                 onKey={this.onKeyDown}
                 DataTransition={trans}
@@ -348,7 +348,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
                 dontCenter={this._props.childIgnoreNativeSize ? 'xy' : (StrCast(this.layoutDoc.layout_dontCenter) as any)}
                 dontRegisterView={BoolCast(this.layoutDoc.childDontRegisterViews, this._props.dontRegisterView)} // used to be true if DataDoc existed, but template textboxes won't layout_autoHeight resize if dontRegisterView is set, but they need to.
                 rootSelected={this.rootSelected}
-                layout_showTitle={this._props.childlayout_showTitle}
+                showTitle={this._props.childlayout_showTitle}
                 dragAction={(this.layoutDoc.childDragAction ?? this._props.childDragAction) as dropActionType}
                 onClickScript={this.onChildClickHandler}
                 onDoubleClickScript={this.onChildDoubleClickHandler}
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 6ea6bbfbd..3a187171a 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -1015,7 +1015,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> {
                     }
                 })}
                 Document={this.Document}
-                layout_fitWidth={returnTrue}
+                fitWidth={returnTrue}
                 scriptContext={this}
                 hideDecorations
                 hideClickBehaviors
@@ -1122,7 +1122,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> {
                     this._dref = r;
                 })}
                 Document={this.Document}
-                layout_fitWidth={this.fitWidthFilter}
+                fitWidth={this.fitWidthFilter}
                 PanelWidth={this.embeddedPanelWidth}
                 PanelHeight={this.embeddedPanelHeight}
                 LayoutTemplateString={asText ? FormattedTextBox.LayoutString('text') : undefined}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 21a069bd8..74de6524b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -183,7 +183,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor);
     }
     @computed get fitWidth() {
-        return this._props.layout_fitWidth?.(this.Document) ?? this.layoutDoc.layout_fitWidth;
+        return this._props.fitWidth?.(this.Document) ?? this.layoutDoc.layout_fitWidth;
     }
     @computed get nativeDimScaling() {
         if (this._firstRender || (this._props.isAnnotationOverlay && !this._props.annotationLayerHostsContent)) return 1;
@@ -1055,7 +1055,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 pinToPres={this._props.pinToPres}
                 whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
                 dragAction={(this.Document.childDragAction ?? this._props.childDragAction) as dropActionType}
-                layout_showTitle={this._props.childlayout_showTitle}
+                showTitle={this._props.childlayout_showTitle}
                 dontRegisterView={this._props.dontRegisterView}
                 pointerEvents={this.childPointerEventsFunc}
             />
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 27e1eabcf..4df647728 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,7 +1,7 @@
 /* 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 { ObservableMap, action, computed, makeObservable, observable, observe, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnEmptyDoclist, returnEmptyString, returnFalse, returnIgnore, returnNever, returnTrue, setupMoveUpEvents, smoothScroll } from '../../../../ClientUtils';
@@ -10,9 +10,8 @@ import { Doc, DocListCast, Field, FieldType, NumListCast, Opt, StrListCast } fro
 import { DocData } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
-import { listSpec } from '../../../../fields/Schema';
 import { ColumnType } from '../../../../fields/SchemaHeaderField';
-import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types';
+import { BoolCast, NumCast, StrCast } from '../../../../fields/Types';
 import { DocUtils } from '../../../documents/DocUtils';
 import { Docs, DocumentOptions, FInfo } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
@@ -84,8 +83,8 @@ export class CollectionSchemaView extends CollectionSubView() {
     @observable _selectedCol: number = 0;
     @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
+    @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
     @observable _draggedColIndex = 0;
     @observable _colBeingDragged = false;
 
@@ -121,11 +120,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     @computed get columnKeys() {
-        return Cast(this.layoutDoc.schema_columnKeys, listSpec('string'), defaultColumnKeys);
-    }
-
-    @computed get rowKeys() {
-        return Cast(this.layoutDoc.schema_rowKeys, listSpec('string'), []);
+        return StrListCast(this.layoutDoc.schema_columnKeys, defaultColumnKeys);
     }
 
     @computed get storedColumnWidths() {
@@ -135,7 +130,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         );
 
         const totalWidth = widths.reduce((sum, width) => sum + width, 0);
-        //If the total width of all columns is not the width of the schema table minus the width of the row menu, resize them appropriately
+        // If the total width of all columns is not the width of the schema table minus the width of the row menu, resize them appropriately
         if (totalWidth !== this.tableWidth - CollectionSchemaView._rowMenuWidth) {
             return widths.map(w => (w / totalWidth) * (this.tableWidth - CollectionSchemaView._rowMenuWidth));
         }
@@ -143,8 +138,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 
     @computed get rowHeights() {
-        const heights = this.childDocs.map(() => this.rowHeightFunc());
-        return heights;
+        return this.childDocs.map(() => this.rowHeightFunc());
     }
 
     @computed get displayColumnWidths() {
@@ -209,9 +203,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                                 DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc));
                                 this.deselectCell(curDoc);
                             } else {
-                                const shift: boolean = e.shiftKey;
-                                const ctrl: boolean = e.ctrlKey;
-                                this.selectCell(newDoc, this._selectedCol, shift, ctrl);
+                                this.selectCell(newDoc, this._selectedCol, e.shiftKey, e.ctrlKey);
                                 this.scrollToDoc(newDoc, {});
                             }
                         }
@@ -230,9 +222,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                                 DocumentView.DeselectView(DocumentView.getFirstDocumentView(curDoc));
                                 this.deselectCell(curDoc);
                             } else {
-                                const shift: boolean = e.shiftKey;
-                                const ctrl: boolean = e.ctrlKey;
-                                this.selectCell(newDoc, this._selectedCol, shift, ctrl);
+                                this.selectCell(newDoc, this._selectedCol, e.shiftKey, e.ctrlKey);
                                 this.scrollToDoc(newDoc, {});
                             }
                         }
@@ -284,7 +274,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             this.addNewKey(newKey, defaultVal);
         }
 
-        const currKeys = [...this.columnKeys];
+        const currKeys = this.columnKeys.slice(); // copy the column key array first, then change it.
         currKeys[index] = newKey;
         this.layoutDoc.schema_columnKeys = new List<string>(currKeys);
     };
@@ -368,7 +358,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @undoBatch
     moveColumn = (fromIndex: number, toIndex: number) => {
         if (this._selectedCol === fromIndex) this._selectedCol = toIndex;
-        else if (toIndex === this._selectedCol) this._selectedCol = fromIndex; //keeps selected cell consistent
+        else if (toIndex === this._selectedCol) this._selectedCol = fromIndex; // keeps selected cell consistent
 
         const currKeys = this.columnKeys.slice();
         currKeys.splice(toIndex, 0, currKeys.splice(fromIndex, 1)[0]);
@@ -393,9 +383,9 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     findColDropIndex = (mouseX: number) => {
-        let leftOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0,0)[0]
-        console.log(leftOffset)
-        console.log(CollectionSchemaView._rowMenuWidth)
+        const leftOffset: number = this._props.ScreenToLocalTransform().inverse().transformPoint(0, 0)[0];
+        console.log(leftOffset);
+        console.log(CollectionSchemaView._rowMenuWidth);
         let index: number | undefined;
         this.displayColumnWidths.reduce((total, curr, i) => {
             if (total <= mouseX && total + curr >= mouseX) {
@@ -403,7 +393,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                 else index = i + 1;
             }
             return total + curr;
-        }, leftOffset + CollectionSchemaView._rowMenuWidth); //probably prone to issues; find better implementation (!!!)
+        }, leftOffset + CollectionSchemaView._rowMenuWidth); // probably prone to issues; find better implementation (!!!)
         return index;
     };
 
@@ -415,11 +405,11 @@ export class CollectionSchemaView extends CollectionSubView() {
      */
     @action
     setRelCursorIndex = (mouseY: number) => {
-        this._mouseCoordinates.y = mouseY; //updates this.rowDropIndex computed value to overwrite the old cached value
+        this._mouseCoordinates.y = mouseY; // updates this.rowDropIndex computed value to overwrite the old cached value
 
-        let rowHeight = CollectionSchemaView._rowHeight;
-        let adjInitMouseY = mouseY - rowHeight - 100; //rowHeight: height of the column menu cells | 100: height of the top menu
-        let yOffset = this._lowestSelectedIndex * rowHeight;
+        const rowHeight = CollectionSchemaView._rowHeight;
+        const adjInitMouseY = mouseY - rowHeight - 100; // rowHeight: height of the column menu cells | 100: height of the top menu
+        const yOffset = this._lowestSelectedIndex * rowHeight;
 
         const heights = this._selectedDocs.map(() => this.rowHeightFunc());
         let index: number = 0;
@@ -433,9 +423,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._relCursorIndex = index;
     };
 
-    //Uses current mouse position to calculate the indexes of actively dragged docs
     findRowDropIndex = (mouseY: number) => {
-        let rowHeight = CollectionSchemaView._rowHeight;
+        const rowHeight = CollectionSchemaView._rowHeight;
         let index: number = 0;
         this.rowHeights.reduce((total, curr, i) => {
             if (total <= mouseY && total + curr >= mouseY) {
@@ -445,39 +434,31 @@ export class CollectionSchemaView extends CollectionSubView() {
             return total + curr;
         }, rowHeight);
 
-        //fix index if selected rows are dragged out of bounds
+        // fix index if selected rows are dragged out of bounds
         let adjIndex = index - this._relCursorIndex;
-        let maxY = this.rowHeights.reduce((total, curr) => total + curr, 0) + rowHeight;
+        const maxY = this.rowHeights.reduce((total, curr) => total + curr, 0) + rowHeight;
         if (mouseY > maxY) adjIndex = this.childDocs.length - 1;
         else if (adjIndex <= 0) adjIndex = 0;
 
         return adjIndex;
     };
 
-    @action
-    highlightDraggedColumn = (index: number) => {
+    highlightDraggedColumn = (index: number) =>
         this._colEles.forEach((colRef, i) => {
-            let edgeStyle = '';
-            if (i === index) edgeStyle = `solid 2px ${Colors.MEDIUM_BLUE}`;
-
-            //border styles of menu cell
-            colRef.style.borderLeft = edgeStyle;
-            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])) {
-                    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) {
-                        this._rowEles.get(this.childDocs[doc]).children[1].children[i].style.borderBottom = edgeStyle;
-                    }
-                }
-            }
+            const edgeStyle = i === index ? `solid 2px ${Colors.MEDIUM_BLUE}` : '';
+            const cellEles = [
+                colRef,
+                ...this.childDocs //
+                    .filter(doc => i !== this._selectedCol || !this._selectedDocs.includes(doc))
+                    .map(doc => this._rowEles.get(doc).children[1].children[i]),
+            ];
+            cellEles[0].style.borderTop = edgeStyle;
+            cellEles.forEach(ele => {
+                ele.style.borderLeft = edgeStyle;
+                ele.style.borderRight = edgeStyle;
+            });
+            cellEles.slice(-1)[0].style.borderBottom = edgeStyle;
         });
-    };
 
     @action
     addRowRef = (doc: Doc, ref: HTMLDivElement) => this._rowEles.set(doc, ref);
@@ -521,7 +502,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         if (!shiftKey && !ctrlKey) this.clearSelection();
         !this._selectedCells && (this._selectedCells = []);
         !shiftKey && this._selectedCells && this._selectedCells.push(doc);
-        let index = this.rowIndex(doc);
+        const index = this.rowIndex(doc);
 
         if (!this) return;
         const lastSelected = Array.from(this._selectedDocs).lastElement();
@@ -536,13 +517,13 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         if (this._lowestSelectedIndex === -1 || index < this._lowestSelectedIndex) this._lowestSelectedIndex = index;
 
-        //let selectedIndexes: Array<Number> = this._selectedCells.map(doc => this.rowIndex(doc));
+        // let selectedIndexes: Array<Number> = this._selectedCells.map(doc => this.rowIndex(doc));
     };
 
     @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(d => this.rowIndex(d)));
     };
 
     @action
@@ -556,8 +537,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     @computed
     get rowDropIndex() {
         const mouseY = this.ScreenToLocalBoxXf().transformPoint(this._mouseCoordinates.x, this._mouseCoordinates.y)[1];
-        const index = this.findRowDropIndex(mouseY);
-        return index;
+        return this.findRowDropIndex(mouseY);
     }
 
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
@@ -566,7 +546,7 @@ export class CollectionSchemaView extends CollectionSubView() {
             e.stopPropagation();
 
             this._colEles.forEach((colRef, i) => {
-                //style for menu cell
+                // style for menu cell
                 colRef.style.borderLeft = '';
                 colRef.style.borderRight = '';
                 colRef.style.borderTop = '';
@@ -584,7 +564,7 @@ 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));
+            const map = draggedDocs?.map(doc => this.rowIndex(doc));
             console.log(map);
             this.dataDoc[this.fieldKey ?? 'data'] = new List<Doc>([...this.sortedDocs.docs]);
             this.clearSelection();
@@ -592,16 +572,13 @@ export class CollectionSchemaView extends CollectionSubView() {
                 DocumentView.addViewRenderedCb(doc, dv => dv.select(true));
                 console.log(doc.x);
             });
-            this._lowestSelectedIndex = Math.min(...draggedDocs?.map(doc => this.rowIndex(doc)));
+            this._lowestSelectedIndex = Math.min(...(draggedDocs?.map(doc => this.rowIndex(doc)) ?? []));
             return true;
         }
         return false;
     };
 
-    onExternalDrop = async (e: React.DragEvent): Promise<void> => {
-        super.onExternalDrop(e, {}, undoBatch(action(docs => docs.map((doc: Doc) => this.addDocument(doc)))));
-    };
-
+    onExternalDrop = (e: React.DragEvent) => super.onExternalDrop(e, {}, docs => docs.map(doc => this.addDocument(doc)));
     onDividerDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, emptyFunction);
 
     @action
@@ -697,9 +674,9 @@ export class CollectionSchemaView extends CollectionSubView() {
             case 'Enter':
                 this._menuKeys.length > 0 && this._menuValue.length > 0
                     ? this.setKey(this._menuKeys[0])
-                    : action(() => {
+                    : runInAction(() => {
                           this._makeNewField = true;
-                      })();
+                      });
                 break;
             case 'Escape':
                 this.closeColumnMenu();
@@ -719,9 +696,9 @@ export class CollectionSchemaView extends CollectionSubView() {
     };
 
     setColumnValues = (key: string, value: string) => {
-        const selectedDocs: Doc[] = new Array();
+        const selectedDocs: Doc[] = [];
         this.childDocs.forEach(doc => {
-            let docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
+            const docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
             if (docIsSelected) {
                 selectedDocs.push(doc);
             }
@@ -736,7 +713,7 @@ 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);
+            const docIsSelected = this._selectedCells && !(this._selectedCells?.filter(d => d === doc).length === 0);
             if (docIsSelected) {
                 Doc.SetField(doc, key, value);
             }
@@ -746,16 +723,16 @@ export class CollectionSchemaView extends CollectionSubView() {
 
     @computed
     get activeMenuKeys() {
-        let activeKeys = this.documentKeys.filter(key => this.childDocsInclude(key));
-        return activeKeys
+        const activeKeys = this.documentKeys.filter(key => this.childDocsInclude(key));
+        return activeKeys;
     }
-    
+
     childDocsInclude = (key: string) => {
         this.childDocs.forEach(doc => {
-            //TODO: if childdoc fieldkeys contain the key, return true
-        })
-        return false
-    }
+            // TODO: if childdoc fieldkeys contain the key, return true
+        });
+        return false;
+    };
 
     @action
     openColumnMenu = (index: number, newCol: boolean) => {
@@ -954,7 +931,10 @@ export class CollectionSchemaView extends CollectionSubView() {
         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()} />
-                <button className="schema-column-menu-toggle" onClick={() => null}></button> 
+                {
+                    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+                    <button type="button" className="schema-column-menu-toggle" />
+                }
                 {this._makeNewField ? this.newFieldMenu : this.keysDropdown}
             </div>
         );
@@ -981,17 +961,11 @@ export class CollectionSchemaView extends CollectionSubView() {
             }
             return (
                 <div key={key} className="schema-filter-option">
-                    <input
+                    <input //
                         type="checkbox"
                         onPointerDown={e => e.stopPropagation()}
                         onClick={e => e.stopPropagation()}
-                        onChange={action((e: any) => {
-                            if (e.target.checked) {
-                                Doc.setDocFilter(this.Document, columnKey, key, 'check');
-                            } else {
-                                Doc.setDocFilter(this.Document, columnKey, key, 'remove');
-                            }
-                        })}
+                        onChange={e => Doc.setDocFilter(this.Document, columnKey, key, e.target.checked ? 'check' : 'remove')}
                         checked={bool}
                     />
                     <span style={{ paddingLeft: 4 }}>{key}</span>
@@ -1024,9 +998,9 @@ export class CollectionSchemaView extends CollectionSubView() {
             this._mouseCoordinates = { x: e.clientX, y: e.clientY };
         }
         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;
+            const newIndex = this.findColDropIndex(e.clientX);
+            if (newIndex !== this._draggedColIndex) this.moveColumn(this._draggedColIndex, newIndex ?? this._draggedColIndex);
+            this._draggedColIndex = newIndex || this._draggedColIndex;
             this.highlightDraggedColumn(newIndex ?? this._draggedColIndex);
         }
     };
@@ -1063,7 +1037,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     render() {
         return (
             <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 ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }} />
                 <div
                     className="schema-table"
                     style={{ width: `calc(100% - ${this.previewWidth}px)` }}
@@ -1174,31 +1148,6 @@ export class CollectionSchemaView extends CollectionSubView() {
     }
 }
 
-interface CollectionSchemaViewDocsProps {
-    schema: CollectionSchemaView;
-    setRef: (ref: HTMLDivElement | null) => void;
-    childDocs: () => { docs: Doc[] };
-    rowHeight: () => number;
-}
-
-@observer
-class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsProps> {
-    render() {
-        return (
-            <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() }}>
-                        {
-                            // eslint-disable-next-line no-use-before-define
-                            <CollectionSchemaViewDoc doc={doc} schema={this.props.schema} index={index} rowHeight={this.props.rowHeight} />
-                        }
-                    </div>
-                ))}
-            </div>
-        );
-    }
-}
-
 interface CollectionSchemaViewDocProps {
     schema: CollectionSchemaView;
     index: number;
@@ -1252,8 +1201,29 @@ class CollectionSchemaViewDoc extends ObservableReactComponent<CollectionSchemaV
                 hideTitle
                 hideDocumentButtonBar
                 hideLinkAnchors
-                layout_fitWidth={returnTrue}
+                fitWidth={returnTrue}
             />
         );
     }
 }
+interface CollectionSchemaViewDocsProps {
+    schema: CollectionSchemaView;
+    setRef: (ref: HTMLDivElement | null) => void;
+    childDocs: () => { docs: Doc[] };
+    rowHeight: () => number;
+}
+
+@observer
+class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsProps> {
+    render() {
+        return (
+            <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} />
+                    </div>
+                ))}
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 059aa912e..760089ffb 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -41,7 +41,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
     }
 
     @computed get schemaDoc() {
-        return this.DocumentView?.().containerViewPath?.().lastElement()?.Document;
+        return this.schemaView.Document;
     }
 
     @computed get rowIndex() {
@@ -104,12 +104,13 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                                 e,
                                 returnFalse,
                                 emptyFunction,
-                                undoable(e => {
-                                    e.stopPropagation();
+                                undoable(clickEv => {
+                                    clickEv.stopPropagation();
                                     Doc.toggleLockedPosition(this.Document);
-                                }, 'Delete Row') //(??) should this be something else?
+                                }, 'toggle document lock')
                             )
-                        }></IconButton>
+                        }
+                    />
                     <IconButton
                         tooltip="open preview"
                         icon={<FaExternalLinkAlt />}
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 48c86ac27..b017eb62b 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -82,7 +82,7 @@ export class SchemaTableCell extends ObservableReactComponent<SchemaTableCellPro
             doc = DocCast(doc.proto);
         }
         const parenCount = Math.max(0, protoCount - 1);
-        const color = protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; //color of text in cells
+        const color = protoCount === 0 || (fieldKey.startsWith('_') && Document[fieldKey] === undefined) ? 'black' : 'blue'; // color of text in cells
         const textDecoration = color !== 'black' && parenCount ? 'underline' : '';
         const fieldProps: FieldViewProps = {
             childFilters: returnEmptyFilter,
@@ -116,8 +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;
-        return isSelected;
+        return this._props.isRowActive() && selectedDocs?.filter(doc => doc === this._props.Document).length !== 0 && this._props.selectedCol() === this._props.col;
     }
 
     @computed get defaultCellContent() {
@@ -333,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?.[0] === this._props.Document && selected[1] === this._props.col;
+        // return this._props.isRowActive() && selected?.[0] === this._props.Document && selected[1] === this._props.col;
     }
 
     // if the text box blurs and none of its contents are focused(), then the edit finishes
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 3191e04db..dc597e5ff 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -122,14 +122,14 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
 
     animateScaleTime = () => this._animateScaleTime ?? 100;
     style = (doc: Doc, sprop: StyleProp | string) => this._props.styleProvider?.(doc, this._props, sprop);
-    @computed get layout_showTitle()   { return this.style(this.layoutDoc, StyleProp.ShowTitle) as Opt<string>; } // prettier-ignore
+    @computed get showTitle()          { return this.style(this.layoutDoc, StyleProp.ShowTitle) as Opt<string>; } // prettier-ignore
     @computed get opacity()            { return this.style(this.layoutDoc, StyleProp.Opacity); } // prettier-ignore
     @computed get boxShadow()          { return this.style(this.layoutDoc, StyleProp.BoxShadow); } // prettier-ignore
     @computed get borderRounding()     { return this.style(this.layoutDoc, StyleProp.BorderRounding); } // prettier-ignore
     @computed get widgetDecorations()  { return this.style(this.layoutDoc, StyleProp.Decorations); } // prettier-ignore
     @computed get backgroundBoxColor() { return this.style(this.layoutDoc, StyleProp.BackgroundColor + ':box'); } // prettier-ignore
     @computed get headerMargin()       { return this.style(this.layoutDoc, StyleProp.HeaderMargin) ?? 0; } // prettier-ignore
-    @computed get layout_showCaption() { return this.style(this.layoutDoc, StyleProp.ShowCaption) ?? 0;  } // prettier-ignore
+    @computed get showCaption()        { return this.style(this.layoutDoc, StyleProp.ShowCaption) ?? 0;  } // prettier-ignore
     @computed get titleHeight()        { return this.style(this.layoutDoc, StyleProp.TitleHeight) ?? 0;  } // prettier-ignore
     @computed get docContents()        { return this.style(this.Document, StyleProp.DocContents); } // prettier-ignore
     @computed get highlighting()       { return this.style(this.Document, StyleProp.Highlighting); } // prettier-ignore
@@ -762,7 +762,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                 selectFunc={action((field: string | number) => {
                     if (this.layoutDoc.layout_showTitle) {
                         this.layoutDoc._layout_showTitle = field;
-                    } else if (!this._props.layout_showTitle) {
+                    } else if (!this._props.showTitle) {
                         Doc.UserDoc().layout_showTitle = field;
                     }
                     this._changingTitleField = false;
@@ -776,8 +776,8 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
      * setting layout_showTitle using the format:   field1[:hover]
      * */
     @computed get titleView() {
-        const showTitle = this.layout_showTitle?.split(':')[0];
-        const showTitleHover = this.layout_showTitle?.includes(':hover');
+        const showTitle = this.showTitle?.split(':')[0];
+        const showTitleHover = this.showTitle?.includes(':hover');
 
         const targetDoc = showTitle?.startsWith('_') ? this.layoutDoc : this.Document;
         const background = StrCast(
@@ -835,7 +835,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                             if (input?.startsWith('$')) {
                                 if (this.layoutDoc.layout_showTitle) {
                                     this.layoutDoc._layout_showTitle = input?.substring(1) ? input.substring(1) : undefined;
-                                } else if (!this._props.layout_showTitle) {
+                                } else if (!this._props.showTitle) {
                                     Doc.UserDoc().layout_showTitle = input?.substring(1) ? input.substring(1) : 'title';
                                 }
                             } else if (showTitle && !showTitle.includes(';') && !showTitle.includes('Date') && showTitle !== 'author') {
@@ -850,7 +850,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
     }
 
     @computed get captionView() {
-        return !this.layout_showCaption ? null : (
+        return !this.showCaption ? null : (
             <div
                 className="documentView-captionWrapper"
                 style={{
@@ -862,7 +862,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                     {...this._props}
                     yPadding={10}
                     xPadding={10}
-                    fieldKey={this.layout_showCaption}
+                    fieldKey={this.showCaption}
                     styleProvider={this.captionStyleProvider}
                     dontRegisterView
                     rootSelected={this.rootSelected}
@@ -877,7 +877,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
 
     renderDoc = (style: object) => {
         TraceMobx();
-        const showTitle = this.layout_showTitle?.split(':')[0];
+        const showTitle = this.showTitle?.split(':')[0];
         return !DocCast(this.Document) || GetEffectiveAcl(this.dataDoc) === AclPrivate
             ? null
             : this.docContents ?? (
@@ -895,7 +895,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                           transform: this._animateScalingTo ? `scale(${this._animateScalingTo})` : undefined,
                           transition: !this._animateScalingTo ? this._props.DataTransition?.() : `transform ${this.animateScaleTime() / 1000}s ease-${this._animateScalingTo < 1 ? 'in' : 'out'}`,
                       }}>
-                      {this._props.hideTitle || (!showTitle && !this.layout_showCaption) ? (
+                      {this._props.hideTitle || (!showTitle && !this.showCaption) ? (
                           this.viewBoxContents
                       ) : (
                           <div className="documentView-styleWrapper">
@@ -1124,7 +1124,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
     }
 
     @computed get layout_fitWidth() {
-        return this._props.layout_fitWidth?.(this.layoutDoc) ?? this.layoutDoc?.layout_fitWidth;
+        return this._props.fitWidth?.(this.layoutDoc) ?? this.layoutDoc?.layout_fitWidth;
     }
     @computed get anchorViewDoc() {
         return this._props.LayoutTemplateString?.includes('link_anchor_2') ? DocCast(this.Document.link_anchor_2) : this._props.LayoutTemplateString?.includes('link_anchor_1') ? DocCast(this.Document.link_anchor_1) : undefined;
@@ -1319,8 +1319,6 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
     screenToLocalScale = () => this._props.ScreenToLocalTransform().Scale;
     isSelected = () => this.IsSelected;
     select = (extendSelection: boolean, focusSelection?: boolean) => {
-        // if (this.IsSelected && DocumentView.Selected().length > 1) DocumentView.DeselectView(this);
-        // else {
         DocumentView.SelectView(this, extendSelection);
         if (focusSelection) {
             DocumentView.showDocument(this.Document, {
@@ -1329,7 +1327,6 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
                 zoomTime: 500,
             });
         }
-        //}
     };
     backgroundColor = () => this._docViewInternal?.backgroundBoxColor;
     DataTransition = () => this._props.DataTransition?.() || StrCast(this.Document.dataTransition);
@@ -1415,7 +1412,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
                             NativeDimScaling={this.NativeDimScaling}
                             isSelected={this.isSelected}
                             select={this.select}
-                            layout_fitWidth={this.layout_fitWidthFunc}
+                            fitWidth={this.layout_fitWidthFunc}
                             ScreenToLocalTransform={this.screenToContentsTransform}
                             focus={this._props.focus || emptyFunction}
                             ref={action((r: DocumentViewInternal | null) => {
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 8a37000f7..66b134889 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -61,9 +61,9 @@ export interface FieldViewSharedProps {
     onPointerUpScript?: () => ScriptField;
     // eslint-disable-next-line no-use-before-define
     onKey?: (e: React.KeyboardEvent, fieldProps: FieldViewProps) => boolean | undefined;
-    layout_fitWidth?: (doc: Doc) => boolean | undefined;
+    fitWidth?: (doc: Doc) => boolean | undefined;
     searchFilterDocs: () => Doc[];
-    layout_showTitle?: () => string;
+    showTitle?: () => string;
     whenChildContentsActiveChanged: (isActive: boolean) => void;
     rootSelected?: () => boolean; // whether the root of a template has been selected
     addDocTab: (doc: Doc | Doc[], where: OpenWhere) => boolean;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 3d10408d6..e4b3a1b9b 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -24,7 +24,7 @@ import { undoBatch } from '../../util/UndoManager';
 import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView';
 import { ContextMenu } from '../ContextMenu';
 import { ContextMenuProps } from '../ContextMenuItem';
-import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent';
+import { ViewBoxAnnotatableComponent } from '../DocComponent';
 import { MarqueeAnnotator } from '../MarqueeAnnotator';
 import { OverlayView } from '../OverlayView';
 import { AnchorMenu } from '../pdf/AnchorMenu';
@@ -291,7 +291,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const ext = extname(url.href);
         return url.href.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
     };
-    getScrollHeight = () => (this._props.layout_fitWidth?.(this.Document) !== false && NumCast(this.layoutDoc._freeform_scale, 1) === NumCast(this.dataDoc._freeform_scaleMin, 1) ? this.nativeSize.nativeHeight : undefined);
+    getScrollHeight = () => (this._props.fitWidth?.(this.Document) !== false && NumCast(this.layoutDoc._freeform_scale, 1) === NumCast(this.dataDoc._freeform_scaleMin, 1) ? this.nativeSize.nativeHeight : undefined);
 
     @computed get nativeSize() {
         TraceMobx();
@@ -472,7 +472,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     height: this._props.PanelWidth() ? undefined : `100%`,
                     pointerEvents: this.layoutDoc._lockedPosition ? 'none' : undefined,
                     borderRadius,
-                    overflow: this.layoutDoc.layout_fitWidth || this._props.layout_fitWidth?.(this.Document) ? 'auto' : undefined,
+                    overflow: this.layoutDoc.layout_fitWidth || this._props.fitWidth?.(this.Document) ? 'auto' : undefined,
                 }}>
                 <CollectionFreeFormView
                     ref={this._ffref}
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 508008569..8f29600f6 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -291,7 +291,7 @@ export class LinkDocPreview extends ObservableReactComponent<LinkDocPreviewProps
                             isDocumentActive={returnFalse}
                             isContentActive={returnFalse}
                             addDocument={returnFalse}
-                            layout_showTitle={returnEmptyString}
+                            showTitle={returnEmptyString}
                             removeDocument={returnFalse}
                             addDocTab={returnFalse}
                             pinToPres={returnFalse}
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 1dc194c42..7a89b143b 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -328,8 +328,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     setPdfViewer = (pdfViewer: PDFViewer) => {
         this._pdfViewer = pdfViewer;
-        const docView = this.DocumentView?.();
-        if (this._initialScrollTarget && docView) {
+        if (this._initialScrollTarget) {
             this.focus(this._initialScrollTarget, { instant: true });
             this._initialScrollTarget = undefined;
         }
@@ -559,7 +558,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     removeDocument={this.removeDocument}
                 />
             ) : (
-                <div onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => DocumentView.SelectView(this.DocumentView?.()!, false), true)}>
+                <div onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => this._props.select(false), true)}>
                     <ComponentTag
                         // eslint-disable-next-line react/jsx-props-no-spreading
                         {...this._props}
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index afd73cfe8..3b1815f8a 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -23,7 +23,7 @@ import { CollectionFreeFormView } from '../collections/collectionFreeForm/Collec
 import { CollectionStackedTimeline, TrimScope } from '../collections/CollectionStackedTimeline';
 import { ContextMenu } from '../ContextMenu';
 import { ContextMenuProps } from '../ContextMenuItem';
-import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent';
+import { ViewBoxAnnotatableComponent } from '../DocComponent';
 import { VideoThumbnails } from '../global/globalEnums';
 import { MarqueeAnnotator } from '../MarqueeAnnotator';
 import { AnchorMenu } from '../pdf/AnchorMenu';
@@ -48,7 +48,7 @@ import './VideoBox.scss';
  */
 
 @observer
-export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
+export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(VideoBox, fieldKey);
     }