Advancing Web-Based SBGN Editing and Visualization

[cannin]

Background

The Systems Biology Graphical Notation (SBGN) is a standardized visual language developed to represent biological networks, providing a clear and consistent way to depict complex systems. It consists of three complementary notations: Process Description (PD), Activity Flow (AF) and Entity Relationship (ER). The associated file format, Systems Biology Graphical Notation Markup Language (SBGNML), is an XML-based standard that enables the sharing, reuse, and computational analysis of these diagrams. The scope of this project focuses on the PD and AF languages.

At present, web-based editing of SBGN diagrams is mainly done by using Cytoscape.js library. Several libraries exist to convert SBGNML to Cytoscape.js, such as sbgnml-to-cytoscape. However, converting diagrams from Cytoscape.js back to SBGNML remains challenging. One such converter exists within the sbgnviz.js library, but it is tightly coupled to a specialized fork of Cytoscape.js, making it difficult to reuse or integrate into other applications. We have an initial attempt to separate that code and use it independently as in here, but currently it is not a proper library itself.

In addition, the cytoscape-sbgn-stylesheet library enables visualization of Cytoscape.js graphs in SBGN-compliant notation. Currently, this stylesheet supports only PD language. We have also an attempt to add support for AF language as well here, But it currently doesn't support unit of informations in biological activity nodes and also it may have some missing glyphs from both PD and AF.

Related to these efforts, the Systems Biology Layout & Rendering Service (SyBLaRS) is a web service designed to compute layouts for SBGNML diagrams (as well as some other formats) and to generate corresponding visual outputs in JPG, PNG, or SVG formats. SyBLaRS currently accepts SBGNML as the input by using sbgnml-to-cytoscape and returns the updated node positions in JSON format. Due to the limitations of the existing cytoscape-sbgn-stylesheet SyBLaRS currently supports only the SBGN PD language.

Goal

The goals of this project are to:

• Extract the Cytoscape.js to SBGNML conversion functionality into a standalone library, or integrate it into the sbgnml-to-cytoscape library, to improve reusability.
• Extend the cytoscape-sbgn-stylesheet to provide complete and correct support for the AF language, as well as to address missing glyphs and properties in both PD and AF.
• Enhance the functionality of SyBLaRS by incorporating the above improvements, enabling full support for both PD and AF languages.

Difficulty Level: Medium

Difficulty is based on getting used to the basics of SBGN and related libraries.

Size and Length of Project

• medium: 175 hours
• 12 weeks

Skills

Essential skills: JavaScript, Node.js
Nice to have skills: Cytoscape.js, SVG

Public Repository

• https://github.com/iVis-at-Bilkent/sbgnviz.js
• https://github.com/PathwayCommons/sbgnml-to-cytoscape
• https://github.com/PathwayCommons/cytoscape-sbgn-stylesheet
• https://github.com/iVis-at-Bilkent/syblars

Potential Mentors

Hasan Balci
Augustin Luna

[SIDDHARTH1-1CHAUHAN]

Hi @hasanbalci and @cannin! 👋

I'm Siddharth Chauhan, and I'm very interested in working on this project for GSoC 2026. I have 1-2
years of experience with JavaScript and Node.js, and I'm eager to contribute to biological pathway
visualization tools. While my biology background is basic, I'm excited to learn SBGN notation and
contribute meaningful improvements to the ecosystem.

My Understanding:
The project involves three main components:

1. Creating a reusable bidirectional conversion library (Cytoscape.js ↔ SBGNML)
2. Extending cytoscape-sbgn-stylesheet to fully support Activity Flow language
3. Updating SyBLaRS to leverage these improvements for comprehensive PD & AF support

Initial Questions:

1. For the conversion library, would you prefer extending sbgnml-to-cytoscape with reverse
   conversion, or creating a new standalone package?
2. Are there specific AF glyphs or use cases that should be prioritized?
3. Which repositories should I focus on for initial contributions?

Next Steps:
I plan to:

• Set up local dev environments for all relevant repos
• Start with smaller issues (like Develop a Generic Converter for Importing Data into Pathway Commons #88, Enable browsing of SBOL Stack instances on ICE Web of Registries #80 in cytoscape-sbgn-stylesheet) to familiarize myself
• Study the SBGN AF specification in detail
• Draft a detailed proposal based on your feedback

I'd love to hear your thoughts and guidance on the best approach!

Best,
Siddharth Chauhan

[SIDDHARTH1-1CHAUHAN]

To familiarize myself with the codebase, I've submitted a pull request fixing two visual rendering bugs in cytoscape-sbgn-stylesheet:

PR #89: PathwayCommons/cytoscape-sbgn-stylesheet#89

• Issue Develop a Generic Converter for Importing Data into Pathway Commons #88: Fixed truncated state variables by correcting the stadium shape corner radius calculation
• Issue Enable browsing of SBOL Stack instances on ICE Web of Registries #80:Fixed warped boxes for long labels by adding text wrapping support

This work helped me understand the SBGN rendering architecture and stylesheet system.

Questions:

1. For the conversion library, would you prefer extending sbgnml-to-cytoscape with reverse conversion, or creating a new standalone package?
2. Are there specific AF glyphs that should be prioritized for the stylesheet extension?
3. What areas would you recommend I explore next to deepen my understanding?

Next Steps:
I plan to:

• Continue contributing to the repositories
• Study the SBGN AF specification in detail
• Explore the conversion logic in sbgnviz.js
• Draft a detailed proposal based on your feedback

Looking forward to your guidance!

Best,
Siddharth Chauhan
@SIDDHARTH1-1CHAUHAN

[jagpreetrahi]

Hey @hasanbalci @cannin
Hope you doing well.

I am Jagpreet Singh, am from Indian-subcontinent. I am a full stack developer, open source contributor and triage member at the JSON Schema organization. I was selected Google Summer of Code Prgram contributor under the same organization.
I am very curios to work on this project in the GSoC-26.

I am trying to understand this project and would like to ask how and where should I start my contributions over here?

[jagpreetrahi]

From what I understand, the core problem today is that while we can convert SBGNML → Cytoscape.js quite well, the reverse direction (Cytoscape.js → SBGNML) is still not properly reusable. The existing exporter inside sbgnviz.js works but is tightly coupled to a custom Cytoscape.js fork, which makes it hard to reuse in other tools or services.
In parallel, the cytoscape-sbgn-stylesheet currently provides good support for PD, but AF support is incomplete (missing glyphs, unit of information handling, and some properties). Because SyBLaRS depends on this stylesheet and on sbgnml-to-cytoscape, it currently ends up supporting only PD diagrams.
My understanding of the project goals is:
Extract or refactor the Cytoscape → SBGNML conversion logic into a clean, reusable library (or integrate it into sbgnml-to-cytoscape) so we can support proper round-trip editing.
Extend cytoscape-sbgn-stylesheet to fully support AF, while also fixing missing glyphs/properties in both PD and AF.
Upgrade SyBLaRS to leverage these improvements and provide full PD + AF support for layout and rendering.

This seems less about biology itself and more about standards compliance, format conversion, and making the SBGN toolchain modular and reusable, which I find really interesting.
I’d love to know:
Which part would be best to start contributing to (converter vs stylesheet)?
Are there specific AF glyphs or properties currently considered highest priority?

[jagpreetrahi]

@khanspers , hope you doing well. There is a bug in the SBGN web.
So the SBGN-ml and library buttons are pointing to the wrong url.
Here's it

I think it should be fixed for better experiences.

[cannin]

@jagpreetrahi what specific link is broken?

[jagpreetrahi]

Hey cannin ,
I am adding a screenshot to demonstrate the bug which gives 404 error code.

When we click these two then it's not work.

[cannin]

@jagpreetrahi fixed links

[jagpreetrahi]

Thanks cannin, now I'll try to explore it and understand well about the problem.