Skip to content

Commit

Permalink
Merge 442b27d into c18b5f1
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bianca-Morris
Bianca-Morris committed Oct 7, 2020
2 parents c18b5f1 + 442b27d commit c9a4663
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 76 deletions.
26 changes: 18 additions & 8 deletions src/encoded/schemas/variant_sample.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -509,31 +509,41 @@
},
"variant.genes.genes_ensg.display_title": {
"title": "Gene Transcript",
"order": 25
"order": 25,
"sort_fields": [
{ "field": "variant.genes.genes_ensg.display_title", "title": "Gene" },
{ "field": "variant.genes.genes_most_severe_transcript", "title": "Most Severe Transcript" }
]
},
"variant.genes.genes_most_severe_hgvsc": {
"title": "Variant",
"order": 27,
"sort_fields": [
{ "field": "variant.genes.genes.most_severe_hgvsc", "title": "Most Severe HGVSC" }
]
"order": 27
},
"variant.genes.genes_most_severe_consequence.coding_effect": {
"title": "Coding Effect",
"order": 28,
"sort_fields": [
{ "fields": "variant.genes.genes_most_severe_consequence.coding_effect", "title": "Coding Effect" }
{ "field": "variant.genes.genes_most_severe_consequence.coding_effect", "title": "Coding Effect" }
]
},
"variant.gnomad_af": {
"title": "GnomAD",
"aggregation_type": "stats",
"number_step": "any",
"order": 60
"order": 60,
"sort_fields": [
{ "field": "variant.gnomad_af", "title": "Gnomad AF" },
{ "field": "variant.max_pop_af_af_popmax", "title": "Gnomad AF Population Max" }
]
},
"variant.cadd_phred": {
"title": "Predictors",
"order": 61
"order": 61,
"sort_fields": [
{ "field": "variant.cadd_phred", "title": "Cadd Phred Score" },
{ "field": "variant.spliceai_maxds", "title": "SpliceAI Max DS"},
{ "field": "variant.conservation_phylop100", "title": "PhyloP 100 Score"}
]
},
"bam_snapshot": {
"title": "Genome Snapshot",
Expand Down
27 changes: 11 additions & 16 deletions src/encoded/static/components/browse/columnExtensionMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,15 +315,15 @@ export const columnExtensionMap = {
/** "Bioinformatics" column title */
'sample_processing.analysis_type': {
'render' : function renderBioinformaticsColumn(result, parentProps){
const { '@id' : resultHrefPath, sample = null, sample_processing = null } = result;
const { '@id' : resultHrefPath, sample = null, sample_processing = null, vcf_file = null } = result;
if (!sample_processing) return null; // Unsure if possible, but fallback to null / '-' in case so (not showing datetitle etc)
const {
analysis_type: mainTitle = null,
last_modified: { date_modified: date = null } = {}
} = sample_processing;
const {
files = [],
processed_files = []
// processed_files = []
} = sample || {};

let status = null;
Expand All @@ -343,23 +343,17 @@ export const columnExtensionMap = {
}
}

// If fastQs are present...
// If fastQs are present... check if ingested
if (status === "in progress") {
// Check if VCFs have been ingested & if QCs passed
for (let j = 0; j < processed_files.length; j++) {
const procFile = processed_files[j];
const { file_ingestion_status: ingestionStatus = null, file_format = null } = procFile || {};
const { file_format: fileType } = file_format || {};
if ((fileType === "vcf_gz" || fileType === "gvcf_gz")
&& ingestionStatus === "Ingested") {
statusTip = "Variants are ingested";
status = "complete";

// TODO: Add QC status from overall QC status once implemented
} // Else, not VCF or not yet ingested, ignore
const { file_ingestion_status: ingestionStatus = null } = vcf_file || {};
if (ingestionStatus && ingestionStatus === "Ingested") {
statusTip = "Variants are ingested";
status = "complete";
}
}

// Check if overall QCs passed (not yet implemented) -- to add later

// Unlikely to show in non-Case item results, so didn't add Case filter
return (
<a href={resultHrefPath + "#case-info.bioinformatics"} className="adv-block-link">
Expand Down Expand Up @@ -467,11 +461,12 @@ export const columnExtensionMap = {
}
},
'bam_snapshot': {
'noSort' : true,
'render' : function(result, props) {
const { bam_snapshot = null, uuid = null } = result;
if (bam_snapshot) {
return (
<div className="mx-auto">
<div className="mx-auto text-truncate">
<a target="_blank" rel="noreferrer" href={`/${uuid}/@@download`}>
View BAM Snapshot
</a>
Expand Down
69 changes: 41 additions & 28 deletions src/encoded/static/components/item-pages/CaseView/FilteringTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ const GenesMostSevereHGVSCColumn = React.memo(function GenesMostSevereHGVSCColum
const hgvscSplit = hgvsc.split(":");
const pSplit = hgvscSplit[1].split(".");
// Will add hgvsp when added in data/backend
const rows = [<div key="genes_severe_transcript"><span className="text-600">{ pSplit[0] }.</span><span>{ pSplit[1] }</span></div>];
return <StackedRowColumn rowKey="genes_hgvsc" className="align-items-center" {...{ rows }} />;
const rows = [<div className="text-truncate d-block" key="genes_severe_transcript"><span className="text-600">{ pSplit[0] }.</span><span>{ pSplit[1] }</span></div>];
return <StackedRowColumn rowKey="genes_hgvsc" className="text-center" {...{ rows }} />;
});

function CaseViewEmbeddedVariantSampleSearchTable(props){
Expand All @@ -40,6 +40,7 @@ function CaseViewEmbeddedVariantSampleSearchTable(props){
...originalColExtMap, // Copy in existing vals but overwrite display_title.render
"display_title" : {
...originalColExtMap.display_title,
widthMap: { 'lg' : 250, 'md' : 220, 'sm' : 200 },
render: function(result, parentProps){
const { href, context, rowNumber, detailOpen, toggleDetailOpen } = parentProps;
return (
Expand All @@ -51,50 +52,58 @@ function CaseViewEmbeddedVariantSampleSearchTable(props){
},
// TODO? We could potentially move some of these definitions into EmbeddedItemSearchTable.defaultProps.columnExtensionMap
"DP" : { // Coverage, VAF column
widthMap: { 'lg' : 140, 'md' : 120, 'sm' : 70 },
render: function(result, props) {
const { DP = null, AF = null } = result;
const rows = [
<span key="DP">{DP || "-"}</span>,
<span key="AF">{AF || "-"}</span>
<span key="DP" data-tip="Coverage" className="d-block text-truncate">{DP || "-"}</span>,
<span key="AF" data-tip="VAF" className="d-block text-truncate">{AF || "-"}</span>
];
return <StackedRowColumn rowKey="Coverage, AF Row" className="align-items-center" {...{ rows }}/>;
return <StackedRowColumn rowKey="Coverage, AF Row" className="text-center" {...{ rows }}/>;
}
},
"associated_genotype_labels.proband_genotype_label" : { // Genotype column
widthMap: { 'lg' : 280, 'md' : 250, 'sm' : 200 },
widthMap: { 'lg' : 240, 'md' : 230, 'sm' : 200 },
render: function(result, props) {
const { associated_genotype_labels : { proband_genotype_label = null, mother_genotype_label = null, father_genotype_label = null } = {} } = result;
const rows = [];
if (proband_genotype_label) {
rows.push(<div key="proband_gt"><span className="font-italic">Proband: </span>{proband_genotype_label}</div>);
rows.push(<div key="proband_gt" className="d-block text-truncate"><span className="font-italic">Proband: </span>{proband_genotype_label}</div>);
} else {
return null;
}
if (mother_genotype_label) {
rows.push(<div key="mother_gt"><span className="font-italic">Mother: </span>{mother_genotype_label || "-"}</div>);
rows.push(<div key="mother_gt" className="d-block text-truncate"><span className="font-italic">Mother: </span>{mother_genotype_label || "-"}</div>);
}
if (father_genotype_label) {
rows.push(<div key="father_gt"><span className="font-italic">Father: </span>{father_genotype_label || "-"}</div>);
rows.push(<div key="father_gt" className="d-block text-truncate"><span className="font-italic">Father: </span>{father_genotype_label || "-"}</div>);
}
return <StackedRowColumn rowKey="genotype" className="align-items-center" {...{ rows }}/>;
return <StackedRowColumn rowKey="genotype" className="text-center" {...{ rows }}/>;
}
},
"variant.genes.genes_ensg.display_title": { // Gene Transcript column
widthMap: { 'lg' : 155, 'md' : 140, 'sm' : 130 },
render: function(result, props) {
const { variant : { genes : [firstGene = null] = [] } = {} } = result;
const { genes_ensg: { display_title = null } = {}, genes_most_severe_transcript = null } = firstGene || {};
const { variant : { genes = [] } = {} } = result;

if (firstGene) {
const geneTitles = genes.map((geneItem) => {
const { genes_ensg: { display_title = null } = {} } = geneItem || {};
return display_title;
});
if (genes.length > 0) {
const { genes_most_severe_transcript = null } = genes[0] || {};
const rows = [
<span key="genes_ensg" className="font-italic">{ display_title} </span>,
<span key="genes_severe_transcript" className="font-italic">{ genes_most_severe_transcript}</span>
<span key="genes_ensg" className="font-italic d-block text-truncate">{ geneTitles.length > 1 ? geneTitles.join() : geneTitles } </span>,
<span data-tip="Most Severe Transcript" key="genes_severe_transcript" className="font-italic d-block text-truncate">{ genes_most_severe_transcript}</span>
];
return <StackedRowColumn rowKey="genes_data" className="align-items-center" {...{ rows }} />;
return <StackedRowColumn rowKey="genes_data" className="text-center" {...{ rows }} />;
}
return null;
}
},
"variant.genes.genes_most_severe_hgvsc": { // Variant column
noSort: true,
widthMap: { 'lg' : 120, 'md' : 110, 'sm' : 95 },
render: function(result, props) {
const { variant : { genes : [firstGene = null] = [] } = {} } = result;
const { genes_most_severe_hgvsc = null } = firstGene || {};
Expand All @@ -106,17 +115,19 @@ function CaseViewEmbeddedVariantSampleSearchTable(props){
}
},
"variant.genes.genes_most_severe_consequence.coding_effect": { // Coding Effect column
widthMap: { 'lg' : 140, 'md' : 130, 'sm' : 120 },
render: function(result, props) {
const { variant : { genes : [firstGene = null] = [] } = {} } = result;
const { genes_most_severe_consequence : { coding_effect = null } = {} } = firstGene || {};

if (firstGene && coding_effect) {
return <StackedRowColumn rowKey="genes_codingeffect" className="align-items-center" rows={[coding_effect]} />;
return <StackedRowColumn rowKey="genes_codingeffect" className="text-center text-truncate" rows={[coding_effect]} />;
}
return null;
}
},
"variant.gnomad_af": { // Gnomad column
widthMap: { 'lg' : 140, 'md' : 130, 'sm' : 120 },
render: function(result, props){
const { variant : { gnomad_af = null, max_pop_af_af_popmax = null } = {} } = result;
const rows = [];
Expand All @@ -125,12 +136,14 @@ function CaseViewEmbeddedVariantSampleSearchTable(props){
return null;
}
if (gnomad_af) {
rows.push(<div key="gnomad_af"><span className="text-600">ALL: </span>{gnomad_af || "-"}</div>);
const gnomad_af_exp = gnomad_af ? gnomad_af.toExponential(3): null;
rows.push(<div key="gnomad_af" className="d-block text-truncate"><span className="text-600">ALL: </span>{gnomad_af_exp || gnomad_af || "-"}</div>);
}
if (max_pop_af_af_popmax){
rows.push(<div key="gnomad_af_popmax"><span className="text-600">MAX: </span>{max_pop_af_af_popmax || "-"}</div>);
const max_pop_af_af_popmax_exp = max_pop_af_af_popmax ? max_pop_af_af_popmax.toExponential(3): null;
rows.push(<div key="gnomad_af_popmax" className="d-block text-truncate"><span className="text-600">MAX: </span>{max_pop_af_af_popmax_exp || max_pop_af_af_popmax || "-"}</div>);
}
return <StackedRowColumn rowKey="genes_gnomad" className="align-items-center" {...{ rows }}/>;
return <StackedRowColumn rowKey="genes_gnomad" className="text-center" {...{ rows }}/>;
}
},
"variant.cadd_phred": { // Predictors column (cadd_phred, spliceai, phylop100)
Expand All @@ -142,15 +155,15 @@ function CaseViewEmbeddedVariantSampleSearchTable(props){
return null;
}
if (cadd_phred) {
rows.push(<div key="cadd_phred"><span className="text-600">Cadd Phred: </span>{cadd_phred || "-"}</div>);
rows.push(<div key="cadd_phred" className="d-block text-truncate"><span className="text-600">Cadd Phred: </span>{cadd_phred || "-"}</div>);
}
if (spliceai_maxds) {
rows.push(<div key="spliceai_maxds"><span className="text-600">SpliceAI MaxDS: </span>{spliceai_maxds || "-"}</div>);
rows.push(<div key="spliceai_maxds" className="d-block text-truncate"><span className="text-600">SpliceAI MaxDS: </span>{spliceai_maxds || "-"}</div>);
}
if (conservation_phylop100) {
rows.push(<div key="phylop"><span className="text-600">PhyloP 100: </span>{conservation_phylop100 || "-"}</div>);
rows.push(<div key="phylop" className="d-block text-truncate"><span className="text-600">PhyloP 100: </span>{conservation_phylop100 || "-"}</div>);
}
return <StackedRowColumn rowKey="genes_predictors" className="align-items-center" {...{ rows }}/>;
return <StackedRowColumn rowKey="genes_predictors" className="text-center" {...{ rows }}/>;
}
}
};
Expand All @@ -160,7 +173,7 @@ function CaseViewEmbeddedVariantSampleSearchTable(props){

function StackedRowColumn(props) {
const { rowKey = null, rows = [], className = null } = props;
const cls = ("w-100 d-flex flex-column text-ellipsis-container" + (className ? " " + className : ""));
const cls = ("w-100" + (className ? " " + className : ""));
return (
<div key={rowKey} className={cls} data-delay-dhow={750}>
{ rows }
Expand All @@ -177,17 +190,17 @@ const VSDisplayTitleColumnDefault = React.memo(function VSDisplayTitleColumnDefa
const { variant = null } = result || {};
const { display_title = null, dbsnp_rs_number = null } = variant;

const cls = ("title-block text-ellipsis-container" + (className ? " " + className : ""));
const cls = ("title-block" + (className ? " " + className : ""));
const rows = [
<span key="variant-title" className="text-600">{display_title}</span>
<span key="variant-title" className="d-block text-600 text-truncate">{display_title}</span>
];

if (dbsnp_rs_number) {
rows.push(<span key="dbsnp" className="font-italic">{dbsnp_rs_number}</span>);
}

return (
<a key="title" href={link || '#'} onClick={onClick}>
<a key="title" href={link || '#'} onClick={onClick} className="d-block text-truncate">
<StackedRowColumn rowKey="title-container" {...{ rows, cls }} />
</a>
);
Expand Down
5 changes: 3 additions & 2 deletions src/encoded/static/components/item-pages/CaseView/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import url from 'url';

import { console, layout, navigate, ajax } from '@hms-dbmi-bgm/shared-portal-components/es/components/util';
import { PartialList } from '@hms-dbmi-bgm/shared-portal-components/es/components/ui/PartialList';
import { decorateNumberWithCommas } from '@hms-dbmi-bgm/shared-portal-components/es/components/util/value-transforms';

import { PedigreeVizView } from './../../viz/PedigreeViz';
import DefaultItemView from './../DefaultItemView';
Expand Down Expand Up @@ -612,7 +613,7 @@ const BioinfoStats = React.memo(function BioinfoStats(props) {
: null }
</div>
<div className="col-sm-4">{/* 4,769,578 */}
{ (msaStats.totalVariants && msaStats.totalVariants.value) || "" }
{ (msaStats.totalVariants && msaStats.totalVariants.value) ? decorateNumberWithCommas(msaStats.totalVariants.value): "" }
</div>
</div>
<div className="row qc-summary">
Expand Down Expand Up @@ -660,7 +661,7 @@ const BioinfoStats = React.memo(function BioinfoStats(props) {
: null }
</div>
<div className="col-sm-4"> {/* Ex. 1,273 */}
{ (msaStats.filteredVariants && msaStats.filteredVariants.value) || "" }
{ (msaStats.filteredVariants && msaStats.filteredVariants.value) ? decorateNumberWithCommas(msaStats.filteredVariants.value) : "" }
</div>
</div>
</>
Expand Down
Loading

0 comments on commit c9a4663

Please sign in to comment.