added an incremental load for freeform collections. fixed updating of web page thumbs on deselection after the first thumb is generated.

5 files changed, 22 insertions, 12 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index aeda71d01..2df053c50 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1300,6 +1300,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         return { newPool, computedElementData: this.doFreeformLayout(newPool) };
     }
 
+    @observable numLoaded = 0;
     get doLayoutComputation() {
         const { newPool, computedElementData } = this.doInternalLayoutComputation;
         const array = Array.from(newPool.entries());
@@ -1558,8 +1559,13 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     }
 
     children = () => {
+        this.numLoaded < this.views.length && setTimeout(action(() => this.numLoaded += 10), 500);
         const children = typeof this.props.children === "function" ? (this.props.children as any)() as JSX.Element[] : [];
-        return [...children, ...this.views, <CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" />];
+        return [
+            ...children,
+            ...this.views.slice(0, Math.min(this.views.length, this.numLoaded + 10)),
+            <CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" />
+        ];
     }
 
     chooseGridSpace = (gridSpace: number): number => {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 19b16f071..b537cd370 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -840,7 +840,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     }
     @computed get contents() {
         TraceMobx();
-        const thumb = ImageCast(this.layoutDoc["thumb-frozen"], ImageCast(this.layoutDoc.thumb))?.url.href;
+        const thumb = ImageCast(this.layoutDoc["thumb-frozen"], ImageCast(this.layoutDoc.thumb))?.url.href.replace(".png", "_m.png");
         const audioView = !this.layoutDoc._showAudio ? (null) :
             <div className="documentView-audioBackground" onPointerDown={this.recordAudioAnnotation} onPointerEnter={this.onPointerEnter} >
                 <FontAwesomeIcon className="documentView-audioFont"
@@ -865,7 +865,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 focus={this.focus}
                 layoutKey={this.finalLayoutKey} />
             {(this.isContentActive() && !SnappingManager.GetIsDragging()) || !thumb ? (null) :
-                <img style={{ background: "white", top: 0, position: "absolute" }} src={thumb}// + '?d=' + (new Date()).getTime()}
+                <img style={{ background: "white", top: 0, position: "absolute" }} src={thumb + '?d=' + (new Date()).getTime()}
                     width={this.props.PanelWidth()} height={this.props.PanelHeight()} />}
             {this.layoutDoc.hideAllLinks ? (null) : this.allLinkEndpoints}
             {this.hideLinkButton || this.props.renderDepth === -1 || SnappingManager.GetIsDragging() ? (null) :
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 30f905738..f384f97cd 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -117,6 +117,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         reaction(() => this.props.isSelected(),
             async (selected) => {
                 if (selected) {
+                    this._webPageHasBeenRendered = true;
                     setTimeout(action(() => {
                         this._scrollHeight = Math.max(this.scrollHeight, this._iframe?.contentDocument?.body.scrollHeight || 0);
                         if (this._initialScroll !== undefined && this._outerRef.current) {
@@ -133,6 +134,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         if (!htmlString) {
                             htmlString = await (await fetch(Utils.CorsProxy(this.webField!.href))).text();
                         }
+                        this.layoutDoc.thumb = undefined;
                         const nativeWidth = NumCast(this.layoutDoc.nativeWidth);
                         CreateImage(
                             this._webUrl.endsWith("/") ? this._webUrl.substring(0, this._webUrl.length - 1) : this._webUrl,
@@ -142,10 +144,10 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             nativeWidth * this.props.PanelHeight() / this.props.PanelWidth(),
                             NumCast(this.layoutDoc._scrollTop)
                         ).then
-                            (action((dataUrl: any) => {
+                            ((dataUrl: any) => {
                                 VideoBox.convertDataUri(dataUrl, this.layoutDoc[Id] + "-thumb", true).then(
-                                    returnedfilename => this.layoutDoc.thumb = new ImageField(returnedfilename));
-                            }))
+                                    returnedfilename => setTimeout(action(() => this.layoutDoc.thumb = new ImageField(returnedfilename)), 500));
+                            })
                             .catch(function (error: any) {
                                 console.error('oops, something went wrong!', error);
                             });
@@ -550,8 +552,10 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         }
     }
 
+    @observable _webPageHasBeenRendered = false;
+
     @computed get urlContent() {
-        if (this._hackHide) return (null);
+        if (this._hackHide || (this.webThumb && !this._webPageHasBeenRendered)) return (null);
         const field = this.dataDoc[this.props.fieldKey];
         let view;
         if (field instanceof HtmlField) {
@@ -569,6 +573,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 style={{ pointerEvents: this._scrollTimer ? "none" : undefined }} // if we allow pointer events when scrolling is on, then reversing direction does not work smoothly
                 ref={action((r: HTMLIFrameElement | null) => this._iframe = r)} src={"https://crossorigin.me/https://cs.brown.edu"} />;
         }
+        setTimeout(action(() => this._webPageHasBeenRendered = true));
         return view;
     }
 
@@ -703,9 +708,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 pointerEvents={this._isAnnotating || SnappingManager.GetIsDragging() ? "all" : "none"} />;
         return (
             <div className="webBox" ref={this._mainCont}
-                style={{ pointerEvents: this.pointerEvents(), display: !this.props.isSelected() && !this.isAnyChildContentActive() ? "none" : undefined }} >
-                <div hidden={!this.props.isSelected() && !this.isAnyChildContentActive() ? true : false}
-                    className={`webBox-container`} style={{ pointerEvents }} onContextMenu={this.specificContextMenu}>
+                style={{ pointerEvents: this.pointerEvents(), display: !this.props.isSelected() && !this.isAnyChildContentActive() && this.webThumb ? "none" : undefined }} >
+                <div className="webBox-container" style={{ pointerEvents }} onContextMenu={this.specificContextMenu}>
                     <div className={"webBox-outerContent"} ref={this._outerRef}
                         style={{
                             width: `calc(${100 / scale}% - ${this.sidebarWidth() / scale * (this._previewWidth ? scale : 1)}px)`,
diff --git a/src/fields/util.ts b/src/fields/util.ts
index cef3123d6..c708affe3 100644
--- a/src/fields/util.ts
+++ b/src/fields/util.ts
@@ -20,7 +20,7 @@ function _readOnlySetter(): never {
     throw new Error("Documents can't be modified in read-only mode");
 }
 
-const tracing = true;
+const tracing = false;
 export function TraceMobx() {
     tracing && trace();
 }
diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts
index a1fdd9f19..597ff1ce0 100644
--- a/src/server/ApiManagers/UploadManager.ts
+++ b/src/server/ApiManagers/UploadManager.ts
@@ -263,7 +263,7 @@ export default class UploadManager extends ApiManager {
                 return imageDataUri.outputFile(uri, serverPathToFile(Directory.images, InjectSize(filename, origSuffix))).then((savedName: string) => {
                     const ext = extname(savedName).toLowerCase();
                     const { pngs, jpgs } = AcceptableMedia;
-                    const resizers = !origSuffix ? [] : [
+                    const resizers = !origSuffix ? [{ resizer: sharp().resize(400, undefined, { withoutEnlargement: true }), suffix: "_m" }] : [
                         { resizer: sharp().resize(100, undefined, { withoutEnlargement: true }), suffix: "_s" },
                         { resizer: sharp().resize(400, undefined, { withoutEnlargement: true }), suffix: "_m" },
                         { resizer: sharp().resize(900, undefined, { withoutEnlargement: true }), suffix: "_l" },