Devtools cloud integration

CHANGELOG.md

@@ -8,12 +8,13 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#3395](https://github.com/plotly/dash/pull/3396) Add position argument to hooks.devtool
 - [#3403](https://github.com/plotly/dash/pull/3403) Add app_context to get_app, allowing to get the current app in routes.
 - [#3407](https://github.com/plotly/dash/pull/3407) Add `hidden` to callback arguments, hiding the callback from appearing in the devtool callback graph.
+- [#3397](https://github.com/plotly/dash/pull/3397) Add optional callbacks, suppressing callback warning for missing component ids for a single callback.
 - [#3424](https://github.com/plotly/dash/pull/3424) Adds support for `Patch` on clientside callbacks class `dash_clientside.Patch`, as well as supporting side updates, eg: (Running, SetProps).
 - [#3347](https://github.com/plotly/dash/pull/3347) Added 'api_endpoint' to `callback` to expose api endpoints at the provided path for use to be executed directly without dash.
+- [#3465](https://github.com/plotly/dash/pull/3465) Plotly cloud integrations, add devtool API, placeholder plotly cloud CLI & publish button, `dash[cloud]` extra dependencies. 
 
 ## Fixed
 - [#3395](https://github.com/plotly/dash/pull/3395) Fix Components added through set_props() cannot trigger related callback functions. Fix [#3316](https://github.com/plotly/dash/issues/3316)
-- [#3397](https://github.com/plotly/dash/pull/3397) Add optional callbacks, suppressing callback warning for missing component ids for a single callback.
 - [#3415](https://github.com/plotly/dash/pull/3415) Fix the error triggered when only a single no_update is returned for client-side callback functions with multiple Outputs. Fix [#3366](https://github.com/plotly/dash/issues/3366)
 - [#3416](https://github.com/plotly/dash/issues/3416) Fix DeprecationWarning in dash/_jupyter.py by migrating from deprecated ipykernel.comm.Comm to comm module
 

dash/_plotly_cli.py

@@ -0,0 +1,15 @@
+import sys
+
+
+def cli():
+    try:
+        from plotly_cloud.cli import main  # pylint: disable=import-outside-toplevel
+
+        main()
+    except ImportError:
+        print(
+            "Plotly cloud is not installed,"
+            " install it with `pip install dash[cloud]` to use the plotly command",
+            file=sys.stderr,
+        )
+        sys.exit(-1)

dash/background_callback/managers/diskcache_manager.py

@@ -287,10 +287,14 @@ async def async_run():
                         }
                     },
                 )
+
             if asyncio.iscoroutine(user_callback_output):
                 user_callback_output = await user_callback_output
             if not errored:
-                cache.set(result_key, user_callback_output)
+                try:
+                    cache.set(result_key, user_callback_output)
+                except Exception as err:  # pylint: disable=broad-except
+                    print(f"Diskcache manager couldn't save output: {err}")
 
         if asyncio.iscoroutinefunction(fn):
             func = partial(ctx.run, async_run)

dash/dash-renderer/src/components/error/menu/DebugMenu.css

@@ -112,7 +112,7 @@
 }
 
 .dash-debug-menu:hover {
-    background-color: #108de4;
+    background-color: #7f4bc4;
 }
 
 .dash-debug-menu__outer {
@@ -208,13 +208,12 @@
     align-items: center;
     transition: background-color 0.2s;
     font-family: Verdana, sans-serif !important;
-    font-weight: bold;
-    color: black;
+    color: #7f4bc4;
 }
 
 .dash-debug-menu__button.dash-debug-menu__button--selected {
     color: #7f4bc4;
-    box-shadow: 0 2px #0071c2;
+    box-shadow: 0 2px #7f4bc4;
 }
 .dash-debug-menu__button.dash-debug-menu__button--selected:hover {
     color: #5806c4;
@@ -253,3 +252,9 @@
     font-size: 14px;
     margin-left: 3px;
 }
+.dash-debug-menu__icon {
+    color: #9ca3af;
+}
+.dash-debug-menu__button:hover .dash-debug-menu__icon {
+    color: #5806c4;
+}

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

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 import {concat} from 'ramda';
+import {useSelector} from 'react-redux';
 
 import './DebugMenu.css';
 
@@ -14,7 +15,8 @@ import {VersionInfo} from './VersionInfo.react';
 import {CallbackGraphContainer} from '../CallbackGraph/CallbackGraphContainer.react';
 import {FrontEndErrorContainer} from '../FrontEnd/FrontEndErrorContainer.react';
 import ExternalWrapper from '../../../wrapper/ExternalWrapper';
-import {useSelector} from 'react-redux';
+import PlotlyCloud from './PlotlyCloud';
+import {DevtoolProvider, useDevtool} from './DevtoolContext';
 
 const classes = (base, variant, variant2) =>
     `${base} ${base}--${variant}` + (variant2 ? ` ${base}--${variant2}` : '');
@@ -75,6 +77,7 @@ const MenuContent = ({
     return (
         <div className='dash-debug-menu__content'>
             {custom && <>{custom.left}</>}
+            {!config.plotly_cloud_installed ? <PlotlyCloud /> : null}
             <button
                 onClick={toggleErrors}
                 className={
@@ -84,7 +87,12 @@ const MenuContent = ({
                 }
                 id='dash-debug-menu__errors-button'
             >
-                <ErrorIcon className='dash-debug-menu__icon' />
+                <ErrorIcon
+                    className='dash-debug-menu__icon'
+                    width={16}
+                    height={16}
+                    fill='currentColor'
+                />
                 Errors
                 {errCount > 0 ? (
                     <span className='test-devtools-error-count dash-debug-menu__error-count'>
@@ -101,7 +109,12 @@ const MenuContent = ({
                 }
                 id='dash-debug-menu__callback-graph-button'
             >
-                <GraphIcon className='dash-debug-menu__icon' />
+                <GraphIcon
+                    className='dash-debug-menu__icon'
+                    width={16}
+                    height={16}
+                    fill='currentColor'
+                />
                 Callbacks
             </button>
             <div className='dash-debug-menu__divider' />
@@ -122,8 +135,8 @@ const MenuContent = ({
     );
 };
 
-const DebugMenu = ({error, hotReload, config, children}) => {
-    const [popup, setPopup] = useState('errors');
+const Debug = ({error, hotReload, config, children}) => {
+    const {popup, setPopup} = useDevtool();
     const [collapsed, setCollapsed] = useState(isCollapsed);
 
     const errCount = error.frontEnd.length + error.backEnd.length;
@@ -154,6 +167,12 @@ const DebugMenu = ({error, hotReload, config, children}) => {
 
     const errors = concat(error.frontEnd, error.backEnd);
 
+    useEffect(() => {
+        if (error !== null && popup !== 'errors') {
+            setPopup('errors');
+        }
+    }, [error]);
+
     const popupContent = (
         <div className='dash-debug-menu__popup'>
             {popup == 'callbackGraph' ? <CallbackGraphContainer /> : undefined}
@@ -207,6 +226,14 @@ const DebugMenu = ({error, hotReload, config, children}) => {
     );
 };
 
+const DebugMenu = ({children, ...props}) => {
+    return (
+        <DevtoolProvider>
+            <Debug {...props}>{children}</Debug>
+        </DevtoolProvider>
+    );
+};
+
 DebugMenu.propTypes = {
     children: PropTypes.object,
     error: PropTypes.object,

dash/dash-renderer/src/components/error/menu/DevtoolContext.js

@@ -0,0 +1,36 @@
+import React, {useContext, useMemo, useState} from 'react';
+
+export const DevtoolContext = React.createContext({});
+
+export const DevtoolProvider = ({children}) => {
+    const [popup, setPopup] = useState('');
+
+    return (
+        <DevtoolContext.Provider
+            value={{
+                popup,
+                setPopup
+            }}
+        >
+            {children}
+        </DevtoolContext.Provider>
+    );
+};
+
+export const useDevtool = () => {
+    return useContext(DevtoolContext);
+};
+
+export const useDevtoolMenuButtonClassName = popupName => {
+    const {popup} = useDevtool();
+
+    const className = useMemo(() => {
+        const base = 'dash-debug-menu__button';
+        if (popup === popupName) {
+            return base + ' dash-debug-menu__button--selected';
+        }
+        return base;
+    }, [popup]);
+
+    return className;
+};

dash/dash-renderer/src/components/error/menu/PlotlyCloud.css

@@ -0,0 +1,88 @@
+/*
+    Same as in plotly-cloud but without the publish
+    in the name to avoid future conflicts if changed
+    upstream.
+*/
+.plotly-cloud-modal-overlay {
+    position: absolute;
+    bottom: 100%;
+    left: -1px;
+    z-index: 10000;
+}
+
+.plotly-cloud-modal-content {
+    border-radius: 8px;
+    width: 522px;
+    background: white;
+    border: 1px solid #d1d5db;
+    border-radius: 4px 4px 0 0;
+    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+}
+
+.plotly-cloud-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid #e5e5e5;
+    background: #f9fafb;
+}
+
+.plotly-cloud-modal-header h3 {
+    margin: 0;
+    color: #333;
+}
+
+.plotly-cloud-modal-close {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #666;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.plotly-cloud-modal-close:hover {
+    color: #333;
+}
+
+.plotly-cloud-modal-body {
+    padding: 20px;
+    color: black !important;
+    font-weight: 100;
+}
+button.plotly-cloud-modal-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px !important;
+    border-radius: 4px !important;
+    font-size: 12px !important;
+    font-weight: 600 !important;
+    cursor: pointer;
+    border: 1px solid transparent;
+    background: #8b5cf6;
+    color: white;
+    border-color: #7c3aed;
+}
+
+.plotly-cloud-modal-button:disabled {
+    cursor: not-allowed;
+}
+.plotly-cloud-copy-install {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 8px 10px;
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    margin-top: 8px;
+}