Unverified Commit 83a1d147 authored by Manoj Pandian Sakthivel's avatar Manoj Pandian Sakthivel Committed by GitHub

Single source xrefs (#401)

- Multiple xrefs from the same group are now displayed within an accordion
- If the xref source description and accession_id matched, the label will be hidden
- If the xref source description and the xref group name matched, the label will be hidden
parent 07a78aaf
Pipeline #112318 passed with stages
in 4 minutes and 52 seconds
...@@ -13,16 +13,9 @@ ...@@ -13,16 +13,9 @@
} }
.geneDetails { .geneDetails {
display: grid;
grid-template-columns: [gene-symbol] min-content 10px [stable-id] auto;
.geneSymbol { .geneSymbol {
grid-column: gene-symbol;
font-weight: $bold; font-weight: $bold;
} margin-right: 10px;
.stableId {
grid-column: stable-id;
} }
} }
...@@ -76,19 +69,6 @@ ...@@ -76,19 +69,6 @@
margin: 10px 0 20px 20px; margin: 10px 0 20px 20px;
} }
.xrefGroupSourceName {
margin-right: 5px;
display: inline-block;
}
.xrefGroupWithSameLabel {
display: inline-block;
}
.xrefGroupLinks {
display: inline-grid;
}
.externalReferenceContainer{ .externalReferenceContainer{
margin-bottom:10px; margin-bottom:10px;
} }
\ No newline at end of file
...@@ -43,8 +43,8 @@ import { parseEnsObjectIdFromUrl } from 'src/shared/state/ens-object/ensObjectHe ...@@ -43,8 +43,8 @@ import { parseEnsObjectIdFromUrl } from 'src/shared/state/ens-object/ensObjectHe
const QUERY = gql` const QUERY = gql`
query Gene($stable_id: String!, $genome_id: String!) { query Gene($stable_id: String!, $genome_id: String!) {
gene(byId: { stable_id: $stable_id, genome_id: $genome_id }) { gene(byId: { stable_id: $stable_id, genome_id: $genome_id }) {
name
stable_id stable_id
symbol
external_references { external_references {
accession_id accession_id
name name
...@@ -80,7 +80,7 @@ type Transcript = { ...@@ -80,7 +80,7 @@ type Transcript = {
}; };
type Gene = { type Gene = {
name: string; symbol: string;
stable_id: string; stable_id: string;
transcripts: Transcript[]; transcripts: Transcript[];
external_references: ExternalReferenceType[]; external_references: ExternalReferenceType[];
...@@ -145,8 +145,8 @@ const GeneExternalReferences = () => { ...@@ -145,8 +145,8 @@ const GeneExternalReferences = () => {
return ( return (
<div className={styles.xrefsContainer}> <div className={styles.xrefsContainer}>
<div className={styles.geneDetails}> <div className={styles.geneDetails}>
<div className={styles.geneSymbol}>{data.gene.name}</div> <span className={styles.geneSymbol}>{data.gene.symbol}</span>
<div className={styles.stableId}>{data.gene.stable_id}</div> <span>{data.gene.stable_id}</span>
</div> </div>
<div className={styles.sectionHead}>Gene</div> <div className={styles.sectionHead}>Gene</div>
...@@ -169,13 +169,7 @@ const GeneExternalReferences = () => { ...@@ -169,13 +169,7 @@ const GeneExternalReferences = () => {
</div> </div>
); );
} else { } else {
return externalReferencesGroup.references[0].name === return renderXrefGroup(externalReferencesGroup, key);
externalReferencesGroup.source.name
? renderXrefGroupWithSameLabels(externalReferencesGroup, key)
: renderXrefGroupWithDifferentLabels(
externalReferencesGroup,
key
);
} }
} }
)} )}
...@@ -186,7 +180,6 @@ const GeneExternalReferences = () => { ...@@ -186,7 +180,6 @@ const GeneExternalReferences = () => {
{transcripts.map((transcript, key) => { {transcripts.map((transcript, key) => {
return ( return (
<div key={key}> <div key={key}>
{' '}
<RenderTranscriptXrefGroup transcript={transcript} /> <RenderTranscriptXrefGroup transcript={transcript} />
</div> </div>
); );
...@@ -228,33 +221,7 @@ const RenderTranscriptXrefGroup = (props: { transcript: Transcript }) => { ...@@ -228,33 +221,7 @@ const RenderTranscriptXrefGroup = (props: { transcript: Transcript }) => {
); );
}; };
const renderXrefGroupWithSameLabels = ( const renderXrefGroup = (
externalReferencesGroup: ExternalReferencesGroup,
key: number
) => {
return (
<div key={key} className={styles.xrefGroupWithSameLabel}>
<div className={styles.xrefGroupSourceName}>
{externalReferencesGroup.source.name}
</div>
<div className={styles.xrefGroupLinks}>
{externalReferencesGroup.references.map((entry, key) => (
<ExternalReference
label={''}
to={entry.url}
linkText={entry.accession_id}
key={key}
classNames={{
container: styles.externalReferenceContainer
}}
/>
))}
</div>
</div>
);
};
const renderXrefGroupWithDifferentLabels = (
externalReferencesGroup: ExternalReferencesGroup, externalReferencesGroup: ExternalReferencesGroup,
key: number key: number
) => { ) => {
...@@ -271,7 +238,12 @@ const renderXrefGroupWithDifferentLabels = ( ...@@ -271,7 +238,12 @@ const renderXrefGroupWithDifferentLabels = (
<div> <div>
{externalReferencesGroup.references.map((entry, key) => ( {externalReferencesGroup.references.map((entry, key) => (
<ExternalReference <ExternalReference
label={entry.description} label={
entry.description === entry.accession_id ||
externalReferencesGroup.source.name === entry.description
? ''
: entry.description
}
to={entry.url} to={entry.url}
linkText={entry.accession_id} linkText={entry.accession_id}
key={key} key={key}
......
...@@ -48,7 +48,7 @@ const GeneOverview = (props: Props) => { ...@@ -48,7 +48,7 @@ const GeneOverview = (props: Props) => {
<div className={styles.overviewContainer}> <div className={styles.overviewContainer}>
<div className={styles.geneDetails}> <div className={styles.geneDetails}>
<span className={styles.geneSymbol}>{gene.symbol}</span> <span className={styles.geneSymbol}>{gene.symbol}</span>
<span className={styles.stableId}>{gene.id}</span> <span>{gene.id}</span>
</div> </div>
<div className={styles.sectionHead}>Gene name</div> <div className={styles.sectionHead}>Gene name</div>
......
...@@ -19,7 +19,7 @@ import { DataSetType } from '../../types/dataSet'; ...@@ -19,7 +19,7 @@ import { DataSetType } from '../../types/dataSet';
export const entityViewerWheatSampleResponse: EntityViewerSidebarPayload = { export const entityViewerWheatSampleResponse: EntityViewerSidebarPayload = {
gene: { gene: {
symbol: 'TraesCS3D02G273600.1 ', symbol: 'TraesCS3D02G273600.1',
id: 'ENSG00000139618.15', id: 'ENSG00000139618.15',
metadata: { metadata: {
name: { name: {
...@@ -380,7 +380,7 @@ export const entityViewerHomoSapiensSampleResponse: EntityViewerSidebarPayload = ...@@ -380,7 +380,7 @@ export const entityViewerHomoSapiensSampleResponse: EntityViewerSidebarPayload =
export const entityViewerBacteriaSampleResponse: EntityViewerSidebarPayload = { export const entityViewerBacteriaSampleResponse: EntityViewerSidebarPayload = {
gene: { gene: {
symbol: 'grpE ', symbol: 'grpE',
id: 'b2614', id: 'b2614',
synonyms: ['b2614', 'ECK2610', 'JW2594'], synonyms: ['b2614', 'ECK2610', 'JW2594'],
metadata: { metadata: {
......
@import 'src/styles/common'; @import 'src/styles/common';
.label { .label {
grid-column: label; // FIXME: what grid is this?
margin-right: 5px; margin-right: 5px;
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment