(PXP-6540): Feat/explorer download formats

docs/portal_config.md

@@ -230,11 +230,38 @@ Below is an example, with inline comments describing what each JSON block config
     "buttons": [ // required; buttons for Data Explorer
       {
         "enabled": true, // required; if the button is enabled or disabled
-        "type": "data", // required; button type - what should it do? Data = downloading clinical data
+        "type": "data", // required; button data type sub-options (case insensitive): ["data" (default), "data-tsv", "data-csv", "data-json"] - what should it do? Data = downloading default clinical JSON data
         "title": "Download All Clinical", // required; title of button
         "leftIcon": "user", // optional; icon on left from /img/icons
         "rightIcon": "download", // optional; icon on right from /img/icons
-        "fileName": "clinical.json", // required; file name when it is downloaded
+        "fileName": "clinical.json", // required; file name when it is downloaded (set file ext. to default json)
+        "dropdownId": "download" // optional; if putting into a dropdown, the dropdown id
+      },
+      {
+        "enabled": true, // required; if the button is enabled or disabled
+        "type": "data-tsv", // required; button data type - what should it do? Data = downloading clinical TSV data
+        "title": "TSV", // required; title of button
+        "leftIcon": "datafile", // optional; icon on left from /img/icons
+        "rightIcon": "download", // optional; icon on right from /img/icons
+        "fileName": "clinical.tsv", // required; file name when it is downloaded (file ext. should match data type)
+        "dropdownId": "download" // optional; if putting into a dropdown, the dropdown id
+      },
+      {
+        "enabled": true, // required; if the button is enabled or disabled
+        "type": "data-csv", // required; button data type - what should it do? Data = downloading clinical CSV data
+        "title": "CSV", // required; title of button
+        "leftIcon": "datafile", // optional; icon on left from /img/icons
+        "rightIcon": "download", // optional; icon on right from /img/icons
+        "fileName": "clinical.csv", // required; file name when it is downloaded (file ext. should match data type)
+        "dropdownId": "download" // optional; if putting into a dropdown, the dropdown id
+      },
+      {
+        "enabled": true, // required; if the button is enabled or disabled
+        "type": "data-json", // required; (equivalent to just "data" but we add it for consistency) button data type - what should it do? Data = downloading clinical JSON data
+        "title": "JSON", // required; title of button
+        "leftIcon": "datafile", // optional; icon on left from /img/icons
+        "rightIcon": "download", // optional; icon on right from /img/icons
+        "fileName": "clinical.json", // required; file name when it is downloaded (file ext. should match data type)
         "dropdownId": "download" // optional; if putting into a dropdown, the dropdown id
       },
       {

package.json

@@ -11,7 +11,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.2.0",
     "@fortawesome/react-fontawesome": "^0.1.0",
-    "@gen3/guppy": "^0.9.2",
+    "@gen3/guppy": "^0.10.0",
     "@gen3/ui-component": "^0.6.4",
     "@storybook/addon-actions": "^5.0.0",
     "@storybook/react": "^5.0.0",

src/GuppyDataExplorer/ExplorerButtonGroup/ExplorerButtonGroup.css

@@ -4,6 +4,7 @@
 
 .explorer-button-group__dropdown {
   width: 200px;
+  margin-right: 10px;
 }
 
 .explorer-button-group__toaster-div {

src/GuppyDataExplorer/ExplorerButtonGroup/index.jsx

@@ -119,8 +119,8 @@ class ExplorerButtonGroup extends React.Component {
 
   getOnClickFunction = (buttonConfig) => {
     let clickFunc = () => {};
-    if (buttonConfig.type === 'data') {
-      clickFunc = this.downloadData(buttonConfig.fileName);
+    if (buttonConfig.type.startsWith('data')) {
+      clickFunc = this.downloadData(buttonConfig.fileName, buttonConfig.type.split('-').pop());
     }
     if (buttonConfig.type === 'manifest') {
       clickFunc = this.downloadManifest(buttonConfig.fileName, null);
@@ -343,10 +343,12 @@ class ExplorerButtonGroup extends React.Component {
     });
   };
 
-  downloadData = filename => () => {
-    this.props.downloadRawData().then((res) => {
+  downloadData = (filename, fileFormat) => () => {
+    const fileTypeKey = fileFormat.toUpperCase();
+    const isJsonFormat = fileTypeKey === 'JSON' || fileTypeKey === 'DATA';
+    this.props.downloadRawData({ format: fileTypeKey }).then((res) => {
       if (res) {
-        const blob = new Blob([JSON.stringify(res, null, 2)], { type: 'text/json' });
+        const blob = new Blob([isJsonFormat ? JSON.stringify(res, null, 2) : res], { type: `text/${isJsonFormat ? 'json' : fileFormat.toLowerCase()}` });
         FileSaver.saveAs(blob, filename);
       } else {
         throw Error('Error when downloading data');