Initial panel title contribution

Author: b-yogesh

dashi/src/actions/setComponentVisibility.ts

@@ -8,8 +8,8 @@ export function setComponentVisibility(
   panelIndex: number,
   visible: boolean,
 ) {
-  const getState = appStore.getState;
-  const contributionStates = getState().contributionStatesRecord[contribPoint];
+  const { contributionStatesRecord } = appStore.getState();
+  const contributionStates = contributionStatesRecord[contribPoint];
   const contributionState = contributionStates[panelIndex];
   if (contributionState.visible === visible) {
     return; // nothing to do

dashi/src/actions/updateContributionState.ts

@@ -6,7 +6,7 @@ export function updateContributionState(
   panelIndex: number,
   panelState: Partial<ContributionState>,
 ) {
-  const contributionStatesRecord = appStore.getState().contributionStatesRecord;
+  const { contributionStatesRecord } = appStore.getState();
   const contribStates = contributionStatesRecord[contribPoint]!;
   appStore.setState({
     contributionStatesRecord: {

dashi/src/app/Panel.tsx

@@ -1,10 +1,10 @@
-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";
+import { PanelModel } from "../model/panel";
 
 const panelContainerStyle: CSSProperties = {
   display: "flex",
@@ -15,8 +15,15 @@ const panelContainerStyle: CSSProperties = {
   border: "1px gray solid",
 };
 
+const panelHeaderStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  textAlign: "center",
+};
+
 interface PanelProps {
-  panelModel: Contribution;
+  panelModel: PanelModel;
   panelState: ContributionState;
   onPropertyChange: PropertyChangeHandler;
 }
@@ -41,9 +48,19 @@ 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>;
+  return (
+    <div style={panelContainerStyle}>
+      <div style={panelHeaderStyle}>{panelModel.title}</div>
+      {panelElement}
+    </div>
+  );
 }
 
 export default Panel;

dashi/src/app/PanelsRow.tsx

@@ -3,19 +3,26 @@ import { PropertyChangeEvent } from "../model/component";
 import useAppStore from "../store/appStore";
 import Panel from "./Panel";
 import handleComponentPropertyChange from "../actions/handleComponentPropertyChange";
+import { PanelModel } from "../model/panel";
 
 const contribPoint = "panels";
 
 function PanelsRow() {
-  const appState = useAppStore();
-
-  console.log("appState", appState);
+  const contributionStatesRecord = useAppStore(
+    (state) => state.contributionStatesRecord,
+  );
+  const contributionsRecordResult = useAppStore(
+    (state) => state.contributionsRecordResult,
+  );
 
   let panelElements: ReactElement | null = null;
-  const contributionsRecordResult = appState.contributionsRecordResult;
   if (contributionsRecordResult.data) {
-    const panelModels = contributionsRecordResult.data[contribPoint];
-    const panelStates = appState.contributionStatesRecord[contribPoint];
+    // 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
+    const panelModels = contributionsRecordResult.data[
+      contribPoint
+    ] as PanelModel[];
+    const panelStates = contributionStatesRecord[contribPoint];
     if (
       !panelModels ||
       !panelStates ||

dashi/src/model/panel.ts

@@ -0,0 +1,5 @@
+import { Contribution } from "./contribution";
+
+export interface PanelModel extends Contribution {
+  title: string;
+}