- Download and Share options moved from menu popup to toolbar.

- Download button now downloads everything (enrichment data and images) in one ZIP.
- Using a new "Share" icon.
-- #266

src/client/components/network-editor/controller.js

@@ -761,44 +761,36 @@ export class NetworkEditorController {
       return geneSet.genes;
     }
   }
-
 
-  async exportImageArchive() {
-    const blobs = await Promise.all([
-      this.createNetworkImageBlob(ImageSize.SMALL),
-      this.createNetworkImageBlob(ImageSize.MEDIUM),
-      this.createNetworkImageBlob(ImageSize.LARGE),
-      this.createSVGLegendBlob()
-    ]);
-
-    const zip = new JSZip();
-    zip.file('enrichment_map_small.png',  blobs[0]);
-    zip.file('enrichment_map_medium.png', blobs[1]);
-    zip.file('enrichment_map_large.png',  blobs[2]);
-    zip.file('node_color_legend_NES.svg', blobs[3]);
-
-    const fileName = this.getZipFileName('images');
-    this.saveZip(zip, fileName);
-  }
 
-  async exportDataArchive() {
+  async exportArchive() {
     const netID = this.networkIDStr;
 
     const fetchExport = async path => {
       const res = await fetch(path);
       return await res.text();
     };
 
+    const blobs = await Promise.all([
+      this.createNetworkImageBlob(ImageSize.SMALL),
+      this.createNetworkImageBlob(ImageSize.MEDIUM),
+      this.createNetworkImageBlob(ImageSize.LARGE),
+      this.createSVGLegendBlob()
+    ]);
     const files = await Promise.all([
       fetchExport(`/api/export/enrichment/${netID}`),
       fetchExport(`/api/export/ranks/${netID}`),
       fetchExport(`/api/export/gmt/${netID}`),
     ]);
 
     const zip = new JSZip();
-    zip.file('enrichment_results.txt', files[0]);
-    zip.file('ranks.txt', files[1]);
-    zip.file('gene_sets.gmt', files[2]);
+    zip.file('images/enrichment_map_small.png',  blobs[0]);
+    zip.file('images/enrichment_map_medium.png', blobs[1]);
+    zip.file('images/enrichment_map_large.png',  blobs[2]);
+    zip.file('images/node_color_legend_NES.svg', blobs[3]);
+    zip.file('data/enrichment_results.txt', files[0]);
+    zip.file('data/ranks.txt', files[1]);
+    zip.file('data/gene_sets.gmt', files[2]);
 
     const fileName = this.getZipFileName('enrichment');
     this.saveZip(zip, fileName);

src/client/components/network-editor/main.js

@@ -14,7 +14,6 @@ import LeftDrawer from './left-drawer';
 import RightDrawer from './right-drawer';
 import BottomDrawer from './bottom-drawer';
 import { TYPE as UNDO_TYPE } from './undo-stack';
-import { delay } from './util';
 
 import { Button, IconButton, Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core';
 import { Paper, List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
@@ -29,10 +28,8 @@ import AddIcon from '@material-ui/icons/Add';
 import RemoveIcon from '@material-ui/icons/Remove';
 import UndoIcon from '@material-ui/icons/Undo';
 import RestoreIcon from '@material-ui/icons/SettingsBackupRestore';
-import LinkIcon from '@material-ui/icons/Link';
-import InsertDriveFileOutlinedIcon from '@material-ui/icons/InsertDriveFileOutlined';
 import KeyboardReturnIcon from '@material-ui/icons/KeyboardReturn';
-import { DownloadIcon } from '../svg-icons';
+import { DownloadIcon, ShareIcon } from '../svg-icons';
 
 
 const useStyles = makeStyles((theme) => ({
@@ -283,8 +280,7 @@ const Main = ({
   const [ undoEnabled, setUndoEnabled ] = useState(false);
   const [ undoType, setUndoType] = useState(null);
   const [ panner ] = useState(() => createPanner(controller));
-  const [ imageExportEnabled, setImageExportEnabled ] = useState(true);
-  const [ dataExportEnabled, setDataExportEnabled ] = useState(true);
+  const [ exportEnabled, setExportEnabled ] = useState(true);
   const [ snackBarState, setSnackBarState ] = useState({
     open: false,
     message: "",
@@ -312,56 +308,18 @@ const Main = ({
 
   // Share/Download functions
   const handleCopyLink = async () => {
-    await handleCopyToClipboard();
+    handleCopyToClipboard();
     snack.showMessage("Link copied to clipboard");
   };
 
-  const handleExportImages = async () => {
-    setImageExportEnabled(false);
-    snack.showSpinner("Preparing network images...");
-    await delay(50); // allows the menu to close immediately, otherwise it hangs for a couple seconds
-    await controller.exportImageArchive(controller);
+  const handleExport = async () => {
+    setExportEnabled(false);
+    snack.showSpinner("Preparing enrichment data and network images...");
+    await controller.exportArchive(controller);
     snack.close();
-    setImageExportEnabled(true); 
+    setExportEnabled(true); 
   };
 
-  const handleExportData = async () => {
-    setDataExportEnabled(false);
-    const promise = controller.exportDataArchive(controller);
-    await spinnerUntilDone(promise, "Preparing enrichment data...");
-    setDataExportEnabled(true);
-  };
-
-  const spinnerUntilDone = async (promise, message) => {
-    // Only show spinner if it takes longer than the delay
-    const value = await Promise.race([ promise, delay(500) ]);
-    if (value === 'delay') {
-      // if the delay promise finished first
-      snack.showSpinner(message);
-    }
-    await promise; // wait for the export to finish if it hasn't already
-    snack.close();
-  };
-
-  // Definitons for the toolbar (or mobile menu drawer)
-  const shareMenuDef = [
-    {
-      title: "Share Link to Network",
-      icon: <LinkIcon />,
-      onClick: handleCopyLink,
-    }, {
-      title: "Download Network Images",
-      icon: <InsertDriveFileOutlinedIcon />,
-      disabled: !imageExportEnabled,
-      onClick: handleExportImages,
-    }, {
-      title: "Download Enrichment Data",
-      icon: <InsertDriveFileOutlinedIcon />,
-      disabled: !dataExportEnabled,
-      onClick: handleExportData,
-    }
-  ];
-
   const menuDef = [ 
     {
       title: getUndoMenuTitle(undoType),
@@ -393,9 +351,14 @@ const Main = ({
       onClick: panner.fit,
       unrelated: true,
     }, {
-      title: "Share/Download",
+      title: "Download Enrichment Data and Images",
       icon: <DownloadIcon />,
-      subMenu: shareMenuDef,
+      onClick: handleExport,
+      isEnabled: () => exportEnabled,
+    }, {
+      title: "Share",
+      icon: <ShareIcon />,
+      onClick: handleCopyLink,
     },
   ];