Merge branch 'dev' into update-dcc-loading

AnnMarieW · web-flow · commit e710b47f6bd4 · 2024-02-29T05:47:49.000-08:00
diff --git a/.pylintrc b/.pylintrc
@@ -414,7 +414,7 @@ max-bool-expr=5
 max-branches=15
 
 # Maximum number of locals for function / method body
-max-locals=18
+max-locals=20
 
 # Maximum number of parents for a class (see R0901).
 max-parents=7
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,12 +7,19 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ## Fixed
 
 - [#2756](https://github.com/plotly/dash/pull/2756) Prevent false dangerous link warning. Fixes [#2743](https://github.com/plotly/dash/issues/2743)
+- [#2752](https://github.com/plotly/dash/pull/2752) Fixed issue with Windows build, for first time build on Windows, the dev needs to use `npm run first-build`
 
 ## Changed
 
 - [#2734](https://github.com/plotly/dash/pull/2734) Configure CI for Python 3.10 [#1863](https://github.com/plotly/dash/issues/1863)
 - [#2735](https://github.com/plotly/dash/pull/2735) Configure CI for Python 3.8 and 3.12, drop support for Python 3.6 and Python 3.7 [#2736](https://github.com/plotly/dash/issues/2736)
 
+## Added
+- [#2758](https://github.com/plotly/dash/pull/2758)
+  - exposing `setProps` to `dash_clientside.clientSide_setProps` to allow for JS code to interact directly with the dash eco-system
+- [#2730](https://github.com/plotly/dash/pull/2721) Load script files with `.mjs` ending as js modules
+- [#2770](https://github.com/plotly/dash/pull/2770) Add running to regular callbacks.
+
 ## [2.15.0] - 2024-01-31
 
 ## Added
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -23,6 +23,7 @@ $ npm ci
 #
 $ npm run build  # runs `renderer build` and `npm build` in dcc, html, table
 # build and install components used in tests
+# on windows, the developer will need to use `npm run first-build` this performs additional first steps
 #
 # Alternatively one could run part of the build process e.g.
 $ dash-update-components "dash-core-components"
diff --git a/dash/_callback.py b/dash/_callback.py
@@ -166,10 +166,6 @@ def callback(
                     "Progress and progress default needs to be of same length"
                 )
 
-        if running:
-            long_spec["running"] = coerce_to_list(running)
-            validate_long_inputs(x[0] for x in long_spec["running"])
-
         if cancel:
             cancel_inputs = coerce_to_list(cancel)
             validate_long_inputs(cancel_inputs)
@@ -188,6 +184,7 @@ def callback(
         **_kwargs,
         long=long_spec,
         manager=manager,
+        running=running,
     )
 
 
@@ -227,6 +224,7 @@ def insert_callback(
     prevent_initial_call,
     long=None,
     manager=None,
+    running=None,
     dynamic_creator=False,
 ):
     if prevent_initial_call is None:
@@ -251,6 +249,8 @@ def insert_callback(
         },
         "dynamic_creator": dynamic_creator,
     }
+    if running:
+        callback_spec["running"] = running
 
     callback_map[callback_id] = {
         "inputs": callback_spec["inputs"],
@@ -289,6 +289,14 @@ def register_callback(  # pylint: disable=R0914
 
     long = _kwargs.get("long")
     manager = _kwargs.get("manager")
+    running = _kwargs.get("running")
+    if running is not None:
+        if not isinstance(running[0], (list, tuple)):
+            running = [running]
+        running = {
+            "running": {str(r[0]): r[1] for r in running},
+            "runningOff": {str(r[0]): r[2] for r in running},
+        }
     allow_dynamic_callbacks = _kwargs.get("_allow_dynamic_callbacks")
 
     output_indices = make_grouping_by_index(output, list(range(grouping_len(output))))
@@ -305,6 +313,7 @@ def register_callback(  # pylint: disable=R0914
         long=long,
         manager=manager,
         dynamic_creator=allow_dynamic_callbacks,
+        running=running,
     )
 
     # pylint: disable=too-many-locals
@@ -389,11 +398,6 @@ def add_context(*args, **kwargs):
                         "job": job,
                     }
 
-                    running = long.get("running")
-
-                    if running:
-                        data["running"] = {str(r[0]): r[1] for r in running}
-                        data["runningOff"] = {str(r[0]): r[2] for r in running}
                     cancel = long.get("cancel")
                     if cancel:
                         data["cancel"] = cancel
diff --git a/dash/dash-renderer/renderer-test.sh b/dash/dash-renderer/renderer-test.sh
@@ -0,0 +1,6 @@
+#!/bin/bash
+file=./build/dash_renderer.min.js
+if [ ! -f "$file" ]; then
+    echo "dash-renderer did not build correctly"
+    exit 1
+fi
diff --git a/dash/dash-renderer/src/actions/callbacks.ts b/dash/dash-renderer/src/actions/callbacks.ts
@@ -349,7 +349,8 @@ function handleServerside(
     long: LongCallbackInfo | undefined,
     additionalArgs: [string, string, boolean?][] | undefined,
     getState: any,
-    output: string
+    output: string,
+    running: any
 ): Promise<CallbackResponse> {
     if (hooks.request_pre) {
         hooks.request_pre(payload);
@@ -363,6 +364,11 @@ function handleServerside(
     let progressDefault: any;
     let moreArgs = additionalArgs;
 
+    if (running) {
+        sideUpdate(running.running, dispatch, paths);
+        runningOff = running.runningOff;
+    }
+
     const fetchCallback = () => {
         const headers = getCSRFHeader() as any;
         let url = `${urlBase(config)}_dash-update-component`;
@@ -497,12 +503,6 @@ function handleServerside(
                     if (data.progress) {
                         sideUpdate(data.progress, dispatch, paths);
                     }
-                    if (data.running) {
-                        sideUpdate(data.running, dispatch, paths);
-                    }
-                    if (!runningOff && data.runningOff) {
-                        runningOff = data.runningOff;
-                    }
                     if (!progressDefault && data.progressDefault) {
                         progressDefault = data.progressDefault;
                     }
@@ -717,7 +717,8 @@ export function executeCallback(
                             long,
                             additionalArgs.length ? additionalArgs : undefined,
                             getState,
-                            cb.callback.output
+                            cb.callback.output,
+                            cb.callback.running
                         );
 
                         if (newHeaders) {
diff --git a/dash/dash-renderer/src/index.js b/dash/dash-renderer/src/index.js
@@ -1,4 +1,5 @@
 import {DashRenderer} from './DashRenderer';
+import './utils/clientsideFunctions';
 
 // make DashRenderer globally available
 window.DashRenderer = DashRenderer;
diff --git a/dash/dash-renderer/src/store.ts b/dash/dash-renderer/src/store.ts
@@ -56,6 +56,11 @@ export default class RendererStore {
     private createAppStore = (reducer: any, middleware: any) => {
         this.__store = createStore(reducer, middleware);
         this.storeObserver.setStore(this.__store);
+        const ds = ((window as any).dash_stores =
+            (window as any).dash_stores || []);
+        if (!ds.includes(this.__store)) {
+            ds.push(this.__store);
+        }
         this.setObservers();
     };
 
diff --git a/dash/dash-renderer/src/types/callbacks.ts b/dash/dash-renderer/src/types/callbacks.ts
@@ -13,6 +13,7 @@ export interface ICallbackDefinition {
     state: ICallbackProperty[];
     long?: LongCallbackInfo;
     dynamic_creator?: boolean;
+    running: any;
 }
 
 export interface ICallbackProperty {
diff --git a/dash/dash-renderer/src/utils/clientsideFunctions.ts b/dash/dash-renderer/src/utils/clientsideFunctions.ts
@@ -0,0 +1,23 @@
+import {updateProps, notifyObservers} from '../actions/index';
+import {getPath} from '../actions/paths';
+
+const set_props = (id: string | object, props: {[k: string]: any}) => {
+    const ds = ((window as any).dash_stores =
+        (window as any).dash_stores || []);
+    for (let y = 0; y < ds.length; y++) {
+        const {dispatch, getState} = ds[y];
+        const {paths} = getState();
+        const componentPath = getPath(paths, id);
+        dispatch(
+            updateProps({
+                props,
+                itempath: componentPath
+            })
+        );
+        dispatch(notifyObservers({id, props}));
+    }
+};
+
+const dc = ((window as any).dash_clientside =
+    (window as any).dash_clientside || {});
+dc['set_props'] = set_props;
diff --git a/dash/dash.py b/dash/dash.py
@@ -855,9 +855,20 @@ def _relative_url_path(relative_package_path="", namespace=""):
                 raise Exception("Serving files from absolute_path isn't supported yet")
             elif "asset_path" in resource:
                 static_url = self.get_asset_url(resource["asset_path"])
-                # Add a cache-busting query param
-                static_url += f"?m={resource['ts']}"
-                srcs.append(static_url)
+                # Import .mjs files with type=module script tag
+                if static_url.endswith(".mjs"):
+                    srcs.append(
+                        {
+                            "src": static_url
+                            + f"?m={resource['ts']}",  # Add a cache-busting query param
+                            "type": "module",
+                        }
+                    )
+                else:
+                    srcs.append(
+                        static_url + f"?m={resource['ts']}"
+                    )  # Add a cache-busting query param
+
         return srcs
 
     def _generate_css_dist_html(self):
@@ -1102,7 +1113,10 @@ def interpolate_index(self, **kwargs):
         )
 
     def dependencies(self):
-        return flask.jsonify(self._callback_list)
+        return flask.Response(
+            to_json(self._callback_list),
+            content_type="application/json",
+        )
 
     def clientside_callback(self, clientside_function, *args, **kwargs):
         """Create a callback that updates the output by calling a clientside
diff --git a/package.json b/package.json
@@ -8,8 +8,8 @@
     "private::initialize.renderer": "cd dash/dash-renderer && npm ci",
     "private::cibuild.components": "python dash/development/update_components.py 'all' --ci True",
     "private::build.components": "python dash/development/update_components.py 'all'",
-    "private::cibuild.renderer": "cd dash/dash-renderer && renderer build",
-    "private::build.renderer": "cd dash/dash-renderer && renderer build",
+    "private::cibuild.renderer": "cd dash/dash-renderer && rimraf build/dash_renderer.min.js && renderer build && sh renderer-test.sh",
+    "private::build.renderer": "cd dash/dash-renderer && rimraf build/dash_renderer.min.js && renderer build && sh renderer-test.sh",
     "private::build.jupyterlab": "cd @plotly/dash-jupyterlab && jlpm install && jlpm build:pack",
     "private::lint.black": "black dash tests --exclude metadata_test.py --check",
     "private::lint.flake8": "flake8 --exclude=metadata_test.py dash tests",
diff --git a/tests/integration/callbacks/test_basic_callback.py b/tests/integration/callbacks/test_basic_callback.py
@@ -791,3 +791,35 @@ def on_click(_):
     dash_duo.start_server(app)
 
     assert dash_duo.get_logs() == []
+
+
+def test_cbsc019_callback_running(dash_duo):
+    lock = Lock()
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            html.Div("off", id="running"),
+            html.Button("start", id="start"),
+            html.Div(id="output"),
+        ]
+    )
+
+    @app.callback(
+        Output("output", "children"),
+        Input("start", "n_clicks"),
+        running=[[Output("running", "children"), html.B("on", id="content"), "off"]],
+        prevent_initial_call=True,
+    )
+    def on_click(_):
+        with lock:
+            pass
+        return "done"
+
+    dash_duo.start_server(app)
+    with lock:
+        dash_duo.find_element("#start").click()
+        dash_duo.wait_for_text_to_equal("#content", "on")
+
+    dash_duo.wait_for_text_to_equal("#output", "done")
+    dash_duo.wait_for_text_to_equal("#running", "off")
diff --git a/tests/integration/clientside/assets/clientside.mjs b/tests/integration/clientside/assets/clientside.mjs
@@ -0,0 +1,6 @@
+import {display} from "./clientsideModule.mjs";
+
+window.dash_clientside = window.dash_clientside || {};
+window.dash_clientside.clientside_module = Object.assign({}, window.dash_clientside.clientside_module, {
+	display
+});
diff --git a/tests/integration/clientside/assets/clientsideModule.mjs b/tests/integration/clientside/assets/clientsideModule.mjs
@@ -0,0 +1,3 @@
+const display = (value) => 'Client says "' + value + '"';
+
+export {display};
diff --git a/tests/integration/clientside/test_clientside.py b/tests/integration/clientside/test_clientside.py
@@ -868,3 +868,36 @@ def test_clsd020_clientside_callback_context_triggered_id(dash_duo):
     dash_duo.find_element("button[id*='btn1\":2']").click()
 
     dash_duo.wait_for_text_to_equal("#output-clientside", "2")
+
+
+def test_clsd021_simple_clientside_module_serverside_callback(dash_duo):
+    app = Dash(__name__, assets_folder="assets")
+
+    app.layout = html.Div(
+        [
+            dcc.Input(id="input"),
+            html.Div(id="output-clientside"),
+            html.Div(id="output-serverside"),
+        ]
+    )
+
+    @app.callback(Output("output-serverside", "children"), [Input("input", "value")])
+    def update_output(value):
+        return 'Server says "{}"'.format(value)
+
+    app.clientside_callback(
+        ClientsideFunction(namespace="clientside_module", function_name="display"),
+        Output("output-clientside", "children"),
+        [Input("input", "value")],
+    )
+
+    dash_duo.start_server(app)
+
+    assert dash_duo.find_element("body > footer > script[type=module]")
+
+    dash_duo.wait_for_text_to_equal("#output-serverside", 'Server says "None"')
+    dash_duo.wait_for_text_to_equal("#output-clientside", 'Client says "undefined"')
+
+    dash_duo.find_element("#input").send_keys("hello world")
+    dash_duo.wait_for_text_to_equal("#output-serverside", 'Server says "hello world"')
+    dash_duo.wait_for_text_to_equal("#output-clientside", 'Client says "hello world"')
diff --git a/tests/integration/clientside/test_clientside_functions.py b/tests/integration/clientside/test_clientside_functions.py
diff --git a/tests/integration/long_callback/test_basic_long_callback016.py b/tests/integration/long_callback/test_basic_long_callback016.py

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,7 @@ $ npm ci`
`23`	`23`	`#`
`24`	`24`	$ npm run build # runs `renderer build` and `npm build` in dcc, html, table
`25`	`25`	`# build and install components used in tests`
	`26`	+# on windows, the developer will need to use `npm run first-build` this performs additional first steps
`26`	`27`	`#`
`27`	`28`	`# Alternatively one could run part of the build process e.g.`
`28`	`29`	`$ dash-update-components "dash-core-components"`
Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@ export interface ICallbackDefinition {`
`13`	`13`	`state: ICallbackProperty[];`
`14`	`14`	`long?: LongCallbackInfo;`
`15`	`15`	`dynamic_creator?: boolean;`
	`16`	`+ running: any;`
`16`	`17`	`}`
`17`	`18`
`18`	`19`	`export interface ICallbackProperty {`