Skip to content

Commit 7abf17e

Browse files
marthacryanmarthacryan
authored
Merge pull request #3121 from plotly/update-notification
Restyle developer tools UI and add a notification for new dash versions
2 parents 3541ee4 + 0c3c400 commit 7abf17e

23 files changed

+707
-468
lines changed

‎dash/dash-renderer/src/components/core/Toolbar.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,12 @@
66
text-align: center;
77
z-index: 9999;
88
background-color: rgba(255, 255, 255, 0.9);
9-
109
}
11-
._dash-undo-redo>div {
10+
._dash-undo-redo > div {
1211
position: relative;
1312
}
1413
._dash-undo-redo-link {
15-
color: #0074D9;
14+
color: #0074d9;
1615
cursor: pointer;
1716
margin-left: 10px;
1817
margin-right: 10px;

‎dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
.dash-callback-dag--container {
22
border-radius: 4px;
3-
position: fixed;
4-
bottom: 165px;
5-
right: 16px;
63
width: 80vw;
7-
height: calc(100vh - 180px);
8-
overflow: auto;
4+
position: relative;
5+
height: calc(100vh - 75px);
6+
overflow: hidden;
97
box-sizing: border-box;
108
background: #ffffff;
119
display: inline-block;
1210
/* shadow-1 */
13-
box-shadow: 0px 6px 16px rgba(80, 103, 132, 0.165),
11+
box-shadow:
12+
0px 6px 16px rgba(80, 103, 132, 0.165),
1413
0px 2px 6px rgba(80, 103, 132, 0.12),
1514
0px 0px 1px rgba(80, 103, 132, 0.32);
1615
}
@@ -25,9 +24,9 @@
2524
max-height: 50%;
2625
overflow: auto;
2726
box-sizing: border-box;
28-
background: rgba(255,255,255,0.9);
27+
background: rgba(255, 255, 255, 0.9);
2928
border: 2px solid #ccc;
30-
font-family: "Arial", sans-serif;
29+
font-family: Verdana, sans-serif;
3130
}
3231

3332
.dash-callback-dag--message {
@@ -37,11 +36,11 @@
3736
align-items: center;
3837
height: 100%;
3938
line-height: 2em;
40-
font-family: "Arial", sans-serif;
39+
font-family: Verdana, sans-serif;
4140
}
4241

4342
.dash-callback-dag--layoutSelector {
4443
position: absolute;
45-
top: 10px;
46-
right: 10px;
44+
top: 3px;
45+
right: 3px;
4746
}

‎dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainerStylesheet.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const stylesheet = [
33
selector: '*',
44
style: {
55
'font-size': 12,
6-
'font-family': '"Arial", sans-serif'
6+
'font-family': 'Verdana, sans-serif'
77
}
88
},
99

‎dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.css‎

Lines changed: 111 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
11
.error-container {
2-
margin-top: 10px;
2+
padding: 0 10px;
33
}
44

55
.dash-fe-error__icon-x {
66
position: absolute;
77
right: 0;
88
top: 0;
9-
color: #B9C2CE;
9+
color: #b9c2ce;
1010
font-size: 20px;
1111
cursor: pointer;
12-
margin-right: 10px
12+
margin-right: 10px;
1313
}
1414

15-
.dash-fe-error__icon-x:hover
16-
{
17-
color:#a1a9b5;
15+
.dash-fe-error__icon-x:hover {
16+
color: #a1a9b5;
1817
}
1918

20-
2119
.dash-fe-errors {
2220
min-width: 386px;
2321
max-width: 650px;
@@ -44,13 +42,6 @@
4442
height: 28px;
4543
margin: 0px 8px;
4644
}
47-
.dash-fe-error-top {
48-
height: 20px;
49-
display: flex;
50-
justify-content: space-between;
51-
width: 100%;
52-
cursor: pointer;
53-
}
5445
.dash-fe-error-top__group:first-child {
5546
/*
5647
* 77% is the maximum space allowed based off of the other elements
@@ -67,11 +58,12 @@
6758
margin: 0px;
6859
margin-left: 5px;
6960
padding: 0px;
70-
font-size: 14px;
61+
font-size: 12.6px;
7162
display: inline-block;
7263
text-overflow: ellipsis;
7364
white-space: nowrap;
7465
overflow: hidden;
66+
line-height: 20px;
7567
}
7668
.dash-fe-error__timestamp {
7769
margin-right: 20px;
@@ -119,7 +111,7 @@
119111
.dash-fe-error__curved-bottom {
120112
border-radius-bottom-left: 4px;
121113
border-radius-bottom-right: 4px;
122-
background-color: #FFEFEF;
114+
background-color: #ffefef;
123115
}
124116

125117
.dash-be-error__st {
@@ -139,3 +131,106 @@
139131
display: inline-block;
140132
white-space: pre-wrap;
141133
}
134+
135+
.dash-error-menu {
136+
max-width: 50%;
137+
max-height: 60%;
138+
display: contents;
139+
font-family: monospace;
140+
font-size: 14px;
141+
font-variant-ligatures: common-ligatures;
142+
color: rgb(50, 50, 50);
143+
}
144+
145+
.dash-error-card {
146+
box-sizing: border-box;
147+
display: inline-block;
148+
/* shadow-1 */
149+
border-radius: 4px;
150+
animation: dash-error-card-animation 0.5s;
151+
padding: 24px;
152+
text-align: left;
153+
background: transparent;
154+
width: 100%;
155+
}
156+
.dash-error-card--alerts-tray {
157+
position: absolute;
158+
top: -300px;
159+
left: -1px;
160+
animation: none;
161+
box-shadow: none;
162+
border: 1px solid #ececec;
163+
border-bottom: 0;
164+
border-bottom-left-radius: 0px;
165+
border-bottom-right-radius: 0px;
166+
width: 422px;
167+
}
168+
.dash-error-card--container {
169+
padding: 16px;
170+
width: 600px;
171+
max-width: 800px;
172+
margin-bottom: 4px;
173+
background-color: white;
174+
overflow: auto;
175+
border-radius: 6px;
176+
box-shadow:
177+
0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07),
178+
0px 1.9px 4px 0px rgba(0, 0, 0, 0.05),
179+
0px 4.5px 10px 0px rgba(0, 0, 0, 0.05);
180+
}
181+
182+
.dash-error-card__topbar {
183+
width: 100%;
184+
height: 32px;
185+
display: flex;
186+
justify-content: flex-start;
187+
font-size: 14px;
188+
align-items: center;
189+
position: relative;
190+
padding-bottom: 14px;
191+
font-weight: 700;
192+
}
193+
.dash-error-card__message {
194+
font-size: 14px;
195+
}
196+
197+
.dash-error-card__message > strong {
198+
color: #ff4500;
199+
}
200+
201+
.dash-error-card__content {
202+
box-sizing: border-box;
203+
background-color: white;
204+
border-radius: 2px;
205+
margin-bottom: 15px;
206+
border: 1px solid #0018661a;
207+
font-family: Courier;
208+
font-size: 12.6px;
209+
}
210+
211+
.dash-fe-error-item {
212+
background: #ffffff;
213+
border-radius: 2px;
214+
display: flex;
215+
justify-content: space-between;
216+
align-items: center;
217+
padding: 8px;
218+
cursor: pointer;
219+
}
220+
221+
@keyframes dash-error-card-animation {
222+
from {
223+
opacity: 0;
224+
-webkit-transform: scale(1.1);
225+
-moz-transform: scale(1.1);
226+
-ms-transform: scale(1.1);
227+
transform: scale(1.1);
228+
}
229+
to {
230+
opacity: 1;
231+
-webkit-transform: scale(1);
232+
-moz-transform: scale(1);
233+
-ms-transform: scale(1);
234+
transform: scale(1);
235+
}
236+
}

‎dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js‎

Lines changed: 61 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {connect} from 'react-redux';
22
import './FrontEndError.css';
3-
import {Component} from 'react';
3+
import {Component, useRef, useState, useEffect} from 'react';
44
import CollapseIcon from '../icons/CollapseIcon.svg';
55
import PropTypes from 'prop-types';
66
import '../Percy.css';
@@ -27,11 +27,10 @@ class FrontEndError extends Component {
2727
/* eslint-disable no-inline-comments */
2828
const errorHeader = (
2929
<div
30-
className='dash-fe-error-top test-devtools-error-toggle'
30+
className='dash-fe-error-item test-devtools-error-toggle'
3131
onClick={() => this.setState({collapsed: !collapsed})}
3232
>
3333
<span className='dash-fe-error-top__group'>
34-
⛑️
3534
<span className='dash-fe-error__title'>
3635
{e.error.message || 'Error'}
3736
</span>
@@ -56,19 +55,69 @@ class FrontEndError extends Component {
5655
</span>
5756
</div>
5857
);
59-
/* eslint-enable no-inline-comments */
6058

61-
return collapsed ? (
62-
<div className='dash-error-card__list-item'>{errorHeader}</div>
63-
) : (
59+
return (
6460
<div className={cardClasses}>
6561
{errorHeader}
66-
<ErrorContent error={e.error} />
62+
{!collapsed && <ErrorContent error={e.error} />}
6763
</div>
6864
);
6965
}
7066
}
7167

68+
function BackendError({error, base}) {
69+
const iframeRef = useRef(null);
70+
const [height, setHeight] = useState('500px'); // Default height
71+
72+
useEffect(() => {
73+
const handleMessage = event => {
74+
if (
75+
event.data &&
76+
typeof event.data === 'object' &&
77+
event.data.type === 'IFRAME_HEIGHT'
78+
) {
79+
setHeight(`${event.data.height}px`);
80+
}
81+
};
82+
83+
window.addEventListener('message', handleMessage);
84+
return () => window.removeEventListener('message', handleMessage);
85+
}, []);
86+
87+
return (
88+
<iframe
89+
ref={iframeRef}
90+
srcDoc={error.html
91+
.replace(
92+
'</head>',
93+
`<style type="text/css">${werkzeugCss}</style>
94+
<script>
95+
function sendHeight() {
96+
const height = document.body.scrollHeight;
97+
window.parent.postMessage({ type: "IFRAME_HEIGHT", height }, "*");
98+
}
99+
100+
window.addEventListener("load", sendHeight);
101+
window.addEventListener("resize", sendHeight);
102+
window.addEventListener("click", sendHeight);
103+
</script></head>`
104+
)
105+
.replace('="?__debugger__', `="${base}?__debugger__`)}
106+
style={{
107+
/*
108+
* 67px of padding and margin between this
109+
* iframe and the parent container.
110+
* 67 was determined manually in the
111+
* browser's dev tools.
112+
*/
113+
width: 'calc(600px - 67px)',
114+
border: 'none',
115+
height: height
116+
}}
117+
/>
118+
);
119+
}
120+
72121
const MAX_MESSAGE_LENGTH = 40;
73122
/* eslint-disable no-inline-comments */
74123
function UnconnectedErrorContent({error, base}) {
@@ -115,32 +164,10 @@ function UnconnectedErrorContent({error, base}) {
115164
<div className='dash-be-error__st'>
116165
<div className='dash-backend-error'>
117166
{/* Embed werkzeug debugger in an iframe to prevent
118-
CSS leaking - werkzeug HTML includes a bunch
119-
of CSS on base html elements like `<body/>`
120-
*/}
121-
122-
<iframe
123-
srcDoc={error.html
124-
.replace(
125-
'</head>',
126-
`<style type="text/css">${werkzeugCss}</style></head>`
127-
)
128-
.replace(
129-
'="?__debugger__',
130-
`="${base}?__debugger__`
131-
)}
132-
style={{
133-
/*
134-
* 67px of padding and margin between this
135-
* iframe and the parent container.
136-
* 67 was determined manually in the
137-
* browser's dev tools.
138-
*/
139-
width: 'calc(600px - 67px)',
140-
height: '75vh',
141-
border: 'none'
142-
}}
143-
/>
167+
CSS leaking - werkzeug HTML includes a bunch
168+
of CSS on base html elements like `<body/>`
169+
*/}
170+
<BackendError error={error} base={base} />
144171
</div>
145172
</div>
146173
) : (

0 commit comments

Comments
 (0)