Merge branch 'dev' into add-more-tests

Author: T4rk1n

@plotly/dash-test-components/src/components/AddPropsComponent.js

@@ -0,0 +1,23 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const AddPropsComponent = (props) => {
+    const {children, id} = props;
+
+
+    return (
+        <div id={id}>
+            {React.cloneElement(children, {
+                receive: `Element #${id} pass`,
+                id: id,
+            })}
+        </div>
+    );
+};
+
+AddPropsComponent.propTypes = {
+    id: PropTypes.string,
+    children: PropTypes.node,
+};
+
+export default AddPropsComponent;

@plotly/dash-test-components/src/components/ReceivePropsComponent.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ReceivePropsComponent = (props) => {
+    const {id, text, receive} = props;
+
+    return (
+        <div id={id}>
+            {receive || text}
+        </div>
+    );
+}
+ReceivePropsComponent.propTypes = {
+    id: PropTypes.string,
+    text: PropTypes.string,
+    receive: PropTypes.string,
+}
+
+export default ReceivePropsComponent;

@plotly/dash-test-components/src/index.js

@@ -7,7 +7,11 @@ import MyPersistedComponentNested from './components/MyPersistedComponentNested'
 import StyledComponent from './components/StyledComponent';
 import WidthComponent from './components/WidthComponent';
 import ComponentAsProp from './components/ComponentAsProp';
+
 import DrawCounter from './components/DrawCounter';
+import AddPropsComponent from "./components/AddPropsComponent";
+import ReceivePropsComponent from "./components/ReceivePropsComponent";
+
 
 export {
     AsyncComponent,
@@ -20,4 +24,6 @@ export {
     WidthComponent,
     ComponentAsProp,
     DrawCounter,
+    AddPropsComponent,
+    ReceivePropsComponent
 };

CHANGELOG.md

@@ -6,8 +6,10 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## Added
 
+- [#2819](https://github.com/plotly/dash/pull/2819) Add dash subcomponents receive additional parameters passed by the parent component. Fixes [#2814](https://github.com/plotly/dash/issues/2814).
+- [#2826](https://github.com/plotly/dash/pull/2826) When using Pages, allows for `app.title` and (new) `app.description` to be used as defaults for the page title and description. Fixes [#2811](https://github.com/plotly/dash/issues/2811).
 - [#2795](https://github.com/plotly/dash/pull/2795) Allow list of components to be passed as layout.
-- [2760](https://github.com/plotly/dash/pull/2760) New additions to dcc.Loading resolving multiple issues:
+- [#2760](https://github.com/plotly/dash/pull/2760) New additions to dcc.Loading resolving multiple issues:
   - `delay_show` and `delay_hide` props  to prevent flickering during brief loading periods (similar to Dash Bootstrap Components dbc.Spinner)
   - `overlay_style` for styling the loading overlay,  such as setting  visibility and opacity for children
   - `target_components` specifies components/props triggering the loading spinner

components/dash-core-components/src/fragments/Dropdown.react.js

@@ -39,10 +39,10 @@ const Dropdown = props => {
     const {
         id,
         clearable,
-        searchable,
         multi,
         options,
         setProps,
+        search_value,
         style,
         loading_state,
         value,
@@ -122,7 +122,7 @@ const Dropdown = props => {
 
     useEffect(() => {
         if (
-            !searchable &&
+            !search_value &&
             !isNil(sanitizedOptions) &&
             optionsCheck !== sanitizedOptions &&
             !isNil(value)

components/dash-core-components/tests/integration/dropdown/test_remove_option.py

@@ -1,6 +1,8 @@
 import json
 
-from dash import Dash, html, dcc, Output, Input
+import pytest
+
+from dash import Dash, html, dcc, Output, Input, State
 from dash.exceptions import PreventUpdate
 
 
@@ -11,7 +13,8 @@
 ]
 
 
-def test_ddro001_remove_option_single(dash_dcc):
+@pytest.mark.parametrize("searchable", (True, False))
+def test_ddro001_remove_option_single(dash_dcc, searchable):
     dropdown_options = sample_dropdown_options
 
     app = Dash(__name__)
@@ -22,7 +25,7 @@ def test_ddro001_remove_option_single(dash_dcc):
             dcc.Dropdown(
                 options=dropdown_options,
                 value=value,
-                searchable=False,
+                searchable=searchable,
                 id="dropdown",
             ),
             html.Button("Remove option", id="remove"),
@@ -38,18 +41,17 @@ def on_click(n_clicks):
 
     @app.callback(Output("value-output", "children"), [Input("dropdown", "value")])
     def on_change(val):
-        if not val:
-            raise PreventUpdate
-        return val or "None"
+        return val or "Nothing Here"
 
     dash_dcc.start_server(app)
     btn = dash_dcc.wait_for_element("#remove")
     btn.click()
 
-    dash_dcc.wait_for_text_to_equal("#value-output", "None")
+    dash_dcc.wait_for_text_to_equal("#value-output", "Nothing Here")
 
 
-def test_ddro002_remove_option_multi(dash_dcc):
+@pytest.mark.parametrize("searchable", (True, False))
+def test_ddro002_remove_option_multi(dash_dcc, searchable):
     dropdown_options = sample_dropdown_options
 
     app = Dash(__name__)
@@ -62,7 +64,7 @@ def test_ddro002_remove_option_multi(dash_dcc):
                 value=value,
                 multi=True,
                 id="dropdown",
-                searchable=False,
+                searchable=searchable,
             ),
             html.Button("Remove option", id="remove"),
             html.Div(id="value-output"),
@@ -84,3 +86,64 @@ def on_change(val):
     btn.click()
 
     dash_dcc.wait_for_text_to_equal("#value-output", '["MTL"]')
+
+
+def test_ddro003_remove_option_multiple_dropdowns(dash_dcc):
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Dropdown(
+                id="available-options",
+                multi=True,
+                options=sample_dropdown_options,
+                value=["MTL", "NYC", "SF"],
+            ),
+            dcc.Dropdown(
+                id="chosen",
+                multi=True,
+                options=sample_dropdown_options,
+                value=["NYC", "SF"],
+            ),
+            html.Button(id="remove-btn", children="Remove"),
+            html.Button(id="submit-btn", children="Submit"),
+            html.Div(id="value-output"),
+            html.Div(id="options-output"),
+        ],
+    )
+
+    @app.callback(
+        Output("chosen", "options"),
+        Input("available-options", "value"),
+    )
+    def update_options(available_options):
+        if available_options is None:
+            return []
+        else:
+            return [{"label": i, "value": i} for i in available_options]
+
+    @app.callback(
+        Output("available-options", "options"), [Input("remove-btn", "n_clicks")]
+    )
+    def on_click(n_clicks):
+        if not n_clicks:
+            raise PreventUpdate
+        return sample_dropdown_options[:-1]
+
+    @app.callback(
+        [Output("value-output", "children"), Output("options-output", "children")],
+        Input("submit-btn", "n_clicks"),
+        State("chosen", "options"),
+        State("chosen", "value"),
+    )
+    def print_value(n_clicks, options, value):
+        if not n_clicks:
+            raise PreventUpdate
+        return [json.dumps(value), json.dumps([i["value"] for i in options])]
+
+    dash_dcc.start_server(app)
+    btn = dash_dcc.wait_for_element("#remove-btn")
+    btn.click()
+    btn = dash_dcc.wait_for_element("#submit-btn")
+    btn.click()
+    dash_dcc.wait_for_text_to_equal("#value-output", '["NYC"]')
+    dash_dcc.wait_for_text_to_equal("#options-output", '["MTL", "NYC"]')

dash/_callback.py

@@ -537,7 +537,7 @@ def register_clientside_callback(
     if isinstance(clientside_function, str):
         namespace = "_dashprivate_clientside_funcs"
         # Create a hash from the function, it will be the same always
-        function_name = hashlib.md5(clientside_function.encode("utf-8")).hexdigest()
+        function_name = hashlib.sha256(clientside_function.encode("utf-8")).hexdigest()
 
         inline_scripts.append(
             _inline_clientside_template.format(

dash/_pages.py

@@ -235,13 +235,14 @@ def register_page(
        order `0`
 
     - `title`:
-       (string or function) The name of the page <title>. That is, what appears in the browser title.
-       If not supplied, will use the supplied `name` or will be inferred by module,
-       e.g. `pages.weekly_analytics` to `Weekly analytics`
+       (string or function) Specifies the page title displayed in the browser tab.
+        If not supplied, the app's title is used if different from the default "Dash".
+        Otherwise, the title is the given `name` or inferred from the module name.
+        For example, `pages.weekly_analytics` is inferred as "Weekly Analytics".
 
     - `description`:
        (string or function) The <meta type="description"></meta>.
-       If not supplied, then nothing is supplied.
+       If not defined, the application description will be used if available.
 
     - `image`:
        The meta description image used by social media platforms.
@@ -319,10 +320,18 @@ def register_page(
     )
     page.update(
         supplied_title=title,
-        title=(title if title is not None else page["name"]),
+        title=title
+        if title is not None
+        else CONFIG.title
+        if CONFIG.title != "Dash"
+        else page["name"],
     )
     page.update(
-        description=description if description else "",
+        description=description
+        if description
+        else CONFIG.description
+        if CONFIG.description
+        else "",
         order=order,
         supplied_order=order,
         supplied_layout=layout,

dash/_utils.py

@@ -142,7 +142,7 @@ def _concat(x):
         _id = x.component_id_str().replace(".", "\\.") + "." + x.component_property
         if x.allow_duplicate:
             if not hashed_inputs:
-                hashed_inputs = hashlib.md5(
+                hashed_inputs = hashlib.sha256(
                     ".".join(str(x) for x in inputs).encode("utf-8")
                 ).hexdigest()
             # Actually adds on the property part.
@@ -213,9 +213,9 @@ def run_command_with_process(cmd):
                 proc.communicate()
 
 
-def compute_md5(path):
+def compute_hash(path):
     with io.open(path, encoding="utf-8") as fp:
-        return hashlib.md5(fp.read().encode("utf-8")).hexdigest()
+        return hashlib.sha256(fp.read().encode("utf-8")).hexdigest()
 
 
 def job(msg=""):

dash/dash-renderer/src/TreeContainer.js

@@ -16,6 +16,7 @@ import {
     map,
     mapObjIndexed,
     mergeRight,
+    omit,
     pick,
     pickBy,
     propOr,
@@ -237,7 +238,13 @@ class BaseTreeContainer extends Component {
         );
     }
 
-    getComponent(_dashprivate_layout, children, loading_state, setProps) {
+    getComponent(
+        _dashprivate_layout,
+        children,
+        loading_state,
+        setProps,
+        _extraProps
+    ) {
         const {_dashprivate_config, _dashprivate_dispatch, _dashprivate_error} =
             this.props;
 
@@ -262,7 +269,10 @@ class BaseTreeContainer extends Component {
             ],
             _dashprivate_config
         );
-        let props = dissoc('children', _dashprivate_layout.props);
+        let props = mergeRight(
+            dissoc('children', _dashprivate_layout.props),
+            _extraProps
+        );
 
         for (let i = 0; i < childrenProps.length; i++) {
             const childrenProp = childrenProps[i];
@@ -481,6 +491,22 @@ class BaseTreeContainer extends Component {
             _dashprivate_path
         } = this.props;
 
+        const _extraProps = omit(
+            [
+                'id',
+                '_dashprivate_error',
+                '_dashprivate_layout',
+                '_dashprivate_loadingState',
+                '_dashprivate_loadingStateHash',
+                '_dashprivate_path',
+                '_dashprivate_config',
+                '_dashprivate_dispatch',
+                '_dashprivate_graphs',
+                '_dashprivate_loadingMap'
+            ],
+            this.props
+        );
+
         const layoutProps = this.getLayoutProps();
 
         const children = this.getChildren(
@@ -492,7 +518,8 @@ class BaseTreeContainer extends Component {
             _dashprivate_layout,
             children,
             _dashprivate_loadingState,
-            this.setProps
+            this.setProps,
+            _extraProps
         );
     }
 }