Update "Download selected files" modal (#699)

* Add gen3 download instructions * Fix gen3 command * Check gen3commands exist before generating commands * fix typescript error * Add gen3 manifest.json generatio * Update generateGen3ManifestFile function * Correct filedownloaded for gen3 * Add copy to clipboard for code blocks * Refine gen3 instructions * Take h2 outside p * Add into div * Remove gen3 command in place of manifest * Recomend python=3.11 * Refactor CDSInstructions * Fix refactored cdsManifestInstructions * Refine synapse instructions * Typos * Restructure download instructions * Fix CDSInstructions * Remove unused IDC instructions and update gen3 instructions * Refine gen3 instructions * Remove copy code functionality from FIlemodal * Refine multiline code block * Close div * Refine FileModalLayout * Close HR tags * Add list of synapse files * Remove duplicated synapsefilelist * Fixes * Show CDS filelist only once * Increase FileDownloadModal width * Revert FileDownloadModal width * Update lock and hourglass icons * Render open access file list and update icons * Update open access language * Update gen3 instructions * Update filter controls icons * Add space * Fix file filter controls * Import missing icon * Fix gen3 command indentation * Adjust language * Remove unused commands --------- Co-authored-by: 🔧 Ino de Bruijn 🧬 <[email protected]> Co-authored-by: Onur Sumer <[email protected]>
ncihtan · Nov 4, 2024 · 9dd0173 · 9dd0173
1 parent da65ddb
commit 9dd0173
Show file tree

Hide file tree

Showing 3 changed files with 282 additions and 178 deletions.
diff --git a/packages/data-portal-explore/src/components/DataAvailabilityTable.tsx b/packages/data-portal-explore/src/components/DataAvailabilityTable.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { Table } from 'react-bootstrap';
 import { generatePublicationPageTabUrl } from '../lib/dataTableHelpers';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLockOpen } from '@fortawesome/free-solid-svg-icons';
+import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons';
 
 interface IDataAvailabilityTableProps {
     assays: { [assayName: string]: Entity[] };
@@ -88,13 +88,20 @@ export const DataAvailabilityTable: React.FunctionComponent<IDataAvailabilityTab
                 <tr>
                     <th>Files</th>
                     <th>
-                        <a href="/data-access">CDS/SB-CGC (dbGaP 🔒)</a>
+                        <a href="/data-access">
+                            CDS/SB-CGC (dbGaP{' '}
+                            <FontAwesomeIcon
+                                color="#FF8C00"
+                                icon={faLock}
+                            />
+                            )
+                        </a>
                     </th>
                     <th>
                         <a href="/data-access">
                             CDS/SB-CGC (Open Access{` `}
                             <FontAwesomeIcon
-                                color="#1adb54"
+                                color="#00796B"
                                 icon={faLockOpen}
                             />
                             )
@@ -104,7 +111,7 @@ export const DataAvailabilityTable: React.FunctionComponent<IDataAvailabilityTab
                         <a href="/data-access">
                             Synapse (Open Access{` `}
                             <FontAwesomeIcon
-                                color="#1adb54"
+                                color="#00796B"
                                 icon={faLockOpen}
                             />
                             )

diff --git a/packages/data-portal-explore/src/components/FileFilterControls.tsx b/packages/data-portal-explore/src/components/FileFilterControls.tsx
@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react';
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLockOpen } from '@fortawesome/free-solid-svg-icons';
+import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons';
 
 import {
     FilterControls,
@@ -128,14 +128,22 @@ export const FileFilterControls: React.FunctionComponent<IFileFilterControlProps
                             })
                             .map((e: OptionType) => {
                                 const downloadLabels = {
-                                    [DownloadSourceCategory.dbgap]:
-                                        'CDS/SB-CGC (dbGaP 🔒)',
+                                    [DownloadSourceCategory.dbgap]: (
+                                        <span>
+                                            CDS/SB-CGC (dbGaP{' '}
+                                            <FontAwesomeIcon
+                                                color="#FF8C00"
+                                                icon={faLock}
+                                            />
+                                            )
+                                        </span>
+                                    ),
                                     // [DownloadSourceCategory.idc]: 'IDC (Imaging)',
                                     [DownloadSourceCategory.cds]: (
                                         <span>
                                             CDS/SB-CGC (Open Access{' '}
                                             <FontAwesomeIcon
-                                                color="#1adb54"
+                                                color="#00796B"
                                                 icon={faLockOpen}
                                             />
                                             )
@@ -145,7 +153,7 @@ export const FileFilterControls: React.FunctionComponent<IFileFilterControlProps
                                         <span>
                                             Synapse (Open Access{' '}
                                             <FontAwesomeIcon
-                                                color="#1adb54"
+                                                color="#00796B"
                                                 icon={faLockOpen}
                                             />
                                             )