Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ensembl-web
ensembl-client
Commits
50afc556
Unverified
Commit
50afc556
authored
Mar 11, 2021
by
Manoj Pandian Sakthivel
Committed by
GitHub
Mar 11, 2021
Browse files
Wrap transcript xrefs using accordion (#474)
parent
c8c38a6e
Pipeline
#137165
passed with stages
in 7 minutes and 39 seconds
Changes
2
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
19 additions
and
17 deletions
+19
-17
src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-sidebar/external-references/GeneExternalReferences.scss
...w-sidebar/external-references/GeneExternalReferences.scss
+0
-4
src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-sidebar/external-references/GeneExternalReferences.tsx
...ew-sidebar/external-references/GeneExternalReferences.tsx
+19
-13
No files found.
src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-sidebar/external-references/GeneExternalReferences.scss
View file @
50afc556
...
...
@@ -57,10 +57,6 @@
padding
:
5px
0px
5px
20px
;
}
.transcriptWrapper
{
margin-bottom
:
10px
;
}
.transcriptId
{
color
:
$blue
;
cursor
:
pointer
;
...
...
src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-sidebar/external-references/GeneExternalReferences.tsx
View file @
50afc556
...
...
@@ -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
>
);
};
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment