Merge pull request #278 from MoTrPAC/276_CT_Methylcap_Seq

Add MethylCap-seq Tab to QC Data Monitor

Author: jimmyzhen

README.md

@@ -37,9 +37,10 @@
 #### Building and running
 
  * Preparation:
-   - Set `node` environment to `14.15.x`, or use `nvm` to run `nvm use v14.15.4`
+   - Set `node` environment to `16.20.x`, or use `nvm` to run `nvm use v16.20.0`
    - If `node_modules` directory already exist in your local working copy, run `rm -fr node_modules/` and `rm -f yarn.lock`.
    - Create a `.env` file at the root of the local working copy and add `ESLINT_NO_DEV_ERRORS=true`.
+   - Add additional required environment variables to the `.env` file in root (e.g. the API service address)
    - Run `yarn install`.
 
  * Building CSS: Uses sass in `node_modules/sass/sass.js`
@@ -70,9 +71,10 @@
 
 #### Software:
 
- * [Node v14](https://github.com/nodejs/Release)
+ * [Node v16](https://github.com/nodejs/Release)
      - Check your version: `node --version`
-     - If the version is not 14, you can `brew install node@14` or use [nvm](https://github.com/creationix/nvm/blob/master/README.md#installation), the Node Version Manager
+     - If the version is not 16, you can `brew install node@16` or use [nvm](https://github.
+       com/creationix/nvm/blob/master/README.md#installation), the Node Version Manager
 
  * [React v16](https://reactjs.org/versions)
      - Storybook used to visualize individual UI components
@@ -108,14 +110,6 @@
   - Makes call to backend for a list of uploads (size depending maxRows variable) on a given page. Expects backend to give total count of uploads fitting filters and the uploads for a specific page. (e.g on page 2, with 10 rows per page, expects items 11-20  from backend and a count of all  rows that fit current filters)
   - Changing filters should also call backend
 
-#### Samir's Flow for Creating Custom Font Icons
-  1. Create a 200px by 200px artboard in Adobe Illustrator
-  2. Draw Icon and export artboard as SVG (make sure only one color -- white counts as a color but transparent does not)
-  3. Upload all icons to [IcoMoon](https://icomoon.io/app/#/select) 4. Download and unzip resultant zipped file
-  5. Copy contents of the fonts folder (icomoon.eot, icomoon.woff, icomoon.svg, icomoon.tff) and place  them in the src/assets/fonts folder overwriting  the previous file. 
-
-  - Make sure you upload ALL custom icons to icomoon so that previously created icons are still accessible
-
 ---
 
 Cross-browser Testing Platform and Open Source ❤️ provided by [Sauce Labs][homepage]

src/DataStatusPage/common.jsx

@@ -20,7 +20,7 @@ export const commonReportPropType = {
 };
 
 /**
- * props common to rna-seq, rrbs, atac-seq, and immunoassay
+ * props common to rna-seq, rrbs, atac-seq, methylcap-seq, and immunoassay
  * QC data reports
  */
 export const getDataReportPropType = {
@@ -57,7 +57,7 @@ export const metabProtRawDataReportPropType = {
 };
 
 /**
- * column headers common to rna-seq, rrbs, and atac-seq
+ * column headers common to rna-seq, rrbs, methylcap-seq, and atac-seq
  * data qc status reports
  */
 export const getDataTableColumns = [
@@ -635,10 +635,19 @@ export const transformData = (arr, qcFiles, omicType) => {
  */
 export function retrieveReport(e, filename) {
   e.preventDefault();
-  const api = process.env.REACT_APP_API_SERVICE_ADDRESS;
+  const api =
+    process.env.NODE_ENV !== 'production'
+      ? process.env.REACT_APP_API_SERVICE_ADDRESS_DEV
+      : process.env.REACT_APP_API_SERVICE_ADDRESS;
   const endpoint = process.env.REACT_APP_SIGNED_URL_ENDPOINT;
-  const key = process.env.REACT_APP_API_SERVICE_KEY;
-  const bucket = process.env.REACT_APP_QC_REPORT_BUCKET;
+  const key =
+    process.env.NODE_ENV !== 'production'
+      ? process.env.REACT_APP_API_SERVICE_KEY_DEV
+      : process.env.REACT_APP_API_SERVICE_KEY;
+  const bucket =
+    process.env.NODE_ENV !== 'production'
+      ? process.env.REACT_APP_QC_REPORT_BUCKET_DEV
+      : process.env.REACT_APP_QC_REPORT_BUCKET;
   return axios
     .get(`${api}${endpoint}?bucket=${bucket}&object=${filename}&key=${key}`)
     .then((response) => {

src/DataStatusPage/dataStatusActions.js

@@ -37,9 +37,15 @@ function useNull() {
   return null;
 }
 
-const api = process.env.REACT_APP_API_SERVICE_ADDRESS;
+const api =
+  process.env.NODE_ENV !== 'production'
+    ? process.env.REACT_APP_API_SERVICE_ADDRESS_DEV
+    : process.env.REACT_APP_API_SERVICE_ADDRESS;
 const endpoint = process.env.REACT_APP_QC_DATA_ENDPOINT;
-const key = process.env.REACT_APP_API_SERVICE_KEY;
+const key =
+  process.env.NODE_ENV !== 'production'
+    ? process.env.REACT_APP_API_SERVICE_KEY_DEV
+    : process.env.REACT_APP_API_SERVICE_KEY;
 
 // Handler for predefined searches
 function fetchData() {
@@ -62,6 +68,7 @@ function fetchData() {
         axios.get(`${api}${endpoint}/immunoassay?key=${key}`).catch(useNull),
         axios.get(`${api}${endpoint}/rna_seq?key=${key}`).catch(useNull),
         axios.get(`${api}${endpoint}/rrbs?key=${key}`).catch(useNull),
+        axios.get(`${api}${endpoint}/methylcap_seq?key=${key}`).catch(useNull),
         axios.get(`${api}${endpoint}/atac_seq?key=${key}`).catch(useNull),
       ])
       .then(
@@ -74,6 +81,7 @@ function fetchData() {
             immunoAssay,
             rnaSeq,
             rrbs,
+            methylcapSeq,
             atacSeq
           ) => {
             const payload = {
@@ -84,6 +92,7 @@ function fetchData() {
               immunoAssay: immunoAssay.data,
               rnaSeq: rnaSeq.data,
               rrbs: rrbs.data,
+              methylcapSeq: methylcapSeq.data,
               atacSeq: atacSeq.data,
               lastModified: dayjs().format(),
             };

src/DataStatusPage/dataStatusPage.jsx

@@ -101,6 +101,13 @@ export function DataStatusPage({
             <QcReportHelpLink qcReportViewChange={qcReportViewChange} />
           </>
         );
+      case 'methylcapseq':
+        return (
+          <>
+            <StatusReportGetData qcData={qcData.methylcapSeq} />
+            <QcReportHelpLink qcReportViewChange={qcReportViewChange} />
+          </>
+        );
       case 'atacseq':
         return (
           <>
@@ -154,6 +161,7 @@ DataStatusPage.propTypes = {
     proteomicsRaw: PropTypes.arrayOf(PropTypes.object),
     rnaSeq: PropTypes.arrayOf(PropTypes.object),
     rrbs: PropTypes.arrayOf(PropTypes.object),
+    methylcapSeq: PropTypes.arrayOf(PropTypes.object),
     lastModified: PropTypes.string,
   }),
   isFetchingQcData: PropTypes.bool,
@@ -174,6 +182,7 @@ DataStatusPage.defaultProps = {
     proteomicsRaw: [],
     rnaSeq: [],
     rrbs: [],
+    methylcapSeq: [],
     lastModified: '',
   },
   isFetchingQcData: false,

src/DataStatusPage/dataStatusReducer.js

@@ -16,6 +16,7 @@ export const defaultDataStatusState = {
     proteomicsRaw: [],
     rnaSeq: [],
     rrbs: [],
+    methylcapSeq: [],
     lastModified: '',
   },
   errMsg: '',

src/DataStatusPage/qcReportHelp.jsx

@@ -268,7 +268,7 @@ function QcReportHelp() {
             </ul>
           </li>
         </ul>
-        <h4 className="mt-4">RNA-seq, RRBS, and ATAC-seq</h4>
+        <h4 className="mt-4">RNA-seq, RRBS, MethylCap-seq, and ATAC-seq</h4>
         <h6>Terms & Definitions</h6>
         <ul className="terms-definitions">
           <li>

src/DataStatusPage/sharelib/qcReportButtonList.js

@@ -19,6 +19,10 @@ const qcReportButtonList = [
     qcReport: 'rrbs',
     buttonLabel: 'RRBS',
   },
+  {
+    qcReport: 'methylcapseq',
+    buttonLabel: 'MethylCap-seq',
+  },
   {
     qcReport: 'atacseq',
     buttonLabel: 'ATAC-seq',

src/DataStatusPage/sharelib/qcReportByPhaseOmicPrefix.js

@@ -1,7 +1,7 @@
 // Static function to prepend prefix GET, METAB, or PROT to y-axis CAS/assay labels
 function selectOmicPrefix(assay) {
   let omicPrefix = 'METAB';
-  const patternGet = /rna-seq|rrbs|atac-seq/;
+  const patternGet = /rna[-_]?seq|rrbs|atac[-_]?seq|methylcap[-_]?seq/;
   if (assay.toLowerCase().match(patternGet)) {
     omicPrefix = 'GET';
   }