Skip to content

Commit cd09ee4

Browse files
marthacryanmarthacryan
committed
Address review
1 parent 3172428 commit cd09ee4

File tree

4 files changed

+155
-140
lines changed

4 files changed

+155
-140
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,7 @@
193193
max-width: 800px;
194194
max-height: calc(100vh - 125px);
195195
margin-bottom: 4px;
196+
font-family: Verdana;
196197
background-color: white;
197198
overflow: auto;
198199
border-radius: 6px;
@@ -204,7 +205,6 @@
204205
height: 32px;
205206
display: flex;
206207
justify-content: flex-start;
207-
font-family: Inter;
208208
font-size: 14px;
209209
align-items: center;
210210
position: relative;
@@ -225,7 +225,7 @@
225225
border-radius: 2px;
226226
margin-bottom: 15px;
227227
border: 1px solid #0018661a;
228-
font-family: Menlo;
228+
font-family: Courier;
229229
font-size: 12.6px;
230230
}
231231

‎dash/dash-renderer/src/components/error/menu/DebugMenu.react.js

Lines changed: 4 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -12,120 +12,24 @@ import OffIcon from '../icons/OffIcon.svg';
1212

1313
import {CallbackGraphContainer} from '../CallbackGraph/CallbackGraphContainer.react';
1414
import {FrontEndErrorContainer} from '../FrontEnd/FrontEndErrorContainer.react';
15+
import {VersionInfo} from './VersionInfo.react';
1516

1617
const classes = (base, variant, variant2) =>
1718
`${base} ${base}--${variant}` + (variant2 ? ` ${base}--${variant2}` : '');
18-
const DAY_IN_MS = 86400000;
19-
20-
function compareVersions(v1, v2) {
21-
const v1Parts = v1.split('.').map(Number);
22-
const v2Parts = v2.split('.').map(Number);
23-
24-
for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
25-
const part1 = v1Parts[i] || 0;
26-
const part2 = v2Parts[i] || 0;
27-
28-
if (part1 > part2) return 1;
29-
if (part1 < part2) return -1;
30-
}
31-
32-
return 0;
33-
}
34-
35-
function shouldShowUpgradeNotification(currentDashVersion, newDashVersion) {
36-
const lastDismissed = localStorage.getItem('lastDismissed');
37-
const lastDismissedVersion = localStorage.getItem('lastDismissedVersion');
38-
39-
if (
40-
currentDashVersion == newDashVersion ||
41-
localStorage.getItem('noNotifications') ||
42-
newDashVersion === undefined
43-
) {
44-
return false;
45-
} else if (
46-
lastDismissed &&
47-
Date.now() - Number(lastDismissed) > DAY_IN_MS
48-
) {
49-
return true;
50-
} else if (
51-
lastDismissedVersion &&
52-
!lastDismissed &&
53-
compareVersions(
54-
localStorage.getItem('lastDismissedVersion'),
55-
newDashVersion
56-
) < 0
57-
) {
58-
return true;
59-
} else {
60-
return !lastDismissed && !lastDismissedVersion;
61-
}
62-
}
63-
64-
async function requestDashVersionInfo(currentDashVersion) {
65-
return fetch('https://dash-version.plotly.com:8080/sample', {
66-
method: 'POST',
67-
body: JSON.stringify({
68-
dash_version: currentDashVersion
69-
}),
70-
headers: {
71-
'Content-Type': 'application/json'
72-
}
73-
}).then(response => response.json());
74-
}
7519

7620
class DebugMenu extends Component {
7721
constructor(props) {
7822
super(props);
79-
const {config} = props;
80-
81-
requestDashVersionInfo(config.dash_version).then(body => {
82-
this.setState({...this.state, upgradeInfo: body});
83-
});
8423

8524
this.state = {
8625
opened: false,
87-
popup: 'errors',
88-
upgradeInfo: []
26+
popup: 'errors'
8927
};
90-
91-
// Close the upgrade tooltip if the user clicks outside of it
92-
document.addEventListener('click', e => {
93-
if (
94-
this.state.upgradeTooltipOpened &&
95-
!e.target.matches(
96-
'.dash-debug-menu__version, .dash-debug-menu__version *'
97-
)
98-
) {
99-
this.setState({upgradeTooltipOpened: false});
100-
}
101-
});
10228
}
10329

10430
render() {
105-
const {popup, upgradeInfo, upgradeTooltipOpened} = this.state;
31+
const {popup} = this.state;
10632
const {error, hotReload, config} = this.props;
107-
const newDashVersion = upgradeInfo[0]
108-
? upgradeInfo[0].version
109-
: undefined;
110-
111-
const setDontShowAgain = () => {
112-
// Set local storage to record the last dismissed notification
113-
localStorage.setItem('noNotifications', true);
114-
this.setState({upgradeTooltipOpened: false});
115-
};
116-
117-
const setRemindMeLater = () => {
118-
// Set local storage to record the last dismissed notification
119-
localStorage.setItem('lastDismissed', Date.now());
120-
this.setState({upgradeTooltipOpened: false});
121-
};
122-
123-
const setSkipThisVersion = () => {
124-
// Set local storage to record the last dismissed version
125-
localStorage.setItem('lastDismissedVersion', newDashVersion);
126-
this.setState({upgradeTooltipOpened: false});
127-
};
128-
12933
const errCount = error.frontEnd.length + error.backEnd.length;
13034
const connected = error.backEndConnected;
13135

@@ -139,12 +43,6 @@ class DebugMenu extends Component {
13943
});
14044
};
14145

142-
const toggleShowUpgradeTooltip = () => {
143-
this.setState({
144-
upgradeTooltipOpened: !upgradeTooltipOpened
145-
});
146-
};
147-
14846
const errors = concat(error.frontEnd, error.backEnd);
14947

15048
const _StatusIcon = hotReload
@@ -184,39 +82,7 @@ class DebugMenu extends Component {
18482
Callbacks
18583
</button>
18684
<div className='dash-debug-menu__divider' />
187-
<div className='dash-debug-menu__version'>
188-
{this.state.upgradeTooltipOpened ? (
189-
<div className='dash-debug-menu__upgrade-tooltip'>
190-
<a
191-
target='_blank'
192-
href='https://dash.plotly.com/installation'
193-
>
194-
Read details
195-
</a>
196-
<button onClick={setSkipThisVersion}>
197-
Skip this version
198-
</button>
199-
<button onClick={setRemindMeLater}>
200-
Remind me tomorrow
201-
</button>
202-
<button onClick={setDontShowAgain}>
203-
Silence all version notifications
204-
</button>
205-
</div>
206-
) : null}
207-
<span>v{config.dash_version}</span>
208-
{shouldShowUpgradeNotification(
209-
config.dash_version,
210-
newDashVersion
211-
) ? (
212-
<button
213-
className='dash-debug-menu__upgrade-button'
214-
onClick={toggleShowUpgradeTooltip}
215-
>
216-
Dash update available - v{newDashVersion}
217-
</button>
218-
) : null}
219-
</div>
85+
<VersionInfo config={config} />
22086
<div className='dash-debug-menu__divider' />
22187
<div className='dash-debug-menu__status'>
22288
Server

‎dash/dash-renderer/src/components/error/menu/VersionInfo.react.js

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import React, {useEffect, useState} from 'react';
2+
3+
const DAY_IN_MS = 86400000;
4+
5+
function compareVersions(v1, v2) {
6+
const v1Parts = v1.split('.').map(Number);
7+
const v2Parts = v2.split('.').map(Number);
8+
9+
for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
10+
const part1 = v1Parts[i] || 0;
11+
const part2 = v2Parts[i] || 0;
12+
13+
if (part1 > part2) return 1;
14+
if (part1 < part2) return -1;
15+
}
16+
17+
return 0;
18+
}
19+
20+
async function requestDashVersionInfo(currentDashVersion, dashVersionUrl) {
21+
return fetch(dashVersionUrl, {
22+
method: 'POST',
23+
body: JSON.stringify({
24+
dash_version: currentDashVersion
25+
}),
26+
headers: {
27+
'Content-Type': 'application/json'
28+
}
29+
}).then(response => response.json());
30+
}
31+
32+
function shouldShowUpgradeNotification(currentDashVersion, newDashVersion) {
33+
const lastDismissed = localStorage.getItem('lastDismissed');
34+
const lastDismissedVersion = localStorage.getItem('lastDismissedVersion');
35+
36+
if (
37+
currentDashVersion == newDashVersion ||
38+
localStorage.getItem('noNotifications') ||
39+
newDashVersion === undefined
40+
) {
41+
return false;
42+
} else if (
43+
lastDismissed &&
44+
Date.now() - Number(lastDismissed) > DAY_IN_MS
45+
) {
46+
return true;
47+
} else if (
48+
lastDismissedVersion &&
49+
!lastDismissed &&
50+
compareVersions(
51+
localStorage.getItem('lastDismissedVersion'),
52+
newDashVersion
53+
) < 0
54+
) {
55+
return true;
56+
} else {
57+
return !lastDismissed && !lastDismissedVersion;
58+
}
59+
}
60+
61+
export const VersionInfo = ({config}) => {
62+
const [upgradeInfo, setUpgradeInfo] = useState([]);
63+
const [upgradeTooltipOpened, setUpgradeTooltipOpened] = useState(false);
64+
65+
const newDashVersion = upgradeInfo[0] ? upgradeInfo[0].version : undefined;
66+
67+
const setDontShowAgain = () => {
68+
// Set local storage to record the last dismissed notification
69+
localStorage.setItem('noNotifications', true);
70+
setUpgradeTooltipOpened(false);
71+
};
72+
73+
const setRemindMeLater = () => {
74+
// Set local storage to record the last dismissed notification
75+
localStorage.setItem('lastDismissed', Date.now());
76+
setUpgradeTooltipOpened(false);
77+
};
78+
79+
const setSkipThisVersion = () => {
80+
// Set local storage to record the last dismissed version
81+
localStorage.setItem('lastDismissedVersion', newDashVersion);
82+
setUpgradeTooltipOpened(false);
83+
};
84+
85+
useEffect(() => {
86+
requestDashVersionInfo(
87+
config.dash_version,
88+
config.dash_version_url
89+
).then(body => {
90+
setUpgradeInfo(body);
91+
});
92+
93+
const hideUpgradeTooltip = e => {
94+
if (
95+
upgradeTooltipOpened &&
96+
!e.target.matches(
97+
'.dash-debug-menu__version, .dash-debug-menu__version *'
98+
)
99+
) {
100+
setUpgradeTooltipOpened(false);
101+
}
102+
};
103+
// Close the upgrade tooltip if the user clicks outside of it
104+
document.addEventListener('click', hideUpgradeTooltip);
105+
106+
return () => document.removeEventListener('click', hideUpgradeTooltip);
107+
}, []);
108+
109+
return (
110+
<div className='dash-debug-menu__version'>
111+
{upgradeTooltipOpened ? (
112+
<div className='dash-debug-menu__upgrade-tooltip'>
113+
<a
114+
target='_blank'
115+
href='https://dash.plotly.com/installation'
116+
>
117+
Read details
118+
</a>
119+
<button onClick={setSkipThisVersion}>
120+
Skip this version
121+
</button>
122+
<button onClick={setRemindMeLater}>
123+
Remind me tomorrow
124+
</button>
125+
<button onClick={setDontShowAgain}>
126+
Silence all version notifications
127+
</button>
128+
</div>
129+
) : null}
130+
<span>v{config.dash_version}</span>
131+
{shouldShowUpgradeNotification(
132+
config.dash_version,
133+
newDashVersion
134+
) ? (
135+
<button
136+
className='dash-debug-menu__upgrade-button'
137+
onClick={() =>
138+
setUpgradeTooltipOpened(!upgradeTooltipOpened)
139+
}
140+
>
141+
Dash update available - v{newDashVersion}
142+
</button>
143+
) : null}
144+
</div>
145+
);
146+
};

‎dash/dash.py

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,8 @@
124124
_ID_STORE = "_pages_store"
125125
_ID_DUMMY = "_pages_dummy"
126126

127+
DASH_VERSION_URL = "https://dash-version.plotly.com:8080/sample"
128+
127129
# Handles the case in a newly cloned environment where the components are not yet generated.
128130
try:
129131
page_container = html.Div(
@@ -767,6 +769,7 @@ def _config(self):
767769
"children_props": ComponentRegistry.children_props,
768770
"serve_locally": self.config.serve_locally,
769771
"dash_version": __version__,
772+
"dash_version_url": DASH_VERSION_URL,
770773
}
771774
if not self.config.serve_locally:
772775
config["plotlyjs_url"] = self._plotlyjs_url

0 commit comments

Comments
 (0)