Unverified Commit 50afc556 authored by Manoj Pandian Sakthivel's avatar Manoj Pandian Sakthivel Committed by GitHub
Browse files

Wrap transcript xrefs using accordion (#474)

parent c8c38a6e
Pipeline #137165 passed with stages
in 7 minutes and 39 seconds
......@@ -57,10 +57,6 @@
padding: 5px 0px 5px 20px;
}
.transcriptWrapper {
margin-bottom: 10px;
}
.transcriptId {
color: $blue;
cursor: pointer;
......
......@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { useState } from 'react';
import React from 'react';
import { useQuery, gql } from '@apollo/client';
import { useParams } from 'react-router';
import sortBy from 'lodash/sortBy';
......@@ -210,7 +210,6 @@ const GeneExternalReferences = () => {
const TranscriptXrefs = (props: { transcript: Transcript }) => {
const { transcript } = props;
const [isExpanded, setIsExpanded] = useState(false);
const unsortedXrefs = [...transcript.external_references];
// Add protein level xrefs
......@@ -225,17 +224,24 @@ const TranscriptXrefs = (props: { transcript: Transcript }) => {
const xrefGroups = buildExternalReferencesGroups(unsortedXrefs);
return (
<div className={styles.transcriptWrapper}>
<div
onClick={() => setIsExpanded(!isExpanded)}
className={styles.transcriptId}
>
{transcript.stable_id}
</div>
{transcript.external_references && isExpanded && (
<div className={styles.transcriptXrefs}>{renderXrefs(xrefGroups)}</div>
)}
</div>
<Accordion className={styles.xrefAccordion}>
<AccordionItem className={styles.xrefAccordionItem}>
<AccordionItemHeading className={styles.xrefAccordionHeader}>
<AccordionItemButton className={styles.xrefAccordionButton}>
<div className={styles.transcriptId}>{transcript.stable_id}</div>
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel className={styles.xrefAccordionItemContent}>
<div>
{transcript.external_references && (
<div className={styles.transcriptXrefs}>
{renderXrefs(xrefGroups)}
</div>
)}
</div>
</AccordionItemPanel>
</AccordionItem>
</Accordion>
);
};
......
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