fixed issues with taking dashboard snapshots to update dashboard view

4 files changed, 19 insertions, 76 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index b1329e349..2d2dda2b8 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -1183,13 +1183,13 @@ export class CurrentUserUtils {
         input.click();
     }
 
-    public static async snapshotDashboard(userDoc: Doc) {
+    public static CaptureDashboardThumbnail() {
         const docView = CollectionDockingView.Instance.props.DocumentView?.();
         const content = docView?.ContentDiv;
         if (docView && content) {
             const _width = Number(getComputedStyle(content).width.replace("px",""));
             const _height = Number(getComputedStyle(content).height.replace("px",""));
-            CollectionFreeFormView.UpdateIcon(
+            return CollectionFreeFormView.UpdateIcon(
                 docView.layoutDoc[Id] + "-icon" + (new Date()).getTime(),
                 content,
                 _width, _height,
@@ -1199,10 +1199,13 @@ export class CurrentUserUtils {
                     const proto = Cast(img.proto, Doc, null)!;
                     proto["data-nativeWidth"] = _width;
                     proto["data-nativeHeight"] = _height;
-                    docView.dataDoc.thumb = img;
+                    Doc.GetProto(CurrentUserUtils.ActiveDashboard).thumb = img;
                 });
         }
 
+    }
+
+    public static async snapshotDashboard(userDoc: Doc) {
         const copy = await CollectionDockingView.Copy(CurrentUserUtils.ActiveDashboard);
         Doc.AddDocToList(Cast(userDoc.myDashboards, Doc, null), "data", copy);
         CurrentUserUtils.openDashboard(userDoc, copy);
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index 5fd9b550d..3cfece970 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -1,4 +1,5 @@
 import { observable } from "mobx";
+import { extname } from 'path';
 import { observer } from "mobx-react";
 import * as React from 'react';
 import { Doc, DocListCast } from "../../fields/Doc";
@@ -33,13 +34,16 @@ export class DashboardView extends React.Component {
                         <div>All Dashboards</div>
                   </div>
                   <div className="all-dashboards">
-                        {myDashboards.map((dashboard) =>
-                              <div className="dashboard-container" key={dashboard[Id]} onClick={(e) => { this.clickDashboard(e, dashboard) }}>
-                                    <img src="https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU="></img>
+                        {myDashboards.map((dashboard) => {
+                              const url = ImageCast((dashboard.thumb as Doc)?.data)?.url;
+                              const ext = url ? extname(url.href):"";
+                              const href = url?.href.replace(ext, "_m"+ ext); // need to choose which resolution image to show.  options are _s, _m, _l, _o   (small/medium/large/original)
+                              return <div className="dashboard-container" key={dashboard[Id]} onClick={e => this.clickDashboard(e, dashboard)}>
+                                    <img src={href ?? "https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU="}></img>
                                     <div className="title"> {StrCast(dashboard.title)} </div>
                               </div>
 
-                        )}
+                        })}
                         {myDashboards.map((dashboard) => {
                               console.log(dashboard.thumb)
                         })}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index f4d2d55d5..ef3a896e1 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1532,7 +1532,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         const htmlString = new XMLSerializer().serializeToString(newDiv);
         const nativeWidth = width;
         const nativeHeight = height;
-        CreateImage(
+        return CreateImage(
             Utils.prepend(""),
             document.styleSheets,
             htmlString,
@@ -1540,11 +1540,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             nativeWidth * panelHeight / panelWidth,
             scrollTop
         ).then
-            ((data_url: any) => {
-                VideoBox.convertDataUri(data_url, filename).then(
-                    returnedfilename => setTimeout(() => {
-                        cb(returnedfilename as string, nativeWidth, nativeHeight);
-                    }, 500));
+            (async (data_url: any) => {
+                const returnedFilename = await VideoBox.convertDataUri(data_url, filename);
+                cb(returnedFilename as string, nativeWidth, nativeHeight);
             })
             .catch(function (error: any) {
                 console.error('oops, something went wrong!', error);
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index fcc72b73d..21ef807ff 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -21,7 +21,7 @@ import "./TopBar.scss";
 @observer
 export class TopBar extends React.Component {
       navigateToHome = () => {
-            Doc.UserDoc().activeDashboard = undefined
+            CurrentUserUtils.CaptureDashboardThumbnail()?.then(() => Doc.UserDoc().activeDashboard = undefined);
       }
       render() {
             const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
@@ -61,68 +61,6 @@ export class TopBar extends React.Component {
                               </div>
                         </div>
                   </div>
-                 
-
-                              {/* <div className="topbar-left">
-                        <div className="topbar-lozenge-user">
-                            {`${Doc.CurrentUserEmail}`}
-                        </div>
-                        <div className="topbar-icon" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
-                            {"Log out"}
-                        </div>
-                    </div> */}
-            {/* <div className="topbar-center" >
-                        <div className="topbar-lozenge-dashboard">
-                              <div style={{ color: Colors.WHITE }}>
-                                    {activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
-                              </div> */}
-
-            {/* <select className="topbar-dashSelect" onChange={undoBatch(e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)]))}
-                                value={myDashboards.indexOf(CurrentUserUtils.ActiveDashboard)}
-                                style={{ color: Colors.WHITE }}>
-                                {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)}
-                            </select> */}
-            {/* </div> */ }
-            {/* <div className="topbar-dashboards">
-                            <Tooltip title={<div className="dash-tooltip">Create a new dashboard </div>} placement="bottom"><div className="topbar-icon" onClick={async () => {
-                                const batch = UndoManager.StartBatch("new dash");
-                                await CurrentUserUtils.createNewDashboard(Doc.UserDoc());
-                                batch.end();
-                            }}>
-                                New<FontAwesomeIcon icon="plus" />
-                            </div>
-                            </Tooltip>
-                            <Tooltip title={<div className="dash-tooltip">Work on a copy of the dashboard layout</div>} placement="bottom">
-                                <div className="topbar-icon" onClick={async () => {
-                                    const batch = UndoManager.StartBatch("snapshot");
-                                    await CurrentUserUtils.snapshotDashboard(Doc.UserDoc());
-                                    batch.end();
-                                }}>
-                                    Snapshot<FontAwesomeIcon icon="camera" />
-                                </div>
-                            </Tooltip>
-                            <Tooltip title={<div className="dash-tooltip">Browsing mode for directly navigating to documents</div>} placement="bottom">
-                                <div className="topbar-icon" style={{ background: MainView.Instance._exploreMode ? Colors.LIGHT_BLUE : undefined }} onClick={action(() => MainView.Instance._exploreMode = !MainView.Instance._exploreMode)}>
-                                    Explore<FontAwesomeIcon icon="map" />
-                                </div>
-                            </Tooltip>
-                        </div> */}
-            {/* </div> */ }
-            {/* <div className="topbar-right" > */ }
-            {/* <div onClick={() => window.open(
-                            "https://brown-dash.github.io/Dash-Documentation/", "_blank")}>
-                              <FontAwesomeIcon icon="question-circle" />
-                          </div>
-                          <div onClick={() => SettingsManager.Instance.open()}>
-                          <FontAwesomeIcon icon="cog" />
-                          </div> */}
-            {/* <div className="topbar-icon" >
-                                          <FontAwesomeIcon icon="question-circle" />
-                                    </div>
-                                    <div className="topbar-icon" onClick={() => SettingsManager.Instance.open()}>
-                                          <FontAwesomeIcon icon="cog" />
-                                    </div>
-                              </div> */}
                         
             );
       }