fixing more .props => ._props refernces.

47 files changed, 289 insertions, 350 deletions

diff --git a/src/client/util/BranchingTrailManager.tsx b/src/client/util/BranchingTrailManager.tsx
index 11f16493f..02879e3c4 100644
--- a/src/client/util/BranchingTrailManager.tsx
+++ b/src/client/util/BranchingTrailManager.tsx
@@ -54,7 +54,7 @@ export class BranchingTrailManager extends React.Component {
     @observable private docIdToDocMap: Map<String, Doc> = new Map<String, Doc>();
 
     observeDocumentChange = (targetDoc: Doc, pres: PresBox) => {
-        const presId = pres.props.Document[Id];
+        const presId = pres.Document[Id];
         if (this.prevPresId === presId) {
             return;
         }
diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx
index c1e0a5b2e..2e13aff2f 100644
--- a/src/client/util/CaptureManager.tsx
+++ b/src/client/util/CaptureManager.tsx
@@ -84,7 +84,7 @@ export class CaptureManager extends React.Component<{}> {
                         onClick={() => {
                             const selected = SelectionManager.Views.slice();
                             SelectionManager.DeselectAll();
-                            selected.map(dv => dv.props.removeDocument?.(dv.props.Document));
+                            selected.map(dv => dv.props.removeDocument?.(dv.Document));
                             this.close();
                         }}>
                         Cancel
diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts
index 039bb360e..82c63695c 100644
--- a/src/client/util/DictationManager.ts
+++ b/src/client/util/DictationManager.ts
@@ -290,7 +290,7 @@ export namespace DictationManager {
             if (!ctor) {
                 return false;
             }
-            return Cast(Doc.GetProto(view.props.Document).data, ctor) !== undefined;
+            return Cast(Doc.GetProto(view.Document).data, ctor) !== undefined;
         };
 
         const validate = (target: DocumentView, types: DocumentType[]) => {
@@ -318,7 +318,7 @@ export namespace DictationManager {
             [
                 'clear',
                 {
-                    action: (target: DocumentView) => (Doc.GetProto(target.props.Document).data = new List()),
+                    action: (target: DocumentView) => (Doc.GetProto(target.Document).data = new List()),
                     restrictTo: [DocumentType.COL],
                 },
             ],
@@ -347,7 +347,7 @@ export namespace DictationManager {
                 action: (target: DocumentView, matches: RegExpExecArray) => {
                     const count = interpretNumber(matches[1]);
                     const what = matches[2];
-                    const dataDoc = Doc.GetProto(target.props.Document);
+                    const dataDoc = Doc.GetProto(target.Document);
                     const fieldKey = 'data';
                     if (isNaN(count)) {
                         return;
@@ -372,7 +372,7 @@ export namespace DictationManager {
                 expression: /view as (freeform|stacking|masonry|schema|tree)/g,
                 action: (target: DocumentView, matches: RegExpExecArray) => {
                     const mode = matches[1];
-                    mode && (target.props.Document._type_collection = mode);
+                    mode && (target.Document._type_collection = mode);
                 },
                 restrictTo: [DocumentType.COL],
             }
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index fe3a52be7..9ede18ed5 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -142,7 +142,7 @@ export namespace DragManager {
             this.linkSourceGetAnchor = linkSourceGetAnchor;
         }
         get dragDocument() {
-            return this.linkDragView.props.Document;
+            return this.linkDragView.Document;
         }
         linkSourceGetAnchor: () => Doc;
         linkSourceDoc?: Doc;
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index 7de0f336f..894583711 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -19,35 +19,38 @@ interface GroupMemberViewProps {
 @observer
 export class GroupMemberView extends React.Component<GroupMemberViewProps> {
     @observable private memberSort: 'ascending' | 'descending' | 'none' = 'none';
+    get group() {
+        return this.props.group;
+    }
 
     private get editingInterface() {
-        let members: string[] = this.props.group ? JSON.parse(StrCast(this.props.group.members)) : [];
+        let members: string[] = this.group ? JSON.parse(StrCast(this.group.members)) : [];
         members = this.memberSort === 'ascending' ? members.sort() : this.memberSort === 'descending' ? members.sort().reverse() : members;
 
-        const options: UserOptions[] = this.props.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.props.group.members)) as string[]).includes(option.value)) : [];
+        const options: UserOptions[] = this.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.group.members)) as string[]).includes(option.value)) : [];
 
-        const hasEditAccess = GroupManager.Instance.hasEditAccess(this.props.group);
+        const hasEditAccess = GroupManager.Instance.hasEditAccess(this.group);
 
-        return !this.props.group ? null : (
+        return !this.group ? null : (
             <div className="editing-interface" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
                 <div className="editing-header">
                     <input
                         className="group-title"
                         style={{ marginLeft: !hasEditAccess ? '-14%' : 0 }}
-                        value={StrCast(this.props.group.title || this.props.group.groupName)}
-                        onChange={e => (this.props.group.title = e.currentTarget.value)}
+                        value={StrCast(this.group.title || this.group.groupName)}
+                        onChange={e => (this.group.title = e.currentTarget.value)}
                         disabled={!hasEditAccess}></input>
                     <div className={'memberView-closeButton'}>
                         <Button icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} onClick={action(this.props.onCloseButtonClick)} color={StrCast(Doc.UserDoc().userColor)} />
                     </div>
-                    {GroupManager.Instance.hasEditAccess(this.props.group) ? (
+                    {GroupManager.Instance.hasEditAccess(this.group) ? (
                         <div className="group-buttons">
                             <div style={{ border: StrCast(Doc.UserDoc().userColor) }}>
                                 <Select
                                     className="add-member-dropdown"
                                     isSearchable={true}
                                     options={options}
-                                    onChange={selectedOption => GroupManager.Instance.addMemberToGroup(this.props.group, (selectedOption as UserOptions).value)}
+                                    onChange={selectedOption => GroupManager.Instance.addMemberToGroup(this.group, (selectedOption as UserOptions).value)}
                                     placeholder={'Add members'}
                                     value={null}
                                     styles={{
@@ -72,8 +75,8 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
                                     }}
                                 />
                             </div>
-                            <div className={'delete-button'}>
-                                <Button text={'Delete Group'} type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.props.group)} />
+                            <div className="delete-button">
+                                <Button text="Delete Group" type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.group)} />
                             </div>
                         </div>
                     ) : null}
@@ -81,14 +84,14 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
                         Emails {this.memberSort === 'ascending' ? '↑' : this.memberSort === 'descending' ? '↓' : ''} {/* → */}
                     </div>
                 </div>
-                <div className={'style-divider'} style={{ background: StrCast(Doc.UserDoc().userColor) }} />
+                <div className="style-divider" style={{ background: StrCast(Doc.UserDoc().userColor) }} />
                 <div className="editing-contents" style={{ height: hasEditAccess ? '62%' : '85%' }}>
                     {members.map(member => (
                         <div className="editing-row" key={member}>
                             <div className="user-email">{member}</div>
                             {hasEditAccess ? (
-                                <div className={'remove-button'} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}>
-                                    <IconButton icon={<FontAwesomeIcon icon={'trash-alt'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)} />
+                                <div className={'remove-button'} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.group, member)}>
+                                    <IconButton icon={<FontAwesomeIcon icon={'trash-alt'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.group, member)} />
                                 </div>
                             ) : null}
                         </div>
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 07bbde36c..53e4a2853 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -33,17 +33,17 @@ export class SelectionManager {
 
     public static SelectView = action((docView: DocumentView | undefined, extendSelection: boolean): void => {
         if (!docView) this.DeselectAll();
-        else if (!docView.SELECTED) {
+        else if (!docView.IsSelected) {
             if (!extendSelection) this.DeselectAll();
             this.Instance.SelectedViews.push(docView);
-            docView.SELECTED = true;
+            docView.IsSelected = true;
             docView._props.whenChildContentsActiveChanged(true);
         }
     });
 
     public static DeselectView = action((docView?: DocumentView): void => {
         if (docView && this.Instance.SelectedViews.includes(docView)) {
-            docView.SELECTED = false;
+            docView.IsSelected = false;
             this.Instance.SelectedViews.splice(this.Instance.SelectedViews.indexOf(docView), 1);
             docView._props.whenChildContentsActiveChanged(false);
         }
@@ -55,14 +55,14 @@ export class SelectionManager {
         LinkManager.currentLinkAnchor = undefined;
         runInAction(() => (this.Instance.SelectedSchemaDocument = undefined));
         this.Instance.SelectedViews.forEach(dv => {
-            dv.SELECTED = false;
+            dv.IsSelected = false;
             dv._props.whenChildContentsActiveChanged(false);
         });
         this.Instance.SelectedViews.length = 0;
         if (found) this.SelectView(found, false);
     };
 
-    public static IsSelected = (doc?: Doc) => Array.from(doc?.[DocViews] ?? []).some(dv => dv?.SELECTED);
+    public static IsSelected = (doc?: Doc) => Array.from(doc?.[DocViews] ?? []).some(dv => dv?.IsSelected);
     public static get Views() { return this.Instance.SelectedViews; } // prettier-ignore
     public static get SelectedSchemaDoc() { return this.Instance.SelectedSchemaDocument; } // prettier-ignore
     public static get Docs() { return this.Instance.SelectedViews.map(dv => dv.Document).filter(doc => doc?._type_collection !== CollectionViewType.Docking); } // prettier-ignore
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index ac7de9872..fddf735e3 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -94,7 +94,7 @@ export class SharingManager extends React.Component<{}> {
         this.populateUsers();
         runInAction(() => {
             this.targetDocView = target;
-            this.targetDoc = target_doc || target?.props.Document;
+            this.targetDoc = target_doc || target?.Document;
             DictationOverlay.Instance.hasActiveModal = true;
             this.isOpen = this.targetDoc !== undefined;
             this.permissions = SharingPermissions.Augment;
diff --git a/src/client/util/TrackMovements.ts b/src/client/util/TrackMovements.ts
index 0b197cf9a..f9c2d522f 100644
--- a/src/client/util/TrackMovements.ts
+++ b/src/client/util/TrackMovements.ts
@@ -126,12 +126,12 @@ export class TrackMovements {
         }
 
         // init the dispose funcs on the page
-        const docList = DocListCast(CollectionDockingView.Instance?.props.Document.data);
+        const docList = DocListCast(CollectionDockingView.Instance?.Document.data);
         this.updateRecordingFFViewsFromTabs(docList);
 
         // create a reaction to monitor changes in tabs
         this.tabChangeDisposeFunc = reaction(
-            () => CollectionDockingView.Instance?.props.Document.data,
+            () => CollectionDockingView.Instance?.Document.data,
             change => {
                 // TODO: consider changing between dashboards
                 // console.info('change in tabs', change);
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index 235b0dc68..b5bd17572 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -55,7 +55,6 @@ interface ViewBoxBaseProps {
 export function ViewBoxBaseComponent<P extends ViewBoxBaseProps>() {
     class Component extends ObservableReactComponent<React.PropsWithChildren<P>> {
         //TODO This might be pretty inefficient if doc isn't observed, because computed doesn't cache then
-        //@computed get Document(): T { return schemaCtor(this.props.Document); }
         get Document() {
             return this._props.Document;
         }
@@ -127,7 +126,7 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps>()
             const indocs = doc instanceof Doc ? [doc] : doc;
             const docs = indocs.filter(doc => [AclEdit, AclAdmin].includes(effectiveAcl) || GetEffectiveAcl(doc) === AclAdmin);
 
-            // docs.forEach(doc => doc.annotationOn === this.props.Document && Doc.SetInPlace(doc, 'annotationOn', undefined, true));
+            // docs.forEach(doc => doc.annotationOn === this.Document && Doc.SetInPlace(doc, 'annotationOn', undefined, true));
             const targetDataDoc = this.dataDoc;
             const value = DocListCast(targetDataDoc[annotationKey ?? this.annotationKey]);
             const toRemove = value.filter(v => docs.includes(v));
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 3938b81cd..63d2a5e08 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -25,27 +25,10 @@ import { DashFieldView } from './nodes/formattedText/DashFieldView';
 import { PinProps } from './nodes/trails';
 import { faCalendarDays } from '@fortawesome/free-solid-svg-icons';
 
-const cloud: IconProp = 'cloud-upload-alt';
-const fetch: IconProp = 'sync-alt';
-
-enum UtilityButtonState {
-    Default,
-    OpenRight,
-    OpenExternally,
-}
-
 @observer
 export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (DocumentView | undefined)[]; stack?: any }> {
     private _dragRef = React.createRef<HTMLDivElement>();
-    private _pullAnimating = false;
-    private _pushAnimating = false;
-    private _pullColorAnimating = false;
-    @observable public isAnimatingFetch = false;
-    @observable public isAnimatingPulse = false;
-
     @observable public static Instance: DocumentButtonBar;
-    public static hasPushedHack = false;
-    public static hasPulledHack = false;
 
     constructor(props: any) {
         super(props);
@@ -53,51 +36,6 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
         DocumentButtonBar.Instance = this;
     }
 
-    public startPullOutcome = action((success: boolean) => {
-        if (!this._pullAnimating) {
-            this._pullAnimating = true;
-            this.pullIcon = success ? 'check-circle' : 'stop-circle';
-            setTimeout(
-                () =>
-                    runInAction(() => {
-                        this.pullIcon = 'arrow-alt-circle-down';
-                        this._pullAnimating = false;
-                    }),
-                1000
-            );
-        }
-    });
-
-    public startPushOutcome = action((success: boolean) => {
-        this.isAnimatingPulse = false;
-        if (!this._pushAnimating) {
-            this._pushAnimating = true;
-            this.pushIcon = success ? 'check-circle' : 'stop-circle';
-            setTimeout(
-                () =>
-                    runInAction(() => {
-                        this.pushIcon = 'arrow-alt-circle-up';
-                        this._pushAnimating = false;
-                    }),
-                1000
-            );
-        }
-    });
-
-    public setPullState = action((unchanged: boolean) => {
-        this.isAnimatingFetch = false;
-        if (!this._pullColorAnimating) {
-            this._pullColorAnimating = true;
-            this.pullColor = unchanged ? 'lawngreen' : 'red';
-            setTimeout(this.clearPullColor, 1000);
-        }
-    });
-
-    private clearPullColor = action(() => {
-        this.pullColor = 'white';
-        this._pullColorAnimating = false;
-    });
-
     get view0() {
         return this._props.views()?.[0];
     }
@@ -367,7 +305,7 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
         if (this._dragRef.current) {
             const dragDocView = this.view0!;
             const dragData = new DragManager.DocumentDragData([dragDocView.Document]);
-            const [left, top] = dragDocView._props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+            const [left, top] = dragDocView.screenToLocalTransform().inverse().transformPoint(0, 0);
             dragData.defaultDropAction = 'embed';
             dragData.canEmbed = true;
             DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, { hideSource: false });
@@ -385,7 +323,8 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
         return !view0 ? null : (
             <Tooltip title={<div className="dash-tooltip">Tap to Customize Layout. Drag an embedding</div>} open={this._tooltipOpen} onClose={action(() => (this._tooltipOpen = false))} placement="bottom">
                 <div className="documentButtonBar-linkFlyout" ref={this._dragRef} onPointerEnter={action(() => !this._ref.current?.getBoundingClientRect().width && (this._tooltipOpen = true))}>
-                    {/* <Flyout
+                    {
+                        /* <Flyout
                         anchorPoint={anchorPoints.LEFT_TOP}
                         onOpen={action(() => (this._embedDown = true))}
                         onClose={action(() => (this._embedDown = false))}
@@ -400,7 +339,12 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
                         <div className={'documentButtonBar-linkButton-empty'} ref={this._dragRef} onPointerDown={this.onTemplateButton}>
                             <FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />
                         </div>
-                    </Flyout> */}
+                    </Flyout> */
+
+                        <div className={'documentButtonBar-linkButton-empty'} ref={this._dragRef} onPointerDown={this.onTemplateButton}>
+                            <FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />
+                        </div>
+                    }
                 </div>
             </Tooltip>
         );
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index dab6e6193..51fd33222 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -208,7 +208,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
             SelectionManager.Views.map(dv => dv.Document),
             dragDocView._props.dropAction
         );
-        dragData.offset = dragDocView._props.ScreenToLocalTransform().transformDirection(e.x - left, e.y - top);
+        dragData.offset = dragDocView.screenToLocalTransform().transformDirection(e.x - left, e.y - top);
         dragData.moveDocument = dragDocView._props.moveDocument;
         dragData.removeDocument = dragDocView._props.removeDocument;
         dragData.isDocDecorationMove = true;
@@ -353,7 +353,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
     };
 
     setRotateCenter = (seldocview: DocumentView, rotCenter: number[]) => {
-        const newloccentern = seldocview._props.ScreenToLocalTransform().transformPoint(rotCenter[0], rotCenter[1]);
+        const newloccentern = seldocview.screenToLocalTransform().transformPoint(rotCenter[0], rotCenter[1]);
         const newlocenter = [newloccentern[0] - NumCast(seldocview.layoutDoc._width) / 2, newloccentern[1] - NumCast(seldocview.layoutDoc._height) / 2];
         const final = Utils.rotPt(newlocenter[0], newlocenter[1], -(NumCast(seldocview.Document._rotation) / 180) * Math.PI);
         seldocview.Document.rotation_centerX = final.x / NumCast(seldocview.layoutDoc._width);
@@ -462,7 +462,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
             dot = (b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]);
             return [a[0] + atob[0] * t, a[1] + atob[1] * t];
         };
-        const tl = docView._props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+        const tl = docView.screenToLocalTransform().inverse().transformPoint(0, 0);
         return project([e.clientX + this._offset.x, e.clientY + this._offset.y], tl, [tl[0] + fixedAspect, tl[1] + 1]);
     };
     onPointerMove = (e: PointerEvent, down: number[], move: number[]): boolean => {
@@ -530,7 +530,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
             doc.xPadding = NumCast(doc.xPadding) * scale.x;
             doc.yPadding = NumCast(doc.yPadding) * scale.y;
         } else {
-            const refCent = docView._props.ScreenToLocalTransform().transformPoint(refPt[0], refPt[1]); // fixed reference point for resize (ie, a point that doesn't move)
+            const refCent = docView.screenToLocalTransform().transformPoint(refPt[0], refPt[1]); // fixed reference point for resize (ie, a point that doesn't move)
             const [nwidth, nheight] = [docView.nativeWidth, docView.nativeHeight];
             const [initWidth, initHeight] = [NumCast(doc._width, 1), NumCast(doc._height)];
 
@@ -632,7 +632,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
     @computed get rotCenter() {
         const lastView = SelectionManager.Views.lastElement();
         if (lastView) {
-            const invXf = lastView._props.ScreenToLocalTransform().inverse();
+            const invXf = lastView.screenToLocalTransform().inverse();
             const seldoc = lastView.layoutDoc;
             const loccenter = Utils.rotPt(NumCast(seldoc.rotation_centerX) * NumCast(seldoc._width), NumCast(seldoc.rotation_centerY) * NumCast(seldoc._height), invXf.Rotate);
             return invXf.transformPoint(loccenter.x + NumCast(seldoc._width) / 2, loccenter.y + NumCast(seldoc._height) / 2);
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index d3075a5cd..c4f65a5ca 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -1,4 +1,4 @@
-import { action, computed, observable, ObservableMap } from 'mobx';
+import { action, computed, makeObservable, observable, ObservableMap } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Handles, Rail, Slider, Ticks, Tracks } from 'react-compound-slider';
@@ -18,22 +18,28 @@ import { undoable } from '../util/UndoManager';
 import './FilterPanel.scss';
 import { FieldView } from './nodes/FieldView';
 import { Handle, Tick, TooltipRail, Track } from './nodes/SliderBox-components';
+import { ObservableReactComponent } from './ObservableReactComponent';
 
 interface filterProps {
     Document: Doc;
 }
 
 @observer
-export class FilterPanel extends React.Component<filterProps> {
+export class FilterPanel extends ObservableReactComponent<filterProps> {
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(FilterPanel, fieldKey);
     }
 
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     /**
      * @returns the relevant doc according to the value of FilterBox._filterScope i.e. either the Current Dashboard or the Current Collection
      */
-    @computed get targetDoc() {
-        return this.props.Document;
+    get targetDoc() {
+        return this._props.Document;
     }
     @computed get targetDocChildKey() {
         const targetView = DocumentManager.Instance.getFirstDocumentView(this.targetDoc);
@@ -112,7 +118,7 @@ export class FilterPanel extends React.Component<filterProps> {
     // }
 
     gatherFieldValues(childDocs: Doc[], facetKey: string) {
-        const valueSet = new Set<string>(StrListCast(this.props.Document.childFilters).map(filter => filter.split(Doc.FilterSep)[1]));
+        const valueSet = new Set<string>(StrListCast(this.targetDoc.childFilters).map(filter => filter.split(Doc.FilterSep)[1]));
         let rtFields = 0;
         let subDocs = childDocs;
         if (subDocs.length > 0) {
@@ -223,7 +229,7 @@ export class FilterPanel extends React.Component<filterProps> {
     facetValues = (facetHeader: string) => {
         const allCollectionDocs = new Set<Doc>();
         SearchUtil.foreachRecursiveDoc(this.targetDocChildren, (depth: number, doc: Doc) => allCollectionDocs.add(doc));
-        const set = new Set<string>([...StrListCast(this.props.Document.childFilters).map(filter => filter.split(Doc.FilterSep)[1]), Doc.FilterNone, Doc.FilterAny]);
+        const set = new Set<string>([...StrListCast(this.targetDoc.childFilters).map(filter => filter.split(Doc.FilterSep)[1]), Doc.FilterNone, Doc.FilterAny]);
         if (facetHeader === 'tags')
             allCollectionDocs.forEach(child =>
                 StrListCast(child[facetHeader])
diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index a628c7120..f31ea2994 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -244,7 +244,7 @@ export class InkStrokeProperties {
         this.applyFunction(inkView, (view: DocumentView, ink: InkData) => {
             const order = controlIndex % 4;
             const closed = InkingStroke.IsClosed(ink);
-            const brokenIndices = Cast(inkView.props.Document.brokenInkIndices, listSpec('number'), []);
+            const brokenIndices = Cast(inkView.Document.brokenInkIndices, listSpec('number'), []);
             if (origInk && this._currentPoint > 0 && this._currentPoint < ink.length - 1 && brokenIndices.findIndex(value => value === controlIndex) === -1) {
                 const cpt_before = ink[controlIndex];
                 const cpt = { X: cpt_before.X + deltaX, Y: cpt_before.Y + deltaY };
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index f1dadcd5e..5905f8dbc 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -411,7 +411,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         SelectionManager.Views.filter(dv => dv.docView)
             .map(dv => dv.docView!)
             .forEach(docView => {
-                const linkButton = IsFollowLinkScript(docView.props.Document.onClick);
+                const linkButton = IsFollowLinkScript(docView.Document.onClick);
                 docView.noOnClick();
                 switch (onClick) {
                     case 'enterPortal':
@@ -422,11 +422,11 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                         break;
                     case 'linkInPlace':
                         docView.toggleFollowLink(false, false);
-                        docView.props.Document.followLinkLocation = linkButton ? OpenWhere.lightbox : undefined;
+                        docView.Document.followLinkLocation = linkButton ? OpenWhere.lightbox : undefined;
                         break;
                     case 'linkOnRight':
                         docView.toggleFollowLink(false, false);
-                        docView.props.Document.followLinkLocation = linkButton ? OpenWhere.addRight : undefined;
+                        docView.Document.followLinkLocation = linkButton ? OpenWhere.addRight : undefined;
                         break;
                 }
             });
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index c8f6d6013..835e61d55 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -121,7 +121,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
         case StyleProp.Highlighting:
             if (doc && (Doc.IsSystem(doc) || doc.type === DocumentType.FONTICON)) return undefined;            
             if (doc && !doc.layout_disableBrushing && !props?.disableBrushing) {
-                const selected = Array.from(doc?.[DocViews]??[]).filter(dv => dv.SELECTED).length;
+                const selected = Array.from(doc?.[DocViews]??[]).filter(dv => dv.IsSelected).length;
                 const highlightIndex = Doc.GetBrushHighlightStatus(doc) || (selected ? Doc.DocBrushStatus.selfBrushed : 0);
                 const highlightColor = ['transparent', 'rgb(68, 118, 247)', selected ? "black" : 'rgb(68, 118, 247)', 'orange', 'lightBlue'][highlightIndex];
                 const highlightStyle = ['solid', 'dashed', 'solid', 'solid', 'solid'][highlightIndex];
diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
index 791928b4a..b42f3c1e9 100644
--- a/src/client/views/TemplateMenu.tsx
+++ b/src/client/views/TemplateMenu.tsx
@@ -79,14 +79,14 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
     };
     componentDidMount() {
         !this._addedKeys && (this._addedKeys = new ObservableSet());
-        [...Array.from(Object.keys(Doc.GetProto(this.props.docViews[0].props.Document))), ...Array.from(Object.keys(this.props.docViews[0].props.Document))]
+        [...Array.from(Object.keys(Doc.GetProto(this.props.docViews[0].Document))), ...Array.from(Object.keys(this.props.docViews[0].Document))]
             .filter(key => key.startsWith('layout_'))
             .map(key => runInAction(() => this._addedKeys.add(key.replace('layout_', ''))));
     }
 
     return100 = () => 300;
     @computed get scriptField() {
-        const script = ScriptField.MakeScript('docs.map(d => switchView(d, this))', { this: Doc.name }, { docs: this.props.docViews.map(dv => dv.props.Document) as any });
+        const script = ScriptField.MakeScript('docs.map(d => switchView(d, this))', { this: Doc.name }, { docs: this.props.docViews.map(dv => dv.Document) as any });
         return script ? () => script : undefined;
     }
     templateIsUsed = (selDoc: Doc, templateDoc: Doc) => {
@@ -95,7 +95,7 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
     };
     render() {
         TraceMobx();
-        const firstDoc = this.props.docViews[0].props.Document;
+        const firstDoc = this.props.docViews[0].Document;
         const templateName = StrCast(firstDoc.layout_fieldKey, 'layout').replace('layout_', '');
         const noteTypes = DocListCast(Cast(Doc.UserDoc()['template_notes'], Doc, null)?.data);
         const addedTypes = DocListCast(Cast(Doc.UserDoc()['template_clickFuncs'], Doc, null)?.data);
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index a11c53d4d..bf308904e 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -143,10 +143,10 @@ export class CollectionCarousel3DView extends CollectionSubView() {
         const whichButton = this.layoutDoc.showScrollButton;
         return (
             <>
-                <div className={`carousel3DView-back-scroll${whichButton === 'back' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(-1)}>
+                <div className={`carousel3DView-back-scroll${whichButton === 'back' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(-1)}>
                     {this.layoutDoc.autoScrollOn ? <FontAwesomeIcon icon={'pause'} size={'1x'} /> : <FontAwesomeIcon icon={'angle-double-left'} size={'1x'} />}
                 </div>
-                <div className={`carousel3DView-fwd-scroll${whichButton === 'fwd' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(1)}>
+                <div className={`carousel3DView-fwd-scroll${whichButton === 'fwd' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(1)}>
                     {this.layoutDoc.autoScrollOn ? <FontAwesomeIcon icon={'pause'} size={'1x'} /> : <FontAwesomeIcon icon={'angle-double-right'} size={'1x'} />}
                 </div>
             </>
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 5d09f14ef..b6acf3153 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -120,7 +120,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                     color: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color),
                 }}>
                 {this.content}
-                {this.props.Document._chromeHidden ? null : this.buttons}
+                {this.Document._chromeHidden ? null : this.buttons}
             </div>
         );
     }
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 868df7a3b..c46f54c70 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -493,7 +493,7 @@ export class CollectionDockingView extends CollectionSubView() {
             Doc.RemoveDocFromList(Doc.GetProto(tab.DashDoc), 'proto_embeddings', tab.DashDoc);
         }
         if (CollectionDockingView.Instance) {
-            const dview = CollectionDockingView.Instance.props.Document;
+            const dview = CollectionDockingView.Instance.Document;
             const fieldKey = CollectionDockingView.Instance.props.fieldKey;
             Doc.RemoveDocFromList(dview, fieldKey, tab.DashDoc);
             this.tabMap.delete(tab);
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 2a6cb081f..98ae01591 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -446,7 +446,7 @@ export class CollectionNoteTakingViewChrome extends React.Component<CollectionVi
     @observable private suggestions: string[] = [];
 
     get document() {
-        return this.props.docView.props.Document;
+        return this.props.docView.Document;
     }
 
     @computed private get descending() {
@@ -572,7 +572,7 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu
     @observable private resize = false;
     private resizeListenerDisposer: Opt<Lambda>;
     get document() {
-        return this.props.docView.props.Document;
+        return this.props.docView.Document;
     }
 
     @computed get panelWidth() {
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index f9d258490..0744814dd 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -527,7 +527,7 @@ export class CollectionNoteTakingView extends CollectionSubView() {
                 addDocument={this.addDocument}
                 chromeHidden={this.chromeHidden}
                 colHeaderData={this.colHeaderData}
-                Document={this.props.Document}
+                Document={this.Document}
                 TemplateDataDocument={this.props.TemplateDataDocument}
                 resizeColumns={this.resizeColumns}
                 renderChildren={this.children}
diff --git a/src/client/views/collections/CollectionPileView.tsx b/src/client/views/collections/CollectionPileView.tsx
index e5068645f..359fdf543 100644
--- a/src/client/views/collections/CollectionPileView.tsx
+++ b/src/client/views/collections/CollectionPileView.tsx
@@ -94,7 +94,7 @@ export class CollectionPileView extends CollectionSubView() {
             DocUtils.pileup(this.childDocs, undefined, undefined, NumCast(this.layoutDoc._width) / 2, false);
             this.layoutDoc._freeform_panX = 0;
             this.layoutDoc._freeform_panY = -10;
-            this.props.Document._freeform_pileEngine = computePassLayout.name;
+            this.Document._freeform_pileEngine = computePassLayout.name;
         } else {
             const defaultSize = NumCast(this.Document._starburstDiameter, 400);
             this.Document.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width) / 2 - defaultSize / 2;
@@ -104,7 +104,7 @@ export class CollectionPileView extends CollectionSubView() {
             this.layoutDoc._freeform_panX = this.layoutDoc._freeform_panY = 0;
             this.layoutDoc._width = this.layoutDoc._height = defaultSize;
             this.layoutDoc.background;
-            this.props.Document._freeform_pileEngine = computeStarburstLayout.name;
+            this.Document._freeform_pileEngine = computeStarburstLayout.name;
         }
     });
 
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index fa3844aa4..a63688354 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -843,7 +843,7 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch
         return (
             <div style={{ pointerEvents: this.noEvents ? 'none' : undefined }}>
                 {inner.view}
-                {!inner.anchor.view || !inner.anchor.view.SELECTED ? null : (
+                {!inner.anchor.view || !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/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 72882ac17..f2ceaa681 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -169,7 +169,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> {
         return this.childDocList(this.fieldKey + '_annotations');
     }
     @computed get selected() {
-        return this._docRef?.SELECTED;
+        return this._docRef?.IsSelected;
     }
 
     childDocList(field: string) {
@@ -204,10 +204,10 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> {
         this._disposers.selection?.();
         if (!docView) {
             this._editTitle = false;
-        } else if (docView.SELECTED) {
+        } else if (docView.IsSelected) {
             this._editTitle = true;
             this._disposers.selection = reaction(
-                () => docView.SELECTED,
+                () => docView.IsSelected,
                 isSel => !isSel && this.setEditTitle(undefined)
             );
         } else {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 6337c8d34..6131fe037 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -229,8 +229,8 @@ export class CollectionFreeFormLinkView extends ObservableReactComponent<Collect
         const pt2normlen = Math.sqrt(pt2norm[0] * pt2norm[0] + pt2norm[1] * pt2norm[1]) || 1;
         const pt1normalized = [pt1norm[0] / pt1normlen, pt1norm[1] / pt1normlen];
         const pt2normalized = [pt2norm[0] / pt2normlen, pt2norm[1] / pt2normlen];
-        const aActive = A.SELECTED || A.Document[Brushed];
-        const bActive = B.SELECTED || B.Document[Brushed];
+        const aActive = A.IsSelected || A.Document[Brushed];
+        const bActive = B.IsSelected || B.Document[Brushed];
 
         const textX = (Math.min(pt1[0], pt2[0]) + Math.max(pt1[0], pt2[0])) / 2 + NumCast(LinkDocs[0].link_relationship_OffsetX);
         const textY = (pt1[1] + pt2[1]) / 2 + NumCast(LinkDocs[0].link_relationship_OffsetY);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index cc0833698..44654c8fe 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -912,7 +912,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 for (var j = 0; j < otherCtrlPts.length - 3; j += 4) {
                     const neighboringSegment = i === j || i === j - 4 || i === j + 4;
                     // Ensuring that the curve intersected by the eraser is not checked for further ink intersections.
-                    if (ink?.Document === otherInk.props.Document && neighboringSegment) continue;
+                    if (ink?.Document === otherInk.Document && neighboringSegment) continue;
 
                     const otherCurve = new Bezier(otherCtrlPts.slice(j, j + 4).map(p => ({ x: p.X, y: p.Y })));
                     const c0 = otherCurve.get(0);
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 3e75257e5..0f750c4f8 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -33,35 +33,35 @@ export class CollectionGridView extends CollectionSubView() {
     onChildClickHandler = () => ScriptCast(this.Document.onChildClick);
 
     @computed get numCols() {
-        return NumCast(this.props.Document.gridNumCols, 10);
+        return NumCast(this.Document.gridNumCols, 10);
     }
     @computed get rowHeight() {
-        return this._rowHeight === undefined ? NumCast(this.props.Document.gridRowHeight, 100) : this._rowHeight;
+        return this._rowHeight === undefined ? NumCast(this.Document.gridRowHeight, 100) : this._rowHeight;
     }
     // sets the default width and height of the grid nodes
     @computed get defaultW() {
-        return NumCast(this.props.Document.gridDefaultW, 2);
+        return NumCast(this.Document.gridDefaultW, 2);
     }
     @computed get defaultH() {
-        return NumCast(this.props.Document.gridDefaultH, 2);
+        return NumCast(this.Document.gridDefaultH, 2);
     }
 
     @computed get colWidthPlusGap() {
-        return (this.props.PanelWidth() - this.margin) / this.numCols;
+        return (this._props.PanelWidth() - this.margin) / this.numCols;
     }
     @computed get rowHeightPlusGap() {
         return this.rowHeight + this.margin;
     }
 
     @computed get margin() {
-        return NumCast(this.props.Document.margin, 10);
+        return NumCast(this.Document.margin, 10);
     } // sets the margin between grid nodes
 
     @computed get flexGrid() {
-        return BoolCast(this.props.Document.gridFlex, true);
+        return BoolCast(this.Document.gridFlex, true);
     } // is grid static/flexible i.e. whether nodes be moved around and resized
     @computed get compaction() {
-        return StrCast(this.props.Document.gridStartCompaction, StrCast(this.props.Document.gridCompaction, 'vertical'));
+        return StrCast(this.Document.gridStartCompaction, StrCast(this.Document.gridCompaction, 'vertical'));
     } // is grid static/flexible i.e. whether nodes be moved around and resized
 
     /**
@@ -94,12 +94,12 @@ export class CollectionGridView extends CollectionSubView() {
 
         // updates the layouts if the reset button has been clicked
         this._resetListenerDisposer = reaction(
-            () => this.props.Document.gridResetLayout,
+            () => this.Document.gridResetLayout,
             reset => {
                 if (reset && this.flexGrid) {
                     this.setLayout(this.childLayoutPairs.map((pair, index) => this.makeLayoutItem(pair.layout, this.unflexedPosition(index))));
                 }
-                this.props.Document.gridResetLayout = false;
+                this.Document.gridResetLayout = false;
             }
         );
     }
@@ -130,7 +130,7 @@ export class CollectionGridView extends CollectionSubView() {
      * Maps the x- and y- coordinates of the event to a grid cell.
      */
     screenToCell(sx: number, sy: number) {
-        const pt = this.props.ScreenToLocalTransform().transformPoint(sx, sy);
+        const pt = this._props.ScreenToLocalTransform().transformPoint(sx, sy);
         const x = Math.floor(pt[0] / this.colWidthPlusGap);
         const y = Math.floor((pt[1] + this._scroll) / this.rowHeight);
         return { x, y };
@@ -159,25 +159,25 @@ export class CollectionGridView extends CollectionSubView() {
         const xypos = this.flexGrid ? layout : this.unflexedPosition(this.renderedLayoutList.findIndex(l => l.i === layout.i));
         const pos = { x: xypos.x * this.colWidthPlusGap + this.margin, y: xypos.y * this.rowHeightPlusGap + this.margin - this._scroll };
 
-        return this.props.ScreenToLocalTransform().translate(-pos.x, -pos.y);
+        return this._props.ScreenToLocalTransform().translate(-pos.x, -pos.y);
     };
 
     /**
      * @returns the layout list converted from JSON
      */
     get savedLayoutList() {
-        return (this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : []) as Layout[];
+        return (this.Document.gridLayoutString ? JSON.parse(StrCast(this.Document.gridLayoutString)) : []) as Layout[];
     }
 
     /**
      * Stores the layout list on the Document as JSON
      */
     setLayoutList(layouts: Layout[]) {
-        this.props.Document.gridLayoutString = JSON.stringify(layouts);
+        this.Document.gridLayoutString = JSON.stringify(layouts);
     }
 
-    isContentActive = () => this.props.isSelected() || this.props.isContentActive();
-    isChildContentActive = () => (this.props.isDocumentActive?.() && (this.props.childDocumentsActive?.() || BoolCast(this.Document.childDocumentsActive)) ? true : undefined);
+    isContentActive = () => this._props.isSelected() || this._props.isContentActive();
+    isChildContentActive = () => (this._props.isDocumentActive?.() && (this._props.childDocumentsActive?.() || BoolCast(this.Document.childDocumentsActive)) ? true : undefined);
     /**
      *
      * @param layout
@@ -199,9 +199,9 @@ export class CollectionGridView extends CollectionSubView() {
                 PanelWidth={width}
                 PanelHeight={height}
                 ScreenToLocalTransform={dxf}
-                whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged}
+                whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
                 onClick={this.onChildClickHandler}
-                renderDepth={this.props.renderDepth + 1}
+                renderDepth={this._props.renderDepth + 1}
                 dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as any} // 'y', 'x', 'xy'
             />
         );
@@ -222,12 +222,12 @@ export class CollectionGridView extends CollectionSubView() {
                 if (gridLayout) Object.assign(gridLayout, layoutArray.find(layout => layout.i === doc[Id]) || gridLayout);
             });
 
-            if (this.props.Document.gridStartCompaction) {
+            if (this.Document.gridStartCompaction) {
                 undoBatch(() => {
-                    this.props.Document.gridCompaction = this.props.Document.gridStartCompaction;
+                    this.Document.gridCompaction = this.Document.gridStartCompaction;
                     this.setLayoutList(savedLayouts);
                 })();
-                this.props.Document.gridStartCompaction = undefined;
+                this.Document.gridStartCompaction = undefined;
             } else {
                 undoBatch(() => this.setLayoutList(savedLayouts))();
             }
@@ -249,7 +249,7 @@ export class CollectionGridView extends CollectionSubView() {
                 const height = () => (this.flexGrid ? l.h : this.defaultH) * this.rowHeightPlusGap - this.margin;
                 child &&
                     collector.push(
-                        <div key={child.layout[Id]} className={'document-wrapper' + (this.flexGrid && this.props.isSelected() ? '' : ' static')}>
+                        <div key={child.layout[Id]} className={'document-wrapper' + (this.flexGrid && this._props.isSelected() ? '' : ' static')}>
                             {this.getDisplayDoc(child.layout, dxf, width, height)}
                         </div>
                     );
@@ -317,7 +317,7 @@ export class CollectionGridView extends CollectionSubView() {
             e,
             returnFalse,
             action(() => {
-                undoBatch(() => (this.props.Document.gridRowHeight = this._rowHeight))();
+                undoBatch(() => (this.Document.gridRowHeight = this._rowHeight))();
                 this._rowHeight = undefined;
             }),
             emptyFunction,
@@ -331,8 +331,8 @@ export class CollectionGridView extends CollectionSubView() {
      */
     onContextMenu = () => {
         const displayOptionsMenu: ContextMenuProps[] = [];
-        displayOptionsMenu.push({ description: 'Toggle Content Display Style', event: () => (this.props.Document.display = this.props.Document.display ? undefined : 'contents'), icon: 'copy' });
-        displayOptionsMenu.push({ description: 'Toggle Vertical Centering', event: () => (this.props.Document.centerY = !this.props.Document.centerY), icon: 'copy' });
+        displayOptionsMenu.push({ description: 'Toggle Content Display Style', event: () => (this.Document.display = this.Document.display ? undefined : 'contents'), icon: 'copy' });
+        displayOptionsMenu.push({ description: 'Toggle Vertical Centering', event: () => (this.Document.centerY = !this.Document.centerY), icon: 'copy' });
         ContextMenu.Instance.addItem({ description: 'Display', subitems: displayOptionsMenu, icon: 'tv' });
     };
 
@@ -340,7 +340,7 @@ export class CollectionGridView extends CollectionSubView() {
      * Handles text document creation on double click.
      */
     onPointerDown = (e: React.PointerEvent) => {
-        if (this.props.isContentActive(true)) {
+        if (this._props.isContentActive(true)) {
             setupMoveUpEvents(
                 this,
                 e,
@@ -352,7 +352,7 @@ export class CollectionGridView extends CollectionSubView() {
                             action(() => {
                                 const text = Docs.Create.TextDocument('', { _width: 150, _height: 50 });
                                 FormattedTextBox.SetSelectOnLoad(text); // track the new text box so we can give it a prop that tells it to focus itself when it's displayed
-                                Doc.AddDocToList(this.props.Document, this.props.fieldKey, text);
+                                Doc.AddDocToList(this.Document, this._props.fieldKey, text);
                                 this.setLayoutList(this.addLayoutItem(this.savedLayoutList, this.makeLayoutItem(text, this.screenToCell(e.clientX, e.clientY))));
                             })
                         )();
@@ -360,7 +360,7 @@ export class CollectionGridView extends CollectionSubView() {
                 },
                 false
             );
-            if (this.props.isSelected()) e.stopPropagation();
+            if (this._props.isSelected()) e.stopPropagation();
         }
     };
 
@@ -369,7 +369,7 @@ export class CollectionGridView extends CollectionSubView() {
             <div
                 className="collectionGridView-contents"
                 ref={this.createDashEventsTarget}
-                style={{ pointerEvents: !this.props.isContentActive() ? 'none' : undefined }}
+                style={{ pointerEvents: !this._props.isContentActive() ? 'none' : undefined }}
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}
                 onDrop={this.onExternalDrop}>
@@ -379,29 +379,29 @@ export class CollectionGridView extends CollectionSubView() {
                     style={{ backgroundColor: StrCast(this.layoutDoc._backgroundColor, 'white') }}
                     onWheel={e => e.stopPropagation()}
                     onScroll={action(e => {
-                        if (!this.props.isSelected()) e.currentTarget.scrollTop = this._scroll;
+                        if (!this._props.isSelected()) e.currentTarget.scrollTop = this._scroll;
                         else this._scroll = e.currentTarget.scrollTop;
                     })}>
                     <Grid
-                        width={this.props.PanelWidth()}
+                        width={this._props.PanelWidth()}
                         nodeList={this.contents.length ? this.contents : null}
                         layout={this.contents.length ? this.renderedLayoutList : undefined}
-                        childrenDraggable={this.props.isSelected() ? true : false}
+                        childrenDraggable={this._props.isSelected() ? true : false}
                         numCols={this.numCols}
                         rowHeight={this.rowHeight}
                         setLayout={this.setLayout}
-                        transformScale={this.props.ScreenToLocalTransform().Scale}
+                        transformScale={this._props.ScreenToLocalTransform().Scale}
                         compactType={this.compaction} // determines whether nodes should remain in position, be bound to the top, or to the left
-                        preventCollision={BoolCast(this.props.Document.gridPreventCollision)} // determines whether nodes should move out of the way (i.e. collide) when other nodes are dragged over them
+                        preventCollision={BoolCast(this.Document.gridPreventCollision)} // determines whether nodes should move out of the way (i.e. collide) when other nodes are dragged over them
                         margin={this.margin}
                     />
                     <input
                         className="rowHeightSlider"
                         type="range"
-                        style={{ width: this.props.PanelHeight() - 30 }}
+                        style={{ width: this._props.PanelHeight() - 30 }}
                         min={1}
                         value={this.rowHeight}
-                        max={this.props.PanelHeight() - 30}
+                        max={this._props.PanelHeight() - 30}
                         onPointerDown={this.onSliderDown}
                         onChange={this.onSliderChange}
                     />
diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
index ea99bff2e..c38c6dc4e 100644
--- a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
@@ -18,12 +18,8 @@ interface ResizerProps {
     select: (isCtrlPressed: boolean) => void;
 }
 
-const resizerOpacity = 1;
-
 @observer
 export default class ResizeBar extends React.Component<ResizerProps> {
-    @observable private isHoverActive = false;
-    @observable private isResizingActive = false;
     private _resizeUndo?: UndoManager.Batch;
 
     @action
@@ -35,7 +31,6 @@ export default class ResizeBar extends React.Component<ResizerProps> {
         window.removeEventListener('pointerup', this.onPointerUp);
         window.addEventListener('pointermove', this.onPointerMove);
         window.addEventListener('pointerup', this.onPointerUp);
-        this.isResizingActive = true;
         this._resizeUndo = UndoManager.StartBatch('multcol resizing');
     };
 
@@ -80,8 +75,6 @@ export default class ResizeBar extends React.Component<ResizerProps> {
 
     @action
     private onPointerUp = () => {
-        this.isResizingActive = false;
-        this.isHoverActive = false;
         window.removeEventListener('pointermove', this.onPointerMove);
         window.removeEventListener('pointerup', this.onPointerUp);
         this._resizeUndo?.end();
@@ -96,9 +89,7 @@ export default class ResizeBar extends React.Component<ResizerProps> {
                     pointerEvents: this.props.isContentActive?.() ? 'all' : 'none',
                     width: this.props.width,
                     backgroundColor: !this.props.isContentActive?.() ? '' : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor),
-                }}
-                onPointerEnter={action(() => (this.isHoverActive = true))}
-                onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}>
+                }}>
                 <div className={'multiColumnResizer-hdl'} onPointerDown={e => this.registerResizing(e)} />
             </div>
         );
diff --git a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
index 7dee65e58..6f1b3b425 100644
--- a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
@@ -17,12 +17,8 @@ interface ResizerProps {
     toBottom?: Doc;
 }
 
-const resizerOpacity = 1;
-
 @observer
 export default class ResizeBar extends React.Component<ResizerProps> {
-    @observable private isHoverActive = false;
-    @observable private isResizingActive = false;
     private _resizeUndo?: UndoManager.Batch;
 
     @action
@@ -33,7 +29,6 @@ export default class ResizeBar extends React.Component<ResizerProps> {
         window.removeEventListener('pointerup', this.onPointerUp);
         window.addEventListener('pointermove', this.onPointerMove);
         window.addEventListener('pointerup', this.onPointerUp);
-        this.isResizingActive = true;
         this._resizeUndo = UndoManager.StartBatch('multcol resizing');
     };
 
@@ -78,8 +73,6 @@ export default class ResizeBar extends React.Component<ResizerProps> {
 
     @action
     private onPointerUp = () => {
-        this.isResizingActive = false;
-        this.isHoverActive = false;
         window.removeEventListener('pointermove', this.onPointerMove);
         window.removeEventListener('pointerup', this.onPointerUp);
         this._resizeUndo?.end();
@@ -94,9 +87,7 @@ export default class ResizeBar extends React.Component<ResizerProps> {
                     pointerEvents: this.props.isContentActive?.() ? 'all' : 'none',
                     height: this.props.height,
                     backgroundColor: !this.props.isContentActive?.() ? '' : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor),
-                }}
-                onPointerEnter={action(() => (this.isHoverActive = true))}
-                onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}>
+                }}>
                 <div className={'multiRowResizer-hdl'} onPointerDown={e => this.registerResizing(e)} />
             </div>
         );
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index a69f083d1..50a8bf83d 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -358,7 +358,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
         const selectedPt = this._currSelected ? `{ ${this._props.axes[0]}: ${this._currSelected.x} ${this._props.axes[1]}: ${this._currSelected.y} }` : 'none';
         if (this._lineChartData.length > 0 || !this.parentViz || this.parentViz.length == 0) {
             return this._props.axes.length >= 2 && /\d/.test(this._props.records[0][this._props.axes[0]]) && /\d/.test(this._props.records[0][this._props.axes[1]]) ? (
-                <div className="chart-container" style={{ width: this.props.width + this.props.margin.right }}>
+                <div className="chart-container" style={{ width: this._props.width + this._props.margin.right }}>
                     <div className="graph-title">
                         <EditableText
                             val={StrCast(this._props.layoutDoc[titleAccessor])}
@@ -378,8 +378,8 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
                             <Button
                                 onClick={e => {
                                     console.log('test plzz');
-                                    this.props.vizBox.sidebarBtnDown;
-                                    this.props.vizBox.sidebarAddDocument;
+                                    this._props.vizBox.sidebarBtnDown;
+                                    this._props.vizBox.sidebarAddDocument;
                                 }}></Button>
                         </div>
                     ) : null}
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index f127fecf3..5365fe1b2 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -169,7 +169,7 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
             return (
                 <div
                     className="tableBox"
-                    style={{ width: this.props.width + this.props.margin.right }}
+                    style={{ width: this._props.width + this._props.margin.right }}
                     tabIndex={0}
                     onKeyDown={e => {
                         if (this._props.layoutDoc && e.key === 'a' && (e.ctrlKey || e.metaKey)) {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index f8f4b94a2..d07824099 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -881,7 +881,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     }
     rootSelected = () => this._rootSelected;
     panelHeight = () => this._props.PanelHeight() - this.headerMargin;
-    screenToLocal = () => this._props.ScreenToLocalTransform().translate(0, -this.headerMargin);
+    contentScreenToLocal = () => this._props.ScreenToLocalTransform().translate(0, -this.headerMargin);
     onClickFunc: any = () => (this.disableClickScriptFunc ? undefined : this.onClickHandler);
     setHeight = (height: number) => !this._props.suppressSetHeight && (this.layoutDoc._height = height);
     setContentView = action((view: { getAnchor?: (addAsAnnotation: boolean) => Doc; forward?: () => boolean; back?: () => boolean }) => (this._componentView = view));
@@ -925,7 +925,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                     PanelHeight={this.panelHeight}
                     setHeight={this.setHeight}
                     isContentActive={this.isContentActive}
-                    ScreenToLocalTransform={this.screenToLocal}
+                    ScreenToLocalTransform={this.contentScreenToLocal}
                     rootSelected={this.rootSelected}
                     onClick={this.onClickFunc}
                     setTitleFocus={this.setTitleFocus}
@@ -1329,10 +1329,10 @@ export class DocumentView extends ObservableReactComponent<DocumentViewProps> {
     }
 
     @observable _selected = false;
-    public get SELECTED() {
+    public get IsSelected() {
         return this._selected;
     }
-    public set SELECTED(val) {
+    public set IsSelected(val) {
         runInAction(() => (this._selected = val));
     }
     @observable public static LongPress = false;
@@ -1431,9 +1431,9 @@ export class DocumentView extends ObservableReactComponent<DocumentViewProps> {
         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;
     }
     @computed get hideLinkButton() {
-        return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.HideLinkBtn + (this.SELECTED ? ':selected' : ''));
+        return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.HideLinkBtn + (this.IsSelected ? ':selected' : ''));
     }
-    hideLinkCount = () => this._props.renderDepth === -1 || (this.SELECTED && this._props.renderDepth) || !this._isHovering || this.hideLinkButton;
+    hideLinkCount = () => this._props.renderDepth === -1 || (this.IsSelected && this._props.renderDepth) || !this._isHovering || this.hideLinkButton;
     @computed get linkCountView() {
         return <DocumentLinksButton hideCount={this.hideLinkCount} View={this} scaling={this.scaleToScreenSpace} OnHover={true} Bottom={this.topMost} ShowCount={true} />;
     }
@@ -1568,9 +1568,9 @@ export class DocumentView extends ObservableReactComponent<DocumentViewProps> {
     layout_fitWidthFunc = (doc: Doc) => BoolCast(this.layout_fitWidth);
     scaleToScreenSpace = () => (1 / (this._props.NativeDimScaling?.() || 1)) * this.screenToLocalTransform().Scale;
     docViewPathFunc = () => this.docViewPath;
-    isSelected = () => this.SELECTED;
+    isSelected = () => this.IsSelected;
     select = (extendSelection: boolean, focusSelection?: boolean) => {
-        if (this.SELECTED && SelectionManager.Views.length > 1) SelectionManager.DeselectView(this);
+        if (this.IsSelected && SelectionManager.Views.length > 1) SelectionManager.DeselectView(this);
         else {
             SelectionManager.SelectView(this, extendSelection);
             if (focusSelection) {
diff --git a/src/client/views/nodes/MapBox/MapBox2.tsx b/src/client/views/nodes/MapBox/MapBox2.tsx
index 1dbbbb633..722a347f1 100644
--- a/src/client/views/nodes/MapBox/MapBox2.tsx
+++ b/src/client/views/nodes/MapBox/MapBox2.tsx
@@ -127,7 +127,7 @@
 //     private _ref: React.RefObject<HTMLDivElement> = React.createRef();
 
 //     componentDidMount() {
-//         this.props.setContentView?.(this);
+//         this._props.setContentView?.(this);
 //     }
 
 //     @action
@@ -358,9 +358,9 @@
 //             e,
 //             (e, down, delta) =>
 //                 runInAction(() => {
-//                     const localDelta = this.props
+//                     const localDelta = this._props
 //                         .ScreenToLocalTransform()
-//                         .scale(this.props.NativeDimScaling?.() || 1)
+//                         .scale(this._props.NativeDimScaling?.() || 1)
 //                         .transformDirection(delta[0], delta[1]);
 //                     const fullWidth = NumCast(this.layoutDoc._width);
 //                     const mapWidth = fullWidth - this.sidebarWidth();
@@ -380,12 +380,12 @@
 //         );
 //     };
 
-//     sidebarWidth = () => (Number(this.layout_sidebarWidthPercent.substring(0, this.layout_sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth();
+//     sidebarWidth = () => (Number(this.layout_sidebarWidthPercent.substring(0, this.layout_sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth();
 //     @computed get layout_sidebarWidthPercent() {
 //         return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%');
 //     }
 //     @computed get sidebarColor() {
-//         return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.props.fieldKey + '_backgroundColor'], '#e4e4e4'));
+//         return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this._props.fieldKey + '_backgroundColor'], '#e4e4e4'));
 //     }
 
 //     /**
@@ -444,7 +444,7 @@
 //                 key="sidebar"
 //                 title="Toggle Sidebar"
 //                 style={{
-//                     display: !this.props.isContentActive() ? 'none' : undefined,
+//                     display: !this._props.isContentActive() ? 'none' : undefined,
 //                     top: StrCast(this.layoutDoc._layout_showTitle) === 'title' ? 20 : 5,
 //                     backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
 //                 }}
@@ -481,7 +481,7 @@
 //     };
 
 //     pointerEvents = () => {
-//         return this.props.isContentActive() === false ? 'none' : this.props.isContentActive() && this.props.pointerEvents?.() !== 'none' && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : SnappingManager.IsDragging ? undefined : 'none';
+//         return this._props.isContentActive() === false ? 'none' : this._props.isContentActive() && this._props.pointerEvents?.() !== 'none' && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : SnappingManager.IsDragging ? undefined : 'none';
 //     };
 //     @computed get annotationLayer() {
 //         return (
@@ -489,7 +489,7 @@
 //                 {this.inlineTextAnnotations
 //                     .sort((a, b) => NumCast(a.y) - NumCast(b.y))
 //                     .map(anno => (
-//                         <Annotation key={`${anno[Id]}-annotation`} {...this.props} fieldKey={this.annotationKey} pointerEvents={this.pointerEvents} showInfo={this.showInfo} dataDoc={this.dataDoc} anno={anno} />
+//                         <Annotation key={`${anno[Id]}-annotation`} {...this._props} fieldKey={this.annotationKey} pointerEvents={this.pointerEvents} showInfo={this.showInfo} dataDoc={this.dataDoc} anno={anno} />
 //                     ))}
 //             </div>
 //         );
@@ -515,13 +515,13 @@
 //         // }
 //     };
 
-//     panelWidth = () => this.props.PanelWidth() / (this.props.NativeDimScaling?.() || 1) - this.sidebarWidth();
-//     panelHeight = () => this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1);
-//     scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop));
-//     transparentFilter = () => [...this.props.childFilters(), Utils.TransparentBackgroundFilter];
-//     opaqueFilter = () => [...this.props.childFilters(), Utils.OpaqueBackgroundFilter];
-//     infoWidth = () => this.props.PanelWidth() / 5;
-//     infoHeight = () => this.props.PanelHeight() / 5;
+//     panelWidth = () => this._props.PanelWidth() / (this._props.NativeDimScaling?.() || 1) - this.sidebarWidth();
+//     panelHeight = () => this._props.PanelHeight() / (this._props.NativeDimScaling?.() || 1);
+//     scrollXf = () => this._props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop));
+//     transparentFilter = () => [...this._props.childFilters(), Utils.TransparentBackgroundFilter];
+//     opaqueFilter = () => [...this._props.childFilters(), Utils.OpaqueBackgroundFilter];
+//     infoWidth = () => this._props.PanelWidth() / 5;
+//     infoHeight = () => this._props.PanelHeight() / 5;
 //     anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick;
 //     savedAnnotations = () => this._savedAnnotations;
 
@@ -556,7 +556,7 @@
 //                                 .map(marker => (
 //                                     <MapBoxInfoWindow
 //                                         key={marker[Id]}
-//                                         {...this.props}
+//                                         {...this._props}
 //                                         setContentView={emptyFunction}
 //                                         place={marker}
 //                                         markerMap={this.markerMap}
@@ -575,7 +575,7 @@
 //                 <div className="MapBox2-sidebar" style={{ width: `${this.layout_sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
 //                     <SidebarAnnos
 //                         ref={this._sidebarRef}
-//                         {...this.props}
+//                         {...this._props}
 //                         fieldKey={this.fieldKey}
 //                         Document={this.Document}
 //                         layoutDoc={this.layoutDoc}
diff --git a/src/client/views/nodes/MapBox/MapPushpinBox.tsx b/src/client/views/nodes/MapBox/MapPushpinBox.tsx
index 8760c8600..34e237007 100644
--- a/src/client/views/nodes/MapBox/MapPushpinBox.tsx
+++ b/src/client/views/nodes/MapBox/MapPushpinBox.tsx
@@ -18,10 +18,10 @@ export class MapPushpinBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
 
     get mapBoxView() {
-        return this.props.DocumentView?.()?._props.docViewPath().lastElement()?.ComponentView as MapBox;
+        return this._props.DocumentView?.()?._props.docViewPath().lastElement()?.ComponentView as MapBox;
     }
     get mapBox() {
-        return this.props.DocumentView?.()._props.docViewPath().lastElement()?.Document;
+        return this._props.DocumentView?.()._props.docViewPath().lastElement()?.Document;
     }
 
     render() {
diff --git a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx
index 70037f29c..2c31bbab7 100644
--- a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx
+++ b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx
@@ -89,7 +89,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<ViewBoxAnnotata
         return StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%');
     }
     @computed get sidebarColor() {
-        return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this.props.fieldKey + '_backgroundColor'], '#e4e4e4'));
+        return StrCast(this.layoutDoc.sidebar_color, StrCast(this.layoutDoc[this._props.fieldKey + '_backgroundColor'], '#e4e4e4'));
     }
     @computed get SidebarKey() {
         return this.fieldKey + '_sidebar';
@@ -97,7 +97,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<ViewBoxAnnotata
 
     componentDidMount() {
         this._unmounting = false;
-        this.props.setContentView?.(this);
+        this._props.setContentView?.(this);
     }
 
     _unmounting = false;
@@ -162,9 +162,9 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<ViewBoxAnnotata
             e,
             (e, down, delta) =>
                 runInAction(() => {
-                    const localDelta = this.props
+                    const localDelta = this._props
                         .ScreenToLocalTransform()
-                        .scale(this.props.NativeDimScaling?.() || 1)
+                        .scale(this._props.NativeDimScaling?.() || 1)
                         .transformDirection(delta[0], delta[1]);
                     const fullWidth = NumCast(this.layoutDoc._width);
                     const mapWidth = fullWidth - this.sidebarWidth();
@@ -183,7 +183,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<ViewBoxAnnotata
             () => UndoManager.RunInBatch(this.toggleSidebar, 'toggle sidebar map')
         );
     };
-    sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this.props.PanelWidth();
+    sidebarWidth = () => (Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100) * this._props.PanelWidth();
 
     /**
      * Handles toggle of sidebar on click the little comment button
@@ -195,7 +195,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<ViewBoxAnnotata
                 key="sidebar"
                 title="Toggle Sidebar"
                 style={{
-                    display: !this.props.isContentActive() ? 'none' : undefined,
+                    display: !this._props.isContentActive() ? 'none' : undefined,
                     top: StrCast(this.Document._layout_showTitle) === 'title' ? 20 : 5,
                     backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
                 }}
@@ -232,12 +232,12 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<ViewBoxAnnotata
             FormattedTextBox.SetSelectOnLoad(target);
             return target;
         };
-        const docView = this.props.DocumentView?.();
+        const docView = this._props.DocumentView?.();
         docView &&
             DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(docView, sourceAnchorCreator, targetCreator), e.pageX, e.pageY, {
                 dragComplete: e => {
                     if (!e.aborted && e.annoDragData && e.annoDragData.linkSourceDoc && e.annoDragData.dropDocument && e.linkDocument) {
-                        e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this.props.Document;
+                        e.annoDragData.linkSourceDoc.followLinkToggle = e.annoDragData.dropDocument.annotationOn === this._props.Document;
                         e.annoDragData.linkSourceDoc.followLinkZoom = false;
                     }
                 },
@@ -276,15 +276,15 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<ViewBoxAnnotata
 
     addDocumentWrapper = (doc: Doc | Doc[], annotationKey?: string) => this.addDocument(doc, annotationKey);
 
-    pointerEvents = () => (this.props.isContentActive() && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : 'none');
+    pointerEvents = () => (this._props.isContentActive() && !MarqueeOptionsMenu.Instance.isShown() ? 'all' : 'none');
 
-    panelWidth = () => this.props.PanelWidth() / (this.props.NativeDimScaling?.() || 1) - this.sidebarWidth();
-    panelHeight = () => this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1);
-    scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop));
-    transparentFilter = () => [...this.props.childFilters(), Utils.TransparentBackgroundFilter];
-    opaqueFilter = () => [...this.props.childFilters(), Utils.OpaqueBackgroundFilter];
-    infoWidth = () => this.props.PanelWidth() / 5;
-    infoHeight = () => this.props.PanelHeight() / 5;
+    panelWidth = () => this._props.PanelWidth() / (this._props.NativeDimScaling?.() || 1) - this.sidebarWidth();
+    panelHeight = () => this._props.PanelHeight() / (this._props.NativeDimScaling?.() || 1);
+    scrollXf = () => this._props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop));
+    transparentFilter = () => [...this._props.childFilters(), Utils.TransparentBackgroundFilter];
+    opaqueFilter = () => [...this._props.childFilters(), Utils.OpaqueBackgroundFilter];
+    infoWidth = () => this._props.PanelWidth() / 5;
+    infoHeight = () => this._props.PanelHeight() / 5;
     anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick;
     savedAnnotations = () => this._savedAnnotations;
 
@@ -399,9 +399,9 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<ViewBoxAnnotata
         MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag;
 
         const point = this._bingMap.current.tryLocationToPixel(new this.MicrosoftMaps.Location(this.selectedPin.latitude, this.selectedPin.longitude));
-        const x = point.x + (this.props.PanelWidth() - this.sidebarWidth()) / 2;
-        const y = point.y + this.props.PanelHeight() / 2 + 32;
-        const cpt = this.props.ScreenToLocalTransform().inverse().transformPoint(x, y);
+        const x = point.x + (this._props.PanelWidth() - this.sidebarWidth()) / 2;
+        const y = point.y + this._props.PanelHeight() / 2 + 32;
+        const cpt = this._props.ScreenToLocalTransform().inverse().transformPoint(x, y);
         MapAnchorMenu.Instance.jumpTo(cpt[0], cpt[1], true);
 
         document.addEventListener('pointerdown', this.tryHideMapAnchorMenu, true);
@@ -412,7 +412,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<ViewBoxAnnotata
      */
     @action
     mapOnClick = (e: { location: { latitude: any; longitude: any } }) => {
-        this.props.select(false);
+        this._props.select(false);
         this.deselectPin();
     };
     /*
@@ -677,9 +677,9 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<ViewBoxAnnotata
                 let target = document.elementFromPoint(e.x, e.y);
                 while (target) {
                     if (target === this._ref.current) {
-                        const cpt = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY);
-                        const x = cpt[0] - (this.props.PanelWidth() - this.sidebarWidth()) / 2;
-                        const y = cpt[1] - 32 /* height of search bar */ - this.props.PanelHeight() / 2;
+                        const cpt = this._props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY);
+                        const x = cpt[0] - (this._props.PanelWidth() - this.sidebarWidth()) / 2;
+                        const y = cpt[1] - 32 /* height of search bar */ - this._props.PanelHeight() / 2;
                         const location = this._bingMap.current.tryPixelToLocation(new this.MicrosoftMaps.Point(x, y));
                         this.createPushpin(location.latitude, location.longitude);
                         break;
@@ -776,8 +776,8 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<ViewBoxAnnotata
                                   .map((pushpin, i) => (
                                       <DocumentView
                                           key={i}
-                                          {...this.props}
-                                          renderDepth={this.props.renderDepth + 1}
+                                          {...this._props}
+                                          renderDepth={this._props.renderDepth + 1}
                                           Document={pushpin}
                                           PanelWidth={returnOne}
                                           PanelHeight={returnOne}
@@ -800,7 +800,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<ViewBoxAnnotata
                     </div>
                     {/* <MapBoxInfoWindow
                                     key={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})[Id]}
-                                    {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
+                                    {...OmitKeys(this._props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
                                     place={Docs.Create.MapMarkerDocument(NumCast(40), NumCast(40), false, [], {})}
                                     markerMap={this.markerMap}
                                     PanelWidth={this.infoWidth}
@@ -814,7 +814,7 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent<ViewBoxAnnotata
                 <div className="mapBox-sidebar" style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
                     <SidebarAnnos
                         ref={this._sidebarRef}
-                        {...this.props}
+                        {...this._props}
                         fieldKey={this.fieldKey}
                         Document={this.Document}
                         layoutDoc={this.layoutDoc}
diff --git a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
index 135db64e0..ae674d604 100644
--- a/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
+++ b/src/client/views/nodes/PhysicsBox/PhysicsSimulationBox.tsx
@@ -81,14 +81,14 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
     // semi-Constants
     xMin = 0;
     yMin = 0;
-    xMax = this.props.PanelWidth() * 0.6;
-    yMax = this.props.PanelHeight();
+    xMax = this._props.PanelWidth() * 0.6;
+    yMax = this._props.PanelHeight();
     color = `rgba(0,0,0,0.5)`;
     radius = 50;
     wallPositions: IWallProps[] = [];
 
     @computed get circularMotionRadius() {
-        return (NumCast(this.dataDoc.circularMotionRadius, 150) * this.props.PanelWidth()) / 1000;
+        return (NumCast(this.dataDoc.circularMotionRadius, 150) * this._props.PanelWidth()) / 1000;
     }
     @computed get gravity() {
         return NumCast(this.dataDoc.simulation_gravity, -9.81);
@@ -191,22 +191,22 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
 
     componentDidMount() {
         // Setup and update simulation
-        this._widthDisposer = reaction(() => [this.props.PanelWidth(), this.props.PanelHeight()], this.setupSimulation, { fireImmediately: true });
+        this._widthDisposer = reaction(() => [this._props.PanelWidth(), this._props.PanelHeight()], this.setupSimulation, { fireImmediately: true });
 
         // Create walls
         this.wallPositions = [
             { length: 100, xPos: 0, yPos: 0, angleInDegrees: 0 },
             { length: 100, xPos: 0, yPos: 100, angleInDegrees: 0 },
             { length: 100, xPos: 0, yPos: 0, angleInDegrees: 90 },
-            { length: 100, xPos: (this.xMax / this.props.PanelWidth()) * 100, yPos: 0, angleInDegrees: 90 },
+            { length: 100, xPos: (this.xMax / this._props.PanelWidth()) * 100, yPos: 0, angleInDegrees: 90 },
         ];
     }
 
-    componentDidUpdate(prevProps: Readonly<React.PropsWithChildren<FieldViewProps>>) {
+    componentDidUpdate(prevProps: Readonly<FieldViewProps>) {
         super.componentDidUpdate(prevProps);
-        if (this.xMax !== this.props.PanelWidth() * 0.6 || this.yMax != this.props.PanelHeight()) {
-            this.xMax = this.props.PanelWidth() * 0.6;
-            this.yMax = this.props.PanelHeight();
+        if (this.xMax !== this._props.PanelWidth() * 0.6 || this.yMax != this._props.PanelHeight()) {
+            this.xMax = this._props.PanelWidth() * 0.6;
+            this.yMax = this._props.PanelHeight();
             this.setupSimulation();
         }
     }
@@ -632,7 +632,7 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
 
     // Default setup for pendulum simulation
     setupPendulum = () => {
-        const length = (300 * this.props.PanelWidth()) / 1000;
+        const length = (300 * this._props.PanelWidth()) / 1000;
         const angle = 30;
         const x = length * Math.cos(((90 - angle) * Math.PI) / 180);
         const y = length * Math.sin(((90 - angle) * Math.PI) / 180);
@@ -808,8 +808,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
         const commonWeightProps = {
             pause: this.pause,
             paused: BoolCast(this.dataDoc.simulation_paused),
-            panelWidth: this.props.PanelWidth,
-            panelHeight: this.props.PanelHeight,
+            panelWidth: this._props.PanelWidth,
+            panelHeight: this._props.PanelHeight,
             resetRequest: this.resetRequest,
             xMax: this.xMax,
             xMin: this.xMin,
@@ -853,9 +853,9 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                                     <div
                                         style={{
                                             position: 'fixed',
-                                            left: 0.1 * this.props.PanelWidth() + 'px',
-                                            top: 0.95 * this.props.PanelHeight() + 'px',
-                                            width: 0.5 * this.props.PanelWidth() + 'px',
+                                            left: 0.1 * this._props.PanelWidth() + 'px',
+                                            top: 0.95 * this._props.PanelHeight() + 'px',
+                                            width: 0.5 * this._props.PanelWidth() + 'px',
                                         }}>
                                         <LinearProgress />
                                     </div>
@@ -923,8 +923,8 @@ export class PhysicsSimulationBox extends ViewBoxAnnotatableComponent<FieldViewP
                     </div>
                     <div
                         className="mechanicsSimulationEquationContainer"
-                        onWheel={e => this.props.isContentActive() && e.stopPropagation()}
-                        style={{ overflow: 'auto', height: `${Math.max(1, 800 / this.props.PanelWidth()) * 100}%`, transform: `scale(${Math.min(1, this.props.PanelWidth() / 850)})` }}>
+                        onWheel={e => this._props.isContentActive() && e.stopPropagation()}
+                        style={{ overflow: 'auto', height: `${Math.max(1, 800 / this._props.PanelWidth()) * 100}%`, transform: `scale(${Math.min(1, this._props.PanelWidth() / 850)})` }}>
                         <div className="mechanicsSimulationControls">
                             <Stack direction="row" spacing={1}>
                                 {this.dataDoc.simulation_paused && this.simulationMode != 'Tutorial' && (
diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index 658cfb1ca..c04a81f7d 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -31,7 +31,7 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
     private _ref: React.RefObject<HTMLDivElement> = React.createRef();
 
     componentDidMount() {
-        this.props.setContentView?.(this);
+        this._props.setContentView?.(this);
         Doc.SetNativeWidth(this.dataDoc, 1280);
         Doc.SetNativeHeight(this.dataDoc, 720);
     }
@@ -49,7 +49,7 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this.dataDoc[this.fieldKey + '_duration'] = this.videoDuration;
 
         this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey);
-        this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.client);
+        this.dataDoc[this._props.fieldKey] = new VideoField(this.result.accessPaths.client);
         this.dataDoc[this.fieldKey + '_recorded'] = true;
         // stringify the presentation and store it
         if (presentation?.movements) {
@@ -135,7 +135,7 @@ export class RecordingBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @action
     public static addRecToWorkspace(value: RecordingBox) {
         let ffView = Array.from(DocumentManager.Instance.DocumentViews).find(view => view.ComponentView instanceof CollectionFreeFormView);
-        (ffView?.ComponentView as CollectionFreeFormView).props.addDocument?.(value.Document);
+        (ffView?.ComponentView as CollectionFreeFormView)._props.addDocument?.(value.Document);
         Doc.RemoveDocFromList(Doc.UserDoc(), 'workspaceRecordings', value.Document);
         Doc.RemFromMyOverlay(value.Document);
         Doc.UserDoc().currentRecording = undefined;
diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx
index 79ed69cdd..36527c311 100644
--- a/src/client/views/nodes/ScreenshotBox.tsx
+++ b/src/client/views/nodes/ScreenshotBox.tsx
@@ -47,8 +47,8 @@ declare class MediaRecorder {
 //     _mesh: any = undefined;
 
 //     render() {
-//         const topLeft = [this.props.x, this.props.y];
-//         const raised = this.props.raised;
+//         const topLeft = [this._props.x, this._props.y];
+//         const raised = this._props.raised;
 //         const find = (raised: { coord: Vector2, off: Vector3 }[], what: Vector2) => raised.find(r => r.coord.x === what.x && r.coord.y === what.y);
 //         const tl1 = find(raised, new Vector2(topLeft[0], topLeft[1] + 1));
 //         const tl2 = find(raised, new Vector2(topLeft[0] + 1, topLeft[1] + 1));
@@ -69,11 +69,11 @@ declare class MediaRecorder {
 //         const normals = new Float32Array(quad_normals);
 //         const uvs = new Float32Array(quad_uvs); // Each vertex has one uv coordinate for texture mapping
 //         const indices = new Uint32Array(quad_indices);          // Use the four vertices to draw the two triangles that make up the square.
-//         const popOut = () => NumCast(this.props.Document.popOut);
-//         const popOff = () => NumCast(this.props.Document.popOff);
+//         const popOut = () => NumCast(this.Document.popOut);
+//         const popOff = () => NumCast(this.Document.popOff);
 //         return (
 //             <mesh key={`mesh${topLeft[0]}${topLeft[1]}`} onClick={action(async e => {
-//                 this.props.setRaised([
+//                 this._props.setRaised([
 //                     { coord: new Vector2(topLeft[0], topLeft[1]), off: new Vector3(-popOff(), -popOff(), popOut()) },
 //                     { coord: new Vector2(topLeft[0] + 1, topLeft[1]), off: new Vector3(popOff(), -popOff(), popOut()) },
 //                     { coord: new Vector2(topLeft[0], topLeft[1] + 1), off: new Vector3(-popOff(), popOff(), popOut()) },
@@ -99,7 +99,7 @@ declare class MediaRecorder {
 //                     r?.setAttribute('uv', new BufferAttribute(uvs, 2));
 //                     r?.setIndex(new BufferAttribute(indices, 1));
 //                 }} />
-//                 {!this._videoRef ? <meshStandardMaterial color={this.props.color} /> :
+//                 {!this._videoRef ? <meshStandardMaterial color={this._props.color} /> :
 //                     <meshBasicMaterial >
 //                         <videoTexture attach="map" args={[this._videoRef]} />
 //                     </meshBasicMaterial>}
@@ -118,7 +118,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
     @observable private _videoRef: HTMLVideoElement | null = null;
     @observable _screenCapture = false;
     @computed get recordingStart() {
-        return Cast(this.dataDoc[this.props.fieldKey + '_recordingStart'], DateField)?.date.getTime();
+        return Cast(this.dataDoc[this._props.fieldKey + '_recordingStart'], DateField)?.date.getTime();
     }
 
     constructor(props: any) {
@@ -144,8 +144,8 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
 
     componentDidMount() {
         this.dataDoc.nativeWidth = this.dataDoc.nativeHeight = 0;
-        this.props.setContentView?.(this); // this tells the DocumentView that this ScreenshotBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
-        // this.layoutDoc.videoWall && reaction(() => ({ width: this.props.PanelWidth(), height: this.props.PanelHeight() }),
+        this._props.setContentView?.(this); // this tells the DocumentView that this ScreenshotBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
+        // this.layoutDoc.videoWall && reaction(() => ({ width: this._props.PanelWidth(), height: this._props.PanelHeight() }),
         //     ({ width, height }) => {
         //         if (this._camera) {
         //             const angle = -Math.abs(1 - width / height);
@@ -201,7 +201,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
         //     let count = 0;
         //     numberRange(this._numScreens).forEach(x => numberRange(this._numScreens).forEach(y => screens.push(
         //         <VideoTile doc={this.layoutDoc} color={colors[count++ % colors.length]} x={x} y={y} raised={this._raised} setRaised={this.setRaised} />)));
-        //     return <Canvas key="canvas" id="CANCAN" style={{ width: this.props.PanelWidth(), height: this.props.PanelHeight() }} gl={{ antialias: false }} colorManagement={false} onCreated={props => {
+        //     return <Canvas key="canvas" id="CANCAN" style={{ width: this._props.PanelWidth(), height: this._props.PanelHeight() }} gl={{ antialias: false }} colorManagement={false} onCreated={props => {
         //         this._camera = props.camera;
         //         props.camera.position.set(this._numScreens / 2, this._numScreens / 2, this._numScreens - 2);
         //         props.camera.lookAt(this._numScreens / 2, this._numScreens / 2, 0);
@@ -224,15 +224,15 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
             this._audioRec.onstop = async (e: any) => {
                 const [{ result }] = await Networking.UploadFilesToServer(aud_chunks.map((file: any) => ({ file })));
                 if (!(result instanceof Error)) {
-                    this.dataDoc[this.props.fieldKey + '_audio'] = new AudioField(result.accessPaths.agnostic.client);
+                    this.dataDoc[this._props.fieldKey + '_audio'] = new AudioField(result.accessPaths.agnostic.client);
                 }
             };
             this._videoRef!.srcObject = await (navigator.mediaDevices as any).getDisplayMedia({ video: true });
             this._videoRec = new MediaRecorder(this._videoRef!.srcObject);
             const vid_chunks: any = [];
             this._videoRec.onstart = () => {
-                if (this.dataDoc[this.props.fieldKey + '_trackScreen']) TrackMovements.Instance.start();
-                this.dataDoc[this.props.fieldKey + '_recordingStart'] = new DateField(new Date());
+                if (this.dataDoc[this._props.fieldKey + '_trackScreen']) TrackMovements.Instance.start();
+                this.dataDoc[this._props.fieldKey + '_recordingStart'] = new DateField(new Date());
             };
             this._videoRec.ondataavailable = (e: any) => vid_chunks.push(e.data);
             this._videoRec.onstop = async (e: any) => {
@@ -252,7 +252,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
                     this.layoutDoc.layout = VideoBox.LayoutString(this.fieldKey);
                     this.dataDoc.nativeWidth = this.dataDoc.nativeHeight = undefined;
                     this.layoutDoc._layout_fitWidth = undefined;
-                    this.dataDoc[this.props.fieldKey] = new VideoField(result.accessPaths.agnostic.client);
+                    this.dataDoc[this._props.fieldKey] = new VideoField(result.accessPaths.agnostic.client);
                 } else alert('video conversion failed');
             };
             this._audioRec.start();
@@ -287,8 +287,8 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
         dictationTextProto.mediaState = ComputedField.MakeFunction(`this.${textField}_recordingSource.mediaState`);
         this.dataDoc[this.fieldKey + '_dictation'] = dictationText;
     };
-    videoPanelHeight = () => (NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], NumCast(this.layoutDoc._height)) / NumCast(this.dataDoc[this.fieldKey + '_nativeWidth'], NumCast(this.layoutDoc._width))) * this.props.PanelWidth();
-    formattedPanelHeight = () => Math.max(0, this.props.PanelHeight() - this.videoPanelHeight());
+    videoPanelHeight = () => (NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], NumCast(this.layoutDoc._height)) / NumCast(this.dataDoc[this.fieldKey + '_nativeWidth'], NumCast(this.layoutDoc._width))) * this._props.PanelWidth();
+    formattedPanelHeight = () => Math.max(0, this._props.PanelHeight() - this.videoPanelHeight());
     render() {
         TraceMobx();
         return (
@@ -296,14 +296,14 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
                 <div className="videoBox-viewer">
                     <div style={{ position: 'relative', height: this.videoPanelHeight() }}>
                         <CollectionFreeFormView
-                            {...this.props}
+                            {...this._props}
                             setContentView={emptyFunction}
                             NativeWidth={returnZero}
                             NativeHeight={returnZero}
                             PanelHeight={this.videoPanelHeight}
-                            PanelWidth={this.props.PanelWidth}
-                            focus={this.props.focus}
-                            isSelected={this.props.isSelected}
+                            PanelWidth={this._props.PanelWidth}
+                            focus={this._props.focus}
+                            isSelected={this._props.isSelected}
                             isAnnotationOverlay={true}
                             select={emptyFunction}
                             isContentActive={returnFalse}
@@ -313,8 +313,8 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
                             removeDocument={returnFalse}
                             moveDocument={returnFalse}
                             addDocument={returnFalse}
-                            ScreenToLocalTransform={this.props.ScreenToLocalTransform}
-                            renderDepth={this.props.renderDepth + 1}>
+                            ScreenToLocalTransform={this._props.ScreenToLocalTransform}
+                            renderDepth={this._props.renderDepth + 1}>
                             <>
                                 {this.threed}
                                 {this.content}
@@ -324,7 +324,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
                     <div style={{ background: SettingsManager.userColor, position: 'relative', height: this.formattedPanelHeight() }}>
                         {!(this.dataDoc[this.fieldKey + '_dictation'] instanceof Doc) ? null : (
                             <FormattedTextBox
-                                {...this.props}
+                                {...this._props}
                                 Document={DocCast(this.dataDoc[this.fieldKey + '_dictation'])}
                                 fieldKey={'text'}
                                 PanelHeight={this.formattedPanelHeight}
@@ -337,12 +337,12 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
                                 removeDocument={returnFalse}
                                 moveDocument={returnFalse}
                                 addDocument={returnFalse}
-                                renderDepth={this.props.renderDepth + 1}
+                                renderDepth={this._props.renderDepth + 1}
                             />
                         )}
                     </div>
                 </div>
-                {!this.props.isSelected() ? null : (
+                {!this._props.isSelected() ? null : (
                     <div className="screenshotBox-uiButtons" style={{ background: SettingsManager.userColor }}>
                         <div className="screenshotBox-recorder" style={{ color: SettingsManager.userBackgroundColor, background: SettingsManager.userVariantColor }} key="snap" onPointerDown={this.toggleRecording}>
                             <FontAwesomeIcon icon="file" size="lg" />
diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx
index 8e506ec64..73ad3a004 100644
--- a/src/client/views/nodes/ScriptingBox.tsx
+++ b/src/client/views/nodes/ScriptingBox.tsx
@@ -60,7 +60,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable
         super(props);
         makeObservable(this);
         if (!this.compileParams.length) {
-            const params = ScriptCast(this.dataDoc[this.props.fieldKey])?.script.options.params as { [key: string]: any };
+            const params = ScriptCast(this.dataDoc[this._props.fieldKey])?.script.options.params as { [key: string]: any };
             if (params) {
                 this.compileParams = Array.from(Object.keys(params))
                     .filter(p => !p.startsWith('_'))
@@ -116,7 +116,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable
 
     @action
     componentDidMount() {
-        this.props.setContentView?.(this);
+        this._props.setContentView?.(this);
         this.rawText = this.rawScript;
         const observer = new _global.ResizeObserver(
             action((entries: any) => {
@@ -294,7 +294,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable
     onCopy = () => {
         const copy = Doc.MakeCopy(this.Document, true);
         copy.x = NumCast(this.Document.x) + NumCast(this.dataDoc._width);
-        this.props.addDocument?.(copy);
+        this._props.addDocument?.(copy);
     };
 
     // adds option to create a copy to the context menu
@@ -310,7 +310,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable
         const nameInput = <textarea className="scriptingBox-textarea-inputs" onChange={e => (this.functionName = e.target.value)} placeholder="enter name here" value={this.functionName} />;
 
         return (
-            <div className="scriptingBox-inputDiv" onPointerDown={e => this.props.isSelected() && e.stopPropagation()}>
+            <div className="scriptingBox-inputDiv" onPointerDown={e => this._props.isSelected() && e.stopPropagation()}>
                 <div className="scriptingBox-wrapper" style={{ maxWidth: '100%' }}>
                     <div className="container" style={{ maxWidth: '100%' }}>
                         <div className="descriptor" style={{ textAlign: 'center', display: 'inline-block', maxWidth: '100%' }}>
@@ -687,7 +687,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable
         );
 
         return (
-            <div className="scriptingBox-inputDiv" onPointerDown={e => this.props.isSelected() && e.stopPropagation()}>
+            <div className="scriptingBox-inputDiv" onPointerDown={e => this._props.isSelected() && e.stopPropagation()}>
                 <div className="scriptingBox-wrapper">
                     {this.renderScriptingBox}
                     {definedParameters}
@@ -745,7 +745,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable
     // inputs UI for params which allows you to set values for each displayed in a list
     renderParamsInputs() {
         return (
-            <div className="scriptingBox-inputDiv" onPointerDown={e => this.props.isSelected() && e.stopPropagation()}>
+            <div className="scriptingBox-inputDiv" onPointerDown={e => this._props.isSelected() && e.stopPropagation()}>
                 {!this.compileParams.length || !this.paramsNames ? null : (
                     <div className="scriptingBox-plist">
                         {this.paramsNames.map((parameter: string, i: number) => (
@@ -812,7 +812,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable
         TraceMobx();
         return (
             <div className={`scriptingBox`} onContextMenu={this.specificContextMenu} onPointerUp={!this._function ? this.suggestionPos : undefined}>
-                <div className="scriptingBox-outerDiv" onWheel={e => this.props.isSelected() && e.stopPropagation()}>
+                <div className="scriptingBox-outerDiv" onWheel={e => this._props.isSelected() && e.stopPropagation()}>
                     {this._paramSuggestion ? (
                         <div className="boxed" ref={this._suggestionRef} style={{ left: this._suggestionBoxX + 20, top: this._suggestionBoxY - 15, display: 'inline' }}>
                             {' '}
diff --git a/src/client/views/nodes/audio/AudioWaveform.tsx b/src/client/views/nodes/audio/AudioWaveform.tsx
index 3e46ff4e6..7fd799952 100644
--- a/src/client/views/nodes/audio/AudioWaveform.tsx
+++ b/src/client/views/nodes/audio/AudioWaveform.tsx
@@ -109,7 +109,7 @@ export class AudioWaveform extends ObservableReactComponent<AudioWaveformProps>
                     progressColor={Colors.MEDIUM_BLUE_ALT}
                     progress={this._props.progress ?? 1}
                     barWidth={200 / this.audioBuckets.length}
-                    //gradientColors={this.props.gradientColors}
+                    //gradientColors={this._props.gradientColors}
                     peaks={this.audioBuckets}
                     width={(this._props.PanelWidth ?? 0) * window.devicePixelRatio}
                     height={this.waveHeight * window.devicePixelRatio}
diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx
index 1002ee403..5a13fa8b4 100644
--- a/src/client/views/nodes/formattedText/DashDocView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocView.tsx
@@ -177,7 +177,7 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
     };
 
     componentWillUnmount = () => Object.values(this._disposers).forEach(disposer => disposer?.());
-    isContentActive = () => this.props.tbox.props.isSelected() || this.props.tbox.isAnyChildContentActive?.();
+    isContentActive = () => this.props.tbox._props.isSelected() || this.props.tbox.isAnyChildContentActive?.();
 
     render() {
         return !this._dashDoc || !this._finalLayout || this.props.hidden ? null : (
@@ -205,21 +205,21 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
                     removeDocument={this.removeDoc}
                     isDocumentActive={returnFalse}
                     isContentActive={this.isContentActive}
-                    styleProvider={this._textBox.props.styleProvider}
-                    docViewPath={this._textBox.props.docViewPath}
+                    styleProvider={this._textBox._props.styleProvider}
+                    docViewPath={this._textBox._props.docViewPath}
                     ScreenToLocalTransform={this.getDocTransform}
-                    addDocTab={this._textBox.props.addDocTab}
+                    addDocTab={this._textBox._props.addDocTab}
                     pinToPres={returnFalse}
-                    renderDepth={this._textBox.props.renderDepth + 1}
+                    renderDepth={this._textBox._props.renderDepth + 1}
                     PanelWidth={this._finalLayout[Width]}
                     PanelHeight={this._finalLayout[Height]}
                     focus={this.outerFocus}
                     whenChildContentsActiveChanged={this.props.tbox.whenChildContentsActiveChanged}
                     bringToFront={emptyFunction}
                     dontRegisterView={false}
-                    childFilters={this.props.tbox?.props.childFilters}
-                    childFiltersByRanges={this.props.tbox?.props.childFiltersByRanges}
-                    searchFilterDocs={this.props.tbox?.props.searchFilterDocs}
+                    childFilters={this.props.tbox?._props.childFilters}
+                    childFiltersByRanges={this.props.tbox?._props.childFiltersByRanges}
+                    searchFilterDocs={this.props.tbox?._props.searchFilterDocs}
                 />
             </div>
         );
diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx
index 7e655531e..b786c5ffb 100644
--- a/src/client/views/nodes/formattedText/EquationView.tsx
+++ b/src/client/views/nodes/formattedText/EquationView.tsx
@@ -65,8 +65,8 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal>
 
     constructor(props: any) {
         super(props);
-        this._fieldKey = this.props.fieldKey;
-        this._textBoxDoc = this.props.tbox.props.Document;
+        this._fieldKey = props.fieldKey;
+        this._textBoxDoc = props.tbox.Document;
     }
 
     componentWillUnmount() {
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 3b31f2d17..5858c3b11 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -186,7 +186,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
 
     // finds font sizes and families in selection
     getActiveAlignment() {
-        if (this.view && this.TextView?.props.rootSelected?.()) {
+        if (this.view && this.TextView?._props.rootSelected?.()) {
             const path = (this.view.state.selection.$from as any).path;
             for (let i = path.length - 3; i < path.length && i >= 0; i -= 3) {
                 if (path[i]?.type === this.view.state.schema.nodes.paragraph || path[i]?.type === this.view.state.schema.nodes.heading) {
@@ -199,7 +199,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
 
     // finds font sizes and families in selection
     getActiveListStyle() {
-        if (this.view && this.TextView?.props.rootSelected?.()) {
+        if (this.view && this.TextView?._props.rootSelected?.()) {
             const path = (this.view.state.selection.$from as any).path;
             for (let i = 0; i < path.length; i += 3) {
                 if (path[i].type === this.view.state.schema.nodes.ordered_list) {
@@ -219,7 +219,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         const activeSizes = new Set<string>();
         const activeColors = new Set<string>();
         const activeHighlights = new Set<string>();
-        if (this.view && this.TextView?.props.rootSelected?.()) {
+        if (this.view && this.TextView?._props.rootSelected?.()) {
             const state = this.view.state;
             const pos = this.view.state.selection.$from;
             const marks: Mark[] = [...(state.storedMarks ?? [])];
@@ -254,7 +254,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
     //finds all active marks on selection in given group
     getActiveMarksOnSelection() {
         let activeMarks: MarkType[] = [];
-        if (!this.view || !this.TextView?.props.rootSelected?.()) return activeMarks;
+        if (!this.view || !this.TextView?._props.rootSelected?.()) return activeMarks;
 
         const markGroup = [schema.marks.noAutoLinkAnchor, schema.marks.strong, schema.marks.em, schema.marks.underline, schema.marks.strikethrough, schema.marks.superscript, schema.marks.subscript];
         if (this.view.state.storedMarks) return this.view.state.storedMarks.map(mark => mark.type);
@@ -447,7 +447,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         this.layoutDoc && (this.layoutDoc.layout_centered = !this.layoutDoc.layout_centered);
     };
     align = (view: EditorView, dispatch: any, alignment: 'left' | 'right' | 'center') => {
-        if (this.TextView?.props.rootSelected?.()) {
+        if (this.TextView?._props.rootSelected?.()) {
             var tr = view.state.tr;
             view.state.doc.nodesBetween(view.state.selection.from, view.state.selection.to, (node, pos, parent, index) => {
                 if ([schema.nodes.paragraph, schema.nodes.heading].includes(node.type)) {
@@ -581,7 +581,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         return (this.view as any)?.TextView as FormattedTextBox;
     }
     get TextViewFieldKey() {
-        return this.TextView?.props.fieldKey;
+        return this.TextView?._props.fieldKey;
     }
 
     @action setActiveHighlight(color: string) {
@@ -774,11 +774,11 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         //         <div className="collectionMenu-divider" key="divider 3" />
         //         {[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size", action((val: string) => {
         //             this.activeFontSize = val;
-        //             SelectionManager.Views.map(dv => dv.props.Document._text_fontSize = val);
+        //             SelectionManager.Views.map(dv => dv.Document._text_fontSize = val);
         //         })),
         //         this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family", action((val: string) => {
         //             this.activeFontFamily = val;
-        //             SelectionManager.Views.map(dv => dv.props.Document._text_fontFamily = val);
+        //             SelectionManager.Views.map(dv => dv.Document._text_fontFamily = val);
         //         })),
         //         <div className="collectionMenu-divider" key="divider 4" />,
         //         this.createNodesDropdown(this.activeListType, this.listTypeOptions, "list type", () => ({})),
diff --git a/src/client/views/nodes/importBox/ImportElementBox.tsx b/src/client/views/nodes/importBox/ImportElementBox.tsx
index b573f7c48..1a92acea1 100644
--- a/src/client/views/nodes/importBox/ImportElementBox.tsx
+++ b/src/client/views/nodes/importBox/ImportElementBox.tsx
@@ -13,12 +13,12 @@ export class ImportElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return FieldView.LayoutString(ImportElementBox, fieldKey);
     }
 
-    screenToLocalXf = () => this.props.ScreenToLocalTransform().scale(1 * (this.props.NativeDimScaling?.() || 1));
+    screenToLocalXf = () => this._props.ScreenToLocalTransform().scale(1 * (this._props.NativeDimScaling?.() || 1));
     @computed get mainItem() {
         return (
             <div style={{ backgroundColor: 'pink' }}>
                 <DocumentView
-                    {...this.props} //
+                    {...this._props} //
                     LayoutTemplateString={undefined}
                     Document={this.Document}
                     isContentActive={returnFalse}
diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx
index 5ea9e9979..a1f5ce703 100644
--- a/src/client/views/pdf/Annotation.tsx
+++ b/src/client/views/pdf/Annotation.tsx
@@ -1,4 +1,4 @@
-import { action, computed } from 'mobx';
+import { action, computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast, Opt } from '../../../fields/Doc';
@@ -12,6 +12,7 @@ import { OpenWhere } from '../nodes/DocumentView';
 import { FieldViewProps } from '../nodes/FieldView';
 import { AnchorMenu } from './AnchorMenu';
 import './Annotation.scss';
+import { ObservableReactComponent } from '../ObservableReactComponent';
 
 interface IAnnotationProps extends FieldViewProps {
     anno: Doc;
@@ -21,12 +22,16 @@ interface IAnnotationProps extends FieldViewProps {
     pointerEvents?: () => Opt<string>;
 }
 @observer
-export class Annotation extends React.Component<IAnnotationProps> {
+export class Annotation extends ObservableReactComponent<IAnnotationProps> {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
     render() {
         return (
-            <div style={{ display: this.props.anno.textCopied && !Doc.GetBrushHighlightStatus(this.props.anno) ? 'none' : undefined }}>
-                {DocListCast(this.props.anno.text_inlineAnnotations).map(a => (
-                    <RegionAnnotation pointerEvents={this.props.pointerEvents} {...this.props} document={a} key={a[Id]} />
+            <div style={{ display: this._props.anno.textCopied && !Doc.GetBrushHighlightStatus(this._props.anno) ? 'none' : undefined }}>
+                {DocListCast(this._props.anno.text_inlineAnnotations).map(a => (
+                    <RegionAnnotation pointerEvents={this._props.pointerEvents} {...this._props} document={a} key={a[Id]} />
                 ))}
             </div>
         );
@@ -38,23 +43,23 @@ interface IRegionAnnotationProps extends IAnnotationProps {
     pointerEvents?: () => Opt<string>;
 }
 @observer
-class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
+class RegionAnnotation extends ObservableReactComponent<IRegionAnnotationProps> {
     private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
 
     @computed get annoTextRegion() {
-        return Cast(this.props.document.annoTextRegion, Doc, null) || this.props.document;
+        return Cast(this._props.document.annoTextRegion, Doc, null) || this._props.document;
     }
 
     @undoBatch
     deleteAnnotation = () => {
-        const docAnnotations = DocListCast(this.props.dataDoc[this.props.fieldKey]);
-        this.props.dataDoc[this.props.fieldKey] = new List<Doc>(docAnnotations.filter(a => a !== this.annoTextRegion));
+        const docAnnotations = DocListCast(this._props.dataDoc[this._props.fieldKey]);
+        this._props.dataDoc[this._props.fieldKey] = new List<Doc>(docAnnotations.filter(a => a !== this.annoTextRegion));
         AnchorMenu.Instance.fadeOut(true);
-        this.props.select(false);
+        this._props.select(false);
     };
 
     @undoBatch
-    pinToPres = () => this.props.pinToPres(this.annoTextRegion, {});
+    pinToPres = () => this._props.pinToPres(this.annoTextRegion, {});
 
     @undoBatch
     makeTargretToggle = () => (this.annoTextRegion.followLinkToggle = !this.annoTextRegion.followLinkToggle);
@@ -65,7 +70,7 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
         const trail = DocCast(anchor.presentationTrail);
         if (trail) {
             Doc.ActivePresentation = trail;
-            this.props.addDocTab(trail, OpenWhere.replaceRight);
+            this._props.addDocTab(trail, OpenWhere.replaceRight);
         }
     };
 
@@ -94,9 +99,9 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
     };
 
     @computed get linkHighlighted() {
-        for (const link of LinkManager.Instance.getAllDirectLinks(this.props.document)) {
-            const a1 = LinkManager.getOppositeAnchor(link, this.props.document);
-            if (a1 && Doc.GetBrushStatus(DocCast(a1.annotationOn, this.props.document))) return true;
+        for (const link of LinkManager.Instance.getAllDirectLinks(this._props.document)) {
+            const a1 = LinkManager.getOppositeAnchor(link, this._props.document);
+            if (a1 && Doc.GetBrushStatus(DocCast(a1.annotationOn, this._props.document))) return true;
         }
     }
 
@@ -107,24 +112,24 @@ class RegionAnnotation extends React.Component<IRegionAnnotationProps> {
                 className="htmlAnnotation"
                 ref={this._mainCont}
                 onPointerEnter={action(() => {
-                    Doc.BrushDoc(this.props.anno);
-                    this.props.showInfo?.(this.props.anno);
+                    Doc.BrushDoc(this._props.anno);
+                    this._props.showInfo?.(this._props.anno);
                 })}
                 onPointerLeave={action(() => {
-                    Doc.UnBrushDoc(this.props.anno);
-                    this.props.showInfo?.(undefined);
+                    Doc.UnBrushDoc(this._props.anno);
+                    this._props.showInfo?.(undefined);
                 })}
                 onPointerDown={this.onPointerDown}
                 onContextMenu={this.onContextMenu}
                 style={{
-                    left: NumCast(this.props.document.x),
-                    top: NumCast(this.props.document.y),
-                    width: NumCast(this.props.document._width),
-                    height: NumCast(this.props.document._height),
+                    left: NumCast(this._props.document.x),
+                    top: NumCast(this._props.document.y),
+                    width: NumCast(this._props.document._width),
+                    height: NumCast(this._props.document._height),
                     opacity: brushed === Doc.DocBrushStatus.highlighted ? 0.5 : undefined,
-                    pointerEvents: this.props.pointerEvents?.() as any,
+                    pointerEvents: this._props.pointerEvents?.() as any,
                     outline: brushed === Doc.DocBrushStatus.unbrushed && this.linkHighlighted ? 'solid 1px lightBlue' : undefined,
-                    backgroundColor: brushed === Doc.DocBrushStatus.highlighted ? 'orange' : StrCast(this.props.document.backgroundColor),
+                    backgroundColor: brushed === Doc.DocBrushStatus.highlighted ? 'orange' : StrCast(this._props.document.backgroundColor),
                 }}
             />
         );
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 14187833f..4d29573d4 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -122,10 +122,10 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
 
     @undoBatch
     makeLink = action((linkTo: Doc) => {
-        const linkFrom = this.props.linkCreateAnchor?.();
+        const linkFrom = this._props.linkCreateAnchor?.();
         if (linkFrom) {
             const link = DocUtils.MakeLink(linkFrom, linkTo, {});
-            link && this.props.linkCreated?.(link);
+            link && this._props.linkCreated?.(link);
         }
     });
 
@@ -292,7 +292,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
 
         const query = StrCast(this._searchString);
         Doc.SetSearchQuery(query);
-        if (!this.props.linkSearch) Array.from(this._results.keys()).forEach(doc => DocumentManager.Instance.getFirstDocumentView(doc)?.ComponentView?.search?.(this._searchString, undefined, true));
+        if (!this._props.linkSearch) Array.from(this._results.keys()).forEach(doc => DocumentManager.Instance.getFirstDocumentView(doc)?.ComponentView?.search?.(this._searchString, undefined, true));
         this._results.clear();
 
         if (query) {
@@ -375,13 +375,13 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
     render() {
         var validResults = 0;
 
-        const isLinkSearch: boolean = this.props.linkSearch;
+        const isLinkSearch: boolean = this._props.linkSearch;
 
         const sortedResults = Array.from(this._results.entries()).sort((a, b) => (this._pageRanks.get(b[0]) ?? 0) - (this._pageRanks.get(a[0]) ?? 0)); // sorted by page rank
 
         const resultsJSX = Array();
 
-        const fromDoc = this.props.linkFrom?.();
+        const fromDoc = this._props.linkFrom?.();
 
         sortedResults.forEach(result => {
             var className = 'searchBox-results-scroll-view-result';
diff --git a/src/client/views/selectedDoc/SelectedDocView.tsx b/src/client/views/selectedDoc/SelectedDocView.tsx
index daacb368b..39e778b76 100644
--- a/src/client/views/selectedDoc/SelectedDocView.tsx
+++ b/src/client/views/selectedDoc/SelectedDocView.tsx
@@ -1,14 +1,14 @@
+import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ListBox } from 'browndash-components';
 import { computed } from 'mobx';
 import { observer } from 'mobx-react';
-import * as React from 'react';
-import { emptyFunction } from '../../../Utils';
 import { Doc } from '../../../fields/Doc';
 import { StrCast } from '../../../fields/Types';
 import { DocumentManager } from '../../util/DocumentManager';
-import { SettingsManager } from '../../util/SettingsManager';
 import { DocFocusOptions } from '../nodes/DocumentView';
+import { emptyFunction } from '../../../Utils';
+import { SettingsManager } from '../../util/SettingsManager';
 
 export interface SelectedDocViewProps {
     selectedDocs: Doc[];