No need to have local state in dashi UI components

Author: forman

dashi/src/actions/handleComponentPropertyChange.ts

@@ -61,12 +61,28 @@ export default function handleComponentPropertyChange(
       }
     }
   });
+  const originalChangeRequest: ChangeRequest = {
+    contribPoint,
+    contribIndex,
+    changes: [
+      {
+        kind: "Component",
+        id: componentId,
+        property: componentPropertyName,
+        value: componentPropertyValue,
+      },
+    ],
+  };
   console.debug("callRequests", callRequests);
-  if (callRequests.length) {
+  if (callRequests.length == 0) {
+    applyChangeRequests([originalChangeRequest]);
+  } else {
     fetchApiResult(fetchChangeRequests, callRequests).then(
       (changeRequestsResult) => {
         if (changeRequestsResult.data) {
-          applyChangeRequests(changeRequestsResult.data);
+          applyChangeRequests(
+            [originalChangeRequest].concat(changeRequestsResult.data),
+          );
         } else {
           console.error(
             "callback failed:",
@@ -81,23 +97,28 @@ export default function handleComponentPropertyChange(
 }
 
 function applyChangeRequests(changeRequests: ChangeRequest[]) {
-  console.log("processing call results", changeRequests);
+  console.log("applying change requests", changeRequests);
   changeRequests.forEach(({ contribPoint, contribIndex, changes }) => {
-    console.log("processing output of", contribPoint, contribIndex, changes);
+    console.log(
+      "processing change request",
+      contribPoint,
+      contribIndex,
+      changes,
+    );
     const contributionStatesRecord =
       appStore.getState().contributionStatesRecord;
     const contributionStates = contributionStatesRecord[contribPoint];
     const contributionState = contributionStates[contribIndex];
     const componentModelOld = contributionState.componentModelResult.data;
     let componentModel = componentModelOld;
-    changes.forEach((output) => {
-      if (componentModel && (!output.kind || output.kind === "Component")) {
-        componentModel = updateComponentState(componentModel, output);
+    changes.forEach((change) => {
+      if (componentModel && (!change.kind || change.kind === "Component")) {
+        componentModel = updateComponentState(componentModel, change);
       } else {
         // TODO: process other output kinds which may not require componentModel.
         console.warn(
           "processing of this kind of output not supported yet:",
-          output,
+          change,
         );
       }
     });
@@ -124,16 +145,16 @@ function applyChangeRequests(changeRequests: ChangeRequest[]) {
 
 function updateComponentState(
   componentModel: ComponentModel,
-  output: Change,
+  change: Change,
 ): ComponentModel {
-  if (componentModel.id === output.id) {
-    return { ...componentModel, [output.property]: output.value };
+  if (componentModel.id === change.id) {
+    return { ...componentModel, [change.property]: change.value };
   } else if (isContainerModel(componentModel)) {
     const containerModelOld: ContainerModel = componentModel;
     let containerModelNew: ContainerModel = containerModelOld;
     for (let i = 0; i < containerModelOld.components.length; i++) {
       const itemOld = containerModelOld.components[i];
-      const itemNew = updateComponentState(itemOld, output);
+      const itemNew = updateComponentState(itemOld, change);
       if (itemNew !== itemOld) {
         if (containerModelNew === containerModelOld) {
           containerModelNew = {

dashi/src/components/DashiDropdown.tsx

@@ -1,6 +1,5 @@
 import "react";
 import { DropdownModel, PropertyChangeHandler } from "../model/component";
-import React from "react";
 import {
   // Box,
   FormControl,
@@ -24,7 +23,6 @@ function DashiDropdown({
   label,
   onPropertyChange,
 }: DashiDropdownProps) {
-  const [dropdownValue, setDropdownValue] = React.useState(value);
   const handleChange = (event: SelectChangeEvent) => {
     if (!id) {
       return;
@@ -34,7 +32,6 @@ function DashiDropdown({
       newValue = Number.parseInt(newValue);
     }
 
-    setDropdownValue(newValue);
     return onPropertyChange({
       componentType: "Dropdown",
       componentId: id,
@@ -49,7 +46,7 @@ function DashiDropdown({
         id={id}
         name={name}
         style={style}
-        value={`${dropdownValue}`}
+        value={`${value}`}
         disabled={disabled}
         onChange={handleChange}
         variant={"filled"}

dashipy/dashipy/server.py

@@ -135,7 +135,7 @@ def post(self):
         context: Context = self.settings[DASHI_CONTEXT_KEY]
 
         # TODO: assert correctness, set status code on error
-        call_results: list[dict] = []
+        change_requests: list[dict] = []
         for call_request in call_requests:
             contrib_point_name: str = call_request["contribPoint"]
             contrib_index: int = call_request["contribIndex"]
@@ -151,10 +151,10 @@ def post(self):
             if len(callback.outputs) == 1:
                 output_values = (output_values,)
 
-            computed_outputs: list[dict] = []
+            changes: list[dict] = []
             for output_index, output in enumerate(callback.outputs):
                 output_value = output_values[output_index]
-                computed_outputs.append(
+                changes.append(
                     {
                         **output.to_dict(),
                         "value": (
@@ -167,16 +167,16 @@ def post(self):
                     }
                 )
 
-            call_results.append(
+            change_requests.append(
                 {
                     "contribPoint": contrib_point_name,
                     "contribIndex": contrib_index,
-                    "computedOutputs": computed_outputs,
+                    "changes": changes,
                 }
             )
 
         self.set_header("Content-Type", "text/json")
-        self.write({"result": call_results})
+        self.write({"result": change_requests})
 
 
 def print_usage(app, port):