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

2 files changed, 41 insertions, 18 deletions

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';