You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by di...@apache.org on 2022/09/27 14:16:21 UTC
[superset] branch chore/color-consistency-e2e created (now 9bc7d4fc05)
This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a change to branch chore/color-consistency-e2e
in repository https://gitbox.apache.org/repos/asf/superset.git
at 9bc7d4fc05 Test color scheme across nested and main tabs
This branch includes the following new commits:
new 0aa409ba30 Merge branch 'feat-color-enhancement' of https://github.com/stephenLYZ/superset into chore/color-consistency-e2e
new 9bc7d4fc05 Test color scheme across nested and main tabs
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[superset] 02/02: Test color scheme across nested and main tabs
Posted by di...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch chore/color-consistency-e2e
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 9bc7d4fc05d051cd9e2ef65f87a53f0e0746c3c5
Author: geido <di...@gmail.com>
AuthorDate: Tue Sep 27 17:16:04 2022 +0300
Test color scheme across nested and main tabs
---
.../cypress/integration/dashboard/editmode.test.ts | 312 ++++++++++++++++++---
.../cypress-base/cypress/support/index.d.ts | 6 +
.../cypress-base/cypress/support/index.ts | 29 ++
superset/examples/tabbed_dashboard.py | 34 ++-
4 files changed, 343 insertions(+), 38 deletions(-)
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/editmode.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/editmode.test.ts
index c7b5f31288..13c6b53947 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/editmode.test.ts
+++ b/superset-frontend/cypress-base/cypress/integration/dashboard/editmode.test.ts
@@ -16,8 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { SAMPLE_DASHBOARD_1 } from 'cypress/utils/urls';
-import { drag, resize } from 'cypress/utils';
+import { SAMPLE_DASHBOARD_1, TABBED_DASHBOARD } from 'cypress/utils/urls';
+import { drag, resize, waitForChartLoad } from 'cypress/utils';
import * as ace from 'brace';
import { interceptGet, interceptUpdate } from './utils';
import { interceptFiltering as interceptCharts } from '../explore/utils';
@@ -60,17 +60,46 @@ function discardChanges() {
cy.getBySel('undo-action').click({ force: true });
}
-function visitEdit() {
+function visitEdit(sampleDashboard = SAMPLE_DASHBOARD_1) {
interceptCharts();
interceptGet();
- cy.visit(SAMPLE_DASHBOARD_1);
+ cy.visit(sampleDashboard);
cy.wait('@get');
editDashboard();
cy.wait('@filtering');
cy.wait(500);
}
+function resetTabbedDashboard(go = false) {
+ cy.getDashboard('tabbed_dash').then((r: Record<string, any>) => {
+ const jsonMetadata = r?.json_metadata || '{}';
+ const metadata = JSON.parse(jsonMetadata);
+ const resetMetadata = JSON.stringify({
+ ...metadata,
+ color_scheme: '',
+ label_colors: {},
+ });
+ cy.updateDashboard(r.id, {
+ certification_details: r.certification_details,
+ certified_by: r.certified_by,
+ css: r.css,
+ dashboard_title: r.dashboard_title,
+ json_metadata: resetMetadata,
+ owners: r.owners,
+ slug: r.slug,
+ }).then(() => {
+ if (go) {
+ visitEdit(TABBED_DASHBOARD);
+ }
+ });
+ });
+}
+
+function visitResetTabbedDashboard() {
+ resetTabbedDashboard(true);
+}
+
function selectColorScheme(color: string) {
cy.get(
'[data-test="dashboard-edit-properties-form"] [aria-label="Select color scheme"]',
@@ -104,6 +133,7 @@ function assertMetadata(text: string) {
}
function clearMetadata() {
cy.get('#json_metadata').then($jsonmetadata => {
+ cy.wait(500);
cy.wrap($jsonmetadata).type('{selectall} {backspace}');
});
}
@@ -119,6 +149,247 @@ describe('Dashboard edit', () => {
cy.preserveLogin();
});
+ describe('Color consistency', () => {
+ beforeEach(() => {
+ visitResetTabbedDashboard();
+ });
+
+ after(() => {
+ resetTabbedDashboard();
+ });
+
+ it('should apply the color scheme across main tabs', () => {
+ openProperties();
+ selectColorScheme('lyftColors');
+ applyChanges();
+ saveChanges();
+
+ cy.get('.treemap #rect-sum__SP_POP_TOTL').should(
+ 'have.css',
+ 'fill',
+ 'rgb(234, 11, 140)',
+ );
+
+ // go to second tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(0)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({ name: 'Trends', viz: 'line' });
+
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(234, 11, 140)');
+ });
+
+ it('should apply the color scheme across main tabs for rendered charts', () => {
+ waitForChartLoad({ name: 'Treemap', viz: 'treemap' });
+ openProperties();
+ selectColorScheme('bnbColors');
+ applyChanges();
+ saveChanges();
+
+ cy.get('.treemap #rect-sum__SP_POP_TOTL').should(
+ 'have.css',
+ 'fill',
+ 'rgb(255, 90, 95)',
+ );
+
+ // go to second tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(0)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({ name: 'Trends', viz: 'line' });
+
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(255, 90, 95)');
+
+ // go back to first tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(0)
+ .find('[role="tab"]')
+ .eq(0)
+ .click();
+
+ // change scheme now that charts are rendered across the main tabs
+ editDashboard();
+ openProperties();
+ selectColorScheme('lyftColors');
+ applyChanges();
+ saveChanges();
+
+ cy.get('.treemap #rect-sum__SP_POP_TOTL').should(
+ 'have.css',
+ 'fill',
+ 'rgb(234, 11, 140)',
+ );
+
+ // go to second tab again
+ cy.getBySel('dashboard-component-tabs')
+ .eq(0)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(234, 11, 140)');
+ });
+
+ it('should apply the color scheme in nested tabs', () => {
+ openProperties();
+ selectColorScheme('lyftColors');
+ applyChanges();
+ saveChanges();
+ cy.get('.treemap #rect-sum__SP_POP_TOTL').should(
+ 'have.css',
+ 'fill',
+ 'rgb(234, 11, 140)',
+ );
+
+ // open nested tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({
+ name: 'Top 10 California Names Timeseries',
+ viz: 'line',
+ });
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(234, 11, 140)');
+
+ // open another nested tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(2)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({ name: 'Growth Rate', viz: 'line' });
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(234, 11, 140)');
+ });
+
+ it('label colors should take the precedence in nested tabs', () => {
+ openProperties();
+ openAdvancedProperties();
+ clearMetadata();
+ writeMetadata(
+ '{"color_scheme":"lyftColors","label_colors":{"Anthony":"red","Bangladesh":"red"}}',
+ );
+ applyChanges();
+ saveChanges();
+
+ // open nested tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({
+ name: 'Top 10 California Names Timeseries',
+ viz: 'line',
+ });
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(255, 0, 0)');
+
+ // open another nested tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(2)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({ name: 'Growth Rate', viz: 'line' });
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(255, 0, 0)');
+ });
+
+ it('should apply a valid color scheme for rendered charts in nested tabs', () => {
+ // open the tab first time and let chart load
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({
+ name: 'Top 10 California Names Timeseries',
+ viz: 'line',
+ });
+
+ // go to previous tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(0)
+ .click();
+
+ openProperties();
+ selectColorScheme('lyftColors');
+ applyChanges();
+ saveChanges();
+
+ // re-open the tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(234, 11, 140)');
+ });
+
+ it('label colors should take the precedence for rendered charts in nested tabs', () => {
+ // open the tab first time and let chart load
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+ waitForChartLoad({
+ name: 'Top 10 California Names Timeseries',
+ viz: 'line',
+ });
+
+ // go to previous tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(0)
+ .click();
+
+ openProperties();
+ openAdvancedProperties();
+ clearMetadata();
+ writeMetadata(
+ '{"color_scheme":"lyftColors","label_colors":{"Anthony":"red"}}',
+ );
+ applyChanges();
+ saveChanges();
+
+ // re-open the tab
+ cy.getBySel('dashboard-component-tabs')
+ .eq(1)
+ .find('[role="tab"]')
+ .eq(1)
+ .click();
+
+ cy.get('.line .nv-legend-symbol')
+ .first()
+ .should('have.css', 'fill', 'rgb(255, 0, 0)');
+ });
+ });
+
describe('Edit properties', () => {
before(() => {
cy.createSampleDashboards();
@@ -258,39 +529,6 @@ describe('Dashboard edit', () => {
});
});
- describe('Color schemes', () => {
- beforeEach(() => {
- cy.createSampleDashboards();
- visitEdit();
- });
-
- it('should apply a valid color scheme', () => {
- dragComponent('Top 10 California Names Timeseries');
- openProperties();
- selectColorScheme('lyftColors');
- applyChanges();
- saveChanges();
- cy.get('.line .nv-legend-symbol')
- .first()
- .should('have.css', 'fill', 'rgb(234, 11, 140)');
- });
-
- it('label colors should take the precedence', () => {
- dragComponent('Top 10 California Names Timeseries');
- openProperties();
- openAdvancedProperties();
- clearMetadata();
- writeMetadata(
- '{"color_scheme":"lyftColors","label_colors":{"Anthony":"red"}}',
- );
- applyChanges();
- saveChanges();
- cy.get('.line .nv-legend-symbol')
- .first()
- .should('have.css', 'fill', 'rgb(255, 0, 0)');
- });
- });
-
describe('Save', () => {
beforeEach(() => {
cy.createSampleDashboards();
diff --git a/superset-frontend/cypress-base/cypress/support/index.d.ts b/superset-frontend/cypress-base/cypress/support/index.d.ts
index c60580247e..603c490ebf 100644
--- a/superset-frontend/cypress-base/cypress/support/index.d.ts
+++ b/superset-frontend/cypress-base/cypress/support/index.d.ts
@@ -65,6 +65,7 @@ declare namespace Cypress {
* Get
*/
getDashboards(): cy;
+ getDashboard(dashboardId: string | number): Record<string, any>;
getCharts(): cy;
/**
@@ -80,6 +81,11 @@ declare namespace Cypress {
deleteDashboardByName(dashboardName: string, failOnStatusCode: boolean): cy;
deleteChartByName(name: string, failOnStatusCode: boolean): cy;
deleteChart(id: number, failOnStatusCode: boolean): cy;
+
+ /**
+ * Update
+ */
+ updateDashboard(dashboardId: number, body: Record<string, any>): cy;
}
}
diff --git a/superset-frontend/cypress-base/cypress/support/index.ts b/superset-frontend/cypress-base/cypress/support/index.ts
index 80a51fc409..aa2b168e2d 100644
--- a/superset-frontend/cypress-base/cypress/support/index.ts
+++ b/superset-frontend/cypress-base/cypress/support/index.ts
@@ -332,6 +332,35 @@ Cypress.Commands.add('getDashboards', () =>
.then(resp => resp.body.result),
);
+Cypress.Commands.add('getDashboard', (dashboardId: string | number) =>
+ cy
+ .request({
+ method: 'GET',
+ url: `api/v1/dashboard/${dashboardId}`,
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${TokenName}`,
+ },
+ })
+ .then(resp => resp.body.result),
+);
+
+Cypress.Commands.add(
+ 'updateDashboard',
+ (dashboardId: number, body: Record<string, any>) =>
+ cy
+ .request({
+ method: 'PUT',
+ url: `api/v1/dashboard/${dashboardId}`,
+ body,
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${TokenName}`,
+ },
+ })
+ .then(resp => resp.body.result),
+);
+
Cypress.Commands.add('deleteChart', (id: number, failOnStatusCode = false) =>
cy
.request({
diff --git a/superset/examples/tabbed_dashboard.py b/superset/examples/tabbed_dashboard.py
index 7a167bc357..58c0ba3e4c 100644
--- a/superset/examples/tabbed_dashboard.py
+++ b/superset/examples/tabbed_dashboard.py
@@ -137,6 +137,25 @@ def load_tabbed_dashboard(_: bool = False) -> None:
],
"type": "CHART"
},
+ "CHART-dxV7Il666H": {
+ "children": [],
+ "id": "CHART-dxV7Il666H",
+ "meta": {
+ "chartId": 5539,
+ "height": 50,
+ "sliceName": "Trends",
+ "width": 4
+ },
+ "parents": [
+ "ROOT_ID",
+ "TABS-lV0r00f4H1",
+ "TAB-gcQJxApOZS",
+ "TABS-afnrUvdxYF",
+ "TAB-jNNd4WWar1",
+ "ROW-7ygtD666Q"
+ ],
+ "type": "CHART"
+ },
"CHART-jJ5Yj1Ptaz": {
"children": [],
"id": "CHART-jJ5Yj1Ptaz",
@@ -238,6 +257,19 @@ def load_tabbed_dashboard(_: bool = False) -> None:
],
"type": "ROW"
},
+ "ROW-7ygtD666Q": {
+ "children": ["CHART-dxV7Il666H"],
+ "id": "ROW-7ygtD666Q",
+ "meta": { "background": "BACKGROUND_TRANSPARENT" },
+ "parents": [
+ "ROOT_ID",
+ "TABS-lV0r00f4H1",
+ "TAB-gcQJxApOZS",
+ "TABS-afnrUvdxYF",
+ "TAB-jNNd4WWar1"
+ ],
+ "type": "ROW"
+ },
"ROW-DnYkJgKQE": {
"children": ["CHART-06Kg-rUggO", "CHART-E4rQMdzY9-"],
"id": "ROW-DnYkJgKQE",
@@ -386,7 +418,7 @@ def load_tabbed_dashboard(_: bool = False) -> None:
"type": "TAB"
},
"TAB-jNNd4WWar1": {
- "children": ["ROW-7ygtDczaQ"],
+ "children": ["ROW-7ygtDczaQ", "ROW-7ygtD666Q"],
"id": "TAB-jNNd4WWar1",
"meta": { "text": "New Tab" },
"parents": [
[superset] 01/02: Merge branch 'feat-color-enhancement' of https://github.com/stephenLYZ/superset into chore/color-consistency-e2e
Posted by di...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch chore/color-consistency-e2e
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 0aa409ba305661c1570f8201c541e72b958e0441
Merge: 4d12e3709e 831676da92
Author: geido <di...@gmail.com>
AuthorDate: Tue Sep 27 14:09:44 2022 +0300
Merge branch 'feat-color-enhancement' of https://github.com/stephenLYZ/superset into chore/color-consistency-e2e
.../src/color/CategoricalColorScale.ts | 39 +++-----
.../src/color/SharedLabelColorSingleton.ts | 109 ++++++---------------
.../test/color/SharedLabelColorSingleton.test.ts | 53 +++++-----
.../plugins/plugin-chart-echarts/src/controls.tsx | 2 +-
.../src/dashboard/actions/dashboardState.js | 17 +---
.../src/dashboard/actions/dashboardState.test.js | 2 +-
.../src/dashboard/components/Header/index.jsx | 5 +-
.../dashboard/components/PropertiesModal/index.tsx | 12 +--
.../dashboard/components/gridComponents/Chart.jsx | 9 ++
superset/config.py | 2 +-
10 files changed, 93 insertions(+), 157 deletions(-)