instructions.html

<h2>Instructions</h2>
Here are some resources to get started:</p>
<!-- Quick Start -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/instructions/instructions-1.png" class="maxMinIcon">Quick Start
  </div>
  <div class="maxMinBox">
      <p class="indent"><em>First...</em><br>Select a plant. Arabidopsis (i.e., thale cress) is a good place to start.</p>
      <img src="http://bar.utoronto.ca/~eplant/img/instructions/select-a-plant.png" class="instructionPicture">
      <p class="indent"><em>Then...</em><br>Enter a gene ID or alias in the text box. At5g46240 is a nice one.</p>
      <img src="http://bar.utoronto.ca/~eplant/img/instructions/select-a-gene-textBox.png" class="instructionPicture">
      <p class="indent"><em>By the way...</em><br>You can also select genes by hovering over the chromosomes and pressing 'Get Data'.</p>
      <img src="http://bar.utoronto.ca/~eplant/img/instructions/select-a-gene.png" class="instructionPicture">
      <p class="indent"><em>You should know...</em><br>The title bar of the popup turns green if it is the Gene of Focus. The 'Get Data' button becomes 'Drop Data' if you change your mind.</p>
      <img src="http://bar.utoronto.ca/~eplant/img/instructions/annotationPopup.png" class="instructionPicture">      
      <p class="indent"><em>Finally...</em><br>Icons turn black when the data is fully downloaded. Select a view and begin exploring!</p>
      <img src="http://bar.utoronto.ca/~eplant/img/instructions/viewIcons.png" class="instructionPicture">      
  </div>
</div>

<!-- Advanced Guide -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/instructions/instructions-2.png" class="maxMinIcon">Advanced Guide
  </div>
  <div class="maxMinBox">
      <p class="indent"><em>Setting the Gene Of Focus</em><br>You can adjust the current Gene Of Focus via the combo box or by pressing the Star icon in another gene panel's title bar.</p>
      <img src="http://bar.utoronto.ca/~eplant/img/instructions/geneOfFocus.png" class="instructionPicture"> 
      <p class="indent"><em>Tags</em><br>You may tag genes however you like by selecting the colored dots in the gene panel. Tags appear next to gene labels in all the views that support this feature.</p>
      <img src="http://bar.utoronto.ca/~eplant/img/instructions/tags.png" class="instructionPicture"> 
      <p class="indent"><em>Top 50 Similar Button</em><br>...</p>
      <p class="indent"><em>Customize Gene Labels &amp; Whisker Sizes</em><br>...</p>
      <p class="indent"><em>Load &amp; Save Session Files</em><br>...</p>
  </div>
</div>

<!-- Video Tutorials -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/instructions/instructions-3.png" class="maxMinIcon">Video Tutorials
  </div>
  <div class="maxMinBox">
      <p class="indent">Coming soon!</p>
  </div>
</div>

<!-- VIEWS SECTION -->
<p>&nbsp;</p>
<p>
<h2>Views</h2>
Explore various levels of biological data with the following views: </p>
<!-- Species Selector -->
<div class="maxMinWindow">
	<div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
    		<img src="http://bar.utoronto.ca/~eplant/img/available/species.png" class="maxMinIcon">Species Selector
  </div>
  <div class="maxMinBox">
  		<p class="indent">Select the plant you wish to explore. ePlant currently supports the following species:
      <ul>
      <li>Arabidopsis thaliana</li>
      <greyText><li>Solanum tuberosum (potato)</li>
      <li>Solanum lycopersicum (tomato)</li>
      <li>Populus trichocarpa (poplar).</li></greyText></p>
 	</div>
</div>


<!-- World eFP -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/available/world.png" class="maxMinIcon">World eFP
  </div>
  <div class="maxMinBox">
      <p class="indent">The World eFP is an electronic flurorescent pictograph that displays gene expression levels in various samples from around the world.</p>
  </div>
</div>

<!-- Plant eFP -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/available/plant.png" class="maxMinIcon">Plant eFP
  </div>
  <div class="maxMinBox">
      <p class="indent">The Plant eFP viewer is an electronic flurorescent pictograph that displays gene expression patterns on the tissues of a cartoon plant. Stronger colors denote a higher level of expression. </p>
  </div>
</div>


<!-- Subcellular eFP -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/available/cell.png" class="maxMinIcon">Subcelluar eFP
  </div>
  <div class="maxMinBox">
      <p class="indent">The Subcellular eFP is an electronic flurorescent pictograph that displays the documented and predicted expression patterns of genes on a cartoon image of a cell.</p>
  </div>
</div>


<!-- Experimental eFP -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/available/experiment.png" class="maxMinIcon">Experimental eFP
  </div>
  <div class="maxMinBox">
      <p class="indent">The Experimental eFP views provide a graphic display of gene expression levels after exposure to stress, hormone, or other treatments. Experimental data currently available:</p>
      <ul>
      <li>none</li>
      </ul>
      <p class="indent">We will be adding more views over the next several months. Currently in the works:</p>
      <ul>
      <greyText><li>Abiotic Stress</li>
        <li>Abiotic Stress At-TAX</li>
        <li>Abiotic Stress II</li>
        <li>Biotic Stress</li>
        <li>Biotic Stress II</li>
        <li>Chemical Treatments</li>
        <li>Developmental RMA</li>
        <li>Developmental Map At-TAX</li>
        <li>Guard Cell</li>
        <li>Hormone</li>
        <li>Lateral Root Initiation</li>
        <li>Light Series</li>
        <li>Regeneration</li>
        <li>Root</li>
        <li>Root II</li>
        <li>Seed</li>
        <li>Tissue Specific</li>
      </greyText>
      </ul>
    </div>
  </div>


<!-- Chromosome Selector -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/available/chromosome.png" class="maxMinIcon">Chromosome Selector
  </div>
  <div class="maxMinBox">
      <p class="indent">This view provides a pictographic overview of the entire genome, displaying each of a plant's chromosomes as a series of vertical bars. It also indicates the positions of all the genes that have been downloaded.</p>
      <p class="indent">Enter a gene ID or alias in the text box and ePlant will automatically download all 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. There is an auto-complete function to help you identify genes by name.</p>
      <p class="indent">You can also load data by hovering over the chromosomes, selecting a gene from the popup listing all the genes at that position, then clicking the 'Get Data' button in the annotation panel of the selected gene.</p>
      <p class="indent">The current "Gene of Focus" can be adjusted with the combo box in the upper left corner, or by clicking on the star icon in the title bar of any open annotation panel.</p>
      <h4 class="indent">View Specific Tools</h4>
       <p class="indent"><img src="http://bar.utoronto.ca/~eplant/img/heatmap.png" width="25" style="float: left; margin-right: 10px;">The thermometer icon at the bottom of the canvas generates a heat map indicating the density of genes along the chromosome.</p>
       <p class="indent"><img src="http://bar.utoronto.ca/~eplant/img/annotation.png" width="25" style="float: left; margin-right: 10px;">The pencil icon opens an annotation tool that allows you to customize label colors and sizes. Multiple gene ID's can be entered if they are separated, by, commas. Choose a color and whisker size for the group using the selection tools.</p>
    </div>
</div>

<!-- Protein-Protein Interactions -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/available/interaction.png" class="maxMinIcon">Protein-Protein Interactions
  </div>
  <div class="maxMinBox">
      <p class="indent">The Protein-Protein Interactions viewer displays documented and predicted protein-protein interactions for the selected gene. This tool was written with <a href="http://cytoscape.github.io/cytoscape.js/">Cytoscape.js</a>, developed at the <a href="http://thedonnellycentre.utoronto.ca/">Donnolly Centre</a> at the University of Toronto.</p>
  </div>
</div>


<!-- Metabolic Pathways -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/available/pathway.png" class="maxMinIcon">Metabolic Pathways
  </div>
  <div class="maxMinBox">
      <p class="indent">This view displays reactome data, using <a href="http://cytoscape.github.io/cytoscape.js/">Cytoscape.js</a> to draw the nodes and edges.</p>
  </div>
</div>


<!-- Molecular Structure -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/available/molecule.png" class="maxMinIcon">3D Molecular Structure
  </div>
  <div class="maxMinBox">
      <p class="indent">This view displays a 3D molecular structure of the selected gene's protein product, from the Protein Data Bank, PDB, or predicted by Phyre.</p>
  </div>
</div>


<!-- Sequence Browser -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/available/sequence.png" class="maxMinIcon">Sequence Browser
  </div>
  <div class="maxMinBox">
      <p class="indent">The Sequence Browser is a full featured genome browser that allows you to explore your gene of interest from the individual nucleotide level all the way up to its place in the genome. This tool is an implementation of <a href="http://jbrowse.org/">JBrowse</a> that has been customized to integrate with the rest of ePlant.</p>
  </div>
</div>




 <!-- OPTIONS SECTION -->
<p>&nbsp;</p>
<p>
<h2>Options</h2>
At the bottom of the canvas there are several icons for controlling cross application options:</p>


<!-- Auto Citation -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/citation.png" class="maxMinIcon">Auto Citation
  </div>
  <div class="maxMinBox">
      <p class="indent">The Auto Citation tool dynamically generates citation text according to which gene and view is currently active. We appreciate citations, thanks!</p>
  </div>
</div>

<!-- Screen Grab -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/getimage.png" class="maxMinIcon">Screen Grab
  </div>
  <div class="maxMinBox">
      <p class="indent">The Screen Grab tool creates a PNG image of the current canvas without any of the the user interface controls so you can create clean diagrams for publication.</p>
  </div>
</div>

<!-- Tooltips On/Off -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/on/tooltip.png" class="maxMinIcon">Tooltips On/Off
  </div>
  <div class="maxMinBox">
      <p class="indent">This icon toggles the tooltip display setting on and off. The default is on, however once you become familiar with the interface you may prefer to turn it off.</p>
  </div>
</div>


<!-- Zoom Animations -->
<div class="maxMinWindow">
  <div class="maxMinTitle_bar">
    <div class="maxMinButton">-</div>
        <img src="http://bar.utoronto.ca/~eplant/img/on/zoom.png" class="maxMinIcon">Zoom Animations On/Off
  </div>
  <div class="maxMinBox">
      <p class="indent">Animated transitions help establish the conceptual hierarchy between the various views. We like them, but you can toggle them on or off according to your personal preference.</p>
  </div>
</div>