From 67757566237f4548fac9e1c2267777662572b151 Mon Sep 17 00:00:00 2001 From: Martha Cryan Date: Mon, 24 Mar 2025 13:47:21 -0500 Subject: [PATCH 1/9] Add initial support for collapsing devtools --- .../src/components/error/icons/Collapse.svg | 4 + .../src/components/error/icons/Expand.svg | 4 + .../src/components/error/menu/DebugMenu.css | 2 +- .../components/error/menu/DebugMenu.react.js | 139 ++++++++++-------- 4 files changed, 85 insertions(+), 64 deletions(-) create mode 100644 dash/dash-renderer/src/components/error/icons/Collapse.svg create mode 100644 dash/dash-renderer/src/components/error/icons/Expand.svg diff --git a/dash/dash-renderer/src/components/error/icons/Collapse.svg b/dash/dash-renderer/src/components/error/icons/Collapse.svg new file mode 100644 index 0000000000..6461c5d7d6 --- /dev/null +++ b/dash/dash-renderer/src/components/error/icons/Collapse.svg @@ -0,0 +1,4 @@ + + + + diff --git a/dash/dash-renderer/src/components/error/icons/Expand.svg b/dash/dash-renderer/src/components/error/icons/Expand.svg new file mode 100644 index 0000000000..e52c5b556b --- /dev/null +++ b/dash/dash-renderer/src/components/error/icons/Expand.svg @@ -0,0 +1,4 @@ + + + + diff --git a/dash/dash-renderer/src/components/error/menu/DebugMenu.css b/dash/dash-renderer/src/components/error/menu/DebugMenu.css index 1b993eba9a..31b645b413 100644 --- a/dash/dash-renderer/src/components/error/menu/DebugMenu.css +++ b/dash/dash-renderer/src/components/error/menu/DebugMenu.css @@ -117,7 +117,7 @@ right: 8px; display: flex; color: black; - flex-direction: column; + flex-direction: row; font-family: Verdana, sans-serif !important; font-size: 14px; justify-content: center; diff --git a/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js b/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js index 4be953585a..49396fa390 100644 --- a/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js +++ b/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, {useState} from 'react'; import PropTypes from 'prop-types'; import {concat} from 'ramda'; @@ -9,6 +9,8 @@ import ClockIcon from '../icons/ClockIcon.svg'; import ErrorIcon from '../icons/ErrorIcon.svg'; import GraphIcon from '../icons/GraphIcon.svg'; import OffIcon from '../icons/OffIcon.svg'; +import Collapse from '../icons/Collapse.svg'; +import Expand from '../icons/Expand.svg'; import {VersionInfo} from './VersionInfo.react'; import {CallbackGraphContainer} from '../CallbackGraph/CallbackGraphContainer.react'; import {FrontEndErrorContainer} from '../FrontEnd/FrontEndErrorContainer.react'; @@ -16,6 +18,15 @@ import {FrontEndErrorContainer} from '../FrontEnd/FrontEndErrorContainer.react'; const classes = (base, variant, variant2) => `${base} ${base}--${variant}` + (variant2 ? ` ${base}--${variant2}` : ''); +const isCollapsed = () => { + try { + return localStorage.getItem('dash_debug_menu_collapsed') === 'true'; + } catch (e) { + // If localStorage is not available, default to false + return false; + } +} + const MenuContent = ({ hotReload, connected, @@ -81,71 +92,73 @@ const MenuContent = ({ ); }; -class DebugMenu extends Component { - constructor(props) { - super(props); +const DebugMenu = ({error, hotReload, config, children}) => { + const [popup, setPopup] = useState('errors'); + const [collapsed, setCollapsed] = useState(isCollapsed); + + const errCount = error.frontEnd.length + error.backEnd.length; + const connected = error.backEndConnected; + + const toggleErrors = () => { + setPopup(popup == 'errors' ? null : 'errors'); + }; + + const toggleCallbackGraph = () => { + setPopup(popup == 'callbackGraph' ? null : 'callbackGraph') + }; + + const errors = concat(error.frontEnd, error.backEnd); + + const popupContent = ( +
+ {popup == 'callbackGraph' ? ( + + ) : undefined} + {popup == 'errors' && errCount > 0 ? ( + + ) : undefined} +
+ ); - this.state = { - opened: false, - popup: 'errors' - }; - } + const menuContent = ( + collapsed ? + undefined : + + ); - render() { - const {popup} = this.state; - const {error, hotReload, config} = this.props; - const errCount = error.frontEnd.length + error.backEnd.length; - const connected = error.backEndConnected; - - const toggleErrors = () => { - this.setState({popup: popup == 'errors' ? null : 'errors'}); - }; - - const toggleCallbackGraph = () => { - this.setState({ - popup: popup == 'callbackGraph' ? null : 'callbackGraph' - }); - }; - - const errors = concat(error.frontEnd, error.backEnd); - - const popupContent = ( -
- {popup == 'callbackGraph' ? ( - - ) : undefined} - {popup == 'errors' && errCount > 0 ? ( - - ) : undefined} -
- ); - - const menuContent = ( - - ); - - return ( -
-
- {popupContent} - {menuContent} -
- {this.props.children} + return ( +
+
+ {popupContent} + {menuContent} +
- ); - } + {children} +
+ ); } DebugMenu.propTypes = { From 16ec5927b9b80e8b158b3053a0f4c5454c77527f Mon Sep 17 00:00:00 2001 From: Martha Cryan Date: Mon, 24 Mar 2025 17:23:27 -0500 Subject: [PATCH 2/9] Add rotation animation --- .../CallbackGraph/CallbackGraphContainer.css | 3 +- .../error/FrontEnd/FrontEndError.css | 5 +-- .../src/components/error/icons/Collapse.svg | 4 -- .../src/components/error/icons/Expand.svg | 5 +-- .../src/components/error/menu/DebugMenu.css | 35 +++++++++++------ .../components/error/menu/DebugMenu.react.js | 38 +++++++++++-------- 6 files changed, 49 insertions(+), 41 deletions(-) delete mode 100644 dash/dash-renderer/src/components/error/icons/Collapse.svg diff --git a/dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css b/dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css index 51c73586de..347ee515ab 100644 --- a/dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css +++ b/dash/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css @@ -8,8 +8,7 @@ background: #ffffff; display: inline-block; /* shadow-1 */ - box-shadow: - 0px 6px 16px rgba(80, 103, 132, 0.165), + box-shadow: 0px 6px 16px rgba(80, 103, 132, 0.165), 0px 2px 6px rgba(80, 103, 132, 0.12), 0px 0px 1px rgba(80, 103, 132, 0.32); } diff --git a/dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.css b/dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.css index f158c3706b..8056013ad8 100644 --- a/dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.css +++ b/dash/dash-renderer/src/components/error/FrontEnd/FrontEndError.css @@ -124,7 +124,7 @@ } .dash-be-error__str { - background-color: #F5F6FA; + background-color: #f5f6fa; min-width: 386px; width: 100%; overflow: auto; @@ -177,8 +177,7 @@ background-color: white; overflow: auto; border-radius: 6px; - box-shadow: - 0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07), + box-shadow: 0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07), 0px 1.9px 4px 0px rgba(0, 0, 0, 0.05), 0px 4.5px 10px 0px rgba(0, 0, 0, 0.05); } diff --git a/dash/dash-renderer/src/components/error/icons/Collapse.svg b/dash/dash-renderer/src/components/error/icons/Collapse.svg deleted file mode 100644 index 6461c5d7d6..0000000000 --- a/dash/dash-renderer/src/components/error/icons/Collapse.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/dash/dash-renderer/src/components/error/icons/Expand.svg b/dash/dash-renderer/src/components/error/icons/Expand.svg index e52c5b556b..4e2b81b10f 100644 --- a/dash/dash-renderer/src/components/error/icons/Expand.svg +++ b/dash/dash-renderer/src/components/error/icons/Expand.svg @@ -1,4 +1 @@ - - - - + diff --git a/dash/dash-renderer/src/components/error/menu/DebugMenu.css b/dash/dash-renderer/src/components/error/menu/DebugMenu.css index 31b645b413..e5c5a1b7ed 100644 --- a/dash/dash-renderer/src/components/error/menu/DebugMenu.css +++ b/dash/dash-renderer/src/components/error/menu/DebugMenu.css @@ -26,6 +26,12 @@ border-radius: 0px; letter-spacing: normal; gap: 6px; + cursor: pointer; + border: none; + background: none; + outline: none; + display: flex; + align-items: center; } .dash-debug-menu__popup { @@ -52,8 +58,7 @@ align-self: flex-end; position: relative; /* Shadow/Small */ - box-shadow: - 0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07), + box-shadow: 0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07), 0px 1.9px 4px 0px rgba(0, 0, 0, 0.05), 0px 4.5px 10px 0px rgba(0, 0, 0, 0.05); } @@ -113,8 +118,8 @@ transition: 0.3s; box-sizing: border-box; position: fixed; - bottom: 8px; - right: 8px; + bottom: -1px; + right: -1px; display: flex; color: black; flex-direction: row; @@ -123,11 +128,10 @@ justify-content: center; align-items: center; z-index: 10000; - border-radius: 5px; - padding: 5px; + border-radius: 5px 0 0 0; + padding: 15px 0; background-color: #f5f6fa; - box-shadow: - 0px 0.8px 0.8px 0px rgba(0, 0, 0, 0.04), + box-shadow: 0px 0.8px 0.8px 0px rgba(0, 0, 0, 0.04), 0px 2.3px 2px 0px rgba(0, 0, 0, 0.03); border: 1px solid rgba(0, 24, 102, 0.1); } @@ -153,6 +157,14 @@ z-index: 1200; } +.dash-debug-menu__toggle { + color: #7f4bc4; + transition: 0.3s; +} +.dash-debug-menu__toggle--expanded { + transform: rotate(180deg); +} + .dash-debug-menu__status { display: flex; align-items: center; @@ -162,7 +174,8 @@ .dash-debug-menu__content { display: flex; align-items: stretch; - margin: 10px; + margin-left: 15px; + transition: all 0.5s ease; } .dash-debug-menu__version { @@ -186,7 +199,6 @@ justify-content: center; align-items: center; transition: background-color 0.2s; - cursor: pointer; font-family: Verdana, sans-serif !important; font-weight: bold; color: black; @@ -213,8 +225,7 @@ right: 29px; z-index: 10002; cursor: pointer; - box-shadow: - 0px 0px 1px rgba(0, 0, 0, 0.25), + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 1px 3px rgba(162, 177, 198, 0.32); border-radius: 32px; background-color: white; diff --git a/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js b/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js index 49396fa390..787d133b37 100644 --- a/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js +++ b/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js @@ -9,7 +9,6 @@ import ClockIcon from '../icons/ClockIcon.svg'; import ErrorIcon from '../icons/ErrorIcon.svg'; import GraphIcon from '../icons/GraphIcon.svg'; import OffIcon from '../icons/OffIcon.svg'; -import Collapse from '../icons/Collapse.svg'; import Expand from '../icons/Expand.svg'; import {VersionInfo} from './VersionInfo.react'; import {CallbackGraphContainer} from '../CallbackGraph/CallbackGraphContainer.react'; @@ -25,7 +24,7 @@ const isCollapsed = () => { // If localStorage is not available, default to false return false; } -} +}; const MenuContent = ({ hotReload, @@ -88,6 +87,10 @@ const MenuContent = ({ Server <_StatusIcon className='dash-debug-menu__icon' />
+
); }; @@ -104,16 +107,14 @@ const DebugMenu = ({error, hotReload, config, children}) => { }; const toggleCallbackGraph = () => { - setPopup(popup == 'callbackGraph' ? null : 'callbackGraph') + setPopup(popup == 'callbackGraph' ? null : 'callbackGraph'); }; const errors = concat(error.frontEnd, error.backEnd); const popupContent = (
- {popup == 'callbackGraph' ? ( - - ) : undefined} + {popup == 'callbackGraph' ? : undefined} {popup == 'errors' && errCount > 0 ? ( {
); - const menuContent = ( - collapsed ? - undefined : + const menuContent = collapsed ? undefined : ( {
{popupContent} {menuContent} -
{children} ); -} +}; DebugMenu.propTypes = { children: PropTypes.object, From 4c6d2dfad765a3694e6324a17eed061684705a95 Mon Sep 17 00:00:00 2001 From: Martha Cryan Date: Mon, 24 Mar 2025 17:27:18 -0500 Subject: [PATCH 3/9] Move toggle collapse logic into function --- .../components/error/menu/DebugMenu.react.js | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js b/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js index 787d133b37..7fd03a3e9e 100644 --- a/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js +++ b/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js @@ -110,6 +110,15 @@ const DebugMenu = ({error, hotReload, config, children}) => { setPopup(popup == 'callbackGraph' ? null : 'callbackGraph'); }; + const toggleCollapsed = () => { + setCollapsed(!collapsed); + try { + localStorage.setItem('dash_debug_menu_collapsed', !collapsed); + } catch (e) { + // If localStorage is not available, do nothing + } + }; + const errors = concat(error.frontEnd, error.backEnd); const popupContent = ( @@ -143,17 +152,7 @@ const DebugMenu = ({error, hotReload, config, children}) => { {popupContent} {menuContent} {children} From b65b07fdbe639ae9eff365b351a402035b7bf0cf Mon Sep 17 00:00:00 2001 From: Martha Cryan Date: Tue, 25 Mar 2025 16:05:01 -0500 Subject: [PATCH 6/9] Add sliding animation for collapse behavior --- .../src/components/error/menu/DebugMenu.css | 14 +++++++------- .../src/components/error/menu/DebugMenu.react.js | 7 ++++++- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/dash/dash-renderer/src/components/error/menu/DebugMenu.css b/dash/dash-renderer/src/components/error/menu/DebugMenu.css index af02e7fa4c..6930a85830 100644 --- a/dash/dash-renderer/src/components/error/menu/DebugMenu.css +++ b/dash/dash-renderer/src/components/error/menu/DebugMenu.css @@ -25,6 +25,7 @@ font-size: 14px; border-radius: 0px; letter-spacing: normal; + white-space: nowrap; gap: 6px; cursor: pointer; border: none; @@ -125,7 +126,7 @@ flex-direction: row; font-family: Verdana, sans-serif !important; font-size: 14px; - justify-content: center; + justify-content: flex-end; align-items: center; z-index: 10000; border-radius: 5px 0 0 0; @@ -135,12 +136,11 @@ 0px 2.3px 2px 0px rgba(0, 0, 0, 0.03); border: 1px solid rgba(0, 24, 102, 0.1); } -.dash-debug-menu__outer--closed { - height: 60px; - width: 60px; - bottom: 37px; - right: 37px; - padding: 0; +.dash-debug-menu__outer.dash-debug-menu__outer--collapsed { + width: 50px; +} +.dash-debug-menu__outer.dash-debug-menu__outer--expanded { + width: 682px; } .dash-debug-menu__upgrade-tooltip { diff --git a/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js b/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js index 4762d1732c..e978ef1d4a 100644 --- a/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js +++ b/dash/dash-renderer/src/components/error/menu/DebugMenu.react.js @@ -154,7 +154,12 @@ const DebugMenu = ({error, hotReload, config, children}) => { return (
-
+
{popupContent} {menuContent}