doc preview and arrow key movement

4 files changed, 156 insertions, 41 deletions

diff --git a/package-lock.json b/package-lock.json
index f63aaf774..307221f4a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2288,7 +2288,7 @@
         "@types/strip-bom": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/@types/strip-bom/-/strip-bom-3.0.0.tgz",
-            "integrity": "sha1-FKjsOVbC6B7bdSB5CuzyHCkK69I=",
+            "integrity": "sha512-xevGOReSYGM7g/kUBZzPqCrR/KYAo+F0yiPc85WFTJa0MSLtyFTVTU6cJu/aV4mid7IffDIWqo69THF2o4JiEQ==",
             "dev": true
         },
         "@types/strip-json-comments": {
@@ -2639,7 +2639,7 @@
                 "textarea-caret": {
                     "version": "3.0.2",
                     "resolved": "https://registry.npmjs.org/textarea-caret/-/textarea-caret-3.0.2.tgz",
-                    "integrity": "sha512-gRzeti2YS4did7UJnPQ47wrjD+vp+CJIe9zbsu0bJ987d8QVLvLNG9757rqiQTIy4hGIeFauTTJt5Xkn51UkXg=="
+                    "integrity": "sha1-82DEhpmqGr9xhoCkOjGoUGZcLK8="
                 }
             }
         },
@@ -2738,7 +2738,7 @@
         "after": {
             "version": "0.8.2",
             "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
-            "integrity": "sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA=="
+            "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8="
         },
         "agent-base": {
             "version": "6.0.2",
@@ -3530,7 +3530,7 @@
         "backo2": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
-            "integrity": "sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA=="
+            "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
         },
         "bail": {
             "version": "2.0.2",
@@ -3600,7 +3600,7 @@
         "base64-arraybuffer": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz",
-            "integrity": "sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg=="
+            "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI="
         },
         "base64-js": {
             "version": "1.5.1",
@@ -4577,7 +4577,7 @@
         "component-bind": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz",
-            "integrity": "sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw=="
+            "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E="
         },
         "component-emitter": {
             "version": "1.3.0",
@@ -4587,7 +4587,7 @@
         "component-inherit": {
             "version": "0.0.3",
             "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz",
-            "integrity": "sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA=="
+            "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM="
         },
         "compress-brotli": {
             "version": "1.3.8",
@@ -5295,7 +5295,7 @@
         "custom-event": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
-            "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg=="
+            "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU="
         },
         "cyclist": {
             "version": "1.0.1",
@@ -6201,7 +6201,7 @@
         "dynamic-dedupe": {
             "version": "0.3.0",
             "resolved": "https://registry.npmjs.org/dynamic-dedupe/-/dynamic-dedupe-0.3.0.tgz",
-            "integrity": "sha1-BuRMIj9eTpTXjvnbI6ZRXOL5YqE=",
+            "integrity": "sha512-ssuANeD+z97meYOqd50e04Ze5qp4bPqo8cCkI4TRjZkzAUgIDTrXV1R8QCdINpiI+hw14+rYazvTRdQrz0/rFQ==",
             "dev": true,
             "requires": {
                 "xtend": "^4.0.0"
@@ -6331,7 +6331,7 @@
                 "ms": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-                    "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+                    "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
                 },
                 "ws": {
                     "version": "7.4.6",
@@ -8678,7 +8678,7 @@
         "fs-extra": {
             "version": "0.26.7",
             "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.7.tgz",
-            "integrity": "sha1-muH92UiXeY7at20JGM9C0MMYT6k=",
+            "integrity": "sha512-waKu+1KumRhYv8D8gMRCKJGAMI9pRnPuEb1mvgYD0f7wBscg+h6bW4FDTmEZhB9VKxvoTtxW+Y7bnIlB7zja6Q==",
             "requires": {
                 "graceful-fs": "^4.1.2",
                 "jsonfile": "^2.1.0",
@@ -9316,14 +9316,14 @@
                 "isarray": {
                     "version": "2.0.1",
                     "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
-                    "integrity": "sha512-c2cu3UxbI+b6kR3fy0nRnAhodsvR9dx7U5+znCOzdj6IfP3upFURTr0Xl5BlQZNKZjEtxrmVyfSdeE3O57smoQ=="
+                    "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4="
                 }
             }
         },
         "has-cors": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
-            "integrity": "sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA=="
+            "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
         },
         "has-flag": {
             "version": "3.0.0",
@@ -9916,7 +9916,7 @@
         "indexof": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
-            "integrity": "sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg=="
+            "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
         },
         "inflight": {
             "version": "1.0.6",
@@ -10969,7 +10969,7 @@
         "jsonfile": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
-            "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+            "integrity": "sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==",
             "requires": {
                 "graceful-fs": "^4.1.6"
             }
@@ -11393,7 +11393,7 @@
         "lodash.isequal": {
             "version": "4.5.0",
             "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-            "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+            "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
         },
         "lodash.isplainobject": {
             "version": "4.0.6",
@@ -11654,7 +11654,7 @@
         "mathquill": {
             "version": "0.10.1-a",
             "resolved": "https://registry.npmjs.org/mathquill/-/mathquill-0.10.1-a.tgz",
-            "integrity": "sha512-snSAEwAtwdwBFSor+nVBnWWQtTw67kgAgKMyAIxuz4ZPboy0qkWZmd7BL3lfOXp/INihhRlU1PcfaAtDaRhmzA==",
+            "integrity": "sha1-vyylaQEAY6w0vNXVKa3Ag3zVPD8=",
             "requires": {
                 "jquery": "^1.12.3"
             },
@@ -11662,7 +11662,7 @@
                 "jquery": {
                     "version": "1.12.4",
                     "resolved": "https://registry.npmjs.org/jquery/-/jquery-1.12.4.tgz",
-                    "integrity": "sha512-UEVp7PPK9xXYSk8xqXCJrkXnKZtlgWkd2GsAQbMRFK6S/ePU2JN5G2Zum8hIVjzR3CpdfSqdqAzId/xd4TJHeg=="
+                    "integrity": "sha1-AeHfuikP5z3rp3zurLD5ui/sngw="
                 }
             }
         },
@@ -19974,7 +19974,7 @@
                 "component-emitter": {
                     "version": "1.2.1",
                     "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
-                    "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
+                    "integrity": "sha512-jPatnhd33viNplKjqXKRkGU345p263OIWzDL2wH3LGIGp5Kojo+uXizHmOADRvhGFFTnJqX3jBAKP6vvmSDKcA=="
                 },
                 "debug": {
                     "version": "4.1.1",
@@ -19987,7 +19987,7 @@
                 "isarray": {
                     "version": "2.0.1",
                     "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
-                    "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4="
+                    "integrity": "sha512-c2cu3UxbI+b6kR3fy0nRnAhodsvR9dx7U5+znCOzdj6IfP3upFURTr0Xl5BlQZNKZjEtxrmVyfSdeE3O57smoQ=="
                 }
             }
         },
@@ -20852,7 +20852,7 @@
         "to-array": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",
-            "integrity": "sha512-LhVdShQD/4Mk4zXNroIQZJC+Ap3zgLcDuwEdcmLv9CCO73NWockQDwyUnW/m8VX/EElfL6FcYx7EeutN4HJA6A=="
+            "integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA="
         },
         "to-fast-properties": {
             "version": "2.0.0",
@@ -21223,7 +21223,7 @@
                 "strip-bom": {
                     "version": "3.0.0",
                     "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-                    "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+                    "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
                     "dev": true
                 }
             }
@@ -22424,7 +22424,7 @@
                 "resolve-cwd": {
                     "version": "2.0.0",
                     "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
-                    "integrity": "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=",
+                    "integrity": "sha512-ccu8zQTrzVr954472aUVPLEcB3YpKSYR3cg/3lo1okzobPBM+1INXBbBZlDbnI/hbEocnf8j0QVo43hQKrbchg==",
                     "dev": true,
                     "requires": {
                         "resolve-from": "^3.0.0"
@@ -22433,7 +22433,7 @@
                 "resolve-from": {
                     "version": "3.0.0",
                     "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-                    "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
+                    "integrity": "sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw==",
                     "dev": true
                 },
                 "semver": {
@@ -22974,7 +22974,7 @@
         "yeast": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
-            "integrity": "sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg=="
+            "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
         },
         "yn": {
             "version": "3.1.1",
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 4fa5d80e2..bd0fc11b3 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -3,6 +3,8 @@
 .collectionSchemaView {
     cursor: default;
     height: 100%;
+    display: flex;
+    flex-direction: row;
 
     .schema-table {
         background-color: $white;
@@ -124,6 +126,12 @@
             flex-direction: row;
         }
     }
+
+    .schema-preview-divider {
+        height: 100%;
+        background: black;
+        cursor: ew-resize;
+    }
 }
 
 .schema-header-row,
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 4fb3f68c1..5d4777e12 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -8,7 +8,7 @@ import { RichTextField } from '../../../../fields/RichTextField';
 import { listSpec } from '../../../../fields/Schema';
 import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types';
 import { ImageField } from '../../../../fields/URLField';
-import { emptyFunction, returnEmptyString, setupMoveUpEvents, Utils } from '../../../../Utils';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../../../Utils';
 import { Docs, DocUtils } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
 import { SelectionManager } from '../../../util/SelectionManager';
@@ -23,6 +23,7 @@ import { CollectionSubView } from '../CollectionSubView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
 import { SchemaRowBox } from './SchemaRowBox';
+import { DefaultStyleProvider } from '../../StyleProvider';
 
 export enum ColumnType {
     Number,
@@ -43,10 +44,12 @@ export class CollectionSchemaView extends CollectionSubView() {
     private _minColWidth: number = 150;
 
     public static _rowMenuWidth: number = 100;
+    public static _previewDividerWidth: number = 4;
     @observable _selectedDocs: ObservableSet = new ObservableSet<Doc>();
     @observable _rowEles: ObservableMap = new ObservableMap<Doc, HTMLDivElement>();
     @observable _isDragging: boolean = false;
     @observable _displayColumnWidths: number[] | undefined;
+    @observable _previewDoc: Doc | undefined;
 
     get documentKeys() {
         const docs = this.childDocs;
@@ -63,6 +66,14 @@ export class CollectionSchemaView extends CollectionSubView() {
         return Array.from(Object.keys(keys));
     }
 
+    @computed get previewWidth() {
+        return NumCast(this.props.Document.schemaPreviewWidth);
+    }
+
+    @computed get tableWidth() {
+        return this.props.PanelWidth() - this.previewWidth - CollectionSchemaView._previewDividerWidth;
+    }
+
     @computed get columnKeys() {
         return Cast(this.layoutDoc.columnKeys, listSpec('string'), defaultColumnKeys);
     }
@@ -71,14 +82,14 @@ export class CollectionSchemaView extends CollectionSubView() {
         let widths = Cast(
             this.layoutDoc.columnWidths,
             listSpec('number'),
-            this.columnKeys.map(() => (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth) / this.columnKeys.length)
+            this.columnKeys.map(() => (this.tableWidth - CollectionSchemaView._rowMenuWidth) / this.columnKeys.length)
         );
 
         const totalWidth = widths.reduce((sum, width) => sum + width, 0);
-        if (totalWidth !== this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth) {
+        if (totalWidth !== this.tableWidth - CollectionSchemaView._rowMenuWidth) {
             widths = widths.map(w => {
                 const proportion = w / totalWidth;
-                return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth);
+                return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth);
             });
         }
 
@@ -97,6 +108,42 @@ export class CollectionSchemaView extends CollectionSubView() {
         return BoolCast(this.layoutDoc.sortDesc);
     }
 
+    componentDidMount() {
+        document.addEventListener('keydown', this.onKeyDown);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.onKeyDown);
+    }
+
+    @action
+    onKeyDown = (e: KeyboardEvent) => {
+        if (this._selectedDocs.size > 0) {
+            if (e.key == 'ArrowDown') {
+                const lastDoc = Array.from(this._selectedDocs.values()).lastElement();
+                const lastIndex = this.childDocs.indexOf(lastDoc);
+                if (lastIndex >= 0 && lastIndex < this.childDocs.length - 1) {
+                    this._selectedDocs.clear();
+                    const newDoc = this.childDocs[lastIndex + 1];
+                    this._selectedDocs.add(newDoc);
+                    SelectionManager.SelectSchemaViewDoc(newDoc);
+                    this._previewDoc = newDoc;
+                }
+            }
+            if (e.key == 'ArrowUp') {
+                const firstDoc = Array.from(this._selectedDocs.values())[0];
+                const firstIndex = this.childDocs.indexOf(firstDoc);
+                if (firstIndex > 0) {
+                    this._selectedDocs.clear();
+                    const newDoc = this.childDocs[firstIndex - 1];
+                    this._selectedDocs.add(newDoc);
+                    SelectionManager.SelectSchemaViewDoc(newDoc);
+                    this._previewDoc = newDoc;
+                }
+            }
+        }
+    };
+
     @undoBatch
     @action
     setSort = (field: string, desc: boolean) => {
@@ -134,10 +181,10 @@ export class CollectionSchemaView extends CollectionSubView() {
         }
 
         let currWidths = [...this.storedColumnWidths];
-        const newColWidth = this.props.PanelWidth() / (currWidths.length + 1);
+        const newColWidth = this.tableWidth / (currWidths.length + 1);
         currWidths = currWidths.map(w => {
-            const proportion = w / (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth);
-            return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth - newColWidth);
+            const proportion = w / (this.tableWidth - CollectionSchemaView._rowMenuWidth);
+            return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth - newColWidth);
         });
         currWidths.splice(index + 1, 0, newColWidth);
         this.layoutDoc.columnWidths = new List<number>(currWidths);
@@ -159,8 +206,8 @@ export class CollectionSchemaView extends CollectionSubView() {
         let currWidths = [...this.storedColumnWidths];
         const removedColWidth = currWidths[index];
         currWidths = currWidths.map(w => {
-            const proportion = w / (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth - removedColWidth);
-            return proportion * (this.props.PanelWidth() - CollectionSchemaView._rowMenuWidth);
+            const proportion = w / (this.tableWidth - CollectionSchemaView._rowMenuWidth - removedColWidth);
+            return proportion * (this.tableWidth - CollectionSchemaView._rowMenuWidth);
         });
         currWidths.splice(index, 1);
         this.layoutDoc.columnWidths = new List<number>(currWidths);
@@ -283,6 +330,12 @@ export class CollectionSchemaView extends CollectionSubView() {
         } else {
             SelectionManager.SelectSchemaViewDoc(undefined);
         }
+
+        if (this._selectedDocs.size == 1) {
+            this._previewDoc = Array.from(this._selectedDocs)[0];
+        } else {
+            this._previewDoc = undefined;
+        }
     };
 
     @action
@@ -346,6 +399,21 @@ export class CollectionSchemaView extends CollectionSubView() {
         return true;
     };
 
+    onDividerDown = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, emptyFunction);
+    };
+
+    @action
+    onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => {
+        // const nativeWidth = this._previewCont!.getBoundingClientRect();
+        // const minWidth = 40;
+        // const maxWidth = 1000;
+        // const movedWidth = this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0];
+        // const width = movedWidth < minWidth ? minWidth : movedWidth > maxWidth ? maxWidth : movedWidth;
+        this.props.Document.schemaPreviewWidth = this.previewWidth - delta[0];
+        return false;
+    };
+
     @action
     addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => {
         if (!value && !forceEmptyNote) return false;
@@ -440,11 +508,14 @@ export class CollectionSchemaView extends CollectionSubView() {
                     this._ref = ele;
                     this.createDashEventsTarget(ele);
                 }}
-                onPointerDown={action(() => {
-                    this._selectedDocs.clear();
-                })}
                 onDrop={this.onExternalDrop.bind(this)}>
-                <div className="schema-table">
+                <div
+                    className="schema-table"
+                    onPointerDown={action(() => {
+                        this._selectedDocs.clear();
+                        SelectionManager.SelectSchemaViewDoc(undefined);
+                        this._previewDoc = undefined;
+                    })}>
                     <div className="schema-header-row">
                         <div className="row-menu" style={{ width: CollectionSchemaView._rowMenuWidth }}></div>
                         {this.columnKeys.map((key, index) => {
@@ -467,7 +538,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                             );
                         })}
                     </div>
-                    <div className="schema-table-content">
+                    <div className="schema-table-content" onPointerDown={e => e.stopPropagation()}>
                         {this.childDocs.map((doc: Doc, index: number) => {
                             const dataDoc = !doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS ? undefined : this.props.DataDoc;
                             let dref: Opt<DocumentView>;
@@ -493,8 +564,43 @@ export class CollectionSchemaView extends CollectionSubView() {
                             );
                         })}
                     </div>
+                    <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} />
                 </div>
-                <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} />
+                <div className="schema-preview-divider" style={{ width: CollectionSchemaView._previewDividerWidth }} onPointerDown={this.onDividerDown}></div>
+                {this.previewWidth > 0 && (
+                    <div style={{ width: `${this.previewWidth}px` }}>
+                        {this._previewDoc && (
+                            <DocumentView
+                                Document={this._previewDoc}
+                                DataDoc={undefined}
+                                fitContentsToBox={returnTrue}
+                                dontCenter={'y'}
+                                focus={DocUtils.DefaultFocus}
+                                renderDepth={this.props.renderDepth}
+                                rootSelected={this.rootSelected}
+                                PanelWidth={() => this.previewWidth}
+                                PanelHeight={this.props.PanelHeight}
+                                isContentActive={returnTrue}
+                                isDocumentActive={returnFalse}
+                                ScreenToLocalTransform={() => this.props.ScreenToLocalTransform().translate(-this.tableWidth, 0)}
+                                docFilters={this.childDocFilters}
+                                docRangeFilters={this.childDocRangeFilters}
+                                searchFilterDocs={this.searchFilterDocs}
+                                styleProvider={DefaultStyleProvider}
+                                docViewPath={returnEmptyDoclist}
+                                ContainingCollectionDoc={this.props.CollectionView?.props.Document}
+                                ContainingCollectionView={this.props.CollectionView}
+                                moveDocument={this.props.moveDocument}
+                                addDocument={this.props.addDocument}
+                                removeDocument={this.props.removeDocument}
+                                whenChildContentsActiveChanged={this.props.whenChildContentsActiveChanged}
+                                addDocTab={this.props.addDocTab}
+                                pinToPres={this.props.pinToPres}
+                                bringToFront={returnFalse}
+                            />
+                        )}
+                    </div>
+                )}
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 9d5dfe507..2e303f91c 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react';
 import { emptyFunction, setupMoveUpEvents } from '../../../../Utils';
 import './CollectionSchemaView.scss';
 import { ColumnType } from './CollectionSchemaView';
+import { Colors } from 'browndash-components';
 
 export interface SchemaColumnHeaderProps {
     columnKeys: string[];
@@ -253,7 +254,7 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
                         }}>
                         <FontAwesomeIcon icon="trash" />
                     </div>
-                    <div className="schema-header-button" onPointerDown={this.sortClicked}>
+                    <div className="schema-header-button" onPointerDown={this.sortClicked} style={this.props.sortField == this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
                         <FontAwesomeIcon icon="caret-right" style={this.props.sortField == this.fieldKey ? { transform: `rotate(${this.props.sortDesc ? '270deg' : '90deg'})` } : {}} />
                     </div>
                     <div className="schema-header-button" onPointerDown={e => this.toggleFilterMenu()}>