Merge pull request #331 from Point72/tkp/spaday-save-select-custom

Fix Spaday layout selection and chart restores

Author: timkpaine

TODO_SPADAY.md

@@ -7,8 +7,8 @@
 The `<perspective-panel>` theme path currently:
 
 1. calls `restore({theme})` for the element chrome and active panel;
-2. calls `saveWorkspace()` to enumerate panels;
-3. loops over every panel and awaits `restore({theme}, {panel})` sequentially.
+1. calls `saveWorkspace()` to enumerate panels;
+1. loops over every panel and awaits `restore({theme}, {panel})` sequentially.
 
 Each restore restyles a Perspective plugin, so total latency grows with the number of tabs. Browser profiling against Perspective 5.2 showed a visibly delayed transition with eight panels. In one run, sequential completion took about 300 ms; issuing the panel restores with `Promise.all()` reduced it to about 150 ms. Exact timings vary with panel contents and render state.
 
@@ -18,3 +18,15 @@ Upstream action:
 - After `saveWorkspace()`, restore background panel themes concurrently with `Promise.all()` rather than a serial `for ... of` loop.
 - Verify concurrent restores remain safe while live tables update and while a layout replacement is queued.
 - Add a multi-panel browser test that checks all saved panel themes after toggling the global theme.
+
+## Bundle Perspective chart plugins
+
+`spaday-perspective` 0.4.3 registers only the Datagrid plugin. A whole-element layout containing chart plugins such as `X Bar` or `Treemap` restores its geometry, but Perspective falls back to Datagrid for those panels because the requested plugins are unavailable.
+
+csp-gateway temporarily works around this by building `spaday-charts.js` from `@perspective-dev/viewer-charts` and loading it as an additional Spaday component package. Remove that bundle and package registration once `spaday-perspective` provides chart plugins itself.
+
+Upstream action:
+
+- Bundle and register `@perspective-dev/viewer-charts` with `<perspective-panel>`, or expose a documented package/option that does so.
+- Add a browser test that restores a multi-panel workspace containing Datagrid, `X Bar`, and `Treemap`, then verifies `saveWorkspace()` retains each requested plugin.
+- Keep chart and Perspective viewer versions aligned so plugin registration uses the same Perspective runtime.

csp_gateway/server/modules/web/perspective.py

@@ -753,7 +753,7 @@ def ui(self, app: "GatewayUI") -> None:
             ),
         )
         default_view = self.default_layout or "__default__"
-        app.seed_store(view=default_view)
+        app.seed_store(view=default_view, layout_view=default_view)
         app.add(Region.HEADER_RIGHT, app.layout_selector(layouts, value=default_view), order=90)
         app.add(Region.HEADER_RIGHT, app.save_layout_button(), order=100)
         app.add(

csp_gateway/server/web/spaday_assets/actions.js

@@ -1,6 +1,8 @@
 import { registerHandler } from "../../js/cdn/index.js";
 
+const CUSTOM_LAYOUT = "Custom Layout";
 const CUSTOM_LAYOUT_STORAGE_KEY = "csp_gateway_demo_config";
+const LAYOUT_SELECTOR_ID = "gateway-layout-selector";
 const WORKSPACE_ID = "gateway-workspace";
 
 function stripTransientFields(layout) {
@@ -27,6 +29,11 @@ registerHandler("csp-gateway:save-layout", (_event, currentTarget) => {
       delete customLayout[key];
     }
     Object.assign(customLayout, layout);
+
+    const selector =
+      currentTarget.ownerDocument.getElementById(LAYOUT_SELECTOR_ID);
+    selector.value = CUSTOM_LAYOUT;
+    selector.dispatchEvent(new Event("input", { bubbles: true }));
   })().catch((error) =>
     console.error("Failed to save Perspective layout:", error),
   );

csp_gateway/server/web/spaday_ui.py

@@ -47,6 +47,7 @@
     concat,
     cond,
     eq,
+    event_value,
     field,
     not_,
     obj,
@@ -90,6 +91,11 @@
     assets_dir=Path(__file__).with_name("spaday_assets"),
     assets=(("js", "actions.js"),),
 )
+_PERSPECTIVE_CHARTS_PACKAGE = ComponentPackage(
+    name="csp-gateway-perspective-charts",
+    assets_dir=Path(__file__).parents[1] / "build",
+    assets=(("js", "spaday-charts.js"),),
+)
 
 
 # Page-level resets that spaday's document template does not ship. The palette is deliberately absent:
@@ -293,7 +299,7 @@ def perspective_panel(
                 parsed = json.loads(layout_json)
             except (TypeError, ValueError):
                 continue
-            layout_expr = cond(eq(field("view"), name), parsed, layout_expr)
+            layout_expr = cond(eq(field("layout_view"), name), parsed, layout_expr)
         fallback = json.dumps(default_layout).replace("<", "\\u003c")
         storage_key = json.dumps(_CUSTOM_LAYOUT_STORAGE_KEY)
         self._store_seeds["custom_layout"] = Js(
@@ -306,7 +312,7 @@ def perspective_panel(
             "catch { return fallback; } "
             "})()"
         )
-        layout_expr = cond(eq(field("view"), _CUSTOM_LAYOUT_NAME), field("custom_layout"), layout_expr)
+        layout_expr = cond(eq(field("layout_view"), _CUSTOM_LAYOUT_NAME), field("custom_layout"), layout_expr)
 
         return (
             PerspectivePanel()
@@ -321,7 +327,13 @@ def layout_selector(self, layouts: dict[str, str], *, value: str | None = None)
 
         Add it to `Region.HEADER_RIGHT` (and `seed_store(view=...)`).
         """
-        select = WaSelect(value=value, size="s").bind("value", "view", mode="two-way").style(width="220px")
+        select = (
+            WaSelect(value=value, size="s")
+            .prop("id", "gateway-layout-selector")
+            .bind("value", "view", mode="two-way")
+            .on("change", SetField("layout_view", event_value()))
+            .style(width="220px")
+        )
         select = select.child(WaOption(value="__default__").text("All Tables"))
         for name in layouts:
             select = select.child(WaOption(value=name).text(name))
@@ -754,7 +766,7 @@ def mount(self) -> None:
             scratch,
             self.build_page,
             # Component libraries ship as their own distributions and are resolved by entry point.
-            packages=["webawesome", "perspective", _GATEWAY_COMPONENT_PACKAGE],
+            packages=["webawesome", "perspective", _GATEWAY_COMPONENT_PACKAGE, _PERSPECTIVE_CHARTS_PACKAGE],
             # spaday infers "source checkout" from a `js/` dir next to itself, which any distribution
             # shipping a top-level `js/` package (plotly does) satisfies -- serving assets we consume
             # from the wheel, never from a spaday checkout.

csp_gateway/tests/server/web/test_spaday_ui.py

@@ -271,6 +271,8 @@ def client(self, gateway):
     def test_layout_actions_are_available_without_server_layouts(self, client: TestClient):
         tree = client.get("/tree.json").text
         assert "Custom Layout" in tree
+        assert "gateway-layout-selector" in tree
+        assert "layout_view" in tree
         assert "Save current layout" in tree
         assert "csp-gateway:save-layout" in tree
         assert "Download layout" in tree
@@ -279,6 +281,7 @@ def test_layout_actions_are_available_without_server_layouts(self, client: TestC
     def test_layout_action_script_is_served(self, client: TestClient):
         page = client.get("/").text
         assert "/components/csp-gateway/actions.js" in page
+        assert "/components/csp-gateway-perspective-charts/spaday-charts.js" in page
         assert "globalThis.cspGatewayCustomLayout" in page
         assert '"gateway-workspace"' in client.get("/tree.json").text
         script = client.get("/components/csp-gateway/actions.js")
@@ -287,8 +290,14 @@ def test_layout_action_script_is_served(self, client: TestClient):
         assert '"csp-gateway:save-layout"' in script.text
         assert '"csp-gateway:download-layout"' in script.text
         assert '"csp_gateway_demo_config"' in script.text
+        assert '"gateway-layout-selector"' in script.text
+        assert 'new Event("input", { bubbles: true })' in script.text
         assert '"gateway-workspace"' in script.text
         assert client.get("/js/cdn/index.js").status_code == 200
+        charts = client.get("/components/csp-gateway-perspective-charts/spaday-charts.js")
+        assert charts.status_code == 200
+        assert "X Bar" in charts.text
+        assert "Treemap" in charts.text
 
     def test_layout_download_is_a_same_origin_attachment(self, client: TestClient):
         layout = {"layout": {"type": "tab-layout", "tabs": []}, "panels": {}}

js/build.mjs

@@ -30,6 +30,10 @@ const BUNDLES = [
     alias: REACT_ALIAS,
     publicPath: "static",
   },
+  {
+    entryPoints: ["./src/js/spaday_charts.js"],
+    outfile: "../csp_gateway/server/build/spaday-charts.js",
+  },
 ];
 
 const WASM_ASSETS = [

js/src/js/spaday_charts.js

@@ -0,0 +1 @@
+import "@perspective-dev/viewer-charts";