Spike into graph fill color

concord-consortium · Dec 21, 2024 · 2ec3e07 · 2ec3e07
1 parent 38308e4
commit 2ec3e07
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 4 deletions.
diff --git a/v3/cypress/e2e/pixi-interaction/graph-pixi-interaction.spec.ts b/v3/cypress/e2e/pixi-interaction/graph-pixi-interaction.spec.ts
@@ -1,11 +1,9 @@
-// import * as PIXI from "pixi.js"
 import { ComponentElements as c } from "../../support/elements/component-elements"
 import { CfmElements as cfm } from "../../support/elements/cfm"
 import { GraphLegendHelper as glh } from "../../support/helpers/graph-legend-helper"
 import { GraphTileElements as graph } from "../../support/elements/graph-tile"
 import { TableTileElements as table } from "../../support/elements/table-tile"
 import { ToolbarElements as toolbar } from "../../support/elements/toolbar-elements"
-//import { ColorPickerPaletteElements as cpp} from "../../support/elements/color-picker-palette"
 import { GraphCanvasHelper as gch } from "../../support/helpers/graph-canvas-helper"
 import { AxisHelper as ah } from "../../support/helpers/axis-helper"
 import graphRules from '../../fixtures/graph-rules.json'
@@ -116,7 +114,7 @@ context("Graph UI with Pixi interaction", () => {
     })
   })
   describe("case card graph interaction with point count pixi interaction", () => {
-    it("can drag attributes from the case card to the graph with pixijs interaction", () => {
+    it("can drag attributes from the case card to the graph and check point count", () => {
       const tableHeaderLeftSelector = ".codap-component.codap-case-table .component-title-bar .header-left"
       cy.get(tableHeaderLeftSelector).click()
       cy.get(`${tableHeaderLeftSelector} .card-table-toggle-message`).click()
@@ -302,6 +300,29 @@ context("Graph UI with Pixi interaction", () => {
         })
       })
     })
+    it.skip("SPIKE: should check color of a point", () => {
+      ah.openAxisAttributeMenu("bottom")
+      ah.selectMenuAttribute("Diet", "bottom") // Diet => x-axis
+      glh.dragAttributeToPlot("Habitat") // Habitat => plot area
+      cy.wait(500) // Wait for the graph to update
+
+      ah.verifyAxisLabel("bottom", "Diet")
+      //glh.verifyCategoricalLegend("LifeSpan")
+
+      gch.getGraphTileId().then((tileId) => {
+        gch.validateGraphPointCount(tileId, 27) // 27 points in graph
+      })
+
+      graph.getGraphTile() // Ensure graph tile is loaded
+
+      gch.getGraphTileId().then((tileId: string) => {
+        gch.getPixiPointFillColorHardcoded(tileId, 0).then(({ fill }) => {
+          cy.log(`Retrieved Fill Color for Point 0: ${fill}`);
+          expect(fill).to.exist;
+          expect(fill).to.match(/^#[0-9a-fA-F]{6}$/, "Fill color should be a valid hex code");
+        });
+      });
+    })
     // this test will work when PT-#188601933 is delivered
     it.skip("check for point compression interaction", () => {
       // Open Four Seals

diff --git a/v3/cypress/support/helpers/graph-canvas-helper.ts b/v3/cypress/support/helpers/graph-canvas-helper.ts
@@ -102,5 +102,82 @@ export const GraphCanvasHelper = {
       // Assert all points have unique positions
       expect(uniquePositions.size).to.equal(positions.length, "All points should have unique positions")
     })
-  }
+  },
+  // getPixiPointFillColorHardcoded(tileId: string, pointIndex: number): Cypress.Chainable<{ fill?: string }> {
+  //   cy.log("Get the PixiPoint fill color (manual inspection)");
+  //   return cy.window().then((win: any) => {
+  //     const pixiPoints = win.pixiPointsMap[tileId];
+  //     const textures = pixiPoints[0].textures; // Access textures directly from PixiPoints
+
+  //     // Log basic info for debugging
+  //     cy.log("PixiPoints:", pixiPoints);
+  //     cy.log("Textures Object (Type):", typeof textures);
+
+  //     if (!textures) {
+  //       throw new Error("Textures object is undefined.");
+  //     }
+
+  //     // Check if textures is a Map-like structure
+  //     if (typeof textures.entries === "function") {
+  //       const textureEntries = Array.from(textures.entries());
+  //       cy.log("Texture Entries (from Map):", textureEntries);
+
+  //       // Manually log all entries to inspect them
+  //       textureEntries.forEach(([key, entry], index) => {
+  //         cy.log(`Texture Entry ${index} Key:`, key);
+  //         cy.log(`Texture Entry ${index} Properties:`, {
+  //           fill: entry.fill,
+  //           style: entry.style,
+  //         });
+  //       });
+
+  //       // Attempt to retrieve the first texture's fill property
+  //       const [textureKey, textureEntry] = textureEntries[0] || [];
+  //       if (!textureEntry) {
+  //         throw new Error(`Texture entry for key ${textureKey} is not found.`);
+  //       }
+
+  //       const fillColor = textureEntry.fill || textureEntry.style?.fill;
+  //       cy.log("Fill Color (From Map):", fillColor);
+
+  //       if (!fillColor) {
+  //         throw new Error("Fill color is undefined in the texture entry.");
+  //       }
+
+  //       return cy.wrap({ fill: fillColor });
+  //     }
+
+  //     // Handle case where textures is an object
+  //     const textureKeys = Object.keys(textures);
+  //     cy.log("Texture Keys (from Object):", textureKeys);
+
+  //     textureKeys.forEach((key, index) => {
+  //       const entry = textures[key];
+  //       cy.log(`Texture Entry ${index} Key:`, key);
+  //       cy.log(`Texture Entry ${index} Properties:`, {
+  //         fill: entry.fill,
+  //         style: entry.style,
+  //       });
+  //     });
+
+  //     const textureKey = textureKeys[0];
+  //     if (!textureKey) {
+  //       throw new Error("No texture keys found in the textures object.");
+  //     }
+
+  //     const textureEntry = textures[textureKey];
+  //     if (!textureEntry) {
+  //       throw new Error(`Texture entry for key ${textureKey} is not found.`);
+  //     }
+
+  //     const fillColor = textureEntry.fill || textureEntry.style?.fill;
+  //     cy.log("Fill Color (From Object):", fillColor);
+
+  //     if (!fillColor) {
+  //       throw new Error("Fill color is undefined in the texture entry.");
+  //     }
+
+  //     return cy.wrap({ fill: fillColor });
+  //   });
+  // }
 }