Restore column-style-changed event and update tests

add splitby tests

packages/perspective-jupyterlab/test/jupyter/widget.spec.js

@@ -214,6 +214,7 @@ describe_jupyter(
                 });
 
                 // Check default config
+                config.plugin_config.default_config = {};
                 expect(config).toEqual({
                     aggregates: {},
                     columns: [
@@ -238,6 +239,7 @@ describe_jupyter(
                     plugin: "Datagrid",
                     plugin_config: {
                         columns: {},
+                        default_config: {},
                         editable: false,
                         scroll_lock: false,
                     },
@@ -299,6 +301,8 @@ w.theme = "Pro Dark"`
                 });
 
                 // Check default config
+                // don't worry about the details of the plugin's default_config, it only pertains to column styles
+                config.plugin_config.default_config = {};
                 expect(config).toEqual({
                     aggregates: {},
                     columns: [
@@ -323,6 +327,7 @@ w.theme = "Pro Dark"`
                     plugin: "Datagrid",
                     plugin_config: {
                         columns: {},
+                        default_config: {},
                         editable: false,
                         scroll_lock: false,
                     },

packages/perspective-viewer-datagrid/test/js/column_style.spec.js

@@ -13,20 +13,6 @@
 import { test, expect } from "@playwright/test";
 import { compareContentsToSnapshot } from "@finos/perspective-test";
 
-async function get_contents(
-    page,
-    selector = "perspective-viewer perspective-viewer-datagrid regular-table",
-    shadow = false
-) {
-    return await page.evaluate(
-        async ({ selector, shadow }) => {
-            const viewer = document.querySelector(selector);
-            return (shadow ? viewer.shadowRoot : viewer).innerHTML || "MISSING";
-        },
-        { selector, shadow }
-    );
-}
-
 async function test_column(page, selector, selector2) {
     const { x, y } = await page.evaluate(async (selector) => {
         const viewer = document.querySelector("perspective-viewer");
@@ -49,13 +35,14 @@ async function test_column(page, selector, selector2) {
     }, selector);
 
     await page.mouse.click(x, y);
-    const style_menu = await page.waitForSelector(
-        `perspective-${selector2}-column-style`
-    );
+    const column_style_selector = `#column-style-container.${selector2}-column-style-container`;
+    await page.waitForSelector(column_style_selector);
 
     await new Promise((x) => setTimeout(x, 3000));
 
-    return get_contents(page, ` perspective-${selector2}-column-style`, true);
+    return await page
+        .locator(`perspective-viewer ${column_style_selector}`)
+        .innerHTML();
 }
 
 test.describe("Column Style Tests", () => {
@@ -88,6 +75,12 @@ test.describe("Column Style Tests", () => {
             viewer.addEventListener("perspective-config-update", (evt) => {
                 window.__events__.push(evt);
             });
+            viewer.addEventListener(
+                "perspective-column-style-change",
+                (evt) => {
+                    window.__events__.push(evt);
+                }
+            );
 
             // Find the column config menu button
             const header_button = viewer.querySelector(
@@ -109,12 +102,12 @@ test.describe("Column Style Tests", () => {
 
         // Await the style menu existing on the page
         const style_menu = await page.waitForSelector(
-            "perspective-number-column-style"
+            "#column-style-container"
         );
 
         const { x: xx, y: yy } = await page.evaluate(async (style_menu) => {
             // Find the 'bar' button
-            const bar_button = style_menu.shadowRoot.querySelector(
+            const bar_button = style_menu.querySelector(
                 '#radio-list-1[name="foreground-list"]'
             );
 
@@ -139,7 +132,7 @@ test.describe("Column Style Tests", () => {
         });
 
         // Expect 1 event
-        expect(count).toEqual(1);
+        expect(count).toEqual(2);
     });
 
     test("Column style menu opens for numeric columns", async ({ page }) => {

rust/perspective-viewer/src/less/column-style.less

@@ -23,7 +23,6 @@
     #column-style-container {
         padding: 8px 12px;
         outline: none;
-        background-color: #ffffff;
         font-size: 12px;
         border: inherit;
         user-select: none;

rust/perspective-viewer/src/rust/components/column_settings_sidebar.rs

@@ -24,6 +24,7 @@ use crate::components::column_settings_sidebar::style_tab::StyleTab;
 use crate::components::containers::sidebar::Sidebar;
 use crate::components::containers::tablist::TabList;
 use crate::components::style::LocalStyle;
+use crate::presentation::Presentation;
 use crate::renderer::Renderer;
 use crate::session::Session;
 use crate::{clone, css, html_template};
@@ -47,6 +48,7 @@ pub struct ColumnSettingsProps {
     pub on_close: Callback<()>,
     pub session: Session,
     pub renderer: Renderer,
+    pub presentation: Presentation,
 }
 
 #[function_component]
@@ -77,10 +79,18 @@ pub fn ColumnSettingsSidebar(p: &ColumnSettingsProps) -> Html {
         p.on_close,
         p.session,
         p.renderer,
+        p.presentation,
         column_name
     );
     let match_fn = Callback::from(move |tab| {
-        clone!(selected_column, on_close, session, renderer, column_name);
+        clone!(
+            selected_column,
+            on_close,
+            session,
+            renderer,
+            presentation,
+            column_name
+        );
         match tab {
             ColumnSettingsTab::Attributes => html! {
                 <AttributesTab
@@ -95,6 +105,7 @@ pub fn ColumnSettingsSidebar(p: &ColumnSettingsProps) -> Html {
                     { column_name }
                     { session }
                     { renderer }
+                    { presentation }
                 />
             },
         }

rust/perspective-viewer/src/rust/components/column_settings_sidebar/attributes_tab.rs

@@ -76,14 +76,16 @@ pub fn AttributesTab(p: &AttributesTabProps) -> Html {
     );
     html_template! {
         if matches!(p.selected_column, ColumnLocator::Expr(_)) {
-            <div class="item_title">{"Expression Editor"}</div>
-            <ExpressionEditor
-                { on_save }
-                { on_validate }
-                { on_delete }
-                session = { &p.session }
-                alias = { (*alias).clone() }
-            />
+            <div id="attributes-tab">
+                <div class="item_title">{"Expression Editor"}</div>
+                <ExpressionEditor
+                    { on_save }
+                    { on_validate }
+                    { on_delete }
+                    session = { &p.session }
+                    alias = { (*alias).clone() }
+                />
+            </div>
         }
     }
 }

rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab.rs

@@ -23,15 +23,17 @@ use crate::components::number_column_style::NumberColumnStyle;
 use crate::components::string_column_style::StringColumnStyle;
 use crate::components::style::LocalStyle;
 use crate::config::Type;
+use crate::presentation::Presentation;
 use crate::renderer::Renderer;
 use crate::session::Session;
 use crate::utils::JsValueSerdeExt;
 use crate::{clone, css, html_template};
 
-#[derive(PartialEq, Clone, Properties)]
+#[derive(Clone, PartialEq, Properties)]
 pub struct StyleTabProps {
     pub session: Session,
     pub renderer: Renderer,
+    pub presentation: Presentation,
     pub column_name: String,
 }
 
@@ -54,6 +56,7 @@ struct Config {
 /// This function sends the config to the plugin using its `restore` method
 fn send_config<T: Serialize + Debug>(
     renderer: Renderer,
+    presentation: Presentation,
     view: JsValue,
     column_name: String,
     column_config: T,
@@ -74,6 +77,9 @@ fn send_config<T: Serialize + Debug>(
                 .await
                 .expect("Unable to call update!");
         });
+        // send a config update event in case we need to listen for it outside of the
+        // viewer
+        presentation.column_settings_updated.emit_all(js_config);
     } else {
         tracing::warn!("Could not restore and restyle plugin!");
     }
@@ -136,12 +142,18 @@ pub fn StyleTab(p: &StyleTabProps) -> Html {
     let view = (*view).clone();
     let title = format!("{} Styling", ty.to_capitalized());
 
-    clone!(p.renderer, p.column_name);
+    clone!(p.renderer, p.presentation, p.column_name);
     let opt_html = match ty {
         Type::String => {
             get_column_config(&renderer, &column_name, ty).map(|(config, default_config)| {
                 let on_change = Callback::from(move |config| {
-                    send_config(renderer.clone(), view.clone(), column_name.clone(), config);
+                    send_config(
+                        renderer.clone(),
+                        presentation.clone(),
+                        view.clone(),
+                        column_name.clone(),
+                        config,
+                    );
                 });
                 html_template! {
                     <div class="item_title">{title.clone()}</div>
@@ -154,7 +166,13 @@ pub fn StyleTab(p: &StyleTabProps) -> Html {
         Type::Datetime | Type::Date => {
             get_column_config(&renderer, &column_name, ty).map(|(config, default_config)| {
                 let on_change = Callback::from(move |config| {
-                    send_config(renderer.clone(), view.clone(), column_name.clone(), config);
+                    send_config(
+                        renderer.clone(),
+                        presentation.clone(),
+                        view.clone(),
+                        column_name.clone(),
+                        config,
+                    );
                 });
                 html_template! {
                     <div class="item_title">{title.clone()}</div>
@@ -172,7 +190,13 @@ pub fn StyleTab(p: &StyleTabProps) -> Html {
         Type::Integer | Type::Float => {
             get_column_config(&renderer, &column_name, ty).map(|(config, default_config)| {
                 let on_change = Callback::from(move |config| {
-                    send_config(renderer.clone(), view.clone(), column_name.clone(), config);
+                    send_config(
+                        renderer.clone(),
+                        presentation.clone(),
+                        view.clone(),
+                        column_name.clone(),
+                        config,
+                    );
                 });
                 html_template! {
                     <div class="item_title">{title.clone()}</div>
@@ -184,13 +208,17 @@ pub fn StyleTab(p: &StyleTabProps) -> Html {
         }
         _ => None,
     };
-    opt_html.unwrap_or(html_template! {
+    let inner = opt_html.unwrap_or(html_template! {
         <div class="item_title">{title}</div>
         <div class="style_contents">
             <LocalStyle href={ css!("column-style") } />
             <div id="column-style-container" class="no-style">
                 <div class="style-contents">{ "No styles available" }</div>
             </div>
         </div>
-    })
+    });
+
+    html! {
+        <div id="style-tab">{inner}</div>
+    }
 }

rust/perspective-viewer/src/rust/components/datetime_column_style.rs

@@ -246,7 +246,7 @@ impl Component for DatetimeColumnStyle {
 
         html_template! {
             <LocalStyle href={ css!("column-style") } />
-            <div id="column-style-container">
+            <div id="column-style-container" class="datetime-column-style-container">
                 <div class="column-style-label">
                     <label class="indent">{ "Color" }</label>
                 </div>

rust/perspective-viewer/src/rust/components/number_column_style.rs

@@ -369,7 +369,7 @@ impl Component for NumberColumnStyle {
 
         html_template! {
             <LocalStyle href={ css!("column-style") } />
-            <div id="column-style-container">
+            <div id="column-style-container" class="number-column-style-container">
                 <div class="column-style-label">
                     <label id="fixed-examples" class="indent">{
                         self.make_fixed_text(ctx)

rust/perspective-viewer/src/rust/components/string_column_style.rs

@@ -200,7 +200,7 @@ impl Component for StringColumnStyle {
 
         html_template! {
             <LocalStyle href={ css!("column-style") } />
-            <div id="column-style-container">
+            <div id="column-style-container" class="string-column-style-container">
                 <div class="column-style-label">
                     <label class="indent">{ "Format" }</label>
                 </div>

rust/perspective-viewer/src/rust/components/viewer.rs

@@ -352,6 +352,7 @@ impl Component for PerspectiveViewer {
                                     <ColumnSettingsSidebar
                                         session = { &ctx.props().session }
                                         renderer = { &ctx.props().renderer }
+                                        presentation = {&ctx.props().presentation}
                                         {selected_column}
                                         on_close = {ctx.link().callback(|_| PerspectiveViewerMsg::ToggleColumnSettings(None, None))}
                                     />

rust/perspective-viewer/src/rust/custom_events.rs

@@ -31,7 +31,7 @@ use crate::*;
 /// on `CustomElements`, but when it is `drop()` the Custom Element will no
 /// longer dispatch events such as `"perspective-config-change"`.
 #[derive(Clone)]
-pub struct CustomEvents(Rc<(CustomEventsDataRc, [Subscription; 5])>);
+pub struct CustomEvents(Rc<(CustomEventsDataRc, [Subscription; 6])>);
 
 #[derive(Clone)]
 struct CustomEventsDataRc(Rc<CustomEventsData>);
@@ -85,12 +85,19 @@ impl CustomEvents {
         let column_settings_sub = presentation.column_settings_open_changed.add_listener({
             clone!(data);
             move |(open, column_name)| {
-                tracing::debug!("column_settings_open_changed: {open}, {column_name:?}");
                 data.dispatch_column_settings_open_changed(open, column_name);
                 // column_settings is ethereal; do not change the config
             }
         });
 
+        let column_settings_updated = presentation.column_settings_updated.add_listener({
+            clone!(data);
+            move |config: JsValue| {
+                data.dispatch_column_style_changed(&config);
+                data.clone().dispatch_config_update();
+            }
+        });
+
         let plugin_sub = renderer.plugin_changed.add_listener({
             clone!(data);
             move |plugin| {
@@ -110,6 +117,7 @@ impl CustomEvents {
             theme_sub,
             settings_sub,
             column_settings_sub,
+            column_settings_updated,
             plugin_sub,
             view_sub,
         ])))
@@ -131,6 +139,16 @@ impl CustomEventsDataRc {
         self.elem.dispatch_event(&event.unwrap()).unwrap();
     }
 
+    fn dispatch_column_style_changed(&self, config: &JsValue) {
+        let mut event_init = web_sys::CustomEventInit::new();
+        event_init.detail(config);
+        let event = web_sys::CustomEvent::new_with_event_init_dict(
+            "perspective-column-style-change",
+            &event_init,
+        );
+        self.elem.dispatch_event(&event.unwrap()).unwrap();
+    }
+
     fn dispatch_column_settings_open_changed(&self, open: bool, column_name: Option<String>) {
         let mut event_init = web_sys::CustomEventInit::new();
         event_init.detail(&JsValue::from(