cg-animate.md

cg-animation

# CG #

> #### Overall Issues: ####
* Performance on lower powered devices when animating & retrieving data in parallel.
* Intercept route changes, navigate + trigger: false
* identify end state as next view's initial state
* Possible library http://ricostacruz.com/jquery.transit/
* Add explorer viewstate to Session variable
* Can *n* number of genes be shown at the same time with current drawing utils?


### Karyogram -> Chromosome Explorer ###

#### Karyogram View UI Updates #####
* Update chromosome images (new purple markers)
* Update Chromosome box design

#### Interaction Example ####

* Click chr1
* Position new copy of chr1 over clicked chr1 (needs to be position:absolute on the page)
* fade out original chr1, fade in new chr
* Animate chr1 to final WxH and position ( replace with img/cytogenomic/chr1.svg + end caps ?)
* navigate explorer/chr1  (trigger: false)
* 'Leave' animation of content area
* 'Enter' animation of updated content area
* load Chromosome view

>Issue: SVG+caps should be okay, but inset shadow will be stretched.

>Issue: Perhaps drop the inset shadow and replace with CSS if needed.
  

#### Chromosome Explorer View UI Updates #####
* Replace current chromosome viz with new design (large/ purple)
* Replace current gene pointers with those from new design (circles with count inside)
* Pointer + band on the Chromosome needs to be clickable, have hover state
* Apply new design to Gene Track
* Apply new design to Variant Track
* Move MiniKaryogram below the Chromosome


### Chromosome	-> Gene ###

#### Interaction Example: ####
* Click pointer #2
* 'Enter' animation for gene track, appears above Chromosome
* Gene track contaner pointer aligns with the top of the Chromosome marker
* Pushes all UI down the page
* Scroll to top


### Gene -> Variant ###

#### Interaction Example: ####
* Click gene #1
* 'Enter' animation for variant track, appears above gene track
* Pushes all UI down the page
* Scroll to top
* Clicking on Variant pointer shows variant detail popover


### Detail Pages Explorer Map Component ###

* Develop a reusable component representing the current Explorer state
* Fits in side bar of Details pages, non-interactive
* Clicking returns user to Explorer
* Should represent (where applicable) Chromosome, Gene Track, Variant Track, Variant Visualization

#### Variant Detail View UI Updates #####
* Update content layout according to design
* Move side bar to left
* Add Explorer Map Component to sidebar


#### Chromosome Detail View UI Updates #####
* Update content layout according to design
* Move side bar to left
* Add Explorer Map Component to sidebar

### Variant -> Variant Detail ###

* Click 'Read More About...'
* Animate Explorer collapsing horizontally and changing position to Details Sidebar
* navigate variant/vID (trigger: false)
* Load variant details view

### Chromosome -> Chromosome Detail ###

* Click 'Read More About...'
* Animate Explorer collapsing horizontally and changing position to Details Sidebar
* navigate variant/vID (trigger: false)
* Load variant details view


##  TASKS  ##

1. Chromosome Explorer View UI Updates ( not animated, just hide/show )
    * Replace current chromosome viz with new design (large/ purple)
    * Replace current gene pointers with those from new design (circles with count inside)
    * Pointer + band on the Chromosome needs to be clickable, have hover state
    * Move MiniKaryogram below the Chromosome
2. Apply new design to Gene Track
    * Add close icon & functionality
3. Apply new design to Variant Track
    * Add close icon & functionality
4. Animate Chromosome to Gene
5. Animate Gene to Variant
6. Variant Detail View UI Updates
7. Chromosome Detail View UI Updates
8. Develop Detail Pages Explorer Map Component
9. Transition from Karyogram to Chromosome Explorer
10. Transition from Chromosome Explorer to Variant Details
11. Transition from Chromosome Explorer to Chromosome Details
12. Transition from Variant Details to Chromosome Explorer
13. Transition from Chromosome Details to Chromosome Explorer