Merge pull request #8 from bcdev/yogesh-add-panel-title-contribution

Add Panel Title Contribution

Author: forman

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 { 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 { 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;
 }
@@ -48,7 +55,12 @@ function Panel({ panelModel, panelState, onPropertyChange }: PanelProps) {
       </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;
+}

dashipy/dashipy/contribs/panel.py

@@ -1,5 +1,17 @@
+from typing import Any
+
 from dashipy.lib import Contribution
 
 
 class Panel(Contribution):
     """Panel contribution"""
+    def __init__(self, name: str, title: str):
+        super().__init__(name)
+        self.title = title
+
+    def to_dict(self) -> dict[str, Any]:
+        return {
+            **super().to_dict(),
+            "title": self.title
+
+        }

dashipy/dashipy/lib/extension.py

@@ -46,6 +46,9 @@ def decorator(function: Callable) -> Callable:
 
         return decorator
 
+    def __str__(self):
+        return self.name
+
 
 class Extension:
     """A UI Extension."""

dashipy/dashipy/server.py

@@ -17,6 +17,7 @@
 DASHI_EXTENSIONS_KEY = "dashi.extensions"
 DASHI_CONTRIBUTION_POINTS_KEY = "dashi.contribution_points"
 
+# This would done by extension of xcube server
 Extension.add_contrib_point("panels", Panel)
 
 

dashipy/my_extension/my_panel_1.py

@@ -7,7 +7,7 @@
 from dashipy.lib import Output, Input, Component
 
 
-panel = Panel(__name__)
+panel = Panel(__name__, title="Panel A")
 
 
 @panel.layout()

dashipy/my_extension/my_panel_2.py

@@ -7,7 +7,7 @@
 from dashipy.lib import Output, Input, Component
 
 
-panel = Panel(__name__)
+panel = Panel(__name__, title="Panel B")
 
 
 @panel.layout()