Merge branch 'sharing-jenny' of https://github.com/brown-dash/Dash-Web into sharing-jenny

12 files changed, 158 insertions, 157 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 75024d9c9..63080f8cf 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1564,7 +1564,7 @@ export namespace DocUtils {
         const documentList: ContextMenuProps[] = DocListCast(DocListCast(Doc.MyTools?.data)[0]?.data)
             .filter(btnDoc => !btnDoc.hidden)
             .map(btnDoc => Cast(btnDoc?.dragFactory, Doc, null))
-            .filter(doc => doc && doc !== Doc.UserDoc().emptyPresentation)
+            .filter(doc => doc && doc !== Doc.UserDoc().emptyTrail)
             .map((dragDoc, i) => ({
                 description: ':' + StrCast(dragDoc.title).replace('Untitled ', ''),
                 event: undoBatch((args: { x: number; y: number }) => {
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index c2cf5dae0..3f3816a8a 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -207,7 +207,7 @@ export class CurrentUserUtils {
         DocUtils.AssignOpts(DocCast(doc[field]), {}, iconTemplates);
     }
 
-    /// initalizes the set of "empty<DocType>" versions of each document type with default fields.  e.g.,. emptyNote, emptyPresentation
+    /// initalizes the set of "empty<DocType>" versions of each document type with default fields.  e.g.,. emptyNote, emptyTrail
     static creatorBtnDescriptors(doc: Doc): {
         title: string, toolTip: string, icon: string,  ignoreClick?: boolean, dragFactory?: Doc, 
         backgroundColor?: string,  clickFactory?: Doc, scripts?: { onClick?: string, onDragStart?: string}, funcs?: {onDragStart?:string, hidden?: string},
@@ -269,7 +269,7 @@ export class CurrentUserUtils {
             {key: "Script",     creator: opts => Docs.Create.ScriptingDocument(null, opts), opts: { _width: 200, _height: 250, }},
             // {key: "DataViz",    creator: opts => Docs.Create.DataVizDocument(opts),         opts: { _width: 300, _height: 300 }},
             {key: "Header",     creator: headerTemplate,                                    opts: { _width: 300, _height: 70, _headerPointerEvents: "all", _headerHeight: 12, _headerFontSize: 9, _autoHeight: true,}},
-            {key: "Presentation",creator: Docs.Create.PresDocument,                         opts: { _width: 400, _height: 500, _viewType: CollectionViewType.Stacking, targetDropAction: "alias" as any, treeViewHideTitle: true,  _chromeHidden: true, boxShadow: "0 0" }},
+            {key: "Trail",      creator: Docs.Create.PresDocument,                          opts: { _width: 400, _height: 500, _viewType: CollectionViewType.Stacking, targetDropAction: "alias" as any, treeViewHideTitle: true,  _chromeHidden: true, boxShadow: "0 0" }},
             {key: "Tab",        creator: opts => Docs.Create.FreeformDocument([], opts),    opts: { _width: 500, _height: 800, _backgroundGridShow: true, }},
             {key: "Slide",      creator: opts => Docs.Create.TreeDocument([], opts),        opts: { _width: 300, _height: 200, _viewType: CollectionViewType.Tree, 
                                                                                                 treeViewHasOverlay: true, _fontSize: "20px", _autoHeight: true, 
@@ -336,14 +336,6 @@ export class CurrentUserUtils {
             { title: "Trails",          target: Doc.UserDoc(),                                     icon: "pres-trail",  funcs: {target: getActiveDashTrails}},
             { title: "User Doc View",   target: this.setupUserDocView(doc, "myUserDocView"),       icon: "address-card",funcs: {hidden: "IsNoviceMode()"} },
         ].map(tuple => ({...tuple, scripts:{onClick: 'selectMainMenu(self)'}}));
-      
-
-      //   Doc.UserDoc().myButtons.trailsBtn.target = Doc.ActiveDashboard.myTrails;
-      //   const foo = new Doc();
-      //   foo.a = 3;
-      //   foo.a = "bob";
-      //   foo.a = new List<number>([1]); // = []
-      //   foo.a = ComputedField.MakeFunction("() =>'hello'"); // () => "hello";
     }
 
     /// the empty panel that is filled with whichever left menu button's panel has been selected
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index 478234eb0..6415601f1 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -257,7 +257,6 @@ export class DashboardView extends React.Component {
     };
 
     public static createNewDashboard = (id?: string, name?: string) => {
-        //   const presentation = Doc.MakeCopy(Doc.UserDoc().emptyPresentation as Doc, true);
         const dashboards = Doc.MyDashboards;
         const dashboardCount = DocListCast(dashboards.data).length + 1;
         const freeformOptions: DocumentOptions = {
@@ -280,9 +279,6 @@ export class DashboardView extends React.Component {
         dashboardDoc['pane-count'] = 1;
 
         Doc.AddDocToList(dashboards, 'data', dashboardDoc);
-        // open this new dashboard
-        Doc.ActiveDashboard = dashboardDoc;
-        Doc.ActivePage = 'dashboard';
 
         // this section is creating the button document itself  ===  myTrails = new Button
         const reqdBtnOpts: DocumentOptions = {
@@ -301,10 +297,9 @@ export class DashboardView extends React.Component {
         const reqdBtnScript = { onClick: `createNewPresentation()` };
         const myTrailsBtn = DocUtils.AssignScripts(Docs.Create.FontIconDocument(reqdBtnOpts), reqdBtnScript);
 
-        //  createa a list of presentations (as a tree view collection) and store i on the new dashboard
-        // instead of assigninbg Doc.UserDoc().myrails we want to assign Doc.AxtiveDashboard.myTrails
-        // but we don't wanbt to create the list of trails here-- but rather in createDashbarod
-        // myTrail
+        //  createa a list of presentations (as a tree view collection) and store it on the new dashboard
+        // instead of assigning Doc.UserDoc().myrails we want to assign Doc.AxtiveDashboard.myTrails
+        // but we don't want to create the list of trails here-- but rather in createDashboard
         const reqdOpts: DocumentOptions = {
             title: 'My Trails',
             _showTitle: 'title',
@@ -327,12 +322,15 @@ export class DashboardView extends React.Component {
             system: true,
             explainer: 'All of the trails that you have created will appear here.',
         };
-        const myTrails = DocUtils.AssignScripts(Docs.Create.TreeDocument([], reqdOpts), { treeViewChildDoubleClick: 'openPresentation(documentView.rootDoc)' });
+        dashboardDoc.myTrails = DocUtils.AssignScripts(Docs.Create.TreeDocument([], reqdOpts), { treeViewChildDoubleClick: 'openPresentation(documentView.rootDoc)' });
 
-        dashboardDoc.myTrails = myTrails;
+        // open this new dashboard
+        Doc.ActiveDashboard = dashboardDoc;
+        Doc.ActivePage = 'dashboard';
+        Doc.ActivePresentation = undefined;
         const contextMenuScripts = [reqdBtnScript.onClick];
-        if (Cast(myTrails.contextMenuScripts, listSpec(ScriptField), null)?.length !== contextMenuScripts.length) {
-            myTrails.contextMenuScripts = new List<ScriptField>(contextMenuScripts.map(script => ScriptField.MakeFunction(script)!));
+        if (Cast(Doc.MyTrails.contextMenuScripts, listSpec(ScriptField), null)?.length !== contextMenuScripts.length) {
+            Doc.MyTrails.contextMenuScripts = new List<ScriptField>(contextMenuScripts.map(script => ScriptField.MakeFunction(script)!));
         }
     };
 }
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 79f83b386..c1cc80163 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -11,12 +11,12 @@ import * as ReactDOM from 'react-dom';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
 import { List } from '../../fields/List';
 import { ScriptField } from '../../fields/ScriptField';
-import { StrCast } from '../../fields/Types';
+import { DocCast, StrCast } from '../../fields/Types';
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero, setupMoveUpEvents, simulateMouseClick, Utils } from '../../Utils';
 import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
 import { DocServer } from '../DocServer';
 import { Docs, DocUtils } from '../documents/Documents';
-import { CollectionViewType } from '../documents/DocumentTypes';
+import { CollectionViewType, DocumentType } from '../documents/DocumentTypes';
 import { CaptureManager } from '../util/CaptureManager';
 import { DocumentManager } from '../util/DocumentManager';
 import { GroupManager } from '../util/GroupManager';
@@ -34,6 +34,7 @@ import { CollectionDockingView } from './collections/CollectionDockingView';
 import { MarqueeOptionsMenu } from './collections/collectionFreeForm/MarqueeOptionsMenu';
 import { CollectionLinearView } from './collections/collectionLinear';
 import { CollectionMenu } from './collections/CollectionMenu';
+import { CollectionView } from './collections/CollectionView';
 import './collections/TreeView.scss';
 import { ComponentDecorations } from './ComponentDecorations';
 import { ContextMenu } from './ContextMenu';
@@ -58,6 +59,7 @@ import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
 import { LinkDocPreview } from './nodes/LinkDocPreview';
 import { RadialMenu } from './nodes/RadialMenu';
 import { TaskCompletionBox } from './nodes/TaskCompletedBox';
+import { PresBox } from './nodes/trails';
 import { WebBox } from './nodes/WebBox';
 import { OverlayView } from './OverlayView';
 import { AnchorMenu } from './pdf/AnchorMenu';
@@ -113,6 +115,7 @@ export class MainView extends React.Component {
     }
     @observable mainDoc: Opt<Doc>;
     @computed private get mainContainer() {
+        if (Doc.ActiveDashboard) return Doc.ActiveDashboard;
         if (window.location.pathname.startsWith('/doc/')) {
             DocServer.GetRefField(window.location.pathname.substring('/doc/'.length)).then(main => runInAction(() => (this.mainDoc = main as Doc)));
             return this.mainDoc;
@@ -159,11 +162,14 @@ export class MainView extends React.Component {
                 'viewTransition',
                 'treeViewOpen',
                 'showSidebar',
+                'itemIndex', // for changing slides in presentations
                 'sidebarWidthPercent',
                 'currentTimecode',
                 'timelineHeightPercent',
                 'panX',
                 'panY',
+                'overlayX',
+                'overlayY',
                 'fitWidth',
                 'nativeWidth',
                 'nativeHeight',
@@ -178,6 +184,7 @@ export class MainView extends React.Component {
                 'chromeHidden',
                 'currentFrame',
                 'width',
+                'height',
                 'nativeWidth',
             ]); // can play with these fields on someone else's
         }
@@ -229,7 +236,13 @@ export class MainView extends React.Component {
             if (pathname.length > 1 && pathname[0] === 'doc') {
                 Doc.MainDocId = pathname[1];
                 //!this.userDoc &&
-                DocServer.GetRefField(pathname[1]).then(action(field => field instanceof Doc && (Doc.GuestTarget = field)));
+                DocServer.GetRefField(pathname[1]).then(
+                    action(field => {
+                        if (field instanceof Doc && field._viewType !== CollectionViewType.Docking) {
+                            Doc.GuestTarget = field;
+                        }
+                    })
+                );
             }
         }
 
@@ -522,21 +535,23 @@ export class MainView extends React.Component {
 
     @action
     createNewPresentation = () => {
-        const pres = Docs.Create.PresDocument({ title: 'Untitled Trail', _viewType: CollectionViewType.Stacking, _fitWidth: true, _width: 400, _height: 500, targetDropAction: 'alias', _chromeHidden: true, boxShadow: '0 0' });
+        const pres = Doc.MakeCopy(Doc.UserDoc().emptyTrail as Doc, true);
+        Docs.Create.PresDocument({ title: 'Untitled Trail', _viewType: CollectionViewType.Stacking, _fitWidth: true, treeViewHideTitle: true, _width: 400, _height: 500, targetDropAction: 'alias', _chromeHidden: true, boxShadow: '0 0' });
         CollectionDockingView.AddSplit(pres, 'left');
-      
-        const myTrails = Doc.ActiveDashboard!.myTrails as Doc
-        console.log(Doc.ActiveDashboard!.myTrails)
-        Doc.AddDocToList(myTrails, "trails", pres)
-        Doc.ActivePresentation = pres
+        Doc.MyTrails && Doc.AddDocToList(Doc.MyTrails, 'data', pres); // Doc.MyTrails should be created in createDashboard
+        Doc.ActivePresentation = pres;
     };
 
     @action
     openPresentation = (pres: Doc) => {
-        CollectionDockingView.AddSplit(pres, 'left');
-        Doc.ActivePresentation = pres;
-        Doc.AddDocToList(Doc.MyTrails, 'data', pres);
-        this.closeFlyout();
+        if (pres.type === DocumentType.PRES) {
+            CollectionDockingView.AddSplit(pres, 'left');
+            Doc.MyTrails && (Doc.ActivePresentation = pres);
+            Doc.AddDocToList(Doc.MyTrails, 'data', pres);
+            this.closeFlyout();
+        } else {
+            PresBox.NavigateToDoc(DocCast(pres.presentationTargetDoc), pres);
+        }
     };
 
     @action
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index 5242fabb8..2354e84ff 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -164,7 +164,7 @@ export class OverlayView extends React.Component {
 
     docScreenToLocalXf = computedFn(
         function docScreenToLocalXf(this: any, doc: Doc) {
-            return () => new Transform(-NumCast(doc.x), -NumCast(doc.y), 1);
+            return () => new Transform(-NumCast(doc.overlayX), -NumCast(doc.overlayY), 1);
         }.bind(this)
     );
 
@@ -175,8 +175,8 @@ export class OverlayView extends React.Component {
             const dref = React.createRef<HTMLDivElement>();
             const onPointerMove = action((e: PointerEvent, down: number[]) => {
                 if (e.buttons === 1) {
-                    d.x = e.clientX + offsetx;
-                    d.y = e.clientY + offsety;
+                    d.overlayX = e.clientX + offsetx;
+                    d.overlayY = e.clientY + offsety;
                 }
                 if (e.metaKey) {
                     const dragData = new DragManager.DocumentDragData([d]);
@@ -198,8 +198,8 @@ export class OverlayView extends React.Component {
 
             const onPointerDown = (e: React.PointerEvent) => {
                 setupMoveUpEvents(this, e, onPointerMove, emptyFunction, emptyFunction);
-                offsetx = NumCast(d.x) - e.clientX;
-                offsety = NumCast(d.y) - e.clientY;
+                offsetx = NumCast(d.overlayX) - e.clientX;
+                offsety = NumCast(d.overlayY) - e.clientY;
             };
             return (
                 <div
@@ -207,7 +207,7 @@ export class OverlayView extends React.Component {
                     ref={dref}
                     key={d[Id]}
                     onPointerDown={onPointerDown}
-                    style={{ top: d.type === 'presentation' ? 0 : undefined, width: NumCast(d._width), height: NumCast(d._height), transform: `translate(${d.x}px, ${d.y}px)` }}>
+                    style={{ top: d.type === 'presentation' ? 0 : undefined, width: NumCast(d._width), height: NumCast(d._height), transform: `translate(${d.overlayX}px, ${d.overlayY}px)` }}>
                     <DocumentView
                         Document={d}
                         rootSelected={returnTrue}
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 2708c561d..842664402 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -7,7 +7,7 @@ import { intersection } from 'lodash';
 import { action, autorun, computed, Lambda, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { ColorState, SketchPicker } from 'react-color';
-import { AclAdmin, AclAugment, AclEdit, AclPrivate, AclReadonly, AclSelfEdit, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, NumListCast, Opt, StrListCast, WidthSym } from '../../fields/Doc';
+import { AclAdmin, AclAugment, AclEdit, AclPrivate, AclReadonly, AclSelfEdit, AclSym, AclUnset, DataSym, Doc, DocListCast, Field, HeightSym, NumListCast, Opt, StrListCast, WidthSym } from '../../fields/Doc';
 import { Id } from '../../fields/FieldSymbols';
 import { InkField } from '../../fields/InkField';
 import { List } from '../../fields/List';
@@ -33,6 +33,7 @@ import { PropertiesDocBacklinksSelector } from './PropertiesDocBacklinksSelector
 import { PropertiesDocContextSelector } from './PropertiesDocContextSelector';
 import './PropertiesView.scss';
 import { DefaultStyleProvider } from './StyleProvider';
+import { listSpec } from '../../fields/Schema';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -1156,13 +1157,21 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
      */
     createNewFilterDoc = () => {
         if (this.selectedDoc) {
+            const curFilterDoc = DocCast(this.selectedDoc.currentFilter);
             const currentDocFilters = this.selectedDoc._docFilters;
             const currentDocRangeFilters = this.selectedDoc._docRangeFilters;
             this.selectedDoc._docFilters = new List<string>();
             this.selectedDoc._docRangeFilters = new List<string>();
-            (this.selectedDoc.currentFilter as Doc)._docFiltersList = currentDocFilters;
-            (this.selectedDoc.currentFilter as Doc)._docRangeFiltersList = currentDocRangeFilters;
-            this.selectedDoc.currentFilter = FilterBox.createFilterDoc();
+            if (DocListCast(Doc.UserDoc().savedFilters).includes(curFilterDoc)) {
+                curFilterDoc._docFiltersList = currentDocFilters;
+                curFilterDoc._docRangeFiltersList = currentDocRangeFilters;
+                this.selectedDoc.currentFilter = FilterBox.createFilterDoc();
+            } else {
+                Doc.GetProto(curFilterDoc).data = undefined;
+                Doc.GetProto(curFilterDoc).title = 'Unnamed Filter';
+                curFilterDoc._docFiltersList = undefined;
+                curFilterDoc._docRangeFiltersList = undefined;
+            }
         }
     };
 
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 6d70cc0d2..10b54edad 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -455,7 +455,7 @@ export class CollectionDockingView extends CollectionSubView() {
     };
 
     tabDestroyed = (tab: any) => {
-        if (tab.DashDoc?.type !== DocumentType.KVP) {
+        if (![DocumentType.KVP, DocumentType.PRES].includes(tab.DashDoc?.type)) {
             Doc.AddDocToList(Doc.MyHeaderBar, 'data', tab.DashDoc);
             Doc.AddDocToList(Doc.MyRecentlyClosed, 'data', tab.DashDoc, undefined, true, true);
         }
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 7522affa7..46386fa71 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -213,75 +213,75 @@ export class TabDocView extends React.Component<TabDocViewProps> {
     public static PinDoc(docs: Doc | Doc[], pinProps?: PinProps) {
         const docList = docs instanceof Doc ? [docs] : docs;
 
-        let curPres = Doc.ActivePresentation;
-        console.log(curPres);
-        if (!curPres) {
-            curPres = Doc.MakeCopy(Doc.UserDoc().emptyPresentation as Doc, true);
+        const batch = UndoManager.StartBatch('pinning doc');
+        const curPres = Doc.ActivePresentation ?? Doc.MakeCopy(Doc.UserDoc().emptyTrail as Doc, true);
+
+        if (!Doc.ActivePresentation) {
+            Doc.AddDocToList(Doc.MyTrails, 'data', curPres);
             Doc.ActivePresentation = curPres;
         }
 
-        curPres &&
-            docList.forEach(doc => {
-                // Edge Case 1: Cannot pin document to itself
-                if (doc === curPres) {
-                    alert('Cannot pin presentation document to itself');
-                    return;
-                }
-                const pinDoc = Doc.MakeAlias(doc);
-                pinDoc.presentationTargetDoc = doc;
-                pinDoc.title = doc.title + ' - Slide';
-                pinDoc.data = new List<Doc>(); // the children of the alias' layout are the presentation slide children.  the alias' data field might be children of a collection, PDF data, etc -- in any case we don't want the tree view to "see" this data
-                pinDoc.presMovement = PresMovement.Zoom;
-                pinDoc.groupWithUp = false;
-                pinDoc.context = curPres;
-                // these should potentially all be props passed down by the CollectionTreeView to the TreeView elements.  That way the PresBox could configure all of its children at render time
-                pinDoc.treeViewRenderAsBulletHeader = true; // forces a tree view to render the document next to the bullet in the header area
-                pinDoc.treeViewHeaderWidth = '100%'; // forces the header to grow to be the same size as its largest sibling.
-                pinDoc.treeViewChildrenOnRoot = true; // tree view will look for hierarchical children on the root doc, not the data doc.
-                pinDoc.treeViewFieldKey = 'data'; // tree view will treat the 'data' field as the field where the hierarchical children are located instead of using the document's layout string field
-                pinDoc.treeViewExpandedView = 'data'; // in case the data doc has an expandedView set, this will mask that field and use the 'data' field when expanding the tree view
-                pinDoc.treeViewGrowsHorizontally = true; // the document expands horizontally when displayed as a tree view header
-                pinDoc.treeViewHideHeaderIfTemplate = true; // this will force the document to render itself as the tree view header
-                const presArray: Doc[] = PresBox.Instance?.sortArray();
-                const size: number = PresBox.Instance?.selectedArray.size;
-                const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined;
-                const duration = NumCast(doc[`${Doc.LayoutFieldKey(pinDoc)}-duration`], null);
+        docList.forEach(doc => {
+            // Edge Case 1: Cannot pin document to itself
+            if (doc === curPres) {
+                alert('Cannot pin presentation document to itself');
+                return;
+            }
+            const pinDoc = Doc.MakeAlias(doc);
+            pinDoc.presentationTargetDoc = doc;
+            pinDoc.title = doc.title + ' - Slide';
+            pinDoc.data = new List<Doc>(); // the children of the alias' layout are the presentation slide children.  the alias' data field might be children of a collection, PDF data, etc -- in any case we don't want the tree view to "see" this data
+            pinDoc.presMovement = PresMovement.Zoom;
+            pinDoc.groupWithUp = false;
+            pinDoc.context = curPres;
+            // these should potentially all be props passed down by the CollectionTreeView to the TreeView elements.  That way the PresBox could configure all of its children at render time
+            pinDoc.treeViewRenderAsBulletHeader = true; // forces a tree view to render the document next to the bullet in the header area
+            pinDoc.treeViewHeaderWidth = '100%'; // forces the header to grow to be the same size as its largest sibling.
+            pinDoc.treeViewChildrenOnRoot = true; // tree view will look for hierarchical children on the root doc, not the data doc.
+            pinDoc.treeViewFieldKey = 'data'; // tree view will treat the 'data' field as the field where the hierarchical children are located instead of using the document's layout string field
+            pinDoc.treeViewExpandedView = 'data'; // in case the data doc has an expandedView set, this will mask that field and use the 'data' field when expanding the tree view
+            pinDoc.treeViewGrowsHorizontally = true; // the document expands horizontally when displayed as a tree view header
+            pinDoc.treeViewHideHeaderIfTemplate = true; // this will force the document to render itself as the tree view header
+            const presArray: Doc[] = PresBox.Instance?.sortArray();
+            const size: number = PresBox.Instance?.selectedArray.size;
+            const presSelected: Doc | undefined = presArray && size ? presArray[size - 1] : undefined;
+            const duration = NumCast(doc[`${Doc.LayoutFieldKey(pinDoc)}-duration`], null);
 
-                PresBox.pinDocView(pinDoc, pinProps, doc);
-                pinDoc.onClick = ScriptField.MakeFunction('navigateToDoc(self.presentationTargetDoc, self)');
-                Doc.AddDocToList(curPres, 'data', pinDoc, presSelected);
-                if (!pinProps?.audioRange && duration !== undefined) {
-                    pinDoc.mediaStart = 'manual';
-                    pinDoc.mediaStop = 'manual';
-                    pinDoc.presStartTime = NumCast(doc.clipStart);
-                    pinDoc.presEndTime = NumCast(doc.clipEnd, duration);
-                }
-                //save position
-                if (pinProps?.activeFrame !== undefined) {
-                    pinDoc.presActiveFrame = pinProps?.activeFrame;
-                    pinDoc.title = doc.title + ' (move)';
-                    pinDoc.presMovement = PresMovement.Pan;
-                }
-                if (pinDoc.isInkMask) {
-                    pinDoc.presHideAfter = true;
-                    pinDoc.presHideBefore = true;
-                    pinDoc.presMovement = PresMovement.None;
-                }
-                if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
-                PresBox.Instance?.clearSelectedArray();
-                pinDoc && PresBox.Instance?.addToSelectedArray(pinDoc); //Update selected array
-            });
+            PresBox.pinDocView(pinDoc, pinProps, doc);
+            pinDoc.onClick = ScriptField.MakeFunction('navigateToDoc(self.presentationTargetDoc, self)');
+            Doc.AddDocToList(curPres, 'data', pinDoc, presSelected);
+            if (!pinProps?.audioRange && duration !== undefined) {
+                pinDoc.mediaStart = 'manual';
+                pinDoc.mediaStop = 'manual';
+                pinDoc.presStartTime = NumCast(doc.clipStart);
+                pinDoc.presEndTime = NumCast(doc.clipEnd, duration);
+            }
+            //save position
+            if (pinProps?.activeFrame !== undefined) {
+                pinDoc.presActiveFrame = pinProps?.activeFrame;
+                pinDoc.title = doc.title + ' (move)';
+                pinDoc.presMovement = PresMovement.Pan;
+            }
+            if (pinDoc.isInkMask) {
+                pinDoc.presHideAfter = true;
+                pinDoc.presHideBefore = true;
+                pinDoc.presMovement = PresMovement.None;
+            }
+            if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true;
+            PresBox.Instance?.clearSelectedArray();
+            pinDoc && PresBox.Instance?.addToSelectedArray(pinDoc); //Update selected array
+        });
         if (
-            CollectionDockingView.Instance &&
-            !Array.from(CollectionDockingView.Instance.tabMap)
+            !Array.from(CollectionDockingView.Instance?.tabMap ?? [])
                 .map(d => d.DashDoc)
                 .includes(curPres)
         ) {
             const docs = Cast(Doc.MyOverlayDocs.data, listSpec(Doc), []);
             if (docs.includes(curPres)) docs.splice(docs.indexOf(curPres), 1);
-            CollectionDockingView.AddSplit(curPres, 'right');
+            CollectionDockingView.AddSplit(curPres, 'left');
             setTimeout(() => DocumentManager.Instance.jumpToDocument(docList.lastElement(), false, undefined, []), 100); // keeps the pinned doc in view since the sidebar shifts things
         }
+        setTimeout(batch.end, 500); // need to wait until dockingview (goldenlayout) updates all its structurs
     }
 
     componentDidMount() {
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index aa1330762..833e364b3 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -575,7 +575,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                     <ul
                         key={expandKey + 'more'}
                         title="click to change sort order"
-                        className={this.doc.treeViewHideTitle ? 'no-indent' : ''}
+                        className={''} //this.doc.treeViewHideTitle ? 'no-indent' : ''}
                         onPointerDown={e => {
                             downX = e.clientX;
                             downY = e.clientY;
diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx
index dc3fc0396..04d252abe 100644
--- a/src/client/views/nodes/FilterBox.tsx
+++ b/src/client/views/nodes/FilterBox.tsx
@@ -379,7 +379,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps>() {
      * Changes the title of the filterDoc
      */
     onTitleValueChange = (val: string) => {
-        this.props.Document.title = val || `FilterDoc for ${FilterBox.targetDoc?.title}`;
+        Doc.GetProto(this.props.Document).title = val || `FilterDoc for ${FilterBox.targetDoc?.title}`;
         return true;
     };
 
@@ -389,11 +389,9 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @computed get flyoutPanel() {
         return DocListCast(Doc.UserDoc().savedFilters).map(doc => {
             return (
-                <>
-                    <div className="filterBox-tempFlyout" onWheel={e => e.stopPropagation()} style={{ height: 50, border: '2px' }} onPointerDown={() => this.props.updateFilterDoc?.(doc)}>
-                        {StrCast(doc.title)}
-                    </div>
-                </>
+                <div className="filterBox-tempFlyout" onWheel={e => e.stopPropagation()} style={{ height: 20, border: '2px' }} onPointerDown={() => this.props.updateFilterDoc?.(doc)}>
+                    {StrCast(doc.title)}
+                </div>
             );
         });
     }
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 82b8a8f90..a4db2d777 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -88,11 +88,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     private _disposers: { [name: string]: IReactionDisposer } = {};
     public selectedArray = new ObservableSet<Doc>();
 
-    constructor(props: any) {
-        super(props);
-        if ((Doc.ActivePresentation = this.rootDoc)) runInAction(() => (PresBox.Instance = this));
-    }
-
     @observable public static Instance: PresBox;
     @observable static startMarquee: boolean = false; // onclick "+ new slide" in presentation mode, set as true, then when marquee selection finish, onPointerUp automatically triggers PinWithView
 
@@ -199,9 +194,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this.layoutDoc._gridGap = 0;
         this.layoutDoc._yMargin = 0;
         this.turnOffEdit(true);
-        if (Doc.MyTrails) {
-            DocListCastAsync(Doc.MyTrails.data).then(pres => !pres?.includes(this.rootDoc) && Doc.AddDocToList(Doc.MyTrails, 'data', this.rootDoc));
-        }
         this._disposers.selection = reaction(
             () => SelectionManager.Views(),
             views => views.some(view => view.props.Document === this.rootDoc) && this.updateCurrentPresentation()
@@ -353,7 +345,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             }
             if (!group) this.clearSelectedArray();
             this.childDocs[index] && this.addToSelectedArray(this.childDocs[index]); //Update selected array
-            this.navigateToElement(this.childDocs[index]); //Handles movement to element only when presTrail is list
+            this.turnOffEdit();
+            this.navigateToActiveItem(); //Handles movement to element only when presTrail is list
             this.onHideDocument(); //Handles hide after/before
         }
     });
@@ -368,7 +361,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
 
     @action
-    static restoreTargetDocView(bestTarget: Doc, activeItem: Doc, jumpToDoc: boolean) {
+    static restoreTargetDocView(bestTarget: Doc, activeItem: Doc) {
         const transTime = NumCast(activeItem.presTransition, 500);
         const presTransitionTime = `all ${transTime}ms`;
         const { scrollable, pannable, temporal, clippable, dataview, textview } = this.pinDataTypes(bestTarget);
@@ -435,7 +428,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
     }
 
-    _navTimer!: NodeJS.Timeout;
+    static _navTimer: NodeJS.Timeout;
     /**
      * This method makes sure that cursor navigates to the element that
      * has the option open and last in the group.
@@ -444,7 +437,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
      * a new tab. If presCollection is undefined it will open the document
      * on the right.
      */
-    navigateToElement = async (curDoc: Doc) => {
+    navigateToActiveItem = () => {
         const activeItem: Doc = this.activeItem;
         const targetDoc: Doc = this.targetDoc;
         const srcContext = Cast(targetDoc.context, Doc, null) ?? Cast(Cast(targetDoc.annotationOn, Doc, null)?.context, Doc, null);
@@ -452,7 +445,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const collectionDocView = presCollection ? DocumentManager.Instance.getDocumentView(presCollection) : undefined;
         const includesDoc: boolean = DocListCast(presCollection?.data).includes(targetDoc);
         const tab = CollectionDockingView.Instance && Array.from(CollectionDockingView.Instance.tabMap).find(tab => tab.DashDoc === srcContext);
-        this.turnOffEdit();
         // Handles the setting of presCollection
         if (includesDoc) {
             //Case 1: Pres collection should not change as it is already the same
@@ -475,7 +467,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             self._eleArray.splice(0, self._eleArray.length, ...eleViewCache);
         });
         const openInTab = (doc: Doc, finished?: () => void) => {
-            collectionDocView ? collectionDocView.props.addDocTab(doc, '') : this.props.addDocTab(doc, '');
+            (collectionDocView ?? this).props.addDocTab(doc, '');
             this.layoutDoc.presCollection = targetDoc;
             // this still needs some fixing
             setTimeout(resetSelection, 500);
@@ -485,6 +477,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 finished?.();
             }
         };
+        PresBox.NavigateToTarget(targetDoc, activeItem, openInTab, srcContext, includesDoc || tab ? undefined : resetSelection);
+    };
+
+    static NavigateToTarget(targetDoc: Doc, activeItem: Doc, openInTab: any, srcContext: Doc, finished?: () => void) {
         if (activeItem.presPinView && DocCast(targetDoc.context)?._currentFrame === undefined) {
             const transTime = NumCast(activeItem.presTransition, 500);
             const presTransitionTime = `all ${transTime}ms`;
@@ -499,20 +495,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         // If openDocument is selected then it should open the document for the user
         if (activeItem.openDocument) {
             LightboxView.SetLightboxDoc(targetDoc); // openInTab(targetDoc);
-        } else if (targetDoc && curDoc.presMovement !== PresMovement.None && targetDoc) {
+        } else if (targetDoc && activeItem.presMovement !== PresMovement.None) {
             LightboxView.SetLightboxDoc(undefined);
-            const zooming = curDoc.presMovement !== PresMovement.Pan;
-            DocumentManager.Instance.jumpToDocument(targetDoc, zooming, openInTab, srcContext ? [srcContext] : [], undefined, undefined, undefined, includesDoc || tab ? undefined : resetSelection, undefined, true, NumCast(curDoc.presZoom));
+            const zooming = activeItem.presMovement !== PresMovement.Pan;
+            DocumentManager.Instance.jumpToDocument(targetDoc, zooming, openInTab, srcContext ? [srcContext] : [], undefined, undefined, undefined, finished, undefined, true, NumCast(activeItem.presZoom));
         }
         // After navigating to the document, if it is added as a presPinView then it will
         // adjust the pan and scale to that of the pinView when it was added.
         if (activeItem.presPinView) {
-            // if targetDoc is not displayed but one of its aliases is, then we need to modify that alias, not the original target
-            clearTimeout(this._navTimer);
+            clearTimeout(PresBox._navTimer);
+            // targetDoc may or may not be displayed.  this gets the first available document (or alias) view that matches targetDoc
             const bestTarget = DocumentManager.Instance.getFirstDocumentView(targetDoc)?.props.Document;
-            if (bestTarget) this._navTimer = PresBox.restoreTargetDocView(bestTarget, activeItem, false);
+            if (bestTarget) PresBox._navTimer = PresBox.restoreTargetDocView(bestTarget, activeItem);
         }
-    };
+    }
 
     /**
      * Uses the viewfinder to progressivize through the different views of a single collection.
@@ -719,8 +715,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             this.layoutDoc.presStatus = PresStatus.Edit;
             clearTimeout(this._presTimer);
             const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-            this.rootDoc.x = pt[0] + (this.props.PanelWidth() - 250);
-            this.rootDoc.y = pt[1] + 10;
+            this.rootDoc.overlayX = pt[0] + (this.props.PanelWidth() - 250);
+            this.rootDoc.overlayY = pt[1] + 10;
             this.rootDoc._height = 30;
             this.rootDoc._width = 248;
             Doc.AddDocToList(Doc.MyOverlayDocs, undefined, this.rootDoc);
@@ -2322,7 +2318,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
         const isMini: boolean = this.toolbarWidth <= 100;
         return (
-            <div className="presBox-buttons" style={{ display: !this.rootDoc._chromeHidden ? 'none' : undefined }}>
+            <div className="presBox-buttons" style={{ background: Doc.ActivePresentation === this.rootDoc ? 'green' : undefined, display: !this.rootDoc._chromeHidden ? 'none' : undefined }}>
                 {isMini ? null : (
                     <select className="presBox-viewPicker" style={{ display: this.layoutDoc.presStatus === 'edit' ? 'block' : 'none' }} onPointerDown={e => e.stopPropagation()} onChange={this.viewChanged} value={mode}>
                         <option onPointerDown={StopEvent} value={CollectionViewType.Stacking}>
@@ -2584,7 +2580,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const presStart: boolean = !this.layoutDoc.presLoop && this.itemIndex === 0;
         return DocListCast(Doc.MyOverlayDocs?.data).includes(this.rootDoc) ? (
             <div className="miniPres" onClick={e => e.stopPropagation()} onPointerEnter={action(e => (this._forceKeyEvents = true))}>
-                <div className="presPanelOverlay" style={{ display: 'inline-flex', height: 30, background: '#323232', top: 0, zIndex: 3000000, boxShadow: this._presKeyEvents ? '0 0 0px 3px ' + Colors.MEDIUM_BLUE : undefined }}>
+                <div
+                    className="presPanelOverlay"
+                    style={{ display: 'inline-flex', height: 30, background: Doc.ActivePresentation === this.rootDoc ? 'green' : '#323232', top: 0, zIndex: 3000000, boxShadow: this._presKeyEvents ? '0 0 0px 3px ' + Colors.MEDIUM_BLUE : undefined }}>
                     <Tooltip title={<div className="dash-tooltip">{'Loop'}</div>}>
                         <div
                             className="presPanel-button"
@@ -2664,25 +2662,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             </div>
         );
     }
+    static NavigateToDoc(bestTarget: Doc, activeItem: Doc) {
+        const srcContext = Cast(bestTarget.context, Doc, null) ?? Cast(Cast(bestTarget.annotationOn, Doc, null)?.context, Doc, null);
+        const openInTab = (doc: Doc, finished?: () => void) => {
+            CollectionDockingView.AddSplit(doc, 'right');
+            finished?.();
+        };
+        PresBox.NavigateToTarget(bestTarget, activeItem, openInTab, srcContext);
+    }
 }
 
 ScriptingGlobals.add(function navigateToDoc(bestTarget: Doc, activeItem: Doc) {
-    const srcContext = Cast(bestTarget.context, Doc, null) ?? Cast(Cast(bestTarget.annotationOn, Doc, null)?.context, Doc, null);
-    const openInTab = (doc: Doc, finished?: () => void) => {
-        CollectionDockingView.AddSplit(doc, 'right');
-        finished?.();
-    };
-    DocumentManager.Instance.jumpToDocument(
-        bestTarget,
-        true,
-        openInTab,
-        srcContext ? [srcContext] : [],
-        undefined,
-        undefined,
-        undefined,
-        () => PresBox.restoreTargetDocView(bestTarget, activeItem, true),
-        undefined,
-        true,
-        NumCast(activeItem.presZoom)
-    );
+    PresBox.NavigateToDoc(bestTarget, activeItem);
 });
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 86b4da792..cf505c45b 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -225,13 +225,13 @@ export class Doc extends RefField {
     public static get ActiveTool(): InkTool {
         return StrCast(Doc.UserDoc().activeTool, InkTool.None) as InkTool;
     }
-    public static get ActivePresentation() {
+    public static get ActivePresentation(): Opt<Doc> {
         return DocCast(Doc.ActiveDashboard?.activePresentation);
     }
     public static set ActivePresentation(val) {
-      if (Doc.ActiveDashboard) {
+        if (Doc.ActiveDashboard) {
             Doc.ActiveDashboard.activePresentation = val;
-      }
+        }
     }
     constructor(id?: FieldId, forceSave?: boolean) {
         super(id);