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 @@
}
.geneDetails {
display: grid;
grid-template-columns: [gene-symbol] min-content 10px [stable-id] auto;
.geneSymbol {
grid-column: gene-symbol;
font-weight: $bold;
}
.stableId {
grid-column: stable-id;
margin-right: 10px;
}
}
......@@ -76,19 +69,6 @@
margin: 10px 0 20px 20px;
}
.xrefGroupSourceName {
margin-right: 5px;
display: inline-block;
}
.xrefGroupWithSameLabel {
display: inline-block;
}
.xrefGroupLinks {
display: inline-grid;
}
.externalReferenceContainer{
margin-bottom:10px;
}
\ No newline at end of file
}
......@@ -43,8 +43,8 @@ import { parseEnsObjectIdFromUrl } from 'src/shared/state/ens-object/ensObjectHe
const QUERY = gql`
query Gene($stable_id: String!, $genome_id: String!) {
gene(byId: { stable_id: $stable_id, genome_id: $genome_id }) {
name
stable_id
symbol
external_references {
accession_id
name
......@@ -80,7 +80,7 @@ type Transcript = {
};
type Gene = {
name: string;
symbol: string;
stable_id: string;
transcripts: Transcript[];
external_references: ExternalReferenceType[];
......@@ -145,8 +145,8 @@ const GeneExternalReferences = () => {
return (
<div className={styles.xrefsContainer}>
<div className={styles.geneDetails}>
<div className={styles.geneSymbol}>{data.gene.name}</div>
<div className={styles.stableId}>{data.gene.stable_id}</div>
<span className={styles.geneSymbol}>{data.gene.symbol}</span>
<span>{data.gene.stable_id}</span>
</div>
<div className={styles.sectionHead}>Gene</div>
......@@ -169,13 +169,7 @@ const GeneExternalReferences = () => {
</div>
);
} else {
return externalReferencesGroup.references[0].name ===
externalReferencesGroup.source.name
? renderXrefGroupWithSameLabels(externalReferencesGroup, key)
: renderXrefGroupWithDifferentLabels(
externalReferencesGroup,
key
);
return renderXrefGroup(externalReferencesGroup, key);
}
}
)}
......@@ -186,7 +180,6 @@ const GeneExternalReferences = () => {
{transcripts.map((transcript, key) => {
return (
<div key={key}>
{' '}
<RenderTranscriptXrefGroup transcript={transcript} />
</div>
);
......@@ -228,33 +221,7 @@ const RenderTranscriptXrefGroup = (props: { transcript: Transcript }) => {
);
};
const renderXrefGroupWithSameLabels = (
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 = (
const renderXrefGroup = (
externalReferencesGroup: ExternalReferencesGroup,
key: number
) => {
......@@ -271,7 +238,12 @@ const renderXrefGroupWithDifferentLabels = (
<div>
{externalReferencesGroup.references.map((entry, key) => (
<ExternalReference
label={entry.description}
label={
entry.description === entry.accession_id ||
externalReferencesGroup.source.name === entry.description
? ''
: entry.description
}
to={entry.url}
linkText={entry.accession_id}
key={key}
......
......@@ -48,7 +48,7 @@ const GeneOverview = (props: Props) => {
<div className={styles.overviewContainer}>
<div className={styles.geneDetails}>
<span className={styles.geneSymbol}>{gene.symbol}</span>
<span className={styles.stableId}>{gene.id}</span>
<span>{gene.id}</span>
</div>
<div className={styles.sectionHead}>Gene name</div>
......
......@@ -19,7 +19,7 @@ import { DataSetType } from '../../types/dataSet';
export const entityViewerWheatSampleResponse: EntityViewerSidebarPayload = {
gene: {
symbol: 'TraesCS3D02G273600.1 ',
symbol: 'TraesCS3D02G273600.1',
id: 'ENSG00000139618.15',
metadata: {
name: {
......@@ -380,7 +380,7 @@ export const entityViewerHomoSapiensSampleResponse: EntityViewerSidebarPayload =
export const entityViewerBacteriaSampleResponse: EntityViewerSidebarPayload = {
gene: {
symbol: 'grpE ',
symbol: 'grpE',
id: 'b2614',
synonyms: ['b2614', 'ECK2610', 'JW2594'],
metadata: {
......
@import 'src/styles/common';
.label {
grid-column: label; // FIXME: what grid is this?
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