Merge branch 'master' of https://github.com/brown-dash/Dash-Web into nathan-starter

1 files changed, 34 insertions, 43 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ac669a864..a38539ad5 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,17 +1,16 @@
-/* eslint-disable node/no-unpublished-import */
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faBuffer, faHireAHelper } from '@fortawesome/free-brands-svg-icons';
 import * as far from '@fortawesome/free-regular-svg-icons';
 import * as fa from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, configure, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { action, computed, configure, makeObservable, observable, reaction, runInAction, trace } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-// eslint-disable-next-line import/no-relative-packages
+import ResizeObserver from 'resize-observer-polyfill';
 import '../../../node_modules/browndash-components/dist/styles/global.min.css';
-import { ClientUtils, lightOrDark, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero, setupMoveUpEvents } from '../../ClientUtils';
+import { ClientUtils, lightOrDark, returnEmptyFilter, returnFalse, returnTrue, returnZero, setupMoveUpEvents } from '../../ClientUtils';
 import { emptyFunction } from '../../Utils';
-import { Doc, DocListCast, GetDocFromUrl, Opt } from '../../fields/Doc';
+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';
@@ -58,7 +57,6 @@ import { ImageLabelHandler } from './collections/collectionFreeForm/ImageLabelHa
 import { MarqueeOptionsMenu } from './collections/collectionFreeForm/MarqueeOptionsMenu';
 import { CollectionLinearView } from './collections/collectionLinear';
 import { LinkMenu } from './linking/LinkMenu';
-import { AudioBox } from './nodes/AudioBox';
 import { SchemaCSVPopUp } from './nodes/DataVizBox/SchemaCSVPopUp';
 import { DocButtonState } from './nodes/DocumentLinksButton';
 import { DocumentView, DocumentViewInternal } from './nodes/DocumentView';
@@ -78,11 +76,11 @@ import { GPTPopup } from './pdf/GPTPopup/GPTPopup';
 import { TopBar } from './topbar/TopBar';
 import { DocCreatorMenu } from './nodes/DataVizBox/DocCreatorMenu';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports
 const { LEFT_MENU_WIDTH, TOPBAR_HEIGHT } = require('./global/globalCssVariables.module.scss'); // prettier-ignore
-const _global = (window /* browser */ || global) /* node */ as any;
 
 @observer
-export class MainView extends ObservableReactComponent<{}> {
+export class MainView extends ObservableReactComponent<object> {
     // eslint-disable-next-line no-use-before-define
     public static Instance: MainView;
     public static Live: boolean = false;
@@ -94,7 +92,7 @@ export class MainView extends ObservableReactComponent<{}> {
     @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: any = Doc.MyLeftSidebarPanel;
+    @observable private _sidebarContent: Doc = Doc.MyLeftSidebarPanel;
     @observable private _leftMenuFlyoutWidth: number = 0;
     @computed get _hideUI() {
         return this.mainDoc && this.mainDoc._type_collection !== CollectionViewType.Docking;
@@ -154,7 +152,7 @@ export class MainView extends ObservableReactComponent<{}> {
         }
     };
     headerBarDocWidth = () => this.mainDocViewWidth();
-    headerBarDocHeight = () => (this._hideUI ? 0 : this.headerBarHeight ?? 0);
+    headerBarDocHeight = () => (this._hideUI ? 0 : (this.headerBarHeight ?? 0));
     topMenuHeight = () => (this._hideUI ? 0 : 35);
     topMenuWidth = returnZero; // value is ignored ...
     leftMenuWidth = () => (this._hideUI ? 0 : Number(LEFT_MENU_WIDTH.replace('px', '')));
@@ -171,7 +169,7 @@ export class MainView extends ObservableReactComponent<{}> {
         reaction(
             // when a multi-selection occurs, remove focus from all active elements to allow keyboad input to go only to global key manager to act upon selection
             () => DocumentView.Selected().slice(),
-            views => views.length > 1 && (document.activeElement as any)?.blur !== undefined && (document.activeElement as any)!.blur()
+            views => views.length > 1 && document.activeElement instanceof HTMLElement && document.activeElement?.blur()
         );
         reaction(
             () => Doc.MyDockedBtns.linearView_IsOpen,
@@ -236,9 +234,9 @@ export class MainView extends ObservableReactComponent<{}> {
         tag.src = 'https://www.youtube.com/iframe_api';
         const firstScriptTag = document.getElementsByTagName('script')[0];
         firstScriptTag.parentNode!.insertBefore(tag, firstScriptTag);
-        document.addEventListener('dash', (e: any) => {
+        document.addEventListener('dash', (e: Event) => {
             // event used by chrome plugin to tell Dash which document to focus on
-            const id = GetDocFromUrl(e.detail);
+            const id = GetDocFromUrl((e as Event & { detail: string }).detail);
             DocServer.GetRefField(id).then(doc => (doc instanceof Doc ? DocumentView.showDocument(doc, { willPan: false }) : null));
         });
         document.addEventListener('linkAnnotationToDash', Hypothesis.linkListener);
@@ -255,12 +253,12 @@ export class MainView extends ObservableReactComponent<{}> {
         // document.removeEventListener('linkAnnotationToDash', Hypothesis.linkListener);
     }
 
-    constructor(props: any) {
+    constructor(props: object) {
         super(props);
         makeObservable(this);
         DocumentViewInternal.addDocTabFunc = MainView.addDocTabFunc_impl;
         MainView.Instance = this;
-        DashboardView._urlState = HistoryUtil.parseUrl(window.location) || ({} as any);
+        DashboardView._urlState = HistoryUtil.parseUrl(window.location) ?? { type: 'doc', docId: '' };
 
         // causes errors to be generated when modifying an observable outside of an action
         configure({ enforceActions: 'observed' });
@@ -307,7 +305,7 @@ export class MainView extends ObservableReactComponent<{}> {
                 fa.faExternalLinkAlt,
                 fa.faCalendar,
                 fa.faSquare,
-                far.faSquare as any,
+                far.faSquare,
                 fa.faConciergeBell,
                 fa.faWindowRestore,
                 fa.faFolder,
@@ -459,7 +457,7 @@ export class MainView extends ObservableReactComponent<{}> {
                 fa.faHandPaper,
                 fa.faMap,
                 fa.faUser,
-                faHireAHelper as any,
+                faHireAHelper,
                 fa.faTrashRestore,
                 fa.faUsers,
                 fa.faWrench,
@@ -470,14 +468,14 @@ export class MainView extends ObservableReactComponent<{}> {
                 fa.faArchive,
                 fa.faBezierCurve,
                 fa.faCircle,
-                far.faCircle as any,
+                far.faCircle,
                 fa.faLongArrowAltRight,
                 fa.faPenFancy,
                 fa.faAngleDoubleRight,
                 fa.faAngleDoubleDown,
                 fa.faAngleDoubleLeft,
                 fa.faAngleDoubleUp,
-                faBuffer as any,
+                faBuffer,
                 fa.faExpand,
                 fa.faUndo,
                 fa.faSlidersH,
@@ -562,6 +560,10 @@ export class MainView extends ObservableReactComponent<{}> {
                 fa.faRobot,
                 fa.faSatellite,
                 fa.faStar,
+                fa.faCloud,
+                fa.faBolt,
+                fa.faLightbulb,
+                fa.faX,
             ]
         );
     }
@@ -584,7 +586,6 @@ export class MainView extends ObservableReactComponent<{}> {
         );
         DocumentManager.removeOverlayViews();
         Doc.linkFollowUnhighlight();
-        AudioBox.Enabled = true;
         const targets = document.elementsFromPoint(e.x, e.y);
         if (targets.length) {
             let targClass = targets[0].className.toString();
@@ -606,18 +607,6 @@ export class MainView extends ObservableReactComponent<{}> {
         document.addEventListener('pointerdown', this.globalPointerDown, true);
         document.addEventListener('pointermove', this.globalPointerMove, true);
         document.addEventListener('pointerup', this.globalPointerClick, true);
-        document.addEventListener(
-            'click',
-            (e: MouseEvent) => {
-                if (!e.cancelBubble) {
-                    const pathstr = (e as any)?.path?.map((p: any) => p.classList?.toString()).join();
-                    if (pathstr?.includes('libraryFlyout')) {
-                        DocumentView.DeselectAll();
-                    }
-                }
-            },
-            false
-        );
         document.oncontextmenu = () => false;
     };
 
@@ -658,7 +647,7 @@ export class MainView extends ObservableReactComponent<{}> {
                     Document={this.headerBarDoc}
                     addDocTab={DocumentViewInternal.addDocTabFunc}
                     pinToPres={emptyFunction}
-                    containerViewPath={returnEmptyDoclist}
+                    containerViewPath={returnEmptyDocViewList}
                     styleProvider={DefaultStyleProvider}
                     addDocument={this.addHeaderDoc}
                     removeDocument={this.removeHeaderDoc}
@@ -693,7 +682,7 @@ export class MainView extends ObservableReactComponent<{}> {
                     addDocument={undefined}
                     addDocTab={DocumentViewInternal.addDocTabFunc}
                     pinToPres={emptyFunction}
-                    containerViewPath={returnEmptyDoclist}
+                    containerViewPath={returnEmptyDocViewList}
                     styleProvider={this._hideUI ? DefaultStyleProvider : undefined}
                     isContentActive={returnTrue}
                     removeDocument={undefined}
@@ -738,8 +727,8 @@ export class MainView extends ObservableReactComponent<{}> {
         setupMoveUpEvents(
             this,
             e,
-            action(() => {
-                SnappingManager.SetPropertiesWidth(Math.max(0, this._dashUIWidth - e.clientX));
+            action(moveEv => {
+                SnappingManager.SetPropertiesWidth(Math.max(0, this._dashUIWidth - moveEv.clientX));
                 return !SnappingManager.PropertiesWidth;
             }),
             action(() => {
@@ -793,11 +782,11 @@ export class MainView extends ObservableReactComponent<{}> {
             <div key="libFlyout" className="mainView-libraryFlyout" style={{ minWidth: this._leftMenuFlyoutWidth, width: this._leftMenuFlyoutWidth }}>
                 <div className="mainView-contentArea">
                     <DocumentView
-                        Document={this._sidebarContent.proto || this._sidebarContent}
+                        Document={DocCast(this._sidebarContent.proto, this._sidebarContent)}
                         addDocument={undefined}
                         addDocTab={DocumentViewInternal.addDocTabFunc}
                         pinToPres={DocumentView.PinDoc}
-                        containerViewPath={returnEmptyDoclist}
+                        containerViewPath={returnEmptyDocViewList}
                         styleProvider={this._sidebarContent.proto === Doc.MyDashboards || this._sidebarContent.proto === Doc.MyFilesystem || this._sidebarContent.proto === Doc.MyTrails ? DashboardStyleProvider : DefaultStyleProvider}
                         removeDocument={returnFalse}
                         ScreenToLocalTransform={this.mainContainerXf}
@@ -830,7 +819,7 @@ export class MainView extends ObservableReactComponent<{}> {
                     PanelWidth={this.leftMenuWidth}
                     PanelHeight={this.leftMenuHeight}
                     renderDepth={0}
-                    containerViewPath={returnEmptyDoclist}
+                    containerViewPath={returnEmptyDocViewList}
                     focus={emptyFunction}
                     styleProvider={DefaultStyleProvider}
                     isContentActive={returnTrue}
@@ -838,6 +827,7 @@ export class MainView extends ObservableReactComponent<{}> {
                     childFilters={returnEmptyFilter}
                     childFiltersByRanges={returnEmptyFilter}
                     searchFilterDocs={returnEmptyDoclist}
+                    dontCenter="y"
                 />
             </div>
         );
@@ -863,6 +853,7 @@ export class MainView extends ObservableReactComponent<{}> {
     };
 
     @computed get mainInnerContent() {
+        trace();
         const leftMenuFlyoutWidth = this._leftMenuFlyoutWidth + this.leftMenuWidth();
         const width = this.propertiesWidth() + leftMenuFlyoutWidth;
         return (
@@ -905,7 +896,7 @@ export class MainView extends ObservableReactComponent<{}> {
                 className="mainView-dashboardArea"
                 ref={r => {
                     r &&
-                        new _global.ResizeObserver(
+                        new ResizeObserver(
                             action(() => {
                                 this._dashUIWidth = r.getBoundingClientRect().width;
                                 this._dashUIHeight = r.getBoundingClientRect().height;
@@ -992,11 +983,11 @@ export class MainView extends ObservableReactComponent<{}> {
                     {[
                         ...SnappingManager.HorizSnapLines.map((l, i) => (
                             // eslint-disable-next-line react/no-array-index-key
-                            <line key={'horiz' + i} x1="0" y1={l} x2="2000" y2={l} stroke={lightOrDark(dragPar.layoutDoc.backgroundColor ?? 'gray')} opacity={0.3} strokeWidth={1} strokeDasharray="2 2" />
+                            <line key={'horiz' + i} x1="0" y1={l} x2="2000" y2={l} stroke={lightOrDark(StrCast(dragPar.layoutDoc.backgroundColor, 'gray'))} opacity={0.3} strokeWidth={1} strokeDasharray="2 2" />
                         )),
                         ...SnappingManager.VertSnapLines.map((l, i) => (
                             // eslint-disable-next-line react/no-array-index-key
-                            <line key={'vert' + i} y1={this.topOfMainDocContent.toString()} x1={l} y2="2000" x2={l} stroke={lightOrDark(dragPar.layoutDoc.backgroundColor ?? 'gray')} opacity={0.3} strokeWidth={1} strokeDasharray="2 2" />
+                            <line key={'vert' + i} y1={this.topOfMainDocContent.toString()} x1={l} y2="2000" x2={l} stroke={lightOrDark(StrCast(dragPar.layoutDoc.backgroundColor, 'gray'))} opacity={0.3} strokeWidth={1} strokeDasharray="2 2" />
                         )),
                     ]}
                 </svg>
@@ -1054,7 +1045,7 @@ export class MainView extends ObservableReactComponent<{}> {
                 }
                 ref={r => {
                     r &&
-                        new _global.ResizeObserver(
+                        new ResizeObserver(
                             action(() => {
                                 this._windowWidth = r.getBoundingClientRect().width;
                                 this._windowHeight = r.getBoundingClientRect().height;