Re: [GSoC 2013][Idea] Bird's eye view pan control for Cytoscape.js

[Bumbu Alex]

Oh god, I forgot to spellcheck my masterpiece.

I updated google doc, so you may feel more comfortable to read from there.

On Mon, Apr 22, 2013 at 4:36 PM, Bumbu Alex <bmb...@gmail.com> wrote:

# CC: Max Franz, Christian Lopes, Gary Bader

# My official name is Truhin Alexandr, but on my google profile I use a nickname: bumbu

This is a mature draft of the proposal for Bird's eye view pan control for Cytoscape.js (Idea #13).

Original version of this proposal is here (google doc). You can post comments directly in there or it this thread. All the questions is better to add here in order not to repeat them. As I'll do changes in the doc, I'll do updates in this thread (I'll post only important updates or chunks of small updates).

To make a fast overview of what is done until now you can take a look at my clone (branch navigator) and a screencast (these links are provided inside proposal).

Proposal

Intro

Navigation Panel is a great improvement for Cytoscape.js usability. It also solves the problems of bird’s eye view of the graph and easier navigationu through the graph.

General descriptin of the Navigation Panel

Navigation Panel is usualy a smaller window/panel/block which is a mirror of main window. It has few main purposes:

• Display a bird’s eye view over main window
  
• Display which part of main window now is visible
  
• Remote navigation over main window
  

A good example of Navigation Panel is Photoshop Navigation Panel.

Navigation pane should display a minified version of the nainwindow render.

It shuld have a way to show active/visible part of the main window. Alternatively this box can be a handler used for view navigation.

Description

I would go for the given properties and features for Navigatiou Panel:

• It can be of any size
  
• It can be placed anywhere (insido or outside of the cy graph)
  
• It should mirror rendered graph
  
• It should show active/visible part of the main window
  
• It should give ability to manipulate with main window view (zoom/pan)
  
• It should not slow down application performance
  
• It shold work both on desktop and mobile browsers which are supported by Cytoscape.js
  
• It should not break any other plugins/functionality of the Cytoscape.js
  
• It should have tests
  
• It should be compatible with other visualizers (or to be easy to modify)
  
• It should have documentation
  

Working proces/implementation steps

In order to test the idea and in order to get familiar with Cytoscape.js I forked the project on GitHub and created a mockup of the plugin. I didn’t set a demo for it, but you may easily clone it and run /debug/index.html in your browser, either view a screen cast which shows how it works.

There are few things on which I spent some time and I’m still not sure if my decision was good/suitable for this project:

• How should I name the plugin:
  
• Navigation Panel (I chose this one)
• Navigation Pane
• Navigatior
• Bird’s Eye View
• View Pan Control
• View Pan
• Plugin name should be camelcased or not (I used cyNavigationPanel for jQuery function)
  
• Plugin should be developed inside Cytoscape.js project, or appart as an independent plugin?
  
• Are there any coding style guides (I used one of mine wich is very similar with Twitter Bootstrap JavaScript style guide. The only difference is that I used semicolons.)?
  
• I started developing based on default jQuery plugin template but later I switched to Twitter Bootstrap Plugin templeate as it seems more flexible.
  

After determining all these things I would start to work on plugin in given order:

• Init plugin
  
• Display Navigation Panel
  
• Display Thumbnail zone inside Navigation Panel (thumbnail should fit Panel but shoud keep Graph scale)
  
• Display View zone (visible part of the graph)
  
• Hook graph changes (zoom/pane) and change View zone acordingly
  
• Hook View drag and pan graph
  
• Hook View scroll and zoom graph
  
• Hook View select (using Ctrl + Mouse select next visible area) and pan/zoom graph
  
• Remove jQuery UI and use custom dragging hook
  
• Prevent mouse events which happen in Navigation Panel from propagation
  
• Make Navigaion Panel responsive (on graph container sizes change)
  
• Render graph and add it to the Thumbnail zone
  
• Rerender graph when it changes
  
• Create an universal plugin by (one of):
  
• Externalize functons specific to Cytoscape.js (hook them in API) so that any othe project that has ability to hook its view modifications and provide details about visible area will be able to use this plugin
• Create a basic universal plugin and move all specific to Cytoscape.js things into a child (inherited) plugin
• Document how to use plugin with other libraries
  

Schedule

  week 1 Set up plugin template
  week 2 Create a working draft
  week 3 Hook all events and interactions
  week 4 Work on thumbnail rendering
  week 5 Remove jQuery UI
  week 6 Start writing tests and documentation
  week 7 Mid-Term evaluation
  week 8 Make Navigation Pane responsive
  week 9 Create an universal plugin
week 10 buffer week
week 11 Merging into main project
week 12 Bugs/Improvements/Documentation
week 13 Bugs/Improvements/Documentation
week 14 Bugs/Improvements/Documentation
week 15 Pencils down

Results

• Navigation Panel jQuery plugin (tested and documented)
  
• Easier navigation through the graphs
  
• Bird’s eye view over graph
  
• View which part of the graph now is active
  

[Bumbu Alex]

[Bumbu Alex]

I updated my application by adding some informations about my background and my availability.

I still have some questions:

• How should I name the plugin:
  
• Navigation Panel (I chose this one)
• Navigation Pane
• Navigatior
• Bird’s Eye View
• View Pan Control
• View Pan
• Plugin name should be camelcased or not (I used cyNavigationPanel for jQuery function)
  
• Plugin should be developed inside Cytoscape.js project, or appart as an independent plugin?
  

• Are there any coding style guides? I used one of mine wich is very similar with Twitter Bootstrap JavaScript style guide. The only difference is that I used semicolons.
  
• I started developing plugin based on default jQuery plugin template but later I switched to Twitter Bootstrap Plugin templeate as it seems to be more flexible.

Can please anyone help me with these questions?

On Mon, Apr 29, 2013 at 11:56 AM, Bumbu Alex <bmb...@gmail.com> wrote:

I put a demo on GitHub pages. It is the same debug page but with navigation panel.

[Bumbu Alex]

I put a demo on GitHub pages. It is the same debug page but with navigation panel.

[Max Franz]

On Monday, 29 April 2013 at 05:52, Bumbu Alex wrote:

I updated my application by adding some informations about my background and my availability.

I still have some questions:

• How should I name the plugin:
  
• Navigation Panel (I chose this one)
• Navigation Pane
• Navigatior
• Bird’s Eye View
• View Pan Control
• View Pan

OK 

• Plugin name should be camelcased or not (I used cyNavigationPanel for jQuery function)
  

Yes 

• Plugin should be developed inside Cytoscape.js project, or appart as an independent plugin?
  

Just create the plugin in the plugins directory in your own fork. 

• Are there any coding style guides? I used one of mine wich is very similar with Twitter Bootstrap JavaScript style guide. The only difference is that I used semicolons.
  

That should probably be fine.  You can check the source code in the repo to get an idea of how we've done things, but your plugin will be separate anyway.

 

• I started developing plugin based on default jQuery plugin template but later I switched to Twitter Bootstrap Plugin templeate as it seems to be more flexible.

The jQuery plugin template is probably enough.  It's what I've used in the panzoom, etc. 

[Bumbu Alex]

On Sat, May 4, 2013 at 10:46 PM, Max Franz <maxk...@gmail.com> wrote:

On Monday, 29 April 2013 at 05:52, Bumbu Alex wrote:

I updated my application by adding some informations about my background and my availability.

I still have some questions:

• How should I name the plugin:
  
• Navigation Panel (I chose this one)
• Navigation Pane
• Navigatior
• Bird’s Eye View
• View Pan Control
• View Pan

OK 

• Plugin name should be camelcased or not (I used cyNavigationPanel for jQuery function)
  

Yes 

• Plugin should be developed inside Cytoscape.js project, or appart as an independent plugin?
  

Just create the plugin in the plugins directory in your own fork. 

Great. I did that from the beggining by creating a fork.

• Are there any coding style guides? I used one of mine wich is very similar with Twitter Bootstrap JavaScript style guide. The only difference is that I used semicolons.
  

That should probably be fine.  You can check the source code in the repo to get an idea of how we've done things, but your plugin will be separate anyway.

That was my starting point.