Cytoscape.js extension template using ESM

[maxkfranz]

Background

Cytoscape.js is a library used to visualise and analyse networks in the browser or in Node.js.

Problems to solve:

• A lot of JS projects now, and any recent projects, use ESM (either natively in the browser or with a bundler). The core Cytoscape.js library supports ESM. The extensions do not.
• Someone using ESM would have to do complicated configurations to make the extensions work with a bundler.
• Someone using ESM directly in the browser would have to use workarounds in their own code to make extensions work. This would not be straightforward, especially for novices.
• It’s difficult for someone to contribute an extension, unless they’re fairly well skilled technically.

Technical background:

• ESM is now the module standard for JS.
• The existing extensions largely use Webpack to build UMD (CJS, AMD, globals). They should use Rollup to build ESM and UMD in future.
• The main library already uses Rollup to build ESM and UMD.

Goal

• Build a template extension using a Github template repository.
• Use your template to update the main first-party extensions.
• Add the template extension to the documentation. A new app author should just click a button to get a new repo for their extension on GitHub. Then they can just focus on their extension itself.

Difficulty Level

Easy. It’s straightforward to do. The core library can be used as a reference. It’s a laborious process, though.

Size and Length of Project

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

• medium: 175 hours
• 12 weeks

Skills

Essential skills: JS, attention to detail, testing Nice to have skills: Experience using Cytoscape.js

Public Repository

https://js.cytoscape.org/

Potential Mentors

• Max Franz (maxkfranz@gmail.com)
• Mike Kucera (mikekucera@gmail.com)
• Christian Lopes (chrtannus@gmail.com)
• Gary Bader (gary.bader@utoronto.ca)

[Ayushmanwebdeveloper]

Hi! I came across the "Cytoscape.js extension template using ESM", project, and I find it really fascinating. I believe my skills and experience would be a great fit for this project. I am really interested in contributing to it, and I’ve relevant skills for contributing to it as I’ve experience in full stack web development (React JS, Node JS, MongoDB, PostgreSQL, REST API, Django, AWS). I’ve worked on 10+ full stack projects & 4 internships in the past 1.5 years, and I have also completed the App Academy Open Software Engineering Bootcamp (500+ hours of full-stack online curriculum), where I learned a variety of skills. Additionally, I have worked on various frontend and backend projects, and I’m also preparing for the AWS Certified Developer Associate certification.

I'm willing to learn new skills while contributing to the project for example Cytoscape.js. I’ll put my best efforts into successfully contributing to the project. Could you please give me some advice so that I can contribute to Cytoscape.js extension template using ESM this summer? Thanks a lot.

https://www.linkedin.com/in/ayushmantripathi7724/

[7malikk]

Hello @maxkfranz I am Malik a frontend developer with the following project essential skills: proven knowledge of JavaScript, attention to detail, and testing. I also have a degree in biology and was delighted to come across the National Resource for Network Biology, a fusion of biology and technology.

I am willing to learn more about Cytoscape.js in order to work on this project

I have been searching for resources on Cytoscape.js and came up with these:

• https://www.youtube.com/watch?v=JLpq85t7-iM&ab_channel=KnowledgeBase
• https://blog.js.cytoscape.org/2016/05/24/getting-started/
• https://www.youtube.com/watch?v=Bo-xTvvsPT4&ab_channel=htmllab

I would really appreciate it if I could discuss this with one of the potential mentors concerning how to proceed with this project I would also appreciate some resources on Cytoscape.js Out of courtesy, I didn't want to send an email.

[Ayushmanwebdeveloper]

Hi! for creating the extension template. Do you want us to follow the configurations of any specific existing Extension? I analysed existing first-party extension extensions, many of which used webpack.

[maxkfranz]

The point is to update all the extensions, so there is no extension that you can just copy for this.On Mar 8, 2023, at 09:48, Ayushman Tripathi @.***> wrote: Hi! for creating the extension template. Do you want us to follow the configurations of any specific existing Extension? I analysed existing first-party extension extensions, many of which used webpack.

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

[Ayushmanwebdeveloper]

Okay, got it! Thank you very much. I've begun work on the template extension as well as an analysis of existing extensions.

Sent from Mailspring @./0?redirect=https%3A%2F%2Fgetmailspring.com%2F&recipient=cmVwbHkrQVZZNUo1T09MQjZKWlpIQ1lYQldBUDZDRENGS0xFVkJOSEhGN01XVEFNQHJlcGx5LmdpdGh1Yi5jb20%3D), the best free email app for work On Mar 10 2023, at 9:47 pm, Max Franz @.> wrote:

The point is to update all the extensions, so there is no extension that you can just copy for this.On Mar 8, 2023, at 09:48, Ayushman Tripathi @.***> wrote: Hi! for creating the extension template. Do you want us to follow the configurations of any specific existing Extension? I analysed existing first-party extension extensions, many of which used webpack.

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.> — Reply to this email directly, view it on GitHub @./1?redirect=https%3A%2F%2Fgithub.com%2Fnrnb%2FGoogleSummerOfCode%2Fissues%2F223%23issuecomment-1464044078&recipient=cmVwbHkrQVZZNUo1T09MQjZKWlpIQ1lYQldBUDZDRENGS0xFVkJOSEhGN01XVEFNQHJlcGx5LmdpdGh1Yi5jb20%3D), or unsubscribe @.***/2?redirect=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAVY5J5M6B5EBRB5MQGX4AJTW3NH2LANCNFSM6AAAAAAVMPF4ZU&recipient=cmVwbHkrQVZZNUo1T09MQjZKWlpIQ1lYQldBUDZDRENGS0xFVkJOSEhGN01XVEFNQHJlcGx5LmdpdGh1Yi5jb20%3D). You are receiving this because you commented.

[Shubhamrajgithub]

Hi @maxkfranz, I am a College 3rd year student wanted to contribute in GSOC in this project, I have worked on JS and wanted to learn about cytospcae.js to be able to be fully fit for this project, can you guide me with the roadmap to start learning on cytoscape.js.

[Vinodk-17]

Hello Max Franz, Mike Kucera, Christian Lopes, and Gary Bader, I am Vinod Kuril, and I recently came across the "Cytoscape.js extension template using ESM" project, which I find really amazing. I have all the relevant skills required to work on this project, including proficiency in JavaScript, ESM, Webpack, Rollup, and Node.js. I also have attention to detail and experience with testing, which will be important in ensuring the quality and functionality of the extensions.

As a 3rd-year engineering student specializing in computer engineering, I have experience working with various programming languages and tools. I am familiar with ESM, which is now the module standard for JavaScript, and I have done some worked with Webpack and Rollup in previous projects. I am also comfortable working with Node.js and have experience in building and testing JavaScript applications.

I am willing to learn more about Cytoscape.js in order to work on this project

I have been searching for resources on Cytoscape.js and came up with these:

The official Cytoscape.js website - https://js.cytoscape.org/ - this is the go-to resource for documentation, examples, and tutorials on Cytoscape.js. You can find information on how to get started, how to use the library, and how to create custom extensions.

The Cytoscape.js GitHub repository - this is where you can find the latest source code for the library, as well as any open issues or pull requests. You can also contribute to the project by submitting bug reports, patches, or new features.

The Cytoscape.js API documentation - this is a comprehensive reference to all of the classes, methods, and properties available in the Cytoscape.js library. You can use this to learn more about the library's functionality and how to use it in your own projects.

I am intrigued by the concept of using ESM for Cytoscape.js extensions, and I believe that it will make it easier for developers to contribute to the project. I understand that this project may require a lot of effort and attention to detail, but I am willing to commit the time and effort required to ensure its success.

Github Profile : https://github.com/Vinodk-17 Email ID : kurilvinod9870@gmail.com

[maxkfranz]

Anyone interested in the project should submit an application: https://nrnb.org/gsoc.html

[Deepanshu-Choudhary]

Hi @maxkfranz , My name is Deepanshu Choudhary and I'm a sophomore at BITS-Pilani. I'm experienced with Java, JSP, Servlets, MySQL, DHTML and Node.js. I am interested in this project and looking forward for contributing to it. Please guide me Thank you

[Simer13]

Hello, ive sent a proposal to your personal email account. can you kindly review it once you get time so that I can make corrections and send submit it finally.

[khanspers]

@Simer13 @Deepanshu-Choudhary : Proposals for GSoC have to be submitted via the official GSoC site before the deadline on April 4 18:00 UTC. We cannot review proposals sent via email or other channels.

[Simer13]

ohkay thanks for the input ... @khanspers

[PavanButke]

Hello, ive sent a proposal through nrnb application form .Please kindly review it once you get time so that I can make corrections and send submit it finally.

[khanspers]

Hi @PavanButke , I received your completed NRNB Academy Admissions form. However, the NRNB Academy program is an unpaid mentoring program which separate from GSoC. GSoC projects have already been selected and the program is underway. If you are still interested in NRNB Academy, contact me directly to discuss.

[PavanButke]

Hi Kristin, Thanks for your email, I am aware that nrnb is unpaid, but still I would to persist with same. I would like to be part of the program.

Thanks and regards, Pavan

On Fri, 26 May, 2023, 12:13 am Kristina Hanspers, @.***> wrote:

Hi @PavanButke https://github.com/PavanButke , I received your completed NRNB Academy Admissions form. However, the NRNB Academy program is an unpaid mentoring program which separate from GSoC. GSoC projects have already been selected and the program is underway. If you are still interested in NRNB Academy, contact me directly to discuss.

— Reply to this email directly, view it on GitHub https://github.com/nrnb/GoogleSummerOfCode/issues/223#issuecomment-1563343875, or unsubscribe https://github.com/notifications/unsubscribe-auth/AR5LNTXXYH3466NEVOAOTO3XH6R3XANCNFSM6AAAAAAVMPF4ZU . You are receiving this because you were mentioned.Message ID: @.***>

[shubhankarsharma876]

I trust this message finds you well. My name is Shubhankar Sharma, and I have been conducting a review of the current issues. I am writing to inquire about the status of a particular issue and whether it is currently open for contributions. Having assessed my skills and capabilities, I believe that I am well-suited to contribute effectively to the resolution of this issue. If the aforementioned issue is still open for collaboration, I express my sincere interest in making a contribution.

I appreciate your time and consideration in providing clarification on this matter.

Best regards, Shubhankar Sharma

[maxkfranz]

There's an in-progress prototype of ESM support by @Foxtrot-14 in the automove extension: https://github.com/cytoscape/cytoscape.js-automove/pull/34

@shubhankarsharma876, if you'd like to contribute, you're welcome to start by commenting in that PR's thread. That would start the process of coordinating your contributions in tandem with @Foxtrot-14.

The prototype still needs some work. Once the prototype has been completed for the automove extension specifically, it will need to be converted to a GitHub repo template. Then, the template will need to be applied to all the existing first-party extensions. There's a lot to do, so there are certainly several opportunities for you to contribute meaningfully.

Looking forward to your response

[shubhankarsharma876]

Sure @maxkfranz for forwarding this opportunity, and will try to find the best for this prototype.

[khanspers]

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

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

[dansesoul]

@maxkfranz Hello, I see this project is still open for GSoC. I'm interested in collaborating. I'm currently near to obtaining my degree in biology. I have completed all credits, and I'm working on my thesis. I am very motivated to learn coding and have been searching for an opportunity like this. I am a beginner, however I have someone mentoring me, and I'm more than willing to invest my time in this. I have installed cytoscape and I ran the basic tutorials. I have filled up the recommended template, but I have some questions on what is expected in the project proposal section. Is it possible to get some feedback on my current plan to start contributing? If so, I'd be glad to send it by email. Thanks. Regards, Daniel