Enhanced interface FrameworkOptions by property getDerivedHostState

Author: forman

CHANGES.md

@@ -1,3 +1,10 @@
+## Version 0.0.17 (in development)
+
+* Enhanced interface `FrameworkOptions` by property `getDerivedHostState`,
+  which is a user-supplied function that can compute derived
+  host state property. 
+  
+
 ## Version 0.0.16 (from 2024/11/12)
 
 Initial, still experimental version. 

chartlets.js/src/lib/actions/handleComponentChange.ts

@@ -49,7 +49,7 @@ function getCallbackRequests(
   changeEvent: ComponentChangeEvent,
 ): CallbackRequest[] {
   const { configuration, contributionsRecord } = store.getState();
-  const { hostStore } = configuration;
+  const { hostStore, getDerivedHostState } = configuration;
   const hostState = hostStore?.getState();
   const contributions = contributionsRecord[contribPoint];
   const contribution = contributions[contribIndex];
@@ -71,7 +71,12 @@ function getCallbackRequests(
           contribIndex,
           callbackIndex,
           inputIndex,
-          inputValues: getInputValues(inputs, contribution, hostState),
+          inputValues: getInputValues(
+            inputs,
+            contribution,
+            hostState,
+            getDerivedHostState,
+          ),
         });
       }
     }

chartlets.js/src/lib/actions/helpers/getInputValues.test.ts

@@ -116,4 +116,19 @@ describe("Test that getInputValueFromState()", () => {
       getInputValueFromState({ link: "container", property: "x.y.2" }, state),
     ).toEqual(6);
   });
+
+  it("works with derived state", () => {
+    const state = { x: { y: [4, 5, 6] } };
+    const getDerivedState = (_state: object, name: string): number | undefined =>
+        name === "x.ySum"
+        ? state.x.y[0] + state.x.y[1] + state.x.y[2]
+        : undefined;
+    expect(
+      getInputValueFromState(
+          { link: "container", property: "x.ySum" },
+          state,
+          getDerivedState,
+      ),
+    ).toEqual(4 + 5 + 6);
+  });
 });

chartlets.js/src/lib/actions/helpers/getInputValues.ts

@@ -2,16 +2,17 @@ import type { Input } from "@/lib/types/model/channel";
 import type { ContributionState } from "@/lib/types/state/contribution";
 import type { ComponentState } from "@/lib/types/state/component";
 import { isContainerState } from "@/lib/actions/helpers/isContainerState";
-import { getValue } from "@/lib/utils/objPath";
+import { getValue, toObjPath } from '@/lib/utils/objPath';
 import { isObject } from "@/lib/utils/isObject";
 
 export function getInputValues<S extends object = object>(
   inputs: Input[],
   contributionState: ContributionState,
   hostState?: S | undefined,
+  getDerivedHostState?: (hostState: object, property: string) => unknown,
 ): unknown[] {
   return inputs.map((input) =>
-    getInputValue(input, contributionState, hostState),
+    getInputValue(input, contributionState, hostState, getDerivedHostState),
   );
 }
 
@@ -20,7 +21,8 @@ const noValue = {};
 export function getInputValue<S extends object = object>(
   input: Input,
   contributionState: ContributionState,
-  hostState?: S | undefined,
+  hostState?: S,
+  getDerivedHostState?: (hostState: object, propertyName: string) => unknown,
 ): unknown {
   let inputValue: unknown = undefined;
   const dataSource = input.link || "component";
@@ -29,8 +31,7 @@ export function getInputValue<S extends object = object>(
   } else if (dataSource === "container" && contributionState.container) {
     inputValue = getInputValueFromState(input, contributionState.container);
   } else if (dataSource === "app" && hostState) {
-    console.log();
-    inputValue = getInputValueFromState(input, hostState);
+    inputValue = getInputValueFromState(input, hostState, getDerivedHostState);
   } else {
     console.warn(`input with unknown data source:`, input);
   }
@@ -64,14 +65,21 @@ export function getInputValueFromComponent(
 // we export for testing only
 export function getInputValueFromState(
   input: Input,
-  state: unknown,
-): unknown | undefined {
+  state: object | undefined,
+  getDerivedState?: (state: object, propertyName: string) => unknown,
+): unknown {
   let inputValue: unknown = state;
   if (input.id && isObject(inputValue)) {
     inputValue = inputValue[input.id];
   }
   if (isObject(inputValue)) {
-    inputValue = getValue(inputValue, input.property);
+    const state = inputValue;
+    const property = toObjPath(input.property);
+    inputValue = getValue(state, property);
+    if (inputValue === undefined && getDerivedState !== undefined) {
+      const propertyName = property.map(v => typeof v === "number" ? v.toString() : v).join(".");
+      inputValue = getDerivedState(state, propertyName);
+    }
   }
   return inputValue;
 }

chartlets.js/src/lib/actions/updateContributionContainer.ts

@@ -48,12 +48,17 @@ function getLayoutInputValues(
   contribIndex: number,
 ): unknown[] {
   const { configuration, contributionsRecord } = store.getState();
-  const { hostStore } = configuration;
+  const { hostStore, getDerivedHostState } = configuration;
   const contributions = contributionsRecord[contribPoint];
   const contribution = contributions[contribIndex];
   const inputs = contribution.layout!.inputs;
   if (inputs && inputs.length > 0) {
-    return getInputValues(inputs, contribution, hostStore?.getState());
+    return getInputValues(
+      inputs,
+      contribution,
+      hostStore?.getState(),
+      getDerivedHostState,
+    );
   } else {
     return [];
   }

chartlets.js/src/lib/types/state/store.ts

@@ -12,6 +12,8 @@ import type { LoggingOptions } from "@/lib/actions/helpers/configureLogging";
 export interface FrameworkOptions<S extends object = object> {
   /** The host applications state management store. */
   hostStore?: StoreApi<S>;
+  /** Get a derived state from given host state. */
+  getDerivedHostState?: <S>(hostState: S, propertyName: string) => unknown;
   /** API options to configure backend. */
   api?: ApiOptions;
   /** Logging options. */