Merge branch 'dev' into insistence-dev

Author: insistence

CHANGELOG.md

@@ -2,7 +2,7 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
-## UNRELEASED
+## [2.17.1] - 2024-06-12
 
 ## Added
 
@@ -15,6 +15,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#2859](https://github.com/plotly/dash/pull/2859) Fix base patch operators. fixes [#2855](https://github.com/plotly/dash/issues/2855)
 - [#2856](https://github.com/plotly/dash/pull/2856) Fix multiple consecutive calls with same id to set_props only keeping the last props. Fixes [#2852](https://github.com/plotly/dash/issues/2852)
 - [#2867](https://github.com/plotly/dash/pull/2867) Fix clientside no output callback. Fixes [#2866](https://github.com/plotly/dash/issues/2866)
+- [#2876](https://github.com/plotly/dash/pull/2876) Fix pattern matching in callback running argument. Fixes [#2863](https://github.com/plotly/dash/issues/2863)
 
 ## [2.17.0] - 2024-05-03
 

components/dash-core-components/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "2.14.0",
+  "version": "2.14.1",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",

components/dash-core-components/package.json

@@ -1,6 +1,6 @@
 import os
 
-__version__ = "1.20.0"
+__version__ = "1.20.1"
 
 _available_react_versions = {"16.14.0", "18.2.0"}
 _available_reactdom_versions = {"16.14.0", "18.2.0"}
@@ -64,7 +64,7 @@ def _set_react_version(v_react, v_reactdom=None):
     {
         "relative_package_path": "dash-renderer/build/dash_renderer.min.js",
         "dev_package_path": "dash-renderer/build/dash_renderer.dev.js",
-        "external_url": "https://unpkg.com/[email protected].0"
+        "external_url": "https://unpkg.com/[email protected].1"
         "/build/dash_renderer.min.js",
         "namespace": "dash",
     },

dash/_dash_renderer.py

@@ -1,6 +1,6 @@
 {
   "name": "dash-renderer",
-  "version": "1.20.0",
+  "version": "1.20.1",
   "description": "render dash components in react",
   "main": "build/dash_renderer.min.js",
   "scripts": {

dash/dash-renderer/package-lock.json

@@ -31,7 +31,8 @@ import {
     IPrioritizedCallback,
     LongCallbackInfo,
     CallbackResponse,
-    CallbackResponseData
+    CallbackResponseData,
+    SideUpdateOutput
 } from '../types/callbacks';
 import {isMultiValued, stringifyId, isMultiOutputProp} from './dependencies';
 import {urlBase} from './utils';
@@ -44,6 +45,8 @@ import {handlePatch, isPatch} from './patch';
 import {getPath} from './paths';
 
 import {requestDependencies} from './requestDependencies';
+import {parsePMCId} from './patternMatching';
+import {replacePMC} from './patternMatching';
 
 export const addBlockedCallbacks = createAction<IBlockedCallback[]>(
     CallbackActionType.AddBlocked
@@ -345,33 +348,53 @@ function updateComponent(component_id: any, props: any) {
     };
 }
 
-function sideUpdate(outputs: any, dispatch: any) {
-    toPairs(outputs).forEach(([id, value]) => {
-        let componentId = id,
-            propName;
+/**
+ * Update a component props with `running`/`progress`/`set_props` calls.
+ *
+ * @param outputs Props to update.
+ * @param cb The originating callback info.
+ * @returns
+ */
+function sideUpdate(outputs: SideUpdateOutput, cb: ICallbackPayload) {
+    return function (dispatch: any, getState: any) {
+        toPairs(outputs)
+            .reduce((acc, [id, value], i) => {
+                let componentId = id,
+                    propName,
+                    replacedIds = [];
+
+                if (id.startsWith('{')) {
+                    [componentId, propName] = parsePMCId(id);
+                    replacedIds = replacePMC(componentId, cb, i, getState);
+                } else if (id.includes('.')) {
+                    [componentId, propName] = id.split('.');
+                }
 
-        if (id.startsWith('{')) {
-            const index = id.lastIndexOf('}');
-            if (index + 2 < id.length) {
-                propName = id.substring(index + 2);
-                componentId = JSON.parse(id.substring(0, index + 1));
-            } else {
-                componentId = JSON.parse(id);
-            }
-        } else if (id.includes('.')) {
-            [componentId, propName] = id.split('.');
-        }
+                const props = propName ? {[propName]: value} : value;
 
-        const props = propName ? {[propName]: value} : value;
-        dispatch(updateComponent(componentId, props));
-    });
+                if (replacedIds.length === 0) {
+                    acc.push([componentId, props]);
+                } else if (replacedIds.length === 1) {
+                    acc.push([replacedIds[0], props]);
+                } else {
+                    replacedIds.forEach((rep: any) => {
+                        acc.push([rep, props]);
+                    });
+                }
+
+                return acc;
+            }, [] as any[])
+            .forEach(([id, idProps]) => {
+                dispatch(updateComponent(id, idProps));
+            });
+    };
 }
 
 function handleServerside(
     dispatch: any,
     hooks: any,
     config: any,
-    payload: any,
+    payload: ICallbackPayload,
     long: LongCallbackInfo | undefined,
     additionalArgs: [string, string, boolean?][] | undefined,
     getState: any,
@@ -391,7 +414,7 @@ function handleServerside(
     let moreArgs = additionalArgs;
 
     if (running) {
-        sideUpdate(running.running, dispatch);
+        dispatch(sideUpdate(running.running, payload));
         runningOff = running.runningOff;
     }
 
@@ -501,10 +524,10 @@ function handleServerside(
                     dispatch(removeCallbackJob({jobId: job}));
                 }
                 if (runningOff) {
-                    sideUpdate(runningOff, dispatch);
+                    dispatch(sideUpdate(runningOff, payload));
                 }
                 if (progressDefault) {
-                    sideUpdate(progressDefault, dispatch);
+                    dispatch(sideUpdate(progressDefault, payload));
                 }
             };
 
@@ -527,11 +550,11 @@ function handleServerside(
                     }
 
                     if (data.sideUpdate) {
-                        sideUpdate(data.sideUpdate, dispatch);
+                        dispatch(sideUpdate(data.sideUpdate, payload));
                     }
 
                     if (data.progress) {
-                        sideUpdate(data.progress, dispatch);
+                        dispatch(sideUpdate(data.progress, payload));
                     }
                     if (!progressDefault && data.progressDefault) {
                         progressDefault = data.progressDefault;
@@ -676,11 +699,19 @@ export function executeCallback(
 
         const __execute = async (): Promise<CallbackResult> => {
             try {
+                const changedPropIds = keys<string>(cb.changedPropIds);
+                const parsedChangedPropsIds = changedPropIds.map(propId => {
+                    if (propId.startsWith('{')) {
+                        return parsePMCId(propId)[0];
+                    }
+                    return propId;
+                });
                 const payload: ICallbackPayload = {
                     output,
                     outputs: isMultiOutputProp(output) ? outputs : outputs[0],
                     inputs: inVals,
-                    changedPropIds: keys(cb.changedPropIds),
+                    changedPropIds,
+                    parsedChangedPropsIds,
                     state: cb.callback.state.length
                         ? fillVals(paths, layout, cb, state, 'State')
                         : undefined
@@ -726,7 +757,9 @@ export function executeCallback(
                         if (inter.length) {
                             additionalArgs.push(['cancelJob', job.jobId]);
                             if (job.progressDefault) {
-                                sideUpdate(job.progressDefault, dispatch);
+                                dispatch(
+                                    sideUpdate(job.progressDefault, payload)
+                                );
                             }
                         }
                     }

dash/dash-renderer/package.json

@@ -0,0 +1,91 @@
+import {keys, equals, dissoc, toPairs} from 'ramda';
+import {ICallbackPayload} from '../types/callbacks';
+
+/**
+ * Deserialize pattern matching ids that come in one of the form:
+ * - '{"type":"component","index":["MATCH"]}.children'
+ * - '{"type":"component","index":["MATCH"]}'
+ *
+ * @param id The raw object as a string id.
+ * @returns The id object.
+ */
+export function parsePMCId(id: string): [any, string | undefined] {
+    let componentId, propName;
+    const index = id.lastIndexOf('}');
+    if (index + 2 < id.length) {
+        propName = id.substring(index + 2);
+        componentId = JSON.parse(id.substring(0, index + 1));
+    } else {
+        componentId = JSON.parse(id);
+    }
+    return [componentId, propName];
+}
+
+/**
+ * Get all the associated ids for an id.
+ *
+ * @param id Id to get all the pmc ids from.
+ * @param state State of the store.
+ * @param triggerKey Key to remove from the equality comparison.
+ * @returns
+ */
+export function getAllPMCIds(id: any, state: any, triggerKey: string) {
+    const keysOfIds = keys(id);
+    const idKey = keysOfIds.join(',');
+    return state.paths.objs[idKey]
+        .map((obj: any) =>
+            keysOfIds.reduce((acc, key, i) => {
+                acc[key] = obj.values[i];
+                return acc;
+            }, {} as any)
+        )
+        .filter((obj: any) =>
+            equals(dissoc(triggerKey, obj), dissoc(triggerKey, id))
+        );
+}
+
+/**
+ * Replace the pattern matching ids with the actual trigger value
+ * for MATCH, all the ids for ALL and smaller than the trigger value
+ * for ALLSMALLER.
+ *
+ * @param id The parsed id in dictionary format.
+ * @param cb Original callback info.
+ * @param index Index of the dependency in case there is more than one changed id.
+ * @param getState Function to get the state of the redux store.
+ * @returns List of replaced ids.
+ */
+export function replacePMC(
+    id: any,
+    cb: ICallbackPayload,
+    index: number,
+    getState: any
+): any[] {
+    let extras: any = [];
+    const replaced: any = {};
+    toPairs(id).forEach(([key, value]) => {
+        if (extras.length) {
+            // All done.
+            return;
+        }
+        if (Array.isArray(value)) {
+            const triggerValue = (cb.parsedChangedPropsIds[index] ||
+                cb.parsedChangedPropsIds[0])[key];
+            if (value.includes('MATCH')) {
+                replaced[key] = triggerValue;
+            } else if (value.includes('ALL')) {
+                extras = getAllPMCIds(id, getState(), key);
+            } else if (value.includes('ALLSMALLER')) {
+                extras = getAllPMCIds(id, getState(), key).filter(
+                    (obj: any) => obj[key] < triggerValue
+                );
+            }
+        } else {
+            replaced[key] = value;
+        }
+    });
+    if (extras.length) {
+        return extras;
+    }
+    return [replaced];
+}

dash/dash-renderer/src/actions/callbacks.ts

@@ -72,6 +72,7 @@ export interface IStoredCallback extends IExecutedCallback {
 
 export interface ICallbackPayload {
     changedPropIds: any[];
+    parsedChangedPropsIds: any[];
     inputs: any[];
     output: string;
     outputs: any[];
@@ -106,3 +107,7 @@ export type CallbackResponseData = {
     cancel?: ICallbackProperty[];
     sideUpdate?: any;
 };
+
+export type SideUpdateOutput = {
+    [key: string]: any;
+};

dash/dash-renderer/src/actions/patternMatching.ts

@@ -1 +1 @@
-__version__ = "2.17.0"
+__version__ = "2.17.1"