changed multirow view to support a maxShown flag so that headerBar doesn't take forever to load with a lot of closed tabs.

7 files changed, 48 insertions, 24 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 8a13395c3..9b17901ca 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -267,6 +267,7 @@ export class DocumentOptions {
     _layout_reflowVertical?: BOOLt = new BoolInfo('native height can be changed independent of width by dragging decoration resizers');
     _layout_reflowHorizontal?: BOOLt = new BoolInfo('whether a doc with a native size can be horizonally resized, causing some form of reflow');
     layout_boxShadow?: string; // box-shadow css string OR "standard" to use dash standard box shadow
+    layout_maxShown?: NUMt = new NumInfo('maximum number of children to display at one time (see multicolumnview)');
     _layout_autoHeight?: BOOLt = new BoolInfo('whether document automatically resizes vertically to display contents');
     _layout_curPage?: NUMt = new NumInfo('current page of a PDF or other? paginated document', false);
     _layout_currentTimecode?: NUMt = new NumInfo('the current timecode of a time-based document (e.g., current time of a video)  value is in seconds', false);
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index d396ba815..289384be0 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -886,7 +886,7 @@ export class CurrentUserUtils {
         this.setupDocTemplates(doc); // sets up the template menu of templates
         //this.setupFieldInfos(doc); // sets up the collection of field info descriptions for each possible DocumentOption
         DocUtils.AssignDocField(doc, "globalScriptDatabase", (opts) =>  Docs.Prototypes.MainScriptDocument(), {});
-        DocUtils.AssignDocField(doc, "myHeaderBar", (opts) => Docs.Create.MulticolumnDocument([], opts), { title: "My Header Bar", isSystem: true, _chromeHidden:true, childLayoutFitWidth:false, childDocumentsActive:false, dropAction: dropActionType.move}); // drop down panel at top of dashboard for stashing documents
+        DocUtils.AssignDocField(doc, "myHeaderBar", (opts) => Docs.Create.MulticolumnDocument([], opts), { title: "My Header Bar", isSystem: true, _chromeHidden:true, layout_maxShown: 10, childLayoutFitWidth:false, childDocumentsActive:false, dropAction: dropActionType.move}); // drop down panel at top of dashboard for stashing documents
         
         Doc.AddDocToList(Doc.MyFilesystem, undefined, Doc.MyDashboards)
         Doc.AddDocToList(Doc.MyFilesystem, undefined, Doc.MySharedDocs)
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index f6af6196f..aa0f77c72 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -101,8 +101,6 @@ export namespace DragManager {
     export interface DragOptions {
         dragComplete?: (e: DragCompleteEvent) => void; // function to invoke when drag has completed
         hideSource?: boolean; // hide source document during drag
-        offsetX?: number; // offset of top left of source drag visual from cursor
-        offsetY?: number;
         noAutoscroll?: boolean;
     }
 
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 818c81c9a..455801422 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -121,11 +121,13 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
         const valueSet = new Set<string>(childFilters.map(filter => filter.split(Doc.FilterSep)[1]));
         let rtFields = 0;
         let subDocs = childDocs;
+        let gatheredDocs = [] as Doc[];
         if (subDocs.length > 0) {
             let newarray: Doc[] = [];
             while (subDocs.length > 0) {
                 newarray = [];
                 subDocs.forEach(t => {
+                    gatheredDocs.push(t);
                     const facetVal = t[facetKey];
                     if (facetVal instanceof RichTextField || typeof facetVal === 'string') rtFields++;
                     facetVal !== undefined && valueSet.add(Field.toString(facetVal as Field));
@@ -135,7 +137,7 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
                     DocListCast(t[annos ? fieldKey + '_annotations' : fieldKey]).forEach(newdoc => newarray.push(newdoc));
                     annos && DocListCast(t[fieldKey + '_sidebar']).forEach(newdoc => newarray.push(newdoc));
                 });
-                subDocs = newarray;
+                subDocs = newarray.filter(d => !gatheredDocs.includes(d));
             }
         }
         //     }
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index 20dc6c9fa..15b1f0275 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -9,7 +9,7 @@ import { Height, Width } from '../../fields/DocSymbols';
 import { Id } from '../../fields/FieldSymbols';
 import { NumCast } from '../../fields/Types';
 import { DocumentType } from '../documents/DocumentTypes';
-import { DragManager } from '../util/DragManager';
+import { DragManager, dropActionType } from '../util/DragManager';
 import { Transform } from '../util/Transform';
 import { LightboxView } from './LightboxView';
 import { ObservableReactComponent } from './ObservableReactComponent';
@@ -196,7 +196,7 @@ export class OverlayView extends ObservableReactComponent<{}> {
                 if (e.metaKey) {
                     const dragData = new DragManager.DocumentDragData([d]);
                     dragData.offset = [-offsetx, -offsety];
-                    dragData.dropAction = 'move';
+                    dragData.dropAction = dropActionType.move;
                     dragData.removeDocument = this.removeOverlayDoc;
                     dragData.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => {
                         return dragData.removeDocument!(doc) ? addDocument(doc) : false;
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index b181b59ce..85fe7c896 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
@@ -1,10 +1,10 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
-import { Button } from 'browndash-components';
-import { action, computed, makeObservable } from 'mobx';
+import { Button, IconButton } from 'browndash-components';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { emptyFunction, returnFalse } from '../../../../Utils';
+import { FaChevronRight } from 'react-icons/fa';
 import { Doc, DocListCast } from '../../../../fields/Doc';
 import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
 import { DragManager, dropActionType } from '../../../util/DragManager';
@@ -37,6 +37,8 @@ const resizerWidth = 8;
 
 @observer
 export class CollectionMulticolumnView extends CollectionSubView() {
+    @observable _startIndex = 0;
+
     constructor(props: any) {
         super(props);
         makeObservable(this);
@@ -48,7 +50,7 @@ export class CollectionMulticolumnView extends CollectionSubView() {
      */
     @computed
     private get ratioDefinedDocs() {
-        return this.childLayoutPairs.map(pair => pair.layout).filter(layout => StrCast(layout._dimUnit, '*') === DimUnit.Ratio);
+        return this.childLayouts.filter(layout => StrCast(layout._dimUnit, '*') === DimUnit.Ratio);
     }
 
     @computed
@@ -57,6 +59,15 @@ export class CollectionMulticolumnView extends CollectionSubView() {
         return ratioDocs.length ? Math.min(...ratioDocs.map(layout => NumCast(layout._dimMagnitude))) : 1;
     }
 
+    @computed get maxShown() {
+        return NumCast(this.layoutDoc.layout_maxShown);
+    }
+
+    @computed
+    private get childLayouts() {
+        return (this.maxShown ? this.childLayoutPairs.slice(this._startIndex, this._startIndex + this.maxShown) : this.childLayoutPairs).map(pair => pair.layout);
+    }
+
     /**
      * This loops through all childLayoutPairs and extracts the values for _dimUnit
      * and _dimMagnitude, ignoring any that are malformed. Additionally, it then
@@ -69,9 +80,9 @@ export class CollectionMulticolumnView extends CollectionSubView() {
     private get resolvedLayoutInformation(): LayoutData {
         let starSum = 0;
         const widthSpecifiers: WidthSpecifier[] = [];
-        this.childLayoutPairs.map(pair => {
-            const unit = StrCast(pair.layout._dimUnit, '*');
-            const magnitude = NumCast(pair.layout._dimMagnitude, this.minimumDim);
+        this.childLayouts.map(layout => {
+            const unit = StrCast(layout._dimUnit, '*');
+            const magnitude = NumCast(layout._dimMagnitude, this.minimumDim);
             if (unit && magnitude && magnitude > 0 && resolvedUnits.includes(unit)) {
                 unit === DimUnit.Ratio && (starSum += magnitude);
                 widthSpecifiers.push({ magnitude, unit });
@@ -90,7 +101,7 @@ export class CollectionMulticolumnView extends CollectionSubView() {
          */
         // setTimeout(() => {
         //     const { ratioDefinedDocs } = this;
-        //     if (this.childLayoutPairs.length) {
+        //     if (this.childPairs.length) {
         //         const minimum = this.minimumDim;
         //         if (minimum !== 0) {
         //             ratioDefinedDocs.forEach(layout => layout._dimMagnitude = NumCast(layout._dimMagnitude, 1) / minimum, 1);
@@ -187,13 +198,14 @@ export class CollectionMulticolumnView extends CollectionSubView() {
             return Transform.Identity(); // we're still waiting on promises to resolve
         }
         let offset = 0;
-        for (const { layout: candidate } of this.childLayoutPairs) {
+        var xf = Transform.Identity();
+        this.childLayouts.map(candidate => {
             if (candidate === layout) {
-                return this.ScreenToLocalBoxXf().translate(-offset / (this._props.NativeDimScaling?.() || 1), 0);
+                return (xf = this.ScreenToLocalBoxXf().translate(-offset / (this._props.NativeDimScaling?.() || 1), 0));
             }
             offset += this.lookupPixels(candidate) + resizerWidth;
-        }
-        return Transform.Identity(); // type coersion, this case should never be hit
+        });
+        return xf;
     };
 
     @undoBatch
@@ -297,10 +309,8 @@ export class CollectionMulticolumnView extends CollectionSubView() {
      */
     @computed
     private get contents(): JSX.Element[] | null {
-        const { childLayoutPairs } = this;
         const collector: JSX.Element[] = [];
-        for (let i = 0; i < childLayoutPairs.length; i++) {
-            const { layout } = childLayoutPairs[i];
+        this.childLayouts.forEach((layout, i) => {
             collector.push(
                 <Tooltip title={'Tab: ' + StrCast(layout.title)} key={'wrapper' + i}>
                     <div className="document-wrapper" style={{ flexDirection: 'column', width: this.lookupPixels(layout) }}>
@@ -317,10 +327,10 @@ export class CollectionMulticolumnView extends CollectionSubView() {
                     select={this._props.select}
                     columnUnitLength={this.getColumnUnitLength}
                     toLeft={layout}
-                    toRight={childLayoutPairs[i + 1]?.layout}
+                    toRight={this.childLayouts[i + 1]}
                 />
             );
-        }
+        });
         collector.pop(); // removes the final extraneous resize bar
         return collector;
     }
@@ -339,6 +349,20 @@ export class CollectionMulticolumnView extends CollectionSubView() {
                     marginBottom: NumCast(this.Document._yMargin),
                 }}>
                 {this.contents}
+                {!this._startIndex ? null : (
+                    <Tooltip title={'scroll back'}>
+                        <div style={{ position: 'absolute', bottom: 0, left: 0, background: SettingsManager.userVariantColor }} onClick={action(e => (this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown)))}>
+                            <Button tooltip="Scroll back" icon={<FontAwesomeIcon icon="chevron-left" size="lg" />} onClick={action(e => (this._startIndex = Math.max(0, this._startIndex - this.maxShown)))} color={SettingsManager.userColor} />
+                        </div>
+                    </Tooltip>
+                )}
+                {this._startIndex > this.childLayoutPairs.length - 1 ? null : (
+                    <Tooltip title={'scroll forward'}>
+                        <div style={{ position: 'absolute', bottom: 0, right: 0, background: SettingsManager.userVariantColor }} onClick={action(e => (this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown)))}>
+                            <IconButton icon={<FaChevronRight />} color={SettingsManager.userColor} />
+                        </div>
+                    </Tooltip>
+                )}
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
index 659f7ccdc..17bf3e50c 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
@@ -1,7 +1,6 @@
 import { action, computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { emptyFunction, returnFalse } from '../../../../Utils';
 import { Doc, DocListCast } from '../../../../fields/Doc';
 import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
 import { DragManager, dropActionType } from '../../../util/DragManager';