Interactive Web Interfaces for Cytoscape Desktop

AlexanderPico commented 8 years ago

Background

Cytoscape is a highly popular open source bioinformatics software platform for visualizing, analyzing, and publishing graphs or networks representing molecular interactions, gene expression, other biological data. As a desktop platform, Cytoscape is one of the most successful open source projects in biology, and it is capable of integrating observational data from numerous sources.

Building upon the latest work on CyREST and CyBrowser, there is a huge opportunity to provide extensive web-based content that is interactive and responsive to a running instance of Cytoscape. Check out the current documentation on the automation wiki and the extended potential for Cytoscape Automation in general.

Goal

The goal is to support web content (HTML, JavaScript) that interacts with Cytoscape and enables popular Cytoscape workflows. We would begin by generating a simple web4cytoscape.js library that would functionalize interchangeable sections of web content depending on whether the content was being viewed in (1) CyBrowser, (2) another browser while Cytoscape is running, or (3) another browser without Cytoscape. This library would facilitate the production of web pages that provide links and buttons, for example, that load networks, data or perform functions in a running instance of Cytoscape, when Cytoscape is available.

The project would also include a few sample web pages to demonstrate the utility of web4cytoscape. For example, you could produce pages that provide data files and buttons to perform one or more of the following:

import networks into Cytoscape
import data files into Cytoscape
process common data formats into tabular formats that are then imported into Cytoscape
perform network layout functions
perform filtering and subnetwork creation
perform network analysis functions
perform network visualization
export network images
export web-ready cytoscape.js files from Cytoscape
demonstrate a Cytoscape app's functions
performs an analysis workflow
provides a guided tour of Cytoscape or Cytoscape app features
and much more...

Example

Here is an example of a simple site written in HTML and JS that communicates with a locally runnning instance of Cytoscape via CyREST in order to perform some typical tasks. The goal of this project is essentially to make it easier for others to build such sites by providing a web4cytoscape.js library that wraps around all the clunky HTTP and data marshalling code that is the same across all cases per function.

Difficulty Level: 2

Prior experience with web development is required. A lot of js experience is a plus. Some prior experience with Cytoscape and network analysis is preferred, but not required.

Public Repository

https://github.com/cytoscape/cytoscape-tutorials

Potential Mentors

Alex Pico
Yihang Xin
David Otasek

himanshuc3 commented 5 years ago

I want to propose for this project for GSOC 2019. Is this available ?

scootermorris commented 5 years ago

I want to propose for this project for GSOC 2019. Is this available ?

Absolutely!

Philosophist commented 5 years ago

Sorry for such a last-minute proposal. The window to apply was a bit narrow for me and I was unsure if I would be qualified for anything until I saw this one. I can refine my proposal if you would grant me an extension and would offer feedback.

AlexanderPico commented 5 years ago

@Philosophist Unfortunately, we are not allowed grant extensions. The program is run by Google and they set the timeline and application procedures. I’d recommend getting something in to at least have a chance. Applications have to be submitted through the official GSoC site. There are no exceptions made to the deadline.

matthiaskoenig commented 4 years ago

Just for understanding how this should work. Basically this would be a small javascript library which would provide a wrapping layer around available CyREST commands (and automation) similar to the available python and R wrappers?

RBVI commented 4 years ago

There are actually two options here. First, CyBrowser is our built-in browser component, which supports Javascript, CSS, HTML5, etc. In addition, it's closely tied into Cytoscape itself, so it allows you to register listeners and call javascript callbacks on node or edge selection. Moreover, we can extend it as needed to tie in closely to Cytoscape. Second, as you have suggested, rather than depend on CyBrowser, write a more generic javascript library that sits on top of CyREST. I don't see the two as mutually exclusive, though. There are things we can do if a page is opened up in CyBrowser that aren't currently possible through a generic browser, but the CyREST interface would work in both.

gaurlakshya commented 3 years ago

Hello sir, @AlexanderPico I want to work on this project . Sir i am totally new to open source contribution world . Sir i want to make a start with this project. Sir i have an intermediate knowledge of web development and sir i am looking forward to learn more.

AlexanderPico commented 3 years ago

Edited and reopened for 2021

VimukthiRandika1997 commented 3 years ago

Hey!, @AlexanderPico

My name is Vimukthi Randika, I would really like to work on this task for GSOC 2021 or it doesn't matter with or without it. I have prior experiences with modern Javascript ,web design and web development. Still I am very ego to learn new technologies, such as Node, ReactJS, etc. I am super exited to work on this project. Please give me more info regarding this projects. Thanks.

AlexanderPico commented 3 years ago

A strong application for this project would demonstrate enough familiarity with Cytoscape, CyREST and JS to prepare a simple demo site (e.g., an index.html file consisting of HTML and JS) that communicates with a locally running instance of Cytoscape (via CyREST) in order to perform some basic functions, like loading a network, performing a layout, loading data and applying a visual style.

If the applicant can demonstrate a grasp of these concepts with such a demo, then it should be clear what the project entails, i.e., a js library that makes is easier for other to make the same sort of web site.

I added an Example section to the description above.

VimukthiRandika1997 commented 3 years ago

Hey! @AlexanderPico,

Thanks for your quick response!. Recently I'm going through Cytoscape technologies and also CyREST API to have a better depth and sound knowledge. What I want to know is that should I create demo website similar to the example which has been given using NDEx-js-client library or step into a basic approach for the web4cytoscape.js library. If it is let me know about technological background for that approach for better result. Thanks for your support!.

Aviral09 commented 3 years ago

Hello @AlexanderPico I am a second-year Computer Science undergraduate at BITS Pilani, India. I have good experience in Web development, having already worked with frameworks like Vue and React in addition to HTML, CSS and JS. I have also implemented Computer Vision projects in Python. My personal website - https://aviralgoel.me/ For the past semester, I have been exploring the applications of Computer Science in Biology and have worked with gene sequencing and phylogeny using MEGA X and online services etc for personal interests.

I find this particular project really interesting and would like to contribute to the same as a potential GSoC 2021 applicant. I have gone through the thread above and have been going through the linked repo as well. Can you please let me know what I need to do further? Are there some getting started tasks that I can solve? Also, do I need to mail my CV and transcripts and to whom?

Thank you in advance!

cnu1812 commented 3 years ago

Hey There! I want to apply for this project. Is it open for GSOC 2021..? I have prior experience with nrnb/github.io!

AlexanderPico commented 3 years ago

Thanks for your interest everyone! There are no prerequisite tasks nor a need to submit your CV by email. The application process all goes through Google's GSoC interface. Please submit your application there. My suggestion is to submit early to perhaps get some feedback before the deadline. You can update your application up until the deadline. If you wait until the last minute to submit your application you run the risk of missing the deadline (e.g., for network stability reasons) and Google never allows exceptions to the deadline. Good luck!

cnu1812 commented 3 years ago

I had submitted my draft proposal please review it!

khanspers commented 2 years ago

Cleanup in preparation for GSoC 2022.

nrnb / GoogleSummerOfCode