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
51c4899d
Unverified
Commit
51c4899d
authored
May 26, 2021
by
Jyothish
Committed by
GitHub
May 26, 2021
Browse files
Reposition download (#498)
parent
4c8132af
Pipeline
#159455
passed with stages
in 5 minutes and 35 seconds
Changes
4
Pipelines
2
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
67 additions
and
53 deletions
+67
-53
src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.scss
...t/transcripts-list-item-info/TranscriptsListItemInfo.scss
+30
-18
src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.test.tsx
...anscripts-list-item-info/TranscriptsListItemInfo.test.tsx
+5
-3
src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.tsx
...st/transcripts-list-item-info/TranscriptsListItemInfo.tsx
+21
-19
src/ensembl/src/shared/components/instant-download/instant-download-transcript/InstantDownloadTranscript.scss
...nstant-download-transcript/InstantDownloadTranscript.scss
+11
-13
No files found.
src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.scss
View file @
51c4899d
...
...
@@ -2,19 +2,19 @@
.listItemInfo
{
color
:
$grey
;
line-height
:
2
;
padding-top
:
0
;
}
.middle
{
display
:
grid
;
grid-template-areas
:
'left middle right .'
'. . . downloadLink'
'download download download download'
;
'left middle right'
'moreinformation . .'
'downloadLink . .'
'download download download'
;
grid-column-gap
:
10px
;
background
:
$soft-black
;
padding
:
15px
2
0px
;
padding
:
15px
3
0px
;
strong
{
color
:
$white
;
...
...
@@ -30,40 +30,52 @@
.topLeft
{
grid-area
:
left
;
width
:
190px
;
div
{
padding-bottom
:
6px
;
}
}
.topMiddle
{
grid-area
:
middle
;
width
:
150px
;
div
{
padding-bottom
:
6px
;
}
}
.topRight
{
grid-area
:
right
;
width
:
210px
;
div
{
padding-bottom
:
6px
;
}
}
.moreInformation
{
padding-top
:
16px
;
}
.downloadLink
{
grid-area
:
downloadLink
;
color
:
$blue
;
width
:
66px
;
height
:
16px
;
text-align
:
right
;
line-height
:
1
;
span
{
cursor
:
pointer
;
}
cursor
:
pointer
;
padding-top
:
6px
;
}
.download
{
grid-area
:
download
;
padding-top
:
15px
;
margin-top
:
15px
;
border-top
:
1px
solid
$dark-grey
;
padding-top
:
6px
;
}
.closeButton
{
display
:
inline-block
;
.chevron
{
margin-left
:
10px
;
margin-bottom
:
-3px
;
height
:
12px
;
width
:
12px
;
transition
:
transform
linear
0
.2s
;
&
Up
{
transform
:
rotate
(
-180deg
);
}
}
.viewInApp
{
...
...
src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.test.tsx
View file @
51c4899d
...
...
@@ -64,9 +64,11 @@ describe('<TranscriptsListItemInfo /', () => {
const
{
container
}
=
renderComponent
();
const
expectedProteinLength
=
defaultProps
.
transcript
.
product_generating_contexts
[
0
].
product
?.
length
;
expect
(
container
.
querySelector
(
'
.topMiddle strong
'
)?.
textContent
).
toMatch
(
`
${
expectedProteinLength
}
`
);
const
currentProteinLength
=
container
.
querySelector
(
'
.topMiddle strong
'
)
?.
textContent
?.
split
(
/
\s
/
)[
0
]
?.
replace
(
/,/g
,
''
);
expect
(
currentProteinLength
).
toMatch
(
`
${
expectedProteinLength
}
`
);
});
it
(
'
contains the download link
'
,
()
=>
{
...
...
src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.tsx
View file @
51c4899d
...
...
@@ -35,7 +35,6 @@ import { buildFocusIdForUrl } from 'src/shared/state/ens-object/ensObjectHelpers
import
{
InstantDownloadTranscript
}
from
'
src/shared/components/instant-download
'
;
import
ViewInApp
from
'
src/shared/components/view-in-app/ViewInApp
'
;
import
CloseButton
from
'
src/shared/components/close-button/CloseButton
'
;
import
{
toggleTranscriptDownload
}
from
'
src/content/app/entity-viewer/state/gene-view/transcripts/geneViewTranscriptsSlice
'
;
import
{
clearExpandedProteins
}
from
'
src/content/app/entity-viewer/state/gene-view/proteins/geneViewProteinsSlice
'
;
...
...
@@ -49,6 +48,8 @@ import { View } from 'src/content/app/entity-viewer/state/gene-view/view/geneVie
import
transcriptsListStyles
from
'
../DefaultTranscriptsList.scss
'
;
import
styles
from
'
./TranscriptsListItemInfo.scss
'
;
import
{
ReactComponent
as
ChevronDown
}
from
'
static/img/shared/chevron-down.svg
'
;
type
Gene
=
Pick
<
FullGene
,
'
unversioned_stable_id
'
|
'
stable_id
'
>
;
type
Transcript
=
Pick
<
FullTranscript
,
...
...
@@ -106,6 +107,10 @@ export const TranscriptsListItemInfo = (
getSplicedRNALength
(
transcript
)
);
const
aminoAcidLength
=
getCommaSeparatedNumber
(
getProductAminoAcidLength
(
transcript
)
);
const
mainStyles
=
classNames
(
transcriptsListStyles
.
row
,
styles
.
listItemInfo
);
const
midStyles
=
classNames
(
transcriptsListStyles
.
middle
,
styles
.
middle
);
...
...
@@ -133,6 +138,11 @@ export const TranscriptsListItemInfo = (
const
{
genomeId
}
=
params
;
return
urlFor
.
browser
({
genomeId
:
genomeId
,
focus
:
focusIdForUrl
});
};
const
chevronClassForDownload
=
classNames
(
styles
.
chevron
,
{
[
styles
.
chevronUp
]:
props
.
expandDownload
});
return
(
<
div
className
=
{
mainStyles
}
>
<
div
className
=
{
transcriptsListStyles
.
left
}
></
div
>
...
...
@@ -147,7 +157,7 @@ export const TranscriptsListItemInfo = (
{
isProteinCodingTranscript
(
transcript
)
&&
(
<>
<
div
>
<
strong
>
{
getProductA
minoAcidLength
(
transcript
)
}
aa
</
strong
>
<
strong
>
{
a
minoAcidLength
}
aa
</
strong
>
</
div
>
{
getLinkToProteinView
(
transcript
.
product_generating_contexts
[
0
]?.
product
.
stable_id
...
...
@@ -164,23 +174,15 @@ export const TranscriptsListItemInfo = (
of
{
transcript
.
spliced_exons
.
length
}
</
div
>
</
div
>
<
div
className
=
{
styles
.
downloadLink
}
>
{
props
.
expandDownload
?
(
<
CloseButton
className
=
{
styles
.
closeButton
}
onClick
=
{
()
=>
props
.
toggleTranscriptDownload
(
transcript
.
stable_id
)
}
/>
)
:
(
<
span
onClick
=
{
()
=>
props
.
toggleTranscriptDownload
(
transcript
.
stable_id
)
}
>
Download
</
span
>
)
}
<
div
className
=
{
styles
.
moreInformation
}
>
More information
</
div
>
<
div
className
=
{
styles
.
downloadLink
}
onClick
=
{
()
=>
props
.
toggleTranscriptDownload
(
transcript
.
stable_id
)
}
>
Download
<
ChevronDown
className
=
{
chevronClassForDownload
}
/>
</
div
>
{
props
.
expandDownload
&&
renderInstantDownload
({
...
props
,
genomeId
})
}
</
div
>
...
...
src/ensembl/src/shared/components/instant-download/instant-download-transcript/InstantDownloadTranscript.scss
View file @
51c4899d
...
...
@@ -3,7 +3,7 @@
.checkboxGrid
{
margin-top
:
0
.5em
;
display
:
grid
;
grid-template-columns
:
1
.5
fr
1fr
;
grid-template-columns
:
1fr
1fr
;
grid-template-rows
:
auto
;
grid-row-gap
:
0
.2em
;
}
...
...
@@ -15,7 +15,7 @@
.featureId
{
margin-left
:
0
.5em
;
font-weight
:
$
bold
;
font-weight
:
$
normal
;
}
}
...
...
@@ -29,11 +29,6 @@
border-color
:
$dark-grey
;
}
.checkboxLabel
{
font-size
:
13px
;
}
.themeDark
{
.label
{
color
:
$white
;
...
...
@@ -62,31 +57,34 @@
.layout
{
display
:
grid
;
font-size
:
13px
;
&
Horizontal
{
grid-template-columns
:
1fr
1fr
;
grid-column-gap
:
24
px
;
grid-column-gap
:
10
px
;
grid-template-areas
:
'transcript gene'
'transcript download'
;
margin-bottom
:
12px
;
.transcriptSection
{
grid-area
:
transcript
;
width
:
393px
;
}
.geneSection
{
grid-area
:
gene
;
.checkboxWrapper
{
margin-top
:
13px
;
margin-left
:
13px
;
margin-left
:
6px
;
}
}
.transcriptVis
,
.transcriptVis
{
margin-left
:
12px
;
}
.checkboxGrid
{
marg
in-left
:
18
px
;
padd
in
g
-left
:
6
px
;
}
button
{
...
...
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