Merge branch 'master' into presentation_updates

42 files changed, 486 insertions, 668 deletions

diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index a36dfaf69..63e01bc5b 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -330,72 +330,76 @@ export namespace DocServer {
             }
         }
 
-        // 2) synchronously, we emit a single callback to the server requesting the serialized (i.e. represented by a string)
-        // fields for the given ids. This returns a promise, which, when resolved, indicates that all the JSON serialized versions of
-        // the fields have been returned from the server
-        const getSerializedFields: Promise<any> = Utils.EmitCallback(_socket, MessageStore.GetRefFields, requestedIds);
-
-        // 3) when the serialized RefFields have been received, go head and begin deserializing them into objects.
-        // Here, once deserialized, we also invoke .proto to 'load' the documents' prototypes, which ensures that all
-        // future .proto calls on the Doc won't have to go farther than the cache to get their actual value.
-        const deserializeFields = getSerializedFields.then(async fields => {
-            const fieldMap: { [id: string]: RefField } = {};
-            const proms: Promise<void>[] = [];
-            runInAction(() => {
-                for (const field of fields) {
-                    if (field !== undefined && field !== null && !_cache[field.id]) {
-                        // deserialize
-                        const cached = _cache[field.id];
-                        if (!cached) {
-                            const prom = SerializationHelper.Deserialize(field).then(deserialized => {
-                                fieldMap[field.id] = deserialized;
-
-                                //overwrite or delete any promises (that we inserted as flags
-                                // to indicate that the field was in the process of being fetched). Now everything
-                                // should be an actual value within or entirely absent from the cache.
-                                if (deserialized !== undefined) {
-                                    _cache[field.id] = deserialized;
-                                } else {
-                                    delete _cache[field.id];
-                                }
-                                return deserialized;
-                            });
-                            // 4) here, for each of the documents we've requested *ourselves* (i.e. weren't promises or found in the cache)
-                            // we set the value at the field's id to a promise that will resolve to the field. 
-                            // When we find that promises exist at keys in the cache, THIS is where they were set, just by some other caller (method).
-                            // The mapping in the .then call ensures that when other callers await these promises, they'll
-                            // get the resolved field
-                            _cache[field.id] = prom;
-
-                            // adds to a list of promises that will be awaited asynchronously
-                            proms.push(prom);
-                        } else if (cached instanceof Promise) {
-                            proms.push(cached as any);
+        if (requestedIds.length) {
+
+            // 2) synchronously, we emit a single callback to the server requesting the serialized (i.e. represented by a string)
+            // fields for the given ids. This returns a promise, which, when resolved, indicates that all the JSON serialized versions of
+            // the fields have been returned from the server
+            const getSerializedFields: Promise<any> = Utils.EmitCallback(_socket, MessageStore.GetRefFields, requestedIds);
+
+            // 3) when the serialized RefFields have been received, go head and begin deserializing them into objects.
+            // Here, once deserialized, we also invoke .proto to 'load' the documents' prototypes, which ensures that all
+            // future .proto calls on the Doc won't have to go farther than the cache to get their actual value.
+            const deserializeFields = getSerializedFields.then(async fields => {
+                const fieldMap: { [id: string]: RefField } = {};
+                const proms: Promise<void>[] = [];
+                runInAction(() => {
+                    for (const field of fields) {
+                        if (field !== undefined && field !== null && !_cache[field.id]) {
+                            // deserialize
+                            const cached = _cache[field.id];
+                            if (!cached) {
+                                const prom = SerializationHelper.Deserialize(field).then(deserialized => {
+                                    fieldMap[field.id] = deserialized;
+
+                                    //overwrite or delete any promises (that we inserted as flags
+                                    // to indicate that the field was in the process of being fetched). Now everything
+                                    // should be an actual value within or entirely absent from the cache.
+                                    if (deserialized !== undefined) {
+                                        _cache[field.id] = deserialized;
+                                    } else {
+                                        delete _cache[field.id];
+                                    }
+                                    return deserialized;
+                                });
+                                // 4) here, for each of the documents we've requested *ourselves* (i.e. weren't promises or found in the cache)
+                                // we set the value at the field's id to a promise that will resolve to the field. 
+                                // When we find that promises exist at keys in the cache, THIS is where they were set, just by some other caller (method).
+                                // The mapping in the .then call ensures that when other callers await these promises, they'll
+                                // get the resolved field
+                                _cache[field.id] = prom;
+
+                                // adds to a list of promises that will be awaited asynchronously
+                                proms.push(prom);
+                            } else if (cached instanceof Promise) {
+                                proms.push(cached as any);
+                            }
+                        } else if (_cache[field.id] instanceof Promise) {
+                            proms.push(_cache[field.id] as any);
+                            (_cache[field.id] as any).then((f: any) => fieldMap[field.id] = f);
+                        } else if (field) {
+                            proms.push(_cache[field.id] as any);
+                            fieldMap[field.id] = field;
                         }
-                    } else if (_cache[field.id] instanceof Promise) {
-                        proms.push(_cache[field.id] as any);
-                        (_cache[field.id] as any).then((f: any) => fieldMap[field.id] = f);
-                    } else if (field) {
-                        proms.push(_cache[field.id] as any);
-                        fieldMap[field.id] = field;
                     }
-                }
+                });
+                await Promise.all(proms);
+                return fieldMap;
             });
-            await Promise.all(proms);
-            return fieldMap;
-        });
 
-        // 5) at this point, all fields have a) been returned from the server and b) been deserialized into actual Field objects whose
-        // prototype documents, if any, have also been fetched and cached.
-        const fields = await deserializeFields;
+            // 5) at this point, all fields have a) been returned from the server and b) been deserialized into actual Field objects whose
+            // prototype documents, if any, have also been fetched and cached.
+            const fields = await deserializeFields;
 
-        // 6) with this confidence, we can now go through and update the cache at the ids of the fields that
-        // we explicitly had to fetch. To finish it off, we add whatever value we've come up with for a given
-        // id to the soon-to-be-returned field mapping.
-        requestedIds.forEach(id => {
-            const field = fields[id];
-            map[id] = field;
-        });
+            // 6) with this confidence, we can now go through and update the cache at the ids of the fields that
+            // we explicitly had to fetch. To finish it off, we add whatever value we've come up with for a given
+            // id to the soon-to-be-returned field mapping.
+            requestedIds.forEach(id => {
+                const field = fields[id];
+                map[id] = field;
+            });
+
+        }
 
         // 7) those promises we encountered in the else if of 1), which represent
         // other callers having already submitted a request to the server for (a) document(s)
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index c4702cafa..95aebbe4a 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -430,27 +430,27 @@ export class CurrentUserUtils {
             this.setupActiveMobileMenu(doc);
         }
         return [
-            { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.clickFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc, noviceMode: true, clickFactory: doc.emptyPane as Doc, },
-            { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc, noviceMode: true },
-            { toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc },
-            { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc, noviceMode: true },
-            { toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc },
+            { toolTip: "Tap to create a collection in a new pane, drag for a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.clickFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc, noviceMode: true, clickFactory: doc.emptyPane as Doc, },
+            { toolTip: "Tap to create a webpage in a new pane, drag for a webpage", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc, noviceMode: true },
+            { toolTip: "Tap to create a cat image in a new pane, drag for a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc },
+            { toolTip: "Tap to create a comparison box in a new pane, drag for a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc, noviceMode: true },
+            { toolTip: "Tap to create a screen grabber in a new pane, drag for a screen grabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc },
             //  { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' },
-            { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc, noviceMode: true },
-            { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc, noviceMode: true },
+            { toolTip: "Tap to create an audio recorder in a new pane, drag for an audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc, noviceMode: true },
+            { toolTip: "Tap to create a button in a new pane, drag for a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc, noviceMode: true },
 
-            { toolTip: "Drag a presentation view", title: "Present", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc, noviceMode: true },
-            { toolTip: "Drag a search box", title: "Query", icon: "search", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptySearch as Doc },
-            { toolTip: "Drag a scripting box", title: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc },
+            { toolTip: "Tap to create a presentation in a new pane, drag for a presentation", title: "Present", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc, noviceMode: true },
+            { toolTip: "Tap to create a search box in a new pane, drag for a search box", title: "Query", icon: "search", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptySearch as Doc },
+            { toolTip: "Tap to create a scripting box in a new pane, drag for a scripting box", title: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc },
             // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
-            { toolTip: "Drag a mobile view", title: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc },
+            { toolTip: "Tap to create a mobile view in a new pane, drag for a mobile view", title: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc },
             // { title: "Drag an instance of the device collection", title: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' },
             // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen,  this)`, activeInkPen: doc },
             // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
             // { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
             // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc },
             // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc },
-            { toolTip: "Drag a document previewer", title: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.emptyDocHolder as Doc },
+            { toolTip: "Tap to create a document previewer in a new pane, drag for a document previewer", title: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.emptyDocHolder as Doc },
             { toolTip: "Toggle a Calculator REPL", title: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' },
             { toolTip: "Connect a Google Account", title: "Google Account", icon: "external-link-alt", click: 'GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' },
         ];
diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts
index d0acf14c3..f1848f7e5 100644
--- a/src/client/util/DropConverter.ts
+++ b/src/client/util/DropConverter.ts
@@ -58,7 +58,7 @@ export function convertDropDataToButtons(data: DragManager.DocumentDragData) {
         let dbox = doc;
         // bcz: isButtonBar is intended to allow a collection of linear buttons to be dropped and nested into another collection of buttons... it's not being used yet, and isn't very elegant
         if (doc.type === DocumentType.FONTICON || StrCast(Doc.Layout(doc).layout).includes("FontIconBox")) {
-            dbox = Doc.MakeAlias(doc);
+            //dbox = Doc.MakeAlias(doc);  // don't need to do anything if dropping an icon doc onto an icon bar since there should be no layout data for an icon
         } else if (!doc.onDragStart && !doc.isButtonBar) {
             const layoutDoc = doc.layout instanceof Doc && doc.layout.isTemplateForField ? doc.layout : doc;
             if (layoutDoc.type !== DocumentType.FONTICON) {
diff --git a/src/client/util/KeyCodes.ts b/src/client/util/KeyCodes.ts
index cacb72a57..de2457a5a 100644
--- a/src/client/util/KeyCodes.ts
+++ b/src/client/util/KeyCodes.ts
@@ -131,6 +131,6 @@ export class KeyCodes {
     public static NUM_7: number = 55;
     public static NUM_8: number = 56;
     public static NUM_9: number = 57;
-    public static SUBSTRACT: number = 189;
+    public static SUBTRACT: number = 189;
     public static ADD: number = 187;
 }
\ No newline at end of file
diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index 7b2c601fe..3073da954 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -37,7 +37,8 @@ export namespace SearchUtil {
     export async function Search(query: string, returnDocs: boolean, options: SearchParams = {}) {
         query = query || "*"; //If we just have a filter query, search for * as the query
         const rpquery = Utils.prepend("/dashsearch");
-        const gotten = await rp.get(rpquery, { qs: { ...options, q: query } });
+        const replacedQuery = query.replace(/type_t:([^ )])/, (substring, arg) => `{!join from=id to=proto_i}type_t:${arg}`);
+        const gotten = await rp.get(rpquery, { qs: { ...options, q: replacedQuery } });
         const result: IdSearchResult = gotten.startsWith("<") ? { ids: [], docs: [], numFound: 0, lines: [] } : JSON.parse(gotten);
         if (!returnDocs) {
             return result;
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 01dda0aca..560786400 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -33,10 +33,10 @@
     font-size: 12px;
     padding-right: 15px;
     color: black;
-    margin-top: 4px;
+    margin-top: 10px;
     /* right: 135; */
     position: absolute;
-    left: 235;
+    left: 243;
 }
 
 .settings-section {
@@ -147,6 +147,7 @@
         height: 20px;
         border: 0.5px solid black;
         border-radius: 5px;
+        padding-top: 3px;
     }
 }
 
@@ -229,7 +230,7 @@
     }
 
     .logout-button {
-        right: 35;
+        right: 355;
         position: absolute;
     }
 
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index ea449e23d..b4778d3eb 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -91,10 +91,10 @@ export default class SettingsManager extends React.Component<{}> {
             </div>
             <div className="preferences-font">
                 <div className="preferences-font-text">Default Font</div>
-                <select className="font-select" onChange={this.changeFontFamily}>
+                <select className="font-select" onChange={this.changeFontFamily} value={StrCast(Doc.UserDoc().fontFamily, "Times New Roman")} >
                     {fontFamilies.map(font => <option key={font} value={font} defaultValue={StrCast(Doc.UserDoc().fontFamily)}> {font} </option>)}
                 </select>
-                <select className="size-select" onChange={this.changeFontSize}>
+                <select className="size-select" onChange={this.changeFontSize} value={StrCast(Doc.UserDoc().fontSize, "7pt")}>
                     {fontSizes.map(size => <option key={size} value={size} defaultValue={StrCast(Doc.UserDoc().fontSize)}> {size} </option>)}
                 </select>
             </div>
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index d50a132f8..48a3c023f 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -179,6 +179,9 @@ export default class SharingManager extends React.Component<{}> {
         if (group.docsShared) DocListCast(group.docsShared).forEach(doc => Doc.IndexOf(doc, DocListCast(user.notificationDoc[storage])) === -1 && Doc.AddDocToList(user.notificationDoc, storage, doc));
     }
 
+    /**
+     * Called from the properties sidebar to change permissions of a user.
+     */
     shareFromPropertiesSidebar = (shareWith: string, permission: SharingPermissions, target: Doc) => {
         const user = this.users.find(({ user: { email } }) => email === (shareWith === "Me" ? Doc.CurrentUserEmail : shareWith));
         if (user) this.setInternalSharing(user, permission, target);
@@ -228,7 +231,6 @@ export default class SharingManager extends React.Component<{}> {
         const key = user.email.replace('.', '_');
         const ACL = `ACL-${key}`;
 
-
         target.author === Doc.CurrentUserEmail && distributeAcls(ACL, permission as SharingPermissions, target);
 
         if (permission !== SharingPermissions.None) {
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index ea854c2a3..8c8bb6fde 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -122,15 +122,23 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps, T
 
         @action.bound
         removeDocument(doc: Doc | Doc[]): boolean {
-            const docs = doc instanceof Doc ? [doc] : doc;
-            docs.map(doc => doc.isPushpin = doc.annotationOn = undefined);
-            const targetDataDoc = this.dataDoc;
-            const value = DocListCast(targetDataDoc[this.annotationKey]);
-            const toRemove = value.filter(v => docs.includes(v));
-            // can't assign new List<Doc>(result) to this because you can't assign new values in addonly
-            if (toRemove.length !== 0) {
-                toRemove.forEach(doc => Doc.RemoveDocFromList(targetDataDoc, this.annotationKey, doc));
-                return true;
+            const effectiveAcl = GetEffectiveAcl(this.dataDoc);
+            if (effectiveAcl === AclAdmin || effectiveAcl === AclEdit) {
+                const docs = doc instanceof Doc ? [doc] : doc;
+                docs.map(doc => doc.isPushpin = doc.annotationOn = undefined);
+                const targetDataDoc = this.dataDoc;
+                const value = DocListCast(targetDataDoc[this.annotationKey]);
+                const toRemove = value.filter(v => docs.includes(v));
+
+                if (toRemove.length !== 0) {
+                    const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc;
+                    toRemove.forEach(doc => {
+                        Doc.RemoveDocFromList(targetDataDoc, this.props.fieldKey + "-annotations", doc);
+                        recent && Doc.AddDocToList(recent, "data", doc, undefined, true, true);
+                        doc.deleted = true;
+                    });
+                    return true;
+                }
             }
 
             return false;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 552d504c0..fdf802c6a 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -197,17 +197,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
     @action
     onCloseClick = async (e: React.MouseEvent | undefined) => {
         if (!e?.button) {
-            const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc;
             const selected = SelectionManager.SelectedDocuments().slice();
             SelectionManager.DeselectAll();
-
-            selected.map(dv => {
-                const effectiveAcl = GetEffectiveAcl(dv.props.Document);
-                if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) { // deletes whatever you have the right to delete
-                    recent && Doc.AddDocToList(recent, "data", dv.props.Document, undefined, true, true);
-                    dv.props.removeDocument?.(dv.props.Document);
-                }
-            });
+            selected.map(dv => dv.props.removeDocument?.(dv.props.Document));
         }
     }
     @action
@@ -615,9 +607,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             return (null);
         }
         const canDelete = SelectionManager.SelectedDocuments().some(docView => {
-            const docAcl = GetEffectiveAcl(docView.props.Document);
-            const collectionAcl = GetEffectiveAcl(docView.props.ContainingCollectionDoc);
-            return [docAcl, collectionAcl].some(acl => [AclAdmin, AclEdit].includes(acl));
+            const collectionAcl = GetEffectiveAcl(docView.props.ContainingCollectionDoc?.[DataSym]);
+            return collectionAcl === AclAdmin || collectionAcl === AclEdit;
         });
         const minimal = bounds.r - bounds.x < 100 ? true : false;
         const maximizeIcon = minimal ? (
@@ -701,7 +692,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                             <div className="documentDecorations-iconifyButton" onPointerDown={this.onIconifyDown}>
                                 {"_"}
                             </div></Tooltip>}
-                    <Tooltip title={<><div className="dash-tooltip">Open Document In Tab</div></>} placement="top"><div className="documentDecorations-openInTab" onPointerDown={this.onMaximizeDown}>
+                    <Tooltip title={<><div className="dash-tooltip">Open In a New Pane</div></>} placement="top"><div className="documentDecorations-openInTab" onPointerDown={this.onMaximizeDown}>
                         {SelectionManager.SelectedDocuments().length === 1 ? <FontAwesomeIcon icon="external-link-alt" className="documentView-minimizedIcon" /> : "..."}
                     </div></Tooltip>
                     {rotButton}
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index fd9b04128..be6aa6be2 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -1,6 +1,6 @@
 import { action } from "mobx";
 import { DateField } from "../../fields/DateField";
-import { Doc, DocListCast, AclEdit, AclAdmin } from "../../fields/Doc";
+import { Doc, DocListCast } from "../../fields/Doc";
 import { Id } from "../../fields/FieldSymbols";
 import { InkTool } from "../../fields/InkField";
 import { List } from "../../fields/List";
@@ -23,7 +23,6 @@ import PDFMenu from "./pdf/PDFMenu";
 import { ContextMenu } from "./ContextMenu";
 import GroupManager from "../util/GroupManager";
 import { CollectionFreeFormViewChrome } from "./collections/CollectionMenu";
-import { GetEffectiveAcl } from "../../fields/util";
 
 const modifiers = ["control", "meta", "shift", "alt"];
 type KeyHandler = (keycode: string, e: KeyboardEvent) => KeyControlInfo | Promise<KeyControlInfo>;
@@ -120,16 +119,9 @@ export default class KeyManager {
                     }
                 }
 
-                const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc;
                 const selected = SelectionManager.SelectedDocuments().slice();
                 UndoManager.RunInBatch(() => {
-                    selected.map(dv => {
-                        const effectiveAcl = GetEffectiveAcl(dv.props.Document);
-                        if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) { // deletes whatever you have the right to delete
-                            recent && Doc.AddDocToList(recent, "data", dv.props.Document, undefined, true, true);
-                            dv.props.removeDocument?.(dv.props.Document);
-                        }
-                    });
+                    selected.map(dv => dv.props.removeDocument?.(dv.props.Document));
                 }, "delete");
                 SelectionManager.DeselectAll();
                 break;
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index f3fba82bc..a05a2b858 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -4,6 +4,8 @@
 .dash-tooltip {
     font-size: 11px;
     padding: 2px;
+    max-width: 150;
+    line-height: 150%;
 }
 
 .mainView-tabButtons {
@@ -157,7 +159,7 @@
 
     width: 60px;
     background-color: #121721;
-    height: calc(100% - 32px);
+    height: calc(100% - $searchpanel-height);
     //overflow-y: scroll;
     //overflow-x: hidden;
 
@@ -215,7 +217,7 @@
 
 .mainView-searchPanel {
     width: 100%;
-    height: 32px;
+    height: $searchpanel-height;
     background-color: black;
     color: white;
     text-align: center;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 43afb17bf..be8807336 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -41,7 +41,7 @@ import { ContextMenu } from './ContextMenu';
 import { DictationOverlay } from './DictationOverlay';
 import { DocumentDecorations } from './DocumentDecorations';
 import GestureOverlay from './GestureOverlay';
-import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
+import { ANTIMODEMENU_HEIGHT, SEARCH_PANEL_HEIGHT } from './globalCssVariables.scss';
 import KeyManager from './GlobalKeyHandler';
 import { LinkMenu } from './linking/LinkMenu';
 import "./MainView.scss";
@@ -50,7 +50,6 @@ import { AudioBox } from './nodes/AudioBox';
 import { DocumentLinksButton } from './nodes/DocumentLinksButton';
 import { DocumentView } from './nodes/DocumentView';
 import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
-import RichTextMenu from './nodes/formattedText/RichTextMenu';
 import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
 import { LinkDocPreview } from './nodes/LinkDocPreview';
 import { RadialMenu } from './nodes/RadialMenu';
@@ -59,7 +58,6 @@ import { OverlayView } from './OverlayView';
 import PDFMenu from './pdf/PDFMenu';
 import { PreviewCursor } from './PreviewCursor';
 import { Hypothesis } from '../util/HypothesisUtils';
-import { undoBatch } from '../util/UndoManager';
 import { WebBox } from './nodes/WebBox';
 import * as ReactDOM from 'react-dom';
 import { SearchBox } from './search/SearchBox';
@@ -67,6 +65,7 @@ import { SearchUtil } from '../util/SearchUtil';
 import { Networking } from '../Network';
 import * as rp from 'request-promise';
 import { LinkManager } from '../util/LinkManager';
+import RichTextMenu from './nodes/formattedText/RichTextMenu';
 
 @observer
 export class MainView extends React.Component {
@@ -168,7 +167,7 @@ export class MainView extends React.Component {
             }
         }
 
-        library.add(fa.faEdit, fa.faTrash, fa.faTrashAlt, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt,
+        library.add(fa.faEdit, fa.faTrash, fa.faTrashAlt, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt, fa.faCalendar,
             fa.faSquare, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, fa.faMapPin, fa.faFingerprint, fa.faCrosshairs, fa.faDesktop, fa.faUnlock,
             fa.faLock, fa.faLaptopCode, fa.faMale, fa.faCopy, fa.faHandPointRight, fa.faCompass, fa.faSnowflake, fa.faMicrophone, fa.faKeyboard,
             fa.faQuestion, fa.faTasks, fa.faPalette, fa.faAngleRight, fa.faBell, fa.faCamera, fa.faExpand, fa.faCaretDown, fa.faCaretLeft, fa.faCaretRight,
@@ -184,7 +183,7 @@ export class MainView extends React.Component {
             fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper,
             fa.faDesktop, fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle,
             fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft, fa.faAngleUp,
-            fa.faAngleDown, fa.faPlayCircle, fa.faClock, fa.faRocket, fa.faExchangeAlt, faBuffer);
+            fa.faAngleDown, fa.faPlayCircle, fa.faClock, fa.faRocket, fa.faExchangeAlt, faBuffer, fa.faHashtag, fa.faAlignJustify, fa.faCheckSquare, fa.faListUl);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
@@ -406,7 +405,7 @@ export class MainView extends React.Component {
         TraceMobx();
         const mainContainer = this.mainContainer;
         const width = this.flyoutWidth + this.propertiesWidth();
-        return <div className="mainContent-div" onDrop={this.onDrop} style={{ width: `calc(100% - ${width}px)`, height: `calc(100% - 32px)` }}>
+        return <div className="mainContent-div" onDrop={this.onDrop} style={{ width: `calc(100% - ${width}px)`, height: `calc(100% - ${SEARCH_PANEL_HEIGHT})` }}>
             {!mainContainer ? (null) : this.mainDocView}
         </div>;
     }
@@ -443,15 +442,13 @@ export class MainView extends React.Component {
             doc.dockingConfig ? this.openWorkspace(doc) :
                 CollectionDockingView.AddRightSplit(doc, libraryPath);
     }
-    sidebarScreenToLocal = () => new Transform(0, (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
-    //sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
-    mainContainerXf = () => this.sidebarScreenToLocal().translate(-55, -this._buttonBarHeight);
+    sidebarScreenToLocal = () => new Transform(0, (CollectionMenu.Instance.Pinned ? -35 : 0) - Number(SEARCH_PANEL_HEIGHT.replace("px", "")), 1);
+    mainContainerXf = () => this.sidebarScreenToLocal().translate(-58, 0);
 
-    @computed get closePosition() { return 55 + this.flyoutWidth; }
     @computed get flyout() {
         if (!this.sidebarContent) return null;
         return <div className="mainView-libraryFlyout">
-            <div className="mainView-contentArea" style={{ position: "relative", height: `calc(100% - 32px)`, width: "100%", overflow: "visible" }}>
+            <div className="mainView-contentArea" style={{ position: "relative", height: `calc(100% - ${SEARCH_PANEL_HEIGHT})`, width: "100%", overflow: "visible" }}>
                 {/* {this.flyoutWidth > 0 ? <div className="mainView-libraryFlyout-close"
                     onPointerDown={this.closeFlyout}>
                     <FontAwesomeIcon icon="times" color="black" size="lg" />
@@ -824,8 +821,8 @@ export class MainView extends React.Component {
             <DocumentDecorations />
             {this.search}
             <CollectionMenu />
-            <FormatShapePane />
             <div style={{ display: "none" }}><RichTextMenu key="rich" /></div>
+            <FormatShapePane />
             {LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
             {DocumentLinksButton.EditLink ? <LinkMenu docView={DocumentLinksButton.EditLink} addDocTab={DocumentLinksButton.EditLink.props.addDocTab} changeFlyout={emptyFunction} /> : (null)}
             {LinkDocPreview.LinkInfo ? <LinkDocPreview location={LinkDocPreview.LinkInfo.Location} backgroundColor={this.defaultBackgroundColors}
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 5e25ead87..2451ff55a 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -3,7 +3,7 @@ import { faArrowAltCircleDown, faArrowAltCircleRight, faArrowAltCircleUp, faChec
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { action, computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, DocListCast, AclEdit, AclAdmin } from "../../fields/Doc";
+import { Doc } from "../../fields/Doc";
 import { RichTextField } from '../../fields/RichTextField';
 import { Cast, NumCast, BoolCast } from "../../fields/Types";
 import { emptyFunction, setupMoveUpEvents, Utils } from "../../Utils";
@@ -30,7 +30,6 @@ import { undoBatch, UndoManager } from '../util/UndoManager';
 import { DocumentType } from '../documents/DocumentTypes';
 import { InkField } from '../../fields/InkField';
 import { PresBox } from './nodes/PresBox';
-import { GetEffectiveAcl } from "../../fields/util";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -432,16 +431,8 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @undoBatch
     @action
     deleteDocument = () => {
-        const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc;
         const selected = SelectionManager.SelectedDocuments().slice();
-
-        selected.map(dv => {
-            const effectiveAcl = GetEffectiveAcl(dv.props.Document);
-            if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) { // deletes whatever you have the right to delete
-                recent && Doc.AddDocToList(recent, "data", dv.props.Document, undefined, true, true);
-                dv.props.removeDocument?.(dv.props.Document);
-            }
-        });
+        selected.map(dv => dv.props.removeDocument?.(dv.props.Document));
         this.selectedDoc && (this.selectedDoc.deleted = true);
         this.selectedDocumentView?.props.ContainingCollectionView?.removeDocument(this.selectedDocumentView?.props.Document);
         SelectionManager.DeselectAll();
@@ -718,6 +709,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const isInk = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof InkField;
         const isCollection = this.selectedDoc.type === DocumentType.COL ? true : false;
         const isFreeForm = this.selectedDoc._viewType === "freeform" ? true : false;
+        const hasContext = this.selectedDoc.context ? true : false;
 
         return <div><div className="propertiesButtons" style={{ paddingBottom: "5.5px" }}>
             <div className="propertiesButtons-button">
@@ -732,7 +724,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons-button">
                 {this.pinWithViewButton}
             </div>
-            <div className="propertiesButtons-button">
+            <div className="propertiesButtons-button" style={{ display: hasContext ? "" : "none" }}>
                 {this.copyButton}
             </div>
             <div className="propertiesButtons-button">
@@ -750,6 +742,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons-button">
                 {this.sharingButton}
             </div>
+            <div className="propertiesButtons-button">
+                {this.contextButton}
+            </div>
             <div className="propertiesButtons-button" style={{ display: !considerPush ? "none" : "" }}>
                 {this.considerGoogleDocsPush}
             </div>
@@ -774,9 +769,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons-button" style={{ display: !isInk ? "none" : "" }}>
                 {this.maskButton}
             </div>
-            <div className="propertiesButtons-button">
-                {this.contextButton}
-            </div>
         </div>
         </div>;
     }
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index 3cf46dbed..e1b07077e 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -119,7 +119,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
             // transform: this.props.Document.linearViewIsExpanded ? "" : "rotate(45deg)"
         }}
             onPointerDown={e => e.stopPropagation()} >
-            <p>+</p>
+            <p>{BoolCast(this.props.Document.linearViewIsExpanded) ? "–" : "+"}</p>
         </label>;
 
         return <div className="collectionLinearView-outer">
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index b41cbe92d..8658212b7 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -315,6 +315,7 @@
     display: inline-flex;
     position: relative;
     align-items: center;
+    margin-left: 10px;
 
     .antimodeMenu-button {
         text-align: center;
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 33617c7ba..5119ff6c9 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -85,7 +85,8 @@ export default class CollectionMenu extends AntimodeMenu {
         const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Properties Panel" : "Open Properties Panel";
 
         const prop = <Tooltip title={<div className="dash-tooltip">{propTitle}</div>} key="properties" placement="bottom">
-            <button className="antimodeMenu-button" key="properties" onPointerDown={this.toggleProperties}>
+            <button className="antimodeMenu-button" key="properties" style={{ backgroundColor: "#424242" }}
+                onPointerDown={this.toggleProperties}>
                 <FontAwesomeIcon icon={propIcon} size="lg" />
             </button>
         </Tooltip>;
@@ -669,7 +670,7 @@ export class CollectionStackingViewChrome extends React.Component<CollectionMenu
     @computed get pivotField() { return StrCast(this.document._pivotField); }
 
     getKeySuggestions = async (value: string): Promise<string[]> => {
-        value = value.toLowerCase();
+        const val = value.toLowerCase();
         const docs = DocListCast(this.document[this.props.fieldKey]);
 
         if (Doc.UserDoc().noviceMode) {
@@ -677,7 +678,7 @@ export class CollectionStackingViewChrome extends React.Component<CollectionMenu
                 const keys = Object.keys(docs).filter(key => key.indexOf("title") >= 0 || key.indexOf("author") >= 0 ||
                     key.indexOf("creationDate") >= 0 || key.indexOf("lastModified") >= 0 ||
                     (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL" && key !== "UseCors" && key[0] !== "_"));
-                return keys.filter(key => key.toLowerCase().indexOf(value.toLowerCase()) > -1);
+                return keys.filter(key => key.toLowerCase().indexOf(val) > -1);
             } else {
                 const keys = new Set<string>();
                 docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key)));
@@ -685,16 +686,16 @@ export class CollectionStackingViewChrome extends React.Component<CollectionMenu
                     key.indexOf("author") >= 0 || key.indexOf("creationDate") >= 0 ||
                     key.indexOf("lastModified") >= 0 || (key[0].toUpperCase() === key[0] &&
                         key.substring(0, 3) !== "ACL" && key !== "UseCors" && key[0] !== "_"));
-                return noviceKeys.filter(key => key.toLowerCase().indexOf(value.toLowerCase()) > -1);
+                return noviceKeys.filter(key => key.toLowerCase().indexOf(val) > -1);
             }
         }
 
         if (docs instanceof Doc) {
-            return Object.keys(docs).filter(key => key.toLowerCase().startsWith(value));
+            return Object.keys(docs).filter(key => key.toLowerCase().indexOf(val) > -1);
         } else {
             const keys = new Set<string>();
             docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key)));
-            return Array.from(keys).filter(key => key.toLowerCase().startsWith(value));
+            return Array.from(keys).filter(key => key.toLowerCase().indexOf(val) > -1);
         }
     }
 
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index 20ae74b44..49d75e6de 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -166,15 +166,16 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         const contents = bing();
 
         if (positions !== undefined) {
-            StrCast(this.props.Document._searchString)
+            StrCast(this.props.Document._searchString);
             const length = StrCast(this.props.Document._searchString).length;
+            const color = contents ? "black" : "grey";
 
-            results.push(<span style={{ color: contents ? "black" : "grey" }}>{contents ? contents.slice(0, positions[0]) : "undefined"}</span>);
+            results.push(<span key="-1" style={{ color }}>{contents?.slice(0, positions[0])}</span>);
             positions.forEach((num, cur) => {
-                results.push(<span style={{ backgroundColor: "#FFFF00", color: contents ? "black" : "grey" }}>{contents ? contents.slice(num, num + length) : "undefined"}</span>);
+                results.push(<span key={"start" + cur} style={{ backgroundColor: "#FFFF00", color }}>{contents?.slice(num, num + length)}</span>);
                 let end = 0;
                 cur === positions.length - 1 ? end = contents.length : end = positions[cur + 1];
-                results.push(<span style={{ color: contents ? "black" : "grey" }}>{contents ? contents.slice(num + length, end) : "undefined"}</span>);
+                results.push(<span key={"end" + cur} style={{ color }}>{contents?.slice(num + length, end)}</span>);
             }
             );
             return results;
@@ -227,13 +228,12 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
 
         const onItemDown = async (e: React.PointerEvent) => {
             if (this.props.Document._searchDoc !== undefined) {
-                let doc = Doc.GetProto(this.props.rowProps.original);
+                const doc = Doc.GetProto(this.props.rowProps.original);
                 const aliasdoc = await SearchUtil.GetAliasesOfDocument(doc);
                 let targetContext = undefined;
                 if (aliasdoc.length > 0) {
                     targetContext = Cast(aliasdoc[0].context, Doc) as Doc;
                 }
-                console.log(targetContext);
                 DocumentManager.Instance.jumpToDocument(this.props.rowProps.original, false, undefined, targetContext);
             }
             else {
@@ -289,18 +289,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         const positions = [];
         if (StrCast(this.props.Document._searchString).toLowerCase() !== "") {
             const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
-            let term = "";
-            if (cfield !== undefined) {
-                if (cfield.Text !== undefined) {
-                    term = cfield.Text;
-                }
-                else if (StrCast(cfield)) {
-                    term = StrCast(cfield);
-                }
-                else {
-                    term = String(NumCast(cfield));
-                }
-            }
+            let term = Field.toString(cfield as Field);
             term = term.toLowerCase();
             const search = StrCast(this.props.Document._searchString).toLowerCase();
             let start = term.indexOf(search);
@@ -409,22 +398,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
                             :
                             this.returnHighlights(() => {
                                 const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey]));
-                                if (cfield !== undefined) {
-                                    // if (typeof(cfield)===RichTextField)
-                                    const a = cfield as RichTextField;
-                                    if (a.Text !== undefined) {
-                                        return (a.Text);
-                                    }
-                                    else if (StrCast(cfield)) {
-                                        return StrCast(cfield);
-                                    }
-                                    else {
-                                        return String(NumCast(cfield));
-                                    }
-                                }
-                                else {
-                                    return "";
-                                }
+                                return Field.toString(cfield as Field);
                             }, positions)
                         }
                     </div >
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index 8cc91b3da..c2bc7c77c 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -1,37 +1,23 @@
 import React = require("react");
-import { action, observable, computed } from "mobx";
-import { observer } from "mobx-react";
-import "./CollectionSchemaView.scss";
-import { faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faSortAmountDown, faSortAmountUp, faTimes, faImage, faListUl, faCalendar } from '@fortawesome/free-solid-svg-icons';
-import { library, IconProp } from "@fortawesome/fontawesome-svg-core";
+import { IconProp, library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { ColumnType } from "./CollectionSchemaView";
-import { faFile } from "@fortawesome/free-regular-svg-icons";
-import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHeaderField";
-import { undoBatch } from "../../util/UndoManager";
-import { Transform } from '../../util/Transform';
-import { Doc, DocListCast, Field, Opt } from "../../../fields/Doc";
-import { StrCast, Cast } from "../../../fields/Types";
-import { optionFocusAriaMessage } from "react-select/src/accessibility";
-import { TraceMobx } from "../../../fields/util";
-import { CollectionTreeView } from "./CollectionTreeView";
-import { returnEmptyFilter, returnFalse, emptyPath, returnZero, emptyFunction, returnOne } from "../../../Utils";
-import { RichTextField } from "../../../fields/RichTextField";
-import { Docs } from "../../documents/Documents";
-import { List } from "../../../fields/List";
+import { action, computed, observable, runInAction } from "mobx";
+import { observer } from "mobx-react";
+import { Doc, DocListCast, Opt } from "../../../fields/Doc";
 import { listSpec } from "../../../fields/Schema";
-import { ScriptField, ComputedField } from "../../../fields/ScriptField";
-import { DocumentType } from "../../documents/DocumentTypes";
-import { CollectionView } from "./CollectionView";
+import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField";
+import { ScriptField } from "../../../fields/ScriptField";
+import { Cast, StrCast } from "../../../fields/Types";
+import { undoBatch } from "../../util/UndoManager";
 import { SearchBox } from "../search/SearchBox";
-import { createParameter } from "typescript";
+import { ColumnType } from "./CollectionSchemaView";
+import "./CollectionSchemaView.scss";
+import { CollectionView } from "./CollectionView";
 
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
 
-library.add(faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faFile as any, faSortAmountDown, faSortAmountUp, faTimes, faImage, faListUl, faCalendar);
-
 export interface HeaderProps {
     keyValue: SchemaHeaderField;
     possibleKeys: string[];
@@ -50,7 +36,7 @@ export interface HeaderProps {
 export class CollectionSchemaHeader extends React.Component<HeaderProps> {
     render() {
         const icon: IconProp = this.props.keyType === ColumnType.Number ? "hashtag" : this.props.keyType === ColumnType.String ? "font" :
-            this.props.keyType === ColumnType.Boolean ? "check-square" : this.props.keyType === ColumnType.Doc ? "file" :
+            this.props.keyType === ColumnType.Boolean ? "check-square" : this.props.keyType === ColumnType.Doc ? "sort-amount-down" :
                 this.props.keyType === ColumnType.Image ? "image" : this.props.keyType === ColumnType.List ? "list-ul" : this.props.keyType === ColumnType.Date ? "calendar" :
                     "align-justify";
         return (
@@ -253,18 +239,6 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
     renderContent = () => {
         return (
             <div className="collectionSchema-header-menuOptions">
-                <div className="collectionSchema-headerMenu-group">
-                    <label>Key:</label>
-                    <KeysDropdown
-                        keyValue={this.props.columnField.heading}
-                        possibleKeys={this.props.possibleKeys}
-                        existingKeys={this.props.existingKeys}
-                        canAddNew={true}
-                        addNew={this.props.addNew}
-                        onSelect={this.props.onSelect}
-                        setIsEditing={this.props.setIsEditing}
-                    />
-                </div>
                 {this.props.onlyShowOptions ? <></> :
                     <>
                         {this.renderTypes()}
@@ -301,12 +275,15 @@ export interface KeysDropdownProps {
     setIsEditing: (isEditing: boolean) => void;
     width?: string;
     docs?: Doc[];
-    Document?: Doc;
-    dataDoc?: Doc;
-    fieldKey?: string;
-    ContainingCollectionDoc?: Doc;
-    ContainingCollectionView?: CollectionView;
+    Document: Doc;
+    dataDoc: Doc | undefined;
+    fieldKey: string;
+    ContainingCollectionDoc: Doc | undefined;
+    ContainingCollectionView: Opt<CollectionView>;
     active?: (outsideReaction?: boolean) => boolean;
+    openHeader: (column: any, screenx: number, screeny: number) => void;
+    col: SchemaHeaderField;
+    icon: IconProp;
 }
 @observer
 export class KeysDropdown extends React.Component<KeysDropdownProps> {
@@ -322,40 +299,24 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
 
     @action
     onSelect = (key: string): void => {
-        if (this._searchTerm.includes(":")) {
-            const colpos = this._searchTerm.indexOf(":");
-            const filter = this._searchTerm.slice(colpos + 1, this._searchTerm.length);
-            //const filter = key.slice(this._key.length - key.length);
-            this.props.onSelect(this._key, this._key, this.props.addNew, filter);
-        }
-        else {
-            this.props.onSelect(this._key, key, this.props.addNew);
-            this.setKey(key);
-            this._isOpen = false;
-            this.props.setIsEditing(false);
-        }
-    }
-
-    @action
-    onSelectValue = (key: string): void => {
-        const colpos = this._searchTerm.indexOf(":");
-        this.onSelect(key);
-        this._searchTerm = this._searchTerm.slice(0, colpos + 1) + key;
+        this.props.onSelect(this._key, key, this.props.addNew);
+        this.setKey(key);
         this._isOpen = false;
-        this.props.onSelect(this._key, this._key, this.props.addNew, key);
-
+        this.props.setIsEditing(false);
     }
 
     @undoBatch
     onKeyDown = (e: React.KeyboardEvent): void => {
         if (e.key === "Enter") {
             let keyOptions = this._searchTerm === "" ? this.props.possibleKeys : this.props.possibleKeys.filter(key => key.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1);
-            let blockedkeys = ["_scrollTop", "customTitle", "limitHeight", "proto", "x", "y", "_width", "_height", "_autoHeight", "_fontSize", "_fontFamily", "context", "zIndex", "_timeStampOnEnter", "lines", "highlighting", "searchMatch", "creationDate", "isPrototype", "text-annotations", "aliases", "text-lastModified", "text-noTemplate", "layoutKey", "baseProto", "_xMargin", "_yMargin", "layout", "layout_keyValue", "links"];
+            const blockedkeys = ["_scrollTop", "customTitle", "limitHeight", "proto", "x", "y", "_width", "_height", "_autoHeight", "_fontSize", "_fontFamily", "context", "zIndex", "_timeStampOnEnter", "lines", "highlighting", "searchMatch", "creationDate", "isPrototype", "text-annotations", "aliases", "text-lastModified", "text-noTemplate", "layoutKey", "baseProto", "_xMargin", "_yMargin", "layout", "layout_keyValue", "links"];
             keyOptions = keyOptions.filter(n => !blockedkeys.includes(n));
             if (keyOptions.length) {
                 this.onSelect(keyOptions[0]);
+                console.log("case1");
             } else if (this._searchTerm !== "" && this.props.canAddNew) {
                 this.setSearchTerm(this._searchTerm || this._key);
+                console.log("case2");
                 this.onSelect(this._searchTerm);
             }
         }
@@ -400,7 +361,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         const exactFound = keyOptions.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1 ||
             this.props.existingKeys.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1;
 
-        let blockedkeys = ["proto", "x", "y", "_width", "_height", "_autoHeight", "_fontSize", "_fontFamily", "context", "zIndex", "_timeStampOnEnter", "lines", "highlighting", "searchMatch", "creationDate", "isPrototype", "text-annotations", "aliases", "text-lastModified", "text-noTemplate", "layoutKey", "baseProto", "_xMargin", "_yMargin", "layout", "layout_keyValue", "links"];
+        const blockedkeys = ["proto", "x", "y", "_width", "_height", "_autoHeight", "_fontSize", "_fontFamily", "context", "zIndex", "_timeStampOnEnter", "lines", "highlighting", "searchMatch", "creationDate", "isPrototype", "text-annotations", "aliases", "text-lastModified", "text-noTemplate", "layoutKey", "baseProto", "_xMargin", "_yMargin", "layout", "layout_keyValue", "links"];
         keyOptions = keyOptions.filter(n => !blockedkeys.includes(n));
 
         const options = keyOptions.map(key => {
@@ -412,7 +373,9 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         });
 
         // if search term does not already exist as a group type, give option to create new group type
+
         if (this._key !== this._searchTerm.slice(0, this._key.length)) {
+            console.log("little further");
             if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) {
                 options.push(<div key={""} className="key-option" style={{
                     border: "1px solid lightgray", width: this.props.width, maxWidth: this.props.width, overflowX: "hidden", background: "white",
@@ -427,7 +390,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         }
         else {
             if (this.props.docs) {
-                let panesize = this.props.docs.length * 30;
+                const panesize = this.props.docs.length * 30;
                 options.length * 20 + 8 - 10 > panesize ? this.defaultMenuHeight = panesize : this.defaultMenuHeight = options.length * 20 + 8;
             }
             else {
@@ -436,27 +399,37 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         }
         return options;
     }
+
+    docSafe: Doc[] = [];
+
     @action
     renderFilterOptions = (): JSX.Element[] | JSX.Element => {
         if (!this._isOpen) {
             this.defaultMenuHeight = 0;
             return <></>;
         }
-        let keyOptions: string[] = [];
-        const colpos = this._searchTerm.indexOf(":");
-        const temp = this._searchTerm.slice(colpos + 1, this._searchTerm.length);
-        let docs = DocListCast(this.props.dataDoc![this.props.fieldKey!]);
+        const keyOptions: string[] = [];
+        if (this.docSafe.length === 0) {
+            this.docSafe = DocListCast(this.props.dataDoc![this.props.fieldKey]);
+        }
+        const docs = this.docSafe;
         docs.forEach((doc) => {
             const key = StrCast(doc[this._key]);
-            if (keyOptions.includes(key) === false && key.includes(temp)) {
+            if (keyOptions.includes(key) === false) {
                 keyOptions.push(key);
             }
         });
 
+        const filters = Cast(this.props.Document._docFilters, listSpec("string"));
+        for (let i = 0; i < (filters?.length ?? 0) - 1; i += 3) {
+            if (filters![i] === this.props.col.heading && keyOptions.includes(filters![i + 1]) === false) {
+                keyOptions.push(filters![i + 1]);
+            }
+        }
+
         const options = keyOptions.map(key => {
             //Doc.setDocFilter(this.props.Document!, this._key, key, undefined);
             let bool = false;
-            let filters = Cast(this.props.Document!._docFilters, listSpec("string"));
             console.log(filters);
             if (filters !== undefined) {
                 bool = filters.includes(key) && filters[filters.indexOf(key) + 1] === "check";
@@ -467,7 +440,10 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                 width: this.props.width, maxWidth: this.props.width, overflowX: "hidden", background: "white", backgroundColor: "white",
             }}
             >
-                <input type="checkbox" onChange={(e) => { e.target.checked === true ? Doc.setDocFilter(this.props.Document!, this._key, key, "check") : Doc.setDocFilter(this.props.Document!, this._key, key, undefined); e.target.checked === true && SearchBox.Instance.filter === true ? Doc.setDocFilter(docs![0], this._key, key, "check") : Doc.setDocFilter(docs![0], this._key, key, undefined); }}
+                <input type="checkbox" onChange={(e) => {
+                    e.target.checked === true ? Doc.setDocFilter(this.props.Document, this._key, key, "check") : Doc.setDocFilter(this.props.Document, this._key, key, undefined);
+                    e.target.checked === true && SearchBox.Instance.filter === true ? Doc.setDocFilter(docs[0], this._key, key, "check") : Doc.setDocFilter(docs[0], this._key, key, undefined);
+                }}
                     checked={bool} ></input>
                 <span style={{ paddingLeft: 4 }}>
                     {key}
@@ -480,7 +456,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         }
         else {
             if (this.props.docs) {
-                let panesize = this.props.docs.length * 30;
+                const panesize = this.props.docs.length * 30;
                 options.length * 20 + 8 - 10 > panesize ? this.defaultMenuHeight = panesize : this.defaultMenuHeight = options.length * 20 + 8;
             }
             else {
@@ -488,107 +464,12 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
             }
 
         }
-
         return options;
     }
 
-
-    // @action
-    // renderFilterOptions = (): JSX.Element[] | JSX.Element => {
-    //     this.facetClick(this._key);
-    //     return <div>
-    //         {this.filterView}
-    //     </div>
-    // }
     @observable defaultMenuHeight = 0;
 
 
-    facetClick = (facetHeader: string) => {
-        facetHeader = this._key;
-        let newFacet: Opt<Doc>;
-        if (this.props.Document !== undefined) {
-            const facetCollection = this.props.Document;
-            // const found = DocListCast(facetCollection[this.props.fieldKey + "-filter"]).findIndex(doc => doc.title === facetHeader);
-            // if (found !== -1) {
-            //     console.log("found not n-1");
-            //     (facetCollection[this.props.fieldKey + "-filter"] as List<Doc>).splice(found, 1);
-            //     const docFilter = Cast(this.props.Document._docFilters, listSpec("string"));
-            //     if (docFilter) {
-            //         let index: number;
-            //         while ((index = docFilter.findIndex(item => item === facetHeader)) !== -1) {
-            //             docFilter.splice(index, 3);
-            //         }
-            //     }
-            //     const docRangeFilters = Cast(this.props.Document._docRangeFilters, listSpec("string"));
-            //     if (docRangeFilters) {
-            //         let index: number;
-            //         while ((index = docRangeFilters.findIndex(item => item === facetHeader)) !== -1) {
-            //             docRangeFilters.splice(index, 3);
-            //         }
-            //     }
-            // }
-
-
-
-            console.log("found is n-1");
-            const allCollectionDocs = DocListCast(this.props.dataDoc![this.props.fieldKey!]);
-            var rtfields = 0;
-            const facetValues = Array.from(allCollectionDocs.reduce((set, child) => {
-                const field = child[facetHeader] as Field;
-                const fieldStr = Field.toString(field);
-                if (field instanceof RichTextField || (typeof (field) === "string" && fieldStr.split(" ").length > 2)) rtfields++;
-                return set.add(fieldStr);
-            }, new Set<string>()));
-
-            let nonNumbers = 0;
-            let minVal = Number.MAX_VALUE, maxVal = -Number.MAX_VALUE;
-            facetValues.map(val => {
-                const num = Number(val);
-                if (Number.isNaN(num)) {
-                    nonNumbers++;
-                } else {
-                    minVal = Math.min(num, minVal);
-                    maxVal = Math.max(num, maxVal);
-                }
-            });
-            if (facetHeader === "text" || rtfields / allCollectionDocs.length > 0.1) {
-                console.log("Case1");
-                newFacet = Docs.Create.TextDocument("", { _width: 100, _height: 25, treeViewExpandedView: "layout", title: facetHeader, treeViewOpen: true, forceActive: true, ignoreClick: true });
-                Doc.GetProto(newFacet).type = DocumentType.COL; // forces item to show an open/close button instead ofa checkbox
-                newFacet.target = this.props.Document;
-                newFacet._textBoxPadding = 4;
-                const scriptText = `setDocFilter(this.target, "${facetHeader}", text, "match")`;
-                newFacet.onTextChanged = ScriptField.MakeScript(scriptText, { this: Doc.name, text: "string" });
-            } else if (nonNumbers / facetValues.length < .1) {
-                console.log("Case2");
-                newFacet = Docs.Create.SliderDocument({ title: facetHeader, treeViewExpandedView: "layout", treeViewOpen: true });
-                const newFacetField = Doc.LayoutFieldKey(newFacet);
-                const ranged = Doc.readDocRangeFilter(this.props.Document, facetHeader);
-                Doc.GetProto(newFacet).type = DocumentType.COL; // forces item to show an open/close button instead ofa checkbox
-                const extendedMinVal = minVal - Math.min(1, Math.abs(maxVal - minVal) * .05);
-                const extendedMaxVal = maxVal + Math.min(1, Math.abs(maxVal - minVal) * .05);
-                newFacet[newFacetField + "-min"] = ranged === undefined ? extendedMinVal : ranged[0];
-                newFacet[newFacetField + "-max"] = ranged === undefined ? extendedMaxVal : ranged[1];
-                Doc.GetProto(newFacet)[newFacetField + "-minThumb"] = extendedMinVal;
-                Doc.GetProto(newFacet)[newFacetField + "-maxThumb"] = extendedMaxVal;
-                newFacet.target = this.props.Document;
-                const scriptText = `setDocFilterRange(this.target, "${facetHeader}", range)`;
-                newFacet.onThumbChanged = ScriptField.MakeScript(scriptText, { this: Doc.name, range: "number" });
-                Doc.AddDocToList(facetCollection, this.props.fieldKey + "-filter", newFacet);
-            } else {
-                console.log("Case3");
-                newFacet = new Doc();
-                newFacet.title = facetHeader;
-                newFacet.treeViewOpen = true;
-                newFacet.type = DocumentType.COL;
-                const capturedVariables = { layoutDoc: this.props.Document, dataDoc: this.props.dataDoc! };
-                this.props.Document.data = ComputedField.MakeFunction(`readFacetData(layoutDoc, dataDoc, "${this.props.fieldKey}", "${facetHeader}")`, {}, capturedVariables);
-                // this.props.Document.data
-            }
-            //newFacet && Doc.AddDocToList(facetCollection, this.props.fieldKey + "-filter", newFacet);
-        }
-    }
-
 
     get ignoreFields() { return ["_docFilters", "_docRangeFilters"]; }
 
@@ -600,82 +481,27 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
     }
     filterBackground = () => "rgba(105, 105, 105, 0.432)";
 
-
-    // @computed get filterView() {
-    //     TraceMobx();
-    //     if (this.props.Document !== undefined) {
-    //         //const facetCollection = this.props.Document;
-    //         // const flyout = (
-    //         //     <div className="collectionTimeView-flyout" style={{ width: `${this.facetWidth()}`, height: this.props.PanelHeight() - 30 }} onWheel={e => e.stopPropagation()}>
-    //         //         {this._allFacets.map(facet => <label className="collectionTimeView-flyout-item" key={`${facet}`} onClick={e => this.facetClick(facet)}>
-    //         //             <input type="checkbox" onChange={e => { }} checked={DocListCast(this.props.Document[this.props.fieldKey + "-filter"]).some(d => d.title === facet)} />
-    //         //             <span className="checkmark" />
-    //         //             {facet}
-    //         //         </label>)}
-    //         //     </div>
-    //         // );
-    //         return <div className="altcollectionTimeView-treeView">
-    //             <div className="altcollectionTimeView-tree" key="tree">
-    //                 <CollectionTreeView
-    //                     PanelPosition={""}
-    //                     Document={this.props.Document}
-    //                     DataDoc={this.props.Document}
-    //                     fieldKey={this.props.fieldKey!}
-    //                     CollectionView={undefined}
-    //                     docFilters={returnEmptyFilter}
-    //                     ContainingCollectionDoc={this.props.ContainingCollectionDoc!}
-    //                     ContainingCollectionView={this.props.ContainingCollectionView!}
-    //                     PanelWidth={() => 200}
-    //                     PanelHeight={() => 200}
-    //                     NativeHeight={returnZero}
-    //                     NativeWidth={returnZero}
-    //                     LibraryPath={emptyPath}
-    //                     rootSelected={returnFalse}
-    //                     renderDepth={1}
-    //                     dropAction={undefined}
-    //                     ScreenToLocalTransform={Transform.Identity}
-    //                     addDocTab={returnFalse}
-    //                     pinToPres={returnFalse}
-    //                     isSelected={returnFalse}
-    //                     select={returnFalse}
-    //                     bringToFront={emptyFunction}
-    //                     active={this.props.active!}
-    //                     whenActiveChanged={returnFalse}
-    //                     treeViewHideTitle={true}
-    //                     ContentScaling={returnOne}
-    //                     focus={returnFalse}
-    //                     treeViewHideHeaderFields={true}
-    //                     onCheckedClick={this.scriptField}
-    //                     ignoreFields={this.ignoreFields}
-    //                     annotationsKey={""}
-    //                     dontRegisterView={true}
-    //                     backgroundColor={this.filterBackground}
-    //                     moveDocument={returnFalse}
-    //                     removeDocument={returnFalse}
-    //                     addDocument={returnFalse} />
-    //             </div>
-    //         </div>;
-    //     }
-    // }
-
+    @observable filterOpen: boolean | undefined = undefined;
     render() {
         return (
-            <div className="keys-dropdown" style={{ zIndex: 10, width: this.props.width, maxWidth: this.props.width }}>
-                <input className="keys-search" style={{ width: "100%" }}
-                    ref={this._inputRef} type="text" value={this._searchTerm} placeholder="Column key" onKeyDown={this.onKeyDown}
-                    onChange={e => this.onChange(e.target.value)}
-                    onClick={(e) => {
-                        //this._inputRef.current!.select();
-                        e.stopPropagation();
-                    }} onFocus={this.onFocus} onBlur={this.onBlur}></input>
-                <div className="keys-options-wrapper" style={{
-                    width: this.props.width, maxWidth: this.props.width, height: "auto",
-                }}
-                    onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
-                    {this._searchTerm.includes(":") ?
-                        this.renderFilterOptions() : this.renderOptions()}
-                </div>
-            </div >
+            <div style={{ display: "flex" }}>
+                <FontAwesomeIcon onClick={e => { this.props.Document._searchDoc ? runInAction(() => { this._isOpen === undefined ? this._isOpen = true : this._isOpen = !this._isOpen; }) : this.props.openHeader(this.props.col, e.clientX, e.clientY); }} icon={this.props.icon} size="lg" style={{ display: "inline", paddingBottom: "1px", paddingTop: "4px", cursor: "hand" }} />
+                <div className="keys-dropdown" style={{ zIndex: 10, width: this.props.width, maxWidth: this.props.width }}>
+                    <input className="keys-search" style={{ width: "100%" }}
+                        ref={this._inputRef} type="text" value={this._searchTerm} placeholder="Column key" onKeyDown={this.onKeyDown}
+                        onChange={e => this.onChange(e.target.value)}
+                        onClick={(e) => {
+                            //this._inputRef.current!.select();
+                            e.stopPropagation();
+                        }} onFocus={this.onFocus} onBlur={this.onBlur}></input>
+                    <div className="keys-options-wrapper" style={{
+                        width: this.props.width, maxWidth: this.props.width, height: "auto",
+                    }}
+                        onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
+                        {this._key === this._searchTerm ? this.renderFilterOptions() : this.renderOptions()}
+                    </div>
+                </div >
+            </div>
         );
     }
 }
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 3f879b489..892148cd7 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -74,11 +74,11 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         let searchx = 0;
         let searchy = 0;
         if (this.props.Document._searchDoc !== undefined) {
-            let el = document.getElementsByClassName("collectionSchemaView-searchContainer")[0];
+            const el = document.getElementsByClassName("collectionSchemaView-searchContainer")[0];
             if (el !== undefined) {
-                let rect = el.getBoundingClientRect();
+                const rect = el.getBoundingClientRect();
                 searchx = rect.x;
-                searchy = rect.y
+                searchy = rect.y;
             }
         }
         const x = Math.max(0, Math.min(document.body.clientWidth - this._menuWidth, this._pointerX)) - searchx;
@@ -366,17 +366,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @action
     closeHeader = () => { this._headerOpen = false; }
 
-    renderKeysDropDown = (col: any) => {
-        return <KeysDropdown
-            keyValue={col.heading}
-            possibleKeys={this.possibleKeys}
-            existingKeys={this.columns.map(c => c.heading)}
-            canAddNew={true}
-            addNew={false}
-            onSelect={this.changeColumns}
-            setIsEditing={this.setHeaderIsEditing}
-        />;
-    }
+
 
     @undoBatch
     @action
@@ -415,10 +405,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @computed get renderMenuContent() {
         TraceMobx();
         return <div className="collectionSchema-header-menuOptions">
-            <div className="collectionSchema-headerMenu-group">
-                <label>Key:</label>
-                {this.renderKeysDropDown(this._col)}
-            </div>
             {this.renderTypes(this._col)}
             {this.renderSorting(this._col)}
             {this.renderColors(this._col)}
@@ -434,7 +420,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         super.CreateDropTarget(ele);
     }
 
-    isFocused = (doc: Doc): boolean => this.props.isSelected() && doc === this._focusedTable;
+    isFocused = (doc: Doc, outsideReaction: boolean): boolean => this.props.isSelected(outsideReaction) && doc === this._focusedTable;
 
     @action setFocused = (doc: Doc) => this._focusedTable = doc;
 
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 7957ded1c..3f2ad47a5 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -126,7 +126,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
 
             const docs = rawdocs.filter(d => !(d instanceof Promise)).map(d => d as Doc);
             const viewSpecScript = Cast(this.props.Document.viewSpecScript, ScriptField);
-            let childDocs = viewSpecScript ? docs.filter(d => viewSpecScript.script.run({ doc: d }, console.log).result) : docs;
+            const childDocs = viewSpecScript ? docs.filter(d => viewSpecScript.script.run({ doc: d }, console.log).result) : docs;
 
             let searchDocs = DocListCast(this.props.Document._searchDocs);
 
@@ -137,7 +137,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
                 docsforFilter = [];
                 const docRangeFilters = this.props.ignoreFields?.includes("_docRangeFilters") ? [] : Cast(this.props.Document._docRangeFilters, listSpec("string"), []);
                 console.log(searchDocs);
-                searchDocs = DocUtils.FilterDocs(searchDocs, this.docFilters(), docRangeFilters, viewSpecScript)
+                searchDocs = DocUtils.FilterDocs(searchDocs, this.docFilters(), docRangeFilters, viewSpecScript);
                 console.log(this.docFilters());
                 console.log(searchDocs);
                 childDocs.forEach((d) => {
@@ -172,8 +172,6 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
                 });
                 return docsforFilter;
             }
-            console.log("you fool");
-            console.log(childDocs);
             const docRangeFilters = this.props.ignoreFields?.includes("_docRangeFilters") ? [] : Cast(this.props.Document._docRangeFilters, listSpec("string"), []);
             return this.props.Document.dontRegisterView ? childDocs : DocUtils.FilterDocs(childDocs, this.docFilters(), docRangeFilters, viewSpecScript);
         }
@@ -242,6 +240,8 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
                             Doc.AreProtosEqual(Cast(movedDocs[0].annotationOn, Doc, null), this.props.Document);
                         added = docDragData.moveDocument(movedDocs, this.props.Document, canAdd ? this.addDocument : returnFalse);
                     } else added = res;
+                    !added && alert("You don't have permission to perform this move");
+                    e.stopPropagation();
                 } else {
                     ScriptCast(this.props.Document.dropConverter)?.script.run({ dragData: docDragData });
                     added = this.addDocument(docDragData.droppedDocuments);
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 6768c6df9..9e17f1fcb 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -478,7 +478,7 @@ class TreeView extends React.Component<TreeViewProps> {
             </div >
             {headerElements}
             <div className="treeViewItem-openRight" onClick={this.openRight}>
-                <FontAwesomeIcon title="open in pane on right" icon="external-link-alt" size="sm" />
+                <FontAwesomeIcon title="open in a new pane" icon="external-link-alt" size="sm" />
             </div>
         </>;
     }
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index fe30cb05a..7562d7e9c 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -142,7 +142,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
         const targetDataDoc = this.props.Document[DataSym];
         const docList = DocListCast(targetDataDoc[this.props.fieldKey]);
         const added = docs.filter(d => !docList.includes(d));
-        const effectiveAcl = GetEffectiveAcl(this.props.Document);
+        const effectiveAcl = GetEffectiveAcl(this.props.Document[DataSym]);
 
         if (added.length) {
             if (effectiveAcl === AclPrivate || effectiveAcl === AclReadonly) {
@@ -193,16 +193,19 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
 
     @action.bound
     removeDocument = (doc: any): boolean => {
-        const collectionEffectiveAcl = GetEffectiveAcl(this.props.Document);
-        const docEffectiveAcl = GetEffectiveAcl(doc);
-        // you can remove the document if you either have Admin/Edit access to the collection or to the specific document
-        if (collectionEffectiveAcl === AclEdit || collectionEffectiveAcl === AclAdmin || docEffectiveAcl === AclAdmin || docEffectiveAcl === AclEdit) {
+        const effectiveAcl = GetEffectiveAcl(this.props.Document[DataSym]);
+        if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) {
             const docs = doc instanceof Doc ? [doc] : doc as Doc[];
             const targetDataDoc = this.props.Document[DataSym];
             const value = DocListCast(targetDataDoc[this.props.fieldKey]);
             const toRemove = value.filter(v => docs.includes(v));
             if (toRemove.length !== 0) {
-                toRemove.forEach(doc => Doc.RemoveDocFromList(targetDataDoc, this.props.fieldKey, doc));
+                const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc;
+                toRemove.forEach(doc => {
+                    Doc.RemoveDocFromList(targetDataDoc, this.props.fieldKey, doc);
+                    recent && Doc.AddDocToList(recent, "data", doc, undefined, true, true);
+                    doc.deleted = true;
+                });
                 return true;
             }
         }
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index 4c8cac3ed..149d4927b 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -15,6 +15,7 @@ import { faCog, faChevronCircleUp } from "@fortawesome/free-solid-svg-icons";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { DocumentView } from "../nodes/DocumentView";
 import { SelectionManager } from "../../util/SelectionManager";
+import { Tooltip } from "@material-ui/core";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -121,16 +122,17 @@ export class DockingViewButtonSelector extends React.Component<{ views: () => Do
     }
 
     render() {
-        return <span title="Tap for menu, drag tab as document"
-            onPointerDown={e => {
+        return <Tooltip title={<><div className="dash-tooltip">Tap for toolbar, drag to create alias in another pane</div></>} placement="bottom">
+            <span onPointerDown={e => {
                 if (getComputedStyle(this._ref.current!).width !== "100%") {
                     e.stopPropagation(); e.preventDefault();
                 }
                 this.props.views()[0]?.select(false);
             }} className="buttonSelector">
-            <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.flyout} stylesheet={this.customStylesheet}>
-                <FontAwesomeIcon icon={"arrows-alt"} size={"sm"} />
-            </Flyout>
-        </span>;
+                <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.flyout} stylesheet={this.customStylesheet}>
+                    <FontAwesomeIcon icon={"arrows-alt"} size={"sm"} />
+                </Flyout>
+            </span>
+        </Tooltip>;
     }
 }
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index d8756aae3..8bf5a0475 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -63,12 +63,12 @@ export interface SchemaTableProps {
     addDocument: (document: Doc | Doc[]) => boolean;
     moveDocument: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean;
     ScreenToLocalTransform: () => Transform;
-    active: (outsideReaction: boolean) => boolean;
+    active: (outsideReaction: boolean | undefined) => boolean;
     onDrop: (e: React.DragEvent<Element>, options: DocumentOptions, completed?: (() => void) | undefined) => void;
     addDocTab: (document: Doc, where: string) => boolean;
     pinToPres: (document: Doc) => void;
     isSelected: (outsideReaction?: boolean) => boolean;
-    isFocused: (document: Doc) => boolean;
+    isFocused: (document: Doc, outsideReaction: boolean) => boolean;
     setFocused: (document: Doc) => void;
     setPreviewDoc: (document: Doc) => void;
     columns: SchemaHeaderField[];
@@ -155,7 +155,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
 
         const possibleKeys = this.props.documentKeys.filter(key => this.props.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1);
         const columns: Column<Doc>[] = [];
-        const tableIsFocused = this.props.isFocused(this.props.Document);
+        const tableIsFocused = this.props.isFocused(this.props.Document, false);
         const focusedRow = this._focusedCell.row;
         const focusedCol = this._focusedCell.col;
         const isEditable = !this.props.headerIsEditing;
@@ -177,9 +177,14 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                 }
             );
         }
-        this.props.active
+        this.props.active;
 
         const cols = this.props.columns.map(col => {
+            const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" :
+                this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" :
+                    this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" :
+                        this.getColumnType(col) === ColumnType.Date ? "calendar" : "align-justify";
+
             const keysDropdown = <KeysDropdown
                 keyValue={col.heading}
                 possibleKeys={possibleKeys}
@@ -195,26 +200,14 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                 ContainingCollectionDoc={this.props.ContainingCollectionDoc}
                 ContainingCollectionView={this.props.ContainingCollectionView}
                 active={this.props.active}
-
-
+                openHeader={this.props.openHeader}
+                icon={icon}
+                col={col}
                 // try commenting this out
                 width={"100%"}
             />;
 
-            const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" :
-                this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" :
-                    this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" :
-                        this.getColumnType(col) === ColumnType.Date ? "calendar" : "align-justify";
 
-            const headerText = this._showTitleDropdown ? keysDropdown : <div
-                onClick={this.changeTitleMode}
-                style={{
-                    background: col.color, padding: "2px",
-                    letterSpacing: "2px",
-                    textTransform: "uppercase",
-                    display: "flex"
-                }}>
-                {col.heading}</div>;
 
             const sortIcon = col.desc === undefined ? "caret-right" : col.desc === true ? "caret-down" : "caret-up";
 
@@ -226,11 +219,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                         background: col.color, padding: "2px",
                         display: "flex", cursor: "default", height: "100%",
                     }}>
-                    <FontAwesomeIcon onClick={e => this.props.openHeader(col, e.clientX, e.clientY)} icon={icon} size="lg" style={{ display: "inline", paddingBottom: "1px", paddingTop: "4px", cursor: "hand" }} />
-                    {/* <div className="keys-dropdown"
-                        style={{ display: "inline", zIndex: 1000 }}> */}
+                    {/* <FontAwesomeIcon onClick={e => this.props.openHeader(col, e.clientX, e.clientY)} icon={icon} size="lg" style={{ display: "inline", paddingBottom: "1px", paddingTop: "4px", cursor: "hand" }} /> */}
                     {keysDropdown}
-                    {/* </div> */}
                     <div onClick={e => this.changeSorting(col)}
                         style={{ width: 21, padding: 1, display: "inline", zIndex: 1, background: "inherit", cursor: "hand" }}>
                         <FontAwesomeIcon icon={sortIcon} size="lg" />
@@ -352,7 +342,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             addDoc: this.tableAddDoc,
             removeDoc: this.props.deleteDocument,
             rowInfo,
-            rowFocused: !this.props.headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document),
+            rowFocused: !this.props.headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document, true),
             textWrapRow: this.toggleTextWrapRow,
             rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1,
             dropAction: StrCast(this.props.Document.childDropAction),
@@ -366,7 +356,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         const row = rowInfo.index;
         //@ts-ignore
         const col = this.columns.map(c => c.heading).indexOf(column!.id);
-        const isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.props.isFocused(this.props.Document);
+        const isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.props.isFocused(this.props.Document, true);
         // TODO: editing border doesn't work :(
         return {
             style: {
@@ -386,7 +376,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
 
     @action
     onKeyDown = (e: KeyboardEvent): void => {
-        if (!this._cellIsEditing && !this.props.headerIsEditing && this.props.isFocused(this.props.Document)) {// && this.props.isSelected(true)) {
+        if (!this._cellIsEditing && !this.props.headerIsEditing && this.props.isFocused(this.props.Document, true)) {// && this.props.isSelected(true)) {
             const direction = e.key === "Tab" ? "tab" : e.which === 39 ? "right" : e.which === 37 ? "left" : e.which === 38 ? "up" : e.which === 40 ? "down" : "";
             this._focusedCell = this.changeFocusedCellByDirection(direction, this._focusedCell.row, this._focusedCell.col);
 
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index ddc9bf40a..54b09ab72 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -278,7 +278,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
         } else {
             this._downX = x;
             this._downY = y;
-            const effectiveAcl = GetEffectiveAcl(this.props.Document);
+            const effectiveAcl = GetEffectiveAcl(this.props.Document[DataSym]);
             if ([AclAdmin, AclEdit, AclAddonly].includes(effectiveAcl)) PreviewCursor.Show(x, y, this.onKeyPress, this.props.addLiveTextDocument, this.props.getTransform, this.props.addDocument, this.props.nudge);
             this.clearSelection();
         }
@@ -340,17 +340,9 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
     @undoBatch
     @action
     delete = () => {
-        const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc;
         const selected = this.marqueeSelect(false);
         SelectionManager.DeselectAll();
-
-        selected.map(doc => {
-            const effectiveAcl = GetEffectiveAcl(doc);
-            if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) { // deletes whatever you have the right to delete
-                recent && Doc.AddDocToList(recent, "data", doc, undefined, true, true);
-                this.props.removeDocument(doc);
-            }
-        });
+        selected.forEach(doc => this.props.removeDocument(doc));
 
         this.cleanupInteractions(false);
         MarqueeOptionsMenu.Instance.fadeOut(true);
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index a945ae2ba..57e968aa7 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -316,7 +316,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
      */
     getPermissionsSelect(user: string, permission: string) {
         return <select className="permissions-select"
-            defaultValue={permission}
+            value={permission}
             onChange={e => this.changePermissions(e, user)}>
             {Object.values(SharingPermissions).map(permission => {
                 return (
diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss
index 4c79a7c2f..7eb07ff55 100644
--- a/src/client/views/globalCssVariables.scss
+++ b/src/client/views/globalCssVariables.scss
@@ -29,6 +29,7 @@ $search-thumnail-size: 130;
 $contextMenu-zindex: 100000; // context menu shows up over everything
 $radialMenu-zindex: 100000; // context menu shows up over everything
 
+$searchpanel-height: 32px;
 $mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc
 $docDecorations-zindex: 998; // then doc decorations appear over everything else
 $remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right?
@@ -43,4 +44,5 @@ $MAX_ROW_HEIGHT: 44px;
     MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT;
     SEARCH_THUMBNAIL_SIZE: $search-thumnail-size;
     ANTIMODEMENU_HEIGHT: $antimodemenu-height;
+    SEARCH_PANEL_HEIGHT: $searchpanel-height;
 }
\ No newline at end of file
diff --git a/src/client/views/globalCssVariables.scss.d.ts b/src/client/views/globalCssVariables.scss.d.ts
index a7ca4b300..fd1f60f13 100644
--- a/src/client/views/globalCssVariables.scss.d.ts
+++ b/src/client/views/globalCssVariables.scss.d.ts
@@ -6,6 +6,7 @@ interface IGlobalScss {
     MAX_ROW_HEIGHT: string;
     SEARCH_THUMBNAIL_SIZE: string;
     ANTIMODEMENU_HEIGHT: string;
+    SEARCH_PANEL_HEIGHT: string;
 }
 declare const globalCssVariables: IGlobalScss;
 
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index c9e39cf7b..ed64bde32 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -382,11 +382,11 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         </div>
                     <div className="linkEditor-followingDropdown-option"
                         onPointerDown={() => this.changeFollowBehavior("onRight")}>
-                        Always open in new pane on right
+                        Always open in a new pane
                         </div>
                     <div className="linkEditor-followingDropdown-option"
                         onPointerDown={() => this.changeFollowBehavior("inTab")}>
-                        Always open in new tab
+                        Always open in a new tab
                         </div>
                     {this.props.linkDoc.linksToAnnotation ?
                         <div className="linkEditor-followingDropdown-option"
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 31dd33fc1..cf8645e4c 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -241,6 +241,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                     style={{
                         width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px",
                         backgroundColor: DocumentLinksButton.StartLink ? "" : "grey",
+                        opacity: DocumentLinksButton.StartLink ? "" : "50%",
                         border: DocumentLinksButton.StartLink ? "" : "none"
                     }}
                     onPointerDown={DocumentLinksButton.StartLink ? this.completeLink : emptyFunction}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 536f1ed68..a1c934e81 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -9,7 +9,7 @@ import { listSpec } from "../../../fields/Schema";
 import { SchemaHeaderField } from '../../../fields/SchemaHeaderField';
 import { ScriptField } from '../../../fields/ScriptField';
 import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types";
-import { GetEffectiveAcl, SharingPermissions, TraceMobx } from '../../../fields/util';
+import { GetEffectiveAcl, TraceMobx } from '../../../fields/util';
 import { MobileInterface } from '../../../mobile/MobileInterface';
 import { GestureUtils } from '../../../pen-gestures/GestureUtils';
 import { emptyFunction, emptyPath, OmitKeys, returnOne, returnTransparent, Utils } from "../../../Utils";
@@ -179,7 +179,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         RadialMenu.Instance.openMenu(pt.pageX - 15, pt.pageY - 15);
 
         // RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "map-pin", selected: -1 });
-        const effectiveAcl = GetEffectiveAcl(this.props.Document);
+        const effectiveAcl = GetEffectiveAcl(this.props.Document[DataSym]);
         (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) && RadialMenu.Instance.addItem({ description: "Delete", event: () => { this.props.ContainingCollectionView?.removeDocument(this.props.Document), RadialMenu.Instance.closeMenu(); }, icon: "external-link-square-alt", selected: -1 });
         // RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, "onRight"), icon: "trash", selected: -1 });
         RadialMenu.Instance.addItem({ description: "Pin", event: () => this.props.pinToPres(this.props.Document), icon: "map-pin", selected: -1 });
@@ -571,19 +571,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         if (Doc.UserDoc().activeWorkspace === this.props.Document) {
             alert("Can't delete the active workspace");
         } else {
-            const recent = Cast(Doc.UserDoc().myRecentlyClosed, Doc) as Doc;
             const selected = SelectionManager.SelectedDocuments().slice();
             SelectionManager.DeselectAll();
-
-            selected.map(dv => {
-                const effectiveAcl = GetEffectiveAcl(dv.props.Document);
-                if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) { // deletes whatever you have the right to delete
-                    recent && Doc.AddDocToList(recent, "data", dv.props.Document, undefined, true, true);
-                    dv.props.removeDocument?.(dv.props.Document);
-                }
-            });
-
-            this.props.Document.deleted = true;
+            selected.map(dv => dv.props.removeDocument?.(dv.props.Document));
             this.props.removeDocument?.(this.props.Document);
         }
     }
@@ -777,8 +767,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             Doc.AreProtosEqual(this.props.Document, Doc.UserDoc()) && moreItems.push({ description: "Toggle Always Show Link End", event: () => Doc.UserDoc()["documentLinksButton-hideEnd"] = !Doc.UserDoc()["documentLinksButton-hideEnd"], icon: "eye" });
         }
 
-        const effectiveAcl = GetEffectiveAcl(this.props.Document);
-        (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) && moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" });
+        moreItems.push({ description: "Close", event: this.deleteClicked, icon: "trash" });
 
         !more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" });
         cm.moveAfter(cm.findByDescription("More...")!, cm.findByDescription("OnClick...")!);
@@ -1003,7 +992,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
     render() {
         if (!(this.props.Document instanceof Doc)) return (null);
-        if (GetEffectiveAcl(this.props.Document) === AclPrivate) return (null);
+        if (GetEffectiveAcl(this.props.Document[DataSym]) === AclPrivate) return (null);
         if (this.props.Document.hidden) return (null);
         const backgroundColor = Doc.UserDoc().renderStyle === "comic" ? undefined : this.props.forcedBackgroundColor?.(this.Document) || StrCast(this.layoutDoc._backgroundColor) || StrCast(this.layoutDoc.backgroundColor) || StrCast(this.Document.backgroundColor) || this.props.backgroundColor?.(this.Document, this.props.renderDepth);
         const opacity = Cast(this.layoutDoc._opacity, "number", Cast(this.layoutDoc.opacity, "number", Cast(this.Document.opacity, "number", null)));
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index fe0ea80d5..3f2a590ab 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -5,7 +5,7 @@ import { DateField } from "../../../fields/DateField";
 import { Doc, FieldResult, Opt, Field } from "../../../fields/Doc";
 import { List } from "../../../fields/List";
 import { ScriptField } from "../../../fields/ScriptField";
-import { AudioField, VideoField } from "../../../fields/URLField";
+import { AudioField, VideoField, WebField } from "../../../fields/URLField";
 import { Transform } from "../../util/Transform";
 import { CollectionView } from "../collections/CollectionView";
 import { AudioBox } from "./AudioBox";
@@ -135,9 +135,9 @@ export class FieldView extends React.Component<FieldViewProps> {
             return <div> {field.map(f => Field.toString(f)).join(", ")}  </div>;
         }
         // bcz: this belongs here, but it doesn't render well so taking it out for now
-        // else if (field instanceof HtmlField) {
-        //     return <WebBox {...this.props} />
-        // }
+        else if (field instanceof WebField) {
+            return <p>{Field.toString(field.url.href)}</p>;
+        }
         else if (!(field instanceof Promise)) {
             return <p>{Field.toString(field)}</p>;
         }
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 144defbb0..168d640e9 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -5,8 +5,8 @@ import { createSchema, makeInterface } from '../../../fields/Schema';
 import { DocComponent } from '../DocComponent';
 import './FontIconBox.scss';
 import { FieldView, FieldViewProps } from './FieldView';
-import { StrCast, Cast, NumCast } from '../../../fields/Types';
-import { Utils, emptyFunction } from "../../../Utils";
+import { StrCast, Cast } from '../../../fields/Types';
+import { Utils } from "../../../Utils";
 import { runInAction, observable, reaction, IReactionDisposer } from 'mobx';
 import { Doc } from '../../../fields/Doc';
 import { ContextMenu } from '../ContextMenu';
@@ -63,6 +63,7 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
         const color = StrCast(this.layoutDoc.color, this._foregroundColor);
         const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc, this.props.renderDepth)));
         const shape = StrCast(this.layoutDoc.iconShape, "round");
+
         const button = <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu}
             style={{
                 boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined,
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index ebb916307..c4481b213 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -7,21 +7,16 @@ import { emptyFunction, emptyPath, returnEmptyFilter, returnFalse, returnOne, re
 import { Docs } from "../../documents/Documents";
 import { DocumentManager } from "../../util/DocumentManager";
 import { Transform } from "../../util/Transform";
+import { ContextMenu } from '../ContextMenu';
 import { ContentFittingDocumentView } from "./ContentFittingDocumentView";
-import React = require("react");
-import { DocumentView } from './DocumentView';
-import { sortAndDeduplicateDiagnostics } from 'typescript';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { LinkManager } from '../../util/LinkManager';
 import { DocumentLinksButton } from './DocumentLinksButton';
-import { ContextMenu } from '../ContextMenu';
-import { undoBatch } from '../../util/UndoManager';
+import React = require("react");
 
 interface Props {
     linkDoc?: Doc;
     linkSrc?: Doc;
     href?: string;
-    backgroundColor: (doc: Doc) => string;
+    backgroundColor: (doc: Doc, renderDepth: number) => string;
     addDocTab: (document: Doc, where: string) => boolean;
     location: number[];
 }
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 2fdb87e63..255a1b2d0 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -60,19 +60,19 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
         if (href) {
             const pathCorrectionTest = /upload\_[a-z0-9]{32}.(.*)/g;
             const matches = pathCorrectionTest.exec(href);
-            console.log("\nHere's the { url } being fed into the outer regex:");
-            console.log(href);
-            console.log("And here's the 'properPath' build from the captured filename:\n");
+            // console.log("\nHere's the { url } being fed into the outer regex:");
+            // console.log(href);
+            // console.log("And here's the 'properPath' build from the captured filename:\n");
             if (matches !== null && href.startsWith(window.location.origin)) {
                 const properPath = Utils.prepend(`/files/pdfs/${matches[0]}`);
-                console.log(properPath);
+                //console.log(properPath);
                 if (!properPath.includes(href)) {
                     console.log(`The two (url and proper path) were not equal`);
                     const proto = Doc.GetProto(Document);
                     proto[this.props.fieldKey] = new PdfField(properPath);
                     proto[backup] = href;
                 } else {
-                    console.log(`The two (url and proper path) were equal`);
+                    //console.log(`The two (url and proper path) were equal`);
                 }
             } else {
                 console.log("Outer matches was null!");
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 3283f568a..1393e7868 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -4,7 +4,7 @@ import { action, computed, IReactionDisposer, observable, reaction, runInAction
 import { observer } from "mobx-react";
 import { Dictionary } from "typescript-collections";
 import * as WebRequest from 'web-request';
-import { Doc, DocListCast, Opt, AclAddonly, AclEdit, AclAdmin } from "../../../fields/Doc";
+import { Doc, DocListCast, Opt, AclAddonly, AclEdit, AclAdmin, DataSym } from "../../../fields/Doc";
 import { documentSchema } from "../../../fields/documentSchemas";
 import { Id } from "../../../fields/FieldSymbols";
 import { HtmlField } from "../../../fields/HtmlField";
@@ -454,9 +454,11 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
             view = <span className="webBox-htmlSpan" dangerouslySetInnerHTML={{ __html: field.html }} />;
         } else if (field instanceof WebField) {
             const url = this.layoutDoc.UseCors ? Utils.CorsProxy(field.url.href) : field.url.href;
-            view = <iframe className="webBox-iframe" enable-annotation={true} ref={this._iframeRef} src={url} onLoad={this.iframeLoaded} />;
+            view = <iframe className="webBox-iframe" enable-annotation={"true"} ref={this._iframeRef} src={url} onLoad={this.iframeLoaded}
+                // the 'allow-top-navigation' and 'allow-top-navigation-by-user-activation' attributes are left out to prevent iframes from redirecting the top-level Dash page
+                sandbox={"allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts"} />;
         } else {
-            view = <iframe className="webBox-iframe" enable-annotation={true} ref={this._iframeRef} src={"https://crossorigin.me/https://cs.brown.edu"} />;
+            view = <iframe className="webBox-iframe" enable-annotation={"true"} ref={this._iframeRef} src={"https://crossorigin.me/https://cs.brown.edu"} />;
         }
         return view;
     }
@@ -535,7 +537,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
     @action
     highlight = (color: string) => {
         // creates annotation documents for current highlights
-        const effectiveAcl = GetEffectiveAcl(this.props.Document);
+        const effectiveAcl = GetEffectiveAcl(this.props.Document[DataSym]);
         const annotationDoc = [AclAddonly, AclEdit, AclAdmin].includes(effectiveAcl) ? this.makeAnnotationDocument(color) : undefined;
         annotationDoc && this.addDocument?.(annotationDoc);
         return annotationDoc ?? undefined;
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 7c1b2f621..f9ae78778 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -4,7 +4,7 @@ const pdfjs = require('pdfjs-dist/es5/build/pdf.js');
 import * as Pdfjs from "pdfjs-dist";
 import "pdfjs-dist/web/pdf_viewer.css";
 import { Dictionary } from "typescript-collections";
-import { Doc, DocListCast, FieldResult, HeightSym, Opt, WidthSym, AclAddonly, AclEdit, AclAdmin } from "../../../fields/Doc";
+import { Doc, DocListCast, FieldResult, HeightSym, Opt, WidthSym, AclAddonly, AclEdit, AclAdmin, DataSym } from "../../../fields/Doc";
 import { documentSchema } from "../../../fields/documentSchemas";
 import { Id } from "../../../fields/FieldSymbols";
 import { InkTool } from "../../../fields/InkField";
@@ -399,10 +399,10 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
     @action
     search = (searchString: string, fwd: boolean, clear: boolean = false) => {
         if (clear) {
-            this._pdfViewer.findController.executeCommand('reset', { query: "" });
+            this._pdfViewer?.findController.executeCommand('reset', { query: "" });
         } else if (!searchString) {
             fwd ? this.nextAnnotation() : this.prevAnnotation();
-        } else if (this._pdfViewer.pageViewsReady) {
+        } else if (this._pdfViewer?.pageViewsReady) {
             this._pdfViewer.findController.executeCommand('findagain', {
                 caseSensitive: false,
                 findPrevious: !fwd,
@@ -573,7 +573,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
     @action
     highlight = (color: string) => {
         // creates annotation documents for current highlights
-        const effectiveAcl = GetEffectiveAcl(this.props.Document);
+        const effectiveAcl = GetEffectiveAcl(this.props.Document[DataSym]);
         const annotationDoc = [AclAddonly, AclEdit, AclAdmin].includes(effectiveAcl) && this.makeAnnotationDocument(color);
         annotationDoc && this.addDocument?.(annotationDoc);
         return annotationDoc as Doc ?? undefined;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 4a14b222c..9cd03d518 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tooltip } from '@material-ui/core';
-import { action, computed, observable, runInAction } from 'mobx';
+import { action, computed, observable, runInAction, reaction, IReactionDisposer } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import * as rp from 'request-promise';
@@ -54,6 +54,8 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @observable private _visibleElements: JSX.Element[] = [];
     @observable private _visibleDocuments: Doc[] = [];
 
+    static NUM_SEARCH_RESULTS_PER_PAGE = 25;
+
     private _resultsSet = new Map<Doc, number>();
     private _resultsRef = React.createRef<HTMLDivElement>();
     public inputRef = React.createRef<HTMLInputElement>();
@@ -86,7 +88,19 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     }
     @observable setupButtons = false;
+    private _disposers: { [name: string]: IReactionDisposer } = {};
+
     componentDidMount = () => {
+        this._disposers.filters = reaction(() => Cast(this.props.Document._docFilters, listSpec("string")), // if a link is deleted, then remove all hyperlinks that reference it from the text's marks
+            newFilters => {
+                if (this.searchFullDB) {
+                    runInAction(() => this._pageStart = 0);
+                    this.submitSearch();
+                    // newFilters?.forEach(f => {
+                    //     console.log(f);
+                    // })
+                }
+            });
         if (this.setupButtons === false) {
 
             runInAction(() => this.setupButtons = true);
@@ -113,6 +127,10 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         }
     }
 
+    componentWillUnmount() {
+        Object.values(this._disposers).forEach(disposer => disposer?.());
+    }
+
 
     @action
     getViews = (doc: Doc) => SearchUtil.GetViewsOfDocument(doc)
@@ -123,8 +141,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
         this.layoutDoc._searchString = e.target.value;
         this.newsearchstring = e.target.value;
-
-
         if (e.target.value === "") {
             if (this.currentSelectedCollection !== undefined) {
                 let newarray: Doc[] = [];
@@ -176,6 +192,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     enter = (e: React.KeyboardEvent) => {
         if (e.key === "Enter") {
             this.layoutDoc._searchString = this.newsearchstring;
+            runInAction(() => this._pageStart = 0);
 
             if (StrCast(this.layoutDoc._searchString) !== "" || !this.searchFullDB) {
                 runInAction(() => this.open = true);
@@ -228,26 +245,100 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     getFinalQuery(query: string): string {
         //alters the query so it looks in the correct fields
-        //if this is true, then not all of the field boxes are checked
+        //if this is true, th`en not all of the field boxes are checked
         //TODO: data
-        if (this.fieldFiltersApplied) {
-            query = this.applyBasicFieldFilters(query);
-            query = query.replace(/\s+/g, ' ').trim();
+        const initialfilters = Cast(this.props.Document._docFilters, listSpec("string"), []);
+
+        const type: string[] = [];
+
+        const filters: string[] = [];
+
+        for (let i = 0; i < initialfilters.length; i = i + 3) {
+            if (initialfilters[i + 2] !== undefined) {
+                filters.push(initialfilters[i]);
+                filters.push(initialfilters[i + 1]);
+                filters.push(initialfilters[i + 2]);
+            }
         }
 
-        //alters the query based on if all words or any words are required
-        //if this._wordstatus is false, all words are required and a + is added before each
-        if (!this._basicWordStatus) {
-            query = this.basicRequireWords(query);
-            query = query.replace(/\s+/g, ' ').trim();
+        const finalfilters: { [key: string]: string[] } = {};
+
+        for (let i = 0; i < filters.length; i = i + 3) {
+            if (finalfilters[filters[i]] !== undefined) {
+                finalfilters[filters[i]].push(filters[i + 1]);
+            }
+            else {
+                finalfilters[filters[i]] = [filters[i + 1]];
+            }
         }
 
-        // if should be searched in a specific collection
-        if (this._collectionStatus) {
-            query = this.addCollectionFilter(query);
-            query = query.replace(/\s+/g, ' ').trim();
+        for (const key in finalfilters) {
+            const values = finalfilters[key];
+            if (values.length === 1) {
+                const mod = "_t:";
+                const newWords: string[] = [];
+                const oldWords = values[0].split(" ");
+                oldWords.forEach((word, i) => {
+                    i === 0 ? newWords.push(key + mod + "\"" + word + "\"") : newWords.push("AND " + key + mod + "\"" + word + "\"");
+                });
+                query = `(${query}) AND (${newWords.join(" ")})`;
+            }
+            else {
+                for (let i = 0; i < values.length; i++) {
+                    const mod = "_t:";
+                    const newWords: string[] = [];
+                    const oldWords = values[i].split(" ");
+                    oldWords.forEach((word, i) => {
+                        i === 0 ? newWords.push(key + mod + "\"" + word + "\"") : newWords.push("AND " + key + mod + "\"" + word + "\"");
+                    });
+                    const v = "(" + newWords.join(" ") + ")";
+                    if (i === 0) {
+                        query = `(${query}) AND (${v}`;
+                        if (values.length === 1) {
+                            query = query + ")";
+                        }
+                    }
+                    else if (i === values.length - 1) {
+                        query = query + " OR " + v + ")";
+                    }
+                    else {
+                        query = query + " OR " + v;
+                    }
+                }
+            }
 
         }
+
+
+        // let limit = typepos.length
+        // typepos.forEach(i => {
+        //     if (i === 0) {
+        //         if (i + 1 === limit) {
+        // query = query + " && " + filters[i] + "_t:" + filters;
+        //         }
+        //         else if (filters[i] === filters[i + 3]) {
+        //             query = query + " && (" + filters[i] + "_t:" + filters;
+        //         }
+        //         else {
+        //             query = query + " && " + filters[i] + "_t:" + filters;
+        //         }
+
+        //     }
+        //     else if (i + 3 > filters.length) {
+
+        //     }
+        //     else {
+
+        //     }
+
+        // });
+
+        // query = this.applyBasicFieldFilters(query);
+
+
+
+        query = query.replace(/-\s+/g, '');
+        query = query.replace(/-/g, "");
         return query;
     }
 
@@ -258,7 +349,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     @action
     filterDocsByType(docs: Doc[]) {
         const finalDocs: Doc[] = [];
-        const blockedTypes: string[] = ["preselement", "docholder", "search", "searchitem", "script", "fonticonbox", "button", "label"];
+        const blockedTypes: string[] = [DocumentType.PRESELEMENT, DocumentType.DOCHOLDER, DocumentType.SEARCH, DocumentType.SEARCHITEM, DocumentType.FONTICON, DocumentType.BUTTON, DocumentType.SCRIPTING];
         docs.forEach(doc => {
             const layoutresult = Cast(doc.type, "string");
             if (layoutresult && !blockedTypes.includes(layoutresult)) {
@@ -400,15 +491,9 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     applyBasicFieldFilters(query: string) {
         let finalQuery = "";
 
-        if (this._titleFieldStatus) {
-            finalQuery = finalQuery + this.basicFieldFilters(query, Keys.TITLE);
-        }
-        if (this._authorFieldStatus) {
-            finalQuery = finalQuery + this.basicFieldFilters(query, Keys.AUTHOR);
-        }
-        if (this._deletedDocsStatus) {
-            finalQuery = finalQuery + this.basicFieldFilters(query, Keys.DATA);
-        }
+        finalQuery = finalQuery + this.basicFieldFilters(query, Keys.TITLE);
+        finalQuery = finalQuery + this.basicFieldFilters(query, Keys.AUTHOR);
+
         if (this._deletedDocsStatus) {
             finalQuery = finalQuery + this.basicFieldFilters(query, Keys.TEXT);
         }
@@ -419,8 +504,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         let mod = "";
         switch (type) {
             case Keys.AUTHOR: mod = " author_t:"; break;
-            case Keys.DATA: break; // TODO
-            case Keys.TITLE: mod = " _title_t:"; break;
+            case Keys.TITLE: mod = " title_t:"; break;
             case Keys.TEXT: mod = " text_t:"; break;
         }
 
@@ -446,7 +530,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                 docs.forEach((d) => {
                     if (d.data !== undefined) {
                         d._searchDocs = new List<Doc>();
-                        d._docFilters = new List();
+                        //d._docFilters = new List();
                         const newdocs = DocListCast(d.data);
                         newdocs.forEach((newdoc) => {
                             newarray.push(newdoc);
@@ -463,7 +547,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         if (reset) {
             this.layoutDoc._searchString = "";
         }
-        this.props.Document._docFilters = new List();
+        //this.props.Document._docFilters = new List();
         this.noresults = "";
 
         this.dataDoc[this.fieldKey] = new List<Doc>([]);
@@ -471,9 +555,9 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         this.children = 0;
         this.buckets = [];
         this.new_buckets = {};
-        const query = StrCast(this.layoutDoc._searchString);
+        let query = StrCast(this.layoutDoc._searchString);
         Doc.SetSearchQuery(query);
-        this.getFinalQuery(query);
+        this.searchFullDB ? query = this.getFinalQuery(query) : console.log("local");
         this._results.forEach(result => {
             Doc.UnBrushDoc(result[0]);
             result[0].searchMatch = undefined;
@@ -521,7 +605,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     }
 
     private get filterQuery() {
-        const types = ["preselement", "docholder", "collection", "search", "searchitem", "script", "fonticonbox", "button", "label"]; // this.filterTypes;
+        const types = ["preselement", "docholder", "search", "searchitem", "script", "fonticonbox", "button", "label"]; // this.filterTypes;
         const baseExpr = "NOT baseProto_b:true AND NOT system_b:true";
         const includeDeleted = this.getDataStatus() ? "" : " NOT deleted_b:true";
         const includeIcons = this.getDataStatus() ? "" : " NOT type_t:fonticonbox";
@@ -533,16 +617,15 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     getDataStatus() { return this._deletedDocsStatus; }
 
-    private NumResults = 25;
+    private NumResults = 50;
     private lockPromise?: Promise<void>;
     getResults = async (query: string) => {
-        console.log("Get");
         if (this.lockPromise) {
             await this.lockPromise;
         }
         this.lockPromise = new Promise(async res => {
             while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) {
-                this._curRequest = SearchUtil.Search(query, true, { fq: this.filterQuery, start: this._maxSearchIndex, rows: this.NumResults, hl: true, "hl.fl": "*", }).then(action(async (res: SearchUtil.DocSearchResult) => {
+                this._curRequest = SearchUtil.Search(query, true, { fq: this.filterQuery, start: this._maxSearchIndex, rows: 10000000, hl: true, "hl.fl": "*", }).then(action(async (res: SearchUtil.DocSearchResult) => {
                     // happens at the beginning
                     if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) {
                         this._numTotalResults = res.numFound;
@@ -562,27 +645,16 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                             const highlight = highlights[doc[Id]];
                             const line = lines.get(doc[Id]) || [];
                             const hlights = highlight ? Object.keys(highlight).map(key => key.substring(0, key.length - 2)).filter(k => k) : [];
-                            doc ? console.log(Cast(doc.context, Doc)) : null;
-                            if (this.findCommonElements(hlights)) {
-                            }
-                            else {
-                                const layoutresult = Cast(doc.type, "string");
-                                if (layoutresult) {
-                                    if (this.new_buckets[layoutresult] === undefined) {
-                                        this.new_buckets[layoutresult] = 1;
-                                    }
-                                    else {
-                                        this.new_buckets[layoutresult] = this.new_buckets[layoutresult] + 1;
-                                    }
-                                }
-                                if (index === undefined) {
-                                    this._resultsSet.set(doc, this._results.length);
-                                    this._results.push([doc, hlights, line]);
-                                } else {
-                                    this._results[index][1].push(...hlights);
-                                    this._results[index][2].push(...line);
-                                }
+                            // if (this.findCommonElements(hlights)) {
+                            // }
+                            if (index === undefined) {
+                                this._resultsSet.set(doc, this._results.length);
+                                this._results.push([doc, hlights, line]);
+                            } else {
+                                this._results[index][1].push(...hlights);
+                                this._results[index][2].push(...line);
                             }
+
                         });
                     });
 
@@ -663,26 +735,27 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         this._curRequest = undefined;
     }
 
+    @observable _pageStart: number = 0;
+    @observable _pageCount: number = SearchBox.NUM_SEARCH_RESULTS_PER_PAGE;
+
     @observable children: number = 0;
     @action
     resultsScrolled = (e?: React.UIEvent<HTMLDivElement>) => {
         if (!this._resultsRef.current) return;
-        this.props.Document._schemaHeaders = new List<SchemaHeaderField>([]);
 
         const scrollY = e ? e.currentTarget.scrollTop : this._resultsRef.current ? this._resultsRef.current.scrollTop : 0;
         const itemHght = 53;
-        const startIndex = Math.floor(Math.max(0, scrollY / itemHght));
         //const endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (this._resultsRef.current.getBoundingClientRect().height / itemHght)));
         const endIndex = 30;
         //this._endIndex = endIndex === -1 ? 12 : endIndex;
         this._endIndex = 30;
-        const headers = new Set<string>(["title", "author", "*lastModified"]);
-        if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) {
-            if (this.noresults === "") {
-                this.noresults = "No search results :(";
-            }
-            return;
-        }
+        const headers = new Set<string>(["title", "author", "text", "type", "data", "*lastModified", "context"]);
+        // if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) {
+        //     if (this.noresults === "") {
+        //         this.noresults = "No search results :(";
+        //     }
+        //     return;
+        // }
 
         if (this._numTotalResults <= this._maxSearchIndex) {
             this._numTotalResults = this._results.length;
@@ -699,62 +772,42 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             this._isSorted = Array<undefined>(this._numTotalResults === -1 ? 0 : this._numTotalResults);
 
         }
-        for (let i = 0; i < this._numTotalResults; i++) {
+        let max = this._pageStart + this._pageCount;
+        max > this._results.length ? max = this._results.length : console.log("");
+        for (let i = this._pageStart; i < max; i++) {
             //if the index is out of the window then put a placeholder in
             //should ones that have already been found get set to placeholders?
-            if (i < startIndex || i > endIndex) {
-                if (this._isSearch[i] !== "placeholder") {
-                    this._isSearch[i] = "placeholder";
-                    this._isSorted[i] = "placeholder";
-                    this._visibleElements[i] = <div className="searchBox-placeholder" key={`searchBox-placeholder-${i}`}>Loading...</div>;
-                }
-            }
-            else {
-                if (this._isSearch[i] !== "search") {
-                    let result: [Doc, string[], string[]] | undefined = undefined;
-                    if (i >= this._results.length) {
-                        this.getResults(StrCast(this.layoutDoc._searchString));
-                        if (i < this._results.length) result = this._results[i];
-                        if (result) {
-                            const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
-                            const lines = new List<string>(result[2]);
-                            result[0].lines = lines;
-                            result[0].highlighting = highlights.join(", ");
-                            highlights.forEach((item) => headers.add(item));
-                            this._visibleDocuments[i] = result[0];
-                            this._isSearch[i] = "search";
-                            Doc.BrushDoc(result[0]);
-                            result[0].searchMatch = true;
-                            Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
-                            this.children++;
-                        }
-                    }
-                    else {
-                        result = this._results[i];
-                        if (result) {
-                            const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
-                            const lines = new List<string>(result[2]);
-                            highlights.forEach((item) => headers.add(item));
-                            result[0].lines = lines;
-                            result[0].highlighting = highlights.join(", ");
-                            result[0].searchMatch = true;
-                            if (i < this._visibleDocuments.length) {
-                                this._visibleDocuments[i] = result[0];
-                                this._isSearch[i] = "search";
-                                Doc.BrushDoc(result[0]);
-                                Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
-                                this.children++;
-                            }
-                        }
+
+            if (this._isSearch[i] !== "search") {
+                let result: [Doc, string[], string[]] | undefined = undefined;
+
+                result = this._results[i];
+                if (result) {
+                    const highlights = Array.from([...Array.from(new Set(result[1]).values())]);
+                    const lines = new List<string>(result[2]);
+                    highlights.forEach((item) => headers.add(item));
+                    result[0].lines = lines;
+                    result[0].highlighting = highlights.join(", ");
+                    result[0].searchMatch = true;
+                    if (i < this._visibleDocuments.length) {
+                        this._visibleDocuments[i] = result[0];
+                        this._isSearch[i] = "search";
+                        Doc.BrushDoc(result[0]);
+                        Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]);
+                        this.children++;
                     }
+
                 }
+
             }
         }
         const schemaheaders: SchemaHeaderField[] = [];
         this.headerscale = headers.size;
         headers.forEach((item) => schemaheaders.push(new SchemaHeaderField(item, "#f1efeb")));
         this.headercount = schemaheaders.length;
-        this.props.Document._schemaHeaders = new List<SchemaHeaderField>(schemaheaders);
+        if (Cast(this.props.Document._docFilters, listSpec("string"), []).length === 0) {
+            this.props.Document._schemaHeaders = new List<SchemaHeaderField>(schemaheaders);
+        }
         if (this._maxSearchIndex >= this._numTotalResults) {
             this._visibleElements.length = this._results.length;
             this._visibleDocuments.length = this._results.length;
@@ -781,7 +834,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     @computed get searchItemTemplate() { return Cast(Doc.UserDoc().searchItemTemplate, Doc, null); }
 
-    @computed get viewspec() { return Cast(this.props.Document._docFilters, listSpec("string"), []) }
+    @computed get viewspec() { return Cast(this.props.Document._docFilters, listSpec("string"), []); }
 
     getTransform = () => {
         return this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight
@@ -799,6 +852,11 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
 
     @observable filter = false;
 
+    @action newpage() {
+        this._pageStart += SearchBox.NUM_SEARCH_RESULTS_PER_PAGE;
+        this.dataDoc[this.fieldKey] = new List<Doc>([]);
+        this.resultsScrolled();
+    }
     render() {
         this.props.Document._chromeStatus === "disabled";
         this.props.Document._searchDoc = true;
@@ -807,14 +865,16 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
         cols > 5 ? length = 1076 : length = cols * 205 + 51;
         let height = 0;
         const rows = this.children;
-        rows > 6 ? height = 31 + 31 * 6 : height = 31 * rows + 31;
+        height = 31 + 31 * 6;
         return (
             <div style={{ pointerEvents: "all" }} className="searchBox-container">
                 <div className="searchBox-bar">
                     <div style={{ position: "absolute", left: 15 }}>{Doc.CurrentUserEmail}</div>
                     <div style={{ display: "flex", alignItems: "center" }}>
                         <Tooltip title={<div className="dash-tooltip" >drag search results as collection</div>} ><div>
-                            <FontAwesomeIcon onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg"
+                            {/* <FontAwesomeIcon onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg"
+                                style={{ cursor: "hand", color: "black", padding: 1, left: 35, position: "relative" }} /> */}
+                            <FontAwesomeIcon onPointerDown={() => { this.newpage(); }} icon={"search"} size="lg"
                                 style={{ cursor: "hand", color: "black", padding: 1, left: 35, position: "relative" }} />
                         </div></Tooltip>
                         <div style={{ cursor: "default", left: 250, position: "relative", }}>
@@ -936,7 +996,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                                                             docs.forEach((d) => {
                                                                 if (d.data !== undefined) {
                                                                     d._searchDocs = new List<Doc>();
-                                                                    d._docFilters = new List()
+                                                                    d._docFilters = new List();
                                                                     const newdocs = DocListCast(d.data);
                                                                     newdocs.forEach((newdoc) => {
                                                                         newarray.push(newdoc);
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index b535fea5a..ea53bc9a2 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -806,7 +806,8 @@ export namespace Doc {
                 target[targetKey] = new PrefetchProxy(templateDoc);
             } else {
                 titleTarget && (Doc.GetProto(target).title = titleTarget);
-                Doc.GetProto(target)[targetKey] = new PrefetchProxy(templateDoc);
+                const setDoc = [AclAdmin, AclEdit].includes(GetEffectiveAcl(Doc.GetProto(target))) ? Doc.GetProto(target) : target;
+                setDoc[targetKey] = new PrefetchProxy(templateDoc);
             }
         }
         return target;
@@ -1044,6 +1045,7 @@ export namespace Doc {
                 if (docFilters[i] === key && (docFilters[i + 1] === value || modifiers === "match")) {
                     if (docFilters[i + 2] === modifiers && modifiers && docFilters[i + 1] === value) return;
                     docFilters.splice(i, 3);
+                    container._docFilters = new List<string>(docFilters);
                     break;
                 }
             }
diff --git a/src/fields/SchemaHeaderField.ts b/src/fields/SchemaHeaderField.ts
index 07c90f5a2..22ae454f8 100644
--- a/src/fields/SchemaHeaderField.ts
+++ b/src/fields/SchemaHeaderField.ts
@@ -114,7 +114,7 @@ export class SchemaHeaderField extends ObjectField {
     }
 
     [ToScriptString]() {
-        return `invalid`;
+        return `header(${this.heading},${this.type}})`;
     }
     [ToString]() {
         return `SchemaHeaderField`;
diff --git a/src/fields/util.ts b/src/fields/util.ts
index 4c71572db..3d832636f 100644
--- a/src/fields/util.ts
+++ b/src/fields/util.ts
@@ -161,8 +161,7 @@ export function GetEffectiveAcl(target: any, in_prop?: string | symbol | number)
     if (target[AclSym] && Object.keys(target[AclSym]).length) {
 
         // if the current user is the author of the document / the current user is a member of the admin group
-        // but not if the doc in question is an alias - the current user will be the author of their alias rather than the original author
-        if ((Doc.CurrentUserEmail === (target.__fields?.author || target.author) && !(target.aliasOf || target.__fields?.aliasOf)) || currentUserGroups.includes("admin")) return AclAdmin;
+        if (Doc.CurrentUserEmail === (target.__fields?.author || target.author) || currentUserGroups.includes("admin")) return AclAdmin;
 
         // if the ACL is being overriden or the property being modified is one of the playground fields (which can be freely modified)
         if (_overrideAcl || (in_prop && DocServer.PlaygroundFields?.includes(in_prop.toString()))) return AclEdit;
@@ -218,9 +217,10 @@ export function distributeAcls(key: string, acl: SharingPermissions, target: Doc
         changed = true;
 
         // maps over the aliases of the document
-        if (target.aliases) {
-            DocListCast(target.aliases).map(alias => {
-                distributeAcls(key, acl, alias, inheritingFromCollection);
+        const aliases = DocListCast(target.aliases);
+        if (aliases.length) {
+            aliases.map(alias => {
+                alias !== target && distributeAcls(key, acl, alias, inheritingFromCollection);
             });
         }