Merge branch 'v4' into feature/dcc-refactor-datepicker

Author: KoolADE85

@plotly/dash-generator-test-component-typescript/src/props.ts

@@ -1,6 +1,11 @@
 // Needs to export types if not in a d.ts file or if any import is present in the d.ts
 import React from 'react';
-import {DashComponent} from '@dash-renderer/types';
+
+type DashComponent = {
+    props: string;
+    namespace: string;
+    children?: [];
+}
 
 
 type Nested = {

@plotly/dash-generator-test-component-typescript/tsconfig.json

@@ -3,7 +3,6 @@
     "jsx": "react",
     "baseUrl": "src/ts",
     "paths": {
-        "@dash-renderer/*": ["../../../../dash/dash-renderer/src/*"]
     },
     "inlineSources": true,
     "sourceMap": true,

CHANGELOG.md

@@ -45,12 +45,15 @@ 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.
+- [#3445](https://github.com/plotly/dash/pull/3445) Added API to reverse direction of slider component.
+- [#3460](https://github.com/plotly/dash/pull/3460) Add `/health` endpoint for server monitoring and health checks.
+- [#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
 

components/dash-core-components/src/components/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {has, isNil} from 'ramda';
 
 import LoadingElement from '../utils/_LoadingElement';
@@ -34,20 +34,33 @@ const EnhancedTab = ({
     // We use the raw path here since it's up one level from
     // the tabs child.
     const isLoading = ctx.useLoading({rawPath: componentPath});
-    const tabStyle = {
-        ...style,
-        ...(disabled ? disabled_style : {}),
-        ...(selected ? selected_style : {}),
-    };
+    const tabStyle = useMemo(() => {
+        return {
+            ...style,
+            ...(disabled ? disabled_style : {}),
+            ...(selected ? selected_style : {}),
+        };
+    }, [style, disabled, disabled_style, selected, selected_style]);
 
-    const tabClassNames = [
-        'tab',
-        className,
-        disabled ? 'tab--disabled' : null,
-        disabled ? disabled_className : null,
-        selected ? 'tab--selected' : null,
-        selected ? selected_className : null,
-    ].filter(Boolean);
+    const tabClassNames = useMemo(() => {
+        let names = 'tab';
+        if (disabled) {
+            names += ' tab--disabled';
+            if (disabled_className) {
+                names += ` ${disabled_className}`;
+            }
+        }
+        if (selected) {
+            names += ' tab--selected';
+            if (selected_className) {
+                names += ` ${selected_className}`;
+            }
+        }
+        if (className) {
+            names += ` ${className}`;
+        }
+        return names;
+    }, [className, disabled, disabled_className, selected, selected_className]);
 
     let labelDisplay;
     if (typeof label === 'object') {
@@ -64,7 +77,7 @@ const EnhancedTab = ({
     return (
         <div
             data-dash-is-loading={isLoading}
-            className={tabClassNames.join(' ')}
+            className={tabClassNames}
             id={id}
             style={tabStyle}
             onClick={() => {
@@ -121,9 +134,9 @@ function Tabs({
             const firstChildren: TabProps = window.dash_component_api.getLayout(
                 [...children[0].props.componentPath, 'props']
             );
-            return firstChildren.value;
+            return firstChildren.value ?? 'tab-1';
         }
-        return undefined;
+        return 'tab-1';
     };
 
     // Initialize value on mount if not set
@@ -217,24 +230,41 @@ function Tabs({
 
     const selectedTabContent = !isNil(selectedTab) ? selectedTab : '';
 
-    const tabContainerClassNames = [
-        'tab-container',
-        vertical ? 'tab-container--vert' : null,
-        props.className,
-    ].filter(Boolean);
-
-    const tabContentClassNames = [
-        'tab-content',
-        vertical ? 'tab-content--vert' : null,
-        props.content_className,
-    ].filter(Boolean);
-
-    const tabParentClassNames = [
-        'tab-parent',
-        vertical ? ' tab-parent--vert' : null,
-        isAboveBreakpoint ? ' tab-parent--above-breakpoint' : null,
-        props.parent_className,
-    ].filter(Boolean);
+    const tabContainerClassNames = useMemo(() => {
+        let names = 'tab-container';
+        if (vertical) {
+            names += ` tab-container--vert`;
+        }
+        if (props.className) {
+            names += ` ${props.className}`;
+        }
+        return names;
+    }, [vertical, props.className]);
+
+    const tabContentClassNames = useMemo(() => {
+        let names = 'tab-content';
+        if (vertical) {
+            names += ` tab-content--vert`;
+        }
+        if (props.content_className) {
+            names += ` ${props.content_className}`;
+        }
+        return names;
+    }, [vertical, props.content_className]);
+
+    const tabParentClassNames = useMemo(() => {
+        let names = 'tab-parent';
+        if (vertical) {
+            names += ` tab-parent--vert`;
+        }
+        if (isAboveBreakpoint) {
+            names += ' tab-parent--above-breakpoint';
+        }
+        if (props.parent_className) {
+            names += ` ${props.parent_className}`;
+        }
+        return names;
+    }, [vertical, isAboveBreakpoint, props.parent_className]);
 
     // Set CSS variables for dynamic styling
     const cssVars = {
@@ -247,20 +277,20 @@ function Tabs({
         <LoadingElement>
             {loadingProps => (
                 <div
-                    className={tabParentClassNames.join(' ')}
+                    className={tabParentClassNames}
                     style={{...cssVars, ...props.parent_style}}
                     id={props.id ? `${props.id}-parent` : undefined}
                     {...loadingProps}
                 >
                     <div
-                        className={tabContainerClassNames.join(' ')}
+                        className={tabContainerClassNames}
                         style={props.style}
                         id={props.id}
                     >
                         {EnhancedTabs}
                     </div>
                     <div
-                        className={tabContentClassNames.join(' ')}
+                        className={tabContentClassNames}
                         style={props.content_style}
                     >
                         {selectedTabContent || ''}
@@ -271,7 +301,11 @@ function Tabs({
     );
 }
 
-Tabs.dashPersistence = true;
+Tabs.dashPersistence = {
+    persisted_props: [PersistedProps.value],
+    persistence_type: PersistenceTypes.local,
+};
+
 Tabs.dashChildrenUpdate = true;
 
 export default Tabs;

components/dash-core-components/src/components/css/tabs.css

@@ -26,9 +26,6 @@
     transition: background-color, color 200ms;
     text-align: center;
     box-sizing: border-box;
-}
-
-.tab:hover {
     cursor: pointer;
 }
 
@@ -45,7 +42,8 @@
 
 /* Tab disabled state */
 .tab--disabled {
-    color: #d6d6d6;
+    opacity: 0.6;
+    cursor: not-allowed;
 }
 
 /* Tab content area */

components/dash-core-components/tests/integration/misc/test_platter.py

@@ -6,6 +6,7 @@
 
 
 def test_mspl001_dcc_components_platter(platter_app, dash_dcc):
+    dash_dcc.driver.set_window_size(800, 600)
     dash_dcc.start_server(platter_app)
 
     dash_dcc.wait_for_element("#waitfor")

components/dash-core-components/tests/integration/tab/test_tabs.py

@@ -34,6 +34,7 @@ def test_tabs001_in_vertical_mode(dash_dcc):
         ]
     )
 
+    dash_dcc.driver.set_window_size(800, 600)
     dash_dcc.start_server(app)
     dash_dcc.wait_for_text_to_equal("#tab-3", "Tab three")
     dash_dcc.percy_snapshot("Core Tabs - vertical mode")
@@ -67,6 +68,7 @@ def render_content(tab):
         elif tab == "tab-2":
             return html.Div([html.H3("Test content 2")], id="test-tab-2")
 
+    dash_dcc.driver.set_window_size(800, 600)
     dash_dcc.start_server(app)
     dash_dcc.wait_for_text_to_equal("#tabs-content", "Test content 2")
     dash_dcc.percy_snapshot("Core initial tab - tab 2")
@@ -87,6 +89,7 @@ def test_tabs003_without_children_undefined(dash_dcc):
         id="app",
     )
 
+    dash_dcc.driver.set_window_size(800, 600)
     dash_dcc.start_server(app)
     dash_dcc.wait_for_element("#tabs-content")
     assert dash_dcc.find_element("#app").text == "Dash Tabs component demo"
@@ -122,6 +125,7 @@ def render_content(tab):
         elif tab == "tab-2":
             return html.H3("Tab content 2")
 
+    dash_dcc.driver.set_window_size(800, 600)
     dash_dcc.start_server(app)
     dash_dcc.wait_for_text_to_equal("#tabs-content", "Default selected Tab content 1")
     assert dash_dcc.get_logs() == []
@@ -155,6 +159,7 @@ def test_tabs005_disabled(dash_dcc):
         ]
     )
 
+    dash_dcc.driver.set_window_size(800, 600)
     dash_dcc.start_server(app)
 
     dash_dcc.wait_for_element("#tab-2")

components/dash-core-components/tests/integration/tab/test_tabs_with_graphs.py

@@ -64,6 +64,7 @@ def render_content(tab):
                 ]
             )
 
+    dash_dcc.driver.set_window_size(800, 600)
     dash_dcc.start_server(app)
 
     tab_one = dash_dcc.wait_for_element("#tab-1")
@@ -156,6 +157,7 @@ def on_click_update_graph(n_clicks):
                 "layout": {"width": 700, "height": 450},
             }
 
+    dash_dcc.driver.set_window_size(800, 600)
     dash_dcc.start_server(app)
 
     button_one = dash_dcc.wait_for_element("#one")

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)