From fd7c5a33311e16a6f0cc1431d423b94b533e5a85 Mon Sep 17 00:00:00 2001 From: cterrazas2 Date: Tue, 22 Dec 2020 12:19:19 -0800 Subject: [PATCH 1/7] Add file format to explorer download buttons --- src/GuppyDataExplorer/ExplorerButtonGroup/index.jsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/GuppyDataExplorer/ExplorerButtonGroup/index.jsx b/src/GuppyDataExplorer/ExplorerButtonGroup/index.jsx index 5b40b6c45c..df4c77be31 100644 --- a/src/GuppyDataExplorer/ExplorerButtonGroup/index.jsx +++ b/src/GuppyDataExplorer/ExplorerButtonGroup/index.jsx @@ -120,7 +120,7 @@ class ExplorerButtonGroup extends React.Component { getOnClickFunction = (buttonConfig) => { let clickFunc = () => {}; if (buttonConfig.type === 'data') { - clickFunc = this.downloadData(buttonConfig.fileName); + clickFunc = this.downloadData(buttonConfig.fileName, buttonConfig.title); } if (buttonConfig.type === 'manifest') { clickFunc = this.downloadManifest(buttonConfig.fileName, null); @@ -343,10 +343,11 @@ class ExplorerButtonGroup extends React.Component { }); }; - downloadData = filename => () => { - this.props.downloadRawData().then((res) => { + downloadData = (filename, fileFormat) => () => { + const isJsonFormat = fileFormat === 'JSON' || typeof fileFormat === 'undefined'; + this.props.downloadRawData({ format: fileFormat }).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'); From e1ae38c2b5baabd1b2c11ead4042b4bdeaf8ec77 Mon Sep 17 00:00:00 2001 From: cterrazas2 Date: Tue, 5 Jan 2021 17:45:34 -0800 Subject: [PATCH 2/7] update portal for button data types for csv, tsv, and json. --- src/GuppyDataExplorer/ExplorerButtonGroup/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/GuppyDataExplorer/ExplorerButtonGroup/index.jsx b/src/GuppyDataExplorer/ExplorerButtonGroup/index.jsx index df4c77be31..7cde20db9e 100644 --- a/src/GuppyDataExplorer/ExplorerButtonGroup/index.jsx +++ b/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, buttonConfig.title); + if (buttonConfig.type.startsWith('data')) { + clickFunc = this.downloadData(buttonConfig.fileName, buttonConfig.type.split('-').pop()); } if (buttonConfig.type === 'manifest') { clickFunc = this.downloadManifest(buttonConfig.fileName, null); @@ -344,7 +344,7 @@ class ExplorerButtonGroup extends React.Component { }; downloadData = (filename, fileFormat) => () => { - const isJsonFormat = fileFormat === 'JSON' || typeof fileFormat === 'undefined'; + const isJsonFormat = fileFormat === 'JSON' || fileFormat === 'data'; this.props.downloadRawData({ format: fileFormat }).then((res) => { if (res) { const blob = new Blob([isJsonFormat ? JSON.stringify(res, null, 2) : res], { type: `text/${isJsonFormat ? 'json' : fileFormat.toLowerCase()}` }); From 823c679ff7d3fb7ce2cbe8a89390bd748ca937ce Mon Sep 17 00:00:00 2001 From: cterrazas2 Date: Wed, 6 Jan 2021 14:45:11 -0800 Subject: [PATCH 3/7] update portal config md --- docs/portal_config.md | 31 +++++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/docs/portal_config.md b/docs/portal_config.md index 2d5e920410..4fb14b1c5c 100644 --- a/docs/portal_config.md +++ b/docs/portal_config.md @@ -226,11 +226,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: ["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 }, { From bbc5d63cc2324e7a28d00ecea5dc5ee5160cf137 Mon Sep 17 00:00:00 2001 From: cterrazas2 Date: Wed, 13 Jan 2021 14:58:36 -0800 Subject: [PATCH 4/7] fix dropdown button css --- .../ExplorerButtonGroup/ExplorerButtonGroup.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/GuppyDataExplorer/ExplorerButtonGroup/ExplorerButtonGroup.css b/src/GuppyDataExplorer/ExplorerButtonGroup/ExplorerButtonGroup.css index 1cac0576d3..ce37d00748 100644 --- a/src/GuppyDataExplorer/ExplorerButtonGroup/ExplorerButtonGroup.css +++ b/src/GuppyDataExplorer/ExplorerButtonGroup/ExplorerButtonGroup.css @@ -4,6 +4,7 @@ .explorer-button-group__dropdown { width: 200px; + margin-right: 10px; } .explorer-button-group__toaster-div { From c3fe4221615b4efee0bb0e7182e9038dd318a4a6 Mon Sep 17 00:00:00 2001 From: cterrazas2 Date: Fri, 15 Jan 2021 14:18:16 -0800 Subject: [PATCH 5/7] update dependencies for guppy format arg testing --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index d3832395da..4b93e0624b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1385,9 +1385,8 @@ } }, "@gen3/guppy": { - "version": "0.9.2", - "resolved": "https://registry.npmjs.org/@gen3/guppy/-/guppy-0.9.2.tgz", - "integrity": "sha512-zJm1DjONueGjWRQEMv1sK4EgRpecaI2Vpi/thntLwtnGoOhAW10CVYrIsRP+QZYK3ONk/kjV+bmXxWpiY2VKyw==", + "version": "git+https://github.com/uc-cdis/guppy.git#766997f357bf8f8d18e5087dfa3f8fba27f2fccc", + "from": "git+https://github.com/uc-cdis/guppy.git#feat/guppy-format-arg", "requires": { "@elastic/elasticsearch": "^7.0.0-rc.1", "@gen3/ui-component": "^0.6.3", @@ -1409,6 +1408,7 @@ "lodash": "^4.17.15", "loglevel": "^1.6.1", "node-fetch": "^2.3.0", + "papaparse": "^5.3.0", "prop-types": "^15.7.2", "react": "^16.8.4" }, diff --git a/package.json b/package.json index f420ced67a..b1cf14e52b 100644 --- a/package.json +++ b/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": "git+https://github.com/uc-cdis/guppy.git#feat/guppy-format-arg", "@gen3/ui-component": "^0.6.3", "@storybook/addon-actions": "^5.0.0", "@storybook/react": "^5.0.0", From 1e06cd22b53553d1341a6467baf1e02370207fc6 Mon Sep 17 00:00:00 2001 From: cterrazas2 Date: Fri, 15 Jan 2021 16:53:16 -0800 Subject: [PATCH 6/7] make portal config data type case insensitive --- docs/portal_config.md | 8 ++++---- src/GuppyDataExplorer/ExplorerButtonGroup/index.jsx | 5 +++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/portal_config.md b/docs/portal_config.md index 34d71e64af..43cd91cddf 100644 --- a/docs/portal_config.md +++ b/docs/portal_config.md @@ -230,7 +230,7 @@ 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 data type sub-options: ["data" (default), "data-TSV", "data-CSV", "data-JSON"] - what should it do? Data = downloading default clinical JSON 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 @@ -239,7 +239,7 @@ Below is an example, with inline comments describing what each JSON block config }, { "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 + "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 @@ -248,7 +248,7 @@ Below is an example, with inline comments describing what each JSON block config }, { "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 + "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 @@ -257,7 +257,7 @@ Below is an example, with inline comments describing what each JSON block config }, { "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 + "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 diff --git a/src/GuppyDataExplorer/ExplorerButtonGroup/index.jsx b/src/GuppyDataExplorer/ExplorerButtonGroup/index.jsx index 7cde20db9e..0901cecd5e 100644 --- a/src/GuppyDataExplorer/ExplorerButtonGroup/index.jsx +++ b/src/GuppyDataExplorer/ExplorerButtonGroup/index.jsx @@ -344,8 +344,9 @@ class ExplorerButtonGroup extends React.Component { }; downloadData = (filename, fileFormat) => () => { - const isJsonFormat = fileFormat === 'JSON' || fileFormat === 'data'; - this.props.downloadRawData({ format: fileFormat }).then((res) => { + const fileTypeKey = fileFormat.toUpperCase(); + const isJsonFormat = fileTypeKey === 'JSON' || fileTypeKey === 'DATA'; + this.props.downloadRawData({ format: fileTypeKey }).then((res) => { if (res) { const blob = new Blob([isJsonFormat ? JSON.stringify(res, null, 2) : res], { type: `text/${isJsonFormat ? 'json' : fileFormat.toLowerCase()}` }); FileSaver.saveAs(blob, filename); From 46b98132ef53470598da53c2eb4b6bde43b69990 Mon Sep 17 00:00:00 2001 From: cterrazas2 Date: Tue, 19 Jan 2021 10:16:12 -0800 Subject: [PATCH 7/7] update guppy version in portal --- package-lock.json | 31 ++++++++++++++++--------------- package.json | 2 +- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 853e5c3a50..58470be517 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,9 +63,9 @@ }, "dependencies": { "@types/node": { - "version": "10.17.50", - "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.50.tgz", - "integrity": "sha512-vwX+/ija9xKc/z9VqMCdbf4WYcMTGsI0I/L/6shIF3qXURxZOhPQlPRHtjTpiNhAwn0paMJzlOQqw6mAGEQnTA==" + "version": "10.17.51", + "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.51.tgz", + "integrity": "sha512-KANw+MkL626tq90l++hGelbl67irOJzGhUJk6a1Bt8QHOeh9tztJx+L0AqttraWKinmZn7Qi5lJZJzx45Gq0dg==" } } }, @@ -1340,8 +1340,9 @@ } }, "@gen3/guppy": { - "version": "git+https://github.com/uc-cdis/guppy.git#766997f357bf8f8d18e5087dfa3f8fba27f2fccc", - "from": "git+https://github.com/uc-cdis/guppy.git#feat/guppy-format-arg", + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@gen3/guppy/-/guppy-0.10.0.tgz", + "integrity": "sha512-frVCe8E3gTEJ8fELjipCD1rdJuZHQsZ7CucynnxD8BUT/WiHiXLvv/DZaAhjfxjFo8zlRt1E/c5l4iBd3yF5kg==", "requires": { "@elastic/elasticsearch": "^7.0.0-rc.1", "@gen3/ui-component": "^0.6.3", @@ -3938,9 +3939,9 @@ } }, "@types/mime": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.3.tgz", - "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==" + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", + "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==" }, "@types/minimatch": { "version": "3.0.3", @@ -4051,11 +4052,11 @@ } }, "@types/serve-static": { - "version": "1.13.8", - "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.8.tgz", - "integrity": "sha512-MoJhSQreaVoL+/hurAZzIm8wafFR6ajiTM1m4A0kv6AGeVBl4r4pOV8bGFrjjq1sGxDTnCoF8i22o0/aE5XCyA==", + "version": "1.13.9", + "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.9.tgz", + "integrity": "sha512-ZFqF6qa48XsPdjXV5Gsz0Zqmux2PerNd3a/ktL45mHpa19cuMi/cL8tcxdAx497yRh+QtYPuofjT9oWw9P7nkA==", "requires": { - "@types/mime": "*", + "@types/mime": "^1", "@types/node": "*" } }, @@ -4740,9 +4741,9 @@ }, "dependencies": { "core-js": { - "version": "3.8.2", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.8.2.tgz", - "integrity": "sha512-FfApuSRgrR6G5s58casCBd9M2k+4ikuu4wbW6pJyYU7bd9zvFc9qf7vr5xmrZOhT9nn+8uwlH1oRR9jTnFoA3A==" + "version": "3.8.3", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.8.3.tgz", + "integrity": "sha512-KPYXeVZYemC2TkNEkX/01I+7yd+nX3KddKwZ1Ww7SKWdI2wQprSgLmrTddT8nw92AjEklTsPBoSdQBhbI1bQ6Q==" } } }, diff --git a/package.json b/package.json index a88c1cc69b..34f47c8523 100644 --- a/package.json +++ b/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": "git+https://github.com/uc-cdis/guppy.git#feat/guppy-format-arg", + "@gen3/guppy": "^0.10.0", "@gen3/ui-component": "^0.6.4", "@storybook/addon-actions": "^5.0.0", "@storybook/react": "^5.0.0",