From eb761c68439890c08114be876960a2bedab06ecc Mon Sep 17 00:00:00 2001 From: Albert Kyei Date: Mon, 4 Nov 2024 11:41:50 +0000 Subject: [PATCH 1/3] Fix color range update on column edits. Signed-off-by: Albert Kyei --- .../rust/components/form/color_range_selector.rs | 16 ++++++++++++++++ .../src/rust/components/number_column_style.rs | 4 ++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/rust/perspective-viewer/src/rust/components/form/color_range_selector.rs b/rust/perspective-viewer/src/rust/components/form/color_range_selector.rs index 7c49d94119..2184b4ce88 100644 --- a/rust/perspective-viewer/src/rust/components/form/color_range_selector.rs +++ b/rust/perspective-viewer/src/rust/components/form/color_range_selector.rs @@ -44,6 +44,22 @@ pub fn color_chooser_component(props: &ColorRangeProps) -> Html { false, ) }); + + { + let gradient = gradient.clone(); + + use_effect_with( + (props.neg_color.clone(), props.pos_color.clone()), + move |(neg_color, pos_color)| { + let current_gradient = gradient.clone(); + if ¤t_gradient.0 != pos_color || ¤t_gradient.1 != neg_color { + gradient.set((pos_color.clone(), neg_color.clone(), true)); + } + || () + }, + ); + } + let on_pos_color = use_callback( (gradient.clone(), props.on_pos_color.clone()), |event: InputEvent, (gradient, on_pos_color)| { diff --git a/rust/perspective-viewer/src/rust/components/number_column_style.rs b/rust/perspective-viewer/src/rust/components/number_column_style.rs index a72f88e206..bfddfa2078 100644 --- a/rust/perspective-viewer/src/rust/components/number_column_style.rs +++ b/rust/perspective-viewer/src/rust/components/number_column_style.rs @@ -203,7 +203,7 @@ impl Component for NumberColumnStyle { } self.dispatch_config(ctx); - false + true }, NumberColumnStyleMsg::NegColorChanged(side, val) => { if side == Fg { @@ -215,7 +215,7 @@ impl Component for NumberColumnStyle { } self.dispatch_config(ctx); - false + true }, NumberColumnStyleMsg::NumberForeModeChanged(val) => { self.fg_mode = val; From 9e3bda216f8adb4eb260f83a3fe2c8c21d900315 Mon Sep 17 00:00:00 2001 From: Albert Kyei Date: Mon, 4 Nov 2024 11:42:08 +0000 Subject: [PATCH 2/3] Add test for color range fix. Signed-off-by: Albert Kyei --- .../test/js/column_settings.spec.ts | 75 +++++++++++++++++++ 1 file changed, 75 insertions(+) diff --git a/rust/perspective-viewer/test/js/column_settings.spec.ts b/rust/perspective-viewer/test/js/column_settings.spec.ts index 4c24bbc068..776a52518c 100644 --- a/rust/perspective-viewer/test/js/column_settings.spec.ts +++ b/rust/perspective-viewer/test/js/column_settings.spec.ts @@ -211,4 +211,79 @@ test.describe("Plugin Styles", () => { await view.columnSettingsSidebar.attributesTab.saveBtn.click(); expect(await selectedTab()).toBe("Attributes"); }); + + test("Color range component updates when switching columns to edit different number column without closing sidebar", async ({ + page, + }) => { + const view = new PageView(page); + await view.restore({ + plugin: "Datagrid", + columns: ["Row ID", "Postal Code"], + settings: true, + }); + + const defaultNegColor = "#ff471e"; + + let settingsPanel = await view.openSettingsPanel(); + + let activeColumns = settingsPanel.activeColumns; + let firstCol = await activeColumns.getColumnByName("Row ID"); + let secondCol = await activeColumns.getColumnByName("Postal Code"); + + // edit first number column + await firstCol.editBtn.waitFor(); + await firstCol.editBtn.click(); + await checkTab(view.columnSettingsSidebar, true, false, false); + + // expect style tab is selected + const selectedTab = async () => { + return await view.columnSettingsSidebar.selectedTab + .locator(".tab-title") + .getAttribute("id"); + }; + expect(await selectedTab()).toBe("Style"); + + // expect -ve color input on color range is present and has valid default value + const getFgColorNeg = async () => { + return view.columnSettingsSidebar.styleTab.container.locator("#fg-color-neg"); + }; + let fgColorNeg = await getFgColorNeg(); + + expect(fgColorNeg).toBeTruthy(); + expect(fgColorNeg).toBeVisible(); + expect(fgColorNeg).toBeEditable(); + expect(fgColorNeg).toHaveValue(defaultNegColor); + + // change -ve color from default + await fgColorNeg.fill("#ffff00"); + + let negColorValue = await fgColorNeg.inputValue(); + expect(negColorValue).toBe("#ffff00"); + + // edit second number column + await secondCol.editBtn.waitFor(); + await secondCol.editBtn.click(); + + // expect -ve color input on color range is present + fgColorNeg = await getFgColorNeg(); + + expect(fgColorNeg).toBeVisible(); + + // expect -ve color input updates and switches back to default + negColorValue = await fgColorNeg.inputValue(); + expect(negColorValue).toBe(defaultNegColor); + + // edit first number column + await firstCol.editBtn.waitFor(); + await firstCol.editBtn.click(); + + // expect -ve color input on color range is present + fgColorNeg = await getFgColorNeg(); + + expect(fgColorNeg).toBeVisible(); + + // expect -ve color input updates and switches back to the changed value + negColorValue = await fgColorNeg.inputValue(); + expect(negColorValue).toBe("#ffff00"); + }); }); From 71aed03b248672be5fdfd73785eec14b77fcfb63 Mon Sep 17 00:00:00 2001 From: Albert Kyei Date: Mon, 4 Nov 2024 11:45:44 +0000 Subject: [PATCH 3/3] Fix lint errors. Signed-off-by: Albert Kyei --- rust/perspective-viewer/test/js/column_settings.spec.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/rust/perspective-viewer/test/js/column_settings.spec.ts b/rust/perspective-viewer/test/js/column_settings.spec.ts index 776a52518c..d453d0c13e 100644 --- a/rust/perspective-viewer/test/js/column_settings.spec.ts +++ b/rust/perspective-viewer/test/js/column_settings.spec.ts @@ -245,7 +245,9 @@ test.describe("Plugin Styles", () => { // expect -ve color input on color range is present and has valid default value const getFgColorNeg = async () => { - return view.columnSettingsSidebar.styleTab.container.locator("#fg-color-neg"); + return view.columnSettingsSidebar.styleTab.container.locator( + "#fg-color-neg" + ); }; let fgColorNeg = await getFgColorNeg(); @@ -264,7 +266,7 @@ test.describe("Plugin Styles", () => { await secondCol.editBtn.waitFor(); await secondCol.editBtn.click(); - // expect -ve color input on color range is present + // expect -ve color input on color range is present fgColorNeg = await getFgColorNeg(); expect(fgColorNeg).toBeVisible(); @@ -277,7 +279,7 @@ test.describe("Plugin Styles", () => { await firstCol.editBtn.waitFor(); await firstCol.editBtn.click(); - // expect -ve color input on color range is present + // expect -ve color input on color range is present fgColorNeg = await getFgColorNeg(); expect(fgColorNeg).toBeVisible();