Refactor Cytosnap to use Playwright

[maxkfranz]

Background

Describe the current state of the project and the main problem or issue being addressed by the proposed idea. Details should include links and references.

• Cytosnap is a package to render and export Cytoscape.js graphs as various image formats.
• Cytosnap currently uses Puppeteer to do this, and Puppeteer has several maintenance and compatibility issues.
• Playwright is a newer alternative to Puppeteer, which would address these issues.
• Skia Canvas is a lighter-weight alternative to Puppeteer and Playwright, which could simplify deployment. Skia Canvas only supports rendering the HTML5 <canvas> API as an exported image, whereas Playwright includes a full browser environment.

Goal

Describe what the end result of the GSoC project should be.

1. Refactor Cytosnap to use Playwright instead of Puppeteer.
2. Add Playwright tests to ensure that the refactored Cytosnap project is working properly according to the Cytosnap public API.
3. Configure GitHub Actions to automatically run the new Playwright tests on new commits and pull requests.
4. Add support for using Skia Canvas.
5. This would be enabled with an option like engine: 'skia'.
6. Use Playwright if the user specifies engine: 'playwright'. Cytosnap should support both.
7. Mark Skia Canvas and Playwright as optional dependencies. The user can decide which to install based on which he wants to use in his project.
8. Add automated tests using Mocha for engine: 'skia'.

Difficulty Level: Easy/Medium/Hard

Give a difficulty level, either Easy, Medium or Hard. Make sure to tag the issue with this difficulty.
Describe with a sentence or two why the project is this difficulty level.

Easy if:

• The applicant has prior experience with JS and Node.js.
• The applicant has experience with JS build systems, like Webpack or Vite.

Size and Length of Project

Define the project commitment as either “small: 90 hours", "medium: 175 hours" or "large: 350 hours" and the timeline between 10 and 22 weeks, for example:

• medium: 175 hours
• 12 weeks

Note that the project length for small projects should be 10-12 weeks.

Skills

List skills/technologies that the student should be familiar with. Also tag the issue with these.

Essential skills:

• JS (significant experience with the language & modern tooling)

Nice to have skills, from most to least important:

• The HTML5 canvas API
• Headless browsers / rendering: Puppeteer, Playwright, Skia Canvas, Selenium, etc.
• Build systems like Webpack or Vite
• GitHub Actions

Public Repository

Link to a public, open-source repository for your project. All code from accepted projects must be open source and public throughout the coding period and beyond.

https://github.com/cytoscape/cytosnap

Potential Mentors

List the names and email contacts for potential mentors.

• Max Franz
• Mike Kucera
• Gary Bader

[GautamBytes]

Hello @maxkfranz , @gbader and @khanspers , My Name is Gautam Manchandani , a 2nd year Computer science student from BITS Pilani (India) , I would love to contribute to this project as a potential GSOC candidate this summer and would like to know more about the project and details on how can i effectively engage with mentors before GSOC Period so that i can understand codebase and clarify my doubts as well.

Can i get mail ids of mentors to contact them and if there is any slack channel for community communications that would be great also.

[ManasiRN]

Hi @maxkfranz @mikekucera @gbader ,
I’m really interested in contributing to the Cytosnap project!

Additionally, I’m participating in Google Summer of Code (GSoC) this year and would like to be involved in this project.

Could you please share the contact emails of the mentors for this project .

[adilkadivala]

Hi @maxkfranz @mikekucera @gbader

I'm really excite to contribute in this project,

can i provide any community platform where discuss more about this idea ?

[MridulBatra1]

Hi @maxkfranz @mikekucera @gbader
I am really interested in contributing to the Cytosnap project and would love your guidance.

Can you please share the emails of the mentors to contact them.

Thanks for your time

[Rajshah1302]

@maxkfranz @gbader @mikekucera I am really interested in working in this project and collaborate with you. Can you please guide me on where to get started

[atityam]

Hello @maxkfranz @gbader @mikekucera and entire team !

I am highly interested in contributing to the Refactor Cytosnap to use Playwright project for GSoC 2025. The idea of improving Cytosnap’s rendering capabilities by transitioning from Puppeteer to Playwright and integrating Skia Canvas excites me, and I believe my skills align well with the project requirements.

As an Information Technology student, I have strong experience in JavaScript, HTML5, CSS, and front-end development. During my internship as a Front-End Developer, I worked extensively with modern JS tooling and browser-based rendering, which helped me gain a deep understanding of optimizing UI performance, handling graphical content, and ensuring efficient rendering workflows. I am attaching my internship certificate along with this comment for reference.

While I am new to Playwright and Skia Canvas, I am eager to learn and implement them under your guidance. I am particularly curious about how Skia Canvas compares to Playwright in terms of performance, rendering accuracy, and deployment simplicity for Cytoscape.js graphs.

I would love to get some insights into the following:

1. What are the key performance considerations while transitioning from Puppeteer to Playwright?
2. Are there specific test cases or rendering benchmarks that should be maintained to ensure smooth integration?
3. Regarding Skia Canvas, are there any known limitations when rendering complex Cytoscape.js graphs?
4. Are there any recommended resources or starter tasks that would help me get familiar with the existing Cytosnap codebase?

I have also sent an email regarding my interest, skills, and further inquiries to the mentors. You can reach me at adityamaheshwari5562@gmail.com, and I would greatly appreciate any guidance on how I can start contributing effectively.

Looking forward to learning from the team and contributing meaningfully to this project!

Aditya Maheshwari-Internship Certificate.pdf