Improving Cytoscape.js layout utilities

[ugurdogrusoz]

Background

Using graphs in the visual analysis of relational data has proven to be very important. Such visualization is only effective when graphs that are created on the fly can be automatically laid out in a nice, understandable fashion. Not only that, changes to such graphs over time should also be nicely integrated into an existing layout without destroying the user's mental map.

Cytoscape.js is a highly popular and widely used graph library for visualizing relational data in various domains including biology. It comes with many layout extensions. In addition, a utility library to support these layout extensions was developed to further improve the layout support of a visual software component. This library for instance can help for compactly bringing components of a disconnected graph.

Goal

The goal of this project is to improve the existing functionality in choosing good initial locations for any new graph elements on evolving/changing graphs.

Difficulty Level: Hard

This project requires CS background to understand description of some new algorithms and choosing the right data structures to implement them.

Size and Length of Project

• medium: 175 hours
• 12 weeks

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

Skills

Essential skills: JavaScript, understanding of graph algorithms
Nice to have skills: Cytoscape.js

Public Repository

https://github.com/iVis-at-Bilkent/cytoscape.js-layout-utilities

Potential Mentors

Ozgun Babur
Ugur Dogrusoz

[shwetd19]

Hello, My name is Shwetas Dhake. I am a final-year BTech-CSE student at MIT-AOE Pune. I have strong experience in JavaScript, and the MERN Stack. I’ve worked on open-source projects and built SaaS platforms, and I believe I can contribute effectively to this project. I would be grateful for the opportunity to be assigned to this project.

[shwetd19]

Hey @ugurdogrusoz
This project really interests me! I've worked with graph visualizations before and the challenge of maintaining a user's mental map during dynamic changes is fascinating. I have a few questions:

• Would this project involve optimizing the placement algorithm for disconnected components as well, or mainly focus on new node additions?

• Have you considered any specific approaches for preserving the mental map when new elements are added? I was thinking about using some form of force-directed placement that takes into account the existing layout.

I'd love to contribute to this project as I have experience with JavaScript and graph algorithms, and I'm excited to dive deeper into Cytoscape.js!

[rahulharpal1603]

Hi @ugurdogrusoz I am interested in contributing to this project. I have a good amount of open-source experience with projects like PictoPy(under the umbrella of AOSSIE) and I have strong grasp on JavaScript and Graph Algorithms.

I really love problem solving on competitive programming platforms like CodeForces and LeetCode. Here are my coding profiles:

CodeForces: https://codeforces.com/profile/RahulHarpal

LeetCode: https://leetcode.com/u/RahulHarpal/

PRs: https://github.com/AOSSIE-Org/PictoPy/issues?q=is%3Apr%20state%3Aclosed%20author%3Arahulharpal1603%20is%3Amerged

Contributing Stats: https://github.com/AOSSIE-Org/PictoPy/graphs/contributors

Can you please tell what is the process to apply for this project for GSoC'25? Is there any task that I can do to start contributing 😄?

[atityam]

Hello @ugurdogrusoz ,

I am Aditya Maheshwari, an Information Technology student with a strong foundation in JavaScript and graph algorithms. I recently came across this project on Improving Cytoscape.js Layout Utilities (#247) and am highly interested in contributing to it as part of Google Summer of Code (GSOC) 2025.

My Relevant Skills & Experience:

1. JavaScript Expertise: Strong understanding of JavaScript and its modern features.
2. Graph Algorithms: Familiar with graph traversal, shortest paths, spanning trees, and layout algorithms.
3. Data Structures & Algorithms: Proficient in optimizing algorithmic performance for complex structures.
4. Visualization & UI Improvements: Experience in rendering structured visual data dynamically.

Additionally, I have completed a Front-End Development Internship, where I worked on interactive components, data visualizations, and performance optimizations. I have also attached my internship certificate in my email for reference.

Why I Am Interested in This Project:
i) I am fascinated by the challenge of improving graph layout utilities, particularly in ensuring that dynamically evolving graphs maintain a meaningful structure.
ii) The project aligns well with my technical expertise, and I am eager to apply and expand my knowledge in layout algorithms and data visualization.
iii) I would love to work under the mentorship of experienced developers, gaining deeper insights into Cytoscape.js and its layout utilities.

I have also sent a detailed email regarding my interest and relevant skills. Please let me know how I can proceed further. Looking forward to contributing and learning from this amazing community!

Aditya Maheshwari-Internship Certificate.pdf

[khanspers]

NRNB has been accepted as a mentoring organization for GSoC 2025. The contributor application period is March 24 – April 8. Here are some useful links:

GSoC contributor guide
NRNB project proposal template
Eligibility requirements
Full program timeline

[Srijan25]

Hello,

I am excited to contribute to the Cytoscape.js Layout Utilities project! After reviewing the project description, I understand the need to enhance the current functionality for positioning new graph elements efficiently within evolving graphs. The goal of improving layout algorithms to create a more intuitive user experience in graph visualization is something I am eager to contribute to.

Here’s my plan for this project:

Improving Initial Layout Algorithms: I’ll focus on improving the algorithms for placing new graph elements in the initial layout in a way that integrates seamlessly with existing elements.

Handling Dynamic Graphs: I will implement techniques that ensure any changes to graphs are smoothly incorporated without disrupting the overall layout or user’s mental map.

Optimization: I aim to optimize the layout extensions for better handling of disconnected graphs and ensuring that the layout adjusts automatically and compactly.

I’ll be leveraging my JavaScript skills, along with a strong understanding of graph algorithms, to implement these changes. While I have experience with graph-related problems, I’m looking forward to diving deeper into the specifics of Cytoscape.js and the utility library.

Looking forward to collaborating on this project and contributing to its success!

Best regards,
Srijan Kumar Sah