cleaning up collectionTime, still a bug when switching into it. replacing hig flyout.

5 files changed, 29 insertions, 77 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 8b5f23aa4..61a9fa7c2 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -951,7 +951,7 @@ export class CurrentUserUtils {
                 {
                     const ids = result.cacheDocumentIds.split(";");
                     const batch = 30000;
-                    for (let i = 0; i < ids.length; i = Math.min(ids.length, i+batch)) {
+                    for (let i = 0; i < ids.length; i += batch) {
                         await DocServer.GetRefFields(ids.slice(i, i+batch));
                     }
                 }
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 47829d12a..66b72226c 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -6,7 +6,6 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { emptyFunction, returnFalse, setupMoveUpEvents, simulateMouseClick } from '../../Utils';
 import { Doc } from '../../fields/Doc';
-import { RichTextField } from '../../fields/RichTextField';
 import { Cast, DocCast } from '../../fields/Types';
 import { DocUtils } from '../documents/Documents';
 import { DragManager } from '../util/DragManager';
@@ -315,31 +314,6 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
             </Tooltip>
         );
     }
-    @computed
-    get metadataButton() {
-        const view0 = this.view0;
-        return !view0 ? null : (
-            <Tooltip title={<div className="dash-tooltip">Show metadata panel</div>}>
-                <div className="documentButtonBar-linkFlyout">
-                    {/* <Flyout
-                        anchorPoint={anchorPoints.LEFT_TOP}
-                        content={
-                            <MetadataEntryMenu
-                                docs={this._props
-                                    .views()
-                                    .filter(dv => dv)
-                                    .map(dv => dv!.Document)}
-                                suggestWithFunction
-                            /> // tfs: @bcz This might need to be the data document?
-                        }>
-                        <div className={'documentButtonBar-linkButton-' + 'empty'} onPointerDown={e => e.stopPropagation()}>
-                            {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" />}
-                        </div>
-                    </Flyout> */}
-                </div>
-            </Tooltip>
-        );
-    }
 
     @observable _isRecording = false;
     _stopFunc: () => void = emptyFunction;
@@ -475,7 +449,6 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
         const doc = this.view0?.Document;
         if (!doc || !this.view0) return null;
 
-        const isText = () => doc[this.view0!.LayoutFieldKey] instanceof RichTextField;
         return (
             <div className="documentButtonBar">
                 <div className="documentButtonBar-button">
@@ -495,10 +468,7 @@ export class DocumentButtonBar extends ObservableReactComponent<{ views: () => (
                 )}
 
                 {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== doc ? <div className="documentButtonBar-button">{this.endLinkButton} </div> : null}
-                {
-                    Doc.noviceMode ? null : <div className="documentButtonBar-button">{this.templateButton}</div>
-                    /*<div className="documentButtonBar-button"> {this.metadataButton} </div> */
-                }
+                {Doc.noviceMode ? null : <div className="documentButtonBar-button">{this.templateButton}</div>}
                 {!SelectionManager.Views?.some(v => v.allLinks.length) ? null : <div className="documentButtonBar-button">{this.followLinkButton}</div>}
                 <div className="documentButtonBar-button">{this.pinButton}</div>
                 <div className="documentButtonBar-button">{this.recordButton}</div>
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 5dba9e72a..8627ba650 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -18,9 +18,6 @@ import { ObservableReactComponent } from '../ObservableReactComponent';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { CollectionStackingView } from './CollectionStackingView';
 import './CollectionStackingView.scss';
-// import * as higflyout from '@hig/flyout';
-// export const { anchorPoints } = higflyout;
-// export const Flyout = higflyout.default;
 
 interface CMVFieldRowProps {
     rows: () => number;
@@ -251,18 +248,6 @@ export class CollectionMasonryViewFieldRow extends ObservableReactComponent<CMVF
     toggleEmbedding = action(() => (this._createEmbeddingSelected = true));
     toggleVisibility = () => (this._collapsed = !this.collapsed);
 
-    renderMenu = () => {
-        const selected = this._createEmbeddingSelected;
-        return (
-            <div className="collectionStackingView-optionPicker">
-                <div className="optionOptions">
-                    <div className={'optionPicker' + (selected === true ? ' active' : '')} onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, this.deleteRow)}>
-                        Delete
-                    </div>
-                </div>
-            </div>
-        );
-    };
     @action
     textCallback = (char: string) => {
         return this.addDocument('', false);
@@ -343,11 +328,9 @@ export class CollectionMasonryViewFieldRow extends ObservableReactComponent<CMVF
                     )}
                     {noChrome || evContents === `NO  ${key.toUpperCase()} VALUE` ? null : (
                         <div className="collectionStackingView-sectionOptions" onPointerDown={e => e.stopPropagation()}>
-                            {/* <Flyout anchorPoint={anchorPoints.RIGHT_TOP} content={this.renderMenu()}>
-                                <button className="collectionStackingView-sectionOptionButton">
-                                    <FontAwesomeIcon icon="ellipsis-v" size="lg" />
-                                </button>
-                            </Flyout> */}
+                            <button className="collectionStackingView-sectionOptionButton" onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, this.deleteRow)}>
+                                <FontAwesomeIcon icon="trash" size="lg" />
+                            </button>
                         </div>
                     )}
                 </div>
diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx
index c440a7e3f..6033b897d 100644
--- a/src/client/views/collections/CollectionTimeView.tsx
+++ b/src/client/views/collections/CollectionTimeView.tsx
@@ -37,8 +37,8 @@ export class CollectionTimeView extends CollectionSubView() {
         makeObservable(this);
     }
 
-    async componentDidMount() {
-        this.props.setContentView?.(this);
+    componentDidMount() {
+        this._props.setContentView?.(this);
         runInAction(() => {
             this._childClickedScript = ScriptField.MakeScript('openInLightbox(this)', { this: Doc.name });
             this._viewDefDivClick = ScriptField.MakeScript('pivotColumnClick(this,payload)', { payload: 'any' });
@@ -58,10 +58,10 @@ export class CollectionTimeView extends CollectionSubView() {
 
         if (addAsAnnotation) {
             // when added as an annotation, links to anchors can be found as links to the document even if the anchors are not rendered
-            if (Cast(this.dataDoc[this.props.fieldKey + '_annotations'], listSpec(Doc), null) !== undefined) {
-                Cast(this.dataDoc[this.props.fieldKey + '_annotations'], listSpec(Doc), []).push(anchor);
+            if (Cast(this.dataDoc[this._props.fieldKey + '_annotations'], listSpec(Doc), null) !== undefined) {
+                Cast(this.dataDoc[this._props.fieldKey + '_annotations'], listSpec(Doc), []).push(anchor);
             } else {
-                this.dataDoc[this.props.fieldKey + '_annotations'] = new List<Doc>([anchor]);
+                this.dataDoc[this._props.fieldKey + '_annotations'] = new List<Doc>([anchor]);
             }
         }
         return anchor;
@@ -84,10 +84,10 @@ export class CollectionTimeView extends CollectionSubView() {
             this,
             e,
             action((e: PointerEvent, down: number[], delta: number[]) => {
-                const minReq = NumCast(this.props.Document[this.props.fieldKey + '-timelineMinReq'], NumCast(this.props.Document[this.props.fieldKey + '-timelineMin'], 0));
-                const maxReq = NumCast(this.props.Document[this.props.fieldKey + '-timelineMaxReq'], NumCast(this.props.Document[this.props.fieldKey + '-timelineMax'], 10));
-                this.props.Document[this.props.fieldKey + '-timelineMinReq'] = minReq + ((maxReq - minReq) * delta[0]) / this.props.PanelWidth();
-                this.props.Document[this.props.fieldKey + '-timelineSpan'] = undefined;
+                const minReq = NumCast(this.Document[this._props.fieldKey + '-timelineMinReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMin'], 0));
+                const maxReq = NumCast(this.Document[this._props.fieldKey + '-timelineMaxReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMax'], 10));
+                this.Document[this._props.fieldKey + '-timelineMinReq'] = minReq + ((maxReq - minReq) * delta[0]) / this._props.PanelWidth();
+                this.Document[this._props.fieldKey + '-timelineSpan'] = undefined;
                 return false;
             }),
             returnFalse,
@@ -100,9 +100,9 @@ export class CollectionTimeView extends CollectionSubView() {
             this,
             e,
             action((e: PointerEvent, down: number[], delta: number[]) => {
-                const minReq = NumCast(this.props.Document[this.props.fieldKey + '-timelineMinReq'], NumCast(this.props.Document[this.props.fieldKey + '-timelineMin'], 0));
-                const maxReq = NumCast(this.props.Document[this.props.fieldKey + '-timelineMaxReq'], NumCast(this.props.Document[this.props.fieldKey + '-timelineMax'], 10));
-                this.props.Document[this.props.fieldKey + '-timelineMaxReq'] = maxReq + ((maxReq - minReq) * delta[0]) / this.props.PanelWidth();
+                const minReq = NumCast(this.Document[this._props.fieldKey + '-timelineMinReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMin'], 0));
+                const maxReq = NumCast(this.Document[this._props.fieldKey + '-timelineMaxReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMax'], 10));
+                this.Document[this._props.fieldKey + '-timelineMaxReq'] = maxReq + ((maxReq - minReq) * delta[0]) / this._props.PanelWidth();
                 return false;
             }),
             returnFalse,
@@ -115,10 +115,10 @@ export class CollectionTimeView extends CollectionSubView() {
             this,
             e,
             action((e: PointerEvent, down: number[], delta: number[]) => {
-                const minReq = NumCast(this.props.Document[this.props.fieldKey + '-timelineMinReq'], NumCast(this.props.Document[this.props.fieldKey + '-timelineMin'], 0));
-                const maxReq = NumCast(this.props.Document[this.props.fieldKey + '-timelineMaxReq'], NumCast(this.props.Document[this.props.fieldKey + '-timelineMax'], 10));
-                this.props.Document[this.props.fieldKey + '-timelineMinReq'] = minReq - ((maxReq - minReq) * delta[0]) / this.props.PanelWidth();
-                this.props.Document[this.props.fieldKey + '-timelineMaxReq'] = maxReq - ((maxReq - minReq) * delta[0]) / this.props.PanelWidth();
+                const minReq = NumCast(this.Document[this._props.fieldKey + '-timelineMinReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMin'], 0));
+                const maxReq = NumCast(this.Document[this._props.fieldKey + '-timelineMaxReq'], NumCast(this.Document[this._props.fieldKey + '-timelineMax'], 10));
+                this.Document[this._props.fieldKey + '-timelineMinReq'] = minReq - ((maxReq - minReq) * delta[0]) / this._props.PanelWidth();
+                this.Document[this._props.fieldKey + '-timelineMaxReq'] = maxReq - ((maxReq - minReq) * delta[0]) / this._props.PanelWidth();
                 return false;
             }),
             returnFalse,
@@ -145,9 +145,9 @@ export class CollectionTimeView extends CollectionSubView() {
 
     @computed get contents() {
         return (
-            <div className="collectionTimeView-innards" key="timeline" style={{ pointerEvents: this.props.isContentActive() ? undefined : 'none' }} onClick={this.contentsDown}>
+            <div className="collectionTimeView-innards" key="timeline" style={{ pointerEvents: this._props.isContentActive() ? undefined : 'none' }} onClick={this.contentsDown}>
                 <CollectionFreeFormView
-                    {...this.props}
+                    {...this._props}
                     engineProps={{ pivotField: this.pivotField, childFilters: this.childDocFilters, childFiltersByRanges: this.childDocRangeFilters }}
                     fitContentsToBox={returnTrue}
                     childClickScript={this._childClickedScript}
@@ -194,7 +194,7 @@ export class CollectionTimeView extends CollectionSubView() {
     @computed get _allFacets() {
         const facets = new Set<string>();
         this.childDocs.forEach(child => Object.keys(Doc.GetProto(child)).forEach(key => facets.add(key)));
-        Doc.AreProtosEqual(this.dataDoc, this.props.Document) && this.childDocs.forEach(child => Object.keys(child).forEach(key => facets.add(key)));
+        Doc.AreProtosEqual(this.dataDoc, this.Document) && this.childDocs.forEach(child => Object.keys(child).forEach(key => facets.add(key)));
         return Array.from(facets);
     }
     menuCallback = (x: number, y: number) => {
@@ -211,7 +211,7 @@ export class CollectionTimeView extends CollectionSubView() {
         Array.from(keySet).map(fieldKey => docItems.push({ description: ':' + fieldKey, event: () => (this.layoutDoc._pivotField = fieldKey), icon: 'compress-arrows-alt' }));
         docItems.push({ description: ':default', event: () => (this.layoutDoc._pivotField = undefined), icon: 'compress-arrows-alt' });
         ContextMenu.Instance.addItem({ description: 'Pivot Fields ...', subitems: docItems, icon: 'eye' });
-        const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(x, y);
+        const pt = this._props.ScreenToLocalTransform().inverse().transformPoint(x, y);
         ContextMenu.Instance.displayMenu(x, y, ':');
     };
 
@@ -227,7 +227,7 @@ export class CollectionTimeView extends CollectionSubView() {
                         }
                         return false;
                     }}
-                    background={'#f1efeb'} // this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
+                    background={'#f1efeb'} // this._props.headingObject ? this._props.headingObject.color : "#f1efeb";
                     contents={':' + StrCast(this.layoutDoc._pivotField)}
                     showMenuOnLoad={true}
                     display={'inline'}
@@ -246,7 +246,7 @@ export class CollectionTimeView extends CollectionSubView() {
             }
         });
         const forceLayout = StrCast(this.layoutDoc._forceRenderEngine);
-        const doTimeline = forceLayout ? forceLayout === computeTimelineLayout.name : nonNumbers / this.childDocs.length < 0.1 && this.props.PanelWidth() / this.props.PanelHeight() > 6;
+        const doTimeline = forceLayout ? forceLayout === computeTimelineLayout.name : nonNumbers / this.childDocs.length < 0.1 && this._props.PanelWidth() / this._props.PanelHeight() > 6;
         if (doTimeline !== (this._layoutEngine === computeTimelineLayout.name)) {
             if (!this._changing) {
                 this._changing = true;
@@ -261,10 +261,10 @@ export class CollectionTimeView extends CollectionSubView() {
         }
 
         return (
-            <div className={'collectionTimeView' + (doTimeline ? '' : '-pivot')} onContextMenu={this.specificMenu} style={{ width: this.props.PanelWidth(), height: '100%' }}>
+            <div className={'collectionTimeView' + (doTimeline ? '' : '-pivot')} onContextMenu={this.specificMenu} style={{ width: this._props.PanelWidth(), height: '100%' }}>
                 {this.pivotKeyUI}
                 {this.contents}
-                {!this.props.isSelected() || !doTimeline ? null : (
+                {!this._props.isSelected() || !doTimeline ? null : (
                     <>
                         <div className="collectionTimeView-thumb-min collectionTimeView-thumb" key="min" onPointerDown={this.onMinDown} />
                         <div className="collectionTimeView-thumb-max collectionTimeView-thumb" key="mid" onPointerDown={this.onMaxDown} />
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts
index 710b0211e..12fb42077 100644
--- a/src/typings/index.d.ts
+++ b/src/typings/index.d.ts
@@ -13,7 +13,6 @@ declare module 'pdfjs-dist/web/pdf_viewer';
 declare module 'reveal';
 declare module 'react-reveal';
 declare module 'react-reveal/makeCarousel';
-declare module '@hig/flyout';
 declare module 'express-flash';
 declare module 'connect-flash' {
     interface flash {}