added tutorial tool, still need to integrate with metadatatool

1 files changed, 29 insertions, 36 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ef8d0c197..ad6bb09c7 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -11,7 +11,6 @@ import '@dash/components/src/global/globalCssVariables.scss';
 import { ClientUtils, returnEmptyFilter, returnFalse, returnTrue, returnZero, setupMoveUpEvents } from '../../ClientUtils';
 import { emptyFunction } from '../../Utils';
 import { Doc, DocListCast, GetDocFromUrl, Opt, returnEmptyDoclist } from '../../fields/Doc';
-import { DocData } from '../../fields/DocSymbols';
 import { Id } from '../../fields/FieldSymbols';
 import { DocCast, StrCast, toList } from '../../fields/Types';
 import { DocServer } from '../DocServer';
@@ -94,7 +93,7 @@ export class MainView extends ObservableReactComponent<object> {
     @observable private _dashUIWidth: number = 0; // width of entire main dashboard region including left menu buttons and properties panel (but not including the dashboard selector button row)
     @observable private _dashUIHeight: number = 0; // height of entire main dashboard region including top menu buttons
     @observable private _panelContent: string = 'none';
-    @observable private _sidebarContent: Doc = Doc.MyLeftSidebarPanel;
+    @observable private _sidebarContent?: Doc = Doc.MyLeftSidebarPanel;
     @observable private _leftMenuFlyoutWidth: number = 0;
     @computed get _hideUI() {
         return SnappingManager.HideUI || (this.mainDoc && this.mainDoc._type_collection !== CollectionViewType.Docking);
@@ -174,7 +173,7 @@ export class MainView extends ObservableReactComponent<object> {
             views => views.length > 1 && document.activeElement instanceof HTMLElement && document.activeElement?.blur()
         );
         reaction(
-            () => Doc.MyDockedBtns.linearView_IsOpen,
+            () => Doc.MyDockedBtns?.linearView_IsOpen,
             open => SnappingManager.SetPrintToConsole(!!open)
         );
         const scriptTag = document.createElement('script');
@@ -200,7 +199,7 @@ export class MainView extends ObservableReactComponent<object> {
                 ele.outerHTML = '';
             }, 1000);
         }
-        this._sidebarContent.proto = undefined;
+        this._sidebarContent && (this._sidebarContent.proto = undefined);
         if (!MainView.Live) {
             DocServer.setLivePlaygroundFields([
                 'dataTransition',
@@ -530,6 +529,7 @@ export class MainView extends ObservableReactComponent<object> {
                 fa.faColumns,
                 fa.faChevronCircleUp,
                 fa.faUpload,
+                fa.faBorderStyle,
                 fa.faBorderAll,
                 fa.faBraille,
                 fa.faPersonChalkboard,
@@ -636,8 +636,10 @@ export class MainView extends ObservableReactComponent<object> {
     openPresentation = (pres: Doc) => {
         if (pres.type === DocumentType.PRES) {
             CollectionDockingView.AddSplit(pres, OpenWhereMod.right, undefined, PresBox.PanelName);
-            Doc.MyTrails && (Doc.ActivePresentation = pres);
-            Doc.AddDocToList(Doc.MyTrails, 'data', pres);
+            if (Doc.MyTrails) {
+                Doc.ActivePresentation = pres;
+                Doc.AddDocToList(Doc.MyTrails, 'data', pres);
+            }
             this.closeFlyout();
         }
     };
@@ -645,16 +647,16 @@ export class MainView extends ObservableReactComponent<object> {
     @action
     createNewFolder = async () => {
         const folder = Docs.Create.TreeDocument([], { title: 'Untitled folder', _dragOnlyWithinContainer: true, isFolder: true });
-        Doc.AddDocToList(Doc.MyFilesystem, 'data', folder);
+        Doc.MyFilesystem && Doc.AddDocToList(Doc.MyFilesystem, 'data', folder);
     };
 
     waitForDoubleClick = () => (SnappingManager.ExploreMode ? 'never' : undefined);
     headerBarScreenXf = () => new Transform(-this.leftScreenOffsetOfMainDocView - this.leftMenuFlyoutWidth(), -this.headerBarDocHeight(), 1);
     mainScreenToLocalXf = () => new Transform(-this.leftScreenOffsetOfMainDocView - this.leftMenuFlyoutWidth(), -this.topOfMainDocContent, 1);
-    addHeaderDoc = (docs: Doc | Doc[]) => toList(docs).reduce((done, doc) => Doc.AddDocToList(this.headerBarDoc, 'data', doc), true);
-    removeHeaderDoc = (docs: Doc | Doc[]) => toList(docs).reduce((done, doc) => Doc.RemoveDocFromList(this.headerBarDoc, 'data', doc), true);
+    addHeaderDoc = (docs: Doc | Doc[]) => toList(docs).reduce((done, doc) => !!this.headerBarDoc && Doc.AddDocToList(this.headerBarDoc, 'data', doc), true);
+    removeHeaderDoc = (docs: Doc | Doc[]) => toList(docs).reduce((done, doc) => !!this.headerBarDoc && Doc.RemoveDocFromList(this.headerBarDoc, 'data', doc), true);
     @computed get headerBarDocView() {
-        return (
+        return !this.headerBarDoc ? null : (
             <div className="mainView-headerBar" style={{ height: this.headerBarDocHeight() }}>
                 <DocumentView
                     key="headerBarDoc"
@@ -792,16 +794,16 @@ export class MainView extends ObservableReactComponent<object> {
             <div key="flyout" className="mainView-libraryFlyout-out">
                 {this.docButtons}
             </div>
-        ) : (
+        ) : !this._sidebarContent ? null : (
             <div key="libFlyout" className="mainView-libraryFlyout" style={{ minWidth: this._leftMenuFlyoutWidth, width: this._leftMenuFlyoutWidth }}>
                 <div className="mainView-contentArea">
                     <DocumentView
-                        Document={DocCast(this._sidebarContent.proto, this._sidebarContent)}
+                        Document={DocCast(this._sidebarContent?.proto, this._sidebarContent)!}
                         addDocument={undefined}
                         addDocTab={DocumentViewInternal.addDocTabFunc}
                         pinToPres={DocumentView.PinDoc}
                         containerViewPath={returnEmptyDocViewList}
-                        styleProvider={this._sidebarContent.proto === Doc.MyDashboards || this._sidebarContent.proto === Doc.MyFilesystem || this._sidebarContent.proto === Doc.MyTrails ? DashboardStyleProvider : DefaultStyleProvider}
+                        styleProvider={this._sidebarContent?.proto === Doc.MyDashboards || this._sidebarContent.proto === Doc.MyFilesystem || this._sidebarContent.proto === Doc.MyTrails ? DashboardStyleProvider : DefaultStyleProvider}
                         removeDocument={returnFalse}
                         ScreenToLocalTransform={this.mainContainerXf}
                         PanelWidth={this.leftMenuFlyoutWidth}
@@ -821,7 +823,7 @@ export class MainView extends ObservableReactComponent<object> {
     }
 
     @computed get leftMenuPanel() {
-        return (
+        return !Doc.MyLeftSidebarMenu ? null : (
             <div key="menu" className="mainView-leftMenuPanel" style={{ background: SnappingManager.userBackgroundColor, display: DocumentView.LightboxDoc() ? 'none' : undefined }}>
                 <DocumentView
                     Document={Doc.MyLeftSidebarMenu}
@@ -848,8 +850,8 @@ export class MainView extends ObservableReactComponent<object> {
     }
 
     @action
-    selectMenu = (button: Doc) => {
-        const title = StrCast(button[DocData].title);
+    selectLeftSidebarButton = (button: Doc) => {
+        const title = StrCast(button.$title);
         const willOpen = !this._leftMenuFlyoutWidth || this._panelContent !== title;
         this.closeFlyout();
         if (willOpen) {
@@ -860,7 +862,9 @@ export class MainView extends ObservableReactComponent<object> {
                 case 'Help':
                     break;
                 default:
-                    this.expandFlyout(button);
+                    this._leftMenuFlyoutWidth = this._leftMenuFlyoutWidth || 250;
+                    this._sidebarContent && (this._sidebarContent.proto = DocCast(button.target));
+                    SnappingManager.SetLastPressedBtn(button[Id]);
             }
         }
         return true;
@@ -873,8 +877,10 @@ export class MainView extends ObservableReactComponent<object> {
      */
     addHotKey = (hotKey: string) => {
         const filterIcons = DocCast(DocCast(Doc.UserDoc().myContextMenuBtns)?.Filter);
-        const menuDoc = CurrentUserUtils.setupContextMenuBtn(CurrentUserUtils.filterBtnDesc(ToTagName(hotKey), 'question'), filterIcons);
-        Doc.AddToFilterHotKeys(menuDoc);
+        if (filterIcons) {
+            const menuDoc = CurrentUserUtils.setupContextMenuBtn(CurrentUserUtils.filterBtnDesc(ToTagName(hotKey), 'question'), filterIcons);
+            Doc.AddToFilterHotKeys(menuDoc);
+        }
     };
 
     @computed get mainInnerContent() {
@@ -936,29 +942,16 @@ export class MainView extends ObservableReactComponent<object> {
             </div>
         );
     }
-
-    expandFlyout = action((button: Doc) => {
-        // bcz: What's going on here!? --- may be fixed now, so commenting out ...
-        // Chrome(not firefox) seems to have a bug when the flyout expands and there's a zoomed freeform tab.  All of the div below the CollectionFreeFormView's main div
-        // generate the wrong value from getClientRectangle() -- specifically they return an 'x' that is the flyout's width greater than it should be.
-        // interactively adjusting the flyout fixes the problem.  So does programmatically changing the value after a timeout to something *fractionally* different (ie, 1.5, not 1);)
-        this._leftMenuFlyoutWidth = this._leftMenuFlyoutWidth || 250;
-        // setTimeout(action(() => (this._leftMenuFlyoutWidth += 0.5)));
-
-        this._sidebarContent.proto = DocCast(button.target);
-        SnappingManager.SetLastPressedBtn(button[Id]);
-    });
-
     closeFlyout = action(() => {
         SnappingManager.SetLastPressedBtn('');
         this._panelContent = 'none';
-        this._sidebarContent.proto = undefined;
+        this._sidebarContent && (this._sidebarContent.proto = undefined);
         this._leftMenuFlyoutWidth = 0;
     });
 
-    remButtonDoc = (docs: Doc | Doc[]) => toList(docs).reduce((flg: boolean, doc) => flg && !doc.dragOnlyWithinContainer && Doc.RemoveDocFromList(Doc.MyDockedBtns, 'data', doc), true);
+    remButtonDoc = (docs: Doc | Doc[]) => toList(docs).reduce((flg: boolean, doc) => flg && !doc.dragOnlyWithinContainer && !!Doc.MyDockedBtns && Doc.RemoveDocFromList(Doc.MyDockedBtns!, 'data', doc), true);
     moveButtonDoc = (docs: Doc | Doc[], targetCol: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => this.remButtonDoc(docs) && addDocument(docs);
-    addButtonDoc = (docs: Doc | Doc[]) => toList(docs).reduce((flg: boolean, doc) => flg && Doc.AddDocToList(Doc.MyDockedBtns, 'data', doc), true);
+    addButtonDoc = (docs: Doc | Doc[]) => toList(docs).reduce((flg: boolean, doc) => flg && !!Doc.MyDockedBtns && Doc.AddDocToList(Doc.MyDockedBtns!, 'data', doc), true);
 
     buttonBarXf = () => {
         if (!this._docBtnRef.current) return Transform.Identity();
@@ -1162,7 +1155,7 @@ export class MainView extends ObservableReactComponent<object> {
 
 // eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function selectMainMenu(doc: Doc) {
-    MainView.Instance.selectMenu(doc);
+    MainView.Instance.selectLeftSidebarButton(doc);
 });
 // eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function hideUI() {