Merge pull request #4 from bcdev/forman-no_local_ui_state

Avoid local state in Widgets

Author: forman

dashi/src/actions/handleComponentPropertyChange.ts

@@ -5,13 +5,9 @@ import {
   isContainerModel,
   PropertyChangeEvent,
 } from "../model/component";
-import {
-  CallbackCallRequest,
-  CallbackCallResult,
-  ComputedOutput,
-} from "../model/callback";
+import { CallbackCallRequest, ChangeRequest, Change } from "../model/callback";
 import fetchApiResult from "../utils/fetchApiResult";
-import { fetchCallbackCallResults } from "../api";
+import { fetchChangeRequests } from "../api";
 import { updateArray } from "../utils/updateArray";
 
 export default function handleComponentPropertyChange(
@@ -27,6 +23,8 @@ export default function handleComponentPropertyChange(
   const componentPropertyValue = contribEvent.propertyValue;
   const contributionModel = contributionModels[contribIndex];
   const callRequests: CallbackCallRequest[] = [];
+  // Prepare calling all callbacks of the contribution
+  // that are triggered by the property change
   (contributionModel.callbacks || []).forEach((callback, callbackIndex) => {
     if (callback.inputs && callback.inputs.length > 0) {
       let triggerIndex: number = -1;
@@ -38,11 +36,12 @@ export default function handleComponentPropertyChange(
               input.id === componentId &&
               input.property === componentPropertyName
             ) {
+              // Ok - the current callback is triggered by the property change
               triggerIndex = inputIndex;
               return componentPropertyValue;
             } else {
               // TODO: get inputValue from other component with given id/property.
-              //    For time being we use null as it is JSON-serializable
+              //   For time being we use null as it is JSON-serializable
             }
           } else {
             // TODO: get inputValue from other kinds.
@@ -62,44 +61,64 @@ 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) {
-    fetchApiResult(fetchCallbackCallResults, callRequests).then(
-      (callResultResult) => {
-        if (callResultResult.data) {
-          applyCallbackCallResults(callResultResult.data);
+  if (callRequests.length == 0) {
+    applyChangeRequests([originalChangeRequest]);
+  } else {
+    fetchApiResult(fetchChangeRequests, callRequests).then(
+      (changeRequestsResult) => {
+        if (changeRequestsResult.data) {
+          applyChangeRequests(
+            [originalChangeRequest].concat(changeRequestsResult.data),
+          );
         } else {
-          console.error("callback failed:", callResultResult.error);
-          console.error("  for requests:", callRequests);
+          console.error(
+            "callback failed:",
+            changeRequestsResult.error,
+            "for call requests:",
+            callRequests,
+          );
         }
       },
     );
   }
 }
 
-function applyCallbackCallResults(callResults: CallbackCallResult[]) {
-  console.log("processing call results", callResults);
-  callResults.forEach(({ contribPoint, contribIndex, computedOutputs }) => {
+function applyChangeRequests(changeRequests: ChangeRequest[]) {
+  console.log("applying change requests", changeRequests);
+  changeRequests.forEach(({ contribPoint, contribIndex, changes }) => {
     console.log(
-      "processing output of",
+      "processing change request",
       contribPoint,
       contribIndex,
-      computedOutputs,
+      changes,
     );
     const contributionStatesRecord =
       appStore.getState().contributionStatesRecord;
     const contributionStates = contributionStatesRecord[contribPoint];
     const contributionState = contributionStates[contribIndex];
     const componentModelOld = contributionState.componentModelResult.data;
     let componentModel = componentModelOld;
-    computedOutputs.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,
         );
       }
     });
@@ -126,16 +145,16 @@ function applyCallbackCallResults(callResults: CallbackCallResult[]) {
 
 function updateComponentState(
   componentModel: ComponentModel,
-  output: ComputedOutput,
+  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/api.ts

@@ -1,7 +1,7 @@
 import { ComponentModel } from "./model/component";
 import { Extension } from "./model/extension";
 import { Contribution } from "./model/contribution";
-import { CallbackCallRequest, CallbackCallResult } from "./model/callback";
+import { CallbackCallRequest, ChangeRequest } from "./model/callback";
 import { callApi } from "./utils/fetchApiResult";
 import { ContribPoint } from "./store/appStore";
 
@@ -28,9 +28,9 @@ export async function fetchComponentModel(
   });
 }
 
-export async function fetchCallbackCallResults(
+export async function fetchChangeRequests(
   callRequests: CallbackCallRequest[],
-): Promise<CallbackCallResult[]> {
+): Promise<ChangeRequest[]> {
   return callApi(`${serverUrl}/dashi/callback`, {
     body: JSON.stringify({ callRequests }),
     method: "post",

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({
         labelId={`${id}-label`}
         id={id}
         name={name}
-        value={`${dropdownValue}`}
+        value={`${value}`}
         disabled={disabled}
         onChange={handleChange}
       >

dashi/src/model/callback.ts

@@ -17,18 +17,23 @@ export interface Input extends InputOutput {}
 export interface Output extends InputOutput {}
 
 export interface CallbackCallRequest {
+  // The contribution that requests the callback call
   contribPoint: string;
   contribIndex: number;
+  // The callback of the contribution
   callbackIndex: number;
+  // The input values for the callback
   inputValues: unknown[];
 }
 
-export interface CallbackCallResult {
+export interface ChangeRequest {
+  // The contribution that requests the changes
   contribPoint: string;
   contribIndex: number;
-  computedOutputs: ComputedOutput[];
+  // The changes requested by the contribution
+  changes: Change[];
 }
 
-export interface ComputedOutput extends Output {
+export interface Change extends Output {
   value: unknown;
 }

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):