Merge pull request #1140 from xcube-dev/xcube-prepare_v1.9.0

Preparing v1.9.0

Author: forman

CHANGES.md

@@ -1,7 +1,16 @@
-## Changes in 1.8.4 (in development)
+## Changes in 1.9.0
 
 ### Enhancements
 
+* Bundled [xcube Viewer 1.5.0](https://github.com/xcube-dev/xcube-viewer/releases/tag/v1.5.0)
+  with an updated UI/UX regarding side panel management including
+  server-side panel extensions.
+
+* Added a new server-side panel extension to the `examples/serve/panels-demo`
+  for demonstration. It shows spectrum plots for a selected map point.
+
+### Other changes
+
 * Extension panels for xcube Viewer of type `xcube.webapi.viewer.contrib.panel.Panel`
   now have two more properties:
   - `icon`: name of a [Material Design Icon](https://fonts.google.com/icons) 
@@ -10,8 +19,6 @@
   - `position`: to set the position of the respective icon button 
      in the viewer's sidebar.
 
-### Other changes
-
 * Added a new abstract class `PreloadedDataStore` that defines the return type of the
   `preload_data` method in `xcube.core.store.DataStore`. The `PreloadedDataStore` is a
   data store containing a `preload_handle` field, which holds the handle

examples/serve/panels-demo/config.yaml

@@ -2,7 +2,7 @@ Viewer:
   Augmentation:
     Path: ""
     Extensions:
-      - my_viewer_ext.ext
+      - demo_panels.ext
   Persistence:
      Path: memory://states
 

examples/serve/panels-demo/my_viewer_ext/__init__.py renamed to examples/serve/panels-demo/demo_panels/__init__.py

@@ -4,14 +4,11 @@
 
 from chartlets import Extension
 
-from .my_panel_1 import panel as my_panel_1
-
-# from .my_panel_2 import panel as my_panel_2
-
-from .my_panel_3 import panel as my_panel_3
+from .panel_histo2d import panel as histo2d_panel
+from .panel_spectrum import panel as spectrum_panel
+from .panel_demo import panel as demo_panel
 
 ext = Extension(__name__)
-ext.add(my_panel_1)
-# ext.add(my_panel_2)
-
-ext.add(my_panel_3)
+ext.add(histo2d_panel)
+ext.add(spectrum_panel)
+ext.add(demo_panel)

examples/serve/panels-demo/my_viewer_ext/my_panel_2.py renamed to examples/serve/panels-demo/demo_panels/panel_demo.py

@@ -8,7 +8,7 @@
 from xcube.server.api import Context
 from xcube.webapi.viewer.contrib import Panel, get_datasets_ctx
 
-panel = Panel(__name__, title="Panel B")
+panel = Panel(__name__, title="Demo Panel", position=5)
 
 
 COLORS = [(0, "red"), (1, "green"), (2, "blue"), (3, "yellow")]
@@ -50,7 +50,13 @@ def render_panel(
             "height": "100%",
             "gap": "6px",
         },
-        children=[opaque_checkbox, color_select, info_text],
+        children=[
+            "This panel just demonstrates how server-side extensions work. "
+            "It has no useful functionality.",
+            opaque_checkbox,
+            color_select,
+            info_text
+        ],
     )
 
 

examples/serve/panels-demo/my_viewer_ext/my_panel_1.py renamed to examples/serve/panels-demo/demo_panels/panel_histo2d.py

@@ -51,20 +51,24 @@ def render_panel(ctx: Context, dataset_id: str | None = None) -> Component:
             "flexDirection": "row",
             "alignItems": "center",
             "gap": 6,
-            "padding": 6,
         },
     )
 
     return Box(
-        children=[controls, plot],
+        children=[
+            "Create or select a region shape in the map, then select two "
+            "variables from the dropdowns, and press 'Update' to create "
+            "a 2D histogram plot.",
+            controls,
+            plot
+        ],
         style={
             "display": "flex",
             "flexDirection": "column",
             "alignItems": "center",
             "width": "100%",
             "height": "100%",
             "gap": 6,
-            "padding": 6,
         },
     )
 
@@ -195,7 +199,7 @@ def update_plot(
             color=alt.Color("z:Q", scale=alt.Scale(scheme="viridis"), title="Density"),
             tooltip=[var_1_name, var_2_name, "z:Q"],
         )
-    ).properties(width=360, height=360)
+    ).properties(width=300, height=300)
 
     return chart
 

examples/serve/panels-demo/my_viewer_ext/my_panel_3.py renamed to examples/serve/panels-demo/demo_panels/panel_spectrum.py

@@ -18,7 +18,7 @@
 from xcube.core.extract import get_cube_values_for_points
 from xcube.core.gridmapping import GridMapping
 
-panel = Panel(__name__, title="Spectral View", icon="light")
+panel = Panel(__name__, title="Spectrum View (Demo)", icon="light", position=4)
 
 
 @panel.layout(
@@ -73,20 +73,23 @@ def render_panel(
             "justifyContent": "space-between",
             "width": "100%",
             "gap": 6,
-            "padding": 6,
         },
     )
 
     return Box(
-        children=[control_bar, plot],
+        children=[
+            "Select a map point from the dropdown and press 'Update' "
+            "to create a spectrum plot for that point and the selected time.",
+            control_bar,
+            plot,
+        ],
         style={
             "display": "flex",
             "flexDirection": "column",
             "alignItems": "center",
             "width": "100%",
             "height": "100%",
             "gap": 6,
-            "padding": 6,
         },
     )
 
@@ -228,7 +231,7 @@ def update_plot(
             color="places:N",
             tooltip=["variable", "wavelength", "reflectance"],
         )
-    ).properties(width=560, height=260)
+    ).properties(width=300, height=200)
 
     return chart
 

xcube/version.py

@@ -2,4 +2,4 @@
 # Permissions are hereby granted under the terms of the MIT License:
 # https://opensource.org/licenses/MIT.
 
-version = "1.8.4.dev0"
+version = "1.9.0"

xcube/webapi/viewer/dist/assets/appReducer-DjbLKPde.css

@@ -21,11 +21,18 @@ ${extensions}
 
 ## Available State Properties
 
-In the following, xcube Viewer's state properties are listed.
-These properties can be accessed in the input and state channels you pass
-to the `layout()` and `callback()` decorators. To trigger a callback 
-call when a state property changes use the input syntax
-`Input("@app", <property>)`. To just read a property from the state use 
-`State("@app", <property>)`.
+xcube Viewer exposes some of its application state properties to Python 
+extension components, e.g., `panel = Panel(...)`. The current values of state 
+properties can be accessed via `Input` and `State` channels you define for your 
+extension component decorators, i.e., `@panel.layout(...)` and/or `@panel.callback(...)`. 
+
+- To trigger a callback call when a state property changes use the input syntax
+  `Input("@app", "<property>")`. 
+- To just read a property from the state use `State("@app", "<property>")`. This
+  will not trigger a call to your callback.
+
+The following state properties of xcube Viewer's are made available
+to extensions:
+
 
 ${derivedState}

xcube/webapi/viewer/dist/assets/appReducer-vlRVeAB-.js

@@ -20,8 +20,9 @@
     <link rel="apple-touch-icon" href="./images/logo192.png"/>
     <link rel="manifest" href="./manifest.json"/>
     <title>xcube Viewer</title>
-  <script type="module" crossorigin src="./assets/index-DH-K2gae.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-DJNsTand.css">
+  <script type="module" crossorigin src="./assets/html-BvONBtLL.js"></script>
+  <link rel="modulepreload" crossorigin href="./assets/appReducer-vlRVeAB-.js">
+  <link rel="stylesheet" crossorigin href="./assets/appReducer-DjbLKPde.css">
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>