list queries in shared email

Author: Lazy-poet

public/js/cloud_share_modal.js

@@ -84,7 +84,7 @@ export default class CloudShareModal extends React.Component {
   renderResults() {
     const { shareableurl } = this.state;
 
-    return <ShareURLComponent url={shareableurl} querydb={this.props.querydb} program={this.props.program} queryLength={this.props.queryLength} />;
+    return <ShareURLComponent url={shareableurl} querydb={this.props.querydb} program={this.props.program} queries={this.props.queries} />;
   }
 
   renderError() {

public/js/mailto.js

@@ -1,27 +1,39 @@
-export default function asMailtoHref(querydb, program, numQueries, url, isOpenAccess) {
+export default function asMailtoHref(querydb, program, queries, url, isOpenAccess) {
     const dbsArr = formatDatabases(querydb);
-    const mailto = composeEmail(dbsArr, program, numQueries, url, isOpenAccess);
+    const mailto = composeEmail(dbsArr, program, queries, url, isOpenAccess);
     return encodeEmail(mailto);
 }
 
-function formatDatabases(querydb) {
-    return querydb
+function listTop15Items (objArr, key){
+    return objArr
         .slice(0, 15)
-        .map(db => ' ' + db.title);
+        .map(obj => `- ${obj[key]}`)
+        .join('\n');
+}
+
+function formatDatabases(querydb) {
+    return 'Databases:\n' + listTop15Items(querydb, 'title');
 }
 
-function composeEmail(dbsArr, program, numQueries, url, isOpenAccess) {
+function listQueryIdentifiers(queries){
+    return 'Queries:\n' + listTop15Items(queries, 'id');
+}
+
+function composeEmail(dbsArr, program, queries, url, isOpenAccess) {
     const upperProgram = program.toUpperCase();
     const accessStatement = isOpenAccess ? '' : 'The link will work if you have access to that particular SequenceServer instance.';
-
+    const queryIdentifiers = listQueryIdentifiers(queries); 
     return `mailto:?subject=SequenceServer ${upperProgram} analysis results &body=Hello,
 
-        Here is a link to my recent ${upperProgram} analysis of ${numQueries} sequences.
+        Here is a link to my recent ${upperProgram} analysis of ${queries.length} sequences.
             ${url}
+        
+        Below is a breakdown of the databases and queries used (up to 15 are shown for each).
 
-        The following databases were used (up to 15 are shown):
-            ${dbsArr}
-
+        ${dbsArr}
+            
+        ${queryIdentifiers}
+    
         ${accessStatement}
 
         Thank you for using SequenceServer, and please remember to cite our paper.

public/js/share_url.js

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import asMailtoHref from './mailto';
 
-const ShareURLComponent = ({ querydb, program, queryLength, url }) => {
+const ShareURLComponent = ({ querydb, program, queries, url }) => {
     const [copied, setCopied] = useState(false);
 
     const copyToClipboard = () => {
@@ -14,7 +14,7 @@ const ShareURLComponent = ({ querydb, program, queryLength, url }) => {
             <input name="shareableUrl" type="text" value={url} readOnly />
             <div className="actions">
                 <button className="btn btn-primary" onClick={copyToClipboard}>{copied ? 'Copied!' : 'Copy to Clipboard'}</button>
-                <a href={asMailtoHref(querydb, program, queryLength, url, true)}>Share via email</a>
+                <a href={asMailtoHref(querydb, program, queries, url, true)}>Share via email</a>
             </div>
         </div>
     );

public/js/sidebar.js

@@ -361,24 +361,22 @@ export default class extends Component {
                     </h4>
                 </div>
                 <ul className="nav">
-                    {!this.props.cloudSharingEnabled &&
-                        <li>
-                            <a id="copyURL" className="btn-link copy-URL cursor-pointer" data-toggle="tooltip"
-                                onClick={this.copyURL}>
-                                <i className="fa fa-copy"></i> Copy URL to clipboard
-                            </a>
-                        </li>
-                    }
-                    {!this.props.cloudSharingEnabled &&
-                        <li>
-                            <a id="sendEmail" className="btn-link email-URL cursor-pointer" data-toggle="tooltip"
-                                title="Send by email" href={asMailtoHref(this.props.data.querydb, this.props.data.program, this.props.data.queries.length, window.location.href)}
-                                target="_blank" rel="noopener noreferrer">
-                                <i className="fa fa-envelope"></i> Send by email
-                            </a>
-                        </li>
-                    }
-                    {this.props.cloudSharingEnabled &&
+                    {!this.props.cloudSharingEnabled ?
+                        <>
+                            <li>
+                                <a id="copyURL" className="btn-link copy-URL cursor-pointer" data-toggle="tooltip"
+                                    onClick={this.copyURL}>
+                                    <i className="fa fa-copy"></i> Copy URL to clipboard
+                                </a>
+                            </li>
+                            <li>
+                                <a id="sendEmail" className="btn-link email-URL cursor-pointer" data-toggle="tooltip"
+                                    title="Send by email" href={asMailtoHref(this.props.data.querydb, this.props.data.program, this.props.data.queries, window.location.href)}
+                                    target="_blank" rel="noopener noreferrer">
+                                    <i className="fa fa-envelope"></i> Send by email
+                                </a>
+                            </li>
+                        </> :
                         <li>
                             <button className="btn-link cloud-Post cursor-pointer" data-toggle="tooltip"
                                 title="Upload results to SequenceServer Cloud where it will become accessable
@@ -393,7 +391,7 @@ export default class extends Component {
                         ref="cloudShareModal"
                         querydb={this.props.data.querydb}
                         program={this.props.data.program}
-                        queryLength={this.props.data.queries.length}
+                        queries={this.props.data.queries}
                     />
                 }
             </div>