9d466707e0a2fff3df7453c54b5131c46ad8cc61 mspeir Fri Nov 8 20:56:23 2024 -0800 Adding initial pass of tutorial text, refs #30335 diff --git docs/gb101.md docs/gb101.md index 7984535..bb3e36e 100644 --- docs/gb101.md +++ docs/gb101.md @@ -6,51 +6,52 @@ - Basic Navigation - Basic Table Browser Query - Basic BLAT Query ## Sections Use the sections below to learn about the UCSC Genome Browser interface. <div class="row" style="padding-top: 15px"> <div class="col-md-4"> <div class="panel panel-default" style="padding-bottom: 10px"> <h3 class="panel-title" style="width: -webkit-fill-available;" >Genome Browser Interface</h3> -Annotated screenshot of the Genome Browser interface. Explains what all the buttons do +Annotated screenshot of the Genome Browser interface. <p style="text-align: end"> <button>[View](#annot-screenshot)</button> </p> </div> </div> + <div class="col-md-4"> <div class="panel panel-default" style="padding-bottom: 10px"> <h3 class="panel-title" style="width: -webkit-fill-available;" >Guided Workthrough</h3> -Explains the basis of using/navigating the Genome Browser interface. -Also explains a very basic Table Browser query and BLAT query. +Explains the basics of using/navigating the Genome Browser interface. <p style="text-align: end"> <button>[View](#guided-work)</button> </p> </div> </div> -<div class="col-md-4" style="padding-top: 15px"> + +<div class="col-md-4"> <div class="panel panel-default" style="padding-bottom: 10px"> <h3 class="panel-title" style="width: -webkit-fill-available;" >Interactive Tutorial</h4> Steps you through the basic functionality in the Genome Browser itself. <p style="text-align: end"> <button>[View](../cgi-bin/hgTracks?#showTutorial)</button> </p> </div> </div> </div> ## Annotated Screenshot @@ -58,114 +59,255 @@ ```image src=../images/annot-screenshot-sarCov2.jpg width=30% ```  | Item | Explanation | |------|-------------| | Menu | Find BLAH | (We need something below the table otherwise later markdown isnt properly interpreted) ## Guided Workthorugh -This walkthrough will take you through the basic Genome Browser functionality. - -By the end of the workthrough you should be able to do these three things: - -1. Naviagte the Genome Browser Interface -2. Perform a basic Table Browser query -3. Perform a simple BLAT query - -### Genome Browser Basics - -In this guided walkthrough, we go from selecting our genome (hg38 in this -case), to going to our gene of interest (BLAH), to turning off and on some of -our favorite tracks, before finally BLAH. +This walkthrough will take you through the basic Genome Browser functionality teaching you how to +turn on and off tracks, BLAH, and BLAH. -#### Step 1: Choose your genome +### Navigating the Menus <!-- We are going to use bootstrap columns to put the image/text side by side Alternate the images left/right between different sections, mostly for aesthetics ---> <div class="row"> <div class="col-md-6"> <img src="../images/GenomeSelect.jpg" alt="Genome selection" style="max-width:100%;"> </div> <div class="col-md-6"> -Go to BLAH, select your genome from the diagram or search for in the search box at the top left of the screen. +The navigation bar at the top of the page will allow you to access our tools, downloads, and help pages. + +There are five main drop-downs that are useful for most users: + +- Genomes - switch between the many genomes available. +- Genome Browser - configure, search for tracks, and reset the Genome Browser back to the default settings. +- Tools - access to features such as [BLAT](../cgi-bin/hgBlat), [isPCR](../cgi-bin/hgPcr), and [LiftOver](../cgi-bin/hgLiftOver). The [Table Browser](../cgi-bin/hgTables) can also export track data in various file formats. +- My Data - create stable short links ([Sessions](../cgi-bin/hgSession)) and visualize your own data via [custom tracks](../cgi-bin/hgCustom) or [track hubs](../cgi-bin/hgHubConnect). +- Help - access contact information, FAQs, and Browser Documentation. -For this walkthrough, we will select "Human" and stick with the default GRCh38/hg38 assembly. </div> </div> -<!-- note to self, something seems off with the image handling here? like too wide and not auto-fitting to the col --> - -#### Step 2: Navigate to your gene of interest +### Using the Search Box <div class="row"> <div class="col-md-6"> -After selecting a genome, enter a gene name into the search box. In our case, -we will enter "HUNK", a gene for BLAH, into the search box. +The search bar allows you to navigate to a region on the genome using [genome coordinates](https://genome-blog.soe.ucsc.edu/blog/2016/12/12/the-ucsc-genome-browser-coordinate-counting-systems/), +[gene symbols](https://genome.ucsc.edu/FAQ/FAQgenes.html#genename), +[rsIDs](https://www.ncbi.nlm.nih.gov/snp/docs/RefSNP_about/#what-is-a-reference-snp), +[HGVS](http://varnomen.hgvs.org/) terms, or DNA sequence. You can even +search documentation and FAQ pages using this search bar. A few example queries +are: + +- chr1:127140001-127140001 +- SOD1 +- rs2569190 +- NM_198056.3:c.1654G>T +- CCTTCCTATAGTCCGGAATACGCC +AATGGCGCGGCCGGCCTGGACC +ACTCCCATTACGGGGGTGTCCC +GGGCAGCGGGGCCGGAGGCTTA +ATGCAAAGGC + + + +Please note, [BLAT](https://genome.ucsc.edu/goldenPath/help/hgTracksHelp.html#BLATAlign) +is used if your search term is a DNA sequence. For the best +results, make sure your sequence is long enough to meet BLAT specifications. +The [examples](https://genome.ucsc.edu/goldenPath/help/query.html) +link next to the search bar contains even more search queries. -After typing in the name, select the gene name "HUNK" from the list that -appears below the search box. You will be taken directly to that gene location. </div> <div class="col-md-6"> <img src="../images/GeneSearch.jpg" alt="Genome selection" style="max-width:100%;"> </div> </div> -#### Step 3: Configure the Genome Browser tracks +### Highlights and Zooming + +<div class="row"> +<div class="col-md-6"> + +<!-- +<img> here +--> + +</div> +<div class="col-md-6"> + +Dragging the Genome Browser image performs different tasks depending on where and how you click the image. + +Click-and-Drag the ruler at the top of the image will bring up a menu to zoom +into or highlight the region. Click-and-Drag anywhere else on the Genome +Browser image to scroll to the left or right. + +Alternatively, you can: + +- Hold **Alt+drag** or **Option+drag** to highlight +- Hold **Ctrl+drag** or **Cmd+drag** to zoom + +</div> +</div> + + +### Configuring Data Track Display <div class="row"> <div class="col-md-6"> -The horizontal lines of genomic data in the UCSC Genome Browser are known as **tracks**. they may BLAH, BLAH, and BLAH +Clicking on the rectangle box next to a track is an easy way to go to that +track's settings page quickly. + +[Right-clicking](../goldenPath/help/hgTracksHelp.html#RIGHT_CLICK_NAV) +on the track will also bring up a menu to change the display +mode, configure a track, or view a PNG image of the current window. </div> <div class="col-md-6"> <!-- <img> here --> </div> </div> -### Simple Table Browser Query +### Track Display Modes + +<div class="row"> +<div class="col-md-6"> -#### Step 1: +<!-- +<img> here +--> -BLAH +</div> +<div class="col-md-6"> -#### Step 2: +Annotation tracks can be entirely hidden or shown in four different ways that +take an increasing amount of vertical space: +[dense, squish, pack, and full](../goldenPath/help/hgTracksHelp.html#TRACK_CONT). -BLAH +*Pack display is the recommended visibility for most data types as it provides +the best balance of information and space.* -#### Step 3: +After changing a track's display mode, the change will not be applied until you +refresh the page. You can either refresh the page manually using your web +browser or click <button>refresh</button> on any of the track groups. -BLAH +</div> +</div> -### Simple BLAT Query +### Searching for Data Tracks -#### Step 1: +<div class="row"> +<div class="col-md-6"> -BLAH +Having trouble finding a dataset for your genome assembly? The +[Track Search](../cgi-bin/hgTracks?hgt_tSearch=track+search) +feature allows searching for terms in track names, descriptions, groups, and +ENCODE metadata. -#### Step 2: +More information about <button>track search</button> can be found on the following +[help page](../goldenPath/help/trackSearch.html). The Track Search feature can +also be accessed by hovering over the "Genome Browser" drop-down menu. -BLAH +</div> +<div class="col-md-6"> -#### Step 3: +<!-- +<img> here +--> -BLAH +</div> +</div> + +### Configuring the Genome Browser Display + +<div class="row"> +<div class="col-md-6"> + +<!-- +<img> here +--> + +</div> +<div class="col-md-6"> + +Use the <button>configure</button> button to customize graphic font, size, gridlines, and more. +This can be helpful when exporting an image for publication. + +You can also find a link to configure the browser image by hovering over the +"Genome Browser" drop-down menu. + +</div> +</div> + +### Viewing the Reverse Strand + +<div class="row"> +<div class="col-md-6"> + +By default, the UCSC Genome Browser displays the forward strand (5' to 3') but +can be configured to display the negative strand (3' to 5'). + +To reverse the genome orientation, click the <button>reverse</button> button, and the Genome +Browser image will flip to show either the negative or positive strand. + +</div> +<div class="col-md-6"> + +<!-- +<img> here +--> + +</div> +</div> + +### Getting Help Using the Genome Browser + +<div class="row"> +<div class="col-md-6"> + +<!-- +<img> here +--> + +</div> +<div class="col-md-6"> + +The [training page](../training/) has other guides and training videos. You can +also search the [mailing list archive](https://groups.google.com/a/soe.ucsc.edu/g/genome) +for previously answered questions. + +If you still have questions after searching the [FAQ page](../FAQ/) or +[Genome Browser User Guide](../goldenPath/help/hgTracksHelp.html) pages, +you can email the suitable mailing list for your inquiry from the +[Contact Us](../contacts.html) page. + +Follow our [citation guidelines](../cite.html) when using the Genome Browser +tool suite or data from the UCSC Genome Browser database in a research work +that will be published in a journal or on the Internet. + +In addition to the [relevant paper](goldenPath/pubs.html), please reference the Genome Browser website +in your manuscript: *http://genome.ucsc.edu*. + +</div> +</div>