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
c5089410
Unverified
Commit
c5089410
authored
Sep 03, 2021
by
Jyothish
Committed by
GitHub
Sep 03, 2021
Browse files
new general error screen with venn diagram (#566)
parent
67e3de66
Pipeline
#190168
passed with stages
in 6 minutes and 49 seconds
Changes
4
Pipelines
2
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
136 additions
and
45 deletions
+136
-45
src/ensembl/src/shared/components/error-screen/ErrorScreen.scss
...sembl/src/shared/components/error-screen/ErrorScreen.scss
+55
-23
src/ensembl/src/shared/components/error-screen/GeneralErrorScreen.tsx
...src/shared/components/error-screen/GeneralErrorScreen.tsx
+72
-22
src/ensembl/src/shared/helpers/urlHelper.ts
src/ensembl/src/shared/helpers/urlHelper.ts
+1
-0
src/ensembl/static/img/shared/icon_alert_circle.svg
src/ensembl/static/img/shared/icon_alert_circle.svg
+8
-0
No files found.
src/ensembl/src/shared/components/error-screen/ErrorScreen.scss
View file @
c5089410
@import
'src/styles/common'
;
$generalErrorImageWidth
:
170px
;
$generalErrorImageGap
:
60px
;
$generalErrorImagesTotalWidth
:
calc
(
3
*
#{
$generalErrorImageWidth
}
+
2
*
#{
$generalErrorImageGap
}
);
.newTechErrorWrapper
{
padding-top
:
10vh
;
display
:
flex
;
...
...
@@ -36,36 +30,74 @@ $generalErrorImagesTotalWidth: calc(
flex
:
0
0
auto
;
}
.generalErrorTopMessage
{
font-weight
:
bold
;
}
.generalErrorBody
{
flex-grow
:
1
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
align-items
:
center
;
text-align
:
center
;
padding-top
:
100px
;
}
.generalErrorBottomMessage
{
font-size
:
12px
;
}
.reloadButton
{
padding-top
:
40px
;
}
.generalErrorImages
{
img
{
width
:
170px
;
height
:
170px
;
.moreOptions
{
padding
:
50px
0
20px
0
;
}
.resetOption
{
color
:
$red
;
button
{
margin-top
:
24px
;
}
}
.generalErrorImage
{
display
:
flex
;
font-size
:
12px
;
.vennCircle
{
display
:
flex
;
width
:
195px
;
height
:
195px
;
align-items
:
center
;
border-radius
:
50%
;
background-color
:
rgba
(
183
,
192
,
200
,
0
.24
);
position
:
relative
;
}
@media
screen
and
(
min-width
:
$generalErrorImagesTotalWidth
)
{
margin-top
:
10vh
;
margin-bottom
:
calc
(
#{
$generalErrorImageGap
}
/
2
)
;
.vennCircleLeft
{
left
:
32px
;
text-align
:
right
;
img
:not
(
:last-child
)
{
margin-right
:
$generalErrorImageGap
;
span
{
margin-right
:
83px
;
margin-left
:
30px
;
}
}
@media
screen
and
(
max-width
:
$generalErrorImagesTotalWidth
)
{
display
:
inline-flex
;
flex-direction
:
column
;
img
:not
(
:last-child
)
{
margin-bottom
:
calc
(
#{
$generalErrorImageGap
}
/
2
);
.vennCircleRight
{
right
:
32px
;
text-align
:
left
;
span
{
margin-right
:
15px
;
margin-left
:
30px
;
}
}
.infoIcon
{
padding-left
:
19px
;
svg
{
fill
:
$red
;
width
:
24px
;
height
:
24px
;
}
}
}
src/ensembl/src/shared/components/error-screen/GeneralErrorScreen.tsx
View file @
c5089410
...
...
@@ -14,34 +14,84 @@
* limitations under the License.
*/
import
React
from
'
react
'
;
import
React
,
{
useState
}
from
'
react
'
;
import
classNames
from
'
classnames
'
;
import
storageService
from
'
src/services/storage-service
'
;
import
*
as
urlFor
from
'
src/shared/helpers/urlHelper
'
;
import
{
Topbar
}
from
'
src/header/Header
'
;
import
generalErrorImage1
from
'
./images/gener
al
-
er
ror-1.jp
g
'
;
import
generalErrorImage2
from
'
./
images/general-error-2.jpg
'
;
import
generalErrorImage3
from
'
./
images/general-error-3.jpg
'
;
import
{
ReactComponent
as
InfoIcon
}
from
'
static/img/shared/icon_
aler
t_circle.sv
g
'
;
import
{
PrimaryButton
}
from
'
.
.
/
button/Button
'
;
import
ShowHide
from
'
.
.
/
show-hide/ShowHide
'
;
import
styles
from
'
./ErrorScreen.scss
'
;
const
GeneralErrorScreen
=
()
=>
(
<
section
className
=
{
styles
.
generalErrorScreen
}
>
<
Topbar
/>
<
div
className
=
{
styles
.
generalErrorBody
}
>
<
p
className
=
{
styles
.
generalErrorTopMessage
}
>
Sorry, something seems to have gone wrong
</
p
>
<
div
className
=
{
styles
.
generalErrorImages
}
>
<
img
src
=
{
generalErrorImage1
}
/>
<
img
src
=
{
generalErrorImage2
}
/>
<
img
src
=
{
generalErrorImage3
}
/>
</
div
>
<
div
className
=
{
styles
.
generalErrorBottomMessage
}
>
<
p
>
We‘re trying to fix it right now
</
p
>
<
p
>
Please try again later...
</
p
>
const
GeneralErrorScreen
=
()
=>
{
const
[
moreOptionExpanded
,
setMoreOptionExpanded
]
=
useState
(
false
);
const
toggleChevron
=
()
=>
{
setMoreOptionExpanded
(
!
moreOptionExpanded
);
};
const
reloadPage
=
()
=>
{
window
.
location
.
reload
();
};
const
resetPage
=
()
=>
{
storageService
.
clearAll
();
window
.
location
.
replace
(
urlFor
.
home
());
};
return
(
<
section
className
=
{
styles
.
generalErrorScreen
}
>
<
Topbar
/>
<
div
className
=
{
styles
.
generalErrorBody
}
>
<
p
className
=
{
styles
.
generalErrorTopMessage
}
>
Venn of the current issue
</
p
>
<
div
className
=
{
styles
.
generalErrorImage
}
>
<
div
className
=
{
classNames
(
styles
.
vennCircle
,
styles
.
vennCircleLeft
)
}
>
<
span
>
We've made some changes...
</
span
>
</
div
>
<
div
className
=
{
classNames
(
styles
.
vennCircle
,
styles
.
vennCircleRight
)
}
>
<
div
className
=
{
styles
.
infoIcon
}
>
<
InfoIcon
/>
</
div
>
<
span
>
...now we need you to do something
</
span
>
</
div
>
</
div
>
<
div
className
=
{
styles
.
reloadButton
}
>
<
PrimaryButton
isDisabled
=
{
moreOptionExpanded
}
onClick
=
{
reloadPage
}
>
Reload
</
PrimaryButton
>
</
div
>
<
div
className
=
{
styles
.
generalErrorBottomMessage
}
>
<
div
className
=
{
styles
.
moreOptions
}
>
<
ShowHide
onClick
=
{
toggleChevron
}
isExpanded
=
{
moreOptionExpanded
}
label
=
"If the site still fails to load"
/>
</
div
>
{
moreOptionExpanded
&&
(
<
div
className
=
{
styles
.
resetOption
}
>
<
div
>
Unfortunately we need to reset everything
</
div
>
<
div
>
All your species, configuration of views
&
history will be
lost
</
div
>
<
PrimaryButton
onClick
=
{
resetPage
}
>
Reset the site
</
PrimaryButton
>
</
div
>
)
}
</
div
>
</
div
>
</
div
>
</
section
>
)
;
</
section
>
);
}
;
export
default
GeneralErrorScreen
;
src/ensembl/src/shared/helpers/urlHelper.ts
View file @
c5089410
...
...
@@ -16,6 +16,7 @@
import
queryString
from
'
query-string
'
;
export
const
home
=
()
=>
'
/
'
;
export
const
speciesSelector
=
()
=>
'
/species-selector
'
;
export
const
customDownload
=
()
=>
'
/custom-download
'
;
...
...
src/ensembl/static/img/shared/icon_alert_circle.svg
0 → 100644
View file @
c5089410
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
version=
"1.1"
id=
"alert_x5F_circle"
xmlns=
"http://www.w3.org/2000/svg"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
x=
"0px"
y=
"0px"
viewBox=
"0 0 32 32"
style=
"enable-background:new 0 0 32 32;"
xml:space=
"preserve"
>
<path
d=
"M16,31C7.7,31,1,24.3,1,16S7.7,1,16,1s15,6.7,15,15S24.3,31,16,31z M18.2,13.7v-1.9V7.3c0-0.5-0.4-0.8-0.8-0.8h-2.9
c-0.5,0-0.8,0.4-0.8,0.8v4.5v1.9v3.2c0,0.5,0.4,0.8,0.8,0.8h2.9c0.5,0,0.8-0.4,0.8-0.8V13.7z M16,20.3c-1.4,0-2.6,1.2-2.6,2.6
s1.2,2.6,2.6,2.6s2.6-1.1,2.6-2.6S17.4,20.3,16,20.3z"
/>
</svg>
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