135c5c06f4aa65c8d660b621f682ef88559c5f59 kate Thu Oct 6 14:19:39 2016 -0700 Improvements to visual layout of tissue table, using design from Jeff West (DRAFT03c_BodyMapBrowserPage.pdf). refs #17639 diff --git src/hg/hgGtexTrackSettings/hgGtexTrackSettings.html src/hg/hgGtexTrackSettings/hgGtexTrackSettings.html index 2c58fd3..440f3ae 100644 --- src/hg/hgGtexTrackSettings/hgGtexTrackSettings.html +++ src/hg/hgGtexTrackSettings/hgGtexTrackSettings.html @@ -10,176 +10,186 @@ <select id="selectVisibility" class="gbSelect"> <option>hide</option> <option>dense</option> <option>squish</option> <option>pack</option> <option>full</option> </select> <div class="goButtonContainer" title="Go to the Genome Browser"> <div class="gbGoButton">GO</div> <i class="gbGoIcon fa fa-play fa-2x"></i> </div> </div> </div> - <div id="configureSectionTitle" class="row gbSectionTitle"> - <div class="col-md-10">Configure</div> + <div id="configureSectionTitle" class="row gbSectionBanner"> + <div class="gbSectionTitle col-md-10">Configure</div> <div class="col-md-2 text-right"> <div class="goButtonContainer" title="Go to the Genome Browser"> <div class="gbGoButton">GO</div> <i class="gbGoIcon fa fa-play fa-2x"></i> </div> </div> </div> +<!-- row 1 --> <div class="row"> <div class="configurator col-md-4"> - <b>Label</b>: + <b>Label</b>: <input type="radio" name="gtexGene.label" value="name"> gene symbol <input type="radio" name="gtexGene.label" value="accession"> accession <input type="radio" name="gtexGene.label" value="both"> both </div> - <div class="configurator col-md-4"> -<b>Limit to protein coding genes:</b> -<INPUT TYPE=CHECKBOX NAME="gtexGene.codingOnly" VALUE=on ><INPUT TYPE=HIDDEN NAME='boolshad.gtexGene.codingOnly' VALUE='0' class='cbShadow'> - </div> - <div class="configurator col-md-4"> + <div class="configurator col-md-8"> <b>Show GTEx gene model</b> <INPUT TYPE=CHECKBOX NAME="gtexGene.showExons" VALUE=on ><INPUT TYPE=HIDDEN NAME='boolshad.gtexGene.showExons' VALUE='0' class='cbShadow'> </div> + </div> - <div class="row"> +<!-- row 2 --> + <div class="row"> <div class="configurator col-md-4"> <b>Log10 transform:</b> <INPUT TYPE=CHECKBOX NAME="gtexGene.logTransform" VALUE=on onchange='gtexTransformChanged("gtexGene")' CHECKED><INPUT TYPE=HIDDEN NAME='boolshad.gtexGene.logTransform' VALUE='0' class='cbShadow'> </div> <div class="configurator col-md-8"> <span class='gtexGeneViewLimitsMaxLabel disabled'><b>View limits maximum:</b></span> <INPUT TYPE=TEXT NAME="gtexGene.maxLimit" SIZE=4 VALUE=300 disabled><span class='gtexGeneViewLimitsMaxLabel disabled'> RPKM (range 0-711778)</span> </div> </div> +<!-- row 3 --> <div class="row"> - <div class="configurator col-md-12"> - <b>Show only items with score at or above:</b> + <div class="configurator col-md-4"> + <b>Limit to protein coding genes:</b> + <INPUT TYPE=CHECKBOX NAME="gtexGene.codingOnly" VALUE=on ><INPUT TYPE=HIDDEN NAME='boolshad.gtexGene.codingOnly' VALUE='0' class='cbShadow'> + </div> + + <div class="configurator col-md-8"> + <b>Limit to genes scored at or above:</b> <input id="scoreInput" value="" size="8"> (range 0-1000) </div> </div> - <!--<div class="gbPanel"> </div> --> + <!--<div class="spacer"> </div> */ --> + +<!-- end configure panel --> - <div id="tissueSectionTitle" class="row gbSectionTitle""> - <div class="col-md-6">Choose Tissues</div> +<!-- tissue chooser panel --> + + <div id="tissueSectionTitle" class="row gbSectionBanner""> + <div class="gbSectionTitle col-md-6">Choose Tissues</div> <div class="col-md-6 text-right"> - <div class="goButtonContainer gbWhiteButton">set all</div> - <div class="goButtonContainer gbWhiteButton">clear all</div> + <div class="goButtonContainer gtButton gbWhiteButton">set all</div> + <div class="goButtonContainer gtButton gbWhiteButton">clear all</div> <input class="gbSearch" TYPE="text" VALUE="Search" class="gbButton"> <div class="goButtonContainer" title="Go to the Genome Browser"> <div class="gbGoButton">GO</div> <i class="gbGoIcon fa fa-play fa-2x"></i> </div> </div> </div> <div id="tissueSection" class="row"> - <div id="bodyMap" class="col-md-6"> + <div id="bodyMap" class="col-md-7"> <!--<img height="800px" class="gbImage gtexBodyMap" src="/images/bodyMap/jwBody.png">--> <!--<img height="800px" class="gbImage gtexBodyMap" src="/images/bodyMap/bodyMap.svg"> --> <!--<object type="image/svg+xml" height="800px" class="gbImage gtexBodyMap" data="/images/bodyMap.svg">--> - <object type="image/svg+xml" class="gbImage gtexBodyMap" data="/images/bodyMap.svg"> + <object id="bodyMapSvg" type="image/svg+xml" class="gbImage gtexBodyMap" data="/images/bodyMap.svg"> Body Map illustration not found </object> </div> - <div id="tissueTable" class="col-md-6"> + <div class="col-md-5"> <p> - <table> -<tr class='tissueRow'><td bgcolor=#FFA54F> </td><td class=tissueCell id='adiposeSubcut'> Adipose - Subcutaneous</td> - <td bgcolor=#EEC591> </td><td id='colonTransverse'> Colon - Transverse</td></tr> + <table class='tissueTable'> + +<tr class='tissueRow'><td class='tissueColor' bgcolor=#FFA54F> </td><td class='tissueLabel' id='adiposeSubcut'> Adipose - Subcutaneous</td> + <td class='tissueColor' bgcolor=#EEC591> </td><td class='tissueLabel' id='colonTransverse'> Colon - Transverse</td></tr> -<tr class='tissueRow' ><td bgcolor=#EE9A00> </td><td id='adiposeVisceral'> Adipose - Visceral (Omentum)</td> - <td bgcolor=#8B7355> </td><td id='esophagusJunction'> Esophagus - Gastroesophageal Junction</td></tr> +<tr class='tissueRow' ><td class='tissueColor' bgcolor=#EE9A00> </td><td class='tissueLabel' id='adiposeVisceral'> Adipose - Visceral (Omentum)</td> + <td class='tissueColor' bgcolor=#8B7355> </td><td class='tissueLabel' id='esophagusJunction'> Esophagus - Gastroesophageal Junction</td></tr> -<tr class='tissueRow' ><td bgcolor=#8FBC8F> </td><td id='adrenalGland'> Adrenal Gland</td> - <td bgcolor=#8B7355> </td><td id='esophagusMucosa'> Esophagus - Mucosa</td></tr> +<tr class='tissueRow' ><td class='tissueColor' bgcolor=#8FBC8F> </td><td class='tissueLabel' id='adrenalGland'> Adrenal Gland</td> + <td class='tissueColor' bgcolor=#8B7355> </td><td class='tissueLabel' id='esophagusMucosa'> Esophagus - Mucosa</td></tr> -<tr class='tissueRow' id='arteryAorta'><td bgcolor=#8B1C62> </td><td> Artery - Aorta</td> - <td bgcolor=#CDAA7D> </td><td id='esophagusMuscular'> Esophagus - Muscularis</td></tr> +<tr class='tissueRow' id='arteryAorta'><td class='tissueColor' bgcolor=#8B1C62> </td><td class='tissueLabel'> Artery - Aorta</td> + <td class='tissueColor' bgcolor=#CDAA7D> </td><td class='tissueLabel' id='esophagusMuscular'> Esophagus - Muscularis</td></tr> -<tr class='tissueRow' id='arteryCoronary'><td bgcolor=#EE6A50> </td><td> Artery - Coronary</td> - <td bgcolor=#EED5D2> </td><td id='fallopianTube'> Fallopian Tube</td></tr> +<tr class='tissueRow' id='arteryCoronary'><td class='tissueColor' bgcolor=#EE6A50> </td><td class='tissueLabel'> Artery - Coronary</td> + <td class='tissueColor' bgcolor=#EED5D2> </td><td class='tissueLabel' id='fallopianTube'> Fallopian Tube</td></tr> -<tr class='tissueRow' id='arteryTibial'><td bgcolor=#FF0000> </td><td> Artery - Tibial</td> - <td bgcolor=#B452CD> </td><td id='heartAtrialAppend'> Heart - Atrial Appendage</td></tr> +<tr class='tissueRow' id='arteryTibial'><td class='tissueColor' bgcolor=#FF0000> </td><td class='tissueLabel'> Artery - Tibial</td> + <td class='tissueColor' bgcolor=#B452CD> </td><td class='tissueLabel' id='heartAtrialAppend'> Heart - Atrial Appendage</td></tr> -<tr class='tissueRow' id='bladder'><td bgcolor=#CDB79E> </td><td> Bladder</td> - <td bgcolor=#7A378B> </td><td id='heartLeftVentricl'> Heart - Left Ventricle</td></tr> +<tr class='tissueRow' id='bladder'><td class='tissueColor' bgcolor=#CDB79E> </td><td class='tissueLabel'> Bladder</td> + <td class='tissueColor' bgcolor=#7A378B> </td><td class='tissueLabel' id='heartLeftVentricl'> Heart - Left Ventricle</td></tr> -<tr class='tissueRow' id='brainAmygdala'><td bgcolor=#EEEE00> </td><td> Brain - Amygdala</td> - <td bgcolor=#CDB79E> </td><td id='kidneyCortex'> Kidney - Cortex</td></tr> +<tr class='tissueRow' id='brainAmygdala'><td class='tissueColor' bgcolor=#EEEE00> </td><td class='tissueLabel'> Brain - Amygdala</td> + <td class='tissueColor' bgcolor=#CDB79E> </td><td class='tissueLabel' id='kidneyCortex'> Kidney - Cortex</td></tr> -<tr class='tissueRow' id='brainAnCinCortex'><td bgcolor=#EEEE00> </td><td> Brain - Anterior cingulate cortex (BA24)</td> - <td bgcolor=#CDB79E> </td><td id='liver'> Liver</td></tr> +<tr class='tissueRow' id='brainAnCinCortex'><td class='tissueColor' bgcolor=#EEEE00> </td><td class='tissueLabel'> Brain - Anterior cingulate cortex (BA24)</td> + <td class='tissueColor' bgcolor=#CDB79E> </td><td class='tissueLabel' id='liver'> Liver</td></tr> -<tr class='tissueRow' id='brainCaudate'><td bgcolor=#EEEE00> </td><td> Brain - Caudate (basal ganglia)</td> - <td bgcolor=#9ACD32> </td><td id='lung'> Lung</td></tr> +<tr class='tissueRow' id='brainCaudate'><td class='tissueColor' bgcolor=#EEEE00> </td><td class='tissueLabel'> Brain - Caudate (basal ganglia)</td> + <td class='tissueColor' bgcolor=#9ACD32> </td><td class='tissueLabel' id='lung'> Lung</td></tr> -<tr class='tissueRow' id='brainCerebelHemi'><td bgcolor=#EEEE00> </td><td> Brain - Cerebellar Hemisphere</td> - <td bgcolor=#CDB79E> </td><td id='minorSalivGland'> Minor Salivary Gland</td></tr> +<tr class='tissueRow' id='brainCerebelHemi'><td class='tissueColor' bgcolor=#EEEE00> </td><td class='tissueLabel'> Brain - Cerebellar Hemisphere</td> + <td class='tissueColor' bgcolor=#CDB79E> </td><td class='tissueLabel' id='minorSalivGland'> Minor Salivary Gland</td></tr> -<tr class='tissueRow' id='brainCerebellum'><td bgcolor=#EEEE00> </td><td> Brain - Cerebellum</td> - <td bgcolor=#7A67EE> </td><td id='muscleSkeletal'> Muscle - Skeletal</td></tr> +<tr class='tissueRow' id='brainCerebellum'><td class='tissueColor' bgcolor=#EEEE00> </td><td class='tissueLabel'> Brain - Cerebellum</td> + <td class='tissueColor' bgcolor=#7A67EE> </td><td class='tissueLabel' id='muscleSkeletal'> Muscle - Skeletal</td></tr> -<tr class='tissueRow' id='brainCortex'><td bgcolor=#EEEE00> </td><td> Brain - Cortex</td> - <td bgcolor=#FFD700> </td><td id='nerveTibial'> Nerve - Tibial</td></tr> +<tr class='tissueRow' id='brainCortex'><td class='tissueColor' bgcolor=#EEEE00> </td><td class='tissueLabel'> Brain - Cortex</td> + <td class='tissueColor' bgcolor=#FFD700> </td><td class='tissueLabel' id='nerveTibial'> Nerve - Tibial</td></tr> -<tr class='tissueRow' id='brainFrontCortex'><td bgcolor=#EEEE00> </td><td> Brain - Frontal Cortex (BA9)</td> - <td bgcolor=#FFB6C1> </td><td id='ovary'> Ovary</td></tr> +<tr class='tissueRow' id='brainFrontCortex'><td class='tissueColor' bgcolor=#EEEE00> </td><td class='tissueLabel'> Brain - Frontal Cortex (BA9)</td> + <td class='tissueColor' bgcolor=#FFB6C1> </td><td class='tissueLabel' id='ovary'> Ovary</td></tr> -<tr class='tissueRow' id='brainHippocampus'><td bgcolor=#EEEE00> </td><td> Brain - Hippocampus</td> - <td bgcolor=#CD9B1D> </td><td id='pancreas'> Pancreas</td></tr> +<tr class='tissueRow' id='brainHippocampus'><td class='tissueColor' bgcolor=#EEEE00> </td><td class='tissueLabel'> Brain - Hippocampus</td> + <td class='tissueColor' bgcolor=#CD9B1D> </td><td class='tissueLabel' id='pancreas'> Pancreas</td></tr> -<tr class='tissueRow' id='brainHypothalamus'><td bgcolor=#EEEE00> </td><td> Brain - Hypothalamus</td> - <td bgcolor=#B4EEB4> </td><td id='pituitary'> Pituitary</td></tr> +<tr class='tissueRow' id='brainHypothalamus'><td class='tissueColor' bgcolor=#EEEE00> </td><td class='tissueLabel'> Brain - Hypothalamus</td> + <td class='tissueColor' bgcolor=#B4EEB4> </td><td class='tissueLabel' id='pituitary'> Pituitary</td></tr> -<tr class='tissueRow' id='brainNucAccumbens'><td bgcolor=#EEEE00> </td><td> Brain - Nucleus accumbens (basal ganglia)</td> - <td bgcolor=#D9D9D9> </td><td id='prostate'> Prostate</td></tr> +<tr class='tissueRow' id='brainNucAccumbens'><td class='tissueColor' bgcolor=#EEEE00> </td><td class='tissueLabel'> Brain - Nucleus accumbens (basal ganglia)</td> + <td class='tissueColor' bgcolor=#D9D9D9> </td><td class='tissueLabel' id='prostate'> Prostate</td></tr> -<tr class='tissueRow' id='brainPutamen'><td bgcolor=#EEEE00> </td><td> Brain - Putamen (basal ganglia)</td> - <td bgcolor=#3A5FCD> </td><td id='skinNotExposed'> Skin - Not Sun Exposed (Suprapubic)</td></tr> +<tr class='tissueRow' id='brainPutamen'><td class='tissueColor' bgcolor=#EEEE00> </td><td class='tissueLabel'> Brain - Putamen (basal ganglia)</td> + <td class='tissueColor' bgcolor=#3A5FCD> </td><td class='tissueLabel' id='skinNotExposed'> Skin - Not Sun Exposed (Suprapubic)</td></tr> -<tr class='tissueRow' id='brainSpinalcord'><td bgcolor=#EEEE00> </td><td> Brain - Spinal cord (cervical c-1)</td> - <td bgcolor=#1E90FF> </td><td id='skinExposed'> Skin - Sun Exposed (Lower leg)</td></tr> +<tr class='tissueRow' id='brainSpinalcord'><td class='tissueColor' bgcolor=#EEEE00> </td><td class='tissueLabel'> Brain - Spinal cord (cervical c-1)</td> + <td class='tissueColor' bgcolor=#1E90FF> </td><td class='tissueLabel' id='skinExposed'> Skin - Sun Exposed (Lower leg)</td></tr> -<tr class='tissueRow' id='brainSubstanNigra'><td bgcolor=#EEEE00> </td><td> Brain - Substantia nigra</td> - <td bgcolor=#CDB79E> </td><td id='smallIntestine'> Small Intestine - Terminal Ileum</td></tr> +<tr class='tissueRow' id='brainSubstanNigra'><td class='tissueColor' bgcolor=#EEEE00> </td><td class='tissueLabel'> Brain - Substantia nigra</td> + <td class='tissueColor' bgcolor=#CDB79E> </td><td class='tissueLabel' id='smallIntestine'> Small Intestine - Terminal Ileum</td></tr> -<tr class='tissueRow' id='breastMamTissue'><td bgcolor=#CDCD> </td><td> Breast - Mammary Tissue</td> - <td bgcolor=#CDB79E> </td><td id='spleen'> Spleen</td></tr> +<tr class='tissueRow' id='breastMamTissue'><td class='tissueColor' bgcolor=#CDCD> </td><td class='tissueLabel'> Breast - Mammary Tissue</td> + <td class='tissueColor' bgcolor=#CDB79E> </td><td class='tissueLabel' id='spleen'> Spleen</td></tr> -<tr class='tissueRow' id='xformedlymphocytes'><td bgcolor=#EE82EE> </td><td> Cells - EBV-transformed lymphocytes</td> - <td bgcolor=#FFD39B> </td><td id='stomach'> Stomach</td></tr> +<tr class='tissueRow' id='xformedlymphocytes'><td class='tissueColor' bgcolor=#EE82EE> </td><td class='tissueLabel'> Cells - EBV-transformed lymphocytes</td> + <td class='tissueColor' bgcolor=#FFD39B> </td><td class='tissueLabel' id='stomach'> Stomach</td></tr> -<tr class='tissueRow' id='xformedfibroblasts'><td bgcolor=#9AC0CD> </td><td> Cells - Transformed fibroblasts</td> - <td bgcolor=#A6A6A6> </td><td id='testis'> Testis</td></tr> +<tr class='tissueRow' id='xformedfibroblasts'><td class='tissueColor' bgcolor=#9AC0CD> </td><td class='tissueLabel'> Cells - Transformed fibroblasts</td> + <td class='tissueColor' bgcolor=#A6A6A6> </td><td class='tissueLabel' id='testis'> Testis</td></tr> -<tr class='tissueRow' id='ectocervix'><td bgcolor=#EED5D2> </td><td> Cervix - Ectocervix</td> - <td bgcolor=#8B45> </td><td id='thyroid'> Thyroid</td></tr> +<tr class='tissueRow' id='ectocervix'><td class='tissueColor' bgcolor=#EED5D2> </td><td class='tissueLabel'> Cervix - Ectocervix</td> + <td class='tissueColor' bgcolor=#8B45> </td><td class='tissueLabel' id='thyroid'> Thyroid</td></tr> -<tr class='tissueRow' id='endocervix'><td bgcolor=#EED5D2> </td><td> Cervix - Endocervix</td> - <td bgcolor=#EED5D2> </td><td id='uterus'> Uterus</td></tr> +<tr class='tissueRow' id='endocervix'><td class='tissueColor' bgcolor=#EED5D2> </td><td class='tissueLabel'> Cervix - Endocervix</td> + <td class='tissueColor' bgcolor=#EED5D2> </td><td class='tissueLabel' id='uterus'> Uterus</td></tr> -<tr class='tissueRow' id='colonSigmoid'><td bgcolor=#CDB79E> </td><td> Colon - Sigmoid</td> - <td bgcolor=#EED5D2> </td><td id='vagina'> Vagina</td></tr> +<tr class='tissueRow' id='colonSigmoid'><td class='tissueColor' bgcolor=#CDB79E> </td><td class='tissueLabel'> Colon - Sigmoid</td> + <td class='tissueColor' bgcolor=#EED5D2> </td><td class='tissueLabel' id='vagina'> Vagina</td></tr> -<tr class='tissueRow' id='wholeBlood'><td bgcolor=#FF00FF> </td><td> Whole Blood</td></tr> +<tr class='tissueRow' id='wholeBlood'><td class='tissueColor' bgcolor=#FF00FF> </td><td class='tissueLabel'> Whole Blood</td></tr> </table> </div> </div> </div> </div>