ContributionState.state --> ContributionState.container; using it in the demo as such

Author: forman

dashi/src/demo/actions/hidePanel.ts

@@ -1,6 +1,8 @@
-import { updateContributionState } from "@/lib";
+import { updateContributionContainer } from "@/lib";
 import type { PanelState } from "@/demo/types";
 
 export function hidePanel(panelIndex: number) {
-  updateContributionState<PanelState>("panels", panelIndex, { visible: false });
+  updateContributionContainer<PanelState>("panels", panelIndex, {
+    visible: false,
+  });
 }

dashi/src/demo/actions/showPanel.ts

@@ -1,6 +1,8 @@
-import { updateContributionState } from "@/lib";
+import { updateContributionContainer } from "@/lib";
 import type { PanelState } from "@/demo/types";
 
 export function showPanel(panelIndex: number) {
-  updateContributionState<PanelState>("panels", panelIndex, { visible: true });
+  updateContributionContainer<PanelState>("panels", panelIndex, {
+    visible: true,
+  });
 }

dashi/src/demo/components/Panel.tsx

@@ -1,11 +1,7 @@
 import type { CSSProperties, ReactElement } from "react";
 import CircularProgress from "@mui/material/CircularProgress";
-
-import {
-  type ComponentChangeHandler,
-  type ContributionState,
-  Component,
-} from "@/lib";
+import { Component } from "@/lib";
+import type { ComponentState, ComponentChangeHandler } from "@/lib";
 import type { PanelState } from "@/demo/types";
 
 const panelContainerStyle: CSSProperties = {
@@ -32,39 +28,43 @@ const panelContentStyle: CSSProperties = {
   padding: 2,
 };
 
-interface PanelProps extends ContributionState<PanelState> {
+interface PanelProps extends PanelState {
+  componentProps?: ComponentState;
+  componentStatus?: string;
+  componentError?: { message: string };
   onChange: ComponentChangeHandler;
 }
 
 function Panel({
-  name,
-  state,
-  component,
-  componentResult,
+  title,
+  visible,
+  componentProps,
+  componentStatus,
+  componentError,
   onChange,
 }: PanelProps) {
-  if (!state.visible) {
+  if (!visible) {
     return null;
   }
   let panelElement: ReactElement | null = null;
-  if (component) {
-    panelElement = <Component {...component} onChange={onChange} />;
-  } else if (componentResult.error) {
+  if (componentProps) {
+    panelElement = <Component {...componentProps} onChange={onChange} />;
+  } else if (componentError) {
     panelElement = (
       <span>
-        Error loading {name}: {componentResult.error.message}
+        Error loading panel {title}: {componentError.message}
       </span>
     );
-  } else if (componentResult.status === "pending") {
+  } else if (componentStatus === "pending") {
     panelElement = (
       <span>
-        <CircularProgress size={30} color="secondary" /> Loading {name}...
+        <CircularProgress size={30} color="secondary" /> Loading {title}...
       </span>
     );
   }
   return (
     <div style={panelContainerStyle}>
-      <div style={panelHeaderStyle}>{state.title}</div>
+      <div style={panelHeaderStyle}>{title}</div>
       <div style={panelContentStyle}>{panelElement}</div>
     </div>
   );

dashi/src/demo/components/PanelsControl.tsx

@@ -17,15 +17,16 @@ function PanelsControl() {
     <FormGroup sx={{ display: "flex", flexDirection: "row" }}>
       {panelStates.map((panelState, panelIndex) => {
         const id = `panels.${panelIndex}`;
+        const { title, visible } = panelState.container;
         return (
           <FormControlLabel
             key={panelIndex}
-            label={panelState.state.title}
+            label={title}
             control={
               <Checkbox
                 color="secondary"
                 id={id}
-                checked={panelState.state.visible || false}
+                checked={visible || false}
                 value={panelIndex}
                 onChange={(e) => {
                   if (e.currentTarget.checked) {

dashi/src/demo/components/PanelsRow.tsx

@@ -1,5 +1,3 @@
-import type { JSX } from "react";
-
 import { type ComponentChangeEvent, handleComponentChange } from "@/lib";
 import { usePanelStates } from "@/demo/hooks";
 import Panel from "./Panel";
@@ -17,23 +15,21 @@ function PanelsRow() {
   ) => {
     handleComponentChange("panels", panelIndex, panelEvent);
   };
-  const visiblePanels: JSX.Element[] = [];
-  panelStates.forEach((panelState, panelIndex) => {
-    if (panelState.state.visible) {
-      visiblePanels.push(
-        <Panel
-          key={panelIndex}
-          {...panelState}
-          onChange={(e) => handlePanelChange(panelIndex, e)}
-        />,
-      );
-    }
+  const panels = panelStates.map((panelState, panelIndex) => {
+    const { container, component, componentResult } = panelState;
+    return (
+      <Panel
+        key={panelIndex}
+        {...container}
+        componentProps={component}
+        componentStatus={componentResult.status}
+        componentError={componentResult.error}
+        onChange={(e) => handlePanelChange(panelIndex, e)}
+      />
+    );
   });
-  const panelElements = <>{visiblePanels}</>;
   return (
-    <div style={{ display: "flex", gap: 5, paddingTop: 10 }}>
-      {panelElements}
-    </div>
+    <div style={{ display: "flex", gap: 5, paddingTop: 10 }}>{panels}</div>
   );
 }
 

dashi/src/lib/actions/helpers/applyStateChangeRequests.test.ts

@@ -35,7 +35,7 @@ describe("Test that applyContributionChangeRequests()", () => {
         name: "",
         extension: "",
         componentResult: { status: "ok" },
-        state: { visible: true },
+        container: { visible: true },
         component: componentTree,
       },
     ],

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

@@ -69,30 +69,27 @@ export function applyContributionChangeRequests(
   stateChangeRequests.forEach(
     ({ contribPoint, contribIndex, stateChanges }) => {
       const contribution = contributionsRecord[contribPoint][contribIndex];
-      const state = applyStateChanges(
-        contribution.state,
-        stateChanges.filter(
-          (stateChange) => stateChange.link === "container" && !stateChange.id,
-        ),
+      const container = applyStateChanges(
+        contribution.container,
+        stateChanges.filter((stateChange) => stateChange.link === "container"),
       );
       const component = applyComponentStateChanges(
         contribution.component,
         stateChanges.filter(
           (stateChange) =>
-            (!stateChange.link || stateChange.link === "component") &&
-            stateChange.id,
+            !stateChange.link || stateChange.link === "component",
         ),
       );
       if (
-        state !== contribution.state ||
+        container !== contribution.container ||
         component !== contribution.component
       ) {
         contributionsRecord = {
           ...contributionsRecord,
           [contribPoint]: updateArray<ContributionState>(
             contributionsRecord[contribPoint],
             contribIndex,
-            { ...contribution, state, component },
+            { ...contribution, container, component },
           ),
         };
       }

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

@@ -2,7 +2,7 @@ import { describe, it, expect } from "vitest";
 
 import type { ComponentState, PlotState } from "@/lib/types/state/component";
 import {
-  getComponentStateValue,
+  getInputValueFromComponent,
   getInputValueFromState,
 } from "./getInputValues";
 
@@ -23,10 +23,10 @@ const componentState: ComponentState = {
   value: 14,
 };
 
-describe("Test that getComponentStateValue()", () => {
+describe("Test that getInputValueFromComponent()", () => {
   it("works on 1st level", () => {
     expect(
-      getComponentStateValue(componentState, {
+      getInputValueFromComponent(componentState, {
         link: "component",
         id: "b1",
         property: "value",
@@ -36,7 +36,7 @@ describe("Test that getComponentStateValue()", () => {
 
   it("works on 2nd level", () => {
     expect(
-      getComponentStateValue(componentState, {
+      getInputValueFromComponent(componentState, {
         link: "component",
         id: "p1",
         property: "chart",
@@ -46,15 +46,15 @@ describe("Test that getComponentStateValue()", () => {
 
   it("works on 3rd level", () => {
     expect(
-      getComponentStateValue(componentState, {
+      getInputValueFromComponent(componentState, {
         link: "component",
         id: "cb1",
         property: "value",
       }),
     ).toEqual(true);
 
     expect(
-      getComponentStateValue(componentState, {
+      getInputValueFromComponent(componentState, {
         link: "component",
         id: "dd1",
         property: "value",

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

@@ -25,8 +25,8 @@ export function getInputValue<S extends object = object>(
   const dataSource = input.link || "component";
   if (dataSource === "component" && contributionState.component) {
     // Return value of a property of some component in the tree
-    inputValue = getComponentStateValue(contributionState.component, input);
-  } else if (dataSource === "container" && contributionState.state) {
+    inputValue = getInputValueFromComponent(contributionState.component, input);
+  } else if (dataSource === "container" && contributionState.container) {
     inputValue = getInputValueFromState(input, hostState);
   } else if (dataSource === "app" && hostState) {
     inputValue = getInputValueFromState(input, hostState);
@@ -42,7 +42,7 @@ export function getInputValue<S extends object = object>(
 }
 
 // we export for testing only
-export function getComponentStateValue(
+export function getInputValueFromComponent(
   componentState: ComponentState,
   input: Input,
 ): unknown {
@@ -53,7 +53,7 @@ export function getComponentStateValue(
   } else if (isContainerState(componentState)) {
     for (let i = 0; i < componentState.components.length; i++) {
       const item = componentState.components[i];
-      const itemValue = getComponentStateValue(item, input);
+      const itemValue = getInputValueFromComponent(item, input);
       if (itemValue !== noValue) {
         return itemValue;
       }

dashi/src/lib/actions/initializeContributions.ts

@@ -49,7 +49,7 @@ function newContributionState(
 ): ContributionState {
   return {
     ...rawContribution,
-    state: { ...rawContribution.initialState },
+    container: { ...rawContribution.initialState },
     componentResult: {},
   };
 }