Popper.js extension for Cytoscape.js

[maxkfranz]

Background

Cytoscape.js is a graph theory (a.k.a. network) library for the web. It supports both visualisation and analysis of relational data.

Popper.js is a popup/popover/tooltip library for JS. It allows for customisable overlays to be put on the page.

Goal

Develop an extension for Cytoscape.js that adds support for adding poppers to graph elements and the background of the viewport.

Description

This would be similar to the qtip extension. The qtip library that the qtip extensions uses is abandoned, and it has several bugs in it. Qtip is also coupled to jQuery. Popper.js, on the other hand, has many more features than qtip. Popper.js is also under active development and it does not need jQuery. The qtip extension would be useful as a reference for a popper extension, though.

You can use the scaffolder to automatically generate an extension skeleton to get you started quickly.

Skills

JS, npm, HTML, CSS (essential) Cytoscape.js (nice to have)

Difficulty level 1

This is a straightforward project, but it would be difficult unless you are well experienced with modern web tech.

Potential mentors

Max Franz (maxkfranz@gmail.com)

[FezVrasta]

if you need help with the Popper.js API just let me know 🙂

[jajodiaraghav]

Do i have to mail the mentor(maxkfranz@gmail.com) or alex.pico@gladstone.ucsf.edu in order discuss furthur?

[maxkfranz]

Read the "For Students" section http://nrnb.org/gsoc.html

If you have any questions after that, feel free to email me or Alex.

[goelrohan6]

Hello there,

I am experienced working with javascript, HTML, don't have experience with Cytoscape.js.

I am willing to work on the idea, can someone guide me how to go about things, where to start from what all new things are to be learned?

[ajaytdev]

Hi ,

I am experienced working with javascript, css,html and don't have any experience with Cytoscape.js.

I am willing to work on the idea, can someone guide me how to start,from where and what all new things are to be learned?

[ajaytdev]

@maxkfranz i have experience with html css js. can you help me get started with this ? thanks

[maxkfranz]

This extension would have functionality similar to the existing Qtip extension, but it would use Popper.js instead. You can look at the Qtip extension to get an idea: https://github.com/cytoscape/cytoscape.js-qtip

It's good to have some familiarity with Cytoscape.js before starting the project. You can learn about Cytoscape.js from its docs: http://js.cytoscape.org/

There are also tutorials: http://blog.js.cytoscape.org/tutorials/

This project is the creation of an extension, so it's good to review the extension API: http://js.cytoscape.org/#extensions

There's a scaffolder to generate the base of a new extension: http://js.cytoscape.org/#extensions/autoscaffolding

The most important part for getting accepted to GSOC is putting together a good application. The NRNB site has good tips for that: http://nrnb.org/gsoc.html

Make sure your application has a clear set of requirements and a good plan/timeline for accomplishing the project goals.

[kumarmj]

Hello @maxkfranz I am willing to work on this project. I have previously contributed in JQuery Project, QUnit & other opensource. Is this project available ?

[maxkfranz]

Submit a proposal on the GSOC site

[maxkfranz]

https://github.com/cytoscape/cytoscape.js-popper