Skip to content

Commit

Permalink
[Genetics] refactor: move variant summary to ts with graphql query ty…
Browse files Browse the repository at this point in the history
…pes (#269)
  • Loading branch information
riyavsinha authored Oct 25, 2023
1 parent 9b2c123 commit 6720ef2
Show file tree
Hide file tree
Showing 10 changed files with 133 additions and 91 deletions.
13 changes: 13 additions & 0 deletions apps/genetics/src/@types/graphql.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
declare module '*.graphql' {
import { DocumentNode } from 'graphql';
const Schema: DocumentNode;

export default Schema;
}

declare module '*.gql' {
import { DocumentNode } from 'graphql';
const Schema: DocumentNode;

export default Schema;
}
4 changes: 2 additions & 2 deletions apps/genetics/src/__generated__/gql.ts

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions apps/genetics/src/__generated__/graphql.ts

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ const useStyles = makeStyles({

type SectionHeadingProps = {
heading: ReactNode;
subheading: ReactNode;
entities: ModelSchematicEntity[];
subheading?: ReactNode;
entities?: ModelSchematicEntity[];
};
const SectionHeading = ({
heading,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import { useQuery } from '@apollo/client';
import { Skeleton } from '@material-ui/lab';
import { Link, Typography, SectionHeading } from '../../../ot-ui-components';
import { safeCommaSeparate, variantPopulations } from '../../../utils';
import {
commaSeparate,
variantHasInfo,
variantGetInfo,
variantPopulations,
} from '../../../utils';

VariantSummaryQuery,
VariantSummaryQueryVariables,
} from '../../../__generated__/graphql';
import { Fragment } from 'react';
import { ClassNameMap } from '@material-ui/core/styles/withStyles';
import VARIANT_SUMMARY_QUERY from './VariantSummary.gql';

const styles = () => ({
Expand All @@ -20,12 +19,18 @@ const styles = () => ({
},
});

function Summary({ classes, variantId }) {
const { loading, data: queryResult } = useQuery(VARIANT_SUMMARY_QUERY, {
type VariantSummaryProps = {
classes: ClassNameMap<'value'>;
variantId: string;
};
function Summary({ classes, variantId }: VariantSummaryProps) {
const { loading, data: queryResult } = useQuery<
VariantSummaryQuery,
VariantSummaryQueryVariables
>(VARIANT_SUMMARY_QUERY, {
variables: { variantId },
});
const isVariantWithInfo = variantHasInfo(queryResult);
const data = isVariantWithInfo ? variantGetInfo(queryResult) : {};
const data = queryResult?.variantInfo;
return (
<>
<SectionHeading
Expand All @@ -45,8 +50,8 @@ function Summary({ classes, variantId }) {
<Skeleton width="50vw" />
) : (
<>
<strong>GRCh38:</strong> {data.chromosome}:
{commaSeparate(data.position)}
<strong>GRCh38:</strong> {data?.chromosome}:
{safeCommaSeparate(data?.position)}
</>
)}
</Typography>
Expand All @@ -55,8 +60,8 @@ function Summary({ classes, variantId }) {
<Skeleton width="50vw" />
) : (
<>
<strong>GRCh37:</strong> {data.chromosomeB37}:
{commaSeparate(data.positionB37)}
<strong>GRCh37:</strong> {data?.chromosomeB37}:
{safeCommaSeparate(data?.positionB37)}
</>
)}
</Typography>
Expand All @@ -65,7 +70,7 @@ function Summary({ classes, variantId }) {
<Skeleton width="50vw" />
) : (
<>
<strong>Reference allele:</strong> {data.refAllele}
<strong>Reference allele:</strong> {data?.refAllele}
</>
)}
</Typography>
Expand All @@ -75,7 +80,7 @@ function Summary({ classes, variantId }) {
) : (
<>
<strong>Alternative allele (effect allele):</strong>{' '}
{data.altAllele}
{data?.altAllele}
</>
)}
</Typography>
Expand All @@ -92,8 +97,11 @@ function Summary({ classes, variantId }) {
{!loading && data?.nearestGene ? (
<Typography variant="subtitle2">
<strong>
Nearest gene ({commaSeparate(data.nearestGeneDistance)} bp to
canonical TSS):
Nearest gene (
{data && data.nearestGeneDistance
? safeCommaSeparate(data.nearestGeneDistance)
: ''}{' '}
bp to canonical TSS):
</strong>{' '}
<Link to={`/gene/${data.nearestGene.id}`}>
{data.nearestGene.symbol}
Expand All @@ -108,8 +116,8 @@ function Summary({ classes, variantId }) {
<Typography variant="subtitle2">
<strong>
Nearest coding gene (
{commaSeparate(data.nearestCodingGeneDistance)} bp to canonical
TSS):
{safeCommaSeparate(data.nearestCodingGeneDistance)} bp to
canonical TSS):
</strong>{' '}
<Link to={`/gene/${data.nearestCodingGene.id}`}>
{data.nearestCodingGene.symbol}
Expand Down Expand Up @@ -139,7 +147,7 @@ function Summary({ classes, variantId }) {
) : (
<>
<strong>Most severe consequence:</strong>{' '}
{data.mostSevereConsequence
{data?.mostSevereConsequence
? data.mostSevereConsequence.replace(/_/g, ' ')
: 'N/A'}
</>
Expand Down Expand Up @@ -171,20 +179,27 @@ function Summary({ classes, variantId }) {
</Typography>
<Grid container>
{!loading &&
variantPopulations.map((p) => (
<React.Fragment key={p.code}>
<Grid item xs={9}>
<Typography variant="subtitle2">{p.description}</Typography>
</Grid>
<Grid item xs={3}>
<Typography variant="subtitle2" align="right">
{data[`gnomad${p.code}`]
? data[`gnomad${p.code}`].toPrecision(3)
: 'N/A'}
</Typography>
</Grid>
</React.Fragment>
))}
variantPopulations.map(p => {
const property = `gnomad${p.code}` as keyof typeof data;
const value =
data && data[property]
? (data[property] as number).toPrecision(3)
: 'N/A';
return (
<Fragment key={p.code}>
<Grid item xs={9}>
<Typography variant="subtitle2">
{p.description}
</Typography>
</Grid>
<Grid item xs={3}>
<Typography variant="subtitle2" align="right">
{value}
</Typography>
</Grid>
</Fragment>
);
})}
</Grid>
</Grid>
</Grid>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
query VariantPageQuery($variantId: String!) {
query VariantSummary($variantId: String!) {
variantInfo(variantId: $variantId) {
rsId
chromosome
Expand Down
47 changes: 0 additions & 47 deletions apps/genetics/src/utils/common.js

This file was deleted.

60 changes: 60 additions & 0 deletions apps/genetics/src/utils/common.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { format } from 'd3-format';

/*
Example usage:
const comparatorDiseaseName = generateComparator(d => d.disease.name);
*/
export const generateComparator =
<T, U>(accessor: (d: T) => U) =>
(a: T, b: T) => {
const aValue = accessor(a);
const bValue = accessor(b);
return aValue > bValue ? 1 : aValue === bValue ? 0 : -1;
};

export const getData = (
data?: { [k: string]: any },
property?: string
): object | boolean => {
if (!data || Object.keys(data).length === 0) return false;
if (!property) return data;
if (hasData(data, property)) return data[property];
return false;
};

export const hasData = (data: { [k: string]: any }, property: string) => {
if (data && data[property]) return true;
return false;
};

type D3FormatNumberLike = number | { valueOf(): number };
export const commaSeparate: (n: D3FormatNumberLike) => string = format(',');
export const safeCommaSeparate = (n?: D3FormatNumberLike | null) =>
n ? commaSeparate(n) : '';

export const sanitize = (str: string) => str.replace(/[^a-zA-Z0-9]/g, '');

interface TraitAuthorYearStudyInfo {
traitReported: string;
pubAuthor: string;
pubDate: string;
}
export const traitAuthorYear = (s: TraitAuthorYearStudyInfo) =>
`${s.traitReported} (${s.pubAuthor}, ${new Date(s.pubDate).getFullYear()})`;

export const isGreaterThanZero = (arrayLength: number) => {
return arrayLength > 0;
};

export const getPhenotypeId = (phenotypeId: string) =>
phenotypeId.includes('^')
? phenotypeId.slice(phenotypeId.lastIndexOf('^') + 1)
: phenotypeId;

export const getSpliceId = (phenotypeId: string) =>
phenotypeId.includes('^')
? phenotypeId.slice(0, phenotypeId.lastIndexOf('^'))
: null;

// Constants
export const SIGNIFICANCE = -Math.log10(5e-8);
1 change: 1 addition & 0 deletions apps/genetics/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"extends": "tsconfig/vite.json",
"compilerOptions": {
"rootDir": "src",
"typeRoots": ["node_modules/@types", "src/@types"],
"outDir": "bundle-genetics"
},
"include": ["src", "codegen.ts"]
Expand Down

0 comments on commit 6720ef2

Please sign in to comment.