Merge branch 'refs/heads/main' into forman-add_callback_function_details

Author: forman

dashi/package-lock.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@fontsource/roboto": "^5.1.0",
     "@mui/material": "^6.1.1",
     "immer": "^10.1.1",
     "plotly.js": "^2.35.2",

dashi/package.json

@@ -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/actions/handleComponentPropertyChange.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/api.ts

@@ -1,18 +1,42 @@
+import {
+  CssBaseline,
+  ThemeProvider,
+  createTheme,
+  Typography,
+} from "@mui/material";
+
 import ExtensionsInfo from "./ExtensionInfo";
 import PanelsControl from "./PanelsControl";
 import PanelsRow from "./PanelsRow";
 import { initAppStore } from "../actions/initAppStore";
 
 initAppStore();
 
+// MUI's default font family
+const fontFamily = "Roboto, Arial, sans-serif";
+
+const theme = createTheme({
+  typography: { fontFamily },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        "*": { fontFamily },
+      },
+    },
+  },
+});
+
 function App() {
   return (
-    <>
-      <div style={{ fontSize: 48, paddingBottom: 10 }}>Dashi Demo</div>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Typography fontSize="3em" fontWeight="bold">
+        Dashi Demo
+      </Typography>
       <ExtensionsInfo />
       <PanelsControl />
       <PanelsRow />
-    </>
+    </ThemeProvider>
   );
 }
 

dashi/src/app/App.tsx

@@ -1,4 +1,5 @@
 import useAppStore from "../store/appStore";
+import { Typography } from "@mui/material";
 
 function ExtensionsInfo() {
   const appState = useAppStore();
@@ -9,10 +10,11 @@ function ExtensionsInfo() {
         {extensionsResult.data.map((extension, extIndex) => {
           const id = `extensions.${extIndex}`;
           return (
-            <span
+            <Typography
               key={id}
-              style={{ padding: 5 }}
-            >{`${extension.name}/${extension.version}`}</span>
+              style={{ padding: 4 }}
+              fontSize="small"
+            >{`${extension.name}/${extension.version}`}</Typography>
           );
         })}
       </div>

dashi/src/app/ExtensionInfo.tsx

@@ -1,16 +1,16 @@
-import {CSSProperties, ReactElement} from "react";
+import { CSSProperties, ReactElement } from "react";
 
 import { Contribution } from "../model/contribution";
 import { PropertyChangeHandler } from "../model/component";
 import DashiComponent from "../components/DashiComponent";
 import { ContributionState } from "../store/appStore";
-import {CircularProgress} from "@mui/material";
+import { CircularProgress } from "@mui/material";
 
 const panelContainerStyle: CSSProperties = {
   display: "flex",
   flexDirection: "column",
   width: 400,
-  height: 300,
+  height: 400,
   padding: 5,
   border: "1px gray solid",
 };
@@ -41,7 +41,12 @@ function Panel({ panelModel, panelState, onPropertyChange }: PanelProps) {
       </span>
     );
   } else if (componentModelResult.status === "pending") {
-    panelElement = <span><CircularProgress size={30} color="secondary" /> Loading {panelModel.name}...</span>;
+    panelElement = (
+      <span>
+        <CircularProgress size={30} color="secondary" /> Loading{" "}
+        {panelModel.name}...
+      </span>
+    );
   }
   return <div style={panelContainerStyle}>{panelElement}</div>;
 }

dashi/src/app/Panel.tsx

@@ -1,7 +1,7 @@
 import useAppStore, { ContribPoint } from "../store/appStore";
 import { hidePanel } from "../actions/hidePanel";
 import { showPanel } from "../actions/showPanel";
-import {Checkbox} from "@mui/material";
+import { Checkbox, FormControlLabel, FormGroup } from "@mui/material";
 
 const contribPoint: ContribPoint = "panels";
 
@@ -23,29 +23,32 @@ function PanelsControl() {
     throw Error("internal state error");
   }
   return (
-    <div style={{ padding: 5 }}>
+    <FormGroup>
       {panelStates.map((panelState, panelIndex) => {
         const id = `panels.${panelIndex}`;
         return (
-          <div key={id}>
-            <Checkbox
-              color="secondary"
-              id={id}
-              checked={panelState.visible || false}
-              value={panelIndex}
-              onChange={(e) => {
-                if (e.currentTarget.checked) {
-                  showPanel(panelIndex);
-                } else {
-                  hidePanel(panelIndex);
-                }
-              }}
-            />
-            <label htmlFor={id}>{panelModels[panelIndex].name}</label>
-          </div>
+          <FormControlLabel
+            key={panelIndex}
+            label={panelModels[panelIndex].name}
+            control={
+              <Checkbox
+                color="secondary"
+                id={id}
+                checked={panelState.visible || false}
+                value={panelIndex}
+                onChange={(e) => {
+                  if (e.currentTarget.checked) {
+                    showPanel(panelIndex);
+                  } else {
+                    hidePanel(panelIndex);
+                  }
+                }}
+              />
+            }
+          />
         );
       })}
-    </div>
+    </FormGroup>
   );
 }
 

dashi/src/app/PanelsControl.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,
@@ -43,16 +40,15 @@ function DashiDropdown({
     });
   };
   return (
-    <FormControl>
-      {label && <InputLabel>{label}</InputLabel>}
+    <FormControl variant="filled" size="small" style={style}>
+      {label && <InputLabel id={`${id}-label`}>{label}</InputLabel>}
       <Select
+        labelId={`${id}-label`}
         id={id}
         name={name}
-        style={style}
-        value={`${dropdownValue}`}
+        value={`${value}`}
         disabled={disabled}
         onChange={handleChange}
-        variant={"filled"}
       >
         {options.map(([text, value], index) => (
           <MenuItem key={index} value={value}>