273: continuous color ramps

cypress/e2e/journeys/flows/bubble-cluster-recompute-uploaded.cy.ts

@@ -186,6 +186,7 @@ describe('Journey Flow - Bubble uploaded cluster recompute', () => {
 
     openGlobalStylingTab();
     selectPrimeOption('#node-color-variable', 'Cluster');
+    selectPrimeOption('#node-color-scale-mode', 'Categorical');
     cy.window().its('commonService.session.style.widgets.node-color-variable').should('equal', 'cluster');
     cy.get('#key-tables-node-table', { timeout: 15000 }).then(($table) => {
       clusterColorsBefore = extractColorTable($table);
@@ -262,6 +263,7 @@ describe('Journey Flow - Bubble uploaded cluster recompute', () => {
 
     openGlobalStylingTab();
     selectPrimeOption('#node-color-variable', 'Cluster');
+    selectPrimeOption('#node-color-scale-mode', 'Categorical');
     cy.window().its('commonService.session.style.widgets.node-color-variable').should('equal', 'cluster');
     cy.closeGlobalSettings();
 

cypress/e2e/journeys/flows/color-by-uploaded.cy.ts

@@ -175,7 +175,7 @@ describe('Journey Flow - Uploaded color-by controls', () => {
     selectPrimeOption('#node-color-variable', 'Profession');
 
     cy.window().its('commonService.session.style.widgets.node-color-variable').should('equal', 'Profession');
-    cy.get('#node-color-table-row').should('be.visible');
+    cy.get('#node-color-table-row').scrollIntoView().should('be.visible');
     cy.get('#key-tables-node-table', { timeout: 15000 }).should('be.visible');
     cy.get('#key-tables-node-table tr').should(($rows) => {
       expect($rows.length, 'node color table rows').to.be.greaterThan(2);
@@ -185,7 +185,7 @@ describe('Journey Flow - Uploaded color-by controls', () => {
     selectPrimeOption('#link-tooltip-variable', 'Contact type');
 
     cy.window().its('commonService.session.style.widgets.link-color-variable').should('equal', 'Contact type');
-    cy.get('#link-color-table-row').should('be.visible');
+    cy.get('#link-color-table-row').scrollIntoView().should('be.visible');
     cy.get('#key-tables-link-table', { timeout: 15000 }).should('be.visible');
     cy.get('#key-tables-link-table tr').should(($rows) => {
       expect($rows.length, 'link color table rows').to.be.greaterThan(2);

cypress/e2e/journeys/flows/dashboard-global-styling-uploaded.cy.ts

@@ -64,21 +64,29 @@ const matchesExpectedColor = (actual: string, expectedHex: string): boolean => {
     normalizedActual === normalizeColor(hexToRgbString(expectedHex));
 };
 
+const escapeRegExp = (value: string): string => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
 const getBubbleDataNodes = (bubble: any) =>
   bubble.cy.nodes().filter((node: any) => !node.hasClass('X_axis') && !node.hasClass('Y_axis'));
 
 const selectPrimeOption = (selector: string, label: string): void => {
-  cy.get(selector).click({ force: true }).wait(100);
-  cy.get('body').then(($body) => {
-    const overlay = $body.find('.p-select-overlay:visible').last();
-
-    expect(overlay.length, `visible PrimeNG overlay for ${selector}`).to.be.greaterThan(0);
-
-    cy.wrap(overlay)
-      .contains('li[role="option"]', label, { timeout: 15000 })
+  cy.get(selector, { timeout: 15000 })
+    .scrollIntoView()
+    .should('be.visible')
+    .click({ force: true });
+  cy.get('.p-select-overlay:visible', { timeout: 15000 })
+    .last()
+    .should('be.visible')
+    .within(() => {
+      cy.contains(
+        'li[role="option"]',
+        new RegExp(`^\\s*${escapeRegExp(label)}\\s*$`),
+        { timeout: 15000 },
+      )
       .scrollIntoView()
       .click({ force: true });
-  });
+    });
+  cy.get('body').find('.p-select-overlay:visible').should('have.length', 0);
 };
 
 const changeColorTableEntry = (tableSelector: string, value: string, nextColor: string): void => {
@@ -640,6 +648,7 @@ describe('Journey Flow - Dashboard global styling propagation', () => {
       openGlobalStylingTab();
       selectPrimeOption('#link-tooltip-variable', 'Cluster');
       cy.window().its('commonService.session.style.widgets.link-color-variable').should('equal', 'cluster');
+      selectPrimeOption('#link-color-scale-mode', 'Categorical');
       cy.get('#key-tables-link-table', { timeout: 15000 }).should('be.visible');
 
       getCommonLinkClusters().then(([targetCluster, controlCluster]) => {

cypress/e2e/journeys/flows/epi-curve-styling-uploaded.cy.ts

@@ -322,6 +322,7 @@ describe('Journey Flow - Epi Curve styling on uploaded data', () => {
     cy.openGlobalSettings();
     switchGlobalSettingsTab('Styling');
     selectVisiblePrimeOption('#node-color-variable', 'Cluster');
+    selectVisiblePrimeOption('#node-color-scale-mode', 'Categorical');
 
     cy.window()
       .its('commonService.session.style.widgets.node-color-variable')

cypress/e2e/journeys/flows/map-cluster-recompute-uploaded.cy.ts

@@ -159,6 +159,8 @@ describe('Journey Flow - Map uploaded cluster-color recompute', () => {
     openGlobalStylingTab();
     selectPrimeOption('#node-color-variable', 'Cluster');
     selectPrimeOption('#link-tooltip-variable', 'Cluster');
+    selectPrimeOption('#node-color-scale-mode', 'Categorical');
+    selectPrimeOption('#link-color-scale-mode', 'Categorical');
 
     cy.window().its('commonService.session.style.widgets.node-color-variable').should('equal', 'cluster');
     cy.window().its('commonService.session.style.widgets.link-color-variable').should('equal', 'cluster');

cypress/e2e/journeys/flows/node-color-history-scoping.cy.ts

@@ -46,6 +46,7 @@ describe('Journey Flow - Node color history is scoped by field', () => {
     openGlobalStylingTab();
 
     selectPrimeOption('#node-color-variable', 'Seedgroups');
+    selectPrimeOption('#node-color-scale-mode', 'Categorical');
 
     cy.window().should((win: any) => {
       const style = win.commonService.session.style as NodeColorStyle;
@@ -59,6 +60,7 @@ describe('Journey Flow - Node color history is scoped by field', () => {
     });
 
     selectPrimeOption('#node-color-variable', 'Raremutations');
+    selectPrimeOption('#node-color-scale-mode', 'Categorical');
 
     cy.window().should((win: any) => {
       const style = win.commonService.session.style as NodeColorStyle;

cypress/e2e/journeys/flows/phylogenetic-metadata-uploaded.cy.ts

@@ -618,6 +618,7 @@ describe('Journey Flow - Phylogenetic Tree metadata-backed controls', () => {
     const expectedSelectedStroke = normalizeColor(hexToRgbString(selectedColor));
 
     openGlobalStylingTab();
+    cy.get('#selected-color').scrollIntoView().should('be.visible');
     setColorInputValue('#selected-color', selectedColor);
 
     cy.window().its('commonService.session.style.widgets.selected-color').should('equal', selectedColor);
@@ -646,6 +647,7 @@ describe('Journey Flow - Phylogenetic Tree metadata-backed controls', () => {
 
     openGlobalStylingTab();
     selectPrimeOption('#node-color-variable', 'Cluster');
+    selectPrimeOption('#node-color-scale-mode', 'Categorical');
 
     cy.window()
       .its('commonService.session.style.widgets.node-color-variable')

cypress/e2e/journeys/flows/timeline-key-tables-refresh-uploaded.cy.ts

@@ -21,18 +21,26 @@ type WinWithMT = Window & {
 
 type CountMap = Record<string, number>;
 
-const selectPrimeOption = (selector: string, label: string): void => {
-  cy.get(selector).click({ force: true });
-  cy.get('body').then(($body) => {
-    const overlay = $body.find('.p-select-overlay:visible').last();
-
-    expect(overlay.length, `visible PrimeNG overlay for ${selector}`).to.be.greaterThan(0);
+const escapeRegExp = (value: string): string => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 
-    cy.wrap(overlay)
-      .contains('li[role="option"]', label, { timeout: 15000 })
+const selectPrimeOption = (selector: string, label: string): void => {
+  cy.get(selector, { timeout: 15000 })
+    .scrollIntoView()
+    .should('be.visible')
+    .click({ force: true });
+  cy.get('.p-select-overlay:visible', { timeout: 15000 })
+    .last()
+    .should('be.visible')
+    .within(() => {
+      cy.contains(
+        'li[role="option"]',
+        new RegExp(`^\\s*${escapeRegExp(label)}\\s*$`),
+        { timeout: 15000 },
+      )
       .scrollIntoView()
       .click({ force: true });
-  }).wait(50);
+    });
+  cy.get('body').find('.p-select-overlay:visible').should('have.length', 0);
 };
 
 const readColorTableCounts = ($table: JQuery<HTMLElement>): CountMap => {
@@ -135,6 +143,7 @@ describe('Journey Flow - Timeline key table refresh', () => {
     selectPrimeOption('#link-tooltip-variable', 'Cluster');
     cy.window().its('commonService.session.style.widgets.node-color-variable').should('equal', nodeColorField);
     cy.window().its('commonService.session.style.widgets.link-color-variable').should('equal', linkColorField);
+    selectPrimeOption('#link-color-scale-mode', 'Categorical');
     cy.get('#key-tables-node-table', { timeout: 15000 }).should('be.visible');
     cy.get('#key-tables-link-table', { timeout: 15000 }).should('be.visible');
     assertNodeColorTableMatchesVisibleNodes(nodeColorField, 'timeline max');

cypress/e2e/journeys/flows/twod-timeline-controls-uploaded.cy.ts

@@ -40,13 +40,22 @@ const normalizeLogicalLinkId = (value: string): string => String(value || '').re
 const clickVisiblePrimeOption = (label: string): void => {
   cy.get('.p-select-overlay:visible', { timeout: 15000 })
     .last()
-    .find('p-selectitem')
-    .contains('li', new RegExp(`^${escapeRegExp(label)}$`))
-    .click({ force: true });
+    .should('be.visible')
+    .within(() => {
+      cy.contains(
+        'li[role="option"]',
+        new RegExp(`^\\s*${escapeRegExp(label)}\\s*$`),
+        { timeout: 15000 },
+      ).click({ force: true });
+    });
+  cy.get('body').find('.p-select-overlay:visible').should('have.length', 0);
 };
 
 const selectPrimeOption = (selector: string, label: string): void => {
-  cy.get(selector).click({ force: true });
+  cy.get(selector, { timeout: 15000 })
+    .scrollIntoView()
+    .should('be.visible')
+    .click({ force: true });
   clickVisiblePrimeOption(label);
 };
 
@@ -279,6 +288,7 @@ describe('Journey Flow - 2D uploaded timeline controls', () => {
     openGlobalStylingTab();
     selectPrimeOption('#node-color-variable', 'Cluster');
     cy.window().its('commonService.session.style.widgets.node-color-variable').should('equal', 'cluster');
+    selectPrimeOption('#node-color-scale-mode', 'Categorical');
 
     cy.window().then((win: unknown) => {
       const cyInstance = (win as WinWithCy).cytoscapeInstance;
@@ -375,6 +385,7 @@ describe('Journey Flow - 2D uploaded timeline controls', () => {
     openGlobalStylingTab();
     selectPrimeOption('#link-tooltip-variable', 'Cluster');
     cy.window().its('commonService.session.style.widgets.link-color-variable').should('equal', 'cluster');
+    selectPrimeOption('#link-color-scale-mode', 'Categorical');
 
     cy.get('#key-tables-link-table tr', { timeout: 15000 })
       .then(($rows) => {

cypress/e2e/view-state/bubble-view.cy.ts

@@ -3,6 +3,11 @@ import { visitAppAndAcceptEula } from '../../support/journey-helpers';
 let takeScreenshots = false;
 const getCy = () => cy.window().then(win => win.commonService.visuals.bubble.cy)
 
+const selectCategoricalColorScale = (target: 'node' | 'link'): void => {
+  cy.get(`#${target}-color-scale-mode`).click();
+  cy.contains('li[role="option"]', 'Categorical', { timeout: 10000 }).click();
+};
+
 describe('Bubble View', () => {
   const selectors = {
     container: '#cyBubble',
@@ -254,6 +259,7 @@ describe('Bubble View', () => {
       cy.openGlobalSettings();
       cy.get('#node-color-variable').click()
       cy.get('li[role="option"]').contains('Cluster').click()
+      selectCategoricalColorScale('node')
       cy.contains('#global-settings-modal .nav-link', 'Filtering').click();
       for (let i = 0; i < 6; i++) {
         cy.get('#link-threshold').type('{uparrow}');
@@ -310,6 +316,7 @@ describe('Bubble View', () => {
       cy.openGlobalSettings();
       cy.get('#node-color-variable').click()
       cy.get('li[role="option"]').contains('Cluster').click()
+      selectCategoricalColorScale('node')
       cy.wait(500)
       let initialDef;
       let initialBGImage;