From 75f502a8b8c845917425a7c9ef0293379a799fd9 Mon Sep 17 00:00:00 2001 From: dert1129 Date: Fri, 8 Dec 2023 10:22:10 -0500 Subject: [PATCH 1/6] implement table download --- src/components/DataViz/RegionalProteomics.js | 42 ++++++++++++++++++-- 1 file changed, 39 insertions(+), 3 deletions(-) diff --git a/src/components/DataViz/RegionalProteomics.js b/src/components/DataViz/RegionalProteomics.js index 2b173f30..ddf8a37d 100644 --- a/src/components/DataViz/RegionalProteomics.js +++ b/src/components/DataViz/RegionalProteomics.js @@ -2,12 +2,14 @@ import React, { Component } from 'react'; import {Container, Row, Col, ButtonGroup, Button} from 'reactstrap'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import DataTypeSelectorContainer from './DataTypeSelectorContainer'; -import {faShare} from "@fortawesome/free-solid-svg-icons"; +import { faDownload, faShare } from "@fortawesome/free-solid-svg-icons"; import queryString from 'query-string'; import {fetchRegionalProteomics} from "../../helpers/ApolloClient"; import LMDDotPlot from "../Plots/LMDDotPlot"; import RegionalProteomicsTable from "../ExpressionTables/RegionalProteomicsTable"; -import {formatTissueType} from "../../helpers/Utils"; +import {formatTissueType, formatNumberToPrecision, formatDataType} from "../../helpers/Utils"; +import { CSVLink } from "react-csv"; +import { handleGoogleAnalyticsEvent } from '../../helpers/googleAnalyticsHelper'; class RegionalProteomics extends Component { constructor(props) { @@ -77,10 +79,37 @@ class RegionalProteomics extends Component { ) } + getExportFilename = () => { + const tissueType = formatTissueType(this.props.tissueType).toLowerCase().replace(" ", "-"); + return "KPMP_Regional_proteomics_" + formatDataType(this.props.dataType) + '_gene-comparison_' + this.props.gene.symbol + '_' + this.state.selectedAccession + '_' + tissueType + '.csv'; + }; + + cleanResults = (results) => { + // This next line was needed to avoid a strange error complaining that I couldn't modify the array + let tempResults = JSON.parse(JSON.stringify(results)); + // The order b - a is important here because we want a reverse sort + let sortedResults = tempResults.sort(function (a, b) { return b.foldChange - a.foldChange; }); + return sortedResults.map(({ segment, segmentName, pVal, stdDev, foldChange, sampleCount }) => { + return { + abbr: segment, + region: segmentName, + numSamples: sampleCount, + stdDeviation: formatNumberToPrecision(stdDev, 3), + foldChange: formatNumberToPrecision(foldChange, 3), + pVal: formatNumberToPrecision(pVal, 3), + } + }); + }; + render() { let plot = let table = let tabs = this.getTabGroup(this.state.accessionNums); + let cleanDownloadData = []; + let downloadData = this.state.allData; + if (downloadData && downloadData.length > 0) { + cleanDownloadData = this.cleanResults(downloadData); + } return (
@@ -138,7 +167,14 @@ class RegionalProteomics extends Component {
NS = Not Significant
- {"download link goes here"} + handleGoogleAnalyticsEvent('Explorer', 'Download', this.getExportFilename())} + data={cleanDownloadData} + filename={this.getExportFilename()} + target="_blank" + className="text-body icon-container"> + + From 929075ec12a2b2edcada0397ef76a7bf339778f6 Mon Sep 17 00:00:00 2001 From: dert1129 Date: Fri, 8 Dec 2023 10:34:38 -0500 Subject: [PATCH 2/6] clean up filename and data --- src/components/DataViz/RegionalProteomics.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/DataViz/RegionalProteomics.js b/src/components/DataViz/RegionalProteomics.js index ddf8a37d..29cabbfc 100644 --- a/src/components/DataViz/RegionalProteomics.js +++ b/src/components/DataViz/RegionalProteomics.js @@ -81,7 +81,7 @@ class RegionalProteomics extends Component { getExportFilename = () => { const tissueType = formatTissueType(this.props.tissueType).toLowerCase().replace(" ", "-"); - return "KPMP_Regional_proteomics_" + formatDataType(this.props.dataType) + '_gene-comparison_' + this.props.gene.symbol + '_' + this.state.selectedAccession + '_' + tissueType + '.csv'; + return "KPMP_Regional_proteomics_gene-comparison_" + this.props.gene.symbol + '_' + this.state.selectedAccession + '_' + tissueType + '.csv'; }; cleanResults = (results) => { @@ -106,7 +106,7 @@ class RegionalProteomics extends Component { let table = let tabs = this.getTabGroup(this.state.accessionNums); let cleanDownloadData = []; - let downloadData = this.state.allData; + let downloadData = this.state.tableData; if (downloadData && downloadData.length > 0) { cleanDownloadData = this.cleanResults(downloadData); } From 3fc81b53d99132b9e0f7da578b13f4c4392c3ca9 Mon Sep 17 00:00:00 2001 From: dert1129 Date: Fri, 8 Dec 2023 10:44:07 -0500 Subject: [PATCH 3/6] log results --- src/components/DataViz/RegionalProteomics.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/DataViz/RegionalProteomics.js b/src/components/DataViz/RegionalProteomics.js index 29cabbfc..8d0f96be 100644 --- a/src/components/DataViz/RegionalProteomics.js +++ b/src/components/DataViz/RegionalProteomics.js @@ -85,8 +85,10 @@ class RegionalProteomics extends Component { }; cleanResults = (results) => { + console.log(results); // This next line was needed to avoid a strange error complaining that I couldn't modify the array let tempResults = JSON.parse(JSON.stringify(results)); + console.log(tempResults); // The order b - a is important here because we want a reverse sort let sortedResults = tempResults.sort(function (a, b) { return b.foldChange - a.foldChange; }); return sortedResults.map(({ segment, segmentName, pVal, stdDev, foldChange, sampleCount }) => { From 63108ba13b5548f446e59e108431d44b9da186f5 Mon Sep 17 00:00:00 2001 From: dert1129 Date: Fri, 8 Dec 2023 10:49:34 -0500 Subject: [PATCH 4/6] log downloadData --- src/components/DataViz/RegionalProteomics.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/DataViz/RegionalProteomics.js b/src/components/DataViz/RegionalProteomics.js index 8d0f96be..a7572b14 100644 --- a/src/components/DataViz/RegionalProteomics.js +++ b/src/components/DataViz/RegionalProteomics.js @@ -111,7 +111,8 @@ class RegionalProteomics extends Component { let downloadData = this.state.tableData; if (downloadData && downloadData.length > 0) { cleanDownloadData = this.cleanResults(downloadData); - } + } + console.log(downloadData); return (
From aabaa49fdb1b2ab8dfe5c4df8656fa4d552ebd57 Mon Sep 17 00:00:00 2001 From: dert1129 Date: Fri, 8 Dec 2023 11:22:30 -0500 Subject: [PATCH 5/6] put in table data --- src/components/DataViz/RegionalProteomics.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/components/DataViz/RegionalProteomics.js b/src/components/DataViz/RegionalProteomics.js index a7572b14..28d0f279 100644 --- a/src/components/DataViz/RegionalProteomics.js +++ b/src/components/DataViz/RegionalProteomics.js @@ -7,7 +7,7 @@ import queryString from 'query-string'; import {fetchRegionalProteomics} from "../../helpers/ApolloClient"; import LMDDotPlot from "../Plots/LMDDotPlot"; import RegionalProteomicsTable from "../ExpressionTables/RegionalProteomicsTable"; -import {formatTissueType, formatNumberToPrecision, formatDataType} from "../../helpers/Utils"; +import {formatTissueType, formatNumberToPrecision} from "../../helpers/Utils"; import { CSVLink } from "react-csv"; import { handleGoogleAnalyticsEvent } from '../../helpers/googleAnalyticsHelper'; @@ -85,20 +85,20 @@ class RegionalProteomics extends Component { }; cleanResults = (results) => { - console.log(results); // This next line was needed to avoid a strange error complaining that I couldn't modify the array let tempResults = JSON.parse(JSON.stringify(results)); - console.log(tempResults); // The order b - a is important here because we want a reverse sort let sortedResults = tempResults.sort(function (a, b) { return b.foldChange - a.foldChange; }); - return sortedResults.map(({ segment, segmentName, pVal, stdDev, foldChange, sampleCount }) => { + return sortedResults.map(({ region, fdrConfidence, coveragePct, numPeptides, numUniquePeptides, sampleCount, foldChange, pVal }) => { return { - abbr: segment, - region: segmentName, + region: region, + fdrConfidence: fdrConfidence, + coveragePct: coveragePct, + numPeptides: numPeptides, + numUniquePeptides: numUniquePeptides, numSamples: sampleCount, - stdDeviation: formatNumberToPrecision(stdDev, 3), - foldChange: formatNumberToPrecision(foldChange, 3), - pVal: formatNumberToPrecision(pVal, 3), + foldChange: foldChange, + pVal: pVal, } }); }; @@ -112,7 +112,6 @@ class RegionalProteomics extends Component { if (downloadData && downloadData.length > 0) { cleanDownloadData = this.cleanResults(downloadData); } - console.log(downloadData); return (
From 86ac3960b1cbfd710b6ff2e17947904b50120b13 Mon Sep 17 00:00:00 2001 From: dert1129 Date: Fri, 8 Dec 2023 11:29:28 -0500 Subject: [PATCH 6/6] format numbers to 3 decimal places --- src/components/DataViz/RegionalProteomics.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/DataViz/RegionalProteomics.js b/src/components/DataViz/RegionalProteomics.js index 28d0f279..e52aa0bd 100644 --- a/src/components/DataViz/RegionalProteomics.js +++ b/src/components/DataViz/RegionalProteomics.js @@ -89,7 +89,7 @@ class RegionalProteomics extends Component { let tempResults = JSON.parse(JSON.stringify(results)); // The order b - a is important here because we want a reverse sort let sortedResults = tempResults.sort(function (a, b) { return b.foldChange - a.foldChange; }); - return sortedResults.map(({ region, fdrConfidence, coveragePct, numPeptides, numUniquePeptides, sampleCount, foldChange, pVal }) => { + return sortedResults.map(({ region, fdrConfidence, coveragePct, numPeptides, numUniquePeptides, sampleCount, foldChange, adjPVal }) => { return { region: region, fdrConfidence: fdrConfidence, @@ -97,8 +97,8 @@ class RegionalProteomics extends Component { numPeptides: numPeptides, numUniquePeptides: numUniquePeptides, numSamples: sampleCount, - foldChange: foldChange, - pVal: pVal, + foldChange: formatNumberToPrecision(foldChange, 3), + pVal: formatNumberToPrecision(adjPVal, 3) } }); };