using ObjPathLike instead of string | ObjPath

Author: forman

dashi/src/lib/actions/handleComponentChange.ts

@@ -5,6 +5,7 @@ import { type ComponentChangeEvent } from "@/lib/types/model/event";
 import { getInputValues } from "@/lib/actions/helpers/getInputValues";
 import { applyStateChangeRequests } from "@/lib/actions/helpers/applyStateChangeRequests";
 import { invokeCallbacks } from "@/lib/actions/helpers/invokeCallbacks";
+import { equalObjPaths } from "@/lib/utils/objPath";
 
 export function handleComponentChange(
   contribPoint: ContribPoint,
@@ -18,9 +19,9 @@ export function handleComponentChange(
       stateChanges: [
         {
           link: "component",
-          id: changeEvent.componentId,
-          property: changeEvent.propertyName,
-          value: changeEvent.propertyValue,
+          id: changeEvent.id,
+          property: changeEvent.property,
+          value: changeEvent.value,
         },
       ],
     },
@@ -59,8 +60,8 @@ function getCallbackRequests(
         (input) =>
           !input.noTrigger &&
           (!input.link || input.link === "component") &&
-          input.id === changeEvent.componentId &&
-          input.property === changeEvent.propertyName,
+          input.id === changeEvent.id &&
+          equalObjPaths(input.property, changeEvent.property),
       );
       if (inputIndex >= 0) {
         callbackRequests.push({

dashi/src/lib/actions/helpers/getInputValues.ts

@@ -47,7 +47,7 @@ export function getInputValueFromComponent(
   input: Input,
   componentState: ComponentState,
 ): unknown {
-  if (componentState.id === input.id && input.property) {
+  if (componentState.id === input.id) {
     return getValue(componentState, input.property);
   } else if (isContainerState(componentState)) {
     for (let i = 0; i < componentState.components.length; i++) {

dashi/src/lib/actions/helpers/invokeCallbacks.ts

@@ -5,35 +5,36 @@ import { fetchStateChangeRequests } from "@/lib/api/fetchStateChangeRequests";
 import { applyStateChangeRequests } from "@/lib/actions/helpers/applyStateChangeRequests";
 
 export function invokeCallbacks(callbackRequests: CallbackRequest[]) {
+  if (!callbackRequests.length) {
+    return;
+  }
   const { configuration } = store.getState();
   const invocationId = getInvocationId();
   if (import.meta.env.DEV) {
     console.debug(`invokeCallbacks (${invocationId})-->`, callbackRequests);
   }
-  if (callbackRequests.length) {
-    fetchApiResult(
-      fetchStateChangeRequests,
-      callbackRequests,
-      configuration.api,
-    ).then((changeRequestsResult) => {
-      if (changeRequestsResult.data) {
-        if (import.meta.env.DEV) {
-          console.debug(
-            `invokeCallbacks <--(${invocationId})`,
-            changeRequestsResult.data,
-          );
-        }
-        applyStateChangeRequests(changeRequestsResult.data);
-      } else {
-        console.error(
-          "callback failed:",
-          changeRequestsResult.error,
-          "for call requests:",
-          callbackRequests,
+  fetchApiResult(
+    fetchStateChangeRequests,
+    callbackRequests,
+    configuration.api,
+  ).then((changeRequestsResult) => {
+    if (changeRequestsResult.data) {
+      if (import.meta.env.DEV) {
+        console.debug(
+          `invokeCallbacks <--(${invocationId})`,
+          changeRequestsResult.data,
         );
       }
-    });
-  }
+      applyStateChangeRequests(changeRequestsResult.data);
+    } else {
+      console.error(
+        "callback failed:",
+        changeRequestsResult.error,
+        "for call requests:",
+        callbackRequests,
+      );
+    }
+  });
 }
 
 let invocationCounter = 0;

dashi/src/lib/api/fetchContributions.ts

@@ -14,25 +14,29 @@ export async function fetchContributions(
   return callApi<Contributions>(
     makeUrl("contributions", options),
     undefined,
-    (contributions: Contributions) => ({
-      ...contributions,
-      contributions: mapObject(
-        contributions.contributions,
-        (contributions: Contribution[]) =>
-          contributions.map(
-            (contribution): Contribution => ({
-              ...contribution,
-              layout: contribution.layout
-                ? normalizeCallback(contribution.layout)
-                : undefined,
-              callbacks: normalizeCallbacks(contribution.callbacks),
-            }),
-          ),
-      ),
-    }),
+    normalizeContributions,
   );
 }
 
+function normalizeContributions(contributions: Contributions) {
+  return {
+    ...contributions,
+    contributions: mapObject(
+      contributions.contributions,
+      (contributions: Contribution[]) =>
+        contributions.map(
+          (contribution): Contribution => ({
+            ...contribution,
+            layout: contribution.layout
+              ? normalizeCallback(contribution.layout)
+              : undefined,
+            callbacks: normalizeCallbacks(contribution.callbacks),
+          }),
+        ),
+    ),
+  };
+}
+
 function normalizeCallbacks(callbacks: Callback[] | undefined): Callback[] {
   return callbacks ? callbacks.map(normalizeCallback) : [];
 }

dashi/src/lib/components/Button.tsx

@@ -20,11 +20,11 @@ export function Button({
     if (id) {
       onChange({
         componentType: "Button",
-        componentId: id,
+        id: id,
         // Compat with plotly/dash
-        propertyName: "n_clicks",
+        property: "n_clicks",
         // TODO: get number of mouse clicks
-        propertyValue: event.buttons,
+        value: event.buttons,
       });
     }
   };

dashi/src/lib/components/Checkbox.tsx

@@ -23,9 +23,9 @@ export function Checkbox({
     if (id) {
       return onChange({
         componentType: "Checkbox",
-        componentId: id,
-        propertyName: "value",
-        propertyValue: event.currentTarget.checked,
+        id: id,
+        property: "value",
+        value: event.currentTarget.checked,
       });
     }
   };

dashi/src/lib/components/Dropdown.tsx

@@ -31,9 +31,9 @@ export function Dropdown({
 
     return onChange({
       componentType: "Dropdown",
-      componentId: id,
-      propertyName: "value",
-      propertyValue: newValue,
+      id: id,
+      property: "value",
+      value: newValue,
     });
   };
   return (

dashi/src/lib/components/Plot.tsx

@@ -16,9 +16,9 @@ export function Plot({ id, style, chart, onChange }: PlotProps) {
     if (id) {
       return onChange({
         componentType: "Plot",
-        componentId: id,
-        propertyName: "points",
-        propertyValue: value,
+        id: id,
+        property: "points",
+        value: value,
       });
     }
   };

dashi/src/lib/types/model/channel.ts

@@ -1,4 +1,4 @@
-import type { ObjPath } from "@/lib/utils/objPath";
+import type { ObjPathLike } from "@/lib/utils/objPath";
 
 export type Link = "component" | "container" | "app";
 
@@ -20,7 +20,7 @@ export interface Channel {
   /**
    * The property of an object or array index.
    */
-  property: string | ObjPath;
+  property: ObjPathLike;
 }
 
 export interface Input extends Channel {

dashi/src/lib/types/model/event.ts

@@ -1,10 +1,12 @@
 import { type ComponentType } from "@/lib/types/state/component";
+import type { ObjPathLike } from "@/lib/utils/objPath";
 
 export interface ComponentChangeEvent {
   componentType: ComponentType;
-  componentId: string;
-  propertyName: string;
-  propertyValue: unknown;
+  // See commonality with StateChange
+  id: string;
+  property: ObjPathLike;
+  value: unknown;
 }
 
 export type ComponentChangeHandler = (event: ComponentChangeEvent) => void;