Merge pull request #48 from opentargets/rm-genetics-remove-cluster

Remove cluster from phenotype
opentargets · Aug 26, 2022 · 6c338f8 · 6c338f8
2 parents 7304da8 + 30bd0eb
commit 6c338f8
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 80 deletions.
diff --git a/apps/genetics/src/components/ColocForGeneTable/ColocForGeneTable.jsx b/apps/genetics/src/components/ColocForGeneTable/ColocForGeneTable.jsx
@@ -0,0 +1,43 @@
+import React, { Fragment } from 'react';
+
+import { OtTableRF, DataDownloader } from '../../ot-ui-components';
+
+import {
+  getDownloadColumns,
+  getDownloadRows,
+  tableColumns,
+} from './ColumnRederers';
+
+const ColocTable = ({
+  loading,
+  error,
+  filenameStem,
+  data,
+  colocTraitFilterValue,
+  colocTraitFilterOptions,
+  colocTraitFilterHandler,
+}) => (
+  <Fragment>
+    <DataDownloader
+      tableHeaders={getDownloadColumns()}
+      rows={getDownloadRows(data)}
+      fileStem={filenameStem}
+    />
+    <OtTableRF
+      loading={loading}
+      error={error}
+      columns={tableColumns({
+        colocTraitFilterValue,
+        colocTraitFilterOptions,
+        colocTraitFilterHandler,
+      })}
+      filters
+      data={data}
+      sortBy="log2h4h3"
+      order="desc"
+      downloadFileStem={filenameStem}
+    />
+  </Fragment>
+);
+
+export default ColocTable;
diff --git a/...tics/src/components/ColocForGeneTable.jsx → ...ents/ColocForGeneTable/ColumnRederers.jsx b/...tics/src/components/ColocForGeneTable.jsx → ...ents/ColocForGeneTable/ColumnRederers.jsx
@@ -1,18 +1,11 @@
-import React, { Fragment } from 'react';
 import { ascending } from 'd3';
 
-import {
-  Link,
-  OtTableRF,
-  Autocomplete,
-  significantFigures,
-  DataDownloader,
-} from '../ot-ui-components';
+import { Link, Autocomplete, significantFigures } from '../../ot-ui-components';
 
-import StudyLocusLink from './StudyLocusLink';
-import { generateComparator } from '../utils';
+import StudyLocusLink from '../StudyLocusLink';
+import { generateComparator, getPhenotypeId } from '../../utils';
 
-const getDownloadColumns = () => {
+export const getDownloadColumns = () => {
   return [
     {
       id: 'study',
@@ -61,13 +54,13 @@ const getDownloadColumns = () => {
   ];
 };
 
-const getDownloadRows = (rows) => {
-  return rows.map((row) => ({
+export const getDownloadRows = rows => {
+  return rows.map(row => ({
     study: row.study.studyId,
     traitReported: row.study.traitReported,
     pubAuthor: row.study.pubAuthor,
     indexVariant: row.leftVariant.id,
-    phenotypeId: row.phenotypeId,
+    phenotypeId: getPhenotypeId(row.phenotypeId),
     tissueName: row.tissue.name,
     qtlStudyId: row.qtlStudyId,
     h3: row.h3,
@@ -77,7 +70,7 @@ const getDownloadRows = (rows) => {
   }));
 };
 
-const tableColumns = ({
+export const tableColumns = ({
   colocTraitFilterValue,
   colocTraitFilterOptions,
   colocTraitFilterHandler,
@@ -86,7 +79,7 @@ const tableColumns = ({
     id: 'study',
     label: 'Study',
     comparator: (a, b) => ascending(a.study.studyId, b.study.studyId),
-    renderCell: (d) => (
+    renderCell: d => (
       <Link to={`/study/${d.study.studyId}`}>{d.study.studyId}</Link>
     ),
   },
@@ -95,7 +88,7 @@ const tableColumns = ({
     label: 'Trait reported',
     comparator: (a, b) =>
       ascending(a.study.traitReported, b.study.traitReported),
-    renderCell: (d) => d.study.traitReported,
+    renderCell: d => d.study.traitReported,
     renderFilter: () => (
       <Autocomplete
         options={colocTraitFilterOptions}
@@ -110,98 +103,62 @@ const tableColumns = ({
     id: 'pubAuthor',
     label: 'Author',
     comparator: (a, b) => ascending(a.study.pubAuthor, b.study.pubAuthor),
-    renderCell: (d) => d.study.pubAuthor,
+    renderCell: d => d.study.pubAuthor,
   },
   {
     id: 'indexVariant',
     label: 'Lead variant',
     comparator: (a, b) => ascending(a.leftVariant.id, b.leftVariant.id),
-    renderCell: (d) => (
+    renderCell: d => (
       <Link to={`/variant/${d.leftVariant.id}`}>{d.leftVariant.id}</Link>
     ),
   },
   {
     id: 'phenotypeId',
     label: 'Phenotype',
+    comparator: (a, b) =>
+      ascending(getPhenotypeId(a.phenotypeId), getPhenotypeId(b.phenotypeId)),
+    renderCell: d => getPhenotypeId(d.phenotypeId),
   },
   {
     id: 'tissue.name',
     label: 'Tissue',
     comparator: (a, b) => ascending(a.tissue.name, b.tissue.name),
-    renderCell: (d) => d.tissue.name,
+    renderCell: d => d.tissue.name,
   },
   {
     id: 'qtlStudyId',
     label: 'Source',
   },
-  // {
-  //   id: 'beta',
-  //   label: 'QTL beta',
-  //   renderCell: d => significantFigures(d.beta),
-  // },
   {
     id: 'h3',
     label: 'H3',
-    renderCell: (d) => significantFigures(d.h3),
+    renderCell: d => significantFigures(d.h3),
   },
   {
     id: 'h4',
     label: 'H4',
-    renderCell: (d) => significantFigures(d.h4),
+    renderCell: d => significantFigures(d.h4),
   },
   {
     id: 'log2h4h3',
     label: 'log2(H4/H3)',
-    renderCell: (d) => significantFigures(d.log2h4h3),
+    renderCell: d => significantFigures(d.log2h4h3),
   },
   {
     id: 'hasSumstats',
     label: 'Has sumstats',
     comparator: generateComparator(d => d.study.hasSumstats),
-    renderCell: d => d.study.hasSumstats ? <>yes</> : <>no</>,
+    renderCell: d => (d.study.hasSumstats ? <>yes</> : <>no</>),
   },
   {
     id: 'studyLocus',
     label: 'View',
-    renderCell: (d) => (
+    renderCell: d => (
       <StudyLocusLink
         indexVariantId={d.leftVariant.id}
         studyId={d.study.studyId}
       />
     ),
   },
 ];
-
-const ColocTable = ({
-  loading,
-  error,
-  filenameStem,
-  data,
-  colocTraitFilterValue,
-  colocTraitFilterOptions,
-  colocTraitFilterHandler,
-}) => (
-  <Fragment>
-    <DataDownloader
-      tableHeaders={getDownloadColumns()}
-      rows={getDownloadRows(data)}
-      fileStem={filenameStem}
-    />
-    <OtTableRF
-      loading={loading}
-      error={error}
-      columns={tableColumns({
-        colocTraitFilterValue,
-        colocTraitFilterOptions,
-        colocTraitFilterHandler,
-      })}
-      filters
-      data={data}
-      sortBy="log2h4h3"
-      order="desc"
-      downloadFileStem={filenameStem}
-    />
-  </Fragment>
-);
-
-export default ColocTable;
diff --git a/apps/genetics/src/components/ColocForGeneTable/index.js b/apps/genetics/src/components/ColocForGeneTable/index.js
@@ -0,0 +1 @@
+export { default } from './ColocForGeneTable';
diff --git a/apps/genetics/src/components/ColocQTLGeneTissueTable/useColocTable.js b/apps/genetics/src/components/ColocQTLGeneTissueTable/useColocTable.js
@@ -1,5 +1,5 @@
 import { descending } from 'd3';
-import { getPhenotypeId, getSpliceId } from './utils';
+import { getPhenotypeId, getSpliceId } from '../../utils';
 
 export const useColocTable = data => {
   const uniqueStudyGenePhenotypes = data.reduce((acc, d) => {

diff --git a/apps/genetics/src/components/ColocQTLGeneTissueTable/utils.js b/apps/genetics/src/components/ColocQTLGeneTissueTable/utils.js
@@ -1,4 +1,4 @@
-export const tissueComparator = (t) => (a, b) => {
+export const tissueComparator = t => (a, b) => {
   if (a[t] && b[t]) {
     return a[t].log2h4h3 > b[t].log2h4h3
       ? 1
@@ -13,13 +13,3 @@ export const tissueComparator = (t) => (a, b) => {
     return 0;
   }
 };
-
-export const getPhenotypeId = (phenotypeId) =>
-  phenotypeId.includes('^')
-    ? phenotypeId.slice(phenotypeId.lastIndexOf('^') + 1)
-    : phenotypeId;
-
-export const getSpliceId = (phenotypeId) =>
-  phenotypeId.includes('^')
-    ? phenotypeId.slice(0, phenotypeId.lastIndexOf('^'))
-    : null;
diff --git a/apps/genetics/src/pages/StudyLocusPage/StudyLocusPage.jsx b/apps/genetics/src/pages/StudyLocusPage/StudyLocusPage.jsx
@@ -9,7 +9,7 @@ import RadioGroup from '@material-ui/core/RadioGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Grid from '@material-ui/core/Grid';
 import Link from '../../components/Link';
-import { sanitize } from '../../utils';
+import { getPhenotypeId, sanitize } from '../../utils';
 import ScrollToTop from '../../components/ScrollToTop';
 
 import {
@@ -144,7 +144,12 @@ const tableColumns = [
   {
     id: 'phenotypeId',
     label: 'Molecular trait',
-    // renderCell: d => (d.phenotypeId !== d.gene.id ? d.phenotypeId : null),
+    comparator: (a, b) =>
+      d3.ascending(
+        getPhenotypeId(a.phenotypeId),
+        getPhenotypeId(b.phenotypeId)
+      ),
+    renderCell: d => getPhenotypeId(d.phenotypeId),
   },
   {
     id: 'tissue.name',
@@ -199,7 +204,7 @@ const tableColumns = [
 const getDownloadData = data => {
   return data.map(d => ({
     'gene.symbol': d.gene.symbol,
-    phenotypeId: d.phenotypeId,
+    phenotypeId: getPhenotypeId(d.phenotypeId),
     'tissue.name': d.tissue.name,
     qtlStudyName: d.qtlStudyName,
     indexVariant: d.indexVariant.id,

diff --git a/apps/genetics/src/utils/index.js b/apps/genetics/src/utils/index.js
@@ -10,12 +10,23 @@ export function sanitize(str) {
 Example usage:
 const comparatorDiseaseName = generateComparator(d => d.disease.name);
  */
-export const generateComparator = (accessor) => (a, b) => {
+export const generateComparator = accessor => (a, b) => {
   const aValue = accessor(a);
   const bValue = accessor(b);
   return aValue > bValue ? 1 : aValue === bValue ? 0 : -1;
 };
 
+//phenotype ids
+export const getPhenotypeId = phenotypeId =>
+  phenotypeId.includes('^')
+    ? phenotypeId.slice(phenotypeId.lastIndexOf('^') + 1)
+    : phenotypeId;
+
+export const getSpliceId = phenotypeId =>
+  phenotypeId.includes('^')
+    ? phenotypeId.slice(0, phenotypeId.lastIndexOf('^'))
+    : null;
+
 // Consants
 export const SIGNIFICANCE = -Math.log10(5e-8);