Merge branch 'master' into acls_uv

12 files changed, 248 insertions, 347 deletions

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 22bb6e59a..998e41bd2 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -727,9 +727,11 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                 pinDoc.presZoomButton = true;
                 pinDoc.context = curPres;
                 Doc.AddDocToList(curPres, "data", pinDoc);
+                if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
                 if (!DocumentManager.Instance.getDocumentView(curPres)) {
                     CollectionDockingView.AddRightSplit(curPres);
                 }
+                DocumentManager.Instance.jumpToDocument(doc, false, undefined, Cast(doc.context, Doc, null));
             }
         }
     }
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 0377944b7..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>;
@@ -622,7 +623,7 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
                     </div>
                 </Tooltip> : null}
                 {!this.isText && !this.props.isDoc ? <Tooltip key="num" title={<div className="dash-tooltip">Toggle View All</div>} placement="bottom">
-                    <div className="numKeyframe" style={{ backgroundColor: this.document.editing ? "#759c75" : "#c56565" }}
+                    <div className="numKeyframe" style={{ color: this.document.editing ? "white" : "black", backgroundColor: this.document.editing ? "#5B9FDD" : "#AEDDF8" }}
                         onClick={action(() => this.document.editing = !this.document.editing)} >
                         {NumCast(this.document.currentFrame)}
                     </div>
@@ -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);
         }
     }
 
@@ -735,8 +736,10 @@ export class CollectionStackingViewChrome extends React.Component<CollectionMenu
     @action resetValue = () => { this._currentKey = this.pivotField; };
 
     render() {
+        const doctype = this.props.docView.Document.type;
+        const isPres: boolean = (doctype === DocumentType.PRES);
         return (
-            <div className="collectionStackingViewChrome-cont">
+            isPres ? (null) : <div className="collectionStackingViewChrome-cont">
                 <div className="collectionStackingViewChrome-pivotField-cont">
                     <div className="collectionStackingViewChrome-pivotField-label">
                         GROUP BY:
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 a43685a5e..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) => {
@@ -240,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/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/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index d521c70f2..b15bda87d 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -15,7 +15,7 @@ import { ScriptField } from "../../../../fields/ScriptField";
 import { BoolCast, Cast, FieldValue, NumCast, ScriptCast, StrCast } from "../../../../fields/Types";
 import { TraceMobx } from "../../../../fields/util";
 import { GestureUtils } from "../../../../pen-gestures/GestureUtils";
-import { aggregateBounds, intersectRect, returnFalse, returnOne, returnZero, Utils } from "../../../../Utils";
+import { aggregateBounds, intersectRect, returnFalse, returnOne, returnZero, Utils, setupMoveUpEvents } from "../../../../Utils";
 import { CognitiveServices } from "../../../cognitive_services/CognitiveServices";
 import { DocServer } from "../../../DocServer";
 import { Docs, DocUtils } from "../../../documents/Documents";
@@ -1496,8 +1496,123 @@ interface CollectionFreeFormViewPannableContentsProps {
 
 @observer
 class CollectionFreeFormViewPannableContents extends React.Component<CollectionFreeFormViewPannableContentsProps>{
+    @observable private _drag: string = '';
+
+    //Adds event listener so knows pointer is down and moving
+    onPointerDown = (e: React.PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        const corner = e.target as any;
+        console.log(corner.id);
+        if (corner) this._drag = corner.id;
+        const rect = document.getElementById(this._drag);
+        if (rect) {
+            console.log(this._drag);
+            setupMoveUpEvents(e.target, e, this.onPointerMove, (e) => { }, (e) => { });
+        }
+    }
+
+    //Removes all event listeners
+    onPointerUp = (e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        this._drag = "";
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+    }
+
+    //Adjusts the value in NodeStore
+    @action
+    onPointerMove = (e: PointerEvent) => {
+        const doc = document.getElementById('resizable');
+        const rect = doc!.getBoundingClientRect();
+        const toNumber = (original: number, delta: number): number => {
+            return original + (delta * this.props.zoomScaling());
+        };
+        if (doc) {
+            let height = doc.offsetHeight;
+            let width = doc.offsetWidth;
+            let top = doc.offsetTop;
+            let left = doc.offsetLeft;
+            switch (this._drag) {
+                case "": break;
+                case "resizer-br":
+                    doc.style.width = toNumber(width, e.movementX) + 'px';
+                    doc.style.height = toNumber(height, e.movementY) + 'px';
+                    break;
+                case "resizer-bl":
+                    doc.style.width = toNumber(width, -e.movementX) + 'px';
+                    doc.style.height = toNumber(height, e.movementY) + 'px';
+                    doc.style.left = toNumber(left, e.movementX) + 'px';
+                    break;
+                case "resizer-tr":
+                    doc.style.width = toNumber(width, -e.movementX) + 'px';
+                    doc.style.height = toNumber(height, -e.movementY) + 'px';
+                    doc.style.top = toNumber(top, e.movementY) + 'px';
+                case "resizer-tl":
+                    doc.style.width = toNumber(width, -e.movementX) + 'px';
+                    doc.style.height = toNumber(height, -e.movementY) + 'px';
+                    doc.style.top = toNumber(top, e.movementY) + 'px';
+                    doc.style.left = toNumber(left, e.movementX) + 'px';
+                case "resizable":
+                    doc.style.top = toNumber(top, e.movementY) + 'px';
+                    doc.style.left = toNumber(left, e.movementX) + 'px';
+            }
+            this.updateAll(height, width, top, left);
+            return false;
+        }
+        return true;
+    }
+
+    @action
+    updateAll = (width: number, height: number, top: number, left: number) => {
+        const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null);
+        const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+        this.updateList(targetDoc, activeItem["viewfinder-width-indexed"], width);
+        this.updateList(targetDoc, activeItem["viewfinder-height-indexed"], height);
+        this.updateList(targetDoc, activeItem["viewfinder-top-indexed"], top);
+        this.updateList(targetDoc, activeItem["viewfinder-left-indexed"], left);
+    }
+
+    @action
+    updateList = (doc: Doc, list: any, val: number) => {
+        const x: List<number> = list;
+        if (x && x.length >= NumCast(doc.currentFrame) + 1) {
+            x[NumCast(doc.currentFrame)] = val;
+            list = x;
+        } else if (doc && x) {
+            x.length = NumCast(doc.currentFrame) + 1;
+            x[NumCast(doc.currentFrame)] = val;
+            list = x;
+        }
+    }
+
+    // scale: NumCast(targetDoc._viewScale),
+    @computed get zoomProgressivizeContainer() {
+        const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null);
+        const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+        if (activeItem && activeItem.zoomProgressivize) {
+            const vfLeft: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-left-indexed"]);
+            const vfWidth: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-width-indexed"]);
+            const vfTop: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-top-indexed"]);
+            const vfHeight: number = PresBox.Instance.checkList(targetDoc, activeItem["viewfinder-height-indexed"]);
+            return (
+                <>
+                    {!activeItem.editZoomProgressivize ? (null) : <div id="resizable" className="resizable" onPointerDown={this.onPointerDown} style={{ width: vfWidth, height: vfHeight, top: vfTop, left: vfLeft, position: 'absolute' }}>
+                        <div className='resizers'>
+                            <div id="resizer-tl" className='resizer top-left' onPointerDown={this.onPointerDown}></div>
+                            <div id="resizer-tr" className='resizer top-right' onPointerDown={this.onPointerDown}></div>
+                            <div id="resizer-bl" className='resizer bottom-left' onPointerDown={this.onPointerDown}></div>
+                            <div id="resizer-br" className='resizer bottom-right' onPointerDown={this.onPointerDown}></div>
+                        </div>
+                    </div>}
+                </>
+            );
+        }
+    }
+
     @computed get zoomProgressivize() {
-        return PresBox.Instance && this.props.zoomProgressivize ? PresBox.Instance.zoomProgressivizeContainer : (null);
+        return PresBox.Instance && this.props.zoomProgressivize ? this.zoomProgressivizeContainer : (null);
     }
 
     @computed get progressivize() {
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index c7edd67b3..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 (
@@ -963,8 +963,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             }
             if (this.isPres) {
                 const selectedItem: boolean = PresBox.Instance?._selectedArray.length > 0;
-                return <div className="propertiesView">
-                    <div className="propertiesView-title">
+                return <div className="propertiesView" style={{ width: this.props.width }}>
+                    <div className="propertiesView-title" style={{ width: this.props.width }}>
                         Presentation
                     </div>
                     <div className="propertiesView-name">
@@ -1028,7 +1028,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                             {PresBox.Instance.newDocumentDropdown}
                         </div> : null}
                     </div>
-                    <div className="propertiesView-sharing">
+                    {/* <div className="propertiesView-sharing">
                         <div className="propertiesView-sharing-title"
                             onPointerDown={() => runInAction(() => { this.openSharing = !this.openSharing; })}
                             style={{ backgroundColor: this.openSharing ? "black" : "" }}>
@@ -1040,7 +1040,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         {this.openSharing ? <div className="propertiesView-sharing-content">
                             {this.sharingTable}
                         </div> : null}
-                    </div>
+                    </div> */}
                 </div>;
             }
         }