jamiewaese / ePlant

ePlant is a data visualization tool for integrating and exploring multiple levels of biological data.
MIT License
2 stars 1 forks source link

Chromosome View stuff #60

Closed jamiewaese closed 10 years ago

jamiewaese commented 10 years ago

A few things I've noticed in Chromosome View...

DOCK NAVIGATION BUTTONS

LABELS

ANNOTATION POPUP BOXES

ANNOTATIONS

TAGS

TAGS POPUP

HEAT MAP

ANNOTATION PANEL

And... one more tweak for the

SELECT SPECIES PAGE

Thanks!

yuzhenmi commented 10 years ago

I'm not sure what's preventing the icons from changing. I reproduced this bug briefly in FireFox but it disappeared without me changing the code. I'm speculating that it is caused by the program constantly setting the img element's src attributes (although it is just repeatedly setting it to the same string), but it could be something else. I'll see what I can do.

yuzhenmi commented 10 years ago

I applied a change to the ChromosomeView icon. Please let me know if it fixes the issue. If it does then I'll apply the same change to the other icons.

jamiewaese commented 10 years ago

Yep, works good now.

On 2013-11-15, at 2:24 AM, Hans Yu wrote:

I applied a change to the ChromosomeView icon. Please let me know if it fixes the issue. If it does then I'll apply the same change to the other icons.

— Reply to this email directly or view it on GitHub.

yuzhenmi commented 10 years ago

I just discovered that there is a "max-height" attribute for CSS! I'm using it to dynamically size the gene popup. The downside is that the gene popup will now have a fixed y offset (notice how it was always 30% of the popup height above the mouse position, now it's just always 40 pixels above the mouse position, no matter the height of the popup).

jamiewaese commented 10 years ago

Great!

Can you post this text into the HTML index page, under the tabs? Feel free to edit or expand as you see fit. This is a work in progress but it should do for now.

--------------WELCOME

Welcome to ePlant, a user friendly data visualization tool for exploring multiple levels of biological data -- micro, meso, macro -- and related experimental findings.

Developed by Jamie Waese, Hans Yu and Nicholas Provart at the University of Toronto, ePlant combines proprietary and familiar data visualization tools with an intuitive user interface to facilitate the easy exploration of multiple plant biology databases.

With a zoomable user interface that allows users to move quickly between multiple levels of biological processes, ePlant helps researchers and educators make connections between DNA sequences, protein-protein interactions, cell and tissue expression patterns, natural variation, and proteomic responses to various experimental conditions. Dynamic links to the underlying data and other information pertaining to each view is available on demand.

Originally developed for the Arabidopsis Information Portal, ePlant is species agnostic and new plants can be added by following an established protocol. Please contact us if there is a particular species you'd like to add.

Developed in Nicholas Provart’s lab in the department of Cell & Systems Biology at the University of Toronto, ePlant was funded with grants from Genome Canada, XYZ and XYZ. This version of ePlant is a major update from the original ePlant by Fucile et. al (2011).

ePlant uses the HTML5 canvas, JavaScript and JQuery. It was designed to work with the Firefox and Chrome internet browsers. Some features may not display properly with Internet Explorer or Safari at this time.

--------------ABOUT

ePlant is an effort to leverage current thinking about data visualization to help educators and researchers make sense of the ever growing volumes of data describing multiple levels of biological processes that are now available online. For each of the species currently installed, ePlant connects to several web services to download the latest data pertaining to a plant’s genome, proteome, metabolome, biochemical pathways, and tissue expression patterns. It was designed to be easily updated and we plan to add additional data and visualization tools in the future.

We have organized our visualization tools with a conceptual hierarchy that progresses from big to small. We use a zoom metaphor to represent moving closer to- or further away from each level of analysis in the hopes that the temporal and spatial connection made from the juxtaposition improves the ability to make conceptual connections as well. We recognize that each level of analysis is unique and arguments can be made for organizing the hierarchy in a different order. Future versions of ePlant will allow users to order the icons according to their personal preferences.

Some of ePlant’s visualization tools are implementations of excellent systems you may be familiar with: Cytoscape.js for the protein interactions and reactome charts, JSmol for the 3D molecular view, and JBrowse for the genome browser. Other visualization tools are based on well known viewers developed at bar.utoronto.ca: the eFP browser for cells, tissues, and natural variations, as well as the Expression Angler and other bits and pieces we have reproduced and updated.

Recognizing the forest from the trees is especially challenging when your information must be accessed from separate sources, each with its own interface and methods for identifying and visualizing the data you’re interested in. ePlant brings new and familiar data visualization tools together into common framework, minimizing the steps necessary to explore a cluster of genes across several levels of analysis.

We designed ePlant to be open source and open ended, with the goal of adding additional plants and visualization tools as they become available. ePlant is licensed under a Creative Commons Attribution-Share Alike 2.5 Canada License, and the source code for the framework and visualization tools are available for download from GitHub.

Visualization Tools

Each level of data can be explored with the following tools:

Species Selector

This is the top-level view for ePlant. The species selector allows you to choose which plant databases you wish to explore. We currently support Arabidopsis thaliana, Solanum tuberosum (potato), Solanum lycopersicum (tomato), and Populus trichocarpa (poplar).

Chromosome Selector

The chromosome selector visualizes chromosomes as vertical bars. Enter a gene ID or alias in the text box and ePlant will automatically download the data associated with that gene for each of the installed views. You can enter several gene ID’s at a time if they are separated, by, commas, and there is an auto-complete function to help you identify genes by name. You can also load data by hovering over the chromosomes, selecting a gene from the context sensitive menu popup listing all the genes at that position, then clicking the ‘get data’ button in the annotation popup of the selected gene. The gene of focus can be adjusted via the combo box in the upper left corner, or by clicking on the star icon in the title bar of any annotation popup.

This view appears at the top of our visualization hierarchy because it provides a pictographic overview of the entire genome. It also conveniently indicates the positions of all the genes that have been downloaded. The thermometer icon at the bottom of the canvas generates a heat map indicating the density of genes along the chromosome. The pencil icon opens an annotation tool that facilitates customization of label colors and sizes.

Natural Variations

The natural variations view offers an eFP browser displaying the relative variations of any given gene’s expression levels in various samples from around the world.

This view appears near the top of the hierarchy because it shows expression patterns on a macro level, still focused on a specific gene but not as it pertains to a single organism.

Plant Expression

The plant expression view is an eFP browser that displays the expression pattern of any given gene as a heat map painted directly onto the tissues of a plant. Brighter colors denote a higher level of expression.

Experimental Conditions

The experimental conditions view displays the results of experiments such as exposure to stress or hormones using an eFP display.

Interactions Viewer

The interactions viewer displays documented and predicted protein-protein interactions for the selected gene identifier. This is an implementation of Cytoscape.js.

Reactome Viewer

This view displays reactome data, using Cytoscape.js to draw the nodes and edges./p>

3D Molecular Viewer

The molecular view displays a 3D structure of the selected gene’s protein product, from the Protein Data Bank, PDB, or predicted by Phyre.

Optional Controls

At the bottom of the canvas there are several icons for controlling application specific and cross application options.

Auto Citation

The auto citation icon opens a popup window with dynamically updated citation text, according to whichever species and view is currently active. We appreciate citations!

Screen Grab

The screen grab function creates a high resolution PNG image of the current canvas. Screen grabs do not include the user interface so they can be used to create clean diagrams for publication.

Tooltips

This icon toggles the tooltip help function on and off. The default is on, however once you become familiar with the interface you may prefer to turn it off.

Zoom Animations

We like the zoom animations but some purists do not. This button toggles the animated transitions on and off.

--------------DATA SOURCES

Arabidopsis thaliana

Solanum tuberosum

Solanum lycopersicum

Populus trichocarpa

------------EXAMPLE GALLERY

Here are some genes from Arabidopsis that tell interesting stories:

We will be building this example gallery over the next several months. Please send us a note if you find anything worth sharing!

--------------HELP omit this page On 2013-11-20, at 9:23 PM, Hans Yu wrote: > I just discovered that there is a "max-height" attribute for CSS! I'm using it to dynamically size the gene popup. The downside is that the gene popup will now have a fixed y offset (notice how it was always 30% of the popup height above the mouse position, now it's just always 40 pixels above the mouse position, no matter the height of the popup). > > — > Reply to this email directly or view it on GitHub.