Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

188651494 pixi js integration #1697

Open
wants to merge 19 commits into
base: main
Choose a base branch
from
Open

Conversation

nstclair-cc
Copy link
Collaborator

@nstclair-cc nstclair-cc commented Dec 20, 2024

PT-#188651494

Summary

This PR introduces improvements and proof-of-concept tests using PixiJS for graph and map interactions in CODAP v3. We’ve added multiple checks, tools, and tests to enhance our ability to debug and validate graphical behaviors.


New Features

1. Point Selection and Coloring in Graphs and Maps
• Added functionality to validate coloring of points (e.g., selection, legend plots).
• Example proof-of-concept tests now check:
• Colors of points are as expected.
• Colors are valid hex codes (e.g., #4682B4, #E6805B).


2. Counting Points in Graphs and Maps
• Implemented logic to count the number of points in a graph dynamically.
• Validates expected point counts in various scenarios, such as parent-child grouping and attribute selections.


3. Checking Position of Points in Graphs and Maps
• Implemented logic to check the (x, y) position of points in a graph or map.
• Validates expected position in various scenarios, such as undo redo.


4. Debugger Statement
• Introduced a new debugger tool to make it easier to inspect PixiJS point metadata.
• In the browser Console, you can call pixiPointsMap to access the array of Pixi points.


Tests Added

1. Proof-of-Concept Tests
Included tests for new functionality, such as:
• Point selection validation (with colors).
• Attribute grouping with dynamic point counting.
• Graph updates after selection, hierarchy, and legend interactions.
• Point (x, y) position.

2. PixiJS Checks
Multiple checks added that check:
• Colors of points are accurate and match expectations.
• Graphs update correctly after selections and attribute changes.
• Graph legends and plots dynamically adapt.
• Added logs for pixiPoints, textures, and fill values for better visibility (this is because we don't have visibility with the canvas element; logs help the developer get feedback on the issue when tests fail)


How to Use the Debugger
1. Open the graph or map component.
2. In the Console, call pixiPointsMap after enabling the debugger with Key: debug and Value: pixiPoints.
3. Inspect pixiPointsMap to view point metadata (e.g., texture, position).

Next Steps
• These changes lay the groundwork for:
• Extending point-coloring logic for additional use cases.
• Enhancing legend interactions for categorical attributes.


Proof of Concept in Action

Here’s an example of what’s now possible:
• Validate graph points are colored correctly.
• Validate graph points are in correct position.
• Verify dynamic updates when selecting attributes or grouping data.
• Debug PixiJS behavior directly in the Console with a single statement.

Copy link

codecov bot commented Dec 20, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 85.80%. Comparing base (9d9c21b) to head (559aff4).
Report is 73 commits behind head on main.

Additional details and impacted files
@@             Coverage Diff             @@
##             main    #1697       +/-   ##
===========================================
+ Coverage   68.07%   85.80%   +17.73%     
===========================================
  Files         607      607               
  Lines       30810    30823       +13     
  Branches     8509     8522       +13     
===========================================
+ Hits        20975    26449     +5474     
+ Misses       9227     4052     -5175     
+ Partials      608      322      -286     
Flag Coverage Δ
cypress 75.25% <100.00%> (+31.37%) ⬆️
jest 53.28% <30.76%> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link

cypress bot commented Dec 20, 2024

codap-v3    Run #5642

Run Properties:  status check passed Passed #5642  •  git commit 559aff4c00: removed commented line
Project codap-v3
Branch Review 188651494-pixiJS-integration
Run status status check passed Passed #5642
Run duration 06m 17s
Commit git commit 559aff4c00: removed commented line
Committer nstclair-cc
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 53
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 238
View all changes introduced in this branch ↗︎

- Specified the cypress/e2e/pixi-interaction/**/*.ts pattern for the Cypress step.
- Removed: Save Webpack Cache step.
- Removed: Upload coverage to Codecov step.
- Updated: spec: property to accept the pattern cypress/e2e/smoke/**/*.ts, allowing multiple tests in the smoke folder.
@nstclair-cc nstclair-cc requested a review from eireland December 24, 2024 00:35
@nstclair-cc nstclair-cc marked this pull request as ready for review December 24, 2024 01:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant