Creating a new demo panel

examples/serve/panels-demo/my_viewer_ext/__init__.py

@@ -1,5 +1,7 @@
 from chartlets import Extension
 from .my_panel_1 import panel as my_panel_1
+from .my_panel_2 import panel as my_panel_2
 
 ext = Extension(__name__)
 ext.add(my_panel_1)
+ext.add(my_panel_2)

examples/serve/panels-demo/my_viewer_ext/my_panel_1.py

@@ -1,83 +1,114 @@
+import altair
 from chartlets import Component, Input, State, Output
-from chartlets.components import Box, Dropdown, Checkbox, Typography
+from chartlets.components import Box, Button, Plot, Typography
 
 from xcube.webapi.viewer.contrib import Panel
-from xcube.webapi.viewer.contrib import get_datasets_ctx
+from xcube.webapi.viewer.contrib import get_dataset
 from xcube.server.api import Context
 
 
-panel = Panel(__name__, title="Panel B")
+panel = Panel(__name__, title="2D Histogram")
 
 
-COLORS = [("red", 0), ("green", 1), ("blue", 2), ("yellow", 3)]
+@panel.layout()
+def render_panel(ctx: Context) -> Component:
 
-
-@panel.layout(
-    Input(source="app", property="controlState.selectedDatasetId"),
-)
-def render_panel(
-    ctx: Context,
-    dataset_id: str = "",
-) -> Component:
-
-    opaque = False
-    color = 0
-
-    opaque_checkbox = Checkbox(
-        id="opaque",
-        value=opaque,
-        label="Opaque",
+    info = Typography(
+        text="This plot requires a pinned variable" " and a place to be selected."
     )
 
-    color_dropdown = Dropdown(
-        id="color",
-        value=color,
-        label="Color",
-        options=COLORS,
-        style={"flexGrow": 0, "minWidth": 80},
+    plot = Plot(
+        id="plot",
+        chart=None,
+        style={
+            "display": "flex",
+            "flexDirection": "column",
+            "width": "100%",
+            "height": "100%",
+            "gap": "6px",
+        },
     )
 
-    info_text = Typography(
-        id="info_text", text=update_info_text(ctx, dataset_id, opaque, color)
-    )
+    button = Button(id="button", text="Update", disabled=True, style={"maxWidth": 100})
 
     return Box(
         style={
             "display": "flex",
             "flexDirection": "column",
             "width": "100%",
             "height": "100%",
-            "gap": "6px",
+            "gap": 6,
+            "padding": 6,
         },
-        children=[opaque_checkbox, color_dropdown, info_text],
+        children=[info, plot, button],
     )
 
 
 # noinspection PyUnusedLocal
 @panel.callback(
     Input(source="app", property="controlState.selectedDatasetId"),
-    Input("opaque"),
-    Input("color"),
-    State("info_text", "text"),
-    Output("info_text", "text"),
+    Input(source="app", property="controlState.selectedVariableName"),
+    Input(source="app", property="controlState.selectedDataset2Id"),
+    Input(source="app", property="controlState.selectedVariable2Name"),
+    Input(source="app", property="controlState.selectedTimeLabel"),
+    Input(source="app", property="controlState.selectedPlaceGeometry"),
+    Input("button", "n_clicks"),
+    Output("plot", "chart"),
 )
-def update_info_text(
+def update_plot(
     ctx: Context,
-    dataset_id: str = "",
-    opaque: bool = False,
-    color: int = 0,
-    info_text: str = "",
-) -> str:
-    ds_ctx = get_datasets_ctx(ctx)
-    ds_configs = ds_ctx.get_dataset_configs()
+    dataset_id_1: str = "",
+    variable_name_1: str = "",
+    dataset_id_2: str = 0,
+    variable_name_2: str = "",
+    time_label: float = 0,
+    place_geometry: str = "",
+    n_clicks: int | None = None,  # trigger
+) -> altair.Chart | None:
+    enabled = all(
+        (
+            dataset_id_1,
+            dataset_id_2,
+            variable_name_1,
+            variable_name_2,
+            time_label,
+            place_geometry,
+        )
+    )
+    if not enabled:
+        return None
+    dataset_1 = get_dataset(ctx, dataset_id_1)
+    dataset_2 = get_dataset(ctx, dataset_id_2)
+    variable_1 = dataset_1[variable_name_1]
+    variable_2 = dataset_2[variable_name_2]
 
-    opaque = opaque or False
-    color = color if color is not None else 0
-    return (
-        f"The dataset is {dataset_id},"
-        f" the color is {COLORS[color][0]} and"
-        f" it {'is' if opaque else 'is not'} opaque."
-        f" The length of the last info text"
-        f" was {len(info_text or "")}."
-        f" The number of datasets is {len(ds_configs)}."
+
+@panel.callback(
+    Input(source="app", property="controlState.selectedDatasetId"),
+    Input(source="app", property="controlState.selectedVariableName"),
+    Input(source="app", property="controlState.selectedDataset2Id"),
+    Input(source="app", property="controlState.selectedVariable2Name"),
+    Input(source="app", property="controlState.selectedTimeLabel"),
+    Input(source="app", property="controlState.selectedPlaceGeometry"),
+    Output("button", "disabled"),
+)
+def update_button(
+    ctx: Context,
+    dataset_id_1: str | None = None,
+    variable_name_1: str | None = None,
+    dataset_id_2: str | None = None,
+    variable_name_2: str | None = None,
+    time_label: float | None = None,
+    place_geometry: str | None = None,
+) -> altair.Chart | None:
+    enabled = all(
+        (
+            dataset_id_1,
+            dataset_id_2,
+            variable_name_1,
+            variable_name_2,
+            time_label,
+            place_geometry,
+        )
     )
+    return not enabled

xcube/webapi/viewer/contrib/helpers.py

@@ -1,6 +1,12 @@
+import xarray as xr
+
 from xcube.webapi.datasets.context import DatasetsContext
 from xcube.server.api import Context
 
 
 def get_datasets_ctx(ctx: Context) -> DatasetsContext:
     return ctx.get_api_ctx("datasets")
+
+
+def get_dataset(ctx: Context, dataset_id: str) -> xr.Dataset:
+    return get_datasets_ctx(ctx).get_dataset(dataset_id)