BioGPS gene report layout

[Ian MacLeod]

Shivansh I'm moving this discussion to our Google group as it contains more general BioGPS information that may be useful to others. The example html file you attached in your email is a good start. One quick note - we're moving away from the 'Search', 'Search Result', 'Gene Report' tabs at the top of the page. These will each be their own page going forward. For now you can focus on a single window in your html layout and make it closer to the current BioGPS layout window, which includes the species drop-down, the More Options drop-down, and the maximize/re-size button in the window's title bar.

Additionally there are a couple of details in the jQuery windowing implementation that we'd like to improve to be closer to the YUI demo at http://yuilibrary.com/yui/docs/resize/simple-resize-plugin.html. The YUI demo features much faster resizing of the window while dragging. The jQuery demo you sent has slower, sometimes un-responsive window resizing while dragging its borders (may be iframe related). The other feature we like in the YUI demo is the ability to move the window by double-clicking anywhere in it, not just on its title bar. Please evaluate implementing/improving these features in your jQuery demo code.

Here are the answers to your questions:

Questions 1 and 3 - Django routes URL requests such as /plugin/1/, /gene/v2/1017/, etc according to its url definitions in urls.py files. It's worth your while to go through the Django tutorial to understand its basic workings, and page 3 of this tutorial explains url routing very well. We've set up all /plugin/ urls to route through the biogps/apps/plugin/urls.py file. This file maps urls to the Django view functions defined in views.py that will handle the request and return relevant information. For your work on /gene/v2/... you can edit the biogps/apps/gene/urls.py file to include a v2 url that uses a new or existing view function in the views.py file there.

Question 2 - Searching in BioGPS starts with the query itself, eg. http://biogps.org/?query=cdk2 which brings the user to the Search Result page. After a search result is selected additional work is done server-side that we can gloss over for now. The relevant bits for you are the web service calls to get layout information and plugin information for each plugin in the layout. The default layout ID is 83. The default layout's information is returned by the web service url http://biogps.org/layout/83/?loadplugin=1. In BioGPS you will also have a gene ID that you use when calling another web service url http://biogps.org/layout/83/renderurl/?geneid=1017 to get plugin information that includes the current gene ID in the layout's plugins' urls. I've added this to the documentation at https://bitbucket.org/sulab/biogps_core/wiki/biogps_ws_layout.

A few related queries:-

1. All the plugins I assume are called from - \src\biogps\apps\plugin\plugin.py How are the plugins called in the browser (I noticed that there are 278 plugins, including the 3 default ones - mainly Dialog Boxes with Embedded iframe that are inserted in the view - in 56 pages). Can the same plugins be called or is there a way that I review the code?

2. The west-panel (with current gene list & saved gene list) is not included here. I assume that they are needed when the Search shows more than 1 gene for the variable, and clicking on each of the gene in the Current Gene List shows the Default layout of that particular gene. Could you please guide me through as what is the flow of the Search here? Which files are included while searching

3. I'd have to ask you to tell me how to host such an html file in django, once I have run the server again. (the part of /gene/v2/{Gene_ID}/ in django)

Finally, In gene identifiers, I have included the whole of the table (including the part for species).

I have used nested tabs in Tab-1, Tab2 would depend on Tab 1 (whether Search was successful or not) & Tab-3 contains the present Default layout.

For now I am using the minified jquery from Google Api's (http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js), whose interaction with mouse isnt very smooth. That will be replaced by the concordant path in the biogps_core/assets/js2/jquery-ui/ javascript and will be very user friendly.

Please let me know your thoughts.

[Shivansh Srivastava]

Hi Ian,

Kindly find attached 2 html files. There are 2 events happening in the first jQuery one.

1. It contains the layout mostly javascripted, with a lot of jquery libs. Since there is very less of styling & modifying through html tags, it could be taken forward easily from this through javascripting/jquery.

- Default Gene 1017 Button (meant for after a Search) - which opens up an iframe.I have incorporated the Dropdown menu in it, although the links to each species is not opening in the iframe itself, rather its opening in a new window. Tiling of Windows can be incorporated once everything is set.

- The dropdown menu below the button - which reloads the iframe below it (since that iframe has been generated as a atg in html), but opens a new window for a new Gene ID - but the problem of not reloading the dialog box persists.

- The iframes are working fine.

1. Regarding its Drag-blity & Resizability, I have simplified all of jQuery- I suppose its pretty smooth now & more lightweighted. (Most of them are linked which are cdn hosted).

2. Properties - For now, I have let the default CSS values of the window -

width: 400,                   

height: 300,      

minWidth: 200,    

minHeight: 150,   

maxWidth: 800,    

maxHeight: 600,

which can be changed in future from /jquery.window.js

2. Second - I am working on a YUI3 based Dialog box too, since it was also an option, I tried (2nd html file attached). Points to notice are that as the size of an iframe inside it is increased, the dragging of the box leads to slow & quantized movement. Also, with an iframe, it too is not draggable within the Dialog box.

Secondly, Problem still persists  as I have tried sshing & successfully done through 2 different connections; but the Chrome/FF/IE Web Pages notify that it could not connect to http://127.0.0.1:8000/ - while just running - python manage.py runserver - and it shows that the dev server is running at the same address.

For now, I have gone through the making basic Django Apps, defining urls & calling Web services, on my locally hosted server.

Kindly please help me out on the EC2 Server soon. Also, please let me know how should I proceed from now. If its fine, we can discuss it on Sunday at the same time 10 AM PST (or any time else) or on Monday itself.

Thank you.

Regards,

--
Shivansh Srivastava

BITS-Pilani.

[Andrew Su]

Hi Shivansh,

On quick glance this looks like a good start to me. FYI, this is a holiday weekend so you may not hear back from folks on this end until Tuesday...

Cheers,

-andrew

--
You received this message because you are subscribed to the Google
Groups "Crowdsourcing Biology" group.
To post to this group, send email to crow...@googlegroups.com
To unsubscribe from this group, send email to
crowdbio+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/crowdbio?hl=en?hl=en
 
GSoC Organization page: http://www.google-melange.com/gsoc/org/google/gsoc2012/scripps_crowdbio
GSoC Ideas page: http://sulab.org/gsoc/

<BioGps - jQuery.html>

<BioGps - YUI3.html>

[Ian MacLeod]

Shivansh I think I understand what you're getting at but am not positive. If I'm correct you want to know how to get a plugin's url with the gene ID as part of it? This is much simpler than what you're proposing and is already implemented. Earlier I sent you the gene web services documentation, and that is only one part of the BioGPS web services documentation; we also have layout web services documentation there as well. All of this documentation exists at https://bitbucket.org/sulab/biogps_core/wiki/Home.

There you will see a link to the Layout web services documentation. The second example on this page should be what you're looking for (http://biogps.org/layout/83/renderurl/?geneid=1017). The "plugins" array in the response of this service has the individual plugin IDs and their URLs with the supplied geneid included.

Hope that helps,

Ian

Following my previous mail, I wish to explain what I want to do. 
If I pass something like- 
var valu = this.value;
var searchURL = 'http://plugins.biogps.org/data_chart/data_chart.cgi?id='+valu; //Plugin 9
OR
var searchURL = 'http://biogps.org/ext/symatlasbar/?geneid='+valu+'&hidespecies=1'; //Plugin 73
where this.value is the Search string that the user enters, it also searches the for the same gene id & gives the correct url. Can this be implemented? 
This can be segregated by /plugin/{Gene ID}/.
Also, for this, I might have to take into account all the genes with their corresponding gene ids - which would be required when a user wishes to add the Gene Wiki plugin (Plugin 9) or searches for the Gene name rather than the Id, which is what I am considering now.