We now create an initial contribution state from contribution

Author: forman

dashi/src/actions/initAppStore.ts

@@ -20,9 +20,13 @@ export function initAppStore() {
         (contribPoint) => {
           const contributions: Contribution[] =
             contributionsRecordResult.data![contribPoint];
-          contributionStatesRecord[contribPoint] = contributions.map(() => ({
-            componentModelResult: {},
-          }));
+          contributionStatesRecord[contribPoint] = contributions.map(
+            (contribution) => ({
+              title: contribution.title,
+              visible: contribution.visible,
+              componentStateResult: {},
+            }),
+          );
         },
       );
       set({ contributionsRecordResult, contributionStatesRecord });

dashi/src/actions/setComponentVisibility.ts

@@ -16,13 +16,13 @@ export function setComponentVisibility(
   if (contributionState.visible === visible) {
     return; // nothing to do
   }
-  if (contributionState.componentModelResult.status) {
+  if (contributionState.componentStateResult.status) {
     updateContributionState(contribPoint, panelIndex, { visible });
   } else {
     // No status yet, so we must load the component
     updateContributionState(contribPoint, panelIndex, {
       visible,
-      componentModelResult: { status: "pending" },
+      componentStateResult: { status: "pending" },
     });
     const inputValues = getLayoutInputValues(contribPoint, panelIndex);
     fetchApiResult(
@@ -33,7 +33,7 @@ export function setComponentVisibility(
     ).then((componentModelResult) => {
       const componentState = componentModelResult?.data;
       updateContributionState(contribPoint, panelIndex, {
-        componentModelResult,
+        componentStateResult: componentModelResult,
         componentState,
       });
     });

dashi/src/app/Panel.tsx

@@ -1,10 +1,10 @@
 import { CSSProperties, ReactElement } from "react";
-
-import DashiComponent from "../components/DashiComponent";
 import { CircularProgress } from "@mui/material";
-import { PanelModel } from "../state/panel";
-import { ContributionState } from "../state/contribution";
+
 import { PropertyChangeHandler } from "../model/event";
+import { Contribution } from "../model/contribution";
+import { ContributionState } from "../state/contribution";
+import DashiComponent from "../components/DashiComponent";
 
 const panelContainerStyle: CSSProperties = {
   display: "flex",
@@ -31,7 +31,7 @@ const panelContentStyle: CSSProperties = {
 };
 
 interface PanelProps {
-  panelModel: PanelModel;
+  panelModel: Contribution;
   panelState: ContributionState;
   onPropertyChange: PropertyChangeHandler;
 }
@@ -42,7 +42,7 @@ function Panel({ panelModel, panelState, onPropertyChange }: PanelProps) {
   }
   const componentState = panelState.componentState;
   let panelElement: ReactElement | null = null;
-  const componentModelResult = panelState.componentModelResult;
+  const componentModelResult = panelState.componentStateResult;
   if (componentModelResult.data && componentState) {
     panelElement = (
       <DashiComponent {...componentState} onPropertyChange={onPropertyChange} />
@@ -63,7 +63,7 @@ function Panel({ panelModel, panelState, onPropertyChange }: PanelProps) {
   }
   return (
     <div style={panelContainerStyle}>
-      <div style={panelHeaderStyle}>{panelModel.title}</div>
+      <div style={panelHeaderStyle}>{panelState.title}</div>
       <div style={panelContentStyle}>{panelElement}</div>
     </div>
   );

dashi/src/app/PanelsRow.tsx

@@ -18,7 +18,7 @@ function PanelsRow() {
   let panelElements: ReactElement | null = null;
   if (contributionsRecordResult.data) {
     // TODO: Validate that PanelModel contains a title (It should be valid).
-    //  It can be done in one central place and not everytime we need to render a panel
+    //  It can be done in one central place and not everytime we need to render a panelModel
     const panelModels = contributionsRecordResult.data[
       contribPoint
     ] as PanelModel[];

dashi/src/model/contribution.ts

@@ -5,4 +5,8 @@ export interface Contribution {
   extension: string;
   layout?: Callback;
   callbacks?: Callback[];
+  // The following properties will become the
+  // initial contribution state
+  title?: string;
+  visible?: boolean;
 }

dashi/src/state/contribution.ts

@@ -2,7 +2,9 @@ import { ApiResult } from "../utils/fetchApiResult";
 import { ComponentState } from "./component";
 
 export interface ContributionState {
+  title?: string;
   visible?: boolean;
-  componentModelResult: ApiResult<ComponentState>;
+  componentStateResult: ApiResult<ComponentState>;
+  // componentStateResult.data
   componentState?: ComponentState;
 }

dashipy/dashipy/lib/contribution.py

@@ -0,0 +1,54 @@
+from typing import Any, Callable
+from abc import ABC
+
+from .callback import Callback, Output, Input
+
+
+class Contribution(ABC):
+    # noinspection PyShadowingBuiltins
+    def __init__(self, name: str, title: str | None = None):
+        self.name = name
+        self.title = title
+        self.extension: str | None = None
+        self.layout_callback: Callback | None = None
+        self.callbacks: list[Callback] = []
+
+    def to_dict(self) -> dict[str, Any]:
+        d = dict(name=self.name)
+        if self.title is not None:
+            d.update(title=self.title)
+        if self.extension is not None:
+            d.update(extension=self.extension)
+        if self.layout_callback is not None:
+            d.update(layout=self.layout_callback.to_dict())
+        if self.callbacks:
+            d.update(callbacks=[cb.to_dict() for cb in self.callbacks])
+        return d
+
+    def layout(self, *args) -> Callable:
+        """Decorator."""
+
+        def decorator(function: Callable) -> Callable:
+            self.layout_callback = Callback.from_decorator(
+                "layout", args, function, outputs_allowed=False
+            )
+            return function
+
+        return decorator
+
+    def callback(self, *args: Input | Output) -> Callable[[Callable], Callable]:
+        """Decorator."""
+
+        def decorator(function: Callable) -> Callable:
+            self.callbacks.append(
+                Callback.from_decorator(
+                    "callback", args, function, outputs_allowed=True
+                )
+            )
+            return function
+
+        return decorator
+
+    def __str__(self):
+        return self.name
+